@charset "euc-kr";

/**
noscript ��ü������
**/

/* ���θ޴� */
#topmenu_acc{position:absolute; top:0px; left:0px; z-index:99; width:945px; padding:5px; background:#fff; border:1px solid #ccc;}
#topmenu_acc #topmenu_acc_inner{position:relative; overflow:auto; width:100%; height:55px;}
#topmenu_acc li.menu1{float:left; width:130px;}
#topmenu_acc li.menu2{float:left; width:130px;}
#topmenu_acc li.menu3{float:left; width:130px;}
#topmenu_acc li.menu4{float:left; width:130px;}
#topmenu_acc li.menu5{float:left; width:130px;}
#topmenu_acc li.menu6{float:left; width:130px;}
#topmenu_acc li ul{margin:5px 0 0 0;}
#topmenu_acc li ul li{padding:2px 0; font-size:0.92em;}
#topmenu_acc li ul li.current_on a{color:#3c6abd; text-decoration:underline;}


/**
���� ������
**/
/*
���� ���̾ƿ�
*/
#skip-navigation{z-index:9999; position:absolute; left:0; top:0;}
#skip-navigation *{list-style:none; margin:0; padding:0;}
#skip-navigation a{display:block; width:1px; height:1px; overflow:hidden; color:#000; white-space:nowrap;}
#skip-navigation a:focus,
#skip-navigation a:active{width:100px; height:auto; background:#ffd;}

#headArea{position:relative; float:left; width:100%; background:#fff;}
#header{overflow:hidden; width:1100px; height:35px; margin:0 auto;}

h1{position:absolute; top:0; left:0; z-index:96;}
h1 img{vertical-align:top;}

#lnb{float:right;width: auto;margin: 0 10px 0 0;padding:8px 0 0 0;z-index:99;}
#lnb *{float:left; font-size:98%; color:#4c4c4c;}
#global li{padding:0 10px; line-height:20px; background:url(/images/common/lnb_line.gif) no-repeat right center;}
#global li.last-child{background:none;}
#font_control li{padding:0 3px 0 0;}
#font_control li.last-child{padding:0;}

/* ���θ޴� */
#menuArea{position:absolute;top:35px;left:0;height:60px;float:left;width:100%;z-index: 95;}
#mainmenu{position:relative; overflow:hidden; width:1100px; margin:0 auto;}
#topmenu{float:right; width:875px;}
#topmenu li{float:left;}
#topmenu li a{float:left; width:145px; font-size:145%; font-weight:bold; color:#fff; line-height:60px; text-align:center; letter-spacing:-1px; text-decoration:none; z-index:90; background:#1066d0;}

#topmenu li.current a:active,
#topmenu li.current a:focus,
#topmenu li.current a:hover,

#topmenu li.current_on a:link,
#topmenu li.current_on a:visited,
#topmenu li.current_on a:active,
#topmenu li.current_on a:focus,
#topmenu li.current_on a:hover{color:#e8f2ff;}

#topmenu li .menu{position:relative; clear:both; width:auto; height:220px; display:none; z-index:99;}
#topmenu li .menu ul{display:block !important;position:absolute;top:0;left: 0;width: 100%;padding: 15px 0 0 15px;box-sizing: border-box;}

#topmenu li ul li{float:none;padding:0 0 0 9px;background: url(/images/common/dot.gif) no-repeat left top 9px;}
#topmenu li ul li a{display:block;text-align:left;float:none;width: 100%;padding: 3px 0;color:#303030 !important;font-size:110%;line-height: 1.2;font-weight:normal;word-break: keep-all;background:#fff;}

#topmenu li li.current a:active,
#topmenu li li.current a:focus,
#topmenu li li.current a:hover,

#topmenu li li.current_on a:link,
#topmenu li li.current_on a:visited,
#topmenu li li.current_on a:active,
#topmenu li li.current_on a:focus,
#topmenu li li.current_on a:hover{color:#303030 !important; text-decoration:underline;}

