@charset "utf-8";
@import url('webfonts.css');
/*==============================================================
* Generated by somangLee on 2021-07-01
==============================================================*/
section {height: 100vh;}

/* main 스크롤 제거 */
body {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
body::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera*/
}

/* header */
header {width: 100%; background: rgba(255, 255, 255, 0); position: fixed; top: 0; left: 0; right: 0; z-index: 200; }
.headerWrap {/* width: 1450px*/;padding:0px 120px; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;-webkit-box-align: end;-ms-flex-align: end;align-items: flex-end; height: 95px; font-family: 'Pretendard'; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease;}
header::after {content: ""; position: absolute; z-index: -1; background: #fff; width: 100%; height: 83px; top: -83px; opacity: 0; -webkit-transition: top .2s ease-in-out; -o-transition: top .2s ease-in-out; transition: top .2s ease-in-out; }
.headerWrap .logo {background: url(/resources/images/webfront/logo/by_logo.png) no-repeat; width: 148px; height: 43px; background-position: left; -webkit-transition: background .35s; -o-transition: background .35s; transition: background .35s;}

/* gnb */
.gnb {position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);  bottom: 9px;}
.gnb li { float: left; margin-left: 70px;}
.gnb li:first-child {margin-left: 0;}
.gnb li a {font-size: 1.23rem; font-weight: 500; color: #fff; position: relative;} /*change*/
.gnb li a::after {content: ""; position: absolute; bottom: -5px; background: #fff; width: 0; height: 1px; left: 50%; opacity: 0; -webkit-transition: width .3s ease; -o-transition: width .3s ease; transition: width .3s ease; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); margin: 0;}
.gnb li a:hover::after {opacity: 1; width: 100%;}

/* 관련사이트 select */
header .select-wrap {position: relative; width: 140px; border: 1px solid rgba(2555, 255, 255, .5); border-radius: 20px; -webkit-transition: border-color .3s, border-radius .1s, background-color .3s; -o-transition: border-color .3s, border-radius .1s, background-color .3s; transition: border-color .3s, border-radius .1s, background-color .3s; -webkit-box-sizing: content-box; box-sizing: content-box;}
header .select-wrap .select-btn {position: relative; width: 100%; height: 38px; line-height: 38px; color: #fff;  padding: 0 17px; font-size: .85rem; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-transition: color .3s, background-color .3s; -o-transition: color .3s, background-color .3s; transition: color .3s, background-color .3s;}
header .select-lst { visibility: hidden; opacity: 0; width: calc(140px + 2px); height: 0; background: #fff; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; position: absolute; top: 38px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); border: 1px solid #fff; -webkit-transition: height .3s, border-color .3s, background-color .3s; -o-transition: height .3s, border-color .3s, background-color .3s; transition: height .3s, border-color .3s, background-color .3s; border-top: 0; overflow: hidden;}
header .select-lst::before {content: ""; width: 100%; height: 1px; background: #f5f5f5; opacity: 0;  position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }
header ul.select-lst li a {display: block; height: 38px; line-height: 38px; color: #000; padding: 0 17px; font-size: .85rem;}
header .select-wrap:hover { opacity: 1; border-bottom: 0;border-bottom-right-radius: 0;border-bottom-left-radius: 0; background: #fff;}
header .select-wrap:hover .select-btn {color: #000;}
header .select-wrap:hover .select-btn span::after {content: ""; width: 100%; border-top: 1px solid #ccc; }
header .select-wrap:hover .select-lst {visibility: visible; opacity: 1; height: auto; border-color: #fff; }
header .select-wrap:hover .select-lst::before {opacity: 1;}
header .select-wrap:hover .select-lst li {-webkit-transition-delay: .3s;-o-transition-delay: .3s;transition-delay: .3s; -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; }
header .select-lst li a:hover {background: #f5f5f5;}

.hidden-sitemap {display: none;}
.hidden-sitemap a {display: block; background: url(/resources/images/webfront/icon/menu_icon.png) no-repeat; width: 26px; height: 21px;}

header.fixed {-webkit-box-shadow: 0 4px 30px -5px rgba(0, 0, 0, 0.2);box-shadow: 0 4px 30px -5px rgba(0, 0, 0, 0.2);}
header.fixed::after {opacity: 1; top: 0; }
header.fixed .headerWrap { height: 83px;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
header.fixed .headerWrap .gnb li a {color: #000;}
header.fixed .logo {background: url(/resources/images/webfront/logo/by_logo2.png) no-repeat; background-position: left;}
header.fixed .hidden-sitemap a {background: url(/resources/images/webfront/icon/menu_icon2.png) no-repeat;}
header.fixed .select-wrap {border-color: #bdbdbd;}
header.fixed .select-wrap .select-btn {color: #333;}
header.fixed .select-lst {border-color: #333 !important;}
header.fixed .gnb {position: sticky;}

/* main section */
#fullpage section {width: 100%; height: 100vh; position: relative;}
#fullpage .section1::after {content: ""; background: url(/resources/images/webfront/main_bg01.jpg) no-repeat center center/cover; position: absolute; top: 0; left: 0; right: 0;bottom: 0; z-index: -1; -webkit-animation: imgani 3s .6s; animation: imgani 3s .6s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-transition: 3s; -o-transition: 3s; transition: 3s; -webkit-transform: scale(1.07); -ms-transform: scale(1.07); transform: scale(1.07); -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center;}
#fullpage .section2::after {content: ""; background: url(/resources/images/webfront/main_bg02.jpg) no-repeat center/cover; position: absolute; top: 0; left: 0; right: 0;bottom: 0; z-index: -1;}
#fullpage .section4::after {content: "";background: url(/resources/images/webfront/main_bg09.jpg) no-repeat center/cover; position: absolute; top: 0; left: 0; right: 0;bottom: 0; z-index: -1;}
#fullpage .section5 {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}

@-webkit-keyframes imgani {
  0% {-webkit-transform: scale(1.07);transform: scale(1.07);}
  100% {-webkit-transform: scale(1);transform: scale(1);}
}

@keyframes imgani {
  0% {-webkit-transform: scale(1.07);transform: scale(1.07);}
  100% {-webkit-transform: scale(1);transform: scale(1);}
}

/* sitemap */
.sitemap { position: fixed; z-index: 100; left: 0; top: 0; bottom: 0; width: 92px; border-right: 1px solid rgba(255, 255, 255, .1); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
.hidden-sitemap {display: none; }
.hidden-sitemap a {display: none;background: url(/resources/images/webfront/icon/menu_icon.png) no-repeat; width: 26px; height: 21px; }

/* right-nav */
.right-nav {position: fixed; z-index: 100; right: 0; top: 0; bottom: 0; border-left: 1px solid rgba(2555, 255, 255, .1); width: 100px; -webkit-box-sizing: content-box; box-sizing: content-box;} 
.right-nav.active ul {top: 36%;}
.right-nav ul {width: 100px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
.right-nav ul li.active a {border-left: 1px solid #fff;}
.right-nav ul li a {display: inline-block; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; -webkit-text-orientation: mixed; text-orientation: mixed; font-size: 1rem; font-weight: 300; padding-left: 23px; margin: 14px 0; }

/* scroll-down */
.scroll-down { position: absolute; left: 50%; bottom: 0;  z-index: 100; cursor: default; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);}
.scroll-down .inner { display: inline-block;  position: relative; padding-bottom: 80px; }
.scroll-down span { font-size: .9rem; color: #fff; font-family: 'Play', sans-serif; line-height: 1;  font-weight: 500;}
.scroll-down .inner .line {display: block; width: 1px; height: 66px; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);}
.scroll-down .inner .line:before {content: ''; background: #fff; opacity: .3;position: absolute;left: 0; top: 0;bottom: 0;width: 1px;height: 100%;}
.scroll-down .inner .line:after {content: ''; background: #fff; position: absolute; left: 50%; top: 45px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); -webkit-animation: down 2s infinite ease-in-out;animation: down 2s infinite ease-in-out; width: 8px; height: 8px; border-radius: 50%; }

@-webkit-keyframes down {
  0%, 20% { top: 0;}
  80%, 100% { top: 87%;}
}

@keyframes down {
  0%, 20% { top: 0;}
  80%, 100% { top: 87%;}
}

/* ================================================== */

/* common  */
h1.tit {text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.3); white-space: nowrap;}
/* p:not(.p1) { text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2);} */ /*0825*/
.txtbox { position: absolute; top: 53%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);  text-align: center;}
.txtbox .tit strong {font-weight: 600; font-size: 4.5rem;}
.txtbox .tit span {font-weight: 600;}
.txtbox .sub {padding-top: 40px; line-height: 1.8;}

/* section1, section2 */
.section1 .txtbox .tit {font-size: 3.8rem; font-weight: 600;}
.section2 .txtbox .tit {font-size: 2.72rem; font-weight: 100; line-height: 1.5; white-space: nowrap;}
.section1 .txtbox .sub {width: 80%; margin: auto;}
.section1 .txtbox .sub-tit {font-size: 1.15rem;}
.section2 .box-wrap {margin: 50px auto 0; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; width: 840px; }
.section2 .box-wrap .box {padding: 50px 35px 65px 35px; -webkit-box-sizing: border-box; box-sizing: border-box; float: left; width: 48%; background: rgba(4, 4, 13, 0.45); margin-right: 4%; text-align: left;}
.section2 .box-wrap .box:last-child {margin-right: 0;}
.section2 .box-wrap .box em {font-size: 16px; font-weight: 200; color: #ccc;} /*change*/
.section2 .box-wrap .box p {font-size: 25px; padding: 30px 0 40px; line-height: 1.4; font-weight: 400;}/*change*/ 
.section2 .mark-wrap::before {content: ""; display: block; border-top: 1px solid rgba(255, 255, 255, 0.2);}
.section2 .mark-wrap ul {padding: 20px 0; position: relative;} /*change*/ 
.section2 .mark-wrap li {position: absolute; min-width: 33px; height: 33px; line-height: 33px; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: all .15s ease; -o-transition: all .15s ease; transition: all .15s ease;text-align: center;}
.section2 .mark-wrap li img {display: block;background: #fff;border-radius: 50%;}
.section2 .mark-wrap li:nth-child(1) {left: 0; z-index: 7; }
.section2 .mark-wrap li:nth-child(2) {left: 25px; z-index: 6;}
.section2 .mark-wrap li:nth-child(3) {left: 50px; z-index: 5;}
.section2 .mark-wrap li:nth-child(4) {left: 75px; z-index: 4;}
.section2 .mark-wrap li:nth-child(5) {left: 100px; z-index: 3;}
.section2 .mark-wrap li:nth-child(6) {left: 125px; z-index: 2;}
.section2 .mark-wrap li:nth-child(7) {left: 150px; z-index: 1;}
.section2 .box1 .mark-wrap li.total {left: 75px;}
.section2 .box2 .mark-wrap li.total {left: 175px;} 
.section2 .mark-wrap li.total {padding: 0 18px; background: rgb(255 255 255 / 10%); border-radius: 30px; font-size: 15px; border: none; }
.section2 .mark-wrap li.total em {margin: .18em; font-weight: 500;}
.section2 .mark-wrap li:hover .tooltip {visibility: visible; opacity: 1;  -webkit-transform: translate(-50%, -150%);  -ms-transform: translate(-50%, -150%);  transform: translate(-50%, -150%);} 
.tooltip { opacity: 0;  display: block; position: absolute;  top: 0; left: 50%; z-index: -1; padding: 8px 10px; font-size: 12px; border-radius: 10px; pointer-events: none;  -webkit-transform: translate(-50%, -100%);  -ms-transform: translate(-50%, -100%);  transform: translate(-50%, -100%); -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; background: #fff;  line-height: 1; width: -webkit-max-content; width: -moz-max-content; width: max-content; color: #222; font-weight: 500;} /*change*/
.tooltip:after { content: ""; position: absolute; bottom: -11px; left: 43%; width: 0; height: 0;  border-top: 6px solid #fff; border-right: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid transparent;}
.badge-warp {display: -webkit-box;display: -ms-flexbox;display: flex;  -webkit-box-pack: center;  -ms-flex-pack: center;  justify-content: center; padding-top: 60px;}

.badge-warp em, .badge-warp [class*="detail-btn"] {display: inline-block; padding: 10px 20px; margin: 0 5px; border-radius: 25px; color: #fff; font-size: .9rem; text-align: center; white-space: nowrap;}
.badge-warp em {background: rgba(0, 0, 0, 0.2); cursor: default;}
.badge-warp em:hover{background: rgba(0, 0, 0, 0.6);}
.badge-warp [class*="detail-btn"] {cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
.badge-warp [class*="detail-btn"]::after {content: "\e90b"; font-family: 'xeicon'; color: #fff; margin-left: 27px; line-height: 1.2;}
.badge-warp .detail-btn1 {background: #2b395a; }
.badge-warp .detail-btn2 {background: rgba(0, 0, 0, 0.75);}
.section1 .txtbox .hidden-tit, 
.section2 .txtbox .hidden-tit {display: none;}
.section1 .txtbox .hidden-sub-tit {display: none;}
.section2 .hidden-box-wrap {display: none;}

/* section3 */
.section3 .txtbox {position: absolute; z-index: 20; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
.section3 .txtbox .tit, .section3 .txtbox .sub-tit {cursor: default;}
.section3 .txtbox .tit {font-size: 3.313rem; font-weight: 600;}
.section3 .txtbox .sub-tit {font-size: 1.1rem; font-weight: 200; }
.section3 .txtbox .tit + .sub {padding-top: 2.7rem; }
.section3 .badge-warp {padding-top: 3.125rem;}

.swiper-container { width: 100%; height: 100%;}
.slide {display: -webkit-box;display: -ms-flexbox;display: flex;  -webkit-box-pack: center;  -ms-flex-pack: center;  justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;  position: relative;  text-align: center; font-size: 18px;  background: #fff;  overflow: hidden;}
.slide-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5;}
.slide-image.img1 {background: url(/resources/images/webfront/main_bg03.jpg) no-repeat 0 0/cover;}
.slide-image.img2 {background: url(/resources/images/webfront/main_bg04.jpg) no-repeat 0 0/cover;}
.slide-image.img3 {background: url(/resources/images/webfront/main_bg05.jpg) no-repeat 0 0/cover;}
.slide-image.img4 {background: url(/resources/images/webfront/main_bg06.jpg) no-repeat 0 0/cover;}
.slide-image.img5 {background: url(/resources/images/webfront/main_bg07.jpg) no-repeat 0 0/cover;} 
.slide-image.img6 {background: url(/resources/images/webfront/main_bg08.jpg) no-repeat 0 0/cover;} 

.swiper-slide-active .slide-image::after {position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1;  -webkit-animation: imgani 3s .6s;  animation: imgani 3s .6s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-transition: 3s .6s; -o-transition: 3s .6s; transition: 3s .6s; -webkit-transform: scale(1.07); -ms-transform: scale(1.07); transform: scale(1.07);}
.swiper-slide-active .slide-image.img1::after {content: ""; background: url(/resources/images/webfront/main_bg03.jpg) no-repeat 0 0/cover;}
.swiper-slide-active .slide-image.img2::after {content: ""; background: url(/resources/images/webfront/main_bg04.jpg) no-repeat 0 0/cover;}
.swiper-slide-active .slide-image.img3::after {content: ""; background: url(/resources/images/webfront/main_bg05.jpg) no-repeat 0 0/cover;}
.swiper-slide-active .slide-image.img4::after {content: ""; background: url(/resources/images/webfront/main_bg06.jpg) no-repeat 0 0/cover;}
.swiper-slide-active .slide-image.img5::after {content: ""; background: url(/resources/images/webfront/main_bg07.jpg) no-repeat 0 0/cover;}
.swiper-slide-active .slide-image.img6::after {content: ""; background: url(/resources/images/webfront/main_bg08.jpg) no-repeat 0 0/cover;}

.slide-title span { white-space: pre; display: inline-block; opacity: 0;}
.slideshow { position: relative;}
.slideshow-pagination { position: absolute; bottom: 10rem; left: -1rem; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: opacity .3s; -o-transition: opacity .3s; transition: opacity .3s; z-index: 10;}

.slideshow-pagination-item {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
.slideshow-pagination-item .pagination-number {opacity: .5; }
.pagination-number { font-size: 1.125rem; color: #fff; padding: 0 0.7rem; font-family: 'Play', sans-serif; height: 22px; line-height: 20px; }
.slideshow-pagination-item:hover, 
.slideshow-pagination-item:focus {cursor: pointer;}
.slideshow-pagination-item:last-of-type .pagination-separator {width: 0;}
.slideshow-pagination-item.active .pagination-number {opacity: 1;}
.slideshow-pagination-item.active .pagination-separator {width: 10vw;}

.slideshow-navigation {position: absolute; bottom: 10rem; left: 49%; -webkit-transform: translate(-50%, -21px); -ms-transform: translate(-50%, -21px); transform: translate(-50%, -21px); width: 22vw; z-index: 200;}
.slideshow-navigation-button {position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;  -webkit-box-align: center;  -ms-flex-align: center;  align-items: center;}
.slideshow-navigation-button.prev {left: -2.5vw;}
.slideshow-navigation-button.next {right: -2.5vw;}
.slideshow-navigation-button i {font-size: 1.4rem; cursor: pointer; color: #fff;}
.slideshow-navigation-button.control {right: -4vw;}
.slideshow-navigation-button.control .play-btn {display: none;}

.pagination-separator { display: none; position: relative; height: 2px; background: rgba(255, 255, 255, 0.25); -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; }
.pagination-separator-loader { position: absolute; top: 0; left: 0; width: 100%;  height: 100%; background: #fff; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0;}

@media (min-width: 45em) { 
  .pagination-separator { display: block;}
}
@media screen and (max-width:1720px) {
  .slideshow-navigation-button.prev {left: -3.5vw;}
  .slideshow-navigation-button.next {right: -3.5vw;}
  .slideshow-navigation-button.control {right: -5.5vw;}
}
@media screen and (max-width:1535px) {
  .slideshow-navigation-button.prev {left: -6vw;}
  .slideshow-navigation-button.next {right: -6vw;}
  .slideshow-navigation-button.control {right: -8vw;}
}
@media screen and (max-width:1310px) {
  .slideshow-navigation-button.prev {left: -9vw;}
  .slideshow-navigation-button.next {right: -9vw;}
  .slideshow-navigation-button.control {right: -11vw;}
}
@media screen and (max-width:1044px) {
  .slideshow-navigation-button.prev {left: -10vw;}
  .slideshow-navigation-button.next {right: -10vw;}
  .slideshow-navigation-button.control {right: -12vw;}
}

/*section3 motion*/
.swiper-slide-active .tit {-webkit-animation: txt-motion 1.2s;animation: txt-motion 1.2s; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; -webkit-animation-delay: .5s; animation-delay: .5s;}

.swiper-slide-active .sub,
.swiper-slide-active .badge-warp {-webkit-animation: txt-motion 1.2s;animation: txt-motion 1.2s; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; -webkit-animation-delay: .9s; animation-delay: .9s; }

@-webkit-keyframes txt-motion {
  0% {opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px);}
  100% {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}
}

@keyframes txt-motion {
  0% {opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px);}
  100% {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}
}

/* section4 */
.section4 .pc_wrap {width: 1450px; position: absolute; top: 50%; left: 50%;  -webkit-transform: translate(-50%, -50%);  -ms-transform: translate(-50%, -50%);  transform: translate(-50%, -50%);}
.section4 .pc_txtbox {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-bottom: 70px;}
.section4 .pc_txtbox .tit {font-size: 2.7rem; letter-spacing: 1px;}
.section4 .pc_wrap .news-wrap ul li {float: left; width: 23.5%;}
.section4 .pc_wrap .news-wrap ul li:not(:last-child) {margin-right: 2%;}
.section4 .pc_wrap .news-wrap ul li:hover img {-webkit-transform: scale(1.05);-ms-transform: scale(1.05);transform: scale(1.05);}
.shine:before {content: ''; position: absolute; top: 0; left: -75%; z-index: 2;width: 50%;height: 100%;  background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.2) 100%);background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.2) 100%);-webkit-transform: skewX(-25deg);
  transform: skewX(-25deg);}
.shine:hover::before, 
.news-wrap ul li:hover .shine:before {-webkit-animation: shine .75s; animation: shine .75s;}

@-webkit-keyframes shine {
  to {left: 100%;}
}
@keyframes shine {
  to {left: 100%;}
}

.section4 .pc_wrap .news-wrap ul li:hover .txt {text-decoration: underline;}
.section4 .pc_wrap .news-wrap .img {width: 100%; height: 242px; overflow: hidden; position: relative;}
.section4 .pc_wrap .news-wrap .img img {width: 100%; height: 100%; cursor: pointer; -webkit-transition: -webkit-transform .3s ease-in-out; transition: -webkit-transform .3s ease-in-out; -o-transition: transform .3s ease-in-out; transition: transform .3s ease-in-out; transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;} 
.section4 .pc_wrap .news-wrap .txt {line-height: 1.5; margin: 30px 0 40px; font-size: 21px; cursor:pointer; white-space: normal; word-break: break-all; overflow:hidden; -o-text-overflow:ellipsis; text-overflow:ellipsis;display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.section4 .pc_wrap .news-wrap .date { font-weight: 100;}
.section4 .pc_txtbox .more-btn { border: 1px solid rgba(255, 255, 255, .5); height: 60px; line-height: 60px; padding: 0 22px; position: relative; -webkit-transition: border .3s; -o-transition: border .3s; transition: border .3s;}
.section4 .hidden-wrap {display: none;}

/* section4 motion */
.section4 .pc_txtbox .tit {-webkit-transition: -webkit-transform .3s;transition: -webkit-transform .3s;-o-transition: transform .3s;transition: transform .3s;transition: transform .3s, -webkit-transform .3s;}
.section4.aos-animate .pc_txtbox .tit {opacity: 1; -webkit-animation: fadeRight .5s .3s; animation: fadeRight .5s .3s; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;}
@-webkit-keyframes fadeRight {
  0% {opacity: 0; -webkit-transform: translateX(-25px); transform: translateX(-25px);}
  100% {opacity: 1; -webkit-transform: translateX(0); transform: translateX(0);}
}
@keyframes fadeRight {
  0% {opacity: 0; -webkit-transform: translateX(-25px); transform: translateX(-25px);}
  100% {opacity: 1; -webkit-transform: translateX(0); transform: translateX(0);}
}

.section4 .pc_txtbox .more-btn {-webkit-transition: -webkit-transform .3s;transition: -webkit-transform .3s;-o-transition: transform .3s;transition: transform .3s;transition: transform .3s, -webkit-transform .3s;}
.section4.aos-animate .pc_txtbox .more-btn {opacity: 1; -webkit-animation: fadeLeft .5s .6s ease; animation: fadeLeft .5s .6s ease; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards;}
@-webkit-keyframes fadeLeft {
  0% {opacity: 0; -webkit-transform: translateX(25px); transform: translateX(25px);}
  100% {opacity: 1; -webkit-transform: translateX(0); transform: translateX(0);}
}
@keyframes fadeLeft {
  0% {opacity: 0; -webkit-transform: translateX(25px); transform: translateX(25px);}
  100% {opacity: 1; -webkit-transform: translateX(0); transform: translateX(0);}
}

.section4 .pc_wrap .news-wrap li {-webkit-transition: -webkit-transform .5s;transition: -webkit-transform .5s;-o-transition: transform .5s;transition: transform .5s;transition: transform .5s, -webkit-transform .5s; }
.section4.aos-animate .pc_wrap .news-wrap li {opacity: 1; -webkit-animation: fadeDown .7s ease-in-out; animation: fadeDown .7s ease-in-out;  -webkit-animation-fill-mode: backwards;  animation-fill-mode: backwards; }
.section4.aos-animate .pc_wrap .news-wrap li:nth-child(1) {-webkit-animation-delay: 1s;animation-delay: 1s;}
.section4.aos-animate .pc_wrap .news-wrap li:nth-child(2) {-webkit-animation-delay: 1.2s;animation-delay: 1.2s;}
.section4.aos-animate .pc_wrap .news-wrap li:nth-child(3) {-webkit-animation-delay: 1.4s;animation-delay: 1.4s;}
.section4.aos-animate .pc_wrap .news-wrap li:nth-child(4) {-webkit-animation-delay: 1.6s;animation-delay: 1.6s;}

@-webkit-keyframes fadeDown {
  0% {opacity: 0; -webkit-transform: translateY(-25px); transform: translateY(-25px);}
  100% {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}
}

@keyframes fadeDown {
  0% {opacity: 0; -webkit-transform: translateY(-25px); transform: translateY(-25px);}
  100% {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}
}

/* section5 */
.bottom-info-wrap {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
.bottom-info-wrap .cover {position: relative; width: 50%; z-index: 200;}
.bottom-info-wrap .info1, .bottom-info-wrap .info2 {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; padding: 0 90px; height: 224px; }
.bottom-info-wrap .info1 {background: #14161a;}
.bottom-info-wrap .info2 {background: #174299;}
.bottom-info-wrap h1 {font-size: 2.3rem; line-height: 1; font-weight: 600;}
.bottom-info-wrap p {font-size: 1.063rem; color: #fff; padding-top: 27px; font-weight: 300;}
.bottom-info-wrap .hidden-txt {display: none;}

.bottom-info-wrap .go-btn {padding: 0 22px; height: 60px; line-height: 60px; border: 1px solid rgba(255, 255, 255, .5); text-align: center; position: absolute; right: 90px;}
.hidden {display: inline-block; vertical-align: middle; visibility: hidden; opacity: 0; max-width: 0;  white-space: nowrap;
  -webkit-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -o-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.section4 .pc_txtbox .more-btn:hover .hidden,
.bottom-info-wrap .go-btn:hover .hidden {visibility: visible; opacity: 1; max-width: 5rem; margin-right: 25px; }

/* hidden-select-wrap 관련사이트 */
.hidden-select-wrap {display: none; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; position: relative;}
.hidden-select-wrap .select {width: 100%; height: 67px; line-height: 67px; position: relative; padding: 0 20px; background: #f5f5f5; color: #000; font-weight: 500; border-bottom: 1px solid #ddd; cursor: pointer;}
.hidden-select-wrap .select::after {content: "\e936"; font-family: 'xeicon'; font-size: 1.3rem; color: #000; position: absolute; right: 20px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
.hidden-select-wrap ul {display: none; position: absolute; top: 67px; width: 100%; z-index: 999;border-bottom: 1px solid #ddd;}
.hidden-select-wrap ul li a {display: block; width: 100%; height: 50px; line-height: 50px; padding: 0 20px; background: #eee; color: #000;font-weight: 500;}
.hidden-select-wrap ul li a:hover, .hidden-select-wrap ul li a:active {background: #e9e9e9;}

/* footer */
footer {background: #fff; height: 100px; padding: 0 90px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2;} 
footer strong, footer span {display: inline-block; color: #5e5e5e; font-size: 1rem;}
footer strong {font-weight: 700; padding-right: 14px; color: #222;}
footer span {font-weight: 500; letter-spacing: -.5px;}
footer ul li {float: left; margin-right: 35px; position: relative;}
footer ul li:last-child {margin-right: 0;}
footer ul li:last-child::after{content: none;}
footer ul li::after {content: ""; width: 1px; height: 12px; background: #d8d8d8; position: absolute; right: -18px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
footer .copy {font-weight: 300; font-family: 'Play';}
footer .copy .company {color: #3d6bc7; font-weight: 600;}

/* modal */
@media screen and (min-width:10px) {
  html.over-hidden {overflow: hidden;} /*add*/
  .modal-panel { display:block; position: fixed; z-index: 1000; top: 0; left: 100%; width: 100%; height: 100%; -webkit-transition: left 380ms cubic-bezier(0.455, 0.03, 0.515, 0.955); -o-transition: left 380ms cubic-bezier(0.455, 0.03, 0.515, 0.955); transition: left 380ms cubic-bezier(0.455, 0.03, 0.515, 0.955);}
  .modal-panel::after {content: ""; background: rgb(0 0 0 / 80%); width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
  html.open-modal1 .modal-panel.buy, 
  html.open-modal2 .modal-panel.demo {left: 0; -webkit-transition: left 680ms 120ms cubic-bezier(0.45, 0, 0.25, 1); -o-transition: left 680ms 120ms cubic-bezier(0.45, 0, 0.25, 1); transition: left 680ms 120ms cubic-bezier(0.45, 0, 0.25, 1); }
  .modal-panel .container {position: absolute; top: 0; left: 0; z-index: 999; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-bottom: 54px;}

  .modal-panel .close-wrap {-webkit-box-ordinal-group: 2;-ms-flex-order: 1;order: 1; padding-right: 55px;}
  .modal-panel .modal-wrap {-webkit-box-ordinal-group: 3;-ms-flex-order: 2;order: 2; max-height: 80vh; overflow: auto;} /*change*/
  .modal-close { width: 72px; height: 72px; border-radius: 50%; border: 1px solid #fff; display: block; text-align: center; line-height: 72px;  -webkit-transition: background .3s ease;  -o-transition: background .3s ease;  transition: background .3s ease; color: #fff;}
  .modal-close i {font-size: 1.4rem; display: inline-block; vertical-align: middle;}
  .modal-close:hover {background: #fff;}
  .modal-close:hover i {color: #14161a;}
  .modal-wrap {background: #fff; width: 50%;  padding: 55px; color: #000;}
  .modal-panel.demo .modal-wrap {height: initial;}

  .modal-wrap h2 {font-size: 1.75rem;}
  .modal-wrap > p {padding: 1.2rem 0 2.5rem; font-size: .9375rem; line-height: 1.6; font-weight: 500; letter-spacing: -.0.4em;} /*change*/

  .modal-wrap .cont {margin-bottom: 40px}
  .modal-wrap .cont h3 {font-size: 1rem; margin-bottom: .85rem;}
  .modal-wrap .cont1 ul li {float: left; width: calc(50% - 22px); margin-bottom: .75rem; border-bottom: 1px solid #d9d9d9;}
  .modal-wrap .cont1 ul li:nth-child(odd) {margin-right: 44px; }
  .modal-wrap .cont1 ul li label {font-size: 0.875rem; letter-spacing: -0.1em; color: #555; padding: 13px 0; display: inline-block; position: relative; width: 100%; height: 100%;}
  .modal-wrap .cont1 ul li input { color: #000; font-size: 1rem; font-weight: 700; padding: 0 10px; position: absolute; top: 0; bottom: 0; height: 100%; width: 90%; letter-spacing: 0;}
  .modal-wrap .cont1 ul li.case input {width: calc(100% - 80px);}
  .modal-wrap .cont2 textarea {width: 100%; height: 120px; border: 1px solid #d9d9d9; padding: 10px; }
  .attach-file-warp { margin: 18px 0 42px; border-bottom: 1px solid #d9d9d9; padding-bottom: 6px;}
  .attach-file {position: relative; width: 74px;}
  .attach-file .file-panel {display: inline-block; background: #000; cursor: pointer; width: inherit; height: 31px; line-height: 31px; color: #fff; text-align: center; font-size: 13px;}
  .attach-file input {position: absolute; left: -9999px;}
  .file-name { display: inline-block; width: calc(100% - 78px); color: #555; font-size: 13px; vertical-align: bottom;}

  .agree-wrap label {font-size: 15px; font-weight: 700;}
  .modal-bottom .txt {padding: 28px 17px; border: 1px solid #d9d9d9; margin: 12px 0 28px; line-height: 1.8; height: 147px; overflow-y: auto;} 
  .modal-bottom .txt p {font-size: .95rem; letter-spacing: -1px;}
  .modal-bottom .txt p.f {margin-bottom: 18px;}
  .modal-bottom .txt p.tit {font-weight: 700; }
  .modal-bottom .submit {display: block; width: 118px; height: 48px; line-height: 48px; background:#000; color: #fff; font-weight: 500; font-size: 1.125rem; margin: 0 auto;} 
}

/* modal (tablet) */
@media screen and (max-width:1520px) {
  .modal-panel .container {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column; padding-top: 54px; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end;}
  .modal-panel .close-wrap {padding-right: 0; padding-bottom: 50px; }
  .modal-panel.demo .close-wrap {padding-right: 0; padding-bottom: 0px; }
  .modal-panel.demo .close-wrap {padding: 40px 0 50px;}
  .modal-close {width: 70px; height: 70px; line-height: 70px;}
  .modal-panel .modal-wrap {height: auto;}
  .modal-wrap {width: 90%;}
  .modal-wrap .cont h3 {margin-bottom: .4rem;}
  .modal-wrap > p {padding: 1rem 0 2rem;}
  .modal-bottom .submit {margin: 20px auto 0;}
}

/* modal (mobile) */
@media screen and (max-width:750px) {
  .modal-panel.buy .close-wrap {padding-bottom: 25px;}
  .modal-panel.demo .close-wrap {padding: 0 0 25px;}
  .modal-wrap {overflow-y: auto; padding: 50px 30px 40px;}
  .modal-wrap h2 {font-size: 1.5rem;}
  .modal-wrap p {font-size: .875rem;}
  .modal-wrap .cont1 ul li {width: 100%;}
  .modal-bottom .submit {margin: 25px auto 0;}
}

/* ==================== 반응형 ========================= */

@media screen and (max-width:1662px) {
  /*header*/
  /* .headerWrap {width: 80%;} */

  /*section4*/
  .section4 .pc_wrap {width: 85%;}
  .section4 .pc_wrap .news-wrap .txt {font-size: 1.18rem;}
}

@media screen and (max-width:1320px) {
  /*section1*/
  .section1 .txtbox .tit {font-size: 3.3rem;}
  .section1 .txtbox .sub {width: 90%;}
  .txtbox .tit strong {font-size: 3.6rem;}
}

@media screen and (max-width:1460px) {
  /*section2*/
  .section2 .txtbox .tit {font-size: 2.1rem;}

  /*section3*/
  .section3 .txtbox .tit {font-size: 45px;}

  /*section4*/
  .section4 .pc_wrap {display: none;}
  .section4 .hidden-wrap {display: block; width: 80%; position: absolute; top: 56%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); padding: 0 10px;}
  .section4 .hidden-wrap .tit {font-size: 2.188rem; text-align: center; margin-bottom: 75px;} 
  .section4 .hidden-wrap p {font-size: 1.125rem; display: inline-block; max-width: calc(100% - 91px); overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } /*change*/
  .section4 .hidden-wrap .date {font-size: 1rem; font-weight: 300; color: #aaa;}
  .section4 .hidden-wrap .news-wrap ul li:last-child {border-bottom: 0;}
  .section4 .hidden-wrap .news-wrap ul li {height: 88px; line-height: 88px; border-bottom: 1px solid rgba(2555, 255, 255, .2); padding: 0 27px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;}
  .section4 .hidden-wrap .btn-wrap {display: block; text-align: center;width: 143px; height: 62px; line-height: 62px; border: 1px solid #5a697f; margin: 70px auto 0;}
  .section4 .hidden-wrap .btn-wrap .more-btn {display: -webkit-box;display: -ms-flexbox;display: flex;  -webkit-box-pack: justify;  -ms-flex-pack: justify;  justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 24px; }
  .section4 .hidden-wrap .btn-wrap .more-btn i {margin-bottom: 5px;}

  /*section5*/
  .bottom-info-wrap {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}
  .bottom-info-wrap .cover {width: 100%;}
  .bottom-info-wrap .info1, .bottom-info-wrap .info2 {height: 140px;}
  .bottom-info-wrap h1 {font-size: 1.5rem;}
  .bottom-info-wrap p{padding-top:15px;}
  
  /*footer*/
  footer {height: auto; padding: 0; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
  footer ul {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
  footer ul li {margin: 30px 26px 30px 0; }
  footer ul li::after {right: -14px;}
  footer .copy {display: block; width: 100%; text-align: center; border-top: 1px solid #e5e5e5; padding: 10px 0;} 
}

@media screen and (max-width: 1150px) {

  /*common*/
  .txtbox .tit strong {font-size: 3rem;}

  /*hedaer*/
  /*.headerWrap {width: 75%;}*/
  .headerWrap .gnb li {margin-left: 33px;}
  .headerWrap .gnb li a {font-size: 1.1rem;}

  /*section1*/
  .section1 .txtbox .tit {font-size: 2.5rem;}

  /*section2*/
  .section2 .txtbox {width: 75%;}
  .section2 .txtbox .tit {display: none;}
  .section2 .txtbox .hidden-tit {display: block; font-size: 2.1rem; line-height: 1.4; font-weight: 200;}
  .section2 .txtbox .hidden-tit span {font-weight: 600;}
  .section2 .box-wrap {display: none;}
  .section2 .hidden-box-wrap { display: block; margin: 50px auto 0; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; }
  .section2 .hidden-box-wrap .box {width: 100%; background: rgba(11, 14, 29, 0.4); height: 80px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 30px;}
  .section2 .hidden-box-wrap .box + .box {margin-top: .75rem;}
  .section2 .hidden-box-wrap .box .txt {text-align: left;}
  .section2 .hidden-box-wrap .box .date {text-align: right; min-width: 140px;font-size: 1rem; font-weight: 300; color: #aaa;}

  /*section3*/
  .section3 .txtbox .tit {font-size: 2.5rem;}
  .section3 .txtbox .sub-tit {font-size: 1rem;}
  .section3 .txtbox {width: 80%;}
  .section3 .badge-warp em, 
  .section3 .badge-warp [class*="detail-btn"] {font-size: .9rem;}
  .section3 .txtbox .tit + .sub {padding-top: 2.3rem; width: 80%; margin: auto;}
  .section3 .badge-warp {padding-top: 2.5rem;}

  /*footer*/
  footer ul {display: block; text-align: center; padding: 10px 0;}
  footer ul li {margin: 10px 0;}
  footer ul li.address {width: 100%;}
  footer ul li.row {width: 33.3333%;}
  footer ul li.row1 {text-align: right;}
  footer ul li.row3 {text-align: left;}
  footer ul li::after {content: unset;}
}

@media screen and (max-width:890px) {

  /*header, sitemap, nav*/
  .sitemap, .right-nav {display: none;}
  .headerWrap {width: 100%;}
  .headerWrap {height: 75px; border-bottom: 1px solid rgba(255, 255, 255, .2); padding: 0 30px; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
  header.fixed .headerWrap {height: 83px;}
  .headerWrap .gnb {display: none;}
  .hidden-sitemap {display: block;}
  .hidden-sitemap a {display: block; background: url(/resources/images/webfront/icon/menu_icon.png) no-repeat;}
  .headerWrap .logo, header.fixed .logo {background-size: 90%;}
  .header .select-wrap {display: none;}
  
  /*common*/
  .txtbox {width: 100%; padding: 0 30px;}
  .badge-warp {padding-top: 30px;}
  .scroll-down .inner {padding-bottom: 60px; font-size: .75rem;}
  .scroll-down .inner .line {height: 50px;}

  /*section1*/
  .section1 .txtbox .sub {width: auto;}
  .section1 .txtbox .tit {display: none;}
  .section1 .txtbox .hidden-tit {display: block; font-size: 2.7rem; font-weight: 600;}
  .section1 .txtbox .hidden-tit strong {font-size: 3rem;font-weight: 600;}
  .section1 .txtbox .sub-tit {display: none;}
  .section1 .txtbox .hidden-sub-tit {display: block; font-weight: 300; width: 90%; margin: auto;}

  /*section2*/
  .section2 .txtbox {width: 100%;}
  
  /*section3*/
  .section3 .txtbox {width: 100%;}
  .section3 .txtbox .tit {line-height: 1.4; white-space: normal; font-size: 2.2rem;}
  .slideshow-navigation-button i {display: none;}
  .slide-image.img1 {background-position: right;}
  .slide-image.img2 {background-position-x: 55%;}
  .slide-image.img3 {background-position-x: 63%;}
  .slide-image.img4 {background-position: center;}
  .slide-image.img5 {background-position: left;}
  .slide-image.img6 {background-position: center;}

  .swiper-slide-active .slide-image.img1::after {background-position: right;}
  .swiper-slide-active .slide-image.img2::after {background-position-x: 55%;}
  .swiper-slide-active .slide-image.img3::after {background-position-x: 63%;}
  .swiper-slide-active .slide-image.img4::after {background-position: center;}
  .swiper-slide-active .slide-image.img5::after {background-position: left;}
  .swiper-slide-active .slide-image.img6::after {background-position: center;}

  .slideshow-pagination-item.active .pagination-separator {display: none;}
  .slideshow-pagination-item.active .pagination-number {font-size: 0; width: 16px; height: 15px; 
  background: url(/resources/images/webfront/icon/circle.png) no-repeat;}
  .slideshow-pagination-item .pagination-number {font-size: 0; width: 13px; height: 13px; border-radius: 50%; background: rgba(255,255,255,.3); padding: 0; margin: 0 9px;}
  .slideshow-pagination-item .pagination-number {opacity: 1;}

  /*section4*/
  .section4 .hidden-wrap {width: 100%; padding: 0 30px;}

  /*section5*/
  .bottom-info-wrap .info1, .bottom-info-wrap .info2 {padding: 0 20px;}
  .bottom-info-wrap .go-btn {right: 20px;}
  .hidden-select-wrap {display: -webkit-box;display: -ms-flexbox;display: flex;}
}

@media screen and (max-width:744px) {
  /*section2*/
  .section2 .txtbox .hidden-tit {font-size: 1.6rem;}

  /*section3*/
  .section3 .txtbox .tit {line-height: 1.4; white-space: normal; font-size: 1.8rem;}
  .section3 .badge-warp {display: none;}
  .slide-image.img1 {background-position: 50% 0;}
  .slide-image.img2 {background-position-x: 61%;}
  .slide-image.img3 {background-position: 65%;}
  .slide-image.img4 {background-position: 52%;}
  .slide-image.img5 {background-position: left;}
  .slide-image.img6 {background-position: 38%;}

  /*section4*/
  .section4 .hidden-wrap p {font-size: 1rem;} 
  .section4 .hidden-wrap .date {font-size: 1rem;}
  .section4 .hidden-wrap .news-wrap ul li {padding: 0 15px;}

  /*section5*/
  .bottom-info-wrap .info1, .bottom-info-wrap .info2 {height: 165px;}
  .bottom-info-wrap h1 {font-size: 1.5rem;}
  .bottom-info-wrap p {font-size: 1rem; padding-top: 17px;}

  /*footer*/
  footer ul li {width: 100% !important; text-align: center !important; margin: 5px 0;}
  footer strong, footer span {font-size: 1rem;}
}

@media screen and (max-width:580px) {
  /*section1*/
  .section1 .txtbox .hidden-tit {font-size: 2.2rem;}
  .section1 .txtbox .hidden-tit strong {font-size: 2.6rem;}

  /*section3*/
  .section3 .txtbox .tit + .sub {width: 95%;}
  .slide-image.img1 {background-position: 50% 0;}
  .slide-image.img2 {background-position-x: 61%;}
  .slide-image.img3 {background-position: 65%;}
  .slide-image.img4 {background-position: 52%;}
  .slide-image.img5 {background-position: left;}
  .slide-image.img6 {background-position: 38%;}

  /*section5*/
  .bottom-info-wrap .info-txt {width: 373px;}
  .bottom-info-wrap .go-btn {pointer-events: none !important;}
}

/* mobile */
@media screen and (max-width: 500px) {
  /*common*/
  .txtbox {width: 100%; padding: 0 20px;}
  .txtbox .sub {padding-top: 3vh;}
  .badge-warp em, .badge-warp [class*="detail-btn"] {font-size: 3.1vw;}

  /*header*/
  .headerWrap {height: 78px; padding: 0 20px;} 
  header.fixed .headerWrap {height: 78px;}
  .headerWrap .logo, header.fixed .logo {background-size: 70%;}
  header::after {height: 78px;}

  /*section1*/
  #fullpage .section1 {background-position: bottom;}
  .section1 .txtbox .hidden-tit {font-size: 7vw;}
  .section1 .txtbox .hidden-tit strong {font-size: 9vw;}
  .section1 .txtbox .hidden-sub-tit {font-size: 3.1vw;}

  /*section2*/
  #fullpage .section2 {background-position: bottom;}
  .section2 .hidden-box-wrap .box {padding: 0 20px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 8.5vh;}
  .section2 .hidden-box-wrap .box span {font-size: 3.1vw;}
  .section2 .hidden-box-wrap .box .date {margin-top: 4px; text-align: left;} /*modify*/
  
  /*section3*/
  .section3 .txtbox .tit {font-size: 5.5vw;}
  .section3 .txtbox .sub-tit {font-size: 3.1vw;}

  /*section4*/
  #fullpage .section4 {background-position: 35%;}
  .section4 .hidden-wrap { padding: 0 20px;}
  .section4 .hidden-wrap .tit {font-size: 7vw;}
  .section4 .hidden-wrap p {font-size: 3.1vw;}
  .section4 .hidden-wrap .date {font-size: 3.1vw;} 
  .section4 .hidden-wrap .news-wrap ul li {height: 80px; line-height: 80px;}
  .section4 .hidden-wrap .btn-wrap {width: 114px; height: 48px; line-height: 48px; margin: 40px auto 0;}
  .section4 .hidden-wrap .btn-wrap .more-btn {padding: 0 18px;}
  .section4 .hidden-wrap .btn-wrap span {font-size: 3.1vw;}
  .section4 .hidden-wrap .btn-wrap i {font-size: 3.1vw;}
  .section4 .pc_txtbox .more-btn:hover .hidden, .bottom-info-wrap .go-btn:hover .hidden {font-size: 0.875rem; max-width: 1.8rem;}
  .bottom-info-wrap p {width: 330px; white-space: normal; word-break: break-all;}
}

@media screen and (max-width:415px) {
  /*section5*/
  .bottom-info-wrap p {width: 245px;}
}