@charset "utf-8";
@import url("common.css");

/*Layer*/
html{overflow: scroll; overflow-x: hidden;}
body{width:100%;}
#wrap{width:100%;}
#container{width:100%;}
#footer{width:100%; min-width:1200px; background:#555555; padding-bottom:60px;}

/*header*/
.head{width:100%; height:130px; margin:auto;}
.head .nav_head{position:relative; width:90%; max-width:1545px; margin:auto;}
.head .logo{padding-top:35px;}
.head .nav{position:absolute; top:68px; right:0px; width:850px; height:85px; overflow:hidden;  -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;}
.head  .nav li{float:left; height:23px; font-family:"NanumSquareRoundEB"; padding:0px 34px 0px 32px; font-size:15px;}
.head  .nav li a{color:#7C7C7C}
.head  .nav li a:hover{color:#0d6882}
.head  .nav li.first{padding-left:0px;}
.head  .nav li.last{border-right:0px; padding-right:0px;}
.mobilem{display:none;}

/*main*/
.mobile{display:none;}
.cursor{cursor:pointer;}
.flexslider{width:100%;}
.flexslider .slides img{width:100%;}

.main01{width:90%; max-width:1300px; margin:auto; margin-bottom:80px;}
.main01 .title{text-align:center; margin-top:60px; margin-bottom:14px;}
.main01 .subtitle{text-align:center;margin-bottom:20px; font-size:15px; color:#7c7c7c; font-family:"NanumBarunGothic"; font-weight: lighter; }
.main01 .subimg{width:100%; max-width:1300px; overflow:hidden;}
.main01 .subimg li{float:left; width:18%; max-width:318px; margin-right:1%;}
.main01 .subimg li img{width:100%;}
.main01 .subimg li.last{margin-right:0px;}

.main02{width:100%; background:url(../images/main_02.jpg) top center no-repeat; background-size:cover; height:486px;}

/*footer*/
.foot{clear:both; overflow:hidden; width:100%; border-right:0px; border-left:0px;  margin:auto; }
.foot .btm{width:95%; max-width:1300px; margin:auto;}
.foot .copy{text-align:left;line-height:20.8px; font-size:12px;}
.foot .copy .logo{padding:30px 35px;}
.foot .copy, .foot .copytext{float:left;}
.foot .copytext{padding:30px}
.foot .copytext .big{font-size:13px; font-weight:100; margin-bottom:8px; color:#999999}
.foot .copytext .mid{font-size:13px;font-weight:100; color:#999999}
.foot .copytext .light{font-size:13px; margin:10px auto; color:#999999}

@media all and (min-width:641px) and (max-width:1057px){
.head{height:20vw;}
.head .logo img{width:20%;}
.head .nav{width:auto; top:80%;}
.head  .nav li img{width:80%; height:18px;}
.head .nav li{padding:0px 10px 0px 20px; font-size:24px;}
.main02{background:url(../images/main_02.jpg) top center no-repeat; background-size:cover; height:35vw;}
.main04{height:auto; padding-bottom:50px;}
.main04 .notice{float:none; width:446px; margin:auto; max-width:none; margin:auto; padding-top:67px;overflow:hidden;}
.main04 .notice_content{width:100%; margin-top:13px; overflow:hidden;}
.main04 .notice_content li{width:446px; font-size:14px; position:relative; margin:auto; margin-bottom:10px;}
.main04 .notice_content li::before{content:'·';}
.main04 .notice_content li span.date{position:absolute; right:0px;}
.main04 .notice_content li a{color:#88888a;}
.main04 .main_banner{float:none; margin-left:2%; width:100%;margin-top:40px; overflow:hidden;}
.main04 .main_banner li{float:left; width:23%; margin-right:2%; }
.mobile{display:none;}
.foot .btm{max-width:100%;}
.foot .copy{width:157px;}
.foot .copy .logo {padding: 20px 15px 20px 0px;}
.foot .copytext {padding: 15px 40px;}
.foot .copytext .big{font-size:14px;}
.foot .copy img{width:100%;}
}
@media all and (max-width:640px){
.head{height:144px;}
.head .logo { text-align:center; padding-top: 30px;}

.head .logo img{width:120px;}
.head .nav{width:100%; top:80px; padding-left: 60px;}
.head .nav ul{width:315px; margin:auto;}
.head .nav li{padding:0px 10px; text-align:center; font-size:14px; border-right:0px;}

.main01 .subimg li{width:49%; margin-bottom:1%;}
.main01 .title img{width:100%;}
.main01 .title{width:50%; margin:60px auto 14px;}
.main01 .subtitle{font-size:16px;}
.main02{display:none;}

.main03 .title img{width:50%;}
.main03 .subimg li{width:49%}
.main03 .subimg li.last{margin-right: 1%;}
.main03 .subimg li.clear{clear:none}

.main04{height:auto; padding-bottom:50px;}
.main04 .notice{float:none; width:100%; margin:auto; max-width:none; margin:auto; padding-top:67px;overflow:hidden;}
.main04 .notice_content{width:95%; margin:auto; margin-top:13px; overflow:hidden;}
.main04 .notice_content li{width:100%; font-size:14px; position:relative; margin:auto; margin-bottom:10px;}
.main04 .notice_content li::before{content:'·';}
.main04 .notice_content li span.date{position:absolute; right:0px;}
.main04 .notice_content li a{color:#88888a;}
.main04 .main_banner{float:none; margin:auto; width:90%;margin-top:40px; overflow:hidden;}
.main04 .main_banner li{float:left; width:49%; max-width:none; margin-right:2%; }
.main04 .main_banner li:nth-child(2), .main04 .main_banner li:nth-child(4){margin-right:0%;}

#footer{min-width:100%;}
.foot .btm{max-width:100%;}
.foot .copy{width:100%; text-align:center; border-right: 0;}
.foot .copy, .foot .copytext{float:none;}
.foot .copy .logo {padding: 10px 15px 10px 0px;}
.foot .copytext {width:100%; padding: 15px 0px;}
.foot .copytext .big, .foot .copytext .mid{font-size:12px;}
.foot .copy img{width:120px;}
.pc{display:none;}
.mobile{display:inline;}
.mobile_block{display:block;}
}