@charset "utf-8";

/* main */
#main{padding-top: 145px;}
#main.board{padding-top: 215px; padding-bottom: 160px;}

@media all and (max-width:1280px){
	#main.board{padding-top: 185px; padding-bottom: 140px;}
}
@media all and (max-width:1024px){
	#main{padding-top: 105px;}
	#main.board{padding-top: 165px; padding-bottom: 120px;}
}
@media all and (max-width:768px){
	#main.board{padding-top: 145px; padding-bottom: 110px;}
}
@media all and (max-width:500px){
	#main.board{padding-bottom: 100px;}
}

/* mVisual */
@keyframes sc1 {
  0%{width: 0%; height: 0%;}
  100%{width: 100%; height: 100%;}
}
@keyframes sc2 {
  0%{width: 2%; height: 2%;}
  100%{width: 105%; height: 105%;}
}

#mVisual{position: relative; height: 40vw; max-width: 1920px; margin-left: auto; margin-right: auto; max-height: 768px; background-color: #fff; z-index: 2;}
#mVisual .inner{height: 100%;}
#mVisual .inner .txt{width: 50%; height: 100%; display: flex; flex-direction: column; justify-content: center;}
#mVisual .inner .txt .h4{font-size: 28px; font-weight: 600; color: #666;}
#mVisual .inner .txt h3{font-size: 48px; color: #000000; line-height: 1.3em; margin-top: 15px;}
#mVisual .inner .txt h3 span{color:var(--maincolor);}
#mVisual .inner .txt p{color: #666666; font-weight: 600; font-size: 20px; line-height: 1.6em; margin-top: 27px;}
#mVisual .inner .txt .s_btn{margin-top: 55px;}
#mVisual .visual_box{width: 50%; position: absolute; right: 0; top: 0; height: 100%; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(4, 1fr); grid-gap:1px; background-color: #eeeff1; border-left: 1px solid #eeeff1; border-bottom: 1px solid #eeeff1;}
#mVisual .visual_box .v_box{background-color: #fff; display: grid;}
#mVisual .visual_box .v_box .swiper-container{overflow: hidden; height: 100%;}
#mVisual .visual_box .v_box.box1{position: relative;}
#mVisual .visual_box .v_box.box1 .img{width: 100%; height: 100%; }
#mVisual .visual_box .v_box.box1 .img.img1{background : url(/images/main/mv_img1.webp) no-repeat center center / cover;}
#mVisual .visual_box .v_box.box1 .img.img2{background : url(/images/main/mv_img1_1.webp) no-repeat center center / cover;}
#mVisual .visual_box .v_box.box1::after{content: ''; width: 31.42%; height: 31.42%; display: block; background: url(/images/main/mv_img1_icon.webp) no-repeat center center / cover; position: absolute; top: 50%; transform: translateY(-50%); left: -15.71%; border-radius: 100%; box-shadow: 1px 3px 12px rgba(0,0,0,0.1); z-index: 9;}
#mVisual .visual_box .v_box.box2{}
#mVisual .visual_box .v_box.box2 .img{width: 100%; height: 100%; }
#mVisual .visual_box .v_box.box2 .img.img1{background : url(/images/main/mv_img2.webp) no-repeat center center / cover;}
#mVisual .visual_box .v_box.box2 .img.img2{background : url(/images/main/mv_img2_1.webp) no-repeat center center / cover;}
#mVisual .visual_box .v_box.box3{}
#mVisual .visual_box .v_box.box4{}
#mVisual .visual_box .v_box.box4 .img{width: 100%; height: 100%; }
#mVisual .visual_box .v_box.box4 .img.img1{background : url(/images/main/mv_img4.webp) no-repeat center center / cover;}
#mVisual .visual_box .v_box.box4 .img.img2{background : url(/images/main/mv_img4_1.webp) no-repeat center center / cover;}
#mVisual .visual_box .v_box.box5{
  grid-column: 5 / 5;
  grid-row: 1 / 3;
}
#mVisual .visual_box .v_box.box5 .img{width: 100%; height: 100%; }
#mVisual .visual_box .v_box.box5 .img.img1{background : url(/images/main/mv_img5.webp) no-repeat center center / cover;}
#mVisual .visual_box .v_box.box5 .img.img2{background : url(/images/main/mv_img5_1.webp) no-repeat center center / cover;}
#mVisual .visual_box .v_box.box6{}
#mVisual .visual_box .v_box.box7{
  grid-column: 2 / 4;
  grid-row: 2 / 4;
  position: relative;
  z-index: 2;
}
#mVisual .visual_box .v_box.box7::after{content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 105%; height: 105%; background: url(/images/main/mv_img7_frame.webp) no-repeat center center / 100%; display: block; animation: 100%; animation: sc2 .5s backwards; animation-delay: .5s;}
#mVisual .visual_box .v_box.box7 .video{width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}
#mVisual .visual_box .v_box.box7 .video video{width: 100%; height: 100%; animation: sc1 .5s backwards; animation-delay: .5s;}
#mVisual .visual_box .v_box.box8{}
#mVisual .visual_box .v_box.box9{}
#mVisual .visual_box .v_box.box10{position: relative;}
#mVisual .visual_box .v_box.box10::after{content: ''; width: 21.47%; height: 21.47%; display: block; background: url(/images/main/mv_img10_icon_240911.webp) no-repeat center center / cover; position: absolute; top: -10.735%; right: -10.735%; border-radius: 100%; box-shadow: 1px 3px 12px rgba(0,0,0,0.1); z-index: 2}
#mVisual .visual_box .v_box.box10 .img{width: 100%; height: 100%; }
#mVisual .visual_box .v_box.box10 .img.img1{background : url(/images/main/mv_img10.webp) no-repeat center center / cover;}
#mVisual .visual_box .v_box.box10 .img.img2{background : url(/images/main/mv_img10_1.webp) no-repeat center center / cover;}
#mVisual .visual_box .v_box.box11{}
#mVisual .visual_box .v_box.box12{}
#mVisual .visual_box .v_box.box12 .img{width: 100%; height: 100%; }
#mVisual .visual_box .v_box.box12 .img.img1{background : url(/images/main/mv_img12.webp) no-repeat center center / cover;}
#mVisual .visual_box .v_box.box12 .img.img2{background : url(/images/main/mv_img12_1.webp) no-repeat center center / cover;}
#mVisual .visual_box .v_box.box13{}
#mVisual .visual_box .v_box.box13 .img{width: 100%; height: 100%; }
#mVisual .visual_box .v_box.box13 .img.img1{background : url(/images/main/mv_img13.webp) no-repeat center center / cover;}
#mVisual .visual_box .v_box.box13 .img.img2{background : url(/images/main/mv_img13_1.webp) no-repeat center center / cover;}
#mVisual .visual_box .v_box.box14{}
#mVisual .visual_box .v_box.box15{}
#mVisual .visual_box .v_box.box15 .img{width: 100%; height: 100%; }
#mVisual .visual_box .v_box.box15 .img.img1{background : url(/images/main/mv_img15.webp) no-repeat center center / cover;}
#mVisual .visual_box .v_box.box15 .img.img2{background : url(/images/main/mv_img15_1.webp) no-repeat center center / cover;}
#mVisual .visual_box .v_box.box16{}
#mVisual .visual_box .v_box.box16 .img{width: 100%; height: 100%; }
#mVisual .visual_box .v_box.box16 .img.img1{background : url(/images/main/mv_img16.webp) no-repeat center center / cover;}
#mVisual .visual_box .v_box.box16 .img.img2{background : url(/images/main/mv_img16_1.webp) no-repeat center center / cover;}
#mVisual .visual_box .v_box .txt{display: flex; justify-content: center; align-items: center; text-align: center; flex-direction: column; height: 100%; width: 100%;}
#mVisual .visual_box .v_box .txt h3{font-size: 36px;}
#mVisual .visual_box .v_box .txt h3 b{color: #000;}
#mVisual .visual_box .v_box .txt h3 span{color:var(--maincolor);}
#mVisual .visual_box .v_box .txt p{font-size: 18px; color: #666; font-weight: 700; margin-top: 15px;}

