@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Quantico:400,700');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,400,700&subset=korean');
@import url('https://fonts.googleapis.com/css?family=Audiowide');
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Audiowide');
@import url('https://fonts.googleapis.com/css?family=Archivo+Narrow:100,400,600&display=swap');
@font-face { font-family: 'GoyangIlsan'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/GoyangIlsan.woff') format('woff'); font-weight: normal; font-style: normal; }


@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: normal; 
  font-weight: 100; 
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'), 
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'), 
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype'); 
} 
@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: normal; 
  font-weight: 300; 
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'), 
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'), 
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype'); 
} 
@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: normal; 
  font-weight: 400; 
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype'); 
 } 
@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: normal; 
  font-weight: 500; 
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype'); 
 } 
@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: normal; 
  font-weight: 700; 
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype'); 
 } 
@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: normal; 
  font-weight: 900; 
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'), 
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype'); 
 } 

/**/
.sub .btn_menu {color:#f9a42e;}
/*.con_sub .btn_menu {background: #171717}*/
.sub #container {background: #fff; transition:all 0.5s ease;}
.sub_ttl { text-align:center; height:85px;}
.prd {padding:80px; }
.product {height:100%; position: relative;}
.prd_list {padding:80px; height:100%;}
.product .list {position: absolute; padding-top:85px; top:0; left:0; right:0; bottom:0; height:100%; width:100%; display:table; table-layout:fixed;}
.product .list .li01 {background-image:url(../images/product01.jpg) ;}
.product .list .li02 {background-image:url(../images/product02.jpg) ;}
.product .list .li03 {background-image:url(../images/product03.jpg) ;}
.product .list .li04 {background-image:url(../images/product04.jpg) ;}
.product .list .li05 {background-image:url(../images/product05.jpg) ;}
.product .list li {transition:all 0.4s ease; color:#fff;overflow:hidden; position: relative;width:20%; height:100%; background-size:cover ; background-repeat: no-repeat ;background-position:center ;}
.product .list li a {position: absolute; top:0; left:0; right:0; bottom:0;z-index:2; height:100%;}
.product .list li .wrap {position: relative;z-index:1; display:table; width:100%; height:100%; text-align:center;}
.product .list li .wrap > div {display:table-cell; vertical-align:middle;}
.product .list li i {display:inline-block; width:104px;height:104px;vertical-align:top;margin-bottom:27px;border-radius:50%;transition:all 0.3s ease;}
.product .list li span {display:block;font-size:14px;}
.product .list li p {font-size:30px; font-weight:400; margin-top: 5px;    font-family: 'GoyangIlsan','Noto Sans KR';}
.product .list .li01 i {background-color:#f9a42e; background-image:url(../images/i_prod01.png);}
.product .list .li02 i {background-color:#222222; background-image:url(../images/i_prod02.png);}
.product .list .li03 i {background-color:#f9a42e; background-image:url(../images/i_prod03.png);}
.product .list .li04 i {background-color:#222222; background-image:url(../images/i_prod04.png);}
.product .list .li05 i {background-color:#f9a42e; background-image:url(../images/i_prod05.png);}

/*hover*/
.product .list li:after {content:''; display:block; position: absolute; top:0; left:0; right:0; bottom:0;transition:all 0.4s ease;transform:translate(0, -100%); }
.product .list li:hover {box-shadow:15px 15px 20px rgba(0,3,1,0.35); z-index:1;}
.product .list li:hover:after { transform:translate(0, 0);}
.product .list li.li01:after,
.product .list li.li03:after,
.product .list li.li05:after {background: rgba(249,171,62,0.7);}
.product .list li.li02:after,
.product .list li.li04:after {background: rgba(6,6,6,0.6);}
.product .list li.li01:hover i {background-color:#fff; background-image:url(../images/i_prod01_ov.png);}
.product .list li.li02:hover i {background-color:#fff; background-image:url(../images/i_prod02_ov.png);}
.product .list li.li03:hover i {background-color:#fff; background-image:url(../images/i_prod03_ov.png);}
.product .list li.li04:hover i {background-color:#fff; background-image:url(../images/i_prod04_ov.png);}
.product .list li.li05:hover i {background-color:#fff; background-image:url(../images/i_prod05_ov.png);}

/**/
.top_menu {text-align:center; margin-bottom:40px; }
.top_menu ul {display:inline-block; vertical-align:top;}
.top_menu ul li {margin:0 0px;}
.top_menu ul li a {         display: block;
    line-height: 34px;
    height: 31px;
    padding: 0 8px;
    font-size: 18px;
    margin: 0 20px;
    font-weight: 500;
/*     font-family: 'Quantico', sans-serif; */
    font-family: 'GoyangIlsan','Noto Sans KR';}
.top_menu ul li.active a {background: #faab00; color:#fff;}
.prd_inner {margin:0 auto;}
.prd_contents {display:table; width:100%; table-layout:fixed;}
.prd_contents > div {display:table-cell; width:50%; vertical-align:top;}
.prd_contents .right {position: relative;padding:85px 80px; background: #f4f7f9; word-break:keep-all; height:790px;}
.prd_ttl {font-weight:700; font-size:40px; margin-bottom: 30px;}
.prd_ttl b {display:block; font-size:18px; font-family: 'Raleway', sans-serif; font-weight:500; margin-bottom: 2px;}
.prd_txt > b {font-size:24px; display:block; margin-bottom:10px;font-weight: 500;}
.prd_txt p {font-size:15px;     line-height: 1.6;    font-family: 'GoyangIlsan','Noto Sans KR';}
.prd_mandu_box {padding-top: 60px; /* position: absolute; bottom:90px; left:80px; right:80px; */}
.prd_mandu_tab {margin-bottom:20px;}
.prd_mandu_tab li a {font-size:18px; position: relative;display: block;font-family: 'Quantico', sans-serif; font-weight:700;margin:0 20px;}
.prd_mandu_tab li a:before {content:''; position: absolute; left:-20px; top:4px; display:block; width:1px; height:12px; background: #9f9f9f;}
.prd_mandu_tab li.active a {color:#f9a42e; } 
.prd_mandu_tab li:first-child a {margin-left:0;}
.prd_mandu_tab li:first-child a:before {display:none;}
.prd_mandu_tab li:last-child a {margin-right:0;}
.prd_mandu_tab li a br {display:none;}
.prd_mandu {background: #fff;}
.prd_mandu li {height:70px;}
.prd_mandu li:nth-child(even) {background: #e6eaec;}
.prd_mandu li b {display:inline-block;vertical-align:top; font-size:20px;line-height:70px;width:190px;text-align:center; position: relative;}
.prd_mandu li b:after {content:'';display:inline-block; width:1px; height:22px;background: #cacaca;position: absolute; top:24px; right:0;}
.prd_mandu li img {padding:24px 0 24px 50px;}
.prd_contents.prd1 .left {background-repeat: no-repeat; background-position: 50% 50%; background-size:cover;}
.prd_contents.prd1 .left img {display:none;}
.prd_arr {height:80px;text-align:center;}
.prd_arr img {margin-top:27px;}
.related_works {background: #f9a42e;}
.related_works .prd_inner {padding:140px 80px; }
.related_works h3 {text-align:center; font-size:34px; font-weight:700; font-family: 'Quantico', sans-serif; margin-bottom:32px;}
.related_works li {width:25%;position: relative;}
.related_works li a {position: absolute; top:0; left:0; right:0; bottom:0;z-index:1;}
.related_works li p {position: absolute;bottom:20px; left:20px; color:#fff; font-size:20px; font-weight:400;}
.related_works .more {display:block; font-weight:700; letter-spacing:3px; width:246px;height:74px;box-sizing: border-box; border:2px solid #fff; margin:40px auto 0;text-align:center; font-size:18px; color:#333; font-family: 'Quantico', sans-serif; line-height:70px;}
.related_works .more img {vertical-align:0; margin-left:8px; }

/**/
.aboutus {height:100%;}
.aboutus > div {position: relative;}
/*.aboutus > div:after {content:''; display:block; width:100%; height:1px; background: rgba(255,255,255,0.1); position: absolute; top:50%; left:0;}*/
.aboutus .line6 {display:none; }

.aboutus1 {height:100%; /* background: url(../images/aboutus1.jpg) no-repeat center; */ background-size:cover ; background-attachment: fixed; 
    display:table; width:100%;}
    .aboutus1 .dptc {display:table-cell; vertical-align:middle; padding-left:80px;}
    .aboutus1 .dptc .top {font-size:45px; font-family: 'Audiowide', sans-serif; margin-bottom:55px; line-height:1.1;    margin-top: 50px;}
    .aboutus1 .dptc .top > span {display:block; font-weight:700;}
    .aboutus1 .dptc .top > span.white {color:#fff;}
    .aboutus1 .dptc .top > span.white > span:last-child {
        -webkit-animation: blink 1s infinite;
        -moz-animation: blink 1s infinite;
        animation: blink 1s infinite;
    }
    @keyframes blink {0%{opacity:1;}50%{opacity:0;}100%{opacity:1;}}
    @-webkit-keyframes blink {0%{opacity:1;}50%{opacity:0;}100%{opacity:1;}}
    @-moz-keyframes blink {0%{opacity:1;}50%{opacity:0;}100%{opacity:1;}}

    .aboutus1 .dptc .top_text{color:#fff; font-size:20px; line-height:1.6;font-family: 'Noto Sans KR';
    font-size: 19px; font-weight:300;}
	.aboutus1 .dptc p b{font-weight:600;}
	.aboutus1 .dptc .top_text2 span{font-size:15px; line-height:1.25; color:#fff; font-family: 'GoyangIlsan','Noto Sans KR';}
    .aboutus1 .dptc.tar {padding-left:0; padding:0 80px;}

    .aboutus2 {height:100%; background: #171717;}
    .aboutus2 .aboutus2_inner {height:100%;}
    .aboutus2 .aboutus2_inner > div {position: relative;float:left; width:33.3333%; height:100%; text-align:Center; color:#bdbdbd;}
    .aboutus2 .wrap_img {width:100%; height:100%; position: relative;}
    .aboutus2 .wrap_img > img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;object-position: center;}
.aboutus2 .wrap_txt {position: absolute; top: 0; left: 0;display:table; width:100%; height:100%; table-layout:fixed; /* display:table-cell; vertical-align:middle; */}
.aboutus2 .wrap_txt > .tblc {display:table-cell; vertical-align:middle; position: relative;z-index:99;}
.aboutus2 .wrap_txt .img {margin-bottom:20px;    padding: 0 50px;}
.aboutus2 .wrap_txt p {font-size:20px; line-height:1.7;    font-size: 1.15vw;}
.aboutus2 .wrap_txt p.big {font-size:28px; font-weight:700;font-size: 1.7vw;}
.aboutus2 .wrap_txt.ov p {color:#fabc00;}
.aboutus2 .wrap_film {position: absolute; top: 0;left: 0;right: 0;bottom: 0; overflow:hidden;}
.aboutus2 .wrap_film:after {content: '';display: block;position: absolute;top: 0; left: 0;right: 50%;bottom: 0;background: #171717;transition: all 0.5s cubic-bezier(0, 0.76, 0.59, 1.29);}
.aboutus2 .wrap_film:before {content: '';display: block;position: absolute;top: 0; left: 50%;right: 0;bottom: 0;background: #171717;transition: all 0.5s cubic-bezier(0, 0.76, 0.59, 1.29)}
.aboutus2 .aboutus2_inner > div:hover .wrap_film:after {left:50%;transition-delay: 0.3s;}
.aboutus2 .aboutus2_inner > div:hover .wrap_film:before {left: 100%;transition-delay: 0.3s;}

.aboutus2 .wrap_txt .img {transition:0.3s ease-in-out; transition-delay: 0.3s; transform: scaleX(1); }
.aboutus2 .wrap_txt p {opacity:1;transition:0.3s ease-in-out;font-size: 16px;font-family: 'GoyangIlsan','Noto Sans KR';}
.aboutus2 .wrap_txt.ov .img { transform: scaleX(0); transition-delay: 0s;} 
.aboutus2 .wrap_txt.ov p {opacity:0;font-family: 'GoyangIlsan','Noto Sans KR';}
.aboutus2 .aboutus2_inner > div:hover .wrap_txt .img {transform: scaleX(0);transition-delay: 0s;}
.aboutus2 .aboutus2_inner > div:hover .wrap_txt.ov .img{transform: scaleX(1);transition-delay: 0.3s;}
.aboutus2 .aboutus2_inner > div:hover .wrap_txt p {opacity:0; transition-delay: 0s;}
.aboutus2 .aboutus2_inner > div:hover .wrap_txt.ov p {opacity:1; transition-delay: 0.3s;}

.line1, .line2, .line3, .line4, .line5 {position: fixed;z-index:0;background: rgba(255,255,255,0.1);}
.line6 {position: fixed;    width: 100%;height: 1px;top: 50%;background: rgba(255,255,255,0.1);z-index: 1;}
.menu .line {display:none;}
.menu.on .line {display:block;}

/**/
.top_menu i.all {    margin-bottom: -2px;margin-right:10px;display:inline-block; width:12px;height:12px; background: url(../images/btn_menu_all.png) no-repeat ; background-position:0 -12px ;}
.top_menu .active i.all  { background-position:0 0 ;}
.work .list {margin-bottom:40px;}
.work .list #dataoutput >li {width:33.333333333%; position: relative;}
.work .list #dataoutput > li a {color:transparent; font-size:0; position: absolute; top:0; right:0; left:0; bottom:0; z-index:5;}
.work .list #dataoutput > li div {position: relative;}
.work .list #dataoutput > li div p {position: absolute; bottom:20px; left:20px; right: 20px; color:#fff; font-size:20px; font-weight:400; text-shadow:1px 1px 4px rgba(0,0,0,0.5); text-overflow: ellipsis; white-space: nowrap; display: block;  z-index: 1}
.work .list .more {display: block; font-weight: 700;letter-spacing: 3px; width: 246px; height: 74px;
    box-sizing: border-box; border: 2px solid #dddddd; margin: 40px auto 0; text-align: center; font-size: 18px;
    color: #333; font-family: 'Quantico', sans-serif; line-height: 70px;}
    .work .list .more img {    vertical-align: 0; margin-left: 8px;}
    .work .list #dataoutput > li div img {width:100%;}
    .work .list #dataoutput > li:after {content: '';position: absolute;top:0;bottom:0;right:0;left:0;background: url(/images/wbg.png) 100% 100% no-repeat; background-size: cover}
    .work .list #dataoutput > li div:before {  opacity:0; position: absolute; z-index:1; top:50%; left:50%; margin-top:-40px; margin-left:-40px;content:''; display:block; width:80px;height:80px;background: url(../images/work_more.png) no-repeat center; background-size:cover ; z-index: 3}
    .work .list #dataoutput > li div:after { opacity:0; content:''; display:block; position: absolute; top:0; left:0; right:0; bottom:0; background:#f9a42f ; z-index: 2}
    .work .list #dataoutput > li:hover div:before { opacity:1; animation: spinplus 0.3s ease-in-out;}
    .work .list #dataoutput > li:hover div:after { opacity:0.7; transition:opacity 0.3s ease-in-out;}
    .work .list #dataoutput > li a {cursor: pointer;}
    @keyframes spinplus{
      0% {transform: rotate(-180deg);}
  }

  /***************~ 1500px****************/
  @media screen and (max-width: 1500px){
    .prd_contents .right {height:750px;}
    .prd_mandu_tab li a {margin:0 10px; font-size:16px;}
    .prd_txt p {font-size:18px;}
    .prd_mandu_tab li a:before {left:-10px;}
    .prd_mandu li {height:60px;}
    .prd_mandu li b {width:120px; font-size:18px; line-height:60px;}
    .prd_mandu li img {padding:19px 0 19px 35px;}

    .work .top_menu ul {    padding-left: 140px;}
    .work .list li div p {font-size:18px;}


}
/*************** 1400px****************/
@media screen and (max-width: 1400px){
    .prd_list {padding:50px;}
    .prd {padding:50px; padding-bottom:0;}

    .product .list > li span {font-size:13px;}
    .product .list > li p {font-size:22px;}

    /**/
    .prd_contents .right {padding:50px;}
    .prd_mandu_tab {margin-bottom:15px;}
    .prd_mandu_box {/* left:50px; right:50px; bottom:50px */;}

    /**/
    .top_menu ul {padding-left:140px;}
    .top_menu ul li {margin:0 5px;}
    .top_menu ul li a {padding:0 10px; margin: 0 16px;}
    .prd_ttl {font-size:30px; margin-bottom:25px;}
    .prd_txt p {font-size:17px;}
    .prd_txt > b {font-size:20px;}
    .prd_mandu li {height:55px;}
    .prd_mandu li b {width:120px; font-size:16px; line-height:55px;}
    .prd_mandu li b:after {top:19px;}
    .prd_mandu li img {padding: 16px 0 17px 35px;}
    .prd_contents .right {height:650px;}
    .prd_mandu_tab li a {font-size:14px;}
    .prd_mandu_tab li a:before {top:2px;}
    .related_works .prd_inner {padding:50px;}
    .related_works li p {font-size:16px;}
    .related_works .more {width:200px;}

    /**/
    .aboutus1 .dptc {padding-left:50px;}
    .aboutus1 .dptc.tar {padding:0 50px;}
    .aboutus1 .dptc .top {font-size:80px;}
    .aboutus1 .dptc p {font-size:18px;}

    .work .list .more {width: 200px;}
    .work .list li div:before { width:60px; height:60px; margin-left:-30px; margin-top:-30px;}


}
/*************** 1200px****************/
@media screen and (max-width: 1200px){
    .aboutus1 .dptc .top {font-size:70px;}
    .aboutus1 .dptc p {font-size:16px;}
    .aboutus2 .wrap_txt p {font-size:15px;}

    .work .top_menu ul li {margin:0;}
    .work .list li div p {font-size:16px;}

}
/***************패드 1024px****************/
@media screen and (max-width: 1023px){
    .product .list li {width:100%; display:block; height:300px;}
    /* .product .list li .wrap {top: 50%; margin-top: -88px;} */

    .top_menu ul {padding-left:0; padding-top:84px;}
    .prd_contents > div {display:block; width:100%;}
    .prd_contents.prd1 .left img {display:block !important; width: 100%} 
    .related_works li {width:50%; display:none;}
    .related_works li:first-child,
    .related_works li:nth-child(2) {display:block;}

    .aboutus {position: relative; }
    .aboutus:before {content:''; display:block;position: fixed; width: 1px; height: 100%; top: 0; left:50%; background: rgba(255,255,255,0.1); z-index: 1;}
    .aboutus:after {/* content:''; display:block;position: fixed; width: 100%; height: 1px; top: 50%; background: rgba(255,255,255,0.1); z-index: 1 */;}
    .aboutus > div:after {display:none;}

    .aboutus1 .dptc .top {font-size:45px;}
    .aboutus1 .dptc p {font-size:16px;}
    .aboutus1 .dptc.tar img {width:250px;}

    .aboutus2 {height:auto;}
    .aboutus2 .aboutus2_inner > div {float:none; width:100%; height:auto;padding:50px 0;border-top: 1px solid rgba(255,255,255,0.1);}
    .aboutus2 .wrap_img {width: 100%; height: auto;position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
    .aboutus2 .wrap_txt {position: relative; display:block;}
    .aboutus2 .wrap_txt > .tblc {display:block;}
    .aboutus2 .wrap_txt .img {margin-bottom:0; padding:0 100px;}
    .aboutus2 .wrap_txt p {font-size:14px;}
    .aboutus2 .wrap_txt p.big {font-size:20px;}
    .aboutus2 .wrap_txt.ov {position: absolute; top:50px; left:0; right:0; bottom:0; height:auto;}

    .top_menu .active i.all {display:none;}
    .work .top_menu ul {padding-left:0;}
    .work .list #dataoutput > li {width:50%;}
    .work .list #dataoutput > li div p {font-size:14px;}

    .menu.on .line {display:none;} 


}
#container.ex {height: auto !important}
/***************모발 ~ 767px****************/
@media screen and (max-width:767px){
    .sub #container {padding:10px; height: auto;}

    .sub_ttl {padding-top:60px;}
    .sub_ttl img {height:42px;}
    .prd_list {padding:0;}
    .product .list {display:block; padding-top:120px;}
    .product .list li i {width:67px;height:67px;background-size: cover;margin-bottom: 10px;}
    /* .product .list li div {margin-top: -62px;} */

    .top_menu {margin-bottom:20px; margin-top:70px; position: relative;}
    .top_menu ul {display:none;border: 1px solid #c0c0c0;padding-top:0; background: #fff; position: absolute; top:40px; left:0; right:0;z-index:60;}
    .top_menu ul li {float:none; margin:0; text-align:left;}
    .top_menu ul li a {height:40px;line-height:40px;padding-left:20px;}
    #mtab_btn {    background: url(../images/mtab_btn.png) no-repeat right;
    font-size: 15px;
    font-weight: 700;
    display: block;
    width: 100%;
    height: 40px;
    border: 1px solid #c0c0c0;
    padding-left: 20px;
    text-align: left;
    line-height: 42px;
    box-shadow: 0px 3px #f4f4f4;
    font-family: 'GoyangIlsan','Noto Sans KR';
    font-weight: 300;}
    #mtab_btn.show {background: url(../images/mtab_btn_show.png) no-repeat right;}
    .prd {padding:0; padding: 45px 20px 20px; }
    .prd_contents {margin-bottom:40px;}
    .prd_contents .right {height:auto; padding:0; background: #fff;}
    .right_txt {padding:40px 25px; margin-bottom:20px; background: #f4f7f9;}
    .prd_ttl {font-size:22px;}
    .prd_ttl b {font-size:14px !important; margin:0;}
    .prd_txt p {font-size:14px; font-weight:400;}
    .prd_txt > b {font-size:15px;}
    .prd_mandu_box {/* position: relative; left:auto; right:auto; bottom:auto; */ padding-top:0; }
    .prd_mandu_tab {display:table; width:100%; table-layout:fixed; margin-bottom:10px;}
    .prd_mandu_tab li {float:none; display:table-cell;vertical-align:middle; width:25%; text-align:center; position: relative;}
    .prd_mandu_tab li a {margin:0; padding:10px 0; position:static;}
    .prd_mandu_tab li a:before {left:0; top: 30%;bottom: 30%;height: auto;}
    .prd_mandu { background: #f4f7f9;}
    .prd_mandu_tab li a br {display:block;}
    .prd_mandu li b {width:80px; font-size:14px;}
    .prd_arr {display:none;}
    .related_works {margin:-25px; margin-top:0;}
    .related_works .prd_inner {padding:60px 25px;}
    .related_works .prd_inner img {width:100%;}
    .related_works h3 {font-size:20px; margin-bottom:15px;}
    .related_works li {width:100%;}
    .related_works li p {font-size:14px;}
    .related_works .more {width:150px;height:45px; line-height:41px; margin-top:30px;font-size:14px;}
    .related_works .more img {margin-left:0; width:8px;     margin-bottom: 2px;}

     .address {   }

    .aboutus {}
    .aboutus1 {}
    .aboutus1 .dptc {padding:0 25px; word-break:keep-all;}
    .aboutus1 .dptc.tar {display:none;}
    .aboutus1 .dptc .top {font-size:28px;     margin-bottom: 25px;}
    .aboutus1 .dptc p {font-size:14px !important;}
    .aboutus1 .dptc .top_text2 span{font-size:13px;}
    .aboutus2 .wrap_txt p {font-size:14px;}
    .aboutus2 .wrap_txt p.big {font-size:18px;}
    .work .list #dataoutput > li div p {left:15px; bottom:15px;}

    .work .list .more {width: 150px;height: 45px;line-height: 41px;margin-top: 30px;font-size: 14px;}
    .work .list .more img {margin-left: 0; width: 8px; margin-bottom: 2px;}
    .work .list #dataoutput > li div:before { width:40px; height:40px; margin-left:-20px; margin-top:-20px;}
	
	.crow > .col2{width:100% !important;}
	.pd-80{padding:80px 30px !important;}
	.prd_txt3{padding:50px 0 0 !important; }

	.cateSubject h3{font-size:20px; }
	.cateSubject p{font-size:14px;}

	.mg-top-50{margin-left:0px;}
}


.con_sub {background: #171717;}
.contact {position: relative;}
.contact .title:before {left:50%;}
.contact .inner {max-width: 1200px; margin:0 auto;}
.contact .title {padding-top: 100px; text-align: center;}
.contact .title h2 {font-size: 34px;font-family: 'Audiowide', sans-serif;color:#fff; padding-bottom: 0px; font-weight: bold;}
.contact .title p {font-size: 16px; color:#fff; padding-bottom: 40px}
.maparea {width: 100%; max-width: 600px; margin:10px auto; overflow: hidden;}
.maparea #map {width: 100%; height: 300px;}
.maparea p {padding-top: 20px; color:#fff; font-size: 16px; line-height: 1.5}
.maparea ul { padding-top: 20px }
.maparea ul li {display: inline-block; margin-right: 10px; }
.maparea ul li a {display: inline-block; width: 150px; height: 32px; line-height: 32px; text-align: center; border:1px solid #fff; color:#fff; font-size: 14px;}
.formarea { padding-top: 50px; position: relative; max-width: 600px; padding-bottom: 100px; margin: 0 auto}
.formarea ul {overflow: hidden;padding-top: 10px; padding-bottom: 0px}
.formarea ul li {margin-bottom: 20px; position: relative; width: 100%; float: left; margin-right: 0%}
.formarea ul li.full {width: 96%; margin-right: 0}
.formarea ul li:last-child {margin-bottom: 0px}
.formarea .agree {color:#aaa; padding-bottom: 10px}
.formarea .agree a {display: inline-block; margin-left: 8px; color:#999; font-size: 11px; border-bottom:1px solid #555; padding:4px 5px 0; vertical-align: top;font-family: 'GoyangIlsan','Noto Sans KR';}
.formarea ul li input, .formarea ul li textarea {width: 100%; font-size: 16px; color:#999;}
.formarea ul li input {       border: 0px;
    border-bottom: 1px solid #ccc;
    padding: 17px 2px 8px 2px;
    background: none;
    font-size: 12px;
    font-family: 'GoyangIlsan','Noto Sans KR';}
.formarea ul li textarea {border-left:1px solid #fff;     font-family: 'GoyangIlsan','Noto Sans KR';
    font-size: 12px;border-right:1px solid #fff;background:none; border-bottom:1px solid #ccc; padding:10px 10px; border-top:2px solid #ddd; resize: none; margin-top:10px; height: 70px;}
.formarea ul li input + label ,.formarea ul li textarea + label {position: absolute; top: 15px; left: 2px; font-size: 16px; color:#fff; transition: all 0.3s ease}
.formarea ul li input + label ,.formarea ul li textarea + label,
.formarea ul li input:hover + label ,.formarea ul li textarea:hover + label,
.formarea ul li input:focus + label ,.formarea ul li textarea:focus + label {top: -10px;
    font-size: 15px;
    color: #fbaf43;
    color: #fbaf43;
    font-family: 'Audiowide', sans-serif;
    letter-spacing: 1.2px;}
.formarea ul li input:valid + label ,.formarea ul li textarea:valid + label {    top: -10px;
    font-size: 15px;
    color: #fbaf43;
    font-family: 'Audiowide', sans-serif;
    letter-spacing: 1.2px;}
.formarea ul li input:hover ,.formarea ul li textarea:hover,
.formarea ul li input:focus ,.formarea ul li textarea:focus {color:#222;}
.formarea button#sbbtn {    display: block;
    background: #e99715;
    color: #fff;
    text-align: center;
    font-size: 14px;
	border-radius:3px;
    font-weight: 400;
    padding: 10px 25px;
    border: 0;
    font-family: 'Noto Sans KR';}
.crow {overflow: hidden; max-width: 1420px; margin:0 auto;}
.crow > .col {width: 65%; float: right;}
.crow > .col2{width: 35%;}
@media screen and (max-width:1199px){
  .crow {max-width: 100%;}
  .crow > .col {width: auto; float: none;}
  .crow > .col2{width: 100%; margin:0 auto; max-width: 600px;}
  .maparea {margin:0px auto 40px;}
}
@media screen and (max-width:619px){
  .formarea {padding-top: 0px; padding-bottom: 80px;}
  .maparea #map {height: 180px;}
  .maparea {margin:0px auto 20px; padding-bottom: 80px}
  .formarea ul li { width: 100%; margin-right: 0%}
  .formarea ul li.full {width: 100%; margin-right: 0}
  .crow {padding: 0 30px}
  .maparea ul li {display: block;}
  .maparea ul li a {width: 100%; margin-right: 0; margin-bottom: 10px; }
  .formarea button#sbbtn {width: 100%}
}
.map_wrap{background-color:#fff;padding-top:30px;}

.view_works {padding: 30px; border:1px solid #eee; overflow: hidden; position: relative;}
.timg {float: left; width: 50%;}
.timg img {max-width: 100%}
.view_works .timg img {width: 100%;}
.con {float: left;width:50%;}
.textcon {padding: 20px 40px; min-height: 340px;    font-family: 'GoyangIlsan','Noto Sans KR';
    font-weight: 300;} 
.textcon h3 {font-size: 22px; color:#000; padding-bottom: 10px; font-weight: bold;}
.textcon > span {padding-bottom: 10px; font-size: 15px; color:#f9a42e; font-weight: 400; display: block;}
.textcon p {white-space: pre-wrap;
    line-height: 1.5;
    font-size: 14px;
    color: #555;
    font-family: 'Noto Sans KR', sans-serif,HelveticaNeue-Light,AppleSDGothicNeo-Light,sans-serif, dotum;
    font-weight: 400;
    }
.imgcon {position: absolute; left:50%; bottom: 0; right: 0; padding:0 40px 30px}
.imgcon span {display: inline-block; width: 33.33%; height:100%;max-height: 180px; overflow: hidden; position: relative; vertical-align: top}
.imgcon span:last-child {width: 33.34%}
.imgcon span.vscode {width: 50% !important}
.imgcon span:before {position: absolute; content: '';border:1px solid #ddd; border-right: 0;top:0;left:0;bottom: 0;right: 0;}
.imgcon span:last-child:before {border-right: 1px solid #ddd;}
.imgcon span img {max-width: 110%; width: 100%}
@media screen and (max-width:979px){
   .view_works {padding: 15px;}
   .textcon {padding:20px 0px;} 
   .timg {float: none; width: 100%;}
   .con {float: none;width:100%;}
}
@media screen and (max-width:619px){
    .imgcon {position: relative; top:auto;left:auto;bottom: auto; right: auto; padding:0 0 10px;}
    .imgcon span {display: inline-block; height: 60px;} 
    .textcon {min-height: 100px;}
    /*html, body {height: auto;}*/
}

.viewCon {position: relative; float: left;width: 100%; display: none;}


.finfo {padding:10px; text-align: center; font-size:12px; position: fixed; bottom: 0; left:0;right: 0;z-index: 10; opacity: 0.7}
body.ftcol .finfo {color:#fff;}
.work #dataoutput > li {opacity: 0;}
.work #dataoutput > li.on {opacity: 1}
.work #dataoutput > li.delay-100 {transition: opacity 0.5s 0s linear;}
.work #dataoutput > li.delay-200 {transition: opacity 0.5s 0.1s linear}
.work #dataoutput > li.delay-300 {transition: opacity 0.5s 0.2s linear}
.work #dataoutput > li.delay-400 {transition: opacity 0.5s 0.3s linear}
.work #dataoutput > li.delay-500 {transition: opacity 0.5s 0.4s linear}
.work #dataoutput > li.delay-600 {transition: opacity 0.5s 0.5s linear}
.work #dataoutput > li.delay-700 {transition: opacity 0.5s 0.6s linear}
.work #dataoutput > li.delay-800 {transition: opacity 0.5s 0.7s linear}
.work #dataoutput > li.delay-900 {transition: opacity 0.5s 0.8s linear}
.work #dataoutput > li.delay-1000 {transition: opacity 0.5s 0.9s linear}
.work #dataoutput > li.delay-1100 {transition: opacity 0.5s 1s linear}
.work #dataoutput > li.delay-1200 {transition: opacity 0.5s 1.1s linear}
.work #dataoutput > li.delay-1300 {transition: opacity 0.5s 1.2s linear}
.work #dataoutput > li.delay-1400 {transition: opacity 0.5s 1.3s linear}
.work #dataoutput > li.delay-1500 {transition: opacity 0.5s 1.4s linear}
.work #dataoutput > li.delay-1600 {transition: opacity 0.5s 1.5s linear}

#slideset {position: relative;}
#slideset li {display: none; }
#slideset .active {display: block; }
.view_works .imgcon span {cursor: pointer;}


.titlenew { text-align: center; padding:0px 20px 50px;  font-family: 'GoyangIlsan','Noto Sans KR';}
.titlenew h3 {font-size: 22px; word-break: keep-all;}
.titlenew p {    font-size: 15px;
    padding-top: 10px;
    keep-all: ;
    font-weight: 300;
    color: #faab00;}
@media screen and (max-width:619px){
    .titlenew {padding-bottom: 30px;}
    .titlenew h3 {font-size: 16px;}
    .titlenew p {font-size: 12px;}
}

.vscode {cursor: pointer;}
.vscode:after {position: absolute; top:0;right: 0;bottom: 0;left:0; content: ''; background:rgba(0,0,0,0.7) url(../images/play.png) no-repeat 50% 50%; }
span.vscode:after {background-size: 60px}
#videoPopup {position: fixed; top:0; bottom: 0; left: 0;right: 0; background: rgba(0,0,0,0.8); z-index: 1000}
#videoPopup .videoCon {position: fixed;  width: 720px; height: 480px; top:50%; left:50%; margin-top: -240px; margin-left: -360px; z-index: 1001;}
#videoPopup .videoCon .videoColse {position: absolute; right: -42px; top:0; width: 40px; height: 40px; background: rgba(0,0,0,0.5) url(../images/vclose.png) no-repeat 50% 50%;display: block; border:1px solid rgba(256,256,256,0.2); cursor: pointer; color:transparent;}

.detail01_title{ font-family: 'GoyangIlsan','Noto Sans KR'; font-size: 32px; color: #000; font-weight: 300;}
.prd_txt{ font-family: 'GoyangIlsan','Noto Sans KR'; color:#000; font-weight:400}
.prd_txt2{ font-family: 'GoyangIlsan','Noto Sans KR'; color:#fff; font-weight:400}
#prd_txt02{ font-family: 'GoyangIlsan','Noto Sans KR'; font-weight: 500; font-size:21px; color: #000;  margin-top: 75px; line-height: 25px;}

.agree label {    vertical-align: middle; margin-top: 5px;}

.inner .inner_main_text{font-family: 'Archivo Narrow', sans-serif; font-weight:bold; font-size:62px; margin-bottom:20px;}
.inner .inner_main_text2{font-family: 'Noto Sans KR'; font-weight:500; font-size:14px;}
.inner .inner_main_text3{font-family: 'Noto Sans KR'; font-weight:400; font-size:14px;}
 .address { padding-right: 40px; bottom: 0; left: 0;  line-height: 1.6;font-size: 13px; color: #666; position: relative;  margin-top: 25px; font-family: 'Noto Sans KR';}
 /*.address:before {    content: ''; display: block;  width: 30px; height: 6px; background: #fabc00;  position: absolute;  top: -20px;}*/
 .address span {display:block; font-size:15px; color:#222; font-weight:bold;}

 .box1 .address:before { content: '';display: block; width: 30px; height: 6px;  background: #fabc00; position: absolute; top: -20px;}
 .prd02{    padding-bottom: 80px;}
 
 
 .txt01_other{   font-family: 'GoyangIlsan','Noto Sans KR' !important;    margin-bottom: 4px;    }

 .under_txt{font-family: 'Noto Sans KR', sans-serif,HelveticaNeue-Light,AppleSDGothicNeo-Light,sans-serif, dotum;    font-size: 16px;}