@charset "UTF-8";
@import 'default.css';
/***** index page *****/
#mainBody #wrapper {
  min-width: auto;
  padding-top: 0;
}
#mainBody:not(.fp-viewing-0) header {
  animation-name: mainHeaderFixedAnimation;
  animation-duration: 0.5s;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
@keyframes mainHeaderFixedAnimation {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
#mainBody main {
  position: relative;
  padding: 0;
  z-index: 10;
  width: 100%;
}
#mainBody.fp-viewing-0 header {
  border-bottom: 0;
  background: none;
}
#mainBody.fp-viewing-0 header h1 a {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 176.708 19.04'%3E%3Cpath fill='%23fff' id='path_45256' data-name='path 45256' d='M17.892-9.408a4.552,4.552,0,0,1,1.96,1.6,4.141,4.141,0,0,1,.672,2.352v.308a4.458,4.458,0,0,1-1.848,3.766A8.17,8.17,0,0,1,13.664,0H2.184V-18.368H13.132a8.529,8.529,0,0,1,5.026,1.274,4.14,4.14,0,0,1,1.778,3.57v.308A4.3,4.3,0,0,1,17.892-9.408ZM6.384-14.7V-11H13.1q2.6,0,2.6-1.708v-.28a1.429,1.429,0,0,0-.658-1.274,3.494,3.494,0,0,0-1.918-.434ZM16.24-5.768q0-1.736-2.632-1.736H6.384v3.836h7.224a3.387,3.387,0,0,0,1.946-.476,1.541,1.541,0,0,0,.686-1.344Zm25.368-12.6v3.7H29.484v3.64H41.048v3.668H29.484V-3.7H41.608V0H25.284V-18.368ZM65.716-.644V0h-4.2l-1.68-3.808H50.652L48.972,0h-4.2V-.644L52.92-18.368h4.648Zm-7.476-6.8-3-6.832-3,6.832Zm29.652-10.92V0H83.86L73.36-12.46V0H69.328V-18.368H73.36L83.86-5.936V-18.368Zm17.136,0a7.746,7.746,0,0,1,5.124,1.568,5.287,5.287,0,0,1,1.876,4.284v.308A5.318,5.318,0,0,1,110.152-7.9a7.746,7.746,0,0,1-5.124,1.568H97.58V0h-4.2V-18.368Zm-.112,8.316a3.455,3.455,0,0,0,2.1-.546,1.886,1.886,0,0,0,.728-1.61v-.308a1.856,1.856,0,0,0-.728-1.582,3.455,3.455,0,0,0-2.1-.546H97.58v4.592ZM126.644.336a13.534,13.534,0,0,1-5.768-1.148,8.835,8.835,0,0,1-3.822-3.276A9.012,9.012,0,0,1,115.7-9.044V-9.3a9.012,9.012,0,0,1,1.358-4.956,8.911,8.911,0,0,1,3.836-3.29,13.418,13.418,0,0,1,5.754-1.162,13.4,13.4,0,0,1,5.768,1.162,8.833,8.833,0,0,1,3.808,3.29A9.083,9.083,0,0,1,137.564-9.3v.252a9.083,9.083,0,0,1-1.344,4.956,8.744,8.744,0,0,1-3.808,3.276A13.535,13.535,0,0,1,126.644.336Zm0-3.892a7.589,7.589,0,0,0,4.942-1.4,4.933,4.933,0,0,0,1.694-4.032v-.336a4.978,4.978,0,0,0-1.722-4.06,7.5,7.5,0,0,0-4.914-1.428,7.553,7.553,0,0,0-4.942,1.428,4.978,4.978,0,0,0-1.722,4.06v.336A4.9,4.9,0,0,0,121.7-4.956,7.659,7.659,0,0,0,126.644-3.556Zm19.768-14.812V-3.78h12.46V0h-16.66V-18.368Zm32.48,0v3.7H166.768v3.64h11.564v3.668H166.768V-3.7h12.124V0H162.568V-18.368Z' transform='translate(-2.184 18.704)'/%3E%3C/svg%3E%0A") no-repeat 0 0/100%;
}
#mainBody.fp-viewing-0 header nav > ul > li > a {
  color: #fff;
}
#mainBody.fp-viewing-0 header nav > ul > li > ul {
  transition: 0s;
}
#mainBody.fp-viewing-0 header.on {
  background: #fff;
}
#mainBody.fp-viewing-0 header.on .headerWrap h1 a {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 176.708 19.04'%3E%3Cpath fill='%230' id='path_45256' data-name='path 45256' d='M17.892-9.408a4.552,4.552,0,0,1,1.96,1.6,4.141,4.141,0,0,1,.672,2.352v.308a4.458,4.458,0,0,1-1.848,3.766A8.17,8.17,0,0,1,13.664,0H2.184V-18.368H13.132a8.529,8.529,0,0,1,5.026,1.274,4.14,4.14,0,0,1,1.778,3.57v.308A4.3,4.3,0,0,1,17.892-9.408ZM6.384-14.7V-11H13.1q2.6,0,2.6-1.708v-.28a1.429,1.429,0,0,0-.658-1.274,3.494,3.494,0,0,0-1.918-.434ZM16.24-5.768q0-1.736-2.632-1.736H6.384v3.836h7.224a3.387,3.387,0,0,0,1.946-.476,1.541,1.541,0,0,0,.686-1.344Zm25.368-12.6v3.7H29.484v3.64H41.048v3.668H29.484V-3.7H41.608V0H25.284V-18.368ZM65.716-.644V0h-4.2l-1.68-3.808H50.652L48.972,0h-4.2V-.644L52.92-18.368h4.648Zm-7.476-6.8-3-6.832-3,6.832Zm29.652-10.92V0H83.86L73.36-12.46V0H69.328V-18.368H73.36L83.86-5.936V-18.368Zm17.136,0a7.746,7.746,0,0,1,5.124,1.568,5.287,5.287,0,0,1,1.876,4.284v.308A5.318,5.318,0,0,1,110.152-7.9a7.746,7.746,0,0,1-5.124,1.568H97.58V0h-4.2V-18.368Zm-.112,8.316a3.455,3.455,0,0,0,2.1-.546,1.886,1.886,0,0,0,.728-1.61v-.308a1.856,1.856,0,0,0-.728-1.582,3.455,3.455,0,0,0-2.1-.546H97.58v4.592ZM126.644.336a13.534,13.534,0,0,1-5.768-1.148,8.835,8.835,0,0,1-3.822-3.276A9.012,9.012,0,0,1,115.7-9.044V-9.3a9.012,9.012,0,0,1,1.358-4.956,8.911,8.911,0,0,1,3.836-3.29,13.418,13.418,0,0,1,5.754-1.162,13.4,13.4,0,0,1,5.768,1.162,8.833,8.833,0,0,1,3.808,3.29A9.083,9.083,0,0,1,137.564-9.3v.252a9.083,9.083,0,0,1-1.344,4.956,8.744,8.744,0,0,1-3.808,3.276A13.535,13.535,0,0,1,126.644.336Zm0-3.892a7.589,7.589,0,0,0,4.942-1.4,4.933,4.933,0,0,0,1.694-4.032v-.336a4.978,4.978,0,0,0-1.722-4.06,7.5,7.5,0,0,0-4.914-1.428,7.553,7.553,0,0,0-4.942,1.428,4.978,4.978,0,0,0-1.722,4.06v.336A4.9,4.9,0,0,0,121.7-4.956,7.659,7.659,0,0,0,126.644-3.556Zm19.768-14.812V-3.78h12.46V0h-16.66V-18.368Zm32.48,0v3.7H166.768v3.64h11.564v3.668H166.768V-3.7h12.124V0H162.568V-18.368Z' transform='translate(-2.184 18.704)'/%3E%3C/svg%3E%0A") no-repeat 0 0/100%;
}
#mainBody.fp-viewing-0 header.on .headerWrap nav > ul > li > a {
  color: #000;
}
#mainBody .mainSwiper .swiperArrow {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  margin-top: 120px;
  z-index: 1;
}
#mainBody .mainSwiper .swiperArrowWrap {
  display: Flex;
  width: 1240px;
  padding-left: 20px;
  padding-right: 20px;
  margin: 0 auto;
}
@media screen and (min-width: 1760px) {
  #mainBody .mainSwiper .swiperArrowWrap {
    width: 1760px;
    padding-left: 20px;
    padding-right: 20px;
  }
}
#mainBody .mainSwiper .swiperArrow button {
  display: block;
  width: 33px;
  height: 23px;
}
#mainBody .mainSwiper .swiperArrow button.arrowNext {
  margin-left: 32px;
  transform: rotate(180deg);
}
#mainBody .mainSwiper .swiperArrow button {
  position: relative;
}
#mainBody .mainSwiper .swiperArrow button:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg id='ic_previous_40' transform='translate(737.5 6311.016) rotate(180)'%3E%3Cg id='group_762' data-name='group 762' transform='translate(733.512 6280.016) rotate(90)'%3E%3Cpath id='path_99' data-name='path 99' d='M0,10.554,11.169,0,22.34,10.554' fill='none' stroke='%23fff' stroke-width='4'/%3E%3Cpath id='path_100' data-name='path 100' d='M0,0V32.024' transform='translate(11.17)' fill='none' stroke='%23fff' stroke-width='4'/%3E%3C/g%3E%3Crect id='square_19799' data-name='square 19799' width='40' height='40' transform='translate(697.5 6271.016)' fill='none'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat 50%/100% auto;
}

#wrapper[role=index] h3 {
  margin-bottom: 100px;
  margin-top: 70px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  font-size: 42px;
  font-weight: 600;
  font-family: "Halvar Breitschrift", sans-serif;
}
#wrapper[role=index] h3 span {
  font-size: 16px;
  font-weight: 500;
}
#wrapper[role=index] #journalIndex .headArea .jnIndSwiper {
  width: 100%;
  aspect-ratio: 1/0.89;
}
#wrapper[role=index] #journalIndex .headArea .jnIndSwiper a {
  display: flex;
  padding: 0 20px 70px;
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
}
#wrapper[role=index] #journalIndex .headArea .jnIndSwiper a b {
  margin-bottom: 16px;
  width: 80px;
  font-size: 24px;
  line-height: 30px;
  color: #fff;
}
#wrapper[role=index] #journalIndex .headArea .jnIndSwiper .swiper-pagination {
  width: calc(100% - 40px);
  height: 2px;
  top: auto;
  left: 50%;
  bottom: 25px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.4);
}
#wrapper[role=index] #journalIndex .headArea .jnIndSwiper .swiper-pagination span {
  background: #fff;
}
#wrapper[role=index] #journalIndex .headArea .swiperText .swiper-slide {
  padding: 20px;
  background: #faf8f1;
}
#wrapper[role=index] #journalIndex .headArea .swiperText .swiper-slide b {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.4px;
}
#wrapper[role=index] #journalIndex .headArea .swiperText .swiper-slide p {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.4px;
}
#wrapper[role=index] #goodIndex .headArea {
  position: relative;
}
#wrapper[role=index] #goodIndex .headArea h3 {
  position: absolute;
  top: 30%;
  left: 20px;
  align-items: flex-start;
  color: #fff;
}
#wrapper[role=index] .linkListA li > a {
  display: flex;
  flex-flow: column;
  justify-content: flex-end;
  padding: 30px 20px;
  color: #fff;
  aspect-ratio: 1/0.53;
  background-size: 100%;
}
#wrapper[role=index] .linkListA li > a b {
  margin-bottom: 16px;
  font-size: 24px;
}
#wrapper[role=index] .linkListA li > a button {
  align-self: flex-start;
}
#wrapper[role=index] .linkListB {
  padding: 30px 20px 0;
}
#wrapper[role=index] .linkListB li {
  padding: 20px 0;
  border-bottom: 1px solid rgba(102, 102, 102, 0.2);
}
#wrapper[role=index] .linkListB li:last-of-type {
  border: 0;
}
#wrapper[role=index] .linkListB li a {
  display: flex;
  justify-content: space-between;
}
#wrapper[role=index] .linkListB li a strong {
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
}
#wrapper[role=index] .linkListB li a p {
  margin-top: 6px;
  font-size: 14px;
  font-family: "Noto Sans KR", sans-serif;
}
#wrapper[role=index] .linkListB li a .ico_arrow {
  width: 28px;
  height: 28px;
  align-self: center;
}
#wrapper[role=index] .linkListB li a .ico_arrow {
  position: relative;
}
#wrapper[role=index] .linkListB li a .ico_arrow:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg id='ic_forward_40' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect id='square_637' data-name='square 637' width='40' height='40' fill='none'/%3E%3Cpath id='path_57' data-name='path 57' d='M-19903.479-21989.621l12.566,12.564-12.566,12.572' transform='translate(19917.912 21997.053)' fill='none' stroke='%23707070' stroke-width='4'/%3E%3C/svg%3E%0A") center center/18px 28px;
}

