@import url(reset.css);
@import url(navigation.css);

/* default Reset*/

@charset "utf-8";

@font-face {
    font-family: 'gotham-boldgotham-bold';
    src: url('fonts/gothmbol-webfont.eot');
    src: url('fonts/gothmbol-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/gothmbol-webfont.woff') format('woff'),
         url('fonts/gothmbol-webfont.ttf') format('truetype'),
         url('fonts/gothmbol-webfont.svg#gotham-boldgotham-bold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Gotham-Medium';
    src: url('fonts/Gotham-Medium.eot');
    src: url('fonts/Gotham-Medium.eot?#iefix') format('embedded-opentype'),
         url('fonts/Gotham-Medium.woff') format('woff'),
         url('fonts/Gotham-Medium.ttf') format('truetype'),
         url('fonts/Gotham-Medium.svg#gotham-Medium') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Gotham-Book';
    src: url('fonts/Gotham-Book.eot');
    src: url('fonts/Gotham-Book.eot?#iefix') format('embedded-opentype'),
         url('fonts/Gotham-Book.woff') format('woff'),
         url('fonts/Gotham-Book.ttf') format('truetype'),
         url('fonts/Gotham-Book.svg#Gotham-Book') format('svg');
    font-weight: normal;
    font-style: normal;

}


body, html { 
  -webkit-font-smoothing: antialiased; margin: 0 auto; font-family: 'Gotham-Book';
  font-size: 1em; color: #333; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; 
  text-size-adjust: 100%;  height: 100%; }

::selection { background: #000; color:#fff; }

header { width: 100%; position: relative; z-index: 9999999; }

ul, ol { list-style: none;}
ul li, ol li{ color: #000 }
ul li p, ol li p{ color:#777777; margin:0;}
ol.ol_no { list-style:decimal; margin-left:40px;}
ul.ul_doc { list-style:disc; margin-left:40px;}

b { font-family: 'gotham-boldgotham-bold'; }

a { -webkit-transition: all .2s ease-out; transition: all .2s ease-out; }
a:hover {color: #ccc; cursor: pointer !important;}
.btn-b a, .btn-w a{
  -webkit-transition:  all .5s ease; /* add delay if wanted */
     -moz-transition:  all .5s ease; /* add delay if wanted */
      -ms-transition:  all .5s ease; /* add delay if wanted */
       -o-transition:  all .5s ease; /* add delay if wanted */
          transition:  all .5s ease; /* add delay if wanted */ 
  }
.btn_b { display:inline-block; margin:0px 10px; padding:0; font-size: 14px; letter-spacing: 2px;}
.btn_b a { display:block; line-height: 60px; padding: 0 60px; font-family: 'Gotham-Book'; color: #fff; background: #000;   text-transform: uppercase;}
.btn_b:hover a{ background-color: #f9f9f9; color: #000; }
.btn_g { display:inline-block; margin:0px 10px; padding:0; font-size: 14px; letter-spacing: 2px;}
.btn_g a { display:block; line-height: 60px; padding: 0 60px; font-family: 'Gotham-Book'; color: #fff; background: #82b300;  text-transform: uppercase;}
.btn_g:hover a{ background-color: #f9f9f9; color: #82b300; }
.btn_o { display:inline-block; margin:0px 10px; padding:0; font-size: 14px; letter-spacing: 2px;}
.btn_o a { display:block; line-height: 60px; padding: 0 60px; font-family: 'Gotham-Book'; color: #fff; background: #d97f2e;  text-transform: uppercase;}
.btn_o:hover a{ background-color: #f9f9f9; color: #d97f2e; }

input, textarea { border: none; background: none; outline: none; color: #333  }
.icon { display: inline-block; }


h1, h2, h3, h4, h5, h6 { color: #000; font-family: 'gotham-boldgotham-bold'; }
h1 { font-size: 54px; text-transform: uppercase;}
h2 { font-size: 36px; text-transform: uppercase;}
h3 { font-size: 24px; text-transform: uppercase; margin-bottom: 30px;}
h4 { font-size: 24px; text-transform: uppercase;}
h5 { font-size: 48px; text-transform: uppercase;}
h6 { font-size: 18px; color: #999999; font-family: 'Gotham-Book'; }

.page_content { padding: 40px 0;  }
.container { width: 100%; max-width: 1200px; margin:0 auto;  padding: 0 60px; position: relative; }

.left_content, .right_content { width: 50%; float: left; }

/* ------------------------------------------
   Header //  Normal  for all
--------------------------------------------- */

.nav-menus-wrapper{ /*overflow-x: hidden;*/ text-transform: uppercase; }

.btn-show { padding: 10px 20px; color: #fff; cursor: pointer; border: none; background-color: #9fa7b0; transition: background .3s; }
.btn-show:hover { background-color: #A0D468; }
ul.nav-menu > li { margin: 10px 20px; }
ul.nav-menu > li > a { padding: 0px; line-height: 60px; color: #000; text-shadow: 1px 1px #ccc; }

ul.nav-menu > li.nav_login { background: #000; position:relative; }
ul.nav-menu > li.nav_login > a { color: #fff; display:block; padding-left: 30px; padding-right: 30px; text-align:center; }
ul.nav-menu > li.nav_login:hover { background:#f3f3f3; }
ul.nav-menu > li.nav_login:hover > a { color:#000; } 

ul.nav-menu > li.nav_cart { position:relative; margin-left: 0px; margin-right: 5px; }
ul.nav-menu > li.nav_cart a { display:flex; align-items: center; line-height:1em; }
ul.nav-menu > li.nav_cart a span { padding:10px;}
ul.nav-menu > li.nav_cart a img { width:30px; }

ul.nav-menu > li.nav_option { position:relative; margin-left:0; }
ul.nav-menu > li.nav_option > a { color: #fff; display:block; /*padding-left:15px;*/ padding-right:15px; text-align:center; padding-top: 15px; }
ul.nav-menu > li.nav_option:hover > a { opacity:1 !important;}
ul.nav-menu > li.nav_option > a:hover { opacity:.3 !important;}
ul.nav-menu > li.nav_option > a > img { width:30px; }

ul.nav-menu > li.nav_option > ul { position:absolute; top:100%; right:0; display:none; }
ul.nav-menu > li.nav_option > ul > li { background: #000; }
ul.nav-menu > li.nav_option > ul > li > a { padding: 0px; line-height: 60px; color: #fff; display:block; padding-left: 30px; padding-right: 30px; text-align:center; white-space: nowrap; font-size:14px; }
ul.nav-menu > li.nav_option > ul > li:hover { background: #f3f3f3; }
ul.nav-menu > li.nav_option > ul > li:hover > a { color: #000; opacity: .3; }

.nav-toggle { display:none !important; }
.nav_cart_mobile { position:absolute; top:22px; right:60px; display:none; }
.nav_cart_mobile a { display:flex; align-items: center;}
.nav_cart_mobile a span { padding:5px 10px; line-height: 1em; }

.banner { background-size: auto 100%; height: 399px;  }
.banner.about { background: url(../images/banner/about.jpg) no-repeat center center; }
.banner.product-landing { background: url(../images/banner/product-landing.jpg) no-repeat center center; }
.banner.product { background: url(../images/banner/product.jpg) no-repeat center center; }
.banner.release { background: url(../images/banner/release.jpg) no-repeat center center; }
.banner.catalogue { background: url(../images/banner/catalogue.jpg) no-repeat center center; }
.banner.contact { background: url(../images/banner/contact.jpg) no-repeat center center; }
.banner.member { background: url(../images/banner/member.jpg) no-repeat center center; }
.banner.cart { background: url(../images/banner/cart.jpg) no-repeat center center; }

.banner .container { position: relative; height: 399px;  }
.banner .container h1 { position: absolute; bottom: 0; left: 60px; color: #fff; font-size: 100px; line-height:70px; display:block;  }

/* ------------------------------------------
   Footer //  Normal  for all
--------------------------------------------- */

footer { background: #eef0f1; position: relative;  }

.btn_back2top { position: absolute; right: 20px;  width: 20%; text-align: right;}
.btn_back2top a { color: #333; font-size: 14px; line-height: 55px; }
.btn_back2top .icon { fill: #333; width: 10px; height: 12px; margin-right: 10px; margin-top: 15px; }
.btn_back2top:hover { opacity: .5 }

.copyright p { line-height: 55px; font-size: 14px; color: #666666; text-align: left; padding-left: 20px; }

/* ------------------------------------------
   List
--------------------------------------------- */

.grid { padding-top: 40px; text-align: center; }
.grid-item, .grid-sizer { width: 25%; border: 5px solid #fff; height: 350px; }

.grid-item--width2 { width: 50%; }
.grid-item figure { text-align: left; padding: 20px  }
.grid-item figure h4 {  font-size: 14px; font-family: 'Gotham-Book'; line-height: 20px; }
.grid-item figure h3 { line-height: 30px; }
.grid-item  { position: relative; cursor: pointer; overflow: hidden; }
.grid-item .border_frame { border: 10px solid #f9f9f9; height: 340px; position: relative; }
.grid-item img { max-width: 100%;  }
.grid-item h5 { text-align: center; width: 100%; font-size: 1em; margin: 20px 0;  text-transform: none; position: absolute; bottom: 0;  }
.grid-item:hover { background: #f9f9f9;  }

.btn_more { text-align: center; margin: 50px 0;  }

/* ------------------------------------------
   index
--------------------------------------------- */

.index { position: relative; width: 100%; }
.index .main_content { width: 100%; height: 100%; min-height: 700px; background-size: cover; background-image: url(../images/banner/homepage.jpg);  margin: 0 auto; text-align: center; padding-top: 15%; }
.index .main_content h1, .index .main_content h2 { color: #fff; }
.index .main_content h1 { font-size: 120px; letter-spacing: 5px; }
.index .main_content h2 { font-size: 30px; font-family: 'Gotham-Medium'; letter-spacing: 2px; }
.index .main_content .btn_area { margin-top: 50px; }

.index .footer { background: url(../images/img/footer_index.png) repeat-x bottom; text-align: center; color: #fff; position: absolute; bottom:0; width: 100%; padding: 35px 20px;}


/* ------------------------------------------
   About Us
--------------------------------------------- */

.about .left_content { background: url(../images/img/about2.jpg) right top no-repeat; min-height: 640px;  }
.about .right_content { max-width: 570px; padding-top: 100px;  }


/* ------------------------------------------
  Catalogue
--------------------------------------------- */
.catalogue .grid { margin-bottom: 50px; }
.catalogue .grid-item, .catalogue .grid-sizer { height: 360px; width: 25%;}
.catalogue .grid-item--width2 { height: 720px; width: 50%;}
.catalogue .grid-item .btn_g { margin: 0; width: 100%; position: absolute; bottom: 0; left: 0; }
.catalogue .grid-item .btn_g a:hover { background: #000; color: #fff;  }
.catalogue .grid-item .border_frame { height: 350px; position: relative; overflow: hidden; }
.catalogue .grid-item .border_frame img { width: auto; height: auto;  max-width: initial;  }


/* ------------------------------------------
   product landing
--------------------------------------------- */
.landing .grid-item, .landing .grid-sizer { width: 33.3333333%; border: 5px solid #fff; height: 290px; }
.landing .grid-item--height2 { height: 580px;  }
.landing .grid-item a { display: block; height: 100%; width: 100%; }
.landing .grid-item:hover { opacity: 0.7; }

.landing .page_content .container { padding-bottom: 50px; }


/* ------------------------------------------
   product detail
--------------------------------------------- */
.breadcrumb { padding-bottom: 70px; }
.breadcrumb ul li { float: left; padding-left: 20px;  }
.breadcrumb ul li.frist { padding-left: 0px;  }
.breadcrumb ul li .icon { float: left; margin-right: 5px; }
.breadcrumb ul li a { line-height: 20px; padding-right: 40px; background: url(../images/svg/arrow.svg) right center no-repeat;  }

.control { margin: 0 0 30px 0; display:flex; justify-content: space-between;}
.control a { display:inline-block;  padding: 10px 15px;}
.control a.back { color:#fff; background: #000; }
.control a.back:hover { color:#000; background:#f3f3f3; }
.control a.prev, .control a.next { color: #fff; background: #82b300; }
.control a.prev:hover, .control a.next:hover { color: #82b300; background: #fff; }

.detail_page .product_photo img { width: 100%; }

.right_content .main_content { padding-left: 50px; }
.right_content .main_content h4 { font-size: 18px; font-family: 'Gotham-Book'; line-height: 20px; }
.right_content .main_content h2 { line-height: 40px; font-size:20px; font-weight:normal; margin-bottom:10px; color:#333; }
.right_content .main_content .detail_content { font-size:30px; font-weight:bold; line-height:1.2em; color:#000; }
.right_content .main_content p { margin-top: 30px; }
.right_content .main_content ul.detail_list { margin-top: 20px; }
.right_content .main_content ul.detail_list strong{ width: 25%; display: inline-block; }

.right_content .main_content .btn_g { margin:0px; margin-top: 100px }

.quote_msg { text-align: center; margin: 70px 0; }

/* ------------------------------------------
   Relesae
--------------------------------------------- */
.relesae .grid-item { height: 330px; }
.relesae .grid-item .border_frame { height: 320px; overflow: hidden;}
.relesae .grid-item .border_frame img { width: auto; height: auto;  max-width: initial; }
.relesae .grid-item .border_frame:hover { border: 10px solid #f1f1f1;  }

.fancybox-arrow:after, .fancybox-button, .fancybox-infobar__body { background: rgba(130,179,0,1);   }
.fancybox-arrow:after {background: url(../images/svg/popup_arrow.svg) center center no-repeat rgba(130,179,0,1); }
.fancybox-arrow { opacity: 1 !important;}
.fancybox-arrow:hover { opacity: .5 !important; }

/* ------------------------------------------
   Contact Us
--------------------------------------------- */

.contact h3 { margin-bottom: 50px; }
.contact h4 { margin-bottom: 10px; }

.contact_form { margin-top: 100px; margin-bottom: 130px; max-width: 600px; float: left;  }
.contact_form .btn_b , .contact_form .btn_g { margin: 0; margin-top: 5px; width: 49.7%; }
.contact_form .btn_g { float: right; }
.contact_form .btn_b a, .contact_form .btn_g a { text-align: center; padding:0 10px; }

.input { width: 100%; margin-bottom: 5px; display: inline-block; background: #f9f9f9;   }
.input input { color: #333; padding: 20px; width: 100%; -webkit-transition: all 0.1s; -moz-transition: all 0.5s; transition: all 0.5s;}
.textarea { width: 100%; }
.textarea textarea { color: #333; width: 100%; height: 130px; padding: 20px;  background: #f9f9f9; -webkit-transition: all 0.1s; -moz-transition: all 0.5s; transition: all 0.5s;}
.input input:focus, .textarea textarea:focus {  background: #f3f3f3; }

.error_msg { color: #c74040; margin-bottom: 40px; display:none; }
.error_input input , .error_input textarea, 
.error_input input:focus, .error_input textarea:focus
 { background: #FFEEEB; }

.contact_way { float: right; max-width: 400px; margin-top: 100px; }
ul.cp-contact li { margin-bottom: 5px; position:relative; padding-left: 60px; }
ul.cp-contact li svg { position:absolute; top:0; left:0; }
ul.cp-contact li span { color: #999999; line-height: 92px; float: left; width:10%;  }
ul.cp-contact li p { line-height: 40px; color: #333 }
ul.cp-contact li p, ul.as1-contact li a{ color: #000000; }
ul.cp-contact li a:hover { color: #999; }

#map { width: 100%; height:300px; margin-top: 40px; }

.retail-purchase { background-color:#d97f2e; padding: 15px;}
.retail-purchase h5 { font-size: 16px; font-weight:bold; color:#fff; }
.retail-purchase span { font-size: 16px; color:#fff; }
.retail-purchase span a { color:#fff; text-decoration: underline; cursor:pointer;}

/* ------------------------------------------
   login
--------------------------------------------- */
.login .page_content .container { padding: 0 70px !important; }
.login h3 { margin-bottom: 50px; }
.login .contact_form { margin: 50px auto; width: 47%;  }
.login .new_account { max-width: 600px; margin: 50px auto; width: 47%;  float: right;}



/* ------------------------------------------
   Cart
--------------------------------------------- */

.cart .inquiry_list .product_photo { width: 25%; float: left; }
.cart .inquiry_list .product_detail { width: 45%;  float: left; margin-top: 15px;}
.cart .inquiry_list .product_detail h4 { font-size: 16px; }
.cart .inquiry_list .product_detail h5 { text-transform:none; font-size:20px; margin-bottom:10px; font-weight:normal; color:#000; font-family: inherit; }
.cart .inquiry_list .textarea { width: 30%; float: left; margin-top: 40px; }

.cart .contact_form { max-width: 100%; }
.cart .contact_form .input { width: 49.7%; margin-bottom: 5px;  }

.cart .inquiry_list ul li { border-bottom: solid 1px #f9f9f9; }

.btn_cancel { display:inline-block; margin:0px; padding:0; font-size: 14px; letter-spacing: 0px;}
.btn_cancel a { display:block; line-height: 30px; padding: 0 20px; font-family: 'Gotham-Book'; color: #fff; background: #82b300;  text-transform: uppercase;}
.btn_cancel .icon { height: 19px; float: left; margin: 5px 5px 0 0; }
.btn_cancel:hover a{ background-color: #000; color: #fff; }
.btn_cancel:hover > a .icon { fill: #f9f9f9;  }

@media only screen and (max-width: 1200px) {
    .contact_form, .contact_way { max-width: 48%; }
}
@media only screen and (max-width: 1024px) {
    /*ul.nav-menu > li.nav_login { padding-left: 20px; padding-right: 20px;  }*/

    .container { padding: 0 20px;  }
    .left_content, .right_content { padding: 0 20px; }

    .banner .container h1 { left: 20px; font-size: 80px; line-height: 57px;  }
    .right_content .main_content { padding-left: 0px; }
    .right_content .main_content .btn_g { margin-top: 20px; }
    .catalogue .grid-item, .catalogue .grid-sizer { width: 33.3333333%;}
    .catalogue .grid-item--width2 { width: 33.3333333%;}
    
    ul.cp-contact li p { width: calc(100% - 40px); padding-left: 0px; }

    .login .page_content .container { padding: 0 30px !important; }
}

@media only screen and (max-width: 981px) {

    .left_content, .right_content { width: 100%; }
    .right_content { margin-top: 40px; }

    .banner, .banner .container { height: 250px; }
    .banner .container h1 { font-size: 65px;line-height: 45px !important;}

    .index .main_content h1 { line-height: 100px; } 
    .index .main_content { padding-top: 35%;  }

    .grid-item, .grid-sizer { width: 50%; border: 5px solid #fff; height: 400px; }
    .grid-item .border_frame { height: 390px; position: relative; }
    .grid-item--width2 { width: 100%; }

    .about .left_content { display: none; }
    .about .right_content { padding: 0 20px; max-width: 100%; padding-bottom: 40px; }
    .landing .grid-item, .landing .grid-sizer { width: 50%; border: 5px solid #fff; height: 290px; }
    
    .catalogue .grid-item, .catalogue .grid-sizer { width: 50%; }
    .catalogue .grid-item--width2 { width: 50%; }

    .login .page_content .container { padding: 0 20px !important; }
    .login .contact_form, .login .new_account, .contact_form, .contact_way { max-width: 100%; width: 100%; margin-top: 50px;}
    .contact h3, .login h3 { margin-bottom: 20px; }
    ul.cp-contact li { margin-bottom: 10px; }
    .contact_form { margin-bottom: 50px; }

    .cart .inquiry_list .textarea { margin-bottom: 40px; }
    .cart .contact_form .input { width: 49.6%; }

    ul.nav-menu > li.nav_cart { display:none; }

    .control a { font-size:14px; }
}

@media only screen and (max-width: 980px) {

    .btn_b , .btn_g { width: calc(100% - 20px); margin: 0px; }
    .btn_b a, .btn_g a { padding: 0; text-align: center; }

    ul.nav-menu > li { margin: 0; }
    ul.nav-menu > li a { line-height: 80px; }
    .navigation-portrait .nav-menu > li > a { padding: 0; padding-left: 20px; }
    ul.nav-menu > li.nav_login { padding-left:0; padding-right:0; }

	ul.nav-menu > li.nav_login a { padding-left: 20px; text-align: left; }
	ul.nav-menu > li.nav_login:hover { background:#000; }
	ul.nav-menu > li.nav_login:hover > a { color:#fff; }
	
	ul.nav-menu > li.nav_option > a { display:none; }
	ul.nav-menu > li.nav_option > ul { position:relative; top:auto; right:auto; display:block; }
	ul.nav-menu > li.nav_option > ul > li { border-top: solid 1px #fff; }
	ul.nav-menu > li.nav_option > ul > li > a { padding-left: 20px; text-align:left;}
	ul.nav-menu > li.nav_option > ul > li:hover { background:#000; }
	ul.nav-menu > li.nav_option > ul > li:hover a { color:#fff; }
	
    .nav-toggle { right: 25px; display:block!important; }
    .nav_cart_mobile { display:flex;}
    .nav-brand { padding: 0px 20px; }
    
    .left_content, .right_content { padding: 0; }
    
    footer { padding: 40px 0; padding-top: 20px;  }
    .btn_back2top { position: relative; width: 100%; text-align: center; right: 0px; }
    .copyright p { text-align: center; padding-left: 0px; font-size: 12px; line-height: 14px;  }

    .breadcrumb ul li { padding-left: 0px;  }
    .breadcrumb ul li a { padding-right: 20px;  }

    .banner .container h1 { font-size: 44px;line-height: 33px !important; }

    .grid-item, .grid-sizer { width: 100%; border: 5px solid #fff; height: 400px; }
    .grid-item .border_frame { height: 390px; position: relative; }
    .grid-item--width2 { width: 100%; }

    .landing .grid-item, .landing .grid-sizer { width: 100%; height: 290px; }

    .catalogue .grid-item, .catalogue .grid-sizer { width: 100%; }
    .catalogue .grid-item--width2 { display: none; }

    .products .grid-item--width2 { height: 290px;}

    .detail_page .btn_g { width: calc(100% - 10px); }
    .index .main_content h1 { font-size: 70px; line-height: 80px; }
    .index .main_content h2 { font-size: 18px; }
    .index .main_content .btn_area div { width: 90%; margin-bottom: 5px; }
    .index .footer { font-size: 12px; padding: 10px 20px; }
    
    .cart .inquiry_list .product_photo { text-align: center; }
    .cart .inquiry_list .product_photo, .cart .inquiry_list .product_detail, .cart .inquiry_list .textarea { width: 100%; }
    .cart .contact_form .input { width: 100%; }

    ul.cp-contact li { margin-bottom: 0px; }
}

@media only screen and (max-width: 480px) {
	.contact_form .btn_b, .contact_form .btn_g { width:100%; }
}

@media only screen and (max-width: 320px) {
	
    .index .main_content h1 { font-size: 60px; line-height: 60px; }
    .index .main_content .btn_area { margin-top: 20px; position: relative; z-index: 100; }

    .right_content .main_content ul.detail_list strong { width: 30%; }
}