main{ padding-top:0; } /*-------------------------------------------------------------- # 澶撮儴 --------------------------------------------------------------*/ #header { padding: 30px 0; height: 92px; position: fixed; left: 0; top: 0; right: 0; transition: all 0.5s; z-index: 997; background: transparent; } #header.header-scrolled { background: rgba(0, 0, 0, 0.9); padding: 20px 0; height: 72px; transition: all 0.5s; } #header #logo { padding-top:0; } #nav-menu-container { line-height: 31px; } /*-------------------------------------------------------------- # 婊氬睆 --------------------------------------------------------------*/ #intro { display: table; width: 100%; height: 100vh; background: #000; } #intro .carousel-item { width: 100%; height: 100vh; background-size: cover; background-position: center; background-repeat: no-repeat; } #intro .carousel-item::before { content: ''; background-color: rgba(0, 0, 0, 0.7); position: absolute; height: 100%; width: 100%; top: 0; right: 0; left: 0; bottom: 0; } #intro .carousel-container { display: flex; justify-content: center; align-items: center; position: absolute; bottom: 0; top: 0; left: 0; right: 0; } #intro .carousel-content { text-align: center; } #intro h2 { color: #fff; margin-bottom: 30px; font-size: 32px; font-weight: 700; letter-spacing: 2px; line-height:70px; padding:0 30px; } @media (max-width: 768px) { #intro h2 { font-size: 22px; line-height:40px; } } #intro p { width: 80%; margin: 0 auto 30px auto; color: #fff; } @media (min-width: 1024px) { #intro p { width: 60%; } } #intro .carousel-fade .carousel-inner .carousel-item { -webkit-transition-property: opacity; transition-property: opacity; } #intro .carousel-fade .carousel-inner .carousel-item, #intro .carousel-fade .carousel-inner .active.carousel-item-left, #intro .carousel-fade .carousel-inner .active.carousel-item-right { opacity: 0; } #intro .carousel-fade .carousel-inner .active, #intro .carousel-fade .carousel-inner .carousel-item-next.carousel-item-left, #intro .carousel-fade .carousel-inner .carousel-item-prev.carousel-item-right { opacity: 1; transition: 0.5s; } #intro .carousel-fade .carousel-inner .carousel-item-next, #intro .carousel-fade .carousel-inner .carousel-item-prev, #intro .carousel-fade .carousel-inner .active.carousel-item-left, #intro .carousel-fade .carousel-inner .active.carousel-item-right { left: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } #intro .carousel-control-prev, #intro .carousel-control-next { width: 10%; } @media (min-width: 1024px) { #intro .carousel-control-prev, #intro .carousel-control-next { width: 5%; } } #intro .carousel-control-next-icon, #intro .carousel-control-prev-icon { background: none; font-size: 32px; line-height: 1; } #intro .carousel-indicators li { cursor: pointer; } #intro .btn-get-started { font-family: "Montserrat", sans-serif; font-weight: 500; font-size: 16px; letter-spacing: 1px; display: inline-block; padding: 8px 32px; border-radius: 50px; transition: 0.5s; margin: 10px; color: #fff; border:1px solid #fff; } #intro .btn-get-started:hover { color: #6699CC; border:1px solid #6699CC; } /* 椤堕儴 --------------------------------*/ .section-header h3 { font-size: 32px; color: #111; text-transform: uppercase; text-align: center; font-weight: 700; position: relative; padding-bottom: 15px; } .section-header h3::before { content: ''; position: absolute; display: block; width: 120px; height: 1px; background: #ddd; bottom: 1px; left: calc(50% - 60px); } .section-header h3::after { content: ''; position: absolute; display: block; width: 40px; height: 3px; background: #6699CC; bottom: 0; left: calc(50% - 20px); } .section-header p { text-align: center; padding-bottom: 30px; color: #333; } /* 甯︽湁鑳屾櫙 --------------------------------*/ .section-bg { background: #f7f7f7; } /* 浜у搧涓庢湇鍔 --------------------------------*/ #chanpyfw { background: #000; background-size: cover; padding: 60px 0; } #chanpyfw h3 { color: #fff; font-size: 28px; font-weight: 700; } #chanpyfw .box { padding: 30px 20px; background:rgba(0,0,0,0.1); border:1px solid rgba(255,255,255,0.2); } #chanpyfw .box-bg { background:rgba(255,255,255,0.1); } #chanpyfw i { color: #fff; font-size: 24px; display: inline-block; line-height: 48px; padding-right:15px; } #chanpyfw h4 { font-weight: 400; margin: 0 0 0 15px; font-size: 18px; line-height: 48px; } #chanpyfw h4 span { color: #fff; } #chanpyfw h4 a:hover { color: #6699CC; } #chanpyfw .chanpyfwContent{ width:100%; height:160px; } #chanpyfw .chanpyfwContent .carousel{ height:100%; } #chanpyfw .chanpyfwContent .carousel .carousel-indicators{ bottom:0; } #chanpyfw .chanpyfwContent .carousel .carousel-control-next, #chanpyfw .chanpyfwContent .carousel .carousel-control-prev{ width:10px; } #chanpyfw .chanpyfwContent .carousel .carousel-control-next{ right:-10px; } #chanpyfw .chanpyfwContent .carousel .carousel-control-prev{ left:-10px; } #chanpyfw .chanpyfwContent .carousel .carousel-inner{ padding:0 15px; } #chanpyfw .chanpyfwContent .carousel .carousel-inner .carousel-content a{ color: #fff; display:inline-block; margin-top:5px; margin-right: 1%; margin-left: 2%; width:45%; padding:0 3px; text-align:center; border:1px solid #fff; height:25px; line-height:21px; overflow:hidden; } #chanpyfw .chanpyfwContent .carousel .carousel-inner .carousel-content a:hover { background-color:#3366CC; border:1px solid #3366CC; } #chanpyfw p { font-size: 14px; line-height: 24px; color: #fff; margin-bottom: 0; } #footer{ margin-top:0; }