@charset "utf-8";

#sub{width: 100%; overflow: hidden;}
.sub-visual{position: relative; height: 550px; }
.sub-visual img{width: 100%; height: 100%; object-fit:cover; }
.sub-visual h4{position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items:center; justify-content: center; color: #FFF;font-family: "Rokkitt"; font-size: 60px;font-weight: 700;line-height: normal; box-sizing: border-box; padding-top: 22px;}
.lnb b{display: none;}
.lnb > ul{display: flex; }
.lnb > ul > li{position: relative; flex:1; }
.lnb > ul > li:not(:last-child):before{position: absolute; content: ''; width: 1px; height: 16px; background: #CDCDCD; right: 0; top: 50%; margin-top: -8px; }
.lnb > ul > li:after{position: absolute; content: ''; width: 0%; height: 2px; background: #224688; left: 50%; bottom: 0; transition:.3s;}
.lnb > ul > li > a{display: flex; align-items:center; justify-content: center; color: #666; text-align: center; font-size: 20px; font-weight: 400; line-height: 32.9px;  letter-spacing: -0.4px; height: 70px;}
.lnb > ul > li{
	&:hover:after{width: 100%; left: 0;}
	&.current:after{width: 100%; left: 0;}
}
.lnb > ul > li .dep3{display: none;}
.lnb > ul > li .dep3 ul{display: flex; flex-wrap:wrap; text-align: center; justify-content: center; gap:41px; }
.lnb > ul > li .dep3 ul > li{position: relative; }
.lnb > ul > li .dep3 ul > li > a{color: #666;font-size: 20px;font-weight: 400;line-height: 32.9px; letter-spacing: -0.4px; transition:.3s;}
.lnb > ul > li .dep3 ul > li:not(:last-child):after{position: absolute; content: ''; width: 5px; height: 5px; border-radius: 50%; background: #224688; border-radius: 50%; right: -23px; top: 14px;}
.lnb > ul > li .dep3 ul > li.current > a{color: #224688;font-weight: 600;}
.lnb > ul > li.current .dep3{display: block; position: absolute; left: 0; top: 88px; width: 100%;}
.speed{display: flex; justify-content: flex-end; align-items:center; height: 30px;}
.speed > li{line-height: 0; color: #222;font-size: 14px;font-weight: 500; line-height: 30px; display: flex; align-items:center;}
.speed > li.home{margin-right: 13px;}
.speed > li:not(:last-child):after{display: inline-block; content: ''; width: 18px; height: 18px; background: url(../img/sub/speed-arr.png) center no-repeat; margin: 0 5px;}
.speed > li.home:after{display: none;}
.sub-tit{color: #000;font-size: 50px;font-weight: 600;line-height: normal; margin-top: 60px; margin-bottom: 120px; display: flex; align-items:Center;}
.sub-tit span{position: relative; top: 1px; color: #224688;font-size: 24px;font-weight: 600;line-height: 33.9px; letter-spacing: -0.48px;}
.sub-tit span:before{display: inline-block; content: 'ㅣ';  margin: 0 20px; }
.sub-tit.m0{margin: 0;}
.sub-tit.Rokkitt{font-family: "Rokkitt"; font-size: 60px;font-weight: 700;line-height: normal;}
.sub-layout{ margin-top: 63px; margin-bottom: 370px;}

/* s11 */
.s11 .arti1{display: flex; flex-wrap:wrap; justify-content: space-between;}
.s11 .arti1 .lbx{max-width:821px; width: 100%;}
.s11 .arti1 .lbx h3{color: #333;font-size: 35px;font-weight: 600;line-height: 57px; letter-spacing: -0.7px; margin-bottom: 54px;}
.s11 .arti1 .lbx .p-box{display: flex; flex-direction: column; gap:33px; margin-bottom: 71px;}
.s11 .arti1 .lbx p{color: #333;font-size: 20px;font-weight: 400;line-height: 33px; letter-spacing: -0.4px;}
.s11 .arti1 .lbx i{display: flex; justify-content: flex-end;}

/* s12 */
.s12 .arti1{display: flex; align-items:center; }
.s12 .arti1 .lbx{width: 40%;}
.s12 .arti1 .lbx .tbx small{display: block; color: #E63118;font-size: 14px;font-weight: 700;letter-spacing: 3.22px; margin-bottom: 4px;}
.s12 .arti1 .lbx .tbx h4{color: #333;font-size: 35px;font-weight: 600;line-height: 57px; /* 162.857% */letter-spacing: -0.7px; margin-bottom: 27px;}
.s12 .arti1 .lbx .tbx p{color: #666;font-size: 20px;font-weight: 400;line-height: 32.9px; /* 164.5% */letter-spacing: -0.4px; margin-bottom: 132px;}
.s12 .arti1 .lbx .tbx h5{color: #333;font-size: 50px;font-weight: 600;line-height: 30.1px; /* 60.2% */}
.s12 .arti1 .rbx {position: relative; z-index: 1; flex:1; padding: 75px 0; padding-left: 173px; display: flex; gap:40px; flex-direction: column;}
.s12 .arti1 .rbx:before{position: absolute; content: ''; width: 200%; height: 100%; background: #000; border-radius: 50px 0 0 50px; background: #F9F9F9; left: 0; top: 0; z-index: -1;}
.s12 .arti1 .rbx .box{display: flex;  align-items:center;gap:81px}
.s12 .arti1 .rbx .box figure{position: relative; z-index: 1; width: 244px; }
.s12 .arti1 .rbx .box:first-child figure:before{position: absolute; content: ''; width: 1px; height: 300%; background: #DFDFDF; left: 50%; top: 50px; z-index: -1;}
.s12 .arti1 .rbx .box .tbx {display: flex; flex-direction: column;gap:14px; flex:1;}
.s12 .arti1 .rbx .box .tbx dl{display: flex; flex-wrap:wrap; }
.s12 .arti1 .rbx .box .tbx dl dt{position: relative; color: #333;font-size: 24px;font-weight: 600;line-height: 33.9px; /* 141.25% */letter-spacing: -0.48px; padding-left: 14px; width: 116px;}
.s12 .arti1 .rbx .box .tbx dl dt:before{position: absolute; content: ''; width: 4px; height: 4px; background: #333; border-radius: 50%; left: 0; top: 14px;} 
.s12 .arti1 .rbx .box .tbx dl dd {flex:1; padding-top: 2px; }
.s12 .arti1 .rbx .box .tbx dl dd p{color: #666;font-size: 20px;font-weight: 400;line-height: 32.9px; /* 164.5% */letter-spacing: -0.4px;}

/* s13 */
.s13 .arti1{text-align: center;}

/* s14 */
.s14 .dep3{display: none;}
.s14 .arti1{display: flex; flex-wrap:wrap; gap:149px; padding-left: 73px;}
.s14 .arti1 .lbx .map{position: relative;}
.s14 .arti1 .lbx .map .map-img{position: relative;	}
.s14 .arti1 .lbx .map .map-img img{transition:.3s;}
.s14 .arti1 .lbx .map .map-img img:last-child{position: absolute; left: 0; top: 0; opacity: 0;}
.s14 .arti1 .lbx .map .map-img img.on{opacity: 1; z-index: 1;}
.s14 .arti1 .lbx .map .pin-box .pin {position: absolute; z-index: 100;}
.s14 .arti1 .lbx .map .pin-box .pin i{position: relative; left: 0; top: 0; cursor: pointer;}
.s14 .arti1 .lbx .map .pin-box .pin o{position: relative; display: flex; flex-direction: column; align-items:center; justify-content: center;  text-align: center;width: 58px; height: 58px; border-radius: 50%; color: #FFF; left: 0; top: 0; background: #3D73D8; transition:.3s; cursor: pointer;}
.s14 .arti1 .lbx .map .pin-box .pin o:after{position: absolute; content: ''; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; background: #3D73D8; z-index: -1; transition:.3s;}
.s14 .arti1 .lbx .map .pin-box .pin o p{font-size: 14px; font-weight: 700; line-height: normal; letter-spacing: -0.28px;}
.s14 .arti1 .lbx .map .pin-box .pin o span{color: #FFF;font-size: 12px;font-weight: 600;line-height: normal;letter-spacing: -0.24px;}
.s14 .arti1 .lbx .map .pin-box .pin1 {left: 143px; top: 180px;}
.s14 .arti1 .lbx .map .pin-box .pin1 i{left: -26px; top: 20px;}
.s14 .arti1 .lbx .map .pin-box .pin2 o{background: #3AAAC8;}
.s14 .arti1 .lbx .map .pin-box .pin2{right:50px; bottom: 150px;}
.s14 .arti1 .lbx .map .pin-box .pin2 i{left: 38px; top: 3px;}
.s14 .arti1 .lbx .map .pin-box .pin2 o:after{background: #3AAAC8;}
.s14 .arti1 .lbx .map .pin-box .pin{
	&:hover o:after{scale:1.1}
	&.on o:after{scale:1.1}
}

.s14 .arti1 .lbx .map .pin-box .pin{
	&:hover i img{animation: pinAni 1.5s linear infinite;}
	&.on i img{animation: pinAni 1.5s linear infinite;}
}
@keyframes pinAni {
  0% {translate:0 0px}
  50% {translate:0 5px}
	100% {translate:0 0px}
}

.s14 .arti1 .rbx {flex:1; position: relative; top: 4px;}
.s14 .arti1 .rbx > .tab-ul{position: relative; z-index: 10; display: flex; gap:19px; left: 82px;	}
.s14 .arti1 .rbx > .tab-ul > li{display: flex; width: 111px; height: 111px; justify-content: center; align-items: center; border-radius: 74px; border: 1px solid rgba(0, 0, 0, 0.20); background: #FFF; color: #A0A0A0; text-align: center; font-size: 20px; font-weight: 600; line-height: 33px;  letter-spacing: -0.4px; transition:.3s; cursor: pointer;}
.s14 .arti1 .rbx > .tab-ul > li.on{background: #3D73D8; color: #FFF; }
.s14 .arti1 .rbx > .tab-ul > li:last-child.on{background: #3AAAC8;}
.s14 .arti1 .rbx > .box{position: relative; z-index: 1; height: 547px; margin-top: -56px; border-radius: 20px; }
.s14 .arti1 .rbx > .box:before{position: absolute; content: ''; background: url(../img/sub/s141-bg.jpg) left top no-repeat; width: 240%; height: 100%;	 z-index: -1; left: 0; top: 0;}
.s14 .arti1 .rbx > .box .cnt {display: flex; flex-wrap:wrap;  display: none; box-sizing: border-box; padding: 111px 0 0 87px;}
.s14 .arti1 .rbx > .box .cnt > ul {display: flex; flex-direction: column; gap:3px; width: 333px;}
.s14 .arti1 .rbx > .box .cnt > ul > li{position: relative; color: #666;font-size: 20px;font-weight: 400;line-height: 33px; letter-spacing: -0.4px; padding-left: 16px;}
.s14 .arti1 .rbx > .box .cnt > ul > li:before{position: absolute; content: ''; width: 6px; height: 6px; background: #666; border-radius: 50%;	left: 0; top: 13px;}
.s14 .arti1 .rbx > .box .cnt > ul > li ol{display: flex; flex-direction: column; padding-left: 6px;}
.s14 .arti1 .rbx > .box .cnt > ul > li ol > li{color: #666;font-size: 18px;font-weight: 400;letter-spacing: -0.36px;}
.s14 .arti1 .rbx > .box .cnt .img-box{display: flex; flex-wrap:wrap; align-items: flex-start; align-content: flex-start; flex:1; gap:17px 15px;  }
.s14 .arti1 .rbx > .box .cnt .img-box img{width: auto; max-width:100%;;}
.s14 .arti1 .rbx > .box .cnt .img-box img:first-child{margin-right: 180px;}
.s14 .arti1 .rbx > .box .cnt1{display: flex;}
.s142 .arti1{gap:99px; padding-left: 0;}
.s142 .arti1 .rbx > .box:before{ background: url(../img/sub/s142-bg.jpg) left top no-repeat;}
.s142 .arti1 .lbx .map .pin-box .pin1 {left: 202px; top: 185px;}
.s142 .arti1 .lbx .map .pin-box .pin1 i{left: -19px; top: 11px;}
.s142 .arti1 .lbx .map .pin-box .pin2{right: auto; left: 145px; bottom: 241px;}
.s142 .arti1 .lbx .map .pin-box .pin2 i{left: 7px; top: -3px;}
/* s17 */
.s17 .arti1 ol{display: flex; gap:10px; justify-content: flex-end; margin-bottom: 30px;}
.s17 .arti1 ol > li{display: flex; align-items:center; justify-content: center; border: 1px solid #ddd; border-radius: 10px; width: 100px; height: 40px; text-align: center; cursor: pointer;}
.s17 .arti1 ol > li.on{color: #fff; background: #3D73D8; border: 1px solid #3D73D8;}
.s17 .arti1 .map-box{border-radius: 20px; overflow: hidden;}
.s17 .arti1 .map-box .root_daum_roughmap .wrap_controllers{display: none;}
.s17 .arti1 .map-box .cont{display: none;}
.s17 .arti1 .map-box .root_daum_roughmap_landing{width: 100%;}
.s17 .arti1 .map-box .root_daum_roughmap .wrap_map{height: 590px !important; }
.s17 .arti1 ul {margin-top: 40px;}
.s17 .arti1 ul > li{display: flex; flex-wrap:wrap; color: #666; font-size: 20px; font-weight: 500; line-height: 36px; height: 60px; align-items: stretch}
.s17 .arti1 ul > li span{display: flex;width: 200px;flex-direction: column;justify-content: center;align-items: flex-start; gap: 10px; padding: 0 40px; border-bottom: 1px solid #000; color: #000;}
.s17 .arti1 ul > li p{flex:1; border-bottom: 1px solid #ddd; padding-left: 20px; height: 60px; display: flex; align-items:center;}
.s17 .arti2 {margin-top: 160px;}
.s17 .arti2 figure{text-align: center; margin-top: 95px;}
.lay3{margin-bottom: 0;}
.s3 .table-wrap{ overflow-y: auto;}
.s3 .table-wrap table{width: max-content; }
.s3 .table-wrap table thead tr th{height: 72px; background: #224688; }
.s3 .table-wrap table thead tr th:not(:last-child){border-right: 1px dashed #FFF;}
.s3 .table-wrap table thead tr th .box{position: relative; display: flex; width: 100%;	width: 100%; align-items:center; justify-content: center; flex-direction: column; gap:1px; }
.s3 .table-wrap table thead tr th .box p{color: #FFF;font-size: 18px;font-weight: 400;line-height: normal;letter-spacing: -0.36px;}
.s3 .table-wrap table thead tr th .box span{color: #B0CBFE;font-size: 14px;font-weight: 500;line-height: normal;letter-spacing: -0.28px;}
.s3 .table-wrap table tbody tr th{height: 40px; background: #F5F5F5; padding: 0 51px; color: #000;font-size: 16px;font-weight: 600;line-height: 24.1px; /* 150.625% */letter-spacing: -0.32px; text-align: left;}
.s3 .table-wrap table tbody tr td{height: 39px; color: #666;font-size: 16px;font-weight: 400;line-height: normal;letter-spacing: -0.32px; text-align: center;}
.s3 .table-wrap table tbody tr td .box{position: relative; display: flex; width: 100%; height: 100%; align-items:center; justify-content: center;	}
.s3 .table-wrap table tbody tr td:not(:last-child) .box:after{position: absolute; content: ''; width: 1px; height: 19px; background: rgba(205, 205, 205, 1); right: 0; top: 50%; margin-top: -9px;}
.s3 .table-wrap table tbody tr td .box.left{justify-content: start; padding-left: 50px;}
.s3 .table-wrap table tbody.cnt tr:first-child td{padding-top: 10px; height: 49px;}
.s3 .table-wrap table tbody.cnt tr:last-child td{padding-bottom: 10px; height: 49px;}
.s3 .table-wrap table tbody.cnt2 tr td{height: 60px;}
.s31{margin-top: -70px;}
.s3-arti2-flex{position: relative; z-index: 1;  padding-top: 80px; padding-bottom: 370px; margin-top: 150px;}
.s3-arti2-flex .sub-tit{margin: 0px; margin-bottom: 65px;}
.s3-arti2-flex:before{position: absolute; content: ''; width: 200%; height: 100%; background: #F9F9F9; left: -50%; top: 0; z-index: -1;}
.s3-arti2-flex ul{display: flex; flex-wrap:wrap; gap:33px; }
.s3-arti2-flex ul > li{border-radius: 10px; overflow: hidden; box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15);}
.s3-arti2-flex ul > li .tbx{display: flex; flex-direction: column; align-items:center; justify-content: center; height: 45px; background: #fff;}
.s3-arti2-flex ul > li .tbx p{color: #000;font-size: 16px;font-weight: 400;letter-spacing: -0.32px;}

.s41{margin-top: 157px;		}
.s41 .arti1{display: flex; flex-wrap:wrap; gap:32px;}
.s41 .arti1 .lbx{width: 40.5%;}
.s41 .arti1 .lbx ul{display: flex; flex-wrap:wrap; gap:30px 32px; margin-top: 38px;}
.s41 .arti1 .lbx ul > li{flex: 1 1 40%}
.s41 .arti1 .rbx{flex:1;}
.s41 .arti1 .rbx ul{display: flex; flex-wrap:wrap; gap:32px;}
.s41 .arti1 .rbx ul > li{flex:1 1 30%;}
.s41 .arti1 .rbx ul > li .tbx{margin-top: 11px; color: #333;font-size: 18px;font-weight: 400;line-height: normal;letter-spacing: -0.36px; text-align: center;}

/* s21 */
/* s21 */
.s21 .arti1{display:flex; gap:54px;}
.s21 .arti1 .lbx{max-width:459px; flex:1;}
.s21 .arti1 .lbx .slick-left{height:533px;}

/* LEFT 고정 */
.s21 .slick-left,
.s21 .slick-left .slick-slide{height:533px;}
.s21 .slick-left .item{height:100%; display:flex; flex-direction:column;}

.s21 .arti1 .lbx .slick-left span{display:flex; width:159px; height:53px;justify-content:center; align-items:center;border-radius:42px;background:#224688;color:#FFF;font-size:20px; font-weight:600;line-height:32.9px; letter-spacing:-0.4px;margin-bottom:29px;}
.s21 .arti1 .lbx .slick-left h4{color:#222; font-size:44px;font-weight:700; line-height:normal;margin-bottom:15px;}
.s21 .arti1 .lbx .slick-left p{color:#666; font-size:20px;font-weight:400; line-height:32.9px;letter-spacing:-0.4px;}
.s21 .arti1 .lbx .slick-left ul{display:flex; flex-direction:column;gap:15px; margin-top:54px;}
.s21 .arti1 .lbx .slick-left ul > li{position:relative;color:#666; font-size:20px;font-weight:400; line-height:32.9px;letter-spacing:-0.4px;padding-left:19px;}
.s21 .arti1 .lbx .slick-left ul > li:before{position:absolute; content:'';width:5px; height:5px;background:#224688;border-radius:50%;left:0; top:13px;}
.s21 .arti1 .lbx .controll{display:flex; align-items:center;margin-top:auto; gap:20px;}
.s21 .arti1 .lbx .controll > *{width:62px; height:62px;border-radius:50%;box-sizing:border-box;border:1px solid #333;display:flex;align-items:center;justify-content:center;cursor:pointer; transition:.3s;}
.s21 .arti1 .lbx .controll > *:hover{background: #333;}
.s21 .arti1 .lbx .controll > *:hover img{ filter:invert(2)}
.s21 .arti1 .rbx{position: relative; flex:1; display:flex;align-items:center;gap:0px;min-width:0; pointer-events: none; margin-top: -50px;}
.s21 .arti1 .rbx:before{position: absolute; content: ''; width: 150%; height: 100%; background: #3D73D8; left: 166px; top: 0;}

.s21 .arti1 .rbx .slick-thum{max-width:673px;flex:1;min-width:0; position: relative; z-index: 1;}
.s21 .slick-right-big figure{margin:0;}
.s21 .slick-right-big img{width:100%;height:auto;display:block;}
.s21 .arti1 .rbx .slick-list-box{width:400px; flex:0 0 auto; margin-left: 10px;}
.s21 .slick-right-list .slick-slide{padding:0 15px; box-sizing:border-box; }
.s21 .slick-right-list .slick-slide .item{opacity: 0;width:100%;height:322px;transition:.3s; }
.s21 .slick-right-list .slick-slide.on .item{opacity: 1;}
.s21 .slick-right-list .slick-slide img{width:100%;height:100%;display:block;object-fit:cover;}
.s21 .arti1 .rbx .slick-list-box .slick-list{overflow: visible;}



.m-con{display: none;}