/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-39614
* CODE : Dev - EV00018421 , Prod - EV00006091
* FILE : /kr/event/2023/07/24_water_share/eventMainWaterShare.jsp
* DESC : 정수기 캠페인 이벤트
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2023/08/02				신우용				Created(외부파일 수급,적용)
************************************************************************************
**/

.pure-event-container {
  width: 100%;
}
.pure-event-container .mobile {
  display: none;
}
@media (max-width: 768px) {
  .pure-event-container .mobile {
    display: block;
  }
  
  .container .cont-wrap .pure-event-container .section {
  	padding: 0;
  }
}
.pure-event-container .pc {
  display: block;
}
@media (max-width: 768px) {
  .pure-event-container .pc {
    display: none;
  }
}
.pure-event-container .underline {
  text-decoration: underline;
}
.pure-event-container .font-bold {
  font-weight: bold;
}
.pure-event-container .text-left {
  text-align: left;
}
.pure-event-container .bullet-list {
  margin-top: 24px;
  color: #000;
  font-size: 14px;
  line-height: 24px;
}
@media (max-width: 768px) {
  .pure-event-container .bullet-list {
    font-size: 13px;
    line-height: 21px;
  }
}
.pure-event-container .b-text {
  position: relative;
  margin-top: 2px;
  padding-left: 11px;
  word-break: keep-all;
}
.pure-event-container .section {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}
.pure-event-container .section .image {
  width: 100%;
}
.pure-event-container .section.survey-wrapper {
  margin-top: -1px;
}
.pure-event-container .section .recipe-navi {
  content: "";
  display: block;
  position: absolute;
  bottom: calc(40/1090 * 100%);
  left: 0;
  width: 1px;
  height: 1px;
  cursor: pointer;
}
@media (max-width: 768px) {
  .pure-event-container .section .recipe-navi {
    bottom: calc(270/1090 * 100%);
  }
}
.pure-event-container .section .survey-container {
  display: none;
  position: relative;
  height: fit-content;
  flex-direction: column;
}
.pure-event-container .section .survey-container.active {
  display: flex;
}
.pure-event-container .section .survey-container .survey0 {
  content: "";
  position: absolute;
  top: calc(380/900 * 100%);
  left: calc(400/1380 * 100%);
  width: calc(580/1380 * 100%);
  height: calc(85/900 * 100%);
  cursor: pointer;
}
@media (max-width: 768px) {
  .pure-event-container .section .survey-container .survey0 {
    top: calc(380/900 * 100%);
    left: calc(70/720 * 100%);
    width: calc(580/720 * 100%);
    height: calc(85/900 * 100%);
  }
}
.pure-event-container .section .survey-container .survey1 {
  content: "";
  position: absolute;
  top: calc(455/900 * 100%);
  left: calc(400/1380 * 100%);
  width: calc(290/1380 * 100%);
  height: calc(312/900 * 100%);
  cursor: pointer;
}
@media (max-width: 768px) {
  .pure-event-container .section .survey-container .survey1 {
    top: calc(458/900 * 100%);
    left: calc(70/720 * 100%);
    width: calc(290/720 * 100%);
    height: calc(310/900 * 100%);
  }
}
.pure-event-container .section .survey-container .survey2 {
  content: "";
  position: absolute;
  top: calc(455/900 * 100%);
  left: calc(690/1380 * 100%);
  width: calc(290/1380 * 100%);
  height: calc(312/900 * 100%);
  cursor: pointer;
}
@media (max-width: 768px) {
  .pure-event-container .section .survey-container .survey2 {
    top: calc(458/900 * 100%);
    left: calc(360/720 * 100%);
    width: calc(290/720 * 100%);
    height: calc(310/900 * 100%);
  }
}
.pure-event-container .section .survey-container .survey3 {
  content: "";
  position: absolute;
  top: calc(690/900 * 100%);
  left: calc(400/1380 * 100%);
  width: calc(580/1380 * 100%);
  height: calc(80/900 * 100%);
  cursor: pointer;
}
@media (max-width: 768px) {
  .pure-event-container .section .survey-container .survey3 {
    top: calc(696/900 * 100%);
    left: calc(70/720 * 100%);
    width: calc(580/720 * 100%);
    height: calc(70/900 * 100%);
  }
}
.pure-event-container .section .survey-container .survey4 {
  content: "";
  position: absolute;
  top: calc(620/900 * 100%);
  left: calc(580/1380 * 100%);
  width: calc(220/1380 * 100%);
  height: calc(70/900 * 100%);
  cursor: pointer;
}
@media (max-width: 768px) {
  .pure-event-container .section .survey-container .survey4 {
    top: calc(620/900 * 100%);
    left: calc(250/720 * 100%);
    width: calc(220/720 * 100%);
    height: calc(70/900 * 100%);
  }
}
.pure-event-container .section .survey-container .survey-back {
  content: "";
  position: absolute;
  top: calc(800/900 * 100%);
  left: calc(400/1380 * 100%);
  width: calc(95/1380 * 100%);
  height: calc(40/900 * 100%);
  cursor: pointer;
}
@media (max-width: 768px) {
  .pure-event-container .section .survey-container .survey-back {
    top: calc(800/900 * 100%);
    left: calc(70/720 * 100%);
    width: calc(95/720 * 100%);
    height: calc(40/900 * 100%);
  }
}
.pure-event-container .section .recipe {
  position: absolute;
  top: 0;
  left: calc(330/1380 * 100%);
  width: calc(235/1380 * 100%);
  height: calc(180/208 * 100%);
  cursor: pointer;
}
@media (max-width: 768px) {
  .pure-event-container .section .recipe {
    top: 0;
    left: calc(0/720 * 100%);
    width: calc(237/720 * 100%);
    height: calc(186/208 * 100%);
  }
}
.pure-event-container .section .benefit {
  position: absolute;
  top: 0;
  left: calc(570/1380 * 100%);
  width: calc(235/1380 * 100%);
  height: calc(180/208 * 100%);
  cursor: pointer;
}
@media (max-width: 768px) {
  .pure-event-container .section .benefit {
    top: 0;
    left: calc(238/720 * 100%);
    width: calc(237/720 * 100%);
    height: calc(186/208 * 100%);
  }
}
.pure-event-container .section .prize {
  position: absolute;
  top: 0;
  left: calc(810/1380 * 100%);
  width: calc(235/1380 * 100%);
  height: calc(180/208 * 100%);
  cursor: pointer;
}
@media (max-width: 768px) {
  .pure-event-container .section .prize {
    top: 0;
    left: calc(483/720 * 100%);
    width: calc(237/720 * 100%);
    height: calc(186/208 * 100%);
  }
}
.pure-event-container .section .benefit-link {
  position: absolute;
  top: calc(58/134 * 100%);
  left: calc(454/1380 * 100%);
  width: calc(471/1380 * 100%);
  height: calc(57/134 * 100%);
  cursor: pointer;
}
@media (max-width: 768px) {
  .pure-event-container .section .benefit-link {
    top: calc(58/134 * 100%);
    left: calc(125/720 * 100%);
    width: calc(471/720 * 100%);
    height: calc(57/134 * 100%);
  }
}
.pure-event-container .section.youtubes .player-wrapper {
  position: absolute;
  top: calc(300/750 * 100%);
  left: calc(330/1380 * 100%);
  width: calc(720/1380 * 100%);
  height: calc(405/750 * 100%);
}
@media (max-width: 768px) {
  .pure-event-container .section.youtubes .player-wrapper {
    top: calc(300/750 * 100%);
    left: 0;
    width: 100%;
    /*height: calc(326/750 * 100%);*/
  }
}

