Cyclohexane (Talk | contribs) |
Cyclohexane (Talk | contribs) |
||
Line 1: | Line 1: | ||
.main { | .main { | ||
position: relative; | position: relative; | ||
− | background: -webkit-gradient(linear,0% 0%, 0% 100%, from(#6181B4), to(#9BC9F1)); | + | background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6181B4), to(#9BC9F1)); |
+ | filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#6181B4', endColorStr='#9BC9F1', gradientType='0'); | ||
+ | background: -moz-linear-gradient(top, #6181B4, #9BC9F1); | ||
+ | background: -o-linear-gradient(top, #6181B4, #9BC9F1); | ||
+ | background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6181B4), to(#9BC9F1)); | ||
+ | background: -webkit-linear-gradient(top, #6181B4, #9BC9F1); | ||
+ | background: -ms-linear-gradient(top, #6181B4, #9BC9F1); | ||
+ | background: linear-gradient(top, #6181B4, #9BC9F1); | ||
top: 5rem; | top: 5rem; | ||
bottom: 0; | bottom: 0; | ||
+ | z-index: 0; | ||
} | } | ||
+ | |||
.bg_white { | .bg_white { | ||
height: 12vw; | height: 12vw; | ||
Line 13: | Line 22: | ||
z-index: 0; | z-index: 0; | ||
} | } | ||
− | .bg_bottom{ | + | |
+ | .bg_bottom { | ||
width: 100vw; | width: 100vw; | ||
margin-bottom: 8vw; | margin-bottom: 8vw; | ||
} | } | ||
+ | |||
.main .main_top { | .main .main_top { | ||
position: relative; | position: relative; | ||
Line 23: | Line 34: | ||
font-family: sans-serif; | font-family: sans-serif; | ||
} | } | ||
+ | |||
.main .main_top p { | .main .main_top p { | ||
font-size: 1.5vw!important; | font-size: 1.5vw!important; | ||
Line 31: | Line 43: | ||
color: #2500b3; | color: #2500b3; | ||
} | } | ||
+ | |||
.main .main_top div { | .main .main_top div { | ||
text-align: left; | text-align: left; | ||
Line 38: | Line 51: | ||
padding-bottom: 1.5vw; | padding-bottom: 1.5vw; | ||
} | } | ||
+ | |||
@media screen and (max-width: 45rem) { | @media screen and (max-width: 45rem) { | ||
.bg_white { | .bg_white { | ||
Line 43: | Line 57: | ||
border-bottom: 10vw solid transparent; | border-bottom: 10vw solid transparent; | ||
} | } | ||
− | .bg_bottom{ | + | .bg_bottom { |
width: 100vw; | width: 100vw; | ||
margin-bottom: 15vw; | margin-bottom: 15vw; | ||
} | } | ||
− | .main .main_top p{ | + | .main .main_top p { |
font-size: 0.9rem!important; | font-size: 0.9rem!important; | ||
} | } | ||
} | } | ||
+ | |||
@media screen and (min-width: 45.0625rem) and (max-width: 768px) { | @media screen and (min-width: 45.0625rem) and (max-width: 768px) { | ||
− | + | .main .main_top p { | |
font-size: 1rem!important; | font-size: 1rem!important; | ||
} | } | ||
− | |||
} | } | ||
+ | |||
.main .main_middle { | .main .main_middle { | ||
position: relative; | position: relative; | ||
Line 65: | Line 80: | ||
padding-top: 3vw; | padding-top: 3vw; | ||
} | } | ||
+ | |||
.main .main_middle>div>div { | .main .main_middle>div>div { | ||
font-size: 2.6rem; | font-size: 2.6rem; | ||
Line 73: | Line 89: | ||
font-weight: unset; | font-weight: unset; | ||
} | } | ||
− | .main .main_middle p{ | + | |
+ | .main .main_middle p { | ||
text-align: left!important; | text-align: left!important; | ||
text-indent: 2rem; | text-indent: 2rem; | ||
Line 81: | Line 98: | ||
font-weight: lighter; | font-weight: lighter; | ||
} | } | ||
+ | |||
@media screen and (max-width: 45rem) { | @media screen and (max-width: 45rem) { | ||
− | .main .main_middle>div>div{ | + | .main .main_middle>div>div { |
font-size: 1.5rem; | font-size: 1.5rem; | ||
} | } | ||
− | .main .main_middle p{ | + | .main .main_middle p { |
font-size: 0.8rem!important; | font-size: 0.8rem!important; | ||
line-height: 1.3rem; | line-height: 1.3rem; | ||
} | } | ||
} | } | ||
− | @media screen and | + | |
− | .main .main_middle>div>div{ | + | @media screen and (max-width: 768px) and (min-width: 45rem) { |
+ | .main .main_middle>div>div { | ||
font-size: 1.5rem; | font-size: 1.5rem; | ||
} | } | ||
− | .main .main_middle p{ | + | .main .main_middle p { |
font-size: 1rem!important; | font-size: 1rem!important; | ||
line-height: 1.3rem; | line-height: 1.3rem; | ||
} | } | ||
} | } | ||
− | @media screen and (max-width: 90rem) and | + | |
− | .main .main_middle>div>div{ | + | @media screen and (max-width: 90rem) and (min-width: 768px) { |
+ | .main .main_middle>div>div { | ||
font-size: 2.3rem; | font-size: 2.3rem; | ||
} | } | ||
− | .main .main_middle p{ | + | .main .main_middle p { |
font-size: 1.3rem!important; | font-size: 1.3rem!important; | ||
line-height: 1.6rem; | line-height: 1.6rem; | ||
} | } | ||
} | } | ||
− | .footer{ | + | |
+ | .footer { | ||
position: relative; | position: relative; | ||
} | } | ||
+ | |||
.footer .footer_line { | .footer .footer_line { | ||
position: relative; | position: relative; | ||
Line 120: | Line 142: | ||
margin-top: 2vw; | margin-top: 2vw; | ||
} | } | ||
+ | |||
.footer .footer_bottom .footer_bottom_1 { | .footer .footer_bottom .footer_bottom_1 { | ||
padding-top: 2vw; | padding-top: 2vw; | ||
Line 125: | Line 148: | ||
width: 100%; | width: 100%; | ||
} | } | ||
+ | |||
.footer_bottom_1_pic1 { | .footer_bottom_1_pic1 { | ||
height: 4vw; | height: 4vw; | ||
Line 131: | Line 155: | ||
left: 30vw; | left: 30vw; | ||
} | } | ||
+ | |||
.footer_bottom_1_pic2 { | .footer_bottom_1_pic2 { | ||
height: 4vw; | height: 4vw; | ||
Line 137: | Line 162: | ||
left: 33vw; | left: 33vw; | ||
} | } | ||
+ | |||
#Contact_us { | #Contact_us { | ||
font-size: 1.5vw; | font-size: 1.5vw; | ||
Line 146: | Line 172: | ||
color: #2500b3; | color: #2500b3; | ||
} | } | ||
+ | |||
.footer .footer_bottom .footer_bottom_2 { | .footer .footer_bottom .footer_bottom_2 { | ||
width: 100%; | width: 100%; | ||
height: 5vw; | height: 5vw; | ||
} | } | ||
+ | |||
.footer .footer_bottom .footer_bottom_2 ul li { | .footer .footer_bottom .footer_bottom_2 ul li { | ||
list-style: none; | list-style: none; | ||
Line 155: | Line 183: | ||
cursor: pointer; | cursor: pointer; | ||
} | } | ||
+ | |||
.footer .footer_bottom .footer_bottom_2 ul li img { | .footer .footer_bottom .footer_bottom_2 ul li img { | ||
height: 2.5vw; | height: 2.5vw; | ||
Line 162: | Line 191: | ||
left: 26vw; | left: 26vw; | ||
} | } | ||
+ | |||
.footer_position { | .footer_position { | ||
padding-left: 50vw; | padding-left: 50vw; | ||
} | } | ||
+ | |||
#logo_position { | #logo_position { | ||
height: 2.5vw; | height: 2.5vw; | ||
float: left; | float: left; | ||
} | } | ||
+ | |||
#footer_bottom_word { | #footer_bottom_word { | ||
text-align: left !important; | text-align: left !important; | ||
Line 176: | Line 208: | ||
float: left; | float: left; | ||
} | } | ||
− | @media screen and (max-width: 45rem){ | + | |
− | .footer_position,.footer_bottom_1_pic1{ | + | @media screen and (max-width: 45rem) { |
+ | .footer_position, | ||
+ | .footer_bottom_1_pic1 { | ||
display: none; | display: none; | ||
} | } | ||
− | .footer_bottom_1>img{ | + | .footer_bottom_1>img { |
height: 6vw; | height: 6vw; | ||
} | } | ||
− | .footer_bottom_1_pic2{ | + | .footer_bottom_1_pic2 { |
position: relative; | position: relative; | ||
left: 22vw; | left: 22vw; | ||
} | } | ||
− | .footer_bottom_2{ | + | .footer_bottom_2 { |
position: relative; | position: relative; | ||
left: 22vw; | left: 22vw; | ||
Line 198: | Line 232: | ||
left: 26vw; | left: 26vw; | ||
} | } | ||
− | #Contact_us{ | + | #Contact_us { |
font-size: 3vw; | font-size: 3vw; | ||
} | } | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | } | + | @media screen and (min-width: 45.0625rem) and (max-width: 89.9375rem) {} |
+ | |||
+ | @media screen and (min-width: 90rem) {} |
Revision as of 08:37, 20 September 2018
.main {
position: relative; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6181B4), to(#9BC9F1)); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#6181B4', endColorStr='#9BC9F1', gradientType='0'); background: -moz-linear-gradient(top, #6181B4, #9BC9F1); background: -o-linear-gradient(top, #6181B4, #9BC9F1); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6181B4), to(#9BC9F1)); background: -webkit-linear-gradient(top, #6181B4, #9BC9F1); background: -ms-linear-gradient(top, #6181B4, #9BC9F1); background: linear-gradient(top, #6181B4, #9BC9F1); top: 5rem; bottom: 0; z-index: 0;
}
.bg_white {
height: 12vw; width: 0px; border-right: 100vw solid white; border-bottom: 10vw solid transparent; position: absolute; z-index: 0;
}
.bg_bottom {
width: 100vw; margin-bottom: 8vw;
}
.main .main_top {
position: relative; padding-top: 1vw; padding-left: 20vw; font-family: sans-serif;
}
.main .main_top p {
font-size: 1.5vw!important; line-height: 2vw; font-weight: lighter; text-align: left!important; padding-bottom: 1.5vw; color: #2500b3;
}
.main .main_top div {
text-align: left; font-size: 4.5vw; font-weight: bolder; color: #2500b3; padding-bottom: 1.5vw;
}
@media screen and (max-width: 45rem) {
.bg_white { height: 15vw; border-bottom: 10vw solid transparent; } .bg_bottom { width: 100vw; margin-bottom: 15vw; } .main .main_top p { font-size: 0.9rem!important; }
}
@media screen and (min-width: 45.0625rem) and (max-width: 768px) {
.main .main_top p { font-size: 1rem!important; }
}
.main .main_middle {
position: relative; width: 80vw; margin: 0 10vw; z-index: 1; color: #fff; padding-top: 3vw;
}
.main .main_middle>div>div {
font-size: 2.6rem; font-weight: bold; font-family: sans-serif!important; padding-bottom: 1rem; text-align: center; font-weight: unset;
}
.main .main_middle p {
text-align: left!important; text-indent: 2rem; line-height: 2rem; font-size: 1.56rem!important; font-family: sans-serif!important; font-weight: lighter;
}
@media screen and (max-width: 45rem) {
.main .main_middle>div>div { font-size: 1.5rem; } .main .main_middle p { font-size: 0.8rem!important; line-height: 1.3rem; }
}
@media screen and (max-width: 768px) and (min-width: 45rem) {
.main .main_middle>div>div { font-size: 1.5rem; } .main .main_middle p { font-size: 1rem!important; line-height: 1.3rem; }
}
@media screen and (max-width: 90rem) and (min-width: 768px) {
.main .main_middle>div>div { font-size: 2.3rem; } .main .main_middle p { font-size: 1.3rem!important; line-height: 1.6rem; }
}
.footer {
position: relative;
}
.footer .footer_line {
position: relative; background-color: #2500b3; width: 80vw; height: 0.1rem; left: 10vw; right: 10vw; margin-top: 2vw;
}
.footer .footer_bottom .footer_bottom_1 {
padding-top: 2vw; padding-bottom: 5vw; width: 100%;
}
.footer_bottom_1_pic1 {
height: 4vw; float: left; position: relative; left: 30vw;
}
.footer_bottom_1_pic2 {
height: 4vw; float: left; position: relative; left: 33vw;
}
- Contact_us {
font-size: 1.5vw; padding: 0.25vw 0; float: left; position: relative; font-family: sans-serif !important; left: 25vw; color: #2500b3;
}
.footer .footer_bottom .footer_bottom_2 {
width: 100%; height: 5vw;
}
.footer .footer_bottom .footer_bottom_2 ul li {
list-style: none; font-family: sans-serif; cursor: pointer;
}
.footer .footer_bottom .footer_bottom_2 ul li img {
height: 2.5vw; float: left; padding: 0 1vw; position: relative; left: 26vw;
}
.footer_position {
padding-left: 50vw;
}
- logo_position {
height: 2.5vw; float: left;
}
- footer_bottom_word {
text-align: left !important; font-size: 0.8vw; line-height: 1.25vw; color: #2500b3; float: left;
}
@media screen and (max-width: 45rem) {
.footer_position, .footer_bottom_1_pic1 { display: none; } .footer_bottom_1>img { height: 6vw; } .footer_bottom_1_pic2 { position: relative; left: 22vw; } .footer_bottom_2 { position: relative; left: 22vw; top: -5vw; } .footer_bottom_2 ul li img { height: 5vw!important; padding: 0 1vw; position: relative; left: 26vw; } #Contact_us { font-size: 3vw; }
}
@media screen and (min-width: 45.0625rem) and (max-width: 89.9375rem) {}
@media screen and (min-width: 90rem) {}