/***** heritage *****/
#wrapper[role=history] main {
  width: 100%;
  margin-right: 0;
  margin-left: 0;
  padding-left: 0;
  padding-right: 0;
}
#wrapper[role=history] main h3 {
  margin-top: 0;
}
#wrapper[role=history] .contentsTop {
  position: absolute;
  left: 0;
  top: 120px;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  z-index: 1;
}
#wrapper[role=history] .contentsTop .location {
  height: auto;
  width: 1240px;
  margin-right: auto;
  margin-left: auto;
  padding-top: 0;
}
#wrapper[role=history] .contentsTop .location li, #wrapper[role=history] .contentsTop .location a {
  color: #fff;
}
@media screen and (min-width: 1760px) {
  #wrapper[role=history] .contentsTop .location {
    width: 1760px;
    padding-left: 20px;
    padding-right: 20px;
  }
}
#wrapper[role=history] .bars {
  position: absolute;
  left: 20px;
  top: 0;
  width: 1px;
  height: 100%;
  transform: translate(-50%, 0);
  background: #ccc;
  z-index: 1;
}
#wrapper[role=history] .bars .fill {
  position: absolute;
  width: 100%;
  height: 0;
  background: #144835;
}
#wrapper[role=history] .bars:before {
  content: "";
  display: block;
  position: absolute;
  width: 10px;
  height: 10px;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 50%;
  z-index: 1;
}
#wrapper[role=history] .bars:after {
  content: "";
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  border: 1px solid #fff;
  border-radius: 50%;
  z-index: 1;
}
#wrapper[role=history] .bars.sticky {
  position: fixed;
  height: 100%;
  top: 0 !important;
}
#wrapper[role=history] .bars.sticky .fill {
  height: 40%;
}
#wrapper[role=history] em {
  font-style: normal;
}
#wrapper[role=history] .fsL {
  font-size: 38px;
  font-weight: 600;
  line-height: 55px;
  letter-spacing: -0.4px;
  word-break: keep-all;
}
#wrapper[role=history] .fsM {
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.4px;
  word-break: keep-all;
}
#wrapper[role=history] .fsS {
  font-size: 15px;
  line-height: 26px;
  letter-spacing: -0.4px;
  word-break: keep-all;
}
#wrapper[role=history] #visualArea {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
  height: calc(100vh - 81px);
}
#wrapper[role=history] #visualArea #historySection1_bg {
  position: absolute;
  left: 0;
  top: 0;
  background-color: #fff;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  text-align: center;
  opacity: 1;
}
#wrapper[role=history] #visualArea #historySection1_bg svg {
  height: auto !important;
}
#wrapper[role=history] #visualArea .alphabetArea {
  display: flex;
}
#wrapper[role=history] #visualArea .alphabetArea p {
  position: relative;
  overflow: hidden;
}
#wrapper[role=history] #visualArea .alphabetArea p span {
  position: relative;
  font-size: 150px;
  color: #fff;
  font-weight: 600;
  line-height: 1.2;
  opacity: 0;
  right: -100%;
}
@media screen and (min-width: 1760px) {
  #wrapper[role=history] #visualArea .alphabetArea p span {
    font-size: 250px;
  }
}
#wrapper[role=history] #visualArea > i {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  bottom: 132px;
  width: 90px;
  height: 90px;
  margin-left: -45px;
  border: 4px solid #fff;
  border-radius: 50%;
  font-size: 20px;
  font-weight: 600;
  font-style: normal;
  color: #fff;
}
#wrapper[role=history] #visualArea + section {
  padding: 250px 42px;
  background-image: url("/static/images/heritage/history/checkPattern.jpg");
}
#wrapper[role=history] #visualArea + section h3 {
  padding-bottom: 50px;
  font-size: 30px;
  font-weight: 600;
  color: #fff;
  margin-top: 0;
}
#wrapper[role=history] #visualArea + section div {
  text-align: center;
}
#wrapper[role=history] #visualArea + section div p {
  padding-bottom: 28px;
  font-size: 20px;
  font-weight: 400;
  color: #fff;
  line-height: 30px;
}
#wrapper[role=history] #visualArea + section div p:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
}
#wrapper[role=history] #visualArea + section div p:last-of-type::after, #wrapper[role=history] #visualArea + section div p:last-of-type::before {
  display: none;
}
#wrapper[role=history] .barArea {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px !important;
  margin-left: -1px;
  height: calc(100% + 100px);
  transform: translateY(-50%);
  background: linear-gradient(0deg, rgba(221, 221, 221, 0) 0%, rgb(221, 221, 221) 50px, rgb(221, 221, 221) calc(100% - 50px), rgba(221, 221, 221, 0) 100%);
  margin-right: 0 !important;
  z-index: 0;
}
#wrapper[role=history] .barArea span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  overflow: hidden;
  transition: 0s;
}
#wrapper[role=history] .barArea span i {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  background: linear-gradient(0deg, rgba(20, 72, 53, 0) 0%, rgb(20, 72, 53) 50px, rgb(20, 72, 53) calc(100% - 50px), rgba(20, 72, 53, 0) 100%);
}
#wrapper[role=history] .titleAni {
  opacity: 0;
  transition: 0.6s;
}
#wrapper[role=history] .titleAni.active {
  opacity: 1;
}
#wrapper[role=history] .subTitleAni {
  opacity: 0;
  transform: translateX(-20px);
  transition: 0.3s all 0s cubic-bezier(0, 0, 0.34, 0.98);
}
#wrapper[role=history] .subTitleAni.active {
  opacity: 1;
  transform: translateX(0);
}
#wrapper[role=history] .textAni {
  opacity: 0;
  transform: translateX(-20px);
  transition: 0.5s all 0s cubic-bezier(0, 0, 0.34, 0.98);
}
#wrapper[role=history] .textAni.active {
  opacity: 1;
  transform: translateX(0);
}
#wrapper[role=history] .imgAni {
  opacity: 0;
  transform: translateX(30px);
  transition: 0.3s all 0s cubic-bezier(0, 0, 0.34, 0.98);
}
#wrapper[role=history] .imgAni.active {
  opacity: 1;
  transform: translateX(0);
}
#wrapper[role=history] article:not(#y1989) .yBody {
  display: flex;
  justify-content: center;
}
#wrapper[role=history] article:not(#y1989) .yBody > div {
  width: 50%;
  margin-right: 64px;
  text-align: right;
}
#wrapper[role=history] article:not(#y1989) .yBody > div h3 {
  margin-top: -31px;
  margin-bottom: 32px;
  line-height: 1em;
  text-align: right;
}
#wrapper[role=history] article:not(#y1989) .yBody > div h3.point {
  font-size: 130px;
  font-weight: 600;
  line-height: 152px;
}
#wrapper[role=history] article:not(#y1989) .yBody > div .fsL {
  margin-bottom: 15px;
  font-size: 40px;
  font-weight: 400;
  color: #144835;
}
#wrapper[role=history] article:not(#y1989) .yBody > div .fsS {
  color: #417562;
  font-size: 20px;
  line-height: 31.25px;
}
#wrapper[role=history] article:not(#y1989) .yBody > div:nth-of-type(even) {
  text-align: left;
  margin-left: 64px;
  margin-right: 0;
}
#wrapper[role=history] article .title_year {
  position: relative;
  font-size: 130px;
  font-weight: 600;
  font-family: "Halvar Breitschrift", sans-serif;
  text-align: center;
  color: #144835;
}
#wrapper[role=history] article .title_yearS {
  font-size: 50px;
  font-weight: 600;
  font-family: "Halvar Breitschrift", sans-serif;
  color: #144835;
}
#wrapper[role=history] article .title_yearSS {
  font-size: 25px;
  font-weight: 600;
  font-family: "Halvar Breitschrift", sans-serif;
  color: #144835;
}
#wrapper[role=history] article .title_year.point {
  font-size: 130px;
  font-weight: 600;
  line-height: 152px;
}
#wrapper[role=history] article .circleMask {
  height: 100vh;
  text-align: center;
}
#wrapper[role=history] article .circleMask {
  position: relative;
}
#wrapper[role=history] article .circleMask:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100vh;
  left: 50%;
  top: 0;
  transform: translateX(-50%); /*text-align: center;*/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center -42px;
  clip-path: circle(29%);
  transition: 0.5s ease-in-out, 0.5s background ease-in-out;
}
#wrapper[role=history] article .circleMask.circleOn:before {
  clip-path: circle(100%);
}
#wrapper[role=history] article .effect1 {
  transform: translateY(50px);
  opacity: 0;
}
#wrapper[role=history] article .alignA {
  display: flex;
  flex-flow: column;
  align-items: center;
  margin: 0 auto;
  width: calc(100% - 80px);
}
#wrapper[role=history] article .locationCurrent {
  position: absolute;
  right: -70px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  background: #144835;
  z-index: 1;
}
#wrapper[role=history] article .locationCurrent:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -12px;
  margin-left: -12px;
  border: 2px solid #144835;
  border-radius: 50%;
  transition: transform 0.25s ease-out;
  transform: scale(0);
}
#wrapper[role=history] article .locationCurrent.on:after {
  transform: scale(1);
}
#wrapper[role=history] article .point .locationCurrent {
  position: absolute;
  right: -75px;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border-radius: 50%;
  background: #144835;
  z-index: 1;
}
#wrapper[role=history] article .point .locationCurrent:after {
  width: 40px;
  height: 40px;
  margin-top: -22px;
  margin-left: -22px;
}
#wrapper[role=history] #y1989 {
  position: relative;
  padding-bottom: 245px;
}
#wrapper[role=history] #y1989 .visual {
  background-image: url("/static/images/heritage/history/checkPattern.jpg");
  background-position-y: 25px;
}
#wrapper[role=history] #y1989 .circleMask {
  display: flex;
  align-items: center;
  justify-content: center;
}
#wrapper[role=history] #y1989 .circleMask .title_year {
  transition: 0.5s all ease-in-out;
  transform: translateY(100px);
  color: #fff;
  font-size: 125px;
}
#wrapper[role=history] #y1989 .circleMask:before {
  background-image: url("/static/images/heritage/history/img_1989Visual.jpg");
}
#wrapper[role=history] #y1989 .circleMask.effect:before {
  background-position: center -100px;
}
#wrapper[role=history] #y1989 .circleMask.effect .title_year {
  transform: translateY(0);
}
#wrapper[role=history] #y1989 .circleMask .smallText {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 16px;
  transition: 0.2s;
  opacity: 0;
  font-family: "Noto Sans KR", sans-serif;
}
#wrapper[role=history] #y1989 .circleMask.circleOn .smallText {
  opacity: 1;
  transition-delay: 0.3s;
}
#wrapper[role=history] #y1989 .yBody {
  padding-top: 240px;
  background: #fff;
}
#wrapper[role=history] #y1989 .yBody .alignA p.fsL {
  margin: 50px 0 25px;
  font-size: 38px;
}
#wrapper[role=history] #y1989 .yBody p {
  color: #144835;
  text-align: center;
  font-size: 30px;
  line-height: 46px;
}
#wrapper[role=history] #y1989 .yBody p span {
  display: block;
}
#wrapper[role=history] #y1989 .yBody p span i {
  display: inline-block;
  position: relative;
  font-style: normal;
  line-height: 46px;
  color: #ddd;
}
#wrapper[role=history] #y1989 .yBody p span i strong {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  overflow: hidden;
  color: #144835;
  font-weight: 400;
}
#wrapper[role=history] #y1989 .yBody p span i strong em {
  font-style: normal;
  white-space: nowrap;
}
#wrapper[role=history] #y1989 .yBody p span.active i strong {
  width: 100%;
  transition: 1s width 0.5s;
  transition-timing-function: linear;
}
#wrapper[role=history] #y1989 .yBody p span.active i:nth-of-type(2) strong {
  transition-delay: 1.55s;
}
#wrapper[role=history] #y1993 .yBody {
  margin: 50px 0 423px;
}
#wrapper[role=history] #y1993 .yBody > div:nth-child(2) {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
}
#wrapper[role=history] #y1993 .yBody > div:nth-child(2) p {
  color: #144835;
}
#wrapper[role=history] #y1993 .yBody > div:nth-child(2) p:nth-of-type(1) {
  margin: 35px 0 12px;
}
#wrapper[role=history] #y2000 {
  position: relative;
}
#wrapper[role=history] #y2000 .visual {
  position: relative;
}
#wrapper[role=history] #y2000 .bars {
  position: fixed;
}
#wrapper[role=history] #y2000 .bars:before, #wrapper[role=history] #y2000 .bars:after {
  display: none;
}
#wrapper[role=history] #y2000 .bars .fill {
  height: 0;
  transition: 0.5s height;
}
#wrapper[role=history] #y2000 .bars .circle {
  position: absolute;
  display: block;
  width: 10px;
  height: 10px;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 50%;
  z-index: 1;
}
#wrapper[role=history] #y2000 .bars .circle i {
  position: absolute;
  width: 0;
  height: 0;
  top: 5px;
  left: 5px;
  transform: translate(-50%, -50%);
  border: 1px solid #fff;
  border-radius: 50%;
  z-index: 1;
  opacity: 0;
  transition: 0.5s all;
}
#wrapper[role=history] #y2000 .bars .circle i.active {
  width: 16px;
  height: 16px;
  opacity: 1;
}
#wrapper[role=history] #y2000 .marking {
  width: 50%;
}
#wrapper[role=history] #y2000 .marking:after, #wrapper[role=history] #y2000 .marking:before {
  display: none;
}
#wrapper[role=history] #y2000 .circleMask {
  height: calc(100vh - 81px);
  overflow: hidden;
}
#wrapper[role=history] #y2000 .circleMask:before {
  background-image: url("/static/images/heritage/history/img_2000Visual.jpg");
}
#wrapper[role=history] #y2000 .cont {
  position: absolute;
  display: flex;
  align-items: center;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 0;
}
#wrapper[role=history] #y2000 .cont .title_year {
  margin-right: 37px;
  margin-top: 0;
  opacity: 0.4;
  color: #fff;
  line-height: normal;
  text-align: right;
}
#wrapper[role=history] #y2000 .cont .title_year span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: 0.8s ease-out;
  text-indent: -10px;
  font-family: "Halvar Breitschrift", sans-serif;
  letter-spacing: 4px;
}
#wrapper[role=history] #y2000 .cont .title_year em {
  opacity: 1;
  transition: 0.8s ease-out;
  font-family: "Halvar Breitschrift", sans-serif;
}
#wrapper[role=history] #y2000 .cont .title_year.change span {
  opacity: 1;
}
#wrapper[role=history] #y2000 .cont .title_year.change em {
  opacity: 0;
}
#wrapper[role=history] #y2000 .cont ul {
  position: relative;
  width: 50%;
}
#wrapper[role=history] #y2000 .cont ul li {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
}
#wrapper[role=history] #y2000 .cont ul li p {
  margin-left: 37px;
  text-align: left;
  font-weight: 600;
  transform: translateY(30%);
  word-break: keep-all;
  opacity: 0;
  color: #fff;
}
#wrapper[role=history] #y2000 .cont ul li:first-child p {
  opacity: 0.4;
  transform: translateY(0);
  transition: 0.5s ease-out;
}
#wrapper[role=history] #y2000 .cont ul li.effect2 p {
  opacity: 0 !important;
  transform: translateY(30%) !important;
  transition: 0.5s ease-out opacity, 0.5s 0.5s transform !important;
}
#wrapper[role=history] #y2000 .cont ul li.effect2 + li p {
  opacity: 1;
  transform: translateY(0);
  transition: 0.5s 0.3s ease-out;
}
#wrapper[role=history] #y2000 .cont ul li.effect3 p {
  opacity: 0 !important;
  transform: translateY(30%) !important;
  transition: 0.5s ease-out opacity, 0.5s 0.5s transform !important;
}
#wrapper[role=history] #y2000 .cont {
  position: absolute;
}
#wrapper[role=history] #y2000 .cont:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: calc(1 - var(--opacity-set));
  background: url(/static/images/heritage/history/checkPattern2.jpg);
  transition: 0.8s opacity ease-out;
  z-index: -1;
}
#wrapper[role=history] #y2000 .cont {
  position: absolute;
}
#wrapper[role=history] #y2000 .cont:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  background: url(/static/images/heritage/history/checkPattern3.jpg);
  background-size: 90px;
  transition: 0.8s opacity ease-out;
  z-index: -1;
}
#wrapper[role=history] #y2000 .cont.bg2022:after {
  opacity: 1 !important;
}
#wrapper[role=history] #y2000 .foot {
  position: absolute;
  bottom: 82px;
  left: 0;
  width: 100%;
  text-align: center;
  font-style: italic;
  color: #fff;
  font-size: 20px;
  line-height: 23px;
  opacity: 0.4;
  z-index: 1;
}
#wrapper[role=history] #y2001 {
  background: #FAF8F1;
}
#wrapper[role=history] #y2001 section:nth-of-type(1) {
  padding: 240px 0 345px;
}
#wrapper[role=history] #y2001 section:nth-of-type(1) p {
  margin-bottom: 20px;
  font-size: 48px;
  font-weight: 600;
  line-height: 70px;
  color: #144835;
  text-align: center;
}
#wrapper[role=history] #y2001 section:nth-of-type(1) .title_year {
  font-size: 130px;
  line-height: 151px;
  letter-spacing: -0.2px;
  word-break: keep-all;
}
#wrapper[role=history] #y2001 .yBody {
  text-align: center;
  position: relative;
  z-index: 2;
}
#wrapper[role=history] #y2001 .yBody ol {
  width: 1240px;
  padding-left: 20px;
  padding-right: 20px;
}
#wrapper[role=history] #y2001 .yBody ol li {
  padding-bottom: 125px;
}
#wrapper[role=history] #y2001 .yBody ol li .subTitle {
  font-size: 25px;
  font-weight: 600;
  line-height: 30px;
  color: #144835;
}
#wrapper[role=history] #y2001 .yBody ol li > div {
  display: flex;
  justify-content: center;
  margin-bottom: 240px;
}
#wrapper[role=history] #y2001 .yBody ol li > div > div {
  width: 50%;
  margin-right: 64px;
  text-align: right;
}
#wrapper[role=history] #y2001 .yBody ol li > div > div.textArea span, #wrapper[role=history] #y2001 .yBody ol li > div > div.textArea strong, #wrapper[role=history] #y2001 .yBody ol li > div > div.textArea b {
  display: block;
  position: relative;
}
#wrapper[role=history] #y2001 .yBody ol li > div > div.textArea span {
  font-size: 44px;
  line-height: 51px;
  margin-bottom: 24px;
  letter-spacing: -0.2px;
}
#wrapper[role=history] #y2001 .yBody ol li > div > div.textArea strong {
  margin-bottom: 20px;
  font-size: 26px;
  line-height: 31px;
  font-weight: 500;
  letter-spacing: -0.2px;
}
#wrapper[role=history] #y2001 .yBody ol li > div > div.textArea b {
  font-size: 20px;
  font-weight: 400;
  line-height: 31.4px;
  font-family: "Noto Sans KR", sans-serif !important;
  letter-spacing: -1.4px;
  word-break: keep-all;
  color: #444;
}
#wrapper[role=history] #y2001 .yBody ol li > div > div:nth-of-type(even) {
  margin-left: 64px;
  margin-right: 0;
  text-align: left;
}
#wrapper[role=history] #y2001 .yBody ol li:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
}
#wrapper[role=history] #y2001 .yBody ol li:last-of-type > div {
  margin-bottom: 0;
}
#wrapper[role=history] .etcGroup {
  margin-top: 354px;
  margin-bottom: 319px;
  background: #fff;
}
#wrapper[role=history] .etcGroup {
  position: relative;
}
#wrapper[role=history] .etcGroup:after {
  content: "";
  position: absolute;
  left: 0;
  top: -360px;
  width: 100%;
  height: 260px;
  background: linear-gradient(to top, #fff, #FAF8F1);
}
#wrapper[role=history] #y2005 {
  background: #fff;
}
#wrapper[role=history] #y2005 .yBody ol li {
  padding-bottom: 125px;
}
#wrapper[role=history] #y2005 .yBody ol li .subTitle {
  font-size: 25px;
  font-weight: 600;
  line-height: 30px;
  color: #144835;
}
#wrapper[role=history] #y2005 .yBody ol li > div {
  margin-bottom: 50px;
}
#wrapper[role=history] #y2005 .yBody ol li > div h3 {
  margin-bottom: 24px;
}
#wrapper[role=history] #y2005 .yBody ol li > div b, #wrapper[role=history] #y2005 .yBody ol li > div strong {
  display: block;
}
#wrapper[role=history] #y2005 .yBody ol li > div strong {
  margin-bottom: 18px;
  font-size: 26px;
  line-height: 31px;
  font-weight: 500;
  letter-spacing: -0.4px;
}
#wrapper[role=history] #y2005 .yBody ol li > div b {
  font-size: 20px;
  font-weight: 400;
  line-height: 29px;
  font-family: "Noto Sans KR", sans-serif !important;
  letter-spacing: -0.4px;
  word-break: keep-all;
}
#wrapper[role=history] #y2009 {
  padding-top: 231px;
  background-color: #fff;
}
#wrapper[role=history] #y2009 .yBody {
  padding-top: 70px;
}
#wrapper[role=history] #y2009 .yBody .rainbow {
  position: relative;
  aspect-ratio: 1;
  width: 45%;
  max-width: 270px;
  margin: 0 auto 65px;
  transform: rotate(-90deg) scale(0);
  transition: 1s all linear;
}
@supports not (aspect-ratio: 1) {
  #wrapper[role=history] #y2009 .yBody .rainbow::before {
    content: "";
    float: left;
    padding-top: calc((1 / 1) * 100%);
  }
  #wrapper[role=history] #y2009 .yBody .rainbow::after {
    content: "";
    display: block;
    clear: both;
  }
}
#wrapper[role=history] #y2009 .yBody .rainbow li {
  position: absolute;
  left: 50%;
  top: 0;
  height: 50%;
  width: 6px;
  transform: translateX(-50%);
  transform-origin: center bottom;
  background: #e5c3d1;
  border-radius: 4px;
  overflow: hidden;
}
#wrapper[role=history] #y2009 .yBody .rainbow li:nth-of-type(1) {
  transform: translateX(-50%) rotate(30deg);
}
#wrapper[role=history] #y2009 .yBody .rainbow li:nth-of-type(1):after {
  transition-delay: 0s;
  background: #D10B3E;
}
#wrapper[role=history] #y2009 .yBody .rainbow li:nth-of-type(2) {
  transform: translateX(-50%) rotate(60deg);
}
#wrapper[role=history] #y2009 .yBody .rainbow li:nth-of-type(2):after {
  transition-delay: 0.05s;
  background: #D21059;
}
#wrapper[role=history] #y2009 .yBody .rainbow li:nth-of-type(3) {
  transform: translateX(-50%) rotate(90deg);
}
#wrapper[role=history] #y2009 .yBody .rainbow li:nth-of-type(3):after {
  transition-delay: 0.1s;
  background: #CE0078;
}
#wrapper[role=history] #y2009 .yBody .rainbow li:nth-of-type(4) {
  transform: translateX(-50%) rotate(120deg);
}
#wrapper[role=history] #y2009 .yBody .rainbow li:nth-of-type(4):after {
  transition-delay: 0.15s;
  background: #68266E;
}
#wrapper[role=history] #y2009 .yBody .rainbow li:nth-of-type(5) {
  transform: translateX(-50%) rotate(150deg);
}
#wrapper[role=history] #y2009 .yBody .rainbow li:nth-of-type(5):after {
  transition-delay: 0.2s;
  background: #2D1F77;
}
#wrapper[role=history] #y2009 .yBody .rainbow li:nth-of-type(6) {
  transform: translateX(-50%) rotate(180deg);
}
#wrapper[role=history] #y2009 .yBody .rainbow li:nth-of-type(6):after {
  transition-delay: 0.25s;
  background: #1754A5;
}
#wrapper[role=history] #y2009 .yBody .rainbow li:nth-of-type(7) {
  transform: translateX(-50%) rotate(210deg);
}
#wrapper[role=history] #y2009 .yBody .rainbow li:nth-of-type(7):after {
  transition-delay: 0.3s;
  background: #0881CA;
}
#wrapper[role=history] #y2009 .yBody .rainbow li:nth-of-type(8) {
  transform: translateX(-50%) rotate(240deg);
}
#wrapper[role=history] #y2009 .yBody .rainbow li:nth-of-type(8):after {
  transition-delay: 0.35s;
  background: #399759;
}
#wrapper[role=history] #y2009 .yBody .rainbow li:nth-of-type(9) {
  transform: translateX(-50%) rotate(270deg);
}
#wrapper[role=history] #y2009 .yBody .rainbow li:nth-of-type(9):after {
  transition-delay: 0.4s;
  background: #A3C634;
}
#wrapper[role=history] #y2009 .yBody .rainbow li:nth-of-type(10) {
  transform: translateX(-50%) rotate(300deg);
}
#wrapper[role=history] #y2009 .yBody .rainbow li:nth-of-type(10):after {
  transition-delay: 0.45s;
  background: #F1DD31;
}
#wrapper[role=history] #y2009 .yBody .rainbow li:nth-of-type(11) {
  transform: translateX(-50%) rotate(330deg);
}
#wrapper[role=history] #y2009 .yBody .rainbow li:nth-of-type(11):after {
  transition-delay: 0.5s;
  background: #F59821;
}
#wrapper[role=history] #y2009 .yBody .rainbow li:nth-of-type(12) {
  transform: translateX(-50%) rotate(360deg);
}
#wrapper[role=history] #y2009 .yBody .rainbow li:nth-of-type(12):after {
  transition-delay: 0.55s;
  background: #EA471E;
}
#wrapper[role=history] #y2009 .yBody .rainbow li:nth-of-type(1) {
  z-index: 1;
}
#wrapper[role=history] #y2009 .yBody .rainbow li:nth-of-type(2) {
  z-index: 2;
}
#wrapper[role=history] #y2009 .yBody .rainbow li:nth-of-type(3) {
  z-index: 3;
}
#wrapper[role=history] #y2009 .yBody .rainbow li:nth-of-type(4) {
  z-index: 4;
}
#wrapper[role=history] #y2009 .yBody .rainbow li:nth-of-type(5) {
  z-index: 5;
}
#wrapper[role=history] #y2009 .yBody .rainbow li {
  position: absolute;
}
#wrapper[role=history] #y2009 .yBody .rainbow li:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  transition: 1s height linear;
}
#wrapper[role=history] #y2009 .yBody .rainbow.on {
  transform: rotate(90deg) scale(1);
}
#wrapper[role=history] #y2009 .yBody .rainbow.on li:after {
  height: 100%;
}
#wrapper[role=history] #y2009 .yBody .rainbow + div {
  margin-top: 30px;
  transform: translateY(50px);
  opacity: 0;
  text-align: center;
}
#wrapper[role=history] #y2009 .yBody .logoArea {
  width: 478px;
  text-align: center;
}
#wrapper[role=history] #y2009 .yBody .textArea {
  display: block;
  text-align: right;
}
#wrapper[role=history] #y2009 .yBody .textArea h3 {
  margin-bottom: 24px;
  margin-top: 0;
}
#wrapper[role=history] #y2009 .yBody .textArea strong {
  display: block;
  margin-bottom: 18px;
  font-size: 26px;
  font-weight: 500;
  line-height: 37px;
}
#wrapper[role=history] #y2009 .yBody .textArea p {
  margin-top: 8px;
  font-size: 20px;
  line-height: 29px;
}
#wrapper[role=history] #y2010 {
  padding-top: 200px;
}
#wrapper[role=history] #y2011 .yBody > ul > li:first-of-type {
  padding-bottom: 110px;
}
#wrapper[role=history] .whiteBg .marking h3 {
  position: relative;
  margin-top: 0;
  margin-bottom: 24px;
  line-height: 51px;
  font-size: 44px;
  text-align: right;
}
#wrapper[role=history] .whiteBg .marking h3.point {
  font-size: 130px;
  line-height: 152px;
}
#wrapper[role=history] .whiteBg article {
  padding-top: 110px;
}
#wrapper[role=history] .whiteBg .yBody {
  display: block !important;
  padding-top: 40px;
}
#wrapper[role=history] .whiteBg .yBody > ul li {
  display: flex;
  justify-content: center;
  padding-bottom: 240px;
}
#wrapper[role=history] .whiteBg .yBody > ul li > div {
  width: 50%;
}
#wrapper[role=history] .whiteBg .yBody > ul li > div:nth-of-type(even) {
  margin-left: 64px;
}
#wrapper[role=history] .whiteBg .yBody > ul li .textArea {
  text-align: right;
  margin-right: 64px;
}
#wrapper[role=history] .whiteBg .yBody > ul li .textArea b {
  display: block;
  margin-bottom: 18px;
  font-size: 26px;
  font-weight: 500;
  line-height: 31px;
  position: relative;
}
#wrapper[role=history] .whiteBg .yBody > ul li .textArea p {
  font-size: 20px;
  line-height: 31.25px;
  font-family: "Noto Sans KR", sans-serif;
  word-break: keep-all;
  letter-spacing: -0.4px;
}
#wrapper[role=history] .whiteBg .yBody > ul li:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
}
#wrapper[role=history] .whiteBg .yBody > ul li:last-of-type::after, #wrapper[role=history] .whiteBg .yBody > ul li:last-of-type::before {
  display: none;
}
#wrapper[role=history] .whiteBg #y2012 ul li:nth-of-type(2) div:nth-of-type(2) {
  margin-top: -60px;
}
#wrapper[role=history] .whiteBg #y2018 .yBody div:nth-of-type(2) > div {
  display: flex;
  flex-flow: nowrap;
  width: 638px;
}
#wrapper[role=history] .whiteBg #y2018 .yBody div:nth-of-type(2) > div span:nth-of-type(1) {
  transform: translate(40px, 0px);
}
#wrapper[role=history] .whiteBg #y2018 .yBody div:nth-of-type(2) > div span:nth-of-type(2) {
  transform: translate(-40px, 0px);
}

