@charset "utf-8";

/* 
* content CSS Document
* KOWEB
*/

/* 메인페이지 */
.main_h4 {font-size: var(--fs18); font-weight: 700;}
.blue {color: #004098;}
.mainVis {width: 100%; height: 400rem; display: flex; justify-content: space-between; padding-top: 30rem;}
/* 메인 - 비주얼 */
.main_img {position: relative; width: calc(100% - 405rem); height: 100%; background: #f8eee2 url(/images/main/main_visual.png) no-repeat; background-position: right 50rem center; background-size: 330rem; border-radius: 10rem; display: flex; align-items: center; padding: 0 50rem; overflow: hidden;}
.main_img .visual_text span {display: block; font-weight: 500; margin-bottom: 12rem;}
.main_img .visual_text h2 {font-size: 32rem; line-height: 1.4; letter-spacing: -0.2rem; font-weight:700;}

/* 메인 - 로그인 */
.main_login {width: 364px; height: 100%; border: 1rem solid #e0e6eb; border-radius: 10rem; overflow: hidden; margin-left: 20rem;}
.main_login .login_info {height: 60rem; line-height: 60rem; padding: 0 30rem; font-size: 17rem; background: #e7f1fa;}
.main_login .login_info strong {font-weight: 500;}
.main_login .login_box {display: flex; justify-content: center; flex-direction: column; height: 290rem; padding: 30rem; box-sizing: border-box;}
.main_login .login_class > * {margin-bottom: 15rem;}
.main_login .login_class p {font-size: var(--fs18); font-weight: 700; text-align: center;}
.main_login .login_class .date {display: flex; justify-content: space-between; align-items: center; color: #555; text-align: center;}
.main_login .login_class .date img {height: 12rem; opacity: 0.5;}
.main_login .login_class .date .prev {transform: scaleX(-1);}
.main_login .login_class .class_bar {position: relative; display: block; width: 100%;height: 20rem; border-radius: 30rem; background: #eee; overflow: hidden;}
.main_login .login_class .class_bar.on::before {content: ''; position: absolute; top: 0;left: 0; width: 60%; height: 100%; background: linear-gradient(#3e96f0, #0273e6);}
.main_login .login_class .time {color: #555;}
.main_login .login_btn {display: block; width: 100%; padding: 12rem 0; box-sizing: border-box; border-radius: 4rem; background: #000; text-align: center; color: #fff; margin-bottom: 20rem;}
.main_login .login_menu {display: flex; justify-content: center; align-items: center; font-size: 15rem; color: #888;}
.main_login .login_menu li {position: relative; padding: 0 15rem; box-sizing: border-box;}
.main_login .login_menu li:not(:first-child):before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 1px; height: 50%; background: #ccc;}

/* 메인컨테이너 */
.mainBottom {display: flex; justify-content: space-between;}
.mainBottom .bottom_Left {width: calc(100% - 405rem);}
.mainBottom .bottom_Right {width: 364px; margin-left: 20rem;}

/* 메인 - 퀵메뉴 */
.main_quick .quickList {display: grid; grid-template-columns: repeat(8,1fr); padding: 35rem 0; box-sizing: border-box; }
.main_quick .quickList li a {display: block; display: flex; gap: 12rem; flex-direction: column; align-items: center;}
.main_quick .quickList li a.onlile .icon {border:2px solid #004098;}
.main_quick .quickList li a.onlile span {font-weight:bold;}
.main_quick .quickList .icon {width: 74rem; height: 74rem; background: #f3f6f9; border-radius: 6rem; display: flex; align-items: center; justify-content: center; /*box-shadow: 0 0 15rem rgba(0, 0, 0, 0.15);*/}
.main_quick .quickList img {max-width: 39rem;}
.main_quick .quickList span {display: block; font-size: 15rem; color: #555;}

/* 메인 - 커뮤니티 */
.main_community {position: relative; padding:35rem 40rem; box-sizing: border-box; border: 1rem solid #e0e6eb; border-radius: 10rem;}
.tabMenu {display: flex; align-items: center; padding-bottom: 25rem; border-bottom: 1rem solid #e0e6eb;}
.tabMenu li {position: relative; font-size: var(--fs20); font-weight: 700; color: #ccc; cursor: pointer;}
.tabMenu li:last-child {padding-left: 18rem; margin-left: 18rem;}
.tabMenu li:last-child::before {position: absolute; top:50%; left: 0; transform: translateY(-50%); content: ''; width: 5rem; height: 5rem; background: #ccc; border-radius: 50%;}
.tabMenu li.on {color: #111;}
.tab_list .tabCon {overflow: hidden; visibility: hidden; height: 0;}
.tab_list .tabCon.on {overflow: visible; visibility: visible; height: 100%;}
.tabCon .community_list {}
.tabCon .community_list li {padding: 25rem 0; box-sizing: border-box;}
.tabCon .community_list li:last-child {padding-bottom: 0;}
.tabCon .community_list li + li {border-top: 1rem dotted #ccc;}
.tabCon .community_list li dt.title {font-weight: 600; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis;}
.tabCon .community_list li dd {display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis;}
.tabCon .community_list li a {display: flex; align-items: center; justify-content: space-between; }
.tabCon .community_list li p {min-width: 82rem; font-size: 15rem; color: #888; text-align: right;}
.tabCon .community_list li.on a {gap: 20rem; justify-content: flex-start;}
.tabCon .community_list li.on a dl {max-width: 670rem;}
.tabCon .community_list li.on .date {display: flex; align-items: center; justify-content: center; flex-direction: column; min-width: 78rem; width: 78rem; height: 78rem; border-radius: 5rem; background: #f5f5f5; text-align: center;}
.tabCon .community_list li.on .date .day {font-size: 28rem; color: #555; font-weight: 800; line-height: 1;}
.tabCon .community_list li.on .date .year {font-size: 13rem; font-weight: 600; color: #555;}
.main_community .more_btn {position: absolute; top: 39rem; right: 40rem; display: flex; gap: 10rem; align-items: center; font-size: 15rem; color: #888;}
.main_community .more_btn img {height: 10rem; opacity: 0.5;}

/* 메인 - 배너 */
.main_banner {display: flex; gap: 25rem; align-items: center; margin-top: 25rem;}
.main_banner > div {padding: 30rem 25rem; box-sizing: border-box; border-radius: 10rem; height: 240rem;}
.main_banner .title {display: flex; align-items: center; justify-content: space-between; padding-bottom: 15rem; margin-bottom: 20rem; border-bottom: 1rem solid #ccc;}
.main_banner .title a {display: block; min-width: 24rem; text-align: right;}
.main_banner .title p {font-size: var(--fs18); font-weight: 600; }
.main_banner .title img {width: 7rem;}
.main_banner .list {display: grid; gap: 20rem 10rem; grid-template-columns: repeat(4,1fr);  color: #888;}
.main_banner .list li {position: relative; padding-left: 10rem;}
.main_banner .list li::before {content: ''; position: absolute; top: 10rem; left: 0; width: 3rem; height: 3rem; background: #888;}
.main_banner .list li a:hover {color: #111; text-decoration: underline;}
.main_banner .job_menu {flex: 1 50%; background: #ecf6ff;}
.main_banner .job_menu .list {grid-template-columns: repeat(4,1fr);}
.main_banner .etc_menu {flex: 1 50%; background: #fff9e6;}
.main_banner .etc_menu .list {grid-template-columns: repeat(2,1fr);}

/* 메인 - 수강과정*/
.class_list .main_h4 {text-align: center; margin-bottom: 20rem;}
.class_list > div {min-height: 130rem; padding: 20rem 30rem; box-sizing: border-box; border: 1rem solid #e0e6eb; border-radius: 12rem; margin-top:18rem;}
.class_list .list li {position: relative; font-size: 15rem; color: #555; padding-left: 10rem;}
.class_list .list li + li {margin-top: 10rem;}
.class_list .list li::before {content: ''; position: absolute; top: 10rem; left: 0; width: 3rem; height: 3rem; background: #ccc;}

/* 메인 - 스마트러닝 학습과정 */
.smart_box {padding: 30rem; box-sizing: border-box; border: 1rem solid #e0e6eb; border-radius: 10rem; margin-top: 18rem; text-align: center;}
.smart_box .list {display: grid; grid-template-columns: repeat(3,1fr);gap: 20rem 10rem; margin-top: 25rem;}
.smart_box .list li a {display: flex; gap: 10rem; flex-direction: column; align-items: center;}
.smart_box .list li .icon {width: 72rem; height: 72rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #f3f6f9;}
.smart_box .list li img {max-width: 38rem;}
.smart_box .list li span {display: block; font-size: 14rem; color: #555;}

@media(max-width:1279px){
	.mainVis {flex-wrap: wrap; gap: 30rem; height: auto;}
	.main_img {width: 100%; height: 400rem;} 
	.main_img .visual_text h2 {font-size: 28rem;}
	/* 컨텐츠 */
	.main_community {padding: 30rem;}
	.main_community .more_btn {gap: 8rem; top: 35rem; right: 30rem;}
	.mainBottom {position: relative;}
	.main_quick .quickList {grid-template-columns: repeat(4,1fr); gap: 20rem 0;}
	.main_login {width: calc(100% - 400rem); height: 360rem; margin-left: 0;}
	.main_banner {flex-wrap: wrap; gap: 20rem;}
	.main_banner .job_menu {flex:1 100%;}
	.main_banner .etc_menu {flex:1 100%;}
	.mainBottom .bottom_Right {width: 375rem; position: absolute; top: -360rem; right: 0; margin-left: 0;}
	.class_list > div:first-child {margin-top: 0;}
}
@media(max-width:767px){
	.mainVis {padding-top: 20rem; gap: 20rem;}
	.main_img {height: 350rem; padding: 0 25rem; background-size: 200rem; background-position: right 20rem bottom 20rem;}
	.main_img .visual_text h2 {font-size: 20rem;}
	.main_img .visual_text span {margin-bottom: 10rem;}
	.main_login {width: 100%; height: 100%;}
	.main_login .login_box {height: 100%;}
	.main_login .login_info {height: 50rem; line-height: 50rem; padding: 0 20rem;}
	.main_quick .quickList {padding: 30rem 0;}
	.mainBottom {flex-direction: column;}
	.mainBottom .bottom_Left {width: 100%;}
	.mainBottom .bottom_Right {position: static; width: 100%;}
	.main_community {padding: 25rem;}
	.main_community .more_btn {top: 29rem; right: 25rem;}
	.main_banner {gap: 18rem; margin-top: 18rem;}
	.class_list > div {margin-top: 18rem;}
	.class_list > div:first-child {margin-top: 18rem;}
}

/* common content */
#content{ min-height:300px; padding: 100rem 0; }
.sub_title{ margin-bottom: 3.75em;}
.sub_title:has(~ .oc){ display: none; }
.sub_title h2{ text-align:center; font-size:var(--fs35); }

/* online contents */
.oc{ display: grid; gap: 20rem; }
.sideMenu{ border: 1px solid #444; padding: 32rem 15rem 29rem; background: #fff; }
.sideMenu__h2{ text-align: center; font-size: var(--fs24); }
[class*="sideMenu__lv"]{ overflow: hidden; }
[class*="sideMenu__lv"] > li{ position: relative; }

/* 1, 2차 공통 */
.sideMenu__btn{ position: absolute; top: 0; right: -1.5rem; width: 30rem; height: 30rem; }
.sideMenu__btn.lv2{ top: -3rem; }
.sideMenu__btn::before{ content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(45deg); width: 7rem; height: 7rem; border: solid currentColor; border-width: 0 1px 1px 0; }
.active + .sideMenu__btn::before{ transform: translate(-50%,-50%) rotate(225deg); }

.sideMenu__a:not(.active) ~ [class*="sideMenu__lv"]{ margin: 0; height: 0; padding: 0; border-width: 0; visibility: hidden; }
.sideMenu__lv1{ margin-top: 23rem; }
.sideMenu__a.lv1{ margin: 0; display: block; padding: 2rem 30rem 2rem 0; font-size: 16rem; }
.sideMenu__lv2{ margin-top: 14rem; border-top: 1px solid #e0e6eb; padding: 18rem 0 12rem; }
.sideMenu__lv2 > li + li{ margin-top: 14rem; }
.sideMenu__a.lv2{ display: flex; align-items: center; font-size: 16rem; }
.sideMenu__a.lv2::before{ content: ''; margin: 0 10rem 0 0; display: inline-block; width: 1em; height: 1em; font-size: 18rem; background: url('/images/board/chkbx.png') no-repeat 50% / contain; }
.sideMenu__a.lv2.active::before{ background-image: url('/images/board/chkbx-checked.png'); }
.sideMenu__lv3{ padding-top: 18rem; }
.sideMenu__lv3 > li + li{ margin-top: 6rem; }
.sideMenu__a.lv3{ font-size: 15rem; }
.sideMenu__a.lv3:not(.active){ color: #888; }
.sideMenu__a.lv3::before{ content: '- '; }
.oc__title{ margin-bottom: calc(var(--fs32) * 1.21875 ); border-bottom: 1px solid #444; display: flex; align-items: baseline; justify-content: space-between; padding-bottom: calc(var(--fs32) * .9375 ); }
.oc__h3{ font-size: var(--fs32); }
.breadcrumb{ display: flex; font-size: 14rem; font-weight: 300; color: #555; align-items: center	; }
/* .breadcrumb{ display: none; } */
.breadcrumb__p:empty{ display: none; }
.breadcrumb__p + p::before{ content: ''; margin: 0 12rem 0 10rem; display: inline-block; width: 3rem; height: 7rem; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }


.breadcrumb >  .breadcrumb__p:first-child::before {
	content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(/images/common/ico_home.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: -4px;
    margin-right: 6px;
}
.sideMenu form button.sideMenu__a {display: flex;gap: 8px;align-items: center;}
.sideMenu form button.sideMenu__a img {width: 25px;padding-bottom: 5px;}

@media(prefers-reduced-motion:no-preference){
	[class*="sideMenu__lv"]{ transition: .4s, border 0s; }
}
@media(min-width:1280px){
	.sideMenu__lv1 > li + li{ margin-top: 14rem; }
	.sideMenu__category{ display: none; }
	.oc{ grid-template-columns: 280rem 1fr; }
	.oc__title{ margin-top: -10rem; }
}
@media(max-width:1279px){
	.sideMenu{ position: fixed; inset: 0; margin: auto auto auto 0; display: flex; flex-direction: column; width: 280rem; height: 100%; z-index: 11; }
	.sideMenu:not(.isOpen){ transform: translateX(-100%); }
	.sideMenu__lv1{ overflow: visible auto; flex: 1; }
	.sideMenu__category{ position: fixed; top: 50%; left: 279rem; transform: translateY(-50%); padding: 15rem 10rem; background: var(--primary); text-transform: uppercase; color: #fff; writing-mode: vertical-lr; }
	@media(prefers-reduced-motion:no-preference){
		.sideMenu{ transition: .4s; }
	}
}

/* adjust 241007 */
@media screen and (max-width: 767px) {
	.search__wrap form:first-child .search_bbs .search {
		display: flex;
		gap: 5px;
	}
	.search__wrap form:first-child .search_bbs .search input[type="text"] {
		width: 180rem;
	}
	.search__wrap form:last-child .search_bbs .search {
		display: flex;
		flex-direction: column;
		margin-left: 10px;
	}
}
@media screen and (max-width: 380px) {
	.search__wrap form:first-child .search_bbs .search input[type="text"] {
		width: 100%;
	}
	.search__wrap form:last-child .search_bbs .search select {
		position: relative;
		width: 100%;
	}
}