@charset "utf-8";
/* CSS Document */
/* ==================================================
	웹 폰트
================================================== */
@import url("https://fonts.googleapis.com/earlyaccess/notosanskr.css");
@import url("https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css");
@import url('https://fonts.googleapis.com/css2?family=Paytone+One&display=swap');

/**
포인트 컬러 지정
*/
:root {
    --point-color: #0046ff;
    --main-gradient: linear-gradient(180deg, #0046FF 0%, #0085FF 100%);

    --txt-dark: #333333;
    --txt-normal: #666666;
    --txt-light: #999999;
    --txt-white: #ffffff;

    --txt-space54: -0.54px;
    --txt-space12: -1.2px;

    --bg-normal: #f1f1f1;
    --bg-section: #eff7ff;
    --bg-blue: #f3f9ff;

    --line-light: #e2e2e2;
    --line-normal: #e7e7e7;
    --line-white: #f2f2f2;

    --font-size12: 12px;
    --font-size14: 14px;
    --font-size16: 16px;
    --font-size18: 18px;
    --font-size20: 20px;
    --font-size22: 22px; 
    --font-size24: 24px;
    --font-size30: 30px;
    --font-size40: 40px;

    --shadow-noraml:0px 0px 15px 0px rgba(0, 0, 0, 0.10); 
    --shadow-blue:0px 0px 10px 0px rgba(0, 70, 255, 0.20);
}

@font-face {
    font-family: "Pretendard";
    font-weight: 900;
    font-display: swap;
    src: local("Pretendard Black"), url(/font/pretendard/woff2/Pretendard-Black.woff2) format("woff2"), url(/font/pretendard/woff/Pretendard-Black.woff) format("woff");
}

@font-face {
    font-family: "Pretendard";
    font-weight: 800;
    font-display: swap;
    src: local("Pretendard ExtraBold"), url(/font/pretendard/woff2/Pretendard-ExtraBold.woff2) format("woff2"), url(/font/pretendard/woff/Pretendard-ExtraBold.woff) format("woff");
}

@font-face {
    font-family: "Pretendard";
    font-weight: 700;
    font-display: swap;
    src: local("Pretendard Bold"), url(/font/pretendard/woff2/Pretendard-Bold.woff2) format("woff2"), url(/font/pretendard/woff/Pretendard-Bold.woff) format("woff");
}

@font-face {
    font-family: "Pretendard";
    font-weight: 600;
    font-display: swap;
    src: local("Pretendard SemiBold"), url(/font/pretendard/woff2/Pretendard-SemiBold.woff2) format("woff2"), url(/font/pretendard/woff/Pretendard-SemiBold.woff) format("woff");
}

@font-face {
    font-family: "Pretendard";
    font-weight: 500;
    font-display: swap;
    src: local("Pretendard Medium"), url(/font/pretendard/woff2/Pretendard-Medium.woff2) format("woff2"), url(/font/pretendard/woff/Pretendard-Medium.woff) format("woff");
}

@font-face {
    font-family: "Pretendard";
    font-weight: 400;
    font-display: swap;
    src: local("Pretendard Regular"), url(/font/pretendard/woff2/Pretendard-Regular.woff2) format("woff2"), url(/font/pretendard/woff/Pretendard-Regular.woff) format("woff");
}

@font-face {
    font-family: "Pretendard";
    font-weight: 300;
    font-display: swap;
    src: local("Pretendard Light"), url(/font/pretendard/woff2/Pretendard-Light.woff2) format("woff2"), url(/font/pretendard/woff/Pretendard-Light.woff) format("woff");
}

@font-face {
    font-family: "Pretendard";
    font-weight: 200;
    font-display: swap;
    src: local("Pretendard ExtraLight"), url(/font/pretendard/woff2/Pretendard-ExtraLight.woff2) format("woff2"), url(/font/pretendard/woff/Pretendard-ExtraLight.woff) format("woff");
}

@font-face {
    font-family: "Pretendard";
    font-weight: 100;
    font-display: swap;
    src: local("Pretendard Thin"), url(/font/pretendard/woff2/Pretendard-Thin.woff2) format("woff2"), url(/font/pretendard/woff/Pretendard-Thin.woff) format("woff");
}

.paytone-one {
    font-family: "Paytone One", sans-serif;
    font-weight: 400;
    font-style: normal;
}
  
.playfair-display-100 {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
}

.playfair-display-200 {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
}

.playfair-display-300 {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

.playfair-display-400 {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.playfair-display-500 {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.playfair-display-600 {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

.playfair-display-700 {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.playfair-display-800 {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
}

.playfair-display-900 {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
}

.montserrat-100 {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
}

.montserrat-200 {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
}

.montserrat-300 {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

.montserrat-400 {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.montserrat-500 {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.montserrat-600 {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

.montserrat-700 {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.montserrat-800 {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
}

.montserrat-900 {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
}

.pretendard-100 {
    font-family: "Pretendard", "Malgun Gothic", "맑은 고딕", -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Helvetica Neue", Helvetica, Arial, Dotum, "돋움", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
}

.pretendard-200 {
    font-family: "Pretendard", "Malgun Gothic", "맑은 고딕", -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Helvetica Neue", Helvetica, Arial, Dotum, "돋움", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
}

.pretendard-300 {
    font-family: "Pretendard", "Malgun Gothic", "맑은 고딕", -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Helvetica Neue", Helvetica, Arial, Dotum, "돋움", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

.pretendard-400 {
    font-family: "Pretendard", "Malgun Gothic", "맑은 고딕", -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Helvetica Neue", Helvetica, Arial, Dotum, "돋움", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.pretendard-500 {
    font-family: "Pretendard", "Malgun Gothic", "맑은 고딕", -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Helvetica Neue", Helvetica, Arial, Dotum, "돋움", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.pretendard-600 {
    font-family: "Pretendard", "Malgun Gothic", "맑은 고딕", -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Helvetica Neue", Helvetica, Arial, Dotum, "돋움", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

.pretendard-700 {
    font-family: "Pretendard", "Malgun Gothic", "맑은 고딕", -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Helvetica Neue", Helvetica, Arial, Dotum, "돋움", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.pretendard-800 {
    font-family: "Pretendard", "Malgun Gothic", "맑은 고딕", -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Helvetica Neue", Helvetica, Arial, Dotum, "돋움", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
}

.pretendard-900 {
    font-family: "Pretendard", "Malgun Gothic", "맑은 고딕", -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Helvetica Neue", Helvetica, Arial, Dotum, "돋움", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
}

.nanumsquare-100 {
    font-family: "NanumSquare", "Malgun Gothic", "맑은 고딕", -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Helvetica Neue", Helvetica, Arial, Dotum, "돋움", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
}

.nanumsquare-200 {
    font-family: "NanumSquare", "Malgun Gothic", "맑은 고딕", -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Helvetica Neue", Helvetica, Arial, Dotum, "돋움", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
}

.nanumsquare-300 {
    font-family: "NanumSquare", "Malgun Gothic", "맑은 고딕", -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Helvetica Neue", Helvetica, Arial, Dotum, "돋움", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

.nanumsquare-400 {
    font-family: "NanumSquare", "Malgun Gothic", "맑은 고딕", -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Helvetica Neue", Helvetica, Arial, Dotum, "돋움", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.nanumsquare-500 {
    font-family: "NanumSquare", "Malgun Gothic", "맑은 고딕", -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Helvetica Neue", Helvetica, Arial, Dotum, "돋움", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.nanumsquare-600 {
    font-family: "NanumSquare", "Malgun Gothic", "맑은 고딕", -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Helvetica Neue", Helvetica, Arial, Dotum, "돋움", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

.nanumsquare-700 {
    font-family: "NanumSquare", "Malgun Gothic", "맑은 고딕", -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Helvetica Neue", Helvetica, Arial, Dotum, "돋움", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.nanumsquare-800 {
    font-family: "NanumSquare", "Malgun Gothic", "맑은 고딕", -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Helvetica Neue", Helvetica, Arial, Dotum, "돋움", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
}

.nanumsquare-900 {
    font-family: "NanumSquare", "Malgun Gothic", "맑은 고딕", -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Helvetica Neue", Helvetica, Arial, Dotum, "돋움", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
}
@charset "utf-8";
/* CSS Document */
* {
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -o-text-size-adjust: none;
}
*:before,
*:after{
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

html, body {
    height: 100%;
    font-size-adjust: none;
    -webkit-font-size-adjust: none;
    -o-font-size-adjust: none;
    -moz-font-size-adjust: none;
}

html {
    font-size: 62.5%;
}

/*기본폰트 10px*/
body, th, td, input, select, textarea, button {
    font-size: 1.5rem;
    line-height: 1.6;
    font-family: "NanumSquare", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: #666;
    word-break: keep-all;
    word-wrap: break-word;
    letter-spacing: -0.42px;
}

::-webkit-input-placeholder {
    color: var(--txt-light)c;
}

:-moz-placeholder {
    color: var(--txt-light);
}

::-moz-placeholder {
    color: var(--txt-light);
}

:-ms-input-placeholder {
    color: var(--txt-light);
}

caption {
    display: none;
}

body, div,
dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
pre, code, form, fieldset, legend, textarea, p, blockquote,
th, td, input, select, textarea, button,
header, nav, menu, section, article {
    margin: 0;
    padding: 0
}

fieldset, img {
    border: 0 none
}

dl, ul, ol, menu, li {
    list-style: none;
    vertical-align: middle
}

blockquote, q {
    quotes: none
}

blockquote:before, blockquote:after, q:before, q:after {
    content: "";
    content: none;
}

input, textarea {
    padding: 0 25px;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset; /* 크롭입력배경색제거 */
}

input, select, textarea, button {
    vertical-align: middle;
}

input[type="text"], input[type="password"], input[type="submit"], input[type="search"], input[type="number"] {
    -webkit-appearance: none;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}
input[type="text"]::placeholder, input[type="password"]::placeholder, input[type="submit"]::placeholder, input[type="search"]::placeholder, input[type="number"]::placeholder, input[type="tel"]::placeholder, input[type="email"]::placeholder, textarea::placeholder {
    font-size: 14px;
    color: var(--txt-light);
}

button, input[type="button"], input[type="submit"], input[type="reset"], input[type="file"] {
    -webkit-appearance: none;
    border-radius: 0;
    border: none;
}

input[type="button"] {
    -webkit-appearance: none;
    border: 0;
}

input[type="search"]:-webkit-search-cancel-button {
    -webkit-appearance: none
}

input[type="radio"], input[type="checkbox"] {
    border: none;
}

button {
    border: none;
    background-color: transparent;
    cursor: pointer;
}

a, a:link, a:visited, a:hover, a:active {
    color: inherit;
    text-decoration: none;
}

address, caption, cite, code, dfn, em, var, i {
    font-style: normal;
    font-weight: normal
}

table {
    width: 100%;
    border-collapse: collapse;
}

img {
    vertical-align: middle;
}

legend, caption {
    display: none;
}

pre, code {
	color: #ddd;
	background: none;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.5;
	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;
	-webkit-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

pre {
    padding: 1em;
    margin: 1.5rem 0;
    overflow: auto;
	background: #282c34;
	border-radius: 0.75rem;
}

code {
    border-radius: 0;
    padding: initial;
}@charset "utf-8";

/* CSS Document */
.d-flex {display: flex;}
.col-cen{display:flex; flex-direction: column; justify-content: center; align-items: center;}
.row-cen{display: flex; justify-content: center; align-items: center;}
.row-end{display: flex; justify-content: space-between; align-items: center;}
.row-left{display: flex; justify-content: left; align-items: center;}

.uppercase {text-transform: uppercase;}
.capitalize {text-transform: capitalize;}

.txt-line{text-overflow:ellipsis; overflow:hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;}

.cl{color: var(--point-color);}
.hv-cl{transition: color 0.2s linear;}
.hv-cl:hover{color: var(--point-color) !important;}

svg path{transition: all 0.2s linear;}

/* ==================================================
	공통레이아웃
================================================== */
#header, #footer{width: 100%;}
.size{width: 100%; max-width: 1440px; height: auto; margin: 0 auto; box-sizing: border-box;}
.size.thin{max-width: 960px;}
.size.narrow{max-width: 700px;}

.inner{width: 100%; box-sizing: border-box;}
.wrapper{position: relative; width: 100%; max-width: 2560px; overflow: hidden; margin: 0 auto; min-height: 600px;}

/* ==================================================
	header
================================================== */
#header{position: fixed; left: 0; top: 0; width: 100%; z-index: 100; font-weight: 800;}
#header .header-inner{box-shadow: var(--shadow-noraml);}
#header .header-top {padding: 15px 0px; background-color: #fff;}
#header .header-top .login-btns {}
#header .header-top .login-btns > .svgs {display:flex; gap:10px;}
#header .header-top .login-btns > .svgs a, #header .header-top .login-btns > .svgs a svg {width:38px; height:38px; display:inline-flex;}
#header .header-top .login-btns .top{gap: 35px; justify-content: right;}
#header .header-top .login-btns .top a {display: flex; justify-content: center; align-items: center; gap: 10px; color: var(--txt-dark); font-size: var(--font-size14);}
#header .header-top .login-btns .top a:hover .hover{stroke: var(--point-color);}
#header .header-top .login-btns .top .svgs {
    display:flex; gap:10px;
}
#header .header-top .login-btns .top .svgs > a, #header .header-top .login-btns .top .svgs > a svg {width:38px; height:38px;}
#header .header-top .login-btns .btm{gap: 21px; margin-top:10px; justify-content: end;}
#header .header-top .login-btns .btm a{position:relative; font-size: var(--font-size12); line-height: 1.2; gap: 2px;}
#header .header-top .login-btns .btm a:before{content:''; display: block; position: absolute; left: -10px; top:50%; margin-top:-4.5px; width:1px; height:9px; background-color: #9f9f9f;}
#header .header-top .login-btns .btm a:first-of-type:before{display:none;}
#header .header-top .login-btns .btm a img{margin-top: -1px;}

#header .header-search form{gap: 40px;}
#header .header-search .search-input{position:relative; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: space-evenly; align-items: center; z-index: 110; border: 1px solid var(--line-light); border-radius: 30px;}
#header .header-search .search-input:has(input[type="text"]:focus){border: 1px solid transparent; background-image: linear-gradient(#fff,#fff), var(--main-gradient); background-origin: border-box; background-clip: content-box, border-box;}
#header .header-search .search-input > input[type="text"]{display: block; width: 550px; height: 58px; padding: 20px 30px; padding-right:62px; border:none; border-radius: 30px; background-color: var(--bg-normal); color: var(--txt-dark); box-sizing: border-box; font-weight: 800;}
#header .header-search .search-input > input[type="text"]:focus{outline: none; background-color: #fff;}
#header .header-search .search-input > input[type="text"]:focus::placeholder{color: #fff;}
#header .header-search .search-input > button  {position: absolute; right: 12px; width: 40px; height: 40px; border-radius: 100%; background-color: var(--point-color);}
#header .header-search .search-recent{display:none; position:absolute; left: 0; top: 100%; margin-top:10px; width: 100%; padding: 25px; border-radius: 10px; background-color: #fff; box-shadow: var(--shadow-noraml); box-sizing: border-box; z-index: 10;}
#header .header-search .search-recent.on{display: block;}
#header .header-search .search-recent .recent-tit{text-align: center; padding-bottom: 15px;}
#header .header-search .search-recent .recent-tit em{display: block; color: var(--point-color); font-size: var(--font-size14); line-height: 1; font-weight: 800;}
#header .header-search .search-recent .recent-list{padding-top:15px; border-top: 1px solid var(--line-light);}
#header .header-search .search-recent .recent-list ul li{display: flex; justify-content: space-between; align-items: center; align-self: stretch; margin-top: 5px;}
#header .header-search .search-recent .recent-list ul li:first-of-type{margin-top:0;}
#header .header-search .search-recent .recent-list ul li a{font-size: 1.5rem; font-weight: 600; color: var(--txt-normal); text-overflow: ellipsis;}

#header .header-search .search-realtime{position: relative;}
#header .header-search .search-realtime .realtime-list{width: 190px; height:28px; padding:0 5px; overflow: hidden;}
#header .header-search .search-realtime .realtime-list ul{position: relative;}
#header .header-search .search-realtime .realtime-list ul li{height: 28px;}
#header .header-search .search-realtime .realtime-list ul li .row-cen{justify-content: left; gap: 10px; font-size: var(--font-size16); color: var(--txt-dark);}
#header .header-search .search-realtime .realtime-list ul li .cl{font-weight: 800;}
#header .header-search .search-realtime .realtime-list ul li img{width: 12px; flex: none;}
#header .header-search .search-realtime .search-rank{display:none; position:absolute; left:50%; top:100%; padding-top:15px; margin-left:-110px; width:220px; box-sizing: border-box; z-index: 10;}
#header .header-search .search-realtime .search-rank .inner{padding: 25px 20px; border-radius: 10px; background-color: #fff; box-shadow: var(--shadow-noraml);}
#header .header-search .search-realtime .search-rank .list-tit{text-align: center; padding-bottom: 15px;}
#header .header-search .search-realtime .search-rank .list-tit em{display: block; color: var(--point-color); font-size: var(--font-size14); line-height: 1; font-weight: 800;}
#header .header-search .search-realtime .search-rank .rank-list{padding-top:15px; border-top: 1px solid var(--line-light);}
#header .header-search .search-realtime .search-rank .rank-list ul li{margin-top:7px;}
#header .header-search .search-realtime .search-rank .rank-list ul li:first-of-type{margin-top:0;}
#header .header-search .search-realtime .search-rank .rank-list ul li a{color: var(--txt-dark); font-size: 13px; letter-spacing: -0.39px;}
#header .header-search .search-realtime .search-rank .rank-list ul li a .img{width: 13px; text-align: center; flex: none;}

#header .header-bottom{border-top: 1px solid #e7e7e7; background-color: #fff;}
#header .header-gnb{position: relative; gap: 120px;}
#header .header-gnb > li > a{display: block; font-size: var(--font-size18); color: var(--txt-dark); letter-spacing: var(--txt-space54); height: 70px; line-height: 70px;}
#header .header-gnb > li.on > a{color: var(--point-color);}
#header .header-gnb > li > .sub-depth{display: none; position: fixed; left: 0; top: 160px; width: 100%; padding-top:70px;}
#header .header-gnb > li > .sub-depth .size{display:flex; justify-content: left; align-items: flex-start; align-content: center;}
#header .header-gnb > li > .sub-depth .sub-tit{position: relative; padding-right: 70px;}
#header .header-gnb > li > .sub-depth .sub-tit:before{content:''; display: block; position: absolute; right: 0; top: 0; width: 1px; height: 148px; background-color: #999;}
#header .header-gnb > li > .sub-depth .sub-tit em{display: block; font-size: var(--font-size40); line-height: 1.2; letter-spacing: var(--txt-space12); color: var(--txt-dark); font-weight: 800;}
#header .header-gnb > li > .sub-depth .sub-list{padding-left: 70px; display: flex; gap: 70px; justify-content: left; align-items: flex-start;}
#header .header-gnb > li > .sub-depth .sub-list > li{flex: 1 0 auto;}
#header .header-gnb > li > .sub-depth .sub-list > li > a{position:relative; display: inline-block; font-size: var(--font-size18); letter-spacing: var(--txt-space54); color: var(--txt-dark); line-height: 1.2; padding-bottom: 5px;}
#header .header-gnb > li > .sub-depth .sub-list > li > a:before{opacity: 0; content:''; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background-color: var(--point-color); transition: opacity 0.2s linear;}
#header .header-gnb > li > .sub-depth .sub-list > li:hover > a:before{opacity: 1;}
#header .header-gnb > li > .sub-depth .sub-list .depth3{margin-top: 20px;}
#header .header-gnb > li > .sub-depth .sub-list .depth3 li{margin-top: 10px;}
#header .header-gnb > li > .sub-depth .sub-list .depth3 li:first-of-type{margin-top: 0;}
#header .header-gnb > li > .sub-depth .sub-list .depth3 li a{display: block; font-size: var(--font-size14); color: var(--txt-normal); line-height: 1.2;}
#header .header-gnb-bg{display: none; position:fixed; left: 0; top: 160px; width: 100%; height: 265px; background-color: #f2f7fc; box-shadow: var(--shadow-noraml); z-index: -1;}
#header .header-util > ul{gap: 45px;}
#header .header-util > ul a{display: block; font-size: var(--font-size14); color: var(--txt-normal); transition: color 0.2s linear;}
#header .header-util > ul a:hover{color: var(--txt-dark);}

#header .btn-all-menu-open{display: none;}

.all-menu{position: fixed; left: 100%; top:0; width: 100%; height: 100%; background-color: var(--bg-blue); overflow-y: auto; z-index: 100;}
.all-menu .all-menu-top{padding:17px 20px; background-color: #fff; box-shadow: 0px 0px 15px 0px rgba(0, 70, 255, 0.15);}
.all-menu .all-menu-top .link-login{gap: 35px;}
.all-menu .all-menu-top .link-login > a{gap: 10px; color: var(--txt-dark);}
.all-menu .all-menu-top .link-login > a span{font-size: var(--font-size14); font-weight: 800;}
.all-menu .all-menu-top .link-login > a:hover .hover{stroke: var(--point-color);}

.all-menu .all-menu-bottom{padding: 15px 20px;}
.all-menu .all-menu-bottom .link-mypage{gap: 21px; margin-bottom: 15px;}
.all-menu .all-menu-bottom .link-mypage a{position:relative; font-size: var(--font-size12); line-height: 1.2; gap: 2px;}
.all-menu .all-menu-bottom .link-mypage a:before{content:''; display: block; position: absolute; left: -10px; top:50%; margin-top:-4.5px; width:1px; height:9px; background-color: #9f9f9f;}
.all-menu .all-menu-bottom .link-mypage a:first-of-type:before{display:none;}
.all-menu .all-menu-bottom .link-mypage a img{margin-top: -1px;}

.all-menu .all-menu-bottom .mo-gnb .depth1 > li{margin-top: 10px; padding: 0 20px; border-radius: 10px; border: 1px solid #d8e5ed; background-color: #fff; box-sizing: border-box; }
.all-menu .all-menu-bottom .mo-gnb .depth1 > li:first-of-type{margin-top:0;}
.all-menu .all-menu-bottom .mo-gnb .depth1 > li > a{position:relative; display: block; height: 58px; line-height: 58px; font-size: var(--font-size18); color: var(--txt-dark);}
.all-menu .all-menu-bottom .mo-gnb .depth1 > li > a:before{content:''; display: block; position:absolute; right:0; top:50%; margin-top:-4px; width:12px; height:8px; background-image: url(/img/svg/ico-board-select-down-bk.svg);}
.all-menu .all-menu-bottom .mo-gnb .depth1 > li > a.on:before{background-image: url(/img/svg/ico-board-select-up-bk.svg);}
.all-menu .all-menu-bottom .mo-gnb .depth2{display: none;}
.all-menu .all-menu-bottom .mo-gnb .depth2 > li{padding:15px 0; border-top: 1px solid var(--line-light);}
.all-menu .all-menu-bottom .mo-gnb .depth2 > li > a{display: block; font-size: var(--font-size12); font-weight: 800; color: var(--point-color); line-height: 100%;}
.all-menu .all-menu-bottom .mo-gnb .depth2 > li .depth3{gap: 5px; margin-top: 7px;}
.all-menu .all-menu-bottom .mo-gnb .depth2 > li .depth3 li{min-width: 70px;}
.all-menu .all-menu-bottom .mo-gnb .depth2 > li .depth3 li a{display: block; font-size: var(--font-size16); color: var(--txt-dark); line-height: 100%;}

.all-menu .all-menu-bottom .mo-util{margin-top: 10px;}
.all-menu .all-menu-bottom .mo-util ul{flex-wrap: wrap; margin: -5px;}
.all-menu .all-menu-bottom .mo-util ul li{width: 50%; padding: 5px; box-sizing: border-box;}
.all-menu .all-menu-bottom .mo-util ul li a{display: block; height: 76px; line-height: 74px; border-radius: 10px; background-color: #e9f4ff; border: 1px solid #bbdaff; font-size: var(--font-size14); font-weight: 800; color: var(--point-color); text-align: center;}
.mo-svgs {    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-top: 30px;}
/* ==================================================
	footer
================================================== */
#footer {position: relative;}
#footer .footer-top {background: #020B23; height: 60px; flex-shrink: 0;}
#footer .footer-top p {display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;}
#footer .footer-top a {color: var(--txt-white); font-size: var(--font-size14); font-weight: 800;}
#footer .footer-top span {width: 1px; height: 10px; background: #8B8B8B;}
#footer .footer-bottom .footer-bottom-inner {position:relative; padding: 50px 0px;}
#footer .footer-bottom .footer-bottom-inner .left{gap: 60px;}
#footer .footer-bottom .footer-info .info-tit strong{display:block; font-size: var(--font-size16); color: var(--txt-dark); line-height: 140%; letter-spacing: -0.48px;}
#footer .footer-bottom .footer-info .info-list{margin-top:10px;}
#footer .footer-bottom .footer-info .info-list p{font-size: 0;}
#footer .footer-bottom .footer-info .info-list p span{position:relative; display:inline; padding-left: 12px; margin-left: 11px; color: var(--txt-normal); font-size: var(--font-size14); line-height: 180%;}
#footer .footer-bottom .footer-info .info-list p span:first-of-type{padding-left: 0; margin-left: 0;}
#footer .footer-bottom .footer-info .info-list p span:before{content: ''; display: block; position: absolute; left: 0; top: 2px; width: 1px; height: 12px; background-color: #9f9f9f;}
#footer .footer-bottom .footer-info .info-list p span:first-of-type:before{display:none;}
#footer .footer-bottom .footer-info .info-list p span .cl{color: var(--point-color);}
#footer .footer-bottom .footer-sns > a{display: block;}
#footer .footer-bottom .footer-sns {display:flex; gap:10px;}
.btn-top{position:absolute; right: 60px; bottom: 100%; margin-bottom: 40px; z-index: 5;}
.btn-top.fixed{position: fixed; bottom: 40px; margin-bottom: 0 !important;}

/* sec-tit */
.sec-tit{text-align: center;}
.sec-tit h2,
.sec-tit h3{font-size: 3.6rem; font-weight: 800; letter-spacing: -1.08px; line-height: 1.2; color: var(--txt-dark);}
.sec-tit.big h2,
.sec-tit.big h3{font-size: 4.8rem;}
.sec-tit.small h2,
.sec-tit.small h3{font-size: 2.8rem;}

/* dday */
.dday{display:block; padding: 5px 8px; border-radius: 5px; background-color: #374046; font-size: 10px; color: #fff; z-index: 5; font-family: "Pretendard", sans-serif; font-weight: 700; line-height: 1.2;}
.dday-bl{background-color: #f00;}
.dday-gr{background-color: #6C7880;}

/* type */
i.type{font-size: var(--font-size14); line-height: 100%;}
i.type-hit{color: #6e00fa;}
i.type-new{color: var(--point-color);}
i.type-hot{color: #f00;}

/* board-select */
.board-select{position:relative; width:100%; max-width: 150px;}
.board-select > a{position:relative; display: block; width: 100%; height: 50px; line-height: 48px; padding: 0 15px; border-radius: 10px; border: 1px solid var(--line-light); background-color: #fff; font-size: var(--font-size14); color: var(--txt-dark); box-sizing: border-box;}
.board-select > a:before{content:''; display: block; position:absolute; right:15px; top:50%; margin-top:-4px; width:11px; height:8px; background-image:url(/img/svg/ico-board-select-down.svg);}
.board-select > a.on{border-radius: 10px 10px 0 0; border-bottom: none;}
.board-select > a.on:before{background-image: url(/img/svg/ico-board-select-up.svg);}
.board-select > ul{display:none; position:absolute; left:0; top:49px; width: 100%; padding:0 15px; border-radius: 0 0 10px 10px; border: 1px solid var(--line-light); border-top:none; background-color: #fff; box-sizing: border-box; z-index: 10;}
.board-select > ul li a{display: block; height: 50px; line-height: 50px; border-top: 1px solid var(--line-light); font-size: var(--font-size14); color:var(--txt-light); transition: color 0.2s linear;}
.board-select > ul li a:hover{color: var(--txt-dark) !important;}

/* form-select */
.form-select{max-width: 100%;}
.form-select > a{height:60px; line-height: 58px; padding: 0 25px; color: #999; font-weight: 700;}
.form-select > a:before{right:25px; width: 12px; background-image: url(/img/svg/ico-board-select-down-bk.svg);}
.form-select > a.on:before{background-image: url(/img/svg/ico-board-select-up-bk.svg);}
.form-select.selected > a{color: var(--txt-dark);}
.form-select > ul{top: 59px; padding: 0 25px;}
.form-select > ul li a{height: 60px; line-height: 60px; color: #999; font-weight: 700;}

/* form-select-scroll */
.form-select > ul.scroll{max-height: 427px;}

/* input-date */
.form-schedule .input-date{width: 100%;}
.mid-dash{width: 30px; flex: none; font-size: var(--font-size20); color: #000; text-align: center;}

.input-date{position: relative;}
.input-date:after{content:''; display: block; position:absolute; right:25px; top:50%; margin-top:-12px; width:24px; height:24px; background-image: url(/img/svg/ico-board-write-date.svg);}

.input-date input[type="date"]{ color: var(--txt-light);}
.input-date.changed input[type="date"]{color: var(--txt-dark);}
.input-date input[type="date"]::-webkit-calendar-picker-indicator{position: absolute;  left: 0; top: 0;  width: 100%; height: 100%; background: transparent; color: transparent; cursor: pointer; z-index: 5;}
.input-date input[type="date"]:after{content:''; display: block; position: absolute; right: 2px; top:2px; bottom: 2px; width: 40px; background-color: #fff; border-radius: 7px;}

/* input-btn */
.input-btn{position: relative;}
.input-btn input[type="text"],
.input-btn input[type="tel"],
.input-btn input[type="email"]{padding-right: 113px;}
.input-btn button,
.input-btn a{display: block; position:absolute; right: 15px; top: 14px; width: 83px; height: 32px; line-height: 32px; border-radius: 5px; background-color: #6c7880; font-size: var(--font-size12); font-weight: 700; color: #fff; text-align: center;}

/* input-list */
.input-list .input{margin-top:10px;}
.input-list .input:first-of-type{margin-top:0;}

/* form-file */
.form-file{position: relative;}
.form-file > label{display: block; position:absolute; left:15px; top:50%; margin-top:-16px; width:83px; height:32px; line-height: 32px; text-align: center; background-color: #6c7880; border-radius: 5px; font-size: var(--font-size12); font-weight: 700; color: #fff; cursor: pointer;}
.form-file > label + .file-txt{padding-left:108px;}
.form-file .file-txt{padding: 0 15px; background-color: #fff;}
.form-file.changed .file-txt{background-color: #f3f9ff;}
.form-file .file-hidden{display: none;}
.form-file .btn-file-delete{position:absolute; right:15px; top:50%; transform: translateY(-50%);}

/* form-file-list */
.form-file-list{position:relative; padding-right:70px;}
.form-file-list .btn-file-add{display: block; position: absolute; right: 0; top: 0; width: 60px; height: 60px; border: 1px solid var(--line-light); background-color: #6c7880; border-radius: 10px;}

/* form-file-multi */
.form-file-multi .form-file{margin-top:10px;}

/* tab-round */
.tab-round ul{border: 1px solid #6c7880; border-radius: 8px; overflow: hidden;}
.tab-round li{width: 100%; flex:1 0 0%; box-sizing: border-box;}
.tab-round li a{display: block; width: 100%; height: 60px; line-height: 58px; background-color: #fff; font-size: var(--font-size14); font-weight: 800; color: #6c7880; text-align: center; border-left: 1px solid #6c7880;}
.tab-round li:first-of-type a{border-left: none !important; border-top: none !important;}
.tab-round li a.on{background-color: #6c7880; color: #fff !important;}

.tab-round.tab-bl ul{border: 1px solid var(--point-color); }
.tab-round.tab-bl li a{color:var(--point-color); border-left: 1px solid var(--point-color);}
.tab-round.tab-bl li a.on{background-color: var(--point-color); }

.tab-round-con .tab-box{display: none;}
.tab-round-con .tab-box.on{display: block;}

/* pagination */
.pagination{gap: 80px;}
.pagination .arr{gap: 10px;}
.pagination .arr:hover svg path{stroke: var(--point-color);}
.pagination .arr span{display: block; font-size: 13px; color: #6c7880; transition: color 0.2s linear;}
.pagination .arr:hover span{color: var(--point-color);}
.pagination > ul{display:flex; gap: 25px;}
.pagination > ul.mo{display: none;}
.pagination > ul a{display: block; font-size: var(--font-size14);}
.pagination > ul a.current{width: 35px; height: 35px; line-height: 35px; text-align: center; border-radius: 100%; background-color: #333; color: #fff;}


/* popup */
.popup{display:none; position:fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.25); z-index: 300; overflow-y: auto;}
.popup-inner{display: flex; align-items: center; max-width: 800px; min-height: calc(100% - 160px); margin: 80px auto 20px;}
.popup-box{position:relative; padding: 70px 80px; background-color: #fff; border-radius: 25px 0 25px 25px;}

.popup-box .pop-tit{text-align: center;}
.popup-box .pop-tit strong{display: block; font-size: 3.2rem; font-weight: 800; line-height: 120%; color: var(--txt-dark);}
.popup-box .scroll-box{padding-top: 40px;}

.btn-popup-close{position:absolute; right:0; bottom:100%;}
.btn-popup-close button{display: block; width: 60px; height: 60px; border-radius: 10px 10px 0 0; background-color: #6c7880;}

/* popup-agree */
.popup-agree .popup-box{padding-bottom: 0;}
.popup-agree .scroll-box .scroll{padding-bottom: 80px; max-height: 570px;}

/* popup-share */
.popup-share .popup-inner{max-width: 360px; justify-content: center;}
.popup-share .popup-box{padding:40px 20px; border-radius: 0 0 25px 25px; width: 100%; box-sizing: border-box;}
.popup-share .popup-box .pop-tit strong{font-size: var(--font-size24);}
.popup-share .popup-box .pop-con{margin-top: 20px;}
.popup-share .popup-box .pop-con .ico-list ul{gap: 20px; row-gap: 10px; flex-wrap: wrap;}
.popup-share .popup-box .pop-con .ico-list ul img{width: 50px; height: 50px;}

/* scroll */
.scroll::-webkit-scrollbar{display: none;}
.scroll{-ms-overflow-style: none; overflow-y: auto;}

/* video-box */
.video-box{position: relative; width: 100%; height: 100%; padding-bottom: 56.24%; box-sizing: border-box; border: 0; overflow: hidden;}
.video-box iframe,
.video-box video{position:absolute; left:0; top:0; width: 100%; height: 100%; z-index: 5; border: 0; outline: 0;}
/* ==================================================
    skip
================================================== */
a.skip {
    display: block;
    position: absolute;
    top: -1px;
    z-index: 999;
    width: 0;
    height: 0;
    overflow: hidden;
    text-align: center
}

a.skip:active, a.skip:focus {
    z-index: 999;
    width: 100%;
    height: auto;
    padding: 5px;
    background: #FFFFFF
}

a:hover {
    transition: all .4s ease;
    -webkit-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
}

input[type=button] {
    cursor: pointer !important;
}

.bt {
    cursor: pointer !important;
}

/* inptu / select / textarea */
input[type="text"], input[type="password"], input[type="tel"], input[type="email"], input[type="number"], input[type="url"], select, input[type="date"], input[type="number"] {
    border: 1px solid var(--line-light);
    background-color: #fff;
    border-radius: 10px;
    height: 60px;
    vertical-align: middle;
    padding: 0 25px;
    width: 100%;
    box-sizing: border-box;
    font-size: var(--font-size14); font-weight: 700; color: var(--txt-dark);
}
input[type="text"], input[type="password"], input[type="tel"], input[type="email"], input[type="number"], input[type="url"]{
    text-overflow:ellipsis; overflow:hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;
}
textarea {
    border: 1px solid var(--line-light);
    background-color: #fff;
    border-radius: 10px;
    padding: 25px;
    width: 100%;
    resize: none;
    box-sizing: border-box;
    font-size: var(--font-size14); font-weight: 700; color: var(--txt-dark);
    line-height: 140%;
}

input[readonly], input[readonly="readonly"], input:read-only {
    /* background: #fafafa; */
}

/* 셀렉트박스 */
.select {
    display: inline-block;
    position: relative;
    height: 40px;
    width: 100%;
    vertical-align: middle;
}

.select select {
    display: block;
    cursor: pointer;
    max-width: 100%;
    -moz-appearance: none; /* Firefox */
    -webkit-appearance: none; /* Safari and Chrome */
    appearance: none;
}

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

.select select:not([multiple]) {
    padding-right: 5px;
}

.select:not(.is-multiple):not(.is-loading)::after {
    border: 2px solid #333333;
    border-radius: 2px;
    border-right: 0;
    border-top: 0;
    content: " ";
    display: block;
    height: 6px;
    margin-top: -6px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: rotate(-45deg);
    transform-origin: center;
    width: 6px;
    right: 10px;
    z-index: 4;
}

/* 체크박스 */
.check-box {
    position: relative;
    min-height: 30px;
    font-size: 0;
    display: flex;
    align-items: center;
}
.check-box.small{
    min-height: 20px;
}
.check-box.big{
    min-height: 45px;
}
.check-box input[type="checkbox"] {
    display: inline-block;
    position: absolute;
    left: -9999px;
    opacity: 0;
    visibility: hidden;
    width: 1px;
    height: 1px;
    filter: alpha(opacity=0);
    -ms-filter: alpha(opacity=0);
    overflow: hidden;
}
.check-box label {
    display: inline-block;
    padding-left: 35px;
    font-size: var(--font-size14);
    font-weight: 700;
    color: var(--txt-dark);
    cursor: pointer;
    position: relative;
    line-height: 1.3;
}
.check-box.small label{
    font-size: var(--font-size12);
    padding-left:25px;
}
.check-box.big label{
    font-size: var(--font-size20);
    font-weight: 800;
    padding-left: 55px;
}
.check-box label:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    margin-top: -15px;
    background-image: url(/img/svg/ico-check.svg);
}

.check-box.small label:before{
    width: 20px; height: 20px; margin-top:-10px;
}
.check-box.big label:before{
    width: 45px; height: 45px; margin-top:-22.5px;
}
.check-box input[type="checkbox"]:checked + label:before {
    background-image: url(/img/svg/ico-check-checked.svg);
}

/* 라디오버튼 */
.radio-box {
    position: relative;
}

.radio-box input[type="radio"] {
    display: inline-block;
    position: absolute;
    left: -9999px;
    opacity: 0;
    visibility: hidden;
    width: 1px;
    height: 1px;
    filter: alpha(opacity=0);
    -ms-filter: alpha(opacity=0);
    overflow: hidden;
}

.radio-box label {
    position: relative;
    display: inline-block;
    padding-left: 35px;
    font-size: var(--font-size14);
    font-weight: 700;
    color: var(--txt-dark);
    cursor: pointer;
    line-height: 30px;
}

.radio-box label:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    margin-top: -15px;
    line-height: 30px;
    background-image: url(/img/svg/ico-radio.svg);
}
.radio-box input[type="radio"]:checked + label:before {
    background-image: url(/img/svg/ico-radio-checked.svg);
}

/* .radio-box label:after {
    position: absolute;
    content: "\2022";
    font-size: 30px;
    left: 6px;
    top: 0;
    line-height: 16px;
    font-weight: 500;
    display: none;
}

.radio-box input[type="radio"]:checked + label:after {
    display: block;
} */

.swiper-wrapper {
    display: -webkit-box;
}

/* input type="file"*/
.fileBox {
    position: relative;
}

.fileBox .inputBox {
    float: left;
    box-sizing: border-box;
}

.fileBox input[type="text"] {
    float: left;
    overflow: hidden;
    box-sizing: border-box;
    height: 32px;
    padding: 8px 10px;
    border: 1px solid #cccccc;
    line-height: 1;
    background: #fafafa;
    box-sizing: border-box;
}

.fileBox .fileBtn {
    float: left;
    margin-left: 5px;
    box-sizing: border-box;
}

.fileBox .fileBtn label {
    display: inline-block;
    width: 110px;
    font-size: 14px;
    line-height: 40px;
    height: 40px;
    letter-spacing: -1px;
    color: #ffffff;
    background: #999999;
    text-align: center;
    border-radius: 4px;
    box-sizing: border-box;
}

.fileBox .fileBtn input[type="file"] {
    visibility: hidden;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
}



.wid10 {
    width: 10%;
}

.wid20 {
    width: 20%;
}

.wid30 {
    width: 30%;
}

.wid40 {
    width: 40%;
}

.wid50 {
    width: 50%;
}

.wid60 {
    width: 60%;
}

.wid70 {
    width: 70%;
}

.wid80 {
    width: 80%;
}

.wid90 {
    width: 90%;
}

.wid100 {
    width: 100%;
}

.max100 {
    max-width: 100px;
}

.max150 {
    max-width: 150px;
}

.max200 {
    max-width: 200px;
}

.max250 {
    max-width: 250px;
}

.max300 {
    max-width: 300px;
}

.max350 {
    max-width: 350px;
}

.max400 {
    max-width: 400px;
}

.max450 {
    max-width: 450px;
}

.max500 {
    max-width: 500px;
}

.max550 {
    max-width: 550px;
}

.max600 {
    max-width: 600px;
}

.max650 {
    max-width: 650px;
}

.max700 {
    max-width: 700px;
}

.max750 {
    max-width: 750px;
}

.max800 {
    max-width: 800px;
}

.max850 {
    max-width: 850px;
}

.max900 {
    max-width: 900px;
}

.max950 {
    max-width: 950px;
}

.max1000 {
    max-width: 1000px;
}

.mt0 {
    margin-top: 0px !important;
}

.mt10 {
    margin-top: 10px !important;
}

.mt20 {
    margin-top: 20px !important;
}

.mt30 {
    margin-top: 30px !important;
}

.mt40 {
    margin-top: 40px !important;
}

.mt50 {
    margin-top: 50px !important;
}

.mt60 {
    margin-top: 60px !important;
}

.mt70 {
    margin-top: 70px !important;
}

.mt80 {
    margin-top: 80px !important;
}

.mt90 {
    margin-top: 90px !important;
}

.mt100 {
    margin-top: 100px !important;
}

.mb0 {
    margin-bottom: 0px !important;
}

.mb10 {
    margin-bottom: 10px !important;
}

.mb20 {
    margin-bottom: 20px !important;
}

.mb30 {
    margin-bottom: 30px !important;
}

.mb40 {
    margin-bottom: 40px !important;
}

.mb50 {
    margin-bottom: 50px !important;
}

.mb60 {
    margin-bottom: 60px !important;
}

.mb70 {
    margin-bottom: 70px !important;
}

.mb80 {
    margin-bottom: 80px !important;
}

.mb90 {
    margin-bottom: 90px !important;
}

.mb100 {
    margin-bottom: 100px !important;
}

.ml0 {
    margin-left: 0px !important;
}

.ml10 {
    margin-left: 10px !important;
}

.ml20 {
    margin-left: 20px !important;
}

.ml30 {
    margin-left: 30px !important;
}

.ml40 {
    margin-left: 40px !important;
}

.ml50 {
    margin-left: 50px !important;
}

.mr0 {
    margin-right: 0px !important;
}

.mr10 {
    margin-right: 10px !important;
}

.mr20 {
    margin-right: 20px !important;
}

.mr30 {
    margin-right: 30px !important;
}

.mr40 {
    margin-right: 40px !important;
}

.mr50 {
    margin-right: 50px !important;
}

.pt10 {
    padding-top: 10px !important;
}

.pt20 {
    padding-top: 20px !important;
}

.pt30 {
    padding-top: 30px !important;
}

.pt40 {
    padding-top: 40px !important;
}

.pt50 {
    padding-top: 50px !important;
}

.pt60 {
    padding-top: 60px !important;
}

.pt70 {
    padding-top: 70px !important;
}

.pb10 {
    padding-bottom: 10px !important;
}

.pb20 {
    padding-bottom: 20px !important;
}

.pb30 {
    padding-bottom: 30px !important;
}

.pb40 {
    padding-bottom: 40px !important;
}

.pb50 {
    padding-bottom: 50px !important;
}

.pb60 {
    padding-bottom: 60px !important;
}

.pb70 {
    padding-bottom: 70px !important;
}

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

.bno {
    border: none !important;
}

.blind {
    position: absolute;
    top: -999999px;
    width: 0;
    height: 0;
    font-size: 0;
    overflow: hidden;
}

.clear:after {
    clear: both;
    content: "";
    display: block;
}

.hidden {
    text-indent: -9999px;
    width: 0px;
    height: 0px;
    line-height: 0px;
    font-size: 0px;
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: alpha(opacity=0);
    overflow: hidden;
    visibility: hidden;
}

.fl_l {
    float: left !important;
}

.fl_r {
    float: right !important;
}

.wbreak {
    word-break: break-all !important;
}

.tb {
    display: table;
    width: 100%;
    height: 100%
}

.tbc {
    display: table-cell;
    width: 100%;
    height: 100%;
    vertical-align: middle;
}

.img {
}

.img img {
    max-width: 100%
}

.pic {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.pic img {
    width: 100%;
    max-width: 100%;
    height: auto;
    opacity: 0;
    visibility: hidden;
}

.inb{display: inline;}
.dpb{display: block;}

/* Font */
.ft12 {
    font-size: 12px !important;
}

.ft13 {
    font-size: 13px !important;
}

.ft14 {
    font-size: 14px !important;
}

.ft15 {
    font-size: 15px !important;
}

.ft16 {
    font-size: 16px !important;
}

.ft17 {
    font-size: 17px !important;
}

.ft18 {
    font-size: 18px !important;
}

.ft19 {
    font-size: 19px !important;
}

.ft20 {
    font-size: 20px !important;
}

.ft21 {
    font-size: 21px !important;
}

.ft22 {
    font-size: 22px !important;
}

.ft23 {
    font-size: 23px !important;
}

.ft24 {
    font-size: 24px !important;
}

.ft25 {
    font-size: 25px !important;
}

.ft26 {
    font-size: 26px !important;
}

.ft27 {
    font-size: 27px !important;
}

.ft28 {
    font-size: 28px !important;
}

.ft29 {
    font-size: 29px !important;
}

.ft30 {
    font-size: 30px !important;
}

.ft31 {
    font-size: 31px !important;
}

.ft32 {
    font-size: 32px !important;
}

.ft65 {
    font-size: 65px !important;
    letter-spacing: -4px;
    line-height: 60px;
}

.fs80 {
    font-size: 8rem;
}

.fs70 {
    font-size: 7rem;
}

.fs60 {
    font-size: 6rem;
}

.fs55 {
    font-size: 5.5rem;
}

.fs50 {
    font-size: 5rem;
}

.fs45 {
    font-size: 4.5rem;
}

.fs40 {
    font-size: 4rem;
}

.fs35 {
    font-size: 3.5rem;
}

.fs30 {
    font-size: 3rem;
}

.fs25 {
    font-size: 2.5rem;
}

.fs20 {
    font-size: 2rem;
}

.fs18 {
    font-size: 1.8rem;
}

.fs17 {
    font-size: 1.7rem;
}

.fs16 {
    font-size: 1.6rem;
}

.fs15 {
    font-size: 1.5rem;
}

.fs14 {
    font-size: 1.4rem;
}

.fs13 {
    font-size: 1.3rem;
}

.fs12 {
    font-size: 1.2rem;
}

.fs11 {
    font-size: 1.1rem;
}

.fs10 {
    font-size: 1rem;
}

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

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

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

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

.txt_b {
    font-weight: bold !important;
}

.txt_line {
    text-decoration: underline !important;
}

.txt_black {
    color: #000000 !important;
}

.txt_white {
    color: #ffffff !important;
}

.fw200 {
    font-weight: 200 !important;
}

.fw300 {
    font-weight: 300 !important;
}

.fw400 {
    font-weight: 400 !important;
}

.fw500 {
    font-weight: 500 !important;
}

.fw600 {
    font-weight: 600 !important;
}

.fw800 {
    font-weight: 800 !important;
}

/* col width */
.col02 > * {
    width: 50% !important;
}

.col03 > * {
    width: 33.3333% !important;
}

.col04 > * {
    width: 25% !important;
}

.col05 > * {
    width: 20% !important;
}

.col06 > * {
    width: 16.6666% !important;
}

.col07 > * {
    width: 14.285% !important;
}

.col08 > * {
    width: 12.5% !important;
}

.col09 > * {
    width: 11.1111% !important;
}

.col10 > * {
    width: 10% !important;
}

/* animated */

.animate [class*="ani-"] {
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter: alpha(opacity=100);
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
}

.fromLeft:not(.done) {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: alpha(opacity=0);
    transform: translate3d(-50px, 0, 0);
    -webkit-transform: translate3d(-50px, 0, 0);
    -o-transform: translate3d(-50px, 0, 0);
    -ms-transform: translate3d(-50px, 0, 0);
    -moz-transform: translate3d(-50px, 0, 0);
}

.fromRight:not(.done) {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: alpha(opacity=0);
    transform: translate3d(50px, 0, 0);
    -webkit-transform: translate3d(50px, 0, 0);
    -o-transform: translate3d(50px, 0, 0);
    -ms-transform: translate3d(50px, 0, 0);
    -moz-transform: translate3d(50px, 0, 0);
}

.fromBottom:not(.done) {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: alpha(opacity=0);
    transform: translate3d(0, 100px, 0);
    -webkit-transform: translate3d(0, 100px, 0);
    -o-transform: translate3d(0, 100px, 0);
    -ms-transform: translate3d(0, 100px, 0);
    -moz-transform: translate3d(0, 100px, 0);
}

.fromTop:not(.done) {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: alpha(opacity=0);
    transform: translate3d(0, -100px, 0);
    -webkit-transform: translate3d(0, -100px, 0);
    -o-transform: translate3d(0, -100px, 0);
    -ms-transform: translate3d(0, -100px, 0);
    -moz-transform: translate3d(0, -100px, 0);
}

.fromCenter:not(.done) {
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: alpha(opacity=0);
    transform: scale(0.8) translate3d(0, 0, 0);
    -webkit-transform: scale(0.8) translate3d(0, 0, 0);
    -o-transform: scale(0.8) translate3d(0, 0, 0);
    -ms-transform: scale(0.8) translate3d(0, 0, 0);
    -moz-transform: scale(0.8) translate3d(0, 0, 0);
}

.animate [class*="ani-"] {
    transition-property: transform, opacity;
    -webkit-transition-property: transform, opacity;
    transition-duration: 0.8s;
    -webkit-transition-duration: 0.8s;
    -o-transition-duration: .8s;
    -moz-transition-duration: .8s;
}

.animate.fast [class*="ani-"] {
    transition-duration: 0.6s;
    -webkit-transition-duration: 0.6s;
    -o-transition-duration: .6s;
    -moz-transition-duration: .6s;
}

.animate.slow [class*="ani-"] {
    transition-duration: 1s;
    -webkit-transition-duration: 1s;
    -o-transition-duration: 1s;
    -moz-transition-duration: 1s;
}

.animate .ani-1 {
    transition-delay: 10ms;
    -webkit-transition-delay: 10ms;
    -o-transition-delay: 10ms;
    -moz-transition-delay: 10ms;
}

.animate .ani-2 {
    transition-delay: 160ms;
    -webkit-transition-delay: 160ms;
    -o-transition-delay: 160ms;
    -moz-transition-delay: 160ms;
}

.animate .ani-3 {
    transition-delay: 320ms;
    -webkit-transition-delay: 320ms;
    -o-transition-delay: 320ms;
    -moz-transition-delay: 320ms;
}

.animate .ani-4 {
    transition-delay: 480ms;
    -webkit-transition-delay: 480ms;
    -o-transition-delay: 480ms;
    -moz-transition-delay: 480ms;
}

.animate .ani-5 {
    transition-delay: 640ms;
    -webkit-transition-delay: 640ms;
    -o-transition-delay: 640ms;
    -moz-transition-delay: 640ms;
}

.animate .ani-6 {
    transition-delay: 800ms;
    -webkit-transition-delay: 800ms;
    -o-transition-delay: 800ms;
    -moz-transition-delay: 800ms;
}

.animate .ani-7 {
    transition-delay: 960ms;
    -webkit-transition-delay: 960ms;
    -o-transition-delay: 960ms;
    -moz-transition-delay: 960ms;
}

.aniamte .ani-8 {
    transition-delay: 1120ms;
    -webkit-transition-delay: 1120ms;
    -o-transition-delay: 1120ms;
    -moz-transition-delay: 1120ms;
}

.aniamte .ani-9 {
    transition-delay: 1280ms;
    -webkit-transition-delay: 1280ms;
    -o-transition-delay: 1280ms;
    -moz-transition-delay: 1280ms;
}

.animate .ani-10 {
    transition-delay: 1440ms;
    -webkit-transition-delay: 1440ms;
    -o-transition-delay: 1440ms;
    -moz-transition-delay: 1440ms;
}

.animate .ani-11 {
    transition-delay: 1600ms;
    -webkit-transition-delay: 1600ms;
    -o-transition-delay: 1600ms;
    -moz-transition-delay: 1600ms;
}

.fast.animate .ani-1 {
    transition-delay: 10ms;
    -webkit-transition-delay: 10ms;
    -o-transition-delay: 10ms;
    -moz-transition-delay: 10ms;
}

.fast.animate .ani-2 {
    transition-delay: 140ms;
    -webkit-transition-delay: 140ms;
    -o-transition-delay: 140ms;
    -moz-transition-delay: 140ms;
}

.fast.animate .ani-3 {
    transition-delay: 270ms;
    -webkit-transition-delay: 270ms;
    -o-transition-delay: 270ms;
    -moz-transition-delay: 270ms;
}

.fast.animate .ani-4 {
    transition-delay: 400ms;
    -webkit-transition-delay: 400ms;
    -o-transition-delay: 400ms;
    -moz-transition-delay: 400ms;
}

.fast.animate .ani-5 {
    transition-delay: 530ms;
    -webkit-transition-delay: 530ms;
    -o-transition-delay: 530ms;
    -moz-transition-delay: 530ms;
}

.fast.animate .ani-6 {
    transition-delay: 660ms;
    -webkit-transition-delay: 660ms;
    -o-transition-delay: 660ms;
    -moz-transition-delay: 660ms;
}

.fast.animate .ani-7 {
    transition-delay: 790ms;
    -webkit-transition-delay: 790ms;
    -o-transition-delay: 790ms;
    -moz-transition-delay: 790ms;
}

.fast.animate .ani-8 {
    transition-delay: 920ms;
    -webkit-transition-delay: 920ms;
    -o-transition-delay: 920ms;
    -moz-transition-delay: 920ms;
}

.slow.animate .ani-1 {
    transition-delay: 10ms;
    -webkit-transition-delay: 10ms;
    -o-transition-delay: 10ms;
    -moz-transition-delay: 10ms;
}

.slow.animate .ani-2 {
    transition-delay: 210ms;
    -webkit-transition-delay: 210ms;
    -o-transition-delay: 210ms;
    -moz-transition-delay: 210ms;
}

.slow.animate .ani-3 {
    transition-delay: 420ms;
    -webkit-transition-delay: 420ms;
    -o-transition-delay: 420ms;
    -moz-transition-delay: 420ms;
}

.slow.animate .ani-4 {
    transition-delay: 630ms;
    -webkit-transition-delay: 630ms;
    -o-transition-delay: 630ms;
    -moz-transition-delay: 630ms;
}

.slow.animate .ani-5 {
    transition-delay: 840ms;
    -webkit-transition-delay: 840ms;
    -o-transition-delay: 840ms;
    -moz-transition-delay: 840ms;
}

.slow.animate .ani-6 {
    transition-delay: 1050ms;
    -webkit-transition-delay: 1050ms;
    -o-transition-delay: 1050ms;
    -moz-transition-delay: 1050ms;
}

.slow.animate .ani-7 {
    transition-delay: 1260ms;
    -webkit-transition-delay: 1260ms;
    -o-transition-delay: 1260ms;
    -moz-transition-delay: 1260ms;
}

.slow.animate .ani-8 {
    transition-delay: 1470ms;
    -webkit-transition-delay: 1470ms;
    -o-transition-delay: 1470ms;
    -moz-transition-delay: 1470ms;
}

.scale [class*="sc-"] {
    transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    transition-property: transform;
    -webkit-transition-property: transform;
    -o-transition-property: transform;
    -moz-transition-property: transform;
    transition-duration: 0.8s;
    -webkit-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
}

.scale .fromSc9:not(.done) {
    transform: scale(0.9);
    -webkit-transform: scale(0.9);
    -o-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -moz-transform: scale(0.9);
}

.scale .fromSc8:not(.done) {
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
    -o-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -moz-transform: scale(0.8);
}

.scale .fromSc7:not(.done) {
    transform: scale(0.7);
    -webkit-transform: scale(0.7);
    -o-transform: scale(0.7);
    -ms-transform: scale(0.7);
    -moz-transform: scale(0.7);
}

.scale .fromSc6:not(.done) {
    transform: scale(0.6);
    -webkit-transform: scale(0.6);
    -o-transform: scale(0.6);
    -ms-transform: scale(0.6);
    -moz-transform: scale(0.6);
}

.scale .fromSc5:not(.done) {
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    -o-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -moz-transform: scale(0.5);
}

.scale .fromSc11:not(.done) {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -moz-transform: scale(1.1);
}

.scale .fromSc12:not(.done) {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -moz-transform: scale(1.2);
}

.scale .fromSc13:not(.done) {
    transform: scale(1.3);
    -webkit-transform: scale(1.3);
    -o-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -moz-transform: scale(1.3);
}

.scale .fromSc14:not(.done) {
    transform: scale(1.4);
    -webkit-transform: scale(1.4);
    -o-transform: scale(1.4);
    -ms-transform: scale(1.4);
    -moz-transform: scale(1.4);
}

.scale .fromSc15:not(.done) {
    transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -moz-transform: scale(1.5);
}

.scale .sc-1 {
    transition-delay: 10ms;
    -webkit-transition-delay: 10ms;
    -o-transition-delay: 10ms;
    -moz-transition-delay: 10ms;
}

.scale .sc-2 {
    transition-delay: 160ms;
    -webkit-transition-delay: 160ms;
    -o-transition-delay: 160ms;
    -moz-transition-delay: 160ms;
}

.scale .sc-3 {
    transition-delay: 320ms;
    -webkit-transition-delay: 320ms;
    -o-transition-delay: 320ms;
    -moz-transition-delay: 320ms;
}

.scale .sc-4 {
    transition-delay: 480ms;
    -webkit-transition-delay: 480ms;
    -o-transition-delay: 480ms;
    -moz-transition-delay: 480ms;
}

.scale .sc-5 {
    transition-delay: 640ms;
    -webkit-transition-delay: 640ms;
    -o-transition-delay: 640ms;
    -moz-transition-delay: 640ms;
}

.scale .sc-6 {
    transition-delay: 800ms;
    -webkit-transition-delay: 800ms;
    -o-transition-delay: 800ms;
    -moz-transition-delay: 800ms;
}

.scale .sc-7 {
    transition-delay: 960ms;
    -webkit-transition-delay: 960ms;
    -o-transition-delay: 960ms;
    -moz-transition-delay: 960ms;
}

.scale .sc-8 {
    transition-delay: 1120ms;
    -webkit-transition-delay: 1120ms;
    -o-transition-delay: 1120ms;
    -moz-transition-delay: 1120ms;
}

.fast.scale .sc-1 {
    transition-delay: 10ms;
    -webkit-transition-delay: 10ms;
    -o-transition-delay: 10ms;
    -moz-transition-delay: 10ms;
}

.fast.scale .sc-2 {
    transition-delay: 140ms;
    -webkit-transition-delay: 140ms;
    -o-transition-delay: 140ms;
    -moz-transition-delay: 140ms;
}

.fast.scale .sc-3 {
    transition-delay: 270ms;
    -webkit-transition-delay: 270ms;
    -o-transition-delay: 270ms;
    -moz-transition-delay: 270ms;
}

.fast.scale .sc-4 {
    transition-delay: 400ms;
    -webkit-transition-delay: 400ms;
    -o-transition-delay: 400ms;
    -moz-transition-delay: 400ms;
}

.fast.scale .sc-5 {
    transition-delay: 530ms;
    -webkit-transition-delay: 530ms;
    -o-transition-delay: 530ms;
    -moz-transition-delay: 530ms;
}

.fast.scale .sc-6 {
    transition-delay: 660ms;
    -webkit-transition-delay: 660ms;
    -o-transition-delay: 660ms;
    -moz-transition-delay: 660ms;
}

.fast.scale .sc-7 {
    transition-delay: 790ms;
    -webkit-transition-delay: 790ms;
    -o-transition-delay: 790ms;
    -moz-transition-delay: 790ms;
}

.fast.scale .sc-8 {
    transition-delay: 920ms;
    -webkit-transition-delay: 920ms;
    -o-transition-delay: 920ms;
    -moz-transition-delay: 920ms;
}

.slow.scale .sc-1 {
    transition-delay: 10ms;
    -webkit-transition-delay: 10ms;
    -o-transition-delay: 10ms;
    -moz-transition-delay: 10ms;
}

.slow.scale .sc-2 {
    transition-delay: 210ms;
    -webkit-transition-delay: 210ms;
    -o-transition-delay: 210ms;
    -moz-transition-delay: 210ms;
}

.slow.scale .sc-3 {
    transition-delay: 420ms;
    -webkit-transition-delay: 420ms;
    -o-transition-delay: 420ms;
    -moz-transition-delay: 420ms;
}

.slow.scale .sc-4 {
    transition-delay: 630ms;
    -webkit-transition-delay: 630ms;
    -o-transition-delay: 630ms;
    -moz-transition-delay: 630ms;
}

.slow.scale .sc-5 {
    transition-delay: 840ms;
    -webkit-transition-delay: 840ms;
    -o-transition-delay: 840ms;
    -moz-transition-delay: 840ms;
}

.slow.scale .sc-6 {
    transition-delay: 1050ms;
    -webkit-transition-delay: 1050ms;
    -o-transition-delay: 1050ms;
    -moz-transition-delay: 1050ms;
}

.slow.scale .sc-7 {
    transition-delay: 1260ms;
    -webkit-transition-delay: 1260ms;
    -o-transition-delay: 1260ms;
    -moz-transition-delay: 1260ms;
}

.slow.scale .sc-8 {
    transition-delay: 1470ms;
    -webkit-transition-delay: 1470ms;
    -o-transition-delay: 1470ms;
    -moz-transition-delay: 1470ms;
}

.vertical-i {
    animation: vb 1s infinite;
}

@keyframes vb {
    0% {
        bottom: 0;
    }
    50% {
        bottom: 10px;
    }
    100% {
        bottom: 0px;
    }
}

@keyframes vt {
    0% {
        top: 0;
    }
    50% {
        top: 10px;
    }
    100% {
        top: 0;
    }
}
/* main */
#main, #sub {
    padding-top: 160px;
}

#main .swiper-wrapper,
#sub .swiper-wrapper {
    height: auto;
}

#main .main-visual {
    margin-top: 40px;
}

#main .main-visual .top {
    align-items: flex-start;
}

#main .main-visual .top .visual-swiper {
    position: relative;
    width: 66%;
    border-radius: 15px;
    overflow: hidden;
}

#main .main-visual .top .visual-swiper .arr {
    position: absolute;
    display: block;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
}

#main .main-visual .top .visual-swiper .arr-next {
    right: 0;
}

#main .main-visual .top .visual-swiper .arr-prev {
    left: 0;
}

#main .main-visual .top .topic-list {
    width: 34%;
    padding-left: 20px;
    box-sizing: border-box;
}

#main .main-visual .top .topic-list .tab-tit {
    padding: 0 20px;
}

#main .main-visual .top .topic-list .tab-tit ul {
    justify-content: left;
    gap: 20px;
}

#main .main-visual .top .topic-list .tab-tit ul li a {
    position: relative;
    display: block;
    padding-bottom: 5px;
    font-size: var(--font-size18);
    font-weight: 800;
    color: var(--txt-normal);
    line-height: 1.2;
}

#main .main-visual .top .topic-list .tab-tit ul li a:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background-color: var(--point-color);
    opacity: 0;
    transition: opacity 0.2s linear;
}

#main .main-visual .top .topic-list .tab-tit ul li a.on,
#main .main-visual .top .topic-list .tab-tit ul li a:hover {
    color: var(--txt-dark);
}

#main .main-visual .top .topic-list .tab-tit ul li a.on:before,
#main .main-visual .top .topic-list .tab-tit ul li a:hover:before {
    opacity: 1;
}

#main .main-visual .top .topic-list .tab-box {
    margin-top: 20px;
}

#main .main-visual .top .topic-list .tab-box .tab-con {
    display: none;
    padding: 8px 20px;
    border-radius: 15px;
    background-color: #ffffff;
    border: 1px solid var(--line-light);
}

#main .main-visual .top .topic-list .tab-box .tab-con.on {
    display: block;
}

#main .main-visual .top .topic-list .tab-box .tab-con li {
    padding: 9px 0;
}

#main .main-visual .top .topic-list .tab-box .tab-con li a .title {
    gap: 10px;
}

#main .main-visual .top .topic-list .tab-box .tab-con li a .title .cate {
    width: 65px;
    height: 24px;
    line-height: 22px;
    border-radius: 3px;
    border: 1px solid var(--txt-normal);
    background-color: var(--bg-normal);
    text-align: center;
    font-size: var(--font-size12);
    font-weight: 700;
    flex: none;
    box-sizing: border-box;
    transition: all 0.2s linear;
}

#main .main-visual .top .topic-list .tab-box .tab-con li a:hover .title .cate {
    border: 1px solid var(--point-color);
    background-color: #e9f3ff;
    color: var(--point-color);
}

#main .main-visual .top .topic-list .tab-box .tab-con li a .title p {
    font-size: 15px;
    color: var(--txt-dark);
    transition: all 0.2s linear;
}

#main .main-visual .top .topic-list .tab-box .tab-con li a:hover .title p {
    color: var(--point-color);
}

#main .main-visual .top .topic-list .tab-box .tab-con li a .comment {
    width: 50px;
    justify-content: left;
    gap: 5px;
    flex: none;
}

#main .main-visual .top .topic-list .tab-box .tab-con.best-tab li a .comment span{
    font-size: 15px;
    color: var(--txt-dark);
}

#main .main-visual .top .topic-list .tab-box .tab-con li a .comment span {
    font-size: 13px;
    line-height: 140%;
    color: var(--point-color);
    transition: color 0.2s linear;
}

#main .main-visual .top .topic-list .tab-box .tab-con.best-tab li a:hover .comment span{
    color: var(--point-color);
}

#main .main-visual .btm {
    margin-top: 40px;
}

#main .main-visual .btm .link-list.pcta {
    padding: 10px;
    border-radius: 15px;
    border: 1px solid var(--line-white);
    background: #ffffff;
    box-shadow: var(--shadow-noraml);
    box-sizing: border-box;
}

#main .main-visual .btm .link-list.pcta ul {
    height: 90px;
}

#main .main-visual .btm .link-list.pcta ul li {
    position: relative;
    width: 10%;
    text-align: center;
}

#main .main-visual .btm .link-list.pcta ul li:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -27px;
    width: 1px;
    height: 54px;
    background-color: #d2d2d2;
}

#main .main-visual .btm .link-list.pcta ul li:first-of-type:before {
    display: none;
}

#main .main-visual .btm .link-list.pcta ul li a {
    height: 56px;
    gap: 10px;
}

#main .main-visual .btm .link-list ul li a .img img {
    position: relative;
    transition: all 0.2s linear;
}

#main .main-visual .btm .link-list ul li a .img.ico1 img {
    right: -5px;
}

#main .main-visual .btm .link-list ul li a .img.ico2 img {
    right: -2px;
}

#main .main-visual .btm .link-list ul li a .img.ico3 img {
    right: -3px;
}

#main .main-visual .btm .link-list ul li a:hover .img img {
    filter: drop-shadow(1px 3px 3px rgba(0, 0, 0, 0.25));
}

#main .main-visual .btm .link-list ul li a .txt b {
    display: block;
    font-size: var(--font-size14);
    color: var(--txt-dark);
    font-weight: 800;
    line-height: 1.2;
    transition: color 0.2s linear;
}

