@charset "utf-8";
@import url('layout.css');

/* [s] all */
.mainContent {
    border-top: 1px solid #C8C8C8;
}
.mainContent:after {display:block; clear:both; content:''}
.titTxt {margin:50px 0 24px}
.titTxt, .titTxt > span {
    font-size:20px;
    line-height:24px;
    font-weight:bold;
    color:#000;
    font-family:'Nanum Square', sans-serif;
    text-align:center;
}
@media screen and (max-width:1016px) {
    .mainContent {padding:0 0 40px}
}
@media screen and (max-width:716px) {
    .mainContent {padding:26px 0 26px;}
    .titTxt {margin:20px 0 10px}
    .titTxt, .titTxt > span {
        font-size:17px;
        line-height:20px;
    }
}
/*-- [e] all */

/* [s] 메인 통합검색 - searchBox */
.searchBox {text-align:center;}
.searchBox .sub {
    font-size:15px;
    margin-top:8px
}
.searchBox > div {display:inline-block; position:relative; margin:24px 0 16px;}
.searchBox input {
    width:540px;
    height:68px;
    line-height:68px;
    border-radius:68px;
    box-shadow:10px 10px 10px #b5b5b5;
    border:none;
    padding:0 105px 0 40px;
    font-size:18px;
}
.searchBox .btnBox {
    position:absolute;
    top:0;
    right:17px;
}
#main_totSearchBtn2 {
	display: inline-block;
	width:36px;
	height:68px;
	background:url('../images/btn/search2_hover.png') no-repeat center center;
	background-size:100% auto;
	text-indent:-9999px;
	vertical-align:top;
}
#main_totSearchBtn3 {
	display: inline-block;
    height:68px;
    line-height:68px;
    vertical-align:top;
}
#main_totSearchBtn3 > span {
	display: inline-block;
	width:38px;
	height:38px;
	line-height:38px;
	border-radius:100%;
	margin-left:0;
	text-align:center;
	color: #fff;
    font-size:13px;
    background-color:#e9771a;

}
#main_totSearchBtn2:hover {background-image:url('../images/btn/search2.png');}
#main_totSearchBtn3:hover > span {background-color:#333;}
.searchBox dl {
	width:435px;
	margin:0 auto;
    text-indent:-105px;
    padding-left:105px;
    box-sizing: content-box;
    text-align:left;
}
.searchBox dt, .searchBox dd {display:inline-block;}
.searchBox dt {width:102px; padding-right:18px; text-indent:0;}
.searchBox dt span {
    display:inline-block;
    width:100%;
    height:23px;
    line-height:23px;
    border-radius:23px;
    text-align:center;
    color:#fff;
    font-size:12px;
    background-color:#666;
}
.searchBox dd {padding:2px; text-indent:0;}
.searchBox dd a {text-decoration:underline; color:#666;}
@media screen and (max-width:716px) {
    .searchBox {padding:0 15px}
    .searchBox .tit {padding:0 27%}
    .searchBox .sub {
        font-size:14px;
        margin-top:5px
    }
    .searchBox > div {display:block; margin:10px 0;}
    .searchBox input {
        width:100%;
        height:38px;
        line-height:38px;
        border-radius:38px;
        box-shadow:5px 5px 5px #b5b5b5;
        padding:0 70px 0 20px;
        font-size:15px;
    }
    .searchBox .btnBox {right:4px;}
    #main_totSearchBtn2 {
        width:30px;
        height:38px;
        margin-left:-75px;
    }
    #main_totSearchBtn3 {height:38px; line-height:38px;}
    #main_totSearchBtn3 > span {
        width:31px;
        height:31px;
        line-height:31px;
        font-size:13px;
    }
    .searchBox dl {
        text-indent:-78px;
        padding-left:78px;
		width:82%;
    }
    .searchBox dt {width:76px; padding-right:6px;}
    .searchBox dt span {
        height:19px;
        line-height:19px;
        border-radius:19px;
    }
    .searchBox dd {padding:1px;}
}
/*-- [e] 메인 통합검색 - searchBox */