@media all and (max-width:1280px){
	#mVisual{height: 44vw;}
	#mVisual .inner .txt{width: 45%;}
	#mVisual .inner .txt .h4{font-size: 24px;}
	#mVisual .inner .txt h3{font-size: 40px; margin-top: 12px;}
	#mVisual .inner .txt p{font-size: 18px; margin-top: 23px;}
	#mVisual .inner .txt .s_btn{margin-top: 40px;}
	#mVisual .visual_box{width: 55%;}
	#mVisual .visual_box .v_box .txt h3{font-size: 32px;}
	#mVisual .visual_box .v_box .txt p{font-size: 16px; margin-top: 6px;}
}
@media all and (max-width:1024px){
	#mVisual{height: auto; max-height: 100%;}
	#mVisual .inner .txt{width: 100%; padding: 60px 0 80px; text-align: center;}
	#mVisual .inner .txt .s_btn{justify-content: center;}
	#mVisual .visual_box{width: 100vw; height: 80vw; position: static;}
}
@media all and (max-width:768px){
	#mVisual .inner .txt .h4{font-size: 22px;}
	#mVisual .inner .txt h3{font-size: 36px; margin-top: 10px;}
	#mVisual .inner .txt p{font-size: 17px; margin-top: 17px;}
	#mVisual .inner .txt .s_btn{margin-top: 35px;}
	#mVisual .visual_box .v_box .txt h3{font-size: 4vw;}
	#mVisual .visual_box .v_box .txt p{font-size: 2.25vw; margin-top: .75vw;}
}
@media all and (max-width:500px){
	#mVisual .inner .txt{padding: 50px 0 65px;}
	#mVisual .inner .txt .h4{font-size: 19px;}
	#mVisual .inner .txt h3{font-size: 32px; margin-top: 8px;}
	#mVisual .inner .txt p{margin-top: 14px;}
	#mVisual .inner .txt .s_btn{margin-top: 30px;}
	#mVisual .visual_box .v_box .txt h3{font-size: 4.5vw;}
	#mVisual .visual_box .v_box .txt p{font-size: 2.5vw; margin-top: 1vw;}
}


/* section */
.section{margin: 160px 0;}
.service .section{margin: 80px 0 160px;}

@media all and (max-width:1280px){
	.section{margin: 140px 0}
	.service .section{margin: 60px 0 140px;}
}
@media all and (max-width:1024px){
	.section{margin: 120px 0}
	.service .section{margin: 40px 0 120px;}
}
@media all and (max-width:768px){
	.section{margin: 110px 0}
	.service .section{margin: 40px 0 110px;}
}
@media all and (max-width:500px){
	.section{margin: 100px 0}
	.service .section{margin: 40px 0 100px;}
}