#main .main-visual .btm .link-list ul li a:hover .txt b {
    color: var(--point-color);
}

#main .main-visual .btm .link-list.mo {
    margin: -10px -5px;
}

#main .main-visual .btm .link-list.mo ul {
    justify-content: center;
}

#main .main-visual .btm .link-list.mo ul li {
    margin: 10px 5px;
    width: 85px;
    text-align: center;
    background-color: #ffffff;
    border-radius: 15px;
    border: 1px solid var(--line-light);
    box-shadow: var(--shadow-noraml);
    box-sizing: border-box;
}

#main .main-visual .btm .link-list.mo ul li a {
    height: 83px;
    gap: 5px;
}

#main .main-visual .btm .link-list.mo ul li a .img.ico1 img {
    right: -4px;
}

#main .main-visual .btm .link-list.mo ul li a .img.ico2 img {
    right: -1px;
}

#main .main-visual .btm .link-list.mo ul li a .img.ico3 img {
    right: -2px;
}

#main .section {
    position: relative;
    padding: 30px 0;
    z-index: 3;
}

#main .section .sec-con {
    padding-top: 30px;
}

#main .section .box-list > ul {
    justify-content: left;
    flex-wrap: wrap;
    row-gap: 20px;
    margin: 0 -10px;
}

#main .section .box-list > ul > li {
    width: 16.6666%;
    padding: 0 10px;
    box-sizing: border-box;
}

