/*mainStyle.css*/ @font-face { font-family: 'GongGothicLight'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicLight.woff') format('woff'); font-weight: normal; font-style: normal; } .inner { max-width: 1360px; margin: 0 auto; } .lead {font-size:16px; word-break:keep-all;} /*공지사항*/ .mnotice_latest_wrap { width:100%; padding:150px 0; background-color:#f8f9fa; clear:both} .mnotice_latest_wrap .inner { max-width:1401px} .mnotice_latest { width:48%; float:left} @media screen and (max-width: 640px) { .mnotice_latest { width:100%;} } /*공지사항*/ /*메인5가지*/ .mcompany_box_wrap{ width:100%; padding: 0px 0px 150px 0; background-color:#f8f9fa; position:relative; z-index:2} .mcompany_box_wrap ul {margin-top:30px; overflow:hidden; background-color:#fff} .mcompany_box_wrap ul li{ width:33.3333%; text-align:center; float:left; display:block} .mcompany_box_wrap ul li .icon { display:inline-block; padding:30px} .mcompany_box_wrap ul li .icon i { color:#666; font-size:32px} .mcompany_box_wrap ul li img {vertical-align:middle; transition:transform 500ms} .mcompany_box_wrap ul li:hover .icon {transform:rotateY(180deg); transition:transform 500ms} .mcompany_box_wrap ul li .box {border-right:1px #eaeaea solid; padding:30px 10px 80px 0; display:block} .mcompany_box_wrap ul li:last-child .box {border-right:0px} .mcompany_box_wrap ul li dl dt {font-weight:bold; padding-bottom:15px; line-height:30px; color:#222; font-size:20px} .mcompany_box_wrap ul li dl dd {color:#555; font-size:15px; font-weight:300; line-height:1.6} .mcompany_box_wrap ul li a {display:inline-block; margin-top:20px; border:1px #ddd solid; padding:0 35px; line-height:30px; color:#333; transition: all .2s; padding: 0 30px} .mcompany_box_wrap ul li:hover a {background:#2a4e10; color:#fff; transition: all .3s; padding: 0 50px} .mcompany_box_wrap ul li.four{ width:20%; text-align:center; float:left; display:block} .mcompany_box_wrap ul li.four .icon { display:inline-block; padding:30px} .mcompany_box_wrap ul li.four .icon i { color:#666; font-size:32px} .mcompany_box_wrap ul li.four img {vertical-align:middle; transition:transform 500ms} .mcompany_box_wrap ul li.four:hover .icon {transform:rotateY(180deg); transition:transform 500ms} .mcompany_box_wrap ul li.four .box {border-right:1px #eaeaea solid; padding:30px 0px 60px 0; display:block} .mcompany_box_wrap ul li.four .box:hover {padding-top:20px;transition: all .3s;} .mcompany_box_wrap ul li.four:last-child .box {border-right:0px} .mompany_box_wrap ul li.four dl dt {font-weight:bold; padding-bottom:15px; line-height:20px; color:#222; font-size:20px} .mcompany_box_wrap ul li.four dl dd {color:#555; font-size:15px; font-weight:300; line-height:1.6; padding:20px;word-break: keep-all;} .mcompany_box_wrap ul li.four a {display:inline-block; margin-top:20px; border:1px #ddd solid; padding:0 35px; line-height:30px; color:#333; transition: all .2s; padding: 0 30px} .mcompany_box_wrap ul li.four:hover a {background:#2a4e10; color:#fff; transition: all .3s; padding: 0 50px} @media screen and (max-width:960px) { .mcompany_box_wrap ul li { width:100%; clear:both; float:none} .mcompany_box_wrap ul li .box { border-left:0; border-bottom:1px solid #ddd; padding-bottom:10%} .mcompany_box_wrap ul li.four { width:100%; clear:both; float:none} .mcompany_box_wrap ul li.four .box { border-left:0; border-bottom:1px solid #ddd; padding-bottom:10%} } @media screen and (max-width:640px) { .mcompany_box_wrap { margin-top:0} .mcompany_box_wrap ul { margin-top:0} } /*메인5가지*/ /*메인*/ .about_box_wrap {width:100%; clear:both} .about_box_wrap .photo { width:59.2%; min-height:529px; background-image:url(../img/main/banner5.jpg); background-repeat:no-repeat; background-position:top center; background-size:cover; float:left} .about_box_wrap .txt { width:40%; min-height:502px; border-top:0px solid #ddd; padding:75px; float:left; box-sizing:border-box} .about_box_wrap .txt h2 { font-size:35px; letter-spacing:-1px; font-weight:bold} .about_box_wrap .txt span { display:block; padding:20px 0; color:#555; font-size:15px; line-height:1.75; letter-spacing:-0.02em; font-weight:300;word-break: keep-all;} .about_box_wrap .txt i { font-size:10px} .about_box_wrap a {display:inline-block; font-size:14px; margin-top:40px; background-color:#5e8629; color:#fff; font-weight:300; line-height:40px; padding:0 30px; transition: all 0.2s} .about_box_wrap a:hover {padding:0 50px; transition: all 0.3s; background-color:#2a4e10; color:#fff} @media screen and (max-width:1200px) { .about_box_wrap .photo { width:100%; clear:both; float:none} .about_box_wrap .txt { width:100%; clear:both; float:none} } @media screen and (max-width: 640px) { .about_box_wrap .txt { padding:45px} .about_box_wrap .txt h2 { font-size:33px;} } /*메인*/ /*상단 바로가기 아이콘*/ .company_box_wrap{ width:100%; position:relative; z-index:2;margin-top: -330px;margin-bottom:100px} .company_box_wrap h2 {text-align:center; font-size:42px; color:#333} .company_box_wrap h2 span{ display:block; padding:20px 0; color:#666; font-size:15px; font-weight:100} .company_box_wrap ul { padding:0; margin-top:-80px;} .company_box_wrap ul li{ width:25%; text-align:center; float:left; display:block; } .company_box_wrap ul li:nth-child(1) { border-left:1px solid #eaeaea} .company_box_wrap ul li .icon { display:inline-block; padding:30px} .company_box_wrap ul li .icon i { color:#666; font-size:32px} .company_box_wrap ul li img {vertical-align:middle; transition:transform 500ms} .company_box_wrap ul li:hover .icon {transform:rotateY(180deg); transition:transform 500ms} .company_box_wrap ul li .box {border-right:1px #eaeaea solid; padding:22px 10px 80px 0; display:block;background-color:#fff;} .company_box_wrap ul li:last-child .box {border-right:0px; background-color:#43b982; display:table-cell; vertical-align:middle; padding:0} .company_box_wrap ul li dl dt {font-weight:bold; padding-bottom:15px; line-height:20px; color:#222; font-size:20px} .company_box_wrap ul li dl dd {color:#919191; font-size:15px; line-height:1.6} .company_box_wrap ul li a {display:inline-block; margin-top:20px; border:1px solid #ddd; padding:7px 30px; color:#666; font-size:12px; transition: all .2s} .company_box_wrap ul li:hover a {background:#43b982; border:1px solid #43b982; color:#fff; transition: all .3s} .company_box_wrap ul li .customer_txt {font-size: 22px; letter-spacing:-1px; font-weight:600; color:#333} .company_box_wrap ul li .customer_num { margin-top: 15px;font-size: 24px;} .company_box_wrap ul li .customer_num strong { font-family: 'GmarketSansBold', sans-serif; font-size: 28px;font-weight: bold; letter-spacing:0px; color:#8bf3c3} .company_box_wrap ul li .customer_num span { display: block;font-size: 14px; border-top:0px solid #ddd; padding-top:13px; margin: 10px 0 0; line-height:1.5;color: #fff;} .company_box_wrap ul .cs { display:table; height:314px} /*상단 바로가기 아이콘*/ #sub_content {margin-bottom:70px;text-align:center} #sub_content .boddy img{max-width:100%;text-align:center;margin:0px auto} @media screen and (max-width: 1200px) { .company_box_wrap ul { margin-top:0px;} } @media screen and (max-width: 960px) { .company_box_wrap{ margin-bottom:50px} .company_box_wrap ul li { width:100%; clear:both; float:none} .company_box_wrap ul li .box { border-left:0; border-bottom:1px solid #ddd; padding-bottom:10%} } @media screen and (max-width: 640px) { .company_box_wrap h2 { font-size:32px} } body.dark-mode { background:#333; } body.dark-mode h1, h2 , h3, p { color:#fff; } body.dark-mode p, body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode a { color:#fff; } body.dark-mode button { background-color:#c71526; color:#fff; } body.light-mode h1, h2, h3, p, a { color:#333; } body.light-mode button { background-color:#c71526; color:#eee } button { background:#c71526; } #darkLight { width:70px; height:90px; font-size:3em; padding-left:0.5%; position:fixed; right:0; bottom:3%; border-radius:100px 0 0 100px; transition:all .3s; z-index:99999; } #darkLight:hover { width:130px; padding-left:1%; background-color:#111; } #container{overflow: hidden; font-family: 'GmarketSansMedium', sans-serif;} .bannerWrap{width: 100%; height: 950px; position: relative;} .bannerWrap > img{height: 100%; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);} .bannerWrap > div{width: 768px; position: absolute; z-index:9999999;left: 50%; top: 50%; -webkit-transform: translate(-50%,-80%); -ms-transform: translate(-50%,-80%); transform: translate(-50%,-80%);} .bannerWrap > div img{margin: 30px auto;} .bannerWrap > div h2, .bannerWrap > div p{text-align: center; color: #fff;} .bannerWrap > div h2{font-family: 'GmarketSansBold', sans-serif;font-size: 48px; letter-spacing: -1px; line-height: 1.2; margin-bottom: 40px;} .bannerWrap > div p{font-family: 'GmarketSansBold', sans-serif;font-size: 60px;line-height: 1.2;word-break: keep-all;text-shadow: 1px 1px #000000;color: #ffffff;} .bannerWrap > div p span{display: block;font-family: 'GmarketSansBold', sans-serif;font-size: 22px;word-break: keep-all;line-height: 1.2;} .bannerWrap > div p span.subtitle {display: block;text-shadow: 0px 0px #000000;font-family: 'GmarketSansBold', sans-serif;font-size: 30px;word-break: keep-all;line-height: 1.2;color:#000;background-color:rgba(255,255,255,.6);padding:30px;margin-bottom:30px;} .bannerWrap > div p span.subtitle1{display: block;font-family: 'GmarketSansBold', sans-serif;font-size: 26px;word-break: keep-all;line-height: 1.2;padding-top:20px; color:yellow} .bannerWrap > div > div{width: 37px; height: 192px; position: absolute; font-size: 100px; color: #fff; z-index: 10; top: 30px; background: url(../img/main/square_bracket1.png); background-size: 100% 100%;} .bannerWrap > div > div.square_bracket1{left: 100px;} .bannerWrap > div > div.square_bracket2{background-image: url(../img/main/square_bracket2.png); right: 100px;} .inner.box{padding: 0 20px 120px;} .main_title{padding: 100px 0;} .main_title h2{font-size: 60px; line-height: 1.0; color: #777; text-align: center;} .main_title h2::after{content: ""; display: block; width: 1px; height: 35px; background: #223040; margin: 55px auto;} .main_title h2 span{color: #d40424; font-weight: 600; margin-right: 20px;} .main_title p{width: 70%; margin: 0 auto; text-align: center; font-size: 20px; line-height: 1.5;} .main_title1{padding: 100px 0;} .main_title1 h2{font-size: 60px; line-height: 1.0; color: #777; text-align: center;} .main_title1 h2::after{content: ""; display: block; width: 0px; height: 0px; background: #223040; margin: 55px auto;} .main_title1 h2 span{color: #fff; font-weight: 600; margin-right: 20px;} .main_title1 p{width: 70%; margin: 0 auto; text-align: center; font-size: 20px; line-height: 1.5;} .detail{width: 100%; margin: 0 auto;} .detail > ul{width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin: 0 auto;} .detail > ul li{float: left; width: 32%; padding: 13px 0;} .detail > ul li.second{margin: 0 2%;} .detail > ul li img{margin: 30px auto 35px;} .detail > ul li p{color: #666; font-size: 28px; margin-bottom: 26px;} .detail > ul li p span{display: block;} .detail > ul li strong{display: block; font-size: 35px; line-height: 1.5; color: #333; margin: 0 auto; text-align: center;} .detail > ul li strong span{font-size: 44px; color: #223040; display: inline-block; font-weight: bold; margin-right: 10px;} .detail > ul li p{text-align: center;} .aboutWrap{width: 100%;} .aboutWrap .detail > ul li strong{text-align: center;} .coreComWrap{width: 100%; background: url(); background-position: center;} .coreComWrap .main_title h2::after{background: #000;} .coreComWrap .main_title h2, .coreComWrap .main_title h2 span, .coreComWrap .main_title p{color: #000;} .coreComWrap .main_title h2{letter-spacing: -4px; font-weight: 600;} .coreComWrap .main_title h2 span{letter-spacing: 0;} .coreComWrap .detail ul li{background: #fff; border-radius: 10px; padding: 80px 0;border: 1px solid #e9e9e9;-webkit-transition: 0.2s all;transition: 0.2s all;} .coreComWrap .detail ul li:hover {border: 3px solid #1fb96d;margin-top:-30px;-webkit-transition: 0.5s all;transition: 0.5s all;} .coreComWrap .detail ul li strong{font-weight: bold; margin-bottom: 26px;} .coreComWrap .detail ul li p{font-size: 22px; line-height: 1.4; margin-bottom: 0;} .portfolioWrap{background: url(../img/main/port_bg.png); padding-bottom: 90px;} .portfolioWrap .main_title h2::after{background: #fff;} .portfolioWrap .main_title h2, .portfolioWrap .main_title h2 span, .portfolioWrap .main_title p{color: #fff;} .port_go{width: 100%;} .portfolioWrap .port_go a{color: #fff; text-align: center; font-size: 18px; width: 100%; border: 1px solid #fff; padding: 15px 0px; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webokit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -ms-transition: 0.3s; -0-transition-duration: 0.3s;margin: 0 auto;} .portfolioWrap .port_go a:hover{background: #fff; color: #223040;} .pic_lt .lat_title, .pic_lt .lt_more, .pic_lt li .new_icon, .pic_lt .lt_date{display: none;} .portfolioWrap .mainPage{display: block;} .portfolioWrap .latest_wr{display: none;} .portfolioWrap .latest_wr2{display: block;} .portfolioWrap .pic_lt .empty_li{width: 100%; height: 500px; background: #fff; line-height: 500px; text-align: center;} .portfolioWrap .pic_lt{width: 100%; background: none; border: none; margin-bottom: 0;} .portfolioWrap .pic_lt ul{padding: 0;} .portfolioWrap .pic_lt li{padding: 0; margin:0.6%; height:347px; overflow: hidden;} .portfolioWrap .pic_lt li .lt_img{ } .portfolioWrap .pic_lt li .lt_img img{display: block; display: block;} .portfolioWrap .pic_lt li .lt_img + a{display: none;} .portfolioWrap .latest_wr2 .pic_lt .new_icon + a{display: none;} .portfolioWrap .owl-theme .owl-dots .owl-dot{outline: 0 none;} .portfolioWrap .owl-theme .owl-dots .owl-dot span{background: #ddd;} .portfolioWrap .owl-theme .owl-dots .owl-dot span:hover, .portfolioWrap .owl-theme .owl-dots .owl-dot.active span{background: #c80e21;} .consertWrap{background: url(../img/main/bg_img3.jpg);} .consertWrap .inner{padding-bottom: 170px;} .consertWrap .main_title{padding-bottom: 30px;} .consertWrap .latest_wr{width: 100%; margin: 0 auto;} .consertWrap .latest_wr > div{float: left; width: 45%;} .hot_icon .latest_wr > div.ing_projects{ } .pic_lt li .hot_icon { float:left; margin:1%; } .consertWrap .latest_wr > div.news{float: right;} .consertWrap .lat{margin-bottom: 0; border: none; padding: 60px; min-height: 493px;} .consertWrap .lat .lat_title{border-bottom: none; background: none; padding: 0; line-height: 1.0em; font-size: 1.0em; color:#333; border-bottom: 1px solid #ddd;} .consertWrap .lat .lat_title a{color: #333; font-size: 30px; color: #333; font-weight: 600; line-height: 70px; height: 70px;} .consertWrap .lat ul{padding: 0; margin-top: 30px;} .consertWrap .lat li{padding: 0; padding-right: 0; padding-left: 0; line-height: 45px; overflow: hidden; } .consertWrap .lat li:before{display: none;} .consertWrap .lat li a{width: 70%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: #333; font-size: 18px;} .consertWrap .lat li a:hover{color:#c80e21; font-weight: bold;} .consertWrap .lat .lt_date{color: #888; font-size: 18px; float:right; } .consertWrap .lat .lat_title_area{position: relative;} .consertWrap .lat .lt_more{top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 0; font-weight: normal; color: #7a838c; font-size: 45px;} .consertWrap .lat .lt_more .fa{display: none;} .consertWrap .lat li .new_icon{display: none;} .consertWrap .lat li .hot_icon { float:left; margin: 4%; } .consertWrap .lat .lat_title a:after{display: none;} .consertWrap .lat .empty_li{line-height: 270px; font-size: 18px;} .contactWrap{background: url(../img/main/bg_img5.jpg); background-size: cover; background-position: center;} .contactWrap .inner{padding-bottom: 170px;} .contactWrap .main_title{padding-bottom: 70px;} .contactWrap .main_title h2::after{display: none;} .contactWrap .main_title h2, .contactWrap .main_title h2 span, .contactWrap .main_title p{color: #fff;} .contactWrap .main_title p{padding-top: 50px;} .contactWrap .detail{width: 100%; height: 420px;} .contactWrap .root_daum_roughmap{height: 100%;} .contactWrap .root_daum_roughmap .wrap_map{height: 100%;} @media screen and (max-width: 1199px){ .bannerWrap > div img{width:110px;} .bannerWrap > div h2{font-size: 30px;} .bannerWrap > div p{width: 90%; margin: 0 auto; font-size: 28px;} .bannerWrap > div p span{font-size: 22px;} .bannerWrap > div p span.subtitle {font-size: 22px;} .bannerWrap > div > div{top: 20px;} .bannerWrap > div > div.square_bracket1{left: 160px;} .bannerWrap > div > div.square_bracket2{right: 160px;} .inner{width: 100%; padding: 0 20px 60px;} .main_title{padding: 60px 0;} .main_title h2{font-size: 42px;} .main_title h2::after{width: 1px; height: 24px; margin: 35px auto;} .main_title h2 span{margin-right: 15px;} .main_title p{width: 100%; font-size: 16px; padding: 0 30px;} .main_title1{padding: 60px 0;} .main_title1 h2{font-size: 42px;} .main_title1 h2::after{width: 0px; height: 0px; margin: 35px auto;} .main_title1 h2 span{margin-right: 15px;} .main_title1 p{width: 100%; font-size: 16px; padding: 0 30px;} .detail > ul li p{font-size: 20px; margin-bottom: 0;} .detail > ul li strong{font-size: 26px;} .detail > ul li strong span{font-size: 30px;} .detail > ul li, .detail > ul li img{-webkit-transition-duration: 0.3s;transition-duration: 0.3s; -webokit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -ms-transition: 0.3s; -0-transition-duration: 0.3s;} .aboutWrap .detail > ul li:hover img{-webkit-transition-delay: 0.2s;transition-delay: 0.2s;} .coreComWrap{background-size: auto 100%;} .coreComWrap .main_title h2{letter-spacing: -2px;} .coreComWrap .detail ul li strong{margin-bottom: 0; font-size: 26px;} .coreComWrap .detail ul li p{padding: 0 20px; font-size: 20px;} .portfolioWrap .port_go a{width: 100%; margin-top: 35px;} .portfolioWrap .port_go a{font-size: 16px;} .contactWrap .inner{padding-bottom: 100px;} .contactWrap .main_title{padding-bottom: 50px;} } @media screen and (min-width:481px){ .portfolioWrap .mainPagewrap{width: 100%; position: relative;} .portfolioWrap .latest_wr{display: none;} .portfolioWrap .latest_wr2{display: block; width: 100%; height: auto; margin: 0 auto;} .portfolioWrap .pic_lt ul{display: inherit; width: 100%; overflow: hidden; margin-bottom: 32px; padding: 0;} .portfolioWrap .pic_lt li{padding: 0; width: 32%; padding: 0;} .portfolioWrap .pic_lt li .lt_img{margin: 0; width: 100%; overflow: hidden;} .portfolioWrap .pic_lt li .lt_img:hover img{-webkit-transform: scale(1.2);-ms-transform: scale(1.2);transform: scale(1.2); -webkit-transition-duration: 0.6s; transition-duration: 0.6s; -webokit-transition-duration: 0.6s; -moz-transition-duration: 0.6s; -ms-transition: 0.6s; -0-transition-duration: 0.6s;} } @media screen and (min-width:481px) and (max-width: 1199px){ /* .bannerWrap{height: 400px;} */ } @media screen and (max-width:1024px){ .consertWrap .latest_wr > div{width: 49%;} .consertWrap .lat .lat_title a{font-size: 20px;} .consertWrap .lat .lt_more{font-size: 30px;} .consertWrap .lat li a, .consertWrap .lat .lt_date{font-size: 16px;} .consertWrap .lat .empty_li{line-height: 270px; font-size: 16px;} .bannerWrap > div{top: 35%;} } @media screen and (max-width:767px){ .bannerWrap > div{width: 480px;} .bannerWrap > div > div.square_bracket1{left: 20px;} .bannerWrap > div > div.square_bracket2{right: 20px;} .detail > ul{width: 80%; display: inherit;} .detail > ul li{width: 100%;} .detail > ul li.second{margin: 0;} .detail > ul li p{font-size: 20px; margin-bottom: 0;} .detail > ul li strong{font-size: 26px;} .detail > ul li strong span{font-size: 30px;} .consertWrap .inner{padding-bottom: 80px;} .consertWrap .main_title{padding-bottom: 0;} .consertWrap .latest_wr > div{float: left; width: 100%;} .consertWrap .latest_wr > div.ing_projects{margin-bottom: 5%;} .consertWrap .lat{padding: 40px;} .consertWrap .lat .lat_title a{font-size: 20px; line-height: 60px; height: 60px;} .consertWrap .lat li{line-height: 50px;} .consertWrap .lat li a, .consertWrap .lat .lt_date{font-size: 16px;} .consertWrap .lat .empty_li{line-height: 300px; font-size: 16px;} } @media screen and (max-width:600px){ .portfolioWrap .latest_wr{display: block;} .portfolioWrap .latest_wr2{display: none;} .portfolioWrap .pic_lt .empty_li{height: 200px; line-height: 200px;} .portfolioWrap .inner{position: relative;} .portfolioWrap .mainPagewrap{width: 100%; position: relative;} .portfolioWrap .latest_wr{width: 240px; height: auto; margin: 0 auto;} .portfolioWrap{padding-bottom: 60px;} .portfolioWrap .port_go a{width: 100%; margin-top: 35px; font-size: 12px; padding: 10px 0;} } @media screen and (min-width:481px) and (max-width:767px){ .coreComWrap .detail ul{width: 40%; min-width: 320px;} .coreComWrap .detail img{margin: 10px auto 20px;} .coreComWrap .detail > ul li.second{margin: 20px 0;} } @media screen and (max-width: 480px){ .bannerWrap{height: 700px;} .bannerWrap > div{width: 320px;top: 40%;} .bannerWrap > div img{width: 63px; height: 42px; margin: 30px auto 20px;} .bannerWrap > div h2{font-size: 20px;} .bannerWrap > div p{font-size: 18px;} .bannerWrap > div p span.subtitle {font-size: 16px;} .bannerWrap > div p span{font-size: 16px;} .bannerWrap > div p span.subtitle1{font-size: 16px;} .bannerWrap > div > div{width: 20px; height: 104px;} .bannerWrap > div > div.square_bracket1{left: 20px;} .bannerWrap > div > div.square_bracket2{right: 20px;} .main_title{padding: 40px 0;} .main_title h2{font-size: 27px;} .main_title h2::after{width: 1px; height: 13px; margin: 20px auto;} .main_title h2 span{margin-right: 10px;} .main_title p{width: 100%; font-size: 12px; padding: 0 20px;} .detail > ul{width: 240px;} .detail > ul li{width: 100%; height: 100px; overflow: hidden;} .detail > ul li img{width: 56px; margin: 0px auto 30px;} .detail > ul li p{font-size: 16px;} .detail > ul li strong{font-size: 23px; line-height: 1.5; margin: 0 auto; text-align: left; line-height: 1.0;} .detail > ul li strong span{font-size: 35px; color: #223040; display: inline-block; font-weight: bold; margin-right: 10px;} .detail > ul li p, .detail > ul li strong{text-align: left; width: 152px; margin-right: 0px;} .aboutWrap .detail > ul li img{float: left;} .aboutWrap .detail > ul li p{float: right;} .aboutWrap .detail > ul li strong{float: right;} .aboutWrap .detail > ul li strong{text-align: left;} .coreComWrap .detail ul li{padding: 40px 0; height: 240px;} .coreComWrap .detail > ul li.second{margin: 15px 0;} .coreComWrap .detail ul li strong, .coreComWrap .detail ul li p{width: 100%;} .coreComWrap .detail ul li strong{margin-bottom: 15px; text-align: center; font-size:23px;} .coreComWrap .detail ul li p{font-size: 14px; margin-bottom: 0; text-align: center;} .consertWrap .inner{padding-bottom: 60px;} .consertWrap .lat{padding: 30px; min-height: 373px;} .consertWrap .lat .lat_title a{font-size: 17px; height: 40px; line-height: 40px;} .consertWrap .lat .lt_more{font-size: 20px;} .consertWrap .lat li{line-height: 40px;} .consertWrap .lat li a, .consertWrap .lat .lt_date{font-size: 14px;} .consertWrap .lat .empty_li{line-height: 240px; font-size: 14px;} .contactWrap .inner{padding-bottom: 50px;} .contactWrap .main_title{padding-bottom: 30px;} .contactWrap .detail{height: 220px; overflow: hidden;} .portfolioWrap .pic_lt li .lt_img {height: 220px;} } @media screen and (max-width:350px){ .portfolioWrap .port_go a{font-size: 12px;} } /* 도트 마감 */ section.section04 { /* background: #ffd4d4; */ margin-top: 80px; margin-bottom: 80px; } section.section04 .box_wrap { display: flex; margin-top: 72px; margin-bottom: 72px; } section.section04 .box_wrap .box01 { width: 30%; background-color: #ffd4d4; padding: 50px; font-size: 16px; color: #858585; font-weight: 500; padding-top: 24px; } section.section04 .box_wrap .box02 { width: 70%; padding-left: 120px; padding-right: 0px; background-color: #666; } section.section04 .box_wrap .box02 img { max-width: 100%; } section.section04 .box_wrap .box03 { padding-left: 30px; width: 28% } section.section04 .box_wrap .box01 h1 { font-size: 48px; color: #000; font-weight: 900; font-family: 'Noto Sans KR'; line-height: 59px; margin-bottom: 20px; } section.section04 .box_wrap .box01 h1 span { display: inline-block; position: relative; z-index: 1 } /* section.section04 .box_wrap .box01 h1 span::before { position: absolute; width: 100%; height: 12px; background: #aee4ff; content: ''; margin-top: 46px; z-index: -1; } */ section.section04 .box_wrap .box h2 { font-size: 20px; font-weight: 700; font-family: 'Noto Sans KR'; color: #000; display: inline-block; position: relative; z-index: 1; margin-bottom: 30px; } section.section04 .box_wrap .box h2::before { position: absolute; width: 100%; height: 6px; background: #aee4ff; content: ''; margin-top: 28px; z-index: -1; } section.section04 .box_wrap .box h2 a:hover { text-decoration: none; } section.section04 .box_wrap .box.box03 .tel { font-size: 15px; color: #333333; font-weight: 500; } section.section04 .box_wrap .box.box03 .tel ul { margin-bottom: 13px; } section.section04 .box_wrap .box.box03 .tel ul li { font-size: 34px; font-weight: 800; padding: 0; font-family: 'Open Sans', sans-serif; letter-spacing: 1px; line-height: 36px; } section.section04 .box_wrap .box.box03 .tel ul li span { position: relative; display: inline-block; font-size: 15px; font-family: 'Noto Sans KR'; font-weight: 600; color: #000; margin-right: 16px; letter-spacing: 0; } section.section04 .box_wrap .box.box03 .tel ul li span::before { position: absolute; width: 100%; height: 1px; background: #000; content: ''; margin-top: 26px; } section.section04 .box_wrap .box.box03 .btn_wrap { margin-top: 23px; } section.section04 .box_wrap .box.box03 .btn_wrap ul { display:flex; } section.section04 .box_wrap .box.box03 .btn_wrap ul li { margin-right: 5px; width: 45%; } section.section04 .box_wrap .box.box03 .btn_wrap ul li a.btn { height: 48px; font-size: 15px; border-radius: 0; line-height: 46px; padding: 0px 28px; letter-spacing: 0; width: 100%; font-weight:500; font-family: 'Noto Sans KR'; } section.section04 .box_wrap .box.box03 .btn_wrap ul li a.btn i { margin-right: 4px; } section.section04 .box_wrap .box.box03 .btn_wrap ul li a.btn.black { background: #000; color: #fff; border: 0; } section.section04 .box_wrap .box.box03 .btn_wrap ul li a.btn.black:after { border-color: # n; background-color: #fff; } section.section04 .box_wrap .box.box03 .btn_wrap ul li a.btn.black:hover { color: #000; } section.section04 .box_wrap .box.box03 .btn_wrap ul li a.btn.gray { background: #cdcdcd; color: #000; border: 0; } section.section04 .box_wrap .box.box03 .btn_wrap ul li a.btn.gray:after { border-color: #fff; background-color: #fff; } section.section04 .box_wrap .box.box03 .btn_wrap ul li a.btn.gray:hover { color: #000; } .nana2022 {width:100%; background-color:#faf7f7;padding:100px 0px} @media screen and (max-width:980px){ section.section04 .box_wrap { display: block; margin-top: 30px; margin-bottom: 30px; } section.section04 .box_wrap .box01 { width: 100%; font-size: 16px; color: #858585; font-weight: 500; padding-top: 24px; margin-bottom:30px; } section.section04 .box_wrap .box02 { width: 100%; padding-left: 0px; padding-right: 0px; margin-bottom:30px; } .nana2022 {width:100%; background-color:#f7f9fa;padding:30px 0px} } .popup_overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); visibility: hidden; opacity: 0; z-index: 999999 !important; display:flex; flex-direction: column; align-items: center; justify-content: center; } .popup_overlay:target { visibility: visible; opacity: 1; } .content_pop { background: #fff; width: 60%; position: relative; transition: all 5s ease-in-out; padding-bottom: 10px; } @media screen and (max-width: 768px) { .content_pop { width: 80%; } } .content_pop h2 { background-color: #000; margin-top: 0; color: rgb(255, 255, 255); text-align: center; font-size: 24px; font-family: 'GmarketSansMedium', sans-serif; line-height: 52px; font-weight: 900; padding-top: 5px; border-bottom: 1px rgb(238, 238, 238) solid; padding-top: 13px; padding-bottom: 10px; } .content_pop .close { z-index: 99999; position: absolute; top: 15px; right: 15px; transition: all 200ms; font-size: 30px; font-weight: bold; text-decoration: none; color: #fff !important; opacity: 1; text-shadow: none; line-height: 0; padding-top: 12px; padding-bottom: 20px; padding-left: 5px; padding-right: 5px; } .content_pop .close:hover { color: #06D85F; } .content_pop .content { max-height: 350px; height: auto; padding: 25px 20px; font-size: 13px; overflow-y: auto; text-align: left; color:#666; } .content_pop .content p, .content_pop .content b { padding:5px 0px } .content_pop .content p .btn-1 { background: rgb(182, 13, 13); margin-top: 30px; width: 160px; text-align: center; color: #fff; } .content_pop .content p .btn-1::before { background-color: #2b2929; } .content_pop .content p .btn-1 span { color: rgb(255, 255, 255); border: 0; transition: 0.2s 0.1s; padding: 12px 0px; font-size:16px; } .content_pop .content p .btn-1 span:hover { color: rgb(255, 255, 255); transition: 0.2s 0.1s; } .popup_text_point { font-size: 16px; font-weight: 600; font-weight: 600; padding-bottom: 12px; } /* 팝업 마감 */