@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.5/dist/web/static/pretendard-dynamic-subset.css");

*{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    -webkit-text-size-adjust:none;
    text-decoration:none;
    list-style:none;
    border:none;
    margin:0;
    padding:0;
    font-family:Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; 
}

/*#box { position:fixed; border:1px solid #000; right:0;  z-index: 9999; }*/
html, body {
    /*width:100vw;*/
    /*height:100vh;*/
    margin:0;
    padding:0;
  letter-spacing:-.5px;
    /*height: var(--app-height);*/
    /*overflow-x: hidden;*/
}
body {
    width:100%;
    justify-content:center;
    align-items:center;
    background-color:#fff;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    min-height:100vh;
    overflow-x:hidden;
}
body::-webkit-scrollbar {
    width: 8px;  /* 스크롤바의 너비 */
    visibility:hidden;
}
body::-webkit-scrollbar-thumb {
    height: 30%; /* 스크롤바의 길이 */
    background:rgba(255, 255 , 255, .3); /* 스크롤바의 색상 */
    background:rgba(1, 64, 153, .2);
    border-radius: 10px;
}
body::-webkit-scrollbar-track {
    background:#014099;  /*스크롤바 뒷 배경 색상*/
    opacity:.7;
    background:rgba(1, 64, 153, 1);
    background:rgba(0, 0, 0, .2);
}

/*
* 헤더
*/
/*네비게이션 바 시작*/
.navbar-def {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center;
    width:100%;
    /*height:110px;*/
    background-color:#fff;
    border-bottom:2px solid #d3d3d3;
    transition:all 0.250s;
    padding:20px 3%;
}
.navbar-fixed-top {
    position:fixed;
    top:0;
    right:0;
    z-index:1000;
}
.navbar-header {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    width:100%;
    max-width:1200px;
    margin:0 auto;
    position:relative;
}
.navbar-header>a {
    margin-top:2px;
    vertical-align:top;
}
.navbar-right {
    position:absolute;
    right:0;
    top:-3px;
}
.navbar-right ul li {
    display:flex;
    float:left;
}
.navbar-right ul a {
    color:#014099;
    font-weight:650;
    font-size:16px;
    width:auto;
    display:block;
    padding:15px 0;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.navbar-right ul li:first-child a {
    margin-right:29px;
}
.navbar-right ul li:last-child a {
    margin-right:56px;
}
/*햄버거 버튼 시작*/
.hamburger-button{
    width:26px;
    height:18px;
    height:15px;
    position:absolute;
    top:17px;
    right:0;
/*    display:flex;*/
}
.hamburger-button label{
    width:100%;
    height:100%;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
}
.hamburger-button:hover label {
    cursor:pointer;
}
.hamburger-button label * {
    margin:0;
    padding:0;
    pointer-events:none;
}
.hamburger-button-state {
    display:none;
}
.hambuger-button-icon {
    width:100%;
    height:2px;
    background:#014099;
    position:absolute;
    top:0;
    left:0;
    border-radius:5px;
    transform-origin:center;
    transition:.5s;
}
.hambuger-button-icon:nth-child(3) {
    top:49.5%;
}
.hambuger-button-icon:nth-child(4) {
    top:96%;
}
.hamburger-button-state:checked ~ .hambuger-button-icon:nth-child(2) {
    transform:translateY(400%) rotate(225deg);
}
.hamburger-button-state:checked ~ .hambuger-button-icon:nth-child(3) {
    transform:scale(0);
}
.hamburger-button-state:checked ~ .hambuger-button-icon:nth-child(4) {
    transform:translateY(-300%) rotate(-225deg);
}
.hamburger-button-state ~ #menu {
    transition:height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    display:none;
}
.hamburger-button-state:checked ~ #menu {
    transition:height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    display:block;
}
/*햄버거 버튼 끝*/