#main .section .box-list > ul > li.blank {
    width: 100%;
    font-size: var(--font-size16);
}

#main .section .box-list > ul > li .inner {
    position: relative;
}

#main .section .box-list > ul > li a {
    position: relative;
    display: block;
    padding: 15px;
    border-radius: 15px;
    border: 1px solid var(--line-light);
    background-color: #ffffff;
    box-sizing: border-box;
}

#main .section .box-list > ul > li a.hover {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    border: 1px solid var(--point-color);
    box-shadow: var(--shadow-blue);
    z-index: 10;
}

#main .section .box-list > ul > li .dday {
    position: absolute;
    right: 15px;
    top: 15px;
}

#main .section .box-list > ul > li .pic {
    border-radius: 10px;
    overflow: hidden;
}

#main .section .box-list > ul > li .txt-box {
    align-items: flex-start;
    gap: 7px;
    padding-top: 15px;
    line-height: 120%;
    color: var(--txt-dark);
}

#main .section .box-list > ul > li .txt-box .tit {
    height: 39px;
}

#main .section .box-list > ul > li .txt-box .tit em {
    font-size: 15px;
    font-weight: 800;
    -webkit-line-clamp: 2;
}

#main .section .box-list > ul > li .txt-box .info-list li {
    margin-top: 7px;
}

#main .section .box-list > ul > li .txt-box .info-list li:first-of-type {
    margin-top: 0;
}

#main .section .box-list > ul > li .txt-box .info-list li .list-tit b {
    display: block;
    font-size: 13px;
    color: var(--point-color);
}

#main .section .box-list > ul > li .txt-box .info-list li .list-con p {
    font-size: var(--font-size14);
}

#main .section .box-list > ul > li .txt-box .tag-list ul {
    line-height: 110%;
}

#main .section .box-list > ul > li .txt-box .tag-list ul li {
    display: inline;
    font-size: 13px;
    color: var(--point-color);
}

#main .section .btn-more {
    margin-top: 30px;
}

#main .section .btn-more > a {
    margin: 0 auto;
    width: 240px;
    height: 67px;
    border: 1.5px solid var(--txt-dark);
    border-radius: 35px;
    gap: 20px;
    box-sizing: border-box;
    transition: all 0.2s linear;
}

#main .section .btn-more > a:hover {
    border: 1px solid var(--point-color);
    background-color: var(--point-color);
}

#main .section .btn-more > a span {
    font-size: var(--font-size14);
    color: var(--txt-dark);
    transition: all 0.2s linear;
}

#main .section .btn-more > a:hover span {
    color: #ffffff;
}

#main .section .btn-more > a:hover svg path {
    stroke: #ffffff;
}

#main .section1 {
    padding: 30px 0 30px;
}

#main .section2 {
    background-color: #eff7ff;
    z-index: 1;
}

#main .section4 {
    background-color: #f8f8f8;
    z-index: 1;
}

#main .section5 {
    padding: 30px 0;
}

#main .section5 .tab-tit ul {
    gap: 40px;
}

#main .section5 .tab-tit ul li a {
    position: relative;
    display: block;
    padding-bottom: 5px;
    font-size: var(--font-size18);
    font-weight: 800;
    line-height: 1.2;
}

#main .section5 .tab-tit ul li a.on {
    color: var(--txt-dark);
}

#main .section5 .tab-tit ul li a.on:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background-color: var(--point-color);
}

#main .section5 .tab-box {
    margin-top: 30px;
}

#main .section5 .tab-con {
    display: none;
}

#main .section5 .tab-con.on {
    display: block;
}

#main .section5 .tab-con ul {
    margin: 0 -10px;
    flex-wrap: wrap;
    row-gap: 10px;
}

#main .section5 .tab-con ul li {
    width: 33.3333%;
    padding: 0 10px;
    box-sizing: border-box;
}

#main .section5 .tab-con ul li.blank {
    width: 100%;
    font-size: var(--font-size16);
}

#main .section5 .tab-con ul li a {
    align-items: flex-start;
    gap: 15px;
    padding: 40px;
    background-color: #ffffff;
    border-radius: 15px;
    border: 1px solid var(--line-white);
    box-shadow: var(--shadow-noraml);
    line-height: 1.2;
    transition: all 0.2s linear;
}

#main .section5 .tab-con ul li a:hover {
    border: 1px solid var(--point-color);
    box-shadow: var(--shadow-blue);
}

#main .section5 .tab-con ul li a .cate {
    font-size: 15px;
    color: var(--point-color);
}

#main .section5 .tab-con ul li a .title {
    font-size: var(--font-size20);
    color: var(--txt-dark);
}

#main .section5 .tab-con ul li a .content {
    height: 63px;
    font-size: 15px;
    line-height: 140%;
    -webkit-line-clamp: 3;
}

#main .section5 .tab-con ul li a .info {
    width: 100%;
    padding-top: 10px;
}

#main .section5 .tab-con ul li a .info .date {
    font-size: 13px;
    color: var(--txt-light);
}

#main .section5 .tab-con ul li a .info .comment {
    gap: 5px;
}

#main .section5 .tab-con ul li a .info .comment span {
    font-size: 13px;
    color: var(--point-color);
}

/* sub */
/* common */
#sub .sub-visual {
    margin-top: 40px;
}

#sub .sub-visual .visual-swiper {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
}

#sub .sub-visual .visual-swiper .arr {
    position: absolute;
    display: block;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
}

#sub .sub-visual .visual-swiper .arr-next {
    right: 0;
}

#sub .sub-visual .visual-swiper .arr-prev {
    left: 0;
}

#sub .sub-category {
    padding: 30px 0 50px;
    line-height: 1.2;
    text-align: center;
}

#sub.culture .sub-category {
    padding: 30px 0;
}

#sub.culture .sub-category.row-1 {
    padding-top: 30px;
}

#sub.culture .sub-category.row-2 {
    background-color: #f8f8f8;
}

#sub.community .sub-category {
    padding-bottom: 60px;
}

#sub.board-idx .sub-category .cate-tab-tit {
    margin-top: 20px;
}

#sub .sub-category .cate-tab-tit ul {
    justify-content: center;
}

#sub .sub-category .cate-tab-tit ul li {
    width: auto;
    margin: 0 15px;
}

#sub .sub-category .cate-tab-tit ul li a {
    position: relative;
    display: block;
    padding-bottom: 5px;
}

#sub .sub-category .cate-tab-tit ul li a.on {
    color: var(--txt-dark);
}

#sub .sub-category .cate-tab-tit ul li a.on:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background-color: var(--point-color);
}

#sub .sub-category .cate-tab-tit ul li a h3 {
    font-size: var(--font-size18);
    font-weight: 800;
    letter-spacing: var(--txt-space54);
}

#sub .sub-category .cate-tab-con {
    margin-top: 30px;
}

#sub .big-box-list > ul {
    justify-content: left;
    flex-wrap: wrap;
    row-gap: 20px;
    margin: 0 -10px;
    text-align: left;
}

#sub .big-box-list > ul > li {
    width: 25%;
    padding: 0 10px;
    box-sizing: border-box;
}

#sub .big-box-list > ul > li .inner {
    padding: 15px;
    border-radius: 15px;
    border: 1px solid var(--line-light);
    background-color: #ffffff;
}

#sub .big-box-list > ul > li a {
    position: relative;
    display: block;
    box-sizing: border-box;
}

#sub .big-box-list > ul > li a .dday {
    position: absolute;
    right: 0;
    top: 0;
}

#sub .big-box-list > ul > li a .pic {
    border-radius: 10px;
    overflow: hidden;
}

#sub .big-box-list > ul > li a .hover {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.2s linear;
}

#sub .big-box-list > ul > li a:hover .hover {
    opacity: 1;
}

#sub .big-box-list > ul > li a .hover .hover-bg {
    width: 100%;
    height: 100%;
    padding: 30px;
    opacity: 0.9;
    background-color: #33393e;
    backdrop-filter: blur(10px);
    border-radius: 10px;
    overflow: hidden;
    box-sizing: border-box;
}

#sub .big-box-list > ul > li a .hover .txt-box {
    color: #ffffff;
    line-height: 130%;
}

#sub .big-box-list > ul > li a .hover .txt-box .tit em {
    font-size: 15px;
}

#sub .big-box-list > ul > li a .hover .txt-box .info-list {
    margin-top: 20px;
}

#sub .big-box-list > ul > li a .hover .txt-box .info-list b {
    display: block;
    font-size: var(--font-size14);
}

#sub .big-box-list > ul > li a .hover .txt-box .info-list ul {
    padding-left: 6px;
}

#sub .big-box-list > ul > li a .hover .txt-box .info-list ul li {
    position: relative;
    padding-left: 8px;
    font-size: var(--font-size12);
    font-weight: 600;
    line-height: 150%;
}

#sub .big-box-list > ul > li a .hover .txt-box .info-list ul li:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 6px;
    width: 4px;
    height: 1px;
    background-color: #ffffff;
}

#sub .big-box-list > ul > li a .hover .txt-box .host-list {
    margin-top: 10px;
}

#sub .big-box-list > ul > li a .hover .txt-box .host-list p {
    font-size: var(--font-size14);
}

/* board */
#sub.board .sub-board {
    padding-bottom: 30px;
}
#sub.board .sub-board #sub-board{
    position: relative;
    width: 100%; height: 1px;
    top:-160px;
}

#sub.board .sub-board .sec-tit {
    padding: 30px 0 30px;
}

#sub.board .sub-board .board-search {
    width: 100%;
}

#sub.board .sub-board .board-search form {
    gap: 10px;
}

#sub.board-idx .sub-board .top {
    padding-top: 40px;
    border-top: 1px solid #e2e2e2;
}

#sub.community .sub-board .top {
    padding-top: 0;
    border-top: none;
}

#sub.board .search-txt {
    position: relative;
    width: 100%;
    max-width: 330px;
}

#sub.board .search-txt input[type="text"] {
    display: block;
    width: 100%;
    height: 50px;
    padding: 0px 50px 0px 15px;
    background-color: #ffffff;
}

#sub.board .search-txt button[type="submit"] {
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -15px;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    background-color: #c5c5c5;
}

#sub.board .search-txt input[type="text"]:focus + button[type="submit"] {
    background-color: #6c7880;
}

#sub.board .search-txt + .board-select {
    max-width: 240px;
}

#sub.board .sub-board .board-search form .search-detail button {
    display: block;
    padding: 0 15px;
    width: 147px;
    height: 50px;
    border-radius: 10px;
    background-color: #6c7880;
    box-sizing: border-box;
    text-align: left;
}

#sub.board .sub-board .board-search form .search-detail button span {
    position: relative;
    display: block;
    font-size: var(--font-size14);
    color: #ffffff;
    line-height: 1;
}

#sub.board .sub-board .board-search form .search-detail button span:before {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -4px;
    width: 11px;
    height: 8px;
    background-image: url(/img/svg/ico-board-select-down-wh.svg);
}

#sub.board .sub-board .board-search form .search-detail button.on span:before {
    background-image: url(/img/svg/ico-board-select-up-wh.svg);
}

#sub.board .sub-board .search-detail-hide {
    display: none;
    margin: 10px 0 40px;
}

#sub.board .sub-board .search-detail-hide.on {
    display: block;
}

#sub.board .sub-board .search-detail-hide .table table {
    border-bottom: 1px solid var(--line-light);
    table-layout: fixed;
}

#sub.board .sub-board .search-detail-hide .table table tr {
    border-top: 1px solid var(--line-light);
}

#sub.board .sub-board .search-detail-hide .table table th {
    padding: 10px 20px;
    background-color: var(--bg-blue);
    font-size: 15px;
    font-weight: 700;
    color: var(--point-color);
    text-align: left;
}

#sub.board .sub-board .search-detail-hide .table table td {
    padding: 10px 20px;
    height: 60px;
    box-sizing: border-box;
}

#sub.board .sub-board .search-detail-hide .table table td:has(.option-list) {
    overflow: hidden;
}

#sub.board .sub-board .search-detail-hide .option-list {
    position: relative;
    list-style: none;
    padding: 0;
    z-index: 1;
    touch-action: pan-y;
}

#sub.board .sub-board .search-detail-hide .option-list .swiper-slide {
    width: auto;
    font-size: 0;
}

#sub.board .sub-board .search-detail-hide .option-list button {
    font-size: 15px;
    font-weight: 600;
    font-family: "Pretendard", sans-serif;
}

#sub.board .sub-board .search-detail-hide .option-list button.on {
    font-weight: 700;
    color: var(--txt-dark);
}

#sub.board .sub-board .search-detail-hide .form-schedule {
    max-width: 420px;
}

#sub.board .sub-board .search-detail-hide .form-schedule .mid-dash {
    width: 20px;
}

#sub.board .sub-board .search-detail-hide .input-date input[type="date"] {
    padding: 0 10px;
    font-size: 13px;
    height: 50px;
}

#sub.board .sub-board .search-detail-hide .input-date:after {
    width: 22px;
    height: 22px;
    margin-top: -11px;
    right: 10px;
}

#sub.board .sub-board .search-detail-hide .form-select-row {
    gap: 5px;
}

#sub.board .sub-board .search-detail-hide .form-search-txt {
    gap: 5px;
    width: 100%;
}

#sub.board .sub-board .search-detail-hide .board-select > a {
    color: var(--txt-normal);
}

#sub.board .sub-board .search-detail-hide .board-select > a.on,
#sub.board .sub-board .search-detail-hide .board-select.selected > a {
    color: var(--txt-dark);
}

#sub.board .sub-board .search-detail-hide .form-search-row {
    gap: 10px;
}

#sub.board .sub-board .search-detail-hide .form-search-btn {
    gap: 10px;
}
#sub.board .sub-board .search-detail-hide .form-search-btn button {
    padding: 0 15px;
    height: 40px;
    border-radius: 7px;
    border: 1px solid var(--point-color);
    text-align: left;
    box-sizing: border-box;
    transition: all 0.2s linear;
    background-color: #fff;
}

#sub.board .sub-board .search-detail-hide .form-search-btn button:hover {
    background-color: var(--point-color);
}

#sub.board .sub-board .search-detail-hide .form-search-btn button span {
    position: relative;
    display: block;
    font-size: var(--font-size14);
    color: var(--point-color);
    transition: all 0.2s linear;
}

#sub.board .sub-board .search-detail-hide .form-search-btn button:hover span {
    color: #ffffff;
}


#sub.board .sub-board .search-detail-hide .form-search-reset button {
    width: 120px;
}

#sub.board .sub-board .search-detail-hide .form-search-reset button:hover svg path {
    stroke: #ffffff;
}

#sub.board .sub-board .search-detail-hide .form-search-reset button:hover svg path {
    stroke: #ffffff;
}

#sub.board .sub-board .search-detail-hide .search-keyword {
    margin-top: 10px;
}

#sub.board .sub-board .search-detail-hide .search-keyword ul {
    padding: 22px 20px;
    gap: 20px;
    row-gap: 10px;
    flex-wrap: wrap;
    border-top: 1px solid #999999;
    border-bottom: 1px solid #999999;
}

#sub.board .sub-board .search-detail-hide .search-keyword ul li {
    gap: 5px;
}

#sub.board .sub-board .search-detail-hide .search-keyword ul li p {
    font-size: 15px;
    color: var(--txt-dark);
}

#sub.board .sub-board .size:has(.top) + .sub-board-table {
    margin-top: 10px;
}

#sub.board .sub-board-table thead th {
    padding: 20px;
    font-size: var(--font-size14);
    font-weight: 800;
    background-color: var(--bg-normal);
}

#sub.board .sub-board-table thead th.radius-left {
    border-radius: 10px 0 0 10px;
    padding-left: 40px;
}

#sub.board .sub-board-table thead th.radius-right {
    border-radius: 0 10px 10px 0;
    padding-right: 40px;
}

#sub.board .sub-board-table tbody tr {
    background-color: #ffffff;
    border-bottom: 1px solid var(--line-light);
    transition: all 0.2s linear;
    cursor: pointer;
}

#sub.board .sub-board-table tbody tr.bg {
    background-color: var(--bg-blue);
}

#sub.board .sub-board-table tbody td {
    height: 80px;
    padding: 15px 20px;
    text-align: center;
    box-sizing: border-box;
}

#sub.board .sub-board-table tbody .blank {
    border-bottom: none;
}

#sub.board .sub-board-table tbody .blank td {
    height: 0;
    padding: 0;
    padding-top: 5px;
}

#sub.board .sub-board-table tbody td.table-left {
    padding-left: 40px;
}

#sub.board .sub-board-table tbody td.table-right {
    padding-right: 40px;
}

#sub.board .sub-board-table tbody td p {
    font-size: var(--font-size16);
    font-weight: 700;
    color: var(--txt-dark);
    line-height: 120%;
    transition: color 0.2s linear;
}

#sub.board .sub-board-table tbody td.title .row-cen {
    justify-content: left;
    gap: 10px;
    text-align: left;
}

#sub.board .sub-board-table tbody tr:not(.row-delete):hover td.title p {
    color: var(--point-color);
}

#sub.board .sub-board-table tbody td.title .comment {
    gap: 5px;
}

#sub.board .sub-board-table tbody td.title .comment span {
    display: block;
    font-size: 13px;
    color: #6c7880;
}

#sub.board .sub-board-table tbody td.progress .col-cen {
    gap: 5px;
}

#sub.board .sub-board-table tbody td.progress span {
    font-size: var(--font-size16);
    font-weight: 700;
    color: var(--txt-dark);
}

#sub.board .sub-board-table tbody td .dday {
    display: inline-block;
    padding: 5px 7px;
    min-width: 43px;
    font-size: var(--font-size12);
    line-height: 1.2;
    box-sizing: border-box;
}

#sub.board .sub-board .btm .size {
    position: relative;
    padding-top: 43px;
}

#sub.board .sub-board .btn-write {
    position: absolute;
    right: 0;
    top: 30px;
}

#sub.board .sub-board .btn-write > a {
    display: block;
    margin: 0 auto;
    width: 180px;
    height: 60px;
    line-height: 58px;
    border-radius: 30px;
    text-align: center;
    border: 1px solid #333333;
    font-size: var(--font-size16);
    font-weight: 800;
    color: var(--txt-dark);
    transition: all 0.2s linear;
    box-sizing: border-box;
}

#sub.board .sub-board .btn-write > a:hover {
    background-color: var(--point-color);
    border: 1px solid var(--point-color);
    color: #ffffff;
}

#sub.board .board-editor {
    padding: 30px 0;
    background-color: var(--bg-blue);
}

#sub.board .board-editor .editor-box {
    margin-top: 26px;
}

#sub.board .board-editor .editor-box .temporary {
    /* min-height: 600px; */
    padding: 25px 50px;
    border-radius: 15px;
    border: 1px solid var(--line-light);
    background-color: #ffffff;
    box-shadow: var(--shadow-blue);
    box-sizing: border-box;
    font-size: var(--font-size14);
    font-weight: 400;
    color: var(--txt-dark);
}

#sub.board .board-editor .editor-box .temporary:has(iframe){
    font-size: 0;
}

#sub.board .board-editor .editor-box .temporary img{
    max-width: 100%;
}

#sub.board .board-editor .editor-box .temporary a{
    color: var(--point-color);
}

#sub.board .board-editor .editor-box .temporary table{
    width: auto;
    max-width: 100%;
}

#sub.board .board-editor [class ^="btn-"] {
    margin-top: 30px;
}

#sub.board .board-editor [class ^="btn-"] ul {
    gap: 10px;
}

#sub.board .board-editor .btn-editor a {
    display: block;
    width: 100px;
    height: 40px;
    line-height: 40px;
    background-color: #cdd0d2;
    border-radius: 5px;
    font-size: var(--font-size12);
    color: #575a5c;
    text-align: center;
    transition: all 0.2s linear;
}

#sub.board .board-editor .btn-editor a:hover {
    background-color: #333333;
    color: #ffffff;
}

#sub.board .board-editor .btn-save a,
#sub.board .board-editor .btn-save button {
    display: block;
    width: 180px;
    height: 60px;
    line-height: 58px;
    border-radius: 30px;
    font-size: var(--font-size16);
    font-weight: 800;
    text-align: center;
    transition: all 0.2s linear;
}

#sub.board .board-editor .btn-save a {
    border: 1px solid #333333;
    color: var(--txt-dark);
}

#sub.board .board-editor .btn-save a:hover {
    border: 1px solid var(--point-color);
    color: var(--point-color);
}

#sub.board .board-editor .btn-save button {
    background-color: #333333;
    color: #ffffff;
}

#sub.board .board-editor .btn-save button:hover {
    background-color: var(--point-color);
}

#sub.board .board-video {
    padding: 100px 0;
}

#sub.board .board-video .video-box {
    margin-top: 26px;
}

#sub.board .board-map {
    padding: 30px 0;
    background-color: var(--bg-blue);
}

#sub.board .board-map .map-box {
    margin-top: 26px;
    border: 1px solid var(--line-light);
    border-radius: 20px;
    box-shadow: var(--shadow-noraml);
    box-sizing: border-box;
    overflow: hidden;
}

#sub.board .board-map #map {
    height: 600px;
}

/* board-idx */
#sub.board .form form {
    border-top: 1px solid var(--line-light);
}

/* board-view */
#sub.board-view .view-info {
    padding: 30px 0;
}

#sub.board-view .view-info .top {
    align-items: flex-start;
    padding: 20px;
    padding-top: 0;
    border-bottom: 1px solid var(--line-light);
    gap: 20px;
}

#sub.board-view .view-info .top .view-tit {
    gap: 10px;
}

#sub.board-view .view-info .top .view-tit h2 {
    font-size: 3.6rem;
    font-weight: 800;
    letter-spacing: -1.08px;
    line-height: 1.2;
    color: var(--txt-dark);
}

#sub.board-view .view-info .top .view-tit .type {
    font-size: 26px;
}

#sub.board-view .view-info .top .view-data {
    flex: none;
}

#sub.board-view .view-info .top .view-data .due-date {
    gap: 5px;
    justify-content: right;
}

#sub.board-view .view-info .top .view-data .due-date b {
    display: block;
    font-size: var(--font-size22);
    font-weight: 800;
    color: var(--txt-dark);
}

#sub.board-view .view-info .top .view-data .due-date .dday {
    font-size: var(--font-size16);
    line-height: 1.2;
}

#sub.board-view .regist-date {
    margin-top: 8px;
    gap: 21px;
}

#sub.board-view .regist-date p {
    position: relative;
    font-size: var(--font-size14);
    font-weight: 700;
    line-height: 100%;
    color: var(--txt-light);
}

#sub.board-view .regist-date p:before {
    content: "";
    display: block;
    position: absolute;
    left: -10px;
    top: 50%;
    margin-top: -5.5px;
    width: 1px;
    height: 11px;
    background-color: #c6c6c6;
}

#sub.board-view .regist-date p:first-of-type:before {
    display: none;
}

#sub.board-view .view-info .mid {
    align-items: flex-start;
    gap: 53px;
    padding: 0 20px;
    margin-top: 50px;
}

#sub.board-view .view-info .mid .img-box .pic {
    border-radius: 15px;
    border: 1px solid var(--line-light);
    overflow: hidden;
}

#sub.board-view .view-info .mid .btn-share {
    margin-top: 20px;
}

#sub.board-view .view-info .mid .btn-share ul {
    gap: 10px;
}

#sub.board-view .view-info .mid .btn-share a {
    width: 170px;
    height: 55px;
    line-height: 53px;
    background-color: #ffffff;
    border: 1px solid #333333;
    border-radius: 27px;
    gap: 5px;
    transition: all 0.2s linear;
}

#sub.board-view .view-info .mid .btn-share a:hover, #sub.board-view .view-info .mid .btn-share a.on {
    border: 1px solid var(--point-color);
    background-color: var(--point-color);
}

#sub.board-view .view-info .mid .btn-share a span {
    font-size: var(--font-size14);
    color: #333333;
    transition: color 0.2s linear;
}

#sub.board-view .view-info .mid .btn-share a:hover span, #sub.board-view .view-info .mid .btn-share a.on span {
    color: #ffffff;
}

#sub.board-view .view-info .mid .btn-share a:hover svg path, #sub.board-view .view-info .mid .btn-share a.on svg path {
    stroke: #ffffff;
}

#sub.board-view .view-info .mid .btn-share a:hover svg path.bl, #sub.board-view .view-info .mid .btn-share a.on svg path.bl {
    stroke: var(--point-color);
}

#sub.board-view .view-info .mid .table-box {
    width: 840px;
}

#sub.board-view .view-info .mid .table-box table {
    border-bottom: 1px solid var(--line-light);
}

#sub.board-view .view-info .mid .table-box table tr {
    border-top: 1px solid var(--line-light);
}

#sub.board-view .view-info .mid .table-box table th {
    padding: 10px 20px;
    height: 52px;
    font-size: var(--font-size14);
    font-weight: 800;
    color: #777777;
    line-height: 130%;
    text-align: left;
    background-color: var(--bg-normal);
    box-sizing: border-box;
}

#sub.board-view .view-info .mid .table-box table td {
    padding: 10px 20px;
}

#sub.board-view .view-info .mid .table-box table td > span {
    font-size: var(--font-size14);
    font-weight: 700;
    color: var(--txt-dark);
    line-height: 130%;
}

#sub.board-view .view-info .mid .table-box table td > span a {
    display: inline-block;
    padding: 8px 10px;
    border-radius: 5px;
    text-align: center;
}

#sub.board-view .view-info .mid .table-box table td > span a span {
    display: inline-block;
    font-size: var(--font-size12);
    font-family: "Pretendard";
    font-weight: 700;
}

#sub.board-view .view-info .mid .table-box table td > span a.btn-gr {
    background-color: #6c7880;
}

#sub.board-view .view-info .mid .table-box table td > span a.btn-gr span {
    color: #ffffff;
}

#sub.board-view .view-info .mid .table-box table td > span a.btn-wh {
    border: 1px solid #6c7880;
}

#sub.board-view .view-info .mid .table-box table td > span a.btn-wh span {
    position: relative;
    padding-right: 14px;
    color: #6c7880;
    text-align: left;
}

#sub.board-view .view-info .mid .table-box table td > span a.btn-wh span:before {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -5px;
    width: 9px;
    height: 10px;
    background-image: url(/img/svg/ico-board-view-link.svg);
}

#sub.board-view .view-util {
    padding: 30px 0 100px;
}

#sub.board-view .view-util .big-box-list {
    margin-top: 30px;
}

#sub.board-view .view-util .big-box-list + .board-navi {
    margin-top: 40px;
}

#sub.board-view .view-util .board-navi ul {
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    background-color: #ffffff;
}

#sub.board-view .view-util .board-navi ul li {
    border-bottom: 1px solid var(--line-light);
}

#sub.board-view .view-util .board-navi ul li:first-of-type {
    border-top: 1px solid var(--line-light);
}

#sub.board-view .view-util .board-navi a {
    padding: 0 20px;
    transition: all 0.2s linear;
}

#sub.board-view .view-util .board-navi a:hover {
    background-color: #e9f3ff;
}

#sub.board-view .view-util .board-navi a .arr {
    padding: 16px 15px;
    width: 120px;
    flex: none;
    box-sizing: border-box;
}

#sub.board-view .view-util .board-navi a .arr span {
    position: relative;
    display: inline-block;
    padding-right: 19px;
    font-size: var(--font-size16);
    font-weight: 700;
    color: var(--txt-dark);
}

#sub.board-view .view-util .board-navi a .arr span:before {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -6px;
    width: 14px;
    height: 12px;
}

