/* 공통적용 */
html {scroll-behavior:smooth;}
body {overflow-x: hidden;}
body.scroll-lock {overflow-y: hidden;}
img {max-width: 100%;}
.inner {width: 90%; max-width: 1720px; margin: 0 auto; }
.bold {font-weight: 700;}
.colorMain {color: var(--mainColor);}
.icon {aspect-ratio: 1/1; font-size: 0;}
.icon img {width: 100%; height: 100%; object-fit: cover;}


/* 비메오, 유튜브 */
.video_container {position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;}
.video_container iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/* padding */
.p_tb {padding: 150px 0;}
.p_t {padding-top: 150px;}
.p_b {padding-bottom: 150px;}


/* table */
.tb_box table {width: 100%;}
.tb_box th,
.tb_box td {border: 1px solid var(--border); padding: 10px; vertical-align: middle; text-align: center;}
.tb_box th {background: var(--mainColor); color: #fff;}
.tb_box .pbox {text-align: left; display: flex; flex-direction: column; gap: 5px;}
.tb_box .pbox .p {padding-left: 15px; position: relative;}
.tb_box .pbox .p::before {display: block; content: "-"; position: absolute; left: 0; top: 0;}

.mt-60{margin-top: 60px !important;}
.mb-60{margin-bottom: 60px !important;}
select:focus{outline: none;}
input:focus{outline: none;}
textarea:focus{outline: none;}
input, select {-webkit-appearance: none;-moz-appearance: none;appearance: none;}


/* footer */
#footer {padding: 60px 0; background: #fff; border-top: 1px solid #ddd;}
#footer .tbox {display: flex; justify-content: space-between;align-items: end;}
#footer .tbox .ft_logo{display: inline-block;}
#footer .tbox .ft_logo img{max-width: 160px;}
#footer .menu {display: grid;grid-template-columns: repeat(2, 1fr); gap: 5px 0;}
#footer .menu li{position: relative; display: flex;}
#footer .menu li span{font-weight: 600; display: block; flex: 0 0 120px;}
#footer .copy{text-align: right;color: #666;padding-top: 30px;}
#footer li.btn-open-terms{font-weight: 600;}
#footer .nav ul{margin-top: 30px;}
#footer .nav ul li{font-size: 0.875rem;}
#footer .right .sns{display: flex; justify-content: right;}

/* header */
.border{border-bottom: 1px solid #F2E7DF;}
#header {width: 100%; height:100px; display: flex; align-items: center; position: fixed; z-index: 997;;}
#header .inner {display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 40px;}
#header .logo {font-size: 0;min-width: 120px; flex-shrink: 0;}
#header .logo img {height: 30px;min-width: 140px;}
#header .nav_wrap {width: 100%; height: 100%;display: flex;align-items: center; gap:80px;}
#header .nav_wrap.mo_wrap{justify-content: right;gap: 40px;}
#header .menu {display: flex; gap: 40px; align-items: center; color: #000; }
#header .menu > li {height: 100%; position: relative;}
#header .menu > li > a {height: 100%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; font-weight: 700; position: relative;}

#header .inner > .menu {min-width: 400px;}
#header .menu > li:hover > a::after {width: 100%;}
#header .submenu {
    display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.9);
    padding: 15px; text-align: center; min-width: 120px;
}
#header .menu li.mo_menu{display: none;}

#header .submenu > div {display: flex; flex-direction: column; gap: 15px}
#header .submenu > div > a {white-space: nowrap; display: block; color: #fff; font-size: 0.875rem; line-height: 1;}
#header .submenu > div > a:hover {font-weight: 700;}

#header.active {background: rgba(255,255,255, .9);}

#header .lang {font-size: 0.875rem; position: relative;cursor: pointer;}
#header .lang > a {display: flex;align-items: center;font-size: 0;}
/* #header .lang > a::after {
	display: block; content: ""; width: 5px; height: 5px; border-top: 1px solid #000; border-right: 1px solid #000;
	transform: rotate(135deg); margin-bottom: 4px;
} */
#header .langmenu {
	position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 5;
	border-radius: 10px; width: 70px; text-align: center; padding: 8px; background: #222; display: none;
}
#header .side .langmenu{width: auto;top: calc(100% + 11px);padding: 8px 16px;}
#header .side .langmenu a:hover{color: #fff;}
#header .langmenu a {display: block; padding: 2px 0; color: #aaa;}
#header .langmenu a.active {font-weight: 700; color: #fff;}
#header .hamberg{display: none;}
#header .ico_menu{display: flex; align-items: center;gap: 15px;}
#header .ico_menu .login{height: 30px;}
#header .ico_menu .login > a::before{content: ''; background: url(/img/ico_login-7b82cc134cbdb7a840f25b7987577b70.png) no-repeat; width: 30px; height: 30px;display: block;}
#header .lang > a::before{content: ''; background: url(/img/ico_lang-04f8b170040a6c0a3d4baf9f433137cb.png) no-repeat; width: 30px; height: 30px;display: block;}

