@import url("xeicon/xeicon.min.css");
    @import url("//fonts.googleapis.com/earlyaccess/notosanskr.css");
    @import url("//fonts.googleapis.com/css?family=Raleway: 300, 400, 600, 700");
    @import url("//fonts.googleapis.com/css?family=Play: 300, 400, 400, 600, 700");
    *, *: :before, *::after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
    word-break: keep-all;
}
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@font-face {
    font-family: 'Gmarket Sans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: 'Gmarket Sans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Gmarket Sans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: 600;
    font-style: bold;
}


@font-face {
    font-family: 'Binggrae';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Binggrae.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


html {
    overflow: hidden;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: 'Gmarket Sans';
    font-size: 10px;
    font-weight: 300;
    line-height: 0;
}
body {
    overflow: hidden;
    margin: 0;
    padding: 0;
    font-family: 'Gmarket Sans';
    font-size: 1.6rem;
    color: #666;
    line-height: 1.3;
}
h1, h2, h3 h4, h5, h6 {
    margin: 0;
    padding: 0;
    font: inherit;
    font-family: 'Gmarket Sans';
}
ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}
p {
    margin: 0;
    padding: 0;
}
button {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0 none;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
img {
    max-width: 100%;
    border: 0 none;
    vertical-align: middle;
}
strong {
    font-weight: 600;
}
a {
    color: inherit;
    text-decoration: none;
}
.container {

    max-width: calc(100% - 4rem);
    margin: 0 auto;
}

.section .container{max-width: 1350px}


.inner{max-width: 1280px; margin: 0 auto}

body #fp-nav.right {
    right: 7.5rem;
    z-index: 9;
    color: #fff;
    display: none;
}
body #fp-nav.right::before {
    display: block;
    width: 100%;
    margin-bottom: 2rem;
    font-size: 1.2rem;
    font-weight: 600;
    content: '01'}
body #fp-nav.right::after {
    display: block;
    width: 100%;
    margin-top: 3rem;
    font-size: 1.2rem;
    font-weight: 600;
    content: '05'}
body #fp-nav.right ul {
    position: relative;
    width: 1rem;
}
body #fp-nav.right ul::before {
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 100%;
    background-color: #fff;
    content: '';
    opacity: 0.3;
}
body #fp-nav.right ul li {
    position: relative;
    width: auto;
    height: auto;
    margin: 0;
    text-align: center;
}
body #fp-nav.right ul li+li::before {
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 0;
    content: '';
    background-color: #fff;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
body #fp-nav.right ul li:first-child a {
    height: 0.5rem;
    padding-top: 0;
}
body #fp-nav.right ul li.active::before {
    height: 2.5rem;
}
body #fp-nav.right span {
    display: none;
}
body #fp-nav.right a {
    display: block;
    height: 3rem;
    padding-top: 2.5rem;
}
body #fp-nav.right a span {
    display: block;
    position: static;
    width: 0.5rem;
    height: 0.5rem;
    margin: 0 auto !important;
    border-radius: 100%;
    background-color: #fff;
    opacity: 0.5;
    -webkit-transition: all 0.2s 0.2s;
    transition: all 0.2s 0.2s;
}
body #fp-nav.right a.active span {
    width: 1rem;
    height: 1rem;
    opacity: 1;
    -webkit-transition: all 0.2s 0s;
    transition: all 0.2s 0s;
}
body #fp-nav.right a.active+.fp-tooltip {
    font-weight: 600;
    opacity: 1;
}
body #fp-nav.right .fp-tooltip {
    overflow: visible;
    right: 2.5rem;
    top: auto;
    bottom: 0;
    width: auto;
    font-family: "Noto Sans KR", sans-serif;
    font-size: inherit;
    color: inherit;
    line-height: 0;
}
body #fp-nav.right .on::before {
    height: 2.5rem;
}
body #fp-nav.right .on a span {
    opacity: 1;
    -webkit-transition: all 0.2s 0s;
    transition: all 0.2s 0s;
}
body .video {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,  -50%);
    transform: translate(-50%,  -50%);
    overflow: hidden;
    z-index: -1;
    width: 100%;
    padding-top: 56%}
