@charset "utf-8";

/*missha menu common*/
.missha {font-size:18px;font-family:'RobotoL', 'NotoSansL';text-align:left;line-height: 1.79;letter-spacing: -0.03em;}
.missha section {position:relative; background-position:center;}
.missha .inner {width:100%; max-width:1240px; position:relative; margin:0 auto;}
.missha .pic {position:absolute; overflow:hidden;}
.missha h2 {font-family:'RobotoB', 'NotoSansB';font-size:58px;letter-spacing: 0.02em;margin-bottom: 20px;}
.missha h3 {font-family:'RobotoM', 'NotoSansM'; font-size:36px; line-height:1;}
.missha .bold {font-family:'NotoSansM';font-size:24px;line-height:1.5;letter-spacing: -0.04em;}
.missha .bg {height:800px;top:0;left:0;display: block;overflow: hidden;}
.missha.bg img {position:absolute; top:0; left:0;}

/*missha nav*/
.missha .missha_nav ul {width: 1226px;margin:0 auto;display:flex;justify-content: space-between;font-family:'RobotoM', 'NotoSansM';font-size:14px;letter-spacing:0;margin-top: 63px;margin-bottom: 2px;overflow: hidden;/* background: red; */}
.missha .missha_nav ul li {width: 222px;background:white;text-align:center;position:relative;}
.missha .missha_nav ul li a::before {width:100%;height:176px;display:block;content:'';background-position:center;margin-bottom: 27px;}
.missha .missha_nav ul li a::after {width:100%; height:176px; display:block; content:''; background:#d7d7d7; position:absolute;top:0; opacity:0.6; transition:opacity 0.3s;}
.missha .missha_nav ul li:nth-child(1) a::before {background-image:url('../img/brand/nav_story.png');}
.missha .missha_nav ul li:nth-child(2) a::before {background-image:url('../img/brand/nav_tech.png');}
.missha .missha_nav ul li:nth-child(3) a::before {background-image:url('../img/brand/nav_film.png');}
.missha .missha_nav ul li:nth-child(4) a::before {background-image:url('../img/brand/nav_colabo.png'); background-position:right;}
.missha .missha_nav ul a {display:block;position: relative;overflow:hidden;color:#000;padding-bottom: 21px;line-height:30px;/*transition: font-size 0.3s;*/}
.missha .missha_nav ul li.on a {font-size:24px;}
.missha .missha_nav ul li.on a::before {margin-bottom:25px;}
.missha .missha_nav ul li.on {width: 560px;/* transition: width 0.3s 0.3s; */}
.missha .missha_nav ul li.on a::after, .missha_nav ul li:hover a::after {opacity:0;}

.missha .missha_nav ul li:hover {width:560px;}
.missha .missha_nav ul li:hover a {font-size:24px;/*transition: font-size 0.3s;*/}
.missha .missha_nav ul:hover .on {width:222px;}
.missha .missha_nav ul:hover .on a {font-size:14px;}
.missha .missha_nav ul:hover .on:hover {width:560px;}
.missha .missha_nav ul:hover .on:hover a {font-size:24px;}

.missha .missha_nav ul li {/*transition:width 0.3s;*/padding: 0 13px;/* float: left; *//* background: black; */}

/* 하단 페이지네이션 */
.missha .pagination {text-align:center; display:flex; justify-content:center;}
.missha .pagination button {width:46px; height:46px; margin:0; display:block;}
.missha .pagination .btn_wrap {width:102px; display:flex; justify-content:space-between;}
.missha .pagination .btn_prev {background-image:url('../img/brand/btn_prev.png');}
.missha .pagination .btn_next {background-image:url('../img/brand/btn_next.png');}
.missha .pagination .btn_first {background-image:url('../img/brand/btn_first.png');}
.missha .pagination .btn_last {background-image:url('../img/brand/btn_last.png');}
.missha .pagination .numbox {/* display:flex; *//* justify-content:space-between; *//* width:220px; *//* height:24px; *//* margin:10px 40px; */}
.missha .pagination a {/* display:block; *//* font-family: 'NotoSansM'; *//* color: #8e8e8e; *//* line-height: 17px; *//* padding: 0 2px; */}
.missha .pagination a:hover {color:#000;}
.missha .pagination a.current {border-bottom:3px solid #000;color: #000;}

/*----- brand story -----*/
/*kv*/
.brand .kv {width:100%; height:726px; background-image:url('../img/brand/kv_bg.jpg');}
.brand .kv .inner {width:1200px; padding-left:608px; overflow:hidden;}
.brand .kv .inner h2 {margin-top: 140px;}
.brand .kv .inner .sub_tit {font-family:'RobotoM', 'NotoSansM';font-size:36px;margin-top: 17px;}
.brand .kv .inner .txt {font-family:'RobotoL', 'NotoSansL'; font-size:20px; line-height:36px; margin-top:5px}

.brand .research .inner {padding:100px 20px 140px}
.brand .research .cont li {position:relative;}
.brand .research .cont li:nth-child(1) {text-align:left;} 
.brand .research .cont li:nth-child(2) {text-align:right;margin-top: -20px;} 
.brand .research .cont li:nth-child(3) {text-align:left; margin-top:20px} 
.brand .research .cont li .copy {position:absolute;top:0;height:100%;display:flex;align-items: center;text-align:left;}
.brand .research .cont li .copy .tit_box {overflow:hidden; line-height:59px}
.brand .research .cont li .copy .tit_box .tit1 {position:relative; display:inline-block; font-family:'RobotoR', 'NotoSansR'; font-size:34px}
.brand .research .cont li .copy .tit_box .tit1:after {content:''; position:absolute; left:110%; bottom:17px; display:block; width:1000%; height:2px; background:#000}
.brand .research .cont li .copy .tit_box .tit2 {font-family:'RobotoL', 'NotoSansL';font-size: 50px;}
.brand .research .cont li .copy .tit_box .tit2 span {font-family:'RobotoB', 'NotoSansB';}
.brand .research .cont li .copy .txt_box {font-family:'RobotoL', 'NotoSansL';font-size: 22px;line-height:40px;margin-left:38px;letter-spacing: -0.025em;}
.brand .research .cont li:nth-child(1) .copy {left:290px} 
.brand .research .cont li:nth-child(2) .copy {left: 55px;} 
.brand .research .cont li:nth-child(3) .copy {left: 347px;} 
.brand.en .research .cont li:nth-child(3) .copy {align-items:start;padding-top: 120px;}

/* .brand .focused {height: 2025px;}
.brand .focused .pic-1 {width:288px;height:415px;top:359px;left: 20px;}
.brand .focused .pic-2 {width:800px; height:710px; top:211px; left:auto; right:0;}
.brand .focused .pic-3 {width:320px;height:465px;top: 1469px;left:0;}
.brand .focused .pic-4 {width:345px;height:500px;top:1312px;left: 463px;}
.brand .focused .pic-5 {width:288px;height:415px;top: 1200px;left: auto;right: 0;}
.brand .focused h2 {position:absolute;top: 1046px;left: 20px;}
.brand .focused p {position:absolute;top: 1148px;left: 20px;}


.brand .solution {height:800px; position:relative;}
.brand .solution .inner {max-width:1440px;}
.brand .solution .pic-1 {top:163px; left:0;}
.brand .solution .pic-2 {width:351px; height:436px; top:264px; right:340px;}
.brand .solution .pic-3 {top:103px; right:0;}


.brand .solution h2 {position:absolute;top: 230px;left:240px;}
.brand .solution p {position:absolute;top: 372px;left:240px;} */

.brand .heritage {position:relative;padding: 56px 0 50px;background:#f7f7f7;}
.brand .heritage .inner {width: 1200px;}
.brand .heritage .pic-1 {z-index:1; right:0;top: 95px;}
.brand .heritage h2 {z-index:10; position:relative; font-family:'RobotoL', 'NotoSansL'; font-size:50px}
.brand .heritage h2 span {font-family:'RobotoB', 'NotoSansB';}
.brand .heritage .bold {position:absolute;top: 286px;}
.brand .heritage p.small {z-index:10;position:relative;font-family:'RobotoL', 'NotoSansL';font-size: 20px;line-height: 34px;}
.brand.en  .heritage p.small .pad_bot{margin-bottom:10px;display: block;}
.brand .heritage p.small span{font-size:16px;line-height: 28px;}

.brand .history {padding-top:110px;}
.brand .history h2 {font-size:48px}
.brand .history ul {display:flex;justify-content:space-between;margin-bottom: 150px;}
.brand .history ul li {width:220px;}
.brand .history ul li:last-child {width:274px;}
.brand .history ul li:last-child span.small {letter-spacing: -0.02em;font-size:12px;}
.brand .history p {line-height:1.5;}
.brand .history p.year {font-family: 'NotoSansB'; font-size:36px;line-height:1;margin-top: 20px;margin-bottom:12px;}
.brand .history span.small {display:block;font-size:14px;letter-spacing: -0.025em;}

/*----- film -----*/
/*슬라이더 수정*/
.film .slick-slider .items {display:inline-block;}
.film .slick-track {display:flex;margin-left: -0;}
.film .kv_slider {width: 900px;margin: 83px auto 0;position:relative;overflow: visible;}
.film .btn_arrow {position:absolute; top:0; background:red; z-index:99; top:230px; width:20px; height:36px; font-size:0;}
.film .btn_prev {left:-60px; background:url('../img/film/slide_arrow_prev.png') no-repeat;}
.film .btn_next {left:auto; right:-60px; background:url('../img/film/slide_arrow_next.png') no-repeat;}
.film .swiper-button-disabled {opacity:0.3;}
/*슬라이더 내부*/
.film .text_wrap {position:relative;overflow: hidden;opacity:0;transition: opacity 0.3s;}
.film .swiper-slide-active .text_wrap {opacity:1; transition: opacity 0s;}
.film .slick-cloned.slick-active .text_wrap {opacity:1;}
.film .text_wrap .title {font-size:36px;margin-top: 32px;line-height: 1.4;margin-bottom: 3px;width:calc(100% - 272px);word-break:keep-all;}
.film .text_wrap .hash {font-size:24px;margin-bottom: 30px;}
.film .text_wrap a {display:block;width:272px;height:64px;background-color:#000;position:absolute;top: 38px;right:0;color:#fff;padding: 23px 28px;font-family:'NotoSansL';font-size:16px;line-height: 1;background-image:url('../img/film/btn_arrow.png');background-repeat:no-repeat;background-position:center right;}

/*유튜브 플레이어*/
.film .btn_play {width:900px;height:506px;position: relative;overflow:hidden;background:#fff;z-index:9;/* transition: opacity 0.3s; */}
.film .btn_play::after{content:'';display:block;position:absolute;top:0;left:0;width:100%;height:100%;background-image:url('../img/film/slide_thumb_btn.png');background-position:center;background-size:contain;}
.film .btn_play img {width:100%;position:absolute; top:0; left:0;}
.film .player_wrap {width:900px;height:506px;position: absolute;/* background:black; */left:calc(50% - 450px);}
.film #player {position:absolute; top:0; left:0; right:0; bottom:0; opacity:0;}

/* 플레이 제어 */
.film #player.playing {opacity:1; z-index:99; transition:opacity 0.3s;}

/*리스트*/
.film .inner {width:1200px; margin:0 auto;}
.film .film_list ul {display:flex;margin: 74px 0 41px 0;flex-wrap:wrap;justify-content:flex-start;}
.film .film_list ul li {width:380px;}
.film .film_list ul li:nth-child(3n-1){margin:0 30px;}
.film .film_list .film_item {display:block;overflow:hidden;margin-bottom: 72px;width:380px;}
.film .film_list .film_item .img_wrapper {height:214px;overflow:hidden;position:relative;margin-bottom: 20px;}
.film .film_list .film_item .img_wrapper img {width:100%; position:absolute; top:0; left:0;}
.film .film_list .film_item .img_wrapper::after {content:''; position:absolute; top:0; right:0; bottom:0; left:0; background-color:rgba(0,0,0,0); background-image:url('../img/film/list_thumb_btn.png'); transition:background-color 0.3s;}
.film .film_list .film_item .title {color:#000;margin-left: 8px;}

.film .film_list .film_item:hover .img_wrapper::after {background-color:rgba(0,0,0,0.2);}

/*----- xmissha(colabo) -----*/
.colabo .top_kv {margin-bottom: 167px;}
.colabo .top_kv a {position:relative; display:block; height:580px;}
.colabo .colabo_list .inner {width:1196px;}
.colabo .colabo_list ul {display:flex;justify-content:flex-start;flex-wrap:wrap;margin-bottom: -10px;}
.colabo .colabo_list ul li {margin-bottom: 86px;}
.colabo .colabo_list ul li:nth-child(3n-1) {margin:0 65px;}
.colabo .colabo_list ul li a {display:block; color:#000;}
.colabo .colabo_list ul li a .thumb_img {width:355px;height:235px;overflow:hidden;}
.colabo .colabo_list ul li a .thumb_img img {width:100%;}
.colabo .colabo_list ul li a .text_wrap {padding-left:10px;height: 67px;}
.colabo .colabo_list ul li a span {display:block;}
.colabo .colabo_list ul li a span.date {margin-top: 17px;margin-bottom: -4px;}
.colabo .colabo_list ul li a span.title {font-family:'NotoSansM';}




/* animation fix */
[data-aos^=zoom][data-aos^=zoom] {opacity:1;}
[data-aos=zoom-in] {transform:scale(0.8);}

[data-aos^=up] {transform: translate3d(0,100px,0);}
[data-aos=up] {transform: translate3d(0,100px,0);}
[data-aos=up-slow] {transform: translate3d(0,50px,0);}
[data-aos=up-fast] {transform: translate3d(0,200px,0);}
[data-aos^=up].aos-animate {transform: translateZ(0);}

[data-aos=get-right] {width:0; opacity:0;}
[data-aos=get-right].aos-animate {width:100%; opacity:1;}


/*en fix*/
html[lang="en"] .missha_nav ul {width:978px;}