@charset "UTF-8";







/* subpage subject h1~h3 */
.sub_h1 {
    font-size: 56px;
    letter-spacing: -2px;
    font-weight: 800;
    line-height: 56px;
    color: #464646;
text-transform: uppercase;
}







.sub_h1 em {
    color: var(--color-blue);
}







.sub_h3 {
    font-size: 24px;
    letter-spacing: -0.5px;
    font-weight: 600;
    color: var(--color-light-grey);
    padding-left: 5px;







}







.sub_h4 {
    font-size: 24px;
    letter-spacing: -1px;
    font-weight: 400;
    color: #464646;
    line-height: 40px;
}







.sub_h4 em {
    font-weight: 700;
    color: var(--color-blue);
}











/* header */
#header {
    position:absolute;
    top: 0;
    z-index: 5;
    margin: 0 auto;
    width: 100%;
    background: rgba(0,45,87,0);
    /*background: url(/base/img/imgs/main/nav_bg.gif) center no-repeat;*/
    height: 111px;
    overflow: hidden;
    transition: all 0.1s ease;
    }






.header__unline {
    position: relative;
    top: 110px;
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.7);
}







.header__menu {
    text-align: right;
    padding-top: 15px;
    padding-right: 5%;
}






.header__menu__max1250 {
    display: none;
}






.header__menu span:first-child {
    margin-right: 12px;  
}






.header__menu span a{
    color: white;
}






.header__navwrap {
    display: flex;
    justify-content: flex-end;
    padding-top: 10px;
}






.header__logo {
    width: 15%;
    padding-left: 5%;
}






.header__logo a {
    background: url(/base/img/imgs/main/logo.png) no-repeat;
    background-size: 100% ;
    width: 180px;
    height: 40px;
    text-indent: -9999em;
    display: block;
}






.header__nav {
    width: 70.2%;
    position: relative;
    margin-top: 7px;
    
}






.header__nav > ul {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 50px;
}






.header__nav ul a {
    color: var(--color-white);
}






.header__navline {
    position: relative;
    height: 130px;
    top: 90px;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.3);
}






.header__nav > ul > li  {
    font-size: 16px;
    font-weight: var(--weight-regular);
    text-align: center;
    padding: 0 20px;
}






.header__nav > ul > li a:hover {
    color: var(--color-light-blue);
    transition: 0.1s ease-in-out;
}






.header__nav > ul > li > ul {
    margin-top: 80px;
    font-size: 16px;
    font-weight: var(--weight-regular);
}






.header__nav > ul > li > ul > li  {
    margin-bottom: 14px;
}






.header__ui {
    display: flex;
    justify-content: center;
    width: 12%;
    margin-top: 5px;
    text-align: right;
    padding-right: 6%;
}






.header__ui a {
    font-size: var(--font-regular);
    color: var(--color-white);
}






.header__copy {
    position: absolute;
    font-weight: var(--weight-bold);
    top: 95px;
    left: -16%;
    padding-right: 5%;
    padding-bottom: 5%;
    }






.header__copy div {
    height: 30px;
    color: var(--color-white);
    font-size: 22px;
}






.header__copy div em {
    color: var(--color-blue);
}
.header__copy div span {
    color: var(--color-light-blue);
    font-weight: var(--weight-semi-bold);
}






.header__copy a {
    margin-top: 40px;
    display: inline-block;
    color: var(--color-white);
    font-size: var(--font-micro);
    font-weight: 300;
}







/* topimg */
#topimg {






}
.topimg__wrap{
    position: relative;
    background: url(/base/img/imgs/sub/topimg01.png) no-repeat center;
    background-size: cover;
    height: 500px;
}







.topimg__text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -28%);
}
.topimg__wrap h1 {
    color: var(--color-white);
    font-weight: 800;
    font-size: 70px;
    line-height: 90px;
    text-align: center;
}







.topimg__wrap span {
    display: block;
    border-bottom: 1px solid var(--color-white);
}







.topimg__wrap p {
    color: var(--color-white);
    font-weight: 400;
    font-size: 22px;
    line-height: 40px;
    text-align: center;
}








/* submenu */
#submenu {
    position: relative;
}







.submenu__wrap {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
}







.submenu__wrap ul {
    display: flex;
    box-shadow: 2px 3px 3px rgba(0,0,0,0.3);
}







.submenu__wrap ul li {
    width: 200px;
    height: 80px;
    text-align: center;
    line-height: 80px;
    font-size: 16px;
    background-color: #fff;
    border-right: 1px rgb(223, 223, 223) solid;
}







.submenu__wrap ul li.home {
    position: relative;
       width: 150px;
    background-color: #313131;
    border: 0;
}







