/* @import url('./variable.css'); */
:root{
	--main-blue: #487be1;
}

body.no-scroll {overflow: hidden;}

.accessibilityWrap a{display:block;position:absolute;top:-10000px;left:0;z-index:500;width:100%;font-size:1.3em;text-align:center}
.accessibilityWrap a:hover,.accessibilityWrap a:focus,.accessibilityWrap a:active{position:absolute;top:0;z-index:500;padding:15px 0;background:#1d60a7;font-weight:bold;color:#fff}
.fixed_bg { background: rgba(0,0,0,.5); position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 100%; overflow-y: auto; }
.inner{width: 100%; max-width: 1200px; margin: 0 auto;;}
@media (max-width: 1440px){
}
@media (max-width: 1280px){
	html{font-size: 58%;}
	.inner{padding-left: 4rem; padding-right: 4rem;}
}
@media (max-width: 1024px){
	html{font-size: 55%;}
}
@media (max-width: 768px){
	html{font-size: 52%;}
}
@media (max-width: 480px){
	html{font-size: 50%;}
	.inner{padding-left: 20px; padding-right: 20px;}
}

/* header top */
#header{position: absolute;top: 0;left: 0;width: 100%;z-index: 9999;background: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent); --pad_x: 10rem}
#header .header-top{display: flex; align-items: center; justify-content: space-between;border-bottom: 1px solid rgba(255, 255, 255, 0.6); padding-left: var(--pad_x); padding-right: var(--pad_x); transition: all .3s ease-in-out;}
#header .header-top li{display: flex;}
#header .header-top li:nth-child(1) a{font-weight: 600; }
#header .header-top li:nth-child(2) a{font-weight: 400;}
#header .header-top a{display: inline-flex; align-items: center; justify-content: center; height: 35px; font-size: 1.4rem;  color: #fff;}
#header .header-top a i{margin-right: 5px;}
#header .header-top a + a::before{content: ''; display: inline-block; width: 1px; height: 10px; background: #fff; margin: 0 10px;}
#header .header-top select{background: rgba(255, 255, 255, 0.2) url('/resources/cbe/img/common/arrow_down_w.svg') no-repeat right 15px center; height: 35px; padding: 0 30px 0 15px; font-size: 1.4rem; border: 0; color: #fff; margin-left: 10px;;}
#header .header-top select option{color: #000; background: #fff;}
#logo a{display: block; width: 206px; height: 37px; background: #fff; mask: url('/resources/cbe/img/common/logo.svg') no-repeat center / 100%; transition: all .3s ease-in-out;}

/* gnb pc */
#header .gnb-wrap{ padding-left: var(--pad_x); padding-right: var(--pad_x); display: flex; align-items: center; justify-content: space-between; transition: all .3s ease-in-out;}
#header .gnb{display: flex;}
#header .gnb >li >a{display: inline-flex; align-items: center; justify-content: center; height: 85px; font-size: 1.8rem; font-weight: 500; color: #fff; padding: 0 27px;}
#header .gnb >li >a span{position: relative; height: 100%;display: flex;align-items: center;justify-content: center;}
#header .gnb >li >a span:after{content: ''; position: absolute; left: 50%; bottom: 0; width: 0; height: 3px; background: #0F0F70; transition: all .3s ease-in-out;}
#header .gnb .depth2-bg{display: none; }
#header .gnb .depth2-wrap{position: absolute; top: 100%; left: 0; width: 100%; display: flex; background: #fff;border-top: 1px solid #ededed;}
#header .gnb .depth2-tit{font-size: 2.4rem; font-weight: 700; color: #222; width: 44rem; padding: 5rem 8rem 5rem 6rem; text-align: right; border-right: 1px solid #ededed;}
#header .gnb .depth2{display: flex;align-items: center; padding: 5.5rem;}
#header .gnb .depth2 >li{}
#header .gnb .depth2 >li >a{display: block; font-size: 1.8rem; font-weight: 600;color: #5f5f5f; padding: 0 2.7rem;}
#header .gnb .depth2 >li >a:hover{text-decoration: underline; color: #222;}

/* menu hover & open style */
#header .gnb >li.active >a,
#header.open .gnb >li:hover >a,
#header .gnb >li >a:focus{color: #0F0F70 !important; font-weight: 700 !important;}
#header .gnb >li.active > a span:after,
#header.open .gnb >li:hover > a span:after,
#header.open .gnb >li > a:focus span:after{width: 100%; left: 0}

.subHeader #header{position: relative;}
#header:hover .header-top,
#header.open .header-top{background: #0F0F70;}
.subHeader #header .btns-mobile .menu span,
#header:hover .btns-mobile .menu span,
#header.open .btns-mobile .menu span{background: #0F0F70;}
.subHeader #header .header-top select,
#header:hover .header-top select,
#header.open .header-top select{background-color: #32569d;}
.subHeader #header #logo a,
#header:hover #logo a,
#header.open #logo a{background: #0F0F70;}
#topNav_m .search-box input,
.subHeader #header .search-box input,
#header:hover .search-box input,
#header.open .search-box input{border-bottom: 1px solid #999;}
#topNav_m .search-box input::placeholder,
.subHeader #header .search-box input::placeholder,
#header:hover .search-box input::placeholder,
#header.open .search-box input::placeholder{color: #D9D9D9;}
#topNav_m .search-box button,
.subHeader #header .search-box button,
#header:hover .search-box button,
#header.open .search-box button{background: #0F0F70;}
.subHeader #header .gnb-wrap,
#header:hover .gnb-wrap,
#header.open .gnb-wrap{background: #fff;}
.subHeader #header .gnb >li >a,
#header:hover .gnb >li >a,
#header.open .gnb >li >a{color: #222;}

/* gnb mobile */
#topNav_m{position: fixed;top: 0;right: -100%;width: 100%;height: 100%;min-height: 100vh;z-index: 100;overflow-y: auto;background: rgba(0,0,0,.5);}
#topNav_m.open{right: 0;}
#topNav_m .in{width: 100%;max-width: 80%; min-height: 100%; background: #fff;margin: 0 0 0 auto; padding: 100px 0 30px;}
#topNav_m .gnb_m{}
#topNav_m .gnb_m a{display: block;position: relative;}
#topNav_m .gnb_m .hasDepth:after{content: '';position: absolute;top: 50%;right: 25px;transform: translateY(-50%);width: 12px;height: 8px;background: #0F0F70;mask: url('/resources/cbe/img/common/arrow_down_w.svg') no-repeat center / 100%;}
#topNav_m .gnb_m >li{}
#topNav_m .gnb_m >li >a{font-size: 2rem;padding: 15px 25px;border-bottom: 1px solid #ddd;color: #0F0F70;font-weight: 600;}
#topNav_m .gnb_m .depth2{display: none;border-bottom: 1px solid #0F0F70;}
#topNav_m .gnb_m .depth2 >li{}
#topNav_m .gnb_m .depth2 >li >a{position: relative;font-size: 1.8rem;padding: 12px 25px;font-weight: 500;color: #666;}
#topNav_m .gnb_m .depth3{display: none;background: #f4f4f4;}
#topNav_m .gnb_m .depth3 >li{}
#topNav_m .gnb_m .depth3 >li >a{font-size: 1.6rem;padding: 10px 40px;font-weight: 500;}

/* 2025.05.13 추가 : start */
/* gnb-right pc */
#header .gnb-right {display: flex; align-items: center;}
#header .gnb-right a {font-size: 1.2rem; font-weight: 500; color: #fff; padding: 8px 10px;}
#header .gnb-right select{background: url('/resources/cbe/img/common/arrow_down_w.svg') no-repeat right 15px center; height: 28px; padding: 0 30px 0 10px; font-size: 1.2rem; border: 0; color: #fff; margin: 0 10px;}
#header .gnb-right select option{color: #000; background: #fff;}

/* gnb-right hover */
.subHeader #header .gnb-right a,
#header:hover .gnb-right a{color: #222; }
.subHeader #header .gnb-right select,
#header:hover .gnb-right select {background-image: url('/resources/cbe/img/common/arrow_down_b.svg'); color: #222;}
/* 2025.05.13 추가  : end */

/* search & etc */
.search-box{display: flex;align-items: center; justify-content: center; }
.search-box input{width: 180px; height: 28px; padding: 0 10px; background: transparent; border: 0; border-bottom: 1px solid #fff;}
.search-box input::placeholder{font-size: 1.4rem; color: #fff;}
.search-box button{width: 25px; height: 25px; background: #fff; mask: url('/resources/cbe/img/common/search.svg') no-repeat center / 100%;}
#topNav_m .search-box{padding: 0 25px; margin-bottom: 40px;;}
#topNav_m .search-box input{width: 100%; height: 40px;}
.btns-mobile{display: none;}
.btns-mobile button{}
.btns-mobile .sch{width: 40px;height: 40px;background: #0F0F70;mask: url('/resources/cbe/img/common/search.svg') no-repeat center;}
.btns-mobile .menu {position: relative;width: 25px;height: 20px;background: transparent;cursor: pointer;display: block;}
.btns-mobile .menu span { display: block; position: absolute; height: 2px; width: 100%; background: #fff; border-radius: 10px; opacity: 1; left: 0; transform: rotate(0deg); transition: 0.25s ease-in-out; }
.btns-mobile .menu span:nth-of-type(1) { top: 0; transform-origin: left center; }
.btns-mobile .menu span:nth-of-type(2) { top: 50%; transform: translateY(-50%); transform-origin: left center; }
.btns-mobile .menu span:nth-of-type(3) { top: 100%; transform-origin: left center; transform: translateY(-100%); }
.btns-mobile .menu.open span:nth-of-type(1) { transform: rotate(45deg); top: 0; left: 4px; }
.btns-mobile .menu.open span:nth-of-type(2) { width: 0; opacity: 0; }
.btns-mobile .menu.open span:nth-of-type(3) { transform: rotate(-45deg); top: 17px; left: 4px; }



/* header responsive */
@media (max-width: 1280px){
	#header{--pad_x: 5rem;}
	#header .gnb >li >a{padding: 0 1.5rem;}
	#header .search-box input{width: 150px;}
}
@media (max-width: 1024px){
	#header{--pad_x: 4rem;}
	#header .header-top{padding-right: 0;}
	#topNav{display: none;}
	#header .gnb-wrap{height: 60px;}
	#header .search-box{display: none;}
	.btns-mobile{display: block;}
}
@media (max-width: 768px){
	#header{--pad_x: 20px;}
}
@media (max-width: 480px){
	#header .header-top{justify-content: flex-end;}
	#header .header-top li:nth-child(1){display: none;}
}
@media (max-width: 350px){
}





#quick{position: fixed; top: 250px; right: 0; z-index: 99;}
#quick ul{width: 100px;}
#quick li{width: 100%; height: 72px; border-top-left-radius: 10px;}
#quick li:nth-child(1){display: flex; align-items: center; justify-content: center; background: #32569d; color: #fff; font-size: 1.4rem; font-weight: 700; text-align: center;}
#quick a{display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 500; color: #222; width: 100%; height: 100%; background: #fff; text-align: center; border-bottom: 1px solid #d9d9d9;}
#quick button{display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 1.4rem; font-weight: 700; color: #fff; text-align: center; width: 100%; height: 35px; background: #333; border-bottom-left-radius: 10px;}
#quick button::after{content: ''; display: inline-block; width: 9px; height: 5px; background: url('/resources/cbe/img/common/arrow_up_w.svg') no-repeat center / 100%;;}

@media (max-width: 1024px){
	#quick{display: none;}
}

.btn-top{position: fixed;bottom: 5px;right: 5px;display: none;align-items: center;justify-content: center;flex-direction: column;gap: 5px;font-size: 1.4rem;font-weight: 700;color: #fff;text-align: center;width: 50px;height: 50px;background: #333333e8;border-radius: 100%;}
.btn-top::before{content: ''; display: inline-block; width: 9px; height: 5px; background: url('/resources/cbe/img/common/arrow_up_w.svg') no-repeat center / 100%;;}

@media (max-width: 1024px){
	.btn-top{display: flex;}
}

#footer{background: #555c6b;}
#footer .box1{background: #4d5464; padding-top: 10px; padding-bottom: 10px;}
#footer .box1 >div{display: flex; align-items: center; justify-content: space-between; }
#footer .box2{padding-top: 50px; padding-bottom: 110px;}
#footer .box2 >div{display: flex; align-items: center; gap: 40px;}
#footer .etc {display: flex;align-items: center;gap: 15px;}
#footer .etc:before {content: '';display: block;width: 1px;height: 10px;background: #767D8B;order: 1;}
#footer .etc a{display: inline-block;; font-size: 14px; font-weight: 700; color: #d9dbe0;}
#footer .etc a:nth-child(2) {order: 1;}
#footer .family-site{width: 200px; height: 40px; padding: 0 30px 0 12px; background: #787e8c url('/resources/cbe/img/common/arrow_down_w.svg') no-repeat right 12px center; border-radius: 6px; font-size: 14px; font-weight: 700; color: #bdc2cd; border: 0;}
#footer .copy{color: #bdc2cd;}
#footer .copy p:nth-child(1){font-size: 14px; line-height: 1.5;}
#footer .copy p:nth-child(2){font-size: 10px; margin-top: 20px;}

@media (max-width: 480px){
	#footer .box1{padding-top: 20px; padding-bottom: 20px;}
	#footer .box1 >div{flex-direction: column; gap: 20px}
	#footer .family-site{width: 100%;}
	#footer .box2 >div{flex-direction: column; gap: 20px}
}


.f10{font-size: 1rem;}
.f11{font-size: 1.1rem !important;}
.f12{font-size: 1.2rem !important;}
.f13{font-size: 1.3rem !important;}
.f14{font-size: 1.4rem !important;}
.f15{font-size: 1.5rem !important;}
.f16{font-size: 1.6rem !important;}
.f17{font-size: 1.7rem !important;}
.f18{font-size: 1.8rem !important;}
.f19{font-size: 1.9rem !important;}
.f20{font-size: 2.0rem !important;}
.f21{font-size: 2.1rem !important;}
.f22{font-size: 2.2rem !important;}
.f23{font-size: 2.3rem !important;}
.f24{font-size: 2.4rem !important;}
.f25{font-size: 2.5rem !important;}
.f26{font-size: 2.6rem !important;}
.f27{font-size: 2.7rem !important;}
.f28{font-size: 2.8rem !important;}
.f29{font-size: 2.9rem !important;}
.f30{font-size: 3.0rem !important;}
.f31{font-size: 3.1rem !important;}
.f32{font-size: 3.2rem !important;}
.f33{font-size: 3.3rem !important;}
.f34{font-size: 3.4rem !important;}
.f35{font-size: 3.5rem !important;}
.f36{font-size: 3.6rem !important;}
.f37{font-size: 3.7rem !important;}
.f38{font-size: 3.8rem !important;}
.f39{font-size: 3.9rem !important;}
.f40{font-size: 4.0rem !important;}

.mt0{margin-top: 0px !important}
.mt5{margin-top: 5px !important}
.mt10{margin-top: 1rem !important}
.mt15{margin-top: 1.5rem !important}
.mt20{margin-top: 2rem !important}
.mt25{margin-top: 2.5rem !important}
.mt30{margin-top: 3rem !important}
.mt40{margin-top: 4rem !important}
.mt50{margin-top: 5rem !important}
.mt60{margin-top: 6rem !important}
.mt70{margin-top: 7rem !important}
.mt80{margin-top: 8rem !important}
.mt90{margin-top: 9rem !important}
.mt100{margin-top: 10rem !important}

.mb0{margin-bottom: 0px !important}
.mb5{margin-bottom: 5px !important}
.mb10{margin-bottom: 1rem !important}
.mb15{margin-bottom: 1.5rem !important}
.mb20{margin-bottom: 2rem !important}
.mb25{margin-bottom: 2.5rem !important}
.mb30{margin-bottom: 3rem !important}
.mb40{margin-bottom: 4rem !important}
.mb50{margin-bottom: 5rem !important}
.mb60{margin-bottom: 6rem !important}
.mb70{margin-bottom: 7rem !important}
.mb80{margin-bottom: 8rem !important}
.mb90{margin-bottom: 9rem !important}
.mb100{margin-bottom: 10rem !important}

.mr0{margin-right: 0px !important}
.mr5{margin-right: 5px !important}
.mr10{margin-right: 1rem !important}
.mr15{margin-right: 1.5rem !important}
.mr20{margin-right: 2rem !important}
.mr25{margin-right: 2.5rem !important}
.mr30{margin-right: 3rem !important}
.mr40{margin-right: 4rem !important}
.mr50{margin-right: 5rem !important}
.mr60{margin-right: 6rem !important}
.mr70{margin-right: 7rem !important}
.mr80{margin-right: 8rem !important}
.mr90{margin-right: 9rem !important}
.mr100{margin-right: 10rem !important}

.ml0{margin-left: 0px !important}
.ml5{margin-left: 5px !important}
.ml10{margin-left: 1rem !important}
.ml15{margin-left: 1.5rem !important}
.ml20{margin-left: 2rem !important}
.ml25{margin-left: 2.5rem !important}
.ml30{margin-left: 3rem !important}
.ml40{margin-left: 4rem !important}
.ml50{margin-left: 5rem !important}
.ml60{margin-left: 6rem !important}
.ml70{margin-left: 7rem !important}
.ml80{margin-left: 8rem !important}
.ml90{margin-left: 9rem !important}
.ml100{margin-left: 10rem !important}


.p-10{padding: 1rem !important}
.p-15{padding: 1.5rem !important}
.p-20{padding: 2rem !important}
.p-25{padding: 2.5rem !important}
.p-30{padding: 3rem !important}
.p-40{padding: 4rem !important}

.pt0{padding-top: 0px !important}
.pt5{padding-top: 5px !important}
.pt10{padding-top: 1rem !important}
.pt15{padding-top: 1.5rem !important}
.pt20{padding-top: 2rem !important}
.pt25{padding-top: 2.5rem !important}
.pt30{padding-top: 3rem !important}
.pt40{padding-top: 4rem !important}
.pt50{padding-top: 5rem !important}
.pt60{padding-top: 6rem !important}
.pt70{padding-top: 7rem !important}
.pt80{padding-top: 8rem !important}
.pt90{padding-top: 9rem !important}
.pt100{padding-top: 10rem !important}

.pb0{padding-bottom: 0px !important}
.pb5{padding-bottom: 5px !important}
.pb10{padding-bottom: 1rem !important}
.pb15{padding-bottom: 1.5rem !important}
.pb20{padding-bottom: 2rem !important}
.pb25{padding-bottom: 2.5rem !important}
.pb30{padding-bottom: 3rem !important}
.pb40{padding-bottom: 4rem !important}
.pb50{padding-bottom: 5rem !important}
.pb60{padding-bottom: 6rem !important}
.pb70{padding-bottom: 7rem !important}
.pb80{padding-bottom: 8rem !important}
.pb90{padding-bottom: 9rem !important}
.pb100{padding-bottom: 10rem !important}

.pr0{padding-right: 0px !important}
.pr5{padding-right: 5px !important}
.pr10{padding-right: 1rem !important}
.pr15{padding-right: 1.5rem !important}
.pr20{padding-right: 2rem !important}
.pr25{padding-right: 2.5rem !important}
.pr30{padding-right: 3rem !important}
.pr35{padding-right: 3.5rem !important}
.pr40{padding-right: 4rem !important}
.pr50{padding-right: 5rem !important}
.pr60{padding-right: 6rem !important}
.pr70{padding-right: 7rem !important}
.pr80{padding-right: 8rem !important}
.pr90{padding-right: 9rem !important}
.pr100{padding-right: 10rem !important}

.pl0{padding-left: 0px !important}
.pl5{padding-left: 5px !important}
.pl10{padding-left: 1rem !important}
.pl15{padding-left: 1.5rem !important}
.pl20{padding-left: 2rem !important}
.pl25{padding-left: 2.5rem !important}
.pl30{padding-left: 3rem !important}
.pl35{padding-left: 3.5rem !important}
.pl40{padding-left: 4rem !important}
.pl50{padding-left: 5rem !important}
.pl60{padding-left: 6rem !important}
.pl70{padding-left: 7rem !important}
.pl80{padding-left: 8rem !important}
.pl90{padding-left: 9rem !important}
.pl100{padding-left: 10rem !important}