/** ************************************************************************************ * CSR : http://clm.lge.com/issue/browse/BTOCSITE-72657 * CODE : Dev - EV00019851 , Prod - EV00007672 * FILE : /kr/event/2024/08/26_tromm_dryer/eventMainTrommDryer.jsp * DESC : LG트롬 건조기 1000명 구독 체험단 * PROJ : lge.co.kr 5.0 ************************************************************************************ * Modification History ************************************************************************************ * DATE AUTHOR DESCRIPTION ************************************************************************************ * 2024/08/07 김미선 Created * 2024/09/02 김미선 외부퍼블작업 * 2024/10/07 김미선 바닥페이지 탭2 * 2024/12/13 김미선 바닥페이지 일정변경 ************************************************************************************ **/ /* 이벤트 기본 설정 */ * { --width: 1380; } .evt-func { position: relative; } .notice_txt { position: absolute; left: 50%; bottom: calc(130 / var(--width)* 100%); transform: translateX(-50%); width: calc(935 / var(--width)* 100%); font-family: 'Noto Sans', sans-serif; color: #333; font-size: 14px; line-height: 19px; text-align: left; } .day_txt { position: absolute; font-size: 24px; color: #262521; background-color:#fff; } .day_txt.txt_01 { top: calc(1200 / var(--width)* 100%); left: calc(600 / var(--width)* 100%); } .day_txt.txt_02 { top: calc(1160 / var(--width)* 100%); left: calc(891 / var(--width)* 100%) } .day_noti_txt { width: 100%; position: absolute; left: 50%; transform: translateX(-50%); bottom: -10px; font-size: 16px; padding: 5px 0; z-index: 2; } /* 참여팝업 */ #eventJoinTrommDryerEvent2 table tbody td:nth-child(3) { font-weight: bold; line-height:1.5; text-decoration: underline; } #eventJoinTrommDryer .input-info-review { margin-top: 50px; } #eventJoinTrommDryer .input-info-review .gray_box { padding: 24px; border-radius: 8px; background-color: #f4f4f4; font-size: 16px; line-height: 26px; } #eventJoinTrommDryer dl.forms span.rdo-wrap, #eventJoinTrommDryerEvent2 dl.forms span.rdo-wrap { width: 33.33%; margin-left: 0; } #eventJoinTrommDryer .input-info-channel span.rdo-wrap:nth-child(-n+3), #eventJoinTrommDryerEvent2 .input-info-channel span.rdo-wrap:nth-child(-n+3) { margin-bottom: 10px; } .event-container {margin:0 auto;max-width:1380px;font-size:0;} .event-container img {margin:0 auto;width:100%;height:auto;} .event-container .pc {display:block;} .event-container .mobile {display:none;} .event-header {position:relative;} .event-header .dryer-experience {position:relative;} .event-header .dryer-review {display:none;position:relative;} .tabs-wrap {position:sticky;top:0;width:100%;z-index:11;} .tabs-wrap .tabs {display:flex;position:absolute;top:0;left:50%;margin:0;width:100%;height:100%;padding:0;transform:translateX(-50%);overflow:visible;} .tabs-wrap .tabs li {position:relative;flex:1;margin:0;padding:0;} .tabs-wrap .tabs li a {display:block;width:100%;height:100%;background-repeat:no-repeat;background-position:0 0;background-size:100% auto;overflow:hidden;} .tabs-wrap .tabs li:nth-child(1).on a {background-image:url(../images/tab_01_on.jpg);} .tabs-wrap .tabs li:nth-child(2).on a {background-image:url(../images/tab_02_on.jpg);} #dryerExperience {display:none;} #dryerExperience .section01 {position:relative;} #dryerExperience .section02 {position:relative;} #dryerExperience .section03 {position:relative;} #dryerExperience .section04 {position:relative;} #dryerExperience .section04 .evt-down-area .btn-download1 {position:absolute;top:732px;left:50%;margin-left:-475px;width:290px;height:64px;overflow:hidden;} #dryerExperience .section04 .evt-down-area .btn-download2 {position:absolute;top:732px;left:50%;margin-left:-145px;width:290px;height:64px;overflow:hidden;} #dryerExperience .section04 .evt-down-area .btn-download3 {position:absolute;top:732px;left:50%;margin-left:185px;width:290px;height:64px;overflow:hidden;} #dryerExperience .section04 .evt-down-area .btn-download4 {position:absolute;top:1212px;left:50%;margin-left:-475px;width:290px;height:64px;overflow:hidden;} #dryerExperience .section04 .evt-down-area .btn-download5 {position:absolute;top:1212px;left:50%;margin-left:-145px;width:290px;height:64px;overflow:hidden;} #dryerExperience .section04 .evt-down-area .btn-download6 {position:absolute;top:1212px;left:50%;margin-left:185px;width:290px;height:64px;overflow:hidden;} #dryerExperience .section05 {position:relative;} #dryerExperience .section05 .btn-copy-hash {position:absolute;top:355px;left:50%;margin-left:-185px;width:370px;height:64px;overflow:hidden;} #dryerExperience .section05 .btn-share1 {position:absolute;top:787px;left:50%;margin-left:-388px;width:96px;height:96px;overflow:hidden;} #dryerExperience .section05 .btn-share2 {position:absolute;top:787px;left:50%;margin-left:-252px;width:96px;height:96px;overflow:hidden;} #dryerExperience .section05 .btn-share3 {position:absolute;top:787px;left:50%;margin-left:-116px;width:96px;height:96px;overflow:hidden;} #dryerExperience .section05 .btn-share4 {position:absolute;top:787px;left:50%;margin-left:20px;width:96px;height:96px;overflow:hidden;} #dryerExperience .section05 .btn-share5 {position:absolute;top:787px;left:50%;margin-left:156px;width:96px;height:96px;overflow:hidden;} #dryerExperience .section05 .btn-share6 {position:absolute;top:787px;left:50%;margin-left:292px;width:96px;height:96px;overflow:hidden;} #dryerExperience .section05 .btn-request {position:absolute;top:1004px;left:50%;margin-left:-250px;width:500px;height:80px;overflow:hidden;} #dryerExperience .section06 {position:relative;} #dryerExperience .section06 .btn-option1 {position:absolute;top:1012px;left:50%;margin-left:-412px;width:184px;height:70px;overflow:hidden;} #dryerExperience .section06 .btn-option2 {position:absolute;top:1012px;left:50%;margin-left:-92px;width:184px;height:70px;overflow:hidden;} #dryerExperience .section06 .btn-option3 {position:absolute;top:1012px;left:50%;margin-left:228px;width:184px;height:70px;overflow:hidden;} #dryerExperience .section07 {position:relative;} #dryerExperience .section08 {position:relative;} #dryerReview .section01 {position:relative;} #dryerReview .section02 {position:relative;} #dryerReview .section03 {position:relative;} #dryerReview .section04 {position:relative;} #dryerReview .section05 {position:relative;} #dryerReview .section05 .btn-copy-hash {position:absolute;top:319px;left:50%;margin-left:-185px;width:370px;height:64px;overflow:hidden;} #dryerReview .section05 .btn-share1 {position:absolute;top:665px;left:50%;margin-left:-388px;width:96px;height:96px;overflow:hidden;} #dryerReview .section05 .btn-share2 {position:absolute;top:665px;left:50%;margin-left:-252px;width:96px;height:96px;overflow:hidden;} #dryerReview .section05 .btn-share3 {position:absolute;top:665px;left:50%;margin-left:-116px;width:96px;height:96px;overflow:hidden;} #dryerReview .section05 .btn-share4 {position:absolute;top:665px;left:50%;margin-left:20px;width:96px;height:96px;overflow:hidden;} #dryerReview .section05 .btn-share5 {position:absolute;top:665px;left:50%;margin-left:156px;width:96px;height:96px;overflow:hidden;} #dryerReview .section05 .btn-share6 {position:absolute;top:665px;left:50%;margin-left:292px;width:96px;height:96px;overflow:hidden;} #dryerReview .section06 {position:relative;} #dryerReview .section06 .btn-request {position:absolute;top:238px;left:50%;margin-left:-250px;width:500px;height:110px;overflow:hidden;} #dryerReview .section07 {position:relative;} #dryerReview .section08 {position:relative;} @media screen and (max-width: 1459px) { .day_txt { font-size: 20px; } .tabs-wrap .tabs li:nth-child(2)::before {top:calc(32 / 96 * -100%);left:calc(128 / 690 * 100%);width:calc(172 / 690 * 100%);height:calc(60 / 96 * 100%);} #dryerExperience .section04 .evt-down-area .btn-download1 {top:calc(732 / 1346 * 100%);margin-left:calc(475 / 1380 * -100%);width:calc(290 / 1380 * 100%);height:calc(64 / 1346 * 100%);} #dryerExperience .section04 .evt-down-area .btn-download2 {top:calc(732 / 1346 * 100%);margin-left:calc(145 / 1380 * -100%);width:calc(290 / 1380 * 100%);height:calc(64 / 1346 * 100%);} #dryerExperience .section04 .evt-down-area .btn-download3 {top:calc(732 / 1346 * 100%);margin-left:calc(185 / 1380 * 100%);width:calc(290 / 1380 * 100%);height:calc(64 / 1346 * 100%);} #dryerExperience .section04 .evt-down-area .btn-download4 {top:calc(1212 / 1346 * 100%);margin-left:calc(475 / 1380 * -100%);width:calc(290 / 1380 * 100%);height:calc(64 / 1346 * 100%);} #dryerExperience .section04 .evt-down-area .btn-download5 {top:calc(1212 / 1346 * 100%);margin-left:calc(145 / 1380 * -100%);width:calc(290 / 1380 * 100%);height:calc(64 / 1346 * 100%);} #dryerExperience .section04 .evt-down-area .btn-download6 {top:calc(1212 / 1346 * 100%);margin-left:calc(185 / 1380 * 100%);width:calc(290 / 1380 * 100%);height:calc(64 / 1346 * 100%);} #dryerExperience .section05 .btn-copy-hash {top:calc(355 / 1239 * 100%);margin-left:calc(185 / 1380 * -100%);width:calc(370 / 1380 * 100%);height:calc(64 / 1239 * 100%);} #dryerExperience .section05 .btn-share1 {top:calc(787 / 1239 * 100%);margin-left:calc(388 / 1380 * -100%);width:calc(96 / 1380 * 100%);height:calc(96 / 1239 * 100%);} #dryerExperience .section05 .btn-share2 {top:calc(787 / 1239 * 100%);margin-left:calc(252 / 1380 * -100%);width:calc(96 / 1380 * 100%);height:calc(96 / 1239 * 100%);} #dryerExperience .section05 .btn-share3 {top:calc(787 / 1239 * 100%);margin-left:calc(116 / 1380 * -100%);width:calc(96 / 1380 * 100%);height:calc(96 / 1239 * 100%);} #dryerExperience .section05 .btn-share4 {top:calc(787 / 1239 * 100%);margin-left:calc(20 / 1380 * 100%);width:calc(96 / 1380 * 100%);height:calc(96 / 1239 * 100%);} #dryerExperience .section05 .btn-share5 {top:calc(787 / 1239 * 100%);margin-left:calc(156 / 1380 * 100%);width:calc(96 / 1380 * 100%);height:calc(96 / 1239 * 100%);} #dryerExperience .section05 .btn-share6 {top:calc(787 / 1239 * 100%);margin-left:calc(292 / 1380 * 100%);width:calc(96 / 1380 * 100%);height:calc(96 / 1239 * 100%);} #dryerExperience .section05 .btn-request {top:calc(1004 / 1239 * 100%);margin-left:calc(250 / 1380 * -100%);width:calc(500 / 1380 * 100%);height:calc(80 / 1239 * 100%);} #dryerExperience .section06 .btn-option1 {top:calc(1012 / 1274 * 100%);margin-left:calc(412 / 1380 * -100%);width:calc(184 / 1380 * 100%);height:calc(70 / 1274 * 100%);} #dryerExperience .section06 .btn-option2 {top:calc(1012 / 1274 * 100%);margin-left:calc(92 / 1380 * -100%);width:calc(184 / 1380 * 100%);height:calc(70 / 1274 * 100%);} #dryerExperience .section06 .btn-option3 {top:calc(1012 / 1274 * 100%);margin-left:calc(228 / 1380 * 100%);width:calc(184 / 1380 * 100%);height:calc(70 / 1274 * 100%);} #dryerReview .section05 .btn-copy-hash {top:calc(319 / 880 * 100%);margin-left:calc(185 / 1380 * -100%);width:calc(370 / 1380 * 100%);height:calc(64 / 880 * 100%);} #dryerReview .section05 .btn-share1 {top:calc(665 / 880 * 100%);margin-left:calc(388 / 1380 * -100%);width:calc(96 / 1380 * 100%);height:calc(96 / 880 * 100%);} #dryerReview .section05 .btn-share2 {top:calc(665 / 880 * 100%);margin-left:calc(252 / 1380 * -100%);width:calc(96 / 1380 * 100%);height:calc(96 / 880 * 100%);} #dryerReview .section05 .btn-share3 {top:calc(665 / 880 * 100%);margin-left:calc(116 / 1380 * -100%);width:calc(96 / 1380 * 100%);height:calc(96 / 880 * 100%);} #dryerReview .section05 .btn-share4 {top:calc(665 / 880 * 100%);margin-left:calc(20 / 1380 * 100%);width:calc(96 / 1380 * 100%);height:calc(96 / 880 * 100%);} #dryerReview .section05 .btn-share5 {top:calc(665 / 880 * 100%);margin-left:calc(156 / 1380 * 100%);width:calc(96 / 1380 * 100%);height:calc(96 / 880 * 100%);} #dryerReview .section05 .btn-share6 {top:calc(665 / 880 * 100%);margin-left:calc(292 / 1380 * 100%);width:calc(96 / 1380 * 100%);height:calc(96 / 880 * 100%);} #dryerReview .section06 .btn-request {top:calc(238 / 448 * 100%);margin-left:calc(250 / 1380 * -100%);width:calc(500 / 1380 * 100%);height:calc(110 / 448 * 100%);} } @media screen and (max-width: 1160px) { .day_txt { font-size: 18px; } } @media screen and (max-width: 1060px) { .day_txt { font-size: 16px; } } @media screen and (max-width: 940px) { .day_txt { font-size: 15px; } } @media screen and (max-width: 820px) { .day_txt { font-size: 12px; } } /* mobile */ @media screen and (max-width: 767px) { .notice_txt { width: 85%; font-size: 12px; line-height: 15px; bottom: calc(70 / var(--width)* 100%); } /* 참여팝업 */ #eventJoinTrommDryer .input-info-review { margin-top: 30px; } #eventJoinTrommDryer .input-info-review .gray_box { font-size: 14px; line-height: 22px; } .day_txt { font-size: 13px; } .day_txt.txt_02 { top: calc(1180 / var(--width)* 100%); left: calc(1018 / var(--width)* 100%); } .day_noti_txt { font-size: 12px; line-height: 15px; padding: 0 27px; } .event-container .mobile {display:block;} .event-container .pc {display:none;} .tabs-wrap {top:46px;} .tabs-wrap .tabs li:nth-child(2)::before {top:calc(32 / 96 * -100%);left:calc(94 / 360 * 100%);width:calc(172 / 360 * 100%);height:calc(60 / 96 * 100%);background:url(../images/m_tab_soon.png) no-repeat;background-size:100% auto;} .tabs-wrap .tabs li:nth-child(1).on a {background-image:url(../images/m_tab_01_on.jpg);} .tabs-wrap .tabs li:nth-child(2).on a {background-image:url(../images/m_tab_02_on.jpg);} .header.helloBar ~ .mobile-nav-wrap ~ #content .event-container .tabs-wrap {top:88px;} #dryerExperience .section04 .evt-down-area .btn-download1 {top:calc(782 / 1876 * 100%);margin-left:calc(300 / 720 * -100%);width:calc(290 / 720 * 100%);height:calc(64 / 1876 * 100%);} #dryerExperience .section04 .evt-down-area .btn-download2 {top:calc(782 / 1876 * 100%);margin-left:calc(10 / 720 * 100%);width:calc(290 / 720 * 100%);height:calc(64 / 1876 * 100%);} #dryerExperience .section04 .evt-down-area .btn-download3 {top:calc(1262 / 1876 * 100%);margin-left:calc(300 / 720 * -100%);width:calc(290 / 720 * 100%);height:calc(64 / 1876 * 100%);} #dryerExperience .section04 .evt-down-area .btn-download4 {top:calc(1262 / 1876 * 100%);margin-left:calc(10 / 720 * 100%);width:calc(290 / 720 * 100%);height:calc(64 / 1876 * 100%);} #dryerExperience .section04 .evt-down-area .btn-download5 {top:calc(1742 / 1876 * 100%);margin-left:calc(300 / 720 * -100%);width:calc(290 / 720 * 100%);height:calc(64 / 1876 * 100%);} #dryerExperience .section04 .evt-down-area .btn-download6 {top:calc(1742 / 1876 * 100%);margin-left:calc(10 / 720 * 100%);width:calc(290 / 720 * 100%);height:calc(64 / 1876 * 100%);} #dryerExperience .section05 .btn-copy-hash {top:calc(420 / 1434 * 100%);margin-left:calc(185 / 720 * -100%);width:calc(370 / 720 * 100%);height:calc(64 / 1434 * 100%);} #dryerExperience .section05 .btn-share1 {top:calc(852 / 1434 * 100%);margin-left:calc(184 / 720 * -100%);width:calc(96 / 720 * 100%);height:calc(96 / 1434 * 100%);} #dryerExperience .section05 .btn-share2 {top:calc(852 / 1434 * 100%);margin-left:calc(48 / 720 * -100%);width:calc(96 / 720 * 100%);height:calc(96 / 1434 * 100%);} #dryerExperience .section05 .btn-share3 {top:calc(852 / 1434 * 100%);margin-left:calc(88 / 720 * 100%);width:calc(96 / 720 * 100%);height:calc(96 / 1434 * 100%);} #dryerExperience .section05 .btn-share4 {top:calc(978 / 1434 * 100%);margin-left:calc(184 / 720 * -100%);width:calc(96 / 720 * 100%);height:calc(96 / 1434 * 100%);} #dryerExperience .section05 .btn-share5 {top:calc(978 / 1434 * 100%);margin-left:calc(48 / 720 * -100%);width:calc(96 / 720 * 100%);height:calc(96 / 1434 * 100%);} #dryerExperience .section05 .btn-share6 {top:calc(978 / 1434 * 100%);margin-left:calc(88 / 720 * 100%);width:calc(96 / 720 * 100%);height:calc(96 / 1434 * 100%);} #dryerExperience .section05 .btn-request {top:calc(1195 / 1434 * 100%);margin-left:calc(250 / 720 * -100%);width:calc(500 / 720 * 100%);height:calc(80 / 1434 * 100%);} #dryerExperience .section06 .btn-option1 {top:calc(1093 / 1359 * 100%);margin-left:calc(302 / 720 * -100%);width:calc(184 / 720 * 100%);height:calc(70 / 1359 * 100%);} #dryerExperience .section06 .btn-option2 {top:calc(1093 / 1359 * 100%);margin-left:calc(92 / 720 * -100%);width:calc(184 / 720 * 100%);height:calc(70 / 1359 * 100%);} #dryerExperience .section06 .btn-option3 {top:calc(1093 / 1359 * 100%);margin-left:calc(118 / 720 * 100%);width:calc(184 / 720 * 100%);height:calc(70 / 1359 * 100%);} #dryerReview .section05 .btn-copy-hash {top:calc(354 / 1034 * 100%);margin-left:calc(185 / 720 * -100%);width:calc(370 / 720 * 100%);height:calc(64 / 1034 * 100%);} #dryerReview .section05 .btn-share1 {top:calc(700 / 1034 * 100%);margin-left:calc(184 / 720 * -100%);width:calc(96 / 720 * 100%);height:calc(96 / 1034 * 100%);} #dryerReview .section05 .btn-share2 {top:calc(700 / 1034 * 100%);margin-left:calc(48 / 720 * -100%);width:calc(96 / 720 * 100%);height:calc(96 / 1034 * 100%);} #dryerReview .section05 .btn-share3 {top:calc(700 / 1034 * 100%);margin-left:calc(88 / 720 * 100%);width:calc(96 / 720 * 100%);height:calc(96 / 1034 * 100%);} #dryerReview .section05 .btn-share4 {top:calc(826 / 1034 * 100%);margin-left:calc(184 / 720 * -100%);width:calc(96 / 720 * 100%);height:calc(96 / 1034 * 100%);} #dryerReview .section05 .btn-share5 {top:calc(826 / 1034 * 100%);margin-left:calc(48 / 720 * -100%);width:calc(96 / 720 * 100%);height:calc(96 / 1034 * 100%);} #dryerReview .section05 .btn-share6 {top:calc(826 / 1034 * 100%);margin-left:calc(88 / 720 * 100%);width:calc(96 / 720 * 100%);height:calc(96 / 1034 * 100%);} #dryerReview .section06 .btn-request {top:calc(283 / 493 * 100%);margin-left:calc(250 / 720 * -100%);width:calc(500 / 720 * 100%);height:calc(110 / 493 * 100%);} }