.sec1{ padding: 7.7% 0 10%;/*148 0 193*/ font-size: 16px; } .sec1 .tab-controls{ text-align: center; font-size: 1.5em; color: #333; margin-bottom: 7.1%;/*102*/ } .sec1 .tab-controls a{ font-size: inherit; color: inherit; vertical-align: middle; } .sec1 .tab-controls a.active{ color: #0c67ba; } .sec1 .tab-controls .line{ width: 1px; height: 0.5em; display: inline-block; vertical-align: middle; background-color: #e5e5e5; margin: 0 1.125em; } .sec1 .tab-content .content{ display: none; } .sec1 .tab-content .content.active{ display: block; } .sec1 .tab-content .select-box{ text-align: center; margin-bottom: -1px; } .sec1 .tab-content .select-box a{ font-size: 1.375em; color: #333; display: inline-block; vertical-align: bottom; padding-bottom: 1.64em; border-bottom: 2px solid transparent; } .sec1 .tab-content .select-box a:first-child{ margin-right: 3.64em; } .sec1 .tab-content .select-box a.active{ border-color: #0c67ba; font-weight: 500; } .sec1 .tab-content ul.list{ display: none; } .sec1 .tab-content ul.list.active{ display: block; } .sec1 .tab-content ul.list li{ border-bottom: 1px solid #e5e5e5; padding: 5% 5.97% 4.72%;/*72 86 68*/ } .sec1 .tab-content ul.list li:first-child{ border-top: 1px solid #e5e5e5; } .sec1 .tab-content ul.list h5{ font-size: 1.75em; color: #333; margin-bottom: 0.93em; } .sec1 .tab-content ul.list p{ font-size: 1.125em; color: #666; line-height: 1.78; margin-bottom: 0.333em; } .sec1 .tab-content ul.list p:last-child{ margin-bottom: 0; } .sec1 .tab-content ul.table{ margin-bottom: 7.7%;/*111*/ border-top: 1px solid #eaeaea; } .sec1 .tab-content ul.table li{ border-bottom: 1px solid #eaeaea; } .sec1 ul.table .flex-box{ -webkit-display: flex; -webkit-align-items: center; -webkit-justify-content: space-between; -webkit-flex-direction: row; display: flex; align-items: center; justify-content: space-between; flex-direction: row; position: relative; font-size: 1.125em; height: 4em; padding-left: 1.5em; padding-right: 1.9em; } .sec1 ul.table .flex-box p{ color: #333; font-size: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 13em; } .sec1 ul.table .flex-box p br{ display: none; } .sec1 ul.table .flex-box .relative-box{ position: relative; -webkit-flex-shrink: 0; flex-shrink: 0; } .sec1 ul.table .flex-box .time{ color: #666; font-size: inherit; } .sec1 ul.table .flex-box .btn-box{ position: absolute; right: 10em; top: 50%; margin-top: -0.5em; display: none; white-space: nowrap; } .sec1 ul.table li:hover .flex-box .btn-box{ display: block; } .sec1 ul.table .flex-box .btn-box a{ font-size: inherit; color: #0c67ba; margin-right: 1.9em; } .sec1 ul.table .flex-box .btn-box a:last-child{ margin-right: 0; } .sec1 ul.table .flex-box .btn-box a span{ vertical-align: middle; } .sec1 ul.table .flex-box .btn-box a img{ vertical-align: middle; width: auto; height: 1em; margin-right: 0.5em; } @media only screen and (max-width:1366px){ .sec1{ font-size: 14px; } } @media only screen and (max-width:1024px){ .sec1{ padding: 8% 0 12%;/*148 0 193*/ font-size: 0.625rem; } .sec1 .tab-controls .line{ margin: 0 1em; } .sec1 .tab-content .select-box{ text-align: center; margin-bottom: -1px; } .sec1 .tab-content .select-box a{ padding-bottom: 1.25em; } .sec1 .tab-content .select-box a:first-child{ margin-right: 3em; } .sec1 .tab-content ul.list li{ padding: 10% 5%;/*72 86 68*/ } .sec1 ul.table .flex-box{ padding-left: 1em; padding-right: 1em; } .sec1 ul.table li:hover .flex-box{ height: 6em; } .sec1 ul.table li:hover .flex-box p{ line-height: 2; } .sec1 ul.table li:hover .flex-box p br{ display: inline-block; } .sec1 ul.table .flex-box p{ margin-right: 2em; } .sec1 ul.table .flex-box .time{ text-align: right; } .sec1 ul.table .flex-box .btn-box{ position: static; margin-top: 1em; } .sec1 ul.table .flex-box .btn-box a{ margin-right: 1em; } } @media only screen and (min-width:1024px){ .sec1 .tab-content .select-box a:hover{ border-color: #0c67ba; font-weight: 500; } .sec1 .tab-controls a:hover{ color: #0c67ba; } }