#main_wrap {background: url(/img/main/bg_main.jpg); background-size: cover; background-repeat: no-repeat; }

/* #main {height: 100vh;} */
#main .main.swiper .swiper-slide {min-height: 950px; position: relative;}
#main .main.swiper .swiper-slide.slide01 {background-image: url(/img/main/mainslide01.jpg);}
#main .main.swiper .swiper-slide.slide02 {background-image: url(/img/main/mainslide02.jpg);}
#main .main.swiper .swiper-slide.slide03 {background-image: url(/img/main/mainslide03.jpg);}
#main .main.swiper .swiper-slide .inner {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); white-space: nowrap;}
#main .main.swiper .swiper-slide.slide01 .inner {top: 55%;}

.main.swiper .container {position: absolute; height: 100%; width: 100%; left: 50%; transform: translateX(-50%); z-index: 1;}
.main.swiper .swiper-pagination { display: block; align-items: center; bottom: 50px; left: 0;    width: 200px;  }

.main.swiper .swiper-pagination-bullet {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  top: 50%;
  transform: translateY(-50%);
  background-color: transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.3s;
  margin: 0;
}

.main.swiper .swiper-pagination-bullet::after {content: ''; position: absolute; width: 12px ; height: 16px; top: 50%; left: 50%; transform: translate(-50%,-50%);background-image: url(/img/main/pause.png);}
.main.swiper .swiper-pagination span.index {
  color: rgba(255,255,255,.5);
  position: relative;
  font-size: 1.125rem;
  display: inline-block;
  margin-left: 30px;
  font-weight: 400;
  line-height: 1;
}
.main.swiper .swiper-pagination-bullet:nth-child(1) + span.index {margin-left: 80px;}
.main.swiper .swiper-pagination-bullet-active + span.index {color: var(--subcolor);   font-weight: 600; border-bottom: 2px solid var(--subcolor);}

.main.swiper .progress {  transform: rotate(-90deg);}

.main.swiper .circle-origin {
  fill: transparent;
  stroke: rgb(255, 255, 255);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 160px;
  stroke-dashoffset: 160px;
  opacity: .5;
} 

.main.swiper .swiper-pagination-bullet-active .circle-origin {
  animation: progress 5s;
}

@keyframes progress {
  0% {
    stroke-dashoffset: 160px;
  }

  90% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: -160px;
  }
}
#sec01 h1 {position: relative;     z-index: 1;}
#sec01 h1::after {content: ''; position: absolute; width: 48px; height: 48px; background-image: url(/img/main/light.png); left: -5%;  background-size: cover;  z-index: -1;  transform: scale(1.5);  top: 10%;}


#sec02 .box {overflow: hidden; transition: .3s  cubic-bezier(.64,.36,.37,.9); filter: grayscale(1);}
#sec02 .box:hover {border-radius: 80px;  filter: grayscale(0);}
#sec02 .box .inner {height: 460px; letter-spacing: 3px;}
#sec02 .box .more_btn {opacity: 0; transform: translateY(20%); transition: .3s  cubic-bezier(.64,.36,.37,.9);}
#sec02 .box p {padding-top: 4.5rem; transition: .3s  cubic-bezier(.64,.36,.37,.9);}
#sec02 .box:hover .more_btn {opacity: 1; transform: translateY(0);}
#sec02 .box:hover p {padding-top: 0;}

#sec02 .box:nth-child(1) .inner {background-image: url(/img/main/subject01.png);}
#sec02 .box:nth-child(2) .inner {background-image: url(/img/main/subject02.png);}
#sec02 .box:nth-child(3) .inner {background-image: url(/img/main/subject03.png);}
#sec02 .box:nth-child(4) .inner {background-image: url(/img/main/subject04.png);}
#sec02 .box:nth-child(5) .inner {background-image: url(/img/main/subject05.png);}
#sec02 .box:nth-child(6) .inner {background-image: url(/img/main/subject06.png);}

.marquee {position: relative;  width: 100%;  max-width: 100%;  height: 160px;  overflow-x: hidden; display: flex; white-space: nowrap;}
.marquee .track {position: absolute;  white-space: nowrap;  will-change: transform;  animation: marquee 32s linear infinite;}
.marquee .bg_txt {opacity: .5; display:inline-block;  -webkit-animation: scrolling-left1 20s linear infinite;  animation: scrolling-left1 20s linear infinite; color: rgba(255,253,250,.5);}

