@charset "UTF-8";

@import url("reset.css");

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:400');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:500');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:700');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:900');
html, body{
    margin: 0;padding: 0;
	min-width: 100%;
    width: 100%;
    max-width: 100%;
	min-height: 100%;
    height: 100%;
    max-height: 100%;
}

body{font-family: 'Noto Sans KR', sans-serif;line-height:1.6;color:#555;  }
a:link, a:visited, a:hover, a:active{text-decoration: none;color:#666 }
* {-webkit-text-size-adjust:none;} /*아이폰 가로시 폰트 확대 막음*/

/*폰트두께 100,300,400,500,700,900*/

.wrap{width:100%;overflow-x:hidden; position:relative;}
.wrap_h{height:100%}
.bg {background:#e6e6e6;}
.header {width:100%; max-width: 1200px; margin: 0 auto;}
.header .navbox {margin-top:20px;position: relative;}
.header  nav {position:absolute; top:27px; display:block;right:0;overflow:hidden}
.header  h1 > a{font-size:37px; font-weight:100;color:#222}
.header  nav > ul > li {float:left; margin:0 8px; font-size:12px;color:#888; position: relative;}
.header  nav > ul > li > a {font-size:14px;color:#888;display:block;}
.header  nav > ul > li > a:hover {color:#111; font-weight:bold;  }



.header  nav > ul > li:after {
    content: '';
    display: block;
    border: 1.5px solid black;
    background-color: black;
    opacity: 0;
    width: 0;
    -webkit-transition: all 0.3s cubic-bezier(0.18, 0.04, 0, 0.99);
    transition: all 0.3s cubic-bezier(0.18, 0.04, 0, 0.99);
    position: absolute;
    bottom:0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    left: -1%;
  }
  
  .header  nav > ul > li:hover::after {
    width: 96%;
    opacity: 1;
  }

.m_nav {display:none;}
.main_visual{position:relative;width:100%;height:100%}
.mainVisual{z-index:1;height:100%; margin:0 auto; text-align:center; width:100%}
.main_visual li{height:100%; width:100%; display:block; }


.main_hd {width:100%;position:absolute;top:0;left:0;z-index:500;height:100%;overflow:hidden}
.B {display:block}
.content_wrap {max-width:1200px;margin: 0 auto; padding-top:20px;position:relative}
.img_box {width:100%; max-width:1200px; padding:20px 0}
.img_box > img {width:100%}

.work_list > ul {width:100%}
.work_list > ul > li {display:inline-block; float:left;width:calc(33.3% - 10px);margin:0 5px 5px; box-sizing:border-box;}
.work_list2 {padding-top:100px}
.work_list2 > ul > li {width:25%;box-sizing:border-box}
.work_list > ul > li span {display:none}

.work_list > ul > li img {width:100%}
.work_list > h2 {font-size:50px; font-weight:700; display:block; text-align:center; width:100%; line-height:1.1;padding-top:70px}
.work_list > h3 {font-size:16px; color:#555;display:block; text-align:center; width:100%; line-height:1.8; padding-top:40px; padding-bottom:70px} 

.about_box {width:100%}
.about_box img {width:100%}
.about_content {padding:20px 0}
.about_content > h2 {font-size:30px; font-weight:700}
.about_content > .subtit {font-weight:300; padding:10px 0;font-size:33px; line-height:1.2; color:#111}
.pr_box {position:relative; overflow:hidden}
.pr_tit {margin-top:-22px; padding-bottom:20px}
.pr_tit > h2 {font-size:24px;font-weight:700}
.pr_img { max-width:900px; width:75%}
.pr_img > img {width:100%}
.about_txt {display:block; font-size:18px; font-weight:700;color:#333; padding-top:10px}
.about_txt2 {display:block; color:#111; font-weight:500;font-size:16px;padding-top:8px}
.about_content > p {font-size:15px; color:#888; padding:3px 0 30px 0}

.contact_box > h2 {font-size:45px; font-weight:700; padding-top:70px}
.contact_box > p {font-size:16px; font-weight:300; line-height:1.4; padding:30px 0; color:#888}
.contact_box > span {font-size:15px; color:#222; font-weight:500; display:block; line-height:2}
.layer_menu{display:none}


@media screen and (min-width:901px) {

.work_list > ul > li  {position:relative}
.work_list > ul > li > a > div  { display:none;position:absolute; bottom:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6);padding:0 10px 5px 0 ; box-sizing:border-box}
.work_list > ul > li > a > div > span {color:#fff; text-align:center; font-size:30px;height:100%;font-weight:100;display: block; position: absolute; top:160px; left:0; width: 100%;}
.work_list > ul > li > a > div > span > span {display: block;}
.work_list > ul > li > a > div > span > span:last-of-type{font-size: 16px;}

}
@media screen and (max-width:900px) {
.work_list > ul > li > div {display:none}
.work_list > ul > li > a > span {display: block;}
.work_list > ul > li > a > span > span {display:block; text-align:left; font-weight: 700; }
.work_list > ul > li > a > span > span:last-of-type{font-size: 15px; font-weight: 400;margin-bottom:10px}
.about_content {padding:0 15px}
.work_list > ul > li {width:calc(50% - 10px);}
.work_list2 > ul > li {width:33.3%;box-sizing:border-box}
.pr_tit {}
.pr_img {width:100%}
.txt_box {padding:0 20px}
.work_list > h2 {font-size:40px}
.contact_box > h2 {    font-size: 35px;    padding-top: 40px;}
}
@media screen and (max-width:599px) {
.pr_tit > h2 {font-size: 18px;}
.pr_tit > p {font-size: 15px;}
.work_list > ul > li {width:100%}
.work_list2 > ul > li {width:50%;box-sizing:border-box}
.header nav {position:relative}
.navbox > nav {width:100%;position:absolute;top:20px;z-index:50}
.navbox > nav > ul {display:none }
.header nav > ul > li {float:none;background:#fff;width:100%;display:block;opacity:0.9;padding:10px 20px ; text-align:right;box-sizing:border-box}
.m_nav{display:block;z-index:1000; position:absolute; right:10px;top:30px}
.m_nav > span {font-size:36px;line-height:1;display:inline-block; padding-right:10px; margin-top:-20px; color:#111}*/
.work_list > h2 {font-size:30px;padding-top:20px}
.work_list > h3 {max-width:300px; margin:0 auto; line-height:1.4}
.work_list > h3 > span {display:block}
.contact_box > h2 {    font-size: 30px;    padding-top: 40px;}
.about_content > .subtit {font-size:27px;}
/*210701*/
.layer_menu{width:100%; height:100%; background:#fff; position:absolute;opacity:0.95; top:0; left:0; z-index:99999;  color:#111; padding:20px;box-sizing:border-box}
.btn_x{text-align:right; line-height:1;font-size:40px}
.layer_menu a {color:#111; font-size:40px; display:block; text-align:center; line-height:2; font-weight: 700; text-align: right;}

}