/** 
 * [au.kddi.com]
 * 
 * @fileName /library/css/sp_header.css
 * @date 2016/12/19 10:40
 * 
 */

.pbHeaderArea {
    overflow: visible
}

#spHeader {
    margin-bottom: 40px;
    position: relative;
    border-bottom: 4px solid #e5e5e5;
    -webkit-text-size-adjust: 100%
}

#spHeader #spMenu {
    position: absolute;
    top: 0;
    right: 0
}

#spHeader nav {
    margin-top: 0
}

#spHeader #spMenu ul {
    border: none
}

#spHeader li.pict a {
    border: none
}

#spHeader #SS_searchSubmit {
    text-align: center;
    vertical-align: bottom;
    background: #EB5505;
    background: -moz-linear-gradient(top, #EB5505 0%, #E14000 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #EB5505), color-stop(100%, #E14000));
    background: -webkit-linear-gradient(top, #EB5505 0%, #E14000 100%);
    background: -o-linear-gradient(top, #EB5505 0%, #E14000 100%);
    background: -ms-linear-gradient(top, #EB5505 0%, #E14000 100%);
    background: linear-gradient(to bottom, #eb5505 0%, #e14000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EB5505', endColorstr='#E14000', GradientType=0);
    border: 2px solid #B2B2B2;
    -webkit-background-clip: padding-box;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    font-weight: bold;
    color: #FFF
}

#spHeader li.pict {
    float: left;
    width: 128px;
    height: 160px;
    padding: 0
}

#spHeader.english li.pict {
    width: 160px
}

#spHeader #headerModLogo {
    height: 160px;
    overflow: hidden
}

#spHeader #headerModLogo img {
    width: auto;
    height: 167px
}

#spHeader #searchArea {
    display: none;
    position: absolute;
    top: 169px;
    width: 100%;
    height: 200px;
    background-color: #BBB;
    z-index: 10
}

#spHeader #searchArea>div {
    margin: 0 auto;
    padding-top: 45px;
    width: 940px
}

#spHeader #SS_searchQuery {
    width: 590px;
    height: 106px;
    margin: 0 40px 0 30px;
    padding: 0 30px;
    font-size: 52px;
    border: 2px solid #B2B2B2;
    -webkit-text-size-adjust: 100%;
    -webkit-background-clip: padding-box;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: #FFF;
    outline: none
}

#spHeader #SS_searchSubmit {
    width: 200px;
    height: 110px;
    line-height: 110px;
    font-size: 52px
}

#spHeader.english #SS_searchSubmit {
    padding: 0;
    font-size: 40px
}

#spNavGlobal {
    border-top: 2px solid #E5E5E5
}

#spNavGlobal #spNavGlobalBox>li {
    font-size: 0;
    line-height: 0;
    width: 20%;
    padding: 0;
    display: block;
    vertical-align: top;
    float: left;
    background: -moz-linear-gradient(top, #fff 0%, #f3f3f3 94%, #f3f3f3 95%, #f7f7f7 96%, #f7f7f7 100%);
    background: -webkit-linear-gradient(top, #fff 0%, #f3f3f3 94%, #f3f3f3 95%, #f7f7f7 96%, #f7f7f7 100%);
    background: linear-gradient(to bottom, #ffffff 0%, #f3f3f3 94%, #f3f3f3 95%, #f7f7f7 96%, #f7f7f7 100%)
}

#spNavGlobal #spNavGlobalBox a {
    display: block;
    height: 159px;
    width: 196px;
    text-indent: -9999em;
    overflow: hidden
}

#spNavGlobal #spNavGlobalBox a span {
    display: block;
    font-size: 0;
    overflow: hidden
}

#spNavGlobal #spNavGlobalBox a#spNavGlobalMobile.cur {
    background-position: 0 -173px
}

#spNavGlobal #spNavGlobalBox a#spNavGlobalInternet {
    background-position: -196px 0
}

#spNavGlobal #spNavGlobalBox a#spNavGlobalInternet.cur {
    background-position: -196px -173px
}