/* m_txt */
.m_txt{}
.m_txt h3{font-size: 48px; color: #000; line-height: 1.3em; word-break:keep-all;}
.m_txt p{font-size: 20px; font-weight: 600; color:#666666; line-height: 1.6em; margin-top: 30px; word-break:keep-all;}

@media all and (max-width:1280px){
	.m_txt h3{font-size: 42px;}
	.m_txt p{font-size: 18px; margin-top: 25px;}
}
@media all and (max-width:1024px){
	.m_txt h3{font-size: 38px;}
}
@media all and (max-width:768px){
	.m_txt h3{font-size: 33px;}
	.m_txt p{font-size: 17px; margin-top: 20px;}
}
@media all and (max-width:500px){
	.m_txt h3{font-size: 28px;}
	.m_txt p{font-size: 16px; margin-top: 15px;}
}

/* m_txt2 */
.m_txt2{}
.m_txt2 h3{font-size: 36px; color: #000; line-height: 1.3em; word-break:keep-all;}
.m_txt2 h3 span{color:var(--maincolor);}
.m_txt2 p{font-size: 18px; font-weight: 600; color: #666; line-height: 1.8em; margin-top: 25px; word-break:keep-all;}

@media all and (max-width:1280px){
	.m_txt2 h3{font-size: 32px;}
	.m_txt2 p{font-size: 17px; margin-top: 20px;}
}
@media all and (max-width:1024px){
	.m_txt2 h3{font-size: 28px;}
}
@media all and (max-width:768px){
	.m_txt2 h3{font-size: 26px;}
	.m_txt2 p{font-size: 16px; margin-top: 16px;}
}
@media all and (max-width:500px){
	.m_txt2 h3{font-size: 24px;}
	.m_txt2 p{margin-top: 13px;}
}

/* sec1 */
#sec1{}
#sec1 .m_txt{text-align: center;}
#sec1 .m-inner{}
#sec1 .m-inner .cont_box{width: 100%; margin-top: 95px;}
#sec1 .m-inner .cont_box .img_box{position: relative; height: 46.719vw; min-height: 897px;}
#sec1 .m-inner .cont_box .img_box .img{background-repeat: no-repeat; background-size: cover; background-position: center center; max-height: 897px; opacity: 0; visibility: hidden; transition: 1s; position: absolute; top: 0; left: 0; z-index: -10; width: 100%; height: 100%; background-image: url(/images/main/sec1_bg.webp); border-radius: 40px; overflow: hidden;}
#sec1 .m-inner .cont_box .img_box .img .cont{height: 100%; display: flex; align-items: center;}
#sec1 .m-inner .cont_box .img_box .img .cont img{max-width: 100%;}
#sec1 .m-inner .cont_box .img_box .img.on{opacity: 1; visibility: visible; z-index: 1;  transition: 1s;}
/*#sec1 .m-inner .cont_box .img_box .img.img1{background-image: url(/images/main/sec1_bg1.webp);}*/
#sec1 .m-inner .cont_box .img_box .img.img1 .cont{padding-left: 50px;}
#sec1 .m-inner .cont_box .img_box .img.img2 .cont{padding-left: 40px; padding-top: 50px;}
#sec1 .m-inner .cont_box .img_box .img.img3 .cont{padding-left: 90px; padding-top: 70px;}
/*#sec1 .m-inner .cont_box .img_box .img.img2{background-image: url(/images/main/sec1_bg2.webp);}*/
/*#sec1 .m-inner .cont_box .img_box .img.img3{background-image: url(/images/main/sec1_bg3.webp);}*/
#sec1 .m-inner .cont_box .txt_box{background-color: #fff; padding: 60px; position: absolute; top: 108px; right: 108px;height: auto; max-width: 600px; width: 50vw; z-index: 3; border-radius: 20px;}
#sec1 .m-inner .cont_box .txt_box .m_txt2{}
#sec1 .m-inner .cont_box .txt_box .m_txt2 h3{}
#sec1 .m-inner .cont_box .txt_box .m_txt2 p{}
#sec1 .m-inner .cont_box .txt_box .tab{margin-top: 30px;}
#sec1 .m-inner .cont_box .txt_box .tab > div{height: auto !important;}
#sec1 .m-inner .cont_box .txt_box .tab > div > div{height: auto !important;}
#sec1 .m-inner .cont_box .txt_box .tab li{padding: 10px 20px; cursor: pointer; position: relative; transition: .8s; background-color: transparent; border-top-right-radius: 10px; border-bottom-right-radius: 10px;}
#sec1 .m-inner .cont_box .txt_box .tab li:last-child{margin-bottom: 0;}
#sec1 .m-inner .cont_box .txt_box .tab li.on{background-color: #f2f4fa;  position: relative; margin: 0;}
/*#sec1 .m-inner .cont_box .txt_box .tab li.on::after{content: '\e86c'; font-family: 'Material Symbols Outlined'; color: var(--maincolor); font-size: 32px; position: absolute; left: -14px; top: -30px;}*/
#sec1 .m-inner .cont_box .txt_box .tab li.on + li{margin-top: 20px;}
#sec1 .m-inner .cont_box .txt_box .tab li.on:nth-child(3){margin-top: 10px;}
#sec1 .m-inner .cont_box .txt_box .tab li .progress{opacity: 0; position: absolute; left: 0; top: 0; width: 2px; height: 100%; background-color: #eeeeee;}
#sec1 .m-inner .cont_box .txt_box .tab li .progress .bar{position: absolute; top: 0; left: 0; width: 2.2px !important; background-color: var(--maincolor); height: 0%;}
#sec1 .m-inner .cont_box .txt_box .tab li.on .progress{opacity: 1;}
#sec1 .m-inner .cont_box .txt_box .tab li.on .progress .bar{}
#sec1 .m-inner .cont_box .txt_box .tab li h3{font-size: 22px; color: #000; opacity: 0.5; transition: .4s; display: flex; align-items: center; gap:6px;}
#sec1 .m-inner .cont_box .txt_box .tab li h3 .checkmark {
  width: 0px;
  height: 30px;
  border-radius: 50%;
  margin:-12px 0 0;
  stroke-dasharray: 48; 
  stroke-dashoffset: 48; 
	transition: stroke-dashoffset .6s .25s ease; 
}
#sec1 .m-inner .cont_box .txt_box .tab li.on h3 .checkmark{
	width: 30px;
  stroke-width: 4;
  stroke: var(--maincolor);
  stroke-miterlimit: 10;
  fill: none;
  stroke-dasharray: 48;
  stroke-dashoffset: 0; 
  display: block;
}
#sec1 .m-inner .cont_box .txt_box .tab li.on h3{opacity: 1; color: var(--maincolor);}
/*#sec1 .m-inner .cont_box .txt_box .tab li h3 span{display: none;}*/
#sec1 .m-inner .cont_box .txt_box .tab li.on h3 span{display: inline;}
#sec1 .m-inner .cont_box .txt_box .tab li p{font-size: 17px; font-weight: 500; color: #666; line-height: 1.5em; word-break: keep-all; margin-top: 10px; opacity: 0; visibility: hidden; height: 0; transition: .4s;}
#sec1 .m-inner .cont_box .txt_box .tab li.on p{opacity: 1; visibility: visible; height: auto; transition: .4s;}
#sec1 .m-inner .cont_box .txt_box .s_btn{margin-top: 30px;}

@media all and (max-width:1720px){
	#sec1 .m-inner .cont_box{margin-top: 75px;}
	#sec1 .m-inner .cont_box .img_box{height: 55vw; min-height:780px;}
	#sec1 .m-inner .cont_box .img_box .img .cont img{max-width: 48vw;}
	#sec1 .m-inner .cont_box .img_box .img.img1 .cont{padding-left: 1vw;}
	#sec1 .m-inner .cont_box .img_box .img.img2 .cont{padding-left: 1vw; padding-top: 1vw;}
	#sec1 .m-inner .cont_box .img_box .img.img3 .cont{padding-left: 2vw; padding-top: 2vw;}
	#sec1 .m-inner .cont_box .txt_box{right: 3vw; top: 50%; width: 40vw; transform: translateY(-50%);}
}
@media all and (max-width:1280px){
	#sec1 .m-inner .cont_box{margin-top: 65px;}
	#sec1 .m-inner .cont_box .img_box{height: 55vw; min-height:730px;}
	#sec1 .m-inner .cont_box .txt_box{padding: 50px; max-width: 500px;}
	#sec1 .m-inner .cont_box .txt_box .tab{margin-top: 25px;}
	#sec1 .m-inner .cont_box .txt_box .tab li h3{font-size: 20px;}
	#sec1 .m-inner .cont_box .txt_box .tab li p{font-size: 16px; margin-top: 8px;}
	#sec1 .m-inner .cont_box .txt_box .s_btn{margin-top: 25px;}
}
/*
@media all and (max-width:1024px){
	#sec1 .m-inner .cont_box{margin-top: 55px;}
	#sec1 .m-inner .cont_box .img_box{height: 55vw; min-height:680px;}
	#sec1 .m-inner .cont_box .img_box .img{background-position:left -27vw center;}
	#sec1 .m-inner .cont_box .txt_box{padding: 45px; max-width: 460px;}
	#sec1 .m-inner .cont_box .txt_box .tab{margin-top: 20px;}
	#sec1 .m-inner .cont_box .txt_box .m_txt2 p br{display: none;}
}
*/
@media all and (max-width:1024px){
	#sec1 .m-inner .cont_box{display: flex; flex-direction: column-reverse; margin-top: 0px;}
	#sec1 .m-inner .cont_box .img_box{height: 400px; min-height:0px; padding: 40px 0 0px; width: 100%; left: 0%;}
	#sec1 .m-inner .cont_box .img_box .img{background-position:left center; text-align: center; border-radius: 20px;}
	#sec1 .m-inner .cont_box .img_box .img .cont{justify-content: center;}
	#sec1 .m-inner .cont_box .img_box .img .cont img{max-width: 100%; max-height: 320px; object-fit: cover; width: 100%; height: 100%;}
	#sec1 .m-inner .cont_box .img_box .img.img1 .cont{padding-left: 0 !important; padding-top: 0 !important;}
	#sec1 .m-inner .cont_box .img_box .img.img2 .cont{padding-left: 0 !important; padding-top: 50px !important; }
	#sec1 .m-inner .cont_box .img_box .img.img3 .cont{padding-left: 20px !important; padding-top: 60px !important;}
	#sec1 .m-inner .cont_box .txt_box{position: static; width: 100%; max-width: 100%; padding: 0px 0 40px; transform: translateY(0);}
	#sec1 .m-inner .cont_box .txt_box .m_txt2 h3{display: none;}
	#sec1 .m-inner .cont_box .txt_box .m_txt2 h3 br{display: none;}
	#sec1 .m-inner .cont_box .txt_box .m_txt2 p{font-size: 17px;}
	#sec1 .m-inner .cont_box .txt_box .m_txt2 p br{display: block;}
	#sec1 .m-inner .cont_box .txt_box .tab{width: 80%; margin-left: auto; margin-right: auto;}
	#sec1 .m-inner .cont_box .txt_box .tab li{padding: 15px;}
	#sec1 .m-inner .cont_box .txt_box .tab li .progress{width: 1px;}
	#sec1 .m-inner .cont_box .txt_box .tab li .progress .bar{width: 1.1px !important;}
	#sec1 .m-inner .cont_box .txt_box .s_btn{display: none;}
	#sec1 .m-inner .cont_box .txt_box .tab li h3{font-size: 19px;}
	#sec1 .m-inner .cont_box .txt_box .tab li h3 .checkmark{height: 25px; margin-top: -10px;}
	#sec1 .m-inner .cont_box .txt_box .tab li.on h3 .checkmark{width: 25px;}
}
@media all and (max-width:768px){
	#sec1 .m-inner .cont_box .img_box .img{border-radius: 10px;}
}
@media all and (max-width:500px){
	#sec1 .m-inner .cont_box .img_box{height: 320px;}
	#sec1 .m-inner .cont_box .txt_box .tab{width: 100%;}
	#sec1 .m-inner .cont_box .img_box .img.img1 .cont{margin-left: -10px; padding-top: 0px !important;}
	#sec1 .m-inner .cont_box .img_box .img.img2 .cont{padding-left: 0 !important; padding-top: 40px !important;}
	#sec1 .m-inner .cont_box .img_box .img.img3 .cont{padding-left: 10px !important; padding-top: 50px !important;}
	#sec1 .m-inner .cont_box .img_box .img .cont img{max-height: 280px;}
}


/* sec2 */
#sec2{padding-bottom: 500px; background: url(/images/main/sec2_bg.webp) no-repeat bottom center / cover; margin-bottom: 80px; margin-top: 0; overflow: hidden;}
#sec2 .inner{}
#sec2 .inner .m_txt{text-align: center;}
#sec2 .inner .cont_box{margin-top: 70px; display: flex; justify-content: center; gap:0 50px;}
#sec2 .inner .cont_box .box{background-color: rgba(250, 250, 250, 0.7); box-shadow: 0px 28px 40px rgba(0,0,0,0.07); width: 312px; height: 312px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; border-radius: 20px;}
#sec2 .inner .cont_box .box .num{font-size: 64px; font-weight: 800; }
#sec2 .inner .cont_box .box .num span{color:#000;}
#sec2 .inner .cont_box .box .num b{color:var(--maincolor);}
#sec2 .inner .cont_box .box h4{font-size: 24px; font-weight: 700; color:#000; margin-top: 15px;}
#sec2 .inner .cont_box .box p{color:rgba(0,0,0,0.7); font-size: 18px; font-weight: 500; line-height: 1.5em; margin-top: 10px;}

@media all and (max-width:1280px){
	#sec2{padding-bottom: 250px; margin-bottom: 60px;}
	#sec2 .inner .cont_box{gap:40px; margin-top: 60px;}
	#sec2 .inner .cont_box .box{width: 290px; height: 290px;}
	#sec2 .inner .cont_box .box .num{font-size: 56px;}
	#sec2 .inner .cont_box .box h4{font-size: 22px; margin-top: 12px;}
}
@media all and (max-width:1024px){
	#sec2{padding-bottom: 220px; margin-bottom: 40px;}
	#sec2 .inner .cont_box{gap:30px; margin-top: 50px;}
	#sec2 .inner .cont_box .box{width: 270px; height: 30vw; max-height: 270px;}
	#sec2 .inner .cont_box .box .num{font-size: 48px;}
	#sec2 .inner .cont_box .box h4{font-size: 20px; margin-top: 10px;}
	#sec2 .inner .cont_box .box p{font-size: 17px;}
}
@media all and (max-width:768px){
	#sec2{padding-bottom: 180px; margin-bottom: 20px;}
	#sec2 .inner .cont_box{flex-direction: column; align-items: center; margin-top: 45px;}
	#sec2 .inner .cont_box .box{width: 70%; height: auto; padding: 25px 0; border-radius: 12px;}
	#sec2 .inner .cont_box .box .num{font-size: 40px;}
}
@media all and (max-width:500px){
	#sec2{padding-bottom: 120px; margin-bottom: 0px;}
	#sec2 .inner .cont_box{ margin-top: 35px;}
	#sec2 .inner .cont_box .box{width: 90%; padding: 25px 0;}
	#sec2 .inner .cont_box .box .num{font-size: 34px;}
	#sec2 .inner .cont_box .box h4{font-size: 18px; margin-top: 8px;}
	#sec2 .inner .cont_box .box p{font-size: 16px; margin-top: 8px;}
}


/* sec3 */
#sec3{margin-top: 0; overflow: hidden; margin-bottom: 0;}
#sec3 .inner{}
#sec3 .inner .m_txt{text-align: center;}
#sec3 .inner .tab{margin-top: 95px; display: flex;}
#sec3 .inner .tab li{width:100%; text-align: center; color:#000; opacity: 0.6; font-size: 20px; font-weight: 700; transition: .4s; cursor: pointer;}
#sec3 .inner .tab li.on{opacity: 1; color: var(--maincolor);}
#sec3 .inner .progress{background-color: #ececec; height: 3px; width:100%; position: relative; margin-top: 20px;}
#sec3 .inner .progress .bar{position: absolute; top: 0; left: 0; width:10%; background-color: var(--maincolor); height: 3px; transition: .1s;}
#sec3 .inner .tabcont{opacity: 0; z-index: -1; position: relative; height: 0; transition: .6s;}
#sec3 .inner .tabcont.on{opacity: 1; z-index: 2; height: auto; margin-top: 80px;}
#sec3 .inner .tabcont .title{text-align: center; font-size: 36px; color: #000; margin-bottom: 50px; font-weight: 500; word-break: keep-all; line-height: 1.5em;}
#sec3 .inner .tabcont .title b{color: var(--maincolor); word-break: keep-all;}
#sec3 .inner .tabcont .flex_box{display: flex; align-items: center; gap:80px; cursor: pointer;}
#sec3 .inner .tabcont .flex_box .img{width: 780px; border-radius: 20px; overflow: hidden;}
#sec3 .inner .tabcont .flex_box .img img{max-width: 100%;}
#sec3 .inner .tabcont .flex_box .img video{max-width: 100%;}
#sec3 .inner .tabcont .flex_box .txt_box{display: flex; flex-direction: column; width: calc(100% - 780px);}
#sec3 .inner .tabcont .flex_box .txt_box .box{padding: 25px 0;}
#sec3 .inner .tabcont .flex_box .txt_box .box + .box{border-top: 1px solid #e9e9e9;}
#sec3 .inner .tabcont .flex_box .txt_box .box h4{font-size: 22px; color:#000;}
#sec3 .inner .tabcont .flex_box .txt_box .box p{font-size: 17px; color:#666; font-weight: 500; margin-top: 10px; word-break: keep-all; line-height: 1.5em;}
#sec3 .inner .tabcont .desc{margin-top: 60px; display: flex; justify-content: space-between; align-items: center; background-color: #f6f8fa; padding: 20px 40px;}
#sec3 .inner .tabcont .desc .txt{display: flex; align-items: center; gap:0 40px; width: calc(100% - 160px);}
#sec3 .inner .tabcont .desc .txt h3{font-size: 20px; color: var(--maincolor);}
#sec3 .inner .tabcont .desc .txt p{font-size: 18px; font-weight: 600; color:#666; word-break: keep-all; line-height: 1.5em;}
#sec3 .inner .tabcont .desc .s_btn{width: 150px;}

@media all and (max-width:1280px){
	#sec3 .inner .tab{margin-top: 80px;}
	#sec3 .inner .tab li{font-size: 19px;}
	#sec3 .inner .progress{margin-top: 15px;}
	#sec3 .inner .tabcont.on{margin-top: 70px;}
	#sec3 .inner .tabcont .title{font-size: 32px; margin-bottom: 45px;}
	#sec3 .inner .tabcont .flex_box{gap:60px;}
	#sec3 .inner .tabcont .flex_box .img{width: 620px;}
	#sec3 .inner .tabcont .flex_box .txt_box{width: calc(100% - 620px - 60px);}
	#sec3 .inner .tabcont .flex_box .txt_box .box h4{font-size: 21px;}
	#sec3 .inner .tabcont .flex_box .txt_box .box p{margin-top: 8px;}
	#sec3 .inner .tabcont .desc{padding: 20px 30px; margin-top: 50px;}
	#sec3 .inner .tabcont .desc .txt{flex-direction: column;align-items: flex-start;}
	#sec3 .inner .tabcont .desc .txt h3{margin-bottom: 6px; font-size: 19px;}
	#sec3 .inner .tabcont .desc .txt p{font-size: 17px;}
}
@media all and (max-width:1024px){
	#sec3 .inner .tab{margin-top: 70px;}
	#sec3 .inner .tab li{font-size: 18px;}
	#sec3 .inner .tabcont.on{margin-top: 60px;}
	#sec3 .inner .tabcont .title{font-size: 28px; margin-bottom: 40px;}
	#sec3 .inner .tabcont .flex_box{gap:40px; flex-direction: column;}
	#sec3 .inner .tabcont .flex_box .img{width: 100%;}
	#sec3 .inner .tabcont .flex_box .img img{width: 100%;}
	#sec3 .inner .tabcont .flex_box .txt_box{width: calc(100%); display: flex; flex-direction: row; gap:30px;}
	#sec3 .inner .tabcont .flex_box .txt_box .box{border-top: 2px solid #e9e9e9 !important;}
	#sec3 .inner .tabcont .flex_box .txt_box .box h4{font-size: 20px;}
	#sec3 .inner .tabcont .flex_box .txt_box .box p{margin-top: 8px;}
	#sec3 .inner .tabcont .flex_box .txt_box .box p br{display: none;}
	#sec3 .inner .tabcont .desc{margin-top: 40px;}
}
@media all and (max-width:768px){
	#sec3 .inner .tab{margin-top: 60px;}
	#sec3 .inner .tab li{font-size: 17px;}
	#sec3 .inner .progress{height: 2px;}
	#sec3 .inner .progress .bar{height: 2px;}
	#sec3 .inner .tabcont.on{margin-top: 45px;}
	#sec3 .inner .tabcont .title{font-size: 26px; margin-bottom: 35px;}
	#sec3 .inner .tabcont .title b{display: block;}
	#sec3 .inner .tabcont .flex_box{gap:30px; flex-direction: column;}
	#sec3 .inner .tabcont .flex_box .img{width: 100%; border-radius: 10px;}
	#sec3 .inner .tabcont .flex_box .img img{width: 100%;}
	#sec3 .inner .tabcont .flex_box .txt_box{width: calc(100%); display: flex; flex-direction: column; gap:0;}
	#sec3 .inner .tabcont .flex_box .txt_box .box{border-top: 0px solid #e9e9e9 !important; padding: 20px 0;}
	#sec3 .inner .tabcont .flex_box .txt_box .box + .box{border-top: 1px solid #e9e9e9 !important;}
	#sec3 .inner .tabcont .flex_box .txt_box .box h4{font-size: 19px;}
	#sec3 .inner .tabcont .flex_box .txt_box .box p{font-size: 16px;}
	#sec3 .inner .tabcont .flex_box .txt_box .box p br{display: none;}
	#sec3 .inner .tabcont .desc{padding: 20px; text-align: center; flex-direction: column; align-content: center; margin-top: 30px;}
	#sec3 .inner .tabcont .desc .txt{align-items: center; width: 100%;}
	#sec3 .inner .tabcont .desc .txt h3{margin-bottom: 10px; font-size: 18px;}
	#sec3 .inner .tabcont .desc .txt p{font-size: 16px;}
	#sec3 .inner .tabcont .desc .s_btn{margin-top: 15px;}
}
@media all and (max-width:500px){
	#sec3 .inner .tab{margin-top: 50px;}
	#sec3 .inner .tab li{font-size: 16px;}
	#sec3 .inner .tabcont .title{font-size: 22px; margin-bottom: 30px;}
	#sec3 .inner .tabcont .desc{margin-top: 25px;}
}


/* sec4 */
#sec4{padding: 160px 0; background-color: var(--mainBGcolor); margin-bottom: 0;}
#sec4 .m_txt{text-align: center;}
#sec4 .cont_box{margin-top: 90px; display: flex; gap:0 70px; display: flex; justify-content: center;}
#sec4 .cont_box .box{width:100%;}
#sec4 .cont_box .box .img{border-radius: 15px; overflow: hidden;}
#sec4 .cont_box .box .img img{max-width:100%;}
#sec4 .cont_box .box .txt{}
#sec4 .cont_box .box .txt h4{font-size: 17px; color: var(--maincolor); margin-top: 25px;}
#sec4 .cont_box .box .txt h3{font-size: 22px; color:#000; word-break: keep-all; margin-top: 10px; line-height: 1.6em;}

@media all and (max-width:1280px){
	#sec4{padding: 140px 0;}
	#sec4 .cont_box{gap:0 50px; margin-top: 70px; text-align: center;}
	#sec4 .cont_box .box .txt h4{font-size: 16px; margin-top: 20px;}
	#sec4 .cont_box .box .txt h3{font-size: 20px;}
	#sec4 .cont_box .box .txt h3 br{display: none;}
}
@media all and (max-width:1024px){
	#sec4{padding: 120px 0;}
	#sec4 .inner{width: 100%;}
	#sec4 .cont_box{margin-top: 60px;}
	#sec4 .cont_box .box{max-width: 380px; margin-right: 50px;}
	#sec4 .cont_box .box .txt h3{font-size: 19px;}
	#sec4 .cont_box .box .txt h3 br{display: block;}
}
@media all and (max-width:768px){
	#sec4{padding: 110px 0;}
	#sec4 .cont_box .box{max-width: 60vw; margin-right: 40px;}
	#sec4 .cont_box .box .img{border-radius: 10px;}
	#sec4 .cont_box .box .txt h4{font-size: 15px; margin-top: 15px;}
	#sec4 .cont_box .box .txt h3{font-size: 18px; margin-top: 6px;}
}
@media all and (max-width:500px){
	#sec4{padding: 100px 0;}
	#sec4 .cont_box .box{max-width: 64vw; margin-right: 30px; min-width: 270px;}
	#sec4 .cont_box .box .txt h3{font-size: 17px;}
	#sec4 .cont_box .box .txt h3 br{display: none;}
}


/* sec5 */
/*#sec5{margin: 0; background: url(/images/main/sec5_bg.webp) no-repeat top center / cover;}*/
#sec5{margin: 0; background: #0e131e; position: relative; overflow: hidden;}
/*#sec5 .top{background: linear-gradient(to bottom, #0e131e, rgba(6, 12, 23,0.97), rgba(6, 12, 23,0.85), transparent); padding: 160px 0 45vw; position: relative; z-index: 2;}*/
#sec5 .top{background: linear-gradient(to bottom, #0e131e, rgba(6, 12, 23,0.9), rgba(6, 12, 23,0.8), rgba(6, 12, 23,0.7), rgba(6, 12, 23,0.55), transparent, transparent); padding: 160px 0 55vw; position: relative; z-index: 2; pointer-events: none;}
#sec5 .top .inner{position: static;}
#sec5 .top .m_txt{text-align: center; width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#sec5 .top .m_txt h3{color:#fff; margin-bottom: 40px;}
#sec5 .top .m_txt .s_btn{pointer-events: auto;}
#sec5 .top .cont_box{margin-top: 80px;}
#sec5 .top .cont_box > div{overflow-y: visible !important; padding-bottom: 35px; padding-top: 10px;}
#sec5 .top .cont_box > div > div{overflow-y: visible !important; padding-bottom: 30px;}
#sec5 .top .cont_box .box{position: relative; margin-right: 40px; transition: .4s; top: 0;}
#sec5 .top .cont_box .box:hover{top: -10px;}
#sec5 .top .cont_box .box .img{position: relative; z-index: 3;}
#sec5 .top .cont_box .box .img img{max-width:100%;}
#sec5 .top .cont_box .box p{font-size: 18px; font-weight: 600; color:#fff; position: absolute; bottom: 0px; transition: .4s;}
#sec5 .top .cont_box .box:hover p{bottom: -35px;}
#sec5 .grid-container {
    width: calc(100% + 320px);
    margin: 0 auto;
	position: absolute !important;
	top: -15vw;
	left: -80px;
	z-index: 0;
	height: auto;
    animation: moveUp 48s forwards linear infinite; /* 애니메이션 효과 추가 */
    animation-play-state: paused; /* 초기 상태를 paused로 설정 */
}

#sec5 .grid-item {
    color: white;
    font-size: 1.2em;
    margin-bottom: 20px;
    box-sizing: border-box;
	max-width:280px;
	border-radius: 16px;
	overflow: hidden;
}

