@media screen, projection{
html {width: 100%; height:100%;}
body {color: #666; text-decoration: none; font-family: "微軟正黑體", Verdana, Times, Georgia, PMingLiU, '新宋体', NSimSun, serif; font-size: 63%; line-height: 170%; margin: 0; width: 100%;}
a:link		{text-decoration: none; color: #22548d;}
a:visited	{text-decoration: none; color: #22548d;}
a:hover		{text-decoration: none; color: #000;}
a:active	{text-decoration: none; color: #22548d;}
hr {border-top: dotted 1px #aaa;}
hr.lineSolid {border-top: solid 1px #e5e5e5;}
#wrapper {width: 100%; min-width: 1035px;	height: auto; box-sizing: border-box; padding-right: 35px; clear: both;}
#quickLink {width: 35px; height: 100%; background: #17345e; position: fixed; z-index: 50; right: 0; top: 0; font-size: 12px; line-height: 150%;}

@media screen and (max-width: 1035px) {
	#quickLink {display: none;}
  .header-right-uship-animation {right: 0px !important;}
}

#quickLink a, #quickLink a:hover {color: #fff;}
#quickLink a span {display: inline-block; text-align: center; margin: 0; min-height: 35px; width: 35px; background-image: url(/images/icon/quickLink.png); background-repeat: no-repeat;}
#quickLink a span:hover {background-color: #00a6e9;}
#quickLink .w6 + .tooltip > .tooltip-inner {width: 102px;}
#quickLink .w9 + .tooltip > .tooltip-inner {width: 138px;}
#quickLink a span.ushipTooltipConf {background-image: url(/images/upload/uship_tooltip_icon.png);}

.mainContent {width: 1000px; margin: 0 auto; font-size: 13px; overflow: hidden;}
.rightContent {width: 785px; margin-left: 215px; line-height: 150%; overflow: hidden;}
.leftContent {width: 200px; margin-right: 15px; float: left;}
.pagePicDiv {box-sizing: border-box; width: 100%; min-width: 1035px; height: 150px; padding-right: 35px; background-repeat: no-repeat; background-position: center center; }
.pagePicDiv h2 {margin: 0 auto; width: 1000px; text-align: right; color: #fff; font-size: 36px; font-weight: normal; line-height: 150px; letter-spacing: 0.5em; }
.route {box-sizing: border-box; border-bottom: solid 1px #d9d9d9; padding: 7px 5px 5px 20px; padding: 10px 5px 10px 20px\0; margin-bottom: 20px;	background-image: url(/images/icon/home.gif); background-repeat: no-repeat; background-position: left center;}
.goto {margin: 10px 0; padding: 5px; text-align: center; border-top: 3px solid #cbd8e4; line-height: 150%; clear: both; }
.goto a {border: solid 1px #7a9dbe; display: inline-block; padding: 0 6px; padding-bottom: 2px\0; margin: 10px 2px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.goto a:hover,.goto a.sel {background-color: #7a9dbe; color: #fff;}
.goto .goLeft,.goto .goRight,.goto .goTop {background-repeat: no-repeat; font-weight: bolder; border: none; }
.goto .goLeft:hover,.goto .goRight:hover,.goto .goTop:hover{ background-color: rgba(0,0,0,0); color: #7a9dbe;}
.goto .goLeft {background-image: url(/images/icon/goLeft.gif); background-position: 0 center; margin-right: 30px; padding-left: 25px; }
.goto .goRight {background-image: url(/images/icon/goRight.gif); background-position: right center; margin-left: 30px; padding-right: 25px; }
.goto .goTop {background-image: url(/images/icon/goTop.gif); background-position: 0 center; margin-right: 0; padding-left: 25px; }
.putCenter {text-align: center;}
.putRight {text-align: right;}
.putLeft {width:100%; height:auto; display:inline-block;}


.ghostBtn {display: inline-block; padding: 7px 10px; font-size: 16px; line-height: 150%; border: solid 1px #8ba4c1; border-bottom-width: 3px;}
.ghostBtn:hover {background: #fff; color: #22548d;}
.btn_org:link {background: #999; padding: 2px 5px; padding: 0 5px 3px 5px\0; color: #fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; display: inline-block;}
.btn_org:visited {background: #999; color: #fff;}
.btn_org:hover {background: #e37216; color: #fff;}
.btn_org:active {background: #999; color: #fff;}
.form-group {font-size: 14px;}
.btn-lg {-webkit-box-shadow: 0 3px 0 0 rgba(0,0,0,0.25); box-shadow: 0 3px 0 0 rgba(0,0,0,0.25);}
.site-header-container {min-width: 1035px;}
body.index .site-header-container {background-color: #17345e;}
.header-container { width: 1010px; height: 100px; margin: 0 auto;}
.header-left-section {float: left; width: 600px; height: 100px;}
.header-right-section {float: right; width: 410px; height: 100px;}
.header-left-upper-section {width: 100%; height: 50px;}
.header-ucf-logo-section {float: left; width: 224px; height: 41px; margin-top: 9px; background-repeat: no-repeat; background-image: url(/images/logo.gif);}
body.index .header-ucf-logo-section {background-image: url(/images/upload/ucf_logo_161109.png);}
.header-ucf-logo-section a {display: block;width: 100%; height: 100%;}
.header-site-search-section {float: right; width: 217px; height: 30px; margin-top: 20px; margin-right: 35px;}
.header-left-lower-section {width: 100%; height: 50px;}
.header-right-upper-section {width: 100%; height: 50px; position: relative;}
.header-right-lower-section {width: 100%; height: 50px;}
.header-uship-text {width: 93px; height: 30px; float: right; margin-top: 5px; padding-left: 4px; text-align: center;}
.header-uship-text span {font-size: 13px; color: #333; letter-spacing: -1px;}
body.index .header-uship-text span {color: white;}
.header-right-uship-animation {position: absolute; width: 93px; height: 38px; top: 15px; right: 0px;}
.header-right-uship-animation a {display: block; width: 100%; height: 100%; background-image: url(/images/upload/uship_animation_transparent.gif); background-repeat: no-repeat;}
body.index .header-right-uship-animation a {background-image: url(/images/upload/uship_animation_transparent.gif);}

#subMenu {padding-top: 10px;}
#subMenu h2 {font-size: 13px; font-weight: normal; color: #2f6594; line-height: 150%; margin: 0; border-bottom: solid 4px #b9bfc4; position: relative;}
#subMenu h2 strong {font-family: "微軟正黑體"; font-size: 18px; color: #333; font-weight: normal; display: inline-block; padding-bottom: 5px;}
#subMenu h2 img {position: absolute; bottom: 1px; right: 5px;}
#subMenu h3 {margin: 0; padding: 0; font-size: 15px; line-height: 180%; background-color: #fff; border-bottom: solid 1px #e7e7e7; border-right: solid 1px #e7e7e7; border-left: solid 1px #e7e7e7;}
#subMenu h3 a {padding: 8px 10px;color: #666; display: block; width: 100%;}
#subMenu h3:hover a,#subMenu h3.sel a {color: #fff; text-decoration: none;
	background: #285d89; /* Old browsers */
	background: -moz-linear-gradient(top,  #285d89 0%, #508fc2 75%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#285d89), color-stop(75%,#508fc2)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #285d89 0%,#508fc2 75%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #285d89 0%,#508fc2 75%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #285d89 0%,#508fc2 75%); /* IE10+ */
	background: linear-gradient(to bottom,  #285d89 0%,#508fc2 75%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#285d89', endColorstr='#508fc2',GradientType=0 ); /* IE6-9 */
}

#subMenu .secondMenu {border: solid 1px #e7e7e7; border-top: none; padding: 0 5px; position: relative; font-size: 14px; background: #f1f5f9; }
#subMenu .secondMenu li {border-top: dotted 1px #ccc; padding: 0; margin: 0; margin-top: -1px;}
#subMenu .secondMenu li a:link {display: block; color: #333; background-image: url(/images/icon/arrowBlue01.gif); background-repeat: no-repeat; background-position: 175px center; padding: 9px 5px 9px 10px; }
#subMenu .secondMenu li a:visited {color: #333;}
#subMenu .secondMenu li a:hover {color: #22548d;}
#subMenu .secondMenu li a:active {color: #333;}

.btnW200 {margin-top: 10px;}
.btnW200 img {width: 100%; height: auto; border: solid 1px #e5e5e5;}
.btnW200 a {margin-bottom: 10px; display: block;}

footer {width: calc(100% - 35px); min-width: 1035px; background-image: url(/images/bgFooter1.gif); background-position: center center; }
footer .content {width: 1000px; margin: 0 auto; padding: 25px 0; overflow: hidden; background-image: url(/images/bgFooter2.jpg); background-position: top center;}
footer ul.webSite {float:left; box-sizing:border-box; width:120px; padding:0px; margin:0px;}
footer ul.webSite:nth-child(2) {margin-left:5px;}
footer ul.webSite:nth-child(2) > li:nth-child(8), footer ul.webSite:nth-child(2) > li:nth-child(9) {width: 175px;}
footer ul.webSite:nth-child(4) {margin-left:10px;}
footer ul.webSite li { font-size: 13px; color: #fdfdbe; overflow: hidden; }
footer ul.webSite li:first-child {margin: 2px 0 7px 0; height:20px;}
footer ul.webSite a:link    { display: inline-block; width:100%; height:20px; margin: 2px 0; font-size: 12px; color: #fff;}
footer ul.webSite a:visited { color: #fff;}
footer ul.webSite a:hover   { color: #fdfdbe;}
footer ul.webSite a:active  { color: #fff;}
footer .other {float: right; width: 490px; font-size: 12px; color: #89a7c4; overflow: hidden;}
footer .other .input-group {margin: 0 8px 0 10px; width: 290px; float: left;}
footer .other .col-md-3 {padding: 0 0 0 10px; margin: 10px 0;}
footer a.footer-line-square, 
footer a.footer-fb-square, 
footer a.footer-pixnet-square, 
footer a.footer-youtube-square,
footer a.footer-ig-square {display: inline-block; width: 34px; height: 34px; transition: all 0.3s ease-in-out; background-size:cover;}

footer a.footer-line-square 		{background-image: url('/images/icon/line_square.png?v=1.0.1');}
footer a.footer-line-square:hover 	{background-image: url('/images/icon/line_square_active.png?v=1.0.1');}
footer a.footer-fb-square 			{background-image: url('/images/icon/fb_square.png?v=1.0.1');}
footer a.footer-fb-square:hover 	{background-image: url('/images/icon/fb_square_active.png?v=1.0.1');}
footer a.footer-pixnet-square 		{background-image: url('/images/icon/pixnet_square.png?v=1.0.1');}
footer a.footer-pixnet-square:hover {background-image: url('/images/icon/pixnet_square_active.png?v=1.0.1');}
footer a.footer-youtube-square 		{background-image: url('/images/icon/youtube_square.png?v=1.0.1');}
footer a.footer-youtube-square:hover{background-image: url('/images/icon/youtube_square_active.png?v=1.0.1');}
footer a.footer-ig-square 			{background-image: url('/images/icon/ig_square.png?v=1.0.1');}
footer a.footer-ig-square:hover 	{background-image: url('/images/icon/ig_square_active.png?v=1.0.1');}

.theBanner {position: relative; overflow: hidden;}
.theBanner > img {width: 100%; height: auto; border: solid 1px #ccc;}
.theBanner:hover .stuff {opacity: 1.0;}
.theBanner .stuff {width: 93%; height: 100%; padding: 0; opacity: 0; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; background: rgba(255, 255, 255, 0.75); position: absolute; top: 0; }
.theBanner .stuff .verticalAlign {width: 100%; height: 24px; margin-bottom: -15px; position: absolute; bottom: 50%; text-align: center;}
.theBanner .stuff .verticalAlign a {display: inline-block; margin: 0 1px;}

.language-switch-section {float: left; width: auto; height: auto;  margin-top: 30px;}
.language-switch-section > div {display: inline-block;}
.language-switch-section > div:first-child a {border-right: 1px solid #ffffff;} 
a.language-link {display:inline-block;width:60px;height:15px;font-size:13px;text-align:center; color: #fff; transition: all 0.4s ease-in-out;}
a.language-link {color: #333;}
a.language-link:hover {color: #22548d;}
body.index a.language-link {color: #fff;}
body.index a.language-link:hover {color: #fff477;}
}