#spNavGlobal #spNavGlobalBox a#spNavGlobalContent {
    background-position: -392px 0
}

#spNavGlobal #spNavGlobalBox a#spNavGlobalContent.cur {
    background-position: -392px -173px
}

#spNavGlobal #spNavGlobalBox a#spNavGlobalAuwallet {
    background-position: -588px 0
}

#spNavGlobal #spNavGlobalBox a#spNavGlobalAuwallet.cur {
    background-position: -588px -173px
}

#spNavGlobal #spNavGlobalBox a#spNavGlobalSupport {
    background-position: -784px 0
}

#spNavGlobal #spNavGlobalBox a#spNavGlobalSupport.cur {
    background-position: -784px -173px
}

.english.sp #spNavGlobal #spNavGlobalBox a {
    background-image: url(/content/dam/au-com/extlib/images/english/common/sp/spr_btn_nav_global_02_en.png)
}

.english.sp #spNavGlobal #spNavGlobalBox a span:before,
.english.sp #spNavGlobal #spNavGlobalBox a span:after {
    display: none
}

#spNavGlobal.v01 #spNavGlobalBox:after {
    display: block;
    content: "";
    clear: both
}

#spNavGlobal.v01 #spNavGlobalBox>li {
    font-size: 0;
    line-height: 0;
    width: 327px;
    padding: 0;
    float: left;
    background: -moz-linear-gradient(top, #fff 0%, #f3f3f3 94%, #f3f3f3 95%, #f7f7f7 96%, #f7f7f7 100%);
    background: -webkit-linear-gradient(top, #fff 0%, #f3f3f3 94%, #f3f3f3 95%, #f7f7f7 96%, #f7f7f7 100%);
    background: linear-gradient(to bottom, #ffffff 0%, #f3f3f3 94%, #f3f3f3 95%, #f7f7f7 96%, #f7f7f7 100%)
}

#spNavGlobal.v01 #spNavGlobalBox>li:first-child,
#spNavGlobal.v01 #spNavGlobalBox>li:nth-child(4) {
    width: 326px
}

#spNavGlobal.v01 #spNavGlobalBox a {
    display: block;
    width: 327px;
    height: 130px;
    overflow: hidden;
    background: url(/content/dam/au-com/static/designs/sp/au_common/images/spr_btn_nav_global.png) no-repeat 0 0;
    background-size: 980px auto;
    text-indent: -9999px
}

#spNavGlobal.v01 #spNavGlobalBox a:first-child,
#spNavGlobal.v01 #spNavGlobalBox a:nth-child(4) {
    width: 326px
}

#spNavGlobal.v01 #spNavGlobalBox a#spNavGlobalMobile.cur {
    background-position: 0 -324px
}

#spNavGlobal.v01 #spNavGlobalBox a#spNavGlobalInternet {
    background-position: -326px 0
}

#spNavGlobal.v01 #spNavGlobalBox a#spNavGlobalInternet.cur {
    background-position: -326px -324px
}

#spNavGlobal.v01 #spNavGlobalBox a#spNavGlobalContent {
    background-position: -653px 0
}

#spNavGlobal.v01 #spNavGlobalBox a#spNavGlobalContent.cur {
    background-position: -653px -324px
}

#spNavGlobal.v01 #spNavGlobalBox a#spNavGlobalAuwallet {
    background-position: 0 -130px
}

#spNavGlobal.v01 #spNavGlobalBox a#spNavGlobalAuwallet.cur {
    background-position: 0px -454px
}

#spNavGlobal.v01 #spNavGlobalBox a#spNavGlobalElectricity {
    background-position: -326px -130px
}

#spNavGlobal.v01 #spNavGlobalBox a#spNavGlobalElectricity.cur {
    background-position: -326px -454px
}

#spNavGlobal.v01 #spNavGlobalBox a#spNavGlobalFinance {
    background-position: -653px -130px
}

#spNavGlobal.v01 #spNavGlobalBox a#spNavGlobalFinance.cur {
    background-position: -653px -454px
}