﻿body{overflow:hidden}
.mobile_layout{display:none}
/*Main Contents*/
.section {position: relative}
a.detail_view{display:inline-block;margin-top:50px;width:144px;border:1px solid #fff;padding:12px 0;font-size:0.9em;color:#fff;text-align:center}
a.detail_view img{margin-left:10px}
a.detail_view:hover{background:#00acc8;border:1px solid #00acc8}
.section_menu{position:fixed;right:1%;top:50%;z-index:100;width:100px;margin-top:-38px}
.section_menu ul li{text-align:left;line-height:1.4em;color:#fff;font-size:0.7em;background:url(../img/section_menu_off.png) no-repeat right center;min-height:4px;display:inline-block;width:100%;text-indent:-999999px;letter-spacing:-1px;margin:2px 0;cursor:pointer}
.section_menu ul li.active{text-indent:0;text-align:right;background:url(../img/section_menu_on.png) no-repeat right center;padding-right:13px}
.section_menu ul li:hover{text-indent:0;text-align:right;background:url(../img/section_menu_on.png) no-repeat right center;padding-right:13px}
.section_menu.gray ul li{color:#343434;background:url(../img/section_menu_gray_off.png) no-repeat right center}
.section_menu.gray ul li.active{background:url(../img/section_menu_gray_on.png) no-repeat right center}
.section_menu.gray ul li:hover{background:url(../img/section_menu_gray_on.png) no-repeat right center}
/*Desktop Layout*/
.desktop_layout .layout_data{height:auto!important}
/*Main Campaign*/
    .main_campaign .fp-controlArrow.fp-prev{width:auto;left:5%;border:none;display:none}
    .main_campaign .fp-controlArrow.fp-next{width:auto;right:5%;border:none;display:none}
    .main_campaign .fp-slidesNav li{width:30px;height:30px;display:inline-block;margin:0 5px}
    .main_campaign .fp-slidesNav li a{width:100%;height:30px;display:block;text-indent:-99999px;background:url(../img/main_banner_btn.png) no-repeat 0 0}
    .main_campaign .fp-slidesNav li a span{display:none}
    .main_campaign .fp-slidesNav li a.active{background-position:-30px 0}
.main_campaign .slogan{position:absolute;width:100%;left:0;top:50%;z-index:9;color:#fff}
    .main_campaign .slogan h3{width:100%;font-size:5em;font-family: 'Anton', sans-serif;line-height:1.2em;letter-spacing:1px;font-weight:400;text-shadow:5px 1px 3px #1a1a1a;display:inline-block;padding:0 5%;text-transform:uppercase}
    .main_campaign .slogan h4{width:100%;margin-top:30px;font-size:1.2em;font-weight:normal;line-height:1.2em;;display:inline-block;padding:0 5%;text-transform:uppercase}
    .main_campaign .slides li{position:relative}
    .main_campaign .mobile_bg{display:none}
    /*campaign1*/
    .main_campaign .campaign1{background:url(../img/video_ie8_bg3.jpg) no-repeat;background-size:cover;position:relative;overflow:hidden}
    .main_campaign .campaign1 .slogan{margin-top:-119px}
    .main_campaign .campaign1 video{width:auto;height:auto;position:absolute;left:0;top:0;z-index:5;min-width:100%;min-height:100%}
    .main_campaign .campaign1 .video_ie8_bg{display:none}
    /*campaign2*/
    .main_campaign .campaign2{background:url(../img/campaign2_bg.jpg) no-repeat center center;background-size:cover;position:relative}
    .main_campaign .campaign2 .slogan{margin-top:-188px}
    /*campaign3*/
    .main_campaign .campaign3{background:url(../img/campaign3_bg.jpg) no-repeat right center;background-size:cover;position:relative}
    .main_campaign .campaign3 .slogan{margin-top:-211px;text-align:left}
    .main_campaign .campaign3 .slogan h3{text-align:left}
    .main_campaign .campaign3 .slogan h4{width:40%;display:block}
    .main_campaign .campaign3 .slogan a.detail_view{text-align:center;margin-left:5%}
     /*campaign4*/
    .main_campaign .campaign4{background:url(../img/video_ie8_bg.jpg) no-repeat;background-size:cover;position:relative;overflow:hidden}
    .main_campaign .campaign4 .slogan{margin-top:-119px}
    .main_campaign .campaign4 video{width:auto;height:auto;position:absolute;left:0;top:0;z-index:5;min-width:100%;min-height:100%}
    .main_campaign .campaign4 .video_ie8_bg{display:none}
    /*Main New Products*/
    .main_new_products article{width:50%;height:100%;float:left;margin-top:-2px}
    .main_new_products article .prd_use{color:#b7b7b7;display:block;line-height:46px;font-style:italic}
    .main_new_products article .prd_content{font-size:0.9em;color:#fff;display:block;line-height:26px;text-shadow:1px 1px 2px #000}
    .main_new_products article.new_prd1{background:url(../img/prd/new_prd3.jpg) no-repeat right center;background-size:cover}
    .main_new_products article.new_prd1 .prd_info{position:absolute;top:16%;left:5%;text-align:left}
    .main_new_products article.new_prd2{background:url(../img/prd/new_prd4.jpg) no-repeat left bottom;background-size:cover}
    .main_new_products article.new_prd2 .prd_info{position:absolute;bottom:12%;right:5%;text-align:right}
    .main_new_products article.new_prd2 .prd_info .detail_view{float:right}
    .main_new_products a.detail_view{margin-top:25px}
/*Main Klevv News*/
.main_klevv_news{background:#fff}
    .main_klevv_news article{width:1200px;display:inline-block;text-align:left}
    .main_klevv_news h3{color:#000;font-size:2.6em;position:relative;margin-bottom:75px;width:100%;text-align:center}
    .main_klevv_news h3 a{position:absolute;display:inline-block;border:1px solid #3a3a3a;padding:15px 50px;color:#3a3a3a;border-radius:30px;font-size:0.3em;font-weight:500;top:50%;margin-top:-20px;font-weight:normal;right:0}
    .main_klevv_news h3 a img{vertical-align:middle}
    .main_klevv_news h3 a img.white{display:none}
    .main_klevv_news h3 a:hover{background:#00acc8;border:1px solid #00acc8;color:#fff;text-decoration:underline}
    .main_klevv_news h3 a:hover img.gray{display:none}
    .main_klevv_news h3 a:hover img.white{display:inline-block}
    .main_klevv_news h3 a img{margin-left:15px}
    .main_klevv_news ul{width:295px;display:inline-block;margin-bottom:25px;position:relative;padding:20px;border:1px solid #fff}
    .main_klevv_news ul:hover{background:#e7f6fa;border:1px solid #dbeef4}
    .main_klevv_news ul li.date{color:#00acc8;font-size:12px}
    .main_klevv_news ul li a:hover{text-decoration:underline}
    .main_klevv_news ul li.tit{margin:20px 0}
    .main_klevv_news ul li.tit a{width:100%;display:block;font-size:14px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:#000}
    .main_klevv_news ul li.text{min-height:70px}
    .main_klevv_news ul li.text a{color:#909090;font-size:11px;line-height:22px;width:100%;height:6em;display:block;overflow:hidden;}
    .main_klevv_news ul li.more a{font-size:11px;color:#626262}
    .main_klevv_news ul li.more a img{margin-left:20px}
/*Main Your Hand*/
.main_your_hand{background:#fff}
    .main_your_hand article{width:90%;display:inline-block}
    .main_your_hand h3{color:#000;font-size:2.6em;position:relative;margin-bottom:30px;width:100%;text-align:center;text-transform:uppercase}
    .main_your_hand h4{color:#000;position:relative;width:100%;text-align:center;font-weight:300;line-height:1.4em;font-size:1.2em}
    .main_your_hand a.view_btn{display:inline-block;border:1px solid #3a3a3a;padding:15px 50px;color:#3a3a3a;border-radius:30px;font-size:0.8em;margin-top:30px}
    .main_your_hand a.view_btn img{margin-left:15px;vertical-align:middle}
    .main_your_hand a.view_btn img.white{display:none}
    .main_your_hand a.view_btn:hover{background:#00acc8;border:1px solid #00acc8;color:#fff;text-decoration:underline}
    .main_your_hand a.view_btn:hover img.gray{display:none}
    .main_your_hand a.view_btn:hover img.white{display:inline-block}
    .main_your_hand .data_list{width:100%;height:494px;display:inline-block;margin-top:40px;position:relative}
    .main_your_hand .data_list a{position:absolute;background-color:#00acc8;background-repeat:no-repeat;background-size:cover;background-position:center center}
    .main_your_hand .data_list a img{width:100%;height:100%}
    .main_your_hand .data_list a span{position:absolute;right:2%;bottom:2%}
    .main_your_hand .data_list a span img{width:100%;height:auto}
    .main_your_hand .data_list a.data1{width:33.7%;height:494px;left:0;top:0}
    .main_your_hand .data_list a.data2{width:15.3%;height:256px;left:34.2%;top:0}
    .main_your_hand .data_list a.data3{width:15.3%;height:256px;left:50.3%;top:0}
    .main_your_hand .data_list a.data4{width:31.4%;height:230px;left:34.2%;bottom:0}
    .main_your_hand .data_list a.data5{width:33.8%;height:494px;right:0;top:0}
a.main_go_top_btn{position:fixed;right:2%;bottom:20px;z-index:1;z-index:9}
/*Media Query*/
@media all and (max-width:1400px) {
    /*Main New Products*/
    .main_new_products article.new_prd1 .prd_info{bottom:10%}
    .main_new_products article div .logo{width:80%}
    .main_new_products article.new_prd1 .prd_info{left:2%}
    .main_new_products article.new_prd2 .prd_info{right:2%}
    .main_new_products article .prd_content{font-size:0.8em}
}   
@media all and (max-width:1024px) {
    /*Common*/
     a.detail_view{margin-top:15px;width:109px;padding:6px 0;font-size:0.7em}
     a.detail_view img{margin-left:8px}
     /*Main Campaign*/
    .main_campaign .flex-control-nav li{width:20px;height:22px;cursor:pointer}
    .main_campaign .flex-control-nav li a{background:url(../img/main_banner_btn2.png) no-repeat 0 0;height:22px}
    .main_campaign .flex-control-nav li a.flex-active{background-position:-20px 0}
    /*Main New Products*/
    .main_campaign .slogan h3{font-size:3.5em}
    .main_campaign .slogan h4{font-size:0.75em}
    .main_new_products article.new_prd1 .prd_info{bottom:8%}
    .main_new_products article .prd_info>img{width:50%}
    .main_new_products article .prd_use{font-size:0.9em}
    .main_new_products article .prd_content{font-size:0.7em;line-height: 18px}
    /*Main News Latest*/
    .main_klevv_news article{width:90%;padding-top:130px}
    .main_klevv_news h3{font-size:2em}
    .main_klevv_news h3 a{right:123px;height:33px;line-height:34px;font-size:0.38em;padding:0px 15px;top:60%}
    .main_klevv_news h3 a img{margin-left:9px}
    .main_klevv_news ul{width:30%;height:175px;margin-bottom:0;padding:0 20px 20px 20px;display:inline-block;text-align:left;margin-left:1.5%;margin-right:1.5%}
    .main_klevv_news ul li.more{bottom:40px}
    .main_klevv_news ul li.text a{line-height:15px}
    .main_klevv_news ul li.tit{margin:10px 0}
    /*Main Your Hand*/
    .main_your_hand h3{font-size:2em}
    .main_your_hand h3 a{right:123px;height:33px;line-height:34px;font-size:0.38em;padding:0px 15px;top:60%}
    .main_your_hand h3 a img{margin-left:9px}
}
@media all and (max-width:880px) {
    /*Document*/
    html.fp-enabled, .fp-enabled body{overflow:initial;overflow-y:auto;}
    .fp-enabled body{height:auto;overflow-x:hidden;}
    body{background:#000}
    /*Mobile Layout*/
    header.mobile.white_st{background:#fff}
    header.mobile.white_st h1 img.type_black{display:block}
    header.mobile.white_st h1 img.type_white{display:none}
    header.mobile.white_st .m_btn_area a.m_search_btn{background:url(../img/mobile/top_btn_icon3.png) no-repeat center center}
    .desktop_layout{display:none}
    .mobile_layout{width:100%;display:inline-block}
    /*Top Banner*/
    .m_top_banner{width:100%;display:inline-block;position:relative}
    .m_top_banner .flex-viewport{height:100%;width:100%;display:inline-block}
    .m_top_banner ul.slides li{line-height:800px}
    .m_top_banner ul.slides li > .slogan{width:100%;color:#fff;vertical-align:middle;display:inline-block;line-height:0}
    .m_top_banner ul.slides li > .slogan h3{font-size:3.5em;font-family: 'Anton', sans-serif;line-height:1.2em;letter-spacing:1px;font-weight:400;text-shadow:5px 1px 3px #1a1a1a;text-transform:uppercase;padding:0 2%}
    .m_top_banner ul.slides li > .slogan h4{font-size:1em;width:100%;margin-top:30px;font-weight:300;line-height:1.4em;text-transform:uppercase;text-shadow:5px 1px 3px #1a1a1a;padding:0 2%}
    .m_top_banner ul.slides li > .slogan a.ban_btn{padding:0 8.5%;line-height:3.6em;display:inline-block;margin-top:30px;font-weight:300}
    .m_top_banner ul.slides li > .slogan a.ban_btn img{margin-left:10px}
    .m_top_banner ul.slides li > .slogan a.type1{background:#00acc8;color:#fff;border:1px solid #00acc8}
    .m_top_banner ul.slides li > .slogan a.type2{color:#fff;border:1px solid #fff}
    .m_top_banner ol.flex-control-nav{width:100%;position:absolute;left:0;bottom:2%;text-align:center}
    .m_top_banner ol.flex-control-nav li{width:4.7%;display:inline-block}
    .m_top_banner ol.flex-control-nav li span{display:none}
    .m_top_banner ol.flex-control-nav li a{display:block}
    .m_top_banner ol.flex-control-nav li a img{width:100%}
    .m_top_banner ol.flex-control-nav li a img.on{display:none}
    .m_top_banner ol.flex-control-nav li a.flex-active img.off{display:none}
    .m_top_banner ol.flex-control-nav li a.flex-active img.on{display:block}
    .m_top_banner ul.slides li.campain1{background: url(../img/mobile/campaign5_bg.jpg) no-repeat center center;background-size:cover}
    .m_top_banner ul.slides li.campain2{background:url(../img/mobile/campaign2_bg.jpg) no-repeat center center;background-size:cover}
    .m_top_banner ul.slides li.campain3{background:url(../img/mobile/campaign3_bg.jpg) no-repeat center center;background-size:cover}
    .m_top_banner ul.slides li.campain4{background:url(../img/mobile/campaign1_bg.jpg) no-repeat center center;background-size:cover}
    /*Main New Products*/
    .m_main_new_products{margin-top:-2px}
    .m_main_new_products article{position:relative;width:100%;display:inline-block}
    .m_main_new_products img.psd_img{width:100%}
    .m_main_new_products article ul{width:94%;position:absolute;top:15%;color:#fff;padding:0 5.5%}
    .m_main_new_products article ul.right{width:75%;top:44%;right:0;color:#fff;padding:0 5.5%}
    .m_main_new_products article ul li.logo{font-size:2em;font-weight:300;line-height:1em;text-shadow:2px 2px 3px #000}
    .m_main_new_products article ul li.logo img{width:100%}
    .m_main_new_products article ul li.logo span{font-weight:700;font-size:1.4em}
    .m_main_new_products article ul li.type{font-size:1.4em;line-height:1em;color:#b7b7b7;font-style:italic;font-weight:300;margin:10px 0 10px 0;text-shadow:2px 2px 3px #000}
    .m_main_new_products article ul li.text{font-size:0.9em;line-height:2em;color:#fff;font-weight:300;text-shadow:2px 2px 3px #000}
    .m_main_new_products article ul li a.view{font-size:0.9em;padding:0 8.6%;line-height:2.2em;display:inline-block;margin-top:18px;font-weight:300;color:#fff;border:1px solid #fff}
    .m_main_new_products article ul li a.view img{margin-left:10px}
    .m_main_new_products article:first-child ul{text-align:left}
    .m_main_new_products article:nth-child(2){margin-top:-2px}
    .m_main_new_products article:nth-child(2) ul{position:absolute;top:47%;text-align:right}
    /*Main Klevv News*/
    .m_main_klevv_news{background:#fff;margin-top:-2px}
    .m_main_klevv_news article{width:100%;display:inline-block;padding:100px 4.4%}
    .m_main_klevv_news h3{font-size:2.2em;line-height:1em;text-transform:uppercase;color:#000}
    .m_main_klevv_news a.go_btn{font-size:0.9em;padding:0 6.5%;line-height:3.3em;display:inline-block;margin-top:30px;font-weight:300;color:#3a3a3a;border:1px solid #3a3a3a;border-radius:30px;margin-bottom:30px}
    .m_main_klevv_news a.go_btn img{margin-left:10px}
    .m_main_klevv_news ul{width:100%;display:inline-block;border-bottom:1px solid #e3e3e3;text-align:left;padding:25px 2%}
    .m_main_klevv_news ul li.date{color:#00acc8}
    .m_main_klevv_news ul li.tit{margin:20px 0}
    .m_main_klevv_news ul li.tit a{width:100%;display:block;font-size:1.2em;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:#000}
    .m_main_klevv_news ul li.text{margin-bottom:20px}
    .m_main_klevv_news ul li.text a{color:#909090;font-size:0.9em;line-height:1.4em}
    .m_main_klevv_news ul li.more a{font-size:1em;color:#626262;letter-spacing:5px}
    .m_main_klevv_news ul li.more a img{margin-left:20px}
    /*Main Your Hand*/
    .m_main_your_hand{background:#fff}
    .m_main_your_hand article{width:100%;display:inline-block;padding:90px 1%}
    .m_main_your_hand h3{font-size:2.2em;line-height:1em;text-transform:uppercase;color:#000}
    .m_main_your_hand h4{font-weight:300;line-height:1.4em;font-size:1em;color:#000;margin:25px 0}
    .m_main_your_hand a.view_btn{font-size:0.9em;padding:0 6.5%;line-height:3.3em;display:inline-block;font-weight:300;color:#3a3a3a;border:1px solid #3a3a3a;border-radius:30px;margin-bottom:80px}
    .m_main_your_hand a.view_btn img{margin-left:10px}
    .m_main_your_hand .data_list{width:100%;display:inline-block}
    .m_main_your_hand .data_list a{width:49%;height:265px;margin:4px 0.5%;float:left;background-position:center center;background-size:cover;background-repeat:no-repeat;position:relative}
    .m_main_your_hand .data_list a img{width:100%;height:100%}
    .m_main_your_hand .data_list a span{width:10%;position:absolute;right:2%;bottom:2%}
    .m_main_your_hand .data_list a span img{height:auto}
    /*GoTop*/
    a.m_main_go_top_btn{width:4%;position:fixed;right:2%;bottom:20px;z-index:9}
    a.m_main_go_top_btn img{width:100%}
}
@media all and (max-width:570px) {
    header.mobile.white_st .m_btn_area a.m_search_btn{background-size:50%}
    /*Mobile Banner*/
    .m_top_banner ul.slides li{line-height:500px}
    .m_top_banner ul.slides li > .slogan h3{font-size:2.8em}
    .m_top_banner ul.slides li > .slogan h4{font-size:0.8em;line-height:1.8em}
    .m_top_banner ul.slides li > .slogan a.ban_btn{font-size:0.8em}
    /*Main New Products*/
    .m_main_new_products article{background-position:center center;background-repeat:no-repeat;background-size:cover;padding:58px 0;height:80vw}
    .m_main_new_products img.psd_img{display:none}
    .m_main_new_products article ul{position:static}
    .m_main_new_products article ul.right{margin-left:24%}
    .m_main_new_products article ul li.logo{font-size:1.6em}
    .m_main_new_products article ul li.type{font-size:1.2em}
    .m_main_new_products article ul li.text{font-size:0.8em;line-height:1.6em}
    .m_main_new_products article ul li a.view{font-size:0.8em}
    .m_main_new_products article ul li.text br{display:none}
    /*Main Klevv News*/
    .m_main_klevv_news article{padding:60px 4.4%}
    .m_main_klevv_news h3{font-size:2em}
    .m_main_klevv_news a.go_btn{font-size:0.8em;line-height:3em}
    .m_main_klevv_news ul li.date{font-size:0.9em}
    .m_main_klevv_news ul li.tit a{font-size:0.9em}
    .m_main_klevv_news ul li.text a{font-size:0.8em}
    .m_main_klevv_news ul li.more a{font-size:0.8em}
    /*Main Your Hand*/
    .m_main_your_hand article{padding:50px 1%}
    .m_main_your_hand h3{font-size:2em}
    .m_main_your_hand h4{font-size:0.9em}
    .m_main_your_hand a.view_btn{font-size:0.8em;line-height:3em;margin-bottom:50px}
    /*GoTop*/
    a.m_main_go_top_btn{width:5%}
}
@media all and (max-width:450px) {
    /*Mobile Banner*/
    .m_top_banner ul.slides li > .slogan h3{font-size:2.2em}
    .m_top_banner ul.slides li > .slogan h4{font-size:0.7em}
    .m_top_banner ul.slides li > .slogan h4 br{display:none}
    .m_top_banner ul.slides li > .slogan a.ban_btn{font-size:0.7em}
    /*Main New Products*/
    .m_main_new_products article ul li.logo{font-size:1.4em}
    .m_main_new_products article ul li.type{font-size:0.8em}
    .m_main_new_products article ul li.text{font-size:0.6em}
    .m_main_new_products article ul li a.view{font-size:0.7em}
    /*Main Klevv News*/
    .m_main_klevv_news h3{font-size:1.8em}
    .m_main_klevv_news a.go_btn{font-size:0.7em}
    .m_main_klevv_news ul li.date{font-size:0.8em}
    .m_main_klevv_news ul li.tit{margin:15px 0}
    .m_main_klevv_news ul li.tit a{font-size:0.9em}
    .m_main_klevv_news ul li.text a{font-size:0.7em}
    .m_main_klevv_news ul li.more a{font-size:0.7em}
    /*Main Your Hand*/
    .m_main_your_hand h3{font-size:1.8em}
    .m_main_your_hand h4{font-size:0.8em}
    .m_main_your_hand a.view_btn{font-size:0.7em}
    .m_main_your_hand .data_list a{height:200px}
    /*GoTop*/
    a.m_main_go_top_btn{width:7%}
}
@media all and (max-width:370px) {
    /*Main New Products*/
    .m_main_new_products article ul li.logo{font-size:1em}
    .m_main_new_products article ul li.type{font-size:0.8em}
    .m_main_new_products article ul li.text{font-size:0.5em}
    .m_main_new_products article ul li.text br{display:none}
    .m_main_new_products article ul li a.view{font-size:0.6em}
    /*Main Klevv News*/
    .m_main_klevv_news article{padding:40px 4%}
    .m_main_klevv_news h3{font-size:1.4em}
    .m_main_klevv_news a.go_btn{font-size:0.6em}
    .m_main_klevv_news a.go_btn{margin:20px 0 0 0}
    .m_main_klevv_news ul li.date{font-size:0.7em}
    .m_main_klevv_news ul li.tit{margin:10px 0}
    .m_main_klevv_news ul li.tit a{font-size:0.8em}
    .m_main_klevv_news ul li.text a{font-size:0.6em}
    .m_main_klevv_news ul li.more a{font-size:0.6em}
    /*Main Your Hand*/
    .m_main_your_hand article{padding:30px 1%}
    .m_main_your_hand h3{font-size:1.4em}
    .m_main_your_hand h4{font-size:0.7em;margin:20px 0}
    .m_main_your_hand a.view_btn{font-size:0.6em;margin-bottom:20px}
    .m_main_your_hand .data_list a{height:165px}
    /*GoTop*/
    a.m_main_go_top_btn{width:8%}
}