@charset "utf-8";
/* CSS Document */


.inner{ width:900px; margin:0 auto; overflow:hidden; box-sizing: border-box;}
.center{ text-align:center;}
#wrp{ padding-top: 100px;}

inner:after { content: ""; clear: both; display: block;}

header { top: -100px; position: absolute; width: 100%; margin: 100px auto 0; padding: 30px 0 0; line-height: 1; z-index: 999;  }

header .logo { float: left; font-size: 36px; }
#navilist ul { list-style: none;right: 0; bottom: 0; font-size: 14px; }
#navilist ul li { }

header.fixed { margin-top: 0; top: 0; position: fixed; padding-top: 10px; height: 55px; background: #fff; background: rgba(255,255,255,.7); transition: top 0.65s ease-in; -webkit-transition: top 0.65s ease-in; -moz-transition: top 0.65s ease-in; }
header.fixed nav ul li a{ border: none;}
header.fixed nav ul li a:hover{border: none; color: #e4007f;}

footer{ width: 100%;}
footer .facebook_link{ width: 100%; background: #0060b0; padding:30px 0; display: block; text-align: center;}
footer .footer_logo{ padding: 15px 5%; background: #fff; }
footer h1{ width:54%; float: left;}
footer h1 img{ width: 100%;}
footer h1 + p{ width: 34%;float: right;}
footer h1 + p img{ width: 100%;}
footer small{ width: 100%; background: #3e3a39; text-align: center; font-size: 14px; color: #fff; padding: 10px 0; display: block;}


/* == == == == == == == == == ==  */

body > section{ width: 100%;}

/* = = = = = = = = = = = = */



@media screen and (min-width: 769px) {

    header #navilist{ display: block !important;}
    header #nav_toggle,
    header .sp_list{display: none !important;}

    header{ width: 100%; height: 100px; overflow: hidden; background:#efefef; padding-top: 30px; box-sizing: border-box; position: fixed; z-index: 100; }
    header h1{ width: 16%; display: block; float: left;}
    header h1 img{ width:100%;}

    header nav{ width: 67.7%; display: block; float: right;}
    header nav ul{ width: 100%; overflow: hidden; vertical-align: middle;}
    header nav ul li{ display: inline-block; margin-right:4%; vertical-align: middle; }
    header nav ul li:nth-child(6){ margin-right: 0;}
    header nav ul li a.current,
    header nav ul li a{ display: block; border: solid #efefef 2px; box-sizing: border-box; padding:3px 5px;}
    header nav ul li a:hover{ border: solid #e4007f 2px; box-sizing: border-box;padding:3px 5px;}


}


@media screen and (max-width: 920px) {
    
    #main_contents{ width: 100%; padding:0 10px;}
    
    section#mainV .inner,
    section#iam .inner,
    section#bio .inner,
    section#csr .inner,
    section#news .inner,
    section#contact .inner,
    .inner{ width:100%; margin:0 auto; overflow:hidden; box-sizing:border-box; padding: 0 10px;}
    .center{ text-align:center;}

    header{ padding-top: 25px;}
    header .inner{ padding: 0px;}
    header h1{ width: 18%; margin-left:10px;}
    header nav{ width: 54%; float: right;}
    header nav ul li{ margin-right:6%;}

    footer{ width: 100%;}
    footer .facebook_link img{ width:60%;}
    footer .footer_logo{ padding: 15px 15%;}
    footer h1{ width:44%; float: left;}
    footer h1 img{ width: 100%;}
    footer h1 + p{ width: 32%;float: right;}
    footer h1 + p img{ width: 100%;}
    footer small{ width: 100%; background: #3e3a39; text-align: center; font-size: 14px; color: #fff; padding: 10px 0; display: block;}

}

@media screen and (max-width: 900px) {

    header h1{ width: 18%; margin-left:20px;}
    header nav{ width: 60%; float: right;}
    header nav ul li{ margin-right:4%;}

}


/* = = = = = = = = = = = = */
@media screen and (max-width: 768px) {

body{ background:#efefef;}
body #main_contents{ background: #fff;}

    #wrp{ padding-top: 70px;}
    header {top: 0;position: fixed;margin-top: 0; padding-top: 15px;}
    /* Fixed reset */
    header.fixed {padding-top: 0;background: transparent;}
    header #boxhead { width: 100%;height:70px; z-index: 999;position: relative;}
    header.fixed .logo,
    header .logo {position: absolute;left: 13px;top: 13px;color: #333;font-size: 26px;}
    #navilist{position: absolute;  top: -485px; background:rgba(0,0,0,0.8); width: 100%; text-align: center; padding: 10px 0; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; transition: .5s ease-in-out; }
    #navilist ul { list-style: none; position: static; right: 0; bottom: 0; font-size: 14px; }
    #navilist ul li { float: none; position: static; color: #fff; border-bottom: solid #fff 1px; text-align: center; margin-right: 0;}
    #navilist ul li a {width: 100%; display: block;padding: 18px 0; color: #fff; }
    #navilist ul li:last-child{ border-bottom: none;}
    #navilist ul li .facebookicon{ width:20px; }
    /* Toggle Button */
    #nav_toggle {  display: none; position: absolute; right: 12px; top: 6px; width: 34px; height: 36px; cursor: pointer; z-index: 101;}
    #nav_toggle div { position: relative;}
    #nav_toggle span { display: block; position: absolute; height: 4px; width: 100%; background: #e4007f; left: 0; -webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; transition: .35s ease-in-out; }
    #nav_toggle span:nth-child(1) { top: 0;}
    #nav_toggle span:nth-child(2) { top: 11px;}
    #nav_toggle span:nth-child(3) { top: 22px;}
    #nav_toggle { display: block; }

    .open #nav_toggle span:nth-child(1)
    {top: 11px; -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); transform: rotate(315deg);}
    .open #nav_toggle span:nth-child(2)
    {width: 0;left: 50%;}
    .open #nav_toggle span:nth-child(3)
    { top: 11px; -webkit-transform: rotate(-315deg); -moz-transform: rotate(-315deg); transform: rotate(-315deg); }
    .open #navilist 
    {/* #global-nav top + #mobile-head height */-moz-transform: translateY(556px); -webkit-transform: translateY(556px); transform: translateY(556px); }

    header.fixed { margin-top: 0; top: 0; position: fixed; padding-top: 15px; height: 55px; background: rgba(255,255,255,.7); transition: top 0.65s ease-in; -webkit-transition: top 0.65s ease-in; -moz-transition: top 0.65s ease-in; }
    header.fixed nav ul li a{ border: none;}
    header.fixed nav ul li a:hover{border: none; color: #e4007f;}

    section#iam .inner,
    section#bio .inner,
    section#csr .inner,
    section#news .inner,
    section#contact .inner,
    .inner{ width:100%; margin:0 auto; overflow:hidden; box-sizing:border-box; padding:15px 15px;}
    .center{ text-align:center;}
    
    footer small{font-size: 10px; letter-spacing: 0em;}
    footer .facebook_link{ width: 100%; background: #0060b0; padding:10px 0; display: block; text-align: center;}
}