/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-34657
* CODE : Dev - EV00018371 , Prod - EV00005901
* FILE : /kr/event/2023/06/22_healing_trip/eventMainHealingTrip.jsp
* DESC : 사이판 힐링트립 이벤트
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2023/06/02				정규진				Created
************************************************************************************
**/

/* 이벤트 기본 설정 */
.mdevice {
	--width: 720;
}
.evt-func {
	position: relative;
}

/* video */
.evt-video-area {
    width: calc(607 / 1380 * 100%);
    padding-top: calc(343 / 1380 * 100%);
	position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
	overflow: hidden;
}
.video-1 {
	margin-bottom: calc(666 / 1380 * 100%);
}
.video-2 {
	margin-bottom: calc(422 / 1380 * 100%);
}
.video-play {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
    width: 100%;
	height: 100%;
}
.video-play img {
    width: 100%;
	height: 100%;
}
.video-play video {
    width: 100%;
	height: 100%;
}
.video-play.fadeOut {
	z-index: -1;
}

/* 탭버튼 */
.tabs-wrap {
    width: 100%;
	top: 0;
    left: 0;
}
.tabs-wrap .img-responsive{
    width: calc(856 / 1380 * 100%);
    margin: 0 auto;
}
.tabs-wrap .tabs {
    width: calc(857 / 1380 * 100%);
    padding: 0;
    margin: 0;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
	flex-wrap: wrap;
    overflow: hidden;
}
.tabs-wrap .tabs li {
    margin: 0;
    padding: 0;
}
.tabs-wrap .tabs li a {
    width: 100%;
	background-repeat:no-repeat;
	background-position:center top;
    background-size: 100% auto;
}
.tabs-wrap .tabs li.m1 {
    width: calc(302 / 855 * 100%);
}
.tabs-wrap .tabs li.m2 {
    width: calc(240 / 855 * 100%);
}
.tabs-wrap .tabs li.m3 {
    width: calc(313 / 855 * 100%);
}
.tabs-wrap .tabs li.m1 a {
    padding-top: calc(152 / 302 * 100%);
}
.tabs-wrap .tabs li.m2 a {
    padding-top: calc(152 / 240 * 100%);
}
.tabs-wrap .tabs li.m3 a {
    padding-top: calc(152 / 313 * 100%);
}
.tabs-wrap .tabs li.m1.on a {
    background-image: url(/kr/event/2023/06/22_healing_trip/images/menu_1_on.jpg);
}
.tabs-wrap .tabs li.m2.on a {
    background-image: url(/kr/event/2023/06/22_healing_trip/images/menu_2_on.jpg);
}
.tabs-wrap .tabs li.m3.on a {
    background-image: url(/kr/event/2023/06/22_healing_trip/images/menu_3_on.jpg);
}

/* tab evt-1 */
.event-1 .evt-down-area {
	width: 100%;
    margin-bottom: calc(84 / 1380 * 100%);
    position: absolute;
    bottom: 0;
}
.event-1 .evt-down-area a {
	width: calc(468 / 1380 * 100%);
	padding-top: calc(69 / 1380 * 100%);
	margin: 0 auto;
	display: block;
}
.event-1 .evt-hash-area {
    width: 100%;
    padding-top: calc(219 / 1380 * 100%);
    margin-bottom: calc(75 / 1380 * 100%);
    position: absolute;
    bottom: 0;
}
.event-1 .evt-hash-area button {
	width: calc(436 / 1380 * 100%);
	height: 100%;
	margin: 0 auto;
}
.event-1 .evt-sns-area {
	width: 100%;
    padding-top: calc(101 / 1380 * 100%);
    margin-bottom: calc(70 / 1380 * 100%);
    position: absolute;
    bottom: 0;
}
.event-1 .evt-sns-area > div {
    width: calc(566 / 1380 * 100%);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    position: static;
}
.event-1 .evt-sns-area a {
	width: calc(101 / 566 * 100%);
    padding-top: calc(101 / 566 * 100%);
}
.event-1 .evt-join-group-B {
	width: 100%;
    padding-top: calc(81 / 1380 * 100%);
    margin-bottom: calc(464 / 1380 * 100%);
    position: absolute;
    bottom: 0;
}
.event-1 .evt-join-group-B a {
	width: calc(568 / 1380 * 100%);
	height: 100%;
	margin: 0 auto;
}

