@charset 'UTF-8';

/*===========================================
base.css
===========================================*/
/*-------------------------------------------
Base Setting
-------------------------------------------*/
a{color:#014099;}
body,select,input,textarea{
  font-size:1.6rem;
  line-height:1.8;
  color:#333;
}

  @media screen and (max-width:320px){
    html{font-size:50%;}
    body,select,input,textarea{line-height: 1.6;}
  }

  @media screen and (max-width:767px){
    body,select,input,textarea{line-height: 1.6;}
  }


/*-------------------------------------------
header
-------------------------------------------*/
#globalNav ul li.lowerOpen a{color:#014099;}
#globalNav ul li a.current{color:#014099;}
#globalNav ul li a.off{color:#ccc;}
#globalNav ul li a:hover{color:#014099;}
#globalNav ul li .subGnav{background-color:#fff;}
#globalNav ul li .subGnav .category{color:#fff; background:#014099;}
#globalNav ul li .subGnav a.category:hover{background-color:#034bb1;}
#globalNav ul li .subGnav .category a{color:#fff;}
#globalNav ul li .subGnav .menus a{color:#333;}
#globalNav ul li .subGnav .menus a:hover{color:#999;}
#selectRegion .regionHead{background-color:#014099; color:#fff;}
#selectRegion .regionList{background-color: #fff;}
#subFunctions .langSelect a{color:#b2b2b2;}
#subFunctions .langSelect a:hover,
#subFunctions .langSelect a.active{color:#333;}
#funcBtns #gnavTrigger span,
#funcBtns #gnavTrigger::before,
#funcBtns #gnavTrigger::after{background-color: #83979d;}
  @media screen and (max-width:767px){
    header #logo #spMenuBtn span{background-color: #014099;}
    #siteFunctions{background-color: #014099;}
    #siteFunctions a:hover{color:#fff!important;}
    #searchSet{background-color: inherit;}
    #searchSet form::before{background-color:#fff;}
    #searchSet form input[type="submit"] {background-color: #022b66;}
    #gNavSP ul li a.menuToggle::before{border-color: #fff;}
    #gNavSP>ul>li{border-bottom:#0a53bb 1px solid;}
    #gNavSP ul li a{color:#fff;}
    #gNavSP ul li .subGnav .menus ul li a:hover{color:#999;}
    #funcBtns li#contactLink a{color:#000;background-color:#fff;}
    #funcBtns li#contactLink a:hover{color:#000!important;}
    #subFunctions .langSelect span + a{color:#fff;background:#022b66;}
    #subFunctions .langSelect span,
    #subFunctions .langSelect a.active{color:#fff;}
    #subFunctions .otherLink a,
    #subFunctions .otherLink a:hover{color:#fff; background-color:#022b66;}
    #selectRegion .regionList ul li{background-color:#022b66;}
    #selectRegion .regionList ul li a{color:#fff;}
    #selectRegion .regionList{background-color: inherit;}
  }


/*-------------------------------------------
contents
-------------------------------------------*/
#contents{background-color:#fff; clear:both;}
#sidebar dl dt{color:#fff;}
#sidebar dl dt a{background-color:#014099; color:#fff;}
#sidebar dl dt a:hover{background-color:#666;}
#sidebar dl > dd > ul{border-bottom:#e5e5e5 1px solid;}
#sidebar dl dd li{border-left:#e5e5e5 1px solid; border-right:#e5e5e5 1px solid; background-color:#fff;}
#sidebar dl dd li a{color:#000;}
#sidebar dl dd li a:hover{background-color:#eef4f9;}
#sidebar dl dd li.active a{color:#004097;}
#sidebar dl dd li.active li a{color:#5c5c5c;}

#sidebar dl dd li li.active a,
#sidebar dl dd li li li.active li.active a{color:#004097;}
#sidebar dl dd li li.active li a,
#sidebar dl dd li li li.active li a{color:#5c5c5c;}
#sidebar dl dd li li li.active a{color:#004097;}

#sidebar .contact a { background-color: #fff; border: #eaeaea 1px solid; color: #333; }
#sidebar .contact a:hover { color: #fff; background-color: #004097; }
#sidebar #localNav{border-top:#eaeae8 1px solid;}
#sidebar #localNav li{border:#eaeae8 1px solid; border-top:none;}
#sidebar #localNav li a{padding:10px 15px;}
#sidebar #localNav li a:hover{background-color:#eef4f9;}
#sidebar .asideList dt{color:#000; border:#e9e9e9 1px solid;}
#sidebar .asideList dd li.newWindow a:hover{background-color:#ebf2fb;}
  @media screen and (max-width:767px){
    #sidebar nav{background-color:#f0f0f0; border:#eaeaea 1px solid;}
    #sidebar .contact a:hover{background-color:#014099; color:#fff;}
    #sidebar .asideList dt{background-color:#fff;}
  }


/* ------------------------------------------
footer
--------------------------------------------- */
#footerNav a{color:#000;}
#footerNav .subGnav .menus a{color:#5e5e5e; font-size: 1.4rem;}
#copyright{font-family: Helvetica, Arial,sans-serif;}
.pagetop > a {background-color: #727e8f;}
.pagetop > a:hover{opacity: 0.8;}
.pagetop > a::before {border-color: #fff;}

/*-------------------------------------------
popup page
-------------------------------------------*/
body.popup header{border-bottom:#eaeaea 1px solid;}
body.popup #content h1{color:#014099;}
body.popup .conBlock02 ul{border:1px solid #e7e7e7;}
body.popup .conBlock03 .inqBtn a{background-color:#014099; color:#fff;}
body.popup .conBlock03 .inqBtn a:hover{background-color:#00265b;}
  @media screen and (max-width:767px){
    body.popup #wrapper{background-color:#fff;}
    body.popup .conBlock03 a{background-color:#013e94; color:#fff;}
  }



/*===========================================
design.css
===========================================*/
/* Background Color
-------------------------------------*/
.bgColor01{background-color:#f6f6f6!important;}
.bgColor02{background-color:#eee!important;}
.bgColor03{background-color:#ebf2fc!important;}
.bgColor04{background-color:#dbe9f6!important;}
.bgColor05{background-color:#c9dbf1!important;}
.bgColor06{background-color:#98c4ea!important;}
.bgColor07{background-color:#1495f8!important; color:#fff;}
.bgColor08{background-color:#0f76c5!important; color:#fff;}
.bgColor09{background-color:#014099!important; color:#fff;}
.bgColor10{background-color:#edf5dd!important;}
.bgColor11{background-color:#abcf7f!important;}
.bgColor12{background-color:#8abc4b!important;}
.bgColor13{background-color:#fcfaf3!important;}
.bgColor14{background-color:#e2e0d3!important;}
.bgColor15{background-color:#fff!important;}
.bgColor16{background-color:#000!important; color:#fff;}

/* Font Color
-------------------------------------*/
.color01{color:#ff3300!important;}
.color02{color:#adadad!important;}
.color03{color:#fff!important;}
.color04{color:#004097!important;}
.color05{color:#1495f8!important;}
.color06{color:#98c4ea!important;}
.color07{color:#8abc4b!important;}
.color08{color:#29b45d!important;}


h1 {}
.h1BlockS .headLink{color:#004097;}
.h1BlockS .headLink a::before{border-color: #666;}
.txtLink01 a::before,
.txtLink02 a::before,
ul.iconLink li::before,
a.arrow00::before{border-color: #666;}
.txtLink02 a::before{border-color: #014099;}
*[class*="insideLinks"] li a::before{border-top:8px solid #999;}

.dlList dd a{background-color:#fff;}
.dlListColor a,.dlListColor a:link{color:#004097;}
.dlListColor dd{border-bottom:#fff 1px solid; border-bottom:#ccc 1px dotted\9;}
.dlListColor dd a{background-color:#fff;}
.dlListColor dd:nth-of-type(2n) a{background-color:#fafafa;}
.dlListColor dd a:hover{background-color:#e9f7fb;}
.dlListSide a,.dlListSide a:link{color:#004097;}
.dlListSide dd{border-bottom:#fff 1px solid; border-bottom:#ccc 1px dotted\9;}
  @media screen and (max-width:767px){
    *[class*="insideLinks"]:not(.notChange) li{background-color:#eef4f9;}
    *[class*="insideLinks"]:not(.notChange) li a{ border-color:#fff; color:#333;}
    *[class*="insideLinks"]:not(.notChange) li a::after{ border-top:#333 2px solid; border-right: #333 2px solid;}
    *[class*="insideLinks"].notChange li a{color:#333;}
    ul.iconLink li {background-color: #eef4f9;}
    ul.iconLink li a{border-top:#fff 1px solid;}
    ul.iconLink li.newWindow a{background-color:#eef4f9;}
    .dlList dd{border-bottom:#ccc 1px dotted;}
    .dlListColor dd{border-bottom:#ccc 1px dotted;}
    .dlListSide dd{border-bottom:#ccc 1px dotted;}
  }

.tPattern01{border:solid #ccc; border-width:1px 0 1px 1px;}
.tPattern01 th,
.tPattern01 td { border: solid #ccc; border-width:0 1px 0 0; }
.tPattern01 thead th { border: solid #ccc; border-width:0 1px 1px 0; background: #ececec; }
.tPattern02 { border: solid #ccc; border-width:0 0 0 1px;}
.tPattern02 caption { border: 1px solid #ccc; background: #eaeaea; }
.tPattern02 th,
.tPattern02 td { border: solid #ccc; border-width:0 1px 1px 0;}
.tPattern02 th { background: #f6f6f6; }
.tPattern03 { border-top: #ccc 1px solid; border-left: #ccc 1px solid; }
.tPattern03 caption { border: 1px solid #ccc; background: #eaeaea; }
.tPattern03 th,
.tPattern03 td { border-right: #ccc 1px solid; border-bottom: #ccc 1px solid; }
.tPattern03 th { background: #f6f6f6; }
.tPattern03_pad3{border:solid #ccc; border-width:1px 0 0 1px;}
.tPattern03_pad3 th,
.tPattern03_pad3 td { border: solid #ccc; border-width:0 1px 1px 0;}
.tPattern03_pad3 th { background: #f6f6f6; }
td.bottomLine01 { border-bottom: 1px dotted #ccc; }
th.solidTop, td.solidTop { border-top: 1px solid #ccc !important; }
th.solidRight, td.solidRight { border-right: 1px solid #ccc !important; }
th.solidBottom, td.solidBottom { border-bottom: 1px solid #ccc !important; }
th.solidLeft, td.solidLeft { border-left: 1px solid #ccc !important; }
.tShadeLine01 .odd th,
.tShadeLine01 .odd td{background-color: #f6f6f6;}

.bPattern01 {background: #eef4f9;}
.bPattern02{background:#eee;}
.bPattern03 .heading{background:#e5e5e5;}

  @media screen and (max-width:767px){
    .bPattern02 ul.iconLink li{background-color: #eee;}
  }



/*===========================================
frameworks.css
===========================================*/
#keyvisual section{background-color: #014099; color:#fff;}
#keyvisual section .slogan{color:#fff;}

.tabNav a:visited{color:#333;}
.tabNav li a{background-color:#e5e5e5;}
.tabNav li a:hover{background-color:#dcdcdc;}
.tabNav li.on a{background-color:#eef4f9;}
.tabWrap{background-color: #eef4f9;}
  @media screen and (max-width:767px){
    .tabNav li a{color:#333;}
    .tabNav li.on{color:#0099cc;}
    .btnTab li{border-top:#fff 1px solid;}
  }

  @media screen and (max-width:767px){
    .linksWrap ul li{border-top:#fff 1px solid;}
    .linksWrap h3{background:#e9e9e9;}
  }

/* resp-accordion
--------------------------------*/
.resp-tab-item{background-color:#e5e5e5;}
.resp-tab-item:hover{background-color:#dcdcdc;}
.resp-tab-active{background-color:#eef4f9 !important;}
.resp-vtabs li.resp-tab-active{background-color:#fff;}
h2.resp-accordion:first-child{border-top-color:#fff !important;}

@media screen and (max-width:767px){
  h2.resp-accordion { background: #eef4f9; color: #000; border-top-color: #fff; }
  h2.resp-tab-active{background:#83979d!important; color: #fff;}
  .resp-vtabs .resp-tab-content{border:1px solid #fff;}
  .resp-vtabs .resp-tab-content:last-child{border-bottom-color:#fff !important;}
  .resp-arrow::before { border-top-color: #727e8f; border-right-color: #727e8f; }
  .resp-tab-active .resp-arrow::before{border-color: #fff;}
  .resp-tab-content-active{border-color:#e9e9e9; background-color: #fff;}
}

.gridBlock .listBox,
.gridBlock .listBoxInner{background-color:#eff4fa;}
.gridBlock.cl2.bgcl .listBox:nth-child(4n+2),
.gridBlock.cl2.bgcl .listBox:nth-child(4n+3),
.gridBlock.cl2.bgcl .listBox:nth-child(4n+2) .listBoxInner,
.gridBlock.cl2.bgcl .listBox:nth-child(4n+3) .listBoxInner,
.gridBlock.cl3.bgcl .listBox:nth-child(even),
.gridBlock.cl3.bgcl .listBox:nth-child(even) .listBoxInner,
.gridBlock.cl4.bgcl .listBox:nth-child(8n+2),
.gridBlock.cl4.bgcl .listBox:nth-child(8n+4),
.gridBlock.cl4.bgcl .listBox:nth-child(8n+5),
.gridBlock.cl4.bgcl .listBox:nth-child(8n+7),
.gridBlock.cl4.bgcl .listBox:nth-child(8n+2) .listBoxInner,
.gridBlock.cl4.bgcl .listBox:nth-child(8n+4) .listBoxInner,
.gridBlock.cl4.bgcl .listBox:nth-child(8n+5) .listBoxInner,
.gridBlock.cl4.bgcl .listBox:nth-child(8n+7) .listBoxInner,
.gridBlock.cl5.bgcl .listBox:nth-child(even),
.gridBlock.cl5.bgcl .listBox:nth-child(even) .listBoxInner{background-color:#e1eaf5;}
.gridBlock a {color:#333;}
.gridBlock ul li a {color:#014099;}

  @media screen and (max-width:767px){
    .gridBlock.bgcl .listBox:nth-child(odd),
    .gridBlock.bgcl .listBox:nth-child(odd) .listBoxInner{background-color:#eff4fa!important;}
    .gridBlock.bgcl .listBox:nth-child(even),
    .gridBlock.bgcl .listBox:nth-child(even) .listBoxInner{background-color:#e1eaf5!important;}
    .gridBlock ul li a {color:#333;}
  }

.pressBlock .lists{background-color:#eef4f9;}
.pressBlock dl{background-color:#eef4f9;}
.pressBlock dl.ellipsis dt{color:#666;}
.pressBlock dl dt span.labelNew{background-color: #ed6942; color:#fff;}
.pressBlock dl dt span.labelSeg{background-color: #999; color:#fff;}

.bnrBlock{background-color:#eef4f9;}
.bnrBlock ul li{background-color: #fff;}
.bnrBlock ul li a{color:#333;}

.chapterKV{color:#fff;}
.chapterKV .more a{border:#fff 1px solid; color:#fff;}
.sectionKV .more a:hover{background-color:#fff; color:#014099;}
.chapterKV.colorA,
.chapterKV.colorA h1{color:#000;}
.chapterKV.colorB,
.chapterKV.colorB h1,{color:#014099;}

.accWrap .accHead {background:#eef4f9;}
.accWrap .accordion-open {background:#83979d; color: #fff;}
.accWrap .accordion-close span::before{border-color:#727e8f;}
.accWrap .accordion-open span::before{border-color:#fff;}
.accWrap .accElem{border:#e9e9e9 1px solid;}

.productDetail .toContactUs a{border:#e5e5e5 1px solid; color:#000;}
.productDetail .toContactUs a:hover{background-color:#014099; color:#fff;}
.productDetail .toBrandSite a{background-color:#eef4f9;}
.productDetail .toBrandSite a:hover{background-color:#014099; color:#fff;}
.backCategory a::before{border-color:#014099;}

.switchWrap .closeBtn span,
.switchWrap .switchToggle{color:#00c;}
.switchWrap .closeBtn span{border:1px solid #ccc;}
.switchWrap .allOpenBtn{background-color:#014099; color:#fff;}
.switchWrap .nowOpen{color:#4e98fb;}
.switchWrap .allOpenBtn.nowOpen{background-color:#fff; color:#014099; border:#014099 1px solid;}

.accIsh.switchWrap .switchToggle { background: #eef4f9; color: #000; border-top-color: #fff; }
.accIsh.switchWrap .switchToggle.nowOpen {background:#83979d!important; color: #fff;}
.accIsh.switchWrap .switchToggle span::before{border-top-color:#727e8f; border-right-color:#727e8f;}
.accIsh.switchWrap .switchToggle.nowOpen span::before{border-color: #fff;}
.accIsh.switchWrap .switchDetail{border-color:#e9e9e9;}


/*-------------------------------------------
Icon fonts
-------------------------------------------*/
@font-face {
  font-family: 'svgicon';
  src:
    url('../fonts/svgicon.ttf?l8bala') format('truetype'),
    url('../fonts/svgicon.woff?l8bala') format('woff'),
    url('../fonts/svgicon.svg?l8bala#svgicon') format('svg');
  font-weight: normal;
  font-style: normal;
}
[class^="icon-"],
[class*=" icon-"],
#funcBtns li#searchOpen span::before,
#funcBtns li#regionOpen span::before,
ul.iconLink li.newWindow a::after,
a.newWindow::after,
span.newWindow::after,
.listBox.linkBlank::after,
.productDetail .toBrandSite a::after,
.linksWrap ul li.icon a::after,
#searchSet form::before,
#globalNav ul li .subGnav .menus ul li.blank a::after,
#gNavSP ul li .subGnav .menus ul li.blank a::after{
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'svgicon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-global:before {content: "\e900";}
.icon-products1:before {content: "\e901";}
.icon-products2:before {content: "\e902";}
.icon-products3:before {content: "\e903";}
.icon-products4:before {content: "\e904";}
.icon-products5:before {content: "\e905";}
.icon-search:before {content: "\e906";}
.icon-window:before {content: "\e907";}

#funcBtns li#searchOpen span::before{content: "\e906"; font-size:20px; color:#83979d;}
#funcBtns li#regionOpen span::before{content: "\e900"; font-size:20px; color:#83979d;}

/* other window */
ul.iconLink li.newWindow a::after,
a.newWindow::after,
span.newWindow::after,
.listBox.linkBlank::after,
.linksWrap ul li.icon a::after,
#globalNav ul li .subGnav .menus ul li.blank a::after{content: "\e907"; padding-left:10px; color:#999;}
#globalNav ul li .subGnav .menus ul li.blank a::after{font-size:14px;}
#gNavSP ul li .subGnav .menus ul li.blank a::after{content: "\e907"; color:#fff;}
.productDetail .toBrandSite a::after{
  content: "\e907";
  position: absolute;
  top:40%;
  right:5%;
  color:#999;
}
.productDetail .toBrandSite a:hover::after{color:#fff;}

.listBox.linkBlank{line-height: inherit;}
.listBox.linkBlank::after{
  position: absolute;
  right:10px;
  bottom:10px;
  width:14px;
  height:14px;
}


  @media screen and (max-width:767px){
    ul.iconLink li.newWindow a::after,
    ul.iconLink.notChange li.newWindow a::after,
    .linksWrap ul li.icon a::after{
      top:32%; right:4%;
      width:inherit;
      height:inherit;
      border-top:none;
      border-right:none;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      content: "\e907"; padding-left:0; color:#999;
    }
    ul.iconLink.notChange li.newWindow a{
      background-color: inherit;
    }
    ul.iconLink.notChange li.newWindow a::after{
      position: relative;
      right:0;
      padding-left:10px;
    }
    #searchSet form::before{content: "\e906"; color:#999;}
  }