/* *@Description: 璇︽儏椤礐SS *@Author: Hanli *@Update: Hanli(2019-03-14) */ /*椤甸潰璇︽儏鏍峰紡*/ /*鏍囬*/ /*layui-field-title*/ .layui-field-title{ margin: 30px 0 10px; } fieldset legend { width: auto; padding: 0 10px; border: none; margin-bottom: 0; color: inherit; } .layui-elem-field{ margin: 25px 0; padding: 20px 15px; } .layui-elem-field legend{ font-weight: normal; font-size: 16px; margin-left: 0px; color: inherit; } .layui-elem-field.layui-field-title{ padding: 0; } .layui-elem-field.layui-field-title legend{ margin-left: 10px; } .layui-elem-field .layui-field-box{ padding: 0; } @media screen and (max-width: 767px) { .layui-elem-field legend{ padding: 0 5px; } .layui-elem-field{ padding: 20px 10px; } } /*.layui-elem-field{ margin-bottom: 20px; padding: 10px 15px; } .layui-elem-field legend{ font-weight: normal; font-size: 16px; margin-left: 5px; color: #000; } .layui-elem-field .layui-field-box{ padding: 0; } @media screen and (max-width: 767px) { .layui-elem-field legend{ padding: 0 5px; margin-left: 10px; } .layui-elem-field{ padding: 10px; } }*/ /*blockquote*/ blockquote { font-size: inherit; background: #f5f5f5; padding: 20px; margin-bottom: 20px; margin-top: 20px; border-left: 5px solid #E79039; } blockquote>*:last-child{ margin-bottom: 0; } /*blockquote-line*/ .blockquote-line{ background: #f5f5f5; padding: 20px; margin-bottom: 20px; margin-top: 20px; position: relative; } .blockquote-line:before{ left: 0; top: 0; border-width: 2px 0 0 2px; } .blockquote-line:after{ right: 0; bottom: 0; border-width: 0 2px 2px 0; } .blockquote-line>*:last-child{ margin-bottom: 0; } .blockquote-line>*:first-child{ margin-top: 0; } .blockquote-line h3{ padding-bottom: 10px; border-bottom: 1px dashed #ccc; position: relative; margin-bottom: 20px!important; } .blockquote-line h3:after{ content: ""; position: absolute; left: 0; width: 40px; height: 4px; background: #e79039; bottom: -2px; } @media screen and (max-width: 767px) { blockquote,.blockquote-line{ padding: 20px 15px; } } /*鎶樺彔闈㈡澘*/ .slide-door{ border: 1px solid #e2e2e2; margin-bottom: 10px; } .slide-door .accordion-title{ color: inherit; padding: 18px 38px 18px 15px; margin: 0; position: relative; cursor: pointer; font-weight: normal; line-height: 1.5; } .slide-door .accordion-title:after{ content: "\e9cd"; position: absolute; font-size: 12px; font-family: 'iconfont'; right: 15px; top: 19px; color: #E79039; font-weight: bold; } .slide-door .accordion-title.open:after{ font-family: 'iconfont'; font-weight: bold; content: "\e8c3"; } .slide-door .accordion-title.open{ border-bottom: 1px dashed #e2e2e2; } .slide-door .accordion-content{ padding: 15px; display: none; } .slide-box .slide-door .accordion-title{ border-left: 0; } @media screen and (max-width: 767px) { .slide-door .accordion-title{ padding: 15px 30px 15px 10px; } .slide-door .accordion-title:after{ top: 18px; right: 10px; } .slide-door .accordion-content{ padding: 10px; } } /*table,*/ table{ max-width: 100%; width: 100%; margin: 15px 0; } table td{ padding: 8px 10px; } table p{ margin-bottom: 5px!important; } /*media*/ .media{ margin-bottom: 20px; position: relative; } .media .media-name,.media .media-top-title{ margin-top: 20px!important; font-size: 20px; } .media a:hover .media-name,.media a:hover h5{ color: #00304b; text-decoration: underline; } .media .media-desc{ color: #555; } .media .media-title{ margin-top: 0; font-size: 14px; line-height: 150%; } .media .media-left{ position: relative; padding: 20px 30px 20px 20px; } .media .media-left img{ position: relative; z-index: 2; max-width: 5000px; } .media .media-left .media-img,.media .media-left .media-img img{ width: 150px; position: relative; } .page-content .media .media-left .media-img:before, .ke-content .media .media-left .media-img:before{ content: ""; position: absolute; left: -20px; bottom: 20px; top: -20px; width: 150px; background: #f5f5f5; z-index: 1; } @media screen and (max-width: 767px) { .media{ display: block; width: 100%; overflow: hidden; } .page-content .media, .ke-content .media{ text-align: center; } .media-body,.media-left,.media-right{ display: block; } .media .media-left{ padding-left: 0!important; padding-right: 0!important; padding-bottom: 20px; } .page-content .media .media-left .media-img:before, .ke-content .media .media-left .media-img:before{ background: none; } .media .media-body{ width: 100%; } .faculty-detail .media-body ul{ display: inline-block; text-align: left; } .media .media-left .media-img{ text-align: center; width: 150px; height: 150px; border-radius: 50%; overflow: hidden; margin: 0 auto; } .media .media-name,.media .media-top-title{ margin-top: 0!important; } } /*鍦嗗ご鍍?/ .circle-img{ width: 140px; height: 140px; border-radius: 50%; border: 5px solid #f0f0f0; overflow: hidden; margin: 10px auto; } /*more-btn*/ .more-btn{ display: inline-block; padding: 12px 50px; color: #fff!important; background-color: #00304b; overflow: hidden; position: relative; border-radius: 2px; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; white-space: nowrap; vertical-align: middle; margin-top: 20px; } .more-btn.btn-yellow{ background-color: #E79039; } .more-btn.border-white{ background: none; border: 1px solid rgba(255, 255, 255,.75); border-radius: 50px; color: #fff; } .more-btn.border-white:hover{ background-color: rgba(255, 255, 255,.5); } .more-btn.border-blue{ background: none; border: 1px solid #aaa; border-radius: 50px; color: #00304b!important; } .more-btn.border-blue:hover,.more-btn.border-blue:focus{ border-color: rgba(0,48,75,1); background-color: rgba(0,48,75,1); } .more-btn.has-arrow:after{ content: ""; position: absolute; right: 70px; background-image: url(../images/icon_enter.png); background-repeat: no-repeat; background-position: center; background-size: 18px; width: 18px; height: 14px; margin-top: -7px; top: 50%; right: 50%; opacity: 0; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; } @media screen and (min-width: 992px) { .more-btn.has-arrow:hover{ padding-left: 38px; padding-right: 62px; } .more-btn.has-arrow:hover:after{ opacity: 1; right: 38px; } } .more-btn .fa{ margin-right: 10px; } .more-btn.big{ padding: 15px 80px; font-size: 16px; text-align: center; } .more-btn.btn-small{ padding: 8px 20px; font-size: 13px; } @media screen and (max-width: 480px) { .more-btn.big{ width: 100%; max-width: 100%; } } .more-btn:hover,.more-btn:focus{ color: #fff!important; opacity: .9; text-decoration: none!important; } .single-link{ margin-top: 10px; display: block; color: #00304b; } .single-link:hover{ text-decoration: underline; } .btn{ padding: 10px 18px; background: #00304b; -webkit-transform: all .3s; -ms-transform: all .3s; -o-transform: all .3s; transform: all .3s; } .btn:hover{ background: #00304b; } /*block-contributeur*/ .row.flex-row{ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-align-items: stretch; align-items: stretch; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; } .row.flex-row:after,.row.flex-row:before{ content: none; } .block-contributeur-container [class*='col-']{ margin-bottom: 15px; } .row.flex-row [class*='col-']{ margin: 10px 0; } .block-contributeur{ background: #f7f7f7; border-top: 4px solid #E79039; } .row.flex-row .block-contributeur{ height: 100%; } .block-contributeur p{ margin-bottom: 5px!important; } .block-contributeur_image { text-align: center; margin-bottom: 15px; } .block-contributeur_image .image { width: 110px; height: 110px; background: #d8d8d8; border-radius: 50%; display: block; position: relative; top: -40px; margin: 0 auto -40px; overflow: hidden; } .block-contributeur .block_content { text-align: center; padding: 15px 10px 15px; } .block-contributeur_name { font-size: 18px; color: #E79039; font-weight: bold; } .block_bottom { border-top: 1px dashed #d0d0d0; color: #666; padding: 15px 20px; } @media screen and (max-width: 767px) { .block_bottom{ font-size: 14px; padding: 15px; } } /*keywords*/ .keywords{ /*display: flex; flex-wrap: wrap; -ms-align-items: stretch; align-items: stretch;*/ margin-top: 30px; margin-bottom: 20px; } .keywords .keyword-item{ text-align: center; margin: 20px 0; } .keywords .keyword-num{ font-size: 80px; margin-bottom: 15px; line-height: 1.2; color: #e79039; } .keywords .keyword-num .more{ font-size: 40px; } .keywords .keyword-title{ font-size: 18px; padding-top: 18px; border-top: 1px solid #e6e6e6; position: relative; margin-bottom: 10px; } .keywords .keyword-title:before{ content: ""; position: absolute; left: 50%; top: -3px; height: 5px; width: 80px; margin-left: -40px; background: #e79039; } @media screen and (max-width: 767px) { .keywords .keyword-num{ font-size: 60px; } .keywords .keyword-num .more{ font-size: 32px; } } .border-btn{ display: block; padding: 10px 18px; border:1px solid #00304b; text-align: center; /*white-space: nowrap;*/ vertical-align: middle; border-radius: 4px; margin: 10px 0; background: #00304b; color: #fefefe; } .block-btn{ padding: 5px; background: #f5f5f5; border: 1px solid #ccc; position: relative; margin: 15px 0; cursor: pointer; } .block-btn span{ position: absolute; left: 0; top: 0; bottom: 0; right: 0; padding: 15px; text-align: center; -webkit-transform: scale(.2); -ms-transform: scale(.2); -o-transform: scale(.2); transform: scale(.2); display: flex; justify-content: center; -ms-align-self: stretch; align-self: stretch; -ms-align-items: center; align-items: center; background: rgba(38,38,38,.95); color: #00304b; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; line-height: 1.5; opacity: 0; } .block-btn:hover span{ -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; } /*tab*/ .horizontal-tag .tabs{ background: #f0f0f0; padding-left: 0; margin-bottom: 0; /*display: table; width: 100%; table-layout: fixed;*/ display: flex; -ms-align-items: stretch; align-items: stretch; justify-content: space-around; } .horizontal-tag .tabs a{ color: #555; font-size: 15px; padding: 1em 5px; position: relative; } .horizontal-tag .tabs>li{ text-align: center; border-right: 1px solid #ddd; list-style: none; padding-left: 0; flex-grow: 1; } .horizontal-tag .tabs>li:last-of-type{ border-right: 0; } .horizontal-tag .tabs>li.active a,.horizontal-tag .tabs>li.active a:hover{ background: #00304b; } .horizontal-tag .tabs>li.active a:after{ content: ' '; display: block; width: 0; height: 0; border-right-color: transparent; border-left-color: transparent; border-bottom-color: transparent; border-width: 10px 20px 0 20px; border-style: solid; position: absolute; margin-left: -20px; bottom: -10px; left: 50%; z-index: 1; border-top-color: #00304b; } .horizontal-tag .flex .slide{ background: none; margin-bottom: 0; } .horizontal-tag .flex [class*="col-"]{ border-right: 1px solid #aaa; margin-bottom: 20px; } @media screen and (min-width: 992px) { .horizontal-tag .flex [class*="col-"]:nth-of-type(4n){ border-right: none; } } @media screen and (min-width: 568px) and (max-width: 991px) { .horizontal-tag .flex [class*="col-"]:nth-of-type(2n){ border-right: none; } } @media screen and (max-width: 567px) { .horizontal-tag .flex [class*="col-"]{ border-right: none; } } .horizontal-tag .flex .slide .desc{ color: #aaa; } .horizontal-tag .flex .text{ padding-left: 0; padding-right: 0; } .horizontal-tag .flex h4{ font-size: 16px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; height: 17px; } .horizontal-tag .flex a:hover{ color: #00304b; } .tabs{ border: none; } .tabs>li{ margin-bottom: 0!important; list-style: none; display: inline-block; margin: 0; } .tabs>li>a { margin-right: 0; border: none; border-radius: 0; display: block; } .tabs>li>a:hover { border: none; } .tabs>li>a:focus, .tabs>li>a:hover { text-decoration: none; background: none; } .tabs>li.active>a, .tabs>li.active>a:focus, .tabs>li.active>a:hover { color: #fff; cursor: default; background: none; border: none; } .horizontal-tag .tab-content{ padding: 30px 0; } .horizontal-tag .tab-content .tab-item{ display: none; } .horizontal-tag .tab-content .tab-item.active{ display: block; } /*block-grey*/ .block-grey{ position: relative; background: #f5f5f5; padding: 40px 0; } .page-content .block-grey:before{ content: ""; position: absolute; left: -10000px; right: -10000px; top: 0; bottom: 0; background: #f5f5f5; } .block-grey>*{ position: relative; z-index: 2; } .block-grey>*:first-child{ margin-top: 0; } .page-content>.block-grey:first-child:before{ top: -40px; } .page-content>.block-grey:first-child{ padding-top: 0; } .page-content>.block-grey:last-child:before{ bottom: -40px; } .page-content>.block-grey:last-child{ padding-bottom: 0; } /*img-flex*/ .img-flex{ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; margin-left: -15px; margin-right: -15px; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; position: relative; } .img-flex .img-flex-item{ padding: 15px; /*margin: 15px 0;*/ position: relative; z-index: 2; position: relative; } .img-flex .img-flex-item:before{ content: ""; position: absolute; left: 7px; right: 7px; top: 7px; bottom: 7px; background: #fff; z-index: 0; border-radius: 2px; } .img-flex .img-flex-item>*{ position: relative; z-index: 2; } .img-flex .img-flex-item .img-box img{ width: 100%; } .img-flex .img-flex-item .text-box{ padding-top: 10px; padding-bottom: 5px; } @media screen and (min-width: 468px) { .img-flex .img-flex-item{ width: 50%; } } @media screen and (min-width: 768px) { .img-flex .img-flex-item{ width: 50%; } } @media screen and (min-width: 992px) { .img-flex .img-flex-item{ width: 25%; } } @media screen and (max-width: 467px) { .img-flex .img-flex-item{ width: 100%; padding: 5px 15px; } .img-flex .img-flex-item:before{ background: none; } } .img-flex-desc{ text-align: center; font-size: grey; font-size: 16px; margin-bottom: 15px; } .img-flex .img-flex-item .more-btn{ margin-top: 10px; } /*img-flex END*/ /*鍙戝睍鍘嗙▼bth*/ .time-btn{ display: inline-block; padding: 2px 10px; border-radius: 20px; background: #AEB4B7; min-width: 82px; text-overflow: ellipsis; white-space: nowrap; margin-right: 10px; } /*鍙戝睍鍘嗙▼bth END*/ /*process*/ .process-box{ position: relative; margin: 30px 0; } .process-box .process-item{ /*width: 20%;*/ text-align: center; position: relative; } .process-box .process-item:before{ content: ""; position: absolute; font-size: 24px; top: 40px; font-weight: bold; height: 2px; left: 0; right: 0; background: #800073; z-index: 1; } .process-box .process-item:first-child:before{ left: 50%; } .process-box .process-item:last-child:before{ right: 50%; } .process-box .process-item .img-box{ display: inline-block; padding: 20px; border: 1px solid #800073; border-radius: 50%; position: relative; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); position: relative; z-index: 2; line-height: 1; background: #800073; } .process-box .process-item img{ width: 40px; height: 40px; } .process-box .process-item .iconfont{ font-size: 36px; width: 40px; height: 40px; display: inline-block; line-height: 40px; color: #999fa9; position: relative; z-index: 2; font-weight: lighter; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .process-box .process-item .text-box{ margin: 20px 0 30px; padding: 0 5px; } .process-box .process-item .text-box .process-title{ font-size: 16px; margin-bottom: 10px; } .process-box .process-item .text-box .process-desc{ color: #888; font-size: 12px; /*text-align: left;*/ } .process-box .layui-icon{ font-size: 24px; color: grey; margin-top: 46px; font-weight: bold; } .process-box .process-item .num-box{ position: absolute; width: 50px; height: 50px; background: #2F5597; color: #fff; border-radius: 50%; left: -5px; top: -5px; font-size: 16px; } .process-box .process-item .num-box span{ display: block; line-height: 1.3; } .process-box .process-item .process-step{ font-size: 12px; margin-top: 8px; font-style: italic; } @media screen and (min-width: 992px) { .process-box{ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .process-box .process-item{ -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; -o-flex: 1; flex: 1; } .process-box .process-item .text-box{ max-width: 250px; margin: 20px auto 30px; } } @media screen and (max-width: 991px) { .process-box .process-item{ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; width: 100%; padding: 15px 0; } .process-box .process-item .img-box{ width: 82px; height: 82px; } .process-box .process-item .text-box{ padding: 10px 0 10px 15px; margin: 0; text-align: left; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; -o-flex: 1; flex: 1; } .process-box .process-item:before{ height: auto; width: 2px; left: 40px; right: auto; top: 0; bottom: 0; } .process-box .process-item:first-child:before{ top: 50%; left: 40px; } .process-box .process-item:last-child:before{ bottom: 50%; right: auto; } } /*theme-blue*/ .theme-blue .process-item:before, .theme-blue .process-item .img-box{ background: #00304B; } .theme-blue .process-item .img-box{ border-color: #00304B; } /*theme-yellow*/ .theme-yellow .process-item:before, .theme-yellow .process-item .img-box{ background: #E79039; } .theme-yellow .process-item .img-box{ border-color: #E79039; } /*theme-green*/ .theme-green .process-item:before, .theme-green .process-item .img-box{ background: rgba(46, 186, 165); } .theme-green .process-item .img-box{ border-color: rgba(46, 186, 165); } /*process END*/ /*tag*/ .page-content .tag{ padding-top: 15px; border-top: 1px solid #eee; margin-top: 30px; } .page-content .tag-link{ display: inline-block; padding: 6px 12px; border-radius: 3px; border: 1px solid #aaa; color: #777; margin-right: 20px; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; font-size: 13px; margin-bottom: 10px; } .page-content .tag-link:hover{ background: #E79039; border-color: #E79039; color: #fff; } /*tag END*/ /*video*/ .page-content video{ max-width: 100%; margin: 0 auto; } /*video END*/