.monitorSns-container {margin:0 auto;max-width:1380px;font-size:0;} .monitorSns-container img {margin:0 auto;width:100%;height:auto;} .monitorSns-container .pc {display:block;} .monitorSns-container .mobile {display:none;} .monitorSns-container .section01 {position:relative;} .monitorSns-container .section02 {position:relative;} .monitorSns-container .section02 .video-frame {position:absolute;top:263px;left:50%;margin-left:-360px;width:720px;height:405px;background:#000;overflow:hidden;} .monitorSns-container .section02 .video-frame iframe {width:100%;height:100%;} .monitorSns-container .section03 {position:relative;} .monitorSns-container .section04 {position:relative;} .monitorSns-container .section05 {position:relative;} .monitorSns-container .section05 .select-keyword {display:flex;justify-content:center;flex-wrap:wrap;position:absolute;top:323px;left:50%;margin-left:-329px;width:658px;overflow:hidden;} .monitorSns-container .section05 .select-keyword a {display:block;margin:10px 9px;padding-bottom:74px;background-size:100% auto !important;overflow:hidden;} .monitorSns-container .section05 .select-keyword a[data-activated="true"] {background-position:center bottom !important;} .monitorSns-container .section05 .select-keyword a.btn-keyword1 {width:181px;background:url(../images/btn_play_keyword01.png) no-repeat;} .monitorSns-container .section05 .select-keyword a.btn-keyword2 {width:181px;background:url(../images/btn_play_keyword02.png) no-repeat;} .monitorSns-container .section05 .select-keyword a.btn-keyword3 {width:181px;background:url(../images/btn_play_keyword03.png) no-repeat;} .monitorSns-container .section05 .select-keyword a.btn-keyword4 {width:141px;background:url(../images/btn_play_keyword04.png) no-repeat;} .monitorSns-container .section05 .select-keyword a.btn-keyword5 {width:141px;background:url(../images/btn_play_keyword05.png) no-repeat;} .monitorSns-container .section05 .select-keyword a.btn-keyword6 {width:141px;background:url(../images/btn_play_keyword06.png) no-repeat;} .monitorSns-container .section05 .select-keyword a.btn-keyword7 {width:141px;background:url(../images/btn_play_keyword07.png) no-repeat;} .monitorSns-container .section05 .btn-step1 {position:absolute;top:563px;left:50%;margin-left:-206px;width:414px;height:84px;overflow:hidden;} .monitorSns-container .section06 {position:relative;} .monitorSns-container .section06 .result-image {position:absolute;top:273px;left:50%;margin-left:-320px;width:640px;height:640px;overflow:hidden;} .monitorSns-container .section06 .btn-step2-1 {position:absolute;top:952px;left:50%;margin-left:-325px;width:315px;height:84px;overflow:hidden;} .monitorSns-container .section06 .btn-step2-2 {position:absolute;top:952px;left:50%;margin-left:10px;width:315px;height:84px;overflow:hidden;} .monitorSns-container .section07 {position:relative;} .monitorSns-container .section07 .btn-step3-1 {position:absolute;top:188px;left:50%;margin-left:-130px;width:261px;height:38px;overflow:hidden;} .monitorSns-container .section07 .btn-step3-2 {position:absolute;top:537px;left:50%;margin-left:-206px;width:414px;height:84px;overflow:hidden;} .monitorSns-container .section08 {position:relative;padding-bottom:756px;} .monitorSns-container .section08 .swiper-play {position:absolute;top:263px;left:0;width:100%;height:756px;overflow:hidden;} .monitorSns-container .section08 .swiper-play .swiper-container {margin:0 auto;width:566px;overflow:hidden;} .monitorSns-container .section08 .swiper-play .swiper-container .swiper-slide {position:relative;} .monitorSns-container .section08 .swiper-play .swiper-container .swiper-slide div {position:relative;width:100%;overflow:hidden;} .monitorSns-container .section08 .swiper-play .swiper-container .swiper-slide p {position:relative;margin-top:36px;font-size:22px;color:#121212;line-height:32px;letter-spacing:-0.015em;text-align:center;overflow:hidden;} .monitorSns-container .section08 .swiper-play .swiper-container .swiper-slide p span {font-size:18px;color:#919191;} .monitorSns-container .section08 .swiper-play .swiper-button-prev {top:246px;left:50%;margin:0 0 0 -360px;width:40px;height:76px;background:url(../images/btn_slide_prev.png) no-repeat;background-size:100% auto;} .monitorSns-container .section08 .swiper-play .swiper-button-next {top:246px;right:50%;margin:0 -360px 0 0;width:40px;height:76px;background:url(../images/btn_slide_next.png) no-repeat;background-size:100% auto;} .monitorSns-container .section09 {position:relative;} @media screen and (max-width: 1459px) { .monitorSns-container .section02 .video-frame {top:calc(263 / 768 * 100%);margin-left:calc(360 / 1380 * -100%);width:calc(720 / 1380 * 100%);height:calc(405 / 768 * 100%);} .monitorSns-container .section05 .select-keyword {top:calc(323 / 694 * 100%);margin-left:calc(329 / 1380 * -100%);width:calc(658 / 1380 * 100%);} .monitorSns-container .section05 .select-keyword a {margin:calc(10 / 658 * 100%) calc(9 / 658 * 100%);padding-bottom:calc(74 / 658 * 100%);} .monitorSns-container .section05 .select-keyword a.btn-keyword1 {width:calc(181 / 658 * 100%);} .monitorSns-container .section05 .select-keyword a.btn-keyword2 {width:calc(181 / 658 * 100%);} .monitorSns-container .section05 .select-keyword a.btn-keyword3 {width:calc(181 / 658 * 100%);} .monitorSns-container .section05 .select-keyword a.btn-keyword4 {width:calc(141 / 658 * 100%);} .monitorSns-container .section05 .select-keyword a.btn-keyword5 {width:calc(141 / 658 * 100%);} .monitorSns-container .section05 .select-keyword a.btn-keyword6 {width:calc(141 / 658 * 100%);} .monitorSns-container .section05 .select-keyword a.btn-keyword7 {width:calc(141 / 658 * 100%);} .monitorSns-container .section05 .btn-step1 {top:calc(563 / 694 * 100%);margin-left:calc(206 / 1380 * -100%);width:calc(414 / 1380 * 100%);height:calc(84 / 694 * 100%);} .monitorSns-container .section06 .result-image {top:calc(273 / 1096 * 100%);margin-left:calc(320 / 1380 * -100%);width:calc(640 / 1380 * 100%);height:calc(640 / 1096 * 100%);} .monitorSns-container .section06 .btn-step2-1 {top:calc(952 / 1096 * 100%);margin-left:calc(325 / 1380 * -100%);width:calc(315 / 1380 * 100%);height:calc(84 / 1096 * 100%);} .monitorSns-container .section06 .btn-step2-2 {top:calc(952 / 1096 * 100%);margin-left:calc(10 / 1380 * 100%);width:calc(315 / 1380 * 100%);height:calc(84 / 1096 * 100%);} .monitorSns-container .section07 .btn-step3-1 {top:calc(188 / 722 * 100%);margin-left:calc(130 / 1380 * -100%);width:calc(261 / 1380 * 100%);height:calc(38 / 722 * 100%);} .monitorSns-container .section07 .btn-step3-2 {top:calc(537 / 722 * 100%);margin-left:calc(206 / 1380 * -100%);width:calc(414 / 1380 * 100%);height:calc(84 / 722 * 100%);} .monitorSns-container .section08 {padding-bottom:calc(756 / 1380 * 100%);} .monitorSns-container .section08 .swiper-play {top:calc(263 / 1019 * 100%);height:calc(756 / 1019 * 100%);} .monitorSns-container .section08 .swiper-play .swiper-container {width:calc(566 / 1380 * 100%);} .monitorSns-container .section08 .swiper-play .swiper-container .swiper-slide p {margin-top:calc(36 / 566 * 100%);font-size:1.507vw;line-height:2.192vw;} .monitorSns-container .section08 .swiper-play .swiper-container .swiper-slide p span {font-size:1.233vw;} .monitorSns-container .section08 .swiper-play .swiper-button-prev {top:calc(246 / 756 * 100%);margin:0 0 0 calc(360 / 1380 * -100%);width:calc(40 / 1380 * 100%);height:calc(76 / 756 * 100%);} .monitorSns-container .section08 .swiper-play .swiper-button-next {top:calc(246 / 756 * 100%);margin:0 calc(360 / 1380 * -100%) 0 0;width:calc(40 / 1380 * 100%);height:calc(76 / 756 * 100%);} } /* popup */ .popup-event {display:none;border-style:none;outline:none;} .popup-event img {margin:0 auto;width:100%;height:auto;} .popup-event .pc {display:block;} .popup-event .mobile {display:none;} .popup-event .popup-inner {position:relative;border-radius:22.5px;margin:0 auto;width:75%;max-width:480px;overflow:hidden;} .popup-event .btn-close {position:absolute;top:calc(28 / 640 * 75%);right:calc(28 / 640 * 100%);width:calc(38 / 640 * 100%);padding-bottom:calc(39 / 640 * 100%);background:url(../images/pop_btn_close.png) no-repeat;background-size:100% auto;overflow:hidden;} .popup-event .btn-close::before {background:transparent !important;} .input-info-wrap:first-child table tbody tr td {font-weight:bold;} .input-info-wrap:first-child table tbody tr td:last-child {font-size:20px;line-height:30px;text-decoration:underline;} .popup-monitorSns {display:none;border-style:none;outline:none;} .popup-monitorSns .pop-conts {height:calc(100vh - 78px - 130px);max-height:580px;padding:48px 40px 0;overflow-y:auto;} .popup-monitorSns .pop-conts .agree-input {margin-top:12px;} .popup-monitorSns .pop-conts .input-info-wrap {margin-top:15px;} .popup-monitorSns .pop-conts .input-info-wrap .tb-tit.req::after {content:'*';display:inline-block;margin-left:1px;color:#ec455a;font-size:inherit;line-height:inherit;vertical-align:top;} .popup-monitorSns .pop-conts .form-wrap {margin-top:34px;} .popup-monitorSns .pop-conts #agree2_f .bullet-list {margin-top:0;margin-bottom:24px;} .popup-monitorSns .pop-conts #agree2_f2 .bullet-list {margin-top:0;margin-bottom:24px;} .popup-monitorSns .pop-conts #uiSubmit {padding:10px 31px 12px;} .popup-monitorSns .pop-conts #uiSubmit2 {padding:10px 31px 12px;} #eventJoinMakePlayProduct .popup-inner {border-radius:0;} #eventJoinMakePlayProduct[data-play="1"] .btn-product, #eventJoinMakePlayProduct[data-play="5"] .btn-product, #eventJoinMakePlayProduct[data-play="7"] .btn-product, #eventJoinMakePlayProduct[data-play="10"] .btn-product {bottom:calc(100 / 966 * 100%);} #eventJoinMakePlayProduct[data-play="2"] .btn-product, #eventJoinMakePlayProduct[data-play="3"] .btn-product, #eventJoinMakePlayProduct[data-play="4"] .btn-product, #eventJoinMakePlayProduct[data-play="6"] .btn-product, #eventJoinMakePlayProduct[data-play="8"] .btn-product, #eventJoinMakePlayProduct[data-play="9"] .btn-product, #eventJoinMakePlayProduct[data-play="11"] .btn-product, #eventJoinMakePlayProduct[data-play="12"] .btn-product, #eventJoinMakePlayProduct[data-play="13"] .btn-product, #eventJoinMakePlayProduct[data-play="14"] .btn-product, #eventJoinMakePlayProduct[data-play="15"] .btn-product {bottom:calc(100 / 930 * 100%);} #eventJoinMakePlayProduct[data-play="16"] .btn-product {bottom:calc(100 / 904 * 100%);} #eventJoinMakePlayProduct[data-play="17"] .btn-product, #eventJoinMakePlayProduct[data-play="18"] .btn-product, #eventJoinMakePlayProduct[data-play="19"] .btn-product, #eventJoinMakePlayProduct[data-play="20"] .btn-product, #eventJoinMakePlayProduct[data-play="21"] .btn-product {bottom:calc(100 / 868 * 100%);} #eventJoinMakePlayProduct .btn-product {position:absolute;left:50%;margin-left:calc(200 / 640 * -100%);width:calc(400 / 640 * 100%);padding-bottom:calc(80 / 640 * 100%);overflow:hidden;} /* popup-scroll */ .ui_modal_wrap {margin:0 !important;} .popup-event {left:0 !important;width:100%;min-height:auto !important;max-height:100%;overflow:auto;transform:translateY(-50%) !important;} .popup-event .popup-inner {max-width:480px;} .popup-wrap {min-height:auto !important;} /* alert close */ .ui_modal_container .btn-close {position:absolute;top:calc(24 / 640 * 75%);right:16px;width:24px;height:24px;} .ui_modal_container .btn-close:before {content:'';position:absolute;top:0;left:0;width:24px;height:24px;background:url(/lg5-common/images/icons/btn-close-32.svg) no-repeat;background-size:24px;} /* mobile */ @media screen and (max-width: 767px) { .monitorSns-container .mobile {display:block;} .monitorSns-container .pc {display:none;} .monitorSns-container .section02 .video-frame {top:calc(258 / 718 * 100%);margin-left:calc(320 / 720 * -100%);width:calc(640 / 720 * 100%);height:calc(360 / 718 * 100%);} .monitorSns-container .section05 .select-keyword {top:calc(342 / 742 * 100%);margin-left:calc(329 / 720 * -100%);width:calc(658 / 720 * 100%);} .monitorSns-container .section05 .select-keyword a {margin:calc(13 / 658 * 100%) calc(9 / 658 * 100%);padding-bottom:calc(84 / 658 * 100%);} .monitorSns-container .section05 .select-keyword a.btn-keyword1 {width:calc(182 / 658 * 100%);background:url(../images/m_btn_play_keyword01.png) no-repeat;} .monitorSns-container .section05 .select-keyword a.btn-keyword2 {width:calc(182 / 658 * 100%);background:url(../images/m_btn_play_keyword02.png) no-repeat;} .monitorSns-container .section05 .select-keyword a.btn-keyword3 {width:calc(182 / 658 * 100%);background:url(../images/m_btn_play_keyword03.png) no-repeat;} .monitorSns-container .section05 .select-keyword a.btn-keyword4 {width:calc(143 / 658 * 100%);background:url(../images/m_btn_play_keyword04.png) no-repeat;} .monitorSns-container .section05 .select-keyword a.btn-keyword5 {width:calc(143 / 658 * 100%);background:url(../images/m_btn_play_keyword05.png) no-repeat;} .monitorSns-container .section05 .select-keyword a.btn-keyword6 {width:calc(143 / 658 * 100%);background:url(../images/m_btn_play_keyword06.png) no-repeat;} .monitorSns-container .section05 .select-keyword a.btn-keyword7 {width:calc(143 / 658 * 100%);background:url(../images/m_btn_play_keyword07.png) no-repeat;} .monitorSns-container .section05 .btn-step1 {top:calc(600 / 742 * 100%);margin-left:calc(206 / 720 * -100%);width:calc(414 / 720 * 100%);height:calc(94 / 742 * 100%);} .monitorSns-container .section06 .result-image {top:calc(294 / 1157 * 100%);margin-left:calc(320 / 720 * -100%);width:calc(640 / 720 * 100%);height:calc(640 / 1157 * 100%);} .monitorSns-container .section06 .btn-step2-1 {top:calc(994 / 1157 * 100%);margin-left:calc(325 / 720 * -100%);width:calc(315 / 720 * 100%);height:calc(94 / 1157 * 100%);} .monitorSns-container .section06 .btn-step2-2 {top:calc(994 / 1157 * 100%);margin-left:calc(10 / 720 * 100%);width:calc(315 / 720 * 100%);height:calc(94 / 1157 * 100%);} .monitorSns-container .section07 .btn-step3-1 {top:calc(202 / 774 * 100%);margin-left:calc(150 / 720 * -100%);width:calc(300 / 720 * 100%);height:calc(46 / 774 * 100%);} .monitorSns-container .section07 .btn-step3-2 {top:calc(581 / 774 * 100%);margin-left:calc(206 / 720 * -100%);width:calc(414 / 720 * 100%);height:calc(94 / 774 * 100%);} .monitorSns-container .section08 {padding-bottom:calc(694 / 720 * 100%);} .monitorSns-container .section08 .swiper-play {top:calc(264 / 958 * 100%);height:calc(694 / 958 * 100%);} .monitorSns-container .section08 .swiper-play .swiper-container {width:calc(500 / 720 * 100%);} .monitorSns-container .section08 .swiper-play .swiper-container .swiper-slide p {margin-top:calc(22 / 500 * 100%);font-size:3.333vw;line-height:4.722vw;} .monitorSns-container .section08 .swiper-play .swiper-container .swiper-slide p span {font-size:2.5vw;} .monitorSns-container .section08 .swiper-play .swiper-button-prev {top:calc(217 / 694 * 100%);margin:0 0 0 calc(320 / 720 * -100%);width:calc(35 / 720 * 100%);height:calc(67 / 694 * 100%);} .monitorSns-container .section08 .swiper-play .swiper-button-next {top:calc(217 / 694 * 100%);margin:0 calc(320 / 720 * -100%) 0 0;width:calc(35 / 720 * 100%);height:calc(67 / 694 * 100%);} /* popup */ .popup-event {width:100%;} .popup-event .mobile {display:block;} .popup-event .pc {display:none;} .popup-event .popup-inner {width:90%;} .input-info-wrap:first-child table tbody tr td:last-child {font-size:16px;line-height:24px;} .popup-monitorSns .pop-conts {height:calc(100vh - 62px - 60px);max-height:calc(100vh - 62px - 60px);padding:32px 0 81px;} .popup-monitorSns .pop-conts .input-info {padding:0 16px;} .popup-monitorSns .pop-conts .input-info .input-info-wrap .tb_row table td {padding:8px 10px;} .popup-monitorSns .pop-conts .input-info .form-wrap {margin-top:28px;} .popup-monitorSns .pop-conts #uiSubmit {padding:15px 25px;} .popup-monitorSns .pop-conts #uiSubmit2 {padding:15px 25px;} .popup-monitorSns .pop-conts .pop-footer {padding-top:35px;} #eventJoinMakePlayProduct[data-play="1"] .btn-product, #eventJoinMakePlayProduct[data-play="5"] .btn-product, #eventJoinMakePlayProduct[data-play="7"] .btn-product, #eventJoinMakePlayProduct[data-play="10"] .btn-product, #eventJoinMakePlayProduct[data-play="12"] .btn-product {bottom:calc(100 / 1038 * 100%);} #eventJoinMakePlayProduct[data-play="2"] .btn-product, #eventJoinMakePlayProduct[data-play="3"] .btn-product, #eventJoinMakePlayProduct[data-play="4"] .btn-product, #eventJoinMakePlayProduct[data-play="6"] .btn-product, #eventJoinMakePlayProduct[data-play="8"] .btn-product, #eventJoinMakePlayProduct[data-play="9"] .btn-product, #eventJoinMakePlayProduct[data-play="11"] .btn-product, #eventJoinMakePlayProduct[data-play="13"] .btn-product, #eventJoinMakePlayProduct[data-play="15"] .btn-product {bottom:calc(100 / 998 * 100%);} #eventJoinMakePlayProduct[data-play="14"] .btn-product {bottom:calc(100 / 958 * 100%);} #eventJoinMakePlayProduct[data-play="16"] .btn-product {bottom:calc(100 / 1010 * 100%);} #eventJoinMakePlayProduct[data-play="17"] .btn-product, #eventJoinMakePlayProduct[data-play="18"] .btn-product, #eventJoinMakePlayProduct[data-play="19"] .btn-product, #eventJoinMakePlayProduct[data-play="20"] .btn-product, #eventJoinMakePlayProduct[data-play="21"] .btn-product {bottom:calc(100 / 931 * 100%);} #eventJoinMakePlayProduct .btn-product {padding-bottom:calc(100 / 640 * 100%);} }