@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Audiowide');
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Archivo+Narrow:400,600&display=swap');
@font-face { font-family: 'NIXGONM-Vb'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/NIXGONM-Vb.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'OSeongandHanEum'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/OSeongandHanEum.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'GoyangIlsan'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/GoyangIlsan.woff') format('woff'); font-weight: normal; font-style: normal; }
/* Noto Sans KR (korean) http://www.google.com/fonts/earlyaccess */ 
@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: normal; 
  font-weight: 100; 
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'), 
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'), 
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype'); 
} 
@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: normal; 
  font-weight: 300; 
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'), 
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'), 
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype'); 
} 
@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: normal; 
  font-weight: 400; 
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype'); 
 } 
@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: normal; 
  font-weight: 500; 
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype'); 
 } 
@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: normal; 
  font-weight: 700; 
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype'); 
 } 
@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: normal; 
  font-weight: 900; 
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype'); 
 } 

/*MAIN*/
html {height:100%;}
body.main {background: #f8ed33;height:100%;;}
#allWrapper {min-height:600px; z-index:1;}
/**/
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

/* animation */
.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  animation-iteration-count: infinite;
}

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.animated.delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.animated.delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

.animated.delay-4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

.animated.delay-5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

.animated.fast {
  -webkit-animation-duration: 800ms;
  animation-duration: 800ms;
}

.animated.faster {
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
}

.animated.slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.slower {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}

@media (print), (prefers-reduced-motion) {
  .animated {
    -webkit-animation: unset !important;
    animation: unset !important;
    -webkit-transition: none !important;
    transition: none !important;
  }
}

