@charset "utf-8";
@import url("fonts/fonts.css");
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    
}
body {
	font-size: 16px;
    vertical-align:baseline;
    background:transparent;
    font-family: 'Pretendard';
    font-weight: 400;
    color: #000;
    font-style: normal;
    line-height: 1.5;
		letter-spacing: -0.05em;;
    line-height:1.5;
    -webkit-text-size-adjust:none;
    -webkit-font-smoothing: antialiased;
    min-width: 320px;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}
nav ul {
    list-style:none;
}
li{
    list-style: none;
}
blockquote, q {
    quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    text-decoration: none;
    color:#222;
}
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}
del {
    text-decoration: line-through;
}
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}
table {
    border-collapse:separate;
    border-spacing:0;
    table-layout: fixed
}
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #dddddd;
    margin:1em 0;
    padding:0;
}
input, select {
    vertical-align:middle;
    background: transparent;
    border:1px solid #ddd;
}

br { font-size:0; line-height:0; }
/* 아래 추가 2018-07-17 주미숙 */
img{vertical-align:top;}

button{cursor:pointer; border:0; background-color:#fff;}
button > *{position:relative; display:block;}/*클릭시 문자 흔들림 방지(익스플로러)*/

::-webkit-file-upload-button { cursor:pointer;}
input { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; }
input:disabled { -webkit-appearance: none; -moz-appearance: none; appearance: none; color: #555555; -webkit-text-fill-color: #555555; opacity: 1; }



/* input-placeholder */
::-webkit-input-placeholder, ::-moz-placeholder, :-ms-input-placeholder, :-moz-placeholder {color: #767676; font-family: 'Nanum Gothic'; }

:focus-visible {outline: 3px dotted #ff0000}


/****
	common
****/
* {box-sizing: border-box;}
body {overflow-x: hidden}

/****
	header 
****/
.top-area {display: flex;align-items: center;justify-content: space-between;width: 100%;max-width: 1080px;margin: 0 auto;padding: 25px 0 20px;}
.top-area .sns-area {display: flex;gap: 10px;}
.top-area .sns-area img {width: 31px;}


/****
	text area 
****/

.text-area {width: 100%;max-width: 1190px;margin: 0 auto 135px;}
.text-area h1.title {margin: 5px 0 55px;text-align: center;}
.text-area h1.title span {position: relative;display: inline-block;height: 106px;line-height: 106px;margin: 0 auto;padding: 0 10px;color: #8b400d;font-size: 3.125rem;font-weight: 700;text-align: center;letter-spacing: -0.075em;background: url(../images/bg-title.png) repeat-x 0 0}
.text-area h1.title span:before,
.text-area h1.title span:after {content: '';display: block;position: absolute;top: 0;width: 50px;height: 106px;}
.text-area h1.title span:before {left: -50px;background: url(../images/ico-title.png) no-repeat 0 0;}
.text-area h1.title span:after {right: -50px;background: url(../images/ico-title2.png) no-repeat 0 0;}
.text-area p {font-size: 2.8125rem;font-weight: 600;text-align: center;letter-spacing: -.05em}
.text-area p span {display: inline-block;opacity: 0;filter: blur(4px);font-size: inherit;font-weight: inherit;color: inherit;}
.text-area p.ani-text {transform: scale(1);animation: scale 3s forwards ease-in-out}
.text-area p.ani-text .together {color: #eb4a69;font-style: normal;}
.text-area p.ani-text .show-mobile {display: none}

@keyframes scale {
	0% {
		transform: scale(0.94);
	}
	100% {	
		transform: scale(1);
	}	
}
.text-area p.ani-text span:nth-of-type(1) {
	animation: fade-in 0.8s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.text-area p.ani-text span:nth-of-type(2) {
	animation: fade-in 0.8s 0.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.text-area p.ani-text span:nth-of-type(3) {
	animation: fade-in 0.8s 0.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.text-area p.ani-text span:nth-of-type(4) {
	animation: fade-in 0.8s 0.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.text-area p.ani-text span:nth-of-type(5) {
	animation: fade-in 0.8s 0.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.text-area p.ani-text span:nth-of-type(6) {
	animation: fade-in 0.8s 0.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.text-area p.ani-text span:nth-of-type(7) {
	animation: fade-in 0.8s 0.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.text-area p.ani-text span:nth-of-type(8) {
	animation: fade-in 0.8s 0.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.text-area p.ani-text span:nth-of-type(9) {
	animation: fade-in 0.8s 0.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.text-area p.ani-text span:nth-of-type(10) {
	animation: fade-in 0.8s 1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.text-area p.ani-text span:nth-of-type(11) {
	animation: fade-in 0.8s 1.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.text-area p.ani-text span:nth-of-type(12) {
	animation: fade-in 0.8s 1.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.text-area p.ani-text span:nth-of-type(13) {
	animation: fade-in 0.8s 1.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.text-area p.ani-text span:nth-of-type(14) {
	animation: fade-in 0.8s 1.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.text-area p.ani-text span:nth-of-type(15) {
	animation: fade-in 0.8s 1.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.text-area p.ani-text span:nth-of-type(16) {
	animation: fade-in 0.8s 1.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.text-area p.ani-text span:nth-of-type(17) {
	animation: fade-in 0.8s 1.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.text-area p.ani-text span:nth-of-type(18) {
	animation: fade-in 0.8s 1.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.text-area p.ani-text span:nth-of-type(19) {
	animation: fade-in 0.8s 1.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}


@keyframes fade-in {
	100% {	
		opacity: 1;
		filter: blur(0);
	}
}


/****
	movie
****/
.movie-area {position: relative;display: flex;flex-direction: column;justify-content: center;align-items: center;background: linear-gradient(135deg, #db4b62 0%, #5b37b1 50%);}

.movie-area .section {margin: 80px 0 0;width: 100%;max-width: 720px;}
.movie-area .section h2 {position: relative;display: flex;align-items: center;justify-content: center;margin-bottom: 25px;color: #fff;font-weight: 400;font-size: 2.1875rem;z-index: 300;}

.video-container {
	position: relative;
	padding-bottom: 56.25%;
  /* padding-bottom: 65.25%;*/
	height: 0; 
	overflow: hidden;
  width: 100%;
	max-width: 720px;
	z-index: 800;
}

.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.video-container img {
	max-width: 100%;
}

.video-container .youtube,
.video-container .thumbnail {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 800}
.video-container .youtube {z-index: 801;}

.link-area {width: 100%;}
.btn-group {display: flex;align-items: center;justify-content: center;gap: 30px;margin: 85px 0 170px;}

.btn-group .btn {display: flex;align-items: center;justify-content: center;gap: 10px;height: 100px;padding: 0px 60px;background: #000;border-radius: 50px;color: #fff;font-size: 1.6875rem;font-weight: 700;}
.btn-group .btn:after {content: '';width: 21px;height: 21px;background: url(../images/ico-arrow.png) no-repeat 0 0;}

.footer-text-area {position: absolute;bottom: 50px;left: 50%;width: 330px;margin-left: 25vw;display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 10px;}
.footer-text-area .footer-text {text-align: center;}
.footer-text-area .footer-text span {display: inline-block;margin: 5px -1px;}
.footer-text-area .footer-text .move8 {margin-left: 10px;}

/****
	footer
****/
#footer {display: flex;align-items: center;justify-content: center;border-top: 1px solid #ac9ad6;width: 100%}
#footer .footer-area {margin: 30px 0;}
#footer .footer-area p {color: #fff;font-size: 1rem;letter-spacing: 0;}


/****
	slogan animation
****/
.slogan {position: absolute;}

/* slogan dragon */
.blue-dragon {top: -170px;left: 50%;margin-left: 390px;width: 260px;height: 320px;}
.blue-dragon .dragon {position: absolute;top: 0;right: 0;transform: translateY(0px);animation: bounce 5s ease infinite alternate;}
.blue-dragon .bok {position: absolute;bottom: 75px;left: 0;}
.blue-dragon .sun {position: absolute;top: 65px;left: 40px;}

@keyframes bounce {
	0% {
    transform: translateY(0)
  }
  20% {
    transform: translateY(-30px)
  }
	60% {
    transform: translateY(20px)
  }
	100% {
		transform: translateY(0)
	}
}


/* slogan fun */
.slogan-fun {top: -125px;left: 50%;margin-left: -760px;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 40px;}
.fun-ani1 {animation: fun1-motion 2s ease-in-out infinite;animation-delay: 1s}
.fun-ani2 {animation: fun2-motion 2s ease-in-out infinite;animation-delay: 1s}

@keyframes fun1-motion {
  0% {
      transform: scaleY(1);
  }
  10% {
      transform: scaleY(.4);
  }
  35% {
    transform: scaleY(1);
  }
  40% {
    transform: scaleY(.4);
  }
  50% {
      transform: scaleY(1);
  }
	100% {
		transform: scaleY(1);
	}
}

@keyframes fun2-motion {
  0% {
      transform: translate(0, 0); 
  }
  25% {
    transform: translate(0, 10px); 
  }
  45% {
    transform: translate(0, 0);
  } 
	100% {
    transform: translate(0, 0);
  } 
}

/* slogan heart */
.slogan-heart {top: 50%;left: 50%;margin-left: 460px;margin-top: -408px;animation: heart-motion 5s ease-in-out infinite;}
@keyframes heart-motion {
	0% {
		scale: 1;
		transform: rotateX(0deg);
	}
	15% {
		scale: 1.2;
	}
	55% {
		scale: 1;
		transform: rotateX(360deg);
	}
	100% {
		scale: 1;
		transform: rotateX(360deg);
	}
} 

/* slogan inspire */
.slogan-inspire {bottom: 360px;left: 50%;margin-left: -880px;animation: inspire-motion 2.5s ease-in-out infinite;animation-delay: .5s}
@keyframes inspire-motion {
  0% {
      transform: rotateY(0deg);
  }
  50% {
      transform: rotateY(360deg);
  }
	100% {
		transform: rotateY(360deg);
	}
}

/* seoul my soul animation */
/*
.footer-text span {
	animation: shadow 5s infinite;
  animation-delay: calc(.1s * var(--oneByone));
}

@keyframes shadow {
  0%,10%,100% {
    transform: translateY(0)
  }
  5% {
    transform: translateY(-50px)
  }
}
*/

@media (max-width: 1600px) {
  .text-area {margin: 0 auto;}
  .movie-area-wrap {position: relative;overflow: hidden;padding: 180px 0 0;}
  .blue-dragon {top: -169px}

}

@media (max-width: 1280px) {
  .top-area {padding: 10px 15px}
  .movie-area {padding: 0 15px;}

  /* slogan */
  .section {padding: 0;z-index: 500}
  .section2 {z-index: 400;}
  .blue-dragon {left: auto;right: 50px;margin: 0;}
  .slogan-fun {left: 0;margin: 0;transform: translateX(-50%)}
  .slogan-heart {left: auto;right: -120px;}
  .slogan-inspire {left: 0;margin-left: -100px;animation-delay: 0ms}

  .footer-text-area {width: 200px;left: auto;right: 30px;margin: 0;bottom: 25px;}
  .footer-text-area img {height: 50px;}

  #footer {margin: 0 -15px;width: calc(100% + 30px)}
}


@media (max-width: 768px) {
  .top-area {padding: 10px 15px;}
  .top-area .logo a img {height: 40px}

  .text-area {margin: 0 auto;}
  .movie-area-wrap {padding-top: 105px;}
  .movie-area {padding: 0 60px;}
  .movie-area .section {margin: 50px 0 0;}


  .text-area h1.title {margin: 5px 0 25px;}
  .text-area h1.title span {width: calc(100% - 96px);height: 50px;padding: 0;line-height: 50px;font-size: 1.25rem;background-size: auto 100%;}
  .text-area h1.title span:before {left: -24px;width: 24px;height: 50px;background-size: auto 100%}
  .text-area h1.title span:after {right: -24px;width: 24px;height: 50px;background-size: auto 100%}
  .text-area p.ani-text {padding: 0 20px;font-size: 1.25rem}
  .text-area p.ani-text .show-mobile {display: block}

  .blue-dragon {top: -102px;right: 20px;width: 130px;height: 160px;margin: 0;}
  .blue-dragon .sun {top: 50px;left: 24px;}
  .blue-dragon .bok {bottom: 25px}
  .blue-dragon .dragon img {width: 77px;}
  .blue-dragon .sun img {width: 76px;}
  .blue-dragon .bok img {width: 52px;}

  /* slogan dragon */
  @keyframes bounce {
    0% {
      transform: translateY(0)
    }
    20% {
      transform: translateY(-10px)
    }
    60% {
      transform: translateY(10px)
    }
    100% {
      transform: translateY(0)
    }
  }


  .slogan-fun {top: -70px;width: 110px;gap: 10px;margin-left: 60px;}
  .slogan-fun .fun-ani1 img {height: 90px;}
  .slogan-fun .fun-ani2 img {height: 86px;}
  .slogan-heart {right: -50px;margin-top: -230px;}
  .slogan-heart img {height: 182px;}
  .slogan-inspire {margin-left: -60px;}
  .slogan-inspire img {height: 209px;}

  .movie-area .section h2 {font-size: 1.25rem}

  .link-area {width: 100%;position: relative;z-index: 500;}

  .btn-group {flex-direction: column;gap: 15px;margin: 45px 0 120px;}
  .btn-group .btn {font-size: 1rem;height: 60px;}

  .footer-text-area {right: -30px;width: 120px;padding: 0;min-width: 20px;}
  .footer-text-area img {height: 30px;}
  .footer-text-area .footer-text .move8 {margin-left: 5px}

  #footer {margin: 0 -60px;width: calc(100% + 120px)}
  #footer .footer-area {margin: 15px 0;text-align: center;}
  #footer .footer-area p {font-size: 0.875rem;}

}

@media (max-width: 460px) {
  .movie-area {padding: 0 30px;}
  #footer {margin: 0 -30px;width: calc(100% + 60px)}
  .btn-group .btn:after {width: 16px;height: 16px;background-size: 100% auto;}
  .slogan-fun {top: -40px;margin-left: 40px;}
  .slogan-fun .fun-ani1 img {height: 80px;}
  .slogan-fun .fun-ani2 img {height: 76px}
  .slogan-inspire {top: 470px;margin-left: -70px;}
  .video-container .youtube {width: 40px;height: auto;}

}


@media (min-width: 1601px) {
  .movie-area {position: relative;}
}