@charset "UTF-8";

@import "./Paperlogy/stylesheet.css";

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
::-webkit-scrollbar-thumb {
    background: #0c8c4f; /* 스크롤바 막대 색상 */
    border-radius: 12px 12px 12px 12px;
}
::-webkit-scrollbar-track {
  background: transparent;
}

* {box-sizing: border-box;}

html, body {height: 100vh;margin:0;padding:0;}
body {background: #3fb97f;}

header {color: #0c8c4f; position: absolute; top: 0; left: 50%; transform: translateX(-50%); padding-top: 20px; z-index: 1; font-family: 'Paperlogy', sans-serif;}
header h1::before {width: 100%; position: absolute; left:50%; transform: translateX(-50%); z-index: -1; content: attr(data-title); -webkit-text-stroke : 6px #ffffff;text-shadow: 4px 5px 4px #0049277a;}
header span {color: #f0474a;}
@media all and (max-width: 768px) {
  header {width: calc(100% - 140px); left: 20px; transform: translateX(0);}
  header h1.taC {text-align: left !important; font-size: 28px;}
}
@media all and (max-width: 480px) {
  header h1.taC {font-size: 24px;}
}

main {overflow:hidden;}
#wrap {overflow:hidden;display:flex;flex-wrap:nowrap;width:200%;}
#wrap > section {width: 100%; height:100vh;}

.movebtn {border: none; padding-bottom: 16px; color: #ffffff; font-size: 22px; font-weight: 700; font-family: 'Paperlogy', sans-serif; position: absolute; top: 0; z-index: 2; display: block; cursor: pointer; box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.3); transition: all 0.2s; width: 150px; height: 130px; }
.movebtn::after {position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); text-align: center; font-size: 15px; }
.movebtn:hover {width: 170px;}
#next {right: 0; background: #d75a5c; border-radius: 0 0 0 20px;}
#prev {left: 0;background: #3fb97f; border-radius: 0 0 20px 0;}
#next::after {content: '바로가기'}
#prev::after {content: '바로가기'}

#festival {display: flex; align-items: center;}
.map_wrap {position: relative;}
.map_title {position: absolute; z-index: 1; transition: all 0.3s; display: block; width: 18%; text-align: center;}
.map_title::after {content: ''; display: block; width: 104px; height: 57px; background: url(../img/live.png) no-repeat center center/contain; position: absolute; bottom: -65px; left: 50%; transform: translateX(-50%);}
.map_title.ham {top: 23%; left: 12%;}
.map_title.oing {top: 40%; left: 39%;}
.map_title.muzi {top: 55%; left: 73%;}
.map_title.on {transform: translateY(-20px);}
.muzi_title.on {transform: translateY(20px);}

.pop {display: none; position: absolute; z-index: 2;  top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 40px; width: calc(100vw - 80px); height: calc(100vh - 80px); max-height: 790px; overflow: hidden; background: #f0f9e6; border: 4px solid #008560; border-radius: 20px; transition: all 0.4s;}
.pop .pop_wrap {position: relative; width: 100%; height: 100%; border-radius: 10px; display: flex; justify-content: space-between; align-items: flex-start;}
.pop .tit {font-family: 'Paperlogy', sans-serif; padding: 10px 0; font-size: 21px; font-weight: 700;}
.pop_wrap .img {width: 40%; max-width: 650px; height: calc(100% - 100px); border-radius: 10px; position: relative; margin-top: 100px;}
.pop_wrap .img h2 {position: absolute; top: -70px; left: 50%; transform: translateX(-50%);}
#oing .img h2 {top: -85px;}
#ham .img {background: url(../img/ham.jpg) no-repeat top right/cover;}
#oing .img {background: url(../img/oing.jpg) no-repeat 50% 50%/cover;}
#muzi .img {background: url(../img/muzi.jpg) no-repeat 100% 100%/cover;}
.pop_wrap .video {width: calc(60% - 50px); margin-top: 54px; position: relative;}
.pop iframe {width: 100%; height: calc(100% - 100px); border-radius: 10px;}
.pop_wrap .video .notice {width: 90%;position: absolute; border: 1px solid #000000; border-radius: 19px; padding: 6px 12px; background: rgba(0, 0, 0, 0.8); color: #ffffff; text-align: center; bottom: 30px; left: 50%; transform: translateX(-50%);}
.pop .close {position: absolute; color: #ffffff; padding: 8px 20px; background: #008560; border-radius: 30px; top:30px; right: 30px; font-weight: 700; display: block;}
.mappin {
  position: absolute;
  width: 24px; height: 24px;
  background: #D0303C; border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  pointer-events: none;
}
@keyframes pulse {
  0% { transform: translate(-50%, -50%) scale(1);   opacity: 0.6; }
  70%{ transform: translate(-50%, -50%) scale(2.2); opacity: 0;   }
  100%{transform: translate(-50%, -50%) scale(2.2); opacity: 0;   }
}
.mappin::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 100%; height: 100%;
  background: #D0303C; border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0.6; z-index: -1;
  animation: pulse 1.5s ease-out infinite;
}
#ham .mappin {top: 55%; right: 35%;}
#oing .mappin {top: 67%; left: 57%;}
#muzi .mappin {bottom: 14%; right: 14%;}

@media all and (max-width: 1500px) {
   .pop { max-height: 690px;}
}
@media all and (max-width: 1300px) {
  .map_title::after {height: 40px; bottom: -45px;}
  .pop_wrap .img {display: none;}
  .pop .pop_wrap {justify-content: center;}
  .pop_wrap .video {width: 100%; max-width: 1000px; margin-top: 30px;}
}
@media all and (max-width: 980px) {
  .pop { max-height: 590px;}
}
@media all and (max-width: 768px) {
  .movebtn {width: 100px; height: 100px; font-size: 18px;}
  .movebtn::after .movebtn:hover {width: 120px;}
  {font-size: 15px;}
  #festival {justify-content: center;}
  .map_wrap {width: calc(100% - 40px);}
  #map {display: none;}
  .map_title {position: relative; width: calc(100% - 80px); top: auto !important; left: auto !important; margin: 80px auto;}
  .map_title.on {transform: translateY(0) !important;}
  .pop {padding: 30px;width: calc(100vw - 40px);}
  .pop .close {top: 20px;}
}
@media all and (max-width: 680px) {
  .pop { max-height: 460px;}
  .pop iframe {height: calc(100% - 160px); }
  .pop_wrap .video .notice {position: static; transform: translateX(0); margin: 10px auto;}
}
@media all and (max-width: 480px) {
  .pop {padding: 30px 20px;}
}

#traffic {background: #d75a5c;}
#traffic h2 {text-align: center; color: #a70000; font-family: 'Paperlogy', sans-serif; padding: 20px 0; font-size: 32px;}
#traffic h2::before {width: 100%; position: absolute; left:50%; transform: translateX(-50%); z-index: -1; content: attr(data-title); -webkit-text-stroke : 6px #ffffff;text-shadow: 4px 5px 4px #4900007a;}

.tf_wrap {width: calc(100% - 80px); max-width: 1600px; display: flex; flex-wrap: wrap; justify-content: space-between; margin: 10px auto; position: relative;}
.tf-map {position: relative; width: calc((100% - 60px)/3); height: calc(100vh - 150px); max-height: 750px; border-radius: 20px; transition: all 0.4s;}
.tf-map:hover {box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, 0.1);}
.tf-map:nth-of-type(1) {background: url(../img/tf-map01.png) no-repeat 40% 50%/cover;}
.tf-map:nth-of-type(2) {background: url(../img/tf-map02.png) no-repeat 38% 0%/cover;}
.tf-map:nth-of-type(3) {background: url(../img/tf-map03.png) no-repeat 39% 50%/cover;}
.tf-map h3 {text-align: center; font-family: 'Paperlogy', sans-serif; margin-top: 30px;}
.tf-map h3 span {background: #ffffff; padding: 8px 20px; border-radius: 60px; border: 5px solid #f0474a;}
.tf-map .pin {display: block; position: absolute; width: 40px; height: 40px;}
.tf-map .pin span {position: absolute; top: -40px; left: 50%; transform: translate(-50%, 0); font-size: 14px; display: inline-block; width: 120px; background: #f0474a; color: #ffffff; font-weight: 700; text-align: center; padding: 4px 8px; border-radius: 60px; transition: 0.1s;}
.tf-map .pin span::after {content: '';width: 0;height: 0;border-style: solid;border-width: 12px 6px 0px 6px;border-color: #f0474a transparent transparent transparent; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);}
.tf-map:hover .pin span {animation: balloon 1.2s infinite;}
.tf-map:nth-of-type(1) .pin {top: 50%; left: 52%;}
.tf-map:nth-of-type(2) .pin {top: 27%; left: 48%;}
.tf-map:nth-of-type(3) .pin {top: 40%; left: 50%;}
@keyframes balloon {
  0% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, -6px);
  }
  100% {
    transform: translate(-50%, 0);
  }
}

#traffic .pop {max-width: 1600px; background: #fbeeee; border: 4px solid #a70000;}
#traffic .pop .pop_wrap {justify-content: center;}
#traffic .pop_wrap .video {width: 100%; max-width: 1000px; margin-top: 30px;}
#traffic .pop .close {background: #a70000;}

@media all and (max-width: 1000px) {
  #traffic {display: flex; align-items: center; position: relative;}
  #traffic h2 {position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
  .tf-map {height: 400px;}
  .tf-map {box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, 0.1);}
  .tf-map:nth-of-type(2) {background-position: 36% 0%;}
  .tf-map .pin {width: 30px; height: 30px;}
  .tf-map:nth-of-type(1) .pin {top: 50%; left: 50%;}
  .tf-map:nth-of-type(2) .pin {top: 20%; left: 50%;}
  .tf-map:nth-of-type(3) .pin {top: 32%; left: 50%;}
  .tf-map .pin span {top: auto; bottom: -40px; animation: balloon 1.2s infinite;}
  .tf-map .pin span::after {border-width: 0px 6px 12px 6px;border-color: transparent transparent #f0474a transparent; bottom: auto; top: -10px;}
}
@media all and (max-width: 950px) {
  .tf_wrap {height: calc(100% - 140px); align-items: center;}
  .tf-map {width: 100%; height: calc((100% - 60px)/3);}
  .tf-map h3 {margin-top: 20px;}
  .tf-map h3 span {font-size: 16px; padding: 6px 20px; }
  .tf-map:nth-of-type(1) {background-position: 31% 50%;}
  .tf-map:nth-of-type(2) {background-position: 22% 14%;}
  .tf-map:nth-of-type(3) {background-position: 48% 42%;}
  .tf-map:nth-of-type(1) .pin {top: 50%; left: 42%;}
  .tf-map:nth-of-type(2) .pin {top: 32%; left: 39%;}
  .tf-map:nth-of-type(3) .pin {top: 37%; left: 41%;}
}
@media all and (max-width: 768px) {
  #traffic h2 {font-size: 28px;}
}
@media all and (max-width: 480px) {
  #traffic h2 {font-size: 24px;}
}

footer {position: fixed; bottom: 0; width: 100%; padding-bottom: 20px; color: #ffffff;}
@media all and (max-width: 768px) {
  footer {font-size: 14px;}
}