* {
    box-sizing: border-box;
}
html, body {
    position: relative;
    height: 100%;
}
    /* .header_box{position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 99; width: 100%;} */
    #header_wrap { background:#fff; width:100%; height:137px; z-index:99; }
    #header_wrap .wrapper { position:relative; display: flex; align-items: center; justify-content: space-between; gap: 32px; width:100%; max-width:1300px; height:100%; margin:0 auto;}
    #header_wrap .wrapper .logo img { height: 56px;}
    #header_wrap .tip { position:absolute; left:27%; top:42px; z-index:9;}
    #header_wrap .tip li{ float:left; font-size:1.05em; font-weight:600; color: rgba(34,34,34,1.0); line-height:1.0em; }
    #header_wrap .tip li:nth-child(2) .link:before{ display: inline-block; content: ''; top:0; margin:0 12px; width: 1px; height: 12px; background-color: rgba(34,34,34,0.5);} 
    #header_wrap .tip li:nth-child(3) .link:before{ display: inline-block; content: ''; top:0; margin:0 12px; width: 1px; height: 12px; background-color: rgba(34,34,34,0.5);} 
    #header_wrap .tip li:nth-child(4) .link:before{ display: inline-block; content: ''; top:0; margin:0 12px; width: 1px; height: 12px; background-color: rgba(34,34,34,0.5);} 
    
    #header_wrap .login ul { display: flex; align-items: center;}
    #header_wrap .login li{margin:0 6px; }
    #header_wrap .login li .link {display: flex; align-items: center; justify-content: center; font-size: 16px; color: #252525; line-height:1.0em; font-weight: 400; }
    #header_wrap .login li .link:hover { color: #e46c65;}
    #header_wrap .login li a::after{content: ""; display: block; width: 1px; height: 15px; background-color: #252525; margin-left: 10px;}
    #header_wrap .login li:last-child a::after {display: none;}
    #header_wrap .login li a.yt::after{display: none;}
    #header_wrap .login li .name {display: flex; align-items: center; font-size:1.05em; color: #252525; line-height:1.0em;font-weight: 500;}
    #header_wrap .login li .ct { color:#252525;}
    #header_wrap .login li .ct:hover { color:#e46c65;}
    #header_wrap .login .youtubeBtn {width: 28px;}

    /* 푸터 */
    #footer{ background:#f8f8f8; width:100%; padding-bottom:35px; z-index:9; border-top: 1px solid #c8c8c8;}
    #footer .wrapper{width: 100%; max-width:1300px; margin:0 auto; overflow:hidden;display: flex;justify-content: space-between;}
    #footer .copyright{ float:left; border-left:0px #6c6c6c solid; padding-left:0; padding-top: 35px;}
    #footer .copyright .admin li {display:inline-block; border-left:0px #dcdcdc solid; padding:0 5px; font-weight:500; line-height:25px;}
    #footer .copyright .admin li:first-child{ padding:0;}
    #footer .copyright .admin a{ font-size:14px; color:#000;}
    #footer .copyright .address { margin-top:10px; font-size:13px !important; color:#555; line-height:21px; letter-spacing:-0.5px;}

    .footer_logo {padding-top: 47px;}
    .f_box{display: flex; gap: 50px;}
    .familysite {
        background-color: #eeeeee;
        padding: 10px 15px;
        border-radius: 0 0 15px 15px;
        width: 130px;
        height: 40px;
    }

    .familysite select {
        background-color: transparent;
        border: none;
        outline: none;
    }
    .top_bar{
        background-color: #1b68bd;
        font-weight: 300;
    }
    .top_bar .right a{
        font-size: 16px;
    }
    .main_old_btn {
        display: none !important;
    }
   