/*햄버거 하위- 숨김메뉴*/
#menu {
    position:fixed;
    /*top:97px;*/
    top:80px;
    width:100%;
    height:583px;
    background-color:#fff;
    z-index:9999;
    /*border-bottom:2px solid #d3d3d3;*/
    border-bottom:2px solid #a4a4a4;
    flex-direction:column;
    display:none;
}
#menu .menu-list.-mo {
    display:none;
}
#menu .menu-list.-pc {
    display:block;
}

.m-nav-menu {
    display:none; /* 모바일 전용 메뉴 가리기*/
}
.menu-list {
    margin:0 auto;
    max-width:1200px;
    /*padding-top:40px;*/
}
.menu-list>li {
    width:100%;
    border-bottom:1px solid #014099;
    /*padding-top:36px;
    padding-bottom:36px;*/
    /*display:inline-flex;
    align-items:center;*/
    /*display: flex; 
    flex-direction: column; 
    justify-content: center;*/
}
.menu-list>li {
    padding-top:70px;
    line-height:3.5em;
}
.menu-list>li::after,
.menu-list-dt::after {
    content:'';
    display:block;
    clear:both;
}
.menu-list>li>p {
    color:#004098;
    font-weight:800;
    font-size:24px;
    font-size:58px;
    font-size:3.62em;
    width:37.75%;
    max-width:37.75%;
    text-align:left;
    margin-top:-4px;
    cursor:context-menu;
}
.menu-list>li>p,
.menu-list-dt>li {
    float:left;
}
.menu-list-dt>li {
    display:inline-block;
    margin-right:4.85%;
    position:relative;
    vertical-align:top;
    line-height:3.6em;
}
.menu-list-dt>li::after {
    content:'/';
    position:absolute;
    top:0;
    right:-2.3em;
    font-size:14px;
    font-weight:300;
}
.menu-list-dt>li>a {
    color:#000;
    font-size:1.25em;
    font-weight:500;
    display:block;
}
.menu-list-dt>li:last-child {
    margin-right:0;
}
.menu-list-dt>li:last-child::after {
    display:none;
}
/*햄버거 하위- 숨김메뉴 끝*/
/*
* 헤더 끝
*/


footer {
    background-color:#000;
    width:100%;
    padding-top:65px;
    padding-bottom:65px;
}
.footer {
    margin:0 auto;
    max-width:1200px;
}
.footer>h1,
.footer>div {
    display:inline-block;
}
.footer>div {
    margin-left:66px;
    margin-top:10px;
    vertical-align:top;
}
.footer p:first-child {
    font-size:20px;
    font-weight:500;
    color:#fff;
}
.footer p:nth-child(2) {
    font-size:14px;
    font-weight:300;
    color:#c1c1c1;
    line-height:1.4em;
}
.footer p:last-child {
    font-size:12px;
    font-weight:300;
    color:#fff;
}
.footer p:nth-child(2)>span {
    font-size:14px;
}
.footer p:not(:last-child) {
    margin-bottom:9px;
}
.footer p>a {
    font-weight:500;
    color:#014099;
}
.m_address {
    display:none;
    color:#fff;
    font-weight:300;
}



/*
* 미디어쿼리 시작
*/
/*랩탑용*/
@media (min-width: 1280px) and (max-width:1366px) {

    .navbar-def {
        height:82px;
        padding:20px 9.4em;
    }
    #menu {
        top:81px;
        height:auto;
        padding:6.5em 0 8.5em;
    }
    .menu-list {
        padding:0 4.2em;
    }
    .menu-list>li:first-child {
        padding-top:0;
    }
    .menu-list>li:not(:first-child) {
        padding-top:5em;
    }
    .menu-list>li>p {
        font-size:4.3vw;
    }
    .menu-list-dt>li:first-child {
        margin-left:4.5em;
    }
    .menu-list-dt>li {
        font-size:.9em;
        padding-bottom:.3em;
        margin-top:.3em;
    }
    .menu-list-dt>li>a {
        /*margin-top:.5em;*/
    }
    
    footer {
        padding:2.2em 7em;
    }
    .footer {
        padding:0 3.5%;
    }
    .footer>h1 {
        width:11.2vw;
    }
    .footer>div {
        margin-left:3.5em;
        margin-top:4px;
        vertical-align:top;
    }
    .footer>h1>img {
        width:100%;
    }
    .footer p:first-child {
        font-size:1.4vw;
    }
    .footer p:nth-child(2) {
        font-size:1vw;
    }
    .m_address {
        display:none;
    }
    
    
    
}

