@charset "UTF-8";
/* 태그의 스타일 초기화 - 브라우저가 태그에 준 스타일을 모두 삭제하고 내가 준 스타일만 적용 */
* { /* 와이드카드 - 모든 태그를 지칭 -상속이 안되는 속성을 전체적용할 때 사용 */
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

li { /* li 앞에 동그라미 삭제 */
  list-style: none;
}

/* 글자의 크기와 두께를 변화시키는 태그 */
h1, h2, h3, h4, h5, h6, strong {
  font-size: inherit; /* 브라우저가 주는 스타일은 무시 후 html, body에 선언된 스타일로 상속 */
  font-weight: inherit;
}

a {
  color: inherit;
  text-decoration: none; /* 밑줄삭제 */
}

img { /* 이미지태그를 a태그로 감싸면 일부 브라우저에서 파란색 테두리가 생김 그걸 방지 */
  border: 0;
}

em, address {
  font-style: normal;
}

button { /* 버튼태그는 글자의 스타일은 상속받지 않음 */
  background-color: transparent; /* 투명색 */
  border: 0; /* 테두리 삭제 */
  cursor: pointer;
}

/* form태그는 문자스타일 상속을 안 받음 */
input, select, textarea, button {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

legend {
  display: none;
}

fieldset {
  border: 0;
}

/* 텍스트 줄수 제한*/
@keyframes upf {
  0% {
    top: 101px;
  }
  100% {
    top: 0;
  }
}
@keyframes upDown {
  0% {
    bottom: 0;
  }
  100% {
    bottom: 20px;
  }
}
@keyframes downUp {
  0% {
    top: 0px;
  }
  100% {
    top: -20px;
  }
}
/* 글자 스타일은 상속받음. 기본 글자의 스타일은 모든 태그를 감싸는 html, body에 선언해야 모든 글자에 적용 */
html, body {
  font-family: "Pretendard", "Malgun Gothic", "맑은 고딕", Dotum, 돋움, Helvetica, "Apple SD Gothic Neo", "애플 SD 산돌고딕 Neo", sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #3d3d3d;
  letter-spacing: 0em; /* 자간 */
  line-height: 1.3; /* 배수 */
  word-break: keep-all;
  word-wrap: break-word; /* 만약 단어길이가 화면넓이를 벗어난다면 강제로 줄바꿈을 실행 */
}

/* id는 #으로 불러야함 */
/* 홈페이지 전체를 감싸는 역할 -가로 스크롤바가 생겼을때 배경이 짤리는 현상을 방지 */
.wrapper {
  width: 1260px;
  margin: 0 auto; /* 가운데 정렬 */
}

body {
  min-width: 1300px;
}

@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  font-display: swap;
  src: local("Pretendard Regular"), url(../fonts/Pretendard-Regular.woff2) format("woff2"), url(../fonts/Pretendard-Regular.woff) format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 700;
  font-display: swap;
  src: local("Pretendard Bold"), url(../fonts/Pretendard-Bold.woff2) format("woff2"), url(../fonts/Pretendard-Bold.woff) format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 900;
  font-display: swap;
  src: local("Pretendard Black"), url(../fonts/Pretendard-Black.woff2) format("woff2"), url(../fonts/Pretendard-Black.woff) format("woff");
}
@font-face {
  font-family: "Wonder";
  font-style: normal;
  font-weight: 400;
  src: local("Wonderful Branding"), url(../fonts/WonderfulBrandingPersonalUse-Wyrgz.woff) format("woff");
}
@font-face {
  font-family: "tvn";
  font-weight: 700;
  font-display: swap;
  font-style: normal;
  src: url(../fonts/EnjoystoriesBold.woff2) format("woff2"), url(../fonts/EnjoystoriesBold.woff) format("woff");
}
@font-face {
  font-family: "Min";
  font-weight: 400;
  src: url(../fonts/MinSans-Regular.woff2) format("woff2");
}
@font-face {
  font-family: "Min";
  font-weight: 700;
  src: url(../fonts/MinSans-Bold.woff2) format("woff2");
}
@font-face {
  font-family: "GM";
  font-weight: 300;
  font-style: normal;
  src: url(../fonts/GmarketSansLight.woff2) format("woff2"), url(../fonts/GmarketSansLight.woff) format("woff");
  font-display: swap;
}
@font-face {
  font-family: "GM";
  font-weight: 700;
  font-style: normal;
  src: url(../fonts/GmarketSansBold.woff2) format("woff2"), url(../fonts/GmarketSansBold.woff) format("woff");
  font-display: swap;
}
@font-face {
  font-family: "bolkit";
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/bolkit_bold.woff2) format("woff2"), url(../fonts/bolkit_bold.woff) format("woff");
}
@font-face {
  font-family: "litoland";
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/Litoland_Regular.woff) format("woff");
}
@font-face {
  font-family: "litoland ltalic";
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/Litoland_Italic.woff) format("woff");
}
@font-face {
  font-family: "Paper";
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/Paperlogy-3Light.woff2) format("woff2");
  font-style: normal;
}
@font-face {
  font-family: "Paper";
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/Paperlogy-7Bold.woff2) format("woff2");
  font-style: normal;
}
header {
  position: fixed;
  width: 100%;
  height: 80px;
  z-index: 100;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
header .wrapper {
  display: flex;
  justify-content: space-between;
}
header .wrapper .home {
  padding-top: 25px;
}
header .wrapper .home a {
  display: block;
  font-size: 0;
  line-height: 0;
  width: 30px;
  height: 30px;
  position: relative;
}
header .wrapper .home a::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28.5613 9.6L27.475 8.75H27.5012V2.5H25.0012V6.81375L17.3113 0.796248C15.9513 -0.268752 14.05 -0.268752 12.69 0.796248L1.43875 9.6C0.525 10.315 0 11.3925 0 12.5537V30H11.25V18.75C11.25 18.0612 11.81 17.5 12.5 17.5H17.5C18.19 17.5 18.75 18.0612 18.75 18.75V30H30V12.5537C30 11.3925 29.475 10.315 28.5613 9.6ZM27.5 27.5H21.25V18.75C21.25 16.6825 19.5675 15 17.5 15H12.5C10.4325 15 8.75 16.6825 8.75 18.75V27.5H2.5V12.5537C2.5 12.1662 2.675 11.8075 2.98 11.5687L14.23 2.765C14.6838 2.41 15.3162 2.41 15.77 2.765L27.02 11.5687C27.325 11.8075 27.5 12.1662 27.5 12.5537V27.5Z' fill='%231D1D1D'/%3E%3C/svg%3E%0A");
}
header .wrapper .home a:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28.5613 9.6017L27.475 8.75177H27.5012V2.50229H25.0012V6.81568L17.3112 0.798683C15.9512 -0.266228 14.05 -0.266228 12.69 0.798683L1.43875 9.6017C0.525 10.3166 0 11.3941 0 12.5552V30H10V18.7509C10 17.3698 11.1187 16.2511 12.5 16.2511H17.5C18.8813 16.2511 20 17.3698 20 18.7509V30H30V12.5552C30 11.3941 29.475 10.3166 28.5613 9.6017Z' fill='%2300FFC2'/%3E%3C/svg%3E%0A");
}
header .wrapper .index ul {
  display: flex;
}
header .wrapper .index ul li {
  width: 186px;
}
header .wrapper .index ul li a {
  font-size: 20px;
  color: #666;
  line-height: 80px;
}
header .wrapper .index ul li a:hover {
  color: #1d1d1d;
  font-weight: 700;
}
header .wrapper .index ul li.on a {
  color: #1d1d1d;
  font-weight: 700;
  position: relative;
}
header .wrapper .index ul li.on a::before {
  position: absolute;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  left: -16px;
  top: 7px;
  width: 10px;
  height: 10px;
  background-color: #00FFC2;
  border-radius: 50%;
}

