@charset "utf-8";

/*missha menu common*/
.missha {font-size:14px;font-family:'RobotoL', 'NotoSansL';text-align:left;line-height: 1.64;letter-spacing: -0.03em;}
.missha section {position:relative;background-position:center;background-size:cover;overflow: auto;}
.missha section .inner {width:100%; padding:0 16px; margin:0 auto; position:relative; overflow: auto;}
.missha h2 {font-family:'RobotoB', 'NotoSansB';font-size: 32px;word-break: keep-all;}

/*missha slide common */
.missha .swiper-pagination {margin: 30px 0 0;height:2px;background:#ddd;position:relative;}
.missha .swiper-pagination-progressbar-fill {position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(0); transform-origin: left top; background:black;}


/*missha nav*/
.missha .missha_nav {font-family: 'RobotoL', 'NotoSansL';letter-spacing:0;width:100%;height:52px;display:block;overflow:hidden;border-bottom:2px solid #000;position:absolute;top:0;z-index:99;transition:all 0.3s;background: #fff;text-transform: capitalize;}
.missha .missha_nav ul {padding:0 16px;}
.missha .missha_nav .now {font-family: 'RobotoR', 'NotoSansR';width:100%;height:52px;text-align:left;padding:16px;background-image:url('../img/brand/misshanav_arrow.png');background-size: auto 100%;background-repeat:no-repeat;background-position:right;text-transform: capitalize;}
.missha .missha_nav li a {line-height:32px;}
.missha .missha_nav li.on a,
.missha .missha_nav li:hover a {font-family: 'RobotoB', 'NotoSansB';}


/* 하단 페이지네이션 */
.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 {overflow:hidden}
.brand .kv .inner {position:absolute;top: 50px;left:20px;}
.brand .kv .inner h2 {font-size: 35px;}
.brand .kv .inner .sub_tit {font-family: 'RobotoB', 'NotoSansB';font-size:22px;line-height:25px;margin-top: 10px;}
.brand .kv .inner .txt {font-size: 13px;line-height: 20px;margin-top: 8px;}

.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:40px;} 
.brand .research .cont li:nth-child(3) {text-align:left; margin-top:40px} 
.brand .research .cont li:nth-child(1) img {width:190px} 
.brand .research .cont li:nth-child(2) img {width:200px} 
.brand .research .cont li:nth-child(3) img {width:228px} 

.brand .research .cont li .copy {position:absolute; top:0; height:100%; text-align:left;}
.brand .research .cont li .copy .tit_box {overflow:hidden; line-height:22px}
.brand .research .cont li .copy .tit_box .tit1 {position:relative; display:inline-block; font-family:'RobotoR', 'NotoSansR'; font-size:17px}
.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:27px}
.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:12px; line-height:22px;}
.brand .research .cont li:nth-child(1) .copy {left:38.88vw} 
.brand .research .cont li:nth-child(2) .copy {left:4.44vw} 
.brand .research .cont li:nth-child(3) .copy {right:4.44vw}

/* 
.brand .focused {padding:50px 0;}
.brand .focused img {display:block;margin-top: 44px;margin-bottom: 12px;}
.brand .focused h2 {font-size: 28px;line-height:30px;word-break:keep-all;position:absolute;top: 60px;left: 16px;}
.brand .focused p {padding-left: 16px;}

.brand .solution {background-image:url('../img/brand/solution_bg.png');}
.brand .solution h2 {margin-top: 40px;margin-left: 16px;margin-bottom: 6px;}
.brand .solution p {top: 102px;margin-left: 16px;}
.brand .solution .img_figure {width:calc(100% - 32px);margin-left: 16px;margin-bottom: 60px;margin-top: -8px;} */

