@charset "utf-8";

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



/*---------------------------------------------------------------------
Top layout
---------------------------------------------------------------------*/
/* slider */
#mainSlider  {padding:30px 0 0 0; margin-bottom:70px; width:100%; height:545px; overflow:hidden; position:relative;}
    #sliderBox   {position:absolute; left:50%; top:30px; width:3600px; margin-left:-1800px;}
    #slideInner  {position:absolute; left:0; top:0; width:3600px;}
        #slideInner li  {-webkit-transition:all 0.2s ease-in;
                         -moz-transition:all 0.2s ease-in;
                         transition:all 0.2s ease-in;
                         float:left; width:720px; position:relative;}
            #slideInner li:after  {-webkit-transition:all 0.2s ease-in;
                                   -moz-transition:all 0.2s ease-in;
                                   transition:all 0.2s ease-in;
                                   opacity:1; visibility:visible;
                                   //background:url(../images/common/bg_dot.gif) repeat 0 0;
                                   background-color:rgba(0,0,0,0.5);
                                   content:''; position:absolute; top:0; left:0; width:100%; height:100%;}
            #slideInner li a     {display:block; position:relative;}
            #slideInner li span  {display:block;}
            #slideInner li .img  {overflow:hidden; max-height:504px;}
            #slideInner li img   {width:100%;}
            #slideInner li .txt  {-webkit-transition:all 0.2s ease-in 0.2s;
                                   -moz-transition:all 0.2s ease-in 0.2s;
                                   transition:all 0.2s ease-in 0.2s;
                                   opacity:0; visibility:hidden;
                                   position:absolute; bottom:30px; left:-40px; background-color:#fff; padding:30px;}
                #slideInner li .txt .cate   {background-color:#000; color:#fff; line-height:25px; padding:0 20px; display:inline-block; margin-bottom:10px;}
                #slideInner li .txt .date   {font-size:10px; font-weight:bold; margin-bottom:10px; line-height:100%;}
                #slideInner li .txt .title  {font-size:16px; font-weight:bold;}
                
        #slideInner li.current  {margin-top:-30px; z-index:2;}
            #slideInner li.current:after  {opacity:0; visibility:hidden;}
            #slideInner li.current .txt   {opacity:1; visibility:visible; bottom:40px;}
                

    #pageCounter  {text-align:center; padding-top:10px; font-size:5px; color:#e5e5e5; position:absolute; bottom:0; left:0; width:100%;}
        #pageCounter li  {display:inline-block; margin:0 4px; cursor:pointer; vertical-align:middle;}
        #pageCounter li.current  {color:#000;}
        #pageCounter #btnPrev,
        #pageCounter #btnNext  {margin:0 30px;}


/* container */
#container  {width:960px; margin:0 auto; padding:0 70px 45px 70px;}
    #container .section  {position:relative;}
        #container .section h2  {background:url(../images/top/bg_title.gif) no-repeat 0 0; padding-left:44px; line-height:83px; font-size:24px; margin-bottom:30px;}
            #container .section h2 a  {background:url(../images/common/ic_more.gif) no-repeat 100% 50%;
                                       display:inline-block; margin-left:15px; font-size:14px; text-decoration:none; padding-right:18px; vertical-align:middle;}

        #container .section h3  {position:absolute; top:15px; left:-60px;}
        #container .section .entry_list li  {float:left; margin-bottom:40px;}
            #container .section .entry_list li a     {text-decoration:none; display:block;}
            #container .section .entry_list li img   {width:100%;}
            #container .section .entry_list li span  {display:block;}
            #container .section .entry_list li .img  {margin-bottom:15px;}
            #container .section .entry_list li .txt  {font-weight:bold;}
                #container .section .entry_list li .txt .date   {font-size:10px; margin-bottom:5px; line-height:100%; letter-spacing:2px;}
                #container .section .entry_list li .txt .title  {font-size:16px; line-height:160%;}
            
            #container .section .entry_list li .label  {position:absolute; top:-10px; right:-10px; padding:8px 12px; z-index:99; font-size:14px; font-weight:bold;}
            #container .section .entry_list li .label:after  {content:''; width:100%; height:1px; display:inline-block;}
            #container .section .entry_list li .now    {background-color:#000; color:#fff;}
            #container .section .entry_list li .end    {background-color:#fff; color:#000; border:1px solid #000;}
            #container .section .entry_list li .now:after  {border-bottom:1px dashed #fff;}
            #container .section .entry_list li .end:after  {border-bottom:1px dashed #000;}
                

    /* issue */
    #container #issue  {margin-bottom:60px;}
        #container #issue h2  {margin-bottom:-25px;}
        #container #issue .entry_list li  {width:300px; float:right;}
        #container #issue .entry_list li:first-child  {position:relative; width:600px; margin-top:55px; float:left;}
            #container #issue .entry_list li:first-child:after  {background:url(../images/top/obj_01.gif) no-repeat 0 0;
                                                                 content:''; width:87px; height:58px; position:absolute; bottom:-60px; right:17px;}

    /* event & recommend */
    #container .basic   {margin-bottom:120px;}
        #container .basic .entry_list li  {width:300px; margin-right:30px;}
        #container .basic .entry_list li:last-child  {margin-right:0;}
    
    /* recommend & videos */
    #container #recommend  {float:left;}
        #container #recommend .entry_list li  {width:210px;}
        
    #container #videos  {float:right; width:360px; position:relative; background-color:#1b1b1b; color:#fff;}
        #container #videos h4   {margin-bottom:30px; padding-top:35px; background-color:#fff;}
        #container #videos p    {padding:0 30px 30px 30px; font-size:14px;}
        #container #videos #yt  {padding:0 20px; margin-bottom:30px;}
            #container #videos #ytInner    {position:relative; padding-bottom:56.25%; height:0; overflow:hidden;}
            #container #videos #yt iframe  {position:absolute; top:0; left:0; width:100%; height:100%;}
            
        #container #videos #obgVideo  {position:absolute; right:-105px; top:180px;}

    /* news */
    #news  {border-top:1px solid #000; border-bottom:1px solid #000; padding:10px; position:relative; margin-bottom:90px;}
        #news a   {display:block; text-decoration:none;}
        #news h3  {font-size:16px; float:left; border-right:1px solid #000; line-height:34px; margin-right:30px; padding-right:30px;}
        #news dl  {line-height:34px; padding-right:70px;}
        #news dt  {float:left; color:#999; margin-right:35px;}
        #news dd  {float:left; font-weight:bold;}
        #news #btnMore  {position:absolute; top:10px; right:10px;}
        #news #btnMore a  {background:url(../images/common/ic_more.gif) no-repeat 100% 50%; display:block; line-height:34px; padding-right:18px;}

    /* meigen */
    #meigen  {font-weight:bold; font-size:14px;}
        #meigen dt  {float:left; width:90px; text-align:center;}
        #meigen dd  {border:1px dashed #000; float:right; width:810px; line-height:52px; padding:0 20px; position:relative;}
        #meigen dd:before  {background:url(../images/top/bg_hukidashi.gif) no-repeat 0 50%;
                            content:''; position:absolute; top:18px; left:-15px; width:15px; height:18px;}