.main-slide {
   margin: -6.25rem 0 0;
   overflow: hidden;
   position: relative;
}
.main-slide li {
   width: 100%;
   height: 58.625rem;
}
.main-slide .slide-txt{
   max-width: 45rem;
   max-width: 70rem;
   margin: 0 auto;
   width: 90%;
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   padding: 12.5rem 0 0;
}
.main-slide li h3{
   font-size: 3rem;
   font-weight: 700;
   line-height: 1.5;
   animation: slideFadeDown 0.2s ease-in forwards;
   opacity: 0;
}
.main-slide .swiper-slide-active .slide-txt h3{
   animation: slideFadeUp 0.2s 0.3s ease-in forwards;
}
.main-slide li p{
   font-size: 2rem;
   line-height: 1.5;
   margin: 0 0 1.25rem;
   animation: slideFadeDown 0.4s ease-in forwards;
   opacity: 0;
}
.main-slide .swiper-slide-active .slide-txt p {
   animation: slideFadeUp 0.2s 0.6s ease-in forwards;
}
.main-slide .navigation{
   position: absolute;
   width: 13.75rem;
   left: 50%;
   bottom: 1.25rem;
   transform: translateX(-50%);
   z-index: 999;
   display: flex;
   justify-content: space-between;
}
.main-slide .swiper-pagination .swiper-pagination-bullet{
   width: 1.25rem;
   height: 1.25rem;
   background: #595857;
   position: relative;
   border-radius: 100%;
   border-radius: 100%;
   background-color: transparent;
}
.main-prev,
.main-next{
   cursor: pointer;
}
.main-prev img{
   transform: rotateY(180deg)
}
.main-slide .swiper-pagination{
   position: static;
}
.main-slide .swiper-pagination .swiper-pagination-bullet-active{
   border: 2px solid #595857;
}
.main-slide .swiper-pagination .swiper-pagination-bullet-active::after,
.main-slide .swiper-pagination .swiper-pagination-bullet::after{
   content: "";
   position: absolute;
   left: 50%;
   top: 50%;
   width: .625rem;
   height: .625rem;
   border-radius: 100%;
   background-color: #595857;
   transform: translate(-50% , -50%);
}
/* all */
.main .tit{
   text-align: center;
}
.main .tit h3{
   font-size: 2.625rem;
   color: var(--main-color);
   margin: 0 0 1.25rem;
}
.main .tit p{
   font-size: 1.5rem;
}
/* main2 */
.main2{
   padding: 11.25rem 0;
}
.main2 .tit{
   margin: 0 0 3.75rem;
}
.main2 .cont{
   display: flex;
   gap: 2.5rem;
   justify-content: center;
}
.main2 .cont .box{
   width: 50%;
}
.main2 .cont .box .img-box{
   overflow: hidden;
   border-radius: 10px;
   height: 18.75rem;
   box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
   background-color: #F7F8FA;
}
.main2 .cont .box .img-box > img{
   transform: scale(1);
   object-fit: contain;
   width: 100%;
   height: 100%;
}
.main2 .cont .box:hover .img-box > img{
   transform: scale(1.4);
   transition: transform 2.6s cubic-bezier(.19,1,.22,1);
}
.main2 .cont .box .txt-box{
   margin: 1.875rem 0 0;
   text-align: center;
}
.main2 .cont .box .txt-box h5{
   font-size: 2rem;
}
.main2 .cont .box .txt-box p{
   font-size: 1rem;
   line-height: 1.5;
   margin: 1.25rem 0 1.875rem;
   min-height: 3.75rem;
}
.main2 .cont .box .txt-box a{
   display: flex;
   justify-content: center;
   align-items: center;
   gap: .3125rem;
   width: 10rem;
   margin: 0 auto;
   background-color: var(--main-color);
   border-radius: 5px;
}
.main2 .cont .box .txt-box a > span{
   display: block;
   padding: .5rem 0;
   color: #fff;
   line-height: 1.5;
}
.main2 .cont .box .txt-box a > span:last-of-type{
   margin-top: .1875rem;
}