/* [수정] 230927 동영상 애니메이션 차단
#wrapper[role=history] #y2022 > section:nth-of-type(1) {
  margin-bottom: 30px;
}
#wrapper[role=history] #y2022 > section:nth-of-type(1) p {
  font-size: 24px;
  font-weight: 600;
  text-align: center;
}
#wrapper[role=history] #y2022 .yBody {
  position: relative;
  margin: 0 -40px;
}
#wrapper[role=history] #y2022 .yBody h3 {
  margin-top: 0;
}
#wrapper[role=history] #y2022 .videoArea {
  width: 1360px !important;
  height: 763px !important;
  position: relative;
  transition: 2s clip-path cubic-bezier(0.71, -0.04, 0, 1), 2s aspect-ratio cubic-bezier(0.71, -0.04, 0, 1); /* max-height: calc(100vh - 50px);
  margin: 0 auto;
  clip-path: circle(100%);
  aspect-ratio: 1/1;
  aspect-ratio: 0.4627487274;
}
@supports not (aspect-ratio: 0.4627487274) {
  #wrapper[role=history] #y2022 .videoArea::before {
    content: "";
    float: left;
    padding-top: calc((2.161 / 1) * 100%);
  }
  #wrapper[role=history] #y2022 .videoArea::after {
    content: "";
    display: block;
    clear: both;
  }
}
#wrapper[role=history] #y2022 .videoArea video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  object-fit: cover;
}
#wrapper[role=history] #y2022 .videoArea video:nth-of-type(1) {
  opacity: 1;
  transition: 0.5s width ease-in-out;
  height: 100%;
}
#wrapper[role=history] #y2022 .videoArea video:nth-of-type(2) {
  opacity: 0;
  transition: 2s width cubic-bezier(0.42, 0, 0.87, 0.33);
  height: 100%;
}
#wrapper[role=history] #y2022 .videoArea + button {
  display: block;
  position: absolute;
  left: 280px;
  bottom: 157px;
  color: #fff;
  font-size: 30px;
  font-weight: 400;
}
#wrapper[role=history] #y2022 .videoArea.on {
  height: calc(100vh - 80px) !important;
}
#wrapper[role=history] #y2022 .videoArea.on video {
  width: 100vw;
}
#wrapper[role=history] #y2022 .videoArea.ended {
  clip-path: circle(30%);
  aspect-ratio: 1/1;
}
#wrapper[role=history] #y2022 .videoArea.ended video:nth-of-type(1) {
  opacity: 0;
}
#wrapper[role=history] #y2022 .videoArea.ended video:nth-of-type(2) {
  opacity: 1;
  width: 80%;
}
#wrapper[role=history] #y2022 .videoArea.ended + button {
  display: none;
}
#wrapper[role=history] #y2022 .videoArea.none {
  transition: none;
}
#wrapper[role=history] #y2022 section:nth-of-type(2) {
  position: relative;
}
#wrapper[role=history] #y2022 section:nth-of-type(3) {
  margin-top: 20px;
}
#wrapper[role=history] #y2022 section:nth-of-type(3) strong, #wrapper[role=history] #y2022 section:nth-of-type(3) em, #wrapper[role=history] #y2022 section:nth-of-type(3) p {
  display: block;
  text-align: center;
}
#wrapper[role=history] #y2022 section:nth-of-type(3) strong {
  margin-bottom: 20px;
  font-size: 35px;
  font-weight: 400;
  line-height: 42px;
  letter-spacing: -0.4px;
  transition: 0.5s 1.5s all;
}
#wrapper[role=history] #y2022 section:nth-of-type(3) em {
  margin-bottom: 8px;
  line-height: 35px;
  font-size: 24px;
  font-weight: 700;
  font-family: "Noto Sans KR", sans-serif;
}
#wrapper[role=history] #y2022 section:nth-of-type(3) p {
  font-size: 18px;
  line-height: 28px;
  font-family: "Noto Sans KR", sans-serif;
}
*/