#sub.board-view .view-util .board-navi .next a .arr span:before {
    background-image: url(/img/svg/ico-board-view-navi-next.svg);
}

#sub.board-view .view-util .board-navi .prev a .arr span:before {
    background-image: url(/img/svg/ico-board-view-navi-prev.svg);
}

#sub.board-view .view-util .board-navi a .title {
    position: relative;
    padding: 16px 20px;
    gap: 10px;
}

#sub.board-view .view-util .board-navi a .title:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 7px;
    bottom: 7px;
    width: 1px;
    background-color: var(--line-light);
}

#sub.board-view .view-util .board-navi a .title p {
    font-size: var(--font-size16);
    font-weight: 700;
    color: var(--txt-dark);
    line-height: 100%;
    transition: color 0.2s linear;
}

#sub.board-view .view-util .board-navi a:hover .title p {
    color: var(--point-color);
}

#sub.board-view .view-util .admin-box {
    margin-top: 20px;
    text-align: center;
}

#sub.board-view .view-util .admin-box .txt {
    margin-top: 20px;
}

#sub.board-view .view-util .admin-box .txt p {
    font-size: var(--font-size16);
    font-weight: 700;
    color: var(--txt-dark);
    line-height: 1.3;
}

#sub.board-view .view-util .btn-list {
    margin-top: 60px;
}

#sub.board-view .view-util .btn-list a {
    margin: 0 auto;
    padding: 25px 50px;
    width: 240px;
    height: 67px;
    line-height: 65px;
    border-radius: 34px;
    border: 1px solid #333333;
    box-sizing: border-box;
    transition: all 0.2s linear;
}

#sub.board-view .view-util .btn-list a:hover {
    border: 1px solid var(--point-color);
    background-color: var(--point-color);
}

#sub.board-view .view-util .btn-list a span {
    font-size: var(--font-size14);
    color: #333333;
    transition: color 0.2s linear;
}

#sub.board-view .view-util .btn-list a:hover span {
    color: #ffffff;
}

#sub.board-view .view-util .btn-list a:hover svg path {
    stroke: #ffffff;
}

#sub.board-write .form {
    padding: 110px 0 95px;
}

#sub.board-write .form .sec-tit {
    padding-bottom: 20px;
}

#sub.board-write .form form {
    padding-top: 50px;
}

#sub .form .form-row {
    margin-top: 30px;
}

#sub .form .form-row:first-of-type {
    margin-top: 0;
}

#sub .form .form-label .check-box.small label {
    font-family: "Pretendard", sans-serif;
    font-weight: 600;
}

#sub .form .form-label {
    margin-bottom: 10px;
    gap: 10px;
    row-gap: 5px;
    flex-wrap: wrap;
}

#sub .form .form-label label {
    display: block;
    font-size: var(--font-size14);
    font-weight: 800;
    line-height: 100%;
    color: var(--txt-dark);
    flex: none;
}

#sub .form .form-label label.require {
    position: relative;
    padding-right: 10px;
}

#sub .form .form-label label.require:before {
    content: "*";
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    color: var(--point-color);
}

#sub .form .form-label .guide {
    font-size: var(--font-size12);
    font-weight: 600;
    color: var(--point-color);
    line-height: 100%;
    font-family: "Pretendard", sans-serif;
}

#sub .form .form-tag-list ul {
    margin: -5px;
}

#sub .form .form-tag-list ul li {
    position: relative;
    width: 20%;
    padding: 5px;
    box-sizing: border-box;
    font-size: var(--font-size14);
}

#sub .form .form-tag-list ul li:before {
    content: "#";
    display: block;
    position: absolute;
    left: 25px;
    top: 50%;
    line-height: 1;
    transform: translateY(-50%);
    font-weight: 800;
    color: var(--point-color);
}

#sub .form .form-tag-list ul li input[type="text"] {
    padding-left: 40px;
    color: var(--txt-dark);
    font-family: "Pretendard", sans-serif;
}

#sub .form .check-box-list {
    padding: 20px 24px;
    border: 1px solid var(--line-light);
    border-radius: 10px;
    background-color: #ffffff;
    box-sizing: border-box;
}

#sub .form .check-box-list ul {
    gap: 20px;
    row-gap: 10px !important;
    flex-wrap: wrap;
}

#sub .form .check-box-list.field ul {
    gap: 10px;
}

#sub .form .check-box-list ul li {
    width: 135px;
}

#sub .form .check-box-list.field ul li {
    width: 120px;
}

#sub .form .check-box-list.perks ul li {
    width: 160px;
}

#sub .form .radio-box-list {
    padding: 20px 24px;
    border-radius: 10px;
    border: 1px solid var(--line-light);
    background-color: #ffffff;
    box-sizing: border-box;
}

#sub .form .radio-box-list ul {
    flex-wrap: wrap;
    gap: 40px;
    row-gap: 10px !important;
}

#sub .form .radio-box-list.gender ul {
    gap: 60px;
}

#sub .form .input-amount {
    position: relative;
}

#sub .form .input-amount input {
    padding-right: 75px;
}

#sub .form .input-amount:before {
    content: "만원";
    display: block;
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--font-size14);
    font-weight: 700;
    color: var(--txt-dark);
}

#sub .form .form-half {
    gap: 10px;
}

#sub .form .form-half > div {
    width: 50%;
}

#sub .form .form-radio-tab-con {
    margin-top: 10px;
}

#sub .form .form-radio-tab-con > div {
    display: none;
}

#sub .form .form-radio-tab-con > div.on {
    display: block;
}

/* login */
#sub.login .sub-wrap {
    padding: 110px 0;
}

#sub.login .member-box {
    padding: 100px 150px;
    border-radius: 15px;
    background-color: #ffffff;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.10);
}

#sub.login .mid-tit {
    text-align: center;
}

#sub.login .mid-tit b {
    display: block;
    font-size: var(--font-size14);
    font-weight: 700;
    color: #111111;
    line-height: 1.2;
}

#sub.login .form .input {
    margin-top: 10px;
}

#sub.login .form .input:first-of-type {
    margin-top: 0;
}

#sub.login .form .input input {
    padding: 0 20px;
    height: 62px;
}

#sub.login .form .btn-login {
    margin-top: 10px;
}

#sub.login .form .btn-login button {
    display: block;
    width: 100%;
    height: 70px;
    border-radius: 10px;
    background-color: var(--point-color);
    font-size: var(--font-size16);
    font-weight: 800;
    color: #ffffff;
}

#sub.login .btn-join {
    padding: 40px 0;
    border-top: 1px solid var(--line-light);
}

#sub.login .btn-join > a {
    margin-top: 15px;
}

/* login-idx */

#sub.login-idx .form {
    padding: 40px 0 30px;
}

#sub.login-idx .form .btn-login {
    margin-top: 10px;
}

#sub.login-idx .form .btn-login button {
    display: block;
    width: 100%;
    height: 70px;
    border-radius: 10px;
    background-color: var(--point-color);
    font-size: var(--font-size16);
    font-weight: 800;
    color: #ffffff;
}

#sub.login-idx .form .login-util {
    margin-top: 10px;
}

#sub.login-idx .form .login-util ul {
    position: relative;
    justify-content: right;
    gap: 11px;
    padding-right: 17px;
}

#sub.login-idx .form .login-util ul:before {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    width: 7px;
    height: 10px;
    margin-top: -5px;
    background-image: url(/img/svg/ico-login-util.svg);
}

#sub.login-idx .form .login-util ul li {
    position: relative;
    font-size: var(--font-size14);
    font-weight: 800;
    line-height: 100%;
    color: #111111;
}

#sub.login-idx .form .login-util ul li:before {
    content: "/";
    display: block;
    position: absolute;
    left: -9px;
    top: 0;
}

#sub.login-idx .form .login-util ul li:first-of-type:before {
    display: none;
}

#sub.login-idx .form .login-util ul li a {
    display: block;
}

#sub.login-idx .btn-social-login {
    padding-top: 40px;
    border-top: 1px solid var(--line-light);
}

#sub.login-idx .btn-social-login .btn-list {
    margin-top: 15px;
}

#sub.login-idx .btn-social-login .btn-list ul {
    gap: 20px;
}

/* idpwsearch */
#sub.idpwsearch .find-tab {
    margin: 20px -70px 0;
}

#sub.idpwsearch .form {
    padding: 40px 0;
}

#sub.idpwsearch .form .find-tit {
    text-align: center;
    line-height: 150%;
}

#sub.idpwsearch .form .find-tit h3 {
    font-size: var(--font-size22);
    font-weight: 800;
    color: #111111;
}

#sub.idpwsearch .form .find-tit p {
    margin-top: 5px;
    font-size: var(--font-size16);
    line-height: 1.2;
}

#sub.idpwsearch .form .login-input {
    margin-top: 20px;
}

#sub.idpwsearch .btn-join {
    padding-bottom: 0;
}

/* join */
#sub.join .sub-wrap {
    padding: 110px 0 180px;
}

#sub.join .top-title {
    padding-bottom: 30px;
}

#sub.join .top-title a {
    display: block;
    margin: 20px 0;
    font-size: var(--font-size14);
    font-weight: 700;
    line-height: 1.2;
}

#sub.join .top-title .sec-con .txt {
    padding: 20px;
    border-radius: 10px;
    background-color: var(--bg-blue);
    text-align: center;
}

#sub.join .top-title .sec-con .txt p {
    font-size: var(--font-size14);
    color: #5c70a4;
    line-height: 130%;
}

#sub.join .tab-round-tit {
    padding: 30px 0 40px;
    border-top: 1px solid var(--line-light);
}

#sub.join .tab-box .form-row {
    margin-top: 20px;
}

#sub.join .form .form-row:first-of-type {
    margin-top: 0;
}

#sub.join .form .form-row,
#sub.join .form .tab-box .form-row {
    margin-top: 20px;
}

#sub.join .form-birthday > ul {
    margin: 0 -5px;
}

#sub.join .form-birthday > ul > li {
    width: 33.3333%;
    padding: 0 5px;
    box-sizing: border-box;
}

#sub.join .form-company-number .input{
    width: 100%;
}


#sub.join .check-box-list-box .check-box-list {
    margin-top: 10px;
}

#sub.join .check-box-list-box .check-box-list:first-of-type {
    margin-top: 0;
}

#sub.join .check-box-list-box .list-tit b {
    display: block;
    font-size: var(--font-size14);
    font-weight: 800;
    color: var(--point-color);
    line-height: 120%;
}

#sub.join .check-box-list-box ul {
    margin-top: 10px;
}

#sub.join .radio-row {
    margin: 20px -10px 0;
}

#sub.join .radio-row .form-row {
    margin-top: 0;
    padding: 0 10px;
    width: 50%;
    box-sizing: border-box;
}

#sub.join .agree-box {
    margin-top: 40px;
    padding: 50px;
    border-radius: 10px;
    border: 1px solid #dddfe2;
    background-color: var(--bg-blue);
}

#sub.join .agree-box .top {
    padding-bottom: 20px;
}

#sub.join .agree-box .btm {
    padding-top: 20px;
    border-top: 1px solid #dddddd;
}

#sub.join .agree-box ul {
    align-items: flex-start;
    gap: 10px;
}

#sub.join .agree-box ul a {
    display: inline-block;
    text-decoration: underline;
}

#sub.join .agree-box ul .require {
    display: inline-block;
    padding: 4px 6px;
    border-radius: 5px;
    background-color: #6c7881;
    font-size: 11px;
    color: #ffffff;
    line-height: 100%;
}

#sub.join .btn-join {
    margin-top: 20px;
}

#sub .btn-join > button,
#sub .btn-join > a {
    display: block;
    width: 100%;
    height: 70px;
    line-height: 70px;
    border-radius: 10px;
    background-color: #020b23;
    font-size: var(--font-size16);
    font-weight: 800;
    color: #ffffff;
    text-align: center;
}

/* search */
#sub.search .sub-wrap {
    padding: 100px 0;
}

#sub.search .search-box {
    padding: 46.5px 0;
}

#sub.search .search-box:first-of-type {
    padding-top: 40px;
}

#sub.search .search-box .box-tit {
    align-items: flex-end;
    padding-bottom: 20px;
}

#sub.search .search-box .box-tit h3 {
    font-size: var(--font-size24);
    font-weight: 800;
    color: var(--txt-dark);
    line-height: 1.2;
}

#sub.search .search-box .box-tit .btn-more > a {
    width: 135px;
    padding: 15px 20px;
    border-radius: 22px;
    border: 1px solid #333333;
    transition: all 0.2s linear;
    box-sizing: border-box;
}

#sub.search .search-box .box-tit .btn-more > a:hover {
    border: 1px solid var(--point-color);
    background-color: var(--point-color);
}

#sub.search .search-box .box-tit .btn-more > a span {
    display: block;
    font-size: var(--font-size12);
    color: var(--txt-dark);
    line-height: 100%;
}

#sub.search .search-box .box-tit .btn-more > a:hover span {
    color: #ffffff;
}

#sub.search .search-box .box-tit .btn-more > a:hover svg path {
    stroke: #ffffff;
}

#sub.search .search-box .box-con {
    padding-top: 20px;
    border-top: 1px solid var(--line-light);
}

#sub.search .search-box .box-con .search-list ul li {
    margin-top: 20px;
    padding: 7px 0;
    gap: 20px;
}

#sub.search .search-box .box-con .search-list ul li:first-of-type {
    margin-top: 0;
}

#sub.search .search-box .box-con .search-list .img {
    flex: none;
}

#sub.search .search-box .box-con .search-list .img > a {
    display: block;
    width: 170px;
    height: 170px;
    border-radius: 10px;
    padding: 15px;
    box-sizing: border-box;
    border: 1px solid var(--line-light);
}

#sub.search .search-box .box-con .search-list .img > a .pic {
    border-radius: 10px;
    overflow: hidden;
}

#sub.search .search-box .box-con .search-list .txt-box {
    color: var(--txt-dark);
    width: 100%;
}

#sub.search .search-box .box-con .search-list .txt-box > a {
    display: block;
}

#sub.search .search-box .box-con .search-list .txt-box > a .title em {
    display: block;
    font-size: var(--font-size18);
    line-height: 130%;
}

#sub.search .search-box .box-con .search-list .txt-box > a .content {
    margin-top: 15px;
}

#sub.search .search-box .box-con .search-list .txt-box > a .content p {
    -webkit-line-clamp: 4;
    font-size: var(--font-size16);
    line-height: 160%;
}

#sub.search .search-box .box-con .search-list .txt-box .navi {
    margin-top: 15px;
    line-height: 120%;
}

#sub.search .search-box .box-con .search-list .txt-box .navi > a {
    gap: 10px;
}

#sub.search .search-box .box-con .search-list .txt-box .navi > a span {
    display: block;
    font-size: var(--font-size14);
    font-weight: 700;
}

#sub.search .search-box .box-con .search-list .txt-box .navi .date {
    display: block;
    font-size: var(--font-size14);
    color: var(--txt-normal);
}

#sub.search .search-box .box-con .blank {
    height: 70px;
    font-size: var(--font-size18);
    font-weight: 800;
    line-height: 130%;
}

#sub.search .result-nonexist .col-cen {
    gap: 20px;
    height: 467px;
}

#sub.search .result-nonexist .col-cen .txt {
    color: var(--txt-dark);
    text-align: center;
}

#sub.search .result-nonexist .col-cen .txt em {
    display: block;
    font-size: var(--font-size24);
    font-weight: 800;
    line-height: 160%;
}

#sub.search .result-nonexist .col-cen .txt p {
    font-size: var(--font-size16);
    font-weight: 800;
    line-height: 160%;
}

/* faq */
#sub.faq .sub-wrap {
    padding: 110px 0 100px;
}

#sub.faq .sec-con {
    margin-top: 40px;
}

#sub.faq .board-search form {
    justify-content: right;
}

#sub.faq .faq-list {
    margin-top: 20px;
}

#sub.faq .faq-list ul li {
    margin-top: 20px;
    padding: 15px 25px;
    border-radius: 10px;
    border: 1px solid #f1f1f1;
    background-color: #ffffff;
    box-shadow: var(--shadow-noraml);
    transition: all 0.2s linear;
    cursor: pointer;
}

#sub.faq .faq-list ul li:hover,
#sub.faq .faq-list ul li.open {
    border: 1px solid var(--point-color);
}

#sub.faq .faq-list ul li.open {
    padding: 25px;
}

#sub.faq .faq-list ul li:first-of-type {
    margin-top: 0;
}

#sub.faq .faq-list ul li.open .list-tit {
    padding-bottom: 10px;
}

#sub.faq .faq-list ul li .list-tit em {
    display: block;
    font-size: var(--font-size18);
    font-weight: 800;
    color: #111111;
}

#sub.faq .faq-list ul li:hover .list-tit em,
#sub.faq .faq-list ul li.open .list-tit em {
    color: var(--point-color);
}

#sub.faq .faq-list ul li .list-con {
    display: none;
}

#sub.faq .faq-list ul li .list-con .inner {
    padding-top: 20px;
}

#sub.faq .faq-list ul li.open .list-con .inner {
    border-top: 1px solid var(--line-light);
}

#sub.faq .faq-list ul li .list-con .answer {
    padding: 25px;
    border-radius: 10px;
    border: 1px solid #f0f0f0;
    background-color: #f8f8f8;
}

#sub.faq .faq-list ul li .list-con .answer p {
    font-size: var(--font-size16);
    line-height: 160%;
    color: var(--txt-dark);
}

#sub.faq .pagination {
    margin-top: 45px;
}

/* mypage */
#sub.mypage .sub-wrap {
    padding: 110px 0 180px;
}

#sub.mypage .sec-tit h2 {
    padding-bottom: 30px;
    border-bottom: 1px solid var(--line-light);
}

#sub.mypage .sec-tit .tab-round {
    padding-top: 30px;
}

#sub.mypage .sec-con {
    padding-top: 60px;
}

#sub.mypage .input input:disabled {
    background-color: var(--bg-blue);
    color: var(--point-color);
}

#sub.mypage .form .form-row:first-of-type {
    margin-top: 0;
}

#sub.mypage .sub-board {
    padding-bottom: 0;
}

/* mypage-idx */
#sub.mypage-idx .input-btn-pw {
    display: inline-block;
    padding: 8px 10px;
    border-radius: 10px;
    background-color: #ffffff;
    border: 1px solid var(--line-light);
}

#sub.mypage-idx .input-btn-pw button {
    position: static;
    width: 128px;
    height: 42px;
}

#sub.mypage-idx .pwdIpt {
    display: none;
    margin-top: 10px;
}

#sub.mypage-idx .link-quit {
    margin-top: 40px;
    text-align: center;
    font-size: 0;
}

#sub.mypage-idx .link-quit > a {
    position: relative;
    display: inline-block;
    padding-right: 17px;
    font-size: var(--font-size14);
    font-weight: 700;
    color: var(--txt-dark);
    line-height: 1.2;
}

#sub.mypage-idx .link-quit > a:before {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -6px;
    width: 7px;
    height: 12px;
    background-image: url(/img/svg/ico-search-navi.svg);
}

/* mypage-quit */
#sub.mypage-quit .quit-tit {
    text-align: center;
}

#sub.mypage-quit .quit-tit h3 {
    font-size: var(--font-size24);
    font-weight: 800;
    line-height: 140%;
    color: var(--txt-dark);
}

#sub.mypage-quit .form form {
    margin-top: 20px;
}

#sub.mypage-quit .btn-quit {
    margin-top: 40px;
}

#sub.mypage-quit .btn-quit ul {
    gap: 10px;
}

#sub.mypage-quit .btn-quit ul li a,
#sub.mypage-quit .btn-quit ul li button {
    display: block;
    width: 180px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    border-radius: 30px;
    font-size: var(--font-size14);
    font-weight: 800;
}

#sub.mypage-quit .btn-quit ul li a {
    background-color: #b9bdc1;
    color: #ffffff;
}

#sub.mypage-quit .btn-quit ul li button {
    border: 1px solid #020b23;
    color: #020b23;
}

/* mypage-board */
#sub.mypage-board .sub-category {
    padding: 0 0 20px;
}

/* #sub.mypage-board .sub-category .cate-tab-tit ul{gap: 40px;} */
#sub.mypage-board .sub-category .cate-tab-tit ul li {
    margin: 0 20px;
}

#sub.mypage-board .sub-category .cate-tab-tit ul li a h3 {
    font-size: var(--font-size22);
}

#sub.mypage-board .sub-board .board-search .board-select {
    max-width: 200px;
}

#sub.mypage-board .check-box {
    justify-content: center;
}

#sub.mypage-board .sub-board-table tbody tr.row-blind {
    background-color: #eeeeee;
}

#sub.mypage-board .sub-board-table tbody tr.row-blind td.title .col-cen {
    align-items: flex-start;
    gap: 5px;
    line-height: 100%;
}

#sub.mypage-board .sub-board-table tbody tr.row-blind .status {
    display: block;
    font-size: var(--font-size14);
}

#sub.mypage-board .sub-board-table tbody tr.row-delete {
    position: relative;
}

#sub.mypage-board .sub-board-table tbody tr.row-delete:after {
    content: "삭제된 게시글";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background-color: rgba(108, 120, 128, 0.6);
    font-size: var(--font-size16);
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    line-height: 80px;
    z-index: 5;
}

#sub.mypage-board .sub-board .btm .size {
    padding-top: 35px;
}

#sub.mypage-board .sub-board .btm .btn-gr {
    position: absolute;
    right: 0;
    top: 30px;
}

#sub.mypage-board .sub-board .btm .btn-gr > button {
    display: block;
    width: 100px;
    height: 40px;
    border-radius: 5px;
    background-color: #cdd0d2;
    font-size: var(--font-size12);
    color: #575a5c;
    transition: all 0.2s linear;
}

#sub.mypage-board .sub-board .btm .btn-gr > button:hover {
    background-color: #333333;
    color: #ffffff;
}

/* mypage-comment */
#sub.mypage-comment .sub-board-table tbody td.title .col-cen {
    align-items: flex-start;
    gap: 5px;
    line-height: 100%;
}

#sub.mypage-comment .sub-board-table tbody td.title .comment span {
    font-size: var(--font-size14);
    color: var(--txt-normal);
}

#sub.mypage-comment .sub-board-table tbody tr.row-delete:after {
    content: "삭제된 댓글";
}

/* inquiry */
#sub.inquiry .sec-con {
    padding-top: 40px;
}

#sub.inquiry .radio-box-list {
    padding: 15px 24px;
}

#sub.inquiry .radio-box-list ul {
    flex-wrap: nowrap;
    height: 42px;
}

#sub.inquiry .radio-box.on {
    gap: 10px;
    width: 100%;
}

#sub.inquiry .radio-box .input {
    width: 100%;
    display: none;
}

#sub.inquiry .radio-box:has(.input) input[type="radio"]:checked ~ .input {
    display: block;
}

#sub.inquiry .radio-box .input input[type="text"] {
    padding: 0 10px;
    height: 44px;
    border-radius: 5px;
    border: 1px solid #dfdfdf;
}

#sub.inquiry .textarea textarea {
    height: 300px;
}

#sub.inquiry .form .input-scale:before {
    content: "명";
}

#sub.inquiry .form .input-period:before {
    content: "개월";
}

#sub.inquiry .form .check-box-list ul {
    gap: 90px;
}

#sub.inquiry .form .check-box-list ul li {
    width: auto;
}

#sub.inquiry .agree-box {
    padding: 40px 50px;
}

#sub.inquiry .agree-box .col-cen {
    gap: 10px;
}

#sub.inquiry .agree-box p {
    font-size: var(--font-size14);
    color: #5c70a4;
    line-height: 130%;
    text-align: center;
}

#sub.inquiry .btn-apply {
    margin-top: 30px;
}

#sub.inquiry .btn-apply ul {
    gap: 10px;
}

#sub.inquiry .btn-apply a,
#sub.inquiry .btn-apply button {
    display: block;
    width: 180px;
    height: 60px;
    line-height: 58px;
    text-align: center;
    border-radius: 30px;
    transition: all 0.2s linear;
    font-size: var(--font-size16);
    font-weight: 800;
    font-family: "Pretendard", sans-serif;
    border: 1px solid #333333;
    box-sizing: border-box;
}

#sub.inquiry .btn-apply a {
    color: #333333;
}

#sub.inquiry .btn-apply button {
    background-color: #020b23;
    color: #ffffff;
}

#sub.inquiry .btn-apply a:hover,
#sub.inquiry .btn-apply button:hover {
    border: 1px solid var(--point-color);
}

#sub.inquiry .btn-apply button:hover {
    background-color: var(--point-color);
}

/* community-view */
#sub.community-view .view-post {
    padding: 100px 0;
}
#sub.community-view .view-post .size{
    position:relative;
}

#sub.community-view .view-post .top {
    padding-bottom: 20px;
}

#sub.community-view .view-post .top .post-tit {
    gap: 5px;
    flex-wrap: wrap;
}

#sub.community-view .view-post .top .post-tit .row-left {
    gap: 5px;
}

#sub.community-view .view-post .top .post-tit .cate {
    display: inline-block;
    padding: 6px 18px;
    border-radius: 17px;
    border: 2px solid var(--point-color);
    font-size: var(--font-size18);
    color: var(--point-color);
    line-height: 1;
}

#sub.community-view .view-post .top .post-tit .cate + span,
#sub.community-view .view-post .top .post-tit h2 {
    font-size: var(--font-size22);
    font-weight: 800;
    color: var(--txt-dark);
}

#sub.community-view .view-post .top .post-tit .type {
    font-size: var(--font-size18);
}

#sub.community-view .view-post .mid {
    border-top: 1px solid var(--line-light);
    padding: 40px 0 120px;
    color: var(--txt-dark);
    line-height: 160%;
    font-size: var(--font-size16);
}

#sub.community-view .view-post .mid img{
    height: auto !important;
}

#sub.community-view .view-post .btm ul {
    gap: 30px;
}

#sub.community-view .view-post .btm ul li {
    gap: 20px;
}

#sub.community-view .view-post .btm ul li.up {
    flex-direction: row-reverse;
}

#sub.community-view .view-post .btm ul li > b {
    display: block;
    font-size: 30px;
    font-weight: 800;
    color: #6c7880;
    line-height: 1;
}

#sub.community-view .view-post .btm ul li > button.active + b {
    color: var(--point-color);
}

#sub.community-view .view-post .btm ul li.down > button.active + b {
    color: #e70000;
}

#sub.community-view .view-post .btm ul li > button {
    width: 120px;
    height: 120px;
    border-radius: 10px;
    gap: 10px;
    border: 1px solid var(--line-light);
    transition: all 0.2s linear;
    box-sizing: border-box;
    font-size: 0;
}

#sub.community-view .view-post .btm ul li > button.active {
    border: 1px solid #bbdaff;
    box-shadow: var(--shadow-noraml);
}

#sub.community-view .view-post .btm ul li > button span {
    display: block;
    font-size: var(--font-size16);
    font-weight: 800;
    color: var(--txt-dark);
    line-height: 1;
    transition: all 0.2s linear;
}

#sub.community-view .view-post .btm ul li > button.active span {
    color: var(--point-color);
}

#sub.community-view .view-post .btm ul li.down > button.active span {
    color: #f00;
}

#sub.community-view .view-post .btm ul li > button.active .svg path {
    stroke: var(--point-color);
}

#sub.community-view .view-post .btm ul li.down > button.active .svg path {
    stroke: #f00;
}

#sub.community-view .view-post .btm ul li > button.active .svg path.fill {
    fill: #bbdaff;
    stroke: none;
}

#sub.community-view .view-post .btm ul li.down > button.active .svg path.fill {
    fill: #ffdcdc;
}

#sub.community-view .view-post .view-hot {
    position:absolute;
    left:100%; 
    top:0;
    margin-left: 40px;
    width: 100%;
    max-width: 260px;
}

#sub.community-view .view-post .view-hot .list-tit em {
    display: block;
    margin: 0 auto;
    width:97px; height:35px; line-height: 35px;
    border-radius: 17px;
    background-color: #020b23;
    font-size: 12px;
    text-align: center;
    color: #fff;
}

#sub.community-view .view-post .view-hot ul {
    margin-top: 10px;
    padding: 8px 20px;
    border-radius: 15px;
    background-color: #ffffff;
    border: 1px solid var(--line-light);
}

#sub.community-view .view-post .view-hot ul li {
    padding: 9px 0;
}

#sub.community-view .view-post .view-hot ul li a .title {
    gap: 10px;
}

#sub.community-view .view-post .view-hot ul li a .title .cate {
    width: 65px;
    height: 24px;
    line-height: 22px;
    border-radius: 3px;
    border: 1px solid var(--txt-normal);
    background-color: var(--bg-normal);
    text-align: center;
    font-size: var(--font-size12);
    font-weight: 700;
    flex: none;
    box-sizing: border-box;
    transition: all 0.2s linear;
}

#sub.community-view .view-post .view-hot ul li a:hover .title .cate {
    border: 1px solid var(--point-color);
    background-color: #e9f3ff;
    color: var(--point-color);
}

#sub.community-view .view-post .view-hot ul li a .title p {
    font-size: 15px;
    color: var(--txt-dark);
    transition: all 0.2s linear;
}

#sub.community-view .view-post .view-hot ul li a:hover .title p {
    color: var(--point-color);
}

#sub.community-view .view-post .view-hot ul li a .comment {
    width: 50px;
    justify-content: left;
    gap: 5px;
    flex: none;
}

#sub.community-view .view-post .view-hot ul li a .comment span {
    font-size: 13px;
    line-height: 140%;
    color: var(--point-color);
}

#sub.community-view .view-comment {
    padding: 30px 0;
    background-color: #f8f8f8;
}

#sub.community-view .view-comment .board-editor {
    padding: 0;
    background-color: unset;
}

#sub.community-view .view-comment .comment-list .list-tit em {
    display: block;
    font-size: var(--font-size22);
    font-weight: 800;
    color: var(--txt-dark);
    line-height: 1.2;
}

#sub.community-view .view-comment .comment-list .list-tit .num {
    gap: 5px;
}

#sub.community-view .view-comment .comment-list .list-tit .num span {
    display: block;
    font-size: 13px;
    color: var(--point-color);
    line-height: 1;
}

#sub.community-view .view-comment .comment-list .list-con {
    margin-top: 5px;
}

#sub.community-view .view-comment .comment-list .list-con > ul {
    border-bottom: 1px solid var(--line-light);
}

#sub.community-view .view-comment .comment-list .list-con > ul > li {
    display: block;
    padding: 15px 20px;
    background-color: #ffffff;
    border-top: 1px solid var(--line-light);
    box-sizing: border-box;
}

#sub.community-view .view-comment .comment-list .list-con > ul > li.row-reply {
    padding-left: 56px;
}

#sub.community-view .view-comment .comment-list .list-con > ul > li.reply-2depth {
    padding-left: 76px;
}

#sub.community-view .view-comment .comment-list .list-con > ul > li .reply-content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

#sub.community-view .view-comment .comment-list .list-con > ul > li .reply-content.hide {
    display: none;
}

#sub.community-view .view-comment .comment-list .list-con > ul > li.row-reply .txt-box,
#sub.community-view .view-comment .comment-list .list-con > ul > li.row-reply .comment-edit {
    position: relative;
}


#sub.community-view .view-comment .comment-list .list-con > ul > li.row-reply .txt-box:before,
#sub.community-view .view-comment .comment-list .list-con > ul > li.row-reply .comment-edit:before {
    content: "";
    display: block;
    position: absolute;
    left: -36px;
    top: 50%;
    margin-top: -10px;
    width: 21px;
    height: 20px;
    background-image: url(/img/svg/ico-board-view-reply.svg);
}

#sub.community-view .view-comment .comment-list .list-con > ul > li.reply-write .txt-box {
    width: 100%;
}

#sub.community-view .view-comment .comment-list .list-con > ul > li.reply-write textarea,
#sub.community-view .view-comment .comment-list .list-con > ul > li .comment-edit textarea {
    padding: 15px 10px;
    padding-right: 80px;
    height: 80px;
}

#sub.community-view .view-comment .comment-list .list-con > ul > li.reply-write button,
#sub.community-view .view-comment .comment-list .list-con > ul > li .comment-edit button {
    right: 10px;
    top: 10px;
    width: 60px;
    height: 60px;
}

#sub.community-view .view-comment .comment-list .list-con > ul > li.row-delete {
    height: 80px;
    background-color: #f6f6f6;
}

#sub.community-view .view-comment .comment-list .list-con > ul > li.row-delete .txt-con {
    margin-top: 0;
}

