/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-56249
* CODE : Dev - EV00019191 , Prod - EV00007091
* FILE : /kr/event/2024/03/08_app_agree/css/event.css
* DESC : 3월 앱 활성화 이벤트
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2024/03/05				정규진				Created
* 2024/03/27				정규진				바닥페이지
************************************************************************************
**/

/* 이벤트 기본 설정 */
* {
    --width: 1380;
}

.event-header {
   /* margin-bottom: -1.5px;*/
}

.evt-func {
    position: relative;
}

/* 키비주얼 영상 */
.visual-video-wrap {
    width: calc(1380 / var(--width) * 100%);
}

.visual-video-wrap video {
    width: 100%;
}

/* 앱 다운로드 버튼 */
.evt-btn-area.btnlinkOut {
    width: calc(325 / var(--width)* 100%);
    padding-top: calc(38 / var(--width)* 100%);
    margin-bottom: calc(90 / var(--width)* 100%);
    bottom: 0;
    left: 50%;
    transform: translateX(-132%);
}

.evt-btn-area.btnlinkOut div {
    width: 100%;
    height: 100%;
    justify-content: space-between;
}

.evt-btn-area.btnlinkOut a {
    width: calc(158 / 325 * 100%);
    height: 100%;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% auto;
}

.evt-btn-area.btnlinkOut a.linkA {
    background-image: url(/kr/event/2024/03/08_app_agree/images/btn_linkA.png);
}

.evt-btn-area.btnlinkOut a.linkB {
    background-image: url(/kr/event/2024/03/08_app_agree/images/btn_linkB.png);
}
.tab-container {
    padding-top: calc(96 / var(--width)* 100%);
    background-image: url(/kr/event/2024/03/08_app_agree/images/blank.jpg);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% auto;
    background-color: #e4f9f3;
}
.tabs-wrap {
    position: sticky;
    top: 40px;
    z-index: 10;
    margin-top: calc(-50 / var(--width) * 100%);
}

.tabs-wrap .tabs {
    display: flex;
    width: calc(330 / var(--width)* 100%);
    margin: 0 auto;
    padding: 0;
    border-radius: 50px;
    box-shadow: 0 0px 10px 4px rgb(34 35 35 / 10%);
    background-color: #fff;
}

.tabs-wrap .tabs>li {
    flex: 1;
    margin: 0;
  	padding: 0;
    border-radius: 50px;
}
.tabs-wrap .tabs>li.on {
    background-color: #009379;
}

.tabs-wrap .tabs li a {
    overflow: hidden;
    display: block;
  	padding: 15px 0;
    color: #000;
    font-family:'Pretendard';
    font-weight:500;
    text-align: center;
    font-size: 18px;
    line-height: 1;
}

.tabs-wrap .tabs li.on a {
    color: #fff;
}

.evt-app-coupon{
    position: absolute;
    top: calc(370 / var(--width) * 100%);
    left: 50%;
    width: calc(540 / var(--width) * 100%);
    height: calc(686 / var(--width) * 100%);
    transform: translateX(-50%);
}
.evt-app-coupon > div{
    display: flex;
    width: 100%;
    height: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
}
.evt-app-coupon a{
    width: calc(635 / var(--width) * 100%);
    height: calc(420 / var(--width) * 100%);
    margin-top: calc(50 / var(--width) * 100%);
}
.evt-app-coupon a:nth-child(1), .evt-app-coupon a:nth-child(2){
    margin-top:0;
}
#couponBtnAll{
    position: absolute;
    bottom: calc(155 / var(--width) * 100%);
    left: 50%;
    width: calc(540 / var(--width) * 100%);
    height: calc(110 / var(--width) * 100%);
    transform: translateX(-50%);
}

.evt-acco-head.evt-btn-area {
    top: 0;
    padding-top: calc(80 / var(--width) * 100%);
}
.evt-acco-head.evt-btn-area button{
	width: 100%;
}                          
                          
.evt-intro {
    position: absolute;
    top: 0;
    left: 50%;
    width: calc(430 / var(--width) * 100%);
    padding-top: calc(310 / var(--width) * 100%);
    transform: translateX(-50%);
    z-index: 5;
}

.random-choice.change .evt-intro {
    top: calc(385 / var(--width) * 100%);
    padding-top: 0;
}

.evt-intro .intro {
    position: relative;
}

.evt-intro .start {
    display: none;
}

.random-choice.change .evt-intro .intro {
    display: none;
}

.random-choice.change .evt-intro .start {
    display: block;
}

.evt-intro .intro a {
    position: absolute;
    bottom: 19%;
    left: 12%;
    width: 77%;
    height: 23%;
}

.game-visual {
    position: absolute;
    top: calc(305 / var(--width) * 100%);
    left: 50%;
    width: calc(540 / var(--width) * 100%);
    transform: translateX(-50%);
}
.game-visual img {
    max-width: 80%;
    margin: 0 auto;
}
.game-visual .start-btn {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(95 / var(--width) * 100%);
    padding: 0 calc(50 / var(--width) * 100%);
}

.game-visual .start-btn>a {
    flex: 1;
    margin: 0 calc(30 / var(--width) * 100%);
}
.game-visual img{
    max-width: 80% !important;
    margin: 0 auto;
}
.evt-btn-area.random-join {
    bottom: 0;
    padding-top: calc(72 / var(--width) * 100%);
    margin-bottom: calc(115 / var(--width) * 100%);
}

.evt-btn-area.random-join a {
    width: calc(260 / var(--width) * 100%);
}