@keyframes moveUp {
    0% {
        transform: translateY(0); /* 시작 위치 */
    }
	100%{transform: translateY(-50%);}
}

#sec5 .grid-item img {
    max-width: 100%;
	width:100%;
	height: auto;
    display: block;
}

@media all and (max-width:1280px){
	#sec5 .top{padding: 140px 0 58vw;}
	#sec5 .top .m_txt h3{margin-bottom: 35px;}
	#sec5 .top .cont_box{margin-top: 70px;}
	#sec5 .top .cont_box .box{max-width: 400px; margin-right: 30px;}
	#sec5 .top .cont_box .box p{font-size: 17px;}
	#sec5 .grid-container {width: calc(100% + 40vw); left: -18vw;}
	#sec5 .grid-item{max-width: 32vw;}
}
@media all and (max-width:1024px){
	#sec5 .top{padding: 120px 0 66vw;}
	#sec5 .top .m_txt h3{margin-bottom: 30px;}
	#sec5 .top .cont_box{margin-top: 55px;}
	#sec5 .top .cont_box .box{max-width: 36vw; margin-right:3vw; text-align: center;}
	#sec5 .top .cont_box .box p{font-size: 16px; bottom: -28px; width: 100%;}
}
@media all and (max-width:768px){
	#sec5 .top{padding: 100px 0 74vw;}
	#sec5 .top .m_txt h3{margin-bottom: 25px;}
	#sec5 .top .cont_box{margin-top: 45px;}
	#sec5 .top .cont_box .box{max-width: 42vw; margin-right:4vw;}
	#sec5 .grid-container {width: calc(100% + 40vw); left: -12.5vw;}
	#sec5 .grid-item{max-width: 40vw;}
}
@media all and (max-width:500px){
	#sec5 .top{padding: 80px 0 82vw;}
	#sec5 .top .cont_box{margin-top: 35px;}
	#sec5 .top .cont_box .box{max-width: 62vw; margin-right:6vw;}
	#sec5 .grid-item{margin-bottom: 12px;}
}


