@charset "utf-8";
/*font 설정*/
html{font-size:62.5%;}
html.lock{overflow:hidden;}
@media screen and (max-width:1023px){
	html{font-size:56.25%}
}
@media screen and (max-width:449px){
	html{font-size:50%}
}

.cl:after{content:""; display:block; clear: both;}
.a11y{overflow:hidden;position:absolute;border:0;width:1px;height:1px;clip:rect(1px, 1px, 1px, 1px)}
.mont{font-family:'Montserrat', sans-serif;}
.app-inner{max-width:129rem; padding:0 3rem; margin:0 auto;}
body{font-family: 'Pretendard', sans-serif; font-size:1.6rem;}
#header{position: sticky; top:0; left:0; right:0; height:14rem; z-index: 9999; background:#fff; transition: height 0.2s;}
#header.on{border-bottom:1px solid #eee; height:10rem;}
#header .app-inner{display: flex; height:100%; align-items: center; justify-content: space-between;}
#header .logo img{height:4rem; width:auto;}
#gnb{}
#gnb .gnb-item{font-size:1.8rem; font-weight:700; margin-left:2em; letter-spacing: -0.04em; position: relative;}
#gnb .gnb-item.on:after{content:""; display:block; width:100%; height:4px; background:#0E8D59; position: absolute; left:0; bottom:-1em;}