/*�������� ��� ��ȣ*/
p.tel{width:860px; clear: both; float:left; font-size:150%; font-weight:bold; margin:30px 0 0 0; padding:15px 0; text-align:center; border-top:1px solid #b6b6b6; border-bottom:1px solid #b6b6b6;}

/* Ǫ�� */
#footArea{overflow:hidden; width:100%; padding:25px 0 50px 0; background:#525252;}
#foot{position:relative; overflow:hidden; width:1100px; margin:0 auto;}
#foot .add_copy{float:left; color:#fff; line-height:20px;}
#foot .copyright{text-transform:uppercase;}
#foot .linksite{float:right;}
#foot .linksite select{width:178px; height:28px; line-height:28px; margin:0 3px 0 0; color:#2e2e2e; border:1px solid #cacaca;}

/*
���� ���̾ƿ�
*/
#mainContent h4{font-weight:bold; color:#000; letter-spacing:-1px;}
#mainTop{position:relative; width:100%; height:600px; margin:0 auto; overflow:hidden; padding:60px 0 35px 0;}
#mainMiddle,
#mainBottom{overflow:hidden; width:1100px; margin:0 auto;}
#mainMiddle{padding:0 0 55px 0;}
#mainBottom{padding:0 0 50px 0;}

/*���־�*/
#visualWrap{position:relative; width:2000px; height:600px; left:50%; margin-left:-1000px;}
#slogan{position:absolute;top:49px;left:847px;z-index: 94;}
#control .control1{float:left; position:absolute; top:528px; left:505px; z-index:99;}
#control .control1 li{float:left; width:495px; height:72px;}
#control .control1 li a{display:inline-block; width:495px; height:72px; line-height:72px; text-align:center; 
									text-decoration:none; color:#fff; font-weight:bold; font-size:200%;
									opacity:0.8; -ms-filter:alpha(opacity=80); filter:alpha(opacity=80); -moz-opacity:0.2;
									}
#control .control1 li a.list1{background:#000 url(/images/main/list1.png) no-repeat 163px 24px;}
#control .control1 li a.list2{background:#000 url(/images/main/list2.png) no-repeat 162px 22px;}
#control .control1 li.on a.list1{opacity:1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100); -moz-opacity:0; background:#309dd0 url(/images/main/list1.png) no-repeat 163px 24px;}
#control .control1 li.on a.list2{opacity:1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100); -moz-opacity:0; background:#309dd0 url(/images/main/list2.png) no-repeat 162px 22px;}
#control .control2 li a{z-index:99; width:55px; height:52px; padding:20px 0 0 0; text-align:center;
									opacity:0.8; -ms-filter:alpha(opacity=80); filter:alpha(opacity=80); -moz-opacity:0.2;
									background:#000;
									}
#control .control2 li.first-child a{position:absolute; top:528px; left:450px;}
#control .control2 li.last-child a{position:absolute; top:528px; left:1495px;}

/*��������*/
#board{float:left; position:relative; width:550px; height:162px; margin:0 20px 0 0;}
#board > ul{position:relative; float:left; width:100%;}
#board > ul > li{float:left; padding:0 25px 0 0;}
#board h4{font-size:200%; padding:8px 0 15px 0; transition:0.2s ease-in-out;}
#board h4 a{text-decoration:none;}
#board .on h4{background:url(/images/main/title_line.gif) no-repeat top left;}

#board ul ul{z-index:1; opacity:0; visibility:hidden; position:absolute; top:45px; left:0; width:100%; box-sizing:border-box;}
#board .on ul{opacity:1; visibility:visible; top:50px; transition:0.35s ease-in-out;}
#board ul ul li{overflow:hidden; line-height:26px; padding:0 0 0 13px; font-size:135%; background:url(/images/common/dot.gif) no-repeat left center;}
#board ul ul li a{color:#000; float:left; width:420px; display:inline-block; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
#board ul ul li span{color:#575757; float:right;}
#board .more{display:none; position:absolute; top:10px; right:5px; width:14px; height:14px; background:none;}
#board .on .more{display:block;}
#board .more img{vertical-align:top;}
#board ul ul li.none{width:538px; height:80px; text-align:center; line-height:80px; background:none;}

/*���޴�*/
#quick{float:left; width:530px; height:162px;}
#quick h4{font-size:200%; padding:8px 0 22px 0; background:url(/images/main/title_line.gif) no-repeat top left;}
#quick ul li{float:left; height:98px; padding:0 0 0 60px;}
#quick ul li.first-child{padding: 0 0 0 10px;}
#quick ul li.last-child{padding: 0 0 0 -15px;}


/*��������*/
#inquiry{float:left; width:210px; margin:0 20px 0 0;}
#inquiry > div {height:69px; box-sizing:border-box; padding-left:22px; margin:0 0 5px;}
#inquiry > div:last-child {margin:0;}
#inquiry h4{font-size:145%; color:#fff;}
#inquiry p, #inquiry a{font-weight:bold; color:#fff; text-decoration:none;}
#inquiry h4 span{color:#fffc00;}

