@charset "utf-8";

/*인덱스 메인*/


.top_area {	position: relative;	overflow: hidden}
.top_area .slide_top {	height: 820px}
.top_area .slide_top li {	overflow: hidden;	position: relative;	max-width: 2560px;	width: 100%;	height: 820px;	margin: 0 auto}
.top_area .slide_top li a {	text-decoration: none}
.top_area .slide_top li p {	position: relative;	z-index: 1;	padding-top: 210px;	color: #fff;	font-size: 80px; font-weight:bold;	text-align: center;	line-height: 60px;	text-shadow: 1px 1px #797979}
.top_area .slide_top li p s_txt{	position: relative;	z-index: 1;	padding-top: 20px;	color: #fff;	font-size: 14px;	text-align: center;	line-height: 14px;}
.top_area .slide_top li p span {	font-weight: normal;}
.top_area .slide_top li img {	position: absolute;	top: 0;	left: 50%;	margin-left: -1280px;
	transform: matrix(1.1, 0, 0, 1.1, 0, 0);
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-ms-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
.top_area .slide_top li.active img {
	transition-delay: 0.4s !important;
	transform: matrix(1.0, 0, 0, 1.0, 0, 0);
	-webkit-transition: all 7.0s ease;
	-moz-transition: all 7.0s ease;
	-ms-transition: all 7.0s ease;
	-o-transition: all 7.0s ease;
	transition: all 7.0s ease;
}
.top_area .slide_top li.first.active img {/*transition-delay:0.0s !important*/}
.top_area .bx-pager {	position: absolute;	z-index: 10;	right: 20px;	bottom: 50%;	margin-bottom: -15px;	width: 26px;	line-height: 0}
.top_area .bx-pager .bx-pager-item {	width: 26px;	height: 26px;	padding-top: 4px}
.top_area .bx-pager .bx-pager-item a {	display: block;	position: relative;	width: 26px;	height: 26px;	text-indent: -9999px;}
.top_area .bx-pager .bx-pager-item a:after {	content: "";	display: block;	position: absolute;	top: 0;	left: 0;	width: 4px;	height: 4px;	margin: 11px 0 0 11px;	background: #11b5c1;	border-radius: 25px;}
.top_area .bx-pager .bx-pager-item a.active:after {	width: 14px;	height: 14px;	margin: 6px 0 0 6px;	-moz-transition: all 0.2s;	-o-transition: all 0.2s;	-webkit-transition: all 0.2s;	transition: all 0.2s;}
.top_area .bx-controls-direction {	display: none}
.top_area .bx-controls-auto {	position: absolute;	z-index: 10;	right: 18px;	bottom: 50%;	width: 30px;	height: 30px;	margin-bottom: -30px;}
.top_area .bx-controls-auto a {	display: block;	position: absolute;	top: 0;	left: 0;	width: 30px;	height: 30px;	background: url('/img/main/btn_play.png') no-repeat 0 0;	text-indent: -9999px;}
.top_area .bx-controls-auto a.active {	display: none}
.top_area .bx-controls-auto a.bx-stop {	background-position: 0 0}
.top_area .bx-controls-auto a.bx-start {	background-position: 0 -30px}

span.main_title_top_bar { display: block;    width: 40px;    height: 1px;    margin-bottom: 15px;    background: #fff; margin:80px auto;}








#prod .btnSet{position:absolute;width:100%; top:10px; z-index:10;}
#prod .dir{position:relative;max-width:1500px;top:100px;margin:0 auto}
#prod .prev{position:absolute;left:-110px;cursor:pointer}
#prod .next{position:absolute;right:-110px;cursor:pointer}


#company { width:1200px; display:inline-block; padding:20px 0;}
#company li.tty{ float:left; list-style:none; text-align:left;}
#company .company_box {position:relative; width:350px; height:364px; border:1px solid #fff;}
#company .company_box .pic01{position:absolute; left:-1px; top:-1px;}
#company .company_box .txt_box01 {height:180px; margin-top:180px; background-color:#fff; padding:0 25px 0 10px; text-align:left; border-bottom:1px solid #009ce7;}
#company .company_box h5{font-size:22px; font-weight:bold; padding:32px 0 30px 0;}
#company .company_box span{font-size:15px; letter-spacing:1px; line-height:22px; color:#333;}
#company a:hover { text-decoration:none; color:#009ce7; }

.thumb {overflow: hidden;}
.thumb img {-webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1); -webkit-transition:0.3s; -moz-transition:0.3s; -ms-transition:0.3s; -o-transition:0.3s; transition:0.3s;}
.thumb:hover img { -webkit-transform:scale(1.2); -moz-transform:scale(1.2); -ms-transform:scale(1.2); -o-transform:scale(1.2); transform:scale(1.2);}




.main_area {width: 100%;height: 690px;	background-image: url('/theme/panmagic/img/main_area_bg_pp.png');	background-repeat: no-repeat; background-color:#fff;	background-position: center top;	margin: 0 auto; position:relative;}
.main_area_item {width: 1200px;	height: 690px;	margin: 0px auto;	padding: 45px 0;	position: relative;	color: #fff;}
.item_box {	width: 300px;	height: 300px;	padding: 0 20px;}
.item_box h1 {font-size: 23px;	color: #fff;	padding: 30px 0 10px 0px;}
.item_box span {font-size: 15px;	width: 300px;	line-height: 20px; color:#fff;}
.item_01 {background-color: #ec3b81;	position: absolute;}
.item_02 {	width: 600px;	height: 600px;	background-color: #fff;	position: absolute;	left: 300px;	clear: both;}
.item_03 {	background-color: #58c3f0;	position: absolute;	left: 900px;}
.item_04 {	background-color: #8560a8;	position: absolute;	top: 345px;}
.item_05 {	background-color: #998675;	position: absolute;	left: 900px;	top: 345px}
.item_btn {	left: 20px;	bottom: 20px;	position: absolute;}
.item_pic {	right: 20px; bottom:20px;	position: absolute;}



/*.title_group {	position: relative; text-align:center;	letter-spacing: 1px; margin-bottom:30px;}
.title_group h3 {	font-size: 46px;	font-weight: 100;	padding-bottom: 30px;}
span.main_area_title_top_bar {	display: block;	width: 30px;	height: 1px;	 margin:30px auto;	background: #ef4418;}
span.title_guide_text {	font-size: 15px;	color: #7f7f7f;	line-height: 21px;}
*/
#product {	display:inline-block;	padding: 20px 0 0 0;}
#product li {}
#product li > a{display:block;	padding:3px; color:#333;}
#product .media_box {	position: relative;	width: 595px;border: 1px solid #e1e1e1;	background-color: #fff;}
#product .media_box .pic {	position: absolute;	left: -1px;	top: -1px;}
#product .media_box .txt_box {	height: 150px;	margin-top: 299px;	background-color:  #fff;	padding: 0 25px;}
#product .media_box .tit {	font-size: 23px;	font-weight: bold;	padding: 0 0 20px 0;	letter-spacing: 1px; }
#product .media_box h5 {	font-size: 14px;	font-weight: 100;	padding: 32px 0 30px 0;	letter-spacing: 1px; line-height:20px; }
#product .media_box span {	font-size: 15px;	letter-spacing: 1px;	line-height: 22px;	color: #333;}
#product a:hover {	text-decoration: none;	color: #009ce7;}


#photo_sr {	display:inline-block;	padding: 20px 0 0 0;}
#photo_sr li {}
#photo_sr li > a{display:block;	padding:3px; color:#333;}
#photo_sr .media_box {	position: relative;	width: 393.33px;border: 1px solid #e1e1e1;	background-color: #fff; margin:3px;}
#photo_sr .media_box .pic {	position: absolute;	left: -1px;	top: -1px;}
#photo_sr .media_box .txt_box {	height: 150px;	margin-top: 299px;	background-color:  #fff;	padding: 0 25px;}
#photo_sr .media_box .tit {	font-size: 23px;	font-weight: bold;	padding: 0 0 10px 0;	letter-spacing: 1px;}
#photo_sr .media_box h5 {	font-size: 16px;	font-weight: 100;	padding: 32px 0 30px 0;	letter-spacing: 1px;}
#photo_sr .media_box span {	font-size: 15px;	letter-spacing: 1px;	line-height: 22px;	color: #333;}
#photo_sr a:hover {	text-decoration: none;	color: #ec3b81;}




#jcl-demo .btnSet {	position: absolute;	top: 300px/*화살표버튼높이*/;	width: 100%;	z-index: 10;}
#jcl-demo .dir {	cursor: pointer;	position: relative;	max-width: 1460px/*화살표간격*/;	margin: 0 auto}
#jcl-demo .prev {	left: 0px;	position: absolute;	cursor: pointer}
#jcl-demo .next {	right: 0px;	position: absolute;	cursor: pointer}
.clear {	clear: both;	display: block !important;	content: "";}





/*도큐먼트타이틀*/

.title_group { width:1200px; margin:0 auto; text-align:left;letter-spacing:1px;}
.title_group h3 { font-size:46px; font-weight:100; padding-bottom:30px; line-height:48px; letter-spacing:0; }
span.title_top_bar { display: block;    width: 30px;    height: 1px;    margin-bottom: 15px;    background: #000;}
span.title_guide_text { font-size:16px; line-height:24px;}
span.main_area_title_top_bar {    display: block;    width: 30px;    height: 1px;    margin-bottom: 15px;    background: #000;}


.center_line { border-top:1px solid #ddd; margin:30px 0; height:1px;}
.st { height:320px; border-bottom:1px solid #ddd; padding:30px 0; }
.st li{ list-style:none; float:left;}



.tab_title { text-align: center; padding:80px 0 50px 0;}
.tab_title h1 { background: url('/theme/panmagic/img/sub_tit_line.jpg') no-repeat center bottom; padding-bottom: 40px; font-size: 48px;}

#doc_tit {width:100%; margin:0 auto; text-align:center;}
#doc_tit .doc_tit_01 { width:100%; height:360px; background-image: url('/theme/panmagic/img/tit_01.jpg');	background-repeat: no-repeat;	background-position: center top;}
#doc_tit .doc_tit_02 { width:100%; height:360px; background-image: url('/theme/panmagic/img/tit_02.jpg');	background-repeat: no-repeat;	background-position: center top;}
#doc_tit .doc_tit_03 { width:100%; height:360px; background-image: url('/theme/panmagic/img/tit_03.jpg');	background-repeat: no-repeat;	background-position: center top;}
#doc_tit .doc_tit_04 { width:100%; height:360px; background-image: url('/theme/panmagic/img/tit_04.jpg');	background-repeat: no-repeat;	background-position: center top;}
#doc_tit .doc_tit_05 { width:100%; height:360px; background-image: url('/theme/panmagic/img/tit_05.jpg');	background-repeat: no-repeat;	background-position: center top;}
#doc_tit .doc_tit_06 { width:100%; height:360px; background-image: url('/images/tit_06.jpg');	background-repeat: no-repeat;	background-position: center top;}
#doc_tit .doc_tit_07 { width:100%; height:360px; background-image: url('/images/tit_07.jpg');	background-repeat: no-repeat;	background-position: center top;}
#doc_tit .doc_tit_08 { width:100%; height:360px; background-image: url('/images/tit_08.jpg');	background-repeat: no-repeat;	background-position: center top;}
#doc_tit .doc_tit_09 { width:100%; height:360px; background-image: url('/images/tit_09.jpg');	background-repeat: no-repeat;	background-position: center top;}
#doc_tit .doc_tit_10 { width:100%; height:360px; background-image: url('/images/tit_10.jpg');	background-repeat: no-repeat;	background-position: center top;}
#doc_tit .doc_tit_11 { width:100%; height:360px; background-image: url('/images/tit_11.jpg');	background-repeat: no-repeat;	background-position: center top;}

#doc_tit h1 { font-size:66px; text-align:center; color:#fff; line-height:90px;text-shadow: 1px 1px #797979}
#doc_tit .mass{ font-size:14px; color:#fff; line-height:36px; letter-spacing:10px; padding-top:150px}
#doc_tit span { font-size:16px; text-align:center; color:#fff; line-height:36px; letter-spacing:1px;}
#doc_tit .line { padding:25px 0; background-image: url('/theme/panmagic/img/tit_line_01.jpg');	background-repeat: no-repeat;	background-position: center 22px;}

.location_box{width:100%; border-bottom:1px solid #ddd; background-color:#f5f5f5;}
#location {	text-align: left; color: #333; padding-left:5px; font-size:15px; width:1200px; margin:0 auto; padding:20px 0; letter-spacing:1px; border-left:0px solid #ddd; border-right:0px solid #ddd; padding-left:10px;}
#location span {background: url("/theme/panmagic/img/bgLocation.gif") no-repeat 0px; padding-left: 20px; margin-left: 15px; display: inline-block;}
#location strong {background: url("/theme/panmagic/img/bgLocation.gif") no-repeat 0px; padding-left: 20px; margin-left: 15px; display: inline-block;}

.boxTab {	overflow: hidden; clear: both; border-bottom: 0px solid #ddd; position: relative; margin-bottom:15px; width:1200px; margin:50px auto 0 auto;}
.boxTab li {	margin: 0px -1px 0px 0px; width:400px; float: left; box-sizing: border-box;}
.boxTab li a {	border-width: 1px 1px 1px 1px;; border-style: solid solid solid solid; border-color: rgb(217, 217, 217) rgb(217, 217, 217) currentColor; text-align: center; color:#333; line-height: 70px; font-size: 22px; display: block;}
.boxTab li a:hover {	background:#fff; border:1px solid #ddd; border-bottom:1px solid #000; color:#009ce7; font-size: 22px;}
.boxTab li a:focus {	background:#fff; border:1px solid #ddd; border-bottom:1px solid #000; color:#009ce7; font-size: 22px;}
.boxTab li a:active {	background:#fff; border:1px solid #ddd; border-bottom:1px solid #000; color:#009ce7; font-size: 22px;}
.boxTab li a.on {	background:#fff; border-top:3px solid #000; border-left: 1px solid #ddd; border-right: 1px solid #ddd; border-bottom:0px solid #fff; color:#333; font-size: 22px; font-weight:bold;}


.boxTab_p {	overflow: hidden; clear: both; border-bottom: 0px solid #ddd; position: relative; margin-bottom:15px; width:1200px; margin:50px auto 0 auto;}
.boxTab_p li {	margin: 0px -1px 0px 0px; width:400px; float: left; box-sizing: border-box;}
.boxTab_p li a {	border-width: 1px 1px 1px 1px;; border-style: solid solid solid solid; border-color: rgb(217, 217, 217) rgb(217, 217, 217) currentColor; text-align: center; color:#333; line-height: 70px; font-size: 22px; display: block;}
.boxTab_p li a:hover {	background:#fff; border:1px solid #ddd; border-bottom:1px solid #000; color:#009ce7; font-size: 22px;}
.boxTab_p li a:focus {	background:#fff; border:1px solid #ddd; border-bottom:1px solid #000; color:#009ce7; font-size: 22px;}
.boxTab_p li a:active {	background:#fff; border:1px solid #ddd; border-bottom:1px solid #000; color:#009ce7; font-size: 22px;}
.boxTab_p li a.on {	background:#fff; border-top:3px solid #000; border-left: 1px solid #ddd; border-right: 1px solid #ddd; border-bottom:0px solid #fff; color:#333; font-size: 22px; font-weight:bold;}






.doc_page_box { width:1200px; margin:0 auto; font-size:15px; color:#333; line-height:22px; letter-spacing:1px; padding:50px 0; list-style:none;}
/*#doc_page_box li{ float:left;}*/
.doc_page_box h1 {    font-size: 36px;    text-align: center;    font-weight: bold;    padding: 0px 0 40px 0;    width: 100%;    border-bottom: 1px solid #ddd;    margin-bottom: 20px;}
.doc_page_box h5 {font-size:28px; font-weight:bold; padding:32px 0 30px 0;}
.doc_page_box .t21 {font-size:21px; font-weight:bold; padding:20px 0; line-height:26px}
.doc_page_box_board { width:1146px; margin:0 auto; font-size:15px; color:#333; line-height:22px; letter-spacing:1px; padding:40px 0 0 0; list-style:none;}
/*#doc_page_box li{ float:left;}*/
.doc_page_box_board h1 {    font-size: 36px;    text-align: center;    font-weight: bold;    padding: 0px 0 40px 0;    width: 100%;    border-bottom: 1px solid #ddd;    margin-bottom: 20px;}

.t18 {font-size:18px; font-weight:bold; padding:10px 0; line-height:24px;}

.table { width:100%; border-collapse:collapse; border-bottom:0px solid  #F39; border-top:2px solid #000; letter-spacing:1px;}
.table th { margin:0; padding:24px; font-size:20px; font-weight:bold;} 
.table td { margin:0; padding:18px; background-color:#FFF}
.table th{border-collapse:collapse; border-bottom:1px solid #ddd; border-top:1px solid #ddd; border-left:1px solid #ddd; border-right:1px solid #ddd;}
.table td{border-collapse:collapse; border-bottom:1px solid #ddd; border-top:1px solid #ddd; border-left:1px solid #ddd; border-right:1px solid #ddd;}

.table_p { width:100%; border-collapse:collapse; border-bottom:0px solid  #F39; border-top:2px solid #000; letter-spacing:1px;}
.table_p th { margin:0; padding:20px; font-size:20px; font-weight:bold;} 
.table_p td { margin:0; padding:14px; background-color:#FFF}
.table_p th{border-collapse:collapse; border-bottom:1px solid #ddd; border-top:1px solid #ddd; border-left:1px solid #ddd; border-right:1px solid #ddd;}
.table_p td{border-collapse:collapse; border-bottom:1px solid #ddd; border-top:1px solid #ddd; border-left:1px solid #ddd; border-right:1px solid #ddd;}










/* 하단 레이아웃 */

.contact_box { width: 100%;    min-width: 1200px;    background: url(/theme/panmagic/img/contact_bg.jpg) center;    background-size: cover;}
.contact { max-width: 1200px;    margin: 0 auto;    display: flex;    justify-content: space-between;    align-items: center;    height: 300px;    color: #fff;}
.contact p { font-size: 22px; line-height:40px; font-weight:100; letter-spacing:1px;}
.contact button { background-color: transparent;}
.sub-btn { font-size: 24px; width: 350px; height: 70px;}
.sub-btn.brightness { color: #fff; border: 1px solid #ddd;}
.sub-btn.brightness:hover { background-color: #fff; color: #333;}





#footer { background-color:#282c35; min-width:1200px; margin: 0px auto; font-size:14px;border-top:0px solid #ddd;}
#footer .footW {	margin: 0px auto; width: 1200px; padding:50px 0 70px 0; overflow: hidden; position: relative; letter-spacing:1px;}
#footer .footW .footInfo .fList li a {	background: url("/img/bu_footBar.gif") no-repeat left 5px; padding: 4px 12px; color: rgb(204, 204, 204); float: left; display: block;}
#footer .footW .footInfo .fList li:first-child a {	padding-left: 0px;list-style:none;}
.clear {	clear: both; display: block !important; content: "";}
.clear::after {	clear: both; display: block !important; content: "";}

#footer .footW .footInfo .txt {	color: #666;}
#footer .footW .footInfo .txt span.bar {	background: url("/img/bu_footBar.gif") no-repeat right 5px; padding: 2px 8px 0px 0px; margin-right: 8px;}
#footer .footW .footCo {	top: 20px; right: 0px; position: absolute;}
.blind {	left: -50000px !important; top: -50000px; position: absolute;}
#footer .footW .footCo select {	background: rgb(101, 101, 101); border: 1px solid rgb(101, 101, 101); width: 228px; height: 26px; color: rgb(255, 255, 255);}
#footer .footW .footCo .visitorM p {	background: rgb(77, 77, 77); height: 30px; text-align: center; color: rgb(206, 206, 206); line-height: 30px; float: left;}
#footer .footW .footCo .visitorM p.today {	width: 107px; margin-right: 1px;}
#footer .footW .footCo .visitorM p.total {	width: 120px;}
#footer .footW a {color: #999;}
#footer .footW a:hover { color: #009ce7; text-decoration:none;}


#footer .family_site {position: absolute; right: 10px; bottom: 110px; width: 170px; height: 34px; }
#footer .family_site .btn_family{display: block; width: 170px; border-bottom: 1px solid #989898; color: #989898; position: relative; height: 34px; line-height: 34px; font-size: 14px; background: url(/theme/panmagic/img/ico_up_b.png) 100% 50% no-repeat;  cursor: pointer; z-index: 10;}
#footer .family_site .btn_family.on{background: url(/theme/panmagic/img/ico_down_b.png) 100% 50% no-repeat; }
#footer .family_site .site_list {position: absolute; background: #282c35; padding: 20px 0 80px 20px; border: 1px solid #999; bottom: 0px; width: 350px; right: -10px; z-index: 9; display: none;}
#footer .family_site .site_list.open {display: block;}
#footer .family_site li {float: left; width: 50%; font-size: 14px; padding-top: 5px; padding-right: 20px; 
	-webkit-box-sizing:border-box; -moz-box-size:border-box; box-sizing:border-box;
}
#footer .family_site li a {color: #989898; position: relative; display: inline-block;}
#footer .family_site ul a:hover {color: #009ce7;}
#footer .family_site ul a:after {display: block; content: ""; height: 1px; width: 0; background-color: #009ce7; position: absolute; left: 0; top: 22px;
  -webkit-transition: width 0.3s ease;
  -o-transition: width 0.3s ease;
  -moz-transition: width 0.3s ease;
  -ms-transition: width 0.3s ease;
  -kthtml-transition: width 0.3s ease;
  transition: width 0.3s ease;
}
#footer .family_site ul a:hover:after {width: 100%;}



.ft_link {margin:0 auto; width:1200px; height:50px; position:relative;}
.ft_link li { border-left:1px solid #666; text-align:center; padding:5px 15px; font-size:18px; line-height:20px; display:inline-block; } 
.ft_link li.last { border-right:1px solid #666;} 
.ft_link li a { text-decoration:none; color:#999;  }
.ft_link li a:hover { text-decoration:none; color:#009ce7;  }


.top_icon { position:absolute; z-index:5; left:1105px; top:15px;}