@charset "UTF-8";
@import url(materialdesignicons.min.css);
@import url(animate.css);
@import url(plugins.css);

/*-------------------------------------------------------------------
	파일정의 : 초기화 스타일
	분류순서 : Reset > Fonts
	속성순서 : 표시 > 위치 > 넘침/흐름 > 크기/간격 > 박스모양 > 폰트/정렬 > 기타
-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
    ## Fonts
	- (특수문자 범위) unicode-range:U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E
	- (영문 범위) unicode-range:U+0041-005A(대문자), U+0061-007A(소문자)
	- (숫자 범위) unicode-range:U+0030-0039
	- (전체 범위) unicode-range:U+0020-007E
-------------------------------------------------------------------*/

@font-face {
    font-family: "NotoSans";
    font-weight: 100;
    src: url("../fonts/NotoSans-Thin.eot");
    src: local("※"), url("../fonts/NotoSans-Thin.eot?#iefix") format("embedded-opentype"), url("../fonts/NotoSans-Thin.woff") format("woff");
}

@font-face {
    font-family: "NotoSans";
    font-weight: 200;
    src: url("../fonts/NotoSans-DemiLight.eot");
    src: local("※"), url("../fonts/NotoSans-DemiLight.eot?#iefix") format("embedded-opentype"), url("../fonts/NotoSans-DemiLight.woff") format("woff");
}

@font-face {
    font-family: "NotoSans";
    font-weight: 300;
    src: url("../fonts/NotoSans-Light.eot");
    src: local("※"), url("../fonts/NotoSans-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/NotoSans-Light.woff") format("woff");
}

@font-face {
    font-family: "NotoSans";
    font-weight: 400;
    src: url("../fonts/NotoSans-Regular.eot");
    src: local("※"), url("../fonts/NotoSans-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/NotoSans-Regular.woff") format("woff");
}

@font-face {
    font-family: "NotoSans";
    font-weight: 500;
    src: url("../fonts/NotoSans-Medium.eot");
    src: local("※"), url("../fonts/NotoSans-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/NotoSans-Medium.woff") format("woff");
}

@font-face {
    font-family: "NotoSans";
    font-weight: 700;
    src: url("../fonts/NotoSans-Bold.eot");
    src: local("※"), url("../fonts/NotoSans-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/NotoSans-Bold.woff") format("woff");
}

@font-face {
    font-family: "Roboto";
    font-weight: 100;
    src: url("../fonts/Roboto-Thin.eot");
    src: local("※"), url("../fonts/Roboto-Thin.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-Thin.woff") format("woff");
}

@font-face {
    font-family: "Roboto";
    font-weight: 200;
    src: url("../fonts/Roboto-DemiLight.eot");
    src: local("※"), url("../fonts/Roboto-DemiLight.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-DemiLight.woff") format("woff");
}

@font-face {
    font-family: "Roboto";
    font-weight: 300;
    src: url("../fonts/Roboto-Light.eot");
    src: local("※"), url("../fonts/Roboto-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-Light.woff") format("woff");
}

@font-face {
    font-family: "Roboto";
    font-weight: 400;
    src: url("../fonts/Roboto-Regular.eot");
    src: local("※"), url("../fonts/Roboto-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-Regular.woff") format("woff");
}

@font-face {
    font-family: "Roboto";
    font-weight: 500;
    src: url("../fonts/Roboto-Medium.eot");
    src: local("※"), url("../fonts/Roboto-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-Medium.woff") format("woff");
}

@font-face {
    font-family: "Roboto";
    font-weight: 700;
    src: url("../fonts/Roboto-Bold.eot");
    src: local("※"), url("../fonts/Roboto-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-Bold.woff") format("woff");
}

@font-face {
    font-family: 'NanumSquare';
    font-style: normal;
    font-weight: 100;
    src: local("※"),
        url('../fonts/NanumSquareL.woff2') format('woff2'), 
        url('../fonts/NanumSquareL.woff') format('woff'),
        url('../fonts/NanumSquareL.ttf') format('truetype'),
        url('../fonts/NanumSquareL.otf') format('opentype'),
        url('../fonts/NanumSquareL.eot') format('embedded-opentype');
}

@font-face {
    font-family: 'NanumSquare';
    font-style: normal;
    font-weight: 400;
    src: local("※"),
        url('../fonts/NanumSquareR.woff2') format('woff2'), 
        url('../fonts/NanumSquareR.woff') format('woff'),
        url('../fonts/NanumSquareR.ttf') format('truetype'),
        url('../fonts/NanumSquareR.otf') format('opentype'),
        url('../fonts/NanumSquareR.eot') format('embedded-opentype');
}

@font-face {
    font-family: 'NanumSquare';
    font-style: normal;
    font-weight: 700;
    src: local("※"),
        url('../fonts/NanumSquareB.woff2') format('woff2'), 
        url('../fonts/NanumSquareB.woff') format('woff'),
        url('../fonts/NanumSquareB.ttf') format('truetype'),
        url('../fonts/NanumSquareB.otf') format('opentype'),
        url('../fonts/NanumSquareB.eot') format('embedded-opentype');
}

@font-face {
    font-family: 'NanumSquare';
    font-style: normal;
    font-weight: 900;
    src: local("※"),
        url('../fonts/NanumSquareEB.woff2') format('woff2'), 
        url('../fonts/NanumSquareEB.woff') format('woff'),
        url('../fonts/NanumSquareEB.ttf') format('truetype'),
        url('../fonts/NanumSquareEB.otf') format('opentype'),
        url('../fonts/NanumSquareEB.eot') format('embedded-opentype');
}

@font-face {
    font-family: 'Spoqa Han Sans';
    font-weight: 700;
    src: local('Spoqa Han Sans Bold'),
    url('../fonts/SpoqaHanSansBold.woff2') format('woff2'),
    url('../fonts/SpoqaHanSansBold.woff') format('woff'),
    url('../fonts/SpoqaHanSansBold.ttf') format('truetype');
}

@font-face {
    font-family: 'Spoqa Han Sans';
    font-weight: 400;
    src: local('Spoqa Han Sans Regular'),
    url('../fonts/SpoqaHanSansRegular.woff2') format('woff2'),
    url('../fonts/SpoqaHanSansRegular.woff') format('woff'),
    url('../fonts/SpoqaHanSansRegular.ttf') format('truetype');
}

@font-face {
    font-family: 'Spoqa Han Sans';
    font-weight: 300;
    src: local('Spoqa Han Sans Light'),
    url('../fonts/SpoqaHanSansLight.woff2') format('woff2'),
    url('../fonts/SpoqaHanSansLight.woff') format('woff'),
    url('../fonts/SpoqaHanSansLight.ttf') format('truetype');
}

@font-face {
    font-family: 'Spoqa Han Sans';
    font-weight: 100;
    src: local('Spoqa Han Sans Thin'),
    url('../fonts/SpoqaHanSansThin.woff2') format('woff2'),
    url('../fonts/SpoqaHanSansThin.woff') format('woff'),
    url('../fonts/SpoqaHanSansThin.ttf') format('truetype');
}
  
@font-face {
    font-family: 'nanum-handwritting-sanghaechanmiche';
    src: url('../fonts/sanghaechanmiche.eot');
    src: local('nanum-handwritting-sanghaechanmiche'),
            local('nanum-handwritting-sanghaechanmiche'),
            url('../fonts/sanghaechanmiche.eot?#iefix') format('embedded-opentype'),
            url('../fonts/sanghaechanmiche.woff2') format('woff2'),
            url('../fonts/sanghaechanmiche.woff') format('woff'),
            
            url('../fonts/sanghaechanmiche.ttf') format('truetype'),
            url('../fonts/sanghaechanmiche.svg#sanghaechanmiche') format('svg');
    font-display: swap;
    font-style: normal;
    font-weight: 400;
}

/*-------------------------------------------------------------------
    ## Reset
-------------------------------------------------------------------*/

html,
body,
div,
ul,
ol,
dl,
li,
dt,
dd,
p,
h1,
h2,
h3,
h4,
h5,
h6,
table,
thead,
tbody,
tfoot,
tr,
th,
td,
caption,
address,
article,
aside,
canvas,
details,
figure,
figcaption,
footer,
header,
menu,
nav,
section,
main,
label,
button,
select,
textarea,
input,
fieldset,
legend,
a,
span,
/* strong, */
em,
address,
dfn,
small,
i,
b {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    font-style: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    line-height: inherit;
    word-break: inherit;
    word-wrap: inherit;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
}

:before,
:after {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
}

article,
aside,
canvas,
details,
figure,
figcaption,
footer,
header,
menu,
nav,
section,
main {
    display: block;
}

html {
    font-size: 14px;
}

body {
    font-family: 'Roboto', 'NotoSans';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    word-break: keep-all;
    word-wrap: word-break;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
}

html[lang=ja] body,
html[lang=zh] body {
    word-break: normal;
}

[hidden],
hr {
    display: none;
}

img {
    vertical-align: middle;
}

fieldset,
iframe {
    width: 100%;
}

button,
img,
a,
frame,
iframe,
fieldset {
    border: 0;
}

a {
    text-decoration: none;
    color:#222;
}
table {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}

caption {
    display: none;
    position: absolute;
    left: -9999px;
}

legend {
    position: absolute;
    left: -9999em;
    top: -9999em;
}

button {
    overflow: hidden;
    background-color: transparent;
    cursor: pointer;
}

button::-moz-focus-inner {
    border: 0px;
    padding: 0px;
}

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
}

select::-ms-expand {
    display: none;
}

input::-ms-clear,
input::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

input::search-decoration,
input::search-cancel-button,
input::search-results-button,
input::search-results-decoration {
    display: none;
}

