.sdmkcp { background: url(../tu/w_tu.jpg)no-repeat center center; background-size: cover; } .sdmk { padding-top: 120px; padding-bottom: 218px; text-align: center; margin: auto; } .sdmk b { font-size: 28px; color: #fff; line-height: 28px; display: block; margin-bottom: 35px; } .sdmk p { font-size: 16px; color: #fff; line-height: 28px; } .abcd { width: 100%; height: auto; background: #eff0f3; padding-bottom: 50px; } .sdmkk { width: 100%; margin-top: -95px; height: auto; overflow: hidden; } .sdmkk dl { width: 25%; float: left; overflow: hidden; height: auto; } .sdmkk dd { width: 100%; height: auto; background: #fff; padding: 25px; overflow: hidden; } .sdmkk dd span { display: inline; float: left; overflow: hidden; } .sdmkk dd span i { font-size: 12px; color: #333; text-transform: uppercase; display: block; } .sdmkk dd span b { font-size: 20px; color: #333; } .sdmkk dd font { display: inline; float: right; } .sdmkk dd font img { max-width: 100%; } .sdmkk dt { clear: both; width: 100%; height: auto; overflow: hidden; position: relative; } .sdmkk dt img { width: 100%; } .tu_bf { position: absolute; top: 0; left: 0; width: 101%; height: 101%; background: -webkit-linear-gradient(left top, rgba(164,191,218,0.9), rgba(150,152,211,0.9)); background: -o-linear-gradient(bottom, rgba(164,191,218,0.9), rgba(150,152,211,0.9)); background: -moz-linear-gradient(bottom, rgba(164,191,218,0.9), rgba(150,152,211,0.9)); background: -ms-linear-gradient(bottom, rgba(164,191,218,0.9), rgba(150,152,211,0.9)); background: linear-gradient(right bottom, rgba(164,191,218,0.9), rgba(150,152,211,0.9)); padding-top: 170px; } .tu_bf2 { width: 101%; height: 101%; background: -webkit-linear-gradient(left top, rgba(139,237,169,0.9), rgba(64,189,193,0.9)); background: -o-linear-gradient(bottom, rgba(139,237,169,0.9), rgba(64,189,193,0.9)); background: -moz-linear-gradient(bottom, rgba(139,237,169,0.9), rgba(64,189,193,0.9)); background: -ms-linear-gradient(bottom, rgba(139,237,169,0.9), rgba(64,189,193,0.9)); background: linear-gradient(right bottom, rgba(139,237,169,0.9), rgba(64,189,193,0.9)); position: absolute; top: 0; left: 0; } .tu_bf h1 { font-size: 26px; color: #fff; font-weight: bold; text-align: center; margin: 0 auto; } .tu_bf3 { width: 101%; height: 101%; background: -webkit-linear-gradient(left top, rgba(216,173,117,0.9), rgba(205,126,52,0.9)); background: -o-linear-gradient(bottom, rgba(216,173,117,0.9), rgba(205,126,52,0.9)); background: -moz-linear-gradient(bottom, rgba(216,173,117,0.9), rgba(205,126,52,0.9)); background: -ms-linear-gradient(bottom, rgba(216,173,117,0.9), rgba(205,126,52,0.9)); background: linear-gradient(right bottom, rgba(216,173,117,0.9), rgba(205,126,52,0.9)); position: absolute; top: 0; left: 0; } .tu_bf b { display: block; width: 42px; height: 4px; background: #fff; text-align: center; margin: 0 auto; margin-top: 194px; } .tu_bf4 { width: 101%; height: 101%; position: absolute; top: 0; left: 0; background: -webkit-linear-gradient(left top, rgba(151,205,246,0.9), rgba(74,158,205,0.9)); background: -o-linear-gradient(bottom, rgba(151,205,246,0.9), rgba(74,158,205,0.9)); background: -moz-linear-gradient(bottom, rgba(151,205,246,0.9), rgba(74,158,205,0.9)); background: -ms-linear-gradient(bottom, rgba(151,205,246,0.9), rgba(74,158,205,0.9)); background: linear-gradient(right bottom, rgba(151,205,246,0.9), rgba(74,158,205,0.9)); } .tu_bf b { display: block; width: 42px; height: 4px; background: #fff; text-align: center; margin: 0 auto; margin-top: 134px; } .tu_bb { position: absolute; top: 0; left;0;width: 100%; height: 100%; background: rgba(0,0,0,0.7); padding: 20px 20px 0 20px; } .tu_bb h1 { font-size: 16px; color: #fff; text-transform: uppercase; line-height: 24px; padding-bottom: 10px; } .tu_bb p { color: #fff; font-size: 12px; line-height: 22px; } .tu_bb ul { padding: 0px 30px; } .tu_bb li { line-height: 22px; } .tu_bb li a { color: #fff; font-size: 12px; } .tu_bb li a:hover { color: #60b2de; } .tu_bb { display: none; } .sdmkk dt:hover .tu_bf { display: none; } .sdmkk dt:hover .tu_bb { display: block; text-align: center; padding: 0px; } .sdmkk dl:hover dd { background: #f1f1f1; } @media(max-width: 1024px) { .abcd { padding-bottom: 30px; } .box2 { padding-top: 30px; } .sdmkk dl { width: 50% } .sdmk { padding-top: 60px; padding-bottom: 120px; } .tu_bf { padding-top: 230px; } .sdmk b { margin-bottom: 20px; } .tu_bb { padding: 40px 40px 0 40px; } .tu_bb ul { padding: 20px 30px 0 0px; } .tu_bb p { line-height: 24px; } .tu_bb h1 { padding-bottom: 0px; font-size: 18px; line-height: 28px; } .tu_bb p { color: #fff; font-size: 14px; line-height: 26px; } .tu_bb li { color: #fff; font-size: 14px; line-height: 26px; } } @media(max-width: 1200px) and (min-width:769px){ .sdmkk dd { padding: 8px;} } @media(max-width: 768px) { .sdmkk{ margin-top:0px; } .sdmkk dl { width: 100%; } } @media(max-width: 414px) { .box2 { padding-top:0px; } .sdmk b { font-size: 20px; } .sdmk p { font-size: 13px; } .sdmk { padding-top: 15px; padding-bottom: 140px; } } @media(max-width: 375px) { .tu_bb { padding:10px } .tu_bb p { line-height: 24px; } } @media(max-width: 320px) { .tu_bf { padding-top:90px; } .tu_bb { padding: 5px } .tu_bb p { line-height: 20px; } .tu_bb ul { padding: 5px } .tu_bb li { line-height: 22px; } .tu_bb h1 { padding-bottom: 5px; } }.tu_bb a { display: block!important; width: 100%!important; height: 100%; padding: 50% 0px; }