@charset "utf-8";

html {font-size: 10px;}
body { background-color: #fff; margin: 0; height: 100%; font-size: 1rem; min-height: auto; color: #343434; }
img {max-width: 100%; vertical-align: top;}
#container.event_templete {overflow: hidden; padding-top: 10rem;}
#container.event_templete.ul_none {padding-top: 4.8rem;}

.mobile__head {position: relative; display: flex; justify-content: center; align-items: center; height: 4.8rem;}
.mobile__head .name__ {font-size: 1.8rem; font-weight: 600;}
#mobileShare { z-index: 99990; position: fixed; top: 1.4rem; right: 2rem; display: inline-block; width: 2.2rem; height: 2.0rem; text-indent: -9999px; background-repeat: no-repeat; background-position: center; background-image: url(https://img.lifet.co.kr/icon/share_m.svg); cursor: pointer; background-size: 2.2rem;}

.go_menu {overflow-x: scroll; z-index: 11; position: fixed;  top: 4.8rem; display: flex; align-items: center;  width: 100%; height: 5.2rem; padding: 0 1.8rem; background-color: #252525;}
.go_menu.fixed {z-index: 2; position: fixed;}
.go_menu li {position: relative;}
.go_menu li + li a::before {content:'ㅣ'; margin-right: 1rem; color: inherit; font-size: 1.8rem; font-weight: 200; line-height: 130%; }
.go_menu li + li a.on::before {opacity: 0.5;}
.go_menu li a {display: inline-flex; align-items: center; margin: 0 0 0 1rem; color: #fff; font-size: 1.6rem; font-weight: 500; line-height: 130%; white-space: nowrap; opacity: 0.5;}
.go_menu li a.on {opacity: 1;}
.go_menu li a span {display: block; margin-bottom: 0.8rem; font-size: 1.4rem; font-weight: 400; line-height: 130%;}

button.download {display: flex; align-items: center; justify-content: center; width: 23.1rem; height: 4.4rem; margin: 0 auto; padding: 1rem 0; color: #fff; font-size: 1.6rem; font-weight: 700; line-height: 2.4rem;  border-radius: 6rem; background: #3B3B3B;}
button.download::after {content: ''; display: inline-block; width: 2rem; height: 2rem; margin-left: 0.4rem; background: url(https://img.lifet.co.kr/event/icon_download.png) no-repeat center; background-size: 2rem;}
button.download.disabled {background-color: rgba(59, 59, 59, 0.7);}
button.download.disabled::after {display: none;}
.event_templete .btn {width: 100%; margin-top: 3rem; color: #fff; border-radius: 8px; border: 0;}

.section_coupon {cursor:pointer;}
.section_product .event_title {position: relative; margin-bottom: 0.9rem; font-size: 1.4rem; font-weight: 600; line-height: 150%; text-align: center;}
.section_product h2 {position: relative; color: #fff; font-size: 3.2rem; font-weight: 700; line-height: 130%; text-align: center;}
.section_product h2 span {display: block; margin-bottom: 0.4rem; font-size: 2rem; font-weight: 600; line-height: 130%;}
.section_product {position: relative; padding: 5rem 1.4rem 5rem;}
.section_product .menu {position: relative; display: flex; flex-wrap: wrap; justify-content: center; margin: 2.2rem 0 0.2rem;}
.section_product .menu li + li {margin-left: 0.6rem;}
.section_product .menu li a {display: block; margin-top: 0.8rem; padding: 0.6rem 1rem; color: #343434 !important; font-size: 1.4rem; font-weight: 600; line-height: 130%; border-radius: 6rem; background-color: #fff;}
.section_product .menu li a.on {color: #fff !important;}
.section_product button.btn_blue {position: relative; width: 100%; height: 5.3rem; margin-top: 3rem; font-size: 1.6rem;}
.bg_img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center top; background-size: 100%;}

.product_list {position: relative; margin-bottom: 0; margin-left: -0.8rem; text-align: left;}
.product_list li a {position: relative; margin-bottom: 0; }
.product_list.event li {width: calc(100% / 3 - 0.8rem); margin: 1.8rem 0 0 0.8rem; }
.product_list.event li .img {overflow: hidden; width: 100%; height: auto; margin-bottom: 0.6rem; border-radius: 0.6rem; background-color: #fff;}
.product_list.event li .img img {width: 100%;}
.product_list li .img > span {position: absolute; left: 0; bottom: 0; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: #fff; font-size: 1.2rem; font-weight: 600; line-height: 130%; border-radius: 0; background-color: #212121;}
.product_list.event li .heart {right: 0.6rem; top: 0.6rem; width: 1.9rem; height: 1.9rem; background-size: 1.9rem;}
.product_list.event .pro_name > span:first-child {font-size: 1rem;}
.product_list.event .pro_name p {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0.2rem 0 0.4rem; font-size: 1.3rem; font-weight: 400; }
.product_list.event .pro_name .discount .percent {color: #FF5C5C; font-size: 1.4rem;}
.product_list.event .pro_name .discount strong {margin-right: 0; font-size: 1.4rem;}

.modal-dialog .content-area {overflow:visible; width: 31rem; border-radius: 2rem;}
.modal-dialog .modal-content {align-items: center; background-color: transparent;}
.modal-dialog .content-area .closer {top: 1.2rem; right: 1.2rem; background-size: 2.8rem;}
.coupun_winning {position: relative; width: 31rem; padding: 5.6rem 2.1rem 3rem; text-align: center; border-radius: 2rem; background-color: #FFF;}
.coupun_winning span {font-size: 1.8rem; font-weight: 600; line-height: 130%;}
.coupun_winning strong {display: block; margin: 0.6rem 0 2rem; font-size: 3.2rem; font-weight: 700; line-height: 130%; }
.coupun_winning button {display: flex; align-items: center; justify-content: center; width: 100%; height: 4.8rem; color: #fff; font-size: 1.6rem; font-weight: 600; line-height: 130%; border-radius: 4.4rem; background-color: #222025;}
.section_img {margin-bottom: 0;}

.service {padding: 5rem 0;}
.service .logo {color: #4D95FF; text-align: center;}
.service .logo img {width: 11rem;}
.service .logo p {margin-top: 0; color: #4D95FF; font-size: 2.8rem; font-weight: 600; line-height: 150%;}
.service .logo p span {display: block; color: #343434;  font-size: 1.8rem; font-weight: 500; line-height: 150%;}
.service ul {margin: 3rem 2rem 0;}
.service ul li a {display: flex; align-items: center; padding: 0.9rem 2.3rem; font-size: 2rem; font-weight: 600; line-height: 150%; border-radius: 0.8rem; background-color: #F4F4F8;}
.service ul li + li {margin-top: 1rem;}
.service ul li a img {width: 9rem; margin-right: 1.4rem;}
.service dl dt {display: flex; align-items: center; margin-bottom: 0.2rem; font-size: 2rem; font-weight: 600; line-height: 140%;}
.service dl dt::after {content: ''; display: inline-block; width: 1.6rem; height: 1.6rem; margin-left: 0.7rem; background: url(https://img.lifet.co.kr/event/week3_arrow.png) no-repeat; background-size: 1.6rem;}
.service dl dd {color: #666; font-size: 1.4rem; font-weight: 400; line-height: 140%;}


@media (min-width: 750px) {
    html {font-size: 14px;}
    #container {overflow: hidden; position: relative; max-width: 520px; margin: 4.8rem auto 0;}
    .mobile__head, .go_menu {overflow: hidden; max-width: 520px; margin: 0 auto;}
    header.app_top ~ #container.event_templete .go_menu {top: 9.5rem;}
    #container .mobile__head .name__.hTitle {display: block;}
    .mobile__head {z-index: 300; overflow: visible; position: fixed; width: 100%; top: 6.7rem; display: flex; justify-content: center; align-items: center; height: 4.8rem; border-bottom: 1px solid #D8D8D8; background-color: #fff;}
    .mobile__head .name__ {font-size: 1.8rem; font-weight: 600;}
    .mobile__head .back {z-index: 1; position: absolute; left: 0; top: 0; width: 5rem; height: 5rem; background-repeat: no-repeat; background-position: center; background-size: 2.2rem; background-image: url(https://img.lifet.co.kr/icon/back.svg); }
    #container.event_templete {overflow: hidden; max-width: 520px; margin: 0 auto 0;  padding: 166px 0 0;}
    #container.event_templete.ul_none {padding-top: 93px;}
    header.app_top ~ #container.event_templete {padding-top: 206px;}
    header.app_top ~ #container.event_templete.ul_none {padding-top: 134px;}
    .app_top ~ #container .mobile__head {top: 9.5rem;}
    #mobileShare {z-index: 10; position: absolute;}
    .go_menu { top: 94px; cursor: grab;}
    .app_top ~ .event_templete .go_menu {overflow: hidden; top: 134px;}
    .go_menu.dragging {cursor: grabbing;  }
    .menu_wrap {overflow: hidden; height: 5.2rem;}
}