@charset "utf-8";
img { -ms-interpolation-mode: bicubic; }
.L_light .board_wrap {padding-top:100px; background:#FFF;}
.board_visual {display:none !important;}
.clickContact_wrap {display:none;}


/* WORKS_READ */
#read_layout .read_header{padding:80px 150px 0 0;}
#read_layout .read_header .category{display:inline-block; padding:16px 25px; border:1px solid #252525;letter-spacing:0; color:#000;}
#read_layout .read_header .category_title{display:block; font-size:36px;margin-top:40px; width:450px; line-height:48px; margin-bottom:55px;}
#read_layout .read_body img{width:1900px !important; height:auto !important; margin-left:-400px;}
#read_layout  .read_body .xe_content img{max-width:1900px;}
#read_layout .exOut.maxwidth{padding:0 150px 30px 150px;}
#read_layout .exOut_bg{width:100%;text-align:center;}
#read_layout .works_read_bg{width:100%;  position:relative; overflow:hidden;  }
#read_layout .works_read_bg .exOut_bg .extra-imge { width:100%; }
#read_layout .extra-imge img{width:auto; max-width:1900px; }
#read_layout .exOut_bg .extra-imge img {width:100% !important;}
#read_layout .read_header {position:absolute; top:50px; left:50%; transform:translate(-45%,0);-ms-transform:translate(-45%,0);-webkit-transform:translate(-45%,0);}
#read_layout .works_read_bg .exOut_header .extra-imge {position:absolute; top:400px; left:50%; transform:translate(-50%,0);-ms-transform:translate(-50%,0);-webkit-transform:translate(-50%,0);width:100%; max-width:1900px;}
#read_layout  .exOut_contents {text-align:center;}
#read_layout  .exOut_contents .extra-imge {padding:50px 0 70px 0; width:auto; height:auto; overflow:hidden; display:block !important; }
#read_layout  .exOut_contents .extra-imge img {border:1px solid #f5f5f5; background:#f5f5f5; border-radius:10px; box-shadow: 20px 40px 40px 5px rgba(0,0,0,0.05); position:relative; }
#read_layout  .exOut_contents_bottom {height:100px;}
#read_layout .category_titleen {display:none; }



/* layout common */
.layout_common {width:100%; height:auto; overflow:hidden; position:relative; }
.layout_common .works_read_bg {position:absolute;  top:0; left:0; width:100%; height:auto; max-height:1000px; min-height:800px;}
.layout_common .works_read_bg div {display:block !important; }
.layout_common .works_read_bg .extra-imge img {width:100% !important; margin: auto;}
.layout_common .works_read_bg > .extra-imge > .upimg {opacity:0;}
.layout_common .works_read_bg {background-size:cover; background-repeat:no-repeat; background-position:50% 50%; background-color:#f2f2f2;}
.layout_common .read_header {position:relative; z-index:9; margin-top:100px; text-align:center; margin-left:3%; width:94% !important; max-width:94% !important; }
.layout_common .read_header .category_titleen {display:none; }
.layout_common .read_header h1 a {color:#FFF;}
.layout_common .read_header .category{display:inline-block; padding:16px 25px; border:1px solid #252525;letter-spacing:0;}
.layout_common .read_header .category_titleen {display:block; font-size:52px;margin-top:40px; line-height:60px; letter-spacing:0.5px; text-transform:uppercase;}
.layout_common .read_header .read_header_logo {text-align:center; margin-top:40px;}
.layout_common .read_header .read_header_logo .extra-imge img {width:30%; max-width:220px; }
.layout_common .read_header .category_title {display:block; font-size:21px;margin-top:40px; line-height:32px;}
.layout_common .display_warp {width:80%; height:auto;  position:relative; z-index:9; margin:60px auto 0 auto; max-width:1300px; } 
.layout_common .display_warp:after {clear:both; display:block; height:1px; width:100%; content:'';}
.layout_common .exOutwide {width:80%; height:auto; margin:0 auto; max-width:1300px; position:relative; z-index:9;}
.layout_common .exOut_contents_wrap {width:100%; height:auto; padding:150px 0; position:relative; z-index:9;}
.layout_common .exOut_contents1 {background:#ebebeb; width:100%; height:auto; padding-bottom:80px;}
.layout_common .exOut_contents1 .exOut_contents_main {width:80%; max-width:1400px; margin:0 auto;}
.layout_common .exOut_contents1 .exOut_contents_main .extra-imge img {width:100% !important; margin-top:-60px; border:1px solid #ebebeb; }
.layout_common  .exOut_contents2 {text-align:center; padding:50px 0 70px 0;}
.layout_common  .exOut_contents2 .extra-imge { width:100%; margin:10px auto; overflow:hidden; display:block; }
.layout_common  .exOut_contents2 .extra-imge img {width:90%; max-width:auto;}
.layout_common .exOut_contents3 {background:#ebebeb; width:100%; height:auto; }
.layout_common .exOut_contents3 .exOut_contents_sub {display:table; width:90%; margin:0 auto; text-align:center; }
.layout_common .exOut_contents3 .exOut_contents_sub .extra-imge {display:table-cell;  vertical-align:middle;  }
.layout_common .exOut_contents3 .exOut_contents_sub .extra-imge img {width:90% !important; padding:70px 0; max-width:1400px;}
.layout_common .exOut_contents_bottom {height:100px;}
.write_from_wrap ul li p.sub_title_mobile {display:none;}

.exOut_contents_free {max-width:1500px;}




.works_read_wrap .extra_form_output h2{font-size:14px; text-transform:uppercase;height:56px; line-height:56px;}
.works_read_wrap .related_project {color:#fd4345; display:block !important; font-family:'cncBlack'; margin-bottom:5%;}
.works_read_wrap .extra_form_output p{color:#707070;}
.works_read_wrap .extra_form_output .period p{letter-spacing:0;}
.works_read_wrap .extra_form_output .client,.works_read_wrap .extra_form_output .period {float:left;width:160px; margin-right:45px;border-top:3px solid #252525;}
.works_read_wrap .extra_form_output .feature  {float:left;width:300px; border-top:3px solid #252525; line-height:28px;}
.works_read_wrap .extra_form_output .visit_site {position:relative; float:right;width:180px; height:72px;border:1px solid #252525; }
.works_read_wrap .extra_form_output .visit_site a { display:block; line-height:75px; text-indent:20px; font-size:14px; letter-spacing:0.5px;}
.works_read_wrap .extra_form_output .visit_site a:hover {color:#FFF;}
.works_read_wrap .extra_form_output .visit_site i {position:absolute; top:30px; right:20px;}
.works_read_wrap .extra_form_output .visit_site_none {position:relative; float:right;width:180px; height:72px;border:1px solid #e1e1e1; line-height:75px; text-indent:20px; font-size:14px;letter-spacing:0.5px; color:#959595;}
.works_read_wrap .extra_form_output .visit_site_none i {position:absolute; top:30px; right:20px;}
.works_read_wrap .extra_form_output .concept{clear:both;padding:20px 0;}
.works_read_wrap .extra_form_output .concept h2{visibility:hidden;}
.works_read_wrap .extra_form_output .concept p{color:#252525; line-height:30px;}
.works_read_wrap .extra_form_output .related_project.unrelated_project{display:none;}
.works_read_wrap .extra_form_output .related_project h2{display:block; color:#fd4345;}
.works_read_wrap .extra_form_output .related_project h2:before{content:'\eabe'; color:#fd4345; margin-right:15px; font-size:20px; vertical-align:middle; 
font-family: 'cncicon' !important;speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1; display:inline-block; width:20px; height:24px;}






/* layout이 monitor 일 경우 - 모니터 스타일 */
#layout_monitor .display_monitor_warp {width:85%; height:auto; margin:0 auto;  }
#layout_monitor .display_monitor_warp img {width:100% !important;}
#layout_monitor .display_monitor_warp .monitor_area {width:100%; height:auto; position:relative; overflow:hidden; background:#f5f5f5; border-radius:40px; border-right:2px solid #ebebeb; border-bottom:2px solid #e1e1e1; }
#layout_monitor .display_monitor_warp .monitor_area img.monitor_opacity {opacity:0;}
#layout_monitor .display_monitor_warp .extra-imge {width:96%; height:90%; overflow:hidden;  position:absolute; top:5%; left:2%; border-radius:5px; z-index:10;}
#layout_monitor .display_monitor_warp .monitor_bottom {margin-top:-10px;}


/* layout이 onepage 일 경우 - 원페이지 스타일 */
#layout_onepage .display_onepage_warp {width:85%; height:auto; margin:0 auto; text-align:center;  }
#layout_onepage .display_onepage_warp img {width:90%; max-width:auto !important; border:1px solid #e1e1e1;  border-radius:10px; box-shadow: 10px 10px 0 0 rgba(0,0,0,0.04); margin:30px auto;}
#layout_onepage.works_read_wrap {background:#f7f7f7;}
#layout_onepage .read_header .category_title {font-size:36px; margin-top:60px; line-height:48px;}
#layout_onepage .extra_form_output .visit_site_none {display:none; }
#layout_onepage .extra_form_output .concept {display:none; }
#layout_onepage .extra_form_output .client  {float:none;width:auto; margin-left:45px; margin-right:0;}
#layout_onepage .extra_form_output .period {float:none;width:auto; margin-left:45px; margin-right:0;}
#layout_onepage .extra_form_output .feature  {float:none;width:300px; border-top:3px solid #252525; line-height:28px;}
#layout_onepage .exOutwide {margin:60px auto; padding:60px 0; text-align:center; width:100% ; position:relative; }
#layout_onepage .related_project {display:inline !important; margin-bottom:0; } 
#layout_onepage .extra_form_output {display:inline;}
#layout_onepage .extra_form_output div {display:inline-block; border:none;}
#layout_onepage .extra_form_output div h2{display:inline; }
#layout_onepage .extra_form_output div p {display:inline-block; }
#layout_onepage .exOutwide:before {content:''; border-top:1px solid #000; position:absolute; top:0; left:50%; width:60px; margin-left:-30px;}
#layout_onepage .exOut_contents2 {display:table; width:90%; table-layout:fixed; text-align:center; margin:0 auto; }
#layout_onepage .exOut_contents2 div {display:table-cell;  text-align:center; vertical-align:middle;}
#layout_onepage .exOut_contents2 div img {border:1px solid #e1e1e1;  border-radius:10px; box-shadow: 10px 10px 0 0 rgba(0,0,0,0.04); width:90%; max-width:auto !important; }
#layout_onepage .works_read_bg {width:100%; height:100%; max-height:100%;  min-height:100%; background:#FFF; background-size:cover; background-position:center center;  position:fixed; opacity:0.2;}
#layout_onepage .exOut_contents3 {display:table; width:90%; table-layout:fixed; text-align:center; margin:0 auto; }
#layout_onepage .exOut_contents3 div {display:table-cell;  text-align:center; vertical-align:middle;}
#layout_onepage .exOut_contents3 div img {width:auto !important; border:1px solid #e1e1e1;  border-radius:10px; box-shadow: 10px 10px 0 0 rgba(0,0,0,0.04);}
#layout_onepage .exOut_contents3 {background:none;}

/* layout이 onepage 일 경우 - 원페이지 스타일 */
#layout_onepage .display_warp.photowidth {width:90%; height:auto;  position:relative; z-index:9; margin:60px auto 0 auto; max-width:90% !important; } 
#layout_onepage .display_photo_warp {width:100%; height:auto; margin:0 auto; text-align:center;  }
#layout_onepage .display_photo_warp img {width:auto !important; border:1px solid #e1e1e1;  border-radius:10px; box-shadow: 10px 10px 0 0 rgba(0,0,0,0.04); margin:0 auto; max-width:100%;}



/* layout이 onepage 일 경우 - 원페이지 스타일 */
.videolinkadd iframe {width:1000px; height:563px;}
.livelinkadd iframe {width:450px; height:800px;}
.livelinkadd .live_link {padding: 30px 60px; background: #1b1f26; color:#fff; }
.livelinkadd .live_link i {padding-left: 10px;}


.read_footer {position:relative; z-index:9;}
.modify_btn{text-align:right;margin-bottom:50px;}
.modify_btn a{display:inline-block; width:100px; height:50px; background:#252525; color:#fff; text-align:center;line-height:50px;}
.works_read_wrap .port_btnArea {float:none;text-align:center; width:1100px; height:200px; display:table; margin:0 auto 100px auto; }
.works_read_wrap .port_btnArea > span{position:relative;/* float:left; */ height:100%; display:table-cell;overflow:hidden; vertical-align:top;}
.works_read_wrap .port_btnArea > span img{position:absolute; top:0; left:0;z-index:-1; width:100%; height:auto; transition:all .8s ease;}
.works_read_wrap .port_btnArea > span a{background:transparent; display:block; letter-spacing:0; width:100%; height:100%; box-sizing:border-box; padding:0; line-height:200px; color:#FFF;}
.works_read_wrap .port_btnArea .btnarea_btn{width:40%; }
.works_read_wrap .port_btnArea .btnarea_btn a{background:rgba(0,0,0,.6);}
.works_read_wrap .port_btnArea .btnarea_btn:hover img{transform:scale(1.1);}
.works_read_wrap .port_btnArea span.disable_btn{visibility:hidden;}
.works_read_wrap .port_btnArea .etc{width:20%; background:#1b1f26;}
.works_read_wrap .port_btnArea .etc a{}
.works_read_wrap .port_btnArea .etc a b{display:block;position:relative; top:50%; left:50%; transform:translate(-50%,-50%); width:22px; height:30px; }
.works_read_wrap .port_btnArea .etc a b:after,.works_read_wrap .port_btnArea .etc a b:before{position:absolute; left:0; content:''; width:100%; height:5px; background:#fff;}
.works_read_wrap .port_btnArea .etc a b:after{bottom:-5px;}
.works_read_wrap .port_btnArea .etc a b:before{top:-5px;}





/* **************************************** *
 * MEDIA 1920px
 * **************************************** */
@media all and (max-width: 1920px){
.L_light .board_wrap {padding-top:80px; }

.layout_common .read_header .read_header_logo .extra-imge img {width:30%; max-width:200px; }
.layout_common .read_header .category_titleen {font-size:46px;margin-top:30px; line-height:45px;}
.layout_common .read_header .category_title {font-size:18px;margin-top:20px; }

.layout_common .exOut_contents_wrap {padding:100px 0;}
.layout_common .exOut_contents1 .exOut_contents_main {max-width:1300px;}

#layout_onepage .read_header .category_title {font-size:30px; margin-top:40px;}
#layout_onepage .exOutwide {margin:40px auto; padding:40px 0;}
#layout_onepage .display_warp {margin:0 auto;}
}

/* **************************************** *
 * MEDIA 1280px
 * **************************************** */
@media all and (max-width: 1280px){
.L_light .board_wrap {padding-top:50px; }

.layout_common .read_header .category {padding:14px 20px;}
.layout_common .read_header .category_titleen {font-size:42px;}
.layout_common .display_warp {width:94%; height:auto;} 
.layout_common .exOutwide {width:94%;}
.layout_common .exOut_contents3 .exOut_contents_sub .extra-imge img {width:95% !important;}
.layout_common .exOut_contents_wrap {padding:100px 0 50px 0;}
.layout_common .exOut_contents3 .exOut_contents_sub {width:96%;}
.layout_common .exOut_contents2 .extra-imge {width:94%;}
.layout_common .exOut_contents3 .exOut_contents_sub .extra-imge img {padding:30px 0;}
.layout_common .exOut_contents2 .extra-imge {padding:30px 0;}
.layout_common .exOut_contents1 .exOut_contents_main {width:94%;}
.works_read_wrap .port_btnArea { width:94%; margin:0 auto;height:150px; margin-bottom:100px; }
.works_read_wrap .port_btnArea > span a {line-height:150px;}
.works_read_wrap .extra_form_output .client,.works_read_wrap .extra_form_output .period {width:calc(24% - 20px); margin-right:20px;}
.works_read_wrap .extra_form_output .feature  {float:left;width:30%; border-top:3px solid #252525; line-height:28px;}
.works_read_wrap .extra_form_output .visit_site {position:relative; float:right;width:22%; height:72px;border:1px solid #252525; }
#layout_response .display_monitor_warp .monitor_area {border-radius:15px;}
#layout_monitor .display_monitor_warp .monitor_area {border-radius:15px;}
#layout_onepage .display_onepage_warp {width:94%;}
#layout_onepage .display_onepage_warp img {width:100% !important;}
#layout_onepage .read_header .category_title {font-size:28px; margin-top:60px; line-height:36px;}
#layout_onepage .extra_form_output .client {width:auto !important; margin-left:30px !important; }
#layout_onepage .extra_form_output .period {width:auto !important; margin-left:30px !important; }
#layout_onepage .exOutwide {margin:40px auto; padding:40px 0;  }
#layout_onepage .exOut_contents2 {display:block; width:94%; margin:0 auto; padding:0;}
#layout_onepage .exOut_contents2 div {display:block;}
#layout_onepage .exOut_contents2 div img {width:100% !important;}
#layout_onepage .display_photo_warp {width:94%;}
#layout_onepage .display_photo_warp img {width:100% !important;}



.videolinkadd iframe {width:800px; height:450px;}
.livelinkadd iframe {width:394px; height:700px;}

}

/* **************************************** *
 * MEDIA 768px
 * **************************************** */
@media all and (max-width: 768px){

#layout_monitor .display_monitor_warp {width:94%;}

.layout_common .works_read_bg {min-height:450px;}
.layout_common .read_header {margin-top:60px; }
.layout_common .read_header .category {padding:13px 20px 10px 20px;}
.layout_common .read_header .category_titleen {font-size:32px; margin-top:20px;}
.layout_common .read_header .category_title {font-size:14px; line-height:20px; width:90%; margin:20px auto 0 auto}
.layout_common .read_header .read_header_logo {text-align:center; margin-top:30px;}
.layout_common .read_header .read_header_logo .extra-imge img {width:30%; min-width:180px;}
.layout_common .display_warp {width:94%; height:auto; margin:30px auto 0 auto;} 
.layout_common .exOut_contents_wrap {padding:60px 0 30px 0;}
.layout_common .exOut_contents1 {padding-bottom:30px;}
.layout_common .exOut_contents1 .exOut_contents_main .extra-imge img {margin-top:-30px; }
.layout_common .exOut_contents3 .exOut_contents_sub .extra-imge img {padding:20px 0;}
.layout_common .exOut_contents_bottom {height:50px;}
.layout_common .exOut_contents2 .extra-imge {padding:0;}
.layout_common .exOut_contents2 {padding:20px 0 30px 0;}


.works_read_wrap .extra_form_output h2 {font-size:12px;height:36px; line-height:36px;}
.works_read_wrap .extra_form_output p {font-size:14px;}
.works_read_wrap .extra_form_output .client {width:calc(35% - 10px); margin-right:10px; border-top:2px solid #252525;}
.works_read_wrap .extra_form_output .period {width:calc(25% - 10px); margin-right:10px; border-top:2px solid #252525;}
.works_read_wrap .extra_form_output .feature  {display:none; }
.works_read_wrap .extra_form_output .visit_site {position:relative; float:right;width:calc(40% - 20px); height:50px;}
.works_read_wrap .extra_form_output .visit_site a {line-height:50px; font-size:12px;}
.works_read_wrap .extra_form_output .visit_site i {top:17px; font-size:12px;}
.works_read_wrap .extra_form_output .visit_site_none {position:relative; float:right;width:calc(40% - 20px); height:50px;}
.works_read_wrap .extra_form_output .visit_site_none {line-height:50px; font-size:12px;}
.works_read_wrap .extra_form_output .visit_site_none i {top:17px; font-size:12px;}
.works_read_wrap .port_btnArea { width:94%; margin:0 auto;height:100px; margin-bottom:50px; }
.works_read_wrap .port_btnArea > span a {line-height:100px; font-size:12px;}
.works_read_wrap .port_btnArea .etc a b:after{bottom:0;}
.works_read_wrap .port_btnArea .etc a b:before{top:0;}
.works_read_wrap .related_project {font-size:14px;}

#layout_response .display_mobile_warp {bottom:20px;}
#layout_onepage .related_project {display:block !important;} 
#layout_onepage .read_header .category_title {margin-top:30px; font-size:24px; line-height:36px;}
#layout_onepage .exOutwide {margin:40px auto; padding:40px 0 20px 0 ;  }

.videolinkadd iframe {width:100%; height:auto; min-height:250px;}
.livelinkadd iframe {width:350px; height:622px;}
.livelinkadd .live_link {padding: 30px 0px;display: inline-block; width: 100%; box-sizing: border-box;}

}/* layout이 Response 일 경우 - 모바일 + 모니터 스타일 */
#layout_response {width:100%; height:auto; overflow:hidden; position:relative; }
#layout_response .works_read_bg {position:absolute;  top:0; left:0; width:100%; height:auto; max-height:1000px; min-height:800px;}
#layout_response .works_read_bg div {display:block !important; }
#layout_response .works_read_bg .extra-imge img {width:100% !important; margin: auto;}
#layout_response .works_read_bg > .extra-imge > .upimg {opacity:0;}
#layout_response .works_read_bg {background-size:cover; background-repeat:no-repeat; background-position:50% 50%; background-color:#f2f2f2;}
#layout_response .read_header {position:relative; z-index:9; margin-top:100px; text-align:center; margin-left:3%; width:94% !important; max-width:94% !important; }
#layout_response .read_header .category_titleen {display:none; }
#layout_response .read_header h1 a {color:#FFF;}
#layout_response .read_header .category{display:inline-block; padding:16px 25px; border:1px solid #252525;letter-spacing:0;}
#layout_response .read_header .category_titleen {display:block; font-size:52px;margin-top:40px; line-height:60px; letter-spacing:0.5px; text-transform:uppercase;}
#layout_response .read_header .read_header_logo {text-align:center; margin-top:40px;}
#layout_response .read_header .read_header_logo .extra-imge img {width:30%; max-width:220px; }
#layout_response .read_header .category_title {display:block; font-size:21px;margin-top:40px; line-height:32px;}
#layout_response .display_warp {width:80%; height:auto;  position:relative; z-index:9; margin:60px auto 0 auto; max-width:1300px; } 
#layout_response .display_warp:after {clear:both; display:block; height:1px; width:100%; content:'';}
#layout_response .exOutwide {width:80%; height:auto; margin:0 auto; max-width:1300px; position:relative; z-index:9;}
#layout_response .exOut_contents_wrap {width:100%; height:auto; padding:150px 0; position:relative; z-index:9;}
#layout_response .exOut_contents1 {background:#ebebeb; width:100%; height:auto; padding-bottom:80px;}
#layout_response .exOut_contents1 .exOut_contents_main {width:80%; max-width:1400px; margin:0 auto; text-align:center; }
#layout_response .exOut_contents1 .exOut_contents_main .extra-imge img {width:100% !important; margin-top:-60px; border:1px solid #ebebeb; max-width:1200px;}
#layout_response  .exOut_contents2 {text-align:center; padding:50px 0 70px 0;}
#layout_response  .exOut_contents2 .extra-imge { width:100%; margin:10px auto; overflow:hidden; display:block; }
#layout_response  .exOut_contents2 .extra-imge img {width:90%; max-width:1000px;}
#layout_response .exOut_contents3 {background:#ebebeb; width:100%; height:auto; }
#layout_response .exOut_contents3 .exOut_contents_sub {display:table; width:90%; margin:0 auto; text-align:center; }
#layout_response .exOut_contents3 .exOut_contents_sub .extra-imge {display:table-cell;  vertical-align:middle;  }
#layout_response .exOut_contents3 .exOut_contents_sub .extra-imge img {width:90% !important; padding:70px 0; max-width:1400px;}
#layout_response .exOut_contents_bottom {height:100px;}

#layout_response .display_monitor_warp {width:85%; height:auto;  max-width:1100px; float:right; }
#layout_response .display_monitor_warp img {width:100% !important;}
#layout_response .display_monitor_warp .monitor_area {width:100%; height:auto; position:relative; overflow:hidden; background:#f5f5f5; border-radius:40px; border-right:2px solid #ebebeb; border-bottom:2px solid #e1e1e1; }
#layout_response .display_monitor_warp .monitor_area img.monitor_opacity {opacity:0;}
#layout_response .display_monitor_warp .extra-imge {width:96%; height:90%; /*overflow-x:hidden; overflow-y:scroll;*/ overflow:hidden;  position:absolute; top:5%; left:2%; border-radius:5px; z-index:10;}
#layout_response .display_monitor_warp .monitor_bottom {margin-top:-10px;}
#layout_response .display_monitor_warp .mobile_shadow {width:23%; height:50%;  position:absolute; left:-15%; bottom:0; z-index:11; border-radius:20px 30px 0 0; box-shadow: 10px 10px 80px 10px rgba(0,0,0,0.3);}
#layout_response .display_mobile_warp  {width:23%; height:auto;  max-width:300px; position:absolute; left:0; bottom:50px; overflow:hidden; z-index:12;}
#layout_response .display_mobile_warp img {width:100% !important; image-rendering: auto;}
#layout_response .display_mobile_warp .mobile_area {width:100%; height:auto; position:relative;}
#layout_response .display_mobile_warp .extra-imge {width:92%; height:85%; overflow:hidden;  position:absolute; top:8%; left:4%; border-radius:5px; z-index:13;}
#layout_response .monitor_warp {width:60%; height:auto; margin:-200px auto 0 auto; position:relative; z-index:9; max-width:1100px; }
#layout_response .monitor_warp img {width:100% !important;}
#layout_response .monitor_warp .monitor_area {width:100%; height:auto; position:relative;}
#layout_response .monitor_warp .extra-imge {width:96%; height:90%; overflow-x:hidden; overflow-y:scroll; position:absolute; top:5%; left:2%; border-radius:5px; z-index:10;}
#layout_response .monitor_warp .monitor_bottom {margin-top:-20px;}



/* layout이 detailpage 일 경우 - 디테일페이지 스타일 */
#layout_detailpage {width:100%; height:auto; overflow:hidden; position:relative; }
#layout_detailpage .works_read_bg div {display:block !important; }
#layout_detailpage .works_read_bg .extra-imge img {width:100% !important; margin: auto;}
#layout_detailpage .works_read_bg > .extra-imge > .upimg {opacity:0;}
#layout_detailpage .works_read_bg {width:100%; height:100%; max-height:100%;  min-height:100%; background:#FFF; background-size:cover; background-position:center center;  position:fixed; top:0; left:0; opacity:0.2; }
#layout_detailpage .read_header {position:relative; z-index:9; margin-top:100px; text-align:center; margin-left:3%; width:94% !important; max-width:94% !important; }
#layout_detailpage .read_header .category_titleen {display:none; }
#layout_detailpage .read_header h1 a {color:#FFF;}
#layout_detailpage .read_header .category{display:inline-block; padding:16px 25px; border:1px solid #252525;letter-spacing:0;}
#layout_detailpage .read_header .category_titleen {display:block; font-size:52px;margin-top:40px; line-height:60px; letter-spacing:0.5px; text-transform:uppercase;}
#layout_detailpage .read_header .read_header_logo {text-align:center; margin-top:40px;}
#layout_detailpage .read_header .read_header_logo .extra-imge img {width:30%; max-width:220px; }
#layout_detailpage .read_header .category_title {display:block; font-size:36px; margin-top:60px; line-height:48px;}
#layout_detailpage .exOutwide {margin:50px auto; padding-top:50px; text-align:center; width:100% ; position:relative;  position:relative; z-index:9;}
#layout_detailpage .exOutwide:before {content:''; border-top:1px solid #000; position:absolute; top:0; left:50%; width:60px; margin-left:-30px;}
#layout_detailpage .extra_form_output .visit_site_none {display:none; }
#layout_detailpage .extra_form_output .concept {display:none; }
#layout_detailpage .extra_form_output .client  {float:none;width:auto; margin-left:45px; margin-right:0;}
#layout_detailpage .extra_form_output .period {float:none;width:auto; margin-left:45px; margin-right:0;}
#layout_detailpage .extra_form_output .feature  {float:none;width:300px; border-top:3px solid #252525; line-height:28px;}
#layout_detailpage .related_project {display:inline !important; margin-bottom:0; } 
#layout_detailpage .extra_form_output {display:inline;}
#layout_detailpage .extra_form_output div {display:inline-block; border:none;}
#layout_detailpage .extra_form_output div h2{display:inline-block; }
#layout_detailpage .extra_form_output div p {display:inline-block; }
#layout_detailpage .display_warp {width:80%; height:auto;  position:relative; z-index:9; margin:60px auto 0 auto; max-width:1300px; } 
#layout_detailpage .display_warp:after {clear:both; display:block; height:1px; width:100%; content:'';}
#layout_detailpage .display_detailpage_warp {width:85%; height:auto; margin:0 auto; text-align:center;  }
#layout_detailpage .display_detailpage_warp img {width:90%; max-width:900px; border:1px solid rgba(0,0,0,0.1);  border-radius:10px; box-shadow: 10px 10px 0 0 rgba(0,0,0,0.04); margin:30px auto;}
#layout_detailpage .exOut_contents_wrap {width:100%; height:auto; padding:100px 0 150px 0; position:relative; z-index:9;}
#layout_detailpage .exOut_contents {display:table; width:90%; table-layout:fixed; text-align:center; margin:0 auto; max-width:1800px;}
#layout_detailpage .exOut_contents div {display:table-cell;  text-align:center; vertical-align:middle;padding:80px 0;  }
#layout_detailpage .exOut_contents div img {border:1px solid rgba(0,0,0,0.1);  border-radius:10px; box-shadow: 10px 10px 0 0 rgba(0,0,0,0.04); width:90%; max-width:900px; }
#layout_detailpage .exOut_contents_bg {width:100%; position:relative; }
#layout_detailpage .exOut_contents_bg .exOut_contents_bg_layer {position:absolute; top:0; left:0; width:100%; height:100%; opacity:0.4; z-index:0;} 
#layout_detailpage .exOut_contents_bg .exOut_contents {z-index:9; position:relative; }



/* **************************************** *
 * MEDIA 1920px
 * **************************************** */
@media all and (max-width: 1920px){
#layout_detailpage .read_header {margin-top:60px;}
#layout_detailpage .read_header .category_title {font-size:28px; margin-top:60px; line-height:36px;}
#layout_detailpage .read_header .read_header_logo .extra-imge img {width:30%; max-width:200px; }
#layout_detailpage .read_header .category_titleen {font-size:46px;margin-top:30px; line-height:45px;}
#layout_detailpage .extra_form_output .client {width:auto !important; margin-left:30px; }
#layout_detailpage .extra_form_output .period {width:auto !important; margin-left:30px; }
#layout_detailpage .exOutwide {margin:40px auto; padding-top:40px;  }
#layout_detailpage .exOut_contents_wrap {padding:60px 0 120px 0;}
#layout_detailpage .display_warp {margin:0 auto;} 
#layout_detailpage .display_detailpage_warp {width:90%; max-width:1000px;}
#layout_detailpage .display_detailpage_warp img {width:100% !important;}
}


/* **************************************** *
 * MEDIA 1280px
 * **************************************** */
@media all and (max-width: 1280px){
#layout_detailpage .display_warp {width:100%;}
#layout_detailpage .exOut_contents {display:block; width:90%; margin:0 auto; padding:0; max-width:1000px;}
#layout_detailpage .exOut_contents div {display:block; }
#layout_detailpage .exOut_contents div img {width:100% !important;}
#layout_detailpage .exOut_contents_bg {background:none; }
#layout_detailpage .exOut_contents_wrap {padding:0 0 60px 0;}
#layout_detailpage .exOut_contents div img {box-shadow: 5px 5px 0 0 rgba(0,0,0,0.04);}
}


/* **************************************** *
 * MEDIA 768px
 * **************************************** */
@media all and (max-width: 768px){
#layout_detailpage .works_read_bg {min-height:450px;}
#layout_detailpage .read_header {margin-top:60px; }
#layout_detailpage .read_header .category_title {margin-top:30px; font-size:24px; line-height:36px;}
#layout_detailpage .read_header .category {padding:13px 20px 10px 20px;}
#layout_detailpage .read_header .category_titleen {font-size:32px; margin-top:20px;}
#layout_detailpage .read_header .category_title {font-size:21px; line-height:32px; width:80%; margin:20px auto 0 auto}
#layout_detailpage .read_header .read_header_logo {text-align:center; margin-top:30px;}
#layout_detailpage .read_header .read_header_logo .extra-imge img {width:30%; min-width:160px;}
#layout_detailpage .related_project {display:block !important; margin-bottom:10px;} 
#layout_detailpage .exOutwide {margin:20px auto; padding-top:20px;  }
#layout_detailpage .extra_form_output .client {margin:0 10px;}
#layout_detailpage .extra_form_output .period {margin:0 10px;}
#layout_detailpage .exOut_contents div {padding:30px 0;}

}