body .video iframe, body .video video {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,  -50%);
    transform: translate(-50%,  -50%);
    width: 100%;
    height: 100%;
    border: 0 none;
}
body.active .video {
    width: auto;
    height: 100%;
    padding: 0 1000% 0 0;
}






.fp-tableCell {
    overflow: hidden;
    min-height: 100%;
    max-height: 100%}

.fp-viewing-1 #header #logo a::before, .fp-viewing-3 #header #logo a::before {
    height: 100%}
.fp-viewing-1 .language, .fp-viewing-1 #gnb>ul>li>a, .fp-viewing-1 #sitemap .open, .fp-viewing-3 .language, .fp-viewing-3 #gnb>ul>li>a, .fp-viewing-3 #sitemap .open {
    color: #fff;
}
.fp-viewing-1 #fp-nav.right, .fp-viewing-3 #fp-nav.right {
    color: #fff;
}
.fp-viewing-1 #fp-nav.right ul::before, .fp-viewing-1 #fp-nav.right li::before, .fp-viewing-3 #fp-nav.right ul::before, .fp-viewing-3 #fp-nav.right li::before {
    background-color: #162430;
}
.fp-viewing-1 #fp-nav.right span, .fp-viewing-3 #fp-nav.right span {
    background-color: #162430;
}
.fp-viewing-4 #header::after {
    background-color: #162430;
}
.fp-viewing-4 #header #logo a::before {
    height: 100%}
.fp-viewing-4 #gnb>ul>li>a {
    color: #222;
}
.fp-viewing-3 #footer {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: all 0.5s 0.2s;
    transition: all 0.5s 0.2s;
}



.section {
    z-index: 0;
    overflow: hidden;
}
.section .container {
    padding-top: 10rem;
}
.section .title {
    position: relative;
    z-index: 2;
    margin-bottom: 5rem;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.8;
}
.section .title strong {
    display: block;
    margin-bottom: 1rem;
    font-family: "Play";
    font-size: 7rem;
    font-weight: 700;
    line-height: 1.2;
}
.section .title span {
    opacity: 0.7;
}
.section .btn {
    display: inline-block;
    width: 19rem;
    height: 5rem;
    border: 1px solid #9e9e9e;
    font-size: 1.7rem;
    text-align: center;
    line-height: 4.8rem;
    vertical-align: top;
}
.section .txtbox {
    position: relative;
    z-index: 1;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.8;
}
.section .txtbox span {
    font-family: "Play";
    font-size: 3rem;
}
.section .txtbox strong {
    display: block;
    margin: 4rem 0 3rem;
    font-size: 5.6rem;
    line-height: 1.2;
}
.section .txtbox p {
    opacity: 0.7;
}
.section .txtbox .btn {
    margin-top: 7rem;
}
.section .control button {
    overflow: hidden;
    width: 6.5rem;
    height: 2.4rem;
    font-family: "xeicon";
    text-align: center;
    line-height: 2.4rem;
    display: none;
}
.section .control button::before {
    display: block;
    width: 100%;
    height: 100%;
    font-size: 2rem;
    content: "";
    line-height: initial;
}
.section .control .play::before {
    content: ''}
.section .control .active {
    display: block;
}



.fp-viewing-4{ height: auto !important; overflow: visible}
#footer{position: relative; height: auto !important;}
#footer .container{padding-top: 0}
#footer .fp-tableCell {
    height: auto !important;
}






#intro ul {
  display: flex;
  min-height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style-type: none;
  font-family: 'Binggrae';    
}

#intro li {
  display: flex;
  align-items: stretch;
  padding: 0px;
  cursor: pointer;
  transition: all 0.5s ease;
   
}
#intro li:hover {
  background: #e53f2e;
}
#intro li.active {
  flex:22;
  background: #fff;
  cursor: default;
}
#intro li.active h2 {
  color: #E74C3C;
}
#intro li.active .section-content {
  flex:22;
  opacity: 1;
  transform: scaleX(1);
  color: #E74C3C;
    display: flex;
    align-items: center
}