/***** brands *****/
#wrapper[role=brands] main {
  display: flex;
  flex-flow: column wrap;
}
#wrapper[role=brands] main #btn_ssf {
  position: fixed;
  right: 20px;
  bottom: 16px;
  width: 58px;
  height: 58px;
  background: url(../../static/static/images/btn/btn_ssf.png) no-repeat center/58px 58px;
  z-index: 1;
}
#wrapper[role=brands] .ico_chat {
  display: inline-block;
  width: 32px;
  height: 19px;
  align-self: center;
}
#wrapper[role=brands] .ico_chat {
  position: relative;
}
#wrapper[role=brands] .ico_chat:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='19' viewBox='0 0 32 19'%3E%3Cg id='ic_chat' transform='translate(0.321 -0.249)'%3E%3Cpath id='합치기_2' data-name='합치기 2' d='M7.136,19H1.362l5.863-7.307H13L7.137,19h0ZM0,11.692V0H13V11.692Z' transform='translate(-0.321 0.249)' fill='%23144835'/%3E%3Cpath id='합치기_4' data-name='합치기 4' d='M7.136,19H1.362l5.863-7.307H13L7.137,19h0ZM0,11.692V0H13V11.692Z' transform='translate(18.679 0.249)' fill='%23144835'/%3E%3C/g%3E%3C/svg%3E%0A") center center/32px 19px;
}
#wrapper[role=brands] h3.phrase {
  margin-top: 18px;
  font-size: 20px;
  line-height: 32px;
  text-align: center;
}
#wrapper[role=brands] .listTypeB {
  text-align: center;
  font-size: 18px;
  line-height: 20px;
}
#wrapper[role=brands] .listTypeB .vid {
  position: relative;
}
#wrapper[role=brands] .listTypeB .vid .ico_play {
  position: absolute !important;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 5;
}
#wrapper[role=brands] .listTypeB .vid .ico_play {
  position: relative;
}
#wrapper[role=brands] .listTypeB .vid .ico_play:before {
  content: "";
  position: absolute;
  right: 40px;
  bottom: 40px;
  width: 58px;
  height: 58px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 49 49'%3E%3Cg id='group_597' data-name='group 597' transform='translate(-588.5 -836)'%3E%3Ccircle id='oval_2' data-name='oval 2' cx='23' cy='23' r='23' transform='translate(590 837.5)' fill='none' stroke='%23fff' stroke-width='3'/%3E%3Cg id='다각형_1' data-name='다각형 1' transform='translate(623.273 851.001) rotate(90)' fill='%23fff'%3E%3Cpath d='M 18.19575119018555 15 L 1.804250955581665 15 L 10.00000095367432 1.886800050735474 L 18.19575119018555 15 Z' stroke='none'/%3E%3Cpath d='M 10.00000095367432 3.773599624633789 L 3.608501434326172 14 L 16.39150047302246 14 L 10.00000095367432 3.773599624633789 M 10.00000095367432 0 L 20 16 L 1.9073486328125e-06 16 L 10.00000095367432 0 Z' stroke='none' fill='%23fff'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A") no-repeat;
}
#wrapper[role=brands] .listTypeB .vid .videoArea {
  display: none;
}
#wrapper[role=brands] .listTypeB ul li {
  padding-bottom: 0;
}
#wrapper[role=brands] .listTypeB ul li a {
  width: 100%;
}
#wrapper[role=brands] .listTypeB ul li a img {
  width: 100%;
}
#wrapper[role=brands] .imageSlideArea {
  position: fixed;
  display: none;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  flex-flow: column;
  z-index: 150;
  min-width: 1240px;
}
#wrapper[role=brands] .imageSlideArea .swiper-wrapper {
  height: 100%;
  width: 100%;
}
#wrapper[role=brands] .imageSlideArea .btn_close {
  position: absolute;
  right: 80px;
  top: 80px;
  width: 40px;
  height: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg id='ic_close_54' transform='translate(-10 -10)'%3E%3Crect id='square_647' data-name='square 647' width='40' height='40' transform='translate(10 10)' fill='none'/%3E%3Cpath id='path_35' data-name='path 35' d='M40,8.525,36.475,5,22.5,18.975,8.525,5,5,8.525,18.975,22.5,5,36.475,8.525,40,22.5,26.025,36.475,40,40,36.475,26.025,22.5Z' transform='translate(7.5 7.5)' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat;
  z-index: 2;
}
#wrapper[role=brands] .imageSlideArea .swiper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
#wrapper[role=brands] .imageSlideArea .swiper-slide {
  height: 100%;
  text-align: center;
  align-self: center;
}
#wrapper[role=brands] .imageSlideArea .swiper-slide a:first-of-type {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  margin: 0 auto;
  height: 100%;
  aspect-ratio: 0.6666666667;
}
@supports not (aspect-ratio: 0.6666666667) {
  #wrapper[role=brands] .imageSlideArea .swiper-slide a:first-of-type::before {
    content: "";
    float: left;
    padding-top: calc((3 / 2) * 100%);
  }
  #wrapper[role=brands] .imageSlideArea .swiper-slide a:first-of-type::after {
    content: "";
    display: block;
    clear: both;
  }
}
#wrapper[role=brands] .imageSlideArea .swiper-slide a:first-of-type img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#wrapper[role=brands] .imageSlideArea .swiper-slide.vid .videoArea {
  position: relative;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
}
#wrapper[role=brands] .imageSlideArea .swiper-slide.vid .videoArea video {
  width: 100%;
  height: 100%;
  max-width: 660px;
}
#wrapper[role=brands] .imageSlideArea .slideControlArea {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}
#wrapper[role=brands] .imageSlideArea .swiper-pagination {
  position: absolute;
  width: auto;
  height: 16px;
  color: #fff;
  line-height: 1;
  top: 6%;
  left: 50%;
  transform: translateX(-50%);
}
#wrapper[role=brands] .imageSlideArea .swiper-pagination span {
  font-family: "Halvar Breitschrift", sans-serif;
}
#wrapper[role=brands] .imageSlideArea .ico_enlarge {
  position: relative !important;
  margin-top: 24px;
  padding: 12px 40px 11px 18px;
  color: #fff;
  font-size: 20px;
  border: 1px solid #fff;
  border-radius: 47px;
}
#wrapper[role=brands] .imageSlideArea .ico_enlarge {
  position: absolute;
}
#wrapper[role=brands] .imageSlideArea .ico_enlarge:after {
  content: "";
  position: absolute;
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 2px;
  background: #fff;
}
#wrapper[role=brands] .imageSlideArea .ico_enlarge {
  position: absolute;
}
#wrapper[role=brands] .imageSlideArea .ico_enlarge:before {
  content: "";
  position: absolute;
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 15px;
  background: #fff;
}
#wrapper[role=brands] .imageSlideArea .swiper-prev,
#wrapper[role=brands] .imageSlideArea .swiper-next {
  position: absolute !important;
  top: 50%;
  left: 50%;
  cursor: pointer;
  width: 50px;
  height: 50px;
  margin-top: -25px;
  margin-left: -400px;
  z-index: 10;
}
#wrapper[role=brands] .imageSlideArea .swiper-prev,
#wrapper[role=brands] .imageSlideArea .swiper-next {
  position: relative;
}
#wrapper[role=brands] .imageSlideArea .swiper-prev:before,
#wrapper[role=brands] .imageSlideArea .swiper-next:before {
  content: "";
  position: absolute;
  top: 9px;
  left: 9px;
  width: 32px;
  height: 32px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg id='ic_previous_40' transform='translate(737.5 6311.016) rotate(180)'%3E%3Cg id='group_762' data-name='group 762' transform='translate(733.512 6280.016) rotate(90)'%3E%3Cpath id='path_99' data-name='path 99' d='M0,10.554,11.169,0,22.34,10.554' fill='none' stroke='%23fff' stroke-width='4'/%3E%3Cpath id='path_100' data-name='path 100' d='M0,0V32.024' transform='translate(11.17)' fill='none' stroke='%23fff' stroke-width='4'/%3E%3C/g%3E%3Crect id='square_19799' data-name='square 19799' width='40' height='40' transform='translate(697.5 6271.016)' fill='none'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat center center/100%;
}
#wrapper[role=brands] .imageSlideArea .swiper-prev:hover:before,
#wrapper[role=brands] .imageSlideArea .swiper-next:hover:before {
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-name: slideInLeft;
}
#wrapper[role=brands] .imageSlideArea .swiper-next {
  left: auto;
  right: 50%;
  margin-right: -400px;
  transform: rotate(180deg);
}
#wrapper[role=brands] .btnArea {
  padding-top: 140px;
}
#wrapper[role=brands] .maxArea {
  display: none;
  position: fixed !important;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 150;
  overflow-x: auto;
  overflow-y: auto;
}
#wrapper[role=brands] .maxArea img {
  max-width: initial;
}
#wrapper[role=brands] .maxArea .ico_close {
  bottom: 4%;
  left: 50%;
  padding: 10px 40px 8px 18px;
  transform: translateX(-50%);
  color: #000;
  font-size: 16px;
  line-height: 22px;
  border: 1px solid #fff;
  border-radius: 40px;
  background: #fff;
}
#wrapper[role=brands] .maxArea .ico_close {
  position: fixed;
}
#wrapper[role=brands] .maxArea .ico_close:after {
  content: "";
  position: absolute;
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27.029' height='27.028' viewBox='0 0 27.029 27.028'%3E%3Cg id='close_ic' transform='translate(-19166.793 13553.207)'%3E%3Cline id='선_59' data-name='선 59' y1='25.614' x2='25.614' transform='translate(19167.5 -13552.5)' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cline id='선_60' data-name='선 60' x1='25.614' y1='25.614' transform='translate(19167.5 -13552.5)' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat center center/100%;
}
#wrapper[role=brands] .maxArea.showZoom {
  display: block;
  background: rgb(1, 1, 1);
  user-select: none;
}
#wrapper[role=brands] .maxArea.showZoom .imgArea {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
}
#wrapper[role=brands] .zoomArea {
  display: none;
  position: fixed !important;
  width: 100%;
  height: 100%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  background: rgba(0, 0, 0, 0.9);
}
#wrapper[role=brands] .zoomArea .pinch-zoom-container {
  width: 100%;
  height: 100%;
  overflow: visible !important;
}
#wrapper[role=brands] .zoomArea .pinch-zoom-container .pinch-zoom img {
  max-width: none; /*transform: scale(1.5)*/
}
#wrapper[role=brands] .zoomArea .ico_close {
  bottom: 4%;
  left: 50%;
  padding: 8px 40px 8px 18px;
  transform: translateX(-50%);
  color: #fff;
  font-size: 16px;
  line-height: 22px;
  border: 1px solid #fff;
  border-radius: 40px;
}
#wrapper[role=brands] .zoomArea .ico_close {
  position: fixed;
}
#wrapper[role=brands] .zoomArea .ico_close:after {
  content: "";
  position: absolute;
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg id='ic_close_54' transform='translate(-10 -10)'%3E%3Crect id='square_647' data-name='square 647' width='40' height='40' transform='translate(10 10)' fill='none'/%3E%3Cpath id='path_35' data-name='path 35' d='M40,8.525,36.475,5,22.5,18.975,8.525,5,5,8.525,18.975,22.5,5,36.475,8.525,40,22.5,26.025,36.475,40,40,36.475,26.025,22.5Z' transform='translate(7.5 7.5)' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat center center/100%;
}
#wrapper[role=brands] .zoomArea.showZoom {
  display: block;
}
#wrapper[role=brands] .btnArea {
  text-align: center;
  margin-top: 0;
}
#wrapper[role=brands] .btnArea #btnLb {
  padding: 14px 40px;
  background: #111;
  border-radius: 52px;
  font-size: 16px;
  color: #fff;
  text-align: center;
  font-weight: 500;
}
#wrapper[role=brands] #lbListPop {
  padding: 32px 42px 42px;
  background: #fff;
  width: 1170px;
}
#wrapper[role=brands] #lbListPop .btn_close {
  position: absolute;
  right: 42px;
  top: 42px;
  align-self: flex-end;
  width: 28px;
  height: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27.029' height='27.028' viewBox='0 0 27.029 27.028'%3E%3Cg id='close_ic' transform='translate(-19166.793 13553.207)'%3E%3Cline id='선_59' data-name='선 59' y1='25.614' x2='25.614' transform='translate(19167.5 -13552.5)' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cline id='선_60' data-name='선 60' x1='25.614' y1='25.614' transform='translate(19167.5 -13552.5)' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat;
  z-index: 2;
}
#wrapper[role=brands] #lbListPop h4 {
  font-size: 32px;
  margin-top: 8px;
  margin-bottom: 59px;
  line-height: 1;
}
#wrapper[role=brands] #lbListPop ul {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-bottom: 40px;
}
#wrapper[role=brands] #lbListPop ul li a {
  display: block;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}
#wrapper[role=brands] #lbListPop ul li .thumb {
  margin-bottom: 20px;
  width: 240px;
  aspect-ratio: 0.6666666667;
}
@supports not (aspect-ratio: 0.6666666667) {
  #wrapper[role=brands] #lbListPop ul li .thumb::before {
    content: "";
    float: left;
    padding-top: calc((3 / 2) * 100%);
  }
  #wrapper[role=brands] #lbListPop ul li .thumb::after {
    content: "";
    display: block;
    clear: both;
  }
}
#wrapper[role=brands] #lbListPop ul li .thumb img {
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid #efefef;
}
#wrapper[role=brands] #lbListPop .swiper-scrollbar {
  border-radius: 0;
}
#wrapper[role=brands] #lbListPop .swiper-scrollbar.swiper-scrollbar-horizontal {
  background: rgba(17, 17, 17, 0.2);
}
#wrapper[role=brands] #lbListPop .swiper-scrollbar .swiper-scrollbar-drag {
  background: #111;
  border-radius: 0;
}

@media screen and (min-width: 1760px) {
  #wrapper[role=brands] main {
    width: 1760px;
    padding-left: 20px;
    padding-right: 20px;
  }
}
/***** journal *****/
#wrapper[role=collabo] main .logoArea {
  max-width: 60%;
  margin: 0 auto;
  text-align: center;
}
#wrapper[role=collabo] .editArea h4 {
  margin: 34px 0 18px;
  font-size: 18px;
  font-weight: 600;
}
#wrapper[role=collabo] .editArea div {
  font-size: 16px;
  font-weight: 500;
  font-family: "Noto Sans KR", sans-serif !important;
  line-height: 26px;
}

#collabo {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
#collabo .visual {
  height: 700px;
}
#collabo .visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#collabo .contents {
  position: relative;
  background: #fff;
  z-index: 2;
}
#collabo .titleArea {
  padding-top: 200px;
  padding-bottom: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
}
#collabo .titleArea em {
  font-size: 32px;
  line-height: 38px;
  color: #666;
}
#collabo .titleArea strong {
  padding-top: 10px;
  font-size: 70px;
  line-height: 80px;
  font-weight: 600;
  color: #111;
}
#collabo .titleArea span {
  padding-top: 32px;
  font-size: 32px;
  line-height: 46px;
  color: #111;
}
#collabo .titleArea p {
  padding-top: 60px;
  font-size: 24px;
  line-height: 36px;
  text-align: center;
  color: #000;
}
#collabo .editArea {
  padding-bottom: 140px;
}
#collabo .trigger {
  position: relative;
  transform: translateY(100px);
  opacity: 0;
  transition: 0.5s all linear;
}
#collabo .trigger.on {
  transform: translateY(0);
  opacity: 1;
}

