/*구글 폰트 검색해서 / 폰트 임포트 선언문 하단 li>a 문에서 font-family 선언으로 폰트 변경 */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR');

*{
	margin:0;
	padding:0;
	border:0;
}

/* ul,li 특수문자 제거 */
ul,li{
	list-style:none;
}

/* 이미지 링크시 두께 0으로 설정하고 정렬은 위로해라 */
img{
	border: 0;
	vertical-align: top;
}

/* #top_menu / 클리어피스 설정 */
.cf:after{
	content:"";
	display: block;
	clear: both;
}

.fl{
	float: left;
}

/* 인덱스 전체를 감싸고 있는 id:warp 설정 */
/* position:relative; 초기 위치에서 상하 좌우로 이동(상대) */
/* position:absolute; 절대위치 자표 설정 */

/* position을 absolute로 설정하게 되면, 부모 요소의 위치와 상관 없이
설정해준 좌표 그대로 위치하게 됩니다.
절대적으로, absolute하게 위치하게 되는 거죠.
absolute로 지정하게 되면, 해당 요소는 부모 요소와 관계가 끊기게 됩니다.
*/

#warp{
	margin-top: 1px;
	position:relative;
}


#line{
	width:100%;
	position:absolute;
	top: 88px;
	border-top: 2px solid #30204d;
}

#top_layout{
	width: 1350px;
	height: 176px;
	margin: 0 auto;
}

#top{
	width: 1350px;
	height: 176px;
	position:relative;
}

#top_header{
	width: 1350px;
	height: 88px;
}

/* h1 텍스트를 warp 밖으로 밀어내기 text-indent: -99999px; */
#top_header h1{
	background: url(../images/slogan.jpg) no-repeat;
	text-indent: -99999px;
	margin: 30px 0 0 180px;
	width: 330px;
	height: 39px;
	float:left;
}

#top_header #search{
	float:left;
	margin: 30px 0 0 180px;
}

/* 써치 박스 외곽선두께, 크기, 패딩 선언 */
#top_header #search .guideText{
	border: 1px solid #bbbbbb;
	width: 200px;
	height: 35px;
	padding: 0 10px;
	float:left;
}

.guide{
	/* html 선언하지 않은 클래스 script 불러올 클래스 */
	/* #top_header 안에 있는 input 검색창을 클릭 했을때 일어나는 이벤트 */
	color: #ccc;
}

/* 써치 검색이미지 위치 지정을 해주기위해 인라인요소를 블럭선언해주고 이미지 크기를 넣어줘야 출력이된다.*/
#top_header #search .search_img{
	display: block;
	float: left;
	width: 37px;
	height: 37px;
}


/* gnb 메뉴를 우측으로 보낸다. */ 
#top_header #gnb{
	float: right;
}

/* li 메뉴들을 플룻 레프트해서 가로 한줄로 만든다. */ 
#top_header #gnb li{
	float:left;
	padding-left: 10px;
	padding-top: 10px;
}

/*로고는 html 레이아웃에 없이 임의로 css 넣었다 */
#logo{
		background:url(../images/logo.jpg) no-repeat;
		width: 169px;
		height: 177px;
		position: absolute;
		float:left;
}

#top_menu{
	width: 1178px;
	height: 88px;
	float: right;
}

#top_menu #top_nav{
	float: right;
}

/* top_nav>li 메뉴를 세로에서 가로 한줄로 바꿔준다 */
#top_menu #top_nav>li{
	float: left;
	position: relative;
}


/* top_nav>li 메뉴 링크, 폰트사이즈, 위치 선정을 해준다 */
#top_menu #top_nav>li>a{
	display:block;
	float: left;
	padding: 35px 20px 30px 20px;
	font-size: 0.8em;
	text-decoration: none;
	color: #444444;
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: blod;
}

/* 2뎁스 드랍 메뉴 설정하기 시작 */

#top #top_menu #top_nav li .drop{
	position: absolute;
	top: 88px;
	left: 0;
	display: none;
}

#top #top_menu #top_nav li:hover .drop{
	display: block;
}

/*2뎁스 메뉴중 폰트와 이미지 부분의 위치조정 */
#top #top_menu #top_nav li .drop p{
	position: absolute;
	left: 170px;
}

#top #top_menu #top_nav li .drop ul{
	border-bottom: 3px solid #2b174a;
}

#top #top_menu #top_nav li .drop ul li{
	width: 170px;
	height: 30px;
	padding: 5px 0;
	background: #f2f2f2;
	border-bottom: 1px solid #cccccc;
}

