@charset "utf-8";

/*
@font-face
{
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 200;
src: url(../images/font/NotoSans-Light.woff2) format('woff2'),
url(../images/font/NotoSans-Light.woff) format('woff'),
url(../images/font/NotoSans-Light.otf) format('opentype');
}


@font-face
{
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 500;
src:url(../images/font/NotoSans-Medium.woff2) format('woff2'),
url(../images/font/NotoSans-Medium.woff) format('woff'),
url(../images/font/NotoSans-Medium.otf) format('opentype');
}
*/


/*  
 * @ RESET CSS
 * -------------------------------
 */
html, body, div, p, span, strong, b, em, iframe, pre,
h1, h2, h3, h4, h5, h6,
img, dl, dt, dd,
fieldset, form, legend, label,
table, caption, thead, tbody, tfoot, tr, th, td,
ul, ol, li, a, input, select, textarea {margin: 0;padding: 0; border: 0 none; }

body { font-size: 1em; color:#333; background:#efefef}
body:lang(ko){font-family: 'Noto Sans kr','맑은 고딕','돋움', Dotum, AppleGothic, Sans-serif, Arial;}
input,button,textarea{font-family: 'Noto Sans kr','맑은 고딕','돋움', Dotum, AppleGothic, Sans-serif, Arial;}

ul, ol, li {list-style: none;}
em, address {font-style: normal;}
img {border: 0 none; font-size: 0;line-height: 0;}
sup {position: relative;top: 2px;font-size: 11px;line-height: 100%;}

table {border-collapse: collapse; border-spacing:0; }
caption {overflow: hidden;width: 0;height: 0;font-size: 0; line-height: 0;}
th, td { vertical-align: middle;/* white-space: nowrap */}

a {color: #333; text-decoration: none; line-height: 1;}
a:hover, a:focus, a:active {text-decoration: none;}
a:visited {color: #333;}
*, html {box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
*, *:before, *:after , *::before, *::after {box-sizing: border-box;-webkit-box-sizing: border-box; -moz-box-sizing: border-box;}

.hidden {
 position:absolute !important;  
 width:1px; 
 height:1px; 
 overflow:hidden;
 clip:rect(1px 1px 1px 1px); /* IE6, IE7 */
 clip:rect(1px, 1px, 1px, 1px);
 }
 
input ,textarea{-webkit-appearance: none;-webkit-border-radius: 0;outline: none;}
 
 /*reset end*/
 *{border:rgba(0,0,0,0) 1px solid}
 html, body{overflow-x:hidden}
 div.header{ position:relative; width:100%; height:200px; background: rgba(90,194,224,1); padding-top:1px}
 div.header h1{ position:relative; width:100%; max-width:1200px;display:block; height:100px; background:url(../images/title.png) no-repeat left center; background-size: auto 100px; margin:10px auto 0 ;}
 div.wrapper{ position:relative;width:98%; max-width:1200px; margin: -80px auto 20px; padding:30px 30px 150px; background:#fff; box-shadow:0 3px 5px rgba(0,0,0,.1); border-top-right-radius:20px; border-bottom-left-radius:20px; font-weight:200}
 div.section{position:relative}
 .top_title{text-align:center}
  div.section h2{ position:relative; display:inline-block; font-size:2em; text-align:center; padding:20px; }
  div.section h2::before{content:""; width:0; height:15px; left:0; bottom:14px; position:absolute; z-index:1; background:rgba(0,238,235,.2); animation:pen 1s; animation-fill-mode:both; animation-delay:1s}
  div.section h2::after{content:""; width:14px; height:22px; right:-5px; bottom:11px; position:absolute; z-index:1; background:rgba(0,238,235,.2); border-radius:3px; transform:rotate(3deg); opacity:0; animation:pen2 .5s; animation-fill-mode:both; animation-delay:2s}
  
 div.agree_section{ position:relative;margin:30px 0; text-align:right}
  div.agree_section textarea{width:100%; height:200px; border:#ccc 1px solid;resize:vertical; text-align:left; padding: 10px;margin:5px 0; font-size:1em;font-weight:200; line-height:1.5em; color:#666}
  div.agree_section div.textarea{width:100%; height:200px; border:#ccc 1px solid;resize:vertical; text-align:left; padding: 10px;margin:5px 0; font-size:1em;font-weight:200; line-height:1.5em; color:#666; overflow: auto}
  div.agree_section div.textarea pre{ font-family:'Noto Sans kr','맑은 고딕','돋움', Dotum, AppleGothic, Sans-serif, Arial;; overflow: auto; white-space:pre-wrap }
  div.agree_section div.textarea pre table th{border: #aaa 1px solid; background:rgba(131,204,227,.5); padding: 5px}
  div.agree_section div.textarea pre table td{border: #aaa 1px solid; padding: 5px}
  div.agree_section h3{display:block; text-align:left}
  div.agree_section h3 em{color:#CC1E33; margin-right:5px}
  div.agree_section h3 em::before{content:"["}
  div.agree_section h3 em::after{content:"]"}
  div.agree_section label{ position:relative; display:inline-block; height:20px; line-height:19px; padding-left:24px; margin-left:20px}
  div.agree_section label input[type='radio']{position:absolute; top:0; left:0; width:20px;height:20px; opacity:0}
  div.agree_section label input[type='radio'] + span{ position:absolute; top:0; left:0; display: inline-block; width:20px; height:20px; border:#CCC 1px solid}
  div.agree_section label input[type='radio']:checked + span{ border:none; background:url(../images/check.png); background-size:cover}
  
  div.btn_area{display:block; margin:20px auto 40px; text-align:right}
  div.btn_area button{ display:inline-block; width:100%; max-width:400px;height:60px; font-size:1.3em; font-weight:500; color:#fff; background:rgba(90,194,224,1); border:none; border-radius:5px; cursor:pointer}
  div.btn_area button.kakaotalk{background:#fae301; color:#522505}
  div.btn_area button.kakaotalk::before{display: inline-block; width:30px; height:30px; background:url(../images/kakao.png) no-repeat center; background-size:contain; content:""; vertical-align:middle; margin:-3px 5px 0 0}
  div.btn_area button.cellphone::before{display: inline-block; width:30px; height:30px; background:url(../images/cell.png) no-repeat center; background-size:contain; content:""; vertical-align:middle; margin:-3px 5px 0 0}
div.btn_area button.cellphone{height: 40px; font-size: 1.1em; font-weight: 200; max-width: 300px}
    dl.user_info{top:0; right:0; overflow:hidden}
	dl.user_info::after{clear:both}
  dl.user_info dt{float:left; text-align:right; width:calc(100% - 400px); height:50px; line-height:50px; }
  dl.user_info dd{ float:left; width:400px; height:50px; }
  dl.user_info dd input , .user_info{ height:100%; width:100%;border:none; background:none; border-bottom:#ccc 1px solid;text-indent:20px; font-size:1em ; transition:border .2s}
  dl.user_info dd input:focus,input.sms_input:focus,.user_info:focus{border-bottom:rgba(90,194,224,1) 3px solid; }
  
.halfdd{ text-align: left; font-size: 0; margin: 15px 0 0  }
.halfdd label{ display: inline-block; width:80px !important; height: 35px !important;  margin: 0 !important; font-size: .9rem}
.halfdd label input{ opacity: 0}
.halfdd label span{ border:#ccc 1px solid; width: 100% !important; height: 100% !important; text-align: center; line-height: 30px; font-weight: 400; border-top-left-radius: 5px; border-bottom-left-radius: 5px}
.halfdd label input:checked + span{ background: rgba(90,194,224,1) !important; color:#fff}
.halfdd label:nth-child(2n){margin-right: 30px !important}
.halfdd label:nth-child(2n) span{border-radius: 0; border-top-right-radius: 5px;border-bottom-right-radius: 5px; border-left: none !important}

.align-center { text-align: center !important;}
  
  input.sms_input{ width:100%; max-width:400px; height:60px;border-bottom:#ccc 1px solid;text-indent:20px; font-size:1em ; transition:border .2s; text-align:right; padding-right:10px; margin-bottom:10px}
  div.footer{position:relative;width:98%; max-width:1200px; height:40px; margin:-90px auto 0; background:url(../images/logo.png) no-repeat right top; background-size: auto 40px}
    dl.user_info dd input::placeholder,input.sms_input::placeholder, dl.user_info dd input:-ms-input-placeholder,input.sms_input:-ms-input-placeholder{color:#ddd; font-weight: 100}


  @keyframes pen {
	0% {width:0}
	100%{width:100%}  
  }
  @keyframes pen2 {
	0% {opacity:0}
	100%{opacity:1}  
  }
  @media screen and (max-width: 767px){
	  html,body{}
	  div.header{ height:150px; }
	  
 div.header h1{ height:50px; background-size: auto 50px; background-position: 5px center}
 div.wrapper{ margin: -80px auto 20px; padding:10px 10px 70px; font-size:.95em; font-weight:200; width:calc(100% - 10px); letter-spacing:-.14em}
 div.section h2{ padding:20px; font-size:1.5em}
  
 div.agree_section textarea{height:150px;}
 
  dl.user_info dt{float:none; text-align:left; width:100%; height:20px; line-height:20px; }
  dl.user_info dd{ float:none; width:100%; height:40px; margin-bottom:10px }
  dl.user_info dd input{ text-indent:0; }
  
	    div.btn_area{display:block; margin:20px auto 40px; text-align:left; width: 100%}
  div.btn_area button{ height:50px; font-size:1.3em; margin-bottom:5px; max-width: 100% !important}
	  div.btn_area button.cellphone{ max-width: 200px !important; transform: translateY(-20px)}
  .sms_area, input.sms_input{ text-align:left !important; text-indent:0}
  input.sms_input{ height:40px}
  .footer{ background-size: auto 20px !important; background-position:right bottom !important}
	  
	  .halfdd{ text-align: left; font-size: 0; margin: -15px 0 25px;  }
	  .halfdd label{width:65px !important; }
	  .halfdd label:nth-child(2n){margin-right: 15px !important}
  }