@charset "utf-8";

/*
 * File       : a-main.css
 * Author     : STUDIO-JT (KMS)
 * Guideline  : JTstyle.1.1
 *
 * Dependency : css/reset.css
 *
 * SUMMARY:
 * 01) Global
 * 02) Visual
 * 03) Bestseller
 * 04) New product
 * 05) Most Liked review
 * 06) Laneige Event
 * 07) Beauty solution
 * 08) Make up look
 * 09) How to
 * 10) Every day Laneige
 */



/* **************************************** *
 * Global
 * **************************************** */
.main_section {padding-top: 166px;position: relative;}

.main_section_head {margin-bottom: 65px;position: relative;text-align: center;}
.main_section_title {font-size: 80px;font-weight: 400;line-height: 1.1;letter-spacing: -0.01em;color: #222;}
.main_section_desc {margin-top: 7px;font-size: 23px;font-weight: 500;line-height: 1.65;letter-spacing: -0.05em;color: #222;}
.main_section_desc > span {padding-bottom: 3px;color: var(--color-primary);}
.main_section_more {position: absolute;right: -8px;top: 49px;font-size: 16px;font-weight: 500;letter-spacing: -0.05em;line-height: 1.3;color: #222;}
.main_section_more > span {border-bottom: 1px solid #222;}

.main_section_body {position: relative;}

/* sticky symbol */
.main_sticky_symbol_wrap {position: relative;}
.main_sticky_symbol {width: 581px;height: 936px;position: absolute;top: 166px;right: -324px;z-index: -1;transform: rotate(45deg);}
.main_sticky_symbol svg {display: block;width: 100%;height: 100%;}

.main_sticky_symbol.sticky {position: fixed;top: 116px;right: -324px;}
.main_sticky_symbol.sticky.clear {position: absolute;right: -324px !important;top: auto;bottom: 505px;}



/* **************************************** *
 * Visual
 * **************************************** */
.main_visual {padding: 0 80px;}
.main_visual_inner {position: relative;}

.main_visual_symbol {width: 331px;height: 535px;position: absolute;left: 0;bottom: 0;}
.main_visual_symbol svg {display: block;width: 100%;height: 100%;}

.main_visual_item {width: 100%;}
.main_visual_item .custom_hover {width: 871px;height: 100%;position: absolute;top: 0;right: 0;z-index: 1;}
.main_visual_img_bg {width: 871px;height: 100%;position: absolute;right: 0;top: 0;background: no-repeat center center;background-size: cover;}
.main_visual_img {position: absolute;top: 0;left: 36.2%;opacity: 0;}
.main_visual_txt {display: table;width: 50%;height: 700px;}
.main_visual_txt_inner {display: table-cell;vertical-align: middle;padding-left: 198px;padding-bottom: 30px;}
.main_visual_txt h2 {font-size: 40px;font-weight: 400;letter-spacing: -0.05em;line-height: 1.3;color: #222;}
.main_visual_txt p {margin: 11px 0 77px;font-size: 18px;font-weight: 500;letter-spacing: -0.025em;line-height: 1.65;color: #222;}

.main_visual_item_01 .main_visual_img_bg {background-image: url(../images/type-a/visual-bg-01.jpg);}
.main_visual_item_02 .main_visual_img_bg {background-image: url(../images/type-a/visual-bg-02.jpg);}
.main_visual_item_03 .main_visual_img_bg {background-image: url(../images/type-a/visual-bg-03.jpg);}

.main_visual_pager {left: 185px;top: 83px;position: absolute;z-index: 2;}
.main_visual_pager > button {display: inline-block;margin: 0 9px;padding: 3px 10px;line-height: 1.55;font-size: 14px;font-weight: 500;letter-spacing: 0.1em;color: #aaa;background: transparent;border: none;outline: none;box-shadow: none;box-sizing: border-box;cursor: pointer;}
.main_visual_pager > button > span {border-bottom: 1px solid transparent;}
.main_visual_pager > button.cycle-pager-active {color: #222;}
.main_visual_pager > button.cycle-pager-active > span {border-bottom-color: #222;}

.main_visual_control {width: 100%;padding-left: 26px;position: absolute;bottom: 23px;left: 0;font-size: 0;text-align: center;z-index: 2;}

.main_visual_arrows {display: inline-block;vertical-align: middle;padding: 17px 10px;margin: 0;position: relative;background: none;border: none;outline: none;box-shadow: none;cursor: pointer;box-sizing: border-box;}
.main_visual_arrows > span {position: relative;font-size: 11px;font-weight: 600;letter-spacing: 0.1em;color: #222;z-index: 2;}
.main_visual_arrows > i {display: block;width: 0;height: 0;position: absolute;top: 50%;transition: all 300ms;z-index: 1;opacity: 0;}
.main_visual_arrows > i > small {display: block;width: 100%;height: 100%;background: rgba(122, 163, 219, 0.5);border-radius: 50%;}
.main_visual_prev > span {padding-left: 20px;}
.main_visual_prev > i {left: 0;transform: translateX(50%) translateY(-50%);}
.main_visual_next > span {padding-right: 20px;}
.main_visual_next > i {right: 0;transform: translateX(-50%) translateY(-50%);}

.main_visual_progress {display: inline-block;vertical-align: middle;width: 184px;height: 1px;margin: 0 11px 0 29px;position: relative;background: #ddd;}
.main_visual_progress > span {position: absolute;top: 0;left: 0;width: 0;height: 1px;background: #222;}

.main_visual_state {display: inline-block;vertical-align: middle;width: 26px;height: 20px;margin-right: 19px;position: relative;}
.main_visual_state_btn {display: block;width: 100%;height: 100%;margin: 0;padding: 0;position: absolute;top: 0;left: 0;background: transparent;border: none;cursor: pointer;opacity: 0; visibility:hidden; -webkit-transition: opacity 300ms;transition: opacity 300ms;}
.main_visual_state_btn:after {display: block;font-family: 'jt-font';font-size: 18px;font-weight: normal;text-align: center;line-height: 20px;color: #222;}
.main_visual_state_btn.icon_play:after {content: '\e91a';}
.main_visual_state_btn.icon_pause:after {content: '\e94d';}
.main_visual_state.play .main_visual_state_btn.icon_pause {opacity: 1; visibility: visible;}
.main_visual_state.pause .main_visual_state_btn.icon_play {opacity: 1; visibility: visible;}



/* **************************************** *
 * Bestseller
 * **************************************** */
.main_best_slider {margin: 0 -20px;}
.main_best_item {float: left;width: 25%;padding: 0 20px;}
.main_best_item > a {display: block;}
.main_best_img {position: relative;overflow: hidden;}
.main_best_img img {display: block;}
.main_best_img > figure.hover {position: absolute;left: 0;top: 0;opacity: 0;z-index: 2;transition: opacity .3s cubic-bezier(0, 0, 0.58, 0.32);}
.main_best_txt {padding-top: 34px;}
.main_best_txt h3 {font-size: 23px;font-weight: 400;line-height: 1.35;letter-spacing: -0.05em;color: #222;}
.main_best_txt h3 span {padding-bottom: 2px;border-bottom: 1px solid transparent;transition: all 300ms;}
.main_best_txt p {padding-top: 9px;font-size: 16px;font-weight: 400;line-height: 1.65;letter-spacing: -0.05em;color: #666;}
.main_best_item > a:hover .main_best_img > figure.hover {opacity: 1;}
.main_best_item > a:hover .main_best_txt h3 span {border-bottom-color: #000;}



/* **************************************** *
 * New product
 * **************************************** */
.main_new_item_inner {display: table;}
.main_new_item_inner > div {display: table-cell;}
.main_new_bg {width: 740px;}
.main_new_bg img {display: block;}
.main_new_txt {width: calc(100% - 740px);padding-left: 128px;vertical-align: middle;}
.main_new_txt h3 {font-size: 40px;font-weight: 400;line-height: 1.3;letter-spacing: -0.05em;color: #222;}
.main_new_txt p {padding: 14px 0 38px;font-size: 18px;font-weight: 500;line-height: 1.55;letter-spacing: -0.05em;color: #666;}



/* **************************************** *
 * Most Liked review
 * **************************************** */
.main_review_item {width: 100%;}
.main_review_item a {display: block;position: relative;}
.main_review_img {position: absolute;top: -29px;right: 219px;}
.main_review_img img {display: block;}
.main_review_txt {display: table;width: 744px;height: 339px;text-align: center;}
.main_review_txt_inner {display: table-cell;vertical-align: middle;}
.main_review_txt b {display: block;font-size: 23px;font-weight: 400;letter-spacing: -0.05em;color: #222;}
.main_review_txt p {display: block;font-size: 16px;font-weight: 500;line-height: 1.75;letter-spacing: -0.05em;color: #666;}
.main_review_txt p span {border-bottom: 1px solid transparent;transition: all 300ms;}
.main_review_txt em {display: block;margin-top: 20px;font-size: 16px;font-weight: 400;letter-spacing: -0.05em;color: #222;}
.main_reivew_star {display: block;margin: 19px 0 9px;font-size: 0;text-align: center;}
.main_reivew_star > i {display: inline-block;vertical-align: middle;margin: 0 -5px;font-size: 34px;font-style: normal;color: #000;}
.main_reivew_star > i:after {font-family: 'jt-font';content: '\e90d';}
.main_review_item a:hover .main_review_txt p span {border-bottom-color: #222;}

.main_review_control {display: block;margin-top: 75px;position: relative;text-align: center;}

.main_review_state {display: inline-block;vertical-align: middle;width: 26px;height: 20px;position: relative;}
.main_review_state_btn {display: block;width: 100%;height: 100%;margin: 0;padding: 0;position: absolute;top: 0;left: 0;background: transparent;border: none;cursor: pointer;opacity: 0; visibility:hidden; -webkit-transition: opacity 300ms;transition: opacity 300ms;}
.main_review_state_btn:after {display: block;font-family: 'jt-font';font-size: 18px;font-weight: normal;text-align: center;line-height: 20px;color: #222;}
.main_review_state_btn.icon_play:after {content: '\e91a';}
.main_review_state_btn.icon_pause:after {content: '\e94d';}
.main_review_state.play .main_review_state_btn.icon_pause {opacity: 1; visibility: visible;}
.main_review_state.pause .main_review_state_btn.icon_play {opacity: 1; visibility: visible;}



/* **************************************** *
 * Laneige Event
 * **************************************** */
.main_event_slider {margin: 0 -20px;}
.main_event_item {float: left;width: 33.33%;padding: 0 20px;}
.main_event_item > a {display: block;}
.main_event_img img {display: block;}
.main_event_txt {padding-top: 37px;}
.main_event_txt h3 {font-size: 23px;font-weight: 400;line-height: 1.35;letter-spacing: -0.05em;color: #222;}
.main_event_txt h3 span {padding-bottom: 2px;border-bottom: 1px solid transparent;transition: all 300ms;}
.main_event_txt p {padding-top: 19px;font-size: 16px;font-weight: 400;line-height: 1.65;letter-spacing: -0.05em;color: #666;}
.main_event_item > a:hover .main_event_txt h3 span {border-bottom-color: #222;}

.main_new_bg img {opacity: 0;-webkit-clip-path: polygon(0 0,0 0,0 100%,0 100%);clip-path: polygon(0 0,0 0,0 100%,0 100%);-webkit-transition: clip-path 1.1s cubic-bezier(.19,1,.22,1),opacity 1.1s ease 167ms,-webkit-clip-path 1.1s cubic-bezier(.19,1,.22,1);transition: clip-path 1.1s cubic-bezier(.19,1,.22,1),opacity 1.1s ease 167ms,-webkit-clip-path 1.1s cubic-bezier(.19,1,.22,1);}
.main_new_bg.animate img {opacity: 1;-webkit-clip-path: polygon(0 0,100% 0,100% 100%,0 100%);clip-path: polygon(0 0,100% 0,100% 100%,0 100%);}



/* **************************************** *
 * Beauty solution
 * **************************************** */
.main_solution {padding-top: 350px;}

.main_solution_bg {position: absolute;left: 0;right: 0;top: 175px;bottom: 0;background: url(../images/type-a/solution-bg.png); display:none}
.main_solution_typo {position: absolute;right: -536px;top: -215px;font-size: 300px;letter-spacing: -0.01em;line-height: 1;white-space: nowrap;color: #222;}

.main_solution_illust {position: relative;}
.main_solution_illust > img:first-child {display: block;margin: 0 auto;visibility: hidden;}

.main_solution_leaf{ position:absolute; bottom: 99px; left: 930px; transform-origin: 18px 190px;}

.main_solution_wave_container {left: 50%;transform: translateX(-50%);width: 880px;overflow: hidden;height: 50px;margin: auto;position: absolute;bottom: 30px; box-shadow: 0px 40px 0px #fff;}
.main_solution_wave { position: absolute; left: 0;  bottom: 0px; width: 1180px; height: 50px; background: url(../images/type-a/solution-wave.svg) repeat-x left top;}
.main_solution_illust img.main_solution_woman { position: absolute; left: 50%; margin-left: -595px;  bottom: 30px;}

.main_solution_vegetable_path_guide,
.main_solution_bubble_path_guide{ visibility:hidden}

.main_solution_vegetable{  position: absolute;  bottom: -3px;  left: 140px;}
#main_solution_vegetable_flower_svg { position: absolute; top: -22px; left: 83px;}
.main_solution_bubble_01 { position: absolute;  right: 130px; bottom: 40px;  transform: scale(3);}
.main_solution_bubble_02 { position: absolute; bottom: 430px; left: 1064px; transform: scale(0.85);}
.main_solution_bubble_02 svg { display:block; rotate(45deg);}
.main_solution_bubble_03 { position: absolute; bottom: 250px; left: -20px; transform: scale(0.6);}

.main_solution_txt {margin-top: 48px;text-align: center;}
.main_solution_txt h3 {font-size: 40px;font-weight: 400;letter-spacing: -0.05em;line-height: 1.3;color: #222;}
.main_solution_txt p {margin: 11px 0 17px;font-size: 18px;font-weight: 500;letter-spacing: -0.025em;line-height: 1.65;color: #222;}



/* **************************************** *
 * Make up look
 * **************************************** */
.main_look_primary {position: relative;z-index: 1;}
.main_look_item {width: 100%;position: relative;}
.main_look_item a {display: block;width: 100%;}
.main_look_bg {position: absolute;left: 0;right: 0;top: 0;bottom: 0;background: no-repeat center center;}
.main_look_txt {display: table;width: 100%;height: 653px;position: relative;}
.main_look_txt_inner {display: table-cell;vertical-align: middle;padding-left: 172px;}
.main_look_txt h3 {font-size: 40px;font-weight: 400;letter-spacing: -0.05em;line-height: 1.3;color: #222;}
.main_look_txt p {margin-top: 11px;font-size: 18px;font-weight: 500;letter-spacing: -0.025em;line-height: 1.65;color: #222;}

.main_look_item_01 .main_look_bg {background-image: url(../images/type-a/look-bg-01.jpg);}
.main_look_item_02 .main_look_bg {background-image: url(../images/type-a/look-bg-02.jpg);}

.main_look_secondary {padding-top: 175px;position: relative;z-index: 2;}
.main_look_sub_slide {width: 100%;position: absolute;left: 0;bottom: 0;}
.main_look_sub_item {width: 25%;padding-bottom: 26px;margin-bottom: 30px;text-align: center;}
.main_look_sub_item img {display: block;}
.main_look_sub_item h3 {margin-top: 18px;font-size: 18px;font-weight: 500;letter-spacing: -0.05em;line-height: 1.3;color: #222;}

.swiper-container-horizontal > .main_look_sub_progress.swiper-scrollbar {width: 100%;height: 2px;position: absolute;left: 0;bottom: 0;background: #ddd;cursor: move;}
.main_look_sub_progress .swiper-scrollbar-drag {height: 4px;position: absolute;top: 50%;margin-top: -2px;background: #222;border-radius: 0;}

.main_look_sub_slide_02 {opacity: 0;visibility: hidden;}
.main_look_sub_slide_02 .swiper-wrapper {-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;}



/* **************************************** *
 * How to
 * **************************************** */
.main_how_item_wrap {overflow: hidden;}
.main_how_item a {display: block;}
.main_how_thumb img {display: block;}
.main_how_txt h3 {font-size: 32px;font-weight: 400;line-height: 1.31;letter-spacing: -0.05em;color: #222;}
.main_how_txt h3 span {padding-bottom: 2px;border-bottom: 1px solid transparent;transition: all 300ms;}
.main_how_txt p {padding-top: 16px;font-size: 18px;font-weight: 500;line-height: 1.55;letter-spacing: -0.05em;color: #666;}
.main_how_item a:hover .main_how_txt h3 span {border-bottom-color: #222;}

.main_how_01, .main_how_03 {float: left;width: 870px;}
.main_how_01 > a, .main_how_03 > a {display: table;width: 100%;}
.main_how_01 > a > div, .main_how_03 > a > div {display: table-cell;vertical-align: middle;}
.main_how_01 > a > div.main_how_thumb, .main_how_03 > a > div.main_how_thumb {width: 480px;}
.main_how_01 > a > div.main_how_txt, .main_how_03 > a > div.main_how_txt {width: 390px;}

.main_how_01 > a > div.main_how_txt {padding-left: 76px;}

.main_how_02 {float: right;width: 480px;margin-top: 210px;}
.main_how_02 .main_how_txt {margin-top: 53px;}

.main_how_03 {margin-top: 200px;}

/* motion */
.main_how_thumb img {opacity: 0;-webkit-clip-path: polygon(0 0,0 0,0 100%,0 100%);clip-path: polygon(0 0,0 0,0 100%,0 100%);-webkit-transition: clip-path 1.1s cubic-bezier(.19,1,.22,1),opacity 1.1s ease 167ms,-webkit-clip-path 1.1s cubic-bezier(.19,1,.22,1);transition: clip-path 1.1s cubic-bezier(.19,1,.22,1),opacity 1.1s ease 167ms,-webkit-clip-path 1.1s cubic-bezier(.19,1,.22,1);}
.main_how_thumb.animate img {opacity: 1;-webkit-clip-path: polygon(0 0,100% 0,100% 100%,0 100%);clip-path: polygon(0 0,100% 0,100% 100%,0 100%);}



/* **************************************** *
 * Every day Laneige
 * **************************************** */
.main_insta .main_section_head {margin-bottom: 53px;}
.main_insta .main_section_desc {margin-top: 40px;font-size: 16px;font-weight: 400;letter-spacing: 0.05em;color: #666;}

.main_insta_list {overflow: hidden;}
.main_insta_list > a {float: left;display: block;width: 20%;overflow: hidden;}
.main_insta_list > a > img {display: block;}