@charset"utf-8";

/* Font */
@import url(./font.css);

/* Guide
----------------------------------------------------------------------------------------------------------------------------------------------------------

▶사이즈
pc : 1280px
tablet : 980px ~
mobile : 767px ~ 320px

▶미디어쿼리는 (주석으로 구분 되어있는)파트마다 각각 작성함.
*/
/* Reset
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button{margin:0;padding:0;font-size:100%;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block;}
html{box-sizing:border-box;}
*, *:before, *:after{box-sizing:inherit;}
body,th,td,input,select,textarea,button, dt, dd {font-family: 'Noto Sans KR', sans-serif; font-size: 16px; letter-spacing: -0.03em; line-height: 1.6; font-weight: 400; color: #000; word-break: auto-phrase;}
dl,ul,ol,menu,li {list-style:none;}
*, *:before, *:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
:focus{outline:0 !important;}
iframe{border:none; width:100%;}
a{color:inherit;text-decoration:none;-webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out;transition:all .2s ease-in-out;}
a:hover, a:focus ,a:active{text-decoration:none;color:#000;}
img{max-width:100%;}
textarea{max-width:100%;resize:none;}

.hidden{font-size:0;line-height:0;text-indent:-9999em;overflow:hidden;}
::selection{background:#333;color:#fff;text-shadow:none;}
::-moz-selection{background:#333;color:#fff;text-shadow:none;}
::-webkit-selection{background:#333;color:#fff;text-shadow:none;}

@media screen and (max-width:1280px){
	body,th,td,input,select,textarea,button, dt, dd {font-size: 15px;}
}

@media screen and (max-width:980px){
	body,th,td,input,select,textarea,button, dt, dd {font-size:11pt;}
}

@media screen and (max-width:767px){
	body,th,td,input,select,textarea,button, dt, dd {font-size:10.5pt;}
}

@media screen and (max-width:480px){
	html, body{min-width:320px;}
	body,th,td,input,select,textarea,button, dt, dd {font-size:10pt;}
} 

@media only screen and (min-width:320px){
	body{overflow-x:hidden;}
}

/* Parallax
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
.parallax{background-position:0 0;background-repeat:no-repeat;background-size:100% auto;width:100%;background-size:cover;background-attachment:fixed}

/* Preloader
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
.animationload{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#fff;z-index:999999}
.loader{width:200px;height:200px;font-size:24px;text-align:center;position:absolute;left:50%;top:50%;background-image:url("/images/basic_resp/img/preloader.gif");background-repeat:no-repeat;background-position:center;margin:-100px 0 0 -100px}

/* Back to top (탑 버튼)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
.btn-top {width: 50px;height: 50px; position: fixed; background: #000; border: none; bottom: 40px; right: 20px; display:none; z-index: 10000;}
.btn-top:after {content: ''; display: block; width: 16px; height: 16px; border-top: solid 2px #fff; border-right: solid 2px #fff; position: absolute; left: 50%; top: 50%; margin-left: -8px; margin-top: -5px; transform:rotate(-45deg); -webkit-transform:rotate(-45deg);}

@media only screen and (max-width: 767px){
	.btn-top {width: 40px; height: 40px; bottom: 20px;}
}



/* Layoyt (레이아웃)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
#wrapper{width: 100%; overflow: hidden;}
#wrapper.sub {padding-top: 120px;}
#header {z-index: 1000; background: rgba(0,0,0,0.7); width: 100%; position: fixed; left: 0; right: 0; top: 0; z-index:999; -webkit-transition: all .3s ease-out; transition: all .3s ease-out;}
#header > .header_in {width: 100%; max-width: 1640px; height: 120px; padding-left: 20px; padding-right: 20px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;}
 #L_SITE_LOGO h1 a {display: block; width: 210px; height: 90px; text-indent: -9999px; background: url('/images/kor09r-22-0461/common/gnb_logo.png')no-repeat center center / 100% auto;}
.inner {width: 100%; max-width: 1240px; padding-left: 20px; padding-right: 20px; margin-left: auto; margin-right: auto;}

@media only screen and (max-width: 1280px){
	#wrapper.sub {padding-top: 90px;}
	#header > .header_in {height: 90px;}
	#L_SITE_LOGO h1 a {width: 150px; height: 64px;}
}

@media only screen and (max-width: 980px){
	#wrapper.sub {padding-top: 60px;}
	#L_SITE_LOGO {margin-left: -10px;}
	#L_SITE_LOGO h1 a {width: 117px; height: 50px;}
	#header > .header_in {height: 60px;}
}

@media only screen and (max-width: 767px){
}

@media only screen and (min-width:981px) {
    .nav-btn{display:none;}
    .navigation {display: flex;}
	.navigation > li {position: relative; height: 120px; margin: 0 15px; display: flex; align-items: center;}
    .navigation > li > a {display: block; font-size: 20px; padding: 0 30px; color: #fff;}
	.navigation > li:after {content: ''; display: block; height: 2px; background: #fff; position: absolute; left: 50%; right: 50%; bottom: 0; transition: all .3s ease-out;}
    .navigation > li:hover:after {left: 0; right: 0;}
}

@media (min-width: 981px) and (max-width: 1280px) {
	.navigation > li {height: 90px;}
	.navigation > li > a {padding:0 20px; font-size: 18px;}
}

@media only screen and (max-width:980px) {
	#header {position: fixed; top: 0; left: 0; right: 0; z-index: 100;}
	#header #header_in{display: block;}
	.nav-btn{width:40px;height:30px;z-index:999;display:block;position:relative;cursor:pointer; padding: 4px; margin-right: -8px;}
	.nav-btn span{display: block; height: 2px; background: #fff; margin-bottom: 8px; transition:.2s all linear;}
	.nav-btn span:nth-child(1){}
	.nav-btn span:nth-child(2){}
	.nav-btn span:nth-child(3){t}
	.nav-btn.nav-close{}
	.nav-btn.nav-close span:nth-child(1){transform:rotate(45deg); margin-top: 10px;}
	.nav-btn.nav-close span:nth-child(2){opacity: 0;}
	.nav-btn.nav-close span:nth-child(3){transform:rotate(-45deg); margin-top: -19px;}
	.nav-bg{display: none;}
	#nav {z-index: 888; position: fixed; top: 60px; right: 0; height: 0; overflow: hidden; display: block; width: 160px; background: #fff;}
	#nav.nav-open {height: auto;}
	#nav ul.navigation{display: block;}
	.navigation > li{border-top:1px solid #e1e1e1;}
	.navigation > li > a {font-size: 14px; padding:15px; display: block; position: relative;}
}




/* Footer (하단메시지)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
footer {background: #141416; padding: 60px 0;}
.ft-inner {width: 100%; max-width: 1640px; padding-left: 20px; padding-right: 20px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;}
.ft-info {color: rgba(255,255,255,0.4);}
.ft-info li {font-size: 14px; display: flex; margin-bottom: 2px;}
.ft-info li:last-child {margin-bottom: 0;}
.ft-info li strong {font-weight: 300; width: 90px;}
.ft-info li span {font-weight: 300;}
.ft-menu dt ul {display: flex; justify-content: flex-end;}
.ft-menu dt ul li {display: flex; align-items: center;}
.ft-menu dt ul li:after {content: ''; display: block; width: 1px; height: 9px; margin: 0 15px; background: rgba(255,255,255,0.1);}
.ft-menu dt ul li:last-child:after {display: none;}
.ft-menu dt ul li a {display: block; color: #fff; font-size: 14px;}
.ft-menu dd {color: rgba(255,255,255,0.5); font-size: 14px; font-weight: 300; margin-top: 10px;}

@media screen and (max-width:768px){
	footer {padding: 30px 0;}
	.ft-inner {display: block;}
	.ft-info li {font-size: 12px;}
	.ft-info li strong {width: 60px;}
	.ft-menu {margin-top: 20px;}
	.ft-menu dt ul {justify-content: flex-start;}
	.ft-menu dt ul li:after {margin: 0 10px;}
	.ft-menu dt ul li a {font-size: 12px;}
	.ft-menu dd {font-size: 12px;}
}



/* Main Contents (메인 컨텐츠)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
#fp-nav {width: 100%; max-width: 1640px; margin: 0 auto; right: auto !important; left: 50%; margin-top: -0px !important; -webkit-transform: translateX(-50%) !important; transform: translateX(-50%) !important;}
#fp-nav ul {position: absolute; right: 20px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
#fp-nav ul li {width: 10px !important; height: 10px !important; margin: 0 !important; padding: 20px 0;}
#fp-nav ul li:before {content: ''; display: block; background: #afb5c5; width: 1px; position: absolute; left: 50%; top: 0; bottom: 0;}
#fp-nav ul li:first-child:before {top: 20px;}
#fp-nav ul li:last-child:before {bottom: 20px;}
#fp-nav ul li a span {width: 9px !important; height: 9px !important; margin: -4px 0 0 -4px !important; background: #afb5c5 !important; border-radius: 0 !important; transform: rotate(45deg);}
#fp-nav ul li a.active span {background: #5d6484 !important;}
#fp-nav ul li .fp-tooltip {top: 8px !important; color: #5d6484 !important;}
#fp-nav.wh ul li a span {background: #fff !important;}
#fp-nav.wh ul li a.active span {background: none !important;}

.fp-tableCell {}

.scroll-down {font-size: 14px; letter-spacing: 0.125rem; position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; color: #fff; z-index: 2000; opacity: 0.9;}
.scroll-down:before {margin-bottom: 10px; filter: invert(1); content: ''; display: block; width: 50px; height: 50px; animation: arrowDown 1.2s infinite; background: url('/images/kor09r-22-0461/main/scroll.png')no-repeat center center / cover;}
.scroll-down.bk {color: #000;}
.scroll-down.bk:before {filter: invert(0);}
.scroll-down.none {display: none;}

@keyframes arrowDown {
  0% {
    transform: translate(0, 0);
    opacity: 0.6;
  }
  50% {
    transform: translate(0, 6px);
    opacity: 1;
  }
  100% {
    transform: translate(0, 0);
    opacity: 0.6;
  }
}

@media only screen and (max-width:980px) {
	.scroll-down {display: none;}
	#fp-nav {display: none;}
}

@media only screen and (max-width:768px) {
	.fp-tableCell {padding-top: 60px;}
}


/* animation */
@keyframes bounceAni {
	0% {animation-timing-function: ease-in; opacity: 1; transform: translateY(-160px);}
	24% {opacity: 1;}
	40% {animation-timing-function: ease-in; transform: translateY(-24px);}
	65% {animation-timing-function: ease-in; transform: translateY(-12px);}
	82% {animation-timing-function: ease-in; transform: translateY(-6px);}
	93% {animation-timing-function: ease-in; transform: translateY(-4px);}
	25%,
	55%,
	75%,
	87% {animation-timing-function: ease-out; transform: translateY(0px);}
	100% {animation-timing-function: ease-out; opacity: 1; transform: translateY(0px);}
}