/* main3 */
.main3 .tit p{
   margin: 0 0 1.25rem;
}
.main3 .tit span{
   font-size: 1.125rem;
   line-height: 1.5;
}
.main3 .cont{
   position: relative;
   min-height: 40.625rem;
   display: flex;
   flex-direction: column;
   gap: 12.1875rem;
   align-items: center;
}
.main3 .cont .worldmap{
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   z-index: -1;
}
.main3 .cont .view{
   display: flex;
   justify-content: center;
   align-items: center;
   gap: .3125rem;
   width: 10rem;
   margin: 1.875rem auto 0;
   background-color: var(--main-color);
   border-radius: 5px;
}
.main3 .cont .view > span{
   display: block;
   padding: .5rem 0;
   color: #fff;
   line-height: 1.5;
}
.main3 .cont .view > span:last-of-type{
   margin-top: .1875rem;
}

.main3 .cont .img{
   filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.15));
   border-radius: 10px;
   position: relative;
   z-index: 3;
}
.main3 .location-map{
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
}
.main3 .mark{
   min-width: 2.5rem;
   max-width: 3.125rem;
   text-align: center;
   position: absolute;
   top:0;
}
.main3 .mark.usa{
   top: 13.75rem;
   left: 13.75rem;
}
.main3 .mark.slo{
   top: 10.5625rem;
   left: 40.5rem;
}
.main3 .mark.kor{
   top: 13.75rem;
   right: 12rem;
}
.main3 .mark span{
   display: block;
   margin: 0 0 .25rem;
   font-size: .75rem;
   font-weight: 700;
   color: var(--main-color);
}
.main3 .bigmark{
   position: absolute;
   top: 17.25rem;
   right: 16.8125rem;
}
.main3 .bigmark .vie{
   text-align: center;
   min-width: 2.5rem;
   max-width: 3.125rem;
   position: relative;
}
.main3 .bigmark .vie::after{
   content: "";
   position: absolute;
   top: 5.3125rem;
   right: 12px;
   transform: translateY(-50%) rotate(155deg);
   width: 11.25rem;
   height: .0625rem;
   background-color:#3D6C53;
   z-index: 2;
}
.main3 .bigmark .vie span{
   display: block;
   margin: 0 0 .25rem;
   font-size: .75rem;
   font-weight: 700;
   color: #3D6C53;
}
.main3 .bigmark .spread-circle{
   width: 6.875rem;
   height: 6.875rem;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}
.main3 .bigmark .spread-circle > span{
   border: 1px solid #3D6C53;
   border-radius: 50%;
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   opacity: 0;
   animation: nation-circle 4s cubic-bezier(1, 2, 0.66, 3) infinite;
}
.main3 .bigmark .spread-circle > .spread:nth-child(2){
   animation-delay: 0.5s;
}
.main3 .bigmark .spread-circle > .spread:nth-child(3){
   animation-delay: 1s;
}
.main3 .bigmark .spread-circle > .spread:nth-child(4){
   animation-delay: 1.5s;
}

