@charset "utf-8";

.fixed_bg{background: rgba(0,0,0,.5);position: fixed;z-index: 140;width: 100%;height: 100%;overflow-y: auto;left: 0;top:0}
#header{position:fixed; top:0; left:0; right:0; width:100%; display:flex; background-color:#fff; justify-content:space-between; z-index:150; align-items:center; padding-right:17px; border-bottom: 1px solid #e7e7e7;}
.subHeader #header{position: sticky; top: 0;}

#logo{margin-left: 80px;}
#logo a{display: block; width: 140px; height: 60px; background: url('/resources/nie/10th/img/common/logo_10.png') no-repeat center / 100%;}

#topNav{}
#topNav .gnb{display: flex}
#topNav .gnb >li{height: 100px;}
#topNav .gnb >li >a{position: relative; font-size: 24px; font-size: 1.5em; font-weight: 500; color: #222; display: flex; align-items: center; justify-content: center; text-align: center; height: 100%; padding: 0 1em;}
#topNav .gnb .active >a::before,
#topNav .gnb >li >a.active::before{content: ''; position: absolute; top: 100%; left: 50%; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 100%; background: var(--green); z-index: 1;}
#topNav .depth2-wrap{display: none; background: #fff; position: absolute; top: 100px; left: 0; width: 100%; padding: 1.5em; border-top: 1px solid #e7e7e7;}
#topNav .depth2-wrap.active{display: block;}
#topNav .depth2{display: flex; align-items: center; justify-content: center;}
#topNav .depth2 >li{max-width: 300px; width: 100%; margin: 0 15px;}
#topNav .depth2 >li >a{display: flex; align-items: center; justify-content: space-between; width: 100%; font-size: 18px; font-size: 1.125em; font-weight: 500; color: #666; background: #f7f7f7; border-radius: 10px; padding: 15px 30px; transition: all .3s ease;}
#topNav .depth2 >li >a::after{content: ''; display: inline-block; width: 18px; height: 7px; background: url('/resources/nie/10th/img/common/ico-go_b.png') no-repeat center / 100%; transition: all .3s ease;}
#topNav .depth2 >li >a:hover{background: var(--green); color: #fff;}
#topNav .depth2 >li >a:hover::after{background-image: url('/resources/nie/10th/img/common/ico-go_w.png');}

