.wrap{width: 100%; overflow: hidden;}
.inner{max-width: 1200px; width: 95%; margin: 0 auto;}
.main-tit{position: relative; display: inline-block; padding-top: 15px; padding-right: 30px; font-family: var(--font-esamanruOTF); font-size: 55px; font-weight: bold; text-align: left; color: #000;}
.main-tit::after{content: ""; position: absolute; right: 0; top: 0; display: block; width: 60px; height: 60px; border-radius: 50%; opacity: 0.15; background-color: var(--main-color);}
.main-tit.default{padding-top: 0; padding-right: 0; color: #fff;}
.main-tit.default::after{display: none;}
.main-titSub{font-size: 18px; font-weight: 500; text-align: left; color: #000; word-break: keep-all;}

.main__section01{position: relative;}
.main__section01 .main__section01__swiper{}
.main__section01 .main__section01__swiper .section01__txt-wrap{position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); width: 100%; height: calc(100% - 75px); display: flex; align-items: flex-end;}
.main__section01 .main__section01__swiper .section01__txt-wrap .main__txt{display: flex; flex-direction: column; align-items: center;}
.main__section01 .main__section01__swiper .section01__txt-wrap .main__txt h2{font-family: var(--font-esamanruOTF); font-size: 30px; text-align: center; color: var(--main-color);}
.main__section01 .main__section01__swiper .section01__txt-wrap .main__txt h1{position: relative; width: 100%; font-family: var(--font-esamanruOTF); font-size: 100px; text-align: center; color: #fff;}
.main__section01 .main__section01__swiper .section01__txt-wrap .main__txt h1::after{content: ""; position:absolute; bottom: 0; left: 0; display: block; width: 100%; height: 1px; background-color: rgba(255,255,255,0.2);}
.main__section01 .main__section01__swiper .section01__txt-wrap .main__txt p{font-size: 20px; font-weight: 600; text-align: center; color: #fff; word-break: keep-all;}
.main__section01 .main__section01__swiper .section01__txt-wrap .position-right{display: flex; justify-content: flex-end;}

.main__section01 .main__section01__swiper .swiper-slide{height: 1000px;}
.main__section01 .main__section01__swiper .swiper-slide.slide01{background: url('../img/main/visual_01.png') no-repeat center/cover;}
.main__section01 .main__section01__swiper .swiper-slide.slide02{background: url('../img/main/visual_02.png') no-repeat center/cover;}
.main__section01 .main__section01__swiper .swiper-slide.slide03{background: url('../img/main/visual_03.png') no-repeat center/cover;}
.main__section01 .progress-block{display: flex; align-items: center; max-width: 500px; width: 100%;}
.main__section01 .progress-block .pageNum{margin-left: 20px; display: flex; font-family: 'GmarketSansLight'; font-size: 14px; line-height: 1; letter-spacing: 0.35px; text-align: left; color: #fff;}
.main__section01 .progress-block .pageNum span{font-family: 'GmarketSansBold';}
.main__section01 .progress-block .pro-bar-wrap{width: 140px; height: 2px; background: rgba(255,255,255,.5);}
.main__section01 .progress-block .pro-bar{bottom:0; left:0; width:0; height:100%; background: var(--main-color);}
.main__section01 .progress-block .progress-btns{margin-left: 20px; display: flex; height: 14px;}
.main__section01 .progress-block .progress-btns button{display: flex; background-color: transparent; border: 0; align-items: center;}
.main__section01 .swiper-arrow{position: absolute; width: 100%; left: 50%; top: 50%; transform: translate(-50%,-50%); height: 60px; z-index: 3;}
.main__section01 .swiper-arrow .arrow{position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 60px; height: 60px; background-color: transparent; border: 0; cursor: pointer;}
.main__section01 .swiper-arrow .arrow.arrow-left{left: 60px;}
.main__section01 .swiper-arrow .arrow.arrow-right{right: 60px;}
.main__section01 .swiper-arrow.mo{display: none;}
.pro-ani{animation-name: proBar; animation-duration:4s; animation-iteration-count: 1; animation-timing-function: ease-in-out; width:100%;}

@keyframes proBar{
    0%{width:0;}
    100%{width:100%;}
}
.main__section01 .scroll-block{position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; z-index: 2;}
.main__section01 .scroll-block span{font-family: var(--font-GmarketSansMedium); font-size: 12px; font-weight: 500; text-align: center; color: #fff; text-transform: uppercase;}
.main__section01 .scroll-block .verLine{display: block; width: 1px; height: 30px; margin-top: 15px; background-color: #fff;}


.main__section02{}
.main__section02 .main__section02__tit{}
.main__section02 .main__section02__tit span{font-family: var(--font-esamanruOTF); font-size: 18px; font-weight: bold; text-align: left;}
.main__section02 .main__section02__tit h5{font-size: 55px; font-weight: bold; line-height: 1.23; letter-spacing: -1.38px; text-align: left; color: #999;}
.main__section02 .main__section02__diagram{background: url('../img/main/bg_01.png') no-repeat center/cover;}
.main__section02 .main__section02__diagram .diagram{width: 1200px; height: 460px; margin: auto; position: relative;}
.main__section02 .main__section02__diagram .diagram li{position: absolute; width: 460px; height: 460px; padding: 110px; display: flex; flex-direction: column; align-items: center; border-radius: 50%; border: solid 3px #fff; box-sizing: border-box;}
.main__section02 .main__section02__diagram .diagram li span.num{font-family: 'GmarketSansBold'; font-size: 25px; text-align: center; color: #fff;}
.main__section02 .main__section02__diagram .diagram li span.verLine{display: block; width: 1px; height: 30px; background-color: #fff;}
.main__section02 .main__section02__diagram .diagram li h5{font-family: var(--font-esamanruOTF); font-size: 40px; font-weight: bold; text-align: center; color: #fff; text-transform: uppercase;}
.main__section02 .main__section02__diagram .diagram li b{display: inline-block; margin-top: 5px; font-size: 30px; font-weight: 600; line-height: 1; text-align: center; color: #fff;}
.main__section02 .main__section02__diagram .diagram li p{font-size: 18px; line-height: 1.39; letter-spacing: normal; text-align: center; color: #fff; word-break: keep-all;}
.main__section02 .main__section02__diagram .diagram li:nth-child(2){left: 370px;}
.main__section02 .main__section02__diagram .diagram li:last-child{right: 0;}


.main__section03{position: relative;}
.main__section03::before{content: ""; position: absolute; bottom: 0; z-index: -1; display: block; width: 100%; height: 260px; background-color:  #e6e6e6;}
.main__section03 .main__section03__tit{align-items: flex-end; justify-content: space-between;}
.main__section03 .main__section03__tit .main__section03__arrow{display: flex;}
.main__section03 .main__section03__tit .main__section03__arrow a{font-size: 16px; transition: all .3s;}
.main__section03 .main__section03__tit .main__section03__arrow a:hover{color: var(--main-color);}
.main__section03 .main__section03__tit .main__section03__arrow button{position: relative; border: 0; background-color: transparent; box-sizing: border-box;}
.main__section03 .main__section03__tit .main__section03__arrow button:first-child{padding-right: 30px;}
.main__section03 .main__section03__tit .main__section03__arrow button:first-child::after{content: ""; position: absolute; right:0; top: 50%; transform: translateY(-50%); display: block; width: 1px; height: 30px; background-color: rgba(255,255,255,.5);}
.main__section03 .main__section03__tit .main__section03__arrow button + button{margin-left: 30px;}
.main__section03 .main__section03__tit .main__section03__arrow button img{width: 22px;}
/* .main__section03 .main__section03__swiper{width: calc(380px * 3 + 120px + 330px * 2 ); left: 50%; margin-left: calc((380px * 3 + 120px + 330px * 2 + 360px * 2) / -2); overflow: initial !important;} */
.main__section03 .main__section03__swiper{overflow: visible; max-width: 1200px; margin: 100px auto 0;}
/* .main__section03 .main__section03__swiper .swiper-wrapper{padding: 0 18.75%;} */
.main__section03 .main__section03__swiper .swiper-slide{min-width: 380px !important; height: 380px; border-radius: 50px; transition: all .3s;}
.main__section03 .main__section03__swiper .swiper-slide.slide01{background: url('../img/main/product_01.png') no-repeat center/cover;}
.main__section03 .main__section03__swiper .swiper-slide.slide02{background: url('../img/main/product_02.png') no-repeat center/cover;}
.main__section03 .main__section03__swiper .swiper-slide.slide03{background: url('../img/main/product_03.png') no-repeat center/cover;}
.main__section03 .main__section03__swiper .swiper-slide.slide04{background: url('../img/main/product_04.png') no-repeat center/cover;}
.main__section03 .main__section03__swiper .swiper-slide.slide05{background: url('../img/main/product_05.png') no-repeat center/cover;}
.main__section03 .main__section03__swiper .swiper-slide.slide06{background: url('../img/main/product_06.png') no-repeat center/cover;}
.main__section03 .main__section03__swiper .swiper-slide.slide07{background: url('../img/main/product_07.png') no-repeat center/cover;}
.main__section03 .main__section03__swiper .swiper-slide .slide-inner{display: flex; width: 100%; height: 100%; align-items: flex-end; padding: 60px 50px; box-sizing: border-box;}
.main__section03 .main__section03__swiper .swiper-slide .slide-inner h5{font-family: var(--font-esamanruOTF); font-size: 30px; font-weight: bold; text-align: left; color: #fff;}
.main__section03 .main__section03__swiper .swiper-slide.swiper-slide-active{margin-top: -40px;}



.main__notices{position: relative;}
.main__notices::after{content: ""; position: absolute; bottom: 0; z-index: -1; display: block; width: 100%; height: 180px; background-color: #f5f5f5;}



.main__contactUs{}
.main__contactUs form{}
.main__contactUs form fieldset{}
.main__contactUs form fieldset .left{width: 49.16%;}
.main__contactUs form fieldset .left input{width: 100%; height: 50px; padding: 20px; border-radius: 10px; border: solid 1px #e6e6e6; background-color: #fff; box-sizing: border-box;}
.main__contactUs form fieldset .left input + input{margin-top: 10px;}
.main__contactUs form fieldset .left input::placeholder{font-size: 16px; line-height: 1.56; text-align: left; color: #000;}
.main__contactUs form fieldset .right{width: 49.16%; margin-left: 1.66%;}
.main__contactUs form fieldset .right textarea{width: 100%; height: 230px; padding: 20px; border-radius: 10px; border: solid 1px #e6e6e6; background-color: #fff; box-sizing: border-box; resize: none;}
.main__contactUs form fieldset .right textarea::placeholder{font-size: 16px; line-height: 1.56; text-align: left; color: #000;}
.main__contactUs form .contactUs__btn{min-width: 160px; height: 50px; display: inline-flex; align-items: flex-end; padding: 17px 28px 13px; border-radius: 25px; border: solid 1px var(--main-color); background-color: var(--main-color); box-sizing: border-box;}
.main__contactUs form .contactUs__btn span{font-family: 'GmarketSansMedium'; font-size: 18px; font-weight: 500; text-align: left; color: #fff;}
.main__contactUs form .contactUs__btn img{margin-bottom: 6px; margin-left: 15px;}





@media (max-width:1280px){
    .main__section01 .swiper-arrow .arrow.arrow-left{left: 0;}
    .main__section01 .swiper-arrow .arrow.arrow-right{right: 0;}

    .main__section03 .main__section03__swiper .swiper-slide{min-width: initial !important;}
    .main__section03 .main__section03__swiper{width: 95%; margin-left: 2.5%; left: initial;}
}

@media (max-width:1024px){
    .main__section01 .main__section01__swiper .swiper-slide{height: 950px;}
    .main__section01 .main__section01__swiper .section01__txt-wrap .position-right{justify-content: center;}
    .main__section01 .progress-block{justify-content: center;}
    .main__section01 .main__section01__swiper .section01__txt-wrap .main__txt h1{font-size: 80px;}

    .main__section03 .main__section03__swiper .swiper-slide .slide-inner{padding: 40px;}
}

@media (max-width:769px){
    .main-tit{font-size: 36px;}

    .main__section01 .main__section01__swiper .swiper-slide{height: 650px;}
    .main__section01 .main__section01__swiper .section01__txt-wrap{height: initial; top: 50%; transform: translate(-50%, -50%);}
    .main__section01 .main__section01__swiper .section01__txt-wrap .main__txt h2{font-size: 24px;}
    .main__section01 .main__section01__swiper .section01__txt-wrap .main__txt h1{padding-bottom: 15px; font-size: 36px;}
    .main__section01 .main__section01__swiper .section01__txt-wrap .main__txt p{margin-top: 25px; font-size: 16px;}
    .main__section01 .progress-block{margin-top: 35px;}
    
    
    .main__section02 .main__section02__diagram{padding-top: 100px; padding-bottom: 70px;}
    .main__section02 .main__section02__tit h5{font-size: 32px;}
    .main__section02 .main__section02__diagram .diagram{width: 830px; height: 320px;}
    .main__section02 .main__section02__diagram .diagram li{width: 320px; height: 320px; padding: 40px; justify-content: center;}
    .main__section02 .main__section02__diagram .diagram li:nth-child(2){left: 255px;}
    .main__section02 .main__section02__diagram .diagram li span.verLine{height: 20px;}
    .main__section02 .main__section02__diagram .diagram li h5{font-size: 24px;}
    .main__section02 .main__section02__diagram .diagram li b{font-size: 24px;}
    
    .main__section03{padding-bottom: 80px;}
    .main__section03 .main__section03__tit{flex-direction: column; align-items: flex-start;}
    .main__section03 .main__section03__tit .main__section03__arrow a{margin-top: 35px;}
    .main__section03::before{height: 45%;}
    .main__section03 .main__section03__tit .main__section03__arrow button img{width: 18px;}
    .main__section03 .main__section03__swiper .swiper-slide{height: 320px;}
    .main__section03 .main__section03__swiper .swiper-slide .slide-inner{padding: 40px;}
    .main__section03 .main__section03__swiper .swiper-slide .slide-inner h5{font-size: 24px;}

    .main__notices{}
    .main__notices .pic_li_lt ul{flex-wrap: wrap; width: 100%;}
    .main__notices .pic_li_lt li{width: 49.11%; margin-top: 1.66%;}
    .main__notices .pic_li_lt li:nth-child(3n){margin-left: 0;}
}

@media (max-width:500px){
    .main-tit{font-size: 20px;}
    .main-tit::after{width: 45px; height: 45px;}
    .main-titSub{font-size: 14px;}

    .main__section01 .main__section01__swiper .inner{padding: 0px;}
    .main__section01 .main__section01__swiper .inner .main__txt .mark img{width: 185px;}
    .main__section01 .main__section01__swiper .inner .main__txt .mark p{font-size: 24px;}
    .main__section01 .main__section01__swiper .inner .main__txt>p{padding: 0 10px; font-size: 16px;}
    .main__section01 .swiper-arrow .arrow{width: initial; height: 25px;}
    .main__section01 .swiper-arrow .arrow img{height: 100%;}
    .main__section01 .main__section01__swiper .swiper-slide{height: calc(100vh - 50px - 80px);}
    .main__section01 .main__section01__swiper .section01__txt-wrap .main__txt h2{font-size: 16px; line-height: 1.6;}
    .main__section01 .main__section01__swiper .section01__txt-wrap .main__txt h1{font-size: 20px;}
    .main__section01 .main__section01__swiper .section01__txt-wrap .main__txt p{margin-top: 15px; font-size: 14px;}

    .main__section02{padding-top: 80px;}
    .main__section02 .main__section02__tit span{font-size: 14px;}
    .main__section02 .main__section02__tit h5{font-size: 20px;}
    .main__section02 .main__section02__diagram{padding: 80px 0 50px;}
    .main__section02 .main__section02__diagram .diagram{width: 630px; height: 230px;}
    .main__section02 .main__section02__diagram .diagram li{width: 235px; height: 235px;}
    .main__section02 .main__section02__diagram .diagram li:nth-child(2){left: 198px;}
    .main__section02 .main__section02__diagram .diagram li span.num{font-size: 18px;}
    .main__section02 .main__section02__diagram .diagram li span.verLine{margin-top: 5px;}
    .main__section02 .main__section02__diagram .diagram li h5{margin-top: 10px; font-size: 18px;}
    .main__section02 .main__section02__diagram .diagram li b{font-size: 18px;}
    .main__section02 .main__section02__diagram .diagram li p{margin-top: 10px; font-size: 14px;}

    .main__section03{padding: 80px 0 60px;}
    .main__section03::before{height: 40%;}
    .main__section03 .main__section03__tit .main__section03__arrow button img{width: 15px;}
    .main__section03 .main__section03__tit .main__section03__arrow button:first-child{padding-right: 20px;}
    .main__section03 .main__section03__tit .main__section03__arrow button + button{margin-left: 20px;}
    .main__section03 .main__section03__swiper{margin-top: 60px;}
    .main__section03 .main__section03__swiper .swiper-slide{height: 280px; border-radius: 35px;}
    .main__section03 .main__section03__swiper .swiper-slide .slide-inner{padding: 20px;}
    .main__section03 .main__section03__swiper .swiper-slide.swiper-slide-active{margin-top: -20px;}

    .main__section03 .main__section03__swiper .swiper-slide .slide-inner h5{font-size: 20px;}

    .main__contactUs form fieldset{flex-wrap: wrap;}
    .main__contactUs form fieldset .left{width: 100%;}
    .main__contactUs form fieldset .right{width: 100%; margin-left: 0; margin-top: 10px;}
    .main__contactUs form .contactUs__btn span{font-size: 16px;}
    .main__contactUs form fieldset .left input{height: 40px; padding: 0 10px; font-size: 14px;}
    .main__contactUs form fieldset .left input::placeholder{font-size: 14px;}
    .main__contactUs form fieldset .right textarea{height: 180px; padding: 10px; font-size: 14px;}
    .main__contactUs form fieldset .right textarea::placeholder{font-size: 14px;}
}

@media (max-width:375px){
    .main__notices .pic_li_lt li{width: 100%; padding: 35px 20px;}
    .main__notices .pic_li_lt li + li{margin-left: 0;}
}