@charset "utf-8";
@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css);

@font-face {
  font-family: 'SpoqaHanSansNeo-Bold';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Bold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'SpoqaHanSansNeo-Medium';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Medium.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'SpoqaHanSansNeo-Regular';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'SpoqaHanSansNeo-Light';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Light.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

:root {
  --point-color:#FA008A;
}

body, ul{margin:0; padding:0;}
body{font-family:"nanumgothic"}
ul{list-style:none;}
/* a, font, li, h1,h2, h3, h4, h5, u, strong{font-family:'nanumgothic';}*/
caption{display:none;}
a{text-decoration:none! important; color:black;}
img{border:0px; max-width:100%;}
table tr, table td, table th{vertical-align:middle! important;}
* { font-family: 'Arial', 'Sans-serif','Spoqa Han Sans' }
.row{margin:0;}
/* input, select {border-radius:0px! important;} */
select::-ms-expand { display: none;}

/* 전체 */
#wrap{width:100%; margin:0 auto;}
#wrap .wrap{max-width:640px; margin:0 auto; padding: 0 0px}
#ad{background-color: #222; position:relative;}
::-webkit-scrollbar {display:none;}
.contents { width: 100%; min-width: 250px;}

/* top */
#wrap .wrap .top{width:100%; margin:0 auto; padding:28px 35px; }
#wrap .wrap .top img{max-height:31px; vertical-align:bottom;}
#wrap .wrap .top .top_left{width:49%; display:inline-block;}
#wrap .wrap .top .top_right{width:30%; display:inline-block; float:right; text-align:right;}

/* main_img */
#wrap .wrap .main_img{width:100%; position:relative;}
#wrap .wrap .main_text_wrap{position:absolute; width:100%; bottom:2em; text-align:center;}
#wrap .wrap .main_text{background-color: #efefef; padding:7px 20px; border-radius:30px; font-size:1em;}

/* main_cnt */
#wrap .wrap .main_cnt{width:100%; position:relative;}
#wrap .wrap .main_cnt_wrap{position:absolute; top:0; width:100%; top:1em; text-align:center;}
#wrap .wrap .main_cnt_wrap font{font-size:1.2em; margin-bottom: -0.8em; display: block;}
#wrap .wrap .main_cnt_wrap .main_cnt_text{font-size:1.3em;}
#wrap .wrap .main_cnt_wrap .cnt_text{font-size:1em;}

/* footer */
#wrap .wrap .footer{width:100%; margin:0 auto; padding:20px 15px;padding:30px;}
#wrap .wrap .footer .footer_left{width:54%; display:inline-block; font-size:0.7em;}
#wrap .wrap .footer .footer_right{width:44%; display:inline-block; text-align: right;}
#wrap .wrap .footer .footer_right ul li{ display:inline-block; margin-left:2%; width:30px;}



/*로딩바*/
#loading { width: 100%;  height: 100%;  top: 0px; left: 0px; position: fixed;   display: block;   opacity: 1;   background-color: #fff;   z-index: 99;   text-align: center; } 
#loading-image {   position: absolute;   top: 45%;   left: 50%;  transform: translate( -50%, -50% ); z-index: 100; }
#loading p {   position: absolute;   top: 45%;   left: 50%;  transform: translate( -50%, -50% ); z-index: 100; margin-top: 70px;font-size: 1.2em;width: 75%; min-width: 280px;}


/* 공통 */
.float-left{float:left;}
.float-right{float:right;}
.pointer{cursor:pointer;}
.txt_left{text-align:left;}
.txt_right{text-align:right;}
.center{text-align:center;}
.bold{font-weight:bold;}

/* background 색상*/
.bg_mint{background-color: #29adb2; color:#fff;}
.bg_red{background-color: #E73217; color:#fff;}
.bg_navy{background-color: #22394A; color:#fff;}

.bg_mint1{background-color: #03939a; color:#fff;}
.bg_red1{background-color: #bf3000; color:#fff;}
.bg_navy1{background-color: #0b476d; color:#fff;}
.bg_whitegray{background-color: #ededed; color:#000000;}

/*AJ 셀카 용*/
.bg_aj{background-color: #f56209;}


.bg_graywhite{background-color: #f7f7f7;}

/* 폰트 색상*/
.fc_white {color:#fff;}
.fc_gray {color:#ededed;}
.fc_red {color:#E73217;}
.fc_mint{color:#29adb2;}
.fc_navy{color:#22394A;}
.fc_blue{color:#007bff;}

/* margin */
.m15{margin:15px;}
.ml5 {margin-left:5px;}
.mr5 {margin-right:5px;}
.ml10 {margin-left:10px;}
.mr10 {margin-right:10px;}
.ml25{margin-left:25px;}
.mt10{margin-top:10px;}
.mt30{margin-top:30px !important;}
.mt50{margin-top:50px !important;}
.mt100{margin-top:100px;}

.pl10{padding-left:10px;}
.pr10{padding-right:10px;}
.pt100{padding-top:100px;}
.pt50{padding-top:50px;}
.pt20{padding-top:20px;}

/* size */
.fs18{font-size:18px;}
.fs16{font-size:16px;}
.fs12{font-size:12px;}

/* header */
.progress_img{
    width: 80px;
  }
  .progress_img img {
    display: inline-block;
    width: 100%;
  }
  .info_header{
    padding: 17px 0;
    font-family: AppleSDGothicNeo;
    font-size: 24px;
    font-weight: bold;
    color: #1a1a1a;
  }

/* input디자인 입력선에 label이 걸쳐있는 스타일 */
.contact_form {text-align: center; margin: 0 auto; width: 100%; padding: 0 0.8em;}
.contact_form > div {position: relative; width: 100%;}
.contact_form > div input {width: 100%; height: 42px; margin: 10px; border: 0.3px solid var(--point-color); box-sizing: border-box; border-radius: 5px; padding: 0 1em; outline: none !important;}
.contact_form > div textarea {width: 100%; margin-top: 10px; border: 0.3px solid var(--point-color); box-sizing: border-box; border-radius: 5px; padding: 1em; outline: none !important;}
.contact_form > div select {width: 100%; height: 42px; margin: 10px 0; border: 0.3px solid var(--point-color); box-sizing: border-box; border-radius: 5px; padding: 0 1.3em; outline: none !important;height: 3.5em;}
.contact_form > div label {position: absolute; top: -1.6em; left: 0; margin: 1.9em 2em 2em 1em; background-color: white; padding: 0 8px; font-family: 'SpoqaHanSansNeo-Regular'; font-style: normal; font-weight: 400; font-size: 0.8em; /*line-height: 15px;*/ color: var(--point-color);}

/* 차봇색 버튼 */
.chabot_btn{border: 0.5px solid var(--point-color); background: #FFFFFF; border-radius: 5px; color: var(--point-color); width: 85%; padding: 0.8em 0;font-size: 1.2em; margin: 0 auto; display: block;}
.chabot_btn_active{border: 0.5px solid var(--point-color); background: var(--point-color); border-radius: 5px; color: #FFFFFF; width: 85%; padding: 0.8em 0;font-size: 1.2em; margin: 0 auto; display: block;}

.content_box{padding: 1.5em 0 0 0;}

/* 상단 바 */
.top_bar{overflow: hidden; text-align: center; margin: 0 auto; width: 85%;}
.top_content{float: left;}
.back_btn{width: 10%; margin: 0.4em 0 0 0; text-align: left;}
.top_title{width: 80%; font-size: 1.5em; font-weight: 700; margin: 0 0 0.1em 0;}
.top_title > p{font-family: 'SpoqaHanSansNeo-Medium' !important;}
.back_img{width: 0.75em;}
.back_img_car{width: 0.75em;}

/* 중간 content */
.content_body{margin: 2em auto 5em auto; width: 85%;}
.text_box{margin: 3em 0 3em 0;}
.form_text{font-size: 1.3em;font-family: 'SpoqaHanSansNeo-Medium'}

/* 하단 버튼 */
.bottom_btn{ position: fixed; padding:0.8em 0 1em 0; width: 100%; bottom: 0; background: #FFFFFF; max-width: 640px;}
.bottom_line{border-top: 0.5px solid #EEEEEE; width: 100%; position: absolute; left: 0; top: 0;}

/* 전문 내용 */
.agree_pop_content{font-family: 'SpoqaHanSansNeo-Regular'!important;}

/* 모달창 */
.modal {text-align: center;}
.modal:before {display: inline-block; vertical-align: middle; content: " "; height: 100%;}
.modal-dialog {display: inline-block; text-align: left; vertical-align: middle; margin: auto 0;}
.modal-body {padding: 2em 2.5em 2em 2.5em;}
.modal-content{min-width: 250px;}

.rectangle{width:100%; height:1px; background-color: var(--point-color); margin-bottom: 1em;}

.pop_close{float: right; width: 0.8em;}

.modal_title{padding: 0 1em; font-family: 'SpoqaHanSansNeo-Light'; font-size: 2.3em; text-align: center; color: #1B365D; margin: 0 0 1em 0;}
.modal_logo{width:6em; margin: 0 0 1em 0;}

.sub_content{margin:1em 0 0 0;}
.sub_content > p, input, label{font-family: 'SpoqaHanSansNeo-Medium';}
.user_title{color:#333333; margin:0 0 0.3em 0;}
.content_unit{margin: 1em 0 0.5em;}
.content_title{margin-bottom:2px; color:#949494; }

.content_unit ul{margin:0 0 2em 0; font-size:1em;}
.content_unit ul li{font-weight:bold; font-size:1.2em; font-family: 'SpoqaHanSansNeo-Medium';}

.vip_input{padding:0.5em 0; border:0px; border: 0px; border-radius:0; box-shadow:0 0 0 0; -webkit-box-shadow:0px; font-size:1.1em; margin: 0 0 0.5em 0; color:#000;}
.vip_input:focus{box-shadow:0 0 0 0;}
.vip_input::placeholder{color:#d2d2d2;}

input:focus {outline: 0px;}
/* input[type="number"] 화살표 제거 */ 
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}

@media screen and (min-width:500px) {
    #wrap .wrap .main_text{font-size:1.2em;}
    #wrap .wrap .main_cnt_wrap font{font-size:1.3em; padding-top:20px;}
    #wrap .wrap .main_cnt_wrap .main_cnt_text{font-size:3em;}
    #wrap .wrap .main_cnt_wrap .cnt_text{font-size:1.5em;}
    #wrap .wrap .footer .footer_left{font-size:1em;}
    #wrap .wrap .footer .footer_right img{width:100%;}
    #wrap .wrap .footer .footer_right ul li{ width:40px;}
}

@media all and (max-width: 362px){
  .contents{font-size: 0.8em;}
}
@media all and (min-width: 363px) and (max-width: 640px){
  .contents{font-size: 0.9em;}
}
@media all and (min-width: 500px){
  .contents{font-size: 1.1em;}
}
 
@media all and (max-width: 290px){
  .content_body{margin: 2em auto 5em auto; width: 90%;}
  .top_bar{overflow: hidden; text-align: center; margin: 0 auto; width: 90%;}
}

@media all and (min-width: 431px){
    .modal-dialog {display: inline-block; text-align: left; vertical-align: middle;}
}
@media all and (max-width: 390px){
    .agree_box{width: 100%; border: 1px solid #F1F1F1; margin: 1em 0 1em 0; font-size: 0.85em;}
}
@media all and (max-width: 767px){
    .modal-dialog {width: 93%;}
}