@keyframes duckFloat {
	0% {
		transform: translateY(0) rotate(0deg);
	}
	25% {
		transform: translateY(-6px) rotate(-1deg);
	}
	50% {
		transform: translateY(-2px) rotate(1deg);
	}
	75% {
		transform: translateY(-8px) rotate(-1.5deg);
	}
	100% {
		transform: translateY(0) rotate(0deg);
	}
}


@keyframes fadeInUp {
	0% {opacity: 0; transform: translateY(40px);}
	100% {opacity: 1; transform: translateY(0);}
}

@keyframes fadeInLeft {
	0% {opacity: 0; transform: translateX(-40px);}
	100% {opacity: 1; transform: translateX(0);}
}

@keyframes fadeInRight {
	0% {opacity: 0; transform: translateX(40px);}
	100% {opacity: 1; transform: translateX(0);}
}



#section1:before {content: ''; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: url('/images/kor09r-22-0461/main/section1_bg2.webp')no-repeat center center / cover; transition: all 1s ease-out 2s;}
.section1-title {text-align: center; position: relative; z-index: 1;}
.section1-title h3 {font-family: 'Escoredream', sans-serif; font-size: 45px;}
.section1-title h2 {font-family: 'Tmon', sans-serif; font-size: 70px; margin-top: 20px; letter-spacing: 1rem;}
.section1-title h4 {font-family: 'Nanum Brush Script', sans-serif; font-size: 70px; font-weight: 700;}
.section1-foot {position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%);}
.section1-foot img {display: block; margin: 0 auto; animation: duckFloat 2.5s ease-in-out infinite;}
.section1-foot p {text-align: center; color: rgba(0,0,0,0.6); white-space: nowrap;}
.section1-title h4 span {display: inline-block; opacity: 0; transform: translateY(20px);}
.section1-title h4 span:nth-child(10) {color: #ff2682;}
.section1-title h4 span:nth-child(11) {color: #fe8814;}
.section1-title h4 span:nth-child(12) {color: #05d8eb;}

/* 통통 튀며 나타나는 핵심 로직 */
@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.5);
  }
  60% {
    opacity: 1;
    transform: translateY(-10px) scale(1.1);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

#section1.active:before {filter: blur(5px);}
#section1.active .section1-title h4 span {animation: bounce-in 0.5s cubic-bezier(0.36, 0, 0.66, -0.56) forwards;}
#section1.active .section1-title h4 span:nth-child(1) { animation-delay: 0.1s; }
#section1.active .section1-title h4 span:nth-child(2) { animation-delay: 0.2s; }
#section1.active .section1-title h4 span:nth-child(3) { animation-delay: 0.3s; }
#section1.active .section1-title h4 span:nth-child(4) { animation-delay: 0.4s; }
#section1.active .section1-title h4 span:nth-child(5) { animation-delay: 0.5s; }
#section1.active .section1-title h4 span:nth-child(6) { animation-delay: 0.6s; }
#section1.active .section1-title h4 span:nth-child(7) { animation-delay: 0.7s; }
#section1.active .section1-title h4 span:nth-child(8) { animation-delay: 0.8s; }
#section1.active .section1-title h4 span:nth-child(9) { animation-delay: 0.9s; }
#section1.active .section1-title h4 span:nth-child(10) { animation-delay: 1.0s; }
#section1.active .section1-title h4 span:nth-child(11) { animation-delay: 1.1s; }
#section1.active .section1-title h4 span:nth-child(12) { animation-delay: 1.2s; }
#section1.active .section1-title h4 span:nth-child(13) { animation-delay: 1.3s; }
#section1.active .section1-title h4 span:nth-child(14) { animation-delay: 1.4s; }
#section1.active .section1-title h4 span:nth-child(15) { animation-delay: 1.5s; }
#section1.active .section1-title h4 span:nth-child(16) { animation-delay: 1.6s; }
#section1.active .section1-title h4 span:nth-child(17) { animation-delay: 1.7s; }
#section1.active .section1-title h4 span:nth-child(18) { animation-delay: 1.8s; }
#section1.active .section1-title h4 span:nth-child(19) { animation-delay: 1.9s; }

@media only screen and (max-width:1280px) {
	.section1-title h3 {font-size: 40px;}
	.section1-title h2 {font-size: 60px;}
	.section1-title h4 {font-size: 56px;}
	.section1-foot img {width: 120px;}
	.section1-foot p {font-size: 14px;}
}

@media only screen and (max-width:980px) {
	.section1-title h3 {font-size: 34px;}
	.section1-title h2 {font-size: 50px;}
	.section1-title h4 {font-size: 40px;}
	.section1-foot img {width: 100px;}
	.section1-foot p {font-size: 13px;}
}

@media only screen and (max-width:768px) {
	.section1-title h3 {font-size: 20px;}
	.section1-title h2 {font-size: 34px; margin-top: 10px;}
	.section1-title h4 {font-size: 28px;}
	.section1-foot img {width: 70px;}
	.section1-foot p {font-size: 11px;}
}

@media only screen and (max-width:320px) {
	.section1-title h4 {font-size: 24px;}
}

#section2 {overflow: hidden;}
#section2:before {content: ''; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: url('/images/kor09r-22-0461/main/section2_bg.webp')no-repeat center center / cover; transition: all 1s ease-out 2s;}
.section2-text {padding-right: 50%; opacity: 0; position: relative; z-index: 1; transition: all 1s ease-out 0.7s;}
.section2-text h3 {font-size: 40px; font-weight: 300; line-height: 1.4;}
.section2-text h3 strong {font-weight: 700;}
.section2-text h4 {font-family: 'Nanum Brush Script', sans-serif; font-size: 60px; font-weight: 700;}
.section2-text ul {margin-top: 40px;}
.section2-text ul li {font-size: 18px; margin-bottom: 50px;}
.section2-text ul li:last-child {margin-bottom: 0;}
.section2-text ul li strong {font-size: 22px;}
.section2-text ul li h5 {font-family: 'DaraeHandwriting', sans-serif; font-size: 35px;}
.section2-img {position: absolute; left: 50%; top: 50%; opacity: 0; transform: translate(40px, -30%); transition: opacity 1s ease 1.5s, transform 1s ease 1.5s;}
.section2-img img {max-width: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,.3));}

