/*main.css */
#footBox { width: 100%; height: 150px; margin-top: 100px; background-color: #f0f0f0; }

#footBox .footlink { width: 100%; height: 100px; text-align: center; padding-top: 40px; box-sizing: border-box; }

#footBox .footlink li { display: inline-block; position: relative; width: auto; height: auto; padding: 0 10px; margin-right: 0; box-sizing: border-box; }

#footBox .footlink li:after, #footBox .footlink li::after { content: " "; display: block; position: absolute; right: -3px; top: 0; bottom: 0; margin: auto; width: 0; height: 12px; border-right: 2px solid #999; }

#footBox .footlink li:last-child:after { display: none; }

#footBox .footlink li a { display: block; width: 100%; height: 100%; }

#footBox p { text-align: center; }

#headBox { width: 100%; height: 134px; padding-top: 20px; box-sizing: border-box; border-bottom: 1px solid #ddd; }

.headarea { position: relative; z-index: 100; width: 100%; height: 64px; padding-left: 20px; box-sizing: border-box; margin-bottom: 10px; }

h1 { float: left; width: 100px; height: 50px; margin-right: 10px; }

h1 a { display: block; width: 100%; height: 100%; background: url("../../img/big_portfolio-01.png") no-repeat 50% 50%/contain; }

h1 a:hover { outline: 0; transform: scale(1.1); }

.search { position: absolute; z-index: 100; left: 130px; top: 0; float: left; width: 500px; height: 40px; margin-top: 8px; margin-left: 20px; border: 1px solid #ddd; border-radius: 20px; background-color: #fff; transition: height 500ms ease; }

.search.action { height: 300px; cursor: pointer; box-shadow: 0 0 3px #ddd; }

.searchtext { float: left; margin-left: 4%; line-height: 40px; }

.searchtext > p { font-weight: bold; }

.searchlist { display: none; width: 100%; height: auto; margin-top: 10px; }

.searchlist li { width: 100%; height: auto; margin-top: 2px; line-height: 30px; }

.searchlogo { float: right; width: 10%; height: 100%; line-height: 40px; text-align: center; }

.searchlogo.action { font-size: 1.3rem; }

.gnb { width: 100%; height: 40px; /* background-color: #f0f0f0; box-shadow: 0 0 15px #ddd inset; */ }

.gnb ul { width: 100%; min-width: 1000px; height: 100%; /* &:before{content: " ";  position:absolute; left: 0; display: block; width: 100%; height: auto; border-top: $border; } */ }

.gnb ul li { float: left; width: auto; height: 100%; margin-right: 10px; }

.gnb ul li:first-child { margin-left: 140px; }

.gnb ul li a { display: block; width: auto; height: 40px; line-height: 40px; padding: 0 30px; }

.gnb ul li a:hover { font-weight: bold; color: #5479BC; }

.gnb ul li a:focus { font-weight: bold; color: #333; outline: none; font-size: 1.1rem; }

#wrap { width: 100%; min-width: 1000px; height: 100%; margin: auto; background-color: #fff; }

.gnb li:nth-child(6) a { font-weight: bold; color: #5479BC; }

.gnb li:nth-child(6):after { content: " "; display: block; width: 100%; height: 4px; background-color: #5479BC; margin-top: -3px; }

#contentBox { width: 100%; height: 100%; }