@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 100;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 300;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 400;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 500;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 700;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 900;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');}
body, h1, h2, h3, h4, h5, h6, input, textarea, select { font-family: 'Noto Sans KR', sans-serif; }
*{
    font-family: 'Noto Sans KR', sans-serif;
}
@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css);

*{ font-family: 'Spoqa Han Sans', 'Spoqa Han Sans JP', 'Sans-serif' !important}

*{
    touch-action: pan-y;
}
.my-content{
    font-size: 17px;
}
/*----------- spalsh style ------------*/
.view-btn{
    border: 1px solid rgba(158,158,170,0.5);
    border-radius: 10px;
    padding: 5px 17px;
    position: fixed;
    color: #7f7f7f;
    font-size: 0.8em;
    right: 5%;
    top:5%;
    text-decoration: none;
    
}

.splash-img{
    max-width:200px;
    width: 40% !important ;
    
}

.splash-img-top{
    max-width: 300px;
    width: 80% !important;
    position: absolute;
    left: 50%;
    transform: translate(-50%,0);
    top: 46%;
    
}
.start-txt{
    letter-spacing: -1px;
    text-align: center;
    line-height: 1.5;
    word-break: keep-all;
    width: 80%;
    margin: 4vh auto;
    white-space: pre-line;
}
.start-txt .txt-highlight{
    color: var(--light-blue);
}
.owl-wrap{
    position: relative;
    padding-top: calc(100% * 9/40);
}
.splash-carousel-wrap{
    position: absolute;
    margin: 0;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;

}
.splash-btn-wrap{
    text-decoration: none;
    display: flex;
    position: fixed;
    width: 100%;
    justify-content: space-around;
    bottom: 20px;

    align-items: center;
}
.start-title{
    letter-spacing: -3px;
    font-size: 1.7em;
    line-height: 1.5;
    font-weight: bold;
    text-align: center;
}
.home-btn{
    text-decoration: none;
    display: block;
    font-size: 1.5em;
    line-height: 2.5;
    border-radius: 20px;
    text-align: center;
    border-top: 4px solid #f1f1f1;
    width: 50%;
    box-shadow: 0px -7px 14px #f1f1f1;
}

.login{
    
}


.splash-container{
    overflow-y: hidden;
}
/*----------- spalsh style ------------*/

/* ---------------slider ------------------ */
.owl-theme .owl-dots .owl-dot span{
    border: 1px solid #9d9d9d;
    box-sizing: border-box;
    margin: 5px 6px !important;
    width: 9px !important;
    height: 9px !important;
    background-color: #fff !important;
}
.owl-theme .owl-dots .owl-dot.active span{
    background: #3b3a3a !important;
}
.owl-carousel .owl-stage{
    display: flex;
    align-items: center;
}
.splash-img-wrap{
    position: relative;
}
.splash-last-btn{
    text-decoration: none;
    position: absolute;
    left: 50%;
    transform: translate(-50%,0);
    top: 78%;
}
.m-2-0{
    margin: 2% 0;
}
/* ---------------slider ------------------ */

/* 글로벌 버튼 */

.blue-bottom-btn,
.blue-btn{
    font-family: 'Spoqa Han Sans', 'Spoqa Han Sans JP', 'Sans-serif'; 
    text-decoration: none;
    background-color: var(--light-blue);
    min-width: 262px;
    font-weight: 500;
    max-width: 262px;
    white-space: nowrap;
    border-radius: 37px;
    line-height: 56px;
    text-align: center;
    color: #fff;
    font-size: 1.05em;
    margin: 0 auto;
    display: block;
    width: 60%;
}

.blue-bottom-btn{
    text-decoration: none;
    width: 100%;
    margin: 0 auto;
    line-height: 44px;
    max-width: 600px;
}
.grey-btn{
    text-decoration: none;
    background-color: var(--grey);
    white-space: nowrap;
    border-radius: 37px;
    text-align: center;
    color: #fff;
    font-size: 1.05em;
    margin: 0 auto;
    display: block;
    width: 60%;
    width: 100%;
    margin: 0 auto;
    line-height: 44px;
    max-width: 600px;
}

.blue-color-bottom-btn{
    text-decoration: none;
    border:1px solid var(--light-blue);
    color: var(--light-blue);
    white-space: nowrap;
    border-radius: 37px;
    line-height: 44px;
    text-align: center;
    font-size: 1.05em;
    margin: 0 auto;
    display: block;
    width: 60%;
    width: 100%;
    margin: 0 auto;
    max-width: 600px;
}
.black-color-bottom-btn{
    text-decoration: none;
    border:1px solid #000;
    color: #000;
    white-space: nowrap;
    border-radius: 37px;
    line-height: 56px;
    text-align: center;
    font-size: 1.05em;
    margin: 0 auto;
    display: block;
    width: 60%;
    width: 100%;
    margin: 0 auto;
    line-height: 56px;
    max-width: 600px;
}
.back-btn img{
    width: 21px;
    padding: 5px;

}
.message-second{
    color: red;
}
/* 글로벌 버튼 */

/* -------------join----------------------- */
.join-img{
    max-width: 300px;
    width: 80%;

}
.join-start-container{
    position: absolute;
    width: 90%;
    margin: 0 auto;
    top: calc(100vw * 9/100);
    /* transform: translate(-50%, 0);
    left: 50%; */
    overflow-y: hidden;
}
.join-btn{
    margin: 5vh auto !important;
    text-decoration: none;
}
/* -------------join----------------------- */

@media (max-height:550px){
    .join-img{
        width: 50%;

    }
}

/* -------------------agree-term------------------- */
.border-radius-wrap{
    /* background: url(/images/grey-top.png); */
    background-repeat: no-repeat;
    background-position: center 13px;
    background-color: #fff;
    background-size: 33px 4px;
    top:50px;
    max-width: 1024px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 25px 25px 0 0;
    position: absolute;
    margin: 0 auto;
    overflow-y: scroll;
    height: calc(100vh - 50px);
    width: 100%;
    bottom: 0;
    padding: 5%;
    left: 50%;
    transform: translate(-50%,0);
    margin: 0 auto;
}
.border-main-radius-wrap{
    /* background: url(/images/grey-top.png); */
    background-repeat: no-repeat;
    background-position: center 13px;
    background-color: #fff;
    background-size: 33px 4px;
    top:100px;
    max-width: 1024px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 25px 25px 0 0;
    position: absolute;
    margin: 0 auto;
    
    height: calc(100vh - 100px);
    width: 100%;
    bottom: 0;
    padding: 5%;
    z-index: 2;
}

.border-product-radius-wrap{
    /* background: url(/images/grey-top.png); */
    background-repeat: no-repeat;
    background-position: center 13px;
    background-color: #fff;
    background-size: 33px 4px;
    top:0;
    max-width: 1024px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 25px 25px 0 0;
    position: absolute;
    margin: 0 auto;
    height: calc(100vh - 183px);
    width: 100%;
    bottom: 100px;
    padding: 0 5% 62px 5%;
    overflow-y: scroll;
    z-index: 2;
}

.my-page-border-radius-wrap{
    /* background: url(/images/grey-top.png); */
    background-repeat: no-repeat;
    background-position: center 13px;
    background-color: #fff;
    background-size: 33px 4px;
    top: 50px;
    max-width: 1024px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 25px 25px 0 0;
    position: absolute;
    margin: 0 auto;
    height: calc(100vh - 50px);
    width: 100%;
    bottom: 0;
    padding: 5% 0 0 0 ;
    overflow-y: scroll;
    z-index: 2;
}