@media (min-width: 1024px) and (max-width: 1279px) {
    
    .navbar-def {
        display:-webkit-box;
        display:-webkit-flex;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-align:center;
        -webkit-align-items:center;
        -ms-flex-align:center;
        align-items:center;
        width:100%;
        height:74px;
        background-color:#fff;
        border-bottom:2px solid #d3d3d3;
        transition:all 0.250s;
        padding:20px 4.9em;
    }
    .navbar-header>a {
        margin-top:4px;
    }
    .navbar-header>a>img {
        width:80%;
    }
    .navbar-right {
        top:-5px;
    }
    #menu {
        top:73px;
        height:auto;
        padding:6em 0 7.5em;
    }
    .menu-list {
        padding:0 4.9em;
    }
    .menu-list>li:first-child {
        padding-top:0;
    }
    .menu-list>li:not(:first-child) {
        padding-top:5em;
    }
    .menu-list-dt>li::after {
        right:-2em;
    }
    .menu-list>li>p {
        font-size:4.3vw;
    }
    .menu-list-dt>li:first-child {
        margin-left:3em;
    }
    .menu-list-dt>li {
        font-size:.9em;
    }
    
    footer {
        padding:2.2em 3em;
    }
    .footer {
        padding:0 3.5%;
    }
    .footer>h1 {
        width:14.2vw;
    }
    .footer>div {
        margin-left:2em;
        margin-top:4px;
        vertical-align:top;
    }
    .footer>h1>img {
        width:100%;
    }
    .footer p:first-child {
        font-size:1.6vw;
    }
    .footer p:nth-child(2) {
        font-size:1.24vw;
    }
    .m_address {
        display:none;
    }
}


