/* BASIC css start */
#q_top_btn{position:fixed; bottom: 350px; right: 35px; }
#q_top_btn a{display:flex; align-items:center; width:40px; height:40px; background:#fff; text-align:center; justify-content: center; border-radius:100%; margin-bottom:5px; border:1px solid #ccc;}
#q_top_btn a i{color:#333;}


.r_menu {
    position: fixed; /* 고정 위치 */
    bottom: 20px;    /* 하단에 위치 */
    right: 24px;     /* 오른쪽에 위치 */
    display: flex;
    flex-direction: column; /* 세로 정렬 */
    align-items: center;    /* 가운데 정렬 */
    z-index: 1000;  /* 다른 요소들 위로 표시 */
}

.r_menu ul {
    list-style: none; /* 기본 리스트 스타일 제거 */
    padding: 0;
    margin: 0;
}

.r_menu li {
    margin-bottom: 10px; /* 아이템 간 간격 */
}

.r_menu li a {
    display: flex;
    flex-direction: column; /* 이미지와 텍스트 세로 정렬 */
    align-items: center;    /* 가운데 정렬 */
    text-decoration: none;  /* 링크 기본 스타일 제거 */
    color: #000;            /* 텍스트 색상 */
}

.r_menu li a img {
    width: 40px;        /* 이미지 크기 고정 */
    height: 40px;       /* 이미지 크기 고정 */
    margin-bottom: 10px; /* 이미지와 텍스트 간 간격 */
    border-radius: 50%; /* 원형 이미지 만들기 */
    object-fit: cover;  /* 이미지를 원형 영역에 맞춰 자르기 */
    border: 0.7px solid #c1c1c1; /* 원형 테두리 추가 */
    padding: 12px;       /* 테두리 영역을 확보하기 위해 추가 */
    background-color: white;
    box-sizing: content-box;
}

.r_menu li a p {
    font-size: 14px; /* 텍스트 크기 */
    margin: 0;
    font-weight: normal;
}

.r_menu li a:hover img {
    border: 0.7px solid #ff940a; /* 테두리 색상 변경 */
    box-shadow: 0 0 20px rgba(255, 148, 10, 0.5); /* 그림자 색상 변경 */
    transition: all 0.3s ease; /* 부드러운 애니메이션 */
}