.touch-here{
    padding: 57px 0 0 0;
}

.n-my-page-border-radius-wrap{
    /* background: url(/images/grey-top.png); */
    background-repeat: no-repeat;
    background-position: center 13px;
    background-color: #fff;
    background-size: 33px 4px;
    top: 0px;
    max-width: 1024px;
    box-sizing: border-box;
    /* background-color: #fff; */
    border-radius: 25px 25px 0 0;
    position: absolute;
    margin: 0 auto;
    height: 100vh;
    width: 100%;
    bottom: 0;
    padding: 0;
    overflow-y: scroll;
    z-index: 2;
}
.global-top-title{
    font-family: 'Spoqa Han Sans', 'Spoqa Han Sans JP', 'Sans-serif'; 
    font-size: 23px;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: -1px;
    margin: 8px auto 14px;

}
.global-top-title-2{
    font-size: 1.3em;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: -1px;

}
.all-check[type=checkbox]+label{
    font-family: 'Spoqa Han Sans', 'Spoqa Han Sans JP', 'Sans-serif';
    border: 1px solid rgba(204,204,204,0.5);
    font-size: 16px;
    line-height: 45px;
    border-radius: 25px;
    letter-spacing: -1px;
    width: 100%;
    background: url(/images/circle-check.png)no-repeat 3% center /27px;
    text-indent: 15%;
    font-weight: 700;
}
.all-check[type=checkbox]:checked+label{
    background: url(/images/circle-checked.png)no-repeat 3% center /27px;
}
.check-sns-wrap{
    display: flex;
    width: 90%;
    float: right;
    justify-content: space-between;
}
.check-sns-wrap > input[type=checkbox]+label{
    background:var(--grey);
    text-align: center;
    display: inline-flex;
    color: #fff;
    align-items: center;
    padding: 12px 7%;
    border-radius: 50px;
}
.check-sns-wrap > input[type=checkbox]+label>img{
    width: 10px;
    height: 10px;
    padding-right: 5px;
}
.check-sns-wrap > input[type=checkbox]:checked+label{
    background: var(--light-blue);

}

.term-view{
    text-decoration: none;
    line-height: 2;
    color: var(--grey);
    font-size: 0.8em;
}
.term-view  {
    align-items: center;
    display: flex;
    justify-content: space-between;

}
.add-grey{
    color: #666;
    letter-spacing: -1px;
}
.term-view img{
    width: 5px;
}
.check-sns-title{
    line-height: 3;
    font-size: 0.9em;
    letter-spacing: -1px;
    font-weight: bold;

}
.agree-notice-title{
    clear: both;
    font-weight: bold;
    font-size: 12px;
    padding: 20px 0 0;
    line-height: 1.2;

}

.agree-notice{
    font-size: 13px;
    line-height: 2;
    padding: 10px 0 50px;
    letter-spacing: -1.5px;

}
.terms-wrap{
    display: flex;
    width: 90%;
    margin: 25px auto 10px;
    align-items: center;
    justify-content: space-between;
}
.iot-agree[type=checkbox]+label{
    background: url(/images/check.png)no-repeat 3% center /10px;
    text-indent: 20px;
    line-height: 2;
    width: 59px;
    font-size: 12px;
    font-weight: 700;    font-family: 'Spoqa Han Sans', 'Spoqa Han Sans JP', 'Sans-serif';

    width: 59px;
}
.iot-agree[type=checkbox]:checked+label{
    font-family: 'Spoqa Han Sans', 'Spoqa Han Sans JP', 'Sans-serif';
    background: url(/images/checked.png)no-repeat 3% center /10px;
}
.term-txt-wrap{
    flex-grow:1;
    
}
/* -------------------agree-term------------------- */


