@charset "utf-8";
/* CSS Document */

/* 메인 콘텐츠 */
* {font-family: 'Montserrat Alternates', 'Noto Sans', sans-serif;}
body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  min-width:70vw;
}
em {font-style:normal;}
.col_blu {
  color:#0BFCE4
}
.z-scroll {
  opacity: 0;
  transform: translateX(-80px);
  transition: transform 1.0s, opacity 1.0s;
}
.z-scroll.right-on {
  opacity: 1;
  transform: translateX(0px);
  transition: transform 1.0s, opacity 1.0s;
}
.z-scroll3 {
  opacity: 0;
  transform: translateX(80px);
  transition: transform 1.0s, opacity 1.0s;
}
.z-scroll3.left-on {
  opacity: 1;
  transform: translateX(0px);
  transition: transform 0.8s, opacity 1.0s;
  /*transition-delay: 0.8s;*/
}
.z-scroll2 {
  opacity: 0;
  transform: translateY(80px);
  transition: transform 1.0s, opacity 1.0s;
}
.z-scroll2.up-on {
  opacity: 1;
  transform: translateY(0px);
  transition: transform 0.6s, opacity 1.0s;
}



/*//////////헤더 시작//////////*/
header {
  width:100%;
  height:100px;	
  line-height:100px;
  position: absolute;
  top:0;
  z-index: 3;
}
header.scroll{
  position:fixed;
  top:0;
  left:0;
}
.header-in {
  position:relative;
	width:calc(100% - 80px);
  margin:auto;	
}
.logo {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.nav {
  float: right;
}
.nav li {
  position: relative;
  float:left;
  margin-left: 30px;
}
.nav li a {
  font-family: 'Montserrat Alternates', sans-serif;;
  font-size:0.875rem;
  font-weight:500;
  color:#fff;
  letter-spacing:1px;
  transition:all .3s;
}
.nav a {
  font-family: 'Montserrat Alternates', sans-serif;;
  color:#fff;
  letter-spacing:0.05em;

}
.nav li a.change {
  color:#333;
}
.nav:after, .header-in:after {
  content:"";
  display: block;
  clear:both;
}
.nav_cantact {
  color:#fff;
  font-size:1.05rem;
}
/*//////////헤더 끝//////////*/


/* //////// common ////////*/
section {
  width:100%;
  height:100vh;
  overflow: hidden;
  padding:150px 0;
}

.overlay {
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  background:rgba(0, 0, 0, 0.6);
  z-index: -1;
}
.overlay.two {
  background:#12161E;
}
.overlay.three {
  background:#12161E;
}



/*////////// sec01 시작 //////////*/
#Home {
  position: relative;
  width:100%;
  overflow: hidden;
}

.video {
  position: absolute;
  top: 0px;
  left: 0px;
  min-width: 100vw;
  min-height: 100vh;
  width: auto;
  height: auto;
  z-index: -1;
  overflow: hidden;
}
.section-img.mobile {display:none;}

.main-slogon {

}
.main-slogon div {
  font-size:170px;
  font-weight:100;
  color:#ffff;
  display: flex;
  line-height:140px;
  /*flex-direction: column-reverse;*/
}

.main-slogon span {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}

.zigzag{display:inline-block; color:#fff;position:relative}
.zigzag:after,.zigzag:before{content:attr(data-text);position:absolute;top:0;left:0;width:100%;clip:rect(0,0,0,0)}
.zigzag:after{left:0;text-shadow:-1px 0 red;-webkit-animation:glitch-1 2s infinite linear alternate-reverse;animation:glitch-1 2s infinite linear alternate-reverse}
.zigzag:before{left:0;text-shadow:1px 0 #0f0;-webkit-animation:glitch-2 2s infinite linear alternate-reverse;animation:glitch-2 2s infinite linear alternate-reverse}

@-webkit-keyframes glitch-1{
  0% {clip:rect(103px,450px,30px,0)}
  5.88235% {clip:rect(94px,450px,44px,0)}
  11.76471% {clip:rect(55px,450px,48px,0)}
  17.64706% {clip:rect(11px,450px,110px,0)}
  23.52941% {clip:rect(26px,450px,107px,0)}
  29.41176% {clip:rect(49px,450px,71px,0)}
  35.29412% {clip:rect(83px,450px,109px,0)}
  41.17647% {clip:rect(52px,450px,45px,0)}
  47.05882% {clip:rect(30px,450px,82px,0)}
  52.94118%{clip:rect(58px,450px,106px,0)}
  58.82353%{clip:rect(115px,450px,22px,0)}
  64.70588%{clip:rect(56px,450px,96px,0)}
  70.58824%{clip:rect(80px,450px,113px,0)}
  76.47059%{clip:rect(9px,450px,93px,0)}
  82.35294%{clip:rect(35px,450px,34px,0)}
  88.23529%{clip:rect(12px,450px,63px,0)}
  94.11765%{clip:rect(52px,450px,81px,0)}
  100%{clip:rect(14px,450px,109px,0)}
}

@-webkit-keyframes glitch-2 {
  0% {clip:rect(65px,450px,83px,0)}
  5.88235%{clip:rect(94px,450px,32px,0)}
  11.76471%{clip:rect(59px,450px,31px,0)}
  17.64706%{clip:rect(59px,450px,10px,0)}
  23.52941%{clip:rect(10px,450px,46px,0)}
  29.41176%{clip:rect(103px,450px,113px,0)}
  35.29412%{clip:rect(53px,450px,107px,0)}
  41.17647%{clip:rect(112px,450px,72px,0)}
  47.05882%{clip:rect(99px,450px,93px,0)}
  52.94118%{clip:rect(63px,450px,100px,0)}
  58.82353%{clip:rect(108px,450px,4px,0)}
  64.70588%{clip:rect(113px,450px,41px,0)}
  70.58824%{clip:rect(24px,450px,74px,0)}
  76.47059%{clip:rect(40px,450px,92px,0)}
  82.35294%{clip:rect(62px,450px,29px,0)}
  88.23529%{clip:rect(75px,450px,17px,0)}
  94.11765%{clip:rect(80px,450px,30px,0)}
  100%{clip:rect(91px,450px,108px,0)}
}
em.o-cover {position:absolute;
	background:url('/images/camera.svg') center center no-repeat;
	background-size:80px;
	display:inline-block;
	width:101px;
	height:101px; 
	left:-1px;
	top:37px;
	/*-webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 45s linear infinite;
    animation:spin 4s linear infinite;*/
}
	@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
	@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
	@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }




}



