@charset "utf-8";

.PC_ver {width: 100%;height: auto;}
.mobile_ver{display: none;}
.tap{content:"";overflow:hidden;display:block;width:940px;clear:both;}
.tap li{float:left;height:85px;cursor:pointer;}
.tap li a{display:block;}
.tap li img{height:30px;}
@media screen and (max-width: 1023px) {
  .PC_ver img {display: none;}
  .mobile_ver {display:block;width:100%;}
  .mobile_ver img {display: block;  width:100%;}
  .tap{width:100%;}
  .tap li{width:50%;height:auto;}
  .tap li img{height:100%;}
  .holidays_thema .tab_menu
  .swiper-thumbnails{font-size:0;}
  .holidays_thema .tab_menu .swiper-thumbnails:after{content:'';display:block;clear:both;}
  .holidays_thema .tab_menu .swiper-thumbnails button img{width:100%;}
  .holidays_thema .tab_menu .swiper-thumbnails button
  .img_on{display:none;}
  .holidays_thema .tab_menu .swiper-thumbnails button.is-active img{display:none;}
  .holidays_thema .tab_menu .swiper-thumbnails button.is-active
  .img_on{display:block;}
  .holidays_thema
  .swiper-container{width:100%;margin-top:10px;}
  .holidays_thema .swiper-container .swiper-wrapper li{width:100%;text-align:center;}
  .holidays_thema .swiper-container .swiper-wrapper img{display:inline-block;}
  .banner{display:block;}
}

/*도레미*/
img{border:0 none;}

.type_w{display:block;}
.type_m{display:none;}

.doremimk .tab_menu .swiper-thumbnails{font-size:0;}
.doremimk .tab_menu .swiper-thumbnails:after{content:'';display:block;clear:both;}
.doremimk .tab_menu .swiper-thumbnails button{display:inline-block;width:20%;vertical-align:bottom;}
.doremimk .tab_menu .swiper-thumbnails button img{width:100%;}
.doremimk .tab_menu .swiper-thumbnails button .img_on{display:none;}
.doremimk .tab_menu .swiper-thumbnails button.is-active img{display:none;}
.doremimk .tab_menu .swiper-thumbnails button.is-active .img_on{display:block;}
.doremimk .swiper-container{width:100%;}
.doremimk .swiper-container .swiper-wrapper li{height:auto !important;}

@media screen and (max-width: 1023px) {
  .type_w{display:none;}
  .type_m{display:block;}
}

/*여행가는 달*/

.main_quick {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 100;
  transition: bottom .5s ease-in-out;
}

.main_quick .inr {
  position: relative;
  width: 940px;
  margin: 0 auto;
}

.event_hojung {
  position: absolute;
  right: -155px;
  bottom: 470px;
  max-width: 174px;
}

.event_hojung img {
  width:100%;
}

.hojong_area {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
}

.event_hojung img:hover {
  content: url("https://support.visitkorea.or.kr/img/call?cmd=TEMP_VIEW&name=86ff9b83-ba9b-48a1-9726-1f14c4e5fa52.png");
}
.event_close {
  text-align:center;
  background-color:#000;
  color:#fff;
  padding: 5% 0%;
  font-weight: bold;
}

.inr_2 {
  position: relative;
  width: 940px;
  margin: 0 auto;
}

.ev1 {
  border: 5px solid black;
  position: absolute;
  right: -154px;
  bottom: 215px;
  width: 174px;
  height: 273px;
  background: url('../resources/images/sub/p_floating_1.png');
  text-indent: -9999px;
}

@media screen and (max-width: 1023px) {
  .event_hojung {
    position: fixed;
    left: 50%;
    top: 40%;
    display: inline-block;
    transform: translate(-50%, -50%);
    cursor: pointer;
    text-align: center;
    width: 100%;
    max-width: 238px;
  }
}

section, div, article, ul, li, dl, dt, dd, h3, h4, p, span, img {padding: 0; margin: 0; /* letter-spacing: -0.05em; */ box-sizing: border-box; word-break: keep-all;}
li {list-style: none;}

.screen-out {position:absolute; top:0; left: 0; width: 0; height: 0; font-size: 0 ; color: transparent; }

