﻿@charset "utf-8";

/*
 *
 * Usage: Base layout
 *
 * Name: style.css
 *
 */

/* FONT size
---------------------------------------------------------------------
[ px ]	[ % ]
10px 	83  %		19px 	158 %
11px 	92  %		20px 	167 %
12px 	100 %		21px 	175 %
13px 	108 %		22px 	183 %
14px 	117 %		23px 	192 %
15px 	125 %		24px 	200 %
16px 	133 %		25px 	208 %
17px 	142 %		26px 	217 %
18px 	150 %
---------------------------------------------------------------------*/


/*---------------------------------------------------------------------
Page layout
---------------------------------------------------------------------*/
html,body   {height:100%;}
body        {background:#fcf9ed;}


/*---------------------------------------------------------------------
CSS3 animation & parts layout
---------------------------------------------------------------------*/
/* link */
a img         {opacity:1; filter:alpha(opacity=100);  -webkit-transition:all 0.2s ease-in; -moz-transition:all 0.2s ease-in;}
a:hover img   {opacity:0.7; filter:alpha(opacity=70); -webkit-transition:all 0.2s ease-in; -moz-transition:all 0.2s ease-in;}
a             {-moz-transition: all 0.2s ease-in; -webkit-transition:all 0.2s ease-in;}
a:hover       {-moz-transition: all 0.2s ease-in; -webkit-transition:all 0.2s ease-in;}
.opa_bg a,
.opa_bg input[type="image"]          {opacity:1; -moz-transition: all 0.2s ease-in; -webkit-transition:all 0.2s ease-in;}
.opa_bg a:hover,
.opa_bg input[type="image"]:hover    {opacity:0.7; -moz-transition: all 0.2s ease-in; -webkit-transition:all 0.2s ease-in;}
.trans_bg a,
.trans_bg input[type="image"]        {opacity:1; filter:alpha(opacity=100); -moz-transition: all 0.1s ease-in; -webkit-transition:all 0.1s ease-in;}
.trans_bg a:hover,
.trans_bg input[type="image"]:hover  {opacity:0; filter:alpha(opacity=0); -moz-transition: all 0.1s ease-in; -webkit-transition:all 0.1s ease-in;}
.no_trans a:hover img  {opacity:1; filter:alpha(opacity=100);}


/* txt link */
.dot_link a        {border-bottom:1px dotted #232323;}
.dot_link a:hover  {border-bottom:1px dotted #fcf9ed;}

/* pagetop */
.pagetop  {float:right; background:url(../images/common/ic_pagetop.gif) no-repeat 0 50%; padding-left:20px;}
    .pagetop a  {border-bottom:1px dotted #000;}

/* text */
.notice  {font-size:83%; color:#5d534a;}


/* icon */
.ic_pdf   {background:url(../images/menu/ic_pdf.gif) no-repeat 0 50%; padding-left:20px; display:inline-block; *display:inline; *zoom:1;}
.ic_pdf2  {background:url(../images/menu/ic_pdf.gif) no-repeat 100% 50%; padding-right:20px; display:inline-block; *display:inline; *zoom:1;}


/*---------------------------------------------------------------------
Header layout
---------------------------------------------------------------------*/
#header  {background:#f7f4e8; border-bottom:1px solid #ebe7da;}
    #headInner  {width:980px; margin:0 auto; text-align:right; letter-spacing:-.4em; height:40px;}
        #headInner li         {display:inline-block; *display:inline; *zoom:1; letter-spacing:normal; border-left:1px solid #ebe7da;}
        #headInner .hnav02    {border-right:1px solid #ebe7da;}
        #headInner a          {display:block; overflow:hidden; height:0; padding-top:40px;}
        #headInner .hnav01    {background:url(../images/common/btn_faq_on.gif) no-repeat 50% 0; width:127px;}
        #headInner .hnav02    {background:url(../images/common/btn_contact_on.gif) no-repeat 50% 0; width:117px;}
        #headInner .hnav01 a  {background:url(../images/common/btn_faq.gif) no-repeat 50% 0; padding:40px 16px 0 16px;}
        #headInner .hnav02 a  {background:url(../images/common/btn_contact.gif) no-repeat 50% 0; padding:40px 16px 0 16px;}




/*---------------------------------------------------------------------
mainWrapper layout
---------------------------------------------------------------------*/
#mainWrapper  {width:980px; margin:0 auto;}

    /* leftContent */
    #leftContent  {width:166px; float:left; padding-bottom:50px;}
        #commonLogo  {padding:37px 0 30px 0; text-align:center;}
        
        #gnav  {margin-bottom:10px;}
            #gnav ul  {border-bottom:1px solid #dfdacd; padding:0 10px 14px 0; margin-bottom:3px;}
            #gnav li  {float:right;}
            #gnav a   {display:block; overflow:hidden; height:0;}
            #gnav #topNav a     {padding-top:198px;}
            #gnav #bottomNav a  {padding-top:193px;}
            
            #gnav #bottomNav  {border-bottom:none; margin-bottom:0; padding-bottom:0;}
            
            #gnav #topNav .gnav01     {background:url(../images/common/gnav01_on.gif) no-repeat 0 0; width:53px;}
            #gnav #topNav .gnav02     {background:url(../images/common/gnav02_on.gif) no-repeat 0 0; width:53px;}
            #gnav #topNav .gnav03     {background:url(../images/common/gnav03_on.gif) no-repeat 0 0; width:50px;}
            #gnav #bottomNav .gnav04  {background:url(../images/common/gnav04_on.gif) no-repeat 0 0; width:53px;}
            #gnav #bottomNav .gnav05  {background:url(../images/common/gnav05_on.gif) no-repeat 0 0; width:51px;}
            
            #gnav #topNav .gnav01 a     {background:url(../images/common/gnav01.gif) no-repeat 0 0; width:53px;}
            #gnav #topNav .gnav02 a     {background:url(../images/common/gnav02.gif) no-repeat 0 0; width:53px;}
            #gnav #topNav .gnav03 a     {background:url(../images/common/gnav03.gif) no-repeat 0 0; width:50px;}
            #gnav #bottomNav .gnav04 a  {background:url(../images/common/gnav04.gif) no-repeat 0 0; width:53px;}
            #gnav #bottomNav .gnav05 a  {background:url(../images/common/gnav05.gif) no-repeat 0 0; width:51px;}
            
            #gnav #topNav .gnav01 a.active     {background:url(../images/common/gnav01_active.gif) no-repeat 0 0; width:53px;}
            #gnav #topNav .gnav02 a.active     {background:url(../images/common/gnav02_active.gif) no-repeat 0 0; width:53px;}
            #gnav #topNav .gnav03 a.active     {background:url(../images/common/gnav03_active.gif) no-repeat 0 0; width:50px;}
            #gnav #bottomNav .gnav04 a.active  {background:url(../images/common/gnav04_active.gif) no-repeat 0 0; width:53px;}
            #gnav #bottomNav .gnav05 a.active  {background:url(../images/common/gnav05_active.gif) no-repeat 0 0; width:51px;}
    
/*        #infoNav  {margin-bottom:35px;}*/
        #infoNav  {margin-bottom:15px;}
            #infoNav a  {display:block; overflow:hidden; height:0;}
            #infoNav .inav01    {background:url(../images/common/gnav_company_on.gif) no-repeat 0 0;}
            #infoNav .inav02    {background:url(../images/common/gnav_recruit_on.gif) no-repeat 0 0;}
            #infoNav .inav01 a  {background:url(../images/common/gnav_company.gif) no-repeat 0 0; padding-top:43px;}
            #infoNav .inav02 a  {background:url(../images/common/gnav_recruit.gif) no-repeat 0 0; padding-top:44px;}
        
/*
        #lnav  {text-align:right; letter-spacing:-.40em;}
            #lnav li  {display:inline-block; *display:inline; *zoom:1; letter-spacing:normal; margin:0 5px 0 8px;}
*/
        #lnav  {text-align:right; letter-spacing:-.40em; margin-top:35px;}
            #lnav li  {display:inline-block; *display:inline; *zoom:1; letter-spacing:normal; margin:0 5px 0 8px;}




    /* rightContent */
    #rightContent  {width:797px; float:right; border-left:1px solid #dfdacd;}
        
        /* mainHgroup */
        #mainHgroup  {position:relative;}
            
            #pankuzu  {position:absolute; line-height:100%; top:310px; left:70px;}
                #pankuzu li        {float:left; background:url(../images/common/ic_pankuzu.gif) no-repeat 100% 50%; padding-right:12px; margin-right:6px;}
                #pankuzu .current  {background:none;}
                #pankuzu a         {border-color:#232323;}
                #pankuzu a:hover   {border-color:#fcf9ed;}


        /* mainContainer */
        #mainContainer  {padding:40px 0 25px 67px;}









/*---------------------------------------------------------------------
shareList layout
---------------------------------------------------------------------*/
#shareList  {width:100%; text-align:center; padding:14px 0; background:#fff; border-top:1px solid #dfdacd;}
	#shareList li  {display:inline-block; *display:inline; *zoom:1; margin-left:10px;vertical-align:middle;}


#pageShareList  {width:100%; text-align:right; padding-bottom:25px;}
	#pageShareList li  {display:inline-block; *display:inline; *zoom:1; margin-left:10px;vertical-align:middle;}



/*---------------------------------------------------------------------
Footer layout
---------------------------------------------------------------------*/
#footer  {background:#000; padding:20px 0;}
	#footer a        {border-bottom:1px dotted #000; /*color:#5e534a;*/color:#A6998E;}
	#footer a:hover  {border-color:#71655d; color:#71655d;}
	#footInner  {width:980px; margin:0 auto;}
		#footInner #fLogo  {float:left;}
		
		#footInner #fInfo  {float:right; width:720px; height:100%;}
			
			/* footSitemap */
			#footSitemap  {margin-bottom:25px;}
				#footSitemap ul  {border-left:1px dotted #2b2925; padding:0 0 0 17px; float:left; height:100%;}
				#footSitemap .clm1  {width:193px;}
				#footSitemap .clm2  {width:173px;}
				#footSitemap .clm3  {width:193px;}
				#footSitemap ul li  {background:url(../images/common/ic_arrow-d_x.gif) no-repeat 0 50%; padding-left:10px; line-height:200%;}
				#footSitemap #qr_code  {border-left:1px dotted #2b2925; padding-left:17px; float:right;}
                #footSitemap #qr_code li  {background:none; padding:0;}
                
                #footSitemap .blank li  {background:url(../images/common/ic_blank-link.gif) no-repeat 0 50%; padding-left:10px;}
                
                #footSitemap ul .no_link   {color:#8f8782; background:none;}
			
			/* exList */
			#exList  {float:left; text-align:left; font-size:83%;}
				#exList li  {display:inline-block; *display:inline; *zoom:1; background:url(../images/common/line_dot-y.gif) no-repeat 0 50%; padding:0 0 0 10px; line-height:100%; vertical-align:middle; margin-right:10px;}
				#exList .first  {background:none; padding-left:0;}
				#exList a   {background:url(../images/common/ic_blank-link.gif) no-repeat 0 50%; padding-left:10px;}

			/* lngList */
			#lngList  {float:right;}
				#lngList li   {float:left;}
				#lngList .en  {background:url(../images/common/btn_language-en_on.gif) no-repeat 0 0;}
				#lngList .ch  {background:url(../images/common/btn_language-ch_on.gif) no-repeat 0 0; margin-left:10px;}


/* FOR TinyBox2
========================================== */

.pointTINY {cursor:pointer; color:#0066FF;}

.tbox {position:absolute; display:none; padding:14px 17px; z-index:900}
.tinner {padding:15px; -moz-border-radius:5px; border-radius:5px; background:#fff url(../images/common/ic_preload.gif) no-repeat 50% 50%; border-right:1px solid #333; border-bottom:1px solid #333}
.tmask {position:absolute; display:none; top:0px; left:0px; height:100%; width:100%; background:#000; z-index:800}
.tclose {position:absolute; top:0px; right:0px; width:30px; height:30px; cursor:pointer; background:url(../images/common/ic_close.png) no-repeat}
.tclose:hover {background-position:0 -30px}

#error {background:#ff6969; color:#fff; text-shadow:1px 1px #cf5454; border-right:1px solid #000; border-bottom:1px solid #000; padding:0}
#error .tcontent {padding:10px 14px 11px; border:1px solid #ffb8b8; -moz-border-radius:5px; border-radius:5px}
#success {background:#2ea125; color:#fff; text-shadow:1px 1px #1b6116; border-right:1px solid #000; border-bottom:1px solid #000; padding:10; -moz-border-radius:0; border-radius:0}
#bluemask {background:#4195aa}
#frameless {padding:0}
#frameless .tclose {left:6px}