/* sec6 */
#sec6{margin: 0; padding: 200px 0; background-color: #fff;}
#sec6 .cont{display: flex; align-items: center; justify-content: center; gap:30px;}
#sec6 .cont > div{text-align: center;}
#sec6 .cont > div h3{font-size: 48px; color:#000;}
#sec6 .cont > .c_cont{max-width: 560px; height: 451px;}
#sec6 .cont > .c_cont::after{content: ''; position: absolute; top: 50%; transform: translateY(-50%); left: 0; border: 2px solid var(--maincolor); width: 100%; height: 86px; padding: 40px 0;}
#sec6 .cont > .c_cont > div{ height: 451px !important; padding: 172px 0 !important;}
#sec6 .cont > .c_cont p{font-size: 42px; font-weight: 800; color:#bec4d7; margin: 25px 0; opacity: .5; transition: .4s;}
#sec6 .cont > .c_cont p.slick-current {opacity: 1;}
#sec6 .cont > .c_cont p.slick-current{color:var(--maincolor); position: relative; opacity: 1;}
/* #sec6 .cont > .c_cont p.slick-current::after{content: ''; position: absolute; top: 50%; transform: translateY(-50%); left: 0; border: 2px solid var(--maincolor); width: 100%; height: 100%; padding: 40px 0;} */

