@charset "euc-kr";

/* ±¤Å¬ */
.top_wrapper {
    position: relative;
}
.top_wrapper .soon{ display:block; width: 100%; height: 100%; background: rgba(0,0,0,0.7); position:absolute; left: 0; top: 0; z-index:2; }
.top_wrapper .soon::before{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    content: '5¿ù 22ÀÏ(¿ù) COMING SOON';
    width: 270px;
    height: 75px;
    color: #fff;
    font-size: 34px;
    font-weight: bold;
}

.click_wrap{
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 462px;
    height: 538px;
    margin: 27px 67px 23px 0; 
    box-sizing: border-box;
    background-color: #fff;
}
.click_wrap::after{content: "";display: block;clear: both;}
.click_wrap .book_img,
.click_wrap .count_wrap { float:none; }
.click_wrap .book_img { margin: 35px 0 0; }
.click_wrap .count_wrap {
    position: relative; float: none; width:100%; height: 100%;
}
.click_wrap .count_wrap > p.today{
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translate(-50%, 0);
    color: #e44eb7;
    font-size: 35px;
    font-weight: 900;
    text-align: center;
    width: 100%;
}
.click_wrap .count_wrap > .count_box { position: relative; text-align: center;
    margin: 160px 0 36px 0;
}
.click_wrap .count_wrap > .count_box .cspan { color:#232323; font-size:50px; font-weight:900; }
.click_wrap .count_wrap > .count_box span{text-align: center; position: relative; display: inline-block; width: 108px; height: 130px; line-height: 117px; color: #232323; font-size: 110px; font-weight: 900;  border: 2px solid #232323; }
.click_wrap .count_wrap > .count_box span::before{left:0;width:100%;height:4px;background:#232323;}
.click_wrap .count_wrap > .count_box span+span{border-left: 0;}
.click_wrap .count_wrap > .sold{position:absolute; top: 13%; right: 13px; z-index: 2;}
.click_wrap .count_wrap > .count_box .evt_end{position:absolute;right: -38px;bottom: -110px;}
.click_wrap .count_wrap .clickEvtBtn{ margin-bottom: 122px; }
.click_wrap .count_wrap .clickEvtBtn a {max-width:498px; width:70%; display: block; margin:auto; }
.click_wrap .count_wrap .textEvt { margin-top:10px; color:#e45c6c; font-size: 13px; text-align:center; }
.click_wrap .count_wrap > a {
    position: absolute;
    right: 67px;
    bottom: 55px;
    display: inline-block;
    color:#232323;
    font-size: 17px;
    text-align:center; 
    font-weight: bold;
    text-decoration: underline;
    text-underline-offset: 6px;
 }
.click_wrap .tiny_txt{margin: 0 auto;display: block;font-size: 13px;color: #ababab;text-align: center;line-height: 1.2;}
.click_wrap .tiny_txt strong{color: #3c4dde;}

.book_check{
    margin-top: 77px;
}
.book_check h3{color: #9e9e9e;font-size: 16px;padding: 5% 0;}
.book_check h3 > strong{color: #feffa7;}
.book_check h3 .mo_view{display:none}
.book_check .book_check--ul::after{content: "";display: block;clear: both;}
.book_check .book_check--ul{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
}
.book_check .book_check--ul > li{
    position: relative;
    width: 20%;
    text-align: center;
    border-left: 1px solid #232323;
    box-sizing: border-box;
}
.book_check .book_check--ul > li:last-child{margin: 0;}
.book_check .book_check--ul > li:first-child,
.book_check .book_check--ul > li:nth-of-type(6) { border:none; }
.book_check .book_check--ul > li > p > span{
    display:block;
    padding: 25px 0;
    color: #fff;
    font-size: 17px;
    font-weight: 300;
    background-color: #cf48ac;
}
.book_check .book_check--ul > li > p > span+span{
    position: relative;
    padding: 25px 0;
    color: #362832;
    font-size: 23px;
    font-weight: bold;
    background-color:#fff;
}
.book_check .book_check--ul > li > p > span+span b{
    font-size: 33px;
}
.book_check .book_check--ul > li .end{display:none}
.book_check .book_check--ul > li.end > p > span+span::after{
    position:absolute;
    top: 0;
    left:0;
    content: '';
    display:block;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 1;
}
.book_check .book_check--ul > li.end > p > span+span::before{display:block;content:"";position:absolute;
    left: 50%;
    bottom: 7px;
    transform: translate(-50%, 0);
    width: 82px;
    height: 83px;
    background-image: url('https://image.megagong.net/m/2023/0519_allawyer/click_date_fin.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 2;
}

.clickPop{width: 420px;background: #fff;padding: 40px 0 30px;position: fixed;left:50%;top: 50% !important;-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);transform: translate(-50%,-50%);z-index: 99;}
#my_result.clickPop{display:block;}
#my_result.clickPop .tit{ font-size: 32px; text-align:center; color: #e73629; font-weight:bold; }
#my_result.clickPop .gift{text-align:center;margin: 30px auto 30px;}
#my_result.clickPop .date{position: relative;text-align:center;padding: 13px 0;font-size: 20px;color:#000000;background: #efefef;}
#my_result.clickPop .date span{color: #ff0000;font-weight: bold;margin-right: 5px;}

#my_result.clickPop .btnClose a{position:absolute;right: 10px;top: 10px;width: 16px;height: 15px;}
#my_result.clickPop .btnConfirm{text-align:center;}
#my_result.clickPop.no{background: #fff;padding: 65px 0 40px;}
#my_result.clickPop.no .tit{margin: 0 auto;}
#my_result.clickPop.no .gift{margin: 30px auto 40px;}
#my_result.clickPop.no .btnConfirm{margin:0;}

.dim_popup .dimPop { text-align:center; margin-top:10px }
.dim_popup .dimPop dl { background:#efefef; padding:20px 0; color:#333; font-size:20px; line-height:120%; }
.dim_popup .dimPop dt { font-weight:700; }
.dim_popup .text { color:#b5b5b6; padding:15px 30px; }
.dim_popup .text li { margin-bottom:3px; }
.dim_popup .text li:before { content:""; padding-left:10px; background:url(https://img.megagong.net/m/2022/0712_plower3362/bullet_text.png) no-repeat left center; }

@media screen and (max-width:1200px){
    .click_wrap{
        margin: 27px 0 23px 0;
    }
    .book_check .book_check--ul > li{width:20%}
    .book_check .book_check--ul > li.end .end::before{background-size: 60%;}

    #my_result.clickPop .tit{font-size: 32px;}
    #my_result.clickPop .gift{text-align:center;}
    #my_result.clickPop.no .tit{font-size: 32px;}
    #my_result.clickPop.no .gift{margin: 30px auto 40px;}
    #my_result.clickPop.no .gift img{max-width: 45%;}
    
    .clickPop .btnConfirm img{max-width: 30%;}
}

@media screen and (max-width: 992px){
    .click_wrap{
        margin: 5vw;
        margin-bottom: 10vw;
        padding: 0;
    }
}

@media screen and (max-width:768px){
    /* .click_wrap .count_wrap > p.today{font-size: 25px;}
    .book_check .book_check--ul > li > p > span{font-size: 16px;}
    .book_check .book_check--ul > li > p > span+span{padding: 15px 0;font-size: 18px;}
    .book_check .book_check--ul > li.end .end::before{top: -40%;}
    .click_wrap .soon{height:100%;top: 0;} */
    .click_wrap{
        width: 100%;
    }

    .book_check {
        margin-top: 0;
    }
}

@media screen and (max-width:640px){
    /* .click_wrap .book_img{width: 70%;float:none;margin:0 auto;}
    .click_wrap .count_wrap{ width: 100%; margin: 5% auto 0; float:none; background-size: 110% 100%; }    
    .click_wrap .count_wrap > .count_box span { font-size:50px; width: 16%; height: 60px; line-height: 50px; }
    .click_wrap .count_wrap .clickEvtBtn a{padding:0;}
    .click_wrap .soon img{max-width: 80%;}
    #my_result.clickPop{width: 80%;padding: 15px 0 20px;}
    #my_result.clickPop.no{padding: 35px 0 20px;} */
}

@media screen and (max-width:576px){
    /* .book_check .book_check--ul > li > p > span{font-size:14px}
    .book_check .book_check--ul > li > p > span+span{padding: 10px 0;font-size: 16px;}
    .click_wrap .count_wrap > .count_box{margin: 15px auto 15px;}
    #my_result.clickPop .gift{margin: 20px auto 15px;}
	#my_result.clickPop .gift img{max-width:50%}
	#my_result.clickPop .date{font-size: 18px;}
	#my_result.clickPop ul{padding: 0 15px;margin: 15px auto 15px;}
    #my_result.clickPop.no .tit{font-size: 22px;}
	#my_result.clickPop.no .gift img{max-width: 50%;} */
    .click_wrap{
        width: 80%;
        height: 350px;
        margin-bottom: 10vw;
    }
    .click_wrap .count_wrap{
        /* width: 80%; */
    }
    .click_wrap .count_wrap > p.today{
        top: 39px;
        font-size: 25px;
    }
    .click_wrap .count_wrap > .count_box {
        margin: 100px 0 20px 0;
    }
    .click_wrap .count_wrap > .count_box span{
        width: 79px;
        height: 100px;
        line-height: 90px;
        font-size: 94px;
    }
    .click_wrap .count_wrap .clickEvtBtn{
        margin-bottom: 0;
    }
    .click_wrap .count_wrap .clickEvtBtn a{
        width: 70%;
    }
    .click_wrap .count_wrap > a{
        right: 26px;
        bottom: 32px;
        font-size: 14px;
    }
    .book_check .book_check--ul > li > p > span{
        padding: 17px 0;
        font-size: 14px;
    }
    .book_check .book_check--ul > li.end > p > span+span::before{
        width: 100%;
        bottom: 0;
    }
    .book_check .book_check--ul > li > p > span+span{
        padding: 18px 0;
        font-size: 14px;
    }
    .book_check .book_check--ul > li > p > span+span b {
        font-size: 22px;
    }
}

@media (max-width: 460px){
    .book_check .book_check--ul > li.end > p > span+span::before{
        bottom: -7px;
    }
}