.sec-1 {
  fill:transparent;
  stroke:#fff;
  stroke-linecap:round;
  stroke-miterlimit:10;
  stroke-width:9px;
  stroke-dasharray: 1100;
  stroke-dashoffset: 1100;
  animation: dash 0.9s ease-in-out;
  animation-delay: 0.4s;
  animation-fill-mode: forwards;
}
@keyframes dash{
  0% {
    stroke-dashoffset: 1100;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
.main-slogon:after {
  content:"";
  display:block;
  clear:both;
}
.sec-2, .sec-3 {
  float:left;
}
.sec-2 img, .sec-3 img {
  width:116%;
}
.s-img01.z-scroll {
  transform:translate(-65px, 169px);
}
.s-img01.z-scroll.right-on {
  transition-delay: 0.5s;
  transition: transform 0.8s, opacity 1.0s;
  transform:translate(35px, 169px);
}
.ms-in {
  width:540px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}
.ws-in {
  width:100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%)
}


/* 1_slide */
.swiper-container {
  width: 100%;
  height: 100%;
  padding-bottom:5%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  /*background: #fff;*/		
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.swiper-container .swiper-wrapper div {width:480px;height:auto;padding-bottom:6%;}
.swiper-container .swiper-wrapper div:nth-child(2n) {margin-top: 80px;}
.swiper-container .swiper-wrapper div:nth-child(2n) span {}
.swiper-container .swiper-slide img {float:left;}
.swiper-container .swiper-slide span {font-size:15px;display:block;position:absolute;margin-top:69%;text-align:left;width:100%;float:left;line-height:22px;z-index:1;color:#eee;}
.swiper-container .swiper-slide em {display:block;font-size:12px;color:#888}
/* 1_slide */


.wrap_inner {width:70vw;margin:auto;position:relative;}
.main_txt1 {position:absolute;right:0;top:210px;color:#fff;width:428px;line-height:34px;font-size:17px;border-top:1px solid #fff;}
.main_txt1.z-scroll2 { transition-delay: 0.5s;}
.main_txt1 span {display:inline-block;text-align:left;padding:20px 5px 10px;}

/* Style the tab */
.tabs {
  width:70vw;
  overflow: hidden;
  margin:0px auto 0;
  cursor:pointer;
}

.tabs:after {content:""; display:block; clear:both;}

.tabs a {color:#fff;}
/* Style the buttons inside the tab */
.tabs .tablinks {
  float: left;
  cursor: pointer;
  padding: 14px 5px;
  margin:0px 16px;
  transition: 0.3s;
  font-size: 17px;
  color:#fff;
  border:0;
  background:none !important;
}

/* Change background color of buttons on hover */
.tabs .tablinks:hover {

}

/* Create an active/current tablink class */
.tabs .tablinks.active {
  border-bottom:2px solid #fff;
  font-weight:bold
}

/* Style the tab content */
.tab_content {
  width:100%;
  /*height:410px;*/
  padding:0;
  color:#fff;
  border-top: none;
  margin-top:105px;
  background:transparent;
  margin-right:15%;
}
.swiper-container .swiper-slide:nth-child(1) {
  margin-left:16%;
}

/*////////// sec01 끝  //////////*/


/*////////// sec02 시작 //////////*/
#About{
  position: relative;
}
#About h1.title {
  font-size:1.2em;
  line-height:1.4em;
  position:absolute;
}
.ab_wrap {
  margin-top:3%;}
.about_thum {
  width:86vw;
  margin:auto;
  position:relative;
  top:50%;
  transform: translateY(-50%);
  height:100%;
  filter:grayscale(20%);
  -webkit-filter:grayscale(20%);
}
.about_thum > div div.about_img01, .about_thum > div div.about_img02, .about_thum > div div.about_img03, .about_thum > div div.about_img04, .about_thum > div div.about_img05 {
  position:absolute;
  width:26%;
  opacity:0.7;
  cursor: pointer;
}
.about_thum > div > div:hover {
  opacity:1;
  filter: none !important;
  -webkit-filter:none;
}


.about_thum .about_img01 {margin-top:17%;left:15%;}
.about_thum .about_img02 {margin-top:6%;left:43%;}
.about_thum .about_img03 {margin-top:23%;left:43%;}
.about_thum .about_img04 {margin-top:0%;left:71%;}
.about_thum .about_img05 {margin-top:17%;left:71%;}

.about_thum > .thum_in:first-child.up-on, .swiper-container2 .swiper-slide:first-child.up-on {
  transition-delay: 0.8s;
}
.about_thum > .thum_in:nth-child(2).up-on, .swiper-container2 .swiper-slide:nth-child(2).up-on {
  transition-delay: 0.9s;
}
.about_thum > .thum_in:nth-child(3).up-on, .swiper-container2 .swiper-slide:nth-child(3).up-on {
  transition-delay: 1.0s;
}
.about_thum > .thum_in:nth-child(4).up-on, .swiper-container2 .swiper-slide:nth-child(4).up-on {
  transition-delay: 1.2s;
}
.about_thum > .thum_in:nth-child(5).up-on, .swiper-container2 .swiper-slide:nth-child(5).up-on {
  transition-delay: 1.4s;
}
.swiper-container2 {display:none;}

.title {
  font-size:1.8rem;
  font-weight:400;
  line-height:1.2;
  color:#fff;
  z-index: 9;
}
.title span {
  display:block;
  font-weight:300;
}
.about-txt {
  width: 70vw;
  margin: -20% auto 0 auto;
}

.sct-play-box {display:none; cursor:pointer; }
.play_bg {
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  right:-1px;
  opacity: 1;
  z-index:998;
  opacity: 0.5;
}
.play_icon {
  width:100%;
  height:100%;
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  z-index:999;
  background-image: url( '/images/play_icon.svg' );
  background-repeat: no-repeat;
  background-position: center center;
}


.filmo_imgWrap p.modal_trigger2 a.play_icon {
  width:100%;
  height:100%;
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  z-index:999;
  background-image: url( '/images/play_icon.svg' );
  background-size:20%;
  background-repeat: no-repeat;
  background-position: center center;
	margin-top:0;
 
}
.swiper-container .swiper-wrapper div:nth-child(2n) .filmo_imgWrap p.modal_trigger2 a.play_icon {

}

.modal_overlay{
  display:block;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 999;
  left: 0;
  top: 0;
  bottom:0;
  right:0;
  opacity: 0;
  transform: scale(0);
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  transition: all .5s;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
}

.modal_overlay.overlayOpen {
  opacity: 1;
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
}

.modal_overlay .close, .close2 {
  position:absolute;
  display: inline-block;
  top:35px;
  right:35px;
  cursor: pointer;
  font-size: 0em;
  opacity:1;
  z-index:9999;

}




/*
.about-txt strong.white {
color:#fff;
}
.about-txt strong {
font-weight:700 !important;
/*color:#14FFE5;*/
/*  color:#0BFCE4;
}
.about-txt h3 {
display: block;
padding:50px 0 10px;
font-family: 'Noto Sans KR';
font-size:1.375rem;
font-weight:300;
line-height:1.4;
color:#fff;
}
.about-txt h3 b {
font-family: 'Noto Sans KR';
font-weight:600;
}
.about-txt small {
font-family: 'Noto Sans KR';
font-size:1.05rem;
line-height: 1.6;
font-weight:300;
color:#fff;
top:0;
margin-top: 0px;
}
*/

/* 애니메이션 효과 */
#About h1.z-scroll.right-on {
  transition-delay: 0.6s;
}
#About h1.z-scroll-im.right-on {
  transition-delay: 0.6s;
}
#About small.z-scroll.right-on {
  display:block;
  opacity:0.8;
  transition-delay: 1.2s;
}
.about_m {display:none;}

/*////////// sec02 끝 //////////*/



/*////////// sec03 시작 //////////*/
#Portfolio{
  position: relative;
  /*background:#12161E;*/
  /*background:linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../images/sec03_bg.jpg") no-repeat center 0 / cover;
  background-color:rgba(0, 0, 0, 0.75);*/
}
#Portfolio .title {
  text-align:left;
  display:block;
  letter-spacing:-0.05em;
  line-height:45px;
}
#Portfolio .sub_txt {
  font-size:17px;
  color:#ccc;
  display:block;
  margin-top:40px;
  line-height:30px;
}
.port-video[poster] {
  width:100%;
  height:100%;
}
.port_txt {
  float:right;
  width:600px;
  margin-top:20vh;

}
.ex-video {	
  width:43vw;
  height:50vh;
  margin:0 auto 1vh;
  position:relative;
  overflow: hidden;
}