#collaboA {
  width: 100% !important;
  padding: 0 0 200px 0 !important;
}
#collaboA .headArea {
  position: relative;
  padding: 63px 0;
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
  min-width: 1200px;
  height: calc(100vh - 200px);
}
#collaboA .headArea img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#collaboA .headArea .slideText {
  position: absolute;
  width: 100%;
  transition: 0.5s all;
  left: 0;
  top: 0;
  opacity: 1;
  background: #144835;
  z-index: 5;
}
#collaboA .headArea .slideText span {
  display: flex;
  flex-flow: nowrap;
  position: relative;
  align-items: center;
  height: 63px;
}
#collaboA .headArea .slideText span em {
  display: block;
  padding: 0 10px;
  transition: 4s transform linear, 0s opacity linear;
  font-size: 34px;
  font-style: normal;
  white-space: nowrap;
  opacity: 1;
  color: #fff;
}
#collaboA .headArea .slideText span em.opacity {
  opacity: 0;
}
#collaboA .headArea .slideText.reverse {
  top: auto;
  bottom: 0;
}
#collaboA .headArea .slideText.reverse span {
  justify-content: flex-end;
}
#collaboA .headArea.off .slideText:nth-of-type(1) {
  left: 100%;
  opacity: 0;
}
#collaboA .headArea.off .slideText:nth-of-type(2) {
  left: -100%;
  opacity: 0;
}
#collaboA .titleArea {
  padding: 0 0 100px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
}
#collaboA .titleArea .text {
  display: flex;
  justify-content: center;
  flex-flow: column;
  align-items: center;
  text-align: center;
}
#collaboA .titleArea .text .title, #collaboA .titleArea .text span {
  font-size: 70px;
  line-height: 80px;
  font-weight: 600;
}
#collaboA .titleArea .text span {
  padding: 16px 0;
  font-size: 60px;
  text-align: center;
  transition: 0.8s all cubic-bezier(0, -0.01, 0, 0.99);
}
#collaboA .titleArea em {
  padding-top: 40px;
  font-weight: 600;
  font-size: 40px;
  line-height: 46px;
  text-align: center;
  color: #111;
}
#collaboA .trigger {
  position: relative;
  transform: translateY(100px);
  opacity: 0;
  transition: 0.5s all linear;
}
#collaboA .trigger.on {
  transform: translateY(0);
  opacity: 1;
}

#collaboB {
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#collaboB .bgArea {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
#collaboB .headArea {
  overflow: hidden;
  text-align: center;
}
#collaboB .headArea div.text {
  display: flex;
  justify-content: center;
  flex-flow: column;
  width: 100%;
  height: calc(100vh - 81px);
  padding: 0 20px;
  align-items: center;
  min-height: 400px;
  transform: scale(4);
  transition: 0.5s all cubic-bezier(0, -0.01, 0, 0.99);
  text-align: center;
  opacity: 0;
}
#collaboB .headArea div.text .title, #collaboB .headArea div.text span {
  font-size: 70px;
  line-height: 80px;
  font-weight: 600;
  color: #fff;
}
#collaboB .headArea div.text span {
  padding: 16px 0;
  font-size: 60px;
  text-align: center;
  transform: rotate(360deg);
  transition: 0.8s all cubic-bezier(0, -0.01, 0, 0.99);
}
#collaboB .headArea div.text.on {
  transform: scale(1);
  opacity: 1;
}
#collaboB .headArea div.text.on span {
  transform: rotate(0);
}
#collaboB .titleArea {
  margin: 130px 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}
#collaboB .titleArea strong {
  font-size: 70px;
  line-height: 80px;
  color: #fff;
  font-weight: 600;
}
#collaboB .titleArea em {
  margin-top: 20px;
  font-size: 32px;
  line-height: 40px;
  color: #faf8f1;
}
#collaboB .editArea {
  color: #fff;
}
#collaboB .editArea .typeText {
  text-align: center;
}
#collaboB .editArea .typeText strong, #collaboB .editArea .typeText p {
  color: #fff;
}
#collaboB .trigger {
  position: relative;
  transform: translateY(0);
  opacity: 0;
  transition: 0.5s all linear;
}
#collaboB .trigger.on {
  transform: translateY(-100px);
  opacity: 1;
}

.editArea > div {
  margin-bottom: 40px;
}
.editArea > div:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
}
.editArea > div:last-of-type::after, .editArea > div:last-of-type::before {
  display: none;
}
.editArea video {
  width: 100%;
}

#wrapper[role=campaign] main .logoArea {
  max-width: 60%;
  margin: 0 auto;
}
#wrapper[role=campaign] main.contentsDetail {
  padding-bottom: 200px;
}

#campaign {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
#campaign .visual {
  height: 700px;
}
#campaign .visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#campaign .contents {
  position: relative;
  background: #fff;
  z-index: 2;
}
#campaign .titleArea {
  padding-top: 200px;
  padding-bottom: 80px;
  display: flex;
  justify-content: center;
  flex-flow: column;
  text-align: center;
}
#campaign .titleArea em {
  font-size: 32px;
  line-height: 38px;
  color: #666;
}
#campaign .titleArea strong {
  padding-top: 10px;
  font-size: 70px;
  line-height: 80px;
  font-weight: 600;
  color: #111;
}
#campaign .titleArea span {
  padding-top: 32px;
  font-size: 32px;
  line-height: 46px;
  color: #111;
}
#campaign .titleArea p {
  padding-top: 60px;
  font-size: 24px;
  line-height: 36px;
  text-align: center;
  color: #000;
}
#campaign .editArea {
  padding-bottom: 140px;
}
#campaign .typeText {
  text-align: center;
}
#campaign .trigger {
  position: relative;
  transform: translateY(100px);
  opacity: 0;
  transition: 0.5s all linear;
}
#campaign .trigger.on {
  transform: translateY(0);
  opacity: 1;
}

#campaignA {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
#campaignA .headArea {
  margin-bottom: -250px;
}
#campaignA .headArea .cover {
  transition: 0.5s all ease-out;
  clip-path: circle(100%);
  margin-top: -150px;
}
#campaignA .headArea .slideImg {
  position: relative;
  transition: 0.2s all;
  left: 0;
  opacity: 1;
}
#campaignA .headArea .slideImg li {
  transition: left 0.5s cubic-bezier(0, 0, 1, 1);
  position: relative;
  left: -400px;
  display: flex;
  flex-flow: nowrap;
  margin-bottom: 10px;
}
#campaignA .headArea .slideImg li span {
  flex-basis: 400px;
  padding: 0 5px;
  flex-shrink: 0;
  transition: 2s transform linear, 0s opacity linear;
  opacity: 1;
}
#campaignA .headArea .slideImg li span.opacity {
  opacity: 0;
}
#campaignA .headArea .slideImg li span.active {
  transform: translateX(-100%);
}
#campaignA .headArea .slideImg li span.r_active {
  transform: translateX(100%);
}
#campaignA .headArea .slideImg li.reverse {
  flex-direction: row-reverse;
  left: 400px;
}
#campaignA .headArea.off .cover {
  clip-path: circle(15%);
}
#campaignA .headArea.off .slideImg {
  transform: scale(0.8);
}
#campaignA .headArea.off ~ .bodyArea {
  margin-top: -320px;
}
#campaignA .titleArea {
  padding-bottom: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
}
#campaignA .titleArea em {
  font-size: 32px;
  line-height: 52px;
  color: #666;
}
#campaignA .titleArea strong {
  padding-top: 14px;
  font-size: 33px;
  color: #444;
  line-height: 46px;
  text-align: center;
  width: 80%;
}
#campaignA .titleArea span {
  padding-top: 16px;
  font-size: 70px;
  color: #111;
  line-height: 80px;
  font-weight: 600;
}
#campaignA .editArea {
  padding-bottom: 140px;
}
#campaignA .editArea .typeText {
  width: 100%;
}

#campaignB {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
#campaignB .titleArea {
  width: 1200px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  padding-bottom: 50px;
  height: calc(100vh - 81px - 119px);
  justify-content: center;
  flex-flow: column;
  text-align: center;
}
#campaignB .titleArea strong {
  padding-top: 21px;
  font-weight: 600;
  font-size: 70px;
  line-height: 80px;
  color: #111;
}
#campaignB .titleArea span {
  font-size: 32px;
  line-height: 52px;
  color: #666;
}
#campaignB .headImg {
  transform: scale(0.5);
  margin-top: 90px;
  text-align: center;
}
#campaignB .editArea {
  padding-bottom: 0;
}
#campaignB .typeText {
  text-align: center;
}
#campaignB .trigger {
  position: relative;
  transform: translateY(100px);
  opacity: 0;
  transition: 0.5s all linear;
}
#campaignB .trigger.on {
  transform: translateY(0);
  opacity: 1;
}

#wrapper[role=snap] main {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

#snapList .headArea {
  margin-top: 80px;
}
#snapList .headArea .swiper-slide {
  background: #F5F0ED;
}
#snapList .headArea .contents {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#snapList .headArea .contents > div {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 600px;
}
#snapList .headArea .contents > div b {
  display: block;
  font-weight: 700;
  font-size: 32px;
  color: #000;
  line-height: 1.43;
  opacity: 0;
  transform: translateY(50px);
  transition: 0.3s all ease-in-out;
  transition-delay: 0.6s;
}
#snapList .headArea .contents > div span {
  display: block;
  font-size: 22px;
  text-align: left;
  color: #333;
  line-height: 32px;
  opacity: 0;
  transform: translateY(50px);
  transition: 0.3s all ease-in-out;
  transition-delay: 0.7s;
}
#snapList .headArea .contents > figure {
  transition: 0.3s all ease-in-out;
  transition-delay: 0.8s;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
  align-self: flex-end;
  margin-bottom: 40px;
  border: 20px solid #fff;
}
#snapList .headArea .contents > figure {
  position: relative;
}
#snapList .headArea .contents > figure:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 50px;
  background: url(/static/images/etc/img_tape.png) no-repeat center/207px 50px;
  top: -45px;
  left: 0;
  transform: rotate(-18deg);
  z-index: 12;
}
#snapList .headArea .contents > figure img {
  width: 440px;
  aspect-ratio: 0.8115942029;
  object-fit: cover;
}
@supports not (aspect-ratio: 0.8115942029) {
  #snapList .headArea .contents > figure img::before {
    content: "";
    float: left;
    padding-top: calc((69 / 56) * 100%);
  }
  #snapList .headArea .contents > figure img::after {
    content: "";
    display: block;
    clear: both;
  }
}
#snapList .headArea .swiper-slide-active .contents > div b {
  opacity: 1;
  transform: translateY(0);
}
#snapList .headArea .swiper-slide-active .contents > div span {
  opacity: 1;
  transform: translateY(0);
}

@media screen and (max-width: 1760px) {
  #snapList .headArea .contents {
    padding: 0 18px;
  }
}
#snapDetail .visualWrapper {
  background-color: #f5f0ed;
}
#snapDetail .visualWrapper figure {
  padding-left: 45px;
  flex: none;
}
#snapDetail .visualWrapper figure img {
  aspect-ratio: 0.8115942029;
}
@supports not (aspect-ratio: 0.8115942029) {
  #snapDetail .visualWrapper figure img::before {
    content: "";
    float: left;
    padding-top: calc((69 / 56) * 100%);
  }
  #snapDetail .visualWrapper figure img::after {
    content: "";
    display: block;
    clear: both;
  }
}
#snapDetail .visualWrapper .visual {
  display: flex;
  align-items: center;
  gap: 100px;
  height: 690px;
}
#snapDetail .visualWrapper .visual .content {
  display: flex;
  flex-direction: column;
  overflow-x: auto;
}
#snapDetail .visualWrapper .visual .content span {
  font-size: 19px;
  color: #000;
}
#snapDetail .visualWrapper .visual .content strong {
  margin-top: 30px;
  font-weight: 600;
  font-size: 48px;
  line-height: 64px;
  color: #000;
  word-break: break-word;
}
#snapDetail .visualWrapper .visual .content p {
  margin-top: 16px;
  font-size: 16px;
  line-height: 24px;
  color: #333;
}
#snapDetail .typeText {
  text-align: left;
}

#wrapper[role=mastery] main {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
#wrapper[role=mastery] .tabMenu {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 140px;
  height: 80px;
}
#wrapper[role=mastery] .tabMenu li {
  padding: 0 40px;
}
#wrapper[role=mastery] .tabMenu a {
  display: inline-block;
  text-align: center;
  color: rgba(17, 17, 17, 0.5);
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
  height: 36px;
  transition: all 0.2s ease-in-out;
}
#wrapper[role=mastery] .tabMenu a {
  position: relative;
}
#wrapper[role=mastery] .tabMenu a:after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  background: #fff;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  transition: all 0.2s ease-in-out;
}
#wrapper[role=mastery] .tabMenu a.on {
  font-weight: 700;
  color: rgb(17, 17, 17);
}
#wrapper[role=mastery] .tabMenu a.on {
  position: relative;
}
#wrapper[role=mastery] .tabMenu a.on:after {
  content: "";
  position: absolute;
  width: 100%;
  background: #111;
}
#wrapper[role=mastery] .tabMenu a:hover {
  position: relative;
}
#wrapper[role=mastery] .tabMenu a:hover:after {
  content: "";
  position: absolute;
  width: 100%;
  background: rgba(17, 17, 17, 0.3);
}

#masteryList .headArea {
  padding-top: 80px;
}
#masteryList .headArea .swiper-slide {
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
}
#masteryList .headArea .swiper-slide > a {
  display: block;
  width: 100%;
  height: 100%;
}
#masteryList .headArea .contents {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#masteryList .headArea .contents > div {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 600px;
}
#masteryList .headArea .contents > div b {
  display: block;
  font-weight: 700;
  font-size: 32px;
  color: #fff;
  line-height: 1.43;
  opacity: 0;
  transform: translateY(50px);
  transition: 0.3s all ease-in-out;
  transition-delay: 0.6s;
}
#masteryList .headArea .contents > div span {
  display: block;
  font-size: 22px;
  text-align: left;
  color: #fff;
  line-height: 32px;
  opacity: 0;
  transform: translateY(50px);
  transition: 0.3s all ease-in-out;
  transition-delay: 0.7s;
}
#masteryList .headArea .contents > figure {
  box-shadow: 10px 10px 20px #707070;
  align-self: flex-end;
  margin-bottom: 40px;
  border: 20px solid #fff;
}
#masteryList .headArea .contents > figure {
  position: relative;
}
#masteryList .headArea .contents > figure:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 50px;
  background: url(/static/images/etc/img_tape.png) no-repeat center/207px 50px;
  top: -45px;
  left: 0;
  transform: rotate(-18deg);
  z-index: 12;
}
#masteryList .headArea .swiper-slide-active .contents > div b {
  opacity: 1;
  transform: translateY(0);
}
#masteryList .headArea .swiper-slide-active .contents > div span {
  opacity: 1;
  transform: translateY(0);
}

