/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-45692
* CODE : Dev - EV00018561 , Prod - EV00006393
* FILE : /kr/event/2023/09/11_gram_go/eventMainGramGo.jsp
* DESC : 그램고 gram GO expereince 캠페인 운영
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2023/08/29				신우용				Created
************************************************************************************
**/

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

/* 참여팝업 */
.pop-conts.academy-pop .form-wrap .forms .conts .box-inner {
	display:flex;
  	flex-direction: column;
  	margin: -5px 0;
}
.rdo-wrap.btn-type3 {
    margin: 5px 0;
}
.rdo-wrap.btn-type3 input+label{
	height: auto;
  	line-height: normal;
  	box-shadow: none;
    border: 1px solid #ddd;
}
.rdo-wrap.btn-type3 input:focus + label {
	outline-offset: 0;
}

.rdo-wrap.btn-type3 input:checked+label::after {
	background: none;
}

.select-wrap .ui-selectbox-wrap .ui-selectbox-list ul li a[data-value="dead"]{
	pointer-events: none;
  	background: #ededed;
    cursor: default;
	color: #aaa;
}

@media screen and (max-width: 767px) {
  	.rdo-wrap.btn-type3 input+label span {
		font-size: 14px;
	}
}
/* 바닥페이지 :: 시작 */
.evt-btn-area{
	bottom:0;
}

.evt-btn-area.event-join{
	margin-bottom: calc(90 / 1380 * 100%);
    padding-bottom: calc(278 / 1380 * 100%);
}

.evt-btn-area.event-join > div{
	flex-direction: column;
}

.evt-btn-area.event-join a {
	width: calc(500 / 1380 * 100%);
    margin: calc(20 / 1380 * 100%) 0;
}

.mdevice .evt-btn-area.event-join{
	margin-bottom: calc(90 / var(--width) * 100%);
    padding-bottom: calc(278 / var(--width) * 100%);
}

.mdevice .evt-btn-area.event-join a{
	width: calc(500 / var(--width) * 100%);
    margin: calc(20 / var(--width) * 100%) 0;
}

.evt-btn-area.btnlinkOut{
	margin-bottom: calc(65 / 1380 * 100%);
    padding-bottom: calc(95 / 1380 * 100%);
}

.evt-btn-area.btnlinkOut a{
	width: calc(500 / 1380 * 100%);
}

.mdevice .evt-btn-area.btnlinkOut{
	margin-bottom: calc(65 / var(--width) * 100%);
    padding-bottom: calc(95 / var(--width) * 100%);
}

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

/* youtube영역 */
.evt-youtube-area {
    position: absolute;
    top: calc(57/ 1380 * 100%);
    left: calc(687 / 1380 * 100%);
    width: calc(969 / 1380 * 100%);
    overflow: hidden;
    transform: translateX(-50%);
}
.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%;
}
.mdevice .evt-youtube-area {
    top: calc(283 / var(--width) * 100%);
    width: calc(600 / var(--width) * 100%);
    height: calc(370 / var(--width) * 100%);
    left: calc(360 / var(--width) * 100%);
}

.video-play {
	position: absolute;
    left: calc(380 / 1380 * 100%);
    bottom: calc(112 / 1380 * 100%);
    width: calc(617 / 1380 * 100%);
    height: calc(728 / 1380 * 100%);
}
.video-play a{
	display: block;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}
.video-play video{
	position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translateX(-50%);
}

.mdevice .video-play{
	left: calc(60 / var(--width) * 100%);
    bottom: calc(68 / var(--width) * 100%);
    width: calc(600 / var(--width) * 100%);
    height: calc(370 / var(--width) * 100%);
}

/* 슬라이드 */
[class*="gramgo-slider"]{
	position: relative;
	padding: calc(230 / 1380 * 100%) 0 calc(125 / 1380 * 100%);
	background-image:url('/kr/event/2023/09/11_gram_go/images/img_03.jpg');
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
}

.gramgo-slider-newjeans{
  	padding: calc(425 / 1380 * 100%) 0 calc(280 / 1380 * 100%);
	background-image:url('/kr/event/2023/09/11_gram_go/images/img_04.jpg');
}

[class*="gramgo-slider"] .swiper-button-next, [class*="gramgo-slider"] .swiper-button-prev{
	width: 2.8vw;
	height: 2.8vw;
	background-image: url('/kr/event/2023/09/11_gram_go/images/btn_slide.png');
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 100% 100%;
}

.gramgo-slider-newjeans .swiper-button-next, .gramgo-slider-newjeans .swiper-button-prev{
	background-image: url('/kr/event/2023/09/11_gram_go/images/btn_slide2.png');
}

[class*="gramgo-slider"] .swiper-slide{
	padding:0 calc(380 / 1380 * 100%);
}

[class*="gramgo-slider"] .swiper-button-prev{
	left: 355px;
}
[class*="gramgo-slider"] .swiper-button-next{
	right: 355px;
	transform: rotate(180deg);
}

.gramgo-slider-newjeans .swiper-slide{
	padding:0 calc(418 / 1380 * 100%);
}

[class*="gramgo-slider"] .swiper-pagination-bullets{
	position:static;
	margin-top: calc(30 / 1380 * 100%);
}

[class*="gramgo-slider"] .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet{
	background-color:#8b8b8b;
    width: 14px;
  	height: 14px;
  	margin: 0 8px;
}
[class*="gramgo-slider"] .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet-active{
	background-color:#000;
}

@media screen and (max-width: 1480px){
	[class*="gramgo-slider"] .swiper-button-prev{
        left: 24vw;
    }
    [class*="gramgo-slider"] .swiper-button-next{
        right: 24vw;
    }
}

.mdevice [class*="gramgo-slider"]{
	padding:calc(195 / var(--width) * 100%) 0 calc(140 / var(--width) * 100%);
	background-image:url('/kr/event/2023/09/11_gram_go/images/m_img_03.jpg');
}

.mdevice .gramgo-slider-newjeans{
	padding:calc(425 / var(--width) * 100%) 0 calc(264 / var(--width) * 100%);
	background-image:url('/kr/event/2023/09/11_gram_go/images/m_img_04.jpg');
}

.mdevice [class*="gramgo-slider"] .swiper-slide{
	padding:0 calc(80 / var(--width) * 100%);
}

.mdevice [class*="gramgo-slider"] .swiper-button-next, .mdevice [class*="gramgo-slider"] .swiper-button-prev{
	width: 5.8vw;
    height: 5.8vw;
}

.mdevice [class*="gramgo-slider"] .swiper-button-prev{
	left: calc(28 / var(--width) * 100%);
}
.mdevice [class*="gramgo-slider"] .swiper-button-next{
	right: calc(28 / var(--width) * 100%);
}
.mdevice [class*="gramgo-slider"] .swiper-pagination-bullets{
	position:static;
	margin-top: calc(30 / var(--width) * 100%);
}

.mdevice [class*="gramgo-slider"] .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet{
    width: 7px;
  	height: 7px;
  	margin: 0 5px;
}