@charset "utf-8";

#fullpage .pdinner {max-width:1520px;}

/* main */
#fullpage .visual {width:100%; height:100%; position:relative; z-index:0; background:#eee;}
#fullpage .visual dd {transition:0.2s; min-height:100vh;}
#fullpage .visual dd .bg {display:inline-block; position:absolute; left:0; top:0; width:100%; height:100%; background-position:center center; background-size:cover;}
#fullpage .visual dd.slick-active .bg {animation:visbg 1s ease-in-out infinite alternate; animation-iteration-count:1;}
#fullpage .visual dd .txt {display:flex; flex-wrap:wrap; width:100%; height:100%; min-height:100vh; align-items:center; justify-content:center; color:#fff; text-align:center; padding-bottom:45vw;}
#fullpage .visual dd .txt p {transition:0.3s;}
#fullpage .visual dd.slick-active .txt p {animation-name:anim01; animation-duration:1s; animation-fill-mode:both;}
#fullpage .visual dd .txt .t01 {animation-delay:1s;}
#fullpage .visual dd .txt .t02 {font-size:2em; font-weight:800; animation-delay:1.5s; line-height:1.2;}
#fullpage .visual dd .bar {position:absolute; bottom:0; left:0; width:100%; height:10px; background:rgba(255,255,255,0.2);}
#fullpage .visual dd .bar:after {content:''; display:inline-block; width:0; height:100%; position:absolute; left:0; bottom:0; background:#0569e6;}
#fullpage .visual dd.slick-active .bar:after {animation-name:visbar; animation-duration:6s; animation-iteration-count:1; width:100%;}
#fullpage .visual .video {position:absolute; right:10%; bottom:120px; width:80%; height:45vw; border-radius:20px; overflow:hidden;}
#fullpage .visual .controls {position:absolute; left:0; bottom:60px; z-index:99; color:#fff; padding:0 3%; display:flex; align-items:center; width:100%; font-size:1.25em;}
#fullpage .visual .controls .prev:before,
#fullpage .visual .controls .next:before {font-family:'xeicon'; cursor:pointer;}
#fullpage .visual .controls .prev:before {content:'\e93d';}
#fullpage .visual .controls .next:before {content:'\e940';}
#fullpage .visual .controls .dots {width:100px; text-align:center;}
#fullpage .visual .controls .dots li:not(.slick-active) {display:none;}
#fullpage .visual .controls .dots span {font-weight:800;}
#fullpage .visual .controls .dots span:after {content:'/'; margin:0 0.5em; font-weight:500;}
#fullpage .visual .controls .scroll {margin:0 0 0 auto; width:30px; animation-name:scroll; animation-duration:2s; animation-iteration-count:infinite;}
#fullpage .visual .controls .scroll img {width:100%;}

@media all and (min-width:768px) {
  #fullpage .visual dd {height:600px;}
  #fullpage .visual dd .txt {justify-content:flex-start; text-align:left; padding-bottom:0;}
  #fullpage .visual dd .txt .t01 {font-size:1.5em;}
  #fullpage .visual dd .txt .t02 {font-size:3em;}
  #fullpage .visual .video {right:20px; bottom:calc(50% - 9vw); width:32vw; height:18vw;}
}

@media all and (min-width:1200px) {
  #fullpage .visual dd {height:720px;}
  #fullpage .visual dd .txt .t01 {font-size:1.75em;}
  #fullpage .visual dd .txt .t02 {font-size:3.5em;}
  #fullpage .visual .controls {padding:0 20px; bottom:calc(50% - 320px);}
  #fullpage .visual .controls .scroll {width:40px;}
}

@media all and (min-width:1600px) {
  #fullpage .visual dd {height:980px;}
  #fullpage .visual .video {right:calc(50% - 740px);bottom:calc(50% - 180px); width:640px; height:360px;}
  #fullpage .visual .controls {max-width:1520px; left:calc(50% - 760px);}
}


