/* common */

#wrap{width:100%; height:100%; max-width:720px; margin: 0 auto; margin-top: -20px;}

#header {
  position: relative;
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
}

#header .top_logo a {  
  position: absolute;
  display: block;
  background: url(../img/top_logo.png) no-repeat center;
  background-size: contain;
  width: 180px;
  height: 22px;
  top: 20px;
  left: 20px;
  font-size: 0;
}


/* section01 */
#section01 {
  background: url(./bg.png) no-repeat top;
  height: 960px;
}

.main_form {
  position: absolute;
  width: 95%;
  max-width: 640px;
  left: 50%;
  top: 80px;
  transform: translate(-50%);
  text-align: center;
}

.main_form p{
  color: #fff;
  font-size: 52px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 35px;
  margin-top: 15px;
}

.main_form span {
    font-size: 25px;
    line-height: 1.2;
    color: #fff;
}

.main_form span.head_span {
    font-size: 28px;
    line-height: 1.2;
    color: #fff;
}

.main_form form {
  width: 95%;
  max-width: 640px;
  margin: 0 auto;
  margin-top: 20px;
  background: #fff;
  border-radius: 15px;
  padding: 50px 0;
  padding-bottom: 30px;
}
directgn.kr
.main_form .main_input input {
  width: 85%;
  height: 50px;
  border: 0;
  border-radius: 10px;
  margin-bottom: 20px;
  padding: 0 15px;
  font-size: 16px;
  font-weight: 400;
  border: 1px solid #dedede;
}

.main_form .main_input input::placeholder {
  color: #959595;
}

.main_check {
  position: relative;
  display: block;
  text-align: left;
  width: 85%;
  margin: 0 auto;
}

.main_check input[type="checkbox"] {
  display: none;
}

.main_check label {
  font-size: 14px;
  margin-left: 35px;
  cursor: pointer;
  color: #908a8a;
}

.main_check label::after {
  width: 25px;
  height: 25px;
  position: absolute;
  top: 0;
  display: block;
  content: "";
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #908a8a;
}

.main_check input[type="checkbox"]:checked + label:after {
  background-image: url(../images/check_img.png);
  background-size: contain;
}

.main_check .privacy_btn {
  font-size: 12px;
  border-bottom: 1px solid #908a8a;
  padding: 4px 2px;
  color: #908a8a;
  position: absolute;
  right: 0;
  bottom: 0;
}

.main_btn {
  margin-top: 20px;
}

.main_btn button {
  width: 85%;
  background-color: #fa4616;
  color: #fff;
  border-radius: 50px;
  padding: 18px 0;
  font-size: 24px;
  font-weight: 700;  
  -webkit-box-shadow: 9px 9px 20px 0px rgba(0,0,0,0.15);
  -moz-box-shadow: 9px 9px 20px 0px rgba(0,0,0,0.15);
  box-shadow: 9px 9px 20px 0px rgba(0,0,0,0.15);
}

/* section02 */
#section02 {
  background-color: #fff;
  padding: 20px 0;
}

.bohum_list {
  margin: 0 auto;
  text-align: center;
}

.card {
  display: inline-block;
  width: 40%;
  height: 155px;
  padding: 10px;
  margin: 2%;
  -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.1);
  -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.1);
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.1);
  border-radius: 10px;
}

.card:nth-child(even) {
  margin-right: 0;
}

.card:nth-child(odd) {
  margin-left: 0;
}

.card_text {
  font-size: 18px;
  font-weight: 400;
  margin: 20px 0;
}

.card_text span {
  color: #fa4616;
  margin: 0 30px;
}

.go_btn {
  background-color: #3578e8;
  color: #fff;
  font-size: 16px;
  width: 80%;
  padding: 8px 0;
  border-radius: 25px;
  text-align: center;
  margin: 0 auto;
  cursor: pointer;
}

/* section03 */
#section03 {
  background-color: #f3f4f8;
  padding: 20px 0;
}

.event_wrap {
  width: 95%;
  margin: 0 auto;
}

.event_wrap li.toggle {
  overflow: hidden;
  text-align: left;
  margin-bottom: 10px;
}

.toggle a.toggleBtn {
  background: #fff;
  position: relative;
  display: block;
  padding: 10px;
  font-size: 1.0rem;
  font-weight: 700;
  margin: 0 auto;
}

.event_wrap li.toggle a.toggleBtn:after {
  font-family: FontAwesome;
  content: "\f077";
  color: #000;
  font-size: 1.0rem;
  line-height: 1.5rem;
  position: absolute;
  top: 50%;
  margin-top: -12px;
  right: 15px;
}

