@charset "utf-8";

/* header */
#sub_layout{background: #333;}
#sub .hd-wrap{position: fixed; left: 0; top: 0; width: 100%;  background: rgba(0, 0, 0, 0.9); z-index: 1000010;} 
#sub .hd-wrap .wrap{display: flex; align-items:center;  width: 100%; height: 80px; margin: 0 auto; padding: 0 85px 0; box-sizing: border-box; } 
#sub .hd-wrap .wrap .hd-logo{order:1; width: 47px; height: 28px;}
#sub .hd-wrap .wrap .hd-logo p{display: none;}
#sub .hd-wrap .wrap nav{margin-left: auto; order:2; }
#sub .hd-wrap .wrap nav .hd-navi {display: flex; gap:0px -5px; text-align: center; }
#sub .hd-wrap .wrap nav .hd-navi > li {position: relative; }
#sub .hd-wrap .wrap nav .hd-navi > li > a{color: #FFF;font-size: 20px;font-weight: 800;line-height: 80px; letter-spacing: -0.4px; transition:.3s; padding: 0 60px;}
#sub .hd-wrap .wrap nav .hd-navi > li .dep2{position: absolute; left: 0; top: 80px; width: 100%; padding-top: 23px; display: none;}
#sub .hd-wrap .wrap nav .hd-navi > li .dep2 > ul{display: flex; flex-direction: column; gap:11px;}
#sub .hd-wrap .wrap nav .hd-navi > li .dep2 > ul > li > a{color: #FFF;font-size: 18px;font-weight: 400;line-height: 27.9px; letter-spacing: -0.36px; transition:.3s; width: 100%;}

#sub .hd-wrap .wrap nav .hd-navi > li:hover > a{color: #42b398;}
#sub .hd-wrap .wrap nav .hd-navi > li .dep2 > ul > li:hover > a{color: #42b398;}
#sub .hd-wrap .wrap nav .hd-navi > li .dep3 {display: none;}

#sub .hd-wrap .wrap .hd-sitemap{order:3; margin-left: 97px; 	}
#sub .hd-wrap .wrap .hd-sitemap{display: flex; flex-direction: column; gap:4px; width: 63px; height: 25px; cursor: pointer; transition:.3s; display: none;}
#sub .hd-wrap .wrap .hd-sitemap span{width: 34px; height: 4px; border-radius: 5px; background: rgba(217, 217, 217, 1); transition:.3s;}
#sub .hd-wrap .wrap .hd-sitemap span:nth-child(1){margin-left: auto;}
#sub .hd-wrap .wrap .hd-sitemap span:nth-child(2){margin-left: auto;}
#sub .hd-wrap .wrap .hd-sitemap span:nth-child(3){margin-left: auto;}
#sub .hd-wrap .wrap .hd-sitemap.on{translate:0 8px}
#sub .hd-wrap .wrap .hd-sitemap:hover span{background: #fff;}
#sub .hd-wrap .wrap .hd-sitemap.on span{background: #fff;}
#sub .hd-wrap .wrap .hd-sitemap.on span:nth-child(2){opacity: 0; width: 0; height: 0;}
#sub .hd-wrap .wrap .hd-sitemap.on span:nth-child(1){width: 25px; height: 4px; border-radius: 10px; rotate:45deg; }
#sub .hd-wrap .wrap .hd-sitemap.on span:nth-child(3){width: 25px; height: 4px; border-radius: 10px; rotate:-45deg; translate:0 -14px}
#sub .hd-bg{position: fixed; left: 0; top: 80px; background: rgba(0, 0, 0, 0.9); width: 100%; height: 230px; z-index: 1000005; display: none; border-top: 1px solid rgba(255, 255, 255, 0.3); }

