@charset "UTF-8";

/* 자동등록방지 이미지 사이즈지정 */
#captcha {
    width: auto;
}

/* 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;
    margin-top: 60px;
}



.footer1250__warp {
    background-color: var(--color-dark-blue);
    padding-top: 4%;
    padding-bottom: 4%;
    color: var(--color-white);
}
.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;
}



}