/* BASIC css start */
.swiper-button-next:after, .swiper-button-prev:after {display:none; }

.visualSwiper { position:relative; overflow:hidden;}
.visualSwiper .swiper-slide {position:relative; overflow:hidden; width:100%; height: 605px;background-repeat: no-repeat; background-position: center center; background-size:cover}
.visualSwiper .swiper-slide a {display:inline-block; width:100%; height:100%; }
.visualSwiper .swiper-slide.has_video .video {position:absolute; top:0; right:0; width:100%;}
.visualSwiper .swiper-slide.has_video .video_iframe {display: block;max-width:1200px;margin:0 auto;width: 100%;}
.visualSwiper .swiper-slide.has_video .video_iframe iframe {margin-top: 60px;  margin-left: 540px;}
.visualSwiper .swiper-button-next, .visualSwiper .swiper-button-prev { top: 49%; transform: translateY(-50%);width: 35px; height: 65px; background-repeat: no-repeat; background-position: top left; background-color: transparent;}
.visualSwiper .swiper-button-next {right: 3%; background-image: url(/design/jh2018/smartpc_2019/img/icon/arrow_white.svg); transform: rotate(180deg);}
.visualSwiper .swiper-button-prev {left: 3%; background-image: url(/design/jh2018/smartpc_2019/img/icon/arrow_white.svg);}
.visualSwiper .swiper-pagination { bottom:30px !important}
.visualSwiper .swiper-pagination-bullet {background:#efefef; width:10px; height:10px; margin:0 5px !important; opacity:1}
.visualSwiper .swiper-pagination-bullet-active {background:#111}
.visualSwiper .text_hide {display:none; }

.banner_box {margin: 100px 0}
.banner_list li {  display: inline-block; width: calc(33.33% - 22px); margin-right: 29px; vertical-align: top; }
.banner_list li:last-child { margin-right: 0 }
.banner_list li a {display:inline-block; width:100%; height:100%}
.banner_list li a:hover {opacity:0.5}

.section {}
.section_tit { margin: 100px 0 40px;}
.section_tit .tit { font-size: 40px; line-height: 63px; font-weight: bold; color: #111; margin-bottom: 5px;}
.section_tit .des{ color: #444; font-size: 15px;}
.section_tit.sm_tit .tit {font-size: 22px;  font-weight: bold; letter-spacing: 4px; text-align: center; color: #111111; padding: 40px 0;}

.fixed_banner_box {width: 100%; height: 470px; background: url(/design/jh2018/smartpc_2019/img/banner/Bnr_parallax_03.jpg) 50%; background-size: cover; background-attachment: fixed; position:relative}
.fixed_banner_box:after {content:""; display:inline-block; width:100%; height:100%; background:rgba(0,0,0,.1); position:absolute; top:0; right:0;  }
.fixed_banner_box .wrapper {z-index:1;display:flex;flex-direction: column;align-items: center;justify-content: center;width: 100%;height: 100%; text-align:center}
.fixed_banner_box .fix_banner_tit {font-weight: 600; color: #000; margin-bottom: 15px;}
.fixed_banner_box .fix_banner_tit span {display:block; }
.fixed_banner_box .fix_banner_tit .tit {font-size: 17px;  position: relative;  margin-bottom: 20px; font-weight: bold;}
.fixed_banner_box .fix_banner_tit .txt {font-size: 18px; letter-spacing: 10px;  font-weight: 300;}
.fixed_banner_box .fix_banner_des {font-size: 24px;  letter-spacing: 1px; color: #111; margin-bottom: 25px; font-weight: bold; line-height: 1.4;}
.fixed_banner_box .fix_banner_btn {color: #fff;  display: block; width: 150px; padding: 9px 0; margin: 0 auto; border: 1px solid #111; background: #111; font-size: 16px; line-height: 1.5; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;}

#new_section .prod_box {border-bottom: 1px solid #e5e5e5; padding-bottom: 30px }

#popular_section { }
#popular_section .section_tit {margin-top:50px}
#popular_section .section_con {display:flex; }
#popular_section .section_con > div {width:50%}
#popular_section .section_banner a {display:inline-block; width:100%; height:100%}
#popular_section .section_banner img {width:100%}

.rankingList { counter-reset: section;}
.rankingList li {height: auto; display: flex; align-items: center; float: none; padding: 6px 30px; margin: 0;}
.rankingList li .thumbnail {width: 20%;  box-sizing:border-box;  height: auto; margin-bottom: 0; border: 1px solid #e8e8e8;}
.rankingList li .thumbnail:before {counter-increment: section; content: counter(section); width: 28px; height: 28px; line-height: 28px; position: absolute; left: 0px; top: 0px; z-index:10; text-align: center; display: block; color: #fff; font-size: 14px; font-weight: bold; background-color: rgba(0,0,0,0.7);}
.rankingList li .thumbnail .detailBannerTarget {display:none !important}
.rankingList li .information {  width: 80%; box-sizing: border-box; padding:20px }
.rankingList li .information .name { padding: 1px 0;  text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; overflow: hidden; font-size: 14px;}
.rankingList li p.brand {display:none; }
.rankingList li p.price {margin:10px 0 0; }
.rankingList li p.price .dc_percent {display:inline-block; margin-left: 20px;}
.rankingList li p.price .origin_price {color: #777777;  font-size: 14px; }

.section_banner {position:relative}
.section_banner .swiper-button-next, .section_banner .swiper-button-prev {background-repeat:no-repeat; background-position:center; top:287px; }
.section_banner .swiper-button-next {right:0; background-image: url(/design/jh2018/smartpc_2019/img/icon/brand_arrow.svg); }
.section_banner .swiper-button-prev {left:0; background-image: url(/design/jh2018/smartpc_2019/img/icon/brand_arrow.svg); transform: rotate(180deg);}

.section_banner .swiper-pagination {  position: absolute; left: 0px; top: 0px; bottom: auto !important; }
.section_banner .swiper-pagination-bullet { display: none; position:relative; width:42px; height:42px; line-height:42px; z-index: 10; text-align: center; border-radius: 0; color: #fff; font-size:20px; font-weight: 400; background-color: #ed1c24 ;}
.section_banner .swiper-pagination-bullet :after { content: ""; width: 100%; top: 100%; position: absolute; display: block; border-width: 0 20px 8px 20px; border-color: #ed1c24; border-bottom-color: transparent; border-style: solid; box-sizing: border-box;}
.section_banner .swiper-pagination-bullet-active { display: block; }

.prodBannerSwiper .information {display:none;}


#brand_section .section_tit {margin-top:50px}
#brand_section .brandSwiper  {padding-bottom:60px; }
#brand_section .swiper-slide {  border-radius: 100%; width: 208px; margin-right:40px;  }  
#brand_section .swiper-slide a { width: 208px; height: 208px; border: 1px solid #e5e5e5; border-radius: 100%; position: relative; display: flex; justify-content: center; align-items: center; box-sizing:border-box; }
#brand_section .swiper-slide a img {width:60%}
#brand_section .swiper-pagination { margin-top:42px; display:flex; display: flex; align-items: center; justify-content: center;}
#brand_section .swiper-pagination-bullet {background:#efefef; width:6px; height:6px; margin:0 6px !important; opacity:1; transition:all 0.3s}
#brand_section .swiper-pagination-bullet-active {background:#111; width:10px; height:10px; }
#brand_section .swiper-button-next, #brand_section .swiper-button-prev {background-repeat:no-repeat; background-position:center; top:287px; }
#brand_section .swiper-button-next {right:-5%; background-image: url(/design/jh2018/smartpc_2019/img/icon/brand_arrow.svg); }
#brand_section .swiper-button-prev {left:-5%; background-image: url(/design/jh2018/smartpc_2019/img/icon/brand_arrow.svg); transform: rotate(180deg);}


#board_section { margin: 100px 0 0;  background: #f7f7f7; padding-bottom: 100px;}
#board_section .section_tit{padding: 100px 0 30px;}



.boardList li {display:inline-block;width: calc(25% - 18px);margin-right:20px; margin-bottom:10px; vertical-align:top; }
.boardList li:nth-child(4n) {margin-right:0}
.boardList li > a {display:inline-block; width:100%}
.boardList .thumbnail {position:relative;display:inline-block;width: 100%;}
.boardList .thumbnail {display:inline-block; width:100%; height:100%}
.boardList .thumbnail img {width:100%}
.boardList .information .column {padding: 15px 0;color: #aaa;font-size: 14px;display:flex;align-items: center;}
.boardList .information .column span { display: inline-block; width: 30px; height: 30px; background: #f49730; border-radius: 100%; text-align: center; line-height: 28px; font-size: 16px; font-weight: bold; color: #fff; margin-right: 10px;}
.boardList .information .tit {font-size: 15px; color: #111; font-weight: bold; padding-bottom: 10px;}
.boardList .information .des { font-size: 12px; color: #555555; overflow: hidden; word-wrap: break-word; -webkit-line-clamp: 10; -webkit-box-orient: vertical; max-height: 90px; min-height: 90px; display: box; display: -webkit-box; line-height: 1.5;} 
.boardList .information .link { width: 110px;  height: 40px; border-radius: 20px; background-color: #ffffff; margin: 30px auto; margin-top: 25px; text-align: center; display: block; color: #555; font-size: 15px; line-height: 39px; font-weight: bold; transition: all 0.3s;}
.boardList .information .link:hover {background-color: #444;color: #fff;}
.boardLink {margin: 100px auto 0;}
.boardLink a {  display: block; margin: 0 auto; text-align: center; line-height: 54px;  width: 240px; height: 55px; border: 1px solid #111111; background-color: #ffffff; font-size: 18px; color: #111;}



.prodSwiper .prdList li {height:auto}
#add_section .swiper-button-next, #add_section .swiper-button-prev { background-repeat:no-repeat; background-position:center; top:287px; }
#add_section .swiper-button-next {right:-5%; background-image: url(/design/jh2018/smartpc_2019/img/icon/brand_arrow.svg); }
#add_section .swiper-button-prev {left:-5%; background-image: url(/design/jh2018/smartpc_2019/img/icon/brand_arrow.svg); transform: rotate(180deg);}



#weeklyBest {  padding: 120px 0 130px 100px; font-size: 0; margin-bottom:120px; background: #f7f7f7  }
#weeklyBest:after {  content: ''; display: block; clear: both; }
#weeklyBest .bestWrap { width: 300px; display: inline-block; vertical-align: top; } 
#weeklyBest .mainPrdSlideArea { float: right;width: calc(100% - 300px); display: inline-block; vertical-align: top; display: none; position: relative; }
#weeklyBest .mainPrdSlideArea .swiper-container { overflow: hidden; } 
#weeklyBest .mainPrdSlideArea.show { display: block; }
#weeklyBest .mainPrdSlideArea .typeThumb { overflow: hidden; }
#weeklyBest .cateTit { text-align: left; margin-bottom: 60px;}
#weeklyBest .cateTit .tit01 { font-size: 40px; }
#weeklyBest .cateTit .tit02 { font-size: 18px; color: #555; margin-top: 10px;}
#weeklyBest .cateList { font-size: 0; width: 265px; }
#weeklyBest .cateList li { display: inline-block; margin-right: 5px; margin-bottom: 10px; }
#weeklyBest .cateList li a { font-size: 15px; border-radius: 18px; font-weight: 300; border: 1px solid #ddd; padding: 8px 15px; display: block; }
#weeklyBest .cateList li a.active { font-weight: 600; border: 1px solid #7d7d7d; }
#weeklyBest .prdList .swiper-slide { display: inline-block; width: 340px; height:auto; margin-right: 20px; margin-bottom:0}
#weeklyBest .swiper-pagination-progressbar { top: auto; bottom: -50px; background: rgba(0,0,0,.1); height: 1px; width: calc(100% - 100px); }
#weeklyBest .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { height: 4px; top: -2px; background: #000;}




/* BASIC css end */