.container {
  padding-top: 80px;
}
.container .visual {
  height: 900px;
  position: relative;
}
.container .visual::after {
  position: absolute;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
}
.container .visual.svaina {
  background: url(../images/contents/savina_visual_bg.png) no-repeat center center/cover;
}
.container .visual.svaina::after {
  right: 156px;
  bottom: 59px;
  width: 1137px;
  height: 641px;
  background-image: url(../images/contents/savina_visual01.png);
}
.container .visual.seoul {
  background: url(../images/contents/seoul_visual_bg.png) no-repeat center center/cover;
}
.container .visual.seoul::after {
  right: 139px;
  bottom: 52px;
  width: 962px;
  height: 619px;
  background-image: url(../images/contents/seoul_visual_01.png);
}
.container .visual.songwon {
  background: url(../images/contents/song_visual_bg.png) no-repeat center center/cover;
}
.container .visual.songwon::after {
  right: 337px;
  bottom: 27px;
  width: 671px;
  height: 727px;
  background-image: url(../images/contents/song_visual01.png);
}
.container .visual .wrapper {
  color: rgba(255, 255, 255, 0.8);
}
.container .visual .wrapper h2 {
  font-family: "Paper";
  font-size: 80px;
  font-weight: 300;
  color: #fff;
  padding-top: 251px;
}
.container .visual .wrapper .txt {
  width: 404px;
  padding: 32px 0 50px 0;
}
.container .visual .wrapper .txt ul li {
  display: flex;
  justify-content: space-between;
  line-height: 1.5;
}
.container .visual .wrapper .txt ul li span {
  font-weight: 700;
}
.container .visual .wrapper .link ul {
  display: flex;
}
.container .visual .wrapper .link ul li {
  margin-right: 38px;
}
.container .visual .wrapper .link ul li a {
  display: block;
  padding: 16px 38px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 40px;
}
.container .visual .wrapper .link ul li a:hover {
  background-color: rgba(255, 255, 255, 0.6);
  color: #1d1d1d;
  font-weight: 700;
}
.container .mood {
  padding: 97px 0 147px 0;
}
.container .mood .tit {
  margin-bottom: 140px;
}
.container .mood .tit h2 {
  font-family: "Paper";
  font-size: 40px;
  font-weight: 700;
  color: #1d1d1d;
  position: relative;
}
.container .mood .tit h2::after {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 78%;
  height: 1px;
  background-color: #1d1d1d;
  content: "";
}
.container .mood h3 {
  font-family: "Paper";
  font-size: 30px;
  font-weight: 700;
  color: #1d1d1d;
  margin-bottom: 40px;
}
.container .mood .txt_top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 100px;
}
.container .mood .txt_top .about {
  width: 534px;
}
.container .mood .txt_top .typo {
  width: 618px;
}
.container .mood .txt_top .typo .fontinfo ul {
  display: flex;
  justify-content: space-between;
}
.container .mood .txt_top .typo .fontinfo ul li {
  line-height: 1.5;
  width: 50%;
  font-size: 20px;
}
.container .mood .txt_top .typo .fontinfo ul li strong {
  display: block;
  color: #0ACF83;
  font-weight: 700;
  margin-bottom: 7px;
}
.container .mood .txt_top .typo .fontinfo ul li span {
  display: block;
}
.container .mood .txt_top .typo .fontinfo.savina ul li .ba02 {
  font-weight: 700;
}
.container .mood .txt_top .typo .fontinfo.savina ul li .po01 {
  font-family: "litoland ltalic";
}
.container .mood .txt_top .typo .fontinfo.savina ul li .po02 {
  font-family: "bolkit";
  font-weight: 700;
}
.container .mood .txt_top .typo .fontinfo.seoul ul li .ba01 {
  font-family: "Paper";
}
.container .mood .txt_top .typo .fontinfo.seoul ul li .ba02 {
  font-family: "Paper";
  font-weight: 700;
}
.container .mood .txt_top .typo .fontinfo.songwon ul li .ba01 {
  font-family: "Min";
}
.container .mood .txt_top .typo .fontinfo.songwon ul li .ba02 {
  font-family: "Min";
  font-weight: 700;
}
.container .mood .txt_top .typo .fontinfo.songwon ul li .po01 {
  font-family: "GM";
  font-weight: 300;
}
.container .mood .txt_top .typo .fontinfo.songwon ul li .po02 {
  font-family: "GM";
  font-weight: 700;
}
.container .mood .txt_sub .color .color_sub {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.container .mood .txt_sub .color .color_sub .color_txt {
  width: 297px;
}
.container .mood .txt_sub .color .color_sub .color_txt ul li {
  display: flex;
  margin-bottom: 20px;
}
.container .mood .txt_sub .color .color_sub .color_txt ul li span {
  width: 40px;
  font-weight: 700;
  margin-right: 20px;
}
.container .mood .txt_sub .color .color_sub .color_chip ul {
  display: flex;
  height: 102px;
  gap: 24px;
}
.container .mood .txt_sub .color .color_sub .color_chip ul li {
  color: #fff;
  font-weight: 700;
  border-radius: 10px;
  text-align: center;
}
.container .mood .txt_sub .color .color_sub .color_chip ul li.main {
  width: 297px;
  padding: 39px 110px;
}
.container .mood .txt_sub .color .color_sub .color_chip ul li.sub {
  width: 137px;
  padding: 39px 30px;
}
.container .mood .txt_sub .color .color_sub .color_chip ul li.sub2 span {
  text-align: center;
  display: block;
  width: 137px;
  height: 45px;
  padding: 13px 30px;
}
.container .mood .txt_sub .color .color_sub .color_chip.savina ul li.c01 {
  background-color: #272727;
}
.container .mood .txt_sub .color .color_sub .color_chip.savina ul li.c02 {
  background-color: #B08E51;
}
.container .mood .txt_sub .color .color_sub .color_chip.savina ul li.c03 {
  background-color: #3D3D3D;
}
.container .mood .txt_sub .color .color_sub .color_chip.savina ul li.c04 {
  color: #272727;
  background-color: #F2EFE8;
}
.container .mood .txt_sub .color .color_sub .color_chip.seoul ul li.c01 {
  background-color: #08235A;
}
.container .mood .txt_sub .color .color_sub .color_chip.seoul ul li.c02 {
  background-color: #6196DA;
}
.container .mood .txt_sub .color .color_sub .color_chip.seoul ul li.c03 {
  background-color: #D9F27E;
  color: #272727;
}
.container .mood .txt_sub .color .color_sub .color_chip.seoul ul li span {
  border-radius: 10px;
}
.container .mood .txt_sub .color .color_sub .color_chip.seoul ul li span.c04 {
  background-color: #EFEEFE;
  margin-bottom: 12px;
  color: #272727;
}
.container .mood .txt_sub .color .color_sub .color_chip.seoul ul li span.c05 {
  background-color: #1750C3;
}
.container .mood .txt_sub .color .color_sub .color_chip.songwon ul li.c01 {
  background-color: #00539B;
}
.container .mood .txt_sub .color .color_sub .color_chip.songwon ul li.c02 {
  color: #272727;
  background-color: #E6EFF7;
}
.container .mood .txt_sub .color .color_sub .color_chip.songwon ul li.c03 {
  background-color: #0039C8;
}
.container .mood .txt_sub .color .color_sub .color_chip.songwon ul li span {
  border-radius: 10px;
}
.container .mood .txt_sub .color .color_sub .color_chip.songwon ul li span.c04 {
  background-color: #ACFE05;
  margin-bottom: 12px;
}
.container .mood .txt_sub .color .color_sub .color_chip.songwon ul li span.c05 {
  background-color: #F2662B;
}
.container .intro .info {
  font-size: 0;
  line-height: 0;
}
.container .intro .info img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.container .intro .mobile .wrapper {
  padding: 232px 0 100px 0;
  display: flex;
  justify-content: space-around;
  position: relative;
}
.container .intro .mobile .wrapper .m_left {
  width: 435px;
  height: 687px;
  position: relative;
}
.container .intro .mobile .wrapper .m_left::before {
  position: absolute;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  animation-name: downUp;
  animation-duration: 1.2s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  animation-direction: alternate;
  animation-timing-function: linear;
}
.container .intro .mobile .wrapper .m_right {
  width: 535px;
}
.container .intro .mobile .wrapper .m_right h2 {
  font-family: "Paper";
  font-size: 30px;
  font-weight: 700;
  color: #1d1d1d;
  margin: 252px 0 42px 0;
}
.container .intro .mobile .wrapper::before {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  width: 887px;
  height: 733px;
  z-index: -1;
}
.container .intro .mobile.savina .wrapper .m_left::before {
  background-image: url(../images/contents/savina_mobile01.png);
  left: 0;
  top: 0;
  width: 315px;
  height: 565px;
}
.container .intro .mobile.savina .wrapper .m_left::after {
  position: absolute;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  right: 0;
  bottom: 0;
  width: 307px;
  height: 551px;
  background-image: url(../images/contents/savina_mobile02.png);
  animation-name: upDown;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  animation-direction: alternate;
  animation-timing-function: linear;
}
.container .intro .mobile.savina .wrapper::before {
  background-image: url(../images/contents/savina_gra_bg.png);
}
.container .intro .mobile.seoul .wrapper .m_left::before {
  background-image: url(../images/contents/seoul_mobile.png);
  left: 0;
  top: 0;
  width: 380px;
  height: 681px;
}
.container .intro .mobile.seoul .wrapper::before {
  background-image: url(../images/contents/seoul_gra_bg.png);
}
.container .intro .mobile.songwon .wrapper .m_left::before {
  background-image: url(../images/contents/song_mobile.png);
  left: 0;
  top: 0;
  width: 380px;
  height: 681px;
}
.container .intro .mobile.songwon .wrapper::before {
  background-image: url(../images/contents/song_gra_bg.png);
}
.container .intro .sub_btn .wrapper {
  padding: 30px 267px;
}
.container .intro .sub_btn .wrapper ul {
  display: flex;
  justify-content: space-around;
}
.container .intro .sub_btn .wrapper ul li a {
  display: block;
  padding: 20px 121px 18px 84px;
  border-radius: 40px;
  border: 1px solid #ccc;
  color: #666;
  position: relative;
}
.container .intro .sub_btn .wrapper ul li a::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  right: 90px;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_49_24' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='24'%3E%3Crect width='24' height='24' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_49_24)'%3E%3Cpath d='M5.30775 20.5C4.80258 20.5 4.375 20.325 4.025 19.975C3.675 19.625 3.5 19.1974 3.5 18.6923V5.30775C3.5 4.80258 3.675 4.375 4.025 4.025C4.375 3.675 4.80258 3.5 5.30775 3.5H11.6152V5H5.30775C5.23075 5 5.16025 5.03208 5.09625 5.09625C5.03208 5.16025 5 5.23075 5 5.30775V18.6923C5 18.7692 5.03208 18.8398 5.09625 18.9038C5.16025 18.9679 5.23075 19 5.30775 19H18.6923C18.7692 19 18.8398 18.9679 18.9038 18.9038C18.9679 18.8398 19 18.7692 19 18.6923V12.3848H20.5V18.6923C20.5 19.1974 20.325 19.625 19.975 19.975C19.625 20.325 19.1974 20.5 18.6923 20.5H5.30775ZM9.71925 15.3345L8.6655 14.2808L17.9462 5H14V3.5H20.5V10H19V6.05375L9.71925 15.3345Z' fill='%23CCCCCC' fill-opacity='0.8'/%3E%3C/g%3E%3C/svg%3E%0A");
}
.container .intro .sub_btn .wrapper ul li a:hover {
  color: #3d3d3d;
  background-color: #ccc;
}
.container .intro .sub_btn .wrapper ul li a:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_49_24' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='24'%3E%3Crect width='24' height='24' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_49_24)'%3E%3Cpath d='M5.30775 20.5C4.80258 20.5 4.375 20.325 4.025 19.975C3.675 19.625 3.5 19.1974 3.5 18.6923V5.30775C3.5 4.80258 3.675 4.375 4.025 4.025C4.375 3.675 4.80258 3.5 5.30775 3.5H11.6152V5H5.30775C5.23075 5 5.16025 5.03208 5.09625 5.09625C5.03208 5.16025 5 5.23075 5 5.30775V18.6923C5 18.7692 5.03208 18.8398 5.09625 18.9038C5.16025 18.9679 5.23075 19 5.30775 19H18.6923C18.7692 19 18.8398 18.9679 18.9038 18.9038C18.9679 18.8398 19 18.7692 19 18.6923V12.3848H20.5V18.6923C20.5 19.1974 20.325 19.625 19.975 19.975C19.625 20.325 19.1974 20.5 18.6923 20.5H5.30775ZM9.71925 15.3345L8.6655 14.2808L17.9462 5H14V3.5H20.5V10H19V6.05375L9.71925 15.3345Z' fill='%233d3d3d' fill-opacity='0.8'/%3E%3C/g%3E%3C/svg%3E%0A");
}

footer {
  background-color: #3D3D3D;
  color: rgba(255, 255, 255, 0.8);
}
footer .wrapper {
  padding: 28px 0;
  text-align: center;
}
footer .wrapper .conta {
  display: flex;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 13px;
}
footer .wrapper .conta strong {
  font-weight: 700;
  margin-right: 16px;
}
footer .wrapper .copy {
  color: rgba(255, 255, 255, 0.6);
}