.embed-container { position: relative; padding-bottom: 50vh; height: 0; overflow: hidden; max-width: 100%; }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.play {
  background: none;
  border: none;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  opacity: 1;
  transition:all .3s ease-in;
}
.play.down {
  opacity: 0;
}
.video2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%, -50%);
  width: 100%;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
  overflow: hidden;
}
.ex-video.z-scroll2.up-on {
  transition-delay: 0.6s;
}
#Portfolio .title{
  transition-delay: 0.6s;
}
.port_in {
  width: 100%;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}
.port_in .sub_txt {
  display:block;
  width:43vw;	
  margin:0 auto 5vh;
  text-align:right;
  font-size:1rem;
  line-height:1.4;
  font-weight:normal;
  word-break: keep-all;
  color:rgba(255, 255, 255, 0.5);
}

.outline_txt1 {margin-left:10%;-webkit-text-stroke: 1px #fff;color:#fff;font-size:150px;font-weight:800;position:absolute;
  /* color: transparent;
  -webkit-text-stroke: calc(.005em + 1px) #000;*/
  -webkit-text-fill-color: transparent; /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 0.5px;
  -webkit-text-stroke-color: white;  
  transform: translateX(-160px);
}
.outline_txt2 {width:95vw;margin:auto;text-align:right;color: white;font-size:150px;font-weight:800;position:absolute;
  bottom:6%;
  -webkit-text-fill-color: transparent; /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 0.5px;
  -webkit-text-stroke-color: white;
}
.outline_txt1.z-scroll, .outline_txt2.z-scroll3 {opacity:0;}
.outline_txt1.z-scroll.right-on {opacity:0.5; transition:2.2s; transition-delay: 0.9s;}
.outline_txt2.z-scroll3.left-on {opacity:0.5; transition:2.0s; transition-delay: 1.2s;}
.port_txt .sub_txt.up-on { transition-delay: 0.8s;}
/*////////// sec03 끝 - 어떤 공간이라도 그 이상의 ~ //////////*/


/*////////// sec04 시작 - 어디서도 경험하지 못한 브랜드의 답 ~ //////////*/
#Experience{
  position: relative;
  overflow: hidden;
  background:#12161E url("../images/bg44.png") no-repeat center 0 / cover;

}
.exper_txt {
  width: 70vw;
  margin:-10% auto 0 auto;
  position:relative;
}