#sub.community-view .view-comment .comment-list .txt-box .txt-tit {
    gap: 10px;
    font-size: var(--font-size14);
    line-height: 1;
}
#sub.community-view .view-comment .comment-list .txt-box .txt-tit:has(.check-box) {
    justify-content: space-between;
}
#sub.community-view .view-comment .comment-list .txt-box .txt-con {
    margin-top: 5px;
}

#sub.community-view .view-comment .comment-list .txt-box .txt-con p {
    font-size: var(--font-size16);
    font-weight: 600;
    color: var(--txt-dark);
    line-height: 120%;
}

#sub.community-view .view-comment .comment-list .txt-box .txt-con p .mention {
    color: var(--txt-normal);
}

#sub.community-view .view-comment .comment-list [class ^="btn-"] {
    margin-top: 0;
}

#sub.community-view .view-comment .comment-list .btn-box {
    gap: 10px;
}

#sub.community-view .view-comment .comment-list .btn-box .btn-updown {
    gap: 5px;
}

#sub.community-view .view-comment .comment-list .btn-box .btn-updown button {
    padding: 0 20px;
    width: 100px;
    height: 50px;
    border-radius: 10px;
    border: 1px solid var(--line-light);
    box-sizing: border-box;
    font-size: 0;
    transition: all 0.2s linear;
}

#sub.community-view .view-comment .comment-list .btn-box .btn-updown button.active {
    border: 1px solid #bbdaff;
    box-shadow: var(--shadow-noraml);
}

#sub.community-view .view-comment .comment-list .btn-box .btn-updown button.active .svg path {
    stroke: var(--point-color);
}

#sub.community-view .view-comment .comment-list .btn-box .btn-updown button.active.down .svg path {
    stroke: #f00;
}

#sub.community-view .view-comment .comment-list .btn-box .btn-updown button.active .svg path.fill {
    fill: #bbdaff;
    stroke: none;
}

#sub.community-view .view-comment .comment-list .btn-box .btn-updown button.active.down .svg path.fill {
    fill: #ffdcdc;
}

#sub.community-view .view-comment .comment-list .btn-box .btn-updown button span {
    font-size: var(--font-size14);
    font-weight: 600;
    color: var(--txt-dark);
    font-family: "Pretendard", sans-serif;
    line-height: 1;
}

#sub.community-view .view-comment .comment-list .btn-box .btn-util {
    width: 231px;
    justify-content: right;
}

#sub.community-view .view-comment .comment-list .btn-box .btn-util button {
    gap: 10px;
    padding: 17px 10px;
    font-size: var(--font-size16);
    font-weight: 600;
    color: var(--txt-dark);
    font-family: "Pretendard", sans-serif;
    line-height: 1;
    transition: color 0.2s linear;
}

#sub.community-view .view-comment .comment-list .btn-box .btn-util button.btn-reply:hover {
    color: var(--point-color);
}

#sub.community-view .view-comment .comment-list .btn-box .btn-util button.row-cen {
    padding-left: 17px;
}

#sub.community-view .view-comment .comment-list .btn-box .btn-util button.btn-delete {
    padding: 17px 25px;
}

#sub.community-view .view-comment .pagination {
    padding-top: 37px;
}

#sub.community-view .view-comment .form form {
    border-top: none;
}

#sub.community-view .view-comment .comment-list + .comment-input {
    margin-top: 50px;
}

#sub.community-view .view-comment .textarea {
    position: relative;
}

#sub.community-view .view-comment .textarea button {
    position: absolute;
    right: 25px;
    top: 25px;
    width: 70px;
    height: 70px;
    border-radius: 5px;
    border: 1px solid var(--point-color);
    font-size: var(--font-size14);
    color: var(--point-color);
}

#sub.community-view .view-comment .comment-list .list-con > ul > li .comment-edit button {
    border: 1px solid var(--txt-dark);
    color: var(--txt-dark);
}

#sub.community-view .view-comment .comment-list .list-con > ul > li .comment-edit button:first-of-type {
    right: 80px;
    border: 1px solid var(--point-color);
    color: var(--point-color);
}

#sub.community-view .view-comment .comment-input .textarea textarea {
    height: 120px;
    padding-right: 120px;
}

#sub.community-view .view-comment .comment-list .list-con > ul > li .comment-edit textarea {
    padding-right: 150px;
}
#sub.community-view .view-comment .view-util {
    padding: 87px 0 0;
}

/* support */
#sub.support .sub-wrap{padding: 90px 0 100px;}
#sub.support .sec-con{padding-top: 50px;}

/* refuse */
#sub.refuse .guide{text-align: center;}
#sub.refuse .guide p{font-size: var(--font-size16); line-height: 160%; color: var(--txt-dark);}

#sub.refuse .law-wrap{margin-top: 40px;}
#sub.refuse .law-wrap .title{text-align: center;}
#sub.refuse .law-wrap .title em{display: block; font-size: var(--font-size16); line-height: 160%; color: var(--point-color);}
#sub.refuse .law-wrap .content{margin-top: 10px;}
#sub.refuse .law-wrap .content .inner{padding: 30px; border-radius: 20px; background-color: var(--bg-blue);}
#sub.refuse .law-wrap .content ul{padding-left: 10px;}
#sub.refuse .law-wrap .content ul li{position: relative; padding-left: 14px; font-size: var(--font-size16); color: var(--txt-dark); line-height: 160%;}
#sub.refuse .law-wrap .content ul li:before{content:''; display: block; position:absolute; left:0; top:10px; width:3px; height:3px; background-color: #333; border-radius: 100%;}
#sub.refuse .caution{margin-top: 55px; text-align: center;}
#sub.refuse .caution p{font-size: var(--font-size16); color: var(--txt-dark); line-height: 1.3;}

/* introduce */
#sub.introduce .sub-wrap{padding:110px 0 0;}
#sub.introduce .sec-con{padding-top: 40px;}
#sub.introduce .section1{padding-bottom: 120px;}
#sub.introduce .section1 .size{max-width: none; width: calc(100vw - ((100vw - 1420px) / 2)); margin-left: calc((100vw - 1420px) / 2);}
#sub.introduce .section1 .sec-tit{text-align: left;}
#sub.introduce .section1 .sec-tit h2{line-height: 130%}
#sub.introduce .section1 .sec-tit h2 span{display: block;}
#sub.introduce .section1 .img-wrap{position:relative; border-radius: 50px 0 0 50px; overflow: hidden;}
#sub.introduce .section1 .img-wrap:before{content:''; display: block; position:absolute; right:0; top:0; width: 100%; height: 100%; background-image: linear-gradient(94deg, rgba(0, 37, 134, 0.15) 28.94%, rgba(0, 17, 61, 0.15) 100%); opacity: 0.5; z-index: 3;}
#sub.introduce .section1 .img-wrap:after{content:''; display: block; position:absolute; right:0; top:0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(28, 27, 26, 0.00) 0%, #1C1B1A 100%); opacity: 0.7; z-index: 2;}
#sub.introduce .section1 .img-wrap .bg{position:relative; background-position:0 100%; background-size: cover; background-attachment:fixed; z-index: 1;}
#sub.introduce .section1 .img-wrap .img{position:absolute; left:130px; top:50%; transform: translateY(-50%); z-index: 5;}

#sub.introduce .section1 .txt{margin-top: 40px;}
#sub.introduce .section1 .txt p{font-size: var(--font-size18); font-weight: 700; line-height: 180%; color: #020b23;}

#sub.introduce .section2{padding: 100px 0 120px; background-color: var(--bg-blue);}
#sub.introduce .section2 .ico-list > ul{flex-wrap: wrap; margin: -15px;}
#sub.introduce .section2 .ico-list > ul > li{width: 50%; padding: 15px; box-sizing: border-box;}
#sub.introduce .section2 .ico-list > ul > li .inner{gap: 20px; height:180px; padding: 50px 60px; border-radius: 20px; background-color: #fff; box-shadow: var(--shadow-blue); box-sizing: border-box;}
#sub.introduce .section2 .ico-list .ico{width: 80px; height: 80px; line-height: 80px; text-align: center; font-size: 0; background-color: var(--point-color); border-radius: 100%; flex:none}
#sub.introduce .section2 .ico-list .txt p{font-size: var(--font-size18); font-weight: 700; line-height: 180%; color: #020b23;}

/* free */
#sub.support-big .sub-wrap{padding: 110px 0 160px;}
#sub.free .sub-wrap > .size{max-width: 1030px;}
#sub.free .sec-con{gap: 50px;}
#sub.free .sec-con .box-wrap{width: 100%;}
#sub.free .sec-con .box-wrap .inner{ padding: 70px 60px; border-radius: 20px; background-color: #fff; box-shadow: var(--shadow-noraml);}
#sub.free .sec-con .box-wrap .title-wrap{text-align: center;}
#sub.free .sec-con .box-wrap .title-wrap .txt{margin-top: 10px;}
#sub.free .sec-con .box-wrap .title-wrap .txt i{display: block; font-size: var(--font-size14); color: #6c7880; font-weight: 800; line-height: 130%;}
#sub.free .sec-con .box-wrap .title-wrap .txt em{display: block; margin-top:5px; font-size: 3rem; font-weight: 800; color: var(--txt-dark); line-height: 130%; }

#sub.free .sec-con .box-wrap .btn-wrap{margin-top: 30px; text-align: center;}
#sub.free .sec-con .box-wrap .btn-wrap a{display:block; margin:0 auto; width: 100%; max-width: 372px; height: 60px; line-height: 58px; border-radius: 30px; background-color: #fff; border:1px solid #333; font-size:var(--font-size16); color: #020b23; transition: all 0.2s linear;}
#sub.free .sec-con .box-wrap .btn-wrap a:hover{border: 1px solid var(--point-color); background-color: var(--point-color); color: #fff;}

#sub.free .sec-con .box-wrap.left .btn-wrap{max-width: 372px; margin: 30px auto 0;}
#sub.free .sec-con .box-wrap.left .btn-wrap ul{flex-wrap: wrap; margin: -5px;}
#sub.free .sec-con .box-wrap.left .btn-wrap li{width: 50%; padding: 5px; box-sizing: border-box;}
#sub.free .sec-con .box-wrap.right .btn-wrap li{margin-top: 10px;}
#sub.free .sec-con .box-wrap.right .btn-wrap li:first-of-type{margin-top:0;}

/* agencies */
#sub.agencies .sec-tit h2{line-height: 130%}
#sub.agencies .sec-tit h2 span{display: block;}
#sub.agencies .sec-tit p{margin-top: 20px; font-size: var(--font-size16); }

#sub.agencies .sec-con{padding-top: 70px;}
#sub.agencies .sec-con > div{margin-top: 70px;}
#sub.agencies .sec-con > div:first-of-type{margin-top: 0;}
#sub.agencies .ico-list > ul{gap: 60px;}
#sub.agencies .ico-list .img{margin:0 auto; width: 150px; height: 150px; border-radius: 100%; background-color: var(--bg-blue);}
#sub.agencies .ico-list .txt-wrap{margin-top: 20px; line-height: 1.2; text-align: center;}
#sub.agencies .ico-list .txt-wrap em{display: block; font-size: var(--font-size22); font-weight: 800; color: var(--txt-dark);}
#sub.agencies .ico-list .txt-wrap p{margin-top: 5px; font-size: var(--font-size14); color: #6c7880;}

#sub.agencies .box-list > .inner{padding: 60px 30px; border-radius: 20px; background-color: #fff; box-shadow: var(--shadow-noraml);}
#sub.agencies .box-list ul{align-items: flex-start; padding: 30px 0;}
#sub.agencies .box-list ul li{position:relative; width: 100%; height: 130px; padding: 0 20px; text-align: center; box-sizing: border-box;}
#sub.agencies .box-list ul li:before{content:''; display: block; position:absolute; left:0; top:0; width: 1px; height: 100%; background-color: #e2e2e2;}
#sub.agencies .box-list ul li:first-of-type:before{display: none;}
#sub.agencies .box-list .title{position:relative; display:inline-block; padding-top: 6px; z-index: 1;}
#sub.agencies .box-list .title:before{content:''; display: block; position:absolute; top:0; width:34px; height:34px; border-radius: 100%; background-color: #e2e2e2; z-index: -1;}
#sub.agencies .box-list .li1 .title:before{left:-10px; }
#sub.agencies .box-list .li2 .title:before{right:0;}
#sub.agencies .box-list .li3 .title:before{right:0; top:auto; bottom:-4px;}
#sub.agencies .box-list .title p{line-height: 1; font-size: var(--font-size16); color: var(--point-color);}
#sub.agencies .box-list .title p strong{display: inline-block; font-size: 4rem; font-weight: 900;}
#sub.agencies .box-list .content{margin-top: 20px;}
#sub.agencies .box-list .content p{font-size: var(--font-size16); line-height: 160%; color: #000;}

#sub.agencies .btn-wrap{gap: 10px;}
#sub.agencies .btn-wrap  a{display: block; width: 180px; height: 60px; line-height: 58px; border-radius: 30px; text-align: center; font-size: var(--font-size16);}
#sub.agencies .btn-wrap .btn-inquiry a{border: 1px solid #333; color: var(--txt-dark);}
#sub.agencies .btn-wrap .btn-tel a{background-color: #020b23; color: #fff;}

/* banner */
#sub.banner .sec-tit p{margin-top:20px; font-size: var(--font-size16); line-height: 130%;}
#sub.banner .tab-round{margin:50px auto 0; max-width: 600px;}
#sub.banner .tab-round.tab-bl li a.on span{position:relative; padding-left: 24px;}
#sub.banner .tab-round.tab-bl li a.on span:before{content:''; display: block; position:absolute; left:0; top:50%; margin-top:-6px; width:14px; height:12px; background-image: url(/img/svg/ico-banner-on.svg);}

#sub.banner .box-wrap > ul{margin:-20px; flex-wrap: wrap;}
#sub.banner .box-wrap > ul > li{width:25%; padding: 20px; box-sizing: border-box;}
#sub.banner .box-wrap > ul > li .inner{padding:30px 40px 40px; border-radius: 20px; background-color: #fff; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.10); border: 1px solid transparent; transition: all 0.2s linear; cursor: pointer;}
#sub.banner .box-wrap > ul > li .inner:hover{border:1px solid #bbdaff; box-shadow:5px 5px 15px 0px rgba(0, 0, 0, 0.10);}
#sub.banner .box-wrap > ul > li.on .inner{border: 1px solid var(--point-color); background-color: #f0f7ff; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.10);;}

#sub.banner .box-wrap .top .num i{display: block; margin: 0 auto; width: 30px; height: 30px; line-height: 30px; border-radius: 100%; background-color: #020b23; text-align: center; font-weight: 800; font-size: 15px; color: #fff;}
#sub.banner .box-wrap .on .top .num i{background-color: var(--point-color); text-indent: -99999px; overflow: hidden; background-image: url(/img/svg/ico-banner-on.svg); background-position: 50% 50%; background-size: 14px 12px; background-repeat: no-repeat;}

#sub.banner .box-wrap .top .title{margin-top: 5px; text-align: center;}
#sub.banner .box-wrap .top .title em{display: block; font-size: var(--font-size22); font-weight: 800; color: #020b23; line-height: 1.2;}
#sub.banner .box-wrap .on .top .title em{color: var(--point-color);}
#sub.banner .box-wrap .top .title p{margin-top:3px; font-size: var(--font-size16); font-weight: 600; color: #6c7880; line-height: 1;}
#sub.banner .box-wrap .on .top .title p{color: #020b23;}

#sub.banner .box-wrap .mid{margin-top: 12px;}
#sub.banner .box-wrap .mid > div{border-radius: 5px; background-color: #f0f7ff; border: 1px solid #bbdaff; box-sizing:border-box;}
#sub.banner .box-wrap .mid > div.standard{display:flex; justify-content:center; align-items:center; padding:0 15px; height:44px;}
#sub.banner .box-wrap .mid > div.standard.hide{opacity:0;}
#sub.banner .box-wrap .on .mid > div{background-color: #fff;}
#sub.banner .box-wrap .mid .period{padding: 18px 15px;}
#sub.banner .box-wrap .mid .period > p{gap: 10px; line-height: 100%;}
#sub.banner .box-wrap .mid .period > p.top{padding-bottom: 15px;}
#sub.banner .box-wrap .mid .period > p.btm{padding-top: 15px; border-top: 1px solid #d2deed;}
#sub.banner .box-wrap .mid .period > p b{display: block; font-size: var(--font-size14); font-weight: 700; color: #020b23;}
#sub.banner .box-wrap .mid .period > p strong{display: block; font-size: var(--font-size18); font-weight: 800; color: var(--point-color);}

#sub.banner .box-wrap .mid .standard{margin-top: 8px;}
#sub.banner .box-wrap .mid .standard > p{width:100%; line-height: 100%; color: #333;}
#sub.banner .box-wrap .mid .standard > p b{display: block; font-size: var(--font-size14); font-weight: 700;}
#sub.banner .box-wrap .mid .standard > p em{display: block; font-size: var(--font-size14); font-weight: 800;}

#sub.banner .box-wrap .btm{margin-top: 8px; gap: 8px;}
#sub.banner .box-wrap .btm > div{width: 100%;}
#sub.banner .box-wrap .btm > div > *{display: block; width: 100%; height: 46px; line-height: 44px; border-radius: 5px; font-size: var(--font-size14); font-weight: 700; text-align: center;}
#sub.banner .box-wrap .btm .btn-position a{border: 1px solid var(--point-color); color: var(--point-color); background-color: #fff; transition: all 0.2s linear;}
#sub.banner .box-wrap .btm .btn-position a:hover{background-color: var(--point-color); color: #fff;}
#sub.banner .box-wrap .btm .btn-inquiry a{background-color: var(--point-color); color: #fff;}

#sub.banner .img-wrap{gap: 30px; margin-top: 50px;}
#sub.banner .tab-mobile .img-wrap{margin-top: 28px;}

#sub.banner .img-wrap .img-box{position:relative;}
#sub.banner .img-wrap .img-box #main-scroll-scope,
#sub.banner .img-wrap .img-box #main-scroll-scope-mo,
#sub.banner .img-wrap .img-box #sub-scroll-scope,
#sub.banner .img-wrap .img-box #sub-scroll-scope-mo{position:absolute; left:0; top:-180px; width: 100%; height: 1px;}
#sub.banner .img-wrap .img-box #sub-scroll-scope-bottom,
#sub.banner .img-wrap .img-box #sub-scroll-scope-mo-bottom{position:absolute; left:0; bottom:450px; width: 100%; height: 1px;}

#sub.banner .img-wrap .img-box .title{text-align: center;}
#sub.banner .img-wrap .img-box .title em{position:relative; display: inline-block; margin: 0 auto; padding: 12px 20px; border-radius: 21px; background-color: #6c7880; font-size: var(--font-size18); color: #fff; line-height: 1; z-index: 3;}
#sub.banner .img-wrap .img-box .content{margin-top: -21px;}
#sub.banner .img-wrap .img-box .content .inner{border-radius: 10px; border: 1px solid #e2e2e2; background-color: #fff; overflow: hidden;}
#sub.banner .tab-mobile .img-wrap .img-box .content .inner{padding: 20px;}
#sub.banner .img-wrap .img-box .content img{display: none;}
#sub.banner .img-wrap .img-box .content img.on{display: block;}
#sub.banner .tab-mobile .img-wrap .img-box .content img{border-radius: 10px; overflow: hidden;}@charset "utf-8";


#ui-datepicker-div {
    display: none;
    background-color: #fff;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
    margin-top: 0.25rem;
    border-radius: 0.5rem;
    padding: 1rem;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

.ui-datepicker-calendar thead th {
    padding: 0.25rem 0;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 400;
    color: #78909C;
    font-family: 'Roboto', 'Noto Sans KR', sans-serif;
}

.ui-datepicker-calendar tbody td {
    width: 3.5rem;
    text-align: center;
    padding: 0;
}

.ui-datepicker-calendar tbody td a {
    display: block;
    border-radius: 0.25rem;
    line-height: 3rem;
    transition: 0.3s all;
    color: #546E7A;
    font-size: 1.5rem;
    text-decoration: none;
    font-family: 'Roboto', 'Noto Sans KR', sans-serif;
}

.ui-datepicker-calendar tbody td a:hover {
    background-color: #E0F2F1;
}

.ui-datepicker-calendar tbody td a.ui-state-active {
    background-color: #009688;
    color: white;
}

.ui-datepicker-header a.ui-corner-all {
    cursor: pointer;
    position: absolute;
    top: 0;
    width: 4rem;
    height: 4rem;
    margin: 0.5rem;
    border-radius: 0.25rem;
    transition: 0.3s all;
}

.ui-datepicker-header a.ui-corner-all:hover {
    background-color: #ECEFF1;
}

.ui-datepicker-header a.ui-datepicker-prev {
    left: 0;
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDEzIDEzIj48cGF0aCBmaWxsPSIjNDI0NzcwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjI4OCA2LjI5NkwzLjIwMiAyLjIxYS43MS43MSAwIDAgMSAuMDA3LS45OTljLjI4LS4yOC43MjUtLjI4Ljk5OS0uMDA3TDguODAzIDUuOGEuNjk1LjY5NSAwIDAgMSAuMjAyLjQ5Ni42OTUuNjk1IDAgMCAxLS4yMDIuNDk3bC00LjU5NSA0LjU5NWEuNzA0LjcwNCAwIDAgMS0xLS4wMDcuNzEuNzEgMCAwIDEtLjAwNi0uOTk5bDQuMDg2LTQuMDg2eiIvPjwvc3ZnPg==");
    background-repeat: no-repeat;
    background-size: 1.3rem;
    background-position: 50%;
    transform: rotate(180deg);
}

.ui-datepicker-header a.ui-datepicker-next {
    right: 0;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDEzIDEzIj48cGF0aCBmaWxsPSIjNDI0NzcwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjI4OCA2LjI5NkwzLjIwMiAyLjIxYS43MS43MSAwIDAgMSAuMDA3LS45OTljLjI4LS4yOC43MjUtLjI4Ljk5OS0uMDA3TDguODAzIDUuOGEuNjk1LjY5NSAwIDAgMSAuMjAyLjQ5Ni42OTUuNjk1IDAgMCAxLS4yMDIuNDk3bC00LjU5NSA0LjU5NWEuNzA0LjcwNCAwIDAgMS0xLS4wMDcuNzEuNzEgMCAwIDEtLjAwNi0uOTk5bDQuMDg2LTQuMDg2eiIvPjwvc3ZnPg==');
    background-repeat: no-repeat;
    background-size: 1.3rem;
    background-position: 50%;
}

.ui-datepicker-header a > span {
    display: none;
}

.ui-datepicker-title {
    text-align: center;
    line-height: 3rem;
    margin-bottom: 0.25rem;
    font-size: 1.5rem;
    font-weight: 500;
    padding-bottom: 0.25rem;
}

.ui-datepicker-week-col {
    color: #78909C;
    font-weight: 400;
    font-size: 0.75rem;
}
@charset "utf-8";
/* CSS Document */

.program_menu {
    width: 100%;
    position: relative;
    height: 100%;
    overflow: hidden;
    background: #000000;
    color: #ffffff;
}

.program_menu h1 {
    font-size: 2.0rem;
    font-weight: 800;
    text-align: center;
    padding: 10px;
}

.program_menu h1 img {
    width: 100%;
}

.program_menu .m {
    cursor: pointer;
}

/*마우스 모양*/
.program_menu .s {
    display: none;
}

/*처음엔 보여주지 않기*/

.program_menu ul {
    width: 100%;
}

.program_menu > ul > li {
    width: 100%;
    background: #333333;
    color: #ffffff;
    padding: 10px;
    text-indent: 10px;
    line-height: 30px;
    border-bottom: 1px solid #666666;
}

.program_menu > ul > li > ul > li {
    padding: 1px 0;
    line-height: 20px;
    border-bottom: none;
}

.program_menu > ul > li > ul > li a {
    width: 100%;
    background: #999999;
    padding: 5px 5px;
    color: #333333;
    display: block;
}

.program_menu > ul > li > ul > li a:hover {
    background: #36e4e6;
    color: #333333;
    font-weight: bold;
}

.program {
    margin: 30px;
    min-height: 100%;
}

.program h2.title {
    font-size: 2.0rem;
    padding: 10px 0;
    min-width: 320px;
}

/* ==================================================
	공통사용
================================================== */

/* pagenation */
.pagenate {
    width: 100%;
    clear: both;
}

.pagenate {
    text-align: center;
    margin: 20px auto 0;
}

.pagenate li {
    display: inline-block;
    font-family: "Noto Sans KR", sans-serif;
    font-weight: 200;
    margin-left: 3px;
}

.pagenate li:first-child {
    margin-left: 0px;
}

.pagenate li a {
    display: inline-block;
    text-decoration: none;
    padding: 0;
    width: 36px;
    height: 36px;
    line-height: 36px;
    border: 1px solid #c7c8cc;
    box-sizing: border-box;
    margin-left: -1px;
    vertical-align: middle;
}

.pagenate li a:hover {
    background: #f6f6f6;
    font-weight: bold;
    text-decoration: none !important;
}

.pagenate li a.board {
    text-indent: -9999em;
    margin-left: 4px;
}

.pagenate li a.board.first {
    background: #f3f3f3 url("/img/ico_first.png") no-repeat center center;
}

.pagenate li a.board.prev {
    margin-right: 30px;
    background: #efefef url("/img/ico_prev.png") no-repeat center center;
}

.pagenate li a.board.next {
    margin-left: 30px;
    background: #efefef url("/img/ico_next.png") no-repeat center center;
}

.pagenate li a.board.last {
    background: #f3f3f3 url("/img/ico_last.png") no-repeat center center;
}

.pagenate li a.current {
    color: #ffffff;
    background-color: #313234;
    font-weight: 400;
    border: 1px solid #313234;
}

/* button */
.btnSet {
    position: relative;
    margin: 20px 0;
    text-align: center;
}

.btn {
    text-decoration: none !important;
    white-space: nowrap;
    display: inline-block;
    vertical-align: baseline;
    position: relative;
    cursor: pointer;
    padding: 8px 10px;
    min-width: 100px;
    background: rgba(0, 0, 0, 0.8);
    color: #ffffff !important;
    margin: 0 2px;
    text-align: center;
    font-weight: 400;
    box-sizing: border-box;
    vertical-align: middle;
}

input[type=submit].btn {
    text-decoration: none !important;
    white-space: nowrap;
    display: inline-block;
    vertical-align: baseline;
    position: relative;
    cursor: pointer;
    padding: 8px 10px;
    min-width: 100px;
    background: rgba(0, 0, 0, 0.8);
    color: #ffffff !important;
    margin: 0 2px;
    text-align: center;
    font-weight: 400;
    box-sizing: border-box;
    vertical-align: middle;
}

.btn:hover {
    background: rgba(0, 0, 0, 1.0);
    color: #ffffff !important;
    box-shadow: rgba(0, 0, 0, 0.3) 3px 3px 10px;
}

.btn.cancel {
    background: rgba(0, 0, 0, 0.6);
}

.btn.intable {
    background: rgba(0, 0, 0, 0.4) !important;
    min-width: 80px;
}

.intable:hover {
    background: rgba(0, 0, 0, 0.6) !important;;
    color: #ffffff !important;
    box-shadow: rgba(0, 0, 0, 0.3) 1px 1px 5px;
}

/*보더 라운드*/
.bbs input[type="text"], .bbs input[type="password"], .bbs input[type="button"], .bbs input[type="submit"], .bbs select {
    border-radius: 4px;
}

.pagenate li a.current, .pagenate li a {
    border-radius: 4px;
}

.btn {
    border-radius: 4px;
}

.check_box label:before {
    border-radius: 4px;
}

.bbs span.state {
    border-radius: 4px;
}

/*링크 마우스 오버*/
.bbs .view .link dl dd a:hover {
    color: #000000;
    text-decoration: underline !important;
}

.viewNavi > li a:hover {
    color: #000000;
    text-decoration: underline !important;
}

/*관리자 이름 미노출*/
.admin {
    display: none !important;
}

/* ==================================================
	member
================================================== */
.login_form {
    max-width: 480px;
    margin: 0 auto;
}

.login_form > div {
    margin-bottom: 10px;
}

.login_txt h3 {
    font-size: 3.0rem;
    font-weight: 600;
    color: #333333;
}

.login_form .login_box input[type="text"], .login_form .login_box input[type="password"] {
    height: 50px;
    padding-left: 40px;
    font-size: 1.6rem;
}

.login_form .login_box .id, .login_form .login_box .password, .login_form .login_box .name, .login_form .login_box .email {
    position: relative;
    height: 50px;
    margin-bottom: 5px;
}

.login_form .login_box .id:before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    background: url(/img/ico_id.png) no-repeat center center;
    display: block;
}

.login_form .login_box .password:before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    background: url(/img/ico_password.png) no-repeat center center;
    display: block;
}

.login_form .login_box .name:before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    background: url(/img/ico_name.png) no-repeat center center;
    display: block;
}

.login_form .login_box .email:before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    background: url(/img/ico_email.png) no-repeat center center;
    display: block;
}

.login_form .login_btn input[type="submit"] {
    height: 50px;
    font-size: 1.6rem;
    font-weight: 500;
    width: 100%;
}

.login_util {
    position: relative;
}

.login_util a {
    display: block;
}

.login_util > .join {
    float: left;
    font-weight: 500;
    color: #333333;
}

.login_util > div {
    float: right;
}

.login_util > div > a {
    display: inline-block;
}

.login_util > div > a:last-child {
    padding-left: 20px;
    position: relative;
}

.login_util > div > a:last-child:before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    margin-top: -7px;
    width: 1px;
    height: 14px;
    background: #cccccc;
}

.find_wrap {
    max-width: 480px;
    margin: 0 auto;
}

.find_tab li {
    width: 50%;
    float: left;
    box-sizing: border-box;
}

.find_tab li > a {
    display: block;
    text-align: center;
    padding: 10px;
    border: 2px solid #cccccc;
    background: #cccccc;
    box-sizing: border-box;
    color: #ffffff;
}

.find_tab li > a.on {
    border-bottom: 2px solid #ffffff;
    background: #ffffff;
    color: #999999;
    font-weight: 500;
}

/* ==================================================
	board
================================================== */
.bbs {
    position: relative;
    width: 100%;
    clear: both;
}

.bbs input[type="text"], .bbs input[type="password"], .bbs select {
    height: 40px;
    line-height: 40px;
    vertical-align: middle;
    padding: 0 5px;
    width: 100%;
    box-sizing: border-box;
}

.bbs h3 {
    font-size: 18px;
    font-weight: 500;
    color: #333333;
    margin-bottom: 15px;
    letter-spacing: -1px;
}

/* list */
.bbs .list {
}

.bbs .list thead {
    border-top: 2px solid #333333;
    border-bottom: 1px solid #adadad;
}

.bbs .list thead th {
    padding: 15px 10px;
    font-size: 1.5rem;
    color: #333333;
}

.bbs .list td {
    text-align: center;
    padding: 15px 10px;
    line-height: 1.4;
}

.bbs .list tbody tr:hover {
    background: #f9f9f9;
}

/*마우스오버 배경칼라지정*/
.bbs .list tbody tr {
    border-bottom: 1px solid #e1e1e1;
}

.bbs .list tbody tr:last-child {
    border-bottom: 1px solid #adadad;
}

.bbs .list .notice {
    background: #fffdf6;
}

/*탑공지  배경칼라지정*/
.bbs span.notice_ico {
    background: #e30000 url(/img/ico_notice.png) no-repeat center center;
    border-radius: 12px;
    height: 24px;
    width: 24px;
    display: block;
    line-height: 24px;
    vertical-align: middle;
    text-indent: -99999px;
    margin: 0 auto;
}

.bbs .list .reNum {
    color: #a9a9a9;
    font-size: 1.3rem;
}

.bbs .list .reNum strong {
    font-weight: 400;
    color: #333333;
    padding: 0 2px;
}

.bbs .list .secret {
    display: inline-block;
    width: 25px;
    height: 25px;
    line-height: 20px;
    border-radius: 15px;
    background: #f9f9f9;
    text-align: center;
    vertical-align: middle;
}

.bbs .list .secret img {
    line-height: 25px;
    vertical-align: middle;
}

.bbs .list span.comment {
    color: #999999;
    font-size: 1.2rem !important;
    font-weight: normal !important;
}

/*댓글수*/
.bbs .list .image img {
    width: 80px;
    height: auto;
}

.bbs .list .title span {
    font-size: 1.5rem;
    font-weight: bold;
}

