/*=== 作者：Distantmemory - 时间：2018年11月 - 版本：1.0 - 个人：www.distantmemory.cc - 公司：www.timoo.net ===*/

/*=== 媒体查询 ===*/
/*手机*/
@media ( min-width : 320px) { 

}

@media ( min-width : 360px) { 

} 

/*平板电脑*/
@media ( min-width : 640px) {

}

/*笔记本电脑*/
@media ( min-width : 960px) {

} 

/*PC电脑*/
@media ( min-width : 1200px) { 

    .hengbok-head { padding: 0 0.32rem; }
    .hengbok-head .logo .picture { position: absolute; top: 0; left: 50%; margin-left: -0.8rem; width: 1.6rem; height: 1.6rem; overflow: hidden; }
    
} 

/*大屏PC电脑*/
@media ( min-width : 1400px) { 

    .hengbok-head { padding: 0 0.48rem; }
    .hengbok-head .logo .picture { margin-left: -1.4rem; width: 2.8rem; height: 2.8rem; }
    
}

@media ( min-width : 1600px) { 

    .hengbok-head { padding: 0 1.2rem; }
    
}

/*=== Style ===*/
a:hover { color: #CBB8A8; }

.hengbok-head { position: relative; height: 1.36rem; background: #FFF url(../../../resource/hengbok/images/background/tile.gif) repeat center; z-index: 99; }

.hengbok-head .main-menu { position: relative; z-index: 2; }
.hengbok-head .main-menu nav li { line-height: 1.36rem; }
.hengbok-head .main-menu nav li + li { margin-left: 0.48rem; }
.hengbok-head .main-menu nav li a { display: block; color: #505050; }
.hengbok-head .main-menu nav li:hover a { color: #CBB8A8; }
.hengbok-head .main-menu nav li.active a { color: #CBB8A8; }

.hengbok-head .contact { position: relative; padding-top: 0.48rem; font-size: 0.14rem; color: #999; z-index: 2; }
.hengbok-head .contact li + li { margin-left: 0.4rem; }
.hengbok-head .contact i { width: 0.12rem; margin-right: 0.08rem; font-size: 0.16rem; color: #CBB8A8; }
.hengbok-head .contact .bottom { padding-left: 0.2rem; max-width: 1.68rem; height: 0.24rem; overflow: hidden; }

.hengbok-head .logo { position: relative; height: 1.36rem; z-index: 1; }

.hengbok-head-mobile { position: fixed; top: 0; left: 0; width: 100%; height: 0.56rem; z-index: 99; }
.hengbok-head-mobile .top { position: relative; padding: 0 0.08rem; height: 100%; background: #FFF url(../../../resource/hengbok/images/background/tile.gif) repeat center; box-shadow: 0 0 0.08rem rgba(0,0,0,0.1); z-index: 2; }
.hengbok-head-mobile .logo { position: relative; top: 0.04rem; max-width: 0.48rem; }

.hengbok-head-mobile .menu { position: fixed; top: 0; left: 0; padding-top: 0.56rem; width: 100%; height: 100%; z-index: 1; opacity: 0; visibility: hidden; }
.hengbok-head-mobile .menu.on { background: rgba(0,0,0,0.5); opacity: 1; visibility: visible; }
.hengbok-head-mobile .menu nav { padding: 0.08rem 0; background: #CBB9A9; box-shadow: 0 0 0.08rem rgba(0,0,0,0.1); font-size: 0.14rem; opacity: 0; visibility: hidden;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s; 
    transition: all 0.5s; 

    -webkit-transform:scaleY( 0 );
    -webkit-transform-origin: 0 0;
    -moz-transform:scaleY( 0 );
    -moz-transform-origin: 0 0;
    -ms-transform:scaleY( 0 );
    -ms-transform-origin: 0 0;
    -o-transform:scaleY( 0 );
    -o-transform-origin: 0 0;
    transform:scaleY( 0 );
    transform-origin: 0 0; }
.hengbok-head-mobile .menu.on nav { opacity: 1; visibility: visible;
    -webkit-transform:scaleY( 1 );
    -moz-transform:scaleY( 1 );
    -ms-transform:scaleY( 1 );
    -o-transform:scaleY( 1 );
    transform:scaleY( 1 ); }
.hengbok-head-mobile .menu nav a { display: block; padding: 0.16rem 0.08rem; color: #FFF; }
.hengbok-head-mobile .menu nav li + li { border-top: 0.01rem solid rgba(0,0,0,0.07); }
.hengbok-head-mobile .menu nav li.active a { background: #DBCBC1; color: #81766D; }

/*边栏控制按钮*/
.hengbok-head-mobile .menu-control { position: absolute; top: 50%; right: 0.24rem; margin-top: -0.075rem; width: 0.20rem; height: 0.15rem; z-index: 100; cursor: pointer; }
.hengbok-head-mobile .menu-control .line { position: absolute; top: 50%; width: 100%; height: 0.01rem; background: #CBB8A8; opacity: 1; 
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s; 
    transition: all 0.5s; }
.hengbok-head-mobile .menu-control.on .line { opacity: 0; }
.hengbok-head-mobile .menu-control:before,
.hengbok-head-mobile .menu-control:after { content: ""; display: block; position: absolute; width: 100%; height: 0.01rem; background: #CBB8A8;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s; 
    transition: all 0.5s; }
.hengbok-head-mobile .menu-control:before { top: 0; }
.hengbok-head-mobile .menu-control:after { bottom: 0; }
.hengbok-head-mobile .menu-control.on:before { 
    transform-origin: right; 
    transform:rotate(-45deg);
    -ms-transform:rotate(-45deg); 
    -moz-transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
    -o-transform:rotate(-45deg); }
.hengbok-head-mobile .menu-control.on:after { 
    transform-origin: right; 
    transform:rotate(45deg);
    -ms-transform:rotate(45deg); 
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -o-transform:rotate(45deg); }