@charset "utf-8";
#skipnav { position:absolute; top:0; left:0; width:100%; z-index:10000; }
#skipnav a {display:block; position:absolute; top:0; left:0; height:0px; font-size:0px; line-height:0px; text-align:center; }
#skipnav a:hover,
#skipnav a:active,
#skipnav a:focus { position:relative; margin:20px auto; width:90%; height:80px; line-height:80px; background:#261d18; text-align:center; color:#ffd84e; border:2px solid #ffd84e; font-weight:bold; font-size:20px; }

/*.wrap {display:block !important; position:relative !important; width:1360px !important; max-width:90% !important; margin:0 auto !important;}*/
.conwrap { position: relative; overflow: hidden; width: 1500px !important; max-width: 90%; max-height: 80vh; margin: 0 auto; }
.container {position:relative !important; overflow:hidden !important; width:1920px !important; margin:0 auto !important;}
/*HEADER*/
#header {display:block; overflow:hidden; position:fixed; left:0; top:0; width:157px; height:100vh; background:linear-gradient(0deg,#48a5d6,#47bb8a); box-shadow:10px 0 10px rgba(0,0,0,.25); z-index:1000;}
#header .headerBg {display:block; overflow:hidden; }
#header .logo {display:block; position:absolute; top:57px; left:40px; z-index:990;}
#header .cscenter {display:block; position:absolute; bottom:0; left:0; padding:15% 0; margin:0 auto; text-align:center; width:100%; background:rgba(0,0,0,.13);}
#header .cscenter>p, #header .cscenter a {font-size:17px; color:#fff; text-shadow:0 0 1px rgba(0,0,0,.9);}
#header .cscenter a {font-size:22px; font-weight:800;}
.fixedmark {position:fixed; right:50px; bottom:50px; width:100px; height:auto; z-index:950; text-align:center; animation:leftarw 1.85s infinite;}
.fixedmark img {margin-top:10px; width:100px; height:139px; box-shadow:0 0 10px rgba(0,0,0,.85);}
.fixedmark span {color:#fff; opacity:1;}
/* Toggle button styles. */
.toggle-button { position: absolute; transition: .3s ease-in-out; width: 40px; height: 25px; display: block; top: 50%; left:57px; z-index: 999; }
.toggle-button span { position: absolute; height: 3px; border-radius:0; width: 100%; background-color: #fff; top: 0; transition: transform .3s ease-in-out, opacity .3s ease-in-out; }
.toggle-button span:nth-child(1) { top: 0px; }
.toggle-button span:nth-child(2),
.toggle-button span:nth-child(3) { top: 10px; }
.toggle-button span:nth-child(4) { top: 20px; }
.toggle-button.active span { background-color: #fff !important; }
.toggle-button.active span:nth-child(1),
.toggle-button.active span:nth-child(4) { opacity: 0; }
.toggle-button.active span:nth-child(2) { transform: rotate(45deg); }
.toggle-button.active span:nth-child(3) { transform: rotate(-45deg); }
.overlay {position:fixed; top:0; left:-100px; width:100%; height:100%; opacity:0; visibility:hidden; display:flex; justify-content:end; align-items:center; transition:.3s; z-index:994; box-shadow:20px 0 10px rgba(0,0,0,.12); background:rgba(0,0,0,.83)}
.overlay:hover {background:rgba(0,0,0,1)}
.overlay.bxcolor {background:#414073;}
.overlay nav { margin:0 auto; height:auto;}
.overlay nav>ul { list-style:none; margin:0 auto;}
.overlay nav>ul>li {margin:2.5rem 0; opacity:0; }
.overlay nav>ul>li>a {text-decoration:none; color:#fff; opacity:.75; transition:opacity .2s ease; font-size:2em; font-weight:600;}
.overlay nav>ul>li>a:hover {opacity:1; }
.overlay.visible {left:157px; height:100%; opacity:1; visibility:visible;}
.overlay.visible nav ul li {animation:fadeInLeft .3s ease forwards;}
.overlay.visible nav ul li:nth-child(1) {animation-delay:.23s;}
.overlay.visible nav ul li:nth-child(2) {animation-delay:.26s;}
.overlay.visible nav ul li:nth-child(3) {animation-delay:.29s;}
.overlay.visible nav ul li:nth-child(4) {animation-delay:.32s;}
.overlay.visible nav ul li:nth-child(5) {animation-delay:.35s;}
.overlay.visible nav ul li:nth-child(6) {animation-delay:.38s;}
.overlay.visible nav ul li:nth-child(7) {animation-delay:.41s;}
.overlay.visible nav>ul>li> ul { padding-bottom:20px;}
.overlay.visible nav>ul>li>ul li a {position:relative; font-size:18px; line-height:40px; padding-left:25px; color:#fff; opacity:.7; transition:.3s all;}
.overlay.visible nav>ul>li>ul li a:hover {opacity:1;}
.overlay.visible nav>ul>li>ul li a::before {position:absolute; left:0; top:16px; content:''; background:#fff; width:10px; height:2px;}
/*BUTTON*/
.btnpartners {position:absolute; right:50px; top:50px; z-index:900;}
.btnpartners a {display:block; background:rgba(255,255,255,.12); border-radius:30px; padding:10px 20px 10px 30px; color:#fff; box-shadow:7px 0 10px rgba(0,0,0,.11); font-weight:600; transition:.3s all;}
.btnpartners a:hover {background:linear-gradient(90deg, #6dbce3, #53dba5);}
.btnpartners a span {padding-right:55px; background:url('/img/inc/btn_more.png') no-repeat right center; transition:.3s all;}
.btnpartners a:hover span {background-position:95% center;}
.btnBox {display:inline-block; text-align: left; margin-top:40px;}
.btnBox a {color:#fff;}
.btnBox p { font-size: 2em; text-transform: uppercase; letter-spacing: 2px; padding: 20px 0; color:#fff;}
.btnBox button:hover { cursor: pointer }
.btnBox button { background: transparent; outline: none; position: relative; border:0; padding: 15px 70px 15px 30px; overflow: hidden; background:#503a90 url('/img/main/btnBg.png') no-repeat 90% center;}
.btnBox button:hover:before { opacity: 1; transform: translate(0,0);}
.btnBox button:before { content: attr(data-hover); position: absolute; top: 1.1em; left: -30px; width: 100%; text-transform: uppercase; letter-spacing: 3px; font-weight: 600; font-size: 1.1em; opacity: 0; transform: translate(-100%,0); transition: all .3s ease-in-out; color:#fff; }
.btnBox button:hover div { opacity: 0; transform: translate(100%,0);}
.btnBox button div { text-transform: uppercase; letter-spacing: 3px; font-weight: 600; font-size:1em; transition: all .3s ease-in-out; color:#fff;}
/*CONTAINER*/
#fixMain {display:table; table-layout:fixed; overflow:hidden; width:100%; height:100vh; min-height:100%; background:url('/img/main/conBg.jpg') no-repeat; background-size:cover; transition:background-position 1s ease;}
#fixMain>#container {position:relative; overflow:hidden; width:100%; height:100vh; margin:0 auto;}
#fixMain>#container .contents {width:100%; height:100vh; padding:70px 0 0; background-size:cover;}
#fixMain>#container>.swiper-container>.swiper-wrapper>.swiper-slide {display:block; position:relative; overflow-y:auto; overflow-x:hidden; height:100vh; width:100%;}
#fixMain>#container>.swiper-container>.swiper-pagination {position:absolute; left:70px; bottom:62px; width:auto;}
#fixMain>#container>.swiper-container.swiper-container-horizontal >.swiper-pagination-bullets .swiper-pagination-bullet {margin:0;}
#fixMain>#container>.swiper-container>.swiper-pagination .swiper-pagination-bullet {width:20px; height:1px; background:#fff; }
#fixMain>#container>.swiper-container>.swiper-pagination .swiper-pagination-bullet-active{position:absolute; top:10px; width:12px; height:12px; background:#fff;}
#fixMain>#container>.swiper-container .controlltxt{position:absolute; left:180px; bottom:54px; color:#fff; letter-spacing:0; z-index:999;}
#fixMain>#container>.swiper-container .controlltxt span{position:relative; padding-right:30px;}
#fixMain>#container>.swiper-container .controlltxt span i{overflow:hidden; position:absolute; top:0px; right:0; width:21px; height:13px; background:url('/img/inc/ic_scrollarrw.png') no-repeat; animation: scrolling 2s infinite;}
#fixMain.partnerBg{background:url('/img/main/partnerBg.jpg') no-repeat !important; background-size:cover; transition:background-position 1s ease;}
.contents{display:block; text-align:center;}
.contents .titBox p { font-size: 18px; }
.contents .titBox .subslogan { font-size: 23px; font-weight: 400; }
.contents .titBox .mainslogan { margin: 15px 0 60px; font-size: 55px; font-weight: 600; line-height: 120%; letter-spacing: -1px; }
.contents .slogantxt .tit { position: relative; margin-bottom: 5px; font-weight: 500; }
.partnerBg .contents .titBox .mainslogan {margin-top:5px; margin-bottom:30px;}
/*FOOTER*/
#footer {display:block; position:absolute; bottom:0; left:0; padding:55px 0;}
#footer #top a {display:block; position:absolute; right:0; bottom:0; color:#fff; padding-top:20px; font-weight:600; }
#footer p {color:#fff; font-size:15px; font-weight:200; letter-spacing:-.5px;}
#footer p span {padding-right:18px;}
#footer p span.tel {position:relative;}
#footer .copy {font-size:13px; opacity:.55; letter-spacing:0;}
#footer .groupBox { position: absolute; right: 10px; top: 0; }
#footer .groupBox .w3-button {width:242px; height:52px; text-align:left; vertical-align:middle; border-radius:7px; transition:.3s all;}
#footer .groupBox .w3-dropdown-content {height:100px; overflow-x:hidden; overflow-y:scroll; border-radius:7px;}
/*gallerythumbs*/
.gallery-top { height: 80%; width: 100%; }
.gallery-thumbs { height: 20%; box-sizing: border-box; padding: 10px 0; }
.gallery-thumbs .swiper-slide { width: 25%; height: 100%; opacity: 0.4; }
.gallery-thumbs .swiper-slide-thumb-active { opacity: 1; }
/*ANIMATION KEYFRAME*/
@keyframes fadeInLeft {
	0% { opacity: 0; transform: translateX(-25%); }
	100% { opacity: 1; transform: translateX(0); }
}
@keyframes leftarw {
	0% {transform: translateY(0); }
	30% {transform: translateY(15px); }
	100% {transform: translateY(0); }
}
@keyframes scrolling {
	0% { opacity: 0; transform: rotate(0) translateX(-10px); }
	50% { opacity: 1; transform: rotate(0) translateX(0); }
	100% { opacity: 0; transform: rotate(0) translateX(15px); }
}
/**
 * ----------------------------------------
 * animation fade-in-fwd
 * ----------------------------------------
 */

@keyframes fade-in-fwd {
	0% { opacity: 0; transform: translateZ(-80px); -webkit-transform: translateZ(-80px); -moz-transform: translateZ(-80px); -ms-transform:translateZ(-80px);}
	100% { opacity: 1; transform: translateZ(0); -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); }
}

/**
 * ----------------------------------------
 * animation fade-in-top
 * ----------------------------------------
 */
@keyframes fade-in-top {
	0% { opacity: 0; transform: translateY(-50px); -webkit-transform: translateY(-50px); -moz-transform:translateY(-50px); -ms-transform:translateY(-50px);}
	100% { opacity: 1; transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); }
}
/**
 * ----------------------------------------
 * animation fade-in-right
 * ----------------------------------------
 */
@keyframes fade-in-right {
	0% { opacity: 0; transform: translateX(50px); -webkit-transform: translateX(50px); -moz-transform: translateX(50px); -ms-transform: translateX(50px); }
	100% { opacity: 1; transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); }
}
/**
 * ----------------------------------------
 * animation fade-in-bottom
 * ----------------------------------------
 */

@keyframes fade-in-bottom {
	0% { opacity: 0; transform: translateY(50px); -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -ms-transform:translateY(50px); }
	100% { opacity: 1; transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); }
}
/**
 * ----------------------------------------
 * animation fade-in-left
 * ----------------------------------------
 */
@keyframes fade-in-left {
	0% { opacity: 0; transform: translateX(-50px); -webkit-transform: translateX(-50px); -moz-transform: translateY(0); -ms-transform: translateY(0); }
	100% { opacity: 1; transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateY(0); -ms-transform: translateY(0); }
}
/*animation-motionstyle*/
.swiper-slide-active .showme_fade {
	animation: fade-in-fwd 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	-webkit-animation: fade-in-fwd 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	-moz-animation: fade-in-fwd 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
.swiper-slide-active .showme_top {
	animation: fade-in-top 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	-webkit-animation: fade-in-top 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	-moz-animation: fade-in-top 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
.swiper-slide-active .showme_right {
	animation: fade-in-right 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	-webkit-animation: fade-in-right 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	-moz-animation: fade-in-right 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
.swiper-slide-active .showme_left {
	animation: fade-in-left 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	-webkit-animation: fade-in-left 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	-moz-animation: fade-in-left 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
.swiper-slide-active .showme_bottom {
	animation: fade-in-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	-webkit-animation: fade-in-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	-moz-animation: fade-in-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
.swiper-slide-active .delay003s {animation-delay: .3s !important; -webkit-animation-delay: .3s !important; -moz-animation-delay: .3s !important; }
.swiper-slide-active .delay007s { animation-delay: .7s !important; -webkit-animation-delay: .7s !important; -moz-animation-delay: .7s !important; }
.swiper-slide-active .delay01s { animation-delay: 1s !important; -webkit-animation-delay: 1s !important; -moz-animation-delay: 1s !important; }
.swiper-slide-active .delay013s { animation-delay: 1.3s !important; -webkit-animation-delay: 1.3s !important; -moz-animation-delay: 1.3s !important; }
.swiper-slide-active .delay017s { animation-delay: 1.7s !important; -webkit-animation-delay: 1.7s !important; -moz-animation-delay: 1.7s !important; }
.swiper-slide-active .delay02s { animation-delay: 2s !important; -webkit-animation-delay: 2s !important; -moz-animation-delay: 2s !important; }
.swiper-slide-active .delay023s { animation-delay: 2.3s !important; -webkit-animation-delay: 2.3s !important; -moz-animation-delay: 2.3s !important; }
.swiper-slide-active .delay027s { animation-delay: 2.7s !important; -webkit-animation-delay: 2.7s !important; -moz-animation-delay: 2.7s !important; }
.swiper-slide-active .delay03s { animation-delay: 3s !important; -webkit-animation-delay: 3s !important; -moz-animation-delay: 3s !important; }
.swiper-slide-active .delay033s { animation-delay: 3.3s !important; -webkit-animation-delay: 3.3s !important; -moz-animation-delay: 3.3s !important; }
.swiper-slide-active .delay037s { animation-delay: 3.7s !important; -webkit-animation-delay: 3.7s !important; -moz-animation-delay: 3.7s !important; }
.swiper-slide-active .delay04s { animation-delay: 4s !important; -webkit-animation-delay: 4s !important; -moz-animation-delay: 4s !important; }
.swiper-slide-active .delay043s { animation-delay: 4.3s !important; -webkit-animation-delay: 4.3s !important; -moz-animation-delay: 4.3s !important; }
.swiper-slide-active .delay047s { animation-delay: 4.7s !important; -webkit-animation-delay: 4.7s !important; -moz-animation-delay: 4.7s !important; }
.swiper-slide-active .delay05s { animation-delay: 5s !important; -webkit-animation-delay: 5s !important; -moz-animation-delay: 5s !important; }
.swiper-slide-active .delay053s { animation-delay: 5.3s !important; -webkit-animation-delay: 5.3s !important; -moz-animation-delay: 5.3s !important; }
.swiper-slide-active .delay057s { animation-delay: 5.7s !important; -webkit-animation-delay: 5.7s !important; -moz-animation-delay: 5.7s !important; }
.swiper-slide-active .delay06s { animation-delay: 6s !important; -webkit-animation-delay: 6s !important; -moz-animation-delay: 6s !important; }
.swiper-slide-active .delay063s { animation-delay: 6.3s !important; -webkit-animation-delay: 6.3s !important; -moz-animation-delay: 6.3s !important; }
.swiper-slide-active .delay067s { animation-delay: 6.7s !important; -webkit-animation-delay: 6.7s !important; -moz-animation-delay: 6.7s !important; }
.swiper-slide-active .delay07s { animation-delay: 7s !important; -webkit-animation-delay: 7s !important; -moz-animation-delay: 7s !important; }
.swiper-slide-active .delay073s { animation-delay: 7.3s !important; -webkit-animation-delay: 7.3s !important; -moz-animation-delay: 7.3s !important; }
.swiper-slide-active .delay077s { animation-delay: 7.7s !important; -webkit-animation-delay: 7.7s !important; -moz-animation-delay: 7.7s !important; }
.swiper-slide-active .delay08s { animation-delay: 8s !important; -webkit-animation-delay: 8s !important; -moz-animation-delay: 8s !important; }
.swiper-slide-active .delay083s { animation-delay: 8.3s !important; -webkit-animation-delay: 8.3s !important; -moz-animation-delay: 8.3s !important; }
.swiper-slide-active .delay087s { animation-delay: 8.7s !important; -webkit-animation-delay: 8.7s !important; -moz-animation-delay: 8.7s !important; }
.swiper-slide-active .delay09s { animation-delay: 9s !important; -webkit-animation-delay: 9s !important; -moz-animation-delay: 9s !important; }
.swiper-slide-active .delay093s { animation-delay: 9.3s !important; -webkit-animation-delay: 9.3s !important; -moz-animation-delay: 9.3s !important; }
.swiper-slide-active .delay097s { animation-delay: 9.7s !important; -webkit-animation-delay: 9.7s !important; -moz-animation-delay: 9.7s !important; }
.swiper-slide-active .delay10s { animation-delay: 10s !important; -webkit-animation-delay: 10s !important; -moz-animation-delay: 10s !important; }



/*only PC ver.*/
@media screen and (min-width:1301px) {
	.overlay { width: 20%; }
	.conwrap {overflow:visible;}
	#fixMain>#container .contents {padding-left:100px;}
	#fixMain>#container>.swiper-container .swiper-pagination { left: 250px; }
	#fixMain>#container>.swiper-container .controlltxt { left: 370px; }
	#footer p span.tel::before { position: absolute; left: -7px; top: 7px; background: rgba(255,255,255,.12); content: ''; width: 1px; height: 15px; }
	#footer p span.tel::after { position: absolute; right: 7px; top: 7px; background: rgba(255,255,255,.12); content: ''; width: 1px; height: 15px; }
}

/*TABLET&MOBILE ver.*/
@media screen and (max-width:1300px) {
	.conwrap {overflow-y:auto; margin:78px auto 0; max-height:70vh; }
	/*HEADER*/
	#header {width:100%; height:137px; box-shadow:0 10px 10px rgba(0,0,0,.25);}
	#header .logo {display:block; position:absolute; top:24px; left:47%;}
	#header .cscenter {display:block; position:absolute; top:0; right:0; padding:50px 30px; margin:0 auto; text-align:right; width:100%; background-color:transparent;}
	#header .cscenter>p, #header .cscenter a {font-size:15px;}
	#header .cscenter a {font-size:20px;}
	.toggle-button {top: 40%; left:40px;}
	.overlay {position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:auto; background:rgba(0,0,0,1)}
	.overlay nav { margin:0 auto; height:auto;}
	.overlay nav>ul { list-style:none; margin:0 auto;}
	.overlay nav>ul>li {margin:1.5rem 0; opacity:0; }
	.overlay nav>ul>li>a {font-size:1.5em;}
	.overlay.visible {left:0; top:0; width:100%; height:100%; opacity:1; visibility:visible;}
	.btnpartners {right:30px; top:160px; /*z-index:1000;*/}
	.fixedmark {right:20px; bottom:30px;}
	.fixedmark img {width:70%; height:auto;}
	#fixMain {height:100%;}
	#fixMain.partnerBg {background-position:center !important; }
	#fixMain .contents {background-position:67% top;}
	#fixMain>#container {width:100%; margin:0 auto;}
	#fixMain>#container>.swiper-container {height:100%; padding:70px 0 0;}
	#fixMain>#container>.swiper-container>.swiper-slide {height:100%;}
	#fixMain>#container>.swiper-container>.swiper-pagination {position:absolute; top:95vh; bottom:0;}
	#fixMain>#container>.swiper-container .controlltxt{position:absolute; top:95.5vh; bottom:0; color:#fff; letter-spacing:0;}
	.contents .titBox p { font-size: 16px; }
	.contents .titBox .subslogan { font-size: 20px; font-weight: 400; }
	.contents .titBox .mainslogan {font-size: 35px; margin:20px auto; }
	@keyframes fadeInLeft {
		0% { opacity: 0; transform: translateY(-25%); }
		100% { opacity: 1; transform: translateY(0); }
	}
}

@media screen and (max-width:900px) {
	.btnpartners {top:40px; z-index:997;}
	.fixedmark {right:10px; bottom:10px;}
	.fixedmark img {box-shadow:none; width:108px; height:98px;}
	#header {z-index:995;}
	#partnership #header .logo {left:40px !important;}
	#header .cscenter {position:relative; top:42px; padding-right:55px; padding-bottom:0;}
	#header .cscenter>p, #header .cscenter a {display:inline-block; font-weight:600;}
	#header .cscenter a {font-size:15px;}
	/*#header .logo {left:40px;}
	#header .toggle-button {display:none;}*/
	#fixMain {background-position:45% center;}
	#fixMain>#container>.swiper-container .controlltxt {left:197px;}
	.contents .titBox .mainslogan {font-size:25px;}
	/*FOOTER*/
	#footer {padding-bottom:30px;}
	#footer #top a {right:-10px; bottom:-10px;}
	#footer p {text-align:center;}
	#footer .logo {display:block; width:100%; text-align:center; background-position:center; }
	#footer .address span:nth-child(2n) {display:block;}
	#footer .groupBox { position: relative; margin-top:10px; text-align: center; height:100%;}
	#footer .groupBox .w3-dropdown-content {position:relative; max-width:242px; margin:0 auto;}
}

@media screen and (max-width:480px) {
	#header .logo {left:40px;}
	#header .toggle-button {display:none;}
	#fixMain .contents {background-position:75% top;}
	.conwrap {margin-top:30px !important; max-height:67vh;}
	#fixMain>#container>.swiper-container>.swiper-pagination {left:20px;}
	#fixMain>#container>.swiper-container .controlltxt {left:139px;}
	.contents .titBox p {font-size:.765rem; margin-bottom:0;}
}