@charset "utf-8";

#wrap{
    position:relative;
}

body {
    overflow-x:hidden;
}

.black_filter{
    width:100%;
    height:300px;
    background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.6));
    position:absolute;
    left:0;
    bottom:0;
    z-index: 1;
}

.back_icon{
    width: calc(100vw* (23/428));
    height: calc(100vw* (14/428));
    margin-right: calc(100vw* (10/428));
    position:absolute;
    left: calc(100vw* (25/428));
    top: calc(100vw* (80/428));
}


.back_btn span{
}


input[readonly] {
    background-color: #eee;
}

.is-invalid {
border-color: #F8440E !important;
padding-right: calc(1.5em + 0.75rem);
background-repeat: no-repeat;
background-position: right calc(0.375em + 0.1875rem) center;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.is-invalid~.invalid-feedback, .is-invalid~.invalid-tooltip, .was-validated :invalid~.invalid-feedback, .was-validated :invalid~.invalid-tooltip {
     display: block;
}

.invalid-feedback {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    color: #F8440E;
    font-size: calc(100vw * (15/428));
    font-weight: 400;
}

.valid-feedback {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    color: #0e3df8;
    font-size: calc(100vw * (15/428));
    font-weight: 400;
}

/* ==== 경고 문구 ==== */
.success input{
	border-color: #000000;
	color: #000000;
}

.loginError{
	display: none;
	color: #F8440E;
}

.success input[type="number"]:valid,
.success input[type="text"]:valid,
.success input[type="password"]:valid {
    border-color: #000000;
}


.warning input {
    border-color: #F8440E;
    color: #F8440E;
}

.messege {
    margin-top: calc(100vw*(6 / 428));
    font-size: calc(100vw*(15 / 428));
    display: none;
}

/* == 회원가입시 전화번호 체크 == */
.user_phoneCheck {
    margin-top: calc(100vw*(6 / 428));
    font-size: calc(100vw*(15 / 428));
    display: none;
}

.error .user_phoneCheck {
     display: block;
    text-align: left;
    color: #F8440E;
}


.warning .messege {
    display: block;
    text-align: left;
    color: #F8440E;
}

.warning .vertify_num+.time {
    color: #F8440E;
}

.warning input[type="number"]:valid,
.warning input[type="text"]:valid,
.warning input[type="password"]:valid {
    border-color: #F8440E;
}
/* ============== */

.see_more_btn{
    display:flex;
    justify-content: center;
    margin-top:calc(100vw*(20/428));
    margin-bottom:calc(100vw*(20/428));
}

.see_more_btn a{
    width:calc(100vw*(150/428));
    height:calc(100vw*(50/428));
    border:1px solid #00A9AB;
    border-radius: calc(100vw*(25/428));
    display:flex;
    align-items: center;
    justify-content: center;
}

.see_more_btn a p{
    font-size:18px;
    font-weight:600;
    color:#00A9AB;
}



.plus_img{
    margin-right:10px;
    width:15px;
    height:15px;
}

/* error가 필요하면 html파일 id="wrap" 아래있는 class 명추가 후 .error 사용 */
/* 
.sign_wrap .error{
    border-color:red;
}
 */

.mb_header{
    width:calc(100vw*(428/428));
    height:calc(100vw*(110/428));
    box-shadow: 0 calc(100vw*(1/428)) calc(100vw*(2/428)) rgba(0, 0, 0, 0.15);
    padding-bottom:calc(100vw*(15/428));
    position:relative;
}

.header_logo{
    display:flex;
    justify-content: center;
    align-items: flex-end;
    height:100%;
}

.logo_img{
    width:calc(100vw*(90/428));
    height:calc(100vw*(20/428));
}

.bell_btn{
    width:calc(100vw*(24/428));
    height:calc(100vw*(24/428));
    position:absolute;
    right:calc(100vw*(25/428));
    bottom:calc(100vw*(15/428));
}

#header{
    width:calc(100vw*(428/428));
    height:calc(100vw*(50/428));
    box-shadow: 0 calc(100vw*(1/428)) calc(100vw*(2/428)) rgba(0, 0, 0, 0.15);
    padding-bottom:calc(100vw*(15/428));
    position:relative;
    z-index: 999;
    background:#fff;
}

.head_title p{
    font-size:calc(100vw*(16/428));;
    font-weight:600;
}

.back_btn {
    width: calc(100vw*(24/428));
    height: calc(100vw*(24/428));
    position: absolute;
    left: calc(100vw*(25/428));
    bottom: calc(100vw*(15/428));
}
.back_btn_ {
    width: calc(100vw*(24/428));
    height: calc(100vw*(24/428));
    position: absolute;
    left: calc(100vw*(25/428));
    top: calc(100vw*(15/428));
}