.submenu__wrap ul li.home .fa-house{
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}







.submenu__wrap ul li.active {
    background-color: var(--color-blue);
    border: 0;
}







.submenu__wrap ul li:last-child {
    border: 0;
}







.submenu__wrap ul li a {
    color: #222;
    display: block;
    width: 100%;
    height: 100%;
}







.submenu__wrap ul li.active a,.submenu__wrap ul li.home a{
    color: var(--color-white);
}







.submenu__wrap ul li a:hover {
    color: var(--color-light-grey);
}







.submenu__wrap ul li.active a:hover {
    color: var(--color-light-blue);
}














/* animate */







.animate {
    animation: fadeIn 1.2s forwards ease-in;
    transition: margin 0.8s ease-in ;
    }








@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
















/* footer */
.footer__warp {
    padding: 2% 8% 1% 5%;
    background-color: var(--color-dark-blue);
    margin-top: 100px;
    display: flex;
    justify-content:space-around;
    font-size: 1.3vw;    
    color: var(--color-white);
}








.footer__left span{
    color: var(--color-light-blue);
    font-weight: var(--weight-bold);
}







.footer__left p{
    margin-top: 15px;
    margin-bottom: 50px;
}








.footer__customer {
    color: var(--color-light-blue);
    font-weight: var(--weight-bold);
    margin-bottom: 15px;
    display: inline-block;
}







.footer__num {
    display: flex;
}








.footer__email {
    display: flex;
}







.footer__infobtn {
    display: flex;
    margin-top: 40px;
    font-size: var(--font-micro);
}







.footer__infobtn div {
    width: 120px;
    height: 26px;
    margin-left: 7px;
    background-color: #083660;
    font-weight: var(--weight-regular);    
    text-align: center;
    line-height: 26px;
    
}







.footer__infobtn div a {
    color: var(--color-white);
}








.footer__infobtn div:first-child {
    background-color: var(--color-white);
}







.footer__infobtn div:first-child a {
    color: #083660;;
}








.footer__copy {
    margin-top: 10px;
    font-size: 12px;
    color: var(--color-light-grey);
    font-weight: 300;
}







/* footer1250*/
#footer1250 {
    display: none;
    
}
.footer1250__warp {
    margin-top: 60px;
    background-color: var(--color-dark-blue);
    padding-top: 4%;
    padding-bottom: 4%;
    color: var(--color-white);
}
.footer__nm, .footer1250__nm {
    margin-top: 0;
}



.footer1250__info {
    text-align: center;
    font-size: 16px;
    line-height: 180%;
}







.footer1250__info p br {
    display: none;
}







.footer1250__info em {
    font-weight: 400;
    color: var(--color-light-blue);
}







.footer1250__infobtn {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    font-size: var(--font-micro);
}







.footer1250__infobtn div {
    width: 120px;
    height: 26px;
    margin-left: 7px;
    background-color: #083660;
    font-weight: var(--weight-regular);    
    text-align: center;
    line-height: 26px;
    
}







.footer1250__infobtn div a {
    color: var(--color-white);
}








.footer1250__infobtn div:first-child {
    background-color: var(--color-white);
}







.footer1250__infobtn div:first-child a {
    color: #083660;;
}








.footer1250__copy {
    margin-top: 10px;
    font-size: 12px;
    color: var(--color-light-grey);
    font-weight: 300;
    text-align: center;
}










/* ¾ÆÄÚµð¾ð¸Þ´º 1024 */
.accodion {display: none;}








.accodion__top {
  position: relative;
    height: 96px;
    background-color: var(--color-blue);
    padding: 23px 30px 23px 30px;
    display: flex;
    justify-content:space-between;
}







.accodion__top h2 {
    padding-top: 5px;
}







.accodion__right {
    line-height: 50px;
    color: var(--color-white);
}







.accodion__right div {
    margin-right: 70px;
    font-size: 14px;
}









.accodion__en a {
    color: var(--color-white);
}







.accodion__en .fa-caret-right {
    font-size: 10px;
    padding-right: 5px;
    margin-bottom: 1px;
}









.panel-question {
  background-color: rgb(233, 233, 233);
}







.panel-heading {
  font-weight: 500;
  padding-left: 35px;
  background-color: rgb(255, 255, 255);
  color: #494949;
  font-size: 22px;
  cursor: pointer;
  height: 80px;
  line-height: 80px;
  border-bottom: 1px solid rgb(216, 216, 216);
  letter-spacing: -1px;
}







.panel-body {
  padding: 25px 0 25px 50px;
  font-size: 17px;
  line-height: 40px;
  letter-spacing: -1px;
}







.panel-body li a {
  color: #494949;
}







