@charset "utf-8";
/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap'); */

@media screen and (max-width: 1045px){
  html, body {
    height: 100%;
   }
   html, body, pre,
   h1, h2, h3, h4, h5, h6,
   dl, dt, dd, ul, li, ol,
   th, td, p, blockquote,
   form, fieldset, legend,
   menu, nav, section, hgroup, article, header, aside, footer,
   input, select, textarea, button {
     margin: 0;
     padding: 0;
     box-sizing:border-box;
     font-family: 'Noto Sans KR', sans-serif;
   }
   body,
   h1, h2, h3, h4, h5, h6, table,
   input, select, textarea, a {
     font-size: 12px;
     color: #222;
     font-weight: 300;
     
   }
   h1, h2, h3, h4, h5, h6 {
     font-weight: normal;
   }
   img, fieldset,button {
     border:0 none;
   }
   img {
     vertical-align: top;
   }
   li {
     list-style: none;
   }
   hr, caption, legend {
     display: none;
   }
   a { 
     color: #363636;
     text-decoration: none;
       vertical-align: middle;
     border: none;
     cursor: pointer;
   }
   button {
     overflow: hidden;
     cursor: pointer;
   }
   button span {
     visibility: hidden;
   }
   address, em {
     font-style: normal;
   }
   button, input, select, textarea, a {
     vertical-align: middle;
   }
   select {
     line-height: 18px;
     height: 18px;
   }
   input:focus {
     outline: none;
   }
   table {
     width: 100%;
     border-collapse: collapse;
     border-spacing: 0;
     table-layout: fixed;
     word-wrap: break-word;
     word-break: keep-all;
   }
   
   select,
   input[type="text"],
   input[type="file"]{max-width:100%}
   
   input::-webkit-outer-spin-button,
   input::-webkit-inner-spin-button {
     -webkit-appearance: none;
   }
   
   
   /* common */
   
   #wrap{width:100%; height:100%; max-width:640px; margin: 0 auto;}
   
   #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 !important;
     background-size: cover !important;
     text-indent: -9999px;
     background-size: contain;
     width: 232px;
     height: 22px;
     top: 20px;
     left: 20px;
     font-size: 0;
   }
   
   
   /* section01 */
   #section01 {
     background: url(../img/bg.jpg) no-repeat top;
     height: 680px;
   }
   
   .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: 30px;
     font-weight: 700;
     line-height: 1.2;
     margin-bottom: 15px;
   }
   
   .main_form span {
     font-size: 16px;
     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: 30px 0;
   }
   
   .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(../img/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: #4E40C9;
     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: #4E40C9;
     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(../img/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: #4E40C9;
     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: #4E40C9;
     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,.bohum_title .hdurl,.bohum_title .mobile {
     display: block;
     width: 140px;
     margin: 0 auto 10px;
     padding: 10px 0;
     background-color: #4E40C9;
     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;
   }
   
   .summary {  
     font-size: 12px;
     line-height: 26px;
   }
   
   .pass {
     color: #908a8a;
     margin-top: 10px;
     font-size: 12px;
   }
   
   .highlight01 {
     color: #4E40C9;
   }
   
   /* 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: 11px;
     line-height: 18px;
   }
   
   /* footer */
   #footer {
     background-color: #404040;
     padding: 20px 20px 200px;
   }
   
   #footer p {
     color: #fff;
     font-size: 11px;
     line-height: 18px;
   }
   
   #footer p:first-child {
     font-size: 14px;
     font-weight: 400;
     margin-bottom: 20px;
   }
   
   
   /* floating */
   
   #floatingbanner {
     position: fixed;
     bottom: 0;
     z-index: 1111;
     width: 100%;
   }
   
   #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 p:first-child{
     text-align: center;
     font-weight: 700;
     font-size: 20px;
     color: #3578e8;
   }
   
   .reward p:nth-child(2){
     text-align: center;
     font-weight: 700;
     font-size: 24px;
     margin: 0 0 20px;
   }
   
   .reward span {
     width: 95%;
     display: block;
     font-size: 14px;
     line-height: 22px;
     margin: 20px auto 0;
   }
   
   .reward img {  
     display: block;
     text-align: center;
     margin: 0 auto;
   }
   
   
   .naver_btn {
     margin: 30px 0 0;
   }
   
   .naver_btn span {
     color: #222;
     display:block;
     font-size: 16px;
     margin-bottom: 10px;
   }
   
   .naver_btn button {
       background-size: contain;
       width: 220px;
       background-image: url(../img/btnG.png);
       height: 42px;
       border-radius: 5px;
       background-repeat: no-repeat;
       background-color: #03c75a;
       color: #fff;
       font-size: 16px;
       text-align: center;
       font-weight: 700;
   }
}