body{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 - 100px);
}

#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: 100vh; height: calc(var(--vh, 1vh) * 100); box-sizing: border-box; background: url(/images/bg.png) repeat left top;}
    #searchWrap .info {position: absolute; left: 40px;top: 100px; 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 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; margin: 0 -1px}
		#searchWrap .info em i.d_end {width: 36px; background: url(/images/font_d.png) no-repeat right top;}

		#searchWrap img.logo {position: absolute; left: 40px; bottom: 110px;}
		#searchWrap .a_logo {position: absolute; right: 40px; bottom: 110px;}
		#searchWrap .btn_interview {position: absolute; display: block; right:160px; bottom: 110px;z-index: 2}
		#searchWrap .btn_interview.on {z-index: 1}

		.search {position:absolute; left:0; top:0; width:100%; display: flex; height: 100vh ;justify-content: center; align-items: center; padding-bottom: 50px; box-sizing: border-box;z-index: 2}
			.search p.in {position: relative; width: calc(100% - 80px); margin-top: 70px; border-radius: 60px; overflow: hidden}
			.search p.in input {width: 89%; height: 90px; outline: none; padding:0 35px;  border:0; font-size: 32px; font-weight: bold; color:#000}
			.search p.in input::placeholder { color:#000}
			.search p.in a {position: absolute; display: block; width: 90px; height: 90px; right:0; top: 0; background:#000 url(/m/images/ico_search.gif) no-repeat center 50%; z-index: 2}
			.search p.in a.btn-back {display: inline-block; width: 50px;height: 50px;left: 28px;top: 23px; background:none}

		.search.on { top:0; padding-top: 86px; align-items: flex-start;}
			.search.on p.in {width: 100%; padding: 0 0 15px; margin-top: 0; box-shadow: 0 8px 10px #f4f4f4; border-radius: 0;  background: url(/m/images/ico_search.png) no-repeat 37px 42%; text-indent: 50px; z-index: 1;}
			.search.on p.in input {position: relative; width: 93%; background: transparent; z-index: 1;}
			.search.on p.in input:focus {background: transparent;}
			.search.on p.in a {border-radius: 100%}

		.search .cha1 {position: absolute; left: 50%; top: 50%; margin-top: -102px; margin-left: 190px;}
		.search .cha2 {position: absolute; left: 66%; top: 15%; margin-top: 0; animation: chaAni 1.2s linear infinite alternate;}

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

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

			div.text_list span.p1 {margin-top: -80px; opacity: 0.5;}
			div.text_list span.p2 {margin-top: -138px;opacity: 0.2}
			div.text_list span.p3 {margin-top: -201px;opacity: 0}
			div.text_list span.p4 {margin-top: -268px;opacity: 0}
			div.text_list span.n1 {margin-top: 80px; opacity: 0.5;}
			div.text_list span.n2 {margin-top: 138px;opacity: 0.2}
			div.text_list span.n3 {margin-top: 201px;opacity: 0}
			div.text_list span.n4 {margin-top: 268px;opacity: 0}

			div.search_layer {position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; padding: 65px 35px; background: #fff; box-sizing: border-box;z-index: 1}
			div.search_layer p {overflow-y: scroll; height: 400px; margin-top: 165px;}
			div.search_layer p a {display: block; font-size: 25px; line-height: 70px; }
			div.search_layer p a span {color:#00aeff; font-weight: bold;}

			div.search_layer_no {position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; padding: 240px 35px 0; background: #fff; box-sizing: border-box;z-index: 1}
			div.search_layer_no dl {line-height: 50px; font-size: 25px; margin-bottom: 25px; color:#323232;}
			div.search_layer_no dl dt {color:#000; font-weight: bold;}
			div.search_layer_no p {display: block; font-size: 25px; line-height: 55px; color:#000}
			div.search_layer_no p a span {color:#00aeff; font-weight: bold;}

			.interview_layer {overflow-y: auto; position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding: 62px 0; box-sizing: border-box; background: #212121; z-index: 9999;}
					.interview_layer .inner {position: relative;}
					.interview_layer .logo {position: absolute; left: 42px; top: -10px; z-index: 1;}
					.interview_layer .close {position: absolute; right: 42px; top: -10px; z-index: 1;}
					.interview_layer .content {position: relative; max-width: 100%; margin: 0 auto; text-align: center;}

					#ytplayer {
						/* position: absolute;
				    left: 50%;
				    top: 490px; transform: translateX(-50%); */
						margin-bottom: 25px;
						opacity: 0;
					}

					.interview_layer .content .title_wrap {}
					.interview_layer .content .title_wrap img {opacity: 0;}
					.interview_layer .content .title_wrap .txt_box {padding-bottom: 65px; line-height: 32px; text-align: center;}
					.interview_layer .content .title_wrap .txt_box .stit {overflow: hidden; display: inline-block; margin-bottom: 20px; font-weight: bold; font-size: 35px; 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: 20px; color: #b5b5b5; letter-spacing: -1px; opacity: 0;}
					.interview_layer .txt_list {padding: 0 37px 80px; opacity: 0;}
					.interview_layer .txt_list .item {text-align: left; color: #fff; opacity: 0; animation: interviewAni .6s linear forwards;}
					.interview_layer .txt_list .item .cate {display: inline-block; margin-bottom: 25px; padding: 6px 15px; border-radius: 30px; background: #ed1b2b; font-weight: bold; font-size: 16px;}
					.interview_layer .txt_list .item .cate.teasing {background: #5c44ec;}
					.interview_layer .txt_list .item .tit {margin-bottom: 18px; font-weight: bold; font-size: 25px;}
					.interview_layer .txt_list .item .txt {font-size: 20px; line-height: 28px; word-break: keep-all;}

					.interview_layer .youtube_list {padding-left: 37px; opacity: 0;}
					.interview_layer .youtube_list .swiper-container {padding-right: 37px;}
					.interview_layer .youtube_list .swiper-wrapper {padding-bottom: 20px;}
					.interview_layer .youtube_list .swiper-slide {width: calc(33.333% + 20px); cursor: pointer;}
					.interview_layer .youtube_list .swiper-slide img {width: 100%;}
					.interview_layer .youtube_list .swiper-container-horizontal>.swiper-scrollbar {left: 0; bottom: 0; width: 95%; height: 2px; background: rgba(255,255,255,.5);}
					.interview_layer .youtube_list .swiper-container-horizontal>.swiper-scrollbar .swiper-scrollbar-drag {background: #fff;}

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


#main { background: #212121; height: 100%;  padding: 60px 0 0; box-sizing: border-box; overflow-y:auto}
  #main>div {position: relative; width: 100%; padding: 30px 40px 140px; border-right:1px solid #383838; color:#fff;}

	#main .cha3 {position: absolute; left: 78%; top: 0; z-index: 9;}

  #main h1 {font-size: 95px;  color:#fff; font-family: 'Rising_CHAI_Extra_Bold';}
  #main p {padding: 15px 0 60px; font-size: 25px; color:#909090; line-height: 40px; letter-spacing: 0em; font-family: 'Nanum Gothic'; font-weight: normal;}
	#main footer {}
	#main footer p {padding: 5px 0 0; line-height: 20px; color:#fff; font-size: 22px;}

   nav>div {padding: 50px 10px ; font-size: 45px; color:#434343;  line-height: 120%; letter-spacing: -0.03em; cursor: pointer;  border-top: 1px solid #383838}
   nav>div a {color:#434343;}
   nav>div strong { font-family: 'Rising_CHAI_Extra_Bold';}
   nav>div span {font-family: 'dotum'}
   nav>div span::before {content: "-"}
   nav>div p,  nav> ul {display: none}

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

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

   #main nav>div.on .ty li {padding-top:10px;}
   #main nav>div.on .ty a {padding: 10px 0 0; margin-bottom:-13px;}

   #main nav>div .atoz {padding-top: 15px; 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; font-size: 28px;  line-height: 70px; height: 70px; margin-top: 10px; text-align: center; color: #ffffff; background: #505050; border-radius: 2px;}
   a.box_btn em {font-style: normal; font-size: 12px; display: inline-block; margin-left: 5px; vertical-align: middle}

   #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 #work div.on ul {font-size: 28px; display: flex; justify-content: space-between;}
	 #main #work video {padding: 15px 0 10px}

	 #main #news div.on ul {display: block;}
	 #main #news ul div {gap: 20px;}
	 #main #news ul div dt img {height: 300px;}

	 #main nav>div.on p.btnarea {display: grid;gap: 20px;grid-template-columns: 1fr 1fr;margin-right: 0;}

	#careers div dl, #careers div a.btn {display: none}
  #careers div.on dl {display: block;}
  #careers div.on a.btn {display: inline-block;}
  #careers div dl dd {position: relative; padding-top: 15px; font-size: 25px; line-height: 67px; color: #909090;  overflow:hidden; border-bottom: 2px solid #383838;}
  #careers div dl dd * {vertical-align: top}
  #careers div dl dd a {float: right;  color: #909090; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width: calc(100% - 175px); overflow:hidden; text-align: right;}
  #careers div dl dd em {float:left; padding-right: 5px; font-weight: bold; color:#fff;}
	#careers div dl dd i {display: none}

	#news ul div {display: grid; grid-template-columns: 300px 300px; gap: 10px; margin-bottom: 10px; width: 100%}
	#news ul div dl {position: relative; }
  #news ul div dl dt img {width:100%; height: 140px; object-fit: cover; margin: 10px 0 20px;}
  #news ul div dl dd {padding-bottom: 3px; color:#909090; font-size: 25px; line-height: 30px; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width: calc(100% - 120px); overflow:hidden;}
  #news ul div dl dd a {position: absolute; right: 0; bottom: 0; font-size: 25px !important; color:#fff; margin-right: 0 !important; background: #494949; border-radius: 16px; padding:0 12px 2px; text-transform: lowercase !important;}

  #contact div dl dd {position: relative; font-size: 13px; line-height: 30px; color: #909090; cursor: default;}
  #contact div dl dd * {vertical-align: top}
  /* #contact div dl dd a {display: inline-block; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width: calc(100% - 150px); overflow:hidden;  color: #909090;} */
  #contact div dl dd a {display: inline-block; padding-right: 5px; font-weight: bold; color:#fff;}
  #contact div dl dd i {position: absolute; right:0; top: 8px; width: 67px; height: 22px; font-size: 12px; color: #dbdbdb; background: #494949; display: flex; justify-content: center; align-items: center; font-style:normal; border-radius: 2px;  display: none;}
  #contact div a.btn {margin-left: 0}

  #contact nav div.on ul, #contact nav div.on ul a{cursor: default;}
	#contact nav div.on ul {display: block}