html { font-size: 16px; color: #000; background-color: #b2b8c4;}

.uk-section { position: relative; overflow: hidden;}

.uk-logo { width: 10rem; height: auto; margin-top: 2rem;}

footer { background-color: #000; position: absolute; width: 100%; }
footer .uk-logo { min-height: auto;}
footer p, footer p a { font-size: 11px !important; font-weight: 300; color: #7f7f7f !important; margin: 10px 5px;}


/*  커스텀 */
.view-desktop { display: flex;}
.view-mobile { display: none;}

.nav .uk-navbar-nav { margin: 0 auto;}

.intro { padding-top: 0; padding-bottom: 0; background-image: url("https://img.vogue.co.kr/vogue/event/210916-sulwhasoo/top.jpg"); background-size: cover; background-position: center;}
.intro iframe { position: absolute; top: 0; left: 0; width: 100%; height: 120%;}
.intro-img { width: 100%; height: 100%; background-image: url("https://img.vogue.co.kr/vogue/event/210916-sulwhasoo/intro.png"); background-position: center; background-size: contain;}
.topic-1 > div { padding: 6rem 0;}
.top { background-image: url(https://img.vogue.co.kr/vogue/event/210916-sulwhasoo/top-bg.jpg); background-size: cover;}
.top-gra { background: #b2b8c4;
background: -webkit-linear-gradient(to bottom, #b2b8c4, transparent);
background: linear-gradient(to bottom, #b2b8c4, transparent);
width: 100%; height: 50%; position: absolute; top: 0; left: 0; }
.top .main-tit { z-index: 9; width: 100%; margin: 0;}
h2 { margin-bottom: 3rem; }
h3 { margin-bottom: 3rem;}
video { width: 100%;}

#content-01 { background: #b2b8c4;
background: -webkit-linear-gradient(to bottom, #b2b8c4, #b2b8c4, #b2b8c4, #c07443, #c07443);
background: linear-gradient(to bottom, #b2b8c4, #b2b8c4, #b2b8c4, #c07443, #c07443); 
/*background-image: url(images/content-01-bg.jpg); background-size: contain; background-repeat: repeat-x;*/}
#content-01 .content-grid1 { margin-left: -100px; margin-right: -100px; margin-bottom: 5rem;}
#content-01 .content-img { padding-left: 0;}
#content-01 .content-grid2 { /*margin-left: -100px;*/ margin-right: -100px; margin-bottom: 2rem;}
#content-01 .content-grid2 .content-img { margin-top: 20%; margin-left: -5%;}

#content-02 { background: #ffe9a0;
background: -webkit-linear-gradient(to bottom, #ffe9a0, #f5a71f);
background: linear-gradient(to bottom, #ffe9a0, #f5a71f);
/*background-image: url(images/content-02-bg.jpg); background-size: contain; background-repeat: repeat-x;*/}
#content-02 .content-grid { margin-left: -100px; margin-right: -100px; margin-top: 5rem;}

.history { padding-left: 0; padding-right: 0;}
.history .uk-grid>* { padding-right: 0;}
.history .history-left { width: 30%;}
.history .uk-tab { width: 100%;}
.history .uk-tab li { width: 100%; height: 8rem; background-size: contain; background-repeat: no-repeat;}

/*.history .uk-tab li { width: 10rem; height: 8rem; background-size: contain; background-repeat: no-repeat;}*/
.history a { height: 100%;}
.history .uk-tab>.uk-active>a { border-right: 2px solid #d97942;}
.history .history-1 { background-image: url("https://img.vogue.co.kr/vogue/event/210916-sulwhasoo/history1-off.png");}
.history .history-2 { background-image: url("https://img.vogue.co.kr/vogue/event/210916-sulwhasoo/history2-off.png");}
.history .history-3 { background-image: url("https://img.vogue.co.kr/vogue/event/210916-sulwhasoo/history3-off.png");}
.history .history-4 { background-image: url("https://img.vogue.co.kr/vogue/event/210916-sulwhasoo/history4-off.png");}
.history .history-1.uk-active { background-image: url("https://img.vogue.co.kr/vogue/event/210916-sulwhasoo/history1-on.png");}
.history .history-2.uk-active { background-image: url("https://img.vogue.co.kr/vogue/event/210916-sulwhasoo/history2-on.png");}
.history .history-3.uk-active { background-image: url("https://img.vogue.co.kr/vogue/event/210916-sulwhasoo/history3-on.png");}
.history .history-4.uk-active { background-image: url("https://img.vogue.co.kr/vogue/event/210916-sulwhasoo/history4-on.png");}
.history .history-view-1 { margin-top: -0.5;}
.history .history-view-2 { margin-top: 7.5rem;}
.history .history-view-3 { margin-top: 15.5rem;}
.history .history-view-4 { margin-top: 23.5rem;}

.history-video { padding-right: 30px;}

/*#content-03 { background-image: url(images/content-03-bg.jpg); background-size:cover;}*/
#content-03 { background: -webkit-linear-gradient(to bottom, #b2b8c4, #b2b8c4, #e0a977, #e0a977, #e0a977);
background: linear-gradient(to bottom, #b2b8c4, #b2b8c4, #e0a977, #e0a977, #e0a977);}
#content-03 .content-grid1 { margin-left: -100px; margin-right: -100px; margin-bottom: 5rem;}
#content-03 .content-grid1 .content-img { padding-right: 100px; padding-left: 0;}
#content-03 .content-grid2 { margin-left: -100px; margin-right: -100px;}
#content-03 .content-grid2 .content-img { padding-left: 100px; padding-right: 0;}
#content-03 svg { position: absolute; width: 100%; height: 100%; top: 0;}
#content-03 .c3-txt { margin-bottom: 5rem;}


.btn { padding-bottom: 0 !important; height: 26rem; position: relative; }
.btn .container { margin: 0 auto; display: inline-block;}
.btn a {position: absolute; left: 50%; margin-left: -113px; bottom: 8rem;}


@media (max-width: 1100px) {
	.intro { height: 0; padding-bottom: 120%;}
	.intro .uk-cover-container { position: absolute; width: 100%; height: 100%; min-height: inherit !important;}
	
	#content-01 .content-grid1 { margin-left: -30px; margin-right: -30px; margin-bottom: 5rem;}
	#content-01 .content-grid2 { margin-left: -30px; /*margin-right: -30px;*/ margin-bottom: 2rem;}
	#content-02 .content-grid { margin-left: -30px; margin-right: -30px; margin-top: 5rem;}
	#content-03 .content-grid1 { margin-left: -30px; }
	#content-03 .content-grid2 { margin-right: -30px;}
	
	.history .uk-tab { margin-inline-end:0; margin-inline-start: 0; margin-left: 0; margin-right: 0; flex-direction: column;}
	.history .uk-tab li { height: 7rem;}
	.history .uk-tab>* { padding-left: 0; padding-right: 0;}
	.history .uk-tab>*>a { border-bottom: 0; border-right: 2px solid #fff;}
	.history .uk-tab::before {border: 0;}
	.history .history-view-2 { margin-top: 7rem;}
	.history .history-view-3 { margin-top: 14rem;}
	.history .history-view-4 { margin-top: 21rem;}
}

@media (max-width: 639px) {
	.view-desktop { display: none;}
	.view-mobile { display: block;}
	
	.top-gra { height: 30%; opacity: 0.5; }
	.topic-1 > div { padding: 4rem 0;}
	h2 { margin-bottom: 2rem; }
	h3 { margin-bottom: 2rem;}
	
	#content-01 .content-img { padding-left: 30px; padding-top: 2rem;}
	#content-01 .content-grid2 { margin-right: -30px;}
	#content-01 .content-grid2 .content-img { margin-top: 0; margin-left: 0;}
	/*#content-01 .content-grid2 .content-img { padding-left: 0;}*/
	#content-03 .content-grid1 { margin-right: -30px; }
	#content-03 .content-grid1 .content-img { padding-left: 30px; padding-right: 30px; padding-top: 2rem;}
	#content-03 .content-grid2 .content-img { padding-left: 30px; padding-bottom: 2rem; padding-right: 30px;}
	#content-03 .content-grid2 { margin-left: -30px; }
	#content-03 .c3-txt { display: none;}
	
	.history { padding-left: 30px; padding-right: 30px; padding-top: 2rem;}
	.history .uk-grid { margin-left: -20px;}
	.history .uk-tab li { height: 8rem; }
	.history .uk-width-expand\@s { flex: 1; flex-grow: 1; flex-shrink: 1; flex-basis: 0%;}
	.history .history-view-1 { margin-top: 0;}
	.history .history-view-2 { margin-top: 0;}
	.history .history-view-3 { margin-top: 0;}
	.history .history-view-4 { margin-top: 0;}
	
	.history .history-left { width: 100%;}
	.history .history-left li { width: 25%; margin: 0 -3px; display: inline-block; border-bottom: 2px solid #fff; height: 0; padding-bottom: 20%;}
	.history .history-left .uk-active { border-bottom: 2px solid #d97942;}
	.history .history-left a { border-right: 0; height: 100%; position: absolute; width: 100%;}
	.history .history-right { margin-top: 1rem;}
	.history .uk-tab>.uk-active>a { border-right: 0; }
	.history .uk-tab { display: block;}
	.history .history-1 { background-image: url("https://img.vogue.co.kr/vogue/event/210916-sulwhasoo/mo/history1-off.png");}
	.history .history-2 { background-image: url("https://img.vogue.co.kr/vogue/event/210916-sulwhasoo/mo/history2-off.png");}
	.history .history-3 { background-image: url("https://img.vogue.co.kr/vogue/event/210916-sulwhasoo/mo/history3-off.png");}
	.history .history-4 { background-image: url("https://img.vogue.co.kr/vogue/event/210916-sulwhasoo/mo/history4-off.png");}
	.history .history-1.uk-active { background-image: url("https://img.vogue.co.kr/vogue/event/210916-sulwhasoo/mo/history1-on.png");}
	.history .history-2.uk-active { background-image: url("https://img.vogue.co.kr/vogue/event/210916-sulwhasoo/mo/history2-on.png");}
	.history .history-3.uk-active { background-image: url("https://img.vogue.co.kr/vogue/event/210916-sulwhasoo/mo/history3-on.png");}
	.history .history-4.uk-active { background-image: url("https://img.vogue.co.kr/vogue/event/210916-sulwhasoo/mo/history4-on.png");}
	
	.history-video { height: 0; padding-bottom: 104%;}
	
	.btn { height: 14rem;}
	.btn .container { zoom: 0.6;}
	.btn a { width: 10em; margin-left: -3em; bottom: 2rem;}
	.btn img { width: 150px; margin-left: -75px; bottom: 1rem;}
}

@media (max-width: 414px) {
	.history .uk-grid>* { padding-left: 20px;}
}

/* swiper */
.swiper-txt { text-align: center;}
.swiper {
        width: 85%;
    height: 0;
    padding-bottom: 114% !important;
    /*padding-left: 10% !important;*/
      }
.swiper-wrapper { position: absolute !important;}

      .swiper-slide {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 30px;
        font-size: 22px;
        font-weight: bold;
        color: #fff; background-size: cover; background-color: transparent !important;
      }

      .swiper-slide:nth-child(1n) {
        background-color: rgb(206, 17, 17); background-image: url("https://img.vogue.co.kr/vogue/event/210916-sulwhasoo/card/1.jpg"); 
      }

      .swiper-slide:nth-child(2n) {
        background-color: rgb(0, 140, 255); background-image: url("https://img.vogue.co.kr/vogue/event/210916-sulwhasoo/card/2.jpg");
      }

      .swiper-slide:nth-child(3n) {
        background-color: rgb(10, 184, 111); background-image: url("https://img.vogue.co.kr/vogue/event/210916-sulwhasoo/card/3.jpg");
      }

      .swiper-slide:nth-child(4n) {
        background-color: rgb(211, 122, 7); background-image: url("https://img.vogue.co.kr/vogue/event/210916-sulwhasoo/card/4.jpg");
      }

      .swiper-slide:nth-child(5n) {
        background-color: rgb(118, 163, 12); background-image: url("https://img.vogue.co.kr/vogue/event/210916-sulwhasoo/card/5.jpg");
      }

      .swiper-slide:nth-child(6n) {
        background-color: rgb(180, 10, 47); background-image: url("https://img.vogue.co.kr/vogue/event/210916-sulwhasoo/card/6.jpg");
      }

/* wave */
.container {
  position: relative;
  width: 10em;
  height: 5em;
  font-size: 50px;
  overflow: hidden;
}

.wave {
  border-width: 0.1em;
  border-style: solid;
  position: absolute;
  -webkit-animation: wave 1500ms infinite alternate;
          animation: wave 1500ms infinite alternate;
  transform: rotate(-44.5deg);
}
.wave:nth-child(1) {
  width: 9.5125em;
  height: 9.5125em;
  bottom: -4.75625em;
  left: 0.24375em;
  -webkit-animation-delay: 75ms;
          animation-delay: 75ms;
  border-color: transparent transparent #fff #fff;
  border-radius: 9.5125em;
}
.wave:nth-child(2) {
  width: 9.025em;
  height: 9.025em;
  bottom: -4.5125em;
  left: 0.4875em;
  -webkit-animation-delay: 150ms;
          animation-delay: 150ms;
  border-color: transparent transparent rgba(255, 255, 255, 0.90476) rgba(255, 255, 255, 0.90476);
  border-radius: 9.025em;
}
.wave:nth-child(3) {
  width: 8.5375em;
  height: 8.5375em;
  bottom: -4.26875em;
  left: 0.73125em;
  -webkit-animation-delay: 225ms;
          animation-delay: 225ms;
  border-color: transparent transparent rgba(255, 255, 255, 0.85714) rgba(255, 255, 255, 0.85714);
  border-radius: 8.5375em;
}
.wave:nth-child(4) {
  width: 8.05em;
  height: 8.05em;
  bottom: -4.025em;
  left: 0.975em;
  -webkit-animation-delay: 300ms;
          animation-delay: 300ms;
  border-color: transparent transparent rgba(255, 255, 255, 0.80952) rgba(255, 255, 255, 0.80952);
  border-radius: 8.05em;
}
.wave:nth-child(5) {
  width: 7.5625em;
  height: 7.5625em;
  bottom: -3.78125em;
  left: 1.21875em;
  -webkit-animation-delay: 375ms;
          animation-delay: 375ms;
  border-color: transparent transparent rgba(255, 255, 255, 0.7619) rgba(255, 255, 255, 0.7619);
  border-radius: 7.5625em;
}
.wave:nth-child(6) {
  width: 7.075em;
  height: 7.075em;
  bottom: -3.5375em;
  left: 1.4625em;
  -webkit-animation-delay: 450ms;
          animation-delay: 450ms;
  border-color: transparent transparent rgba(255, 255, 255, 0.71429) rgba(255, 255, 255, 0.71429);
  border-radius: 7.075em;
}
.wave:nth-child(7) {
  width: 6.5875em;
  height: 6.5875em;
  bottom: -3.29375em;
  left: 1.70625em;
  -webkit-animation-delay: 525ms;
          animation-delay: 525ms;
  border-color: transparent transparent rgba(255, 255, 255, 0.66667) rgba(255, 255, 255, 0.66667);
  border-radius: 6.5875em;
}
.wave:nth-child(8) {
  width: 6.1em;
  height: 6.1em;
  bottom: -3.05em;
  left: 1.95em;
  -webkit-animation-delay: 600ms;
          animation-delay: 600ms;
  border-color: transparent transparent rgba(255, 255, 255, 0.61905) rgba(255, 255, 255, 0.61905);
  border-radius: 6.1em;
}
.wave:nth-child(9) {
  width: 5.6125em;
  height: 5.6125em;
  bottom: -2.80625em;
  left: 2.19375em;
  -webkit-animation-delay: 675ms;
          animation-delay: 675ms;
  border-color: transparent transparent rgba(255, 255, 255, 0.57143) rgba(255, 255, 255, 0.57143);
  border-radius: 5.6125em;
}
.wave:nth-child(10) {
  width: 5.125em;
  height: 5.125em;
  bottom: -2.5625em;
  left: 2.4375em;
  -webkit-animation-delay: 750ms;
          animation-delay: 750ms;
  border-color: transparent transparent rgba(255, 255, 255, 0.52381) rgba(255, 255, 255, 0.52381);
  border-radius: 5.125em;
}
.wave:nth-child(11) {
  width: 4.6375em;
  height: 4.6375em;
  bottom: -2.31875em;
  left: 2.68125em;
  -webkit-animation-delay: 825ms;
          animation-delay: 825ms;
  border-color: transparent transparent rgba(255, 255, 255, 0.47619) rgba(255, 255, 255, 0.47619);
  border-radius: 4.6375em;
}
.wave:nth-child(12) {
  width: 4.15em;
  height: 4.15em;
  bottom: -2.075em;
  left: 2.925em;
  -webkit-animation-delay: 900ms;
          animation-delay: 900ms;
  border-color: transparent transparent rgba(255, 255, 255, 0.42857) rgba(255, 255, 255, 0.42857);
  border-radius: 4.15em;
}
.wave:nth-child(13) {
  width: 3.6625em;
  height: 3.6625em;
  bottom: -1.83125em;
  left: 3.16875em;
  -webkit-animation-delay: 975ms;
          animation-delay: 975ms;
  border-color: transparent transparent rgba(255, 255, 255, 0.38095) rgba(255, 255, 255, 0.38095);
  border-radius: 3.6625em;
}
.wave:nth-child(14) {
  width: 3.175em;
  height: 3.175em;
  bottom: -1.5875em;
  left: 3.4125em;
  -webkit-animation-delay: 1050ms;
          animation-delay: 1050ms;
  border-color: transparent transparent rgba(255, 255, 255, 0.33333) rgba(255, 255, 255, 0.33333);
  border-radius: 3.175em;
}
.wave:nth-child(15) {
  width: 2.6875em;
  height: 2.6875em;
  bottom: -1.34375em;
  left: 3.65625em;
  -webkit-animation-delay: 1125ms;
          animation-delay: 1125ms;
  border-color: transparent transparent rgba(255, 255, 255, 0.28571) rgba(255, 255, 255, 0.28571);
  border-radius: 2.6875em;
}
.wave:nth-child(16) {
  width: 2.2em;
  height: 2.2em;
  bottom: -1.1em;
  left: 3.9em;
  -webkit-animation-delay: 1200ms;
          animation-delay: 1200ms;
  border-color: transparent transparent rgba(255, 255, 255, 0.2381) rgba(255, 255, 255, 0.2381);
  border-radius: 2.2em;
}
.wave:nth-child(17) {
  width: 1.7125em;
  height: 1.7125em;
  bottom: -0.85625em;
  left: 4.14375em;
  -webkit-animation-delay: 1275ms;
          animation-delay: 1275ms;
  border-color: transparent transparent rgba(255, 255, 255, 0.19048) rgba(255, 255, 255, 0.19048);
  border-radius: 1.7125em;
}
.wave:nth-child(18) {
  width: 1.225em;
  height: 1.225em;
  bottom: -0.6125em;
  left: 4.3875em;
  -webkit-animation-delay: 1350ms;
          animation-delay: 1350ms;
  border-color: transparent transparent rgba(255, 255, 255, 0.14286) rgba(255, 255, 255, 0.14286);
  border-radius: 1.225em;
}
.wave:nth-child(19) {
  width: 0.7375em;
  height: 0.7375em;
  bottom: -0.36875em;
  left: 4.63125em;
  -webkit-animation-delay: 1425ms;
          animation-delay: 1425ms;
  border-color: transparent transparent rgba(255, 255, 255, 0.09524) rgba(255, 255, 255, 0.09524);
  border-radius: 0.7375em;
}
.wave:nth-child(20) {
  width: 0.25em;
  height: 0.25em;
  bottom: -0.125em;
  left: 4.875em;
  -webkit-animation-delay: 1500ms;
          animation-delay: 1500ms;
  border-color: transparent transparent rgba(255, 255, 255, 0.04762) rgba(255, 255, 255, 0.04762);
  border-radius: 0.25em;
}

@-webkit-keyframes wave {
  to {
    transform: rotate(135deg);
  }
}

@keyframes wave {
  to {
    transform: rotate(135deg);
  }
}