#top #top_menu #top_nav li .drop ul li img{
	margin: 4px 15px 0 0;
}

.tit_sub a{
	display: block;
	font-size: 0.75em;
	font-weight: bold;
	text-decoration: none;
	color: #666666;
	padding: 7px 0;
	margin-left: 20px;
}

.tit_sub a:hover{
	color: #333333;
}

.drop>p>span.text1{
	position: absolute;
	top: 30px;
	left: 30px;
	color: #ffffff;
	font-size: 1.063em;
	font-weight: bold;
}

.drop>p>span.text2{
	position: absolute;
	top: 55px;
	left: 30px;
	color: #ffffff;
	font-size: 0.625em;
	font-weight: bold;
}

#top #top_menu #top_nav li.nav_tit #left1{
	position: absolute;
	left: -190px;
}

#top #top_menu #top_nav li.nav_tit #left2{
	position: absolute;
	left: -290px;
}


/* 2뎁스 드랍 메뉴 설정하기 끝 */


#main_image{
	width: 100%;
	height: 554px;
	background: #000;
	position: relative; /* relative 기준점을 잡아준다 */
	
}


#main_image a{
	display: block;
	margin: 0 auto;
	position: absolute;
	top: 0;
	left: 0;
}


#main_image a.none{
	/* 페이드 인, 아웃 필요한 css 구문 */
	/* a 속성안에 넣은 클래스를 선언해서 이미지를 숨긴다 */
	display: none;
}


/* 미들 레이아웃 시작 */
#middle_layout{
	width:1350px;
	margin: 0 auto;
}


#main1{
	width: 1350px;
	height: 462px;
	margin-bottom: 83px;
}

#main1_title{
	width: 1336px;
	height: 120px;
	margin: 0 auto;
}

/* overflow: hidden; 가로, 세로 사이즈를 넘어가면 보이지 않게하는 속성 태그 */
#main1_banner{
	width: 1336px;
	height: 342px;
	margin: 0 auto;
	overflow: hidden;
}

#main1_banner ul li{
	float:left;
	position: relative;
	z-index: 10;
}

/* height 값을 0으로 주고 난 이후 */
#main1_banner .color{
	width: 171px;
	height: 0px;
	position: absolute;
	bottom: 0;
	left: 0;
	background: #4b138b;
	z-index: 100;
	text-align: center;
	opacity: 0.7;
	transition-property:height;
	transition-duration:0.3s;
}

/* height 값을 171을 주고 마우스 오버시 바이올렛 박스가 올라오게 한다 */
#main1_banner ul li:hover .color{
	height: 171px;
}

/*마우스 오버시 a 링크에 걸려있는 css 설정을 해준다. */
/*폰트는 인라인 요소 이기때문에 디스플레이 블럭 처리해준다 */
#main1_banner ul li .color a{
	display: block;
	color: #ffffff;
	font-size:0.75em;
	font-weight: blod;
	margin-top: 40px;
	line-height: 20px;
	text-decoration: none;
}

/*마우스 오버시 a 링크에 걸려있는 폰트컬러 변경 */
#main1_banner ul li .color a:hover{
	color: #dfbfff;
}

#main2{
	width: 1335px;
	height: 300px;
	margin-bottom: 40px;
	margin: 0 auto;
}

#main2 #main2_board li.first{
	float:left;
	width: 443px;
	height: 276px;
}

/* 이달의 포커스, 스타와 함께 우측 여백 설정 */
li.board1, li.board2{
	margin-right: 3px;
}

 /* more 버튼 위치 선언 */
#main2 #main2_board li div .img{
	float: left;
	width: 367px;
	height: 58px;

}

#main2 #main2_board > li > div > a > .more1{
	margin-top: 7px;
}
.board2_text{
	margin-top: 15px;
	margin-left: 10px;
	float: left;
	color: #666666;
}

.board3_text{
	margin-top: 15px;
	margin-left: 10px;
	float: left;
	color: #666666;
}

ul.celebrity{
	float: left;
	width: 338px;
}

ul.celebrity a{ 
	text-decoration: none;
	font-size:0.813em;
	color: #666666;
}

ul.celebrity li{ 
	font-weight: blod;
	height: 25px;
}

ul.celebrity_date{
	float: left;
}

ul.celebrity_date li{
	height: 25px;
	font-size: 0.813em;
}

ul.notice{
	float: left;
	width: 338px;
}

ul.notice a{ 
	text-decoration: none;
	font-size:0.813em;
	color: #666666;
}