.event_wrap li.toggle .toggle_base_con {
  background: #fff;
  padding: 10px;
  margin: 0 auto;
}
.event_wrap li.toggle .toggle_base_con.off {
  display: none;
}

.banana p:first-child,.giftcard p:first-child {
  font-weight: 700;
  font-size: 20px;
  color: #3578e8;
}

.banana p:nth-child(2){
  font-weight: 700;
  font-size: 28px;
  margin: 0 0 20px;
}

.banana p, .giftcard p {
  text-align: center;
  font-weight: 700;
  font-size: 24px;
}

.banana span, .giftcard span {
  display: block;
  margin-top: 20px;
  font-size: 14px;
  line-height: 22px;
}

.banana span:last-child, .giftcard span:last-child {
  font-size: 12px;
}

.banana img, .giftcard img {  
  display: block;
  text-align: center;
  margin: 0 auto;
}

.giftcard {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dashed #dedede;

}

.giftcard p:nth-child(2) {
  font-weight: 700;
  font-size: 28px;
}

.input_group {
  display: block;
  width: 95%;
  margin: 0 auto;
}

.input_group label {
  display: block;
  font-size: 15px;
  font-weight: 400;
  margin-bottom: 5px;
  text-align: left;
}

.input_group input {
  width: 100%;
  height: 40px;
  border: 1px solid #1d2c6d;
  border-radius: 4px;
  margin-bottom: 20px;
  padding: 0 15px;
  font-size: 15px;
  font-weight: 400;
}

.input_group select {
  width: 100%;
  height: 40px;
  border: 1px solid #1d2c6d;
  background-color: #fff;
  border-radius: 4px;
  margin-bottom: 20px;
  padding: 0 15px;
  font-size: 15px;
  font-weight: 400;
  outline: none;
}

.confirm_form .input_group {
  text-align: center;
}

.confirm_form .input_group label{
  text-align: center;
  margin-bottom: 10px;
}

.confirm_form .input_group input {
  width: 60%;
}

.confirm_form .input_group button {  
  display: inline-block;
  margin-left: 10px;
  font-size: 14px;
  font-weight: 400;
  background-color: #1d2c6d;
  color: #fff;
  padding: 10px 24px;
  border-radius: 100px;
  vertical-align: 8px;
}

.checkbox_wrap {
  width: 95%;
  margin: 0 auto;
  position: relative;
  display: block;
  text-align: left;
  margin-bottom: 15px;
}

.checkbox_wrap input[type="checkbox"] {
  display: none;
}

.checkbox_wrap label {
  font-size: 14px;
  font-weight: 400;
  margin-left: 35px;
  cursor: pointer;
}

.checkbox_wrap label::after {
  width: 25px;
  height: 25px;
  position: absolute;
  top: 0;
  display: block;
  content: "";
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #1d2c6d;
  border-radius: 4px;
}

.checkbox_wrap input[type="checkbox"]:checked + label:after {
  background-image: url(../images/check_img.png);
  background-size: contain;
}

.checkbox_wrap .privacy_btn2 {
  position: absolute;
  right: 0;
  bottom: -5px;
  font-size: 12px;
  border: 1px solid #1d2c6d;
  color: #1d2c6d;
  padding: 4px 10px;
}

.form_notice {
  width: 95%;
  margin: 0 auto;
  display: block;
  font-size: 12px;
  line-height: 18px;
  text-align: left;
}

.form_btn {
  display: block;
  margin: 20px auto;
  text-align: center;
}

.form_btn button {  
  font-size: 18px;
  font-weight: 500;
  background-color: #1d2c6d;
  color: #fff;
  padding: 15px 60px;
  border-radius: 100px;
}

.confirm_table {
  margin: 0 auto;
  text-align: center;
  width: 95%;
}

.confirm_table table {
  margin-bottom: 10px;
}

.confirm_table table th {
  background: #273888;
  color: #fff;
  font-size: 14px;
  padding: 10px 0;
  width: 50%;
  font-weight: 400;
}

.confirm_table table td {
  background: #fff;
  font-size: 13px;
  padding: 10px 10px;
  width: 60%;
  border-bottom: 1px solid #eee;
}

.confirm_table p{
  text-align: right;
  margin-top: 10px;
}

.confirm_fail {
  width: 60%;
  text-align: center;
  margin: 0 auto;
}

.confirm_fail img {
  width: 100%;
}

.confirm_fail p {  
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 10px;
}


/* section04 */
#section04 {
  background-color: #273888;
  padding: 20px 0;
  text-align: center;
}

#section04 h4 {
  color: #fff;
  font-size: 24px;
  font-weight: 700;
}

#section04 h4 span {
  font-weight: 500;
}