#header .login {font-size: 0.875rem; position: relative;cursor: pointer;}
#header .login > a {display: flex;align-items: center;font-size: 0;}
#header .login_menu {
	position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 5;
	border-radius: 10px; width: 120px; text-align: center; padding: 8px; background: #222; display: none;
}
#header .side .login_menu{width: auto;top: calc(100% + 11px);padding: 8px 16px;}
#header .side .login_menu a:hover{color: #fff;}
#header .login_menu a {display: block; padding: 2px 0; color: #aaa;}
#header .login_menu a:hover {font-weight: 700; color: #fff;}

/* sub */
.sub_top {padding: 90px 0 0;}
.sub_top .inner {padding-bottom: 100px;margin-top:90px;}
.sub_top .titbox {display: flex; flex-direction: column; gap: 20px;}
.sub_top .cate {color: var(--mainColor); font-weight: 700; font-size: 1.5rem;}
.sub_top .tit {display: flex; flex-direction: column; gap: 50px;}
.sub_top .tit .big {font-size: 4.375rem; font-weight: 700; line-height: 1.3;}
.sub_top .tit .small {font-size: 2rem;}
.sub_top .descrip {font-size: 1.25rem; margin-top: 30px; line-height: 1.8;}
.sub_top .bg {height: 300px;}
.sub_top .bg img{ width: 100%; height: 100%; object-fit: cover;}
.sec_tit {margin-bottom: 50px;}
.sec_tit .big {font-size: 3rem; font-weight: 700;}
.sec_tit .small {font-size: 1.125rem; color: #555; margin-top: 20px;}

/* 팝업 */
.center-popup-backdrop,
.bottom-popup-backdrop {position: fixed;inset: 0;z-index: 999;background: rgba(0,0,0,.64);display: none;}

.center-popup-backdrop.is-open,
.bottom-popup-backdrop.is-open {display: flex;}
.center-popup-backdrop {align-items: center;justify-content: center;}
.center-popup {width: 90%;max-width: 460px;background: #fff;box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,.18);display: flex;flex-direction: column;overflow: hidden;margin: 0 auto;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.center-popup_body {padding: 40px 24px 0px}
.center-popup_title {font-size: 20px;font-weight: 600;line-height: 1.5;text-align: center;}
.center-popup_text {font-size: 0.9rem;color: rgba(0,0,0,.75);line-height: 1.5;}
.center-popup_footer {display: grid;grid-template-columns: repeat(2, 1fr);column-gap: 0.6rem;padding: 40px 24px 24px;}
.one_btn{width: 100%;}
.one_btn .btn{width: inherit; padding: 16px 24px; justify-content: right; height: inherit; background: inherit !important; border: inherit !important; color: #3BBEE8; font-weight: 700;}
.center-popup_footer .btn {height: 2.6rem;font-size: 0.9rem;}

.btn-open-terms{cursor: pointer;}
.terms-txt{max-height: 400px; overflow: auto; font-size:14px;}
.terms .one_btn .btn{display: inline-block; cursor: pointer; color: #3BBEE8;}
.terms .center-popup_body{padding-right: 10px; text-align: left; line-height:1.4;}
.terms .center-popup_title{padding-right: 15px; font-size: 20px; font-weight: 700;margin-bottom: 10px;}

.terms_wrap{display: flex;flex-direction: column;box-shadow: none;padding: 0; border-radius: 0; gap: 20px;line-height: 1.5;}
.sec .tit{font-weight: 700;}
.sec span{font-weight: 700;}
.terms-txt .terms_wrap br{display: none;}
.terms-txt .terms_wrap br.terms_br{display: block;}
.terms .center-popup_body{padding-right: 17px;}

body.is-scroll-locked {overflow: hidden;touch-action: none;}

.product_img{position: relative;}
.badge{background: #ccc;font-size: 0.875rem; position: absolute; left: 15px; top: 15px; font-weight: 600; border-radius: 10px; padding: 4px 10px;}
.badge.new{background: #FFCC00;}

.center-popup .btn{border-radius: 10px;height: 42px; border: 1px solid #777;background: #fff; cursor: pointer;}
.center-popup .btn-primary{background: #051766; color: #fff; border: 1px solid #051766;}

.swiper_box {position: relative; font-size: 0;}
.swiper-button-next {background-image: url('/img/swiper_btn_next-3659a08a88fa27a7a075f38c262f6356.png'); right: 120px;top: calc(50% + 45px);}
.swiper-button-prev {background-image: url('/img/swiper_btn_prev-d0276ae6cb8c29fcc5412b2a0e46037a.png'); left: 120px;top: calc(50% + 45px);}
.swiper-button-next,
.swiper-button-prev {
    width: 40px; height: 40px; overflow: hidden; background-position: center center; background-repeat: no-repeat; background-size: contain;
    transition: all .3s; z-index: 2;
}
.swiper-button-next:after,
.swiper-button-prev:after {font-size: 0;}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {opacity: 0;}

/* board */
.board_list {max-width: 1200px; margin: 0 auto;}
.board_list .bd_hd {border-top: 1px solid #000;}
.board_list ul {border-bottom: 1px solid #000; display: flex; gap: 10px;}
.board_list li {height: 50px; display: flex; align-items: center; justify-content: center;}
.board_list li.number {width: 50px; flex-shrink: 0; text-align: center;}
.board_list li.date {width: 100px; flex-shrink: 0; text-align: center; margin-left: auto;}
.board_list li.author {width: 100px; flex-shrink: 0; text-align: center; margin-left: auto;}
.board_list li.subject {flex: 1 0 0; min-width: 0;}
.board_list li.subject a {display: block; width: 100%; height: 100%; line-height: 50px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board_list li.subject a:hover {color: #051766 }

.board_view {max-width: 100%; margin: 0 auto;}
.board_view .contents {display: flex; flex-direction: column; gap: 60px; padding-bottom: 60px; border-bottom: 1px solid #000; }
.board_view .title {padding-bottom: 20px; border-bottom: 1px solid #000;}
.board_view .title .subject {font-size: 2rem;}
.board_view .title .date { font-size: 0.875rem; margin-top: 10px; color: #7a6161;}
.board_view .goList {margin-left: auto; margin-top: 60px; width: 150px;}



@media screen and (max-width:1400px) {
    #header .inner > .menu{display: none;}

    #header .nav_wrap {
        position: fixed; top: 0; left: -100%; background: rgba(0,0,0,.95); width: 100%; height: 100vh;
        transition: all .3s; z-index: 1;justify-content: left;
    }
    #header .nav_wrap.on {left: 0; display: flex; flex-direction: column; align-items: center;justify-content: center;}

    #header .hamberg {width: 24px; height: 24px; font-size: 0; display: flex; align-items: center; cursor: pointer; position: relative; z-index: 2;}
    #header .hamberg img{display: none;}
    #header .hamberg span {width: 100%; height: 2px; background: #000; display: block; position: relative; transition: all .3s;}
    #header .hamberg span::before,
    #header .hamberg span::after {display: block; content: ""; width: 100%; height: 2px; background: #000; position: absolute; transition: all .3s;}
    #header .hamberg span::before {top: -8px;}
    #header .hamberg span::after {top: 8px;}
    #header .hamberg span.on {background: rgba(255,255,255,0);}
    #header .hamberg span.on::before {top: 0; transform: rotate(-45deg);}
    #header .hamberg span.on::after {top: 0; transform: rotate(45deg);}

    #header .menu {gap: 10px; width: 100%; justify-content: center; flex-direction: column; color: #fff;}
    #header .menu > li {height: auto; width: 100%;}
    #header .menu > li::after {display: none;}
    #header .menu > li > a {height: auto; height: 50px; font-size: 1.125rem; padding: 0 20px;}
    #header .menu > li > a::after {display: none;}

    
    #header .menu li.mo_menu{display: block;}

    #header .hamberg span.on::before, #header .hamberg span.on::after{
        background: #fff;
    }
    #header .langmenu{background: #2d2d2d;}
	#header .ico_menu {position: absolute; z-index: 1; left: 20px; display: flex; top: 20px; flex-direction: row-reverse;}
	#header .lang > a{color:#fff}
	#header .lang > a::after{border-top: 1px solid #fff;
    border-right: 1px solid #fff;}
	#header .lang.on {display: block;}

    #header .pc_wrap{display: none !important;}

    #header .ico_menu .login > a::before{content: ''; background: url(/img/ico_login_w-e6d83940cecedb99b6bbea3e3589b14a.png) no-repeat; width: 30px; height: 30px;display: block;}
    #header .lang > a::before{content: ''; background: url(/img/ico_lang_w-d51bf8b1cf8bfd1341e9af38d806c490.png) no-repeat; width: 30px; height: 30px;display: block;}

}

@media screen and (max-width:1199px) {

    /* sub */
    .sub_top .tit .big {font-size: 3.5rem;}
    .sub_top .tit .small {font-size: 1.75rem;}
    .sub_top .bg {height: 300px;}

    #footer .menu{justify-content: center;}

    #footer .tbox{flex-direction: column;gap:20px; align-items: start;}
    #footer .right .sns{justify-content: left;}

    /* board */
	.board_list li {font-size: 0.875rem;}
}

@media screen and (max-width:899px) {

    /* padding */
    .p_tb {padding: 80px 0;}
    .p_t {padding-top: 80px;}
    .p_b {padding-bottom: 80px;}

    /* table */
    .tb_box {overflow-x: auto;}
    .tb_box table {width: 100%; max-width: max-content;}
    .tb_box th, .tb_box td {font-size: 0.875rem; padding: 10px;}

    /* header */
    #header {height: 60px;}
    #header .inner {gap: 20px;}
    #header .lang {margin-left: auto;}
    #header .logo img {height: 25px;}

    #header .submenu {position: unset; transform: unset; width: 100%; border: 0; background: #222; padding: 20px;}
    #header .submenu > div {gap: 15px;}
    #header .submenu > div > a {font-size: 0.9125rem;}

    /* sub */
    .sub_top {padding: 100px 0 0;}
    .sub_top .inner {padding-bottom: 60px;}
    .sub_top .titbox {gap: 20px;}
    .sub_top .cate {font-size: 1.25rem;}
    .sub_top .tit {gap: 20px;}
    .sub_top .tit .big {font-size: 2.5rem;}
    .sub_top .tit .small {font-size: 1.5rem;}
    .sub_top .descrip {font-size: 1.125rem; margin-top: 20px;}

    .sec_tit {margin-bottom: 20px;}
    .sec_tit .big {font-size: 2rem;}
    .sec_tit .small {margin-top: 15px;}

    #footer .menu{grid-template-columns: repeat(1, 1fr); }
    #footer .menu li{ font-size: 14px;}
    #footer li.btn-open-terms{font-size: 14px;}
    #footer .menu li span{flex: 0 0 120px;}
}

@media screen and (max-width:599px) {


    /* footer */
    #footer{padding: 40px 0;}
    #footer .menu {align-items: center; gap: 10px;}
    #footer .menu li{margin-right: 0;padding-right: 0;}
    #footer .menu li::after{display: none;}

    /* hedaer */    
    #header .inner {gap: 10px;}
    #header .nav_wrap {width: 100%;}
    #header .logo img{height: 20px;}
    

    /* sub */
    .sub_top .cate {font-size: 1.125rem;}
    .sub_top .tit .big {font-size:2rem}
    .sub_top .tit .small {font-size: 1.25rem;}
    .sub_top .descrip {font-size: 1rem;}
    .sub_top .bg {height: 180px;}

    .sec_tit .big {font-size: 1.75rem;}
    .sec_tit .small {font-size: 1rem; margin-top: 10px;}

    /* board */
	.board_list ul {gap: 5px;}
	.board_list li {font-size: 0.75rem;}
	.board_list li.number {width: 40px;}
	.board_list li.date {width: 80px;}
    .press_wrap .board_list{margin-top: 30px !important; margin-bottom: 30px !important;}

    .board_view {gap: 40px;}
    .board_view .title .subject {font-size: 1.25rem;}
    .board_view .title .date {margin-top: 5px; font-size: 0.75rem;}
	.board_view .contents {gap: 40px; padding-bottom: 40px;} 
}