@charset "utf-8";

/*
 *
 * Usage: Top layout
 *
 * Name: top.css
 *
 */



/*---------------------------------------------------------------------
Top layout
---------------------------------------------------------------------*/
#wrapper {transition:all 0.7s ease-in-out;}
#wrapper.hide {opacity:0;}

#main {position:relative;}

#main #slide {width:100%; height:780px; min-width:1000px; overflow:hidden; position:relative;}
  #main #slider li  {
    transition:opacity 0.6s ease-in, visibility 0.6s ease-in;
    min-width:1000px; position:absolute; width:100%; top:0; left:0; z-index:1;
    background-position:50% 50%;
    background-size:cover;
    opacity:0; visibility:hidden;
  }
  #main #slider li.active {opacity:1; visibility:visible; z-index:2;}
  #main #slider img {display:none;}
  
#main #pagenate {position:absolute; bottom:27px; left:0; width:100%; text-align:center; z-index:10;}
  #main #pagenate li {display:inline-block; margin:0 5px;}
  #main #pagenate a  {background:url(../images/top/ic_circle.png) no-repeat 0 0; display:block; overflow:hidden; height:0; padding-top:12px; width:12px;}
  #main #pagenate a.current {background:url(../images/top/ic_circle_on.png) no-repeat 0 0;}


#main #logos {position:absolute; top:0; left:0; width:100%; height:100%; z-index:2;}
  #main #logos span {display:table-cell; height:60px; width:39px;text-indent:-9999px; position:relative;}
  #main #logos span:after {
    content:''; height:4px; width:100%; display:block;
    position:absolute; bottom:2px; left:0; background-color:#fff;
  }
  #main #logos span:before {
    content:''; height:60px; width:39px; display:block;
    position:absolute; top:0;
  }
  
  
  #main #logos .b:before  {background:url(../images/top/logo_b.png) no-repeat 0 0; left:-15px;}
  #main #logos .l:before  {background:url(../images/top/logo_l.png) no-repeat 0 0;}
  #main #logos .a1:before {background:url(../images/top/logo_a2.png) no-repeat 0 0;}
  #main #logos .n:before  {background:url(../images/top/logo_n.png) no-repeat 0 0;}
  #main #logos .k:before  {background:url(../images/top/logo_k.png) no-repeat 0 0;}
  #main #logos .a2:before {background:url(../images/top/logo_a.png) no-repeat 0 0; right:-19px;}
  
  #main #logos .logo {position:absolute; display:table;}
  
  #main #logos #logo1 {top:5%; left:60px; width:calc(52% - 120px);}
  #main #logos #logo2 {top:5%; right:60px; width:calc(40% - 120px);}
  #main #logos #logo3 {top:25%; left:60px; width:calc(100% - 120px);}
  #main #logos #logo4 {top:45%; left:60px; width:calc(55% - 120px);}
  #main #logos #logo5 {top:65%; right:60px; width:calc(57% - 120px)}
  #main #logos #logo6 {top:85%; left:60px; width:calc(100% - 120px);}
  
  #main #logos #logo1 .b  {width:12%;}
  #main #logos #logo1 .l  {width:26%;}
  #main #logos #logo1 .a1 {width:12%;}
  #main #logos #logo1 .n  {width:23%;}
  #main #logos #logo1 .k  {width:15%;}
  #main #logos #logo1 .a2 {width:12%;}
  
  #main #logos #logo2 .b  {width:12%;}
  #main #logos #logo2 .l  {width:26%;}
  #main #logos #logo2 .a1 {width:12%;}
  #main #logos #logo2 .n  {width:26%;}
  #main #logos #logo2 .k  {width:12%;}
  #main #logos #logo2 .a2 {width:12%;}
  
  #main #logos #logo3 .b  {width:20%;}
  #main #logos #logo3 .l  {width:20%;}
  #main #logos #logo3 .a1 {width:20%;}
  #main #logos #logo3 .n  {width:15%;}
  #main #logos #logo3 .k  {width:15%;}
  #main #logos #logo3 .a2 {width:10%;}
  
  #main #logos #logo4 .b  {width:14%;}
  #main #logos #logo4 .l  {width:30%;}
  #main #logos #logo4 .a1 {width:16%;}
  #main #logos #logo4 .n  {width:16%;}
  #main #logos #logo4 .k  {width:14%;}
  #main #logos #logo4 .a2 {width:16%;}
  
  #main #logos #logo5 .b  {width:16%;}
  #main #logos #logo5 .l  {width:16%;}
  #main #logos #logo5 .a1 {width:16%;}
  #main #logos #logo5 .n  {width:16%;}
  #main #logos #logo5 .k  {width:16%;}
  #main #logos #logo5 .a2 {width:16%;}
  
  #main #logos #logo6 .b  {width:16%;}
  #main #logos #logo6 .l  {width:20%;}
  #main #logos #logo6 .a1 {width:12%;}
  #main #logos #logo6 .n  {width:20%;}
  #main #logos #logo6 .k  {width:12%;}
  #main #logos #logo6 .a2 {width:16%;}
 
 
#topContainer {width:900px; margin:0 auto; padding:145px 50px 0 50px;}
  #topContainer section {padding:75px 0;}
    #topContainer section header {position:relative; border-bottom:1px solid #000; padding-bottom:25px;}
      #topContainer section header h2 {text-align:center; font-size:24px;}
      #topContainer section header .btn_more {position:absolute; top:5px; right:0; font-size:14px;}
      #topContainer section header .btn_more a {
        transition:all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
        background:url(../images/common/ic_arrow-x.png) no-repeat 85% 50%;
        display:block; padding-right:35px;
      }
      #topContainer section header .btn_more a:hover {background-position:95% 50%;}


  #topContainer #news ul li {border-bottom:1px solid #cdcdcd;}
  #topContainer #news ul a  {display:block; position:relative; padding:25px 0;}
  #topContainer #news ul dt {color:#bbbbbb; width:115px; padding-left:10px;}
  #topContainer #news ul dd {margin:-15px 0 0 125px; max-height:100%;}
  
  #topContainer #news ul a:after {
    transition:all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    background:url(../images/common/ic_arrow-x.png) no-repeat 0 0;
    content:''; display:block; width:8px; height:13px;
    position:absolute; top:50%; right:14px; margin-top:-6px;
  }
  #topContainer #news ul a:hover:after {right:5px;}


  #topContainer #facebook ul {display:table; width:100%; border-bottom:1px solid #000;}
  #topContainer #facebook ul li {display:table-cell; width:33%; vertical-align:top;}
  #topContainer #facebook ul a  {display:block; padding:40px 0;}
  #topContainer #facebook ul dt {float:left; width:80px;}
    #topContainer #facebook ul dt img {max-width:100%; max-height:100%;}
  #topContainer #facebook ul dd {float:left; width:180px; margin-left:20px;}
  #topContainer #facebook ul .date {color:#bbb; margin-bottom:5px;}









/*---------------------------------------------------------------------
sp layout
---------------------------------------------------------------------*/