#intro li .section-title {
  position: relative; display: block; width: 40px; font-weight: 500;
}
#intro li .section-title h2 {
  color: #fff;
    position: absolute;
    bottom: 35px;
    left: 50%;
    transform: rotate(-90deg);
    margin-left: -10px;
  white-space: nowrap;
}

#intro li .section-content {
  display: block;
  margin: 0;
  padding: 0;
  opacity: 0;
  transition: all 0.25s 0.1s ease-out;
  display: none; 
  width: 0;
  overflow: hidden;
}

#intro li.active .section-title{display: none}

#intro li .section-content h2{font-size: 64px; font-weight: 900; line-height: 75px; font-family: 'Binggrae'; color: #521217; margin: 0}

#intro li .section-content h1{font-size: 96px; font-weight: 900; line-height: 105px; font-family: 'Binggrae'; color: #521217; margin: 0}

#intro li .section-content h3{font-size: 72px; font-weight: 900; line-height: 85px; font-family: 'Binggrae'; color: #521217; margin: 0}

#intro li .section-content p{font-size: 30px; font-weight: 600; line-height: 45px; margin-top: 50px}

#intro li .section-content .inner{max-width: 100%;}
#intro li .section-content .inner .bannerbg{position: absolute; right: 10%; top: 50%; transform: translateY(-50%)}
.bannertitle{position: absolute; left: 10% ;z-index: 2; top: 50%; transform: translateY(-50%); letter-spacing: -1px}

.plusblock1{position: absolute; z-index: 2; bottom: -100px; left: 10%; 
    animation: motion1 0.5s linear 0s infinite alternate; }

@keyframes motion1 {
	0% {transform: translateY(0)}
	100% {transform: translateY(-20px)}
}

.plusblock2{position: absolute; z-index: 2; top: 150px; left: 0px; 
    animation: motion2 0.5s linear 0s infinite alternate; }

@keyframes motion2 {
	0% {transform: translateY(0)}
	100% {transform: translateY(-20px)}
}


.plusblock3{position: absolute; z-index: 2; top: 80px; right: 100px; 
    animation: motion3 0.5s linear 0s infinite alternate; }

@keyframes motion3 {
	0% {transform: translateY(0)}
	100% {transform: translateY(-20px)}
}


.plusblock4{position: absolute; z-index: 2; bottom: -130px; right: 50px; 
    animation: motion4 0.5s linear 0s infinite alternate; }

@keyframes motion4 {
	0% {transform: translateY(0)}
	100% {transform: translateY(-20px)}
}


