@charset "utf-8";
@import url("./basic.css");

header#header {
    width: 100%;
    height: var(--header-height);
    background: #fff;
    transition: box-shadow 0.2s;
}
header#header.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    animation: headerFixedFadeIn 0.2s;
}
@keyframes headerFixedFadeIn {
    from { box-shadow: 0 0 0 rgba(0,0,0,0); }
    to { box-shadow: 0 4px 16px rgba(0,0,0,0.10); }
}


.a11y, .blind {
    width: 1px;
    height: 1px;
    overflow: hidden;
    position: absolute;
    top: -9999em;
    left: -9999em;
    display: block;
    text-indent: -9999em;
    font-size: 0 !important;
    line-height: 0 !important;
}

.bg-gray-100 {background-color: #f6f6f6;}

.btn-admin-edit {
  display: inline-block;
  padding: 7px 18px;
  background: #222e3c;
  color: #fff !important;
  border-radius: 5px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.5px;
  border: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  box-shadow: 0 2px 8px rgba(34,46,60,0.08);
}
.btn-admin-edit:hover, .btn-admin-edit:focus {
  background: #007bff;
  color: #fff !important;
  text-decoration: none;
}
.btn-admin-edit:active {
  background: #0056b3;
}

.product-modal-modern {
    max-width: 600px;
    background: #f9fbfd;
    box-shadow: 0 8px 40px rgba(34,46,60,0.15);
    border-radius: 14px;
    padding: 36px 32px 28px 32px;
    position: relative;
  }
  .product-modal-modern .modal-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1a2233;
    margin-bottom: 22px;
    letter-spacing: -1px;
    border-left: 4px solid #007bff;
    padding-left: 12px;
  }
  .product-list .product-row {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 6px rgba(34,46,60,0.04);
    padding: 16px 12px 10px 12px;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-end;
    gap: 16px;
    position: relative;
  }
  .product-list .product-row input[type="text"] {
    width: 120px;
    margin-right: 6px;
    border: 1px solid #e1e5ea;
    border-radius: 4px;
    padding: 7px 8px;
    font-size: 15px;
    background: #f7fafd;
  }
  .product-list .product-row .img-preview {
    width: 60px;
    height: 60px;
    background: #f1f4f8;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-right: 8px;
  }
  .product-list .product-row .img-preview img {
    max-width: 60px;
    max-height: 60px;
  }
  .product-list .product-row .remove-product-row {
    background: none;
    border: none;
    color: #ff4d4f;
    font-size: 22px;
    margin-left: 8px;
    cursor: pointer;
    transition: color 0.15s;
  }
  .product-list .product-row .remove-product-row:hover {
    color: #d90429;
  }
  .add-product-row {
    margin: 0 0 10px 0;
    width: 100%;
    background: #f3f7fa;
    color: #007bff;
    border: 1px dashed #007bff;
    border-radius: 6px;
    font-size: 16px;
    padding: 9px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
  }
  .add-product-row:hover {
    background: #e7f1fb;
  }

.sub_visual{position:relative; width:100%;margin:0 auto;height:500px;overflow:hidden;background-repeat:no-repeat;background-position:center; background-size: cover;}
.sub_visual .bg{background-image:url('../img/sub_visual01.jpg')}
.sub_visual.sub1 .bg{background-image:url('../img/sub_visual01.jpg')}
.sub_visual.sub2 .bg{background-image:url('../img/sub_visual02.jpg')}
.sub_visual.sub3 .bg{background-image:url('../img/sub_visual03.jpg')}
.sub_visual.sub4 .bg{background-image:url('../img/sub_visual04.jpg')}
.sub_visual.sub5 .bg{background-image:url('../img/sub_visual05.jpg')}