.bbs .state span {
    display: block;
    padding: 2px 8px;
    margin: auto;
    max-width: 50px;
    font-size: 1.4rem;
    text-align: center;
    box-sizing: border-box;
}

.bbs .state span.waiting {
    background: #f4f4f4;
    color: #aaaaaa;
}

.bbs .state span.complete {
    background: #eff9fa;
    color: #1091ff;
}

.bbs .state span b {
    display: none;
}

/* search */
.bbsSearch {
    min-height: 32px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    max-width: 500px;
    width: 100%;
    position: relative;
    overflow: hidden;
    margin: 20px auto 20px;
}

.bbsSearch input[type="text"] {
    box-sizing: border-box;
    padding: 5px 36px 5px 5px;
    border: 0;
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #c7c8cc;
    vertical-align: middle;
}

.bbsSearch input[type="button"] {
    border: 0;
    width: 36px;
    text-indent: -9999em;
    position: absolute;
    top: 50%;
    right: 0;
    background: url("/img/ico_search.png") no-repeat center center;
    display: inline-block;
    margin-top: -12px;
}

.bbsSearch .searchWord {
    float: left;
    position: relative;
    width: 70%;
}

.bbsSearch .srchSelect {
    float: left;
    display: block;
    width: 29%;
    margin-right: 1%;
    box-sizing: border-box;
}

.bbsSearch .srchSelect .dSelect {
    width: 100%;
}

.bbsSearch .searchWord.btnSearch input[type="text"] {
    width: calc(100% - 84px) !important;
    padding: 5px;
}

.bbsSearch .searchWord.btnSearch input[type="button"] {
    width: 80px;
    min-width: 80px;
    text-indent: 0;
    position: relative;
    top: inherit;
    right: inherit;
    background: rgba(0, 0, 0, 0.8);
    margin: 0;
}

/* view */
.bbs .view {
}

.bbs .view {
    width: 100%;
    border-top: 2px solid #333333;
}

.bbs .view .title > dl {
    width: 100%;
    padding: 20px;
    border-bottom: 1px solid #adadad;
    background: #fafafa;
    box-sizing: border-box;
}

.bbs .view .title > dl > dt {
    font-size: 2.0rem;
    color: #000000;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 10px;
}

.bbs .view .title > dl > dd {
    display: inline-block;
    font-size: 1.4rem;
    color: #999999;
    position: relative;
    padding-right: 18px;
}

.bbs .view .title > dl > dd:after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 14px;
    background: #dddddd;
    position: absolute;
    right: 8px;
    top: 50%;
    margin-top: -7px;
}

.bbs .view .title > dl > dd:last-child:after {
    background: none;
    padding-right: 0;
}

.bbs .view .title > dl > dd > span {
    padding-right: 8px;
    color: #333333;
    display: inline-block;
    text-indent: -99999px;
}

/* 텍스트 표기시 text-indent, 아래 아이콘 이미지 스타일 주석처리 */
.bbs .view .title > dl > dd > span.name {
    background: url(/img/ico_name.png) no-repeat left center;
    width: 15px;
    height: auto;
}

.bbs .view .title > dl > dd > span.date {
    background: url(/img/ico_date.png) no-repeat left center;
    width: 13px;
    height: auto;
}

.bbs .view .title > dl > dd > span.hit {
    background: url(/img/ico_hit.png) no-repeat left center;
    width: 18px;
    height: auto;
}

.bbs .view .cont {
    padding: 20px;
    min-height: 200px;
    border-bottom: 1px solid #e1e1e1;
}

.bbs .view .cont img {
    max-width: 100% !important;
}

.bbs .view .reply {
}

.bbs .view .reply > dl {
    width: 100%;
    background: #f4f4f4;
    padding: 20px 5%;
}

.bbs .view .reply > dl > dt {
    padding: 20px 0;
    font-size: 2.2rem;
    color: #000000;
    position: relative;
}

.bbs .view .reply > dl > dt > span {
    display: block;
    font-size: 1.6rem;
    color: #999999;
}

.bbs .view .reply > dl > dt:after {
    content: "";
    position: absolute;
    width: 17px;
    height: 1px;
    background-color: #000000;
    bottom: 0;
    left: 3px;
}

.bbs .view .reply > dl > dd {
    font-size: 1.6rem;
    color: #5c5d63;
    padding: 20px 0;
}

.bbs .view .link {
    position: relative;
    overflow: hidden;
}

.bbs .view .link dl {
    border-bottom: 1px solid #e1e1e1;
    width: 100%;
    display: block;
    position: relative;
    overflow: hidden;
    clear: both;
    padding: 10px 20px;
    box-sizing: border-box;
}

.bbs .view .link dl:last-child {
    border-bottom: 1px solid #adadad;
}

.bbs .view .link dl dt {
    float: left;
    color: #333333;
    padding-right: 15px;
    text-indent: -99999px;
}

/* 텍스트 표기시 text-indent, 아래 아이콘 이미지 스타일 주석처리 */
.bbs .view .link dl dt.file {
    background: url(/img/ico_file.png) no-repeat left center;
    width: 16px;
    height: 24px;
}

.bbs .view .link dl dt.url {
    background: url(/img/ico_link.png) no-repeat left center;
    width: 16px;
    height: 24px;
}

.bbs .view .link dl dd {
    float: left;
    font-size: 1.4rem;;
}

.viewNavi {
    border-top: 1px solid #adadad;
    border-bottom: 1px solid #adadad;
    margin-top: -1px;
}

.viewNavi > li {
    position: relative;
    padding: 10px 100px;
    border-top: 1px solid #e1e1e1;
    font-size: 1.4rem;;
}

.viewNavi > li:first-child {
    border-top: 0;
}

.viewNavi > li span {
    position: absolute;
    left: 15px;
    padding: 0 20px;
    font-size: 1.4rem;
    color: #333333;
    font-weight: 400;
}

.viewNavi > li span.next:before {
    content: "";
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 4.5px 5px 4.5px;
    border-color: transparent transparent #000000 transparent;
    line-height: 0px;
    position: absolute;
    top: 8px;
    left: 2px;
}

.viewNavi > li span.prev:before {
    content: "";
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 5px 4.5px 0 4.5px;
    border-color: #000000 transparent transparent transparent;
    line-height: 0px;
    position: absolute;
    top: 8px;
    left: 2px;
}

.viewNavi > li span:after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 14px;
    background: #dddddd;
    position: absolute;
    right: 8px;
    top: 50%;
    margin-top: -7px;
}

.viewNavi > li a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    font-size: 1.4rem;;
}

/* 답변 */
.bbs .answer {
    border-top: 1px solid #333333;
    border-bottom: 1px solid #adadad;
}

.bbs span.answer_ico {
    background: #333333 url(/img/ico_answer.png) no-repeat center center;
    border-radius: 14px;
    height: 28px;
    width: 28px;
    display: inline-block;
    line-height: 30px;
    vertical-align: top;
    text-indent: -99999px;
    margin-right: 5px;
}

/* 리플 달기 */
.reply {
    position: relative;
    padding: 20px;
    border-bottom: 1px solid #adadad;
    background: #fafafa;
}

.reply .tit {
    margin: 5px 0;
}

.reply .tit .number {
    color: #000000;
    font-weight: bold;
}

.reply .reply_write {
    overflow: hidden;
    padding: 20px 0 10px;
    background: #fafafa;
}

.reply .reply_write .tit_area {
    position: relative;
    width: 80%;
    margin: 0 0 10px 0;
}

.reply .reply_write .tit_area .tit {
    display: inline-block;
    margin: 0;
    font-size: 1.6rem;
    line-height: 18px;
    font-weight: bold;
}

.reply .reply_write .tit_area .txt {
    display: inline-block;
    margin: 0 0 0 5px;
    font-size: 1.4rem;;
    line-height: 16px;
    color: #999999;
}

/* 작성자가 빠지는 경우
.reply .reply_write .tit_area .limit{position:absolute;right:0;bottom:0px;color:#999;font-size:1.2rem;line-height:14px;}*/
/* 작성자가 들어가는 경우 */
.reply .reply_write .tit_area .limit {
    position: absolute;
    right: 0;
    bottom: -30px;
    color: #999999;
    font-size: 1.2rem;
    line-height: 14px;
}

.reply .reply_write .write_area {
    clear: both;
}

.reply .reply_write .write_area .input {
    padding: 0 0 5px 0;
}

.reply .reply_write .write_area .input input {
    border: 1px solid #d1d1d1;
    height: 36px;
    width: 200px;
}

.reply .reply_write .write_area .textarea {
    position: relative;
    float: left;
    width: 80%;
}

.reply .reply_write .write_area .textarea textarea {
    position: relative;
    overflow-y: auto;
    box-sizing: border-box;
    width: 100%;
    height: 80px;
    padding: 10px 10px;
    border: 1px solid #d1d1d1;
    font-size: 1.4rem;;
    line-height: 18px;
}

.reply .reply_write .write_area .bt_box {
    width: 20%;
    float: left;
}

.reply .reply_write .write_area .bt_box ul {
    width: 100%;
}

.reply .reply_write .write_area .bt_box li {
    width: 100%;
}

.reply .reply_write .write_area .bt_box li a {
    width: 100%;
    display: block;
    height: 80px;
    font-size: 1.4rem;;
    padding: 31px 0 0;
    border: 1px solid #999999;
    background: #999999;
    text-align: center;
    color: #ffffff;
}

.reply .reply_write .write_area .bt_box li a:hover {
    text-decoration: none !important;
}

.reply .recommend {
}

.reply .recommend .re_list {
    border-top: 1px solid #ebebeb;
}

.reply .recommend .re_list {
    position: relative;
}

.reply .recommend .re_list li {
    padding: 20px 0;
    border-bottom: 1px solid #ebebeb;
}

.reply .recommend .re_list dl {
    position: relative;
    overflow: hidden;
    margin: 0 0 8px 0;
    font-size: 1.4rem;;
    line-height: 20px;
}

.reply .recommend .re_list dl dt {
    position: relative;
    float: left;
    font-weight: bold;
    padding: 0 12px 0 0;
    color: #999999;
}

.reply .recommend .re_list dl dt span {
    font-weight: normal;
}

.reply .recommend .re_list dl dd {
    clear: both;
    padding: 0;
}

.reply .recommend .re_list dl dt span:before {
    content: "|";
    display: inline-block;
    margin: 0 10px;
    font-size: 1.4rem;
    color: #e4e4e4;
}

.reply .recommend .re_list dl dd .add_data {
    margin: 0 8px 0 0;
    font-size: 1.4rem;;
    line-height: 16px;
    color: #333333;
}

.reply .recommend .re_list p {
    width: 100%;
    font-size: 1.4rem;;
    line-height: 22px;
    color: #666666;
    word-break: break-all;
}

.reply .recommend .re_list .iptEmpty {
    padding: 30px 0 !important;
    color: #555555;
}

.reply .recommend .re_list .bt_delete {
    margin-left: 10px;
    width: 20px;
    height: 20px;
    font-size: 0;
    line-height: 0;
    background: #999999 url("/img/delete_btn.png") no-repeat center;
    background-size: contain;
}

.reply .recommend .none_list {
    padding: 50px 10px;
    border-bottom: 1px solid #ebebeb;
    text-align: center
}

.qna_pass {
    display: none;
    width: 500px;
    position: absolute;
    height: 265px;
    margin-left: -250px;
    top: 50%;
    left: 50%;
    box-sizing: border-box;
    padding: 35px 20px;
    margin-top: -132.5px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 30px;
}

.qna_pass .topic {
    font-size: 1.6rem;
    font-weight: 300;
    height: 50px;
    line-height: 50px;
}

.qna_pass .ipt {
    padding: 25px 0;
    width: 90%;
    margin: 0 auto;
    box-sizing: border-box;
    background: #f9f9f9;
}

.qna_pass .ipt span {
    display: inline-block;
    color: #1d1d1d;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 35px;
    margin-right: 20px;
}

.qna_pass .ipt input {
    width: 150px;
    background: #ffffff;
}

/* write */
.bbs .write_wrap .wr_box {
    margin-top: 40px;
}

.bbs .write {
    border-top: 2px solid #333333;
    border-bottom: 1px solid #999999;
}

.bbs .write thead th {
    text-align: center;
}

.bbs .write tbody th {
    text-align: left;
}

.bbs .write th {
    padding: 15px 15px;
    color: #333333;
    font-weight: 500;
    border-bottom: 1px solid #ebebeb;
}

.bbs .write th br {
    display: none;
}

.bbs .write th .required {
    color: #F00004;
    font-weight: 400;
    font-size: 1.6rem;
    display: inline-block;
    width: 10px;
    height: 30px;
    line-height: 32px;
    vertical-align: middle;
}

.bbs .write th .required > span {
    width: 0;
    height: 0;
    visibility: hidden;
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: alpha(opactiy=0);
}

.bbs .write td {
    padding: 10px;
    border-bottom: 1px solid #ebebeb;
    box-sizing: border-box;
}

.bbs .write td .tx {
    display: inline-block;
    float: left;
    width: 25px;
    line-height: 32px;
    text-align: center;
}

.bbs .write td textarea {
    width: 100%;
    height: 200px;
    box-sizing: border-box;
}

.bbs .write td .calendar {
    position: relative;
}

.bbs .write td .calendar span {
    display: block;
}

.bbs .write td .calendar span.material-icons {
    cursor: pointer;
    position: absolute;
    right: 5px;
    top: 50%;
    margin-top: -12px;
    color: #333333;
}

.bbs .write td .check_list .check_box {
    float: left;
    margin-left: 15px;
}

.bbs .write td .check_list .check_box:first-child {
    margin-left: 0;
}

.bbs .write td input[type="checkbox"] + label {
    cursor: pointer;
}

.bbs .write .email span.at {
    display: inline-block;
    width: 23px;
    text-align: center;
    height: 40px;
}

.bbs .write .email input, select {
    display: inline-block;
}

.bbs .write .email input {
    width: calc(50% - 15px);
}

.bbs .write .fileBox {
    width: 100%;
    height: 40px;
}

.bbs .write .fileBox .inputBox {
    width: calc(100% - 115px) !important;
    float: left;
}

.bbs .write .fileBox input {
    width: 100%;
}

.bbs .write .fileBox .fileBtn {
    display: block;
    width: 110px;
    height: 40px;
    float: left;
}

.bbs .write .oldFileDel {
    margin-top: 10px;
}

.bbs .write p.help {
    text-align: left;
    font-size: 1.3rem;
    line-height: 26px;
    letter-spacing: -1px;
    color: #999999;
    display: inline-block;
}

.bbs .write p.help:before {
    content: "※ ";
}

.bbs .write tr:last-child th, .bbs .write tr:last-child td {
    border-bottom: 1px solid #999999;
}

.bbs .spam > img {
    border-radius: 4px;
}

.bbs .spam_refresh {
    text-indent: -99999px;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background: #999999 url(/img/ico_refresh.png) no-repeat center center;
}

.bbs .write td.password > p > input {
    margin-top: 4px;
}

.bbs .write td.addr > input {
    margin-top: 4px;
}

.bbs .write td.addr > input:first-child {
    margin-top: 0;
}

.bbs .write .pwdIpt {
    display: none;
}

.bbs .write div.pwdIpt {
    margin-top: 10px;
}

/* 약관 및 개인정보수집 동의 */
.agree {
    margin: 0 0 30px;
}

.agree_con {
    background: #ffffff;
    overflow-y: scroll;
    width: 100%;
    height: 150px;
    border: 1px solid rgb(204, 204, 204);
    padding: 10px;
    box-sizing: border-box;
    border-radius: 4px;
}

.agree_con > strong {
    color: #000000;
    font-size: 1.8rem;
    font-weight: 500;
    margin-bottom: 10px;
    display: block;
}

.agree p.check_box {
    margin: 10px 0 0;
    text-align: right;
}

.agree_txt p, .agree_txt ul, .agree_txt ol {
    margin-bottom: 10px;
}

.agree_txt h4 {
    margin-top: 20px;
    color: #333333;
    font-size: 1.6rem;
    font-weight: 500;
}

.agree_txt dt {
    font-weight: 500;
    margin-top: 10px
}

.agree_txt dd:last-child {
    margin-bottom: 10px;
}

.agree_txt .num_list {
    counter-reset: item;
}

.agree_txt .num_list > li, .agree_txt .num_list > dt, .agree_txt .num_list > dd {
    position: relative;
    padding-left: 15px;
}

.agree_txt .num_list > li:before, .agree_txt .num_list > dt:before {
    content: counter(item) ".";
    counter-increment: item;
    position: absolute;
    top: 1px;
    left: 0;
}

.agree_txt .subnum_list {
    counter-reset: item;
}

.agree_txt .subnum_list > li, .agree_txt .subnum_list > dt, .agree_txt .subnum_list > dd {
    padding-left: 20px;
    position: relative;
}

.agree_txt .subnum_list > li:before, .agree_txt .subnum_list > dt:before {
    content: counter(item);
    counter-increment: item;
    position: absolute;
    top: 5px;
    left: 0;
    width: 14px;
    height: 14px;
    line-height: 14px;
    font-size: 10px;
    vertical-align: middle;
    border: 1px solid #707070;
    border-radius: 10px;
    text-align: center;
    display: inline-block;
}

.agree_txt .dotline_list > li {
    position: relative;
    padding-left: 10px;
}

.agree_txt .dotline_list > li:before {
    content: "";
    width: 4px;
    height: 2px;
    background: #707070;
    left: 0;
    top: 11px;
    position: absolute;
}

/* galley */
.bbs .gallery {
    width: 100%;
    border-top: 2px solid #333333;
    border-bottom: 1px solid #999999;
    padding: 20px 0;
    position: relative;
    overflow: hidden;
}

.bbs .gallery > ul {
    width: 102%;
    margin-left: -2%;
    margin-top: -20px;
}

.bbs .gallery > ul > li {
    width: 23%;
    margin: 20px 0 0 2%;
    float: left;
}

.bbs .gallery > ul > li > a {
    width: 100%; /*height:100%;*/
    display: block;
    padding: 15px;
    box-sizing: border-box;
    border: 1px solid #dadada;
}

.bbs .gallery > ul > li > a:hover {
    box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 10px
}

.bbs .gallery > ul > li > a dt {
    width: 100%;
    height: auto;;
    overflow: hidden;
}

.bbs .gallery > ul > li > a dt img {
    width: 100%;
    max-width: 100%;
    height: auto;
    visibility: hidden;
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: alpha(opactiy=0);
}

.bbs .gallery > ul > li > a dt.noimg img {
    opacity: 1;
    visibility: visible;
    filter: alpha(opacity=100);
    -ms-filter: alpha(opacity=100);
    width: 100%;
    height: auto;
}

.bbs .gallery > ul > li > a dt.imgs {
    width: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: relative;
}

.bbs .gallery > ul > li > a dd {
    width: 100%;
}

.bbs .gallery > ul > li > a dd.title {
    font-size: 1.8rem;
    color: #333333;
    font-weight: 500;
    height: 40px;
    line-height: 20px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    word-break: keep-all;
    max-width: 100%;
    width: 100%;
    position: relative;
    margin: 15px 0;
}

.bbs .gallery > ul > li > a dd.info {
    box-sizing: border-box;
    position: relative;
    font-size: 1.4rem;
    overflow: hidden;
    padding: 5px 0;
    box-sizing: border-box;
}

.bbs .gallery > ul > li > a dd.info:before {
    content: "";;
    display: block;
    position: absolute;
    left: 0;
    top: 0px;
    width: 100%;
    height: 1px;
    background: #efefef;
}

.bbs .gallery > ul > li > a dd.info li {
    display: inline-block;
    line-height: 26px;
    height: 26px;
    vertical-align: middle;
    padding: 0 5px;
    color: #999999
}

.bbs .gallery > ul > li > a dd.info li:first-child {
    padding-left: 0;
}

.bbs .gallery > ul > li > a dd.info li > span {
    padding-right: 4px;
    color: #333333;
    display: inline-block;
    text-indent: -99999px;
    line-height: 26px;
    height: 26px;
    vertical-align: middle;
}

/* 텍스트 표기시 text-indent, 아래 아이콘 이미지 스타일 주석처리 */
.bbs .gallery > ul > li > a dd.info li > b {
    display: inline-block;
    line-height: 26px;
    height: 26px;
    vertical-align: middle;
    font-size: 1.4rem;
    font-weight: normal;
}

.bbs .gallery > ul > li > a dd.info li > span.name {
    background: url(/img/ico_name.png) no-repeat left center;
    width: 15px;
    height: 24px;
}

.bbs .gallery > ul > li > a dd.info li > span.date {
    background: url(/img/ico_date.png) no-repeat left center;
    width: 13px;
    height: 24px;
}

.bbs .gallery > ul > li > a dd.info li > span.hit {
    background: url(/img/ico_hit.png) no-repeat left center;
    width: 18px;
    height: 24px;
}

.bbs .gallery span.notice_ico {
    position: absolute;
    left: 5px;
    top: 5px;
}

.bbs .gallery2 > ul > li {
    width: 18%;
}

/* grid */
.grid-gallery {
    border-top: 2px solid #333333;
    border-bottom: 1px solid #999999;
}

.grid-gallery .grid > li {
    padding: 10px;
    box-sizing: border-box;
}

.grid-gallery .grid > li figure {
    border: 1px solid #dadada;
}

.grid-gallery .grid figcaption {
    padding: 0;
    background: none;
}

.grid-gallery .grid figcaption .title {
    font-size: 1.8rem;
    color: #333333;
    font-weight: 600;
    height: 25px;
    line-height: 25px;
    overflow: hidden;
    display: block;
    -webkit-line-clamp: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: keep-all;
    max-width: 100%;
    margin-top: 10px;
}

.grid-gallery .grid figcaption .contxt {
    font-size: 1.4rem;
    color: #777777;
    height: 40px;
    line-height: 20px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    word-break: keep-all;
    max-width: 100%;
    width: 100%;
    position: relative;
    margin-bottom: 10px;
}

.grid-gallery .grid figcaption .info {
    box-sizing: border-box;
    font-size: 1.4rem;
    overflow: hidden;
    padding: 5px 0;
    position: relative;
}

.grid-gallery .grid figcaption .info:before {
    content: "";;
    display: block;
    position: absolute;
    left: 0;
    top: 0px;
    width: 100%;
    height: 1px;
    background: #efefef;
}

.grid-gallery .grid figcaption .info p {
    display: inline-block;
    line-height: 24px;
    height: 24px;
    vertical-align: middle;
    padding: 0 5px;
    float: inherit;
    width: auto;
    color: #999999;
}

.grid-gallery .grid figcaption .info p:first-child {
    padding-left: 0;
}

.grid-gallery .grid figcaption .info p > span {
    padding-right: 4px;
    color: #333333;
    display: inline-block;
    text-indent: -99999px;
    line-height: 24px;
    height: 24px;
    vertical-align: middle;
}

/* 텍스트 표기시 text-indent, 아래 아이콘 이미지 스타일 주석처리 */
.grid-gallery .grid figcaption .info p > b {
    display: inline-block;
    line-height: 26px;
    height: 26px;
    vertical-align: middle;
    font-size: 1.4rem;
    font-weight: normal;
}

.grid-gallery .grid figcaption .info p > span.name {
    background: url(/img/ico_name.png) no-repeat left center;
    width: 15px;
    height: 24px;
}

.grid-gallery .grid figcaption .info p > span.date {
    background: url(/img/ico_date.png) no-repeat left center;
    width: 13px;
    height: 24px;
}

.grid-gallery .grid figcaption .info p > span.hit {
    background: url(/img/ico_hit.png) no-repeat left center;
    width: 18px;
    height: 24px;
}

/* faq */
.bbs .faqTab {
    width: 100%;
    padding: 10px;
    background: #f9f9f9;
    box-sizing: border-box;
    margin-bottom: 20px;
}

.bbs .faqTab ul {
    width: 100%;
    box-sizing: border-box;
}

.bbs .faqTab ul li {
    float: left;
    width: auto;
}

.bbs .faqTab .itemList1 > li {
    width: 50%;
}

/* 2개 */
.bbs .faqTab .itemList2 > li {
    width: 33.3333%;
}

/* 3개 */
.bbs .faqTab .itemList3 > li {
    width: 25%;
}

/* 4개 */
.bbs .faqTab .itemList4 > li {
    width: 20%;
}

/* 5개 */
.bbs .faqTab .itemList5 > li {
    width: 16.666%;
}

/* 6개 */
.bbs .faqTab .itemList6 > li {
    width: 14.285%;
}

/* 7개 */
.bbs .faqTab .itemList7 > li {
    width: 12.5%;
}

/* 8개 */
.bbs .faqTab .itemList8 > li {
    width: 11.111%;
}

/* 9개 */
.bbs .faqTab .itemList9 > li {
    width: 10;
}

/* 10개 */
.bbs .faqTab ul li a {
    display: block;
    height: 42px;
    line-height: 42px;
    text-align: center;
    font-size: 1.5rem;
    box-sizing: border-box;
    border-right: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    transition: all .2s;
    -webkit-transition: all .2s;
    background: #ffffff;
    margin: 0 2px;
}

.bbs .faqTab ul li a.on {
    background: #333333;
    color: #ffffff;
    text-decoration: none !important;
}

.bbs .faqTab ul li a:hover {
    background: rgba(0, 0, 0, 1.0);
    color: #ffffff !important;
    box-shadow: rgba(0, 0, 0, 0.3) 3px 3px 10px;
    border: none;
}

.bbs .faqTab_m {
    display: none;
    width: 100%;
    padding: 15px 0;
    position: relative;
    z-index: 15;
}

.bbs .faqTab_m > a {
    display: block;
    width: 100%;
    height: 40px;
    line-height: 38px;
    border: 1px solid #000000;
    box-sizing: border-box; /*background:url('/img/mdepth_down.png') no-repeat calc(100% - 15px) center;*/
    background-size: 20px;
    padding: 0 15px;
    font-size: 1.6rem;
    box-sizing: border-box;
    position: relative;
}

.bbs .faqTab_m > a:after {
    border: 2px solid #333333;
    border-radius: 2px;
    border-left: 0;
    border-top: 0;
    content: " ";
    display: block;
    width: 8px;
    height: 8px;
    margin-top: -8px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: rotate(45deg);
    transform-origin: center;
    right: 10px;
    z-index: 4;
}

.bbs .faqTab_m > a.on:after {
    transform: rotate(225deg);
    margin-top: -4px;
}

.bbs .faqTab_m > ul {
    position: absolute;
    left: 0;
    border: 1px solid #333333;
    border-top: 0;
    width: 100%;
    display: none;
    box-sizing: border-box;
}

.bbs .faqTab_m > ul li a {
    display: block;
    width: 100%;
    height: 40px;
    line-height: 39px;
    border-top: 1px solid #dadada;
    padding: 0 15px;
    box-sizing: border-box;
    background: #ffffff;
    font-size: 15px;
}

.bbs .faqTab_m > ul li:first-child a {
    border-top: 0;
}

.bbs .faqTab_m a:hover {
    text-decoration: none !important;
}

.bbs .list.faq thead {
    display: none;
}

.bbs .list.faq {
    border-top: 2px solid #333333;
    border-bottom: 1px solid #adadad;
}

.bbs .list.faq tbody td {
    text-align: left;
    padding: 15px 12px;
}

.bbs .list.faq tbody td:first-child {
    padding-left: 40px;
    position: relative;
}

.bbs .list.faq tbody .faqA {
    display: none;
    background: #f9f9f9;
}

.bbs .list.faq tbody .faqQ td.title {
    cursor: pointer;
    font-weight: 500;
    color: #333333;
    position: relative;
}

.bbs .list.faq tbody .faqQ td.title:before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 14px;
    background: #dddddd;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -7px;
}

.bbs .list.faq tbody tr {
    border-bottom: none;
    border-top: 1px solid #e1e1e1;
}

.bbs .list.faq tbody tr:first-child {
    border-top: 0;
}

.bbs .list.faq tbody tr.faqA {
    border-top: 0;
}

.bbs .list.faq tbody .faqA td {
    position: relative;
    padding-right: 175px;
}

.bbs .list.faq tbody .faqQ td:first-child:before {
    width: 22px;
    height: 22px;
    line-height: 22px;
    vertical-align: middle;
    content: "Q";
    background: #333333;
    border-radius: 11px;
    color: #ffffff;
    position: absolute;
    left: 10px;
    top: 15px;
    display: block;
    text-align: center;
    font-family: "Roboto", "Noto Sans KR", sans-serif;
    font-weight: 500;
    font-size: 1.2rem;
}

.bbs .list.faq tbody .faqA td:first-child:before {
    width: 22px;
    height: 22px;
    line-height: 22px;
    vertical-align: middle;
    content: "A";
    background: #999999;
    border-radius: 11px;
    color: #ffffff;
    position: absolute;
    left: 10px;
    top: 15px;
    display: block;
    text-align: center;
    font-family: "Roboto", "Noto Sans KR", sans-serif;
    font-weight: 500;
    font-size: 1.2rem;
}

.bbs .list.faq tbody .faqA td .btn_box {
    position: absolute;
    right: 10px;
    bottom: 10px;
}

.bbs .list.faq tbody .faqA td a {
    padding: 5px 10px;
    min-width: 65px;
}

/* postImage */
.bbs .postSection {
    width: 100%;
}

.bbs .postSection .postList {
    width: 102%;
    margin-left: -2%;
    margin-top: -2%;
}

.bbs .postSection .postList > li {
    float: left;
    width: 48%;
    margin-left: 2%;
    margin-top: 2%;
}

.bbs .postSection .postList > li a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid #dadada;
    position: relative;
    overflow: hidden;
    transition: all .2s;
    -webkit-transition: all .2s;
    letter-spacing: -.5px;
}

.bbs .postSection .postList > li a:hover {
    text-decoration: none !important;
    box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 10px
}

.bbs .postSection .postList > li a .imgs {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    vertical-align: middle;
    width: 30%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    border: 10px solid #ffffff;
    box-sizing: border-box;
}

.bbs .postSection .postList > li a .imgs i {
    display: block;
    position: absolute;
    left: 0;
    top: 0px;
}

.bbs .postSection .postList > li a .txt {
    display: block;
    width: 100%;
    padding-left: 32%;
    box-sizing: border-box;
    vertical-align: top;
    position: relative;
    padding-right: 15px;
    padding-bottom: 35px;
}

.bbs .postSection .postList > li a .txt .category {
    font-size: 1.4rem;
    color: #1091ff;
    font-weight: 400;
    position: relative;
    height: 30px;
    line-height: 30px;
    margin-bottom: 5px;
    width: auto;
    display: inline-block;
}

.bbs .postSection .postList > li a .txt .category:after {
    clear: both;
    content: "";;
    display: block;
    position: absolute;
    left: 0;
    bottom: -.5px;
    width: 100%;
    height: 1px;
    background: #1091ff;
}

.bbs .postSection .postList > li a .txt .title {
    font-size: 1.8rem;
    color: #333333;
    font-weight: 600;
    height: 25px;
    line-height: 25px;
    overflow: hidden;
    display: block;
    -webkit-line-clamp: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: keep-all;
    max-width: 100%;
}

.bbs .postSection .postList > li a .txt .contxt {
    font-size: 1.4rem;
    color: #777777;
    height: 40px;
    line-height: 20px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    word-break: keep-all;
    max-width: 100%;
    width: 100%;
    position: relative;
    margin-bottom: 10px;
}

.bbs .postSection .postList > li a .info {
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    left: 32%;
    width: 68%;
    color: #999999;
    font-size: 1.4rem;
    overflow: hidden;
    padding: 5px 0;
    box-sizing: border-box;
    vertical-align: middle;
}

.bbs .postSection .postList > li a .info:before {
    content: "";;
    display: block;
    position: absolute;
    left: 0;
    top: 0px;
    width: 100%;
    height: 1px;
    background: #efefef;
}

.bbs .postSection .postList > li a .info ul {
    line-height: 26px;
    height: 26px;
    vertical-align: middle;
}

.bbs .postSection .postList > li a .info li {
    display: inline-table;
    line-height: 26px;
    height: 26px;
    vertical-align: middle;
    padding: 0 5px;
}

.bbs .postSection .postList > li a .info li:first-child {
    padding-left: 0;
}

.bbs .postSection .postList > li a .info li > span {
    display: inline-block;
    padding-right: 4px;
    color: #333333;
    text-indent: -99999px;
    line-height: 26px;
    height: 26px;
    vertical-align: middle;
    font-size: 1.4rem;;
}

