body,html {overflow-x: hidden;}
body {font: 400 100% 'Spoqa Han Sans', 'Sans-serif';}

/* Grid */
[class^='colspan'] {position: relative; margin: 0; float: left; line-height: 0;}
.colspan6 {width: 25%;}


#wrap {margin: 0; padding: 20px 0;}

#header {margin-bottom: 450px; padding: 120px 0; background: #fff;}
#header h1 {font-size: 52px; text-align: center; line-height: 160%; font-weight: 200;}
#header h1 .fw-normal {font-weight: normal;}
#header h1 strong {font-weight: bold;}
#header hr {max-width: 50px; height: 4px; margin: 15px auto 25px; border: none; background-color: #999;}
#header .stitle {
    width: 90%; max-width: 800px; margin: 0 auto;
    font-size: 24px; color: #757575; text-align: justify; line-height: 140%;
}

#header #navToggle {
    position: fixed; display: block; width: 40px; padding: 5px; top: 25px; left: 30px; z-index: 1000;
    cursor: url('images/drag.png') 40 40, crosshair;
    -webkit-transition: left 300ms ease;
       -moz-transition: left 300ms ease;
         -o-transition: left 300ms ease;
            transition: left 300ms ease;
}
#header #navToggle span {display: block; width: 100%; height: 2px; margin: 5px 0; background: #000;}
#header #navToggle.open {left: 250px;}
#header nav {
    position: fixed; width: 315px; height: 100%; top: 0; left: -315px; z-index: 999;
    background: #fff;
    -webkit-transition: left 300ms ease;
       -moz-transition: left 300ms ease;
         -o-transition: left 300ms ease;
            transition: left 300ms ease;
}
#header nav.open {
    left: 0;
    box-shadow: 1px 0 4px rgba(0,0,0,.2);
}
#header nav .other {margin-bottom: 50px; padding: 35px 30px 0; font-size: 15px;}
#header nav .other li {display: inline-block; padding: 0; float: left; margin-left: 10px;}
#header nav .other li:first-child {margin-left: 0;}
#header nav .other:after {display: block; content: '\0020'; overflow: hidden; visibility: hidden; clear: both;}
#header nav #gnb {margin-top: -10px; padding: 0 30px; font-size: 24px; font-weight: bold; letter-spacing: 3px;}
#header nav #gnb a {display: block; padding: 10px 0;}

#header nav a {
    color: #ccc;
    -webkit-transition: color 150ms linear;
       -moz-transition: color 150ms linear;
         -o-transition: color 150ms linear;
            transition: color 150ms linear;
}
#header nav a:hover, #header nav .current a {color: #888;}


#container {padding: 100px 0 0;}
section h2 {padding: 20px; background: rgba(255,255,255,0.7);}
.mlist01 {background: rgba(255,255,255,0.5);}
.mlist02 {margin: 50px 0; padding: 50px 0;}
.mlist03 {padding: 50px 0; background: #fff;}



.folio {
    position: fixed; display: none; overflow: hidden; z-index: 999;
    width: 100%; max-width: 930px; height: 600px;
    margin: -300px 0 0 -480px; padding: 0 15px; top: 50%; left: 50%;
    font-size: 14px; color: #a0b1bb; background: #fff;
}
.folio .folio-wrap {position: relative;}
.folio .folio-close {
    position: absolute; overflow: hidden; z-index: 1000;
    width: 30px; height: 30px; top: 10px; right: -5px;
    cursor: pointer;
}
.folio .folio-close span {
    position: absolute; display: block;
    width: 42px; height: 1px; top: 14px; right: -6px;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    background: #333;
}
.folio .folio-close span:first-child {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
.folio .folio-thumb,
.folio .folio-content {margin: 15px 0; float: left;}
.folio .folio-thumb {width: 45%; max-height: 570px; overflow: hidden;}
.folio .folio-content {width: 53%; margin-left: 2%;}
.folio h3 {display: block; margin: 0 0 15px; padding: 0; font-size: 32px; line-height: 32px; color: #333;}
.folio .folio-date {margin-bottom: 30px; font-size: 15px; text-transform: uppercase;}
.folio .folio-contents {margin-bottom: 50px; padding-right: 10px; text-align: justify; line-height: 1.5;}
.folio .folio-client {}
.folio .folio-client dl {position: relative; margin: 10px 0 20px; padding: 0 0 10px; border-bottom: 1px solid #eee;}
.folio .folio-client dt {position: absolute; left: 0; text-transform: uppercase;}
.folio .folio-client dd {margin-left: 80px;}
.folio .folio-client .url,
.folio .folio-client dd a {color: #00bc9e;}
.folio .folio-sns {line-height: 1; border-top: 1px solid #eee; border-bottom: 1px solid #eee;}
.folio .folio-sns a,
.folio .folio-sns .flaticon-s-sharethis {
    display: inline-block; width: 50px; margin: 0; padding: 17px 0; float: left;
    font-size: 16px; text-align: center;
}
.folio .folio-sns .flaticon-s-sharethis {color: #fff; background: #00c3f4;}
.folio .folio-sns a {color: #a0b1bb;}
.folio .folio-sns a:hover {color: #fff; background: #a0b1bb;}

.folio-background {
    position: fixed; display: none; z-index: 998;
    width: 100%; height: 100%; top: 0; left: 0;
    background: #000; opacity: 0.75;
}


.folio-wrap:before,.folio-wrap:after {display: block; content: '\0020'; overflow: hidden; visibility: hidden;}
.folio-wrap:after {clear: both;}
.folio-wrap {zoom: 1;}

#footer {margin-top: 400px; padding: 40px 0 20px; background: #f0f0f0;}


.documentBorder .top,.documentBorder .right,.documentBorder .bottom,
.documentBorder .left {position: fixed; z-index: 998; background: #f0f0f0;}
.documentBorder .top,.documentBorder .bottom {width: 100%; height: 20px;}
.documentBorder .right,.documentBorder .left {width: 20px; height: 100%;}
.documentBorder .top,.documentBorder .left {top: 0; left: 0;}
.documentBorder .right {top: 0; right: 0;}
.documentBorder .bottom {bottom: 0; left: 0;}



@media screen and (max-width: 768px) {
    body {-webkit-overflow-scrolling: touch;}
}

@media screen and (max-width: 320px) {
    #noeul {padding: 0;}
    #header {padding: 20px;}
    #header h1 {font-size: 30px;}
    #header .mblock {display: block;}
    #header .stitle {font-size: 18px;}
    #container {padding: 30px 20px 20px;}
    .documentBorder {display: none;}
}