#masteryDetail {
  padding-bottom: 200px !important;
}
#masteryDetail .editArea {
  padding-top: 0;
}
#masteryDetail .editArea img {
  width: 100%;
}
#masteryDetail .relatedArea {
  padding: 50px 0 50px 20px;
  background: #144835;
}
#masteryDetail .relatedArea strong.title {
  display: block;
  margin-bottom: 30px;
  font-size: 34px;
  line-height: 50px;
  font-weight: 600;
  color: #fff;
}
#masteryDetail .relatedArea .swiper-slide a {
  display: flex;
  align-items: center;
  gap: 66px;
}
#masteryDetail .relatedArea .swiper-slide .thumb {
  aspect-ratio: 1/1;
  overflow: hidden;
  position: relative;
  width: 440px;
  height: 440px;
  background-size: cover;
  background-position: center;
}
#masteryDetail .relatedArea .swiper-slide .content {
  display: flex;
  flex-direction: column;
}
#masteryDetail .relatedArea .swiper-slide .content span {
  font-size: 16px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.7);
}
#masteryDetail .relatedArea .swiper-slide .content b {
  margin-top: 12px;
  font-size: 26px;
  font-weight: 600;
  line-height: 36px;
  color: #fff;
}
#masteryDetail .relatedArea .swiper-slide .content p {
  margin-top: 12px;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: rgba(255, 255, 255, 0.8);
}
#masteryDetail .relatedArea .swiperControls {
  width: 230px;
  margin: 0 auto;
}
#masteryDetail .relatedArea .swiperControls .swiper-next {
  transform: unset;
}
#masteryDetail .relatedArea .swiperControls .swiper-prev, #masteryDetail .relatedArea .swiperControls .swiper-next {
  top: unset;
  margin-top: unset;
}

#wrapper[role=good] main,
#wrapper[role=goodCare] main {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
#wrapper[role=good] .headArea,
#wrapper[role=goodCare] .headArea {
  position: relative;
  display: flex;
  align-items: center;
  height: 680px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  aspect-ratio: auto;
}
#wrapper[role=good] .headArea .textArea,
#wrapper[role=goodCare] .headArea .textArea {
  display: flex;
  flex-flow: column;
  color: #000;
  width: 1200px;
  margin: 0 auto;
}
#wrapper[role=good] .headArea .textArea strong,
#wrapper[role=goodCare] .headArea .textArea strong {
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
  color: inherit;
}
#wrapper[role=good] .headArea .textArea span,
#wrapper[role=goodCare] .headArea .textArea span {
  margin-top: 20px;
  font-size: 22px;
  font-weight: 400;
  line-height: 32px;
  color: inherit;
}
#wrapper[role=good] .headArea .textArea p,
#wrapper[role=goodCare] .headArea .textArea p {
  margin-top: 30px;
  color: inherit;
  line-height: 32px;
  font-size: 20px;
}

#goodExperience .headArea {
  background-image: url(/static/images/goodActivity/img_header2.jpg);
}
#goodExperience .bodyArea {
  padding-top: 140px;
}
#goodExperience .bodyArea .contentsSize > div {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 3px solid #111;
  padding-bottom: 26px;
}
#goodExperience .bodyArea .contentsSize > div h3 {
  font-weight: 600;
  font-size: 60px;
  line-height: 70px;
  text-align: left;
  color: #000;
}
#goodExperience .bodyArea .contentsSize > div p {
  font-size: 20px;
  letter-spacing: -0.01em;
  line-height: 32px;
  text-align: left;
  color: #000;
  padding-bottom: 6px;
}
#goodExperience .bodyArea .contentsSize figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 72px;
  height: 354px;
  background: url(/static/images/goodActivity/cont2_bg.jpg) no-repeat 0 0;
}
#goodExperience .bodyArea .contentsSize figure strong {
  display: block;
  font-weight: bold;
  font-size: 30px;
  letter-spacing: -0.04em;
  line-height: 44px;
  padding-bottom: 54px;
  text-align: center;
  color: #fff;
}
#goodExperience .bodyArea .contentsSize figure strong span {
  font-size: 24px;
  font-weight: 400;
}
#goodExperience .bodyArea .contentsSize figure ul {
  display: flex;
  gap: 240px;
}
#goodExperience .bodyArea .contentsSize figure ul li {
  display: flex;
}
#goodExperience .bodyArea .contentsSize figure ul li span.num {
  color: #fff;
  font-size: 120px;
  padding-top: 28px;
}
#goodExperience .bodyArea .contentsSize figure ul li .num .ns {
  display: inline-block;
  padding-right: 20px;
}
#goodExperience .bodyArea .contentsSize figure ul li div.ns {
  color: #fff;
  font-size: 30px;
  font-weight: 400;
  margin-left: 24px;
  padding-top: 50px;
}
#goodExperience .bodyArea .contentsSize > ul {
  display: flex;
  margin-top: 80px;
  justify-content: center;
}
#goodExperience .bodyArea .contentsSize > ul li {
  width: 33.3%;
  padding: 0 20px;
}
#goodExperience .bodyArea .contentsSize > ul li {
  position: relative;
}
#goodExperience .bodyArea .contentsSize > ul li:before {
  content: "";
  position: absolute;
  width: 1px;
  height: 130px;
  background: #444;
  left: 0;
  top: 0;
  opacity: 0.3;
}
#goodExperience .bodyArea .contentsSize > ul li:first-of-type:before {
  display: none;
}
#goodExperience .bodyArea .contentsSize > ul li strong {
  display: block;
  text-align: center;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.04em;
  line-height: 36px;
}
#goodExperience .bodyArea .contentsSize > ul li p {
  padding-top: 12px;
  font-size: 20px;
  letter-spacing: -0.04em;
  line-height: 28px;
  text-align: center;
}
#goodExperience .bodyArea .contentsSize > ul li p span {
  color: #999;
}

#wrapper[role=goodCare] footer #fixedBtn {
  display: none;
}

#goodCare {
  padding-bottom: 0;
}
#goodCare .headArea {
  background-image: url(/static/images/etc/main.png);
  align-items: flex-end !important;
}
#goodCare .headArea .textArea {
  color: #fff !important;
}
#goodCare .headArea .textArea > p {
  padding: 180px 0 60px;
}
#goodCare .contentsSize > ol > li {
  padding-top: 130px;
  margin-top: 130px;
}
#goodCare .contentsSize > ol > li:first-of-type {
  margin-top: 0;
}
#goodCare .contentsSize > ol > li > h3 {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-weight: 600;
  font-size: 48px;
  letter-spacing: -0.01em;
  line-height: 60px;
  text-align: center;
  color: #000;
  gap: 12px;
  margin: 0;
}
#goodCare .contentsSize > ol > li > h3 span {
  font-size: 16px;
  line-height: 24px;
  color: #111;
  font-weight: 400;
  padding-bottom: 6px;
  margin-left: 14px;
}
#goodCare .careLists {
  display: flex;
  align-items: center;
  margin-top: 82px;
  position: relative;
  gap: 90px;
}
#goodCare .careLists .thumb {
  width: 600px;
  height: 600px;
  flex-basis: 600px;
}
#goodCare .careLists .thumb img {
  width: 100%;
}
#goodCare .careLists .content .textArea {
  margin-bottom: 32px;
}
#goodCare .careLists .content .textArea li {
  padding-top: 18px;
  font-size: 20px;
  letter-spacing: -0.04em;
  line-height: 32px;
  color: #444;
}
#goodCare .careLists .content .textArea li:first-of-type {
  padding-top: 0;
}
#goodCare .careLists .content .textArea ~ .tagArea {
  margin-top: 32px;
}
#goodCare .careLists .content .tipArea {
  position: relative;
  margin-top: 80px;
}
#goodCare .careLists .content .tipArea strong {
  position: absolute;
  left: -38px;
  top: -40px;
}
#goodCare .careLists .content .tipArea p {
  font-size: 18px;
  line-height: 28px;
  color: #444;
}
#goodCare .careLists .content .tipArea ~ .tagArea {
  margin-top: 20px;
}
#goodCare .careLists .content .tagArea {
  display: flex;
  gap: 18px;
}
#goodCare .careLists .content .tagArea > li {
  color: #144835;
  font-size: 18px;
  line-height: 46px;
}
#goodCare .typeRight .careLists {
  justify-content: space-between;
  flex-direction: row-reverse;
  gap: 0;
}
#goodCare .typeRight .careLists .content {
  padding-left: 38px;
}
#goodCare .grayBgArea {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 120px;
  margin-top: 260px;
  background: #f5f5f5;
}
#goodCare .grayBgArea .contentsSize ol > li {
  padding-top: 140px;
}
#goodCare .grayBgArea li h3 {
  margin: 0;
  font-size: 40px;
  letter-spacing: -0.01em;
  line-height: 58px;
  text-align: center;
  color: #000;
}
#goodCare .grayBgArea li .videoArea {
  margin-top: 30px;
  position: relative;
}
#goodCare .grayBgArea li .videoArea a {
  position: relative;
  z-index: 5;
}
#goodCare .grayBgArea li .videoArea video {
  transition: 0.3s;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1;
}
#goodCare .grayBgArea li .videoArea video.on {
  opacity: 1;
  z-index: 10;
}
#goodCare .grayBgArea li .textArea {
  padding-top: 40px;
}
#goodCare .grayBgArea li .textArea li {
  padding-top: 18px;
  font-size: 20px;
  letter-spacing: -0.04em;
  line-height: 32px;
  text-align: center;
  color: #444;
}
#goodCare .grayBgArea li .textArea li:first-of-type {
  padding-top: 0;
}
#goodCare .grayBgArea li .tagArea {
  display: flex;
  gap: 18px;
  justify-content: center;
  padding-top: 20px;
}
#goodCare .grayBgArea li .tagArea li {
  color: #144835;
  font-size: 18px;
  line-height: 46px;
}
#goodCare .bgLayer {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 200;
  display: none;
  background: rgba(0, 0, 0, 0);
}
#goodCare #floatBtn {
  position: relative;
  z-index: 210;
}
#goodCare #floatBtn #progress {
  display: grid;
  place-items: center;
  position: fixed;
  bottom: 20px;
  right: 20px;
  height: 97px;
  width: 228px;
  background-color: #144835;
  z-index: 2;
  border-radius: 50px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
#goodCare #floatBtn #progress-value {
  display: grid;
  place-items: center;
  height: calc(100% - 4px);
  width: calc(100% - 4px);
  background-color: #144835;
  border-radius: 50px;
  font-family: "Noto Sans KR", sans-serif !important;
  font-size: 22px;
  color: #fff;
  letter-spacing: -0.4px;
}
#goodCare #floatBtn #careList {
  display: none;
  position: fixed;
  max-height: calc(100vh - 81px);
  right: 10px;
  bottom: 20px;
  padding: 25px;
  background: rgba(20, 72, 53, 0.9176470588);
  border-radius: 30px;
  overflow-y: auto;
  z-index: 4;
}
#goodCare #floatBtn #careList li {
  margin-bottom: 16px;
}
#goodCare #floatBtn #careList li a {
  color: #fff;
  font-size: 18px;
  font-family: "Noto Sans KR", sans-serif !important;
}
#goodCare #floatBtn #careList li:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
}
#goodCare #floatBtn #careList li:last-of-type::after, #goodCare #floatBtn #careList li:last-of-type::before {
  display: none;
}
#goodCare #floatBtn #careList li.on a {
  font-weight: 600;
  padding-bottom: 4px;
}
#goodCare #floatBtn #careList li.on a {
  position: relative;
}
#goodCare #floatBtn #careList li.on a:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background: #fff;
  bottom: 0;
  left: 0;
}

#goodCycle .headArea {
  align-items: flex-end !important;
  padding-bottom: 165px;
  background-image: url(/static/images/goodActivity/img_header3.jpg);
}
#goodCycle .headArea .textArea {
  color: #fff !important;
}
#goodCycle .cycleCertification {
  margin: 140px 0 0;
  text-align: center;
}
#goodCycle .contentsSize section {
  margin-top: 140px;
  display: flex;
  align-items: center;
}
#goodCycle .contentsSize section .cycleContent_img {
  flex-basis: 585px;
  width: 585px;
  height: 474px;
}
#goodCycle .contentsSize section .cycleContent_img img {
  margin-bottom: 6px;
}
#goodCycle .contentsSize section .cycleContent_img span {
  font-size: 14px;
}
#goodCycle .contentsSize section .cycleContent_text {
  margin-left: 130px;
  flex: 1;
}
#goodCycle .contentsSize section .cycleContent_text > strong {
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
}
#goodCycle .contentsSize section .cycleContent_text > strong span {
  display: block;
  padding-top: 5px;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 34px;
}
#goodCycle .contentsSize section .cycleContent_text > p {
  padding-top: 48px;
  font-weight: 700;
  font-size: 24px;
  line-height: 36px;
  letter-spacing: -0.02em;
  color: #000;
}
#goodCycle .contentsSize section .cycleContent_text > ul {
  padding-top: 4px;
}
#goodCycle .contentsSize section .cycleContent_text > ul li {
  padding-top: 16px;
  font-size: 20px;
  letter-spacing: -0.01em;
  line-height: 32px;
  color: #000;
}
#goodCycle .contentsSize section .cycleContent_text > ul li span {
  color: #999;
  font-size: 16px;
}

#wrapper[role=signature] .contentsTop {
  position: absolute;
  top: 110px;
  left: 80px;
  z-index: 10;
}
#wrapper[role=signature] .contentsTop .location {
  color: #fff;
}
#wrapper[role=signature] .contentsTop .location ul li {
  color: inherit;
}
#wrapper[role=signature] .contentsTop .location ul li::before {
  color: inherit;
}
#wrapper[role=signature] .contentsTop .location ul li a {
  color: inherit;
}
#wrapper[role=signature] main {
  padding-bottom: 0;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
#wrapper[role=signature] section {
  position: relative;
  height: 100vh;
  overflow: hidden;
  text-align: right;
}
#wrapper[role=signature] section b, #wrapper[role=signature] section h4, #wrapper[role=signature] section p {
  transition: all 0.5s;
}
#wrapper[role=signature] section b {
  transition-delay: 0.3s;
}
#wrapper[role=signature] section h4 {
  transition-delay: 0.4s;
}
#wrapper[role=signature] section p {
  transition-delay: 0.5s;
}
#wrapper[role=signature] section:nth-of-type(2) {
  transition: background-position-x 2s;
  background-position-x: 50px;
}
#wrapper[role=signature] section:nth-of-type(2) .text {
  text-align: left;
  left: 0;
  right: unset;
}
#wrapper[role=signature] section:nth-of-type(2) .text b, #wrapper[role=signature] section:nth-of-type(2) .text h4, #wrapper[role=signature] section:nth-of-type(2) .text p {
  margin-left: -100px;
}
#wrapper[role=signature] section:nth-of-type(2).active {
  background-position-x: 0;
}
#wrapper[role=signature] section:nth-of-type(2).active b, #wrapper[role=signature] section:nth-of-type(2).active h4, #wrapper[role=signature] section:nth-of-type(2).active p {
  margin-left: 0;
  opacity: 1;
}
#wrapper[role=signature] section.active .text {
  width: 780px;
  opacity: 1;
}
#wrapper[role=signature] section.active .text b, #wrapper[role=signature] section.active .text h4, #wrapper[role=signature] section.active .text p {
  margin-right: 0;
  opacity: 1;
}
#wrapper[role=signature] section .text {
  position: absolute;
  max-width: 780px;
  right: 0;
  bottom: 0;
  padding: 290px 100px;
  word-break: keep-all;
  width: 570px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0.5;
  transition: all 1s ease-out;
}
#wrapper[role=signature] section .text b, #wrapper[role=signature] section .text h4, #wrapper[role=signature] section .text p {
  margin-right: -100px;
}
#wrapper[role=signature] section b {
  font-size: 105px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 110px;
  opacity: 0;
  white-space: nowrap;
}
#wrapper[role=signature] section h4 {
  margin-bottom: 38px;
  font-weight: 600;
  font-size: 41px;
  color: #fff;
  opacity: 0;
  white-space: nowrap;
}
#wrapper[role=signature] section p {
  font-size: 16px;
  color: #fff;
  line-height: 28px;
  opacity: 0;
  white-space: nowrap;
}
#wrapper[role=signature] section footer #fixedBtn {
  bottom: 100px;
}
#wrapper[role=signature] #introSection .introArea {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: 0.5s opacity;
  z-index: 1;
}
#wrapper[role=signature] #introSection .introArea .imgCont {
  height: calc(100vh - 81px);
  background: url("/static/images/heritage/essential/signatureCheck/img_intro.jpg") no-repeat center center;
  background-size: auto 120%;
  animation: introAni1 0.8s cubic-bezier(0.18, 0.6, 0.48, 0.9) forwards;
}
#wrapper[role=signature] #introSection .introArea .introText {
  position: absolute;
  top: 25%;
  left: 0;
  width: 100%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