#inquiry .inquiry1{background:#3fb0cc;}
#inquiry .inquiry1 h4{padding:7px 0 3px;}
#inquiry .inquiry2{background:#309dd0;}
#inquiry .inquiry2 h4{padding:7px 0 0;}
#inquiry .inquiry2 p{font-size:32px;}
#inquiry .inquiry3 {padding:0; background:#3087d0;}
#inquiry .inquiry3 a{display:block; height:81px; padding:0 0 0 22px;}
#inquiry .inquiry3 a p{position:relative; padding-left:13px; font-size:13px;}
#inquiry .inquiry3 a p:before {content:''; position:absolute; top:7px; left:0; width:9px; height:3px; background:#98c3e8;}
#inquiry .inquiry3 h4{padding:13px 0 6px;}
#inquiry .inquiry4{padding:0;}
#inquiry .inquiry4 a{display:block; height:70px; line-height:70px; color:#fff; font-size:17px; background:#3fb77d; text-align:center;}


/*�˾�*/
#popup{float:left; position:relative; width:320px; margin:0 20px 0 0;}
#popup .pop_list{position:relative; width:320px; height:289px;}
#popup .pop_list li{height:289px;}
#popup .pop_list img{width:100%; height:100%;}
#popup .pop_control{position:absolute; top:0; right:0; z-index:999;}
#popup .pop_control li{float:left; margin:0 1px 0 0;}
#popup .pop_control li.last-child{margin:0;}

/*���䰶����*/
#gallery{float:left; position:relative; width:530px; height:289px; background:#e8e8e8;}
#gallery h4{font-size:160%; padding:51px 0 25px 18px;}
#gallery a.more{position:absolute; right:18px; top:53px;}
#gallery .list{padding:0 0 0 18px;}
#gallery dl{float:left; margin:0 22px 0 0;}
#gallery dl.last-child{margin:0;}
#gallery dt{width:150px; height:110px; padding:0 0 8px 0;}
#gallery dt img{width:150px; height:110px;}
#gallery dd a{font-size:115%; color:#303030;}

/*
���� ���̾ƿ�
*/
#container_sub{float:left; width:100%; padding:60px 0 0 0; background:url(/images/sub/sub_bg.gif) repeat-x 0 60px;}
#container_sub #container{position:relative; width:1100px; margin:0 auto; padding:0 0 100px 0;}
#container_sub #container:after{content:''; display:block; clear:both; width:100%;}

#subLeft{float:left; width:200px;}
#subRight{float:right; width:860px;}

#container_sub #content{float:right; width:860px; padding:30px 0 0 0;}

/*������־�*/
#subVisual{float:right; position:relative; width:860px; height:150px;}
#subVisual img{float:right;}
#subVisual #slogan{position:absolute; top:12px; left:3px;}
#subVisual #slogan img{float:none;width: 100%;}

@media screen and (max-width: 568px) {
	#subVisual #slogan{
		left: 5%;
		top: 35px;
	}
}

/*����޴�*/
#submenu{width:200px; padding:40px 0 0 0;}
#submenu .sm_tit{width:200px; height:110px; text-align:center; line-height:110px; background:#309dd0;}
#submenu .sm_tit h2{color:#fff; font-size:250%;}
#submenu .sm_legiexp h2{font-size:200%;}
/*#submenu ul li a{display:inline-block; width:175px; height:41px; line-height:41px; border-bottom:1px solid #dfdfdf; color:#303030; font-size:115%; text-decoration:none; padding:0 0 0 25px; background:url(/images/sub/menu_off.gif) no-repeat 182px center; font-weight:bold;}*/
#submenu ul li a{
	display: flex;
    align-items: center;
    padding: 0 30px 0 20px;
    height: 47px;
    border-bottom: 1px solid #d8d8d7;
    font-size: 106%;
    line-height: 1.2;
    text-decoration: none;
    color: #212121;
    font-weight: bold;
	width:175px; height: 50px; line-height: 20px; 
	border-bottom:1px solid #dfdfdf;color:#303030;
	font-size:115%;
	text-decoration:none;
	padding:0 0 0 25px;
	background:url(/images/sub/menu_off.gif) no-repeat 182px center;
	font-weight:bold;
}


#submenu .depth2 li a:hover,
#submenu .depth2 li a:focus,
#submenu .depth2 li a:active,
#submenu .depth2 li.current_on a{color:#008acb; font-weight:bold; background:url(/images/sub/menu_on.gif) no-repeat 182px center;}