/* 쿠폰 영상 */
.coupon-video-wrap {
    width: calc(500 / var(--width) * 100%);
    padding-top: calc(288 / var(--width) * 100%);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
}

.coupon-video-wrap video {
    width: 100%;
}

/* 참여팝업 */
.evt-btn-area.evt-join-btn {
    width: calc(512 / var(--width) * 100%);
    padding-top: calc(72 / var(--width) * 100%);
    margin-bottom: calc(170 / var(--width) * 100%);
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.evt-btn-area.evt-join-btn div {
    width: 100%;
    height: 100%;
}

.evt-btn-area.evt-join-btn a {
    width: 100%;
    height: 100%;
}

.evt-btn-area.evt-confirm-btn {
    bottom: 0;
    margin-bottom: calc(195 / var(--width) * 100%);
}

/* 참여팝업 */
#agreeJoin1_f table tbody tr td:last-child {
    font-size: 20px;
    line-height: 30px;
    text-decoration: underline;
}

@media screen and (max-width: 1460px) {
    .tabs-wrap .tabs li a {
      	padding: 1.08vw 0;
        font-size: 1.1vw;
    }
}
@media screen and (max-width: 767px) {
    * {
        --width: 720;
    }

    /* 키비주얼 영상 */
    .visual-video-wrap {
        width: calc(720 / var(--width) * 100%);
    }

    /* 앱 다운로드 버튼 */
    .evt-btn-area.btnlinkOut {
        width: calc(540 / var(--width) * 100%);
        padding-top: calc(80 / var(--width) * 100%);
        margin-bottom: calc(785 / var(--width) * 100%);
        transform: translateX(-50%);
    }

    .evt-btn-area.btnlinkOut div {
        width: 100%;
        height: 100%;
    }

    .evt-btn-area.btnlinkOut a {
        width: calc(346 / var(--width) * 100%);
        height: 100%;
    }

    .evt-btn-area.btnlinkOut a.linkA {
        background-image: url(/kr/event/2024/03/08_app_agree/images/m_btn_linkA.png);
    }

    .evt-btn-area.btnlinkOut a.linkB {
        background-image: url(/kr/event/2024/03/08_app_agree/images/m_btn_linkB.png);
    }
    .tab-container {
        padding-top: 0;
        background-image: none;
        background-color: #8bfed4;
    }
    .tabs-wrap {
        top: 60px;
        margin-top: 0;
    }
    .header.helloBar~.mobile-nav-wrap~#content .event-container .tabs-wrap {
        top: 105px;
    }
    .tabs-wrap .tabs{
        width: calc(480 / var(--width)* 100%);
        margin-top:0;
    }
    .tabs-wrap .tabs li a {
      	padding: 3.2vw 0;
        font-size: 3.8vw;
    }

	.evt-app-coupon{
        top: calc(277 / var(--width) * 100%);
        width: calc(520 / var(--width) * 100%);
        height: calc(280 / var(--width) * 100%);
    }
    .evt-app-coupon a{
        width: calc(345 / var(--width) * 100%);
        height: calc(218 / var(--width) * 100%);
        margin-top: calc(20 / var(--width) * 100%);
    }
    #couponBtnAll{
        bottom: calc(65 / var(--width) * 100%);
        width: calc(520 / var(--width) * 100%);
        height: calc(62 / var(--width) * 100%);
    }
    
	.evt-acco-head.evt-btn-area {
        padding-top: calc(125 / var(--width) * 100%);
    }

    .evt-intro {
        padding-top: 62.5vw;
        width: calc(600 / var(--width)* 100%);
    }

    .random-choice.change .evt-intro {
        top: 62.5vw;
    }

    .evt-intro .intro a {
        bottom: 19%;
        left: 12%;
        width: 77%;
        height: 23%;
    }

    .game-visual {
        top: 50vw;
        width: calc(600 / var(--width) * 100%);
    }

    .game-visual .start-btn {
        height: 11.6vw;
        padding: 0 5.6vw;
    }

    .game-visual .start-btn>a {
        margin: 0 3vw;
    }
    .game-visual img{
        max-width: 100% !important;
    }
    .evt-btn-area.random-join {
        padding-top: calc(75 / var(--width)* 100%);
        margin-bottom: calc(242 / var(--width)* 100%);
    }

    .evt-btn-area.random-join a {
        width: calc(260 / var(--width) * 100%);
    }
    
    /* 쿠폰 영상 */
    .coupon-video-wrap {
        width: calc(514 / var(--width) * 100%);
        padding-top: calc(373 / var(--width) * 100%);
    }

    /* 참여팝업 */
    .evt-btn-area.evt-join-btn {
        width: calc(560 / var(--width) * 100%);
        padding-top: calc(102 / var(--width) * 100%);
        margin-bottom: calc(305 / var(--width) * 100%);
    }

    .evt-btn-area.evt-confirm-btn {
        bottom: 0;
        margin-bottom: calc(170 / var(--width) * 100%);
    }

	#prdCheckPop{
        left: 50% !important;
        top: 50% !important;
        height: auto;
        min-height: auto !important;
        transform: translate(-50%, -50%) !important;
        max-width: none;
        width: 75vw;
    }
    #prdCheckPop .pop-conts{
        padding: 0;
    }
    #prdCheckPop .btn-pop-close{
        position: absolute;
        top: 1vw;
        right: 1vw;
        width: 10vw;
        height: 10vw;
        font-size:0;
    }

    /* 참여팝업 */
    #agreeJoin1_f table tbody tr td:last-child {
        font-size: 16px;
        line-height: 24px;
    }
}