.main_wrap{position:absolute; left:50%; top:50%; margin-top:-190px; margin-left:-210px;}
.main_wrap .main_img{position:relative;}
.main_wrap .main_img .logo_bg2{position:absolute; left:73.5%;  top:35%;}
.main_wrap .main_img .logo_bg2 img{width: 40%;}
.main_wrap2 .main_txt{position:absolute; left:60px; bottom:60px; }
.main_wrap2 .main_txt h2{ font-family: 'Archivo Narrow', sans-serif; letter-spacing:8px; font-size:45px; margin:0;}
.main_wrap2 .main_txt h3{ font-size:16px; line-height:24px; letter-spacing:2.5px; padding:6px 0 14px;; margin:0; }
.main_wrap2 .main_txt p{display:inline-block; background-color:#fff; font-family: 'OSeongandHanEum'; font-size:20px;  padding:7px 20px; box-sizing:border-box; margin-bottom:5px; color:#222; font-weight:bold;}
.main_wrap2 .main_txt p.sub_txt{ padding:7px 20px;  box-sizing:border-box;}
.main_wrap2 .main_txt p span{ font-size:26px; }

.main_nav{padding:0% 2%; box-sizing:border-box; background-image:url(/theme/searchn2/asset/images/logo_bg3.png); background-size: cover;}
.main_nav li{margin-top:30px; text-align:center;}
.main_nav a{text-transform: uppercase; font-family: 'Noto Sans KR'; font-weight:600; font-size:14px;}

.main_box {height:100%;}
.main_box:after {content:''; display:block; clear:both;}
/**/
.box1 {float:left;position: relative;width:33.33333333%; height:100%; overflow:hidden;}
.box1:hover div .film_left:after {left:100%;}
.box1 .wrap_txt {display:table; width:100%; height:100%; table-layout:fixed; position: absolute; top:0; left:0;}
.box1_inner {display:table-cell; vertical-align:middle; padding-left: 80px; padding-right:40px;}
.box1_inner img {padding:15px 0 25px; vertical-align:bottom;}
.box1_inner p {font-size:22px; letter-spacing:-0.01em; color:#fff; line-height:1.6;padding-top:15px; word-break:keep-all; height:160px;font-family: 'GoyangIlsan','Noto Sans KR';font-size: 19px;}
.box1 .btn {position: absolute; top:0; left:0; right:0; bottom:0; text-align:center;}
.box1 .btn a {display:block; width:100%; height:100%; color:transparent; font-size:0;}
.box1 .address {position: absolute; padding-bottom: 70px;padding-left: 80px; padding-right: 40px; bottom:0; left:0; line-height: 1.5; font-size:13px; color:#fff; font-family: 'GoyangIlsan','Noto Sans KR';}
.box1 .address:before {    content: '';
    display: block;
    width: 30px;
    height: 6px;
    background: #fabc00;
    position: absolute;
    top: -20px;}
.box1 .address span {display:block; margin-top:15px;}
/**/
.box3 {float:right;position: relative; width:33.33333333%; height:100%; overflow:hidden;}
.box3 > div {height:50%; position: relative;}
.box3 .btn {position: absolute;top: 0;left: 0;right:0;bottom:0; text-align:center; display:table; width:50%; height:100%;}
.box3 .btn1 {position: absolute;top: 0;right: 0;right:0;bottom:0; text-align:center; display:table; width:50%; height:100%;}
.box3 .btn > a {position: relative;display:table-cell; vertical-align:middle;}
.box3 .btn1 > a {position: relative;display:table-cell; vertical-align:middle;}
.box3 > div:hover .film_left:after {left:100%;}
/**/
.wrap_img {width:100%; height:100%; position: relative;}
.wrap_img > img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;object-position: right;}
.film {position: absolute;top:0;left:0;right:0;bottom:0;}
.film_left {position: relative;float:left;width:50%; height: 100%;}
.film_all {position: relative;float:left;width:100%; height: 100%;}
.film > div:after {content:''; display:block; position: absolute; top:0;left:0;right:0;bottom:0;background:#191818;transition:all 0.5s cubic-bezier(0, 0.76, 0.59, 1.29);} 

.box3 .btn:before {content:''; display:block; position: absolute; top:0;left:0;right:0;bottom:0;background:#191818;transition:all 0.5s cubic-bezier(0, 0.76, 0.59, 1.29);} 
.box3 .btn:hover:before {left:100%;} 
.box3 .btn1:before {content:''; display:block; position: absolute; top:0;left:0;right:0;bottom:0;background:#191818;transition:all 0.5s cubic-bezier(0, 0.76, 0.59, 1.29);} 
.box3 .btn1:hover:before {left:100%;} 

/**/
.box2 {position: absolute; left:50%; margin-left:-16.66666667%; top:0; bottom:0;width:33.33333333%; height:100%; overflow:hidden;}
.box2_inner {position: relative;width:100%;height:100%;}
.box2 .logo {position: absolute;width:458px;height:510px;top:50%;left:50%;margin-left:-228px;margin-top:-227px;}
.box2 .logo:after {content:''; display:block; clear:both;}
.box2 .logo > div {float:left; width:50%; position: relative;overflow:hidden;}
.box2 .logo > div img {position: absolute;}
.box2 .logo .main_layer1 {height:227px;}
.box2 .logo .main_layer2 {height:227px;border-left:1px solid transparent;}
.box2 .logo .main_layer3 {height:283px;border-top:1px solid transparent;} 
.box2 .logo .main_layer4 {height:283px;border-left:1px solid transparent;border-top:1px solid transparent;}
.box2 .logo .main_layer1 img {
bottom:0; right:0;
	-webkit-animation-name: boxani1; /* Safari 4.0 - 8.0 */
    animation-name: boxani1;
}
.box2 .logo .main_layer2 img {
bottom:0; left:0;
	-webkit-animation-name: boxani2; /* Safari 4.0 - 8.0 */
    animation-name: boxani2;
}
.box2 .logo .main_layer3 img {
top:0; right:0;
	-webkit-animation-name: boxani3; /* Safari 4.0 - 8.0 */
    animation-name: boxani3;
}
.box2 .logo .main_layer4 img {
top:0; left:0; 
	-webkit-animation-name: boxani4; /* Safari 4.0 - 8.0 */
    animation-name: boxani4;
}
/**/
.box2 .logo > div > img { 
    -webkit-animation-duration: 6s; /* Safari 4.0 - 8.0 */
    -webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
    animation-duration: 6s;
    animation-iteration-count: infinite;
-webkit-transition: all cubic-bezier(0.420, 0.000, 0.580, 1.000); 
   -moz-transition: all cubic-bezier(0.420, 0.000, 0.580, 1.000); 
     -o-transition: all cubic-bezier(0.420, 0.000, 0.580, 1.000); 
        transition: all cubic-bezier(0.420, 0.000, 0.580, 1.000); /* ease-in-out */
-webkit-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); 
   -moz-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); 
     -o-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); 
        transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); /* ease-in-out */
}
@keyframes boxani1 {
    0%   { transform:translate(0, 0);}
    15%  { transform:translate(0, 100px);}
	30%  { transform:translate(0, 100px);}
    45% {transform:translate(0, 0); }
	100% {transform:translate(0, 0); }
}
@keyframes boxani2 {
    0%   { transform:translate(0, 0);}
	15%  { transform:translate(-100px, 0);}
    30%  { transform:translate(-100px, 0);}
	45% {transform:translate(0, 0); }
    100% {transform:translate(0, 0); }
}
@keyframes boxani3 {
    0%   { transform:translate(0, 0);}
	15%  { transform:translate(100px, 0);}
    30%  { transform:translate(100px, 0);}
	45% {transform:translate(0, 0); }
    100% {transform:translate(0, 0); }
}
@keyframes boxani4 {
    0%   { transform:translate(0, 0);}
	15%  { transform:translate(0, -100px);}
    30%  { transform:translate(0, -100px);}
	45% {transform:translate(0, 0); }
    100% {transform:translate(0, 0); }
}
/***************1024 ~ 1500px****************/
@media screen and (max-width: 1400px){
/**/
.box2 .logo {width:236px; height:266px; margin-left:-118px; margin-top:-115px;}
.box2 .logo .main_layer1,
.box2 .logo .main_layer2 {height:116px; border-bottom:1px solid transparent;}
.box2 .logo .main_layer3,
.box2 .logo .main_layer4 {border-top:0;height:150px;}
.box2 .logo .main_layer2 img {height:116px;}

/**/
.box1_inner {padding-left:50px;}
.box1_inner p {font-size:18px;height: 10vw; letter-spacing:0;}
.box1 .address {padding-bottom:50px; padding-left:50px;}


}
/***************패드 1024px****************/
@media screen and (max-width: 1023px){
/**/
.box2 {position: relative; height:85%;width: 100%;margin-left: 0; left: 0;}
.box2:before {content:''; display:block;width:1px; height:100%; background: rgba(255,255,255,0.2); position: absolute; left:50%; top:0;}
.box2::after {content:''; display:block;width:100%; height:1px; background: rgba(255,255,255,0.2); position: absolute; left:0; top:50%;}
.box3 {float:none; position: relative; width:100%; height:15%; border-top:1px solid rgba(255,255,255,0.2);}
.box3:after {content:''; display:block;width:1px; height:100%; background: rgba(255,255,255,0.2); position: absolute; left:50%; top:0;}
.box3 > div {float:left; width:50%; height:100%;}
.box1 {float:none; width:100%; height:auto; border-top:1px solid rgba(255,255,255,0.2);}
.box1 .wrap_txt {display:block; width:auto ; height:auto; position: relative; top:auto; left:auto; padding:100px 60px 300px; background: url(../images/img1_m.jpg) no-repeat right bottom;background-size:cover ;}
.box1 .wrap_img {display:none;}
.box1 .film {display:none;}
.box1_inner {padding:0; display:block; }
.box1_inner img {padding:0;}
.box1_inner p {height:auto;padding-top:30px;}
.box1 .address {position: relative; bottom:auto; left:auto; padding-top:80px}
.box1 .address:before {top:50px;}
 .btn{   display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-right: 1px solid #3e3e3e;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
     border-radius: 0; 
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;}


}
/***************모발 ~ 767px****************/
@media screen and (max-width:767px){
/**/
.box3 .btn > a img {height:30px}
.box3 .btn1 > a img {height:30px}
.box1 .wrap_txt {padding:50px 30px 140px;}
.box1_inner img {width:250px;}
.box1_inner p {font-size:13px;padding-top:15px; font-weight:400;}
.box1 .address {padding:30px; padding-top:50px; font-size:13px;}
.box1 .address:before {top:30px;}
 .btn{   display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-right: 1px solid #3e3e3e;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
     border-radius: 0; 
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;}
.main_wrap2 .main_txt{width:auto; bottom:5%; left:5%; width:65%;}
.main_wrap2 .main_txt h2{font-size:26px;}
.main_wrap2 .main_txt h3{font-size:14px;}
.main_wrap2 .main_txt p{font-size:10px; padding: 2% 4% !important;}
.main_wrap2 .main_txt p span{font-size:14px;}
.main_wrap{top:50%; left:0; right:0; margin-left:auto; margin-right:auto; width:75%;}

.main_nav{background-size: 100% 100%; background-repeat: no-repeat; bottom:4% !important; right:5% !important;}
.main_nav a{font-size:12px !important;}
}