@media (min-width:768px) and (max-width:1299px){
        
    #header_wrap { background:#fff; width:100%;  z-index:9; border-bottom: 1px solid #dbdbdb; height: 80px;}
    #header_wrap .wrapper { position:relative; width:95%; min-width:90%; margin:0 auto; height: 80px; }
    #header_wrap .wrapper .logo { display: flex; align-items: center; justify-content: space-between; height: 100%;}
    #header_wrap .wrapper .logo img { height: 60px;}
    #header_wrap .login { display:none; }
    #header_wrap .tip { position:absolute; left:280px; top:35px; z-index:9;}
    #header_wrap .tip li{ float:left; font-size:1.0em; font-weight:600; color: rgba(34,34,34,1.0); line-height:1.0em; }
    #header_wrap .tip li:nth-child(2) .link:before{ display: inline-block; content: ''; top:0; margin:0 12px; width: 1px; height: 12px; background-color: rgba(34,34,34,0.5);} 
    #header_wrap .tip li:nth-child(3) .link:before{ display: inline-block; content: ''; top:0; margin:0 12px; width: 1px; height: 12px; background-color: rgba(34,34,34,0.5);} 
    #header_wrap .tip li:nth-child(4) .link:before{ display: inline-block; content: ''; top:0; margin:0 12px; width: 1px; height: 12px; background-color: rgba(34,34,34,0.5);} 

    #header_wrap .login li{float:left; margin:0 6px; }
    #header_wrap .login li .link {display: block; font-size:1.05em; color: rgba(131,131,131,1.0); line-height:1.0em; font-weight: 400; }
    #header_wrap .login li .link:hover { color:#000000;}
    #header_wrap .login li .name {display: block; font-size:1.05em; color: rgb(0, 0, 0); line-height:1.0em; font-weight: 400; }
    #header_wrap .login li .name:hover { color:#000000;}
    #header_wrap .login li .ct { color:#9c00ff;}
    #header_wrap .login li .ct:hover { color:#9c00ff;}

    /* 푸터 */
    #footer{ background:#f8f8f8; width:100%; padding-bottom:35px; z-index:9; border-top: 1px solid #c8c8c8;}
    #footer .wrapper{ width:90%; margin:0 auto; overflow:hidden; position: relative; justify-content: space-between;}
    #footer .copyright{ display:block; border-left:0px #6c6c6c solid; padding-left:0; padding-top: 30px;}
    #footer .copyright .admin li {display:inline-block; border-left:0px #dcdcdc solid; padding:0 5px; font-size:15px; font-weight:500; line-height:25px;}
    #footer .copyright .admin li:first-child{ padding-left:0;}
    #footer .copyright .admin a{ font-size:14px; color:#000;}
    #footer .copyright .address { width:70%; margin-top:10px; font-size:13px !important;color:#555; line-height:21px; letter-spacing:0.5px;}

    .footer_logo {padding-top: 81px;}
    #footer .footer_logo img { width:220px;}

    .familysite {
        position: absolute;
        left: 0px;
        top: 0;
        background-color: #eeeeee;
        padding: 10px 15px;
        border-radius: 0 0 15px 15px;
        width: 130px;
        height: 40px;
    }

    .familysite select {
        background-color: transparent;
        border: none;
        outline: none;
    }
}


@media (max-width:767px){
    html { background:#fff;
    text-decoration:none; font-size:14px; font-weight:400; color:#444; letter-spacing:0; line-height:1.5em; word-break:keep-all;/* 1 */
    -ms-text-size-adjust: 100%; /* 2 */
    -webkit-text-size-adjust: 100%; /* 2 */
    }

        
    #header_wrap {position: relative; background:#fff; width:100%; z-index:9; height: 70px; border-bottom: 1px solid #dbdbdb;}
    #header_wrap .wrapper { position:relative; width:90%; margin:0 auto; height: 100%;}
    #header_wrap .wrapper .logo { display: flex; align-items: center; justify-content: space-between; height: 100%;}
    #header_wrap .wrapper .logo img { height: 36px;}
    #header_wrap .login { display:none; }
    #header_wrap .tip { display:none; }
    #header_wrap .search_form {display: none;}

    /* 푸터 */
    #footer{ background:#f8f8f8; width:100%; padding-bottom:30px; z-index:9; border-top: 1px solid #c8c8c8;}
    #footer .wrapper{ width:90%; margin:0 auto; overflow:hidden; position: relative; flex-direction: column;}
    #footer .copyright{ display:block; border-left:0px #6c6c6c solid; padding-left:0;padding-top: 20px;}
    #footer .copyright .admin li {display:inline-block; border-left:0px #dcdcdc solid; padding:0 5px;font-size: 1rem; font-weight:500; line-height:25px;}
    #footer .copyright .admin li:first-child{ padding:0;}
    #footer .copyright .admin a{ color:#000;}
    #footer .copyright .address { width:85%; margin-top:10px;font-size: 0.8rem;color:#555; line-height:20px; letter-spacing:0.5px;}

    .footer_logo {padding-top: 78px;}
    #footer .footer_logo img { width:180px;}

    .familysite {
        position: absolute;
        left: 0px;
        top: 0;
        background-color: #eeeeee;
        padding: 7px 10px;
        border-radius: 0 0 15px 15px;
        width: 156px;
        height: 40px;
    }

    .familysite select {
        background-color: transparent;
        border: none;
        outline: none;
        font-size: 1rem;
        width: 135px;
    }
}

