@charset "utf-8"; 

/* 공통 */ 
html {overflow-x:hidden;}
#wrapper{width:100%;min-width:320px;overflow:hidden;}
.innerWrap{position:relative;margin:0 auto;}

/* #header */
#header{
	position:fixed;height:86px;border-bottom:0px solid #e3e3e3;z-index:1000;

	
}
#header .innerWrap{padding:0;}
/* .topArea */
#header .topArea{height:24px;line-height:23px;border-bottom:1px solid #e0e0e0;background-color:#fff}
#header .topArea ul{text-align:right}
#header .topArea ul li{display:inline-block;}
#header .topArea ul li a {display:block;padding:0 10px 0 6px;color:#606477;font-size:11px;text-align:center;background:url(../../common/images/common/blet01.png) no-repeat right center}
#header .topArea ul li.login a{height:14px;line-height:14px;padding:1px 3px 1px 3px;color:#8e8e8e;border:1px solid #cccbd3;background:white}
#header .topArea ul li.last a{padding-right:0;background:none}

/* h1 */
#header h1{height:42px;padding:10px 0;}

/*#gnb*/

#gnb > ul > li > h3{font-weight:600;}
#gnb > ul > li > ul > li > a{color:#fff;font-size:13px;}
#gnb > ul > li > ul > li:hover > a,
#gnb > ul > li > ul > li.on > a{color:#fffc0e}