/* 텍스트 표기시 text-indent, 아래 아이콘 이미지 스타일 주석처리 */
.bbs .postSection .postList > li a .info li > b {
    display: inline-block;
    line-height: 26px;
    height: 26px;
    vertical-align: middle;
    font-size: 1.4rem;
    font-weight: normal;
}

.bbs .postSection .postList > li a .info li > span.name {
    background: url(/img/ico_name.png) no-repeat left center;
    width: 15px;
    height: 24px;
}

.bbs .postSection .postList > li a .info li > span.date {
    background: url(/img/ico_date.png) no-repeat left center;
    width: 13px;
    height: 24px;
}

.bbs .postSection .postList > li a .info li > span.hit {
    background: url(/img/ico_hit.png) no-repeat left center;
    width: 18px;
    height: 24px;
}

.bbs .postSection .postList span.notice_ico {
    margin: 5px;
}

@media screen and (max-width: 1024px) {
    .bbs .gallery > ul > li {
        width: 31.333%;
        margin-left: 2%;
    }

    .bbs .write th {
        padding: 15px 0;
    }
}

@media screen and (max-width: 960px) {
    .bbs .write .email .checkBtn .select {
        width: calc(100% - 88px) !important;
        max-width: 345px;
    }
}

@media screen and (max-width: 768px) {
    /* pagenation */
    .pagenate li a.board {
        margin-left: 2px;
    }

    .pagenate li a.board.prev {
        margin-right: 0px;
    }

    .pagenate li a.board.next {
        margin-left: 0px;
    }

    /* list */
    .bbs .list colgroup {
        display: none;
    }

    .bbs .list thead {
        display: none;
    }

    .bbs .list tbody {
        border-top: 2px solid #333333 !important;
    }

    .bbs .list tbody tr {
        padding: 10px 0;
        width: 100%;
        display: block;
        text-align: left;
        vertical-align: middle;
        border-bottom: 1px solid #d9d9d9;
    }

    .bbs .list tbody td {
        width: 100%;
        display: block;
        text-align: left;
        padding: 0 0;
        border-bottom: none;
        position: relative;
    }

    .bbs span.notice_ico {
        margin: 0;
    }

    .bbs .list tbody td.no {
        display: none;
    }

    .bbs .list tbody td.title {
        color: #333333;
        font-weight: 500;
    }

    .bbs .list tbody td.name, .bbs .list tbody td.date, .bbs .list tbody td.hit {
        width: auto;
        display: inline-block;
        position: relative;
        margin-top: 5px;
        padding-right: 12px;
        vertical-align: top;
        line-height: 24px;
        padding-left: 24px;
    }

    .bbs .list tbody td.name:after, .bbs .list tbody td.date:after {
        content: "";
        position: absolute;
        width: 1px;
        height: 14px;
        background: #dddddd;
        position: absolute;
        right: 6px;
        top: 50%;
        margin-top: -7px;
    }

    .bbs .list tbody td.name:before {
        content: "";
        left: 0;
        top: 0;
        position: absolute;
        background: url(/img/ico_name.png) no-repeat left center;
        width: 24px;
        height: 24px;
    }

    .bbs .list tbody td.date:before {
        content: "";
        left: 0;
        top: 0;
        position: absolute;
        background: url(/img/ico_date.png) no-repeat left center;
        width: 24px;
        height: 24px;
    }

    .bbs .list tbody td.hit:before {
        content: "";
        left: 0;
        top: 0;
        position: absolute;
        background: url(/img/ico_hit.png) no-repeat left center;
        width: 24px;
        height: 24px;
    }

    .bbs .list tbody td.state {
        width: auto;
        display: inline-block;
        margin-top: 5px;
    }

    .bbs .list tbody td.state span {
        max-width: 70px;
    }

    .bbs .state span b {
        display: inline-block;
        font-weight: normal;
    }

    .bbs .list tbody td.image {
        width: 80px;
        padding-right: 10px;
        display: table-cell;
    }

    .bbs .list.imgList tbody td.title {
        width: auto;
        display: table-cell;
    }

    .bbs .list .image img {
        width: 100%;
        height: auto;
    }

    .bbs .list tbody td span.mo {
        display: inline-block;
        width: 60px;
        position: relative;
        padding: 0 10px;
        font-weight: 400;
    }

    .bbs .list tbody td span.mo:after {
        content: "";
        width: 1px;
        height: 10px;
        top: 50%;
        margin-top: -5px;
        background: rgba(0, 0, 0, 0.1);
        position: absolute;
        right: 10px;
    }

    /* faq */
    .bbs .list.faq tbody td {
        padding: 5px 10px;
    }

    .bbs .list.faq tbody .faqQ td.title {
        padding-left: 40px;
    }

    .bbs .list.faq tbody .faqQ td:first-child:before {
        top: 5px;
    }

    .bbs .list.faq tbody .faqA td {
        padding: 15px 10px 15px 40px;
    }

    .bbs .list.faq tbody .faqQ td.title:before {
        background: none;
    }

    /* gallery */
    .bbs .gallery > ul {
        width: 102%;
        margin-left: -2%;
    }

    .bbs .gallery > ul > li {
        width: 48%;
        margin-left: 2%;
    }

    /* view */
    .viewNavi > li {
        padding: 8px 20px 8px 45px;
    }

    .viewNavi > li span {
        width: 30px;
        height: 30px;
        overflow: hidden;
        text-indent: -9999em;
        left: 20px;
        padding: 0;
    }

    .viewNavi > li span::after {
        background: none;
    }

    .bbs .view .link dl dt {
        padding-right: 10px;
    }

    /* 리플 달기 */
    .reply .reply_write .write_area {
        float: none
    }

    .reply .reply_write .write_area .textarea {
        float: none;
        display: block;
        width: 100%
    }

    .reply .reply_write .write_area .textarea textarea {
        width: 100%
    }

    .reply .reply_write .write_area .textarea .limit {
        right: auto;
        left: 0
    }

    .reply .reply_write .write_area .bt_box {
        float: right;
        margin: 10px 0 0 0;
        width: 120px;
    }

    .reply .reply_write .write_area .bt_box li a {
        padding: 0;
        height: 33px;
        box-sizing: border-box;
        line-height: 33px;
    }

    .reply .reply_write .tit_area {
        width: 100%;
    }

    .reply .reply_write .tit_area .txt {
        margin: 5px 0 0;
        display: block;
    }

    /* 작성자가 빠지는 경우
	.reply .reply_write .tit_area .limit{position:absolute; left:0; top:340%; right:auto; bottom:auto;}*/
    /* 작성자가 들어가는 경우 */
    .reply .reply_write .tit_area .limit {
        position: absolute;
        left: 0;
        top: 450%;
        right: auto;
        bottom: auto;
    }

    /* write */
    .bbs .write th {
        width: 100%;
        display: block;
        border-bottom: none;
        padding: 10px 10px 0;
        box-sizing: border-box;
    }

    .bbs .write td {
        width: 100%;
        display: block;
        box-sizing: border-box;
    }

    .bbs .write td input {
        width: 100%;
    }

    .bbs .write td input.spam_refresh {
        width: 40px;
    }

    .bbs .write tr:last-child th {
        border-bottom: none;
    }

    .bbs .write .fileBox .inputBox {
        width: calc(100% - 85px) !important;
    }

    .bbs .write .fileBox .fileBtn {
        width: 80px;
    }

    .fileBox .fileBtn label {
        width: 80px;
    }

    .bbs .write p.help {
        word-break: keep-all;
        line-height: 18px;
        margin-top: 5px;
        display: block;
    }

    .bbs .write colgroup {
        display: none;
    }

    /*p ostImage */
    .bbs .postSection .postList {
        width: 100%;
        margin-left: 0;
    }

    .bbs .postSection .postList > li {
        width: 100%;
        margin-left: 0;
    }

    /* faq */
    .bbs .faqTab {
        display: none;
    }

    .bbs .faqTab_m {
        display: block;
    }

    /* member */

}

@media screen and (max-width: 500px) {

    .shop .listType_image .pdt5 > li {
        width: 100%;
        border-right: none !important;
    }

    /* 상품노출개수 5개 -> 1개*/
    .shop .listType_image .pdt4 > li {
        width: 100%;
        border-right: none !important;
    }

    /* 상품노출개수 4개 -> 1개*/
    .shop .listType_image .pdt3 > li {
        width: 100%;
        border-right: none !important;
    }

    /* 상품노출개수 3개 -> 1개*/
    .shop .listType_image .pdt2 > li {
        width: 100%;
        border-right: none !important;
    }

    /* 상품노출개수 2개 -> 1개*/
    /*.qna_pass .topic{font-size:1.4rem;;}*/
    .qna_pass .ipt {
        width: 100%;
    }

    .qna_pass {
        width: 96%;
        margin-left: 0;
        left: 2%;
    }

    .qna_pass .ipt span {
        margin-right: 10px;
    }

    /* gallery */
    .bbs .gallery > ul {
        width: 100%;
        margin-left: 0%;
    }

    .bbs .gallery > ul > li {
        width: 100%;
        margin-left: 0%;
    }

    /* search */
    .bbsSearch {
        width: 100%;
    }

    .bbsSearch .srchSelect {
        width: 100%;
        margin-right: 0;
    }

    .bbsSearch .searchWord {
        width: 100%;
        margin-top: 5px;
    }

    /* write */
    .bbs .write .ipt_box {
        width: 100%;
        position: relative;
        overflow: hidden;
    }

    .bbs .write .ipt_box input[type="text"] {
        width: calc(100% - 85px) !important;
        float: left;
    }

    .bbs .write .ipt_box a {
        display: block;
        width: 80px;
        float: left;
    }

    .bbs .write input.max300 {
        max-width: 100%;
    }

    .bbs .write .email .select.max200 {
        max-width: 100%;
    }

    .bbs .write .spam input.max200 {
        width: calc(100% - 127px) !important;
        max-width: none;
    }

    /* 리플 달기 */
    .reply .reply_write .write_area .input input {
        width: 100%;
    }

    /* postImage */
    .bbs .postSection .postList li a .imgs {
        width: 40%;
    }

    .bbs .postSection .postList > li a .info {
        left: 42%;
    }

    .bbs .postSection .postList li a .txt {
        padding-left: 42%;
        padding-right: 10px;
    }

    .bbs .postSection .postList li a .txt .category {
        height: 25px;
        line-height: 1;
    }

    .bbs .postSection .postList li a .txt .title {
        height: 20px;
        line-height: 1;
    }

    .bbs .postSection .postList li a .txt .contxt {
        height: 35px;
        line-height: 17.5px;
    }

    .bbs .postSection .postList li a .wdate {
        left: 47%;
    }

    .bbs .postSection .postList > li a .info li > b {
    }

}

@charset "utf-8";
/* CSS Document */
.pc{display:block;} /*pc 노출 = 테블릿, 모바일 미노출*/
.pcta{display:block;} /*pc, 테블릿 노출 = 모바일 미노출*/
.mo{display:none;} /*모바일 노출 = pc,테블릿 미노출*/
.ta{display:none;} /*테블릿, 모바일 노출 = pc 미노출*/

@media screen and (max-width: 1580px){
    /* community-view */
    #sub.community-view .view-post .view-hot{display: none;}
}
@media screen and (max-width: 1420px){
    #sub.introduce .section1 .size{width: 100%; margin-left:0; padding: 0;}

}
@media screen and (max-width: 1200px){
    .size {width:100%; padding:0 20px; box-sizing: border-box;}

    /* header */
    #header .header-search .search-realtime{display: none;}
    #header .header-top .login-btns{display: none;}
    #header .header-bottom{display: none;}
    #header .btn-all-menu-open{display: block;}

    /* main */
    #main, #sub{padding-top: 90px;}
    #main .main-visual{margin-top: 0;}
    #main .main-visual .size{padding: 0;}
    #main .main-visual .top{display: block;}
    #main .main-visual .top .visual-swiper{width: 100%; border-radius: 0;}
    #main .main-visual .top .topic-list{width: 100%; padding:0 20px; margin-top: 30px;}
    #main .main-visual .top .topic-list .tab-tit{padding: 0 10px;}
    #main .main-visual .btm{padding: 0 20px;}
    #main .section .box-list > ul > li{width: 25%;}

    /* sub */
    #sub .big-box-list > ul > li{width: 33.3333%;}

    #sub.board .sub-board .btn-write{position: static; margin-top: 25px;}
    #sub.board-view .view-info .mid{gap: 20px;}
    #sub.board-view .view-util .big-box-list > ul > li{width: 25%;}
    #sub.board .sub-board #sub-board{top:-90px;}

    /* community-view */
    #sub.community-view .view-comment .comment-list .list-con > ul > li .reply-content{flex-direction: column; align-items: flex-start; gap: 0;}
    #sub.community-view .view-comment .comment-list .btn-box{width:100%; margin-top: 5px; flex-direction: row-reverse; justify-content: space-between;}
    #sub.community-view .view-comment .comment-list .btn-box .btn-util{justify-content: left; gap: 10px;}
    #sub.community-view .view-comment .comment-list .btn-box .btn-util button{padding: 0 !important;}
    #sub.community-view .view-comment .comment-list .btn-box .btn-util button img{display: none;}

    /* introduce */
    #sub.introduce .section1 .size{padding-left: 20px;}
    #sub.introduce .section2 .ico-list > ul > li .inner{padding: 40px 30px;}
    #sub.introduce .section2 .ico-list .txt p{font-size: var(--font-size16);}

    /* free */
    #sub.free .sec-con .box-wrap .inner{padding: 60px 40px;}

    /* agencies */
    #sub.agencies .ico-list > ul{gap: 40px;}
    #sub.agencies .ico-list .img{width: 120px; height: 120px;}
    #sub.agencies .box-list .content p .dpb{display: inline;}

    /* banner */
    #sub.banner .box-wrap > ul{margin: -10px;}
    #sub.banner .box-wrap > ul > li{padding: 10px;}
    #sub.banner .box-wrap > ul > li .inner{padding: 30px 20px 40px;}
    #sub.banner .img-wrap .img-box #main-scroll-scope,
    #sub.banner .img-wrap .img-box #main-scroll-scope-mo,
    #sub.banner .img-wrap .img-box #sub-scroll-scope,
    #sub.banner .img-wrap .img-box #sub-scroll-scope-mo{top:-110px;}
}
@media screen and (max-width: 1024px){
    .pc{display: none;}
    .ta{display:block;}
    html{font-size: 60%;}

    /* banner */
    #sub.banner .box-wrap{width: 100%; max-width: 600px; margin: 0 auto;}
    #sub.banner .box-wrap > ul > li{width: 50%;}

    #sub.banner .img-wrap{gap: 20px;}
}
@media screen and (max-width: 840px){
    .mo{display:block;}
    .pcta{display: none;}

    /* header */
    #header .header-top{padding: 10px 0;}
    #header .header-top > .row-end{gap: 24px; font-size: 0;}
    #header .header-top h1 img{width: 69px;}
    #header .header-search,
    #header .header-search form,
    #header .header-search .search-input{width: 100%;}
    #header .header-search .search-input > input[type="text"]{width:100%; height: 38px; padding: 10px; padding-right: 45px;}
    #header .header-search .search-input > button{right:10px; width: 25px; height: 25px;}
    #header .header-search .search-input > button img{width: 13px;}

    /* footer */
    .btn-top{right:20px; margin-bottom: 20px;}
    .btn-top.fixed{bottom: 20px;}
    .btn-top img{width: 40px;}

    #footer .footer-top .size{padding: 0 10px;}
    #footer .footer-top p{justify-content: center; gap: 5px;}
    #footer .footer-top a{font-size: 10px;}
    #footer .footer-top span{height: 8px;}

    #footer .footer-bottom .footer-bottom-inner{display:block; padding: 20px 0;}
    #footer .footer-bottom .footer-bottom-inner .left{display: block;}
    #footer .footer-bottom .footer-bottom-inner .left .footer-logo{height: 30px; line-height: 30px;}
    #footer .footer-bottom .footer-bottom-inner .left .footer-logo img{height: 19px;}
    #footer .footer-bottom .footer-info{margin-top: 10px;}
    #footer .footer-bottom .footer-info .info-list p span{font-size: var(--font-size12); padding-left: 6px; margin-left: 5px;}
    #footer .footer-bottom .footer-info .info-list p span.addr{display:block; padding-left: 0; margin-left: 0;}
    #footer .footer-bottom .footer-info .info-list p span.addr:before{display: none;}
    #footer .footer-bottom .footer-sns > a{position:absolute; right:0; top:20px;}
    #footer .footer-bottom .footer-sns > a img{width: 30px;}

    /* common */
    #main, #sub{padding-top: 60px;}
    .sec-tit h2, .sec-tit h3{font-size: var(--font-size24);}
    .sec-tit.big h2, .sec-tit.big h3{font-size: 32px;}
    .sec-tit.small h2, .sec-tit.small h3{font-size: var(--font-size20);}

    .board-select > a{height: 45px; line-height: 43px; border-radius: 7px;}
    .board-select > a.on{border-radius: 7px 7px 0 0;}
    .board-select > ul{top: 44px; border-radius: 0 0 7px 7px;}
    .board-select > ul li a{height: 45px; line-height: 45px;}

    .form-select > a{padding: 0 15px; font-size: var(--font-size12);}
    .form-select > a:before{right: 15px;}
    .form-select > ul{padding: 0 15px;}
    .form-select > ul.scroll{max-height: 322px;}
    .form-select > ul li a{font-size: var(--font-size12);}

    input[type="text"], input[type="password"], input[type="tel"], input[type="email"], input[type="number"], input[type="url"], select, input[type="date"], input[type="number"]{height:45px; padding:0 15px; font-size:var(--font-size12); font-weight: 600; border-radius: 7px;}
    input[type="text"]::placeholder, input[type="password"]::placeholder, input[type="submit"]::placeholder, input[type="search"]::placeholder, input[type="number"]::placeholder, input[type="tel"]::placeholder, input[type="email"]::placeholder, textarea::placeholder{font-size: var(--font-size12); font-weight: 600; line-height: 130%;}
    .input-btn input[type="text"], .input-btn input[type="tel"], .input-btn input[type="email"]{padding-right: 96px;}
    .input-btn button, .input-btn a{right:6.5px; top:6.5px;}
    .input-date:after{right: 15px;}
    .mid-dash{width: 20px;}

    textarea{padding: 15px;}

    .pagination{gap: 30px;    justify-content: space-around; }
    .pagination > ul.pcta{display: none;}
    .pagination > ul.mo{display: flex; gap:15px;}
    .pagination .arr span{display: none;}

    .tab-round li a{height: 50px; line-height: 48px;}

    /* main */
    #main .main-visual .top .topic-list .tab-tit ul li a{font-size: var(--font-size16);}
    #main .main-visual .top .topic-list .tab-box{margin-top: 7px;}
    #main .main-visual .top .topic-list .tab-box .tab-con{padding: 5px 10px; border-radius: 10px;}
    #main .main-visual .top .topic-list .tab-box .tab-con li{padding: 3px 0;}
    #main .main-visual .top .topic-list .tab-box .tab-con li a .title p{font-size: var(--font-size14);}

    #main .main-visual .btm{margin-top: 20px;}
    #main .main-visual .btm .link-list ul li a .img img{width: 27px;}
    #main .main-visual .btm .link-list ul li a .txt b{font-size: var(--font-size12);}

    #main .section{padding: 30px 0;}
    #main .section .sec-con{padding-top: 10px;}
    #main .section .btn-more{margin-top: 10px;}
    #main .section .btn-more > a{width: 200px; height: 57px;}

    #main .section .box-list > ul{margin: 0 -7.5px; row-gap: 15px;}
    #main .section .box-list > ul > li{width: 33.3333%; padding: 0 7.5px;}
    #main .section .box-list > ul > li a{padding: 10px;}
    #main .section .box-list > ul > li .dday{right:10px; top:10px;}

    #main .section5 .sec-con{padding-top: 30px;}
    #main .section5 .tab-tit ul{gap: 24px;}
    #main .section5 .tab-box{margin-top: 15px;}
    #main .section5 .tab-con ul{margin: 0;}
    #main .section5 .tab-con ul li{width: 100%; padding: 0;}
    #main .section5 .tab-con ul li a{padding: 25px;}
    #main .section5 .tab-con ul li a .title{font-size: var(--font-size16);}
    #main .section5 .tab-con ul li a .content{height:auto; font-size: var(--font-size14); -webkit-line-clamp:2;}
    #main .section5 .tab-con ul li a .info{padding-top: 0;}
    #main .section5 .btn-more{margin-top: 15px;}

    /* sub */
    #sub .sub-visual{margin-top: 0;}
    #sub .sub-visual .size{padding: 0;}
    #sub .sub-visual .visual-swiper{border-radius: 0;}
    #sub .sub-visual .visual-swiper .arr{display: none;}

    #sub .sub-category{padding: 30px 0;}
    #sub.community .sub-category{padding-bottom: 0;}
    #sub.culture .sub-category{padding: 30px 0;}
    #sub.culture .sub-category.row-1{padding-top: 30px;}
    #sub .sub-category .cate-tab-con{margin-top: 10px;}
    #sub .sub-category .cate-tab-tit ul li{margin: 0 10px !important;}

    #sub .big-box-list > ul{row-gap: 10px; margin: 0 -7.5px;}
    #sub .big-box-list > ul > li{padding: 0 7.5px;}
    #sub .big-box-list > ul > li .inner{padding: 10px;}
    #sub .big-box-list > ul > li a .hover .hover-bg{padding: 15px;}
    #sub .big-box-list > ul > li a .hover .txt-box .info-list{margin-top: 10px;}
    #sub .big-box-list > ul > li a .hover .txt-box .host-list{margin-top: 5px;}

    /* form */
    #sub .form .form-row{margin-top: 20px;}

    #sub .form .radio-box-list{padding: 15px;}
    #sub .form .radio-box-list.gender ul{gap: 40px;}
    .radio-box label{padding-left: 30px; line-height: 25px;}
    .radio-box label:before{width: 25px; height: 25px; margin-top: -12.5px;}

    #sub .form .check-box-list{padding: 15px;}
    #sub .form .check-box-list-box ul{gap: 40px;}
    #sub .form .check-box-list.field ul{gap: 20px;}
    #sub .form .check-box-list ul li{width: auto !important;}
    .check-box{min-height: 25px;}
    .check-box label{padding-left: 30px;}
    .check-box label:before{width: 25px; height: 25px; margin-top: -12.5px;}
    .check-box.big{min-height: 35px;}
    .check-box.big label{padding-left: 45px; font-size: var(--font-size18);}
    .check-box.big label:before{width: 35px; height: 35px; margin-top: -17.5px;}

    #sub .form .form-tag-list ul{flex-wrap: wrap;}
    #sub .form .form-tag-list ul li{width: 33.3333%;}
    #sub .form .form-tag-list ul li:before{left: 15px;}
    #sub .form .form-tag-list ul li input[type="text"]{padding-left: 30px;}

    #sub .form .input-amount input{padding-right: 50px;}
    #sub .form .input-amount:before{right: 15px;}

    .form-file-list{padding-right: 55px;}
    .form-file-list .btn-file-add{width: 45px; height: 45px; border-radius: 7px;}
    .form-file > label + .file-txt{padding-left: 96px;}
    .form-file > label{left: 6.5px;}
    .form-file .btn-file-delete{right: 10px;}


    /* popup */
    .popup-agree .popup-inner{margin: 70px 20px 20px; min-height: calc(100% - 90px);}
    .popup-agree .popup-box{padding: 40px;}
    .popup-agree .popup-box .scroll-box{padding-top: 20px;}
    .popup-agree .scroll-box .scroll{max-height:400px; padding-bottom: 40px;}
    .btn-popup-close button{width: 50px; height: 50px;}

    /* board-idx */

    #sub.board .sub-board #sub-board{top:-60px;}

    #sub.board-idx .sub-board .top{padding-top: 30px;}

    #sub.board .sub-board .top > .row-end{flex-direction: column-reverse;}
    #sub.board .sub-board .top .board-search + .board-select{max-width: 100%;}

    #sub.board .sub-board{padding-bottom: 50px;}
    #sub.board .sub-board .sec-tit{padding: 30px 0;}
    #sub.board .search-txt input[type="text"]{height: 45px;}

    #sub.board .sub-board .board-search{margin-top: 5px;}
    #sub.board .sub-board .board-search form .search-detail button{width: 100px; height: 45px; border-radius: 7px;}
    #sub.board .sub-board .board-search form .search-detail button span{font-size: var(--font-size12);}
    #sub.board .sub-board .board-search form .search-txt{max-width: 100%;}

    #sub.board .sub-board .search-detail-hide{margin-bottom: 20px;}
    #sub.board .sub-board .search-detail-hide .table table{display:block; background-color: #f1f1f1; border-radius: 8px; border-bottom: none;}
    #sub.board .sub-board .search-detail-hide .table table tbody{display: block;}
    #sub.board .sub-board .search-detail-hide .table table tr{display: block; padding: 15px 10px;}
    #sub.board .sub-board .search-detail-hide .table table tr:first-of-type{border-top: none;}
    #sub.board .sub-board .search-detail-hide .table table tr:has(.option-list){overflow: hidden;}
    #sub.board .sub-board .search-detail-hide .table table th{display: block; padding: 0; background-color: unset; font-size: var(--font-size12); line-height: 100%;}
    #sub.board .sub-board .search-detail-hide .table table td{display: block; padding: 0; height: auto; padding-top: 5px;}
    #sub.board .sub-board .search-detail-hide .table table td:has(.option-list){overflow: visible;}

    #sub.board .sub-board .search-detail-hide .option-swiper button{font-size: var(--font-size14); line-height: 120%;}
    #sub.board .sub-board .search-detail-hide .board-select{max-width: 120px;}
    #sub.board .sub-board .search-detail-hide .board-select > a{height: 40px; line-height: 38px;}
    #sub.board .sub-board .search-detail-hide .board-select > ul{top: 39px;}
    #sub.board .sub-board .search-detail-hide .board-select > ul li a{height: 40px; line-height: 40px;}
    #sub.board .sub-board .search-detail-hide .input-date input[type="date"]{height: 40px; font-size: var(--font-size12);}
    #sub.board .sub-board .search-detail-hide .search-txt{max-width: 100%;}
    #sub.board .sub-board .search-detail-hide .search-txt input[type="text"]{height: 40px; padding-right:40px;}
    #sub.board .sub-board .search-detail-hide .search-txt button[type="submit"]{right: 5px;}
    #sub.board .sub-board .search-detail-hide .form-search-row{gap: 5px;}
    #sub.board .sub-board .search-detail-hide .form-search-btn button{padding: 0 10px;}
    #sub.board .sub-board .search-detail-hide .form-search-reset{display: none;}
    #sub.board .sub-board .search-detail-hide .search-keyword ul{padding: 20px 10px; gap: 10px;}
    #sub.board .sub-board .search-detail-hide .search-keyword ul li p{font-size: var(--font-size14); line-height: 120%;}

    #sub.board .sub-board-table .size{padding: 0;}
    #sub.board .sub-board-table thead{display: none;}
    #sub.board .sub-board-table table,
    #sub.board .sub-board-table tbody,
    #sub.board .sub-board-table tr,
    #sub.board .sub-board-table tbody td{display: block;}
    #sub.board .sub-board-table tr{position:relative; padding: 10px 20px; text-align: left;}
    #sub.board .sub-board-table tbody{border-top: 1px solid var(--line-light);}
    #sub.board .sub-board-table tbody td{height: auto; padding: 0; margin-top: 3px;}

    #sub.board .sub-board-table tbody td.table-left,
    #sub.board .sub-board-table tbody td.table-right{padding: 0;}
    #sub.board .sub-board-table tbody td.table-left{margin: 5px 0;}
    #sub.board .sub-board-table tbody tr.blank{display: none;}
    #sub.board .sub-board-table tbody td.views{display: none;}
    #sub.board .sub-board-table tbody td.title{margin-bottom: 10px;}
    #sub.board .sub-board-table tbody td.progress{position: absolute; right: 20px; bottom: 12px;}

    #sub.board .sub-board-table tbody td p{text-align: left; font-size: var(--font-size12);}
    #sub.board .sub-board-table tbody td.table-left p{font-weight: 800;}
    #sub.board .sub-board-table tbody td.title p{font-size: var(--font-size14);}
    #sub.board .sub-board-table tbody td.progress p{display: none;}
    #sub.board .sub-board-table tbody td.progress span{display: inline-block; padding: 5px 7px; border: 1px solid #666; border-radius: 5px; background-color: #f1f1f1; font-size: var(--font-size12); font-family: "Pretendard", sans-serif; line-height: 1;}
    #sub.board .sub-board .btm .size{padding-top: 20px;}

    #sub.board .board-editor .btn-save a,
    #sub.board .board-editor .btn-save button,
    #sub.inquiry .btn-apply a,
    #sub.inquiry .btn-apply button,
    #sub.mypage-quit .btn-quit ul li a,
    #sub.mypage-quit .btn-quit ul li button{width: 160px; height: 57px; line-height: 55px; font-size: var(--font-size14);}

    /* board-view */
    #sub.board-view .view-info{padding: 30px 0;}
    #sub.board-view .view-info .top{padding: 0; border-bottom: none;}
    #sub.board-view .view-info .top .view-tit{display: block;}
    #sub.board-view .view-info .top .view-tit h2{display: inline; font-size: var(--font-size24);}
    #sub.board-view .view-info .top .view-tit .type{font-size: var(--font-size18);}
    #sub.board-view .view-info .top .view-data{display: none;}
    #sub.board-view .view-info .mid{padding: 0; margin-top: 10px; display: block;}
    #sub.board-view .view-info .mid .btn-share a{width: 120px; height: 40px; line-height: 38px;}
    #sub.board-view .view-info .mid .btn-share a span{font-size: var(--font-size12); color: var(--point-color);}
    #sub.board-view .view-info .mid .btn-share a svg path{stroke: var(--point-color);}
    #sub.board-view .view-info .mid .table-box{width: 100%; margin-top: 30px;}
    #sub.board-view .view-info .mid .table-box table colgroup col:first-of-type{width: 110px;}

    #sub.board .board-editor,
    #sub.board .board-video,
    #sub.board .board-map{padding: 30px 0;}
    #sub.board .board-editor .editor-box{margin-top: 17px;}
    #sub.board .board-editor [class ^='btn-']{margin-top: 15px;}
    /* #sub.board .board-editor .editor-box .temporary{min-height: 400px;} */

    #sub.board-view .view-util{padding: 30px 0;}
    #sub.board-view .view-util .big-box-list{margin-top: 20px;}
    #sub.board-view .view-util .big-box-list > ul > li{width: 50%;}
    #sub.board-view .view-util .big-box-list + .board-navi{margin-top: 30px;}
    #sub.board-view .view-util .board-navi a{padding: 0; font-size: 0;}
    #sub.board-view .view-util .board-navi a .arr{width: 92px; padding: 22px 15px;}
    #sub.board-view .view-util .board-navi a .arr span{font-size: var(--font-size14); line-height: 1;}
    #sub.board-view .view-util .board-navi a .title{padding: 22px 15px;}
    #sub.board-view .view-util .board-navi a .title p{font-size: var(--font-size14);}
    #sub.board-view .view-util .board-navi a .title .type{display: none;}

    #sub.board-view .view-util .btn-list{margin-top: 15px;}
    #sub.board-view .view-util .btn-list a{padding: 20px 30px; width: 160px; height: 57px; line-height: 55px;}

    /* community-view */
    #sub.community-view .view-post{padding:30px 0 40px;}
    #sub.community-view .view-post .top .post-tit{flex-direction: column; align-items: flex-start;}
    #sub.community-view .view-post .top .post-tit .cate{font-size: var(--font-size14); border: 1px solid var(--point-color);}
    #sub.community-view .view-post .top .post-tit .cate + span{font-size: var(--font-size18);}
    #sub.community-view .view-post .top .post-tit .row-left{display: block; line-height: 1.2;}
    #sub.community-view .view-post .top .post-tit .row-left h2{display: inline; font-size: var(--font-size24);}
    #sub.community-view .view-post .top .post-tit .row-left i{display: inline;}
    #sub.community-view .regist-date{margin-top: 15px;}
    #sub.community-view .view-post .mid{padding: 30px 0 50px;}
    #sub.community-view .view-post .btm ul{gap: 20px;}
    #sub.community-view .view-post .btm ul li{gap: 10px; flex-direction: column-reverse !important;}
    #sub.community-view .view-post .btm ul li > button{width: 100px; height: 100px;}
    #sub.community-view .view-post .btm ul li > button svg{width: 36px; height: 32px;}
    #sub.community-view .view-comment{padding: 30px 0;}
    #sub.community-view .view-comment .comment-list .list-tit em{font-size: var(--font-size18);}
    #sub.community-view .view-comment .comment-list .list-con > ul > li{position:relative; padding: 15px 10px;}
    #sub.community-view .view-comment .comment-list .list-con > ul > li.row-reply{padding-left: 40px;}
    #sub.community-view .view-comment .comment-list .list-con > ul > li.reply-2depth{padding-left: 50px;}
    #sub.community-view .view-comment .comment-list .list-con > ul > li.row-reply .txt-box,
    #sub.community-view .view-comment .comment-list .list-con > ul > li.row-reply .comment-edit{position: static;}
    #sub.community-view .view-comment .comment-list .list-con > ul > li.row-reply .txt-box:before,
    #sub.community-view .view-comment .comment-list .list-con > ul > li.row-reply .comment-edit:before{left: 10px; top:50%; margin-top:-10px;}
    #sub.community-view .view-comment .comment-list .list-con > ul > li.reply-2depth .txt-box:before{left: 20px;}

    #sub.community-view .view-comment .comment-list .txt-box .txt-tit{font-size: var(--font-size12);}
    #sub.community-view .view-comment .comment-list .txt-box .txt-con p{font-size: var(--font-size14); font-weight: 400; line-height: 140%;}
    #sub.community-view .view-comment .comment-list .btn-box .btn-util button{font-size: var(--font-size14);}

    #sub.community-view .view-comment .comment-list .btn-box .btn-updown button{padding: 0; width: 60px; height: 30px; border-radius: 8px; justify-content: center; gap: 5px;}
    #sub.community-view .view-comment .comment-list .btn-box .btn-updown button .svg svg{width: 19px; height: 16px;}
    #sub.community-view .view-comment .comment-list .btn-box .btn-updown button span{font-size: var(--font-size12);}

    #sub.community-view .view-comment .comment-list .list-con > ul > li.reply-write .txt-box .txt-tit,
    #sub.community-view .view-comment .comment-list .list-con > ul > li .form-label label{font-size: var(--font-size12);}
    #sub.community-view .view-comment .comment-list .list-con > ul > li.reply-write textarea{padding: 15px;}
    #sub.community-view .view-comment .comment-input .textarea textarea,
    #sub.community-view .view-comment .comment-list .list-con > ul > li .comment-edit textarea{padding: 10px 15px;}
    #sub.community-view .view-comment .textarea{text-align: center;}
    #sub.community-view .view-comment .textarea button{position:static; margin-top:5px; width: 80px !important; height: 30px !important;}

    #sub.community-view .board-editor .btn-editor{margin-top: 27px;}
    #sub.community-view .view-comment .view-util{padding-top: 27px;}

    /* board-write */
    #sub.board-write .form{padding: 30px 0;}
    #sub.board-write .form form{padding-top: 30px;}

    /* login */
    #sub.login .sub-wrap{padding: 30px 0;}
    #sub.login .member-box{padding: 60px 40px;}
    #sub.login .form .input input{height: 50px;}
    #sub.login .form .btn-login button{height: 60px;}
    #sub.login .btn-join{padding: 30px 0;}
    #sub .btn-join > button,
    #sub .btn-join > a{height: 60px; line-height: 60px;}

    /* login-idx */
    #sub.login-idx .form{padding: 30px 0;}
    #sub.login-idx .form .btn-login button{height: 60px;}
    #sub.login-idx .btn-social-login{padding-top: 30px;}
    #sub.login-idx .btn-social-login .btn-list ul img{width: 50px;}

    /* idpwsearch */
    #sub.idpwsearch .find-tab{margin: 20px 0 0;}

    /* join */
    #sub.join .sub-wrap{padding: 30px 0 60px;}
    #sub.join .agree-box{padding: 25px 15px;}

    /* search */
    #sub.search .sub-wrap{padding: 30px 0;}
    #sub.search .search-box:first-of-type{padding-top: 30px;}
    #sub.search .search-box{padding: 20px 0;}
    #sub.search .search-box .box-tit h3{font-size: var(--font-size18);}
    #sub.search .search-box .box-con .search-list ul li{padding: 5px 0; margin-top: 10px;}
    #sub.search .search-box .box-con .search-list .img > a{padding:10px; width: 120px; height: 120px;}
    #sub.search .search-box .box-con .search-list .txt-box > a .content{margin-top: 5px;}
    #sub.search .search-box .box-con .search-list .txt-box > a .title em{font-size: var(--font-size16);}
    #sub.search .search-box .box-con .search-list .txt-box > a .content p{-webkit-line-clamp:3; font-size: var(--font-size14);}
    #sub.search .search-box .box-con .search-list .txt-box .navi{margin-top: 5px;}
    #sub.search .search-box .box-con .search-list .txt-box .navi > a span,
    #sub.search .search-box .box-con .search-list .txt-box .navi .date{font-size: var(--font-size12);}
    #sub.search .search-box .box-con .blank{font-size: var(--font-size14);}
    #sub.search .result-nonexist .col-cen{height: 300px;}

    /* faq */
    #sub.faq .sub-wrap{padding: 30px 0;}
    #sub.faq .sec-con{margin-top: 20px;}
    #sub.faq .faq-list ul li{padding: 10px 15px;}
    #sub.faq .faq-list ul li.open{padding: 15px;}
    #sub.faq .faq-list ul li .list-tit em{font-size: var(--font-size16);}
    #sub.faq .faq-list ul li .list-tit button img{width: 40px;}
    #sub.faq .faq-list ul li .list-con .inner{padding-top: 10px;}
    #sub.faq .faq-list ul li .list-con .answer{padding: 15px;}
    #sub.faq .faq-list ul li .list-con .answer p{font-size: var(--font-size14);}

    /* inquiry */
    #sub.inquiry .sec-con{padding-top: 30px;}
    #sub.inquiry .radio-box-list ul{height: auto; flex-wrap: wrap;}
    #sub.inquiry .radio-box.on{flex-direction: column; align-items: flex-start;}

    /* mypage */
    #sub.mypage .sub-wrap{padding: 30px 0;}
    #sub.mypage .sec-con{padding-top: 30px;}

    #sub.mypage-board .sub-category .cate-tab-tit ul li a h3{font-size: var(--font-size18);}
    #sub.mypage-board .check-box{justify-content: left;}
    #sub.mypage-board .sub-board .btm .btn-gr{position: static; margin-top: 25px;}
    #sub.mypage-board .sub-board .btm .btn-gr > button{margin: 0 auto;}
    #sub.mypage-board .sub-board-table tbody tr.row-delete:before{content:''; display: block; position:absolute; left:0; top:0; width: 100%; height: 100%; background-color: rgba(108,120,128,0.6); z-index: 5;}
    #sub.mypage-board .sub-board-table tbody tr.row-delete:after{background-color: unset; top:50%; transform: translateY(-50%); line-height: 1.3;}

    #sub.mypage-quit .quit-tit h3{font-size: var(--font-size20);}
    #sub.mypage-quit .btn-quit{margin-top: 25px;}

    /* support */
    #sub.support .sub-wrap{padding: 30px 0;}
    #sub.support .sec-con{padding-top: 30px;}
    #sub.refuse .guide p,
    #sub.refuse .law-wrap .content ul li,
    #sub.refuse .caution p{font-size: var(--font-size14);}

    #sub.refuse .law-wrap{margin-top: 20px;}
    #sub.refuse .caution{margin-top: 35px;}

    /* introduce */
    #sub.introduce .sub-wrap{padding-bottom: 0;}
    #sub.introduce .section1{padding-bottom: 60px;}
    #sub.introduce .section1 .img-wrap{border-radius: 25px 0 0 25px;}
    #sub.introduce .section1 .img-wrap .bg{height: 200px;}
    #sub.introduce .section1 .img-wrap .img{left:40px;}
    #sub.introduce .section1 .img-wrap .img img{width: 150px;}
    #sub.introduce .section1 .txt{margin-top: 30px;}
    #sub.introduce .section1 .txt p{font-size: var(--font-size14);}

    #sub.introduce .section2{padding: 60px 0;}
    #sub.introduce .section2 .ico-list > ul{margin:-5px;}
    #sub.introduce .section2 .ico-list > ul > li{width: 100%; padding: 5px;}
    #sub.introduce .section2 .ico-list > ul > li .inner{height: auto; padding: 20px;}
    #sub.introduce .section2 .ico-list .ico{width: 60px; height: 60px; line-height: 60px;}
    #sub.introduce .section2 .ico-list .ico img{transform: scale(0.8);}
    #sub.introduce .section2 .ico-list .txt p{font-size: var(--font-size14);}

    /* free */
    #sub.support .sec-con{gap: 20px; flex-direction: column;}
    #sub.free .sec-con .box-wrap .inner{padding: 40px 20px;}
    #sub.free .sec-con .box-wrap .title-wrap .txt i{font-size: var(--font-size12);}
    #sub.free .sec-con .box-wrap .title-wrap .txt em{font-size: var(--font-size20);}
    #sub.free .sec-con .box-wrap .btn-wrap a{font-size: var(--font-size14);}

    /* agencies */
    #sub.agencies .sub-wrap{padding-bottom: 60px;}
    #sub.agencies .sec-tit p{margin-top: 10px; font-size: var(--font-size14);}
    #sub.agencies .sec-con > div{margin-top: 40px;}
    #sub.agencies .ico-list > ul{gap: 20px; max-width: 406px; margin:0 auto; flex-wrap: wrap;}
    #sub.agencies .ico-list .txt-wrap em{font-size: var(--font-size18);}
    #sub.agencies .ico-list .txt-wrap p{font-size: var(--font-size12);}

    #sub.agencies .box-list > .inner{padding: 60px 20px;}
    #sub.agencies .box-list ul{display: block; padding: 0; margin: -40px 0;}
    #sub.agencies .box-list ul li{padding: 40px 0; height: auto;}
    #sub.agencies .box-list ul li:before{left:10%; width: 80%; height: 1px;}
    #sub.agencies .box-list .content p .dpb{display: block;}

    /* banner */
    #sub.banner .img-wrap .img-box #main-scroll-scope,
    #sub.banner .img-wrap .img-box #main-scroll-scope-mo,
    #sub.banner .img-wrap .img-box #sub-scroll-scope,
    #sub.banner .img-wrap .img-box #sub-scroll-scope-mo{top:-80px;}
}
@media screen and (max-width: 768px){
    html{font-size: 56%;}

    /* sub */
    #sub .big-box-list > ul > li{width: 50%;}

    #sub.mypage .tab-round ul{display: block;}
    #sub.mypage .tab-round li a{border-left: none; border-top: 1px solid #6c7880;}
}
@media screen and (max-width: 640px){
    html{font-size: 54%;}

    /* banner */
    #sub.banner .box-wrap > ul{margin: -5px;}
    #sub.banner .box-wrap > ul > li{padding: 5px;}
    #sub.banner .box-wrap > ul > li .inner{padding: 20px; border-radius: 10px;}
    #sub.banner .box-wrap .top .num i{width: 25px; height: 25px; line-height: 25px; font-size: var(--font-size12);}
    #sub.banner .box-wrap .top .title em{font-size: var(--font-size18);}
    #sub.banner .box-wrap .top .title p{font-size: var(--font-size12);}
    #sub.banner .box-wrap .mid .period > p strong{font-size: var(--font-size16);}

    #sub.banner .img-wrap{margin-top: 20px; flex-direction: column;}
    #sub.banner .img-wrap .img-box .title em{font-size: var(--font-size16);}
}
@media screen and (max-width: 580px){
    /* main */
    #main .section .box-list > ul > li a.hover{display: none !important;}

    /* sub */
    #sub .big-box-list > ul > li a .hover{display: none;}
}