.more_btn {
    width: calc(100vw*(4/428));
    height: calc(100vw*(20/428));
    position: absolute;
    right: calc(100vw*(25/428));
    bottom: calc(100vw*(15/428));
}

/*더보기 옵션*/
.edit_toggle {
    position:absolute;
    top: calc(100vw*(35/428));
    right: calc(100vw*(0/428));
    width: calc(100vw*(120/428));
    height: calc(100vw*(40/428));
    padding-top: calc(100vw*(11/428));;
    font-size: calc(100vw*(14/428));
    background: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    z-index:9;
    text-align: center;
    display:none;
}

.edit_btn p{
    font-size:calc(100vw*(15/428));
    font-weight:500;
}


img {
    width: 100%;
    height: 100%;
}

input[type="text"]{
    width: 100%;
    height: calc(100vw*(50/428));
    border:1px solid;
    border-color:#bcbcbc;
    border-radius: calc(100vw*(8/428));
    margin-top: calc(100vw*(10/428));
    font-size: calc(100vw * (16/428));
    padding-left:calc(100vw * (15/428));
}

input[type="email"]{
    width: 100%;
    height: calc(100vw*(50/428));
    border:1px solid;
    border-color:#bcbcbc;
    border-radius: calc(100vw*(8/428));
    margin-top: calc(100vw*(10/428));
    font-size: calc(100vw * (16/428));
    padding-left:calc(100vw * (15/428));
}

input[type="text"]::placeholder{
    font-size:calc(100vw * (15/428));
    font-weight:400;
    color:#999;
}

input[type="password"]{
    width: 100%;
    height: calc(100vw*(50/428));
    border:1px solid #bcbcbc;
    border-radius: calc(100vw*(8/428));
    margin-top: calc(100vw*(10/428));
    font-size: calc(100vw * (16/428));
    padding-left:calc(100vw * (15/428));
}

input[type="password"]::placeholder{
    font-size:calc(100vw * (15/428));
    font-weight:400;
    color:#999;
}

.vertify{
    padding-left:calc(100vw * (54/428));
    margin-top:0;
}

label{
    font-size:calc(100vw * (15/428));
    font-weight:400;
}

input[type="text"]:focus {
    outline: 1px solid #333;
}

input[type="password"]:focus {
    outline: 1px solid #333;
}

/*로그인 (둥근버튼)*/
.common_btn a {
    width: 100%;
    height: calc(100vw*(50/428));
    line-height: calc(100vw*(50/428));
    font-size: calc(100vw*(18/428));
    font-weight: 600;
    text-align: center;
    background: #fff;
    border-radius: calc(100vw*(25/428));
    color: #00A9AB;
    border:1px solid #00A9AB;
}

.common_btn2 a {
    width: 100%;
    height: calc(100vw*(50/428));
    line-height: calc(100vw*(50/428));
    font-size: calc(100vw*(18/428));
    font-weight: 600;
    text-align: center;
    background: #fff;
    border-radius: calc(100vw*(25/428));
    color: #333;
    border:1px solid #444;
}

/* .common_btn a:hover {
    background: #00A9AB;
    border:0;
    color: #fff;
} */

.btn_margin{margin-top:calc(100vw*(40/428));}

/*아이디 비밀번호 찾기 (radius:8)*/
.sign_button a {
    width: calc(100vw*(378/428));
    height: calc(100vw*(50/428));
    line-height: calc(100vw*(50/428));
    font-size: calc(100vw*(18/428));
    font-weight: 600;
    text-align: center;
    background: #00A9AB;
    border-radius: calc(100vw*(8/428));
    color: #fff;
}

/*탭메뉴*/
.tab {
    width: calc(100vw*(194/428));
    font-size:calc(100vw*(16/428));
    font-weight:500;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-bottom: 2px solid #ddd;
    color: #999;
    padding-bottom: calc(100vw*(15/428));
}

.tab.active {
    border-bottom: 2px solid #00A9AB;
    color: #00A9AB;
    font-weight:600;
}

/*체크박스*/
input[type="checkbox"] {
    display: none;
}

input[type="checkbox"]+label {
    cursor: pointer;
    height: 100%;
    background-image: url(../img/sign/check_off.svg);
    background-repeat: no-repeat;
    display: inline-flex;
    width: 100%;
    padding: 0 0 0 calc(100vw*(20/428));
}