@media (min-width: 768px) and (max-width: 1023px) {
    /*헤더*/
    .navbar-def {
        width:100%;
        height:81px;
        padding:20px 6%;
    }
    .navbar-header>a {
        display:block;
        margin-top:4px;
    }
    .navbar-header>a>img {
        width:100%;
    }
    .hamburger-button {
        width:40px;
        top:15px;
    }
    .hambuger-button-icon {
        top:-9%;
    }
    .hambuger-button-icon:nth-child(3) {
        top:50%;
    }
    .hambuger-button-icon:nth-child(4) {
        top:108%;
    }
    .hamburger-button-state:checked ~ .hambuger-button-icon:nth-child(2) {
        transform: translateY(290%) rotate(225deg);
    }
    .hamburger-button-state:checked ~ .hambuger-button-icon:nth-child(4) {
        transform: translateY(-290%) rotate(-225deg);
    }
    #menu {
        position:fixed;
        top:80px;
        height:100%;
        border-bottom:none;
        overflow-y:scroll;
        background-color:transparent;
    }
    #menu .menu-list.-mo {
        display:block;  
    }
    #menu .menu-list.-pc {
        display:none;
    }

    /*버튼 2개 드롭다운 변형 설정*/
    .navbar-right>.nav-menu {
        display:none; /*기존 메뉴 및 우측 내비 가리기*/
    }
    .navbar-col1,
    .m-nav-menu {
        display:block;  /* 모바일 전용 메뉴 보이기*/
        margin:0;
    }
    .m-nav-menu::after {
        content:'';
        display:block;
        clear:both;
    }
    .navbar-col1 ul li {
        display:block;
        float:left;
        width:50%;
        text-align:center;
        position:relative;
    }
    .navbar-col1 ul li>a {
        display:block;
        width:100%;
        color:#fff;
        font-size:1.7em;
        background-color:#004098;
        line-height:3em;
    }
    .navbar-col1 ul li:first-child::after {
        content:'';
        width:1px;
        height:17px;
        background-color:#fff;
        position: absolute;
        right: 0;
        top:50%;
        margin-top:-8px;
    }
    .menu-list.-mo {
        margin:0 auto;
        padding-bottom:12vh; /* 이 속성값 제외하면 휴대기기 메뉴 펼침 시 하단 잘림*/
    }
    .menu-list>li {
        display:block;
        width:100%;
        padding-bottom:0;
        padding-top:0;
    }
    .menu-list.-mo>li:not(:first-child)>p {
        border-top:1px solid #000;
    }
    .menu-list>li>p {
        float:none;
        width:100%;
        padding-left:6%;
        padding-right:6%;
        padding-top:5vh;
        padding-bottom:5vh;
        max-width:none;
        text-align:left;
        margin-top:-4px;
        position:relative;
        font-size:4.5vh;
        border-bottom:1px solid #000;
        background:#fff;
    }
    .menu-list>li>p::after {
        content:'';
        position:absolute;
        display:block;
        background-image:url(../imgs/m_arrow.png);
        background-size:cover;
        width:39px;
        height:16px;
        top:48%;
        right:1.05em;
    }
    .menu-list-dt>li {
        width:100%;
        margin-right:3.5%;
        margin-right:0;
        margin:0;
        padding-left:6%;
        padding-right:6%;
        background-color:#f4f4f4;
        line-height:5.4em;
    }
    .menu-list>li::after,
    .menu-list-dt>li::after {
        display:none;
    }
    .menu-list-dt>li:first-child {
        padding-top:5.5vh;
    }
    .menu-list-dt>li:last-child{
        padding-bottom:5.5vh;
    }
    .menu-list-dt>li:not(:last-child) {
        padding-bottom:5.5vh
    }
    .menu-list-dt>li>a {
        font-size:1.8em;
    }
    .menu-list>li>.turnOn::after {
        -webkit-transition: all 0.3s ease-out;
        -moz-transition: all 0.3s ease-out;
        -ms-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
        transform:rotate(-180deg);
    } 
    .menu-list>li>.turnOff::after {
        -webkit-transition: all 0.3s ease-out;
		-moz-transition: all 0.3s ease-out;
		-ms-transition: all 0.3s ease-out;
		-o-transition: all 0.3s ease-out;
		transition: all 0.3s ease-out;
        transform:rotate(0deg);
    } 
    .p_address {
        display:none;
    }
    footer {
        padding:0;
    }
    .footer {
        margin:0 2.6em;
        padding:4.5vh 0;
    }
    .footer>div {
        margin:0 auto;
        margin-left:2.7em;
    }
    .footer>h1 {
        display: none;
    }
    .footer p:first-child {
        font-size:2.3vh;
        font-size:2.7vw;
        margin-top:.3em;
    }
    .m_address {
        display:block;
        font-size:1.7vh;
        font-size:2.3vw;
        line-height:1.45em;
    }
    .m_address.mm {
        display:none;
    }
    .footer p:last-child {
        font-size:2.1vw;
    }
}


