/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-71595
* CODE : Dev - EV00019731 , Prod - EV00007592
* FILE : /kr/event/2024/08/16_ThinQTime_SNS/eventMainThinQTimeSns.jsp
* DESC : LG ThinQ 사연 공모 이벤트
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2024/08/01				김미선				Created
* 2024/08/12				김미선				바닥페이지
************************************************************************************
**/

/* 이벤트 기본 설정 */
* {
	--width: 1380;
}
html.no_scroll {
	overflow: hidden;
}

.evt-func {
	position: relative;
}

/* 참여팝업 input파일 포커스 */
#eventJoinThinQTimeImg input[type=file]:focus {
	outline:2px solid #000;
}

/* 유튜브 플레이 */
.evt-youtube-area {
	position: absolute;
	bottom: calc(215 / var(--width) * 100%);
	left: 50%;
	width: calc(762 / var(--width) * 100%);
	height: calc(713 / var(--width) * 100%);
	transform: translateX(-50%);
}
.btn-youtube-play {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	overflow: hidden;
	box-shadow: 1px 5px 25px rgb(0, 0, 0, 0.5);
}
.btn-youtube-play img {
	height: 100%;
}
.btn-youtube-play.fadeOut {
	z-index: -1;
}
.evt-youtube-player {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	border-radius: 0;
}

/* -- 버튼 공통 -- */
.evt-btn-area.thinq_Btn_1,
.evt-btn-area.thinq_Btn_2,
.evt-btn-area.thinq_Btn_3 {
    width: calc(400 / var(--width) * 100%);
    padding-top: calc(80 / var(--width) * 100%);
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.evt-btn-area div, .evt-btn-area a {
    width: 100%;
    height: 100%;
}

/* sns공유 인증하기 */
.evt-btn-area.thinq_Btn_1 {
    bottom: calc(304 / var(--width) * 100%);
}
/* 이미지등록 인증하기 */
.evt-btn-area.thinq_Btn_2 {
    bottom: calc(167 / var(--width) * 100%);
}
/* ThinQ 앱 버튼 */
.evt-btn-area.thinq_Btn_3{
	width: calc(820 / var(--width) * 100%);
	bottom: calc(199 / var(--width)* 100%);
}
.evt-btn-area.thinq_Btn_3 div{
	justify-content: space-between;
	width: calc(670 / var(--width) * 100%);
}
.evt-btn-area.thinq_Btn_3 div:nth-child(2){
	left: calc(707 / var(--width)* 100%);
}
/* 해시태그 버튼 */
.evt-hash-area {
	width: 100%;
    padding-top: calc(85 / var(--width)* 100%);
    position: absolute;
    bottom: calc(421 / var(--width)* 100%);
    left: 50%;
    transform: translateX(-50%);
}
.evt-hash-area button {
	width: calc(330 / var(--width) * 100%);
	margin: 0 auto;
}

/* sns 버튼 */
.evt-sns-area {
	width: calc(280 / var(--width) * 100%);
	padding-top: calc(60 / var(--width)* 100%);
    position: absolute;
	bottom: calc(368 / var(--width)* 100%);
	left: 50%;
	transform: translateX(-50%);
}
.evt-sns-area div{
	justify-content: space-between;
}
.evt-sns-area a{
	width: calc(99 / 500 * 100%);
}

/* 슬라이드 */
.thinQ_slider {
    position: absolute;
    bottom: calc(200 / var(--width)* 100%);
    left: 50%;
    width: calc(1377 / var(--width)* 100%);
    height: calc(716 / var(--width)* 100%);
    transform: translateX(-50%);
}
.thinQ_slider .swiper-container {
    width: 100%;
    height: auto;
    padding: 20px 0 25px 0;
}
.thinQ_slider .swiper-wrapper {
	right: calc(-113 / var(--width)* 100%);
}
.thinQ_slider .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.thinQ_slider .swiper-slide img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    box-shadow: 1px 5px 16px rgb(0, 0, 0, 0.3);
}
.thinQ_slider .swiper-button-next {
	width: calc(49 / var(--width)* 100%);
	padding-top: calc(49 / var(--width)* 100%);
	right: calc(79 / var(--width)* 100%);
	background: url('/kr/event/2024/08/16_ThinQTime_SNS/images/btn_slide_right.png') 0 0 no-repeat;
	background-size: 100%;
}
.thinQ_slider .swiper-button-prev {
	width: calc(49 / var(--width)* 100%);
	padding-top: calc(49 / var(--width)* 100%);
	left: calc(70 / var(--width)* 100%);
	background: url('/kr/event/2024/08/16_ThinQTime_SNS/images/btn_slide_left.png') 0 0 no-repeat;
	background-size: 100%;
}
.thinQ_slider .swiper-button-next,
.thinQ_slider .swiper-button-prev {
	top: 51%;
}