#cube{background-size: cover !important}
#cube h1{font-family: 'Binggrae'; margin: 0; font-weight: 900; color: #3dbff1; font-size: 63px; line-height: 70px; letter-spacing: -1px}
#cube h2{font-family: 'Binggrae'; font-weight: 900; color: #3dbff1; font-size: 32px; line-height: 40px; margin-top: 15px; letter-spacing: -1px}
#cube p{font-family: 'Gmarket Sans'; margin: 30px 0; color: #606060; font-size: 20px; line-height: 30px; letter-spacing: -1px}
#cube a{display: inline-block; margin: 0; color: #999999; border-bottom: 1px solid #999999; line-height: 16px; font-size: 14px; }
#cube a:hover{transition-duration: 0.5s; color: #222}
.step3{margin-top: 70px; }
.step3 .step{font-size: 20px; padding: 10px 20px; font-size: 20px; color: #606060; line-height: 32px; font-weight: 600; border:2px dashed #606060; margin: 15px 0; display: table; border-radius: 30px}

.cubeitem{position: absolute; top: 60%; right: 0; transform: translateY(-50%); animation: motion5 0.5s linear 0s infinite alternate; }

#cube h1, #cube h2, #cube a, #cube p{opacity: 0}
#cube.active h2{opacity: 1; transition-duration: 2s; transition-delay: 1s}
#cube.active h1{opacity: 1; transition-duration: 2s; transition-delay: 0.5s}
#cube.active p{opacity: 1; transition-duration: 2s; transition-delay: 1.5s}
#cube.active a{opacity: 1; transition-duration: 2s; transition-delay: 1.5s}

#cube .step3 .step{opacity: 0}
#cube.active .step3 .step:nth-child(1){opacity: 1; transition-duration: 2s; transition-delay: 0.5s}
#cube.active .step3 .step:nth-child(2){opacity: 1; transition-duration: 2s; transition-delay: 1s}
#cube.active .step3 .step:nth-child(3){opacity: 1; transition-duration: 2s; transition-delay: 1.5s}


@keyframes motion5 {
	0% {top: 60%}
	100% {top: 61%}
}


.plusblock6{position: absolute; z-index: 2; top: 100px; left: -160px; 
    animation: motion6 0.5s linear 0s infinite alternate; }

@keyframes motion6 {
	0% {transform: translateY(0)}
	100% {transform: translateY(-20px)}
}


.fp-viewing-1 #header>ul>li>a{color: #000}
.fp-viewing-1 #header .menu ul li > a{color: #000}
.fp-viewing-1 #header .logo{background: url(../img/common/header_logob.png); background-repeat: no-repeat;}
.fp-viewing-1 #header .logo img{opacity: 0}

.fp-viewing-2 #header>ul>li>a{color: #000}
.fp-viewing-2 #header .menu ul li > a{color: #000}
.fp-viewing-2 #header .logo{background: url(../img/common/header_logob.png); background-repeat: no-repeat;}
.fp-viewing-2 #header .logo img{opacity: 0}


.fp-viewing-3 #header>ul>li>a{color: #000}
.fp-viewing-3 #header .menu ul li > a{color: #000}
.fp-viewing-3 #header .logo{background: url(../img/common/header_logob.png); background-repeat: no-repeat;}
.fp-viewing-3 #header .logo img{opacity: 0}

.fp-viewing-4 #header>ul>li>a{color: rgba(0,0,0,0.0)}
.fp-viewing-4 #header .menu ul li > a{color: rgba(0,0,0,0.0)}
.fp-viewing-4 #header .logo img{opacity: 0}

#four{}

#four .title{text-align: center; opacity: 0}
#four.active .title{text-align: center; opacity: 1; transition-duration: 2s; transition-delay: 0.5s}

#four .title p{font-family: 'Gmarket Sans'; font-size: 20px; line-height: 32px; font-weight: 200; color: #606060; margin-top: 30px;}
#four .title a{display: inline-block; margin: 40px auto 0 auto; color: #999999; border-bottom: 1px solid #999999; line-height: 25px; font-size: 20px; }
#four .title a:hover{transition-duration: 0.5s; color: #222}

.fourtip{max-width: 1280px; margin: 65px auto 0 auto}
.fourtip ul {display: flex; flex-wrap: wrap;
    align-items: center;}
.fourtip ul li{flex: 1; margin: 0 20px; text-align: center;border-radius: 30px; padding: 30px; ; opacity: 0}
.fourtip ul li h2{color: #fff; font-weight: 600; font-size: 25px; line-height: 30px; text-transform: uppercase}
.fourtip ul li p{color: #fff; font-weight: 600; font-size: 17px; line-height: 22px; margin-top: 10px; margin-bottom: 30px}

.fourtip ul li:nth-child(1){margin-top: 45px}
.fourtip ul li:nth-child(3){margin-top: 70px}
.fourtip ul li:nth-child(4){margin-top: 18px}

#four.active .fourtip ul li:nth-child(1){opacity: 1; transition-duration: 2s; transition-delay: 0.5s}
#four.active .fourtip ul li:nth-child(2){opacity: 1; transition-duration: 2s; transition-delay: 1s}
#four.active .fourtip ul li:nth-child(3){opacity: 1; transition-duration: 2s; transition-delay: 1.5s}
#four.active .fourtip ul li:nth-child(4){opacity: 1; transition-duration: 2s; transition-delay: 2s}

#video{}
#video .inner{max-width: 1280px; margin: 0 auto; position: relative}
.right_tab{    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%)}
.right_tab h2{margin-bottom: 50px;color: #90d143; letter-spacing: -1px; font-size: 63px; line-height: 75px; font-weight: 900 ;    font-family: 'Binggrae';}
#video ul.tabs{
	margin: 0px;
	padding: 0px;
	list-style: none;
}
#video ul.tabs li{
	background: none;
	color: #606060;
	display: block;
	padding: 15px 0;
	cursor: pointer;
    font-size: 18px; line-height: 32px;
}
#video ul.tabs li p{font-size: 18px; line-height: 32px; margin-left: 8px}
#video ul.tabs li img{margin-bottom: 10px;display: block; border:8px solid #fff}




#video ul.tabs li.current img{
 border: 8px solid #90d143
   
}