@media all and (max-width:1280px){
	#sec6 .cont > div h3{font-size: 42px;}
	#sec6 .cont > .c_cont{max-width: 520px; height: 443px;}
	#sec6 .cont > .c_cont > div{ height: 443px !important; padding: 172px 0 !important;}
	#sec6 .cont > .c_cont p{font-size: 38px;}
}
@media all and (max-width:1024px){
	#sec6 .cont{gap:20px; flex-direction: column;}
	#sec6 .cont > div h3{font-size: 38px;}
	#sec6 .cont > .c_cont{max-width: 420px; height: 436px;}
	#sec6 .cont > .c_cont::after{height: 78px;}
	#sec6 .cont > .c_cont > div{ height: 436px !important; padding: 172px 0 !important;}
	#sec6 .cont > .c_cont p{font-size: 34px;}
}
@media all and (max-width:768px){
	#sec6{padding: 160px 0;}
	#sec6 .cont > .c_cont{height: 243px;}
	#sec6 .cont > .c_cont::after{height: 78px;}
	#sec6 .cont > .c_cont > div{ height: 278px !important; padding: 76px 0 !important;}
}
@media all and (max-width:500px){
	#sec6{padding: 100px 0;}
	#sec6 .cont{gap:0;}
	#sec6 .cont > div h3{font-size: 30px;}
	#sec6 .cont > .c_cont{height: 228px;}
	#sec6 .cont > .c_cont p{font-size: 30px; margin: 15px 0;}
	#sec6 .cont > .c_cont::after{height: 60px; padding: 28px 0; width: 90vw; left: 50%; transform: translate(-50%, -50%);}
	#sec6 .cont > .c_cont > div{ height: 228px !important; padding: 82px 0 !important;}
}