/* tab evt-2 */
.event-2 .link-A {
    width: 100%;
    padding-top: calc(67 / 1380 * 100%);
    position: absolute;
    bottom: 0;
}
.event-2 .link-A a {
    width: calc(363 / 1380 * 100%);
    height: 100%;
    margin: 0 auto;
}
.event-2 .link-flex-area {
    width: calc(534 / 1380 * 100%);
    margin-bottom: calc(182 / 1380 * 100%);
    display: flex;
    justify-content: space-between;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
}
.event-2 .link-flex-area .evt-btn-area {
    width: calc(159 / 534 * 100%);
    padding-top: calc(140 / 534 * 100%);
    position: relative;
}
.event-2 .link-flex-area .evt-btn-area > div {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.event-2 .link-flex-area .evt-btn-area a {
	width: 100%;
}

/* tab evt-3 */
.event-3 .kakao-share {
    width: 100%;
    padding-top: calc(90 / 1380 * 100%);
	margin-bottom: calc(73 / 1380 * 100%);
	bottom: 0;
}
.event-3 .kakao-share a {
    width: calc(440 / 1380 * 100%);
    height: 100%;
    margin: 0 auto;
}
.event-3 .evt-join-group-C {
    width: 100%;
    padding-top: calc(82 / 1380 * 100%);
	margin-bottom: calc(860 / 1380 * 100%);
	bottom: 0;
}
.event-3 .evt-join-group-C a {
    width: calc(570 / 1380 * 100%);
    height: 100%;
    margin: 0 auto;
}


/* 모바일 */
/* video */
.mdevice .video-1 {
	margin-bottom: calc(669 / var(--width) * 100%);
}
.mdevice .video-2 {
	margin-bottom: calc(399 / var(--width) * 100%);
}
.mdevice .evt-video-area {
	width: calc(607 / var(--width) * 100%);
	padding-top: calc(343 / var(--width) * 100%);
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
}

/* 탭버튼 */
.mdevice .tabs-wrap .img-responsive{
    width: 100%;
}
.mdevice .tabs-wrap .tabs{
    width: 100%;
}
.mdevice .tabs-wrap .tabs li.m1 {
    width: calc(241 / var(--width) * 100%);
}
.mdevice .tabs-wrap .tabs li.m2 {
    width: calc(239 / var(--width) * 100%);
}
.mdevice .tabs-wrap .tabs li.m3 {
    width: calc(240 / var(--width) * 100%);
}
.mdevice .tabs-wrap .tabs li.m1 a {
    padding-top: calc(153 / 241 * 100%);
}
.mdevice .tabs-wrap .tabs li.m2 a {
    padding-top: calc(153 / 239 * 100%);
}
.mdevice .tabs-wrap .tabs li.m3 a {
    padding-top: calc(153 / 240 * 100%);
}
.mdevice .tabs-wrap .tabs li.m1.on a {
    background-image: url(/kr/event/2023/06/22_healing_trip/images/m_menu_1_on.jpg);
}
.mdevice .tabs-wrap .tabs li.m2.on a {
    background-image: url(/kr/event/2023/06/22_healing_trip/images/m_menu_2_on.jpg);
}
.mdevice .tabs-wrap .tabs li.m3.on a {
    background-image: url(/kr/event/2023/06/22_healing_trip/images/m_menu_3_on.jpg);
}

/* tab evt-1 */
.mdevice .event-1 .evt-down-area {
    margin-bottom: calc(56 / var(--width) * 100%);
}
.mdevice .event-1 .evt-down-area a {
	width: calc(396 / var(--width) * 100%);
    padding-top: calc(69 / var(--width) * 100%);
}
.mdevice .event-1 .evt-hash-area {
    padding-top: calc(219 / var(--width) * 100%);
    margin-bottom: calc(75 / var(--width) * 100%);
}
.mdevice .event-1 .evt-hash-area button {
	width: calc(436 / var(--width) * 100%);
}
.mdevice .event-1 .evt-sns-area {
    padding-top: calc(100 / var(--width) * 100%);
    margin-bottom: calc(70 / var(--width) * 100%);
}
.mdevice .event-1 .evt-sns-area > div {
    width: calc(566 / var(--width) * 100%);
}
.mdevice .event-1 .evt-sns-area a {
	width: calc(101 / 566 * 100%);
    padding-top: calc(101 / 566 * 100%);
}
.mdevice .event-1 .evt-join-group-B {
    padding-top: calc(81 / var(--width) * 100%);
    margin-bottom: calc(463 / var(--width) * 100%);
}
.mdevice .event-1 .evt-join-group-B a {
	width: calc(568 / var(--width) * 100%);
}

/* tab evt-2 */
.mdevice .event-2 .link-A {
    padding-top: calc(67 / var(--width) * 100%);
}
.mdevice .event-2 .link-A a {
    width: calc(363 / var(--width) * 100%);
}
.mdevice .event-2 .link-flex-area {
    width: calc(534 / var(--width) * 100%);
    margin-bottom: calc(173 / var(--width) * 100%);
    transform: translateX(-50%);
}
.mdevice .event-2 .link-flex-area .evt-btn-area {
    width: calc(159 / 534 * 100%);
    padding-top: calc(140 / 534 * 100%);
}
.mdevice .event-2 .link-flex-area .evt-btn-area a {
	width: 100%;
}

/* tab evt-3 */
.mdevice .event-3 .kakao-share {
    padding-top: calc(90 / var(--width) * 100%);
	margin-bottom: calc(73 / var(--width) * 100%);
}
.mdevice .event-3 .kakao-share a {
    width: calc(440 / var(--width) * 100%);
}
.mdevice .event-3 .evt-join-group-C {
    padding-top: calc(82 / var(--width) * 100%);
	margin-bottom: calc(851 / var(--width) * 100%);
}
.mdevice .event-3 .evt-join-group-C a {
    width: calc(570 / var(--width) * 100%);
}