#btn-collapse {
  position: absolute;
  top: 33px;
  right: 150px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 5px;
  float: right;
}









/* hamburger button */






.hamburger__button {
    position: absolute;
    transition: 0.3s ease-in-out;
    width: 24px;
    height: 16px;
    z-index: 999;
    top: 55px;
    right: 5%;
}






.hamburger__button a {
    width: 100%;
    height: 100%;
}






.hamburger__button span {
    position: absolute;
    height: 4px;
    border-radius: 4px;
    width: 100%;
    background: var(--color-white);
    top: 0; 
    transition: 0.2s;
}






.hamburger__button span:nth-child(1) {
    top: 0;
}






.hamburger__button span:nth-child(2), 
.hamburger__button span:nth-child(3) {
    top: 8px;
}






.hamburger__button span:nth-child(4) {
    top: 16px;
}






.hamburger__button.active {
    position: fixed;
}
.hamburger__button.active span:nth-child(1), 
.hamburger__button.active span:nth-child(4) {
    opacity: 0;
}






.hamburger__button.active span:nth-child(2) {
    transform: scale(2) rotate(45deg);
}






.hamburger__button.active span:nth-child(3) {
    transform: scale(2) rotate(-45deg);
}










/* hamburger nav */






@keyframes fadeInLeft {
    0% {opacity: 0; transform: translateX(-25%);}
    100% {opacity: 1; transform: translateX(0%);}
}
.hamburger__nav {
    position: fixed;
    background-color: var(--color-light-blue);
    width: 100%;
    height: 0;
    z-index: 99;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}






.hamburger__nav h1 {
    color: var(--color-white);
    font-size: 3.6vw;
    margin-top: 20vh;
    text-align: center;
    line-height: 3.3vw;
    font-weight: 200;
    font-family: 'Roboto', sans-serif;
    opacity: 1;
    text-transform: uppercase;
}






.hamburger__nav p {
    color: var(--color-white);
    font-size: 0.7vw;






    text-align: center;
    line-height: 1vw;
    font-weight: 200;
    opacity: 0.8;
}






.hamburger__nav span {
    width: 85%;
    height: 1px;
    background-color: var(--color-white);
    display: block;
    margin: 2% auto 0 auto;
}







.hamburger__nav.visible{
    height: 100%;
    opacity: 1;
    visibility: visible;
}






.hamburger__nav__wrap > ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    
}






.hamburger__nav__wrap .hamburger__nav__list {
    text-align: center;
    opacity: 0;
    margin-left: 2%;
    margin-right: 2%;
    margin-top: 4vh;
}






.hamburger__nav.visible .hamburger__nav__list{
    animation: fadeInLeft 0.3s ease forwards;
}






.hamburger__nav.visible .hamburger__nav__list:nth-child(1){
    animation-delay: 0.2s;
}
.hamburger__nav.visible .hamburger__nav__list:nth-child(2){
    animation-delay: 0.23s;
}
.hamburger__nav.visible .hamburger__nav__list:nth-child(3){
    animation-delay: 0.26s;
}
.hamburger__nav.visible .hamburger__nav__list:nth-child(4){
    animation-delay: 0.29s;
}
.hamburger__nav.visible .hamburger__nav__list:nth-child(5){
    animation-delay: 0.32s;
}
.hamburger__nav.visible .hamburger__nav__list:nth-child(6){
    animation-delay: 0.35s;
}






.hamburger__nav__wrap .hamburger__nav__list>a {
    color: var(--color-white);
    font-size: 2vw;
    font-weight: 700;
} 






.hamburger__nav__wrap .hamburger__nav__list > ul {
    margin-top: 20px;
} 






.hamburger__nav__wrap .hamburger__nav__list > ul > li {
    padding-top: 15px;
} 






.hamburger__nav__wrap .hamburger__nav__list > ul > li a {
    color: var(--color-white);
    font-weight: 500;
    font-size: 1.3vw;
    opacity: 0.8;
} 










/* È­¸é³Êºñ 0~1480px */
@media (max-width: 1480px){






    /* header */
    .header__nav > ul > li  {
        font-size: 16px;
        padding: 0 2%;
    }
    .header__ui  {
        padding-right: 7%;
    }
    .header__ui a {
        font-size: 16px;
    }






    /* footer */
    .footer__warp {
        margin-top: 80px;
        display: flex;
        justify-content:space-around;
        font-size: 1.4vw;    
        color: var(--color-white);
    }
    
    
    .footer__left span{
        color: var(--color-light-blue);
        font-weight: var(--weight-bold);
    }
    
    .footer__left p{
        margin-top: 5px;
        margin-bottom: 30px;
    }






    .footer__customer {
        margin-bottom: 5px;
    }






    .footer__email {
        line-height: 1.7vw;
    }






    .footer__infobtn a {
        font-size: 11px;
    }
    
    .footer__infobtn div {
        width: 100px;
        height: 22px;
        margin-left: 5px;
        line-height: 22px;
        
    }
}








