@charset "utf-8";

#main-visual {background:#efefef;height:400px;overflow:hidden;}
#main-visual .items,
#main-visual .item,
#main-visual .slick-list,
#main-visual .slick-track {height:100%;}
#main-visual .item img {width:100%;height:100%;background-repeat:no-repeat;background-size:cover;background-position:50% 75%;}
#main-visual .wrap {z-index:2;}
#main-visual .wrap .dots {top:-60px;left:0;width:100%;text-align:center;position:absolute;}
#main-visual .wrap .dots a {font-size:0;display:inline-block;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:#888 1px 2px 4px;opacity:0.7;}
#main-visual .wrap .dots a.active {background:#000;box-shadow:#444 1px 2px 4px;}
@media all and (max-width:1023.8px) {
	#main-visual {height:300px;}
}
@media all and (max-width:767.8px) {
	#main-visual {height:240px;}
}
@media all and (max-width:639.8px) {
    #main-visual {height:200px;}
}
@media all and (max-width:479.8px) {
	#main-visual {height:160px;}
}

#main-recent {padding:45px 0 50px 0;}
#main-tabs {border:solid 1px #ccc;padding:35px 460px 0 45px;height:410px;position:relative;}
#main-tabs > a {display:block;float:left;width:30%;margin-left:5%;text-align:center;border:solid 1px #ccc;height:50px;line-height:50px;font-size:1.1em;font-weight:600;}
#main-tabs > a:first-child {margin-left:0;}
#main-tabs > a.active {background:#103876;color:#fff;}
#main-tabs .items {position:absolute;left:0;top:110px;width:100%;padding-left:45px;padding-right:460px;display:none;}
#main-tabs > a.active+.items {display:block;}
#main-tabs .item-head {height:150px;margin-bottom:30px;overflow:hidden;border-bottom:dashed 1px #ccc;}
#main-tabs .item-head img {float:left;margin-right:20px;}
#main-tabs .item-head strong {font-size:1.2em; line-height:1.0; display:block; padding-top:15px; color:#103876; background-color:#eee; text-indent:1.0em;}
#main-tabs .item-head p {padding:20px;margin:0;display:block;font-size:0.9em;color:#666;height:120px;line-height:20px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden; background-color:#eee;}
#main-tabs .item-head a:hover p {color:#000;}
#main-tabs .item {padding:4px 0;}
#main-tabs .item a {display:block;position:relative;font-size:0.95em;padding:2px 100px 0 16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#666;}
#main-tabs .item a:before {content:'';position:absolute;left:4px;top:50%;width:4px;height:4px;background:#666;transition:all .2s;}
#main-tabs .item a:hover:before {transform:scale(2);background-color:#000;}
#main-tabs .item em {font-size:0.8em;color:#888;font-style:normal;position:absolute;right:0;top:6px;}

#main-pop {position:absolute;top:0;right:0;z-index:2;width:411px;height:100%;border-left:solid 1px #ccc;}
#main-pop .items {font-size:0;height:410px;overflow:hidden;}
#main-pop .item {float:left;width:100%;}
#main-pop .item img {width:100%;background-size:cover;background-position:50% 0;background-repeat:no-repeat;}
#main-pop .texts {height:44px;background:#524c4c;color:#fff;border-top:solid 1px #fff;position:relative;overflow:hidden;}
#main-pop .texts p {margin:0;padding:0 130px 0 10px;line-height:42px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:100%;}
#main-pop .texts em {font-style:normal;}
#main-pop .texts em:after {content:'|';margin:0 0 0 6px;vertical-align:top;font-size:12px;}
#main-pop .texts .btns {position:absolute;right:0;top:0;}
#main-pop .texts .btns a {display:block;width:42px;height:43px;line-height:42px;text-align:center;color:#fff;float:left;border-left:solid 1px #fff;font-size:12px;}

@media all and (max-width:1023.8px) {
    #main-tabs {padding:20px;display:table;width:100%;}
    #main-tabs .items {padding-left:20px;padding-right:20px;}
    #main-pop {position:static;width:100%;border-left-width:0;}
	#main-pop .item img {background-size:contain;height:auto;}
    /*#main-pop .item {width:470px;background-color:#000;}*/
    /*#main-pop .item img {opacity:.3;transition:opacity .2s;}*/
    #main-pop .item.slick-active img {opacity:1;}
}
@media all and (max-width:639.8px) {
    #main-tabs > a {width:48%;margin-left:4%;}
    #main-tabs .item-head img {width:100px;}
}
@media all and (max-width:479.8px) {
	#main-pop .items {height:auto;}
	#main-pop .item {width:100%;}
}

#main-service {background:#36ad15;color:#fff;padding:60px 0 50px 0;overflow:hidden;}
#main-service .wrap:before {content:'';position:absolute;width:472px;top:-60px;bottom:-50px;right:-260px;background:url(img/main_service_bg02.png) no-repeat 0 0;display:block;}
#main-service h2 {padding:0;margin:0;line-height:1;font-size:34px;font-weight:600; }
#main-service h2 span {font-weight:300;font-family:arial,sans-serif;font-size:0.8em;vertical-align:bottom;}
#main-service p {padding:5px 0 15px 0;margin:0;font-size:13px;line-height:1;}
#main-service ul {padding:0;margin:0;list-style:none;display:table;width:100%;border-collapse:collapse;table-layout:fixed;}
#main-service ul li {display:table-cell; padding-top:10px;}
#main-service ul a {display:block;text-align:center;font-size:16px;padding:0 0 24px 0;color:#fff;border:solid 1px #46c822;border-left-width:0;border-top-color:#fff;}
#main-service ul li:first-child a {border-left-width:1px;}
#main-service ul a {background:#36ad15 url(img/main_icon01.png) no-repeat 50% 20px;font-weight:700;}
#main-service ul a > i {display:block;text-align:center;font-size:64px;line-height:64px;padding:24px 0 16px 0;}
#main-service h2,
#main-service p,
#main-service ul {position:relative;z-index:2;}
@media all and (max-width:767.8px) {
    #main-service ul {display:block;}
    #main-service ul li {display:block;float:left;width:33%;}
    #main-service ul li:nth-child(3n+2) {width:34%;}
    #main-service ul li:nth-child(3n+1) a {border-left-width:1px;}
}
@media all and (max-width:479.8px) {
    #main-service ul li,
    #main-service ul li:nth-child(3n+2) {width:50%;}
    #main-service ul li:nth-child(2n+1) a {border-left-width:1px;}
}

