@charset "utf-8";
.sub-visual {position: relative; height: 640px; z-index: 20; margin-bottom: 150px;} 
.sub-visual > img{width: 100%; height: 100%; object-fit:cover;}
.sub-visual > .sv-tbx{position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; padding-top: 80px}
.sub-visual > .sv-tbx .wrap1{display: flex; flex-direction: column; justify-content: center; text-align: center; height: 100%; }
.sub-visual .sv-tit{color: #FFF; text-align: center; font-size: 72px; font-weight: 600; line-height: 80px;  letter-spacing: -2.16px;}
.sub-wrap {display: flex; margin-bottom: 180px; gap:130px;}
.sub-wrap .sub-menu{max-width:280px; width: 100%;}
.sub-wrap .sub-menu .sticky{position: sticky; top: 150px;	}
.sub-wrap .sub-menu .speed-box{padding: 0px 20px; margin-bottom: 30px;}
.sub-wrap .sub-menu .speed-box ul{display: flex; align-items:center; }
.sub-wrap .sub-menu .speed-box ul > li{display: flex; align-items:center; color: #888; font-size: 18px; font-weight: 600; line-height: 24px;  letter-spacing: -0.54px;}
.sub-wrap .sub-menu .speed-box ul > li:not(:last-child):after{content: ''; width: 4px; height: 4px; background: #ddd; border-radius: 50%; margin: 0 12px;}
.sub-wrap .sub-menu .lnb{border-radius: 20px; border: 1px solid #DDD; padding: 26px 20px;}
.sub-wrap .sub-menu .lnb > ul{display: flex; flex-direction: column; gap:10px; }
.sub-wrap .sub-menu .lnb > ul > li{position: relative; z-index: 1;}
.sub-wrap .sub-menu .lnb > ul > li > a{position: relative; border-radius: 50px; background: #F8F8F8; display: flex; height: 60px; align-items:center; justify-content: space-between; color: #666; font-size: 22px; font-weight: 600; line-height: 34px;  letter-spacing: -0.66px; transition:.3s; padding: 0 26px 0 30px; z-index: 1;}
.sub-wrap .sub-menu .lnb > ul > li > a:after{content: ''; width: 14px; height: 10px; background: url(../img/sub/lnb-arr.png) center no-repeat; transition:.3s;}
.sub-wrap .sub-menu .lnb > ul > li:nth-child(2) > a:after,
.sub-wrap .sub-menu .lnb > ul > li:nth-child(4) > a:after,
.sub-wrap .sub-menu .lnb > ul > li:nth-child(5) > a:after{display: none;}
.sub-wrap .sub-menu .lnb > ul > li.current > a:after{rotate:-180deg; filter:brightness(5);}
.sub-wrap .sub-menu .lnb .submenu{display: none; border-radius: 30px 30px 20px 20px; background: #F6FAFF; margin-top: -60px; padding-top: 76px; padding-bottom: 26px; position: relative; z-index: 0; }
.sub-wrap .sub-menu .lnb .submenu > ul {display: flex; flex-direction: column; gap:6px;}
.sub-wrap .sub-menu .lnb .submenu > ul > li > a{padding: 0 30px; color: var(--Point-01, #122A89); font-size: 18px; font-weight: 600; line-height: 28px;  letter-spacing: -0.54px; opacity: 0.3; transition:.3s;}
.sub-wrap .sub-menu .lnb > ul > li.current > a{background: #122A89; color: #fff;}
.sub-wrap .sub-menu .lnb > ul > li.current .submenu > ul > li{
	&.current > a{opacity: 1;}
}
.sub-wrap .sub-menu .lnb .submenu > ul > li{
	&:hover > a{opacity: 1;}
}
.sub-wrap .sub-cnt{margin-top: -10px; width: calc(100% - 410px);}
.sub-wrap .sub-cnt .sub-tit{color: #111; font-size: 64px; font-weight: 600; line-height: 80px;  letter-spacing: -1.92px; margin-bottom: 79px;}

/* s11 */
.s11 .arti1{display: flex; gap:110px;}
.s11 .arti1 > .tbx{display: flex;flex-direction: column; gap:37px; flex:1; }
.s11 .arti1 > .tbx b{position: relative; color: #333; font-size: 36px; font-weight: 600; line-height: 50px;  letter-spacing: -1.08px; border-bottom: 1px solid #D9D9D9; padding-bottom: 37px;}
.s11 .arti1 > .tbx b:after{position: absolute; content: ''; width: 24px; height: 3px; border-radius: 1.5px; background: #122A89; left: 0; bottom: -1px;}
.s11 .arti1 > .tbx .p-box{display: flex; flex-direction: column; gap:2.1em; }
.s11 .arti1 > .tbx .p-box p{color: #666; font-size: 20px; font-weight: 400; line-height: 34px;  letter-spacing: -0.6px; }
.s11 .arti1 .fig-box{max-width:370px; width: 100%; }
.s11 .arti1 .fig-box .tbx{position: relative; display: flex; flex-direction: column; align-items:center; justify-content: center; text-align: center; gap:10px; margin-top: 36px; padding-bottom: 40px; border-bottom: 3px solid #ddd;}
.s11 .arti1 .fig-box .tbx:after{position: absolute; content: ''; width: 50%; height: 3px; background: #122A89;	 right: 0; bottom: -3px;}
.s11 .arti1 .fig-box .tbx span{color: #888;font-size: 22px; font-weight: 600; line-height: 30px;  letter-spacing: -0.66px;}
.s11 .arti1 .fig-box .tbx p{color: #333;  font-size: 26px; font-weight: 600; line-height: 34px;  letter-spacing: -0.78px;}

/* s13 */
.s13 {display: flex; flex-direction: column; gap:100px;}
.s13 article .wrap_controllers,
.s13 article .cont{display: none;}
.s13 article .map-box{overflow: hidden; border-radius: 20px;}
.s13 article .map-box .root_daum_roughmap{width: calc(100% + 2px); margin-left: -1px; }
.s13 article .map-box .root_daum_roughmap .wrap_map{height: 380px !important;}
.s13 article .tbx{display: flex; justify-content: space-between; padding-left: 20px; margin-top: 50px;}
.s13 article .tbx ul > li{display: flex; flex-wrap:wrap; color: #666; font-size: 20px; font-weight: 400; line-height: 40px; letter-spacing: -0.6px;}
.s13 article .tbx ul > li span{width: 54px; color:#111; font-weight: 600; }
.s13 article .tbx ul > li p{flex:1; }
.s13 article .tbx ol{display: flex; flex-wrap:wrap; gap:8px; }
.s13 article .tbx ol > li > a{border-radius: 10px; background: #122A89; width: 174px; height: 58px; display: flex; align-items:center; justify-content: space-between; padding: 0 24px; color: #FFF;font-size: 18px; font-weight: 600; line-height: 28px;  letter-spacing: -0.54px; transition:.3s;}  
.s13 article .tbx ol > li > a i{line-height: 0; transition:.3s;}
.s13 article .tbx ol > li:hover {
	> a{opacity: 0.9;}
	> a i{rotate:15deg;}
}
.s13 article .tbx ol > li:last-child > a{background: #111;}

/* s21 */
.s21 {max-width: 100%; overflow: hidden;}
.s21 .arti1 dl{display: flex; flex-wrap:wrap; gap:90px; padding-bottom: 80px; margin-bottom: 100px; border-bottom: 1px solid #DDD;}
.s21 .arti1 dl:last-child{margin-bottom: 0; border-bottom: 0; padding-bottom: 0;}
.s21 .arti1 dl dt{max-width:336px; width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap:20px;}
.s21 .arti1 dl dt span{display: flex; padding: 8px 20px; align-items: center; gap: 10px; border-radius: 50px; background: #122A89; color: #FFF; font-size: 16px; font-weight: 600; line-height: 24px; /* 150% */ letter-spacing: -0.48px;} 
.s21 .arti1 dl dt p{color: #333; font-size: 36px; font-weight: 600; line-height: 44px;  letter-spacing: -1.08px;}
.s21 .arti1 dl dd{width: calc(100% - 426px); position: relative; }
.s21 .arti1 dl dd .slider-wrap{position: relative; margin-bottom: 60px;}
.s21 .arti1 dl dd .owl-box{position: relative; }
.s21 .arti1 dl dd .owl-box .owl-stage-outer{border-radius: 20px; border: 1px solid #EEE; background: #F8F8F8; }
.s21 .arti1 dl dd .s21_owl figure{display: flex; align-items:center; justify-content: center; height: 340px;}
.s21 .arti1 dl dd .s21_owl figure img{width: auto;}
.s21 .arti1 .owl-dots{display: flex; justify-content: center; gap:8px; margin-top: 21px; padding-right: 32px;}
.s21 .arti1 .owl-dots .owl-dot{width: 8px; height: 8px; border-radius: 10px; opacity: 0.5; background: #888; transition:.3s;}
.s21 .arti1 .owl-dots .owl-dot.active{width: 36px; border-radius: 10px;background: #122A89; opacity: 1;}
.s21 .arti1 .controll{position: absolute; left: 50%; bottom: -13px; translate:35px 0; z-index: 10;}
.s21 .arti1 .controll .mv-btn{position: relative; width: 24px; height: 24px; }
.s21 .arti1 .controll .mv-btn span{position: absolute; left: 0; top: 0; line-height: 0; cursor: pointer;  z-index: 10; opacity: 1; z-index: 0; line-height: 0;}
.s21 .arti1 .controll .mv-btn span img{line-height: 0; filter:contrast(0.5);}
.s21 .arti1 .controll .mv-btn span:last-child{}
.s21 .arti1 .controll .mv-btn span.on{opacity: 0; z-index: -1;}
.s21 .arti1 dl dd .box{display: flex; flex-direction: column; gap:16px; margin-bottom: 40px;}
.s21 .arti1 dl dd .box:last-child{margin-bottom: 0;}
.s21 .arti1 dl dd .box b{color: #122A89; font-size: 26px; font-weight: 600; line-height: 34px;  letter-spacing: -0.78px;}
.s21 .arti1 dl dd .box p{color: #666; font-size: 20px; font-weight: 400; line-height: 34px;  letter-spacing: -0.6px;}
.s21 .arti1 dl dd .dot-ul{display: flex; flex-direction: column;}
.s21 .arti1 dl dd .dot-ul > li{position: relative; display: flex; flex-wrap:wrap; gap:5px; color: #666; font-size: 20px; font-weight: 400; line-height: 40px; letter-spacing: -0.6px; padding-left: 20px;}
.s21 .arti1 dl dd .dot-ul > li:before{position: absolute; content: ''; width: 4px; height: 4px; border-radius: 50%; background: #122A89; left: 0; top: 18px;}
.s21 .arti1 dl dd .dot-ul > li span{color: #333; font-weight: 600;}
.s21 .arti1 dl dd .dot-ul > li p{flex:1;}
.s21 .arti1 dl dd .flex{display: flex; flex-wrap:wrap; margin-left: -12px; gap:12px 0;}
.s21 .arti1 dl dd .flex > li{width: calc(33.333% - 12px); margin-left: 12px; border-radius: 20px; background: #F8F8F8; height: 260px; text-align: center; display: flex; flex-direction: column; align-items:center; justify-content: center; gap:24px;}
.s21 .arti1 dl dd .flex > li figure{display: flex; justify-content: center; align-items:center; width: 90px; height: 90px; padding: 12px; border-radius: 10px;background: #122A89;}
.s21 .arti1 dl dd .flex > li p{color: #333; text-align: center; font-size: 20px; font-weight: 500; line-height: 28px; letter-spacing: -0.6px;}