@charset "utf-8";
html, body {-webkit-overflow-scrolling: touch !important;font-family: 'NanumBarunGothic', 'Noto Sans KR', Dotum, '돋움', Helvetica, "Apple SD Gothic Neo", sans-serif;font-size: 12px;}

body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,select,table,td,textarea,th,ul {margin: 0;padding: 0}
body,button,input,select,table,textarea {font-family: 'MalgunGothic','맑은 고딕', 'Arial', Helvetica, "Apple SD Gothic Neo", sans-serif;}

button,input {border-radius: 0}
fieldset,img {border: 0}
ol,ul {list-style: none}
address,em {font-style: normal}
a {text-decoration: none; cursor: pointer;}
a:hover {text-decoration: none}
a:link {text-decoration: none;}
img {border-style: none;letter-spacing: none;word-spacing: none;border: none;margin: 0;padding: 0;outline: 0;vertical-align: top;line-height: 0px;}
input:focus {outline: none;}
input,textarea,select {padding: 0;margin: 0;border: none; font-size: 1rem;}
* {box-sizing: border-box;padding: 0;margin: 0;}
.btn {position: absolute;text-indent: -99999px;cursor: pointer !important;background: #ff0000;opacity: 0.0;filter: alpha(opacity=0.0);}


.wrap {}
.wrap .container {}
.wrap .container img {width: 100%;}
.wrap .container .cont-wrap {position: relative;width: 100%;}
.wrap .container .cont-wrap .cont-container{position: relative;width: 100%;max-width: 920px;margin:0 auto;overflow: hidden;}

.share.section1 {background-color: #ffffff;}
.share.section1 .btn-1{
    top: 18%;
    left: 23%;
    width: 54%;
    height: 1.6%;
}
.share.section2 {background-color: #bf0d16;}
.share.section3 {background-color: #010103;}
.share.section3 .btn-1{top: 70.8%;left: 19.8%;width: 29.5%;height: 5.3%;}
.share.section3 .btn-2{top: 70.8%;left: 50.8%;width: 29.4%;height: 5.3%;}
.share.section4 {position:fixed !important;bottom:0px;/* background-color: #c4df58; */}
.share.section5 {background-color: #d3ebf9;}
.share.section6 {background-color: #f2f2f2;}

/**
 팝업
 */
.popup-wrap {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);/* overflow-x: hidden; */overflow-y: auto;padding: 0rem;z-index: 100;line-height: 1;}
.popup-wrap .popup-container {position: absolute;left: 50%;transform: translateX(-50%);vertical-align: 50%;width: 100%;max-width: 720px;}
.popup-wrap .popup-container .popup-section {position: relative;height: 100%;}
.popup-wrap .popup-container .popup-section > img {max-width: 720px;width: 100%;}
.popup-wrap .popup-container .popup-section a.btn.close-btn {width: 9.5%;height: 8%;position: absolute;top: 0%;right: 0%;}
.popup-wrap .popup-container .popup-section a.btn.pop-btn1 {width: 29%;height: 8%;position: absolute;bottom: 5.7%;left: 36%;}
.popup-wrap .popup-container .popup-section a.pop-app-01-btn {bottom: 17.8%;left: 7%;width: 43.1%;height: 41%;}
.popup-wrap .popup-container .popup-section a.pop-app-02-btn {bottom: 17.8%;left: 50%;width: 43.1%;height: 41%;}
.popup-wrap .popup-container .popup-section a.pop-confirm-btn {bottom: 6.6%;left: 27.7%;width: 45.6%;height: 8.4%;}


/* popup */
.popup-wrap {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);overflow-x: hidden;overflow-y: auto;padding: 0rem; z-index: 100;}
.popup-wrap img {width:100%;}
.popup-dimed {width: 100%;height: 100%;background-color: rgba(0,0,0,0);}
.popup-container {width: 100%;margin: 0 auto;position: relative;top: 5%;max-width: 940px;margin-bottom:15%;}
.popup-container .popup-section {position: relative;width: 90%;margin: 0 auto;}
/*#pop1 .popup-container input { background-color: #f003; }*/
/*#pop1 .popup-container .btn { opacity: .3; }*/
#pop1 .popup-container .close-btn {top: 0%;right: 0;width: 22%;padding-bottom: 21.5%;}
#pop1 .popup-container .username {position:absolute;
    top: 36%;
    left: 35%;
    width: 58.2%;
    height: 5.4%;
    font-size: 4.6vw;
}
#pop1 .popup-container .mobileno {position:absolute;
    top: 45.5%;
    left: 35%;
    width: 39%;
    height: 5.4%;
    font-size: 4.6vw;
}
#pop1 .popup-container .certifyno {position:absolute;
    top: 55.8%;
    left: 35%;
    width: 39.2%;
    height: 5.4%;
    font-size: 4.6vw;}
#pop1 .popup-container .timer {position:absolute;
    top: 56.8%;
    left: 83.3%;
    /* text-align: right; */width: 12.2%;font-size: 4vw;color: #515151;}
#pop1 .popup-container .btn-1 {
    top: 45.3%;
    left: 76.2%;
    width: 17.1%;
    height: 5.5%;
}
#pop1 .popup-container .btn-2 {top: 55.6%;left: 72.6%;width: 21.2%;height: 4.2%;}
#pop1 .popup-container .btn-3 {bottom: 5%;left: 6.6%;width: 87.4%;height: 9%;}

#pop1 .popup-container .privacy {position:absolute;
    top: 69.2%;
    left: 6.9%;
    width: 86.4%;
    height: 16.4%;}
