@charset "utf-8";
@import url("common.css");

/** 인트로 **/
#intro {position:fixed; top:0; left:0; width:100%; height:100%; z-index:999999; background:rgba(240,240,240,1); -webkit-transition-property: all; transition-property: all; -webkit-transition-duration:0.8s; transition-duration: 0.8s; -webkit-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; box-sizing:border-box;}
#intro.active {background:rgba(240,240,240,0.95);}
#intro .closeBtn {width:50px; height:50px; border:1px solid #fff; background:url('/m/img/intro_close.png') no-repeat center; position:absolute; top:5vh; right:5%; cursor:pointer; opacity:0; transition:all 1s ease;}
#intro .closeBtn.on {opacity:1; transition:all 1s ease;}
#intro .intro_txt {position:absolute; top:30vh; transition:all 1s ease; left:5%;}
#intro .intro_txt ul{position:relative;}
#intro .intro_txt li {transition:all 2s ease; position:Relative; z-index:1;opacity:0; list-style:none;}
#intro .intro_txt li.left{position:absolute; left:0; top:0; }
#intro .intro_txt li.right{position:absolute; left:0; top:0; }
#intro .intro_txt li.on, #intro .intro_txt li.on{opacity:1;transition:all 2s ease;}
#intro .intro_txt li.text.on{transition:all 3.5s ease;}
#intro .intro_txt li.right.on.move{left:205px;}
#intro .intro_txt li.text img{height:160px}
#intro .intro_txt li.text img:nth-child(2) {display:inline-block; margin:0 -20px}

#intro .intro_txt p {margin-top:50px;}
#intro .intro_txt p span{font-size:1.3rem; color:#fff; line-height:160%; font-weight:200; display:inline-block; opacity:0;transition:all 2s ease;}
#intro .intro_txt p span.on{opacity:1;transition:all 2s ease;}
#intro.none {display:none; transition:all 0.5s ease; transition:all 1s ease;}
#intro .intro_txt.on {opacity:1; margin-top:48%; transition:all 2s ease;}

/** 메인비주얼 **/

/* 비주얼 구성 */
#visual {position: relative; width:100%; height:100vh; overflow:hidden;z-index:10; max-width:680px; top:0;}
#visual:after {content:""; display:block; position:absolute; top:0; left:0; width:100%; height:270px; background: rgb(0,0,0,0.5); background: linear-gradient(rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%); z-index:5; transition:all 0.2s linear;}
#visual .slick-slider {position: relative; display: block;}
#visual .slick-list {position: relative; display: block; overflow: hidden;}
#visual .slick-slide {display: none; float: left; height: 100%; min-height: 1px;}
#visual .slick-initialized .slick-slide{display: block; }
#visual .slick-slide.slick-active{z-index:500 !important;}
#visual .slick-vertical .slick-slide{display: block; height: auto; border: 1px solid transparent;}
#visual .sub_imgbox{height:100%;}
#visual .section {width:100%;height:100vh;position:relative;overflow:hidden;background-position:center;background-size:cover; border:0;}
#visual li .section:before {content:""; display:block; position:absolute; bottom:0; left:0; width:100%; height:600px; background: rgb(0,0,0,0.7); background: linear-gradient(360deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%); z-index:300; transition:all 0.2s linear;}
#visual li .section.ani{animation-duration:5s; animation-name:visualScale; transform:scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transition:all 0.2s linear;}
		@keyframes visualScale {
			 0% { transform:scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); }
			 100% { transform:scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); }
		}

#visual .sub_imgbox .slick-list ,
#visual .sub_imgbox .slick-track {height:100%;}