.max-1440{max-width: 1480px; width: 100%; margin: 0 auto; padding: 0 20px; box-sizing: border-box;}
.max-1128{max-width: 1168px; width: 100%; margin: 0 auto; padding: 0 20px; box-sizing: border-box;}
/* sub-content */
.sub-tit {text-align: center; padding-top: 200px; }
.sub-tit span{display: block; color:  #3AC2A1;font-size: 20px;font-weight: 500;line-height: 28.9px; letter-spacing: -0.4px; margin-bottom: 27px;}
.sub-tit p{color: #FFF;font-size: 50px;font-weight: 600; line-height: 42px; }
.speed-ul{ margin: 38px auto 20px;}
.speed-ul > ul{display: flex; align-items:center; justify-content: center;}
.speed-ul > ul > li{margin-right: 8px;}
.speed-ul > ul > li:first-child{margin-right: 10px;}
.speed-ul > ul > li img{position: relative; top: 3px;}
.speed-ul > ul > li {color: rgba(255, 255, 255, 0.60);font-family: 'Suit';font-size: 18px;font-weight: 600;line-height: 27.9px; /* 155% */letter-spacing: -0.36px;}
.speed-ul > ul > li:nth-child(2):after{display: inline-block; content: ''; width: 20px; height: 20px; background: url(../img/sub/speed-arr.png) center no-repeat; margin-left: 11px; margin-right: 1px; position: relative; top: 3px;}
color{color: #3AC2A1 !important;}

.bd-top-box{display: flex; flex-wrap:wrap; justify-content: space-between; }

/* s1 */
.sub-section {position: relative; }


.scroll-icon{position: fixed; right: 3vw; bottom: 4vw; animation: bounce1 .9s linear infinite;}

.sub-section .arti1{position: relative; z-index: 10; min-height:100vh}
.sub-section .arti1 .fixed-bg{position: absolute; left: 0; top: 0; width: 100%; height: 95vh; z-index: 1;  scale:0.6; translate:0 -15%;  border-radius: 30px; overflow: hidden;}
.sub-section .arti1 .fixed-bg img{width: 100%; height: 100%; object-fit:cover;}
.sub-section .arti1 .fixed-bg:before{position: absolute; content: ''; width: 100%; height: 100%; background: rgba(0,0,0,0.4); left: 0; top: 0;}
.sub-section .arti1 .tbx{padding-top: 274px; position: relative; z-index: 10; opacity: 0; translate:0 100px}
.sub-section .arti1 .tbx .p-box{display: flex; flex-direction: column; gap: 58.5px 0; padding-bottom: 112px;}
.sub-section .arti1 .tbx .p-box p{color: #FFF;font-family: 'Suit';font-size: 30px;font-weight: 300;line-height: 45.5px; /* 151.667% */letter-spacing: -0.6px;}
.sub-section .arti1 .tbx .p-box p color{font-weight: 600;}
.sub-section .arti1 .tbx .p-box b{display: block; color: #FFF;font-family: 'Suit';font-size: 40px;font-weight: 600;line-height: 58.5px; /* 146.25% */letter-spacing: -0.8px;}


.s1 .arti2{padding: 153px 0 0px}
.s1 .arti2 > div{}
.s1 .arti2 > div > *{flex:1; }
.s1 .arti2 > div > * h4{color: #FFF;font-family: 'Suit';font-size: 44px;font-weight: 400;line-height: 71px; /* 161.364% */letter-spacing: -0.88px; margin-bottom: 32px;}
.s1 .arti2 > div > .lbx{opacity: 0; translate:0 -100px; filter:blur(5px)}
.s1 .arti2 > div > .lbx .box:not(:last-child){margin-bottom: 83px;}
.s1 .arti2 > div > .lbx .box p{color: #FFF;font-size: 20px;font-weight: 400;line-height: 34.9px; /* 174.5% */letter-spacing: -0.4px; margin-bottom: 79px;}
.s1 .arti2 > div > .rbx {opacity: 0; translate:0 -100px; filter:blur(5px)}
.s1 .arti2 > div > .rbx ul{margin-top: -10px;}
.s1 .arti2 > div > .rbx ul > li:not(:last-child){margin-bottom: 15px;}
.s1 .arti2 > div > .rbx ul > li b{position: relative; display: flex; justify-content: space-between; align-items:center; border-bottom: 1px solid #fff; color: #FFF;font-size: 30px;font-weight: 500; line-height: 52.5px; letter-spacing: -0.6px; padding-bottom: 8px; transition:.3s; cursor: pointer; padding-right: 7px;}
.s1 .arti2 > div > .rbx ul > li b svg{position: relative; rotate:180deg; transition:.3s; top: -4px;}
.s1 .arti2 > div > .rbx ul > li b svg path{transition:.3s;}
.s1 .arti2 > div > .rbx ul > li .cnt{display: none;}
.s1 .arti2 > div > .rbx ul > li:nth-child(1) .cnt{display: block;}

.s1 .arti2 > div > .rbx ul > li .cnt .dot-ul{padding: 31px 0px;}
.s1 .arti2 > div > .rbx ul > li .cnt .dot-ul > li{color: #3AC2A1; font-size: 20px; font-weight: 400;line-height: 34.9px; /* 174.5% */letter-spacing: -0.4px; padding-left: 30px;}
.s1 .arti2 > div > .rbx small{display: block;}
.s1 .arti2 > div > .rbx small ul{margin-top: 48px;}
.s1 .arti2 > div > .rbx small ul > li{list-style:disc;  color: #EE7300; font-size: 14px; font-weight: 500; line-height: 22.5px; letter-spacing: -0.28px;}

.sub-section .arti2 > div > .rbx ul > li.on{
	b{color: #3AC2A1; border-bottom: 1px solid #3AC2A1;}
	svg{rotate:0deg;}
	svg path{stroke:#3AC2A1;}
 }

.s12 {padding-bottom: 260px;}
.s12 .arti2{display: flex; max-width:1200px; width: 100%; margin: 0 auto; border-radius: 30px; background: #fff; gap:152px; padding: 170px 122px; margin-top: 50px;}
.s12 .arti2 .lbx{max-width:490px; width: 100%;}
.s12 .arti2 .rbx .tbx h5{color: #333; font-size: 25px;font-weight: 500;line-height: 45px; /* 180% */letter-spacing: -0.5px; margin-bottom: 54px;}
.s12 .arti2 .rbx .tbx .p-box{display: flex; flex-direction: column;}
.s12 .arti2 .rbx .tbx .p-box p{color: #777;font-size: 20px;font-weight: 400;line-height: 34.9px; /* 174.5% */letter-spacing: -0.4px; margin-bottom: 34.9px; word-break: break-all;}
.s12 .arti2 .rbx .tbx .p-box p br{display: none;}
.s12 .arti2 .rbx .tbx .p-box p:last-child{margin-bottom: 0;}
.s12 .arti2 .rbx .tbx .sign{display: flex; justify-content: flex-end; margin-top: 110px; gap:26px}
.s12 .arti2 .rbx .tbx .sign p{color: #333;font-size: 18px;font-weight: 600;line-height: 27.9px; /* 155% */letter-spacing: -0.36px;}
.s12 .arti2 .rbx .tbx .sign .right{position: relative; align-self:end;}
.s12 .arti2 .rbx .tbx .sign .right svg{width: 120px;}



/* s21 */
.s21{max-width:100%; overflow: hidden;}
.s21 .arti1{}
 .s21 .arti1 .fixed-bg:before{display: none;} 
.s21 .arti1 .tbx{padding-top: 210px;}
.s21 .arti1 .speed-ul{margin-bottom: 67px;}
.s21 .arti1 .flex-box{display: flex;  justify-content: space-between; position: relative; }
.s21 .arti1 .flex-box .p-box{max-width:calc(100% - 650px); gap:0px; padding-bottom: 0; }
.s21 .arti1 .flex-box .p-box h3{color: #FFF;font-size: 44px;font-weight: 600;line-height: 63px; /* 143.182% */letter-spacing: -0.88px; margin-bottom: 30px;}
.s21 .arti1 .flex-box .p-box p{color: #FFF;font-size: 20px;font-weight: 400;line-height: 34.9px; /* 174.5% */letter-spacing: -0.4px; margin-bottom: 35px;}
.s21 .arti1 .flex-box .p-box p:last-child{margin-bottom: 0;}

.s21 .arti1 .flex-box .img-box-roll{flex:1; position: absolute; right: -400px; top: 0; max-width:1000px; overflow: hidden; z-index: 100;}
.s21 .arti1 .flex-box .img-box{display: flex; width: max-content; gap:31px;  animation: roll 40s linear infinite; gap:10px;}

@keyframes roll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* 이미지 세트 두 번 이어붙이기 */
}

.s21-2 .arti-new2{ padding-bottom: 200px;}
.s21-2 .arti-new2 .max-1440{display: flex; flex-wrap:wrap; gap:145px; }
.s21-2 .arti-new2 .max-1440 .lbx{max-width:583px; }
.s21-2 .arti-new2 .max-1440 .rbx{flex:1; display: flex; flex-direction: column; gap:114px;}
.s21-2 .arti-new2 .max-1440 .rbx dl{display: flex; gap:50px;}
.s21-2 .arti-new2 .max-1440 .rbx dl dt{color: #EE7300;font-size: 30px;font-weight: 500;line-height: 45.5px; /* 151.667% */letter-spacing: -0.6px;}
.s21-2 .arti-new2 .max-1440 .rbx dl dd ul{display: flex; flex-direction: column; gap:3px;}
.s21-2 .arti-new2 .max-1440 .rbx dl dd ul li,
.s21-2 .arti-new2 .max-1440 .rbx dl dd p {color:#FFF;font-size: 20px;font-weight: 400;line-height: 34.9px; /* 174.5% */letter-spacing: -0.4px;}
.s21-2 .arti-new2 .max-1440 .rbx dl dd b{display: block; color: #EE7300;font-size: 20px;font-weight: 400;line-height: 34.9px; /* 174.5% */letter-spacing: -0.4px; margin-top: 41px;}

/* .s21 .arti1 .flex-box .img-box{position: relative; max-width:550px; width: 100%; margin-top: -110px;}
.s21 .arti1 .flex-box .img-box figure{position: absolute; right: -48px; top: 0;	 opacity: 0; filter:blur(5px);}
.s21 .arti1 .flex-box .img-box figure.fig1{top: 77px; transition:.6s .6s; translate:0 -50px; scale:0.8}
.s21 .arti1 .flex-box .img-box figure.fig2{right: 0px; transition:.6s 1.2s;  translate:80px -40px; rotate:-15deg;}

*/
/* .s21 .arti1 .flex-box .img-box figure.fig3{top: 125px; right: 37px; translate:-80px -40px; rotate:15deg; transition:.6s 1.8s; }
.s21 .arti1 .flex-box .img-box.on{
	figure{opacity: 1; filter:blur(0px); translate:0px 0px; scale:1; rotate:0deg;}
}  */
.s21 .arti2{padding-top: 180px;}
.s21 .arti2 .center-box{position: relative; display: flex; flex-wrap:wrap; max-width:700px; margin: 0 auto; z-index: 10; }
.s21 .arti2 .center-box > *{width: 344px;}
.s21 .arti2 .center-box > * > figure{position: relative; overflow: hidden; opacity: 0; }
.s21 .arti2 .center-box > * > figure span{position: absolute; content: ''; display: block; width: 110%; height: 110%; background: #333;	left: -10px; bottom: 0; transform-origin:left bottom; rotate:0deg;}
.s21 .arti2 .center-box > .ibx2 > figure span{transform-origin:right top; rotate:0deg; bottom: auto; top: 0px;}
.s21 .arti2 .center-box > .tbx h5{color: #EE7300; font-size: 30px; font-weight: 500; line-height: 52.5px;  letter-spacing: -0.6px; margin-bottom: 4px;}
.s21 .arti2 .center-box > .tbx .p-box {display: flex; flex-direction: column; gap:3px;}
.s21 .arti2 .center-box > .tbx .p-box p{color: #FFF; font-size: 20px; font-weight: 400; line-height: 28.9px;  letter-spacing: -0.4px;}
.s21 .arti2 .center-box > .tbx b{display: block; color: #EE7300; font-size: 20px; font-weight: 400; line-height: 28.9px; letter-spacing: -0.4px; margin-top: 10px; margin-bottom: 8px;}
.s21 .arti2 .center-box > .tbx .p-box2{display: flex; flex-direction: column; gap:8px;}
.s21 .arti2 .center-box > .tbx .p-box2 p{color: #FFF; font-size: 20px; font-weight: 400; line-height: 28.9px; letter-spacing: -0.4px;}
.s21 .arti2 .center-box > .tbx1{align-self: end; padding-bottom: 48.5px; padding-left: 6px; translate:0 10%; opacity: 0;}
.s21 .arti2 .center-box > .tbx2{padding: 44px 0 0 43px; translate:0 -10%; opacity: 0;}
.s21 .arti2 .center-box > .tbx2 h5{margin-bottom: 16px;}
.s21 .arti2 .center-box > .tbx2 .p-box{gap:13px;}
.s21 .arti2 .center-box > .tbx2 p{width: 150%;}
.s21 .arti2 .center-box big{position: absolute; left: 50%; top: 50%; translate:-50% -50%; margin-top: -80px; color: rgba(255, 255, 255, 0.25);font-size: 174px;font-weight: 800;line-height: 28.9px; letter-spacing: -150px; /* letter-spacing: -3.48px */	width: 204%; margin-left: -80px; z-index: -1; text-align: center; opacity: 0;}




.s21-2{padding-bottom: 281px;}
.s21-2 .arti3{position: relative;  height: 300dvh; }
.s21-2 .arti3 .years-controll{position: sticky; top: 50%;  display: flex; align-items:center;     justify-content: center; padding-left: 146px; }
.s21-2 .arti3 .years-controll > *{color: #3AC2A1; font-family: 'Arita buri';font-size: 70px;font-weight: 500;line-height: 63px; letter-spacing: -1.4px;}
.s21-2 .arti3 .years-controll > h3{opacity: 0;}
.s21-2 .arti3 .years-controll > .line{height: 1px; max-width:428px; width: 0%; background: #3AC2A1; margin-left: 30px; margin-right: 28px;}
.s21-2 .arti3 .years-controll > h4 {opacity: 0;}
.s21-2 .arti4 .small-tit{display: block; color: #EE7300; font-size: 30px; font-weight: 500;line-height: 52.5px; letter-spacing: -0.6px; margin-bottom: 28px;}
.s21-2 .arti4 .box > b{display: block; color: #3AC2A1;font-size: 70px;font-weight: 500;line-height: 63px; /* 90% */letter-spacing: -1.4px; border-bottom: 1px solid rgba(255, 255, 255, 0.50); padding-bottom: 50px;}
.s21-2 .arti4 .box > b svg{transition:.3s; display: none;}
.s21-2 .arti4 .box:not(.box1) > b{padding-top: 57px;}
.s21-2 .arti4 .box > .cnt{position: relative; border-bottom: 1px solid rgba(255, 255, 255, 0.50); }
.s21-2 .arti4 .box > .cnt ul {padding: 64px 0; display: flex; flex-direction: column; gap:4px;}
.s21-2 .arti4 .box > .cnt ul > li{display: flex; align-items:center; gap:40px;}
.s21-2 .arti4 .box > .cnt ul > li span{width: 282px; color: #3AC2A1;text-align: right;font-size: 25px;font-weight: 500;line-height: 45px; /* 180% */letter-spacing: -0.5px;}
.s21-2 .arti4 .box > .cnt ul > li .tbx{position: relative; flex:1; }
.s21-2 .arti4 .box > .cnt ul > li .tbx p{color: #FFF;font-size: 20px;font-weight: 400;line-height: 34.9px; /* 174.5% */letter-spacing: -0.4px;}

.s21-2 .arti4 .box > .cnt figure{position: absolute; right: 20px; top: 50%; translate:0 -50%; z-index: 10; width: 302px; display: flex; align-items:center; justify-content: start; justify-content: flex-end;}

.s21-2 .arti4 .box1 > .cnt{display: block;}
/* .s21-2 .arti4 .box.on > b{color: #3AC2A1;	}
.s21-2 .arti4 .box.on > b svg{rotate:-180deg} */

.s24{}
.s24 .arti1{}
.s24 .arti1{height: auto;}
/* .s24 .arti1 .fixed-bg:before{display: none;} */
.s24 .arti1 .fixed-bg img{width: 100%; height: 100%; object-fit:cover; }
.s24 .arti1 .tbx .flex-box{display: flex; justify-content: space-between; padding-bottom: 150px;}

.s24 .arti1 .tbx{padding-top: 150px;  display: block;}
.s24 .arti1 .tbx .p-box{gap:0px; padding-bottom: 0; max-width:760px;}
.s24 .arti1 .tbx .p-box h3{color: #FFF;font-size: 44px;font-weight: 600;line-height: 63px; /* 143.182% */letter-spacing: -0.88px; margin-bottom: 40px;}
.s24 .arti1 .tbx .p-box b{display: block; color: #3AC2A1;font-size: 20px;font-weight: 400;line-height: 34.9px; /* 174.5% */letter-spacing: -0.4px; margin-bottom: 40px;}
.s24 .arti1 .tbx .p-box p{color: #FFF;font-size: 20px;font-weight: 400;line-height: 34.9px; /* 174.5% */letter-spacing: -0.4px; margin-bottom: 35px;}
.s24 .arti1 .tbx .p-box p:last-child{margin-bottom: 0;}

.s24 .arti1 .tbx .flex-box .img-box{display: flex; flex-direction: column; gap:60px; position: absolute; right: 20px; top: 0; translate:0 20%;}

.s24-new2{margin-top: -300px; position: relative; z-index: 10;}

.s24-new2 .max-1440{justify-content: space-between; position: relative; padding-bottom: 250px;}
.s24-new2 .max-1440 .lbx{max-width:704px; 	position: absolute; left: 0; top: 0; width: 100%; height: 100vh;} 
.s24-new2 .max-1440 .lbx .box{transition:.3s; position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items:start; justify-content: center; height: 100%;}
.s24-new2 .max-1440 .lbx .box b{display: block; color: #3AC2A1;font-size: 30px;font-weight: 500;line-height: 45.5px; /* 151.667% */letter-spacing: -0.6px; margin-bottom: 30px;}
.s24-new2 .max-1440 .lbx .box .p-box{display: flex; flex-direction: column;}
.s24-new2 .max-1440 .lbx .box .p-box p{color:  #FFF;font-size: 18px;font-weight: 400;line-height: 32px; /* 174.5% */letter-spacing: -0.4px; margin-bottom: 20px;}
.s24-new2 .max-1440 .lbx .box .p-box p:last-child{margin-bottom: 0;}
.s24-new2 .max-1440 .rbx{width: 100%; width: 100%; translate: 0 0; position: relative;top: 0; display: flex; justify-content: flex-end; margin-top: -220vh; opacity: 0;}
.s24-new2 .max-1440 .rbx .img-box{max-width:600px;  position: relative; background: url(../img/sub/fill-bg.png) center top no-repeat; width: 100%; display: flex; gap:60px; flex-direction: column; align-items: center;	padding: 60px 70px; overflow: hidden;}
.s24-new2 .max-1440 .rbx .img-box:before{position: absolute; content: ''; width: 70px; height: 100%; background: url(../img/sub/fill-dot.png) center top repeat-y; left: 0; top: 34px; }
.s24-new2 .max-1440 .rbx .img-box:after{position: absolute; content: ''; width: 70px; height: 100%; background: url(../img/sub/fill-dot.png) center top repeat-y; right: 0; top: 34px; }
.s24-new2 .max-1440 .rbx .img-box .box{display: flex; flex-direction: column; gap:60px}

.s24-2{margin-top: -50vh; padding-bottom: 160px;}
.s24-2 .arti2 {height: 100dvh; overflow: hidden;}
.s24-2 .arti2 > *{height: 100dvh; position: relative; }
.s24-2 .arti2 .box{position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: space-between; opacity: 0;}
.s24-2 .arti2 .box .lbx {align-self:center; translate:0 30%; opacity: 0; filter:blur(5px); }
.s24-2 .arti2 .box .lbx b{display: block; color: #3AC2A1; font-size: 30px; font-weight: 500; line-height: 52.5px; letter-spacing: -0.6px; margin-bottom: 50px;}
.s24-2 .arti2 .box .lbx p{color: #FFF;font-size: 20px;font-weight: 400;line-height: 28.9px; letter-spacing: -0.4px; margin-bottom: 29px;}
.s24-2 .arti2 .box .lbx p:last-child{margin-bottom: 0;}
.s24-2 .arti2 .box .rbx{ }
.s24-2 .arti2 .box .img-box{display: flex; flex-direction: column; gap:60px; translate:0 30%}

/* s22 */
.sub-section .arti1 .video {position:relative;  overflow:hidden; scale:1;  max-width:1149px; aspect-ratio: 16 / 9;  margin: 0 auto; margin-top: 80px; border-radius: 30px; opacity: 0; transform: translateY(50px);}
.sub-section .arti1 .video iframe {width:100%;height:100%; border:0;}

.s3 .arti1 .tbx{padding-top: 100px;}


.s3 .arti1 .fixed-bg img{width: 100%; height: 100%; object-fit:cover; }

.s3 .arti1 .tbx .p-box{gap:0px; padding-bottom: 0;}
.s3 .arti1 .tbx .p-box h3{color: #FFF;font-size: 44px;font-weight: 600;line-height: 63px; /* 143.182% */letter-spacing: -0.88px; margin-bottom: 20px;}
.s3 .arti1 .tbx .p-box > b{display: block; color: #3AC2A1;font-size: 20px;font-weight: 400;line-height: 34.9px; /* 174.5% */letter-spacing: -0.4px; margin-bottom: 20px;}
.s3 .arti1 .tbx .p-box > p{color: #FFF;font-size: 20px;font-weight: 400;line-height: 34.9px; /* 174.5% */letter-spacing: -0.4px; margin-bottom: 35px;}
.s3 .arti1 .tbx .p-box > p:last-of-type{margin-bottom: 0;}
.s3 .arti1 .tbx .p-box > span{display: block; color: #3AC2A1;font-size: 20px;font-weight: 400;line-height: 34.9px; /* 174.5% */letter-spacing: -0.4px; margin-top: 20px;}

/* s30 */
.s30 .speed-ul > ul > li:nth-child(2):after{display: none;}

/* s31 */
.s31 {}
.s31 .arti1 .tbx .p-box{}
.s31 .arti1 .tbx .p-box h3{color: #FFF;font-size: 26px;font-weight: 600;line-height: 1.5; /* 143.182% */letter-spacing: -0.88px; margin-bottom: 20px;}
.s31 .arti1 .tbx .p-box > span{display: block; color: #3AC2A1;font-size: 28px;font-weight: 600;line-height: 1.5; /* 174.5% */letter-spacing: -0.4px; margin-bottom: 20px;}
.s31 .arti1 .tbx .p-box > p{color: #FFF;font-size: 20px;font-weight: 400;line-height: 34.9px; /* 174.5% */letter-spacing: -0.4px; margin-bottom: 35px;}
.s31 .arti1 .tbx .p-box > p:last-of-type{margin-bottom: 0;}
.s31-2{padding-bottom: 260px;	max-width:1920px; margin: 0 auto; position: relative; z-index: 1; }
.s31-0{margin-top: -400px;}

.s31-2 .arti2{position: relative;  max-width:1920px; margin: 0 auto; margin-top: 150px; z-index: 1;} 
.s31-2 .arti2:before{position: absolute; content: ''; width: 400%; height: 100%; background: #fff; left: -200%; top: 0; z-index: -1;}


.s31-2 .arti2 .full-box{display: flex; height: 100dvh; /* width: max-content;  */}
.s31-2 .arti2 .full-box .box{display: flex; height: 100%; width: 100vw;  }
.s31-2 .arti2 .full-box .box:not(:first-child){scale:0.9 1}
.s31-2 .arti2 .full-box .box:first-child{opacity:0; translate:0 100px;}
.s31-2 .arti2 .full-box .box .lbx{width: 47.1%; background: #fff;  }
/* .s31-2 .arti2 .full-box .box2 .lbx{background: #DFCD83;}
.s31-2 .arti2 .full-box .box3 .lbx{background: #EEB0D1;}
.s31-2 .arti2 .full-box .box4 .lbx{background: #97BFFF;} */
.s31-2 .arti2 .full-box .box .lbx{position: relative; }
.s31-2 .arti2 .full-box .box .lbx .tbx{position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width:636px; padding-left: 140px; opacity: 0; display: flex; flex-direction: column;     justify-content: center;}
.s31-2 .arti2 .full-box .box .lbx h4{color: #000;font-size: 35px;font-weight: 700;line-height: 45.5px; /* 151.667% */letter-spacing: -0.6px; margin-bottom: 31px;}
.s31-2 .arti2 .full-box .box .lbx p{color: #333;font-size: 20px;font-weight: 400;line-height: 34.9px; /* 174.5% */letter-spacing: -0.4px; word-break: break-all; margin-bottom: 35px;	}
.s31-2 .arti2 .full-box .box .lbx p:last-of-type{margin-bottom: 0;}
.s31-2 .arti2 .full-box .box .lbx span{display: block; color: #333;font-size: 15px;font-style: normal;font-weight: 400;line-height: 19.9px; /* 132.667% */letter-spacing: -0.3px; margin-top: 20px;}

.s31-2 .arti2 .full-box .box .lbx .tbx{opacity: 0; translate:0 50px}


.s31-2 .arti2 .full-box .box .rbx{flex:1;}
.s31-2 .arti2 .full-box .box .rbx figure{overflow: hidden; height: 100%;}
.s31-2 .arti2 .full-box .box .rbx figure img{width: calc(100% + 2px); height: calc(100% + 2px); object-fit:cover; margin-left: -1px; margin-right: -1px;}

.s31-2 .arti3{margin-top: 150px;}
.s31-2 .arti3 ul{display: flex; justify-content: center;}
.s31-2 .arti3 ul > li{display: flex; }
.s31-2 .arti3 ul > li > a{position: relative; color: #FFF; text-align: center;font-size: 20px;font-weight: 500;line-height: 28.9px; /* 144.5% */letter-spacing: -0.4px; transition:.3s;}
.s31-2 .arti3 ul > li:not(:last-child):after{position: relative; top: 5px; display: block; content: ''; width: 2px; height: 18px; background: #fff; margin: 0 33px;}
.s31-2 .arti3 ul > li > a:after{position: absolute; content: ''; width: 10px; height: 10px; border-radius: 50%; background: #3AC2A1; left: 50%; top: -21px; margin-left: -5px; opacity: 0;}
.s31-2 .arti3 ul > li.on > a{color: #3AC2A1;}
.s31-2 .arti3 ul > li.on > a:after{opacity: 1;}

/* s41 */
@media (min-height: 1000px) {
	.s41{height: 120vh !important;}
}

.s41{height: 1200px;}


.s41 .arti1 .fixed-bg:before{display: none;}

.s41 .arti1 .fixed-bg img{width: 100%; height: 100%; object-fit:cover; }

.s41 .arti1 .tbx{padding-top: 202px;}
.s41 .arti1 .cnt-box h4{color: #FFF;font-size: 44px;font-weight: 600;line-height: 63px; /* 143.182% */letter-spacing: -0.88px;}
.sub-section2.s41{margin-top: -1100px;}

.s41 .arti1 .tbx{position: relative; z-index: 1000;}
.s41 .arti1 .cnt-box .s4-tab{display: flex; align-items:center; margin-top: 71px;}
.s41 .arti1 .cnt-box .s4-tab > li{display: flex; }
.s41 .arti1 .cnt-box .s4-tab > li > a{position: relative; color: #FFF; text-align: center;font-size: 20px;font-weight: 500;line-height: 28.9px; /* 144.5% */letter-spacing: -0.4px; transition:.3s;}
.s41 .arti1 .cnt-box .s4-tab > li:not(:last-child):after{position: relative; top: 5px; display: block; content: ''; width: 2px; height: 18px; background: #fff; margin: 0 33px;}
.s41 .arti1 .cnt-box .s4-tab > li > a:after{position: absolute; content: ''; width: 10px; height: 10px; border-radius: 50%; background: #3AC2A1; left: 50%; top: -21px; margin-left: -5px; opacity: 0;}
.s41 .arti1 .cnt-box .s4-tab > li.on > a{color: #3AC2A1;}
.s41 .arti1 .cnt-box .s4-tab > li.on > a:after{opacity: 1;}
.s41 .arti2{ margin-top: -800px; width: 530px; margin-left: auto; margin-right: 10vw;}
.book-wrap{ padding-bottom: 40px; margin-top: 0px; max-width:530px;  position: relative; z-index: 100; opacity: 0; cursor: pointer;}



#book {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  perspective: 1000px;
  transform: translateZ(0);
  will-change: transform;
}

#book .page {
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transform: translateZ(0);
}

#book{width:100%;height:750px; margin: 0 auto;}
#book .turn-page{background-color:white;}
#book .cover{position: relative; background: url(../img/sub/book-cover.png) center / 105% 115% no-repeat; text-align: center; align-content:center;}
#book .cover .txt span{display: block; color: #333;font-size: 18px;font-weight: 600;line-height: 27.9px; letter-spacing: -0.36px;}
#book .cover .txt i{display: block; width: 1px; height: 36px; background: #000; margin: 39px auto;} 
#book .cover .txt h4{color: #333;text-align: center;font-size: 38px;font-weight: 500;line-height: 1.5; /* 161.364% */letter-spacing: -0.88px;}
#book .cover .btn {position: absolute; bottom: 40px; right: 50px; display: flex; align-items: center;}
#book .cover .btn p {font-size: 14px; font-weight: 500; line-height: 1.6em; letter-spacing: -0.28px; color: #000; margin-right: 11px;}
#book .loader{background-image:url(loader.gif);width:24px;height:24px;display:block;position:absolute;top:238px;left:188px;}
#book .data {display: block; width: 100%; height: 100%; align-content:center; padding: 0 3vw; box-sizing: border-box;}
#book .data h4{color:#333;text-align: center;font-size: 22px;font-weight: 500;line-height: 1.5; /* 180% */letter-spacing: -0.5px; margin-bottom: 50px;}
#book .data .center-box{display: block; width: 100%; height: 100%; align-content:center; }
#book .data ul{padding-left: 0px; padding-right: 0px; display: flex; flex-direction: column; gap:28px; }
#book .data ul > li{ position: relative;color:#333;font-size: 18px;font-weight: 400;line-height: 1.5; /* 174.5% */letter-spacing: -0.4px; padding-left: 14px; margin-bottom: 15px;}
#book .data ul > li:last-child{margin-bottom: 0;}
#book .data ul > li:before{position: absolute; display: block; content: ''; left: 0; top: 12px; width: 6px; height: 6px; border-radius: 50%; background: #333;}
#book .data ul > li span{display: block; color: #23977B;font-size: 15px;font-weight: 400;line-height: 19.9px; /* 132.667% */letter-spacing: -0.3px; margin-top: 10px;}
#controls input, #controls label{}
#book .odd{position: relative; background: url(../img/sub/book-left.png) center / 107% 117%  no-repeat;   box-shadow: inset -20px 0 30px rgba(0,0,0,0.24); }

#book .even{position: relative; background: url(../img/sub/book-right.png) center / 107% 117% no-repeat; box-shadow: inset 20px 0 30px rgba(0,0,0,0.24); }
#book .even:after{position: absolute; content: ''; width: 55px; height: 55px; background: url(../img/sub/book-arr.png) center no-repeat; right: 20px; bottom: 20px;}
#book .last-page.even:after{display: none;}


.book-pop-bg{position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 150000;	 display: none;}
.book-pop-wrap{position: fixed; left: 50%; top: 50%; translate:-50% -50%; width: 100%; height: 100%; z-index: 150001;	 max-width:1100px; display: flex; align-items:center; justify-content: center; box-sizing: border-box; padding-top: 80px; display: none;}  
.book-pop-wrap .close{position: absolute; right: -50px; top: 50%; cursor: pointer;} 


/* s41 */
.s41-2{}
.s41-2 .arti1 { }
.s42-2 .arti2{margin-top: -700px; position: relative; z-index: 10; opacity: 0; translate:0 50px;  width: 100%;} 
.s42-2 .arti2 .cnt {border-top: 1px solid #fff; border-bottom: 1px solid #fff;}
.s42-2 .arti2 .cnt > li{border-bottom: 1px solid #999; cursor: pointer;		}
.s42-2 .arti2 .cnt > li .flex{position: relative; display: flex; height: 98px; align-items:center; }
.s42-2 .arti2 .cnt > li .num{align-self:end; width: 136px; line-height: 0; padding-left: 5px;}
.s42-2 .arti2 .cnt > li .num svg path{transition:.3s;}
.s42-2 .arti2 .cnt > li .figbox{ width: 315px; position: relative;	height: 100%; align-content:center;}
.s42-2 .arti2 .cnt > li .figbox:after{position: absolute; content: ''; width: 1px; height: 42px; background: #fff; right: 2px; bottom: 0; transition:.3s;}
.s42-2 .arti2 .cnt > li .figbox p{color: #FFF; font-family: 'Arita buri';  font-size: 25px; font-weight: 500; line-height: 45px; letter-spacing: -0.5px; text-align: center; padding-right: 40px; transition:.3s;}
.s42-2 .arti2 .cnt > li .figbox figure{position: absolute; left: 0; top: 0px; pointer-events: none; opacity: 0;	transition:.3s; scale:0.8; } 
.s42-2 .arti2 .cnt > li .figbox figure img{}
.s42-2 .arti2 .cnt > li .tbx{flex:1; padding-left: 30px;}
.s42-2 .arti2 .cnt > li .tbx p{color: #FFF; font-family: 'Arita buri';font-size: 25px;font-weight: 500;line-height: 45px; letter-spacing: -0.5px;}
.s42-2 .arti2 .cnt > li .open{padding-left: 451px; border-top: 1px solid #666; display: none;}
.s42-2 .arti2 .cnt > li .open p{color: #FFF;font-size: 20px;font-weight: 400;line-height: 28.9px; letter-spacing: -0.4px; padding-left: 30px; padding-top: 24px; padding-bottom: 77px;}

.s42-2{height: auto; padding-bottom: 250px;}
.s42-2 .arti2 .cnt > li.on{
	.num svg path{fill:#EE7300}
	.figbox p{opacity: 0;}
	.figbox figure{opacity: 1; display: block; top: 20px; scale:1;}
	.figbox:after{height: 0px;}
}


.bo-wrap{}
.bd-top-bg{margin-bottom: 130px;}
.bd-top-bg .wrap{max-width:1480px; margin: 0 auto; width: 100%; }
.bd-top-bg{height: 415px; display: flex; flex-direction: column; justify-content: flex-end; position: relative; background: url(../img/sub/simbol.png) right top no-repeat;}
.bd-top-bg:after{position: absolute; content: ''; width: 200%; height: 1px; background: rgba(0, 0, 0, 0.15); left: -50%; bottom: 0;}
.bd-top-bg h4{color: #333;font-size: 44px;font-weight: 600;line-height: 63px; /* 143.182% */letter-spacing: -0.88px; margin-bottom: 89px;} 
.bd-top-bg .bd-nav{display: flex; gap:57px; }
.bd-top-bg .bd-nav > li > a{position: relative; color: #666;font-size: 20px;font-weight: 400;line-height: 35px; /* 175% */letter-spacing: -0.4px; transition:.3s; padding-bottom: 11px;}
.bd-top-bg .bd-nav > li > a:after{position: absolute; content: ''; width: 100%; height: 3px; background: #EE7300; left: 50%; bottom: 0; width: 0; transition:.3s; }

.bd-top-bg .bd-nav > li.current{
> a{color: #EE7300;}
> a:after{width: 100%; left: 0;}
} 
.bd-top-bg .bd-nav > li:hover{
> a{color: #EE7300;}
> a:after{width: 100%; left: 0;}
} 

.bd-flex{display: flex; max-width:1480px; margin: 0 auto; width: 100%;;}
.bd-flex .bd-left{ width: 280px;}
.bd-flex .bd-left h6{color: #333;font-size: 30px;font-weight: 700;line-height: 45.5px; /* 151.667% */letter-spacing: -0.6px; padding: 0 10px 28px;border-bottom: 3px solid #333;}
.bd-flex .bd-left .bd-lnb{margin-top: 10px;}
.bd-flex .bd-left .bd-lnb > ul > li > a{position: relative; display: flex; height: 65px; color: #333; font-size: 20px; font-weight: 500; line-height: 28.9px; /* 144.5% */ letter-spacing: -0.4px; align-items:center; padding: 0 10px; transition:.3s; border-bottom: 1px solid #333);}
.bd-flex .bd-left .bd-lnb > ul > li > a:after,
.bd-flex .bd-left .bd-lnb > ul > li > a:before{position: absolute; content: ''; width: 8px; height: 100%; background: url(../img/sub/slnb-arr.png) center no-repeat; right: 6px; top: 0; transition:.3s;}
.bd-flex .bd-left .bd-lnb > ul > li > a:after{background: url(../img/sub/slnb-arr2.png) center no-repeat; opacity: 0;}

.bd-flex .bd-left .bd-lnb .dep4 > ul{display: flex; flex-direction: column; gap:6px; padding: 25px 14px 40px;}
.bd-flex .bd-left .bd-lnb .dep4 > ul > li > a{position: relative; color: #777;font-size: 15px;font-weight: 400;line-height: 19.9px; /* 132.667% */letter-spacing: -0.3px; transition:.3s;}
.bd-flex .bd-left .bd-lnb .dep4 > ul > li > a:before{content: '·'; }
.bd-flex .bd-left .bd-lnb .dep4 > ul > li:hover > a,
.bd-flex .bd-left .bd-lnb li.current .dep4 > ul > li.current > a{color: #EE7300; font-weight: 500;}



.bd-flex .bd-left .bd-lnb > ul > li.current{
	> a{background: #EE7300; color: #fff; padding: 0 20px; border-bottom: 1px solid #EE7300;}
	> a:before{opacity: 0; right: 19px;}
	> a:after{opacity: 1; right: 19px;}
}
.bd-flex .bd-left .bd-lnb > ul > li:hover{
	> a{background: #EE7300; color: #fff; padding: 0 20px; border-bottom: 1px solid #EE7300;}
	> a:before{opacity: 0; right: 19px;}
	> a:after{opacity: 1; right: 19px;}
}

.bd-flex .bd-cnt{padding-left: 98px; padding-bottom: 270px; width: calc(100% - 280px);  box-sizing: border-box;}

.s5-board-view .s5-view-tit{color:#333;font-size: 30px;font-weight: 500;line-height: 45.5px; /* 151.667% */letter-spacing: -0.6px; padding-bottom: 16px; border-bottom: 3px solid #333; padding-top: 10px; margin-bottom: 55px;}
.s5-board-view .s5-view-slider{display: flex;     align-items: flex-start;}
.s5-board-view .s5-view-slider .big-slide-wrap{width: calc(100% - 227px); padding-right: 49px; box-sizing: border-box;}
.s5-board-view .s5-view-slider .thum-slide-wrap {width: 227px;; background: #F4F4F4; padding: 15px 18px;}
.s5-board-view .s5-view-slider .thum-slide-wrap .items {background: #fff; border-radius: 10px; margin-bottom: 19px;}
.s5-board-view .s5-view-slider .thum-slide-wrap .items figure{display: flex; align-items:center; justify-content: center;}

.s5-board-view .slick-arrow{width: 100%; border: none; background: none; font-size: 40px;}

.s5-view-txt{display: flex;border-top: 1px solid rgba(0, 0, 0, 0.20); border-bottom: 3px solid #333; padding-bottom: 115px; padding-top: 30px; margin-top: 50px;}
.s5-view-txt .tbx{width: calc(100% - 336px); padding-right: 20px; box-sizing: border-box;}
.s5-view-txt .tbx ul > li{display: flex; flex-wrap:wrap; color: #777;font-size: 20px;font-weight: 400;line-height: 34.9px; /* 174.5% */letter-spacing: -0.4px;}
.s5-view-txt .tbx ul > li span{width: 130px; color: #333; font-weight: 600;}
.s5-view-txt .tbx ul > li p{flex:1; }

.s5-view-txt .box{align-self:end; border-radius: 10px; background: #F4F4F4; padding: 11px 23px; width: 336px; display: flex; flex-direction: column; }
.s5-view-txt .box b{color: #333;font-size: 14px;font-weight: 700;line-height: 19.9px; /* 142.143% */letter-spacing: -0.28px;}
.s5-view-txt .box p{color: #777;font-size: 12px;font-weight: 500;line-height: 22.5px; /* 187.5% */letter-spacing: -0.24px;}
.s5-view-txt .box figure{margin-left: auto; margin-top: 6px;}