.brand .heritage {padding:40px 0 50px; background:#f7f7f7}
.brand .heritage h2 {font-family: 'RobotoL', 'NotoSansL'; font-size:27px; line-height:33px;}
.brand .heritage h2 span {font-family: 'RobotoB', 'NotoSansB';}
.brand .heritage p.small {z-index:10; position:relative; font-family: 'RobotoL', 'NotoSansL'; font-size:12px; line-height:20px; margin-top:11px}
.brand .heritage p.small span{font-size:10px;line-height: 16px;}
.brand .heritage .pic {z-index:1; position:relative; margin:-30px -16px 0 14px}

.brand .history {padding: 46px 16px 69px;}
.brand .history h2 {font-size:30px}
.brand .history_container {width:100%;height:auto;overflow: hidden; margin-top:16px;}
.brand .history ul {position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box;}
.brand .history ul li {flex-shrink: 0;width: 100%;height: 100%;position: relative;transition-property: transform;}
.brand .history ul li:last-child span.small {/* letter-spacing:-0.8px; *//* font-size:12px; */line-height: 14px;}
.brand .history p {line-height:1.5;}
.brand .history p.year {font-family: 'RobotoB', 'NotoSansB';font-size: 23px;line-height:1;margin-top: 16px;margin-bottom: 4px;}
.brand .history span.small {display:block;font-size: 11px;color:#666;margin-top: 4px;}

/*----- tech -----*/

/*common*/
.tech .kv {background-color:#f9f9f9; background-image:url('../img/tech/kv_bg.png'); background-position:bottom; background-repeat:no-repeat; background-size:100% auto;}
.tech .kv::after {content:''; width:100%; height:0; padding-top:85%; display:block;}
.tech .bold {font-size: 15px;font-family:'RobotoM','NotoSansM';}
.tech .star {display:block; font-size:12px;}
.tech .star::before {content:'*'; display:inline;}
.tech .sub_txt {display:block;font-size:12px;line-height: 18px;margin-top: 3px;color: #acacac;font-family: 'NotoSansR';}

/*kv*/
.tech .kv h2 {/* margin-top: 50px; */padding-left: 20px;font-size: 35px;}
.tech .kv p {font-size:15px;line-height:25px;margin-top: 3px;padding-left: 20px;}

.tech .diagram {height:689px;background-color:#f4f4f4;text-align:center;overflow: hidden;position: relative;background-image: url('../img/tech/diagram_bg.png');background-size: auto 100%;background-repeat: no-repeat;}
.tech .diagram img {position: relative;width:auto;height:100%;left: 0;opacity: 0;}
.tech .diagram ul {width: 360px;position:absolute;top: 70px;left:calc(50% - 180px);text-align:center;}
.tech .diagram li {display:block;width:100%;height: 184px;padding-top: 30px;}
.tech .diagram .title {font-size: 23px;font-family:'RobotoB';line-height: 1.16;margin-bottom: 16px;position:relative;}
.tech .diagram .title::after {content:''; width:4px; height:4px; display:block; background:black; border-radius:100%; position:absolute; left:calc(50% - 2px); top:58px;}

.tech .formula h2 {margin-top: 44px;margin-bottom: 4px;margin-left: 16px;}
.tech .formula .pic_1 {position:absolute; top:120px; right:346px;}
.tech .formula .pic_2 {position:absolute; top:0; right:0;}
.tech .formula p {margin-left:16px;}
.tech .formula img {display:block;width:calc(100% - 32px);margin: 0 auto 55px;}
.tech .formula .bold {margin-bottom: 14px; margin-left: 16px;}

.tech .minus {text-align:center;background-image:url('../img/tech/minus_bg.png');background-size:cover;padding: 45px 16px 58px;}
.tech .minus .pic_1 {position:absolute;top:85px;left: 0;}
.tech .minus .text_wrap {position:absolute;left: 472px;top: 170px;}
.tech .minus h2 {margin-bottom:4px;}
.tech .minus h2 .slash {width: 30px;height: 30px;display:inline-block;position:relative;}
.tech .minus h2 .slash::before {content:'';background:black;width: 42px;height:2px;transform:rotate(135deg);transform-origin:top left;position:absolute;top: 2px;left: 31px;}
.tech .minus p {margin-bottom:8px;}
.tech .minus .bold {margin-bottom: 12px;line-height: 25px;}
.tech .minus img {max-width:155px;}

.tech .ferment {text-align:center;padding-top: 66px;padding-bottom: 50px;}
.tech .ferment .inner {width:954px;}
.tech .ferment h3 {font-family:'NotoSansB';font-size: 20px;margin-top: 7px;margin-bottom: 10px;line-height: 23px;}
.tech .ferment h3 .big {font-size: 30px;}
.tech .ferment h3 sup {font-size: 10px;}
.tech .ferment .figure_wrap {margin-top: 40px;}
.tech .ferment figure {width:100%; padding:0 16px;}
.tech .ferment figure:nth-child(2) {margin-top:44px;}
.tech .ferment figure:nth-child(2) figcaption {margin-bottom: 4px;}
.tech .ferment figcaption {font-size: 15px;font-family:'NotoSansM';margin-bottom: 14px;}
.tech .ferment figcaption sup {font-size:8px;}

.tech .rewind {background-color:#f3f3f3; background-image:url('../img/tech/rewind_bg.png');background-position: bottom;background-size: 100% auto;background-repeat:no-repeat; overflow:hidden;padding: 0 16px;}
.tech .rewind .inner {width:1200px;}
.tech .rewind h2 {margin-top: 50px;margin-bottom: 16px;font-size: 25px;line-height: 30px;}
.tech .rewind .star {color:#939395;margin-top: 9px;margin-bottom: 18px;}
.tech .rewind .flag {width:100%; height:0; padding-top:75.5%; position:relative;}
.tech .rewind .flag img {width:42px;height:30px;position:absolute;top:0;left: 0;}

.tech .mechanism {padding: 55px 16px 45px;}
.tech .mechanism h3 {font-family:'NotoSansB';font-size: 25px;line-height: 30px;word-break: keep-all;}
.tech .mechanism p {margin-top: 12px;margin-bottom: 16px;}
.tech .mechanism .certificate {margin-top: 15px;margin-bottom: 35px;}
.tech .mechanism .certificate img {max-width:226px;}
.tech .mechanism .certificate .sub_txt {margin-top:12px;}
.tech .mechanism .vitac {margin-top: 12px;}
.tech .mechanism .vitac figcaption {margin-top:12px;}
.tech .mechanism .sub_txt .star {margin-top: 13px;color:#000;}


/*----- film -----*/
/*슬라이더 수정*/
.film .slick-slider .items {display:inline-block;}
.film .slick-track {display:flex;margin-left: -0;}
.film .kv_slider {margin: 0 auto;position:relative;overflow: hidden;}
.film .btn_arrow {position:absolute; top:0; 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 .kv_slider .swiper-slide-active .text_wrap {opacity:1; transition: opacity 0s;}
.film .kv_slider .slick-cloned.slick-active .text_wrap {opacity:1;}
.film .kv_slider .text_wrap {position:relative;word-break: keep-all;padding: 0 16px;overflow: hidden;opacity:0;transition: opacity 0.3s;}
.film .kv_slider .text_wrap .title {font-size: 19px; margin-top: 32px;line-height: 1.4;width: 100%;word-break:keep-all;}
.film .kv_slider .text_wrap .hash {font-size: 12px;margin: 6px 0 10px;}
.film .kv_slider .text_wrap .detail {font-size:12px;}
.film .kv_slider .text_wrap a {display:block;width: 172px;height: 40px;background-color:#000;margin-right: 0;margin-left: auto;color:#fff;text-align: center;padding: 12px 12px;font-family:'NotoSansL';font-size: 14px;line-height: 1; background-image:url('../img/film/btn_arrow.png'); background-repeat:no-repeat;background-position:center right;}

/*유튜브 플레이어*/
.film .btn_play {width: 100%;height: auto;position: relative;overflow:hidden;background:#fff;z-index: 9;}
.film .btn_play::after {content:'';display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-image:url('../img/film/slider_thumb_btn.png');background-size:contain;background-position:center;}
.film .btn_play img {width:100%;position: relative;top:0;left:0;}
.film .player_wrap {width: 100%;height: auto; padding-top: 56.25%;position: absolute;background:black;left: 0;top: 0;}
.film #player {position: absolute;top:0;left:0;right:0;bottom: 0;opacity:0;margin: 0;z-index: 1;}

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

/*리스트*/
.film .inner {width:1200px; margin:0 auto;}
.film .film_list ul {display:flex;margin: 50px auto 41px auto;flex-wrap:wrap;justify-content:space-between;}
.film .film_list ul li {width:50%;}
.film .film_list .film_item {display:block;/* height: 167px; */overflow:hidden;margin-bottom: 0;}
.film .film_list .film_item .img_wrapper {width: 100%;height: auto;overflow:hidden;position:relative;margin-bottom: 4px;}
.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);transition:background-color 0.3s;background-size: contain;background-image:url('../img/film/list_thumb_btn.png');}
.film .film_list .film_item .text_wrap {height:63px;}
.film .film_list .film_item .title {font-size:13px;font-family:'NotoSansR';line-height:19px;height:19px; text-overflow:ellipsis;overflow:hidden;white-space:nowrap;margin-left: 16px;}
.film .film_list .film_item .hash {font-size:12px;line-height:19px;height:19px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;margin-left: 16px;margin-top: 2px;}

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


/*----- xmissha(colabo) -----*/
.colabo .top_kv {margin-bottom: 35px;}
.colabo .top_kv .bg {display:block; overflow:hidden;}
.colabo .colabo_list .inner {width:1196px;}
.colabo .colabo_list ul {display:flex;justify-content:flex-start;flex-wrap:wrap;margin-bottom: 25px;}
.colabo .colabo_list ul li {width: 50%;}
.colabo .colabo_list ul li a {display:block;color:#000;}
.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.title {font-family:'NotoSansM'; margin-top:4px; margin-left:16px; font-size:13px; text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
.colabo .colabo_list ul li a span.date {font-size:11px;color:#888;margin: 0 0 28px 16px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}




/* 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"] .brand .history ul li:last-child span.small {letter-spacing: 0;}