/* È­¸é³Êºñ 0~1480px */
@media (max-width: 1480px){





    /* header */
    #header {
        height: 90px;
        }
    
    
    .header__menu__max1250 {
            display: none;
    }
        
    .header__navwrap {
        justify-content: flex-start;
        padding-top: 0;
    }
    
    .header__logo {
        width: auto;
        padding-top: 30px;
        left: 5%;
    }
    
    .header__nav {
        display: none;
    }
    
    .header__unline {
        position: relative;
        top: 90px;
        width: 100%;
        height: 1px;
        background-color: rgba(255, 255, 255, 0.7);
    }
    
    
    .header__ui {
        display: none;
    }
    
    
    
    /* Çܹö°Å¸Þ´º */
    .hamburger__nav {background-color: var(--color-white);}
    .hamburger__nav1024 {display: none;}
    
    
    /* ¾ÆÄÚµð¾ð¸Þ´º 1024 */
    .accodion {display: block;}
    
    
    /* hamburger button */
    .hamburger__button {
        top: 38px;
        right: 38px;
    }
    
    
    
    .hamburger__button.active span:nth-child(2) {
        transform: scale(1) rotate(45deg);
    }
    
    
    
    .hamburger__button.active span:nth-child(3) {
        transform: scale(1) rotate(-45deg);
    }
    
    }









/* È­¸é³Êºñ 0~1450px */
@media (max-width: 1450px){






    .header__menu {
        display: none;
    }
    
    
    .header__nav > ul > li  {
        font-size: 16px;
        padding: 0 1.2%;
    }
    
    
    
    .header__logo {
        width: 15%;
        padding-left: 3%;
    }
    
    
    
    .header__ui {
        padding-right: 3%;
        width: 8%;
    } 
    
    .header__ui a:first-child {
        display: none;
    }
    






/* footer */
#footer {
    display: none;
}
#footer1250 {
    display: block;
}



}









/* È­¸é³Êºñ 0~1250px */
@media (max-width: 1250px){









    /* sub title*/







    .sub_h1 {
        font-size: 4.4vw;
        line-height: 4.8vw;
    }
    
    .sub_h3 {
        font-size: 1.8vw;
        font-weight: 500;
    }




}

















/* È­¸é³Êºñ 0~800px */
@media (max-width: 800px){
    






/* submenu */





.submenu__wrap ul li {
    width: 23vw;
    height: 70px;
    font-size: 15px;
    line-height: 70px;
}







.submenu__wrap ul li.home {
    width: 24vw;
}







.submenu__wrap ul li.active {
    background-color: var(--color-blue);
    border: 0;
}







.submenu__wrap ul li:last-child {
    border: 0;
}







.submenu__wrap ul li a {
    color: #222;
    display: block;
    width: 100%;
    height: 100%;
}







.submenu__wrap ul li.active a,.submenu__wrap ul li.home a{
    color: var(--color-white);
}







.submenu__wrap ul li a:hover {
    color: var(--color-light-grey);
}







.submenu__wrap ul li.active a:hover {
    color: var(--color-light-blue);
}







}








/* È­¸é³Êºñ 0~670px */
@media (max-width: 670px){







 /* header */
    .header__logo {
    padding-top: 30px;
    }








/* sub title*/







.sub_h1 {
    font-size: 8vw;
    line-height: 8.6vw;
}
    
.sub_h3 {
    font-size: 2.6vw;
    font-weight: 400;
}









/* footer1250 */
.footer1250__warp {
    padding: 8% 4%;
}







.footer1250__info {
    font-size: 14px;
    line-height: 130%;
}







.footer1250__info p {
    padding-bottom: 2%;
}







.footer1250__info p:last-child {
    padding-bottom: 0;
}







.footer1250__infobtn {
    margin-top: 30px;
}







.footer1250__infobtn div a {
    font-size: 12px;
    font-weight: 500;
}







}









/* È­¸é³Êºñ 0~550px */
@media (max-width: 550px){









/* topimg */
.topimg__wrap{
    height: 350px;
}







.topimg__wrap h1 {
    font-size: 10vw;
    line-height: 13vw;
}








.topimg__wrap p {
    font-size: 3.4vw;
    line-height: 6vw;
}







/* submenu */








.submenu__wrap ul li {
    height: 60px;
    line-height: 60px;
    font-size: 14px;
}







/* footer1250 */
.footer1250__info p br {
    display: block;
}







}