@charset "utf-8";
/* CSS Document */

/***********************/
/*MAIN******************/
.main .box1{ padding-left:3.75em;}

.main_visual{ position:relative; overflow:hidden; padding-top:1.25em;}

.main_logo{ position:relative; z-index:8; padding:1em 0 2em 0;}
.main_logo .logo{ }
.main_logo .logo img{ width:17em;}

.sloganSlider{ min-height:7.5em;}
.sloganSlider .el .slogan{ opacity:0;}
.sloganSlider .el .slogan .line{ position:relative; display:inline-block; padding:.375em .875em; padding-top:0;}
.sloganSlider .el .slogan .line > *{ position:relative;}
.sloganSlider .el .slogan .line:before{ content:""; position:absolute; left:0; right:0; bottom:0; height:55%; background:#cbc0aa; border-radius:6em; transform:scaleX(0); transform-origin:left;}
.sloganSlider .el .slogan .line .tt{ font-size:2.250em; color:#111; letter-spacing:-.063em;}
.sloganSlider .el.swiper-slide-active .slogan,
.sloganSlider .el.swiper-slide-duplicate-active .slogan{ opacity:1; transition:2s;}
.sloganSlider .el.swiper-slide-active .slogan .line:before,
.sloganSlider .el.swiper-slide-duplicate-active .slogan .line:before{ transform:scaleX(1); transition:transform 2s;}

.main_visual .swiper_control{ padding:0 0 1em 0;}
.swiper_control{ z-index:10;padding:10px;}
.swiper_control .visualSliderPauseWrap{ margin-left:1.5em;}
.swiper_control .btn{ display:inline-block; width:2.25em; line-height:2.25em; background:#fff; border:1px solid #ddd; border-radius:.625em; font-size:.875em; color:#111; text-align:center; cursor:pointer; opacity:.5; transition:.2s;}
.swiper_control .btn:before{ font-family:xeicon; font-size:1.25em}
.swiper_control .btn.prev:before{content:"\e93d"}
.swiper_control .btn.next:before{content:"\e940"}
.swiper_control .btn.pause:before{content:"\ea3b"}
.swiper_control .btn.play:before{content:"\ea3e"}
.swiper_control .btn.play{ display:none}
.swiper_control.pause .btn.play{ display:block; opacity:1}
.swiper_control.pause .btn.pause{ display:none}
.swiper_control .btn:hover{ opacity:1}
.swiper_control .paging{ position:relative; bottom:0;}
.swiper_control .paging > span{ position:relative; width:1.75em; height:.438em; margin:0 .125em; border-radius:1em; background:#a68d7a; opacity:.3; transition:.3s}
.swiper_control .paging > span.swiper-pagination-bullet-active{ width:3.5em; opacity:1;}

.visualSlider_wrap{ position:relative; z-index:9; padding:20.5em 0 3.75em 0;}
.visualSlider_wrap:before{ content:""; position:absolute; left:0; bottom:0; width:100%; height:45%;}
.visualSlider_wrap .box0{}
.visualSlider{ position:absolute !important; top:0; left:0; width:100%; height:100%; overflow:hidden;}
.visualSlider .swiper-wrapper{ width:auto; border-radius:1em; overflow:hidden;}
.visualSlider .el{ position:relative; overflow:hidden; height:inherit;}
.visualSlider .el .bg{ position:absolute; left:-3%; top:0; width:103%; height:100%; transition:4s;}
.visualSlider .main_slogan{ z-index:2; position:absolute; top:calc(18vh + 12.813em); left:0; right:0;}
.visualSlider .main_slogan .slogan{ display:inline-block; padding-left:1.125em; opacity:0; transform:translateX(2em); transition:3s;}
.visualSlider .el.swiper-slide-active .bg,
.visualSlider .el.swiper-slide-duplicate-active .bg{ left:0;}
.visualSlider .el.swiper-slide-active .main_slogan .slogan,
.visualSlider .el.swiper-slide-duplicate-active .main_slogan .slogan{ opacity:1; transform:translateX(0);}

.main_visual .visualBn{ position:absolute; top:0; left:0; right:0; z-index:22; transform:translateY(-30%);}
.main_visual .visualBn .inner{ padding:0 3vw 0 44%;}
.main_visual .visualCon{ position:relative; z-index:22;}

/**/
.mainBg{ border:1px solid transparent; border-radius:1em;}
.mainBg.bg1{ background:#6d86ec;}
.mainBg.bg2{ background:#6d86ec;}
.mainBg.bg3{ background:rgba(0,0,0,.4); border-color:rgba(255,255,255,.4);}
.mainBg.bg4{ background:#fff; border-color:#e5e5e5;}
.mainBg.bg5{ background:#a68d7a;}

.main_con{ padding:3.75em 0;}
.main_conBg1,
.visualSlider_wrap:before{ background:#fdf9f0;}
.main_conBg2{ background:#cbc0aa;}

.main_txt{}
.main_txt > .tit{ margin-bottom:1.5em;}
.main_txt > .tit.mg1{ margin-bottom:.75em;}
.main_txt > .txt .tt{ line-height:1.6;}
.main_txt .br{ display:block;}
.main_txt .tt{ color:#111;}
.main_txt .tt_en{ text-transform:uppercase; letter-spacing:.125em;}
.main_txt .t1{ font-size:1.000em;} /*16*/
.main_txt .t2{ font-size:1.063em;}/*17*/
.main_txt .t3{ font-size:1.250em;}/*20*/
.main_txt .t4{ font-size:1.625em;}/*26*/
.main_txt .t5{ font-size:1.875em;}/*30*/
.main_txt .t6{ font-size:2.000em;}/*32*/

.cw .main_txt .tt{ color:#fff;}
.cw .mainBg .main_txt .tit .mo_view {display:none;}

.main_more{ padding-top:1.5em;}
.main_more.p1{ padding-top:4.75em;}
.main_more > .more{ text-align:center; padding:.875em 1.875em .875em 1.875em; border-radius:6em; transition:.2s;}
.main_more > .more > .tt{ font-size:.938em;}
.main_more > .more > .xi{ font-size:.875em; margin-left:1em;}
.main_more > .more > .xi:before{ content:"\e907";}
.main_more > .more.c1{ background:#fff; color:#6d86ec;}
.main_more > .more.c2{ background:#6d86ec; color:#fff;}
.main_more > .more.c3{ background:#6d86ec; color:#fff;}
.main_more > .more:hover{ background:#111; color:#fff;}

.main_more.st2{}
.main_more.st2 > .more{ padding-left:1.75em; padding-right:1.375em;}
.main_more.st2 > .more > .xi{ margin-left:.5em;}

.main_plus{ width:3.75em; height:3.75em; background:#6d86ec; border-radius:.625em; color:#fff; transition:.2s;}
.main_plus > .xi{ font-size:1.500em;}
.main_plus:hover{ background:#111;}

.main_bnList1{}
.main_bnList1 > .list{ margin:0 0 0 0;}
.main_bnList1 > .list > li{ flex:1;}
.main_bnList1 > .list > li .wrap_in{ flex:1; position:relative; margin:0 0 .625em .625em; padding:1.75em 1.25em; text-align:center; overflow:hidden;}
.main_bnList1 > .list > li .wrap_in > *{ position:relative;}
.main_bnList1 > .list > li .wrap_in .main_more > .more{ width:100%;}
.main_bnList1 > .list > li .link_wrap{}
.main_bnList1 > .list > li .link_wrap > li{}
.main_bnList1 > .list > li .link_wrap > li > .in{ padding:1em 1em; border-top:1px solid rgba(0,0,0,.3);}
.main_bnList1 > .list > li .link_wrap > li:first-child > .in{ border-top:none;}
.main_bnList1 > .list > li .link_wrap > li > .in .icon{ margin-right:1em;}
.main_bnList1 > .list > li .link_wrap > li > .in .icon img{ width:3em; transition:transform .3s;}
.main_bnList1 > .list > li .link_wrap > li > .in:hover .icon img{ transform:rotateY(180deg);}

.main_bnList1 > .list > li .time_wrap{ text-align:left;}
.main_bnList1 > .list > li .time_wrap > .time{ position:relative; margin-top:1.125em; color:#fff;}

.main_bnList1 > .list > li .time_wrap > .time:first-child{ margin-top:0;}
.main_bnList1 > .list > li .time_wrap > .time > li{ margin-top:.25em;}
.main_bnList1 > .list > li .time_wrap > .time > li:first-child{ margin-top:0;}
.main_bnList1 > .list > li .time_wrap > .time .tt{}
.main_bnList1 > .list > li .time_wrap > .time .t1{ font-size:1em;}
.main_bnList1 > .list > li .time_wrap > .time .t2{ font-size:.95em;}
.main_bnList1 > .list > li .time_wrap > .time .t3{ font-size:1.125em;}

.main_bnList1 > .list > li .time_wrap > .time > li.flex .txt{ flex:1;}
.main_bnList1 > .list > li .time_wrap > .time.st1 > li.flex .tit{ width:3.5em;}

.main_bnList1 > .list > li .time_wrap > .time.st2 > li.flex .icon{ position:absolute; top:50%; left:0; width:2em; height:2em; background:#6d86ec; border-radius:50%; transform:translateY(-50%);}
.main_bnList1 > .list > li .time_wrap > .time.st2 > li.flex .icon .xi{ font-size:1em;}
.main_bnList1 > .list > li .time_wrap > .time.st2 > li.flex .txt > p{ padding:.125em 0;}

.main_search{}
.main_search_form{ position:relative; height:3.75em;}
.main_search_form .input_st{ height:inherit; border-radius:.625em; border:none;}
.main_search_form .inpTxt{ width:100%; padding-right:3.5em; font-weight:500;}
.main_search_form .inpBtn{ width:3.5em; position:absolute; top:0; right:0; padding:0; background:transparent; color:#6d86ec;}
.main_search_form .inpBtn > .xi:before{ font-size:1.750em;}
.main_search_form .inpLink{ margin-left:.625em;}
.main_search_form .inpTxt::-webkit-input-placeholder{ font-size:.938em; font-weight:500; color:#aaa;}
.main_search_form .inpTxt::-moz-placeholder         { font-size:.938em; font-weight:500; color:#aaa;}
.main_search_form .inpTxt:-moz-placeholder          { font-size:.938em; font-weight:500; color:#aaa;}
.main_search_form .inpTxt:-ms-input-placeholder     { font-size:.938em; font-weight:500; color:#aaa;}

.mainMark_pos{ position:absolute !important;}
.mainMark_pos.pos1{ right:-3.5em; bottom:-2.75em;}
.mainMark_pos.pos1 > img{ width:12em; opacity:.1;}
.mainMark_pos.pos2{ left:6vw; top:-6.25em;}
.mainMark_pos.pos2 > img{ width:15em; opacity:.2;}

.main_bnList2{}
.main_bnList2 > .list{ margin:0 0 -1em -1em;}
.main_bnList2 > .list > li{ flex:1; text-align:center;}
.main_bnList2 > .list > li .wrap_in{ flex:1; margin:0 0 1em 1em; padding:2em 1em; transition:.2s;}
.main_bnList2 > .list > li .wrap_in .icon{ margin-bottom:1.375em;}
.main_bnList2 > .list > li .wrap_in .icon img{ transition:transform .3s;}
.main_bnList2 > .list > li .wrap_in:hover{ background:#6d86ec;}
.main_bnList2 > .list > li .wrap_in:hover .icon img{ transform:rotateY(180deg);}

.main_center .inner{}
.main_center .inner > .wrap_in{ flex:1; padding:.5em 3em; border:solid rgba(0,0,0,.1); border-width:0 0 0 1px;}
.main_center .inner > .wrap_in:first-child{ padding-left:0; border-width:0;}
.main_center .inner > .wrap_in:last-child{ padding-right:0;}

.main_centerList{ flex:1;}
.main_centerList .list{ flex:1; margin:0 0 -.5em -.5em;}
.main_centerList .list > li{ flex:0 0 25%;}
.main_centerList .list > li .in{ flex:1; position:relative; margin:0 0 .5em .5em; padding:1.5em 1.5em 4em 1.5em; transition:.2s;}
.main_centerList .list > li .in .num{ margin-bottom:.25em; display:none;}
.main_centerList .list > li .in .num > .tt{ font-size:.875em;}
.main_centerList .list > li .in .tit > .tt{ font-size:1.25em;}
.main_centerList .list > li .in .more{ margin-top:1.25em; color:#888; display:none;}
.main_centerList .list > li .in .more > *{ display:inline-block; vertical-align:middle;}
.main_centerList .list > li .in .more > .tt{ font-size:1em;}
.main_centerList .list > li .in .more > .xi{ font-size:1em; padding-left:.75em;}
.main_centerList .list > li .in .icon{ position:absolute; right:1.25em; bottom:1.5em;}
.main_centerList .list > li .in .icon img{ width:2.5em;}
.main_centerList .list > li .in:hover{ border-color:#6d86ec;}

.main_bnList3{ position:relative; padding:2.188em 0; overflow:hidden;}
.main_bnList3 .list{ padding:0 2.5vw; text-align:center;}
.main_bnList3 .list > li{ flex:1;}
.main_bnList3 .list > li .wrap_in{ flex:1; padding:.375em .5em; border-left:1px solid rgba(0,0,0,.15);}
.main_bnList3 .list > li:first-child .wrap_in{ border-left-width:0;}
.main_bnList3 .list > li .wrap_in .icon{ margin-bottom:.875em;}
.main_bnList3 .list > li .wrap_in .icon img{ width:3em; transition:transform .3s;}
.main_bnList3 .list > li .wrap_in:hover .icon img{ transform:rotateY(180deg);}

.main_customer{}
.main_customer .inner{}
.main_customer .inner > .layL{ width:50%; padding:1.25em 3.75em 1.25em 0;}
.main_customer .inner > .layR{ flex:1;}

.main_customer .customer_top { padding:2em 0em; box-sizing:border-box; border-bottom:1px solid #e5e5e5;}
.main_customer .customer_top .top_l { width:6.25em; height:6.25em; margin-right:1.5em; background:#f5f5f5; border-radius:1em;}
.main_customer .customer_top .top_l .date_wrap { flex:1;}
.main_customer .customer_top .top_l .day {font-size:1.75em; font-weight:700; color:#6d86ec}
.main_customer .customer_top .top_l .year {font-size:.875em; color:#666;}
.main_customer .customer_top .top_r { flex:1;}
.main_customer .customer_top .top_r .tit{ max-width:100%; font-size:1.063em; margin-bottom:.5em; font-weight:500;}
.main_customer .customer_top .top_r .tit .short { flex:1; overflow: hidden; text-overflow: ellipsis; white-space:nowrap;}
.main_customer .customer_top .top_r .tit .new {vertical-align:text-top;}
.main_customer .customer_top .top_r .txt{font-size:.875em; color:#666;  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.main_customer .customer_bottom {padding:2em 0.5em; padding-bottom:0; box-sizing:border-box;}
.main_customer .customer_bottom > li {height:25px; margin-bottom:.5em;}
.main_customer .customer_bottom > li .tit { flex:0 1 auto; font-size:.938em; font-weight:500; padding-left:1.5em; padding-right:1.5em; position:relative;}
.main_customer .customer_bottom > li .tit:before {position:absolute; content:''; width:6px; height:3px; background:#6d86ec; left:0; top:7px;}
.main_customer .customer_bottom > li .tit .tt { overflow: hidden; text-overflow: ellipsis; white-space:nowrap;}
.main_customer .customer_bottom > li .tit .tt.new_icon:after {position:absolute; content:'\e9a8'; font-family:xeicon !important; position:absolute; top:50%; right:0; transform:translateY(-50%); color:#6d86ec; font-size:1.375em}
.main_customer .customer_bottom > li .tit .new {vertical-align:text-top;}
.main_customer .customer_bottom > li .date { flex:1 0 auto; padding-left:.75em; text-align:right; font-size:.875em; color:#666;}

.main_customer .news_top { padding:2em 0em; box-sizing:border-box; border-bottom:1px solid #e5e5e5;}
.main_customer .news_top .top_l { width:11em; margin-right:1em; border:1px solid #e5e5e5; border-radius:1em; overflow:hidden;}
.main_customer .news_top .top_l .img_wrap{}
.main_customer .news_top .top_r { flex:1;}
.main_customer .news_top .top_r .tit{ max-width:100%; font-size:1.063em; margin-bottom:.5em; font-weight:500;}
.main_customer .news_top .top_r .tit .short { flex:1; overflow: hidden; text-overflow: ellipsis; white-space:nowrap;}
.main_customer .news_top .top_r .tit .new {vertical-align:text-top;}
.main_customer .news_top .top_r .txt{font-size:.875em; color:#666;  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.main_customer .news_top .top_r .date {font-size:.875em; color:#666; margin-top:1em;}

.main_customer .require_wrap { padding:2em 0.5em; padding-bottom:0; box-sizing:border-box;}
.main_customer .require_wrap > li { margin-bottom:1em; height:30px;}
.main_customer .require_wrap > li .require .ing { flex:1 0 auto; padding:.5em; background:#e5e5e5; border-radius:50px; color:#666; text-align:center; width:6em; margin-right:.5em; font-size:.875em;}
.main_customer .require_wrap > li .require .ing.on {background:#6d86ec; color:#fff}
.main_customer .require_wrap > li .tit { flex:0 1 auto; font-size:.938em; font-weight:500; padding-right:1.5em; position:relative;}
.main_customer .require_wrap > li .tit .tt { overflow: hidden; text-overflow: ellipsis; white-space:nowrap;}
.main_customer .require_wrap > li .tit .tt.new_icon:after {position:absolute; content:'\e9a8'; font-family:xeicon !important; position:absolute; top:50%; right:0; transform:translateY(-50%); color:#6d86ec; font-size:1.375em}
.main_customer .require_wrap > li .tit .new {vertical-align:text-top;}
.main_customer .require_wrap > li .date { flex:1 0 auto; padding-left:.75em; text-align:right; font-size:.875em; color:#666;}

.main_tab > .tab{ padding:0 0 1px 1px;}
.main_tab > .tab > li{ flex:1; position:relative; z-index:1;}
.main_tab > .tab > li .in{ position:relative; height:3.125em; padding:0 .5em; margin:0 0 -1px -1px; border:1px solid #e5e5e5; color:#888;}
.main_tab > .tab > li .in:before{ content:""; position:absolute; top:-1px; left:-1px; right:-1px; height:3px; background:#6d86ec; display:none;}
.main_tab > .tab > li .in .tt{ font-size:.938em;}
.main_tab > .tab > li.on{ z-index:2;}
.main_tab > .tab > li:hover .in,
.main_tab > .tab > li.on .in{ color:#6d86ec; border-bottom-color:transparent;}
.main_tab > .tab > li.on .in:before{ display:block;}

.main_bnList4 > .list{ margin:0 0 -1.25em -1.25em;}
.main_bnList4 > .list > li{ width:50%;}
.main_bnList4 > .list > li .wrap_in{ flex:1; position:relative; margin:0 0 1.25em 1.25em; padding:2em 2.25em 2.25em 2.25em;}
.main_bnList4 > .list > li .wrap_in .main_txt .txt .tt{ line-height:1.3;}
.main_bnList4 > .list > li .wrap_in .icon{ position:absolute; width:auto !important; right:1.25em; bottom:1.75em;}
.main_bnList4 > .list > li .wrap_in .icon img{ width:5.313em;}

.main_bnList4 > .list > li .link_wrap{ padding:1.5em 1.5em; text-align:center;}
.main_bnList4 > .list > li .link_wrap .link_list{ height:100%;}
.main_bnList4 > .list > li .link_wrap .link_list > li{ flex:1 1 50%; border:solid rgba(0,0,0,.3);}
.main_bnList4 > .list > li .link_wrap .link_list > li .in{ flex:1; padding:1em .5em;}
.main_bnList4 > .list > li .link_wrap .link_list > li .in .in_icon{ margin-bottom:.75em;}
.main_bnList4 > .list > li .link_wrap .link_list > li .in .in_icon img{ width:2.875em; transition:transform .3s;}
.main_bnList4 > .list > li .link_wrap .link_list > li .in:hover .in_icon img{ transform:rotateY(180deg);}
.main_bnList4 > .list > li .link_wrap .link_list > li:nth-child(1){ border-width:0 1px 1px 0;}
.main_bnList4 > .list > li .link_wrap .link_list > li:nth-child(2){ border-width:0 0 1px 0;}
.main_bnList4 > .list > li .link_wrap .link_list > li:nth-child(3){ border-width:0 1px 0 0;}
.main_bnList4 > .list > li .link_wrap .link_list > li:nth-child(4){ border-width:0;}



/*ANI*/
@keyframes downAni{
0% { transform:translateY(.5em);}
50% { transform:translateY(-.5em);}
100% { transform:translateY(.5em);}
}
@keyframes circleSize {
0% {-webkit-transform: scale(1); transform: scale(1);}
50% {-webkit-transform: scale(1.1); transform: scale(1.1);}
}
@-webkit-keyframes circleSize {
0% {-webkit-transform: scale(1); transform: scale(1);}
50% {-webkit-transform: scale(1.1); transform: scale(1.1);}
}

/* ===========================================================
   메인(index) 히어로 : 16:9 풀폭 + 유튜브 무잘림/무여백
   + 컨트롤(배경X, 잘보이게) 슬라이드 위 + 아래 박스 간격
   body.main 일 때만 적용
   =========================================================== */

/* ① 히어로 전체 폭 + 16:9 높이 (visualCon 은 건드리지 않음 → 6개 박스 원위치 유지) */
body.main #contents{ padding-top:0; }
body.main .main_visual{ width:100vw; margin-left:calc(50% - 50vw); padding-top:0; }
body.main .visualSlider_wrap{ padding-top:56.25vw; }   /* 16:9 높이 (값으로 조절) */

/* ③ 슬라이드 좌우 여백 제거 : 래퍼/슬라이드/배경 폭 강제로 꽉 */
body.main .visualSlider{ left:0 !important; width:100% !important; }
body.main .visualSlider .swiper-wrapper{ width:100% !important; border-radius:0; }
body.main .visualSlider .el{ width:100vw !important; left:0 !important; }
body.main .visualSlider .el .bg{ left:0; width:100%; border-radius:0; }
body.main .visualSlider_wrap:before{ display:none; }   /* 하단 배경 띠 제거 */

/* ④ fade 전환 잔상 제거 : 비활성 슬라이드 숨김 */
body.main .visualSlider.swiper-container-fade .el{ opacity:0 !important; transition:opacity .8s ease; }
body.main .visualSlider.swiper-container-fade .el.swiper-slide-active{ opacity:1 !important; }

/* ② 슬라이드와 5개 박스(.visualBn)가 겹치지 않게 간격 */
body.main .main_visual .visualBn{ transform:none; margin-top:3em; }   /* ★ 간격 조절 */

/* ⑤ 이동/정지 컨트롤 → 슬라이드 위 우하단, 배경 없이 버튼만 */
body.main .visualSlider_wrap .swiper_control{
	position:absolute; right:3vw; bottom:2vh; left:auto; top:auto;
	transform:none; z-index:40; padding:0;
	justify-content:flex-end;
	background:none; backdrop-filter:none;   /* 반투명 검은 박스 제거 */
}
/* 버튼이 슬라이드 위에서도 잘 보이게 */
body.main .visualSlider_wrap .swiper_control .btn{
	background:rgba(255,255,255,.9); border:none; color:#222;
	opacity:1; box-shadow:0 2px 8px rgba(0,0,0,.35);
}
body.main .visualSlider_wrap .swiper_control .btn:hover{ background:#fff; }
/* 페이지네이션 점도 또렷하게 */
body.main .visualSlider_wrap .swiper_control .paging > span{
	background:#fff; opacity:.6; box-shadow:0 1px 3px rgba(0,0,0,.4);
}
body.main .visualSlider_wrap .swiper_control .paging > span.swiper-pagination-bullet-active{ opacity:1; }

/* ⑥ 헤더 투명(로고 그대로 / hover 흰배경 유지) */
body.main #topNavWrap{
	position:absolute; top:0; left:0; width:100%;
	background:transparent; box-shadow:none;
}
body.main #topNavWrap #topNav > li > a{ color:#fff; }
body.main #topNavWrap.fixed{
	position:fixed; background:#fff; box-shadow:0 4px 12px rgba(0,0,0,.06);
}
body.main #topNavWrap.fixed #topNav > li > a{ color:#222; }
body.main #topNavWrap.on #topNav > li > a{ color:#222; }

/* 헤더 로고 : 평소(투명헤더) 흰색 → fixed 되면 기본 로고 */
body.main #topNavWrap #top_logo a{ position:relative; display:inline-block; }
body.main #topNavWrap #top_logo img{ display:block; }

/* 기본 상태(상단, 투명) : 흰색 로고만 */
body.main #topNavWrap #top_logo .logo_default{ display:none; }
body.main #topNavWrap #top_logo .logo_white{ display:block; }

/* fixed(스크롤) 또는 메뉴 hover(.on) : 기본 로고로 */
body.main #topNavWrap.fixed #top_logo .logo_white,
body.main #topNavWrap.on #top_logo .logo_white{ display:none; }
body.main #topNavWrap.fixed #top_logo .logo_default,
body.main #topNavWrap.on #top_logo .logo_default{ display:block; }

#top_logo .logo_white{ display:none; }
#top_logo .logo_default{ display:block; }

/* ===========================================================
   메인 히어로 최종 보정 : 좌우여백 제거 + 한 화면 + 5박스 간격
   (커스텀 블록 맨 끝에 추가 — 기존 값을 덮어씀)
   =========================================================== */

/* 1) 좌우 여백 제거 : .box0 의 2% 마진 무력화 */
body.main .visualSlider .box0,
body.main .visualSlider .swiper-wrapper{ margin:0 !important; }

/* 2) 한 화면에 6박스+버튼까지 들어오게 (높이 vh 기준) */
body.main .visualSlider_wrap{ padding-top:78vh !important; }   /* ★ 68~75vh 로 조절 */

/* 3) 슬라이드와 아래 5개 박스(.visualBn) 간격 */
body.main .visualBn{ position:static !important; transform:none !important; margin-top:1em !important; }   /* ★ 간격 조절 */

/* ===========================================================
   모바일/좁은 화면 : 히어로 높이 축소 + 6개 박스 슬라이드 위 겹침
   (PC 는 위 78vh 그대로 / 여기서만 덮어씀)
   =========================================================== */
@media (max-width:1280px){
	/* 히어로 높이 축소 */
	body.main .visualSlider_wrap{
		padding-top:0 !important;
		height:60vh !important;        /* ★ 모바일 높이 */
		position:relative;
	}
	body.main .visualSlider{ height:100% !important; }

	/* 오른쪽 흰 공백 제거 : .box0 의 max-width:96% 무력화 → 전체폭 */
	body.main .visualSlider .box0,
	body.main .visualSlider .swiper-wrapper{ width:100% !important; max-width:none !important; margin:0 !important; }
	body.main .visualSlider .el{ width:100% !important; left:0 !important; }

	/* 6개 박스를 슬라이드 위에 겹치게 (컨트롤 자리 위해 살짝 위로) */
	body.main .main_visual .visualCon{
		position:absolute !important;
		left:0; right:0; bottom:9vh;
		z-index:23;
	}

	/* 이동/정지 버튼 : 6개 박스 아래, 슬라이드 하단 가운데에 보이게 */
	body.main .visualSlider_wrap .swiper_control{
		position:absolute !important;
		left:0; right:0; top:auto; bottom:2.5vh;
		margin:0; padding:0;
		justify-content:center !important;
		z-index:40;
	}

	/* 아래 5개 박스 간격 */
	body.main .visualBn{ margin-top:2em !important; }
}

@media (max-width:640px){
	/* 폰 세로 : 조금 더 축소 */
	body.main .visualSlider_wrap{ height:70vh !important; }
}

/* 모바일: 유튜브가 슬라이드를 꽉 채우도록 (공백 방지) */
body.main .visualSlider .yt_holder,
body.main .visualSlider .el .bg{ height:100% !important; }
body.main .visualSlider .yt_holder iframe{ min-width:100%; min-height:100%; }

/* 유튜브 배경 영상 : 잘림 없이 꽉 채움 (참조은병원 방식) */
body.main .visualSlider .el.is_video{ background:#000; }
body.main .visualSlider .yt_bg{
	position:absolute; top:0; left:0; right:0; bottom:0;
	overflow:hidden; z-index:1; pointer-events:none;   /* 영상 클릭 막아 배경처럼 */
}
body.main .visualSlider .yt_bg iframe{
	position:absolute; top:50%; left:50%;
	width:100vw; height:56.25vw;        /* 16:9 기준 */
	min-width:177.78vh; min-height:100%;
	transform:translate(-50%,-50%); border:0;
}

body.main .main_visual:before{
	content:""; position:absolute; top:0; left:0; right:0;
	height:22vh; z-index:21; pointer-events:none;
	background:linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0));
}