@media (max-width: 767px) {

    /*헤더*/
    .navbar-def {
        width:100%;
        height:71px;
        padding:20px 6%;
    }
    .navbar-header>a {
        display:block;
        width:106px;
        margin-top:4px;
    }
    .navbar-header>a>img {
        width:100%;
    }
    .hamburger-button {
        top:9px;
    }
    #menu {
        position:fixed;
        top:70px;
        height:100%;
        border-bottom:none;
        overflow-y:scroll;
        background-color:transparent;
    }
    #menu .menu-list.-mo {
        display:block;  
    }
    #menu .menu-list.-pc {
        display:none;
    }

    /*버튼 2개 드롭다운 변형 설정*/
    .navbar-right>.nav-menu {
        display:none; /*기존 메뉴 및 우측 내비 가리기*/
    }
    .navbar-col1,
    .m-nav-menu {
        display:block;  /* 모바일 전용 메뉴 보이기*/
        margin:0;
    }
    .m-nav-menu::after {
        content:'';
        display:block;
        clear:both;
    }
    .navbar-col1 ul li {
        display:block;
        float:left;
        width:50%;
        text-align:center;
        position:relative;
    }
    .navbar-col1 ul li>a {
        display:block;
        width:100%;
        padding:7% 0;
        color:#fff;
        font-size:1em;
        background-color:#004098;
        line-height:1.4em;
    }  
    .navbar-col1 ul li:first-child::after {
        content:'';
        width:1px;
        height:17px;
        background-color:#fff;
        position: absolute;
        right:0;
        top:47.5%;
        margin-top:-8px;
      opacity:.5;
    }
    .menu-list.-mo {
        margin:0 auto;
        max-width:767px;
        padding-bottom:12vh; /* 이 속성값 제외하면 휴대기기 메뉴 펼침 시 하단 잘림*/
    }
    .menu-list.-mo>li {
        width:100%;
        padding-bottom:0;
        padding-top:0;
    }
    .menu-list.-mo>li:not(:last-child) {
        border-top:2px solid #000;
    }
    .menu-list.-mo>li:not(:first-child)>p {
        border-top:1px solid #000;
    }
    .menu-list>li>p {
        float:none;
        width:100%;
        padding-left:6%;
        padding-right:6%;
        padding-top:2vh;
        padding-bottom:2vh;
        max-width:none;
        text-align:left;
        margin-top:-4px;
        position:relative;
        font-size:9vw;
        background:#fff;
    }
    .menu-list>li>p::after {
        content:'';
        position:absolute;
        display:block;
        background-image: url(../imgs/m_arrow.png);
        background-size:cover;
        width:17px;
        height:7px;
        top:48%;
        right:8%;
    }
    .menu-list-dt>li {
        width:100%;
        margin-right:3.5%;
        margin-right:0;
        margin:0;
        padding-left:6%;
        padding-right:6%;
        background-color:#f4f4f4;
        line-height:2.4em;
    }
    .menu-list>li::after,
    .menu-list-dt>li::after {
        display:none;
    }
    .menu-list-dt>li:first-child {
        padding-top:4vh;
    }
    .menu-list-dt>li {
        padding-bottom:4vh;
    }

    .menu-list-dt>li>a {
        font-size:1.2em;
    }
    .menu-list-dt {
        border-top:1px solid #000;
        border-bottom:1px solid #000;
    }
    .menu-list>li>.turnOn::after {
        -webkit-transition: all 0.3s ease-out;
		-moz-transition: all 0.3s ease-out;
		-ms-transition: all 0.3s ease-out;
		-o-transition: all 0.3s ease-out;
		transition: all 0.3s ease-out;
        transform:rotate(-180deg);
    } 
    .menu-list>li>.turnOff::after {
        -webkit-transition: all 0.3s ease-out;
		-moz-transition: all 0.3s ease-out;
		-ms-transition: all 0.3s ease-out;
		-o-transition: all 0.3s ease-out;
		transition: all 0.3s ease-out;
        transform:rotate(0deg);
    } 

    
    footer {
		padding:2vh 0;
    }
    footer .footer {
        max-width:767px;
        padding:0 7%;
    }
    .footer>div>p:not(:last-child) {
        margin-bottom:2px;
    }
    .footer>div>p:first-child {
        font-size:4vw;
    }
    .footer>div>p:last-child {
        font-size:3vw;
    }
    .footer>h1,
    .p_address {
        display:none;
    }
    .footer>h1 {
       
    }
    .footer>div {
        margin:0;
        padding:.5em 0;
    }
    .m_address.mm {
        display:block;
        font-size:3vw;
        font-weight:300;
        color:#fff;
        line-height:1.4em;
        padding-top:.2em;
    }
    
 
}