@charset "utf-8";
/* @IMPORT url("./wiconFont.css"); */
* {padding:0; margin:0;}

/* widesign core CSS 파일 입니다.
 * @latest 2020.07.08 OSY (691~3번째 .vert-m .vert-t .vert-b !important 추가)
*/


/* admin contents */
.admpg-tit {font-size:19px; margin-bottom:15px; width:100%;}
.admpg-tit2 {font-size:18px; width:100%;}
.admpg-tit3 {font-size:17px; line-height:1.5em; margin-bottom:10px; width:100%; color:#333;}
.ico-tit:before {content:""; width:2px; height:15px; background:#333; margin-right:7px; display:inline-block; vertical-align:middle;}
.admpg-subp {font-size:16px;line-height: 1.3em;word-break:keep-all;}
.wz_tableguide {font-size:15.5px; color:#838383; line-height:1.3em; display:block; margin-left:0 !important; word-break:keep-all;}
.wz_tableguide a:hover {text-decoration:underline;}
.circle_no {font-size:11px; width:14px; border-radius:100%; padding:1px; line-height:14px; display:inline-block; text-align:center; margin:0 3px;
          background:#ccc; color:#fff; font-weight:400; cursor:default;}
.circle_badge {font-size:11px; border-radius:1000000px; padding:5px; line-height:7px; display:inline-block; text-align:center; margin:0 3px;
               background:#ccc; color:#fff; font-weight:400; cursor:default;}


/* box */
.wz-box {border:1px solid #333; margin-bottom:10px; padding:10px; clear:both;}
.wz_cowrap {width:100%; /* float:left; */ display:block; box-sizing:border-box; background:#fff; clear:both;}
.wz_cobox {box-sizing:border-box; padding:15px;}
.wz_cowrap:after, .wz_cobox:after {content:""; display:block; clear:both;}
.wz-box.hover:hover {background:#efeff1; border:1px solid #cecece; cursor:pointer;}

/* notice form */
.wz_notice {width:100%;/* float:left; */ display:block; box-sizing:border-box; padding:30px; background:#f8f8f8; border-left:5px solid #c20000 ;margin-bottom: 30px; clear:both;}
.wz_notice.brbox {border-top:1px solid #ebecee; border-right:1px solid #ebecee; border-bottom:1px solid #ebecee; border-radius:3px 0 0 3px; overflow:hidden;}
.wz_notice .admpg-tit2 {color:#C20000;}
.wz_notice ul li {margin-bottom:5px; box-sizing:border-box;}
.wz_notice.bg-red {border-left-color:#c20000;}
.wz_notice.bg-pink {border-left-color:#e03997;}
.wz_notice.bg-orange {border-left-color:#f06f1a;}
.wz_notice.bg-yellow {border-left-color:#f8ba06;}
.wz_notice.bg-green {border-left-color:#acc30f;}
.wz_notice.bg-blue {border-left-color:#16a6fd;}
.wz_notice.bg-brown {border-left-color:#a3643c;}
.wz_notice.bg-violet {border-left-color:#c7a4e1;}
.wz_notice.bg-purple {border-left-color:#9f31c3;}
.wz_notice.bg-grey {border-left-color:#727272;}


/* 단계,절차 */
@media (min-width:900px){
  .wz_stepli {display:inline-block; vertical-align:top; margin-right:-4px; position:relative;}
  .wz_stepli>p {padding:20px 45px 20px 15px; box-sizing:border-box; width:100%; float:left; position:relative; overflow:hidden; background:#f7f7f7; word-break:keep-all;}
  .wz_stepli:last-child>p {padding-right:15px;}
  .wz_stepli:not(:last-child)>p:before {content:""; display:block; width:0; height:0; border-top:65px solid transparent; border-bottom:65px solid transparent; border-left:30px solid white;
                        position:absolute; top:50%; right:0; margin-top:-65px; box-sizing:border-box;}
  .wz_stepli:not(:last-child)>p:after {content:""; display:block; width:0; height:0; border-top:65px solid transparent; border-bottom:65px solid transparent; border-left:30px solid #f7f7f7;
                        position:absolute; top:50%; right:15px; margin-top:-65px; box-sizing:border-box;}
  .wz_stepli ul {padding:15px 45px 15px 15px; box-sizing:border-box; background:#fff;}
  .wz_stepli:last-child ul {padding-right:10px;}
  .wz_stepli ul li {margin-bottom:5px;}
  .wz_stepli ul li:before {content:"\b7"; float:left; margin:0 2px 0 -5px;}
}
@media (max-width:899px){
  ul .wz_stepli {width:100% !important; list-style-type:decimal; margin:0 0 5px 20px; padding-right:20px; float:left; box-sizing:border-box;}
  ul .wz_stepli ul li {width:100%; margin-bottom:3px;}
  .wz_stepli>p {line-height:25px;}
}



/*button box*/
.btnbox-c {text-align:center; clear:both; width:100%; box-sizing:border-box;}
.btnbox-l {text-align:left; float:left; min-width:50%; box-sizing:border-box; margin-bottom:10px;}
.btnbox-r {text-align:right; float:right; min-width:50%; box-sizing:border-box; margin-bottom:10px;}
.btnbox-l > .wzbtn, .btnbox-l > .wzbtn-table {margin-right:4px;}
.btnbox-r > .wzbtn, .btnbox-r > .wzbtn-table {margin-left:4px;}

/* button setting */
/* button size(default) */
.wzbtn {line-height:20px; padding:6px 25px; display:inline-block; box-sizing:border-box; text-align:center; vertical-align:middle; cursor:pointer;
      font-size:0.95em; font-weight:400; text-decoration:none; border-radius:3px; background:transparent; -webkit-transition:background 1s; transition:background 1s;}
.wzbtn-table {line-height:21px; padding:4px 15px 3px; display:inline-block; color:#757575; box-sizing:border-box; text-align:center;
            vertical-align:middle; cursor:pointer; font-size:1em; font-weight:400; text-decoration:none; border-radius:2px; box-sizing:border-box;
            background:transparent; -webkit-transition:background 1s; transition:background 1s;}
.wzbtn-block {display:block; width:100%; text-align:center;}
.wzbtn-lg {line-height:20px; padding:14px 20px; display:inline-block; box-sizing:border-box; text-align:center; vertical-align:middle;
      cursor:pointer; font-size:1em; letter-spacing:-0.5px; font-weight:600; text-decoration:none; border-radius:2px; 
      background:transparent; -webkit-transition:background 1s; transition:background 1s;}



.wzbtn:focus,.wzbtn-table:focus {outline:1px solid #8190a0; outline-style:auto;}

  @media (max-width:599px){
    .wzbtn {padding:6px 15px;}
    td .wzbtn-table {padding:4px 5px; letter-spacing:-1px; min-width:35px;}
    td .wzbtn-table + .wzbtn-table {margin-top:5px;}
  }

/* button - function */
.btn-basic  {border:1px solid #c6c6c6; color:#333; background:#fff;} /*grey line btn*/
.btn-basic.on,
.btn-basic:hover {background:#f0f0f0; border:1px solid #bebebe;}
.btn-save   {background:#272d3d; border:1px solid #272d3d; color:#fff;} /*black bg btn*/
.btn-del {border:1px solid #eb573f; color:#d53037; background:#fff;} /*red line btn*/
.btn-del.on,.btn-del:hover {color:#fff; background:#CD3938;}
.btn-srch   {background:#338cf2; border:1px solid #338cf2; color:#fff;} /*blue bg btn*/
.btn-edit   {border:1px solid #ddd; background:#ddd; color:#333;}
.btn-edit:hover {background-image:linear-gradient(to right, #2091cb , #2d59b0) !important; background:#2091cb; color:#fff;}

/* button - color */
.btn-red {border:1px solid #eb573f; color:#CD3938;}
.btn-red-bg {background:#CD3938; border:1px solid #eb573f; color:#fff;}
.btn-red.on, .btn-red:hover {background:#CD3938; border:1px solid #eb573f; color:#fff;}
.btn-pink {border:1px solid #e48db5; color:#cf4b88;}
.btn-pink-bg {background:#cf4b88; border:1px solid #cf4b88; color:#fff;}
.btn-pink.on, .btn-pink:hover {background:#cf4b88; border:1px solid #cf4b88; color:#fff;}
.btn-orange {border:1px solid #ea8b46; color:#cc6e2a;}
.btn-orange-bg {background:#cc6e2a; border:1px solid #cc6e2a; color:#fff;}
.btn-orange.on, .btn-orange:hover {background:#cc6e2a; border:1px solid #cc6e2a; color:#fff;}
.btn-yellow {border:1px solid #eadb00; color:#d2cb02;}
.btn-yellow-bg {background:#d2cb02; border:1px solid #d2cb02; color:#fff;}
.btn-yellow.on, .btn-yellow:hover {background:#d2cb02; border:1px solid #d2cb02; color:#fff;}
.btn-green {border:1px solid #6cab26; color:#4d860e;}
.btn-green-bg {background:#4d860e; border:1px solid #4d860e; color:#fff;}
.btn-green.on, .btn-green:hover {background:#4d860e; border:1px solid #4d860e; color:#fff;}
.btn-blue {border:1px solid #448ccb; color:#3278b6;}
.btn-blue-bg {background:#2091cb; border:1px solid #2091cb; color:#fff;}
.btn-blue.on, .btn-blue:hover {background:#2091cb; border:1px solid #2091cb; color:#fff;}
.btn-brown {border:1px solid #b4793d; color:#8d541b;}
.btn-brown-bg {background:#8d541b; border:1px solid #8d541b; color:#fff;}
.btn-brown.on, .btn-brown:hover {background:#8d541b; border:1px solid #8d541b; color:#fff;}
.btn-violet {border:1px solid #a284c2; color:#734c9c;}
.btn-violet-bg {background:#a284c2; border:1px solid #a284c2; color:#fff;}
.btn-violet.on, .btn-violet:hover {background:#a284c2; border:1px solid #a284c2; color:#fff;}
.btn-purple {border:1px solid #b914b5; color:#970994;}
.btn-purple-bg {background:#970994; border:1px solid #970994; color:#fff;}
.btn-purple.on, .btn-purple:hover {background:#970994; border:1px solid #970994; color:#fff;}
.btn-grey {border:1px solid #ddd; color:#757575;}
.btn-grey-bg {background:#ddd; border:1px solid #d6d6d6; color:#333;}
.btn-grey.on, .btn-grey:hover {background:#f0f0f0; border:1px solid #ddd; color:#757575;}
.btn-black {border:1px solid #272d3d; color:#333;}
.btn-black-bg {background:#333; border:1px solid #333; color:#fff;}
.btn-black.on, .btn-black:hover {background:#333; border:1px solid #333; color:#fff;}


/* icon */
.btn-srch:before {content:"\f002"; font-family:FontAwesome; float:left; display:inline-block; font-size:14px; margin:0px 7px 0 -3px;}
.btn-bottom:before {content:"\276F"; display:inline-block; transform:rotate(90deg); margin-right:10px;}
.btn-top:before {content:"\276F"; display:inline-block; transform:rotate(-90deg); margin-right:10px;}
.btn-plus:before {content:"+"; font-weight:600; margin-right:10px;}
.ico-mngr:before {content:"\2692"; margin-right:5px;}
.ico-list:before {content:"\2630"; margin-right:5px;}
.ico-bull:before {content:"\f0ca"; font-family:FontAwesome; margin-right:10px;}
.ico-layer:before {content:"\f009"; font-family:FontAwesome; margin-right:10px;}
.btn-setting:before {content:"\f013"; font-family:FontAwesome;}
.ico-excel:before {content:url(/widesign/img/excel_green.png); vertical-align:middle; margin-right:5px; float:left; margin-top:3px;}

/* btn - group*/
.wzbtn-group {display:inline-block;}
.wzbtn-group .wzbtn, .wzbtn-group .wzbtn-table {border-radius:0; margin:0 -2px 0 -5px;}
.wzbtn-group .wzbtn:first-child {border-radius:3px 0 0 3px; margin-left:0; margin-right:-1px;}
.wzbtn-group .wzbtn-table:first-child {border-radius:3px 0 0 3px; margin-left:0;}
.wzbtn-group .wzbtn:last-child, .wzbtn-group .wzbtn-table:last-child {border-radius:0 3px 3px 0;}




/* popup setting */
.wzpopup-wrap {background:rgba(0,0,0,0); width:100%; height:100%; position:fixed; top:0; left:0; z-index:1001;}
.wzpopup {display:none; position:relative; left:50%; top:50%; z-index:1001; transform:translate(-50%,-50%); max-height:95%; -webkit-box-shadow:0 5px 30px rgba(0, 0, 0, .5); box-shadow:0 5px 30px rgba(0, 0, 0, .1);}
#fade {position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.4; z-index:1000;}

.popup_l {width:70%; height:80%;}
.popup_s {min-width:40%; width:40%;} .popup_s .pop-container {max-height:650px; min-height:300px;}
.popup_video {width:60%;}
.popup_la {/*width:70%; */ width:auto; height:auto; position:absolute; max-width:95%; min-width:300px;}


.wzpopup .pop-header {width:100%; height:60px; line-height:60px; background:#333; padding:0 40px 0 15px; border-radius:3px 3px 0 0; box-sizing:border-box;/*border-bottom: 1px solid #f3f3f3;*/}
.wzpopup .pop-header span {color:#fff; font-size: 19px; float:left;}
.wzpopup button.close {position:absolute; top:9px; right:5px; width:40px; height:40px; background:none; border:none; cursor:pointer;
                      -webkit-transition:transform 0.5s; transition:transform 0.5s; -webkit-appearance:none;}
.wzpopup button.close:hover {transform:rotate(90deg);}
.wzpopup button.close:focus {background-color:rgba(255,255,255,0.2); outline:none; border-radius:100%;}
.wzpopup button.close img {vertical-align:middle;}
.wzpopup .pop-body {height:calc(100% - 60px); box-sizing:border-box; position:relative; border-radius:0 0 3px 3px; overflow:hidden;}
.wzpopup .pop-container {width:100%; height:100%; box-sizing:border-box; overflow-y:auto; background:#fff; position:relative; padding:15px;}
.disabled {cursor:auto;background:rgba(0,0,0,0.9) !important;opacity:0.8;}

/* video-play popup */
.popup_video:hover button.close {transform:rotate(90deg);}
.popup_video button.close {right:0; margin:-10px -13px; background:#000; padding:6px; border-radius:100%;}
.popup_video button.close img {vertical-align:middle; width:15px;}
.popup_video .pop-body {border-radius:5px; overflow:hidden;}
.popup_video .pop-container {padding:0; height:auto; padding-bottom:56%; overflow:hidden;}
.popup_video .pop-container iframe {width:100%; height:100%; position:absolute; left:0; top:0;}

/* img popup */
.wzpop-item {cursor:pointer;}

.wzpopup.popup_img .pop-container {padding:1px 1px 0; border-radius:5px; text-align:center; min-height:300px; line-height:300px;}
.wzpopup.popup_img .pop-container .popup_image {width:100%; float:left; text-align:center;}
.popup_video button.close:hover {transform:rotate(90deg);}
.wzpopup.popup_img button.close {right:0; margin:-10px -13px; background:#000; padding:5px 6px; border-radius:100%;}
.wzpopup.popup_img button.close:focus {background:#3558f6; outline-color:#fff;}
.wzpopup.popup_img button.close img {vertical-align:middle; width:15px;}
  .popup_image .imageBox img {width:auto !important; max-width:100%; height:auto; max-height:90vh; border-radius:5px; vertical-align:middle;}
  .popup_image .pagingBox {position:absolute; bottom:0; width:100%; height:100%; left:0; z-index:1;}
  .popup_image .pagingBox #wzpop-pagination {display:none; width:100%; position:absolute; left:0; bottom:0; text-align:center; line-height:30px; z-index:990;}
  /*.popup_image .pagingBox #wzpop-pagination span {width:9px; height:9px; background:#333; border-radius:100%; font-size:0; display:inline-block; margin:0 3px; border:1px solid rgba(255,255,255,0.3); box-sizing:border-box; cursor:pointer; vertical-align:middle;}
  .popup_image .pagingBox #wzpop-pagination span.on {background:#fff; border-color:rgba(0,0,0,0.5);}*/
  .popup_image .pagingBox #btn-popimg-prev,
  .popup_image .pagingBox #btn-popimg-next {position:absolute; top:50%; background:rgba(0,0,0,0.9);
                                  color:#fff; font-family:serif; transform:translateY(-15px); border:none !important;/* opacity:0.3; */
                                  -webkit-transition:opacity 1s; transition:opacity 1s;}
  .popup_image .pagingBox:hover #btn-popimg-prev,
  .popup_image .pagingBox:hover #btn-popimg-next {opacity:1;}
  .popup_image .pagingBox #btn-popimg-prev {left:1px;}
  .popup_image .pagingBox #btn-popimg-next {right:1px;}
  .popup_image .pagingBox #btn-popimg-prev:focus,
  .popup_image .pagingBox #btn-popimg-next:focus {outline-style:dotted; outline-width:2px; outline-color:#fff;}
  .popup_image .pagingBox #btn-popimg-down {margin:15px; border:none; background:rgba(0,0,0,0.7); font-size:0; border-radius:2px; z-index:990;}
  .popup_image .pagingBox #btn-popimg-down:before {content:"\f019"; font-family:FontAwesome; font-size:15px; color:#fff; float:left;}
  .popup_image .pagingBox #btn-popimg-down:focus {outline-style:dotted; outline-width:2px; outline-color:#fff;}


  @media (max-width:1049px) {
    .popup_video, .popup_la {width:80% !important;}
    .wzpopup.popup_s {width:85% !important;}
  }
  @media (max-width:990px) {
    .popup_l {width:90% !important;}
    .popup_s {width:90% !important;}

    .popup_image .pagingBox #btn-popimg-prev,
    .popup_image .pagingBox #btn-popimg-next {display:none;}
  }






/* popup scroll bar setting */
.wzpopup ::-webkit-scrollbar {width:10px;}
.wzpopup ::-webkit-scrollbar-track {background:transparent;}
.wzpopup ::-webkit-scrollbar-thumb {background:rgba(0,0,0,0.2);}
.wzpopup ::-webkit-scrollbar-thumb:hover {background:#555;} /*chrome*/

.wzpopup {scrollbar-arrow-color:#dfdfdf;
     scrollbar-base-color:transparent; scrollbar-Face-Color:#ddd;
     scrollbar-Track-Color:transparent; scrollbar-Shadow-Color:#efefef;} /*IE*/



/* popup tab */
.pop-tab {float:left; width:100%; height:100%; background:#f9f9f9; position:absolute; top:0; left:0;}
.pop-tab > input[type="radio"] {display:none;}
.pop-tab > input~ div {display:none;}
.pop-tab > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.pop-tab > input:nth-of-type(2):checked ~ div:nth-of-type(2),
.pop-tab > input:nth-of-type(3):checked ~ div:nth-of-type(3),
.pop-tab > input:nth-of-type(4):checked ~ div:nth-of-type(4),
.pop-tab > input:nth-of-type(5):checked ~ div:nth-of-type(5),
.pop-tab > input:nth-of-type(6):checked ~ div:nth-of-type(6),
.pop-tab > input:nth-of-type(7):checked ~ div:nth-of-type(7),
.pop-tab > input:nth-of-type(8):checked ~ div:nth-of-type(8),
.pop-tab > input:nth-of-type(9):checked ~ div:nth-of-type(9),
.pop-tab > input:nth-of-type(10):checked ~ div:nth-of-type(10),
.pop-tab > input:nth-of-type(11):checked ~ div:nth-of-type(11){display:block; float:left;}
.pop-tab > section.buttons {overflow:hidden; float:left;}
.pop-tab > section.buttons > label {font-size:13px; color:#666; font-weight:400; line-height:22px; letter-spacing:-1px; text-indent:0; text-align:center; word-break:keep-all;
                                    width:auto; float:left; left:0; display:block; padding:15px 5px 10px; border-top:2px solid transparent;
                                     cursor:pointer; box-sizing:border-box; position:relative;}

.pop-tab > section.buttons > label:before {float:left; width:100%;}

.pop-tab > input:nth-of-type(1):checked ~ section.buttons > label:nth-of-type(1),
.pop-tab > input:nth-of-type(2):checked ~ section.buttons > label:nth-of-type(2),
.pop-tab > input:nth-of-type(3):checked ~ section.buttons > label:nth-of-type(3),
.pop-tab > input:nth-of-type(4):checked ~ section.buttons > label:nth-of-type(4),
.pop-tab > input:nth-of-type(5):checked ~ section.buttons > label:nth-of-type(5),
.pop-tab > input:nth-of-type(6):checked ~ section.buttons > label:nth-of-type(6),
.pop-tab > input:nth-of-type(7):checked ~ section.buttons > label:nth-of-type(7),
.pop-tab > input:nth-of-type(8):checked ~ section.buttons > label:nth-of-type(8),
.pop-tab > input:nth-of-type(9):checked ~ section.buttons > label:nth-of-type(9),
.pop-tab > input:nth-of-type(10):checked ~ section.buttons > label:nth-of-type(10),
.pop-tab > input:nth-of-type(11):checked ~ section.buttons > label:nth-of-type(11) {color:black; background-image:linear-gradient(141deg, #f9f9f9 0%, #f9f9f9 20%, #ededed 75%); border-top:2px solid #333; font-weight:600;}


.pop-tab .tab_item {width:100%; float:left; padding:5px 15px 20px; box-sizing:border-box; text-align:left; background:#fff; border-top:1px solid #f0f0f0;}
.pop-tab .tab_item ul {width:100%; float:left; box-sizing:border-box;}
.pop-tab .tab_item ul li {float:left; padding:20px 15px 0; /*position:relative;*/ box-sizing:border-box;}
.pop-tab .item_for_1 ul > li:first-child,
.pop-tab .item_for_1 ul > li:nth-child(2),
.pop-tab .item_for_1.vertical_mode ul > li:nth-child(3),
.pop-tab .item_for_1.vertical_mode ul > li:nth-child(4) {border-top:none;}
.pop-tab .item_for_1 ul > li   {width:50%;}
.pop-tab .item_for_234 ul > li {width:33.333%;}
.pop-tab .item_for_1 ul > li:nth-child(2n+1),
.pop-tab .item_for_234 ul > li:nth-child(3n+1) {clear:both;}

.pop-tab .tab_item > h4 {font-size:12px; line-height:20px; color:#d70c0c; padding:5px 15px 20px;}
.pop-tab .tab_item ul li h4 {font-size:15px; padding-left:0; line-height:22px; text-align:left;}
.pop-tab .tab_item ul li h4:before {content:"\2022"; float:left; font-size:12px; margin-left:0px;}
.pop-tab .tab_item ul li p {font-size:12px; line-height:18px; text-align:left; color:#818181; height:36px; position:relative; padding-left:20px; box-sizing:border-box;
                            overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:2; display:-webkit-box; white-space:normal; word-break:keep-all;}
/*.pop-tab .tab_item ul li p:before {content:url("/widesign/img/ico_help_grey.png"); display:inline-block; padding:2px 3px 0 0; float:left;
                                  position:absolute; top:0; left:0;}*/
.pop-tab .tab_item ul li p + a {width:100%; float:left; margin:10px 0 15px; padding:2px; border:1px dashed #2d59b0; clear:both; display:block; text-align:center; box-sizing:border-box;}
.pop-tab .tab_item ul li div.img_div {width:auto; max-width:99%; display:inline-block; position:relative; margin:0 auto;}
.pop-tab .tab_item ul li div.img_div:after {content:""; width:100%; height:3px; background:white; position:absolute; bottom:0; left:0;}
.pop-tab .tab_item ul li img {width:100%; max-width:100%; max-height:200px;}

.pop-tab .tab_item ul li a.wzbtn-table {font-size:13px; min-width:40%;}
.pop-tab .tab_item ul li:hover a.btn-edit {background-image:linear-gradient(to right, #2091cb , #2d59b0) !important; background:#2091cb; color:#fff;}

.pop-tab .tab_item.vertical_mode ul li {width:25%; margin-right:0; padding:0 1.5%; margin-left:0;}
.pop-tab .tab_item.vertical_mode ul li:nth-child(2n+1) {clear:none;}
.pop-tab .tab_item.vertical_mode ul li:nth-child(4) ~ li {padding-top:20px;}
.pop-tab .tab_item.vertical_mode ul > li:nth-child(2n+1) {clear:none;}
.pop-tab .tab_item.vertical_mode ul > li:nth-child(3),
.pop-tab .tab_item.vertical_mode ul > li:nth-child(4) {border-top:none !important;}

  @media (min-width:1300px){
    .pop-tab > section.buttons {width:12%; float:left; height:100%;}
    .pop-tab > section.buttons > label {width:100%; border-top:none !important; /*margin-top:10px;*/}
    .pop-tab .tab_item {width:88%; height:100%; border-left:1px solid #f0f0f0; border-top:none; overflow-y:auto;}
  }
  @media (max-width:1299px){
    .pop-tab > section.buttons {width:100%;}
    .pop-tab > section.buttons > label {padding:15px 15px 10px; min-width:80px;}
    .pop-tab .tab_item {width:100%; /*height:500px; */ overflow-y:auto;}
  }





/* table setting */
.wztable {width:100%; border-top:1px solid #dcdcdc; border-bottom:1px solid #e9e9e9; border-collapse:collapse;}
.wztable thead tr th {text-align:center; padding:10px 0; font-size:13px;}
.wztable thead tr th {color:#333; font-size:14px; border-bottom:1px solid #e9e9e9;}
.wztable thead tr th a {color:#333;}
.wztable tbody tr:nth-child(even) td {background:#fff;}
.wztable tbody tr:nth-child(odd) td {background:#f7f9fb;}
.wztable tbody tr th {text-align:center; padding:5px;}
.wztable tbody tr td {padding:5px;}

.wztable_line {border-top:2px solid #333; border-collapse:separate;}
.wztable_line thead tr th {background:#fafafa; font-size:17px; padding:17px 10px; border-bottom:1px solid #ccc;}
.wztable_line tbody tr th {background:#fafafa; font-size:17px; padding:15px 10px; border-bottom:1px solid rgba(0,0,0,0.1);}
.wztable_line tbody tr td {font-size:14px; padding:15px 10px; border-bottom:1px solid rgba(0,0,0,0.1); color:#333;}
.wztable_line tbody tr:nth-child(odd) td {background:#fff;}

.hidden_cell {}
  @media (max-width:799px){
    .hidden_cell {display:none;}
  }



/* file 첨부 */
.attatch_file_box {height:auto; margin-bottom:3px;}
.wzfile_input {position:relative;}
.wzfile_input>button>img {height:auto !important; vertical-align:middle;}
.wzfile_input input[type=text] {width:30%;}
.wzfile_input input[type=file] {position:absolute; top:0; left:0; width:calc(30% + 70px); font-size:45px; opacity:0; cursor:pointer;}




/*프로그래스 바*/
.wzprogress {background:#ececec; width:100%; position:relative; max-width:100%; border:none; border-radius:3px; box-sizing:border-box; float:left; height:25px; line-height:25px;}
.wzprogress .wzprogress-bar {font-size:12px; color:#fff; background:rgba(0,0,0,0.5); text-align:right; box-sizing:border-box; float:left; border-radius:3px;
              -webkit-transition:width 1s ease;
                -o-transition:width 1s ease;
                transition:width 1s ease;
                animation:scale-up-hor-left 1s cubic-bezier(.39,.575,.565,1.000) both;}
.wzprogress .wzprogress-bar:after {content:""; display:inline-block; width:5px;}

.wzprogress .wzprogress-bar.gradient{background-image:linear-gradient(to top, #8d8d8d26 , #ffffff94) !important;}
.wzprogress .wzprogress-bar.shadow{box-shadow:1px 1px 4px 1px rgba(0,0,0,0.3);}

    @keyframes scale-up-hor-left {
        0% {transform:scaleX(.4); transform-origin:0 0;}
        100% {transform:scaleX(1); transform-origin:0 0;}
    }



/* 탭 기능 */
/* 책갈피 디자인 */
.wztab {position:relative;width:100%;display:block;float:left;box-sizing: border-box;border-bottom:1px solid #d9d9d9;z-index:1;}
.wztab-list {position:relative; width:100%; float:left; box-sizing:border-box; padding-left:0 !important;}
.wztab-list .wztab-item {float:left; height:45px; line-height:45px; padding:0 18px; background:#f9f9f9; border:1px solid #ebecee; border-left:none; border-bottom-color:#d9d9d9; list-style:none;}
.wztab-list .wztab-item:first-of-type {border-left:1px solid #ebecee;}
.wztab-list .wztab-item.active {border-top:2px solid; border-bottom:none; background:#fff; font-weight:600; line-height:43px;}
.wztab-list .wztab-item a,
.wztab-list .wztab-item button {height:45px;display:block;width:100%;text-align:left;box-sizing:border-box;font-size: inherit;}
.wztab-list .wztab-item.active a,
.wztab-list .wztab-item.active button {font-weight:600;}
.wztab-list .wzbtnTab-toggle {display:none;}
.wztab-list .wzbtnTab-toggle:focus {outline:none; background:#f0f0f0;}

.selectBbsSubospec {/* width:100%; *//* float:left; *//* margin-bottom:7px; *//* position:relative; */}
.wztab.board {z-index:0;}

  @media (min-width:600px) and (max-width:1050px){
    .wztab {overflow:hidden;}
    .wztab-list .wztab-item {padding:0 10px; letter-spacing:-1px;}
  }
  @media (max-width:599px){
    .wztab {height:46px; border-bottom:2px solid #e5e5e5; margin-bottom:-1px;}
      .wztab-list .wzbtnTab-toggle {display:inline-block;transform:rotate(90deg);width: 38px;height: 40px;font-family:Dotum;margin: 0px 5px 0;border-color:#ddd;}
      .wztab-list .wztab-item {display:none;width:60%;padding:0 10px;font-size: 16px;margin-top:0;margin-bottom:1px;box-sizing:border-box;}
      .wztab-list .wztab-item.visible, .wztab-list .wztab-item.active {display:inline-block;height: 46px;border: 2px solid #e5e5e5;border-width: 2px 2px 0;}
      .wztab-list.wztab-select .wztab-item {border:none; border:1px solid #ccc; border-width:0 1px; margin-top:-1px;}
      .wztab-list.wztab-select .wztab-item:first-of-type {border-top:1px solid #ccc;}
      .wztab-list.wztab-select .wztab-item.active {background:#333; color:#fff;}
      .wztab-list.wztab-select .wztab-item.active a,
      .wztab-list.wztab-select .wztab-item.active button {color:#fff;}
      .wztab-list.wztab-select .wztab-item.active:hover {background:#333; color:#fff;}
      .wztab-list.wztab-select .wztab-item:hover {background:#dedede;}

      .wztab.step {height: 46px !important;}
      .wztab.step .wztab-select {margin:0;}
      .wztab .wztab-select {position:absolute;}
      .wztab-list.wztab-select .wztab-item:last-child {border-bottom:1px solid #ccc;}
  }


/* 버튼박스형 디자인 */
.wztabbox {width:100%; text-align:center;}
.wztab-box {position:relative;width:auto;display:inline-block;/* display:block; */margin-right:-4px;box-sizing:border-box;padding-left:0 !important;text-align:center;}
.wztab-box .wztab-item {/* float:left; */height:50px;line-height:50px;background:#fff;border:1px solid #ccc;list-style:none;margin-right:5px;margin-bottom:9px;display:inline-block;}
.wztab-box .wztab-item.active {background:#333; font-weight:600;}
.wztab-box .wztab-item a,
.wztab-box .wztab-item button {height:50px; display:block; width:100%; text-align:left; box-sizing:border-box; padding:0 20px; font-size:16.5px;}
.wztab-box .wztab-item.active a,
.wztab-box .wztab-item.active button {font-weight:600; color:#fff;}
.wztab-box .wzbtnTab-toggle {display:none;}
.wztab-box .wztab-item a:hover, .wztab-box .wztab-item button:hover {font-weight:600;}
.wztab-box .wztab-item button:focus, .wztab-box .wztab-item a:focus {outline:thin dotted;}

  @media (max-width:799px){
    .wztab-box .wztab-item {height:45px; line-height:45px;}
    .wztab-box .wztab-item a, .wztab-box .wztab-item button {font-size:15px; height:45px;}
  }

/* underline 디자인 */
@media (min-width:600px){
  .wztab.underLine {min-height:60px;margin-bottom:20px;border-bottom: 2px solid #dbdbdb;}
  .wztab.underLine .wztab-list {}
  .wztab.underLine .wztab-list .wztab-item {height:60px;line-height:60px;border:none;background:none;box-sizing:border-box;font-size: 19px;margin-bottom: -1px;border-bottom: 1px solid #dcdcdc;}
  .wztab.underLine .wztab-list .wztab-item:first-of-type {border-left:none !important;}
  .wztab.underLine .wztab-list .wztab-item.active {border-bottom:4px solid #333; height:60px;}
  .wztab.underLine .wztab-list .wztab-item a,
  .wztab.underLine .wztab-list .wztab-item button {height:60px; font-size:19px;}
  .wztab.underLine .wztab-list .wztab-item.active a,
  .wztab.underLine .wztab-list .wztab-item.active button {}
  .wztab.underLine .wztab-list .wzbtnTab-toggle {}
  .wztab.underLine .wztab-list .wzbtnTab-toggle:focus {}
    
    .underLine.theme-blue .wztab-list .wztab-item.active {border-bottom-color:#2c55a6 !important;}
  .underLine.theme-blue .wztab-list .wztab-item.active a,
  .underLine.theme-blue .wztab-list .wztab-item.active button {}
}




/* guide tool-tip (click) */
.wzmsg-help {position:relative; display:inline-block; vertical-align:top; max-width:80%;}
.wzmsg-help-btn {position:relative; display:inline-block; cursor:pointer; /*margin-bottom:7px;*/}
.wzmsg-help-btn > img {vertical-align:middle;}
/*.wzmsg-help-btn:focus + div.wzmsg-help-msg {display:block;}*/
.wzmsg-help-btn:focus > img {outline:1px solid #a6c7ff;}

.wzmsg-help-msg {display:none; width:100%; height:auto; z-index:2; padding:10px; box-sizing:border-box; margin: 15px 0 10px -13px;
                position:relative; background:#fff; border:1px solid #ececec; color:black; line-height:150%; font-size:14.5px; font-weight:400; word-break:keep-all;}
.wzmsg-help-msg:before {content:""; position:absolute; top:-15px; left:9px; border-bottom:15px solid #ececec; 
                        border-top:0 solid transparent; border-left:12px solid transparent; border-right:12px solid transparent;}
.wzmsg-help-msg:after {content:""; position:absolute; top:-14px; left:10px; border-bottom: 14px solid #fff;
                       border-top:0 solid transparent; border-left:11px solid transparent; border-right:11px solid transparent;}
.wzmsg-help-msg img {max-width:100%; max-height:500px; display:block;}
.wzmsg-help-msg ul {width:100%;float:left;display:block;margin: 10px 0 5px;}
.wzmsg-help-msg ul li.w50 {margin-right:0;line-height: 150%;margin-bottom: 5px;}

  @media (min-width:900px) and (max-width:1050px){
    .wzmsg-help-msg ul li.w50 {width:100% !important;}
  }
  @media (max-width:899px){
    .wzmsg-help {max-width:100%;}
    .wzmsg-help-msg {margin:-20px 0 7px 35px; width:calc(100% - 35px);}
    .wzmsg-help-msg:before {top:-1px; left:-15px; border-width:15px 0 0 15px; border-top-color:#ececec;}
    .wzmsg-help-msg:after {top:0px; left:-13px; border-width:14px 0 0 14px; border-top-color:#fff;}
    .wzmsg-help-msg ul li.w50 {width:100% !important;}
  }





/* srch-box */
.wzsrch-box {background:#f7f7f7; border:1px solid #ececec; padding:20px 0; border-radius:3px; clear:both; margin:20px 0 30px; overflow:hidden; text-align:center;}


/* 넘버링 paging*/
.wzpaging {width:100%; margin:20px 0 10px;}
.wzpaging ul {display:table; margin:0 auto; float:none !important; list-style:none !important; padding-left:0 !important;}
.wzpaging li {float:left; width:auto !important; padding:0 !important;  list-style:none !important; padding-left:0 !important;}
.wzpaging li a {padding:8px; display:inline-block; font-size:13px; color:#333;}
.wzpaging li .on,
.wzpaging li strong {background:#f9f9f9; border:1px solid #e8e8e8; border-radius:100%; font-weight:600; box-sizing:border-box;
           width:30px; height:30px; text-align:center; line-height:30px; float:left; font-size:14px;}
.wzpaging li a:hover,
.wzpaging li a:focus {font-weight:600; text-decoration:underline;}

  @media (max-width:799px){
    .wzpaging {width:auto !important; display:inline-block;}
    .wzpaging li {border-bottom:none;}
  }




/* radio, checkbox btn */
ul.wzForm {padding-left:0 !important;} ul.wzForm li {list-style:none !important; clear:none !important;}
.wzForm input[type="radio"], 
.wzForm input[type="checkbox"] {border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;}
.wzForm input[type="radio"] + label {padding-left:27px;position:relative;cursor:pointer;display: inline-block;box-sizing: border-box;vertical-align: middle;line-height: 150%;}
.wzForm input[type="radio"] + label:before {content:""; width:15px; height:15px; border:2px solid #c0c0c0; border-radius:100%;
                                            position:absolute; left:0; top: 1px; transition:border-color 0.5s; -webkit-transition:border-color 0.5s;}
.wzForm input[type="radio"] + label:hover:before {border-color:#8a8a8a;}
.wzForm input[type="radio"]:focus + label:before {outline:thin dotted grey;}
.wzForm input[type="radio"]:checked + label:before {border-color:#8a8a8a;}
.wzForm input[type="radio"]:checked + label:after {content:"";width:9px;height:9px;background:#333;position:absolute;left:5px;border-radius:100%;top: 6px;}

.wzForm input[type="checkbox"] + label {position:relative;cursor:pointer;}
.wzForm input[type="checkbox"] + label:before {content:' '; display:inline-block; width:14px; height:14px; line-height:15px;
                                                font-size:11px; margin: -4px 10px 0 0; text-align:center; vertical-align:middle;
                                                border:1px solid #c0c0c0; border-radius:3px;
                                                box-shadow:0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
                                                transition:border-color 0.5s; -webkit-transition:border-color 0.5s;}
.wzForm input[type="checkbox"]:checked + label:before {content:"\f00c"; font-family:fontAwesome; color:#fff; background:#333; border-color:#404040;}
.wzForm input[type="checkbox"] + label:hover:before {border-color:#8a8a8a;}
.wzForm input[type="checkbox"]:focus + label:before {outline:thin dotted black;}


.wzForm02 input[type="radio"] {border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;}
.wzForm02 input[type="radio"] + label {padding-left:27px;position:relative;cursor:pointer;display: inline-block;box-sizing: border-box;vertical-align: middle;}
.wzForm02 input[type="radio"] + label:before {content:""; width:20px; height:20px; border:2px solid #666; box-sizing:border-box; 
                                              position:absolute; left:0; top:-2px; transition:border-color 0.5s; -webkit-transition:border-color 0.5s;}
.wzForm02 input[type="radio"] + label:hover:before {border-color:#0379bf;}
.wzForm02 input[type="radio"]:focus + label:before {outline:thin dotted #0379bf;}
.wzForm02 input[type="radio"]:checked + label:before {border-color:#0379bf;}
.wzForm02 input[type="radio"]:checked + label:after {content:""; width:18px; height:18px; background:url(/widesign/img/ico_check.png) no-repeat center #0379bf;
                                                     position:absolute; left:1px; top:0;}







/* paging */
.subCon ul.num {display:table; margin:0 auto; float:none !important;}
.subCon ul.num li {display:inline-block; width:auto !important;padding:0 !important;list-style:none;}
.subCon ul.num li:last-child {margin-right:0;}
.subCon ul.num li a {padding: 0;display:inline-block;font-size: 13px;color:#333;width: 40px;height: 40px;line-height: 40px;
                      margin: 0 2px;text-align: center; vertical-align:middle;}
.subCon ul.num li a.on {background:#272d3d; color:#fff; border:1px solid #e8e8e8; font-weight:600;box-sizing:border-box;}
.subCon ul.num li a:hover,
.subCon ul.num li a:focus {font-weight:600; text-decoration:underline;}
.subCon ul.num li a > img {width:20px; height:20px; vertical-align:middle;}

.subCon ul.num li.prev a,
.subCon ul.num li.next a {font-size:0;text-indent:-9999px; vertical-align:middle;text-align: center;position: relative;
                          border: 1px solid #ddd;box-sizing: border-box;}
.subCon ul.num li.prev a:before {content:"\276C";}
.subCon ul.num li.prev.first a:before {content:"\276C \276C";}
.subCon ul.num li.next a:before {content:"\276D";}
.subCon ul.num li.next.last a:before {content:"\276D \276D";}
.subCon ul.num li.prev a:before,ul.num li.next a:before {font-size:15px;text-indent:0;color:#333;width: 100%;height: 100%;float: left;}
  
  @media (min-width:700px){
    .subCon ul.num li a.pd3 {line-height:40px; width:auto; margin:0 5px;}
  }
  @media (max-width:699px){
    .subCon ul.num li.first, ul.num li.last {display:none;}
    .subCon ul.num li a {width:30px; height:30px; line-height:30px;}
    .subCon ul.num li a.pd3 {line-height:30px; width:auto; margin:0;}
  }
  @media (max-width:450px){
    .subCon ul.num li a {width:25px; height:25px; line-height:25px; margin:0;}
    .subCon ul.num li.prev {margin-right:3px;}
    .subCon ul.num li.next {margin-left:3px;}
  }





.hoverbtn_circle {width:50px; height:50px; display:inline-block; vertical-align:middle; line-height:normal; text-indent:-9999px; 
                  overflow:hidden; border-radius:100%; margin-right:-4px; margin-left:10px; 
                  background:url(/images/wzwg/site/mngr/menu/module_hover.png) no-repeat #71bddd;
                  -webkit-transition:background-color 0.5s; transition:background-color 0.5s;}
.hoverbtn_circle:first-child {margin-left:0;}
.hoverbtn_circle.add {background-position:-7px -6px;}
.hoverbtn_circle.list {background-position:-64px -7px;}
.hoverbtn_circle.setting {background-position:-123px -6px;}
.hoverbtn_circle.closeUp {background-position:-7px -60px;}
.hoverbtn_circle.modify {background-position:-64px -60px;}
.hoverbtn_circle.new {background-position:-121px -60px;}
.hoverbtn_circle:hover {background-color:#229acc;}


.circleRTxt {width:100%; display:inline-block; line-height:normal; margin-bottom:12px; font-size:18.5px; text-align:left;}
.circleRTxt:last-child {margin-bottom:0;}
.circleRTxt .hoverbtn_circle {width:65px; height:65px; background-color:#71bddd; margin-right:15px;}
.circleRTxt:hover {font-weight:600;}
.circleRTxt:hover .hoverbtn_circle {background-color:#229acc;}
.circleRTxt .hoverbtn_circle.closeUp {background-position:-1px -54px;}
.circleRTxt .hoverbtn_circle.modify {background-position:-57px -54px;}
.circleRTxt .hoverbtn_circle.new {background-position:-114px -53px;}


  @media (min-width:900px){
    .hoverLayer {position:absolute; top:0px; left:0; /*display:table;*/ width:100%; height:100%; background:#f9f9f9; text-align:center; 
                -webkit-transition:opacity 0.5s, background 0.5s; transition:opacity 0.5s, background 0.5s; opacity:0;}
    .hoverLayer.blck {background:rgba(0,0,0,0.65) !important;}
    .hoverLayer>div {width:100%; max-width:220px; /*vertical-align:middle; display:table-cell;*/ text-align:center !important;
                    position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
    div:hover>.hoverLayer {/*display:block;*/opacity:1;}
  }
  @media (min-width:900px) and (max-width:1250px){
    .hoverbtn_circle {width:40px; height:40px;}
    .hoverbtn_circle.add {background-position:-4px -4px; background-size: 140px;}
    .hoverbtn_circle.list {background-position:-53px -6px; background-size:150px;}
    .hoverbtn_circle.setting {background-position:-102px -6px; background-size:150px;}
  }
  @media (max-width:899px){
    .hoverbtn_circle {width:30px; height:30px;}
    .hoverbtn_circle.add {background-position:-4px -4px; background-size:110px;}
    .hoverbtn_circle.list {background-position:-39px -4px; background-size:110px;}
    .hoverbtn_circle.setting {background-position:-75px -4px; background-size:110px;}
  }



/*************************************************/
/*************************************************/
/******************** common *********************/
/*************************************************/
/*************************************************/


/* font-weight */
.fw400 {font-weight:400;}
.fw600 {font-weight:600;}
.fw900 {font-weight:900;}

/* font-style */
.italic {font-style:italic;}
.oblique {font-style:oblique;}
.underline {text-decoration:underline;}
.throughline {text-decoration:line-through;}

/* align */
.fl {float:left;}
.fr {float:right;}
.fn {float:none; display:inline-block; margin-right:-4px;}
  @media (max-width:899px){
    /* 모바일 에서만 반응 */
    .m-fl {float:left !important;}
    .m-fr {float:right !important;}
    .m-fn {float:none !important;}
  }

/* text-align */
.txt-l {text-align:left !important;}
.txt-r {text-align:right !important;}
.txt-c {text-align:center !important;}
  @media (max-width:899px){
    /* 모바일 에서만 반응 */
    .mtxt-l {text-align:left !important;}
    .mtxt-r {text-align:right !important;}
    .mtxt-c {text-align:center !important;}
  }
.vert-m {vertical-align:middle !important;}
.vert-t {vertical-align:top !important;}
.vert-b {vertical-align:bottom !important;}

/*padding*/
.pt0 {padding-top:0;}
.pt5 {padding-top:5px;}
.pt10 {padding-top:10px;}
.pt15 {padding-top:15px;}
.pt20 {padding-top:20px;}
.pt25 {padding-top:25px;}
.pt30 {padding-top:30px;}
.pt50 {padding-top:50px;}

.pb0 {padding-bottom:0 !important;}
.pb5 {padding-bottom:5px;}
.pb10 {padding-bottom:10px;}
.pb15 {padding-bottom:15px;}
.pb20 {padding-bottom:20px;}
.pb25 {padding-bottom:25px;}
.pb30 {padding-bottom:30px;}
.pb50 {padding-bottom:50px;}

.pl0 {padding-left:0 !important;}
.pl5 {padding-left:5px;}
.pl10 {padding-left:10px;}
.pl15 {padding-left:15px;}
.pl20 {padding-left:20px;}
.pl25 {padding-left:25px;}
.pl30 {padding-left:30px;}
.pl50 {padding-left:50px;}

.pr0 {padding-right:0 !important;}
.pr5 {padding-right:5px;}
.pr10 {padding-right:10px;}
.pr15 {padding-right:15px;}
.pr20 {padding-right:20px;}
.pr25 {padding-right:25px;}
.pr30 {padding-right:30px;}
.pr50 {padding-right:50px;}

.p0 {padding:0 !important;}
.p3 {padding:3px;}
.p5 {padding:5px;}
.p10 {padding:10px;}
.p15 {padding:15px;}
.p20 {padding:20px;}
.p30 {padding:30px;}
.p40 {padding:40px;}
.p50 {padding:50px;}


/*margin*/
.mt0 {margin-top:0 !important;}
.mt5 {margin-top:5px;}
.mt10 {margin-top:10px;}
.mt15 {margin-top:15px;}
.mt20 {margin-top:20px;}
.mt25 {margin-top:25px;}
.mt30 {margin-top:30px;}
.mt40 {margin-top:40px;}
.mt50 {margin-top:50px;}

.mb0 {margin-bottom:0 !important;}
.mb5 {margin-bottom:5px;}
.mb10 {margin-bottom:10px;}
.mb15 {margin-bottom:15px;}
.mb20 {margin-bottom:20px;}
.mb25 {margin-bottom:25px;}
.mb30 {margin-bottom:30px;}
.mb40 {margin-bottom:40px;}
.mb50 {margin-bottom:50px;}
.mb80 {margin-bottom:80px;}
.mb100 {margin-bottom:100px;}

.ml0 {margin-left:0 !important;}
.ml1 {margin-left:1%;}
.ml2 {margin-left:2%;}
.ml5 {margin-left:5px;}
.ml10 {margin-left:10px;}
.ml15 {margin-left:15px;}
.ml20 {margin-left:20px;}
.ml25 {margin-left:25px;}
.ml30 {margin-left:30px;}
.ml50 {margin-left:50px;}

.mr0 {margin-right:0 !important;}
.mr1 {margin-right:1%;}
.mr2 {margin-right:2%;}
.mr5 {margin-right:5px;}
.mr10 {margin-right:10px;}
.mr15 {margin-right:15px;}
.mr20 {margin-right:20px;}
.mr25 {margin-right:25px;}
.mr30 {margin-right:30px;}
.mr50 {margin-right:50px;}

.mg0 {margin:0 !important;}
.mg5 {margin:5px;}
.mg10 {margin:10px;}
.mg15 {margin:15px;}
.mg20 {margin:20px;}
.mg25 {margin:25px;}
.mg30 {margin:30px;}
.mg50 {margin:50px;}


/*width, height*/
.wd-auto {width:auto;}
.w5,.wd5 {width:5% !important;}
.w10,.wd10 {width:10% !important;}
.w15,.wd15 {width:15% !important;}
.w19,.wd19 {width:19.2% !important;}
.w20,.wd20 {width:20% !important;}
.w24,.wd24 {width:24.25% !important;}
.w25,.wd25 {width:25% !important;}
.w30,.wd30 {width:30% !important;}
.w32,.wd32 {width:32.666% !important;}
.w33,.wd33 {width:33.333% !important;}
.w40,.wd40 {width:40% !important;}
.w49,.wd49 {width:49.5% !important;}
.w50,.wd50 {width:50% !important;}
.w60,.wd60 {width:60% !important;}
.w66,.wd66 {width:66% !important;}
.w70,.wd70 {width:70% !important;}
.w80,.wd80 {width:80% !important;}
.w90,.wd90 {width:90% !important;}
.w100,.wd100 {width:100% !important;}
  @media (max-width:899px){
    .w10,.wd10 {width:auto !important;}
    /* 모바일 에서만 반응 */
    .wm-auto {width:auto !important;}
    .wm50 {width:50% !important;}
    .wm60 {width:60% !important;}
    .wm66 {width:66% !important;}
    .wm70 {width:70% !important;}
    .wm80 {width:80% !important;}
    .wm90 {width:90% !important;}
    .wm100 {width:100% !important;}
  }

.mxwd1300 {max-width:1300px;}
.mxwd100 {max-width:100%;}
.mxwdnone {max-width:none !important;}


.hgt-auto {height:auto;}
.hgt20{height:20px;}
.hgt30 {height:30px;}
.hgt40 {height:40px;}
.hgt50 {height:50px;}
.hgt70 {height:70px;}
.hgt80 {height:80px;}
.hgt100 {height:100vh;}

.linehgt20 {line-height:20px;}
.linehgt25 {line-height:25px;}
.linehgt30 {line-height:30px;}
.linehgt40 {line-height:40px;}
.linehgt50 {line-height:50px;}
.linehgt100 {line-height:100%;}
.linehgt130 {line-height:130%;}
.linehgt140 {line-height:140%;}
.linehgt150 {line-height:150%;}


/*background color*/
.bg-red {background:#f5d7d7 !important;}         .bg-red-strong {background:#c20000 !important;}
.bg-pink {background:#f7e2ec !important;}        .bg-pink-strong {background:#e03997 !important;}
.bg-orange {background:#f5e4d7 !important;}      .bg-orange-strong {background:#f06f1a !important;}
.bg-yellow {background:#f8f7d9 !important;}      .bg-yellow-strong {background:#f8ba06 !important;}
.bg-green  {background:#e4eddb !important;}      .bg-green-strong  {background:#acc30f !important;}
.bg-blue {background:#e2f1f8 !important;}        .bg-blue-strong {background:#16a6fd !important;}
.bg-navy {background:#2a2e50 !important;}        .bg-blue-strong2 {background:#066ec5 !important;}
.bg-brown {background:#eae0d6 !important;}       .bg-brown-strong {background:#a3643c !important;}
.bg-violet {background:#f5f1f8 !important;}      .bg-violet-strong {background:#c7a4e1 !important;}
.bg-purple {background:#f2dff1 !important;}      .bg-purple-strong {background:#9f31c3 !important;}
.bg-white {background:white !important;}
.bg-grey {background:#ddd !important;}           .bg-grey-strong {background:#727272 !important;}
.bg-lightgrey {background:#f7f7f7 !important;}
.bg-black {background:#333 !important;}


/* border style */
.br-red {border-color:#f5d7d7;}                .br-red-strong {border-color:#c20000;}
.br-pink {border-color:#f7e2ec;}               .br-pink-strong {border-color:#e03997;}
.br-orange {border-color:#f5e4d7;}             .br-orange-strong {border-color:#f06f1a;}
.br-yellow {border-color:#f8f7d9;}             .br-yellow-strong {border-color:#f8ba06;}
.br-green  {border-color:#e4eddb;}             .br-green-strong  {border-color:#acc30f;}
.br-blue {border-color:#e2f1f8;}               .br-blue-strong {border-color:#16a6fd;}
.br-brown {border-color:#eae0d6;}              .br-brown-strong {border-color:#a3643c;}
.br-violet {border-color:#f5f1f8;}             .br-violet-strong {border-color:#c7a4e1;}
.br-purple {border-color:#f2dff1;}             .br-purple-strong {border-color:#9f31c3;}
.br-white {border-color:white;}
.br-grey {border-color:#ddd;}                  .br-grey-strong {border-color:#727272;}
.br-lightgrey {border-color:rgba(0,0,0,0.1);}
.br-black {border-color:#333;}
.br-none {border:none;}

.brsolid {border-style:solid;}
.brdotted {border-style:dotted;}
.brdashed {border-style:dashed;}
.brdouble {border-style:double;}

.brwd1 {border-width:1px;}
.brwd2 {border-width:2px;}
.brwd3 {border-width:3px;}
.brwd5 {border-width:5px;}
.brwd10 {border-width:10px;}

.br-top0 {border-top:none !important;}
.br-top1 {border-top-width:1px !important;}
.br-top2 {border-top-width:2px !important;}
.br-btm0 {border-bottom:none !important;}
.br-btm1 {border-bottom-width:1px !important;}
.br-btm2 {border-bottom-width:2px !important;}
.br-lft0 {border-left:none !important;}
.br-lft1 {border-left-width:1px !important;}
.br-rgt0 {border-right:none !important;}
.br-rgt1 {border-right-width:1px !important;}

.br0 {border-radius:0px;}
.br3 {border-radius:3px;}
.br5 {border-radius:5px;}
.br10 {border-radius:10px;}
.br15 {border-radius:15px;}
.br20 {border-radius:20px;}
.br100 {border-radius:100%;}

  @media (max-width:899px){
    .mobile-br-none {border:none !important;}
    .mobile-brwd1 {border-width:1px !important;}
  }

/*font color*/
.red {color:#C20000;}
.pink {color:#cf4b88;}
.orange {color:#cc6e2a;}
.yellow {color:#d2cb02;}
.green {color:#4d860e;}
.blue {color:#0365cb;}
.brown {color:#8d541b;}
.violet {color:#734c9c;}
.purple {color:#970994;}
.white {color:#fff;}
.gray, .grey {color:#797979;}
.black {color:#333;}


/* font size */
.fs50 {font-size:50px;}
.fs40 {font-size:40px;}
.fs30 {font-size:30px;}
.fs28 {font-size:28px;}
.fs24 {font-size:24px;}
.fs22 {font-size:22px;}
.fs20 {font-size:20px;}
.fs18 {font-size:18px;}
.fs17 {font-size:17px;}
.fs16 {font-size:16px;}
.fs15 {font-size:15px;}
.fs14 {font-size:14px;}
.fs12 {font-size:12px;}
.fs10 {font-size:10px;}
.fs1em {font-size:1em;}
.fs12em {font-size:1.2em;}
.fs15em {font-size:1.5em;}

  @media (max-width:899px){
    .fs50 {font-size:32px;}
    .fs40 {font-size:28px;}
    .fs30 {font-size:20px;}
    .fs28 {font-size:22px;}
    .fs24 {font-size:19px;}
    .fs22 {font-size:18.5px;}
    .fs20 {font-size:18px;}
    .fs18 {font-size:16px;}
    .fs17 {font-size:15.5px;}
    .fs16 {font-size:15px;}
    .fs15 {font-size:14px;}
    .fs14 {font-size:13px;}

    .mfs30 {font-size:30px !important;}
    .mfs18 {font-size:18px !important;}
    .mfs17 {font-size:17px !important;}
    .mfs15 {font-size:15px !important;}
  }

.word_kp {word-break:keep-all;}
.word_brk {word-break:break-all;}



.block {display:block;}
.inline {display:inline;}
.i-block {display:inline-block;}
.dp-none {display:none;}
.box-border {box-sizing:border-box;}
.clboth {clear:both;}
.clnone {clear:none;}
.m-br{display:none;}

  @media (max-width:899px){
    /* 모바일 에서만 반응 */
    .mobile-none {display:none;}
    .mobile-block {display:block!important;}
  }

input, select {height:40px; line-height:38px; border:1px solid #ddd; font-size:15px; box-sizing:border-box; padding-left:5px !important; margin-right:2px; border-radius:2px; /*background:#fff; */
         -webkit-transition:border linear 1s; transition:border linear 1s;}
input[type="text"] {-webkit-appearance:none;}
input:focus, select:focus {outline:none; border:1px solid #8190a0;}
input[type="text"]:disabled {background:#e3e3e3;}
input[type="radio"], input[type="checkbox"] {height:auto !important; background:transparent !important;}
input[type="radio"]:focus, input[type="checkbox"]:focus {outline:1px solid #8190a0; outline-style:auto;}
textarea {border:1px solid #e9e9e9; padding:5px; box-sizing:border-box; font-size:12px; appearance:none; -webkit-appearance:none; -webkit-transition:border linear 1s; transition:border linear 1s;}
input[type="text"]:focus{border:1px solid #fff; border-bottom:2px solid #8190a0; outline:none;}

select {background:url(/widesign/img/arrow_black.png) no-repeat right 5px center; min-width:70px;
    padding:0 20px 0 5px !important; background-size:6px !important; appearance:none; -webkit-appearance:none;}
select::-ms-expand {opacity:0;}
select.bg-black {background:url(/widesign/img/arrow_white.png) #333 no-repeat right 5px center !important; background-size:6px !important;}
select.bg-black option {color:white !important;}





/*animate fx
.animate-fade {opacity:0;}
.animate-fade {opacity:1; animation:fadefx 1s;
         animation:fadefx 1s;
         -moz-animation:fadefx 1s;
         -webkit-animation:fadefx 1s;
         -o-animation:fadefx 1s;}
*/

@keyframes fadefx {
    from {opacity:0;}
    to {opacity:1}
}
@-moz-keyframes fadefx { /* Firefox */
    from {opacity:0;}
    to {opacity:1}
}
@-webkit-keyframes fadefx { /* Safari and Chrome */
    from {opacity:0;}
    to {opacity:1}
}
@-o-keyframes fadefx { /* Opera */
    from {opacity:0;}
    to {opacity:1}
}