.main-floating-banner {
  position: fixed;
  width: 334px;
  float:right;
  right: 5%;
  top: 270px;
  z-index: 100;
  transition: bottom .5s ease-in-out;
}
.main-floating-banner img {width: 100%;}
.main-floating-banner p {width: 100%; height: 100%; margin-top: 7.6%;}
.main-floating-banner button {position:absolute; top: 0; right: -2.7%; width: 52px; height: 52px; background: url('../resources/images/sub/icon_close.png') 0 0 no-repeat; z-index: 10; background-size: contain}
.main-floating-banner a {position:absolute; bottom: 10%; left: 11%; width: 73%; height: 10%;}

@media all and (max-width:1024px) {
  section, section img {width: 100%;}
  .main-floating-banner {width: 43.5%}
  .main-floating-banner button {width: 18%; height: 13%; }
}

/* section 1 */
body.open-modal {overflow: hidden}
.content {position: relative;}
.content a, .content button {position: absolute;}
.content.term button {bottom: 12%; left: 50%; transform: translateX(-50%); width: 38%; height: 8%;}
.content.term li.on {opacity: 1}
.content.term li {position:absolute; top: 20.2%; opacity: 0}
.content.term li:nth-of-type(1) {left: 6.8%; width: 17.3%}
.content.term li:nth-of-type(2) {left: 24.8%; width: 16.7%;}
.content.term li:nth-of-type(3) {left: 42%; width: 17.1%;}
.content.term li:nth-of-type(4) {left: 60.3%; width: 16.7%;}
.content.term li:nth-of-type(5) {left:78%; width: 16.7%;}

.content.guide a {bottom: 1%; left: 49.5%; transform: translateX(-50%); width: 56%; height: 11%;}
.content img {margin-top: -1px;}

.modal {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000;}
.modal--active {display: block}
.modal-backdrop, .modal-wrapper {top: 0; left: 0; z-index: 10; width: 100%; min-height: 100%; pointer-events: none;}
.modal-wrapper {overflow:auto; position: absolute; height: auto;}
.modal-backdrop {position: fixed; height: 100%; background: rgba(0,0,0, 0.6); pointer-events: auto;}
.modal-container {position: absolute; top: 0; left: 0; z-index: 20; width: 100%; height: 100%; pointer-events: auto;}
.modal-content {overflow-y: scroll; position:relative; height: 100%; margin: 0 auto; text-align: center;}
.modal-content:before {display: inline-block; vertical-align: middle; width:100%; height: 11%; content: "";}
.modal .close {position:absolute; top: -33px; right: -33px; width: 69px; height: 69px; background: url('../resources/images/sub/icon_close.png') 0 0 no-repeat; z-index: 10;}
.modal .modal__container {display:inline-block; position: relative;}

#tripPopImg {cursor: pointer;}
#openTripEventPop {cursor: pointer;}
.find-modal .item > img {position: absolute; bottom: 42%; left:50%; width:54.8%; transform: translateX(-50%);}
.find-modal .item button {position:absolute; bottom: 9%; left: 50%; width: 72%; height: 10.8%; transform: translateX(-50%);}

.information-modal .modal-content {
  overflow-y: scroll;
  color: #303030;
}

.information-modal form {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box
}

.information-modal .name input, .information-modal .phone-number input, .information-modal .policy p, .information-modal .consignment p {
  position: absolute;
  padding: 0 18px;
  font-size: 24px;
  border: 3px solid #000000;
  border-radius: 7px;
  box-shadow: 10px 10px 0 0 rgba(206, 206, 206, .4);
}

.information-modal .name input {
  width: 77.8%;
  top: 28.7%;
  left: 11%;
}

.information-modal .name input, .information-modal .phone-number input {
  height: 5.8%;
}

.information-modal .number-first input {
  width: 21%;
  top: 40.8%;
  left: 11%;
}

.information-modal .number-middle input {
  top: 40.8%;
  left: 34%;
}

.information-modal .number-middle input, .information-modal .number-last input {
  width: 26.7%;
}

.information-modal .number-last input {
  top: 40.8%;
  left: 62%;
}

.information-modal .policy p {
  top: 54%;
}

.information-modal .policy p, .information-modal .consignment p {
  overflow-y: scroll;
  left: 11%;
  width: 77.8%;
  height: 11%;
  padding: 18px;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -.03em;
  text-align: left;
  box-sizing: border-box;
}