.survey-container.active .popup-wrap{
  display: block;
  height: 90%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: left;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}

.survey-container .popup-wrap #frm{
  height: 100%;
}
.contents.event .ev-detail-wrap .ev-detail-con .ev-cont .survey-container .popup-wrap .pop-conts, .survey-container .popup-wrap .pop-conts{
  max-height: calc(100% - 210px);
}

.contents.event .ev-detail-wrap .ev-detail-con .ev-cont .survey-container .popup-wrap .conts{
  display:inline-block;
  padding-bottom:0;
}

.contents.event .ev-detail-wrap .ev-detail-con .ev-cont .survey-container .popup-wrap .btn-group{
  position:static;
}

.contents.event .ev-detail-wrap .ev-detail-con .ev-cont .survey-container .popup-wrap .btn-group .btn:only-child{
  width:auto;
  padding: 11px 31px;
  font-size: 16px;
  line-height: 26px;
  border: 1px solid #ea1917;
  border-radius: 26px;
  background-color: #ea1917;
}

.survey-container #agree1_f table tbody tr td:last-child{
	font-size:20px;
  	line-height:30px;
	text-decoration: underline;
}

@media (max-width: 768px) {
  .survey-container.active .popup-wrap{
    height: 100%;
    top: 0;
    left: 0;
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
  }
  
  .survey-container .layer-join-pop .pop-footer.center{
    position:absolute;
    z-index:10;
  }

  .contents.event .ev-detail-wrap .ev-detail-con .ev-cont .survey-container .popup-wrap .pop-conts, .survey-container .popup-wrap .pop-conts{
    max-height: calc(100% - 118px);
    height: auto !important;
  }

  .contents.event .ev-detail-wrap .ev-detail-con .ev-cont .survey-container .popup-wrap .btn-group .btn:only-child{
    width: 100%;
    padding: 15px 16px;
    line-height: 24px;
  }
  .survey-container #agree1_f table tbody tr td:last-child{
      font-size:16px;
      line-height:24px;
  }
}

.pure-event-container .section .voice-link { 
    position: absolute; 
    top: calc(543/1279 * 100%); 
    left: calc(398/1380 * 100%); 
    width: calc(292/1380 * 100%); 
    height: calc(142/1279 * 100%); 
    cursor: pointer; 
} 
@media (max-width: 768px) { 
    .pure-event-container .section .voice-link { 
        top: calc(543/1279 * 100%); 
        left: calc(70/720 * 100%); 
        width: calc(292/720 * 100%); 
        height: calc(142/1279 * 100%); 
    } 
} 
.pure-event-container .section .custom-link { 
    position: absolute; top: calc(543/1279 * 100%); 
    left: calc(692/1380 * 100%); width: calc(292/1380 * 100%); 
    height: calc(142/1279 * 100%); cursor: pointer; 
} 
@media (max-width: 768px) { 
    .pure-event-container .section .custom-link { 
        top: calc(543/1279 * 100%); 
        left: calc(360/720 * 100%); 
        width: calc(292/720 * 100%); 
        height: calc(142/1279 * 100%); 
    }
}