@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); 
@import url(//cdn.rawgit.com/hiun/NanumSquare/master/nanumsquare.css);


/*= Reset CSS 
============= */
html, body {border: 0; margin: 0; padding: 0;}
body {font: 22px "Lato", Arial, sans-serif; min-width: 100%; min-height: 100%; font-family: 'NanumSquare', sans-serif !important;}
.container{margin: 0 auto; max-width: 1200px;}
body { -webkit-overflow-scrolling: touch; } 
*{margin: 0; padding: 0; box-sizing: border-box;}
.row{float: left; width: 100%; padding: 20px 0 50px;}
li {list-style:none; }
a{text-decoration:none; }
/*h2{text-align: center; color: #2079df; font-size: 28px; float: left; width: 100%; margin: 30px 0; position: relative; line-height: 58px; font-weight: 400;}
h2:before{content: ""; position: absolute; left: 50%; bottom: 0; width: 100px; height: 2px; background-color: #2079df; margin-left: -50px;}*/
/*= Reset CSS End
================= */

/*= input focus effects css
=========================== */
:focus{outline: none;}

.col-3{float: left; width: 100%; margin: 0 auto; margin-bottom:30px; margin-top:2px; position: relative;} /* necessary to give position: relative to parent. */
input[type="text"]{font: 16px/24px "Lato", Arial, sans-serif; color: #222; width: 100%; box-sizing: border-box; letter-spacing: 1px;}

.effect-2 {border: 0; padding: 7px 0; border-bottom: 1px solid #ebebec;}
.effect-2 ~ .focus-border{position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background-color: #ea5550; transition: 0.4s;}
.effect-2:focus ~ .focus-border{width: 100%; transition: 0.4s; left: 0;}


/*= input focus effects css End
=============================== */


div.wrapper {width:360px; margin:0 auto;  padding:0 30px;}
div.wrapper2 {width:360px; margin:0 auto;  height:100px; padding:0 30px;}
.conWrap {width:90%; margin:0 auto;  height:auto;}
div#header {width:100%; height:120px; background-color:#343434; padding:3px 0;}


h1.jrTit {color:#fff;letter-spacing:-1px; font-size:1.5em;}
h2.jrText {color:#ea5550; margin-top:-20px; letter-spacing:-1.5px; font-size:1.2em;}
h3.title {margin-bottom:10px; font-size:1em; line-height:1.5em;}

div.desc { width:100%; background-color:#f4f4f4; padding:12px 0; height:80px; }
span.notice { font-size:0.75em; line-height:5px; }

p.must{font-size:13px;color:#fff; border-radius:2px; text-align:center; vertical-align:center;
letter-spacing:-1px;  width:25px; height: 15px; display:inline-block;
background-color:#e53935; }

span.agree {padding-bottom:-5px; font-size:0.8em;}


textarea {
	font-size:0.75em !important;
}

.input-group {
  position: relative;
  margin: 1rem 0;
  font-size:0.5em;
}
.input-group label {
  display: block;
  margin-bottom: .5rem;
  color: #64ffda;
}

input[type=text],
input[type=search],
select, textarea {
  display: block;
  width: 100%;
  padding: .5rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /*border: 1px solid #aaa;*/
  outline: none;
  border-radius: 2px;
  font-size:0.9em;
}
input[type=text]:focus,
input[type=search]:focus,
select:focus, textarea:focus {
  border-color: #eeeeee;);
}

textarea {
    display: block;
    width: 94%;
    padding: .5rem;
    -webkit-box-sizing: border-box;
    /*box-sizing: border-box;*/
    border: 1px solid #ddd;
	line-height:24px;
    outline: none;
    border-radius: 2px;
	font-size:0.3em;
	background-color:#f6f6f6;
	border: none !important;
    box-sizing: content-box !important;
	}

body {
  display: -webkit-box;  display: -ms-flexbox;  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-family: 'Lato';
  font-weight: 300;
}



.select-wrapper .select-list li.option {
  padding: 0 .75rem;
  height: 50px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #000;
}





ul.address {width:100%;}
ul.address li {margin-bottom:10px;}
ul.address li:nth-child(3) {margin-bottom:-48px;}

/*
ul.address li {float:left; width:30%; margin-right:18px;}
ul.address li:nth-child(3) {margin-right:-10px;}
*/



span.high {font-weight:bold; color:#ea5550; font-size:9px;}



div.submit p.submit_btn a{margin-top:20px; display:inline-block; width:100%; height:50px; background-color:#ddd; text-align:center;
						line-height: 50px; color:#222; font-weight:bold; font-size:0.9em; border-radius:2px;}

div.submit p.submit_btn a:hover{display:inline-block; width:100%; height:50px; background-color:#ea5550; text-align:center;
						line-height: 50px; color:#fff; font-weight:bold; font-size:0.9em; border-radius:2px; transition:all 0.4s;}


div.edit p.edit_btn a{margin-top:30px; display:inline-block; width:100%; height:50px; background-color:#ddd; text-align:center;
						line-height: 50px; color:#222; font-weight:bold; font-size:0.9em; border-radius:2px;}

div.edit p.edit_btn a:hover{display:inline-block; width:100%; height:50px; background-color:#ea5550; text-align:center;
						line-height: 50px; color:#fff; font-weight:bold; font-size:0.9em; border-radius:2px; transition:all 0.4s;}


/* check box */

#line {height:30px; margin:0 auto; width:100%; border-bottom:1px solid #ddd;}
#checkMain {height:40px; border-bottom: 2px solid #ddd; width:100%;}


select {

 background-color: #fff;
      border-radius: 0px;
       background-image:url(../image/arrow.png); 
        background-position: top 20px right 10px;
      background-repeat:no-repeat;
      display: block;
      height: 40px;
      width: 100%;
	  border:1px solid #e9e9eb;
	  border-radius:2px;
      cursor: pointer;
      margin-bottom: 15px;
      padding-left: 10px;
      outline: none;
      letter-spacing: 1px;
      -webkit-appearance: none;
      -moz-appearance: none;
      line-height: 54px;
      color: #444;
      font-size: 16px;    

 /* width: 100%;
  font-size: 1rem;
  height: 38px;/* 1.6rem;
  padding: 0.125rem 0.125rem 0.0625rem;
  background: none;
  border: 1px solid #eee;
  line-height: 38px; /* 1.6;
  -webkit-box-shadow: none;
          box-shadow: none;*/
}

select:focus,
input:focus,
textarea:focus {
  outline: none;
}
select:focus ~ .control-label,
input:focus ~ .control-label,
textarea:focus ~ .control-label {
  color: #ea5550;
}
select:focus ~ .bar::before,
input:focus ~ .bar::before,
textarea:focus ~ .bar::before {
  width: 100%;
  left: 0;
}

.checkbox label,
.form-radio label {
  position: relative;
  cursor: pointer;
  padding-left: 2rem;
  text-align: left;
  color: #222;
  display: block;
}
.checkbox input,
.form-radio input {
  margin-top:4px;
  width: auto;
  opacity: 0.00000001;
  position: absolute;
  left: 0;
}


.checkbox {
  margin-top: 1rem;
  margin-bottom: 1.2rem;
}
.checkbox .helper {
  color: #999;
  position: absolute;
  top: 3px;
  left: 0;
  width: 1.3rem;
  height: 1.3rem;
  z-index: 0;
  border: 0.125rem solid currentColor;
  border-radius: 0.0625rem;
  -webkit-transition: border-color 0.28s ease;
  transition: border-color 0.28s ease;
}
.checkbox .helper::before, .checkbox .helper::after {
  position: absolute;
  height: 0;
  width: 0.2rem;
  background-color: #ea5550;
  display: block;
  -webkit-transform-origin: left top;
          transform-origin: left top;
  border-radius: 0.25rem;
  content: '';
  -webkit-transition: opacity 0.28s ease, height 0s linear 0.28s;
  transition: opacity 0.28s ease, height 0s linear 0.28s;
  opacity: 0;
}
.checkbox .helper::before {
  top: 0.65rem;
  left: 0.38rem;
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
  -webkit-box-shadow: 0 0 0 0.0625rem #fff;
          box-shadow: 0 0 0 0.0625rem #fff;
}
.checkbox .helper::after {
  top: 0.3rem;
  left: 0;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.checkbox label:hover .helper {
  color: #ea5550;
}
.checkbox input:checked ~ .helper {
  color: #ea5550;
}
.checkbox input:checked ~ .helper::after, .checkbox input:checked ~ .helper::before {
  opacity: 1;
  -webkit-transition: height 0.28s ease;
  transition: height 0.28s ease;
}
.checkbox input:checked ~ .helper::after {
  height: 0.5rem;
}
.checkbox input:checked ~ .helper::before {
  height: 1.2rem;
  -webkit-transition-delay: 0.28s;
          transition-delay: 0.28s;
}

/* ------------------- source (top) ------ */

/* personalized checkbox */
div#check {margin-top:30px;}






.form-radio,
.form-group {
  position: relative;
  margin-top: 2.25rem;
  margin-bottom: 2.25rem;
}

.form-radio {
  padding-top: 0.25rem;
  margin-top: 1rem;
}


.form-radio label {
  position: relative;
  cursor: pointer;
  padding-left: 2rem;
  text-align: left;
  color: #222;
  display: block;
}

.form-radio input {
  width: auto;
  opacity: 0.00000001;
  position: absolute;
  left: 0;
}

.radio {
  margin-bottom: 1rem;
}
.radio .helper {
  position: absolute;
  top: -0.25rem;
  left: -0.25rem;
  cursor: pointer;
  display: block;
  font-size: 1rem;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  color: #999;
}
.radio .helper::before, .radio .helper::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  margin: 0.25rem;
  width: 1rem;
  height: 1rem;
  -webkit-transition: -webkit-transform 0.28s ease;
  transition: -webkit-transform 0.28s ease;
  transition: transform 0.28s ease;
  transition: transform 0.28s ease, -webkit-transform 0.28s ease;
  border-radius: 50%;
  border: 0.125rem solid currentColor;
}
.radio .helper::after {
  -webkit-transform: scale(0);
          transform: scale(0);
  background-color: #e53935;
  border-color: #e53935;
}
.radio label:hover .helper {
  color: #e53935;
}
.radio input:checked ~ .helper::after {
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
}
.radio input:checked ~ .helper::before {
  color: #e53935;
}
.radio + .radio,
.checkbox + .checkbox {
  margin-top: 1rem;
}

.has-error.checkbox .helper, .has-error.radio .form-help,
.has-error.radio .helper, .has-error.form-radio .form-help,
.has-error.form-radio .helper {
  color: #d9534f;
}


span.desc {height:30px;}


footer { width:100%; padding:20px 0; background-color:#eee; color:#222; font-size:0.7em; margin-top:30px; text-align:center; line-height:1.5em;}


button, input, optgroup, select {font-size:0.8em !important;}
textarea {line-height:1.4em !important;}