#Experience .title.m_title {display:none;}
/*
.count {
width: 100%;
color: #fff;
text-align: center;
margin:14vh auto;
}
.count li {
float: left;
width: 33.33%;
font-size:5rem;
font-weight:900;
text-align:center;
letter-spacing:-0.04em;
}
.count li span {
display:block;
font-size:1.1rem;
font-weight:300;
padding-bottom:20px;
color:aqua;
letter-spacing:0em;
}

.count li p {
font-size:1.05rem;
line-height: 1.4;
font-weight:300;
margin-top:20px;
color:#fff;
letter-spacing:0em;
}

.sec4_m{display: none;}

.count:after {
content:"";
display: block;
clear:both;
}
*/
.counter {display:block;}
.counter.zigzag:after{left:0;text-shadow:-1.2px 0 red;-webkit-animation:glitch-1 2s infinite linear alternate-reverse;animation:glitch-1 2s infinite linear alternate-reverse}
.counter.zigzag:before{left:0;text-shadow:1.2px 0 #0f0;-webkit-animation:glitch-2 2s infinite linear alternate-reverse;animation:glitch-2 2s infinite linear alternate-reverse}
.right_count {
  width:auto;
  font-family: 'Montserrat Alternates', sans-serif;
  color:#fff;
  font-size:7.0rem;
  font-weight:500;
  position:absolute;
  right:0;
  margin-top:-7vh;
  text-align:right;
  line-height:36px;
  letter-spacing: 0.05em;
}
.right_count span {
  font-size:14px;
  font-weight:300;
  letter-spacing: 0.02em;
  padding-right:15px;
}
.botm_count {
  width:auto;
  font-family: 'Montserrat Alternates', sans-serif;
  color:#fff;
  font-size:7.0rem;
  font-weight:500;
  position:absolute;
  left:0;
  margin-top:15vh;
  text-align:left;
  line-height:36px;
  letter-spacing: 0.05em;
}
.botm_count span {
  font-size:14px;
  font-weight:300;
  color:#fff;
  letter-spacing: 0.02em;
}

.exper_txt .title.up-on {transition-delay: 0.6s;}
.exper_txt .title {transition:1.3s;}
.right_count.left-on {transition-delay: 1.2s;}
.botm_count.right-on {transition-delay: 1.6s;}

#Experience .title {
  display:block;
  width: 70vw;
  margin:0 auto;
  text-align:left;
  font-size:17px;
  font-weight:300;
  line-height:32px;
}

/*
#Experience .title strong {
font-weight:700 !important;
}
#Experience small {
display:block;
width:70vw;
font-family: 'Noto Sans KR';
font-size:0.875rem;	
text-align:left;
color:rgba(255, 255, 255, 0.5);
}
#Experience .sub_txt {
width:70vw;	
margin:0 auto;
text-align:center;
font-size:1rem;
line-height:1.4;
font-weight:normal;
word-break: keep-all;
color:rgba(255, 255, 255, 0.5);
}
.count li.z-scroll.right-on {
transition-delay: 0.2s;
}
.count li.two.z-scroll.right-on {
transition-delay: 0.4s;
}
.count li.three.z-scroll.right-on {
transition-delay: 0.6s;
}
#Experience .title {
transition-delay: 0s;
}
#Experience small {
transition-delay: 0.4s;
}
.sub_txt.z-scroll.right-on {
transition-delay: 0.8s;
}
*/

/*////////// sec04 끝 - 어디서도 경험하지 못한 브랜드의 답 ~ //////////*/


#Filmo {
  position: relative;
  background-color:#12161E;
}

.Filmo_wrap {
  margin:3% auto 0 auto;

}

.filmo_outline {right:-160px;top:-5%;-webkit-text-stroke: 1px #fff;color:#fff;font-size:150px;font-weight:800;position:absolute;
  -webkit-text-fill-color: #12161E; /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 0.5px;
  -webkit-text-stroke-color: white;
}
.filmo_outline.z-scroll3.left-on {
  opacity: 0.5;
  transition: 1.2s;
  transition-delay: 2s;}

