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







html,body{ width:100%; height:100%;}
.box{ width:100%; height:100%; position:relative; }
.box2{ width:100%; height:200px; position:relative; }

.box:nth-child(1) {background: url('../images/main_img_1.jpg')no-repeat; background-size: cover;}
.box:nth-child(2) {background: url('../images/main_img_2.jpg')no-repeat; background-size: cover; }
.box:nth-child(3) {background: url('../images/main_img_3.jpg')no-repeat; background-size: cover;}
.box2:nth-child(4) {background:#cdc0ab;}



#wrap { width: 100%; height: 100%;}
#wrap2 { width: 100%; display: none;}


@media(max-width: 1024px) {

  #wrap { display: none;}
  #wrap2 { display: block;}
}



header { position: absolute; width: 100%;  background: rgba(255, 255, 255, 0.2); z-index: 99999999999;}
header h1{ float: left; width: 33%;  padding: 20px 0 10px 30px; }
header h1 a {  color: #fff; font-size: 20px; line-height: 14px; font-weight: 600;}


nav { float: left; width: 67%; }
nav > ul.gnb{ float: right; width: 100%;}
nav > ul.gnb > li{ position: relative; float: left; width: 50%; }
nav > ul.gnb > li.bg{ background: url('../images/nav_bt2.gif')no-repeat 0px 50px; }
nav > ul.gnb > li span{ font-size: 1rem; font-weight: 400; line-height: 28px;}
nav > ul.gnb > li > a{ font-size: 1.8rem; color: #efeae1; display: block; font-weight: 500; padding: 20px 0 20px 45px;}
nav > ul.gnb > li:hover > a{ color: #fff;}



nav ul.sub{ position: absolute; top: 95px; left: 0; width: 100%; display: none;}
nav ul.sub li{ text-align: left; background:#efeae1; }
nav ul.sub li span{ font-size: 14px; line-height: 14px; color: #777;}
nav ul.sub li a{ font-size: 22px; padding: 20px 7%; display: block; color: #000; font-weight: 400;}
nav ul.sub li a:hover{  color: #000;  transition: .3s;}



ul.sub_480{ padding:0 10% 0 10%; width: 350px;}
ul.sub_480 li{ text-align: left;  }
ul.sub_480 li span{ font-size: 14px; line-height: 14px; color: #777;}
ul.sub_480 li a{ font-size: 18px; padding: 15px 0; display: block; color: #000; font-weight: 500;}
ul.sub_480 li a:hover{ background: #cdbeaa; color: #000;  transition: .3s;}


.toggle { display: none; }

.nav_480_wrap { width: 350px; margin-bottom: 50px;}

.title_480 {  color: #8b0128; font-size: 22px; font-weight: 600; border-bottom: 1px solid #aaa; padding: 0% 0% 10px 10%; }
.title_480 span { color: #777; font-size: 16px; font-weight: 400;}
.nav_480 {
    position: fixed;
    top: 0;
    right: 0;
    background: #efeae1;
    width: 0;
    height: 100%;
    z-index: 7777;
    transition: 0.5s;
    overflow-x: hidden;
    padding: 50px 0px;
}
.nav_480 a { 
    color: #000;
    font-size: 18px;
    padding: 10px 0px;
    display: block;
}




/* Sweep To Top */
.hvr-sweep-to-top {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  transition-property: color;
  transition-duration: 0.3s;
  
}
.hvr-sweep-to-top:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #8b0128;
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition-property: transform;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}
.hvr-sweep-to-top:hover, .hvr-sweep-to-top:focus, .hvr-sweep-to-top:active {
  color: white; 
}
.hvr-sweep-to-top:hover:before, .hvr-sweep-to-top:focus:before, .hvr-sweep-to-top:active:before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}



/* Sweep To Bottom */
.hvr-sweep-to-bottom {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.hvr-sweep-to-bottom:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #cdbeaa;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-sweep-to-bottom:hover, .hvr-sweep-to-bottom:focus, .hvr-sweep-to-bottom:active {
  color: white;
}
.hvr-sweep-to-bottom:hover:before, .hvr-sweep-to-bottom:focus:before, .hvr-sweep-to-bottom:active:before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}



#contents_1 { position: relative; width: 100%;  background: url('../images/main_img_1024.jpg')no-repeat; background-size: cover;}
#contents_2 {  width: 100%; height: auto; background: url('../images/main_img_2.jpg')no-repeat; background-size: cover; }
#contents_3 { width: 100%; height: auto; background: url('../images/main_img_3.jpg')no-repeat; background-size: cover;}





#contents_1_768 { display: none; }
#contents_1_480 { display: none; }


.main_title { 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 5.5rem;
  line-height: 5.5rem;
  font-family: 'Pretendard-ExtraBold';
}



  .particletext {
    position: relative;
    &.lines {
        >.particle {
          position: absolute;
          background-color:rgba(255,255,255,0.3);
          animation: lines 3s linear infinite;
        }
    }
  }


@keyframes lines {
  0%, 50%, 100% {
    transform:translateY(0%);
  }
  25% {
    transform:translateY(100%);
  }
  75% {
    transform:translateY(-100%);
  }
}


.main_ment {
  position: absolute;
  bottom: 5%;
  right: 5%;
  width: 300px;
  color: #ccc;
  text-align: justify;
  background: rgba(0, 0, 0, 0.3);
  padding: 1.7%;
}
.main_ment span{ color: #fff; }



.ebook {
  position: absolute;
  bottom: 5%;
  left: 3%;
  font-family: 'KronaOne-Regular';
  z-index: 55555;
}
.ebook a { font-size: 1.8rem; color: #fff;}
.ebook:hover a { color: #74000c;}
.ebook img { font-size: 2rem; padding: 0px 3px 0 0; vertical-align: bottom;}




@media(max-width: 1220px) {
  .main_ment { bottom: 3%; right: 3%;}
}

@media(max-width: 960px) {
  .main_ment {  display: none;}
  nav > ul.gnb > li > a{ font-size: 1.6rem; padding: 15px 0 25px 25px;}
  nav > ul.gnb > li.bg{ background: url('../images/nav_bt2.gif')no-repeat -15px 43px; }
}


@media(max-width: 870px) {
    header h1{ width: 100%;  padding: 15px 0 10px 20px; border-bottom: 1px solid #8b0128;}
    header h1 img { width: 22%;}
    /* header h1 a {  font-size: 18px; color: #000;} */
    nav { width: 100%; }
    nav > ul.gnb > li span{ font-size: 0.9rem; line-height: 20px;}
    nav > ul.gnb > li > a{ font-size: 1.3rem; padding: 10px 0 15px 20px;}
    nav ul.sub{  top: 74px;}
    nav ul.sub li span{ line-height: 12px;}
    nav ul.sub li a{ font-size: 18px; padding: 15px 7%; display: block; color: #000; font-weight: 400;}
    nav ul.sub li a:hover{ background: #cdbeaa; color: #000;  transition: .3s;}
    nav > ul.gnb > li.bg{ background: url('../images/nav_bt2.gif')no-repeat -20px 35px; }
}
@media(max-width: 768px) {
    #contents_1 { display: none; }
    #contents_1_768 {position: relative; display: block; }
    .ebook { bottom: 5%; left: 5%; }
}
@media(max-width: 480px) {
  header h1{ width: 100%;  padding: 10px 0 10px 15px; border-bottom: 0px solid #ccc; }
  header h1 img { width: 40%;}
  /* header h1 a {  font-size: 16px; font-weight: 500;} */
  nav > ul.gnb { display: none;}
    .toggle {
        display: block;
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 28px;
        color: #fff;
    }
    .closebtn {
        color: #8b0128;
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 28px;
    }
    #contents_1_768 { display: none; }
    #contents_1_480 {position: relative; display: block; }
    .main_title { 
      font-size: 13vw;
      line-height: 14vw;
    }
    .ebook { bottom: 3%; left: 5%; }
    .ebook a { font-size: 24px; color: #74000c;}
    .ebook img { width: 28%; }
    
}
@media(max-width: 380px) {
  header h1{ padding: 10px 0 10px 10px; border-bottom: 0px solid #ccc; }
  header h1 img { width: 40%;}
}



/* 두번째 섹션 */

.contents_box_1 { float: left; width: 50%;  padding: 10% 10% 0 10%; }
.contents_box_2 { float: right;  width: 50%;  padding: 14% 10% 0% 0%;}
.contents_box_3 { float: right;  width: 50%;  padding: 12% 12% 0% 0%;}

.section_title { 
  font-size: 6vw;
  line-height: 6.5vw;
  color: #fff;
  font-family: 'Pretendard-ExtraBold';
}
.section_title span{ 
  font-size: 4.4vw;
  font-family: 'Pretendard-Thin';
}

.section_title_768 { 
  font-size: 6vw;
  line-height: 6.5vw;
  color: #fff;
  font-family: 'Pretendard-ExtraBold';
  display: none;
}
.section_title_768 span{ 
  font-size: 4.4vw;
  font-family: 'Pretendard-Thin';
}

.section_text { margin-top: 50px; font-size: 18px; line-height: 30px; text-align: justify; color: #fff;}

.m_cont_box { display: flex; cursor: pointer;}

.m_cont_img { width: 20%; background: #fff; display: flex; justify-content: center; align-items: center; }
.m_cont_img img{ width: 70%; }
.m_cont_img_2 { width: 20%; display: flex; justify-content: center; align-items: center; }
.m_cont_img_2 i { font-size: 2.5vw; color: #fff;}

.m_cont_text { width: 80%; padding: 0px 30px; }
.m_cont_text_2 { width: 80%; padding: 0px 0px; }

.ceo_massage_1 { color: #fff; font-size: 18px; font-weight: 600;}
.ceo_massage_2 { width: 100%; color: #fff; font-size: 30px; font-weight: 600; padding: 20px 0;}
.ceo_massage_2:hover { color: #000; transition: 0.3;}
.ceo_massage_3 { color: #fff; font-size: 16px; text-align: justify; }

.mg_top_80 { margin-top: 80px; }
.mg_bottom { margin-bottom: 20px; }


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

@media(max-width: 1220px) {
    .contents_box_1 {  float: left; width: 50%;  padding: 10%;}
    .contents_box_2 {  float: left; width: 50%;  padding: 15% 5% 0% 0%; }
    .section_text { font-size: 16px; line-height: 24px;}
    .m_cont_text { padding: 0px 5%; }
    .ceo_massage_1 { font-size: 1.3vw;}
    .ceo_massage_2 { font-size: 2.5vw; padding: 20px 0;}
    .ceo_massage_3 { font-size: 1.2vw; line-height: 1.7vw;}
}
@media(max-width: 768px) {
  .contents_box_1 {  width: 100%;  padding: 10% 10% 5% 10%;}
  .contents_box_2 {  width: 100%;  padding: 5% 10%;}
  .section_title { display: none;}
  .section_title_768 { display: block; font-size: 8vw; line-height: 8.5vw;}
  .section_title_768 span{ font-size: 6vw;}
  .section_text { margin-top: 30px; font-size: 16px; line-height: 24px;}
  .ceo_massage_1 { font-size: 16px;}
  .ceo_massage_2 { font-size: 4vw; padding: 15px 0;}
  .ceo_massage_3 { font-size: 14px; line-height: 18px;}
}
@media(max-width: 480px) {
  .contents_box_1 { padding: 15% 8%;}
  .contents_box_2 {  padding: 10% 8%;}
  .m_cont_img { width: 25%;}
  .m_cont_text { width: 75%; padding: 10px 20px; }
  .ceo_massage_1 { font-size: 3.5vw; font-weight: 400;}
  .ceo_massage_2 { font-size: 6vw; padding: 5px 0 15px 0; line-height: 7vw;}
  .ceo_massage_3 { display: none;}
  .mg_top_80 { margin-top: 50px; }
  .section_title_768 { font-size: 9vw; line-height: 10.5vw;}
  .section_title_768 span{ font-size: 8vw;}
  .section_text { margin-top: 50px; font-size: 14px; line-height: 20px;}
}



.m_cont_text_2 { width: 100%; padding: 0px 0px; }


.page_link_title { width: 100%; padding: 0px 0 10px 0; line-height: 1.7vw; }
.page_link_title span{ color: #fff; font-size: 1vw; font-weight: 400; }
.page_link_title a { color: #fff; font-size: 1.5vw; font-weight: 600;}
.page_link_title a:hover { color: #000; }

.page_link_text { color: #fff; font-size: 16px; text-align: justify; }


@media(max-width: 1220px) {
  .contents_box_3 { padding: 11% 10% 0% 0%;}
  .m_cont_img_2 i { font-size: 4vw;}
  .page_link_title { padding: 0px 0 10px 0; line-height: 2.3vw; }
  .page_link_title span{ color: #fff; font-size: 1.3vw; font-weight: 400; }
  .page_link_title a { color: #fff; font-size: 2vw; font-weight: 600;}
}
@media(max-width: 768px) {
  #contents_2 { padding: 15% 0;}
  #contents_3 { padding: 15% 0;}
  .contents_box_1 {  width: 100%;  padding: 0% 10% 10% 10%;}
  .contents_box_3 {  width: 100%;  padding: 5% 5%;}
  .m_cont_img_2 i { font-size: 6.3vw;}
  .page_link_title { padding: 0px 0 10px 0; line-height: 4vw; }
  .page_link_title span{  font-size: 2vw; }
  .page_link_title a { font-size: 3.3vw;}
  .section_title { display: none;}
  .section_title_768 { display: block;}
  .section_text { margin-top: 30px; font-size: 16px; line-height: 24px;}
}

@media(max-width: 480px) {
  .m_cont_img_2 i { font-size: 8vw;}
  .page_link_title { padding: 0px 0 15px 0; line-height: 5vw; }
  .page_link_title span{  font-size: 3vw; }
  .page_link_title a { font-size: 4.4vw;}
}



/* 푸터 */
footer {width: 100%; padding: 50px 5%; background:#cdc0ab;}

    .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;}
    }