.tabDepth>a, .lastDepth>a, .depth3>a, .depth3>a>span:before, #mVisual .visualRoll .slider>div, #mVisual .vTxtArea .ii, #mVisual .slick-dots>li button, #mVisual .slick-dots>li button:before, #mVisual .vTxt .ii, #mVisual .iconMenu .inConts>a, #mRoute .routeMap #routeBtn>a, #mAbout .linkAbout>a .thumb img, .cont_img .btns>a{transition: all .3s ease-out; transform-origin: 50% 50%;} #mVisual .vTxt .ii{transition: all .5s ease-out; transform-origin: 50% 50%;} /*[s] All Style */ .bg_thumb_box{width:100%; height:100%; background-repeat: no-repeat; background-position: center center; box-sizing: border-box;} img.bg_thumb{opacity: 0;} img.ofi{width:100%; height:100%; object-fit:cover; object-position: center center; font-family: 'object-fit: cover; object-position: center center;'; position: absolute; left:0; top:0;} .tbLayout{width:100%; display:table;} .tbLayout.fixed{table-layout: fixed;} .tbLayout>*{display:table-cell; vertical-align: middle; box-sizing: border-box;} .tbLayout.vat>.td{vertical-align: top;} .tbLayout.full{width:1920px; margin-left:-960px; position: relative; left:50%;} .nTable{width:100%; border-top:1px solid #434343; font-size:0; line-height:0;} .nTable>table{width:100%; border-spacing:0; table-layout : fixed;} .nTable>table th, .nTable>table td{padding:20px 40px; background-color: #fff; border-bottom:1px solid #dbdbdb; font-weight: 300; font-size:16px; line-height:2.4rem; color:#666; letter-spacing: -0.03em; text-align:left; border-collapse:collapse; empty-cells:show; box-sizing: border-box; word-break:keep-all; word-wrap:break-word;} .nTable>table>thead>tr>th, .nTable>table>tbody>tr>th{background-color: #51546b; border-right:1px solid #3f414e; border-bottom:1px solid #3f414e; font-weight:400; font-size:17px; color:#fff; text-align: center; position: relative;} .nTable>table>tbody>tr>td.th{padding:20px 10px; background-color: #f9f9fb; border-right:1px solid #dbdbdb; font-weight:400; color: #000; text-align: center;} .nTable>table .tit{padding-bottom:0.5rem; font-weight: 400; color: #1b1b1b;} .nTable>table ul.bul{} .nTable>table ul.bul>li{margin-top:0rem; font-weight: 300; font-size:16px; line-height:2.4rem;} .nTable>table .icon{width:14.5rem; margin:0 auto; display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: flex-start; text-align: left;} .nTable>table .icon>dt{width:5.8rem;} .nTable>table .icon .i01{width:3.3rem;} .nTable>table .icon .i02{width:3.8rem;} .nTable>table .icon .i03{width:3.5rem;} .nTable>table .icon .i04{width:2.7rem;} .nTable>table .icon .i05{width:3.4rem;} .nTable>table .icon .i06{width:3.6rem;} .nTable.small{margin-top:1.5rem; border:1px solid #2f3334; overflow:hidden;} .nTable.small>table{width:calc(100% + 3px); margin:-1px; background-color: #bcbcbc; border-spacing:1px;} .nTable.small>table th, .nTable.small>table td{padding:10px; border:none; font-weight: 400; font-size:15px; line-height:20px; color: #595959; text-align: center;} .nTable.small>table>thead>tr>th{background-color: #e9e9e9; font-size:16px; color: #262626;} .nTable.small>table>tbody>tr>th{width:auto; border-right:none;} .nTable +.nTable{margin-top:40px;} .tabDepth{width:100%; margin-bottom:35px; font-size:0; line-height:0; text-align: center; box-sizing: border-box; overflow:hidden;} .tabDepth>a{width:19rem; height:46px; background-color: #fdfdfd; border:1px solid #e2e2e2; font-size:18px; line-height:1.2; color: #737373; display:inline-block; vertical-align: top; box-sizing: border-box;} .tabDepth>a+a{margin-left:-1px;} .tabDepth>a>span{display:inline-block; position: relative; top:50%;-webkit-transform: translateY(-50%); transform: translateY(-50%);} .tabDepth>a:hover, .tabDepth>a.active{background-color: #1b54aa; border-color:#1b54aa; color: #fff; z-index:2;} .depth3{width:100%; margin-bottom:70px; font-size:0; line-height:0; text-align: center; box-sizing: border-box; overflow:hidden; position: relative;} .depth3:before{content: ""; width: 100%; height: 1px; background-color: #b0b0b0; display: inline-block; position:absolute; left: 0; top:50%;} .depth3>a{width:260px; height:54px; min-height:5.4rem; background-color: #1952a7; border:1px solid #0c3879; font-size:19px; line-height:1.2; color: #fff; display:inline-block; vertical-align: top; box-sizing: border-box; position: relative; z-index:2;} .depth3>a+a{margin-left:-1px;} .depth3>a>span{display:inline-block; position: relative; top:50%;-webkit-transform: translateY(-50%); transform: translateY(-50%); word-break:keep-all; word-wrap:break-word;} .depth3>a>span:before{content: ""; width: 0; height:2.1rem; margin-top:0.2rem; background:url("../img/bul_d3.png") no-repeat left top; background-size: 2.1rem; display: inline-block; vertical-align: top; position: relative; left:-3.1rem; opacity: 0;} .depth3>a:hover, .depth3>a.active{background-color: #0091db; border-color:#0086cb; z-index:3;} .depth3>a:hover>span:before, .depth3>a.active>span:before{width: 3.1rem; left:0rem; opacity: 1;} .lastDepth{width:100%; margin-bottom:50px; font-size:0; line-height:0; text-align: center; box-sizing: border-box; overflow:hidden; display: flex; justify-content: space-between; } .lastDepth>a{width:100%; height:60px; background-color: #fff; border:1px solid #d3d3d3; font-size:18px; line-height:1.2; color: #666; display:inline-block; vertical-align: top; box-sizing: border-box;} .lastDepth>a+a{margin-left:-1px;} .lastDepth>a>span{display:inline-block; position: relative; top:50%;-webkit-transform: translateY(-50%); transform: translateY(-50%);} .lastDepth>a:hover, .lastDepth>a.active{background-color: #f192a6; border-color:#f192a6; color: #fff; z-index:2;} .lastDepthConts{font-size:0; line-height:0; display:none; overflow:hidden;} h4.txt{margin-bottom:50px; padding-bottom:24px; border-bottom:1px solid #707070; font-weight: bold; font-size:28px; line-height:1; color: #000; letter-spacing: -0.03em;} h4.line{margin-bottom:50px; padding-top:2.2rem; font-size:2rem; line-height:1; color: #636363; text-align: center; letter-spacing: -0.03em; position: relative;} h4.line:before{content: ""; width: 2.1rem; height: 0.2rem; background-color: #3a3a3a; display: block; position:absolute; left:50%; top:0; transform: translateX(-50%);} h4.line>strong{font-weight: bold; font-size:4rem; color: #000; display:block;} h4.line>p{padding-top:0.9rem;} h4.line.mt{margin-top:8rem;} h5.bul{margin:6rem 0 2.5rem; padding-left:2.2rem; font-weight: 500; font-size:2.1rem; line-height:1; color: #000; letter-spacing: -0.03em; position: relative;} h5.bul:before{content: ""; width: 1.4rem; height: 1.4rem; border:0.3rem solid #1952a7; display: block; position:absolute; left:0; top:0.5rem; border-radius:999px;} h5.bul .more{padding:0.5rem 1rem; border:1px solid #dadada; font-weight: 400; font-size:1.4rem; color: #666; position: absolute; right:0; top:-0.2rem; display:inline-block;} h6.bul{margin-top:3.5rem;padding:0 0 1rem 1rem; font-weight: 500; font-size:2rem; line-height:1; color: #1b1b1b; letter-spacing: -0.03em; position: relative;} h6.bul:before{content: "-"; position:absolute; left:0; top:0;} .nTxt{font-size:17px; line-height:24px; color: #626262; letter-spacing: -0.03em; word-break:keep-all; word-wrap:break-word;} h5.bul + .nTxt{margin-top:-1rem;} .f0{font-size:0; line-height:0; text-align: center;} .scrollTb{display:inline-block; font-size:0; line-height:0; } .scrollTb img{max-width:none;} .scroll_info{width:100%; padding:2rem 0; font-size:0; line-height:0; position: relative; display:none;} .scroll_info:before{content:"← scroll →"; margin-top:-2rem; font-size:2rem; line-height:1; color: #ff0000; display:inline-block; position: absolute; left:44%; top:50%; animation-duration: 1s; animation-iteration-count:infinite; animation-name: scrollMove; animation-timing-function:ease-In-Out;animation-direction:alternate;} @keyframes scrollMove { from {color: #ff0000; left:42%;} to {color: #006cb7; left:46%;} } /* #mVisual .vTxt .ii.tit, .mTitle>dt, #mSustainable .mSustainableArea .slider .text>dt, .mBoard .title>strong, #sVisual h2, #pageTop>h3, .greetingArea .top .text .cate, .greetingArea .top .text dl>dt, .historyArea .history_re>.text .title, .visionArea .top .vision_re>.text .title, h4.txt, h4.line, .cont_img dl>dt, ol.num_line>li:before, .num_title:before, .safetyArea .title>dt{font-family: '0425', '0425_i', sans-serif !important;} #mSustainable .mSustainableArea .slider .text>dd a{font-family: 'Poppins', sans-serif !important;} */ .historyArea .history_re>.text .y, .locationArea .text dl>dt{font-family: 'Poppins', sans-serif !important;} .greetingArea .greetingTop>dt{font-family: 'Godo', sans-serif !important;} .wideFrame{height: 0; padding-bottom: 56.25%; /* 16:9 */ position: relative;} .wideFrame iframe{width: 100%; height: 100%; max-height:460px; position: absolute; left: 0; top: 0;} .admGo{font-size:0; line-height:0; position: relative; z-index:7;} .admGo>a{padding:10px 20px; background-color:#f00; font-size:16px; line-height:1.2; color:#fff; display:inline-block; position:absolute; left:0; bottom:0;} .admGos{padding:5px 10px; background-color:#f00; font-size:14px; line-height:1.2; color:#fff; display:inline-block; position: absolute; right:0; top:0; z-index:7;} .management>p+p{margin-top:100px;} /*[e] All Style */ /*[s] Main Style */ .mScrolls{width:100%; font-size:0; line-height:0; text-align: center; position: fixed; left:0; bottom:40px; z-index:8; display:none; animation-duration: .7s; animation-iteration-count:infinite; animation-name: scrollDown; animation-timing-function:ease-in-out; animation-direction:alternate; } @keyframes scrollDown { from {bottom:40px; opacity:1;} to {bottom:20px; opacity:0.8} } /* VISUAL */ #mVisual{width:100%; font-size:0; line-height:0; position: relative; overflow:hidden;} #mVisual .visualRoll{white-space: nowrap;} #mVisual .visualRoll .slider{width:100%; background-repeat: no-repeat; background-position: center center; background-size: cover; font-size:0; line-height:0; position: relative; overflow:hidden; display:inline-block; vertical-align: top;} #mVisual .visualRoll .slider img{width:100%; max-width:none; height:86.2rem; object-fit: cover;} #mVisual .slick-arrow{width:39px; height:75px; background-color: transparent; background-repeat: no-repeat; background-position: center center; background-size: cover; border:none; font-size:0; line-height:0; position: absolute; top:50%; z-index:7; transform: translateY(-50%); cursor: pointer; opacity: 0.5;} #mVisual .slick-prev{background-image: url("../img/main/btn_slick_prev.png"); left:90px;} #mVisual .slick-next{background-image: url("../img/main/btn_slick_next.png"); right:90px;} #mVisual .slick-arrow:hover{opacity:1;} #mVisual .vTxt{width:100%; max-width:1280px; text-align: center; position: absolute; left:50%; top:50%; transform: translateX(-50%) translateY(-50%); z-index:5;} #mVisual .vTxt .ii{top:50px; text-align: left; display:block; opacity: 0; position: relative; word-break:keep-all; word-wrap:break-word;} #mVisual .vTxt .i01{-webkit-transition-delay: .7s; transition-delay: .7s;} #mVisual .vTxt .i02{-webkit-transition-delay: .75s; transition-delay: .75s;} #mVisual .vTxt .i03{-webkit-transition-delay: .8s; transition-delay: .8s;} #mVisual .vTxt .i04{-webkit-transition-delay: .85s; transition-delay: .85s;} #mVisual .vTxt .i05{-webkit-transition-delay: .9s; transition-delay: .9s;} #mVisual .vTxt .i06{-webkit-transition-delay: .95s; transition-delay: .95s;} #mVisual .vTxt .i07{-webkit-transition-delay: 1s; transition-delay: 1s;} #mVisual .vTxt .ii{color: #fff; text-align: center; letter-spacing: -0.03em; text-shadow:0 0 10px rgba(0,0,0,0.5);} #mVisual .vTxt .ii.tit{font-weight: bold; font-size:68px; line-height:80px; display:inline-block;} #mVisual .vTxt .ii.txt{font-weight: 400; font-size:24px; line-height:38px;} #mVisual .vTxt .ii.tit+.txt{padding-top:3rem;} #mVisual .vTxt .ii.controll{padding-top:50px;} #mVisual .vTxt .ii.controll .dot{display:inline-block; vertical-align: middle;} #mVisual .vTxt .ii.controll .auto{display:inline-block; vertical-align: middle;} #mVisual .vTxt .ii.controll .auto{padding-left:10px;} #mVisual .vTxt .ii.controll .auto button{width:27px; height:27px; background:transparent url("../img/main/btn_slick_pause.png") no-repeat left top; border:none;} #mVisual .vTxt .ii.controll .auto button.off{background-image:url("../img/main/btn_slick_play.png");} #mVisual .slick-dots{display:flex; flex-wrap: nowrap; justify-content: flex-start;} #mVisual .slick-dots>li{flex:1 1 10%; width:auto !important; padding:0 !important; display:inline-block; vertical-align: top;} #mVisual .slick-dots>li+li{margin-left:0;} #mVisual .dot_Line, #mVisual .dot_Line>dt, #mVisual .dot_Line>dd .line{transition: all .3s ease-out; transform-origin: 50% 50%;} #mVisual .dot_Line>dd .line>span{transition: all 0s linear; transform-origin: 50% 50%;} #mVisual .vTxt.first .dot_Line>dd .line>span{transition: all 6.6s linear;} #mVisual .dot_Line{padding-right:10px; box-sizing: border-box; position: relative;} #mVisual .dot_Line>dt{font-weight: 500; font-size:15px; line-height:1; color: rgba(255,255,255,0.3); white-space: nowrap;} #mVisual .dot_Line>dd{position: absolute; left:27px; right:10px; top:50%; transform: translateY(-50%);} #mVisual .dot_Line>dd .line{width:100%; height:2px; background-color: rgba(255,255,255,0.3); display:inline-block; vertical-align: middle; position: relative; overflow:hidden;} #mVisual .dot_Line>dd .line>span{width:100%; height:2px; background-color: rgba(255,255,255,1); display:inline-block; position: absolute; left:-100%; top:0; transition-delay: .7s;} #mVisual .slick-dots>li.slick-active .dot_Line{padding-right:120px;} #mVisual .slick-dots>li.slick-active .dot_Line>dt{color: rgba(255,255,255,1);} #mVisual .slick-dots>li.slick-active .dot_Line>dd .line{width:100%;} #mVisual .vTxt.active .slick-dots>li.slick-active .dot_Line>dd .line>span{left:0%; transition: all 6.8s linear; transition-delay: 0s;} #mVisual .vTxt.active .ii{top:0px; opacity:0.9;} .mVideo{margin-bottom:12rem; height: 0; padding-bottom: 56.25%; /* 16:9 */ position: relative;} .mVideo iframe, .mVideo video{width: 100%; height: 100%; position: absolute; left: 0; top: 0;} /* NOTICE */ #mNotice{background:#fff url("../img/main/bg_notice.gif") no-repeat center top; border-bottom:1px solid #dadada; font-size:0; line-height:0; box-shadow:0px 0px 20px rgba(0,0,0,0.3); position: relative; z-index:2;} #mNotice .title{width:100%; margin-bottom:-1px; padding-bottom:0; display:table; table-layout: fixed;} #mNotice .title>*{height:72px; display:table-cell; vertical-align: middle; position: relative;} #mNotice .title>dt{width:173px; font-size:2rem; line-height:1.2; color: #434343; text-align: center;} #mNotice .title>dt:before{content: ""; width: 1px; height: 1.8rem; background-color: #dadada; display: inline-block; position:absolute; right: 0; top:50%; transform: translateY(-50%);} #mNotice .title>dd .notiRoll{padding:0 118px 0 40px;} #mNotice .title>dd .notiRoll .slider{height:72px;position: relative;} #mNotice .title>dd .notiRoll .noPost p, #mNotice .title>dd .notiRoll .slider a, #mNotice .title>dd .notiRoll .slider .day{font-weight: 300; font-size:17px; line-height:72px; color: #595959; letter-spacing: -0.03em; display:inline-block;} #mNotice .title>dd .notiRoll .slider a{max-width:85%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #mNotice .title>dd .notiRoll .slider .day{position: absolute; right:0; top:0;} #mNotice .title>dd .notiRoll .noPost p{font-weight: 500;} #mNotice .controll{border:1px solid #ddd; position: absolute; right:0; top:50%; transform: translateY(-50%);} #mNotice .controll .arrow{display:inline-block;} #mNotice .controll .arrow .slick-arrow{width:28px; height:28px; background-color: transparent; background-repeat: no-repeat; background-position: center center; background-size: cover; border:none; border-right:1px solid #ddd; font-size:0; line-height:0; cursor: pointer; display:inline-block;} #mNotice .controll .arrow .slick-prev{background-image: url("../img/main/btn_notice_up.gif");} #mNotice .controll .arrow .slick-next{background-image: url("../img/main/btn_notice_down.gif");} .mTitle{padding-bottom:5.5rem; font-size:0; line-height:0; text-align: center;} .mTitle>dt{font-weight: 500; font-size:3.8rem; line-height:1; color: #000;} .mTitle>dd{padding-top:2.2rem; font-size:1.9rem; line-height:1; color: #707070;} .mExample + .mTitle{margin-top:10rem;} /* 시공사례 */ #mExample{padding:120px 0 95px; font-size:0; line-height:0; text-align: center;} .sliders{overflow: visible; position: relative;} .sliders .slick-dots{width:100%; text-align: center; position: absolute; left:0; bottom:-3rem; z-index:6;} .sliders .slick-dots>li{width:auto !important; padding:0 !important; display:inline-block; vertical-align: top;} .sliders .slick-dots>li+li{margin-left:2rem;} .sliders .slick-dots>li button{width:2rem !important; height:2rem; margin:0; padding:0; background-color:#ccc; border:none; font-size:0; line-height:0; position: relative; cursor: pointer; border-radius:99px; overflow:hidden;} .sliders .slick-dots>li.slick-active button{background-color:#435575;} .sliders .slick-arrow{width:20px; height:40px; background-color: transparent; background-repeat: no-repeat; background-position: center center; background-size: cover; border:none; font-size:0; line-height:0; cursor: pointer; display:inline-block; position: absolute; top:32%; z-index:7;} .sliders .slick-prev{background-image: url("../img/main/btn_arrow_l.png"); left:-50px;} .sliders .slick-next{background-image: url("../img/main/btn_arrow_r.png"); right:-50px;} /* 사업소개 */ #mBusiness{width:100%; height:650px; padding-top:120px; background:url("../img/main/bg_mBusiness.jpg") no-repeat center top; font-size:0; line-height:0; box-sizing:border-box;} #mBusiness .mBusinessArea{} #mBusiness .mBusinessArea .mBusinessRoll{white-space: nowrap;} #mBusiness .mBusinessArea .mBusinessRoll .slider{} #mBusiness .mBusinessArea .mBusinessRoll .thumb{width:50%; min-width:50%; position: relative; display:inline-block; vertical-align: top;} #mBusiness .mBusinessArea .mBusinessRoll .thumb img{width:100%; max-width:none; object-fit:cover; vertical-align: top;} #mBusiness .mBusinessArea .mBusinessRoll .thumb .thb{height:100%; position: absolute; left:0; top:0;} #mBusiness .mBusinessArea .mBusinessRoll .text{margin-left:7%; color: #fff; display:inline-block; vertical-align: top;} #mBusiness .mBusinessArea .mBusinessRoll .text .tit{font-weight: 500; font-size:44px; line-height:1.1;} #mBusiness .mBusinessArea .mBusinessRoll .text .txt{margin-top:3rem; font-weight: 300; font-size:19px; line-height:28px;} #mBusiness .mBusinessArea .mBusinessRoll .text .btns{margin-top:50px;} #mBusiness .mBusinessArea .mBusinessRoll .text .btns a{width:135px; background-color: #edad00; border:1px solid #e1c43c; font-size:17px; line-height:39px; color: #fff; text-align: center; display:inline-block; vertical-align: top; box-sizing:border-box; border-radius:0.5rem;} #mBusiness .mBusinessArea .controll{padding:0 35px; font-size:21px; line-height:1; color: rgba(255,255,255,0.8); position: absolute; left:57%; bottom:11px; display:inline-block;} #mBusiness .slick-arrow{width:10px; height:18px; background-color: transparent; background-repeat: no-repeat; background-position: center center; background-size: cover; border:none; font-size:0; line-height:0; position: absolute; top:50%; z-index:7; transform: translateY(-50%); cursor: pointer; opacity: 0.8;} #mBusiness .slick-prev{background-image: url("../img/main/btn_slick_prev_s.png"); left:0;} #mBusiness .slick-next{background-image: url("../img/main/btn_slick_next_s.png"); right:0;} #mBusiness .slick-arrow:hover{opacity:1;} /* 오시는길 */ #mLocation{padding:120px 0; font-size:0; line-height:0; text-align: center;} #mLocation .mapTwo{width:100%; display:table; table-layout: fixed;} #mLocation .mapTwo>*{width:50%; height:430px; display:table-cell; vertical-align: middle;} #mLocation .mapTwo .wideFrame{padding-bottom:0;} #mLocation .mapTwo .noise{padding-left:7%; background:url("../img/bg_noise.jpg") no-repeat left top; background-size: cover; text-align: left; position: relative; box-sizing:border-box;} #mLocation .mapTwo .noise:before{content: ""; width: 6rem; height: 6.2rem; background:url("../img/icon_noise_mark.png") no-repeat left top; background-size: cover; display: inline-block; position:absolute; right: 0; top:0px;} #mLocation .mapTwo .noise dl{padding-bottom:34px; border-bottom:1px solid rgba(255,255,255,0.3); color: #fff; display:inline-block;} #mLocation .mapTwo .noise dl>dt{font-weight: 500; font-size:26px; line-height:1.1; letter-spacing: -0.03em;} #mLocation .mapTwo .noise dl>dd{padding-top:20px; font-weight: 300; font-size:23px; line-height:32px;} #mLocation .mapTwo .noise dl>dd strong{font-weight: 400;} #mLocation .mapTwo .noise .btns{padding-top:50px;} #mLocation .mapTwo .noise .btns>a{width:108px; height:40px; border:1px solid rgba(255,255,255,0.5); font-size:16px; line-height:38px; color: #fff; text-align: center; border-radius:3px; display:inline-block; vertical-align: top; box-sizing:border-box;} #mLocation .mapTwo .noise .btns>a+a{margin-left:10px;} #mLocation .mapTwo .noise .btns>a.active{background-color: #0d63bf; border-color:#0957ab;} /* 하단베너 */ #mFullBanner{width:100%; height:33.8rem; background:url("../img/main/bg_Full.jpg") no-repeat center top; font-size:0; line-height:0; display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: center;} #mFullBanner .txtFull{padding-top:1.5rem; padding-bottom:1.5rem;padding-left:9rem; background:url("../img/main/icon_tel.png") no-repeat left center; display:inline-block; white-space: nowrap;} #mFullBanner .txtFull *{line-height:4.9rem; color: #fff; letter-spacing: -0.03em; } #mFullBanner .txtFull strong{padding-right:16px;} #mFullBanner .txtFull>dt{} #mFullBanner .txtFull>dt>p{font-weight: 500; font-size:30px; display:inline-block; vertical-align: top; position: relative;} #mFullBanner .txtFull>dt>p+p{margin-left:59px;} #mFullBanner .txtFull>dt>p+p:before{content: ""; width: 1px; height: 21px; background-color: #dadada; font-size:0; line-height:0; display: inline-block; position:absolute; left: -30px; top:50%; transform: translateY(-50%);} #mFullBanner .txtFull>dd{font-weight: 500; font-size:42px;} /* 온라인 문의 */ #mInquiry{padding:120px 0; background:#dadfe7 url("../img/main/img_mInquiry.jpg") no-repeat center bottom; font-size:0; line-height:0;} #mInquiry .mTitle>dt{color: #374662;} #mInquiry .mTitle>dd{color: #717c8f;} #mInquiry .fildArea{width:627px; margin:0 auto;} #mInquiry .fildArea .fild{border-top:1px solid #acb1b9; border-right:1px solid #acb1b9; box-sizing:border-box; border-radius:3px;} #mInquiry .fildArea input[type=text], #mInquiry .fildArea select{width:50%; height:59px; padding:0 23px; background-color:#fff; border:none; border-bottom:1px solid #acb1b9; border-left:1px solid #acb1b9; font-weight: 300; font-size:16px; line-height:57px; color:#8c8c8c; box-sizing: border-box; vertical-align:top; display:inline-block;} #mInquiry .fildArea select{padding-right:45px; background:#fff url('../img/bg_select_arr.png') no-repeat right center; line-height:59px; -webkit-appearance: none; -moz-appearance: none; appearance: none;} #mInquiry .fildArea select::-ms-expand{display:none;} #mInquiry .checkIn{margin-top:20px;} #mInquiry .checkIn input[type=checkbox]+label{color: #717c8f;} #mInquiry .btns{margin-top:35px; text-align: center;} #mInquiry .btns .b{width:170px; height:50px; background-color: #435575; border:1px solid #364766; font-size:17px; line-height:48px; color: #fff; text-align: center; border-radius:3px; display:inline-block; vertical-align: top; box-sizing:border-box;} /*[e] Main Style */ /*[s] Sub Style */ /* .cont_img{font-size:0; line-height:0; position: relative;} .cont_img>img{height:32rem; object-fit: cover;} .cont_img dl{padding:0 5rem; color: #fff; text-align: center; letter-spacing: -0.03em; position: absolute; left:0; right:0; top:50%; transform: translateY(-50%); text-shadow:-2px 2px 5px rgba(0,0,0,0.5);} .cont_img dl>dt{font-weight: bold; font-size:3.8rem; line-height:1; letter-spacing: -0.05em;} .cont_img dl>dd{padding-top:2rem; font-weight: 500; font-size:2.2rem; line-height:3rem; position: relative; word-break:keep-all; word-wrap:break-word;} .cont_img .btns{padding-top:40px; font-size:0; line-height:0;} .cont_img .btns>a{width:100%; max-width:240px; height:70px; background-color: #244a33; font-weight: 500; font-size:18px; line-height:70px; color: #fff; letter-spacing: -0.02em; display:inline-block; vertical-align: top;} .cont_img .btns>a:hover, .cont_img .btns>a.active{background-color: #069540;} ol.num_line{margin-top:20px; counter-reset:num ;} ol.num_line>li{padding:35px 0 35px 100px; letter-spacing: -0.03em; position: relative;} ol.num_line>li:before{counter-increment: num; content: counter(num); font-weight: bold; font-size:5.2rem; line-height:1; color: #1952a7; display: inline-block; position: absolute; left: 0; top: 35px;} ol.num_line>li:nth-child(-n+9)::before {content: "0" counter(num);} ol.num_line>li .tit{padding-bottom:1.5rem; font-weight: bold; font-size:2.4rem; line-height:1.2; color: #000;} ol.num_line>li+li{border-top:1px dashed #bababa;} ol.num_line + .cont_img{margin-top:7rem;} .num_title{padding-left:100px; text-align: left; position: relative;} .num_title:before{content: attr(data-num); font-weight: bold; font-size:5.2rem; line-height:1; color: #1952a7; display: inline-block; position: absolute; left: 0; top: 0;} .num_title .tit{padding-bottom:1.5rem; font-weight: bold; font-size:2.4rem; line-height:1.2; color: #000;} .num_title .tit>span{font-weight:400;} ul.bul>li{margin-top:0.8rem; padding-left:12px; font-size:18px; line-height:24px; color: #626262; position: relative; word-break:keep-all; word-wrap:break-word;} ul.bul>li:before{content: "-"; display: inline-block; position:absolute; left: 0; top:-1px;} ul.bul>li+li{} ul.bul.two>li{width:50%; display:inline-block; vertical-align: top; box-sizing:border-box;} h5.bul + ul.bul{margin:-0.8rem 0 0 2.2rem;} */ /* 회사소개 - 인사말 */ .greetingArea{max-width:1080px; margin:0 auto; font-size:0; line-height:0;} .greetingArea *{letter-spacing: -0.03em; word-break:keep-all; word-wrap:break-word;} .greetingArea .greetingTop{color: #1b1b1b; text-align: center;} .greetingArea .greetingTop>dt{font-size:26px; line-height:1.4;} .greetingArea .greetingTop>dt>p{padding-top:10px; font-size:34px;} .greetingArea .greetingTop>dt>p>strong{font-weight: 700; color: #30405d;} .greetingArea .greetingTop>dd{padding-top:30px; font-size:19px; line-height:26px;} .greetingArea .greeting_re{margin-top:6rem; display: flex; flex-flow: row wrap; justify-content: space-between;} .greetingArea .greeting_re+.greeting_re{margin-top:5rem;} .greetingArea .greeting_re>.photo{width:44%;} .greetingArea .greeting_re>.photo img{width:100%; max-width:auto;} .greetingArea .greeting_re>.photo.bor{border:1px solid #ddd; text-align: center;} .greetingArea .greeting_re>.photo.bor img{width:auto; max-width:100%;} .greetingArea .greeting_re>.text{width:56%; padding:0 0 0 4.6%; font-size:18px; line-height:28px; color: #707070; display: flex; flex-wrap: wrap; flex-direction: row; align-items: center;} .greetingArea .greeting_re+.greeting_re>.photo{order: 2;} .greetingArea .greeting_re+.greeting_re>.text{padding:0 4.6% 0 0; order: 1; text-align: right;} .greetingArea .greeting_re+.greeting_re>.text .title:before{left:auto; right:0;} .greetingArea .greetingBtm{margin-top:6rem; font-size:20px; line-height:36px; color: #0d0d0d; text-align: center;} /* 회사소개 - 연혁 */ .historyArea{max-width:1080px; margin:0 auto; border-top:1px solid #ddd; font-size:0; line-height:0;} .historyArea *{letter-spacing: -0.03em; word-break:keep-all; word-wrap:break-word;} .historyArea .history_re{width:100%; padding:20px 0; border-bottom:1px solid #ddd; display: flex; justify-content: space-between;} .historyArea .history_re+.history_re{} .historyArea .history_re>.photo{width:30.1%; min-width:326px; position: relative; order: 2; display: flex; flex-wrap: wrap; flex-direction: row; align-items: center;} .historyArea .history_re>.photo img{width:100%; max-width:none; object-fit:cover; vertical-align: top;} .historyArea .history_re>.photo .thb{height:auto; position: relative !important;} .historyArea .history_re>.text{width:69.9%; display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; order: 1;} .historyArea .history_re>.text .y{padding-bottom:2px; font-weight: 600; font-size:34px; line-height:1; color: #1b1b1b; position: relative;} .historyArea .history_re dl{width:100%; margin-top:15px; display:table; table-layout: fixed;} .historyArea .history_re dl>*{font-size:18px; line-height:1.4; color: #707070; display:table-cell; vertical-align: middle; box-sizing:border-box;} .historyArea .history_re dl>dt{width:70px; color: #222;} .historyArea .history_re dl>dd{} .historyArea .history_re dl+dl{} /* 회사소개 - 오시는길 */ .locationArea{font-size:0; line-height:0; display: flex; justify-content: space-between;} .locationArea .map{width:73%; position: relative; box-sizing:border-box; order: 2;} .locationArea .map iframe{width:100%; height:100%; position: absolute; left:0; top:0;} .locationArea .text{width:346px; min-width:346px; padding:50px 0 45px 40px; background-color:rgba(62,124,232,0.85); position: relative; box-sizing:border-box; order: 1;} .locationArea .text:before{content: ""; width: 0; height: 0; border-top:20px solid #edce02; border-left:20px solid #edce02; border-bottom:20px solid transparent; border-right:20px solid transparent; display: inline-block; position:absolute; left: 0; top:0px; box-sizing: border-box;} .locationArea .text dl{color: #fff;} .locationArea .text dl+dl{margin-top:35px;} .locationArea .text dl>dt{font-weight: 500; font-size:22px; line-height:1;} .locationArea .text dl>dd{padding-top:10px; font-size:16px; line-height:1.4; letter-spacing: -0.03em;} .locationArea .locaTit{padding:5.5rem 0 4rem; border-bottom:1px solid #dadada;} .locationArea .locaTit>*{display:inline-block; vertical-align: top;} .locationArea .locaTit>.tit{font-weight: 500; font-size:1.7rem; line-height:1; color: #999; letter-spacing: -0.03em;} .locationArea .locaTit>.tit>strong{padding-bottom:1rem; font-weight:bold; font-size:3rem; line-height:1; color: #000; display:block;} .locationArea .locaTit>.icon{margin-left:60px; padding-left:5.6rem; background-repeat: no-repeat; background-position: left top; background-size:4.6rem; font-weight: 500; font-size:18px; line-height:4.6rem; color: #222; letter-spacing: -0.05em;} .locationArea .locaTit>.icon.j{background-image: url("../img/company/icon_map.jpg");} .locationArea .locaTit>.icon.t{background-image: url("../img/company/icon_tel.jpg");} .locationArea .locaTit>.icon.j.a{background-position: left center; line-height:1.4;} .locationArea .locaTit>.icon.j.a>span{font-weight: 300;} .locationArea .locaTxt{padding-top:47px; letter-spacing: -0.03em;} .locationArea .locaTxt>dl{width:100%; display:table; table-layout: fixed;} .locationArea .locaTxt>dl>*{display:table-cell; vertical-align: middle;} .locationArea .locaTxt>dl>dt{width:145px;} .locationArea .locaTxt>dl>dt>p{width:106px; height:34px; font-size:15px; line-height:34px; color: #fff; text-align: center;} .locationArea .locaTxt>dl>dt>p.c1{background-color: #0091db;} .locationArea .locaTxt>dl>dt>p.c2{background-color: #1952a7;} .locationArea .locaTxt>dl>dt>p.c3{background-color: #1c356f;} .locationArea .locaTxt>dl>dd{font-weight: 300; font-size:18px; line-height:1.4; color: #0d0d0d; word-break:keep-all; word-wrap:break-word;} .locationArea .locaTxt>dl+dl{margin-top:25px;} .locationArea .locaTxt>p{margin-top:10px; font-weight: 300; font-size:18px; line-height:1.4; color: #666; word-break:keep-all; word-wrap:break-word;} .locationArea .locaTxt>p>strong{padding-right:10px; font-weight: 400; color: #1b1b1b;} .locationArea .locaTxt>dl+p{margin-top:40px;} /* 사업분야 - 사업개요 */ .outlineArea{max-width:1200px; margin:0 auto; font-size:0; line-height:0;} .outlineArea .outline_llist{overflow:hidden;} .outlineArea .outline_llist>ul{margin:-40px 0 0 -25px;} .outlineArea .outline_llist>ul>li{width:20%; padding:40px 0 0 25px; display:inline-block; vertical-align: top; box-sizing:border-box;} .outlineArea .outline_llist .outline_re{min-height:28rem; border:1px solid #d8d8d8; box-sizing:border-box;} .outlineArea .outline_llist .outline_re .icon{height:14rem; display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: center;} .outlineArea .outline_llist .outline_re .icon.i01 img{width:6.2rem;} .outlineArea .outline_llist .outline_re .icon.i02 img{width:6.9rem;} .outlineArea .outline_llist .outline_re .icon.i03 img{width:7.2rem;} .outlineArea .outline_llist .outline_re .icon.i04 img{width:4.2rem;} .outlineArea .outline_llist .outline_re .icon.i05 img{width:4.6rem;} .outlineArea .outline_llist .outline_re .icon.i06 img{width:6rem;} .outlineArea .outline_llist .outline_re .icon.i07 img{width:6.3rem;} .outlineArea .outline_llist .outline_re .icon.i08 img{width:6.1rem;} .outlineArea .outline_llist .outline_re .icon.i09 img{width:5.9rem;} .outlineArea .outline_llist .outline_re .icon.i10 img{width:5.2rem;} .outlineArea .outline_llist .outline_re dl{text-align: center; letter-spacing: -0.03em;} .outlineArea .outline_llist .outline_re dl>dt{font-weight: 500; font-size:18px; line-height:2.4rem; color: #000;} .outlineArea .outline_llist .outline_re dl>dd{padding-top:1rem; font-weight: 400; font-size:16px; line-height:2.4rem; color: #7d7d7d;} /* 사업분야 - 사업소개 */ .introduceArea{max-width:1200px; margin:0 auto -6rem; font-size:0; line-height:0;} .introduceArea .introduce_re{padding:6rem 0;} .introduceArea .introduce_re .inConts{max-width:1200px;} .introduceArea .introduce_re .scrollTb{margin-top:20px;} .introduceArea .info{width:420px; text-align: left; position: absolute; left:3rem; bottom:0; z-index:3;} .introduceArea .info>p{font-weight: 500; font-size:17px; line-height:1; color: #1b1b1b;} .introduceArea .info>ol{margin-top:1.5rem;} .introduceArea .info>ol>li{width:50%; font-weight: 300; font-size:16px; line-height:24px; color: #1b1b1b; display:inline-block; vertical-align: top;} .introduceArea .info>ol>li>strong{font-weight: 400;} /* 지속가능경영 - 윤리경영 */ .ethicsArea{max-width:1200px; margin:0 auto; font-size:0; line-height:0;} .ethicsArea *{letter-spacing: -0.03em; word-break:keep-all; word-wrap:break-word;} .ethicsArea .title{margin-top:6rem; padding-bottom:2rem; font-weight: 500; font-size:22px; line-height:1; color: #0d0d0d;} .ethicsArea .tit{font-size:18px; line-height:3.2rem; color: #313131;} .ethicsArea .ps{padding-left:1.2rem; font-size:17px; line-height:2.6rem; color: #707070; position: relative;} .ethicsArea .ps:before{content: "*"; display: inline-block; position:absolute; left: 0; top:0;} .ethicsArea .ps>strong{font-weight: 400; color: #1b1b1b;} .ethicsArea .btns{margin-top:3.5rem;} .ethicsArea .btns .ptVar{display:inline;} .ethicsArea .btns>a{min-width:20.2rem; padding:0 2.8rem; border:1px solid #cecece; font-size:1.8rem; line-height:4.6rem; color: #595959; text-align: center; display:inline-block; vertical-align: top; box-sizing:border-box; white-space: nowrap;} .ethicsArea .btns>a img{margin:0 1rem 0 0; display:inline-block; vertical-align: middle;} .ethicsArea .btns>a+a{margin-left:2rem;} /* 지속가능경영 - 안전경영 */ .safetyArea{max-width:1200px; margin:0 auto; font-size:0; line-height:0; text-align: center;} .safetyArea *{letter-spacing: -0.03em;} .safetyArea .title{margin-top:75px;} .safetyArea .title>dt{font-weight: bold; font-size:36px; line-height:1; color: #000;} .safetyArea .title>dd{padding-top:2rem; font-size:2rem; line-height:30px; color: #595959;} .safetyArea ol{margin-top:50px; display:inline-block; counter-reset:num;} .safetyArea ol>li{padding-left:2rem; font-size:2rem; line-height:1.4; color: #000; text-align: left; position: relative; word-break:keep-all; word-wrap:break-word;} .safetyArea ol>li:before{counter-increment: num; content: counter(num)"."; position: absolute; left: 0; top: 0;} .safetyArea ol>li+li{margin-top:2rem;} .safetyArea .end{margin-top:100px; color: #0d0d0d;} .safetyArea .end>dt{font-weight:500; font-size:23px; line-height:1;} .safetyArea .end>dd{padding-top:30px; font-size:2rem; line-height:34px;} .safetyArea .end>dd>strong{padding-left:0.7rem; font-weight: 400;} /* 인재채용 - 채용안내 */ .recruitArea{max-width:1200px; margin:0 auto; font-size:0; line-height:0;} .recruitArea>.img{margin-top:4rem; text-align: center;} .recruitArea>.img img{width:100%; max-width:none;} /* 인재육성 */ .promoteArea{max-width:1200px; margin:0 auto; font-size:0; line-height:0;} .informationImg{margin-top:6rem; display: flex; justify-content: space-between;} .informationImg li{width:49.5%; display:inline-block; vertical-align: top; position: relative;} .informationImg li+li{width:24.16%; margin-left:1.08%;} .informationImg li>p{width:100%; background-color:rgba(0,0,0,0.75); font-size:16px; line-height:38px; color: #fff; text-align: center; position: absolute; left:0; bottom:0;} .informationImg img{width:100%; max-width:auto;} .etc_clause{width:90%; margin:0 auto; padding:60px 80px 80px; background-color: #fdfdfd; border:1px solid #cecece; font-size:0; line-height:0; text-align: center; box-sizing:border-box; border-radius:10px; position: relative;} .etc_clause:before, .etc_clause:after{content:"";position:absolute;z-index:-1;top:2%;bottom:0;left:10px;right:10px;-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8);-moz-border-radius:100px / 10px; border-radius:100px / 10px;} .etc_clause:after{right:10px;left:auto;-webkit-transform:skew(8deg) rotate(3deg);-moz-transform:skew(8deg) rotate(3deg);-ms-transform:skew(8deg) rotate(3deg);-o-transform:skew(8deg) rotate(3deg);transform:skew(8deg) rotate(3deg);} .etc_clause .logo{margin:0;} .etc_clause .txt{padding:15px 0 55px; font-weight: 300; font-size:18px; line-height:1; color: #636363;} .etc_clause .txt>span{font-weight: 400; color: #1b1b1b;} .etc_clause .scroll{font-weight:300; font-size:16px; line-height:1.8; color: #626262; text-align: left;} /*[e] Sub Style */ /*[s] Plugin Style */ /* Layer Style */ .layerArea .layerIn .layerBgIn{width:0px; height:0px; background-color: rgba(255,255,255,0.7); position:absolute; left:50%; top:50%; z-index:100; -webkit-transition: .5s; transition: .5s; transform-origin: 50% 50%;} .layerArea{width:0px; height:0px; background-color: rgba(0,0,0,0.7); position:fixed; left:50%; top:50%; z-index:99; overflow:hidden; overflow-y:auto; -webkit-transition: .5s; transition: .5s; transform-origin: 50% 50%;} .layerArea.one, .layerArea.two{width:100%; height:100%; left:0%; top:0%;} .layerArea.two .layerBgIn{width:100%; height:100%; left:0%; top:0%;} .layerArea .closeLy{width:100px; display:inline-block; position: fixed; right:0; top:0;} .layerArea .layerIn{width:100%; height:100%; display: table; position:relative;} .layerArea .layerIn .layerCell{width:100%; height:100%; padding:70px 0; display: table-cell; vertical-align:middle; position:relative; box-sizing: border-box;} .layerArea .layerIn .layerBox{margin:0 auto; background-color: #fff; font-size:0; line-height:0; display:none; position: relative; box-sizing: border-box; z-index:99;} .layerArea .layerIn .layerBox>.tit{padding:25px 25px 15px;} .layerArea .layerIn .layerBox>.tit>strong{font-size:16px; line-height:1; color:#00a9cc;} .layerArea .layerIn .layerBox .contLy{} .box01{width:500px; padding:10px;} .box01>.tit{padding:0 10px 10px;} .box01>.contLy{padding:20px;} .box02{width:800px; padding:10px;} .box02>.tit{padding:0 10px 10px;} .box02>.contLy{padding:80px;} /* Img Over Bg Style */ #photo{width:960px;margin:0 auto; position:relative; overflow:hidden;} #photo>li{width:150px; height:150px; margin:5px; float:left; display:inline; overflow:hidden; } #photo>li>a{width:100%; height:100%; position: relative; display:block; overflow:hidden;} #photo>li>a>img{width:100%; height:100%; display:block; border-radius:5px;} #photo>li>a>.bg_l{width:100%; height:100%; background-color:red; position: absolute; left:0; top:0; display:none; opacity:0.3; border-radius:5px;} /* Notice One Line Style */ .mNoticeList{width:100%; height:60px; margin-top:25px; overflow:hidden; position: relative;} .mNoticeList>ul{width:100%; position: absolute; left:0; top:-60px;} .mNoticeList>ul>li{height:60px; position: relative;} .mNoticeList>ul>li>a{padding-left:73px; display:block; position: relative;} .mNoticeList .day{width:41px; padding-right:15px; border-right:1px solid #d5d1cc; font-weight: 600; font-size:12px; line-height:1; color: #b99764; text-align: center; position: absolute; left:0; top:0;} .mNoticeList .day>strong{font-weight: 700; font-size:32px; line-height:1; display:block;} .mNoticeList dl.list{font-size:16px; line-height:20px; color: #876e49; word-break:keep-all; word-wrap:break-word;} .mNoticeList dl.list>dt{padding-bottom:6px; font-weight: 600; font-size:12px; line-height:1; color: #b99764;} /*[e] Plugin Style */ @media only screen and (max-width : 1320px){ /*[s] Main Style */ /* NOTICE */ #mNotice{background:url("../img/main/bg_notice_m.gif") repeat-y left top; background-size:3rem;} #mNotice .title>dd .notiRoll{padding:0 14.8rem 0 4rem;} #mNotice .controll{right:3rem;} /* RECRUITMENT */ #mRecruitment .left{width:40%;} #mRecruitment .right{width:60%;} #mRecruitment .right>a+a{margin-left:20px;} /*[e] Main Style */ /*[s] Sub Style */ /* 회사소개 - CEO 인사말 */ /*[e] Sub Style */ } @media only screen and (max-width : 1280px){ } @media only screen and (max-width : 1240px){ .scroll_info{display:block;} .scrollTb{width:100%; display:block; overflow:hidden; overflow-x:scroll;} .scrollTb>*{width:1200px;} /*[s] Sub Style */ /*[e] Sub Style */ } @media only screen and (max-width : 1200px){ .scroll_info{display:block;} .scrollTb{width:100%; display:block; overflow:hidden; overflow-x:scroll;} .scrollTb>*{width:1200px;} .introduceArea .scrollTb>*{width:1118px;} /*[s] Sub Style */ /* 회사소개 - CEO 인사말 */ .greetingArea .top .text dl{margin-top:1.5rem;} .greetingArea .top .text dl>dd{margin-top:2rem;} /*[e] Sub Style */ } @media only screen and (max-width : 1024px){ /*[s] All Style */ .depth3{margin-bottom:6rem; display: flex; justify-content: space-between;} .depth3:before{display:none;} .depth3>a{width:100%; height:auto; padding:1rem 2rem;} .depth3>a+a{margin-left:-1px;} .depth3>a>span:before{display:none;} /*[e] All Style */ /*[s] Main Style */ /* VISUAL */ #mVisual .visualRoll .slider img{} #mVisual .slick-arrow{display:none !important;} /* NOTICE */ #mNotice .title>dt{width:12.3rem;} #mNotice .title>dd .notiRoll{padding:0 0 0 2rem;} #mNotice .controll{display:none;} /* 시공사례 */ #mExample{padding:12rem 0 11rem; font-size:0; line-height:0; text-align: center;} /* 사업소개 */ #mBusiness{height:auto; padding:12rem 0 24rem; background:#edce00 url("../img/main/bg_mBusiness_m.jpg") no-repeat center bottom; background-size: cover; } #mBusiness .mBusinessArea{} #mBusiness .mBusinessArea .mBusinessRoll{} #mBusiness .mBusinessArea .mBusinessRoll .slider{} #mBusiness .mBusinessArea .mBusinessRoll .thumb{width:100%; min-width:100%; display:block;} #mBusiness .mBusinessArea .mBusinessRoll .text{margin:3.5rem 0 0 0; display:block; vertical-align: top;} #mBusiness .mBusinessArea .controll{margin-top:6rem; padding:0 4.5rem; font-size:2.4rem; line-height:2.6rem; position: relative; left:0; bottom:0;} #mBusiness .slick-arrow{width:1.3rem; height:2.6rem;} /* 오시는길 */ #mLocation{padding:12rem 0;} #mLocation .mapTwo{width:100%; display:block;} #mLocation .mapTwo>*{width:100%; height:auto; display:block;} #mLocation .mapTwo .wideFrame{height:43rem;} #mLocation .mapTwo .noise{padding:6.5rem 4rem 8rem;} #mLocation .mapTwo .noise dl{padding-bottom:2.4rem; display:block;} #mLocation .mapTwo .noise .btns{padding-top:5rem; display: flex; justify-content: space-between;} #mLocation .mapTwo .noise .btns>a{width:50%;} #mLocation .mapTwo .noise .btns>a+a{margin-left:2rem;} /*[e] Main Style */ /*[s] Sub Style */ /* 회사소개 - 인사말 */ .greetingArea{} .greetingArea .greetingTop{} .greetingArea .greetingTop>dt{} .greetingArea .greetingTop>dt>p{} .greetingArea .greetingTop>dt>p>strong{} .greetingArea .greetingTop>dd{} .greetingArea .greeting_re{margin-top:5rem; display: block;} .greetingArea .greeting_re+.greeting_re{} .greetingArea .greeting_re>.photo{width:100%;} .greetingArea .greeting_re>.photo img{} .greetingArea .greeting_re>.text{width:100%; padding:3rem 0 0 0%; display: block;} .greetingArea .greeting_re+.greeting_re>.photo{order: 1;} .greetingArea .greeting_re+.greeting_re>.text{padding:3rem 0 0 0; order: 2; text-align: left;} .greetingArea .greetingBtm{margin-top:6rem;} /* 회사소개 - 연혁 */ /* 회사소개 - 오시는길 */ /* 사업분야 - 사업개요 */ .outlineArea .outline_llist>ul{margin:-2rem 0 0 -2rem;} .outlineArea .outline_llist>ul>li{width:50%; padding:2rem 0 0 2rem;} /* 지속가능경영 - 안전경영 */ .safetyArea ol{display:block;} /*[e] Sub Style */ } @media only screen and (max-width : 840px){ /*[s] All Style */ .nTable{} .nTable>table{} .nTable>table th, .nTable>table td{padding:2rem; font-size:1.8rem; line-height:2.6rem;} .nTable>table>thead>tr>th, .nTable>table>tbody>tr>th{font-size:2rem;} .nTable>table>tbody>tr>td.th{padding:2rem 1rem;} .nTable>table .tit{} .nTable>table ul.bul{} .nTable>table ul.bul>li{font-size:1.8rem; line-height:2.6rem;} .nTable>table .icon{width:100%; text-align: center; display:block;} .nTable>table .icon>dt{width:100%; padding-bottom:1rem;} .nTable.small{} .nTable.small>table{} .nTable.small>table th, .nTable.small>table td{padding:1rem; font-size:1.7rem; line-height:2.2rem;} .nTable.small>table>thead>tr>th{font-size:1.8rem;} .nTable.small>table>tbody>tr>th{} .nTable +.nTable{margin-top:4rem;} .tabDepth{margin-bottom:3rem;} .tabDepth>a{height:5.2rem; font-size:2rem;} .depth3>a{font-size:2rem; line-height:1.4;} h4.txt{padding-bottom:4rem; font-size:3rem;} h4.line{margin-bottom:4rem;} h4.line.mt{margin-top:6rem;} .nTxt{font-size:2rem; line-height:2.8rem;} .scrollTb>*{width:120rem;} .introduceArea .scrollTb>*{width:111.8rem;} .admGo{font-size:0; line-height:0; position: relative; z-index:7;} .admGo>a{padding:0.625rem 1.25rem; background-color:#f00; font-size:1.25rem; line-height:1.2; color:#fff; display:inline-block; position:absolute; left:0; bottom:0;} .management>p+p{margin-top:7rem;} /*[e] All Style */ /*[s] Main Style */ /* VISUAL */ #mVisual .visualRoll .slider img{height:82rem;} #mVisual .vTxt .ii.tit{font-size:5.8rem;} #mVisual .vTxt .ii.tit{background-size:7.4rem; font-size:7rem; line-height:7.5rem;} #mVisual .vTxt .ii.txt{font-size:2.6rem; line-height:3.4rem;} #mVisual .vTxt .ii.controll{padding-top:5rem;} #mVisual .vTxt .ii.controll .auto{padding-left:1rem;} #mVisual .vTxt .ii.controll .auto button{width:2.7rem; height:2.7rem; background-size: cover;} #mVisual .vTxt .ii.controll .auto button.off{} /* NOTICE */ #mNotice .title>*{height:8.8rem; display:table-cell; vertical-align: middle; position: relative;} #mNotice .title>dd .notiRoll .slider{height:8.8rem;} #mNotice .title>dd .notiRoll .noPost p, #mNotice .title>dd .notiRoll .slider a, #mNotice .title>dd .notiRoll .slider .day{font-size:1.8rem; line-height:8.8rem;} #mNotice .title>dd .notiRoll .slider a{max-width:73%;} /* 사업소개 */ #mBusiness .mBusinessArea .mBusinessRoll .text .tit{font-size:4.8rem;} #mBusiness .mBusinessArea .mBusinessRoll .text .txt{font-size:2.2rem; line-height:3.2rem;} #mBusiness .mBusinessArea .mBusinessRoll .text .btns{margin-top:4rem;} #mBusiness .mBusinessArea .mBusinessRoll .text .btns a{width:16rem; font-size:2rem; line-height:4.8rem;} /* 오시는길 */ #mLocation .mapTwo .wideFrame{} #mLocation .mapTwo .noise dl>dt{font-size:3rem;} #mLocation .mapTwo .noise dl>dd{padding-top:2rem; font-weight: 300; font-size:2.2rem; line-height:3.6rem;} #mLocation .mapTwo .noise .btns{padding-top:5rem; display: flex; justify-content: space-between;} #mLocation .mapTwo .noise .btns>a{height:5rem; font-size:2rem; line-height:4.8rem;} /* 하단베너 */ #mFullBanner{height:34.6rem; background-position: right bottom; background-size: auto 34.6rem;} #mFullBanner .txtFull{padding:10rem 0 0 0; background-position: center top; background-size: 6.2rem 7.7rem;} #mFullBanner .txtFull *{line-height:4.5rem;} #mFullBanner .txtFull strong{padding-right:1.6rem;} #mFullBanner .txtFull>dt{} #mFullBanner .txtFull>dt>p{font-size:3.2rem;} #mFullBanner .txtFull>dt>p+p{margin-left:5.9rem;} #mFullBanner .txtFull>dt>p+p:before{height: 2.1rem; left: -3rem;} #mFullBanner .txtFull>dd{font-size:3.4rem;} #container #mFullBanner{text-align: center;} #container #mFullBanner .txtFull>dt>p{font-size:2.8rem;} #container #mFullBanner .txtFull>dt>p+p{margin-left:5.3rem;} #container #mFullBanner .txtFull>dt>p+p:before{left: -2.7rem;} #container #mFullBanner .txtFull>dd{font-size:4rem;} /* 온라인 문의 */ #mInquiry{padding:12rem 0 42rem; background-image:url("../img/main/img_mInquiry_m.jpg"); background-position: center 40%; background-size: cover;} #mInquiry .fildArea{width:100%;} #mInquiry .fildArea .fild{} #mInquiry .fildArea input[type=text], #mInquiry .fildArea select{height:6.9rem; padding:0 2rem; font-size:2rem; line-height:6.7rem;} #mInquiry .fildArea select{padding-right:4.5rem; background-size: 3.5rem; line-height:6.9rem;} #mInquiry .checkIn{margin-top:2rem;} #mInquiry .btns{margin-top:4rem;} #mInquiry .btns .b{width:100%; height:6rem; font-size:2rem; line-height:5.8rem;} /*[e] Main Style */ /*[s] Sub Style */ .cont_img{} .cont_img>img{width:100%; max-width:none; height:auto;} .cont_img dl{padding:0 3rem;} ol.num_line{margin-top:0;} ol.num_line>li{padding:4.5rem 0 4.5rem 0;} ol.num_line>li:before{padding-bottom:1rem; display: block; position: static;} ol.num_line>li .tit{} .num_title{padding-left:0; text-align: left; position: relative;} .num_title:before{padding-bottom:1rem; display: block; position: static;} ul.bul>li{margin-top:0.5rem; padding-left:1.4rem; font-size:2rem; line-height:2.8rem;} ul.bul>li+li{} ul.bul.two>li{width:100%; display:block;} /* 회사소개 - 인사말 */ .greetingArea{} .greetingArea .greetingTop{} .greetingArea .greetingTop>dt{font-size:2.8rem;} .greetingArea .greetingTop>dt>p{padding-top:1rem; font-size:3.8rem;} .greetingArea .greetingTop>dd{font-size:2.2rem; line-height:3rem;} .greetingArea .greeting_re>.text{font-size:2.2rem; line-height:3.2rem;} .greetingArea .greetingBtm{font-size:2.4rem; line-height:4rem;} /* 회사소개 - 연혁 */ .historyArea{} .historyArea *{} .historyArea .history_re{padding:2rem 0 4rem; display: block;} .historyArea .history_re>.photo{width:100%; order: 1;} .historyArea .history_re>.text{width:100%; padding-top:4rem; display: block; order: 2;} .historyArea .history_re>.text .y{padding-bottom:0.7rem; font-size:3.8rem;} .historyArea .history_re dl{margin-top:1.5rem;} .historyArea .history_re dl>*{font-size:2.2rem;} .historyArea .history_re dl>dt{width:7.2rem;} .historyArea .history_re dl>dd{} .historyArea .history_re dl+dl{} /* 회사소개 - 오시는길 */ .locationArea{display: block;} .locationArea .map{width:100%; height:47rem; order:1;} .locationArea .text{width:100%; min-width:100%; padding:4rem 4rem 3.5rem; order:2;} .locationArea .text:before{border-width:2rem;} .locationArea .text dl+dl{margin-top:3rem;} .locationArea .text dl>dt{font-size:2.6rem;} .locationArea .text dl>dd{padding-top:1rem; font-size:2rem;} /* 사업분야 - 사업개요 */ .outlineArea .outline_llist .outline_re dl>dt{font-size:2.2rem;} .outlineArea .outline_llist .outline_re dl>dd{font-size:2rem;} /* 사업분야 - 사업소개 */ .introduceArea{} .introduceArea .introduce_re{} .introduceArea .introduce_re .inConts{} .introduceArea .introduce_re .scroll_info{margin-top:2rem;} .introduceArea .introduce_re .scrollTb{margin-top:0;} .introduceArea .info{width:100%; margin-top:2rem; text-align: left; position: static; z-index:3;} .introduceArea .info>p{font-size:2rem;} .introduceArea .info>ol{margin-top:15px;} .introduceArea .info>ol>li{font-size:2rem; line-height:3.2rem;} .introduceArea .info>ol>li>strong{} /* 지속가능경영 - 윤리경영 */ .ethicsArea .title{font-size:2.4rem;} .ethicsArea .tit{font-size:2rem;} .ethicsArea .ps{font-size:2rem;} .ethicsArea .ps+.ps{margin-top:1rem;} .ethicsArea .btns{display: flex; flex-wrap: wrap; justify-content: flex-start;} .ethicsArea .btns>a img{width:2.5rem;} .ethicsArea .btns>a+a img{width:3rem;} /* 지속가능경영 - 안전경영 */ .safetyArea{text-align: left;} .safetyArea *{} .safetyArea .title{margin-top:5.5rem;} .safetyArea .title>dt{font-size:3.4rem;} .safetyArea .title>dd{line-height:3.2rem;} .safetyArea ol{margin-top:4rem;} .safetyArea .end{margin-top:6rem;} .safetyArea .end>dt{font-size:2.4rem;} .safetyArea .end>dd{padding-top:2.5rem; line-height:2.4rem;} .safetyArea .end>dd>img{width:16.5rem;} /* 인재육성 */ .informationImg{margin-top:4rem; flex-flow: row wrap;} .informationImg li{flex-basis:100%; display:block; position: relative;} .informationImg li+li{flex-basis:48.5%; margin:2rem 0 0 0;} .informationImg li>p{font-size:1.8rem; line-height:5rem;} .etc_clause{width:100%; margin:0 auto; padding:5rem 4rem; border-radius:1rem;} .etc_clause .logo{margin:0;} .etc_clause .txt{padding:2rem 0 6rem; font-size:2.2rem;} .etc_clause .scroll{font-size:2rem;} /*[e] Sub Style */ } /* transform: scale(1.1) 부분을 transform: scale(1.1) rotate(.001deg); 로 변경하면 부드럽게 처리되네요 display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: center; 맨 앞에 정렬 justify-content: flex-start; ​ 맨 끝에 정렬 justify-content: flex-end; 가운데 정렬 justify-content: center; 서로 같은 간격으로 박스들이 조정됨. justify-content: space-between;​ 컨텐츠 뿐만 아니라 그 주변도 같은 간격으로 조정됨. justify-content: space-around; ​ * 수직으로 적용 align-items 컨테이너의 꼭대기로 정렬 justify-content: flex-start ​ 컨테이너의 바닥으로 정렬 flex-end​ 가운데로 정렬 center 컨테이너의 시작 위치에 정렬 baseline​ 컨테이너에 맞도록 늘린다. stretch .list_ol_01 {counter-reset:item; margin-bottom:10px;} .list_ol_01 > li {position: relative; font-size: 16px; line-height: 1.75; margin-bottom:4px; color: #636363; padding-left:26px;} .list_ol_01 > li:last-child {margin-bottom: 0;} .list_ol_01 > li:before {counter-increment: item; content: counter(item); width: 18px; height: 18px; display: inline-block; background: #fff; border:1px solid #636363; color: #636363; border-radius: 50%; text-align: center; line-height:18px; font-size: 10px; position: absolute; top: 5px; left: 0; font-weight:400;} -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); filter:grayscale(100%) blur(0px); -webkit-filter:grayscale(100%) blur(0px); transition: all .5s linear; transition: all .5s ease-out; transform:rotate(180deg); -webkit-transition-timing-function:ease-in linear; transition-timing-function:ease-in linear; -webkit-transition-delay: .8s; transition-delay: .8s; :before{content: ""; width: 24px; height: 24px; background-color: #fff; border:1px solid #666; display: inline-block; position:absolute; left: 0; top:0px; box-sizing: border-box;} display: flex; justify-content: space-between; // 양쪽 끝 정렬 display: flex; justify-content: space-around; // 센터 정렬 display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; //한줄 감추기 display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; //두줄 감추기 active :first-child text-indent:-99999px; !important display:table; table-layout:fixed; display:table-row; display:table-cell; box-sizing:border-box; word-break:keep-all; word-wrap:break-word; border-radius:2px; */