/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-42416
* CODE : Dev - EV00018501 , Prod - EV00006281
* FILE : /kr/event/2023//kr/event/2023/10/02_kimchi_refrigerator_new/images/css/event.css
* DESC : 김치냉장고 9월 신모델 닷컴 이벤트
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2023/08/09				정규진				Created
* 2023/08/21				정규진				참여팝업(이벤트1)
* 2023/08/23				정규진				참여팝업(이벤트2,3,참여조회)
* 2023/09/22				정규진				바닥페이지
************************************************************************************
**/

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

/* 참여팝업 */
#agreeReview1_f table tbody tr td,
#agreeShare1_f table tbody tr td {
	font-weight: bold;
}
#agree1_f table tbody tr td:nth-child(3),
#agreeReview1_f table tbody tr:first-child td:nth-child(3),
#agreeShare1_f table tbody tr td:nth-child(3) {
	font-size:20px;
  	line-height:30px;
	text-decoration: underline;
}
.form-wrap .forms .box .cell.middle {
    white-space: nowrap;
    vertical-align: middle;
}
.form-wrap .forms .evt-acco-area {
    width: 100%;
}
.form-wrap .forms .evt-acco-head.evt-btn-area {
	position: unset;
}
.form-wrap .forms .evt-acco-head.evt-btn-area > div {
    position: unset;
	align-items: baseline;
    justify-content: left;
}
.form-wrap .forms .evt-btn-area button {
    width: 100%;
	
}

/* 탭 영역 */
.tabs-wrap .tabs {
    display: flex;
    margin: 0;
    padding: 0;
}

.tabs-wrap .tabs > li {
    flex-grow: 1;
    margin: 0;
    padding: 0;
}
.tabs-wrap .tabs li.m2{
	margin: 0 -1px;
}
.tabs-wrap .tabs li a {
    display: block;
    height: 0;
    background-size: 100% !important;
	background-repeat: no-repeat;
	background-position: center center;
    padding-top: calc(360 / 1380 * 100%);
}
.tabs-wrap .tabs li.m1 a {
    background: url(/kr/event/2023/10/02_kimchi_refrigerator_new/images/tab_01.png) no-repeat center center #959595;
}

.tabs-wrap .tabs li.m2 a {
    background: url(/kr/event/2023/10/02_kimchi_refrigerator_new/images/tab_02.png) no-repeat center center #959595;
}

.tabs-wrap .tabs li.m3 a {
    background: url(/kr/event/2023/10/02_kimchi_refrigerator_new/images/tab_03.png) no-repeat center center #959595;
}

.tabs-wrap .tabs li.m1.on a {
    background: url(/kr/event/2023/10/02_kimchi_refrigerator_new/images/tab_01.png) no-repeat center center #45131c;
}

.tabs-wrap .tabs li.m2.on a {
    background: url(/kr/event/2023/10/02_kimchi_refrigerator_new/images/tab_02.png) no-repeat center center #45131c;
}

.tabs-wrap .tabs li.m3.on a {
    background: url(/kr/event/2023/10/02_kimchi_refrigerator_new/images/tab_03.png) no-repeat center center #45131c;
}

/* event1 */
/* 퀴즈 */
.quiz-input-area {
    width: calc(900 / 1380 * 100%);
    position: absolute;
    bottom: 0;
    margin-bottom: calc(222 / 1380 * 100%);
    left: 50%;
    transform: translateX(-50%);
}
.quiz-input-area .btn-quiz-hint {
    width: calc(91 / 900 * 100%);
    height: 0;
    display: block;
    padding-top: calc(29 / 900 * 100%);
    margin-left: 0;
    margin-bottom: calc(78 / 900 * 100%);
    position: absolute;
    left: 0;
    bottom: 0;
}
.quiz-input-area .input-wrap input {
    width: 100%;
    height: 62px;
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 18px;
}
.evt-btn-area.evt-join-group-A {
    width: calc(900 / 1380 * 100%);
    position: absolute;
    padding-top: calc(80 / 1380 * 100%);
    bottom: 0;
    margin-bottom: calc(101 / 1380 * 100%);
    left: 50%;
    transform: translateX(-50%);
}
.evt-btn-area.evt-join-group-A > div {
    justify-content: space-between;
}
.evt-btn-area.evt-join-group-A > div a {
    width: calc(431 / 900 * 100%);
}

