/* coommon */
.red {color: var(--red)}
.blue {color: var(--blue)}
body {font-family: 'S-CoreDream-4Regular';}

header {position:fixed; top:0; left:0; width:100%; height:80px; z-index:100}
header .logo li {display: flex; justify-content: center; width: 120px; height: 40px; background:url(../images/logo.png) no-repeat 0 -40px; background-size: auto 80px}
header .logo a {text-indent: -1000px; width: 100%; height: 100%}

nav {display: flex; justify-content: space-between; align-items: center; max-width: 1200px; height: 100%; margin: 0 auto}
nav .sub {display: flex; justify-content: space-between; align-items: center; column-gap: 30px}
nav a {font-family: 'GmarketSansMedium'; font-size: 1em; color: #393145}

.visual {position: relative; width:100%; height:56.25vw; background-color:#0a1a30}
.visual video {opacity: .75; width: 100%; height: 100%; object-fit: cover;}
.visual .txt {position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); width: 75%; z-index: 100}
.visual .txt p {text-align: center; font-family: 'S-CoreDream-6Bold'; font-size: 2em; word-break: keep-all; color: #fff;}

.fp-viewing-visual nav a,
.fp-viewing-vision nav a,
.fp-viewing-record nav a { color: #fff}

.fp-viewing-visual header .logo li,
.fp-viewing-vision header .logo li,
.fp-viewing-record header .logo li {background-position: 0 0px}

.title {width: 100%; font-family: 'GmarketSansMedium';}
.title h3 {position: relative; display: inline-block; margin-bottom: 10px; font-weight: 700; font-size: 2em; color: #147fdc}
.title h3::after {content: ''; position: absolute; top: 0; right: -30px; display: block; width: 30px; height: 30px; background-image: url("../images/bullet.png"); background-size: auto 60px}
.title p {font-size: 1.5em}

article {display: flex; ; flex-direction: column; justify-content: center; align-items: center; width: 100%; max-width: 1200px; height: 100%; margin: 0 auto; row-gap: 30px}

.about .content ul {display: flex}
.about .content .txt {display: flex; flex-direction: column; align-items: flex-start; justify-content: center; row-gap:10px}
.about .content .txt p {font-size: 1.125em}

.vision {color: #fff; background-color: #051532; background-image: url(../images/vision_bg.jpg); background-position: top right; background-size: cover}
.vision .content {width:100%; display: flex; margin:0 auto; column-gap: 60px; }
.vision dl {flex: 1}
.vision dl dt {position: relative; width: 100%; height: 240px; margin-bottom: 10px; border-radius: 15px; background-color: #0b2734}   
.vision dl dt::before {content: ""; width: 100%; height: 100%; position: absolute; background-size: cover; background-position: center; opacity: 0.6;}
.vision dl dt.vision1::before {background-image: url(../images/vision_01.jpg);}
.vision dl dt.vision2::before {background-image: url(../images/vision_02.jpg);}
.vision dl dt.vision3::before {background-image: url(../images/vision_03.jpg);}
.vision dl dt label {position: absolute; left: 5%; bottom: 10%; color: #fff; font-size: 1.25em; font-family: 'S-CoreDream-6Bold'; z-index: 100}
.vision dl dd {width: 100%; padding: 10px;}
.vision dl dd h3 {color: #143e8c; font-size: 1.25em; font-family: 'S-CoreDream-6Bold'}

.our {background: #f4f6f9}
.our .content {width:100%; display: flex; margin:0 auto; column-gap: 60px; }
.our dl {flex: 1}
.our dl dt {position: relative; width: 100%; height: 240px; margin-bottom: 10px; border-radius: 15px; background-color: #0b2734}   
.our dl dt::before {content: ""; width: 100%; height: 100%; position: absolute; background-size: cover; background-position: center; opacity: 0.6;}
.our dl dt.our1::before {background-image: url(../images/our_01.jpg);}
.our dl dt.our2::before {background-image: url(../images/our_02.jpg);}
.our dl dt.our3::before {background-image: url(../images/our_03.jpg);}
.our dl dt label {position: absolute; left: 5%; bottom: 10%; color: #fff; font-size: 1.25em; font-family: 'S-CoreDream-6Bold'; z-index: 100}
.our dl dd {width: 100%; padding: 10px}
.our dl dd h3 {color: #143e8c; font-size: 1.25em; font-family: 'S-CoreDream-6Bold'}
.fade-up { opacity: 0; transform: translateY(100px); transition: all .5s ease-out;}
.show { opacity: 1; transform: translateY(0);}

.record {background-color: #051532; background-image: url(../images/record_bg.jpg); background-position: top right; background-size: cover}
.record .content {display: flex; flex-wrap: wrap; column-gap: 20px}
.record .content dl {width: 40%; margin-bottom: 30px; color: #fff}
.record .content dt {font-family: 'S-CoreDream-6Bold'; margin-bottom: 5px}
.record .content dt label {color: #00cfff; margin-right: 10px}

.contact .title p {width: 65%}
.contact .content {width: 100%}
.contact ul {width: 100%; margin-bottom: 30px; font-size: 1.25em}
.contact dl {display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); width: 100%; font-family: 'GmarketSansMedium'; grid-row-gap: 20px} 
.contact dd {display: flex; flex-direction: column; position: relative; padding-left: 70px; justify-content: center; height: 60px}
.contact dd::before {content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 60px;  background-image: url("../images/icon.png"); background-size: auto 120px}
.contact .txt {grid-column: 1 / 3; grid-row: 1 / 2; font-size: 1.5em; padding-right: 50px}
.contact .img {grid-column: 3 / 4; grid-row: 1 / 5}
.contact .img img {width: 100%}
.contact .img::before {display: none}
.contact .tel {grid-column: 1 / 2; grid-row: 2 / 3}
.contact .tel::before {background-position: 0 0}
.contact .mob {grid-column: 2 / 3; grid-row: 2 / 3}
.contact .mob::before {background-position: -60px 0}
.contact .mail {grid-column: 1 / 2; grid-row: 3 / 4}
.contact .mail::before {background-position: -120px 0}
.contact .fax {grid-column: 2 / 3; grid-row: 3 / 4}
.contact .fax::before {background-position: 0 -60px}
.contact .addr {grid-column: 1 / 3; grid-row: 4 / 5}
.contact .addr::before {background-position: -60px -60px}
.contact dd label {color: #3499fc}

footer {position: absolute; left: 0; bottom: 0; width: 100%; height: 100px; background: #f4f6f9}
footer div {display: flex; justify-content: center; row-gap: 5px; max-width: 1200px; height: 100%; margin: 0 auto; flex-direction: column; align-items:flex-end}
footer figure {width: 120px; height: 40px; overflow: hidden}
footer figure img {width: 100%; height: 100%; object-fit: cover; object-position: center bottom}

.openPanel {display: none}

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

    .visual .txt p {display: inline}
    .about .img img {width: 100%; height: 100%; object-fit: cover}
}

/* mobile */
@media only screen and (max-width:768px){
    body {font-family: 'S-CoreDream-5Medium';}
    img {width: 100%}
    
    header {height: 60px}
    header article {position: relative}
    header nav .sub {display: none; position: absolute; top: 60px; right: 0; width: 100%; z-index: 200; background: #ffffff80}
    header.mob nav .sub {display: flex; flex-direction: column; align-items:flex-end; row-gap: 10px; padding: 5px 20px 5px 0}
    header.mob .openPanel ul li:nth-child(1) {top: 13px; right: 0px; transform: rotate(45deg); transition: 0.3s;}
    header.mob .openPanel ul li:nth-child(2) {top: 13px; right: 0px; opacity: 0; transition: 0.3s;}
    header.mob .openPanel ul li:nth-child(3) {top: 13px; right: 0px; transform: rotate(-45deg); transition: 0.3s;}
    
    .openPanel {display:block; position:absolute; top:18px; right: 15px; width:40px; height:40px; z-index:200}
	.openPanel ul {position:relative}
	.openPanel ul li {position:absolute; width:30px; height:2px; border-radius:2px; background: #393145}
	.openPanel ul li:nth-child(1) {top:0; right:0}
	.openPanel ul li:nth-child(2) {top:10px; right:0}
	.openPanel ul li:nth-child(3) {top:20px; right:0}
    
    .fp-viewing-visual .openPanel ul li,
    .fp-viewing-vision .openPanel ul li, 
    .fp-viewing-record .openPanel ul li {background: #eaecef}
    
    .fp-viewing-visual header nav .sub,
    .fp-viewing-vision header nav .sub, 
    .fp-viewing-record header nav .sub {background: #05153280}
    
    .title {text-align: center}
    
    .visual .txt p {font-size: 1.5em; display: inline}
    
    .about .content {width: calc(100% - 40px)}
    .about .content ul {flex-direction: column-reverse}
    .about .content .txt {padding-top: 15px}
    .about .content .txt p {font-size: 1em}
    
    .vision {background-image: none}
    .vision .content {width: calc(100% - 40px); flex-direction: column; align-items: center; column-gap: 0; row-gap: 20px}
    .vision dl {position: relative; width: 100%}
    .vision dl dt {width: 100%; height: 35vw; margin-bottom: 0}
    .vision dl dt label {bottom: auto; top: 6%; left: 10px; color: #00cfff; font-size: 1em}
    .vision dl dt::before {opacity: .5}
    .vision dl dd {position: absolute; top: calc(6% + 20px); font-size: .875em}
    
    .our .content {width: calc(100% - 40px); flex-direction: column; align-items: center; column-gap: 0; row-gap: 20px}
    .our dl {width: 100%}
    .our dl dt {width: 100%; height: 35vw; margin-bottom: 0}
    .our dl dt label {bottom: auto; top: 6%; left: 10px; color: #00cfff; font-size: 1em}
    .our dl dt::before {opacity: .5}
    .our dl dd {position: absolute; top: calc(6% + 20px); color: #fff; font-size: .875em}
    
    .record {background-image: none}
    .record .content {width: calc(100% - 40px);}
    .record .scrollable-element {max-height: 60vh; overflow-y: scroll;}
    .record .content dl {width: 100%}
    
    .contact .content {width: calc(100% - 40px);}
    .contact dl {display: flex; flex-wrap: wrap; grid-row-gap:5px}
    .contact dt {width: 100%}
    .contact dd {width: 50%; padding-left: 50px; font-size: .875em}
    .contact dd:last-child {width: 100%}
    .contact dd::before {top:5px; zoom: .8}
    .contact .txt {font-size: 1.125em; padding-right: 0}
    .contact .img figure {height: 50vw}
    .contact .img figure img {width: 100%; height: 100%; object-fit: cover; object-position: center}
    
    footer {height: 60px; font-size: .875em}
    footer figure {zoom: .8}
    footer div {row-gap:0}
    footer p {padding-right: 10px; color: #999}

}

@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}