/* breadcrumb */
.breadcrumb{padding-left:15px;margin:0 15px;color:#7e7e7e;text-align:right;}
.breadcrumb em {padding-left:18px;background:url(../../common/images/content/bg_home.png) no-repeat left 3px }
.breadcrumb strong{color:#64513d}

/* #content */
.contHeader h3{padding-left:15px;font-size:25px;font-weight:normal;background:url(../../common/images/common/blet02.png) no-repeat left center}

/* footer */
footer{padding:20px 0;margin-top:50px;color:#434343;border-top:1px solid #d4d4d4;}
footer ul{width:96%;}
footer ul li {float:left;}
footer ul li a {display:block;height:32px;line-height:32px;padding:0 10px;font-weight:bold;background:url(../../common/images/content/arrow01.png) no-repeat left center}
footer ul li:first-child a{padding-left:0;background:none;}
footer ul li.point a {color:#427eec}
footer address{margin-top:15px;font-size:12px;font-style:normal;}
footer > address > span{display:block;margin-bottom:5px}
footer address span a{color:#8c8c8c;}
footer p{margin-top:15px;color:#9d9d9d;font-size:11px;}
.btnArea .btnOut { line-height:34px; }
/* 사파리/크롬 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	
}
/* mobile ----------------------------------------------------------------------------------------------------------------- */
@media all and (max-width:767px){
	/*#header*/
    #header{position:fixed;background-color:#fff;left:0px;top:0px;width:100%;}
	#header .topArea ul{text-align:center}
	#header #btToggle{position:fixed;right:10px;top:36px;z-index:1000;cursor:pointer;}
	#header h1{text-align:left;}
	/* #gnb */
	#gnb ul{display:none;}

	#gnb > ul > li > h3 > a{display:block;padding:13px 20px;height:16px;line-height:16px;color:#fff;font-size:15px;border-top:1px solid #3c74db;background:#427eec url(../images/common/bg_arrow_up.png) no-repeat right center}
	#gnb > ul > li.on > h3 > a{background:#427eec url(../images/common/bg_arrow_down.png) no-repeat right center}
	#gnb > ul > li > ul > li{border-top:1px solid #1d51b0;background-color:#285ab5}
	#gnb > ul > li > ul > li > a{display:block;height:14px;line-height:14px;padding:15px 20px;font-size:14px}
	#gnb > ul > .subBg{display:none;}

	/*content*/
	.breadcrumb{margin-bottom:30px;}
	.greeting_wrap { width:100%;display:block;margin:0px;padding:0px;height:auto; }
	.left01 { width:100%;float:left;height:auto;margin-top:0px !important; }
	.right01 { width:100%;float:left;height:auto !important;padding:0px;line-height:22px;padding-top:0px;position:relative; }
	.bottom01 { width:100%;float:left;height:auto !important;padding:0px;line-height:22px;padding-top:0px;position:relative;margin-top:0px !important; }

	/*footer*/
	footer{text-align:center;float:left;width:100%;}
	footer ul li{float:none;display:inline-block}
	footer h3 {margin-top:20px;text-align:center}
	.picArea {
        width:100% !important;
    }
	#player { padding-top:5%; }
	.fff { margin-left:0px !important; }
	.media_q { padding:10% !important;width:80% !important;max-width:600px !important;padding-left:10% !important; }
}

@media all and (max-width:1023px){
	#header{position:fixed;background-color:#fff;left:0px;top:0px;width:100%;}
	#header .topArea ul{text-align:left}
	#header .topArea ul,
	.innerWrap{padding:0 3%;}

	/* footer */
	
	footer ul li a {padding:0 9px;}
	footer > p,
	footer address{line-height:18px;font-size:13px;}
	footer address{margin-top:15px}

	
	/* #content */
	#content{width:94%;margin:40px auto;margin-top:68px;} 
	.contHeader{margin-bottom:35px;}
	.contHeader h3{padding-left:15px;}

	
}

/* tablet ----------------------------------------------------------------------------------------------------------------- */

@media all and (min-width:768px) and (max-width:1023px) {
	#header #btToggle{display:none}
	#header{position:fixed;background-color:#fff;left:0px;top:0px;width:100%;}

	#header .topArea ul{text-align:right}
	/* gnb */
	#gnb{position:relative;}	
	#gnb > ul{position:absolute;right:10px;top:-62px;width:72%;z-index:3; display:block !important;}
	#gnb > ul > li{float:left;width:20%;border:0 none;z-index:1001;}
	#gnb > ul > li > h3 > a{display:block;height:62px;line-height:62px;color:#0f0f0f;font-size:13px;text-align:center;letter-spacing:-1px;}
	#gnb > ul > li > h3 > a:hover {color:#528cdd}
	#gnb > ul > li > ul {display:none;width:400px;margin-left:-10px;zoom:1}
	#gnb > ul > li:first-child > ul{width:600px;}
	#gnb > ul > li.last > ul {margin-left:-60px;}
	#gnb > ul > li > ul > li{float:left;padding:0 10px;}
	#gnb > ul > li > ul:after{content:"";display:block;clear:both}
	#gnb > ul > li > ul > li > a{display:block;position:relative;padding:15px 0 5px;text-align:left;font-weight:bold;z-index:1002}

	#gnb li.subBg{display:none;position:absolute;top:62px;left:50%;width:5000px;height:40px;margin-left:-2000px;background-color:#427eec;z-index:1000;margin-top:-1px}

	/* .contWrap */
	#content{width:96%;margin:40px auto;margin-top:120px;} 
	.contHeader h3{float:left}
	.contHeader .breadcrumb{float:right;margin-top:10px;}
	footer{padding-bottom:30px;border-top:1px solid #ccc;width:100%;float:left;}
	footer address .br{display:block}
	footer h3{position:absolute;top:80px;right:2%}
	.greeting_wrap { width:100%;display:block;margin:0px;padding:0px;height:auto; }
	.left01 { width:100%;float:left;height:auto;margin-top:0px !important; }
	.right01 { width:100%;float:left;height:auto !important;padding:0px;line-height:22px;padding-top:0px;position:relative; }
	.bottom01 { width:100%;float:left;height:auto !important;padding:0px;line-height:22px;padding-top:0px;position:relative;margin-top:0px !important; }
	address .btnArea { text-align:left; }
	.picArea {
        width:88% !important;
    }
	#player { padding-top:0; }
	.fff { margin-left:-100px; }

	.media_q { padding:10% !important;width:80% !important;max-width:600px !important;padding-left:10% !important; }
}

/* desktop ----------------------------------------------------------------------------------------------------------------- */
@media all and (min-width:1024px) {
	header .topArea ul,
	.innerWrap{width:1024px;margin:0 auto}
	.wrapper_sub header .innerWrap{width:1024px;margin:0 auto}
	.wrapper_sub .innerWrap{width:900px;margin:0 auto}
	.cls_userInfo_table{width:450px;margin:0 auto}

	#header #btToggle{display:none}
	
	/* header */
	#header{position:fixed;background-color:#fff;left:50%;top:0px;margin-left:-512px;}


	/* gnb */
	#gnb{position:relative;margin:0 auto;}	
	#gnb > ul{position:absolute;right:0;top:-62px;width:75%;z-index:3; display:block !important;}	
	
	#gnb > ul > li{float:left;width:20%;border:0 none;z-index:1001;}
	#gnb > ul > li > h3 > a{display:block;height:62px;line-height:62px;color:#0f0f0f;text-align:center;}	
	#gnb > ul > li > h3 > a:hover {color:#528cdd}
	
	#gnb > ul > li > ul{display:none;width:510px;margin-left:-10px;zoom:1;}
	/*#gnb > ul > li:first-child > ul{width:525px;}*/
	#gnb > ul > li:first-child > ul{width:585px;}	/*인사말 추가하면서 서브메뉴의 가로길이를 늘렸다 */
	#gnb > ul > li.last > ul {margin-left:-35px;}
	#gnb > ul > li > ul > li{float:left;padding:0 10px;}
	#gnb > ul > li > ul:after{content:"";display:block;clear:both}
	#gnb > ul > li > ul > li > a{display:block;position:relative;padding:15px 0 5px;text-align:left;font-weight:bold;z-index:1002}

	#gnb li.subBg{display:none;position:absolute;top:62px;left:50%;width:5000px;height:40px;margin-left:-2000px;background-color:#427eec;z-index:1000;margin-top:-1px;}	
	
	
	/* #content */
	#content{min-height:500px;margin:40px auto;margin-top:126px;}

	/* .contWrap */
	.contHeader{margin-bottom:35px;}
	.contHeader h3{float:left}
	.contHeader .breadcrumb{float:right;margin-top:10px;}

	/* footer */
	footer{padding-bottom:30px;border-top:1px solid #ccc;width:100%;float:left;}
	footer ul li {float:left;}
	footer ul li a {display:block;height:32px;line-height:32px;padding:0 15px;color:#434343;background:url(../../common/images/content/arrow01.png) no-repeat left center}
	footer ul li:first-child a{padding-left:0;background:none;}
	footer ul li.point a {color:#427eec}

	footer address span{display:block;margin-bottom:5px}
	footer address span .br{display:inline}
	footer h3 {position:absolute;top:40px;right:0;}
	footer p{font-size:12px;}
	.greeting_wrap { width:100%;display:block;margin:0px;padding:0px;height:840px; }
	.left01 { width:50%;float:left;height:auto;margin-top:-71px !important; }
	.right01 { width:calc( 50% - 50px );float:left;height:auto !important;padding:25px;line-height:22px;padding-top:0px;position:relative; }
	.bottom01 { width:100%;float:left;height:auto !important;padding:0px;line-height:22px;padding-top:0px;position:relative;margin-top:70px !important; }
	address .btnArea { text-align:left; }
	.picArea {
        width:88% !important;
    }
	li a .picArea {
        width:100% !important;
    }
	#player { padding-top:0; }

	.fff { margin-left:-100px; }


	.media_q { padding:10% !important;width:75% !important;max-width:600px !important;padding-left:15% !important; }
}
span .dSelect {border:none;width:80px;margin-left:4px;}