input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration {
    display: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input::-webkit-calendar-picker-indicator {
    -webkit-appearance: none;
}

.dv-android [tabindex='0']:focus,
.dv-android a,
.dv-android button,
.dv-android input,
.dv-android textarea,
.dv-android select {
    outline: 0;
    -webkit-tap-highlight-color: transparent;
}

.dv-ios [tabindex='0'],
.dv-ios a,
.dv-ios button,
.dv-ios input,
.dv-ios textarea,
.dv-ios select {
    -webkit-tap-highlight-color: transparent;
}

/*-------------------------------------------------------------------
	파일정의 : 전역스타일 공통
	참고사항 : 가이드화 하는 것을 권장하며, 예외의 경우에만 사용한다.
	분류순서 : General > Grid Layout > Custom Color > Fixed Size & Gutter
	속성순서 : 표시 > 위치 > 넘침/흐름 > 크기/간격 > 박스모양 > 폰트/정렬 > 기타
-------------------------------------------------------------------*/


.dp-none{display: none !important;}
.dp-block{display: block !important;}

.breadcrumb {
    content: '';
    clear: both;
    display: block;
}

/* Transition */

.gnb-dropdown .node2-menu,
.gnb-fulldown .node2-menu,
.gnb-fulldown .gnb-bg,
.drop.down .drop-menu {
    visibility: hidden;
    left: 0;
    top: 100%;
    opacity: 0;
    -webkit-animation: dropdown 0.2s ease both;
    animation: dropdown 0.2s ease both;
    -webkit-transform: translateY(-50%) scaleY(0);
    -ms-transform: translateY(-50%) scaleY(0);
    transform: translateY(-50%) scaleY(0);
    -webkit-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.gnb-dropdown .node1-item.is-active>.node2-menu,
.gnb-fulldown.is-active .node2-menu,
.gnb-fulldown.is-active .gnb-bg,
.drop.down .drop-menu.is-active {
    visibility: visible;
    opacity: 1;
    -webkit-animation: dropdown-active 0.2s ease both;
    animation: dropdown-active 0.2s ease both;
}

.drop.up .drop-menu {
    visibility: hidden;
    left: 0;
    bottom: 100%;
    opacity: 0;
    -webkit-animation: dropup 0.2s ease both;
    animation: dropup 0.2s ease both;
    -webkit-transform: translateY(-50%) scaleY(0);
    -ms-transform: translateY(-50%) scaleY(0);
    transform: translateY(-50%) scaleY(0);
    -webkit-transition: opacity 0.2s ease;
    -o-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
}

.drop.up .drop-menu.is-active {
    visibility: visible;
    opacity: 1;
    -webkit-animation: dropup-active 0.2s ease both;
    animation: dropup-active 0.2s ease both;
}

.gnb-dropdown .node1-link:after,
.gnb-fulldown .node1-link:after {
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: -webkit-transform 0.25s ease;
    transition: -webkit-transform 0.25s ease;
    -o-transition: transform 0.25s ease;
    transition: transform 0.25s ease;
    transition: transform 0.25s ease, -webkit-transform 0.25s ease;
}

.gnb-dropdown .node1-item.is-current>.node1-link:after,
.gnb-fulldown .node1-item.is-current>.node1-link:after {
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
}

@-webkit-keyframes dropdown {
    from {
        -webkit-transform: translateY(0) scaleY(1);
        transform: translateY(0) scaleY(1);
    }
    to {
        -webkit-transform: translateY(-50%) scaleY(0);
        transform: translateY(-50%) scaleY(0);
    }
}

@keyframes dropdown {
    from {
        -webkit-transform: translateY(0) scaleY(1);
        transform: translateY(0) scaleY(1);
    }
    to {
        -webkit-transform: translateY(-50%) scaleY(0);
        transform: translateY(-50%) scaleY(0);
    }
}

@-webkit-keyframes dropdown-active {
    from {
        -webkit-transform: translateY(-50%) scaleY(0);
        transform: translateY(-50%) scaleY(0);
    }
    to {
        -webkit-transform: translateY(0) scaleY(1);
        transform: translateY(0) scaleY(1);
    }
}

@keyframes dropdown-active {
    from {
        -webkit-transform: translateY(-50%) scaleY(0);
        transform: translateY(-50%) scaleY(0);
    }
    to {
        -webkit-transform: translateY(0) scaleY(1);
        transform: translateY(0) scaleY(1);
    }
}

@-webkit-keyframes dropup {
    from {
        -webkit-transform: translateY(0) scaleY(1);
        transform: translateY(0) scaleY(1);
    }
    to {
        -webkit-transform: translateY(50%) scaleY(0);
        transform: translateY(50%) scaleY(0);
    }
}

@keyframes dropup {
    from {
        -webkit-transform: translateY(0) scaleY(1);
        transform: translateY(0) scaleY(1);
    }
    to {
        -webkit-transform: translateY(50%) scaleY(0);
        transform: translateY(50%) scaleY(0);
    }
}

@-webkit-keyframes dropup-active {
    from {
        -webkit-transform: translateY(50%) scaleY(0);
        transform: translateY(50%) scaleY(0);
    }
    to {
        -webkit-transform: translateY(0) scaleY(1);
        transform: translateY(0) scaleY(1);
    }
}

@keyframes dropup-active {
    from {
        -webkit-transform: translateY(50%) scaleY(0);
        transform: translateY(50%) scaleY(0);
    }
    to {
        -webkit-transform: translateY(0) scaleY(1);
        transform: translateY(0) scaleY(1);
    }
}

/*-------------------------------------------------------------------
    ##General
-------------------------------------------------------------------*/

/* No Scroll */

.is-locked-all {
    overflow: hidden;
}

.is-locked-ios {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* IR */

.is-hidden {
    display: none;
}

.blind {
    position: absolute;
    top: -999em;
    left: -999em;
    z-index: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.blind-wrap {
    position: relative;
}

.blind-area {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    color: transparent;
}

/* Display */

.dis-b {
    display: block;
}

.dis-i {
    display: inline;
}

.dis-ib {
    display: inline-block;
}

.dis-f {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.dis-if {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
}

.dis-t {
    display: table;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
}

.dis-tr {
    display: table-row;
}

.dis-tc {
    display: table-cell;
}

/* Margin */

.mar-t0 {
    margin-top: 0 !important;
}

.mar-r0 {
    margin-right: 0 !important;
}

.mar-b0 {
    margin-bottom: 0 !important;
}

.mar-l0 {
    margin-left: 0 !important;
}

/* Padding */

.pad-t0 {
    padding-top: 0 !important;
}

.pad-r0 {
    padding-right: 0 !important;
}

.pad-b0 {
    padding-bottom: 0 !important;
}

.pad-l0 {
    padding-left: 0 !important;
}

/* Border */

.bdr-t0 {
    border-top-width: 0 !important;
}

.bdr-r0 {
    border-right-width: 0 !important;
}

.bdr-b0 {
    border-bottom-width: 0 !important;
}

.bdr-l0 {
    border-left-width: 0 !important;
}

/* Align - Text */

.align-t {
    vertical-align: top !important;
}

.align-m {
    vertical-align: middle !important;
}

.align-b {
    vertical-align: bottom !important;
}

.align-l {
    text-align: left !important;
}

.align-c {
    text-align: center !important;
}

.align-r {
    text-align: right !important;
}

.align-j {
    text-align: justify;
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify;
    text-align-last: justify;
}

.float_r{
    float: right;
}

.float_l{
    float: left;
}

/* Align - Layer */

.centered-t {
    position: absolute !important;
    left: 50%;
    top: 0;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.centered-r,
.input-group .append,
.acco.demo1 .acco-toggle {
    position: absolute !important;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.centered-b {
    position: absolute !important;
    left: 50%;
    bottom: 0;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.centered-l,
.input-group .prepend,
.breadcrumb .arw {
    position: absolute !important;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.centered-c {
    position: absolute !important;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.centered-rb {
    position: absolute !important;
    right: 0;
    bottom: 0;
}

/* Align - Flexible */

.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.flex-inline {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
}

.flex-auto {
    -webkit-flex: 1;
    -ms-flex: 1;
    -webkit-box-flex: 1;
    flex: 1;
}

.flex-column {
    -webkit-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.flex-wrap {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.flex-start {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.flex-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.flex-end {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.flex-around {
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

.flex-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.flex-evenly {
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;
}

.cross-start {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.cross-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.cross-end {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}

.cross-around {
    -webkit-box-align: space-around;
    -ms-flex-align: space-around;
    align-items: space-around;
}

.cross-between {
    -webkit-box-align: space-between;
    -ms-flex-align: space-between;
    align-items: space-between;
}

.cross-evenly {
    -webkit-box-align: space-evenly;
    -ms-flex-align: space-evenly;
    align-items: space-evenly;
}

.flex-top {
    margin-bottom: auto !important;
}

.flex-right {
    margin-left: auto !important;
}

.flex-bottom {
    margin-top: auto !important;
}

.flex-left {
    margin-right: auto !important;
}

/*-------------------------------------------------------------------
    ##Layout
-------------------------------------------------------------------*/

/* Grid Flexible
	https://d2.naver.com/helloworld/8540176#ch2
	https://codepen.io/jaehee/full/zyZyWZ
*/

.grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

/* Grid - Align */
.grid .col.top {margin-bottom:auto;}
.grid .col.bottom {margin-top:auto;}
.grid .col.right {margin-left:auto;}
.grid .col.left {margin-right:auto;}

/* Default */
.col.demo1{border: 1px solid #ddd;}
.col {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
}

.col.auto {
    width: auto;
}

.col.top {
    margin-bottom: auto;
}

.col.bottom {
    margin-top: auto;
}

.col.right {
    margin-left: auto;
}

.col.left {
    margin-right: auto;
}

/* All Device */

.col.col-1 {
    width: 8.33333333%;
}

.col.col-2 {
    width: 16.6666%;
}

.col.col-3 {
    width: 25%;
}

.col.col-4 {
    width: 33.3333%;
}

.col.col-5 {
    width: 41.66666667%;
}

.col.col-6 {
    width: 50%;
}

.col.col-7 {
    width: 58.33333333%;
}

.col.col-8 {
    width: 66.66666667%;
}

.col.col-9 {
    width: 75%;
}

.col.col-10 {
    width: 83.33333334%;
}

.col.col-11 {
    width: 91.66666667%;
}

.col.col-12 {
    width: 100%;
}

/* Responsive */

.col.col-rp-1 {
    width: 8.33333333%;
}

.col.col-rp-2 {
    width: 16.6666%;
}

.col.col-rp-3 {
    width: 25%;
}

.col.col-rp-4 {
    width: 33.3333%;
}

.col.col-rp-5 {
    width: 41.66666667%;
}

.col.col-rp-6 {
    width: 50%;
}

.col.col-rp-7 {
    width: 58.33333333%;
}

.col.col-rp-8 {
    width: 66.66666667%;
}

.col.col-rp-9 {
    width: 75%;
}

.col.col-rp-10 {
    width: 83.33333334%;
}

.col.col-rp-11 {
    width: 91.66666667%;
}

.col.col-rp-12 {
    width: 100%;
}

/* Responsive Device */

@media all and (max-width: 1240px) {
    .col.col-rp-1 {
        width: 16.6666%;
    }
    .col.col-rp-2 {
        width: 33.3333%;
    }
    .col.col-rp-3 {
        width: 33.3333%;
    }
}

@media all and (max-width: 959px) {
    .col.col-rp-1 {
        width: 16.6666%;
    }
    .col.col-rp-3 {
        width: 50%;
    }
}

@media all and (max-width: 768px) {
    .col.col-rp-1 {
        width: 25%;
    }
    .col.col-rp-2 {
        width: 33.3333%;
    }
    .col.col-rp-3 {
        width: 50%;
    }
    .col.col-rp-4 {
        width: 100%;
    }
    .col.col-rp-6 {
        width: 100%;
    }
}

@media all and (max-width: 539px) {
    .col.col-rp-1 {
        width: 25%;
    }
    .col.col-rp-2 {
        width: 50%;
    }
    .col.col-rp-3 {
        width: 50%;
    }
    .col.col-rp-4 {
        width: 100%;
    }
}

@media all and (max-width: 479px) {
    .col.col-rp-1 {
        width: 33.3333%;
    }
    .col.col-rp-2 {
        width: 50%;
    }
    .col.col-rp-3,
    .col.col-rp-4,
    .col.col-rp-5,
    .col.col-rp-6,
    .col.col-rp-7,
    .col.col-rp-8,
    .col.col-rp-9,
    .col.col-rp-10,
    .col.col-rp-11,
    .col.col-rp-12 {
        width: 100%;
    }
}

@media all and (max-width: 359px) {
    .col.col-rp-3 {
        width: 100%;
    }
}

@media all and (max-width: 319px) {
    .col.col-rp-1 {
        width: 50%;
    }
    .col.col-rp-2,
    .col.col-rp-3 {
        width: 100%;
    }
}

/* Small Size (Mobile Landscape Device) */

@media all and (max-width: 768px) {
    .col.col-sm-1 {
        width: 8.33333333%;
    }
    .col.col-sm-2 {
        width: 16.6666%;
    }
    .col.col-sm-3 {
        width: 25%;
    }
    .col.col-sm-4 {
        width: 33.3333%;
    }
    .col.col-sm-5 {
        width: 41.66666667%;
    }
    .col.col-sm-6 {
        width: 50%;
    }
    .col.col-sm-7 {
        width: 58.33333333%;
    }
    .col.col-sm-8 {
        width: 66.66666667%;
    }
    .col.col-sm-9 {
        width: 75%;
    }
    .col.col-sm-10 {
        width: 83.33333334%;
    }
    .col.col-sm-11 {
        width: 91.66666667%;
    }
    .col.col-sm-12 {
        width: 100%;
    }
}

/* Extra Small Size (Mobile Portrait Device) */

@media all and (max-width: 479px) {
    .col.col-xs-1 {
        width: 8.33333333%;
    }
    .col.col-xs-2 {
        width: 16.6666%;
    }
    .col.col-xs-3 {
        width: 25%;
    }
    .col.col-xs-4 {
        width: 33.3333%;
    }
    .col.col-xs-5 {
        width: 41.66666667%;
    }
    .col.col-xs-6 {
        width: 50%;
    }
    .col.col-xs-7 {
        width: 58.33333333%;
    }
    .col.col-xs-8 {
        width: 66.66666667%;
    }
    .col.col-xs-9 {
        width: 75%;
    }
    .col.col-xs-10 {
        width: 83.33333334%;
    }
    .col.col-xs-11 {
        width: 91.66666667%;
    }
    .col.col-xs-12 {
        width: 100%;
    }
}

/* Middle Size (Tablet Device) */

@media all and (min-width: 768px) and (max-width: 1024px) {
    /* Device Only */
    .col.col-md-1 {
        width: 8.33333333%;
    }
    .col.col-md-2 {
        width: 16.6666%;
    }
    .col.col-md-3 {
        width: 25%;
    }
    .col.col-md-4 {
        width: 33.3333%;
    }
    .col.col-md-5 {
        width: 41.66666667%;
    }
    .col.col-md-6 {
        width: 50%;
    }
    .col.col-md-7 {
        width: 58.33333333%;
    }
    .col.col-md-8 {
        width: 66.66666667%;
    }
    .col.col-md-9 {
        width: 75%;
    }
    .col.col-md-10 {
        width: 83.33333334%;
    }
    .col.col-md-11 {
        width: 91.66666667%;
    }
    .col.col-md-12 {
        width: 100%;
    }
}

/* Large Size (Desktop Device) */

@media all and (min-width: 1025px) {
    /* Device Only */
    .col.col-lg-1 {
        width: 8.33333333%;
    }
    .col.col-lg-2 {
        width: 16.6666%;
    }
    .col.col-lg-3 {
        width: 25%;
    }
    .col.col-lg-4 {
        width: 33.3333%;
    }
    .col.col-lg-5 {
        width: 41.66666667%;
    }
    .col.col-lg-6 {
        width: 50%;
    }
    .col.col-lg-7 {
        width: 58.33333333%;
    }
    .col.col-lg-8 {
        width: 66.66666667%;
    }
    .col.col-lg-9 {
        width: 75%;
    }
    .col.col-lg-10 {
        width: 83.33333334%;
    }
    .col.col-lg-11 {
        width: 91.66666667%;
    }
    .col.col-lg-12 {
        width: 100%;
    }
}

/* Gutter */

.gut-guide {
    margin: -5px;
}

.gut-guide>.col {
    padding: 5px;
}

.gut-20 {
    margin: -10px;
}

.gut-20>.col {
    padding: 10px;
}

/*-------------------------------------------------------------------
    파일정의 : 레이아웃 스타일
	작성날짜 : YYYY-MM-DD 홍길동
    참고사항 : 레이아웃, 상세스타일, 메뉴스타일 분류
    분류순서 : Wrapper > Header > Content > Footer > Navigation
    속성순서 : 표시 > 위치 > 넘침/흐름 > 크기/간격 > 박스모양 > 폰트/정렬 > 기타
-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
    ## Wrapper
-------------------------------------------------------------------*/

/* Layout */

/*-------------------------------------------------------------------
    ## Header
-------------------------------------------------------------------*/

/* Header Sticky */

.header.sticky-fixed {
    -webkit-transition: height 0.3s ease;
    -o-transition: height 0.3s ease;
    transition: height 0.3s ease;
}

.is-scrolled .header.sticky-fixed {
    height: 50px;
}

/* GNB Dropdown - Normal */

.gnb-dropdown .node1-list {
    position: relative;
    white-space: nowrap;
    margin: 0 -10px;
}

.gnb-dropdown .node1-item {
    display: inline-table;
    position: relative;
    padding: 0 10px;
}

.gnb-dropdown .node1-link {
    display: block;
    position: relative;
    padding: 0 15px;
    line-height: 30px;
    color: #555;
}

.gnb-dropdown .node1-link:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 15px;
    right: 15px;
    height: 2px;
    background-color: #000;
}

.gnb-dropdown .node2-menu {
    position: absolute;
    left: 50%;
    top: 100%;
    z-index: 10;
    padding-top: 5px;
    width: 120px;
    margin-left: -60px;
    background-color: #fff;
}

.gnb-dropdown .node2-list {
    padding: 10px 5px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.gnb-dropdown .node2-link {
    display: block;
    padding: 0 15px;
    line-height: 24px;
    font-size: 12px;
    color: #333;
}

/* GNB Dropdown - Active */

.gnb-dropdown .node1-link:focus,
.gnb-dropdown .node1-link:hover,
.gnb-dropdown .node1-link:active,
.gnb-dropdown .node1-item.is-active>.node1-link,
.gnb-dropdown .node1-item.is-current>.node1-link {
    color: #000;
}

.gnb-dropdown .node2-link:focus,
.gnb-dropdown .node2-link:hover,
.gnb-dropdown .node2-link:active,
.gnb-dropdown .node2-item.is-active>.node2-link,
.gnb-dropdown .node2-item.is-current>.node2-link {
    color: #000;
}

/* GNB Fullpdown - Default */
.gnb-fulldown {position:relative; height:30px;}
.gnb-fulldown .node1-list {position:relative; display:flex; white-space:nowrap; /*margin:0 -10px;*/ z-index:11;}
.gnb-fulldown .node1-item {position:relative; text-align:center;}
.gnb-fulldown .node1-link {display:block; position:relative; padding:0 25px; line-height:30px; color:#555;}
.gnb-fulldown .node1-link:after {content:''; position:absolute; bottom:0; left:15px; right:15px; height:2px; background-color:#000; @extend %wideScale;}
.gnb-fulldown .node2-menu {width:100%; height:0; text-align:left; @extend %dropdown;}
.gnb-fulldown .node2-list {padding:0 5px;}
.gnb-fulldown .node2-link {display:block; padding:0 15px; line-height:24px; font-size:12px; color:#333;}
.gnb-fulldown .gnb-bg {position:absolute; top:100%; left:0; right:0; z-index:10; @extend %dropdown; background-color:#eee; height:135px;}
 
/* GNB Fullpdown - Active */
.gnb-fulldown .node1-link:focus,
.gnb-fulldown .node1-link:hover,
.gnb-fulldown .node1-link:active,
.gnb-fulldown .node1-item.is-active > .node1-link,
.gnb-fulldown .node1-item.is-current > .node1-link {color:#000;}
.gnb-fulldown .node1-item.is-current > .node1-link:after {@extend %wideScale-active;}
.gnb-fulldown .node2-list.is-active {background-color:#fff;}
.gnb-fulldown .node2-link:focus,
.gnb-fulldown .node2-link:hover,
.gnb-fulldown .node2-link:active,
.gnb-fulldown .node2-item.is-active .node2-link,
.gnb-fulldown .node2-item.is-current .node2-link {color:#000;}
.gnb-fulldown.is-active .node2-menu,
.gnb-fulldown.is-active .gnb-bg {@extend %dropdown-active;}

/*-------------------------------------------------------------------
    ## Footer
-------------------------------------------------------------------*/

/* Layout */

/*-------------------------------------------------------------------
파일정의 : UI Modules
작성날짜 : YYYY-MM-DD 홍길동
참고사항 : 공통 범위를 최소화하고, 컨텐츠 스타일로 구분한다.
분류순서 : Element > Block > Layout > Plugin
속성순서 : 표시 > 위치 > 넘침/흐름 > 크기/간격 > 박스모양 > 폰트/정렬 > 기타
-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
    ## Text
-------------------------------------------------------------------*/

/* Title */
.tit-h3 {
    font-weight: 500;
    font-size: 18px;
}

.tit-h4 {
    font-weight: 400;
    font-size: 16px;
}

.tit-h5 {
    font-weight: 400;
    font-size: 14px;
}

.tit-h6 {
    font-weight: 400;
    font-size: 12px;
}

/* Paragraph */

.para-basic+.para-basic {
    margin-top: 20px;
}

.para-basic>p {
    line-height: 20px;
}

.para-basic>p+p {
    margin-top: 5px;
}

/*-------------------------------------------------------------------
    ## Form Controls
-------------------------------------------------------------------*/

/* Default */

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #999;
}

/* IE 10 + */

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #999;
}

/* Webkit Browser */

input:-moz-placeholder,
textarea:-moz-placeholder {
    color: #999;
}

/* Mozilla Firefox 4 to 18 */

input::-moz-placeholder,
textarea::-moz-placeholder {
    color: #999;
}

/* Mozilla Firefox 19+ */

input:focus:-ms-input-placeholder,
textarea:focus:-ms-input-placeholder {
    color: transparent;
}

/* IE 10 + */

input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
    color: transparent;
}

/* Webkit Browser */

input:focus:-moz-placeholder,
textarea:focus:-moz-placeholder {
    color: transparent;
}

/* Mozilla Firefox 4 to 18 */

input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder {
    color: transparent;
}

/* Mozilla Firefox 19+ */

input {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 0px;
    vertical-align: middle;
}

textarea {
    width: 100%;
    vertical-align: middle;
    resize: none;
}

.ie9 select {
    padding: 5px 35px 4px 5px;
    background: none;
}

.ie9 :root select {
    padding: 0;
    font-size: 0;
}

/* Form Textfield */

.input.demo1 {
    height: 40px;
    line-height: 24px;
    padding: 0 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
    -webkit-box-shadow: 1px 1px 2px 0px rgba(200, 200, 200, 0.3);
    box-shadow: 1px 1px 2px 0px rgba(200, 200, 200, 0.3);
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    text-indent: 0px !important;
}

.input.demo1:focus,
.input.demo1:hover,
.input.demo1.is-focused {
    border-color: #0089b3;
}

textarea.input.demo1 {
    height: auto;
    padding: 10px;
}

/* Form Select */

.select.demo1 {
    height: 40px;
    padding: 0 30px 0 10px;
    border: 1px solid #ddd;
    background: url("../images/common/arw_select01.png") no-repeat calc(100% - 10px) center;
    vertical-align: middle;
    border-radius: 3px;
    -webkit-box-shadow: 1px 1px 2px 0px rgba(200, 200, 200, 0.3);
    box-shadow: 1px 1px 2px 0px rgba(200, 200, 200, 0.3);
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    text-indent: 0px !important;
}

/* Form File */

.file {
    position: relative;
    display: inline-block;
}

.file input[type="file"] {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Form Radio */

/* Basic */

.radio.demo1 {
    display: inline-block;
    position: relative;
    margin: 5px 0;
    line-height: 1;
    vertical-align: middle;
}

.radio.demo1 label {
    display: inline-block;
    position: relative;
    min-width: 20px;
    min-height: 20px;
    font-size: 13px;
    line-height: 18px;
    vertical-align: middle;
}

.radio.demo1 label span {
    display: inline-block;
    padding-left: 28px;
}

.radio.demo1 label:before,
.radio.demo1 label:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
}

.radio.demo1 label:before {
    top: 0;
    width: 20px;
    height: 20px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 50%;
}

.radio.demo1>input {
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
}

.radio.demo1+.radio.demo1 {
    margin-left: 10px;
}

/* Checked */

.radio.demo1>input:checked+label:before {
    background-color: #fff;
    border-color: #2496ee;
}

.radio.demo1>input:checked+label:after {
    top: 5px;
    left: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2496ee;
}

/* Focused */

.radio.demo1>input.is-focused+label:before,
.radio.demo1>input:hover+label:before,
.radio.demo1>input:focus+label:before {
    border-color: #888;
}

.radio.demo1>input:checked:focus+label:before,
.radio.demo1>input:checked:hover+label:before {
    border-color: #2496ee;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

/* Disabled */

.radio.demo1>input[disabled]+label {
    color: #999;
}

.radio.demo1>input[disabled]+label:before {
    background-color: #f0f0f0;
}

.radio.demo1>input[disabled]:focus+label:before,
.radio.demo1>input[disabled]:hover+label:before {
    border-color: #ddd;
}

.radio.demo1>input[disabled]:checked+label:after {
    background: #888;
}

.radio.demo1>input[disabled]:checked+label:before,
.radio.demo1>input[disabled]:checked:focus+label:before,
.radio.demo1>input[disabled]:checked:hover+label:before {
    border-color: #888;
}

/* Errored */

.radio.demo1>input.is-errored+label {
    color: #f52727;
}

.radio.demo1>input.is-errored+label:before,
.radio.demo1>input.is-errored.is-focused:checked+label:before,
.radio.demo1>input.is-errored:checked:hover+label:before,
.radio.demo1>input.is-errored:checked:focus+label:before {
    border-color: #f52727;
}

.radio.demo1>input.is-errored:checked+label:before {
    border-color: #f52727;
}

.radio.demo1>input.is-errored:checked+label:after {
    background-color: #f52727;
}

/* Form Check */

/* Basic */

.check.demo1 {
    display: inline-block;
    position: relative;
    margin: 5px 0;
    line-height: 1;
    vertical-align: middle;
}

.check.demo1 label {
    display: inline-block;
    position: relative;
    min-width: 20px;
    min-height: 20px;
    font-size: 13px;
    line-height: 20px;
    vertical-align: middle;
}

.check.demo1 label span {
    display: inline-block;
    padding-left: 28px;
}

.check.demo1 label:before,
.check.demo1 label:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
}

.check.demo1 label:before {
    top: 0;
    width: 20px;
    height: 20px;
    border: 1px solid #ddd;
    background: #fff;
}

.check.demo1>input {
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
}

.check.demo1+.check.demo1 {
    margin-left: 10px;
}

/* Checked */

.check.demo1>input:checked+label:before {
    border-color: #2496ee;
}

.check.demo1>input:checked+label:after {
    left: 5px;
    top: 5px;
    width: 10px;
    height: 7px;
    background: none;
    border-left: 2px solid #2496ee;
    border-bottom: 2px solid #2496ee;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/* Focused */

.check.demo1>input.is-focused+label:before,
.check.demo1>input:hover+label:before,
.check.demo1>input:focus+label:before {
    border-color: #888;
}

.check.demo1>input:checked:focus+label:before,
.check.demo1>input:checked:hover+label:before {
    border-color: #2496ee;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

/* Disabled */

.check.demo1>input[disabled]+label {
    color: #999;
}

.check.demo1>input[disabled]+label:before {
    background-color: #f0f0f0;
}

.check.demo1>input[disabled]:focus+label:before,
.check.demo1>input[disabled]:hover+label:before {
    border-color: #ddd;
}

.check.demo1>input[disabled]:checked+label:after {
    border-color: #888;
}

.check.demo1>input[disabled]:checked+label:before,
.check.demo1>input[disabled]:checked:focus+label:before,
.check.demo1>input[disabled]:checked:hover+label:before {
    border-color: #888;
}

/* Errored */

.check.demo1>input.is-errored+label {
    color: #f52727;
}

.check.demo1>input.is-errored+label:before,
.check.demo1>input.is-errored.is-focused:checked+label:before,
.check.demo1>input.is-errored:checked:hover+label:before,
.check.demo1>input.is-errored:checked:focus+label:before {
    border-color: #f52727;
}

.check.demo1>input.is-errored:checked+label:before {
    border-color: #f52727;
}

.check.demo1>input.is-errored:checked+label:after {
    border-color: #f52727;
}

/* Form Switch */

.switch.demo1+.switch.demo1 {
    margin-left: 10px;
}

.switch.demo1 {
    display: inline-block;
    position: relative;
}

.switch.demo1 label {
    display: inline-block;
    width: 80px;
    vertical-align: top;
}

.switch.demo1 label:before,
.switch.demo1 label:after {
    content: '';
}

.switch.demo1 label:before {
    display: inline-block;
    width: 100%;
    height: 30px;
    background-color: #f0f0f0;
    border-radius: 15px;
    vertical-align: top;
}

.switch.demo1 input,
.switch.demo1 label:after {
    position: absolute;
    left: 2px;
    top: 50%;
    z-index: 1;
    width: 40px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    border-radius: 13px;
    overflow: hidden;
    background-color: #aaa;
    color: #fff;
    font-size: 12px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.switch.demo1 input {
    z-index: 0;
    border: 0;
    height: 24px;
}

.switch.demo1 input:checked,
.switch.demo1 input:checked+label:after {
    left: calc(100% - 42px);
}

.switch.demo1 input:checked+label:after {
    background-color: #2496ee;
}

.switch.demo1 input+label:after {
    content: 'OFF';
}

.switch.demo1 input:checked+label:after {
    content: 'ON';
}

.switch.demo1 input[disabled]+label:before {
    background-color: #ddd;
}

/*-------------------------------------------------------------------
    ## Form Elements
-------------------------------------------------------------------*/

/* Form Text */

.form-label,
.form-text {
    position: relative;
    padding: 1px 0 2px 0px;
    line-height: 37px;
    vertical-align: middle;
}

.form-label,
span.form-text {
    display: inline-block;
}

.form-text {
    margin-left: 10px;
}

.form-text:first-child {
    margin-left: 0;
}

.form-label .txt-required {
    position: absolute;
    top: 4px;
    right: 5px;
    color: red;
}

.form-split {
    display: inline-block;
    min-width: 24px;
    line-height: 40px;
    text-align: center;
}

.form-alert {
    display: none;
}

.form-alert.is-errored {
    display: block;
    color: red;
}

.form-alert.is-successed {
    display: block;
    color: green;
}

.form-group .form-desc {
    color: #555;
}

.form-group .form-desc p:before {
    content: '※ ';
}

.form-group .form-info {
    color: gray;
}

.form-group .form-info p:before {
    content: '· ';
}

/*-------------------------------------------------------------------
    ## Form Group
-------------------------------------------------------------------*/

/* Row Group */

.form.vertical+.form.vertical {
    margin-top: 20px;
}

.form.vertical .form-body {
    display: block;
}

.form.vertical .form-cont {
    margin-top: 2px;
}

.form.vertical .form-desc,
.form.vertical .form-info,
.form.vertical .form-alert {
    margin-top: 5px;
    line-height: 20px;
}

.form.vertical .form-body+.form-desc,
.form.vertical .form-body+.form-info,
.form.vertical .form-body+.form-alert {
    margin-top: 10px;
}

/* Col Group */

.form.horizontal+.form.horizontal {
    margin-top: 20px;
}

.form.horizontal .form-body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.form.horizontal .form-title {
    width: 100px;
}

.form.horizontal .form-cont {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.form.horizontal .form-desc,
.form.horizontal .form-info,
.form.horizontal .form-alert {
    margin-top: 5px;
    padding-left: 100px;
    line-height: 20px;
}

.form.horizontal .form-body+.form-desc,
.form.horizontal .form-body+.form-info,
.form.horizontal .form-body+.form-alert {
    margin-top: 10px;
}

/* Wide Group */

.form.wide+.form.wide {
    margin-top: 20px;
}

.form.wide .form-body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.form.wide .form-title {
    width: 100px;
}

.form.wide .form-cont {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.form.wide .form-desc,
.form.wide .form-info,
.form.wide .form-alert {
    margin-left: 20px;
    line-height: 20px;
}

/* Controls */

.form-controls {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.form-controls.type-row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.form-controls.flexible>.select,
.form-controls.flexible>.input,
.form-controls.flexible>.input-group {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

/* Mixin Common */
.input-group.hp{min-width: auto !important;}
.input-group.hp .select, .input-group.hp .input{width: 100px; margin-right: 15px; text-align: center;}

.input-group {
    position: relative;
    vertical-align: middle;
}

.input-group .input {
    width: 100%;
}

.input-group .prepend {
    left: 5px;
}

.input-group .append {
    right: 5px;
}

.input-group .prepend .btn-ico,
.input-group .append .btn-ico {
    vertical-align: top;
}

.input-group.has-prepend .input {
    padding-left: 35px;
}

.input-group.has-append .input {
    padding-right: 35px;
}

/*-------------------------------------------------------------------
    ## Form Custom
-------------------------------------------------------------------*/

/* Gutter */

.form-controls .row+.row {
    margin-top: 5px;
}

.form-controls .static {
    margin-right: 8px;
}

.form-controls .btn-style1 {
    margin-left: 8px;
}

/* Types */

.input-group.type-search .btn-ico {
    position: absolute;
    right: 0;
    top: 0;
    height: 40px;
    width: 40px;
    line-height: 40px;
}

/* 검색아이콘 버튼 */

.input-group.type-search .input {
    padding-right: 40px;
}

.form-controls.type-email2 .select {
    width: 47%;
}

/* 이메일 */

.form-controls.type-telNo .select,
.form-controls.type-telNo .input {
    width: calc(33.333% - 16px);
}

.form-controls.type-email1 .input {
    width: calc(50% - 12px);
}

.form-controls.type-email2 .select,
.form-controls.type-email2 .input {
    width: calc(50% - 12px);
}

.form-controls.type-email3 .select {
    width: calc(33% - 9px);
    margin-left: 6px;
}

.form-controls.type-email3 .input {
    width: calc(33% - 9px);
}

.form-controls.type-socialNo .input {
    width: calc(50% - 12px);
}

.form-controls.type-globalNo .input {
    width: calc(50% - 12px);
}

.form-controls.type-corpNo .input {
    width: calc(50% - 12px);
}

.form-controls.type-bizNo .input {
    width: calc(33.333% - 16px);
}

.form-controls.type-cardNo .input {
    width: calc(25% - 18px);
}

.form-controls.type-address {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.form-controls.type-address .row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.form-controls.type-address .row .input {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    width: 1px;
}

/*-------------------------------------------------------------------
	## Button
-------------------------------------------------------------------*/

/* Default */

button {
    overflow: hidden;
    padding: 0px;
    border: 0px;
    font-weight: normal;
    background-color: transparent;
    cursor: pointer;
}

button::-moz-focus-inner {
    border: 0px;
    padding: 0px;
}

.btn-area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.btn-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
}

.btn {
    padding-bottom: 2px;
}

.btn .ico,
.btn .arw {
    position: relative;
    top: 1px;
}

.btn,
.btn-ico {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
    -webkit-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.btn>span,
.btn-ico>span {
    position: relative;
    z-index: 1;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.btn *,
.btn-ico * {
    pointer-events: none;
}

.btn:focus,
.btn-ico:focus {
    outline-width: 0;
    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
}

/* Effect Wave */

.effect-wave,
.btn-ico .effect-wave,
.btn .effect-wave {
    display: block;
    position: absolute;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    width: 0px;
    height: 0px;
    background-color: #fff;
    border-radius: 50%;
    opacity: 0.2;
}

/* Common - Layout */

.btn-area.vertical {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.btn-area.horizontal .btn {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

/* Styles */

.btn.demo1 {
    height: 34px;
    padding-right: 20px;
    padding-left: 20px;
    font-size: 16px;
    background: #eee;
}

.btn.demo1.primary {
    background: #2496ee;
    color: #fff;
}

.btn.demo1.primary04 {
    background: #23b2e8;
    color: #fff;
}

.btn.demo1.secondary {
    background: #333;
    color: #fff;
}

.btn.demo1[disabled] {
    background: #aaa;
    color: #fff;
}

.btn.demo2 {
    height: 40px;
    padding: 0 10px 2px;
    border: 1px solid #ddd;
    border-radius: 3px;
    -webkit-box-shadow: 1px 1px 2px 0px rgba(200, 200, 200, 0.3);
    box-shadow: 1px 1px 2px 0px rgba(200, 200, 200, 0.3);
    line-height: 27px;
}

.btn.demo3 {
    height: 50px;
    padding-right: 20px;
    padding-left: 20px;
    font-size: 17px;
    background: #eee;
}

.btn.demo3.primary01 {
    background: #004483;
    color: #fff;
}

.btn.demo3.primary02 {
    background: #23b2e8;
    color: #fff;
}

.btn.demo3.secondary {
    background: #585858;
    color: #fff;
}

.btn.demo3[disabled] {
    background: #aaa;
    color: #fff;
}


.btn-ico.demo1 {
    width: 30px;
    height: 30px;
    padding-bottom: 2px;
    font-size: 16px;
    background: #eee;
    border-radius: 50%;
}

/* Content */

.btn-search {
    width: 34px;
    height: 34px;
}

.btn-pager {
    width: 20px;
    height: 20px;
    line-height: 18px;
    border: 1px solid #ddd;
}

.btn-top {
    width: 50px;
    height: 50px;
    line-height: 48px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
}

/*-------------------------------------------------------------------
	## Icon
-------------------------------------------------------------------*/

/* Default */

.arw,
.ico,
.flag {
    display: inline-block;
    background: no-repeat 0 0;
    vertical-align: middle;
    overflow: hidden;
    color: transparent;
    text-indent: -999px;
    white-space: nowrap;
}

/* Styles */

.ico-badge1 {
    width: 40px;
    height: 28px;
    background-image: url(../images/common/ico_badge01.png);
}

.ico-badge1.primary {
    background-position: 0 0;
}

.ico-badge1.gray {
    background-position: -40px 0;
}

.ico-close1 {
    width: 15px;
    height: 15px;
    background-image: url(../images/common/ico_close01.png);
}

.ico-close1.primary {
    background-position: 0 0;
}

.ico-close1.dark {
    background-position: -15px 0;
}

.ico-close1.white {
    background-position: -30px 0;
}

.ico-close1.gray {
    background-position: -45px 0;
}

.ico-del1 {
    width: 22px;
    height: 22px;
    background-image: url(../images/common/ico_del01.png);
}

.ico-del1.primary {
    background-position: 0 0;
}

.ico-del1.dark {
    background-position: -22px 0;
}

.ico-del1.white {
    background-position: -44px 0;
}

.ico-del1.gray {
    background-position: -66px 0;
}

.ico-more1 {
    width: 25px;
    height: 25px;
    background-image: url(../images/common/ico_more01.png);
}

.ico-more1.primary {
    background-position: 0 0;
}

.ico-more1.dark {
    background-position: -25px 0;
}

.ico-more1.white {
    background-position: -50px 0;
}

.ico-more1.gray {
    background-position: -75px 0;
}

.ico-more2 {
    width: 40px;
    height: 40px;
    background-image: url(../images/common/ico_more02.png);
}

.ico-more2.primary {
    background-position: 0 0;
}

.ico-more2.dark {
    background-position: -40px 0;
}

.ico-more2.white {
    background-position: -80px 0;
}

.ico-more2.gray {
    background-position: -120px 0;
}
.ico-more3{position: relative;margin: -3px 0 0 4px;width:10px;height:10px;background:url('../images/common/ico_more04.png') center no-repeat;}
.ico-file1 {
    width: 21px;
    height: 24px;
    background-image: url(../images/common/ico_file01.png);
}

.ico-file1.primary {
    background-position: 0 0;
}

.ico-file1.dark {
    background-position: -21px 0;
}

.ico-file1.white {
    background-position: -42px 0;
}

.ico-file1.gray {
    background-position: -63px 0;
}

.ico-slide2-pause {
    width: 14px;
    height: 16px;
    background-image: url(../images/common/ico_slide02_pause.png);
}

.ico-slide2-pause.primary {
    background-position: 0 0;
}

.ico-slide2-pause.dark {
    background-position: -14px 0;
}

.ico-slide2-pause.white {
    background-position: -28px 0;
}

.ico-slide2-pause.gray {
    background-position: -42px 0;
}

.ico-slide2-play {
    width: 15px;
    height: 16px;
    background-image: url(../images/common/ico_slide02_play.png);
}

.ico-slide2-play.primary {
    background-position: 0 0;
}

.ico-slide2-play.dark {
    background-position: -15px 0;
}

.ico-slide2-play.white {
    background-position: -30px 0;
}

.ico-slide2-play.gray {
    background-position: -45px 0;
}

.ico-search1 {
    width: 20px;
    height: 20px;
    background-image: url(../images/common/ico_search01.png);
}

.ico-search1.primary {
    background-position: 0 0;
}

.ico-search1.dark {
    background-position: -20px 0;
}

.ico-search1.white {
    background-position: -40px 0;
}

.ico-search1.gray {
    background-position: -60px 0;
}

.ico-youtube-play {
    width: 90px;
    height: 90px;
    background-image: url(../images/common/ico_youtube_play.png);
}

.ico-youtube-play.primary {
    background-position: 0 0;
}

.ico-youtube-play.dark {
    background-position: -90px 0;
}

.ico-youtube-play.white {
    background-position: -180px 0;
}

.ico-youtube-play.gray {
    background-position: -270px 0;
}

.ico-alt01{
    width: 36px;
    height: 36px;
    background-image: url(../images/common/ico_alt01.png);
}

.ico-res02{
    width: 135px;
    height: 135px;
    background-image: url(../images/common/ico_res02.png);
}

.ico-cal01{
    width: 25px;
    height: 22px;
    background-image: url(../images/common/ico_cal01.png);
}

.ico-joinroom01{
    width: 32px;
    height: 32px;
    margin-right: 10px;
    background-image: url(../images/common/ico_joinroom01.png);
}

.ico-joinroom02{
    width: 32px;
    height: 32px;
    margin-right: 10px;
    background-image: url(../images/common/ico_joinroom02.png);
}

.ico-call01{
    width: 26px;
    height: 22px;
    margin-right: 10px;
    background-image: url(../images/common/ico_call01.png);
    background-size: contain;
}

.ico-member01{
    width: 100px;
    height: 100px;
    background-image: url(../images/common/ico_member01.png);}

.ico-member02{
    width: 100px;
    height: 100px;
    background-image: url(../images/common/ico_member02.png);}

.ico-error01 {
    width: 413px;
    height: 328px;
    background-image: url(../images/common/ico_error01.png);
    background-position: center;
}

.ico-arw01 {
    width: 18px;
    height: 11px;
    background-image: url(../images/common/ico_arw01.png);
    background-position: center;
}

.ico-qna01{
    width: 34px;
    height: 34px;
    background-image: url(../images/common/ico_qna01.png);
    background-size: contain;}

.ico-qna02{
    width: 34px;
    height: 34px;
    background-image: url(../images/common/ico_qna02.png);
    background-size: contain;}

.ico-rule01{
    width: 87px;
    height: 87px;
    background-image: url(../images/common/ico_rule01.png);
    background-size: contain;}

.ico-ref01{
    width: 26px;
    height: 26px;
    background-image: url(../images/common/ico_ref01.png);
    background-size: contain;}

.ico-contact01{
    width: 60px;
    height: 50px;
    background-image: url(../images/common/ico_contact01.png);
    background-size: contain;}
   
.ico-word{
	width:30px;
	height:30px;
	background-image:url(../images/common/ico_word.png);
	background-size:contain;}
	
.ico-pdf{
	width:30px;
	height:30px;
	background-image:url(../images/common/ico_pdf.png);
	background-size:contain;}
	
.ico-excel{
	width:30px;
	height:30px;
	background-image:url(../images/common/ico_excel.png);
    background-size:contain;}
    
.ico-close03{
    width: 50px;
    height: 50px;
    background-image: url(../images/common/ico_close03.png);
    background-size: contain;
}

/* Bullets */

.bul-circle1 {
    width: 12px;
    height: 12px;
    background-image: url(../images/common/bul_circle01.png);
}

.bul-circle1.primary {
    background-position: 0 0;
}

.bul-circle1.dark {
    background-position: -12px 0;
}

.bul-circle1.white {
    background-position: -24px 0;
}

.bul-circle1.gray {
    background-position: -36px 0;
}

/* Arrows */

.arw-tooltip1 {
    width: 6px;
    height: 10px;
    background-image: url(../images/common/arw_tooltip01.png);
}

.arw-tooltip1.primary {
    background-position: 0 0;
}

.arw-tooltip1.dark {
    background-position: -6px 0;
}

.arw-tooltip1.white {
    background-position: -12px 0;
}

.arw-tooltip1.gray {
    background-position: -18px 0;
}

.arw-select1 {
    width: 11px;
    height: 7px;
    background-image: url(../images/common/arw_select01.png);
}

.arw-select1.primary {
    background-position: 0 0;
}

.arw-select1.dark {
    background-position: -11px 0;
}

.arw-select1.white {
    background-position: -22px 0;
}

.arw-select1.gray {
    background-position: -33px 0;
}

.arw-more1 {
    width: 6px;
    height: 10px;
    background-image: url(../images/common/arw_more01.png);
    background-size: 24px 10px;
}

.arw-more1.primary {
    background-position: 0 0;
}

.arw-more1.dark {
    background-position: -6px 0;
}

.arw-more1.white {
    background-position: -12px 0;
}

.arw-more1.gray {
    background-position: -18px 0;
}

.arw-more2-prev {
    width: 16px;
    height: 26px;
    display: inline-block;
    background-image: url(../images/common/arw_more02_prev.png);
    background-size: auto;
    background-position: 16px 0;
}

.arw-more2-prev.gray {
    background-position: 0 0;
}

.arw-more2-next {
    width: 16px;
    height: 26px;
    display: inline-block;
    background-image: url(../images/common/arw_more02_next.png);
    background-size: auto;
}

.arw-more2-next.gray {
    background-position: 16px 0;
}

.arw-board1-first {
    width: 13px;
    height: 14px;
    background-image: url(../images/common/arw_board01_first.png);
}

.arw-board1-first.primary {
    background-position: 0 0;
}

.arw-board1-first.dark {
    background-position: -13px 0;
}

.arw-board1-first.white {
    background-position: -26px 0;
}

.arw-board1-first.gray {
    background-position: -39px 0;
}

.arw-board1-last {
    width: 13px;
    height: 14px;
    background-image: url(../images/common/arw_board01_last.png);
}

.arw-board1-last.primary {
    background-position: 0 0;
}

.arw-board1-last.dark {
    background-position: -13px 0;
}

.arw-board1-last.white {
    background-position: -26px 0;
}

.arw-board1-last.gray {
    background-position: -39px 0;
}

.arw-board1-next {
    width: 8px;
    height: 14px;
    background-image: url(../images/common/arw_board01_next.png);
}

.arw-board1-next.primary {
    background-position: 0 0;
}

.arw-board1-next.dark {
    background-position: -8px 0;
}

.arw-board1-next.white {
    background-position: -16px 0;
}

.arw-board1-next.gray {
    background-position: -24px 0;
}

.arw-board1-prev {
    width: 8px;
    height: 14px;
    background-image: url(../images/common/arw_board01_prev.png);
}

.arw-board1-prev.primary {
    background-position: 0 0;
}

.arw-board1-prev.dark {
    background-position: -8px 0;
}

.arw-board1-prev.white {
    background-position: -16px 0;
}

.arw-board1-prev.gray {
    background-position: -24px 0;
}

.arw-slide1-prev {
    width: 23px;
    height: 40px;
    background-image: url(../images/common/arw_slide01_prev.png);
}

.arw-slide1-prev.primary {
    background-position: 0 0;
}

.arw-slide1-prev.dark {
    background-position: -23px 0;
}

.arw-slide1-prev.white {
    background-position: -46px 0;
}

.arw-slide1-prev.gray {
    background-position: -69px 0;
}

.arw-slide1-next {
    width: 23px;
    height: 40px;
    background-image: url(../images/common/arw_slide01_next.png);
}

.arw-slide1-next.primary {
    background-position: 0 0;
}

.arw-slide1-next.dark {
    background-position: -23px 0;
}

.arw-slide1-next.white {
    background-position: -46px 0;
}

.arw-slide1-next.gray {
    background-position: -69px 0;
}

.arw-slide2-prev {
    width: 9px;
    height: 16px;
    background-image: url(../images/common/arw_slide02_prev.png);
}

.arw-slide2-prev.primary {
    background-position: 0 0;
}

.arw-slide2-prev.dark {
    background-position: -9px 0;
}

.arw-slide2-prev.white {
    background-position: -18px 0;
}

.arw-slide2-prev.gray {
    background-position: -27px 0;
}

.arw-slide2-next {
    width: 9px;
    height: 16px;
    background-image: url(../images/common/arw_slide02_next.png);
}

.arw-slide2-next.primary {
    background-position: 0 0;
}

.arw-slide2-next.dark {
    background-position: -9px 0;
}

.arw-slide2-next.white {
    background-position: -18px 0;
}

.arw-slide2-next.gray {
    background-position: -27px 0;
}

.arw-toggle1 {
    width: 12px;
    height: 8px;
    background-image: url(../images/common/arw_toggle01.png);
}

.arw-toggle1.primary {
    background-position: 0 0;
}

.arw-toggle1.dark {
    background-position: -12px 0;
}

.arw-toggle1.white {
    background-position: -24px 0;
}

.arw-toggle1.gray {
    background-position: -36px 0;
}

.arw-breadcrumb1 {
    width: 6px;
    height: 10px;
    background-image: url(../images/common/arw_breadcrumb01.png);
}

.arw-breadcrumb1.primary {
    background-position: 0 0;
}

.arw-breadcrumb1.dark {
    background-position: -6px 0;
}

.arw-breadcrumb1.white {
    background-position: -12px 0;
}

.arw-breadcrumb1.gray {
    background-position: -18px 0;
}

/* Ratings */

.rat-star01-0 {
    width: 75px;
    height: 13px;
    background-image: url(../images/common/rat_star01_0.png);
}

.rat-star01-1 {
    width: 75px;
    height: 13px;
    background-image: url(../images/common/rat_star01_1.png);
}

.rat-star01-2 {
    width: 75px;
    height: 13px;
    background-image: url(../images/common/rat_star01_2.png);
}

.rat-star01-3 {
    width: 75px;
    height: 13px;
    background-image: url(../images/common/rat_star01_3.png);
}

.rat-star01-4 {
    width: 75px;
    height: 13px;
    background-image: url(../images/common/rat_star01_4.png);
}

.rat-star01-5 {
    width: 75px;
    height: 13px;
    background-image: url(../images/common/rat_star01_5.png);
}

.rat-star02-0 {
    width: 139px;
    height: 25px;
    background-image: url(../images/common/rat_star01_0.png);
}

.rat-star02-5 {
    width: 139px;
    height: 25px;
    background-image: url(../images/common/rat_star01_5.png);
}

/*-------------------------------------------------------------------
	## Label
-------------------------------------------------------------------*/

/* Default */

.label {
    display: inline-block;
}

/* Design */

.label.demo1 {
    padding: 1px 8px 2px;
    line-height: 21px;
    background-color: #444;
    color: #fff;
    border-radius: 3px;
    text-align: center;
    vertical-align: middle;
}

.label.demo1 {
    min-width: 50px;
    max-width: 100px;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.label.demo1.primary {
    background: #2496ee;
}

.label.demo2 {
    padding: 0px 7px 1px;
    line-height: 21px;
    background: transparent;
    border: 1px solid #444;
    color: #444;
    border-radius: 3px;
    text-align: center;
    vertical-align: middle;
}

.label.demo2.primary {
    border: 1px solid #2496ee;
    color: #2496ee;
}

/*-------------------------------------------------------------------
	## Badge
-------------------------------------------------------------------*/

/* Default */

.badge {
    display: inline-block;
}

.badge-group {
    position: absolute;
}

/* Styles */

.badge-basic {
    width: 24px;
    height: 24px;
    padding-bottom: 1px;
    line-height: 21px;
    border: 1px solid transparent;
    background-color: #333;
    color: #fff;
    text-align: center;
}

.badge-basic.badge-outline {
    color: #333;
    border-color: #333;
    background-color: #fff;
}

/*-------------------------------------------------------------------
	@Bullets
-------------------------------------------------------------------*/

/* Default */

.bul>li {
    position: relative;
    line-height: 1.6;
    padding-left: 20px;
}

.bul>li::before {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
}

.bul>p {
    position: relative;
    line-height: 1.6;
    padding-left: 20px;
}

.bul>p::before {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
}

/* 모양 */

/* 기호 */
.bul.dash>p, .bul.dash>li{padding-left:15px;}
.bul.dash > li:before {
    content: '-';
}
.bul.dash>p::before {
    content: '-';
}

.bul.bill>p::before, .bul.bill>li::before {
    content: '※';
}
.bul.star > li:before {
    content: '*';
}
.bul.star>p::before {
    content: '*';
}
.bul.dot>p, .bul.dot>li{padding-left:15px;}
.bul.dot > li:before {
    content: '·';
}
.bul.dot>p::before, .bul.dot li::before {
    content: '·';
}

/* 키보드문자 말고 특수문자 사용 */

/* 숫자 */

.bul.num1 {
    counter-reset: num1;
}

.bul.num1>li:before {
    counter-increment: num1;
    content: counter(num1, decimal) ".";
}

/* 1. */

.bul.num2 {
    counter-reset: num2;
}

.bul.num1>li:nth-child(n+10){
	padding-left:25px;
}


.bul.num2>li:before {
    counter-increment: num2;
    content: "(" counter(num2, decimal) ")";
}

/* (1) */

.bul.num3 {
    counter-reset: num3;
}

.bul.num3>li:before {
    counter-increment: num3;
    content: counter(num3, decimal) ")";
}

/* 1) */

.bul.num4>li:nth-child(1)::before {
    content: '①';
}

.bul.num4>li:nth-child(2)::before {
    content: '②';
}

.bul.num4>li:nth-child(3)::before {
    content: '③';
}

.bul.num4>li:nth-child(4)::before {
    content: '④';
}

.bul.num4>li:nth-child(5)::before {
    content: '⑤';
}

.bul.num4>li:nth-child(6)::before {
    content: '⑥';
}

.bul.num4>li:nth-child(7)::before {
    content: '⑦';
}

.bul.num4>li:nth-child(8)::before {
    content: '⑧';
}

.bul.num4>li:nth-child(9)::before {
    content: '⑨';
}

.bul.num4>li:nth-child(10)::before {
    content: '⑩';
}

/* 영문 */

.bul.eng1 {
    counter-reset: eng1;
}

.bul.eng1>li::before {
    counter-increment: eng1;
    content: counter(eng1, upper-alpha) ".";
}

/* A. */

.bul.eng2 {
    counter-reset: eng2;
}

.bul.eng2>li::before {
    counter-increment: eng2;
    content: "(" counter(eng2, lower-alpha) ")";
}

/* (a) */

.bul.eng3 {
    counter-reset: eng3;
}

.bul.eng3>li::before {
    counter-increment: eng3;
    content: counter(eng3, lower-alpha) ")";
}

/* a) */

.bul.eng4>li:nth-child(1)::before {
    content: 'ⓐ';
}

.bul.eng4>li:nth-child(2)::before {
    content: 'ⓑ';
}

.bul.eng4>li:nth-child(3)::before {
    content: 'ⓒ';
}

.bul.eng4>li:nth-child(4)::before {
    content: 'ⓓ';
}

.bul.eng4>li:nth-child(5)::before {
    content: 'ⓔ';
}

.bul.eng4>li:nth-child(6)::before {
    content: 'ⓕ';
}

.bul.eng4>li:nth-child(7)::before {
    content: 'ⓖ';
}

.bul.eng4>li:nth-child(8)::before {
    content: 'ⓗ';
}

.bul.eng4>li:nth-child(9)::before {
    content: 'ⓘ';
}

.bul.eng4>li:nth-child(10)::before {
    content: 'ⓙ';
}

/* 한글 */

.bul.kor1>li:nth-child(1)::before {
    content: '가.';
}

.bul.kor1>li:nth-child(2)::before {
    content: '나.';
}

.bul.kor1>li:nth-child(3)::before {
    content: '다.';
}

.bul.kor1>li:nth-child(4)::before {
    content: '라.';
}

.bul.kor1>li:nth-child(5)::before {
    content: '마.';
}

.bul.kor1>li:nth-child(6)::before {
    content: '바.';
}

.bul.kor1>li:nth-child(7)::before {
    content: '사.';
}

.bul.kor1>li:nth-child(8)::before {
    content: '아.';
}

.bul.kor1>li:nth-child(9)::before {
    content: '자.';
}

.bul.kor1>li:nth-child(10)::before {
    content: '차.';
}

.bul.kor1>li:nth-child(11)::before {
    content: '카.';
}

.bul.kor1>li:nth-child(12)::before {
    content: '타.';
}

.bul.kor1>li:nth-child(13)::before {
    content: '파.';
}

.bul.kor1>li:nth-child(14)::before {
    content: '하.';
}

.bul.kor2>li:nth-child(1)::before {
    content: '(가)';
}

.bul.kor2>li:nth-child(2)::before {
    content: '(나)';
}

.bul.kor2>li:nth-child(3)::before {
    content: '(다)';
}

.bul.kor2>li:nth-child(4)::before {
    content: '(라)';
}

.bul.kor2>li:nth-child(5)::before {
    content: '(마)';
}

.bul.kor2>li:nth-child(6)::before {
    content: '(바)';
}

.bul.kor2>li:nth-child(7)::before {
    content: '(사)';
}

.bul.kor2>li:nth-child(8)::before {
    content: '(아)';
}

.bul.kor2>li:nth-child(9)::before {
    content: '(자)';
}

.bul.kor2>li:nth-child(10)::before {
    content: '(차)';
}

.bul.kor2>li:nth-child(11)::before {
    content: '(카)';
}

.bul.kor2>li:nth-child(12)::before {
    content: '(타)';
}

.bul.kor2>li:nth-child(13)::before {
    content: '(파)';
}

.bul.kor2>li:nth-child(14)::before {
    content: '(하)';
}

.bul.kor3>li:nth-child(1)::before {
    content: '가)';
}

.bul.kor3>li:nth-child(2)::before {
    content: '나)';
}

.bul.kor3>li:nth-child(3)::before {
    content: '다)';
}

.bul.kor3>li:nth-child(4)::before {
    content: '라)';
}

.bul.kor3>li:nth-child(5)::before {
    content: '마)';
}

.bul.kor3>li:nth-child(6)::before {
    content: '바)';
}

.bul.kor3>li:nth-child(7)::before {
    content: '사)';
}

.bul.kor3>li:nth-child(8)::before {
    content: '아)';
}

.bul.kor3>li:nth-child(9)::before {
    content: '자)';
}

.bul.kor3>li:nth-child(10)::before {
    content: '차)';
}

.bul.kor3>li:nth-child(11)::before {
    content: '카)';
}

.bul.kor3>li:nth-child(12)::before {
    content: '타)';
}

.bul.kor3>li:nth-child(13)::before {
    content: '파)';
}

.bul.kor3>li:nth-child(14)::before {
    content: '하)';
}

/*-------------------------------------------------------------------
	## Breadcrumb
----------------------------------------------------------------- --*/

/* Style */

.breadcrumb {
    position: relative;
    display: inline-block;
    margin: 0 -10px;
    overflow: hidden;
    line-height: 1;
}

.breadcrumb .item {
    position: relative;
    float: left;
    padding: 0 10px 0 16px;
    vertical-align: middle;
}

.breadcrumb .item.is-current {
    color: #2496ee;
}

.breadcrumb .arw {
    margin-top: 1px;
}

/* Select */

.breadcrumb-select .dropdown {
    width: 160px;
}

.breadcrumb-select .dropdown+.dropdown {
    margin-left: 5px;
}

/*-------------------------------------------------------------------
	## List
----------------------------------------------------------------- --*/

/* Style1 */

.list.demo1 {
    border: 1px solid #999;
    border-width: 1px 0;
}

.list.demo1 .item {
    padding: 5px 10px;
    min-height: 40px;
    line-height: 30px;
    border-top: 1px solid #ddd;
}

.list.demo1 .item.header {
    background-color: #f8f8f8;
}

.list.demo1 .item.footer {
    background-color: #f8f8f8;
}

.list.demo1 .item:first-child {
    border-top-color: transparent;
}

.list.demo1 .item .item-link {
    position: relative;
    display: block;
}

.list.demo1 .item .item-link.has-arw {
    padding-right: 20px;
}

.list.demo1 .item .arw-more1 {
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.explain-header+.list.demo1 {
    margin-top: 10px;
}

.list.demo1+.explain-footer {
    margin-top: 10px;
}

/* Style2 */

.list.demo2 {
    border: 1px solid #999;
    border-width: 1px 0;
}

.list.demo2 .item {
    padding: 5px 10px;
    min-height: 40px;
    line-height: 30px;
    border-top: 1px solid transparent;
}

.list.demo2 .item .item-link {
    position: relative;
    display: block;
}

.list.demo2 .item .arw-more1 {
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

/* Style3 */

.list.demo3 {
    border: 1px solid #999;
}

.list.demo3 .item {
    padding: 5px 10px;
    min-height: 40px;
    line-height: 30px;
    border-top: 1px solid transparent;
}

.list.demo3 .item .item-link {
    position: relative;
    display: block;
}

.list.demo3 .item .arw-more1 {
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

/*-------------------------------------------------------------------
	## thumbnail
-------------------------------------------------------------------*/

/* Common Layout */

.thumbnail {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden;
    height: 100%;
}

.thumbnail-single {
    text-align: center;
}

.thumbnail-vertical {
    text-align: center;
}

.thumbnail-vertical .thumbnail-cont {
    padding: 10px;
}

.thumbnail-horizontal .thumbnail-img {
    float: left;
}

.thumbnail-horizontal .thumbnail-cont {
    padding-left: 170px;
}

/* Common Detail */

.thumbnail-img {
    position: relative;
    overflow: hidden;
    width: 150px;
    height: 150px;
    margin: auto;
    text-align: center;
}

.thumbnail-cont {
    position: relative;
}

.thumbnail-cont .define {
    line-height: 20px;
}

.thumbnail-cont .define-tit {
    font-family: 'NSB';
}

.thumbnail-cont .define-tit+.define-txt {
    margin-top: 10px;
}

/* Common List */

.thumbnail-list {
    overflow: hidden;
}

.thumbnail-list .thumbnail-img {
    width: 100%;
}

.thumbnail-list .thumbnail-img.size-min img {
    min-width: 100%;
    min-height: 100%;
}

.thumbnail-list .thumbnail-img.size-max img {
    max-width: 100%;
    max-height: 100%;
}

/* Content - Sample */

.thumbnail-sample .row {
    margin: -10px -35px;
}

.thumbnail-sample .row .col {
    padding: 10px 35px;
}

.thumbnail-sample .thumbnail-img {
    height: 100px;
}

/* Content - Sample2 */

.thumbnail-sample2 .row {
    margin: -10px -60px;
}

.thumbnail-sample2 .row .col {
    padding: 10px 60px;
}

.thumbnail-sample2 .thumbnail-img {
    height: 150px;
}

/*-------------------------------------------------------------------
	## Box
----------------------------------------------------------------- --*/

/* Default */

.box {
    position: relative;
}

.box-inner,
.box-head,
.box-body,
.box-foot {
    position: relative;
    z-index: 2;
}

/* Design */

.box.demo1 {
    border: 1px solid #ddd;
    border-radius: 3px;
    line-height: 20px;
}

.box.demo1 .box-head {
    padding: 10px 20px;
    border-bottom: 1px solid #ddd;
}

.box.demo1 .box-head .btn-ico {
    position: absolute;
    right: 0;
    bottom: 0;
    right: 0;
    z-index: 3;
}

.box.demo1 .box-body {
    padding: 10px 20px;
}

.box.demo1 .box-foot {
    padding: 10px 20px;
    border-top: 1px solid #ddd;
}

/*-------------------------------------------------------------------
	## Card
----------------------------------------------------------------- --*/

/* Default */

.card {
    position: relative;
}

.card-inner,
.card-header,
.card-body,
.card-foot {
    position: relative;
    z-index: 2;
}

/* Design */

.card.demo1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 280px;
    padding: 0 15px;
    border: 1px solid #ddd;
    border-radius: 3px;
    line-height: 20px;
}

.card.demo1 .card-thumb {
    width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
}

.card.demo1 .card-body {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
}

.card.demo1 .card-head+.card-body {
    margin-top: 15px;
}

.card.demo1 .card-foot {
    margin-top: 10px;
}

.card.demo1 .tit {
    font-weight: 500;
    font-size: 16px;
    text-overflow: ellipsis;
    word-wrap: break-word;
}

.card.type-img{
    border: 0;
}

.card.type-img .card-inner{
    position: absolute;
    display: block;
    width: 70%;
    background: rgba(255, 255, 255, 0.8);
    left: 15px;
    bottom: 7%;
    z-index: 3;
    padding: 30px;
}

.card.type-img .thumb{
    display: block;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    top: 0;
    background: #ededed;
}

.card.type-img .thumb img {
    display: inline-block;
    position: absolute;
    width: auto;
    overflow: hidden;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);            
}

.card.type-img .card-head, .card.type-img .card-body, .card.type-img .card-foot{
    position: relative;
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    z-index: 2;
}

.card .more{display: inline-block;background: #2d6492;color: #fff;font-size: 12px;padding: 5px 15px;text-transform: uppercase;}

/*-------------------------------------------------------------------
	## Panel
----------------------------------------------------------------- --*/

/* Default */

.panel {
    position: relative;
}

.panel-inner,
.panel-head,
.panel-body,
.panel-foot {
    position: relative;
    z-index: 2;
}

/* Design */

.panel.demo1 {
    margin-top: 30px;
}

.panel.demo1:first-child {
    margin-top: 0;
}

.panel.demo1 .panel-head {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
    font-size: 16px;
}

.panel.demo1 .panel-body {
    padding: 0 0;
}

.panel.demo1 .panel-foot {
    margin-top: 20px;
    padding-top: 5px;
    font-size: 12px;
    border-top: 1px solid #ddd;
    color: #666;
}

/*-------------------------------------------------------------------
	## Table
-------------------------------------------------------------------*/

/* Default */

.tbl-group {
    overflow: hidden;
    clear: both;
}

.tbl {
    overflow: hidden;
    margin: 0 -1px;
}

.tbl>table {
    width: 100%;
    margin: -1px 0;
    table-layout: fixed;
    border-collapse: collapse;
    border: 0;
    border-spacing: 0;
}

/* 정렬기준 */

.tbl-centered>table>tbody>tr>th,
.tbl-centered>table>tbody>tr>td {
    text-align: center;
}

.tbl-lefted>table>tbody>tr>th,
.tbl-lefted>table>tbody>tr>td {
    text-align: left;
}

.tbl-righted>table>tbody>tr>th,
.tbl-righted>table>tbody>tr>td {
    text-align: right;
}

/* Basic Type */

.tbl.demo1 {
    overflow: hidden;
    margin: 0 -1px;
    border: 1px solid #444;
    border-width: 2px 0 1px 0;
}

.tbl.demo1 table {
    margin: -1px 0;
}

.tbl.demo1 th,
.tbl.demo1 td {
    padding: 6px 15px;
    text-align: left;
    border: 1px solid #ddd;
}

.tbl.demo1 thead th {
    background-color: #e4e8f3;
    text-align: center;
    border-bottom-color: #444;
}

.tbl.demo1 tbody th {
    background-color: #e4e8f3;
}

.tbl.demo1 .th-depth2 {
    background-color: #f1f3f9;
}

/* Form Type */

.tbl-form th,
.tbl-form td {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 10px;
    text-align: left;
}

.tbl-form th {
    background-color: #f1f3f9;
}

/* List Type */

.tbl-list {
    border-top: 2px solid #444;
    border-bottom: 1px solid #444;
}

.tbl-list th,
.tbl-list td {
    padding: 5px 10px;
    line-height: 18px;
    text-align: center;
}

.tbl-list th {
    height: 40px;
    border-bottom: 1px solid #444;
    font-family: 'NSB';
}

.tbl-list td {
    height: 40px;
    border-top: 1px solid #ddd;
}

.tbl-list strong{font-weight: 500 !important;}

.tbl-list thead+tbody tr:first-child td {
    border-top: 0;
}

.tbl-list .fixed-data td {
    background-color: #fafafa;
}

/* View Type */

.tbl-view {
    border-top: 2px solid #444;
    border-bottom: 1px solid #444;
}

.tbl-view th,
.tbl-view td {
    padding: 10px 20px;
    text-align: left;
    line-height: 18px;
    border-top: 1px solid #ddd;
}

.tbl-view tr:first-child th,
.tbl-view tr:first-child td {
    border-top: 0;
}

.tbl-view th {
    background-color: #f0f0f0;
}

.tbl-view td {
    color: #444;
}

/* Pager Type */

.tbl-pager {
    border-top: 2px solid #444;
    border-bottom: 1px solid #444;
}

.tbl-pager th,
.tbl-pager td {
    padding: 10px 20px;
    text-align: left;
    line-height: 18px;
    border-top: 1px solid #ddd;
}

.tbl-pager tr:first-child th,
.tbl-pager tr:first-child td {
    border-top: 0;
}

.tbl-pager td {
    color: #444;
}

/* Etc Type */

/* Header,Footer */

.tbl-header::after {
    content: '';
    clear: both;
    display: block;
}

.tbl-footer::after {
    content: '';
    clear: both;
    display: block;
}

.tbl-header {
    margin-bottom: 10px;
}

.tbl-footer {
    margin-top: 10px;
}

/*-------------------------------------------------------------------
	## paging
-------------------------------------------------------------------*/

/* Common */

.paging {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
}

.paging .btn-group,
.paging .num-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.paging .inner{display: flex; padding: 2rem 0;}

/* Design */

.paging-basic .btn {
    min-width: 30px;
    height: 30px;
    padding: 0 5px 1px;
    line-height: 27px;
    border: 1px solid #ddd;
}

.paging-basic .num-group {
    margin: 0 16px;
}

.paging-basic .page-group .btn+.btn,
.paging-basic .num-group li+li {
    margin-left: 4px;
}

.paging-basic .num-group .btn[aria-current=true] {
    color: #2496ee;
    border: 1px solid #2496ee;
}

.paging-basic .page-group .btn:disabled {
    opacity: 0.5;
}

/*-------------------------------------------------------------------
	## Board
-------------------------------------------------------------------*/

/* board-wrap */

/* board-search */

.board-search {
    border-bottom: 1px solid #eee;
    text-align: center;
}

.board-search>.inner {
    border: 1px solid #ccc;
    padding: 20px;
}

/* board-list */

.board-search+.board-list {
    margin-top: 30px;
}

.paging+.btn-wrap {
    position: relative;
    z-index: 1;
    margin-top: -35px;
    text-align: right;
}

/* 게시판상세 */

.board-view .view-header .subject-wrap {
    position: relative;
    padding: 10px 50px;
    border-top: 2px solid #444;
    border-bottom: 1px solid #444;
}

.board-view .view-header .subject-wrap .subject {
    font-size: 23px;
    font-family: 'NSB';
    line-height: 30px;
    text-align: center;
}

.board-view .view-header .subject-wrap .btn-pager2 {
    position: absolute;
    top: 50%;
    margin-top: -10px;
}

.board-view .view-header .subject-wrap .btn-pager2.prev {
    left: 20px;
}

.board-view .view-header .subject-wrap .btn-pager2.next {
    right: 20px;
}

.board-view .view-header .define-wrap {
    border-bottom: 1px solid #444;
}

.board-view .view-header .define-wrap .define {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-top: 1px solid #ddd;
}

.board-view .view-header .define-wrap .define .tit,
.board-view .view-header .define-wrap .define .txt {
    display: table-cell;
    padding: 10px 20px;
    vertical-align: middle;
}

.board-view .view-header .define-wrap .define .tit {
    width: 120px;
    font-family: 'NSB';
}

.board-view .view-header .define-wrap .define .txt {
    color: #666;
}

.board-view .view-header .define-wrap .define:first-child {
    border-top: 0;
}

.board-view .view-content {
    padding: 20px;
    line-height: 24px;
    border-bottom: 1px solid #444;
}

.board-view .btn-wrap {
    margin-top: 30px;
}

/* 이전글다음글 */

.board-pager {
    margin-top: 50px;
    border-top: 1px solid #444;
    border-bottom: 1px solid #444;
}

.board-pager .define {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.board-pager .define .tit,
.board-pager .define .txt {
    display: table-cell;
    padding: 10px 20px;
    vertical-align: middle;
}

.board-pager .define .tit {
    width: 120px;
    font-family: 'NSB';
}

.board-pager .define .txt {
    color: #666;
}

/* board-write */

/* paging */

/* btn-wrap */

/*-------------------------------------------------------------------
	## Step
-------------------------------------------------------------------*/

/* Default */

.step {
    text-align: center;
}

.step .step-list {
    display: table;
    position: relative;
    margin: auto;
}

.step .step-item {
    display: table-cell;
    position: relative;
    z-index: 1;
}

.step .step-label {
    position: relative;
}

/* Design - Style1 */

.step.demo1 .step-item {
    padding: 0 30px;
}

.step.demo1 .step-item .step-label {
    display: inline-block;
    width: 50px;
    height: 50px;
    padding-bottom: 1px;
    line-height: 49px;
    border-radius: 50%;
    background-color: #eee;
}

.step.demo1 .step-item.is-on .step-label {
    border: 1px solid #2496ee;
    background-color: #fff;
    color: #2496ee;
    line-height: 47px;
}

.step.demo1 .step-item.is-current .step-label {
    background-color: #2496ee;
    color: #fff;
}

/* Design - Style2 */

.step.demo2 .step-item {
    padding: 0 30px;
}

.step.demo2 .step-item .step-label {
    display: block;
    position: relative;
    width: 50px;
    height: 50px;
    padding-bottom: 1px;
    line-height: 49px;
    border-radius: 50%;
    background-color: #eee;
}

.step.demo2 .step-item .step-text {
    display: block;
    margin-top: 10px;
    color: #999;
}

.step.demo2 .step-item .step-label .ico-check {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 3px solid #999;
    border-width: 3px 3px 0 0;
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    -ms-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg);
}

.step.demo2 .step-item.is-on .step-label {
    border: 1px solid #2496ee;
    background-color: #fff;
    color: #2496ee;
    line-height: 47px;
}

.step.demo2 .step-item.is-on .step-text {
    color: #999;
}

.step.demo2 .step-item.is-on .step-label .ico-check {
    width: 18px;
    border-color: #2496ee;
    -webkit-transform: translate(-50%, -50%) rotate(135deg);
    -ms-transform: translate(-50%, -50%) rotate(135deg);
    transform: translate(-50%, -50%) rotate(135deg);
}

.step.demo2 .step-item.is-current .step-label {
    background-color: #2496ee;
    color: #fff;
}

.step.demo2 .step-item.is-current .step-text {
    color: #2496ee;
}

.step.demo2 .step-item.is-current .step-label .ico-check {
    width: 18px;
    border-color: #fff;
    -webkit-transform: translate(-50%, -50%) rotate(135deg);
    -ms-transform: translate(-50%, -50%) rotate(135deg);
    transform: translate(-50%, -50%) rotate(135deg);
}

/* Design - Style3 */

.step.demo3 .step-list {
    width: 100%;
}

.step.demo3 .step-item {
    height: 50px;
    padding-bottom: 1px;
    line-height: 47px;
    border: 1px solid #ccc;
    background-color: #eee;
    text-align: center;
}

.step.demo3 .step-item.is-on {
    border: 1px solid #2496ee;
    background-color: #fff;
    color: #2496ee;
}

.step.demo3 .step-item.is-current {
    border: 1px solid #2496ee;
    background-color: #2496ee;
    color: #fff;
}

.step.demo3 .step-item+.step-item {
    border-left-width: 0;
}

.step.demo3 .step-item.is-on+.is-on {
    border-left: 0;
}

/* Design - Style4 */

.step.demo4 .step-list:after {
    content: '';
    position: absolute;
    left: 0;
    top: 24px;
    width: 100%;
    height: 2px;
    background-color: #eee;
}

.step.demo4 .step-item {
    width: 25%;
}

.step.demo4 .step-item .step-label {
    display: block;
    position: relative;
    width: 50px;
    height: 50px;
    padding-bottom: 1px;
    line-height: 49px;
    border-radius: 50%;
    background-color: #eee;
    text-align: center;
}

.step.demo4 .step-item .step-label .ico-check {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 3px solid #999;
    border-width: 3px 3px 0 0;
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    -ms-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg);
}

.step.demo4 .step-item.is-on .step-label {
    border: 1px solid #2496ee;
    background-color: #fff;
    color: #2496ee;
    line-height: 47px;
}

.step.demo4 .step-item.is-on .step-label .ico-check {
    width: 18px;
    border-color: #2496ee;
    -webkit-transform: translate(-50%, -50%) rotate(135deg);
    -ms-transform: translate(-50%, -50%) rotate(135deg);
    transform: translate(-50%, -50%) rotate(135deg);
}

.step.demo4 .step-item.is-current .step-label {
    background-color: #2496ee;
    color: #fff;
}

.step.demo4 .step-item.is-current .step-label .ico-check {
    width: 18px;
    border-color: #fff;
    -webkit-transform: translate(-50%, -50%) rotate(135deg);
    -ms-transform: translate(-50%, -50%) rotate(135deg);
    transform: translate(-50%, -50%) rotate(135deg);
}

/*-------------------------------------------------------------------
	## Tabs
-------------------------------------------------------------------*/

/* Default */

.tab-wrap {
    position: relative;
}

.tab-content {
    display: none;
    padding: 10px;
}

.tab-content.is-visible {
    display: block;
}

/* Design Basic */

.tab-nav.demo1 .tab-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background: #eee;
    border-bottom: 1px solid #2496ee;
}

.tab-nav.demo1 .tab .btn {
    position: relative;
    padding: 10px;
    background: #fff;
    color: #222;
    z-index: 0;
}

.tab-nav.demo1 .tab.is-selected .btn {
    background: #2496ee;
    color: #fff;
}

.tab-nav.demo1 .tab.is-selected .btn:focus {
    -webkit-box-shadow: 0 0 0 3px rgba(36, 150, 238, 0.5);
    box-shadow: 0 0 0 3px rgba(36, 150, 238, 0.5);
    z-index: 1;
}

/*-------------------------------------------------------------------
	## Collapse
-------------------------------------------------------------------*/

.collapse {
    display: none;
}

.collapse.is-active {
    display: block;
}

/*-------------------------------------------------------------------
	## acco
-------------------------------------------------------------------*/

/* Default */

.acco-content {
    position: relative;
    display: none;
}

/* Common */
.acco-title{cursor: pointer;}
.acco-title,
.acco-toggle,
.acco-label {
    display: block;
    position: relative;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.acco-toggle .arw {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.acco-item.is-active .acco-toggle .arw {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

/* Design Basic */

.acco.demo1 {
    overflow: hidden;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.acco.demo1 .acco-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    padding: 20px 20px;
    color: #222;
    text-align: left;
}

.acco.demo1 .acco-title .acco-tit {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

.acco.demo1 .acco-toggle {
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.acco.demo1 .acco-toggle:disabled {
    color: #999;
}

.acco.demo1 .acco-content {
    padding: 20px 20px;
    background-color: #ffffff;
}

.acco.demo1 .acco-item+.acco-item .acco-title {
    border-top: 1px solid #ddd;    
}

.acco.demo1 .acco-item.is-active .acco-title {
    background-color: #f8f8f8;
}

.acco.demo1 .acco-item.is-active .acco-toggle {
    color: #222;
}

/* ------------------------------------------------------------------------------------------
	## Expand
------------------------------------------------------------------------------------------ */

/* default */

.expand-toggle .arw {
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.expand-toggle.is-expanded .arw {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.expand-body,
.expand-item {
    display: none;
}

.expand-item.is-visible {
    display: block;
}

tr.expand-item.is-visible {
    display: table-row;
}

.expand-toggle {
    width: 40px;
    height: 40px;
}

/* ------------------------------------------------------------------------------------------
	## Tooltip
------------------------------------------------------------------------------------------ */

/* Default */

.tooltip-area {
    position: relative;
    display: inline-block;
}

.tooltip {
    visibility: hidden;
    position: absolute;
    top: 50%;
    left: 100%;
    opacity: 0;
    -webkit-transform: translate(10px, -50%);
    -ms-transform: translate(10px, -50%);
    transform: translate(10px, -50%);
    -webkit-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.tooltip.is-active {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

.tooltip .tooltip-inner {
    z-index: 10;
}

.tooltip,
.tooltip>.arw {
    position: absolute;
    z-index: 11;
}

/* Common - Directions */

.tooltip.top {
    left: 50%;
    bottom: 100%;
    margin-bottom: 10px;
}

.tooltip.right {
    left: 100%;
    top: 50%;
    margin-left: 10px;
}

.tooltip.bottom {
    left: 50%;
    top: 100%;
    margin-top: 10px;
}

.tooltip.left {
    right: 100%;
    top: 50%;
    margin-right: 10px;
}

.tooltip.top {
    -webkit-transform: translate(-50%, -10px);
    -ms-transform: translate(-50%, -10px);
    transform: translate(-50%, -10px);
}

.tooltip.bottom {
    -webkit-transform: translate(-50%, 10px);
    -ms-transform: translate(-50%, 10px);
    transform: translate(-50%, 10px);
}

.tooltip.right {
    -webkit-transform: translate(10px, -50%);
    -ms-transform: translate(10px, -50%);
    transform: translate(10px, -50%);
}

.tooltip.left {
    -webkit-transform: translate(-10px, -50%);
    -ms-transform: translate(-10px, -50%);
    transform: translate(-10px, -50%);
}

.tooltip.top>.arw {
    left: 50%;
    bottom: 3px;
}

.tooltip.right>.arw {
    left: 1px;
    top: 50%;
}

.tooltip.bottom>.arw {
    left: 50%;
    top: 3px;
}

.tooltip.left>.arw {
    right: 1px;
    top: 50%;
}

.tooltip.top>.arw {
    -ms-transform: translate(-50%, 100%) rotate(-90deg);
    transform: translate(-50%, 100%) rotate(-90deg);
    -webkit-transform: translate(-50%, 100%) rotate(-90deg);
}

.tooltip.bottom>.arw {
    -ms-transform: translate(-50%, -100%) rotate(90deg);
    transform: translate(-50%, -100%) rotate(90deg);
    -webkit-transform: translate(-50%, -100%) rotate(90deg);
}

.tooltip.right>.arw {
    -ms-transform: translate(-100%, -50%) rotate(0deg);
    transform: translate(-100%, -50%) rotate(0deg);
    -webkit-transform: translate(-100%, -50%) rotate(0deg);
}

.tooltip.left>.arw {
    -ms-transform: translate(100%, -50%) rotate(180deg);
    transform: translate(100%, -50%) rotate(180deg);
    -webkit-transform: translate(100%, -50%) rotate(180deg);
}

.tooltip.is-active {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

/* Design */

.tooltip.demo1 {
    width: 200px;
    -webkit-animation: tootlpBasic 0.3s;
    animation: tootlpBasic 0.3s;
}

.tooltip.demo1 .tooltip-inner {
    position: relative;
    padding: 10px 15px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
}

.tooltip.demo1 .tooltip-closer {
    position: absolute;
    right: 5px;
    top: 5px;
    width: 20px;
    height: 20px;
    overflow: hidden;
    border-radius: 50%;
}

.tooltip.demo1 .tooltip-closer::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    line-height: 18px;
    text-align: center;
    color: #999;
}

.tooltip.demo1 .tooltip-closer:before,
.tooltip.demo1 .tooltip-closer:after {
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1px;
    height: 13px;
    margin-top: -6px;
    background-color: #333;
    content: '';
}

.tooltip.demo1 .tooltip-closer:before {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.tooltip.demo1 .tooltip-closer:after {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/*-------------------------------------------------------------------
    @Drop
-------------------------------------------------------------------*/

/* Default */

.drop {
    display: inline-block;
    position: relative;
}

.drop-menu {
    position: absolute;
    left: 0;
    z-index: 10;
    width: 100%;
    background-color: #fff;
}

.drop-toggle .arw {
    -webkit-transition: -webkit-transform 0.2s ease;
    transition: -webkit-transform 0.2s ease;
    -o-transition: transform 0.2s ease;
    transition: transform 0.2s ease;
    transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}

.drop-toggle.is-active .arw {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

/* Direction */

.drop.down .drop-menu {
    top: 100%;
}

.drop.up .drop-menu {
    bottom: 100%;
}

/* Styles */

.drop.demo1 .drop-toggle:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.drop.demo1 .drop-toggle .arw {
    margin-left: 20px;
}

/*-------------------------------------------------------------------
	@Popup
-------------------------------------------------------------------*/

/* Popup Layout */

.popup-wrap {
    visibility: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: fixed;
    z-index: 1002;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 20px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.popup-wrap .popup {
    position: relative;
    z-index: 11;
    width: 100%;
    background-color: #fff;
    opacity: 0;
    -webkit-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.popup-wrap.is-active {
    visibility: visible;
}

.popup-wrap.is-active .popup {
    opacity: 1;
}
.popup-wrap.type-basic img{max-width: 100%;}

/* Popup Scroll */

.popup {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.popup .popup-body {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    overflow: auto;
}

.popup .popup-head,
.popup .popup-foot {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
}

/* Transition */

.popup-wrap.type-basic .popup {
    -webkit-transform: translate(0, 30px);
    -ms-transform: translate(0, 30px);
    transform: translate(0, 30px);
}

.popup-wrap.type-full {
    padding: 0;
}

.popup-wrap.type-full .popup {
    width: 100%;
    height: 100%;
    min-height: 100%;
    opacity: 1;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
}

.popup-wrap.type-select {
    padding: 0;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.popup-wrap.type-select .popup {
    width: 100%;
    -webkit-transform: translate(0, 100%);
    -ms-transform: translate(0, 100%);
    transform: translate(0, 100%);
}

.popup-wrap.type-alert .popup {
    -webkit-transform: translate(0, 30px);
    -ms-transform: translate(0, 30px);
    transform: translate(0, 30px);
}

.popup-wrap.type-confirm .popup {
    -webkit-transform: translate(0, 30px);
    -ms-transform: translate(0, 30px);
    transform: translate(0, 30px);
}

.popup-wrap.is-active .popup {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
}

/* Design Basic */

.popup.demo1 {
    width: 480px;
    border: 1px solid #ddd;
    background-color: #fff;
}

.popup.demo1 .popup-head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    padding: 10px 20px;
    height: 50px;
    border-bottom: 1px solid #ddd;
}

.popup.demo1 .popup-body {
    padding: 20px 25px;
    overflow: auto;
    line-height: 1.5;
}

.popup.demo1 .popup-foot {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    padding: 15px 20px;
    border-top: 1px solid #ddd;
}

.popup.demo1 .popup-close {
    position: absolute;
    right: 2px;
    top: 0;
    width: 50px;
    height: 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.popup.demo1 .popup-close .btn-ico {
    width: 100%;
    height: 100%;
}

.type-basic .popup.demo1 {
    max-height: 480px;
    outline: 0;
}

.type-basic .popup.demo1 .popup-cont {
    height: auto;
    min-height: 300px;
}

.type-basic .popup.demo1 .popup-cont.auto {
    height: auto;
    min-height: initial;
}

.popup_imgst{position: absolute;display:inline-block;width: auto;height: auto;top: 0;left: 0;}
.popup_imgst .btn_close{position: relative;right: -44px;top: -18px;}

/*-------------------------------------------------------------------
    @Dimmer
-------------------------------------------------------------------*/

/* Default */

.dimmer {
    visibility: hidden;
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    background: rgba(0, 0, 0, 0.75);
    -webkit-transition: all ease 0.3s 0.15s;
    -o-transition: all ease 0.3s 0.15s;
    transition: all ease 0.3s 0.15s;
}

.dimmer.is-active {
    visibility: visible;
    opacity: 1;
    -webkit-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}

/* zIndex */

.dimmer-popup {
    z-index: 1000;
}

.dimmer-aside {
    z-index: 300;
}

/*-------------------------------------------------------------------
    ## FullPopup
-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
	## jquery.ui.Datepicker
-------------------------------------------------------------------*/

/* Plugin */

.datepicker {
    width: 17em;
    padding: 1em;
    display: none;
    background-color: #fff;
    border: 1px solid #eee;
}

.datepicker .datepicker-header {
    position: relative;
    padding: .2em 0;
}

.datepicker .datepicker-prev,
.datepicker .datepicker-next {
    position: absolute;
    top: 2px;
    width: 1.8em;
    height: 1.8em;
}

.datepicker .datepicker-prev-hover,
.datepicker .datepicker-next-hover {
    top: 1px;
}

.datepicker .datepicker-prev {
    left: 2px;
}

.datepicker .datepicker-next {
    right: 2px;
}

.datepicker .datepicker-prev-hover {
    left: 1px;
}

.datepicker .datepicker-next-hover {
    right: 1px;
}

.datepicker .datepicker-prev span,
.datepicker .datepicker-next span {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -8px;
    top: 50%;
    margin-top: -8px;
}

.datepicker .datepicker-title {
    margin: 0 2.3em;
    line-height: 1.8em;
    text-align: center;
}

.datepicker .datepicker-title select {
    font-size: 1em;
    margin: 1px 0;
}

.datepicker select.datepicker-month,
.datepicker select.datepicker-year {
    width: 45%;
}

.datepicker table {
    width: 100%;
    font-size: .9em;
    border-collapse: collapse;
    margin: 0 0 .4em;
}

.datepicker th {
    padding: .7em .3em;
    text-align: center;
    font-weight: bold;
    border: 0;
}

.datepicker td {
    border: 0;
    padding: 1px;
}

.datepicker td span,
.datepicker td a {
    display: block;
    padding: .2em;
    text-align: right;
    text-decoration: none;
}

.datepicker .datepicker-buttonpane {
    background-image: none;
    margin: .7em 0 0 0;
    padding: 0 .2em;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
}

.datepicker .datepicker-buttonpane button {
    float: right;
    margin: .5em .2em .4em;
    cursor: pointer;
    padding: .2em .6em .3em .6em;
    width: auto;
    overflow: visible;
}

.datepicker .datepicker-buttonpane button.datepicker-current {
    float: left;
}

/* with multiple calendars */

.datepicker.datepicker-multi {
    width: auto;
}

.datepicker-multi .datepicker-group {
    float: left;
}

.datepicker-multi .datepicker-group table {
    width: 95%;
    margin: 0 auto .4em;
}

.datepicker-multi-2 .datepicker-group {
    width: 50%;
}

.datepicker-multi-3 .datepicker-group {
    width: 33.3%;
}

.datepicker-multi-4 .datepicker-group {
    width: 25%;
}

.datepicker-multi .datepicker-group-last .datepicker-header,
.datepicker-multi .datepicker-group-middle .datepicker-header {
    border-left-width: 0;
}

.datepicker-multi .datepicker-buttonpane {
    clear: left;
}

.datepicker-row-break {
    clear: both;
    width: 100%;
    font-size: 0;
}

/* RTL support */

.datepicker-rtl {
    direction: rtl;
}

.datepicker-rtl .datepicker-prev {
    right: 2px;
    left: auto;
}

.datepicker-rtl .datepicker-next {
    left: 2px;
    right: auto;
}

.datepicker-rtl .datepicker-prev:hover {
    right: 1px;
    left: auto;
}

.datepicker-rtl .datepicker-next:hover {
    left: 1px;
    right: auto;
}

.datepicker-rtl .datepicker-buttonpane {
    clear: right;
}

.datepicker-rtl .datepicker-buttonpane button {
    float: left;
}

.datepicker-rtl .datepicker-buttonpane button.datepicker-current,
.datepicker-rtl .datepicker-group {
    float: right;
}

.datepicker-rtl .datepicker-group-last .datepicker-header,
.datepicker-rtl .datepicker-group-middle .datepicker-header {
    border-right-width: 0;
    border-left-width: 1px;
}

/* Design - Button */

.datepicker-trigger {
    display: inline-block;
    position: absolute;
    right: 5px;
    top: 50%;
    width: 22px;
    height: 22px;
    margin-top: -11px;
    background: url(../images/common/icon_sprite.png) no-repeat -230px -125px;
    vertical-align: middle;
    text-indent: -9999em;
}

/*-------------------------------------------------------------------
	## bxSlider
-------------------------------------------------------------------*/

/* Design - Sample */

.bx-slider a {
    display: block;
    position: relative;
}

.bx-wrapper img {
    width: 100%;
}

/*-------------------------------------------------------------------
	## owlCarousel
-------------------------------------------------------------------*/

/* Common */

.owlCarousel {
    text-align: center;
}

.owl-stage-outer {
    overflow: hidden;
}

.owl-stage-outer .owl-item {
    float: left;
}

.owl-stage-outer .owl-item a {
    display: block;
}

.owl-dots {
    display: inline-block;
}

.owl-dots .owl-dot {
    display: inline-block;
    cursor: pointer;
    transition: all 0.2s ease-out 0s;
    -webkit-transition: all 0.2s ease-out 0s;
    -moz-transition: all 0.2s ease-out 0s;
    -o-transition: all 0.2s ease-out 0s;
}

.owl-dots .owl-dot span {
    display: block;
}

.owl-nav {
    display: inline-block;
}

.owl-nav.disabled {
    display: none;
}

.owl-auto {
    display: inline-block;
    position: absolute;
}

.owl-auto .owl-start {
    display: inline-block;
    text-indent: -999em;
    vertical-align: top;
    cursor: pointer;
}

.owl-auto .owl-stop {
    display: inline-block;
    text-indent: -999em;
    vertical-align: top;
    cursor: pointer;
}

/* Design - Sample */

.sample-slider1 .owl-dots {
    margin-top: 20px;
}

.sample-slider1 .owl-dots .owl-dot {
    width: 10px;
    height: 10px;
    margin: 0 5px;
    border-radius: 5px;
    background-color: #cccccc;
    text-indent: -999em;
}

.sample-slider1 .owl-dots .owl-dot.is-active {
    width: 30px;
    background-color: #0099cc;
}

.sample-slider1 .owl-auto .owl-start {
    background-color: #666;
}

.sample-slider1 .owl-auto .owl-stop {
    background-color: #222;
}

/*-------------------------------------------------------------------
	## FlexSlider
-------------------------------------------------------------------*/

/* Common */

.flexSlider {
    position: relative;
    text-align: center;
}

.flexSlider .slides::after {
    content: '';
    clear: both;
    display: block;
}

.flexSlider .slides>li {
    text-align: center;
}

.flex-control-paging {
    display: inline-block;
    text-align: center;
}

.flex-control-paging li {
    display: inline-block;
}

.flex-control-paging li a {
    display: inline-block;
    vertical-align: middle;
    text-indent: -999em;
    transition: all 0.2s ease-out 0s;
    -webkit-transition: all 0.2s ease-out 0s;
    -moz-transition: all 0.2s ease-out 0s;
    -o-transition: all 0.2s ease-out 0s;
}

.flex-direction-nav {
    display: inline-block;
}

.flex-direction-nav li {
    display: inline-block;
}

/* Design - Sample */

.sample-slider1 .flex-control-paging {
    margin-top: 20px;
}

.sample-slider1 .flex-control-paging li {
    margin: 0 5px;
}

.sample-slider1 .flex-control-paging li a {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #cccccc;
}

.sample-slider1 .flex-control-paging li a.flex-active {
    width: 30px;
    background-color: #0099cc;
}

.sample-slider1 .flex-direction-nav li {
    margin: 0 5px;
}

/*-------------------------------------------------------------------
	## Swiper
-------------------------------------------------------------------*/

/* Default */

.swiper-slide {
    text-align: center;
}

/*-------------------------------------------------------------------
	## Slick Slider
-------------------------------------------------------------------*/

/* Default */

.slickSlider {
    overflow: hidden;
}

.slickSlider::after {
    content: '';
    clear: both;
    display: block;
}

.slickSlider .item {
    float: left;
}

.slickSlider .slick-track {
    position: relative;
    margin: 0 auto;
}

/*-------------------------------------------------------------------
	## Sticky
-------------------------------------------------------------------*/

/* Common - Fixed */

.sticky-fixed {
    position: fixed !important;
}

/* Common - Scroll */

.sticky-scroll-area {
    position: relative;
}

.sticky-scroll {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}

.sticky-scroll.is-fixed {
    position: fixed;
}

.sticky-scroll-after {
    display: block;
}

/* UI - Sticky */

.tab-basic.sticky-scroll+.sticky-scroll-after {
    display: block;
    height: 35px;
}

.pageTop {
    position: absolute;
    right: 20px;
    top: calc(100% - 70px);
}


.date-group {position:relative; width:200px; }
.date-group .input {width:100%;}
.date-group .input-date {opacity:0; font-size:200px; width:100%; height:100%; position:absolute; right:0; top:50%; background-color:transparent; color:transparent; transform:translateY(-50%);}

/*-------------------------------------------------------------------
	## 기타 UI
-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
    파일정의 : 컨텐츠 스타일
	작성날짜 : YYYY-MM-DD 홍길동
    참고사항 : 접근경로를 표시한다.
    분류순서 : 공통화면 > 메뉴화면 > 팝업화면
    속성순서 : 표시 > 위치 > 넘침/흐름 > 크기/간격 > 박스모양 > 폰트/정렬 > 기타
-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
    ## 공통
-------------------------------------------------------------------*/

/* 전체검색 */

.search-total {
    padding: 10px;
    background-color: #f8f8f8;
}

/*-------------------------------------------------------------------
    ## [메뉴화면]
-------------------------------------------------------------------*/

/* 메뉴명 > 화면명 */

/*-------------------------------------------------------------------
    ## Popup
-------------------------------------------------------------------*/
.cookie{padding: 1rem;background: #444;color: #fff;text-align: right;}

/* 메뉴명 > 화면명 > 팝업명 */


/*-------------------------------------------------------------------
    파일정의 : 메인컨텐츠 스타일
	작성날짜 : YYYY-MM-DD 홍길동
    참고사항 : 서브스타일과 메인스타일의 분리
    분류순서 : 레이아웃 > 공통디자인 > 컨텐츠
    속성순서 : 표시 > 위치 > 넘침/흐름 > 크기/간격 > 박스모양 > 폰트/정렬 > 기타
-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
    ## 레이아웃
-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
    ## 공통디자인
-------------------------------------------------------------------*/
.lds-ring {
    position: fixed;
    display: inline-block;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.5;
    z-index: 999;
}
.lds-ring:after{
    content:'Loading';
    position: absolute;
    width: 100%;
    height: auto;
    display:block;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    font-family:
    'Nunito Sans', sans-serif;
    -webkit-animation: flash 2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    animation: flash 2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    }
.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 84px;
    height: 84px;
    margin: 8px;
    border: 8px solid #000;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #000 transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
}
@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
  
  
/*-------------------------------------------------------------------
    ## 컨텐츠
-------------------------------------------------------------------*/
/*달력*/
.calLayout {
    border: 1px solid #DDD !important;
    background-color: #fff !important;
    width: 220px !important;
    margin-top: 5px;
}
.calTitle {
    border: 1px solid #fff !important;
    background-color: #fff !important;
    width: 100% !important;
    font-size: 14px !important;
    padding: 3px 0 !important;
}
.todayBtn, .calHeader, .calBody{position: relative !important;display: inline-block;width: 210px !important;height: auto;margin: auto;}
.calHeader .calDayTitle, .calBody > div{width: 14.2% !important;padding: 5px 0px;font-size: 12px;border: 0px;}
.calHeader .calDaySpace, .calBody > div.calDaySpace{width: 0% !important;padding: 0px;}
.todayLay{padding-left:0px;}
.todayBtn{height: 30px !important;margin: 5px auto !important;font-size:12px !important;}
.a-link01, .a-link01 p, .a-link01 p span, .a-link01 p strong{font-family: "NotoSans", sans-serif !important;font-size: 14px !important;font-weight: 500;}