#pop1 .popup-container .check {position:absolute;top:40%;left:5%;width: 6.3%;}
#pop1 .popup-container .check .check-on {display: none;}
#pop1 .popup-container .check .check-off {display: block;}
#pop1 .popup-container .check.active .check-on {display: block;}
#pop1 .popup-container .check.active .check-off {display: none;}
#pop1 .popup-container .check1 {
    top: 32%;
    left:0;
    width:100%;

}
#pop1 .popup-container .check2 {top: 61%;left:5%;}
#pop1 .popup-container .btn-4 {
    position: absolute;
    top: 32%;
    left:0;
    width:100%;
    height: 34%;
}
#pop1 .popup-container .btn-5 {top: 60%;left:5%;width:90%;height: 17%;}
#pop1 .popup-container .btn-close {
    top: 2.5%;
    left: 88%;
    width: 8%;
    height: 6%;
}

#pop2 .popup-container .btn-close {
    top: 2.5%;
    left: 88%;
    width: 8%;
    height: 6%;
}
#pop2 .popup-container .medal {
    position: absolute;
    top: 58.3%;
    width: 13%;
    height: 4%;
    background-color: transparent;
    text-align: center;
    font-size: 4vw;
}
#pop2 .popup-container .medal.gold {
    left: 13%;
}
#pop2 .popup-container .medal.silver {
    left: 42.1%;
}
#pop2 .popup-container .medal.bronze {
    left: 71.1%;
}
#pop2 .popup-box {position: relative;}
#pop2 .btn-1 {
    position: absolute;
    top: 82%;
    right: 6.3%;
    width: 43%;
}
#pop2 .username {
    position: absolute;
    top: 48%;
    left: 49.7%;
    font-size: 5vw;
}
#pop2 .mobileno {
    position: absolute;
    top: 62%;
    left: 49.7%;
    font-size: 4.1vw;
}
#pop2 .btn-2 {
    top: 85.7%;
    left: 6.7%;
    width: 87%;
    height: 10%;
}
#pop2 .btn-3 {
    top: 73.5%;
    left: 6.7%;
    width: 87%;
    height: 18.9%;
}
#pop2 table.list {
    border: solid 1px #f1f0ef;
    border-collapse: collapse;
    width: 87.8%;
    margin: 0 6.1%;
}
#pop2 table.list tr.t-header {
    background: #989999;
    color: #fff;
}
#pop2 table.list th.t-header td {}
#pop2 table.list tr.sum td {
    background: #f6f6f6;
}
#pop2 table.list tr td {
    text-align: center;
    font-size: 3.4vw;
    line-height: 2.5;
    border: 1px solid #f0f0f0;
}

/*약관*/
#popup-privacy {display: none;}
#popup-privacy .close-btn {position: absolute;top: 0%;right: 1.3%;width: 5.2%;/* height: 2.4%; *//* border:1px solid #c9c9c9; *//* border-radius: 4px; */overflow:hidden;/* background-color: #fff; */}
#popup-privacy .privacy-content {position: absolute;top: 5%;left: 0.2%;width: 100%;height: 100%;border:1px solid #c9c9c9;border-radius: 4px;overflow:hidden;background-color: #fff;}
#popup-privacy .privacy-content img{width:500px;}
#popup-privacy .popup-btn-1 {left: 6%;bottom: 5.9%;width: 88.2%;height: 7.9%;}



/* select */
#pop2 .month-select {width: 90px !important;position: absolute;top: 81%;left: 6.1%;}
.select-box__inner {
    background: url("../images/arrow_down.svg") no-repeat 97% 50%;
    border: 1px solid #2a1244;
}
.select-box__inner {
    background-image: url("../images/arrow_down.png");
}
.select-box__inner select option {
    color: #111;
}
.select-box__inner select {
    color: #697070;
}
.select-box__inner select:active,
.select-box__inner select:focus {
    background-color: rgba(249, 241, 155, 0.5);
}

.select-box__label {
    display:block;
    margin:1em 0;
}

.select-box__inner {
    border-radius: 5px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 4vw;
    line-height: 1;
    margin: 0;
    overflow: hidden;
    position: relative;
    transition: background-color 0.4s ease-in-out;
    width: 100%;
}
.select-box__inner:hover,
.select-box__inner:focus,
.select-box__inner:active {
    cursor: pointer;
}

.select-box__inner select option {
    padding:0.5em;
    line-height:1.5;
    font-size:1em;
}
.select-box__inner select:hover {
    cursor: pointer;
}
.select-box__inner select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    background-image: none;
    border: none;
    box-shadow: none;
    font-family: Helvetica, sans-serif;
    font-size: 1em;
    padding: 1.6vw;
    transition: background 0.4s ease;
    width: 115%;
}



@media screen and (min-width: 720px) {
    /* vx -> px 변환 : 1vw * 7.1666666667 = 7.1666666667px */
    #pop2 .popup-container .medal {
        font-size: 29px;
    }
    .popup-container .username {font-size: 30px !important;}
    .popup-container .mobileno {font-size: 30px !important;}
    .popup-container .certifyno {font-size: 30px !important;}
    .popup-container .timer {font-size: 26px !important;}
    #pop2 .username {font-size: 33px !important;}
    #pop2 .mobileno {font-size: 29px !important;}
    #pop2 table.list tr td {font-size: 24px !important;}
    .select-box__inner {font-size: 24px !important;}
    .select-box__inner select option {
        padding:0.5em;
        font-size:18px;
    }
    .select-box__inner select {
        font-size: 26px;
        padding: 14px;
    }
    .share.section3 .ended-gift1-cover span {font-size: 30px;}
    .share.section3 .ended-gift2-cover span {font-size: 30px;}
    .share.section3 .ended-gift3-cover span {font-size: 30px;}


}