@keyframes scrolling-left1 {100% {transform: translateX(-100%);-webkit-transform: translateX(-100%);}}
@-webkit-keyframes scrolling-left1 {100% {-webkit-transform: translateX(-100%);}}

#sec03 .year {font-size: 4.5rem}
#sec03 .count {font-size:  12.500rem; position: relative;     background: linear-gradient(to right top, #c1873d, #ebd07b,#c1873d);  color: transparent !important;  -webkit-background-clip: text; width: 210px;  display: inline-block;  text-align: center; transition: all 0.5s ease-in;}
#sec03 .count::after {content: ''; position: absolute; bottom: 45px; width: 100%; left: 50%; transform: translateX(-50%); height: 2px; background-color: var(--subcolor); }

#sec04 .en {opacity: .5;}
#sec04 .line {opacity: .3;}

#sec05 .txt h1 {letter-spacing: 10px;}
#sec05 .txt h1>span {color: rgba(255,255,255,.5); letter-spacing: 0;}
#sec05 .txt h3>span {color: rgba(255,255,255,.3);}  
#sec05 .cont_inner {height: 615px;}
#sec05 .sp_nav {float: right; width: 36%;}
#sec05 .sp_nav li {position: relative; cursor: pointer;}
#sec05 .sp_nav li::after {content: ''; position: absolute; right: -3%; width: 20px; height: 20px; background-image: url(/img/main/arrow_sp.png); background-repeat: repeat; background-size: cover; top: 50%; transform: translateY(-50%); opacity: 0; transition: .3s;}
#sec05 .sp_nav li.on {font-weight: 600; color: var(--subcolor); letter-spacing: 0.5px;}
#sec05 .sp_nav li.on::after {opacity: 1;}
#sec05 .img {position: absolute;  width: 45%; right: 0; height: 100%;}
#sec05 .sp_img_wrap { position: relative; height: 100%; max-height: 615px;}
#sec05 .sp_img_wrap .sp_img {width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-repeat: no-repeat; background-size: cover; background-position: center center; opacity: 0; transition: opacity .6s cubic-bezier(0.5, 1, 0.89, 1), transform .3s cubic-bezier(0.5, 1, 0.89, 1); padding: 3.750rem 3.125rem; display: flex;  flex-direction: column-reverse;}
#sec05 .sp_img_wrap .sp_img h3 {border-bottom: 1px solid rgba(255,255,255,.5);  width: fit-content;  padding-bottom: 0.9375rem;  line-height: 1;}
#sec05 .sp_img_wrap .sp_img01 {background-image: url(/img/main/special01.png);}
#sec05 .sp_img_wrap .sp_img02 {background-image: url(/img/main/special02.png);}
#sec05 .sp_img_wrap .sp_img03 {background-image: url(/img/main/special03.png);}
#sec05 .sp_img_wrap .sp_img04 {background-image: url(/img/main/special04.png);}
#sec05 .sp_img_wrap .sp_img.visible {opacity: 1;}

#sec06 {position: relative;}
#sec06 .swiper {  width: 153%;  left: 50%;  transform: translateX(-50%);}
#sec06 .swiper-slide,#sec06 .swiper-slide img  {  display: block;  width: 100%;}

#sec07 .tabs {  display: flex;  flex-flow: row nowrap;  width: 65%;  position: relative; }
#sec07 .tabs_tab {  display: block;  text-decoration: none;  transition: 350ms;  cursor: pointer;  text-align: center;  }
/* #sec07 .tabs_line {  display: block;  height: 1px;  position: absolute;  top: -10px;      background: linear-gradient(to right,transparent,#e4c99e 15%, #e4c99e 85%,transparent );  transition: 350ms;  }
#sec07 .tabs_line::after {content: ''; width: 100%; height: 1px; bottom: -50px; background: linear-gradient(to right,transparent,#e4c99e 15%, #e4c99e 85%,transparent);     position: absolute;   left: 50%;  transform: translateX(-50%);} */
#sec07 .tab-content2{display: none;  left: 50%;  transform: translateX(-50%);  position: relative;}
#sec07 .tab-content2.current{display: block; min-height: 300px;}
#sec07 .tabs_tab.box {width: calc(100% / 6); position: relative;}
#sec07 .tabs_tab.box::before,  #sec07 .tabs_tab.box::after   {content: ''; width: 95%; height: 1px;background: linear-gradient(to right,transparent,#e4c99e 15%, #e4c99e 85%,transparent);     position: absolute;   left: 50%;  transform: translateX(-50%); opacity: 0; transition: 0.3s;}  
#sec07 .tabs_tab.box.current::before {top: -0.625rem; opacity: 1;}
#sec07 .tabs_tab.box.current::after {bottom: -0.625rem; opacity: 1;}