.information-modal .policy p span, .information-modal .consignment p span {
  font-size: 17px;
  font-weight: 700;
}

.information-modal .consignment p {
  top: 72.5%;
}

.information-modal .submit {
  position: absolute;
  bottom: 6.3%;
  left: 14%;
  width: 72.6%;
  height: 7.3%;
}

.information-modal .checkbox {
  position: absolute;
  top: 50%;
  left: 82%;
  width: 6%;
  height: 3.2%;
  opacity: 0;
  z-index: 10;
  cursor: pointer;
  margin: 0;
  overflow: auto;
  clip: auto;
}

.information-modal .checkbox + span:before {
  display: block;
  position: absolute;
  top: 50%;
  left: 82%;
  width: 6%;
  height: 3.2%;
  border: 3px solid #000000;
  border-radius: 7px;
  box-shadow: 5px 5px 0 0 rgba(206, 206, 206, .4);
  content: '';
  cursor: pointer;
  box-sizing: border-box
}

.information-modal .checkbox:checked + span:after {
  display: block;
  position: absolute;
  top: 50%;
  left: 82%;
  width: 38px;
  height: 38px;
  background: url('../resources/images/sub/icon_checkbox.png') center center no-repeat;
  content: '';
}

.lottery-modal .checkbox, .lottery-modal .checkbox + span:before, .lottery-modal .checkbox:checked + span:after {height: 3%;}

.confirm-modal .checkbox {top: 46.2%;}
.confirm-modal .checkbox + span:before {top: 46.2%;}
.confirm-modal .checkbox:checked + span:after {top: 46.2%;}
.confirm-modal .name input {top: 22.2%;}
.confirm-modal .number-first input, .confirm-modal .number-middle input, .confirm-modal .number-last input {top: 35.8%;}
.confirm-modal .policy p {top: 51.1%;}
.confirm-modal .consignment p {top: 70.8%;}
.confirm-modal .submit {bottom: 7.9%;}

.giveaway-modal a {position: absolute; top: 81.5%; left: 9%; width: 82%; height: 10%; }

.winning-modal .item {position: absolute; top: 62.7%; width: 100%; text-align: center}
.winning-modal .item img {width: 60.2%;}

.accumulate-modal li {position: absolute;}
.accumulate-modal li .gray {display: block;}
.accumulate-modal li .color {display: none}
.accumulate-modal li.on .color {display: block}
.accumulate-modal li.on .gray {display: none}
.accumulate-modal li:nth-child(1), .accumulate-modal li:nth-child(2), .accumulate-modal li:nth-child(3) {top: 25.8%;}
.accumulate-modal li:nth-child(1) {left: 10%; width: 25.1%;}
.accumulate-modal li:nth-child(2) {left: 37.8%}
.accumulate-modal li:nth-child(2), .accumulate-modal li:nth-child(4), .accumulate-modal li:nth-child(5) {width: 24.8%;}
.accumulate-modal li:nth-child(3) {top: 26.1%; left: 64.6%; width: 25.4%;}
.accumulate-modal li:nth-child(4) {top: 61%; left: 24.5%;}
.accumulate-modal li:nth-child(5) {top: 60.5%; left: 52.8%;}

input {
  margin: 0;
  box-sizing: border-box;
}