/*������ Ÿ��Ʋ*/
#pageInfo{overflow:hidden; padding:0 0 45px 0;}
#pageInfo .pageTitle{float:left; font-size:30px; line-height:46px;}
#pageInfo .loc{float:right; padding:0 0 0 13px; background:url(/images/sub/bul_loc.gif) no-repeat left center;}

/* ����� �޴� */
.m_menu, .btn_menu{display: none;}

@media screen and (max-width: 1100px) {
	
	/* common layout */
	#mainTop { width: 1100px; }
	#footArea { width: 1100px; }

	/* sub layout */
	#container_sub { width: 1100px; }
	#sub_greeting .greeting { box-sizing: border-box; padding: 45px 50px 60px 50px; }

}

@media all and (max-width: 1100px) {
	#subLeft {display: none;}
	#subRight {float: left;width: 100%;}
	#subVisual {padding: 0 15px; width: 100%; box-sizing: border-box;}
	#container_sub #content {padding: 0 15px; width: 100%; box-sizing: border-box;}

	#header {display: none;}
	#mainmenu,
	#mainTop,
	#container_sub,
	#container_sub #container,
	#footArea,
	#foot{width: 100%;}
	#footArea {padding: 20px 10px; box-sizing: border-box;}
}
@media all and (max-width: 768px) {
	#mainMiddle, #mainBottom,
	#board,
	#quick,
	#visualWrap {width: 100%;}
	#board {height: 220px;}
	#board ul ul li a {width: calc(100% - 120px);}
	#quick {height: auto;}
	#quick ul li {width: 33.33%; padding: 0;}
	#quick ul li.first-child {padding: 0;}
	#quick ul li:nth-child(n + 4) {margin: 20px 0 0;}
	#quick ul li a {display: block;text-align: center;}

	#inquiry {margin: 0 0 20px; width: 100%;}

	#popup,
	#gallery {width: 100%;}
	#gallery dl {margin: 0;width: 48%;text-align: center;}
	#gallery dl.last-child {display: none;}
	#gallery dt {margin: 0 auto;}
	
	#subVisual,
	#container_sub #content {padding: 0 10px;}
	#pageInfo .loc {display: none;}

	#menuArea {top: 10px;width: auto;}
	#menuArea h1 {position: static;padding: 0 0 0 15px;}

	#topmenu {display: none;}
	.btn_menu{display: block;z-index:93;position:absolute;top: 8px;right: 10px;width: 45px;height: 45px;padding: 0 0 0 18px;box-sizing: border-box;border: 0;background: none;}
	.btn_menu .bar{display: block;width:21px;height:2px;background:#1c1c1c;transition:0.25s ease-in-out;}
	.btn_menu .bar2 {margin: 5px 0;}

	.m_menu{position:fixed; top:0; right:-100%; width:60%; height:100%; overflow-y:auto; z-index:100; background:#ddd; transition:right 0.25s ease-in-out;}
	.m_menu .tit{display:none;}
	.m_menu.on{display: block;right:0;}
	.m_menu .m_top{position:relative;height: 60px;background:#fff;}
	.m_menu .logo{position:absolute; top:35px; left:12px; text-align:left; transform:none;}
	.m_menu > ul{float:left; width:100%; height:calc(100% - 110px); border-top:3px solid #182239; box-sizing:border-box;}
	.m_menu > ul a{display:block; text-decoration:none; cursor:pointer;}
	.m_menu > ul > li{width:43%; border-bottom:1px solid #3d3f4a;}
	.m_menu > ul > li > a{display: flex;flex-wrap: wrap;align-content: center;position:relative;height:3em;line-height: 1.2;padding: 0 0 0 10px;font-size:130%;color:#fff;background:#182239;}
	.m_menu > ul > li > a:before{display:none; content:''; position:absolute; top:50%; right:-8px; width:0; height:0; margin:-8px 0 0 0; border-left:15px solid #fff; border-top:15px solid transparent; transform:rotate(45deg);}
	.m_menu > ul > li.current_on > a,
	.m_menu > ul > li > .on{font-weight: 500;background:linear-gradient(125deg, #88c37f 0%, #2a9e98 70%);}
	.m_menu > ul > li.current_on > a:before,
	.m_menu > ul > li > .on:before{display:block;}
	.m_menu > ul > li > div {position:absolute;top: 60px;left:43%;display:none;width:57%;height: calc(100% - 60px);padding:13px 0.8em 0 1.2em;border-top:3px solid #182239;background:#fff;box-sizing:border-box;}
	.m_menu > ul > li.current_on .menu,
	.m_menu > ul > li .on + .menu{display:block !important;} 
	.m_menu > ul > li > div > ul > li {margin:0 0 2px; border-bottom:1px solid #e6e6e6;}
	.m_menu > ul > li > div > ul > li > a{position:relative;padding: 10px 1em 10px 1.5em;font-size:115%;font-weight: 600;}
	.m_menu > ul > li > div > ul > li > a:before,
	.m_menu > ul > li > div > ul > li a[target="_blank"]:after{content:''; position:absolute; top:50%; right:8px; display:block; width:10px; height:10px; margin:-5px 0 0 0; background:url(/images/kr/main/ico_ctrl.png) no-repeat -83px -38px;}
	.m_menu > ul > li > div ul li.hasUl > a:after{content:'';display:block; position:absolute; top:50%; right:10px; width:8px; height:8px; margin:-7px 0 0 0; border-bottom:2px solid #555; border-right:2px solid #555; transition:transform 0.3s; transform:rotate(45deg); background:none;}
	.m_menu > ul > li > div ul li.hasUl > a.on:after{margin:-4px 0 0 0; transform:rotate(225deg);}
	.m_menu > ul > li > div ul li:not(.hasUl) > a[target="_blank"]:after{width:14px; height:14px; margin:-7px 0 0 0; background:url(/images/common/ico_new.png) no-repeat 100% 0;}
	.m_menu > ul > li > div > ul > li > a:before{position:absolute;top: 13px;left:0.2em;width: 5px;height: 5px;margin:0;border:4px solid #9faab2;border-left:4px solid #143852;border-top:4px solid #143852;border-radius:50%;background:none;}
	.m_menu > ul > li > div > ul > li > ul{display:none; overflow:hidden; width:100%; margin:2px 0 0 0; padding:0.6em 0 0.5em 0.5em; box-sizing:border-box; background:#f3f3f3;}
	.m_menu > ul > li > div > ul > li > ul li a{position:relative; padding:6px 0 6px 13px;}
	.m_menu > ul > li > div > ul > li > ul li a:before{content:'';display:block;position:absolute;top: 15px;left:4px;width:4px;height:4px;border-radius:50%;background:#32acb6;}
	.m_menu > ul > li.current_on .current_on > a{font-weight:800; color:#222;}

	.btn_menu_close{display:block;z-index: 100;position:absolute;top: 15px;right:3%;width: 35px;height: 35px;border-radius:50%;border:1px solid rgba(0,0,0,0.6);background:none;}
	.btn_menu_close .bar{position:absolute;top: 16px;left: 4px;display:block;width:25px;height:1px;background:rgba(0,0,0,0.6);}
	.btn_menu_close .bar1{transform:rotate(45deg);}
	.btn_menu_close .bar2{transform:rotate(-45deg);}

	#subVisual > img {display: none;}

	.mask{visibility:hidden; opacity:0; display:block; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.45);}
	.mask.on{z-index:95; visibility:visible; opacity:1; transition:opacity 0.25s linear;}

	#pageInfo {padding: 20px 0 30px;}
	#pageInfo .pageTitle {font-size: 260%;}
}

/* 2025 07 10 768px */
@media screen and (max-width: 768px) {
	#header{
		width: 100%;
		display: block;
	}

	#menuArea {
		top: 38px;
	}

	.btn_menu{
		top: 36px;
	}

	#visualWrap{
		margin-left: -50%;
		position: relative;
	}

	.slick-prev{
		width: 35px;
		height: 35px;
		background-color: #d8d8d7;
		font-size: 0;
		position: absolute;
		bottom: 10px;
		right: 60px;
		border: none;
		z-index: 2;
	}

	.slick-next{
		width: 35px;
		height: 35px;
		background-color: #d8d8d7;
		font-size: 0;
		position: absolute;
		bottom: 10px;
		right: 10px;
		border: none;
		z-index: 2;
	}

	.slick-next:before{
		content: '>';
		font-size: 20px;
		color: #333;
	}

	.slick-prev:before{
		content: '<';
		font-size: 20px;
		color: #333;
	}

	#slogan{
		left: 5%;
	}
}

@media screen and (max-width : 568px) {
	#menuArea {
        top: 50px;
    }

	.btn_menu {
        top: 50px;
    }

	#mainTop{
		height: fit-content;
	}

	#visualWrap{
		height: fit-content;
		overflow: hidden;
	}

	.slick-slide img{
		width: 100%;
		object-fit: cover;
		aspect-ratio: 16 / 9;
	}

	#slogan{
		width: 90%;
		top: 14px;
	}

	#slogan img{
		width: 100%;
	}

}