/* coommon */
body {font-family: 'S-CoreDream-4Regular';}

header {position:fixed; top:0; left:0; width:100%; height:80px; padding-top: 20px; z-index:100; transition:height .1s ease}
header .logo {display: flex; justify-content: center; width: 120px; height: 40px; background:url(../images/logo.png) no-repeat; background-size: contain; background-position: center; filter: invert(1);}
header .logo a {text-indent: -200px; width: 100%; height: 100%; overflow: hidden; display: block}

header.over {height: 180px; transition:height .3s ease}
header.over .sub dl dd {display: block;}

form {width: 100%; height: 100%;}

.emp {color: #9b2929;}

.fp-viewing-2 header .logo {filter: none;}
.fp-viewing-2 nav .sub dt a {color: #000}
.fp-viewing-2 nav .sub dd a {color: #444}
.fp-viewing-2 nav .sub dd a:hover {color: #01ad23;}
.fp-viewing-2 .section .txt { color: #222; }
.fp-viewing-2 .etc {border: 1px solid #000; }
.fp-viewing-2 .etc a {color: #000;}

.fp-viewing-3 header .logo {filter: none;}
.fp-viewing-3 nav .sub dt a {color: #000}
.fp-viewing-3 nav .sub dd a {color: #444}
.fp-viewing-3 nav .sub dd a:hover {color: #01ad23;}
.fp-viewing-3 .section .txt { color: #222; }
.fp-viewing-3 .etc {border: 1px solid #000; }
.fp-viewing-3 .etc a {color: #000;}

nav {display: flex; justify-content: space-between; align-items: flex-start; max-width: 1280px; height: 100%; margin: 0 auto}
nav .sub {width: 60%; min-height: 40px; display: flex; justify-content: space-around; align-items: flex-start; margin-left: 80px;}
nav .sub a {line-height: 1.5em; font-family: 'GMarketSans'; font-size: 1.25em; font-weight: 500; color: #fff}
nav .sub dl {flex: 1; position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;}
nav .sub dl:nth-child(2) {flex: 1.3;}

nav .sub dt {position: relative; height: 40px; display: flex; align-items: center; margin-bottom: 5px;} 
nav .sub dl:hover dt::after {content: ''; position: absolute; left: 0; bottom: 1px; width: 100%; height: 2px;  background: #01ad23;}
nav .sub dd {height: 30px; display: none; font-size: .75em; font-weight: normal;}
nav .sub dd a {color: #eee;}
nav .sub dd a:hover {color: #01ad23;}

.etc {display: flex; justify-content: center; align-items: center; height: 40px; padding: 0 15px;  border: 1px solid #fff; border-radius: 20px; }
.etc a {font-size: 1.125em; color: #fff;}
.etc a::after {content: ' 신청하기';}

/* dropdown: show only dt, reveal dd on hover */

.down #header {
  background: #fff;
  box-shadow: 0 4px 8px #00000040;
  z-index: 100;
}

.down header .logo {filter: none;}
.down header nav .sub a {color: #000}
.down header nav .sub dd a {color: #777}
.down header nav .sub dd a:hover {color: #01ad23;}
.down header .section .txt { color: #222; }
.down header .etc {border: 1px solid #000; }
.down header .etc a {color: #000;}

.section .txt {color: #fff; text-align: center;}
.section .txt h3 {font-size: 5vw; line-height: 1.2em;}
.section .txt h4 {font-size: 3vw; line-height: 1.2em;}
.section .txt p {font-size: 2vw; word-break: keep-all;}
.section figure.bg {opacity: .25; width: 100%; height: 100%;}
.section figure.bg img {width: 100%; height: 100%; object-fit: cover;}

.section article {display: flex; justify-content: center; align-items: center; flex-direction: column; row-gap: 50px; position: absolute; width: 100%; height: calc(100% - 40px); top: 0; left: 0; z-index: 10; overflow: hidden;}
.section article .title {display: flex; justify-content: center; align-items: center; flex-direction: column;}
.section article .content {display: flex; justify-content: center; align-items: center; width: 100%; max-width: 1280px; margin: 0 auto; padding: 20px 0;}

.section.strength {background-color: #ccc;}
.section.strength .content {justify-content: space-between; column-gap: 20px;}
.section.strength .content .item {display: flex; flex-direction: column; align-items: center; row-gap: 20px; width: 30%; min-height: 360px; padding: 30px 10px; background-color: #ffffffcc;}
.section.strength .content .item::before {content: ''; display: block; width: 120px; height: 80px; background-size: contain; background-repeat: no-repeat; background-position: center;}
.section.strength .content .item:nth-child(1)::before {background-image: url("../images/strength1.png");}
.section.strength .content .item:nth-child(2)::before {background-image: url("../images/strength2.png");}
.section.strength .content .item:nth-child(3)::before {background-image: url("../images/strength3.png");}
.section.strength .content .item:nth-child(4)::before {background-image: url("../images/strength4.png");}
.section.strength .content .item dt {font-size: 1.5em; font-weight: 600;}
.section.strength .content .item dd {font-size: 1.25em; line-height: 1.5em; text-align: center;}

.section.media {background-color: #ccc;}
.section.media .content {flex-wrap: wrap; gap: 50px 40px; max-width: 1200px;}
.section.media .mediaList {width: calc(50% - 20px); height: 240px; background: #fff; padding: 0 20px;}


.utb dt {padding-top: 56.25%; display: block; position: relative; width: 100%; overflow: hidden; height: 0;}
.utb dt figure {position: absolute; transform: translateY(-50%); top: 50%; left: 0; width: 100%; height: 100%;}
.utb dt figure img {width: 100%; height: 100%; object-fit: cover;}
.utb dd {height: 80px; padding: 5px 0;}
.utb dd h4 {font-size: 1em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.2em; font-weight: normal;}
.utb dd p {font-size: .875em;}

#community .tab {text-align: center; font-size: 1.5em; margin-bottom: 50px;}
#community .news-card {border-top: 1px solid #000; margin: 0 10px; ; font-weight: normal;}
#community .news-card dl {height: auto; padding: 10px 0;}
#community .news-card dd {width: calc(100% - 20px);}
#community .news-card .summary {width: 100%;}
#community .utb {display: flex; justify-content: space-between; flex-wrap: wrap; gap: 5%;}
#community .utb dl {width: 30%; margin-bottom: 50px;}
#community .more {margin: 0 10px; text-align: right;}
#community .more button {padding: 5px 20px; color: #fff; font-size: 1.5em; border: none; border-radius: 5px; background: #01ad23;}

.visual { font-family: 'S-CoreDream-6Bold'; text-align: center; color: #fff; }
.visual .txt {display: flex; flex-direction: column; row-gap: 1em; width: 80%; position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); z-index: 100}
.visual {position: relative; width:100%; background: #000;}
.visual .slide {position: relative;}
.visual video {opacity: .5; width: 100%; height: 100%; object-fit: cover;}

.tab button {font-family: 'GMarketSans'; font-size: 1.25em; color: #777; padding: 10px 20px; border: none; background: none; cursor: pointer;}
.tab button.active {color: #01ad23; border-bottom: 3px solid #01ad23;}

.news-card dl {display: flex; height: 100px; align-items: center; column-gap: 20px; border-bottom: 1px solid #eee; cursor: pointer;}
.news-card dl:last-child {border-bottom: none; }
.news-card figure {width: 120px; height: 80px; overflow: hidden;}
.news-card figure img {width: 100%; height: 100%; object-fit: cover;}
.news-card .date {font-size: .875em; color: #777;}
.news-card .headline {width: 540px; font-size: 1.125em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.news-card .summary {width: 540px; font-size: 1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #777;}
.news-card .summary b {color: #01ad23; font-weight: normal;}

.list-head {display: flex; justify-content: flex-start; align-items: center; height: 40px;}
.list-head h4 {flex: 1; font-size: 1.25em; font-weight: 600; border-bottom: 1px solid #444;}

.news-view dl dt {font-size: 1.5em;}
.news-view dl dd {font-size: 1.125em; color: #777;}

.contact {background: #000;}

.contact article .content {width: 50%; max-width: 800px; flex-direction: column; row-gap: 20px; color: #fff; background: #00000080}
.contact .content ul { margin: 0 50px;}
.contact .form {display: flex; flex-direction: column;}
.contact .form li {height: 50px; font-size: 2em; border-bottom: 1px solid #999}
.contact .form label {display: flex; align-items: center; color: #ccc;}
.contact .form span {width: 100px;}
.contact .form input {width: calc(100% - 100px); height: 100%; font-size: 1em; color: #fff; border: none; background-color: transparent;}
.contact .form input::placeholder { font-size: .75em; }

.contact .agree {padding: 10px 0;}
.contact .agree textarea {width: 100%; height: 200px; color: #ccc; background-color: transparent;}
.contact .agree label {display: flex; align-items: center; column-gap: 5px; font-size: 1em; color: #ccc;}

.contact .btn-area {display: flex; justify-content: center; align-items: center; }
.contact .btn-area button {width: 100%; height: 50px; padding: 0 50px 1px; font-size: 2em; font-family: 'GMarketSans'; color: #fff; border: none; border-radius: 25px; background: linear-gradient(135deg, #01ad23 0%, #00b610 100%);}

.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}

.swiper-pagination-bullet-active {width: 16px;border-radius: 5px; background: #fff;}



#fp-nav ul li, 
.fp-slidesNav ul li {width: 14px; height: 14px;}
.fp-tooltip {color: #fff; font-size: 1em; line-height: 1.2em; font-family: 'GMarketSans'; padding: 5px 10px; border-radius: 20px; background: #66666680;}

#fp-nav ul li a span, 
.fp-slidesNav ul li a span {width: 6px; height: 6px; background: none; border: 3px solid #fff;}

.fp-slidesNav ul {display: flex; justify-content: center;}

.fade-up { opacity: 0; transform: translateY(100px); transition: all .5s ease-out;}
.show { opacity: 1; transform: translateY(0);}

.subTop {position: relative; height: 480px; color: #fff; background: #000; overflow: hidden;}
.subTop h1 {position: absolute; top: 50%; left: 50%; font-size: 5em; line-height: 1.2em; transform: translate(-50%, -50%); z-index: 10; text-shadow: 1px 1px 10px #00000080;}
.subTop figure {width: 100%; height: 100%; z-index: 1; opacity: .5;}
.subTop figure img {width: 100%; height: 100%; object-fit: cover;}

.product {background: #000;}

.subBody {min-height: calc(100dvh - 480px); padding: 50px 0;}
.subBody article {max-width: 1280px; margin: 30px auto;}
.subBody .title {position: relative; display: flex; justify-content: center; flex-direction: column; align-items: center; width: 100%; margin-bottom: 20px; padding-top: 50px;}
.subBody .title::before {content: ''; position: absolute; top: 0; left: 50%; width: 50px; height: 5px; background: #000; transform: translateX(-50%);}
.subBody .title h2 {font-family: 'GmarketSans'; font-size: 6em; font-weight: 700; line-height: 1.2em; }
.subBody .title h3 {font-family: 'GmarketSans'; font-size: 3em; font-weight: 700; line-height: 1.2em;}


.subBody .content {margin-bottom: 100px;}
.subBody .content dd {display: flex; justify-content: center; flex-direction: column; align-items: center; width: 100%; margin-bottom: 20px;}
.subBody .content h4 {font-size: 2em; text-align: center; margin-bottom: 20px;}
.subBody .content h5 {font-size: 1.75em; text-align: center; margin-bottom: 20px;}
.subBody .content p {font-size: 1.75em; text-align: center;}


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

.openPanel {display: none}

.content.block { margin-bottom: 0px; }
.content.block dl { display: flex; align-items: stretch; flex-direction: row-reverse; padding: 30px 50px; column-gap: 30px; opacity: 0; transform: translateY(50px); transition: opacity .6s ease-out, transform .6s ease-out;}
.content.block dl.fade-in { opacity: 1; transform: translateY(0);}
.content.block dl dt { flex: 0 0 calc(40% - 30px); }
.content.block dl dt figure { width: 100%; height: 100%;} 
.content.block dl dt figure img { width: 100%; height: 100%; object-fit: cover; }
.content.block dl dd { flex: 0 0 60%; padding: 30px 0;}
.content.block dl dd h4 {font-size: 2.5em; font-family: 'GmarketSans'; font-weight: 700;}
.content.block dl dd p {font-size: 1.25em; word-break: keep-all; }
.content.block dl:nth-child(odd) { flex-direction: row; background: #f4f2ee }
.content.block dl:last-child dd { flex: 1; }

@media only screen and (min-width:1600px){

    .section .txt h3 {font-size: 5em;}
    .section .txt h4 {font-size: 3em;}
    .section .txt p {font-size: 2em;}
}

/* mobile */
@media only screen and (max-width:768px){
  body {font-family: 'S-CoreDream-5Medium';}
  img {width: 100%}

  .section article {height: 100%; row-gap: 20px;}
  .section article .txt h3 {font-size: 2em;}
  .news-card figure {width: 100px; height: 70px;}
  .news-card .headline {width: calc(100% - 5px); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.2em; white-space: normal;}
  
  header {height: 60px; padding: 10px 10px 0}
  header article {position: relative}
  header nav .sub {display: none; position: absolute; top: 0; right: 0; width: 100%; z-index: 200; background: #000000bf}
  header.mob nav .logo {z-index: 300; filter: invert(1);}
  header.mob nav .sub {position: fixed; display: flex; flex-direction: column; align-items:flex-start; justify-content: flex-start; row-gap: 10px; bottom: 0; padding: 70px 0 0 15px;}
  header.mob nav .sub dl {flex: unset; width: calc(100% - 20px);}
  header.mob nav .sub dl::before {content: ''; width: 100%; height: 1px; background: #cccccc80;}
  header.mob nav .sub dd {display: flex; column-gap: 5px;}
  header.mob nav .sub a {color: #fff;}
  header.mob nav .sub dd a {color: #eee;}
  header.mob nav .sub dd::before {content: '-'; color: #eee;}
  header.mob nav .etc {z-index: 300; border-color: #fff;}
  header.mob nav .etc a {color: #fff;}

  header.mob .openPanel ul li:nth-child(1) {top: 13px; right: 0px; transform: rotate(45deg); transition: 0.3s; background: #fff;}
  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; background: #fff;}
  
  .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: #fff}
	.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}

  .etc {position: fixed; right: 60px; top: 15px; height: 30px; z-index: 100; }
  .etc a {font-size: 1em;}
  .etc a::after {display: none;}

  .section.product .txt {margin: 0 20%; line-height: 2em;}
  .section .txt h3 {font-size: 2em; }
  .section .txt h3 span {display: block; }
  .section .txt h4 {font-size: 1.25em;}
  .section .txt h4 span {display: block; }

  .section.strength article {row-gap: 10px;}
  .section.strength .content {flex-direction: column; row-gap: 20px;}
  .section.strength .content .item {width: 90%; min-height: auto; padding: 20px 5px; position: relative; padding-left: 100px; align-items: flex-start; row-gap: 5px;}
  .section.strength .content .item::before {width: 80px; height: 60px; position: absolute; top: 50%; left: 5px; transform: translateY(-50%);}
  .section.strength .content .item dt {font-size: 1.125em;}
  .section.strength .content .item dd {text-align:left; font-size: .875em; line-height: 1.2em;}

  .section.media article {top: 20px;}  
  .section.media .mediaList {width: calc(100% - 20px); height: auto; padding: 0 10px;}
  .section.media .mediaList .list-head {height: auto;}
  .section.media .mediaList .news-card dl {height: auto; padding: 5px 0;}
  .section.media .mediaList .news-card dd {width: 100%;}
  .section.media .mediaList .news-card .summary {display: none ;}
  .section.media .content {gap: 10px; padding: 0;}
  .section.media .content .utb {margin: 0 10px;}

  .section.contact article .title {row-gap: 10px;}
  .section.contact .content ul {margin: 0 10px;}
  .contact article .content {width: 90%; font-size: .75em;}

  #community .utb {width: calc(100% - 20px); margin: 0 auto; column-gap: 20px;}
  #community .utb dl {width: calc(50% - 10px); margin-bottom: 0;}
  #community .more {margin: 0 10px; text-align: center;}
    
  .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}

  .subTop {height: 56.25vw;}
  .subTop h1 {font-size: 2.5em; text-align: center;}

  .subBody {min-height: calc(100dvh - 56.25vw - 60px); padding: 30px 0;}
  .subBody .title {padding-top: 30px;}
  .subBody .title::before {height: 3px; width: 30px;}
  .subBody .title h2 {font-size: 3em;}
  .subBody .title h3 {font-size: 1.75em;}
  .subBody .content p {font-size: 1.25em;}

  .content.block dl {flex-direction: column; padding: 20px;}
  .content.block dl:nth-child(odd) { flex-direction: column; }
  .content.block dl dd h4 {font-size: 1.75em;}
  .content.block .subBody .content h5 {font-size: 1.25em;}
  .content.block dl dd p {font-size: 1.125em;}

  .down .openPanel ul li {background: #000}

  
  .title {text-align: center}
  
  .visual .txt p {font-size: 1.25em; display: inline}
    
  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: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GMarketSans.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}