.filmo_tab {z-index:1;margin-top:7%;}
.filmo_tab li {float:left;color:#fff;padding:0px 22px ;cursor: pointer;font-size:16px;}

.filmo_outline.z-scroll3.left-on {transition-delay: 0.5s; opacity:0.5;}
#tab1 .swiper-slide.up-on {transition-delay: 1.2s;}
#tab1 .swiper-slide:nth-child(2).up-on {transition-delay: 1.3s;}
#tab1 .swiper-slide:nth-child(3).up-on {transition-delay: 1.4s;}
#tab1 .swiper-slide:nth-child(4).up-on {transition-delay: 1.5s;}
#tab1 .swiper-slide:nth-child(5).up-on {transition-delay: 1.6s;}
#tab1 .swiper-slide:nth-child(6).up-on {transition-delay: 1.7s;}
#Filmo .filmo_outline {top:17%;}
.swiper-container .swiper-wrapper {cursor:pointer;}
.swiper-container .swiper-wrapper div.filmo_imgWrap {display:inline-block; position: relative;}
.swiper-container .swiper-wrapper div.filmo_imgWrap .play_icon {transform:translateX(-50%); top:-8%}
.swiper-container .swiper-wrapper div:nth-child(2n) .play_icon {}
.swiper-container .swiper-wrapper div.up-on .filmo_imgWrap {
  opacity:0.7;
  cursor: pointer;
}
.swiper-container .swiper-wrapper div.up-on:hover .filmo_imgWrap {
  opacity:1;
  filter: none !important;
  -webkit-filter:none;
}


#tab2 .swiper-slide.up-on {transition-delay: 1.2s;}
#tab2 .swiper-slide:nth-child(2).up-on {transition-delay: 1.3s;}
#tab2 .swiper-slide:nth-child(3).up-on {transition-delay: 1.4s;}
#tab2 .swiper-slide:nth-child(4).up-on {transition-delay: 1.5s;}
#tab2 .swiper-slide:nth-child(5).up-on {transition-delay: 1.6s;}
#tab2 .swiper-slide:nth-child(6).up-on {transition-delay: 1.7s;}



#tab3 .swiper-slide.up-on {transition-delay: 1.2s;}
#tab3 .swiper-slide:nth-child(2).up-on {transition-delay: 1.3s;}
#tab3 .swiper-slide:nth-child(3).up-on {transition-delay: 1.4s;}
#tab3 .swiper-slide:nth-child(4).up-on {transition-delay: 1.5s;}
#tab3 .swiper-slide:nth-child(5).up-on {transition-delay: 1.6s;}
#tab3 .swiper-slide:nth-child(6).up-on {transition-delay: 1.7s;}

.filmo_btm_txt {width:40vw;margin:auto;text-align:center;color:#fff;line-height:26px;}
.filmo_btm_txt.z-scroll2.up-on {
  transition: 0.7s;
  transition-delay: 1.5s;}



/*////////// sec05 시작 - 이제, 보이지 않는 가치를 만나보세요 //////////*/
#Contact{
  position: relative;
  background-color:#12161E;
  overflow: hidden;
  padding:100px 0 0;
}
#Contact .title {
  margin-top: 6vh;
  text-align:center;
}
.form-box {
  margin:5vh auto;
  width: 120px;
  height: 120px;
  line-height:120px;
  font-size:1.25rem;
  font-weight:600;
  background:#fff;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.1);
  text-align:center;
}
.form-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  margin:5vh auto 0;
  padding:48px 58px;
  background: #fff;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.1);   
  opacity:0;
}
.form {
  position:relative;
  overflow: hidden;
  width: 100%;
  height: 100%;	    
}
.form-in {
  width: 90%;
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
}
.form-wrap.big {
  animation-name: big;
  animation-duration: 0.6s;
  animation-timing-function: ease-in-out;
  animation-delay: 1.2s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-play-state: running;
  opacity: 1;  
}
.form.big2 {
  animation-name: big2;
  animation-duration: 0.6s;
  animation-timing-function: ease-in-out;
  animation-delay:  1.2s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-play-state: running;
  opacity: 1;
}

.copyright {
  text-align:center;
  font-size:0.6rem;
  margin-top:5.0vh;
  bottom:0;
  color:#ccc;
  padding-bottom:4vh;

}

