/* 공통적용 */
html {/*scroll-behavior:smooth;*/}
body {overflow-x: hidden;}
body.scroll-lock {overflow-y: hidden;}
img {max-width: 100%;}
.inner {width: 90%; max-width: 1600px; 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;}


/* footer */
#footer {padding: 60px 0; background: #fff; border-top: 1px solid #ddd; font-family: 'pretendard';}
#footer .tbox .ft_logo{margin-bottom: 40px; display: flex;align-items: center;position: relative;}
#footer .tbox .ft_logo a{position: relative;margin-right: 20px;padding-right: 20px;}
#footer .tbox .ft_logo a:first-child:after {content: '';background: #d3d3d3;width: 1px;height: 70%;position: absolute;top: 50%;right: 0;transform: translateY(-50%);}
#footer .tbox .ft_logo img{height: 30px;}
#footer .menu {display: flex; gap: 60px; padding-left: 60px;}
#footer .menu li:first-child{font-weight: 600;}
#footer .menu li span{color: #aaa;}
#footer .copy{text-align: right;color: #666;padding-top: 30px;}
#footer li.btn-open-terms{font-weight: 600;}
#footer .tbox .right{text-align: right; color: #777;}
#footer .tbox .right a{border-bottom: 1px solid #777;}
#footer .tbox .right ul{display: grid; gap: 8px;}


/* 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; display: flex; align-items: center; position: relative;}
#header .logo a{position: relative;margin-right: 20px; padding-right: 20px;}
#header .logo a:last-child{margin-right:0; padding-right: 0;} 
#header .logo a:first-child:after{content: ''; background: #d3d3d3; width: 1px; height: 70%; position: absolute;top:50%; right: 0; transform: translateY(-50%);}
#header .logo img {height: 30px;}
#header .nav_wrap {height: 100%;display: flex;align-items: center; gap:80px}
#header .menu {display: flex; gap: 40px; align-items: center; color: #000; height: 100%;}
#header .menu > li {height: 100%; position: relative;}
#header .menu > li > a {height: 100%; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; font-weight: 700; position: relative;}
#header .menu > li > a::after {
    display: block; content: ""; width: 0%; height: 3px; background: #3BBEE8;
    position: absolute; bottom: 28px; left: 0; transition: all .3s;
}
#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 .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 .hamberg {display: none;}
#header.active {background: rgba(255,255,255, 1); border-bottom: 1px solid #ddd;}

#header .lang {font-size: 0.875rem; position: relative;cursor: pointer;}
#header .lang > a {display: flex; gap: 7px; align-items: center;}
#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 .nav {display: flex; align-items: center; gap: 20px;}
#header .nav .tel{color: #00236E;font-size: 1.25rem; font-weight: 500;}
#header .nav .nav_text{background: #A99076; color: #fff;border-radius: 10px;}
#header .nav .nav_text a{display: flex; align-items: center;padding: 18px;}
#header .nav .nav_text div:first-child{position: relative; margin-right: 10px; padding-right: 10px;}
#header .nav .nav_text div:first-child::after{content: '';background: #fff;width: 1px;height: 70%;position: absolute;top: 50%;right: 0;transform: translateY(-50%);}

/* 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;border-radius: 1rem;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: 24px 24px 0px}
.center-popup_title {font-size: 16px;font-weight: 600;line-height: 1.5;}
.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: 16px 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;}


@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 .tbox{flex-direction: column;gap:20px; align-items: start;}

    #header .logo img{height: 24px;}
    #header .nav .nav_text a{padding: 16px;}
}

@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: 70px;}
    #header .inner {gap: 10px;}
    #header .lang {margin-left: auto;}
    
    #header .hamberg {width: 24px; height: 24px; font-size: 0; display: flex; align-items: center; cursor: pointer; position: relative; z-index: 2;}
    #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 .nav_wrap {
        position: fixed; top: 0; left: -100%; background: rgba(0,0,0,.95); width: 100%; height: 100vh;
        transition: all .3s; z-index: 1;
    }
    #header .nav_wrap.on {left: 0;}
    #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 .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;}

    #header .hamberg span.on::before, #header .hamberg span.on::after{
        background: #fff;
    }
    #header .langmenu{background: #2d2d2d;}
	#header .lang {position: absolute; z-index: 1; left: 20px; display: none; top: 20px;}
	#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 .nav .nav_text a{padding:10px}
    #header .logo img{height: 18px;}
    #header .nav .nav_text a{font-size: 0.875rem; padding: 6px;}
    #header .logo a{margin-right: 10px; padding-right: 10px;}

    #footer .menu li{ font-size: 14px;}
    #footer li.btn-open-terms{font-size: 14px;}
    #footer .menu li span{flex: 0 0 120px;}

    #footer .menu{flex-direction: column;padding-left: 0; gap: 10px;}
    #footer .tbox .right{font-size: 0.875rem;margin-top: 20px;}
}

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


    /* footer */
    #footer{padding: 40px 0;}
    #footer .menu {gap: 10px;}
    #footer .menu li{margin-right: 0;padding-right: 0;}
    #footer .menu li::after{display: none;}
    #footer .tbox .ft_logo{margin-bottom: 10px;}
    #footer .tbox .ft_logo img{height: 18px;}
    #footer .tbox .ft_logo a{padding-right: 10px; margin-right: 10px;}
    #footer .tbox .right{text-align: left;}

    /* hedaer */    
    #header .inner {gap: 10px;}
    #header .nav_wrap {width: 100%;}
    #header .logo img{height: 20px;}
    #header .nav .nav_text a div:last-child{display: none;}
    #header .nav .nav_text a div:first-child{margin-right: 0; padding-right: 0;}
    #header .nav .nav_text div:first-child::after{display: none;}
    #header .logo img{height: 15px;}

}