@charset 'utf-8';

:root {
    /* font */
    --font-size: 18px;
    --small-font-size: 14px;
    --big-font-size: 24px;
    --line-height: 1.5;

    --font-family: 'GmarketSansMedium';
    --point-font-family: 'GmarketSansMedium';
    --ico-font-family: 'FontAwesome';

    /* color */
    --color-default: #333;
    --color-bak: #fff;
    --color-red: #D0121B;
    --color-main: #66c14c;
    --color-grey: #dee2e6;

    /* etc style */
    --box-shadow: 0 0 10px rgba(0,0,0,.16);
}

.sound-only {display: none;}

/* 기본 요소 정의 */
.fix-layout {
	position: relative;
    width: 90vw;
	max-width: 1520px;
	margin: 0 auto;
}

.clear {clear: both;}

/* 기본 스타일 요소 정의 */
.form-check-input:checked:disabled {
  background-image: linear-gradient(310deg, #ddd 0%, #bbb 100%) !important;
}

.txt-point {color: var(--color-main);}
.txt-point.red {color: var(--color-red);}

.btn.round {border-radius: 2em;}
.btn.point {background: var(--color-main) !important;color: var(--color-bak);border: 0 !important;}
.btn.border {background: var(--color-bak);}

.border-box {border: 1px solid var(--color-grey);padding: 2em; border-radius: 2rem;}

.highlight {padding-bottom: .5em;}
.highlight span {position: relative;}
.highlight span::before {
    content: '';
    position: absolute;
    left: -.3em;
    bottom: .1em;
    z-index: -1;
    width: calc(100% + .6em);
    height: .5em;
    background: var(--color-main);
    opacity: .3;
}

ul.check-list {padding-left: 1em;line-height: 2;}
ul.check-list li {position: relative; padding-left: .5em;}
ul.check-list li::before {
    content: '\f00c';
    position: absolute;
    left: -1em;
    font-family: var(--ico-font-family);    
    color: var(--color-main);
}
ul.check-list.line li::before {content: '\f068';}

ol.num-list {
    list-style: decimal-leading-zero;
    padding-left: 2em;
}
ol.num-list ::marker {color: var(--color-main); font-weight: 900;}
ol.num-list li {position: relative; padding: .3em 0;}

table.fixed {table-layout: fixed;}
table thead {border: 0 !important;}
table th,
table td {padding: .5em 1em;}
table .align-center {vertical-align: middle;}

table.border,
table.border th,
table.border td {border: 1px solid var(--color-grey) !important;}

table tbody tr:hover {background: #f4f5f7;}

.paging ul {display: flex; gap: 1rem;}
.paging .active {font-weight: 900;}

hr {background: var(--color-grey); opacity: 1 !important;}

@media all and (min-width: 1281px) {
    .only-mo {display: none !important;}
    .hide-pc {display: none !important;}
}

@media all and (max-width: 1280px) {
    .only-pc {display: none !important;}
    .hide-mo {display: none !important;}
}