input[type="checkbox"]:checked+label {
    background-image: url(../img/sign/check_on.svg);
}

/*************하단 고정네비******************/
.bottom_banner{
    /*background:url(../img/main/footer_banner.jpg) no-repeat center center / cover;*/
    width:100%;
    height:calc(100vw*(120/428));
    margin-bottom:calc(100vw*(95/428));
}

.button_menu{
    height:calc(100vw*(95/428));
    width:100%;
    background:#fff;
    position:fixed;
    bottom:0;
    left:0;
    display:flex;
    justify-content: center;
    align-items: flex-start;
    z-index: 91;
    border-top:1px solid #eee;
}

.nav_btn1 a.nav1{
    background: url(../img/main/nav1.svg) no-repeat center center;
    width:calc(100vw*(35/428));
    height:calc(100vw*(35/428));
    background-size: contain;
}

.nav_btn1 a.nav1.active{
    background: url(../img/main/nav1_on.svg) no-repeat center center;
    width:calc(100vw*(35/428));
    height:calc(100vw*(35/428));
    background-size: contain;
    color:#00A9AB;
}


.nav_btn2 a.nav2{
    background: url(../img/main/nav2.svg) no-repeat center center;
    width:calc(100vw*(35/428));
    height:calc(100vw*(35/428));
    background-size: contain;
}

.nav_btn2 a.nav2.active{
    background: url(../img/main/nav2_on.svg) no-repeat center center;
    width:calc(100vw*(35/428));
    height:calc(100vw*(35/428));
    background-size: contain;
}

.nav_btn4 a.nav4{
    background: url(../img/main/nav4.svg) no-repeat center center;
    width:calc(100vw*(35/428));
    height:calc(100vw*(35/428));
    background-size: contain;
}

.nav_btn4 a.nav4.active{
    background: url(../img/main/nav4_on.svg) no-repeat center center;
    width:calc(100vw*(35/428));
    height:calc(100vw*(35/428));
    background-size: contain;
}

.nav_btn5 a.nav5{
    background: url(../img/main/nav5.svg) no-repeat center center;
    width:calc(100vw*(35/428));
    height:calc(100vw*(35/428));
    background-size: contain;
}

.nav_btn5 a.nav5.active{
    background: url(../img/main/nav5_on.svg) no-repeat center center;
    width:calc(100vw*(35/428));
    height:calc(100vw*(35/428));
    background-size: contain;
}

.nav_center{
    display:flex;
    align-items: center;
    flex-direction: column;
    margin-top:calc(100vw*(15/428));
}

.nav_btn1 p,
.nav_btn2 p,
.nav_btn4 p,
.nav_btn5 p{
    font-size:calc(100vw*(11/428));
    font-weight:400;
    padding-top:calc(100vw*(6/428));
}

.nav_btn_center{
    width:calc(100vw*(60/428));
    height:calc(100vw*(60/428));
    border-radius:calc(100vw*(60/428));
    box-shadow: 0 calc(100vw*(1/428)) calc(100vw*(5/428)) rgba(204, 204, 204, 0.99);
    margin:0 calc(100vw*(27/428));
    margin-top:calc(100vw*(8/428));
}

.nav_btn2{margin-left:calc(100vw*(33/428));}
.nav_btn4{margin-right:calc(100vw*(33/428));}

/*오퍼시티 알림창*/
.opacity{
    width:calc(100vw*(340/428));
    height:calc(100vw*(45/428));
    line-height: calc(100vw*(45/428));
    border-radius: calc(100vw*(6/428));
    text-align: center;
    background:rgba(0, 0, 0, 0.5);
    position:absolute;
    top:calc(100vw*(90/428));
    left:50%;
    transform: translate(-50%, -50%);
}

.opacity span{
    font-size:calc(100vw*(15/428));
    font-weight:500;
    color:#fff;
}

/*진행중 이벤트 상세 고정버튼*/
.ing_button_wrap{
    width:100%;
    position:fixed;
    left:0;
    bottom:0;
    background:#fff;
    display:flex;
    align-items: center;
    flex-direction: column;
    padding:calc(100vw*(25/428)) 0 calc(100vw*(50/428));
}

