@charset "utf-8"; 
/* sidequick CSS */
/*2022.04.11 YHY*/
/*2022.04.13 YHY*/
/*2024.07.23 SSJ*/




/* 
sub quickmenu basic setting
*/
.subQuickWrap {left:0; width:100%; margin:0 auto;}
.subQuickWrap.fixed .subQuickMenu {position:fixed; right:0; max-width:100% !important;}
.wrap_left_template_wide:not(.wrap_left_template_wide) .subQuickWrap {max-width:1300px;}
.wrap_left_template_wide .subQuickWrap .subQuickMenu {width:100% !important;}


.sub_div_wrap {position:relative;}
.sub_div_wrap .subQuickMenu {position:absolute; width:100%; height:100%; top:0; visibility:hidden; box-sizing:border-box;}

.subQuickMenu .position {width:100%; margin:0 auto; position:relative; text-align:right;}
.subQuickMenu .floating {position:relative; box-sizing:border-box; display:inline-block; z-index:1; position:absolute; right:0;}
.subQuickMenu .floating .quick {/* padding:10px; */box-sizing:border-box; background:#f5f5f5; visibility:visible;}
.subQuickMenu .floating .quick .movBtn {/* margin-top:10px; */text-align:center;display: flex;align-items: center;/* gap: 10px; */padding: 0 5px;box-sizing: border-box;justify-content: center;border-top: 1px solid rgba(255,255,255,0.4);position: relative;}

.subQuickMenu .floating .toggle {visibility:visible;}
.subQuickMenu .qscroll {position:relative; visibility:visible; float:left; width:100%; text-align:center; box-sizing:border-box; right:0;}

.subCon ~ .subQuickMenu .testbtn {display:none;}
.subCon ~ .subQuickMenu + .quickTest {display:none;}

  /*color setting*/
  .subQuickMenu .toggleBtn.bg-red-strong,
  .subQuickMenu .toggleBtn.bg-pink-strong,
  .subQuickMenu .toggleBtn.bg-orange-strong,
  .subQuickMenu .toggleBtn.bg-yellow-strong,
  .subQuickMenu .toggleBtn.bg-green-strong,
  .subQuickMenu .toggleBtn.bg-blue-strong,
  .subQuickMenu .toggleBtn.bg-navy,
  .subQuickMenu .toggleBtn.bg-brown-strong,
  .subQuickMenu .toggleBtn.bg-violet-strong,
  .subQuickMenu .toggleBtn.bg-purple-strong,
  .subQuickMenu .toggleBtn.bg-grey-strong,
  .subQuickMenu .toggleBtn.bg-black {color:#fff;}


  @media (min-width:991px){
    .subQuickMenu .floating {width:150px;}
    .subQuickMenu .floating .quick {width:150px; border:1px solid rgba(0,0,0,0.1);}
    .subQuickMenu .floating .quick .moveBottom {margin-top:10px;}

    .mobileQuick.subQuickMenu .floating {width:100px;}
    .mobileQuick.subQuickMenu .floating .quick {width: 100px;}
  }

  @media (min-width:1660px){
    .subQuickWrap .subQuickMenu:not(.flip_box) {width:1300px; margin:0 auto; position:relative;}
    .sub_div_wrap .subQuickMenu {max-width:1300px; left:50%; transform:translateX(-50%);}
    .subQuickMenu .floating {margin-right:-170px;}

    .wrap_left_template .subQuickWrap .subQuickMenu:not(.flip_box) {width:100%; max-width:100%;}
    .wrap_left_template .subQuickWrap .subQuickMenu .floating {margin-right: 0;}
    .wrap_left_template .subQuickWrap {position: fixed !important;top: 0;}
    .wrap_left_template .subQuickWrap.fixed {max-width:100%;}
    .wrap_left_template .subQuickWrap.fixed .subQuickMenu:not(.flip_box) {width:1520px;width: 100%;}
    .wrap_left_template .subQuickWrap.fixed .subQuickMenu .floating {margin-right:0;}
    .wrap_left_template .subQuickMenu.flip_box .position {max-width:100%;}
    .wrap_left_template .subQuickMenu .floating {position:absolute;right:0;/* margin-right:0; */}
    .wrap_left_template > .contents,
    .wrap_left_template > .contents > .inner {overflow:visible !important;}
  }
  @media (max-width:1659px){
    .subQuickWrap .subQuickMenu:not(.flip_box) {width:100%;}
    .wrap_left_template .subQuickWrap.fixed .subQuickMenu:not(.flip_box) {right:auto; left:50%; transform:translateX(-50%);}
  }
  @media (min-width:1520px) and (max-width:1659px){
    .wrap_left_template .subQuickWrap.fixed .subQuickMenu:not(.flip_box) {/* max-width:1520px !important; */}
    .wrap_left_template_wide .sub_div_wrap .subQuickMenu {max-width:100%; left:0; transform:none; padding-right:10px;}
    .wrap_left_template_wide .subQuickWrap.fixed .subQuickMenu:not(.flip_box) {max-width:100% !important; left:0; transform:translateX(0);}
  }

  @media (min-width:1660px) and (max-width:1860px){
    .wrap_left_template .subQuickMenu .floating {margin-right:0;}
    .wrap_left_template_wide .sub_div_wrap .subQuickMenu {max-width:100%; left:0; transform:none; padding-right:10px;}
  }
  @media (min-width:1470px) and (max-width:1659px){
    .wrap_left_template .subQuickMenu .floating {margin-right:0 !important;}
    .wrap_left_template .subQuickWrap.fixed .subQuickMenu .floating {position:relative;}
  }

  
.wrap_left_template:not(.wrap_left_template_wide) .subQuickWrap:not(.fixed) .subQuickMenu.flip_box {position:fixed;}

/* 관리자 위치 설정 */
#sideQuickMngrView .subQuickMenu {position:relative; margin:0; padding:0;}
#sideQuickMngrView .subQuickMenu .position {margin:0; padding:0; text-align:center;}
#sideQuickMngrView .subQuickMenu .floating {margin:0 auto; padding:0;}

#sideQuickMngrView .mobileQuick .toggleBtn {right:0;}
#sideQuickMngrView .mobileQuick .menuContents ul li a span:only-child {width:100%; text-align:center;}


/* 공통 */
.subQuickMenu .menuContents ul li img {image-rendering:-webkit-optimize-contrast; transform:translateZ(0); backface-visibility:hidden;}









/* 
mobile
*/
.mobileQuick .menuContents {margin-right:0; margin-top: 70px;padding: 10px 0;z-index: 1;position: relative;border-top: 1px solid rgba(255,255,255,0.4);}
.mobileQuick .menuContents ul {width: 100%;}
.mobileQuick .menuContents ul li {padding: 5px;text-align: center;box-sizing: border-box;width: 100%;}
.mobileQuick .menuContents ul li a {text-align:center; width: 100%;}
.mobileQuick .menuContents ul li a span:not(:only-child) {position:absolute; text-indent:-9999px;}
.mobileQuick .menuContents ul li a span:only-child {font-size: 13px; word-break: break-all; width: 80px; display: block;}
.mobileQuick .menuContents ul li img {display:inline-block; max-height:25px; max-width:30px; vertical-align:middle;}

.mobileQuick .toggleBtn {position:relative;position: absolute;color:#333;width: 100%;height: 100%;padding-bottom: 50px;padding-top: 60px;bottom: 0;text-align:center;overflow:hidden;border: 1px solid rgba(255,255,255,0.4);right:0; box-sizing:border-box;}
.mobileQuick .toggleBtn>div:not(.quick-title) {width:100%;height: 25px;position:absolute;top: 0;}
.mobileQuick .toggleBtn>div button {font-size:1px; line-height:1px; text-indent:-999px; overflow:hidden; width:100%; height:100%; color:inherit;}
.mobileQuick .toggleBtn .toggleView button:before {content:"\f106"; font-family:"fontAwesome"; width:100%; height:100%; font-size:15px; position:absolute; top:10px; display:inline-block; text-indent:0; left:50%; margin:0 auto; text-align:center; transform:translate(-50%, 0);}
.mobileQuick .toggleBtn .toggleHide button:before {content:"\f107"; font-family:"fontAwesome"; width:100%; height:100%; font-size:15px;position:absolute; top: 10px;display:inline-block;text-indent:0;left:50%;margin:0 auto;text-align:center;transform:translate(-50%, 0);}
.mobileQuick .toggleBtn .quick-title {width: 100%;height: 35px;overflow:hidden;display:inline-block;line-height: 130%;font-size:15px;font-weight:600;letter-spacing:2px;text-align:center;font-size:13px;overflow: hidden;position: absolute;left: 0;top: 22px;-webkit-line-clamp: 2;-webkit-box-orient:vertical;display:-webkit-box;white-space:normal;padding: 0 5px;box-sizing: border-box;word-break: keep-all;word-wrap: break-word;}

.mobileQuick .floating .quick {background:transparent !important;border:0;position:fixed;bottom:10px; height: auto; z-index: 0;}

.mobileQuick .qscroll {text-align:right;}
.mobileQuick .qscroll>a {}
.mobileQuick .qscroll>a:before {}
.mobileQuick .qscroll>a {font-weight:600;letter-spacing:3px;display:inline-block;position:relative;width: 40px;height: 40px;line-height: 40px;box-sizing:border-box;text-align:center; border-radius:100%;font-size:13px;text-indent:-9999px;overflow:hidden;}
.mobileQuick .qscroll>a:before {display:inline-block;font-family:'fontAwesome';font-size:20px;position:absolute;left:50%;transform:translate(-50%, 0%);letter-spacing:0;text-indent:0;color: #fff;}
.mobileQuick .moveTop>a:before {content:"\f106"; top:0;}
.mobileQuick .moveBottom>a:before {content:"\f107";}
.mobileQuick .menuContents ul li.division {display:none;}

  /*color setting*/
  .mobileQuick .toggleBtn.bg-red-strong .toggleHide button:before,
  .mobileQuick .toggleBtn.bg-pink-strong .toggleHide button:before,
  .mobileQuick .toggleBtn.bg-orange-strong .toggleHide button:before,
  .mobileQuick .toggleBtn.bg-yellow-strong .toggleHide button:before,
  .mobileQuick .toggleBtn.bg-green-strong .toggleHide button:before,
  .mobileQuick .toggleBtn.bg-blue-strong .toggleHide button:before,
  .mobileQuick .toggleBtn.bg-navy .toggleHide button:before,
  .mobileQuick .toggleBtn.bg-brown-strong .toggleHide button:before,
  .mobileQuick .toggleBtn.bg-violet-strong .toggleHide button:before,
  .mobileQuick .toggleBtn.bg-purple-strong .toggleHide button:before,
  .mobileQuick .toggleBtn.bg-grey-strong .toggleHide button:before,
  .mobileQuick .toggleBtn.bg-black .toggleHide button:before {color:#fff;}

  .mobileQuick .toggleBtn.bg-red-strong + .menuContents ul li a span:only-child,
  .mobileQuick .toggleBtn.bg-pink-strong + .menuContents ul li a span:only-child,
  .mobileQuick .toggleBtn.bg-orange-strong + .menuContents ul li a span:only-child,
  .mobileQuick .toggleBtn.bg-yellow-strong + .menuContents ul li a span:only-child,
  .mobileQuick .toggleBtn.bg-green-strong + .menuContents ul li a span:only-child,
  .mobileQuick .toggleBtn.bg-blue-strong + .menuContents ul li a span:only-child,
  .mobileQuick .toggleBtn.bg-navy + .menuContents ul li a span:only-child,
  .mobileQuick .toggleBtn.bg-brown-strong + .menuContents ul li a span:only-child,
  .mobileQuick .toggleBtn.bg-violet-strong + .menuContents ul li a span:only-child,
  .mobileQuick .toggleBtn.bg-purple-strong + .menuContents ul li a span:only-child,
  .mobileQuick .toggleBtn.bg-grey-strong + .menuContents ul li a span:only-child,
  .mobileQuick .toggleBtn.bg-black + .menuContents ul li a span:only-child {color:#fff;}

  .mobileQuick .toggleBtn.bg-red ~ .movBtn .qscroll a:before,
  .mobileQuick .toggleBtn.bg-pink ~ .movBtn .qscroll a:before,
  .mobileQuick .toggleBtn.bg-orange ~ .movBtn .qscroll a:before,
  .mobileQuick .toggleBtn.bg-yellow ~ .movBtn .qscroll a:before,
  .mobileQuick .toggleBtn.bg-green ~ .movBtn .qscroll a:before,
  .mobileQuick .toggleBtn.bg-blue ~ .movBtn .qscroll a:before,
  .mobileQuick .toggleBtn.bg-brown ~ .movBtn .qscroll a:before,
  .mobileQuick .toggleBtn.bg-violet ~ .movBtn .qscroll a:before,
  .mobileQuick .toggleBtn.bg-purple ~ .movBtn .qscroll a:before,
  .mobileQuick .toggleBtn.bg-grey ~ .movBtn .qscroll a:before {color:#000;}


  @media (max-width:990px){
    .subQuickMenu.mobileQuick .floating {width:100px;}
  }




















/* 
기본테마 basic 
*/
.subQuickMenu.basic .floating .quick .movBtn {display:flex; padding:0 5px 15px; box-sizing:border-box; width:100%; justify-content:center; align-items:center; margin-top:0; border-top:1px solid rgba(255,255,255,0.3); position:relative;}
.subQuickMenu.basic .qscroll {margin-top:0 !important;}
.subQuickMenu.basic .qscroll>a  {font-weight:600; letter-spacing:3px; display:inline-block; position:relative; width:45px; height:45px; line-height:45px; box-sizing:border-box; text-align:center; font-size:8px; letter-spacing:2px; overflow:hidden; color:#000; padding-top:16px;}
.subQuickMenu.basic .qscroll>a:before {display:inline-block; font-family:'fontAwesome'; font-size:20px; position:absolute; left:50%; top:0; transform:translate(-50%, 0%); letter-spacing:0; text-indent:0; color:#555;}

.subQuickMenu.basic .moveTop>a:before {content:"\f106"; top:0;}
.subQuickMenu.basic .moveBottom>a:before {content:"\f107";}


.subQuickMenu.basic .floating {right:15px; width:140px; margin-top:20px;}


.subQuickMenu.basic .toggleBtn {text-align:center; display:inline-block; position:relative; box-sizing:border-box; width:100%; position:absolute; right:0; top:0; height:100%; border-radius:inherit;}
.subQuickMenu.basic .toggleBtn .quick-title {overflow:hidden; display:inline-block; width:100%; margin-top:40px; padding:0 10px; box-sizing:border-box; word-break:break-all; font-size:15px; font-weight:600; letter-spacing:2px; text-align:center; word-break:keep-all; word-wrap:break-word; line-height:150%; -webkit-line-clamp:2; -webkit-box-orient:vertical; display:-webkit-box; white-space:normal; max-height:45px;}
.subQuickMenu.basic .toggleBtn .toggleView {width:100%; height:90px; position:absolute; top:0px; color:inherit;}
.subQuickMenu.basic .toggleBtn .toggleView button {font-size:1px; line-height:1px; text-indent:-999px; overflow:hidden; width:100%; height:100%; color:inherit;}
.subQuickMenu.basic .toggleBtn .toggleView button:before {content:"\276E"; font-size:13px; line-height:28px; position:absolute; top:12px; margin-left:-3px; display:inline-block; transform:rotate(-90deg); text-indent:0; right:45%;}
.subQuickMenu.basic .toggleBtn .toggleHide {position:absolute; width:100%; top:0; color:inherit;}
.subQuickMenu.basic .toggleBtn .toggleHide button {margin:1px; font-size:1px; line-height:1px; text-indent:-999px; overflow:hidden; width:100%; height:100%; color:inherit;}
.subQuickMenu.basic .toggleBtn .toggleHide button:focus {border:1px solid #666; border-radius:100%; box-sizing:border-box;}
.subQuickMenu.basic .toggleBtn .toggleHide button:before {content:"\276F"; font-size:13px; line-height:28px; position:absolute; top:12px; margin-left:-3px; display:inline-block; transform:rotate(-90deg); text-indent:0; right:45%;}

.subQuickMenu.basic .menuContents {width:100% !important; /border:1px solid rgba(0,0,0,0.1); z-index:1; position:relative; border:2px solid rgba(255,255,255,0.8); border-width:2px 0;}
.subQuickMenu.basic .menuContents ul {width:100%;}
.subQuickMenu.basic .menuContents ul li {display:block; width:100%; clear:both; border-top:1px solid rgba(255,255,255,0.2); border-bottom:1px solid rgba(0,0,0,0.1);}
.subQuickMenu.basic .menuContents ul li:first-child.division {border-top:none; margin-top:0;}
.subQuickMenu.basic .menuContents ul li.division {border-top:2px solid rgba(0, 0, 0, 0.1);/* border-bottom:2px solid rgba(255,255,255,0.8); */padding:20px 15px 10px;/* margin-top:10px; */font-weight:600;font-size:0.95em;text-align:center;box-sizing:border-box;}
.subQuickMenu.basic .menuContents ul li.division:empty {padding:0; border-top-width:3px;}
.subQuickMenu.basic .menuContents ul li.division + li:not(.division) {border-top: none;}
.subQuickMenu.basic .menuContents ul li.division + li.division {display:none;}
.subQuickMenu.basic .menuContents ul li:last-child {border-bottom:none;}
.subQuickMenu.basic .menuContents ul li a {display:flex; align-items:center; padding:13px 5px; text-align:center; box-sizing:border-box; z-index:1; justify-content:center;}

.subQuickMenu.basic .menuContents ul li a:hover,
.subQuickMenu.basic .menuContents ul li a:focus {font-weight:600;}
.subQuickMenu.basic .menuContents ul li a:hover:before,
.subQuickMenu.basic .menuContents ul li a:focus:before {width:123px; height:123px;}
.subQuickMenu.basic .menuContents ul li img {display:inline-block; max-height:60px; flex-shrink:1; max-width:20%; margin:0 5px;}
.subQuickMenu.basic .menuContents ul li span:not(:empty) {overflow:hidden; font-size:14px; color:#444; font-weight:600; letter-spacing:1.5px; word-break:break-all; word-wrap:break-word; min-width:calc(80% - 20px); padding:0 5px; box-sizing:border-box; text-align:left;}
.subQuickMenu.basic .menuContents ul li span:empty {display:none;}
.subQuickMenu.basic .menuContents ul li span:only-child {width:100%; padding:0 10px; text-align:center;}

  /*color setting*/
  .subQuickMenu.basic .toggleBtn.bg-red-strong,
  .subQuickMenu.basic .toggleBtn.bg-pink-strong,
  .subQuickMenu.basic .toggleBtn.bg-orange-strong,
  .subQuickMenu.basic .toggleBtn.bg-yellow-strong,
  .subQuickMenu.basic .toggleBtn.bg-green-strong,
  .subQuickMenu.basic .toggleBtn.bg-blue-strong,
  .subQuickMenu.basic .toggleBtn.bg-navy,
  .subQuickMenu.basic .toggleBtn.bg-brown-strong,
  .subQuickMenu.basic .toggleBtn.bg-violet-strong,
  .subQuickMenu.basic .toggleBtn.bg-purple-strong,
  .subQuickMenu.basic .toggleBtn.bg-grey-strong,
  .subQuickMenu.basic .toggleBtn.bg-black {color:#fff;}

  .subQuickMenu.basic .toggleBtn.bg-red-strong + .menuContents ul li span,
  .subQuickMenu.basic .toggleBtn.bg-pink-strong + .menuContents ul li span,
  .subQuickMenu.basic .toggleBtn.bg-orange-strong + .menuContents ul li span,
  .subQuickMenu.basic .toggleBtn.bg-yellow-strong + .menuContents ul li span,
  .subQuickMenu.basic .toggleBtn.bg-green-strong + .menuContents ul li span,
  .subQuickMenu.basic .toggleBtn.bg-blue-strong + .menuContents ul li span,
  .subQuickMenu.basic .toggleBtn.bg-navy + .menuContents ul li span,
  .subQuickMenu.basic .toggleBtn.bg-brown-strong + .menuContents ul li span,
  .subQuickMenu.basic .toggleBtn.bg-violet-strong + .menuContents ul li span,
  .subQuickMenu.basic .toggleBtn.bg-purple-strong + .menuContents ul li span,
  .subQuickMenu.basic .toggleBtn.bg-grey-strong + .menuContents ul li span,
  .subQuickMenu.basic .toggleBtn.bg-black + .menuContents ul li span {color:#fff;}

  .subQuickMenu.basic .toggleBtn.bg-red-strong ~ .movBtn .qscroll>a:before,
  .subQuickMenu.basic .toggleBtn.bg-pink-strong ~ .movBtn .qscroll>a:before,
  .subQuickMenu.basic .toggleBtn.bg-orange-strong ~ .movBtn .qscroll>a:before,
  .subQuickMenu.basic .toggleBtn.bg-yellow-strong ~ .movBtn .qscroll>a:before,
  .subQuickMenu.basic .toggleBtn.bg-green-strong ~ .movBtn .qscroll>a:before,
  .subQuickMenu.basic .toggleBtn.bg-blue-strong ~ .movBtn .qscroll>a:before,
  .subQuickMenu.basic .toggleBtn.bg-navy ~ .movBtn .qscroll>a:before,
  .subQuickMenu.basic .toggleBtn.bg-brown-strong ~ .movBtn .qscroll>a:before,
  .subQuickMenu.basic .toggleBtn.bg-violet-strong ~ .movBtn .qscroll>a:before,
  .subQuickMenu.basic .toggleBtn.bg-purple-strong ~ .movBtn .qscroll>a:before,
  .subQuickMenu.basic .toggleBtn.bg-grey-strong ~ .movBtn .qscroll>a:before,
  .subQuickMenu.basic .toggleBtn.bg-black ~ .movBtn .qscroll>a:before {color:#fff;}

  .subQuickMenu.basic .toggleBtn.bg-red-strong ~ .movBtn .qscroll>a,
  .subQuickMenu.basic .toggleBtn.bg-pink-strong ~ .movBtn .qscroll>a,
  .subQuickMenu.basic .toggleBtn.bg-orange-strong ~ .movBtn .qscroll>a,
  .subQuickMenu.basic .toggleBtn.bg-yellow-strong ~ .movBtn .qscroll>a,
  .subQuickMenu.basic .toggleBtn.bg-green-strong ~ .movBtn .qscroll>a,
  .subQuickMenu.basic .toggleBtn.bg-blue-strong ~ .movBtn .qscroll>a,
  .subQuickMenu.basic .toggleBtn.bg-navy ~ .movBtn .qscroll>a,
  .subQuickMenu.basic .toggleBtn.bg-brown-strong ~ .movBtn .qscroll>a,
  .subQuickMenu.basic .toggleBtn.bg-violet-strong ~ .movBtn .qscroll>a,
  .subQuickMenu.basic .toggleBtn.bg-purple-strong ~ .movBtn .qscroll>a,
  .subQuickMenu.basic .toggleBtn.bg-grey-strong ~ .movBtn .qscroll>a,
  .subQuickMenu.basic .toggleBtn.bg-black ~ .movBtn .qscroll>a {color:#fff;}

  .subQuickMenu.basic .toggleBtn.bg-red-strong + .menuContents ul li.division,
  .subQuickMenu.basic .toggleBtn.bg-pink-strong + .menuContents ul li.division,
  .subQuickMenu.basic .toggleBtn.bg-orange-strong + .menuContents ul li.division,
  .subQuickMenu.basic .toggleBtn.bg-yellow-strong + .menuContents ul li.division,
  .subQuickMenu.basic .toggleBtn.bg-green-strong + .menuContents ul li.division,
  .subQuickMenu.basic .toggleBtn.bg-blue-strong + .menuContents ul li.division,
  .subQuickMenu.basic .toggleBtn.bg-navy + .menuContents ul li.division,
  .subQuickMenu.basic .toggleBtn.bg-brown-strong + .menuContents ul li.division,
  .subQuickMenu.basic .toggleBtn.bg-violet-strong + .menuContents ul li.division,
  .subQuickMenu.basic .toggleBtn.bg-purple-strong + .menuContents ul li.division,
  .subQuickMenu.basic .toggleBtn.bg-grey-strong + .menuContents ul li.division,
  .subQuickMenu.basic .toggleBtn.bg-black + .menuContents ul li.division {border-top:2px solid rgba(255,255,255,0.8);}

  @media (min-width:991px){
    .subQuickMenu.basic .quick {padding:0; background:transparent; border:none; height:auto; float:left; text-align:center; padding-top:100px; overflow:hidden; width:100%; box-shadow:0px 2px 10px rgb(0 0 0 / 15%);}
  }
  @media (max-width:1660px){
    .subQuickMenu.basic .quick.close {right:0; float:right;}
  }











/* 
기본테마 iconbox 
*/
.subQuickMenu.iconbox .floating {right:15px; width:120px; margin-top:20px;}
.subQuickMenu.iconbox .quick {padding:0; background:transparent; border:none; height:auto; float:left; text-align:center;}

.subQuickMenu.iconbox .toggleBtn {width:90px; height:90px; text-align:center; display:inline-block; overflow:hidden; border:1px solid rgba(0,0,0,0.1); 
                                position:relative; border-radius:100%; box-sizing:border-box;}
.subQuickMenu.iconbox .toggleBtn .quick-title {overflow:hidden; display:inline-block; width:90px; height:90px; margin-top:31px; padding:0 10px; box-sizing:border-box; word-break:break-all; font-size:15px; font-weight:600; letter-spacing:2px; text-align:center;}
.subQuickMenu.iconbox .toggleBtn .toggleView {width:100%; height:90px; position:absolute; top:0px; color:inherit;}
.subQuickMenu.iconbox .toggleBtn .toggleView button {font-size:1px; line-height:1px; text-indent:-999px; overflow:hidden;  width:100%; height:100%; color:inherit;}
.subQuickMenu.iconbox .toggleBtn .toggleView button:before {content:"\276E"; font-size:13px; line-height:28px; position:absolute; top:5px; margin-left:-3px; display:inline-block; transform:rotate(-90deg); text-indent:0; right:45%;}
.subQuickMenu.iconbox .toggleBtn .toggleHide {position:absolute; width:100%; height:90px; top:0; color:inherit;}
.subQuickMenu.iconbox .toggleBtn .toggleHide button {margin:1px; font-size:1px; line-height:1px; text-indent:-999px; overflow:hidden;  width:100%; height:100%; color:inherit;}
.subQuickMenu.iconbox .toggleBtn .toggleHide button:focus {border:1px solid #666; border-radius:100%; box-sizing:border-box;}
.subQuickMenu.iconbox .toggleBtn .toggleHide button:before {content:"\276F"; font-size:13px; line-height:28px; position:absolute; top:5px; margin-left:-3px; display:inline-block; transform:rotate(-90deg); text-indent:0; right:45%;}

.subQuickMenu.iconbox .menuContents {width:100% !important; float:left; box-sizing:border-box; margin-top:-3px;}
.subQuickMenu.iconbox .menuContents ul {width:100%; display:inline-block; height:auto; font-size:18px; text-align:center; margin:0 auto;}
.subQuickMenu.iconbox .menuContents ul li {display:block; width:100%; clear:both; background:#f5f5f5; width:90px; height:90px; margin:15px auto; border-radius:50%; box-shadow:0px 0px 7px rgb(0 0 0 / 15%);}
.subQuickMenu.iconbox .menuContents ul li:first-child.division {border-top:none; margin-top:0;}
.subQuickMenu.iconbox .menuContents ul li.division {border-top:2px solid rgba(0,0,0,0.1); padding:20px 15px 10px; margin-top:10px; font-weight:600; font-size:0.95em; text-align:center; box-sizing:border-box;}
.subQuickMenu.iconbox .menuContents ul li.division:empty {padding:10px 0 0;}
.subQuickMenu.iconbox .menuContents ul li.division + li {border-top:none;}
.subQuickMenu.iconbox .menuContents ul li.division + li.division {display:none;}
.subQuickMenu.iconbox .menuContents ul li a {display:flex; flex-direction:column; justify-content:center; align-items:center; position:relative; padding:7px 5px; text-align:center; width:100%; height:100%; border-radius:50%; box-sizing:border-box; z-index:1; border:1px solid #f9f9f9;}
.subQuickMenu.iconbox .menuContents ul li a:before {content:''; position:absolute; left:50%; top:50%;  width:0; height:0; border-radius:50%; transform:translate(-50%,-50%); transition:all .5s; background:#dbe3f5; opacity:0.3; z-index:-1;}
.subQuickMenu.iconbox .menuContents ul li a:hover,
.subQuickMenu.iconbox .menuContents ul li a:focus {font-weight:600;}
.subQuickMenu.iconbox .menuContents ul li a:hover:before,
.subQuickMenu.iconbox .menuContents ul li a:focus:before {width:123px; height:123px;}
.subQuickMenu.iconbox .menuContents ul li img {display:inline-block; max-height:30px; max-width:35px;}
.subQuickMenu.iconbox .menuContents ul li img + span {margin-top:5px;}
.subQuickMenu.iconbox .menuContents ul li span {overflow:hidden; font-size:15px; color:#444; width:100%; clear:both; display:block; font-weight:600; word-break:break-all; -webkit-line-clamp:2; -webkit-box-orient:vertical; display:-webkit-box; white-space:normal;}
.subQuickMenu.iconbox .menuContents ul li span:empty {display:none;}

.subQuickMenu.iconbox .qscroll {margin-top:0 !important; width:30px; text-align:center; float:none; right:auto;}
.subQuickMenu.iconbox .qscroll>a {width:100% !important; height:auto !important; line-height:normal !important; padding:12px 0; display:flex !important; justify-content:center; align-items:center;}
.subQuickMenu.iconbox .qscroll>a:before {line-height:normal; top:50% !important; transform:translate(-50%, -50%) !important;}
.subQuickMenu.iconbox .qscroll>a {font-weight:600; letter-spacing:3px; display:inline-block; position:relative; width:45px; height:45px; line-height:45px; box-sizing:border-box; text-align:center; background:#fff; border-radius:100%; font-size:13px; text-indent:-9999px; overflow:hidden;}
.subQuickMenu.iconbox .qscroll>a:before {display:inline-block; font-family:'fontAwesome'; font-size:20px; position:absolute; left:50%; transform:translate(-50%, 0%); letter-spacing:0; text-indent:0; color:#555;}

.subQuickMenu.iconbox .floating .quick .movBtn {position:relative; clear:both; box-shadow:0px 1px 6px rgb(0 0 0 / 10%); display:flex; border-radius:50px; width:80px; margin:15px auto 0; justify-content:center;}
.subQuickMenu.iconbox .moveTop>a:before {content:"\f106"; top:0;}
.subQuickMenu.iconbox .moveBottom>a:before {content:"\f107";}
.subQuickMenu.iconbox .menuContents ul li.division {display:none;}
  

  /*color setting*/
  .subQuickMenu.iconbox .toggleBtn.bg-red-strong,
  .subQuickMenu.iconbox .toggleBtn.bg-pink-strong,
  .subQuickMenu.iconbox .toggleBtn.bg-orange-strong,
  .subQuickMenu.iconbox .toggleBtn.bg-yellow-strong,
  .subQuickMenu.iconbox .toggleBtn.bg-green-strong,
  .subQuickMenu.iconbox .toggleBtn.bg-blue-strong,
  .subQuickMenu.iconbox .toggleBtn.bg-navy,
  .subQuickMenu.iconbox .toggleBtn.bg-brown-strong,
  .subQuickMenu.iconbox .toggleBtn.bg-violet-strong,
  .subQuickMenu.iconbox .toggleBtn.bg-purple-strong,
  .subQuickMenu.iconbox .toggleBtn.bg-grey-strong,
  .subQuickMenu.iconbox .toggleBtn.bg-black {color:#fff;}

  @media (max-width:1660px){
    .subQuickMenu.iconbox .quick.close {width:70px; right:0; margin-right:10px; float:right;}
    .subQuickMenu.iconbox .close .toggleBtn {right:10px; left:auto; transform:none;}
  }










/* 
기본테마 smallicon_box 
*/
.subQuickMenu.smallicon_box  .floating .quick .movBtn {display:flex; padding:0 20px; box-sizing:border-box; width:100%; justify-content:center; align-items:center; padding-bottom:40px; margin-top:0; border-top:1px solid rgba(255,255,255,0.3); position:relative;}
.subQuickMenu.smallicon_box .qscroll {margin-top:0 !important;}
.subQuickMenu.smallicon_box .qscroll>a  {font-weight:600; letter-spacing:3px; display:inline-block; position:relative; width:45px; height:45px; line-height:45px; box-sizing:border-box; text-align:center; font-size:8px; letter-spacing:2px; overflow:hidden; color:#000; padding-top:16px;}
.subQuickMenu.smallicon_box .qscroll>a:before {display:inline-block; font-family:'fontAwesome'; font-size:20px; position:absolute; left:50%; top:0; transform:translate(-50%, 0%); letter-spacing:0; text-indent:0; color:#555;}

.subQuickMenu.smallicon_box .moveTop>a:before {content:"\f106"; top:0;}
.subQuickMenu.smallicon_box .moveBottom>a:before {content:"\f107";}


.subQuickMenu.smallicon_box .floating {right:15px;width:120px;margin-top:20px;}
.subQuickMenu.smallicon_box .quick {padding:0; background:transparent; border:none; height:auto; float:left; text-align:center; margin-top:3px; padding-top:100px; border-radius:80px; overflow:hidden; width:100%; box-shadow:0px 2px 10px rgb(0 0 0 / 15%);}

.subQuickMenu.smallicon_box .toggleBtn {text-align:center; display:inline-block; position:relative; box-sizing:border-box; width:100%; position:absolute; right:0; top:0; height:100%; border-radius:inherit;}
.subQuickMenu.smallicon_box .toggleBtn .quick-title {overflow:hidden; display:inline-block; width:100%; margin-top:40px; padding:0 10px; box-sizing:border-box; word-break:break-all; font-size:15px; font-weight:600; letter-spacing:2px; text-align:center; word-break:keep-all; word-wrap:break-word; line-height:150%; -webkit-line-clamp:2; -webkit-box-orient:vertical; display:-webkit-box; white-space:normal; max-height:45px;}
.subQuickMenu.smallicon_box .toggleBtn .toggleView {width:100%; height:90px; position:absolute; top:0px; color:inherit;}
.subQuickMenu.smallicon_box .toggleBtn .toggleView button {font-size:1px; line-height:1px; text-indent:-999px; overflow:hidden; width:100%; height:100%; color:inherit;}
.subQuickMenu.smallicon_box .toggleBtn .toggleView button:before {content:"\276E"; font-size:13px; line-height:28px; position:absolute; top:12px; margin-left:-3px; display:inline-block; transform:rotate(-90deg); text-indent:0; right:45%;}
.subQuickMenu.smallicon_box .toggleBtn .toggleHide {position:absolute; width:100%; top:0; color:inherit;}
.subQuickMenu.smallicon_box .toggleBtn .toggleHide button {margin:1px; font-size:1px; line-height:1px; text-indent:-999px; overflow:hidden; width:100%; height:100%; color:inherit;}
.subQuickMenu.smallicon_box .toggleBtn .toggleHide button:focus {border:1px solid #666; border-radius:100%; box-sizing:border-box;}
.subQuickMenu.smallicon_box .toggleBtn .toggleHide button:before {content:"\276F"; font-size:13px; line-height:28px; position:absolute; top:12px; margin-left:-3px; display:inline-block; transform:rotate(-90deg); text-indent:0; right:45%;}

.subQuickMenu.smallicon_box .menuContents {width:100% !important; / border:1px solid rgba(0,0,0,0.1); z-index:1; position:relative; border-width:1px 0;}
.subQuickMenu.smallicon_box .menuContents ul {width:100%;}
.subQuickMenu.smallicon_box .menuContents ul li {display:block; width:100%; clear:both; border-top:1px solid rgba(255,255,255,0.2); border-bottom:1px solid rgba(0,0,0,0.1);}
.subQuickMenu.smallicon_box .menuContents ul li:first-child.division {border-top:none; margin-top:0;}
.subQuickMenu.smallicon_box .menuContents ul li.division {border-top:2px solid rgba(0, 0, 0, 0.1);/* border-bottom:2px solid rgba(255,255,255,0.8); */border-bottom: none;padding:20px 15px 10px;margin-top:10px;font-weight:600;font-size:0.95em;text-align:center;box-sizing:border-box;}
.subQuickMenu.smallicon_box .menuContents ul li.division:empty {padding: 0;border-top-width:3px;margin: 0;}
.subQuickMenu.smallicon_box .menuContents ul li.division + li:not(.division) {border-top:none;}
.subQuickMenu.smallicon_box .menuContents ul li.division + li.division {display:none;}
.subQuickMenu.smallicon_box .menuContents ul li:last-child {border-bottom:none;}
.subQuickMenu.smallicon_box .menuContents ul li a {display:flex; align-items:center; padding:13px 5px; text-align:center; box-sizing:border-box; z-index:1; justify-content:center;}

.subQuickMenu.smallicon_box .menuContents ul li a:hover,
.subQuickMenu.smallicon_box .menuContents ul li a:focus {font-weight:600;}
.subQuickMenu.smallicon_box .menuContents ul li a:hover:before,
.subQuickMenu.smallicon_box .menuContents ul li a:focus:before {width:123px; height:123px;}
.subQuickMenu.smallicon_box .menuContents ul li img {display:inline-block; max-height:60px; flex-shrink:1; max-width:20%; margin:0 5px;}
.subQuickMenu.smallicon_box .menuContents ul li span:not(:empty) {overflow:hidden; font-size:14px; color:#444; font-weight:600; letter-spacing:1.5px; word-break:break-all; word-wrap:break-word; min-width:calc(80% - 20px); padding:0 5px; box-sizing:border-box; text-align:left;}
.subQuickMenu.smallicon_box .menuContents ul li span:empty {display:none;}
.subQuickMenu.smallicon_box .menuContents ul li span:only-child {width:100%; padding:0 10px; text-align:center;}

  /*color setting*/
  .subQuickMenu.smallicon_box .toggleBtn.bg-red-strong,
  .subQuickMenu.smallicon_box .toggleBtn.bg-pink-strong,
  .subQuickMenu.smallicon_box .toggleBtn.bg-orange-strong,
  .subQuickMenu.smallicon_box .toggleBtn.bg-yellow-strong,
  .subQuickMenu.smallicon_box .toggleBtn.bg-green-strong,
  .subQuickMenu.smallicon_box .toggleBtn.bg-blue-strong,
  .subQuickMenu.smallicon_box .toggleBtn.bg-navy,
  .subQuickMenu.smallicon_box .toggleBtn.bg-brown-strong,
  .subQuickMenu.smallicon_box .toggleBtn.bg-violet-strong,
  .subQuickMenu.smallicon_box .toggleBtn.bg-purple-strong,
  .subQuickMenu.smallicon_box .toggleBtn.bg-grey-strong,
  .subQuickMenu.smallicon_box .toggleBtn.bg-black {color:#fff;}

  .subQuickMenu.smallicon_box .toggleBtn.bg-red-strong + .menuContents ul li span,
  .subQuickMenu.smallicon_box .toggleBtn.bg-pink-strong + .menuContents ul li span,
  .subQuickMenu.smallicon_box .toggleBtn.bg-orange-strong + .menuContents ul li span,
  .subQuickMenu.smallicon_box .toggleBtn.bg-yellow-strong + .menuContents ul li span,
  .subQuickMenu.smallicon_box .toggleBtn.bg-green-strong + .menuContents ul li span,
  .subQuickMenu.smallicon_box .toggleBtn.bg-blue-strong + .menuContents ul li span,
  .subQuickMenu.smallicon_box .toggleBtn.bg-navy + .menuContents ul li span,
  .subQuickMenu.smallicon_box .toggleBtn.bg-brown-strong + .menuContents ul li span,
  .subQuickMenu.smallicon_box .toggleBtn.bg-violet-strong + .menuContents ul li span,
  .subQuickMenu.smallicon_box .toggleBtn.bg-purple-strong + .menuContents ul li span,
  .subQuickMenu.smallicon_box .toggleBtn.bg-grey-strong + .menuContents ul li span,
  .subQuickMenu.smallicon_box .toggleBtn.bg-black + .menuContents ul li span {color:#fff;}

  .subQuickMenu.smallicon_box .toggleBtn.bg-red-strong ~ .movBtn .qscroll>a:before,
  .subQuickMenu.smallicon_box .toggleBtn.bg-pink-strong ~ .movBtn .qscroll>a:before,
  .subQuickMenu.smallicon_box .toggleBtn.bg-orange-strong ~ .movBtn .qscroll>a:before,
  .subQuickMenu.smallicon_box .toggleBtn.bg-yellow-strong ~ .movBtn .qscroll>a:before,
  .subQuickMenu.smallicon_box .toggleBtn.bg-green-strong ~ .movBtn .qscroll>a:before,
  .subQuickMenu.smallicon_box .toggleBtn.bg-blue-strong ~ .movBtn .qscroll>a:before,
  .subQuickMenu.smallicon_box .toggleBtn.bg-navy ~ .movBtn .qscroll>a:before,
  .subQuickMenu.smallicon_box .toggleBtn.bg-brown-strong ~ .movBtn .qscroll>a:before,
  .subQuickMenu.smallicon_box .toggleBtn.bg-violet-strong ~ .movBtn .qscroll>a:before,
  .subQuickMenu.smallicon_box .toggleBtn.bg-purple-strong ~ .movBtn .qscroll>a:before,
  .subQuickMenu.smallicon_box .toggleBtn.bg-grey-strong ~ .movBtn .qscroll>a:before,
  .subQuickMenu.smallicon_box .toggleBtn.bg-black ~ .movBtn .qscroll>a:before {color:#fff;}

  .subQuickMenu.smallicon_box .toggleBtn.bg-red-strong ~ .movBtn .qscroll>a,
  .subQuickMenu.smallicon_box .toggleBtn.bg-pink-strong ~ .movBtn .qscroll>a,
  .subQuickMenu.smallicon_box .toggleBtn.bg-orange-strong ~ .movBtn .qscroll>a,
  .subQuickMenu.smallicon_box .toggleBtn.bg-yellow-strong ~ .movBtn .qscroll>a,
  .subQuickMenu.smallicon_box .toggleBtn.bg-green-strong ~ .movBtn .qscroll>a,
  .subQuickMenu.smallicon_box .toggleBtn.bg-blue-strong ~ .movBtn .qscroll>a,
  .subQuickMenu.smallicon_box .toggleBtn.bg-navy ~ .movBtn .qscroll>a,
  .subQuickMenu.smallicon_box .toggleBtn.bg-brown-strong ~ .movBtn .qscroll>a,
  .subQuickMenu.smallicon_box .toggleBtn.bg-violet-strong ~ .movBtn .qscroll>a,
  .subQuickMenu.smallicon_box .toggleBtn.bg-purple-strong ~ .movBtn .qscroll>a,
  .subQuickMenu.smallicon_box .toggleBtn.bg-grey-strong ~ .movBtn .qscroll>a,
  .subQuickMenu.smallicon_box .toggleBtn.bg-black ~ .movBtn .qscroll>a {color:#fff;}

  .subQuickMenu.smallicon_box .toggleBtn.bg-red-strong + .menuContents ul li.division,
  .subQuickMenu.smallicon_box .toggleBtn.bg-pink-strong + .menuContents ul li.division,
  .subQuickMenu.smallicon_box .toggleBtn.bg-orange-strong + .menuContents ul li.division,
  .subQuickMenu.smallicon_box .toggleBtn.bg-yellow-strong + .menuContents ul li.division,
  .subQuickMenu.smallicon_box .toggleBtn.bg-green-strong + .menuContents ul li.division,
  .subQuickMenu.smallicon_box .toggleBtn.bg-blue-strong + .menuContents ul li.division,
  .subQuickMenu.smallicon_box .toggleBtn.bg-navy + .menuContents ul li.division,
  .subQuickMenu.smallicon_box .toggleBtn.bg-brown-strong + .menuContents ul li.division,
  .subQuickMenu.smallicon_box .toggleBtn.bg-violet-strong + .menuContents ul li.division,
  .subQuickMenu.smallicon_box .toggleBtn.bg-purple-strong + .menuContents ul li.division,
  .subQuickMenu.smallicon_box .toggleBtn.bg-grey-strong + .menuContents ul li.division,
  .subQuickMenu.smallicon_box .toggleBtn.bg-black + .menuContents ul li.division {border-top:2px solid rgba(255,255,255,0.8);}


  @media (max-width:1660px){
    .subQuickMenu.smallicon_box .quick.close {right:0; float:right;}
  }












/* 서브퀵 미사용인경우 - 상/하단이동버튼만 보임. */
.topBtnOnly {padding-top:0;}
.topBtnOnly .position .floating .quick {width:50px; height:110px; margin:10px; padding:0; z-index:9999; display:block !important; bottom:0;  position:fixed !important; 
                                        -webkit-transition:transform 1s; transition:transform 1s; -webkit-animation:opacityfx 1s 1 ease; -o-animation:opacityfx 1s 1 ease; animation:opacityfx 1s 1 ease; border:none; background:none;}
.topBtnOnly .position .floating .quick .moveTop {display:block; width:50px; height:50px; margin-bottom:10px; box-sizing:border-box;}
.topBtnOnly .position .floating .quick .moveTop a {width:100%; height:100%; display:block; text-align:center; letter-spacing:2px; font-weight:600; /* padding:37px 0 6px; */text-indent:-999px; overflow:hidden; box-shadow:0px 2px 10px rgb(0 0 0 / 15%); border:1px solid rgba(0,0,0,0.1); border-radius:100%; background:#fff; box-sizing:border-box;}
.topBtnOnly .position .floating .quick .moveTop a:before {content:""; width:23px; height:15px; position:absolute; top:19px; left:50%; transform:translateX(-50%); 
                                                          background:url(/images/wzwg/cmm/icon_set.png); background-position:-49px 2px; background-position:-36px; background-size:500px;}
.topBtnOnly .position .floating .quick .moveTop a:after {content:""; width:20px; height:3px; background:#acacac; display:inline-block; position:absolute; top:17px; left:50%; transform:translateX(-50%);}
.topBtnOnly .position .floating .quick .moveTop a:focus {border:1px solid #333; border-radius:100%;}

.topBtnOnly .position .floating .quick .moveTop#bottomBtn a:before {transform:rotate(-180deg); top:76px; margin-left:-11px;}
.topBtnOnly .position .floating .quick .moveTop#bottomBtn a:after {top:90px;}

@keyframes opacityfx {
    0% {opacity:0;}
    100% {opacity:1;}
}

  @media (max-width:800px){
    .topBtnOnly .position .floating .quick .moveTop {width:35px; height:35px;}
    .topBtnOnly .position .floating .quick .moveTop a {position:relative;}
    .topBtnOnly .position .floating .quick .moveTop a:before {top:14px;}
    .topBtnOnly .position .floating .quick .moveTop a:after {top:12px;}
    .topBtnOnly .position .floating .quick .moveTop#bottomBtn a:before {top:7px;}
    .topBtnOnly .position .floating .quick .moveTop#bottomBtn a:after {top:21px;}
    }