/* header */
.top_bar .inner {
    width: 100%;
    max-width: 1300px;
    height: 37px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.top_bar .top_txt {
    display: flex;
    line-height: 45px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: #000;
    padding: 0 24px;
    letter-spacing: -0.07em;
    background: linear-gradient(90deg, rgba(238, 252, 82, 1) 0%, rgba(248, 206, 98, 1) 33%, rgba(190, 231, 75, 1) 66%, rgba(238, 252, 82, 1) 100%);
}

.top_bar .left {
    color: #000;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 14px;
}

.top_bar .left a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: -0.02em;
    border-right: 1px solid #fff;
}
.top_bar .left a.on {
    height: 100%;
    padding: 0 20px;
    background-color: #fff;
    color: #000;
}

.top_bar .left a:hover {
    font-weight: 600;
}
.top_bar .right{
    display: flex;
    align-items: center;
}
.top_bar .right a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 16px;
    font-size: 14px;
    color: #fff;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
}


/* main-nav */
.main-nav {

    width: 100%;
    margin: 0 auto;
    background-color: #fff;
    border-top: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
    position: relative;
    z-index: 99;
  }
  
  .gnb {
    max-width: 1300px;
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    list-style: none;
    margin: 0 auto;
  }
  
  .gnb > li {
    position: relative;
    width: calc(100% / 7);
  }
  
  .gnb > li > a {
    position: relative;
      display: block;
      width: 100%;
    text-decoration: none;
    font-weight: 400;
    font-size: 20px;
    text-align: center;
    color: #252525;
  }
  .gnb > li a.blank_icon::after{
    content: "";
    position: absolute;
    bottom: 5px;
    right: 43px;
    display: block;
    width: 13px;
    height: 13px;
    background: url(../img/main/aka/arrow_go.png)no-repeat center;
    opacity: 0;
    transition: all .5s;
  }
  .gnb > li a.blank_icon:hover::after{
    opacity: 1;
  }

  .gnb > li > a > p{
    font-size: 12px;
  }
  /* 서브메뉴 전체 */
  .all-submenu {
    display: none;
    position: absolute;
    top: 81px;
    left: 0;
    width: 100%;
    background-color: #faf9fb;
    /* box-shadow: 0 4px 10px rgba(0,0,0,0.7); */
    z-index: 100;
  }
  
  .all-submenu > ul {
    width: 1300px;
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0 auto;
    border-left: 1px solid #e0e0e0;
  }
  
  .all-submenu > ul >li {
      width: calc(100% / 7);
      text-align: center;
      border-right: 1px solid #e0e0e0;
    }
  
  .all-submenu ul li ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .all-submenu ul li ul li {
    margin: 6px 0;
    padding: 10px 0;
    border: none;
  }
  
  .all-submenu ul li ul li a {
      text-decoration: none;
      color: #252525;
      font-size: 17px;
      font-weight: 400;
    }
    .all-submenu ul li ul li a p{
        font-size: 12px;
        font-weight: 400;
    }
    .all-submenu ul li ul li a span {
        display:inline-block;
        width: 100%;
        font-size: 12px;
    }
  
  .all-submenu ul li ul li a.highlight {
    color: #e46c65;
    font-weight: bold;
  }
  
  .all-submenu ul li ul li a:hover {
    color: #e46c65;
  }
  
  @media (max-width:1300px) {
    .main-nav {
        display: none;
    }
}
/* button_box */
.button_box {
    display: flex;        
    flex-direction: column;
    gap: 10px;            
    align-items: center;
    z-index: 999;
}