.sub_visual .title_warp {position: absolute; top: 0; left:0; z-index:2; width: 100%; height: 100%; text-align: center; display: flex; align-items: center ;justify-content: center; padding-top:30px ;}
.sub_visual h3 {font-size:60px; font-weight: 800; color:#fff; letter-spacing: 0; font-family: 'NanumSquare',sans-serif;}    
.sub_visual .bg{position:absolute;top:0;left:0;width:100%;height:100%;background-position:center center;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;z-index:0;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}
    
@media screen and (min-width:1025px) {
    .sub_visual:hover .bg{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}
}

@keyframes fade-dd-ani {
    0% {
        height: 0;
        opacity: 0;
        transform:  translateY(50px);
    }
    100%{
        height: calc(6.6vw + 10.15em);
        opacity: 1;
        transform: translateY(0px);
    }
}



#fp-nav ul li a span.nav-white, .fp-slidesNav ul li a span.nav-white{ background-color: #fff; }
.fp-nav ul li a span.nav-black { background-color: #2D2D2D; }

.swiper-control { position: absolute; width:130px ; left: calc(50% - 65px); bottom: 20%; background-color: rgba(0,0,0,0.3); z-index: 99; padding: 5px 10px; color: #fff; border-radius: 30px; height: 30px; }
@media (max-width:767px){  
    .swiper-control{ bottom:50px; }
}

.swiper-button-next:after, .swiper-button-prev:after { font-size: 0px; }

.slide_description{
    position:absolute;
    width:100%;
    bottom:30%;
    text-align:center
}

@media (max-width:767px){  
    .slide_description{ bottom:123px; width:100% }
}
.slide_title{
    width:100%;
    font-size:66px;
    color:#fff;
    line-height:74px;
    letter-spacing:-.89px;
    text-align:center;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

@media (max-width:767px){  
    .slide_title{ font-size:34px; line-height:34px; letter-spacing:-.1px; font-weight:400 }
}

.idx_bottom .listSwiper .date { color:#535353; }

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.typed-cursor {
    opacity: 0;
    display: none;
}

.typed::after {
    position: relative;
    top: -4px;
    content: '|';
    display: inline-block;
    animation: blink 0.7s infinite;
}

.sb_text_wrap::after {
    position: relative;
    top: -4px;
    content: '|';
    display: inline-block;
    animation: blink 0.7s infinite;
}

.typed.del::after {
    position: relative;
    top: -4px;
    content: '';
    display: inline-block;
    animation: blink 0.7s infinite;
}

.typed2.add::after {
    position: relative;
    top: -4px;
    content: '|';
    display: inline-block;
    animation: blink 0.7s infinite;
}


/* 서브메뉴 */
.sub_bg_wrap {width: 100%; position: relative; height: 260px; background-size: cover; }

.sub_bg_10::after { background-image: url('../img/sub_bg10.png'); content: '';  }
.sub_bg_20::after { background: url('../img/sub_bg50.png') center center no-repeat; background-size: cover; height: 200px ;}
.sub_bg_30::after { background: url('../img/sub_bg60.png') center center no-repeat; background-size: cover; height: 200px ;}
.sub_bg_40::after { background: url('../img/sub_bg70.png') center center no-repeat; background-size: cover; height: 200px ;}
.sub_bg_50::after { background: url('../img/sub_bg80.png') center center no-repeat; background-size: cover; height: 200px ;}

.sub_bg_wrap .sb_text_wrap {position: relative;
    z-index: 100;
    padding-top: 60px;
    display: inline-block;
    width: 99%;
    vertical-align: middle;
    font-size: 46px; color: #fff;}

.tablet .sub_bg_wrap .sb_text_wrap { font-size: 30px; } 
.mobile .sub_bg_wrap .sb_text_wrap { font-size: 22px; top:50%; } 

.vis { position: relative; height: 352px; font-size: 0; text-align: center; overflow: hidden; }
.mobile .vis, .tablet .vis { height: 252px; }
.vis.ani::after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
.vis::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; -webkit-transform: scale(1.12); transform: scale(1.12); -webkit-transition: opacity 1.5s, transform 3s; transition: opacity 1.5s, transform 3s; background-repeat: no-repeat; background-size: cover; }
.vis::before { content: ''; display: inline-block; width: 1px; height: 100%; vertical-align: middle; margin-left: -1px; }   

@media (max-width:768px) {
    .sub_bg_wrap { height: 150px; }
    .sub_bg_wrap .sb_text_wrap {left: 5px}
}


@media (max-width:768px) {
    .sub_bg_wrap { height: 150px; }
    .sub_bg_wrap .sb_text_wrap {left: 5px}
}

.w-25-ul { width: 25%; float: left; text-align: center; }
.w-33-ul { width: 33.333%; float: left; text-align: center; }
.w-50-div { width: 50%; }

#animated-example {z-index:999999;width:45px;height:20px;font-size:0.65em;line-height:20px;background-color:#ffa841;opacity:0.8;color:#fff;position:absolute;top:35px;left:-5px;border-radius:3px}
#animated-example:before {content:"";position:absolute;top:-4px;right:18px;width:4px;height:4px;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid #ffa841}


/*히스토리 */
#history { position: absolute; top: -20px; right: 50px;}
#history li { float: left; font-size: 10px; padding: 0px 0px 0px 10px }
#history li::after { padding-left: 10px; content: '>';}
#history li:last-child::after{ padding-left: 0px; content: '';}


/* 공통 탭 메뉴 */
.menutabWrap { position: relative; }
.nav { position: fixed; top: -22px; left: 0; width: 100%; transition: all 0.5s ease; opacity: 0;  }
.nav.nav-tabs { position: relative; opacity: 1; transition: unset; transform:unset; display: -webkit-box; display: -ms-flexbox;
  display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-left: 0;  list-style: none; background-color: #FAFAFA; border: none; }
.nav.nav-tabs li { text-align: center; margin: 0px;  padding: 0px; }
.nav.nav-tabs li a { color: #fff; width: 100%;  padding: 10px 0px; font-weight: normal!important;border-radius:0px !important; }
.nav.nav-tabs li a:after { float: right; content: '|'; color: #fff; }
.mobile .nav.nav-tabs li a:after { content: '';}
.nav.nav-tabs li:last-child a:after { content: none !important; } 
.nav.nav-tabs li.home { color :#fff; line-height: 40px; background-color: #000;}

.nav.nav-tabs li a.active, .nav.nav-tabs li a {border : 1px solid #15365F; background: #15365F; }
.nav.nav-tabs li a.active, .nav.nav-tabs li a:hover { color: #fff!important; border: 1px solid #15365F; background: #15365F;  }

.nav-pills .nav-link {border-radius:0px}

@media (min-width:769px) {
    .nav.nav-tabs li a {display: block}
}



/* 기본 탭메뉴 */
ul.menutab { margin: 10px 0px; padding: 0px; width: 100%; display: inline-block; border: 1px solid #dddddd; }
ul.menutab li {float:left;  text-align: center; padding: 10px 0px; }
ul.menutab li a { color: #797979; }
ul.menutab li.active a { color: #fff; }
ul.menutab li.active {  background-color: #612c93;   }

ul.menutab.w2 li { width: 49.999999%; }
ul.menutab.w3 li { float:left; width: 33.33%; text-align: center;  }
ul.menutab.w4 li { float:left; width: 24.99%; text-align: center;  }

.td_subject a.bo_tit { width: 800px; display: inline-block;  overflow:hidden; white-space:nowrap; text-overflow: ellipsis; }

@media (max-width:768px) {
    .td_subject a.bo_tit { width: 180px; }
}


/* 퀵메뉴추가 */
#quick_wrap {position: fixed; bottom: 50px; right: 10px; z-index: 1000}
#quick_wrap ul li {margin-bottom: 15px;}
#quick_wrap ul li a img {border-radius: 100%;}
#quick_wrap #to_top img {border: 1px solid #aaa}

#quick_wrap .tell_fix {display: none;}

@media(max-width:769px){
    #quick_wrap ul li {margin-bottom: 10px;}
    #quick_wrap ul li a img {width: 40px}

    #quick_wrap .tell_fix {display: block;}
}




/* 프로모션 */
#hd_top { position: relative;  }
#hd_top a {color: #ffffff; }
#hd_top a img {margin-right: 10px;}
#hd_top a.link { display: inline-block; width: 50%; text-indent: -999px; }

.hd_top_x {position: absolute; bottom: 10px; right: 150px; z-index: 2;}
.hd_top_close {position: absolute; bottom: 10px; right: 50px;}

@media (max-width:768px) {
    #hd_top { display: none; }
}



/* 글쓰기 파일 관련 */
ul li.bo_w_flie { margin-bottom: 10px; font-size: 0.8rem; }

#bo_w h2.title { margin-bottom: 10px; }
#bo_w .bo_w_flie .lb_icon {position:absolute;top:0px;left:0px;border-radius:3px 0 0 3px;height:38px;line-height:38px;width:40px;font-size:1.2em;text-align:center;color:#b2b2b2}
#bo_w .bo_w_flie .frm_file {padding-left:50px;margin-top:3px}
#bo_w .bo_w_flie .file_wr {position:relative;border:1px solid #ccc;background:#fff;color:#000;vertical-align:middle;border-radius:3px;padding:5px;height:40px;margin:0}
#bo_w .bo_w_flie .frm_input {margin:10px 0 0}
#bo_w .bo_w_flie .file_del {position:absolute;top:10px;right:10px;font-size:0.92em;color:#7d7d7d}



/* 팝업레이어 */
#hd_pop {z-index:1000;position:relative;margin:0 auto;width:100%;  }

#hd_pop h2 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border-radius: 20px; box-shadow: 0 4px 9px rgba(0,0,0,0.3); z-index: 10000}
.hd_pops_con { position: relative; overflow: hidden; }
.hd_pops img {max-width:100%;height:auto; border-radius: 20px;}


/*
.hd_pops_footer {padding:10px 0;background:#000;color:#fff;text-align:right}
.hd_pops_footer button {margin-right:5px;padding:5px 10px;border:0;background:#393939;color:#fff}
*/

.hd_pops .hd_pops_reject {  padding: 8px 0px 8px 0px; text-align: right; z-index: 99999; width: 100%; background-color: #000; border-bottom-left-radius:15px; border-bottom-right-radius:15px;  }


/* 오늘 하루 닫기 아래로 이동시
.hd_pops_con .hd_pops_reject { position:absolute; bottom: 12px; left: 0px; z-index: 99999; width: 100%; padding: 0px 0px 0px 40px; line-height: 30px; background: #ffc107; color:#000; font-size: 12px;  }
*/
.hd_pops_close {  display: inline-block; width: 40px; text-align: center; height: 20px; font-size: 12px; border: 1px solid #fff; cursor: pointer; color: #fff !important; margin:0px 10px;}
.hd_pops .hd_pops_reject label { color: #fff; font-size: 11px; text-align: right;}


/* 링크가 두개일 경우
.pop_3_0 { padding-top: 100px; }
.pop_3_0 .link1, .pop_3_0 .link2 { display: inline-block; width: 100%; height: 140px; text-indent: -999px;  }
*/

@media (max-width:768px) {
    .hd_pops_con { width: 360px !important; }
    .hd_pops { top: 100px !important; left:50% !important; margin:0px 0 0 -160px; max-width: 360px }
}

@media screen and (max-width: 460px)
{
    .hd_pops_con { width: 320px !important; }
    .hd_pops { top: 100px !important; left:50% !important; margin:0px 0 0 -160px; max-width: 320px; }
}

.checkbox {
    width: 18px;
        height: 18px;
        border: 0;
        background: url(../img/bg_checkbox.png) no-repeat 0 0;
        background-size: 18px 18px;
        -webkit-appearance: none;
}


/* 서브 콘텐츠 공통 */

.content_wrap h2 { font-size: 1.2em; font-weight:bold; margin-top: 20px; position: relative; color: #11459c; padding: 10px 0px; }

.content_wrap h3 { font-size: 1em; font-weight:bold;}


/* 상단 레이아웃 */
#hd{width:100%;z-index:999; position: absolute; height: 74px; -webkit-transition: padding 0.3s linear, top 0.3s linear; transition: padding 0.3s linear, top 0.3s linear; 
    /* 이미지 스타일 표 (5080.php 등에서 사용) */
/* background-color: rgba(56, 56, 56, 0.4); */
}
#hd::before { -webkit-transition:opacity 0.3s linear, background 0.3s linear; transition:opacity 0.3s linear, background 0.3s linear; }

#hd .gnb_bg, #hd .gnb_2dul{ height: 0px; transition: all 0.3s; }


#hd:after {display:block;visibility:hidden;clear:both;content:""}

#hd_h1 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
#hd_wrapper{ margin:0 auto; width: 100%; }
#hd_wrapper:after {display:block;visibility:hidden;clear:both;content:""}

#hd_wrapper .container { position: relative; z-index: 100; }

#logo {float:left; padding:20px 10px 0px 10px; position: relative; z-index: 999;}
#logo img{vertical-align:middle;max-height:100%;}


#ol_after_private{display:none;position:absolute;top:40px;right:0;background:#fff;border-radius:3px;z-index:9;padding:10px 0;width:160px;
-webkit-box-shadow: 0 2px 7px rgba(0,0,0,0.2) ;
-moz-box-shadow: 0 2px 7px rgba(0,0,0,0.2);
box-shadow: 0 2px 7px rgba(0,0,0,0.2);}
#ol_after_private li{line-height:30px;display:block;float:none}
#ol_after_private li a{color:#808a9b;display:block;padding: 0 15px}
#ol_after_private li a:hover{background:#eee;color:#ea185f}
#ol_after_private li a:after {display:block;visibility:hidden;clear:both;content:""}
#ol_after_private li strong{display:inline-block;background:#fac843;float:right;line-height:20px;color:#fff;border-radius:30px;padding:0 7px;font-size:0.92em;margin-top:6px}
#ol_after_private li .admin{color:#ff0000 !important}

@media (max-width: 969px){
    #tnb .right button{padding:0;color:#fff}
    #tnb .prf{border-left:0;width:100%;padding: 0 0 10px}
    #ol_after_private{left:0;right:none}
    .right img{width:25px;height:25px}
}
#gnb_open{ position: absolute; top: 0px; right: 0px; width: 50px;border: 0 ;background: 0;height: 80px;color: #000; font-size: 24px; display: none; color:#fff; }



/* 모바일 헤더 메뉴추가 */
.m_gnb_wrap{ position:absolute; right:-200%; top:0; bottom:0; display: none; width:320px; height:100%; padding-top: 0px; -webkit-transition: padding 0.3s linear, top 0.3s linear;
    transition: padding 0.3s linear, top 0.3s linear; background:#0FA5A4;  transition: 0.6s; z-index: 2000}
.m_gnb_wrap h2 { position: relative; padding-left: 10px; line-height: 55px; background-color: rgba(20,20,20,.6); }
.m_gnb_wrap .btnWrap { position: relative; height: 60px; background:#95B40F; }
.m_gnb_wrap.open{ right:0px; transition: 0.6s; display: inline-block;}
.m_gnb_wrap .btnWrap a { display:inline-block; padding:8px 15px; margin: 10px 0px 0px 15px; border:#fff solid 1px; border-radius:40px; font-size:14px; font-weight:500; color:#fff;   }

.m_gnb_wrap .m_etc_menu{ text-align: center; border-top:#404c6a solid 1px; padding:15px; background:#132248; }
.m_gnb_wrap .m_etc_menu > li{ display:inline-block; width:48%;  text-align: center; }
.m_gnb_wrap .m_etc_menu > li > a{ display:block; padding:15px 0;  font-size:16px; color:#fff; border:#404c6a solid 1px; border-radius: 5px; }
.m_gnb_wrap .m_etc_menu > li > a:hover{ background:#fff; border:#000 solid 1px; color:#424242  }
.m_gnb_wrap .m_gnb { position:relative; height:100%; background:#fff; overflow: auto; padding: 10px 15px 10px 25px;}
.m_gnb_wrap .m_gnb > li { border-bottom:#e1e1e1 solid 0.5px;  }
.m_gnb_wrap .m_gnb > li > a { display: block; padding: 13px 20px; border-bottom: 1px solid #e5e5e5;position: relative; }
.m_gnb_wrap .m_gnb > li > a:before { right: 17px; width: 12px; height: 2px; background: #000; }
.m_gnb_wrap .m_gnb > li > a:after { right: 22px; width: 2px; height: 12px; background: #000; }
.m_gnb_wrap .m_gnb > li.has_sub > a:before, .m_gnb_wrap .m_gnb > li.has_sub > a:after { content: "";position: absolute; z-index: 2;top: 0; bottom: 0; margin: auto; border: none; transform: none;-webkit-transform: none;
}    

.m_gnb_wrap .m_gnb > li.open > a{ background: #fff; border-bottom: 3px solid #EF7E2D; display: block; position: relative; color:#EF7E2D;}
.m_gnb_wrap .m_gnb > li.open > a:before { background:#EF7E2D;}
.m_gnb_wrap .m_gnb > li.open > a:after{ display:block; position:absolute; left:0; top:0; height:100%; width:0px; background:#000; content:""; }
.m_gnb_wrap .m_gnb > li:first-child > ul{ position: relative; left: 0px; display:block; width: 100%; }
.m_gnb_wrap .m_gnb > li > ul{ display:none; position:relative; top:0px; left:0%; width:100%; height:100%; background:#fff; border-top:none; border-left:none;  overflow-y:scroll }
.m_gnb_wrap .m_gnb > li > ul > li{ border-bottom:none;}
.m_gnb_wrap .m_gnb > li > ul > li > a{ display: block; padding:13px 15px; text-align: left; border-bottom: 1px solid #e5e5e5; background: #f8f8f8; color:#555; font-size:14px; }
.m_gnb_wrap .m_gnb > li > ul > li.has_sub.open > a{ background:#46ab3a; color:#fff; }
.m_gnb_wrap .m_gnb > li > ul > li > ul{ display:none; background:#f8f8f8; padding:10px 0 10px 10px; border-top:#eee solid 1px;  }
.m_gnb_wrap .m_gnb > li > ul > li > ul > li > a{ display:block; padding:10px; font-size:12px; }

.m_gnb_wrap .m_gnb > li > ul > li.has_sub{ position:relative}
.m_gnb_wrap .m_gnb > li > ul > li.has_sub:before, .m_gnb_wrap .m_gnb > li > ul > li.has_sub:after{ position:absolute; display:block; content:""; background:#5f5f5f;}
.m_gnb_wrap .m_gnb > li > ul > li.has_sub:before{right:10px;top: 27px;width:12px;height:2px;}
.m_gnb_wrap .m_gnb > li > ul > li.has_sub:after{right:15px;top: 22px;width:2px;height:12px;}
.m_gnb_wrap .m_gnb > li > ul > li.has_sub.open:after{ transform:rotate(-270deg); transition:0.2s; background-color:#fff }
.m_gnb_wrap .btn_m_close{ position: absolute; right:20px; top:13px; color: #fff; width:30px; height:30px; text-indent: -9999px; }
.m_gnb_wrap .btn_m_close span{ display:block;  text-indent: -9999px;}
.m_gnb_wrap .btn_m_close:before, .m_gnb_wrap .btn_m_close:after{ position:absolute; top:15px; display:block; width:30px; height:2px; content:""; background:#fff;  }
.m_gnb_wrap .btn_m_close:before{   transform: rotate(45deg);}
.m_gnb_wrap .btn_m_close:after{   transform: rotate(-45deg);}

.drawer{ position: fixed; width:100%; height:100%; left:0; top:0; background:rgba(0,0,0,0.7); visibility: hidden;  z-index: 1000}
.drawer.open{ visibility: visible;}


@media (max-width: 969px){
    #logo {padding:15px 10px}
    #gnb_open{display: block}
    .hd_sch_btn , #gnb_open{height:68px}
    #hd_sch {top:0}
    #hd_sch #sch_submit,#hd_sch .btn_close,#hd_sch #sch_stx{height:60px}
}


/*상단고정*/
.fixed #hd { position: fixed; top: 0; left: 0; backdrop-filter: blur(40px) !important; background-color: rgba(255,255,255,0.08); }
.fixed #hd #tnb {display:none}
.fixed #wrapper{padding-top:60px;}
.fixed #hd_wrapper {height: 90px}

@media (max-width: 1150px){
    .gnb_1da {padding: 0px 0px 0px 50px}
}

@media (min-width: 970px){
    .fixed .hd_sch_btn ,.fixed #gnb_open{height:60px}
    .fixed .gnb_1dli button{height:60px}
    .fixed #hd_sch {top:0}
    .fixed  #hd_sch #sch_submit,.fixed #hd_sch .btn_close,.fixed #hd_sch #sch_stx{height:60px}

}

@media (max-width: 969px){
    #logo img {width: 150px}
    #hd_wrapper {height: 65px}
    
    .fixed #hd_wrapper {height: 65px}
}
@media (max-width: 769px){
    .hd_sch_btn {display: none}

    #hd_sch {clear: both; display: none; width: 90%; position: inherit; top: 15px; left: inherit; margin: 15px auto 25px auto; }
    #hd_sch #sch_stx,
    #hd_sch #sch_submit,
    #hd_sch .btn_close {height: 40px; background:rgba(20,20,20,0.4);}

    .fixed #hd_sch {display: none}
}



/* 중간 레이아웃 */
#wrapper:after {display:block;visibility:hidden;clear:both;content:""}
#container {position:relative;min-height:550px}
#container:after {display:block;visibility:hidden;clear:both;content:""}

#container>p{display:none;}



/* 서브 상단 백그라운드 */
.sub_bg_10::after { background-image: url('../img/sub_bg10.png');}
.sub_bg_20::after { background: url('../img/sub_bg20.png') center center no-repeat; background-size: cover; height: 200px ;}
.sub_bg_30::after { background: url('../img/sub_bg30.png') center center no-repeat; background-size: cover; height: 200px ;}
.sub_bg_40::after { background: url('../img/sub_bg40.png') center center no-repeat; background-size: cover; height: 200px ;}
.sub_bg_50::after { background: url('../img/sub_bg50.png') center center no-repeat; background-size: cover; height: 200px ;}



/* 기본테이블 */
.tbl_wrap {margin:0 0 10px}
.tbl_wrap table {width:100%;border-collapse:collapse;border-spacing:0}
.tbl_wrap caption {padding:10px 0;color:#4b8b99;font-weight:bold;text-align:left}

.tbl_head01 {margin:0 0 10px}
.tbl_head01 table {border-bottom:1px solid #d3d3d3}
.tbl_head01 caption {padding:0;font-size:0;line-height:0;overflow:hidden}
.tbl_head01 thead th {padding:12px 0;border-bottom:1px solid #d3d3d3;background:#fff;color:#383838;font-size:0.85em;text-align:center;letter-spacing:-0.1em}
.tbl_head01 thead a {color:#383838}
.tbl_head01 thead th input {vertical-align:top} 

/* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
.tbl_head01 tfoot th, .tbl_head01 tfoot td {padding:10px 0;border-top:1px solid #c1d1d5;border-bottom:1px solid #c1d1d5;background:#d7e0e2;text-align:center}
.tbl_head01 tbody th {padding:10px 0;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9}
.tbl_head01 td {padding:20px 5px;border-top:1px solid #f3f3f3;line-height:1.5em;word-break:break-all}
.tbl_head01 td:first-child{border-left:0}
.tbl_head01 td:last-child{border-right:0}

.tbl_head02 {margin:15px}
.tbl_head02 caption {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
.tbl_head02 thead th {padding:7px 0;border-top:1px solid #333;border-bottom:1px solid #ddd;background:#f3f3f3;color:#333;font-size:0.95em;text-align:center}
.tbl_head02 thead a {color:#383838}
.tbl_head02 thead th input {vertical-align:top} 

/* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
.tbl_head02 tfoot th {border-top:1px solid #666;border-bottom:1px solid #666;background:#484848;color:#fff}
.tbl_head02 tfoot td {background:#484848;color:#fff;font-weight:bold;text-align:center}
.tbl_head02 tbody th {padding:5px 0;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9}
.tbl_head02 td {padding:5px 3px;border-bottom:1px solid #e9e9e9;line-height:1.4em;word-break:break-all}


.tbl_head03 {margin:0 0 10px}
.tbl_head03 table {    padding: 12px 0; border-top: 2px solid #000; border-bottom: 1px solid #d3d3d3;  background: #fff;  color: #383838;
    font-size: 0.95em;   text-align: center;   letter-spacing: -0.1em;}
.tbl_head03 caption {padding:0;font-size:0;line-height:0;overflow:hidden}
.tbl_head03 thead th {padding:12px 0;border-top:2px solid #000;border-bottom:1px solid #d3d3d3;background:#fff;color:#383838;font-size:0.95em;text-align:center;letter-spacing:-0.1em}
.tbl_head03 thead a {color:#383838}
.tbl_head03 thead th input {vertical-align:top} 

/* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
.tbl_head03 tfoot th, .tbl_head03 tfoot td {padding:10px 0;border-top:1px solid #c1d1d5;border-bottom:1px solid #c1d1d5;background:#d7e0e2;text-align:center}
.tbl_head03 tbody th {padding:10px 0;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9}
.tbl_head03 td {padding:15px 5px;border-top:1px solid #f3f3f3;border-left:1px solid #f3f3f3;line-height:1.5em;word-break:break-all}
.tbl_head03 td:first-child {border-left:0}



/* 폼 테이블 */
.tbl_frm01 th {padding:10px 0;width:90px;border:1px solid #e9e9e9;border-left:0;text-align:left}
.tbl_frm01 td {padding:10px 5px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:transparent}
.tbl_frm01 textarea {width:100%;height:100px}
.tbl_frm01 a {text-decoration:none}
.tbl_frm01 .frm_address {margin-top:5px;width:100%}
.tbl_frm01 .frm_file {display:block;margin-bottom:5px;width:100%}
.tbl_frm01 .frm_info {display:block;padding:5px 0 0;color:#666;line-height:1.3em}



/* 기본리스트 */
.list_01 {padding:0 10px;font-size:0.85em}
.list_01 li {background:#fff;margin:10px 0;padding:10px 15px;border:1px solid #eee}
.list_01 li.li_all_chk {position:relative;text-align:center}
.list_01 li.li_all_chk div {position:absolute;left:5px;top:10px}
.list_01 li.li_all_chk label {vertical-align:baseline}
.list_01 li:hover {background:#f9f9f9}
.list_01 li:after {display:block;visibility:hidden;clear:both;content:""}
.list_01 li.empty_li {border:0}




/* 테이블 기본 색상 */
.tbl_head01 thead th, .board_top_color { border-top:1px solid #999999; }

.table_base {min-width: 500px}

 

/* 로그인 */
.mbskin { width:90%; max-width: 500px;  border: 1px solid #ddd; margin: 0px auto 0px auto; padding: 20px 10px 1px 10px; margin-top: 50px;  }
.mbskin p {padding-bottom:20px;}
.mbskin p strong {color:#4162ff;padding-bottom:5px;display:block;font-size:1.083em}
.mbskin h1 {display:none}

.sub_logo {text-align: center; margin-bottom: 30px;}
.sub_logo img { max-width: 90%; }




/* 버튼 */
a.btn01 {display:inline-block;background:#eee;color:#444;text-decoration:none;vertical-align:middle}
a.btn01:focus, a.btn01:hover {text-decoration:none}
button.btn01 {display:inline-block;margin:0;padding:7px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none}
a.btn02 {display:inline-block;border:1px solid #3b3c3f;background:#4b545e;color:#fff;text-decoration:none;vertical-align:middle}
a.btn02:focus, .btn02:hover {text-decoration:none}
button.btn02 {display:inline-block;margin:0;padding:7px;border:1px solid #3b3c3f;background:#4b545e;color:#fff;text-decoration:none}
.btn_confirm {text-align:center} 

/* 서식단계 진행 */
.btn_submit {border:0;background:#fa576b;border:1px solid #ff2741;color:#fff;cursor:pointer}
.btn_submit:hover{background:#ff2741}
a.btn_cancel {display:inline-block;background:#ddd;color:#444;text-decoration:none;vertical-align:middle}
button.btn_cancel {display:inline-block;;border:1px solid #ccc;background:#fafafa;color:#000;vertical-align:top;text-decoration:none}
a.btn_frmline, button.btn_frmline {display:inline-block;padding:0 5px;;border:0;background:#333;color:#fff;letter-spacing:-0.1em;text-decoration:none;vertical-align:top} 

/* 우편번호검색버튼 등 */
button.btn_frmline {font-size:1em}



/* 게시판용 버튼 */
a.btn_b01,.btn_b01 {display:inline-block;background:#eee;border:0;color:#6b6b6b;text-decoration:none;vertical-align:middle}
.btn_b01:hover, .btn_b01:hover {background:#f8f8f8;color:#000}
a.btn_b02 ,.btn_b02{display:inline-block;background:#fa576b;color:#fff;text-decoration:none;vertical-align:middle;border:0}
a.btn_b02:hover, .btn_b02:hover {background:#ff2741}
a.btn_b03, .btn_b03 {display:inline-block;line-height:28px;border:1px solid #ed6478;color:#ed6478;background:none;text-decoration:none;vertical-align:middle}
a.btn_admin {display:inline-block;background:#ff0000;color:#fff;font-size:16px;text-decoration:none;vertical-align:middle;line-height:40px;width:40px;text-align:center;} 

/* 관리자 전용 버튼 */
a.btn_admin:focus, a.btn_admin:hover  {color:#fff;}



/* 기본테이블 */
.tbl_wrap {margin:0 0px 10px}
.tbl_wrap table {width:100%;border-collapse:collapse;border-spacing:0}
.tbl_wrap caption {padding:10px 0;color:#4b8b99;font-weight:bold;text-align:left}

.tbl_head01 caption {padding:0 0 10px;color:#777;text-align:left}
.tbl_head01 thead th {padding:12px 0;background:#f7f8fa;color:#383838;font-size:0.95em;text-align:center;letter-spacing:-0.1em}
.tbl_head01 thead a {color:#383838}
.tbl_head01 thead th input {vertical-align:top} 

/* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
.tbl_head01 tfoot th {border-top:1px solid #666;border-bottom:1px solid #666;background:#484848;color:#fff}
.tbl_head01 tfoot td {border-color:#e3e3e5;background:#484848;color:#fff;font-weight:bold;text-align:center}
.tbl_head01 tbody th {padding:5px 0;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9}
.tbl_head01 td {padding:5px;line-height:1.5em;word-break:break-all}

.tbl_head02 caption {padding:0 0 10px;color:#777;text-align:left}
.tbl_head02 thead th {padding:5px 0;border-top:1px solid #d1dee2;border-bottom:1px solid #d1dee2;background:#e5ecef;color:#383838;font-size:0.95em;text-align:center;letter-spacing:-0.1em}
.tbl_head02 thead a {color:#383838}
.tbl_head02 thead th input {vertical-align:top} 

/* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
.tbl_head02 tfoot th {border-top:1px solid #666;border-bottom:1px solid #666;background:#484848;color:#fff}
.tbl_head02 tfoot td {background:#484848;color:#fff;font-weight:bold;text-align:center}
.tbl_head02 tbody th {padding:5px 0;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9}
.tbl_head02 td {padding:5px 3px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;line-height:1.4em;word-break:break-all}



/* 기본리스트 */
.list_01{padding:0 10px;}
.list_01 li{background:#fff;border-radius:3px;padding:10px 0px;border-bottom:1px solid #eee;}



/* 기본폼 */
.form_01{margin:10px}
.form_01 .write_div{margin:5px 0;position:relative}
.form_01 li{margin:5px 0;position:relative;list-style:none}
 textarea, .frm_input {border:1px solid #d7d7d7;background:#fff;color:#000;vertical-align:middle;padding:0 10px;height:40px;}
textarea {width:100%;height:200px;padding:10px}
textarea:focus, .frm_input:focus{outline:none;border:1px solid #ea185f}
.frm_input {height:40px;}
.full_input{width:100%}
.form_01 .frm_file {display:block;margin-bottom:5px;width:100%}
.form_01 select{height:40px;border-radius:3px;background-color:#fff}
.form_01 .frm_info{font-size:0.92em;color:#4162ff;text-align:left;margin:3px 0 10px;display:block;line-height:1.3em}




/* 검색결과 색상 */
.sch_word {color:#00c4ac}

.new_icon {display:inline-block;width:16px;line-height:16px;font-size:0.825em;color:#23db79;background:#b9ffda;text-align:center;border-radius:2px;margin-left:2px;font-weight:bold;vertical-align:baseline}
.hot_icon {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#fff;background:#e52955;text-align:center;border-radius:2px;vertical-align:middle;margin-right:2px}
.fa-lock {display:inline-block;line-height:16px;color:#999;text-align:center;vertical-align:middle}



/* 내용관리 */
#ctt {margin:10px 0;padding:10px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9}
.ctt_admin { opacity:1; position:fixed; z-index:9999; bottom:100px; left:50%; margin-left:-70px;  width:140px; line-height:40px; text-align:center; }

#ctt header h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#ctt_con {padding:10px 0}
.ctt_img {text-align:center}

.st_bg {display:inline-block;width:1px;height:10px;margin:0 10px;background:#e2e1e0;vertical-align:-1px}
#listtype {margin:30px 0 20px}





/* 콘텐츠별 스타일 */
.cnt_cmt {display:inline-block;margin:0 0 0 5px;font-weight:bold}

a.btn_cancel {display:inline-block;padding:8px 7px 7px;border:1px solid #ccc;background:#fff;color:#000;text-decoration:none;vertical-align:middle}
button.btn_cancel {display:inline-block;padding:7px;border:1px solid #ccc;background:#fafafa;color:#000;vertical-align:top;text-decoration:none}
a.btn_frmline, button.btn_frmline {display:none;padding:0 5px;height:40px;border:0;background:#333;color:#fff;letter-spacing:-0.1em;text-decoration:none;vertical-align:top;line-height:1.9em} 

/* 우편번호검색버튼 등 */
button.btn_frmline {font-size:1em}

.btn_top {margin:10px;text-align:right}
.btn_top li {display:inline-block}
.btn_top .btn_cancel, .btn_top .btn_b01 {border:1px solid #ddd;background:none;color:#666;line-height:40px;background:#fff;font-size:0.85em}




/*쇼핑몰레이아웃*/
#bo_list,#bo_cate {margin-top:10px !important}
#bo_w {padding:10px}
#sit_sms_new #sms_agree {padding:10px 20px !important}

caption {display: none}




/* 서브메뉴 */
.sub_bg_wrap {width: 100%; position: relative; height: 260px; background-size: cover;}

.sub_bg_10::after {background-image: url(../img/sub_bg10.png);}

.sub_bg_wrap .con_inner {position: relative; height: 100%}
.sub_bg_wrap .sb_text_wrap {position: absolute; top: 50%; height: 80px; left: 0; margin-top: -40px}

.vis { position: relative; height: 352px; font-size: 0; text-align: center; overflow: hidden; }
.mobile .vis, .tablet .vis { height: 252px; }
.vis.ani::after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
.vis::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; -webkit-transform: scale(1.12); transform: scale(1.12); -webkit-transition: opacity 1.5s, transform 3s; transition: opacity 1.5s, transform 3s; background-repeat: no-repeat; background-size: cover; }
.vis::before { content: ''; display: inline-block; width: 1px; height: 100%; vertical-align: middle; margin-left: -1px; }   


@media (max-width:768px) {
    .sub_bg_wrap { height: 150px; }
    .sub_bg_wrap .sb_text_wrap {left: 5px}
}


/* ****************** 공통클래스 ********************** */
@media all and (max-width:1780px){	/* 이미지 스타일 표 (5080.php 등에서 사용) */

/* max-width : (area-box width) + 60px */
	.area-box{padding:0 var(--area-padding); max-width:none;}
}
@media all and (max-width:1410px){ 
	.area{padding:0 var(--area-padding); max-width:none;}
}


/* ****************** HEADER ********************** */
#header{
	position:relative; height: var(--header-height); top:0; left:0; width:100%; z-index:99; transition:var(--transition-custom2);
}

.fullpage-html #header{
	position:fixed;
}

#headerInnerWrap{position:absolute; top:0px; left:0px; width:100%; height:90px; z-index:99; background-color:#fff; transition:var(--transition-custom); transition-property:background-color;}
#headerInner{position:relative; display:flex; align-items:center; justify-content:space-between; height:var(--header-height); margin:0px auto; padding:0 var(--area-padding); }
#header .logo{position:relative; z-index:100; }
#header .logo a{display:block; }
#header .logo img{display:block; vertical-align:top;}
#header .logo img.white{display:none;}

/* 모바일 일때 헤더 높이 */
@media (max-width: 768px) {
    #header .logo img { width: 270px; }
}

/* -------- Header :: UTIL BOX -------- */
.header-util-box{position:relative; z-index:100; display: flex; align-items:Center;}



/* Header :: 언어선택 */
.header-lang {position:relative; float:left; width:7rem; height:3rem; z-index:100; }
.header-lang:before{position: absolute; content:''; width:100%; height:100%; background:rgba(0,0,0,0.05); border-radius:1.5rem; transition:var(--transition-custom);}
.header-lang .lang-open-btn {overflow:hidden; position:relative; display:block; width:100%; text-align:left; height:100%; padding:0 1.5rem; font-size:1.1rem; line-height: 3rem; color:#000; transition:var(--transition-custom);}
.header-lang .lang-open-btn i {display:inline-block; margin-right: 3px; vertical-align: middle; font-size:1.3rem; margin-top:-1px; }
.header-lang > ul {display:none; position:absolute; top:30px; left:-1px; z-index:10; width:100%;}
.header-lang > ul > li > a{display:block; padding:0 1.5rem; font-size:1.1rem; line-height: 3rem; color:#000; text-align:right; font-weight:700; transition:var(--transition-custom);}
.header-lang.open:before{background:var(--main-color); height:200%;}
.header-lang.open .lang-open-btn,
.header-lang.open > ul > li > a{color:#fff;}




/* Header :: 사이트맵버튼 */
.sitemap-line-btn{display: flex; align-items:center; justify-content:space-between; width:42px; height:30px; box-sizing:border-box; margin-left:2rem;}
.sitemap-line-btn .line{display:block; width:4px; height:30px; background-color:#333; margin:0 5px; transition:var(--transition-custom);}
.sitemap-line-btn .line:nth-child(2){height:18px;}


/* active */
.sitemap-line-btn.active{position:relative; z-index:100000;}
.sitemap-line-btn.active .line{background:#fff;}
.sitemap-line-btn.active .line:nth-child(2){opacity:0;}
.sitemap-line-btn.active .line:nth-child(1){
	transform: translateX(14px) rotate(45deg);
}
.sitemap-line-btn.active .line:nth-child(3){
	transform: translateX(-14px) rotate(-45deg);
}



/* -------- Header :: GNB(PC) -------- */
.gnb-overlay-bg{position:fixed; top:0; left:0; width:100%; height:100%; visibility:hidden; opacity:0; background:rgba(0,0,0,0.5); z-index:100;  transition:var(--transition-custom); }	/* 이미지 스타일 표 (5080.php 등에서 사용) */


/* gnb overlay BG */
.gnb-overlay-bg.open{visibility:visible; opacity:1.0;}
#gnb{position:absolute; text-align:center; top:0; left:0px; width:100%; z-index:99;}
#gnb > ul{display:inline-block; float: right; margin-right: 80px;}
#gnb > ul > li{position:relative; float:left; word-break:keep-all;}
#gnb >ul > li > a{ position:relative; z-index:100; display:block; line-height:var(--header-height); padding:0 2.5rem; text-align:center; color:#000; font-size:18px; font-weight: 700; letter-spacing:-0.02em;  transition:var(--transition-custom); }
#gnb > ul > li > a:hover,
#gnb > ul > li > a:focus,
#gnb > ul > li.on > a{color:var(--main-color);}

/* 이미지 스타일 표 (5080.php 등에서 사용) */
/* Duplicates removed: .table-image-style is defined only once below for maintainability. */
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  font-size: 1.07rem;
  margin-bottom: 30px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.table-image-style th, .table-image-style td {
  border-bottom: 1px solid #e5e5e5;
  padding: 16px 0 16px 0;
  text-align: right;
  font-weight: 400;
}
.table-image-style th {
  background: #f4f4f4;
  color: #333;
  font-weight: 700;
  text-align: center;
  font-size: 1.12rem;
  border-bottom: 2px solid #bdbdbd;
}
.table-image-style td:first-child, .table-image-style th:first-child {
  padding-left: 18px;
}
.table-image-style tr:last-child td {
  border-bottom: none;
}

/* GNB :: 2차 전체메뉴 */
#gnbBg{
	overflow:hidden; 
	position:absolute; 
	left:0; top:0px; 
	width:100%; 
	height:0; 
	background:#fff; 
	z-index:98;
	opacity:0;
	transition:height 0.3s ease-in-out, opacity 0.2s ease-in-out;
}
#gnbBg:after{position:absolute; top:var(--header-height); width:100%; left:0; height:1px; background-color:#ddd; content:"";}
#gnb.total-menu > ul > li .gnb-2dep{
	position:absolute; 
	top:var(--header-height); 
	left:0px; 
	z-index:99;
	width:100%; 
	text-align:left; 
	border-right:1px solid #ddd;
	opacity:0;filter:Alpha(opacity=0);
	height:0;
    transition: all 0.2s 0s;
	transition-delay: 0s;
	visibility:hidden;
}
#gnb.total-menu > ul > li:first-child .gnb-2dep{border-left:1px solid #ddd;}
#gnb.total-menu > ul > li .gnb-2dep:before {
	content:""; position:absolute; left:0; top:0px; width:0; left:50%; height:1px; background-color:var(--main-color); 
	transition:var(--transition-custom);
}
#gnb.total-menu > ul > li:hover .gnb-2dep:before {width:100%; left:0;}
#gnb.total-menu > ul > li .gnb-2dep ul{padding:13px 0px;}
#gnb.total-menu > ul > li .gnb-2dep ul li{position:relative;}
#gnb.total-menu > ul > li .gnb-2dep ul li a{ display:block;  padding:7px 15px; color:#333; font-size:14px; letter-spacing:-0.5px; font-weight:400; line-height:1.3; transition:var(--transition-custom); }
#gnb.total-menu > ul > li .gnb-2dep ul li a:hover{color:var(--main-color);}



/* GNB :: 2차메뉴 Over (높이변경) */
#gnb.open #gnbBg{height:350px; opacity:1.0;filter:Alpha(opacity=100);}
#gnb.open > ul > li .gnb-2dep{
	height:250px; opacity:1.0;filter:Alpha(opacity=100);
	visibility:visible;
    transition: height 0.5s ease-in-out, opacity 0.5s ease-in-out 0.2s;
}



/* GNB :: 2차 각각메뉴 */
#gnb.each-menu > ul > li .gnb-2dep{
	

/* display:none; */
	position:absolute; 
	top:calc(var(--header-height) - 20px); 
	left:50%; 
	transform:translateX(-50%);
	z-index:99;
	width:16rem; 
	text-align:left; 
	visibility:hidden;
	opacity:0;filter:Alpha(opacity=0);
	transition:all 0.2s cubic-bezier(0.4, 0, 1, 1);
}
#gnb.each-menu > ul > li .gnb-2dep:before{
	content:""; 
	position:absolute; top:0px; left:0px; right:0px; 
	height:0; 
	background-color:var(--main-color); 
	transition:all 0.2s cubic-bezier(0.4, 0, 1, 1);
	border-radius:2rem;
	box-shadow: 0.5rem 0.5rem 2rem 0px rgba(0,0,0,0.3);
}
#gnb.each-menu > ul > li .gnb-2dep ul{padding:15px 0px;}
#gnb.each-menu > ul > li .gnb-2dep ul li{position:relative; padding:8px 10px; opacity:0; transition:all 0s 0s; }
#gnb.each-menu > ul > li .gnb-2dep ul li a{display:block; color:#fff; font-size:14px; font-weight:400; text-align:center; line-height:1.4; opacity:0.9;}
#gnb.each-menu > ul > li .gnb-2dep ul li a:hover{opacity:1.0;}


/* over했을때 */
#gnb.each-menu > ul > li .gnb-2dep.open{visibility:visible; opacity:1.0;}
#gnb.each-menu > ul > li .gnb-2dep.open:before{height:100%;}
#gnb > ul > li .gnb-2dep.open ul li{opacity:1.0; transition:var(--transition-custom2);}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(1){transition-delay:0.1s;}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(2){transition-delay:0.2s;}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(3){transition-delay:0.3s;}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(4){transition-delay:0.4s;}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(5){transition-delay:0.5s;}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(6){transition-delay:0.6s;}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(7){transition-delay:0.7s;}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(8){transition-delay:0.8s;}



/* -------- Header :: GNB(Mobile) -------- */
.nav-open-btn{display:none; position: absolute; top: 20px; right: 10px;}
.tablet .nav-open-btn, .mobile .nav-open-btn{display:block;}
.nav-open-btn i { font-size: 40px;}

.tablet #headerInner, .mobile #headerInner { height: 85px; }
.tablet #gnb, .mobile #gnb { display: none; }




/* 오른쪽에서 왼쪽으로 이동 (off-canvas) */


#gnbM.open {
  display: block;
  right: 0;
  transition: right 0.35s cubic-bezier(.7,0,.3,1);
}
	


/* mobile menu */
#gnbM {position:fixed; top:0; right:-320px; width:100%; max-width:320px; height:100%; background:#ffffff; z-index:9999; transition: right 0.35s cubic-bezier(.7,0,.3,1);}
#gnbM .mnb_inner {padding:24px 15px 40px; height:100%; overflow-y:auto; overflow-x:hidden;}
#gnbM .mnb_top {display:flex; align-items:center; justify-content:space-between; position:relative; margin-bottom:24px;}
#gnbM .mobile_logo {display:block; width:230px; height:44px; background-size:auto 44px;}
#gnbM .close-mnb-btn {display:flex; align-items:center; justify-content:center; width:40px; height:40px; border:0; background:url('../img/ico_close_btn.svg')center center no-repeat; background-size:16px 16px;}
#gnbM #navigation {position:relative;}
#gnbM .mb_ml1 {display:block;}
#gnbM .mb_ml1 .mb_ma1 {display:block; position:relative; width:100%; padding:10px; background:#ffffff; font-size:18px; font-weight:700; line-height:1.8; letter-spacing:-0.05em; color:#000000; font-family:'OnemobileT', sans-serif;}
#gnbM .mb_ml1 .mb_ma1.on {background:#e4eaef; color:#003399;}
#gnbM .mb_ml1 .mb_ma1:active:after, #gnbM .mb_ml1 .mb_ma1:focus:after {transform:translateY(-50%) rotate(270deg);}
#gnbM .mb_ml1 .mb_ma1 span {font-size:18px; font-weight:700; line-height:30px; letter-spacing:-0.05em; color:#000000;}
#gnbM .gnb-2dep {display:none; position:relative; padding:20px; border-radius:10px; background:#f8f9fa; box-sizing:border-box;}
#gnbM .gnb-2dep .mb_ml2 .mb_ma2 {display:block; position:relative; padding-left:10px; margin-bottom:10px; font-size:16px; font-weight:400; line-height:1.4; letter-spacing:-0.05em; color:#222222;}
#gnbM .gnb-2dep .mb_ml2:last-child .mb_ma2 {margin-bottom:0;}
#gnbM .gnb-2dep .mb_ml2 .mb_ma2.on {color:#0067db;}
#gnbM .gnb-2dep .mb_ml2 .mb_ma2:before {content:""; display:block; position:absolute; top:50%; left:0; transform:translateY(-50%); width:4px; height:4px; border-radius:150px; background-color:#0067db;}
#gnbM .gnb-2dep .mb_ml2 .mb_ma2:hover, #gnbM .gnb-2dep .mb_ml2 .mb_ma2:focus, 
#gnbM .gnb-2dep .mb_ml2 .mb_ma2:hover, #gnbM .gnb-2dep .mb_ml2 .mb_ma2:focus {color:#0067db;}
#gnbM .mb_mdp3 {position:relative;}
#gnbM .mb_mdp3 .mb_ml3 .mb_ma3 {display:block; position:relative; padding:5px 0 5px 14px; margin-bottom:5px; font-size:15px; font-weight:400; line-height:1.4; letter-spacing:-0.06em; color:#707070;}
#gnbM .mb_mdp3 .mb_ml3:last-child .mb_ma3 {margin-bottom:10px;}
#gnbM .mb_mdp3 .mb_ml3 .mb_ma3:hover, #gnbM .mb_mdp3 .mb_ml3 .mb_ma3:focus {color:#000000; text-decoration:underline;}

.gnb-overlay-bg {display:none;position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background:rgba(0,0,0,0.60);z-index:9000;}
	



/* -------- Header :: sitemap -------- */
#header.sitemap-open #headerInnerWrap{background:transparent;}
#header.sitemap-open .header-lang{display: none;}
#header.sitemap-open .logo img.color{display:none;}
#header.sitemap-open .logo img.white{display:block;}



/* ****************** FOOTER ********************** */


/* -------- FOOTER :: 레이아웃 -------- */
#footer{position: relative; background-color:#fff;}
.footer-left-con{float:left; }
.footer-right-con{float:right;}



/* Footer :: TOP버튼 */
.to-top-btn{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	width:7rem; 
	height:7rem; 
	background-color:var(--main-color); 
	text-align:center; 
	color:#fff; 
	z-index:99;
	box-sizing:border-box;
	transition:var(--transition-custom);
	border-radius:50%;
	margin-top:10rem;
}
.to-top-btn i{display:inline-block; font-size:3rem; line-height:0.4; transition:var(--transition-custom); margin-top:-2px;}


/* .to-top-btn.bottom-fixed{bottom:15px; opacity:1.0;}
.to-top-btn i{display:inline-block; font-size:16px; line-height:46px; transition:var(--transition-custom);}
.to-top-btn:hover i{transform:translateY(-3px)}
#fullpage .to-top-btn{display:none;} */





/* 하단 레이아웃 */


/* 풋터 */
address { margin-bottom: 0px; }
#ft {
    position: relative;
    background-color: #363636;
    border-top: 1px solid #707070;
}

.division {border-top: 1px solid #707070;}

.content_info {
    overflow: hidden;
    padding: 20px;
}

.content_info h3 {
    padding: 3px;
    border-radius: 5px;
    display: inline-block;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 10px;
}



/* cs center */
.content_info .cs_center {
    float: left;
    width: 31%;
}

.content_info .cs_center strong {
    display: block;
    padding: 0 0 7px 0;
    color: #FC6624;
    font-size: 20px;
    font-weight: 700;
}

.content_info .cs_center p {
    margin: 10px 0px;
    color: #B4B4B4;
}

.content_info .cs_center a {
    border: 1px solid #C1C1C1;
    color: #C1C1C1;
    border-radius: 20px;
    font-size: 11px; padding: 5px 40px; margin-right: 10px; margin-bottom: 10px;
}



/* bank info */
.content_info .bank_info {
    float: left;
    padding: 20px 0px 0px 0px;
}

.content_info .bank_info strong {
    display: block;
    padding: 0 0 7px 0;
    color: #fff;
    font-size: 16px;
}

.content_info .bank_info em {
    font-weight: bold;
}



/* notice */
.content_info .notice_list,
.content_info .review {
    float: left;
    width: 31%;
}

.notice_list h3,
.review h3 {
    margin-bottom: 20px !important;
}

.content_info .notice_list h3>a {
    color: #fff;
    font-weight: 700;
    font-size: 13px;
}

.content_info .notice_list h3>a:hover {
    text-decoration: none;
}

.content_info .notice_list ul {
    padding: 0 0 0 0;
}

.content_info .notice_list li {
    padding: 2px 0 1px 0;
    color: #D3D3D3;
}

.content_info .notice_list li a,
.review li a {
    display: inline-block;
    overflow: hidden;
    color: #D3D3D3;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: break-word;
}

.content_info .notice_list a:hover {
    text-decoration: underline;
}

.content_info .notice_list span {
    display: inline-block; float: right;
}



/* 풋터 메뉴 */
.foot_list ul {
    overflow: hidden;
    width: 1200px;
    margin: 0 auto;
}

.foot_list ul li {
    float: left;
    padding: 15px 0 15px 0;
}

.foot_list ul li a {
    padding: 0 15px 0 14px;
    color: #D3D3D3;
    border-left: 1px solid #e0e0e0;
    font-size: 12px;
}

.foot_list ul li:first-child a {
    padding-left: 0;
    border-left: 0 none;
}



/* 회사 정보 */
.foot_cont {
    overflow: hidden;
    padding: 0px 0 20px 0;
    color: #a9a9a9;
    font-size: 11px;
    line-height: 1.8;
}

.foot_cont .foot_logo {
    display: inline-block;
    float: left; width: 200px; line-height: 96px;
}

.foot_cont .foot_info {
    display: inline-block; margin-top: 10px;
}

.foot_cont .foot_info_list {
    overflow: hidden;
    width: 100%;
}

.foot_cont .foot_info_list a { color: #D3D3D3;}

.foot_cont .foot_info_list dl {
    float: left;
}

.foot_cont .foot_info_list dt {
    float: left;
}

.foot_cont .foot_info_list dd {
    float: left;
    padding: 0 15px 0 3px;
}

.foot_cont .copyright {
    float: left;
    width: 100%;
}



/* 사용자정보확인 */
.btn_licensee_info {
    color: #D3D3D3;
    font-size: 10px;
    border-bottom: 1px solid #333333;
}

.btn_email:hover {
    text-decoration: underline;
}



/* 메인 스크롤 버튼 */
.scroll-btn {
    display: block;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: 100px;
    z-index: 10;
    text-align: center;
}
.scroll-btn > * {
    display: inline-block;
    line-height: 18px;
    font-size: 11px;
    font-weight: normal;
    color: #7f8c8d;
    color: #ffffff;
    font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: 2px;
}

.scroll-btn p { margin-left: -37px; }
    .scroll-btn > *:hover,
    .scroll-btn > *:focus,
    .scroll-btn > *.active {
    color: #ffffff;
    }
    .scroll-btn > *:hover,
    .scroll-btn > *:focus,
    .scroll-btn > *:active,
    .scroll-btn > *.active {
    opacity: 0.8;
    filter: alpha(opacity=80);
    }
    .scroll-btn .mouse {
    position: relative;
    display: block;
    width: 30px;
    height: 50px;
    margin: 0 auto 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 3px solid white;
    border-radius: 23px;
    }
    .scroll-btn .mouse > * {
    position: absolute;
    display: block;
    top: 29%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    background: white;
    border-radius: 50%;
    -webkit-animation: ani-mouse 2.5s linear infinite;
    -moz-animation: ani-mouse 2.5s linear infinite;
    animation: ani-mouse 2.5s linear infinite;
    }



/* 오른쪽 플로팅 메뉴 */
.floating-menu {
    width: 100%;
    min-width: 1280px;
    position: fixed;
    top: 50%;
    left: 0;
    z-index: 10
}

.floating-menu>.wrap {
    position: absolute;
    top: 50%;
    right: 30px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.floating-menu .list li {
    position: relative
}

.floating-menu .list li:not(:first-child) {
    margin-top: 10px
}

.floating-menu .list .btn-icon {
    display: block;
    width: 60px;
    height: 0;
    max-height: 0;
    padding-top: 60px;
    border-radius: 50%;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center center;
    box-shadow: 0 5px 10px 0 rgba(53, 53, 55, .2);
    position: relative;
    z-index: 2
}

.floating-menu .list .btn-icon.blog {
    background-color: #5EA821;
    background-image: url(../img/icon-blog.png);
    background-size: 50px 50px
}

.floating-menu .list .btn-icon.kakaotalk {
    background-color: #FAE100;
    background-image: url(../img/icon-kakaotalk.png);
    background-size: 50px 50px
}

.floating-menu .list .btn-icon.youbute {
    background-color: #ED2123;
    background-image: url(../img/icon-youtube.png);
    background-size: 50px 50px
}

.floating-menu .list .btn-icon.top {
    background-color: #fff;
    background-image: url(../img/icon-top.png);
    background-size: 18px 20px;
    position: absolute;
    top: -70px;
    opacity: 0;
    z-index: 1;
    transition: all .2s
}

.floating-menu .list .btn-icon.top.on {
    top: 0;
    opacity: 1
}

#device_change {display:block;line-height:40px;border-radius:5px;background:#302e2e;color:#777;font-size:1em;text-decoration:none;text-align:center}



/* 애니메이션 추가 */

.fade-in { transform: translateY(-150px); opacity: 0; transition: .2s; }    
.fade-in.active{ opacity: 1; }
    
@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
    
.in-left{ transform: translateX(-100%); opacity: 0; transition: .2s; }
.in-left.active{ transform: translateX(0); opacity: 1; }
.animate.in-left { animation: slideInFromLeft 1s ease-out forwards; animation-fill-mode: forwards; }

@media (min-width: 320px) and (max-width: 480px) {
    .form-row .select {
        min-width: 200px;
    }
}

#pw_reset {width: 600px; margin: 0 auto; max-width: 94%;}



/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:100vh; height:calc(100vh - var(--header-height)); position:relative; background-color:#fff }

.main-visual-wrap{position: relative; display: flex; flex-direction:column; justify-content: flex-end; height:100%;}
.main-visual-tit-box{margin-bottom:3rem;}
.main-visual-tit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.tablet .main-visual-tit, .mobile .main-visual-tit {
    display: block;
}

.icon-container{
    margin-top: 30px;
}

.center-line {
    display: inline-block;
    width: 80px;
    height: 1px;
    background: #222;
    margin: 0 12px;
    vertical-align: middle;
}

.main-visual-tit {font-size:40px; line-height:1.11; letter-spacing:-0.02em; color:#000; font-weight:700; text-align:center; animation: text-active-animation 1s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay:0.3s;}
.main-visual-tit span{color:#1375B3;}

.main-visual-tit div { width: 100%; display: inline-block;}

.tablet .main-visual-tit, .mobile .main-visual-tit { font-size: 20px; line-height: 1.11; }

.main-visual-slide-wrap{position: relative; height:60rem; width:100%; max-width:180rem; margin:0 auto 0px; padding:0 var(--area-padding)}
.main-visual-con .slick-track,
.main-visual-con .slick-list {
	-webkit-perspective: 2000;
	-webkit-backface-visibility: hidden;
}
.main-visual-con, 
.main-visual-con .slick-list,  
.main-visual-con .slick-track, 
.main-visual-item{
	height:100%;
}
.main-visual-con{z-index:1;}


/* 메인 비주얼 :: 이미지 */
.main-visual-item{position:relative; border-radius:5rem; overflow:hidden;}
.main-visual-item .main-visual-img{
	width:100%;
	height:100%;
	background-size:cover !important;
	transform: scale(1.08,1.08);
}
.main-visual-item .main-visual-m-img{display:none;}
.main-visual-item.active-item .main-visual-img{animation: image-zoom-out 8s 0s forwards;}


/* 메인 비주얼 :: 텍스트 */
.main-visual-txt-con{
	position:absolute; 
	left:0px; top:0;
	width:100%; 
	height:100%;
	z-index:1;
}
.main-visual-txt-box{
	display:flex;
	align-items: flex-end;
	justify-content: flex-end;
	height:100%;
	width:100%;
	text-align: right;
	padding-bottom: 7rem;
	padding-right: 6rem;
	box-sizing: border-box;
}

@media (max-width: 1024px) {
  .main-visual-txt-box {
    align-items: flex-end;
    justify-content: center;
    padding-right: 0;
    padding-bottom: 3rem;
    text-align: center;
  }
}

.main-visual-txt-inner {
  margin-top: 0;
  max-width: 700px;
  position: absolute;
  right: 10%;
  bottom: 30%;
}

.main-visual-txt1, .main-visual-txt2 {
  text-shadow: 0 2px 16px rgba(0,0,0,0.25);
  word-break: keep-all;
}
.main-visual-txt-box .main-visual-txt1,
.main-visual-txt-box .main-visual-txt2,
.main-visual-txt-box .main-visual-txt3,
.main-visual-txt-box .main-visual-more-btn{
	opacity:0; 
}
.main-visual-txt-inner{margin-top:7rem;}
.main-visual-txt-box .main-visual-txt1{display: block; font-size:16px; letter-spacing:-0.02em; color:#fff; font-weight:700; margin-bottom:2rem;}
.main-visual-txt-box .main-visual-txt2{font-size:2rem; letter-spacing:-0.05em; color:#fff; font-weight:500;}


/* 메인 비주얼 :: 텍스트 :: active효과 */
.active-item .main-visual-txt1,
.active-item .main-visual-txt2{
	animation: text-active-animation 1s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.active-item .main-visual-txt1{animation-delay:0.3s;}
.active-item .main-visual-txt2{animation-delay:0.3s;}
.main-visual-txt-box .cm-word-split-JS.splitting .char{animation: text-fade-out 1s cubic-bezier(0.4, 0, 0.2, 1) both;}
.active-item .main-visual-txt-box .cm-word-split-JS.splitting .char{animation: text-active-animation 1s cubic-bezier(0.4, 0, 0.2, 1) both;}



/* 메인 비주얼 :: Animation */
@keyframes image-zoom-out {
	from {
		transform: scale(1.08,1.08)
	}
	to {
		transform: scale(1.0,1.0)
	}
}
@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		transform: translateX(-50px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		transform: translateX(0); 
	}
}
@keyframes text-fade-out {
	from {
		opacity:1.0;filter:Alpha(opacity=100);
	}
	to {
		opacity:0;filter:Alpha(opacity=0);
	}
}



/* 메인 비주얼 :: Dots */
.main-visual-bar{position: relative;width:calc(100% - 100px); height:3px; background:rgba(255,255,255,0.2);}
.main-visual-bar .slick-dots li button{position:absolute; content:""; width:0; height:100%; background-color:#fff; top:0; left:0; font-size:0;}
.main-visual-bar:not(.start-progress) .slick-dots li.slick-active button{animation:dotLoading 5.9s linear both;}
.main-visual-bar.start-progress .slick-dots li.slick-active button{animation:dotLoading 4.9s linear both;}

@keyframes dotLoading{	
	from{width:0px;}
	to{width:100%;}
}




/* 메인 비주얼 :: 화살표 */
.main-visual-arrow .slick-arrow{	position:absolute; top:60%;transform:translateY(-50%); cursor:pointer; z-index:9; font-size:25px; color:#fff;}
.main-visual-arrow .slick-arrow.slick-prev{left:0px;}
.main-visual-arrow .slick-arrow.slick-next{right:0px;}

#wrap .main-visual-conuter {
    transform: translateY(0);
    opacity: 1;
}

@media (max-width: 1580px) {
    .main-visual-conuter {
        right: var(--area-padding);
        left: auto;
        width: calc(100% - 10rem - var(--area-padding));
    }
}



/* 메인 비주얼 :: 카운터 */
.main-visual-conuter{position:absolute; bottom:8rem; left:0; width:100%; z-index:11; font-size:1.4rem; color:#fff; letter-spacing:-0.02em; opacity:0; transform:translateY(50px); transition:all 1s cubic-bezier(0.4, 0, 0.2, 1);}
.main-visual-conuter > .area{display: flex; align-items:center; justify-content:space-between; width: 70%; margin: 0 auto;}
.main-visual-num-box{position: relative; width:150px; text-align:center;}
.main-visual-conuter span{display:inline-block; vertical-align:middle; font-size: 14px; padding-top: 10px;}
.main-visual-conuter .middle{display:inline-block; vertical-align:middle; width:3px; height:3px; border-radius:50%; background:#fff;}
.main-visual-conuter .middle{margin:0 0.5rem}




/* 메인 비주얼 :: 스크롤아이콘 */
.main-scroll-icon{position:absolute; bottom:-1px; left:var(--area-padding); text-align:center; z-index:9; width:50px; height:300px; background:#fff; display: flex; flex-direction: column; justify-content: center; border-top-right-radius:5rem; transition:all 1s cubic-bezier(0.4, 0, 0.2, 1);  

/* transform:translateX(-100%); */}
.main-scroll-icon:before{position: absolute; content:''; width:4.6rem; height:5rem; background:no-repeat center; background-size:cover;  top:1px; left:0; transform:translateY(-100%);}
.main-scroll-icon:after{position: absolute; content:''; width:4.6rem; height:5rem; background:no-repeat center; background-size:cover;   bottom:0; right:0; transform:translateX(100%);}
.main-scroll-icon .txt{display:block; color:#000; padding-bottom:5px; letter-spacing:-0.5px; font-weight:300; writing-mode: tb; margin:0 auto; font-size:14px; line-height:1; letter-spacing:-0.02em; color:#000; font-weight:700; 

/* margin-bottom:0.5rem; */ transition:all 1s cubic-bezier(0.4, 0, 0.2, 1), opacity 1s 0.3s cubic-bezier(0.4, 0, 0.2, 1); opacity:0; transform:translateX(-100px);}
.main-scroll-icon .scroll-arrow{display: flex; flex-direction: column; align-items:center; transition:all 1s cubic-bezier(0.4, 0, 0.2, 1), opacity 1s 0.3s cubic-bezier(0.4, 0, 0.2, 1); opacity:0; transform:translateX(-100px);}
.main-scroll-icon .scroll-arrow .arrow{font-size:1.6rem; color:#000; height:1rem; animation: scroll-icon-ani 1.5s infinite;}
.main-scroll-icon .scroll-arrow .arrow.arrow01{animation-delay:0s;}
.main-scroll-icon .scroll-arrow .arrow.arrow02{animation-delay:0.25s;}
.main-scroll-icon .scroll-arrow .arrow.arrow03{animation-delay:0.5s;}
@keyframes scroll-icon-ani {
	0% {
		opacity:1;
	}
	50% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}

ul.icon { margin-bottom: 50px; }
ul.icon li { float: left; margin: 0 0 0 15px; }




/* active */
.main-visual-conuter{transform:translateY(0); opacity:1;}
.main-scroll-icon{

/* transform:translateX(0); */}
.main-scroll-icon .txt,
.main-scroll-icon .scroll-arrow{opacity:1; transform:translateX(0);}

@media all and (min-width:1921px){
	.main-visual-wrap{height:calc(100% - 50px); justify-content: center;}
}

@media all and (max-width:1860px){
	.main-visual-slide-wrap{box-sizing:border-box;}	
}

@media all and (max-width:1280px){
	#mainVisual{padding:1rem 0 0rem; height: auto !important;}
}



/* ******************  메인 컨텐츠 ********************** */


/* -------- 메인 컨텐츠 :: 공통 -------- */


/* 공통 :: 타이틀 */
.main-tit-box{}
.main-tit-en{display: block; font-size:2rem; line-height:1.3; letter-spacing:-0.02em; color:#000; margin-bottom:0.5rem; font-weight:400;}
.main-tit{font-size:8.5rem; line-height:1; letter-spacing:-0.02em; color:#000; font-weight:700;}
.main-txt{font-size:1.8rem; line-height:1.55; letter-spacing:-0.05em; color:#666; font-weight:500;}

.main-btn-box{}
.main-btn-box .main-btn{display: flex; justify-content:space-between; align-items:center; padding:0 2.5rem; box-sizing:border-box; border:2px solid #000; box-sizing:border-box; width:18rem; height:4.4rem; border-radius:4.4rem; font-size:1.6rem; color:#000; transition:var(--transition-custom);}
.main-btn-box .main-btn:hover{background:#000; color:#fff;}



/* 공통 :: 타이틀 white */
.main-tit-box.white .main-tit-en,
.main-tit-box.white .main-tit{color:#fff;}
.main-tit-box.white .main-txt{color:rgba(255,255,255,0.6);}
.main-tit-box.white .main-btn-box .main-btn{border-color:#fff; color:#fff;}
.main-tit-box.white .main-btn-box .main-btn:hover{background:#fff; color:#000;}



/* 공통 :: transition */
.transition-left{opacity:0; transform:translateX(-50px); transition:all 1s cubic-bezier(0.4, 0, 0.2, 1);}
.transition-right{opacity:0; transform:translateX(50px); transition:all 1s cubic-bezier(0.4, 0, 0.2, 1);}
.transition-top{opacity:0; transform:translateY(-50px); transition:all 1s cubic-bezier(0.4, 0, 0.2, 1);}
.transition-bottom{opacity:0; transform:translateY(50px); transition:all 1s cubic-bezier(0.4, 0, 0.2, 1);}


.animated .transition-left{opacity:1; transform:translateX(0px);}
.animated .transition-right{opacity:1; transform:translateX(0px);}
.animated .transition-top{opacity:1; transform:translateY(0px);}
.animated .transition-bottom{opacity:1; transform:translateY(0px);}




/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none !important;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    

/* -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); */ 

/* window10=> IE11에서 오류 */
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}
.slick-slider *:focus{outline:none !important;}

.icon-container { width: 100%; }
.icon-container .icon { display: flex; justify-content: center; align-items: center; }

.products-container {
    text-align: center;
    padding: 40px 20px;
    background: url('../img/bg_products.png') no-repeat center center/cover;
    color: #fff;
}

.products-container .container {
    overflow: hidden;
}

.products-title {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.tabs {
    position: relative;
    display: inline-block;
    flex-wrap: wrap;
    margin-bottom: 20px;
    border: 2px solid #fff;
    border-radius: 30px;
    overflow: hidden;
}

.tab {
    color: #fff;
    border-radius: 30px;
    padding: 10px 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tabs-m {
    display: none;
}
.tabs-m-selectbox {
    display: none;
}
@media (max-width: 700px) {
    .tabs {
        display: none;
    }
    
    .tabs-m {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 1.2rem;
    }
    .tabs-m-selectbox {
        display: block;
        width: 90%;
        position: relative;
        border: 2px solid #fff;
        border-radius: 16px;
        background: #222;
        color: #fff;
        font-size: 1.1rem;
        box-sizing: border-box;
        box-shadow: 0 2px 8px rgba(0,0,0,0.07);
        z-index: 10;
        margin: 0 auto;
    }
    .tabs-m-selected {
        padding: 0.8rem 1rem;
        cursor: pointer;
        border-radius: 16px;
        user-select: none;
        position: relative;
        background: #222;
        color: #fff;
    }
    .tabs-m-selected:after {
        content: '\25BC';
        position: absolute;
        right: 1.2rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1rem;
        pointer-events: none;
    }
    .tabs-m-options {
        display: none;
        width: 100%;
        background: #fff;
        border: 2px solid #fff;
        border-top: none;
        border-radius: 0 0 16px 16px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.13);
        z-index: 100;
        max-height: 220px;
        overflow-y: auto;
        animation: fadeIn 0.2s ease;
    }
    .tabs-m-selectbox.open .tabs-m-options {
        display: block;
    }
    .tabs-m-options li {
        padding: 0.8rem 1rem;
        cursor: pointer;
        color: #222;
        transition: background 0.15s;
        font-size: 1.05rem;
    }
    .tabs-m-options li:hover, .tabs-m-options li.active {
        color: var(--main-color);
    }
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}


/* 테블릿 사이즈 이하 */
@media (max-width: 768px) {
    .tab {
        padding: 6px 12px;
        font-size: 1rem;
    }
}



/* 모바일 사이즈 이하 */
@media (max-width: 425px) {
    .tab {
        padding: 4px 8px;
        font-size: 0.8rem;
    }
}

.tab.active {
    color: #000;
    background: none;
    z-index: 10;
    position: relative;
}

.tab-indicator {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 30px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    transition: all 0.3s cubic-bezier(.4,0,.2,1);
    z-index: 0;
}


.tab:focus,
.tab:active {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

@media (max-width: 768px) {
    .tabs {
        flex-direction: column;
        border-radius: 20px;
    }
    .tab {
        border-bottom: 1px solid #fff;
        border-right: none;
        padding: 10px 0;
        font-size: 0.95rem;
    }
}

.product-card {
    background: #fff;
    color: #333;
    border-radius: 20px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    height: 200px; 

/* 높이 조정 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative; 

/* 원형 이미지 absolute 배치용 */
    overflow: visible;  

/* 원형이 카드 밖으로 나와도 보이게 */
}

.product-swiper {
    position: relative;
    padding-bottom: 90px; /* 하단 원형 이미지가 잘리지 않도록 여유 공간 확보 */
}

.product-card h3 {
    font-size: 1.2rem;
    margin-top: 30px;
}

.img-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    left: 50%;
    bottom: -75px; /* 이미지 스타일 표 (5080.php 등에서 사용) */
    transform: translateX(-50%); /* 가로 중앙 정렬 */
}

.img-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.swiper,
.swiper-wrapper,
.swiper-slide {
    overflow: visible !important;
}




.swiper-button-prev, .swiper-button-next {
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    line-height: 40px;
    text-align: center;
    font-size: 18px;
}

.swiper-button-prev::after, .swiper-button-next::after {
    font-size: 18px;
}


.products-container .swiper-button-next {
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 20px !important;
    background-color: rgba(0, 0, 0, 0.5);
}

.products-container .swiper-button-prev {


/* background-image: url('../img/arrow_left.png') !important; */
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 20px !important;
    background-color: rgba(0, 0, 0, 0.5);
}


/* ======= Footer 공통 스타일 ======= */
.site-footer {
    background-color: #1e1e1e;
    color: #ccc;
    padding: 40px 20px;
    font-family: "Noto Sans KR", sans-serif;
    font-size: 0.95rem;
  }
  
  .footer-container {
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .footer-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
  }
  
  .footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
  }
  
  .footer-logo img {
    height: 50px;
  }
  
  .footer-logo span {
    font-weight: bold;
    font-size: 1.2rem;
    color: #fff;
  }
  
  .footer-info p {
    margin: 0 0 5px;
    line-height: 1.6;
    text-align: right;
  }

  .mobile .footer-info p { font-size: 0.85rem; }
  
  .footer-info strong {
    color: #f1f1f1;
  }
  
  .footer-bottom {
    border-top: 1px solid #333;
    padding-top: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }
  
  .footer-links a {
    color: #aaa;
    margin-right: 15px;
    text-decoration: none;
    font-size: 0.9rem;
  }
  
  .footer-links a:hover {
    color: #fff;
    text-decoration: underline;
  }
  
  .footer-copy {
    font-size: 0.85rem;
    color: #777;
  }
  
  .footer-copy a {
    color: #aaa;
    text-decoration: none;
  }
  
  .footer-copy a:hover {
    color: #fff;
    text-decoration: underline;
  }
  


/* ======= 모바일 반응형 ======= */
  @media (max-width: 768px) {
    .footer-top {
      flex-direction: column;
    }
    .footer-bottom {
      flex-direction: column;
      text-align: center;
    }
    .footer-links {
      margin-bottom: 10px;
    }
  }

.sub_header {position:relative; padding:0 0px 40px 0px;}
.sub_header .header_title {margin-bottom:34px; font-size:26px; font-weight:700; line-height:1.4; letter-spacing:-0.02em; color:#000000; text-align:center;}
.sub_header .header_text {font-size:18px; font-weight:400; line-height:1.4; letter-spacing:-0.04em; color:#000; text-align:center; padding: 0 20px;}

.bg0101 {display: inline-block; width: 100%; height: 650px; text-align: center;}
.sub_1010 img { max-width: 100%; }

.bg0101 .color {background-color:#485F8C; height:200px;}
.color2 {background-color:#f6f6f6;  text-align: center; padding: 50px 0; color: #4B4B4B; font-size: 20px;}
.color2 .bold { font-weight: 600; }

.mobile .bg0101, .tablet .bg0101 { height: 350px; }
.mobile .blue_title, .tablet .blue_title { font-size: 20px; }

/* 연혁 */
.history_visual {width:100%;height:46rem;margin-bottom:12rem;background:url(../img/Contents/history_visual.png) no-repeat center top /auto 100%;}
.history-wrap {display:flex;gap:7rem 5rem; margin-bottom: 150px;}
.history-title {font-size:4.5rem; line-height:140%;}
.history-bar {position:relative;padding-left:40px;margin-top:1.2rem;}
.history-bar:before {content:"";position:absolute;top:1rem;left:0;bottom:1.4rem;display:block;width:1px;background:#ddd;}
.history-actbar {content:"";position:absolute;top:1rem;left:-0rem;display:block;width:1px;height:0;max-height:calc(100% - 3rem);background:var(--bg-blue);}
.history-cont-wrap {position:relative;}
.history-cont-wrap:has( + .history-cont-wrap) {margin-top:2rem;margin-bottom:10rem;}
.history-cont + .history-cont {margin-top: 10px;}
.history-cont-year {font-size:30px; font-weight: 700; margin-bottom:30px; position:relative;}
.history-cont-year:before {content:"";position:absolute;top:13px;left: -51px; display:block;width:1.5rem;height:1.5rem;border-radius:50%;background:#ddd;}
.history-cont-txt {position:relative; }
.history-cont-txt:before {content:"";position:absolute;top:5px; left:-45px; width:0.7rem;height:0.7rem;border-radius:50%;background:#ddd;}
.history-cont-txt .txt {font-size:16px; font-weight: 400; line-height:160%;}
.history-cont-wrap .history-cont .history-cont-year.act:before,
.history-cont-wrap.first .history-cont .history-cont-year:before {background:var(--bg-blue);}
.history-cont-wrap .history-cont .history-cont-year.act:after,
.history-cont-wrap.first .history-cont .history-cont-year:after {content:"";position:absolute;top:0px;left:-65px;width:50px; height:50px; border-radius:50%;background:var(--bg-blue);opacity:0.2;}
.history-cont-wrap .history-cont .history-cont-txt.act:before {background:var(--bg-blue); }
.history-cont-wrap .history-cont .history-cont-year:before,
.history-cont-wrap .history-cont .history-cont-txt:before {transition:all .3s;}
.history-tab .tab-nav .name {white-space:nowrap;}

@media screen and (max-width:1280px){

	.history-wrap {flex-wrap:wrap;}
	.history-title {width:100%;font-size:3.6rem;}
	.history-title br {display:none;}
	.history-bar {width:100%;padding-left:4rem;margin-left:2rem;}
	.history-cont-year:before {left:-4.7rem;top:0.5rem;}
	.history-cont-txt:before {left:-4.3rem;}
	.history-cont-txt {padding-left:8rem;}
	.history-cont-year {font-size:3rem;margin-bottom:4rem;}
	.history-cont-wrap:has(+ .history-cont-wrap) {margin-bottom:4rem;}
	.history-cont-wrap:before {left:-4rem;}
	.history-cont-wrap .history-cont .history-cont-year.act:after, 
	.history-cont-wrap.first .history-cont .history-cont-year:after {left:-6.2rem;top:-1rem;}
}
@media screen and (max-width:768px){
	.history-wrap {gap:4rem 15rem;}
	.history-title {font-size:3.2rem;}
	.history-cont-year {font-size:2.8rem;}
	.history-cont-txt { padding-left: 0px;}
	.history-cont-txt .txt {font-size:1.1rem;}
    .history-bar { padding-left: 30px;}
}
@media screen and (max-width:499px){
	.history-title {font-size:2.8rem;}
	.history-cont-year {font-size:2.2rem;}
	.history-cont-txt { padding-left: 0px;}
	.history-cont-txt .txt {font-size:1.1rem;}
    .history-bar { padding-left: 30px;}
}

@media screen and (max-width:768px){
    .history-cont-wrap .history-cont .history-cont-year.act:after, .history-cont-wrap.first .history-cont .history-cont-year:after {
        left: -3.4rem;
        top: -0.3rem;
    }

    .history-cont-txt:before {
        left: -2.2rem;
    }

    .history-cont-year:before {
        left: -2.6rem;
        top: 0.5rem;
    }
}

@media screen and (max-width: 499px) {
    .history-cont-wrap .history-cont .history-cont-year.act:after, .history-cont-wrap.first .history-cont .history-cont-year:after {
        left: -3.4rem;
        top: -0.3rem;
    }

    .history-cont-txt:before {
        left: -2.2rem;
    }

    .history-cont-year:before {
        left: -2.6rem;
        top: 0.5rem;
    }
}

.gray_title { color: #747474; }
.company-tab-wrap { max-width:100%; margin:0 auto 50px; }
.company-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  margin-bottom: 24px;
}
.company-tabs button {
  flex: 0 1 auto;
  min-width: 70px;
  padding: 7px 14px;
  font-size: 15px;
  background: #D8D8D8;
  border: none;
  cursor: pointer;
  color: #747474;
  transition: all 0.2s;
  border-radius: 16px;
  white-space: normal;
  line-height: 1.3;
  height: auto;
  word-break: keep-all;
  text-align: center;
  box-sizing: border-box;
}
.company-tabs button.active {
  color: #fff;
  background: #4277E0;
  border-radius: 16px;
}
@media (max-width: 1024px) {
  .company-tabs button {
    min-width: 60px;
    font-size: 14px;
    padding: 7px 8px;
  }
  .company-tabs {
    gap: 6px;
  }
}
@media (max-width: 600px) {
  .company-tab-wrap {
    max-width: 100%;
    padding: 10px;
  }
  .company-tabs button {
    min-width: 50px;
    font-size: 13px;
    padding: 10px;
  }
  .company-tabs {
    gap: 4px;
  }
}

.company-info strong {color:#4277E0; font-weight: 600; }

.company-tab-content { display:none; }
.company-tab-content.active { display:block; }
.company-info-table { width:100%; margin:18px 0px 60px 0px; border-collapse:collapse; font-size:1rem; border-bottom: 1px solid #D0D0D0; }
.company-info-table th { text-align:center; padding:17px 10px 17px 0; color:#4277E0; font-weight:500; width:90px; }
.company-info-table td { padding:7px 0; text-align:left; }
@media (max-width:600px) {
  .company-tab-wrap { max-width:100%; padding:0 10px; }
  .company-tabs button { font-size:0.97rem; padding:10px; }
  .company-info-table th, .company-info-table td { font-size:0.97rem; }
}


.cert-category-title {
    position: relative;
    display: inline-block;
    height: 22px;
    width: 100%;
    font-size: 1.35rem; margin: 30px 0 10px 0; color: #3F3F3F;
    background: url('../img/ic.png') no-repeat left center;
    padding-left: 60px;
    font-weight: 900;
}

.cert-category-title span {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 12px;
}

.table-image-style {
    width: 100%;
    border-spacing: 0;
    font-size: 1.07rem;
    margin: 10px 0px 50px 0px;
}

.table-image-style th, .table-image-style td {
    padding: 16px 0 16px 0;
    text-align: center;
    font-weight: 400;
    color: #5C5C5C;
    border: 1px solid #E4E4E4;
    border-bottom: 1px solid #E4E4E4 !important;
}

.table-image-style th:first-child {
  background-color: #8E8E8E;
  color: #fff;
}

.table-image-style td:first-child {
  border-left: none !important;
}
    
.table-image-style td:last-child {
  border-right: none !important;
}

.gray_title {
    color: #D6D6D6;
    font-size: 40px;
    font-weight: 800;
    padding: 30px 0;
}

.blue_title {
    color: #4277E0;
    font-size: 30px;
    font-weight: 600;
    padding: 0px 0px 20px 0px;
}

.gray_797979 {
    color: #797979;
    font-size: 16px;
    padding: 10px 0px 10px 0px;
}

.gray_797979.bold {
    font-weight: 800;
}
    

.mobile_logo img {
    display: block;
    width: 100%;
}

.tablet .container img, .mobile .container img { max-width: 100%; }

.divider { height: 1px; background-color: #D0D0D0; }


.tab-custom-container { margin: 20px 0; }
.tab-custom-buttons { display: flex; border-bottom: 1px solid #ddd; }
.tab-custom-btn {
  background: #f9f9f9;
  border: none;
  outline: none;
  padding: 10px 20px;
  cursor: pointer;
  transition: background 0.2s;
  font-size: 16px;
  border-radius: 5px 5px 0 0;
  margin-right: 2px;
}
.tab-custom-btn.active {
  background: #fff;
  border-bottom: 2px solid #007bff;
  color: #007bff;
  font-weight: bold;
}
.tab-custom-content {
  border: 1px solid #ddd;
  border-top: none;
  padding: 20px;
  background: #fff;
}


.related-products-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    background: #fff;
  }
  .related-products-table th, .related-products-table td {
    border: 1px solid #ddd;
    padding: 8px 10px;
    text-align: center;
    font-size: 15px;
  }
  .related-products-table th {
    background: #f2f2f2;
    font-weight: bold;
  }
  .related-products-table img {
    max-width: 100%;
    max-height: 140px;
    display: block;
  }
  .related-product-td {
    width: 50%;
    vertical-align: top;
    padding: 10px 5px;
  }
  .related-product-flex {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .related-product-img {
    width: auto;
    height: 140px;
    max-width: 50%;
    border-radius: 6px;
    background: #f7f7f7;
    object-fit: contain;
  }
  .related-product-info {
    flex: 1;
    min-width: 0;
  }
  .related-product-name {
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 2px;
    word-break: break-all;
  }
  .related-product-id {
    font-size: 0.96em;
    color: #555;
    margin-bottom: 2px;
  }
  .related-product-price {
    font-size: 1em;
    color: #007bff;
    font-weight: bold;
    margin-top: 2px;
    text-align: right;
  }
  @media (max-width: 768px) {
    .related-product-td {
      width: 100%!important;
      display: block;
      box-sizing: border-box;
    }
    .related-products-table tr {
      display: block;
    }
    .related-products-table {
      width: 100%;
      table-layout: auto;
    }
  }

.related-products-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 16px;
}
.related-product-card {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  padding: 16px 12px;
  width: calc(50% - 8px);
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 0;
  box-sizing: border-box;
  transition: box-shadow .18s;
}
.related-product-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.related-product-img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  background: #f8f8f8;
  flex-shrink: 0;
}
.related-product-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.related-product-name {
  font-weight: bold;
  font-size: 1.08em;
  margin-bottom: 4px;
  word-break: break-all;
  color: #222;
}
.related-product-id {
  font-size: 0.97em;
  color: #666;
}
.related-product-price {
  font-size: 1.13em;
  color: #007bff;
  font-weight: bold;
  margin-top: 6px;
  text-align: left;
}
@media (max-width: 900px) {
  .related-product-card {
    width: 100%;
  }
  .related-products-grid {
    gap: 16px 0;
  }
}