#main-goods {padding:50px 0 30px 0;}
#main-goods h2 {padding:25px 0 15px 0;margin:0;line-height:1;font-size:38px;font-weight:600;position:relative;text-align:center;display:block;letter-spacing:-2px;}
#main-goods h2 span {font-weight:300;}
#main-goods h2:before,
#main-goods h2:after {content:'';position:absolute;left:50%;width:30px;top:0;border-top:solid 3px #0a4593;}
#main-goods h2:after {left:auto;right:50%;}
#main-goods h2+p {font-size:16px;text-align:center;padding:0;margin:0;line-height:1;}

#main-goods h3 {line-height:1;display:block;color:#666;font-size:1.3em;font-weight:700;font-family:'Noto Sans KR',sans-serif;margin:0;padding:30px 0 10px 0;border-bottom:solid 1px #dfdfdf;}
#main-goods .items-left {width:50%;padding-left:16px;float:right;}
#main-goods .items-left .items {padding:0 0 30px 0;}
#main-goods .items-left .item {position:relative;line-height:2;}
#main-goods .items-left .item span {font-size:1em;font-weight:700;color:#000;padding-right:10ex;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#main-goods .items-left .item em {position:absolute;right:0;top:3px;font-size:0.8em;color:#666;font-style:normal;}
#main-goods .items-left .item:first-child {padding-bottom:20px;border-bottom:dotted 1px #dfdfdf;margin-bottom:20px;background-color:#eee; padding-top:5px;}
#main-goods .items-left .item:first-child a {padding-right:0;}
#main-goods .items-left .item:first-child span {font-size:1.2em;font-weight:700;color:#000; background-color:#eee; text-indent:1.0em; }
#main-goods .items-left .item:first-child em {font-size:0.8em;color:#666;font-style:normal;}
#main-goods .items-left .item:first-child p {display:block;padding:20px; margin:0;line-height:1.6;font-size:0.85em;text-align:justify;background-color:#eee;}
#main-goods .items-left .item:first-child p {display:-webkit-box;-webkit-box-orient:vertical;height:6em;-webkit-line-clamp:3;overflow:hidden;}
#main-goods .items-left .item:hover span {color:#103876;}

#main-goods .items-right {width:50%;padding-right:16px;float:left;}
#main-goods .items-right .items {padding:0 0 30px 0;font-size:0;white-space:nowrap;overflow:auto;}
#main-goods .items-right .items.slick-slider {overflow:hidden;}
#main-goods .items-right .item {width:50%;display:inline-block;padding:0 10px;font-size:1rem;}
#main-goods .items-right .item a {display:block;border:solid 1px #ccc;}
#main-goods .items-right .thumb {font-size:0;}
#main-goods .items-right .thumb img {width:100%;background:#fff no-repeat center;background-size:cover;}
#main-goods .items-right .texts {padding:20px 0;background:#f6f6f6;text-align:center;font-size:0.9em;letter-spacing:-1px;}
#main-goods .items-right .texts strong {display:block;white-space:normal;word-break:keep-all;}
#main-goods .items-right .slick-dots {position:absolute;left:0;bottom:0;width:100%;padding:0;margin:0;list-style:none;text-align:center;}
#main-goods .items-right .slick-dots li {display:inline;margin:0 2px;}
#main-goods .items-right .slick-dots button {display:inline-block;width:16px;height:16px;padding:0;font-size:0;border:none;background:#ccc;border-radius:50%;cursor:pointer;outline:0;}
#main-goods .items-right .slick-dots li.slick-active button {background:#333;}
@media all and (max-width:767.8px) {
    #main-goods .items-left {float:none;padding-left:0;width:100%;}
	#main-goods .items-right {float:none;padding-right:0;width:100%;}
}
@media all and (max-width:479.8px) {
    #main-goods .items-right .item {width:300px;}
}

#main-banner {padding:20px 0;border-top:solid 1px #eaeaea;}
#main-banner .wrap {padding-left:200px;}
#main-banner .btns {padding-top:6px;position:absolute;left:0;top:0;}
#main-banner .btns strong {margin-right:10px;}
#main-banner .btns * {vertical-align:middle;}
#main-banner .btns a {display:inline-block;width:30px;height:30px;line-height:30px;text-align:center;border:solid 1px #eee;font-size:12px;}
#main-banner .items {width:100%;font-size:0;height:43px;white-space:nowrap;overflow:hidden;}
#main-banner .item {display:inline-block;padding:0 10px;}
#main-banner .item img {height:43px;border:solid 1px #ccc;}
@media all and (max-width:479.8px) {
    #main-banner .wrap {padding-left:0;}
    #main-banner .btns {padding-top:0;padding-bottom:10px;position:static;text-align:center;}
}






