@import url('../font/IBMPlexSansKR.css');
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,legend,p,table,th,td,input,select,textarea,button,hr{margin:0;padding:0}
body, table, td,input,select,textarea{font-family:'IBMPlexSansKR','Noto Sans KR','Nanum Gothic',sans-serif;font-size:15px;line-height:1.5}
h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.4}
a{text-decoration:none; color:inherit} a:focus,a:active,a:hover{outline:none}
ul{list-style:none} strong,b{font-weight:600} img{border:none; /*max-width:100%; */ }
button, dd, dl, dt, form, input, li, ul, ol, p, select, td, textarea, span, div, i,:after, :before, label, article, header, nav{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
i,em{font-style:normal !important}
input[type="checkbox"][disabled], [disabled] + label{cursor:default !important}
input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px white inset}
::-webkit-input-placeholder{color:var(--gray-color)}
::-moz-placeholder{/* Firefox 19+ */color:var(--gray-color);opacity:1 !important}
input:-ms-input-placeholder{/* IE 10+ */color:var(--gray-color)}
::-ms-input-placeholder{/* Edge */color:var(--gray-color)}
h1{font-size:38px} h2{font-size:26px} h3{font-size:24px} h4{font-size:20px} h5{font-size:16px}
:root {--main-color:#B12447;--dark-color:#333;--gray-color:#555;--gray-light:#ccc;}
select{ -webkit-appearance: none; -moz-appearance: none; appearance: none;}
/*상단*/
#wrap{position:relative;}
#header_w{position:fixed;width:100%; display:flex;transition: All 0.2s Linear; height: 72px;padding: 0 60px 0 60px;justify-content: space-between;align-items: center; z-index: 100} 
.head-red .menu_logo{background-image: url("../img/logo.svg")}.head-red .btn hr{border-color:#fff}
.head-white .menu_logo{background-image: url("../img/logo_red.svg")} .head-white .btn hr{border-color:var(--main-color)} 
/* .head-white{background:#fff} .head-red{background: var(--main-color)} */
.nv_area{flex-grow: 1; text-align:right}
.logo_area{display:block;transition: All 0.2s Linear; padding:30px 0 20px}
.close_cover{width:100%;height:100%;position:fixed;top:0px;left:0px;background-color:rgba(0,0,0,0.4);z-index:14;display:none}.close_cover.open{display:block}
#pup{display:none} #pup.open{position:fixed;left:calc(50% - 178px); top:calc(50vh - 258px); display:block; z-index:15}

/*텍스트*/
body{word-break:keep-all} html{height: 100vh;overflow-y:auto;overflow-x:hidden;scroll-snap-type: y mandatory; scroll-behavior:smooth; }
.head-copy{font-size: 64px;font-weight: 500;letter-spacing: -2px; color: #fff; line-height:1.4} .logo-mai{position:relative}
.head-tit3{font-size: 60px;font-weight: 700;letter-spacing: -4px;color:var(--main-color);position: relative}
.white_bg .tit-m1{color:var(--dark-color)} .white_bg .sub-txt{color:var(--gray-color)}
.tit-m1{font-size:42px;margin-bottom:18px;}
.sub-txt{font-size: 25px;line-height: 150%;letter-spacing: -1px;}.sub-txt1{font-size:19px}
.txt-15{font-weight: 500;font-size: 16px;line-height:150%;padding-bottom:3px;}
/*레이아웃*/	
#ask{gap:5.6vh;padding: 4vh 20px;display: flex; position: relative;flex-direction: column;align-items: center;text-align: center;justify-content: flex-start}
.cont_it {height: 100vh;text-align: center;display: flex;align-items: center;flex-direction: column; padding:12vh 4vw 9vh; position:relative;scroll-snap-align:start; overflow: hidden}
.white_bg{gap:8vh;justify-content: flex-end;display:flex;}.info{gap:11vh;padding:72px 30px 16vh 30px}
.red_bg{gap: 16.6%;justify-content:flex-end; color: #fff;background:var(--main-color);border:none !important}.bg_move{position: absolute; bottom: 0; opacity: .2;width:auto;height: 90%}
.logo-main{transform: scale(1.6); opacity: 0; position: relative} .brand_img{position: relative}
.bubble{display: flex;padding-bottom: 0px;flex-direction: column;align-items: flex-end;opacity: 0; position: relative;transform: translate(0, 200px);}
.bub_bt{margin-right: 80px; margin-top: -1px;}.bub_txt{color:#333; font-size:36px;letter-spacing: -0.36px;display: flex;width: 510px;padding: 34px 30px;flex-direction: column;justify-content: center;align-items: center;border-radius: 50px;background:#fff; line-height: 1.5}.chart-group{display: flex;justify-content: center;align-items: center;gap: 90px;}
.cart{display: flex;width: 290px;height: 290px;flex-direction: column;justify-content: center;align-items: center;border-radius:50%;background:var(--main-color); position: relative}
.cart .tit-m1,.cart .sub-txt{color: #fff;}.head-small{display:flex; gap:10px;flex-direction: column;z-index:10; max-width:650px}.tell{font-size:38px; font-weight: 700}

/*이미지 타이틀*/
.head-img{display: flex;flex-direction: column-reverse;align-items: flex-end;position: relative;}
.img-in-txt{font-size: 64px;font-weight: 700;letter-spacing: -6.4px;color:#AAA;display: flex;padding: 0px 0px 15vh 30px;align-items: flex-start;position: absolute;right: 0;bottom: 0px;}
.text-img1{-webkit-mask-box-image:url(../img/head-tit1.svg); background-image:url(../img/mask-img1.jpg);} 
.text-img2{-webkit-mask-box-image:url(../img/head-tit2.svg); background-image:url(../img/mask-img2.jpg);}
.text-img3{-webkit-mask-box-image:url(../img/head-tit3.svg); background-image:url(../img/mask-img3.jpg);} 
.text-img4{-webkit-mask-box-image:url(../img/head-tit4.svg); background-image:url(../img/mask-img4.jpg);}
.text-img5{-webkit-mask-box-image:url(../img/head-tit5.svg); background-image:url(../img/mask-img5.jpg);} 
.text-img{max-height:450px;-webkit-mask-box-position: center center;-webkit-mask-box-repeat: no-repeat;-webkit-mask-box-size:cover;background-repeat: no-repeat; position:relative}
.brand-area{display: inline-flex;flex-direction: column;justify-content: flex-end;align-items: center;gap: 20px; z-index:999;}.brand-area1{gap:50px}
.character{width:220px; margin-bottom: 20px;}  

.btn{display: flex;height: 28px;width:42px;padding: 5px 3px;flex-direction: column;align-items: center;gap:9px;cursor: pointer}
.btn hr{border-width: 0;border-top:4px solid #fff;width: 100%;border-radius: 2px;}
#menu.open{right:0px; z-index:102;} 
/* html.open{overflow:hidden}  */
/*메뉴 열렸을때 본문 스크롤 방지*/
.menu_logo{background: url("../img/logo.svg") no-repeat; background-size:contain; line-height:0; display:block}

/* 모바일 메뉴 버튼*/
#menu{width :180px;height :100vh;position :fixed;top :0px;right :-180px;z-index :100; background:#4F4F4F;transition:All 0.2s Linear; color: #fff;}
.page_cover{position: absolute}
/* 모바일 닫기 버튼*/
.close{display: flex;justify-content: flex-end;padding-top: 7px;}
/*메인메뉴*/
#nv{font-size:20px;position: relative; z-index: 900}.menu_small{font-size: 14px; font-weight:normal}.gnb{display:flex;flex-direction: column; cursor: pointer;padding: 14px 30px}
#nv_ar{position:absolute; left:0; width:0;transition: All 0.2s} #nv_ar.ar_on{width:8px}.gnb:nth-child(7) ~ .gnb{visibility:hidden}
/*퀵메뉴*/
#go_top{position:fixed;z-index:101;right:31.5px;background:#999;width:32px;height:32px;bottom:10px;display:none;border-radius:50%; text-align:center} 
#go_top:before{content:'';background:url(../img/go_top.svg) no-repeat center;display:inline-block;width:17px;height:32px}
#go_top.js_go_top_fix{position:fixed} #go_top:hover{background:var(--main-color)}
#qu_mb{position:fixed;right:60px;z-index:10;display: flex;flex-direction: column;align-items: flex-start;gap: 7px;bottom:180px; align-items: center;} .js_go_top_fix{bottom:60px!important}
#qu_mb a{
    background-color:var(--main-color);
    color:#fff;
    border-radius:50px;box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
    display: flex;width: 62px;
    height: 62px;
    flex-direction: column;
    align-items: center;
    gap: 2px;border: 1px solid #fff;
    justify-content: center;}
#qu_mb a:nth-child(2){background-color: #fff;color: var(--main-color);border-color:var(--main-color);} .qu_text{font-size:12px;letter-spacing:-1px;font-weight: 500;}
#qu_mb #btn_top{overflow:hidden; background:url(../img/btn_top.png); background-size: 64px 64px; background-position: 50% 50%;border:none;}
.at-top #btn_top{display:none;}

/*푸터*/
footer{background:var(--dark-color);display:flex;padding: 30px;flex-direction: column;align-items: center;font-size: 14px;font-weight:300;color: #fff;scroll-snap-align: end}
#adresse{display: flex;max-width: 1300px;justify-content: space-between;gap: 20px;width: 100%;flex-wrap: wrap;}
.ft_row:first-child{display: flex;align-items: flex-start;gap: 16px;} .ft_row:nth-child(2){display: flex;flex-direction: column;gap: 5px;} .cont_li li{margin-top:1px;line-height: 1.5;color:#eee}
.ft_li{display: flex;align-items: flex-start;gap: 20px;}.call{margin-bottom:4px}.copy-i{font-size:15px; margin-right:2px}#mb_ad{display:none}#pc_ad{display:block}

/*여백*/
.gap20{height:20px; border:none}.gap10{height:10px; border:none}.gap30{height:30px; border:none}
/* 폼*/
input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}
input, textarea{display: flex;width:100%;align-items: center;padding:10px 14px;} input, textarea,.btn_send{border-radius: 10px; border: none;}
textarea{height:166px;resize: none}.but_group{margin-top:30px;display: flex;gap: 10px;justify-content: center;}.form_li li{ margin-bottom:11px;} 
form{max-width:650px;width: 100%; z-index: 10} 
.btn_send
{color:var(--main-color); background:#fff;height: 46px;padding: 0px 20px; font-size: 17px;font-weight: 700;line-height:1;letter-spacing: -0.8px;display: flex;align-items: center; cursor: pointer}  
input:focus,textarea:focus,select:focus{outline:1px solid var(--gray-color)}button:focus{outline:none}      

/*팝업*/
.plugin_set {display: flex;justify-content: center;list-style: none;gap: 20px;margin-top: 20px;}
.tx {font-size: 13px;max-width: 700px;} li[class^=popwin_btn] {cursor: pointer}
/*팝업*/
.popwin_wrap {position: fixed;background: rgba(0, 0, 0, 0.3);top: 0;z-index:999;bottom: 0;left: 0;right: 0;padding: 12px}
.popwin_size{ max-width: 770px;margin: 0 auto;position: relative;box-shadow: 0.5px 0.5px 2px rgba(0, 0, 0,.4);opacity: 0;background:#fff;}
.wsize-m {max-width:380px} .wsize-m .popup_body{padding: 60px 20px;text-align: center;font-size: 22px;display: flex;flex-direction: column;gap: 0vw;align-items: center;justify-content:flex-start}
.wsize-s {max-width: 280px}
.scroll_wrap {overflow-y: auto;}.popup_body{padding:0 20px;border: 20px solid #fff;border-width: 18px 0 20px}
.title_popup {background: #333333;height:45px;display: flex;align-items: center;justify-content: space-between;width: 100%;color: #fff;}
.title_popup .pop_tit{font-size:17px;font-weight:500;padding-left: 20px}
.la-close{background: url(../img/menu-c.svg) center no-repeat;background-size: contain;cursor: pointer;padding: 19px 20px;}
.title_popup .game_title.li_col-nol {background-position: 0% calc(50% + 2px)}
.ht-5 {max-height: 20em;min-height: 5em}
.pop_opt_input {position: relative}
.opt_i:before {content: '\e808'}
.opt_i {position: absolute;right: 1px;bottom: 0;line-height: 2.4em;font-weight: 600;font-family: 'FontAwesome'}
.pop_opt_input input {padding-right: 20px !important}
.pop_s-pd {padding-top: 15px;padding-bottom: 20px}
.pop_thin-pd {padding-top: 5px;padding-bottom: 10px}
/*리스트*/
.li_nb{list-style-position: inside}.li_nb > li{padding-left: 16px;text-indent: -16px}.li_dot-line li:before{content:'-';margin-right:4px}.li_nb > li ~ li {margin-top:2px}.li_dot-line li{padding-left:10px;text-indent: -10px}
.li_nb_rd{list-style:none} .li_nb_rd > li, .li_nb_rd > li .tit_s_ar{padding-left:20px;text-indent: -20px;margin-top: 1px;}
.li_nb_half > li{padding-left: 17px;text-indent: -17px;margin-top:2px}
/*약관*/
.tit_m{margin-bottom:5px;margin-top:20px; font-size:18px} .tit_m:nth-child(1){margin-top:0}
/*여백*/.mb_br{display:none}

.head-tit0{font-size: 70px; margin-bottom:6%;font-weight:400}
@media only screen and (max-width:2600px){.char-big{max-width:40vh;} .bg_move{height:100%}}
@media only screen and (max-width:1921px){.bg_move{height:100%}} 
@media only screen and (max-width:1440px){
#header_w{padding:0 30px} #qu_mb{right:20px}
.red_bg{gap:13vw;background-size:contain}.text-img{max-height:26vw} .img-in-txt{font-size:4vw;letter-spacing: -2px; padding-bottom:12vw}
.start_it{padding:7vh 4vw;gap:6vw}.head-tit0{font-size:42px; margin-bottom:3vw}

}

@media only screen and (max-width:1280px){
.logo_area{width:160px;}.logo-main{max-width:55vw}.head-copy{font-size:46px}.head-tit3{font-size:48px;}.btn hr{border-top-width:3px}.btn{width: 30px;gap:6px}
.bub_txt{font-size:24px;width: 360px;padding: 26px 20px 30px;border-radius: 30px;} .bub_bt{margin-right: 60px;width: 70px;}.sub-txt{font-size:20px}
.cart{width:220px;height:220px}.chart-group{gap:3vw}.tell{font-size: 34px}.brand_img{max-width:25vw} .character{max-width: 14vh; margin-bottom: 1vh}.char-big{max-width:22vh}
.brand-area1{gap:5vh;}.brand_img1{max-width:130px}input, textarea{font-size:15px; padding: 9px 14px}.form_li li{margin-bottom: 10px}.sub-txt1{font-size:18px} 
}
@media screen and (orientation:landscape) and (max-width:1280px){textarea{height: 123px}.tit-m1{font-size: 37px}.info{padding:72px 30px 10vh 30px}}
@media screen and (orientation:landscape) and (max-width:1024px) and (max-device-height:700px){
.red_bg{gap:10vh} .cont_it{padding:72px 40px 7vh}.text-img{max-height:24vw}#ask,#brand1{flex-direction:row} .head-tit0{font-size:35px; margin-bottom:3%}
.img-in-txt{font-size: 3.5vw;letter-spacing: -2px;padding-bottom: 8vw;}.character{display: none}.head-red{background-color: transparent}.char-big{max-width:22vh}
}
@media screen and (orientation:portrait) and (max-width:1024px){.sub-copy br,.sub-txt1 br,.head-copy br{display:none}.brand_img{max-width:25vh}
.cont_it{padding:17vw 22vw 10vw;justify-content: center;} .red_bg{gap:18vw}.white_bg{justify-content: center;gap: 9vw}.chart-group{flex-direction: column}.char-big{max-width:22vw}
.bg_move{height:100%;width:80vh}
}
@media only screen and (max-width:640px) {
    .sub-copy br,.sub-txt1 br,.head-copy br{display:none}
 #mb_ad{display:block; margin-top:10px}#pc_ad{display:none}.but_group{margin-top: 20px}
.logo_area{width:140px;padding:22px 0 16px;}.head-copy{font-size:34px}.head-small .tit-m1{margin-bottom:0}
.sub-txt,.sub-txt1{font-size:15px;} .cart .tit-m1{margin-bottom: 0.1em}.white_bg{gap:3vw; }
.info{justify-content: flex-start;}
#qu_mb{right:10px;bottom:10px !important;gap:4px}#qu_mb a{width:50px;height:50px}.qu_text{font-size: 10px;letter-spacing: -0.5px; font-weight:normal}
#adresse, .ft_row:first-child{flex-direction: column;}.ft_row:first-child, #qu_mb a{gap:0}.mb_br{display:block}
.bub_txt{font-size:21px;width:300px;padding:20px 20px} .cart{width: 160px;height:160px}
#header_w{padding:0 20px; height: auto} .text-img{max-height:36vw}.img-in-txt{font-size:5vw;padding-bottom:12vw}
.brand_it{padding-top:23vw}.tell{font-size: 24px}#ask{gap: 8vw}
.char-big{max-width:130px;}.tit-m1{font-size:30px}.head-tit3{
    /* font-size: 40px; */ font-size: 38px;
} .brand_img{max-width: 49vw}.cont_it {padding:17vw 10vw 6vw;}.img-in-txt{font-size:6vw;padding-bottom:14vw}
.head-white .menu_logo, .head-red .menu_logo{background-size: 140px auto; background-position-y:50%;}

}
@media only screen and (max-width:480px) {
    .head-small .sub-txt1{font-size:15px}
    .btn_send{font-size:15px; height:42px}
    .tell{font-size:22px} 
    input, textarea{padding: 9px 14px;font-size:14px}
    footer{height:100vh;justify-content: center;}
    .brand-area1{gap: 3vh;} 
    .char-big{max-width:15vh}
    .logo-main{max-width:77vw}
    /* .sub-txt, .sub-txt1{font-size: 12px;} */
.popwin_wrap{padding: 0}.popwin_size{top:0 !important}.popwin_size .popup_body{height: calc(100vh - 42px)!important}.wsize-m{max-width:100%}
/* #icon_request{height: 15vh;} */
}
@media screen and (orientation:portrait) and (max-device-height:740px){.character,.info .logo-main{display:none}#brand1{gap:1vw} textarea{height:102px}.brand_img{max-width: 23vh}}


/*request*/
/* .request_cont, .input_box{display:flex; flex-direction: column;}
.request_cont .head-tit3{color:#fff; line-height:170%; font-size:40px;}
.request_cont p{font-size:24px; line-height:140%;}
.input_box{width:100%; max-width:550px;}
.input_A{height:46px;}
.input_box_li+.input_box_li{margin-top:10px;}
#request select, #request input{width:100%; height:100%; border-radius: 10px; border:none; padding:0 14px; }
#request select{background-image:url(../img/request_sel.png); background-repeat: no-repeat; background-position: right 10px top 50%;}
#req_tel{display:flex;}

#req_tel select{border-radius: 10px 0 0 10px; border-right: 1px #CBCBCB solid; width:150px; }
#req_tel input{border-radius:  0 10px 10px 0;}
#request input::placeholder{font-size:15px; color:#333;}
#req_comment{overflow:hidden;}
#req_comment textarea{width:100%; max-height:153px;} */

/* #icon_request{height: 236px;} */
.char-big{height:auto}