/* main4 */
.main4{
   min-height: 58.625rem;
   display: flex;
   justify-content: center;
   align-items: center;
}
.main4 > div{
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: flex-end;
   gap: 2.5rem;
}
.main4 .left{
   width: 26.25rem;
   background-color: var(--main-color);
   border-radius: 10px;
   position: relative;
}
.main4 .left > a{
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   gap: 5rem;
   padding: 2.5rem;
}
.main4 .left .txt-box{
   text-align: center;
}
.main4 .left .txt-box h3{
   font-size: 2.625rem;
   margin: 0 0 1.25rem;
   color: #fff;
}
.main4 .left .txt-box p{
   font-size: 1.5rem;
   line-height: 1.5;
   color: #fff;
}
.main4 .left .img-box{
   display: flex;
   flex-direction: column;
   gap: 1.875rem;
   align-items: flex-end;
}
.main4 .right{
   width: calc(100% - 26.25rem);
   position: relative;
}
.main4 .right .tit{
   text-align: center;
   margin: 0 0 1.875rem;
}
.main4 .right .tit h2{
   font-size: 2.625rem;
   color: var(--main-color);
   margin: 0 0 1.25rem;
}
.main4 .right .tit p{
   font-size: 1.5rem;
   line-height: 1.5;
}
.main4 .right .text-area{
   display: flex;
   gap: 1.25rem;
}
.main4 .right .text-area ul{
   width: 22.5rem;
}
.main4 .right .text-area ul li{
   display: flex;
   align-items: center;
   gap: 1.25rem;
   background: #FFFFFF;
   border-radius: 10px;
   padding: 1rem 0;
}
.main4 .right .text-area ul li p{
   color: #3D6C53;   
   padding: 0 0 0 .625rem;
   width: 5.625rem;
}
.main4 .right .text-area ul li input{
   border: 0;
   outline: none;
}
.main4 .right .text-area ul li input:focus{
   box-shadow: none;
   border: 0;
}
.main4 .right .text-area ul li:not(:last-child){
   margin: 0 0 1.25rem;
}
.main4 .right .text-area > div{
   width: calc(100% - 22.5rem);
   background: #FFFFFF;
   border-radius: 5px;
   padding: .9375rem 1.25rem;
}
.main4 .right .text-area > div p{
   color: #3D6C53;
   margin: 0 0 .625rem;
}
.main4 .right textarea{
   resize: none;
   width: 100%;
   border: 0;
   min-height: 9.375rem;
}
.main4 .right .term{
   display: none;
   background: #FFFFFF;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
   border-radius: 5px;
   padding: 1.25rem 0;
   position: absolute;
   right: 0;
   top: 0;
   width: 31.25rem;
   min-height: 16.25rem;
}
.main4 .right .term textarea{
   min-height: 11.875rem;
   background: transparent;
   padding: 0 1.25rem;
}
.main4 .right .term button{
   display: block;
   text-align: center;
   margin: .625rem auto 0;
   cursor: pointer;
   background-color: var(--main-color);
   padding: .1875rem 0;
   width: 7.5rem;
   color: #fff;
   border-radius: 5px;
   line-height: 1.5;
   border: 0;
}
.main4 .right .agree{
   text-align: right;
   margin: .625rem 0 1.25rem;
}
.main4 .right .agree input[type="checkbox"]{
   accent-color: var(--main-color);
}
.main4 .right .agree .checkblock{
   border: 0;
   outline: none;
   background-color: transparent;
}
.main4 .right .action-btn{
   padding: .75rem 0;
   font-size: 1.5rem;
   color: #fff;
   text-align: center;
   background-color: var(--main-color);
   border: 0;
   outline: 0;
   cursor: pointer;
   width: 100%;
   border-radius: 10px;
}
.xin_mo .xin_mo_custom{
   background: url(https://jnltech.gabia.io/theme/basic/pages/img/main_slide_banner_04.png) 78% center / cover no-repeat !important;
}
@media (max-width:1200px){
   .main-slide{
      margin: 0;
   }
   .main3 .cont .img-box::after{
      display: none;
   }

}

@media (max-width:1024px){
   .main-slide li{
      height: 42.8571rem;
   }
   .main-slide .slide-txt{
      padding: 9.2857rem 0 0;
   }
   .main-slide li h3{
      font-size: 1.7143rem;
   }
   .main-slide li p{
      font-size: 1.2857rem;
   }
   .main2{
      padding: 5.7143rem 0 7.1429rem;
   }
   .main2 .tit{
      margin: 0 0 2.1429rem;
   }
   .main .tit h3{
      font-size: 2rem;
      margin: 0 0 .7143rem;
   }
   .main .tit p{
      font-size: 1.2857rem;
      line-height: 1.5;
   }
   .main2 .cont{
      flex-direction: column;
      gap: 3.5714rem;
   }
   .main2 .cont .box{
      width: 100%;
   }
   .main2 .cont .box .txt-box{
      margin: 1.4286rem 0 0;
   }
   .main2 .cont .box .txt-box h5{
      font-size: 1.5rem;
   }
   .main2 .cont .box .txt-box p{
      font-size: 1.1429rem;
      margin: .3571rem 0 1.4286rem;
   }
   .main2 .cont .box .txt-box a{
      width: 8.5714rem;
   }
   .main3 .tit span{
      font-size: 1.1429rem;
   }
   .main3 .cont .view{
      width: 8.5714rem;
      margin: 1.4286rem auto 0;
   }
   .main3 .cont{
      gap: 10.3571rem;
      min-height: 22.8571rem;
   }
   .main3 .cont .img{
      width: 12.8571rem;
   }
   .main3 .mark.usa{
      top: 7.75rem;
      left: 6.75rem;
   }
   .main3 .mark.slo{
      top: 5.5625rem;
      left: 21.5rem;
   }
   .main3 .mark.kor{
      top: 6.75rem;
      right: 6rem;
   }
   .main3 .bigmark{
      top: 8.25rem;
      right: 8.8125rem;
   }
   .main4{
      min-height: unset;
      padding: 7.1429rem 0;
   }
   .main4 > div{
      flex-direction: column;
      gap: 2.1429rem;
   }
   .main4 .left{
      width: 100%;
      height: 12.8571rem;
   }
   .main4 .right{
      width: 100%;
   }
   .main4 .left > a{
      gap: unset;
      padding: .7143rem;
   }
   .main4 .left .txt-box h3{
      font-size: 2rem;
      margin: 0 0 .7143rem;
   }
   .main4 .left .txt-box p{
      font-size: 1.2857rem;
   }
   .main4 .left .img-box{
      gap: .7143rem;
      position: absolute;
      right: .7143rem;
      bottom: .7143rem;
   }
   .main4 .left .img-box img:first-of-type{
      width: 2.8571rem;
   }
   .main4 .left .img-box img:last-of-type{
      width: 5.7143rem;
      height: 5.7143rem;
   }
   .main4 .right .tit h2{
      font-size: 2rem;
      margin: 0 0 .7143rem;
   }
   .main4 .right .tit p{
      font-size: 1.2857rem;
   }
   .main4 .right .text-area{
      flex-direction: column;
      gap: 1.0714rem;
   }
   .main4 .right .text-area ul{
      width: 100%;
   }
   .main4 .right .text-area ul li{
      padding: .5rem 0;
      gap: .7143rem;
   }
   .main4 .right .text-area > div{
      width: 100%;
      padding: .7143rem;
   }
   .main4 .right .text-area ul li:not(:last-child){
      margin: 0 0 1.0714rem;
   }
   .main4 .right .text-area ul li p{
      font-size: 1rem;
   }
   .main4 .right .agree .checkblock{
      font-size: .8571rem;
   }
   .main4 .right .agree{
      margin: .7143rem 0;
   }
   .main4 .right .action-btn{
      font-size: 1.2857rem;
      padding: .7143rem 0;
   }
   .main4 .right .term textarea{
      font-size: .7857rem;
   }
   .main3 .cont .worldmap{
      background-size: contain !important;
   }
   .main3 .mark img,
   .main3 .bigmark .vie img{
      width: 1.2857rem;
      height: 1.2857rem;
   }
   .main3 .mark span,
   .main3 .bigmark .vie span{
      font-size: .5714rem;
   }
   .main3 .bigmark .spread-circle{
      width: 4.2857rem;
      height: 4.2857rem;
   }
   .main3 .bigmark .vie::after{
      transform: translateY(-50%) rotate(145deg);
      right: .3571rem;
   }
   .main4 .right .term{
      width: 100%;
   }
}

@media (max-width:425px){
   .main3 .mark.usa{
      left: 4.3rem;
   }
   .main3 .mark.slo{
      top: 6.5625rem;
      left: 14.5rem;
   }
   .main3 .mark.kor{
      top: 7.75rem;
      right: 4rem;
   }
   .main3 .bigmark{
      top: 9.25rem;
      right: 5.8125rem;
   }
}
@media (max-width:375px){
   .main3 .mark.usa{
      left: 3.3rem;
      top: 8.2rem;
   }
   .main3 .mark.slo{
      top: 7.2rem;
      left: 11.5rem;
   }
   .main3 .mark.kor{
      right: 3rem;
   }
   .main3 .bigmark{
      right: 4.8125rem;
   }
}