@import url('reset.css');
@import url('font.css');





#wrap { width: 100%;}

header {width: 100%; position: absolute;  z-index: 99999999;}

.logo { padding: 40px 0 0 40px; }

#header { 
  position: relative;
  width: 100%; 
  height: 50vw !important;
  /* display: flex; 
  justify-content: center; 
  align-items: center; */
  background: #6f1c1c;
}

.header_title {  
  position: absolute;
  top: 50%;
  left: 60%;
  transform: translate(-50%, -50%);
}

.ebook a{ position: absolute; bottom: 5%; left: 2%; color: #b2a16a; font-size: 30px; font-family: 'Pretendard-Bold';}
.ebook a:hover{ color: #fff;}

.toggle {
        display: block;
        position: absolute;
        top: 30px;
        right: 30px;
        font-size: 40px;
        color: #fff;
        cursor: pointer;
}
.closebtn {
        color: #aaa;
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 40px;
        cursor: pointer;
}

.nav_480 {
    position: fixed;
    top: 0;
    right: 0;
    background: #fff;
    width: 0;
    height: 100%;
    z-index: 7777;
    padding: 70px 0 0 0px;
    transition: 0.5s;
    overflow-x: hidden;
    border-left: 1px solid #ccc;
}
.nav_480 a { 
    color: #fff;
    font-size: 18px;
    /* padding: 10px 0 10px 50px; */
    display: block;
}

ul.side_nav { width: 300px; }
ul.side_nav > li { color: #000; padding: 15px 30px; font-size: 18px; }
ul.side_nav > li > a{ color: #63060d; font-size: 18px; font-weight: 500;}
ul.side_nav > li > a:hover{ color: #b2a16a;}

ul.side_nav > li.n_tit { font-size: 20px; font-family: 'Pretendard-Bold'; background: #63060d; color: #fff; text-align: center; margin: 0 20px;}

ul.side_nav_sub {  }
ul.side_nav_sub li a { padding: 0px 0px; color: #000; padding: 7px 0 0 0; font-size: 16px;}



@media(max-width: 1024px){
    .toggle {top: 30px; right: 30px; font-size: 30px;}
    .closebtn {top: 30px; right: 30px; font-size: 30px;}
}
@media(max-width: 480px){
    .toggle {top:20px; right: 20px; font-size: 30px;}
    .closebtn {top: 20px; right: 20px; font-size: 30px;}
}



.main_text{ 
  font-size: 6vw;
  font-family: 'GmarketSansBold';
  color: #4f030a; 
  line-height: 6vw;
}
/* .main_text span { color: #fff; } */

.h_title { color: #a18b78; font-family: 'Pretendard-Bold'; font-size: 2rem; line-height: 2.5rem; padding: 0 0 0 10px;}

@media(max-width: 1600px){
      #header { height: 1024px !important;}
      .main_text{ font-size: 6.5vw; line-height: 7vw;}
    }

@media(max-width: 1280px){
      #header { height: 800px !important;}
      .h_title { font-size: 1.8rem; line-height: 2.5rem; padding: 0 0 0 10px;}
      .header_title {  top: 45%;left: 60%;}
    }

@media(max-width: 1024px){
    .logo img{ width: 18%; }
      #header { height: 768px !important;}
      .main_text{ font-size: 7.5vw; line-height: 8vw;}
      .header_title {  top: 50%;left: 60%;}
    }
@media(max-width: 768px){
    .logo img{ width: 20%; }
    .header_title {  top: 50%; left: 50%; transform: translate(-50%, -50%);}
      #header { height: 1024px !important;}
      .main_text{ font-size: 9vw; line-height: 10vw;}
      .h_title { font-size: 1.5rem; line-height: 2.5rem; padding: 0 0 0 10px;}
    }
@media(max-width: 480px){
      .logo{ padding: 20px 0 0 20px;}
      .logo img{ width: 35%;}
      .main_text{ font-size: 12vw; line-height: 13vw;}
      .h_title {  font-size: 17px; line-height: 24px; padding: 0 0 0 5px;}
      #header { height: 750px !important;}
      .ebook a{ font-size: 24px; bottom: 5%; left: 5%;}
    }





#contents_0 { width: 100%; border-bottom: 1px solid #ccc;}
.list_text { position: absolute; color: #dec5b0; padding: 12% 15%; font-size: 1.1vw; line-height: 2vw; text-align: justify;} 

.list_2_right { float: left; width: 55%; padding: 8% 8% 5% 8%; }
.list_2_left {position: relative; float: left; width: 45%;}

.list_2_left_768 { display: none; }

.menu_title { float: left; width: 35%; color: #ccbeaa; font-family: 'Pretendard-Bold'; font-size: 2vw;}
.menu_box { float: left; width: 65%; color: #ccbeaa; }

h2.b_text { color: #bcab94; font-size: 1.8vw;  margin-bottom: 2vw; font-family: 'Pretendard-Bold';}

.menu_list { width: 100%; float: left; margin-bottom: 1vw;}


.menu a{ 
  float: left;
  color: #63060d; 
  font-size: 1.2vw;
  font-weight: 500;
  line-height: 1.2vw;
}
.menu a span{ font-size:0.9vw; color: #bfa680;}
.menu a:hover span{ color: #000;}
.menu a:hover{ color: #b39266;}

.mb_50 { margin-bottom: 3vw; }


@media(max-width: 1280px){
    .list_text { padding: 12% 15%; font-size: 1.3vw; line-height: 2.2vw;} 
    .menu_title { font-size: 2.5vw;}
    h2.b_text { font-size: 2vw;}
    .menu a{ font-size: 1.3vw; line-height: 1.5vw;}
    .menu a span{ font-size:1.1vw;}
    .list_2_right { padding: 6% 8% 4% 8%;}
} 
@media(max-width: 768px){
    .list_2_right { width: 100%; padding: 8% 8% 5% 8%;}
    .list_2_left {width: 100%; display: none;}
    .list_2_left_768 { display: block; }
    .list_text { padding: 7% 10%; font-size: 2.4vw; line-height: 3.5vw;} 
    .menu_title { font-size: 4vw;}
    h2.b_text { font-size: 3.4vw; margin-bottom: 20px;}
    .menu a{ font-size: 2.3vw; line-height: 2.5vw; margin-bottom: 10px;}
    .menu a span{ font-size:1.8vw;}
    .mb_50 { margin-bottom: 50px; }
}

@media(max-width: 480px){
    .list_2_right { width: 100%; padding: 8% 10%}

    .list_text { padding: 10%; font-size: 14px; line-height: 20px;} 
    .menu_title { float: none; width: 100%; font-size: 20px; padding: 10px 0;}
    .menu_box { float: none; width: 100%; }
    h2.b_text { font-size: 20px; margin-bottom: 20px;}
    .menu a{ font-size: 16px; line-height: 18px; margin-bottom: 10px;}
    .menu a span{ font-size:13px; }
}


#contents_1 { width: 100%; border-bottom: 1px solid #ccc;}
.contents_1_right { position: relative; float: left; width: 40%;}
.contents_1_left { float: left; width: 60%; padding: 9vw 8vw; }

#contents_1_768 { width: 100%; border-bottom: 1px solid #ccc; display: none;}

.img_title_1 {
  position: absolute;
  bottom: 22%;
  left: 10%;
  color: #fff;
  font-family: 'Pretendard-Bold';
  font-size: 4vw;
  line-height: 4vw;
}
.img_title_2 {
  position: absolute;
  bottom: 10%;
  left: 10%;
  color: #fff;
  font-size: 1.3vw;
  line-height: 2vw;
}


#contents_2 { width: 100%; border-bottom: 1px solid #ccc;}
.contents_2_right { float: left; width: 55%; padding: 12vw 8vw;}
.contents_2_left {position: relative; float: left; width: 45%;}


.con_title { font-size: 2.5vw; padding: 0 0 2vw 0; color: #000; font-family: 'Pretendard-Bold';}
.con_title span{ font-size: 3vw; padding: 0 0.5vw; color: #000; font-family: 'Pretendard-Thin';}
.con_text { font-size: 1.2vw; line-height: 2vw; text-align: justify; }


@media(max-width: 1280px){
    .contents_1_left { padding: 7vw 5vw; }
    .contents_2_right { padding: 10vw 5vw;}
    .con_title { font-size: 3vw;}
    .con_text { font-size: 1.5vw; line-height: 2.4vw; }
}
@media(max-width: 768px){
    #contents_1 { display: none;}
    #contents_1_768 { display: block;}
    .contents_1_left { width: 100%; padding: 8%; }
    .contents_1_right { width: 100%;}
    .contents_2_left { width: 100%;}
    .contents_2_right { width: 100%; padding: 8%;}
    .con_title { font-size: 5vw;}
    .con_text { font-size: 2.3vw; line-height: 3.7vw; }
    .img_title_1 {
          bottom: 20%;
          left: 10%;
          font-size: 8.5vw;
          line-height: 8vw;
        }
        .img_title_2 {
          bottom: 10%;
          left: 10%;
          font-size: 3vw;
          line-height: 4.2vw;
        }
}

@media(max-width: 480px){
    .contents_1_left { width: 100%; padding: 15% 10%; }
    .contents_2_right { width: 100%; padding: 15% 10%;}
    .con_title { font-size: 24px;}
    .con_text { font-size: 16px; line-height: 24px; }
}




/* 푸터 */
footer {width: 100%; padding: 80px 5%; }

    .f_logo {  float: left; padding: 5px 20px 0 0;}
    .copy { float: left; }


    @media(max-width: 768px){
      .f_logo { padding: 5px 0px 0 0;  margin-bottom: 0px; }
      .f_logo img {width: 85%; }
      .copy {  line-height: 22px;}
    }


    @media(max-width: 480px){
      footer { padding: 30px 5%; }
      .f_logo {  margin-bottom: 5px; }
      .f_logo img {width: 60%; }
      .copy { font-size: 14px; line-height: 18px;}
    }