/* sec7 */
@keyframes pro{
	0%{width: 0%}
	100%{width: 100%}
}
#sec7{}
#sec7 .inner{}
#sec7 .inner .m_txt{text-align: center;}
#sec7 .inner .cont_box{top: 325px;position: relative; height: 400vh;}
#sec7 .inner .cont_box .box{display: flex; align-items: center; position: sticky; top: 50%; transform: translateY(-50%); height: 100vh; opacity: 0; transition: .4s;}
#sec7 .inner .cont_box .box.on{opacity: 1;}
#sec7 .inner .cont_box .box:nth-child(3).on{height: 70vh;}
#sec7 .inner .cont_box .box:nth-child(even){flex-direction: row-reverse;}
#sec7 .inner .cont_box .box:nth-child(odd) .txt{padding-left: 60px;}
#sec7 .inner .cont_box .box:nth-child(even) .txt{padding-right: 60px; text-align: right;}
#sec7 .inner .cont_box .box .txt{width: 50%;}
#sec7 .inner .cont_box .box .txt h4{font-size: 20px; color:var(--maincolor); display: flex; align-items: center; gap:10px;}
#sec7 .inner .cont_box .box:nth-child(even) .txt h4{justify-content: flex-end;}
#sec7 .inner .cont_box .box .txt h4 span{font-size: 14px; color:#fff; background-color: var(--maincolor); border-radius: 100%; width: 23px; height: 23px; display: inline-flex; justify-content: center; align-items: center;} 
#sec7 .inner .cont_box .box .txt h3{font-size: 36px; color:#000000; line-height: 1.3em; margin-top: 35px;}
#sec7 .inner .cont_box .box .txt p{font-size: 18px; font-weight: 600; color:#666666; line-height: 1.8em; margin-top: 25px;word-break: keep-all}
#sec7 .inner .cont_box .box .img_box{width: 50%;}
#sec7 .inner .cont_box .box .img_box .img{border-radius: 20px; border: 0px solid #fff; overflow: hidden;}
#sec7 .inner .cont_box .box .img_box .img img{max-width: 100%; object-fit: cover;}
#sec7 .inner .cont_box .box .img_box .img video{max-width: 100%; object-fit: cover; background-color: #fff;}
#sec7 .inner .cont_box .box .img_box .progress{display: flex; gap:20px; margin-top: 25px;}
#sec7 .inner .cont_box .box .img_box .progress .pro{width: 100%;}
#sec7 .inner .cont_box .box .img_box .progress .pro .gage{background-color: #eaeaea; width: 100%; height: 4px; position: relative;}
#sec7 .inner .cont_box .box .img_box .progress .pro .gage .bar{position: absolute; top: 0; left: 0; background-color:var(--maincolor); display: block; height: 4px;}
#sec7 .inner .cont_box .box .img_box .progress .pro p{margin-top: 12px; font-size: 16px; font-weight: 600; opacity: 0.5; color: #000;}
#sec7 .inner .cont_box .box .img_box .progress .pro.on{}
#sec7 .inner .cont_box .box .img_box .progress .pro.on .gage{}
#sec7 .inner .cont_box .box.on .img_box .progress .pro.on .gage .bar{animation: pro .7s forwards linear;}
#sec7 .inner .cont_box .box .img_box .progress .pro.on p{opacity: 1;}