@keyframes big {
  0% {
    width: 120px;
    height: 120px;
    padding: 0;
    border: 0;
  }
  50% {
    width: 60vw;
    height: 120px;
  }
  100% {
    width: 60vw;
    height: calc(100% - 6vh);
    padding: 10px;
  }
}
@keyframes big2 {
  0% {
    border: none;
  }
  100% {
    border: 1px solid #ccc;
  }
}
.form-wrap p.tit {
  font-size:1.2rem;
  font-weight:600;
}
.form-wrap p {	
  margin-bottom:3vh;
  font-size:1rem;
  line-height: 1.6;
  font-weight:500;
  transform: skew(-0.04deg);
}
.form-wrap p b {
  font-weight:800;
}
.writer, .number {
  width: 48.5%;
  float:left;
}
.writer.mobile {
  display:none;
}
.number {
  float:right;
}
.form-wrap select {
  font-family: "Noto Sans CJK KR";
  width: 48.5%; /* 원하는 너비설정 */
  height: 54px;
  line-height: 1;
  border:none;
  border-bottom:1px solid #E8E8E8;
  padding: 0 10px;
  font-size: 1rem;
  color:#999999;
  margin-bottom: 5px;
  -webkit-appearance: none;
  -moz-appearance: none;  
  cursor: pointer;
  background:none;
  transition:all 0.4s;
  box-shadow: none !important;
  border-radius: none !important;
}
.form-wrap select.plus {
  transition-delay: 1s;
  background: url("../images/arrow.svg") no-repeat 96% 50%;
}
.form-wrap select::-ms-expand {
  display: none;
}
.form-wrap input[type="text"] {
  font-family: "Noto Sans CJK KR";
  width: 100%;
  height: 54px;
  line-height: 1;
  margin-bottom: 2vh;
  font-size: 1rem;
  color:#333;
  text-indent: 10px;
  border:none;
  border-bottom:1px solid #E8E8E8;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: border-box;

  box-shadow: none !important;
  border-radius: none !important;
}
.form-wrap input::placeholder {
  font-family: "Noto Sans CJK KR";
  font-size: 1rem;
  color:#999999;
  opacity: 1;
}
.form-wrap input[type="text"]:first-child {
  margin-right:2%;
}
.form-wrap textarea {
  font-family: "Noto Sans CJK KR";
  width: 100%;
  height: 14vh;
  margin-bottom:14px;
  padding: 14px;
  border:1px solid #E8E8E8;
  font-size: inherit;
  font-size: 1rem;
  text-indent: 0;
  /*resize: vertical;*/
  overflow-y:auto;
  vertical-align: middle;
  -webkit-appearance: none;
  box-shadow: none !important;
  box-sizing: border-box;	
}
.form-wrap textarea::placeholder {
  font-family: "Noto Sans CJK KR";
  font-size: inherit;
  font-size: 1rem;
  font-weight:400;
  color:#999999;
  opacity: 1;
}
.form-write:after {
  content:"";
  display:block;
  clear:both;
}
.check {
  position: relative;
  display: block;
  width: 100%;
}
.check input[type="checkbox"] {
  display: none;
}
.check input[type="checkbox"] + label {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 1px solid #ccc;
  border-radius: 3px;
  cursor: pointer;
  background: url("../images/check.svg") #fff no-repeat center/10px 10px;
}
.check:after {
  display: block;
  clear: both;
  content: "";
}
.check input[type="checkbox"]:checked + label {
  background: url("../images/check_white.svg") #333 no-repeat center/10px 10px;
  border-color: #333;
}
.check input[type="checkbox"] + label span {
  position: absolute;
  top: 1px;
  left: 26px;
  display: block;
  font-family: "Noto Sans CJK KR";
  font-size: 1rem;
  color: #999999;
}
.check input[type="checkbox"] + label span a {
  text-decoration:underline;
  color: #333;
}
.submit {
  margin:4vh auto 0;
  width:194px;
  height:50px;
  font-size: 1.25rem;
  line-height: 50px;
  background:#111;
  color:#fff;
  font-weight:bold;
  text-align:center;
  letter-spacing: 1px;	
  cursor: pointer;
}
#Contact h1 {
  transition-delay: 0.4s;
}
.form-wrap.up-on {
  transition-delay: 0.8s;
}
#layerPopup {
  position:absolute;
  top:20%;
  right:10px;
  bottom:10px;
  left:10px;
  z-index:999;
  margin:0 auto;
  display:none;
  height:auto;
  background-color:#fff;
  width:50%;
  box-shadow: 0px 0px 30px 150px rgba(0, 0, 0, 0.8);
}
#layerPopup.open {
  display:block;
}
.header {
  position:relative;
  height:50px;
  line-height:50px;
  width: 96%;
  margin: 0 auto;
}
.btn_close_layer {
  position:absolute;
  top:15px;
  right:15px;
  display:block;
}
.layer-containers {
  position:absolute;
  top:50px;
  right:0;
  bottom:0;
  left:0;
  width: 86%;
  margin: 0 auto;
}
.inner {
  height:100%;
}
.box {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  padding:20px 10px;
  overflow:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.box p.tit {
  font-size:1.0rem;
  color:#000;
  font-weight:bold;
}
.box p {
  margin:10px 0;
  font-size:13px;
  font-weight:normal;
  line-height:1.8;
  color:#535353;
}
.box small {
  font-size:12px;
  opacity: 0.8;
}
/*////////// sec05 끝 - 이제, 보이지 않는 가치를 만나보세요 //////////*/

/*////////// ie-css //////////*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .scroll {
    transform : rotate(-90deg) skew(-0.2deg) !important;
    writing-mode: inherit !important;
  }
  #fp-nav ul, .fp-slidesNav ul {margin:50px 0 0 24px !important;}
  select::-ms-expand { display: none; }
  .s-img-wrap {height:100%; margin-top: 11%;}
}
/*////////// ie-css //////////*/


@media all and (max-width:1380px){  
  .slogon-wrap {width:90%; min-width:90%;}
  .ex-video, .count, #Experience small, #Experience .sub_txt, .port_in .sub_txt {width:80%;}
  .right_count {
    font-size:80px;
    margin-top:15vh;

  }
  .botm_count {font-size:80px;}
  .about-txt {margin-top:-20%;}
  @keyframes big {
    0% {
      width: 120px;
      height: 120px;
      padding: 0;
      border: 0;
    }
    50% {
      width: 75%;
      height: 120px;
    }
    100% {
      width: 75%;
      height: 94%;
      padding: 10px;
    }
  }
  .count li {font-size:4.25rem;}
  .copyright{margin-top: 4vh; padding-bottom: 2vh;}
  #layerPopup {width:90%;}

  .swiper-slide {
    width:24% !important;
  }

}

@media all and (max-width:1200px){ 
  .pc {display:none;}
  .mt {display:block;}
  .title {font-size:2.125rem;}
  .ms-in {width:500px;}
  .main-slogon svg {width: 240px;}
  .sec-2 img, .sec-3 img {width: 100%;}
  .count li {width: 31.5%;}
  .count li:first-child {width: 37%;}

  .about_thum {
    width:70vw;
    margin:0 auto 0 auto;
    top:-50%;
    transform: translateY(-50%);

  }
  .about_thum > div div {
    position:absolute;
    width:45% !important;
    opacity:0.8;
    cursor: pointer;
  }
  .about_thum .about_img01 {margin-top:17%;left:0%;}
  .about_thum .about_img02 {margin-top:6%;left:53%;}
  .about_thum .about_img03 {margin-top:38%;left:53%;}
  .about_thum .about_img04 {margin-top:50%;left:0%;}
  .about_thum .about_img05 {margin-top:70%;left:53%;}


  .ab_wrap {
    margin-top:-10%;
  }


  /* 1 section */
  .main-slogon {

  }
  .main-slogon div {
    font-size:120px;
    line-height:90px;
    /*flex-direction: column-reverse;*/
  }

  .main-slogon span {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
  }
  .main_txt1 {
    position:revert;
    width:400px;
    /*float:left;*/
    left:0;
    line-height:30px;
    font-size:15px;
    border-top:0.5px solid #fff;
    margin-top:60px;
  }
  .main_txt1 span {text-align:left;}
	
	em.o-cover {
	background-size:57px;
	display:inline-block;
	width:59px;
	height:59px; 
	left:5px;
	top:27px;
}




  /* 2 */
  #Portfolio .title {
    font-size:24px;
    line-height:38px;
  }
  #Portfolio .sub_txt {
    font-size:15px;
    line-height:30px;
  }
  .swiper-slide {
    width:30% !important;
  }

  /* */
	.filmo_btm_txt {width:60vw;margin:3% auto 0 auto;}
}




