@charset "utf-8";
@import url('reset.css');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900|Work+Sans:300,400,500,600,700,900');


/* skipToContent */
#skipToContent a {position:absolute; top:0; left:0; z-index:9999; width:100%; height:1px; margin-top:-1px; display:block; background-color:#3875c1; font-size:14px; font-weight:bold; color:#fff; line-height:1; text-align:center; overflow:hidden}
#skipToContent a:focus, #skipToContent a:active {margin-top:0; height:auto; padding:10px 0px}

/* common */
#wrap{width:84%;max-width:1620px;margin:0 auto;}
#wrap2{width:100%;max-width:1920px;margin:0 auto;background:url('../images/sub07_07.jpg') center 0 no-repeat;background-size:cover;padding:10% 0 10% 0}
.img-responsive {display:block; max-width:100%; height:auto}
.width100{width:100%;padding:0; margin:0}
.hei100{height:100%;padding:0; margin:0}
.brmobile2{display:block}
.mobile{display:none}
.mobile2{display:none}
.auto {margin:0 auto}

/* header */
header 
.top{margin:3.5% auto;}
.top_left{position:absolute; top:6.5%; left:8%;z-index:999;font-family: 'Noto Sans KR', sans-serif;font-size:14px;color:#666666;font-weight:400;}
.top_left span{font-family: 'Work Sans', sans-serif;font-size:14px;color:#949494;font-weight:600}
.top_right{position:absolute; top:7.5%; right:8%;font-family: 'Work Sans', sans-serif;font-size:14px;color:#818181;font-weight:400;}
.top_right span{font-family: 'Work Sans', sans-serif;font-size:14px;color:#818181;font-weight:400;padding:20px 50px 0 0}
.btn_side{position:absolute; top:6.5%; right:0; z-index:999;display:inline-block;}
.logo{width:100%;text-align:center; margin:0 auto; z-index:999;font-family:'Verdana', 'Work Sans', sans-serif;font-size:36px;color:#333333;font-weight:bold;}
.logo a{color:#333333;}

.logo02{width:100%;text-align:center;margin:3.5% auto 1% auto; z-index:999;font-family:'Verdana', 'Work Sans', sans-serif;font-size:36px;color:#333333;font-weight:bold;}
.logo02 a{color:#333333;}
.vol{width:100%;font-family: 'Work Sans', sans-serif;font-size:14px;color:#818181;font-weight:400;margin:0 auto 3% auto;text-align:center}

/* menu */
#side{display:none; z-index:9999; width:100%; height:90%; position:fixed; top:0; right:0;background:#fff;padding:0; margin:0;right:-100%;overflow:scroll;}
#mask {position:absolute; z-index:999; background:rgba(0,0,0,0.6) 0 0; display:none; left:0; top:0; width:100%; height:100%; overflow:hidden;margin:0;padding:0}
.close {display:none; position:fixed; top:8%; right:9%; width:24px; height:24px; background-image:url('../../img/2019/btn_close.png'); background-position:0 0;background-size:24px 24px;text-indent:-9999px; opacity:1}

.listWrap02{overflow:hidden;text-align:center; margin:4% auto 5% auto; width:85%;}
.listWrap02 li{float:left;width:30%;margin:1% 1%;}
.listWrap02 .list02{clear:both}
.listWrap02 .thum{width:13.5%;display:block;float:left;margin:7px 15px 0 0;max-width:66px}
.listWrap02 .menu_txt{width:81%;float:left;display:block;}
.listWrap02 .listname{display:block;font-family: 'Noto Sans KR', sans-serif;font-size:14px;color:#000000;font-weight:700;text-align:left;margin-bottom:8px;text-transform:uppercase}
.listWrap02 .listTitle{display:block;font-family: 'Noto Sans KR', sans-serif;font-size:14px;color:#666666;font-weight:400;text-align:left;margin-bottom:3px}
.listWrap02 .listTxt{display:block;font-family: 'Noto Sans KR', sans-serif;font-size:14px;color:#959595;font-weight:300;text-align:left;}
.listWrap02 .menu_txt02{width:81%;float:left;display:block;margin-top:15px}
#container{width:100%;overflow:hidden}

/*메인 비주얼 이미지 움직임*/
.main_visual{position:relative;height:auto;margin:0 auto;width:100%;max-width:1620px}
.visual-box{overflow:hidden;position:relative;height:60%;max-height:800px}
.visual_text{z-index:600;position:absolute; top:53%; left:32%}
.visual_sky{overflow:hidden;
left: 0px;
bottom: 0px;
position:relative;
-webkit-transition-property: left top;
-webkit-transition-duration:20s;
-webkit-transition-timing-function: ease;
transition-property:left top;
transition-duration:20s;
transition-timing-function: ease;
}
.visual_sky2{overflow:hidden;left:0px;
bottom:0px;
left: 0px;
position:relative;
-webkit-transition-property: left top;
-webkit-transition-duration:20s;
-webkit-transition-timing-function: ease;
transition-property: left top;
transition-duration:20s;
transition-timing-function: ease;}
.visual_sky2{z-index:10;overflow:hidden;/*margin-top:-30px*/transform:scale(1.2)}
.visual_build{z-index:500;position:absolute;top:0; left:0;overflow:hidden;}

/*아이콘 돌아가는 움직임*/
.visual_icon{z-index:600;position:absolute; top:33%; left:45%}
.visual_icon02 img{width:100%; }
.visual_icon01{z-index:600;position:absolute; top:30%; left:46.9%}
.visual_icon02{z-index:600;position:absolute; top:38%; left:45%}

.w3-move{animation:w3-move 4s infinite linear}
@keyframes w3-move{
	from{transform:translateY(0px)}
	50%{transform:translateY(-20px)}
	to{transform:translateY(0px)}
}
/*.w3-spin{animation:w3-spin 7s infinite linear}
@keyframes w3-spin{
	0%{transform:rotate(0deg)}
	25%{transform:rotate(90deg)}
	50%{transform:rotate(180deg)}
	75%{transform:rotate(270deg)}
	100%{transform:rotate(360deg)}
	}
*/


/*콘텐츠*/
.con_wrap{width:80%;margin:6% auto;max-width:1620px}
.con_thum{background:#000;}
.con_thum img {opacity:1; -webkit-transition:opacity 0.35s; transition:opacity 0.35s;}
.con_thum:hover img {opacity:0.7;}
.con_box01{width:29%;display:block;float:left; margin:3% 2% 0 2%;max-width:365px;}
.con_box02{clear:both;width:29%;display:block;float:left; margin:-5% 2% 0 2%;max-width:365px}
.con_box03{width:29%;display:block;float:left; margin:-5% 2%0 2%;max-width:365px}
.con_box04{clear:both;width:29%;display:block;float:left; margin: -8% 2% 0 2%;max-width:365px}
.con_box05{width:29%;display:block;float:left; margin:4% 2% 0 2%;max-width:365px}
.con_box06{width:29%;display:block;float:left; margin:-7.5% 2% 0 2%;max-width:365px}
.con_box07{width:29%;display:block;float:left; margin:4% 2% 0 2%;max-width:365px}
.con_box08{clear:both;width:29%;display:block;float:left; margin:-21% 2% 0 2%;max-width:365px}

.con_wrap .con_name{display:block;font-family: 'Noto Sans KR', sans-serif;font-size:16px;color:#000000;font-weight:700;text-align:left;margin:15px 0 10px 0;text-transform:uppercase}
.con_wrap .conTitle{display:block;font-family: 'Noto Sans KR', sans-serif;font-size:14px;color:#818181;font-weight:400;text-align:left;margin-bottom:3px;letter-spacing:-0.03em}

/*
.con_wrap li{width:29%;display:block;float:left; margin:2% 2%;max-width:365px}
.con_wrap .con_name{display:block;font-family: 'Noto Sans KR', sans-serif;font-size:16px;color:#000000;font-weight:700;text-align:left;margin:20px 0 10px 0;text-transform:uppercase}
.con_wrap .conTitle{display:block;font-family: 'Noto Sans KR', sans-serif;font-size:14px;color:#818181;font-weight:400;text-align:left;margin-bottom:3px}
.con_wrap .pick-first{position:absolute; left:15%;max-width:365px;margin:2% 2%;}
*/

/*푸터*/
.footer {overflow:hidden;border-top: 1px solid #dcdcdc;padding:3% 0; margin-top:5%}
.address{float:left;font-size:12px;color:#8a8a8a;font-weight:400; display:inline-block;line-height:250%}
.address img{display:block;float:left;margin-right:20px}
.footer_btn{float:right; width:28%; margin:0 auto}
.footer_btn li{float:right; display:block; margin:0 0 0 3%}
.footer_btn .btn01{border:1px solid #000;border-radius:15px;padding:1% 5%;font-size:14px;color:#000;font-weight:400;display:block;}
.footer_btn .btn01 a{color:#000;}
/*
.footer_btn .btn01:hover{background:#000;}
.footer_btn .btn01 a:hover{color:#fff}
*/
.top_btn{display:block;position:fixed; bottom:5%; right:3%;}

@media screen and (max-width:1680px) {
	.listWrap02{width:90%}
	.footer_btn{width:35%}
	.con_box06{margin:-13% 2% 0 2%;}
}
@media screen and (max-width:1440px) {
.top_left{top:5.5%;}
.top_right{top:6.5%;}
.visual_text img{width:85%}
.visual_icon01{top:28%; left:47.3%}
.visual_icon01 img, .visual_icon02 img{width:80%}
.con_box06{margin:-16% 2% 0 2%;}
.con_box07{margin:5% 2% 0 2%;}
}
/*노트북*/
@media screen and (max-width:1366px) {
	.con_wrap{width:90%}
	.visual_build{height:100%}
	.visual-box{max-height:600px}
	.visual_text{top:51%}
	.visual_text img{width:80%}
	.visual_icon01{ left:49%}
	.visual_icon02{left:47%}
	.con_box06{margin:-15% 2% 0 2%;}
	.con_box07{margin:4% 2% 0 2%;}
}
@media screen and (max-width:1280px) {
	.listWrap02 li{width:42%;margin:1% 2%;}
	.listWrap02 .list02{clear:none}
	#side{height:100%}
	.footer_btn{width:45%}
	.footer_btn .btn01{font-size:12px;}
	.address{font-size:12px;}
	.address img{float:none;margin-bottom:5px}
	.top_left{top:5%;font-size:12px}
	.top_right{top:6%;}
	.visual_build{height:100%}
	.visual-box{max-height:550px}
	.visual_text{top:53%; left:33%}
	.visual_text img{width:70%}
	.brmobile2{display:none}
	.con_box03{margin:-4% 2%0 2%;}
	.con_box06{margin:-16% 2% 0 2%;}
}
/*아이패드 미니-가로*/
@media screen and (max-width:1024px) {
	.con_wrap{width:100%;margin:3% auto;}
	.listWrap02 .listTxt{font-size:12px}
	.visual_text{top:55%; left:33%}
	.visual_text img{width:60%}
	.visual_icon01{ top:26%}
	.visual_icon02{top:40%}
	.visual_icon01 img, .visual_icon02 img{width:60%}
	.con_wrap .con_name{margin:15px 0 5px 0;font-size:14px;}
	.con_wrap .conTitle{margin-bottom:0;font-size:13px;}
}
@media screen and (max-width:960px) {
	.visual_text{top:57%; left:32%}
	.visual_text img{width:55%}
	.visual_icon01{ left:45%}
	.visual_icon02{left:43%}
	.con_wrap .con_name{margin:10px 0 3px 0;}
	.footer_btn{float:none;overflow:hidden; margin:2% auto 4% auto;width:65%}
	.address{float:none;display:block; margin:2% auto 6% auto;text-align:center;width:60%;font-size:11px}
	.address img{clear:both;display:block; margin:2% auto;width:20%;}
	.listWrap02 li{width:90%;margin:3% 3%;}
	.listWrap02 .thum{width:15%;margin-left:2%;}
	.listWrap02 .menu_txt{width:80%;text-align:left;}
	.listWrap02 .menu_txt02{width:80%;text-align:left;}
}
/*아이패드 미니-세로, 아이폰 XS-가로*/
@media screen and (max-width:768px) {
	.top_left{top:3%;font-size:11px}
	.top_left span{font-size:11px}
	.top_right{top:4%;}
	.top_right span{font-size:11px}
	.logo{font-size:30px}
	.visual-box{max-height:400px}
	.visual_icon01{ left:46%}
	.visual_icon02{left:43%}
	.visual_icon01 img, .visual_icon02 img{width:50%}
	.visual_build{height:100%}
	.footer_btn{width:65%}
	.address{width:65%}
	.con_wrap{margin:2% auto;}
	.con_wrap .conTitle{font-size:12px}
	.listWrap02 li{width:90%;margin:3% 3%;}
	.listWrap02 .thum{width:15%;margin-left:2%;}
	.listWrap02 .menu_txt{width:70%;text-align:left;}
	.listWrap02 .menu_txt02{width:70%;text-align:left;}
	.close{top:4%}
}
@media screen and (max-width:570px) {
	.top_left{display:none}
	.logo{text-align:left}
	.top_right{top:3%;}
	.visual-box{max-height:300px}
	.visual_icon01{top:25%; left:46%}
	.visual_icon02{left:43%}
	.visual_icon01 img, .visual_icon02 img{width:38%}
	@keyframes w3-move{
	from{transform:translateY(0px)}
	50%{transform:translateY(-8px)}
	to{transform:translateY(0px)}
}
	.con_wrap .conTitle{font-size:12px}
	.footer_btn{width:95%;}
	.address{width:95%}
	.con_box01{width:100%;margin:5% auto;max-width:100%}
	.con_box02{width:100%;margin:5% auto;max-width:100%}
	.con_box03{width:100%;margin:5% auto;max-width:100%}
	.con_box04{width:100%;margin:5% auto;max-width:100%}
	.con_box05{width:100%;margin:5% auto;max-width:100%}
	.con_box06{width:100%;margin:5% auto;max-width:100%}
	.con_box07{width:100%;margin:5% auto;max-width:100%}
	.con_box08{width:100%;margin:5% auto;max-width:100%}
	.con_wrap .con_name{font-size:16px;margin:12px 0 7px 0;}
	.con_wrap .conTitle{font-size:14px}
}
/*아이폰XS*/
@media screen and (max-width:425px) {
	.visual-box{max-height:400px;margin-top:5%}
	.visual_build{right:0}
	.logo{font-size:24px}
	.logo02{font-size:24px}
	.vol{font-size:11px}
	.top_right{top:2%;}
	.top_right span{padding-right:45px}
	.con_box01{width:100%;margin:5% 0;}
	.con_box02{width:100%;margin:5% 0}
	.con_box03{width:100%;margin:5% 0}
	.con_box04{width:100%;margin:5% 0}
	.con_box05{width:100%;margin:5% 0}
	.con_box06{width:100%;margin:5% 0}
	.con_box07{width:100%;margin:5% 0}
	.visual_icon01{top:25%; left:46%}
	.visual_icon02{left:43%}
	.visual_icon01 img, .visual_icon02 img{width:30%}
	.footer_btn{width:100%}
	.footer_btn li{margin:0 1% 0 1%}
	.footer_btn .btn01{padding:1% 3%}
	.address{line-height:160%}
	.address img{width:30%}
	.con_wrap .con_name{font-size:16px;margin:12px 0 7px 0;}
	.con_wrap .conTitle{font-size:14px}
	.top_btn{right:1%;}
	.listWrap02 li{width:90%;margin:3% 3%;}
	.listWrap02 .thum{width:17%;margin-left:2%;}
	.listWrap02 .menu_txt{width:75%;text-align:left;}
	.listWrap02 .menu_txt02{width:75%;text-align:left;margin-top:5px}
	.listWrap02 .listTitle{font-size:12px}
	.close{top:3%; right:4%}
}
@media screen and (max-width:360px) {
	.logo{font-size:18px;margin-top:5%}
	.top_right span{font-size:10px}
	.footer_btn{width:100%}
	.footer_btn li{margin:0 2px 0 2px;}
	.footer_btn .btn01{padding:1% 2%}
}