#wrapper[role=signature] #introSection .introArea .introText img {
  flex: 1;
  width: 88px;
  animation: introAni2 1s forwards;
  opacity: 0;
}
#wrapper[role=signature] #introSection .introArea .introText strong {
  flex: 1;
  padding: 25px 0 50px;
  font-size: 74px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: #fff;
  line-height: 90px;
  animation: introAni2 1s 0.2s forwards;
  opacity: 0;
}
#wrapper[role=signature] #introSection .introArea.off .introText {
  opacity: 0;
}
#wrapper[role=signature] section:nth-of-type(1) {
  position: relative;
  height: 100vh;
  background-image: url(/static/images/heritage/essential/signatureCheck/img_check1.png);
  background-position-x: 55px;
}
#wrapper[role=signature] section:nth-of-type(2) {
  background-image: url(/static/images/heritage/essential/signatureCheck/img_check9.jpg);
  height: 500px !important;
}
#wrapper[role=signature] section:nth-of-type(2) .text {
  padding-top: 73px;
  padding-bottom: 262px;
  background: rgba(2, 1, 43, 0.9);
}
#wrapper[role=signature] section:nth-of-type(3) {
  background-image: url(/static/images/heritage/essential/signatureCheck/img_check2.jpg);
  background-size: 390px 434px;
}
#wrapper[role=signature] section:nth-of-type(3) .text {
  background: rgba(5, 6, 8, 0.85);
}
#wrapper[role=signature] section:nth-of-type(4) {
  background-image: url(/static/images/heritage/essential/signatureCheck/img_check3.jpg);
  background-size: 387px 484px;
}
#wrapper[role=signature] section:nth-of-type(4) .text {
  background: rgba(39, 43, 68, 0.9);
}
#wrapper[role=signature] section:nth-of-type(5) {
  background-image: url(/static/images/heritage/essential/signatureCheck/img_check4.jpg);
  background-size: 143px 143px;
}
#wrapper[role=signature] section:nth-of-type(5) .text {
  background: rgba(15, 31, 47, 0.9);
}
#wrapper[role=signature] section:nth-of-type(6) {
  background-image: url(/static/images/heritage/essential/signatureCheck/img_check5.jpg);
  background-size: 230px 298px;
}
#wrapper[role=signature] section:nth-of-type(6) .text {
  background: rgba(0, 41, 7, 0.9);
}
#wrapper[role=signature] section:nth-of-type(7) {
  background-image: url(/static/images/heritage/essential/signatureCheck/img_check6.jpg);
  background-size: 292px 258px;
}
#wrapper[role=signature] section:nth-of-type(7) .text {
  background: rgba(1, 11, 6, 0.85);
}
#wrapper[role=signature] section:nth-of-type(8) {
  background-image: url(/static/images/heritage/essential/signatureCheck/img_check7.png);
  background-size: auto 100%;
}
#wrapper[role=signature] section:nth-of-type(8) .text {
  background: rgba(18, 17, 48, 0.9);
}
#wrapper[role=signature] section:nth-of-type(9) {
  background-image: url(/static/images/heritage/essential/signatureCheck/img_check1.png);
}
#wrapper[role=signature] section:nth-of-type(9) .text {
  background: rgba(13, 20, 23, 0.85);
}
@keyframes introAni1 {
  0% {
    background-size: auto 120%;
  }
  100% {
    background-size: auto 100%;
  }
}
@keyframes introAni2 {
  0% {
    transform: translateY(200px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes introAni3 {
  0% {
    height: 0;
  }
  100% {
    height: 100%;
  }
}

#wrapper[role=essentialItem] main {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
#wrapper[role=essentialItem] .headArea {
  display: flex;
  align-items: center;
  background: #144835;
  position: relative;
  height: 500px;
  margin-bottom: 360px;
  animation: essentialItem-headerAni1 0.5s 0.3s forwards;
}
#wrapper[role=essentialItem] .headArea .textA {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
}
#wrapper[role=essentialItem] .headArea .textA p {
  font-size: 20px;
  line-height: 32px;
  color: #fff;
  margin-top: 223px;
  margin-right: 94px;
  animation: essentialItem-headerAni2 1s 0.5s forwards;
  opacity: 0;
}
#wrapper[role=essentialItem] .headArea .textA strong {
  position: absolute;
  bottom: -100px;
  left: -41px;
  opacity: 0;
  animation: essentialItem-headerAni3 1.5s 0.7s forwards;
}
@keyframes essentialItem-headerAni1 {
  0% {
    height: 500px;
    margin-bottom: 360px;
  }
  90% {
    margin-bottom: 360px;
  }
  100% {
    height: 680px;
    margin-bottom: 0;
  }
}
@keyframes essentialItem-headerAni2 {
  0% {
    transform: translateY(-100px);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes essentialItem-headerAni3 {
  0% {
    transform: translateY(200px);
  }
  100% {
    transform: translateY(0);
    opacity: 0.3;
  }
}
#wrapper[role=essentialItem] .bodyArea article {
  max-width: 1220px;
  width: 100%;
  margin: 280px auto 0;
  position: relative;
  padding-bottom: 393px;
}
#wrapper[role=essentialItem] .bodyArea article:nth-child(2n) .imgCont p.ns {
  right: 20px;
  left: unset;
}
#wrapper[role=essentialItem] .bodyArea article:nth-child(2n) .content {
  flex-direction: row-reverse;
}
#wrapper[role=essentialItem] .bodyArea article:nth-child(2n) .imgBottom {
  left: 0;
  right: unset;
}
#wrapper[role=essentialItem] .bodyArea .imgCont {
  overflow: hidden;
}
#wrapper[role=essentialItem] .bodyArea .visualArea {
  position: relative;
}
#wrapper[role=essentialItem] .bodyArea .visualArea .textArea .textA {
  text-align: center;
  line-height: 1;
}
#wrapper[role=essentialItem] .bodyArea .visualArea .textArea .textA > strong {
  font-size: 60px;
  display: block;
  line-height: 72px;
}
#wrapper[role=essentialItem] .bodyArea .visualArea .textArea .textA > p {
  font-size: 24px;
  margin-top: 12px;
}
#wrapper[role=essentialItem] .bodyArea .content {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 60px;
}
#wrapper[role=essentialItem] .bodyArea .content .imgCont {
  width: 50%;
  position: relative;
}
#wrapper[role=essentialItem] .bodyArea .content .imgCont p.ns {
  color: #fff;
  font-size: 16px;
  position: absolute;
  bottom: 20px;
  left: 20px;
}
#wrapper[role=essentialItem] .bodyArea .content .textArea {
  width: 46.5%;
}
#wrapper[role=essentialItem] .bodyArea .content .textArea span {
  margin: 0 -20px;
  display: block;
  margin-bottom: 20px;
}
#wrapper[role=essentialItem] .bodyArea .content .textArea p {
  margin-bottom: 29px;
  font-size: 20px;
  word-break: keep-all;
  line-height: 36px;
  font-family: "Noto Sans KR", sans-serif;
  letter-spacing: -0.05em;
}
#wrapper[role=essentialItem] .bodyArea .content .textArea p:last-child {
  margin-bottom: 0;
}
#wrapper[role=essentialItem] .bodyArea .content .textArea.pdNone {
  padding-bottom: 0;
}
#wrapper[role=essentialItem] .bodyArea .content .moreLink {
  font-size: 14px;
  font-weight: 300;
}
#wrapper[role=essentialItem] .bodyArea .content .moreLink {
  position: relative;
}
#wrapper[role=essentialItem] .bodyArea .content .moreLink:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background: #111;
  bottom: -2px;
  left: 0;
}
#wrapper[role=essentialItem] .bodyArea .imgBottom {
  position: absolute;
  bottom: 0;
  right: 0;
}
#wrapper[role=essentialItem] .bodyArea article:nth-of-type(3) {
  padding-bottom: 723px;
}
#wrapper[role=essentialItem] .bodyArea article:nth-of-type(3) .imgCont {
  margin-top: -50px;
}
#wrapper[role=essentialItem] .bodyArea article:nth-of-type(3) {
  padding-bottom: 723px;
}
#wrapper[role=essentialItem] .bodyArea article:nth-of-type(4) {
  padding-bottom: 553px;
}
#wrapper[role=essentialItem] .bodyArea article:nth-of-type(4) .imgBottom {
  left: unset;
  right: 0;
}
#wrapper[role=essentialItem] .bodyArea article:nth-of-type(5) {
  padding-bottom: 653px;
}
#wrapper[role=essentialItem] .bodyArea article:nth-of-type(6) {
  padding-bottom: 703px;
}
#wrapper[role=essentialItem] .bodyArea article:nth-of-type(7) {
  padding-bottom: 0;
}
#wrapper[role=essentialItem] .bodyArea article:nth-of-type(7) .content {
  margin-top: 222px;
}
#wrapper[role=essentialItem] .bodyArea article:nth-of-type(7) .content .textArea {
  padding-top: 480px;
}
#wrapper[role=essentialItem] .bodyArea article:nth-of-type(7) .content p.ns {
  bottom: 380px;
}
#wrapper[role=essentialItem] .bodyArea article:nth-of-type(7) .imgBottom {
  top: 181px;
  bottom: unset;
  left: 32%;
}
#wrapper[role=essentialItem] .bodyArea article:nth-of-type(8) {
  padding-bottom: 0;
}
#wrapper[role=essentialItem] .bodyArea article:nth-of-type(9) {
  padding-bottom: 643px;
}
#wrapper[role=essentialItem] .bodyArea article:nth-of-type(9) .imgBottom {
  right: 10%;
}
#wrapper[role=essentialItem] .bodyArea article:nth-of-type(10) {
  padding-bottom: 673px;
}
#wrapper[role=essentialItem] .bodyArea article:nth-of-type(10) .imgBottom {
  left: -150px;
}
#wrapper[role=essentialItem] .bodyArea article:nth-of-type(11) {
  padding-bottom: 433px;
}

#wrapper[role=error] {
  background: url(/static/images/etc/error_bg.jpg) no-repeat 50% 50%;
  background-size: cover;
}
#wrapper[role=error] main#errorPage {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  padding: 0;
  height: calc(100vh - 81px);
  display: flex;
  justify-content: center;
  align-items: center;
}
#wrapper[role=error] main#errorPage .contents {
  text-align: center;
}
#wrapper[role=error] main#errorPage .contents figure {
  transform: rotate(4deg);
}
#wrapper[role=error] main#errorPage .contents strong {
  display: block;
  text-align: center;
  padding-top: 36px;
  font-weight: 600;
  font-size: 28px;
  line-height: 50px;
  color: #111;
}
#wrapper[role=error] main#errorPage .contents p {
  font-size: 22px;
  line-height: 46px;
  text-align: center;
  color: #444;
}

#wrapper[role=bicycle] main {
  padding-bottom: 0;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
