@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;200;300;400;500;600;700;800;900&display=swap');

/*===========================================================================
    초기화
============================================================================*/
* {margin:0; padding:0; font-family: 'Pretendard', sans-serif; box-sizing:border-box;}
html, body { width:100%; font-size: 0.625em; }
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, em, img, strong, select, input, b, i, dl, dt, dd, ol, ul, li, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, footer, header, menu, nav, section, video, a { 
    color: #222; 
    outline: 0;
    font-size:1.6rem;
    line-height: 1.6;
} 
h1, h2, h3, h4, h5, h6 {line-height: 1.2; font-family: 'Pretendard', serif;}
p {line-height: 1.6; word-break: break-all;}
li { list-style:none; }
img,fieldset { border:none; vertical-align:top; }
select {height: 30px; padding: 0 10px; border: 1px solid #c8c8c8; border-radius: 5px;}
table { width:100%; text-align: center; border-spacing:0; border-collapse:collapse; }
table.fixed {table-layout: fixed;}
table thead {background: #474747;}
/* table tbody {border:1px solid #c8c8c8;} */
table th {color: #fff; white-space: nowrap;}
table th, table td {padding: 8px 10px; font-size: 1.4rem; font-weight: 400; vertical-align: middle; border:1px solid #c8c8c8;}
table td a {text-decoration: underline; color: #4d749d; font-size: inherit;}
table td a:hover {text-decoration: underline;}
table td button {width: 100%; font-size: inherit;}
table p {}
.text-overflow {white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.table-title {padding: 10px; background: #474747; color: #fff; border-radius: 10px 10px 0 0;}
.text-left {text-align: left;}
.text-center {text-align: center;}
.text-right {text-align: right;}
caption { display:none; }
label {display: flex; align-items: center; gap: 6px; font-size: 1.5rem; line-height: 1; cursor: pointer;}
input[type="text"], input[type="password"], input[type="number"], input[type="email"] {min-height: 30px; line-height: 1; border: 1px solid #c8c8c8; padding: 0 10px; border-radius: 5px;}
input:read-only {background: #fff; cursor:auto;}
input[type="radio"], input[type="checkbox"] {cursor: pointer; background: #fff;}
input::placeholder {font-size: 1.6rem; font-weight: 300; color: #a4a4a4;}
textarea {border: 1px solid #c8c8c8; padding: 0 10px; border-radius: 5px;}
button {display: inline-block; font-size: 1.6rem; line-height: 1; padding: 8px 10px; text-align: center; background: initial; border: 0; border-radius: 10px; white-space: nowrap; cursor:pointer;}
span {display: inline-block; font-size: inherit; font-weight: inherit;}
strong {display: inline-block; font-size: inherit; font-weight:inherit;}
hr.layout { display:none; }
a {display: block; font-size: 1.6rem; text-decoration:none; }
a:hover { text-decoration:none; }
a:active { text-decoration:none; }

@media (max-width:1200px) {
    .text-overflow {max-width: 600px;}
}

@media (max-width:800px) {
    div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, em, img, input, b, i, dl, dt, dd, ol, ul, li, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, footer, header, menu, nav, section, video, a {font-size: 1.4rem;}
    input::placeholder {font-size: 1.4rem;}
    table th, table td {padding: 8px; line-height: 1.4;}
	.preview-modal {
		width:100% !important;
	}
	.preview-modal-video {
		width:100% !important;
	}
}



/*===========================================================================
    공통요소
============================================================================*/
.container {max-width:1340px; height:100%; padding-left:20px; padding-right:20px; margin-left:auto; margin-right:auto; }
.banner {width:100%; height:100%; margin-left:auto; margin-right:auto; }
main {min-height: calc(100vh - 228px); padding: 40px 0;}
.flex {display: flex;}
.col-group {display:flex; align-items:center;}
.slash {padding: 0 4px;}
.cursor {cursor: pointer;}

@media (max-width:800px) {
	.mobile-img {
	    margin-left: -15%;
	}
	
	.banner {
	     width: 150%; 
		 margin-left: auto; 
	     margin-right: auto;
	    overflow: hidden;
	     margin: 0 auto; 
	}
	
	.tab-content .container { height:100%;  margin-left:auto; margin-right:auto; padding-left:0px; padding-right:0px;}

}

.pc {display: block;}
.mobile {display: none;}
.pc-img {display: block;}
.mobile-img {display: none;}
.mobile-img2 {display: none;}

.mb4 {margin-bottom: 4px;}
.mb10 {margin-bottom: 10px;}

/* grid */
.col02 {display: flex; gap: 80px; flex-wrap: wrap;}
.col02.gap10 {gap: 10px;}
.col02.gap20 {gap: 20px;}
.col02.gap30 {gap: 30px;}
.col02.gap40 {gap: 40px;}
.col02 > * {width: calc((100% - 80px) / 2);}


.overflow-x-auto {overflow-x:auto;}
.overflow-y-auto {overflow-y:auto;}

/* color */
.color-main {color: #4867d5;}
.color-blue {color: #4867d5;}
.color-red {color: #f20000;}
.color-gray {color: rgba(34, 34, 34, 0.6);}
.bg-main {background: #4867d5;}
.bg-sky {background: #e6ecff;}
.bg-dark {background: #282828;}
.bg-red  {background: #c60000;}
.bg-gray {background: #f8f8f8;}
.bg-list {background: #474747; color: #fff;}

/* button */
.btn-outline-default {border: 1px solid #222; background: #fff;}
.btn-outline-normal {border: 1px solid #b7b7b7; background: #fff;}
.btn-outline-list {border: 1px solid #c8c8c8; color: #c8c8c8;}
.btn-main {background:#4867d5; color: #fff;}
.btn-gray {background:#7c7c7c; color: #fff;}
.btn-white {background:#fff; color: #4867d5;}
.btn-outline-main {border: 1px solid #4867d5;}
.btn-list {background: #474747; color: #fff;}
.btn-brown {background: #535353; color: #fff;}
.btn-dark {background: #282828; color: #fff;}
.btn-end {border: 1px solid #bcbcbc; background: #d6d6d6; color: #888888; cursor: default;}
.tabs .tab-btn.btn-end {background: #d6d6d6; color: #888888; cursor: pointer;}
.btn-more {width: 100%; padding: 12px; margin-top: 14px; background: #f1f4ff; display: flex; align-items: center; justify-content: center;}
.btn-more img {width: 14px; margin-left: 10px; transition: 0.25s;}
.btn-more.active {background: #ececec;}
.btn-more.active img {transform: rotate(180deg);}
.btn-red  {background: #c60000; color: #fff;}


/* text */
.page-title {font-size: 2.4rem; font-weight: 600; padding: 10px 0; border-bottom: 1px solid #222; margin-bottom: 20px;}
.guide-text {font-size: 1.4rem;}
.title-box {margin-bottom: 20px; display: flex; align-items: center;}
.title-box h2 {position: relative; font-size: 2.4rem; font-weight: bold;}
.title-box h2 span {font-size: 1.5rem; margin-left: 10px; font-weight: 300; opacity: 0.5;}
.title-box a {font-size: 1.6rem; font-weight: 500; margin-left: auto;}
.title-box button {font-size: 1.5rem; font-weight: 500; margin-left: auto; padding: 6px 10px; border-radius: 4px;}
.short-text01 {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.short-text02 {  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}

/* select box */
.select-box {position: relative; }
.select-box p {position: relative; padding: 6px 40px 6px 12px; border-radius: 5px; border: 1px solid #c8c8c8; font-weight: 300; background: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer;}
.select-box p::after {content:''; width: 14px; height: 14px; position: absolute; top: 50%; right: 4px; transform: translateY(-50%); background:url('../img/icon-arrow-bottom-gray.svg') no-repeat 95% 50% / 14px; transition: 0.2s;}
.select-box .option-box {display: none; z-index: 10; min-width: 100%; position: absolute; top: calc(100% + 4px); padding: 10px 6px; border: 1px solid #c8c8c8; background: #fff; border-radius: 10px;}
.select-box .option-box li {padding: 4px 10px; font-size: 1.5rem; border-radius: 5px; white-space: nowrap; transition: 0.2s; cursor: pointer;}
.select-box .option-box li:not(:last-child) {margin-bottom: 4px;}
.select-box .option-box li:hover {background: #f1f4ff;}
.select-box .icon-selected {display: none; position: absolute; top: 50%; right: 4px; transform: translateY(-50%);}
.select-box.active .option-box {display: block;}
.select-box.active p::after {transform: translateY(-50%) rotate(180deg);} 
.select-box.selected .icon-selected {display: block;}

/* swiper */
.swiper .swiper-slide img {width: 100%;}
.swiper .swiper-pagination-bullet {width: 10px; height: 10px; border: 2px solid #fff; opacity: 1; background: initial;}
.swiper .swiper-pagination-bullet-active {background: #fff;}
.swiper-button-prev {width: 11px !important; height: 18px; background: url('../img/icon-arrow-prev.svg') no-repeat center center / 100%;}
.swiper-button-next {width: 11px !important; height: 18px; background: url('../img/icon-arrow-next.svg') no-repeat center center / 100%;}
.swiper-button-prev:after, .swiper-button-next:after {display: none;}

/* 서브 배너 전용 스타일 */
.sub-banner .swiper-wrapper {display: flex; align-items: center;}
.sub-banner .swiper-slide { display: flex; justify-content: center; align-items: center; width: auto;}
.sub-banner .swiper-slide img {width: 100%; height: auto; max-width: 2000px; max-height: 250px; object-fit: contain;}
.sub-banner .swiper-pagination-bullet {width: 8px; height: 8px; border: 2px solid #000; background: initial;}
.sub-banner .swiper-pagination-bullet-active {background: #000;}

/* progress bar */
.progress-bar {height: 20px; background: #eeeeee;}
.progress-bar .progress {height: 100%; background: #1b71b8; transition: 0.2s;}

/* table */
table.table-800 {min-width: 800px;}
table.table-1000 {min-width: 1000px;}
table.table-1200 {min-width: 1200px;}
table.table-1400 {min-width: 1400px;}
table.table-1600 {min-width: 1600px;}
.table02 {border-top: 2px solid #4b4b4b;}
.table02 thead {background: #f8f8f8;}
.table02 thead th {color: #222; border: 0;}
.table02 tbody td:first-child {border-left: 0;}
.table02 tbody td:last-child {border-right: 0;}

/*div table*/
.div-table {}
.div-table .tr {display: flex;}
.div-table .th, .div-table .td {padding: 6px 10px;}
.div-table .th {width: 120px; white-space: nowrap;}
.div-table .td {width: calc(100% - 120px);}

/* tab */
.tabs {display: flex; gap: 6px;}
.tabs .tab-btn {width: 100%; font-size: 1.8rem; font-weight: 400; padding: 12px 4px; border: 1px solid #c8c8c8; border-bottom: 0; color: #c8c8c8; background: #fff; border-radius: 10px 10px 0 0;}
.tabs .tab-btn.active {background:#fff; color: #4867d5; border-color: #4867d5}
.tab-content {display: none; padding: 30px 0 80px 0; border-top: 1px solid #ddd;}
.tab-content.active {display: block;}
.tabs2 {display: flex; gap: 6px;}
.tabs2 .tab-btn2 {width: 100%; font-size: 1.8rem; font-weight: 400; padding: 12px 4px; border: 1px solid #c8c8c8; border-bottom: 0; color: #c8c8c8; background: #fff; border-radius: 10px 10px 0 0;}
.tabs2 .tab-btn2.active {background:#4867d5; color: #fff;}
.tab-content2 {display: none; padding: 30px 0;}
.tab-content2.active {display: block;}

/* text box */
.text-box {margin-bottom: 80px;}
.text-box:last-child {margin-bottom: 0;}
.text-title {position: relative; font-size: 2rem; padding-left: 10px; margin-bottom: 10px; font-weight: bold;}
.text-title::before {content:''; width: 3px; height: 18px; position: absolute; top: 3px; left: 0; background: #4867d5;}
.text-deco {margin-top: 8px;}
.text-desc {font-size: 1.4rem;}
.text-box ul {}
.main-text-box .text-title {color: #4867d5;}
.main-text-box table thead th {background: #4867d5; color:#fff;} 

/* button group */
.button-group {display: flex; align-items: center; justify-content: center; gap: 10px;}
/*.button-group button {min-width: 100px; border-radius: 5px;}*/
.button-group button {min-width: 75px; border-radius: 5px;}
/* 게시판 */
.board-box {}
.board-box li {}
.board-box li, .board-box li a {width: 100%; display: flex; align-items: center;}
.board-box li a p {font-size: 1.7rem; line-height: 2;}
.board-box li a p.content {width: calc(100% - 130px); white-space: nowrap; word-break: break-all; text-overflow: ellipsis; overflow: hidden;}
.board-box li a p.date {text-align: right; margin-left: auto;}


/* 검색 박스 */
.search-box {width: 600px; border-bottom: 2px solid #1b2446; position: relative;}
.search-box input {width: 100%; padding: 10px 0; border: 0;}
.search-box button {position: absolute; top:50%; right: 0; transform: translateY(-50%); border: 0;}
.sub-search-box {display: flex; align-items: center;}
.sub-search-box p {font-size: 1.4rem; margin-right: 10px; white-space: nowrap;}
.sub-search-box input {max-width: 200px; height: 30px; border-radius: 0;}
.sub-search-box button {width: 60px; height: 30px; border-radius: 0; font-size: 1.4rem;}


/* 라디오 */
.radio-box {display: flex; align-items: center; gap: 14px;}
.radio-box label {display: flex; align-items: center; gap: 4px; cursor: pointer;}
.radio-box input[type="radio"] {position: relative; border: 1px solid #bfbfbf; border-radius: 50%; width: 16px; height: 16px; appearance: none; }
.radio-box input[type="radio"]:checked::after {content:''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; width: 9px; height: 9px; background: #2c2c2c;}



/* list box */
/* 썸네일 리스트 */
.thumbnail-group {gap: 20px; flex-wrap: wrap;}
.thumbnail-group li {margin-bottom: 40px; padding: 10px; border: 1px solid #bbbbbb;}
.thumbnail-group li.impossible-lecture {position: relative;}
/*
.thumbnail-group li.impossible-lecture::before {content:'불가'; position: absolute; top: -20px; left: 0; font-size: 12px; background: #e72250; color: #fff; padding: 0 20px; border-radius: 4px 4px 0 0;}
*/
.thumbnail-group li .img-box {margin-bottom: 10px;}
.thumbnail-group li .img-box img {width: 100%; height: 162px;}
.thumbnail-group li .text-box {}
.thumbnail-group li .text-box .title {height: 52px; font-weight: 500;}
.thumbnail-group li .text-box p {font-size: 1.4rem; margin-bottom: 10px;}
.thumbnail-group li .text-box button {width: 50%; padding: 6px 10px;}

/* 썸네일 리스트 - 3칸 */
.thumbnail-group-3 li {width: calc((100% - 40px) / 3); }

/* 썸네일 리스트 - 4칸 */
.thumbnail-group-4 li {width: calc((100% - 60px) / 4);}


.list-group {border-top: 1px solid #bbb; border-bottom: 1px solid #bbbbbb;}
.list-group li {padding: 20px 0;}
.list-group li:not(:last-child) {border-bottom: 1px solid #bbb;}
.list-group li .text-box {margin-bottom: 0;}
.list-group li .text-box .apply-label {display: inline-block; margin-bottom: 10px; font-size: 1.4rem; border-radius: 5px;}
.list-group li .text-box a {font-size: 1.8rem; margin-bottom: 10px;}
.list-group li .text-box .desc {gap: 20px;}
.list-group li .text-box .desc label {padding: 4px 8px; margin-right: 10px; border-radius: 5px;}
.list-group li .text-box .desc p {}
.list-group li .button-group {flex-direction: column; gap: 10px; margin-left: auto;}
.list-group li .button-group button {width: 160px;}

.subnote-list-group {border-top: 1px solid #bbb; border-bottom: 1px solid #bbbbbb;}
.subnote-list-group li {padding: 20px 0;}
.subnote-list-group li:not(:last-child) {border-bottom: 1px solid #bbb;}
.subnote-list-group li .text-box {display: flex; align-items: center; margin-bottom: 0; gap: 10px;}
.subnote-list-group li .text-box .apply-label {display: inline-block; margin-bottom: 10px; font-size: 1.4rem; border-radius: 5px;}
.subnote-list-group li .text-box a {font-size: 1.8rem; margin-bottom: 0px;}
.subnote-list-group li .text-box .desc {gap: 20px;}
.subnote-list-group li .text-box .desc label {padding: 4px 8px; margin-right: 10px; border-radius: 5px;}
.subnote-list-group li .text-box .desc p {}
.subnote-list-group li .button-group {flex-direction: column; gap: 10px; margin-left: auto;}
.subnote-list-group li .button-group button {width: 160px;}


@media (max-width:1200px) {
    main {min-height: calc(100vh - 73px);}
    .pc-img {display: none;}
    .mobile-img {display: block;}
    .mobile-img2 {display: block;}
}

@media (max-width:800px) {
    main {min-height: calc(100vh - 70px); padding: 30px 0;}

    .pc {display: none;}
    .mobile {display: block;}
    .pc-img {display: none;}
    .mobile-img {display: block;}
    .mobile-img2 {display: block;}

    .board-box li a p {}

    .col02 {gap: 40px;}
    .col02 > * {width: 100%;}

    .btn-more {padding: 8px;}

    .page-title {font-size: 2rem;}
    .text-title {font-size: 1.8rem;}

    .tabs .tab-btn {font-size: 1.4rem; padding: 10px 4px;}

    .title-box {margin-bottom: 10px;}
    .title-box h2 {font-size: 2rem;}
    .title-box a {font-size: 1.5rem;}
    .title-box h2 span {font-size: 1.4rem;}

    .select-box .option-box {width: 100%; right: 0;}
    .select-box .option-box li {font-size: 1.4rem; text-overflow: ellipsis; overflow: hidden;}

    .div-table .th, .div-table .td {padding: 6px 4px;} 
    .div-table .th {width: 100px; white-space: nowrap;}
    .div-table .td {width: calc(100% - 100px);}
	.thumbnail-group li .img-box img {width: 100%; height: 200px;}
    .thumbnail-group-3 li, .thumbnail-group-4 li {width: calc((100% - 20px) / 2);}
    .list-group li {flex-wrap:wrap; gap: 20px;}
    .list-group li > div {width: 100%;}
    .list-group li .text-box .desc {flex-direction: column; gap: 4px; align-items: flex-start;}
    .list-group li .button-group {flex-direction: row; justify-content: flex-start;}
    .list-group li .button-group button {flex: 1;}
    
    .subnote-list-group li {flex-wrap:wrap; gap: 20px;}
    .subnote-list-group li > div {width: 100%;}
    .subnote-list-group li .text-box .desc {flex-direction: column; gap: 4px; align-items: flex-start;}
    .subnote-list-group li .button-group {flex-direction: row; justify-content: flex-start;}
    .subnote-list-group li .button-group button {flex: 1;}

    .tab-content, .tab-content2 {padding: 20px 0;}

    .mobile-table {width: 100%; text-align: left; display: table; border-top: 2px solid #4b4b4b; table-layout: fixed;}
    .mobile-table:not(:last-child) {margin-bottom: 20px;}
    .mobile-table tbody th {color: #222; background: #f8f8f8;}

    .mobile-table.list  {border-top: 0; table-layout: fixed;}
    .mobile-table.list tbody th {background: #474747; color: #fff; text-align: center;}
    .mobile-table.list tbody th.bg-main {background: #4867d5;}
    
}

@media (max-width:500px) {
    .thumbnail-group {gap: 0;}
    .thumbnail-group li {width: 100%; margin-bottom: 30px;}
}

/*===========================================================================
    HEADER
============================================================================*/
header {z-index:1000; position:relative; top:0; width:100%; background:#fff; box-shadow: 2px 0 8px rgba(0,0,0,0.05);}
header .container {height:100%;}
header .pc-header {display: block;}
header .mobile-header {display: none;}
header .top {position: relative; padding: 50px 0; border-bottom: 1px solid #e6e6e6; }
header .top .container {justify-content: space-between;}
header .top .logo {}
header .top .logo img {height: 40px;}
header .search-box {width: 620px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
header .search-box input {width: 100%;}
header .button-group.log-out a, header .button-group a.class-btn {line-height: 1; padding: 10px;}
header .button-group.log-in {}
header .button-group.log-in .logout-btn {position: relative; padding-right: 10px;}
header .button-group.log-in .logout-btn::after {content:''; position: absolute; top: 50%; right: 0; width: 1px; height: 14px; background: #fff; transform: translateY(-50%);}
header nav .depth01 {display: flex;}
header nav .depth01 > li {position: relative; flex: 1;}
header nav .depth01 > li > a {font-size: 1.8rem; padding: 28px 4px; line-height: 1; font-weight: 600; text-align: center;}
header nav .depth01 > li.active .depth02 {display: block;}
header nav .depth02 {display: none; z-index: 900; position: absolute; top:100%; left:0; width: 100%;}
header nav .depth02 a {padding: 10px 4px; text-align: center;}
header nav .depth02 a:hover {color: #000; font-weight: 500;}
header nav .depth02.active {display: block;}
header nav {position: relative;}
header nav .sub-menu-bg {display: none; z-index: 800; position: absolute; top: 100%; left: 0; width: 100%; height: 320px; padding: 20px 0; background: #fff; box-shadow: 2px 0 8px rgba(0,0,0,0.05);}
header nav .sub-menu-bg.active {display: block;}

@media (max-width:1200px) {
    header {padding: 18px 0;}
    header img {width: 100%;}
    header .pc-header {display: none;}
    header .mobile-header {display: block;}
    header .container {justify-content: flex-start;}
    header .menu-btn {width: 24px; margin-right: 20px; padding: 0;}
    header .logo {width: 160px;}
    header .search-btn {margin-left: auto; padding: 0;}

    .mobile-menu {z-index: 2000; position: fixed; top: 0; left: -100%; width: 100%; height: 100%; transition: 0.25s;}
    .mobile-menu.active {left: 0;}
    .mobile-menu.active .bg {display: block;}
    .mobile-menu .bg {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.25);}
    .menu {position: absolute; top: 0; left: 0; width: 90%; height: 100%; padding: 20px; background: #fff;}
    .menu .menu-header {display: flex; justify-content: flex-end; margin-bottom: 40px;}
    .menu .menu-body {height: calc(100% - 94px); overflow-y: auto;}
    .menu .menu-footer {position: absolute; top: 0; padding-top: 16px;}
    .menu .close-btn {width: 26px; padding: 0;}
    .menu .button-group {justify-content: flex-start;}
    .menu .button-group .cart-btn {width: 24px;}
    .menu nav {}
    .menu nav .depth01 {display: block;}
    .menu nav .depth01 > li {margin-bottom: 20px;}
    .menu nav .depth01 > li > a, .menu nav .depth01 > li > p {font-size: 2rem; padding: 0; text-align: left; font-weight: 600; cursor: pointer;}
    .menu nav .depth02 {z-index: 1; margin-top: 10px; position: static;}
    .menu nav .depth02 > li a {font-size: 1.8rem; text-align: left; padding: 0 14px; margin-bottom: 10px;}

    .search-modal {display: none; z-index: 1000; position: absolute; top: 100%; left: 0; width: 100%; padding: 14px 60px; background: #fff;}
    .search-modal.active {display: block;}
    .search-modal .search-box {position: static; width: 100%; max-width: 800px; margin: 0 auto; transform: initial; display: flex; align-items: center; justify-content: space-between;}
    .search-modal .search-box input {width: calc(100% - 30px);}
    .search-modal .search-box button {position: static; margin-left: 6px; transform: initial;}
}

@media (max-width:800px) {
    header .logo {width: 120px; display: block; margin: 0 auto;}
    .search-modal {padding: 14px 24px;}
}


/*===========================================================================
    모달 상세 css
============================================================================*/
.payment-detail-wrap .modal-body .form-group {display: flex; justify-content: space-between; margin-bottom: 1%;}
.payment-detail-wrap .modal-body .form-group label {}
.payment-detail-wrap .modal-body .form-group input {width: 80%;}
.payment-detail-wrap .modal-body .form-group select {width: 80%;}
.payment-detail-wrap .modal-body .btn-group {display: flex; justify-content: flex-end;}
.payment-detail-wrap .modal-body .btn-group button {padding: 1% 4%;}
.payment-detail-wrap .modal-body .btn-group button:first-child {margin-right: 1%;}



/*===========================================================================
    FOOTER
============================================================================*/
footer {}
footer .footer-link {padding: 22px 0; background: #434343;}
footer .footer-link .container { display: flex; align-items: center;}
footer .footer-link a {font-weight: 400; color: #fff;}
footer .footer-link a:not(:last-child) {margin-right: 30px;}
footer .bottom {background:#f0f0f0; padding: 50px 0;}
footer .bottom .container {gap: 60px;}
footer .logo {height: 40px;}
footer .info-box {}
footer .info-box p {}
footer .info-box p span {position: relative; color: #5a5a5a;}
footer .info-box p span:not(:last-child) {padding-right: 10px; margin-right: 10px;}
footer .info-box p span:not(:last-child)::after {content:''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 2px; height: 14px; background: #5a5a5a;}
footer .info-box p.copyright {font-size: 1.4rem; margin-top: 20px; font-weight: 300;}
@media (max-width:1200px) {

}

@media (max-width:800px) {
    footer .footer-link {padding: 16px 0;}
    footer .footer-link a {font-size: 1.4rem;}
    footer .footer-link a:not(:last-child) {margin-right: 14px;}
    footer .bottom {padding: 30px 0;}
    footer .bottom .container {gap: 20px; flex-direction: column-reverse;}
    footer .info-box p span {display: block; font-size: 1.4rem;}
    footer .info-box p span::after {display: none;}
    footer .logo {width: 160px;}
}


/*===========================================================================
    모달
============================================================================*/
.modal-wrap {display: none; z-index: 4000; position: fixed; top: 0; left: 0; width: 100%; height: 100%;}
.modal-wrap.active {display: block;}
.modal-bg {position: absolute; width: 100vw; height: 100vh; background: rgba(0,0,0,.25);}
.modal {width: 800px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid #c8c8c8; border-radius: 10px; background: #fff; max-height: 90%; display: flex; flex-direction: column;}
.modal .modal-head {display: flex; align-items: center; justify-content: space-between; padding:10px 20px; border-bottom: 1px solid #c8c8c8;}
.modal .modal-head h3 {font-size: 1.8rem;}
.modal .modal-head .close-btn {width: 20px; border: 0; padding: 0; background: initial;}
.modal .modal-head .close-btn img {width: 100%;}
.modal .modal-body {padding: 2rem; overflow-y: auto; flex: 1;}
.modal .text-title {font-size: 1.8rem;}
.modal-certificates {width: 75%; max-width:800px; height: 90%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid #c8c8c8; border-radius: 10px; background: #fff; overflow-y: auto;}
@media (max-width:1200px) {
    
}

@media (max-width:1000px) {
    .modal {width: calc(100% - 40px);}
}

@media (max-width:800px) {
    
}


/*===========================================================================
	페이지네이션
============================================================================*/
.pagination-box {justify-content: center; margin-top: 54px;}
.pagination-box img {display: block;}
.pagination-box .prev-first {}
.pagination-box .prev {}
.pagination-box .next {}
.pagination-box .next-last {}
.pagination-box .num {width: 28px; height: 28px; font-size: 1.6rem; color: #999; display: flex; align-items: center; justify-content: center;}
.pagination-box .num:hover {color:#222;}
.pagination-box a:not(:last-child) {margin-right: 4px;}
.pagination-box .num.active {background: #4867d5; color: #fff; border-radius: 6px;}


/*===========================================================================
    사이드 메뉴
============================================================================*/

#quickMenu{position:fixed;right:0;top:34%;width:190px;height:424px;height:auto;background:#fff;border:1px solid #e3e8f6; z-index:70;padding-top:50px;padding-bottom:18px;padding-left:35px;border-top-left-radius:5px;border-bottom-left-radius:5px;transition: all .7s ease}

#quickMenu{right:-142px;padding-left:10px;border-top-left-radius:20px;border-bottom-left-radius:20px;}
#quickMenu ul li{margin-bottom:22px;}
#quickMenu.open{right:0;padding-left:35px;border-top-left-radius:20px;border-bottom-left-radius:20px;transition: all .7s ease}
.ico_q{height:30px;padding-left:40px;font-size:15px;color:#85898f;line-height:28px;}
.ico_q1{background:url(/static/site/img/ico_q1.png) no-repeat 0 50%;}
.ico_q2{background:url(/static/site/img/ico_q2.png) no-repeat 0 50%;}
.ico_q3{background:url(/static/site/img/ico_q3.png) no-repeat 0 50%;}

.btn_q{width:21px;height:46px;position:absolute;top:50%;margin-top:-27px;left:-14px;z-index:45;padding:0;background:url(/static/site/img/bg_arr_quick.png) no-repeat 0 0;}
.btn_q::after{content:'';display:inline-block;background:url(/static/site/img/arr_quick.png) no-repeat 0 0;width:5px;height:8px;position:absolute;top:20px;left:8px;}
.btn_q.open::after{-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);transform:rotate(180deg);}

.side-menu {z-index: 2000; position: fixed; top: 60%; right: 0; width: 130px; height:0;}

.recently-menu {margin-top: 20px; width: 100%; background: #fff;}
.recently-menu .title {font-size: 1.6rem; color: #fff; padding: 4px 10px; background: #4e4e4e; font-weight: 400; text-align: center;}
.recently-menu ul {border: 1px solid #e6e6e6;}
.recently-menu ul li {padding: 10px; border-bottom: 1px solid #e6e6e6;}
.recently-menu ul li:last-child {border-bottom: 0;}
.recently-menu ul li img {width: 100%; height: 65px;}

@media (max-width:1200px) {
    .side-menu {display: none;}
}

@media (max-width:800px) {

}

/* 본인확인 */
.ipin-box {  display: flex; justify-content: space-between; margin:20px auto 20px auto; padding: 20px; background-color:#f7f7f7;}
.ipin-box ul {border-right: 1px solid #cbcbcb;}
.ipin-box ul:last-child {border:0; padding-left: 20px;}
.ipin-box ul li {}
.ipin-box .first-line {padding-right: 20px;}
.ipin-box ul .ipin-info {font-size:1.0em;text-align:left;}
.ipin-box ul .ipin-info span {font-weight:bold;color:#f6522b;}
.ipintitle {font-size:1.2em;font-weight:bold;color: #333;}
.ipin-box ul li button {margin-top: 10px;}

/* 본인확인 */
.complete-box {clear:both;width:430px;margin:50px auto 20px auto;padding:0;background-color:#f7f7f7;text-align:center;min-height:170px;border-radius:8px; -webkit-border-radius:8px;}
.complete-box ul {height:340px;margin:15px auto 15px auto;background:url('/images/T0000002/joincomimg.jpg') no-repeat 44px 112px;}
.complete-box ul li {padding-top:20px;}
.completement {height:190px;}

.ul-accodian {
    display: none; /* 초기에는 숨김 상태로 설정 */
    transition: height 1s ease; /* 높이에 대한 트랜지션 효과 */
    overflow: hidden; /* 내용이 넘칠 경우를 대비하여 overflow를 hidden으로 설정 */
}


.ul-accodian.active {
    display: block; /* 활성화될 때 보이도록 설정 */
}

/*===========================================================================
    마우스 오버 
============================================================================*/
.tooltip {position: relative; display: inline-block; cursor: pointer;margin: 0 20px;}
.tooltip::after {content: attr(data-tooltip); position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%); background-color: black; color: white; padding: 5px 10px; border-radius: 5px; white-space: nowrap; z-index: 1; opacity: 0; visibility: hidden; transition: opacity 0.3s; font-size: 12px;}
.tooltip:hover::after {opacity: 1;visibility: visible;}