#video ul.tabs li:last-child.current img{
 border: 8px solid #42b8e7
   
}



#video ul.tabs li:hover img{
 border: 8px solid #90d143
   
}

#video ul.tabs li:last-child:hover img{
 border: 8px solid #42b8e7
   
}


#video .tab-content{
	display: none;
	width: 65%
}

#video .tab-content.current{
	display: inherit;
}




.youtube {
  width: 100%;
  max-width: 900px;
  border-radius: 30px;
  padding: 0px;
}
 
.video-container {
  position: relative;
  width: 100%;
  height: auto;
    min-height: 210px;
  padding-top: 50%;
}
 
iframe {
  position: absolute;
    z-index: 0;
    width: 100% !important;
    height: 100% !important;
    top: 0px;
    left: 0px;
    overflow: hidden;
    opacity: 1;
    user-select: none;
    margin-top: 0 !important;
    margin-left: 0 !important;
    max-width: initial;
}









#footer {
    min-height:240px;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #373739;
    font-size: 1.3rem;
    color: #aaa;
    line-height: 10rem;
    -webkit-transition: all 0.3s 0s;
    transition: all 0.3s 0s;
    padding: 40px 0;
}
#footer ul { display: flex; align-items: center;
    justify-content: space-between; margin: 0; padding: 0; list-style: none;}
#footer ul li{margin: 0; padding: 0; list-style: none;}
#footer ul li h2{font-size: 16px; margin-bottom: 16px; font-weight: bold; color:#a2a2a2; letter-spacing: -1px;line-height: 22px; }
#footer ul li h3{font-size: 16px; margin-bottom: 5px; font-weight: bold; color:#a2a2a2; letter-spacing: -1px;line-height: 22px; font-family: 'Binggrae'; }
#footer ul li h1{font-size: 32px; margin-bottom: 20px; font-weight: bold; color:#fff; letter-spacing: -1px;line-height: 45px; font-family: 'Binggrae'; }
#footer ul li:last-child{border-left:2px solid #4e4e50; padding: 0 50px;}

#footer ul li p{font-size: 16px; line-height: 22px; letter-spacing: -1px; color: #a2a2a2; font-weight: 200}
#footer ul li p span{font-size: 14px; line-height: 20px; letter-spacing: -1px; color: #a2a2a2; display: block}
#footer ul li p.bing{font-family: 'Binggrae'; font-weight: bold;}