#wrapper[role=bicycle] .visualArea {
  position: relative;
  overflow: hidden;
  max-width: 2400px;
  margin: 0 auto;
}
#wrapper[role=bicycle] .visualArea .headArea {
  position: absolute;
  top: 114px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  z-index: 10;
  animation: bicycleIntroAni1 1s 5s forwards;
  opacity: 0;
  margin-top: 100px;
}
@keyframes bicycleIntroAni1 {
  0% {
    opacity: 0;
    margin-top: 100px;
  }
  100% {
    opacity: 1;
    margin-top: 0;
  }
}
#wrapper[role=bicycle] .visualArea .headArea.y1989 h3 {
  color: #144835;
}
#wrapper[role=bicycle] .visualArea .headArea.y1989 .history .circle {
  border-color: #144835;
}
#wrapper[role=bicycle] .visualArea .headArea.y1989 .history ul::before {
  background: #144835;
}
#wrapper[role=bicycle] .visualArea .headArea.y1989 .history ul::after {
  background: #144835;
}
#wrapper[role=bicycle] .visualArea .headArea.y1989 .history ul li {
  color: #144835;
}
#wrapper[role=bicycle] .visualArea .headArea.y1989 .history ul li .year::before {
  background: #144835;
}
#wrapper[role=bicycle] .visualArea .headArea.y1989 ~ .videoList li {
  color: #144835;
}
#wrapper[role=bicycle] .visualArea .headArea.y1989 ~ .videoList {
  background: #fffbf2;
}
#wrapper[role=bicycle] .visualArea .headArea.y2002 h3 {
  color: #FAF8F1;
}
#wrapper[role=bicycle] .visualArea .headArea.y2002 .history .circle {
  border-color: #FAF8F1;
}
#wrapper[role=bicycle] .visualArea .headArea.y2002 .history ul::before {
  background: #FAF8F1;
}
#wrapper[role=bicycle] .visualArea .headArea.y2002 .history ul::after {
  background: #FAF8F1;
}
#wrapper[role=bicycle] .visualArea .headArea.y2002 .history ul li {
  color: #FAF8F1;
}
#wrapper[role=bicycle] .visualArea .headArea.y2002 .history ul li .year::before {
  background: #FAF8F1;
}
#wrapper[role=bicycle] .visualArea .headArea.y2002 ~ .videoList li {
  color: #FAF8F1;
}
#wrapper[role=bicycle] .visualArea .headArea.y2002 ~ .videoList {
  background: #144835;
}
#wrapper[role=bicycle] .visualArea .headArea.y2013 h3 {
  color: #2B2E31;
}
#wrapper[role=bicycle] .visualArea .headArea.y2013 .history .circle {
  border-color: #2B2E31;
}
#wrapper[role=bicycle] .visualArea .headArea.y2013 .history ul::before {
  background: #2B2E31;
}
#wrapper[role=bicycle] .visualArea .headArea.y2013 .history ul::after {
  background: #2B2E31;
}
#wrapper[role=bicycle] .visualArea .headArea.y2013 .history ul li {
  color: #2B2E31;
}
#wrapper[role=bicycle] .visualArea .headArea.y2013 .history ul li .year::before {
  background: #2B2E31;
}
#wrapper[role=bicycle] .visualArea .headArea.y2013 ~ .videoList li {
  color: #2B2E31;
}
#wrapper[role=bicycle] .visualArea .headArea.y2013 ~ .videoList {
  background: #dcc5a7;
}
#wrapper[role=bicycle] .visualArea .headArea.y2020 h3 {
  color: #fff;
}
#wrapper[role=bicycle] .visualArea .headArea.y2020 .history .circle {
  border-color: #fff;
}
#wrapper[role=bicycle] .visualArea .headArea.y2020 .history ul::before {
  background: #fff;
}
#wrapper[role=bicycle] .visualArea .headArea.y2020 .history ul::after {
  background: #fff;
}
#wrapper[role=bicycle] .visualArea .headArea.y2020 .history ul li {
  color: #fff;
}
#wrapper[role=bicycle] .visualArea .headArea.y2020 .history ul li .year::before {
  background: #fff;
}
#wrapper[role=bicycle] .visualArea .headArea.y2020 ~ .videoList li {
  color: #fff;
}
#wrapper[role=bicycle] .visualArea .headArea.y2020 ~ .videoList {
  background: #2a2d32;
}
#wrapper[role=bicycle] .visualArea .headArea.y2022 h3 {
  color: #144835;
}
#wrapper[role=bicycle] .visualArea .headArea.y2022 .history .circle {
  border-color: #144835;
}
#wrapper[role=bicycle] .visualArea .headArea.y2022 .history ul::before {
  background: #144835;
}
#wrapper[role=bicycle] .visualArea .headArea.y2022 .history ul::after {
  background: #144835;
}
#wrapper[role=bicycle] .visualArea .headArea.y2022 .history ul li {
  color: #144835;
}
#wrapper[role=bicycle] .visualArea .headArea.y2022 .history ul li .year::before {
  background: #144835;
}
#wrapper[role=bicycle] .visualArea .headArea.y2022 ~ .videoList li {
  color: #144835;
}
#wrapper[role=bicycle] .visualArea .headArea.y2022 ~ .videoList {
  background: #fffbf2;
}
#wrapper[role=bicycle] .visualArea .headArea h3 {
  font-size: 72px;
  font-family: "Halvar Breitschrift", sans-serif;
  line-height: 1;
  display: block;
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
  transition: all 0.5s 1.2s;
}
#wrapper[role=bicycle] .visualArea .headArea .history {
  margin-top: 2.5vw;
  position: relative;
  animation: bicycleIntroAni2 1s 5.3s forwards;
  opacity: 0;
  height: 60px;
  width: 0;
  overflow: hidden;
}
@keyframes bicycleIntroAni2 {
  0% {
    opacity: 0;
    width: 0;
  }
  100% {
    opacity: 1;
    width: 100%;
  }
}
#wrapper[role=bicycle] .visualArea .headArea .history .circle {
  border-radius: 50%;
  width: 132px;
  height: 60px;
  border: 2px solid;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: scale(0.85) translate(-50%, -50%);
  animation: bicycleIntroAni3 0.7s 6.3s forwards;
  opacity: 0;
  transform-origin: 0 0;
  transition: border 0.5s 1.2s;
}
@keyframes bicycleIntroAni3 {
  0% {
    opacity: 0;
    transform: scale(0.85) translate(-50%, -50%);
  }
  100% {
    opacity: 1;
    transform: scale(1) translate(-50%, -50%);
  }
}
#wrapper[role=bicycle] .visualArea .headArea .history ul {
  display: flex;
  position: relative;
  gap: 100px;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s 0.4s;
  left: 50%;
  width: 780px;
  margin-top: 16px;
}
#wrapper[role=bicycle] .visualArea .headArea .history ul::before {
  content: "";
  height: 2px;
  width: calc(100vw - 31px);
  position: absolute;
  top: 50%;
  left: -100vw;
  transform: translateY(-50%);
  opacity: 0.3;
  transition: background 0.5s 1.2s;
}
#wrapper[role=bicycle] .visualArea .headArea .history ul::after {
  content: "";
  height: 2px;
  width: calc(100vw - 25px);
  position: absolute;
  top: 50%;
  right: -100vw;
  transform: translateY(-50%);
  opacity: 0.3;
  transition: background 0.5s 1.2s;
}
#wrapper[role=bicycle] .visualArea .headArea .history ul li {
  font-family: "Halvar Breitschrift", sans-serif;
  position: relative;
}
#wrapper[role=bicycle] .visualArea .headArea .history ul li .year {
  font-size: 18px;
  font-family: inherit;
  color: inherit;
  width: 76px;
  height: 28px;
  transition: transform 0.5s, color 0.8s 1.2s, font-size 0.3s;
  font-weight: 600;
  pointer-events: none;
}
#wrapper[role=bicycle] .visualArea .headArea .history ul li .year::before {
  content: "";
  height: 2px;
  width: 90px;
  position: absolute;
  top: 50%;
  right: -95px;
  transform: translateY(-50%);
  transition: transform 0.5s, background 0.5s 1.2s;
}
#wrapper[role=bicycle] .visualArea .headArea .history ul li:last-child .year::before {
  display: none;
}
#wrapper[role=bicycle] .visualArea .headArea .history ul li.on {
  text-align: center;
  line-height: 1;
}
#wrapper[role=bicycle] .visualArea .headArea .history ul li.on .year {
  font-size: 24px;
}
#wrapper[role=bicycle] .visualArea .headArea .history ul li.on .year::before {
  width: 70px;
}
#wrapper[role=bicycle] .visualArea .headArea .history ul li.barAni .year::before {
  animation: historyBar 1.2s forwards;
}
@keyframes historyBar {
  0% {
    transform: scaleX(1);
  }
  30% {
    transform: scaleX(0.3);
  }
  60% {
    transform: scaleX(0.3);
  }
  100% {
    transform: scaleX(1);
  }
}
#wrapper[role=bicycle] .visualArea .headArea .history ul li.prev .year::before {
  width: 70px;
  right: -69px;
}
#wrapper[role=bicycle] .visualArea .videoList {
  position: relative;
  height: auto;
  aspect-ratio: 1/0.54;
  transition: background 0.5s 0.8s;
}
#wrapper[role=bicycle] .visualArea .videoList li {
  position: absolute;
  display: none;
  opacity: 0;
  transition: opacity 1.5s 0.5s;
  width: 100%;
  text-align: center;
}
#wrapper[role=bicycle] .visualArea .videoList li.on {
  opacity: 1;
}
#wrapper[role=bicycle] .visualArea .videoList li.on .textArea {
  margin-top: 50px;
  opacity: 1;
  transition-delay: 1.5s;
  transition-duration: 0.8s;
}
#wrapper[role=bicycle] .visualArea .videoList li video {
  width: 100%;
  display: inline-block;
}
@media screen and (min-width: 2240px) {
  #wrapper[role=bicycle] .visualArea .videoList li video {
    max-height: 100vh;
  }
}
#wrapper[role=bicycle] .visualArea .videoList li .textArea {
  position: absolute;
  left: 50%;
  top: calc(50% + 110px);
  margin-top: 100px;
  transform: translateX(-50%);
  font-size: 20px;
  line-height: 32px;
  color: inherit;
  text-align: center;
  margin-bottom: -60px;
  opacity: 0;
  transition: all 0.5s 0.3s;
  font-family: "Noto Sans KR";
  white-space: nowrap;
}
#wrapper[role=bicycle] .visualArea .videoList #introVideo .textArea {
  opacity: 0;
  margin-top: 50px;
  animation: bicycleIntroAni1-2 1s 6s forwards;
}
@keyframes bicycleIntroAni1-2 {
  0% {
    opacity: 0;
    margin-top: 100px;
  }
  100% {
    opacity: 1;
    margin-top: 50px;
  }
}
@media screen and (max-width: 1500px) {
  #wrapper[role=bicycle] .visualArea .history {
    margin-top: 9px;
  }
  #wrapper[role=bicycle] .visualArea .videoList li .textArea {
    bottom: 100px;
  }
}

#wrapper[role=philosophy] {
  padding-bottom: 0;
}
#wrapper[role=philosophy] main {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  margin-top: -120px;
  background: url(/static/images/heritage/philosophy/bg.jpg) no-repeat 50% -75px;
}
#wrapper[role=philosophy] #article01 {
  height: 532px;
  padding-top: 194px;
  padding-left: 145px;
}
#wrapper[role=philosophy] #article01 div b {
  display: block;
  font-size: 36px;
  font-weight: 600;
  margin-bottom: 20px;
  line-height: 42px;
}
#wrapper[role=philosophy] #article01 div p {
  padding-top: 32px;
  font-size: 20px;
  line-height: 32px;
}
#wrapper[role=philosophy] .typeA {
  display: inline-block;
  font-size: 44px;
  font-weight: 600;
  padding: 16px 32px;
  line-height: 1;
  background: #000;
  color: #fff;
}
#wrapper[role=philosophy] .typeA + .typeB {
  margin-top: 48px;
}
#wrapper[role=philosophy] .typeB {
  font-size: 30px;
  font-weight: 600;
}
#wrapper[role=philosophy] .typeB + .typeB {
  margin-top: 14px;
}
#wrapper[role=philosophy] .textCont {
  display: flex;
  align-items: center;
}
#wrapper[role=philosophy] .textCont p {
  margin-bottom: 16px;
  font-size: 20px;
  letter-spacing: -0.02em;
  line-height: 32px;
  color: #444;
}
#wrapper[role=philosophy] #article02 {
  margin-top: 836px;
}
#wrapper[role=philosophy] #article02 .title {
  width: 488px;
}
#wrapper[role=philosophy] #article02 .textCont {
  padding-top: 20px;
}
#wrapper[role=philosophy] #article02 .textCont p {
  font-size: 20px;
  letter-spacing: -0.02em;
  line-height: 32px;
  color: #444;
}
#wrapper[role=philosophy] #article03 {
  margin-top: 160px;
}
#wrapper[role=philosophy] #article03 .title {
  margin-bottom: 48px;
}
#wrapper[role=philosophy] #article03 .typeB {
  width: 420px;
}
#wrapper[role=philosophy] #article04 {
  margin-top: 80px;
}
#wrapper[role=philosophy] #article04 .typeB {
  width: 420px;
}
#wrapper[role=philosophy] #article05 {
  margin-top: 80px;
}
#wrapper[role=philosophy] #article05 .typeB {
  width: 420px;
}

/***** popup *****/
#mainPop {
  position: relative;
  z-index: 210;
  text-align: center;
}
#mainPop .popCloseArea {
  display: flex;
}
#mainPop .popCloseArea button {
  flex: 1;
  height: 56px;
  font-size: 18px;
  color: #F9F9F9;
  background: #000;
}
#mainPop .popCloseArea button#todayClose {
  background: #666;
}

/*# sourceMappingURL=contents.css.map */


/******************* 추가 스타일 *******************/
/* common */
.mt30 { margin-top:30px; }
.mt200 { margin-top:200px; }


/* 히스토리 이미지로 변경 */
#wrapper[role=history] .imgArea { position: relative; margin: 10px auto 0; width:100%; text-align: center; }

#wrapper[role=history] .textEffectArea strong, #wrapper[role=history] .textEffectArea em, #wrapper[role=history] .textEffectArea p {
  display: block;
  text-align: center;
}
#wrapper[role=history] .textEffectArea strong {
    margin-top: 30px;
  margin-bottom: 20px;
  font-size: 35px;
  font-weight: 400;
  line-height: 42px;
  letter-spacing: -0.4px;
  transition: 0.5s 1.5s all;
}
#wrapper[role=history] .textEffectArea em {
    margin-top: 30px;
  margin-bottom: 8px;
  line-height: 35px;
  font-size: 24px;
  font-weight: 700;
  font-family: "Noto Sans KR", sans-serif;
}
#wrapper[role=history] .textEffectArea p {
  font-size: 18px;
  line-height: 28px;
  font-family: "Noto Sans KR", sans-serif;
}


/* 히스토리 영상 현재년도 수정 */
#wrapper[role=history] #y2024 > section:nth-of-type(1) {
  margin-bottom: 30px;
}
#wrapper[role=history] #y2024 > section:nth-of-type(1) p {
  font-size: 24px;
  font-weight: 600;
  text-align: center;
}
#wrapper[role=history] #y2024 .yBody {
  position: relative;
  margin: 0 -40px;
}
#wrapper[role=history] #y2024 .yBody h3 {
  margin-top: 0;
}

#wrapper[role=history] #y2024 .videoArea {
  width: 1360px !important;
  height: 763px !important;
  position: relative;
  transition: 2s clip-path cubic-bezier(0.71, -0.04, 0, 1), 2s aspect-ratio cubic-bezier(0.71, -0.04, 0, 1); /* max-height: calc(100vh - 50px); */
  margin: 0 auto;
  clip-path: circle(100%);
  aspect-ratio: 1/1;
  aspect-ratio: 0.4627487274;
}
@supports not (aspect-ratio: 0.4627487274) {
  #wrapper[role=history] #y2024 .videoArea::before {
    content: "";
    float: left;
    padding-top: calc((2.161 / 1) * 100%);
  }
  #wrapper[role=history] #y2024 .videoArea::after {
    content: "";
    display: block;
    clear: both;
  }
}
#wrapper[role=history] #y2024 .videoArea video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  object-fit: cover;
}


/* Good Care 탭메뉴 추가 */
#wrapper[role=goodCare] .tabMenu {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 140px;
  height: 80px;
}
#wrapper[role=goodCare] .tabMenu li {
  padding: 0 40px;
}
#wrapper[role=goodCare] .tabMenu a {
  display: inline-block;
  text-align: center;
  color: rgba(17, 17, 17, 0.5);
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
  height: 36px;
  transition: all 0.2s ease-in-out;
}
#wrapper[role=goodCare] .tabMenu a {
  position: relative;
}
#wrapper[role=goodCare] .tabMenu a:after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  background: #fff;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  transition: all 0.2s ease-in-out;
}
#wrapper[role=goodCare] .tabMenu a.on {
  font-weight: 700;
  color: rgb(17, 17, 17);
}
#wrapper[role=goodCare] .tabMenu a.on {
  position: relative;
}
#wrapper[role=goodCare] .tabMenu a.on:after {
  content: "";
  position: absolute;
  width: 100%;
  background: #111;
}
#wrapper[role=goodCare] .tabMenu a:hover {
  position: relative;
}
#wrapper[role=goodCare] .tabMenu a:hover:after {
  content: "";
  position: absolute;
  width: 100%;
  background: rgba(17, 17, 17, 0.3);
}

.markR { display: inline-block; width:0.5em; vertical-align:text-top; }


/* Good Care > CareTip 레이아웃 변경 */
#goodCare .contentsSize > ol.tip { margin-top: 100px; }

#goodCare .contentsSize > ol.tip > li { margin-top:0; }

#goodCare .contentsSize > ol.tip > li > h3 { display: block; }
#goodCare .contentsSize > ol.tip > li > h3 span {
    font-size: 16px;
    line-height: 24px;
    color: #111;
    font-weight: 400;
    padding-bottom: 6px;
    margin-left: 14px;
}

#goodCare .grayBgArea ol.tip li .tagArea {
    padding-top:0px;
}

#goodCare .grayBgArea ol.tip.video li .tagArea {
    padding-top:20px;
}


#goodCare .contentsSize > ol.tip .desc { margin-top:30px; text-align: center; font-size:22px; }
#goodCare .contentsSize > ol.tip .content { width:513px; }

#goodCare .grayBgArea li .textArea.tip li {
  text-align: left;
}

#goodCare .grayBgArea li .tagArea.tip {
  justify-content: left;
}

#goodCare ol.tip > li:first-of-type .careLists {
    margin-top: 82px;
}

#goodCare ol.tip .careLists {
    margin-top: 0px; align-items: flex-start;
}


#goodCare .careLists .content > h4 {
	display: flex;  align-items: flex-end; gap: 12px; margin: 0;
	font-size:40px; font-weight: 600; line-height:52px; letter-spacing: -0.01em; }

#goodCare .careLists .content > h4 span {
    font-size: 16px;
	 line-height: 24px;
    color: #111;
    font-weight: 400;
	padding-bottom: 6px;
    margin-left: 14px;
}