锘縤mg { max-width: 100%; } .international-1 .block_txt h3 { color: #00a0e8; } .international-1 .block_txt h4 { font-size: 36px; color: #FFFFFF; margin-bottom: 12px; letter-spacing: 5px; } .international-1 .block_txt p { background: #00A0E8; } .international-2 .comm_tit i { background: #00A0E8; } .international-2 .text { font-size: 24px; text-align: center; margin-top: 40px; height: 30px; } .international-3 { padding: 100px 0 145px 0; background: #f7f7f7; } .international-3 i { background: #00A0E8; } .international-3 .container { background: url("/static/home/images/img-H/s3-bj_03.png")center no-repeat; background-size: cover; } .international-3 .conn3-left { width: 30%; padding: 140px 0; float: left; } .international-3 .conn3-left p { font-size: 16px; line-height: 32px; } .international-3 .conn3-left p:nth-of-type(1) { margin-bottom: 50px; } .international-3 .conn3-left span { font-size: 30px; color: #00A0E8; } .conn3-right { width: 62%; height: auto; float: right; position: relative; } .conn3-right img { max-width: 100%; } .conn3-right .item {} .conn3-right .item:nth-of-type(1) { width: 71%; position: absolute; top: 0; right: 0; z-index: 0; } .conn3-right .item img { width: 100%; transition: .5s; } .conn3-right .item:hover img { transform: scale(1.1); } .conn3-right .item .item-img { overflow: hidden; border-radius: 25px; } .conn3-right .item:nth-of-type(1):before { content: " "; position: absolute; left: -20px; top: 20px; width: 100%; height: 100%; border: solid 1px #f6dc7a; z-index: -1; border-radius: 25px; transition: .5s; } .conn3-right .item:nth-of-type(2) { width: 63%; position: absolute; top: 115px; right: 34%; z-index: 0; } .conn3-right .item:nth-of-type(2):before { content: " "; position: absolute; left: -15px; top: 15px; width: 100%; height: 100%; z-index: -1; background: #00A0E8; border-radius: 25px; transition: .5s; } .conn3-right .item:nth-of-type(3) { width: 54%; position: absolute; top: 300px; right: 6%; } .international-2 { padding: 92px 0; } .international-2 .pic_slick { margin-top: 3%; position: relative; } .international-2 .pic_slick .items { margin: 0 auto; } .international-2 .pic_slick .item { padding-top: 1%; z-index: 1; position: relative; } .international-2 .pic_slick .item.slick-center { z-index: 2; } .international-2 span { display: block; width: 40%; position: absolute; left: 0; right: 0; margin: auto; } .international-2 .pic_slick .block { position: relative; -webkit-transition: all 500ms ease; transition: all 500ms ease; -webkit-transform-origin: center bottom; transform-origin: center bottom; } .international-2 .pic_slick .slick-center .block { transform: scale(1.2); transform: scale(1.2); /*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); border-radius: 70px/70px;*/ } .international-2 .pic_slick img { width: 100%; display: block; } .international-2 .pic_slick p { position: absolute; left: 30px; bottom: 30px; right: 30px; background: rgba(255, 188, 1, .9); text-align: center; line-height: 2; font-size: 20px; color: #fff; /*opacity: 0; visibility: hidden;*/ -webkit-transition: all 500ms ease; transition: all 500ms ease; -webkit-transition-delay: 0s; transition-delay: 0s; } /*.international-2 .pic_slick .slick-center p{opacity: 1; visibility: visible; bottom: 30px; -webkit-transition-delay: 500ms; transition-delay: 500ms;}*/ .international-2 .pic_slick .block:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, .5); z-index: 2; opacity: 1; visibility: visible; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .international-2 .pic_slick .slick-center .block:after { opacity: 0; visibility: hidden; } .international-2 .pic_slick .btn { width: 19px; height: 43px; background-repeat: no-repeat; background-position: center; position: absolute; top: 60%; margin-top: -15px; -webkit-transition: all 500ms ease; transition: all 500ms ease; cursor: pointer; } .international-2 .pic_slick .left_btn { left: 25px; background-image: url("/static/home/images/img-H/left_icon1_03.png"); } .international-2 .pic_slick .right_btn { right: 25px; background-image: url("/static/home/images/img-H/right_icon1_03.png"); } /*.international-2 .pic_slick .left_btn:hover{background-image: url("/static/home/images/c/left_icon2.png");} .international-2 .pic_slick .right_btn:hover{background-image: url("/static/home/images/c/right_icon2.png");}*/ @media only screen and (max-width: 1700px) { .international-3 { padding: 80px 0 115px 0; } .international-3 .conn3-left { width: 32%; } .international-3 .conn3-left p { line-height: 28px; } .conn3-right .item:nth-of-type(3) { top: 265px; } .international-2 { padding: 82px 0; } } @media only screen and (max-width: 1600px) { .international-3 { padding: 60px 0 90px 0; } .comm_pad { padding: 3% 0; } .comm_tit p { font-size: 16px; } .international-2 .text { font-size: 22px; } .international-3 .conn3-left { padding: 120px 0; } .international-3 .conn3-left p:nth-of-type(1) { margin-bottom: 40px; } .international-3 .conn3-left span { font-size: 28px; } .international-1 { margin-top: 145px; } .international-2 { padding: 72px 0; } } @media only screen and (max-width:1500px) { .international-3 .conn3-left { padding: 100px 0; } .international-3 .conn3-left p { font-size: 14px; } .international-1 { margin-top: 144px; } .international-2 { padding: 62px 0; } } @media only screen and (max-width: 1440px) { .international-1 .block_txt h4 { font-size: 32px; } .international-2 .text { margin-top: 35px; } .international-3 { padding: 50px 0 145px 0; } .international-3 .conn3-left { padding: 65px 0; } .international-1 { margin-top: 129px; } .international-2 { padding: 52px 0; } } @media only screen and (max-width: 1366px) { .international-1 .block_txt h4 { font-size: 28px; } .international-2 .pic_slick { margin-top: 2%; } .international-2 .text { margin-top: 30px; } .international-3 { padding: 40px 0 140px 0; } .international-3 .conn3-left { padding: 60px 0; } .international-3 .conn3-left p { line-height: 26px; } .comm_tit p { line-height: 26px; } .international-2 .text { font-size: 20px; } .international-3 .conn3-left span { font-size: 24px; } .international-2 { padding: 42px 0; } } @media only screen and (max-width: 1200px) { .international-3 { padding: 30px 0 100px 0; } .international-3 .conn3-left { padding: 50px 0; } .international-3 .conn3-left span { font-size: 22px; } .international-2 { padding: 32px 0; } } @media only screen and (max-width:992px) { .international-2 { padding: 20px 0; } .comm_tit i { margin: 20px auto; } .comm_tit p { line-height: 24px; font-size: 14px; } .international-2 .text { font-size: 18px; margin-top: 20px; } .international-3 { padding: 20px 0; padding-bottom: 0; } .international-3 .conn3-left { width: 100%; } .international-3 .conn3-left { padding: 0; padding-bottom: 20px; } .conn3-right { width: 100%; } .conn3-right .item:nth-of-type(1), .conn3-right .item:nth-of-type(2), .conn3-right .item:nth-of-type(3) { width: 100%; position: static; margin-bottom: 20px; } .conn3-right .item:nth-of-type(1):before, .conn3-right .item:nth-of-type(2):before { display: none; } .conn3-right img { width: 100%; } .international-3 .conn3-left p:nth-of-type(1) { margin-bottom: 20px; } .international-1 { margin-top: 60px; } .international-1 .block_txt h4 { font-size: 18px; } .international-3 .conn3-left p{ line-height: 24px; } .international-2 .pic_slick .slick-center .block{ transform: scale(1); } .btns{ display: none; } .slick-dots li{ border: 2px solid #FFFFFF; border-radius: 50%; width: 10px; height: 10px; margin-top: 3px; } .slick-dots{ background: #15a5dc; width: 40%; line-height: 10px; border-radius: 20px; left: 0; right: 0; bottom: 5px; margin:auto; } .slick-dots li button:hover:before, .slick-dots li button:before{ content: " "; } .slick-dots li.slick-active{ background: #FFFFFF; } .conn3-right .item .item-img{ position: relative; overflow: inherit; z-index: 0; } .conn3-right .item:nth-of-type(1) .item-img:before{ content: " "; border: #f5c921 2px solid ; width: 100%; height: 100%; position: absolute; left: -8px; border-radius: 10px; top: 5px; z-index: -1; } .conn3-right .item:nth-of-type(2) .item-img:before{ content: " "; border: #00a0e8 2px solid ; background: #00a0e8; width: 100%; height: 100%; position: absolute; right: -8px; border-radius: 10px; top: 5px; z-index: -1; } } @media only screen and (max-width: 400px) { .slick-dots{ width: 42%; } }