.urlbox {
  margin: 20px auto;
  background-color: #fff;
  border-radius: 10px;
  width: 80%;
  padding: 10px;
  -webkit-box-shadow: 9px 9px 20px 0px rgba(0,0,0,0.15);
  -moz-box-shadow: 9px 9px 20px 0px rgba(0,0,0,0.15);
  box-shadow: 9px 9px 20px 0px rgba(0,0,0,0.15);
}

.urlbox p {
  display: block;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  vertical-align: middle;
}

.urlbox a{
  display: block;
  font-size: 14px;
  font-weight: 500;
  vertical-align: middle;
}


/* section05 */
#section05 {
  background-color: #fff;
  padding: 30px 0 10px;
}

.bohum {  
  position: relative;
  padding: 10px 20px;
}

.bohum:first-child {
  padding-top: 0;
}

.bohum_title {
  text-align: center;
  background-color: #fff;
  border: 1px solid #e1e1e1;
  border-radius: 10px 10px 0 0;
  padding: 10px;
}

.bohum_title p{
  font-weight: 400;
  font-size: 16px;
  margin-bottom: 10px;
}

.bohum_title p a{
  font-weight: 400;
  font-size: 16px;
}

.bohum_title .url{
  cursor: pointer;
}
.bohum_title .url,.bohum_title .hdurl,.bohum_title .mobile {
  display: block;
  width: 140px;
  margin: 0 auto 10px;
  padding: 10px 0;
  background-color: #273888;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  border-radius: 6px;
  margin-top: 15px;
}

.bohum_text {
  background-color: #f9f9f9;  
  border: 1px solid #ccc;
  border-radius: 0 0 10px 10px;
  padding: 10px;
  border-top: 0;
  line-height:20px;
}

.summary {  
  font-size: 12px;
  line-height: 26px;
}

.pass {
  color: #908a8a;
  margin-top: 10px;
  font-size: 12px;
}

.highlight01 {
  color: #fa4616;
}

/* section07 */
#section07 {
  background-color: #f5f5f5;
  padding: 20px;
}

#section07 p {
  font-size: 14px;
  font-weight: 400;
  margin-top: 20px;
}

#section07 p:first-child {
  margin-top: 0;
}

#section07 span {
  display: block;
    font-size: 20px;
    line-height: 1.5;
}

/* footer */
#footer {position:relative; background:#282a29;}
#footer ul li {    font-size: 20px;
    padding-bottom: 10px;
    line-height: 1.5;
}
#footer ul {}
#footer .f-logo {background: url('./f-logo.png') no-repeat; background-size: cover; width: 430px; height: 31px; margin: 0 auto; margin-bottom: 20px;}
#footer .copyright{color:#999;text-align:left;font-size:18px;text-shadow:none !important;line-height:1.3;text-align:left;padding: 30px 20px 30px; padding-bottom: 320px;}
#footer .copyright a {color: #999;} 
.footer-bg {display: block;}



/* floating */

 #floatingbanner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1111;
  margin:0 auto;
}

#floatingbanner img {
   width: 100%;
}


/*POPUP*/

.device-layer {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}

.layer-pop {
  position: absolute;
  z-index: 1003;
  left: 50%;
  top: 8%;
  transform: translateX(-50%);
  width: 90%;
  height: 80%;
  margin: 0 auto;
  border: 5px solid #1d2c6d;
  background-color: #fff;
  overflow-y: auto;
}

.layer-pop .container-pop {
  padding: 15px 15px;
}

.layer-pop h2.text {
  font-size: 20px;
  margin-bottom: 5px;
  font-weight: 700;
}

.layer-pop p.text {
  margin-top: 0;
  line-height: 20px;
  font-size: 0.75rem;
  color: #666;
}

.layer-pop .exit-btn {
  width: 100%;
  margin: 10px 0 20px;
  padding-top: 10px;
  text-align: right;
  border-top: 1px solid #ddd;
}

a.layer-exit {
  font-size: 13px;
  line-height: 30px;
  display: inline-block;
  height: 25px;
  padding: 0 14px;
  color: #fff;
  border: 1px solid #1d2c6d;
  background-color: #1d2c6d;
}

a.layer-exit2 {
  font-size: 13px;
  line-height: 30px;
  display: inline-block;
  height: 25px;
  padding: 0 14px;
  color: #fff;
  border: 1px solid #1d2c6d;
  background-color: #1d2c6d;
}
.reward {
margin-bottom:50px
}
.reward p:first-child{
  text-align: center;
  font-weight: 700;
  font-size: 40px;
  color: #3578e8;
}

.reward p:nth-child(2){
  text-align: center;
  font-weight: 700;
  font-size: 45px;
  margin: 0 0 20px;
}

