@charset "utf-8";
/* CSS Document */
body{background: url(../images/bgimg.jpg)no-repeat top center;}
.side{padding:0 0 0 1em;}
.main{padding:0 1em 0 0;}
.innerhtml{line-height:200%;}
.content{padding:0;}
/*nav*/
.nav{width:calc(100% - 50px); position:absolute; top:100%; right:0; transform:translateY(-100%); padding:0 10px 0 0;}
.nav ul li a{color:#333; font-size:16px; padding:1.5em 1.3em 1em 1.3em; font-weight: bold; cursor: pointer;}
.nav ul li:nth-last-of-type(1) a{padding-right:0.3em;}
.nav ul li:nth-of-type(1) a{padding-left:0.3em;}
.nav ul li a:hover{color:#fff; border-radius: 0.3em 0.3em 0 0;}
.nav ul li a.icon{padding-left:0.3em; padding-right:0.3em;}
.nav ul li a.hit{background:#7bb451; color:#fff; border-radius: 0.3em 0.3em 0 0;}
.nav ul li ul{background:#ccc; width:120px; left:50%; transform:translateX(-50%);}
.nav ul li ul li{padding:0.5em;}
.nav ul li ul li:hover{color:#f00;}
#header .page{padding:0px; position:relative; background:#fcb813; height:97px; z-index: 300;}
#header .page::after{content:""; display:block; clear: both; vertical-align: middle;}
#header.show{box-shadow: 0 5px 10px rgba(0,0,0,0.2);}
#header .ll, #header .rr{position:absolute; top:0; width:22px; height:140px;}
#header .ll{left:-22px; background:url(../images/header-l.png) no-repeat top right;}
#header .rr{right:-22px; background:url(../images/header-r.png) no-repeat top left;}
.logo{width:90px; padding:0 0 5px 10px;}
.toplogo{padding-top:.5em;}
.toplogo img{vertical-align: middle;}
.toplogo h4{margin:0; padding:0; font-size:24px; text-align: left; vertical-align: middle;}
.loginicon{text-align:right;}
.loginicon a{margin:0.3em; padding:0.3em 1em; background:#fff; color:#333; border-radius:1em; display:inline-block;}
.loginicon a:hover{background:linear-gradient(#333,#666,#333); color:#fff; box-shadow: 0 0 5px rgba(0,0,0,0.2);}
.pulldownlist{position:absolute; width:100%; height:auto; top:100%; background:#fff; box-shadow:0 10px 10px rgba(0,0,0,0.2); padding:1em; display:none;}
.pulldownlist.show{display:block;}
.pulldownlist ul{list-style: none; margin:0; padding:0; text-align:left;}
.pulldownlist ul li{font-weight:bold; padding:0.5em;}
.pulldownlist ul li h4{margin:0; border-bottom:1px solid #ccc; padding:0.5em 0; color:#239142;}
.pulldownlist ul li ul li{font-size:13px; color:#444; font-weight:normal; padding:0;}
.pulldownlist ul li ul li a{padding:0.3em; color:#666; display: block;}
.pulldownlist ul li ul li a:hover{background:linear-gradient(90deg,#efefef,#fff); color:#000;}
.pulldownlist ul li ul li a::before{content:"-"; color:#fff; padding-right:0.7em;}
.searchbar{color:#666; font-size:14px; padding-bottom:3px; padding-right:1em;}
.searchbar input{border:none; background:#efefef; padding:3px; width:12em;}
.searchbar a{color:#fff; background:#666; display:inline-block; border-radius:0 0.3em 0.3em 0; padding:3px; }
/*topblue*/
.topblue{ position:absolute;}
/*default use*/
#defaultimg{position:relative;}
#defaultimg .page{box-shadow: 0 10px 15px rgba(0,0,0,0.3); background:#fff;}
.dcontent{text-align:center; padding:3em 0;}
.dcontent hr{opacity:0;}
.dcontent a{display:inline-block; background:#fff20f; color:#000; padding:1em;  margin:1.5em 0.5em; font-size:20px; width:25%; box-shadow: 0 0 10px rgba(0,0,0,0.3); font-weight: bold; position:relative;}
.dcontent a.square{margin:1em; padding:1em; width:auto;}
.dcontent a.circle{padding:0; width:283px; height:283px; border-radius:100%; overflow: hidden; margin:1em; width:auto;}
.dcontent a::before{content:""; width:92%; height:76%; display:block; position:absolute; top:7%; left:3.5%; border:2px solid #fff;}
.dcontent a.circle::before{border-radius:100%; width:92%; height:92%; top:4%; display: none;}
.dcontent a.square::before{content:""; width:92%; height:88%; display:block; position:absolute; top:5%; left:3%; border:2px solid #fff;}
.dcontent a:nth-of-type(2){background:#0fa6ea;}
.dcontent a:nth-of-type(3){background:#f2a4c6;}
.dcontent a:nth-of-type(4){background:#90cc9d;}
.dcontent a:nth-of-type(5){background:#fff79f;}
.dcontent a:hover{transform:translateY(-5px); background:#fcb813;}
/*content*/
.hintform{width:100vw; height:100vh; position:fixed; top:0; left:0; background:rgba(255,255,255,0.7); z-index: 301; }
.hintform div{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display: block; width:50%; height:auto; text-align: center; background:#0fa6ea; border-radius:1em; padding:1em; line-height: 1.6em; box-shadow: 0 0 10px rgba(0,0,0,0.3);}
.hintform p.more a{display:inline-block; background:#fff100; border-radius:1em; padding:0.5em 2em; font-weight: bold; color:#000; box-shadow: 0 0 10px rgba(0,0,0,0.3);}
.hintform p.more a:hover{background:#333; color:#fff;}
.sidetit{color:#666; font-size:20px; margin-top:0;}
.normaltit{font-size:24px; margin-top:0;}

.pageshadow{background:linear-gradient()}
.content .page{background:rgba(255,255,255,1); padding:3%;}
.content  .page::after{content:""; display:block; clear: both; vertical-align: middle;}
.innerhtml{word-break:break-all;}
/*list*/
.list{padding:1em;}
.list h3.subject{font-weight:normal; margin:0; color:#666; padding:0.3em 0; font-size:18px; }
.list a{width:100%; diaplay:block; float:left; color:#666; padding:10px;}
.list a:hover{color:#014283; }
.list figure img{transition:.3s;}
.list a:hover img{transform:scale(1.05, 1.05);}

.list a:hover figcaption{opacity:1;}
.list figure{diaplay:block; line-height:0; overflow: hidden; position:relative;}
.list figure::before{content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(1,66,131,0); transition:.3s; opacity:0; z-index: 2;}
.list a:hover figure::before{opacity:1;}
.list figcaption{position:absolute; top:50%; left:50%; width:100%; height:auto; opacity:1; text-align: center; color:#fff;  z-index: 100; font-size: 14px; transition:.3s; transform:translate(-50%,-50%); line-height: 140%; opacity:0;}
.list a:hover figcaption{opacity:1;}
.list .more{text-align:right; margin:0; color:#666; font-size:16px;}
.list a:hover p.more{color:#f00;}
.list .path{font-size:16px; text-align:left; color:#ff9900; font-weight:bold;}
/*news*/
.list.news .innerhtml{font-size:14px;}
.list.news a:hover{background:#fff; box-shadow:0 10px 15px rgba(0,0,0,0.2); transform:translateY(-5px);}
.list.news section{padding-top:1em;}
.list.news h3.subject{ text-align:center; padding-top:0.5em; font-weight:bold;}
.list.news a:hover h3.subject{color:#000; }
.list.news .path{ text-align:center;}
.list.news .more{text-align:center;}
.list.news .more span{color:#ff9900; font-weight:bold; }
.list.sidelink{border-bottom:1px dotted #ccc;}
.list.sidelink a{padding:0;}
.list.sidelink a:hover h3.subject{color:#000;}
.list.sidelink .path{color:#ff9900; font-weight:bold; }
.list.sidelink .path span{color:#666; font-weight:normal;}
/*gallery*/
.list.gallery a{border:1px solid #ccc;}
.list.gallery a:hover{box-shadow:0 10px 15px rgba(0,0,0,0.3);}
/*link*/
.tableforlink{width:100%;}
.tableforlink td{width:140px; height:140px; verticle-align:middle;}
.tableforlink th{verticle-align:middle; text-align: left; font-size:18px;}
.tableforlink tr a {color:#666;}
.tableforlink tr:hover a{color:#ff9900;}
/*job*/
table.job{width:100%; font-size:14px;}
table.job th {border-bottom:1px solid #ccc; padding:1em 0;}
table.job td{padding:1em 0; text-align: center; cursor: pointer;}
table.job td:hover{color:#f00; background:#efefef;}
table.job .more a{display:inline-block; border-radius:1em; padding:2px 0.5em; background:#fff; box-shadow:0 0 10px rgba(0,0,0,0.3); color:#000;}
table.job .more a:hover {color:#000; background:#ffcc00;}
table.job input[type="text"],input[type="password"]{width:100%; border:none; border-bottom:1px solid #ccc;}
table.job .pr{text-align:left;}
.jobdetail{list-style:none; margin:0; padding:0;}
.jobdetail li{padding:0.5em 0; color:#000; font-weight:bold;}
.jobdetail li span{font-weight:normal; color:#363636;}
.jobdetail .ll{padding-right:1em;}
.jbodetail .rr{padding-left:0.5em;}
table.job.logintable{width:50%; font-size:16px;}
table.job.logintable th {border-bottom:none;}
table.job.logintable td:hover{color:#000; background:none;}
table.job.logintable .btn a{background:#dcdddd; color:#000; border-radius:.5em; box-shadow: none;}
table.job.logintable .btn a:hover{background:#333; color:#fff; text-decoration:none;}
table.job.logintable a{color:#f00;}
table.job.logintable a:hover{text-decoration:underline;}
/*company*/
.companyform .form{font-size:14px;}
.companyform .form div{padding:1em 0;}
.companyform .form input[type="text"]{width:calc(100% - 12em); display:inline-block;}
.quickmenu{margin:0 0 1em 0; padding:0; list-style: none;}
.quickmenu li{border:1px solid #efefef; border-bottom:none; border-radius:1em 1em 0 0; text-align: center; padding:0.3em; background:linear-gradient(#efefef,#fff); color:#666; cursor: pointer;}
.quickmenu li:hover{background:#fff; border:1px solid #ccc; border-bottom:none;}
.quickmenu li.hit{background:#fff; color:#f00; border:1px solid #ccc; border-bottom:none;}
/*調查form*/
.frm{margin:1em 0; border-top:1px dotted #ccc;}
.frm p{font-weight:bold;}
.frm div{font-size:14px; padding:0.3em;}
.frm input[type="text"]{width:100%; border:none; background:#efefef; padding:0.5em;}
/*exhibition*/

.exhibition .list a{border-radius:1em; background:#fff; vertical-align: middle; font-size:20px; font-weight:bold; max-width:16em; left:50%; position:relative; transform:translateX(-50%); box-shadow: 0 0 10px rgba(0,0,0,0.3);}
.exhibition .list a:hover{box-shadow:0 10px 15px rgba(0,0,0,0.3);}
.exhibition .list img{vertical-align:middle; transition:.3s;}


/*footer*/
#footer{font-size:16px; color:#000; background:#fcc51b; word-break: break-all; line-height:160%; padding:3em 1em; text-align:center;}


@media screen and (max-width:1286px){/*desktop*/
	#defaultimg .page{padding:0;}
	.toplogo h4{font-size:20px;}
	.nav ul li a{padding:1.5em 0.5em 1em 0.5em;}
	#header .ll, #header .rr{display:none;}
}
@media screen and (max-width:960px){/*desktop-small pad*/
	.toplogo{padding-top:0.5em;}
	.toplogo h4{font-size:18px;}
	.loginicon a{font-size:14px; margin-top:0.5em;}
	
	.nav ul li a{font-size:13px; padding:1em 0.5em 1.5em 0.5em;}
	.logo{padding-left:1%;}
	
}
@media screen and (max-width:767px){/*phone*/
	#header{position:fixed; top:0; left:0; z-index: 300;}
	#header .page{ height:auto;}
	
	.toplogo h4{font-size:14px;}
	.logo{width:90%; padding:0 0 5px 5px; vertical-align: middle; font-weight:bold;}
	.logo img{width:50px; height:auto; vertical-align: middle;}
	.pulldownlist.show{display:none;}
	.nav .loginicon{padding:1em 0; display:block; float:left; color:#fff;}
	.nav{position:static; transform:translateY(0); float:left; width:100%;}
	.nav ul li a{color:#ccc; padding:0.5em 0; font-size:14px;}
	.nav ul li{ border-bottom:1px solid #666;}
	.nav ul li ul{background:#ccc; width:100%; left:0%; transform:translateX(0%);}
	.search{text-align:left; background:#efefef; padding:1em 0;}
	.page{padding:0;}
	.side,.main{padding:1em;}
	table.job div{padding:0.2em 0;}
	table.job.logintable{width:100%;}
	.exhibition .list img{max-width:100px; height:auto;}
	/*dcontent*/
	.dcontent a{display:block; width:calc(100% - 2em); margin:1em 1em;}
	.dcontent a.circle{width:283px; display:inline-block;}
	.job .col-m12{text-align:left;}
}