@charset "UTF-8";
/*
	Author	: hyojeong yang, somi
	Date	: 2018-11
	Project	: 충청북도중앙도서관 

	pallete : mainColor ( #333; #007296;  )
			  spotColor { #f15a53; #4e6979; #00b9b0; }
			  graphColor ( #da4657; #17b2cc; #213168; #f9a535; #7d2887; #00b9b0;  )
*/

/* -------------------------------------------------
    BTN
------------------------------------------------- */

/* btn : spot */
.btn.spot,
.btn-sm.spot,
.btn-lg.spot { 
	background:#333;
	border:1px solid #333;
	color:#fff;
}

/* btn : spot2 */
.btn.spot2,
.btn-sm.spot2,
.btn-lg.spot2 { 
	border:1px solid #666;
	background-color:#666;
	color:#fff; 
}

/* btn : spot3 */
.btn.spot3,
.btn-sm.spot3,
.btn-lg.spot3 { 
	color:#fff;
	background-color:#007296;
	border:1px solid #007296;
}

/* btn : spot4 */
.btn.spot4,
.btn-sm.spot4,
.btn-lg.spot4  { 
	color:#555;
	background:#eee;
	border:1px solid #ccc;
}

/* -------------------------------------------------
   SITE-Header
------------------------------------------------- */
.site-header h1 {
    background: url('./images/header/logo.svg') no-repeat;
}
.site-header nav { /*background:#ffffff;*/background-image: url('./images/main/cbenav_bg.png'); background-repeat:repeat-x; border-bottom:0px solid #d4d4d4;}
.site-header .util li a strong,
.site-header .site-gnb h2 a,
.site-header .site-gnb ul li a:hover, 
.site-header .site-gnb ul li a:focus { color:#344a95; }

/* -------------------------------------------------
   SITE-FOOTER
------------------------------------------------- */

.footer-site .btn-go {
    background:#004e96;
    color:#fff;
}

/* -------------------------------------------------
   MAIN
------------------------------------------------- */
/* mn-background */
.mn-background1 {
	display:block;
	position:relative;
    background-image: url('./images/main/main_visual_bg.jpg');
    background-repeat:no-repeat;
    background-size:cover;
    padding-bottom:40px;
    height:670px
}

.mn-background2 {
	position:relative;
    background-image: url('./images/main/main_con_bg1.jpg');
    background-repeat:no-repeat;
    background-position:center  top;
}


.mn-background3 {
	position:relative;
	display:block;
    background-image: url('./images/main/main_con_bg2.jpg');
    background-repeat:no-repeat;
    background-position:center top;
}

.mn-background4 {
	position:relative;
	display:block;
    background-image: url('./images/main/main_con_bg3.jpg');
    background-repeat:no-repeat;
    background-position:center top;
}

.mn-background5 {
	position:relative;
	display:block;
    background-image: url('./images/main/main_con_bg4.jpg');
    background-repeat:no-repeat;
    background-position:left top;
}

.mn-background2::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 150px;
        z-index: 1;
        width: 546px;
        height: 634px;
        background-image: url('./images/main/mndate_m_section1.png');
        background-repeat: no-repeat;
        background-position: 50% 50%;
        transform: translate(-100%, -56.67%);
}

.mn-background7 {
	position:relative;
    background-color: #e9f1ff;
}

.mn-background8 {
	position:relative;
    background-color: #053995;
}



/* mn-qmenu */
.mn-qmenu li {
    /*background:#007296;*/
}

/*.mn-qmenu li a:after {
    background-image: url('./images/main/n_qmenu01.svg');
}
.mn-qmenu li:nth-child(2) a:after {
    background-image: url('./images/main/n_qmenu02.svg');
}
.mn-qmenu li:nth-child(3) a:after {
    background-image: url('./images/main/n_qmenu05.svg');
}
.mn-qmenu li:nth-child(4) a:after {
    background-image: url('./images/main/n_qmenu04.svg');
}
.mn-qmenu li:nth-child(5) a:after {
    background-image: url('./images/main/n_qmenu03.png');
}
.mn-qmenu li:nth-child(6) a:after {
    background-image: url('./images/main/n_school.svg');
}*/

/* mn-book & service */
.mn-service li a {
    font-size:14px;
    line-height:1.2em;
    padding-top:20px;
}
.mn-service li a:before {
    margin:0 auto 5px;
    width: 40px;
    height: 40px;
    background: url('./images/main/service01.svg') center no-repeat;
}
.mn-service li:nth-child(2) a:before {
    background-image: url('./images/main/service02.svg');
	width:45px;
}
.mn-service li:nth-child(3) a:before {
    background-image: url('./images/main/service03.svg');
}

.mn-quick-edu a { color:#007296; }
.mn-quick-edu a:before { width:25px;background-image: url('./images/main/qedu01.svg');background-size:30px; }
.mn-quick-edu a + a:before { width:30px;background-image: url('./images/main/qedu02.svg');background-size:30px; }

/* -------------------------------------------------    
	SUB COMMON
------------------------------------------------- */

/* lnb */
.lnb h2 {
	width:270px;
    color: #fff;
    height: 164px;
    line-height:160px;
    background-image: url('./images/main/cbe_log.png');
    background-repeat:no-tepeat;
    border-radius:5px;
    text-align:center;
    vertical-align:middle;
}
/*.lnb h2:before {
    background:#007296;
}*/
.lnb nav > ul > li.active:not(.current) > a{
    color: #007296;
    background-color: #fff;
}
.lnb nav > ul > li.current > a{
    background-color: #455ebc;
    color: #fff;
}
.lnb nav > ul > li li a:hover,
.lnb nav > ul > li li a:focus {
    color:#455ebc;
}
.lnb nav > ul > li li.current a {
    color: #455ebc;
}

.sub_wrap .container #contents .sub_top { 
	/*background:url('./images/main/sub_visual_bg.jpg') right bottom no-repeat;*/
}

/* -------------------------------------------------    
	SUB EDIT	
------------------------------------------------- */

/* icon_style  */
.icon1 { background-image: url('./images/basic/bg_icon1.svg'); }

/* 자유열람실 이용 */
.gra_box2 { overflow:hidden;border:1px solid #cccccc;padding:20px; }
.gra_box2 + .gra_box2 { margin-top:40px; }
.gra_box2 .photo { float:left;width:270px; }
.guide_box { float:left; width:calc(100% - 270px);box-sizing:border-box;padding-left:20px;}
.gra_box2 .photo .btn:after { 
	content:'';
	display:inline-block;
	width:6px;
	height:6px;
	border-top:1px solid #555;
	border-right:1px solid #555;
	transform:rotate(45deg);
	margin-left:10px;
	position:relative;
	left:5px;
}
.gra_box2 .photo .btn.spot:after {
	border-color:#ccc;
}

/* 톡톡 */
.img-row-txt > li {
	overflow:hidden;
	padding-top:30px;
	padding-bottom:30px;
}
.img-row-txt > li + li { 
	border-top:1px dashed #ddd; 
}
.img-row-txt li img {
	float:left;
	margin-top:-10px;
}
.img-row-txt > li img + div {
	float:left;
}
.img-row-txt > li img + div strong {
	display:block;
	margin-bottom:10px;
}

/* 인사말 */
/*.greeting_top:before {
	background:url('./images/sub/greeting_bg.svg') center center no-repeat #fff;
	background-size:72px 52px;
}
.greeting_top em {
	color:#007296;
}*/
.bg-green {
    background:#1da726;
}
.bg-blue {
    background:#168ba4;
}
.bg-yellow {
    background:#e88d16;
}
.bg-red {
    background:#e84816;
}
.fc-green {
    color:#1da726;
}
.fc-blue {
    color:#168ba4;
}
.fc-yellow {
    color:#e88d16;
}
.fc-red {
    color:#e84816;
}
.greeting {
    font-size:16px;
    line-height:1.5em;
}
.greeting-header {
    margin-bottom:40px;
}
.greeting-header figure {
    margin-bottom:20px;
}
.greeting-header figure img {
    margin:0 auto;
    display:block;
    max-width:100%;
}
.greeting-header h3 {
    margin-bottom:10px;
    font-size:18px;
    line-height:1.333em;
}
.greeting-header strong {
    font-weight:700;
}
.greeting-cont h4{
    font-size:20px;
    margin-bottom:15px;

}
.greeting-cont ol {
    margin-bottom:30px;
    padding:30px 0;
    border-top:1px solid #f0f0f0;
    border-bottom:1px solid #f0f0f0;
}
.greeting-cont ol li {
    position:relative;
    padding-left:90px;
}
.greeting-cont ol li ~ li {
    margin-top:30px;
}
.greeting-cont ol li cite {
    position:absolute;
    top:-5px;
    left:0;
    width:80px;
    height:30px;
    line-height:30px;
    border-radius:2em;
    text-align:center;
    color:#fff;
    font-size:14px;
    font-weight:700;
}
.greeting-cont p + p {
    margin-top:30px;
}
.greeting_sign span {
    font-weight:700;
    font-weight:18px;
}

/* 연혁 */
.history-cont table th,
.history-summary em  { color:#007296; }

/* 충북교육의 기본방향 */

/* -------------------------------------------------    
	- PC MAX-WIDHT 1800 	
------------------------------------------------- */
@media screen and (max-width:1800px) {
	.mn-background2::before {
     display:none;
    }
}


/* -------------------------------------------------    
	- PC MAX-WIDHT 1200 	
------------------------------------------------- */
@media screen and (max-width:1200px) {
	.mn-background1 {
	height:520px
	}

}
/* -------------------------------------------------    
	- PC/TABLET MAX-WIDHT 1024	
------------------------------------------------- */
@media screen and (max-width:1024px) {
	.mn-background1 {
	height:420px
	}
	
	.mn-background2 {
    background-position:center  top;
}

}

/* -------------------------------------------------    
	- MOBILE MAX-WIDHT 900 	
------------------------------------------------- */
@media screen and (max-width:900px) {
	.mn-background2 {
    background-position:left  top;
}
.m-site-header h1 {
		background: url('./images/header/logo.svg') no-repeat;		
        background-size: auto 34px;
	}
}

/* -------------------------------------------------    
	- MOBILE MAX-WIDHT 768 	
------------------------------------------------- */
@media screen and (max-width:768px) {

	/* SITE-HEADER */
	.m-site-header h1 {
		background: url('./images/header/logo.svg') no-repeat;		
        background-size: auto 34px;
	}
	.btn-site-nav,
	.m-site-header .site-gnb > li > a > .ui-accordion-header-icon:before, 
	.m-site-header .site-gnb > li > a > .ui-accordion-header-icon:after {
		background:#007296;
	}
	.m-site-header nav li li a:hover,
    .m-site-header nav li li a:focus {
        color: #007296;
    }
}

/* -------------------------------------------------    
	- MOBILE MAX-WIDHT 480	
------------------------------------------------- */
@media screen and (max-width:480px) {
	
	.mn-background1 {
	height:320px
	}

	/* SITE-HEADER */
	.m-site-header h1 {  background-size: auto 30px; }

	/* 자유열람실 이용 */
	.gra_box2 { padding:20px 0; }
	.gra_box2 .photo { 
		float:none;
		width:270px;
		margin:0 auto; 
	}
	.guide_box { 
		float:none; 
		width:100%;
		padding-left:0;
		padding-right:20px;
		margin-top:20px;
	}

    .org_box .org2 + .org3:before  { 
		content:'';
		position:absolute;
		width:calc(50% - 21px);
		height:1px;
		background:#ccc;
		top:-1px;
		left:20px;
	}
    .org_box .org3 > ul:before {
        content:'';
		position:absolute;
		width:1px;
		height:20px;
		background:#ccc;
		top:-1px;
		left:20px;
    }
    .org_box .org2 + .org3:after {
        content:'';
		position:absolute;
		width:1px;
		height:80px;
		background:#ccc;
		top:-80px;
		left:50%;
    }
    .org_box .org3 > ul > li {
		display:block;
		padding-top:20px;
		padding-left:50%;
	}	
	.org_box .org3 > ul > li:before {
		width:20px;
		height:1px;
		left:-20px;
		top:calc(50% + 10px);
	}
	.org_box .org3 > ul > li:first-child:after,
	.org_box .org3 > ul > li:after {
		content:'';
		position:absolute;
		width:1px;
		height:100%;
		background:#ccc;
		left:-20px;
		top:0;
	}
    .org_box .org3 > ul > li:first-child {
        margin-top:0;
    }
    .org_box .org3 > ul > li:before {
        display:none;
    }
    .org_box .org3 > ul > li + li:last-child:after {
		height:calc(50% + 10px);
	}
	.org_box .org3 > ul > li > a,
    .org_box .org3 > ul > li > span { 
		margin:0;
		position:absolute;
		top:20px;
		left:10px;
		width:calc(50% - 10px);
		height:calc(100% - 20px);
	}
	.org_box .org3 > ul > li > a:before,
    .org_box .org3 > ul > li > span:before {
		content:'';
		display:block;
		height:calc(50% - 1.6em);
	}
	.org_box .org3 > ul > li ul li { margin-top:0; }
	.org_box .org3 > ul > li ul li + li { margin-top:10px; }
	.org_box .org3 > ul > li ul li:before { content:none; }
}

/* -------------------------------------------------    
	- MOBILE MAX-WIDHT 375	
------------------------------------------------- */
@media screen and (max-width:375px) {
	.mn-background1 {
	height:270px
	}
}