@charset "utf-8"; 

/* FONT */
@import url('https://fonts.googleapis.com/css?family=Raleway:400,500,600,700');

/* INIT */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, button, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin:0;  padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
html {box-sizing:border-box}
*, *:before, *:after {box-sizing:inherit}
body {font-family:'Raleway', sans-serif; font-style:normal; font-weight:400; font-size:14px; line-height:1; color:#333}
ol, ul {list-style:none}
blockquote, q {quotes:none}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none}
table {border-collapse:collapse; border-spacing:0}
a, a:link, a:visited, a:hover, a:active {text-decoration:none; color:inherit}

.wrap {position:relative; min-width:1170px}
.content {width:100%; padding-top:89px}
.inner {position:relative; margin:0 auto; width:1170px}
.clearfix:after {content:""; visibility:hidden; display:block; clear:both; height:0}
.r-mark {position:relative; display:inline-block; margin-right:0.5em}
.r-mark:after {content:'®'; position:absolute; top:-0.3em; right:-0.8em; font-size:0.6em; white-space:pre}

/* HEADER */
.header {position:absolute; overflow:hidden; width:100%; height:89px; background-color:#fff; z-index:1}
.header:before {position:absolute; top:87px; content:''; display:block; height:2px; width:100%; background-color:#000}
.header-open {overflow:visible}
.header-open:after {position:absolute; top:145px; content:''; display:block; height:2px; width:100%; background-color:#fff; opacity:0.3}
.logo {position:absolute; top:30px; left:15px; width:190px; height:24px; font-size:1px; text-indent:-9999px; background:url('../image/logo.png') no-repeat}
.logo a {display:block; height:100%}
.gnb {float:right}
.gnb .menu {float:left}
.gnb .menu h2 {margin:0 15px; line-height:87px}
.gnb .menu h2 a {color:#999; font-size:14px; font-weight:600}
.gnb .menu.on h2 a {color:#000; border-bottom:1px solid #000}
.gnb .menu ul {display:none; position:absolute; top:87px; left:50%; margin:0 0 0 -585px; width:1170px; text-align:center}
.gnb .menu.on ul {display:block}
.gnb .menu ul li {display:inline-block; margin:0 18px; line-height:56px}
.gnb .menu ul li h3 a {color:#989898; font-size:14px; font-weight:600}
.gnb .menu ul li h3 a:hover {color:#fff; border-bottom:1px solid #fff}

/* FOOTER */
.footer {background-color:#242424; padding:60px 0}
.footer-link {float:left}
.footer-link li {float:left; margin:0 10px}
.footer-link li a {color:#ccc; font-size:12px}
.copyright {float:right; color:#999; font-size:12px}

/* MAIN */
.main .banner {min-width:1170px; margin:0 auto}
.main .banner .item {height:694px; display:none; text-align:center; color:#fff; background:center top/cover no-repeat}
.main .banner .item:first-child {display:block}
.main .banner.slick-initialized .item {display:block}
.main .banner .slick-dots {position:absolute; bottom:45px; display:block; width:100%; padding:0; margin:0; list-style:none; text-align:center}
.main .banner .slick-dots li {position:relative; display:inline-block; width:14px; height:14px; margin:0 3px; padding:0; cursor:pointer}
.main .banner .slick-dots li button {font-size:0; line-height:0; display:block; width:14px; height:14px; cursor:pointer; color:transparent; border:0; outline:0; background: url('../image/paging.png') no-repeat}
.main .banner .slick-dots li:hover button, .main .banner .slick-dots li:focus button {background-position:-14px 0}
.main .banner .slick-dots li.slick-active button {background-position:-14px 0}

.main .banner .item-1 {background-image:url('../image/main_banner_01.jpg')}
.main .banner .item-2 {background-image:url('../image/main_banner_02.jpg')}
.main .banner .item-3 {background-image:url('../image/main_banner_03.jpg')}
.main .banner .item-4 {background-image:url('../image/main_banner_04.jpg')}

.main .banner .cat {margin-top:190px; font-weight:600; margin-bottom:50px}
.main .banner .cat span {border-bottom:1px solid #fff}
.main .banner .title {font-size:48px; font-weight:600; margin-bottom:50px}
.main .banner .cont {line-height:1.6em; margin-bottom:25px}
.main .banner .link {font-size:16px; border-bottom:1px solid #fff}

.main .content-wrap .inner {padding:60px 0}
.main .content-wrap .col {float:left; width:270px}
.main .content-wrap .col + .col {margin-left:30px}
.main .content-wrap .col .title {font-size:18px; font-weight:600}
.main .content-wrap .col img {display:block; width:270px; padding:20px 0}
.main .content-wrap .col .cont {font-size:14px; line-height:1.6em}

/* ABOUT */
.message {background:url('../image/message_bg.jpg') center 89px/cover no-repeat}
.message .message-wrap {padding:136px 95px 80px}
.message h3 {text-align:center; margin-bottom:45px; color:#fefefe; font-size:24px; font-weight:600}
.message h3 span {border-bottom:1px solid #fefefe}
.message p {color:#fff; text-align:justify; line-height:22px; margin-bottom:24px}
.message p.lead {font-size:24px; font-weight:700}
.message p.signature {margin-bottom:0; text-align:right; margin-right:60px; font-size:24px; font-weight:700}
.message p.signature span {display:inline-block; background:url('../image/ceo_signature.png') right top no-repeat; padding-top:55px}
.message p.signature em {font-size:16px; font-weight:400}
.vision {background:url('../image/vision_bg.jpg') center 89px/cover no-repeat}
.vision .vision-wrap {padding:80px 0}
.vision h3 {text-align:center; margin:56px 0 30px; color:#fefefe; font-size:24px; font-weight:600}
.vision h3 span {border-bottom:1px solid #fefefe}
.vision ul li {float:left; position:relative; width:370px; height:370px; background:url('../image/bg_circle.png') center no-repeat; text-align:center; font-size:16px; font-weight:500; line-height:1.4em; letter-spacing:-1px; color:#131825}
.vision ul li em {display:block; position:relative; width:240px; padding-top:65px; margin:0 auto; font-size:20px; font-weight:700; text-align:center; margin-bottom:24px; line-height:26px; letter-spacing:0}
.vision ul.value li em {font-size:30px; width:170px; padding-top:100px; line-height:38px}
.vision ul li em:after {content:''; position:absolute; bottom: -12px; left:117px; width:6px; height:2px; background-color:#131825}
.vision ul.value li em:after {content:none}
.vision ul li + li {margin-left:30px}
.vision ul li:after {content:''; position:absolute; bottom:0; left:0; width:100%; height:100%}
.vision ul li.v-1:after {background:url('../image/vision_1.png') center 230px no-repeat}
.vision ul li.v-2:after {background:url('../image/vision_2.png') center 230px no-repeat}
.vision ul li.v-3:after {background:url('../image/vision_3.png') center 230px no-repeat}
.vision ul li.m-1:after {background:url('../image/mission_1.png') center 230px no-repeat}
.vision ul li.m-2:after {background:url('../image/mission_2.png') center 230px no-repeat}
.vision ul li.m-3:after {background:url('../image/mission_3.png') center 230px no-repeat}
.vision ul li.vl-1:after {background:url('../image/value_1.png') center 210px no-repeat}
.vision ul li.vl-2:after {background:url('../image/value_2.png') center 210px no-repeat}
.vision ul li.vl-3:after {background:url('../image/value_3.png') center 210px no-repeat}
.business {background:url('../image/business_bg.jpg') center 89px/cover no-repeat}
.business .business-wrap {padding:136px 0 80px}
.business h3 {text-align:center; color:#fefefe; font-size:24px; font-weight:600}
.business h3 span {border-bottom:1px solid #fefefe}
.business ul li {float:left; width:370px; margin-top:50px}
.business ul li + li {margin-left:30px}
.business ul li.ml-0 {margin-left:0}
.business ul li img {display:block}
.business ul li span {display:block; text-align:center; padding:20px 0; font-size:20px; line-height:26px; font-weight:700; color:#fff}
.history {background:url('../image/history_bg.jpg') center 89px/cover no-repeat}
.history .history-wrap {padding:136px 0 80px}
.history h3 {text-align:center; color:#fefefe; font-size:24px; font-weight:600; margin-bottom:30px}
.history h3 span {border-bottom:1px solid #fefefe}
.history ul li {position:relative; font-size:18px; text-align:center; padding:23px 0; color:#fefefe}
.history ul li:after {content:''; position:absolute; left:565px; bottom:0; width:40px; height:1px; background-color:#a2a2a3}
.history ul li:last-child:after {content:none}
.history ul li em {font-weight:600; margin-right:1em}
.location {background:url('../image/location_bg.jpg') center 89px/cover no-repeat}
.location .location-wrap {padding:86px 0 0}
.location dl {padding:50px 0 0; margin:0 190px; border-bottom:1px solid #a2a2a3; color:#fefefe; text-align:center; line-height:1.8em}
.location dl:last-child {border-bottom:0}
.location dl h3 {font-size:24px; font-weight:600; margin-bottom:50px}
.location dl h3 span {border-bottom:1px solid #fefefe}
.location dl h2 {font-size:18px; font-weight:600}
.location dl dd {position:relative; padding-bottom:40px}
.location dl dd + dd {padding-top:40px}
.location dl dd + dd:after {content:''; position:absolute; top:0; left:375px; width:40px; height:1px; background-color:#a2a2a3}
.location dl dd .tel {margin-right:20px}
.location dl dd .map {margin-top:30px}
.location dl dd .map a {border-bottom:1px solid #a2a2a3}

/* CONTACT */
.contact {background:url('../image/contact_bg.jpg') center 89px/cover no-repeat}
.contact .contact-wrap {padding:136px 0 60px}
.contact h3 {text-align:center; color:#fefefe; font-size:24px; font-weight:600}
.contact h3 span {border-bottom:1px solid #fefefe}
.contact p {padding:35px 0; margin:0 190px; text-align:center; color:#fefefe; line-height:1.6em; border-bottom:1px solid #a2a2a3}
.contact dl {position:relative; color:#fefefe; line-height:1.8em; text-align:center; padding:35px 0}
.contact dl + dl:after {content:''; position:absolute; top:0; left:565px; width:40px; height:1px; background-color:#a2a2a3}
.contact dl dt {font-size:18px; font-weight:600}
.contact dl dd span {margin-right:20px}
.contact dl dd .name {font-weight:600}

/* PRODUCTS */
.products .banner {min-width:1170px; margin:0 auto}
.products .banner .item {height:470px; display:none; text-align:center; color:#fff; background:center top/cover no-repeat}
.products .banner .item:first-child {display:block}
.products .banner.slick-initialized .item {display:block}
.products .banner .slick-dots {position:absolute; bottom:45px; display:block; width:100%; padding:0; margin:0; list-style:none; text-align:center}
.products .banner .slick-dots li {position:relative; display:inline-block; width:14px; height:14px; margin:0 3px; padding:0; cursor:pointer}
.products .banner .slick-dots li button {font-size:0; line-height:0; display:block; width:14px; height:14px; cursor:pointer; color:transparent; border:0; outline:0; background: url('../image/paging.png') no-repeat}
.products .banner .slick-dots li:hover button, .products .banner .slick-dots li:focus button {background-position:-14px 0}
.products .banner .slick-dots li.slick-active button {background-position:-14px 0}

.products .banner.fashion .item-1 {background-image:url('../image/products_banner_fashion_01.jpg')}
.products .banner.outdoor .item-1 {background-image:url('../image/products_banner_outdoor_01.jpg')}
.products .banner.outdoor .item-2 {background-image:url('../image/products_banner_outdoor_02.jpg')}
.products .banner.outdoor .item-3 {background-image:url('../image/products_banner_outdoor_03.jpg')}
.products .banner.outdoor .item-4 {background-image:url('../image/products_banner_outdoor_04.jpg')}

.products .banner .cat {margin-top:115px; font-weight:600; margin-bottom:50px}
.products .banner .cat span {border-bottom:1px solid #fff}
.products .banner .title {font-size:48px; font-weight:600; margin-bottom:50px}
.products .banner .cont {line-height:1.6em}

.products .products-list .inner {padding:50px 0}
.products .products-list .inner > li {float:left; width:270px}
.products .products-list .inner > li + li {margin-left:30px}
.products .products-list .inner > li h3 {font-size:20px; font-weight:700; line-height:1.2em}
.products .products-list .inner > li h3 em {display:block; font-size:16px; font-weight:400}
.products .products-list .inner > li img {display:block; margin:15px 0 25px}
.products .products-list .sub-list li {margin-bottom:25px}
.products .products-list .sub-list a {font-size:16px; font-weight:700; border-bottom:1px solid #333}
.products .products-list .sub-list p {font-size:14px; padding-top:10px}
.products .top {position:relative; height:113px; font-size:14px; line-height:57px; padding-top:56px; background-color:#fff; border-bottom:1px solid #dfdfdf}
.products .top:after {content:''; position:absolute; top:0; width:100%; height:56px; background:url('../image/products_bg.jpg') center top/cover no-repeat}
.products .top .breadcumb {float:left}
.products .top .btns {float:right; font-weight:700; color:#666}
.products .top .btns li {float:left; margin-left:15px}
.products .product-detail {padding:30px 0}
.products .product-detail .product-detail-wrap {border-bottom:1px solid #dfdfdf}
.products .product-detail .product-detail-wrap:before {content:''; position:absolute; left:885px; width:1px; height:calc(100% - 20px); background-color:#dfdfdf}
.products .product-detail .product-detail-wrap > div {float:left}
.products .product-detail .l-pane {width:885px; padding-right:15px}
.products .product-detail .r-pane {width:285px; padding-left:15px; height:100%}
.products .product-detail .l-pane .label {position:relative; border-bottom:1px solid #dfdfdf; height:74px}
.products .product-detail .l-pane .label img {position:absolute; bottom:15px}
.products .product-detail .l-pane .name {position:absolute; right:10px; bottom:20px; font-size:16px; font-weight:700}
.products .product-detail .l-pane .name i {font-size:16px; font-weight:400; font-style:italic; padding-left:0.5em}
.products .product-detail .l-pane .desc {padding:20px 0; border-bottom:1px solid #dfdfdf}
.products .product-detail .l-pane .desc > p {text-align:justify; line-height:1.6em}
.products .product-detail .l-pane .desc .cont {float:right; margin-left:30px}
.products .product-detail .l-pane .desc .cont img {display:block}
.products .product-detail .l-pane .desc .cont > p {text-align:center; font-size:18px; line-height:1.8em; font-weight:700}
.products .product-detail .l-pane .desc .cert {position:relative; margin-top:30px}
.products .product-detail .l-pane .desc .cert > em {position:absolute; font-size:24px; font-weight:700}
.products .product-detail .l-pane .desc .cert > ul {padding-left:200px; line-height:1.6em}
.products .product-detail .l-pane .spec {position:relative; padding:20px 0; border-bottom:1px solid #dfdfdf}
.products .product-detail .l-pane .spec > em {position:absolute; font-size:24px; font-weight:700}
.products .product-detail .l-pane .spec > ul {padding-left:200px; line-height:1.6em}
.products .product-detail .l-pane .feature {padding:20px 0}
.products .product-detail .l-pane .app {padding-left:15px}
.products .product-detail .l-pane .feature > div {float:left; width:50%}
.products .product-detail .l-pane .feature > div > em {display:block; font-size:24px; margin-bottom:10px; font-weight:700}
.products .product-detail .l-pane .feature > div li {padding-top:10px; line-height:1.6em}
.products .product-detail .l-pane .feature > div li em {display:block; font-weight:700}
.products .product-detail .r-pane .tag {border-bottom:1px solid #dfdfdf; height:74px; text-align:center; font-size:24px; font-weight:700; padding-top:25px}
.products .product-detail .r-pane .tag-img {text-align:center; padding:25px 0}
.products .product-detail .inquiry {line-height:62px}
.products .product-detail .inquiry em {font-weight:700}
.products .product-detail .inquiry span {margin:0 10px}
.products .product-detail .inquiry .btns {float:right; font-weight:700; color:#666}
.products .product-detail .inquiry .btns li {float:left; margin-left:15px}

/* COLLECTION */
.collection .top {position:relative; height:113px; font-size:14px; line-height:57px; padding-top:56px; background-color:#fff; border-bottom:1px solid #dfdfdf}
.collection .top:after {content:''; position:absolute; top:0; width:100%; height:56px; background-color:#333}
.collection .top .breadcumb {float:left}
.collection .top .col-link {position:absolute; top:0; left:405px; padding:13px 40px 13px 20px; height:50px; overflow:hidden; background-color:#fff; border:1px solid transparent; border-top:0; z-index:30}
.collection .top .col-link.on {height:auto; border-color:#eee}
.collection .top .col-link li {font-size:18px; line-height:32px; text-align:left; padding:0 10px; color:#888; font-weight:500}
.collection .top .col-link li:hover {color:#333}
.collection .top .col-link li:first-child {font-weight:700; position:relative; color:#333}
.collection .top .col-link li:first-child:after {content:'\f107'; font-family:FontAwesome; position:absolute; right:-20px; cursor:pointer}
.collection .top .col-link li:last-child:after {content:''}
.collection .col-detail {background-color:#eee}
.collection .col-detail .inner {padding:55px 0}
.collection .col-detail .gallery {background:url('../image/blank_tile.png')}
.collection .col-detail .gallery a {float:left; margin-left:1px; margin-top:1px; line-height:0; outline:0; background-color:#eee}
.collection .col-detail .gallery img {width:194px; height:120px}

/* EVENT */
.event .top {position:relative; height:113px; font-size:14px; line-height:57px; padding-top:56px; background-color:#fff; border-bottom:1px solid #dfdfdf}
.event .top:after {content:''; position:absolute; top:0; width:100%; height:56px; background-color:#333}
.event .top .breadcumb {float:left}
.event .top .pagination {float:right; font-size:22px; color:#999}
.event .top .pagination li {position:relative; float:left; padding:0 12px}
.event .top .pagination li + li:before {content:""; position:absolute; width:2px; height:20px; background-color:#dedede; top:20px; left:0}
.event .top .pagination li:last-child {padding-right:0}
.event .top .pagination li.active {color:#333; font-weight:700}
.event .top .pagination li:hover {color:#333}
.event .event-detail .inner {padding:50px 0}
.event .event-detail .event-wrap {float:left; width:370px; line-height:1.6em}
.event .event-detail .event-wrap + .event-wrap {margin-left:30px}
.event .event-detail p {font-size:14px}
.event .event-detail p em {font-weight:700; margin-right:0.5em}
.event .event-detail .date {font-size:22px; font-weight:700; margin-bottom:20px}
.event .event-detail .title {font-size:16px; font-weight:700}
/*.event .event-detail img {display:block; padding:30px 0; width:370px}*/
.event .event-detail img {	
	padding: 30px 0;	
}
.event .event-detail p.bline {position:relative; margin-bottom:24px}
.event .event-detail p.bline:after {content:''; position:absolute; width:25px; height:1px; background-color:#ccc; left:0; bottom:-12px}
.event .event-detail p em.blk {display:block}
.event .bottom {height:95px; border-top:1px solid #dfdfdf}
.event .bottom .inner {text-align:right}
.event .bottom .pagination {display:inline-block; font-size:22px; height:57px; line-height:57px; color:#999}
.event .bottom .pagination li {position:relative; float:left; padding:0 12px}
.event .bottom .pagination li + li:before {content:""; position:absolute; width:2px; height:20px; background-color:#dedede; top:20px; left:0}
.event .bottom .pagination li:last-child {padding-right:0}
.event .bottom .pagination li.active {color:#333; font-weight:700}
.event .bottom .pagination li:hover {color:#333}

/* GETTING THE DOCUMENTATION */
.docs .top {position:relative; height:113px; font-size:14px; line-height:57px; padding-top:56px; background-color:#fff; border-bottom:1px solid #dfdfdf}
.docs .top:after {content:''; position:absolute; top:0; width:100%; height:56px; background-color:#333}
.docs .top .breadcumb {float:left}
.docs .docs-detail {background:url('../image/docs_bg.jpg') center top/cover no-repeat}
.docs .docs-list {padding:50px 100px}
.docs .docs-list li {color:#fff; height:36px; line-height:36px; border-bottom:1px solid #545252}
.docs .docs-list li:first-child {border-top:1px solid #545252}
.docs .docs-list .title {float:left; width:380px; font-weight:600; padding-left:50px}
.docs .docs-list .desc {float:left; width:440px}
.docs .docs-list .download {float:left; width:150px}
.docs .docs-list .download .fa {margin-right:5px}