/*common*/
.sectit {font-size:1.5em; font-weight:800; text-align:center; margin:0 0 40px;}
.sectit p {transition:0.3s;}
.sectit .t01 {color:#fff; text-shadow:-1px 0px rgba(0,0,0,0.3), 0px 1px rgba(0,0,0,0.3), 1px 0px rgba(0,0,0,0.3), 0px -1px rgba(0,0,0,0.3); text-transform:uppercase;}
.sec02 .sectit .t01 {color:#f4f5f6;}
.section .pager {display:none; flex-wrap:wrap; align-items:center; justify-content:center; width:10px; height:80px; position:absolute; right:30px; top:calc(50% - 40px); z-index:999;}
.section .pager a {display:inline-block; width:10px; height:10px; border-radius:100%; background:rgba(0,0,0,0.1);}
.section .pager a.active {background:#0569e6;}
.main .pager a {background:rgba(255,255,255,0.2);}
.main .pager a.active {background:#fff;}

@media all and (min-width:768px) {
  .sectit {display:flex; font-size:2.25em;}
  .sectit .t01 {width:30%; text-align:left;}
  .sectit .t02 {width:40%; text-align:center;}
}

@media all and (min-width:1200px) {
  .sectit {font-size:3em; margin:0 0 60px;}
  .section .pager {display:flex;}
}


/*product*/
.sec01 .fp-tableCell {padding:80px 0;}
.sec01 .product dl {display:flex; flex-wrap:wrap; text-align:center;}
.sec01 .product dd {width:48%; margin:30px 1%;}
.sec01 .product dd p {padding:0 10%;}
.sec01 .product .img {display:flex; align-items:center; justify-content:center; flex-wrap:wrap; position:relative;}
.sec01 .product .img:after {content:''; z-index:-1; width:40vw; height:40vw; border-radius:100%; background:#f4f5f6; position:absolute;}
.sec01 .product .img p {display:none;}
.sec01 .product .txt {margin:20px 0 0;}
.sec01 .product .txt .t01 {font-weight:800; font-size:1.1em; margin:0 0 0.2em;}
.sec01 .product .txt .t02 {color:#0569e6; font-size:0.9em;}

@media all and (min-width:768px) {
  .sec01 .fp-tableCell {padding:100px 0;}
  .sec01 .product dd {width:25%; margin:0;}
  .sec01 .product .img {width:100%; height:20vw; transform:translateY(50px); transition:0.3s;}
  .sec01 .product .img:after {background-position:center; background-repeat:no-repeat; background-size:cover; width:20vw; height:20vw; transition:0.3s;}
  .sec01 .product dd:nth-child(1) .img:after {background-image:url('../img/main_product_bg01.jpg');}
  .sec01 .product dd:nth-child(2) .img:after {background-image:url('../img/main_product_bg02.jpg');}
  .sec01 .product dd:nth-child(3) .img:after {background-image:url('../img/main_product_bg03.jpg');}
  .sec01 .product dd:nth-child(4) .img:after {background-image:url('../img/main_product_bg04.jpg');}
  .sec01 .product .img img {opacity:0; transition:0.3s; transform:translateY(30px);}
  .sec01 .product .img p {display:flex; align-items:center; justify-content:center; color:#fff; position:absolute; font-size:1.1em; line-height:1.4; font-weight:700; transition:0.3s; transform:translateY(0);}
  .sec01 .product .txt {transition:0.3s; opacity:0; transform:translateY(-100px);}
  .sec01 .product .txt .t01 {font-size:1.25em;}

  .sec01 .product dd:hover {z-index:99;}
  .sec01 .product dd:hover .img {transform:translateY(0);}
  .sec01 .product dd:hover .img:after {background:#f4f5f6;}
  .sec01 .product dd:hover .img img {opacity:1; transform:translateY(0);}
  .sec01 .product dd:hover .img p {opacity:0; transform:translateY(30px);}
  .sec01 .product dd:not(:hover) .img p {transition-delay:0.3s;}
  .sec01 .product dd:hover .txt {opacity:1; transform:translateY(0);}
}

@media all and (min-width:1200px) {
  .sec01 .product *:hover {cursor:url('../img/main_priduct_cursor.png'), auto;}
  .sec01 .product dl {justify-content:space-between;}
  .sec01 .product dd {width:20%; transition:0.3s; height:320px;}
  .sec01 .product .img {height:320px;}
  .sec01 .product .img:after {width:260px; height:260px;}
  .sec01 .product .img p {font-size:1.25em;}
  .sec01 .product .txt {margin:60px 0 0;}
  .sec01 .product .txt .t01 {font-size:1.75em;}

  .sec01 .product dd:hover {width:40%;}
  .sec01 .product dd:hover .img:after {width:320px; height:320px;}
  .sec01 .product dd:hover .img img {transition-delay:0.3s;}
  .sec01 .product dd:hover .txt {transition-delay:0.3s;}
}


/*news*/
.sec02 {background:#f4f5f6;}
.sec02 .fp-tableCell {padding:80px 0 240px;}
.sec02 .arrow {margin:20px 0 0;}
.sec02 .arrow span {cursor:pointer;}
.sec02 .arrow span:after {font-family:'xeicon';}
.sec02 .arrow span.prev:after {content:'\e93d';}
.sec02 .arrow span.next:after {content:'\e940';}
.sec02 #news {margin:0 -10px 40px;}
.sec02 #news dd {padding:10px;}
.sec02 #news dd.none {text-align:center; padding:20px 0; color:#aaa;}
.sec02 #news a {position:relative; width:100%; height:0; overflow:hidden; padding-bottom:82.35%; display:block; -webkit-box-shadow:0px 5px 10px 0px rgb(0 0 0 / 10%); box-shadow:0px 5px 10px 0px rgb(0 0 0 / 10%); font-weight:600;}
.sec02 #news a:after {content:''; display:inline-block; position:absolute; left:0; bottom:0; width:100%; height:100%; background:rgba(0,0,0,0.2); background: linear-gradient(0deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%); transition:0.3s;}
.sec02 #news a .img {position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden;}
.sec02 #news a .img img {width:100%;}
.sec02 #news a .txt {position:absolute; left:0; bottom:0; padding:10px; width:100%; color:#fff; z-index:1;}
.sec02 #news a .txt .t01 {font-size:0.9em; margin:0 0 5px;}
.sec02 #news a .txt .t02 {text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden;}
.sec02 #news a:hover:after {height:0;}
.sec02 #news a:hover .txt {background:#fff; transition:0.3s;}
.sec02 #news a:hover .txt .t01 {color:#0569e6;}
.sec02 #news a:hover .txt .t02 {color:#505050;}
.sec02 .btns {width:100%; display:flex; flex-wrap:wrap; position:absolute; left:0; bottom:0;}
.sec02 .btns a {width:100%; padding:0 3%; color:#fff; background-position:center center; background-size:cover; background-repeat:no-repeat; display:flex; align-items:center; height:120px;}
.sec02 .btns a.type01 {background-image:url('../img/main_news_bg01.jpg');}
.sec02 .btns a.type02 {background-image:url('../img/main_news_bg02.jpg');}
.sec02 .btns a .t01 {font-size:1.5em; font-weight:700;}
.sec02 .btns a .t02 {opacity:0.6; margin:0.2em 0 0;}
.sec02 .btns a img {margin-left:auto; width:60px;}

@media all and (min-width:768px) {
  .sec02 .fp-tableCell {padding:100px 0 200px;}
  .sec02 .arrow {margin:0 0 0 auto;}
  .sec02 .arrow span {font-size:0.5em;}
  .sec02 #news a .txt {padding:20px;}
  .sec02 #news a .txt .t02 {font-size:1.1em;}
  .sec02 .btns a {flex:1; height:200px;}
  .sec02 .btns a .t01 {font-size:1.75em; transition:0.3s;}
  .sec02 .btns a:hover .t01 {transform:translateX(0.5em);}
  .sec02 .btns a .t02 {font-size:1.1em;}
}

@media all and (min-width:1200px) {
  .sec02 #news {margin:0 -20px 40px;}
  .sec02 #news dd {padding:20px;}
  .sec02 #news a .txt .t02 {font-size:1.15em;}
  .sec02 .btns a {padding:0 40px;}
  .sec02 .btns a img {width:70px;}
}

@media all and (min-width:1520px) {
  .sec02 .btns a.type01 {padding-left:calc(50% - 740px);}
  .sec02 .btns a.type02 {padding-right:calc(50% - 740px);}
}


/*partners*/
.sec03 {padding:30px 0;}
.sec03 .tit {display:flex; align-items:center; font-size:1.1em; font-weight:700; margin:0 0 20px;}
.sec03 .arrow {margin:0 0 0 1em;}
.sec03 .arrow span {cursor:pointer;}
.sec03 .arrow span:after {font-family:'xeicon';}
.sec03 .arrow span.prev:after {content:'\e93c';}
.sec03 .arrow span.next:after {content:'\e93f';}
.sec03 #partners img {border:1px solid #f0f0f0; width:100%;}
.sec03 #partners .slick-slide {margin:0 10px;}
.sec03 #partners .slick-list {margin:0 -10px;}

@media all and (min-width:768px) {
  .sec03 .tit {font-size:1.25em;}
}

@media all and (min-width:1200px) {
  .sec03 {padding:60px 0;}
  .sec03 .pdinner {display:flex;}
  .sec03 .tit {width:20%; margin:0; font-size:1.35em;}
  .sec03 .partners {width:80%;}
}

@media all and (min-width:1600px) {
  .sec03 .tit {font-size:1.5em;}
}


/*footer*/
#footer {background:#1a1d21; color:rgba(255,255,255,0.6); font-size:0.9em; text-align:center; padding:40px 0;}
#footer .pdinner {max-width:1800px;}
#footer ul.bottom_li {display:flex; justify-content:center; align-items:center; margin:0 0 10px;}
#footer ul.bottom_li li {margin:0 10px;}
#footer ul.bottom_li li a {font-weight:600;}
#footer ul.info {margin-bottom:10px; display:flex; flex-wrap:wrap; justify-content:center;}
#footer ul.info li {margin:0 0.5em;}
#footer ul.info li.type01 {width:100%;}
#footer ul.info li b {font-weight:700; margin:0 0.2em 0 0;}
#footer p {font-size:0.9em; margin-top:10px;}
#pageup {position:fixed; z-index:999; right:10px; bottom:10px; width:60px; height:60px; background:#206ccb; display:none; cursor:pointer;}
#pageup:after {content:'\e909';font-family:'xeicon'; color:#fff; display:flex; width:100%; height:100%; align-items:center; justify-content:center;}

#footer .pdinner .logo {text-align:center; margin:0 0 30px;}
#footer .pdinner .logo img {width:160px; opacity:0.6;}

@media all and (min-width:768px) {
	#footer {padding:60px 0; text-align:left;}
  #footer ul.bottom_li {justify-content:flex-start; margin:0 0 20px;}
  #footer ul.bottom_li li:first-child {margin-left:0;}
  #footer ul.info {justify-content:flex-start; margin-bottom:20px;}
	#footer ul.info li {margin:0 1em 0 0;}

  #footer .pdinner {display:flex;}
  #footer .pdinner .logo {width:160px; margin:0 80px 0 0; flex-shrink:0;}

}


/* Common Layout CSS _ 15.05.18 */
.wrap {max-width:2000px; min-width:320px; width:100%; margin: 0 auto; position:relative;}
.inner {max-width:1400px; width:100%; position:relative; margin: 0 auto;}
.pdinner {max-width:1400px; padding:0 3%; position:relative; margin: 0 auto;}
.mEnter {display:block;}
.pEnter {display:inline-block;}
.mb {margin-bottom:30px !important}
.bmb {margin-bottom:40px !important}
.mb10 {margin-bottom:10px !important;}
.mb20 {margin-bottom:20px !important;}
.pb {padding-bottom:30px !important}
.bpb {padding-bottom:40px !important}
.tac {text-align:center;}
.tal {text-align:left;}
.tar {text-align:right;}
.fwb {font-weight:600}
.fss {font-size:0.8em}
.fsl {font-size:1.1em}

@media all and (min-width:768px) {
	.mb {margin-bottom:40px !important;}
	.bmb {margin-bottom:60px !important;}
	.pb {padding-bottom:40px !important}
	.bpb {padding-bottom:60px !important}
	.mo_only {display:none;}
	.move_scroll {max-width:100%;}
	.pdinner {padding:0 3%;}
}

@media all and (min-width:1200px) {
  body, html {font-size:18px; line-height:1.5;}
  .mEnter {display:inline-block;}
  .pEnter {display:block;}
  .mb {margin-bottom:50px !important;}
  .bmb {margin-bottom:80px !important;}
  .pb {padding-bottom:50px !important;}
  .bpb {padding-bottom:80px !important;}
  .pdinner {padding:0 20px;}
}


.dot_li li {text-align:left; line-height:1.6em; padding-left:0.7em; position:relative;}
.dot_li li:before {content:''; display:inline-block; width:0.2em; height:0.2em; border-radius:50%; background:#aaa; position:absolute; left:0; top:0.7em;}
.img_li {display:flex; flex-wrap:wrap; align-items:flex-start; margin:0 -1%;}
.img_li li {width:48%; text-align:center; margin:0 1% 10px;}
.img_li.col02 li {width:48%;}
.tit_dot {font-size:1.4em; color:#222; padding-left:30px; background:url('../img/tit_dot.png') no-repeat left calc(0.7em - 10px); font-weight:700; line-height:1.4em;}

@media all and (min-width:768px) {
	.img_li li {width:31.33%;}
  .img_li.type01 li {width:48%;}
}

@media all and (min-width:1200px) {
	.img_li li {width:23%;}
}


/* animation */
@-webkit-keyframes dot {
		0% {-webkit-transform:scaleX(0); -webkit-transform-origin:0 0;}
    100% {-webkit-transform:scaleX(1); -webkit-transform-origin:0 0;}
}
@keyframes dot {
		0% {transform:scaleX(0); transform-origin:0 0;}
    100% {transform:scaleX(1); transform-origin:0 0;}
}
@-webkit-keyframes visbg {
  from {-webkit-transform:scale(102%);}
  to {-webkit-transform:scale(100%);}
}
@keyframes visbg {
  from {transform:scale(102%);}
  to {transform:scale(100%);}
}
@-webkit-keyframes anim01 {
	0% {opacity:0; -webkit-transform:translateY(30px);}
	100% {-webkit-transform:translateY(0); opacity:1;}
}
@keyframes anim01 {
	0% {opacity:0; transform:translateY(30px);}
	100% {transform:translateY(0); opacity:1;}
}
@-webkit-keyframes scroll {
	0% {-webkit-transform:translateY(0);}
	30% {-webkit-transform:translateY(20px);}
	100% {-webkit-transform:translateY(0);}
}
@keyframes scroll {
	0% {transform:translateY(0);}
	30% {transform:translateY(20px);}
	100% {transform:translateY(0);}
}
@-webkit-keyframes visbar {
  0% {-webkit-width:0;}
  100% {-webkit-width:100%;}
}
@keyframes visbar {
  0% {width:0;}
  100% {width:100%;}
}


/* 서브레이아웃 */
#sub_vis {position:relative; padding:100px 0 40px; background:#eee no-repeat center center / cover; color:#fff; text-align:center;}
#sub_vis .tit h2 {font-size:1.5em; color:#fff; font-weight:700; margin:0 0 10px;}
#sub_vis .tit ul {display:flex; align-items:center; justify-content:center; font-size:0.9em;}
#sub_vis .tit li {display:flex; align-items:center;}
#sub_vis .tit li:before {content:'\e93f';font-family:'xeicon'; margin:0 0.2em; font-size:0.9em;}
#sub_vis .tit li:first-child:before {content:'\e900'; margin:0;}

@media all and (min-width:768px) {
	#sub_vis {padding:120px 0 60px;}
  #sub_vis .tit {display:flex; justify-content:space-between;}
	#sub_vis .tit h2 {font-size:2em; margin:0;}
}

@media all and (min-width:1200px) {
	#sub_vis {padding:180px 0 120px;}
}


#sub {width:100%; margin:0 auto; position:relative; min-height:400px; padding:40px 0 80px;}
#sub.pt0 {padding-top:0;}
#sub.pb0 {padding-bottom:0;}
.subwrap {margin:0 auto;}
.sub_tit {font-size:1.5em; font-weight:700; margin:0 0 30px; text-align:center;}

@media all and (min-width:768px) {
	.sub_tit {font-size:2em; margin:0 0 40px;}
}

@media all and (min-width:1200px) {
  #sub {min-height:650px; padding:60px 0 80px;}
  .sub_tit {font-size:2.5em; margin:0 0 60px;}
}


/*서브메뉴 - 공통 */
.menu_wrap {height:50px;}
.menu_wrap .inner {background:#fff;}

@media all and (min-width:768px) {
  .menu_wrap {height:50px;}
}

@media all and (min-width:1200px) {
  .menu_wrap {height:60px;}
  .menu_wrap {margin-top:-60px;}
}


/*서브메뉴 - type01 */
#sub_drop {display:flex; width:100%; z-index:100; height:50px;}
#sub_drop .dropdown.home {width:50px; height:100%; overflow:hidden;}
#sub_drop .dropdown.home a {display:flex; align-items:center; justify-content:center; width:100%; height:100%; background:#206ccb;}
#sub_drop .dropdown.home a:after {content:'\e900'; font-family:'xeicon'; color:#fff;}
#sub_drop .dropdown {position:relative; z-index:101; height:50px;}
#sub_drop .dropdown.deph01 {width:calc(50% - 50px); max-width:200px;}
#sub_drop .dropdown.deph02 {width:50%; max-width:300px;}
#sub_drop .dropbtn {width:100%; display:inline-block; position:relative; padding:0 2em 0 1em; cursor:pointer;  text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden; height:50px; line-height:50px;}
#sub_drop .dropbtn:after{font-family:'xeicon'; content:'\e942'; position:absolute; right:0.5em;}
#sub_drop .dropdown .show {display:block; position:absolute; left:0; top:50px;}
#sub_drop .dropdown ul li {padding:10px;}
#sub_drop .dropdown ul li:hover {background:#333;}
#sub_drop .dropdown ul li a {display:block; color:#fff;}
#sub_drop .dropmenu {display:none; background:#444; box-sizing:content-box; width:100%; overflow:hidden;}

@media all and (min-width:768px) {
  #sub_drop {height:60px;}
  #sub_drop .dropdown.home {width:60px;}
  #sub_drop .dropdown {height:60px;}
  #sub_drop .dropbtn {height:60px; line-height:60px;}
  #sub_drop .dropdown .show {top:60px;}
}


/*서브메뉴 - type02 */
#submenu {display:flex; border-bottom:1px solid #f0f0f0;}
#submenu a.home {display:flex; align-items:center; justify-content:center; width:50px; height:50px; background:#206ccb;}
#submenu a.home:after {content:'\e900'; font-family:'xeicon'; color:#fff;}
#submenu a.arr {display:flex; width:calc(100% - 50px); line-height:50px; padding:0 2em 0 1em; background:#fff;}
#submenu a.arr:after {font-family:'xeicon'; content:'\e942'; position:absolute; right:1em; top:0; transition:0.2s;}
#submenu .list {display:none; position:absolute; left:50px; top:50px; width:calc(100% - 50px); background:#2b3037; z-index:99;}
#submenu .list a {text-align:left; display:block; color:#fff; padding:0 10px; line-height:50px; cursor:pointer;}
#submenu .list a:hover {background:#1a1d21;}
#submenu .list a.on {display:none;}
#submenu.on .list {display:block;}
#submenu.on a.arr:after {-webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -ms-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg);}

@media screen and (min-width:960px) {
  #submenu {border:0;}
  #submenu a.home {width:60px; height:60px;}
  #submenu a.arr {display:none;}
  #submenu .list {display:flex; width:calc(100% - 60px); position:absolute; left:60px; top:0; border:0; padding:0; background:rgba(26,29,33,0.6); backdrop-filter:blur(10px);}
  #submenu .list a {line-height:60px; font-size:1.1em; font-weight:700; flex:1; text-align:center; color:#888; background:#fafafa; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden;}
  #submenu .list a:hover {color:#333; background:#fafafa;}
  #submenu .list a.on {display:block; color:#206ccb; background:#fff;}
}

@media screen and (min-width:1200px) {
  #submenu .list a {background:0; color:#bbb;}
  #submenu .list a:hover:not(.on) {color:#fff; background:0;}
}