@charset "UTF-8";

/********************************************************

HEADER/CONTAINER/FOOTER/QUICK/LNB/GNB 등 레이아웃에 해당되는 css [BSJ]

********************************************************/
/*------------------------------------------------------
    HEADER
------------------------------------------------------*/
#HEADER {position:fixed;top:0;left:0;right:0;width:100%;max-width:640px;height:85px;margin:0 auto;border-bottom:1px solid #c8c8c8;box-sizing:border-box;z-index:999;}
#HEADER:after {content:'';position:absolute;top:0;left:0;width:100%;height:84px;background-color:#fff;opacity:0;z-index:-1;}
#HEADER.fixed:after {opacity:1;}
#HEADER button {position:absolute;top:27px;right:30px;background-color:transparent;border:none;}
#HEADER button.head__back {right:auto;left:30px;}
.head__logo {display:table;table-layout:fixed;height:85px;padding:0 30px;line-height:0;box-sizing:border-box;}
.head__logo a {display:table-cell;vertical-align:middle;}
#head_side_menu {position:fixed;top:0;left:0;right:-1000%;width:100%;max-width:640px;height:100%;margin:0 auto;z-index:-1;opacity:0;-webkit-transition-duration:1s;-o-transition-duration:1s;-ms-transition-duration:1s;transition-duration:1s;}
#head_side_menu.open:before {content:'';position:fixed;top:0;left:0;right:0;width:100%;max-width:640px;height:100%;margin:0 auto;background-color:#000;opacity:0.7;}
.side_menu_wrap {overflow-y:auto;position:relative;max-width:480px;max-height:100%;margin:0 auto;margin-right:0;background-color:#27282a;}
.menu_head_top {position:relative;border-bottom:1px solid #222;}
.menu_head_top .logout_btn {position:absolute;top:20px;left:35px;}
.menu_head_top .head__close_btn {position:absolute;top:24px;right:35px;}
.menu_head_top .menu_logo {height:85px;padding:25px 0;text-align:center;box-sizing:border-box;}
.menu_head_my {padding:20px 35px;}
.menu_head_my strong {font-weight:400;font-size:28px;color:#fff;letter-spacing:-1.3px;}
.menu_head_my .my_menu {margin-top:30px;padding-bottom:20px;}
.menu_head_my .my_menu a {font-weight:300;font-size:20px;color:#fff;letter-spacing:-1.3px;}
.menu_head_my .my_menu i {display:block;height:53px;margin-bottom:15px;}
.menu_head_my .my_menu li {box-sizing:border-box;}
.menu_head_my .my_menu li:first-child {border-right:1px solid #333;}
.menu_head_my .my_menu li:last-child {border-left:1px solid #222;}
.side_menu_body > ul > li {border-top:1px solid #222;}
.side_menu_body > ul > li > a {position:relative;display:inline-block;line-height:105px;padding:0 35px;font-weight:400;font-size:28px;color:#fff;}
.side_menu_body > ul > li.on > a:after,
.side_menu_body > ul > li.ov > a:after {position: absolute;bottom: 30px;content: '';height: 1px;background-color: #fff;left: 35px;right: 35px;}
.side_sub_menu {display:none;padding:20px 35px;background-color:#2a2b2d;border-top:1px solid #222;}
.side_sub_menu li {margin:18px 0;list-style:none;}
.side_sub_menu a {display:inline-block;border-bottom:1px solid #2a2b2d;font-weight:300;font-size:24px;color:#fff;}
.side_sub_menu a:hover {border-bottom:1px solid #fff;}
/*액션*/
#head_side_menu.open {right:0;opacity:1;z-index:9999;}
/*투명일때 스크롤 시*/
.head__logo .logo2 {display:none;}
#HEADER button.head__menu .menu2 {display:none;}
#HEADER.transparent.fixed .head__logo .logo1 {display:none;}
#HEADER.transparent.fixed  button.head__menu .menu1 {display:none;}
#HEADER.transparent.fixed .head__logo .logo2 {display:block;}
#HEADER.transparent.fixed  button.head__menu .menu2 {display:block;}




.sub_HEADER {background-color:#717171;line-height:85px;}
.sub_HEADER .head__text {font-weight:500;font-size:25px;color:#fff;letter-spacing:-1.1px;text-align:center;}
.sub_HEADER#HEADER button.head__close {right:auto;top:29px;left:23px;}
#HEADER.sub_HEADER.fixed:after {content:none;}





/*------------------------------------------------------
    CONTAINER
------------------------------------------------------*/
#CONTAINER {outline:none;}

/*활용법*/
.app_cont {display:none;position: fixed;text-align: center;bottom: 0;z-index: 9999;margin: 0 auto;max-width: 640px;left: 0;right: 0;width: 100%;}
.app_cont span img {max-height: 78vh;}
.app_cont .app_cont_body {padding: 0 10px;box-sizing: border-box;position: relative;height: 200vmin;background-color: rgb(0 0 0 / 89%);}
.app_cont .app_cont_body span {position: absolute;bottom: 0;left: 0;right: 0;padding: 0 10px;box-sizing: border-box;}
.app_cont_foot {background-color: #082e66;padding: 0 20px;box-sizing: border-box;height: 75px;text-align: center;display: table;width: 100%;}
.app_cont_foot a {display:block;line-height:1;}
.app_cont_foot span {display: table-cell;vertical-align: middle;padding: 0 20px;}
.app_cont_foot .pagerBtn {background-color: #fff;width: 35px;height: 35px;border-radius: 50%;overflow: hidden;text-align: center;line-height: 35px;display: inline-block;padding: 0;margin:  0 7px;}
.app_cont_foot .pagerBtn a {display:block;color: #082e66;font-weight: bold;font-size: 20px;line-height: 35px;}
.app_cont .pager_set {display: table-cell;vertical-align: middle;}




/*------------------------------------------------------
    FOOTER
------------------------------------------------------*/
#FOOTER {padding:20px 0;background-color:#f7f7f7;border-top:1px solid #c8c8c8;text-align:center;}
#FOOTER .footer__address {font-weight:500;font-size:20px;color:#666;letter-spacing:-0.88px;line-height:1.2;}
#FOOTER .footer__address .personal_info {display:block;font-size:18px;color:#666;text-decoration:underline;}
#FOOTER .footer__address .copyright {display:block;margin:7px 0;font-weight:500;font-size:15px;color:#999;letter-spacing:-0.33px;}
.circular-menu {position:fixed;bottom:60px;right:60px;z-index:9999;}
.circular-menu .floating-btn {display:block;width:64px;height:64px;border-radius:50%;background-color:#231916;box-shadow:0 2px 30px 0 rgba(35, 25, 22, 0.5);text-align:center;line-height:3.9;cursor:pointer;outline:0;}
.circular-menu .floating-btn {display:block;width:64px;height:64px;line-height:64px;border-radius:50%;background-color:transparent;box-shadow:0 2px 30px 0 rgba(35, 25, 22, 0.5);text-align:center;line-height:3.9;cursor:pointer;outline:0;}
.circular-menu .floating-btn img {transition:transform .5s;-webkit-transition:transform .5s;}
.circular-menu.active .floating-btn {background-color:#fff;box-shadow:inset 0 2px 30px 0 rgba(35, 25, 22, 0.12);}
.circular-menu .floating-btn:active {box-shadow: 0 4px 8px 0 hsla(0, 0%, 0%, .4);}
.circular-menu.active .floating-btn i img {transform:rotate(-45deg);-webkit-transform:rotate(-45deg);}
.circular-menu:after {display:block;content:'';width:44px;height:44px;border-radius:50%;position:absolute;top:5px;right:5px;z-index:-2;background-color:#007aff;transition:all .7s ease;}
.circular-menu.active:after {transform:scale3d(7.6, 7.6, 1);transition-timing-function:cubic-bezier(.68, 1.55, .265, 1);box-shadow:-1px -1px 7px 0 rgb(22 22 35 / 20%);}
.circular-menu .menu-item {position:absolute;top:0;right:0;z-index:-1;display:block;width:64px;height:64px;line-height:64px;border-radius:50%;text-align:center;line-height:3;transition:transform .8s ease, background .5s ease;font-size:15px;}
.circular-menu .menu-item img {vertical-align:middle;margin-top:-15px;}
.circular-menu .menu-item.mi1,
.circular-menu .menu-item.mi2 {background-color:#fff;}
.circular-menu .menu-item.mi3,
.circular-menu .menu-item.mi4 {background-color:#fff;}
.circular-menu.active .menu-item {width:64px;height:64px;line-height:64px;}
.circular-menu.active .menu-item {transition-timing-function: cubic-bezier(0.3, 0.885, 0.32, 1.275);}
.circular-menu.active .menu-item:nth-child(1) {transform:translate3d(41px,-100px,0);}
.circular-menu.active .menu-item:nth-child(2) {transform:translate3d(-40px,-95px,0);}
.circular-menu.active .menu-item:nth-child(3) {transform:translate3d(-94px,-35px,0);}
.circular-menu.active .menu-item:nth-child(4) {transform:translate3d(-88px,40px,0);}