@font-face {
  font-family: "GmarketSans";
  font-weight: 300;
  src: url('/theme/stock/css/GmarketSansLight.woff2') format(woff);
}
@font-face {
  font-family: "GmarketSans";
  font-weight: 500;
  src: url('/theme/stock/css/GmarketSansMedium.woff2') format(woff);
}
@font-face {
  font-family: "GmarketSans";
  font-weight: 800;
  src: url('/theme/stock/css/GmarketSansBold.woff2') format(woff);
}

@font-face {
	font-family: 'Pretendard Variable';
	font-weight: 45 920;
	font-style: normal;
	font-display: swap;
	src: local('Pretendard Variable'), url('/theme/stock/css/PretendardVariable.woff2') format('woff2-variations');
}

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,article,aside,canvas,details,embed,html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,button, input, textarea{ font-family: 'Pretendard Variable', 'Montserrat', Malgun Gothic,'Malgun Gothic', sans-serif; margin:0;padding:0;border:0; line-height:150%; letter-spacing:normal;  word-break: keep-all;} /* delete vertical-align,font:inherit; */

body,html{width:100%; font-size:18px; color: #444; font-weight:400; font-family: 'Pretendard Variable', 'Montserrat', Malgun Gothic,'Malgun Gothic', sans-serif; word-break: keep-all; background: #000}
*{font-family: 'Pretendard Variable', 'Montserrat', Malgun Gothic,'Malgun Gothic', sans-serif; word-break: keep-all;}
ol,ul,li{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table {border-collapse:separate;border-spacing:0; font-size:1rem;}
table caption {overflow:hidden; font-size:0; line-height:0; font-size:0.9375rem;}
tbody,tfoot,thead,tr,th,td {margin:0;line-height:160%;letter-spacing:normal;}
dt{display:block;}
hr{display:none;}
a{cursor:pointer;text-decoration:none;color:inherit;}
a, a:hover{transition:all 0.7s cubic-bezier(0.215,0.61,0.355,1);}
address{font-style:normal;}
input,select,img{vertical-align:middle;}
input:focus, textarea:focus, button:focus {outline:none;} 

 /* Chrome, Safari, Edge */
  .no-spinner::-webkit-outer-spin-button,
  .no-spinner::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* Firefox */
  .no-spinner {
    -moz-appearance: textfield;
  }
#wrap {
    width: 100%;
    min-width: 1400px;
    -webkit-transition: padding 0.4s;
    -o-transition: padding 0.4s;
    transition: padding 0.4s;
    background: url('/theme/stock/img/main-bg.png') bottom center no-repeat;
}

#hd_wrapper {padding:0 20px;}
#ft {
    padding:60px 0 90px 0;
    color:#9f9f9f;
    text-align: left;
}
#ft_wr {
    background: #272727;
    padding:40px 45px;
    border-radius: 20px;
    margin-bottom:30px;   
    width:100%;
}
#ft li {
    position: relative;
    margin-bottom:10px;
    padding-left:15px;
}
#ft li::before {
    content: '';
    position: absolute;
    background: #9f9f9f;
    width:4px;
    height:4px;
    border-radius: 4px;
    top:10px;
    margin-left:-10px;
}
.ft-link {padding-top:10px; margin-top:10px; border-top:1px solid rgba(255,255,255,0.1)}
.ft-link li {float:left; padding-right: 20px; color:#555;}
.ft-link li::before {display: none;}




/********************
랜딩페이지
********************/

.sub-inner {max-width:1000px; margin:0 auto;}
.main {width: 100%; margin:0 auto;}

.sec1 {
    position: relative;
    text-align: center;

}
.sec1 h3 {
    font-size:24px;
    color:#F9CB00;
    font-weight: 300;
    display: block;
}
.sec1 h3 span {
    font-size: 30px;
    color:#fff;
    font-weight: 600;
    border-bottom:1px solid #fff;
}
.sec1 h5 {
    color:#fff;
    margin-top:10px;
    font-size:22px;
    font-weight: 400;
    padding-bottom:30px;
    font-family: 'GmarketSans';
}

.sec1 img {
    max-width: 1000px;
    width:100%;
    margin:0 auto;
}

.fine {text-align: center; border:3px solid rgba(255,255,255,.1); padding: 40px 20px; margin:40px auto; border-radius: 10px}
.fine p {color:#fff; padding-top:20px}
.fine img {max-width:650px; width:100%; margin:0 auto;}


.join-form {
    position: relative;
    width:100%;
    background: #fff;
    padding:30px 40px;
    border-radius: 10px;
    overflow: hidden;
    margin:0 auto 20px auto;
}
.join-form  h4 {
    font-family: 'GmarketSans';
    font-weight: 900;
    text-align: center;
    font-size: 22px;
    color:#222;
    margin-bottom:20px;
}
.join-form .phone-input {
    border:1px solid #ddd;
    border-radius: 5px;
    margin:5px 0;
    display: flex;
    overflow: hidden
}
.join-form .phone-input select{
    border:0;
}
.join-form .phone-input input[type="text"] {
    padding:5px 15px;
    width: 100%;
}
.join-form input[type="checkbox"] {
    width: 20px;
    height: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    position: absolute;
    margin-left:-30px;
}

.join-form input[type="checkbox"]:checked {
    background-color: #FDE500;
    border-color: #FDE500;
}

.join-form input[type="checkbox"]:checked::after {
    content: '\2713'; /* Unicode checkmark */
    color: #222;
    font-size: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.join-form .agree {margin:20px 0; position: relative; overflow: hidden;}
.join-form .agree li {float:left; margin-right:30px;}

.join-form li:first-child label {
    font-size: 16px;
    font-weight: bold;
}
.join-form li label {
    margin-bottom: 5px;
    font-size: 14px;
    left:20px;
    text-align: left;
    display: flex;
    align-items: top;
    gap: 10px;
    padding-left:30px;
}
.join-form a.btn-join {
    clear: both;
    display: block;
    background: #FDE500;
    color:#000;
    border-radius: 5px;
    padding:10px;
    margin-top:30px;
    margin-bottom:20px;
    text-align: center;
}
.join-form p {
    font-size: 14px; 
    font-weight: bold;
    text-align: center;
    margin-bottom:10px;
}
.join-form .info {
    color:#888; font-size:12px;
}

.sec2 {
    padding:30px 0 80px 0 ; 
}
.sec2 .event {color:#fff; font-size:30px; text-align: center; padding-bottom:30px;}
.sec2 .label {
    background: #fff; 
    padding:10px 35px;
    margin-bottom: 25px;
    color:#222;
    font-size:30px;
    border-radius: 30px;
    display: block;
    font-weight: bold;
    margin:30px auto;
    max-width: 400px;
}
.sec2 .price-info {
    text-align: center;
}
.sec2 .price-info img {
    margin:0 auto;
    max-width: 446px;
    width: 100%;
}


.sec2 .price-info .price {
    
    margin-top:20px;
    color:#F9CB00;
    font-family: 'GmarketSans';
    font-size:60px;
    font-weight: 300;
}
.sec2 .price-info .price b {
    font-size: 90px;
    font-weight: bold;
}
.sec2 .price-info .price span {
    color:#877C49; 
    font-size: 22px;
}

.sec2 .price-info .price span.cost { 
    color:#F9CB00;
    font-family: 'GmarketSans';
    font-weight: 300;
    font-size:45px; 
    position: relative;
    display: block;
    margin-bottom:-20px
}

.sec2 .price-info .price span.cost::before {
    content: '';
    position: absolute;
    width:220px; height:20px;
    top:22px;
    background:url('/theme/stock/img/cost_arrow.png') top center no-repeat; 
}



.sec2 .price-info .txt {
    color: #fff;
    font-size: 35px;
    font-weight: 300;
}
.sec2 .price-info .txt span {
    font-weight: bold;
    border-bottom:1px solid #fff;
}

.sec2 .step {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    
}
.sec2 .step .list {
    width: 400px;
    margin:20px auto;
    text-align: center
}

.sec2 .step .box {
    position: relative;
    background: url('../img/bubble-white.png') center center no-repeat;
    height: 210px;
    margin-bottom:20px;
    padding-top:30px;
}

.sec2 .step .box.point {
    position: relative;
    background: url('../img/bubble-yellow.png') center center no-repeat;
    height: 210px;
    padding-top:35px;
	background-size:contain;
}
.sec2 .step .box.point h6 {font-size:28px;}
.sec2 .step .box.point li {font-size:20px;}

.sec2 .step .box h6 {
    font-size:22px;
    font-weight: bold;
    margin-bottom:10px;
    color:#222;
    text-align: center;
}
.sec2 .step .box ul {
}
.sec2 .step .box li {
    text-align: center;
    color:#333;
}
.sec2 .step .img {
    margin-bottom:28px;
    text-align: center
}

.sec2 .step .phone {text-align: center;}
.sec2 .step .phone img {max-width:350px;}
.sec2 .step .phone.last img {max-width:400px;}

.time-info {padding:70px 0 0 0; text-align: center}
.time-info img {max-width:1000px; margin:0 auto; width:100%;}

.why-info {padding:70px 0; color:#fff; font-weight: 300; font-size:32px; text-align: center; border-bottom:1px solid rgba(255,255,255,0.2)}
.why-info img {max-width:700px; margin:0 auto; width:100%;}
.why-info .img img {max-width:550px;}
.why-info h5 {font-family: 'GmarketSans'; font-weight: 300; padding-top:20px;}
.why-info p , .why-info p b {font-family: 'GmarketSans';}
.why-info p b {font-weight: bold; color:#F9CB00; font-size:40px;}

.floating {
    animation: float 3s ease-in-out infinite;
}

.sec3 {
    position: relative;
    margin:70px auto 30px auto;
    overflow: hidden;
}
.sec3 h3 {
    font-size: 50px;
    color:#fff;    
    padding:0 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 300;
    line-height: 1;
    margin-bottom:65px;
}
.sec3 h3 span {margin:0 30px;}
.sec3 h3 b {
    color:#EBAD01;
    font-weight: bold;
}

.sec3 .list ul {
    display: flex; 
    flex-wrap: wrap;
    justify-content: center;
}
.sec3 .list ul li {
    position: relative;
    width: calc(100% / 3 - 40px);
    margin:60px 20px;
    height: 240px;
    background: #272727;    
    border-radius: 30px;
}
.sec3 .list ul li .txt {    
    position: relative;
    width:380px;   
    height:24px;
}
.sec3 .list ul li img {
    width:170px;
    margin:0 auto;
    left:50%;
    margin-top:-80px;
    text-align: center;
     transform: translateX(52%);
}
.sec3 .list ul li p {
    color: #fff;
    text-align: center;
    padding-top:30px;
    font-size: 26px;
}


@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(20px);
    }
}


 .sec4 {
        margin:0 auto 50px auto;
    }

.sec4 {
    position: relative;
    margin:70px auto;
    overflow: hidden;
}
.sec4 h3 {
    font-size: 50px;
    color:#fff;    
    padding:0 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 300;
    line-height: 1;
    margin-bottom:65px;
}

.sec4 h3 b {
color:#EBAD01;
font-weight: bold;
}
.sec4 h3 span {margin:0 30px;}

.sec4 .list ul {
display: flex; 
flex-wrap: wrap
}
.sec4 .list ul li {
display: flex;
align-items: center;
padding:20px;
width: calc(100% / 2 - 20px);
height:auto;
background: #272727;    
border-radius:15px;
margin:10px;
}
.sec4 .list ul li .img {width:100px; text-align: center}
.sec4 .list ul li .img > img {
width:80px;
height:80px;
margin:0 auto 10px auto;
left:0;
text-align: center;
 transform: none;
}

.sec4 .list ul li .img b {
color: #fff;
text-align: center;
padding-top:0;
font-size: 18px;
}


.sec4 .list ul li .txt {width:calc(100% - 100px);}
.sec4 .list ul li .txt p {

margin-top:10px;
font-size: 16px;
color: #ddd;
padding-left:20px;
}


.sec5 {background: #fff; padding:40px 30px; margin:0 0 40px 0; border-radius: 10px}
.sec5 h4 {font-size: 22px; color:#222; padding:0 70px; display: flex; align-items: center; justify-content: center;
text-align: center; font-weight: 600; line-height: 1; margin-bottom:25px; font-family: "GmarketSans";}
.sec5 ul { display: flex; align-items: center; justify-content: center;}
.sec5 ul li { margin:0 20px;}
.sec5 ul li img {max-height:80px}
.sec5 p {max-width: 600px; margin:40px auto 0 auto; text-align: center; }


.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 비율 */
  height: 0;
  overflow: hidden;
    margin-bottom: 50px;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


 
     /* sticky 섹션: 충분한 세로 스크롤 공간 확보 */
    .sticky-section {
      position: relative;
        padding-bottom:60px;
        height: 100vh
        touch-action: auto; /* 모바일 터치 이벤트가 바로 작동하도록 함 */
    }
    /* sticky 영역: 항상 화면에 보이도록 */
    .sticky-wrapper {
      position: sticky;
      top: 0;
      overflow: hidden;
      display: flex;
      align-items: center;
    }
    /* 슬라이더 영역 */
    .slider {
        padding:50px 0;
      display: flex;
      transition: transform 0.3s ease-out;
    }
    .slide {
      flex: none;
      position: relative;
      overflow: hidden;
    }
    .slide img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    /* 카드 스타일 */
    .card {
      display: inline-block;
      width:580px;
      margin-right: 20px;
      vertical-align: top;
      text-align: center;
    }
.card img {width: 100%}

.card:hover img {
      transform: scale(1.1);
    transition:all .3s;
    }



.kakao-ch {background: #fff; border-radius: 10px; padding:20px; text-align: center; margin-bottom:50px;}
.kakao-ch img {max-width:652px; width:100%; margin:0 auto;}

@media all and (max-width:980px){
    .sec5 {margin:0 0 20px 0;}
    .sec5 ul li img {max-width: 100%}
    .card{width: 400px}

}

/* Popup and dim background styles */
#dim {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

#popup {
    background: white;
    padding: 40px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    max-width:800px;
    position: relative;
    z-index: 9999
}


#popup a {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 20px;
    background-color: #ccc;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}
#popup a.btn-confirm {background-color: #222}

#popup a:hover {
   opacity: .8
}
.card-img {width:100%; position: relative;}
.card-img ul{ margin-bottom:10px; clear:both; position: relative; overflow: hidden;}
.card-img li {border:1px solid #e5e5e5; margin-right:3px; float:left; padding:2px 5px; border-radius: 3px;}
.card-img li img {height: 20px;}
.card-input input {border:0; border-radius: 5px; font-size:15px; margin-bottom:5px;  line-height: 40px;}
.card-input .no-spinner4 { font-size:15px; margin-bottom:5px; margin-right:5px;}
.card-input .no-spinner2 { font-size:15px; margin-bottom:5px; margin-right:5px;}

.card-pay {background: #FBF3A7; width:100%;  color:#222; font-weight: 500; padding:10px 20px; margin:10px 0; text-align: left; font-size:15px;}
.card-pay span {font-weight: 300; font-size:13px;}


.input-box {display: flex; align-content: center; border:1px solid #e5e5e5; border-radius: 5px; padding:5px 10px; width:100%; margin-bottom:5px; line-height: 40px;}
.input-box .in {display: flex; align-content: center;  width:calc(100% - 90px); color:#888; line-height: 40px;}
.input-box .in input {width:25%;}
.input-box label { font-size:13px; line-height: 40px; width:60px; margin-right:20px;}
.input-box label strong {color:#FF6262}


#apply_btn {position:fixed;bottom:20px;right:20px;width:90px;height:90px;text-align:center; z-index:90;}
#apply_btn img {width:100%;}
#apply_btn:hover {}

.fix-btn {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 110px;
  z-index: 99999;
  background: #fae100;
  text-align: center;
  transition: bottom 0.3s ease; /* 슬라이드 효과 추가 */
}

.fix-btn.hide {
  bottom: -110px; /* 화면 밖으로 내리기 */
}
.fix-btn a {display: block; font-family: "GmarketSans"; font-weight: bold; color:#060700; font-size: 32px; padding:35px 0;}



.point {background: #18191B; padding:120px 0; width:100%;}
.point .sub-inner {overflow: hidden}
.point h2 {font-size:50px; margin-bottom:70px; color:#fff; position: relative;}
.point h2 b {color:#EBAD01; font-weight: 600}
.point h2::after {content: ''; position: absolute; width:50%; height:1px; background: #EBAD01; margin-top:30px; margin-left:30px;}

.point .list {height:350px; display: flex; justify-content: space-between; align-items: center; position: relative;}
.point .list > div {width:calc(100% / 2);}
.point .list span {padding:3px 20px; border-radius: 30px; background: #ebad01; display: inline-block; color:#222; font-size:22px; font-weight: 600}
.point .list h3 {padding:40px 0; font-size:38px; color:#fff; font-weight: 300; letter-spacing: -1.2pt;}
.point .list h3 b {font-weight: bold}
.point .list h4 {color:#aaa; font-size:28px; font-weight: 300}

.point .list.second {position: relative; margin:100px 0;}
.point .list.second .txt {position: absolute; float: right; right:0; max-width:500px;}
.point .list.second .img {position: absolute; float: left; left:0;}


.review-list li {margin-bottom:20px;}
.review-list li img {width: 100%; max-width: 800px;}
.review-list li.left {float:left; left:0;}
.review-list li.right {float: right; right:0; text-align: right;}


.recomm-list {background: #18191B; padding:120px 0; width:100%;}
.recomm-list h2 {font-size:50px; margin-bottom:40px; color:#fff; position: relative; font-weight: 300; line-height: 1.2}
.recomm-list h2 b {color:#EBAD01; font-weight: 700}

.recomm-list ul {display: flex; flex-wrap: wrap;}
.recomm-list li {width:calc(100% / 2 - 20px); margin:10px; display: flex; align-items: center; color:#fff; font-size:28px; padding:40px 0; border:1px solid #3B3E43; border-radius: 20px;}  
.recomm-list li .icon {width:160px; text-align: center;}
.recomm-list li .txt {width:calc(100% - 160px;)}


.rate {padding:120px 0 80px 0;}
.rate h3 {
    font-size: 50px;
    color:#fff;    
    padding:0 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 600;
    line-height: 1;
    margin-bottom:45px;
}
.rate h3 span {margin:0 30px;}
.rate h4 {color:#fff; font-size:40px; padding-bottom:40px; text-align: center; font-weight: 300}
.rate h4 b {color:#EBAD01; font-weight: bold}
.rate .graph-box {background: #18191B; border-radius: 20px; padding:40px; text-align: center;}
.rate .graph-box img {width:100%; max-width: 700px;}

.rate .link-list ul {display: flex; align-items:top; margin-top:100px;}
.rate .link-list ul li {width:calc(100% / 3 ); margin:20px; }
.rate .link-list ul li .img {width:170px; height:170px; border-radius: 50px; display: flex; justify-content: center; align-items: center; margin:0 auto;}
.rate .link-list ul li .kakao {background: #FFE496;}
.rate .link-list ul li .telegram {background: #E3F4FD;}
.rate .link-list ul li .youtube {background: #FFE9E8;}
.rate .link-list ul li .txt {padding-top:30px; color:#fff; font-size:24px; text-align: center} 
.rate .link-list ul li .txt b {color:#f9cb00; font-weight: 600}


/*******************************************************************************
    @media 768px
*******************************************************************************/
@media all and (max-width:980px){

    #wrap {
        width:100%;
        max-width: 100%;
        min-width: 320px;
        overflow:hidden;
    }
    #ft_wr {
        padding:20px;
    }
    #ft {
        width:100%;
        max-width: 100%;
    }
    #ft li, #ft_link {font-size:14px;}
    
    #logo {
        float:inherit;
        text-align: center;
        padding:20px 0;
        
    }
    #logo img {
        height:30px;
    }
    .fix-btn {height:80px;}
    .fix-btn a {font-size:22px; padding:25px 0;}
    
    /********************
    랜딩페이지
    ********************/   
    
    
    .main {
        min-width:100%;
        width:100%;
    }
    .sub-inner {
        width:100%;
        padding:0 20px;
    }
    .sec1 h3 {
        font-size:1.18rem;
        position: relative;
        transform: none;
        left:0;
    }
    .sec1 h3 span {
        font-size:1.4rem;
        margin-right:5px;
    }
    .sec1 h5 { font-size:1rem;}

    .join-form .agree ul {
        position: relative; 
        overflow: hidden
    }
    .join-form .agree li {
        float:left; 
        margin-right:20px;
    }
    .join-form .agree li:first-child {height:70px;
    }
    
    .sec2 {padding:30px 0 40px 0;}
    .sec2 .event {font-size:22px;}
    .sec2 .label {
        font-size: 20px;
        text-align: center;
    }
    .sec2 .price-info .price {
        font-size: 30px;
    }
    .sec2 .price-info .price b {
        font-size: 55px;
    }
    .sec2 .price-info .price span {
        display: block;
    }
    .sec2 .price-info .txt {
        font-size:20px;
    }
    .sec2 .price-info .price span.cost { 

    font-size:30px; 
}

    .sec2 .price-info .price span.cost::before {
    width:160px; height:10px;
    background-size:cover;
    top:14px;
    }
    
    .sec2 .step {
        display: block;
        margin:24px auto;
    }
    
    .sec2 .step .list {padding-bottom:20px; width: auto}
    .sec2 .step .box {
        margin-bottom:10px;
    }
      
    .sec2 .step .img, .sec2 .step .phone{text-align: center; padding-bottom:10px; margin-bottom:10px;}
    
    .sec2 .step .phone img, .sec2 .step .phone.last img {max-width:450px; width:100%;}
    
    
    .why-info {padding:30px 0;  font-size:22px;}
    .why-info img {max-width:650px; margin:0 auto; width:100%;}
    .why-info h5 {padding-top:20px;}
    .why-info p b {font-size:30px;}


    
    
    .sec3 {
        margin:50px auto 50px auto;
    }
    .sec3 h3 {
        font-size: 28px;
        padding:0;
        margin-bottom:40px;
    }
    .sec3 h3 span {
        margin:0 10px;
    }
    .sec3 h3 b {
        color:#EBAD01;
        font-weight: bold;
    }

    .sec3 .list ul {
        display: block; 
    }
    .sec3 .list ul li {
        display: flex;
        align-items: center;
        padding:20px 0;
        width: 100%;
        height:auto;
        background: #272727;    
        border-radius:15px;
        margin:10px 0;
    }
    .sec3 .list ul li img {
        width:80px;
        height:80px;
        margin:0 0 0 20px;
        left:0;
        text-align: center;
         transform: none;
    }
    .sec3 .list ul li p {
        color: #fff;
        text-align: left;
        padding-top:0;
        padding-left:20px;
        font-size: 20px;
    }
    
    
    
    .sec4 h3 {
        font-size: 30px;
        padding:0;
        margin-bottom:40px;
    }
    .sec4 h3 span {
        margin:0 10px;
    }
    
    .sec4 .list ul {
    display: block; 
    flex-wrap: wrap
    }
    .sec4 .list ul li {
        display: block;
        width:100%;
        margin:10px 0;
        padding-left:0;
    }
    .sec4 .list ul li .img {width:100%; display: flex; text-align: left; align-items: center}
    .sec4 .list ul li .img > img {margin:0 20px;}
    .sec4 .list ul li .txt {width:100%;}
      
    .sec2 .step::after, .sec2 .step::before {display: none}
    
    
    
    #apply_btn {position:fixed;bottom:10px;right:10px;width:70px;height:70px;text-align:center; z-index:90;}
    #apply_btn img {width:100%;}
    
    
    .point {padding:80px 0;}
    .point h2 {font-size:40px; margin-bottom:30px; }
    
    .point .list {height:100%; display: block; clear: both; position: relative}
    .point .list > div {width:100%;}
    .point .list h3 {padding:20px 0; font-size:26px; line-height: 1.3}
    .point .list h4 {color:#aaa; font-size:18px; padding-bottom:40px;}

    .point .list.second {position: relative; clear: both; overflow: hidden; margin:80px 0;}
    .point .list.second .txt {position: relative; float: auto; max-width: 100%}
    .point .list.second .img {position: relative;  float: auto;}
    .point .list .img img {width:100%; max-width:100%;}
    
    .review-list li img {width: 90%;}

    .recomm-list {padding:80px 0;}
    .recomm-list h2 {font-size:35px;}

    .recomm-list li {width:100%; margin:10px 0; font-size:20px; padding:30px 0;}  
    .recomm-list li .icon {width:120px; text-align: center;}
    .recomm-list li .icon img {height:60px;}
    .recomm-list li .txt {width:calc(100% - 150px;)}

    
    .rate {padding:60px 0 0;}
    .rate h3 {
        font-size: 28px;
        padding:0;
        margin-bottom:40px;
    }
    .rate h3 span {
        margin:0 10px;
    }
    .rate h4 {font-size:24px;}
    .rate .graph-box {padding:40px 20px;}
    .rate .link-list ul {margin-top:40px;}
    
    .rate .link-list ul {display: block;}
    .rate .link-list ul li {width:100%; margin:10px 0;}
    .rate .link-list ul li a {display: flex; align-items: center}
    .rate .link-list ul li .img {width:100px; height:100px; margin:0; border-radius: 30px;}
    .rate .link-list ul li .img img {height:40px;}
    .rate .link-list ul li .txt {text-align: left; padding-left:20px; padding-top:0; font-size:20px;}
    
    #popup .popup-footer {width:100%;}

}


@media all and (max-width:640px){
    #popup {height: 100vh; overflow-y: scroll; padding:30px; padding-bottom:90px;}
    #popup .popup-footer {position: fixed; bottom:0; background: #fff; width:78%; padding:10px 0;}
    .join-form li:first-child label {font-size:14px;}
    .join-form li label {font-size:12px;}
}