@charset "utf-8";

@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

html, body, *{font-family: 'Pretendard-Regular'!important;font-size:62.5%;}
body{background-color: #fff!important;}
/* logo svg */
.cls-1{fill: #fff;}

/* header */
.header{width: 100%;height: 120px;position: fixed;top: 0;left: 0;z-index: 2;overflow: hidden;}
.header_wrap{max-width: 1200px;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;height: 80px;padding: 0 15px;}
.logo{width: 14%;}
nav{width: 38%;}
nav ul{display: flex;width: 100%;align-items: center;margin: 0!important;}
nav ul li{width: 25%;text-align: center;}
nav ul li a{display: block;color: #fff;font-size: 1.8rem;}
nav ul li a:hover{color:#BFAD72}
.social{width: 10%;}
.social a{margin: 0 5%;}

/* header activated */
.header.activated{background-color: #fff;border-bottom: 1px solid #eee;}
.header.activated .cls-1{fill: #000;}
.header.activated nav ul li a{color:#000;}
.header.activated .social path:last-child{fill: #000;}
.header.activated nav ul li a:hover{color:#BFAD72}

/* top banner */
.top_banner{width: 100%;height: 40px;background-color: #BFAD72;color: #fff;display: flex;align-items: center;justify-content: center;font-size: 1.4rem;}
.top_banner a{color: #BFAD72;background: #fff;padding:.2rem 1.4rem;border-radius: 50px;margin-left: 1rem;font-weight: 700;font-size: 1.4rem;}

/* visual */
.visual{width: 100%;height: 100vh;background: url(../img/visual.jpg) no-repeat center/cover;background-attachment: fixed;position: relative;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;display: flex;align-items: center;justify-content: center;}
.visual_tit{color:#fff;font-weight: 700;font-size: 6rem;}

/* info */
.info{margin: 100px auto;max-width: 1200px;width: 100%;overflow: hidden;padding: 0 15px;display: flex;flex-wrap: wrap;justify-content: space-between;}
.info .box{width: 24%;height: 250px;background-color: #F7F6F4;border: 1px solid #ccc;display: flex;align-content: center;flex-wrap: wrap;padding: 2rem;margin-bottom: 15px;}
.info .box h5{font-size: 1.6rem;display: block;width: 100%;}
.info .box h3{font-size: 2.4rem;display: block;width: 100%;margin: 0!important;}
.info .box:first-child{width: 49.4%;background-image: url(../img/customer.jpg);background-size: cover;background-position: 0 -200px;color:#Fff;}
.info .box:first-child p{width: 100%;font-size: 3.6rem;font-weight: 700;color: #fff;margin: 0!important;}
.info .box img{margin-left: auto;margin-top: 10px;}
.info .box:hover img {animation: rotate-vert-center 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;}
.info .box span{font-size: 1.6rem;}
.location{background-color: #BFAD72!important;}
.location h5, .location h3{color:#fff!important;}

@-webkit-keyframes rotate-vert-center {
    0% {
        -webkit-transform: rotateY(0);
        transform: rotateY(0);
    }

    100% {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }
}

@keyframes rotate-vert-center {
    0% {
        -webkit-transform: rotateY(0);
        transform: rotateY(0);
    }

    100% {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }
}

/* footer */
footer{background-color: #333!important;}
footer p{color:#bbb;font-size: 1.5rem!important; font-weight: 400;letter-spacing: .05rem;}

/* top button */
#top_btn{display: flex;align-items: center;justify-content: center;outline: none;}
#top_btn:hover{border-color: #BFAD72;background: #BFAD72;}

.center-heading h2 {font-size:3.2rem; font-weight: 700; color: #333;}
.media-body p{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;margin-top: 50px;font-size: 1.6rem; line-height: 2;}
.media-body p span{width: 50%;margin-bottom: 20px;display: flex;align-items: center;font-size: 1.6rem;}
.media-body p span i{width: 40px;height: 40px;line-height: 40px;background: #BFAD72;color:#fff;display: inline-block;text-align: center;border-radius: 40px;margin-right: 10px;font-size:1.6rem;}

.pc{display: block;}
.mobile{display: none;}
@media all and (max-width: 960px) {
  /* ios 스타일 제거 */
  input[type=submit] {-webkit-appearance:none;}
  input:checked[type="checkbox"]{background-color:#fff;-webkit-appearance:checkbox;}
  input[type="text"], 
  input[type="password"], 
  input[type="email"], 
  input[type="search"], 
  input[type="image"], 
  input[type="tel"],
  input[type="reset"],
  button, 
  select, 
  textarea{-webkit-appearance:none;}
  a{-webkit-tap-highlight-color: transparent;}

  .visual{background-attachment: initial;}
  .visual_scroll{display: none;}

  #top_btn{display: none;}

  .mobile{display: block;}
  .pc{display: none;}
  .logo{width: 140px;}
  .social{display: none;}
  #gnb{position: fixed;left: 0;top: 0;bottom: 0;right: 0;background: #fff;width: 100%;height: 100%;z-index: 999;display: none;}
  .top_banner{font-size: 0.7rem;}

  .header.activated .m_nav_bar rect{fill: #000;}
  .cls-2{fill: #000;}
  .m_hd{height: 80px;max-width: 1200px;display: flex;justify-content: space-between;align-items: center;padding: 0 15px;}
  .m_hd svg:nth-child(1){width: 140px;}

  .gnb_wrap{height: 100%;}
  #gnb_1dul{flex-wrap: wrap;height: calc(100% - 300px);}
  #gnb_1dul li{width: 100%;display: flex;justify-content: center;}
  #gnb_1dul li a{color:#000;font-size: 1.8rem;text-align: left;padding: 0 15px;}

  .visual_tit {font-size: 4rem;}

  .info .box{margin-bottom: 10px;}

}

@media all and (max-width: 768px) {
  .header{height: 80px;}
  .info .box:nth-child(1){width: 100%;}
  .info .box{width: 49.4%;height: 180px;padding: 1rem;margin-bottom: 4px;}

  .info .box h5, .info .box span{font-size: 1.4rem;}
  .top_banner a{font-size: 0.4rem;}
  .info .box h3{font-size: 2.4rem;}
  .info .box img{width: 40%;}

  .media-body p span{width: 100%;}
}