/* body{font-size:12px; font-family:'Malgun Gothic',Dotum,applegothic,sans-serif,arial; color:#333; letter-spacing:-0.5px; *letter-spacing:-1px} */

/************************ 공통설정 ************************/
:root {
    --color-point: #c1fc11;
    --color-point-light: #adbe61;
    --color-point-dark: #465f3a;
    --color-sub1: #40ae19;
    --color-sub2: #5a65b5;
    --color-sub3: #dd9a49;
    --color-red: #ff3333;
    --color-blue: #08174b;
    --color-green: #769834;
    --layout-width: 1200px;
}

.mobile {display:none}



::selection {
  background-color: var(--color-point);
  color: var(--color-sub1)
}



	
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.swiper-slide-active .fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;


}
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -60%, 0);
    transform: translate3d(0, -60%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}



@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 30%, 0);
    transform: translate3d(0, 30%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 30%, 0);
    transform: translate3d(0, 30%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.swiper-slide-active .fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}



@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -40%, 0);
    transform: translate3d(0, -40%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.swiper-slide-active .fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}


.swiper-slide-active .tp-caption{
  -webkit-animation-duration: 1.4s;
  animation-duration: 1.4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}


.tp-caption{
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}



@-webkit-keyframes zoomIn {
  from {
    
	 transform: scale(1.1);
	left:0px;top:0px;
    
  }


  100% {
	transform: scale(1);
	left:0px;top:0px;
  }
}

@keyframes zoomIn {
  from {
	 transform: scale(1.1);
	left:0px;top:0px;
   
  }

  100% {
	transform: scale(1);
	left:0px;top:0px;
  }
}

.swiper-slide-active .zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;


}


.swiper-slide-active .tp-caption2{
  -webkit-animation-duration: 6s;
  animation-duration: 6s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}



.delay1{-webkit-animation-delay: 0.4s; animation-delay: 0.4s;}
.delay2{-webkit-animation-delay: 0.8s; animation-delay: 0.8s;}
.delay3{-webkit-animation-delay: 1.2s; animation-delay: 1.2s;}
.delay4{-webkit-animation-delay: 1.6s; animation-delay: 1.6s;}
.delay6{-webkit-animation-delay: 2s; animation-delay: 2s;}
.delay8{-webkit-animation-delay: 2.4s; animation-delay: 2.4s;}
.delay10{-webkit-animation-delay: 2.8s; animation-delay: 2.84s;}
.delay0{-webkit-animation-delay: 0s; animation-delay: 0s;}



body {font-family:'Pretendard';}
.mainskinbox {font-size:14px;}

.mainskinbox section {padding:80px 0}

.mainskinbox .pointpick {display:block;padding-bottom:25px}
.mainskinbox .pointpick span{border-radius:25px;border:2px solid var(--color-sub1);color:var(--color-sub1);font-size:20px;padding:5px 45px;display:inline-block;}

