/* this style for index page use */ @charset "UTF-8 "; @font-face { font-family: 'MyWebFont'; src: url('../fonts/NotoSerifTC-SemiBold.otf'); } @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"); /* body{font-family:MyWebFont;font-size:1rem;} */ body{font-family: "微軟正黑體", "Noto Sans", "思源黑體 TW";} /* nav{font-family:MyWebFont;background-color: #FFB74D;color:fff;width:100%; height:auto;font-size:1.2rem;box-shadow:3px 3px 12px gray;} */ nav{background-color: #FFB74D;color:fff;width:100%; height:auto;font-size:1.2rem;box-shadow:3px 3px 12px gray;} ul > li:hover { color:#FFB74D; } a{cursor:pointer;} .marketing{margin-top:10px;padding:0px;padding-left:10%;padding-right:10%;} /* =================== */ a {cursor:pointer;} ul li{cursor:pointer;} .carousel div img{ object-position: left top; width: 100%;height: 100%;object-fit: cover; } form input[type='search']{border-radius:7px;} form button{border-radius:7px;} button{border-radius:8px;} .imgcircus{border-radius:50%;!important;} /* add from homepage */ .logo {padding-left:5px;width:15%;} .logo img{width:100%;} .iconimg{ opacity: 1.0; filter: alpha(opacity=100); } .iconimg:hover{ opacity: 0.5; filter: alpha(opacity=100); } .hidden-text { /* font-size:1em; */ overflow: hidden; text-align:justify; word-break: break-all; text-overflow: ellipsis; line-height: 35px; white-space: wrap; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; margin-bottom: 10px; } .normal-text{text-align:justify; line-height: 2em;letter-spacing: 1px;/*text-overflow: ellipsis; word-break: break-all; white-space: wrap;display: -webkit-box; -webkit-box-orient: vertical;*/ width:100%;padding:10px;} /*p,dd {font-size:1.0rem;}*/ /* ================================= */ nav ul li {font-size:1em;} /* nav bar */ nav ol li{font-size:1em;} footer {margin:0 auto;margin-top:0px;background-color:#DDD;height:auto;color:#000;} footer div {padding-left:10.5%;padding-right:10.5%;border:0px solid red;font-size:1.1rem;} footer div img {width:30%;text-align:left;} footer .title{font-size:1.3rem; font-weight: bold !important; line-height: 1.5rem; margin: 1.5rem 0 !important;text-align: left;} footer dl li {text-align:left;list-style-type: none;} #basic-addon2{background:#DDD;color:#fff;} /* 共用的定義 ====================== */ #HEAD {position:relative;top:6%;background:url(../images/V2_img2.jpg);height:450px;width:100%; background-repeat:no-repeat;background-size: cover;background-position: center; /*left bottom; */ padding-top:220px;text-align:center;} /* #HEAD .title {font-family:'MyWebFont';font-size:3em;font-weight:bold;z-index:10} */ #HEAD .title {font-size:3rem;font-weight:bold;z-index:10} #BELT{background:#444444;color:#fff;height:45px; line-height: 1;display: flex;align-items: center;justify-content: flex-end; text-align:right;z-index:5} #BELT a{color:#fff;} #LEFT{padding-left:20%;} #LEFT .detail{position: fixed; left: 0; top: 50%;margin-top: 2em; /*-2.5em; */ height:auto;line-height:25px;padding-left:20%;} /* */ #LEFT dl {font-size:1.2em;} #LEFT dl > dd {font-size:1.0em;} #LEFT dl > dd > dl > dd{font-size:0.8em;} #CONTENT{margin:5rem auto; /*padding-top:10px;*/text-align:center;} #CONTENT hr {margin-top:20px;} #SITEMAP {margin-top:5%;padding-left:10%;padding-right:10%;padding-top:20px;background-color:#DDD;height:auto;color:#000;line-height:1.5rem;} #SITEMAP ul .maptitle{text-align:left;font-size:1.3rem;font-weight:bold;color:#000;line-height: 1.5rem;} #SITEMAP li .mapsubtitle{font-weight:normal;font-size:1.1rem;} #SITEMAP li { list-style-type: none; margin-bottom: 1rem;} .boxhead{padding-top:30px;padding-bottom:30px;} .boxhead > .title {font-size:2.5rem;color: #FFB74D;font-weight:bold;line-height: 3rem;} .boxcontent > .title {font-size:2.5rem;color: #FFB74D;font-weight:bold;line-height: 3rem;} .boxcontent dd {/*font-size:1.0rem;line-height:35px;*/text-align:justify;line-height:2.5rem;height:auto;} .boxcontent ol {/*font-size:1.0rem;line-height:35px;*/text-align:justify;font-size:1.25rem;line-height:2.5rem;height:auto;} .boxcontent ol ol{/*font-size:1.0rem;line-height:35px;*/text-align:justify;font-size:1.25rem;line-height:2.5rem;height:auto;} .boxcontent .name{font-weight:bold;} .morebtn{background:#FFB74D} .lessbtn{background:#FFB74D} .textbox{display: flex; width: auto; height:auto;background:#fb8c00;color:#FFF;text-align:center; font-weight:bold;padding:2px 10px;border-radius:5px;font-size:1rem;} .outlink{float:left;text-align:left;} .outlink{border: 1px solid #E6E6E6; padding: 20px; margin-right: 20px; margin-bottom: 20px; -webkit-transition: all 250ms cubic-bezier(0.02, 0.01, 0.47, 1); transition: all 250ms cubic-bezier(.02, .01, .47, 1); line-height: 1.5em;} .outlink2{float:left;text-align:left;} .outlink2{border: 1px solid #E6E6E6; padding: 20px; margin-right: 20px; margin-bottom: 20px; -webkit-transition: all 250ms cubic-bezier(0.02, 0.01, 0.47, 1); transition: all 250ms cubic-bezier(.02, .01, .47, 1); line-height: 1.5em;} /*.circleicon{width:25px;height:25px;border-radius:50%;text-align:center; } 共用的定義 =====================*/ /* ID 定義 ========================*/ #centerinfo{height:auto;/*text-align:center;margin-top:20px;padding-top:10px;padding:20px;font-size:1rem;line-height:35px;*/} #centerinfo .boxhead {text-align:center;} #centerinfo .boxcontent {text-align:justify;margin-bottom:50px; } #centerinfo img{width:90%;text-align:center} /*ol,li{font-size:1.0rem;line-height:35px;}*/ #rule{/*margin-top:20px;border:0px solid red;padding-top:10px;padding:20px;*/height:auto;} #rule .boxhead {text-align:center; } #rule .boxcontent {text-align:justify;/*font-size:1em;*/ } #rule img{width:90%;text-align:center} #organization{/*margin-top:20px;padding-top:10px;padding:20px;*/height:auto;} #organization .boxhead {text-align:center; } #organization .boxcontent {text-align:center; } #organization img{width:90%;text-align:center} #tecoffice{/*margin-top:20px;padding-top:10px;*/height:auto;} #tecoffice .boxhead {text-align:center; } #tecoffice .boxcontent {margin-top:10px;text-align:center; } #tecoffice .divshadow{ /*padding:20px;*/ height:auto; border: 1px solid #E6E6E6; box-shadow:0px 0px 8px rgba(0,0,0,0.1); } #tecoffice img{width:90%;} #tecoffice .person{width:100%;} #tecoffice .person img{width:5%;} #tecoffice .jobtitle{color:#fb8c00;font-size:1rem;font-weight:bold;} #tecoffice .jobtitle2{color:#666666;font-size:1rem;font-weight:bold;} #tecoffice .name {font-size:1.8rem;line-height:2.8rem;} #tecoffice .name2 {font-size:2.5rem;line-height:3.5rem;font-weight:bold;padding: 1rem 0;} #tecoffice .affilication{font-size:1rem;} #committee1{/*margin-top:20px;padding-top:10px;padding:20px;*/height:auto;} /* #committee1 .boxhead {text-align:center; } */ #committee1 .boxcontent {margin-top:10px;text-align:center; } #committee1 .divshadow{ height:auto; border: 1px solid #E6E6E6; box-shadow:0px 0px 8px rgba(0,0,0,0.1); } #committee1 img{width:90%;} #committee1 .person{width:100%;} #committee1 .person img{width:5%;} #committee1 .jobtitle{color:#fb8c00;font-size:1rem;font-weight:bold;} #committee1 .jobtitle2{color:#666666;font-size:1rem;font-weight:bold;} #committee1 .name {font-size:1.8rem;} #committee1 .affilication{font-size:1rem;} #committee2{/*margin-top:20px;padding-top:10px;padding:20px;*/height:auto;} /* #committee2 .boxhead {text-align:center; } */ #committee2 .boxcontent {margin-top:10px;text-align:center; } #committee2 .divshadow{ height:auto; border: 1px solid #E6E6E6; box-shadow:0px 0px 8px rgba(0,0,0,0.1); } #committee2 img{width:90%;} #committee2 .person{width:100%;} #committee2 .person img{width:5%;} #committee2 .jobtitle{color:#fb8c00;font-size:1rem;font-weight:bold;} #committee2 .jobtitle2{color:#666666;font-size:1rem;font-weight:bold;} #committee2 .name {font-size:1.8rem;} #committee2 .affilication{font-size:1rem;} #committee3{/*margin-top:20px;padding-top:10px;padding:20px;*/height:auto;} /* #committee3 .boxhead {text-align:center; } */ #committee3 .boxcontent {margin-top:10px;text-align:center; } #committee3 .divshadow{ height:auto; border: 1px solid #E6E6E6; box-shadow:0px 0px 8px rgba(0,0,0,0.1); } #committee3 img{width:90%;} #committee3 .person{width:100%;} #committee3 .person img{width:5%;} #committee3 .jobtitle{color:#fb8c00;font-size:1rem;font-weight:bold;} #committee3 .jobtitle2{color:#666666;font-size:1rem;font-weight:bold;} #committee3 .name {font-size:1.8rem;} #committee3 .affilication{font-size:1rem;} #cooperation {text-align:center;} /*#cooperation .boxhead {font-size:1.2em;font-weight:bold;} */ #cooperation .boxcontent > .name{text-align:left;font-size:1.25rem;} #cooperation .box{ border: 1px solid #E6E6E6; padding: 1rem; margin: 1rem; -webkit-transition: all 250ms cubic-bezier(0.02, 0.01, 0.47, 1); transition: all 250ms cubic-bezier(.02, .01, .47, 1); line-height: 1.5em; } #cooperation .box:hover{box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15); transform: translate(0,-5px); transition-delay: 0s !important;} /* #news{margin-top:20px;padding-top:10px;height:auto;padding:20px;} #news .boxhead {text-align:center; } #news .boxcontent {margin-top:10px;text-align:center; } */ #subscribe{/*margin-top:20px;padding-top:10px;padding:20px;*/height:auto;} #subscribe .boxhead{text-align:center; } #subscribe .boxcontent {margin-top:10px;text-align:center; } /*===== */ #tesis{margin-top:20px;height:auto;} #tesis .boxhead {text-align:center; } #tesis .boxcontent {height:auto;text-align:center;margin-top:20px;} #tesis .outlink{border: 1px solid #E6E6E6; width:100%; padding: 10px 20px; margin: 40px 0; -webkit-transition: all 250ms cubic-bezier(0.02, 0.01, 0.47, 1); transition: all 250ms cubic-bezier(.02, .01, .47, 1); line-height: 1.5em;} #tesis .outlink:hover{ box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15); transform: translate(0,-5px);color:#FFB74D; transition-delay: 0s !important;} #eqreport{/*margin-top:20px;padding-top:10px;padding:20px;*/height:auto;} #eqreport .boxhead {text-align:center; } #eqreport .boxcontent {margin-top:10px;text-align:center;} #eqreport .outlink{border: 1px solid #E6E6E6; width:100%; padding: 10px 20px; margin: 40px 0; -webkit-transition: all 250ms cubic-bezier(0.02, 0.01, 0.47, 1); transition: all 250ms cubic-bezier(.02, .01, .47, 1); line-height: 1.5em;} #eqreport .outlink:hover{box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15); transform: translate(0,-5px);color:#FFB74D; transition-delay: 0s !important;} #eqreport .outlink2{border: 1px solid #E6E6E6;width:100%; padding: 10px 20px; margin: 40px 0; -webkit-transition: all 250ms cubic-bezier(0.02, 0.01, 0.47, 1); transition: all 250ms cubic-bezier(.02, .01, .47, 1); line-height: 1.5em;} #eqreport .outlink2:hover{box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15); transform: translate(0,-5px);color:#FFB74D; transition-delay: 0s !important;} #glossary{/*margin-top:20px;padding-top:10px;padding:20px;*/height:auto;} #glossary .boxhead {text-align:center; } #glossary .boxcontent {margin-top:10px;text-align:center;} #glossary .outlink{border: 1px solid #E6E6E6; width:100%; padding: 10px 20px; margin: 40px 0; -webkit-transition: all 250ms cubic-bezier(0.02, 0.01, 0.47, 1); transition: all 250ms cubic-bezier(.02, .01, .47, 1); line-height: 1.5em;} #glossary .outlink:hover{box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15); transform: translate(0,-5px);color:#FFB74D; transition-delay: 0s !important;} #school{/*margin-top:20px;padding-top:10px;padding:20px;*/height:auto;} #school .boxhead {text-align:center; } #school .boxcontent {margin-top:10px;text-align:center;} #school .outlink{border: 1px solid #E6E6E6; width:100%; padding: 10px 20px; margin: 40px 0; -webkit-transition: all 250ms cubic-bezier(0.02, 0.01, 0.47, 1); transition: all 250ms cubic-bezier(.02, .01, .47, 1); line-height: 1.5em;} #school .outlink:hover{box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15); transform: translate(0,-5px);color:#FFB74D; transition-delay: 0s !important;} /*#school ol{font-size:1em;} */ #foreign{/*margin-top:20px;padding-top:10px;padding:20px;*/height:auto;} #foreign .boxhead {text-align:center; } #foreign .boxcontent {margin-top:10px;text-align:center;} #foreign .outlink{border: 1px solid #E6E6E6; width:100%; padding: 10px 20px; margin: 40px 0; -webkit-transition: all 250ms cubic-bezier(0.02, 0.01, 0.47, 1); transition: all 250ms cubic-bezier(.02, .01, .47, 1); line-height: 1.5em;} #foreign .outlink:hover{box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15); transform: translate(0,-5px); transition-delay: 0s !important;} #foreign{font-size:1.2em;text-align:center;text-justify:inter;} #foreign .subtitle{font-size:1.2rem;} /*display: flex;flex-flow: column flex-shrink; */ #foreign .graphy{position:relative;height:200px;text-align: center; } #foreign .graphy img{width:100%;object-fit:cover;} .newsimg { position: relative; max-width: 620px; height: 300px;background-repeat: no-repeat; background-size: cover; background-position: center;margin-bottom: 20px } #eqknowledge dd{font-size:1em;} #eqknowledge{/*margin-top:20px;padding-top:10px;padding:20px;*/height:auto;} #eqknowledge .boxhead {text-align:center; } #eqknowledge .boxcontent {margin-top:10px;text-align:center;} #eqknowledge .outlink{border: 1px solid #E6E6E6; width:100%; padding: 10px 20px; margin: 40px 0; -webkit-transition: all 250ms cubic-bezier(0.02, 0.01, 0.47, 1); transition: all 250ms cubic-bezier(.02, .01, .47, 1); line-height: 1.5em;} #eqknowledge .outlink:hover{box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15); transform: translate(0,-5px);color:#FFB74D; transition-delay: 0s !important;} #medialist{/*margin-top:20px;padding-top:10px;padding:20px;*/height:auto;} #medialist .boxhead {text-align:center; } #medialist .boxcontent {margin-top:10px;text-align:center;} #medialist .outlink{border: 1px solid #E6E6E6; padding: 10px 20px; margin: 40px 0; -webkit-transition: all 250ms cubic-bezier(0.02, 0.01, 0.47, 1); transition: all 250ms cubic-bezier(.02, .01, .47, 1); line-height: 1.5em;} #medialist .outlink:hover{box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15); transform: translate(0,-5px); transition-delay: 0s !important;} /*===== */ #MiDAS{margin-top:20px;height:auto;} #MiDAS .boxhead{text-align:center; } #MiDAS .outlink{border: 1px solid #E6E6E6; width:100%; padding: 10px 20px; margin: 40px 0; -webkit-transition: all 250ms cubic-bezier(0.02, 0.01, 0.47, 1); transition: all 250ms cubic-bezier(.02, .01, .47, 1); line-height: 1.5em;} #MiDAS .outlink:hover{ box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15); transform: translate(0,-5px);color:#FFB74D; transition-delay: 0s !important;} #MiDAS .boxcontent {margin-top:10px;height:auto;text-align:center;margin-top:20px;/*border:1px solid #DDD;*/ } #tem{margin-top:20px;height:auto;} #tem .boxhead{text-align:center; } #tem .outlink{border: 1px solid #E6E6E6; width:100%; padding: 10px 20px; margin: 40px 0; -webkit-transition: all 250ms cubic-bezier(0.02, 0.01, 0.47, 1); transition: all 250ms cubic-bezier(.02, .01, .47, 1); line-height: 1.5em;} #tem .outlink:hover{ box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15); transform: translate(0,-5px);color:#FFB74D; transition-delay: 0s !important;} #tem .boxcontent {margin-top:10px;height:auto;text-align:center;margin-top:20px;/*border:1px solid #DDD;*/ } /*===== */ #tvo{margin-top:20px;height:auto;} #tvo .boxhead {text-align:center; } #tvo .boxcontent {margin-top:20px;text-align:center;border:1px solid #DDD; } #tvo .outlink{border: 1px solid #E6E6E6;width:100%; padding: 10px 20px; margin: 40px 0; -webkit-transition: all 250ms cubic-bezier(0.02, 0.01, 0.47, 1); transition: all 250ms cubic-bezier(.02, .01, .47, 1); line-height: 1.5em;} #tvo .outlink:hover{box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15); transform: translate(0,-5px);color:#FFB74D; transition-delay: 0s !important;} /*===== */ #palert{/*margin-top:20px;padding-top:10px;padding:20px;*/height:auto;} #palert .boxhead {text-align:center; } #palert .boxcontent {text-align:center; margin-top:20px;} #palert .outlink{border: 1px solid #E6E6E6;width:100%; padding: 10px 20px; margin: 40px 0; -webkit-transition: all 250ms cubic-bezier(0.02, 0.01, 0.47, 1); transition: all 250ms cubic-bezier(.02, .01, .47, 1); line-height: 1.5em;} #palert .outlink:hover{box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15); transform: translate(0,-5px);color:#FFB74D; transition-delay: 0s !important;} #hisevent{/*margin-top:20px;padding-top:10px;padding:20px;*/height:auto;} #hisevent .boxhead {text-align:center; } #hisevent .boxcontent {text-align:center; margin-top:20px;} #hisevent .outlink{border: 1px solid #E6E6E6;width:100%; padding: 10px 20px; margin: 40px 0; -webkit-transition: all 250ms cubic-bezier(0.02, 0.01, 0.47, 1); transition: all 250ms cubic-bezier(.02, .01, .47, 1); line-height: 1.5em;} #hisevent .outlink:hover{box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15); transform: translate(0,-5px);color:#FFB74D; transition-delay: 0s !important;} #rmt{/*margin-top:20px;padding-top:10px;padding:20px;*/height:auto;} #rmt .boxhead {text-align:center; } #rmt .boxcontent {text-align:center;margin-top:20px;} #rmt .outlink{border: 1px solid #E6E6E6;width:100%; padding: 10px 20px; margin: 40px 0; -webkit-transition: all 250ms cubic-bezier(0.02, 0.01, 0.47, 1); transition: all 250ms cubic-bezier(.02, .01, .47, 1); line-height: 1.5em;} #rmt .outlink:hover{box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15); transform: translate(0,-5px);color:#FFB74D; transition-delay: 0s !important;} #etec{/*margin-top:20px;padding-top:10px;padding:20px;*/height:auto;} #etec .boxhead {text-align:center; } #etec .boxcontent {text-align:center;margin-top:20px;} #etec .outlink{border: 1px solid #E6E6E6;width:100%; padding: 10px 20px; margin: 40px 0; -webkit-transition: all 250ms cubic-bezier(0.02, 0.01, 0.47, 1); transition: all 250ms cubic-bezier(.02, .01, .47, 1); line-height: 1.5em;} #etec .outlink:hover{box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15); transform: translate(0,-5px);color:#FFB74D; transition-delay: 0s !important;} /*===== */ #tecip{/*margin-top:20px;padding-top:10px;padding:20px;*/height:auto;} #tecip .boxhead {text-align:center; } #tecip .boxcontent {text-align:center;margin-top:20px;} #tecip .outlink{border: 1px solid #E6E6E6;width:100%; padding: 10px 20px; margin: 40px 0; -webkit-transition: all 250ms cubic-bezier(0.02, 0.01, 0.47, 1); transition: all 250ms cubic-bezier(.02, .01, .47, 1); line-height: 1.5em;} #tecip .outlink:hover{box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15); transform: translate(0,-5px);color:#FFB74D; transition-delay: 0s !important;} #tecip .outlink2{border: 1px solid #E6E6E6;width:100%; padding: 10px 20px; margin: 40px 0; -webkit-transition: all 250ms cubic-bezier(0.02, 0.01, 0.47, 1); transition: all 250ms cubic-bezier(.02, .01, .47, 1); line-height: 1.5em;} #tecip .outlink2:hover{box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15); transform: translate(0,-5px);color:#FFB74D; transition-delay: 0s !important;} #tecdc{/*margin-top:20px;padding-top:10px;padding:20px;*/height:auto;} #tecdc .boxhead {text-align:center; } #tecdc .boxcontent {text-align:center;margin-top:20px;} #tecdc .outlink{border: 1px solid #E6E6E6;width:100%; padding: 10px 20px; margin: 40px 0; -webkit-transition: all 250ms cubic-bezier(0.02, 0.01, 0.47, 1); transition: all 250ms cubic-bezier(.02, .01, .47, 1);line-height: 1.5em;} #tecdc .outlink:hover{box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15); transform: translate(0,-5px);color:#FFB74D; transition-delay: 0s !important;} #articals{/*margin-top:20px;padding-top:10px;padding:20px;*/height:auto;} #articals .boxhead {text-align:center; } #articals .boxcontent {margin-top:10px;text-align:center; } /*===== */ #annual{/*margin-top:20px;padding-top:10px;padding:20px;*/height:auto;} #annual .boxhead {text-align:center; color:#FFB74D;} #annual .boxcontent {margin-top:10px;text-align:center; border:1px solid #DDD;} #annual .outlink{border: 1px solid #E6E6E6;width:100%;padding: 20px;color:#FFB74D; margin-right: 20px; margin-bottom: 20px;-webkit-transition: all 250ms cubic-bezier(0.02, 0.01, 0.47, 1); transition: all 250ms cubic-bezier(.02, .01, .47, 1);line-height: 1.5em;} #annual .outlink:hover{box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15); transform: translate(0,-5px);color:#FFB74D; transition-delay: 0s !important;} #activity{/*margin-top:20px;padding-top:10px;padding:20px;*/height:auto;} #activity .boxhead {text-align:center; } #activity .boxcontent {margin-top:10px;text-align:center; } #album{/*margin-top:20px;padding-top:10px;padding:20px;*/height:auto;border:1px solid #DDD; } #album .boxhead {text-align:center; } #album .boxcontent {margin-top:10px;text-align:center; } /*===== */ #tecjournal{/*margin-top:20px;padding-top:10px;padding:20px;*/height:auto;} #tecjournal .boxhead {text-align:center; } #tecjournal .boxcontent {margin-top:10px;text-align:center; } #brochure{/*margin-top:20px;padding-top:10px;padding:20px;*/height:auto;} #brochure .boxhead {text-align:center; } #brochure .boxcontent {margin-top:10px;text-align:center; } #annreport{/*margin-top:20px;padding-top:10px;padding:20px;*/height:auto;} #annreport .boxhead {text-align:center; } #annreport .boxcontent {margin-top:10px;text-align:center; } #survey{/*margin-top:20px;padding-top:10px;padding:20px;*/height:auto;} #survey .boxhead {text-align:center; } #survey .boxcontent {margin-top:10px;text-align:center; } #contribution{/*margin-top:20px;padding-top:10px;padding:20px;*/height:auto;} #contribution .boxhead {text-align:center; } #contribution .boxcontent {margin-top:10px;text-align:center; } #videos{/*margin-top:20px;padding-top:10px;padding:20px;*/height:auto;} #videos .boxhead {text-align:center; } #videos .boxcontent {margin-top:10px;text-align:center; } /* album use css define */ .album{ position: relative; top:50px;left:200px;height:400px;width:800px;} .album img{width:100%;height:100%;object-fit: cover;} .album .maskcontent{position:absolute;left:0px;bottom:0px;text-align: left;width:100%;height:35px;border:0px solid red; background-color:#000000;color:#ffffff; font-weight:bolder;padding:10px;opacity: 0.5; font-size:1rem; } /* mobile screen size */ @media screen and (max-width: 320px){ #BELT{font-size:1rem;} #CONTENT{border:0px solid red;width:100%;margin:5rem auto; /*padding-top:10px;*/text-align:center;} #CONTENT hr {margin-top:20px;} .boxhead{padding-top:30px;padding-bottom:30px;} .boxhead > .title {font-size:2.5rem;color: #FFB74D;font-weight:bold;line-height: 3rem;} .boxcontent > .title {font-size:2.5rem;color: #FFB74D;font-weight:bold;} .boxcontent dd {/*font-size:1.0rem;*/text-align:justify;line-height:25px;height:auto;} .boxcontent ol {/*font-size:1.0rem;*/text-align:justify;line-height:25px;height:auto;} .morebtn{background:#FFB74D} .lessbtn{background:#FFB74D} .textbox{width:auto;height:auto;background:#fb8c00;color:#FFF;text-align:center; font-weight:bold;padding:2px 10px;border-radius:5px;font-size:1rem;} #tecoffice{border:0px solid red;margin:20px 0;padding-top:10px;height:auto;} /*#tecoffice .boxhead {text-align:center; } */ #tecoffice .boxcontent {margin-top:10px;text-align:center; } #tecoffice .divshadow{ height:auto; border: 1px solid #E6E6E6; box-shadow:0px 0px 8px rgba(0,0,0,0.1); } #tecoffice img{width:90%;} #tecoffice .person{width:100%;} #tecoffice .person img{width:10%;} #tecoffice .jobtitle{color:#fb8c00;font-size:1rem;font-weight:bold;} #tecoffice .jobtitle2{color:#666666;font-size:1rem;font-weight:bold;} #tecoffice .name {font-size:1.5rem;line-height:2.5rem;} #tecoffice .name2 {font-size:2.2rem;line-height:3.2rem;font-weight:bold;} #tecoffice .affilication{font-size:1rem;} #SIDEMAP{display:none;} } @media screen and (max-width: 375px){ #SIDEMAP{display:none;} } @media screen and (max-width: 425px){ #SIDEMAP{display:none;} } @media screen and (max-width: 667px){ #SIDEMAP{display:none;} } @media screen and (max-width: 768px) { #SIDEMAP{display:none;} } @media screen and (max-width: 1024px) { } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1600px) { #HEAD {background:url(../images/V2_img2.jpg);height:350px;width:100%; background-repeat:no-repeat;background-size: cover;background-position:center; padding-top:150px;text-align:center;} #HEAD .title {font-size:3rem;font-weight:bold;z-index:10} #LEFT{padding-left:20%;} #LEFT .detail{position: fixed; left: 0; top: 65%; margin-top: -2.5em; height:auto;line-height:30px;padding-left:20%;} #LEFT dl {font-size:1.2em;} #LEFT dl > dd {font-size:1.0em;} #LEFT dl > dl dd{font-size:1.0em;} }