@media all and (max-width: 767px) {
  /* 모바일 최대 */
  .content.term button {width: 56%;}
  .content.term li {top: 19.9%}
  .content.term li:nth-of-type(1) {left: 4.7%; width: 18%;}
  .content.term li:nth-of-type(2) {left: 23.7%; width: 17.3%;}
  .content.term li:nth-of-type(3) {width: 17.9%;}
  .content.term li:nth-of-type(4) {top: 20%; left: 60.8%; width: 17.3%; }
  .content.term li:nth-of-type(5) {top: 19.8%; left: 78.8%; width: 18.1%;}

  .content.guide a {bottom: 5%; left: 49.5%; width: 80.5%; height: 11.3%;}

  .modal-content img {width: 100%;}
  .modal-content:before {height: 115px;}
  .modal .close { top: -18px; right: 5px; width: 11.2%; height: 11.2%; background-size: contain}
  .modal .modal__container {padding: 0 15px; box-sizing: border-box;}
  .information-modal .name input, .information-modal .phone-number input, .information-modal .policy p, .information-modal .consignment p {padding:10px; font-size: 14px; line-height: 1.4; box-shadow: 5px 5px 0 0 rgba(206, 206, 206 , .4);}
  .confirm-modal .number-first input, .confirm-modal .number-middle input, .confirm-modal .number-last input {padding: 0 10px;}
  .confirm-modal .policy p, .confirm-modal .consignment p {font-size: 12px;}
  .information-modal .policy p span, .information-modal .consignment p span {font-size: 14px;}
  .find-modal__container figure {padding: 0 18px;}
  .find-modal__container p > img {width: 50%;}
  .find-modal__container .content a {width: 64%;}

  .information-modal .name input {left: 7%; width: 85%;}
  .information-modal .number-first input {left: 7%; width: 23.9%;}
  .information-modal .number-middle input, .information-modal .number-last input {width: 28.7%;}
  .information-modal .number-middle input {left: 33%;}
  .information-modal .number-last input {left: 63.3%;}
  .information-modal .policy p, .information-modal .consignment p {left: 7%; width: 85%;}
  .information-modal .checkbox, .information-modal .checkbox + span:before, .information-modal .checkbox:checked + span:after {width: 7.6%; height: 3.8%; left: 83.7%; background-size: 65%;}

  .lottery-modal .modal-content .checkbox, .lottery-modal .modal-content .checkbox + span:before, .lottery-modal .modal-content .checkbox:checked + span:after {height: 3.4%; left: 83.7%; top: 50.3%;}
  .lottery-modal .policy p { top: 54.9%;}
  .lottery-modal .submit {bottom: 6.2%; left: 10%; width: 79.6%;}

  .accumulate-modal li:nth-child(4) {top: 58%;}
  .accumulate-modal li:nth-child(5) {top: 57.5%;}
}

#tripPop, #findModal, #infoModal, #winningModal, #loseModal, #endModal, #beWinningModal, #finalWinningModal {
  display : none;
}

/* 여행재생 플로팅 배너 */
.main_floating_banner {
  position: absolute;
  top: 250px;
  left: calc(50% + 495px);
  width: 230px;
}

.main_floating_banner img {
  width: 100%;
}

.main_floating_banner p {
  width: 100%;
  height: 100%;
}

.main_floating_banner .close {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
}

.main_floating_banner .cookie_check {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 230px;
  height: 38px;
}

.main_floating_banner a {
  position: absolute;
  top: 7%;
  left: 0;
  width: 100%;
  height: 85%;
}

.main_floating_banner .screen_out {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  font-size: 0;
  color: transparent;
}

@media all and (max-width: 1450px) {
  .main_floating_banner {
    display: none;
  }

  .main_floating_modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
  }

  .main_floating_modal .modal-backdrop,
  .main_floating_modal .modal-wrapper {
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    min-height: 100%;
    pointer-events: none;
  }

  .main_floating_modal .modal-wrapper {
    overflow: auto;
    position: absolute;
    height: auto;
  }

  .main_floating_modal .modal-backdrop {
    position: fixed;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    pointer-events: auto;
  }

  .main_floating_modal .modal-container {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    width: 100%;
    height: 100%;
    pointer-events: auto;
  }

  .main_floating_modal .modal-content {
    position: relative;
    height: 100%;
    margin: 0 auto;
  }

  .main_floating_modal .modal-content:before {
    height: 115px;
  }

  .main_floating_modal .modal-content:before {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    height: 11%;
    content: "";
  }

  .main_floating_modal .modal__container {
    display: inline-block;
    position: absolute;
    right: 20px;
    top: 115px;
    width: 260px;
    padding: 0 15px;
    box-sizing: border-box;
  }

  .main_floating_modal img {
    width: 100%;
  }

  .main_floating_modal .close {
    position: absolute;
    top: 0;
    right: 3%;
    width: 16%;
    height: 6%;
  }

  .main_floating_modal .cookie_check {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 38px;
  }

  .main_floating_modal a {
    position: absolute;
    top: 5.8%;
    left: calc(50% - 115px);
    width: 230px;
    height: 86%;
  }

  .main_floating_modal {
    display: block;
  }

  .main_floating_modal .screen_out {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    font-size: 0;
    color: transparent;
  }
}