.section{ font-size: 16px; } .section h3{ font-size: 2.75em; color: #333; } .tab-controls{ text-align: center; padding: 7.8125% 0 4.323%;/*150 0 83*/ font-size: 1.5em; color: #333; } .tab-controls a{ font-size: inherit; color: inherit; vertical-align: middle; } .tab-controls .line{ width: 1px; height: 0.5em; display: inline-block; vertical-align: middle; background-color: #e5e5e5; margin: 0 1.125em; } .sec1{ padding: 4.323% 0 3.75%;/*83 0 72*/ } .sec1 h3{ margin-bottom: 4.2%;/*60*/ } .sec1 ul{ -webkit-display: flex; -webkit-align-items: stretch; -webkit-justify-content: space-between; -webkit-flex-direction: row; -webkit-flex-wrap: wrap; display: flex; align-items: stretch; justify-content: space-between; flex-direction: row; flex-wrap: wrap; } .sec1 li{ width: 48.26%; color: #fff; background-color: #0c67ba; border-radius: 0.25em; padding: 2.78% 4.2% 4.2%;/*40 60 60*/ position: relative; } .sec1 .bgicon{ opacity: 0.1; position: absolute; bottom: 0; } .sec1 .bgicon.icon1{ right: 4.6%; width: 16.115%; } .sec1 .bgicon.icon2{ right: 3.3%; width: 19.42%; } .sec1 h4{ font-size: 1.625em; color: inherit; font-weight: 500; } .sec1 .line{ width: 100%; height: 1px; background-color: #fff; opacity: 0.2; margin: 1.75em 0 2.25em; } .sec1 h5{ font-size: 1.5em; color: inherit; font-weight: 500; } .sec1 li:nth-child(1) h5{ margin-bottom: 1.375em; } .sec1 li:nth-child(2) h5{ -webkit-flex-shrink: 0; flex-shrink: 0; } .sec1 p{ font-size: 1.25em; color: inherit; padding-left: 2.1em; margin-bottom: 1.4em; } .sec1 li:nth-child(2) p{ margin-left: 4.2em; } .sec1 p:last-child{ margin-bottom: 0; } .sec1 p .icon{ width: 1.1em; margin-left: -2.1em; margin-right: 1em; vertical-align: middle; } .sec1 p a{ font-size: inherit; color: inherit; } .sec1 .flex-box{ -webkit-display: flex; -webkit-align-items: center; -webkit-justify-content: flex-start; -webkit-flex-direction: row; display: flex; align-items: center; justify-content: flex-start; flex-direction: row; margin-bottom: 3.375em; } .sec1 .flex-box:last-child{ margin-bottom: 0; } .sec2{ padding: 3.75% 0 9.95%;/*72 0 191*/ } .sec2 h3{ margin-bottom: 5.625%;/*81*/ } .sec2 ul{ -webkit-display: flex; -webkit-align-items: flex-end; -webkit-justify-content: flex-start; -webkit-flex-direction: row; -webkit-flex-wrap: wrap; display: flex; align-items: flex-end; justify-content: flex-start; flex-direction: row; flex-wrap: wrap; } .sec2 li{ font-size: 1.125em; position: relative; margin-right: 9%; width: 45.5%; border-bottom: 1px solid #999; margin-bottom: 4%;/*57*/ } .sec2 li.noline{ border-bottom: 0 none; -webkit-display: flex; -webkit-align-items: flex-start; -webkit-justify-content: flex-start; -webkit-flex-direction: row; display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: row; line-height: 1.5; -webkit-align-self: flex-start; align-self: flex-start; } .sec2 li:nth-child(even){ margin-right: 0; } .sec2 li.noline p{ font-size: inherit; color: #333; padding-left: 2.28em; -webkit-flex-grow: 1; flex-grow: 1; margin-right: 5%; } .sec2 li.nolimit{ width: auto; -webkit-flex-grow: 1; flex-grow: 1; margin-right: 6.6%; } .sec2 li.btn{ width: auto; border-bottom: 0 none; -webkit-flex-shrink: 0; flex-shrink: 0; } .sec2 li .radio-box{ margin-right: 3em; -webkit-flex-shrink: 0; flex-shrink: 0; } .sec2 li .radio-box:last-child{ margin-right: 0; } .sec2 li .radio-box label{ vertical-align: middle; padding-left: 1em; } .sec2 li img{ width: auto; height: 1.38em; position: absolute; left: 0; top: 50%; margin-top: -0.69em; } .sec2 li.noline img{ margin-top: 0; top: 0.06em; } .sec2 li input[type=text],.sec2 li input[type=date]{ font-size: inherit; color: #666; height: 3.12em; line-height: 3.12; width: 100%; padding-left: 2.28em; } .sec2 li select{ font-size: inherit; color: #999; height: 3.12em; line-height: 3.12; width: 100%; padding-left: 2.28em; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; background-color: transparent; background-repeat: no-repeat; background-image: url(../images/contact_sec1_tri.png); background-size: auto 9%; background-position: right center; } .sec2 li select.changed{ color: #666; } .sec2 .submit{ display: block; width: 7.78em; height: 2.78em; line-height: 2.78; background-color: #0c67ba; font-size: inherit; color: #fff; text-align: center; } .sec3{ padding: 8.333% 0 7.76%;/*160 0 149*/ background-color: #f4f4f4; } .sec3 h3{ margin-bottom: 5.278%;/*76*/ } .sec3 .flex-box{ -webkit-display: flex; -webkit-align-items: stretch; -webkit-justify-content: flex-start; -webkit-flex-wrap: wrap; -webkit-flex-direction: row; display: flex; align-items: stretch; justify-content: flex-start; flex-wrap: wrap; flex-direction: row; margin-bottom: 2.64%;/* 38 */ } .sec3 .flex-box a{ display: block; font-size: inherit; width: 22.225%; margin-right: 3.7%; margin-bottom: 3.61%;/*52*/ background-color: #fafafa; border: 1px solid #e8e8e8; padding: 2.5% 2.22% 1.528%;/*36 32 22*/ } .sec3 .flex-box a:nth-child(4n){ margin-right: 0; } .sec3 .flex-box h5{ font-size: inherit; color: #999; margin-bottom: 8.527%;/*22*/ } .sec3 .flex-box h5 b{ font-size: 1.5em; color: #333; margin-right: 0.7em; } .sec3 .flex-box p{ font-size: 1.125em; color: #333; line-height: 1.56; height: 4.68em; } .sec3 .flex-box .time{ font-size: 0.875em; color: #999; line-height: 1.86; } .sec3 .flex-box .line{ width: 100%; height: 1px; background-color: #e1e1e1; position: relative; margin: 7.364% 0 8.915%;/*19 0 23*/ } .sec3 .flex-box .line::after{ content: ""; position: absolute; left: 0; top: 0; width: 0; height: 100%; background-color: #0c67ba; -webkit-transition: width 0.5s; transition: width 0.5s; } .sec3 .flex-box .more{ font-size: 0.875em; color: #999; text-align: right; } .sec4{ padding: 8.958% 0 7.76%;/*172 0 149*/ } .sec4 .inner{ -webkit-display: flex; -webkit-align-items: center; -webkit-justify-content: space-between; -webkit-flex-direction: row; -webkit-flex-wrap: wrap; display: flex; align-items: center; justify-content: space-between; flex-direction: row; flex-wrap: wrap; } .sec4 .icon{ width: 49.7%; margin-bottom: 1.8125em;/*29*/ } .sec4 h3{ margin-bottom: 0.6em;/*29*/ } .sec4 p{ font-size: 1.125em; color: #333; } .sec4 .btn{ font-size: 1.125em; color: #333; display: block; border: 1px solid #333; width: 9.333em; height: 2.72em; line-height: 2.72; text-align: center; margin-top: 4.78em; } .sec4 .img{ width: 50.278%; margin-right: -6.67%; } .sec5{ background-color: #f4f4f4; padding: 8.33% 0 7.4%;/*160 0 142*/ } .sec5 .table{ margin: 5.278% 0 6.04%;/*76 0 87*/ font-size: 1.125em; color: #333; line-height: 3.5; display: table; width: 100%; table-layout: fixed; } .sec5 .thead{ display: table-header-group; } .sec5 .tbody{ display: table-row-group; } .sec5 .table a{ display: table-row; font-size: inherit; color: inherit; } .sec5 .thead a{ cursor: default; } .sec5 .th{ font-weight: 500; text-align: center; } .sec5 .th,.sec5 .td{ display: table-cell; border-bottom: 1px solid #d9d9d9; } .sec5 .th:first-child{ padding-left: 14em; text-align: left; } .sec5 .td:first-child{ padding-left: 3.3em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sec5 .th:last-child,.sec5 .td:last-child{ width: 12em; text-align: center; } #pop-cover{ background-color: rgba(0,0,0,0.8); position: fixed; left: 0; top: 0; width: 100%; height: 100%; -webkit-display: none; display: none; z-index: 99; } #pop-cover.active{ -webkit-display: flex; -webkit-align-items: center; -webkit-justify-content: center; -webkit-flex-direction: column; display: flex; align-items: center; justify-content: center; flex-direction: column; } #pop-cover .pop-box{ background-color: #fff; width: 700px; position: relative; display: none; padding: 8.542% 0 11.2%;/*164 0 215*/ text-align: center; max-width: 80%; } #pop-cover .pop-box.active{ display: block; } #pop-cover .pop-box .close img{ position: absolute; left: 100%; top: 0; margin-left: 23px; } #pop-cover .pop-box .icon{ width: 53px; } #pop-cover .pop-box p{ font-size: 28px; color: #0c67ba; margin-top: 1em; line-height: 1.5; } @media only screen and (min-width:1024px){ .tab-controls a:hover{ color: #0c67ba; } .sec2 li:hover{ border-color: #0c67ba; } .sec3 .flex-box a:hover{ box-shadow: 0.0625em 0.10825em 0.625em 0px rgba(7, 39, 105, 0.25); } .sec3 .flex-box a:hover b{ color: #0c67ba; } .sec3 .flex-box a:hover p{ color: #0c67ba; } .sec3 .flex-box a:hover .line::after{ width: 100%; } .sec3 .flex-box a:hover .more{ color: #0c67ba; } .sec4 .btn:hover{ background-color: #0c67ba; border-color: #0c67ba; color: #fff; } .sec5 .tbody a:hover .th,.sec5 .tbody a:hover .td{ border-color: #0c67ba; color: #0c67ba; font-weight: bold; } } @media only screen and (max-width:1366px){ .section{ font-size: 14px; } } @media only screen and (max-width:1200px){ .sec1 li:nth-child(2) p{ margin-left: 2em; } } @media only screen and (max-width:1080px){ .sec1 li:nth-child(2) p{ margin-left: 1em; } } @media only screen and (max-width:1024px){ .section{ font-size: 0.625rem; } .tab-controls{ font-size: 1.25em; overflow-x: auto; white-space: nowrap; padding-left: 4%; } .tab-controls a:last-child{ margin-right: 4%; } .sec1{ padding: 5% 0;/*83 0 85*/ } .sec1 h3{ margin-bottom: 8%; } .sec1 ul{ -webkit-display: block; display: block; } .sec1 li{ width: 100%; margin-bottom: 5%; padding: 7.5%;/*40 60 60*/ } .sec1 li:last-child{ margin-bottom: 0; } .sec1 li:nth-child(2) p{ margin-left: 2.1em; } .sec2{ padding: 5% 0 10%;/*85 0 191*/ } .sec2 h3{ margin-bottom: 8%; } .sec2 li{ margin-right: 0; width: 100%; margin-bottom: 5%;/*57*/ } .sec2 li.noline p{ font-size: inherit; color: #333; padding-left: 2.28em; -webkit-flex-grow: 1; flex-grow: 1; margin-right: 5%; } .sec2 li .radio-box{ margin-right: 2em; } .sec3{ padding: 10% 0;/*160 0 149*/ } .sec3 h3{ margin-bottom: 8%; } .sec3 .flex-box a{ width: 47%; margin-right: 6%; margin-bottom: 6%;/*52*/ } .sec3 .flex-box a:nth-child(even){ margin-right: 0; } .sec4{ padding: 15% 0;/*172 0 149*/ font-size: 0.5625rem; } .sec4 .img{ width: 50%; margin-right: -10%; } .sec5{ padding: 10% 0;/*160 0 142*/ } .sec5 .table{ margin: 5% 0;/*76 0 87*/ } .sec5 .th:first-child{ padding-left: 0; text-align: center; } .sec5 .td:first-child{ padding-left: 1em; } .sec5 .th:last-child,.sec5 .td:last-child{ width: 8em; } #pop-cover .pop-box .close img{ width: 1.5rem; margin-left: 0.5rem; } #pop-cover .pop-box .icon{ width: 53px; } #pop-cover .pop-box p{ font-size: 1rem; } }