/*-------------------------------------------------
Author : PARK SEOJIN
Create date : 2017. 11. 16
-------------------------------------------------*/

@-webkit-keyframes down {
  0% { bottom: 15px; }
  50% { bottom: 25px; }
  100% { bottom: 15px; }
}
@keyframes down {
  0% { bottom: 15px; }
  50% { bottom: 25px; }
  100% { bottom: 15px; }
 }
 .section {margin-top:0}
 .arrow { position: absolute; bottom: 25px; left: 50%; color: #fff; font-size: 0.938em; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 62; text-align:center; opacity:1; -webkit-animation: down 0.75s ease infinite; animation: down 0.75s ease infinite; transition:opacity .2s}
 .arrow i {display:block; font-size:1.6em}
 .fp-viewing-secondPage #visualWrap > .arrow, .fp-viewing-3rdPage #visualWrap > .arrow, .fp-viewing-4rdPage #visualWrap > .arrow {opacity:0}
 .fp-viewing-3rdPage #section1 .arrow,
 .fp-viewing-4rdPage #section2 .arrow {opacity:0}

#visualWrap{position:fixed; top:0; left:0; width:100% !important; /*height:100vh*/}
#fullpage {position:absolute !important; left:0; top:0; width:100%}
.fp-viewing-firstPage #visualWrap{position:inherit;}


.visual li {position:relative;width:100% !important; height: 100vh; background-position:center; background-repeat:no-repeat; background-size:cover;  transition:transform 2s ease-in-out; overflow:hidden}
.visual li:first-child {background-image:url('../images/visual-03.jpg')}
.visual li:nth-child(2) {background-image:url('../images/visual-02.jpg')}
.visual li:nth-child(3) {background-image:url('../images/visual-04.jpg')}
.visual li:nth-child(4) {background-image:url('../images/visual-01.jpg')}
.visual .txt {position:absolute; left:0; top:60%; transform:translateY(-50%);  color:#fff; z-index:60; transition:top .8s ease-in-out;opacity:1; }
.visual .txt h2 {text-transform:uppercase; font-family: '思源黑体'/*, cursive*/; font-size:2.750em;}
.visual .txt h2 span {display:block; padding:66px 0 0 15px; background:url('../../images/korean/main/typo.png') left top no-repeat; opacity:0; transition:opacity .8s ease-in-out; transition-delay:.4s}
.visual .txt h2 em {display:block; margin-left:38px; font-size:0.75em; margin-top:10px; line-height:.7; opacity:0; transition:opacity 1s ease-in-out; transition-delay:1.4s}
.visual .txt p {position:relative; padding-top:21px; margin:48px 0 30px 38px; font-size:1.3em; opacity:0; transition:opacity .8s ease-in-out; transition-delay:2.2s;white-space:normal !important;}
.visual .txt p:before {position:absolute; top:0; left:0; width:20px; height:4px; background:#fff; content:''}
.visual .txt > span {margin-left:38px; opacity:0; transition:opacity .8s ease-in-out; transition-delay:2.2s}
.visual .txt a {display:inline-block; padding:9px 17px 9px 16px; border:1px solid #c9cbd1; color:#fff; border-radius:4px; font-size:0.938em; transition:all .4s ease-in-out;}
.visual .txt a:hover, .visual .txt a:focus {background:#fff; color:#333}
.visual li img {width:100%; height:100%;}

.visual li.active .txt {top:50%;}
.visual li.active .txt h2 span,
.visual li.active .txt h2 em,
.visual li.active .txt p,
.visual li.active .txt > span {opacity:1}

/* visual controls */
#visualWrap .bx-controls {position:absolute; left:7%; top:80%; z-index:51;}
#visualWrap .bx-controls a {display:inline-block; color:#fff}
#visualWrap .bx-pager {display:inline-block;}
#visualWrap .bx-pager .bx-pager-item {display:inline-block; margin-left:8px;}
#visualWrap .bx-pager .bx-pager-item:first-child {margin-left:0}
#visualWrap .bx-pager .bx-pager-item a {width:12px; height:12px; border:1px solid #fff; border-radius:50%; text-indent:-9999px; transition:background .4s; vertical-align:middle}
#visualWrap .bx-pager .bx-pager-item a:hover, #visualWrap .bx-pager .bx-pager-item a:focus, #visualWrap .bx-pager .bx-pager-item a.active {background:#fff}
#visualWrap .bx-controls-auto {/*display:inline-block;*/ margin-left:12px; display:none;} /*xi-pause*/
#visualWrap .bx-controls-auto a {vertical-align:middle}
#visualWrap .bx-controls-auto a:before {font-family:'xeicon'; content:'\ea3b'}
#visualWrap .bx-controls-auto a.bx-start:before {content:'\ea3e'}

.fp-viewing-secondPage .visual .txt, .fp-viewing-3rdPage .visual .txt, .fp-viewing-4rdPage .visual .txt,
.fp-viewing-secondPage .visual li.active .txt, .fp-viewing-3rdPage .visual li.active .txt, .fp-viewing-4rdPage .visual li.active .txt,
.fp-viewing-secondPage .bx-controls, .fp-viewing-3rdPage .bx-controls, .fp-viewing-4rdPage .bx-controls {opacity:0}
.fp-viewing-secondPage #fullpage, .fp-viewing-3rdPage #fullpage, .fp-viewing-4rdPage #fullpage {z-index:60}
.fp-viewing-secondPage #visualWrap:after, .fp-viewing-3rdPage #visualWrap:after, .fp-viewing-4rdPage #visualWrap:after {position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:.25; z-index:60; content:''}
.fp-viewing-secondPage .visual li img, .fp-viewing-3rdPage .visual li img, .fp-viewing-4rdPage .visual li img {filter:blur(5px)} 

/* section1 */
.fp-viewing-secondPage #section1 .fp-tableCell {height:calc(100% - 80px) !important; top:80px}
#section1 {position:relative;}
#section1 .main-content {position:absolute;/* top:45%; transform:translateY(-50%);*/ width:100%; height:100%; color:#fff; text-align:center}
#section1 .main-content > div {/*position:relative; left:50%; top:50%; right:50%; transform:translate(-50%, -50%);*/ width:100%; padding-top:5%;}
#section1 h2 {font-weight:200; font-size:1em}
#section1 h2 span {display:block; text-transform:uppercase;font-size:3em; font-weight:400;}
#section1 h2 em{ font-size:30px;}
#section1 .notice {/*position:relative; left:50%; transform:translateX(-50%); */width:1320px ; margin:0 auto;}
#section1 .more {position:absolute; top:0; right:0; color:#fff; font-size:0.875em}
#section1 .more span {display:inline-block; vertical-align:middle}
#section1 .more i {font-size:0.8em; margin-left:5px; vertical-align:middle; transition:transform .4s}
#section1 .more:hover i {transform:rotate(90deg);}
#section1 li a {position:relative; display:inline-block; width:100%; color:#fff}
#section1 ul {width:1320px; margin:43px auto 0; /*padding-top:34px*/}
#section1 li {display:inline-block;  /*height:430px; width: 15%;*//*height: 150px;*/
width:15%;margin-left: 1.1%; vertical-align:middle; position:relative;}
#section1 li:first-child {margin-left:0}
#section1 h3 {height:16px}
#section1 li .img {display:block; width:100%; height:430px;}
#section1 li .img img { width:100%; height:100%;}
#section1 .txt {/*margin-top:-6px;*/ width:100%;padding:20px 0; background:rgba(0,0,0,.4); position:absolute; bottom:0; left:0;/*height:250px*/}
#section1 .title {display:block; /*height:42px;*/ font-weight:600; font-size:1.2em;}
#section1 .txt p {padding-top:12px; font-size:0.938em; color:#c6c6c6}
#section1 .date {display:block; position:relative; padding-top:12px; margin-top:20px;}
#section1 .date::before {position:absolute; top:0; left:50%; transform:translateX(-50%); width:10px; height:1px; background:#fff; content:''}
#section1 li a.new::before {position:absolute; top:0; left:0; width:0; height:0; border-top:45px solid #aa095c; border-right:45px solid transparent; content:''; z-index:10}
#section1 li a.new::after {position:absolute; left:8px; top:0px; content:'N'; color:#fff; z-index:10}
#section1 li a .line {position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; transition:transform .4s ease-out .2s,opacity .4s ease-out;
 -ms-transition:-ms-transform .4s ease-out .2s,opacity .4s ease-out;}
#section1 li a .line1 {border-top:3px solid #efefef; border-bottom:3px solid #efefef; transform:scale(0,1); -ms-transform:scale(0,1)}
#section1 li a .line2 {border-left:3px solid #efefef; border-right:3px solid #efefef; transform:scale(1,0); -ms-transform:scale(1,0)}
#section1 li a:hover .line{transform:scale(1,1); -webkit-transform:scale(1,1); -moz-transform:scale(1,1); opacity:1}

/* section2 */
.fp-viewing-3rdPage #section2 .fp-tableCell {height:calc(100% - 80px) !important; top:80px}
#section2 {position:relative;}
#section2 .main-content {position:absolute; /*top:50%; transform:translateY(-50%); */width:100%; height:100%; color:#fff; text-align:center}
#section2 .main-content > div {/*position:relative; left:50%; top:50%; right:50%;transform:translate(-50%, -50%);*/ width:100%; padding-top:5%;}
#section2 h2 {font-weight:200; font-size:1em}
#section2 h2 span {display:block; margin-bottom:0; text-transform:uppercase; font-size:3em; font-weight:400;}
#section2 h2 em{ font-size:30px;}
#section2 a {display:inline-block; width:100%; color:#fff}
#section2 ul {width:1320px; margin:auto; /*padding-top:77px;*/padding-top:43px;}
#section2 .ul1{display:block;}
#section2 li {display:inline-block; width:22%; margin-left:3%}
#section2 li:first-child {margin-left:0}
#section2 h3 {height:16px}
#section2 li .img {display:block; width:100%; height:180px; background:url('../images/cate-img01.jpg') center/cover no-repeat}
#section2 li .img.img02 {background-image:url('../images/cate-img02.jpg')}
#section2 li .img.img03 {background-image:url('../images/cate-img03.jpg')}
#section2 li .img.img04 {background-image:url('../images/cate-img04.jpg')}
#section2 .txt {padding:35px 0 40px; background:rgba(0,0,0,.6)}
#section2 .txt p {padding:25px 20px 38px; font-size:0.938em; color:#c6c6c6}
#section2 .txt span {display:inline-block; padding:6px 0; width:40%; border:1px solid #fff; border-radius:4px; font-size:0.938em; color:#fff; transition:all .4s}
#section2 li a:hover .txt span {background:#fff; border-color:#fff; color:#000}
#section2 li.active a:hover .txt span {color:#fff;}
#section2 li.active .txt span, #section2 li.active a:hover .txt span {background:none; opacity:.6}
#section2 .product{ display:none;}
#section2 .product ul li{ float:left; width:45% !important; margin: 1% 2.5%; height:180px !important;}
#section2 .product ul li .img{ width:100%; margin-bottom:15px;}
#section2 .product ul li .txt {padding:20px 0; background:rgba(0,0,0,.3)}
#section2 .product ul li .txt p {padding:25px 0 38px; font-size:0.938em; color:#c6c6c6;}
#section2 .product ul li .txt span {display:inline-block; padding:6px 0; width:60%; border:1px solid #fff; border-radius:4px; font-size:0.938em; color:#fff; transition:all .4s}
#section2 .product ul li a:hover .txt span {background:#fff; border-color:#fff; color:#000}
#section2 .product ul li.active a:hover .txt span {color:#fff;}
#section2 .product ul li.active .txt span, #section2 li.active a:hover .txt span {background:none; opacity:.6}

/* section4 */
.fp-viewing-3rdPage #section4 .fp-tableCell {height:calc(100% - 80px) !important; top:80px}
#section4 {position:relative;}
#section4 .main-content {/*position:absolute; top:50%; transform:translateY(-50%);*/ width:100%; height:100%; color:#fff; text-align:center; position:relative;}
#section4 .main-content > div {/*position:relative; left:50%; top:50%; transform:translate(-50%, -50%); */width:100%; padding-top:8%;}
#section4 h2 {font-weight:200; font-size:1em}
#section4 h2 span {display:block; margin-bottom:0; text-transform:uppercase;font-size:3em; font-weight:400;}
#section4 h2 em{ font-size:30px;}
#section4 a {/*display:inline-block;*/ width:100%; color:#fff}
#section4 ul {width:1320px; margin:auto; /*padding-top:70px;*/padding-top:50px;}
#section4 ul p{ height:auto; overflow:hidden; line-height:30px;text-align: left; text-indent: 2em;}
#section4 li {display:inline-block; width:22.5%;margin: 0 1%; /*margin-left:3%;*/ position:relative; /*margin-top:4%;*/margin-top:2%;}
#section4 .active{margin-left:0;}
#section4 li:first-child {margin-left:0}
#section4 li .img {display:block; width:100%; overflow:hidden;}
#section4 li .img img{transform: scale(1,1);transition-duration: 0.5s;}
#section4 li .img img:hover{ transform:scale(1.1,1.1); transition-duration:0.5s;}
#section4 .tit{background:rgba(0,0,0,.7); position:absolute; bottom:0; left:0; color:#fff; height:50px; line-height:50px; width:100%; text-align:center;}
#section4 a{color:#fff;}
#section4 .nr{width:70%; margin:0 auto;}
#section4 .more{display: block;margin: 20px auto; width: 120px; height:34px; line-height:34px;border: 1px solid #fff;text-align: center; font-size: 14px;}
#section4 .more:hover{background:#fff;border-color:#fff;color:#000;}
#section4 .footer{text-align:center; line-height:50px; background:#fff; width:100%; color:#919191;font-size: 0.875em; position:absolute;left:0; bottom:0;}


.section .top {display:none}


@media (max-width: 1800px){
  .visual .txt h2 {font-size:1.2em}
  .visual .txt h2 em {font-size:1.9em}
  .visual .txt p {font-size:1.3em;}
  #section4 .nr{width:82%; margin:0 auto;}
}
@media (max-width: 1440px)
{
  #section1 .main-content > div {padding-top:2%;}
  #section1 ul {margin:20px auto 0; /*padding-top:34px*/}
  #section1 li {width:15%;}
  #section2 .main-content > div {padding-top:2%;}
  #section2 ul {padding-top:20px;}
  #section4 .main-content > div {padding-top:7%;}
  #section4 ul {padding-top:20px;}
  #section4 li {margin-top:1%;}
  .visual .txt h2 em {font-size:1.5em}
  .visual .txt p {font-size:1.3em;}
  #section1 .notice {width:95%}
  #section1 ul, #section2 ul {width:100%}
  .visual li img {width:auto; /*left:50%; margin-left:-50%;*/}
  #section1 ul, #section4 ul {width:100%}
  #section4 .nr{width:100%; margin:0 auto;}
 }
@media(max-width:1254px){
  <!--#section1 li:nth-child(n+3) { display:none;}-->
   .visual .txt h2 em {font-size:1.5em}
  .visual .txt p {font-size:1.3em;}
  #section1 li {width:15%;}
  #section1 .txt { padding:10px 0; width:100%;}
  #section1 .title{ font-size:16px;}
  #section4 .nr{width:100%; margin:0 auto;}
}
@media (max-width: 1025px)
{
  .visual .txt > span {display:none}
  .visual .txt h2 {font-size:1.5em; width:60%; margin:auto}
  .visual .txt h2 em {font-size:1em; line-height:0.9;}
  .visual .txt p {font-size:1em;}
  .visual li img {display:none}
  #nav > ul > li > a {font-size:.8em}
  .fp-viewing-firstPage #visualWrap {position:fixed;}
  .section {height:100vh}
  .visual .txt {/*left:50%; transform:translate(-50%, -50%);*/ width:100%; text-align:center; transition:opacity .8s ease-in-out}
  .visual .txt h2 span {padding-left:0; background-position:40% 0}
  .visual .txt h2 em, .visual .txt > span {margin-left:0}
  .visual .txt p {margin: 48px 0 30px 0;}
  .visual .txt p:before, #visualWrap .bx-controls {left:50%; transform:translateX(-50%);}
  #section1 .main-content {/*top:50%*/}
  #section1 ul {margin-top:0}
  #section1 .main-content > div, #section2 .main-content > div {height:100%; margin:2% 0;}
  #section1 h2 span, #section2 h2 span {margin-bottom:0}
  #section1 h2 em, #section2 h2 em { display:block;}
  #section1 li .img {display:block; width:100%; height:320px;}
  #section1 .txt {padding:10px 0;}
  #section1 .title {font-weight:200; font-size:1.1em;}
  #section2 .sub-company {width:90%; margin:20px auto 0}
  #section2 .sub-company .bx-wrapper {max-width: 100% !important;}
  #section2 ul {padding:0 0 80px 0}
  #section2 li {margin-left:0}
  #section2 .bx-controls {position:absolute; left:50%; top:0; transform:translateX(-50%); z-index:51;}
  #section2 .bx-controls a {display:inline-block; color:#fff}
  #section2 .bx-pager {display:inline-block;}
  #section2 .bx-pager .bx-pager-item {display:inline-block; margin-left:8px;}
  #section2 .bx-pager .bx-pager-item:first-child {margin-left:0}
  #section2 .bx-pager .bx-pager-item a {width:12px; height:12px; border:1px solid #fff; border-radius:50%; text-indent:-9999px; transition:background .4s; vertical-align:middle}
  #section4 .sub-company {width:90%; margin:0 auto;}
  #section4 .sub-company .bx-wrapper {max-width: 100% !important;}
  #section4 li {display:inline-block; width:22%; /*margin-left:3%;*/ position:relative; margin-top:3%;}
  #section4 .nr{width:96%; margin:0 auto;}
  /*.fp-viewing-4rdPage #section2 .main-content {top:0}*/
}
@media(max-width:878px){
  .visual .txt h2 em {font-size:1em;line-height:1em;}
  .visual .txt p {font-size:0.78em;}
  #section1 li {width:24%;}
  #section1 li .img {display:block; width:100%; /*height:350px;*/}
  #section2 .sub-company .bx-wrapper {max-width: 100% !important;}
  #section2 li .img {display:block; width:100%; height:90px;}
  .visual .txt h2 {width:60%}
  #section4 .nr{width:96%; margin:0 auto;}
  #section4 li {width:22%;}
}

@media(max-width:767px){
  .visual .txt h2 em {font-size:1em;line-height:1em;}
  .visual .txt p {font-size:0.78em;}
  #section1 li {width:24%;}
  #section1 li .img {display:block; width:100%; /*height:350px;*/}
  #section1 .txt {padding:10px 0;}
  #section1 .title {font-weight:200; font-size:1em;}
  #section2 .sub-company {width:90%;}
  #section2 .sub-company .bx-wrapper {max-width: 100% !important;}
  #section4 .sub-company {width:90%;}
  #section4 .sub-company .bx-wrapper {max-width:300px !important}
  #section4 .nr{width:96%; margin:0 auto;}
  #section4 li {width:46%;}

}

@media(max-width:637px){
  .visual .txt h2 em {font-size:0.75em;line-height:1em;}
  .visual .txt p {font-size:0.78em;}
  #section1 ul {padding-top:22px}
  #section1 .txt {/*height:173px;*/ padding:10px 0;}
  #section1 .title {/*height:37px;*/height:24px}
  #section1 .date {margin-top:12px}
 /* #section1 li:nth-child(n+2) {display:none}*/
 #section1 li .img {display:block; width:100%; height:200px;}
 #section2 .sub-company .bx-wrapper {max-width: 100% !important;}
 #section4 .main-content > div {/*position:relative; left:50%; top:50%; transform:translate(-50%, -50%); */width:100%; padding-top:12%;}
 #section4 ul {padding-top:10px}
 #section4 ul p{ height:90px;line-height: 22px; margin-right:0 !important;padding:0 15px; /*width:96% !important;*/}
 #section4 .nr{width:96%; margin:0 auto;}
 #section4 li {width:46%;}
}
@media(max-width:425px){
  .fp-viewing-3rdPage #section2 .fp-tableCell {height:calc(100% - 60px) !important; top:60px}
  .visual .txt h2 {width:90%}
  .visual .txt h2 em {font-size:0.75em;line-height:1em;}
  .visual .txt p {font-size:0.8em;}
  .visual li.active .txt {top:40%}
  .visual .txt p {margin:30px 0;white-space:normal}
/* #section1 .arrow {display:none} */
  #section1 h2 em{ font-size:24px;}
  #section2 h2 em{ font-size:24px;}
  #section2 .sub-company .bx-wrapper {max-width: 100% !important;}
  #section2 .sub-company {margin-top:8px}
  #section2 .sub-company li {height:215px !important;}
  #section2 .ul1{display:none;}
  #section2 .product{ display:block;}
  #section2 li {display:inline-block; width:42%; margin:0 1.5%}
  #section2 h3 {height:30px}
  #section2 .txt {padding: 10px 0 ;}
  #section2 .txt span {width: 80%;}
  #section2 li {display:inline-block; width:42%; margin: 0 1.5%;}
  #section1 li .img {display:block; width:100%; height:180px;}
  #section2 .txt p {padding:10px 0 0; display:none;}
  #section4 .main-content > div {/*position:relative; left:50%; top:50%; transform:translate(-50%, -50%); */width:100%; padding-top:25%;}
  #section4 h2 em{ font-size:24px;}
  #section4 .tit {height: 30px;line-height: 30px;}
  #section4 .bx-clone{ display:none;}
  #section4 .nr{width:96%; margin:0 auto;}
  #section4 .footer{text-align:center; line-height:20px;font-size: 0.875em; position:absolute;left:0; bottom:0;}
  #section4 li {width:46%;}
}
@media(max-width:360px){
  .fp-viewing-3rdPage #section2 .fp-tableCell {height:calc(100% - 60px) !important; top:80px}
  .visual .txt h2 em {font-size:1em; line-height:1em;}
  .visual .txt p {font-size:0.8em;}
  #section1 h2 em{ font-size:24px;}
  #section2 h2 em{ font-size:24px;}
  #section2 .ul1{display:none;}
  #section2 .product{ display:block;}
  #section2 .sub-company .bx-wrapper {max-width: 100% !important;}
  #section2 .sub-company li {height:200px !important;width:42% !important;}
  #section2 li {display:inline-block; width:42%; margin: 0 1.5%;}
  #section2 h3 {height:30px}
  #section2 .txt span {width: 80%;}
  #section2 li .img { height:80px; }
  #section2 .txt p {padding:10px 0 0; display:none;}
  #section1 li {width:24%;}
  #section1 li .img {display:block; width:100%; height:150px;}
 .layer-popup {width:80% !important}
 .layer-popup .contents {width:100% !important; height:auto !important}
 .layer-popup img {max-width:100%}
  #section4 .main-content > div {/*position:relative; left:50%; top:50%; transform:translate(-50%, -50%); */width:100%; padding-top:25%;}
 #section4 h2 em{ font-size:24px;}
  #section4 .tit {height: 30px;line-height: 30px;}
  #section4 .bx-clone{ display:none;}
  #section4 .nr{width:96%; margin:0 auto;}
  #section4 .footer{line-height:25px;bottom:0;background:#fff;}
   #section4 li {width:46%;}
}