.button_box img {
    width: 60px;
    cursor: pointer;
}

@media (min-width:1300px) {
    .top_box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 80%;
        height: 10vh;
        margin: 0 auto;
    }
    .top_box h2 {
        font-size: 1.1rem;
        line-height: 1.3;
        font-weight: 500;
        padding-left: 10px;
        margin-left: 10px;
        border-left: 2px solid #fff;
    }
    .customer_text {
        font-size: 1.4rem;
        font-weight: 600;
        line-height: 1.2;
        color: #fff;
        border-left: 1px solid #fff;
        padding-left: 20px;
    }
    .customer_text > div {
        font-size: 1.1rem;
        font-weight: 300;
        padding-top: 5px;
        color: #fff;
        line-height: 1.4;
    }

    .panel_box:hover .panel {
        flex: 1; /* 기본 상태 */
    }
      
    .panel_box:hover .panel:hover {
        flex: 1.5; /* 마우스 올린 패널만 확대 */
    }

    .portal_footer {
        width: 80%;
        height: 15vh;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

@media (min-width:768px) and (max-width:1299px) {
    body{
        margin-top: 0;
    }
    .top_bar .inner {
        width: 95%;
    }
    .top_bar .right {
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: .8571rem;
        margin-left: .5714rem;
    }
    .top_box {
        display: block;
        width: 90%;
        height: 10vh;
        margin: 0 auto;
    }
    .top_left  {
            justify-content: flex-start;
            margin-bottom: 2%;
    }
    .top_right  {
            justify-content: flex-start;
    }
    .down_box img {
        width: 100px;
    }
    .top_box h2 {
        font-size: 1.1rem;
        line-height: 1.3;
        font-weight: 500;
        padding-left: 10px;
        margin-left: 10px;
        border-left: 2px solid #fff;
    }
    .pfooter_box {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding-left: 5%;
    }
    .copy {
        font-size: 1rem;
        font-weight: 300;
        line-height: 1.3;
        margin: 0 3%;
    }
    .customer_text {
        font-size: 1.3rem;
        font-weight: 600;
        line-height: 1.2;
        color: #fff;
        padding-left: 20px;
    }
    .customer_text > div {
        font-size: 1rem;
        font-weight: 300;
        padding-top: 5px;
        color: #fff;
        line-height: 1.4;
    }
    .panel_box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 90%;
        height: 50vh;
        overflow: hidden;
    }
    .panel_box:hover .panel {
        flex: 1; /* 기본 상태 */
    }
      
    .panel_box:hover .panel:hover {
        flex: 1.5; /* 마우스 올린 패널만 확대 */
    }
    .panel {
        width: 25%;
        flex: none;
        height: 50vh;
    }

    .panel_img_box {
        position: relative;
        width: 100%;
        height: 50vh;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    .panel_textBox {
        width: 80%;
        display: block;
        position: absolute;
        left: 5%;
        top: 20%;
        color: #fff;
        transition: top 0.5s ease;
    }
    .panel_num {
        position: relative;
        font-size: 4rem;
        font-weight: 100;
        display: inline-block;
        margin-bottom: 30px;
    }      
    .panel_num::after {
        content: '+';
        position: absolute;
        top: 75%;
        left: 30%;
        font-size: 3rem;
        color: #fff;
        transition: all 0.5s ease;
    }
    .panel_txt {
        display: none;
        font-size: 1em;
        line-height: 1.3;
        font-weight: 300;
    }
    .panel_txt2 {
        display: none;
        font-size: 2.6em;
        font-weight: bold;
    }
    .panel_title {
        font-size: 2.3em;
        font-weight: bold;
        opacity: .5;
    }
    .panel_title2 {
        display: none;
        font-size: 1.8em;
        font-weight: bold;
        opacity: .5;
    }
    
    /* button_box */
    .button_box {
        position: fixed;
        right: 5%;    
        bottom: 50px;
        display: flex;        
        flex-direction: column;
        gap: 10px;            
        align-items: center;
        z-index: 999;
    }

    .button_box img {
        width: 50px;
        cursor: pointer;
    }
    .portal_footer {
        width: 90%;
        height: 15vh;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .portal_footer .inner {
        display: none;
    }
}
@media (max-width:1024px) {
    .top_bar .right {
        display: none;
    }
}
@media (max-width:767px) {
    body{
        margin-top: 0;
    }
    .top_bar .inner {
        width: 100%;
        padding-left: 16px;
    }
    .top_bar .left {
        width: 100%;
    }
    .top_box {
        width: 90%;
        margin: 0 auto;
    }
    .top_box h2 {
        font-size: 1rem;
        line-height: 1.3;
        padding-left: 10px;
        border-left: 2px solid #fff;
    }
    .top_right {
        padding-top: 5%;
    }
    .top_right .link_box {
        display: none;
    }
    .top_right .mlink_box {
        display: block;
    }
    .top_right .mlink_box img {
        width: 10vw;
        margin-right: 5px;
    }
    .top_rightText {
        font-size: 1rem;
        padding: 0;
    }
    .top_rightText a:last-child {
        margin: 0;
        padding-left: 5px;
    }
    .customer_box img {
        width: 40px;
        height: 40px;
    }
    .customer_text {
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.2;
        color: #fff;
        border-left: 1px solid #fff;
        padding-left: 10px;
    }
    .customer_text > div {
        font-size: 0.8rem;
        font-weight: 300;
        padding-top: 5px;
        color: #fff;
        line-height: 1.4;
    }
    .down_box img {
        width: 17vw;
    }
    .panel_box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        width: 90%;
        height: 65vh;
        overflow: hidden;
    }
    .panel {
        width: 48%;
        flex: none;
        height: 30vh;
    }

    .panel_img_box {
        position: relative;
        width: 100%;
        height: 30vh;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    .panel_textBox {
        width: 90%;
        display: block;
        position: absolute;
        left: 5%;
        top: 10%;
        color: #fff;
        transition: top 0.5s ease;
    }
    .panel_num {
        position: relative;
        font-size: 2rem;
        font-weight: 100;
        display: inline-block;
        margin-bottom: 30px;
    }      
    .panel_num::after {
        content: '+';
        position: absolute;
        top: 115%;
        left: 25%;
        font-size: 2rem;
        color: #fff;
        transition: all 0.5s ease;
    }
    .panel_txt {
        display: block !important;
        font-size: 1rem;
        line-height: 1.3;
        font-weight: 300;
    }
    .panel_txt2 {
        display: block !important;
        font-size: 1.6em;
        font-weight: bold;
        padding-top: 10%;
    }
    .panel_title {
        display: none !important;
    }
    .panel_title2 {
        display: none !important;
    }
    #portalClose {
        font-size: 1rem;
        top: 0.5%;
    }
    /* button_box */
    .button_box {
        position: fixed;
        right: 5%;    
        bottom: 50px;
        display: flex;        
        flex-direction: column;
        gap: 10px;            
        align-items: center;
        z-index: 999;
    }

    .button_box img {
        width: 50px;
        cursor: pointer;
    }
    .portal_footer {
        width: 90%;
        padding-top: 5%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .pfooter_logo {
        width: 35vw;
    }
    .copy {
        display: none;
    }

    .portal_footer .inner {
        display: none;
    }
    

    /* footer */
    .f_box {
        flex-direction: column;
        gap: 24px;
    }
    #footer .copyright .admin {
        padding-bottom: 8px;
        margin-bottom: 8px;
        border-bottom:1px solid #666;
    }
    #footer .copyright .address br {
        display: block;
        margin-bottom: 8px;
    }
}
@media (max-width: 640px) {
    .top_bar {
        width: 100%;
        overflow: hidden;
    }
    .top_bar .inner {
        padding-left: 8px;
    }
    .top_bar .web {
        display: none !important;
    }
    .top_bar .left a:nth-child(2) {
        border-right: 0;
    }
}
@media (max-width: 430px) {
    .top_bar .right{
        font-size: .7142rem;
    }
}