#footer { }
.f_Wrap { width: 1260px; margin: 0 auto; position: relative; }
#footer .f_Wrap > p { padding-top: 20px; padding-left: 10px; font-size: 11px; color: #666; }
/* ftLink */
#ftLink {  overflow: hidden; border-top: 1px solid #333; border-bottom: 1px solid #e6e6e6;}
#ftLink .f_Wrap {  padding: 15px 0;  }
#ftLink > div > ul { display: table; width: 100%; }
#ftLink > div > ul > li { display: inline-block;}
#ftLink > div > ul > li a { color: #666; text-transform: uppercase;  }
#ftLink > div > ul > li a:after { content: "|"; padding: 0 20px; }
#ftLink > div > ul > li:last-child a:after { content: ""; padding: 0; }
#ftLink > div > ul > li a:hover { color: #333;  }
#ftLink .btn_home { position: absolute; right:0; top: 0;  }
#ftLink .btn_home a { display: table-cell; border-left: 1px solid #e6e6e6;  padding: 15px 15px; font-size: 1.4em; }
#ftLink .btn_home a:last-child { border-right: 1px solid #e6e6e6; }
/* footer */
#ftWrap { position: relative; margin-top: 30px; }
/* call-bank-info */
.call-bank-info { overflow: hidden; padding: 30px 0 61px 0 ; color: #666; display: table; width: 100%;  }
.call-bank-info > div { display: table-cell; /* width: 25%; */ border-right: 1px solid #e6e6e6; box-sizing: border-box; padding: 0 50px;line-height: 1.5em; vertical-align: top; }
.call-bank-info > div:first-child { width: 20%; }
.call-bank-info > div:nth-child(2) { width: 20%; }
.call-bank-info > div:last-child { border-right: none; }
.call-bank-info > div h2 { font-size: 20px; text-transform: uppercase;  font-weight: bold; margin-bottom: 15px; color: #333; }
.call-bank-info > div p { line-height: 1.7em; font-size: 11px;  }
.call-bank-info > div:first-child h2 + p { font-size: 1.5em; color: #333; margin-bottom: 3px; }
.call-bank-info > a { position: absolute; top: 150px; right: 0; }
.call-bank-info .f_quick ul { display: table; width: 100%; }
.call-bank-info .f_quick li { display: inline-block; }
.call-bank-info .f_quick li > a { border: 1px solid #ddd; margin-right: 7px; width: 39px; height: 39px; display: block; text-align: center; line-height:42px; font-size: 1.4em; margin-bottom: 5px; }
.call-bank-info .f_quick li > a:hover { color: #fff; background: #777; border: 1px solid #777;}

.call-bank-info > div:first-child { padding-left:0; }
.call-bank-info > div:last-child { padding-right:0; }
.call-bank-info > div:last-child img { padding-right:0; }


/* .f_img */
.f_img {  width: 100%; position:relative; text-align:center; background: url(/design/d4-0692/s023/images/back_f_img.jpg) no-repeat center bottom; background-size: cover;  background-attachment:fixed;}
.f_img > div { min-height:327px; position: relative;  }
.f_img > div h2 { color: #fff; font-size: 4.0em; font-weight: bold; padding-top: 6%; padding-bottom: 20px; }
.f_img > div a { border: 1px solid #fff; color: #fff; padding: 10px 50px; display: inline-block; font-size: 1.8em;  }
.f_img > div a i { display: inline-block; padding-left: 30px; font-size: 1.1em; vertical-align: middle; }
.f_img > div a:hover { background-color: rgba(255, 255, 255, 1); color: #333; border: 1px solid #fff; 

    -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;

}
@keyframes fadein {
    from {  background-color: rgba(255, 255, 255, 0); }
    to   {  background-color: rgba(255, 255, 255, 1); }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from {  background-color: rgba(255, 255, 255, 0); }
    to   {  background-color: rgba(255, 255, 255, 1); }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from {  background-color: rgba(255, 255, 255, 0); }
    to   {  background-color: rgba(255, 255, 255, 1); }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from {  background-color: rgba(255, 255, 255, 0); }
    to   {  background-color: rgba(255, 255, 255, 1); }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from {  background-color: rgba(255, 255, 255, 0); }
    to   {  background-color: rgba(255, 255, 255, 1); }
}


/* ################## right menu start ################## */

#r_fullMenu { /* background: rgba(255,255,255,0.7); */ width:179px; height:100%; position: fixed; top: 0; right:0px; z-index: 111000; /* display: none; */  }

#r_cateWrap {  position: fixed;  top: 0; right:0px;  width: 179px; height: 100%; /*  z-index: 9999;overflow: hidden; */  overflow:visible; border-left: 1px solid #ddd; background: #fff; box-shadow: -2px 0px 4px rgba(0,0,0,0.069);
/*
background: rgba(255, 255, 255, 1); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#5fffffff, endColorstr=#5fffffff); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#5fffffff, endColorstr=#8fffffff)"; 
*/
}   
/*
:root  #r_cateWrap {  position: static \9;  }
*/
@media \0screen { 
#r_cateWrap { position: static;   top: 0; right:0px;  width: 209px; height: 100%; /*  z-index: 9999;overflow: hidden; */  overflow:visible; border-left: 1px solid #ddd; background: #fff;
/*
background: rgba(255, 255, 255, 1); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#8fffffff, endColorstr=#8fffffff); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#8fffffff, endColorstr=#8fffffff)"; 
*/
} 
}    
#r_cateWrap .cateList a { color: #eeeeee; cursor:pointer; }
#r_cateWrap .cateList { width:90%; margin: 0 auto; border: 1px solid #ddd;}

.cate_close { position: absolute; top: 20px; left:310px;  display: none; }
#r_cateWrap .view { display: block; }
#csCenter { position: absolute; bottom: 0; background: #fff; z-index: 20001; width: 90%; margin: 0 auto; padding: 15px 0 20px 0; text-align: left; }
#csCenter > h2, 
#csCenter > div,
#csCenter > p { padding-left: 20px; }
#csCenter h2 { font-size: 1.3em; font-weight: 600; margin: 0; line-height: 1.9em; text-transform: uppercase; color: #333; margin-bottom: 10px; }
#csCenter h2 span { width: 25px; height:2px; background: #333; display: block; margin:5px 0 10px;  }
#csCenter > p {  font-size:1.6em; color: #333; padding-bottom: 5px; }
#csCenter > div:nth-of-type(1) > p { font-size:14px; line-height: 1.2em; margin-top:10px;  color: #888;}
#csCenter > div:nth-of-type(1) > p b { font-weight: normal; }
#csCenter > div:nth-of-type(2) p { font-size: 14px; line-height:1.8em; }    


.r_btn_menu { position: relative; top:40%;  z-index: 12000; display: block; width: 30px; height: 2px; line-height: 50px; margin-left: -30px; font-size: 1.5em; text-align: center; }    
:root .r_btn_menu  {  top:300px \9;  }    

.r_btn_menu .openMenu { font-size: 0.7em; background: #fff; color: #000; width: 30px; height: 30px; line-height: 33px; display: block; border: 1px soild #222; border-right: none; box-shadow: -2px 0px 4px rgba(0,0,0,0.18); }
.r_btn_menu > div {  margin-top:1px; }
.r_btn_menu > div a {  display: block; height: 30px; line-height: 33px; background: #777; color:#fff; margin-bottom:1px; }
.r_btn_menu > div a:hover { background: #555; }


.rightSns { padding-left: 30px;  margin-bottom: 30px; }
.rightSns a { display: block; padding-bottom: 8px; }
.rightSns a img { vertical-align: middle; }
.rightSns a span { display: inline-block;  padding-left: 10px; }

#todayViewWrap a { position: relative; }


.r_top_banner { width:160px; margin:0 auto; height: 126px; box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.18); overflow:hidden; border-radius: 10px; background: #000; }
.r_top_banner a { display: block; width: 190px; height: 126px; color: #bd916d;  } 
.r_top_banner a p { display: none; position: absolute; top:110px; font-size: 20px; color: #fff; z-index: 20001;}
.r_top_banner:hover a img { opacity:0.5; transform:scale(1.1); filter: blur(2px); transition: all 0.6s; }
.r_top_banner:hover a p { display: inline-block; text-align: center; width:160px; }


.rbanner_title p { width: 100px; margin: 15px auto; font-size: 1em; border: 1px solid #ddd; border-radius: 20px; padding: 6px 12px ; text-align: center;  }
.rBanner { position: relative; width: 120px; margin: 0 auto; height: 200px; overflow: hidden; padding-top: 0px; cursor: pointer; }
.rBanner img { border-radius: 10px; }
.rBanner ul {  overflow: hidden; }
.rBanner li { height: 200px; }
.rBanner li > a { display: block; }


/* .rBanner DIRECTION CONTROLS (NEXT / PREV) */
.rBanner .bx-controls {   }
.rBanner .bx-wrapper .bx-controls-direction {  width: 159px; right: 0; position: absolute; top: 200px; z-index: 9999; display: none; }
.rBanner .bx-wrapper .bx-controls-direction a { position: absolute; top: 0; right: 0; outline: 0;  text-indent: -9999px; z-index: 19999; height: 20px; opacity: 0.3; width: 20px; background: #000; z-index:29999; display: block; }
.rBanner .bx-wrapper .bx-controls-direction a.disabled {  display: none; }    
.rBanner .bx-wrapper .bx-controls-direction a { text-indent: -999em; }   
.rBanner .bx-wrapper .bx-prev {    }
.rBanner .bx-wrapper a.bx-next {  top: 20px; }
.rBanner .bx-wrapper .bx-controls-direction a i { text-indent: 0px !important;  color: #fff; font-size: 1.2em; width:100%; height:100%; position: absolute; top:5px; left:0; text-align: center;  display: block;  }
.rBanner .bx-wrapper .bx-controls-direction a:hover {  opacity: 0.5; }

.rBanner .bx-wrapper .bx-pager { width: 100%;   z-index: 9999;  bottom: -23px;  position: absolute;  display: table; text-align: center; }
.rBanner .bx-wrapper .bx-pager > div { display: inline-block; text-align: center; margin: 0 3px; }
.rBanner .bx-wrapper .bx-pager-item {  }
.rBanner .bx-wrapper .bx-pager-item a { text-indent: -999em;   width: 6px; height: 6px; border-radius: 50%; background: #ddd; display: block;  }
.rBanner .bx-wrapper .bx-pager-item a.active { background: #555;}

/* ################## right menu end  ################## */


/* BASIC css end */