@media all and (max-width:980px){ 
  .count li {font-size:3.5rem;}	
  .count li p{font-size: 1.1rem;padding:0 10px;}
  .port_in .sub_txt, #Experience .sub_txt{font-size: 0.8rem;}		
  .ex-video {height: 34vh;}
  /*201112 .ex-video iframe {height:292px !important;}*/
  .form-wrap p {font-size:1.25rem; margin-bottom: 2vh;}    
  .form-wrap select, .writer, .number {width:100%; float:none;}
  .form-wrap select, .form-wrap input[type="text"] {height:40px;}
  .form-wrap input[type="text"]:first-child {margin-right:0; margin-bottom: 5px;}
  .form-wrap select {padding:0 14px;}
  .form-wrap select, .form-wrap input[type="text"], .form-wrap textarea, .check input[type="checkbox"] + label span{font-size: 0.9rem;}	
  .form-wrap input::placeholder {font-size: 0.9rem;}
  .form-wrap textarea::placeholder  {font-size: 0.9rem;}
  .submit {height:44px; line-height:44px;}
  #layerPopup {position:absolute; top: 12%;}
  #Contact {position:relative;}
  .layer-containers {width:100%;}
  .btn_close_layer {top: 25px;}
  .header {
    position: relative;
    height: inherit;
    line-height: inherit;
    width: 96%;
    margin: 0 auto;
    z-index: 999;
  }	
  .layer-containers {top: 10%;}
  .box {padding: 15px 25px;}
  .box p.tit {font-size:1.2rem; color:#000;}
  .box p {
    margin:30px 0;
    font-size:0.85rem;
    font-weight:normal;
    line-height:1.8;
    color:#535353;
  }
  .box small {font-size:12px; opacity: 0.8;}

  /* 3*/
  #Portfolio .title, #Portfolio .sub_txt  {
    text-align:center;
  }
  .port_txt {width:80%;margin:20vh auto 0 auto;float:none !important;}
  .outline_txt2 {
    text-align:center;
  }
  #Experience .title {
    font-size:15px;
  }
  .swiper-slide {
    width:34% !important;
  }

  .filmo_btm_txt {font-size:15px;line-height:28px;}
}

@media all and (max-width:790px){
  .count li {font-size:3rem;}
  .title{font-size: 1.8rem;}
#About h1.title {font-size:1.3em;}
  .about-txt {font-size:0.8rem;}
  .video.web {display:none;}  	  
  #About .video, #Experience .video {display:none;}
  #About {/*background: url("../images/about_bg_m.jpg") no-repeat top center; background-size: cover;*/}
  #Experience {background:#12161E url("../images/bg44.png") no-repeat center; background-size: cover;}
.section-img.mobile {display:block; position: absolute; top: 0px; left: 0px; min-width: 100vw; min-height: 100vh; width: auto; height: auto; z-index: -1; overflow: hidden;}
  .section-img.mobile img {width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
  .main-slogon div {font-size:80px;line-height:70px;}
  .main_txt1 {width: 70%; margin-top: 40px;}

  .main-slogon {
    /*margin-top:20vh;*/
  }
	em.o-cover {
	background-size:37px;
	display:inline-block;
	width:38px;
	height:38px; 
	left:4px;
	top:24px;
}

  /* 2 */
  #Portfolio .title {
    text-align:center;
    font-size:24px;
    line-height:38px;
  }
  #Portfolio .sub_txt {
    font-size:15px;
    line-height:30px;
    text-align:center;
  }
  .port_txt {
    width:96%;
    margin:18vh auto 0 auto;
    float:none;

  }
  /* 3 */

  .botm_count, .right_count {font-size:4rem;}
  .botm_count {
    margin-top:12vh;
    position:absolute;
  }
  .right_count {
    margin-top:12vh;
    float:right;
  }

  .tabs {
    margin:5% auto 10% auto;
  }

  .tabs .tablinks {
    margin:0 3px;
    font-size:16px;}

  .swiper-container .swiper-slide {
    width:50% !important;}

  .tab_content {
    height:auto;
    margin-top:20px;
    display:inlnie-block;
  }

  .swiper-container.swiper-slide {
    width:34% !important;
  }
  #Experience .title {display:none;}
  #Experience .title.m_title {display:block;}

.right_count span {padding-right:5px;}
}