ul.notice li{ 
	font-weight: blod;
	height: 25px;
}

ul.notice_date{
	float: left;
}

ul.notice_date li{
	height: 25px;
	font-size: 0.813em;
}


#main3{
	width: 1350px;
	height: 930px;
}

#main3_banner{
	width: 1335px;
	height: 930px;
	margin: 0 auto;
}

#banner1 li{
	float:left;
	margin-bottom: 20px;
}


#banner2 li{
	float:left;
	margin-bottom: 20px;
}

#banner3 li{
	float:left;
	margin-bottom: 20px;
}

 
#main3_banner ul li:hover{
	opacity: 0.2;
	transition: 1s;
}

/* 민현 테스트
#banner1 li:hover{
	opacity: 0.2;
	transition: 1s;
	transform:scale(1.1);
	-webkit-transform:scale(1.1);
	-moz-transform:scale(1.1);
	-o-transform:scale(1.1);
	overflow: hidden;
}
*/


/* 미들 레이아웃 끝 */


/*레프트, 라이트 화살표 이미지 좌표 부모를 선언해준다. position: relative; */
#top_sub_menu{
	width: 1335px;
	height: 68px;
	margin: 0 auto;
	background: #ffffff;
	position: relative;
}

.left{
	position: absolute;
	top: 0;
	left: 0;
}

.right{
	position: absolute;
	top: 0;
	right: 0;
}

#top_sub_menu ul{
	width: 1221px;
	height: 68px;
	margin-left: 57px;
}

#top_sub_menu ul li{
	float: left;
	width: 203.5px;
	height: 67px;
	border-bottom: 1px solid #000;
	text-align: center;
}

#top_sub_menu ul li a{
	display: block;
	text-decoration: none;
	padding: 25.5px 0;
	color: #444444;
	border-left: 1px solid #30204d;
	font-weight: bold;
	font-size: 0.875em;
}

#top_sub_menu ul li a:hover{
	background: #643684;
	color: #ffffff;
}

#partner{
	width: 1300px;
	height: 46px;
	margin: 30px auto;
}

#partner li.left1{
	float:left;
}

#partner li.right1{
	float:right;
}

#partner li.partner{
	float:left;
	width: 290px;
	height: 46px;
	text-align: center;
}

#partner li.pat_mar{
	margin-left: 20px;
}


/* 푸터 레이아웃 시작 */

#footer{
	width: 100%;
	height: 1000px;
	background: #1a1a1a;
}

#footer #foot_information{
	width: 1337px;
	height: 630px;
	margin: 0 auto;
	background: url(../images/foot.jpg) no-repeat;
	position: relative;
}

#footer #foot_information .text1{
	font-size: 0.875em;
	color: #979797;
	line-height: 20px;
	text-align: center;
	position: relative;
	top: 40%;
}

#footer .foot_icon{
	float:left;
	width: 963px;
	position: absolute;
	top: 325px;
	left: 263px;
}

#footer .foot_icon li{
	float:left;
}

#foot_information h2{
	font-size: 1.5em;
	color: #bd934b;
	position: absolute;
	top: 525px;
	left: 40%;
	
}

#foot_information .text2{
	font-weight: blod;
	color: #979797;
	font-size: 0.875em;
	text-align : center;
	position: absolute;
	top: 585px;
	left: 220px;
	line-height: 17px;
}

#foot_information .text2 a{
	text-decoration: none;
	color: #ffffff;
}

#footer #foot_sitemap{
	width: 1336px;
	height: 370px;
	margin: 0 auto;
}

.sitemap_list{
	margin-left: 40px;
}

.sitemap_list>li{
	height: 330px;
	border-left: 2px solid #333333;
	color: #ffffff;
	font-weight: bold;
	font-size: 0.875em;
	padding: 40px 5px 0px 5px;
	margin-left: 12px;
}

.sitemap_list>li.bordernone{
	border-left: none;
}
.sitemap_list>li>ul{
	margin-top: 15px;
}
.sitemap_list>li>ul>li{
	list-style: square;
	color: #666666;
	margin-left: 20px;
}

.sitemap_list>li>ul>li>a{
	font-weight: normal;
	text-decoration: none;
	font-size: 0.75em;
	line-height: 25px;
	color: #666666;
	
}

.sitemap_list>li>ul>li>a:hover{
	color: #fff;
}
/* 푸터 레이아웃 끝 */

/* 우측 맨 아래 있는 화살표 이미지 버튼 */
#page_up_btn>a>img{
	position:fixed;
	right: 0;
	bottom: 0;
	z-index: 1000;
}