.block-one { font-size: 14px; } .block-one dt { font-size: 18px; padding-bottom: 30px; } .block-one a { color: #333; } .block-one .cols { padding-bottom: 80px; } .block-one .more { display: block; color: #c00; font-weight: normal; position: absolute; right: 0; top: 0; } .block-two { font-size: 16px; color: white; background-image: url(/uploads/image/tdi/block_2.jpg); background-repeat: no-repeat; background-position: center; height: 615px; padding-top: 110px; } .block-two dt { padding: 80px 0 90px 0; font-size: 20px; } .block-two ul, .block-two li { padding: 0; list-style: none; } .block-two li { width: 45%; padding: 10px 0 10px 15px; background-image: url(/uploads/image/tdishare/list_disc.png); background-repeat: no-repeat; background-position: center left; color: white; } .block-two li a { color: white; } .block-two a, .block-two a:hover, .block-two a:focus { color: white; } .block-two a:hover { font-weight: bold; } .block-three { background-image: url(/uploads/image/tdi/block_3.jpg); background-position: center 60px; background-repeat: no-repeat; } .block-three a.link { display: block; height: 150px; } .block-three li { list-style: none; float: left; font-size: 14px; margin-bottom: 80px; } .block-three a { color: #333; } .block-three dt { font-size: 16px; position: relative; } .block-three dt div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: normal; } .block-three dt p { font-size: 14px; color: #999; font-weight: normal; margin-bottom: 8px; } .block-three img { width: 170px; height: 125px; float: left; margin-right: 15px; } .block-three strong { display: block; font-size: 36px; background: no-repeat center center; background-size: contain; /* background-color: #333; */ color: white; width: 40px; line-height: 40px; height: 40px; text-align: center; float: left; border: 1px solid #005ba7; margin-right: 10px; } .block-three li:nth-of-type(2) strong { background-image: ; } .block-three li:nth-of-type(3) strong { background-image: ; } .block-three li:nth-of-type(4) strong { background-image: ; } .block-three dd span { color: #1150a3; font-weight: bold; } .block-four { background-image: url(/uploads/image/tdi/block_4.jpg); background-position: center; background-repeat: no-repeat; padding-top: 100px; overflow: hidden; font-size: 14px; } .block-four .main { background-color: #fff; box-shadow: 0 0 10px #999; min-height: 100px; position: relative; max-height: 560px; padding: 100px 0 100px 80px; } .block-four dt { font-size: 36px; text-align: left; font-weight: normal; padding-bottom: 60px; position: relative; } .block-four .more { display: block; color: #c00; font-weight: normal; position: absolute; right: 20px; top: 0; font-size: 18px; } .block-four dt a { display: block; width: 100%; } .block-four .icon { display: block; position: absolute; top: 0; left: -80px; background-color: #c00; } .plate-icon { border-right: 1px solid #ddd; padding-left: 15px; padding-right: 15px; } .plate-icon:first-of-type { padding-right: 30px; } .plate-icon:last-of-type { border-right: none; } .slide-img-wrap li:nth-of-type(odd) { padding-left: 0; } .slide-img-wrap li:nth-of-type(even) { padding-right: 0; } .block-five { background-color: #eee; font-size: 12px; padding: 50px 0; } .block-five dt { font-size: 14px; position: relative; margin-bottom: 20px; } .block-five dt i { position: absolute; background-color: #1150a3; width: 10px; height: 10px; top: 5px; left: -15px; } .block-five dd { padding: 39px 20px; box-shadow: 0 0 10px #ddd; } .slide-nav { position: absolute; right: 0; top: -36px; } .block-six { padding: 50px 0; background-color: #eee; font-size: 16px; } .work-slide { width: 430px; height: 300px; position: relative; overflow: hidden; } .work-slide .pic img { width: 430px; height: 300px; display: block; } .work-slide .txt-bg { position: absolute; bottom: 0; z-index: 1; height: 38px; width: 100%; background: #333; filter: alpha(opacity=80); opacity: 0.8; overflow: hidden; } .work-slide .txt { position: absolute; bottom: 0; z-index: 2; height: 38px; width: 100%; overflow: hidden; } .work-slide .txt li { height: 38px; line-height: 38px; position: absolute; bottom: -38px; } .work-slide .txt li a { display: block; color: white; padding: 0 0 0 10px; font-weight: bold; text-decoration: none; } .work-slide .num { position: absolute; z-index: 3; bottom: 5px; right: 5px; } .work-slide .num li { float: left; position: relative; width: 28px; height: 28px; line-height: 28px; overflow: hidden; text-align: center; margin-right: 1px; cursor: pointer; } .work-slide .num li a, .work-slide .num li span { position: absolute; z-index: 2; display: block; color: white; width: 100%; height: 100%; top: 0; left: 0; text-decoration: none; } .work-slide .num li span { z-index: 1; background: black; filter: alpha(opacity=50); opacity: 0.5; } .work-slide .num li.on a, .work-slide .num a:hover { background: #c00; } .col-news { width: 640px; } .block-six dt { height: 50px; background-image: url(/uploads/image/tdishare/dj_dt_icon.png); background-repeat: no-repeat; background-position: 10px center; background-color: #c00; font-weight: normal; overflow: hidden; } .block-six dt a { display: block; width: 100%; color: white; line-height: 52px; padding-left: 50px; } .block-six .more { display: block; color: white; float: right; font-size: 18px; } .block-seven { padding-top: 50px; font-size: 12px; } .feedback { } .feedback dt { font-size: 24px; margin-bottom: 10px; } .feedback input, .feedback textarea { border: 1px solid #d5d5d5; display: block; width: 100%; padding: 10px; } .feedback input input { margin-top: 20px; } .feedback input textarea { margin-top: 20px; } .feedback textarea button { margin-top: 20px; } .feedback textarea { min-height: 100px; } .feedback button { margin-right: 10px; } .feedback span { color: #999; } #footer { margin-top: 100px; } @media (max-width: 1100px) { .block-one .col-quarter { display: initial; } .block-one .more { display: none; } .block-four .more { display: none; } .block-four .icon { display: none; } .block-four { padding-top: 5vw; } .block-six .work-slide { width: 40%; } .block-six .col-news { width: 55%; } #adv { height: 10.5vw; } } @media (max-width: 768px) { #footer { margin-top: 2em; } .block-one dt { padding-bottom: 20px; } .block-one .cols { padding: 20px 0; } .block-two { height: 500px; background-position: bottom center; padding-top: 0; } .block-two .col-quarters { width: 100%; } .block-two dt { padding-top: 80px; padding-bottom: 50px; } .block-two li { margin: 0; width: 100%; padding-top: 0; } .block-three { background-position: center 20px; } .block-three a.link { height: 80px; } .block-three li { margin-bottom: 20px; } .block-four .main { padding-top: 20px; padding-bottom: 20px; padding-left: 0; overflow: hidden; height: auto; } .block-four dt { padding-left: 50px; padding-bottom: 30px; font-size: 20px; } .plate-icon:nth-of-type(3n) { border-right: none; } .block-five { padding: 20px 0; } .block-five .col-thirds { margin-bottom: 20px; } .slide-nav { position: absolute; right: 0; top: -35px; } .block-six { padding: 20px 0; } .block-six .work-slide { display: none; } .block-six .work-slide, .block-six .col-news { width: 100%; } .block-seven { padding-top: 20px; } .block-seven .col-third { display: none; } .block-seven dt { font-size: 20px; } } @media (max-width: 420px) { .block-one { font-size: 14px; } .block-one img { margin-top: 20px; } .block-one .cols { padding: 20px 0; } .block-one dt { font-size: 16px; } .block-one-main dt { padding-bottom: 20px; } .block-two { font-size: 14px; height: 330px; } .block-two dt { font-size: 16px; padding-top: 20px; padding-bottom: 20px; } .block-two li { padding-top: 5px; padding-bottom: 5px; } .block-two .col-quarters { width: 100%; } .block-three img { width: 100px; height: auto; } .block-three dt p { margin-bottom: 10px; } .block-four { } .block-four dt { padding-bottom: 20px; padding-left: 20px; font-size: 16px; font-weight: bold; } .block-six { font-size: 14px; } .block-seven dt { font-size: 14px; } .block-four .plate-icon { height: 110px; } .feedback button { width: 100%; } .feedback span { display: none; } }