/* CSS Document */ * { margin:0; padding:0; border:0; } body {font-family:'Myriad Set Pro', 'Arial', 'Helvetica', 'sans-serif'; font-size:16px; color:#666; line-height:18px; z-index:-10000; min-width: 1000px;} a { color:#00aeef; text-decoration: underline; cursor:pointer; outline:none } a:hover { text-decoration: none; } li { list-style:none } h1, .t1 { font-size:35px; font-weight:200; color:#222222; line-height:34px; padding:35px 0 24px 0; } .t1 {font-size:35px; color:#666; } h2 {font-size:24px; color:#333; line-height:20px; padding:35px 0 20px 0; font-weight:400; } p{ padding-bottom:18px;} img{ vertical-align:top} .clear { clear:both; overflow:hidden; } .top_sales{ height:32px; line-height:32px; background:#282d32; width:auto;} .top_sales_mian{ width:1000px; margin: 0 auto;} .top_sales_text{ float:left; width:650px; text-align:left; height:32px; color:#FFEF00;} .top_sales_text a{color:#00FF00; text-decoration: none;} .top_sales_text a:hover { text-decoration: underline; } .international{ width:200px; float:right; text-align:right;} .international span{ padding-right:10px; color:#b4b4b4;} .Language { width:32px; height:32px; position:relative; float:right;} .Language li a, .Language li a:visited { display:block; width:30px; height:45px; text-align:center; line-height:45px; font-size:14px; overflow:hidden; } .Language li { float:left; margin-right:1px; position:relative; height:45px; line-height:45px; } .Language li a { background:url(../image/Language_module.png) no-repeat -4px -165px; height:35px; width:30px; line-height:35px; } .Language li ul { display: none; z-index:999999; } .Language li:hover a { color:#fff; } .Language li:hover ul { display:block; position:absolute; left:-120px; top:32px; width:150px; background:#fff; border:1px solid #CCC; } .Language li:hover ul li { float:none; margin:0px; width:150px; height:30px; } .Language li:hover ul li a { display:block; color:#000; width:120px; padding:0px 15px; text-align:left; height:30px; line-height:30px; text-decoration:none; } .Language li:hover ul .jp a { background-position:115px -238px; } .Language li:hover ul .de a { background-position:115px -180px; } .Language li:hover ul .fr a { background-position:115px -209px; } .Language li:hover ul .ru a { background-position:115px -150px; } .Language li:hover ul .zh a { background-position:115px -122px; } .Language .english a { background-position:-4px -265px; } .Language li:hover ul li:hover { background:#f7f7f7; } /* top start */ .nav { width:600px; height:70px; margin:0 auto; float:left;} .nav .nav_list { float:left;} .nav li { float:left; height:70px; line-height:70px; position:relative;} .nav li.last { background:none; } .nav li a { float:left; display:block; width:110px; height:70px; text-align:center; font-size:17px; line-height:70px; text-decoration:none; color:#6a6a6a; } .nav li a:hover { color:#333;text-decoration:none; background:#f6f6f6;border-bottom:2px solid #009ad9; } .nav li a.selected { background:#f6f6f6; color:#333;border-bottom:2px solid #009ad9;} .nav li.selected .submenu { display:block; } .nav li .submenu { display:none; position:absolute; top:72px; left:-200px; background:url(../image/headbg.png); width:1000px;z-index:99;border:1px solid #ccc;border-top:none;} .nav .nav_list .drop-menu-effect .products-img img{ padding-top:33px; padding-left:5px;} .Media_Player { width:484px; height:230px; margin:20px 0px; padding-left:10px; border-right:1px solid #CCC; float:left; } #drop-down-menu { width:484px; height:230px; margin:0px; padding:0px; } #drop-down-menu-title { margin:0px; padding:0px; line-height:40px; height:40px; font-size:16px; padding-bottom:10px; } #drop-down-menu .div-list{float:left; width:150px; height:185px; font-size:14px; background:none; color:#666;text-align:center;margin-right:5px; border:none; border-right:dashed 1px #CCC;padding-right:5px;} #drop-down-menu .div-list span{ clear:both; line-height:40px; height:40px;} #drop-down-menu .div-list a{ background:none; color:#666;font-size:13px; border:none; text-align:center; line-height:21px; width:100%;} #drop-down-menu .div-list a:hover{ color:#00aeef; text-decoration:none; } #drop-down-menu .div-list .dh-img-a{ height:135px; display:block; width:150px; font-size:14px; overflow:hidden; padding:0px;} #drop-down-menu .div-list .dh-img-a .dh-system-icon{ font-size:13px;background:url(../image/xitong-icon-25.png) no-repeat 25px 0px; padding-left:35px;} #drop-down-menu .div-list .dh-img-a:hover .dh-system-icon{background:url(../image/xitong-icon-25.png) no-repeat 25px -25px;} #drop-down-menu .div-list .dh-img-a .dh-system-icon-pc{ font-size:13px;background:url(../image/xitong-icon-25.png) no-repeat 25px -50px; padding-left:35px;} #drop-down-menu .div-list .dh-img-a:hover .dh-system-icon-pc{background:url(../image/xitong-icon-25.png) no-repeat 25px -75px;} #drop-down-menu .div-list p{ padding:0px; margin:0px; line-height:30px; } #drop-down-menu .div-list p .dot-gray{ height:28px; line-height:28px; overflow:hidden; margin:0 auto; text-align:left;padding-left:55px;} #drop-down-menu .div-list p .dot-gray-mac{background:url(../image/xitong-icon-25.png) no-repeat 25px 0px;} #drop-down-menu .div-list p .dot-gray-mac:hover{background:url(../image/xitong-icon-25.png) no-repeat 25px -25px;} #drop-down-menu .div-list p .dot-gray-win{background:url(../image/xitong-icon-25.png) no-repeat 25px -50px;} #drop-down-menu .div-list p .dot-gray-win:hover{background:url(../image/xitong-icon-25.png) no-repeat 25px -75px;} .facebook_icon{ width:140px; float:right; z-index:999; height:70px; } .facebook_icon li{ float:left; height:52px; padding-top:17px; margin-right:10px;} .facebook_icon li a{filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity: 0.8; opacity: 0.8; } .facebook_icon li a:hover{filter:alpha(opacity=100); -moz-opacity:1.0; -khtml-opacity: 1.0; opacity: 1.0;} .facebook_icon li img{ width:36px; height:36px;-moz-border-radius:5px; -webkit-border-radius:5px; border-radius: 5px;} /* top over */ .banner { height: 530px; overflow: hidden; position:relative; -webkit-transform: translate3d(0px, 0px, 0px); z-index:0; clear: both;} .flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; } .slides:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } html[xmlns] .slides { display: block; } .no-js .slides > li:first-child { display: block; } .flexslider { margin: 0 auto; } .flexslider .slides .ban1{ background:url(../image/16-Valentines-day-banner.jpg) no-repeat center center; width:auto; height:530px;} .flexslider .slides .ban2{ background:url(../image/banner_002.jpg) no-repeat center center; width:auto; height:530px;} .flexslider .slides .ban3{ background:url(../image/back-to-school-banner.jpg) no-repeat center center; width:auto; height:530px;} .flexslider .slides li .banli{ width:1000px; height:360px; margin:0 auto; padding-top:170px;} .flexslider .slides li .banli p{ text-align:center; margin-top:30px; font-size:19px; color:#fff;} .flexslider .slides li .banli p .banner-a1{ color:#FFF; text-decoration:none; padding:0px 55px; width:240px; height:30px; display:block; margin:0 auto; background:url(../image/banner-abg.png) no-repeat -10px -5px; } .flexslider .slides li .banli p .banner-a1:hover{ text-decoration:underline;background-position:-10px -43px; } .flexslider .slides li .banli p .banner-a2{ color:#FFF; text-decoration:none; padding:0px 15px;width:260px; height:30px; display:block; margin:0 auto;background:url(../image/banner-abg.png) no-repeat 0px -80px; } .flexslider .slides li .banli p .banner-a2:hover{ text-decoration:underline; background-position:0px -118px;} .flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; } .flex-direction-nav { *height: 0; } .flex-direction-nav a { width: 60px; height: 90px; margin: -60px 0 0; display: block; background: url(../image/ad_ctr.png) no-repeat 0 0; position: absolute; top: 50%; cursor: pointer; text-indent: -9999px; opacity: 0; filter:alpha(opacity=0); -webkit-transition: all .3s ease;} .flex-direction-nav .flex-next { background-position: 0 -90px; right: 0; top:312px; } .flex-direction-nav .flex-prev { left: 0;top:312px; } .flexslider:hover .flex-next { opacity: 0.8; filter:alpha(opacity=25); } .flexslider:hover .flex-prev { opacity: 0.8; filter:alpha(opacity=25); } .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 1; filter:alpha(opacity=50); } .flex-control-nav { width: 100%; position: absolute; text-align: center; left:0; top:500px; } .flex-control-nav li { margin: 0 5px; display: inline-block; *display: inline;} .flex-control-paging li a {background: url(../image/dot.png) no-repeat 0 -16px;display:block; height: 16px;overflow: hidden; text-indent:-99em; width: 16px; cursor: pointer; } .flex-control-paging li a.flex-active { background-position: 0 0; } /* product */ .sichanpi_h1{ width:1000px; margin:0 auto; text-align:center;} .case{border-bottom: 1px solid #e8e8e8;background:url(../image/sichanpibg.jpg) repeat-x 0px 200px;} .case .title{width:1000px; margin:0 auto; height:200px;} .case .title h2{font-size:26px;} .case .title-list{position:relative;} .case .title-list li{width:250px; height:180px;text-align:center;float:left;display:inline; font-size:17px;cursor:pointer; overflow:hidden;} .case .title-list li img{ clear:both; padding-bottom:15px; padding-top:5px;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;} .case .title-list li:hover img{ padding-top:0px;} .case .title-list li.on{color:#00AEEF;} .case .title-list p.xian{position:absolute;top:190px;left:0px;width:250px;height:7px;overflow:hidden;background:url(../image/indexqhbg.png) no-repeat bottom center; } .product{ height:310px;overflow:hidden;display:none; padding:30px 0px; width:1000px; margin:0 auto;} .product ul{ margin:0 auto; width:1000px;} .product-wrap .show{display:block;} .list_box_left{ float:left; width:500px; height:360px;} .list_box_left p{ text-align:center; margin-top:10px;} .list_box_left p a{ text-decoration:none;} .list_box_left p a:hover{ text-decoration: underline; } .list_box_right{ float:right; width:490px; line-height:21px;} .list_box_right h3{ padding-bottom:20px; padding-top:20px;} .list_box_right h3 a{font-size:26px; text-decoration:none; font-weight:400; } .list_box_right h3 a:hover{ text-decoration:underline;} .list_box_right ul{ margin-bottom:30px;} .list_box_right ul li{ float:none;line-height:28px; padding:0px; background:url(../image/arrow-down.png) no-repeat 0px 10px; padding-left:15px;} .list_box_right ul li a{ text-decoration:none; color:#666; } .list_box_right ul li a:hover{ text-decoration:underline;} .sy-down-a {overflow: hidden; display:block; height:40px; width:200px; line-height:40px; text-align:center; float:left; margin-right:30px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius: 5px; text-decoration:none; font-size:16px; text-transform:uppercase; color:#fff;} .sy-down-a span { position: relative; display: inline-block; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; width:200px;text-align:center;} .sy-down-a span::before { position: absolute; top: 100%; content: attr(data-hover); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);text-align:center;display:block;width:200px; height:40px;} .sy-down-a:hover span, .sy-down-a:focus span { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%); } .sy-down-a1{border:1px solid #5ab3f6; color:#fff; background:#5ab3f6; -webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;} .sy-down-a1:hover{border:1px solid #5ab3f6; background:#51a6e6;} .sy-down-a2{border:1px solid #fa594b; color:#fa594b; -webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;} .sy-down-a2:hover{ border:1px solid #fa594b; color:#fff; background:#fa594b;} .sy-down-a3{border:1px solid #75c500; color:#75c500; -webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;} .sy-down-a3:hover{ border:1px solid #75c500; color:#fff; background:#75c500;} .index_system_tab{ height:30px; width:auto; margin-bottom:20px;margin-top:12px;} .index_system_tab span{ display:block; float:left; font-size:26px; padding-right:15px;line-height:30px;} .index_system_tab a{ display:block; padding:3px 10px; float:left; margin-left:8px; font-size:14px; text-decoration:none;-moz-border-radius:3px; -webkit-border-radius:3px; border-radius: 3px;} .index_system_tab a:hover{background:#fa594b;color:#FFF;} .index_system_tab .tab_a1{background:#fa594b;color:#FFF;} .Review{ margin:50px 0px; width:auto; height:auto;} .Reviewbg{ width:1000px; height:auto; margin:0 auto; border-bottom:1px solid #e5e5e5; padding-bottom:20px; } .Review_title{ text-align:center; margin-bottom:40px;font-size:24px; font-weight:200;} .Review_title p{ font-size:38px; margin-bottom:0px; font-weight:200; } .Review_box{ width:220px; margin-right:40px; float:left; text-align:center;overflow:hidden;} .Review_box p{line-height:24px;} .security{ width:auto; height:auto;} .securitybg{width:1000px; height:auto; margin:0 auto;} .securitybg div{ float:left; width:280px; margin-right:50px; text-align:center; padding:0px 10px; line-height:24px; height:300px;} .footer{ width:auto; height:auto; background:#e2e2e2; clear:both;} .footerbg{ width:1000px; height:auto; margin:0 auto;} .footerbg div{ float:left; width:170px; padding:30px 15px; } .footerbg div p{ font-size:18px} .footerbg div ul li{ padding-bottom:10px;padding-right:15px; overflow:hidden;} .footerbg div ul li a{ text-decoration:none; color:#888; font-size:14px} .footerbg div ul li a:hover{ text-decoration:underline; color:#555;} .ban1-ios8{ display:block; width:200px; height:50px; font-size:20px; text-decoration:none; color:#545353; margin-left:555px; margin-top:208px; border:1px solid #545353; text-align:center; line-height:50px;-moz-border-radius:5px; -webkit-border-radius:5px; border-radius: 5px; } .ban1-ios8:hover{ color:#ee8300; border:1px solid #ee8300; } .main{ width:1000px; margin:0 auto;} .blu-ray-player{ background:#f6f6f6; width:auto; padding-top:40px; padding-bottom:30px;} .blu-ray-player-title{color:#666; font-size:38px; font-weight:200; text-align:center; width:100%; padding:0px; padding-bottom:20px; } .blu-ray-player-img{ height:366px; width:auto; text-align:center;} .blu-ray-player-text{ width:370px;float:left; position:relative; padding-left:100px; padding-right:30px;} .blu-ray-player-icon{ position:absolute; left:25px; top:20px;} .blu-ray-player-text h2{ font-weight:200; font-size:30px; } .blu-ray-player-text h2 a{ text-decoration:none;} .blu-ray-player-text h2 a:hover{ text-decoration:underline;} .blu-ray-player-text ul{ padding-left:15px; height:146px;} .blu-ray-player-text ul li{ list-style:disc; padding-bottom:5px; line-height:24px;} .blu-ray-player-text .bottom { list-style:none; padding:10px 0px;} .blu-ray-player-text .bottom a{ text-decoration:none; margin-right:38px;font-size:14px;} .blu-ray-player-text .bottom a:hover{ text-decoration:underline;} .blu-ray-player-text div.bottom1{ list-style:none; margin:15px 0px;} .blu-ray-player-text div.bottom1 a{ text-decoration:none; margin-right:15px; float:left; display:block; color:#fff; text-align:center; height:24px; line-height:24px;padding:0px 20px;} .blu-ray-player-text div.bottom1 a.bottom1-a{background:#5ab3f6; } .blu-ray-player-text div.bottom1 a.bottom1-a:hover{ background:#51a6e6;} .blu-ray-player-text div.bottom1 a.bottom1-b{background:#fa594b; } .blu-ray-player-text div.bottom1 a.bottom1-b:hover{ background:#ee493b;} .blu-ray-player-text div.bottom1 a:hover{ text-decoration:none;} .blu-ray-player-text p{ padding-bottom:0px;} .blu-ray-player-text p a{ text-decoration:none; line-height:24px; } .blu-ray-player-text p a:hover{ text-decoration:underline; } .blu-ray-player-text p a span{ font-size:10px; background:#ea8a18; display:inline-block; width:45px; height:14px; line-height:16px; text-align:center; color:#fff;} .SpyHunter_container { overflow: hidden; position: relative; height: 680px; } .SpyHunter_container:before { background: #1D1B26; color: #ffffff; text-align: center; z-index: -1; overflow: hidden; content: ''; width: 140%; left: -20%; position: absolute; border-radius: 0 0 50% 50%; height: 100%; } .SpyHunter_container .text { text-align: center; padding: 35px 10px 0; width: 100%; max-width: 800px; margin: 0 auto; box-sizing: border-box; color: #ffffff; } .SpyHunter_container .text h1 { font-size: 38px; line-height: 44px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; padding: 16px 0; } .SpyHunter_container .text p { font-size: 18px; opacity: 0.7; max-height: 50px; overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding: 0; } .SpyHunter_container .down_button { margin: 30px; margin-bottom: 10px; } .SpyHunter_container .down_button a { display: inline-block; height: 60px; padding: 0 40px; line-height: 60px; color: #ffffff; background: #2767FF; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; margin-bottom: 10px; text-decoration: none; text-transform: uppercase } .SpyHunter_container .down_button a:hover { opacity: 0.8; } .SpyHunter_container .down_button a:nth-of-type(2) { background: #FD2D55; } .SpyHunter_container .text .system { text-align: center; font-size: 14px; line-height: 16px; padding-bottom: 10px; opacity: 0.7; max-height: 42px; overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .SpyHunter_container .text .note { font-size: 12px; line-height: 16px; opacity: 0.8; color: #8f919c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .SpyHunter_container .text .switch { text-align: center; width: 200px; margin: 0 auto; margin-top: 20px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; overflow: hidden; } .SpyHunter_container .text .switch a { background: #ffffff; font-size: 12px; display: table-cell; padding: 8px 0; margin: 0; width: 100px; color: #0284fe; text-decoration: none; } .SpyHunter_container .text .switch a.default { opacity: 0.9; color: #666666; } .SpyHunter_main { width: auto; clear: both; margin-top: -200px; } .SpyHunter_main .section_1:first-child { text-align: center; max-width: 800px; margin: 0 auto; padding: 0 16px; } .SpyHunter_main .section_1:first-child .container { min-height: 300px; overflow: hidden; } .SpyHunter_main .section_1:first-child img { max-width: 100%; } .SpyHunter_main .section_1:nth-of-type(2) { text-align: center; } .SpyHunter_main .section_1 { padding: 60px 16px; height: auto; min-height: auto; max-height: auto; } .SpyHunter_main .section_1. tutorial_box { height: auto; min-height: auto; max-height: auto; } .SpyHunter_main .section_1:nth-of-type(3), .SpyHunter_main .section_1:nth-of-type(5), .SpyHunter_main .section_1:nth-of-type(7), .SpyHunter_main .section_1:nth-of-type(9) { background: #f3f3f3; } .SpyHunter_main .section_1 h2 { font-size: 30px; padding-bottom: 16px; } .SpyHunter_main .section_1 .container { max-width: 1000px; margin: 0 auto; } .SpyHunter_main .section_1 .text { padding: 32px; } .SpyHunter_main .section_1 .text .title { font-size: 30px; padding-bottom: 16px; } .SpyHunter_main .section_1 .left img, .SpyHunter_main .section_1 .right img { max-width: 90%; margin: 0 auto; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; overflow: hidden; box-shadow: 0 9px 12px 0 rgba(189, 189, 189, .3); } .SpyHunter_main .section_1 .left, .SpyHunter_main .section_1 .right { width: 100%; text-align: center; } @media (min-width: 996px) { .SpyHunter_main .section_1 .left, .SpyHunter_main .section_1 .right { width: 50%; } .SpyHunter_main .section_1 .left { float: left; } .SpyHunter_main .section_1 .right { float: right; } .SpyHunter_main .section_1 .left .text, .SpyHunter_main .section_1 .right .text { text-align: left; } } .SpyHunter_main .tutorial_box .title { font-size: 28px; text-align: center; padding: 16px; padding-top: 0; line-height: 40px; } .SpyHunter_main .tutorial { background: #fff; } .SpyHunter_main .tutorial .text { max-height: 400px; overflow: hidden; position: relative; padding-bottom: 20px; line-height: 1.2rem; font-size: 0.8rem; } .SpyHunter_main .tutorial .text p { padding-bottom: 16px; } .SpyHunter_main .tutorial .text .img_box { text-align: center; } .SpyHunter_main .tutorial .text .img_box img { width: 100%; max-width: 640px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; overflow: hidden; box-shadow: 0 9px 12px 0 rgba(189, 189, 189, .3); } .SpyHunter_main .more-btn { cursor: pointer; display: block; height: 60px; line-height: 60px; position: absolute; right: 0; bottom: 0; left: 0; width: 100%; text-align: center; color: #0284fe; } .SpyHunter_main .more-btn span { display: block; width: 100%; height: 100%; background: #fff; z-index: 2; position: absolute; } .SpyHunter_main .more-btn:hover span { text-decoration: underline; } .SpyHunter_main .more-btn:before { content: ''; width: 100%; height: 100%; position: absolute; top: -100%; left: 0; z-index: 1; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(100%, #fff)); background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), #fff); background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff); } .header { height: 68px; width: 100%; position: absolute; z-index: 99999; } .header:before { content: ''; width: auto; position: absolute; height: 68px; left: 0; right: 0; z-index: 0; opacity: .8; background: #FFFFFF; border-bottom: 2px solid #ccc; } .header_main { height: 68px; width: 1000px; margin: 0 auto; z-index: 1; position: relative; } .header_main .logo { height: 68px; width: 140px; display: inline-block; background: url(../image/macgologo.png) center no-repeat; float: left; margin-right: 40px; } .header_main .head-menu { display: inline-block; float: left; cursor: pointer; } .header_main .head-menu .item { display: inline-block; height: 68px; line-height: 68px; padding: 0 8px; margin: 0 4px; font-size: 16px; text-decoration: none; color: #6a6a6a; position: relative; -webkit-touch-callout: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; border-bottom: 2px solid #ccc; } .header_main .head-menu .item:hover { background: #f6f6f6; border-bottom: 2px solid #009ad9; } .header_main .head-menu .item:first-child { padding-right: 30px; } .header_main .head-menu .item i { opacity: 0.5; position: absolute; top: 26px; right: 8px; width: 16px; height: 16px; background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTUxOC40IDY5Ny42MDFsMzEzLjYtMzEwLjRjMTIuOC0xMi44IDEyLjgtMzEuOTk5IDAtNDQuNzk5cy0zMS45OTktMTIuOC00NC43OTkgMGwtMjg4IDI4OC0yODgtMjg4Yy0xMi44LTEyLjgtMzEuOTk5LTEyLjgtNDQuNzk5IDAtNi40IDYuNC05LjYgMTYtOS42IDIyLjQgMCA5LjYgMy4yIDE2IDkuNiAyMi40bDMxMC40IDMxMC40YzYuNCA2LjQgMTIuOCA5LjYgMjIuNCA5LjZzMTIuOC0zLjIgMTkuMi05LjZ6Ii8+PC9zdmc+"); } .header_main .head-menu .item.show i { transform: rotate(180deg); } .head-sub-menu { background: #f8f8f8; width: 100%; position: fixed; left: 0; top: 102px; padding: 30px 0; display: none; box-shadow: 0 2px 4px 0 rgba(189,189,189,.3); } .head-sub-menu .container { width: 1000px; margin: 0 auto; } .head-sub-menu .columns { text-align: left; float: left; display: inline-block; margin-right: 20px; } .head-sub-menu .columns:last-child { margin-right: 0; } .head-sub-menu .title { font-size: 18px; display: block; width: 100%; padding-bottom: 10px; text-align: center; color: #666666; } .head-sub-menu .columns_item { width: 116px; overflow: hidden; padding: 5px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; float: left; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } .head-sub-menu .columns_item a:first-child { font-size: 14px; display: block; width: 100%; text-align: center; color: #000; text-decoration: none; } .head-sub-menu .columns_item a:nth-child(2), .head-sub-menu .columns_item a:nth-child(3) { display: none; width: 90%; height: 24px; border: 1px solid #31c3ee; text-align: center; line-height: 24px; margin: 0 auto; margin-top: 5px; font-size: 12px; color: #31c3ee; text-decoration: none; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } .head-sub-menu .columns_item a:nth-child(3) { margin-bottom: 5px; } .head-sub-menu .columns_item:hover { background: #FFFFFF; } .head-sub-menu .columns_item:hover a:nth-child(2), .head-sub-menu .columns_item:hover a:nth-child(3) { display: block; } .head-sub-menu .columns_item:hover a:nth-child(2):hover, .head-sub-menu .columns_item:hover a:nth-child(3):hover { background: #31c3ee; color: #FFFFFF; } .head-sub-menu .columns_item img { width: 80px; height: 80px; margin: 0 auto; padding-bottom: 10px; opacity: 0.9; } .head-sub-menu .columns_item:hover img { opacity: 1; } .head-sub-menu .columns_item span { display: block; width: 100%; padding-bottom: 10px; font-size: 14px; line-height: 18px; color: #666666; } .head-sub-menu .columns_item:hover span { color: #333333; } .header_main .head-share { display: inline-block; float: right; cursor: pointer; padding-top: 16px; } .header_main .head-share a { display: inline-block; width: 36px; height: 36px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; background-size: 20px; background-repeat: no-repeat; background-position: center; } .header_main .head-share a.facebook { background-color: #627aaf; background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iI2ZmZiI+PHBhdGggZD0iTTU4OS41NzIgODAuMzFjLTI3LjE0OSAwLTUyLjc4OSAzLjAxOC04Mi45NTUgMTUuMDg0LTYxLjgzOSAyNS42MzktOTIuMDAzIDgyLjk1NS05Mi4wMDMgMTc0Ljk1N3Y4OC45ODdoLTg1Ljk2OXYxNDcuODA4aDg1Ljk2OXY0MjYuODMzaDE3NC45NTdWNTA3LjE0NmgxMTkuMTUybDE2LjU5LTE0Ny44MDhINTg5LjU2OXYtNjYuMzYzYzAtMjEuMTE1IDEuNTA4LTM2LjE5NyA3LjU0LTQzLjc0MSA3LjU0LTEzLjU3MyAyMi42MjQtMTkuNjA3IDQ2Ljc1NS0xOS42MDdoNzkuOTM3VjgxLjgxOUg1ODkuNTY2eiIvPjwvc3ZnPg=="); } .header_main .head-share a.twitter { background-color: #67bbe7; background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTkyMy4yIDI4OS42YzAgMzU0LjQtMjMyLjggNjA5LjYtNTc1LjIgNjIwLjgtMTQ0LjggMTEuMi0yNDQtMzIuOC0zMzIuOC05OS4yIDk5LjIgMTEuMiAyMzIuOC0yMS42IDI5OC40LTg4LjgtOTkuMiAwLTE1NS4yLTU2LTE4OC0xMzJoODguOGMtODguOC0zMy42LTE1Ni0xMDAtMTU2LTIxMC40IDIxLjYgMTEuMiA0NCAyMS42IDg4LjggMjEuNi03Ny42LTQ0LTEyMS42LTE4OC02Ni40LTI3Ni44QzE4MCAyMzUuMiAzMDEuNiAzMzUuMiA1MDIuNCAzNDUuNmMtNTYtMjIwLjggMjMyLjgtMzMyLjggMzU0LjQtMTg4IDU2LTExLjIgODguOC0zMi44IDEzMi01Ni0xMS4yIDU2LTQ0IDg4LjgtODguOCAxMTAuNCA0NCAwIDc3LjYtMTEuMiAxMTAuNC0zMi44LTEwLjQgNDQtNTQuNCA4OC44LTg3LjIgMTEwLjR6IiBmaWxsPSIjZmZmIi8+PC9zdmc+"); } .header_main .head-share a.google { background-color: #f4885a; background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTU0My44NzIgNjIyLjcyYy0xNC4wOC0yNS4zNDQtMjkuOTUyLTQ1LjMxMi00Ny4yMzItNTkuNzc2LTE3LjQwOC0xNC40NjQtMzMuMTUyLTI4LjQxNi00Ny4yMzItNDEuODU2LTE0LjIwOC0xMy40NC0yMS4yNDgtMjMuODA4LTIxLjI0OC0zMS4xMDQgMC03LjkzNiA1LjM3Ni0xNy4xNTIgMTYuMzg0LTI3LjY0OCAxMC44OC0xMC40OTYgMjIuOTEyLTIwLjk5MiAzNi4zNTItMzEuNDg4IDEzLjQ0LTEwLjQ5NiAyNS42LTI3LjM5MiAzNi40OC01MC41NnMxNi4yNTYtNTAuMDQ4IDE2LjI1Ni04MC41MTJjMC01NS4wNC0xNi05My44MjQtNDcuODcyLTExNi4yMjQuNzY4IDAgNi4yNzItLjUxMiAxNi44OTYtMS42NjQgMTAuNDk2LTEuMDI0IDE3LjkyLTIuMTc2IDIyLjI3Mi0zLjIgNC4yMjQtMS4xNTIgMTAuNDk2LTIuODE2IDE4LjQzMi01LjM3NiA3LjkzNi0yLjU2IDEzLjU2OC02LjE0NCAxNi44OTYtMTAuODggMy4wNzItNC42MDggNC43MzYtMTAuMjQgNC43MzYtMTYuNzY4IDAtNy45MzYtOC4wNjQtMTEuOTA0LTIzLjkzNi0xMS45MDQtMi4xNzYgMC0yMC45OTItLjI1Ni01Ni40NDgtLjUxMi0zNS41ODQtLjM4NC02MS44MjQtLjM4NC03OC44NDggMHMtMzguOTEyIDEuNzkyLTY1LjY2NCA0LjM1MmMtMjYuODggMi41Ni00OC4yNTYgNi4yNzItNjQuMTI4IDExLjM5Mi00MS45ODQgMTMuODI0LTc1LjUyIDM2LjIyNC0xMDAuNjA4IDY3LjQ1Ni0yNC45NiAzMS4xMDQtMzcuNTA0IDY4LjA5Ni0zNy41MDQgMTEwLjg0OCAwIDUwLjY4OCAxNiA5MS42NDggNDcuODcyIDEyMi43NTJzNzMuMjE2IDQ2LjMzNiAxMjMuOTA0IDQ1LjY5Nmg2LjUyOGMwIDE3LjQwOC43NjggMzAuMDggMi4xNzYgMzguMTQ0IDEuNDA4IDcuOTM2IDMuMzI4IDEyLjE2IDUuNTA0IDEyLjU0NCAyLjE3Ni4zODQgNC44NjQgMi4xNzYgOC4wNjQgNS4zNzZzNi4yNzIgOC40NDggOS4yMTYgMTUuNzQ0Yy0zOS45MzYgMC03Ny4wNTYgNC4zNTItMTExLjQ4OCAxMi45MjgtMzQuNDMyIDguNzA0LTY1LjI4IDI2LjExMi05Mi45MjggNTIuMjI0LTI3LjUyIDI2LjExMi00MS4yMTYgNTkuMDA4LTQxLjIxNiA5OC45NDQgMCA1NS44MDggMjIuMjcyIDk3LjI4IDY2LjgxNiAxMjQuNDE2IDQ0LjU0NCAyNy4xMzYgOTYuNTEyIDQwLjcwNCAxNTUuOTA0IDQwLjcwNCA2Ni42ODggMCAxMjQuNTQ0LTE2LjUxMiAxNzMuNDQtNDkuNTM2czczLjQ3Mi04MS4yOCA3My40NzItMTQ1LjE1MmMtLjEyOC0yNy41Mi03LjE2OC01My44ODgtMjEuMjQ4LTc5LjM2ek0yNzQuMTc2IDM3My4zNzZjLTE4LjQzMi0zMy4wMjQtMjcuNjQ4LTY2LjA0OC0yNy42NDgtOTkuNDU2IDAtMjUuMzQ0IDUuNjMyLTQ3LjEwNCAxNi44OTYtNjUuMTUyIDExLjI2NC0xOC4wNDggMjguOC0yNy4xMzYgNTIuNzM2LTI3LjEzNiAzMS4xMDQgMCA1NS45MzYgMTYuNTEyIDc0LjM2OCA0OS40MDggMTguNTYgMzMuMDI0IDI3LjY0OCA2Ni4xNzYgMjcuNjQ4IDk5LjQ1NiAwIDI1LjM0NC01LjYzMiA0Ny4xMDQtMTYuODk2IDY1LjE1Mi0xMS4yNjQgMTguMTc2LTI4LjggMjcuMjY0LTUyLjYwOCAyNy4yNjQtMzEuMjMyLS4xMjgtNTUuOTM2LTE2LjUxMi03NC40OTYtNDkuNTM2em0xNTcuMDU2IDQwOS4wODhjLTMxLjIzMiAxOS41ODQtNjMuODcyIDI5LjQ0LTk3LjkyIDI5LjQ0cy02NS4wMjQtOC43MDQtOTIuOTI4LTI2LjExMmMtMjcuOTA0LTE3LjQwOC00MS44NTYtNDIuMTEyLTQxLjg1Ni03My45ODQgMC0zNC44MTYgMTQuODQ4LTYwLjkyOCA0NC41NDQtNzguMjA4IDI5LjY5Ni0xNy40MDggNjIuOTc2LTI2LjExMiA5OS45NjgtMjYuMTEyIDMzLjQwOCAwIDY0LjEyOCA4LjU3NiA5Mi40MTYgMjUuNDcyIDI4LjE2IDE3LjAyNCA0Mi4zNjggNDEuMjE2IDQyLjM2OCA3Mi4zMi4xMjggMzItMTUuMzYgNTcuNzI4LTQ2LjU5MiA3Ny4xODR6TTc5OC43MiAzMjIuODE2aDEzMS40NTZ2LTY1LjI4SDc5OC43MlYxMjQuOTI4aC02NS4yOHYxMzIuNjA4SDYwMC44MzJ2NjUuMjhINzMzLjQ0djEzMS40NTZoNjUuMjh6IiBmaWxsPSIjZmZmIi8+PC9zdmc+"); } .header_main .head-share a:hover { opacity: 0.9; }