#section2.active .section2-text {opacity: 1;}
#section2.active .section2-img {opacity: 1; transform: translate(0, -30%);}
#section2.active:before {filter: blur(5px);}


@media only screen and (max-width:1280px) {
	.section2-text h3 {font-size: 34px;}
	.section2-text h4 {font-size: 50px;}
	.section2-text ul {margin-top: 30px;}
	.section2-text ul li {font-size: 16px; margin-bottom: 30px;}
	.section2-text ul li br {display: none;}
	.section2-text ul li strong {display: block; font-size: 20px;}
	.section2-text ul li h5 {font-size: 30px;}
	.section2-img {left: auto; right: -480px;}
	.section2-img img {width: 100%;}
}

@media only screen and (max-width:980px) {
	.section2-text {padding-right: 40%;}
	.section2-text h3 {font-size: 28px;}
	.section2-text h4 {font-size: 40px;}
	.section2-text ul li {margin-bottom: 20px;}
	.section2-text ul li h5 {font-size: 26px;}
	.section2-img {left: 30%; right: auto; width: 120%;}
}

@media only screen and (max-width:768px) {
	.section2-text {padding-right: 30%;}
	.section2-text h3 {font-size: 18px;}
	.section2-text h3 br {display: none;}
	.section2-text h4 {font-size: 26px;}
	.section2-text ul {margin-top: 20px;}
	.section2-text ul li {margin-bottom: 15px; font-size: 14px;}
	.section2-text ul li strong {font-size: 16px;}
	.section2-text h3 span,
	.section2-text ul li span {/* box-shadow: inset -5px -30px 0 rgba(255,255,255,0.6); line-height: 1.6; */}
	.section2-text ul li h5 {font-size: 20px;}
	.section2-img {width: 680px; left: 50%; margin-left: -180px;}
}