.rightnav{position: fixed; right: 70px; top: 50%; transform: translateY(-50%); min-width: 170px}
.rightnav .n1{background: #b2b2b2; padding: 8px; border-radius: 50px; display: table; margin: 5px 0; position: relative}
.rightnav .n1 a p{display: none; margin-left: 0px; font-size: 15px; line-height: 18px; color: #fff; vertical-align: middle}
.rightnav .n1:hover{padding-right: 15px; transition-duration: 0.5s}
.rightnav .n1:hover a p{display: inline-block; margin-left: 5px; }
.rightnav .sns{text-align: center; margin-left: 10px; margin-top: 20px}
.rightnav .sns img{display: block; margin: 10px 0;}

.rightnav .n2{background: #b2b2b2; padding: 25px; border-radius: 50px; display: table; margin: 5px 0; position: relative; left: -18px}
.rightnav .n2 a p{display: none; margin-left: 0px; font-size: 15px; line-height: 18px; color: #fff; vertical-align: middle}
.rightnav .n2:hover{padding-right: 15px; transition-duration: 0.5s}
.rightnav .n2:hover a p{display: inline-block; margin-left: 5px; }


.topshop{position: fixed; z-index: 9999; right: 150px; top: 25%; transform: translateY(-50%);}

.mini{position: absolute; left: -18px; top: -10px}

.pop-layer{overflow: hidden;
   border-radius: 30px; padding-top: 50px}
.pop-layer .pop-container {
  padding: 0; text-align: center; }



.pop-layer .pop-container h2{font-size:24px; line-height: 35px; color: #222; font-family: 'Gmarket Sans';  margin-bottom:40px;  }


.pop-layer .btn-r {
  width: 100%;
  text-align: center;
  margin-top:30px; 
    padding: 14px 0;
    background: #a9a9ac;
}
.pop-layer .btn-r a{display: block; font-family: 'Gmarket Sans'; color: #fff; font-size: 16px; line-height: 22px;}

.pop-layer {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: auto;
  background-color: #fff;
  z-index: 10;
}

.dim-layer {
  display: none;
  position: fixed;
  _position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

.dim-layer .dimBg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .6;
  filter: alpha(opacity=50);
}

.dim-layer .pop-layer {
  display: block;
}



.app{}
.app a{padding: 10px 0; border-bottom: 1px dashed #dfdfdf; display: inline-block;}

@media (max-width: 1500px) {
    html {
    font-size: 8px;
}
#header .container {
    padding-left: 8rem;
}
#header .language {
    right: 5rem;
}
#gnb>ul>li>a {
    padding: 0 4.5rem;
}
#gnb .sub {
    font-size: 1.5rem;
}
#sitemap .sitemap>div>ul>li>a {
    width: 18rem;
}
#sitemap .close {
    right: 2rem;
}
#product .product {
    padding-right: 0;
}
}@media (max-width: 1024px) {
    html {
    font-size: 6px;
}
body #fp-nav.right {
    display: none;
}
.section .container {
    max-width: calc(100% - 4rem);
}
#company .fp-tableCell::before {
    background-position: right 0;
}
#career .img {
    margin-top: 10rem;
}
}@media (max-width: 768px) {
	
	#header{position: absolute}
	
    #gnb {
    display: none;
}


#sitemap .sitemap>div {
    padding-top: 12rem;
}
#sitemap .sitemap>div>ul>li {
    height: auto;
}
#sitemap .sitemap>div>ul>li>a {
    display: block;
    float: none;
    width: 100%}
#sitemap .sitemap>div>ul>li.active .sub {
    top: 0;
    height: auto;
    padding: 0.5rem 0 2rem;
}
#sitemap .sitemap>div .sub {
    overflow: hidden;
    float: none;
    left: 0;
    top: 2rem;
    width: 100%;
    height: 0;
    -webkit-transition: all 0.2s 0s;
    transition: all 0.2s 0s;
}
#sitemap .sitemap>div .sub li {
    display: block;
    margin: 0;
    line-height: 6rem;
}
.section:nth-child(n+2), .section:nth-child(n+2) .fp-tableCell {
    height: auto !important;
}
.section:nth-child(n+2) .container {
    overflow: hidden;
    padding: 10rem 3rem !important;
}
#intro .control {
    left: 15rem;
    top: auto;
    bottom: 2rem;
    -webkit-transform: translate(0);
    transform: translate(0);
}
#intro .slick-dots {
    left: 1rem;
    top: auto;
    bottom: 1rem;
    -webkit-transform: translate(0);
    transform: translate(0);
}
#intro .slick-dots li {
    display: inline;
}
#intro .intro1 strong {
    font-size: 4.5rem;
}
#intro .intro1 .img>div {
    width: 15rem;
    height: 15rem;
}
#technology .fp-tableCell {
    padding-top: 40%}
#technology .fp-tableCell::before {
    max-width: 100%;
    background-size: 100% auto;
}
#product .fp-tableCell::before {
    left: 0;
    right: auto;
    top: 21.5rem;
    width: calc(100% - 65rem);
    min-width: 0;
    height: calc(100% - 21.5rem);
    background-size: 100% auto !important;
}
#product .product {
    float: none;
    width: 100%;
    padding-left: 0;
}
#product .product-nav {
    margin-bottom: 10rem;
    background-color: #fff;
}
#product .product-for {
    float: right;
    width: 60rem;
}
#career .container {
    margin-bottom: 0;
}
#career .img {
    right: 0;
}
#footer {
    position: static;
    line-height: 2;
    -webkit-transform: translate(0) !important;
    transform: translate(0) !important;
}
#footer .menu {
    padding: 1rem 0;
}

