@charset "UTF-8";
/* 전체 박스 */
#wrap { position:relative;overflow: hidden; }

/* 공통 섹션 */
.section { position: relative; } 
.section-common-title { display: flex; position: relative; color: #222; font-weight: 700; font-size: 3.6rem; line-height: normal; font-style: normal; gap:1rem 1.2rem; align-items: flex-end; padding-top:1.8rem; margin-bottom:4rem; } 
.section-common-title span { color:#757575; font-weight: 500; font-size: 1.8rem; line-height: 150%; font-style: normal; } 
.section-common-title.title-type02 { color:#fff; } 
.section-common-title.title-type02 span { color:#fff; opacity: .7; } 


.login_box{float: right;position: absolute; width:10%; right:6%}
.login_box a{display: inline-block; font-size: 1.2rem;}
.login_box a span:hover{color:#b8b8b8}
.login_box a span{line-height: 100px;padding: 0 13px 0 9px; color:#b4b4b4; font-size: 1.2rem;}

.login_box ul{width:100%; text-align: right}
.login_box li{display: inline-block;}
.login_box ul li a{display:inline-block;width: 100%;height: 100%;font-size: 0.88rem;text-align: center;padding: 3px 0;}
.login_box .btn_top_search:hover {background: url(../img/btn_top_search_b.png) no-repeat;}
.login_box .btn_top_search {width: 25px;height: 26px;background: url(../img/btn_top_search1.png) no-repeat;padding-right: 10px;position: absolute;top: 37%;left: 100%;}
.hidden {margin: 0;padding: 0;width: 0;height: 0;font-size: 0;line-height: 0;overflow: hidden;visibility: hidden;display: block;}
.mb-top{display: none}

@media (max-width:767px){
.section-common-title { flex-direction: column;align-items: flex-start; }
}
 
  
/* 공통 게시판 */
.board-wrap { display: flex; gap:3.2rem; } 
.board { display: flex; position: relative; width:calc(50% - 1.8rem); padding:4rem 4.8rem; background: #FFF; border-radius: 1.6rem; box-shadow: .5rem .5rem 3rem 0 rgba(0, 0, 0, 0.08); flex-direction: column; } 
.board .board-title { display: block; padding-bottom:1.2rem; } 
.board .board-box { border-top:1px solid #d9d9d9; padding-top:3.2rem; } 
.board .board-title span { position: relative; color:#222; font-weight: 700; font-size: 2rem; line-height: 150%; font-style: normal; } 
.board .board-title span:before { display: block; position: absolute; bottom:-1.4rem; left:0; width:100%; height: 2px; background: #222; content:""; } 
.board .board-more { position: absolute; top:4rem; right:4.8rem; } 
.board .board-more i { display: block; color:#222; font-size:2.8rem; transition: all .5s; } 
.board .board-more:hover i { transform: rotate(180deg); }   

/* 게시판 type01 */
.board.board-type01 .board-box ul { display: flex; flex-direction: column; gap:1.6rem; } 
.board.board-type01 .board-box ul li a { display: flex; flex-direction: column; gap:.4rem; } 
.board.board-type01 .board-box ul li a .board-box-title { display: block; color:#222; font-weight: 600; font-size: 1.6rem; line-height: 150%; white-space:nowrap; overflow: hidden; font-style: normal; text-overflow: ellipsis; } 
.board.board-type01 .board-box ul li a:hover .board-box-title { color:#1877CF; text-decoration: underline; } 
.board.board-type01 .board-box ul li a .board-box-date { color:#757575; font-weight: 400; font-size: 1.6rem; line-height: 150%; font-style: normal; } 

/* 게시판 type02 */
.board.board-type02 .board-box ul { display: flex; gap:2.4rem; } 
.board.board-type02 .board-box ul li { width:calc(50% - 1.2rem); } 
.board.board-type02 .board-box ul li a { display: flex; flex-direction: column; gap:1.6rem; } 
.board.board-type02 .board-box ul li a .board-box-img { display: block; height: 22.6rem; border-radius: .8rem; overflow: hidden; } 
.board.board-type02 .board-box ul li a .board-box-img img { width:100%; height: 100%; object-fit: cover; transition: all .5s; } 
.board.board-type02 .board-box ul li a .board-box-txt { display: -webkit-box; color:#222; font-weight: 500; font-size: 1.6rem; line-height: 150%; overflow: hidden; text-overflow: ellipsis; font-style: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } 
.board.board-type02 .board-box ul li a:hover .board-box-img img { transform: scale(1.2); } 
.board.board-type02 .board-box ul li a:hover .board-box-txt { color:#1877CF; text-decoration: underline; } 

@media (max-width:1024px){
.board-wrap { flex-direction: column; }
.board { width:100%; }
}
@media (max-width:640px){
.board { padding:2rem; }
.board.board-type02 .board-box ul li { width:100%; }
.board.board-type02 .board-box ul li:first-of-type ~ li { display: none; } 
.board.board-type02 .board-box ul li a .board-box-img { height:30rem; }
}

/* 섹션01 */
.section01 { display: flex; height: 102.5rem; padding-top:13.3rem; align-items: center; } 
.section01.pop-on { height: 127rem; padding-top:14.5rem; } 
.section01.pop-on .section-visual { top:14.5rem; height:calc(100% - 14.5rem); z-index: 1; } 
.section01 .section-visual .swiper-slide { position: relative; } 
.section01 .section-visual .swiper-slide:before { display: block; position: absolute; top:0; left:0; width:100%; height: 100%; background: linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%); content:""; z-index: 1; } 
.section01 .section-visual { position:absolute; top:0rem; left:0; width:100%; height:calc(100% - 4.5rem); clip-path: ellipse(400rem 100% at 50% 0); } 
.section01 .section-visual video { position: absolute; right: 0; bottom: 0; width:100%; height: 100%; object-fit: cover; } 
.section01 .section-visual div { width:100%; height: 100%; } 
.section01 .layout { display: flex; flex-direction: column; gap:4.15rem; z-index: 1; transform: translateY(-5rem); }     
.section01 .layout .section-title { padding-right:34rem; }
.section01 .layout .section-title div { display: flex; flex-direction: column; gap:1.6rem; } 
.section01 .layout .section-title div p { color: #FFF; font-weight: 600; font-size: 1.8rem; line-height: 150%; font-family: ""; font-style: normal; } 
.section01 .layout .section-title div strong { color: #FFF; font-weight: 700; font-size: 4.4rem; line-height: 130%; letter-spacing: -0.168rem; font-style: normal; } 
.section01 .layout .section-title div { display: none; } 
.section01 .layout .section-title div.active { display: flex; flex-direction: column; } 
.section01 .layout .section-title div.active strong { visibility: hidden; opacity: 0; transform: translateY(4rem); transition: all 1s; filter: blur(5px); } 
.section01 .layout .section-title div.active.animation-text strong { opacity: 1; transform: translateY(0); visibility: visible; filter: blur(0); }
.mb-img{} 

/* 섹션01 비주얼 컨트롤 */
.section01 .layout .visual-control { display: flex; align-items: center; gap:2.4rem; } 
.section01 .layout .visual-control .visual-progress { display: flex; position: relative; position: relative; width:19.3rem; justify-content: space-between; } 
.section01 .layout .visual-control .visual-progress .progress-bar { position: absolute; top: 50%; left: 50%; width:calc(100% - 6rem); transform: translate(-50%, -50%); } 
.section01 .layout .visual-control .visual-progress .progress-bar:before { position: absolute; top:0; left:0; width:100%; height:2px; background: #fff; content:""; opacity: .3; } 
.section01 .layout .visual-control .visual-progress .progress-bar .progress-this { display: block; height:2px; background-color: #fff; animation-timing-function: linear; animation-iteration-count: 1; } 
.section01 .layout .visual-control .visual-progress .visual-number { color: #FFF; font-weight: 500; font-size: 1.6rem; line-height: 130%; font-family: ""; letter-spacing: -0.048rem; font-style: normal; } 
.section01 .layout .visual-control .visual-move { display: flex; gap:.3rem; } 
.section01 .layout .visual-control .visual-move .btn-arrow i { color:#fff; font-weight: normal; font-size: 2.4rem; } 
.section01 .layout .visual-control .visual-move .visual-play button i { color:#fff; font-weight: normal; font-size: 2.4rem; } 
@keyframes progressBarAnimation { from { width: 0%; }  to { width: 100%; } }
@media (max-width:1024px){
.section01 { height: 100vh; }
.section01 .layout .section-title { padding:0; }  
.section01.pop-on { height: 100vh; }
.section01 .section-visual { clip-path: ellipse(135rem 100% at 50% 0); } 
.mb-img{height: 130%;object-fit: cover;} 
.section01 .layout .section-title div strong{font-size: 3.4rem;}
}


@media (max-width:640px){ 
.section01 .layout .section-title div { gap:1.2rem; }
.section01 .layout .section-title div.active strong { font-size:2rem; }
.section01 .layout .section-title div p { font-size:1.6rem; }
.board .board-title span {font-size: 1.4rem;}
.board .board-more {top: 2rem;right: 1.8rem;}
.board .board-more i {font-size: 1.6rem;}
.section02 {padding: 0rem 0 !important;}
.board.board-type01 .board-box ul li a .board-box-title {font-size: 1.2rem;}
.board.board-type01 .board-box ul li a .board-box-date {font-size: 1.0rem;}
.new_title {font-size: 1.4rem !important;}
.news_tit {font-size:1.0rem !important}
.mblog-cont {font-size:1.0rem}
.board.board-type02 .board-box ul li a .board-box-txt {font-size:1.2rem}
}


@media (max-width:580px){
.section01 .layout .section-title div { gap:1rem; } 
.section01 .layout .section-title div.active strong { font-size:1.8rem; }
.section01 .layout .section-title div p { font-size:1.4rem; }
}
@media (max-width:480px){         
.section01 .layout .section-title div { gap:.8rem; } 
.section01 .layout .section-title div.active strong { font-size:1.6rem; }     
.section01 .layout .section-title div p { font-size:1.3rem; }
.section01 .layout .visual-control .visual-progress .visual-number {font-size: 1.2rem;}  
.section01 .layout .visual-control .visual-move .btn-arrow i {font-size: 1.2rem;}
.section01 .layout .visual-control .visual-move .visual-play button i {font-size: 1.2rem;}
.section01 .layout .visual-control .visual-progress {width: 15.3rem;}

}   

/* 섹션02 */
.section02 { padding:8rem 0; background: url('/res/site/img/main_02_bg1.png') no-repeat center center/cover; } 


.m-blog-slider, .mnoti-slider {height: 180px;}
.m-blog {width: calc( 100% - 0px);}
.m-blog-slider {position: relative;padding: 50px 20px 20px;border:1px solid #f3f3f3;box-shadow: 0px 0px 2px 2px #eee;border-radius: 14px;}
.mb-slide { width: 100%;background: #f3f3f3;}
.mb-slide li {border-radius: 14px;width: 100%;}
.mb-slide li a {display: block;}
.m-blog-slider .bx-prev {position: absolute;top:16px; right:60px;background: url('/res/site/img/blog-controls-prev.svg') no-repeat;font-size: 0;width: 20px; height: 20px;}
.m-blog-slider .bx-next {position: absolute;top:16px; right:20px;background: url('/res/site/img/blog-controls-next.svg') no-repeat;font-size: 0;width: 20px; height: 20px;}


.news_tit {display: block; margin-bottom: 10px;line-height: 140%;display:-webkit-box; word-wrap:break-word; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; line-height:20px; height:40px; color:#333; text-decoration:none;font-family: 'GmarketSansMedium';font-size: 16px; }
.mblog-cont{display: block; margin-bottom:10px; color:#191f97; font-weight: 600;}
.mblog-date {display: inline-block; width:48%; font-size:13px;}

.new_title{position: absolute;top: 13px;font-size: 2rem;color: #222;}

.bx-viewport{height: 140px !important;}

.board-box-title a{color:#000}
.date{font-size:13px}

@media (max-width:640px){ 
.section-common-title {font-size: 1.6rem;margin-bottom: 2rem;}
.section-common-title span {font-size: 1.3rem;}
.board-box-title a {font-size: 14px;}
.photo_d{font-size:13px}
}

@media (max-width:1024px){
.section-common-title{font-size:2.0rem}
.section-common-title span{font-size:1.4rem}
.board-box-title a {font-size: 1.2rem;}
.board.board-type02 .board-box ul li a .board-box-txt{font-size:1.2rem}
.photo_d{font-size:1.0rem}
}

   
/* 헤더 스크롤 온*/
.header.on .header-container .layout .header-menu>ul>li>a>span, body.scroll .header .header-container .layout .header-menu>ul>li>a>span { color:#222; } 
.header.on .header-container .layout .login_box>ul>li>a>span { color:#222; } 

.header .header-container .layout .login_box .on { visibility: visible; opacity: 1; } 
.header.on .header-container.bottom { background: #fff; } 
body.scroll .header .header-container.bottom { background: #fff; transition: all .5s; } 
.header.on .header-container .layout .header-util .header-pullmenu button i { color:#222; } 
body.scroll .header .header-container .layout .header-util .header-pullmenu button i { color:#222; } 
.header.on .header-logo a img { transform: translateY(-50%); } 
body.scroll .header .header-logo a img { transform: translateY(-50%); } 
.header.all .header-logo a img {transform: translateY(-3rem);}


/* 푸터 */
#footer { background: #262626;position:relative;bottom:0;width:100%; }  
@media (max-width:640px){
#footer { padding:6rem 0 6rem 0; }
}



/*popup*/
/* .popup-section{position: absolute; width: 100%; height:100%; z-index: 1000; display: flex; justify-content: center;} */
.popup-section{position: absolute;left:35%; top:20%; z-index: 2}
.popup-section .popup{position:absolute; top:15%; align-self:center; background-color: white;}
.popup-header{width: 100%; height: 10%;}
.popup-header .title{float:left; width: 92%; padding-top: 2%; padding-left: 2%;}
.popup-header .close{float:right; width: 5%; font-size: 2em; cursor: pointer; color:#000}
.popup-content{width: 100%; height: 80%;}
.popup-content img{width:100%; height:100%; object-fit:cover;}
.popup-footer{width: 100%; height: 10%; padding: 13px 0px 0px 5px;}
.popup-footer .col-50{width: 50%; float: right;}

@media (max-width:640px){ 
.popup-section{position: absolute;left:10%; top:10%; width:60%}	
.popup-section .popup{font-size:12px; width:340px !important;}
}

@media (max-width:380px){
.popup-section .popup{width:300px !important;}
}