/* [s] 메인 비주얼 - collectionBox */
.collectionBox {position:relative; margin-top:44px !important}
.collectionBox .slick-slider {position: static;}
.collectionBox .slick-slider .collectionCont {position:relative}
.collectionBox .slick-slider .img {height:265px}
.collectionBox .slick-slider .img{position:relative}
.collectionBox .slick-slider .img + div {
	position:absolute;
	left:75px;
	width:260px;
	top:10%;
    z-index: 1;
}
.collectionBox .slick-slider p.tit span{
	color:#fff;
	font-size:12px;
	display:block;
	padding-bottom:5px;
}
.collectionBox .slick-slider p.tit {
	font-size:26px;
	line-height:28px;
	color:#fff;
	font-family:'BareunBatang';
	text-shadow:#000 1px 2px;
	padding:20px 0;
}
.collectionBox .slick-slider p.cont {
	font-size:14px;
	margin-bottom:20px;
	color:#cccccc;
	overflow : hidden;
	height:36px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width:100%;
}
.collectionBox .slick-slider a {
	width:90px;
	display:block;
	height:30px;
	line-height:28px;
	color:#233e05;
	background-color:#719a42;
	font-size:13px;
	text-align:center;
}
.collectionBox .slick-slider a:hover {background-color:#233e05;color:#fff;}
.collectionBox .slick-slider .collectionCont:after{
	position:absolute;
	left:0;
	top:0;
	content:'';
	display:block;
	background:url('../images/main/collectionBoxbg.png') right 0 no-repeat;
	width:517px;
	height:265px;
}
.collectionBox .slick-dots {
    position:absolute;
    left:75px;
    bottom:33px;
    padding:2px 14px 2px 26px;
    text-align:center;
    border-radius:22px;
    background-color:#000;
}
.collectionBox .slick-dots > li {display:inline-block;}
.collectionBox .slick-dots > li button {
    display:inline-block;
    padding:0 3px;
    color:#999;
    font-size:12px;
    line-height:16px;
    vertical-align:top;
}
.collectionBox .slick-dots > li.slick-active button {color:#fff}
.collectionBox .slick-arrow {
    position:absolute;
    top:50%;
    display:inline-block;
    width:43px;
    height:58px;
    margin-top:-29px;
    text-indent:-99999px;
    background:url('../images/main/coll_prev.png') no-repeat center center;
    background-size:100% auto !important;
    z-index:98;
}
.collectionBox .slick-prev {left:0;}
.collectionBox .slick-prev:hover {background-image:url('../images/main/coll_prev_hover.png');}
.collectionBox .slick-next {right:0; background-image:url('../images/main/coll_next.png');}
.collectionBox .slick-next:hover {background-image:url('../images/main/coll_next_hover.png');}
#collectionStop, #collectionStart {
    position:absolute;
    left:80px;
    bottom:36px;
    display:inline-block;
    width:16px;
    height:16px;
    background:url('../images/main/coll_pause.png') no-repeat center center;
    background-size:auto 100%;
    text-indent:-99999px;
}
#collectionStart {background-image:url('../images/main/coll_play.png')}
@media screen and (max-width:1016px) and (min-width:717px) {
    .collectionBox .slick-prev {left:20px;}
    .collectionBox .slick-next {right:20px;}
}
@media screen and (max-width:1016px) {
    .collectionBox .slick-dots {left:8%; bottom:10%}
    #collectionStop, #collectionStart {left:8.5%; bottom:11.5%}
}
@media screen and (max-width:768px) {
	.collectionBox .slick-slider .img:after{width:60%}
	.collectionBox .slick-slider .img + div {width:35%}
}
@media screen and (max-width:716px) {
    .collectionBox .slick-dots {left:10%; bottom:10%}
    #collectionStop, #collectionStart {left:10.5%; bottom:11.5%}
	.collectionBox .slick-slider p.tit {font-size:24px;line-height:24px;}
	.collectionBox .slick-slider .img:after{width:70%}
	.collectionBox .slick-slider .img + div {width:40%;left:60px}
}
@media screen and (max-width:450px) {
    .collectionBox .slick-arrow {
        width:30px;
        height:40px;
        margin-top:-20px;
    }
	.collectionBox .slick-slider p.tit span{display:none}
	.collectionBox .slick-slider p.tit {font-size:22px;line-height:24px;padding:0px 0 20px}
	.collectionBox .slick-slider .img + div {left:50px}
}
/*-- [e] 메인 비주얼 - collectionBox */

/* [s] 추천 컬렉션 - recommendBox */
.recommendList a {
    position:relative;
    display:block;
    height:230px;
    overflow:hidden;
    box-shadow:10px 10px 10px #b5b5b5;
}
.recommendList a > img {
    max-width:120%;
    min-width:100%;
    min-height:100%;
}
.recommendList .txtBox {
    position:absolute;
    left:0;
    bottom:0;
    display:table-cell;
    vertical-align:middle;
    width:100%;
    background-color:rgba(0, 0, 0, 0.7);
    padding:27px 14px 7px;
}
.recommendList .tit {
    display:inline;
    width:100%;
    color:#fff;
    font-size:16px;
    overflow: hidden;
}
.recommendList a:hover .tit {
    text-decoration:underline;
    color:#4f8116;
}
.recommendList .cate {
    position: absolute;
    left:0;
    bottom:56px;
    display:block;
    padding:0px 13px 4px;
    text-align:center;
    background-color:#4f8116;
}
.recommendList li.type2 .cate {background-color:#9d5814;}
.recommendList li.type3 .cate {background-color:#e9771a;}
.recommendList li.type4 .cate {background-color:#4c90a4;}
.recommendList li.type2 a:hover .tit {color:#9d5814;}
.recommendList li.type3 a:hover .tit {color:#e9771a;}
.recommendList li.type4 a:hover .tit {color:#4c90a4;}
@media screen and (max-width:1016px) {
    .recommendList a {height:200px}
}
@media screen and (min-width:717px) {
    .recommendList {margin:-22px 0 0 -22px}
    .recommendList > li {
        float:left;
        width:25%;
        padding:22px 0 0 22px;
    }
    .recommendList .txtBox {height:78px;}
    .recommendList .tit {max-height:36px;}
}
@media screen and (max-width:716px) {
    .recommendList a {height:200px}
    .recommendList .cate {bottom:33px}
    .recommendList .txtBox {height:55px}
    .recommendList .tit {
        overflow:hidden; text-overflow:ellipsis; white-space:nowrap;-moz-binding:url('ellipsis.xml#ellipsis');-o-text-overflow:ellipsis;
    }
}
/*-- [e] 추천 컬렉션 - recommendBox */

/* [s] 사료 라이브러리 - librayBox */
.librayBox {
    background-color:#ccc;
}
.librayBox:after {display:block; clear:both; content:''}
.librayBox li {
    float:left;
    padding:33px 62px 33px 0;
}
.librayBox a {
    display:block;
    background-color:#fff;
    text-align:center;
    color:#333;
    font-size:16px;
}
.librayBox a:hover {background-color:#f1f1f1;}
.librayBox a img {margin-right:14px}
@media screen and (min-width:1017px) {
    .librayBox li {background:url('../images/main/libray_bg.png') no-repeat right bottom;}
    .librayBox a {width:150px;}
}
@media screen and (min-width:717px) {
    .librayBox {margin:40px auto !important;}
    .librayBox .titTxt {
        float:left;
        width:218px;
        padding:32px 66px 17px 47px;
        margin:0;
    }
    .librayBox .titTxt > span {
        display:table-cell;
        height:85px;
        vertical-align:middle;
        border-top:3px solid #666;
        border-bottom:3px solid #666;
        word-break:keep-all;
    }
    .librayBox ul {float:right;}
    .librayBox a {
        height:84px;
        line-height:84px;
    }
}
@media screen and (max-width:1186px) and (min-width:717px) {
    .librayBox .titTxt {
        width:150px;
        padding:32px 30px 17px 20px;
    }
}
@media screen and (max-width:1016px) and (min-width:717px) {
    .librayBox .titTxt {width:20%}
    .librayBox ul {width:80%}
}
@media screen and (max-width:1016px) {
    .librayBox li {
        width:25%;
        padding:33px 20px 33px 0;
    }
    .librayBox a {width:100%}
}
@media screen and (max-width:716px) {
    .librayBox {padding:23px 15px 16px}
    .librayBox .titTxt {margin-top:0}
    .librayBox ul {margin:-4px 0 0 -9px}
    .librayBox li {padding:9px 0 0 9px}
    .librayBox a {height:70px; line-height:70px;}
}
@media screen and (max-width:500px) {
    .librayBox li {width:50%}
}
/*-- [e] 사료 라이브러리 - librayBox */

/* [s] 부마민주항쟁 주요일지 - guideBox */
.major {
    background:url('../images/main/major_bg.png') no-repeat center center #e9e9e9;
    text-align:center;
}
.major a, .major span {display:inline-block;}
.major .tit {
    color:#333;
    font-size:18px;
    font-weight:bold;
    margin-top:27px;
}
.major .txt {
    color:#666;
    font-size:12px;
    line-height:14px;
    margin-top:12px;
    width:100%;
    padding:0 55px;
    word-break:keep-all;
}
.major .btn {
    margin-top:12px;
    min-width:66px;
    height:20px;
    line-height:20px;
    color:#fff;
    font-size:11px;
    text-align:center;
    padding:0 10px;
    background-color:#999;
}
.major a:hover .btn {background-color:#666;}
.guideList > li {
    background:url('../images/main/guide_bg.png') no-repeat 22px center;
    padding:25px 40px 0 108px;
    word-break:keep-all;
}
.guideList > li.type2 {background-image:url('../images/main/guide_bg2.png');}
.guideList > li .tit {
    color:#333;
    font-weight:bold;
    font-size:18px;
}
.guideList > li .txt {
    margin-top:15px;
    color:#666;
    font-size:12px;
    line-height:14px;
}
.guideList > li.type2 .txt {margin-top:5px;}
.guideList > li .txt p {
    color:#333;
    font-size:14px;
    margin-top:2px;
}
@media screen and (min-width:717px) {
    .major, .guideList > li {height:148px; border:1px solid #ccc}
    .major {float:left; width:407px;}
    .guideList {float:right}
    .guideList > li {
        float:left;
        width:312px;
        margin-left:19px;
    }
}
@media screen and (max-width:1186px) and (min-width:717px) {
    .major {width:338px;}
}
@media screen and (max-width:1016px) and (min-width:717px) {
    .major, .guideList > li {height:160px;}
    .major {width:31%;}
    .guideList {width:69%}
    .guideList > li {width:49%; margin-left:1%;}
}
@media screen and (max-width:1186px) {
    .major .txt {padding:0 10px}
}
@media screen and (max-width:1016px) {
    .guideList > li {
        padding:25px 10px 20px 80px;
        background-position:10px center;
        background-size:60px auto;
    }
    .guideList > li .txt p {font-size:12px; margin-top:0;}
}
@media screen and (max-width:716px) {
    .major {padding-bottom:19px}
    .guideList > li + li {border-top:1px solid #999}
}
/*-- [e] 부마민주항쟁 주요일지 - guideBox */

/* [s] linkBox */
.linkBox {
    background-color:#fff;
    border-top:1px solid #C8C8C8;
}
.linkBox > div {padding: 17px 40px;}
.linkList .slick-slide {display:inline-block !important; float:none; vertical-align:middle; padding:0 20px}
.linkBox .slick-arrow {
    position:absolute;
    top:50%;
    display:inline-block;
    width:30px;
    height:30px;
    margin-top:-15px;
    text-indent:-99999px;
    background:url('../images/main/link_prev.png') no-repeat center center;
    background-size:100% auto !important;
    z-index:98;
}
.linkBox .slick-prev {left:0;}
.linkBox .slick-next {right:0; background-image:url('../images/main/link_next.png');}
@media screen and (max-width:716px) {
    .linkBox > div {padding:10px 30px}
    .linkList .slick-arrow {width:25px; height:25px; margin-top:-12.5px}
}
/*-- [e] linkBox */