/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700|Noto+Sans+KR:400,700|Noto+Sans:400,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700');
@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700');
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

html, body {
  /* padding-top: 3rem;
  padding-bottom: 3rem; */
  color: #5a5a5a;
  font-family: 'Noto Sans KR', 'Noto Sans', 'Nanum Gothic', sans-serif;
}

#myCarousel { margin-top: 92px; }


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  /* margin-bottom: 4rem; */
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
/*
  bottom: 3rem;
  z-index: 10;
*/
  width: 100%;
  /*max-width: 1268px;*/
  margin-left: 0px;
  position: absolute;
  top: 22%;
  left: 40%;
  z-index: 50;
  color: rgba(67,70,88,1);
  text-align: left;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  /* height: 32rem; */
  background-color: #777;
}
.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  /* height: 32rem; */
}


/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing h2 {
  font-weight: 400;
}
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 2rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.05rem;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}

@media (max-width:576px) {

  #conSession { margin-left: -206px !important; margin-top: -125px !important; }
  #conSession .div-right { padding: 20px 30px !important; }

}


@media (max-width:767px) {

  .header_info_1 { display: none !important; }
  .header_area .header_gnb_1 li { border-right: none !important; }
  .header_gnb_1 { display: none !important; }

  .main-pc-title { display: none; }
  .main-mobile-title { display: block; }

  #myCarousel .carousel-item {
    height: 20rem;
  }
  
  .roll-img-1, .roll-img-2 {
    height: 20rem !important;
    background-position-x: -60px;
  }

  .about {
   /* padding: 0 15px 0 15px !important; */
  }
  .about ul {
    margin-top: 50px !important;
  }
  .about ul li {
    padding: 0px 0 40px 120px !important;
  }
  .about ul li dl dt {
    font-size: 20px !important;
  }
  .about h3 {
    font-size: 1.8rem !important;
  }
  .about p {
    font-size: .9rem !important;
  }

  .counters .count_nums {
    font-size: 1.8rem !important;
    line-height: 2.5rem !important;
  }

  #bg-counters h3 {
    font-size: 1.1rem !important;    
  }

  #custom_area h3 {
    font-size: 1.8rem !important;
  }

  #custom_area .customtelarea {
    margin-top: 20px !important;
  }

  #custom_area .rightarea {
    margin-top: 20px !important;
  }

  #whatwedo h1 span {
    font-size: 36px !important;
  }

  #cards h1 span {
    font-size: 36px !important;
  }

  #custom_area h1 span {
    font-size: 36px !important;
  }

  /* company */
  #company { height: 60px !important; }
  #company ul li a { line-height: 60px !important; padding: 0px 16px !important; font-size: 16px !important; }
  #greetings { padding: 3.5rem 0 0 0 !important; }
  #greetings .sub_title2 { margin-bottom: 2.5rem !important; }
  #greetings .sub_title2 h2 { font-size: 26px !important; }
  #greetings .sub_title2 p { font-size: 15px !important; }
  #greetings .sub_title2 img { min-height: 8rem !important; }

  #slogan { padding: 3.5rem 15px !important; }
  #slogan .sub_title2 h2 { font-size: 26px !important; }
  #slogan .sub_title2 { margin-bottom: 2.5rem !important; }

  #philosophy { padding: 3.5rem 15px !important; }
  #philosophy .sub_title2 h2 { font-size: 23px !important; }
  #philosophy .sub_title2 { margin-bottom: 2.5rem !important; }
  #philosophy .sub_title2 p { font-size: 15px !important; }

  #map { padding: 3.5rem 15px !important; }
  #map .sub_title2 h2 { font-size: 26px !important; }
  #map .sub_title2 { margin-bottom: 2.5rem !important; }
  #map .sub_title2 p { font-size: 15px !important; }
  #map .maparea { width: 100%; padding: 0 15px 3rem 15px !important; }


  /* business */
  #business { height: 60px !important; }
  #business ul li a { line-height: 60px !important; padding: 0px 4px !important; font-size: 16px !important; } 

  #joininfo .sub_title h2 { font-size: 28px !important; }
  #member .sub_title h2 { font-size: 28px !important; }
  #offer .sub_title h2 { font-size: 28px !important; }

  /* information */
  #information { height: 60px !important; }
  #information ul li a { line-height: 60px !important; padding: 0px 7px !important; font-size: 16px !important; }

  #privacy .sub_title { margin-bottom: 2.5rem !important; }
  #privacy .sub_title h2 { font-size: 28px !important; }

  #emailinfo .email_contain { margin-top: 0px !important; }

  #sponsor .sub_title { margin-bottom: 2.5rem !important; }
  #sponsor .sub_title h2 { font-size: 28px !important; }
  #sponsor .bonusAverage { overflow-y: scroll; overflow-x: scroll; white-space: nowrap; }

  /* customer */
  #customer { height: 60px !important; }
  #customer ul li a { line-height: 60px !important; /* padding: 0px 7px !important; */ font-size: 16px !important; } 

  .sub_visual.vis41 { background-position: 55% 0%; }
  .sub_visual.vis51 { background-position: 60% 0%; }
  .sub_visual.vis61 { background-position: 20% 20%; }

  #content { padding: 5px 5px !important; }
  .breadcrumbs { display: none; }
  .sub_title { display: none; }
  
  .board-search-wrap .search-wrap .search-input { float: none; width: 100%; padding-right: 0; line-height: 3rem; }
  .board-search-wrap .sel { width: 100% !important; max-width: 100%; }
  .board-search-wrap .search-wrap .search-btn { float: none; width: 100%; padding-right: 0; }
  .board-search-wrap .search-wrap .search-input + .search-btn { padding-left: 0px !important; }
  .board-search-wrap .search-wrap .search-btn .tbl-hd-label { width: 100% !important; }
  .board-search-wrap input[type=text] { width: 100% !important; font-size: 14px; /* margin-top: 10px; */ margin-left: 0px !important; }
  .board-search-wrap input[type=button] { width: 100% !important; margin-top: 10px; }

  #only {/* padding:20px 15px 50px 15px !important; */}

  .tbl01 .only-pc-view {display:none !important;}
  .tbl01 .number {display:none !important;}
  .tbl01 .sub {width:100%; font-size:16px !important;}
  .tbl01 .date {display:none !important;}
  .tbl01 .info {height:4rem !important;}
  .tbl01 .only_mobile {display:block !important; padding-top:6px;}

  #mobile-no {display:block !important;}

  #nTitel {display:block; width:100% !important;}
  .date-hit {float:left !important; font-size: 0.8rem; }

  /* product */
  #prodlist { height: 60px !important; }
  #prodlist ul li a { line-height: 60px !important; padding: 0px 17px !important; font-size: 16px !important; } 


  .membership h2 { font-size: 2.0rem !important; }


  .breadcrumbs { display: none; }
  .sub_title { display: none; }

  .txt7 {font-size:20px !important;}
  section#prodinfo { padding: 0rem 1.5rem !important; }
  .ordertxt li:nth-child(1) { display: none !important; }
  
  /* product order */
  .table-info-1 .tr {width:100% !important; display:block !important;}
  .table-info-1 .th {width:100% !important; display:block !important; padding-left:15px !important;}
  .table-info-1 .td {width:100% !important; display:block !important;}

  .tb05 .table {width:100%; border-top:1px solid #888;}
  .tb05 .tr {width:100%; border-bottom:1px solid #ebebeb; }
  .tb05 .th {padding:10px; background:#f7f7f7; color:#666; font-weight:normal; text-align:left; }
  .tb05 .td {padding:10px; color:#666; text-align:left; }
  .tb05 .td .total {font-family:'NanumBarunGothicBold'; color:#cd3723; font-size:18px;}
  .tb05 .td p, .tb05 .td span {color:#999; font-size:14px; margin:0 0 5px 0 !important;}
  .tb05 input[type="text"] { background-color: #fff; border: 1px solid #b3b3b3; color: #5a5a5a; font-size: 16px !important; width:200px !important; height:40px !important;}
  .tb05 .td input {padding:5px !important; border-color:#e9e9e9;}
  .tb05 .td .hp input {width:80px !important;}
  .tb05 .td select {color:#5a5a5a !important; padding:0 !important; width:100px;}
  .tb05 .td select{margin:0; padding:5px; font-size:16px !important; vertical-align:middle;}
  .tb05 .td select{border:1px solid #e9e9e9; padding:0 0 0 5px; height:40px !important;}
  .tb05 .td select option{padding:2px 3px;}
  .tb05 .td .email input {width:90% !important; margin:7px 0 !important;}
  .tb05 .td .email select {width:90% !important; margin:4px 0 !important;}
  .tb05 .td .hp .select {width:90% !important;}
  .tb05 .td .address .postNo {width:100px !important;}
  .tb05 .td .address .addr_1 {width:90% !important;}
  .tb05 .td .address .addr_2 {width:90% !important;}
  .tb05 .td .address img {width:100px !important;}
  .tb05 .td textarea {border:1px solid #e9e9e9; color:#5a5a5a !important; padding:5px !important; font-size:14px; }
  .tb05 .td .radio {width:30px;}
  #table01 {margin-top:-20px !important;}
  #table01 td {font-size:14px !important;}
  .tb05 .p13 {margin:30px 0 10px 0 !important;}
  .tb05 .order_box2 {padding:0 0 20px 0 !important;}
  .tb05 .depositor_name {height:50px !important;}
  .tb05 .hp .itext {width:50px; text-align:center; height:27px; font-size:16px; margin:0px; }

  .joinBox2 {height:153px !important; padding:5px !important;}
  .joinBox2 .joinBox2-sub {width:auto !important; height:140px !important; padding:5px; overflow-x:hidden; overflow-Y:scroll; border:1px solid #e5e5e5; background-color:#FFF; font-size:14px;}
  .joinBox2 .agreeCheck {float:left;  font-size:14px; margin-top:15px; }
  .joinBox2 .agreeCheck .checkbox {margin-right:10px; }

  .complete_bg {width:100% !important;}
  .complete li {font-size:14px !important;}

  /* ȸ¿ø°¡ÀÔ */
  #hp-certifi {height: auto !important;}

  .join_step ul li:nth-child(2) {border-bottom:1px solid #ddd !important; border-right:0px solid #ddd !important;}
  .join_step ul li {padding:10px 10px 5px 100px !important;background-size:10% !important;}
  .join_step ul li p {font-size:20px !important;}

  .join_text { font-size:20px !important; }
  .conWrap h4 { font-size:20px !important; }

  #mbrregi .tb01 .tr {width:100% !important; display:block !important;}
  #mbrregi .tb01 .th {width:100% !important; display:block !important; padding-left:8px !important;}
  #mbrregi .tb01 .td {width:100% !important; display:block !important;}

  #mbrregi .conbox { padding: 40px 20px 60px 20px !important; }

  #handtel .input_txt, #telno .input_txt {width:100px !important;}
  #handtel #sltdiv-1, #telno #sltdiv-2 {width:100px !important;}

  #ADD1 {width:340px !important;}
  #ADD2 {width:340px !important;}

  #email .input_txt {width:100px !important;}
  #email #sltdiv-3 {width:100px !important;}

  #SearchCenter {width:180px !important;}

  #GNUM {width:340px !important;}

  .header_gnb .welcome {display: none !important;}


  .modal { top: 50px; }
  #myModal { padding-right:0px; !important; }
  #myModal .modal-dialog { margin: 2.0rem !important; }
  #myModal .modal-header h4 { font-size: 1.0rem !important; }
  #myModal .modal-header { padding: 1.2rem !important; }
  #myModal .modal-body .modal-area { padding: 0.5em 1em 0 1em !important; }
  #myModal .modal-body .modal-area p { padding: 0.5em 1.5em 0 1.5em; font-size: 1.0rem !important; }
  #myModal .modal-body .modal-area .modal-left i { font-size: 5em !important; }
  #myModal .modal-body .modal-area .modal-left { width: 9em !important; height: 9em !important; padding: 1.9em 3.1em !important; }
  #myModal .modal-body .modal-area .modal-right i { font-size: 6em !important; }
  #myModal .modal-body .modal-area .modal-right { width: 9em !important; height: 9em !important; padding: 1.4em 1.9em !important; }
  #myModal .modal-footer { padding: 0 1rem 1rem 1rem !important; }

  /* footer */
  .pc-view { display: none; }

  .footer-sub-title li { width: 50%; margin-right: 0px !important; }

  .links p { width: 32%; float: left; }
  .links img { width: 95%; }
  .links p:nth-child(2) { margin-left: 3px; }
  .links p:nth-child(3) { margin:0 2px; }

  .contact p { margin-bottom: 0.5rem; }

}

@media (min-width: 768px) and (max-width: 992px) {

  .main-pc-title { display: none; }
  .main-mobile-title { display: block !important; }

  .roll-img-1, .roll-img-2 {
    height: 33rem !important;
  }

  .carousel-caption {
    top: 55%;
    left: 0;
    text-align: center;
  }

  .main-mobile-title h1 br {
    content: " ";
    display: none;
  }

  .main-mobile-title h1 {
      font-size: 3.5rem !important;
  }

  .main-mobile-title p {
      font-size: 1.6rem !important;
  }

  .about ul li dl dt {
    font-size: 20px !important;
  }

  #custom_area .rightarea {
    margin-bottom: 20px;
  }

  #whatwedo h1 span {
    font-size: 38px !important;
  }

  #cards h1 span {
    font-size: 38px !important;
  }

  #custom_area h1 span {
    font-size: 38px !important;
  }

  /* company */
  #company { height: 60px !important; }
  #company ul li a { line-height: 60px !important; padding: 0px 20px !important; font-size: 20px !important; }
  #greetings { padding: 3.5rem 15px !important; }
  #greetings .sub_title2 { margin-bottom: 2.5rem !important; }
  #greetings .sub_title2 h2 { font-size: 30px !important; }

  #slogan { padding: 3.5rem 15px !important; }
  #slogan .sub_title2 h2 { font-size: 30px !important; }
  #slogan .sub_title2 { margin-bottom: 2.5rem !important; }

  #philosophy { padding: 3.5rem 15px !important; }
  #philosophy .sub_title2 h2 { font-size: 30px !important; }
  #philosophy .sub_title2 { margin-bottom: 2.5rem !important; }

  #map { padding: 3.5rem 15px !important; }
  #map .sub_title2 h2 { font-size: 30px !important; }
  #map .sub_title2 { margin-bottom: 2.5rem !important; }
  #map .maparea { width: 100%; padding: 0 15px !important; }

  /* business */
  #business { height: 60px !important; }
  #business ul li a { line-height: 60px !important; padding: 0px 20px !important; font-size: 18px !important; }

  #joininfo .sub_title h2 { font-size: 30px !important; }
  #member .sub_title h2 { font-size: 30px !important; }
  #offer .sub_title h2 { font-size: 30px !important; }

  /* information */
  #information { height: 60px !important; }
  #information ul li a { line-height: 60px !important; padding: 0px 20px !important; font-size: 18px !important; }

  #privacy .sub_title { margin-bottom: 3rem !important; }
  #privacy .sub_title h2 { font-size: 30px !important; }
  #sponsor .sub_title { margin-bottom: 3rem !important; }
  #sponsor .sub_title h2 { font-size: 30px !important; }


  /* Product Cart */
  section.prodcart { padding: 0 !important; }


}

@media (min-width: 992px) {

  #mobile-nav {
    display: none;
  }

  section.prodcart .table-pc { display: block; }
  section.prodcart .table-mobile { display: none; }

  .date-hit { /* float:right; */}
}

@media (max-width: 991px) {

  header { height: 80px !important; } 
  #myCarousel { margin-top: 80px !important; }
  article { margin-top: 80px !important; }

  #pc-nav { display: none; }
  #header { display: none; }

  .sub_visual { height: 260px !important; }
  .sub_visual h2 { font-size: 3.0rem !important; line-height: 0px !important; font-weight: 600 !important; padding-top: 7.8rem !important; }
  .sub_visual p { line-height: 197px !important; padding-top: 4rem !important; }

  .sub_visual.vis31 h2 { font-size: 40px !important; font-weight: 600 !important; padding-top: 0rem !important; }
  .sub_visual.vis31 p { padding-top: 11rem !important; }

  .sub_visual.vis41 h2 { font-size: 40px !important; font-weight: 600 !important; padding-top: 0rem !important; }
  .sub_visual.vis41 p { padding-top: 11rem !important; }

  .sub_visual.vis51 h2 { font-size: 40px !important; font-weight: 600 !important; padding-top: 0rem !important; }
  .sub_visual.vis51 p { padding-top: 4rem !important; }

  .sub_visual.vis61 h2 { font-size: 40px !important; font-weight: 600 !important; padding-top: 0rem !important; }
  .sub_visual.vis61 p { padding-top: 11rem !important; }

  section.prodcart .table-pc { display: none; }
  section.prodcart .table-mobile { display: block; }
  section.prodcart .tb03 .td { border-bottom: none !important; }

  #conSession {width: auto !important; margin-top: -125px !important; }
  #conSession .div-right { padding: 20px 30px !important; }

}


@media (max-width:991px) {
  .estbox { display: none !important; }
}
@media (max-width: 768px) {
  .sub_visual h2 { font-size: 2.2rem !important; }

  .new-roll-img-1 { height: 20rem !important; background-position-x: center; }
  .new-roll-img-2 { height: 20rem !important; background-position-x: center; }
  .new-roll-img-3 { height: 20rem !important; background-position-x: center; }

  .estarea, .estarea > .container, .estarea .estrow { height: 23rem !important; }

  .mntitle { top: 26% !important; text-align: center;}
  .mntxt-0 { font-size: 0.9rem !important; text-align: center;}

 /* .mntxt-1 { font-size: 2.0rem !important; text-align: center; } */
 /*  .mntxt-2 { font-size: 0.9rem !important; text-align: center; }  */

  .mntxt-1 { 
    font-size: 1.6rem !important; 
    line-height: 2.0rem !important; 
    padding: 20px 5px; 
  } 
  
  .mobile-show { 
    display: block !important;
  }

  .pc-show { 
    display: none !important;
  }

  

  .mntxt-2 {
      display: none !important;
  }

}
@media (min-width: 500px) and (max-width: 575px) {
  .sub_visual h2 { font-size: 2.4rem !important; }

  .new-roll-img-1 { height: 23rem !important; background-position-x: center; }
  .new-roll-img-2 { height: 23rem !important; background-position-x: center; }
  .new-roll-img-3 { height: 23rem !important; background-position-x: center; }

  .estarea, .estarea > .container, .estarea .estrow { height: 23rem !important; }

  .mntitle { top: 24% !important; text-align: center;}
  .mntxt-0 { font-size: 0.9rem !important; text-align: center;}
  .mntxt-1 { font-size: 1.8rem !important; text-align: center; }
  .mntxt-2 { font-size: 1.0rem !important; text-align: center; }
}
@media (min-width: 576px) and (max-width: 767px) {
  .sub_visual h2 { font-size: 2.6rem !important; }

  .new-roll-img-1 { height: 23rem !important; background-position-x: center; }
  .new-roll-img-2 { height: 23rem !important; background-position-x: center; }
  .new-roll-img-3 { height: 23rem !important; background-position-x: center; }

  .estarea, .estarea > .container, .estarea .estrow { height: 23rem !important; }

  .mntitle { top: 24% !important; text-align: center; }
  .mntxt-0 { font-size: 0.9rem !important; text-align: center;}
  .mntxt-1 { font-size: 1.8rem !important; text-align: center;}
  .mntxt-2 { text-align: center; }

  .mobile-show { 
    display: block !important;
  }

  .pc-show { 
    display: none !important;
  }  
  
}
@media (min-width: 768px) and (max-width: 991px) {
  #myCarousel .carousel-item { height: 33rem !important; }
  .new-roll-img-1 { height: 33rem !important; background-position-x: center; }
  .new-roll-img-2 { height: 33rem !important; background-position-x: center; }
  .new-roll-img-3 { height: 33rem !important; background-position-x: center; }

  .estarea, .estarea > .container, .estarea .estrow { height: 33rem !important; }
  .mntitle { top: 26% !important; text-align: center; }
  .mntxt-0 { font-size: 1.2rem !important; text-align: center;}
  .mntxt-1 { font-size: 2.0rem !important; text-align: center;}
  .mntxt-2 { font-size: 1.0rem !important; text-align: center; }  
  
  .mobile-show { 
    display: block !important;
  }

  .pc-show { 
    display: none !important;
  }  
  

}
@media (min-width: 992px) and (max-width: 1200px) {
  .mntitle { top: 22% !important; }
  .mntitle .mntxt-1 { font-size: 2.5rem !important; }
  .mntitle .mntxt-2 { font-size: 0.95rem !important; }
  
  .mobile-show { 
    display: block !important;
  }

  .pc-show { 
    display: none !important;
  }  
  
  .estbox { height: 30.5rem !important; bottom: 137px !important; padding: 25px !important; }
}



/* PRODUCT */
@media (max-width:991px) {
  .product-grid7 { margin-bottom:30px; }
}
@media (max-width: 499px) {
  .product-grid7 .product-image7 { height:300px; }
  .masttxt-1 { font-size: 2.5rem; }
  .masttxt-2 { font-size: 0.9rem; }
}
@media (min-width: 500px) and (max-width: 575px) {
  .product-grid7 .product-image7 { height:400px; }
}
@media (min-width: 576px) and (max-width: 767px) {
  .product-grid7 .product-image7 { height:200px; }
  .product-grid7 .title { font-size:0.9rem; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .product-grid7 .product-image7 { height:260px; }
}
@media (min-width: 992px) and (max-width: 1200px) {
  .product-grid7 .product-image7 { height:400px; }
}