#section3:before {content: ''; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: url('/images/kor09r-22-0461/main/section3_bg.webp')no-repeat center center / cover; transition: all 1s ease-out 2s;}
#section3 .fp-slidesContainer {transition: none !important; display: block !important; position: relative;}
#section3 .slide {position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease; z-index: 0;}
#section3 .slide.active {opacity: 1; z-index: 1;}
#section3 .fp-controlArrow {display: none;}
#section3 .fp-tableCell {vertical-align: bottom;}

.section3-cont {height: 50%; padding-top: 40px; display: flex; align-items: flex-start;}
.section3-txt {text-align: center; position: relative; z-index: 10; opacity: 0; transition: opacity 1s ease 1.0s;}
.section3-txt p {font-size: 20px;}
.section3-txt p.mt20 {margin-top: 20px;}
.section3-txt p br {display: none;}
.section3-txt h5 {font-size: 50px; font-weight: 600; margin-top: 20px; font-family: 'Nanum Brush Script', sans-serif;}
.section3-txt h5 em {font-style: normal;}
.section3-txt h5 em:nth-child(1) {color: #ff2682;}
.section3-txt h5 em:nth-child(2) {color: #fe8814;}
.section3-txt h5 em:nth-child(3) {color: #05d8eb;}

.section3-symbol {position: absolute; left: 0; right: 0; bottom: 50%; z-index: 10; opacity: 0; transition: opacity 1s ease 0.7s;}
.section3-symbol img {display: block; margin: 0 auto;}
.section3-img2 {position: absolute; left: 50%; margin-left: 80px; top: 50%; opacity: 0; transform: translate(40px, -25%); transition: opacity 1s ease 1.5s, transform 1s ease 1.5s;}
.section3-img2 img {max-width: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,.3));}

#section3.active:before {filter: blur(5px);}
#section3.active .section3-symbol {opacity: 1;}
#section3.active .section3-txt {opacity: 1;}
#section3.active .section3-img2 {transform: translate(0, -25%); opacity: 1;}


@media only screen and (max-width:1280px) {
	.section3-txt p {font-size: 18px;}
	.section3-txt h5 {font-size: 40px;}
	.section3-img1 {margin-right: 100px;}
	.section3-img2 {margin-left: -120px;}
}

@media only screen and (max-width:980px) {
	#section3 .fp-controlArrow {display: block; z-index: 20; width: 30px; height: 60px; border: none; filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.5)); background: url('/images/kor09r-22-0461/main/section3_arrow.png')no-repeat left center / auto 100%;}
	#section3 .fp-controlArrow.fp-prev {background-position: left center;}
	#section3 .fp-controlArrow.fp-next {background-position: right center;}
	.section3-txt p {font-size: 16px;}
	.section3-txt h5 {font-size: 30px;}
	.section3-txt span {/* box-shadow: inset -5px -30px 0 rgba(255,255,255,0.6); line-height: 1.6; */}
	.section3-symbol img {width: 400px;}
	.section3-img1 {margin-right: -40px;}
	.section3-img2 {margin-left: -240px;}
}

@media only screen and (max-width:768px) {
	#section3 .fp-controlArrow {width: 20px; height: 40px;}
	.section3-cont {padding-bottom: 0; padding-top: 0;}
	.section3-symbol img {width: 50%;}
	.section3-txt.tar {text-align: right;}
	.section3-txt.tal {text-align: left;}
	.section3-txt p {font-size: 14px;}
	.section3-txt p br {display: block;}
	.section3-txt p.mt20 {margin-top: 10px;}
	.section3-txt h5 {margin-top: 10px;}
	.section3-symbol img {width: 240px; margin: 0;}
	.section3-img1 {width: 220px; margin-right: -40px;}
	.section3-img1 img {width: 200%;}
	.section3-img2 {width: 380px; margin-left: -200px;}
	.section3-img2 img {width: 150%;}
}





#section4:before {content: ''; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: url('/images/kor09r-22-0461/main/section4_bg.webp')no-repeat center center / cover; transition: all 1s ease-out 2s;}
#section4 .inner {position: relative; z-index: 1;}
.section4-top {text-align: center; opacity: 0; transform: translateY(40px); transition: opacity 1s ease 1s, transform 1s ease 1s;}
.section4-top h3 {font-size: 50px; font-weight: 800;}
.section4-top p {font-size: 18px; margin-top: 60px;}
.section4-box {width: 100%; max-width: 520px; margin: 80px auto 0; padding: 40px; text-align: center; background: rgba(56,64,100,0.9); border: solid 2px #343c64; border-radius: 20px; opacity: 0; transform: translateY(40px); transition: opacity 1s ease 1.2s, transform 1s ease 1.2s;}
.section4-box h5 {font-size: 24px; color: #fff; font-weight: 700;}
.section4-box ul {margin-top: 30px;}
.section4-box ul li {color: #fff;}
.section4-box a {color: #51ccfd; margin-top: 20px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;}
.section4-box a:after {content: ''; display: block; width: 40px; height: 40px; margin-left: 10px; background: url('/images/kor09r-22-0461/main/section4_arrow.png')no-repeat center center / cover;}
.section4-email {text-align: center; margin-top: 15px; font-size: 18px; opacity: 0; transform: translateY(40px); transition: opacity 1s ease 1.4s, transform 1s ease 1.4s;}
.section4-email span {letter-spacing: 0.1rem;}
.section4-img {position: absolute; left: 50%; margin-left: 340px; top: 50%; width: 40%; opacity: 0; transform: translate(40px, -25%); transition: opacity 1s ease 1.5s, transform 1s ease 1.5s;}
.section4-img img {max-width: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,.3));}

#section4.active .section4-top {opacity: 1; transform: translateY(0);}
#section4.active .section4-box {opacity: 1; transform: translateY(0);}
#section4.active .section4-email {opacity: 1; transform: translateY(0);}
#section4.active .section4-img {opacity: 1; transform: translate(0, -25%);}
#section4.active:before {filter: blur(5px);}

@media only screen and (max-width:1280px) {
	.section4-top h3 {font-size: 40px;}
	.section4-top p {margin-top: 40px;}
	.section4-box {margin: 40px auto 0; padding: 30px; max-width: 480px;}
	.section4-img {margin-left: 200px;}
}

@media only screen and (max-width:980px) {
	.section4-top h3 {font-size: 32px;}
	.section4-top p {margin-top: 30px; font-size: 16px;}
	.section4-box {margin: 30px auto 0; padding: 30px; max-width: 400px;}
	.section4-box h5 {font-size: 20px;}
	.section4-box ul {margin-top: 20px;}
	.section4-box a:after {width: 30px; height: 30px;}
	.section4-email {margin-top: 10px; font-size: 16px;}
	.section4-img {margin-left: 120px;}
}

@media only screen and (max-width:768px) {
	.section4-top {text-align: left;}
	.section4-top h3 {font-size: 26px;}
	.section4-top p {margin-top: 20px; font-size: 14px;}
	.section4-box {margin: 20px 0 0; padding: 20px; max-width: none; border-radius: 10px;  text-align: left; width: 60%;}
	.section4-box h5 {font-size: 18px;}
	.section4-box ul {margin-top: 10px;}
	.section4-box ul li {font-size: 14px;}
	.section4-box a:after {width: 20px; height: 20px;}
	.section4-email {font-size: 14px; text-align: left;}
	.section4-img {margin-left: 0; width: 150px;}
	.section4-img img {width: 240%;}
}





#section5:before {content: ''; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: url('/images/kor09r-22-0461/main/section5_bg.webp')no-repeat center center / cover; transition: all 1s ease-out 2s;}
.section5-map {display: flex; gap: 30px; padding-right: 30%; position: relative; z-index: 1; opacity: 0; transform: translateY(40px); transition: opacity 1s ease 1s, transform 1s ease 1s;}
.section5-map dl {flex: 1;}
.section5-map dl dt h5 {font-size: 20px; font-weight: 600;}
.section5-map dl dt p {font-size: 18px; margin-top: 8px;}
.section5-map dl dd {height: 260px; margin-top: 30px;}
.section5-map dl dd iframe {display: block; width: 100% !important; height: 100% !important;}
.section5-tab {display: none;}
.section5-txt {margin-top: 50px; position: relative; z-index: 1; opacity: 0; transform: translateY(40px); transition: opacity 1s ease 1.2s, transform 1s ease 1.2s;}
.section5-txt dt {font-size: 40px; font-weight: 700;}
.section5-txt dt br {display: none;}
.section5-txt dd {margin-top: 30px;}
.section5-txt dd h5 {font-size: 20px; font-weight: 600; margin-bottom: 10px;}
.section5-txt dd p {font-size: 18px; letter-spacing: 0.1rem;}
.section5-txt dd p strong {font-weight: 600;}
.section5-img {position: absolute; left: 50%; top: 50%; margin-left: -120px; opacity: 0; transform: translate(40px, -25%); transition: opacity 1s ease 1.2s, transform 1s ease 1.2s;}
.section5-img img {max-width: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,.3));}
.section5-footer {position: absolute; bottom: 30px; left: 50%; width: 400px; margin-left: -200px; text-align: center; opacity: 0; transform: translateY(40px); transition: opacity 1s ease 1.4s, transform 1s ease 1.4s;}
.section5-footer dt img {display: block; width: 60px; margin: 0 auto;}
.section5-footer dd {font-size: 13px; margin-top: 5px; color: rgba(0,0,0,0.6);}

#section5.active .section5-map {opacity: 1; transform: translateY(0);}
#section5.active .section5-txt {opacity: 1; transform: translateY(0);}
#section5.active .section5-img {opacity: 1; transform: translate(0, -25%);}
#section5.active .section5-footer {opacity: 1; transform: translateY(0);}
#section5.active:before {filter: blur(5px);}

@media only screen and (max-width:1280px) {
	.section5-map {gap: 20px;}
	.section5-map dl dt h5 {font-size: 18px;}
	.section5-map dl dt p {font-size: 16px;}
	.section5-map dl dd {height: 240px; margin-top: 20px;}
	.section5-txt {margin-top: 30px;}
	.section5-txt dt {font-size: 34px;}
	.section5-txt dd {margin-top: 20px;}
	.section5-txt dd h5 {font-size: 18px;}
	.section5-txt dd p {font-size: 16px;}
	.section5-img {margin-left: -300px;}
}

@media only screen and (min-width:981px) {
	.section5-map dl {display: block !important;}
}

@media only screen and (max-width:980px) {
	.section5-map {display: block; padding-right: 50%;}
	.section5-map dl dt h5 {display: none;}
	.section5-tab {display: flex; margin-bottom: 20px;}
	.section5-tab li {border: solid 1px #000; border-right: none;}
	.section5-tab li:last-child {border-right: solid 1px #000;}
	.section5-tab li button {height: 36px; width: 100px; background: none; border: none; display: flex; align-items: center; justify-content: center;}
	.section5-tab li button.active {background: #000; color: #fff;}
	.section5-txt dt {font-size: 24px;}
	.section5-img {margin-left: -460px;}
}

@media only screen and (max-width:768px) {
	.section5-map {padding-right: 0;}
	.section5-map dl dt h5 {font-size: 16px;}
	.section5-map dl dt p {font-size: 14px;}
	.section5-map dl dd {height: 200px; margin-top: 10px; max-width: 360px;}
	.section5-tab {margin-bottom: 10px;}
	.section5-txt {margin-top: 10px;}
	.section5-txt dt {font-size: 18px;}
	.section5-txt dt br {display: block;}
	.section5-txt dd h5 {font-size: 14px;}
	.section5-txt dd p {font-size: 13px;}
	.section5-img {top: 45%; margin-left: -280px; width: 440px;}
	.section5-img img {width: 180%;}
	.section5-footer {display: none;}


	.section5-txt dd p span {/* box-shadow: inset -5px -30px 0 rgba(255,255,255,0.6); line-height: 1.6; */}

}