@charset "utf-8";

#sub_layout{margin-top: 149px;}
#sub_layout .sub-visual{position: relative; height: 440px;}
#sub_layout .sub-visual > img{width: 100%; height: 100%; object-fit:cover; }
#sub_layout .sub-visual .sv-tit{position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box; padding: 0 20px; text-align: center; color: #fff; align-content:center}
#sub_layout .sub-visual .sv-tit h2{  font-size: 65px; line-height: 1; letter-spacing: -0.01em; font-weight: 700; margin-bottom: 30px;}
#sub_layout .sub-visual .sv-tit p{  font-size: 20px; line-height: 1.5; letter-spacing: -0.01em; font-weight: 500;}

.sprd{display: flex; flex-wrap:wrap; align-items:center; margin-top: 70px; margin-bottom: 150px;}
.sprd > li img{line-height: 0; }
.sprd > li {  font-size: 24px; line-height: 1; letter-spacing: -0.025em; color: #000; font-weight: 500;}
.sprd > li.home{margin-right: 24px; align-content:center;}
.sprd > li:last-child:before{display: inline-block; font-size: 6px; content: ' '; width: 5px; height: 5px; border-radius: 50%; background: #000; vertical-align: middle; margin: 0 23px;}
.sprd > li:last-child{color: #fb7001;} 


.s10 .arti1 ul{display: flex; }
.s10 .arti1 ul > li figure{overflow: hidden; }
.s10 .arti1 ul > li figure img{transition:.3s;  }
.s10 .arti1 ul > li:hover figure img{mask-image: url('../img/sub/test-img-srs.png') ;}


/* s11 */
.s11 .arti1{display: flex; flex-wrap:wrap; justify-content: space-between; padding-top: 14px; padding-bottom: 228px;  }
.s11 .arti1 .lbx h3{font-size: 42px; line-height: 1.5; letter-spacing: -0.02em; color: #000; font-weight: 600;}
.s11 .arti1 .lbx h3 span{color: #fb7001;}
.s11 .arti1 .lbx h4{font-size: 32px; line-height: 48px; letter-spacing: -0.02em; color: #000; font-weight: 600; margin: 7px 0 33px;}
.s11 .arti1 .lbx p{font-size: 18px; line-height: 30px; letter-spacing: -0.02em; color: #676767; margin-bottom: 30px; }
.s11 .arti1 .lbx p span{font-weight: 600;}
.s11 .arti1 .lbx p:last-of-type{margin-bottom: 0;}
.s11 .arti1 .rbx{margin-top: -20px;}
.s11 .arti1 .rbx .figline{position: relative; }
.s11 .arti1 .rbx figure{position: relative; z-index: 10;}
.s11 .arti1 .rbx figure:after{position: absolute; content: '';	 width: 100%; height: 100%; background: url(../img/sub/s11-1.png) center no-repeat; left: 0; top: 0; animation: 14s ease 0s infinite linear none running; animation-name:rolling; } 
@keyframes rolling {0% {rotate:0;} 100% {rotate:360deg;} }
.s11 .arti1 .rbx .figline figcaption{position: absolute; left: -80px; bottom: 71px; z-index: 10;}

/* s12 */
.s12{margin-bottom: 274px;}
.s12 .arti1 {position: relative; }
.s12 .arti1 .year-wrap{position: sticky; left: 0px; top: 30%; 	width: 329px; overflow: hidden; margin-left: 3px;}
.s12 .arti1 .year{display: flex; width: max-content; gap:10px; transition:.6s;}
.s12 .arti1 .year .year-box{width: 329px; transition:.6s;}
.s12 .arti1 .year.active1{translate:0px 0 }
.s12 .arti1 .year.active2{translate:-339px 0 }
.s12 .arti1 .year.active3{translate:-680px 0 }
.s12 .arti1 .year .year-box .year-tit{font-size: 65px; line-height: 1; letter-spacing: -0.01em; color: #000; font-weight: 700; margin-bottom: 39px; }
.s12 .arti1 .year .year-box .year-tit span{font-size: 50px;}
.s12 .arti1 .year .year-box .year-txt {	font-size: 15px; line-height: 1.5; letter-spacing: -0.025em; color: #676767; margin-top: 8px; padding-left: 5px;}
.s12 .arti1 .his-wrap{position: relative; padding-left: 461px; margin-top: -335px;}
.s12 .arti1 .his-wrap .line-box{position: absolute;  width: 29px; height: 90%;  top: 56px;	margin-left: 9px; }
.s12 .arti1 .his-wrap .line-box:after{position: absolute; content: ''; width: 1px; height: 100%; background: #b5b5b5; left: 0; top: 0;}
.s12 .arti1 .his-wrap .line-box .line{position: absolute; width: 1px; height: 0px; background: #fb7001; top: 0px; z-index: 10; }
.s12 .arti1 .his-wrap .line-box .line-dot{position: sticky; width: 29px; height: 33px; margin-left: -14px;  top: 50%; z-index: 10;}
.s12 .arti1 .his-wrap .box{ padding-left: 107px; padding-bottom: 95px;}
.s12 .arti1 .his-wrap .box dl{display: flex; flex-wrap:wrap; align-items:flex-start; padding-bottom: 35px;}
.s12 .arti1 .his-wrap .box dl dt{font-size: 28px; font-weight: 700; letter-spacing: -0.01em; color: #000; width: 95px; display: flex; align-items:center; justify-content: space-between; line-height: 40px;}
.s12 .arti1 .his-wrap .box dl dt span{font-size: 5px; }
.s12 .arti1 .his-wrap .box dl dd{flex:1; padding-left: 29px;}
.s12 .arti1 .his-wrap .box dl dd ul > li{display: flex; flex-wrap:wrap; font-size: 20px; line-height: 40px; color: #676767; letter-spacing: -0.025em;}
.s12 .arti1 .his-wrap .box dl dd ul > li span{font-weight: 700; 	width: 57px;}
.s12 .arti1 .his-wrap .box dl dd ul > li p{width: calc(100% - 57px);}

.s12 .arti1 .his-wrap .box .box-year{margin-bottom: 30px; display: none;} 
.s12 .arti1 .his-wrap .box .box-year .box-year-tit{font-size: 65px;line-height: 1;letter-spacing: -0.01em;color: #000;font-weight: 700;margin-bottom: 20px;}
.s12 .arti1 .his-wrap .box .box-year .year-txt{ font-size: 15px; line-height: 1.5; letter-spacing: -0.025em; color: #676767; margin-top: 8px;}




/* s13 */
.s13{background: url(../img/sub/s13-bg.jpg) center bottom no-repeat; text-align: center; padding-bottom: 230px;}

/* s14 */
.s14{margin-bottom: 220px;}
.s14-tab{display: flex; flex-wrap:wrap; background: #fafafa; border-radius: 10px; margin-bottom: 80px;}
.s14-tab > li{flex:1; height: 70px; border-radius: 10px; align-content:center; text-align: center; font-size: 20px; line-height: 1.5; letter-spacing: -0.025em; color: #676767; transition:.3s; cursor: pointer;}
.s14-tab > li:is(.on, :hover){background: #3a836c; color: #fff; font-weight: 600;}
.s14 .root_daum_roughmap{width: 100%;  border-radius: 10px;}
.s14 .root_daum_roughmap .wrap_controllers{display: none;}
.s14 .root_daum_roughmap .cont{display: none;}
.s14 .root_daum_roughmap .wrap_map{height: 500px !important;}
.s14 iframe{width: 100%; height: 500px; border-radius: 10px;}
.s14 .tbx{display: flex; flex-wrap:wrap; justify-content: space-between; margin-top: 50px;}
.s14 .tbx ul > li{display: flex; flex-wrap:wrap; font-size: 18px; line-height: 34px; letter-spacing: -0.02em; color: #676767; }
.s14 .tbx ul > li span{font-weight: 600; color: #000; width: 71px;}
.s14 .tbx ul > li p{flex:1; }
.s14 .tbx ol{display: flex; gap:10px; margin-top: 10px;}
.s14 .tbx ol > li > a{width: 210px; height: 70px; font-family: "Wanted Sans"; font-size: 20px; line-height: 1.5; letter-spacing: -0.02em; color: #fff; font-weight: 500; display: flex; justify-content: space-between; padding: 0 29px; box-sizing: border-box; align-items:center; background: #fd8104; transition:.3s; border-radius: 10px;	}
.s14 .tbx ol > li > a i{line-height: 0;}
.s14 .tbx ol > li:last-child > a{background: #666;}
.s14 .tbx ol > li > a:hover{background: #000;}
.s14 .arti2 .box{display: none;}
.s14 .arti2 .box1{display: block;}

/* s2 */
.s2 {margin-bottom: 230px;}
.s2 .arti1{margin-top: -10px;}
.s2 dl{display: flex; flex-wrap:wrap; margin-bottom: 70px;}
.s2 dl.mb32{margin-bottom: 32px;}
.s2 dl.mb60{margin-bottom: 60px;}
.s2 dl dt{position: relative;  padding-right: 49px; font-size: 42px; line-height: 56px; letter-spacing: -0.02em; color: #000; font-weight: 600; padding-left: 25px;}
.s2 dl dt:before{position: absolute; content: ''; width: 6px; height: 6px; background: #000; left: 1px; top: 25px;} 
.s2 dl dd{position: relative; flex:1; padding-left: 57px; margin-top: -2px;}
.s2 dl dd:before{position: absolute; content: ''; width: 6px; height: calc(100% - 20px); background: #fb5d00; left: 0; top: 10px;}
.s2 dl dd p{font-size: 20px; line-height: 40px; letter-spacing: -0.02em; color: #000; font-weight: 500;}
.s2 dl dd.align-center{align-self:center; margin-top: 0;}
.s2 dl dd.align-center:before{height: calc(100% - 4px); top: 4px;}
.s2 .s2-figure{min-height:440px; box-sizing: border-box; border: 1px solid #ddd; border-radius: 10px; align-content:center; text-align: center; overflow: hidden;}
.s2 .s2-figure.h494{min-height:494px;}
.s2 .pl80{padding-left: 160px;}
.s2 .p79{padding: 79px 10px;}
.s2 .mt40{margin-top: 40px;}
.s2 article{margin-bottom: 110px;}
.s2 article:last-child{margin-bottom: 0;}
.s2 h4{font-size: 34px; line-height: 1.5; letter-spacing: -0.01em; color: #000; font-weight: 700; margin-bottom: 13px;}
.s2 ul.dot{margin-bottom: 33px;}
.s2 ul.dot > li{display: flex; flex-wrap:wrap; font-size: 20px; line-height: 30px; letter-spacing: -0.02em; color: #000; }
.s2 ul.dot > li span{width: 9px;}
.s2 ul.dot > li p{width: calc(100% - 9px);}
.s2 .flex-box{display: flex; flex-wrap:wrap; }
.s2 .flex-box.col3{gap:28px 30px; margin-top: 17px;}
.s2 .flex-box.col3 > li{width: calc((100% / 3) - 20px); text-align: center; }
.s2 .flex-box.col3 > li figcaption{font-size: 20px; line-height: 40px; letter-spacing: -0.04em; color: #000; font-weight: 600;	padding: 18px 10px 0;}
.s2 .down-p{display: flex; align-items:center; gap:20px; margin-top: 13px; margin-left: 10px;}
.s2 .down-p a{display: flex; gap:11px; justify-content: space-between; background: #666; font-size: 16px; line-height: 1; letter-spacing: -0.02em; color: #fff; align-items:center; border-radius: 5px;	height: 35px; padding: 0 23px; transition:.3s;}
.s2 .down-p a:hover{background: #000;}
.s2 .down-p span{flex:1;  font-size: 18px; line-height: 1.5; letter-spacing: -0.02em; color: #676767; }
.map-figure {position: relative; margin: 0 -40px;	}
.map-figure .tbx{position: absolute; /* right: 5.9vw; top: 13.8vw;  */      right: 352px; top: 400px;z-index: 10;}
.map-figure .tbx p{font-size: 22px; line-height: 1; letter-spacing: -0.02em; color: #fb7001; font-weight: 700; display: inline-block; margin-left: 23px; position: relative; top: 3px;}
.map-figure  .hover-btn {position: relative;display: inline-block;width: 6px;height: 6px;border-radius: 50%;background-color: #fb7001;font-size: 1.125em;text-align: center;line-height: 25px;color: #fff;font-weight: 700;cursor: pointer;transition: 0.3s;}
.map-figure  .hover-btn:before, 
.map-figure  .hover-btn:after {
	 content: '';
	 position: absolute;
	 z-index: -1;
	 top: -16px;
	 left: -16px;
	 opacity: 0;
	 margin: 0;
	 width: 38px;
	 height: 38px;
	 border-radius: 50%;
	background-color: rgba(251,112,1,0.3);
	-webkit-animation: ball-scale 1s 0s linear infinite;
	animation: ball-scale 1s 0s linear infinite;
}

.map-figure  .hover-btn:after {
	background-color: rgba(251,112,1,0.3);
	-webkit-animation: ball-scale 2s -1s linear infinite;
	animation: ball-scale 2s -1s linear infinite;
}

@keyframes ball-scale {
	0% {-webkit-transform:scale(0.33);transform:scale(0.33);opacity: 0.5; }
	5% {opacity: 1; }
	100% {-webkit-transform: scale(1);transform: scale(1);opacity: 0; }  
}

@-webkit-keyframes ball-scale {
	0% {-webkit-transform:scale(0.33);transform:scale(0.33);opacity: 0.3; }
	5% {opacity: 0.8; }
	100% {-webkit-transform:scale(1);transform:scale(1);opacity: 0; }  
}


/* s24 */
.s24 {margin-bottom: 0;}
.s24 .arti2{margin: 0 -15px; margin-top: -70px;}
.s24 .arti2 ul{display: flex; flex-wrap:wrap; gap:29px 30px; margin-left: -20px; }
.s24 .arti2 ul > li{width: calc(25% - 23px); height: 100px; background: #fff; border-radius: 10px; box-shadow:0px 0px 10px rgba(0,0,0,0.1); align-content:center; text-align: center; line-height: 0;}

.s24 .arti3 {position: relative; padding: 110px 0 220px;}
.s24 .arti3:before {z-index: -1; position: absolute; top: 0; right: 0; content: ''; width: calc(100% - 410px); height: 100%; background: #fafafa;}
.s24 .arti3 .container {display: grid; grid-template-columns: 320px 1fr; column-gap: 100px; max-width: 1450px; width: 100%; padding: 0 15px; margin: 0 auto;}
.s24 .arti3 .tab-menu {position: sticky; top: 160px; left: 0; width: 320px;}
.s24 .arti3 .tab-menu li {margin-bottom: 30px; transition: all 0.5s;}
.s24 .arti3 .tab-menu li a {position: relative; width: 320px; border-radius: 8px; box-shadow: 0px 0px 18.04px 3.96px rgba(0, 0, 0, 0.06); overflow: hidden;}
.s24 .arti3 .tab-menu li a:before {opacity: 0; position: absolute; top: 0; left: 0; content: ''; width: 10px; height: 100%; background: #fb5d00; transition: all 0.5s;}
.s24 .arti3 .tab-menu li a:after {opacity: 0; position: absolute; top: 50%; margin-top: -7px; right: 28px; content: ''; width: 14px; height: 14px; background: url('../img/sub/s24-tab-menu-active.png') no-repeat center center; transition: all 0.5s;}
.s24 .arti3 .tab-menu li a img {}
.s24 .arti3 .tab-menu li.active {transform: translateX(30px);}
.s24 .arti3 .tab-menu li.active a:before {opacity: 1;}
.s24 .arti3 .tab-menu li.active a:after {opacity: 1;}
.s24 .arti3 .tab-cont {position: relative; padding-right: 50px;}
.s24 .arti3 .tab-cont .cont-wrap:not(:last-child) {margin-bottom: 110px;}
.s24 .arti3 .tab-cont .title {display: flex; align-items: flex-end; margin-bottom: 25px;}
.s24 .arti3 .tab-cont .title h3 {font-size: 34px; font-weight: 700; line-height: 1.5em; color: #000; margin-right: 10px;}
.s24 .arti3 .tab-cont .title span {font-size: 20px; font-weight: 700; line-height: 1.5em; color: #fb5d00; margin-bottom: 4px;}
.s24 .arti3 .tab-cont .round-text {margin-bottom: 40px; }
.s24 .arti3 .tab-cont .round-text span {display: inline-block; font-size: 20px; line-height: 1em; color: #000; border-radius: 20px; padding: 10px 18px; background: #faeae1;}
.s24 .arti3 .tab-cont p {font-size: 18px; line-height: 1.66em; color: #676767; margin-bottom: 40px;}
.s24 .arti3 .tab-cont p span {font-weight: 600; color: #fb5d00;}
.s24 .arti3 .tab-cont p b {font-weight: 600; color: #000;}
.s24 .arti3 .tab-cont img {width: 100%;}
.table-wrap {margin: 20px 0; border: 1px solid #ddd; border-radius: 10px; overflow: hidden;}
.table-responsive {overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-responsive > div {border: 1px solid #ddd; border-radius: 10px; overflow: hidden;}
.table-responsive table {min-width: 700px;}
.s24 .arti3 .tab-cont table {width: 100%; }
.s24 .arti3 .tab-cont thead {position: relative; background: #fb5d00; }
.s24 .arti3 .tab-cont thead th {position: relative; font-size: 20px; font-weight: 600; color: #fff; text-align: center; padding: 16px 5px;}
.s24 .arti3 .tab-cont thead th:nth-child(1) {border-radius: 10px 0 0 10px;}
.s24 .arti3 .tab-cont thead th:last-child {border-radius: 0 10px 10px 0;}
.s24 .arti3 .tab-cont thead th:after {position: absolute; top: 50%; right: 0; transform: translateY(-50%); content: ''; width: 1px; height: 20px; background: rgba(255,255,255,0.3);}
.s24 .arti3 .tab-cont thead th:last-child:after {display: none;}
.s24 .arti3 .tab-cont tbody tr {position: relative; /* border-bottom: 1px solid #ddd; */}
.s24 .arti3 .tab-cont tbody tr:after {position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); content: ''; width: calc(100% - 40px); height: 1px; background: #ddd;}
.s24 .arti3 .tab-cont tbody tr.border-none:after {display: none;}
.s24 .arti3 .tab-cont tbody tr .border-b {border-bottom: 1px dotted #ddd;}
.s24 .arti3 .tab-cont tbody tr:last-child:after {display: none;}
.s24 .arti3 .tab-cont tbody th {font-size: 18px; font-weight: 600; line-height: 1.66em; color: #000; padding: 15px 10px;background: #fff7f2;}
.s24 .arti3 .tab-cont tbody td {font-size: 18px; line-height: 1.66em; color: #666; padding: 15px 30px; background: #fff;}
.s24 .arti3 .tab-cont tbody .radius-lefttop {border-radius: 10px 0 0 0;}
.s24 .arti3 .tab-cont tbody .radius-righttop {border-radius: 0 10px 0 0;}
.s24 .arti3 .tab-cont tbody .radius-leftbottom {border-radius: 0 0 0 10px;}
.s24 .arti3 .tab-cont tbody .radius-rightbottom {border-radius: 0 0 10px 0;}
.s24 .arti3 .tab-cont tbody .center {text-align: center;}
.s24 .arti3 .tab-cont tbody .border-l {border-left: 1px dotted #ddd;}
.s24 .arti3 .tab-cont tbody .color-orange {color: #fb5d00;}
.s24 .arti3 .tab-cont tbody p {margin-bottom: 0;}
.s24 .arti3 .tab-cont tbody p.circle-dot {position: relative; padding-left: 8px;} 
.s24 .arti3 .tab-cont tbody p.circle-dot:before {position: absolute; top: 14px; left: 0; content: ''; width: 3px; height: 3px; background: #676767; border-radius: 50%;}
.s24 .arti3 .tab-cont tbody p.circle-dot.color-orange:before {background: #fb5d00;}
.s24 .arti3 .tab-cont tbody .box {display: flex; padding: 22px 20px; border-radius: 10px; background: #fff7f2; margin-top: 12px;}
.s24 .arti3 .tab-cont tbody .box b {display: inline-block; height: 24px; font-size: 16px; font-weight: 600; line-height: 1.4em; color: #fff; background: #fb5d00; padding: 2px 8px; margin-right: 10px;}
.s24 .arti3 .tab-cont tbody .box p {font-size: 16px; line-height: 1.62em; color: #666;}

.s24 .arti3 .tab-cont .notice h4 {font-size: 20px; font-weight: 600; line-height: 1.5em; color: #000; margin-bottom: 20px;}
.s24 .arti3 .tab-cont .notice ul li {position: relative; font-size: 18px; line-height: 1.66em; color: #666; padding-left: 16px;}
.s24 .arti3 .tab-cont .notice ul li:before {position: absolute; top: 0; left: 0; content: '※'; font-size: 18px; color: #fb5d00;}

.s24 .arti3 .tab-cont .img-list ul {display: flex; margin: 0 -13px;}
.s24 .arti3 .tab-cont .img-list ul li {width: 33.333%; padding: 0 13px;}
.s24 .arti3 .tab-cont .img-list.col02 ul li {width: 50%;}
.s24 .arti3 .tab-cont .img-list ul li figcaption {font-size: 20px; font-weight: 600; line-height: 1.4em; color: #000; text-align: center; margin-top: 24px;}

.s24 .arti3 .tab-cont .sub-title {display: flex; align-items: flex-end;margin-bottom: 12px;}
.s24 .arti3 .tab-cont .sub-title h3 {position: relative; font-size: 24px; font-weight: 700; line-height: 1.5em; color: #000; padding-left: 14px; margin-right: 10px;}
.s24 .arti3 .tab-cont .sub-title h3:before {position: absolute; top: 14px; left: 0; content: ''; width: 5px; height: 5px; background: #fb5d00;}
.s24 .arti3 .tab-cont .sub-title span {font-size: 18px; font-weight: 700; line-height: 1.5em; color: #fb5d00; margin-bottom: 3px;}

.s24 .arti3 #cont06 .img-gray-box {margin-bottom: 30px;}
.s24 .arti3 .tab-cont .img-gray-box ul {display: flex; margin: 0 -15px;}
.s24 .arti3 .tab-cont .img-gray-box ul li {width: 50%; padding: 0 15px;}
.s24 .arti3 .tab-cont .img-gray-box ul li .inner {}
.s24 .arti3 .tab-cont .img-gray-box ul li img {border: 1px solid #ddd; border-radius: 10px;}

.s24 .arti3 .tab-cont .ol-list ol {display: flex; margin: 0 -11px;}
.s24 .arti3 .tab-cont .ol-list ol li {width: 33.3333%; padding: 0 11px;}
.s24 .arti3 .tab-cont .ol-list ol li .inner {position: relative; min-height: 250px; height: 100%; background: #fff; border-radius: 10px; padding: 35px 40px;}
.s24 .arti3 .tab-cont .ol-list ol li b {display: block; font-size: 20px; font-weight: 600; line-height: 1.5em; color: #fb5d00; margin-bottom: 3px;}
.s24 .arti3 .tab-cont .ol-list ol li p {font-size: 18px; line-height: 1.66em; color: #666;}
.s24 .arti3 .tab-cont .ol-list ol li .num {position: absolute; bottom: 30px; right: 30px; font-size: 40px; font-weight: 700; line-height: 1em; color: #fb5d00; opacity: 0.2;}

.s24 .arti3 .tab-cont .text-box-list ul {display: flex; margin: 0 -13px;}
.s24 .arti3 .tab-cont .text-box-list ul li {width: 33.333%; padding: 0 13px;}
.s24 .arti3 .tab-cont .text-box-list ul li .inner {border-radius: 10px; background: #fb5d00; font-size: 18px; font-weight: 600; line-height: 1.66em; color: #fff; padding: 15px 10px; text-align: center;}

/* s31 */
.s31 .grapy-box{position: relative; padding-right: 42px; height: 650px; padding-left: 74px;}
.s31 .grapy-box .figbox{position: relative; padding-left: 40%;  }
.s31 .grapy-box .figbox img{position: absolute; right: 0; top: 0; transition:.3s;  padding-top: 15px;}
.s31 .grapy-box .figbox img:nth-child(1){opacity: 1;}
.s31 .grapy-box .box{position: absolute; transition:.5s; opacity: 0; box-shadow:10px 10px 20px rgba(0,0,0,0.1); border-radius: 10px;	z-index: 10; translate:0 15%;}  
/* .s31 .grapy-box .box:after{position: absolute; content: ''; width: 425px; height: 255px; border-top: 2px solid #3a836c; border-right: 2px solid #3a836c; right: -16vw; top: 50%; margin-top: -2px; z-index: 10; border-radius: 0 10px 0 0;}
.s31 .grapy-box .box2:after{right: -12.2vw; width: 323px; height: 239px;}
.s31 .grapy-box .box3:after{width: 238px; height: 186px; right: -8.3vw;} */
.s31 .grapy-box .box:after{position: absolute; content: ''; width: 425px; height: 255px; border-top: 2px solid #3a836c; border-right: 2px solid #3a836c; right: -306px; top: 50%; margin-top: -2px; z-index: 10; border-radius: 0 10px 0 0;}
.s31 .grapy-box .box2:after{right: -228px; width: 323px; height: 239px;}
.s31 .grapy-box .box3:after{width: 238px; height: 186px; right: -159px;}
.s31 .grapy-box .box .tbx{width: 450px; height: 304px; box-sizing: border-box; background: #3a836c; padding: 50px 10px 50px 59px; color: #fff;  border-radius: 10px;}
.s31 .grapy-box .box .tbx small{display: block; font-size: 16px; line-height: 1; letter-spacing: -0.02em; font-weight: 700;	}
.s31 .grapy-box .box .tbx h5{font-size: 26px; line-height: 1; letter-spacing: -0.02em; font-weight: 400; margin: 10px 0 20px;}
.s31 .grapy-box .box .tbx ul > li{display: flex; font-size: 18px; line-height: 32px; letter-spacing: -0.02em; font-weight: 500;	}
.s31 .grapy-box.on1 .figbox img:nth-child(1){z-index: 10; opacity: 1;}
.s31 .grapy-box.on2 .figbox img:nth-child(2){z-index: 10; opacity: 1;}
.s31 .grapy-box.on3 .figbox img:nth-child(3){z-index: 10; opacity: 1;}
.s31 .grapy-box.on1 .box1{translate:0 0; opacity:1;}
.s31 .grapy-box.on2 .box2{translate:0 0; opacity:1;}
.s31 .grapy-box.on3 .box3{translate:0 0; opacity:1;}

/* new */
.s31 .grapy-in-box{position: relative; padding-top: 185px; padding-left: 50px; box-sizing: border-box; padding-right: 74px;}
.s31 .grapy-in-box .box{position: absolute; left: 0; top: 0; ; transition:.5s; ; opacity: 0; translate:0 15%;}
.s31 .grapy-in-box .box1{left: 73px;}
.s31 .grapy-in-box .box2{left: auto; right: 73px;}
.s31 .grapy-in-box .box3{left: auto; right: 73px; top: auto; bottom: 30px;}
.s31 .grapy-in-box .box1:after{position: absolute; content: ''; width: 2px; height: 288px; background: #606060; right: 30px; bottom: -275px;	}
.s31 .grapy-in-box .box2:after{position: absolute; content: ''; width: 230px; height: 413px; border-radius: 10px 0 0 0; border: 2px solid #606060; border-right: 0; border-bottom: 0; left:  -230px; top: 152px;}		  
.s31 .grapy-in-box .box3:after{position: absolute; content: ''; width: 403px; height: 108px; border-radius: 10px 10px 0 0; border: 2px solid #606060; left: -156px; top: -104px;  border-bottom: 0;}
.s31 .grapy-in-box .box .tbx{width: 450px; height: 304px; box-sizing: border-box; background: #606060; padding: 50px 10px 50px 59px; color: #fff;  border-radius: 10px; box-shadow:0px 0px 10px rgba(0,0,0,0.1)}
.s31 .grapy-in-box .box .tbx small{display: block; font-size: 16px; line-height: 1; letter-spacing: -0.02em; font-weight: 700;	}
.s31 .grapy-in-box .box .tbx h5{font-size: 26px; line-height: 1; letter-spacing: -0.02em; font-weight: 400; margin: 10px 0 20px;}
.s31 .grapy-in-box .box .tbx ul > li{display: flex; font-size: 18px; line-height: 32px; letter-spacing: -0.02em; font-weight: 500;	}

.s31 .grapy-in-box.on1 .box1{translate:0 0; opacity:1;}
.s31 .grapy-in-box.on2 .box2{translate:0 0; opacity:1;}
.s31 .grapy-in-box.on3 .box3{translate:0 0; opacity:1;}



/* s32 */
.s32 .partner-list{margin-bottom: 60px;}
.s32 .simply-scroll{width: 100% !important; height: 460px !important; margin-bottom: 20px !important; 		}
.s32 .simply-scroll-clip{width: 100% !important; height: 500px !important;}
.s32 .simply-scroll-clip ul > li{float: left; width: 360px !important; height: 500px !important; margin: 0 30px !important;    padding: 20px 0px;}
.s32 .simply-scroll-clip ul > li a{box-shadow:0px 0px 20px rgba(0,0,0,0.15); overflow: hidden; border-radius: 10px;}

/* s33 */
.s33{margin-bottom: 90px;}
.s33 .arti1 .his-wrap{margin-top: -85px;}
.s33 .arti1 .his-wrap .line-box{height: 91%;}
.s33 .arti1 .year-wrap{width: 400px;}
.s33 .arti1 .year .year-box .year-tit{font-size: 50px;}
.s33 .arti1 .year .year-box{width: 400px; transition:.6s;}
.s33 .arti1 .year.active1{translate:0px 0 }
.s33 .arti1 .year.active2{translate:-410px 0 }
.s33 .arti1 .year.active3{translate:-820px 0 }
.s33 .arti1 .his-wrap .box dl dt{width: 60px;}
.s33 .arti1 .his-wrap .box dl dd ul > li span{width: auto; padding-right: 32px; letter-spacing: -0.04em;}
.s33 .arti1 .his-wrap .box dl dd ul > li p{width: auto; flex:1; }
.s33 .arti1 .his-wrap .line-box{top: 0;}
.s33 .arti1 .his-wrap .box dl dd{padding-left: 36px;}
.s33 .arti1 .his-wrap .box dl dd figure{display: flex; flex-wrap:wrap; gap:60px; margin-top: 20px;}
.s33 .arti1 .his-wrap .box dl dd figure img {border-radius: 10px;}

/* 캘린더 */
.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;}