@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@300;400;500;700;900&display=swap');
@import url('https://webfontworld.github.io/sandbox/SBAggro.css');

:root{
	--theme-color: #020c73;
	--key-color: #020633;
	--secondColor: #18f2c3;
	--ad-color-06: #0617cc;
	--ad-color-07: #0764fa;
	--ad-color-ffa: #ffa31a;
	--ad-color-4d: #4dffd8;
	--ad-color-94: #940afd;
	--text-body-color: #0a0a0a;

	--bg-color-f5: #f5f5f5;
	--bg-color-f9: #f9f9f9;
	--bg-color-f0: #f0f0f9;
	--bg-color-ed: #edf3fa;
	--bg-color-a4: #a4a4a4;
	--bg-color-d1: #d1d1d1;
	--bg-color-e2: #e2e2e2;
	--bg-color-3f: #3f3f40;

    --swiper-theme-color: #3a95de !important;

	/* --container-width: 1216px; */
	--container-width: 1236px;
}

/**********
* ## reset
**********/
*{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
html{overflow-x: hidden; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent !important;-webkit-text-size-adjust: none;-webkit-appearance: none; /* -webkit-user-select:none; */}/* 모바일 드래그 막기 */
html {width: 100%; height: 100%; overflow-x: hidden; font-size: 10px;}
body {min-width: 320px; max-width: 100%; color: #0a0a0a; word-break: keep-all; word-wrap: break-word; font-weight: 400; font-size: 1.5rem; font-family: 'Pretendard', sans-serif; line-height: 1.5;}



h1, h2, h3, h4, h5, h6 {font-size: 16px; line-height: 100%; }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote, th, td, p {margin: 0px; padding: 0px; -webkit-text-size-adjust: none;}
blockquote, q {quotes: none}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}
table {width: 100%; border-collapse: collapse; border-spacing: 0px; /*table-layout: fixed;*/}
fieldset, img, abbr, acronym {border: 0px;}
img {vertical-align: top;}
legend {position: absolute; height: 0; line-height: 0; font-size: 0; overflow: hidden;}
ins {font-style: normal;}
del {text-decoration: none;}
address, caption, cite, code, dfn, em, var {font-style: normal; font-weight: normal;}
ol, ul {list-style: none;}
caption {height: 0; line-height: 0; font-size: 0; overflow: hidden; text-indent: -10000px;}
a {color: inherit; text-decoration: none; cursor: pointer;}
/*a:active, a:hover {color:#888; text-decoration:none}*/
a > * {color: inherit;}
a:hover, a:focus, a:visited{text-decoration: none;}
hr{display: none;}
button {padding: 0; border: 0 none; background: none;}
button:focus, button:active{outline: 0;}
button > span {color: inherit;}
.hidden {display: none;}
header, footer, article, section, aside, details, figure, figcaption, nav {display: block; margin: 0; padding: 0;}
small {font-size: 11px; padding-left: 10px;}
audio[controls], canvas, video {display: inline-block;}
button, input, select, textarea {margin: 0; font-size: 100%; vertical-align: middle; font-family: 'Pretendard';}
button, html input[type="button"], input[type="reset"], input[type="submit"] {cursor: pointer; -webkit-appearance: button;}
input[type="checkbox"], input[type="radio"] {box-sizing: border-box;}
input[type="search"] {-webkit-appearance: none;}
input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
button::-moz-focus-inner, input::-moz-focus-inner {border: 0; padding: 0;}
textarea {overflow: auto; vertical-align: top; resize: none;}
textarea:focus{outline: none;}
select{-webkit-appearance: none;}
select::-ms-expand {display: none;}
label input[type="checkbox"], label input[type="radio"] {vertical-align: baseline;}
input[type="text"], input[type="email"], input[type="file"], input[type="password"], input[type="number"], input[type="search"], textarea {width: 100%; box-sizing: border-box; -webkit-appearance: none; border-radius: 0;}
input:focus{outline: none;}

/* input[placeholder]{color: #969696; opacity: 1; font-family: 'Pretendard';} */
input::-webkit-input-placeholder {color: #969696;}
input:-moz-input-placeholder {color: #969696;}
input::-moz-input-placeholder {color: #969696;}
input:-ms-input-placeholder {color: #969696;}

/* WebKit browsers */
::-webkit-input-placeholder {color: #969696; opacity: 1;}
/* Mozilla Firefox 4 to 18 */
:-moz-placeholder {color: #969696; opacity: 1;}
/* Mozilla Firefox 19+ */
::-moz-placeholder {color: #969696; opacity: 1;}
/* Internet Explorer 10+ */
:-ms-input-placeholder {color: #969696; opacity: 1;}


::-moz-selection {background-color: #272727; color: #fff; text-shadow: none }
::selection {background-color:#272727; color:#fff; text-shadow:none;}


/**********
* ## common
**********/
.success {background: #d6e9c6;}
.warning {background: #fcf8e3;}
.danger {background: #f2dede;}
.highlight {font-weight: bold; color: #7519FF}

.hide{display: none;}
.img-responsive{width: auto; max-width: 100%;}
.sound-only{position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; padding: 0; border: 0; margin: -1px;}
.blind {position: absolute; overflow: hidden; clip: rect(0,0,0,0); clip-path: polygon(0 0, 0 0, 0 0); width: 1px; height: 1px; margin: -1px; }


#skip-contents a {z-index: 100000; position: absolute; top: 0; left: 0; width: 1px; height: 1px; font-size: 0; line-height: 0; overflow: hidden;}

.label-req{padding-right: 5px; color: #fe0000; vertical-align: middle; font-size: 1.3rem;}
label.error{font-size: 14px; color: #e93421;}
.error {color:red;}
.clearfix {clear:both;}
.bold {font-weight:bold;}

.help-desc{color: #1473e6; font-size: 13px;}
.help-block{margin-top: 10px; color: #888; font-size: 13px;}
.link{text-decoration: underline; color: #1473e6;}

.pull-left{float:left;}
.pull-right{float:right !important;}
.mr-auto{margin-right: auto;}
.ml-auto{margin-left: auto;}
.no-padding {padding: 0 !important;}
.text-center {text-align: center !important;}
.text-right {text-align: right;}
.text-left {text-align: left !important;}
.no-post{padding: 3rem 0; text-align: center;}

.font-en{font-family: 'Roboto', sans-serif; }
.font-xs{font-size: 1.3rem;}

.error-place{position: relative;}
.error-place .error + .error{margin-left: 10px;}

.main-color{color: #6ad784;}
.color{color: #028755;}
.color2{color: #6ad784;}
.text-primary {color: var(--theme-color);}

.dash li{display: flex;}
.dash li label{width: 10px; flex-shrink: 0;}
.dash li .text{flex-grow: 1;}

.page-animate { position:relative}
.btn-viewmore span::after,
.ani{-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}

.d-flex{display: flex;}
.full-screen {display: block; width: 100%; height: 100vh; overflow: hidden; }


/* .page-scroll-wrap {overscroll-behavior: none; min-height: 100vh;} */
/* html.has-scroll-smooth {backface-visibility: hidden; transform: translateZ(0); }
.page-scroll-wrap {perspective: 1px;}

[data-scroll-container],
[data-scroll-section] {transform-style: preserve-3d; will-change: transform; } */
.font-redhat{font-family: 'Red Hat Display', sans-serif }


/**********
* ## ICON
**********/
.icon{background-repeat: no-repeat; background-position: center; background-size: cover; display: inline-block;}
.icon-status{display: inline-block; font-size: 12px; padding: 2px 3px 2px; background: #999; border-radius: 2px; color: #fff;}
.icon-status.ready{background: #999;}
.icon-status.ing{background: #ecb10d;}
.icon-status.finish{background: #028755;}

.ico-arrow-next{background-image: url('../images/icons/ico-arrow-next.png'); width: 22px; height: 11px;}
.ico-arrow-next-w{background-image: url('../images/icons/ico-arrow-next-w.png'); width: 20px; height: 10px;}
.ico-arrow-prev{background-image: url('../images/icons/ico-arrow-prev.png'); height: 16px; width: 100%; background-size: 20px;}
.ico-arrow-up{background-image: url('../images/icons/ico-arw-up.png'); height: 1.5rem; width: 1rem; background-size: 1rem auto;}
.ico-arrow-up-w{background-image: url('../images/icons/ico-arw-up-w.png'); height: 1.5rem; width: 1rem; background-size: 1rem auto;}
.ico-arrow-down{background-image: url('../images/icons/ico-arw-down.png'); height: 1.5rem; width: 1rem; background-size: 1rem auto;}
.ico-arrow-down-w{background-image: url('../images/icons/ico-arw-down-w.png'); height: 1.5rem; width: 1rem; background-size: 1rem auto;}
.ico-check{background-image: url('../images/icons/ico-check.png'); width: 17px; height: 13px;}
.ico-check-myclub{background-image: url('../images/icons/ico-check-myclub.png'); width: 17px; height: 100%; background-size: 17px;}
.ico-check-grey{background-image: url('../images/icons/ico-check-grey.png'); width: 1.5rem; height: 1.5rem; }

.ico-arrow-more-down{background-image: url('../images/icons/ico-arw-more-s.png'); width: 13px; height: 10px; background-size: 1.3rem auto;}
.ico-arrow-more-down-w{background-image: url('../images/icons/ico-arw-more-s-w.png'); width: 13px; height: 10px; background-size: 1.3rem auto;}

.ico-angle-down{width: 0.9rem; height: 0.6rem; background-image: url('../images/icons/ico-angle-down.png');}
.ico-angle-down-b{width: 0.9rem; height: 0.6rem; background-image: url('../images/icons/ico-angle-down-b.png');}
.ico-angle-right{width: 0.7rem; height: 0.9rem; background-image: url('../images/icons/ico-angle-right.png');}
.ico-angle-right-w{width: 0.7rem; height: 0.9rem; background-image: url('../images/icons/ico-angle-right-w.png');}
.ico-angle-left-w{width: 0.7rem; height: 0.9rem; background-image: url('../images/icons/ico-angle-left-w.png');}

.ico-user{background: url('../images/icons/ico-avatar.png') no-repeat center/cover; width: 4rem; height: 4rem; border: 1px solid #eee; border-radius: 50%;}
.ico-mark{background-image: url('../images/products/mark-match-01.png'); width: 8rem; height: 8rem;}
.ico-mark02{background-image: url('../images/products/mark-match-02.png'); width: 5.3rem; height: 5.3rem;}


.ico-home{background-image: url('../images/common/menu-home-w.png'); width: 20px; height: 20px;}
.ico-products{background-image: url('../images/common/menu-club-search.png'); }
.ico-club{background-image: url('../images/common/menu-myclub.png'); background-size: 1.5rem;}
.ico-review{background-image: url('../images/common/menu-review.png'); background-size: 1.9rem; }
.ico-ranking{background-image: url('../images/common/menu-ranking.png'); background-size: 2rem;}
.ico-score{background-image: url('../images/common/menu-score.png'); background-size: 1.6rem;}

.ico-info{background-image: url('../images/icons/ico-info.png'); background-size: 1.5rem; width: 1.5rem; height: 1.5rem;}
.ico-time{background-image: url('../images/icons/ico-time.png'); background-size: 1.5rem; width: 1.5rem; height: 1.5rem;}

.ico-like{background-image: url('../images/icons/ico-like.png'); background-size: 1.2rem; width: 1.2rem; height: 1.2rem;}
.ico-like-on{background-image: url('../images/icons/ico-like-on.png'); background-size: 1.2rem; width: 1.2rem; height: 1.2rem;}
.ico-avatar{background-image: url('../images/icons/ico-avatar-xs.png'); background-size: 1.2rem; width: 1.2rem; height: 1.3rem;}

.ico-help{background-image: url('../images/icons/ico-question.png'); background-size: 1.5rem; width: 1.5rem; height: 1.5rem;}

.icon-text-wrap{display: flex;}
.align-items-center{align-items: center;}
.icon-text-wrap .icon{flex-shrink: 0; width: 1.5rem; margin-right: 0.5rem; margin-top: 3px;}
.icon-text-wrap .text{display: inline-block; flex-grow: 1; line-height: 1.34;}


/**********
* ## INPUT
**********/
input[type="file"].input{font-size: 15px;}
.input-group{position: relative; }
.input-group-btn{position: absolute; top: 0; right: 0;}

.input-container{display: flex; align-items: center; margin-bottom: 10px; position: relative;}

.input{background: #fff; height: 4rem; line-height: 4rem; padding: 0 0 0 5px; border: 0; border: 1px solid #ddd; color: #333; -webkit-appearance: none; box-sizing: border-box;}
.input.full{width: 100%;}
.select-box.half{width: 50%;}
.input.half{width: 50%;}
.input.auto{width: auto;}
.input.readonly{background-color: #f0f0f0;}
.input:focus{outline: none;}

select.input{color: #4d4c4c; background:url('../images/icons/ico-angle-down.png') no-repeat 100% 50%; padding-right: 0; min-width: 100px; background-size: 0.9rem;}
select.input.full{width: 100%; background-position: 98% 50%; padding-right: 0;}
textarea.input{min-height: 150px; color: #666; padding: 5px; line-height: 1.4;}

.form-group{margin-bottom: 1.5rem; clear: both; position: relative;}
.form-group-lg{margin-bottom: 40px;}
.form-group .label{padding: 0; margin-bottom: 1rem; display: inline-block; font-weight: 500; border-radius: 0; line-height: 1; text-align: left; display: block;}


/**********
* ## TABLE
**********/
.table-wrap table{width: 100%; border-top: 1px solid var(--bg-color-d1);}
.table-wrap table th{font-size: 1.3rem; font-weight: 400; }
.table-wrap table th, .table-wrap table td{padding: 0.725rem 1rem; border-bottom: 1px solid var(--bg-color-e2); background-color: #fff; color: #666;}
.table-wrap table td.no-post{padding: 3rem 0;}
.table-wrap table thead th{text-align: center; background-color: var(--bg-color-ed);}
.table-wrap table tbody th{width: 30%; text-align: left; }

.table-wrap .table-bg thead th:first-child{border-left: 1px solid var(--bg-color-d1);}
.table-wrap .table-bg thead th:last-child{border-right: 1px solid var(--bg-color-d1);}
.table-wrap .table-bg tbody th{background-color: var(--bg-color-f9); color: var(--bg-color-3f); border-left: 1px solid var(--bg-color-e2); border-right: 1px solid var(--bg-color-e2);}
.table-wrap .table-bg tbody td{border-left: 1px solid var(--bg-color-e2); border-right: 1px solid var(--bg-color-e2); color: var(--bg-color-3f); font-size: 1.3rem; padding: 0.725rem 1rem;}

.table-desc{background-color: #fff; padding: 20px 20px 35px; color: #757575; margin-top: 20px;}
.table-responsive {display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }


/**********
* ## TABS
**********/
.tabs{display: flex; margin-bottom: 2rem;}
.tabs.line li{margin: 0 10px;}
.tabs.line li.active a{color: #109342}
.tabs.line li a{border: 0; text-align: left; padding: 0.3rem 0; }
.tabs.line li a:hover, .tabs.line li a.active{color: #6ad784}


/**********
* ## loading
**********/
.wrap-loading{position: fixed; left:0; right:0; top:0; bottom:0; background: rgba(0,0,0,0.2); /*not in ie */ filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#20000000', endColorstr='#20000000');    /* ie */}
.wrap-loading div{position: fixed; top:50%; left:50%; margin-left: -21px; margin-top: -21px;}


/**********
* ## Custom element
**********/
.check-box{position: relative; display: inline-flex; align-items: center; }
.check-box input[type=checkbox]{opacity: 0; position: absolute; top: 0; left: 0; z-index: 0;}
.check-box label{cursor: pointer; margin-left: 1.2rem; font-weight: normal; line-height: 1.2;}
.check-box label span{font-size: 14px;}
.check-box label::before, .check-box label::after {content: ''; position: absolute; top: 0; left: 0;}
.check-box label::after{top: 3px; left: 3px; width: 12px; height: 12px; -webkit-transition: all .3s ease; transition: all .3s ease;}
.check-box label::before{width: 16px; height: 16px; background-color: transparent;  content: ""; border: 1px solid #ccc;}
/* .check-box input[type="checkbox"]:checked + label::before {background-color: #fff;} */
.check-box input[type="checkbox"]:checked + label::after {content: ''; background-color: #235; z-index: 1;}
/*
.check-box.bg-white label::before{width: 18px; height: 18px; background: #fff; -webkit-transition: all .3s ease; transition: all .3s ease; content: "";  border: 1px solid #ccc;}
 .check-box.border label::before{border: 1px solid #ccc; width: 16px; height: 16px;}
.check-box.border input[type="checkbox"]:checked + label::after {width: 12px; height: 12px;}
*/
.check-box-inline{display: inline-flex;}
.check-box-inline + .check-box-inline{margin-left: 1rem;}

.check-box.icon{position: relative;}
.check-box.icon label{margin-left: 2.5rem;}
.check-box.icon label::before{width: 1.3rem; height: 1.3rem; border: 1px solid var(--theme-color); background-color: #fff;}
.check-box.icon label::after{top: 0; left: 0; transition: none;}
.check-box.icon input[type="checkbox"]:checked + label::after {background: #fff url('../images/icons/ico-check-box.png') no-repeat center/cover; background-size: 8px; width: 1.3rem; height: 1.3rem; border: 1px solid var(--theme-color); top: 0}


.check-box.rtl input[type=checkbox]{left: auto; right: 0;}
.check-box.rtl label{margin-left: 0; margin-right: 25px;}
.check-box.rtl label::before, .check-box.rtl label::after {content: ''; position: absolute; top: -2px; left: auto; right: 0;}
.check-box.rtl label::before{background: #fff;}
.check-box.rtl input[type="checkbox"]:checked + label::after {left: auto; top: -2px}


.radio-box{position: relative; display: flex; align-items: center;}
.radio-box input[type=radio]{opacity: 0; position: absolute; top: 0; left: 0; z-index: 0;}
.radio-box label{display: inline; cursor: pointer; text-align: center; margin-left: 2.6rem; font-weight: normal; line-height: 1.5; color: #000;}
.radio-box label::before, .radio-box label::after {content: ''; position: absolute; top: 0; left: 0;}
.radio-box label::after {top: 4px; left: 4px;  width: 12px; height: 12px; border-radius: 50%;}
.radio-box label::before{width: 20px; height: 20px; border: 1px solid var(--bg-color-a4);  -webkit-transition: all .3s ease; transition: all .3s ease; content: ""; border-radius: 50%; }

.radio-box.bg-white label::before{width: 14px; height: 14px; background: #fff; -webkit-transition: all .3s ease; transition: all .3s ease; content: ""; border: 1px solid #e1e1e1;}
.radio-box input[type="radio"]:checked + label::after {content: ''; width: 14px; height: 14px; top: 4px; left: 4px; background-color: var(--theme-color); z-index: 1; border-radius: 50%;}
/* .radio-box input[type="radio"]:checked + label::before {background-color: transparent;} */
.radio-box.border label::before{border: 1px solid #ccc; width: 16px; height: 16px;}
.radio-box.border input[type="radio"]:checked + label::after {width: 12px; height: 12px;}

.radio-box.square label::before{border-color: #e1e1e1; border-radius: 0;}
.radio-box.square label::after {top: 0; left: 0; background-color: transparent; }
.radio-box.square input[type="radio"]:checked + label::after {background: url('../images/icons/ico_checkbox-act.png') center/cover; width: 16px; height: 16px; top: 0; left: 0; border-radius: 0;}

.radio-box.icon{vertical-align: middle; line-height: unset;}
.radio-box.icon label{display: inline; width: 31px; height: 31px; cursor: pointer; text-align: center; margin-left: 0; padding-left: 45px; font-weight: normal; vertical-align: middle; line-height: unset;}
.radio-box.icon label::before, .radio-box.icon label::after {content: ''; position: absolute; top: 0; left: 0;}
.radio-box.icon label::before{width: 31px; height: 31px; background: url('../images/icons/ico_unchecked.png') no-repeat center/cover; -webkit-transition: all .3s ease; transition: all .3s ease; content: ""; }
.radio-box.icon input[type="radio"]:checked + label::after {content: '';  z-index: 1; background: url('../images/icons/ico_checked.png') no-repeat center/cover; width: 31px; height: 31px; top: -2px; left: 0;}
.radio-box.icon input[type="radio"]:checked + label::before {background-color: #fff;}

.radio-box.icon + .radio-box.icon{margin-left: 60px;}
.form-table .radio-box.icon + .error-place{top: 120%;}


.select-box{display:block;position:relative;width:300px;text-align:left;border:1px solid var(--bg-color-d1); border-radius: 4px;}
.select-box.full{width: 100%;}
.select-box.width-auto{width: auto; min-width: 120px;}
.select-box .select{display:block;position:absolute;left:0;top:0;width:100%;height:100%;font-size:2em;color:#666;filter:alpha(opacity=0);opacity:0;z-index:1}
.select-box .btn-select{display:block;position:relative;padding:0 40px 0 10px; height:3.8rem; line-height:3.8rem; color: var(--bg-color-3f); background: url("../images/icons/ico-angle-down-b.png") no-repeat right center; background-size: 9px; background-position: 90% 50%; -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;z-index:1}
.select-box .select-list{display:none;position:absolute; left:0; top:100%; right:0; padding:10px 0; margin-top:-1px; border-radius:4px; box-shadow: 0px 2px 4.8px 0.3px rgba(0, 0, 0, 0.2); border: solid 1px #e5e5e5; background-color: #ffffff; max-height: 300px; overflow-y: auto;}
.select-box .select-list li{position: relative;}
.select-box .select-list a{display:block;padding:8px 5px 9px; color:#333;text-overflow:ellipsis;white-space:nowrap;overflow:hidden; text-align: center;}
.select-box .select-list a:hover{color:#fff; background-color: #f2f2f2; color: #0e9bf5;}
.select-box.scroll .select-list{max-height: 300px; overflow-y: scroll;}
.select-box.active{z-index:50}
.select-box.active .select-list{display:block;z-index:50}
.select-box.active.scroll .select-list { height:240px; overflow-y:auto}
.select-box.active .btn-select{border-color:#333; }


/**********
* ## Grid
**********/
.row{display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; box-sizing: border-box; margin-right: -15px; margin-left: -15px;}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {position: relative; width: 100%; padding-right: 15px; padding-left: 15px; }

.col-12{flex: 0 0 100%; max-width: 100%; }
.col-6{flex: 0 0 50%; max-width: 50%;}
.col-4{flex: 0 0 33.33333%; max-width: 33.33333%;}
.col-3{flex: 0 0 25%; max-width: 25%;}
.col-2{flex: 0 0 20%; max-width: 20%;}

.row.space-5{margin-left: -5px; margin-right: -5px;}
.row.space-5 [class*="col-"]{padding-left: 5px; padding-right: 5px;}

.row.space-half{margin-left: -7.5px; margin-right: -7.5px;}
.row.space-half [class*="col-"]{padding-left: 7.5px; padding-right: 7.5px;}

.row.space-10{margin-left: -10px; margin-right: -10px;}
.row.space-10 [class*="col-"]{padding-left: 10px; padding-right: 10px;}

.row.space-13{margin-left: -13px; margin-right: -13px;}
.row.space-13 [class*="col-"]{padding-left: 13px; padding-right: 13px;}

.row.space-20{margin-left: -20px; margin-right: -20px;}
.row.space-20 [class*="col-"] {padding-left: 20px; padding-right: 20px;}


/**********
* ## BADGE
**********/
.mark{display: inline-block; text-align: center;}
.mark-data{background-color: var(--key-color); width: 9rem; height: 2.4rem; line-height: 2.4rem; color: #fff; font-weight: 700; font-size: 1.3rem; box-shadow: -3px 4px 1px 1px #4dffd8; }
.mark-data.white{background-color: #fff; color: var(--key-color);}

.badge{display: inline-block; text-align: center; height: 2.3rem; line-height: 2.2rem;} 
.badge-club{border: 1px solid var(--bg-color-a4); background-color: var(--bg-color-f5); color: var(--bg-color-3f); padding: 0 6.54px; font-size: 1.3rem;}
.badge-status{width: 6rem; font-size: 1.3rem; border: 1px solid transparent;}
.badge-status.finish{background-color: var(--ad-color-06); color: #fff; border-color: var(--ad-color-06);}
.badge-status.ready{background-color: var(--ad-color-ffa); color: #fff; border-color: var(--ad-color-ffa);}
.badge-data{height: 2.5rem; line-height: 2.5rem; border: 1px solid var(--bg-color-a4); background-color: var(--bg-color-ed); width: 9rem; font-size: 1.3rem; color: var(--key-color); display: inline-flex; align-items: center; justify-content: center;}
.badge-data img{max-width: 19px; margin-right: 3px;}
.badge-fun{border: 1px solid var(--ad-color-07); background-color: var(--ad-color-07); color: #fff; padding: 0 8.1px; border-radius: 1.1rem; font-size: 1.3rem;}
.badge-hard{border: 1px solid #f5402c; background-color: #fcfafa; border-radius: 1rem; padding: 0 1rem; height: 2rem; line-height: 2rem; font-size: 1.3rem;}
.badge-hitter{border: 1px solid #0617cc; background-color: #f7f9fc; border-radius: 1rem; padding: 0 1rem; height: 2rem; line-height: 2rem; font-size: 1.3rem;}


/**********
* ## PROGRESS
**********/
.progress {display: flex; height: 2rem; overflow: hidden; line-height: 0; font-size: 1.5rem; background-color: var(--bg-color-f5); border-radius: 1rem; position: relative}
.progress-bar {display: flex; flex-direction: column; justify-content: center; overflow: hidden; color: #fff; text-align: center; white-space: nowrap; background-color: var(--bg-color-f5); transition: width 0.6s ease; border-radius: 1rem;}
.progress svg{stroke: var(--bg-color-f5); border-radius: 1rem;}


.progress.circle{border-radius: 50%; width: 10rem; height: 10rem; margin: 0 auto;}
.progress.circle .progress-bar{width: 100%; background-color: #fff; }
.progress.circle svg{stroke-linecap: round}

@media (prefers-reduced-motion: reduce) {
    .progress-bar {transition: none;}
}


/**********
* ## BUTTON
**********/
.btn.full{width: 100%;}
.btn {display: inline-block; margin-bottom: 0; text-align: center; vertical-align: middle; cursor: pointer; background-image: none; border: 1px solid transparent; white-space: nowrap; line-height: 1.42857143; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding: 8px 10px 6px; min-width: 110px; transition: all 0.2s ease; border-radius: 4px;}
.btn:active, .btn.active {background-image: none;}
a.btn{padding: 7px 10px 4px;}

.btn-xs{padding: 7px 6px 9px; min-width: auto; line-height: 1; font-size: 13px; min-width: 80px;}

.btn-default {border-color: #dbdbdb; border-color: #ccc;}
.btn-default:hover, .btn-default:focus {background-color: #e0e0e0; background-position: 0 -15px;}
.btn-default:active, .btn-default.active {background-color: #e0e0e0; border-color: #dbdbdb;}

.btn-priority{background-color: var(--theme-color); border-color: var(--theme-color); color: #ffffff;}

.btn-primary {color: #fff; background-color: #0764fa; border-color: #0764fa; background-image: none;}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {color: #fff; background-color: #1473e6; border-color: #1473e6;}
.btn-primary.disabled, .btn-primary[disabled], fieldset[disabled] .btn-primary, .btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover, .btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus, .btn-primary.disabled:active, .btn-primary[disabled]:active, fieldset[disabled] .btn-primary:active, .btn-primary.disabled.active, .btn-primary[disabled].active, fieldset[disabled] .btn-primary.active {background-color: #233b4d; border-color: #233b4d;}
.btn-primary .badge {color: #348fe2; background-color: #fff;}

.btn-danger {color: #fff; background-color: #b20158; border-color: #b20158; background-image: none;}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open .dropdown-toggle.btn-danger {color: #fff; background-color: #ce4741; border-color: #ce4741;}
.btn-danger.disabled, .btn-danger[disabled], fieldset[disabled] .btn-danger, .btn-danger.disabled:hover, .btn-danger[disabled]:hover, fieldset[disabled] .btn-danger:hover, .btn-danger.disabled:focus, .btn-danger[disabled]:focus, fieldset[disabled] .btn-danger:focus, .btn-danger.disabled:active, .btn-danger[disabled]:active, fieldset[disabled] .btn-danger:active, .btn-danger.disabled.active, .btn-danger[disabled].active, fieldset[disabled] .btn-danger.active {background-color: #ff5c57; border-color: #ff5c57;}
.btn-danger .badge {color: #ff5c57; background-color: #fff;}

.btn-warning {color: #fff; background-color: #ecb10d; border-color: #ecb10d; background-image: none;}
.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .open .dropdown-toggle.btn-warning {color: #fff; background-color: #c57e00; border-color: #c57e00;}
.btn-warning.disabled, .btn-warning[disabled], fieldset[disabled] .btn-warning, .btn-warning.disabled:hover, .btn-warning[disabled]:hover, fieldset[disabled] .btn-warning:hover, .btn-warning.disabled:focus, .btn-warning[disabled]:focus, fieldset[disabled] .btn-warning:focus, .btn-warning.disabled:active, .btn-warning[disabled]:active, fieldset[disabled] .btn-warning:active, .btn-warning.disabled.active, .btn-warning[disabled].active, fieldset[disabled] .btn-warning.active {background-color: #f49b1b; border-color: #f49b1b;}
.btn-warning .badge {color: #f49b1b; background-color: #fff;
}

.btn-info {color: #fff; background-color: #0e9bf5; border-color: #0e9bf5; background-image: none;}
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open .dropdown-toggle.btn-info {color: #fff; background-color: #3492ac; border-color: #3492ac;}
.btn-info.disabled, .btn-info[disabled], fieldset[disabled] .btn-info, .btn-info.disabled:hover, .btn-info[disabled]:hover, fieldset[disabled] .btn-info:hover, .btn-info.disabled:focus, .btn-info[disabled]:focus, fieldset[disabled] .btn-info:focus, .btn-info.disabled:active, .btn-info[disabled]:active, fieldset[disabled] .btn-info:active, .btn-info.disabled.active, .btn-info[disabled].active, fieldset[disabled] .btn-info.active {background-color: #49b6d5; border-color: #49b6d5;}
.btn-info .badge {color: #49b6d5; background-color: #fff;}

.btn-success {color: #fff; background-color: #028755; border-color: #028755; background-image: none;}
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open .dropdown-toggle.btn-success {color: #fff; opacity: 0.8;}
.btn-success.disabled, .btn-success[disabled], fieldset[disabled] .btn-success, .btn-success.disabled:hover, .btn-success[disabled]:hover, fieldset[disabled] .btn-success:hover, .btn-success.disabled:focus, .btn-success[disabled]:focus, fieldset[disabled] .btn-success:focus, .btn-success.disabled:active, .btn-success[disabled]:active, fieldset[disabled] .btn-success:active, .btn-success.disabled.active, .btn-success[disabled].active, fieldset[disabled] .btn-success.active {background-color: #028755; border-color: #028755;}
.btn-success .badge {color: #028755; background-color: #fff;}

.btn-silver {color: #fff; background-color: #b7c2c8; border-color: #b7c2c8; background-image: none;}
.btn-silver:hover, .btn-silver:focus, .btn-silver:active, .btn-silver.active,.open .dropdown-toggle.btn-silver {color: #fff; background-color: #929ba2; border-color: #929ba2;}
.btn-silver.disabled, .btn-silver[disabled], fieldset[disabled] .btn-silver, .btn-silver.disabled:hover, .btn-silver[disabled]:hover, fieldset[disabled] .btn-silver:hover, .btn-silver.disabled:focus, .btn-silver[disabled]:focus, fieldset[disabled] .btn-silver:focus, .btn-silver.disabled:active, .btn-silver[disabled]:active, fieldset[disabled] .btn-silver:active, .btn-silver.disabled.active, .btn-silver[disabled].active, fieldset[disabled] .btn-silver.active {background-color: #b7c2c8; border-color: #b7c2c8;}
.btn-silver .badge {color: #b7c2c8; background-color: #fff;}

.btn-dark {color: #fff; background-color: #2c353c; border-color: #2c353c; background-image: none;}
.btn-dark:hover, .btn-dark:focus, .btn-dark:active, .btn-dark.active, .open .dropdown-toggle.btn-dark {color: #fff; background-color: #000; border-color: #000;}
.btn-dark.disabled, .btn-dark[disabled], fieldset[disabled] .btn-dark, .btn-dark.disabled:hover, .btn-dark[disabled]:hover, fieldset[disabled] .btn-dark:hover, .btn-dark.disabled:focus, .btn-dark[disabled]:focus, fieldset[disabled] .btn-dark:focus, .btn-dark.disabled:active, .btn-dark[disabled]:active, fieldset[disabled] .btn-dark:active, .btn-dark.disabled.active, .btn-dark[disabled].active, black fieldset[disabled] .btn-dark.active {background-color: #2c353c; border-color: #2c353c;}
.btn-dark .badge {color: #2c353c; background-color: #fff;}

.btn.disabled {pointer-events: none; cursor: not-allowed; filter: alpha(opacity=65); -webkit-box-shadow: none; box-shadow: none; opacity: .65;}

.btn-cancel, .sp-submit.btn-cancel{background: #666; display: inline-block; color: #fff;}
.btn-cancel:hover{background-color: #a7a8a9; }

.btn-gray{background: #626262; display: inline-block; color: #fff;}
.btn-gray:hover{background: #888; }

.btn-border, .sp-submit.btn-border{border: 1px solid var(--bg-color-a4); background-color: #fff; color: var(--text-body-color);}
.btn-border:hover, .sp-submit.btn-border:hover{background-color: #ccc;}


/* .btn-link{background-color: #ecf7ff; border: 1px solid #008cf0; color: #008cf0;} */
.btn-link{background-color: #edf2fa; border: 1px solid #0764fa; color: #0764fa;}
.btn.btn-link{padding: 7px 20px;}

.sp-submit{height: 4.5rem; line-height: 4.5rem; background-color: var(--theme-color); color: #fff; padding: 0; min-width: 15rem; display: inline-block; text-align: center; border-radius: 4px;}
.sp-submit.full{width: 100%;}
.btn-group{position: relative;}
.btn-group .btn + .btn{margin-left: 1rem;}


.btn-icon-wrap{display: inline-flex; align-items: center; justify-content: center;}
.btn-icon-wrap .text{line-height: 1; }
.btn-icon-wrap .icon{margin-left: 1rem;}
.btn-icon-wrap.more .icon{margin-left: 5px; margin-top: -1px;}
.btn-icon-wrap .ico-arrow-next{background-image: url('../images/icons/ico-arw-btn-next.png'); width: 1rem; height: .8rem }
.btn-icon-wrap .ico-arrow-next-w{background-image: url('../images/icons/ico-arw-btn-next-w.png'); width: 1rem; height: .8rem;}
.btn-wrap{position: relative; text-align: center;}
.btn-flex-wrap{display: flex; justify-content: center;}
.btn-admin-wrap{margin-bottom: 1rem; text-align: right;}


.btn-close{width: 25px; height: 25px; text-indent: -9999px; cursor: pointer;}
.btn-close.cross:before, .btn-close.cross:after{width: 100%; height: 2px; top: 50%; left: 0; content: ""; background: #121212; transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); position: absolute;}
.btn-close.cross:after {transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg);}
.btn-close.cross.white:before, .btn-close.cross.white:after{background-color: #fff;}
.btn-close.icon{background: url('../images/icons/ico-close-b.png') no-repeat center/cover; background-size: 16px; width: 30px; height: 30px;}
.btn-close.icon.white{background: url('../images/icons/ico-close-w.png') no-repeat center/cover; background-size: 16px; background-position: center right;}


/**********
* ## alert
**********/
.alert {padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; position: relative;}
.alert h4 {margin-top: 0; color: inherit;}
.alert .alert-link {font-weight: bold;}
.alert > p, .alert > ul {margin-bottom: 0;}
.alert > p + p {margin-top: 5px;}
.alert-dismissible, .alert-dismissible {padding-right: 35px;}
.alert-dismissible .close, .alert-dismissible .close {position: absolute; top: 50%; right: 15px; margin-top: -10px; color: inherit;}

.alert-success {color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6;}
.alert-success hr {border-top-color: #c9e2b3;}
.alert-success .alert-link {color: #2b542c;}

.alert-info {color: #31708f; background-color: #d9edf7; border-color: #bce8f1;}
.alert-info hr {border-top-color: #a6e1ec;}
.alert-info .alert-link {color: #245269;}

.alert-warning {color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc;}
.alert-warning hr {border-top-color: #f7e1b5;}
.alert-warning .alert-link {color: #66512c;}

.alert-danger {color: #a94442; background-color: #f2dede; border-color: #ebccd1;}
.alert-danger hr {border-top-color: #e4b9c0;}
.alert-danger .alert-link {color: #843534;}



/**********
* ## layer popup
**********/
.layer-popup{display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; transition: all 0.3s;}
.layer-popup.active{display: block; animation: aniFadeIn 0.5s; -moz-animation: aniFadeIn 0.5s; -webkit-animation: aniFadeIn 0.5s; -o-animation: aniFadeIn 0.5s;}
.layer-dim{position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: #000; opacity: .4; z-index: 1}
.pop-wrap{position: absolute; top: 50%; left: 50%; z-index: 20; width: 90%;}
.pop-header{background-color: var(--key-color); position: sticky; top: 0; z-index: 10;}
.pop-header h3{font-size: 1.8rem; font-weight: 600; color: #fff; text-align: center; height: 4.5rem; line-height: 4.5rem;}
.pop-content{background-color: #fff; padding: 10px; min-height: 15rem; }
.pop-content h4{font-size: 2.4rem; margin-bottom: 10px;}
.pop-content .pop-title{font-size: 1.8rem; margin-bottom: 1.5rem; font-weight: 600;}
.pop-content strong{font-weight: 500;}
.pop-wrap .btn-close{position: absolute; top: -30px; right: 0;}
.pop-footer{background-color: #fff; }
.pop-footer button{height: 5rem; flex: 1;}
.pop-footer button + button{border-left: 1px solid var(--bg-color-d1);}
.pop-footer .btn-close{position: relative; width: auto; height: auto; top: 0; left: 0; right: 0; text-indent: 0;}
.pop-footer .btn-confirm{color: var(--ad-color-07);}


.layer-popup.modal .pop-wrap{width: 90%; max-width: 500px; box-shadow: 0 0 8.5px 1.5px rgba(9, 9, 9, 0.1); border: 1px solid var(--bg-color-d1);}
.layer-popup.modal .pop-content{display: flex; align-content: center; justify-content: center; flex-direction: column;}
.layer-popup.modal .pop-footer{display: flex; border-top: 1px solid var(--bg-color-d1);}

.layer-popup.full .pop-wrap{width: 100%; background-color: #fff; top: 0; margin-top: 0 !important;}
.layer-popup.full .pop-content{position: relative; padding: 0; overflow-y: auto; height: calc(100vh - 12rem); padding-bottom: 8rem;}
.layer-popup.full .pop-footer{position: fixed; bottom: 0; left: 0; right: 0; padding: 1.5rem; z-index: 10;}
.layer-popup.full .pop-footer .btn-close{width: 100%; height: 4.5rem; line-height: 4.5rem; padding: 0;}
/* .layer-popup.full .pop-footer .btn-wrap{padding: 1.5rem;}
.layer-popup.full .pop-footer .btn-close{position: relative; width: 100%; height: 4.5rem; line-height: 4.5rem; text-indent: 0; padding: 0;} */


.alert-layer{display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999}
.alert-dim{position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: #000; opacity: .4; z-index: 1}
.alert-container{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 30px; background: #f9f9f9; z-index: 20; width: 50%; max-width: 300px; text-align: center;}
.alert-container .btn-confirm{margin-top: 30px; background-color: #ecb10d; color: #fff; height: 40px; line-height: 40px; font-size: 15px; display: inline-block; min-width: 100px; text-align: center; border-radius: 5px;}



/**********
* ## Elementpath
**********/

.mb-0{margin-bottom: 0 !important;}
.mt-3{margin-top: 3rem;}


/**********
* ## scroll-to-top
**********/
.scroll-to-top{position: relative; z-index: 99; opacity: 0; visibility: hidden;}
.scroll-to-top.visible {visibility: visible!important; opacity: 1!important;}
.scroll-to-top a{background: url('../images/common/btn-top.png') no-repeat center/cover; width: 45px; height: 45px; text-indent: -9999px;}


/* .scroll-to-top .scroll-top-inner {opacity: 0; visibility: hidden; width: 4rem; height: 4rem; border: 1px solid #cdcdcd; background-color: #fff; text-align: center; border-radius: 50%; cursor: pointer; }
.scroll-to-top .scroll-top-inner{display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-transition: all cubic-bezier(.4,0,.2,1) .4s; -o-transition: all cubic-bezier(.4,0,.2,1) .4s; transition: all cubic-bezier(.4,0,.2,1) .4s; justify-content: center; flex-direction: column;}
.scroll-to-top .scroll-bar {width: 50px; height: 2px; margin-right: 10px; position: relative;}
.scroll-to-top .scroll-bar:before {content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-color: #fff; opacity: .3; }
.scroll-to-top .scroll-bar .bar-inner {position: absolute; top: 0; left: 0; height: 100%; background-color: #131313;}
.scroll-to-top .scroll-bar-text{font-weight: 600; cursor: pointer; transition: all 500ms ease; color: #000; display: none;}
.scroll-to-top .scroll-top-icon{background-image: url('../images/icons/ico-btn-top-up.png') ; width: 18px; height: 10px; } */

/* .scroll-to-top .scroll-bar-text:hover{transform: scale(1.1);} */

/* #scroll-top{position: fixed; right: 10%; bottom: 10%; background-color: #233b4d; width: 35px; height: 35px; line-height: 30px; font-weight: 500; font-size: 12px; color: #fff; border-color: #233b4d; border-top: 0; opacity: 0; transition: all 0.3s ease; text-align: center;}
#scroll-top.active{opacity: 1;}
.btn-top{background: #2351b1 url('../images/common/quick_top.png') no-repeat center/cover; display: inline-block; width: 35px; height: 35px;}
.btn-top:hover{background-color: #028755; opacity: 0.6;} */


/**********
* ## paging
**********/
.pagination{position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-top: 30px;}
.pagination li{position: relative; width: 30px; height: 30px; line-height: 30px; vertical-align: middle; margin: 0 5px;}
.pagination li a{display: block;  text-align: center;}
.pagination li.active{border: 1px solid var(--theme-color)}
.pagination li.active a{color: var(--theme-color)}

.btn-paging{background-repeat: no-repeat; background-image: url('../images/btns/paginate.gif'); display: inline-block; width: 100%; text-indent: -9999px;}
.btn-paging.first-page{background-position: -4px -4px;}
.btn-paging.next-page{background-position: -81px -4px;}
.btn-paging.prev-page{background-position: -41px -4px;}
.btn-paging.last-page{background-position: -118px -4px;}


/**********
* ## ERROR
**********/
.error-wrap {background:url('../images/common/bg_error.gif') no-repeat center top; padding:100px 25px 35px; margin:150px auto 0; text-align:center; width:100%; max-width: 580px;  position:relative; overflow:hidden}
.error-header {color:#333; font-size:25px; font-weight:normal; display:block; padding:20px 0 30px; letter-spacing:-1px}
.error-header strong {display:block; font-size:70px}	

.error-text {border-top:1px solid #e0e0e0; padding:30px 0 40px; text-align:center; font-size:16px; color:#666; line-height:22px; letter-spacing:-1px}
.error-btn {text-align:center; display: flex; align-items: center; justify-content: center;}
.error-btn a{background-color: #fff; color: var(--theme-color); border: 1px solid var(--theme-color); flex: 1;} 
.error-btn a:hover{background-color: #999; border-color: #999;}
.error-btn a + a{margin-left: 1rem; background-color: var(--theme-color); color: #fff; border: 0;}




@media screen and (min-width:768px) {	
	.ani.page-animate{ opacity: 0; -webkit-transform:translateY(150px);-moz-transform:translateY(150px);-ms-transform:translateY(150px);transform:translateY(150px);-webkit-transition:transform 0.5s cubic-bezier(0,0,0.58,1);-moz-transition:transform 0.5s cubic-bezier(0,0,0.58,1);-ms-transition:transform 0.5s cubic-bezier(0,0,0.58,1);-o-transition:transform 0.5s cubic-bezier(0,0,0.58,1);transition:transform 0.5s cubic-bezier(0,0,0.58,1)}

	.ani.page-animate.animate_delay{-webkit-transform:translateY(300px);-moz-transform:translateY(300px);-ms-transform:translateY(300px);transform:translateY(300px);-webkit-transition:transform 0.4s cubic-bezier(0,0,0.58,1);-moz-transition:transform 0.4s cubic-bezier(0,0,0.58,1);-ms-transition:transform 0.4s cubic-bezier(0,0,0.58,1);-o-transition:transform 0.4s cubic-bezier(0,0,0.58,1);transition:transform 0.4s cubic-bezier(0,0,0.58,1)}

	.ani.page-animate.animate{opacity: 1; -webkit-transform:translateY(0px);-moz-transform:translateY(0px);-ms-transform:translateY(0px);transform:translateY(0px)}

	
	.col-md-2{min-height: 1px; box-sizing: border-box; -webkit-box-flex: 0; -webkit-flex: 0 0 16.66667%; -moz-box-flex: 0; -moz-flex: 0 0 16.66667%; -ms-flex: 0 0 16.66667%; flex: 0 0 16.66667%; max-width: 16.66667%;}
	.col-md-3{min-height: 1px; box-sizing: border-box; -webkit-box-flex: 0; -webkit-flex: 0 0 25%; -moz-box-flex: 0; -moz-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%;}
	.col-md-4{min-height: 1px; box-sizing: border-box; -webkit-box-flex: 0; -webkit-flex: 0 0 33.33333%; -moz-box-flex: 0; -moz-flex: 0 0 33.33333%; -ms-flex: 0 0 33.33333%; flex: 0 0 33.33333%; max-width: 33.33333%;}
	.col-md-5{min-height: 1px; box-sizing: border-box; -webkit-box-flex: 0; -webkit-flex: 0 0 41.66666667%; -moz-box-flex: 0; -moz-flex: 0 0 41.66666667%; -ms-flex: 0 0 41.66666667%; flex: 0 0 41.66666667%; max-width: 41.66666667%;}
	.col-md-6{min-height: 1px; box-sizing: border-box; -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -moz-box-flex: 0; -moz-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;}
	.col-md-8{min-height: 1px; box-sizing: border-box; -webkit-box-flex: 0; -webkit-flex: 0 0 66.66667%; -moz-box-flex: 0; -moz-flex: 0 0 66.66667%; -ms-flex: 0 0 66.66667%; flex: 0 0 66.66667%; max-width: 66.66667%;}


}

@media (min-width: 992px) {
	.col-lg-2 {flex: 0 0 16.66667%; max-width: 16.66667%;}
	.col-lg-4{flex: 0 0 33.33333%; max-width: 33.33333%;}
	.col-lg-6{flex: 0 0 50%; max-width: 50%;}
	.col-lg-8{flex: 0 0 66.66667%; max-width: 66.66667%;}
}

@media screen and (max-width:767px) {
	.bg_cover{background-size:cover;}


	.mani.page-animate{ opacity: 0; -webkit-transform:translateY(50px);-moz-transform:translateY(50px);-ms-transform:translateY(50px);transform:translateY(50px);-webkit-transition:transform 0.5s cubic-bezier(0,0,0.58,1);-moz-transition:transform 0.5s cubic-bezier(0,0,0.58,1);-ms-transition:transform 0.5s cubic-bezier(0,0,0.58,1);-o-transition:transform 0.5s cubic-bezier(0,0,0.58,1);transition:transform 0.5s cubic-bezier(0,0,0.58,1);}

	.mani.page-animate td {border-color:transparent}

	tr.mani.page-animate {position:relative; display: table; width:100%; table-layout: fixed}
	tr.mani.page-animate::after { content:"";width:100%; height:1px; background:#d5d5d5; display:block; position: absolute;bottom:0; left:0; }
	tr.mani.page-animate::after{-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}

	.bbs-table table tbody tr.mani.page-animate td.subject {width:76%;padding-right:0}
	.bbs-table table tbody tr.mani.page-animate td:last-child {width:24%}

	.mani.page-animate.animate{opacity: 1; -webkit-transform:translateY(0px);-moz-transform:translateY(0px);-ms-transform:translateY(0px);transform:translateY(0px)}

	/*.mani.page-animate.animate::after {width:100%;}*/
}

@media print {
    body{
        width: 210mm;
        height: 297mm;
        margin: 0; /* margin: auto auto; 로 자동 여백 설정도 가능 */
   } 
}