.yellow-hightlight{
    background: linear-gradient( #ffffff 50%,var(--yellow) 50%);
}
.selecter-st{
    font-size: 1em;
    background: url(/images/arrow-bottom.png)no-repeat right center /15px;
    padding: 3vw 24px 3vw 15px;
}
.right-wrap{
    width: 90%;
    float: right;
}
/* -------------------phone-term------------------- */
.input-grey-wapper{
    border: 1px solid rgba(218,218,218,.5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 45px;
}
.input-txt-st[type=text]{
    margin-right: 15px;
    width: 50%;
    font-size: 1em;
}
.input-user-st{
    font-family: 'Spoqa Han Sans', 'Spoqa Han Sans JP', 'Sans-serif';
    width: 100%;
    padding-left: 15px;
    font-size: 1em;
}
.input-user-st-2{

    padding-left: 15px;
    font-size: 1em;
}

.input-user-st::placeholder{
    font-size: 1em;
    color: var(--grey);

}
.input-user-st-2::placeholder{
    font-size: 1em;
    color: var(--grey);

}
.input-title{
    font-size: 1em;
}
.input-title{
    margin: 20px auto 13px;
}
.input-txt-st::placeholder{
    font-size: 1em;
    color: var(--grey);
}

.input-txt-st-4[type=number]{
    width: 80%;
    font-size: 1em;
}

.wapper-pd{
    padding: 0 15px;
    height: 50px;
}
.btn-mg{
    margin: 3vw auto 5vw;
    text-decoration: none;
}
.input-num-st-1{
    min-width: 50%;
}
input[type=number]{
    font-size: 1em;
}
input::placeholder {
    color: var(--grey);
    font-size: 1em;
    letter-spacing: 2%;
}
.notice-txt{
    font-size: 0.72em;
    text-decoration: none;
    color: #333;
    line-height: 1.8;
    margin: 12px 0;

}
/* -------------------phone-term------------------- */
.address-wrap{
    display: flex;
    align-items: center;

}
.address-input{
    border: 1px solid var(--light-blue);
    color: var(--light-blue);
    font-size: 0.8em;
    border-radius: 30px;
    padding: 9px 16px;
    margin: 0 0 0 20px;
}

.wapper-mg{
    margin: 4vw auto;
}

.input-white-wapper{
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
}

.necessary-input{
    background: url("/images/necessary-dot.png")no-repeat 95% center /7px;
}
.ridio-style[type=radio]+label{
    background: url(/images/radio-checked.png)no-repeat left center/20px;
    font-size: 16px;
    
    width: 35px;
    white-space: nowrap;
    padding: 0 0 0 26px;
    line-height: 45px;
    
}
.ridio-style[type=radio]:checked+label{
    background: url(/images/radio.png)no-repeat left center/20px;
    
}
.grey-line{
    background: var(--grey);
    color: var(--grey);
}
.dark-bg, .always-show-dark-bg {
    background: rgba(0,0,0,0.6);
    /* background: rgba(248,247,243,0.8); */
    width: 100%;
    position:fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
}

.card-info-wrap{
    display: flex;
    justify-content: space-between;
}

.card-wrapper{
    width: 48%;
    justify-content: start;
}
.link-wrap{
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.go-tab{
    color: #000;
    font-size: 12px;
    text-decoration: none;
    font-weight: bold;
    line-height: 3.5;
}
.go-tab img{
    width: 30px;
    display: block;
    margin: 0 auto;

}
.grey-center-line{
    border-top: 1px solid rgba(218,218,218,0.5);
    width: 33%;
}
.grey-center-title{
    font-size: 0.8em;
    
}

.main-top-wrap{
    position: absolute;
    top: 25px;
    z-index: 1;
    display: flex;
    width: 90%;
    left: 50%;
    transform: translate(-50%,0);
}

.menu-btn img{
    width: 45px;
}
.main-search-wrap{
        background-color: #fff;
    border-radius: 25px;
    width: 100%;
    min-height: 40px !important;
    display: flex;
    align-items: center;
    box-shadow: 1px 1px 3px 3px rgba(0,0,0,0.1);
    justify-content: center;

}
.box-shadow{
    box-shadow: 0px -7px 14px #f1f1f1;
}
.address-text{
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 10px 20px;
}

.bottom-btn{
    font-size: 0.7em;
    text-align: center;
    line-height: 1.5;
    width: 20%;
    color: #757575;
    -ms-user-select: none; -moz-user- select: -moz-none; -webkit -user- select: none; -khtml-user-select: none; user-select:none;
}
.no-drag {}
.bottom-btn img{
    
    display: block;
    margin: 0 auto 5px;
}

.bottom-shadow{
    box-shadow: 0px 0px 14px var(--grey);
}

.main-top-wrapper{
    position: relative;
    overflow-y: hidden;
}

.color-grey a{
    color: var(-grey);
}
.bottom-button-wrapper{
    border-radius: 37px 37px 0 0;
    background: #fff;
    width: 90vw;
    z-index: 9999;
    box-shadow: 0px -1px 6px rgba(0,0,0, 0.1);
    align-items: baseline;
    display: flex;
    padding: 16px 5vw 18px 5vw;
    /*padding: 10px 5vw 140px 5vw;*/
    position: fixed;
    bottom: 0;
    justify-content: space-around;
}
.bottm-center-btn{
    position: absolute;
    left: 50%;
    transform: translate(-50%,0);
    background: #fff;

}

.grey-border-wrap{
    border: 1px solid rgba(187,187,187,0.5);
    display: flex;
    padding: 5px 5%;
    border-radius: 50px;
    justify-content: space-between;
    position: absolute;
    width: 80%;
    top: 20px;
    align-items: center;


}

.history-list{
    position: absolute;
    top: 95px;
    /* top: 137px; */
    /* border-top: 1px solid var(--grey); */
    left: 0;
    width: 100%;
    right: 0;
    bottom: 0;
    overflow-y: scroll;
    

}
.search-btn{
    padding: 5px;
}
.search-btn img{
    width:26px;
}
.here-map-wrap{
    display: flex;
    position: absolute;
    top: 95px;
    font-size: 1.2em;
    letter-spacing: -1px;

    
}
.map-here-img{
    width:16px;
    height: 19px;
    padding-right: 10px;
}
.product-view{
    font-size: 0.85em;
    color: var(--grey);
    text-decoration: none;
    white-space: nowrap;
}
.history-ul {
    margin: 0 auto;
   
}

.history-ul li{
    justify-content: space-between;
    display: flex;
    width:90%;
    border-bottom: 1px solid var(--grey);
    padding: 20px 5%;
}
.product-view img{
    width: 8px;
    vertical-align: baseline;

}
.product-address{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-input{
    font-size: 1em;
}
.now-here{
    font-size: 1em;

}
.preview-img{
    border: 1px solid #f2f2f2;
    position: relative;
    margin: 0 0 10px 0;
    max-width: 100px;
    max-height: 100px;
    min-width: 100px;
    min-height: 100px;

}

.preview-img .p-img{
    /* position: absolute;
    max-width: 70%;
    width: auto;
    top: 50%;
    left: 0;
    bottom: 0;
    right: 0;
    max-height: 100%;
    /* height: 100%; */
    /* margin: 0;
    left: 50%;
    transform: translate(-50%, -50%); */ 
    width: 100%;
    position: absolute;
} 
.product-list{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #f2f2f2;
    padding: 5vw 0;

}
.product-list-top:nth-child(2){
    border-top:none

}
.product-list-top{
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #f2f2f2;
    padding: 10px 0 10px;
}
.product-list-top:first{
    border-top: none;
}
#boardListSection >.use-list:first-child{
    border-top: 1px solid rgba(231, 231, 231, 0.5);
}

.n-title{
    font-size: 15px;
    color: #333;
    line-height: 2.5;

}
.use-list{
    justify-content: space-between;
    border-bottom: 1px solid rgba(231, 231, 231, 0.5);
    padding: 40px 5% 20px 5%;
}
.map-point-info{
    position: absolute;
    display: flex;
    align-items: center;
}
.product-detail img{
    max-width: 100%;
}
.product-detail{
    color: #5e5e5e;
    font-size: 14px;
    
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.43;
    letter-spacing: normal;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    width: 100%;
 
    
}
.n-product-detail{
    color: #5e5e5e;
    font-size: 14px;
    
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.43;
    width: 100%;
}
.n-product-detail img{
    width: 100%;
}
.product-detail-view{
    width: 79px;
    border: 1px solid #393951;
    color: #000;
    font-size: 10px;
    letter-spacing: -1px;
    display: block;
    border-radius: 16px;
    margin: 0 auto;
    text-align: center;
    padding: 4px 2px;
    text-decoration: none;
}
.product-right{
    margin-left: 5%;
    flex-grow:1;
}
.blue-top{
    background: var(--light-blue);
    
    padding: 10px 5%;
    justify-content: space-between;
    position: fixed;
    z-index:2; /*JH추가*/    
    width:100%;
}
.product-info-wrap{
    
}
.grey-border{
    border-top:1px solid var(--light-grey);
    border-bottom:1px solid var(--light-grey);
    margin:1vw auto 1vw;
    width: 90%;
    padding: 24px 5%;
}

.product-use-time2{
    display: flex;
    align-items: left;
    padding: 11px 0;
    width:100%;
    flex-direction: row;
    flex-wrap: wrap;
}

.product-use-time{
    display: flex;
    align-items: center;
    padding: 11px 0;
}

.product-use-time-item{
    width:120px
}

.p-price{
    font-size: 1.1em;
    font-weight: bold;
}

.product-desc-short {
    line-height: 22px;
    margin-bottom: 2%;
}

.product-detail p img{
    width:100%;

}
.product-detail-info{
    width: 89px;
    background: var(--light-blue);
    color:#fff;
    font-size: 0.7em;
    box-shadow: 1px 2px 1px 1px rgba(0,0,0,0.1);
    display: block;
    border-radius: 16px;
    text-align: center;
    padding: 5px 2px;
    text-decoration: none;
}
.w-5{
    width: 50% !important;
}
.w-140{
  width: 140px !important;  
}
.fixed-bottom-menu .bottom-button-wrapper {
    position: fixed;

}
.text-center{

    left: 50%;
    text-align: center;
    position: relative;
    transform: translate(-50%, 0);
}


.bold{
    font-weight: 500;
}
.payment-bottom-wrap{
    left: 0; /* 0126 jh 임시 추가 */
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 25px 25px 0 0;
    position: fixed;
    margin: 0 auto;
    /* width: 92%; */
    width: 100%; 
    bottom: 0;
    padding: 10px 5% 97px 5%;
    overflow-y: scroll;
    z-index: 2 ;
}
.bottom-pd{
    padding-bottom: 200px;
}
.mission{
    background: var(--orange);
    color: #fff;
    font-size: 0.8em;
    padding: 4px 13px;
    border-radius: 56px;
}

.mission-alert{
    background: var(--orange);
    color: #fff;
}
.rent-tab-wrap{
    
    border-bottom: 1px solid var(--light-grey);
    margin: 1vw auto 1vw;
}
.rent-option-value{
    font-size: 0.8em;
}
.n-wapper-mg{
    margin: 21px auto;
}
.picker-cell__header{
    display: none;
}
.n-list-title{
    font-size: 0.8em;
    color: #333333;
    letter-spacing: -1px;
}
.list-title{
    font-size: 0.8em;
    color: #333;
}

.list-content{
    flex-grow:1
}
.rent-start{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.display-flex{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.p-3{
    padding: 3%;
}

.open-btn{
    padding: 5px;
}
.list-top-title{
    font-size: 1em;
    font-weight: bold;
    letter-spacing: -1px;
    border-bottom:1px solid #f2f2f2;
    line-height: 2.5;
}
.list-top-title-2{
    font-size: 1.1em;
    font-weight: bold;
    letter-spacing: -1px;
    line-height: 2.5;
}
.list-top-title-wrap{
    border-bottom:1px solid #f2f2f2;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.content-detail-view{
    width: 58px;
    border: 1px solid #393951;
    color: #000;
    font-size: 0.6em;
    display: block;
    border-radius: 16px;
    letter-spacing: -2px;
    text-align: center;
    padding: 4px 2px;
    text-decoration: none;

}
.n-padding-wrap{
    margin: 40px 0;
}

.checkbox[type=checkbox]+label{

    font-size: 0.8em;
    line-height: 30px;
    letter-spacing: -1px;
    width: 100%;
    background: url(/images/circle-check.png)no-repeat 3% center /27px;
    text-indent: 15%;

}
.checkbox[type=checkbox]:checked+label{
    background: url(/images/circle-checked.png)no-repeat 3% center /27px;
}
.bottom-border-pd{
    border-bottom: 1px solid #f2f2f2;
    padding: 3vw 0;
}
.rent-number-wrap{
    border: 1px solid var(--light-grey);

}
.border-grey{
    border: 1px solid var(--light-grey);
}
.tent-number{
    font-size: 1.3em;
    font-weight: bold;
}

.rent-number-wrap{
    border:1px solid var(--grey);
    display: flex;
    justify-content: center;
    align-items: center;
    padding:20px 0;
} 

.rent-extend-wrap {
    padding: 5% 0;
    line-height: 1.5;
}
.rent-extend-wrap > .title {
    font-size: 1.1rem;
    font-weight: bold;
}

.my-page-grey-border{
    border-top:1px solid var(--light-grey);
    padding: 20px 5%;
}

.n-my-page-grey-border{
    border-top:1px solid var(--light-grey);
    padding: 22px 5% 0;
}
.edit-a{
    padding: 5px;
}
.my-title{
    font-size: 13px;
    word-break: break-all;
    color: var(--dark-grey);
    line-height: 1.5;

}

.text-overflow{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.notice-pd{
    padding: 10px 0 0;
}
.top-btn{
    position: fixed;
    right: 5%;
    bottom: 5%;
    z-index: 99;
}
.txt-over{
    width: 80%;
}
.x-slider{
    position: absolute;
    top: 177px;
    height: 40px;
    transform: translate(-50%, 0);
 
    overflow-x: scroll;
    white-space: nowrap;
    width: 90%;
    left: 50%;
}

.x-slider ul li{
    display: inline;
  
    padding: 0 0 0 20px;
}
.x-slider ul li a{
    color: var(--dark-grey);
    font-size: 0.8em;
    text-decoration: none;
}
.x-slider ul li::after{
    content: "|";
    font-size: 0.8em;
    padding: 0 0 0 20px;
    color: var(--grey);
    
}
.q-class{
    font-size: 1.2em;
}
.a-class{
    font-size: 1.3em;
    color: var(--orange);
}

.progress{
    color: var(--grey);
}
.progress::after{
    content: "|";
    font-size: 0.8em;
    padding: 0 0 0 10px;
    color: var(--grey);
}

.progress-last{
    color: var(--grey);
}



.orange-badge{
    background: var(--orange);
    color: #fff;
    border-radius: 20px;
    display: inline-block;
    padding: 7px 10px;
    margin: 0 0 5px 0;
    font-size: 0.8em;
}
.gray-badge{
    background: var(--gray);
    color: #fff;
    border-radius: 20px;
    display: inline-block;
    padding: 7px 10px;
    margin: 0 0 5px 0;
    font-size: 0.8em;
}
.content-title{
    line-height: 1.3;
    font-size: 1em;
    font-weight: 500;
}
.blue-badge{
    border: 1px solid var(--light-blue);
    font-size: 0.7em;
    padding: 2px 5px;
    display: inline-block;
    color: var(--light-blue);
    border-radius: 12px;
}
.n-blue-badge{
    border: 1px solid var(--light-blue);
    font-size: 0.7em;
    padding: 10px 5px;
    color:  #fff;
    display: inline-block;
    margin:0 0 0 5px;
    background-color: var(--light-blue);
}

.time-end .content-title,
.time-end .progress,
.time-end .my-title{
    color: var(--grey) !important;
}

.view-count{
    font-size: 23px;
    font-weight: bold;
    text-align: center;
    line-height: 1.5;
}
.view-title{
    font-size: 0.9em;
    text-align: center;
    line-height: 36px;
    
}
.defualt-div{
    width: 33.3%;
    padding: 20px 0;
}
.defualt-div:nth-of-type(2){
    border-right: 1px solid var(--light-grey);
    border-left: 1px solid var(--light-grey);
}
.info-grey-border{
    border-top: 1px solid var(--light-grey);
    
}
.black-border-btn{
    border: 1px solid #000;
    text-align: center;
    font-size: 1em;
    width: 167px;
    position: relative;
    line-height: 47px;
    border-radius: 50px;
    margin: 0 auto;
    display: block;
}
.alram-st[type=checkbox]+label{
    cursor: pointer;
    text-indent: -9999px;
    width: 31px;
    height: 16px;
    top: 10px;
    background: #dadada;
    display: block;
    border-radius: 100px;
    position: relative;
}
.alram-st[type=checkbox]+label:after{
    content: '';
    position: absolute;
    top: -4px;
    left: -6px;
    width: 20px;
    height: 20px;
    box-shadow: -3px 1px 4px 0px rgba(0,0,0,0.2);
    background:url("/images/off.png")center center /21px;
    border-radius: 90px;
    transition: 0.3s;
}
.alram-st[type=checkbox]:checked+label{
    background:#b9def0;
}
.alram-st[type=checkbox]:checked+label:after{
    background:url("/images/on.png")center center /21px;
    content: '';
    position: absolute;
    top: -4px;
    left: 37px;
    width: 21px;
    height: 21px;
    box-shadow: -3px 1px 4px 0px rgba(0,0,0,0.2);
    border-radius: 90px;
    transition: 0.3s;
}


.alram-st[type=checkbox]:checked+ label:after {
    left: calc(120%);
    transform: translateX(-100%);
}
.login-img{
    width: 100px;
    margin: 0 auto;
    display: block
}

.coupon-tab-wrap{
    border-bottom:2px solid var(--light-grey);
    height: 55px;
}
.default-tab {
    font-size: 19px;
    text-align: center;
    width: 50%;
    font-weight: 500;
}
.active-tab{
    border-bottom: 2px solid var(--light-blue);
    color: var(--light-blue);
    line-height: 56px;
   
}

.coupon-list-view{
    /* border:1px solid #000;
    font-size: 0.7em;
    padding: 4px 10px;
    text-align: center;
    border-radius: 50px; */

}

.coupon-title{
    font-size: 1.1em;
    font-weight: 700;
}
.coupon-title-wrap{
    
margin: 5%;
}


.calendar-view{
    /* border:1px solid #000;
    font-size: 0.7em;
    padding: 4px 10px;
    text-align: center;
    border-radius: 50px; */

}

.calendar-title{
    font-size: 1.1em;
    font-weight: 700;
}
.calendar-title-wrap{
    
margin: 5%;
}
.calendar-window.top:before {
    top: -13px;
    bottom: auto;
    left: auto;
    right: 39px;
    border-width: 0 12px 12px;
}
.calendar-window:before {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 40px;
    border-width: 20px 20px 0;
    border-style: solid;
    border-color: var(--grey) transparent;
    display: block;
    width: 0;
}
.calendar-window.top:after {
    top: -13px;
    bottom: auto;
    left: auto;
    right: 39px;
    border-width: 1px 12px 13px;
}
.calendar-window:after {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 47px;
    border-width: 20px 20px 0;
    border-style: solid;
    border-color: #fff transparent;
    display: block;
    width: 0;
}
.calendar-window{
    z-index: 4;
}

a{
    text-decoration: none;
}
.maileage-title-wrap{
    display: flex;
    justify-content: space-between;
    margin: 5vw auto;
}
.grey-div{
    background: var(--light-grey);
    border-radius: 10px;
    width: 49%;
    text-align: center;
    padding: 1vw 0 3vw;
}
.mileage-view-count{
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    line-height: 2.5;
}
.misson-grey-border{
    border-top:1px solid var(--light-grey);
    position: relative;
}
.return-warp{
    padding: 5vw 5%;
    border-top: 1px solid var(--light-grey);
    margin: 5vw 0;
}

.mission-badge{
    width: 45px;
    text-align: center;
    height: 40px;
    left: 3%;
    z-index: 3;
    position: absolute;
    font-size: 0.6em;
    color: #fff;
    border-radius: 50px;
    word-break: keep-all;
    white-space: pre-line;
    padding: 5px 0 0 0;
    line-height: 1.5;
    vertical-align: middle;
    
    top: 1vh;
}
.mission-incomplete{
    background: var(--orange);
}

.mission-list{
    display: flex;
    justify-content: space-between;
    padding: 3vh 5%;
}
/* .mission-complete{
    background: var(--dark-grey);
}
.mission-plobelm{
    background: var(--light-blue);
} */
.mission-blue-badge{
    background: var(--light-blue);
    color: #fff;
    border-radius: 20px;
    display: inline-block;
    padding: 7px 10px;
    margin: 0 0 5px 0;
    font-size: 0.8em;
}
.mission-grey-badge{
    background: var(--dark-grey);
    color: #fff;
    border-radius: 20px;
    display: inline-block;
    padding: 7px 10px;
    margin: 0 0 5px 0;
    font-size: 0.8em;
}
.mission-content-title{
    font-weight: bold;
    font-size: 1.1em;

}
.size-6{
    font-size: 0.6em;
}
.size-8{
    font-size: 0.8em;
    
}

.color-grey{
    color: var(--grey);
}

.color-dark-grey{
    color: var(--grey);
    
}

.color-dark-grey a{
    color: var(--grey);
    
}
.mission-content-pd{
    padding: 10px 5%;
}

.line-height-15{
    line-height: 1.5;

}
.width-90{
    width: 90% !important;
    margin: 0 auto;
}
.p-2{
    padding:2%;
}
.reply-user::before{
    content: '';
    background: url(/images/reply-bg.png)no-repeat left top /12px;
    padding: 5px 0 0 20px;
}
.line-25{
    line-height:2.5;
}
.reply-content{
    padding: 0 0 0 20px;
}
.img-list{
    width: 60px;
    height: 60px;
    margin: 1%;
position: relative;
}

.img-list img{
    width:  100%;
    height: 100%;
}

.justify-start{
    justify-content: start !important;
}
.reply-img-wrap div{
  
    display: inline-block;
   
}
.reply-list-wrap{
    margin: 4vw auto ;
}
.reply-write{
    background: var(--light-grey);
    height: 100px;
    padding: 5%;
    width: 80%;
    margin: 0 auto;
    resize: none;
    display: block;
    font-size: 1em;
}

.reply-write::placeholder{
    font-size: 0.8em;
}

.upload-btn{
    width: 35px;    
}
.upload-btn img{
    width: 25px;    
}

.flie-title::before{
    content:"";
    background: url("/images/file.png")no-repeat left center/ 15px;
    padding: 0 0 0 20px;
    
}
.margin-tb{
    margin: 2vw auto;
}

.img-delete-btn{
    width: 23px !important;
    position: absolute;
    top: -6px;
    right: -5px;
    z-index: 3;
    height: 23px !important;
}
.display-block{
    display: block;
}

.dotted-border{
    border-top:1px dashed var(--grey)
}
.only-flex{
    display: flex;
}
.color-orange{
    color: var(--orange);
}
.color-orange a{
    color: var(--orange);
}
.size-15{
    font-size: 1.5em;
}
.line-13{
    line-height: 1.3;
}
.line-15{
    line-height: 1.5;
}
.write-here{
    resize: none;
    display: block;
    height: 300px ;
    overflow-y: scroll;
}
.write-here::placeholder{
    line-height: 1.5;
    font-size: 0.9em;
    white-space: pre-line;
}
.upload-btn-border{
    width: 48%;
    border: 1px solid #000;
    border-radius: 30px;
    font-size: 1.2em;
    padding: 14px 0;
}
.selector{
    border: 1px solid var(--grey);
    width: 80%;
    padding: 10px 5%;
    margin: 0 auto;
    border-radius: 50px;
}
.request-count{
    border:1px solid var(--grey);
    border-radius: 10px;
    width: 60px;
    height: 60px;

}
.survey-txt{
    border: 1px solid rgba(218, 218, 218, 0.5);
    background: #fff;
    resize: none;
    height: 200px;
    padding: 2%;
    display: block;
    line-height: 1.5;
    width: calc( 90% - 4% ) !important;
}
.display-block{
    display: block;
}
/*-----JH 추가-----*/
/*리스트 up-down을 위해*/
.move-up {
    top: 50px;
}
.color-000{
    color: #000;
}
.color-fff{
    color: #fff;
}
.color-000 a{
    color: #000;
}
.color-fff a{
    color: #fff;
}
.manager-grey-border{
    border-top: 1px solid var(--light-grey);
    padding: 10px 5%;
}
.border-grey-bottom{
    border-bottom: 1px solid var(--light-grey);
}
.bg-light-grey{
    background: var(--light-grey);
}
.bg-fff{
    background: #fff;
    
}

.bg-fff-pay{
    background: #fff;
    padding :190px;
}
.w-9{
    width: 90%;
    max-width: 90%;
    min-width: 90%;
}
.ab-center{
    position: absolute;
    left: 50%;
    transform: translate(-50%,0);

}
.owl-theme .owl-nav.disabled+.owl-dots {
    margin-top: 0px !important;
    margin-bottom: 20px !important;
}
.product-detail p{
    line-height: 1.5;
 }
.map-icon{
    width: 11px;
    padding: 11px;
    display: inline-block;
}
.overflow-x{
    overflow-x: scroll;
}
.display-lineblock{
    display: inline-block;
}
.product-wrap img{
    width: 50% !important;
    margin: 40px auto;
}
.white-space{
    white-space: nowrap;
}
.m-0{
    margin: 0 auto;
}
.m-0-0{
    margin: 0 !important;
}
.width-50{
    width: 50% !important;
}
.width-40{
    width: 40% !important;
}
.border-none{
    border: none !important;
}
.height-100vh{
    height: 100vh;

}
.logo-history{
    width: 40px !important;
    padding: 6px 6px 0 6px;
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translate(-50%,0);
    background: #fff;
    border-radius: 50px 50px 0 0;
}
.menu-under-img{
    position: fixed;
    left: 50%;
    width: 124px;
    transform: translate(-50%,0);
    bottom: 0;
    z-index: 1;
}
.mission-popup-con{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.mission-popup-wrap{
    background: var(--orange);
    width: 80%;
    position: absolute;
    max-height: 300px;
    top: 50%;
    min-height: 150px;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 5%;
    border-radius: 20px;
    overflow-y: scroll;
}

.mission-title{
    color: #fff;
    font-size: 1.1em;
    font-weight: bold;
    line-height: 1.5;
}
.mission-content{
    color: #fff;
    line-height: 1.5;
    font-size: 1em;
}
.ad-center{
    left: 50%;
    position: absolute;
    transform: translate(-50%,0);
}
.ab-vertical-center{
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}


.text-left{
    text-align: left;
}

.triangle-border {
    /* position: relative; */
    padding: 15px;

    border: 1px solid var(--grey);
    color: #333;
    background: #fff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;

  }

  .n-triangle-border {
    border: 1px solid var(--grey);
    color: #333;
    background: #fff;
    -webkit-border-radius: 10px 10px 0 0 ;
    -moz-border-radius: 10px 10px 0 0 ;
    border-radius: 10px 10px 0 0 ;

  }


/* creates the larger triangle */
.triangle-border.top:before {
    top: -13px;
    bottom: auto;
    left: auto;
    right: 39px;
    border-width: 0 12px 12px;
}
  .triangle-border:before {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 40px;
    border-width: 20px 20px 0;
    border-style: solid;
    border-color: var(--grey) transparent;
    display: block;
    width: 0;
}

.triangle-border.top:after {
    top: -13px;
    bottom: auto;
    left: auto;
    right: 39px;
    border-width: 1px 12px 13px;
}
.triangle-border:after {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 47px;
    border-width: 20px 20px 0;
    border-style: solid;
    border-color: #fff transparent;
    display: block;
    width: 0;
}
.display-flex-top{
    display: flex;
    align-items: baseline;

}

.word-keep{
    word-break: keep-all;
}

.exchange-icon{
    position: absolute !important;
    z-index: 2;
    top: -19px !important;
    width: 62px !important;
    left: -14px !important;
}
.date-wrap{
    border: 1px solid var(--grey);
    border-radius: 22px;
    margin: 0 3%;
    padding: 2%;
}
.n-date-wrap{
    border: 1px solid var(--grey);
    /* max-width: 95px; */
    padding: 0 2%;
    /* width: 34%; */
    box-sizing: border-box;
    background: url(/images/d-icon.png)no-repeat 97% / 15px;
    height: 30px;
    width: inherit;
    border-radius: 0px !important;
    margin: 0 2% 0 0;
}
#debug-icon {
    display: none !important;
}

/* input[type=date]{
    
    padding: 10px 0;
    width: 100px;
    
} */

/*JH추가 swal에서 비어있는 버튼, 색깔있는 버튼 두개 동시에 표시를 위해서*/
.swal-btn-empty {
    text-decoration: none;
    border: 1px solid #7cd1f9 !important;
    color: #7cd1f9 !important;
    background-color: #fff !important;
}

.swal-btn-blue {
    text-decoration: none;
    border: 1px solid #7cd1f9 !important;
    color: #fff !important;
    background-color: #7cd1f9 !important;
}

/* 로딩중 */
@keyframes ldio-3rt5yhstynt {
    0% { opacity: 1 }
    100% { opacity: 0 }
  }
  .ldio-3rt5yhstynt div {
    left: 94px;
    top: 48px;
    position: absolute;
    animation: ldio-3rt5yhstynt linear 1s infinite;
    background: #0099e5;
    width: 12px;
    height: 24px;
    border-radius: 6px / 12px;
    transform-origin: 6px 52px;
  }.ldio-3rt5yhstynt div:nth-child(1) {
    transform: rotate(0deg);
    animation-delay: -0.9166666666666666s;
    background: #0099e5;
  }.ldio-3rt5yhstynt div:nth-child(2) {
    transform: rotate(30deg);
    animation-delay: -0.8333333333333334s;
    background: #0099e5;
  }.ldio-3rt5yhstynt div:nth-child(3) {
    transform: rotate(60deg);
    animation-delay: -0.75s;
    background: #0099e5;
  }.ldio-3rt5yhstynt div:nth-child(4) {
    transform: rotate(90deg);
    animation-delay: -0.6666666666666666s;
    background: #0099e5;
  }.ldio-3rt5yhstynt div:nth-child(5) {
    transform: rotate(120deg);
    animation-delay: -0.5833333333333334s;
    background: #0099e5;
  }.ldio-3rt5yhstynt div:nth-child(6) {
    transform: rotate(150deg);
    animation-delay: -0.5s;
    background: #0099e5;
  }.ldio-3rt5yhstynt div:nth-child(7) {
    transform: rotate(180deg);
    animation-delay: -0.4166666666666667s;
    background: #0099e5;
  }.ldio-3rt5yhstynt div:nth-child(8) {
    transform: rotate(210deg);
    animation-delay: -0.3333333333333333s;
    background: #0099e5;
  }.ldio-3rt5yhstynt div:nth-child(9) {
    transform: rotate(240deg);
    animation-delay: -0.25s;
    background: #0099e5;
  }.ldio-3rt5yhstynt div:nth-child(10) {
    transform: rotate(270deg);
    animation-delay: -0.16666666666666666s;
    background: #0099e5;
  }.ldio-3rt5yhstynt div:nth-child(11) {
    transform: rotate(300deg);
    animation-delay: -0.08333333333333333s;
    background: #0099e5;
  }.ldio-3rt5yhstynt div:nth-child(12) {
    transform: rotate(330deg);
    animation-delay: 0s;
    background: #0099e5;
  }
  .loadingio-spinner-spinner-sifjnkb37x {
    width: 200px;
    height: 200px;
    display: inline-block;
    overflow: hidden;
    
  }
  .ldio-3rt5yhstynt {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translateZ(0) scale(1);
    backface-visibility: hidden;
    transform-origin: 0 0; /* see note above */
  }
  .ldio-3rt5yhstynt div { box-sizing: content-box; }
  /* generated by https://loading.io/ */

  .category-con{
    
    width: 100%;
    height: 100vh;
    position: absolute;
    background: rgba(0,0,0,0.6);
    top:0;
    bottom:0;
  }
  .category-wrap{
        background: #fff;
        width: 80%;
        border-radius: 10px;
        margin: 0 auto;
        padding: 18px 5%;
        position: fixed;
        top: 50%;
        left: 50%;
        min-height: 300px;
        transform: translate(-50%,-50%);

  }
.c-title{
    font-weight: bold;
    font-size: 19px;
    line-height: 19px;
    margin: 9px 0;
}

  .cate-select-st[type=radio]+label{
    background: url(/images/cate-off.png)no-repeat left center/20px;
    font-size: 16px;
    white-space: nowrap;
    padding: 0 0 0 26px;
    line-height: 45px;
    display: block;
    font-size: 15px;
    width: 80%;
}
    

.cate-select-st[type=radio]:checked+label{
    background: url(/images/cate-on.png)no-repeat left center/20px;
    
}

.cate-box-wrap{
    border-top: 1px solid rgba(236,236,236,0.5);
    width: 100%;
}
.cate-box-wrap:last-child{
    border-top: 1px solid rgba(236,236,236,0.5);
    border-bottom: 1px solid rgba(236,236,236,0.5);
    width: 100%;
}
.cate-box{
    width: 80%;
    margin: 0 auto;
    
}
.img-big-con {
    
    width: 100%;
    height: 100vh;
    position: absolute;
    background: rgba(0,0,0,0.6);
    top:0;
    bottom:0; 
    z-index: 2;
}
.img-wrap{
    width: 100%;
    margin: 0 auto;

}
.b-img{
    display: block;
    width: 90%;
    margin: 0 auto;
    top: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
}
.close-img{
    margin: 5%;
    position: absolute;
    right: 0;
    top: 0;
}



.cate-select-btn{
    border: 1px solid var(--grey);
    width: 90%;
    background: url(/images/arrow-bottom.png)no-repeat 95% center /15px;
   
    padding: 15px 5%;
    font-size: 15px;
    margin: 0 auto 15px;
    border-radius: 50px;
    
}

/* .fixed-bottom .bottom-button-wrapper{
    position: relative;
} */
.fixed-bottom .menu-under-img {
    display: none;
}
@media (min-width:200px) and (max-width:375px) and ( min-height: 0px ){

    .splash-img{
        width: 24% !important;
    }
    .splash-last-btn{
        top: 57%;

    }
    .splash-img-top{
        top: 24%;
    }
    .splash-img-wrap{
        padding: 0 0 40px !important;

    }
}

/**스크롤 금지를 위해 JH추가*/
.scrollDisable {
    overflow: hidden;
}

/*ios click 안먹는거 방지위해 JH추가*/
.ios-display-none {
    height: 0;
    position: absolute;
    width: 0;
}
.display-none {
    display: none;
}


/* 인트로 페이지*/

.web-menu{
    font-family: 'Noto Sans KR' !important;
    font-size: 17px;
    font-weight: 400;
    color: #676767;
    letter-spacing: -1px;
    

}

ul#menu li.active a{
    color: #0099e5;
    border-bottom: 1px solid #0099e5;  
} 
ul#menu li{
    
}
/* .web-menu.active{
    color: #0099e5;
    border-bottom: 1px solid #0099e5;
} */
.top-menu{
    position: fixed;
    top: 0;
    z-index: 999;
    width: 100%;
    background-color: #fff;
}
.top-menu ul{
    display: flex;
    max-width: 742px;
    width: 100%;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    padding: 8px 150px 0 0;
}

.con-list{
    width: 100%;
    height: 100vh;
}
.con1{
    background-color: #27baff;
    
     
}
.con2{
    background-color: #ededed;
}
.con-wrap-1{
    background: url(/images/web-1-bg.png);
    width: 1920px;
    height: 100vh;
    background-position-y: 47px;
    background-size: 100% 100%;

}
.wrap-1{
    width: 724px;
    display: flex !important;
    margin: 0 auto;
    bottom: 0;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    justify-content: space-between;
}
.web-txt-img-1{
    display:block;
    width: 300px;
}
.go-site{
    display: block;
}

.go-site img{
    width: 232px;

}
.web-sns-list-wrap{
    /* transform: translate(-50%, 0); */
    position: relative;
    
    top:162px;
    /* left: 50%; */
    width: 266px;

    margin: 0 auto;
    


    }
.web-sns-list-wrap a{
    padding: 12px;
    display: inline-block;
}
.copy-here{
    display: flex;
    
}
.copy-txt{
    background-color: #fff;
    padding: 7px 7px;
    font-size: 18px;
    font-family: 'Noto Sans KR' !important;
    font-weight: 100;
    color: #666666;
    border-radius: 0px;
    width: 194px !important;


}
.copy-btn{
    background: #000;
    color: #fff;
    font-size: 16px;
    padding: 7px 10px;
    white-space: nowrap;
}
.wrap-2{
    background: url(/images/web-2-bg.png);
    width: 1920px;
    height: 100vh;
    background-size: 100% 100%;

}
.wrap-center{
    display: flex;
    margin: 0 auto;
    top: 50%;

    justify-content: flex-end;
    position: absolute;
    left: 55%;
    transform: translate(-50%, -50%);
}
.web-2-img{
    width: 278px;
    height: auto;
    object-fit: contain;

}


.web-2-img-2{
    width: 678px;
    padding: 136px 0 0 0;
    object-fit: contain;
}

.wrap-3{
    background: url(/images/web-3-bg.png);
    width: 100%;
    height: 100vh;
    background-size: 1920px;
    
}
.wrap-4{
    background: url(/images/web-4-bg.png)no-repeat;
    width: 100%;
    height: 100vh;
    background-size: cover;
    /* background-position-y: 77px; */
    background-position-x: center;
}

.wrap-img-3{
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: calc((16 / 9) * 11vh);
    width: 333px;
}

.wrap-img-4{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 650px;
}
.wrap-img-5-img{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 477px;
}
.wrap-img-5{
    display: block;
    margin:  0 auto;
}
.mail-send-btn{
    position: absolute;
    display: block;
    z-index: 1;
    left: 50%;
    top: 60%;
    transform: translate(-50%, 60%);
}   
.mail-send-btn img{
    width: calc(75%);
    margin: 0 auto;
    display: block;
    text-align: center;
}
.wrap-5{
    background: url(/images/web-5-bg.png)no-repeat;
    width: 100%;
    height: 100vh;
    background-size: cover;
    /* background-position-y: 77px; */
    background-position-x: center;
}
.wrap-6{
    background: url(/images/web-6-bg.png)no-repeat;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position-y: -87px;
    background-position-x: center;
}

.wrap-img-6{
    position: absolute;
    transform: translate(-50%,0);
    left: 50%;
    /* top: 50%; */
    top: calc((16 / 9 )* 13vh);
    width: 300px;
}

#footer{
    height: 128px ;
}
.footer{
    position: absolute;
    bottom: 0;
    background: #fff;
    width: 100%;

}
.footer-inner{
    display: flex;
    width: 750px;
    margin: 0 auto;
    letter-spacing: -1.4px;
    font-size: 12px;
    padding: 30px 0 50px;
    line-height: 2;
    justify-content: space-between;

}
.footer-right{
    text-align:right;
    
}
.pc-only{
    display: block;
}
.mobile-only{
    display: none;
}


.mobile-menu-list{
    background-color: #0d3f57;
    width: 100%;
    position: fixed;
        z-index: 1;
        height: 127px;
    
 
}


.web-mobile-menu-con{
    z-index: 1;
    width: 100%;
    background-color: #0d3f57;
    position: fixed;
    top:72px;
    transform: translateZ(10px);
    height: 55px;
}


.m-top-img{
    /* position: relative;
    top: -124px;
    z-index: -1; */
}

.m-link-wrap{
    position: absolute;
    /* top: calc((16 / 9 )*90vw); */
    left: 5%;
    bottom: 72px !important;


}
.mobile-download-link{
    margin: 2vw;
}
.mobile-download-link img{
    width: 138px;
  
    
}
.footer-left a{
    color: #898989 !important;
}
.footer-left{
    color: #898989;
}
.footer-right{
    color: #666666;
    font-weight: bold;
}
.news-btn{
    position: absolute;
    left: 50%;
    top: 43%;
    transform: translate(-50%, -50%);

}
.news-btn img{
    width: calc(75%);
    margin: 0 auto;
    text-align: center;
    display: block;

}
.modal-body{
    white-space: pre-line !important;
}
.modal-header .close{
    padding: 0 1rem 0 !important;
}
.fp-tableCell{
    position: relative;
}
.web-phone{
    max-width: 350px;
    width: 24vw;
    min-width: 300px;
}
.web-menu-container{
    width: 754px;
    padding: 5px 0;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;

}
.menu-wrap{
    display: inline-flex;
    width: 100%;
    
    vertical-align: middle;
}
.top-menu ul{
    padding: 0 0 0 95px;
}
.splash-container .owl-wrap{
    /* max-width: 375px !important; */
    margin: 0 auto !important;
}
.splash-container  .owl-carousel .owl-item{
    /* max-width: 375px !important; */
    

}

.splash-container .splash-img {
    max-width: 140px !important;

}
@media (min-width: 100px) and (max-width: 768px) { 
    
.mobile-bg{
    width: 100%;
    
    height: calc(100% - 127px) !important;
    
    position: absolute;
    bottom: 0;
    
    box-sizing: border-box;
    background-size: cover !important;
    background-position: top center !important;
   
    
}
    .web-menu-container{
        width: 100%;
        display: block;
        padding: 0 ;
    }
    .m-menu-top-img{
        position: fixed;
        background: #0d3f57;
        z-index: 1;
        width: 100%;
        height: 127px;

        border-bottom: 1px solid #135d80;
    }   
   
    
    .m-menu-top-img img{
        display: block;
        text-align: center;
        margin:0 auto;
        width: 163px;
        padding: 9px 0 9px;
    }
    ul#menu li.active a{
        color: #fff!important;   
    
    }
    ul#menu li a{
        background: #0d3f57;
    }
    ul#menu li.active a{
        color: #fff !important;
        border-bottom: 2px solid #fff !important;
        text-decoration: none!important;
    }
    .menu-wrap{
        width: 100%;
        
    border-bottom: 1px solid #135d80;

    position: relative;
    top: 59px;
    z-index: 1;
    }
    ul#menu{
        display: flex;
        top:72px;
        z-index: 2;
        margin: 0 auto;
        position: fixed;
        left: 50%;
        transform: translate(-50%,0);
        align-items: center;
        max-width: 68%;
        background-color: #0d3f57;
        padding: 17px 5px 16px 5px;
        justify-content: space-around;
    
    }
    .web-mobile-menu-wrap{
        display: flex;
        z-index: 1;
        margin: 0 auto;
        position: fixed;
        left: 50%;
        transform: translate(-50%,0);
        background-color: #0d3f57;
    }

    