.header-btn{margin-right: 80px;}
.header-btn >*{vertical-align: middle;}
.header-btn .homepage{display: inline-flex; align-items: center; justify-content: center; width: 160px; line-height: 40px; border-radius: 20px; font-weight: 400; background: #fff; border: 1px solid #ccc; margin-right: 1.875em;}
.header-btn .homepage::after{content: ''; display: inline-block; width: 16px; height: 16px; background: url('/resources/nie/10th/img/common/ico-link.png') no-repeat center / 100%; margin-left: 10px;}
.header-btn .sitemap{display: inline-block; width: 27px; height: 27px; background: url('/resources/nie/10th/img/common/ico-sitemap_b.png') no-repeat center / 100%;}

/* 사이트맵 */
.sitemap-wrap{display: none;position: fixed;top: 0;right: 0;width: 100%;max-width: 500px;height: 100%;overflow-y: auto;background: #fff;z-index: 160;}
.sitemap-wrap .logo_10{padding: 135px 80px 45px 60px;}
.sitemap-wrap .sitemap-close{position: absolute; top: 36px; right: 80px;}
.sitemap-wrap .gnb{}
.sitemap-wrap .gnb >li{border-bottom: 1px solid #e7e7e7;}
.sitemap-wrap .gnb >li >a{display: inline-flex;align-items: center;justify-content: space-between; width: 100%; font-size: 24px;font-size: 1.5em;font-weight: 500;color: #222;padding: 1em 80px 1em 60px;transition: all .3s ease;}
.sitemap-wrap .gnb >li >a::after{content: ''; display: inline-block; width: 20px; height: 11px; background: url('/resources/nie/10th/img/common/ico-arr_down_w.png') no-repeat center / 100%; filter: brightness(0.6);}
.sitemap-wrap .gnb >li >a:hover,
.sitemap-wrap .gnb >li >a.active{background: var(--green); color: #fff;}
.sitemap-wrap .gnb >li >a:hover::after{filter: brightness(1);}
.sitemap-wrap .gnb >li >a.active::after{transform: rotate(180deg); filter: brightness(1);}
.sitemap-wrap .depth2{display: none; background: #f7f7f7; padding: 10px 80px 10px 60px;}
.sitemap-wrap .depth2 >li{}
.sitemap-wrap .depth2 >li >a{display: block; font-size: 18px; font-size: 1.125em; font-weight: 500; color: #666; padding: 5px 0;}
.sitemap-wrap .depth2 >li >a:hover,
.sitemap-wrap .depth2 >li.active >a,
.sitemap-wrap .depth2 >li >a.active{color: var(--green); text-decoration: underline;}

.whiteHeader #header{background-color: transparent; border-bottom: 0;}
.whiteHeader #logo a{background-image: url('/resources/nie/10th/img/common/logo_10_w.png');}
.whiteHeader #topNav .gnb >li >a{color: #fff;}
.whiteHeader .header-btn .sitemap{background-image: url('/resources/nie/10th/img/common/ico-sitemap_w.png')}
.whiteHeader .over #header{background: #fff; border-bottom: 1px solid #e7e7e7;}
.whiteHeader .over #logo a{background-image: url('/resources/nie/10th/img/common/logo_10.png');}
.whiteHeader .over #topNav .gnb >li >a{color: #222;}
.whiteHeader .over .header-btn .sitemap{background-image: url('/resources/nie/10th/img/common/ico-sitemap_b.png')}

/* 메인 퀵메뉴 */
.main-quick{position: fixed;top: 30%;right: 70px;z-index: 1;font-size: 15px; display: none;}
.main-quick .menu{border-radius: 0 40px;overflow: hidden;box-shadow: 10px 10px 21px rgba(0,0,0,0.1);}
.main-quick .menu >a{display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100px;height: 100px;background: #efefef;border-bottom: 1px solid #ccc;text-align: center;transition: all .2s ease-in-out;}
.main-quick .menu >a:first-child{border-top-right-radius: 40px;}
.main-quick .menu >a:last-child{border-bottom: 0; border-bottom-left-radius: 40px;}
.main-quick .menu >a >img{filter: grayscale(1);opacity: 0.6; transition: all .2s ease-in-out;}
.main-quick .menu >a >span{display: block;color: #888;font-weight: 500;line-height: 1;margin-top: 5px;transition: all .2s ease-in-out;}
.main-quick .menu >a:hover{background: #fff;border: 1px solid var(--green);}
.main-quick .menu >a:hover img{filter: grayscale(0);opacity: 1;}
.main-quick .menu >a:hover span{color: #666; font-weight: 600;}
.btn-top{position: fixed;bottom: 100px;right: 70px;display: flex;flex-direction: column;justify-content: center;align-items: center;width: 60px;height: 60px;background: #6fba2c;color: #fff;border-radius: 30px 0;box-shadow: 10px 10px 15px rgba(0,0,0,0.1);}
.btn-top:before{content: '';display: block;width: 15px;height: 11px;background: url('/resources/nie/10th/img/common/ico-arr_up.png') no-repeat center / 100%;margin-bottom: 5px;}
.main-quick .btn-top{position: static; display: block;width: 60px; height: auto; line-height: 50px;background: #6fba2c;color: #fff;margin: -10px 0 0 auto;border-radius: 30px 0;box-shadow: 10px 10px 15px rgba(0,0,0,0.1);}
.main-quick .btn-top:before{display: none;}

/* 메인 비주얼 */
.main-visual{position: relative;}
.main-visual__bg{height: 100vh;}
.main-visual__bg .slider{height:100vh; overflow:hidden;}
.main-visual__bg .slick-track{}
.main-visual__bg .slick-list{height:100vh; overflow:hidden;}
.main-visual__bg .slick-slide{height:100vh;}
.main-visual__bg .slick-slide img{position:relative; left:50%; transform:translateX(-50%); width:auto; height:auto; min-width:100%; min-height:100%; }
.main-visual__bg .slick-slide video{position:relative; width:100%; height:100vh; object-fit:cover;}
.main-visual__bg .slick-arrow{position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; width: 36px; height: 65px; background: url('') no-repeat center / 100%; text-indent: -9999px;}
.main-visual__bg .slick-prev{background-image: url('/resources/nie/10th/img/common/btn-prev.png'); left: 80px;}
.main-visual__bg .slick-next{background-image: url('/resources/nie/10th/img/common/btn-next.png'); right: 80px;}

.main-visual__msg{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);color: #fff;text-align: center;width: 100%;}
.main-visual__msg .img{}
.main-visual__msg .slogun{font-size: 40px; font-size: 2.5em; margin: 10px 0;}
.main-visual__msg .slider_w{display: flex;align-items: center;justify-content: center;padding: 0 60px;flex-wrap: wrap;}
.main-visual__msg .slider-msg{max-width: 880px;border: 2px solid #fff;border-radius: 0 30px;}
.main-visual__msg .slider-msg .slick-slide{margin: 10px 0;}
.main-visual__msg .slider-msg .box{font-size: 50px;font-size: 3.15em; font-weight: 700;letter-spacing: -2px; white-space: nowrap;}
.main-visual__msg .slider-msg .box::after{content: '';display: inline-block;width: 1px;height: 54px;background: #fff;vertical-align: middle;margin: -3px 0 0 10px; animation: cursor .9s infinite ease;}
.main-visual__msg .slider_w .txt{font-size: 40px; font-size: 2.5em; margin-left: 0.5em;}
.main-visual__msg .slider-by{font-size: 22px; font-size: 1.375em; margin-top: 10px;}

@keyframes cursor{
    from {opacity: 0; visibility: hidden}
    to {opacity: 1; visibility: visible}
}

.main-banner{position: absolute;bottom: 70px;right: 70px;}
.main-banner >a{display: block;}
.main-banner .close{position: absolute;top: 0;right: 0;width: 26px;height: 26px;}
.main-banner .close:before{content: '';position: absolute;left: 50%;transform: translate(-50%, -50%) rotate(45deg);width: 100%;height: 2px;background: #fff;}
.main-banner .close:after{content: '';position: absolute;left: 50%;transform: translate(-50%, -50%) rotate(-45deg);width: 100%;height: 2px;background: #fff;}


/* 메인 공통 */
.main-tit{font-family: 'TmonMonsori'; font-size: 50px; font-size: 3.125em; line-height: 1.2; text-align: center; padding: 0 20px; word-break: keep-all}

/* 메인 주요메뉴 */
.main-menu{padding: 120px 0 140px;background: url('/resources/nie/10th/img/main/bg-section2.jpg') no-repeat center bottom;}
.main-menu .menu-wrap{display: flex; align-items: flex-start; flex-wrap: wrap; margin: 60px -1em -1.875em;}
.main-menu .menu-wrap >li{width: calc(25% - 2em); margin: 0 1em 1.875em; overflow: hidden; border-radius: 30px;}
.main-menu .menu-wrap .item{display: block; position: relative;}
.main-menu .menu-wrap .item .img{display: block; width: 100%; height: 100%;}
.main-menu .menu-wrap .item .img >img{display: block; width: 100%; object-fit: cover}
.main-menu .menu-wrap .item .t{position: absolute; top: 50px; left: 50%; transform: translateX(-50%); width: 100%; padding: 0 10px; text-align: center; font-size: 30px; font-size: 1.875em; font-weight: 700; color: #fff;}
.main-menu .menu-wrap .item .hover{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(180deg, rgba(55, 216, 205, 0.7), rgba(55, 174, 155, 0.7));display: flex;align-items: flex-end;justify-content: center; transition: all .3s ease; opacity: 0; visibility: hidden;}
.main-menu .menu-wrap .item .hover .more{display: inline-flex; align-items: center; justify-content: space-between; width: 90%; max-width: 180px; line-height: 50px; background: #fff; border-radius: 30px; font-weight: 500; color: var(--green); padding: 0 30px; margin-bottom: 50px;}
.main-menu .menu-wrap .item .hover .more::after{content: ''; display: inline-block; width: 18px; height: 7px; background: url('/resources/nie/10th/img/common/ico-go_mt.png') no-repeat center / 100%; margin-top: -3px;}
.main-menu .menu-wrap .item:hover .hover,
.main-menu .menu-wrap .item:focus-visible .hover{opacity: 1; visibility: visible;}

/* 메인 홍보영상 */
.main-video{padding: 120px 0 140px;background: #eaf9f6 url('/resources/nie/10th/img/main/bg-section3.jpg') no-repeat center top;}
.main-video__tab{margin-top: 60px; position: relative;}
.main-video__tabTitle{font-size: 0; position: absolute; top: -125px; right: 0;}
.main-video__tabTitle >li{display: inline-block; font-size: 1rem; margin: 0 5px;;}
.main-video__tabTitle >li >a{display: block; width: 140px; line-height: 65px; font-size: 22px; font-size: 1.375em; font-weight: 500; text-align: center; border: 1px solid var(--green); color: var(--green); border-radius: 15px;}
.main-video__tabTitle >li >a.active{background: var(--green); color: #fff; font-weight: 600;}
.main-video__tabCont{overflow: hidden; border-radius: 80px 0;}
.main-video__tabCont >*{}
.main-video__tabCont >*:not(:first-child){display: none;}
.main-video__tabCont .video_w{}
.main-video__tabCont .video_w a{display: block;position: relative;width: 100%;padding-bottom: 49.61%;}
.main-video__tabCont .video_w a::before{content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; background: url('/resources/nie/10th/img/common/btn-play.png') no-repeat center / 100%; z-index: 1;}
.main-video__tabCont .video_w img{position: absolute;top: 0;left: 0;width: 100%;/* height: 100%; */object-fit: cover;}
.main-video__tabCont .slider{position: relative;}
.main-video__tabCont .slider .slick-arrow{position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; width: 36px; height: 65px; background: url('') no-repeat center / 100%; text-indent: -9999px;}
.main-video__tabCont .slider .slick-prev{background-image: url('/resources/nie/10th/img/common/btn-prev.png'); left: 80px;}
.main-video__tabCont .slider .slick-next{background-image: url('/resources/nie/10th/img/common/btn-next.png'); right: 80px;}

#videoPopup{}
#videoPopup .in{position: relative;max-width: 1280px;width: 95%;max-height: 95%;display: flex;left: 50%;top: 50%;transform: translate(-50%, -50%);word-break: keep-all;flex-direction: column;}
#videoPopup .modal-tit{background: #fff;width: 100%;text-align: right;}
#videoPopup .btn-close{position: relative;width: 60px;height: 60px;}
#videoPopup .btn-close:before{content: '';position: absolute;left: 50%;transform: translate(-50%, -50%) rotate(45deg);width: 30px;height: 2px;background: #333;}
#videoPopup .btn-close:after{content: '';position: absolute;left: 50%;transform: translate(-50%, -50%) rotate(-45deg);width: 30px;height: 2px;background: #333;}
#videoPopup .modal-cont{ width: 100%; }
#videoPopup .video-wrapper{position: relative;width: 100%;padding-bottom: 56.25%;}
#videoPopup .video-wrapper iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }


/* footer */
.footer{background-color:#3b4044; width:100%;}
.foot-top{display:flex; justify-content:space-between; align-items:center; height:72px; border-bottom:1px solid #626669; width:100%;}
.foot-top select{border:1px solid #43474b; display:flex; justify-content:center; align-items:center; width:175px; height:40px; padding:0 30px 0 20px; color:#fff; line-height:1; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='6 8 12 7.41' xml:space='preserve'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23B3B3B3' d='m12 8-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14l-6-6z'/%3E%3C/svg%3E") no-repeat right 20px center #35393d; transition:all .4s; margin-left:auto;}
.foot-top option{font-size:16px;}
.foot-top .moveBtn{display:flex; align-items:center; justify-content:center; height:40px; padding:0 10px; color:#fff; font-size:16px; border:1px solid #43474b; margin-left:5px; background:#35393d;}

.foot-top .sel_w{display: flex}
.foot-top .sel_w > *:last-child{margin-left: 10px;}
.foot-top .sel{display: flex}
.top-btn{display:flex;}
.top-btn a{display:flex; align-items:center;}
.top-btn a{font-size:16px; color:#fff; line-height:1;}
.top-btn a:hover,
.top-btn a:focus,
.top-btn a.on{color:#cfd1ed;}
.top-btn a:not(:last-child)::after{content:''; display:flex; align-items:center; margin:0 20px; width:4px; height:4px; background-color:#b1b3b4; border-radius:100%;}
.top-btn a:hover,
.top-btn a:focus{text-decoration:underline; text-underline-position:under;}
.top-btn .act{color: 17px}

.foot-btm{display:flex; justify-content:space-between; align-items:center; padding:25px 0 30px 0; width:100%;}
.foot-btm .txt{}
.foot-btm .txt address{transition:all .4s;}
.foot-btm .txt address p{display:flex; font-size:16px; color:#c3c3c3; line-height:1; }
.foot-btm .txt address p:not(:last-child){margin-bottom:10px;}
.foot-btm .txt address span{display:flex; align-items:center; line-height:1; font-style:normal;}
.foot-btm .txt address span:not(:first-child)::before{content:''; display:flex; width:4px; height:4px; border-radius:100%; background-color:#b1b3b4; margin:0 17px; }
.foot-btm .txt > p{font-family:'SpoqaHanSansNeo'; font-size:15px; font-weight:400; line-height:1; color:#fff; margin-top:15px;}
.foot-btm .btm-btn{display:flex;}	
.foot-btm .btm-btn a{display:block;}
.foot-btm .btm-btn a:first-child{margin-right:20px;}
.foot-btm .btm-btn a:not(:first-child){margin-right:10px;}

@media screen and (max-width:1400px){
    #logo{margin-left: 20px;}
    .header-btn{margin-right: 20px;}
    
    .main-visual__bg .slick-prev{left: 20px;}
    .main-visual__bg .slick-next{right: 20px;}

    .main-video__tab{margin-top: 30px;}
    .main-video__tabTitle{position: static; margin-bottom: 30px; text-align: center;}
}
@media screen and (max-width:1200px){
    .main-visual__msg .slider_w{flex-direction: column;}
    .main-visual__msg .slider-msg{max-width: 100%;}
    .main-visual__msg .slider-msg .box{font-size: 3em; padding: 10px 20px; word-break: keep-all;}

    
	.foot-top{flex-wrap:wrap; justify-content:center; padding:20px 0; height:auto;}
	.foot-top select{margin:20px 0 0;}
	.foot-top .top-btn{width:100%; justify-content:center;}
	.foot-top .top-btn a:not(:last-child)::after{margin:0 10px;}
	.foot-top .moveBtn{margin:20px 0 0 5px;}
	.foot-btm{flex-wrap:Wrap; justify-content:center;}
	.foot-btm .txt{display:flex; flex-wrap:wrap; justify-content:center; text-align:Center;}
	.foot-btm .txt > p{width:100%;}
	.foot-btm .btm-btn{align-items:Center; margin:20px 0 0;}
}
@media screen and (max-width:1024px){
    #header{height: 80px;}
    #topNav{display: none;}
    
    .main-visual__msg .slider_w{padding: 0 20px;}
    
    .main-menu .menu-wrap >li{width: calc(50% - 2em);}
}
@media screen and (max-width:768px){
    .sitemap-wrap .logo_10{padding: 110px 40px 45px 40px;}
    .sitemap-wrap .sitemap-close{right: 40px;}
    .sitemap-wrap .gnb >li >a{padding: 1em 40px;}
    .sitemap-wrap .depth2{padding: 10px 40px;}
    
    .main-tit{font-size: 2.5em;}
    
    .main-visual__bg .slick-arrow{width: 25px;}
    .main-visual__msg .slogun{font-size: 2em;}
    .main-visual__msg .slider-msg .box{font-size: 2em;padding: 0 20px;line-height: 1; letter-spacing: -3px}
	.main-visual__msg .slider-msg .box::after{display: none;}
	
	.main-banner{width: 150px;bottom: 20px;right: 20px;}

    .main-menu{padding: 80px 0 100px}
    .main-menu .menu-wrap >li{border-radius: 20px;}
    
    .main-video{padding: 80px 0 100px}
    .main-video__tabCont{border-radius: 50px 0}

	.main-menu .menu-wrap .item .t{font-size: 1.5em;}
    .main-menu .menu-wrap .item .hover .more{margin-bottom: 20px;line-height: 35px;}

    
	.top-btn{flex-wrap:wrap; justify-content:center; }	
    .top-btn a:not(:last-child)::after{margin:0 5px;}
	.top-btn a{margin:0 0 10px; font-size:14px;}
	.top-btn .act{font-size: 15px;}
	.foot-btm .txt address{}
	.foot-btm .txt address p{flex-direction:column; align-items:center; text-align:center; line-height:1.2; font-size:14px;}
	.foot-btm .txt address span:not(:first-child)::before{display:none;}
	.foot-btm .txt address span:last-child{margin:5px 0 0;}
	.foot-btm .txt > p{text-align:center; line-height:1.2; font-size:14px;}
	.foot-btm .btm-btn{flex-wrap:wrap; justify-content:center;}
	.foot-btm .btm-btn a:first-child{width:100%; margin:0 auto 10px; text-align:center;}
	.foot-top option,
	.foot-top .moveBtn{font-size:14px;}
	.foot-top .sel_w{flex-flow: column}
	.foot-top .sel_w > *:last-child{margin:-5px 0 0;}
}
@media screen and (max-width:480px){
    #logo{margin-left: 10px;}
    .header-btn{margin-right: 10px;}
    .header-btn .homepage{width: 120px; line-height: 30px; margin-right: 10px;}

    .main-visual__msg .img{width: 200px; margin: 0 auto;}
	.main-visual__msg .slider-msg{border-radius: 0 15px;}
    .main-visual__msg .slider-msg .box{font-size: 1.5em;}

    .main-menu .menu-wrap{margin: 40px -10px -1.875em;}
    .main-menu .menu-wrap >li{width: calc(50% - 20px); margin: 0 10px 1.875em;;}
	.main-menu .menu-wrap .item .t{font-size: 1.25em; top: 20px;}
	.main-menu .menu-wrap .item .hover .more{padding: 0 10px;font-size: 12px;}
	.main-menu .menu-wrap .item .hover .more::after{width: 14px;}

    .main-video__tabTitle >li >a{width: 100px; line-height: 50px; border-radius: 10px;}
    .main-video__tabCont{border-radius: 30px 0}
    .main-video__tabCont .video_w a::before{width: 80px; height: 80px;}
    
	.foot-btm .txt address span{line-height:1.2;}
	
	.main-visual__msg .slogun{font-size: 1.6em;}
	.main-visual__bg .slick-arrow{width: 13px;}
}
@media screen and (max-width:350px){
    #logo{width: calc(100% - 187px);}
    #logo a{width: auto;}
}