@media all and (max-width:640px){ 
  #fp-nav, .nav li {display:none;}
  .nav li:nth-child(5) {display:block;}
  .count {margin: 6vh auto 0vh;}
  .count li {width:100%; margin-bottom:4.5vh;font-size: 2.625rem;}
  .count li:first-child {width:100%;}
  .s-img-wrap {width:70%;	}
  .title {font-size:1.75rem;}
  .nav_cantact {color:#fff;font-size:0.85rem !important;}
  .count li span {padding-bottom:12px;font-size: 1.1rem;}
  .count li p {display:none;}   
  .ex-video{margin:0 auto 5%;}
  #Home.wrap_inner {width:70vw;margin:auto;}

  #Portfolio .title{font-size:18px; line-height:32px;}
  #Portfolio .sub_txt {width:100%;margin:30px auto 0 auto;font-size:14px;}
  .title{font-size: 1.52rem;}
  .outline_txt1, .outline_txt2, .filmo_outline {font-size:90px}
  .outline_txt1 {top: 13%;}
  #Portfolio .wrap_inner {width:88vw;margin:auto;}

  #Experience .title{margin: 2vh auto 0;}
  .ex-wrap {width: 100%; position:absolute; top:50%; left: 50%; transform: translate(-50%, -50%);}
  #Contact .title{margin-top: 5vh;}
  .form-wrap textarea{height: 12vh;}
  .form-wrap p{margin-bottom: 1vh;}
  .copyright{padding-bottom: 0;}
  .submit{margin: 3vh auto 0; width: 150px; height: 40px; line-height: 40px;font-size:1.1rem;}
  .about_m{display: block;}
  .about_pct{display: none;}
  .about-txt .title{font-weight: 300; width:80%;}
  .play img {width:24px;}
  .ms-in {width:390px;}
  .main-slogon svg {width: 174px;}
  .sec-2 img, .sec-3 img {width: 80%;}
  #layerPopup {top:72px;}
  .box p.tit {font-size:0.8rem; color:#000;}
  .box p {margin:5px 0; font-size:0.6rem;}
  .box small {font-size:0.5rem; opacity: 0.8;}
  .section-img.mobile img {width: auto; height:100%;}
  .right_count {}
  .swiper-container .swiper-slide {
    width:55% !important;
    margin-right:30px !important;

  }
  .swiper-container .swiper-slide:nth-child(1) {
    margin-left: 7%;
  }
  .video {top:50%; left: 50%; transform: translate(-50%, -50%); height: 100%;}
  #Filmo .swiper-wrapper div {display: flex; flex-direction: column; padding-bottom:inherit;}
  #Filmo .swiper-slide span {position:inherit;margin-top:10px;}
  #Filmo .filmo_outline {left:0;}
  .tab_content {margin-top:0px;}
  .swiper-container .swiper-wrapper div:nth-child(2n) {margin-top: 40px;}

  .about_thum {display:none;}
  .swiper-container2 {display:block; margin-top: 100px;}
  .swiper-container2 .swiper-slide {width:80% !important;}
  .about-txt {margin:0 auto}
  .swiper-container2 .swiper-slide .sct-play-box {display:block;}
  .swiper-container2 .swiper-slide .play_icon {background-size:70px;}
  #About .ab_wrap {margin-top:0;}
  .swiper-container .swiper-wrapper div {width:auto; height:inherit;}
  .swiper-container {margin-top: 30px;}

  .tabs {
  width:86vw;}



}

@media all and (max-width:576px){
  /*#Experience .title{margin: 1vh auto 0;}*/
  .section#Home {padding:0;}
  .ex-video {height:26vh;}
  /* 201112 .ex-video iframe {height:224px !important;}*/
  .submit {font-size: 0.75rem;}
  .wrap_inner.m_inner {position:absolute; left:50%; transform:translate(-50%, -45%);}
  #Portfolio .wrap_inner {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -40%);}
  .port_txt {margin:inherit;}
} 

@media all and (max-width:480px){

  .main-slogon div {
    font-size:70px;
    line-height:57px;

  }
  .main_txt1 {width:100%;margin-top:20px;}

	em.o-cover {
	background-size:33px;
	display:inline-block;
	width:33px;
	height:33px; 
	left:3px;
	top:18px;
}

  .header-in {max-width:80%;}
  .logo img {width:110px;}
  .title {width:80%;margin:auto; font-size:1.313rem;}	
  .about-txt small, #Experience small{font-size: 0.813rem;}
  .count li p{font-size: 0.85rem;}
  .about-txt .title{width: 100%;}
  .title span{display: inline;}
  #Experience .title{margin: 0 auto;line-height:28px;text-align:center;}
  .count li{margin-bottom: 3.5vh;font-size: 2.5rem;}
  .count li span{font-size: 1rem;padding-bottom: 10px;}    
  #Contact .title{margin-top: 0;}
  .form-wrap{margin:3vh auto 0; height:10vh;}
  .botm_count, .right_count {font-size:3.0rem;line-height:21px;}
  .exper_txt {margin-top:-20%}
  @keyframes big { 
    0% {
      width: 120px;
      height: 120px;
      padding: 0;
      border: 0;
    }
    50% {
      width: 90%;
      height: 120px;
    }
    100% {
      width: 90%;
      height: 86.5%;
      padding: 10px;
    }
  }
  .ms-in {width: 300px; left:60%;}
  .main-slogon svg {width: 113px;}
  .sec-2 {width:56%;}
  .sec-2 img, .sec-3 img {width: 60%;}
  .layer-containers {top: 2%;}
}	

@media all and (max-width:380px){
  .ex-video {margin: 0 auto 6%}
  .count li p {margin-top: 10px;font-size: 0.85rem;}
  #Contact {padding-top:90px;}
  .form-wrap select, .form-wrap input[type="text"] {height: 32px;}
  .form-wrap select, .form-wrap input[type="text"], .form-wrap textarea, .check input[type="checkbox"] + label span {font-size: 0.8rem;}
  .form-wrap input::placeholder {font-size: 0.8rem;}
  .form-wrap textarea::placeholder {font-size: 0.8rem;}	
  .form-wrap select.plus {background-size: 10px;}
  .form-wrap textarea {padding: 10px;}	 
  .swiper-container .swiper-slide {
    width:60% !important;}
  .swiper-container .swiper-slide span {
    top:0;
    margin-top:80%;}
}



@media all and (max-width:320px){	 
  #Portfolio .title{width: 70%; margin: auto;}
  .ex-video{height: 25vh;}
  .title{font-size: 1.3rem;}
  .about-txt small, #Experience small {font-size: 0.9rem;}
  #Experience .title {margin: 0vh auto 0;} 
  @keyframes big {
    0% {
      width: 120px;
      height: 120px;
      padding: 0;
      border: 0;
    }
    50% {
      width: 80%;
      height: 120px;
    }
    100% {
      width: 80%;
      min-height:84%;
      padding: 10px;
    }
  }
  .form-wrap textarea {height:10vh !important; padding:6px !important;}
  .form-wrap select, .form-wrap input[type="text"], .form-wrap textarea, .check input[type="checkbox"] + label span {font-size: 0.75rem;}	
  .writer {display:none;}
  .writer.mobile {display:block; width:49%; float:right;}
  .place {width:49%; float:left;}
  .check input[type="checkbox"] + label {width:16px; height:16px;}
  .submit{height: 34px; line-height: 34px; font-size: 0.85rem;}
}