﻿
.qlink { width: 998px; height: 82px; border: 1px solid #ccc; margin: 0 auto; }
.qlink .copy, .qlink .copy2 { width: 332px; height: 82px; border-right: 1px solid #ccc; float: left}
.qlink .copy3 { width: 332px; height: 82px; float: left}

.qlink { margin-bottom: 25px;}
.qlink img { margin-left: 25px; float: left }
.qlink .select { float: left; margin-top: 12px; margin-left: 20px;}
.qlink label { font-size: 15px; color: #4575ca; font-weight: bold; display: block; margin-bottom: 10px }
.qlink select { width: 120px; height: 30px;}
.qlink button { width: 65px; height: 30px; background: #4575ca; color: #fff}

.qicon { width: 1000px; margin: 0 auto; background: #00b2eb; height: 100px; padding: 0; box-sizing: border-box; text-align: center}
.qicon ul { margin: 0 auto;}
.qicon ul li { display:inline-block; margin: 0 18px; line-height: normal}


.section2 {width: 1000px; height: 230px; margin: 0 auto;}
.latest_wrap { width: 700px; float: left}
.latest_wrap .tab .active { color: #fff !important; background: #4575ca}
.latest_wrap .tab { width: 700px; height: 50px; border-bottom: 1px solid #4575ca}
.latest_wrap .tab > a { width: 135px; line-height: 50px; text-align: center; color: #666; display: inline-block}

.latest_wrap .more_btn { width: 90px; float: right; font-size: 11px; position: relative; top: -15px; right: -20px;}

.latest_wrap .tab_container { margin-top: 25px !important; width: 650px; margin: 0 auto;}
.latest_wrap .tab_container li { line-height: 30px !important; width: 100%; float: left}
.latest_wrap .tab_container li a { width: 100% !important; display: block; font-weight: normal !important}
.latest_wrap .tab_container li a .ellipsis, .gb_web_sung { float: left; overflow:hidden; text-overflow: ellipsis; white-space:nowrap; width: 500px !important; display: inline-block; }
.latest_wrap .tab_container li a .date { float: right}

.section2 .eventZone { float: right; border: 1px solid #ccc !important;}


.gbtpnow { width: 1000px !important; height: 200px; margin: 20px auto; display: block}
.gbtpnow .stitle { color: #000; font-size: 18px; font-weight: bold; margin-bottom: 15px;}
.gbtpnow ul { width: 1000px;}
.gbtpnow ul li { float: left; width: 160px; margin-right: 8px; }
.gbtpnow ul li strong {overflow:hidden; text-overflow: ellipsis; white-space:nowrap; width: 155px; display: inline-block; font-weight: normal !important}
.gbtpnow ul li.last { margin-right: 0 !important;}
.gbtpnow ul li img { width: 158px; height: 118px; border: 1px solid #ccc;}


.snswrap { width: 1000px !important; margin: 0 auto; display: block}
.snswrap .sns { float: left; margin-right: 20px;}
.snswrap .sns:last-child { margin-right: 0}
.snswrap .sns .snstitle { margin-bottom: 5px;}
.snswrap .sns .snstitle span { position: relative; top: -10px; left: 10px;}

.snswrap .snsthumbnail { width: 320px; height: 184px;}

#contentsWrap{padding-bottom: 44px;}
/*#contentsWrap > section{border:1px solid #e2e2e2;width: 998px;}*/

/*��������, ä��ȳ�*/
.infoZone{border-right: 1px solid #e2e2e2;float: left;width:499px;position: relative;height: 228px;}
.infoZone h3{width: 249px;height: 52px;position: absolute;top: 0;left: 0;background-color: #555;}
.infoZone h3.tab02{left: 250px;}
.infoZone h3.on{background-color: #0072bc !important}
.infoZone h3.on a{color:#fff;}
.infoZone h3 a{font-size: 16px;color:#b0b0b0;font-weight: 600;line-height: 52px;margin-left: 30px; }
.infoZone > div{width: 443px;height: 176px;position: absolute;top: 52px;left: 0;background-color: #0072bc;padding:0 28px;}
.infoZone > div ul li{height: 40px;border-bottom: 1px solid #689abb;}
.infoZone > div ul li.first{margin-top: 7px;}
.infoZone > div ul li.last{border-bottom: 0;}
.infoZone > div ul li a{color:#fff; font-size: 13px;line-height: 41px;}
.infoZone > div ul li a span.ellipsis{float: left;width: 360px;overflow:hidden; text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;}
.infoZone > div ul li a span.date{float: right;font-weight: normal;}
.infoZone > a{position: absolute;top: 20px;color:#e8e8e8;font-size: 12px}
.infoZone > a.info01_more{left: 185px;}
.infoZone > a.info02_more{left: 435px;}
.infoZone .info02{display: none;} 

/*���ο�, ����Ʈ �ֽ����, �濵����*/
.bannerZone{float: left;width: 249px;border-right: 1px solid #e2e2e2;}
.bannerZone ul li{height: 57px;border-bottom: 1px solid #e2e2e2;padding: 18px 0 0 55px;}
.bannerZone ul li.last{border-bottom: 0;height:58px;}
.bannerZone ul li a{color:#252525;}
.bannerZone ul li:hover{background-color: #34bfb7} 
.bannerZone ul li:hover a strong, .bannerZone ul li:hover a span{color:#fff;}
.bannerZone ul li a strong{font-size: 15px;display: block;margin-bottom: 8px;}
.bannerZone ul li a span{font-size: 11px;color:#444;}
.bannerZone .banner01{background: url("../img/infoBanner01.png") no-repeat 11px center}
.bannerZone .banner02{background: url("../img/infoBanner02.png") no-repeat 6px center}
.bannerZone .banner03{background: url("../img/infoBanner03.png") no-repeat 14px center}


/*���� �̺�Ʈ ���*/
.eventZone{width: 250px;height: 230px;float: left;position: relative;}
.eventZone .control{position: absolute;width: 100%;top:10px; right:0;z-index: 2;}
.eventZone .control ul{float: right;}
.eventZone .control ul li{float: left;margin: 0 1px;}
.eventZone .control ul li.last{margin-right: 10px;}
.eventZone .slideshow{z-index: 0;}

/*��ũ���*/
.linkZone{float: left;width: 249px;border-right: 1px solid #e2e2e2;}
.linkZone ul li{float: left;width: 124px;height: 142px;}
.linkZone ul li.linkBanner01{border-right: 1px solid #e2e2e2;border-bottom: 1px solid #e2e2e2;}
.linkZone ul li.linkBanner02{border-bottom: 1px solid #e2e2e2;}
.linkZone ul li.linkBanner03{border-right: 1px solid #e2e2e2;border-bottom: 1px solid #e2e2e2;}
.linkZone ul li.linkBanner04{border-bottom: 1px solid #e2e2e2;}
.linkZone ul li.linkBanner05{border-right: 1px solid #e2e2e2;}
.linkZone ul li.linkBanner06{}
.linkZone ul li a{display: block;width: 100%;height: 100%;text-align: center;}
.linkZone ul li a span{display: inline-block;margin-top: 109px;color:#252525;font-size: 14px; font-weight: 600;}
.linkZone ul li a:hover span{color:#fff;}
.linkZone ul li.linkBanner01 a{background: url("../img/linkBanner01.png") no-repeat center 20px;}
.linkZone ul li.linkBanner02 a{background: url("../img/linkBanner02.png") no-repeat center 20px;}
.linkZone ul li.linkBanner03 a{background: url("../img/linkBanner03.png") no-repeat center 20px;}
.linkZone ul li.linkBanner04 a{background: url("../img/linkBanner04.png") no-repeat center 20px;}
.linkZone ul li.linkBanner05 a{background: url("../img/linkBanner05.png") no-repeat center 20px;}
.linkZone ul li.linkBanner06 a{background: url("../img/linkBanner06.png") no-repeat center 20px;}
.linkZone ul li.linkBanner01 a:hover{background: url("../img/linkBanner01_hover.png") no-repeat #175bba center 20px;}
.linkZone ul li.linkBanner02 a:hover{background: url("../img/linkBanner02_hover.png") no-repeat #175bba center 20px;}
.linkZone ul li.linkBanner03 a:hover{background: url("../img/linkBanner03_hover.png") no-repeat #175bba center 20px;}
.linkZone ul li.linkBanner04 a:hover{background: url("../img/linkBanner04_hover.png") no-repeat #175bba center 20px;}
.linkZone ul li.linkBanner05 a:hover{background: url("../img/linkBanner05_hover.png") no-repeat #175bba center 20px;}
.linkZone ul li.linkBanner06 a:hover{background: url("../img/linkBanner06_hover.png") no-repeat #175bba center 20px;}

.bwZone{float: left;width: 248px;border-right: 1px solid #e2e2e2;}
.bwZone > div{float: left;height: 142px;padding:0 20px; border-bottom: 1px solid #e2e2e2}
.bwZone > div:last-child { border-bottom: none !important}
.brochure{border-bottom: 1px solid #e2e2e2;background: url("../img/bgBrochure.png") repeat-x center bottom;}
.webzine{background: url("../img/bgWebzine.png") repeat-x center bottom;}
.bwZone h3{font-size:16px;color:#252525;margin-top: 15px;font-weight: 600;margin-bottom: 10px;}
.bwZone h3 span{font-size: 16px; color:#616161; margin-left: 5px;}
.bwZone .br{border-top: 1px solid #858585;border-width: 2px;width: 16px;display: block;margin-bottom: 12px;}
.bwZone p{font-size: 12px;line-height: 1.2;color:#4b4b4b;margin-bottom: 8px;}
.bwZone a{width: 48px;height: 27px;display: block;background: url("../img/btnBwZone.png") no-repeat;text-indent: -9999px}
.bwZone a:hover{background: url("../img/btnBwZone_hover.png") no-repeat;}

/*��������, ���̽�*/
.noticeZone{float: left;width:499px;position: relative;height:100%;}
.noticeZone h3{width: 250px;height: 52px;position: absolute;top: 0;left: 0;background-color: #555;}
.noticeZone h3.tab02{left: 250px;}
.noticeZone h3.on{background-color: #efefef !important}
.noticeZone h3.on a{color:#252525;}
.noticeZone h3 a{font-size: 16px;color:#b0b0b0;font-weight: 600;line-height: 52px;margin-left: 30px; }
.noticeZone > div{width: 443px;position: absolute;top: 52px;left: 0;background-color: #efefef;padding:0 28px;}
.noticeZone > div ul li{height: 46px;border-bottom: 1px dotted #c5c5c5;}
/*.noticeZone > div ul li.first{margin-top: 7px;}*/
.noticeZone > div ul li.last{border-bottom: 0;}
.noticeZone > div ul li a{color:#555; font-size: 13px; font-weight: 600;line-height: 46px;}
.noticeZone > div ul li a strong{float: left;width: 325px;overflow:hidden; text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;padding-left: 50px}
.noticeZone > div ul li a span.date{float: right;font-weight: normal;font-size: 12px}
.noticeZone > a{position: absolute;top: 20px;color:#828282;font-size: 12px}
.noticeZone > a.more01{left: 185px;}
.noticeZone > a.more02{left: 435px;}
/* .noticeZone > div > ul li.first{height: 135px;position: relative;}
.noticeZone > div > ul li.first strong{width: 100%;display: inline-block;border-bottom: 0;line-height: 30px;margin: 10px 0 8px 0;overflow: hidden;}
.noticeZone > div > ul li.first a span.expandOn{width: 100%;line-height: 25px;margin-bottom: 15px;max-height:71px;display:block;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
.noticeZone > div > ul li.first a span.date{display: inline-block;position: absolute;top: 0;right:0;width: 70px;} */
.noticeZone > div.list01 > ul li.first strong{width: 80%;padding: 0;}
.noticeZone > div.list01 > ul li a strong.type01{background: url("../img/notice_type01.png") no-repeat left center;}
.noticeZone > div.list01 > ul li a strong.type02{background: url("../img/notice_type02.png") no-repeat left center;}
.noticeZone > div.list01 > ul li a strong.type03{background: url("../img/notice_type03.png") no-repeat left center;}
.noticeZone > div.list01 > ul li a strong.type04{background: url("../img/notice_type04.png") no-repeat left center;}
.noticeZone > div.list01 > ul li a strong.type05{background: url("../img/notice_type05.png") no-repeat left center;}
.noticeZone .list02{display: none;} 
.noticeZone > div.list02 strong{padding: 0;}

.noticeZone > div.list02 > ul li{float: left;width: 220px;height: 187px; text-align: center;}
.noticeZone > div.list02 > ul a li strong{width: 100%;display: inline-block;border-bottom: 0;line-height: 20px;overflow: hidden !important}
.noticeZone > div.list02 > ul a li strong type{font-weight:bold;}
.noticeZone > div.list02 > ul a li img{height:100px; width:180px; margin-top:24px;}



/*�����*/
/*
 * Divas Slider main style
 * Do not edit or edit with extreme care!
 * These rules are mandatory for Divas Slider to work correctly
 */

 .divas-slider {
 	position: relative;
 	margin: 0 auto;
 	padding: 0;
 	width: 100%;
 	height: auto;
 	overflow: hidden;
 }

 .divas-slide-container {
 	position: relative;
 	margin: 0;
 	padding: 0;
 }

 .divas-slide-container:before,
 .divas-slider-container:after {
 	content: "";
 	display: table;
 	clear: both;
 }

 .divas-slide {
 	position: relative;
 	margin: 0;
 	padding: 0;
 	float: left;
 	overflow: hidden;
 }

 .divas-slide img {
 	display: block;
 	margin: 0;
 	padding: 0;
 	width: 100%;
 	height: auto;
 	outline: 0 none;
 	-webkit-backface-visibility: hidden;
 	-moz-backface-visibility: hidden;
 	-ms-backface-visibility: hidden;
 	backface-visibility: hidden;
 }	


 @media only screen and (max-width:1000px) { 

 	#contentsWrap > section{width: 100%;border:0;}
 	.eventZone{display: none;}
 	.infoZone{width: 65%;border-right: 0;}
 	.bannerZone{width: 35%;border-right: 0;border-top: 1px solid #e2e2e2;}
 	.infoZone h3{width: 50%;}
 	.infoZone h3.tab02{left: 50%;}
 	.infoZone > a.info01_more{left: 37%;}
 	.infoZone > a.info02_more{left: 87%;}
 	.infoZone > div{width: 92%;padding:0 4%;}
 	.infoZone > div ul li a span.ellipsis{width: 80%;}
 	.linkZone{width: 100%;border-bottom: 1px solid #e2e2e2;}
 	.linkZone ul li{width: 16.666666666%}
 	.linkZone ul li.linkBanner01{border:0;}
 	.linkZone ul li.linkBanner02{border:0;}
 	.linkZone ul li.linkBanner03{border:0;}
 	.linkZone ul li.linkBanner04{border:0;}
 	.linkZone ul li.linkBanner05{border:0;}
 	.bwZone{width: 35%;border-right: 0;}
 	.bwZone > div{width: 90%;padding:0 5%;}
 	.noticeZone{width: 65%;}
 	.noticeZone h3{width: 50%;}
 	.noticeZone h3.tab02{left: 50%;}
 	.noticeZone > a.more01{left: 36%;}
 	.noticeZone > a.more02{left: 86%;}
 	.noticeZone > div{width: 90%;padding:0 5%;}
 	.noticeZone > div ul li a strong{width: 66%;}

 }

@media only screen and (max-width:640px) { 
    .infoZone{width: 100%;}
    .infoZone > div ul li a span.ellipsis{width: 75%;}
    .infoZone > a.info01_more{left: 33%;}
    .infoZone > a.info02_more{left: 83%;}
    .bannerZone{width: 100%;border-bottom: 1px solid #e2e2e2;}
    /*.eventZone{display: block;width: 100%;margin:0 auto;}*/
    .eventZone .slideshow{width: 100% !important;margin:0 auto;}
    .eventZone .slideshow > div{display: block;width: 100% !important;}
    .eventZone .slideshow a{display: block;width: 100%;margin:0 auto;}
    .eventZone .slideshow a img{margin:0 auto;width: 50%;padding:0 25%;}
    .linkZone ul li{width:33.3333333%;}
    .bwZone{width: 100%;}
    .bwZone > div{height: 170px;}
    .noticeZone{width: 100%;height: 428px;}
    .noticeZone > div ul li a strong{width: 63%;}

    .top_popup { display: none !important}
    .qicon ul li { width: calc(98%/7) !important; float: left; margin: 0 !important}
    .qicon ul li img { width: 100% !important; height: auto !important}
    .qicon { height: auto !important; width: 100%;} 
    #slider_wrapper { position: relative; top: 10px; margin-bottom: 10px;} 
    #jySlider_wrap, .jySlider img { height: 150px !important}
    .jySlider a:nth-child(1), .jySlider a:nth-child(2) { display: none !important}
    .qlink .copy, .qlink .copy2, .qlink .copy3 { border-right: none !important; width: 30% !important; margin-left: 2% !important}    
    
    .qlink img { display: none !important}
    .qlink .select { margin-left: 0 !important; text-align: center}
    .latest_wrap { width: 100% !important;}
    #more1, #more2, #more3, #more4 { display: none !important}
    .latest_wrap { margin-top: 40px;}
    .qlink select { margin-bottom: 3px; width: 98%}
    .latest_wrap .tab { width: 100% !important; height: 40px;}
    .latest_wrap .tab > a { width: 24.25% !important; font-size: 13px; line-height: 40px}
    .latest_wrap .tab_container li a .ellipsis { width: 98% !important}
    .latest_wrap .tab_container li a .date { display: none !important}
    .latest_wrap .tab_container { margin-top: 10px !important; width: 95%; font-size: 12px}
    .gb_web_sung { width: 95% !important}
    
    #contentsWrap > section { height: auto; display: inline-block}
    .eventZone { display: none !important}
    .gbtpnow, .gbtpnow ul, .snswrap { width: 100% !important; }
    .gbtpnow ul li { width: 32%; display: inline-block; margin-right: 1%}
    .gbtpnow ul li strong { width: 80% !important; font-size: 11px}
    .gbtpnow ul li:nth-child(3n) { margin-right: 0 !important}
    .gbtpnow ul li:nth-child(4) { clear: both}
    .gbtpnow ul li img { width: 100%; height: auto !important}
    .snswrap .sns { width: 100%; margin-right: 0 !important}
    #faceAddr img, .snsthumbnail { width: 100% !important; height: 250px !important}
    #headerWrap .logo { z-index: 9999; left: 10px; position: absolute; top: 0; background: url(../img/footer2.png) no-repeat}
}
