@charset "utf-8";

/*
 * File       : main.css
 * Author     : STUDIO-JT (KMS)
 * Guideline  : JTstyle.1.1
 *
 * Dependency : css/reset.css
 *              css/jt-strap.css
 *
 * SUMMARY:
 * 1) GLOBAL
 * 2) VISUAL
 * 3) POST
 * 4) BRAND
 * 5) GLOBAL
 * 6) NOW
 * 7) CHANNEL
 * 8) SNS
 * 9) BLOG
 */



/* **************************************** *
 * GLOBAL
 * **************************************** */
.main_section {padding: 115px 0 180px;}

.main_section_title {text-align: center;}
.main_section_title h2 {padding: 17px 0 75px;position: relative;font-size: 35px;font-weight: 600;color: #333;}
.main_section_title h2:before {content: '';display: block;width: 19px;height: 8px;position: absolute;top: 0;left: 50%;margin-left: -9.5px;background: url(../images/icon/icon-identity-primary.png) no-repeat center center;}

.main_pic {position: absolute;}



/* **************************************** *
 * VISUAL
 * **************************************** */
.main_visual {width: 100%;max-width: 1697px;margin: 0 auto;overflow: hidden;}
.main_visual_fixed_container {position: relative;}
.main_visual_inner_wrap {height:100%;max-width: 1200px;margin: 0 auto;position: relative;}

.main_visual_slider {width: 100%;height: 824px;}
.main_visual_item {width: 100%;height: 100%;position: relative;background: no-repeat center center;border-radius: 5px;overflow: hidden;}
.main_visual_item_obj {position: absolute;background: no-repeat center center;}

.main_visual_item_01 {background-image: url(../images/main/visual01-bg.jpg);}
.main_visual_item_01_txt01 {width: 382px;height: 332px;left: 5px;top: 270px;background-image: url(../images/main/visual01-txt.png);}
.main_visual_item_01_txt02 {width: 382px;height: 332px;right: 17px;top: 247px;background-image: url(../images/main/visual01-logo.png);}

.main_visual_item_02 {background-image: url(../images/main/visual02-bg.jpg);}
.main_visual_item_02_innerbg {width: 100%;height: 100%;left: 0;top: 0;background-image: url(../images/main/visual02-iconbg.png);}
.main_visual_item_02_flag {width: 345px;height: 80px;left: 425px;top: 55px;background-image: url(../images/main/visual02-flag.png);}
.main_visual_item_02_txt {width: 631px;height: 157px;left: 280px;top: 149px;background-image: url(../images/main/visual02-txt.png);}
.main_visual_item_02_desc {width: 470px;height: 29px;left: 361px;top: 315px;background-image: url(../images/main/visual02-desc.png);}
.main_visual_item_02_icon {width: 420px;height: 445px;left: 387px;bottom: 0;background-image: url(../images/main/visual02-icon.png);}

.main_visual_item_03 {background-image: url(../images/main/visual03-bg.jpg);}
.main_visual_item_03_icon{width: 411px;height: 548px;top: 131px;right: 64px;background-image: url(../images/main/visual03-icon.png);}
.main_visual_item_03_txt {width: 679px;height: 159px;top: 290px;left: 89px;background-image: url(../images/main/visual03-txt.png);}

.scroll_down {display: block;width: 24px;height: 24px;margin-left: -12px;position: absolute;left: 50%;bottom: 45px;font-size: 0;background: url(../images/main/visual-down.png) no-repeat center center;background-size: auto 20px;z-index: 110;}

.smile_svg_wrap {width: 100%;position: absolute;left: 0;bottom: 0;z-index: 110;}
.smile_svg_wrap_inner {position: relative;}
.smile_svg_wrap svg {display: block;width: 1697px;height: auto;position: absolute;bottom: 0;left: 50%;margin-left: -848.5px;}
#smile_end {visibility:hidden;}



/* **************************************** *
 * POST
 * **************************************** */
.main_post {max-width: 1920px;margin: 0 auto;padding-bottom: 110px;background: url(../images/main/post-bg.png) no-repeat;background-position: 123px 198px;}

.main_post_left {float: left;width: 408px;position: relative;}
.main_post_right {float: right;width: 702px;position: relative;}
.main_post_item {}
.main_post_top {position: relative;}
.main_post_bottom {padding-top: 33px;}

.main_post_item a {display: block;}
.main_post_item img {width: 100%;height: auto;vertical-align: middle;}
.main_post_item h2 {margin-left: -3px;padding-bottom: 12px;font-size: 35px;line-height: 50px;font-weight: 600;color: #333;}
.main_post_item h2 span {color: var(--color-secondary);}
.main_post_item h3 {font-size: 21px;line-height: 30px;font-weight: 600;letter-spacing: -0.025em;color: #333;}
.main_post_item h3 span {border-bottom: 1px solid transparent;transition: all 300ms;}
.main_post_item:hover h3 span {border-bottom-color: #333;}
.main_post_item p {padding-top: 10px;font-family: var(--font-secondary);font-size: 15px;line-height: 26px;color: #666;}
.main_post_slideitem {position: relative;}
.main_post_slideitem > a {display: block;}
.main_post_slideitem > a:after {content: '';display: table;clear: both;}
.main_post_slideitem > a > div {float: left;width: 50%;height: 363px;}
.main_post_slideitem h3 {color: #fff;}
.main_post_slideitem:hover h3 span {border-bottom-color: #fff;}
.main_post_slideitem p {padding-top: 14px;color: #fff;}
.main_post_slideitem_right {padding: 63px 42px;background: no-repeat center center;background-size: cover;}

.main_post_messenger {margin-top: 13px;margin-bottom: 130px;}
.main_post_jeju {margin-bottom: 75px;}
.main_post_slideitem_01 .main_post_slideitem_right {background-image: url(../images/main/main-post-04.jpg);}
.main_post_slideitem_02 .main_post_slideitem_right {background-image: url(../images/main/main-post-06.jpg);}

.main_post_pic01 {top: 227px;left: 405px;}
.main_post_pic02 {top: 350px;right: -60px;}
.main_post_pic03 {bottom: -190px;left: 160px;}
.main_post_pic04 {right: 138px;bottom: -286px;}

.yellow_cafe_icon {position: absolute;top: 111px;left: 306px;z-index: 10;transform-origin: bottom;}
.yellow_cafe_txt {position: absolute;top: 220px;left: 140px;z-index: 10;}



/* **************************************** *
 * BRAND
 * **************************************** */
.main_brand {position: relative;overflow-x: hidden;}
.main_brand .main_section_title h2 {padding-bottom: 35px;}
.main_brand_wrap {position: relative;}

.main_brand .slick-list {overflow: visible;}
.main_brand_slider {margin-top: 77px;position: relative;}
.main_brand_slideitem {font-size: 0;line-height: 1;text-align: center;}
.main_brand_slideitem > div {display: inline-block;height: 500px;vertical-align: middle;}
.main_brand_slideitem_img {width: 487px;transform-origin: center bottom;}
.main_brand_slideitem_txt {width: 340px;padding-top: 108px;text-align: left;}
.main_brand_slideitem img {vertical-align: middle;}
.main_brand_slideitem h3 {font-size: 30px;font-weight: 600;line-height: 28px;color: #333;}
.main_brand_slideitem b {display: block;min-height: 80px;box-sizing: border-box;padding: 14px 0 10px;font-family: var(--font-secondary);font-size: 16px;font-weight: 600;line-height: 28px;color: #333;}
.main_brand_slideitem p {padding-bottom: 33px;margin-bottom: 26px;font-family: var(--font-secondary);font-size: 15px;line-height: 26px;color: #666;border-bottom: 1px solid #e2e2e2;}
.main_brand_slideitem a {display: inline-block;width: 118px;height: 39px;margin-right: 11px;padding-right: 12px;font-size: 13px;font-weight: 600;line-height: 35px;text-align: center;letter-spacing: -0.05em;color: #666;border: 2px solid #ddd;border-radius: 5px;background: url(../images/icon/direction-right-primary.svg) no-repeat 93px center;transition: background 300ms;}
.main_brand_slideitem a:hover {background-color: #f1f1f1;}

.main_brand_typo {width: 100%;height: 160px;position: absolute;left: 0;bottom: 0;overflow: hidden;}
.main_brand_typo img {display: block;max-width: 100%;margin: 0 auto;}



/* **************************************** *
 * GLOBAL
 * **************************************** */
.main_global {height: 590px;background: url(../images/main/global-bg.jpg) no-repeat center center;background-size: cover;background-attachment: fixed;}
.main_global .main_section_title h2 {color: #fff;}

.main_global_list {}
.main_global_list li {float: left;width: 282px;height: 400px;position: relative;margin-left: 24px;background: no-repeat center center;}
.main_global_list li:first-child {margin-left: 0;}
.main_global_list figure {display: block;width: 100%;height: 100%;overflow: hidden;}
.main_global_list img {width: 100%;height: 100%;vertical-align: middle;-ms-transform: scale(1) rotate(0.05deg);-webkit-transform: scale(1) rotate(0.05deg);transform: scale(1) rotate(0.05deg);-webkit-transition: all 1s;transition: all 1s;}
.main_global_list li:hover img {-ms-transform: scale(1.05);-webkit-transform: scale(1.05);transform: scale(1.05);}
.main_global_list a {display: block;width: 100%;height: 100%;}
.main_global_list p {font-family: var(--font-secondary);font-size: 15px;line-height: 24px;color: #fff;}
.main_global_list time {display: block;padding-top: 12px;font-size: 13px;font-weight: 600;color: rgba(255,255,255,0.5);}
.main_global_list_txt {width: 100%;padding: 30px 33px;position: absolute;left: 0;bottom: 0;}

.main_global_list li {transform: translate3d(0, 90px, 0);opacity: 0;transition: 800ms;}
.main_global_list li:nth-child(1) {transition-delay: 300ms;}
.main_global_list li:nth-child(2) {transition-delay: 450ms;}
.main_global_list li:nth-child(3) {transition-delay: 600ms;}
.main_global_list li:nth-child(4) {transition-delay: 750ms;}
.main_global_list.animate li {transform: translate3d(0, 0, 0);opacity: 1;}



/* **************************************** *
 * NOW
 * **************************************** */
.main_now {padding-top: 180px;padding-bottom: 115px;background: #f6f6f6;}

.main_now_top {position: relative;}
.main_now_top:after {content: '';display: table;clear: both;}
.main_now_top_txt {float: left;}
.main_now_top_txt h3 {padding: 34px 0 19px;font-size: 35px;font-weight: 600;line-height: 50px;color: #333;}
.main_now_top_txt p {font-family: var(--font-secondary);font-size: 15px;font-size: 15px;line-height: 26px;color: #666;}
.main_now_last {float: right;}
.main_now_last > div {width: 588px;padding: 27px 48px 20px;margin-bottom: 10px;background: #fff;}
.main_now_last b {display: block;padding-bottom: 4px;font-size: 18px;font-weight: 600;letter-spacing: -0.025em;color: #333;}
.main_now_last ul {display: block;}
.main_now_last li {display: block;width: 100%;}
.main_now_last a {display: block;position: relative;}
.main_now_last p {display: inline-block;vertical-align: middle;font-family: var(--font-secondary);font-size: 15px;line-height: 28px;color: #666;}
.main_now_last span {display: block;position: absolute;right: 0;top: 1px;font-size: 12px;font-weight: 600;line-height: 28px;color: #222;}
.main_now_last li i {display: inline-block;vertical-align: middle;width: 58px;height: 28px;font-size: 12px;font-weight: 600;line-height: 28px;text-align: center;font-style: normal;color: #fff;border-radius: 5px;}
.main_now_last li.notice i {background: var(--color-primary);}
.main_now_last li.event i {background: #efbb07;}
.main_now_notice_slider p {padding-left: 9px;}
.main_now_notice b {padding-bottom: 10px;}

.main_now_bottom {padding-top: 90px;}
.main_now_bottom ul {}
.main_now_bottom li {float: left;width: 25%;text-align: center;border-right: 1px solid #e9e9e9;border-left: 1px solid #fff;}
.main_now_bottom li:first-child {border-left: none;}
.main_now_bottom li:last-child {border-right: none;}
.main_now_bottom img {display: block;max-width: 100%;margin: 0 auto;}
.main_now_bottom b {display: block;padding: 16px 0 19px;font-size: 21px;font-weight: 600;letter-spacing: -0.025em;color: #333;}
.main_now_bottom p {font-family: var(--font-secondary);font-size: 15px;line-height: 26px;color: #666;}

.main_now_pic01 {left: -132px;top: 22px;}



/* **************************************** *
 * CHANNEL
 * **************************************** */
.main_channel {padding-bottom: 115px;}
.main_channel_slider {position: relative;margin: 0 -12px;padding-bottom: 54px;}
.main_channel_item {display: block;width: 50%;padding: 0 12px;}
.main_channel_item a {display: block;}
.main_channel_item div {position: relative;}
.main_channel_item img {vertical-align: middle;}
.main_channel_item .play_icon {display: block;width: 68px;height: 68px;position: absolute;top: 50%;left: 50%;margin-top: -34px;margin-left: -34px;font-size: 0;background: url(../images/icon/icon-play.png) no-repeat center center;}
.main_channel_item:hover .play_icon {animation: beatmotion 550ms;}
.main_channel_item h3 {padding: 28px 0 14px;font-size: 21px;font-weight: 600;letter-spacing: -0.025em;color: #333;}
.main_channel_item h3 span {border-bottom: 1px solid transparent;transition: all 300ms;}
.main_channel_item:hover h3 span {border-bottom-color: #333;}
.main_channel_item p {font-family: var(--font-secondary);font-size: 15px;color: #666;}
.main_channel .slick-dots {width: 100%;left: 0;bottom: 0;text-align: center;}
.main_channel .slick-dots li {margin: 0 6px;}
.main_channel .slick-dots span {border-color: var(--color-secondary);}
.main_channel .slick-dots li.slick-active span {background: var(--color-secondary);}

@keyframes beatmotion {
    0% {
        transform: scale( 1);
    }
    30% {
        transform: scale( .75);
    }
    100% {
        transform: scale( 1);
    }
}



/* **************************************** *
 * SNS
 * **************************************** */
.main_sns {padding-top: 0;padding-bottom: 0;overflow-x: hidden;}
.main_sns .main_section_title h2 {padding: 0 0 25px;font-size: 50px;letter-spacing: -0.025em;text-align: left;color: rgba(51,51,51,0.22);}
.main_sns .main_section_title h2:before {display: none;}

.main_sns_slider {max-width: 1679px;margin: 0 auto;}
.main_sns_slider .slick-list {overflow: visible;}
.main_sns_slider_item {width: 240px;height: 240px;position: relative;overflow: hidden;}
.main_sns_slider_item a {display: block;width: 100%;height: 100%;cursor: move;}
.main_sns_overlay {padding: 32px 28px;position: absolute;left: 0;right: 0;top: 0;bottom: 0;background: rgba(255, 255, 255, 0.95);opacity: 0;transform: translateY(100%);transition: transform 400ms, opacity 400ms;}
.main_sns_overlay p {padding-bottom: 16px;font-family: var(--font-primary);font-size: 15px;line-height: 24px;color: #666;}
.main_sns_overlay time {display: block;font-size: 13px;font-weight: 600;letter-spacing: -0.025em;color: #333;}
.main_sns_overlay i {display: block;position: absolute;bottom: 24px;font-size: 16px;font-weight: 600;letter-spacing: -0.025em;font-style: normal;color: #333;}

.sns_type {display: block;width: 22px;height: 22px;position: absolute;right: 20px;bottom: 20px;background: no-repeat center center;background-size: auto 21px;z-index: 10;transition: background 400ms;}
.sns_itme_insta .sns_type {background-image: url(../images/sns/sns-insta-secondary.svg);}
.sns_itme_facebook .sns_type {background-image: url(../images/sns/sns-facebook-secondary.svg);}

.main_sns_slider_item:hover .main_sns_overlay {opacity: 1;transform: translateY(0);transition: transform 400ms, opacity 200ms;}
.sns_itme_insta:hover .sns_type {background-image: url(../images/sns/sns-insta-third.svg);}
.sns_itme_facebook:hover .sns_type {background-image: url(../images/sns/sns-facebook-third.svg);}



/* **************************************** *
 * BLOG
 * **************************************** */
.main_blog {max-width: 1920px;margin: 0 auto;padding-top: 95px;background: url(../images/main/post-bg.png) no-repeat;background-position: 120px -140px;}
.main_blog .main_section_title h2 {padding-bottom: 35px;font-size: 21px;letter-spacing: -0.025em;}
.main_blog .main_section_title h2:before {display: none;}

.main_blog_wrap {position: relative;}
.main_blog_slider {position: relative;margin: 0 -12px;}
.main_blog_item {width: 384px;padding: 0 12px;}
.main_blog_item a {display: block;position: relative;}
.main_blog_item img {vertical-align: middle;}
.main_blog_txt {padding: 26px 34px 50px;}
.main_blog_txt h3 {display: block;width: 100%;padding-bottom: 13px;font-size: 21px;letter-spacing: -0.025em;font-weight: 600;color: #333;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.main_blog_txt p {font-family: var(--font-secondary);font-size: 15px;line-height: 26px;color: #666;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.main_blog_item a:after {content: "";border: 2px solid var(--color-secondary);opacity: 0;margin: auto;box-sizing: border-box;-webkit-transition: 300ms border, 150ms opacity;transition: 300ms border, 150ms opacity;-webkit-transition-delay: 0ms, 100ms;transition-delay: 0ms, 100ms;position: absolute;top: 0;left: 0;bottom: 0;right: 0;z-index: 9;}
.main_blog_item a:hover:after {border-width: 6px;opacity: 1;-webkit-transition: 300ms border, 50ms opacity;transition: 300ms border, 50ms opacity;-webkit-transition-delay: 0ms, 0ms;transition-delay: 0ms, 0ms;}

.main_blog .slick-control {margin-top: -120px;}
.main_blog .slick-control .slick-prev {left: -105px;}
.main_blog .slick-control .slick-next {right: -105px;}