@charset "utf-8"; /* LAYOUT*/ #divWrapper {width:100%; min-width:1400px;height:auto; line-height:normal;/* background:url('../images/common/top_bg_.gif') repeat-x;*/} #divSub {width:100%; margin:0 auto; height:auto; margin:-150px auto 0;} #divSub:after {display:block; clear:both; content:;} #divContent {position:relative; width:1400px; margin:0 auto;} #divContent:after {display:block; clear:both; content:;} #Accessibility {position:relative; height:0; z-index:200;} #Accessibility .sknavi {position:absolute; top:-500px;} #Accessibility .sknavi:hover, #Accessibility .sknavi:focus, #Accessibility .sknavi:active {top:0; display:block; width:100%; height:30px; margin:auto 0; padding-top:10px; text-align:center; color:#333; background:#ffc000; font-weight:bold; font-size:15px; line-height:normal;} /* HEADER */ #divHeader {position:relative; width:100%; top:0px;left:0px; height:130px; background:rgba(0,0,0,0.3);z-index:100;} #divHeader .divHeader {position:relative; width:1400px; margin:0 auto; } #topLogo h1 a{position:absolute; width:412px; left:35px; top:30px; color:#fff; font-size:40px; font-weight:600; z-index:200;} #s1Header {position:relative; width:100%; margin:0 auto; height:130px; background:#94ac4c;} #s1Header .s1Header {position:relative; width:1400px; margin:0 auto; } #s2Header {position:relative; width:100%; margin:0 auto; height:130px; background:#d3923d;} #s2Header .s2Header {position:relative; width:1400px; margin:0 auto; } #s3Header {position:relative; width:100%; margin:0 auto; height:130px; background:#4f98b6;} #s3Header .s3Header {position:relative; width:1400px; margin:0 auto; } #s4Header {position:relative; width:100%; margin:0 auto; height:130px; background:#a380ca;} #s4Header .s4Header {position:relative; width:1400px; margin:0 auto; } /* 메인메뉴 */ #divMenu { position:absolute; width:950px; /* z-index:100;*/ left:450px;} #main_navi {position:absolute;height:115px; display:block; /* z-index:100;*/z-index:4; color:#fff;} #main_navi #gnb {text-align:right; border:0px solid #ff0000;} #main_navi #gnb>ul{float:left; margin:35px 0; } #main_navi #gnb span {font-size:24px; color:#fff; font-weight:600;} #main_navi #gnb>ul>li {float:left; /*height:40px;*/ height:60px; line-height:40px;position:relative; padding:0 25px; text-align:center; color:#fff;} #main_navi #gnb>ul>li:nth-child(2) {padding:0 55px; } #main_navi #gnb>ul>li>a:after{display:block; position:absolute; left:0; bottom:0; content: ""; width:100%; height:2px; background:#f5f5f5; transform:scale(0, 1); transition:all 0.3s ease;} #main_navi #gnb>ul>li>a.active, #main_navi #gnb>ul>li>a:hover{} #main_navi #gnb>ul>li>a.active:after, #main_navi #gnb>ul>li>a:hover:after {transform: scale(1, 1); color:#fff !important;} #main_navi #gnb>ul>li .two_depth {position:absolute; top:60px; left:0; /*width:200px*/width:100%; margin-left:0px; text-align:center; opacity:1; z-index:100 !important; height:auto; display:none;/*display:block;*/background:rgba(0,0,0,0.5); border:1px solid rgba(255,255,255,0.2);} #main_navi #gnb>ul>li .two_depth1 {width:200px !important; left:-40px;} #main_navi #gnb>ul>li .two_depth1 ul li a:hover {color: #fff; font-weight:bold; text-decoration:underline;} #main_navi #gnb>ul>li .two_depth ul li {margin-top:0px; text-align:left; padding-left:40px; z-index:100 !important; } #main_navi #gnb>ul>li .two_depth ul li:first-child {margin-top:10px;} #main_navi #gnb>ul>li .two_depth ul li:last-child {margin-bottom:10px;} #main_navi #gnb>ul>li .two_depth ul li a {color:#fff; font-size:18px; letter-spacing:-1px;} #main_navi #gnb>ul>li .two_depth ul li a:hover {color: #fff; font-weight:bold; text-decoration:underline;} #main_navi #gnb>ul>li .two_depth ul.depth_1 li {margin-top:0px; text-align:left; padding-left:25px; z-index:100 !important; } #main_navi #gnb>ul>li .two_depth ul.depth_2 li {margin-top:0px; text-align:left; padding-left:70px; z-index:100 !important; } #main_navi #gnb>ul>li .two_depth ul.depth_3 li {margin-top:0px; text-align:left; padding-left:50px; z-index:100 !important; } #main_navi #gnb>ul>li .two_depth ul.depth_4 li {margin-top:0px; text-align:left; padding-left:50px; z-index:100 !important; } #main_navi #gnb>ul>li .two_depth ul.depth_5 li {margin-top:0px; text-align:left; padding-left:35px; z-index:100 !important; } /*#main_navi.active {height:370px; background:url('../images/common/gnb_bg.png') repeat-x 0 50px;}*/ /*#main_navi #gnb>ul>li .navi_bg {position:absolute; top:-10px;left:-270px;color:#888;font-size:13px;z-index:5;text-align:left;}*/ #SearchAear {position:relative; width:1400px; margin:0 auto;} #topSearch {position:absolute; top:34px; right:0px;} #popSearch {display:none; position:absolute; top:48px; right:0px; width:400px; height:80px; background:#f3f3f3; border:2px solid #685747; z-index:1200;} .searchBox {padding:19px 0 0 25px; width:400px; height:40px;} .searchBox label {visibility:hidden; height:0; width:0; font-size:0; position:absolute; left:-5000px;} .searchBox input {width:280px; height:40px; margin:0; padding-left:10px; border:1px solid #887059; background:#ffff; vertical-align:top;} .searchBox button {width:55px; height:42px; margin:0; font-size:15px; color:#ffc82e; font-weight:bold; background:#685747;} /* 서브메뉴 */ #sub_nav {} .home{width:90px; text-align:center; background:#53c71b;} /* 메인페이지*/ /*main.css 20240603 에서 재정의*/ /* #divVisual {position:relative; width:100%; text-align:center; overflow:hidden; margin:-150px auto 0; height:100vh; background:#000;} #divVisual p{ width:100%; max-width:1400px; position:absolute; z-index:-50; left:400px; margin-left:-550px; text-align:center; margin:0 auto; top:85px;} #divVisual img{border:0px solid #fff;} #divVisual .txt {top:40%; position:absolute; border:0px solid #ff0000; color:#fff; z-index:200; width:1400px; left: calc(50% - 700px); text-align:left;} #divVisual .txt .txts{font-size:72px; font-weight:800;} #divVisual .txt .txtm{font-size:80px; font-weight:600;} #divVisual .txt .txtl{font-size:100px; font-weight:800;} #divVisual .txt .v_btn{border:1px solid rgba(255,255,255,0.3); padding:20px 30px; line-height:50px; height:50px; color:#fff; } #divVisual .txt .v_btn .arr{padding-left:80px;} */ /*main.css 에서 재정의*/ #divbusiness .tit{ font-size:72px; font-weight:600; color:#fff; width:100%; max-width:1400px; margin:0 auto; padding:100px 0 50px 0;;} #divbusiness .tit .titc{ font-size:20px; font-weight:300; padding-left:50px;} #divbusiness {position:relative; width:100%; min-height:700px;height:80vh; background:url('../images/main/dealbg.jpg') top center; background-size:100%; margin:0 auto;} /*#divbusiness {position:relative; width:100%; min-height:900px;height:100vh; background:url('../images/main/dealbg.jpg') top center; background-size:100%; margin:0 auto;}*/ #divbusiness .business {width:1400px; margin:0 auto; overflow:hidden; padding:0px 0;} #divbusiness .business div {float:left; width:354px; margin-right: 1px; margin-bottom: 1px; box-shadow:20px 10px 40px rgba(0,0,0,0.0); } #divbusiness .business div {border-radius:0px; width:348px; height:290px;} #divbusiness .business div.bg1 {background:rgba(0,0,0,0.5) url("../images/main/ban1.png") no-repeat center 35%; box-sizing: border-box; } #divbusiness .business div.bg1 .tit {font-size:48px; font-weight:600; text-align:center; padding-top:190px;} #divbusiness .business div.bg1 .detail {padding:0px 30px; font-size:18px; font-weight:500;} #divbusiness .business div.bg1:hover{background:rgba(51,116,202,1) url("../images/main/ban1.png") no-repeat center 35%; background-size:25%; margin-right:1px !important;box-sizing: border-box;-webkit-transition: all 1s ease-in; transition: all 0.1s ease-in} #divbusiness .business div.bg2 {background:rgba(0,0,0,0.5) url("../images/main/ban2.png") no-repeat center 35%; box-sizing: border-box; } #divbusiness .business div.bg2 .tit {font-size:48px; font-weight:600; text-align:center; padding-top:190px;} #divbusiness .business div.bg2 .detail {padding:0px 30px; font-size:18px; font-weight:500;} #divbusiness .business div.bg2:hover{background:rgba(51,116,202,1) url("../images/main/ban2.png") no-repeat center 35%; background-size:25%; margin-right: 1px !important;box-sizing: border-box;-webkit-transition: all 1s ease-in; transition: all 0.1s ease-in} #divbusiness .business div.bg3 {background:rgba(0,0,0,0.5) url("../images/main/ban3.png") no-repeat center 35%; box-sizing: border-box; } #divbusiness .business div.bg3 .tit {font-size:48px; font-weight:600; text-align:center; padding-top:190px;} #divbusiness .business div.bg3 .detail {padding:0px 30px; font-size:18px; font-weight:500;} #divbusiness .business div.bg3:hover{background:rgba(51,116,202,1) url("../images/main/ban3.png") no-repeat center 35%; background-size:25%; margin-right: 1px !important;box-sizing: border-box;-webkit-transition: all 1s ease-in; transition: all 0.1s ease-in} #divbusiness .business div.bg4 {background:rgba(0,0,0,0.5) url("../images/main/ban4.png") no-repeat center 35%; box-sizing: border-box; } #divbusiness .business div.bg4 .tit {font-size:48px; font-weight:600; text-align:center; padding-top:190px;} #divbusiness .business div.bg4 .detail {padding:0px 30px; font-size:18px; font-weight:500; color:#fff;} #divbusiness .business div.end {margin:0px !important;} #divbusiness .business div .t {font-size:30px; text-align:center; line-height:100px; font-weight:600;} #divbusiness .business div.bg4:hover{background:rgba(51,116,202,1) url("../images/main/ban4.png") no-repeat center 35%; background-size:25%; margin-right: 1px !important;box-sizing: border-box;-webkit-transition: all 1s ease-in; transition: all 0.1s ease-in} #divbusiness .business div.bg5 {background:rgba(0,0,0,0.5) url("../images/main/ban5.png") no-repeat center 35%; box-sizing: border-box; } #divbusiness .business div.bg5 .tit {font-size:48px; font-weight:600; text-align:center; padding-top:190px;} #divbusiness .business div.bg5 .detail {padding:0px 30px; font-size:18px; font-weight:500;} #divbusiness .business div.bg5:hover{background:rgba(51,116,202,1) url("../images/main/ban5.png") no-repeat center 35%; background-size:25%; margin-right: 1px !important;box-sizing: border-box;-webkit-transition: all 1s ease-in; transition: all 0.1s ease-in} #divbusiness .business div.bg6 {background:rgba(0,0,0,0.5) url("../images/main/ban6.png") no-repeat center 35%; box-sizing: border-box; } #divbusiness .business div.bg6 .tit {font-size:48px; font-weight:600; text-align:center; padding-top:190px;} #divbusiness .business div.bg6 .detail {padding:0px 30px; font-size:18px; font-weight:500;} #divbusiness .business div.bg6:hover{background:rgba(51,116,202,1) url("../images/main/ban6.png") no-repeat center 35%; background-size:25%; margin-right: 1px !important;box-sizing: border-box;-webkit-transition: all 1s ease-in; transition: all 0.1s ease-in} #divbusiness .business div.bg7 {background:rgba(0,0,0,0.5) url("../images/main/ban7.png") no-repeat center 35%; box-sizing: border-box; } #divbusiness .business div.bg7 .tit {font-size:48px; font-weight:600; text-align:center; padding-top:190px;} #divbusiness .business div.bg7 .detail {padding:0px 30px; font-size:18px; font-weight:500;} #divbusiness .business div.bg7:hover{background:rgba(51,116,202,1) url("../images/main/ban7.png") no-repeat center 35%; background-size:25%; margin-right: 1px !important;box-sizing: border-box;-webkit-transition: all 1s ease-in; transition: all 0.1s ease-in} #divservice .tit{ font-size:72px; font-weight:600; color:#fff; width:100%; max-width:1400px; margin:0 auto; padding:100px 0 50px 0;;} #divservice .tit .titc{ font-size:20px; font-weight:300; padding-left:50px;} #divservice {position:relative; width:100%; height:100vh; background:url('../images/main/servicebg.jpg') top center; background-size:100%; margin:0 auto;} #divservice .service {width:1400px; margin:0 auto; overflow:hidden; padding:0px 0;} #divservice .service div {float:left; width:354px; margin-right: 1px; margin-bottom: 1px; box-shadow:20px 10px 40px rgba(0,0,0,0.0); } #divservice .service div {border-radius:0px; width:348px; height:500px;} #divservice .service div.bg1 {background:rgba(0,0,0,0.5) url("../images/main/b_ban1.png") no-repeat center 25%; box-sizing: border-box; } #divservice .service div.bg1 .tit {font-size:48px; font-weight:600; text-align:center; padding-top:300px; color:#3374ca;} #divservice .service div.bg1 .detail {padding:0px 0px; font-size:18px; text-align:center; color:#fff;} #divservice .service div.bg1:hover{background:rgba(0,0,0,0.8) url("../images/main/b_ban1.png") no-repeat center 25%; background-size:50%; margin-right:1px !important;box-sizing: border-box;-webkit-transition: all 1s ease-in; transition: all 0.1s ease-in} #divservice .service div.bg1:hover .tit{font-size:50px; -webkit-transition: all 1s ease-in; transition: all 0.1s ease-in} #divservice .service div.bg2 {background:rgba(0,0,0,0.5) url("../images/main/b_ban2.png") no-repeat center 25%; box-sizing: border-box; } #divservice .service div.bg2 .tit {font-size:48px; font-weight:600; text-align:center; padding-top:300px; color:#3374ca;} #divservice .service div.bg2 .detail {padding:0px 0px; font-size:18px; text-align:center; color:#fff;} #divservice .service div.bg2:hover{background:rgba(0,0,0,0.8) url("../images/main/b_ban2.png") no-repeat center 25%; background-size:50%; margin-right:1px !important;box-sizing: border-box;-webkit-transition: all 1s ease-in; transition: all 0.1s ease-in} #divservice .service div.bg2:hover .tit{font-size:50px; -webkit-transition: all 1s ease-in; transition: all 0.1s ease-in} #divservice .service div.bg3 {background:rgba(0,0,0,0.5) url("../images/main/b_ban3.png") no-repeat center 25%; box-sizing: border-box; } #divservice .service div.bg3 .tit {font-size:48px; font-weight:600; text-align:center; padding-top:300px; color:#3374ca;} #divservice .service div.bg3 .detail {padding:0px 0px; font-size:18px; text-align:center; color:#fff;} #divservice .service div.bg3:hover{background:rgba(0,0,0,0.8) url("../images/main/b_ban3.png") no-repeat center 25%; background-size:50%; margin-right:1px !important;box-sizing: border-box;-webkit-transition: all 1s ease-in; transition: all 0.1s ease-in} #divservice .service div.bg3:hover .tit{font-size:50px; -webkit-transition: all 1s ease-in; transition: all 0.1s ease-in} #divservice .service div.bg4 {background:rgba(0,0,0,0.5) url("../images/main/b_ban4.png") no-repeat center 25%; box-sizing: border-box; } #divservice .service div.bg4 .tit {font-size:48px; font-weight:600; text-align:center; padding-top:300px; color:#3374ca;} #divservice .service div.bg4 .detail {padding:0px 0px; font-size:18px; text-align:center; color:#fff;} #divservice .service div.bg4:hover{background:rgba(0,0,0,0.8) url("../images/main/b_ban4.png") no-repeat center 25%; background-size:50%; margin-right:1px !important;box-sizing: border-box;-webkit-transition: all 1s ease-in; transition: all 0.1s ease-in} #divservice .service div.bg4:hover .tit{font-size:50px; -webkit-transition: all 1s ease-in; transition: all 0.1s ease-in} #divMain {position:relative; width:1400px; height:350px; margin:0 auto;} #divMain:after {display:block; clear:both; content:"";} /* 컨텐츠 껍데기 */ #subContents {clear:both; position:relative; width:100%; margin:0 auto; padding-bottom:10px; z-index:0; background:#f9f9f9;} #Contents {width:1400px; margin:0 auto; padding:80px 0 100px 0; min-height:250px; font-size:15px; line-height:1.6em; z-index:-100; } *html #Contents {height:250px;} #ContTitle { height:280px;width:100%; padding-top:200px; font-size:36px; color:#fff; text-align:left; font-weight:600; z-index:-100;} .s_visual{width:1400px;margin:0 auto; position:relative; height:205px;} .Title{width:1400px;margin:0 auto; } .bg1{background:url('../images/common/sub_bg1.jpg') repeat center bottom;z-index:-100;} .bg2{background:url('../images/common/sub_bg2.jpg') repeat center bottom;z-index:-100;} .bg3{background:url('../images/common/sub_bg3.jpg') repeat center top;z-index:-100;} .bg4{background:url('../images/common/sub_bg4.jpg') repeat center bottom;z-index:-100;} .bg_army{background:url('../images/common/sub_bg_army.jpg') repeat center top;z-index:-100;} .bg_short_paint{background:url('../images/common/bg_short_paint.jpg') repeat center top;z-index:-100;} .bg_circulation{background:url('../images/common/bg_circulation.jpg') repeat center top;z-index:-100;} .s_navi{width:1340px; margin:0 auto; padding:0px 30px; line-height:17px; color:#fff; height:17px; vertical-align:middle;} .s1_img1{position:absolute; top:115px; left:725px; z-index:100;} .s1_img2{position:absolute; top:-50px; left:835px; z-index:100;} .s1_img3{position:absolute; top:135px; left:1167px; z-index:100;} .s2_img1{position:absolute; top:30px; left:830px; z-index:100;} .s2_img2{position:absolute; top:-50px; left:920px; z-index:100;} .s2_img3{position:absolute; top:69px; left:1200px; z-index:100;} .s3_img1{position:absolute; top:115px; left:910px; z-index:100;} .s3_img2{position:absolute; top:75px; left:1010px; z-index:100;} .s3_img2-2{position:absolute; top:115px; left:1010px; z-index:100;} .s3_img2-3{position:absolute; top:155px; left:1010px; z-index:100;} .s3_img3{position:absolute; top:65px; left:1057px; z-index:110;} .s4_img1{position:absolute; top:14px; left:842px; z-index:100;} .s4_img2{position:absolute; top:15px; left:816px; z-index:100;} .s4_img2-2{position:absolute; top:-20px; left:830px; z-index:100;} .s4_img2-3{position:absolute; top:-38px; left:866px; z-index:100;} .s4_img2-4{position:absolute; top:-53px; left:905px; z-index:100;} .s4_img2-5{position:absolute; top:-26px; left:933px; z-index:100;} .s4_img2-6{position:absolute; top:9px; left:950px; z-index:100;} .s4_img3{position:absolute; top:16px; left:992px; z-index:100;} #ContTitle .tit_w1 h2 {width:500px; height:60px; line-height:80px;font-size:32px; font-weight:600; padding:10px 30px; color:#fff;} #ContTitle .tit_w2 h2 {width:420px; height:60px; font-size:48px; font-weight:500; padding:20px; background:url('../images/common/s_o_dot.png') no-repeat top left; margin:0 auto;} #ContTitle .sub_nav {width:1400px; margin:0 auto; bottom:0;z-index:1000;} #ContTitle .sub_nav ul a li{float:left; width:230px; height:80px; line-height:80px; font-size:26px; color:#888; text-align:center;} #ContTitle .sub_nav ul a li.on{color:#000; border-bottom:7px solid #4cac75; } #ContTitle .sub_nav ul a li:hover{color:#000; border-bottom:7px solid #4cac75; } #ContTitle h3{font-size:48px; font-weight:750; padding:0px 30px; color:#fff;} #Contents h4 {clear:both; color:#222; font-size:22px; font-weight:bold; } #Contents h5 {clear:both; color:#222; font-size:20px; font-weight:bold; } /*탭 */ .tab-line {position:relative;} .tab-line .tab {width:100%; overflow:hidden; height:35px; margin-bottom:20px;} .tab-line .tab li {float:left; width:25%; text-align:center; vertical-align:top;} .tab-line .tab li:first-child a {border-left:1px solid #fff;} .tab-line .tab li a {display:block; font-size:13px; line-height:2.6em; border-right:2px solid #fff; background:#e3e3e3; vertical-align:top; overflow:hidden;} .tab-line .tab li.tabon a {background:#2c8ee1; color:#fff; font-weight:bold;} .tab-line .tab li.tabon span {width:0; height:0; border-top:6px solid #1772f2; border-left:6px solid transparent; border-right:6px solid transparent; font-size:0; line-height:1px; display:inline-block; *display: block; vertical-align:top; border-bottom:0; text-align:center;} .istab .tab-cont {display:none;} .tab-cont {display:block; width:100%; overflow:hidden;} /*블릿 */ .bu_gdot {background:url('../images/common/g_dot.png') no-repeat left top; padding-left:0px; padding-top:40px;} .bu_gdot2 {background:url('../images/common/g_dot3.png') no-repeat left 15px; padding-left:15px;} /* 배너 */ #Banner {clear:both; position:relative; width:100%; height:120px;border-top:0px solid #dedede; border-bottom:0px solid #dedede; } #Banner div {position:relative; width:1400px; margin:0 auto; } #Banner div h2 {position:absolute; top:10px; left:0px; font-size:17px; color:#333;} #Banner ul {position:absolute; padding:40px 0;width:100%; left:120px;} #Banner li {float:left; line-height:78px; width:20%; text-align:center;}/*{float:left; padding:3px 20px 7px;} 20180914 수정*/ #Banner li.end {padding-right:0;} #Banner .btnArea {z-index:999; overflow:hidden; position:absolute; left:20px; top:10px;} #Banner .btnArea input {float:left; padding-right:3px;} #Banner .btnArea input.type-image {border:none;} /* 바닥글 */ #divFooter {clear:both; width:100%; height:170px; padding-top:50px; text-align:left; background:#000;} #bottomCopy {position:relative; margin:0 auto; width:1400px; } #bottomCopy .bottomMenu li { display:inline-block; margin:0 auto; padding:0 20px;color:#fff; font-weight:bold; background:url('../images/common/b_bar.gif') no-repeat right 6px;} #bottomCopy .bottomMenu li a {color:#fff; } #bottomCopy .bottomMenu .fir {padding-left:0;} #bottomCopy .bottomMenu .end {padding-right:0; background:none;} #bottomCopy p {color:#fff; font-size:18px; line-height:1.7em;} #bottomCopy img {position:absolute; top:0px; right:0px;} @keyframes submenuDisplay {from {opacity:0}to {opacity:1;}} /* 20240603 통합 및 추가 서브메뉴 탭*/ #sub_nav {opacity:0;width:100%; z-index:999; margin-top:0px !important; animation: submenuDisplay 1.5s ;animation-delay: 0.1s ;animation-fill-mode: forwards;} #sub_nav .sub_nav0, #sub_nav .sub_nav1, #sub_nav .sub_nav2, #sub_nav .sub_nav3, #sub_nav .sub_nav4, #sub_nav .sub_nav7 {position:relative; width:100%; max-width:1400px; margin:0 auto; height:75px; z-index:200; } #sub_nav .sub_nav0 > ul, #sub_nav .sub_nav1 > ul, #sub_nav .sub_nav2 > ul, #sub_nav .sub_nav3 > ul, #sub_nav .sub_nav4 > ul, #sub_nav .sub_nav7 > ul {height:100%;} #sub_nav .sub_nav0 > ul > a li.active, #sub_nav .sub_nav1 > ul > a li.active, #sub_nav .sub_nav2 > ul > a li.active, #sub_nav .sub_nav3 > ul > a li.active, #sub_nav .sub_nav4 > ul > a li.active, #sub_nav .sub_nav7 > ul > a li.active{background-color:#3373ca; font-size:26px;} #sub_nav .sub_nav0 > ul > a li:first-child, #sub_nav .sub_nav1 > ul > a li:first-child, #sub_nav .sub_nav2 > ul > a li:first-child, #sub_nav .sub_nav3 > ul > a li:first-child, #sub_nav .sub_nav4 > ul > a li:first-child, #sub_nav .sub_nav7 > ul > a li:first-child {} #sub_nav .sub_nav0 > ul > a li > a, #sub_nav .sub_nav1 > ul > a li > a, #sub_nav .sub_nav2 > ul > a li > a, #sub_nav .sub_nav3 > ul > a li > a, #sub_nav .sub_nav4 > ul > a li > a, #sub_nav .sub_nav7 > ul > a li > a {display:block; color:#fff;} #sub_nav .sub_nav0 > ul > a li:hover, #sub_nav .sub_nav1 > ul > a li:hover, #sub_nav .sub_nav2 > ul > a li:hover, #sub_nav .sub_nav3 > ul > a li:hover, #sub_nav .sub_nav4 > ul > a li:hover, #sub_nav .sub_nav7 > ul > a li:hover {background-color:#1d5bae;} #sub_nav .sub_nav0 > ul > a li {float:left; position:relative; height:100%; margin-right:0px; padding-right:0px; margin-right:2px; width:100%; color:#fff; text-align:center; line-height:70px; background: rgba(0, 0, 0, 1); font-size:24px;} #sub_nav .sub_nav1 > ul > a li {float:left; position:relative; height:100%; margin-right:0px; padding-right:0px; margin-right:2px; width:100%; color:#fff; text-align:center; line-height:70px; background: rgba(0, 0, 0, 1); font-size:24px;} #sub_nav .sub_nav2 > ul > a li {float:left; position:relative; height:100%; margin-right:0px; padding-right:0px; margin-right:2px; width:50; color:#fff; text-align:center; line-height:70px; background: rgba(0, 0, 0, 1); font-size:24px;} #sub_nav .sub_nav3 > ul > a li {float:left; position:relative; height:100%; margin-right:0px; padding-right:0px; margin-right:2px; width:33%; color:#fff; text-align:center; line-height:70px; background: rgba(0, 0, 0, 1); font-size:24px;} #sub_nav .sub_nav4 > ul > a li {float:left; position:relative; height:100%; margin-right:0px; padding-right:0px; margin-right:2px; width:24%; color:#fff; text-align:center; line-height:70px; background: rgba(0, 0, 0, 1); font-size:24px;} #sub_nav .sub_nav7 > ul > a li {float:left; position:relative; height:100%; margin-right:0px; padding-right:0px; margin-right:2px; width:14%; color:#fff; text-align:center; line-height:70px; background: rgba(0, 0, 0, 1); font-size:24px;} /* 20240603 통합 및 추가 서브메뉴 탭*/ /*초기 모양 및 리턴시 동작 */ .slide_menu>a>b { overflow:hidden; width:0px;text-indent:-9999px; top:calc(50% - 1px); transition:transform 0.1s, width 0.1s 0.1s, right 0.2s 0.2s;} .slide_menu>a:before { top:calc(50% - 3px); transform:translateY(-10px) rotate(0deg); transition:transform 0.2s, width 0.5s 0.5s, right 0.2s 0.2s;} .slide_menu>a:after { top:calc(50%); transform:translateY(10px) rotate(0deg); transition:transform 0.2s, width 0.2s 0.2s, right 0.5s 0.5s;} /* top :초기위치 50%위치에서 1픽셀 뺀 위치 transform : 이동요소 translateY Y축으로 이동 rotate 회전각 */ .slide_menu>a:hover>b { width:40px; height:6px;left:15px;transition:transform 0.2s 0.2s, width 0.4s, right 0.2s 0.2s;border-radius: 0px 3px 5px 0px; } .slide_menu>a:hover:before { width:25px; height:6px; left:9px; transform:translateY(-6px) rotate(-405deg); transition:transform 0.2s 0.2s, width 0.2s, right 0.2s;border-radius: 0px 3px 3px 0px; } .slide_menu>a:hover:after { width:25px; height:6px; left:9px; transform:translateY(6px) rotate(405deg); transition:transform 0.2s 0.2s, width 0.2s, right 0.5s;border-radius: 0px 3px 3px 0px; } .slide_menu>a.on:before { width:25px; height:6px;left:9px; transform:translateY(-6px) rotate(-45deg);} .slide_menu>a.on:after { width:25px; height:6px; left:9px; transform:translateY(6px) rotate(45deg);} .btn_magnify { position: absolute; width: 66px; height: 66px; } .btn_magnify:before { position: absolute; content: ''; width: 16px; height: 16px; top: calc(50% - 9px); left: calc(50% - 10px); border-radius: 50%; box-shadow: 0 0 0 5px #fff; } .btn_magnify:after { position: absolute; content: ''; width: 10px; top: calc(50% + 11px); left: calc(50% + 6px); border-top: solid 6px #fff; transform: rotate(45deg); } .condiv{width:100%; padding-top:40px;} /* table lsit */ .tabList {clear:both; position:relative; padding-top:20px;} .tabList table {width:100%; border-top:2px solid #000;} .tabList table td {text-align:center;padding:20px 0; height:4em; border-bottom:1px solid #ddd; border-right:1px solid #ddd;} .tabList table th {height:4.5em; color:#333; background:#e9f0fd; border-bottom:1px solid #ddd; border-right:1px solid #ddd; } .tabList table th.fir { border-left:1px solid #ddd;} .tabList table td.fir { border-left:1px solid #ddd;} /* table lsit */ .tabList_p {clear:both; position:relative; padding-top:20px;} .tabList_p table {width:100%; border-top:2px solid #000;} .tabList_p table td {/*text-align:center;*/padding:20px 0; height:4em; border-bottom:1px solid #ddd; border-right:1px solid #ddd;} .tabList_p table th {height:4.5em; color:#333; background:#e9f0fd; border-bottom:1px solid #ddd; border-right:1px solid #ddd; } .tabList_p table th.fir { border-left:1px solid #ddd;} .tabList_p table td.fir { border-left:1px solid #ddd;} .tabList_p table td p.list { margin : 0 7%; background: url(../images/defect/defect_dot.png) no-repeat; padding-left: 15px; } .tabList table td p.list { margin : 0 5%; background: url(../images/defect/defect_dot.png) no-repeat; padding-left: 15px; } .box{border:1px solid #ddd; background:#f9f9f9; padding:20px 50px; text-align:left; font-weight:600; margin-top:0px; width:1300px; line-height:1.6; overflow:hidden;} .box .red{color:#ee2525; font-size:28px; } .box .stxt{font-size:16px; color:#ee2525; line-height:1;} .box .left{float:left;} .box .right{float:right;} .tabList1_thin {clear:both; position:relative; padding-top:20px;} .tabList1_thin table {/*width:100%;*/ border-top:2px solid #000;} .tabList1_thin table td {text-align:center;padding:15px 0; height:1.5em; border-bottom:1px solid #ddd; border-right:1px solid #ddd;} .tabList1_thin table th {height:4.5em; color:#333; background:#e9f0fd; border-bottom:1px solid #ddd; border-right:1px solid #ddd; } .tabList1_thin table th p {padding:20px 0;} .tabList1_thin table th.fir { border-left:1px solid #ddd;} .tabList1_thin table td.fir { border-left:1px solid #ddd;} .tabList1_thin table td.aleft{text-align:left;padding:25px 20px 25px 30px; height:2em;} .tabList1_thin table td div.contents{width:100%;text-align:left;padding:0px 30px;} .tabList1_thin table td.aleft p{background:url('../images/defect/defect_dot.png') no-repeat;padding-left:20px;} .tabList1_thin table td.cause {text-align:left;} .tabList1_thin table td.cause p{background:url('../images/defect/defect_dot2.png') no-repeat;margin-left:20px;padding:0px 10px 0 20px;} .tabList1_thin table td.thcolor { background:#e9f0fd; } .tabList2 {clear:both; position:relative; padding-top:20px;} .tabList2 table {/*width:100%;*/ border-top:2px solid #000;} .tabList2 table td {text-align:center;padding:20px 0; height:2em; border-bottom:1px solid #ddd; border-right:1px solid #ddd;} .tabList2 table th {height:2em; color:#333; background:#e9f0fd; border-bottom:1px solid #ddd; border-right:1px solid #ddd; } .tabList2 table th p {padding:20px 0;} .tabList2 table th.fir { border-left:1px solid #ddd;} .tabList2 table td.fir { border-left:1px solid #ddd;} .tabList2 table td.aleft{text-align:left;padding:25px 20px 25px 30px; height:2em;} .tabList2 table td div.contents{width:100%;text-align:left;padding:0px 30px;} .tabList2 table td.aleft p{background:url('../images/defect/defect_dot.png') no-repeat;padding-left:20px;} .tabList2 table td.cause {text-align:left;} .tabList2 table td.cause p{background:url('../images/defect/defect_dot2.png') no-repeat;margin-left:20px;padding:0px 10px 0 20px;} .tabList2 table td.thcolor { background:#e9f0fd; } .tabList3 {clear:both; position:relative; padding-top:20px;} .tabList3 table {/*width:100%;*/ border-top:2px solid #000;} .tabList3 table td {/*text-align:center;*/padding:20px 0; height:2em; border-bottom:1px solid #ddd; border-right:1px solid #ddd;} .tabList3 table th {height:2em; color:#333; background:#e9f0fd; border-bottom:1px solid #ddd; border-right:1px solid #ddd; } .tabList3 table th.fir { border-left:1px solid #ddd; padding:25px 20px 25px 30px;} .tabList3 table td.fir { border-left:1px solid #ddd; padding:25px 20px 25px 30px;} .tabList3 table td.aleft{text-align:left;padding:5px 20px 5px 30px; } .tabList3 table td div.contents{width:100%;text-align:left;padding:0px 30px;} .tabList3 table td.aleft p{background:url('../images/defect/defect_dot2.png') no-repeat;padding-left:20px;} .tabList3 table td .photo li {float:left;padding:7px 50px 7px 0px; } .tabList4 {clear:both; position:relative; padding-top:20px;} .tabList4 table {/*width:100%;*/ border-top:2px solid #000;} .tabList4 table td {/*text-align:center;*/padding:20px 0; height:2em; border-bottom:1px solid #ddd; border-right:1px solid #ddd;} .tabList4 table th {height:2em; color:#333; background:#e9f0fd; border-bottom:1px solid #ddd; border-right:1px solid #ddd; } .tabList4 table th.fir { border-left:1px solid #ddd;} .tabList4 table td.fir { border-left:1px solid #ddd;} .tabList4 table td.aleft{text-align:left;padding:5px 20px 5px 30px; } .tabList4 table td div.contents{width:100%;text-align:left;padding:0px 30px;} .tabList4 table td.cause p{background:url('../images/defect/defect_dot2.png') no-repeat;margin-left:20px;padding-left:20px;} .tabList4 table td .photo li {float:left;padding:7px 50px 7px 0px; } .tabList4 table td.aleft p{padding:10px 0px; } .tabList4 table td table {border :0px none !important;} .tabList4 table td table td {padding:0px !important; height:.1.3em !important;border :0px none !important;} .tabList4 table td table td p.method{background:url('../../images/defect/defect_dot4.png') no-repeat;padding:0px 20px !important;;} .tabList_thin_line {clear:both; position:relative;} .tabList_thin_line table {width:100%;} .tabList_thin_line table th, .tabList_thin_line table td {text-align:center;padding:20px 0; height:2em; border:1px solid #ddd; border-right:1px solid #ddd;*} .tabList_thin_line table td.aleft{text-align:left;padding:5px 20px 5px 30px; } .tabList_thin_line table th.thcolor, .tabList_thin_line table td.thcolor { background:#e9f0fd; } .tabList_thin_line table td.cause p{background:url('../images/defect/defect_dot2.png') no-repeat;margin-left:20px;padding-left:20px;text-align:left;} .tabList_noline {clear:both; position:relative;/* padding-top:20px;*/} .tabList_noline table {/*width:100%;*//* border-top:2px solid #000;*/} .tabList_noline table td {text-align:center;padding:20px 0; height:2em; /*border-bottom:1px solid #ddd; border-right:1px solid #ddd;*/} .tabList_noline table th {height:2em; color:#333; background:#e9f0fd;/* border-bottom:1px solid #ddd; border-right:1px solid #ddd; */} .tabList_noline table td.aleft{text-align:left;padding:5px 20px 5px 30px; } .tabList_noline table td.thcolor { background:#e9f0fd; } .box2{border:1px solid #ddd; background:#fff; padding:30px 50px; text-align:left; font-size:24px; font-weight:600; margin-top:30px; width:1300px; line-height:1.6; overflow:hidden; text-align:center;} .defect_li{margin:0 auto; width:100%;} .defect_li li {float:left;font-size:22px;margin:0 0.8%;cursor:pointer; border: 1px solid #3373ca;padding:3px 56px; border-radius: 5px;text-align:center; height:45px; line-height:45px;} .defect_li .on{border: 1px solid #3373ca; background:#3373ca; border-radius: 5px; color:#fff;} .defect_li .on a{color:#fff;} .defect_li .on span{color:#fe9e16 !important;} .defect_li li:hover{border: 1px solid #3373ca; background:#3373ca; border-radius: 5px; color:#fff !important;} .defect_li li:hover a{ color:#fff !important;} .defect_li li span{color:#e97707 !important;} .defect_li li:hover span{ color:#fe9e16 !important;} #defect_03_tab_menu {clear:both;padding:30px 0px 50px;} .defect_03_title {font-size: 20px;padding:0px 0px 20px;clear:both;} /* table 선박용 */ .business04Table {clear:both; position:relative; padding-top:20px;} .business04Table table {width:100%;border:none;} .business04Table table td {text-align:center;padding:10px 0; height:3em; } .business04Table table th {height:3em; color:#333; background:#e9f0fd; } .business04Table table td table td {padding:0px !important;} .business04Table1 {clear:both; position:relative; padding-top:20px;} .business04Table1 table {width:100%;border:none;} .business04Table1 table th {color:#333; background:#e9f0fd; height:2.5em; } .business04Table1 table td {height:2em; } .business04Table1 table th, .business04Table1 table td {padding:10px 0 10px 30px;} .business04Table1 table td table td {padding:0px !important;} .business04Table1 table td table td.border3side {border-top:2px solid #000;border-left:2px solid #000;border-right:2px solid #000;} .business04Table1 table td table td.border {border:2px solid #000;} .business04Table1 table td table td.pleft{text-align:left;padding-left:20px;} /* 매입처 */ .partner_w{width:100%;margin:0 auto;} .black_box{padding:30px; min-width:220px; max-width:500px; background:#000; opacity:0.8;} .line_w{width:100%; text-align:center; height:1px; background:#fff; opacity:0.5; margin:20px 0;} .col{border:1px solid #ccc; margin:10px; display:inline-block; padding:0; height:105px;width:320px;} .btn-0 { color: #000 !important;} .btn { display: inline-block; position: relative; overflow: hidden; padding: ; text-decoration: none;} .btn:before, .btn:after, .btn .btn--inner:before, .btn .btn--inner:after { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 0; background-color: currentColor; transition: 0.3s ease-in-out;} .btn--tlbr:before, .btn--tlbr:after { width: 0; height: 2px; } .btn--tlbr:after, .btn--tlbr .btn--inner:after { top: auto; right: 0; bottom: 0; left: auto;} .btn--tlbr .btn--inner:before, .btn--tlbr .btn--inner:after { width: 2px; height: 0;} .btn--tlbr:hover:before, .btn--tlbr:hover:after { width: 100%;} .btn--tlbr:hover .btn--inner:before, .btn--tlbr:hover .btn--inner:after { height: 100%;} .btn--trbl:before, .btn--trbl:after { width: 0; height: 2px;} .btn--trbl:before, .btn--trbl .btn--inner:before { right: 0; left: auto;} .btn--trbl:after, .btn--trbl .btn--inner:after { top: auto; bottom: 0;} .btn--trbl .btn--inner:before, .btn--trbl .btn--inner:after { width: 2px; height: 0;} .btn--trbl:hover:before, .btn--trbl:hover:after { width: 100%;} .btn--trbl:hover .btn--inner:before, .btn--trbl:hover .btn--inner:after { height: 100%;} .partner_w_s{width:100%;margin:0 auto;} .black_box{padding:30px; min-width:220px; max-width:500px; background:#000; opacity:0.8;} .line_w{width:100%; text-align:center; height:1px; background:#fff; opacity:0.5; margin:20px 0;} .partner_w_s .col{border:1px solid #ccc; margin:10px; display:inline-block; padding:0; height:82px;;} .btn-0 { color: #000 !important;} .btn { display: inline-block; position: relative; overflow: hidden; padding: ; text-decoration: none;} .btn:before, .btn:after, .btn .btn--inner:before, .btn .btn--inner:after { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 0; background-color: currentColor; transition: 0.3s ease-in-out;} .btn--tlbr:before, .btn--tlbr:after { width: 0; height: 2px; } .btn--tlbr:after, .btn--tlbr .btn--inner:after { top: auto; right: 0; bottom: 0; left: auto;} .btn--tlbr .btn--inner:before, .btn--tlbr .btn--inner:after { width: 2px; height: 0;} .btn--tlbr:hover:before, .btn--tlbr:hover:after { width: 100%;} .btn--tlbr:hover .btn--inner:before, .btn--tlbr:hover .btn--inner:after { height: 100%;} .btn--trbl:before, .btn--trbl:after { width: 0; height: 2px;} .btn--trbl:before, .btn--trbl .btn--inner:before { right: 0; left: auto;} .btn--trbl:after, .btn--trbl .btn--inner:after { top: auto; bottom: 0;} .btn--trbl .btn--inner:before, .btn--trbl .btn--inner:after { width: 2px; height: 0;} .btn--trbl:hover:before, .btn--trbl:hover:after { width: 100%;} .btn--trbl:hover .btn--inner:before, .btn--trbl:hover .btn--inner:after { height: 100%;} .svg_wrapper {display:none;position: fixed;right:0px;bottom: 0px;z-index:100;} svg circle {stroke: rgba(0,0,0,0.1);stroke-width: 1px;} svg .progress {stroke-width: 3px;transition: .2s;stroke: rgba(38,87,142,0.8);} .svg_circle{position:relative;display:block;margin:auto;cursor:pointer;z-index:999;} .svg_wrapper img {position:absolute;left:50%;top:70px;transform: translate(-50%, -50%); z-index:-10}