/* 즉석당첨 레이어팝업 */
.instant-draw-pop {
	max-width: 540px;
}
.instant-draw-pop .btn-pop-close {
	bottom: 59px;
    width: 215px;
    height: 72px;
}
.instant-draw-pop .evt-product-text {
	position:absolute;
	top: 236px;
    left: 43px;
    width: 455px;
    height: 85px;
	text-align:center;
	font-weight: bold;
    font-size: 24px;
    background-color: transparent;
}
.instant-draw-pop .evt-product-serial {
	position: absolute;
	bottom: 10px;
	left: 0;
	width: 100%;
	padding: 0 20px;
	font-size: 12px;
	text-align: center;
    background-color: transparent;
    color: #666;
}
.instant-draw-pop .evt-product-text:focus, .instant-draw-pop .evt-product-serial:focus {
	outline:none;
}
.instant-draw-pop.b-pop .btn-pop-close {
	bottom: 93px;
}
/* 다목적 팝업 닫기 */
#upModePop.instant-draw-pop .btn-pop-close,
#downModePop.instant-draw-pop .btn-pop-close {
    width: 34px;
    height: 34px;
    top: 25px;
    left: inherit;
    right: 24px;
    transform: translateX(0);
}
/* 행사모델 팝업 닫기 */
#modelPop.instant-draw-pop .btn-pop-close {
    width: 34px;
    height: 34px;
    top: 33px;
    left: inherit;
    right: 60px;
    transform: translateX(0);
}

/* 다목적 팝업 버튼 */
.btn-up-mode {
    position: absolute;
    width: calc(102 / 1380 * 100%);
    height: calc(78 / 1380 * 100%);
    top: 0;
    margin-top: calc(279 / 1380 * 100%);
    left: 50%;
    transform: translateX(-132%);
}
.btn-down-mode {
    position: absolute;
    width: calc(130 / 1380 * 100%);
    height: calc(78 / 1380 * 100%);
    top: 0;
    margin-top: calc(459 / 1380 * 100%);
    left: 50%;
    transform: translateX(-3%);
}

/* 아코디언 */
.evt-acco-head.evt-btn-area {
    height: 100%;
}
.evt-acco-head.evt-btn-area button{
    width: 100%;
}

/* event2 */
/* 행사 모델 전체보기 */
.btn-model {
    position: absolute;
    width: calc(180 / 1380 * 100%);
    height: calc(127 / 1380 * 100%);
    bottom: 0;
    margin-bottom: calc(75 / 1380 * 100%);
    left: 50%;
    transform: translateX(-50%);
}

.evt-btn-area.evt-join-group-B {
    width: calc(563 / 1380 * 100%);
    padding-top: calc(193 / 1380 * 100%);
    margin-bottom: calc(118 / 1380 * 100%);
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
}
.evt-btn-area.evt-join-group-B > div {
    flex-direction: column;
    justify-content: space-between;
}
.evt-btn-area.evt-join-group-B > div a {
    width: 100%;
    height: calc(243 / 563 * 100%);
}