/* 모달 팝업 스타일 */
.thinQ_modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
}
.modal_content {
    width: 336px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.thinQ_modal .close {
	position:absolute;
	top: -25px;
	right:0;
	cursor: pointer;
	width: 18px;
	height: 18px;
	background: url('/kr/event/2024/08/16_ThinQTime_SNS/images/btn_close.png') 0 0 no-repeat;
	background-size: 100%;
}
#modalVideo {
	width: 100%;
	height: 596px;
	border-radius: 10px;
}
#modalImg {
	position:absolute;
	top:0;
	left:0;
	cursor:pointer;
}

@media screen and (max-width: 767px){
* {
	--width: 720;
}
/* -- 유튜브 플레이-- */
.mdevice .evt-youtube-area {
	bottom: calc(218 / var(--width) * 100%);
	width: calc(660 / var(--width) * 100%);
	height: calc(238 / var(--width) * 100%);
}

/* -- 버튼 공통 -- */
.mdevice .evt-btn-area.thinq_Btn_1,
.mdevice .evt-btn-area.thinq_Btn_2 {
	width: 90%;
	padding-top: calc(135 / var(--width) * 100%);
}
/* sns공유 인증하기 */
.mdevice .evt-btn-area.thinq_Btn_1 {
	bottom: calc(124 / var(--width) * 100%);
}
/* 이미지등록 인증하기 */
.mdevice .evt-btn-area.thinq_Btn_2 {
	bottom: calc(106 / var(--width) * 100%);
}
/* ThinQ 앱 버튼 */
.evt-btn-area.thinq_Btn_3{
	width: calc(640 / var(--width)* 100%);
	padding-top: calc(313 / var(--width)* 100%);
	bottom: calc(111 / var(--width)* 100%);
}
.evt-btn-area.thinq_Btn_3 div{
	flex-direction: column;
	width: 100%;
}
.evt-btn-area.thinq_Btn_3 div:nth-child(2){
	left: 0;
	top: calc(407 / var(--width)* 100%);
}
.evt-btn-area.thinq_Btn_3 a{
	width: 100%;
	padding-bottom: calc(133 / 640 * 100%);
	height: auto;
}
/* 해시태그 */
.mdevice .evt-hash-area {
	padding-top: calc(95 / var(--width) * 100%);
	bottom: calc(179 / var(--width)* 100%);
}
.mdevice .evt-hash-area button {
	width: calc(450 / var(--width) * 100%);
}
/* sns 버튼 */
.mdevice .evt-sns-area {
	width: 75%;
	padding-top: calc(113 / var(--width)* 100%);
	bottom: calc(151 / var(--width)* 100%);
}
.mdevice .evt-sns-area a{
	width: calc(99 / 500 * 100%);
}

/* 슬라이드 */
.thinQ_slider {
	bottom: calc(35 / var(--width) * 100%);
    width: calc(720 / var(--width) * 100%);
	height: auto;
}
.thinQ_slider .swiper-wrapper {
    right: -26.1%;
}

.thinQ_slider .swiper-button-next {
	width: calc(75 / var(--width)* 100%);
	padding-top: calc(80 / var(--width)* 100%);
	right: calc(124 / var(--width)* 100%);
}
.thinQ_slider .swiper-button-prev {
	width: calc(75 / var(--width)* 100%);
	padding-top: calc(80 / var(--width)* 100%);
	left: calc(122 / var(--width)* 100%);
}

/* 모달 팝업 스타일 */
.modal_content {
	top: 54%;
	width: 320px;
}
#modalVideo {
    width: 100%;
    height: 570px;
}
.thinQ_modal .close {
	top: -25px;
	width: 20px;
    height: 20px;
}
}

@media screen and (max-width: 360px){
	.modal_content {
		top: 54%;
		width: 260px;
	}
	#modalVideo {
		height: 462px;
	}
	.thinQ_modal .close {
		top: -20px;
		right: 5px;
		width: 15px;
		height: 15px;
	}
}