#footer .siteinfo {
    padding: 1rem 0;
}
#footer .siteinfo strong::before {
    display: block;
    width: 100%;
    height: 0;
    content: ''}
#footer .siteinfo p {
    float: none;
    margin-top: 0.5rem;
}
}@media (max-width: 570px) {
    .section .txtbox strong {
    margin: 2rem 0 1.5rem;
    font-size: 4rem;
}
.section .txtbox .btn {
    margin-top: 3rem;
}
.section .title strong {
    font-size: 4.5rem;
}
#intro .intro1 .img {
    width: 100%}
    
#product .fp-tableCell::before {
    top: 28rem;
    width: 100%;
    height: 50rem;
    background-size: auto 100% !important;
}
#product .product-for strong {
    font-size: 4rem;
}
#product .product-nav {
    margin-bottom: 48rem;
    font-size: 1.3rem;
}
#product .product-nav .slick-slide {

}
#product .product-nav .slick-slide:nth-child(2n+1) {
    border-left: 1px solid #9e9e9e;
}
#product .product-nav .slick-slide:nth-child(n+3) {
    margin-top: -1px;
}
#product .product-nav button {
    padding: 2px;
    word-break: break-all
}
#product .product-for {
    width: 40rem;
    max-width: 100%;
    margin: 0 auto;
}
#technology .fp-tableCell {
    vertical-align: middle;
}
#technology .container {
    padding: 10rem 0 0;
}
#company .fp-tableCell::before {
    right: auto;
    left: 0;
    width: calc(100% - 55rem);
    min-width: 20rem;
}
#company .company {
    width: 60rem;
    max-width: calc(100% - 10rem);
}
#career .img {
    right: -2rem;
    max-width: calc(100% - 30rem);
}
}




@media (max-width: 1545px) {
    #gnb .sub li{padding: 10px 3px}
	#gnb>ul>li>a{    padding: 0 2.5rem; font-size: 1.5rem }
}

@media (max-width: 1500px) {
    #gnb {
    display: inline-block;
    position: relative;
    z-index: 2;
    vertical-align: top;
    max-width: 1350px;
    width: 100%;
    padding: 0 10rem;}
    #gnb>ul>li{width: 25%}

    .fp-viewing-3 #footer{display: none}
}

@media (max-width: 1250px) {
	#gnb{width: 85%}
	#gnb>ul>li>a{padding: 0 5px; }
	
}


@media (max-width: 800px){
	#intro .intro1 .text{left: 10%; bottom: 40%}
	#header #logo a{top: 2.0rem}


	.fp-viewing-3 #footer{display: block}
	#footer .container{width: 100%; }
	#footer .siteinfo{float: none; text-align: center; width: 100%}
	#footer .siteinfo p{text-align: center}
	#footer .siteinfo .copy{text-align: center}
	#footer .siteinfo{padding: 3.0rem}
	#sitemap .sitemap>div>ul{flex-direction: column;     padding: 5rem;}
	#sitemap .sitemap>div .sub li{line-height: 6rem;}
}




@media (max-width: 500px){
	.container{width: 100%}
	#gnb{display: none;}
	.rightmenu{top: 80%; width: 60px}
	#intro .intro1 .text {
    left: 0;
    bottom: 40%;
    padding: 0 5rem;}
    #intro .slick-dots{bottom: 2.5rem}
    
    .value h1{font-size: 40px;
    line-height: 45px;}
    
    .value h2{margin-top: 25px;
    font-size: 25px;
    font-weight: bold;
    color: #fff;
    line-height: 35px;}
    .value p{opacity: 0.8}


    .value{background-size: cover}
    .process .bg{background: transparent;}
    .sixprocess ul li{padding: 5.0rem}
    
    .pplo h1{font-size: 40px;
    line-height: 45px;}
    
    .pplo h2{margin-top: 25px;
    font-size: 25px;
    font-weight: bold;
    color: #fff;
    line-height: 35px;}
    .pplo p{opacity: 0.8}
    .menuline{display: none}
    #sitemap .sitemap>div .sub li{font-size:18px;}
}