#headtop{background:#382d23;height:35px;}
#headtop .f_l{width:360px;}
#headtop .f_l a{display:inline-block;font-size:13px;color:#fff;width:180px;height:35px;line-height:35px;background:url("/nimages/common/headtopbg2.gif") center top no-repeat;}
#headtop .f_l a span{display:block;padding-left:24px;}
#headtop .f_l a:first-child{color:#382d23;background:url("/nimages/common/headtopbg1.gif") center top no-repeat;}
#headtop .f_r li{display:inline-block;}
#headtop .f_r li a{display:block;color:#fff;height:35px;line-height:35px;text-align:right;}
#headtop .f_r li.thome a{padding:0 14px;}
#headtop .f_r li.tjoin a{text-align:right;width:60px;}
#headtop .f_r li.tlogin a{padding:0 32px 0 18px;background:#67403b url("/nimages/common/headtopbg3.gif") center 2px no-repeat;}

#head{position:relative;z-index: 3;}
#head:after{content:"";position:absolute;left:0;top:0;width:100%;height:112px;background-color:rgba(0, 0, 0, 0.4);transition: all 0.2s ease-out 0s;}
#head.on:after{background-color:rgba(0, 0, 0, 0.8);}
#head .wrap{z-index: 1;}
#head .wrap h1{position:absolute;left:0;top:25px;}
#head .wrap .gnb{position:absolute;left:196px;top:8px;}
#head .wrap .gnb li{float:left;}
#head .wrap .gnb li a{display:inline-block;padding:37px 14px 45px;position:relative;font-size:15px;color:#fff;font-weight:400;}
#head .wrap .gnb li a.on{color:#ffad1f;}
#head .wrap .gnb li a:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:0;background:#ffad1f;transition: all 0.2s ease-out 0.1s;}
#head .wrap .gnb li a:before{content:"";position:absolute;left:50%;bottom:0;display:inline-block;width:11px;height:6px;margin-left:-5px;background: url("/nimages/common/gnb_icon.png") center bottom no-repeat;opacity:0;transition: all 0.2s ease-out 0.1s;}
#head .wrap .gnb li a.on:after, #head .wrap .gnb li a:hover:after{height:3px;}
#head .wrap .gnb li a.on:before, #head .wrap .gnb li a:hover:before{bottom:3px;opacity:1;}

#head .smenu{width:100%;position:absolute;left:0;top:112px;background-color: rgba(0, 0, 0, 0.9);transition: all 0.2s ease-out 0s;}
#head .smenu .wrap{height:0px;transition: all 0.2s ease-out 0s;overflow:hidden;}
#head .smenu .wrap > div{padding:20px 0 0 196px;}
#head .smenu .wrap ul{float:left;}
#head .smenu .wrap ul li{text-align:center;margin-bottom:10px;}
#head .smenu .wrap ul li a{color:#fff;font-size:13px;transition: all 0.2s ease-out 0s;font-weight:300;}
#head .smenu .wrap ul li a:hover{color:#ffad1f;}
#head .smenu.on{border-top:1px solid #ffad1f;}
#head .smenu.on .wrap{height:292px;}