﻿@charset "utf-8";
@import url("/1688easy/Library/Css/font/Pretendard/web/static/pretendard.css");

/* 1688 easy 메인 Css */
body, html { margin:0; padding:0; }
#menu{position:fixed; top:0; left:0; z-index: 70; width:100%; }
.section{ position: relative;/*상단헤드 높이*/; height:900px; width:100%; overflow:hidden;font-family: 'Pretendard';}
.section p{font-family: 'Pretendard';}
article
        {
            display: flex;
            height: 100vh!important;
            overflow-y: auto;
            font: 100px 'Inter';
            color: white;
            flex-direction: column;
            align-items: center;
            justify-content: center; padding-top:40px
        }
#section0{background:#ffa94d}
#section1{background:#fff7e2}
#section2{background:#ff4949}
#section3{background:#ffe4e4}
#section4{background:#fff68d}
#section5{background:#fffbca}


.section .Dwidth{position:relative;  }
.section .Dwidth .inner {position: relative; width:100%;}
.section h1{font-size:50px; color:#fff; font-weight:800;font-family: 'Pretendard'; margin-bottom:30px; text-align:center}
.section .txt{font-size:28px; color:#242424; font-weight:700;line-height:1.3em; text-align:center}
span.point{color:#fe5a00}
span.fs14{font-size:14px; }

#section0  .txt span{color:#ff4202}
#section0 .con1{display:table; margin:30px auto 40px;}
#section0 .con1 div{float:left; font-size:28px;  font-weight:700;border:5px solid #ffa94d;height:50px; line-height:50px;}
#section0 .con1 .con_id{font-size:40px;  }
#section0 .con1 .con_txt{background:#fff; border:5px solid #fe5a00; border-radius:3px; color:#242424;padding:0px 10px}
#section0 .con1 span{display:inline-block; position:Relative;}
#section0 .con2{background:#fff;border:5px solid #fe5a00;border-radius:15px;padding:20px;overflow:hidden; width:85%; margin:0 auto;position:Relative}
#section0 .con2 .img-box{border-radius:15px;padding:0px;box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); float:left;  }
#section0 .con2 .img-box img{ display:block;padding:10px;}
#section0 .con2 .txt-box{width:400px;position:absolute; right:35px; top:50%; transform:translateY(-50%)}
#section0 .con2 .txt-box h2{color:#242424; font-weight:700;font-family: 'Pretendard';font-size:28px; text-align:center}
#section0 .con2 .txt-box ul {margin-top:25px;}
#section0 .con2 .txt-box ul li{background:url(/1688pay/image/main/bl.png) center left no-repeat; padding-left:30px; display:block;font-size:23px;font-family: 'Pretendard';color:#242424; font-weight:700; margin:5px 0px}


#section1 h1{color:#000;}
#section1 h1 .point{color:#fe4e00}
#section1 .con1{position:relative; width:475px;height:439px; margin:0 auto}
#section1 .ico-wp{width:185px; height:185px; position:absolute; }
#section1 .ico{width:100%; height:100%; border-radius:185px;background:#fff66a;box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);  padding-top:15px; box-sizing:border-box;position:RElative}
#section1 .img-box{height:133px;}
#section1 .img-box img{margin:0 auto;display:block;position:Relative;top:50%;transform:translateY(-50%);}
#section1 .ico p{text-align:Center;font-weight:bold; font-size:14px; color:#000}
#section1 .step1{top:0px; left:50%; transform:translateX(-50%);}
#section1 .step2{ bottom:5px; left:0px;}
#section1 .step3{ bottom:5px; right:0px;}
#section1 .arrow1{position:absolute; top:185px; left:130px;}
#section1 .arrow2{position:absolute; bottom:80px; left:50%; transform:translateX(-50%);}
#section1 .step1_text,#section1 .step2_text,#section1 .step3_text{font-size:17px; color:#000; font-weight:700; position:Absolute}
#section1 .step1_text{left:20px;top:180px;}
#section1 .step2_text{left:20px;top:200px;}
#section1 .step3_text{bottom:50px; left:50%; transform:translateX(-50%);}
#section1  .txt{margin-top:30px;color:#000;}
#section1  .txt span {color:#fe4e00; text-decoration:underline}
#section1  .txt p{font-size:22px; margin:0px; padding-top:20px;color:#242424; }
#section1  .txt p span {color:#ff2525; text-decoration:none}

#section2 {}
#section2 .slider-wp{width:100%; height:645px; position:Relative;}
#section2 .slider-wp .slick-dots {position:absolute; top:0px; left:0px; width:100%;}
#section2 .slider-wp .slick-dots li{width:200px; height:59px; border-radius:59px; background:#fffee7; border:0px;}
#section2 .slider-wp .slick-dots li button{display:none}
#section2 .slider-wp .slick-dots li:after{ display:block;width:200px; height:59px; line-height:59px; border-radius:59px; background-color:#fffee7; top:0px; left:0px;color:#440000; font-weight:700;font-size:23px;font-family: 'Pretendard';}
#section2 .slider-wp .slick-dots li:nth-child(1):after{ content:'비정상 해외송금';}
#section2 .slider-wp .slick-dots li:nth-child(2):after{ content:'불법 환치기';}
#section2 .slider-wp .slick-dots li:nth-child(3):after{ content:'제3자 지급 위반';}
#section2 .slider-wp .slick-dots li:nth-child(4):after{ content:'불법 개인 송금';}
#section2 .slider-wp .slick-dots li:nth-child(5):after{ content:'사업목적 증빙 위반';}
#section2 .slider-wp .slick-dots li.slick-active:after{color:#ff0000}
#section2 .slider-con{padding-top:59px;}
#section2 .slider-con h3{text-align:Center; color:#fff66a; font-weight:700; font-size:20px; margin:30px 0px}
#section2 .con1{position:relative; width:490px;height:470px; margin:0 auto}
#section2 .ico-wp{width:185px; height:185px; position:absolute; }
#section2 .ico{width:100%; height:100%; border-radius:185px;background:#fff66a;box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);  padding-top:15px; box-sizing:border-box;position:RElative}
/*#section2 .slick-active .ico{background:red;}*/
#section2 .img-box{height:133px;  }
#section2 .img-box img{margin:0 auto;display:block;position:Relative;top:50%;transform:translateY(-50%);}
#section2 .ico p{text-align:Center;font-weight:bold; font-size:14px;color:#000}
#section2 .step1{position:absolute; top:0px; left:0%; }
#section2 .step2{position:absolute; top:0px; right:0%; }
#section2 .step3{position:absolute; bottom:5px; left:0px;}
#section2 .step4{position:absolute; bottom:5px; right:0px;}
#section2 .arrow1{position:absolute; top:80px;left:50%; transform:translateX(-50%);}
#section2 .arrow2{position:absolute; top:155px; left:50%; transform:translateX(-50%);}
#section2 .arrow3{position:absolute; bottom:80px;left:50%; transform:translateX(-50%);}
#section2 .arrow4{position:absolute; top:50%;right:80px; transform:translateY(-50%);}
#section2 .step1_text,#section2 .step2_text,#section2 .step3_text,#section2 .step4_text{font-size:17px; color:#000; font-weight:700; position:Absolute}
#section2 .step1_text{top:112px;left:50%; transform:translateX(-50%);text-align:center}
#section2 .step2_text{top:220px; left:60%; transform:translateX(-50%); text-align:center}
#section2 .step3_text{bottom:50px; left:50%; transform:translateX(-50%);}
#section2 .step4_text{top:49%;right:45px; transform:translateY(-50%);}

#section3 h1{color:#000}
#section3 h1 span{color:#fe5a00}
#section3 .slider-wp{width:100%; height:445px; position:Relative;}
#section3 .slider-wp .slick-dots {position:absolute; top:0px; left:0px; width:100%;}
#section3 .slider-wp .slick-dots li{width:200px; height:59px; border-radius:59px; background:#fffee7; border:0px;}
#section3 .slider-wp .slick-dots li button{display:none}
#section3 .slider-wp .slick-dots li:after{ display:block;width:200px; height:59px; line-height:59px; border-radius:59px; background-color:#fffee7; top:0px; left:0px;color:#440000; font-weight:700;font-size:23px;font-family: 'Pretendard';}
#section3 .slider-wp .slick-dots li:nth-child(1):after{ content:'계정 우대';}
#section3 .slider-wp .slick-dots li:nth-child(2):after{ content:'최저가 수입';}
#section3 .slider-wp .slick-dots li:nth-child(3):after{ content:'완벽한 증빙';}
#section3 .slider-wp .slick-dots li.slick-active:after{color:#ff0000}
#section3 .slider-con{padding-top:59px;}
#section3 .slider-con ul{display:table; margin:30px auto;}
#section3 .slider-con ul:after{content:""; display:block; clear:both;}
#section3 .slider-con ul li{float:left; padding:0px 8px;}
#section3 .slider-con ul li .card{width:212px; height:332px; background:#fff; border-radius:25px; padding:45px 0px; box-sizing:border-box}
#section3 .slider-con ul li .card .img-box{height:124px; }
#section3 .slider-con ul li .card img{margin:0 auto;display:block;position:Relative;top:50%;transform:translateY(-50%);}
#section3 .slider-con ul li .card h3{font-weight:700; font-size:23px; text-align:center ;font-family: 'Pretendard';color:#242424; margin:25px 0px}
#section3 .slider-con ul li .card p{text-align:center ;color:#242424;font-size:15px;font-weight:700; }
#section3  .txt span {color:#fe4e00; }
#section3  .txt p{font-size:22px; margin:0px; padding-top:20px;color:#242424; }
#section3  .txt p span {color:#242424; text-decoration:underline}


#section4 h1{color:#000}
#section4  .txt span {color:#ff4f00; }
#section4 .con-wp{overflow:hidden;margin-top:35px; position:relative}
#section4 .con-wp:after{content:""; display:block;width:15px; height:100%; background:#f8ffb9;border-radius:15px;position:absolute; top:0px; left:50%; transform:translateX(-50%);}
#section4 .con-wp .con{width:50%; float:left;}
#section4 .con-wp .con .step{width:254px; height:44px; line-height:44px;border-radius:44px; color:#fff; font-weight:700; font-size:28px; text-align:center; margin:0 auto;background:#ff9c00}
#section4 .con-wp .con .img-box{height:380px;}
#section4 .con-wp .con .img-box img{margin:0 auto;display:block;position:Relative;top:50%;transform:translateY(-50%);}
#section4 .con-wp .con p{color:#262626; font-size:23px; font-weight:700; text-align:Center}
#section4 .con-wp .con p  span { text-decoration:underline}

#section5 h1{color:#000}
#section5  h1 span {color:#ff3131; }
#section5  .con-wp{height:493px; position:relative;background:url(/1688pay/image/main/bg.png) bottom center no-repeat}
#section5  .ico{position:absolute; bottom:70px; right:130px;}
#section5  .bar-wp{position:absolute; bottom:130px; left:50%;transform:translateX(-50%); }
#section5  .bar{width:680px; height:20px; background:#313131; border-radius:20px; transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,20deg)}
#section5  .bar span{display:block; width:13px; height:13px; border-radius:13px; background:#ffd800; margin:0px auto; position:Relative; top:3px;}
#section5  .left-txt{position:absolute; bottom:285px; left:155px; font-size:23px; font-weight:700; color:#4c4c4c; text-align:Center; width:200px}
#section5  .left-txt div{opacity:0}
#section5  .left-txt .t1{display:block;}



/* -------------------------------------------------------------- */
/* 05. Scripts Styles
----------------------------------------------------------------- */

/* ---------------------------------- */
/* Slick Slider
------------------------------------- */
/* Slider */
.slick-slider {position: relative; display: block; box-sizing: border-box;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list {position: relative; display: block;overflow: hidden;margin: 0; padding: 0;}
.slick-list:focus {outline: none;}
.slick-list.dragging {cursor: pointer; cursor: hand;}
.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}
.slick-track { position: relative; top: 0; left: 0;display: block;margin-left: auto;margin-right: auto;}
.slick-track:before,
.slick-track:after {display: table;content: '';}
.slick-track:after {clear: both;}
.slick-loading .slick-track {visibility: hidden;}
.slick-slide { display: none; float: left;height: 100%;min-height: 1px;}
[dir='rtl'] .slick-slide {float: right;}
.slick-slide img {display: block;}
.slick-slide.slick-loading img {isplay: none;}
.slick-slide.dragging img {pointer-events: none;}
.slick-initialized .slick-slide {display: block;}
.slick-loading .slick-slide {visibility: hidden;}
.slick-vertical .slick-slide { display: block;height: auto;border: 1px solid transparent;}
.slick-arrow.slick-hidden {display: none;}

/* Slider */
/*.slick-loading .slick-list {
    background: #fff url('./ajax-loader.gif') center center no-repeat;
}
*/

/* Arrows */
.slick-prev,
.slick-next {font-size: 0; line-height: 0; position: absolute;  top: 56%; display: block;padding: 0; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%);
    transform: translate(0, -50%); cursor: pointer; border: none; outline: none;  background: none; border-radius: 4px; width: 40px; height: 40px;display: block;
    top: calc(50% 0px); transform: translateY(-50%);transition: 0.3s;  box-sha dow: 0 3px 12px rgba(0,0,0,0.15);  z-index: 10;}
.slick-prev:hover,
.slick-next:hover {color: transparent;outline: none; }
.slick-prev:hover:before,
.slick-next:hover:before {opacity: 1;}
.slick-prev.slick-disabled,
.slick-next.slick-disabled {pointer-events: none;cursor: default;background-color: none;box-shadow: none;}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {color: #808080;}
.slick-prev:before,
.slick-next:before { font-size: 36px;line-height: 1;opacity: 1;transition: 0.3s;position: relative;color: #440000; font-weight:bold}
.slick-prev { left: 90px; }
.slick-prev:before {  content: '<'; left: -1px; }
.slick-next {  right: 90px; }
.slick-next:before { content: '>'; right: -1px; }
/* Dots */
.slick-dots {margin: 0 auto;padding: 0;text-align: center;}
.slick-dots li {position: relative; display: inline-block;padding: 0; margin: 0 3px;cursor: pointer;}


/* Reset */
.slick-slide { display: none; outline: none; }
.slick-initialized .slick-slide { display: block; }
.default-slick-carousel .slick-carousel-item { margin: 0px; }
.default-slick-carousel {height: auto;width: calc(100% + 0px);left: 0px;}
.default-slick-carousel,
.testimonial-carousel,
.logo-carousel,
.blog-carousel { display: none; }
.default-slick-carousel.slick-initialized,
.testimonial-carousel.slick-initialized,
.logo-carousel.slick-initialized,
.blog-carousel.slick-initialized { display: block; }

 
 