body{overflow: hidden;min-height:100%; height:100%;}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html {
	-ms-touch-action: none;
}

#sub-content{
	min-height: calc(100vh - 90px);
}

#myVideo_wrap {
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	position: absolute;
}
#myVideo {
    z-index: -1;
    width: 100vw;
		height: 100vh;
    position: absolute;
		object-fit: cover;
}

#searchWrap {position: relative; width: 100%; height: 100%; box-sizing: border-box; background: url(/images/bg_w.png) repeat left top;}
    #searchWrap .info {position: absolute; left: 40px;top: 86px; color:#fff; font-size: 15px; line-height: 24px;}
		#searchWrap .info p {padding: 15px 0 0; font-size: 32px; line-height: 42px; font-family: 'Rising_CHAI_Light';}
		#searchWrap .info p strong {font-family: 'Rising_CHAI_Extra_Bold';}
		#searchWrap .info p>span {font-size:19px;font-family: 'Nanum Gothic'; font-weight: bold; }
		#searchWrap .info div>span {position: relative; display: block; padding: 0 0 20px; margin-bottom: 0; font-size: 19px;}
		#searchWrap .info div>span::before {position: absolute; content: ""; width: 30px; bottom:0; left: 0; border-top: 1px solid #fff;}
		#searchWrap .info img.logo {margin-top: 20px;}

		#searchWrap .info em {display: inline-block; height: 60px;}
		#searchWrap .info em i {display: inline-block; height: 60px;}
		#searchWrap .info em i.d_start {width: 19px; background: url(/images/font_d.png) no-repeat left top;}
		#searchWrap .info em i.d_bg {width: 2px; background: url(/images/font_d.png) no-repeat center top;}
		#searchWrap .info em i.d_end {width: 36px; background: url(/images/font_d.png) no-repeat right top;}

		#searchWrap .btn_interview {position: absolute; right: 188px; bottom: 43px;}
		#searchWrap .a_logo {position: absolute; right: 40px; bottom: 30px;}

		#searchWrap .search {position:absolute;left:0;top:0;width:100%;height:100%; display: flex; height: 100% ;justify-content: center; align-items: center; padding-bottom: 250px; box-sizing: border-box;}
			#searchWrap .search .cha1 {position: absolute; left: 50%; top: 50%; margin-top: -218px; margin-left: 190px;}
			#searchWrap .search .cha2 {position: absolute; left: 66%; top: 15%; margin-top: 0; animation: chaAni 1.2s linear infinite alternate;}
			#searchWrap .search p.in {position: relative; width: 512px; border-radius: 30px; overflow: hidden}
			#searchWrap .search p.in input {width: 442px; height: 50px; outline: none; padding:0 26px; border:0; font-size: 22px; font-weight: bold; color:#000}
			#searchWrap .search p.in input::placeholder { color:#000}
			#searchWrap .search p.in a {position: absolute; display: block; width: 70px; height: 50px; right:0; top: 0; background:#000 url(/images/ico_search.gif) no-repeat center 50%; z-index: 2}

		@keyframes chaAni {
			0% {margin-top: 0px;}
			50% {margin-top: 10px;}
		}

		#searchWrap .search div.text_list { padding-bottom: 67px;}
			#searchWrap .search div.text_list span {position: absolute; left: 50%; width: 512px; transform: translateX(-50%); padding-left: 28px; font-size: 22px; color:#fff; line-height: 67px; opacity: 0; box-sizing: border-box;}
			#searchWrap .search div.text_list span {display: block;}
			#searchWrap .search div.text_list span.on {color:#000; font-weight: bold; opacity: 1}

			#searchWrap .search div.text_list span.p1 {margin-top: -67px; opacity: 0.5;}
			#searchWrap .search div.text_list span.p2 {margin-top: -134px;opacity: 0.2}
			#searchWrap .search div.text_list span.p3 {margin-top: -201px;opacity: 0}
			#searchWrap .search div.text_list span.p4 {margin-top: -268px;opacity: 0}
			#searchWrap .search div.text_list span.n1 {margin-top: 67px; opacity: 0.5;}
			#searchWrap .search div.text_list span.n2 {margin-top: 134px;opacity: 0.2}
			#searchWrap .search div.text_list span.n3 {margin-top: 201px;opacity: 0}
			#searchWrap .search div.text_list span.n4 {margin-top: 268px;opacity: 0}

			#searchWrap .search div.search_layer {position: absolute; top: 50%; left: 50%; width: 512px; height:265px; transform: translate(-50%, -50%); margin-top: -17px; padding: 65px 25px; background: #f1f1f1;  border-radius: 30px; box-sizing: border-box;}
			#searchWrap .search div.search_layer p {overflow-y: scroll; height: 190px;}
			#searchWrap .search div.search_layer p a {display: block; font-size: 15px; line-height: 30px; }
			#searchWrap .search div.search_layer p a span {color:#00aeff; font-weight: bold;}

			#searchWrap .search div.search_layer_no {position: absolute; top: 50%; left: 50%; width: 512px; height:265px; transform: translate(-50%, -50%); margin-top: -17px; padding: 65px 25px; background: #f1f1f1;  border-radius: 30px; box-sizing: border-box;}
			#searchWrap .search div.search_layer_no dl {line-height: 30px; font-size: 15px; margin-bottom: 25px;}
			#searchWrap .search div.search_layer_no dl dt {font-size: 16px; color:#000; font-weight: bold;}
			#searchWrap .search div.search_layer_no p {display: block; font-size: 15px; line-height: 30px;}
			#searchWrap .search div.search_layer_no p a span {color:#00aeff; font-weight: bold;}

		#searchWrap .main_down {position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%);}

		.interview_layer {overflow-y: auto; position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding: 42px; background: #1e1e1f; z-index: 999;}
				.interview_layer .inner {position: relative;}
				.interview_layer .logo {position: absolute; left: 0; top: 0; z-index: 1;}
				.interview_layer .close {position: fixed; right: 42px; top: 42px; z-index: 1;}
				.interview_layer .content {position: relative; max-width: 1550px; margin: 0 auto; text-align: center;}
				.interview_layer .content .btn_wrap {position: absolute; left: 1212px; top: 874px; width: 113px;}
				.interview_layer .content .btn_wrap a {display: inline-block; border-radius: 50%; background: #353638; transition: all .3s;}
				.interview_layer .content .btn_wrap a:hover {background: #ed1b2b;}
				.interview_layer .content .btn_wrap a:last-child {margin-left: 9px;}

				.interview_layer .content .title_wrap {overflow: hidden; height: 875px; padding-left: 235px; padding-top: 53px; text-align: left; box-sizing: border-box;}
				.interview_layer .content .title_wrap img {float: left; opacity: 0;}
				.interview_layer .content .title_wrap .txt_box {padding-left: 84px; float: left; line-height: 32px;}
				.interview_layer .content .title_wrap .txt_box .stit {overflow: hidden; margin-bottom: 20px; font-weight: bold; font-size: 30px; color: #f3f3f3;}
				.interview_layer .content .title_wrap .txt_box .stit>span {float: left; opacity: 0;}
				.interview_layer .content .title_wrap .txt_box .stit>span.s {padding-right: 6px;}
				.interview_layer .content .title_wrap .txt_box .txt {font-size: 18px; color: #b5b5b5; opacity: 0;}
				.interview_layer .content .video_list {position: absolute; left: 0; top: 237px; width: 100%; height: 613px; opacity: 0;}
				.interview_layer .content .video_list .list-item {overflow: hidden; position: absolute; width: 1089px; height: 613px; border-radius: 24px; transform-origin: left center; pointer-events: none;
				 transition: .3s ease;}
				.interview_layer .content .video_list .list-item.on {left: 235px; z-index: 10; pointer-events: auto;}
				.interview_layer .content .video_list .list-item.n1 {left: 405px; transform: scale(.91); z-index: 9;}
				.interview_layer .content .video_list .list-item.n2 {left: 575px; transform: scale(.82); z-index: 8;}
				.interview_layer .content .video_list .list-item.n3 {left: 735px; transform: scale(.74); z-index: 7;}
				.interview_layer .content .video_list .list-item.p {opacity: 0; left: 65px; transform: scale(.91); z-index: 5;}
				.interview_layer .content .video_list .list-item.none {opacity: 0; left: 735px; transform: scale(.74); z-index: 5;}
				.interview_layer .content .video_list .list-item iframe {opacity: 0;}
				.interview_layer .content .txt_list {padding: 0 235px; opacity: 0;}
				.interview_layer .content .txt_list .item {display: none; text-align: left; color: #fff; opacity: 0;}
				.interview_layer .content .txt_list .item.on {display: block; opacity: 1; animation: interviewAni .6s linear forwards;}
				.interview_layer .content .txt_list .item .cate {display: inline-block; margin-bottom: 15px; padding: 6px 12px; border-radius: 30px; background: #ed1b2b; font-weight: bold; font-size: 14px;}
				.interview_layer .content .txt_list .item .cate.teasing {background: #5c44ec;}
				.interview_layer .content .txt_list .item .tit {margin-bottom: 20px; font-weight: bold; font-size: 22px;}
				.interview_layer .content .txt_list .item .txt {font-size: 17px; line-height: 25px;}

@keyframes interviewAni {
	0% {opacity: 0;}
	100% {opacity: 1;}
}


#main {position: relative; height: 100%; background: #212121; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr}
  #main>div {position: relative; width: 100%; border-right:1px solid #383838; color:#fff;}

  .wrapper {
  	position: absolute;
  	z-index: 1;
    top: 0;
  	bottom: 0;
  	left: 0;
  	width: 100%;
  	overflow: hidden;
  }

  #main #scroller {
  	position: absolute;
  	z-index: 1;
     color:#fff;
  	-webkit-tap-highlight-color: rgba(0,0,0,0);
  	width: 100%;
  	-webkit-transform: translateZ(0);
  	-moz-transform: translateZ(0);
  	-ms-transform: translateZ(0);
  	-o-transform: translateZ(0);
  	transform: translateZ(0);
  	-webkit-touch-callout: none;
  	-webkit-user-select: none;
  	-moz-user-select: none;
  	-ms-user-select: none;
  	user-select: none;
  	-webkit-text-size-adjust: none;
  	-moz-text-size-adjust: none;
  	-ms-text-size-adjust: none;
  	-o-text-size-adjust: none;
  	text-size-adjust: none;

    padding: 55px 10px;
  }



  #main h1 {padding: 0 10px; font-family: 'Rising_CHAI_Extra_Bold'; font-size: 65px;  color:#fff; letter-spacing: -0.05em; font-family: 'Rising_CHAI_Extra_Bold';}
    #main p {padding: 15px 0 30px; font-size: 15px; color:#909090; line-height: 180%; letter-spacing: 0em; font-family: 'Nanum Gothic'; font-weight: normal;}

		#main video {display: block;}

   nav>div {padding: 50px 10px ; font-size: 35px; color:#434343;  line-height: 120%; letter-spacing: -0.03em; border-top: 1px solid #383838}
   nav>div a {color:#434343;display: inline-block;}
   nav>div strong {font-family: 'Rising_CHAI_Extra_Bold';}
	 nav>div a:hover { animation: menu_over 0.3s ease-in-out ;transform: translateY(-3px);}

   @keyframes menu_over {
     0% {transform: translateY(0);}
     100% {transform: translateY(-3px);}
   }

   nav>div span {font-family: 'dotum'}
   nav>div span::before {content: "-"}
   nav>div p,  nav> ul {display: none}

   nav>div.on p,  nav div.on ul a {display: block; font-size: 15px; line-height: 30px; color:#fff; text-transform:uppercase;}
   nav div.on ul{padding-top: 10px;}
   nav>div.on {ont-size: 35px;}
   nav>div strong {letter-spacing: -0.05em;}
   nav>div.on span {font-family: 'dotum'; font-weight: 100 !important}
   nav>div.on span::before {content: "+"}
   nav>div.on p {padding: 10px 0; font-size: 15px; color:#909090; line-height: 180%}
   nav>div.on p.ty {padding: 5px 0 0;}
   nav>div.on p.ac {padding-bottom: 0; font-size: 28px; line-height: 42px; color:#fff; font-family: 'Rising_CHAI_Light';}

   nav>div.on ul p {margin-bottom: -10px; color: #909090}
   nav>div.on p.co_w { color:#fff;}

	 #contact nav>div.on p {margin: -10px 0 0; font-weight: bold; padding-bottom: 0 !important;}
	 #contact nav>div.on em {color:#32a1ff; font-weight: bold;}
	 #contact nav>div.on .ty li {padding: 10px 0;}

   nav>div .atoz {font-size: 30px; color:#fff; letter-spacing: 0.7em; line-height: 50px;}

   a.btn {display: inline-block; padding:0 15px; margin-left: 14px; font-size: 15px; line-height: 23px; height: 25px; background: #ffffff; border-radius: 12px;}
   a.box_btn {display: inline-block; padding:0 50px; font-size: 16px;  line-height: 45px; height: 47px; margin-top: 10px; color: #ffffff; border:1px solid #fff; border-radius: 2px;}
   a.box_btn em {font-style: normal; font-size: 12px; display: inline-block; margin-left: 5px; vertical-align: middle}
	 #careers a.box_btn:hover {border:1px solid #ff5d32; color: #ff5d32; animation: none; transform: none;}

   #work div.on strong, #work div.on span, #work ul li a.on {color:#00ff0c;}
   #pride div.on strong, #pride div.on span, #pride ul li a.on {color:#00ffcc;}
   #news div.on strong, #news div.on span, #news ul li a.on {color:#8d31ff;}
   #careers div.on strong, #careers div.on span, #careers ul li a.on {color:#ff5d32;}
   #contact div.on strong, #contact div.on span, #contact ul li a.on {color:#32a1ff;}

	 .main-footer {position: relative; bottom: -20px; margin-left: -10px; margin-right: -10px;}
	 .main-footer a {color:#909090; text-decoration: underline; padding-right: 15px;}
	 .main-footer img {max-width: 100%;}
	 .main-footer p {padding: 20px 0 !important; background: #000; text-align: center;}

@media screen and (max-width:1680px) {
   #main h1 {font-size: 3.1vw;}
   #main h1 p {font-size: 0.8vw;}
}