@media all and (max-width:1280px){
	#sec7 .inner .cont_box .box:nth-child(odd) .txt{padding-left: 0;}
	#sec7 .inner .cont_box .box:nth-child(even) .txt{padding-right: 0;}
	#sec7 .inner .cont_box .box .txt h4{font-size: 19px; gap:8px;}
	#sec7 .inner .cont_box .box .txt h3{font-size: 32px; margin-top: 30px;}
	#sec7 .inner .cont_box .box .txt p{margin-top: 20px;}
}
@media all and (max-width:1024px){
	#sec7 .inner .cont_box .box:nth-child(odd) .txt{padding-right: 40px;}
	#sec7 .inner .cont_box .box:nth-child(even) .txt{padding-left:40px;}
	#sec7 .inner .cont_box .box .txt h4{font-size: 18px;}
	#sec7 .inner .cont_box .box .txt h3{font-size: 28px; margin-top: 25px;}
	#sec7 .inner .cont_box .box .txt p{margin-top: 16px;}
	#sec7 .inner .cont_box .box .txt p br{display: none;}
	#sec7 .inner .cont_box .box .img_box .progress{gap:15px; margin-top: 20px; height: 3px;}
	#sec7 .inner .cont_box .box .img_box .progress .pro p{margin-top: 10px; font-size: 15px;}
	#sec7 .inner .cont_box .box .img_box .progress .pro .gage{height: 3px;}
	#sec7 .inner .cont_box .box .img_box .progress .pro .gage .bar{height: 3px;}
}
@media all and (max-width:768px){
	#sec7 .inner .cont_box .box{flex-direction: column !important; justify-content: center;}
	#sec7 .inner .cont_box .box .txt{width: 100%; text-align: center; padding: 0 !important;}
	#sec7 .inner .cont_box .box:nth-child(even) .txt{text-align: center;}
	#sec7 .inner .cont_box .box .txt h4{justify-content: center !important; font-size: 17px;}
	#sec7 .inner .cont_box .box .txt h4 span{width: 21px; height: 21px; font-size: 13px;}
	#sec7 .inner .cont_box .box .txt h3{font-size: 25px; margin-top: 20px;}
	#sec7 .inner .cont_box .box .txt p{font-size: 17px; margin-top: 13px;}
	#sec7 .inner .cont_box .box .txt p br{display: block;}
	#sec7 .inner .cont_box .box .img_box{width: 80%;margin-top: 30px; min-width: 300px;}
	#sec7 .inner .cont_box .box .img_box .img{border-radius: 10px;}
	#sec7 .inner .cont_box .box .img_box .progress{display: none;}
}
@media all and (max-width:500px){
	#sec7 .inner .cont_box .box .txt h4{font-size: 16px;}
	#sec7 .inner .cont_box .box .txt h4 span{width: 19px; height: 19px; font-size: 12px;}
	#sec7 .inner .cont_box .box .txt h3{font-size: 22px; margin-top: 15px;}
	#sec7 .inner .cont_box .box .txt p{font-size: 16px; margin-top: 10px;}
	#sec7 .inner .cont_box .box .img_box{margin-top: 25px;}
}

.sound_only{display: block; position: absolute; top: -9999px; left: -9999px; text-indent: -9999px; opacity: 0; width: 0; height: 0;}