@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&display=swap');
/*font-family: 'Noto Sans KR', sans-serif;*/

*{margin:0; padding:0}
li{list-style:none}
img{border:none}
a{text-decoration:none}

h1,h2,h3,h4,h5,h6,p,div,section,td,th,label,adddress,a,body{font-family: 'Noto Sans KR', sans-serif; font-size:14px; font-weight:400; color:#000}

.mob_btn, .mob_close{display:none}

@media all and (min-width:1201px) {
.contents{max-width:1200px; margin:0 auto; position:relative;}	
/*.header_wrap{max-width:1200px}*/ 
}

.up{position:fixed; width:50px; height:50px; bottom:0; right:0; background-color:#000;font-size:30px; text-align:center; line-height:50px; cursor:pointer}
.up p{color:#FFF}

#header{position:fixed; width:100%; height:90px; z-index:9; top:0; background-color:rgba(0,0,0,0.5)}
.header_wrap{position:relative; margin:0 auto; height:90px; }
.logo{position:relative; top:15px; left:50px}
/*.logo>a>img{width:100%}*/
.logo a{display:table}
.logo a div{display:table-cell; vertical-align: middle;}
.logo a div img{width:70px}
.logo a div p{color:#FFF; font-size:20px; font-weight:bold;}
.gnb{position:absolute; right:30px; bottom:30px}
.gnb>ul{display:table;}
.gnb>ul>li{display:table-cell; table-layout:fixed;  text-align:center; padding-left:5px; padding-right:5px; box-sizing:border-box; padding:0 20px}
.gnb>ul>li>a{font-size:18px;  font-weight:500; color:#FFF }
.gnb>ul>li>ul>li:last-child a{border-bottom:none}

.section_wrap{background-image:url(../image/body_back.jpg); background-color:#fdfdfd; background-size:100%; width:100%; background-repeat:no-repeat; padding:65px 0}
.section_wrap2{position:relative; overflow:hidden; padding:65px 0}
.section_wrap3{background-color:#f5f5f5; padding:65px 0}
.section_wrap4{ padding:65px 0}
#contents3{padding:65px 0}

.company_wrap{width:720px; position:relative; margin:0 auto; }
.contents>h2, .company_wrap>h2, .online_title>h2{text-align:center;  font-size:30px; margin-bottom:40px;}
.company_wrap>p{text-align:center; font-size:16px; margin-bottom:20px}

.company1{margin-top:80px}
.company1>div{display:table; width:100%; position:relative; line-height:40px; border:2px solid #DDD; border-bottom:none}
.company1>div.com_last{border-bottom:2px solid #DDD}
.company1 div>div{display:table-cell; word-break:keep-all; line-height:20px; padding:10px 0}
/*.line{position:absolute; width:1px; height:50%; background-color:#EEE; left:auto; top:25%;}*/
.com_left{width:25%;  font-size:16px; color:#555; text-align:center; vertical-align:middle; font-weight:bold; border-right:2px solid #CCC}
.company1 div>div.com_right{padding-left:30px }

/*float_wrap*/
.back_build{position:absolute; bottom:-100px; right:-50px}
.float_wrap{position:relative; width:800px; margin:0 auto; overflow:hidden;}
.float_wrap>div{float:left;}
.float_wrap2>div{width:50%}
.float_img>img{width:100%}
.float_div_left>img{width:100%;}
.float_div_right{margin-left:50px; width:500px}
.ceo_img{width:250px; position:relative; box-sizing:border-box; background-size:100%;}
.ceo_img>img{width:100%}
.ceo_img>img.mob_img{display:none}
.div_line{position:absolute; border:2px solid #DDD; border-radius:2px; top:10px; left:10px; width:100%; height:100%;}
.profile>li{font-size:18px; margin-top:5px}
.ceo_img p{font-weigh:bold; font-size:20px; text-align:center; margin-top:10px}

/*status*/
.status{position:relative; width:100%; margin:0 auto}
.status>ul{overflow:hidden}
.status>ul>li{float:left; width:14.66%; margin-left:2%}
.status>ul>li img{width:100%}
.status>ul>li p{text-align:center; font-size:15px; padding:10px 0}
.status_bottom{margin-bottom:70px}

/*list*/
.list{position:relative; width:95%; margin:0 auto;}
.list>ul{overflow:hidden}
.list>ul>li{float:left; width:22.75%; margin-left:3%; margin-bottom:3%; position:relative; overflow:hidden; box-sizing:border-box; border:1px solid #EEE; }
.list>ul>li:nth-child(4n+1){margin-left:0}
.list>ul>li>figure{width:100%}
.list>ul>li>figure img{width:100%; display:block; transition-duration:1s}
.over_box{position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); display:none;}
.over_box p{font-size:20px; text-align:center; position:absolute; top:50%; transform:translateY(-50%); color:#FFF; width:100%}
.more_btn{position:relative; width:130px; border:1px solid #000; background-color:#EEE; text-align:center; font-weight:bold; line-height:30px; margin:30px auto 0; cursor:pointer;}
.list2>ul>li{height:180px; cursor:pointer}
.list2>ul>li>figure{width:80%; position:relative; margin:0 auto; height:100%}
.list2>ul>li>figure>img{height:100%; width:auto; left:50%; transform:translateX(-50%); position:absolute}
.list2>ul>li{background-color:#FFF}


.online_back{background-image:url(../image/online_back.jpg); background-size:100%; background-size: cover; background-position:center; background-repeat:no-repeat; padding:80px 0}
.online_wrap{display:table; width:900px; position:relative; margin:0 auto;  table-layout:fixed}
.online_wrap form{padding-left:50px}
.online_wrap>div{display:table-cell}
.contents>h3, .contact-us>h3{font-size:30px; text-align:center}
.contact-us>p{margin-bottom:20px; text-align:center; margin-top:20px}
.contact_list li{margin-bottom:10px; text-align:center}
.contact_list{margin-bottom:30px}
.contents label{width:30%; display:inline-block; margin-bottom:10px; font-size:16px}
.contents input[type="text"]{padding:5px; border-radius:5px; width:69%; position:relative; border:1px solid #EEE}
.file-wrap{position:relative; overflow:hidden; height:35px}
.file-wrap .btn-file-find {    position: absolute; right: 5px; width: 103px;  height: 32px;  border: none;background-image:url(../image/btn-file.png);background-color:rgba(255,255,255,0); top:2px}
#msg5 {visibility: hidden; opacity: 0;}
.view-privacy{position:absolute; right:13px; cursor:pointer; margin-top:10px}
.privacy-content {  display: none;   position: fixed;left: 0; top: 0;width: 100%; height: 100%; overflow-y: auto; z-index: 500;}
.privacy-content-inner { max-width: 600px;  height: 100%;  display: table; margin: 0 auto;}
.privacy-content-cell { display: table-cell; vertical-align: middle;padding: 10px;}
.privacy-content-cell div { background-color: #fff; padding: 20px;border: 5px solid #333;  position: relative;}
.protect_close{position:absolute; right:10px; top:10px; font-size:18px; cursor:pointer}
.submit-msg { text-align: right; padding-right: 10px; position: relative;top: 15px;}
.submit-msg button{background-color:#111; color:#FFF; padding:8px 10px}
textarea{width:69%; border:1px solid #EEE; margin-left:31%; border-radius:5px}
label.textarea{position:absolute}

/*lightbox*/
/*.light_box_wrap{position:fixed; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); z-index:999}
.light_box{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%)}
.light_box>img{width:inherit; height:none}*/


.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index:99;
  display:none
}
.lightbox-active {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:60%; height:80%; text-align:center;}
.lightbox-active img{max-width:100%; max-height:100%; object-fit:contain; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%)}

/*.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.3);
  z-index:99
}
.lightbox-active {
  display: flex;
  position:relative;
  justify-content: center;
  max-width: 60%;
  max-height: 80%;
}
.lightbox-active img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display:block;
  
}*/
.light_close{position:absolute; top:-35px; cursor:pointer; left:50%; transform:translateY(-50%)}
.light_close>i{font-size:30px; color:#FFF}

table{border-spacing: 0;border-collapse: collapse; width:70%; position:relative; margin:0 auto; table-layout:fixed}
table caption{width:0;height:0;overflow:hidden;}
table,th,td{font-size:14px;padding:0;/*line-height:1.5em;*/border:none;box-sizing:border-box;}
.table4 th{font-weight:bold; border-right:1px solid #AAA; padding:10px 0; font-size:16px}
.table4 td{border-right:1px solid #AAA; padding-left:15px}
tr{border:1px solid #AAA; border-right:none; }

#footer{position:relative; width:100%; background-color:#333; height:170px; }
.footer_wrap{position:relative; width:900px; margin:0 auto;  padding-bottom:40px}
.foot_logo{position:absolute; top:40px; left:50px}
.copy{position:relative; margin:0 auto;  margin-left:150px; padding-top:40px}
.copy p{color:#FFF; font-size:16px; text-align:left; position:absolute; right:50px; margin-top:10px}
.copy p span{color:#65cefd}
@media all and (max-width:1201px) {
.contents{width:95%; margin:0 auto}	

}
@media all and (max-width:1050px) {
.gnb>ul>li>a{font-size:15px}	
}

@media all and (max-width:950px) {
.mob_btn, .mob_close{display:block;}

#header{height:60px; background-color:#30315c !important }
.header_wrap{height:60px}
.logo{top:10px; left:10px}
.logo a div img{width:50px}
.logo a div p{color:#FFF; font-size:14px}
.gnb{position:fixed; height:100%; background-color:#FFF; width:250px; right:-250px; z-index:99999}
.gnb>ul{display:block; position:relative; width:90%; margin:0 auto; margin-top:100px; border-top:1px solid #CCC}
.gnb>ul>li{display:block; width:100%; text-align:left; padding:5px 5px; box-sizing:border-box; border-bottom:1px solid #CCC}
.gnb>ul>li>a{color:#000 !important}

.mob_btn{position:absolute; right:20px; top:15px}
.mob_btn i{font-size:35px; cursor:pointer; color:#FFF}
.mob_close{position:absolute; top:40px; right:10px}
.mob_close i{font-size:25px; cursor:pointer}


.top_banner{margin-top:60px}

.online_wrap, .footer_wrap{display:block; width:100%}
.online_wrap>div{display:block}	
.online_wrap form{padding-left:0}
.file-wrap .btn-file-find{right:30px}
textarea{margin-left:30.5%}	
}
@media all and (max-width:900px) {
#footer{height:auto}
.foot_logo{position:relative; margin:0 auto; width:65px; left:0; margin-bottom:10px; top:20px}
.foot_logo img{width:100%}
.copy{margin-left:0; padding-top:20px}
.copy p{text-align:center; position:relative; width:100%; right:0; word-break:keep-all; font-size:12px}
.status>ul>li p{font-size:14px}	
.light_close{top:50%; cursor:pointer; left:auto; right:-40px; transform:translateY(-50%)}
}
@media all and (max-width:850px) {
.float_wrap>div{float:none}
.ceo_img>img.mob_img{display:block}
.ceo_img>img.com_img{display:none}
.ceo_img{width:40%; margin:0 auto; margin-bottom:50px}
.float_wrap{width:100%}
.float_wrap2{width:95%}
.float_div_right{width:90%; margin-left:5%}
.ceo_speech{width:90%}	

.company_wrap{width:100%}
}
@media all and (max-width:800px) {
.status>ul>li{width:30.66%; margin-bottom:20px}	
.list>ul>li{width:32.66%; margin-left:1%; margin-bottom:1%}
.list>ul>li:nth-child(4n+1){margin-left:1%}
.list>ul>li:nth-child(3n+1){margin-left:0}
.list{width:100%}
table{width:100%}
.table4 td{padding-left:10px}
}
@media all and (max-width:600px) {
.contents label{font-size:14px}	
.profile>li, .company_wrap>p, .over_box p{font-size:14px}
.com_left{width:20%; font-size:14px}
.company1 div>div.com_right{padding-left:10px}
.contents>h2, .company_wrap>h2, .online_title>h2{font-size:23px}
.list>ul>li{width:48.5%; margin-left:3%; margin-bottom:20px}
.list>ul>li:nth-child(3n+1){margin-left:3%}
.list>ul>li:nth-child(2n+1){margin-left:0}
}
@media all and (max-width:450px) {
.status>ul>li{width:45.5%; margin-left:3%}	
.table4 th{font-size:14px}
.table4 td{font-size:12px}	
}