@charset "utf-8";

.font-agg {font-family: 'Aggravo';}

.sub section {width: 100%; height: 100vh;}

.sub-visual {background-repeat: no-repeat; background-position: center center; background-size: cover;}
.s1 .sub-visual {background-image: url('../img/sub/s1_sub_visual_bg.jpg');}
.s2 .sub-visual {background-image: url('../img/sub/s2_sub_visual_bg.jpg');}
.s3 .sub-visual {background-image: url('../img/sub/s3_sub_visual_bg.jpg');}
.s4 .sub-visual {background-image: url('../img/sub/s4_sub_visual_bg.jpg');}
.sub-visual .container {align-content: center;}
.sub-visual .text-box {display: flex; align-items: center; flex-wrap: wrap; padding-top: 50px;}
.sub-visual .text-box h2 {font-family: 'Aggravo'; font-size: 70px; font-weight: 400; line-height: 1.29em; color: #fff; opacity: 0;}
.sub-visual .text-box span {display: inline-block; width: 0; height: 1px; background: #fff; margin: 21px 20px 0; }
.sub-visual .text-box .sub-title {font-size: 30px; font-weight: 600; line-height: 1.46em; letter-spacing: 0.6px; color: #fff; margin-top: 21px; opacity: 0;}
.animate .sub-visual .text-box h2 {animation: clipReveal 1.2s both 0.2s;}
.animate .sub-visual .text-box span {width: 105px; transition: width 0.6s 1.1s;}
.animate .sub-visual .text-box .sub-title {animation: clipReveal 1.2s both 1.9s;}
@keyframes clipReveal {
	0% {
		opacity: 0;
		clip-path: inset(-15% 100% -15% -15%);
	}
	100% {
		opacity: 1;
		clip-path: inset(-15% -15% -15% -15%);
	}
}

.s1 .sec01 {height: auto; background : url('../img/sub/s1_section01_bg.jpg') no-repeat center top/cover;}
.s1 .sec01 .wrap {display: flex; align-items: center;}
.s1 .sec01 .cont01 .text-box {width: 50.5%; padding: 0 95px 0 295px;}
.s1 .sec01 .cont01 .img-box {width: 49.5%;}
.s1 .sec01 .cont02 {padding: 200px 0;}
.s1 .sec01 .cont02 .wrap:nth-child(1) {margin-bottom: 200px;} 
.s1 .sec01 .cont02 .img-box {max-width: 923px; width: 100%;}
.s1 .sec01 .cont02 .text-box {width: 1%; flex: 1 1 auto; padding-left: 114px;}

.sub .text-box.center {text-align: center;}
.sub .text-box h3 {font-size: 34px; font-weight: 600; line-height: 1.41em; letter-spacing: 0.68px; color: #222; margin-bottom: 50px;}
.sub .text-box.white h3 {color: #fff;}
.sub .text-box p {font-size: 22px; font-weight: 400; line-height: 1.72em; letter-spacing: -0.44px; color: #222;}
.sub .text-box p:not(:last-child) {margin-bottom: 38px;}
.sub .text-box.white p {color: #fff; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);} 
.sub .text-box p.cursive {font-family: 'KccEunyeong'; font-size: 34px; font-weight: 400; line-height: 1.55em; letter-spacing: -0.68px; color: #000;}
.sub .text-box.white p.cursive {font-size: 40px; line-height: 1.2em; letter-spacing: -0.8px; color: #fff; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);}

.s1 .sec02 {background : url('../img/sub/s1_section02_bg.jpg') no-repeat center center/cover;}
.s1 .sec02 .container {max-width: 1492px;}
.s1 .sec02 .wrap {display: flex; align-items: flex-end; height: 100%; padding-bottom: 110px;}
.s1 .sec02 .img-box {max-width: 760px; border-radius:10px; overflow:hidden; position:relative;}
/* .s1 .sec02 .img-box .img {position:absolute; top:0; left:0; width:0; overflow:hidden; transition:all 0.8s; height:100%;}
.s1 .sec02 .img-box .img.t02 {transition-delay:0.2s;}
.s1 .sec02 .img-box .img.t03 {transition-delay:0.8s;}
.s1 .sec02 .img-box .img.t04 {transition-delay:1s;}
.s1 .sec02 .img-box .img.t05 {transition-delay:1.6s;}
.s1 .sec02 .img-box .img.t06 {transition-delay:1.8s;} */

.s1 .sec02 .img-box .img {position:absolute; top:0; left:0; width:0; overflow:hidden; transition:all 3s; height:100%;}
.s1 .sec02 .img-box .img.t02 {transition-delay:1s;}
.s1 .sec02 .img-box .img.t03 {transition-delay:3s;}
.s1 .sec02 .img-box .img.t04 {transition-delay:4s;}
.s1 .sec02 .img-box .img.t05 {transition-delay:6s;}
.s1 .sec02 .img-box .img.t06 {transition-delay:7s;}
.s1 .sec02 .img-box.on .img {width:100%; display:flex;}
.s1 .sec02 .img-box .img img {max-width:none;}
.s1 .sec02 .text-box {width: 1%; flex: 1 1 auto; padding-left: 135px; padding-right: 20px;} 

.s1 .sec03 {position: relative;}
.s1 .sec03 .video-box {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;}
.s1 .sec03 .text-box {display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding-bottom: 145px;}
.s1 .sec03 .text-box .cursive {margin-bottom: 47px;}

.s1 .sec04 {background: #EBEBEB;}
.s1 .sec04 .wrap {display: flex; align-items: center; height: 100%;}
.s1 .sec04 .video-box {max-width: 770px; overflow: hidden;}
.s1 .sec04 .video-box video {width: calc(100% + 5px);}
.s1 .sec04 .text-box {width: 1%; flex: 1 1 auto; padding-left: 154px; padding-right: 100px;} 

.s1 .sec05 {height: auto; padding: 143px 0 0;}
.s1 .sec05 .container {max-width: 1360px;}
.s1 .sec05 .text-box h3 {margin-bottom: 33px;}
.s1 .sec05 .video-box {margin-bottom: 44px;}
.s1 .sec05 .video-box video {max-width: 1330px; width: 100%; margin-bottom: 15px;}
.s1 .sec05 .video-box p {font-size: 14px; line-height: 1.92em; letter-spacing: -0.28px; color: #777; text-align: right;}
.s1 .sec05 .text-box p {margin-bottom: 54px;}
/* .btn-box {text-align: center;}
.btn-news {position: relative; display: inline-block; padding: 20px 86px; border: 1px solid #000; font-size: 16px; line-height: 1.68em; letter-spacing: -0.32px; color: #000; transition: all 0.5s;} 
.btn-news:before {transition: 0.5s all ease;  position: absolute; top: 0; left: 50%; right: 50%; bottom: 0; opacity: 0; content: ''; background-color: #000; z-index: -1;}
.btn-news:hover, .btn-news:focus {color: #fff;}
.btn-news:hover:before, .btn-news:focus:before {transition: 0.5s all ease; left: 0; right: 0; opacity: 1;}
.btn-news:active {transform: scale(0.9);} */

.btn-wrap {position: relative; margin-top: 54px; margin-bottom: 250px;}
.btn02 {position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
.btn01 ul {display: flex; justify-content: space-between;}
.btn02 ul {display: flex; margin: 0 -5px;}
.btn02 ul li {padding: 0 5px;}
.btn-wrap a {position: relative; height:70px; padding: 5px; display:flex; justify-content:center; align-items:center; text-align:center; border: 1px solid #000; font-size: 16px; line-height: 1.4em; letter-spacing: -0.32px; color: #000; text-align: center; transition: all 0.5s; border-radius:10px; overflow:hidden;}

.btn01 a {position: relative; width: 140px;} 
.btn01 a.btn-prev {padding-left: 35px;}
.btn01 a.btn-next {padding-right: 35px;}
.btn01 a:before {transition: 0.5s all ease; position: absolute; top: 0; left: 50%; right: 50%; bottom: 0; opacity: 0; content: ''; background-color: #000; z-index: -1;}
.btn01 a:after {content:''; width:10px; height:16px; position:absolute; top:50%; margin-top:-8px; background-repeat:no-repeat; background-size:cover; filter: brightness(0.5); transition: all 0.5s;}
.btn01 a.btn-prev:after {background-image:url('../img/layout/board-view-prev.png'); left:35px;}
.btn01 a.btn-next:after {background-image:url('../img/layout/board-view-next.png'); right:35px;}
.btn01 a:hover, .btn01 a:focus {color: #fff;}
.btn01 a:hover:before, .btn01 a:focus:before {transition: 0.5s all ease; left: 0; right: 0; opacity: 1;}
.btn01 a.btn-prev:hover:after {background-image:url('../img/layout/board-view-prev-active.png'); filter: brightness(1);}
.btn01 a.btn-next:hover:after {background-image:url('../img/layout/board-view-next-active.png'); filter: brightness(1);}

.btn02 a {width: 200px;}
.btn02 a:before {transition: 0.5s all ease; position: absolute; top: 0; left: 50%; right: 50%; bottom: 0; opacity: 0; content: ''; background-color: #000; z-index: -1;}
.btn02 a:hover, .btn02 a:focus {color: #fff;}
.btn02 a:hover:before, .btn02 a:focus:before {transition: 0.5s all ease; left: 0; right: 0; opacity: 1;}
.btn02 a:active {transform: scale(0.9);}

.s1 .btn01 ul {justify-content: flex-end;}
/* 
.btn-box {text-align: center;}
.btn-news {position: relative; display: inline-block; padding: 20px 86px; border: 1px solid #000; font-size: 16px; line-height: 1.68em; letter-spacing: -0.32px; color: #000; transition: all 0.5s;} 
.btn-news:before {transition: 0.5s all ease;  position: absolute; top: 0; left: 50%; right: 50%; bottom: 0; opacity: 0; content: ''; background-color: #000; z-index: -1;}
.btn-news:hover, .btn-news:focus {color: #fff;}
.btn-news:hover:before, .btn-news:focus:before {transition: 0.5s all ease; left: 0; right: 0; opacity: 1;}
.btn-news:active {transform: scale(0.9);} */

/* s2 */
.s2 .sec01 {height: auto; background : url('../img/sub/s2_section01_bg.jpg') no-repeat center top/cover; padding: 200px 0;}
.s2 .sec01 .cont01 {margin-bottom: 200px;}
.s2 .sec01 .cont01 .text-box {margin-bottom: 106px;}
.s2 .sec01 .cont01 .img-box {display: flex; margin: 0 -35px;}
.s2 .sec01 .cont01 .img-box > * {width: 50%; padding: 0 35px;}
.s2 .sec01 .cont02 .wrap {display: flex; align-items: center;}
.s2 .sec01 .cont02 .img-box {max-width: 837px; overflow:hidden; position:relative;}
.s2 .sec01 .cont02 .img-box .img {position:absolute; top:0; left:0; width:0; overflow:hidden; transition:all 2.8s; height:100%;}
.s2 .sec01 .cont02 .img-box.on .img {width:100%; display:flex;}
.s2 .sec01 .cont02 .img-box .img img {max-width:none;}
.s2 .sec01 .cont02 .text-box {width: 1%; flex: 1 1 auto; padding-left: 86px;}

.s2 .sec02 {height: auto; background : url('../img/sub/s2_section02_bg.jpg') no-repeat center top/cover; padding: 100px 0;}
.s2 .sec02 .container {align-content: center;}
.s2 .sec02 .img-box {margin-bottom: 54px;}
.s2 .sec02 .img-box {max-width: 660px;overflow:hidden; position:relative;}
.s2 .sec02 .img-box .img {position:absolute; top:0; left:0; width:0; overflow:hidden; transition:all 3s; height:100%;}
.s2 .sec02 .img-box .img.t02 {transition-delay:0s;}
.s2 .sec02 .img-box .img.t03 {transition-delay:0s;}
.s2 .sec02 .img-box .img.t04 {transition-delay:2.8s;}
.s2 .sec02 .img-box .img.t05 {transition-delay:2.8s;}
.s2 .sec02 .img-box .img.t06 {transition-delay:2.8s;}
.s2 .sec02 .img-box.on .img {width:100%; display:flex;}
.s2 .sec02 .img-box .img img {max-width:none;}
.s2 .sec02 .text-box h3 {margin-bottom: 24px;}

.s2 .sec03 {height: auto; padding: 200px 0;}
.s2 .sec03 .wrap {display: flex; align-items: center; height: 100%;}
.s2 .sec03 .text-box {width: 1%; flex: 1 1 auto; padding-right: 50px;} 
.s2 .sec03 .text-box p {/* margin-bottom: 104px; */}
.s2 .sec03 .text-box .btn-box {text-align: left;}
.s2 .sec03 .img-box {max-width: 923px;}

.s2 .sec05 {background : url('../img/sub/s2_section05_bg.jpg') no-repeat center top/cover;}
.s2 .sec05 .text-box {padding-top: 157px;}
.s2 .sec05 .text-box h3 {font-size: 62px; font-weight: 400; text-shadow: 0 4px 4px rgba(0, 0, 0, 0.50); margin-bottom: 20px;}
.s2 .sec05 .text-box p {font-size: 24px; font-weight: 700; letter-spacing: -0.48px; text-shadow: 0 4px 4px rgba(0, 0, 0, 0.60);}

/* s3 */
.s3 .sec01 {height: auto; background : url('../img/sub/s3_section01_bg.jpg') no-repeat center top/cover;}
.s3 .sec01 .wrap {display: flex; align-items: center;}
.s3 .sec01 .cont01 .text-box {width: 50.5%; padding: 0 50px 0 295px;}
.s3 .sec01 .cont01 .img-box {width: 49.5%;}
.s3 .sec01 .cont02 {padding: 200px 0;}

.s3 .sec01 .cont02 .img-box {max-width: 813px; width:100%; overflow:hidden; position:relative;}
.s3 .sec01 .cont02 .img-box .img {position:absolute; top:0; left:0; width:0; overflow:hidden; transition:all 3s; height:100%;}
.s3 .sec01 .cont02 .img-box .img.t02 {transition-delay:1.6s;}
.s3 .sec01 .cont02 .img-box.on .img {width:100%; display:flex;}
.s3 .sec01 .cont02 .img-box .img img {max-width:none;}
.s3 .sec01 .cont02 .text-box {width: 1%; flex: 1 1 auto; padding-left: 110px;}

.s3 .sec02 {background: #EBEBEB;}
.s3 .sec02 .wrap {display: flex; align-items: center; height: 100%;}
.s3 .sec02 .img-box {max-width: 790px;}
.s3 .sec02 .img-box span {display:block; font-size: 18px; line-height: 1.66em; letter-spacing: -0.36px; color: #777; text-align: right; margin-top: 10px; padding-right: 10px;}
.s3 .sec02 .text-box {width: 1%; flex: 1 1 auto; padding-left: 134px; padding-right: 50px;} 

.s3 .sec03 {height: auto; padding: 200px 0;}
.s3 .sec03 .container {max-width: 1454px;}
/* .s3 .sec03 .cont01 {margin-bottom: 200px;} */
.s3 .sec03 .text-box {margin-bottom: 90px;}
.s3 .sec03 .cont01 .img-box {display: flex; margin: 0 -35px;}
.s3 .sec03 .cont01 .img-box figure {width: 50%; padding: 0 35px;}
.s3 .sec03 .cont01 figcaption {font-size: 18px; line-height: 1.66em; letter-spacing: -0.36px; color: #777; text-align: right; margin-top: 10px; padding-right: 10px;}
.s3 .sec03 .cont02 .img-box img {width: 100%;}

/* s4 */
.s4 .sec01 {height: auto; background : url('../img/sub/s4_section01_bg.jpg') no-repeat center top/cover;}
.s4 .sec01 .wrap {display: flex; align-items: center;}
.s4 .sec01 .cont01 .img-box {width: 66%;}
.s4 figcaption {font-size: 18px; line-height: 1.66em; letter-spacing: -0.36px; color: #777; text-align: right; margin-top: 14px;}
.s4 .sec01 .cont01 .text-box {width: 50.5%; padding: 0 130px 0 134px;}
.s4 .sec01 .cont02 {padding: 156px 0 200px;}
.s4 .sec01 .cont02 .container {max-width: 1238px;}
.s4 .sec01 .cont02 .text-box {margin-bottom: 80px;}
.s4 .sec01 .cont02 .img-box .wrap {display: flex; align-items: flex-end; margin: 0 -35px;}
.s4 .sec01 .cont02 .img-box .wrap figure {padding: 0 35px;}
.s4 .sec01 .cont02 .img-box .wrap figure .chart-img-box01 {width:100%; overflow:hidden; position:relative;}
.s4 .sec01 .cont02 .img-box .wrap figure .chart-img-box01 .img {opacity: 0; position:absolute; top:0; left:0; width:100%; overflow:hidden; transition:all 1.5s; height:100%;}
.s4 .sec01 .cont02 .img-box .wrap figure .chart-img-box01 .img.t01 {transition-delay:1.5s;}	
.s4 .sec01 .cont02 .img-box .wrap figure .chart-img-box01 .img.t02 {transition-delay:3s;}
.s4 .sec01 .cont02 .img-box .wrap figure .chart-img-box01 .img.t03 {transition-delay:4.5s;}
.s4 .sec01 .cont02 .img-box .wrap figure .chart-img-box01 .img.t04 {transition-delay:6s;}
.s4 .sec01 .cont02 .img-box .wrap figure .chart-img-box01.on .img {opacity: 1;}
.s4 .sec01 .cont02 .img-box .wrap figure .chart-img-box02 {max-width: 813px; width:100%; overflow:hidden; position:relative;}
.s4 .sec01 .cont02 .img-box .wrap figure .chart-img-box02 .img {position:absolute; top:0; left:0; width:0; overflow:hidden; transition:all 3s; height:100%;}
.s4 .sec01 .cont02 .img-box .wrap figure .chart-img-box02 .img.t02 {transition-delay:0s;}
.s4 .sec01 .cont02 .img-box .wrap figure .chart-img-box02 .img.t03 {transition-delay:1.6s;}
.s4 .sec01 .cont02 .img-box .wrap figure .chart-img-box02 .img.t04 {transition-delay:1.6s;}
.s4 .sec01 .cont02 .img-box .wrap figure .chart-img-box02.on .img {width:100%; display:flex;}
.s4 .sec01 .cont02 .img-box .wrap figure .chart-img-box02 .img img {max-width:none;}

/*
.s4 .sec02 .wrap {display: flex; align-items: center; height: 100%;}
.s4 .sec02 .img-box {max-width: 790px;}
.s4 .sec02 .text-box {width: 1%; flex: 1 1 auto; padding-left: 134px; padding-right: 50px;} 
*/
.s4 .sec03 {height: auto; padding: 134px 0; background: #EBEBEB;}
.s4 .sec03 .container {align-content: center;}
.s4 .sec03 .text-box {width: 700px; margin: 0 auto 80px;} 
.s4 .sec03 .img-box {background: #fff; padding: 75px 140px;}
.s4 .sec03 .img-box .wrap {display: flex; justify-content: space-between; align-items: center; margin: 0 -35px;}
.s4 .sec03 .img-box .wrap figure {padding: 0 35px;}

.s4 .sec04 {height: auto; padding: 200px 0 0;}
.s4 .sec04 .wrap {display: flex; align-items: center; height: 100%;}
.s4 .sec04 .img-box {max-width: 790px;}
.s4 .sec04 .text-box {width: 1%; flex: 1 1 auto; padding-left: 134px; padding-right: 100px;} 
.s4 .sec04 .btn-box {margin-top: 54px;}



.chart-wrap {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;}

.chart-bar {max-width:790px; width:100%;}
.chart-bar .tit {display:block; width:100%; max-width:680px; margin:0 auto 40px; border-bottom:1px solid #ddd; text-align:center;}
.chart-bar .tit h4 {font-size:24px; line-height:1.5em; padding:10px 0 24px;}
.chart-bar .chart {display:flex; flex-wrap:wrap;}
.chart-bar .chart .left {width:100%; max-width:100px; position:relative; padding-left:40px; height:330px;}
.chart-bar .chart .left h5 {font-size:20px; line-height:1.4em; color:#000; position:absolute; bottom:100px; left:-40px; transform:rotate(-90deg); white-space:nowrap; font-weight:500;}
.chart-bar .chart .left ul {height:100%; padding-left:5px; position:relative; width:100%;}
.chart-bar .chart .left ul:after {content:''; width:2px; height:100%; background:#000; position:absolute; top:5px; right:0;}
.chart-bar .chart .left ul li {height:12.5%; font-size:16px; color:#333; line-height:1.5em; position:relative;}
.chart-bar .chart .left ul li:last-child {height:0;}
.chart-bar .chart .left ul li:after {content:''; width:6px; height:2px; background:#000; position:absolute; top:5px; right:0;}
.chart-bar .chart .col {width:calc(100% - 100px); display:flex; position:relative;}
.chart-bar .chart .col .txt {position:absolute; top:46px; left:0; text-align:center; width:100%; z-index:1; font-weight:600;}
.chart-bar .chart .col .txt p {font-size:20px; line-height:1.5em; color:#000;}
.chart-bar .chart .row {width:100%; text-align:center;}
.chart-bar .chart .row .bar {height:330px; margin-top:7px; position:relative; display:flex; align-items:flex-end; overflow:hidden;}
.chart-bar .chart .row .bar:after {content:''; width:100%; height:2px; position:absolute; bottom:0; left:0; background:#000;}
.chart-bar .chart .row .bar ul {width:20px; margin:0 auto; overflow:hidden; transition:all 0.8s; transform:translateY(100%); padding-bottom:2px;}
.chart-bar.active .chart .row .bar ul {transform:translateY(0);}
.chart-bar .chart .row .bar11 ul {transition-delay:0.1s;}
.chart-bar .chart .row .bar12 ul {transition-delay:0.15s;}
.chart-bar .chart .row .bar13 ul {transition-delay:0.2s;}
.chart-bar .chart .row .bar14 ul {transition-delay:0.25s;}
.chart-bar .chart .row .bar15 ul {transition-delay:0.3s;}
.chart-bar .chart .row .bar16 ul {transition-delay:0.35s;}
.chart-bar .chart .row .bar17 ul {transition-delay:0.4s;}
.chart-bar .chart .row .bar18 ul {transition-delay:0.45s;}
.chart-bar .chart .row .bar19 ul {transition-delay:0.5s;}
.chart-bar .chart .row .bar20 ul {transition-delay:0.55s;}
.chart-bar .chart .row .bar21 ul {transition-delay:0.6s;}
.chart-bar .chart .row .bar22 ul {transition-delay:0.65s;}
.chart-bar .chart .row .bar23 ul {transition-delay:0.7s;}
.chart-bar .chart .row .bar24 ul {transition-delay:0.78s;}
.chart-bar .chart .row .bar ul li.t01 {background:#cf3d2e;}
.chart-bar .chart .row .bar ul li.t02 {background:#4571b2;}
.chart-bar .chart .row .bar ul li.t03 {background:#a09fa4;}
.chart-bar .chart .row .bar ul li.t04 {background:#ddbc4d;}
.chart-bar .chart .row .bar ul li.t05 {background:#6c8ecb;}
.chart-bar .chart .row .bar ul li.t06 {background:#82a168;}
.chart-bar .chart .row .bar11 ul li.t02 {height:28px;}
.chart-bar .chart .row .bar12 ul li.t01 {height:4px;}
.chart-bar .chart .row .bar12 ul li.t03 {height:8px;}
.chart-bar .chart .row .bar12 ul li.t04 {height:6px;}
.chart-bar .chart .row .bar13 ul li.t02 {height:2px;}
.chart-bar .chart .row .bar13 ul li.t03 {height:51px;}
.chart-bar .chart .row .bar13 ul li.t05 {height:11px;}
.chart-bar .chart .row .bar13 ul li.t06 {height:4px;}
.chart-bar .chart .row .bar14 ul li.t03 {height:14px;}
.chart-bar .chart .row .bar14 ul li.t06 {height:12px;}
.chart-bar .chart .row .bar15 ul li.t03 {height:16px;}
.chart-bar .chart .row .bar15 ul li.t06 {height:4px;}
.chart-bar .chart .row .bar16 ul li.t01 {height:120px;}
.chart-bar .chart .row .bar17 ul li.t01 {height:16px;}
.chart-bar .chart .row .bar17 ul li.t02 {height:3px;}
.chart-bar .chart .row .bar17 ul li.t06 {height:2px;}
.chart-bar .chart .row .bar18 ul li.t01 {height:122px;}
.chart-bar .chart .row .bar18 ul li.t02 {height:21px;}
.chart-bar .chart .row .bar19 ul li.t01 {height:2px;}
.chart-bar .chart .row .bar19 ul li.t03 {height:8px;}
.chart-bar .chart .row .bar19 ul li.t06 {height:6px;}
.chart-bar .chart .row .bar20 ul li.t05 {height:12px;}
.chart-bar .chart .row .bar20 ul li.t06 {height:5px;}
.chart-bar .chart .row .bar21 ul li.t01 {height:59px;}
.chart-bar .chart .row .bar21 ul li.t04 {height:20px;}
.chart-bar .chart .row .bar21 ul li.t06 {height:4px;}
.chart-bar .chart .row .bar22 ul li.t01 {height:2px;}
.chart-bar .chart .row .bar22 ul li.t02 {height:9px;}
.chart-bar .chart .row .bar22 ul li.t06 {height:3px;}
.chart-bar .chart .row .bar23 ul li.t01 {height:89px;}
.chart-bar .chart .row .bar23 ul li.t05 {height:3px;}
.chart-bar .chart .row .bar24 ul li.t01 {height:292px;}
.chart-bar .chart .row .bar24 ul li.t05 {height:14px;}
.chart-bar .chart .row .date p {font-size:16px; color:#000; line-height:1.5em; padding-top:10px;}
.chart-bar .chart .box {width:100%; padding-left:100px; margin-top:20px;}
.chart-bar .chart .box ul {display:flex; justify-content:center;}
.chart-bar .chart .box ul li {padding:0 8px; font-size:18px; font-weight:500; color:#000; line-height:1.6em;}
.chart-bar .chart .box ul li:before {content:''; width:8px; height:8px; display:inline-block; vertical-align:middle; margin-top:-4px; margin-right:6px;}
.chart-bar .chart .box ul li.t01:before {background:#cf3d2e;}
.chart-bar .chart .box ul li.t02:before {background:#4571b2;}
.chart-bar .chart .box ul li.t03:before {background:#a09fa4;}
.chart-bar .chart .box ul li.t04:before {background:#ddbc4d;}
.chart-bar .chart .box ul li.t05:before {background:#6c8ecb;}
.chart-bar .chart .box ul li.t06:before {background:#82a168;}


.chart-pie {width:360px; height:360PX; margin-top:60px; position:relative;}
.chart-pie canvas {position:relative; z-index:5;}
.chart-pie .circle {opacity:0; width:120px; height:120px; background:#6f60a5; border-radius:50%; position:absolute; top:50%; left:50%; margin-top:-60px; margin-left:-60px; z-index:10; display:flex; align-items:center; justify-content:center; text-align:center; transition:all 1.2s 0.3s;}
.chart-pie.active .circle {opacity:1;}
.chart-pie .circle p {font-size:24px; color:#fff; line-height:1.1em; font-weight:600;}
.chart-pie .txt {position:absolute; text-align:center; font-size:16px; line-height:1.1em; color:#000; font-weight:600; transition:all 0.6s; opacity:0;}
.chart-pie.active .txt {opacity:1;}
.chart-pie .txt01 {z-index:10; font-size:24px; line-height:1.1em; color:#fff; right:11%; bottom:20%; transition-delay:0.6s;}
.chart-pie .txt02 {top:43.5%; left:10px; z-index:10; transition-delay:0.7s;}
.chart-pie .txt03 {top:26%; left:36px; z-index:10; transform:rotate(33deg); transition-delay:0.8s;}
.chart-pie .txt04 {left:0; top:-5%; z-index:1; transition-delay:0.9s;}
.chart-pie .txt04:before,
.chart-pie .txt04:after {content:''; background:#000; position:absolute;}
.chart-pie .txt04:before {width:20px; height:2px; top:30px; right:-30px;}
.chart-pie .txt04:after {width:2px; height:30px; top:30px; right:-30px;}
.chart-pie .txt05 {top:-16%; left:26%; z-index:1; transition-delay:1s;}
.chart-pie .txt05:after {content:''; width:2px; height:30px; position:absolute; bottom:-30px; left:50%; background:#000;}
.chart-pie .txt06 {top:-16%; left:50%; z-index:1; transition-delay:1.1s;}
.chart-pie .txt06:before,
.chart-pie .txt06:after {content:''; background:#000; position:absolute;}
.chart-pie .txt06:before {width:20px; height:2px; top:30px; left:-25px;}
.chart-pie .txt06:after {width:2px; height:40px; top:30px; left:-25px;}









/* 추가 */
/* sub 02 */
.s2 .sec04 {background:#EBEBEB;}
.s2 .sec04 .text-box {padding-right:0; padding-left:50px;}
/* sub 03 */
.s3 .sec04 {margin-bottom:84px;}
.s3 .sec04 .col {display:flex; align-items:center;}
.s3 .sec04 .img-box {width:100%; max-width:790px; position:relative; padding-bottom:80px;}
.s3 .sec04 .img-box .slick-dots {position:absolute; bottom:-80px; left:0; width:100%; display:flex; justify-content:center;}
.s3 .sec04 .img-box .slick-dots li {padding:0 7px;}
.s3 .sec04 .img-box .slick-dots li button {display:block; width:20px; height:20px; border:1px solid #63A3ED; border-radius:50%; background:#fff; font-size:0; transition:all 0.4s;}
.s3 .sec04 .img-box .slick-dots li.slick-active button {background:#63A3ED;}
.s3 .sec04 .txt-box {width:1%; flex:1 1 auto; padding-left:130px;}
.s3 .sec04 .txt-box h5 {font-size:34px; line-height:1.4em; color:#222; font-weight:600; margin-bottom:50px;}
.s3 .sec04 .txt-box p {font-size:34px; line-height:1.5em; color:#222; font-family:'KccEunyeong';}
.s3 .sec05 {margin-bottom:200px;}
.s3 .sec05 .col {display:flex; align-items:center; margin-bottom:50px;}
.s3 .sec05 .txt-box {width:1%; flex:1 1 auto; padding-right:50px;}
.s3 .sec05 .txt-box h5 {font-size:34px; line-height:1.4em; font-weight:600; color:#222; margin-bottom:50px;}
.s3 .sec05 .txt-box p {font-size:22px; line-height:1.7em; color:#222; margin-bottom:36px;}
.s3 .sec05 .txt-box p:last-child {margin-bottom:0;}
.s3 .sec05 .video-box {width:100%; max-width:900px;}
.s3 .sec05 .video-box video {width:100%;}
.s3 .sec05 .more {text-align:center;}
.s3 .sec05 .more a {width:254px; line-height:64px; border:1px solid #000; display:inline-block; font-size:16px; color:#000; transition:all 0.6s; position:relative; border-radius:10px; overflow:hidden;}
.s3 .sec05 .more a:hover {color:#fff;}
.s3 .sec05 .more a:before {content:''; width:0; left:50%; top:0; height:100%; background:#000; transition:all 0.6s; position:absolute; z-index:-1;}
.s3 .sec05 .more a:hover:before {width:100%; left:0;}
.s3 .sec06 {height: 100vh;}
.s3 .sec06 {position:relative;}
.s3 .sec06 .backdrop {height: 100%; background: url('../img/sub/s3_section06_bg.jpg') no-repeat center center/cover;}
.s3 .sec06 .txt-box {position:absolute; width:100%; height:100%; top:0; left:0; display:flex; align-items:center; justify-content:center; z-index:11; text-align:center; padding: 0 15px;}
.s3 .sec06 .txt-box h5 {font-size:34px; line-height:1.4em; color:#222; font-weight:600; margin-bottom:50px;}
.s3 .sec06 .txt-box p {font-size:22px; line-height:1.7em; color:#222; margin-bottom:36px;}
.s3 .sec06 .txt-box p:last-child{margin-bottom:0;}

/* sub 04 */
.s4 .sec02 {padding:200px 0;}
.s4 .sec02 .col {display:flex; align-items:center; margin-bottom:90px;}
.s4 .sec02 .img-box {width:100%; max-width:790px;}
.s4 .sec02 .txt-box {width:1%; flex:1 1 auto; padding-left:130px;}
.s4 .sec02 .txt-box p {font-family: 'KccEunyeong'; font-size:34px; line-height:1.55em; letter-spacing: -0.68px; color:#222; margin-bottom:36px;}
.s4 .sec02 .txt-box p:last-child{margin-bottom:0;}
.s4 .sec02 .slick-dots {width:100%; display:flex; justify-content:center;}
.s4 .sec02 .slick-dots li {padding:0 7px;}
.s4 .sec02 .slick-dots li button {display:block; width:20px; height:20px; border:1px solid #63A3ED; border-radius:50%; background:#fff; font-size:0; transition:all 0.4s;}
.s4 .sec02 .slick-dots li.slick-active button {background:#63A3ED;}
.s4 .sec04 .img-box-mob {position: relative; display: none;}
.s4 .sec04 .img-box-mob .tab-cont-wrap {position: relative;}
.s4 .sec04 .img-box-mob .tab-cont {display: none;}
.s4 .sec04 .img-box-mob .tab-cont.active {display: block;}
.s4 .sec04 .img-box-mob .tab-menu-top {position: absolute; top: 15%; right: 0; z-index: 5;}
.s4 .sec04 .img-box-mob .tab-menu-bottom {position: absolute; bottom: 10%; right: 0; z-index: 5;}
.s4 .sec04 .img-box-mob .tab-menu li:not(:last-child) {margin-bottom: 10px;}
.s4 .sec04 .img-box-mob .tab-menu a {display: flex; align-items: center; width: 118px; height: 42px; border-radius: 21px 0 0 21px; font-size: 14px; font-weight: 500; line-height: 1.3em; color: #fff; padding: 0 13px; transition: all 0.5s;}
.s4 .sec04 .img-box-mob .tab-menu-top a {background: #4c66b0;}
.s4 .sec04 .img-box-mob .tab-menu-bottom a {background: #a8355e;}
.s4 .sec04 .img-box-mob .tab-menu-top li.active a {background: #1a3788;}
.s4 .sec04 .img-box-mob .tab-menu-bottom li.active a {background: #6f0f31;}
.s4 .sec04 .img-box-mob .tab-menu a img {margin-right: 5px;}


.s4 .sec04 .img-box-mob02 {position: relative; display: none;}
.s4 .sec04 .img-box-mob02 .tab-cont-wrap {position: relative;}
.s4 .sec04 .img-box-mob02 .tab-cont {display: none;}
.s4 .sec04 .img-box-mob02 .tab-cont.active {display: block;}

.s4 .sec04 .img-box-mob02 .tab-menu-wrap {margin-top: 20px;}
.s4 .sec04 .img-box-mob02 .tab-menu {display: flex; gap: 15px;}
.s4 .sec04 .img-box-mob02 .tab-menu li {width: 20%;}
.s4 .sec04 .img-box-mob02 .tab-menu a {display: flex; flex-direction: column; align-items: center; border-radius: 7px; font-size: 16px; font-weight: 500; line-height: 1.3em; color: #fff; padding: 12px 5px; transition: all 0.5s;}
.s4 .sec04 .img-box-mob02 .tab-menu-cold a {background: #4c66b0;}
.s4 .sec04 .img-box-mob02 .tab-menu-warm a {background: #a8355e;}
.s4 .sec04 .img-box-mob02 .tab-menu-cold.active a {background: #1a3788;}
.s4 .sec04 .img-box-mob02 .tab-menu-warm.active a {background: #6f0f31;}
.s4 .sec04 .img-box-mob02 .tab-menu a img {margin-bottom: 5px;}

.s4 .sec05 {margin-bottom:200px;}
.s4 .sec05 .col {display:flex; align-items:center;}
.s4 .sec05 .img-box {width:100%; max-width:790px;}
.s4 .sec05 .txt-box {width:1%; flex:1 1 auto; padding-right:100px;}
.s4 .sec05 .txt-box p {font-size:22px; line-height:1.7em; color:#222; margin-bottom:36px;}
.s4 .sec05 .txt-box p:last-child {margin-bottom:0;}


.eating {width:100%; max-width:790px; position:relative; overflow:hidden;}
.eating .img {position:absolute; z-index:1;}
.eating .t01 {bottom:2%; left:15%; animation:eating01 5s linear infinite both;}
.eating .t02 {bottom:44.5%; left:12%; animation:eating02 20s linear infinite both;}
.eating .t03 {bottom:33%; left:2%; animation:eating03 14s linear infinite both;}
.eating .t04 {bottom:41%; right:6%; animation:eating04 7s linear infinite both;}
.eating .t05 {top:24%; left:46%; animation:eating05 9s linear infinite both;}
@keyframes eating01 {0% {transform:translate(0%, 0%);} 25% {transform:translate(-30%, 45%);} 50% {transform:translate(-50%, 90%);} 75% {transform:translate(-30%, 45%);} 100% {transform:translate(0%, 0%);}}
@keyframes eating02 {0% {transform:translate(0%, 0);} 6.25% {transform:translate(0%, 250%);} 12.5% {transform:translate(3%, 470%);} 18.75% {transform:translate(25%, 645%);} 25% {transform:translate(82%, 820%);} 31.25% {transform:translate(222%, 925%);} 37.5% {transform:translate(360%, 790%);} 43.75% {transform:translate(440%, 520%);} 50% {transform:translate(460%, 210%);} 56.25% {transform:translate(440%, 520%);} 62.5% {transform:translate(360%, 790%);} 68.75% {transform:translate(222%, 925%);} 75% {transform:translate(82%, 820%);} 81.25% {transform:translate(25%, 645%);} 87.5% {transform:translate(3%, 470%);} 93.75% {transform:translate(0%, 250%);} 100% {transform:translate(0%, 0);}}
@keyframes eating03 {0% {transform: translate(0, 0);} 3.846% {transform: translate(20%, 100%);} 7.692% {transform: translate(70%, 180%);} 11.538% {transform: translate(140%, 268%);} 15.384% {transform: translate(220%, 333%);} 19.231% {transform: translate(325%, 368%);} 23.077% {transform: translate(430%, 378%);} 26.923% {transform: translate(570%, 346%);} 30.769% {transform: translate(690%, 255%);} 34.615% {transform: translate(775%, 140%);} 38.462% {transform: translate(805%, 35%);} 42.308% {transform: translate(800%, -60%);} 46.154% {transform: translate(770%, -150%);} 50% {transform: translate(725%, -218%);} 53.846% {transform: translate(770%, -150%);} 57.692% {transform: translate(800%, -60%);} 61.538% {transform: translate(805%, 35%);} 65.384% {transform: translate(775%, 140%);} 69.231% {transform: translate(690%, 255%);} 73.077% {transform: translate(570%, 346%);} 76.923% {transform: translate(430%, 378%);} 80.769% {transform: translate(325%, 368%);} 84.615% {transform: translate(220%, 333%);} 88.462% {transform: translate(140%, 268%);} 92.308% {transform: translate(70%, 180%);} 96.154% {transform: translate(20%, 100%);} 100% {transform: translate(0, 0);}}
@keyframes eating04 {0% {transform: translate(0, 0);} 12.5% {transform: translate(10%, -100%);} 25% {transform: translate(30%, -200%);} 37.5% {transform: translate(50%, -300%);} 50% {transform: translate(80%, -400%);} 62.5% {transform: translate(50%, -300%);} 75% {transform: translate(30%, -200%);} 87.5% {transform: translate(10%, -100%);} 100% {transform: translate(0, 0);}}
@keyframes eating05 {0%{transform:translate(0%, 0%);} 10%{transform:translate(30%, 110%);} 20%{transform:translate(60%, 220%);} 30%{transform:translate(80%, 330%);} 40%{transform:translate(90%, 440%);} 50%{transform:translate(90%, 550%);} 60%{transform:translate(90%, 440%);} 70%{transform:translate(80%, 330%);} 80%{transform:translate(60%, 220%);} 90%{transform:translate(30%, 110%);} 100%{transform:translate(0%, 0%);}}