/***** 2023 蝮賜絞蝘飛??*******/ body, div, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, button, textarea, p, blockquote, th, td { margin: 0;padding: 0;} img {border: 0;} :focus {outline: 0;} h1, h2, h3, h4, h5, h6 {font-size: 100%;font-weight: normal;} input, button, textarea, select, optgroup, option {font-family: inherit;font-size: inherit;font-style: inherit;font-weight: inherit;} code, kbd, samp, tt {font-size: 100%;} /*purpose To enable resizing for IE */ /*branch For IE6-Win, IE7-Win */ /* input*/ button, textarea { -webkit-appearance: none; /* Safari 嚙踝蕭嚙?Chrome?蕭?蕭?蕭銌迺OS??摰蕭?蕭?寥?蕭嚙踝蕭 */ -moz-appearance: none; /* FireFox */ appearance: none;} ol, ul, li {list-style: none;} :link, :visited , ins {text-decoration: none;} blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;} /*HTML5 tag*/ section, article, aside, footer, header, nav, main {display:block;} /*HTML5 display-role reset for older browsers*/ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;} ol, ul {list-style: none;} blockquote, q {quotes: none;} blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;} table {border-collapse: collapse; border-spacing: 0;} /*general*/ html, body {height: 100%;width: 100%;} body {background:#fff; color:#2e2d2b; font:16px "Calibri","Microsoft JhengHei","Apple LiGothic"; margin:0;line-height: 28px; width:100%; cursor:default;} div , p , table {padding:0; margin:0; width: 100%; float:left;} p {margin:5px 0 10px;} span {} /*title*/ h1 {font-size:36px; line-height:38px; color:#2e2d2b; font-weight:bold; padding:0px 0 0px 40px; margin:10px 0 20px; width:calc(100% - 40px); float:left; background: url(graphics/h1.png) left top no-repeat; background-size:35px;} h2 {font-size:28px; line-height:38px; color:#7a93cb; font-weight:bold; margin:10px 0 10px; width:100%; float:left; /*text-shadow: -1px -1px #fff, 1px 1px #333;*/} h3 {font-size:22px; line-height:28px; color:#635e5a; font-weight:bold; margin:10px 0 10px; width:100%; float:left; /*text-shadow: 0.1em 0.1em 0.2em #2e2d2b;*/} h4 {font-size:24px; line-height:30px; color:#4a4542; font-weight:bold; margin:10px 0 10px; width:100%; float:left;} h5 {font-size:22px; line-height:28px; color:#635e5a; font-weight:bold; margin:5px 0; width:100%; float:right;} h6 {font-size:20px; line-height:28px; color:#2e2d2b; font-weight:bold; margin:5px 0px; width:100%; float:left; text-align:right;} /*link*/ a {color: #4a4542;-webkit-transition: color .5s, background .5s;transition: color .5s, background .5s;cursor:pointer;} a:hover {color:#a49f9c;} a img {opacity: 1;} a img:hover {opacity: .8;-webkit-transition: opacity .5s;transition: opacity .5s;} img:hover {opacity: .8;-webkit-transition: opacity .5s;transition: opacity .5s;} .logoimg a img:hover , #company-logo a img:hover , #header-slider img:hover , #foot-greeting img:hover , #slidepic li img:hover {opacity: 1;} .printer , hr {display:none;} /*ul*/ ul {width:100%;float:Left;} ul li {margin:0 5px;} .download {margin:10px 0 0;} .download li {margin:0;} .download li a {width:140px; color:#fff; padding:2px 15px 5px; margin:0 calc(50% - 85px); text-align:center; float:Left; background: #4a4542; border:1px solid #4a4542; border-radius:5px;} .download li a:hover {background: #a49f9c; border:1px solid #4a4542;} #maincontent-body .download li a img {width:25px; border:none; position:relative; top:5px; margin:0 5px 0 0; box-shadow:none;} /*iframe img*/ iframe {margin: 10px 0;max-width: 100% !important; width: 100%; height:450px;} img {height: auto ; max-width: 100%; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);} #maincontent-body img {height: auto ; max-width: calc(100% - 10px); border:5px solid #fff; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);} .logoimg a img , #company-logo img , #flash-box img , #foot-greeting img , .contact-text img , #homecontent img , #home-hbox-2915 img {box-shadow:none; } /*input*/ input, textarea {padding:5px 5px;float:left; border:1px solid #4a4542; border-radius:5px;} input[type="submit"], input[type="button"] {width:calc(100% - 12px);color:#fff; background: #4a4542; cursor: pointer;-webkit-transition: background .5s;transition: background .5s;} input[type="submit"]:hover , input[type="button"]:hover {color:#fff; background: #a49f9c; border:1px solid #4a4542;} input[type="radio"] , input[type="checkbox"] {margin:5px 5px 5px 0;width:15px;height:15px;} /*All Pagination*/ .pageselection {} .pageselection ul {width:100%;float:left;text-align:center;margin:20px 0 45px;} .pageselection ul li {display:inline-block; list-style:none; margin:5px 15px;} .pageselection ul li.activepage a {background:#4a4542; color:#ffffff; padding:5px 8px;} .pageselection ul li.activepage a:hover {background: #fff; color: #4a4542;} .pageselection ul li.page-word , .pageselection ul li.next {display:none;} #albumdetail .pageselection ul li {width:auto ; padding:0; float:none; background:none;} /*frame layout*/ #artboard {min-height: 100%; position:relative; background: url(graphics/bg.jpg) center top no-repeat; background-size:100%; background-attachment: fixed;} #artboard-body {} #artboard-inner {} #artboard-end {} #bodypages697743 #artboard {background: url(graphics/bg4.jpg) center top no-repeat; background-size:100%; background-attachment: fixed;} #bodypages36907 #artboard {background: url(graphics/bg2.jpg) center bottom no-repeat; background-size:100%; background-attachment: fixed;} #bodypages36908 #artboard {background: url(graphics/bg1.jpg) center bottom no-repeat; background-size:100%; background-attachment: fixed;} #bodypages36909 #artboard {background: url(graphics/bg3.jpg) center bottom no-repeat; background-size:100%; background-attachment: fixed;} .bodypage49950 #artboard {background: url(graphics/bg7.jpg) center top no-repeat; background-size:100%; background-attachment: fixed;} .bodypage49944 #artboard , .bodypages36905 #artboard , .bodypage49959 #artboard {background: url(graphics/bg8.jpg) center top no-repeat; background-size:100%; background-attachment: fixed;} #bodypages697740 #artboard {background: url(graphics/bg8.jpg) center top no-repeat; background-size:100%; background-attachment: fixed;} /*header*/ #header {} #header-body {} /*greeting*/ #greeting {width:1180px; margin:0 calc(50% - 590px); display:none;} /*content*/ #content {} /*mainside*/ #mainside {width:1180px; padding:15px calc(50% - 590px) 0; /*background:rgba(255, 255, 255, 0.5);*/} /*hbox-2911*/ #hbox-2911 {width:calc(100% - 300px); margin:15px 0 0; float:right;} #hbox-2911 .hbox-title {display:none;} #hbox-2911 .hbox-body {text-align:right; color:#fff;} #hbox-2911 .hbox-body a {color:#fff; font-size:20px; font-weight:900; padding:5px 25px; background: #4a4542; border:1px solid #4a4542; border-radius:5px; box-shadow: 0px 0px 8px rgba(255, 255, 255, 0.3);} #hbox-2911 .hbox-body a:hover {background: #a49f9c; border:1px solid #4a4542;} /*company-logo*/ #company-logo {width:250px; margin:0 0;} #company-logo .hbox-title {display:none;} #company-logo a {width:100%; float:left;} /*mainmenu*/ #mainmenu {width:calc(100% - 300px); margin:75px 0px 0 50px;} #mainmenu ul {width:auto; float:right;} #mainmenu ul li {float:left; margin:0 0; text-align:right;position:relative;} #mainmenu ul li > a {float:left; width:calc(100% - 40px); font-size:20px; padding:20px 20px 20px; line-height: 20px; color:#4a4542; /*text-shadow: -1px -1px #fff, 1px 1px #a49f9c;*/ font-weight:900; /*background: url(graphics/menu.png) center top 5px no-repeat; background-size:25px;*/} /*深底白字 menu #home #mainmenu ul li > a {color:#fff; text-shadow:none; background: none;} */ #mainmenu ul li:hover > a {/*color:#a49f9c;*/color:#fff; /*text-shadow: -1px -1px #fff, 1px 1px #333;*/ text-shadow:none; background:#a49f9c /*url(graphics/menu-h.png) center top 5px no-repeat; background-size:25px;*/} /*深底白字 menu #home #mainmenu ul li:hover > a {color:#a49f9c; text-shadow:none; background: none;} */ #mainmenu ul li#menu49943 {display:none;} /*2nd and more Level Main Menu */ #mainmenu ul li > ul {position:absolute; width:100%; display:none; top:60px; left:-40px; box-shadow: 0 0 10px rgba(255,255,255,.5);} #mainmenu ul li#menu49953 > ul {left:-50px;} #mainmenu ul li#menu49954 > ul {left:-60px;} #mainmenu ul li:hover > ul { background:rgba(0, 0, 0, 0.7); display: block; padding:0; width:200px; margin:0 0 0 20px; z-index:99;} #mainmenu ul li ul li {width:100%; text-align:center; padding:0px; margin:0;} #mainmenu ul li ul li a {display:block; padding:15px 15px; width:calc(100% - 30px); color:#fff; background:none; font-size:18px; line-height: 24px; text-align:center; border-bottom:1px solid rgba(164,159,156,.8);} #mainmenu ul li ul li a:hover , #mainmenu ul li ul li:hover a , #mainmenu ul li ul li ul li a:hover , #home #mainmenu ul li ul li:hover > a {color:#fff; background:none;} #mainmenu ul li ul li:hover {color:#fff !important; background:rgba(164,159,156,.7);} #mainmenu ul li ul li > ul {display:none; top:0; left:-220px;} #mainmenu ul li ul li:hover > ul { background:rgba(0, 0, 0, 0.7); display: block; padding:0; width:200px; margin:0 0 0 20px; z-index:99;} /*maincontent*/ #maincontent { width:1160px; padding:0; margin:20 calc(50% - 590px); background:rgba(255, 255, 255, 0.7); border:10px solid #fff; border-radius:5px; } #maincontent-body {width:calc(100% - 60px);padding:30px 30px 0; margin:0; min-height: 60vh;} #home #maincontent { width:100%; margin:0; padding:0; background:none; border:none; } #home #maincontent-body {width:100%; padding:20px 0px 30px; min-height: auto;} .main-body {text-align:justify;} /*header-slider*/ #header-slider {display:none;} /*secondside*/ #secondside {} /*foot-greeting*/ #foot-greeting {} #foot-greeting-body {width:1180px; margin:15px calc(50% - 590px);text-align:center;} /*htop*/ .htop {width:50px; height:50px; background:rgba(0 , 0, 0, 0.5); border-radius:50%; position:fixed; right:15px; bottom:15px; box-shadow: 0 0 10px #a49f9c;} .htop a {width:35px; margin:12px 7.5px 0; float:left;} /*copyright*/ .copyright {width:800px; padding:0 calc(50% - 400px); font-size:12px; color:#4a4542;} /*#home .copyright {color: white;}*/ .copyright a {width:200px; float:left; margin:0px 20px 0px 0;} .copyright a img[alt="國科會1"] , /*#home .copyright a img[alt="國科會1"] {display:block;}*/ /*#home .copyright a img[alt="國科會2"] , .copyright a img[alt="國科會1"] {display:none;}*/ .copyright span {width:calc(100% - 220px); float:left; text-align:left; margin:10px 0 0;} #home .copyright span {margin:10px 0 0;} /*footer*/ #footer {display:none;} /*main-link*/ .main-subtitle , .linkbutton , #Quick-Reply {display:none;} .main-line {margin:10px 0 5px;border-top:1px solid #fff;} /*articlelist*/ .articlelist {} /*articledetail*/ #articledetail {} /*albumlist*/ #albumlist {} #albumlist table {margin:10px 0 0;} #albumlist table tr {} #albumlist table tr td {width:calc(25% - 30px); padding:0 15px 15px; float:left; text-align:center;} #albumlist table .main-title {margin:0;} #albumlist table h2 {margin:0 0 10px; text-shadow:none;} #albumlist table h2 span span {color:#635e5a; font-size:20px; line-height:32px; text-align:center;} #albumlist table h2 span div {color:#4a4542; font-size:22px; margin:0;} .ablistdate {display:none;} /*albumdetail*/ #albumdetail {padding:0 0 30px; text-align: justify;} #albumdetail h1 {display:None;} #albumdetail .main-title h2 {font-size:36px; color:#2e2d2b; font-weight:bold; padding:0px 0 0px 40px; margin:10px 0 20px; width:calc(100% - 40px); float:left; background: url(graphics/h1.png) left top no-repeat; background-size:35px; text-shadow:none;} #albumdetail .main-title h2 span {font-size:32px; margin:0; } #albumdetail .main-title h2 span div {display:none;} #albumdetail ul li {width:calc(100% - 15px); padding:0 0 0 15px; float:Left; background: url(graphics/dot1.jpg) left top 12px no-repeat; background-size:5px;} .album-list-table {margin:20px 0 0;} .album-list-table tr {} .album-list-table tr td {width:calc(25% - 30px); padding:0 15px 30px; float:left; text-align:center;} .albumimg {width:100%; padding:0; margin:0;} #albumdetail ul.albumimg li {width:calc(50% - 10px); float:left; padding:0; background:none;} .albumimg li img {margin:0; width:calc(100% - 10px) !important; height:auto; border:5px solid #fff !important; } .bodypage49950 .album-list-table tr td , .bodypage49960 .album-list-table tr td {width:100%; padding:0 0 30px;} .bodypage49950 #albumdetail .main-body, .bodypage49960 #albumdetail .main-body {width:calc(100% - 280px);} .bodypage49950 #albumdetail .main-body:last-child, .bodypage49960 #albumdetail .main-body:last-child {width:250px; margin:0 0 0 30px; float:right;} /*product-list-ad*/ .product-list-ad {display:None;} /*product_list*/ #product_list {} #product_list table {} #product_list table tr {} #product_list table tr td {width:calc(25% - 30px);padding:0 15px 15px;float:left;} /*product_detail*/ #product_detail {} #product_detail h1 {display:None;} #product_detail .main-title h2 {font-size:32px; line-height:38px; color:#fff; font-weight:bold; padding:0 0 20px;margin:20px 0; width:100%; float:left;background: url(graphics/h1.png) left bottom no-repeat;} #product_detail .main-title h2 span {font-size:32px; margin:0; } /*pop window*/ body div#lbOverlay {} body div#lbMain {top:5vh !important; bottom:5vh !important;left:5% !important; right:5% !important; width:90% !important;height:90vh !important;} body div#lbOuterContainer {left:calc(50% - 425px) !important; right:calc(50% - 425px) !important; width:850px !important; height:500px !important;/*left:5% !important; right:5% !important; width:90% !important;height:85vh !important;*/ padding:0 !important; margin:0 !important; } body div#lbImageContainer, #lbIframeContainer, #lbInfoDisplay {width:calc(100% - 20px) !important;padding: 10px !important; height:calc(100% - 20px) !important;} body div#lbImageContainer img {max-width:100% !important; max-height:100% !important; width:auto;} body div#lbDetailsContainer {width:850px !important; height:auto !important; /*width:90% !important;*/ padding:0 !important; margin:0 calc(50% - 425px); /*margin:0 5% !important;*/height:6vh !important;} body div#lbDetailsData {width:90% !important; padding:0 !important; margin:0 5% !important;} body div#lbDetails { width: 50% !important;} body div#lbCaption { width:calc(100% - 20px) !important; margin:0 10px !important;} body div#lbNumberDisplay {width:calc(100% - 20px) !important; margin:0 10px !important;} body div#lbBottomNav {width: 50% !important;padding:0 !important; margin:0 !important;} body div#lbBottomNav a#lbClose {margin:0 10px;width: 70px !important; height: 30px !important;} body div#lbBottomNav a#lbPlay , body div#lbBottomNav a#lbPause {margin:0 10px;width: 70px !important; height: 30px !important;} body div#lbBottomNav a#lbResize {margin:0 10px;width: 70px !important; height: 30px !important;} /*home*/ #homecontent {display:None;} /*home-hbox-2915*/ #home-hbox-2915 { width:1180px; padding:30px calc(50% - 590px) 0; color: #4a4542; background: rgba(255, 255, 255, 0) ; background: -webkit-linear-gradient(to right, rgba(255, 255, 255, .6) , rgba(255, 255, 255, .1) ); background: linear-gradient(to right, rgba(255, 255, 255, .6) , rgba(255, 255, 255, .1) ); text-align:justify; } #home-hbox-2915 .home-hbox-title {display:None;} #home-hbox-2915 h1 {width:calc(100% - 275px); padding:0px 0 0px; margin:130px 0 15px 0; float:right; color: #4a4542; background:none; text-align:left;} #maincontent-body #home-hbox-2915 img {width:250px; margin:0 25px 0 0; float:left; border:none;} #home-hbox-2915 p {width:calc(100% - 275px); float:right;} /*home-hbox-2916*/ #home-hbox-2916 { width:1180px; padding:30px calc(50% - 590px) 0; background: linear-gradient(to bottom, rgba(255, 255, 255, .4) , #bbd3d5); } #home-hbox-2916 h1 {/*color:#fff;*/ background:none; padding:0; text-align:center;} #home-hbox-2916 .home-hbox-title {text-align:center; font-size:36px; line-height:38px; color:#2e2d2b; font-weight:bold; padding:0; margin:10px 0 20px; width:100%; float:left;} #home-hbox-2916 .home-hbox-body {margin:15px 0;} .ablist49960 {} .ablist49960 li {width:calc(50% - 50px); padding:0 15px; margin:0 10px 25px; float:left; text-align:center;} #artboard ul.ablist49960 li h2 {color:#635e5a; /*color:#fff;*/ text-shadow:none; font-size:20px; margin:5px 0 0; text-align:center;} #artboard ul.ablist49960 li div {margin:0; } #artboard ul.ablist49960 li div h2 {color:#7a93cb; font-size:24px; margin:0; text-shadow: 0.1em 0.1em 0.2em #2e2d2b;} #artboard #home-hbox-2916 ul.ablist49960 li div h2 {color:#635e5a; font-size:24px; margin:0; text-shadow: none;} /* 新增 -kc */ .ablist49960 li img { width: 70% !important; height: auto !important; object-fit: contain; max-height: 400px; display: block; margin: 0 auto; background-color: #FFFFFF; } /* 新增 圖片和文字置中 -kc */ .ablist49960 li td { text-align: center; padding: 0; /* 移除 td 可能帶有的預設 padding */ } /* 新增 圖片和文字容器內有其他元素，也確保它們置中 -kc */ .ablist49960 li h2 { text-align: center; } /*home-hbox-2912*/ #home-hbox-2912 { width:1180px; margin:0; padding:20px calc(50% - 590px) 30px; background:rgba(255, 255, 255, 0.7); border-top:10px solid #fff; border-bottom:10px solid #fff; background: #bbd3d5; } #home-hbox-2912 .home-hbox-body {height:400px; overflow-y:scroll;} #home-hbox-2912 .home-hbox-body::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);background-color: #4a4542;} #home-hbox-2912 .home-hbox-body::-webkit-scrollbar {width: 10px; background-color: #4a4542;}/*?脰遘撖砍漲*/ #home-hbox-2912 .home-hbox-body::-webkit-scrollbar-thumb {background-color: #a49f9c;}/*?脰遘?祇?憿*/ #home-hbox-2912 h1 {width:300px; margin:10px calc(50% - 150px) 30px; text-align:center; filter: invert(14%) sepia(31%) saturate(1299%) hue-rotate(145deg) brightness(97%) contrast(95%);} #home-hbox-2912 .home-hbox-title {text-align:center; font-size:36px; line-height:38px; color:#2e2d2b; font-weight:bold; padding:0 0 0 40px; width:300px; margin:10px calc(50% - 170px) 30px; float:left; filter: invert(14%) sepia(31%) saturate(1299%) hue-rotate(145deg) brightness(97%) contrast(95%); background: url(graphics/h1.png) left top no-repeat; background-size:35px;} #artboard ul.ablist49950 {} #artboard ul.ablist49950 li {width:calc(25% - 50px); padding:0 15px; margin:0 10px 25px; float:left; text-align:center;} #artboard ul.ablist49950 li h2 {color:#635e5a; font-size:20px; margin:5px 0 0; text-shadow:none; text-align:center;} #artboard ul.ablist49950 li div {margin:0; } #artboard ul.ablist49950 li div h2 {color:#4a4542; font-size:22px; margin:0;} #artboard ul.ablist49950 li a {width:100%; float:left; text-align:center;} /* 新增以下，原本圖片排不齊 -kc */ #artboard ul.ablist49950 li img { height: 250px !important; object-fit: contain; display: block; margin: 0 auto; } /*About Presidential Science Prize*/ #articledetail697743 h1 {filter: invert(61%) sepia(3%) saturate(442%) hue-rotate(339deg) brightness(105%) contrast(89%);} #articledetail697743 h2 {text-align:Center;} .committee {width:800px; margin:0 calc(50% - 400px);} .committee tr {border-bottom:1px solid #a49f9c;} .committee tr:first-child , .committee tr:first-child:hover {background:#4a4542; color:#fff;} .committee tr td , .committee tr th {padding:5px 0; text-align:center; width:20%; float:Left;} .committee tr td:last-child , .committee tr th:last-child {width:60%;} .committee tr:hover {background:#a49f9c; color:#fff;} #articledetail697740 ul li {width:calc(100% - 15px); padding:0 0 0 15px; margin:0 0 10px; float:Left; background: url(graphics/dot1.jpg) left top 12px no-repeat; background-size:5px;} /*Winner*/ #bodypages36907 #albumdetail .main-title h2 {filter: invert(46%) sepia(9%) saturate(1423%) hue-rotate(238deg) brightness(89%) contrast(83%);} #bodypages36908 #albumdetail .main-title h2 {filter: invert(14%) sepia(31%) saturate(1299%) hue-rotate(145deg) brightness(97%) contrast(95%);} #bodypages36909 #albumdetail .main-title h2 {filter: invert(37%) sepia(93%) saturate(295%) hue-rotate(166deg) brightness(94%) contrast(91%);} /*SIDELIGHTS*/ #articledetail697739 h1 , .bodypage49959 #albumdetail .main-title h2 , .bodypages36905 #albumdetai .main-title h2 {filter: invert(21%) sepia(8%) saturate(539%) hue-rotate(329deg) brightness(95%) contrast(83%);} .ablist49959 {} .ablist49959 li {width:calc(50% - 50px); padding:0 15px; margin:0 10px 25px; float:left; text-align:center;} .ablist49959 li img {width:400px; margin:0 calc(50% - 200px);} #artboard ul.ablist49959 li h2 {color:#635e5a; font-size:22px; margin:5px 0 0; text-shadow:none; text-align:center;} /*NEWS*/ #articledetail697740 h1 {filter: invert(6%) sepia(8%) saturate(1135%) hue-rotate(326deg) brightness(101%) contrast(84%);} /*1280*/ @media screen and (max-width:1280px){ /*frame layout*/ #artboard {background: url(graphics/bg.jpg) center top no-repeat; background-size:auto 100%; background-attachment: fixed;} /*greeting*/ #greeting {width:calc(100% - 30px); margin:0 15px ; } /*content*/ #content {} /*mainside*/ #mainside {width:calc(100% - 30px); padding:15px 15px 0; } /*hbox-2911*/ #hbox-2911 {width:300px; margin:0; position:fixed; top:5px; right:10px; z-index:9999;} /*company-logo*/ #company-logo {width:250px; margin:30px calc(50% - 125px) 10px; } /*mainmenu*/ #mainmenu {width:100%; margin:0;} #mainmenu ul {width:100%} /*maincontent*/ #maincontent {width:calc(100% - 50px); margin:0 15px; } #maincontent-body {width:calc(100% - 30px); padding:15px 15px 0;} #home #maincontent-body {padding:0px 0px 0px;} /*foot-greeting*/ #foot-greeting-body {width:calc(100% - 30px); margin:15px 15px;} /*home-hbox-2915*/ #home-hbox-2915 {width:calc(100% - 30px); padding:30px 15px 0; } /*home-hbox-2916*/ #home-hbox-2916 {width:calc(100% - 30px); padding:30px 15px 0; } /*home-hbox-2912*/ #home-hbox-2912 {width:calc(100% - 30px); padding:20px 15px 30px; } /*frame layout*/ #bodypages697743 #artboard {background: url(graphics/bg4.jpg) center top 30px no-repeat; background-size:100%; background-attachment: fixed;} #bodypages36907 #artboard {background: url(graphics/bg2.jpg) center top 30px no-repeat; background-size:100%; background-attachment: fixed;} #bodypages36908 #artboard {background: url(graphics/bg1.jpg) center top 30px no-repeat; background-size:100%; background-attachment: fixed;} #bodypages36909 #artboard {background: url(graphics/bg3.jpg) center top 30px no-repeat; background-size:100%; background-attachment: fixed;} .bodypage49950 #artboard {background: url(graphics/bg7.jpg) center top 30px no-repeat; background-size:100%; background-attachment: fixed;} .bodypage49944 #artboard , .bodypages36905 #artboard , .bodypage49959 #artboard {background: url(graphics/bg8.jpg) center top 30px no-repeat; background-size:100%; background-attachment: fixed;} #bodypages697740 #artboard {background: url(graphics/bg8.jpg) center top 30px no-repeat; background-size:100%; background-attachment: fixed;} /*hamburger*/ .bx-pager {display:none;} .nav-header {position:fixed; z-index:9999 !important; float:left;} .mm-page {width:100%; float:left;} #hamburger {width:auto !important;} #hamburger:before, #hamburger:after, #hamburger span {position:relative; !important z-index:99999 !important; background:#fff !important; left:-2px !important;} .nav-header {background:#a49f9c !important; box-shadow: 0 0 10px rgba(149,185,211,.5);} } /*1000*/ @media screen and (max-width:1000px){ /*iframe img*/ iframe {height:350px;} /*albumlist*/ #albumlist table tr td {width:calc(50% - 30px); padding:0 15px 15px;} /*albumdetail*/ .album-list-table tr td {width:calc(50% - 30px); padding:0 15px 30px;} /*product_list*/ #product_list table tr td {width:calc(50% - 30px); padding:0 15px 15px;} /*home-hbox-2912*/ #artboard ul.ablist49950 li {width:calc(50% - 60px); padding:0 20px; margin:0 10px 25px;} /*About Presidential Science Prize*/ .committee {width:100%; margin:0;} /*pop window*/ body div#lbOuterContainer {left:5% !important; right:5% !important; width:90% !important;height:50vh !important; padding:0 !important; margin:0 !important; } body div#lbDetailsContainer {width:90% !important; padding:0 !important; margin:0 5% !important; height:15vh !important;} } /*799*/ @media screen and (max-width:799px){ /*iframe img*/ iframe {height:300px;} /*albumdetail*/ .albumimg li {width:100%; margin:0 0 15px;} #album-main-body36907 , #album-main-body36908 , #album-main-body36909 {width:150px; margin:0 0 0 15px;} #intro36907 , #intro36908 , #intro36909 {width:calc(100% - 165px);} /*home-hbox-2915*/ #home-hbox-2915 h1 {margin:100px 0 15px 0;} /*home-hbox-2916*/ .ablist49960 li {width:calc(100% - 30px); padding:0 15px; margin:0 0 25px;} } /*600*/ @media screen and (max-width:640px){ /*title*/ h1 {font-size:30px; line-height:34px; margin:10px 0 15px; } h2 {font-size:26px; line-height:32px; } h3 {font-size:24px; line-height:28px; } h4 {font-size:24px; line-height:28px; } h5 {font-size:22px; line-height:28px; } h6 {font-size:20px; line-height:28px; } /*iframe img*/ iframe {height:250px;} /*copyright*/ .copyright {width:100%; padding:0; line-height:20px;} .copyright a {width:200px; margin:0px calc(50% - 100px);} .copyright span {width:100%; margin:5px 0 0; text-align:center;} /*albumlist*/ #albumlist table tr td {width:100%; padding:0 0 15px;} /*albumdetail*/ #albumdetail .main-title h2 {font-size:30px; margin:10px 0 15px; } #albumdetail .main-title h2 span {font-size:28px; margin:0; } .album-list-table tr td {width:100%; padding:0 0 30px;} #album-main-body36907 , #album-main-body36908 , #album-main-body36909 {width:100px; margin:0 0 0 15px;} #intro36907 , #intro36908 , #intro36909 {width:calc(100% - 115px);} /* --- 修改開始 --- */ /* 原本的設定 (已註解) .bodypage49950 #albumdetail .main-body, .bodypage49960 #albumdetail .main-body {width:calc(100% - 115px);} .bodypage49950 #albumdetail .main-body:last-child, .bodypage49960 #albumdetail .main-body:last-child {width:100px; margin:0 0 0 15px; float:right;} */ /* 新的設定：改成單欄排版、文字靠左、圖片置中於下方 */ .bodypage49950 #albumdetail .main-body, .bodypage49960 #albumdetail .main-body { width: 100% !important; text-align: left !important; /* 解決文字被強制撐開的問題 */ } .bodypage49950 #albumdetail .main-body:last-child, .bodypage49960 #albumdetail .main-body:last-child { width: 100% !important; margin: 30px 0 0 0 !important; /* 上方增加距離 */ float: none !important; /* 取消浮動，讓圖片自然掉到下一行 */ text-align: center !important; /* 圖片置中 */ } /* 針對 .albumimg 圖片改為上下排列 */ #albumdetail ul.albumimg li { width: 100% !important; /* ★關鍵：寬度改為 100% (原本是 50%) */ float: none !important; /* 取消浮動 */ display: block !important; /* 強制換行 */ margin: 0 0 30px 0 !important; /* 增加每張圖下方的距離 */ padding: 0 !important; text-align: center !important; } /* 針對裡面的圖片 */ #albumdetail ul.albumimg li img { width: auto !important; max-width: 100% !important; /* 確保不超出螢幕 */ height: auto !important; margin: 0 auto !important; /* 圖片置中 */ display: inline-block !important; } /* --- 修改結束 --- */ /*product_list*/ #product_list table tr td {width:100%; padding:0 0 15px;} /*product_detail*/ #product_detail .main-title h2 {font-size:30px; line-height:34px; margin:10px 0 15px; } #product_detail .main-title h2 span {font-size:28px; margin:0; } /*home-hbox-2915*/ /* 修改前： #home-hbox-2915 h1 {width:calc(100% - 165px); margin:0px 0 15px 0;} */ /* 修改後：加入 float: none 和 text-align: left，並將寬度設為 100% */ #home-hbox-2915 h1 { width: 100%; margin: 0px 0 15px 0; float: none; text-align: left; } #maincontent-body #home-hbox-2915 img {width:100px; margin:0px 15px 0 0;} #home-hbox-2915 p {width:calc(100% - 115px); float:right;} /*About Presidential Science Prize*/ .committee tr:first-child {display:none;} .committee tr td , .committee tr th {width:100%; float:Left;} .committee tr td:first-child {background:#4a4542; color:#fff;} .committee tr td:last-child , .committee tr th:last-child {width:100%; padding:5px 0 20px;} /*SIDELIGHTS 修改前 .ablist49959 li {width:100%; padding:0 0 15px; margin:0 0px 25px;} */ /* 強制圖片置中並適應手機寬度 */ #artboard ul.ablist49959 li { width: 100% !important; float: left !important; /* ★關鍵：改回 left，讓它能撐開高度 */ clear: both !important; /* ★關鍵：強制換行，讓它變成單欄 */ margin-bottom: 25px !important; /* 現在這個距離就會正常生效了 */ padding: 0 !important; display: block !important; } .ablist49959 li img { width: auto !important; /* 取消電腦版的固定 400px */ max-width: 100%; /* 確保不超出螢幕 */ height: auto; display: block; /* 讓 margin: auto 生效 */ margin: 0 auto; /* 左右自動置中 */ } } /*440*/ @media screen and (max-width:440px){ /*albumdetail*/ #album-main-body36907 , #album-main-body36908 , #album-main-body36909 {width:100%; margin:0;} #intro36907 , #intro36908 , #intro36909 {width:100%;} /*home-hbox-2915*/ /* 修改前： #home-hbox-2915 h1 {width:calc(100% - 45px); margin:0px 0 15px 0;} */ /* 修改後： */ #home-hbox-2915 h1 { width: 100%; margin: 0px 0 15px 0; float: none; text-align: left; } #maincontent-body #home-hbox-2915 img {display:none;} #home-hbox-2915 p {width:100%;} /*home-hbox-2912*/ #artboard ul.ablist49950 li {width:100%; padding:0 0 15px; margin:0 0px 25px;} }