/*common start*/ body,div,ul,li,a,img,p,dl,dt,dd,h1,h2,h3,h4,span,strong,input{ margin:0; padding:0;list-style:none;text-decoration:none;border:0; list-style:none;} body{ font-size:12px;color:#666;} body.head_on{overflow:hidden} a{color:#666;transition: 0.3s;} a:hover{ color:#f60; text-decoration:none;cursor: pointer;} .clear{ margin:0; padding:0; font-size:0; clear:both; } .wapper{ width:1200px; margin:0 auto;} *, *::before, *::after{-webkit-box-sizing: border-box;box-sizing: border-box;} :root { --main-color: #e60012; --main-color2: #109B04; --main-color-white: #fff; --main-color-000: #000; --main-color-333: #333333; --main-color-888: #888888; --main-transition: all ease 0.4s; --main-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; } .header{ position: fixed;top: 0;left: 0;background: rgba(255,255,255,0.8);z-index: 999;width: 100%;box-shadow: var(--main-shadow);} .headList{display: flex;justify-content: space-between;align-items: center;height: 90px;padding: 0 20px;box-sizing: border-box;} .headList .logo{display: block;} .headList .logo img{max-height: 70px;width: auto;} /*menu*/ .menu{height:90px;line-height:90px;margin-right: auto;margin-left: 5%;} .menu ul li{ float:left; position:relative;} .menu ul li dl{ background: rgba(255,255,255,0.8); width:100%; position:absolute; left:50%; top:90px; box-shadow:2px 2px 5px rgba(0,0,0,0.2);display:none;z-index: 9;transform: translateX(-50%);min-width: 150px;} .menu ul li dl dd{ line-height:40px;border-bottom:#ddd dotted 1px;position: relative;} .menu ul li dl dd a{ font-size:14px; color:#333;display:block;} .menu ul li dl dd a:hover{ color: var(--main-color);} .menu a{ font-size:16px;color:#333;display:block;text-align:center;padding: 0 25px;} .menu a:hover{color: var(--main-color);} a.menu_hover{color: var(--main-color);} .menu ul li.cur span a{color: var(--main-color);} .search{width: 162px;height: 30px;border: 1px solid #0000004d;position: relative;} .search input{position: absolute;left: 0;top: 0;width: 100%;height: 100%;padding: 0 50px 0 10px;font-size: 14px;background: transparent;outline: none;} .search button{position: absolute;top: 0;right: 0;width: 30px;height: 30px;border: none;background: transparent;color: #666;font-size: 16px;} .searchBtn{font-size: 16px;color: #333;cursor: pointer;display: none;} .searchClose{display: none;cursor: pointer;} .searchClose img{width: 35px;} .language{margin-left: 25px;} .language a{display: inline-block;font-size: 14px;color: #333;} .language span{margin: 0 10px;} /*mMenu*/ .sp_nav1{width:50px;float:right;position:relative;cursor:pointer;height:30px;margin-top: 10px;display: none;} .sp_nav1 span{display:block;background:#333;width:30px;height:2px;position:absolute;left:10px;transition:all ease 0.35s} .sp_nav1 span:nth-of-type(1){top:0px} .sp_nav1 span:nth-of-type(2){top:10px} .sp_nav1 span:nth-of-type(3){top:20px} .sp_nav_se1 span:nth-of-type(1){top:10px;transform:rotate(45deg)} .sp_nav_se1 span:nth-of-type(2){width:0} .sp_nav_se1 span:nth-of-type(3){top:10px;transform:rotate(-45deg)} .sjj_nav1{position:fixed;z-index:999;background:#fff;width:100%;height:calc(100% - 70px);font-size:14px;line-height:40px;top:-100%;left:0;overflow:auto;overflow-x:hidden;transition:top ease 0.35s;display: none;} .nav_show1{top:70px;} .sjj_nav1 ul li i{position:absolute;top:5px;right:0px;height:30px;padding:0px 7px 0 7px;} .sjj_nav1 ul li i svg{transform:rotate(-90deg);transition:all ease 0.35s} .sjj_nav1 ul li .sjj_nav_i_se1 svg{transform:rotate(0deg)} .sjj_nav1 ul li{border-top:1px #e4e8eb solid;position:relative;line-height:45px;font-size:16px} .sjj_nav1>ul >li:last-child{border-bottom:1px #ddd solid;} .sjj_nav1 ul li ul{display:none} .sjj_nav1 ul li a{color:#333;width:100%;padding: 0 20px;display: block;box-sizing: border-box;} .sjj_nav1 ul li a:hover{color: #0188FB;} .sjj_nav1 ul li ul li a{color:#333;display:block;text-align:left;} .sjj_nav1 ul li i svg{width:25px;height:25px;fill:#333;} .sjj_nav1 ul li .sjj_nav_i_se svg{fill:#333} .sjj_nav1 ul li ul li>ul{margin-left:10px} .sjj_nav1 ul li ul li{border-top: none;} .sjj_nav1 ul li ul li a{padding: 0 30px;} /*swiper*/ .swiper {width: 100%;height: 100%;position: relative;overflow: hidden;} .swiper-slide {background: #fff;display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center; -ms-flex-align: center;-webkit-align-items: center;align-items: center;} .swiper-slide img { display: block;width: 100%;height: 100%;object-fit: contain;} .swiper .swiper-button-next:after,.swiper .swiper-button-prev:after{font-size: 30px;} /*common*/ .disFlex { flex-wrap: wrap; display: -webkit-box;/* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box;/* Firefox 17- */ display: -webkit-flex;/* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex;/* Firefox 18+ */ display: -ms-flexbox;/* IE 10 */ display: flex; } .jusBet{justify-content: space-between;} .jusCet{justify-content: center;} .jusEnd{justify-content: flex-end;} .aliTop{align-items: flex-start;} .aliCet{align-items: center;} .aliBtm{align-items: flex-end;} .img{font-size: 0px;overflow: hidden;} img{transition: 0.5s;} .f_left{float: left;} .f_right{float: right;} .clearfix:before, .clearfix:after {content: "";display: table;} .clearfix:after {clear: both;overflow: hidden;} .clearfix {*zoom: 1;} .bgfff{background: #fff !important;} .fff{color: #fff !important;} em{font-style: normal;} .overflow1{white-space: nowrap;text-overflow: ellipsis;overflow: hidden;width: 100%;display: block;} .overflow2{display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;} .overflow3{display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;} .textCet{text-align: center;} .textRight{text-align: right;} .pc_show{} .m_show{display: none;} .iTitCn{} .iTitEn{} .iTit{} .iTxt{} .iLine i{} .hidden{overflow: hidden;} .comBg{background-size: cover;background-repeat: no-repeat;} .iVideo{width: 100%;} .iVideo video{width: 100%;} .iImg{width: 100%;} .iImg img{width: 100%;} /*-------------------------------------------*/ /*banner*/ .banner{width: 100%;height: 100vh;padding-top: 90px;} .bannerSwiper .swiper-pagination-bullet{opacity: 1;background: #fff;transition:width ease 0.35s;border-radius: 20px;} .bannerSwiper .swiper-pagination-bullet-active{background: var(--main-color);width:20px;} .bannerSwiper .swiper-button-next:after,.bannerSwiper .swiper-button-prev:after{color: #fff;} .banner img{width: 100%;height: 100%;object-fit: contain;} .bannerVideo{width: 100%;font-size: 0px;} .bannerVideo video{width: 100%;object-fit: cover;} /* main */ #main { min-width: 1090px; min-height: 300px; margin: 102px 0 0; padding: 48px 45px 50px 45px; /* background-color: red */} .main-menu { position: fixed; top: 150px; bottom: 25px; left: 45px; z-index: 100; width: 184px; min-height: 200px; padding-right: 5px; font-size: 14px; line-height: 1.5 } #news-page .main-menu .list-wrapper .list-wrapper li { margin-top: 10px; } #news-page .main-menu .list-wrapper .list-wrapper li:first-child { margin-top: 0; } #nav .main-menu { display: none } #works-page .main-menu + .main-contents, #exhibitions-page .main-menu + .main-contents, #database-page .main-menu + .main-contents, #news-page .main-menu + .main-contents, #news-details-page .main-menu + .main-contents, #database-list-page .main-menu + .main-contents, #about-page .main-menu + .main-contents, #search-page .main-menu + .main-contents { margin-left: 411px } .main-menu a:hover { color: #000000 } .main-menu a.current { color: #e60012 } .main-menu .box {position: relative;} .main-menu .box:first-child { margin: 0 } .main-menu .box .box { } .main-menu .box.year-selector .box, .main-menu .box.year-selector .list li { float: left; display: block!important; width: 100% } .main-menu .box.year-selector .open-more-btn, .main-menu.box.year-selector .open-more-btn { display: none } .main-menu .box .arrow { width: 0; height: 0; overflow: hidden;vertical-align: 1px;position: absolute;top: 0;right: 0;width: 21px;height: 21px;font-size: 12px;cursor: pointer;line-height: 21px;text-align: center;color: #777;} .main-menu .box .arrow:after{content: "▶";} .main-menu .box.current .arrow { display: inline-block; } .main-menu .box.current .arrow:after{content: "▼";color: #777;} .main-menu .box.year-selector > .list-wrapper { padding-bottom: 10px } .main-menu .list-wrapper { overflow: hidden; margin: 5px 0 0 1em; padding: 0 0 10px; } .main-menu .list-wrapper:first-child { margin-left: 0 } .main-menu .box > .list-wrapper, .main-menu a ~ .list-wrapper { display: none } .main-menu .box.current > .list-wrapper, .main-menu .current > a ~ .list-wrapper { display: block } .main-menu.ellipsis .box li:nth-child(5) ~ li, .sub-menu.ellipsis li:nth-child(5) ~ li { display: none } .sub-menu .open-more-btn { display: none } .sub-menu.ellipsis .open-more-btn { display: block } .main-menu .box.current .list-wrapper{display: block !important;} .box.not-ellipsis li:nth-child(5) ~ li { display: block!important } .box.not-ellipsis .list-wrapper > .open-more-btn { display: none } .sub-menu li { padding: 2px 0 } .sub-menu a { color: #717171 } .sub-menu a:hover { color: #393939 } .sub-menu { position: fixed; top: 150px; bottom: 25px; left: 25px; z-index: 102; min-height: 200px; padding-right: 5px; font-size: 13px; line-height: 1.5 } /* #cover-box .overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2 } */ .home-push-list { display: none } .cover-video { position: fixed; display: none } .cover-image { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-repeat: no-repeat; background-position: 50% 50%; -webkit-background-size: cover; background-size: cover } .cover-text { position: fixed; bottom: 90px; left: 50%; z-index: 100; display: none; width: 600px; transform: translateX(-50%); color: #ffffff; line-height: 1.8; text-align: center } /* .home-recommend-links { position: fixed; right: 0; bottom: 40px; left: 0; z-index: 100; line-height: 1.5; text-align: center } .home-recommend-links a { color: #ffffff; opacity: 0 } .home-recommend-links a:hover { color: rgba(255, 255, 255, 0.8) } */ .main-contents { min-width: 790px; min-height: 1px; margin-left: 411px;/*margin: 0 auto;*/} .main-contents1 { min-width: 790px; min-height: 1px; margin: 0 auto;} /* 作品推荐 */ .works-push-box { } .works-push-box .image img { max-width: 760px; max-height: 660px } .works-push-box .image { margin: 0 0 12px } .works-push-box .info-group { line-height: 1.5 } .works-push-box .info-group span { display: block } .works-push-box .info-group .type { font-size: 0 } .works-push-box .info-group .type a { display: inline-block; margin: 0 0 0 1em; border-bottom: 1px solid #777777; /*font-size: 12px;*/ vertical-align: top } .works-push-box .info-group .type a:hover { border-bottom-color: #393939; } .works-push-box .info-group .type a:first-child { margin-left: 0 } /* 作品列表 */ .works-list-wrapper { position: relative; clear: both; max-width: 790px; min-height: 80px; margin: 15px 0 0 } .works-list-wrapper:first-child { margin-top: 0 } .works-list-wrapper .head { position: absolute; top: 0; right: 100%; margin-right: 25px; font-size: 16px; white-space: nowrap;font-weight: normal;} .works-list-wrapper .head.current { color: #e60012 } .works-list-wrapper .list { margin: ;display: flex;flex-wrap: wrap;} .works-list-wrapper .box {width: 33.33% } .works-list-wrapper .box .content { margin: 0} .works-list-wrapper .box img { width: 100%; max-height: 250px;object-fit:contain; opacity: 0.85; -webkit-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out } .works-list-wrapper .box:hover img { opacity: 1 } .works-list-wrapper .box .image { margin: 0 0 8px } .works-list-wrapper .box .title {margin: 0 0 2px;line-height: 1.2;font-weight: normal;text-align: center;} .works-list-wrapper .box .title a{font-size: 12px;color: #555;} .works-list-wrapper .box .text { /*font-size: 12px;*/ line-height: 1.2 } .ie9 .swiper-wrapper { white-space: nowrap } .gallery-item .swiper-slide { /*height: 580px;*/ text-align: center } .swiper-slide img { max-width: 100%; max-height: 980px } .works-details-wrapper { position: relative; max-width: 760px } .back-fn { position: absolute; top: 0; left: 100%; z-index: 100; margin: 0 0 0 24px; white-space: nowrap } .back-fn a { margin: 0 0 0 10px } .back-fn a:first-child, .back-btn { position: fixed; right: 20px; margin-left: 0; font-size: 18px } .back-fn a + a { display: none } .gallery-wrapper { position: relative; margin: 50px 0 0; /* max-width: 760px */ } .gallery-item { margin-top: 100px } .gallery-item .gallery-wrapper { margin-top: 0 } .back-fn + .gallery-wrapper, .back-fn + .gallery-item { margin-top: 0 } .gallery-item > .head { margin: 0 0 15px; font-size: 16px; } .gallery-wrapper .box-wrapper { position: relative; /*top: 50%;*/ min-height: 240px; /*transform: translateY(-50%)*/ } .gallery-wrapper .box-wrapper .info { position: relative; padding: 0 6em } .gallery-wrapper .box-wrapper .fa-download { position: absolute; top: 0; right: 0; line-height: 1.75; white-space: nowrap; font-size: 12px } .gallery-wrapper .image, .gallery-wrapper .video-box { margin: 0 0 7px } .gallery-wrapper .title { line-height: 1.5 } .gallery-wrapper .swiper-lazy-preloader + .title { display: none } .gallery-wrapper .control { } .gallery-wrapper .control .btn, .database-list-wrapper .control .btn { position: absolute; top: 0; bottom: 0; left: -52px; width: 22px; background: url('../images/gallery_prev_btn_bg.png') no-repeat 50% 50%; background-size: 70% auto } .gallery-wrapper .control .next-btn, .database-list-wrapper .control .next-btn { right: -52px; left: auto; -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg) } .database-list-wrapper .swiper-slide img { transition: opacity 1.5s ease-in-out } .database-list-wrapper .swiper-slide:hover img { opacity: 0.6 } /* .ie9 .gallery-wrapper .box-wrapper { position: relative; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%) } */ .ie9 .swiper-wrapper { font-size: 0 } .ie9 .swiper-wrapper .title { /*font-size: 12px*/ } .gallery-fn { display: none; line-height: 1.5 } .gallery-fn .open-thumb-btn { float: right; width: 18px; height: 18px } .gallery-fn .open-thumb-btn::before, .gallery-fn .open-thumb-btn::after { content: ''; width: 8px; height: 2px; border-top: 8px solid #727171; border-bottom: 8px solid #727171 } .gallery-fn .open-thumb-btn::before { float: left } .gallery-fn .open-thumb-btn::after { float: right } .gallery-fn .title { text-align: center } .gallery-fn .title .s-line { margin: 0 30px } .gallery-details-info { margin: 50px 0 0; line-height: 1.5 } .gallery-details-text { margin: 20px 0 0; line-height: 1.5 } .gallery-thumb-list { margin: 30px 0 0 } .gallery-thumb-list .list { margin: -15px 0 0 -15px } .gallery-thumb-list .box { position: relative; float: left; max-width: 30%; overflow: hidden; margin: 15px 0 0 15px; cursor: pointer } .gallery-thumb-list .box img { width: auto; height: 60px; opacity: 0.85; -webkit-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out } .gallery-thumb-list .box:hover img { opacity: 1 } .gallery-thumb-list .icon-video { position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } .gallery-thumb-list .icon-video::before, .gallery-thumb-list .icon-video::after { content: ''; position: absolute } .gallery-thumb-list .icon-video::before { width: 50px; height: 50px; border-radius: 50%; border: 1px solid #ffffff } .gallery-thumb-list .icon-video::after { top: 11px; left: 20px; width: 0; height: 0; border-width: 15px 0 15px 20px; border-style: solid; border-color: transparent transparent transparent #ffffff } .gallery-details-type { margin: 20px 0 0 } .gallery-details-type + .jiathis_style, .gallery-exhhibition-history + .jiathis_style, .gallery-exhhibition-series + .jiathis_style { padding-bottom: 10px; border-bottom: 1px solid rgb(130, 130, 130) } .gallery-exhhibition-series + .jiathis_style { margin-top: 5px } .gallery-details-type a { margin: 0 0 0 15px; border-bottom: 1px solid #777777 } .gallery-details-type a:hover { border-bottom-color: #393939 } .gallery-details-type a:first-child { margin-left: 0 } .gallery-exhhibition-history { margin: 30px 0 0 } .gallery-exhhibition-history .head { margin: 0 0 15px } .gallery-exhhibition-history .list { line-height: 16px } .gallery-exhhibition-history .list li { margin: 4px 0 0 } .gallery-exhhibition-history .list li:first-child { margin-top: 0 } .main-contents .jiathis_style { overflow: hidden; margin: 30px 0 0 } .main-contents .jiathis_style span { font-family:"iconfont" !important; font-size: 16px; font-style:normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .main-contents .jiathis_style a { float: left; margin: 0 10px 0 0 } .main-contents .jiathis_style .jtico { height: auto!important; padding-left: 0!important; background: none!important } .main-contents .jiathis_style .jiathis_txt { line-height: normal!important } .main-contents .jiathis_style .jtico::after { display: inline-block; vertical-align: top; font-size: 20px } .main-contents .jiathis_style .jtico_tsina::after { content: '\e6a4' } .main-contents .jiathis_style .jtico_weixin::after { content: '\e6b2' } .main-contents .jiathis_style .jtico_fb::after { content: '\e689' } .main-contents .jiathis_style .jtico_twitter::after { content: '\e6aa' } .gallery-exhhibition-series { margin: 30px 0 0 } .gallery-exhhibition-series .head { margin: 0 0 15px } .gallery-exhhibition-series .contents { } .gallery-exhhibition-series .box { margin: 15px 0 0; padding: 15px 0 0; border-top: 1px solid #555555 } .gallery-exhhibition-series .box:first-child { margin-top: 0 } .gallery-exhhibition-series .box .image { float: left; width: 240px; margin: 0 20px 0 0 } .gallery-exhhibition-series .box .image img { max-width: 100% } .gallery-exhhibition-series .box .content { margin-left: 260px } .gallery-exhhibition-series .box .title { margin: 0 0 5px; line-height: 1.5 } .gallery-exhhibition-series .box .title a { color: #333333 } .gallery-exhhibition-series .box .info { line-height: 1.5 } .pages-wrapper { margin: 50px 0 0; font-size: 0 } .pages-wrapper a, .pages-wrapper span { display: inline-block; margin: 0 0 0 10px; /*font-size: 12px;*/ vertical-align: top } .pages-wrapper span, .pages-wrapper a.current { color: #393939 } .pages-wrapper a:first-child, .pages-wrapper span:first-child { margin-left: 0 } .document-download { margin: 30px 0 0 } /* 关于 */ #about-page .main-menu { width: 160px; margin-right: 20px } #about-page .main-menu .level1 { line-height: 19px; /*font-size: 12px;*/ color: #231815} .about-content-box{max-width: 80%; line-height: 2 } /* 新闻 */ #news-page .main-menu { width: 184px; margin-right: 20px } .news-list-box { max-width: 600px; line-height: 1.5 } .news-list-box .channel{ margin-top: 45px } .news-list-box .channel:first-child{ margin-top: 0 } .news-list-box .info-group{ } .news-list-box .info-group .date { float: left } .news-list-box .info-group .address {margin-left: 9px; float: left } .news-list-box .channel .title { margin-bottom: 6px } .news-list-box .channel .image { margin-bottom: 12px } .news-list-box .channel .image img { max-width: 100% } .news-list-box .channel .content{ line-height: 1.5; margin-bottom: 15px } /* 新闻详情 */ #news-details-page .main-menu { width: 184px; margin-right: 20px } .news-details-box { position: relative; max-width: 600px; margin-bottom: 55px } .news-details-box h2{ font-size: 16px; margin-bottom: 15px } .news-details-box .content{ max-width: 600px; line-height: 2 } .news-details-box .content img{max-width: 100%} /* 资料库*/ /* 资料库列表*/ #database-list-page .main-menu { width: 160px; margin-right: 20px } /* 资料库列表详情*/ #database-details-page .main-menu { width: 160px; margin-right: 169px } .database-list-wrapper { position: absolute; top: 370px; right: 45px; left: 45px; padding: 0 0 15px; opacity: 0 } .ie9 .database-list-wrapper { position: relative; top: 0; right: auto; left: 0; max-width: 820px } .database-list-wrapper .control { display: none } .ie9 .database-list-wrapper .control { display: block } .database-list-wrapper .swiper-container { overflow: visible } .database-list-wrapper .swiper-container { margin: 0 } .ie9 .database-list-wrapper .swiper-container { margin: 0 -15px!important } .database-list-wrapper .box-wrapper { } .ie9 .database-list-wrapper .box-wrapper { margin: 0 15px } .ie9 .database-list-wrapper .swiper-slide { width: 20% } .database-list-wrapper .image { position: relative; margin: 0 0 7px } .database-list-wrapper.init .image img { position: absolute; right: 0; bottom: 0 } .database-list-wrapper .title { min-height: 45px; line-height: 1.5 } .database-list-wrapper .title span { display: block } #database-comment-page .main-menu, #database-interview-page .main-menu { width: 160px } #database-comment-page .sub-menu, #database-interview-page .sub-menu { width: 224px; margin-left: 150px } .database-text-container { position: relative; max-width: 600px; line-height: 15px } .database-text-container .title { margin-bottom: 15px; font-size: 15px } .database-text-container .content { overflow: hidden; line-height: 1.5 } .database-text-container .content img { max-width: 100% } .database-text-container .content .video-download { float: right } /* .back-btn { position: absolute; top: 0; left: 100%; margin: 0 0 0 45px; width: 36px; height: 36px; background: url('../images/back_btn_bg.png') no-repeat; background-size: 100% 100% } */ /* .back-btn { position: absolute; top: 0; left: 100%; margin: 0 0 0 15px; white-space: nowrap } */ .back-btn:empty::before { content: '返回'; } :lang(en) .back-btn:empty::before { content: 'Back'; } .database-publication-details { position: relative; width: 760px } .database-publication-details .wrapper { margin-top: 80px;display: flex;flex-wrap: wrap;justify-content: space-between;} .database-publication-details .back-btn + .wrapper { margin-top: 0 } .database-publication-details .image {width: 300px } .database-publication-details .image img { max-width: 100% } .database-publication-details .contents {width: 420px; line-height: 1.5 } .database-publication-details .head { margin: 0 0 8px; font-size: 16px; } .database-publication-details .content { margin: 0 0 30px } .database-publication-details .content img { max-width: 100% } .search-wrapper { max-width: 760px } .search-wrapper .gallery-exhhibition-history { margin-top: 0 } .search-wrapper .works-list-wrapper + .gallery-exhhibition-history { margin-top: 30px; } .search-item { margin: 40px 0 0; padding: 20px 0 0; border-top: 1px solid rgb(195, 195, 195); } .search-item:first-child { margin-top: 0; padding-top: 0; border-top: 0 none } .search-item .s-head { margin: 0 0 20px; font-size: 16px; } .exhibitions-list { overflow: hidden } .exhibitions-list .list { margin: -30px 0 0 -30px; } .exhibitions-list .box { float: left; width: 33.33%; } .exhibitions-list .box .inner { margin: 30px 0 0 30px; } .exhibitions-list .image { margin: 0 0 8px } .exhibitions-list .image img { width: 100%; height: auto; } .exhibitions-list .title { height: 18px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis } .publications-list { overflow: hidden; visibility: hidden; } .publications-list.loaded { visibility: visible } .publications-list .list { margin: -30px 0 0 -30px; } .publications-list .box { float: left; width: 128px; margin: 30px 0 0 30px; } .publications-list .image { position: relative; margin: 0 0 8px } .publications-list .image img { width: 100%; height: auto; } .publications-list .title { line-height: 1.5 } .publications-list .title span { display: block } .publications-list.loaded .image img { position: absolute; right: 0; bottom: 0; } .menu-trigger-btn, .home-logo, .open-search-btn { display: none } .mobile-swiper-container { display: none } .database-list { /* width: 790px; */ /* visibility: hidden */ } .database-list img { position: relative } .database-list.loaded img { position: absolute; /* visibility: visible */ } .database-list .box { width: 25% } .database-list .box .image { position: relative; } .database-list .box .image img { /* position: absolute; */ bottom: 0; left: 0; } .database-list .box .title { height: auto; overflow: visible; line-height: 1.5; white-space: normal } .database-list .box .title span { display: block; } @media only screen and ( max-width: 767px ) { .menu-trigger-btn { position: relative; float: left; display: inline; width: 25px; height: 16px; margin-top: 19px; border-top: 3px solid #6b6564; border-bottom: 3px solid #6b6564 } .menu-trigger-btn::before { content: ''; position: absolute; top: 50%; right: 0; left: 0; height: 3px; background-color: #6b6564; transform: translateY(-50%); } /* #nav { display: none } */ #nav { position: fixed; top: 60px; right: 0; bottom: 0; left: 0; z-index: 100; display: none; overflow: auto; -webkit-overflow-scrolling: touch; margin: 0; background-color: #dadbdb } .open-nav #nav { display: block } #nav > .list > li { float: none; margin: 0; border-top: 1px solid #999999; line-height: 44px } #nav > .list > li:first-child { border-top: 0 none } #nav > .list > li > a { display: block; padding: 0 15px } .head-toolbar { margin-top: 17px } .search-box { display: none } .home-logo { display: block; position: fixed; top: 50%; left: 50%; width: 150px; height: 120px; background: url('../images/home_logo.svg') no-repeat; transform: translate(-50%, -50%); } .cover-text { display: none } .open-search-btn { float: left; display: inline; width: 16px; height: 16px; margin: 3px 0 0; background: url('../images/open_search_btn_bg.svg') no-repeat; background-size: 100% 100% } .open-search #logo, .open-search .menu-trigger-btn, .open-search .lang-switch { display: none } .open-search .head-toolbar { position: relative; float: none; padding: 0 31px 0 0 } .open-search .head-toolbar::after { content: ''; display: table; clear: both } .open-search .search-box { display: block; float: none; width: auto; margin-top: -1px } .open-search .search-box .input-text { width: 100%; height: 28px; -webkit-box-sizing: border-box; box-sizing: border-box } .open-search .open-search-btn { position: absolute; top: 50%; right: 0; margin-top: 0; transform: translateY(-50%); background-image: url('../images/open_search_btn_bg2.svg') } .head-toolbar .search-box .search-btn { width: 28px; height: 28px; } .open-more-btn { display: none!important } .main-menu { position: static; top: auto; left: auto; display: none; float: none; width: auto!important; margin-right: 0!important; padding-right: 0; background-color: #ededed; } .main-menu::before, .main-menu::after { content: ''; display: block; height: 5px; } .main-menu a { display: inline-block; vertical-align: middle } .main-menu .box > a, .main-menu > div > a { padding: 0 0 0 30px; } .main-menu .list-wrapper { margin-left: 0; } .main-menu .list-wrapper a { padding-left: 50px; } #nav > .list > li.current > a, #nav > .list > li > a:hover, .main-menu a:hover, .main-menu a.current { color: #595757 } .main-menu.ellipsis .box li:nth-child(5) ~ li, .sub-menu.ellipsis li:nth-child(5) ~ li { display: block; } .main-menu .box .arrow { display: inline-block } .main-menu > .list-wrapper > .list > .box > a { padding-left: 30px } .main-menu .box > .list-wrapper { display: block } #main { min-width: 0; margin-top: 60px; padding: 20px } .main-contents { float: none; min-width: 0; margin-left: 0!important } .works-push-box .image img { max-width: 100%; max-height: none; height: auto } .back-fn, .gallery-wrapper .control, .gallery-fn .open-thumb-btn { display: none } .gallery-thumb-list .icon-video { width: 32px; height: 32px } .gallery-thumb-list .icon-video::before { width: 30px; height: 30px } .gallery-thumb-list .icon-video::after { top: 50%; left: 50%; margin: 0 0 0 1px; border-width: 7px 0 7px 10px; transform: translate(-50%, -50%) } .gallery-thumb-list .box img { height: 60px } .works-list-wrapper .list { margin: 0;display: flex;flex-wrap: wrap;} .works-list-wrapper .box { float: none; width: 100%; margin: 25px 0 0 } .works-list-wrapper .box:first-child { margin-top: 0 } .works-list-wrapper .box .content { margin: 0 } .works-list-wrapper .box .image { margin-bottom: 12px } /* .works-list-wrapper .box .title { text-align: center } */ .gallery-item, .database-publication-details .wrapper { margin-top: 40px;} .gallery-details-info { margin-top: 30px } .works-details-wrapper .jiathis_style, .gallery-exhhibition-series { margin-top: 20px } .main-contents .jiathis_style { margin-top: 20px } .pages-wrapper { margin-top: 30px } #news-page .list-wrapper { padding-right: 30px; padding-left: 30px } #news-page .list-wrapper .list { overflow: hidden; margin: -4px 0 0 -10px; } #news-page .list-wrapper li { float: left; margin: 4px 0 0 10px } #news-page .list-wrapper li a { padding-left: 0 } .database-list-wrapper { position: static; opacity: 1 } .database-list-wrapper .swiper-container, .database-list-wrapper .control { display: none } .database-list-wrapper .swiper-container { margin: 0!important; } .mobile-swiper-container .swiper-wrapper { flex-wrap: wrap; width: auto; overflow: hidden; margin: -20px 0 0 -20px } .mobile-swiper-container .swiper-slide { display: flex; width: 50%; height: auto; align-items: flex-end; align-content: flex-end; } .mobile-swiper-container .box-wrapper { margin: 20px 0 0 20px } .database-list .list { display: flex; flex-flow: wrap; margin: -25px 0 0 -25px } .database-list .box { float: left; width: 50%; margin: 0 } .database-list .box .content { margin: 25px 0 0 25px } .mobile-swiper-container { display: block } .database-publication-details { width: auto } .database-publication-details .image { float: none; width: auto; margin: 0 60px 30px; } .database-publication-details .image img { max-width: none; width: 100% } .database-publication-details .contents { float: none; width: auto; } .back-btn { right: 0; left: auto; } .news-details-box h2 { margin-right: 3em } .works-list-wrapper .clear { display: none!important } #search-page .works-list-wrapper .list { margin: -20px 0 0 -20px; } #search-page .works-list-wrapper .box { float: left; width: 50%; margin: 0 } #search-page .works-list-wrapper .content { margin: 20px 0 0 20px } .exhibitions-list .list { overflow: hidden; margin: -20px 0 0 -20px } .exhibitions-list .box { margin: 20px 0 0 20px } .exhibitions-list .image img { height: 100px } .publications-list .list { margin: -20px 0 0 -20px } .publications-list .list, .publications-list .box { display: -webkit-flex; display: flex } .publications-list .box { width: 33.33%; margin: 0; align-items: flex-end } .publications-list .box-wrapper { margin: 20px 0 0 20px } .publications-list .image { height: auto!important } .publications-list.loaded .image img { position: static } #database-comment-page .sub-menu, #database-interview-page .sub-menu { position: static; float: none; width: auto; margin: 0 0 30px!important; padding-right: 0; } .gallery-exhhibition-series .box { display: flex; display: -webkit-flex; flex-flow: row } .gallery-exhhibition-series .box .image { width: 40%; margin-right: 15px } .gallery-exhhibition-series .box .content { width: 60%; margin-left: 0 } .gallery-item .swiper-slide { height: auto; top: 0; transform: none } .back-fn a:first-child { position: static; font-size: 14px } } .mCustomScrollbar { -ms-touch-action: pinch-zoom; touch-action: pinch-zoom } .mCustomScrollbar.mCS_no_scrollbar,.mCustomScrollbar.mCS_touch_action { -ms-touch-action: auto; touch-action: auto } .mCustomScrollBox { position: relative; overflow: hidden; height: 100%; /* max-width: 100%; */ margin-right: -5px; outline: 0; direction: ltr } .mCSB_container { overflow: hidden; width: auto; height: auto } .mCSB_inside>.mCSB_container { /* margin-right: 30px */ margin-right: 0 } .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden { margin-right: 0 } .mCS-dir-rtl>.mCSB_inside>.mCSB_container { margin-right: 0; margin-left: 30px } .mCS-dir-rtl>.mCSB_inside>.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden { margin-left: 0 } .mCSB_scrollTools { position: absolute; width: 1px; height: auto; left: auto; top: 0; right: 0; bottom: 0; opacity: .75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)" } .mCSB_outside+.mCSB_scrollTools { right: -26px } .mCS-dir-rtl>.mCSB_inside>.mCSB_scrollTools,.mCS-dir-rtl>.mCSB_outside+.mCSB_scrollTools { right: auto; left: 0 } .mCS-dir-rtl>.mCSB_outside+.mCSB_scrollTools { left: -26px } .mCSB_scrollTools .mCSB_draggerContainer { position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: auto } .mCSB_scrollTools a+.mCSB_draggerContainer { margin: 20px 0 } .mCSB_scrollTools .mCSB_draggerRail { width: 2px; height: 100%; margin: 0 auto; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px } .mCSB_scrollTools .mCSB_dragger { cursor: pointer; width: 100%; height: 70px; z-index: 1 } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { position: relative; width: 1px; height: 100%; margin: 0 auto; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; text-align: center } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar { width: 12px } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail { width: 8px } .mCSB_scrollTools .mCSB_buttonDown,.mCSB_scrollTools .mCSB_buttonUp { display: block; position: absolute; height: 20px; width: 100%; overflow: hidden; margin: 0 auto; cursor: pointer } .mCSB_scrollTools .mCSB_buttonDown { bottom: 0 } .mCSB_horizontal.mCSB_inside>.mCSB_container { margin-right: 0; margin-bottom: 30px } .mCSB_horizontal.mCSB_outside>.mCSB_container { min-height: 100% } .mCSB_horizontal>.mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden { margin-bottom: 0 } .mCSB_scrollTools.mCSB_scrollTools_horizontal { width: auto; height: 16px; top: auto; right: 0; bottom: 0; left: 0 } .mCustomScrollBox+.mCSB_scrollTools+.mCSB_scrollTools.mCSB_scrollTools_horizontal,.mCustomScrollBox+.mCSB_scrollTools.mCSB_scrollTools_horizontal { bottom: -26px } .mCSB_scrollTools.mCSB_scrollTools_horizontal a+.mCSB_draggerContainer { margin: 0 20px } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail { width: 100%; height: 2px; margin: 7px 0 } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger { width: 30px; height: 100%; left: 0 } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { width: 100%; height: 4px; margin: 6px auto } .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar { height: 12px; margin: 2px auto } .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail { height: 8px; margin: 4px 0 } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft,.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight { display: block; position: absolute; width: 20px; height: 100%; overflow: hidden; margin: 0 auto; cursor: pointer } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft { left: 0 } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight { right: 0 } .mCSB_container_wrapper { position: absolute; height: auto; width: auto; overflow: hidden; top: 0; left: 0; right: 0; bottom: 0; margin-right: 30px; margin-bottom: 30px } .mCSB_container_wrapper>.mCSB_container { padding-right: 30px; padding-bottom: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } .mCSB_vertical_horizontal>.mCSB_scrollTools.mCSB_scrollTools_vertical { bottom: 20px } .mCSB_vertical_horizontal>.mCSB_scrollTools.mCSB_scrollTools_horizontal { right: 20px } .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden+.mCSB_scrollTools.mCSB_scrollTools_vertical { bottom: 0 } .mCS-dir-rtl>.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_scrollTools.mCSB_scrollTools_horizontal,.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden+.mCSB_scrollTools~.mCSB_scrollTools.mCSB_scrollTools_horizontal { right: 0 } .mCS-dir-rtl>.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_scrollTools.mCSB_scrollTools_horizontal { left: 20px } .mCS-dir-rtl>.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden+.mCSB_scrollTools~.mCSB_scrollTools.mCSB_scrollTools_horizontal { left: 0 } .mCS-dir-rtl>.mCSB_inside>.mCSB_container_wrapper { margin-right: 0; margin-left: 30px } .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden>.mCSB_container { padding-right: 0 } .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden>.mCSB_container { padding-bottom: 0 } .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden { margin-right: 0; margin-left: 0 } .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden { margin-bottom: 0 } .mCSB_scrollTools,.mCSB_scrollTools .mCSB_buttonDown,.mCSB_scrollTools .mCSB_buttonLeft,.mCSB_scrollTools .mCSB_buttonRight,.mCSB_scrollTools .mCSB_buttonUp,.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { -webkit-transition: opacity .2s ease-in-out,background-color .2s ease-in-out; -moz-transition: opacity .2s ease-in-out,background-color .2s ease-in-out; -o-transition: opacity .2s ease-in-out,background-color .2s ease-in-out; transition: opacity .2s ease-in-out,background-color .2s ease-in-out } .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail,.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar,.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail,.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar { -webkit-transition: width .2s ease-out .2s,height .2s ease-out .2s,margin-left .2s ease-out .2s,margin-right .2s ease-out .2s,margin-top .2s ease-out .2s,margin-bottom .2s ease-out .2s,opacity .2s ease-in-out,background-color .2s ease-in-out; -moz-transition: width .2s ease-out .2s,height .2s ease-out .2s,margin-left .2s ease-out .2s,margin-right .2s ease-out .2s,margin-top .2s ease-out .2s,margin-bottom .2s ease-out .2s,opacity .2s ease-in-out,background-color .2s ease-in-out; -o-transition: width .2s ease-out .2s,height .2s ease-out .2s,margin-left .2s ease-out .2s,margin-right .2s ease-out .2s,margin-top .2s ease-out .2s,margin-bottom .2s ease-out .2s,opacity .2s ease-in-out,background-color .2s ease-in-out; transition: width .2s ease-out .2s,height .2s ease-out .2s,margin-left .2s ease-out .2s,margin-right .2s ease-out .2s,margin-top .2s ease-out .2s,margin-bottom .2s ease-out .2s,opacity .2s ease-in-out,background-color .2s ease-in-out } .mCS-autoHide>.mCustomScrollBox>.mCSB_scrollTools,.mCS-autoHide>.mCustomScrollBox~.mCSB_scrollTools { opacity: 0; filter: "alpha(opacity=0)"; -ms-filter: "alpha(opacity=0)" } .mCS-autoHide:hover>.mCustomScrollBox>.mCSB_scrollTools,.mCS-autoHide:hover>.mCustomScrollBox~.mCSB_scrollTools,.mCustomScrollBox:hover>.mCSB_scrollTools,.mCustomScrollBox:hover~.mCSB_scrollTools,.mCustomScrollbar>.mCustomScrollBox>.mCSB_scrollTools.mCSB_scrollTools_onDrag,.mCustomScrollbar>.mCustomScrollBox~.mCSB_scrollTools.mCSB_scrollTools_onDrag { opacity: 1; filter: "alpha(opacity=100)"; -ms-filter: "alpha(opacity=100)" } .mCSB_scrollTools .mCSB_draggerRail { background-color: #cccccc; background-color: rgba(204,204,204,.3); filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)" } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #aaaaaa; background-color: rgba(107,107,107,.15); filter: "alpha(opacity=15)"; -ms-filter: "alpha(opacity=15)" } .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255,255,255,.85); filter: "alpha(opacity=85)"; -ms-filter: "alpha(opacity=85)" } .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar { background-color: #aaaaaa; background-color: rgba(107,107,107,.9); filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)" } .mCSB_scrollTools .mCSB_buttonDown,.mCSB_scrollTools .mCSB_buttonLeft,.mCSB_scrollTools .mCSB_buttonRight,.mCSB_scrollTools .mCSB_buttonUp { background-image: url(mCSB_buttons.png); background-repeat: no-repeat; opacity: .4; filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)" } .mCSB_scrollTools .mCSB_buttonUp { background-position: 0 0 } .mCSB_scrollTools .mCSB_buttonDown { background-position: 0 -20px } .mCSB_scrollTools .mCSB_buttonLeft { background-position: 0 -40px } .mCSB_scrollTools .mCSB_buttonRight { background-position: 0 -56px } .mCSB_scrollTools .mCSB_buttonDown:hover,.mCSB_scrollTools .mCSB_buttonLeft:hover,.mCSB_scrollTools .mCSB_buttonRight:hover,.mCSB_scrollTools .mCSB_buttonUp:hover { opacity: .75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)" } .mCSB_scrollTools .mCSB_buttonDown:active,.mCSB_scrollTools .mCSB_buttonLeft:active,.mCSB_scrollTools .mCSB_buttonRight:active,.mCSB_scrollTools .mCSB_buttonUp:active { opacity: .9; filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)" } .mCS-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0,0,0,.15) } .mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,.75) } .mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: rgba(0,0,0,.85) } .mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar { background-color: rgba(0,0,0,.9) } .mCS-dark.mCSB_scrollTools .mCSB_buttonUp { background-position: -80px 0 } .mCS-dark.mCSB_scrollTools .mCSB_buttonDown { background-position: -80px -20px } .mCS-dark.mCSB_scrollTools .mCSB_buttonLeft { background-position: -80px -40px } .mCS-dark.mCSB_scrollTools .mCSB_buttonRight { background-position: -80px -56px } .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail,.mCS-light-2.mCSB_scrollTools .mCSB_draggerRail { width: 4px; background-color: #fff; background-color: rgba(255,255,255,.1); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-light-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 4px; background-color: #fff; background-color: rgba(255,255,255,.75); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px } .mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-light-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-light-2.mCSB_scrollTools_horizontal .mCSB_draggerRail { width: 100%; height: 4px; margin: 6px auto } .mCS-light-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255,255,255,.85) } .mCS-light-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-light-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255,255,255,.9) } .mCS-light-2.mCSB_scrollTools .mCSB_buttonUp { background-position: -32px 0 } .mCS-light-2.mCSB_scrollTools .mCSB_buttonDown { background-position: -32px -20px } .mCS-light-2.mCSB_scrollTools .mCSB_buttonLeft { background-position: -40px -40px } .mCS-light-2.mCSB_scrollTools .mCSB_buttonRight { background-position: -40px -56px } .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0,0,0,.1); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,.75); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,.85) } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-dark-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,.9) } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonUp { background-position: -112px 0 } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonDown { background-position: -112px -20px } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonLeft { background-position: -120px -40px } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonRight { background-position: -120px -56px } .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail,.mCS-light-thick.mCSB_scrollTools .mCSB_draggerRail { width: 4px; background-color: #fff; background-color: rgba(255,255,255,.1); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-light-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 6px; background-color: #fff; background-color: rgba(255,255,255,.75); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px } .mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail { width: 100%; height: 4px; margin: 6px 0 } .mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { width: 100%; height: 6px; margin: 5px auto } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255,255,255,.85) } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-light-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255,255,255,.9) } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonUp { background-position: -16px 0 } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonDown { background-position: -16px -20px } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonLeft { background-position: -20px -40px } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonRight { background-position: -20px -56px } .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0,0,0,.1); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,.75); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,.85) } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,.9) } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonUp { background-position: -96px 0 } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonDown { background-position: -96px -20px } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonLeft { background-position: -100px -40px } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonRight { background-position: -100px -56px } .mCS-light-thin.mCSB_scrollTools .mCSB_draggerRail { background-color: #fff; background-color: rgba(255,255,255,.1) } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-light-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 2px } .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail { width: 100% } .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { width: 100%; height: 2px; margin: 7px auto } .mCS-dark-thin.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0,0,0,.15) } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,.75) } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,.85) } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,.9) } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonUp { background-position: -80px 0 } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonDown { background-position: -80px -20px } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonLeft { background-position: -80px -40px } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonRight { background-position: -80px -56px } .mCS-rounded.mCSB_scrollTools .mCSB_draggerRail { background-color: #fff; background-color: rgba(255,255,255,.15) } .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger,.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger,.mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger,.mCS-rounded.mCSB_scrollTools .mCSB_dragger { height: 14px } .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 14px; margin: 0 1px } .mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger,.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger,.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger,.mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger { width: 14px } .mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { height: 14px; margin: 1px 0 } .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar { width: 16px; height: 16px; margin: -1px 0 } .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail { width: 4px } .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar { height: 16px; width: 16px; margin: 0 -1px } .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail { height: 4px; margin: 6px 0 } .mCS-rounded.mCSB_scrollTools .mCSB_buttonUp { background-position: 0 -72px } .mCS-rounded.mCSB_scrollTools .mCSB_buttonDown { background-position: 0 -92px } .mCS-rounded.mCSB_scrollTools .mCSB_buttonLeft { background-position: 0 -112px } .mCS-rounded.mCSB_scrollTools .mCSB_buttonRight { background-position: 0 -128px } .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,.75) } .mCS-rounded-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0,0,0,.15) } .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,.85) } .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,.9) } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonUp { background-position: -80px -72px } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonDown { background-position: -80px -92px } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonLeft { background-position: -80px -112px } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonRight { background-position: -80px -128px } .mCS-rounded-dots-dark.mCSB_scrollTools_vertical .mCSB_draggerRail,.mCS-rounded-dots.mCSB_scrollTools_vertical .mCSB_draggerRail { width: 4px } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail,.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail { background-color: transparent; background-position: center } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail { background-image: url(data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg==);background-repeat: repeat-y; opacity: .3; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)" } .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail { height: 4px; margin: 6px 0; background-repeat: repeat-x } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonUp { background-position: -16px -72px } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonDown { background-position: -16px -92px } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonLeft { background-position: -20px -112px } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonRight { background-position: -20px -128px } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail { background-image: url(data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYV2NkIAAYSVFgDFR8BqrBBEifBbGRTfiPZhpYjiQFBK3A6l6CvgAAE9kGCd1mvgEAAAAASUVORK5CYII=) } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonUp { background-position: -96px -72px } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonDown { background-position: -96px -92px } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonLeft { background-position: -100px -112px } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonRight { background-position: -100px -128px } .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-repeat: repeat-y; background-image: -moz-linear-gradient(left,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%); background-image: -webkit-gradient(linear,left top,right top,color-stop(0,rgba(255,255,255,.5)),color-stop(100%,rgba(255,255,255,0))); background-image: -webkit-linear-gradient(left,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%); background-image: -o-linear-gradient(left,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%); background-image: -ms-linear-gradient(left,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%); background-image: linear-gradient(to right,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%) } .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { background-repeat: repeat-x; background-image: -moz-linear-gradient(top,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(255,255,255,.5)),color-stop(100%,rgba(255,255,255,0))); background-image: -webkit-linear-gradient(top,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%); background-image: -o-linear-gradient(top,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%); background-image: -ms-linear-gradient(top,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%); background-image: linear-gradient(to bottom,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%) } .mCS-3d-dark.mCSB_scrollTools_vertical .mCSB_dragger,.mCS-3d.mCSB_scrollTools_vertical .mCSB_dragger { height: 70px } .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger,.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger { width: 70px } .mCS-3d-dark.mCSB_scrollTools,.mCS-3d.mCSB_scrollTools { opacity: 1; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)" } .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_draggerRail { -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px } .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-3d.mCSB_scrollTools .mCSB_draggerRail { width: 8px; background-color: #000; background-color: rgba(0,0,0,.2); box-shadow: inset 1px 0 1px rgba(0,0,0,.5),inset -1px 0 1px rgba(255,255,255,.2) } .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #555 } .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 8px } .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-3d.mCSB_scrollTools_horizontal .mCSB_draggerRail { width: 100%; height: 8px; margin: 4px 0; box-shadow: inset 0 1px 1px rgba(0,0,0,.5),inset 0 -1px 1px rgba(255,255,255,.2) } .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { width: 100%; height: 8px; margin: 4px auto } .mCS-3d.mCSB_scrollTools .mCSB_buttonUp { background-position: -32px -72px } .mCS-3d.mCSB_scrollTools .mCSB_buttonDown { background-position: -32px -92px } .mCS-3d.mCSB_scrollTools .mCSB_buttonLeft { background-position: -40px -112px } .mCS-3d.mCSB_scrollTools .mCSB_buttonRight { background-position: -40px -128px } .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0,0,0,.1); box-shadow: inset 1px 0 1px rgba(0,0,0,.1) } .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail { box-shadow: inset 0 1px 1px rgba(0,0,0,.1) } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonUp { background-position: -112px -72px } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonDown { background-position: -112px -92px } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonLeft { background-position: -120px -112px } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonRight { background-position: -120px -128px } .mCS-3d-thick-dark.mCSB_scrollTools,.mCS-3d-thick.mCSB_scrollTools { opacity: 1; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)" } .mCS-3d-thick-dark.mCSB_scrollTools,.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer,.mCS-3d-thick.mCSB_scrollTools,.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer { -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px } .mCSB_inside+.mCS-3d-thick-dark.mCSB_scrollTools_vertical,.mCSB_inside+.mCS-3d-thick.mCSB_scrollTools_vertical { right: 1px } .mCS-3d-thick-dark.mCSB_scrollTools_vertical,.mCS-3d-thick.mCSB_scrollTools_vertical { box-shadow: inset 1px 0 1px rgba(0,0,0,.1),inset 0 0 14px rgba(0,0,0,.5) } .mCS-3d-thick-dark.mCSB_scrollTools_horizontal,.mCS-3d-thick.mCSB_scrollTools_horizontal { bottom: 1px; box-shadow: inset 0 1px 1px rgba(0,0,0,.1),inset 0 0 14px rgba(0,0,0,.5) } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; box-shadow: inset 1px 0 0 rgba(255,255,255,.4); width: 12px; margin: 2px; position: absolute; height: auto; top: 0; bottom: 0; left: 0; right: 0 } .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { box-shadow: inset 0 1px 0 rgba(255,255,255,.4); height: 12px; width: auto } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #555 } .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer { background-color: #000; background-color: rgba(0,0,0,.05); box-shadow: inset 1px 1px 16px rgba(0,0,0,.1) } .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerRail { background-color: transparent } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonUp { background-position: -32px -72px } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonDown { background-position: -32px -92px } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonLeft { background-position: -40px -112px } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonRight { background-position: -40px -128px } .mCS-3d-thick-dark.mCSB_scrollTools { box-shadow: inset 0 0 14px rgba(0,0,0,.2) } .mCS-3d-thick-dark.mCSB_scrollTools_horizontal { box-shadow: inset 0 1px 1px rgba(0,0,0,.1),inset 0 0 14px rgba(0,0,0,.2) } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { box-shadow: inset 1px 0 0 rgba(255,255,255,.4),inset -1px 0 0 rgba(0,0,0,.2) } .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { box-shadow: inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.2) } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #777 } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer { background-color: #fff; background-color: rgba(0,0,0,.05); box-shadow: inset 1px 1px 16px rgba(0,0,0,.1) } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-minimal.mCSB_scrollTools .mCSB_draggerRail { background-color: transparent } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonUp { background-position: -112px -72px } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonDown { background-position: -112px -92px } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonLeft { background-position: -120px -112px } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonRight { background-position: -120px -128px } .mCSB_outside+.mCS-minimal-dark.mCSB_scrollTools_vertical,.mCSB_outside+.mCS-minimal.mCSB_scrollTools_vertical { right: 0; margin: 12px 0 } .mCustomScrollBox.mCS-minimal+.mCSB_scrollTools+.mCSB_scrollTools.mCSB_scrollTools_horizontal,.mCustomScrollBox.mCS-minimal+.mCSB_scrollTools.mCSB_scrollTools_horizontal,.mCustomScrollBox.mCS-minimal-dark+.mCSB_scrollTools+.mCSB_scrollTools.mCSB_scrollTools_horizontal,.mCustomScrollBox.mCS-minimal-dark+.mCSB_scrollTools.mCSB_scrollTools_horizontal { bottom: 0; margin: 0 12px } .mCS-dir-rtl>.mCSB_outside+.mCS-minimal-dark.mCSB_scrollTools_vertical,.mCS-dir-rtl>.mCSB_outside+.mCS-minimal.mCSB_scrollTools_vertical { left: 0; right: auto } .mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger,.mCS-minimal.mCSB_scrollTools_vertical .mCSB_dragger { height: 50px } .mCS-minimal-dark.mCSB_scrollTools_horizontal .mCSB_dragger,.mCS-minimal.mCSB_scrollTools_horizontal .mCSB_dragger { width: 50px } .mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255,255,255,.2); filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)" } .mCS-minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255,255,255,.5); filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)" } .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,.2); filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)" } .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,.5); filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)" } .mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail,.mCS-light-3.mCSB_scrollTools .mCSB_draggerRail { width: 6px; background-color: #000; background-color: rgba(0,0,0,.2) } .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 6px } .mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-light-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-light-3.mCSB_scrollTools_horizontal .mCSB_draggerRail { width: 100%; height: 6px; margin: 5px 0 } .mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,.mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail { width: 12px } .mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,.mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail { height: 12px; margin: 2px 0 } .mCS-light-3.mCSB_scrollTools .mCSB_buttonUp { background-position: -32px -72px } .mCS-light-3.mCSB_scrollTools .mCSB_buttonDown { background-position: -32px -92px } .mCS-light-3.mCSB_scrollTools .mCSB_buttonLeft { background-position: -40px -112px } .mCS-light-3.mCSB_scrollTools .mCSB_buttonRight { background-position: -40px -128px } .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,.75) } .mCS-dark-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,.85) } .mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-dark-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,.9) } .mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0,0,0,.1) } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonUp { background-position: -112px -72px } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonDown { background-position: -112px -92px } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonLeft { background-position: -120px -112px } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonRight { background-position: -120px -128px } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset.mCSB_scrollTools .mCSB_draggerRail { width: 12px; background-color: #000; background-color: rgba(0,0,0,.2) } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 6px; margin: 3px 5px; position: absolute; height: auto; top: 0; bottom: 0; left: 0; right: 0 } .mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-inset.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { height: 6px; margin: 5px 3px; position: absolute; width: auto; top: 0; bottom: 0; left: 0; right: 0 } .mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-inset.mCSB_scrollTools_horizontal .mCSB_draggerRail { width: 100%; height: 12px; margin: 2px 0 } .mCS-inset-2.mCSB_scrollTools .mCSB_buttonUp,.mCS-inset-3.mCSB_scrollTools .mCSB_buttonUp,.mCS-inset.mCSB_scrollTools .mCSB_buttonUp { background-position: -32px -72px } .mCS-inset-2.mCSB_scrollTools .mCSB_buttonDown,.mCS-inset-3.mCSB_scrollTools .mCSB_buttonDown,.mCS-inset.mCSB_scrollTools .mCSB_buttonDown { background-position: -32px -92px } .mCS-inset-2.mCSB_scrollTools .mCSB_buttonLeft,.mCS-inset-3.mCSB_scrollTools .mCSB_buttonLeft,.mCS-inset.mCSB_scrollTools .mCSB_buttonLeft { background-position: -40px -112px } .mCS-inset-2.mCSB_scrollTools .mCSB_buttonRight,.mCS-inset-3.mCSB_scrollTools .mCSB_buttonRight,.mCS-inset.mCSB_scrollTools .mCSB_buttonRight { background-position: -40px -128px } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,.75) } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,.85) } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,.9) } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0,0,0,.1) } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonUp,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonUp,.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonUp { background-position: -112px -72px } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonDown,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonDown,.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonDown { background-position: -112px -92px } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonLeft,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonLeft,.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonLeft { background-position: -120px -112px } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonRight,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonRight,.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonRight { background-position: -120px -128px } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail { background-color: transparent; border-width: 1px; border-style: solid; border-color: #fff; border-color: rgba(255,255,255,.2); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail { border-color: #000; border-color: rgba(0,0,0,.2) } .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail { background-color: #fff; background-color: rgba(255,255,255,.6) } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0,0,0,.6) } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,.75) } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,.85) } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-inset-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar { background-color: #000; background-color: rgba(0,0,0,.9) } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255,255,255,.75) } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255,255,255,.85) } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255,255,255,.9) } .inside{width: 100%;overflow: hidden;line-height: 1.6;} .detailWarp{width: 100%;max-width: 760px;margin: 0 auto;} .detailWarp .warp{width: 100%;max-width: 100%;margin: 0 auto;} .detailWarp .warp .imgBox{ width:100%; text-align:center} .detailWarp .warp .imgBox img{ width:auto; height:auto; max-height: 720px; max-width:100%;} .prodetail .swiper-button-next,.prodetail .swiper-button-prev{color: #fff;} .prodetail .swiper-button-next:after,.prodetail .swiper-button-prev:after{font-size: 42px;} .prodpSwiper .swiper-slide{display: flex;justify-content: center;align-items: center;padding: 10px;background: transparent;} .prodpSwiper .swiper-slide img{transition: 0.5s;max-width: 100%;max-height: 100%;width: auto;height: auto;} /*.prodpSwiper .swiper-slide img:hover{transform: scale(1.1);}*/ .prodpSwiper{height: 37.5vw;} .prodpSwiper{z-index: 98 !important;} .prodtSwiper{margin-top: 10px;} .prodtSwiper .swiper-slide{background: transparent;padding: 5px;} .prodtSwiper .swiper-slide img{opacity: 0.6;} .prodtSwiper .swiper-slide-thumb-active img{opacity: 1;} .detailInfo{font-size: 14px;color: #333;margin-top: 35px;} .commentList{width: 100%;max-width: 600px;} .commentList ul li{line-height: 35px;} .commentList .tit{font-size: 14px;color: #555;} .commentList .tit:hover{color: #333;} @media only screen and (max-width: 1480px) { .wapper{ width:100%;} #main{margin: 100px auto;box-sizing: border-box;min-width: 100px;} .main-contents{min-width: auto;width: calc(100% - 200px);margin-left: auto;} .detailWarp{margin: 0 auto;} } @media only screen and (max-width: 1200px) { .wapper{ width:100%;} .menu{margin-left: 20px;} .menu a{padding: 0 20px;font-size: 14px;} } @media only screen and (max-width: 980px) { .sjj_nav1{ display:block;} .headList{height: 70px;} .menu{display: none;} .sp_nav1{display: block;} .headList .logo{margin-left: 5px;margin-right: auto;} .headList .logo img{max-height: 45px;} .language{margin-left: 5px;} .language a{font-size: 12px;} .searchBtn{display: block;} .searchPanel{position: absolute;top: 0;left: 0;width: 100%;height: 70px;background: #fff;padding: 20px;display: none;} .searchPanel.active{display: block;} .searchPanel .searchClose{position: absolute;top: 50%;transform: translateY(-50%);right: 10px;display: block;} .searchPanel .search{width: calc(100% - 50px);} .about-content-box{max-width: 100%;} .index1 .iVideo{width: 100%;height: 100vh;} .index1 .iVideo video{width: 100%;height: 100%;object-fit: cover;} .banner{padding-top: 70px;} .prodpSwiper{height: 100%;} } @media only screen and (max-width: 767px) { .main-contents{width: 100%} }