.mainskinbox h3{font-size:43px;font-weight:800;text-align:Center;display:block;position:relative;z-index:2}
.mainskinbox h3 span{font-weight:400;display:block;}
.mainskinbox h3 strong{display:block;}
.mainskinbox h3 em{position:relative;font-style:normal;}
.mainskinbox h3 em:before{background-color:var(--color-point); content:'';width:100%;display:block;height:30px;position:absolute; left:0px;bottom:0px;z-index:-1}
.mainskinbox h4{font-size:35px;color:#fff;z-index:2;position:relative;}
.mainskinbox .msmalltxt{font-size:20px;padding-top:15px;display:block;z-index:2;position:relative;line-height:1.5;}
.mainskinbox .cont {max-width:var(--layout-width);margin:Auto;}



.header_box {width:var(--layout-width);margin:Auto;position:relative;}
.header_box .logo{position:absolute;right:0px;top:15px;z-index:100}


.mainbg {position:relative;height:650px;overflow:hidden;}
.mainbg .swiper-wrapper {z-index:0px !important}
.mainbg .swiper-slide {text-align:Center;}
.mainbg .swiper-slide h3{display:block;padding:100px 0 50px 0;color:#fff;position:relative;}
.mainbg .swiper-slide .iconpoint{display:inline-block;margin:0 -10px}
.mainbg .swiper-slide ul{display:flex;justify-content: center;}
.mainbg .swiper-slide li{margin-lefT:-50px;}
.mainbg .swiper-slide li .won{flex-wrap : wrap;flex-direction: row;display:flex;align-items: center;justify-content: center;border:1px solid #fff;width:280px;height:280px;border-radius:100%;text-align:center;color:#fff;word-break:keep-all;font-size:25px;}
.mainbg .swiper-slide .mimg{position:absolute;left:0px;top:0px;width:100%;height:650px;z-index:-1;overflow:hidden;}
.mainbg .swiper-slide .mimg img{position:absolute;left:50%;top:50%;min-width:100%;min-height:650px;max-height:900px;max-width:200%;height:Auto;transform:translate(-50%, -50%);z-index:-1;}

.mainbg .swiper-slide .mimg:before{content:'';width:100%;height:650px;position:absolute;left:0px;top:0px;background:rgba(0,0,0,0.4)}

.mainbg .point1{display:block;width:197px;height:24px;background:url(/Tskin/Spack/MCAAAAAAAAAC/images/point1.png) no-repeat;position:absolute;left:15vw;bottom:60px;z-index:1000}
.mainbg .point2{display:block;width:202px;height:55px;background:url(/Tskin/Spack/MCAAAAAAAAAC/images/point2.png) no-repeat;position:absolute;right:15vw;top:120px;z-index:1000}

.mainbg .msmalltxt {color:#fff;text-aligN:center;white-space:nowrap;opacity:0.8;padding:20px 0}

/** 텍스트가 고정이고싶을때 .box안에넣으면됨  / point 는 box 바깥으로 **/
.mainbg .box {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1000}
.mainbg .box h3{display:block;color:#fff;position:relative;}
.mainbg .box .iconpoint{display:inline-block;margin:0 -10px}
.mainbg .box ul{display:flex;justify-content: center;}
.mainbg .box li{margin-lefT:-50px;}
.mainbg .box li .won{flex-wrap : wrap;flex-direction: row;display:flex;align-items: center;justify-content: center;border:1px solid #fff;width:280px;height:280px;border-radius:100%;text-align:center;color:#fff;word-break:keep-all;font-size:25px;}


/** animation: point1-fade 1s ease-in-out forwards; **/
@keyframes point1-fade {
  0% {
    opacity: 0;
    background-position: -197px 0;
  }
  100% {
    opacity: 1;
    background-position: 0 0;
  }
}

.firbox h3{padding-bottom:30px}
.firbox h4{color:#fff;}

.firbox .cont{display:flex;gap:25px;margin-top:30px}
.firbox .cont > div{border-radius:25px;padding:50px;position:relative;overflow:hidden;}
.firbox .cont > div:before{background-color:rgba(0,0,0,0.3);content:'';display:block;width:100%;height:100%;position:absolute;left:0px;top:0px;z-index:0}
.firbox .box1{width:400px;height:495px;position:relative;background:url(/Tskin/Spack/MCAAAAAAAAAC/images/firbox1.jpg) center center no-repeat;background-size:cover;}
.firbox .box2{flex:1;background:url(/Tskin/Spack/MCAAAAAAAAAC/images/firbox2.jpg) center center no-repeat;background-size:cover;color:#fff;}


.secbox {background:url(/Tskin/Spack/MCAAAAAAAAAC/images/secimg.jpg) 50vw center no-repeat;background-color:#f2f2f2;background-attachment: fixed;}
.secbox .cont h3{text-align:left;}
.secbox .cont{position:relative;}
.secbox .cont .box{width:50%;}

.thbox {text-align:center;} 
.slidbox1  {overflow:hidden;padding:80px 0}
.slidbox1 .swiper-slide {text-align:center;max-width:250px;}
.slidbox1 .swiper-slide:hover {margin-top:-20px;}
.slidbox1 .swiper-slide:hover .img{border:10px solid var(--color-sub1);}
.slidbox1 .swiper-slide:hover .img img{ opacity:0.5}
.slidbox1 .swiper-slide:hover span{color:var(--color-sub1);}
.slidbox1 .swiper-slide .img{width:160px;height:160px;overflow:hidden;display:block;border-radius:100%;margin:auto;} 
.slidbox1 .swiper-slide  span{display:block;font-size:20px;letter-spacing:-0.5px;padding-top:15px}

.fourbox {background-color:var(--color-point-dark);}
.fourbox .cont{display:flex;gap:25px;}
.fourbox .cont .box1{width:400px;}
.fourbox .cont .box2{flex:1;overflow:hidden;}
.fourbox .msmalltxt{color:#fff;}

.fourbox .arrow {display:flex;width:58px;margin:35px 0;border:1px solid #cecfce;border-radius:5px;overflow:hidden;background-color:#fff;}
.fourbox .arrow .arr-left {background:url('/Tskin/Spack/MCAAAAAAAAAC/images/arr_left.gif') no-repeat;width:25px;height:25px;display:block;text-indent:-9999px;font-size:9px;border-right:1px solid #cecfce;}
.fourbox .arrow .arr-right {background:url('/Tskin/Spack/MCAAAAAAAAAC/images/arr_right.gif') no-repeat;width:25px;height:25px;display:block;text-indent:-9999px;font-size:9px;}

.fourbox .slidbox2 {}
.fourbox .slidbox2 .img{height:445px;padding-left:40px;}
.fourbox .slidbox2 .img img{border-radius:15px;overflow:hidden;height:445px;width:100%;}
.fourbox .slidbox2 .abo{position:absolute;left:0px;bottom:0px;display:inline-block;display:flex;}
.fourbox .slidbox2 .abo .icon{width:85px;height:85px;background-color:#fff;text-align:Center;padding-top:3px;box-shadow:0px 0px 25px rgba(0,0,0,0.4);border-radius:15px;overflow:hidden;}
.fourbox .slidbox2 .abo .txt {margin-left:-10px;position:relative;height:85px;background:url(/Tskin/Spack/MCAAAAAAAAAC/images/fourline.png) left bottom no-repeat;background-size:auto 45px;}
.fourbox .slidbox2 .abo .txt span{margin-left:50px;display:block;background-color:var(--color-sub1);color:#fff;padding:5px 10px;font-size:17px}


.footer_box {background-color:#323232;color:#fff;font-size:15px;padding:15px 0;}
.footer_box .footer_menu{width:var(--layout-width);margin:auto}
.footer_box li{display:flex;}
.footer_box li span{width:106px;}
.footer_box .footer_copyright {text-align:Center;font-size:14px;}