#sec08 .container {height: 600px;}
#sec08 .swiper-container {   position: absolute;       right: -3.5rem;  width: 62.5%;}

#sec09 .flexList {flex-wrap: nowrap; position: relative;}
#sec09 .flexList .box {position: relative; overflow: hidden;} 
#sec09 .flexList .box .txt {position: absolute; text-align: center; transition: .3s; background-color: rgba(0,0,0,.5); width: 100%; height: 100%; top: 0; z-index: 1;}
#sec09 .flexList .box.on .txt { background-color:transparent;}
#sec09 .flexList .box .txt h1, 
#sec09 .flexList .box .txt p {transform: translateY(0); transition: .3s; cursor: pointer;}
#sec09 .flexList .box .txt:hover h1, 
#sec09 .flexList .box .txt:hover p {transform: translateY(-10px);}
#sec09 .flexList .box img {transform: scale(1); transition: .3s;}
#sec09 .flexList .box.on img {transform: scale(1.15);}

#sec10 #map {margin: 0 auto;}

#sec10 #map .root_daum_roughmap_landing {height: 580px !important;}
#sec10 ul p.font-18 {opacity: .5;}

@media (max-width:1550px) {
  #sec08 .container {    height: 350px;}
}

@media (max-width: 990px) {
  h1.font-60 { font-size: 4.6875rem; line-height: 1.2; }
  .font-30 { font-size: 2.500rem; }
  .font-20 { font-size: 1.750rem; }

  #main .main.swiper {height: 100vh;    max-height: 780px;    margin-top: 80px;}
  #main .main.swiper .swiper-slide {min-height: unset;}
  #main .main.swiper .swiper-slide.slide01 {background-image: url(/img/main/mainslide_m01.jpg);}
  #main .main.swiper .swiper-slide.slide02 {background-image: url(/img/main/mainslide_m02.jpg);}
  #main .main.swiper .swiper-slide.slide03 {background-image: url(/img/main/mainslide_m03.jpg);}
  #main .main.swiper .swiper-slide.slide01 .inner {top: 45%;}
  #main .font-100 {font-size: 7.500rem;}
  #main .font-30 {font-size: 2.500rem;}
  #main .font-60 { font-size: 4.375rem;}
  #main h1 .font-30 {font-size: 2.1875rem;}
  #main .pt-40 {padding-top: 1.250rem; line-height: 1.5; }
  #main .pt-80 {padding-top: 4.375rem; }
  .main.swiper .swiper-pagination span.index {font-size: 1.500rem;     margin-left: 15px; letter-spacing: -.3px;}
  .main.swiper .swiper-pagination-bullet:nth-child(1) + span.index {    margin-left: 5px;}
  .main.swiper .container {width: 90%;}
  .main.swiper .progress {transform: rotate(-90deg) scale(.75);}
  .main.swiper .swiper-pagination-bullet::after {width: 10px; height: 15px;     background-size: contain;}
  .main.swiper .swiper-pagination {bottom: 35px;}

  #sec01 .container {flex-direction: column;}
  #sec01 .width50 {width: 100%;}
  #sec01 h1::after {left: -7.5%; top: -7.5%; transform: scale(1);}
  #sec01 .ls-40 {letter-spacing: 1px;}
  #sec01 .img {padding-top: 5.625rem;}

  #sec02.section_mini {padding: 100px 0;}
  #sec02 [boxCount="3"] { --count:2; }
  #sec02 .box .inner {height: 200px;}
  #sec02 .box:hover {border-radius: 40px;}
  #sec02 .box p {padding-top:  5.625rem;}
  #sec02 .mt-20 {margin-top: 0.625rem; }

  .marquee .font-80 { font-size: 9.375rem;}
  .marquee .bg_txt {    color: rgba(255,253,250,0.5);}

  #sec03 .year {display: flex; align-items: baseline;  justify-content: center; }
  #sec03 .count {font-size:   15.625rem; margin-right: 1rem;}
  #sec03 .pt-100 {    padding-top: 5rem;}
  #sec03 img.inline-block {    max-width: 17.5%;}

  #sec04 .container {flex-direction: column;}
  #sec04 .width50,#sec04 .width40 {width: 100%;}
  #sec04 .font-50 { font-size: 3.750rem; }
  #sec04 .font-30 { font-size: 1.875rem; }
  #sec04  .img {padding:3rem 0 5rem; width: 100% ;}

  #sec05 .cont_inner {    flex-direction: column-reverse; height: 460px;}
  #sec05 .width50 {width: 100%;}
  #sec05 .width45 {width: 105.5%;}

  #sec05 .img {position: relative; padding-top: 5.625rem;}
  #sec05 .sp_nav { float: none;    display: flex;    width: 100%;    flex-wrap: wrap;}
  #sec05 .sp_nav li { padding-right: 5rem; margin-bottom: 0;}
  #sec05 .sp_nav li::after { right: 2.1875rem;    width: 13px;    height: 13px;}
  #sec05 .sp_img_wrap .sp_img {    padding: 3.125rem;}
  #sec05 .sp_img_wrap .sp_img01 {background-image: url(/img/main/special_m01.png);}
  #sec05 .sp_img_wrap .sp_img02 {background-image: url(/img/main/special_m02.png);}
  #sec05 .sp_img_wrap .sp_img03 {background-image: url(/img/main/special_m03.png);}
  #sec05 .sp_img_wrap .sp_img04 {background-image: url(/img/main/special_m04.png);}
  #sec05 .font-20 { font-size: 1.500rem;     line-height: 1.5;    letter-spacing: -.4px; }

  #sec06 .swiper {width: 245%;}  

  #sec07 .tabs {     flex-wrap: wrap;     width: 100%; gap: 0; }
  #sec07 .tabs_tab.box {     width: calc(100% / 3);    height: 37.5px;   display: flex;    justify-content: center;    align-items: center;    margin-bottom: 1.5rem;}
  #sec07 .tabs_line {display: none;} 
  #sec07 .tab-content2 {margin-top: 1.25rem;}
  #sec07 .tab-content2.current {min-height: auto;}
  #sec07 .tabs_tab.box::before,  #sec07 .tabs_tab.box::after {width: 85%;}
  #sec07 .tabs_tab.box.current::before {top: 0; opacity: 1;}
  #sec07 .tabs_tab.box.current::after {bottom: 0; opacity: 1;}
  #sec07 .tab-contents.pt-35 {padding-top: 0;}
  #sec07 .txt {line-height: 1.5;  letter-spacing: -.3px;}

  #sec08 .container {flex-direction: column; height: fit-content;}
  #sec08 .swiper-container {position: relative;     right: auto;     width: 105.5%;     padding-top: 5.625rem;}
  #sec08 .width35 {width: 100%;}

  #sec09 .flexList {    flex-wrap: wrap;}
  #sec09 .flexList[layoutStyle="fullbox"] {--y-gap: 0}
  #sec09 .flexList[layoutStyle="fullbox"] > .box {width: calc(100% / 2); overflow: hidden; max-height: 250px;}
  #sec09 .txt p.font-20 {line-height: 1.7;}

  #sec10 .width50 {width: 100%;}
  #sec10 #map .root_daum_roughmap_landing {height: 275px !important;}
  #sec10 ul.gna li.flex {flex-wrap: wrap;}
  #sec10 ul.gna p.width30 {width: 100%;}
  #sec10 ul.gna p.width35 , #sec10 ul.gna a.width35 {width: 50%;}
  #sec10 ul.pt-70 h3.font-30 {    font-size: 1.875rem;}
  #sec10 ul.pt-70 p.width30 {width: 55%;}
  #sec10 p.font-18  { font-size: 1.500rem; }
}

@media (max-width: 768px) {
  .section { padding: 100px 0;}
}

@media (max-width: 430px){
  .section {padding: 80px 0;}

  #sec02 .font-30,
  #sec03 .font-30,
  #sec05 .sp_nav.font-30,
  #sec10 .font-30 { font-size: 1.875rem; line-height: 1.5; }
  #sec10 .font-50 {font-size: 2.5rem;}
  #sec10 .pt-90 {padding-top: 2.75rem;}
  #sec10 .font-20 {font-size: 1.4rem;}

  h1.font-60 {font-size: 3.750rem;}
}