@charset "utf-8";

.sub-visual{position: relative; text-align: center;  height: 680px;}
.sub-visual > img{width: 100%; height: 100%; object-fit:cover; }
.sub-visual > p{position: absolute; left: 0; top: 0; width: 100%; height: 100%; align-content:center; z-index: 10; font-family: 'GmarketSansMedium'; font-size: 65px; line-height: 1.5; letter-spacing: -0.02em; color: #fff; font-weight: 500; padding-top: 16px; box-sizing: border-box;}
.lnb-wrap{position: relative; margin-top: -80px; z-index: 15; background: rgba(62,6,148,0.8); margin-bottom: 162px;}
.lnb > ul{display: flex; flex-wrap:wrap; }
.lnb > ul > li{flex:1; text-align: center; }
.lnb > ul > li > a{position: relative; height: 80px; font-size: 18px; line-height: 1.5; letter-spacing: -0.03em; color: #fff; align-content:center; z-index: 15; overflow: hidden; transition:.3s;}
/* .lnb > ul > li > a:before{position: absolute; content: ''; width: calc(100% + 2px); height: 100%; background: #080808;	left: -1px; bottom: 0; translate:0 100%; transition:.3s; z-index: -1; border-radius: 20px 20px 0 0;}
 */
.lnb > ul > li > a:before{position: absolute; content: ''; width: calc(100% + 2px); height: 100%; background: #fff;	left: -1px; bottom: 0; translate:0 100%; transition:.3s; z-index: -1; border-radius: 20px 20px 0 0;}
.lnb > ul > li:hover > a,
.lnb > ul > li.current > a{color: #3e0694; font-weight: 600;}

.lnb > ul > li:not(:last-child) > a:after{position: absolute; content: ''; width: 1px; height: 18px; background: rgba(255,255,255,0.3); right: 0; top: 50%; margin-top: -9px; transition:.3s; z-index: -2;}
.lnb > ul > li:is(:hover, .current) > a:before { translate: 0 0%; }
.lnb .dep3{display: none;}

/* sub-common */
#sub{background: #080808;}
.dot-h3{position: relative; font-size: 55px; line-height: 1.5; letter-spacing: -0.02em; color: #fff; font-weight: 600; padding-top: 11px; text-align: center;}
.s5_1 .dot-h3{font-size: 30px; line-height: 1.5;}
.dot-h3:before{position: absolute; content: ''; width: 8px; height: 8px; background: #fff; border-radius: 50%; left: 50%; top: 0; margin-left: -4px;}
.sub-line{position: relative; display: inline-block; font-family: 'Jeju Myeongjo'; font-size: 50px; line-height: 1.5; letter-spacing: -0.02em; color: #fff; text-align: center; z-index: 10; }
.sub-line span{margin-left: -17px;}
.sub-line:before{position: absolute; content: ''; width: 0%; height: 38px; background: rgba(62,6,148,0.6); left: 0; bottom: 0; z-index: -1;	 transition:1.2s 1.2s;}
.sub-line.on:before{width: 100%;}

/* s11 */
.s2_1.s1_1 h4{color: #000000;}
.s2_1.s1_1 .dot-h3{ color: #000;}
.s2_1.s1_1 .dot-h3 tex{font-size: 35px; margin-bottom: -50px; display: block; margin-top: 20px; font-weight: 400;}
.s2_1.s1_1 .dot-h3:before{background: #3e0694;}
.s2_1.s1_1 .arti1 .sub-line{color: #3e0694;}
.s2_1.s1_1 .arti1 .sub-line:before{background: rgba(62,6,148,0.07);}
.s2_1.s1_1 .arti1 .p-box > p{color: #666;}
.s2_1.s1_1 .arti1 .p-box > p b{color: #000; font-weight: 700;}
.s2_1.s1_1 .arti1 .p-box > p b.b2{font-weight: 600;}


.s1_1 .arti2-wrap{background: #f6f6f6; padding: 168px 0;}
.s1_1 .arti2 {text-align: center;}
.s1_1 .arti2 h5{font-size: 40px; line-height: 58px; letter-spacing: -0.02em;  color: #000; font-weight: 400;	}
.s1_1 .arti2 h5 b{font-weight: 600;}
.s1_1 .arti2 .fig-box{display: flex; align-items:center; justify-content: space-between; margin: 80px 0 ;}
.s1_1 .arti2 .fig-box .arr{margin-right: auto; position: relative; top: 3px;}
.s1_1 .arti2 p{font-size: 32px; line-height: 46px; letter-spacing: -0.02em; color: #320576; }
.s1_1 .arti2 p b{font-weight: 600;}
.s1_1 .arti3{margin-top: 180px;}
.s1_1 .arti3 .s11-tab{display: flex; flex-wrap:wrap; gap:16px;}
.s1_1 .arti3 .s11-tab figure{background: #ede8f1;border-radius: 15px 15px 0 0;}
.s1_1 .arti3 .s11-tab .tbx{position: relative; box-sizing: border-box; background: #f6f6f6; transition:.3s; height: 210px; align-content:center;  padding: 0 50px; border-radius: 0 0 15px 15px; padding-bottom: 14px;}
.s1_1 .arti3 .s11-tab .tbx .tit{position: relative; font-size: 36px; line-height: 1.5; letter-spacing: -0.02em; color: #000; font-weight: 600; margin-bottom: 11px; transition:.3s;}
.s1_1 .arti3 .s11-tab .tbx .txt{font-size: 23px; line-height: 1.5; letter-spacing: -0.02em ;color: #3e0694; font-weight: 500; transition:.3s;}
.s1_1 .arti3 .s11-tab .tbx .tit .btn{position: absolute; display: block;  right: 10px; top: 22px; width: 22px; height: 22px;}
.s1_1 .arti3 .s11-tab .tbx .tit .btn:before,
.s1_1 .arti3 .s11-tab .tbx .tit .btn:after{position: absolute; content: ''; width: 22px; height: 2px; background: #3e0694; left: 0; top: 0; transition:.3s;}
.s1_1 .arti3 .s11-tab .tbx .tit .btn:after{rotate:90deg;}

.s1_1 .arti3 .s11-tab > li:is(:hover, .on) {
	.tbx { background: #3e0694; }
	.tbx .tit { color: #fff; }
	.tbx .txt { color: rgba(255,255,255,0.7); }
	.tbx .tit .btn:before,
	.tbx .tit .btn:after { background: #fff; }
	.tbx .tit .btn:after { opacity: 0; rotate: 0deg; }
}

.s11-cnt-wrap {border-top: 2px solid #3e0694; margin-top: 26px;	}
.s11-cnt-wrap .box{display: none;}
.s11-cnt-wrap .box.on{display: block;}
.s11-cnt-wrap .box{background: #f6f6f6; padding: 0 54px; border-radius: 0 0 15px 15px; padding-bottom: 20px;}
.s11-cnt-wrap .box dl{display: flex; flex-wrap:wrap; padding: 50px 0; box-sizing: border-box; border-bottom: 1px solid #ddd;}   
.s11-cnt-wrap .box dl dt{width: 223px; font-size: 28px; line-height: 1.5; letter-spacing: -0.02em; color: #000; font-weight: 600;  box-sizing: border-box;}
.s11-cnt-wrap .box dl dd{position: relative; flex:1; box-sizing: border-box; padding-left: 61px;}
.s11-cnt-wrap .box dl dd:before{position: absolute; content: ''; width: 1px; height: calc(100% - 18px); background: #ddd; left: 0; top: 8px;}
.s11-cnt-wrap .box dl dd ul > li{font-size: 18px; line-height: 34px; letter-spacing: -0.02em; color: #666;}
.s11-cnt-wrap .box dl:not(:first-of-type){padding-top: 40px;	}
.s11-cnt-wrap .box dl:last-child{border-bottom: 0;}

/* s12 */
.s1_2,
.s4_1{margin-bottom: 135px;}
.s1_2 .dot-h3,
.s4_1 .dot-h3,
.s5_1 .dot-h3,
.bd-top-box .dot-h3{color: #000;}
.s1_2 .dot-h3:before,
.s4_1 .dot-h3:before,
.s5_1 .dot-h3:before,
.bd-top-box .dot-h3:before{background: #3e0694;}
.bd-top-box p{text-align: center; font-size: 18px; line-height: 28px; letter-spacing: -0.02em; color: #666; visibility: 400; margin-top: 18px; margin-bottom: 60px;}
.bd-top-box p b{color: #3e0694; font-weight: 400;}

.s5_1{margin-bottom: 62px;}

.s12-tab > ul{display: flex; gap:10px; margin-bottom: 80px; margin-top: 61px;}
.s12-tab > ul > li{height: 60px; box-sizing: border-box; border: 1px solid #ddd; border-radius: 10px; font-size: 16px; line-height: 1.5; letter-spacing: -0.02em;	color: #666; transition:.3s; flex:1; }
.s12-tab > ul > li > a{display: block; height: 100%; align-content:center; text-align: center; }
.s12-tab > ul > li:is(:hover, .current){background: #3e0694;color: #fff; font-weight: 600;}
.s1_2  .arti1 .top-box{display: flex; flex-wrap:wrap; border-radius: 15px; overflow: hidden;} 
.s1_2  .arti1 .top-box > *{box-sizing: border-box; width: 50%;}
.s1_2  .arti1 .top-box > .lbx{}
.s1_2  .arti1 .top-box > .rbx{background: #f6f6f6; padding: 54px 60px; padding-right: 20px; padding-bottom: 0;}
.s1_2  .arti1 .top-box > .rbx .box{position: relative; padding-bottom: 30px; margin-bottom: 26px; }
.s1_2  .arti1 .top-box > .rbx .box:after{position: absolute; content: ''; width: 100%; height: 1px; background: url(../img/sub/s12-dashed.png) left center; left: 0; bottom:0px; ;}
.s1_2  .arti1 .top-box > .rbx .box:last-of-type{margin-bottom: 0; padding-bottom: 0;}
.s1_2  .arti1 .top-box > .rbx .box:last-of-type:after{display: none;}
.s1_2  .arti1 .top-box > .rbx .box b{display: block; font-size: 24px; line-height: 1.5; letter-spacing: -0.02em; color: #000; font-weight: 600; margin-bottom: 19px; margin-left: -2px;}
.s1_2  .arti1 .top-box > .rbx .box p{font-size: 16px; line-height: 23px; letter-spacing: -0.02em; color: #666; margin-bottom: 23px; font-weight: 400;}
.s1_2  .arti1 .top-box > .rbx .box p:last-of-type{margin-bottom: 0;}
.s1_2  .arti1 .top-box > .rbx .box > span{display: block; font-size: 16px; line-height: 23px; letter-spacing: -0.02em; color: #999; margin-top: 26px;}
.s1_2  .arti1 .top-slide{margin-top: 40px;}
.s1_2  .arti1 .top-slide .owl-nav > *{position: absolute; left: -35px; top: 50%; margin-top: -35px; width: 70px; height: 70px;  background: rgba(241,237,247,0.9) url(../img/sub/s12-prev.png) center no-repeat !important; border-radius: 50%; transition:.3s; box-shadow:0px 0px 10px rgba(146,146,146,0.1)} 
.s1_2  .arti1 .top-slide .owl-nav > * span{display: none;}
.s1_2  .arti1 .top-slide .owl-nav > .owl-next{left: auto; right: -35px; background: rgba(241,237,247,0.9) url(../img/sub/s12-next.png) center no-repeat !important;}
.s1_2  .arti1 .top-slide .owl-nav > *:hover{background-color: rgba(241,237,247,1) !important; }
.s1_2  .arti2{margin-top: 165px;}
.s1_2  .arti2 .box:not(:last-child) {margin-bottom: 120px;}
.s1_2  .arti2 .box h4{text-align: center; font-size: 50px; line-height: 1.5; letter-spacing: -0.02em; color: #000; font-weight: 600;	margin-bottom: 10px;}
.s1_2  .arti2 .box .link-box > a{display: flex; align-items:center; justify-content: flex-end; font-size: 18px; line-height: 1; letter-spacing: -0.02em ;color: #000; font-weight: 600; gap:5px;}
.s1_2  .arti2 .box .link-box > a i{line-height: 0; transition:.3s;}
.s1_2  .arti2 .box .link-box > a:hover i{translate:5px 0}










/* s13 */
.s1_3{margin-bottom: 170px;}
.s1_3 .arti1 iframe{width: 100%; height: 460px; border-radius: 20px; overflow: hidden; margin-top: 60px;}
.s1_3 .dot-h3{color: #000;}
.s1_3 .dot-h3:before{background: #3e0694;}
.s1_3 .tbx{display: flex; flex-wrap:wrap; justify-content: space-between; margin-top: 50px;}
.s1_3 .tbx ul > li {display: flex; flex-wrap:wrap; font-size: 18px; line-height: 36px; letter-spacing: -0.02em; color: #666;}
.s1_3 .tbx ul > li span{font-weight: 600; color: #111; width: 70px; text-align: center;}
.s1_3 .tbx ul > li p{width: calc(100% - 70px);}
.s1_3 .tbx ol{display: flex; flex-wrap:wrap; gap:10px; margin-top: 9px;}
.s1_3 .tbx ol > li > a{display: flex; justify-content: center; align-items:center; gap:40px; width: 160px; height: 55px; border-radius: 10px; font-size: 18px; line-height: 1.5; color: #fff; letter-spacing: -0.03em; background: #3e0694; padding-left: 3px; box-sizing: border-box;}
.s1_3 .tbx ol > li > a i{line-height: 0; transition:.3s;}
.s1_3 .tbx ol > li:nth-child(2) > a{background: #171920;}
.s1_3 .tbx ol > li > a:hover i{translate:5px 0}

/* s21 */
.s2_1 h4{font-size: 50px; line-height: 1.5; letter-spacing: -0.02em; color: #f6f6f6; font-weight: 600; text-align: center;}
.s2_1 .arti1{text-align: center; padding-bottom: 164px;}
.s2_1 .arti1 .sub-line{margin: 52px 0 82px;}
.s2_1 .arti1 .p-box > p{font-size: 23px; line-height: 38px; letter-spacing: -0.02em; color: rgba(255,255,255,0.7); margin-bottom: 38px;}
.s2_1 .arti1 .p-box > p:last-of-type{margin-bottom: 0;}
.s2_1 .arti1 > b{display: block; font-size: 28px; line-height: 42px; letter-spacing: -0.02em; color: #fff; font-weight: 500; margin-top: 52px;}
.s2_1 .arti1 > ul{display: flex; flex-wrap:wrap; gap:16px; margin-top: 170px;}
.s2_1 .arti1 > ul > li{flex:1; background: #f6f6f6; border-radius: 15px; height: 376px; border: 1px solid #f6f6f6; transition:.3s;	padding: 52px 15px;	}
.s2_1 .arti1 > ul > li:hover{border: 1px solid #3e0694; background: #fff;}
.s2_1 .arti1 > ul > li i{display: inline-block; width: 36px; height: 36px; background: #3e0694; border-radius: 50%; align-content:center; text-align: center; line-height: 0; margin-bottom: 8px;}
.s2_1 .arti1 > ul > li figure{height: 53px; align-content:center; line-height: 0; margin: 20px auto 35px;}
.s2_1 .arti1 > ul > li p{font-size: 16px; line-height: 1.5; letter-spacing: -0.02em; color: #666; margin-bottom: 6px;}
.s2_1 .arti1 > ul > li p span{font-family: 'SUIT Variable', sans-serif;  font-weight: 500; margin-left: 2px;}
.s2_1 .arti1 > ul > li b{display: block; font-size: 26px; line-height: 38px; letter-spacing: -0.02em; color: #000; font-weight: 600;}
.s2_1 .arti1 > ul > li b span{color: #3e0694;}
.s2_1 .arti2 {padding-bottom: 158px;}
.s2_1 .arti2 > ul{display: flex; flex-wrap:wrap; margin-top: 54px; justify-content: space-between; gap:75px 0}
.s2_1 .arti2 > ul > li{width: 47.65%; position: relative; box-sizing: border-box; padding-left: 38px; overflow: hidden;}
.s2_1 .arti2 > ul > li .right-p{position: absolute; left: 0; top: 155px; rotate:-90deg; font-family: 'SUIT Variable', sans-serif; font-size: 32px; line-height: 1; letter-spacing: -0.02em; color: #3e0694; font-weight: 400;	 white-space: nowrap; width: 340px; margin-left: -158px; text-align: right; color: #fff;}
.s2_1 .arti2 > ul > li .tbx{padding: 30px 10px 0 10px;}
.s2_1 .arti2 > ul > li .tbx p{font-size: 28px; line-height: 1.5; letter-spacing: -0.02em; color: #fff; font-weight: 600; margin-bottom: 6px;}
.s2_1 .arti2 > ul > li .tbx ol > li{position: relative; font-size: 18px; line-height: 28px; letter-spacing: -0.02em; color: rgba(255,255,255,0.6); padding-left: 14px; ;}
.s2_1 .arti2 > ul > li .tbx ol > li:before{position: absolute; content: ''; width: 4px; height: 4px; background: rgba(255,255,255,0.6); left: 0; top: 12px;}
.s2_1 .arti3 {padding-bottom: 185px;}
.s2_1 .arti3 .main-dl-box{margin-top: 54px; padding-bottom: 17px;}


/* s22 */
.s2_2 h4{color: #000000;}
.s2_2 .dot-h3{ color: #000;}
.s2_2 .dot-h3:before{background: #0b8dc8;}
.s2_2 .arti1 .sub-line{color: #000;}
.s2_2 .arti1 .sub-line:before{background: rgba(11,141,200,0.1);}
.s2_2 .arti1 .p-box > p{color: #666;}
.s2_2 .arti1 > b{color: #000;}
.s2_2 .arti1 > ul > li:hover{border: 1px solid #0b8dc8; }
.s2_2 .arti1 > ul > li i{background:#0b8dc8}
.s2_2 .arti1 > ul > li b span{color: #0b8dc8;}

/* s22 */
.s2_3 h4{color: #000000;}
.s2_3 .dot-h3{ color: #000;}
.s2_3 .dot-h3:before{background: #f0ba37;}
.s2_3 .arti1 .sub-line{color: #000;}
.s2_3 .arti1 .sub-line:before{background: rgba(240,186,55,0.1);}
.s2_3 .arti1 .p-box > p{color: #666;}
.s2_3 .arti1 > b{color: #000;}
.s2_3 .arti1 > ul > li:hover{border: 1px solid #f0ba37; }
.s2_3 .arti1 > ul > li i{background:#f0ba37}
.s2_3 .arti1 > ul > li b span{color: #f0ba37;}
.s2_3 .arti2 > ul > li .right-p{color: #f0ba37;}
.s2_3 .arti2 > ul > li .tbx p{color: #000;}
.s2_3 .arti2 > ul > li .tbx ol > li{color: rgba(102,102,102,0.6);}
.s2_3 .arti2 > ul > li .tbx ol > li:before{background:rgba(102,102,102,0.6);;}




/* 캘린더 */
.calendar {padding-bottom: 150px;}
.calendar .calendar-wrap .calendar-title {display: flex; margin-bottom: 40px; align-items: center; justify-content: center;}
.calendar .calendar-wrap .calendar-title a {display:flex; justify-content:center; align-items:center; width: 30px; height: 30px; border: 1px solid #ddd; border-radius: 50%; text-align: center;}
.calendar .calendar-wrap .calendar-title h4 {font-size: 40px; color: #111; padding: 0 15px;}
.calendar .calendar-wrap .calendar-title h4 span {display: inline-block; font-size: 40px; color: #111;}
.calendar .calendar-wrap table {border-spacing:3px; border-collapse:separate; width: 100%; table-layout: fixed;}
.calendar .calendar-wrap tr th {border-radius:5px; background: #f5f5f5; font-size: 20px; color: #333; line-height: 50px;}
.calendar .calendar-wrap tr td {height: 150px; border: 1px solid #ddd; border-radius:5px; vertical-align: top; font-size: 18px; color: #666; padding: 15px;}
.calendar .calendar-wrap tr td p {text-align: right; padding: 0 5px;}
.calendar .calendar-wrap tr td .date-sat {color: #0100ff;}
.calendar .calendar-wrap tr td .date-sun {color: #ff0000;}
.calendar .calendar-wrap tr td ul {padding-top: 10px;}
.calendar .calendar-wrap tr td ul li a{position: relative; display: block; padding-left: 10px; text-align: left; font-size: 15px; line-height: 22px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.calendar .calendar-wrap tr td ul li a:before {position: absolute; content:'-'; width: 10px; height: 1px; left: 0; top: 0;}
.calendar .calendar-wrap tr .sun {background: #ff8518; color: #fff;}
.calendar .calendar-wrap tr .sat {background: #00b58c; color: #fff;}  
@media(max-width: 1024px) {
	.calendar .calendar-wrap tr td {height: 120px; padding: 5px;}
}
@media(max-width: 640px) {
	.calendar {padding-bottom: 80px;}
	.calendar .calendar-wrap tr th {font-size: 18px;}
	.calendar .calendar-wrap tr td {font-size: 16px; height: 80px;}
	.calendar .calendar-wrap .calendar-title h4 span {font-size: 30px;}
	.calendar .calendar-wrap tr td ul li a {font-size: 12px;}

}


.grid {margin:-27px;}
.grid-item {width:25%; float:left; padding:27px;}
.grid-item .inner {background:#ddd; width:100%; height:100%;}


.menu {height:100vh; max-width:1400px; width:100%; margin:0 auto; position:relative; padding-right:60px; z-index:1;}
.menu .menu-open {position:absolute; width:40px; height:40px; background:#f0c; position:absolute; top:0; right:0; border-radius:50%; z-index:3;}
.menu ul {display:flex; margin:0 -10px -20px; transition:all 0.6s;}
.menu ul li {padding:0 10px; width:auto; margin-bottom:20px;}
.menu ul li a {display:inline-block; padding:0 20px; line-height:40px; background:#999; color:#111; border-radius:20px;}



/* sub 06 07 history 서우인 */
.history .real-cont {padding-bottom:0;}
.history .img-box {margin-bottom:96px;}
.history .col {display:flex; position:relative; padding-bottom:300px;}
.history .col:after {content:''; width:1px; height:100%; background:#ddd; position:absolute; top:0; left:660px;}
.history .year {width:100%; max-width:660px; padding:0 70px; position:relative; text-align:right;}
.history .year .tit {position:sticky; top:100px; right:0; display:inline-block;}
.history .year.active .tit {z-index:1;}
.history .year p {font-size:40px; line-height:1.2em; color:#000; font-weight:700; margin-bottom:24px;}
.history .year h4 {font-size:100px; line-height:1.1em; color:#518bd3; text-align:left;}
.history .wrap {width:1%; flex:1 1 auto; padding-left:50px;}
.history .txt-box {margin-bottom:140px;}
.history .txt-box .m-year {display:none;}
.history .txt-box .txt {display:flex; margin-bottom:6px;}
.history .txt-box .txt .month {width:100%; max-width:50px; font-size:18px; line-height:1.8em; color:#000; font-weight:700;}
.history .txt-box .txt p {width:1%; flex:1 1 auto; font-size:18px; line-height:1.8em; color:#666;}