.reward span {
  width: 95%;
  display: block;
  font-size: 30px;
  line-height: 1.5;
  margin: 20px auto 0;
}

.reward img {  
  display: block;
  text-align: center;
  margin: 0 auto;
  width:85%
}

.form-box { position: absolute; top: 270px; left:50%; transform: translateX(-50%); width: 700px;}
.form-all { height: 75px; font-weight: 800; font-size: 32px; font-family:NanumSquare, sans-serif;}
.form-set div { margin-bottom: 40px; }
.form-set div span { display: inline-block; width: 80px; line-height: 55px; font-weight: bold; background: none; color: #777; text-align: left; }

.form-set .form-tel { display: inline-block; }
.form-set div .form-text { border-radius: 10px; vertical-align: top; width: 80%; padding: 5px 10px; outline: none; border: 1px solid #ddd; border-radius: 10px; box-sizing: border-box;}
.form-set div .form-number { background: #fff; ;box-sizing: border-box; vertical-align: top; width: 22%; outline: none; border: 1px solid #ddd; border-radius: 10px; margin-right: 14px; padding: 5px 10px;}
.form-set div .form-number:last-child { margin-right: 0; }
.form-set div select { outline: none; border: none; font-weight: 800; }

.form-set div select:focus { border: 3px solid #d00; }
.form-set div input:focus { border: 3px solid #d00; }

.privacy {text-align: center;font-size: 20px;font-family:NanumSquare, sans-serif;color: #777;margin-top: 23px;margin-bottom: 30px;display: flex;align-items: center;justify-content: center;}
.privacy #check-box { width: 40px; height: 40px; vertical-align: -5px;}
.privacy a { color: #777; font-size: 20px; margin-left: 5px;}

.btn_submit { 
    width: 80%;
    background-color: #fa4616;
    color: #fff;
    border-radius: 70px;
    padding: 35px 0;
    font-size: 30px;
    font-weight: 700;
	cursor: pointer;
	
	}


/* Select box �ろ���� 豐�蠍壱�� */ 
.form_wrap select {
	padding: 0 10px 0 15px;
	background: url('arrow.png') no-repeat 100% 50% #fff !important;
	border-radius: 0px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* IE ���� Select box ���危�� ��蟇� */ 
select::-ms-expand { display: none; }

/* IE10 �伎������ input box �� 豢�螳��� 讌��郁鍵 覯��� ��蟇� */
input::-ms-clear { display: none; }

/* placeholder 豐�蠍壱�� */
input::-webkit-input-placeholder {
  color: #aaa;
  font-style: normal;
  font-weight:100;
}
input:-ms-input-placeholder {
  color: #aaa;
  font-style: normal;
  font-weight:100;
}
textarea::-webkit-input-placeholder {
  color: #aaa;
  font-style: normal;
  font-weight:100;
}
textarea:-ms-input-placeholder {
  color: #aaa;
  font-style: normal;
  font-weight:100;
}
input::placeholder { font-weight: 400; color:#aaa; }

.form-set div .form-number{width: 80%;}
.agree-text{margin-left: 20px; font-size: 30px;}
.privacy .privacy_btn{font-size: 30px;}

#footer{margin-bottom: 300px;}



/*230614 */
#header .top_logo a {left:0; width:300px; height:60px}
.main_form p {margin-bottom: 20px;margin-top: 40px}
.form-set div {margin-bottom:0}
.form-set div .form-text,.form-set div .form-number {width: 85%;height: 85px;border-radius: 10px;margin-bottom: 30px;padding: 0 15px;font-size: 30px;font-weight: 400;border: 1px solid #dedede !important;}
.form-set div .form-number {margin-bottom:0}
.btn_submit{padding: 30px 0 ; font-size:40px;box-shadow: 9px 9px 20px 0px rgba(0,0,0,0.15);}
.privacy {width: 85%; left: 50%;position: relative;transform: translateX(-50%);justify-content: flex-start;}

.privacy .privacy_btn {font-size: 20px;border-bottom: 1px solid #908a8a;padding: 4px 2px;color: #908a8a; position: absolute;right: 0; bottom: 0;}

.agree-text {margin-left: 15px;font-size:25px; cursor: pointer; color: #908a8a;}
.bohum_title {padding: 30px}
.bohum_title img {width:200px}
.bohum_title .url, .bohum_title .hdurl, .bohum_title .mobile {font-size:25px; width:200px}
.bohum_text {line-height: 2;font-size: 22px;padding: 30px;}
.pass {color: #908a8a;margin-top: 10px;font-size: 18px;}
#section07 p:first-child{font-size:25px; margin-bottom:10px}
.form-set div input:focus {border: none}