ul#menu li a{
    color: #7c95bf;
    font-size: 14px;
    white-space: nowrap;
    letter-spacing: -1px;
    text-align: center;
    font-weight: 500;
    padding: 17px 10px 16px 10px;
}
.web-mobile-menu{
    color: #7c95bf;
    font-size: 14px;
    white-space: nowrap;
    letter-spacing: -1px;
    text-align: center;
    font-weight: 500;
    padding: 17px 10px 16px 10px;
    
}

    /* .fp-tableCell{
        height: calc(100vh - 130px) !important
    } */
    .wrap-1{
        width: 100vw;
    }
    .mobile-01{
        background: url(/images/mobile-01.png)no-repeat;
        background-size: 100% auto;
        background-position-y: 127px !important; 
        width: 100%;
    }
    .mobile-02{
        background: url(/images/mobile-02.png)no-repeat;
        background-size: 100% auto;
        

        }
    .mobile-03{
        background: url(/images/mobile-03.png)no-repeat;
        background-size: 100% auto;
        
    }
    .mobile-04{
        background: url(/images/mobile-04.png)no-repeat;
        background-size: 100% auto;
      
    }
    .mobile-05{
        background: url(/images/mobile-05.png)no-repeat;
        background-size: 100% auto;
       
    }
    .mobile-06{
        background: url(/images/mobile-06.png)no-repeat;
        background-size: 100% auto;
        
    }
    .con1{
        /* background: url(/images/mobile-01.png)no-repeat; */
    }
    .con2{
        /* background: url(/images/mobile-02.png); */
     }
    .con3{
        background: url(/images/mobile-03.png);
    }
    .con4{
        background: url(/images/mobile-04.png);
    }
    .con5{
        background: url(/images/mobile-05.png);
    }
    .con6{
        background: url(/images/mobile-06.png);
    } 
    .web-sns-list-wrap{
        top:95px;
        z-index: 1;
        position: absolute;
        left: 50%;
        transform: translate(-50%,0);
    
     
    }
    .con-wrap-1{
        width: 100%;
        background: url(/images/mobile-01.png)no-repeat;
        background-size: 100%;
        height: calc(100vh - 127px);
        background-position-y: bottom;

        position: absolute;
        /* margin-top: 127px; */
        top: 50px;
       
    }
    .mobile-only{
        display: block;
    }
    .pc-only{
        display: none !important;
    }
    .mail-send-btn{
        top:56%
    }
    .news-btn {
        top: 53.6%;
        width: fit-content;
    }
    .mail-send-btn{
        width: fit-content;
    }
    .footer-inner{
        padding: 10px 0 10px;
        width: 97%;
        margin: 0 auto;
        line-height: 1.5;
    }
    #footer{
        height: auto89;
    }
}


@media screen and ( max-width: 768px ) and ( min-height: 640px ){
    .mobile-bg{
        background-position: center -70px !important;
        
    }
    .footer-left{
        width: 80%;
        word-break: keep-all;
    }
    .footer-right *{
        display: block;
        white-space: nowrap;

    }
}



@media screen and ( max-width: 375px ){
    .mobile-04{
        background-size: 87% !important;
        background-position: center !important;
        
    }
    .con4{
        background: #4fc4fa !important;
    }
    .mobile-05{
       background: none;
        background-size: 87% !important;
        background-position: center !important;
        /* backdrop-filter: blur(5px) !important; */
    }
    .con5{
        /* background: #3e2e27 !important; */
        background-size: cover;
        background-position: center 90px;
    }
    .mobile-06{
        background-size: 87% !important;
        background-position: center 36%!important;
        
    }
    .mail-send-btn{
        top:70% !important
    }
    .con6{
        background: #f0f0f0 !important;
    }
}