.b_btn {position:absolute; z-index:9999; bottom:29px; left:3%;}
.b_btn button{border:2px solid #fff; border-radius:50px; box-sizing:border-box; width:16px !important; height:16px; cursor:pointer;  vertical-align: top; font-size:0; margin:0; padding:0}
.b_btn button img{opacity:0;}
#visual .btn-play {display:none; background:url('/img/vPlay.png') no-repeat center;}
#visual .btn-stop {background:url('/img/vStop.png') no-repeat center;}


#visual .slick-dots{position:absolute; z-index:500; left:3%; bottom:28px; margin-left:25px; vertical-align: top;}
#visual .slick-dots li{display:inline-block; text-indent:-9999px; width:16px; height:16px; background:rgba(255,255,255,0.35); border-radius:50%; margin-right:6px; cursor:pointer; }
#visual .slick-dots li.slick-active{background:#fff; }


	/* Arrows */
#visual .slick-prev, #visual .slick-next{position: absolute; display: block; top:50%; transform:translateY(-50%); width:26px; height: 26px; font-size:26px; padding: 0;cursor: pointer;  color: transparent; border: none; outline: none; background: transparent; z-index:999; font-size:0; border-radius: 100%;}
#visual .slick-prev{left:3%;}
#visual .slick-prev::before,
#visual .slick-next::before{display:block; content:"\e5e0"; font-family:"Material Symbols Outlined"; color:#fff; width:26px; height:26px; font-size:26px; line-height:26px; font-weight:200; cursor:pointer; opacity:0.7; transition:all 0.2s linear;}
#visual .slick-next{right:3%;}
#visual .slick-next::before{transform:rotate(180deg);}
#visual .slick-prev:hover::before,
#visual .slick-next:hover::before{opacity:1; transition:all 0.2s linear;}


#visual li {position:relative;}
#visual li .section {width:100%; height:100%;}
#visual .text_area {position:absolute; left:3%; opacity:1; bottom:80px; z-index:999;
-webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-delay: 0.4s; transition-delay: 0.4s;}
#visual li.action .text_area {opacity:1; bottom:80px;}
#visual .text_area h3 {font-size:1.429rem; color:#fff; font-weight:500; line-height:130%; }
#visual .text_area p {font-size:1.071rem; color:#fff; font-weight:300;}
#visual .text_area br{display: none;}
/*#visual .text_area a {position:relative; font-size:1.143rem; color:#fff; border-bottom:1px solid #fff; padding:0 80px 10px 0; transition:all 0.3s ease; z-index:500;}
#visual .text_area a:hover {color:#ed145b; border-bottom:1px solid #ed145b; transition:all 0.3s ease;}
#visual .text_area a i {width:23px; height:8px; background:url('/m/img/detail_arrow.png') no-repeat right; position:absolute; top:7px; right:0; transition:all 0.3s ease;}
#visual .text_area a:hover i {background:url('/m/img/detail_arrow_up.png') no-repeat right; transition:all 0.3s ease; right:10px;}*/

	.slick-page li {font-family: 'Kanit', sans-serif; display:inline-block; color:rgba(255,255,255,0.5); margin-right:3px; font-size:1.125rem;}
	.slick-page li.cur {color:#fff; font-weight:500;}
/*
.visual_cont {position:absolute; bottom:0; right:0; width:310px; height:110px; background-color:#ed145b; padding:40px; box-sizing:border-box; z-index:888;}
*/

#visual li .jarallax{position: relative; width: 100%; height:100%; z-index: 2;}
#visual li .jarallax iframe{position: absolute; width: 100%; height: 100%;}

/** 메인 영역 **/

/* 컨텐츠 */
#main_container {position:relative; width:100%; background:#f5f5f5; padding-top:60px;  z-index:50; box-sizing:border-box;}
#main_container ul li {list-style:none; position:relative;} 
#main_container h2 {font-size:1.857rem; margin-bottom:2.5rem; font-family:"Kanit", Arial, Tahoma, Verdana, sans-serif; color:#333; line-height:100%; text-transform:uppercase;  text-align:center; font-weight: 700;}
#main_container h3.title {font-size:2.143rem; color:#333; font-weight:600; margin-bottom:70px; text-align:center; line-height:100%;}
#main_container h4.subject {font-family: 'Kanit', sans-serif; font-size:1.143rem; color:#fff; font-weight:500; }
#main_container p.stitle_eng {font-family: 'Kanit', sans-serif; font-size:1.714rem;color:#fff; font-weight:200; line-height:120%;}
#main_container p.stitle {font-size:1.286rem; line-height:140%; color:#fff;}
#main_container p.sub_title {color:#fff;}
#main_container span.date {font-family: 'Kanit', sans-serif; font-size:0.88rem; color:#fff;}

/* 스토리 */
#story {position:relative; padding:0 2% 55px 2%;}
#story .tbox {position:absolute; z-index:800;}
#story .story_cont {width:100%; overflow:hidden;}
#story .story_cont .recent {width:100%; margin:0 0 2%}
	 .story_cont .recent a {position:relative; display:block; width:100%; height:100%; box-sizing:border-box;}
	 /*.story_cont .recent a:after {content:''; width:100%; height:0; background:rgba(243,0,79,0.8); position:absolute; top:0; left:0;transition:all 0.5s ease;}
	 .story_cont .recent a:hover:after {height:100%; transition:all 0.5s ease;}*/
 	 .story_cont .recent img {width:100%; vertical-align:top;}
	 .story_cont .recent .tbox {width:100%; height:100%; box-sizing:border-box; padding:20px 15px;}
	 /*.story_cont .recent span {display:inline-block; position:absolute; bottom:0; right:0; padding:20px 15px; box-sizing:border-box; background:rgba(255,255,255,0.95); z-index:1; width:70%; max-width:350px;}
	 .story_cont .recent span h5 {font-size:1.286rem; color:#333; line-height:130%; font-weight:200; margin-bottom:5px;}
	 .story_cont .recent span p {font-size:1rem ; color:#333;}*/
	 .story_cont .recent .tbox h4 {margin-bottom:10px; letter-spacing:0;}
	 .story_cont .recent .tbox span {line-height:150%; color:#f5f5f5; font-weight:300;}
	 .story_cont .recent .tbox span.date {display:inline-block; margin-top:20px;}

	 .story_cont .story_one {float:right; width:49%; overflow:hidden;}
	 .story_cont .story_one li {margin-bottom:15px;}
	 .story_cont .story_one li .tbox {width:100%; height:100%; box-sizing:border-box; padding:20px 15px;}
	 .story_cont .story_one li img {width:100%; vertical-align:top;}
	 .story_cont .story_one li h4 {margin-bottom:10px; }
	 .story_cont .story_one li span {line-height:150%; color:#f5f5f5; font-weight:300;}
	 .story_cont .story_one li span.date {display:inline-block; margin-top:20px;}
	 .story_cont .story_one li a {display:block; width:100%; height:100%; box-sizing:border-box;}
	/* .story_cont .story_one li a:after {content:''; width:100%; height:0; background:rgba(243,0,79,0.8); position:absolute; top:0; left:0;transition:all 0.5s ease;}
	 .story_cont .story_one li a:hover:after {height:100%; transition:all 0.5s ease;}
	 .story_cont .story_one li:nth-child(1) h4 {margin-bottom:20px;}*/

	.story_two {width:100%; overflow:hidden;}
	.story_two li {float:left; width:49%; margin-right:2%; margin-bottom:2%; overflow:hidden;}
	.story_two li:nth-child(2n) {margin-right:0;}
	.story_two li .tbox {width:100%; height:100%; box-sizing:border-box; padding:20px 15px;}
	.story_two li img {width:100%; vertical-align:top;}
	.story_two li h4 {margin-bottom:10px; }
	.story_two li span {line-height:150%; color:#f5f5f5; font-weight:300;}
	.story_two li span.date {display:inline-block; margin-top:10px;}
	.story_two li a {display:block; width:100%; height:100%; box-sizing:border-box;}
/*	.story_two li a:after {content:''; width:100%; height:0; background:rgba(243,0,79,0.8); position:absolute; top:0; left:0;transition:all 0.5s ease;}
	.story_two li a:hover:after {height:100%; transition:all 0.5s ease;}
	.story_two li:nth-child(1) p {font-size:1.429rem; margin:1rem 0 1.5rem;}*/

	.story_three {width:100%; overflow:hidden; margin-bottom:2%;}
	.story_three li {float:left; width:49%; margin-right:2%; margin-bottom:2%; overflow:hidden;}
	.story_three li:nth-child(2n) {margin-right:0;}
	.story_three li .tbox {width:100%; height:100%; box-sizing:border-box; padding:20px 15px;}
	.story_three li img {width:100%; vertical-align:top;}
	.story_three li h4 {margin-bottom:10px; }
	.story_three li span {line-height:150%; color:#f5f5f5; font-weight:300;}
	.story_three li span.date {display:inline-block; margin-top:20px;}
	.story_three li a {position:relative; display:block; width:100%; height:100%; box-sizing:border-box;}
	/*.story_three li a:after {content:''; width:100%; height:0; background:rgba(243,0,79,0.8); position:absolute; top:0; left:0;transition:all 0.5s ease;}
	.story_three li a:hover:after {height:100%; transition:all 0.5s ease;}
	.story_three li:last-child h4 {color:#333 !important;}*/

	.service {position:relative; background:#000;  box-sizing:border-box; margin-bottom:2%; } 
	.service .tbox {width:100%; box-sizing:border-box; padding:20px 15px;}
	.service img {width:100%; max-width:100%; vertical-align:top; }
	.service h4 {margin-bottom:10px; letter-spacing:0;}
	.service span {line-height:150%; color:#f5f5f5; font-weight:300;}
	.service span.date {display:inline-block; margin-top:20px;}
	.service a {position:relative; display:block; width:100%; height:100%; box-sizing:border-box;}

/* 브랜드 */
#brand {position:relative; padding:0 2% 55px 2%;}
#brand .slick-slide {height:450px;}
#brand .slick-prev, 
#brand .slick-next {position:absolute; z-index:888; bottom:0px; font-size:0; width:40px; height:40px; background-color:transparent; outline:none; border:0; cursor:pointer; background:rgba(243,0,79,0.5); transition:all 0.3s ease;}
#brand .slick-prev {right:40px; background:rgba(243,0,79,0.5) url('/img/prev_arrow_w.png') 50% 50% no-repeat;}
#brand .slick-prev:hover {background:rgba(243,0,79,1) url('/img/prev_arrow_w.png')  50% 50% no-repeat; transition:all 0.3s ease;}
#brand .slick-next {right:0px; background:rgba(243,0,79,0.5) url('/img/next_arrow_w.png') 50% 50% no-repeat;}
#brand .slick-next:hover {background:rgba(243,0,79,1) url('/img/next_arrow_w.png') 50% 50% no-repeat; transition:all 0.3s ease;}

#brand .slick-slider {position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent;}
#brand .slick-list {position: relative; display: block; overflow: hidden; margin: 0; padding: 0;}
#brand .slick-list:focus {outline: none;}
#brand .slick-slider .slick-track, .slick-slider .slick-list {-webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
#brand .slick-slide {display: none; float: left; height: 100%; min-height: 1px;}
#brand .slick-slide img {display: block;}
#brand .slick-initialized .slick-slide {display: block;}
#brand .slick-loading .slick-slide {visibility: hidden;}
#brand .slick-vertical .slick-slide {display: block; height: auto; border: 1px solid transparent;}
#brand .slick-arrow.slick-hidden {display: none;}

	.brand {position:relative; width:100%; height:100%; min-height:450px; overflow:hidden;}
	.brand .text_box {position:absolute; top:0px; left:0; width:320px; height:100%; min-height:450px; background:rgba(0,0,0,0.6); padding:0 30px; box-sizing:border-box; }
	.brand .text_box .txt_area {position:absolute; top:50%; transform:translateY(-50%); z-index:100; padding-right:30px;}
	.brand .text_box h4 {font-size:1.286rem; color:#fff; font-weight:500; margin-bottom:2rem;}
	.brand .text_box span {font-size:0.8571rem; color:#f3004f;  line-height:150%; font-weight:500;}
	.brand .text_box div {font-size:0.8571rem; color:#fff; font-weight:300; margin-top:5px;}
	.brand .text_box div p {font-size:0.8571rem; color:#fff; font-weight:300;}
	.brand .text_box a {position:relative; display:inline-block; font-size:0.8571rem; color:#fff; margin-top:1.5rem; padding-right:20px; transition:all 0.3s ease; line-height:100%;}
	.brand .text_box a:hover {color:#f3004f; transition:all 0.3s ease;}
	.brand .text_box a i {width:6px; height:11px; background:url('/img/next_arrow_w.png') no-repeat center; background-size:100%; position:absolute; right:0; transition:all 0.3s ease;}
	.brand .text_box a:hover i {background:url('/img/next_arrow_w_up.png') no-repeat center; transition:all 0.3 ease;}
	.brand li {position:relative;}
	.brand li .section {width:100%; height:100%; min-height:450px; background-size:cover;}
	.brand li .text_box {-webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-timing-function: linear; transition-timing-function: linear;}


/* 인스타그램 */
#insta {position:relative; padding:0 2% 55px 2%;}
#insta h2 {margin-bottom:1.2rem;}
#insta .sns_id {text-align:center; margin:0 auto;}
	.sns_id a {position:relative; display:inline-block; padding-right:18px; padding-left:16px; box-sizing:border-box;}
	.sns_id a:nth-child(even) {padding-right:0;}
	.sns_id a:nth-child(even):after {display:none;}
	.sns_id a:after {content:''; width:1px; height:16px; background-color:#d0d0d0; position:absolute; top:7px; right:0;}
	.sns_id a {font-size:1.143rem; font-family:"Kanit", Arial, Tahoma, Verdana, sans-serif; color:#333;  font-weight:200; line-height:140%;}
	.sns_id a span {color:#f3004f; line-height:140%;}

.insta_list {overflow:hidden; margin-top:2rem; display:flex; flex-wrap:wrap; align-content:space-around;}
.insta_list li {position:relative; width:32%; margin-right:2%; margin-bottom:2%;}
.insta_list li:nth-child(3n) {margin-right:0;}
.insta_list li a.none {cursor:default;}
.insta_list .text_box {width:100%; height:0; opacity:0; position:absolute; top:0; left:0; text-align:center; vertical-align:middle; background:rgba(243,0,79,0.78); transition:all 0.5s ease;}
.insta_list .txt_area {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:100; width:100%;}
.insta_list .text_box p {font-family: 'Kanit', sans-serif; font-size:1.143rem; color:#fff; font-weight:300;}
.insta_list .text_box span {display:block; font-size:1rem; color:#fff; font-weight:300;}
.insta_list li:hover .text_box {opacity:1; height:100%; transition:all 0.5s ease;}


/*******************************************************************************
	@media 421~480px
*******************************************************************************/
@media all and (max-width:480px){


/** 메인비주얼 **/

/* 비주얼 구성 */
/*	.b_btn {top:28px; right:48px;}

	/* Arrows *
	#visual .slick-prev, #visual .slick-next {bottom:31px;}
	#visual .slick-prev{right:85px;}
	#visual .slick-next{right:25px;}

#visual .text_area a i {width:23px; height:8px; top:7px;}

.visual_cont {width:240px; height:83px; padding:25px;}
*/

/** 메인 영역 **/
#main_container h4.subject {font-size:1rem;}
#main_container p.stitle_eng {font-size:1.143rem;}
#main_container p.stitle {font-size:1.143rem;}

.story_cont .story_one li {margin-bottom:10px;}
.story_cont .recent span {}
.story_cont .recent span h5 {font-size:1rem; color:#333; line-height:130%; font-weight:200; margin-bottom:5px;}
.story_cont .recent span p {font-size:0.9231rem ; color:#333;}

.story_two li:nth-child(1) p {margin:5px 0 10px;}
.story_two li span {display:none;}
.story_two li span.date {display:block; margin-top:10px;}

.story_three li p.stitle {font-size:0.9231rem !important;}
.story_three li p.stitle br {display:none;}
.story_three li span {line-height:150%; color:#f5f5f5; font-weight:300;}
.story_three li span.date {display:inline-block; margin-top:20px;}

.service h4 {}
.service span.date {display:block; margin-top:10px;}

.service ul {display:block; overflow:hidden;}
.service ul li {float:left; width:50%;}
.service ul li a {background-size:auto;} 
.service ul li h5 {font-size:1.214rem;}
.service ul li span {font-size:1rem;}
.service ul li:nth-child(1), .service ul li:nth-child(2) {margin-bottom:1.5rem;}

/* 브랜드 */
#brand .slick-slide {height:350px;}

.brand {min-height:350px;}
.brand .text_box {width:220px; min-height:350px; padding:0 25px;} /* opacity:0; */
.brand .text_box .txt_area {padding-right:25px; box-sizing:border-box;}
.brand .text_box h4 {margin-bottom:1.5rem;}
.brand .text_box div p {display:inline;}
.brand .text_box div br {display:none;}
.brand li .section {min-height:350px;}

.sns_id a {padding-right:8px; padding-left:6px;}
.sns_id a:after {height:10px; top:5px;}
.sns_id a {font-size:0.7857rem; line-height:130%;}
.sns_id a span {line-height:130%;}

}


/*******************************************************************************
	@media 421~480px
*******************************************************************************/
@media all and (max-width:340px){


.sns_id a {font-size:0.6rem;}

}