/* 로그인/아이디/비밀번호 */
:root { --loginColor:#009049; --logoinHover:#006534; } 
body.no-scroll { overflow:hidden; } 
.popup { display:none; position:fixed; top:0; left:0; width:100%; height:100dvh; overflow:hidden; z-index:999999999999; flex-direction:column; justify-content:center; align-items:center; } 
.popup form {width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center;}
.popup.on { display:flex; } 
.popup .bg { width:100%; height:100vh; overflow:hidden; background-color:rgba(0,0,0,0.5); position:absolute; top:0; left:0; z-index:-1; } 
.popup .bg02 { width:100%; height:100vh; overflow:hidden; background-color:rgba(0,0,0,0.5); position:absolute; top:0; left:0; z-index:-1; } 
.popup .flexWrap { display:flex; flex-direction:row; align-items:center; } 
.popup .flexBetween { display:flex; flex-direction:row; justify-content:space-between; align-items: flex-start; } 
.popup .flexBetween::after { display:none; } 
.popup .popupBtnWrap { width:calc(100% - 10px); background-color:#fff; padding:0 5px 5px 5px; } 
.popup .popupBtn { width:100%; height:70px; line-height:70px; background-color:#01a6c7; font-size:20px; font-weight:700; color:#ffffff; line-height:1; border-bottom-left-radius:16px; border-bottom-right-radius:16px; } 
.popup .popupBtn02 { background-color:#333; } 
.popup .popupBtn:hover { background-color:#01a6c7; } 
.popup .popupBtnWrap02 { display:flex; flex-direction:row; align-items:center; overflow:hidden; } 
.popup .popupBtnWrap02 .popupBtn { border-radius:0px !important; } 
.popup .popupBtnWrap02 .popupBtn01 { border-bottom-left-radius:16px !important; background-color:#333; } 
.popup .popupBtnWrap02 .popupBtn02 { border-bottom-right-radius:16px !important; background-color:var(--color02); } 
.popup .popupBtnWrap02 .popupBtn01:hover { background-color:#000; } 
.popup .popupBtnWrap02 .popupBtn02:hover { background-color:#000; } 

html, body {
    scroll-behavior: auto !important;
}
.layer-popup {scroll-margin-top: 0px;}

.popup .center { text-align:center; } 
.popup .inner { width:500px; border-radius:16px; overflow:hidden; } 
.popup .topBox { background-color:#fff; position:relative; padding:0 50px; } 
.popup .black { color:#000000; } 
.popup .grey { color:#666666; } 
.popup .title { padding:55px 0 28px 0; } 
.popup .title h2 { display:block; font-size:32px; font-weight:500; color:#000000; padding-bottom:5px; letter-spacing:5px; } 
.popup .title h2 span { font-weight:400; } 
.popup .title img { width:80px; margin-bottom:15px; } 
.popup .title p { font-size:24px; font-weight:300; color:#777777; width:100%; line-height:1.3; } 
.popup .title .info { font-size:21px; font-weight:400; color:#111; } 
.popup .title .info .color { display:inline-block; font-weight:500; color:#ff6600; } 
.popup .title .desc { font-size:15px; font-weight:300; color:#666; padding-top:20px; } 
.popup .closeBtn { position:absolute; top:0; right:0; width:60px; height:60px; background-color:#07383f; } 
.popup .closeBtn:hover { background-color:#01a6c7; } 
.popup .closeBtn i { color:#fff; font-size:26px; } 
.popup .textWrap .border { width:20px; height:3px; background-color:#000; opacity:0.1; margin:0 auto 20px auto; display:block; } 
.popup .textWrap { padding-bottom:30px; } 
.popup .textWrap dt, .popup .textWrap p { font-size:30px; font-weight:500; color:#000; } 
.popup .textWrap dt span, .popup .textWrap p span { display:inline-block; color:#ff6600; } 
.popup .textWrap dd a { font-weight:18px; font-weight:500; color:#666; display:flex; flex-direction:row; justify-content:center; align-items:center; margin-top:8px; } 
.popup .textWrap dd a:hover { color:#ff6600; } 
.popup .textWrap dd img { width:14px; margin-left:5px; display:block; } 
.popup .textWrap .btn { width:180px; height:40px; border-radius:20px; background-color:#2d2d2d; font-size:16px; font-weight:300; color:#aaaaaa; margin:0 auto; } 
.popup .textWrap .btn .on { display:none; } 
.popup .textWrap .btn:hover .off { display:none; } 
.popup .textWrap .btn:hover .on { display:block; } 
.popup .textWrap .btn:hover { background-color:#ff6600; color:#fff; } 
.popup .location01 >div { position:relative; padding:35px 0; } 
.popup .location01 >div:nth-child(1)::after { content:''; width:1px; height:100%; background-color:#d4d4d4; position:absolute; right:0; top:50%; transform:translateY(-50%); } 
.popup .location { width:100%; background-color:#fff; text-align:center; border-top:1px solid #d4d4d4; box-sizing:border-box; } 
.popup .location dt { font-size:16px; font-weight:500; color:#999999; } 
.popup .location dd { font-size:22px; font-weight:300; color:#000000; } 

.popup .inputWrap input { border:1px solid #eaeaea; box-sizing:border-box; width:100%; height:52px; padding:0 20px; } 
.popup .inputWrap input:focus { color:#000; font-weight:600; border:1px solid #000; } 
.popup .inputWrap input,
.popup .inputWrap input::placeholder { font-size:14px; font-weight:300; color:#aaa; } 

.popup .moveBtn a { font-size:14px; font-weight:400; color:#666666; } 
.popup .moveBtn a img { width:16px; } 
.popup .moveBtn a:hover { color:#07383f; } 
.popup .moveBtn a span { display:inline-block; padding-bottom:5px; border-bottom:1px solid #eaeaea; box-sizing:border-box; } 
.popup .moveBtn a:hover span { border-bottom:1px solid #07383f; } 
.popup .moveBtn ul li:nth-child(2) { margin-left:35px; position:relative; } 
.popup .moveBtn ul li:nth-child(2)::before { content:''; width:1px; height:14px; background-color:#eaeaea; position:absolute; top:50%; transform:translateY(-50%); left:-17.5px; } 

.popup .resultWrap { background-color:#eaf4f0; width:100%; padding:50px 20px; text-align:center; } 
.popup .resultWrap p { font-weight:16px; font-weight:400; line-height:1.4; } 
.popup .resultWrap p span { font-weight:900; color:#008f49; } 
.matchingWrap dt {font-size:16px; font-weight:400; color:#333;}
.matchingWrap dd {font-size:15px; font-weight:400; color:#333; opacity:0.8;}
.matchingWrap .tit {text-align:left; font-size:15px; font-weight:500 !important; color:#000 !important; margin-bottom:5px;}
.matchingWrap .textareaBox textarea {height:70px; font-size:14px; border:1px solid #ddd;} 
.matchingWrap .textareaBox .num {text-align:right; font-size:15px; font-weight:400; color:#333; margin-top:3px;}
.matchingWrap .textareaBox .num span {display:inline-block; color:var(--color02);}
.matchingWrap .matchingBox p {font-size:14px;}
.matchingWrap .matchingBox ul li .titArea  {width:100px;}
.matchingWrap .matchingBox ul li p:nth-child(1) {width:100px;}
.matchingWrap input {width:100% !important;}

.modal-fixed-pop-wrapper{display:none; overflow-y:scroll; overflow-x:hidden;  position:fixed; top:0px; left:0px; width:100%; height:100vh; z-index:99999999999999; background:#000; background:rgba(0,0,0,0.8);}
.modal-fixed-pop-wrapper.on {display:block;}
.modal-fixed-pop-inner{position:absolute; display:table; width:100%; height:100%; text-align:center;}
.modal-inner-box{ position:relative; display:table-cell; vertical-align:middle;}
.modal-loading{position:absolute; top:50%; left:50%; margin:-25px 0 0 -25px; z-index:10000;}
.modal-inner-content{text-align:left;}
.modal-close-btn{position:absolute; top:1.1rem; right:1rem; color:#fff;}
.modal-close-btn i{font-size:3.8rem;}
.modal-close-btn i:hover {color:#fff;}

#mainPop_layer {overflow:hidden; overflow-y:hidden !important;}

.modal-fixed-pop-wrapper .swiper {position:relative; box-sizing:border-box; background-color:#f6f6f6; }
.modal-fixed-pop-wrapper .img-modal-content {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:500px; z-index:100000;}
.modal-fixed-pop-wrapper .img-modal-inner {width:100%;}
.modal-fixed-pop-wrapper .swiper-slide {height:auto;}
.modal-fixed-pop-wrapper .img-modal-inner a {display:block;  width: 100%; font-size:0; padding:0; margin:0;}
.modal-fixed-pop-wrapper .img-modal-inner a img {width:100%;}
.modal-fixed-pop-wrapper .img-modal-inner .img-btn-box {height:50px; display:flex; background-color: #f7f7f7; }
.modal-fixed-pop-wrapper .img-modal-inner .img-btn-box .img-modal-close-btn {background:#f6f6f6; position:relative; width:50%; font-size:18px; font-weight:400; color: #111; height:100%; border-radius:0; padding:0;}
.modal-fixed-pop-wrapper .img-modal-inner .img-btn-box .img-modal-close-btn:before {position:absolute; content:""; right: 0; top:0; width:1px; height:100%; background-color:#d6d6d6;}
.modal-fixed-pop-wrapper .img-modal-inner .img-btn-box .img-modal-close-btn:last-of-type:before {display:none;}
.modal-fixed-pop-wrapper .img-modal-inner .img-btn-box .img-modal-close-btn:hover {background-color:#000; color:#fff;}
.modal-fixed-pop-wrapper .swiper-pagination {width:auto !important; left:auto !important; right:30px !important; bottom:15px !important;}
.modal-fixed-pop-wrapper .swiper-pagination-bullet {width:10px !important; height:10px !important;}
.modal-fixed-pop-wrapper .swiper-pagination-bullet {background-color:#f6f6f6;}
.modal-fixed-pop-wrapper .swiper-pagination-bullet-active {background-color:#fff; width:25px !important; border-radius:10px !important;}

@media screen and (max-width:680px) {
    .modal-fixed-pop-wrapper .img-modal-content {width:calc(100% - 40px);}
    .modal-fixed-pop-wrapper .img-modal-inner .img-btn-box .img-modal-close-btn {font-size:16px;}
    .popup .inner {width:calc(100% - 40px); margin:0 auto;}
    .popup .title {padding:40px 0 25px 0;}
    .popup .title .info {font-size:19px;}
    .popup .topBox {padding:0 20px;}    
    .popup .popupBtn {height:55px; font-size:16px;}
}
@media screen and (max-height:620px) {
    .popup .matchingBox {height:calc(100vh - 300px); overflow-y:scroll; background-color:#f6f6f6; padding:15px 20px;}
}

/* modal_top */
.modal .dimbtn_close { width:100%; padding:20px 25px; background:#fff; border-bottom:1px solid #e2e2e2; box-sizing:border-box; display:flex; flex-direction:row; align-items:center; justify-content:space-between;}
.modal .dimbtn_close .tit {font-size:22px; font-weight:500; color:#222222;}
.modal .dimbtn_close .blueText {color:var(--blue01); font-size:1em; display:inline-block;}
.modal .dimbtn_close button {width:auto !important; background-color:transparent; position:relative; top:2px;}
.modal .dimbtn_close i {  font-size:40px; background:#fff; color:#333;  }
.modal .dimbtn_close02 {border-bottom:initial; margin-bottom:-1px; justify-content:end; padding:20px 25px 0 25px;}

/* modal */
.modal {position:fixed;width:100%;height:100%;top:0;left:0;bottom:0;background-color:rgba(0,0,0,.8);z-index: -1;opacity:0;transition:all 0.2s;}
.modal.on{opacity:1;z-index:99999999999999999999999999;}
.modal .dim_content { background:#fff; padding:40px 0 45px 0; text-align:center; box-sizing:border-box;}
.modal .dim_guide_text { margin:50px; text-align:left;  }
.modal .dim_guide_text p {width:100%; font-size:14px; color:#666; line-height:140%; text-indent: -1em; margin:3px 0; }
.modal .modal_container {position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%, -50%); width:80%; max-width:700px; z-index:999; border-radius:15px; overflow:hidden; }

.modal .modal_container_400 {max-width:400px;}
.modal .modal_container_500 {max-width:500px;}
.modal .modal_container_570 {max-width:570px;}
.modal .modal_container_900 {max-width:900px;}
.modal .modal_container_1200 {max-width:1200px;}
.modal .text01 { text-align:center; font-size:18px; font-weight:300; color:#666; line-height:1.5; margin-bottom:30px;  }
.modal .dim_guide_text { margin:50px; text-align:left;  }
.modal .dim_guide_text p {width:100%; font-size:14px; color:#666; line-height:140%; text-indent: -1em; margin:3px 0; }
.modal p.linebar { width:60px; height:8px; background:#b6b6b6; margin:30px auto; }
.modal dl.dim_info dt { font-size:20px; color:#000; font-weight:300; margin-bottom:18px;}
.modal dl.dim_info dd,
.modal dl.dim_info dd a { font-size:16px; color:#555454;}
.modal dl.dim_info dd.point { font-size:28px; color:#151531;  font-weight:500; }
.modal .btnWrap, .modal .btnWrap button {width:100%;}
.modal .btnWrap button:hover {background-color:#000;}
.modal .btnWrap01 button {width:50%; border:none;}
.modal .btnWrap01 button.wd100 {width:100%;}
.modal .infoText {font-size:13px; font-weight:350; color:#222222; line-height:1; padding-bottom:8px;}
.modal .dim_contentWrap {padding:17px 20px; height:auto; max-height:calc(90vh - 100px);}
.modal .dim_contentWrap02 {padding:25px 20px 35px 20px; height:auto; max-height:calc(90vh - 125px);}
.modal .dim_contentWrap03 {padding:35px 20px; height:auto; max-height:calc(90vh - 125px);}
.btnStyle01 {background-color:#444444;}
.btnStyle02 {background-color:var(--blue01);}
.btnStyle03 {background-color:#f65a5a;}
.btnStyle04 {background-color:#00143a;}
.btnStyle05 {background-color:#ff6600;}
.btnStyle01, .btnStyle02, .btnStyle03, .btnStyle04, .btnStyle05 {font-size:16px; font-weight:300; color:#fff; padding:17px 0;}

.scrollBox, .scrollBox02 {overflow-x: hidden; overflow-y: auto; width:100%; max-height:100%;}
/* 스크롤바의 폭 너비 */
/* 기본 스타일 */
.scrollBox::-webkit-scrollbar,
.scrollBox02::-webkit-scrollbar {
    width: 8px;
}
.scrollBox::-webkit-scrollbar-thumb,
.scrollBox02::-webkit-scrollbar-thumb {
    background: var(--color01);
    border-radius: 10px;
}
.scrollBox::-webkit-scrollbar-track,
.scrollBox02::-webkit-scrollbar-track {
    background: #dddddd;
    border-radius: 10px;
}
.dim_content.privacy {text-align:left;}
.dim_content.privacy >strong {display:block; font-size:1.1em; font-weight:bold; color:#000; text-align:left; margin-bottom:10px;}
.dim_content.privacy p {font-size:1em; font-weight:400; color:#333; line-height:1.3;}
.dim_content.privacy p.mb40 {margin-bottom:40px;}
.dim_content.privacy >ul {margin-bottom:40px;}
.dim_content.privacy ul li p,
.dim_content.privacy ul li a {font-size:0.9em; font-weight:400; color:#333;}
.dim_content.privacy >ul li strong {font-size:1em; font-weight:500; color:#333; margin-bottom:3px;}
.dim_content.privacy >ul >li > ul {margin-left:15px;}
.dim_content.privacy > p {font-weight:500; margin-bottom:10px;}


#infoPopup .textBox p:nth-child(1) {color:#333; font-size:1em; font-weight:300; position:relative; line-height:1.5;}
#infoPopup .textBox p:nth-child(2) {color:#333; font-size:1.1em; font-weight:500; padding-top:20px;}

#qrPopup .modal_container {
    width:100%;
    height:580px;
    max-width:680px;
    border-radius:30px;
    background-color:#fff;
    box-sizing:border-box;
}
#qrPopup .modal_container .closeBtn {
    position:absolute;
    right:30px;
    top:25px;
    background-color:transparent;
}
#qrPopup .modalInner {
    box-sizing:border-box;
    padding:50px 30px 0 30px;
    text-align:center;
}
#qrPopup .text01 {
  font-size:22px;
  font-family:'GmarketSans';
  font-weight:500;
  color: rgb(151, 151, 151);
  line-height: 1.364;
  text-align: center;
  margin:0 !important;
}
#qrPopup .text02 {
  font-size:30px;
  font-family:'GmarketSans';
  color: rgb(0, 0, 0);
  text-transform: uppercase;
  line-height: 1.183;
  text-align: center;
  font-weight:500;
  margin-top:40px;
}
#qrPopup .text02 strong {
    display:block;
    font-weight:bold;
}
#qrPopup .gameIntro {
    margin:15px auto 35px auto;
}
#qrPopup ul {
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
}
#qrPopup ul li:not(:last-child) {
    margin-right:45px;
}

@media screen and (max-width:1080px) {
    #qrPopup .modal_container {max-width:100%; width:calc(100% - 40px); height:auto;}
    #qrPopup .modalInner {padding:40px 20px;}
    #qrPopup .text01 {font-size:18px;}
    #qrPopup .gameIntro {max-width:100%;}
    #qrPopup ul {width:calc(100% - 40px); margin:0 auto;}
    #qrPopup ul li {width:32%;}
    #qrPopup ul li img {width:100%;}
    #qrPopup .text02 {font-size:20px;}
}