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


html,body{ width:100%; height:100%;}
.box{ width:100%; height:100%; position:relative; }
.box:nth-child(1) {background:rgba(205, 20, 20, 0)}
.box:nth-child(2) {background:url('../images/bg_1-1.jpg')no-repeat fixed; background-size: cover; }
/* .box:nth-child(2) {background:url('../images/bg_1.jpg')no-repeat fixed; background-size: cover; } */
/* .box:nth-child(2) {background:#8b0129; } */
.box:nth-child(3) {background:url('../images/bg_2.jpg')no-repeat fixed; background-size: cover;}
.box:nth-child(4) {background:url('../images/bg_3.jpg')no-repeat fixed; background-size: cover;}
.box:nth-child(5) {background:url('../images/bg_4.jpg')no-repeat fixed; background-size: cover;}


#wrap { width: 100%; height: 100%;}
header { position: absolute; top: 0; background: rgba(255, 255, 255, 0); z-index: 9999999;}
header h1.logo { float: left; padding: 25px 0 0 50px; }
header h1.logo img{ max-width: 100%; height: auto;}

.main_copy { 
  position: absolute;
  top: 47%;
  right: 13%;
  /* transform: translate(-50%,-50%); */
  /* color: rgba(255, 255, 255, 0.7); */
  color: #D7C9B1;
  z-index: 9998;
  font-size: 2.5vw;
  font-family: 'ChosunSm';
  letter-spacing: 10px;
 }

 .main_copy_480 { 
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: #D7C9B1;
  z-index: 9999;
  font-size: 5.6vw;
  font-family: 'ChosunSm';
  width: 100%;
  text-align: center;
 }

 .main_sub_title { 
  position: absolute;
  bottom: 3%;
  right: 3%;
  color: #fff;
  font-family: 'GmarketSansBold';
  font-size: 17px;
  opacity: 0.5;
  line-height: 24px;
  text-shadow: 0px 0px 20px #000;
  }
  .main_sub_title span { font-family: 'ChosunSm'; font-size: 34px; letter-spacing: -1.5px;}


 @media(max-width: 1200px) {
  .main_sub_title { font-size: 18px; }
  .main_sub_title span{ font-size: 30px; }
}

  @media(max-width: 768px) {
    header h1.logo { padding: 25px 0 0 20px; }
    header h1.logo img{ width: 70%;}
    .main_copy { font-size: 3.5vw; right: 7%; letter-spacing: 0px;} 
    .main_sub_title { font-size: 14px; line-height: 18px;}
    .main_sub_title span{ font-size: 24px; }
  }

  @media(max-width: 480px) {
    header { height: 50px;}
    header h1.logo { padding: 5px 0 0 15px;}
    header h1.logo img{ width: 60%;}
    .fixed-header {height:50px; }
    .box{ display: none; }
    .main_copy { display: none; }
    .main_copy_480 { 
      display: block;
      position: absolute;
      top: 60%;
      left: 50%;
      transform: translate(-50%,-50%);
      /* color: rgba(255, 255, 255, 0.7); */
      color: #D7C9B1;
      z-index: 9998;
      font-size: 5.5vw;
      font-family: 'ChosunSm';
      letter-spacing: 0px;
      width: 100%;
      text-align: center;
     }
  }


  /* 메뉴모달 */

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding: 60px 0 0 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: rgba(0,0,0,0.5); 
    transition: 0.5s;
    z-index: 9999999;
  }
  .modal::-webkit-scrollbar {
    display: none; /* 크롬, 사파리, 오페라, 엣지 */
    width: 0 !important;
}
  
  /* Modal Content */
  .modal_wrap {
    position: relative;
    margin: auto;
    width: 95%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.2);
    animation-name: animatetop;
    animation-duration: 0.4s;
    overflow-y: auto;
  }
  
  @media(max-width: 480px) {
    .modal { padding: 0; }
    .modal_wrap { width: 100%; border: 0px solid #888;}
  }
  @keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
  }


  
  /* The Close Button */
  .close {
    position: fixed;
    top: 5px;
    right: 5px;
    color: #fff;
    font-size: 45px;
    z-index: 889988;
    background: #8b0129;
    padding:18px 25px;
  }
  .close:hover, .close:focus { color: #fff; text-decoration: none; cursor: pointer; background: #000;}
  
  .menu { 
    position: fixed; 
    top: 5px; 
    right: 5px; 
    font-size: 40px; 
    cursor: pointer; 
    font-weight: 500; 
    color: #D7C9B1;
    background: #8b0129;
    padding:18px 22px;
    z-index: 999888;
  }
  .menu:hover { color: #fff; background: #000;}
  
  .nav_wrap { display: flex; background: rgba(0, 0, 0, 0.2);}
  .nav_wrap::after { display: table; content: ''; clear: both;}
  
  nav {  width: 25%; padding:1.2% 2%;}
  nav ul.gnb{ margin: 0px 0 20px 0; }
  nav ul.gnb li { line-height: 20px;}
  nav ul.gnb li span { color: #d46a0c;}
  nav ul.gnb li a { font-size: 15px;}
  
  
  .nav_btitle { 
    font-size: 1vw; 
    color: #fff; 
    font-family: 'sometime_L';
    background: #8b0129;
    width: 100%;
    text-align: center;
    padding: 0.3vw 0;
    margin-bottom: 20px;
  }
  .nav_btitle span { color: burlywood; font-family: 'ChosunSm';}
  
  .nav_stitle { font-size: 16px;  padding: 0 0 3px 0;}
  .nav_stitle a { font-size: 16px; color: #000; font-weight: 500; }
  .nav_stitle a:hover { color: #8b0129; }
  
  .p_bottom_10 { padding-bottom: 10px; }
  .p_bottom_20 { padding-bottom: 20px; }
  .p_bottom_30 { padding-bottom: 30px; }
  .p_bottom { padding-bottom: 30px; }
  
  
  .nav_bg_1{ position: relative; background: #ebe0cf; }
  .nav_bg_2{ position: relative; background: #cfc8bd; }

  @media(max-width: 768px) {
    .nav_wrap { display: block; }
    nav { width: 100%; padding:5%;}
    nav ul.gnb{ margin: 0px 10px 30px 10px; }
    .nav_stitle { padding: 0 10px 5px 10px;}
    .nav_btitle { font-size: 18px; padding: 7px 0; margin-bottom: 20px;}
  }
  
  @media(max-width: 480px) {
    .nav_btitle { font-size: 18px; text-align: left; padding: 7px 20px;}
    nav ul.gnb li a { font-size: 16px; }
    .close { top: 10px; right: 10px; font-size: 30px; padding:7px 11px;}
    .menu { top: 10px; right: 10px; font-size: 30px; padding:7px 9px;}
  }




/* 모바일버젼 */

#box_480 { display: none; }

@media(max-width: 480px) {
      #box_480 { display: block; position: relative;}
      #box_480 img { max-width: 100%; height: auto;}
      .m480_box_1 { width: 100%;}
      .m480_box_2 { width: 100%; }
      .mo_1 { width: 100%; position: relative;}
      .mo_1 img { width: 100%; max-width: 100%; height: auto;}
      h2.intro_title_480 { 
        position: absolute;
        bottom: -5%;
        left: 2%;
        font-size: 2.5rem; 
        padding: 0 0 2.5rem 1rem; 
        color: burlywood;
        z-index: 5555;
        font-family: 'ChosunSm';
      }
      h2.intro_title_480 span {  font-size: 1.2rem; color: #fff; font-family: 'sometime_L';}
      .main_480_1 {  background: #8b0129; padding:11% 5%;}
      .main_480_2 {position: relative;  width: 100%; background: rgb(228, 215, 198); padding:50px 5%;  }
      .main_480_2-1 {position: relative;  width: 100%; background: rgb(228, 215, 198); padding:50px 5% 0 5%;  }
      .m_cont_480 { float: left; width: 25%; text-align: center; color: #9f9d8a; }
      .m_cont_text{ font-size: 16px; padding-top: 10px;}
      .tit_wrap_480 {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        background: #7d0026;
        z-index: 999;
        display: block;
        padding: 9vw;
        border: 1px solid #D7C9B1;
      }
      .mt_tit_480 { font-size: 8.8vw; line-height: 9.5vw; font-family: 'sometime_B'; color: #D7C9B1;}
      .mt_tit_480 span.mt_1{ font-size: 11vw; line-height: 11vw;}
      .mt_tit_480 span.mt_2{ font-size: 8.8vw; }

      .mt_year_480 {  float: left; font-size: 14vw; line-height: 8vw; font-family: 'sometime_B'; padding: 2.2vw 0 1.5vw 0; color: burlywood;}
}


/* 섹션 */

.tit_wrap {
 -webkit-position: absolute;
 -webkit-top: 45%;
 -webkit-left: 50%;
 -webkit-transform: translate(-50%, -50%);
 -webkit-color: #fff;
 -webkit-z-index: 999;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    z-index: 999;
}
.mt_tit {
  -webkit-float: left; 
  -webkit-font-size: 4vw; 
  -webkit-line-height: 4vw; 
  -webkit-font-family: 'sometime_B'; 
  -webkit-color: #D7C9B1;
  float: left; 
  font-size: 4vw; 
  line-height: 4vw; 
  font-family: 'sometime_B'; 
  color: #D7C9B1;
}
.mt_tit span.mt_1{ 
  -webkit-font-size: 5.05vw; 
  -webkit-line-height: 5vw;
  font-size: 5.05vw; 
  line-height: 5vw;
}
.mt_tit span.mt_2{ 
  -webkit-font-size: 4vw; 
  font-size: 4vw; 
}


.mt_year { 
  -webkit-float: left; 
  -webkit-font-size: 6.3vw; 
  -webkit-line-height: 6vw; 
  -webkit-font-family: 'sometime_B';
  -webkit-color: burlywood;
  float: left; 
  font-size: 6.3vw; 
  line-height: 6vw; 
  font-family: 'sometime_B';
  color: burlywood;
}



.main_stext { 
  position: absolute; 
  top: 50%; 
  right: 30%; 
  transform: translate(-10%, -50%);
  color: #fff;
  font-size: 3vw;
  font-family: 'ChosunSm';
  opacity: 0.5;
}


#contents_bg { position: relative; width: 40%; height: 100%; background: rgba(0,0,0,0.1); }
#contents_bg_2 { width: 40%; height: 100%; background: rgba(251, 243, 232, 0.8); }

  
  /* 한자포함 서브타이틀 */

  h2.intro_title { font-size: 4vw; padding: 3vw 0 0 2vw; font-family: 'ChosunSm'; color: #8b0129; line-height: 4.5vw;}
  h2.intro_title span {  font-size: 2vw; vertical-align: bottom; color: #8b0129; font-family: 'sometime_L';} 

  
  @media(max-width: 768px){
    h2.intro_title { font-size: 5.5vw; padding: 4vw 0 0 3vw;}
    h2.intro_title span {  font-size: 3vw;}
}


  /* 메인 아이콘 */
  
  .m_list_1 { position: absolute; bottom: 5%; width: 100%; padding: 0 2%;}
  .m_cont { float: left; width: 25%; text-align: center; color: #9f9d8a; background: rgba(0, 0, 0, 0); padding: 30px 0;}
  .m_cont:hover { cursor: pointer; color: #fff; font-size: 3.1vw; transform: translateY(-10%); transition: all 0.5s ease;}
  .m_cont_icon i { font-size: 2.5vw;}
  .m_cont_text{ font-size: 20px; padding-top: 20px;}

  .m_cont2 { float: left; width: 25%; text-align: center; color: #866a51; background: rgba(0, 0, 0, 0); padding: 30px 0 50px 0;}
  .m_cont2:hover { cursor: pointer; color: #8b0129; font-size: 3.1vw; transform: translateY(-10%); transition: all 0.5s ease;}
  .m_cont2_icon i { font-size: 3.3rem; }
  .m_cont2_text{ font-size: 1.1vw; padding-top: 20px; }
  .m_cont2_text:hover{ color: #000;}
  
  .m_list_1_480 { display: none; }
  
  .right_line_1 { border-right: 1px solid #a18b78; }
  .right_line_2 { border-right: 1px solid #a18b78; }


  
  @media(max-width: 1220px){
    .m_list_1 { padding: 0 2%;}
    .m_cont_icon i { font-size: 3.5vw;}
    .m_cont_text{ font-size: 18px; padding-top: 10px;}
    .m_cont2 { width: 50%; padding: 30px 0 0px 0;}
    .m_cont2_icon i { font-size: 3rem;}
    .m_cont2_text{ font-size: 20px; padding-top: 10px;}
    .right_line_2 { border-right: 0px solid #a18b78; }
  }
  @media(max-width: 1024px){
      .m_cont { width: 50%; padding: 30px 0 0 0;}
      .m_cont_icon i { font-size: 6vw;}
      .m_cont_text{ font-size: 18px; padding-top: 10px;}
      .m_cont2_icon i { font-size: 2.5rem;}
      .m_cont2_text{ font-size: 18px; padding-top: 10px;}
  }

  @media(max-width: 768px){
      #contents_bg { width: 50%; }
      #contents_bg_2 { width: 50%; }
      .mt_tit { font-size: 5.7vw; line-height: 4.5vw;  }
      .mt_tit span.mt_1{ font-size: 7.1vw; line-height: 8.7vw;}
      .mt_tit span.mt_2{ font-size: 5.7vw; }
      .mt_year { font-size: 9vw; line-height:8.7vw; padding-top: 2.4%;}
      .m_cont_text{ font-size: 16px;}
      .m_cont2_text{ font-size: 16px;}
  }
  @media(max-width: 480px){
    .m_cont2 { width: 25%; padding: 0;}
    .m_cont_icon i { font-size: 8vw;}
    .m_cont2_icon i { font-size: 2rem;}
    .m_cont2_text{ padding-top: 10px; }

  }

  
  /* 두번째 섹션 */
  
  .m_list_2 { width: 100%; padding: 10% 6% 0 6%;}

  .m_title { 
    width: 100%; 
    font-size: 1.3vw; 
    color: #8b0129; 
    font-family: 'sometime_L'; 
    /* padding-left: 10px;  */
    border-bottom: 2px dotted #8b0129;
    padding: 0 0 0.5vw 0.5vw;
    margin-bottom: 0.7vw;
  }

  .m_title2 { 
    width: 100%; 
    font-size: 3vw;
     color: rgb(133, 117, 94); 
     font-weight: 500; 
     margin-bottom: 40px; 
     font-family: 'ChosunSm'; 
     opacity: 0.3; 
     font-style: italic;
    }

    @media(max-width: 480px){
      .m_title2 { font-size: 9vw; margin-bottom: 20px; text-align: center; }
    }


  .m_list_2_768 { display: none;}
  

table.re_list { width: 100%; }
table.re_list td { padding: 0.5vw 10px;}
table.re_list td a{ color: #8b0129;  font-size: 1.1vw;}
table.re_list td a:hover{ color: #000;}
table.re_list td i{
    color: #8b0129; 
    font-size: 1.2vw;  
    vertical-align: middle;
    background: #8b0129;
    color: #dca26f;
    padding: 0.2vw 0.4vw 0 0.4vw;
    border-radius: 4px;
}

  @media(max-width: 1440px){
    .m_title { font-size: 1.5vw; }
    table.re_list td a{  font-size: 1.18vw;}
    table.re_list td i{ font-size: 1.5vw; }
  }

  @media(max-width: 1220px){
    .m_title { font-size: 20px; }
    table.re_list td a{ font-size: 18px;}
  }

  @media(max-width: 940px){
    .m_list_2 { padding: 20% 6% 0 6%; }
    .m_title { font-size: 2.3vw;}
    table.re_list td a{ font-size: 16px; line-height: 22px;}
    table.re_list td i{ font-size: 20px; }
    
  }

  @media(max-width: 768px){
    .m_title { font-size: 2.8vw;}
    table.re_list td { padding: 1vw 10px;}
    table.re_list td a{ font-size: 2.2vw; line-height: 2.8vw;}
    table.re_list td i{ font-size: 2.7vw; }

  }
  @media(max-width: 480px){
    .re_list_wrap { float: left; width: 100%;}
    .m_title { font-size: 1.2rem; margin-bottom: 10px; padding-bottom: 5px;}
    table.re_list td { padding: 1vw 5px;}
    table.re_list td a{ font-size: 16px; line-height: 22px;}
    table.re_list td i{ font-size: 16px; padding: 3px 6px 1px 6px;}
   
  }

/* Underline From Left */
.underline-left {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
  padding: 0.2vw 0;
}
.underline-left:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  background: #8b0129;
  height: 1.5px;
  transition-property: right;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}
.underline-left:hover:before, .underline-left:focus:before, .underline-left:active:before {
  right: 0;
}

  
  /* 세번째 섹션 */
  
  .m_list_3 { width: 100%; padding: 15% 6% 0 6%; }
  .m_list_3-1 { width: 100%; padding: 5% 6% 0 6%; }
  
  
.comt_wrap { margin: 0 -15px;}
.comt_wrap::after { display: table; content: ''; clear: both;}

.comt_box {position: relative; float: left; width: 50%; padding: 0 15px; height: 240px;}
.comt_box img {width: 100%; max-width: 100%; height: auto; }
.comt_img { background: #69011e; overflow: hidden; border-radius: 3px;}



.comt_box:hover img { opacity: 0.3; transform: scale(1.1); }
.comt_box * { transition: all 0.3s ease; }

.comt_text_1 {  
  position: absolute;
  top: 20%;
  left: 0;
  transform: translate(-50%, -50%);
  opacity: 0;
  transform: translateX(-10%);
  z-index: 444;
  color: #fff;
  width: 100%;
  text-align: center;
  font-family: 'GmarketSansLight';
}
.comt_box:hover .comt_text_1{ opacity: 1; transform: translateX(0); transition-delay: 0.1s;}

.comt_text_2 { font-size: 18px; color: #555; text-align: center; margin-top: 15px; }

.responsive {position: relative; width: auto; margin: 0; }
.prev { position: absolute; top: 50%; left: 0%; transform: translate(-50%, -50%);}
.next { position: absolute; top: 50%; right:0%; transform: translate(-50%, -50%);}
.prev img, .next img { width: 60%; opacity: 0.4;}

#commt_1, #commt_2 { width: 100%; margin: 0;}


.fond_box { float: left; width: 33.333%; text-align: center;}
.fond_box p { font-size: 18px; color: #9f9d8a; padding-top: 10px;}
.fond_box img { width: 40%; max-width: 100%; height: auto; opacity: 0.6;}






  @media(max-width: 1220px){
    .comt_wrap { margin: 0 -10px;}
    .comt_box { padding: 0 10px; height: 160px;}
    .comt_text_2 { font-size: 16px; margin-top: 10px; }
  }

  @media(max-width: 768px){
    .comt_text_1 { display: none; }
    .comt_wrap { margin: 0 -5px;}
    .comt_box { padding: 0 5px; height: 140px;}
    .comt_text_2 { font-size: 14px; margin-top: 10px; }
  }

  @media(max-width: 480px){
    .comt_wrap { margin: 0 -5px;}
    .comt_box {padding: 0 5px;}
    .comt_text_2 { font-size: 14px;  margin-top: 5px; }
    .comt_box { padding: 0 5px; height: 165px;}
  }
  @media(max-width: 390px){
    .comt_box { height: 140px;}
  }



/* 세상을 리드하다 */

.spon { float: left; width: 33.333%; text-align: center; color: #866a51; padding: 30px 0;}
.spon:hover { cursor: pointer; color: #8b0129; transform: translateY(-10px); transition: all 0.3s ease;}
.spon_icon i { font-size: 3.5rem;}
.spon_text{ font-size: 22px; padding-top: 20px;} 
.spon_text:hover{ color: #000;} 

 @media(max-width: 1600px){
    .spon_text{ font-size: 18px; }
}

@media(max-width: 1220px){
    .spon {  width: 50%; padding: 20px 0;}
}
@media(max-width: 1024px){
  .spon_icon i { font-size: 2.5rem;}
}

@media(max-width: 480px){
  .spon_icon i { font-size: 2rem;}
  .spon {  width: 33.333%; padding: 0;}
  .spon_text{ font-size: 14px; padding-top: 0px;}
}



footer { position: absolute; bottom: 30px; left: 30px;   }

    .f_logo {  float: left;}
    .f_logo img {width: 90%; max-width: 100%; height: auto;}
    .copy { float: left; font-size: 16px; line-height: 20px; color: #333; font-weight: 300;}


    @media(max-width: 480px){
      footer { position: relative; bottom: 0px; left: 0px; background: rgba(139,1,41,1); padding: 10px 5% 10% 5%;}
      .f_logo img {width: 60%; }
      .copy { font-size: 14px; color: #aaa;}
    }



.mg_top_30 { margin-top: 30px; }
.mg_top_50 { margin-top: 50px; }
.mg_top_100 { margin-top: 100px; }

.mg_bottom_50 { margin-bottom: 50px; }

.pd_top_30 { padding-top: 30px;}

.pd_bottom_10 { padding-bottom: 10px;}
.pd_bottom_30 { padding-bottom: 30px;}
.pd_bottom_40 { padding-bottom: 30px;}
.pd_bottom_50 { padding-bottom: 50px;}