.ing_button_wrap .common_btn a {
    width: calc(100vw*(318/428));
    height: calc(100vw*(50/428));
    line-height: calc(100vw*(50/428));
    font-size: calc(100vw*(24/428));
    font-weight: 600;
    text-align: center;
    background: #00A9AB;
    border-radius: calc(100vw*(25/428));
    color: #fff;
    border:1px solid #00A9AB;
    margin-bottom: calc(100vw*(10/428));
}
.ing_button_wrap .common_btn2 a {
    width: calc(100vw*(318/428));
    height: calc(100vw*(50/428));
    line-height: calc(100vw*(50/428));
    font-size: calc(100vw*(24/428));
    font-weight: 600;
    text-align: center;
    background: #fff;
    border-radius: calc(100vw*(25/428));
    color: #333;
    border:1px solid #444;
}

/**페이지 컷**/
/*page cut*/
.page_cut {
    margin:calc(100vw*(50/428)) 0 calc(100vw*(127/428));
}

.page_cut .p_c_icon a {
    width: calc(100vw*(20/428));
    height: calc(100vw*(20/428));
    display: block;
}

.page_cut ul {
    display: flex;
    align-items: center;
    justify-content: center;
}

.page_cut ul li {
    padding: 0 calc(100vw*(12.5/428));
    font-size: calc(100vw*(17/428));
    font-weight: 500;
}

.page_cut .p_c_text a {
    color: #333
}

.page_cut ul li a:active {
    color: #fff;
    width:calc(100vw*(26/428));
    height:calc(100vw*(26/428));
    background:#00A9AB;
    text-align: center;
    border-radius: calc(100vw*(20/428));
    line-height: calc(100vw*(26/428));

}

.page_cut ul li a.active {
    cursor: default;
    color: #fff;
    width:calc(100vw*(26/428));
    height:calc(100vw*(26/428));
    background:#00A9AB;
    border-radius: calc(100vw*(20/428));
    text-align: center;
    line-height:calc(100vw*(26/428));
}

/**공지사항 상세페이지**/
.notification_product_wrap{
    display:flex;
    justify-content: center;
    padding-top:calc(100vw*(20/428));
}

.notifi_contxt{
    padding:calc(100vw*(20/428)) calc(100vw*(25/428)) 0;
}
.notifi_contxt p{
    font-size:calc(100vw*(15/428));
    font-weight:400;
    line-height: 1.4;
}

/*아코디언 슬라이드*/
.que{
    padding: calc(100vw*(19/428)) calc(100vw*(10/428));
    cursor: pointer;
    font-size: 14px;
    border-bottom: 1px solid #dddddd;
    display:flex;
    justify-content: space-between;
    font-weight:400;
}

#Accordion_wrap{
    width:calc(100vw*(388/428));
}

.que span{
    font-size: calc(100vw*(15/428));
    font-weight:400;
}

.que span b{
    font-size: calc(100vw*(18/428));
    font-weight:500;
    color:#00A9AB;
    margin-right: calc(100vw*(10/428));
}

.que.on .accordion_row{
    transform: rotate(180deg);
    transition: all .5s;
}

.accordion_row{
    width:calc(100vw*(20/428));
    height:calc(100vw*(20/428));
}

.anw {
    display: none;
    overflow: hidden;
    font-size: calc(100vw*(15/428));
    background-color: #F8F8F8;
    padding: calc(100vw*(21/428)) calc(100vw*(27/428));
    font-weight:400;
}


.anw span b{
    font-size: calc(100vw*(18/428));
    color: #FF5D57;
    margin-right: calc(100vw*(10/428));
    font-weight:500;
}

.anw_text{
    display:flex;
}

/* 모달창 */
.modal.on {
    display: block;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .3);
    display: none;
}

.modal .modal_box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100vw*(398/428));
    border-radius: calc(100vw*(14/428));
    transform: translate(-50%, -50%);
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
}

.modal .btn_group {
    display: flex;
    justify-content: center;
    padding-bottom:calc(100vw*(30/428));
}

.modal .btn_group .btn {
    width:calc(100vw*(160/428));
    height:calc(100vw*(45/428));
    border-radius: calc(100vw*(8/428));
    font-weight:600;
    font-size:calc(100vw*(18/428));
}

.no_btn{
    margin-right:calc(100vw*(14/428));
    border:1.5px solid #ddd;
}

.ok_btn{
    background:#00A9AB;
    color:#fff;
}

.modal .btn.cancel {
    background: #E3E3E3;
}


/* 작은 모달창 */
.modal.small .content {
    padding: calc(100vw*(65/428)) 0 calc(100vw*(51/428));
    text-align: center;
}

.modal.small .content p {
    font-size:calc(100vw*(16/428));
    font-weight:500;
}

#myPdf{
    width:calc(100vw * (378 / 428));
    height:calc(100vw * (600 / 428));
}

#myPdf::-webkit-scrollbar {display:none;}