.cm-title .eng-title{font-size:2.4rem; font-weight:800; color:#0E8D59; margin-bottom:0.4em; letter-spacing: -0.04em; line-height:1.2}
.cm-title .kor-title{color:#000; font-weight:800; font-size:5rem; letter-spacing: -0.05em; margin-bottom:0.8em; line-height:1.2}
.cm-title .desc{font-size:2rem; opacity: 0.7; font-weight:700; color:#000; margin-bottom:2em; line-height: 1.4;}
.cm-btn{display:flex; align-items: center; justify-content: center; margin:0 auto; width:26.2rem; height:7.4rem; font-size:2.2rem; font-weight:700; color:#fff; text-align: center; background:#000; border-radius:9999px}

#sec01{margin-bottom:13rem}
#sec01 .top {padding-top:10rem; position: relative; z-index: 1;}
#sec01 .top .eng{color:#0E8D59; font-size:2.4rem; font-weight:600; line-height:1.2; letter-spacing: -0.05em; margin-bottom:1em;}
#sec01 .top .kor{color:#000; font-size:7rem; line-height:1.2; letter-spacing: -0.03em; font-weight:800; margin-bottom:0.5em;}
#sec01 .top .desc{color:#000; opacity: 0.57; font-size:2.2rem; font-weight:700; letter-spacing: -0.03em; line-height: 1.3;}
#sec01 .bottom{margin-top:-10rem; height:80rem; position: relative; text-align: center; overflow: hidden;}
#sec01 .bottom img{max-width:192rem; position: absolute; left:50%; top:50%; transform: translate(-50%, -50%);}

#sec02{text-align: center; padding:6rem 0; margin-bottom:10rem;}
#sec02 .cm-title .eng-title{font-size:2rem; margin-bottom:1.2em;}
#sec02 .cm-title .kor-title{font-size:3rem; font-weight:800}
#sec02 .cm-title .desc{margin-bottom:3em;}

#sec03 {padding:6rem 0; margin-bottom:10rem; scroll-margin-top:8rem}
#sec03 .app-inner{display:flex; align-items: stretch; position: relative;}
#sec03 .app-inner:after{content:""; width:100vw; display:block; height:100%; background:#fff; position: absolute; right:55%; top:0; z-index: 55;}
#sec03 .left{background:#fff; position: relative; z-index: 999; width:45%}
#sec03 .right{ width:55%;}
#sec03 .left .cm-btn{margin-left:0}
#sec03 .swiper-container{overflow:visible; cursor: move;}
#sec03 .swiper-slide{width:22vw;}
#sec03 .swiper-slide .img-frame{width:22vw; height:22vw; position: relative; overflow: hidden; background:#f8f9fa; border-radius: 16px;}
#sec03 .swiper-slide .img-frame img{position: absolute; height:80%; width: auto; top:50%; left:50%; transform: translate(-50%, -50%);}
#sec03 .swiper-slide .img-title{margin-top:4rem}
#sec03 .swiper-slide .img-title .category{margin-bottom:0.8em; font-weight:800; color:#0E8D59; font-size:1.4rem; letter-spacing: -0.04em;}
#sec03 .swiper-slide .img-title .name{font-weight:800; color:#000; font-size:1.8rem; letter-spacing: -0.04em;}

#sec04{padding:6rem 0; margin-bottom:10rem; scroll-margin-top:8rem}
#sec04 .top{text-align: center; margin-bottom:6rem;}
#sec04 .process-list{display:flex; flex-wrap: wrap; align-items: stretch;}
#sec04 .process-list .list-item{width:calc(25% - 7.5px); margin-right: 10px; background:#f8f9fa; padding:48px 38px; border-radius: 16px;}
#sec04 .process-list .list-item:last-child{margin-right:0;}
#sec04 .process-list .item-num{color:#0E8D59; font-weight:800; font-size:2rem; margin-bottom:0.8em; letter-spacing: -0.03em;}
#sec04 .process-list .item-title{color:#000; font-weight:800; font-size:2rem; margin-bottom:0.8em; line-height:1.2; letter-spacing: -0.03em;}
#sec04 .process-list .item-content{color:#000; font-weight:500; font-size:1.8rem; line-height:1.5; margin-bottom:4em; opacity: 0.65; word-break:keep-all;  letter-spacing: -0.04em;}

#sec05{ margin-bottom:18rem; scroll-margin-top:13rem}
#sec05 .top{text-align: center;}
#sec05 .tab-nav{display:flex; align-items: center; justify-content: center; margin:6rem 0 8rem;}
#sec05 .tab-btn{border-radius: 9999px; background:#eee; color:#000; font-size:2.2rem; font-weight:700; letter-spacing: -0.04em; width:17.2rem; height:6.4rem; display:flex; align-items: center; justify-content: center; margin:0 5px;}
#sec05 .tab-btn.on{background:#000; color:#fff;}

.panel{display:none;}
.panel.on{display:block;}

#footer{background:#1e1d1d; text-align: center; color:#fff; padding:10rem;}
#footer .footer-logo{margin-bottom:3rem;}
#footer .footer-logo img{height:4rem; width:auto;}
#footer .footer-copy, #footer .footer-info{font-size:1.5rem; font-weight:500; opacity: 0.5; letter-spacing: -0.04em;}
#footer .footer-copy{margin-bottom:2em;}
#footer .footer-info .info-item{margin-bottom:0.6em;}
#footer .footer-info .info-item span + span{margin-left:1em;}

.dashboard-top{margin:60pxpx auto; display:flex; align-items:center; justify-content:center; gap:4px;}
.dashboard-top .logo{text-align:center;}
.dashboard-top .logo img{height:40px; width:auto;}
.dashboard-top .dashboard-btn{width:130px; height:45px; background:#000; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:1.5rem; border-radius:4px;}
.dashboard-top .admin-btn-webmail{background:#10c37a;}

.talk-icon{position:fixed; bottom:20px; right:20px; z-index:9999}

@media screen and (max-width:1024px){
	.cm-btn{width:19rem; height:5.4rem; font-size: 1.7rem;}
	.cm-title .eng-title{font-size:2rem;}
	.cm-title .kor-title{font-size:3rem;}
	.cm-title .desc{font-size:1.7rem;}


	#sec01 .app-inner{padding:0 6rem;}
	#sec01 .top{text-align:center; word-break:keep-all; padding-bottom:7rem; padding-top:20rem; }
	#sec01 .top .eng{font-size:1.8rem;}
	#sec01 .top .kor{font-size:4rem;}
	#sec01 .top .desc{font-size:1.6rem;}
	#sec01 .bottom{margin-top:3rem; height:40rem;}

	#sec03 .swiper-slide{width:48vw}
	#sec03 .swiper-slide .img-frame{width:48vw; height:48vw}

	#sec04 .process-list .list-item{width:calc(50% - 5px); margin-bottom:10px;}
	#sec04 .process-list .list-item:nth-child(2n){margin-right:0;}

	#sec05 .tab-btn{width:14rem; height:5.2rem; font-size:1.7rem;}
}

@media screen and (max-width:768px){
	#header{height:10rem;}
	#header .logo img{transform:scale(0.8); transform-origin:left center;}
	#gnb .gnb-item{margin-left:10px; font-size:13px}
	#gnb .gnb-item:nth-child(1), #gnb .gnb-item:nth-child(2){display:none;}
	#gnb .gnb-item.on:after{height:2px}

	#sec01{margin-bottom:5rem}
	#sec01 .app-inner{padding:0 6rem;}

	#sec02 {margin-bottom:4rem}
	#sec02 .app-inner{padding:0 4rem; word-break: keep-all;}
	#sec02 .cm-title .kor-title{font-size:2.4rem;}

	#sec03{margin-bottom:4rem;}
	#sec03 .app-inner{display:block;}
	#sec03 .right, #sec03 .left{width:100%;}
	#sec03 .left{text-align: center;}
	#sec03 .left .cm-btn{margin:0 auto 5rem;}
	#sec03 .app-inner:after{display:none;}
	#sec03 .swiper-slide .img-title .category{font-size:1.3rem}
	#sec03 .swiper-slide .img-title .name{font-size:1.6rem;}

	#sec04{margin-bottom:4rem;}
	#sec04 .process-list .list-item{width:100%; margin-bottom:10px; margin-right:0;}
	#sec04 .process-list .item-content{margin-bottom:0}


	#footer{padding:6rem 0}
}


#notice-bar{background:#111; height:6rem; overflow:hidden; position: relative;}
#notice-bar	.inner{z-index: 1; height:100%; display:flex; align-items:center; max-width:129rem; padding:0 3rem; margin:0 auto;}
#notice-bar .inner:after{content:""; display: block; clear:both;}
#notice-bar .slide-title{color:#fff; white-space:nowrap; position:relative; padding-right:15px; margin-right:15px; display:flex; align-items:center; gap:10px;}
#notice-bar .slide-title img{margin-top:-2px}
#notice-bar .slide-title:before{content:""; display:block; width:1px; height:12px; background:#fff; position:absolute; right:0; top:50%; transform:translateY(-50%); opacity:0.3;}
#notice-bar .swiper-container{height:100%; width:100%; }
#notice-bar .notice-list{height:100%;}
#notice-bar .notice-list li{height:100%;}
#notice-bar .notice-list li a{height:100%; display:flex; font-size:1.5rem; align-items: center; gap:14px; color:#fff; background:#111;}
#notice-bar .notice-list li .title{white-space: nowrap; font-weight:500; overflow:hidden; text-overflow:ellipsis; font-size:14px;}
#notice-bar .notice-list li .date{font-size:13px; color:#10c37a}
#notice-bar .control{position: absolute; right:0; top:50%; transform: translateY(-50%);}
#notice-bar .control .arrow{width:5.4rem; height:5.4rem; text-indent: -9999px; display:flex; align-items: center; justify-content: center;}
#notice-bar .control .arrow img{width:1rem; height:auto; opacity: 0.2; transition: opacity 0.2s; transform:rotate(90deg)}
#notice-bar .control .arrow:hover img{opacity: 1;}
#notice-bar .admin-btn{color:#111; display:block; width:50px; height:100%; position:absolute; right:0; top:0;}
@media screen and (max-width:768px){
	#notice-bar .slide-title{display:none;}
}