@media screen and (max-width: 505px){
    /* main */
    #main .main-visual .btm .link-list.mo{margin: -5px -2.5px;}
    #main .main-visual .btm .link-list.mo ul li{position:relative; margin: 5px 2.5px;}
    #main .main-visual .btm .link-list.mo ul li:before{content:''; display: block; padding-bottom: 100%;}
    #main .main-visual .btm .link-list.mo ul li a{position:absolute; left:0; top:0; width:100%; height: 100%;}
    #main .main-visual .btm .link-list ul li a .img img{width: 20px;}
    #main .main-visual .btm .link-list.mo ul li a .img.ico1 img{right: -3px;}
    #main .main-visual .btm .link-list.mo ul li a .img.ico3 img{right: -1px;}
}
@media screen and (max-width: 480px){
    html{font-size: 45%;}

    /* main */
    #main .main-visual .top .topic-list .tab-box .tab-con li a .comment{display: none;}
    #main .section .box-list > ul > li{width: 50%;}
	#main .section.fromBottom{opacity: 1;
        filter: alpha(opacity=1);
        -ms-filter: alpha(opacity=1);
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
    }

    /* sub */
    #sub.search .search-box .box-con .search-list .img{display: none;}

    #sub.board .board-editor .btn-save a,
    #sub.board .board-editor .btn-save button,
    #sub.inquiry .btn-apply a,
    #sub.inquiry .btn-apply button,
    #sub.mypage-quit .btn-quit ul li a,
    #sub.mypage-quit .btn-quit ul li button{width: 140px; height: 50px; line-height: 48px;}

    /* login */
    #sub.login .member-box{padding: 40px 20px;}

    /* join */
    #sub.join .radio-row{display: block;}
    #sub.join .radio-row .form-row{width: 100%; margin-top: 20px;}

    /* tab-round */
    .tab-round.tab-bl ul{display: block;}
    .tab-round.tab-bl li a{border-left: none; border-top: 1px solid var(--point-color);}

    /* policy */
    #sub.policy .agree{font-size: 2rem;}
    .agree_txt h4{font-size: 2.3rem;}

    /* introduce */
    #sub.introduce .section2 .ico-list .txt p .dpb{display: inline;}

    /* agencies */
    #sub.agencies .ico-list .img{width: 80px; height: 80px;}
    #sub.agencies .ico-list .img img{transform: scale(0.7);}
    #sub.agencies .ico-list .txt-wrap{margin-top: 10px;}
    #sub.agencies .ico-list .txt-wrap em{font-size: var(--font-size16);}
    #sub.agencies .ico-list .txt-wrap p{margin-top: 2px;}

    #sub.agencies .box-list > .inner{padding: 40px 20px;}
    #sub.agencies .box-list ul{margin:-20px 0;}
    #sub.agencies .box-list ul li{padding: 20px 0;}
    #sub.agencies .box-list .content{margin-top: 10px;}
    #sub.agencies .box-list .content p{font-size: var(--font-size14);}

    #sub.agencies .btn-wrap{margin-top: 20px !important;}
    #sub.agencies .btn-wrap a{width: 140px; height: 50px; line-height: 48px; font-size: var(--font-size14);}

    /* banner */
    #sub.banner .box-wrap > ul > li{width: 100%;}
}
@media screen and (max-width: 400px){
    /* popup */
    .popup-share .popup-inner{margin: 70px 20px 20px; min-height: calc(100% - 90px);}

    /* free */
    #sub.free .sec-con .box-wrap .btn-wrap a{height: 50px; line-height: 48px;}

    /* agencies */
    #sub.agencies .box-list .content p .dpb{display: inline;}
}
@media screen and (max-width: 360px){
    #main .main-visual .btm .link-list.mo ul li{border-radius: 10px;}
    #main .section5 .tab-tit ul{gap: 15px;}
}
@media screen and (max-width: 320px){
    html{font-size: 42%;}
}
@charset "utf-8";
/* CSS Document */

/**
 * Swiper 5.2.0
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * http://swiperjs.com
 *
 * Copyright 2014-2019 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: October 26, 2019
 */

@font-face {
  font-family: 'swiper-icons';
  src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff");
  font-weight: 400;
  font-style: normal;
}
:root {
  --swiper-theme-color: #007aff;
}
.swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
}
.swiper-container-vertical > .swiper-wrapper {
  flex-direction: column;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  /* height: 100%; */
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}
.swiper-container-android .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}
.swiper-container-multirow > .swiper-wrapper {
  flex-wrap: wrap;
}
.swiper-container-multirow-column > .swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column;
}
.swiper-container-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
/* Auto Height */
.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
  height: auto;
}
.swiper-container-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}
/* 3D Effects */
.swiper-container-3d {
  perspective: 1200px;
}
.swiper-container-3d .swiper-wrapper,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-cube-shadow {
  transform-style: preserve-3d;
}
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}
.swiper-container-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
/* CSS Mode */
.swiper-container-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  /* For Firefox */
  -ms-overflow-style: none;
  /* For Internet Explorer and Edge */
}
.swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}
.swiper-container-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}
.swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}
.swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}
:root {
  --swiper-navigation-size: 44px;
  /*
  --swiper-navigation-color: var(--swiper-theme-color);
  */
}
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(-1 * var(--swiper-navigation-size) / 2);
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}
.swiper-button-prev:after,
.swiper-button-next:after {
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  text-transform: none !important;
  letter-spacing: 0;
  text-transform: none;
  font-variant: initial;
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  left: 10px;
  right: auto;
}
.swiper-button-prev:after,
.swiper-container-rtl .swiper-button-next:after {
  content: 'prev';
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  right: 10px;
  left: auto;
}
.swiper-button-next:after,
.swiper-container-rtl .swiper-button-prev:after {
  content: 'next';
}
.swiper-button-prev.swiper-button-white,
.swiper-button-next.swiper-button-white {
  --swiper-navigation-color: #ffffff;
}
.swiper-button-prev.swiper-button-black,
.swiper-button-next.swiper-button-black {
  --swiper-navigation-color: #000000;
}
.swiper-button-lock {
  display: none;
}
:root {
  /*
  --swiper-pagination-color: var(--swiper-theme-color);
  */
}
.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 10px;
  left: 0;
  width: 100%;
}
/* Bullets */
.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transform: scale(0.33);
  position: relative;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(0.33);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(0.33);
}
.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 100%;
  background: #fff;
  opacity: 0.5;
}
button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}
.swiper-pagination-bullet-active {
  opacity: 1;
   background: #fff;
  /* background: var(--swiper-pagination-color, var(--swiper-theme-color)); */
}
.swiper-container-vertical > .swiper-pagination-bullets {
  right: 10px;
  top: 50%;
  transform: translate3d(0px, -50%, 0);
}
.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 6px 0;
  display: block;
}
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
}
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  transition: 200ms transform, 200ms top;
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 4px;
}
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform, 200ms left;
}
.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform, 200ms right;
}
/* Progress */
.swiper-pagination-progressbar {
  background: rgba(0, 0, 0, 0.25);
  position: absolute;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transform-origin: left top;
}
.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: right top;
}
.swiper-container-horizontal > .swiper-pagination-progressbar,
.swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: 4px;
  left: 0;
  top: 0;
}
.swiper-container-vertical > .swiper-pagination-progressbar,
.swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 4px;
  height: 100%;
  left: 0;
  top: 0;
}
.swiper-pagination-white {
  --swiper-pagination-color: #ffffff;
}
.swiper-pagination-black {
  --swiper-pagination-color: #000000;
}
.swiper-pagination-lock {
  display: none;
}
/* Scrollbar */
.swiper-scrollbar {
  border-radius: 10px;
  position: relative;
  -ms-touch-action: none;
  background: rgba(0, 0, 0, 0.1);
}
.swiper-container-horizontal > .swiper-scrollbar {
  position: absolute;
  left: 1%;
  bottom: 3px;
  z-index: 50;
  height: 5px;
  width: 98%;
}
.swiper-container-vertical > .swiper-scrollbar {
  position: absolute;
  right: 3px;
  top: 1%;
  z-index: 50;
  width: 5px;
  height: 98%;
}
.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  left: 0;
  top: 0;
}
.swiper-scrollbar-cursor-drag {
  cursor: move;
}
.swiper-scrollbar-lock {
  display: none;
}
.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.swiper-zoom-container > img,
.swiper-zoom-container > svg,
.swiper-zoom-container > canvas {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.swiper-slide-zoomed {
  cursor: move;
}
/* Preloader */
:root {
  /*
  --swiper-preloader-color: var(--swiper-theme-color);
  */
}
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  animation: swiper-preloader-spin 1s infinite linear;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}
.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}
@keyframes swiper-preloader-spin {
  100% {
    transform: rotate(360deg);
  }
}
/* a11y */
.swiper-container .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
  transition-timing-function: ease-out;
}
.swiper-container-fade .swiper-slide {
  pointer-events: none;
  transition-property: opacity;
}
.swiper-container-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-container-cube {
  overflow: visible;
}
.swiper-container-cube .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  z-index: 1;
  visibility: hidden;
  transform-origin: 0 0;
  width: 100%;
  height: 100%;
}
.swiper-container-cube .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-container-cube.swiper-container-rtl .swiper-slide {
  transform-origin: 100% 0;
}
.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-next,
.swiper-container-cube .swiper-slide-prev,
.swiper-container-cube .swiper-slide-next + .swiper-slide {
  pointer-events: auto;
  visibility: visible;
}
.swiper-container-cube .swiper-slide-shadow-top,
.swiper-container-cube .swiper-slide-shadow-bottom,
.swiper-container-cube .swiper-slide-shadow-left,
.swiper-container-cube .swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.swiper-container-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.6;
  -webkit-filter: blur(50px);
  filter: blur(50px);
  z-index: 0;
}
.swiper-container-flip {
  overflow: visible;
}
.swiper-container-flip .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  z-index: 1;
}
.swiper-container-flip .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-container-flip .swiper-slide-active,
.swiper-container-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-container-flip .swiper-slide-shadow-top,
.swiper-container-flip .swiper-slide-shadow-bottom,
.swiper-container-flip .swiper-slide-shadow-left,
.swiper-container-flip .swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}/*!
 * Cropper.js v1.5.12
 * https://fengyuanchen.github.io/cropperjs
 *
 * Copyright 2015-present Chen Fengyuan
 * Released under the MIT license
 *
 * Date: 2021-06-12T08:00:11.623Z
 */

.cropper-container {
  direction: ltr;
  font-size: 0;
  line-height: 0;
  position: relative;
  -ms-touch-action: none;
  touch-action: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.cropper-container img {
  display: block;
  height: 100%;
  image-orientation: 0deg;
  max-height: none !important;
  max-width: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: 100%;
}

.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.cropper-wrap-box,
.cropper-canvas {
  overflow: hidden;
}

.cropper-drag-box {
  background-color: #fff;
  opacity: 0;
}

.cropper-modal {
  background-color: #000;
  opacity: 0.5;
}

.cropper-view-box {
  display: block;
  height: 100%;
  outline: 1px solid #39f;
  outline-color: rgba(51, 153, 255, 0.75);
  overflow: hidden;
  width: 100%;
}

.cropper-dashed {
  border: 0 dashed #eee;
  display: block;
  opacity: 0.5;
  position: absolute;
}

.cropper-dashed.dashed-h {
  border-bottom-width: 1px;
  border-top-width: 1px;
  height: calc(100% / 3);
  left: 0;
  top: calc(100% / 3);
  width: 100%;
}

.cropper-dashed.dashed-v {
  border-left-width: 1px;
  border-right-width: 1px;
  height: 100%;
  left: calc(100% / 3);
  top: 0;
  width: calc(100% / 3);
}

.cropper-center {
  display: block;
  height: 0;
  left: 50%;
  opacity: 0.75;
  position: absolute;
  top: 50%;
  width: 0;
}

.cropper-center::before,
.cropper-center::after {
  background-color: #eee;
  content: ' ';
  display: block;
  position: absolute;
}

.cropper-center::before {
  height: 1px;
  left: -3px;
  top: 0;
  width: 7px;
}

.cropper-center::after {
  height: 7px;
  left: 0;
  top: -3px;
  width: 1px;
}

.cropper-face,
.cropper-line,
.cropper-point {
  display: block;
  height: 100%;
  opacity: 0.1;
  position: absolute;
  width: 100%;
}

.cropper-face {
  background-color: #fff;
  left: 0;
  top: 0;
}

.cropper-line {
  background-color: #1560fd;
}

.cropper-line.line-e {
  cursor: ew-resize;
  right: -3px;
  top: 0;
  width: 5px;
}

.cropper-line.line-n {
  cursor: ns-resize;
  height: 5px;
  left: 0;
  top: -3px;
}

.cropper-line.line-w {
  cursor: ew-resize;
  left: -3px;
  top: 0;
  width: 5px;
}

.cropper-line.line-s {
  bottom: -3px;
  cursor: ns-resize;
  height: 5px;
  left: 0;
}

.cropper-point {
  background-color: #1560fd;
  height: 5px;
  opacity: 0.75;
  width: 5px;
}

.cropper-point.point-e {
  cursor: ew-resize;
  margin-top: -3px;
  right: -3px;
  top: 50%;
}

.cropper-point.point-n {
  cursor: ns-resize;
  left: 50%;
  margin-left: -3px;
  top: -3px;
}

.cropper-point.point-w {
  cursor: ew-resize;
  left: -3px;
  margin-top: -3px;
  top: 50%;
}

.cropper-point.point-s {
  bottom: -3px;
  cursor: s-resize;
  left: 50%;
  margin-left: -3px;
}

.cropper-point.point-ne {
  cursor: nesw-resize;
  right: -3px;
  top: -3px;
}

.cropper-point.point-nw {
  cursor: nwse-resize;
  left: -3px;
  top: -3px;
}

.cropper-point.point-sw {
  bottom: -3px;
  cursor: nesw-resize;
  left: -3px;
}

.cropper-point.point-se {
  bottom: -3px;
  cursor: nwse-resize;
  height: 20px;
  opacity: 1;
  right: -3px;
  width: 20px;
}

@media (min-width: 768px) {
  .cropper-point.point-se {
    height: 15px;
    width: 15px;
  }
}

@media (min-width: 992px) {
  .cropper-point.point-se {
    height: 10px;
    width: 10px;
  }
}

@media (min-width: 1200px) {
  .cropper-point.point-se {
    height: 5px;
    opacity: 0.75;
    width: 5px;
  }
}

.cropper-point.point-se::before {
  background-color: #39f;
  bottom: -50%;
  content: ' ';
  display: block;
  height: 200%;
  opacity: 0;
  position: absolute;
  right: -50%;
  width: 200%;
}

.cropper-invisible {
  opacity: 0;
}

.cropper-bg {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
}

.cropper-hide {
  display: block;
  height: 0;
  position: absolute;
  width: 0;
}

.cropper-hidden {
  display: none !important;
}

.cropper-move {
  cursor: move;
}

.cropper-crop {
  cursor: crosshair;
}

.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
  cursor: not-allowed;
}
/**
vendor
*/
/**
 * Swiper 6.3.5
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2020 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: October 30, 2020
 */

@font-face {
  font-family: 'swiper-icons';
  src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA') format('woff');
  font-weight: 400;
  font-style: normal;
}
:root {
  --swiper-theme-color: #007aff;
}
.swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
}
.swiper-container-vertical > .swiper-wrapper {
  flex-direction: column;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}
.swiper-container-android .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}
.swiper-container-multirow > .swiper-wrapper {
  flex-wrap: wrap;
}
.swiper-container-multirow-column > .swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column;
}
.swiper-container-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
/* Auto Height */
.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
  height: auto;
}
.swiper-container-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}
/* 3D Effects */
.swiper-container-3d {
  perspective: 1200px;
}
.swiper-container-3d .swiper-wrapper,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-cube-shadow {
  transform-style: preserve-3d;
}
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}
.swiper-container-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
/* CSS Mode */
.swiper-container-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  /* For Firefox */
  -ms-overflow-style: none;
  /* For Internet Explorer and Edge */
}
.swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}
.swiper-container-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}
.swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}
.swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}
:root {
  --swiper-navigation-size: 44px;
  /*
  --swiper-navigation-color: var(--swiper-theme-color);
  */
}
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(-1 * var(--swiper-navigation-size) / 2);
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}
.swiper-button-prev:after,
.swiper-button-next:after {
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  text-transform: none !important;
  letter-spacing: 0;
  text-transform: none;
  font-variant: initial;
  line-height: 1;
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  left: 10px;
  right: auto;
}
.swiper-button-prev:after,
.swiper-container-rtl .swiper-button-next:after {
  content: 'prev';
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  right: 10px;
  left: auto;
}
.swiper-button-next:after,
.swiper-container-rtl .swiper-button-prev:after {
  content: 'next';
}
.swiper-button-prev.swiper-button-white,
.swiper-button-next.swiper-button-white {
  --swiper-navigation-color: #ffffff;
}
.swiper-button-prev.swiper-button-black,
.swiper-button-next.swiper-button-black {
  --swiper-navigation-color: #000000;
}
.swiper-button-lock {
  display: none;
}
:root {
  /*
  --swiper-pagination-color: var(--swiper-theme-color);
  */
}
.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 10px;
  left: 0;
  width: 100%;
}
/* Bullets */
.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transform: scale(0.33);
  position: relative;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(0.33);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(0.33);
}
.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 100%;
  background: #000;
  opacity: 0.2;
}
button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}
.swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}
.swiper-container-vertical > .swiper-pagination-bullets {
  right: 10px;
  top: 50%;
  transform: translate3d(0px, -50%, 0);
}
.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 6px 0;
  display: block;
}
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
}
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  transition: 200ms transform, 200ms top;
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 4px;
}
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform, 200ms left;
}
.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform, 200ms right;
}
/* Progress */
.swiper-pagination-progressbar {
  background: rgba(0, 0, 0, 0.25);
  position: absolute;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transform-origin: left top;
}
.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: right top;
}
.swiper-container-horizontal > .swiper-pagination-progressbar,
.swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: 4px;
  left: 0;
  top: 0;
}
.swiper-container-vertical > .swiper-pagination-progressbar,
.swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 4px;
  height: 100%;
  left: 0;
  top: 0;
}
.swiper-pagination-white {
  --swiper-pagination-color: #ffffff;
}
.swiper-pagination-black {
  --swiper-pagination-color: #000000;
}
.swiper-pagination-lock {
  display: none;
}
/* Scrollbar */
.swiper-scrollbar {
  border-radius: 10px;
  position: relative;
  -ms-touch-action: none;
  background: rgba(0, 0, 0, 0.1);
}
.swiper-container-horizontal > .swiper-scrollbar {
  position: absolute;
  left: 1%;
  bottom: 3px;
  z-index: 50;
  height: 5px;
  width: 98%;
}
.swiper-container-vertical > .swiper-scrollbar {
  position: absolute;
  right: 3px;
  top: 1%;
  z-index: 50;
  width: 5px;
  height: 98%;
}
.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  left: 0;
  top: 0;
}
.swiper-scrollbar-cursor-drag {
  cursor: move;
}
.swiper-scrollbar-lock {
  display: none;
}
.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.swiper-zoom-container > img,
.swiper-zoom-container > svg,
.swiper-zoom-container > canvas {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.swiper-slide-zoomed {
  cursor: move;
}
/* Preloader */
:root {
  /*
  --swiper-preloader-color: var(--swiper-theme-color);
  */
}
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  animation: swiper-preloader-spin 1s infinite linear;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}
.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}
@keyframes swiper-preloader-spin {
  100% {
    transform: rotate(360deg);
  }
}
/* a11y */
.swiper-container .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
  transition-timing-function: ease-out;
}
.swiper-container-fade .swiper-slide {
  pointer-events: none;
  transition-property: opacity;
}
.swiper-container-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-container-cube {
  overflow: visible;
}
.swiper-container-cube .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  z-index: 1;
  visibility: hidden;
  transform-origin: 0 0;
  width: 100%;
  height: 100%;
}
.swiper-container-cube .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-container-cube.swiper-container-rtl .swiper-slide {
  transform-origin: 100% 0;
}
.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-next,
.swiper-container-cube .swiper-slide-prev,
.swiper-container-cube .swiper-slide-next + .swiper-slide {
  pointer-events: auto;
  visibility: visible;
}
.swiper-container-cube .swiper-slide-shadow-top,
.swiper-container-cube .swiper-slide-shadow-bottom,
.swiper-container-cube .swiper-slide-shadow-left,
.swiper-container-cube .swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.swiper-container-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.6;
  -webkit-filter: blur(50px);
  filter: blur(50px);
  z-index: 0;
}
.swiper-container-flip {
  overflow: visible;
}
.swiper-container-flip .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  z-index: 1;
}
.swiper-container-flip .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-container-flip .swiper-slide-active,
.swiper-container-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-container-flip .swiper-slide-shadow-top,
.swiper-container-flip .swiper-slide-shadow-bottom,
.swiper-container-flip .swiper-slide-shadow-left,
.swiper-container-flip .swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}