@charset "utf-8";
/*========================================================================
서브2 - 레이아웃
========================================================================*/
/*==========================
*미디어쿼리 주의사항
*ie 6, 7, 8은 미디어 쿼리를 지원하지 않기 때문에 only 키워드는 작성하지 않습니다.
*min을 사용할때는 반드시 작은 순서대로 작성 (min은 최소 또는 그이상이라 는 뜻으로, 점차 커지는 것을 의미하기 때문에)
*max 사용시 큰순서대로 작성 (max는 최대 또는 그 이하라는 뜻으로, 점차 작아지는 것을 의미하기 때문에)
*미디어쿼리 적용방법
1.
2.
3. @import url(style.css) all and (min-width:320px);
============================*/
/*========================================================================
모바일 - 320px 이상
========================================================================*/
/* 모바일 레이아웃: 480px 이하 */
/*@media only screen and (min-width: 320px) {*/
/*@media screen and (max-width: 480px) {*/
@media screen and (min-width: 320px), screen and (max-width: 319px) {
/*전체*/
/*#wrap {position:relative; margin:0 auto; min-width:320px; max-width:100%; overflow:hidden;}*/
#wrap {width:100%; min-width:320px; height:100%;}
/************
헤더
************/
#header {overflow:hidden; height:100%; min-height:470px; background-color:#ffffff;}
/*헤더_메뉴부분*/
#nav_wrap {position:absolute; top:0; left:0; width:100%; height:50px; margin:0 auto;}
#gnb {}
/*헤더_이미지부분*/
#visual2 {position:relative; height:95%; min-height:470px; color:#ffffff;}
.visual_img {position:relative; overflow:hidden; height:100%; color:#ffffff; background:url("/_img/industry/industry01_visual01_bright.jpg");
background-repeat:no-repeat; background-position:center center; background-size:cover;
-webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover;}
.visual_overlay {position:absolute; z-index:100; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.3);}
.visual_content {
position: absolute;
overflow: hidden;
z-index: 101;
top: 48%;
width: 100%;
margin: 0;
padding: 0.2em 0 0.2em 0;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
left: -3px;
}
.visual_content h4 {margin:0 auto; padding:0 0 0.5em 0; font-size:1.5rem; font-weight:normal;}
.visual_content h4 span {font-weight:bold;}
.visual_content h4.visual_logo {padding-bottom:0em}
.visual_content h4.visual_logo img {width:50%;}
.visual_content h4.visual_title {display:inline-block; padding:8% 12% 2% 12%; font-family: 'Nanum SquareR', 'Nanum Square'; background:url("/_img/visual_title_bg_text.png") no-repeat; background-position:left top; background-size:18%;}
.visual_content ul {list-style:none; list-style-type:none;}
.visual_content ul li{list-style:none; list-style-type:none;}
.visual_content ul li.visual_text {padding:0 0 0.2em 0; font-size:1rem; line-height:140%;}
.visual_content ul li.visual_button {display:block; margin-top:1em;}
.visual_content ul li.visual_button a{display:inline-block; padding:0.6em 4em 0.6em 1.2em; font-size:1rem; border:#eaeaea solid 1px; background:url("/_img/m_btn_icon_arrow.png") no-repeat center right; background-size:15%; background-color:rgba(255,255,255,0.1);}
.visual_content ul li.visual_button a:hover,a:focus{border:#8ac600 solid 1px; background-color:#8ac600;}/* 마우스오버 */
/************
컨텐츠 - 공통
************/
/*숨기고보이기*/
.div_visible{display:block; visibility:visible;}
.div_hidden{display:none; visibility:hidden;}
/*포지션*/
.posi_re {position:relative;}
.posi_ab {position:absolute;}
/*플롯위치*/
.float_right {float:right;}
.float_left {float:left;}
/*컬러값*/
.bgcolor_white {background:#ffffff;}
.bgcolor_f5 {background:#f5f5f5;}
.bgcolor_green01 {background:#5a9c33;}
.bgcolor_navy01 {background:#202024;}
/*가로길이제한 - PC:제한값있음, 타블렛:제한값없음, 모바일:사용안함*/
/*.w_limit {margin:0 auto; padding:0 5%;}*/
/*넓이:100% 박스*/
.box_grid_wfull {width:100%; max-width:100%;}
/*넓이:100% 박스 : float속성 높이값 못잡는것 잡는코드 추가*/
.box_grid_wfull_hcatch {width:100%; max-width:100%;}
.box_grid_wfull_hcatch:before,
.box_grid_wfull_hcatch:after {display:table; content:""; line-height:0;}
.box_grid_wfull_hcatch:after {clear:both;}
/*넓이:1280px 박스 : float속성 높이값 못잡는것 잡는코드 추가*/
.box_grid_w1280 {width:1280px; max-width:100%; margin:0 auto; padding:0 20px;}
.box_grid_w1280:before,
.box_grid_w1280:after {display:table; content:""; line-height:0;}
.box_grid_w1280:after {clear:both;}
/*넓이:1080px 박스 : float속성 높이값 못잡는것 잡는코드 추가*/
.box_grid_w1280 {width:1280px; max-width:100%; margin:0 auto; padding:0 20px;}
.box_grid_w1280:before,
.box_grid_w1280:after {display:table; content:""; line-height:0;}
.box_grid_w1280:after {clear:both;}
/*컨텐츠*/
#content {height:auto; margin:0 auto;}
/************
컨텐츠 - 내용
************/
/*박스01-이미지오른쪽(미션)*/
.step01_img {float:none; width:100%; height:100%; margin-bottom:-5%; padding-top:85%; background:url("/_img/industry/industry01_step01_img.jpg") no-repeat; background-position:left -10px center; background-size:contain;}
.step01_text {float:none; width:100%; padding:0 0 15% 0; text-align:center;}
.step01_text h4 {padding-bottom:0.5em; color:#51595c; font-size:2.5rem; font-weight:bold;}
.step01_text p {font-size:1rem; margin:0 auto; line-height:140%;}
/*박스02-이미지왼쪽(커뮤니티)*/
.step02_img {float:none; width:100%; height:100%; margin-bottom:-10%; padding-top:90%; background:url("/_img/industry/industry01_step02_img.jpg") no-repeat; background-position:right -25% top -20px; background-size:contain;}
.step02_text {float:none; width:100%; padding:0 0 18% 0; text-align:center;}
.step02_text h4 {padding-bottom:0.5em; color:#51595c; font-size:2.5rem; font-weight:bold;}
.step02_text p {width:90%; margin:0 auto 20px auto; font-size:1rem; line-height:140%;}
/*박스03-(Business Area)*/
.step03_text {float:none; width:100%; padding:12% 0 0 0; text-align:center;}
.step03_text h4 {padding-bottom:5%; color:#51595c; font-size:2.5rem; font-weight:bold;}
.step03_text h5 {padding:35px 0 2px 0; color:#51595c; font-size:1.3rem; font-weight:bold; text-align:left;}
.step03_text h6 {padding:0 0 35px 0; color:#5a9c33; font-size:1rem; font-weight:bold; text-align:left;}
.step03_text ul {list-style:none; list-style-type:none; padding:0;}
.step03_text ul li {display:block; width:100%; margin:0; padding:0; border:solid #dddddd 1px; border-right:0px; border-left:0px;}
.step03_text ul li:nth-child(1n) {background:url("/_img/industry/industry01_step03_img01.jpg") no-repeat; background-position:left 10% center; background-size:150px; border-bottom:0px;}
.step03_text ul li:nth-child(2n) {background:url("/_img/industry/industry01_step03_img02.jpg") no-repeat; background-position:left 10% center; background-size:130px; border-bottom:0px;}
.step03_text ul li:nth-child(3n) {background:url("/_img/industry/industry01_step03_img03.jpg") no-repeat; background-position:left 9% center; background-size:140px; border-bottom:solid #dddddd 1px;}
.li_text_box {padding:0 0 0 53%}
/*박스04-스마트팩토리*/
.step04_text {float:none; width:100%; padding:15% 0 18% 0; text-align:center;}
.step04_text h4 {padding-bottom:5%; color:#ffffff; font-size:2.5rem; font-weight:bold;}
.step04_text h4 span {display:block; width:100%;}
.step04_text p {width:80%; margin:0 auto; padding-bottom:5%; color:#ffffff; font-size:1rem; line-height:140%;}
/*.step04_text h5 {display:inline-block; margin:0 0 10px 0; padding:1% 25%; color:#ffffff; font-size:1rem; font-weight:bold; text-align:center; line-height:140%; border:solid #ffffff 1px; border-radius:5px;}*/
.step04_text h5 {display:inline-block; width:100%; margin:0 0 10px 0; padding:5px; color:#ffffff; font-size:0.7rem; font-weight:bold; text-align:center; line-height:140%; border:solid #ffffff 1px; border-radius:5px;}
.step04_text .img {float:none; width:100%; margin:0; padding:60% 0 0 0; text-align:center; background:url("/_img/industry/industry01_step04_img01.jpg") no-repeat; background-position:center center; background-size:contain;}
.step04_text ul {list-style:none; list-style-type:none; padding:0;}
/*.step04_text ul li {display:block; margin:0;}*/
.step04_text ul li {display:inline-block; width:18%; height:auto; margin:0; padding:0;}
/*박스05-구글지도*/
.contactus {float:none; width:100%; padding:15% 0 5% 0; text-align:center;}
.contactus h4 {padding-bottom:5%; color:#ffffff; font-size:2.5rem; font-weight:bold;}
.contactus h5 {padding-bottom:1%; color:#a8ef00; font-size:1.4rem; font-weight:normal;}
.contactus h6 {color:#ffffff; font-size:1rem; font-weight:normal; line-height:140%;}
.contactus h6.map_email_mobile {display:block; visibility:visible;}
.contactus h6.map_email_pc {display:none; visibility:hidden; color:#ffffff;}
.contactus h6.map_email_pc a {color:#ffffff; text-decoration:none;}
.contactus h6.map_email_pc a:link,a:visited,a:active,a:hover,a:focus {color:#ffffff; text-decoration:none;}
.contactus h6.Link_icon {display:inline-block; padding:2% 2% 0 0;}
.contactus h6.Link_icon img {float:left; width:42px;}
.contactus ul {list-style:none; list-style-type:none; width:80%; margin:0 auto; padding:5% 0;}
.contactus ul li {display:block; margin:0; padding-bottom:4%; color:#ffffff; text-align:left;}
#map_view {width:80%; height:350px; margin:0 auto;}
/************
하단
************/
#footer {clear:both; width:100%; height:10%; background-color:#202024;}
.copy_line {width:90%; height:1px; margin:0 auto; background-color:#58585b;}
#copylight {height:100%;}
.middle_box_inner_content p {margin:0; font-size:1rem; color:#9e9e9e; line-height:200%;}
}
/*========================================================================
모바일&타블렛 - 480px 이상
========================================================================*/
/* 모바일&타블렛 레이아웃: 480px~767px. 다음에서 스타일 상속: 모바일 레이아웃. */
@media screen and (min-width: 480px) {
.step03_text h5 {padding:45px 0 2px 0;}
.step03_text h6 {padding:0 0 45px 0;}
.step03_text ul li:nth-child(1n) {background-position:left 28% center; background-size:170px;}
.step03_text ul li:nth-child(2n) {background-position:left 26% center; background-size:165px;}
.step03_text ul li:nth-child(3n) {background-position:left 26% center; background-size:165px;}
.li_text_box {padding:0 0 0 56%}
.step04_text h5 {font-size:0.8rem;}
.step04_text ul li {margin:0 2px 0 0;}
.contactus h6.Link_icon img {width:52px;}
}
/*========================================================================
타블렛 - 769px 이상
========================================================================*/
/* 타블렛 레이아웃: 769px~1024px. 다음에서 스타일 상속: 모바일 레이아웃. */
@media screen and (min-width: 769px) {
/*전체*/
#wrap {min-height:600px;}
/************
헤더
************/
.visual_content h4 {font-size:50px;}
.visual_content h4.visual_logo img {width:460px;}
.visual_content h4.visual_title {background-position:left top 10px; background-size:15%;}
.visual_content ul li.visual_text {font-size:18px;}
/************
컨텐츠 - 공통
************/
/*가로길이제한 - PC:제한값있음, 타블렛:제한값없음, 모바일:사용안함*/
.w_limit {margin:0 auto; padding:0 5%;}
/************
컨텐츠 - 내용
************/
/*박스01-이미지오른쪽(미션)*/
.step01_img {position:absolute; right:0; width:50%; padding:0; background-position:right -10px center;}
.step01_text {width:50%; padding:12% 0 12% 2%; text-align:left;}
.step01_text h4 {font-size:3rem;}
.step01_text p {font-size:1rem;}
/*박스02-이미지왼쪽(커뮤니티)*/
.step02_img {position:absolute; float:left; width:50%; margin:0; padding-top:0; background-position:left center;}
.step02_text {position:relative; float:right; width:50%; padding:15% 0 15% 0; text-align:left;}
.step02_text h4 {font-size:3rem;}
.step02_text p {width:100%; font-size:1rem;}
/*박스03-(Business Area)*/
.step03_text {padding:12% 0 12% 0;}
.step03_text h4 {text-align:left; font-size:3rem;}
.step03_text h5 {padding-top:80%; padding-bottom:2px; text-align:center;}
.step03_text h6 {padding-bottom:15%; font-size:1.1rem; text-align:center;}
.step03_text ul li {display:inline-block; width:30%; border:solid #dddddd 1px;}
.step03_text ul li:nth-child(1n) {float:left; background-position:center top 18%; background-size:80%; border-bottom:solid #dddddd 1px;}
.step03_text ul li:nth-child(2n) {float:none; background-position:center top 18%; background-size:80%; border-bottom:solid #dddddd 1px;}
.step03_text ul li:nth-child(3n) {float:right; background-position:center top 18%; background-size:80%;}
.li_text_box {padding:0 0 0 0}
/*박스04-스마트팩토리*/
.step04_text h4 {font-size:3rem;}
.step04_text h4 span {display:inline-block; width:auto;}
.step04_text h5 {width:100%; padding:1% 25%; font-size:1rem; line-height:200%;}
.step04_text p {font-size:1rem;}
.step04_text .img {padding:440px 0 0 0; background-size:contain;}
.step04_text ul li {display:inline-block; width:18%; height:auto; margin:0 5px; padding:0;}
/*박스05-구글지도*/
.contactus {padding:12% 0;}
.contactus h4 {font-size:3rem; text-align:left;}
.contactus h5 {font-size:1.4rem;}
.contactus h6 {font-size:0.9rem;}
.contactus h6.Link_icon img {width:45px;}
.contactus ul {display:inline-block; width:42%; margin:0; padding:0 0 0 2%;}
#map_view {display:inline-block; float:left; width:55%; height:320px; margin:4% 0 0 0;}
/************
하단
************/
#footer {clear:both; width:100%; height:5%;}
}
/*========================================================================
PC - 865px 이상
========================================================================*/
@media screen and (min-width: 865px) {
.contactus h6.Link_icon img {width:52px;}
}
/*========================================================================
PC - 1025px 이상
========================================================================*/
@media screen and (min-width: 1025px) {
/************
헤더
************/
.visual_content h4 {font-size:72px;}
.visual_content h4.visual_logo img {width:520px;}
.visual_content ul li.visual_text {font-size:28px;}
/************
컨텐츠 - 공통
************/
/*숨기고보이기*/
.div_visible{display:none; visibility:hidden;}
.div_hidden{display:block; visibility:visible;}
/*가로길이제한 - PC:제한값있음, 타블렛:제한값없음, 모바일:사용안함*/
.w1280 {width:1280px; max-width:100%; margin:0 auto; padding:0 20px;}
.w_limit {width:1150px; max-width:100%; margin:0 auto; padding:0 20px;}
/************
컨텐츠 - 내용
************/
/*박스01-이미지오른쪽(미션)*/
.step01_img {width:80%; margin:0; background-position:right 0px center;}
.step01_text {padding:15% 0 15% 0;}
.step01_text h4 {font-size:60px;}
.step01_text p {font-size:20px;}
/*박스02-이미지왼쪽(커뮤니티)*/
.step02_img {width:60%;}
.step02_text h4 {font-size:60px;}
.step02_text p {width:100%; font-size:20px;}
/*박스03-(Business Area)*/
.step03_text h4 { font-size:60px;}
.step03_text h5 {padding-top:85%;}
.step03_text ul li:nth-child(1n) {background-position:center top 20%; background-size:90%;}
.step03_text ul li:nth-child(2n) {background-position:center top 20%; background-size:90%;}
.step03_text ul li:nth-child(3n) {background-position:center top 20%; background-size:90%;}
/*박스04-스마트팩토리*/
.step04_text h4 {font-size:60px;}
.step04_text h5 {font-size:20px;}
.step04_text p {font-size:20px;}
.step04_text .img {padding:470px 0 0 0; background-size:800px;}
/*박스05-구글지도*/
.contactus h4 {font-size:60px;}
.contactus h5 {font-size:26px;}
.contactus h6 {font-size:18px;}
.contactus h6.map_email_mobile {display:none; visibility:hidden;}
.contactus h6.map_email_pc {display:block; visibility:visible;}
#map_view {height:400px;}
/************
하단
************/
#footer {clear:both; width:100%; height:5%;}
}