/* event3 */
.evt-youtube-box {
    width: calc(900 / 1380 * 100%);
    padding-top: calc(689 / 1380 * 100%);
    margin-top: calc(160 / 1380 * 100%);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
.evt-youtube-box ul {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: absolute;
    top: 0;
}
.evt-youtube-box ul li {
    position: relative;
    width: calc(430 / 900 * 100%);
    padding-top: calc(315 / 900 * 100%);
    height: 0;
    overflow: hidden;
}
.evt-youtube-box ul li:nth-child(3), .evt-youtube-box ul li:nth-child(4) {
    margin-top: calc(57 / 900 * 100%);
}
.evt-youtube-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin-top: 0;
    height: 0;
    padding-top: calc(250 / 430 * 100%);
    overflow: hidden;
}
.evt-youtube-area .btn-youtube-play {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
}
.evt-youtube-area .btn-youtube-play img {
	height: 100%;
}
.evt-youtube-area .btn-youtube-play.fadeOut {
	z-index: -1;
}
.evt-youtube-area .evt-youtube-player {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.evt-youtube-box li .share-link {
    width: calc(417 / 430 * 100%);
    height: calc(69 / 430*100%);
    display: flex;
    justify-content: space-between;
    position: absolute;
    left: 1.4%;
    bottom: 0;
}
.evt-youtube-box li .share-link a {
    width: calc(201 / 417 * 100%);
    height: 100%;
    cursor: pointer;
}

.evt-hash-area {
    width: calc(200 / 1380 * 100%);
    padding-top: calc(38 / 1380 * 100%);
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-top: calc(282 / 1380 * 100%);
}
.evt-hash-area button {
    width: 100%;
}
/* SNS */
.evt-sns-area {
    width: 100%;
    height: 0;
    padding-top: calc(85 / 1380 * 100%);
    margin-top: calc(125 / 1380 * 100%);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
.evt-sns-area a {
    width: calc(85 / 1380 * 100%);
    display: block;
    height: 100%;
    position: absolute;
}
.evt-sns-area a:first-of-type {
    left: 50%;
    transform: translateX(-468%);
}
.evt-sns-area a:nth-of-type(2) {
    left: 50%;
    transform: translateX(-344%);
}
.evt-sns-area a:nth-of-type(3) {
    left: 50%;
    transform: translateX(-219%);
}
.evt-sns-area a:nth-of-type(4) {
    left: 50%;
    transform: translateX(215%);
}
.evt-btn-area.evt-join-group-C {
    width: 100%;
    padding-top: calc(80 / 1380 * 100%);
    margin-bottom: calc(120 / 1380 * 100%);
    bottom: 0;
}
.evt-btn-area.evt-join-group-C > div a {
    width: calc(563 / 1380 * 100%);
    height: 100%;
    margin: 0 auto;
}

/* 모바일 */
.mdevice .tabs-wrap .tabs li a {
    padding-top: calc(360 / var(--width) * 100%);
}

.mdevice .tabs-wrap .tabs li.m1 a {
    background: url(/kr/event/2023/10/02_kimchi_refrigerator_new/images/m_tab_01.png) no-repeat center center #959595;
}

.mdevice .tabs-wrap .tabs li.m2 a {
    background: url(/kr/event/2023/10/02_kimchi_refrigerator_new/images/m_tab_02.png) no-repeat center center #959595;
}

.mdevice .tabs-wrap .tabs li.m3 a {
    background: url(/kr/event/2023/10/02_kimchi_refrigerator_new/images/m_tab_03.png) no-repeat center center #959595;
}

.mdevice .tabs-wrap .tabs li.m1.on a {
    background: url(/kr/event/2023/10/02_kimchi_refrigerator_new/images/m_tab_01.png) no-repeat center center #45131c;
}

.mdevice .tabs-wrap .tabs li.m2.on a {
    background: url(/kr/event/2023/10/02_kimchi_refrigerator_new/images/m_tab_02.png) no-repeat center center #45131c;
}

.mdevice .tabs-wrap .tabs li.m3.on a {
    background: url(/kr/event/2023/10/02_kimchi_refrigerator_new/images/m_tab_03.png) no-repeat center center #45131c;
}

/* event1 */
.mdevice .quiz-input-area {
    width: calc(560 / var(--width) * 100%);
    margin-bottom: calc(323 / var(--width) * 100%);
}
.mdevice .quiz-input-area .btn-quiz-hint {
    width: calc(122 / var(--width) * 100%);
    padding-top: calc(41 / var(--width) * 100%);
    margin-bottom: calc(135 / var(--width) * 100%);
}
.mdevice .quiz-input-area .input-wrap input {
    height: 46px;
    font-size: 14px;
}
.mdevice .evt-btn-area.evt-join-group-A {
    width: calc(560 / var(--width) * 100%);
    padding-top: calc(206 / var(--width) * 100%);
    margin-bottom: calc(79 / var(--width) * 100%);
}
.mdevice .evt-btn-area.evt-join-group-A > div {
    flex-direction: column;
    justify-content: space-between;
}
.mdevice .evt-btn-area.evt-join-group-A > div a {
    width: 100%;
    height: calc(240 / 560 * 100%);
}
/* 다목적 팝업 버튼 */
.mdevice .btn-up-mode {
    position: absolute;
    width: calc(102 / var(--width) * 100%);
    height: calc(41 / var(--width) * 100%);
    margin-top: calc(279 / var(--width) * 100%);
}
.mdevice .btn-down-mode {
    position: absolute;
    width: calc(130 / var(--width) * 100%);
    height: calc(41 / var(--width) * 100%);
    margin-top: calc(459 / var(--width) * 100%);
}

.mdevice .instant-draw-pop {
	max-width: 90%;
}
.mdevice .instant-draw-pop .evt-product-text {
	top: calc(314 / var(--width) * 100%);
    left: calc(57 / var(--width) * 100%);
    width: calc(608 / var(--width) * 100%);
    height: calc(114 / var(--width) * 100%);
	font-size: 4.6vw;
}
.mdevice .instant-draw-pop .evt-product-serial {
	bottom: calc(25 / var(--width) * 100%);
	padding: 0 calc(15 / var(--width) * 100%);
}
.mdevice .instant-draw-pop .btn-pop-close {
	bottom: calc(80 / var(--width) * 100%);
	width: calc(312 / var(--width) * 100%);
	height: calc(93 / var(--width) * 100%);
}
.mdevice .instant-draw-pop.b-pop .btn-pop-close {
	bottom: calc(151 / var(--width) * 100%);
}

/* event2 */
.mdevice .btn-model {
    width: calc(180 / var(--width) * 100%);
    height: calc(88 / var(--width) * 100%);
    margin-bottom: calc(75 / var(--width) * 100%);
}
.mdevice .evt-btn-area.evt-join-group-B {
    width: calc(563 / var(--width) * 100%);
    padding-top: calc(207 / var(--width) * 100%);
    margin-bottom: calc(101 / var(--width) * 100%);
}

/* event3 */
.mdevice .evt-youtube-area {
    padding-top: calc(259 / 430 * 100%);
}
.mdevice .evt-youtube-box {
    width: calc(560 / var(--width) * 100%);
    padding-top: calc(1882 / var(--width) * 100%);
    margin-top: calc(160 / var(--width) * 100%);
}
.mdevice .evt-youtube-box ul {
    flex-direction: column;
}
.mdevice .evt-youtube-box ul li {
    width: 100%;
    padding-top: calc(427 / 560 * 100%);
}
.mdevice .evt-youtube-box ul li:nth-child(3), .mdevice .evt-youtube-box ul li:nth-child(4) {
    margin-top: 0;
}
.mdevice .evt-youtube-box li .share-link {
    width: calc(525 / 560 * 100%);
    height: calc(88 / 560 *100%);
    left: 50%;
    transform: translateX(-50%);
}
.mdevice .evt-youtube-box li .share-link a {
    width: calc(272 / 560 * 100%);
}
.mdevice .evt-hash-area {
    width: calc(199 / var(--width) * 100%);
    height: calc(72 / var(--width) * 100%);
    margin-bottom: calc(74 / var(--width) * 100%);
    top: inherit;
    bottom: 0;
}
.mdevice .evt-sns-area {
    padding-top: calc(85 / var(--width) * 100%);
    margin-top: calc(167 / var(--width) * 100%);
}
.mdevice .evt-sns-area a {
    width: calc(85 / var(--width) * 100%);
}
.mdevice .evt-sns-area a:first-of-type {
    transform: translateX(-329%);
}
.mdevice .evt-sns-area a:nth-of-type(2) {
    transform: translateX(-205%);
}
.mdevice .evt-sns-area a:nth-of-type(3) {
    transform: translateX(-81%);
}
.mdevice .evt-sns-area a:nth-of-type(4) {
    transform: translateX(163%);
}
.mdevice .evt-btn-area.evt-join-group-C {
    padding-top: calc(89 / var(--width) * 100%);
    margin-bottom: calc(100 / var(--width) * 100%);
}
.mdevice .evt-btn-area.evt-join-group-C > div a {
    width: calc(563 / var(--width) * 100%);
}




@media (max-width: 768px) {
    #agree1_f table tbody tr td:nth-child(3), 
	#agreeReview1_f table tbody tr:first-child td:nth-child(3), 
	#agreeShare1_f table tbody tr td:nth-child(3) {
        font-size:16px;
        line-height:24px;
    }
    #upModePop.instant-draw-pop .btn-pop-close,
    #downModePop.instant-draw-pop .btn-pop-close {
        width: 27px;
        height: 27px;
        top: 17px;
        left: inherit;
        right: 16px;
        transform: translateX(0);
    }
    /* 행사모델 팝업 닫기 */
    #modelPop.instant-draw-pop .btn-pop-close {
        width: 27px;
        height: 27px;
        top: 22px;
        left: inherit;
        right: 32px;
        transform: translateX(0);
    }
}