ㅎ/*인사말*/ .greeting{position:relative; font-size:15px; max-width:1200px} .greeting .img{position:relative; height:324px; margin-top:110px; background:url(../img/bg_greeting.jpg) no-repeat 50%; background-size:cover; } .greeting .img:before{content:''; display:block; position:absolute; bottom:0; left: 1px; width: 818px; height: 432px; background:url(../img/bg_chairman.png) no-repeat; } .greeting .tit{position:absolute; top:30px; right:100px; width:514px; height:314px; background:#4168ad} .greeting .tit h3{position:relative; margin:0; padding:140px 0 0 50px; color:#fff; font-size:22px; font-weight:100; line-height:1.6; word-break:keep-all; box-sizing:border-box; text-align:left; letter-spacing:-3px} .greeting .tit h3:before{content:''; display:block; position:absolute; top:-23px; left:50px; width:1px; height:144px; margin:0; background:#fff; } .greeting .tit h3 span{display:block; font-weight:600; } .greeting .colum{padding:50px 20px 70px 20px; max-width:1100px; margin:0 auto} .greeting .colum:after{clear:both; content:""; display:block; } .greeting .colum .left{float:left; width:48%; line-height:1.95em; text-align:justify; color:#333} .greeting .colum .right{float:right; width:48%; line-height:1.95em; text-align:justify; color:#333} .greeting .sign{text-align:right; font-size:1.125em; font-weight:bold; color:#222; margin-top:60px; padding-right:20px; background-repeat:no-repeat; background-position:right center; line-height:50px; } .greeting .sign .name{font-size:24px} /*인사말*/ .Vision_area{margin-bottom: 120px; } .Vision_area .imgBox2{background: linear-gradient(165deg, #bddde1 0%, #fdfdfd 50%); border-radius: 3%; text-align: center; margin:15px auto; padding:90px} .Vision_area .imgBox2 img{width: 100%; max-width: 900px; } @media screen and (max-width:950px) { .Vision_area{margin-bottom: 20px; } .Vision_area .imgBox2{text-align: center; margin:30px auto; padding: 15px; } .Vision_area .imgBox2 img{width: 100%; } } .Vision_txt{display: flex; font-size: 18px; width: 100%; margin-bottom: 90px; align-items:flex-start; } .Vision_txt .tL{padding-left: 20px; width: 37%; } .Vision_txt .tX{line-height: 165%; letter-spacing: -1px; color: #7d7d7d; } .Vision_txt .tX_rd1{color: #3399cc; font-size: 34px; font-weight: 700; letter-spacing: -2px; margin-bottom: 25px; } .Vision_txt .tX_rd2{color: #cc3300; font-size: 34px; font-weight: 700; letter-spacing: -2px; margin-bottom: 25px; } .Vision_txt .tX_rd3{color: #996600; font-size: 34px; font-weight: 700; letter-spacing: -2px; margin-bottom: 25px; } @media screen and (max-width:950px) { .Vision_txt .tL{text-align: center; width:100%; margin-bottom:50px; } .Vision_txt .tL img{width: 70%; } .Vision_txt{flex-direction: column; } .Vision_txt .tX{font-size: 16px; } .Vision_txt .tX_rd1, .Vision_txt .tX_rd2, .Vision_txt .tX_rd3{font-size: 24px; font-weight: 600; letter-spacing: -1px; margin-bottom: 15px; margin-top: 5px; } } /*회사소개_비젼*/ .idv-vision-wrap{padding:0px 20px; background:#fff; font-family:'Noto Sans KR',sans-serif; text-align:center; color:#1c4732; } .idv-inner{max-width:1080px; margin:0 auto; } .idv-title{font-size:34px; font-weight:700; letter-spacing:2px; margin-bottom:12px; } .idv-headline{font-size:24px; font-weight:600; margin-bottom:28px; } .idv-desc{font-size:15px; line-height:1.7; margin-bottom:42px; color:#4c6654; } .idv-strategy-title{font-size:22px; font-weight:700; margin-bottom:36px; } .idv-strategy-item{flex:1 1 220px; max-width:240px; border-radius:16px; padding:34px 22px 40px; box-shadow:0 6px 20px rgba(0,0,0,0.07); background:#fff; } .idv-icon{font-size:40px; margin-bottom:18px; color:#4caf50; } .idv-strategy-item h4{font-size:18px; font-weight:700; margin-bottom:12px; } .idv-bullet{text-align:left; font-size:15px; line-height:1.6; } .idv-bullet li{position:relative; padding-left:12px; } .idv-bullet li::before{content:"●"; font-size:6px; color:#4caf50; position:absolute; left:0; top:8px; } .idv-footer{margin-top:60px; font-size:24px; line-height:1.6; color:#545579; } @media(max-width:768px){.idv-strategy-list{gap:20px; }.idv-strategy-item{flex:1 1 45%; }} @media(max-width:480px){.idv-headline{font-size:20px; }.idv-strategy-item{flex:1 1 100%; }} .idv-strategy-list{display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; padding: 0; list-style: none; margin: 40px auto; max-width: 1100px; } .idv-strategy-card{flex: 1 1 240px; background:#d9e9ff; padding: 30px 20px; text-align: center; transition: 0.3s ease all; } .idv-strategy-card:hover{transform: translateY(-6px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08); } .idv-icon{font-size: 42px; color: #1e5aa0; margin-bottom: 12px; } .idv-icon .material-icons{font-size: 42px; } .idv-strategy-card h4{font-size: 17px; font-weight: 700; margin-bottom: 10px; color: #222; } .idv-bullet{padding: 0; margin: 0; list-style: none; font-size: 15px; color: #555; text-align: left; } .idv-icon img{max-width: 60px; width: 100%; height: auto; display: inline-block; } .idv-bullet li{position: relative; padding-left: 16px; margin-bottom: 8px; font-size: 15px; line-height: 1.6; } .idv-bullet li::before{content: "●"; position: absolute; left: 0; top: 8px; /* 텍스트 위 기준으로 고정 위치 */ font-size: 8px; line-height: 1; color: #1e5aa0; } @media (max-width: 768px) { .idv-strategy-card{flex: 1 1 100%; } } /*그룹소개*/ .company_info{width:100%; height:auto; margin-top:110px} .company_info .img_page{width:100%; height:550px; background-image:url(../img/company_info_bg_company.jpg); background-position:center; background-repeat:no-repeat; } .company_info .txt_page{max-width:1200px; margin:0 auto; padding:20px} .company_info .txt_page h2{font-size: 42px; line-height: 1; font-weight: 600; margin-bottom: 44px; padding-top:100px; display: block; } .company_info .txt_page p{font-size:15px; word-break:keep-all; line-height:1.6; color:#666; padding-bottom:15px} .company_info .Ideology{width:100%; padding-bottom:200px; } .company_info .Ideology .inner{max-width:1240px; margin:auto; clear:both; } .company_info .Ideology .inner h2{font-size: 36px; font-weight: bold; color: #000; letter-spacing:5px; text-align:center; padding:95px 0 50px 0} .company_info .Ideology .inner .point{color: #06F; } .company_info .Ideology .inner h2:after{content: " "; display: block; margin:20px auto; width:40px; height: 2px; background-color:#000; clear: both; } .company_info .Ideology dl{float:left; width:33.3333%; padding: 0 20px 0 20px; border-right:1px solid #ddd} .company_info .Ideology dl:last-child{border:0} .company_info .Ideology dl .web_icon{padding:0 0 20px 0; text-align:center; color:#ff4200} .company_info .Ideology dl .web_icon img{width:100%} .company_info .Ideology dl dt{font-size:20px; height:60px; font-weight:bold; letter-spacing:5px; text-align:center} .company_info .Ideology dd{line-height:2.2; text-align:center; font-size:15px} .company_info .work_page{width:100%; height:auto; padding:50px 0; clear:both; background-color:#ECECEC} .company_info .work_page ul{max-width:1200px; margin:0 auto} .company_info .work_page ul li{float:left; width:23%; margin: 0 1% 0 1%; padding:100px 20px; background-color:#fff; text-align:center; display:block} .company_info .work_page ul li:last-child{margin-right:0} .company_info .work_page ul li:hover{background-color: #001e3a; color: #FFF; cursor: pointer; opacity: 1; transition: all 0.5s; } .company_info .work_page ul li i{font-size:35px; padding-bottom:20px} .company_info .work_page ul li .title{font-size:20px; font-weight:bold; padding-bottom:20px; display:block} .company_info .work_page ul li .txt{font-size:15px; line-height:1.5; } /*그룹소개*/ /*연혁*/ .history {margin-bottom: 140px; } .history_area{position: relative; width: 100%; padding-top: 37px; } .history_area .history_point{position: absolute; left: 50%; top: 0; margin-left: -5px; bottom: 20px; width:8px; background-color: #f6f6f6; overflow: hidden; } /*.history_area .history_point span{position: absolute; display: block; top: 0; width: 100%; height: 200px; background-color:#039}*/ .history_area dl{width: 50%; padding-right: 94px; padding-left: 20px; box-sizing:border-box; } .history_area div:nth-child(odd) dl{padding-right: 20px; padding-left: 94px; } .history_area dt{margin-bottom: 20px; font-size: 46px; line-height:1.3; color: #555; font-weight: bold; } .history_area dd strong{display: block; padding-bottom: 12px; font-size: 20px; line-height: 1.6; color: #1a1a1a; font-weight: 500; } .history_area dd p{display: block; font-size: 16px; line-height: 1.6; color: #555; } .history_area dd .img_box{display: block; margin-top: 39px; } .right{text-align: right; } .left{text-align: left; } .fr{float: right; } .img_box img{max-width: 100%} /*연혁*/ /*오시는 길*/ .contact_address{width:100%; height:auto; line-height:1.7; } .contact_address ul{max-width:1240px; clear: both; padding:0 10px 20px 0px; border-bottom:1px solid #ddd; } .contact_address ul li{color: #333; margin-top: 5px; margin-bottom: 5px; font-size:15px} .contact_traffic{max-width:1240px; padding:20px 10px 0 0px; letter-spacing:-0.8px; clear:both; } .contact_traffic:after{content: " "; visibility: hidden; display: block; height: 0; padding-bottom:50px; clear: both; } .contact_traffic .bus{width:100%; padding:0; } .contact_traffic .subway{width:100%; padding:0; } .contact_traffic ul li{color: #555; line-height:33px; font-size:15px} .contact_traffic h3{font-size:20px; font-weight:300; letter-spacing:-1px; color:#000; padding-bottom:10px; margin-top:15px; text-align:left}/* 푸터팝업*/ .map_info{width:283px; height:214px; background:#19cd61; position:absolute; right:0; top:0px; padding: 30px 28px; font-size:15px; color:#f8969a; letter-spacing:0; } .map_info span{display:block; font-size:20px; color:#fff; font-weight:bold; letter-spacing:-.25px; } .map_info p{padding-top:20px; color:#f2f2f2; line-height:1.4; } .map_btn{position:absolute; left:30px; bottom:30px; } .map_btn a{display:inline-block; padding:7px 10px; height:41px; border:1px solid #f2f2f2; text-align:center; color:#FFF; letter-spacing:-0.5px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .map_btn a:hover{color:#c2131a; background:#fff; border-color:#fff; text-decoration:none; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .map_btn a:first-child{margin-right:5px; } .map_in .sub_btn{display: inline-block; padding: 10px 20px; font-size: 16px; font-weight: bold; color: white; background-color: #3498db; border: none; border-radius: 30px; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .map_in .sub_btn:hover{background-color: #ffbf00; transform: translateY(-3px); box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); } .map_in .material-icons{vertical-align: middle; margin-left: 5px; font-size: 18px; } /*오시는 길*/ .location_con{position:relative; max-width: 1350px; margin: 0 auto; } .location_con .map_in{position:relative; display: flex; align-items: center; flex-wrap: wrap; padding:30px 0; border-top:1px solid #ddd; justify-content: space-between; } .location_con .map_in > div{position:relative; display:flex; align-items: center; flex-wrap: wrap; } .location_con .map_in dl{position:relative; display:flex; align-items: center; flex-wrap: wrap; margin-right:40px} .location_con .map_in dl:last-child{margin-right:0} .location_con .map_in dt{width:108px; position:relative; margin-right:15px; display:flex; align-items: center; flex-wrap: wrap; letter-spacing:-0.5pt; font-weight:700; color:#080808; line-height:1.3} .location_con .map_in dt span{margin-right:15px; border-radius: 100%; display:flex; justify-content: center; align-items: center; width:50px; height:50px; background:#f9ece1; color:var(--color1)} .location_con .map_in dd{position:relative; letter-spacing:-0.5pt; line-height:2.3; } .location_con .map_in .one{width: calc(100% - 350px); } .location_con .map_in .two a{margin-right:10px; } /* business01 */ .business_area{max-width:1200px; padding:20px; margin-top:110px} .business_area .box{position: relative; padding-bottom:80px; display:block; } .business_area .box .img_right{float:right} .business_area .box .txt_wrap{position: absolute; right: 0; top:45px; background: #fff; padding:20px; width: 60%; } .business_area .box .txt_wrap .half-round-tit{padding:50px 0 20px 50px} .business_area .box .txt_wrap .half-round-tit strong{color:#30770f; font-size:22px; font-weight: 600; vertical-align: middle; margin-left: .7rem; line-height:1.6} .business_area .box .txt_wrap .half-round-tit span{display: inline-block; width:35px; height:35px; line-height:35px; text-align: center; border-radius: 50%; vertical-align: middle; color: #fff; } .business_area .box .txt_wrap .half-round-tit span{background:#8abd00; float:left; margin: 0 0 20px 0; } .business_area .box .txt_wrap .txt{padding-left:1rem; font-size:17px; color: #555; font-weight: 400; padding: 0 50px 50px 50px; line-height: 1.8; text-align: justify; } .business_area .box .txt_wrap02{position: absolute; left: 0; top:45px; background: #fff; width: 60%; } /* business01 */ .business_area02{text-align: center; padding--top: 29px; padding--bottom: 20px; vertical-align: middle; } .business_area02 h3{color: #605f5f; font-size: 26px; font-weight: 500; letter-spacing: -2px; line-height: 174%; margin: -30px 0 30px 0; } .business_area02 .point{color: #177305; } .business_area02 .material-symbols-outlined{vertical-align: sub; font-size: 27px; color: #177305; } .padB10{line-height: 50px; vertical-align: middle; } /* business02 */ .business_area .left{width:50%; float:left} .business_area .right{width:50%; float:right} .business_area .profile{float:left; padding-bottom:50px; max-width:221px} .business_area .profile img{width:100%} .business_area .list_wrap{float:left} .business_area .list_wrap h2{font-size:24px; font-weight:bold; padding:0 0 10px 35px; text-align:left; } .business_area .list_wrap ul{padding:0 35px 50px 10px} .business_area .list_wrap ul li{display:block; clear:both; padding:5px 0; font-size:15px; background-image: url(../images/icon_dot.gif); background-repeat: no-repeat; background-position: left 16px; padding-left: 15px; margin-left: 10px; text-align:left; color:#333} .business_area .list_wrap .enterprise{margin-top:50px} .business_area .list_wrap .enterprise li{float:left; display:block; padding:10px 20px; clear:none; background-image:none; margin-left:0} .depTit{padding:0 0 12px 32px; } .depTit:before{width:24px; height:24px; } .depTit{font-size:26px; font-weight:400; color:#1A731F; line-height:130%; box-sizing:border-box; position:relative; padding:0 0 15px 38px; letter-spacing: -1.04px; } .depTit:before{content:''; display:block; width:28px; height:28px; background:url('../img/txt_point_02.png') no-repeat center/100% auto; position:absolute; left:0; top:2px; } .waste_list{margin-top: 50px; } .waste_list dl{padding:0 0 100px; display:flex; justify-content: space-between; } .waste_list dl:nth-child(even){flex-direction: row-reverse; } .waste_list dl dt{width:calc(30% - 15px); } .waste_list dl dt img{width:100%; max-width:100% !important; height:auto !important; border-radius:var(--borderR30); } .waste_list dl dd{width:calc(70% - 15px); padding:0 0 0 40px; box-sizing:border-box; display:flex; flex-direction: column; justify-content: center; } .waste_list dl:nth-child(even) dd{padding:0 40px 0 0; } .waste_in{} .waste_in .depTit{padding-bottom: 20px; } .waste_items{display:flex; } .waste_items .waste_tab{width:230px; padding:0 30px 0 0; box-sizing:border-box; } .waste_items .waste_tab.mobile{display: none; } .waste_items .waste_tab .waste_tab_in{position:sticky; top:20px; transition:all .4s; } #header.fixed + #menuArea + #visual + #contents .waste_items .waste_tab .waste_tab_in{top:140px; } .waste_items .waste_tab .waste_tab_in.mobile{display: none; } .waste_items .waste_tab ul{display: block; } .waste_items .waste_tab ul li{cursor:pointer; font-size:var(--fs16); color:rgba(34,34,34,.6); letter-spacing:-0.35pt; width:100%; height:50px; line-height:50px; border-radius:50px; padding:0 27px; box-sizing:border-box; background:var(--grayBg); text-align:left; margin:0 0 4px; transition:all .3s linear; } .waste_items .waste_tab ul li.focus{background:var(--main) !important; color:var(--white) !important; font-weight: 600 !important; } .waste_items .waste_tab ul li:hover{color:var(--main); } .waste_items .waste_box{width:calc(100% - 230px); } .waste_items .waste_box .waste_boxs{display:none; } .waste_items .waste_box .waste_boxs.focus{display:block; } .waste_items .table_style th{position:sticky; top:0; z-index: 2; transition:all .4s; } #header.fixed + #menuArea + #visual + #contents .waste_items .table_style th{top:115px; } .waste_cont{} .waste_cont .moreBtn{width: 220px; } .waste_cont .moreBtn:hover:before{transform:scale(20); } /* business02 */ /* business03 */ .business_area03{padding-top:110px} .business_area03:after{content: " "; visibility: hidden; display: block; height: 0; clear: both; } .business_area03 ul li{width:31.3333%; margin-right:3%; min-height:300px; float:left; text-align:justify; } .business_area03 ul li:nth-child(3n+3){margin-right:0} .business_area03 ul li .web_icon{width:100px; height:100px; margin-bottom:20px; background-color:#ddd; border-radius:50%; color:#fff; display:table; margin:0 auto} .business_area03 ul li .web_icon .material-icons{text-align:center; font-size:40px; display:table-cell; vertical-align:middle; margin-bottom:20px} .business_area03 ul li span{font-size:20px; color:#000; display:block; clear:both; padding-bottom:10px; margin-top:30px; text-align:center} .business_area03 ul li p{font-size:15px; text-align:center; line-height:1.6; word-break:keep-all} .business_area03 ul li .icon_img{text-align:center; padding-top:20px; display:block; } /* business03 */ /*R&D01*/ .rnd_area{width:100%; margin-top:110px; clear:both} .rnd_area .point{padding:0 20px 0 0px} .rnd_area .point p{font-size:22px; font-weight:bold; padding:0 0 20px 30px; color:#000; background-image:url(../img/title_icon.png); background-repeat:no-repeat; background-position:left 6px} .rnd_area .point h2{font-size:28px; font-weight:100; color:#f66120; padding:10px 0 20px 0; letter-spacing:-1px; line-height:1.6} .rnd_area .colum{max-width:1200px; margin:0 auto; padding: 0 20px 50px 0px; font-size:15px} .rnd_area .colum .left{width:50%; float:left; border-right:1px solid #ddd; padding-right:50px; line-height:1.8} .rnd_area .colum .left h2{font-size:20px; color:#000; letter-spacing:0; padding-bottom:20px; font-weight:bold} .rnd_area .colum .right{width:50%; float:left; padding-left:50px; line-height:1.8; text-align:left} .rnd_area .colum .right h2{font-size:20px; color:#000; letter-spacing:0; padding-bottom:20px; font-weight:bold} .rnd_area .img img{width:100%} .rnd_area .content_sub_title{margin:0 auto; padding:60px 20px 0 20px} .rnd_area .content_sub_title:after{content: " "; visibility: hidden; display: block; height: 0; padding-bottom:50px; clear: both; } .rnd_area .content_sub_title .sub_title{float:left; display: block; line-height:1.5; width:25%; color:#000; font-size:22px; letter-spacing:0; font-weight:bold; padding:0 0 20px 30px; color:#000; background-image:url(../img/title_icon.png); background-repeat:no-repeat; background-position:left 8px; box-sizing:border-box} .rnd_area .content_sub_title .sub_txt{float:right; width:75%; line-height:2.1; font-size:15px; word-break:keep-all} .rnd_area .content_sub_title .sub_txt .h2{font-size:20px; } .rnd_area .content_sub_title .img{float:left; text-align:right; width:450px} /*R&D01*/ /*R&D02*/ .rnd_area .box{padding-bottom:50px; clear:both} .rnd_area .box .img{max-width:50%; float:left; display:block} .rnd_area .box .img img{width:100%; min-height:375px} .rnd_area .box .txt{max-width:50%; float:left; padding:50px; display:block} .rnd_area .box .txt h2{font-size:24px; padding-top:50px; font-weight:bold; text-align: left; } .rnd_area .box .txt p{font-size:15px; line-height:1.6; padding-top:30px; word-break:keep-all} /*R&D02*/ /*R&D03*/ .rnd03_area{max-width:1200px; margin:110px auto 0 auto; padding:0px} .rnd03_area .box{width:31.3333%; margin-right:3%; display:block; float:left; } .rnd03_area .box:last-child{margin:0} .rnd03_area .box .img{width:100%; min-height:300px; background-image:url(../img/rnd03_thumb01.jpg); background-repeat:no-repeat; background-size:cover; clear:both; overflow:hidden; position:relative} .rnd03_area .box .txt{width:100%; text-align:left; clear:both} .rnd03_area .box .txt h2{font-size:20px; padding-top:30px; text-align:center; font-weight:bold} .rnd03_area .box .txt p{font-size:15px; padding:20px 0; color:#555; text-align:center; line-height:1.6} /*R&D03*/ /*product01*/ .product_area{max-width:1200px; margin-top:110px; font-size:15px; padding:0px; clear:both} .product_area .box{width:100%; padding-bottom:50px; clear:both} .product_area .box p{clear:both; font-size:15px; line-height:1.6} .product_area .box ul li{clear:both; padding-bottom:30px} .product_area .box ul li h2{font-size:18px; font-weight:bold; padding-bottom:10px; letter-spacing:0; display:block} .product_area .box ul li p{font-size:15px; line-height:1.6} .product_area .txt{width:50%; padding-right:40px; float:left; } .product_area .txt h2{font-size:40px; padding-bottom:50px; letter-spacing:-2px; word-break:keep-all; font-weight:bold; } .product_area .txt h2 span{color:#F60} .product_area .img{width:50%; height:500px; background-image:url(../img/product_area_thumb.jpg); background-repeat:no-repeat; background-size:cover; float:right} /*product01*/ @media screen and (max-width: 1020px) { .business_area{padding:0} .business_area .profile{max-width:1200px; margin:0 2% 0 2%} } @media screen and (max-width: 960px) { .greeting{overflow: hidden; } .greeting .img{height: 272px; margin-top: 36px; } .greeting .img{background:url(../img/bg_greeting.jpg) no-repeat 20%; background-size:cover; } .greeting .tit{position:relative; width:100%; height:auto; padding:0 50px 50px 0px; top:0; right:0; } .greeting .tit h3{font-size:22px; line-height:1.6em; } .greeting .tit h3 br{display:none; } .greeting .img:before{left:32%; width:700px; height:330px; margin-left:-276px; background-size:cover; } .greeting .colum .left{width:100%; clear:both} .greeting .colum .right{width:100%; padding-top:20px; clear:both} .company_info .work_page ul li{width:47%; margin-bottom:20px; margin-right: 0; margin-left: 2%; } .company_info .work_page ul li:last-child{margin-right:0} .company_info .work_page ul li:nth-child(2n+2){margin-right:0; } .company_info .Ideology dl{width:100%; padding-bottom:30px; clear:both} .business_area .box .img{text-align:center; display:block; float:none; clear:both} .business_area .box .img img{width:100%} .business_area .box .txt_wrap{width:100%; display:block; position:relative; clear:both} .business_area .colum .left .box .img img{width:100%} .business_area .list_wrap h2{padding-left:0} .business_area .list_wrap ul{padding-left:0; margin-left:0} .business_area .list_wrap ul li{padding-left:0; margin-left:0} .business_area03 ul li{width:50%; margin-right:0} .business_area03 ul li p{max-width:300px; margin:0 auto} .rnd_area .colum .left{width:100%; border:0; float:none; padding:0; clear:both} .rnd_area .colum .right{width:100%; padding:20px 0 0} .rnd_area .content_sub_title .sub_title{width:100%; clear:both} .rnd_area .content_sub_title .sub_txt{float:left; width:100%} .rnd_area .box .img{max-width:100%; display:block} .rnd_area .box .img img{width:100%; min-height:inherit} .rnd_area .box .txt{max-width:100%; } .rnd_area .box .txt h2{font-size:24px; font-weight:bold} .rnd_area .box .txt p{line-height:1.6; word-break:keep-all} .rnd03_area .box{width:100%; clear:both; float:none} .product_area .txt{width:100%; padding-bottom:20px} .product_area .img{width:100%; clear:both} } @media screen and (max-width: 640px) { .business_area .box .txt_wrap .txt{padding:0 0 50px} .business_area .box .txt_wrap .half-round-tit{padding:0 0 50px 0} .business_area .left{width:100%; float:none; margin:0; clear:both} .business_area .profile{max-width:100%; margin:0; clear:both; float:none} .business_area .list_wrap{float:none; width:100%; padding-left:20px} .business_area .right{width:100%; float:none; clear:both} .business_area03 ul li{width:100%; margin-right:0} .business_area03 ul li p{max-width:300px; margin:0 auto} .company_info .img_page{background-size:cover; height:300px} .company_info .work_page ul li{width:100%; float:none; margin-left:0; clear:both} .history_area .history_point{left: 10px; margin-left: 0; } .history_area dl{float: none !important; width: 100%; padding-right: 0; padding-left: 50px; text-align: left; } .history_area div:nth-child(odd) dl{/* padding-right: 0; */padding-left: 50px; } .history_area div + div{margin-top: 40px; } .history_area div:nth-child(2){margin-top: 0; } .history_area dt{margin-bottom: 20px; font-size:30px; } .history_area dd strong{font-size:15px; padding-bottom: 10px; } .history_area dd p br{display: none; } .history_area dd .img_box{margin-top: 20px; } .lineBox{padding:20px 0 40px; } .lineBox:before{width:30px; height:3px; margin-left: -15px; } .depTit{padding:0 0 10px 26px; line-height: 140%; } .depTit:before{width:20px; height:20px; } } /* 소개 */ #text_AA{display: flex; justify-content: flex-start; } #text_AA img{width:100%; border-radius: 15px; } #text_AA .aaa{padding: 0 30px 70px 0; width: 40%; } #text_AA .bbb{padding-left: 2%; width: 48%; } #text_AA .tit{font-family: 'Noto Sans KR', sans-serif; font-optical-sizing: auto; font-style: normal; font-size: 30px; margin: 10px 0 30px 0; font-weight: 500; letter-spacing: -1px; color: #2264ba; } #text_AA .tit2{font-family: 'Noto Sans KR', sans-serif; font-optical-sizing: auto; font-style: normal; font-size: 27px; margin: 56px 0 20px 0; font-weight: 500; letter-spacing: -1px; color: #4597a0; } #text_AA .bold{color: #A4383A; font-weight: 600; } #text_BB{display: flex; } #text_BB img{width:80%; border-radius: 15px; } #text_BB .aaa{text-align: center; padding: 0px 30px 70px 0; width: 46%; } #text_BB .bbb{padding-right: 2%; width: 48%; } #text_BB .tit{font-family: 'Noto Sans KR', sans-serif; font-optical-sizing: auto; font-style: normal; font-size: 30px; margin: 10px 0 30px 0; font-weight: 500; letter-spacing: -1px; color: #4597a0; } #text_BB .bold{color: #A4383A; font-weight: 600; } #text_CC{text-align: right; max-width: 1100px; } #text_CC .sign{font-size: 25px; font-weight: 500; } .history_t{display: flex; max-width: 1200px; margin: 20px auto 50px auto; } .history_t .p_left img{width: 400px; border-radius: 20px 150px 20px 150px; } /* 모바일 시작 */ @media screen and (max-width:950px) { #text_AA{display: flex; flex-direction: column; } #text_AA img{width: 100%; border-radius: 10px 10px 10px 10px; } #text_AA .tit2{margin: 0 0 20px 0; } #text_AA .aaa{width: 100%; margin: 0 0 20px 0; text-align: center; padding: 0px; } #text_AA .bbb{width: 100%; } #text_BB{display: flex; flex-direction: column; } #text_BB .aaa{width: 100%; padding: 40px 30px 30px 0; } #text_BB .bbb{width: 100%; } .fs26{color: brown; } .company_info{margin-top:-20px; } .company_info .Ideology{padding-bottom: 20px; } #text_BB img{width:100%; border-radius: 10px 10px 10px 10px; } } .pointTit{display: inline-block; min-width: 170px; font-size: 29px; font-weight: 700; color: #fff; letter-spacing: 0; background: #3db164; padding: 12px 49px; line-height: 120%; box-sizing: border-box; white-space: nowrap; border-radius: 40px; text-align: center; } /* 연혁 */ .history-list{overflow: hidden; position: relative; } .history-list .progressbar{position:absolute; top:0; left:50%; transform: translateX(-50%); width:2px; height:calc(100% - 40px); background-color:#ddd; overflow:hidden; z-index:1; } .history-list .progress{position: absolute; left:0; top:0; width:2px; height:0; background:var(--main); transition:.5s; } /*********** Top *************/ .history_top{background:url('/admin/bbs/skin/historyBasic/image/history_top.jpg') no-repeat center/cover; box-sizing:border-box; padding:168px 5%; text-align:center; } .history_top h3{color:#fff; word-break:keep-all; } .history_top p{font-weight: 900; color:#fff !important; padding: 0 0 10px; letter-spacing: -2px; font-size: 2em; } /*********** List *************/ .history_list{padding:60px 0 0; position: relative; max-width:1350px; width:90%; margin:0 auto; } .history_list .his_in{padding:0 0 10px; display: flex; justify-content: space-between; flex-direction: row-reverse; position:Relative; z-index:2; } .history_list .his_in > div{box-sizing:border-box; width:calc(50% - 70px); } .history_list .his_in .his_txt{text-align:left; position:Relative; } .history_list .his_in .his_txt::before{content:''; display:block; width:40px; height:1px; box-sizing:border-box; border-top:1px solid #ddd; position:absolute; left:-67px; top:19px; } .history_list .his_in .nam{font-size: larger; font-weight: 900; color: #447720; } .history_list .his_in .his_txt h4{position: relative; font-size:2.2222rem; color: #99ad8c; font-weight: 900; letter-spacing:0.02em; line-height:110%; } .history_list .his_in .his_txt h4:before{z-index:2; width:8px; height:8px; content: ''; display: block; background-color:var(--main); opacity:0.5; border-radius: 50%; position: absolute; left:-74px; top:16px; animation: dots 1.5s ease-in-out infinite; } .history_list .his_in .his_txt h4:after{z-index:3; content:''; display:block; width:8px; height:8px; background:var(--main); border-radius: 50%; position:absolute; left: -74px; top:16px; overflow: hidden; } .history_list .his_in .his_txt ul{margin: 14px 0 0; } .history_list .his_in .his_txt ul li{padding:0 0 5px 8px; box-sizing:border-box; font-size:1rem; line-height:1.66; letter-spacing:-0.03em; position: relative; } .history_list .his_in .his_txt ul li::After{content:''; display:block; width:3px; height:3px; background:var(--black); position:Absolute; left:0; top:13px; } .history_list .his_in .his_txt ul li:last-child{padding-bottom: 0 !important; } .history_list .his_in .his_txt ul li strong{position: absolute; left:0; top:0; letter-spacing: 0; font-weight: 700; color:var(--black); line-height: 150%; display: inline-block; font-family:var(--eng); } .history_list .his_in .his_img{margin: 20px 0 0; } .history_list .his_in .his_img img{max-width: 100%; height:auto !important; } .history_list .his_in:last-child{padding-bottom: 90px; } .history_list .his_in:nth-child(even){flex-direction:row; } .history_list .his_in:nth-child(even) .his_txt{text-align:right; } .history_list .his_in:nth-child(even) .his_txt::before{left:auto; right:-67px; } .history_list .his_in:nth-child(even) .his_txt h4::before{left:auto; right:-74px; } .history_list .his_in:nth-child(even) .his_txt h4::after{left:auto; right:-74px; } .history_list .his_in:nth-child(even) .his_txt ul li{padding: 0 8px 8px 0; } .history_list .his_in:nth-child(even) .his_txt ul li::after{left:Auto; right:0; } .history_list .his_in:nth-child(even) .his_txt ul li strong{left:auto; right:0; } @keyframes dots { 0%{opacity: 0.5; transform: scale(1); } 100%{opacity: 0; transform: scale(4); } } /********************241005추가***********************************************************     @media  ~980px                body,html{font-size:14px; }     3% *******************************************************************************/ @media all and (max-width:980px){ /*list*/ .history_list{padding:40px 0 0; } .history_list .his_in{padding:0 0 36px; } .history_list .his_in .his_txt{padding: 0 50px 0 0; } .history_list .his_in .his_txt h4{font-size:26px; padding:0 0 10px; } /*.history_list .his_in .his_txt h4:before{width:30px; right:-50px; top:16px; }*/ .history_list .his_in .his_txt .dot{top:12px; right:-54px; } .history_list .his_in:nth-child(odd) .his_txt{padding: 0 0 0 50px; } .history_list .his_in:nth-child(odd) .his_txt h4:before{left:-57px; } .history_list .his_in:nth-child(odd) .his_txt .dot{left:-54px; } } /*******************************************************************************     @media 481~680px *******************************************************************************/ @media all and (max-width:680px){ /**/ /*list*/ .history_list{padding:30px 0 0; } .history_list .his_in{padding:0 0 30px; } .history_list .his_in{flex-wrap:wrap; } .history_list .his_in > div{width:100%; } .history_list .his_in .his_txt{padding: 0 0 0 40px !important; text-align:left !important; } .history_list .his_in .his_txt h4{font-size:20px; padding:0 0 8px; } /*.history_list .his_in .his_txt h4:before{width:20px; right:auto !important; left:-30px !important; top:12px; }*/ .history_list .his_in .his_txt .dot{width:6px; height: 6px; top:10px; left:-32px !important; right:auto !important; } .history_list .his_in .his_txt .txt{padding:0 0 8px 30px !important; } .history_list .his_in .his_txt .txt strong{left:0 !important; right: auto !important; } .history-list .progressbar{left:10px; margin-left: 0; } .history_list .his_in:nth-child(even) .his_txt h4::after{left: -57px; right:auto; } } .history_top{position:relative; max-width: 1200px; margin: auto; height:295px; margin-top:0px; background:url(../img/history_t.jpg) no-repeat 50% 50%; background-size:cover; border-radius: 20px; } .history_top .point_txt{color: aliceblue; font-size: 45px; } .history_top .txt{color: aliceblue; font-size: 25px; } .history_wrap{display:flex; margin-top:40px; width:100%; padding:0 40px} .history_title{width:37%; margin-right:13%} .history_title .year{font-weight:700; color:#000; font-size:65px; font-family:sans-serif; } .history_title .year2{margin:-40px 0 0 0; text-align:right} .history_title .goal_tit{font-size:20px; padding-top:10px} .his_year_list{width:50%; padding-top:50px; overflow:hidden} .his_year_list li{width:100%; float:left; padding:0 0 10px 0} .his_year_list li:first-child{border-top:0; } .his_year_list li:after{content:""; display:block; clear:both} .his_year_list h4{float:left; font-family:sans-serif; width:17%; font-size:26px; display:inline-block; margin:0; text-align:left; vertical-align:top; font-weight:600; color:#FF5722; line-height:normal !important} .his_year_list li.tabmenu_ul{position:relative; float:left; width:88%; padding:10px 0 15px 0; margin-top:-3px} .his_year_list .year_wrap{float:left; width:75%; position:relative; margin-bottom:33px} .his_year_list .year_wrap:before{content:''; position:absolute; top: 2px; left: -8px; width:2px; height:100%; background:#efefef} .his_year_list .year_wrap dl dt.month{font-family:sans-serif; color:#203c92; display:inline-block; vertical-align:top; width:12%; font-weight:bold; float:left; font-size:20px; line-height:34px} .his_year_list .year_wrap dl dd.text{display:inline-block; width:88%; vertical-align:top; float:left; font-size:20px; line-height:34px; text-align:left; margin-top: 3px; } @media screen and (max-width:690px){ /******* mobile ******/ /* 연혁 */ .history_top {height:180px; padding: 72px 13%} .history_title{width:100%} .history_title .year{font-size:37px; line-height:43px} .history_title .year2{margin:0; text-align:left} .history_wrap{flex-wrap:wrap; padding:0 20px} .his_year_list h4{width:100%; font-size:24px; padding-bottom:8px} .his_year_list .year_wrap{width:100%} .his_year_list .year_wrap dl dt.month{width:100%} .his_year_list .year_wrap dl dd.text{width:100%} .history_top .point_txt{font-size: 26px; } .history_list .his_in .his_txt h4{font-size: 1.6em; } .location_con .map_in .one{width:100%; margin: 0 0 20px 0; } } /* 사업소개 */ .p_Con{max-width: 1200px; margin: 0 auto 50px auto; padding: 42px 0 20px 0; } .p_title{display: flex; font-size:26px; font-weight:400; color:#999; line-height:130%; box-sizing:border-box; position:relative; padding:14px 0 47px 0px; letter-spacing: -1.04px; } .p_title .tit{margin: 2px 68px 0px 0px; } .p_title .tit strong{display:inline-block; color: #8b8480; font-weight: 200; } .p_title strong span{display:block; font-size:16px; color: #666; letter-spacing:-0.075em; font-weight: 400; margin-top: -10px; } .p_title .txt{width: calc(100% - 33.334%); font-size:20px; letter-spacing:-0.075em; color: #000; line-height:1.666em; font-weight: 400; } .p_title .txt strong{font-size: 20px; color: chocolate} .p_imgbox{display: flex; flex-wrap: wrap; } .p_imgbox .item{width: calc(100% / 2); padding: 7px; box-sizing: border-box; } .p_imgbox .item h2{font-size: 20px; margin: 20px auto 40px; text-align: center; font-weight: bold; } .p_imgbox .item img{width: 100%} .p_imgbox2{max-width: 1200px} .p_imgbox2 .item img{width: 100%} .p_imgbox3{max-width: 800px} .p_imgbox3 .item img{width: 100%} .p_title2{font-size: 35px; margin: 20px 0; font-weight: 400; color: #817979; font-family: 'GongGothicMedium'; letter-spacing: -1.6px; line-height: 125%; font-weight: 500; } #pr_cate{text-align: center; margin: 25px auto; } #pr_cate h2{position:absolute; font-size:0; line-height:0; overflow:hidden} #pr_cate ul:after{display:block; visibility:hidden; clear:both; content:""} #pr_cate li{display:inline-block; padding:0px; margin: 0px; width: 20%; } #pr_cate a{display:block; line-height:14px; padding:13px 25px; border:1px solid #d6e9ff; color:#393939; font-size: 14px; font-weight: 600; } #pr_cate a:focus, #pr_cate a:hover, #pr_cate a:active{text-decoration:none; background: #12a89d; ; color:#fff; } #pr_cate #pr_cate_on{z-index:2; background: #12a89d; ; color:#fff; font-weight:bold} @media screen and (max-width: 960px) { #pr_cate{margin: 15px auto; } #pr_cate ul{} #pr_cate li{; padding:0px; margin: 2px; width: 47%; } .p_title{flex-direction: column; } .p_title .tit{width: 100%; MARGIN-BOTTOM: 15PX; } .p_title .txt{width: 100%; } #pr_cate{text-align: left; } #pr_cate a{TEXT-ALIGN: center; } } /*********** List *************/ .bbs_con{width:100%; border-collapse:separate; border-spacing:0; font-size: 1.3em; } .bbs_con th{color:#333; font-weight:500; text-align:center; padding:18px 0; border-bottom:1px solid #333; border-top:2px solid #12a398; border-right:1px solid #ddd; background:#f0f0f0} .bbs_con td{padding:16px 17px; text-align:center; border-bottom:1px solid #ddd; border-right:1px solid #ddd; word-break:break-all; } .bbs_con .info{text-align: left; } .bbs_con td .left1{text-align:left; padding: 14px 15px 14px 10px; } .bbs_con tr th:last-child, .bbs_con tr td:last-child{border-right:none; } .bbs_con .mo_line{display: none; } .bbs_con td img{display:inline-block; margin:0 3px 2px 3px; vertical-align:middle; } .bbs_con td a.linkBtn{display:inline-block; border-radius:50%; line-height:120%; width:38px; height:38px; border:1px solid #999; transition:all 0.2s linear; text-align:center; background:url('/admin/bbs/skin/siteBasic/image/linkBtn.png') no-repeat center; opacity:0.6; } .bbs_con td a.linkBtn:hover{transition:all 0.2s linear; opacity:1; border-color:#333; } @media (max-width: 680px) { .bbs_con{overflow-x: auto; } } /*********** List *************/ .performance_con{min-width:600px; width:100%; border-collapse:separate; border-spacing:0; font-size: 1.3em; margin-bottom: 80px; } .performance_con th{color:#333; font-weight:500; text-align:center; padding:18px 0; border-bottom:1px solid #333; border-top:2px solid #12a398; border-right:1px solid #ddd; background:#f0f0f0} .performance_con th:nth-child(1){width:15%} .performance_con th:nth-child(2){width:40%} .performance_con th:nth-child(3){width:20%} .performance_con td:nth-child(2){text-align: left; padding:0 0 0 20px; } .performance_con td{padding:16px 17px; text-align:center; border-bottom:1px solid #ddd; border-right:1px solid #ddd; word-break:break-all; } .performance_con .info{text-align: left; } .performance_con td .left1{text-align:left; padding: 14px 15px 14px 10px; } .performance_con tr th:last-child, .performance_con tr td:last-child{border-right:none; } .performance_con .mo_line{display: none; } .performance_con td img{display:inline-block; margin:0 3px 2px 3px; vertical-align:middle; } .performance_con td a.linkBtn{display:inline-block; border-radius:50%; line-height:120%; width:38px; height:38px; border:1px solid #999; transition:all 0.2s linear; text-align:center; background:url('/admin/bbs/skin/siteBasic/image/linkBtn.png') no-repeat center; opacity:0.6; } .performance_con td a.linkBtn:hover{transition:all 0.2s linear; opacity:1; border-color:#333; } @media (max-width: 680px) { .performance{overflow-x:auto} .performance_con td{padding: 10px 8px; } .performance_con th:nth-child(1){width:10%} .performance_con th:nth-child(2){width:22%} .performance_con th:nth-child(3){width:50%} } #biz_warp{max-width: 1200px; margin: 20px auto; } #biz_warp a{text-decoration:none; } #biz_warp .lat_title a{width: 100px; margin:0px; } #biz_warp .imglist_ul{display: flex; flex-wrap: wrap; justify-content: space-between; } #biz_warp .imglist_ul .item{width: 32.5%; vertical-align:top; font-size:12px; text-align: center; border: 1px #e3e1e1 solid; margin-bottom: 30px; } #biz_warp a{display:block; width:auto; color:#333; } #biz_warp a .screen{position:relative; overflow:hidden; padding-top: 60%; } #biz_warp a .screen img{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; z-index:1; } #biz_warp a .screen span{display:block; position:absolute; transition:all .2s; background:#30d0c6; z-index:2; } #biz_warp a .screen span:nth-child(1){top:0; height:5px; width:0; } #biz_warp a .screen span:nth-child(2){top:0; right:0; width:5px; height:0; } #biz_warp a .screen span:nth-child(3){bottom:0; right:0; height:5px; width:0; } #biz_warp a .screen span:nth-child(4){bottom:0; left:0; width:5px; height:0; } #biz_warp a:hover .screen span:nth-child(1){width:100%; } #biz_warp a:hover .screen span:nth-child(2){height:100%; transition-delay:.05s; } #biz_warp a:hover .screen span:nth-child(3){width:100%; transition-delay:.1s; } #biz_warp a:hover .screen span:nth-child(4){height:100%; transition-delay:.2s; } #biz_warp a h3{margin:20px auto 10px auto; color: var(--main); font-size: 15px; letter-spacing: -1px; font-weight: 600; } #biz_warp a h3 span{color:#1A1A1A; font-size: 18px; font-weight: 700; padding-left: 10px; } .content_wrap .imgBox img{max-width: 100%; border-radius:20px; overflow: hidden; } .content_wrap .txtCon h2{margin: 0px 0 50px 0; text-align: center; letter-spacing:-1px; font-size: 44px; padding: 0; color: #5d5d5d; font-weight: 500; } .content_wrap .txtCon h5{margin: 0px 0 30px 0; letter-spacing:-1px; font-size: 34px; padding: 0; color: #5d5d5d; font-weight: 500; } .content_wrap .txtCon h3{margin: 0px 0 50px 0; text-align: center; font-size: 33px; padding: 0; } .content_wrap .yan_list{width: 90%; margin: 0 auto; } .yan_list{} .yan_list dl{display:flex; flex-wrap:wrap; } .yan_list dl dt{width:300px; box-sizing:border-box; padding:60px 50px 60px 0; } .yan_list dl dd{width:calc(100% - 300px); border-bottom: 1px solid #ddd; padding:60px 0; } .yan_list dl:last-child dd{border-bottom: 0; } .interview_list dl{display:flex; background: #f1eae5; padding:40px; border-radius:15px; border:1px solid #ddd; box-sizing:border-box; margin:0 0 10px; } .interview_list dl:last-child{margin:0; } .interview_list dl dt{width:430px; } .interview_list dl dt img{width: 100%; border-radius:20px; overflow: hidden; background-repeat:no-repeat; background-position:center; background-size:cover; } .interview_list dl dd{width: calc(100% - 430px); padding:0 0 0 50px; box-sizing:border-box; display:flex; flex-direction: column; justify-content: center; align-items: flex-start; } .interview_list dl dd .txt{margin:8px 0 0; } .content_wrap .txtCon .fs30{font-size: 27px; font-weight: 700; line-height: 130%; color: #4d4d4d; letter-spacing: -1pt; } .content_wrap .txtCon .txt{font-size: 17px; letter-spacing: -1px; line-height: 190%; font-weight: 400; } @media (max-width: 680px) { .yan_list{} .yan_list dl{flex-wrap:wrap; padding:15px 0; border-bottom:1px solid #ddd; } .yan_list dl:last-child{border-bottom:0; } .yan_list dl dt{width:100%; padding:0 0 6px; } .yan_list dl dd{width:100%; padding:0; border:0; } .interview_list dl{padding:15px; flex-wrap:wrap; } .interview_list dl dt{width:100%; } .interview_list dl dd{width:100%; padding:15px 0 0; } .interview_list dl dd .txt{margin:4px 0 0; } .content_wrap .txtCon h3{margin: 0px 0 50px 0; font-size:20px; padding: 0; } } /*사업소개*/ .bizpage_container{margin: auto; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .bizpage_container h4{margin: 0px 0 11px 0; text-align: left; letter-spacing:-1px; font-size: 22px; padding: 0; color: #5d5d5d; font-weight: 500; } .bizpage_content-section{padding: 20px; } .bizpage_image-text-wrapper{display: flex; align-items: flex-start; gap: 50px; } .bizpage_image-container{flex: 1.5; } .bizpage_image{width: 100%; border-radius: 8px; } .bizpage_text-container{flex: 1; } .bizpage_text-container h2{font-size: 24px; margin-bottom: 10px; } .bizpage_underline{width: 70px; height: 3px; background-color: #6f3c7c; margin: 10px 0 20px; } .bizpage_description{font-size: 18px; color: #555; margin-bottom: 30px; line-height: 1.8; } .bizpage_button-container{display: flex; gap: 10px; flex-wrap: wrap; } /* 버튼들을 래핑하도록 설정 */ .bizpage_button{padding: 18px 20px; border-radius: 19px; font-size: 18px; color: #fff; cursor: pointer; transition: background-color 0.3s; display: inline-flex; align-items: center; justify-content: center; flex: 1 1 calc(50% - 10px); box-sizing: border-box; } /* 버튼의 너비를 50%로 설정 */ .bizpage_button-1{background-color: #5ec5af; } .bizpage_button-2{background-color: #fb8f98; } .bizpage_button-3{background-color: #818181; } .bizpage_button-4{background-color: #3d7367; } .bizpage_button:hover{opacity: 0.8; } /* 반응형 레이아웃 */ @media (max-width: 768px) { .bizpage_image-text-wrapper{flex-direction: column; /* 이미지를 위로 이동 */ align-items: center; /* 정렬을 중앙으로 설정 */} .bizpage_image-container, .bizpage_text-container{flex: 1; /* 동일한 비율로 설정 */} .bizpage_button-container{gap: 10px; /* 버튼 간격을 유지 */} } /* ─────────────────────────────────────────────── 시공사례 ─────────────────────────────────────────────── */ .construction-tabs{display: flex; flex-direction: column; align-items: center; font-family: 'Segoe UI', sans-serif; margin: 40px; } .construction-tabs h1{margin-bottom: 20px; color: #2c3e50; } /* 라디오 버튼 숨기기 */ .construction-tabs input[type="radio"]{display: none; } /* 탭 라벨 컨테이너 정렬 및 스타일 */ .construction-tabs .tab-labels{display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; justify-content: center; } /* 기본 라벨 스타일 */ .construction-tabs .tab-labels label{padding: 10px 20px; background-color: #eee; border-radius: 5px; cursor: pointer; font-weight: bold; transition: background-color 0.3s, color 0.3s; } /* 활성 라벨 색상 */ .construction-tabs input#tab2018:checked ~ .tab-labels label[for="tab2018"], .construction-tabs input#tab2019:checked ~ .tab-labels label[for="tab2019"], .construction-tabs input#tab2020:checked ~ .tab-labels label[for="tab2020"], .construction-tabs input#tab2021:checked ~ .tab-labels label[for="tab2021"], .construction-tabs input#tab2022:checked ~ .tab-labels label[for="tab2022"], .construction-tabs input#tab2023:checked ~ .tab-labels label[for="tab2023"], .construction-tabs input#tab2024:checked ~ .tab-labels label[for="tab2024"]{background-color: #c38d58; color: #fff; } /* 탭 콘텐츠 숨기기 */ .construction-tabs .tab-content{display: none; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; /* iOS에서 부드러운 스크롤 */ } /* 선택된 콘텐츠 보이기 */ .construction-tabs input#tab2018:checked ~ .content2018, .construction-tabs input#tab2019:checked ~ .content2019, .construction-tabs input#tab2020:checked ~ .content2020, .construction-tabs input#tab2021:checked ~ .content2021, .construction-tabs input#tab2022:checked ~ .content2022, .construction-tabs input#tab2023:checked ~ .content2023, .construction-tabs input#tab2024:checked ~ .content2024{display: block; } /* 테이블 스타일 */ .construction-tabs .construction-table{width: 100%; border-collapse: collapse; margin-bottom: 30px; } .construction-tabs .construction-table th, .construction-tabs .construction-table td{border: 1px solid #ccc; padding: 8px 12px; text-align: left; } .construction-tabs .construction-table th{background-color: #5c5956; color: white; } .construction-tabs .construction-table tr:nth-child(even){background-color: #f2f2f2; } /* 기본 변수 설정 */ :root{--primary: #c48b53; --tab-inactive: #eeeeee; --text-dark: #3a2f28; --text-light: #ffffff; } /* 전체 레이아웃 */ .inditab-container{max-width: 1230px; /* 수정된 부분 */ margin: 0 auto; padding: 40px 20px; font-family: 'Malgun Gothic', sans-serif; } /* 제목 스타일 */ .inditab-title{font-size: 2rem; font-weight: 700; margin-bottom: 20px; text-align: center; color: var(--text-dark); } /* 탭 메뉴 스타일 (원래 크기로 복원) */ .inditab-tabmenu{display: flex; gap: 6px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 30px; scrollbar-width: thin; flex-wrap: wrap; } .inditab-tabmenu::-webkit-scrollbar{height: 6px; } .inditab-tabmenu::-webkit-scrollbar-thumb{background: #aaa; border-radius: 3px; } .inditab-tab{padding: 8px 16px; /* 원래 크기로 복원 */ background: var(--tab-inactive); border-radius: 6px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all 0.3s; font-size: 14px; /* 기본 글씨 크기 */} .inditab-tab:hover{background: #dddddd; } .inditab-tab.active{background: var(--primary); color: var(--text-light); } /* 이미지 슬라이더 스타일 */ .inditab-swiper{width: 100%; max-width: 1230px; height: auto; /* 세로는 이미지 비율에 맞춰 자동 조정 */ margin: 0 auto; overflow: hidden; /* 내용물 넘침 방지 */} .inditab-swiper img{width: 100%; height: 100%; object-fit: cover; } /* 이미지 스타일 (비율 유지 + 짤림 방지) */ .swiper-slide{display: flex; justify-content: center; background: #f5f5f5; /* 배경색 (선택 사항) */} /* 개선된 화살표 스타일 */ .inditab-container .custom-arrow{width: 50px; height: 50px; background: white; border-radius: 50%; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s; } .inditab-container .custom-arrow:hover{background: var(--primary); } .inditab-container .custom-arrow::after{content: ''; width: 15px; height: 15px; border-top: 3px solid var(--primary); border-right: 3px solid var(--primary); transform: rotate(45deg); transition: all 0.3s; } .inditab-container .custom-arrow:hover::after{border-color: white; } .inditab-container .custom-prev{left: -60px; } .inditab-container .custom-next{right: -60px; } .inditab-container .custom-next::after{transform: rotate(45deg); } .inditab-container .custom-prev::after{transform: rotate(-135deg); } /* 반응형 조정 */ @media (max-width: 768px) { .inditab-tab{padding: 6px 12px; /* 모바일에서 탭 크기 조정 */ font-size: 13px; } .inditab-swiper{height: auto; } .inditab-container .custom-arrow{width: 40px; height: 40px; } .inditab-container .custom-prev{left: -50px; } .inditab-container .custom-next{right: -50px; } .construction-tabs { margin: 3px;} } .landcom-container{max-width:1000px;margin:80px auto;padding:0 20px;display:flex;flex-wrap:wrap;align-items:center;gap:40px;} .landcom-image{flex:1;min-width:300px;border-radius:8px;overflow:hidden;} .landcom-image img{width:100%;height:auto;display:block;} .landcom-content{flex:1;min-width:300px;} .landcom-title{font-size:1.8rem;font-weight:700;color:#2c3e50;margin-bottom:1rem;} .landcom-description{font-size:1rem;color:#555;} @media(max-width:768px){.landcom-container{flex-direction:column;gap:30px;}} .business-container{border-radius:200px;background:rgba(15,83,168,0.1);box-shadow:0 15px 40px rgba(0,0,0,0.1);padding:40px;max-width:1230px;width:100%;} .section-title{font-size:2rem;font-weight:700;text-align:center;margin-bottom:40px;color:#2c3e50;position:relative;} .section-title:after{content:'';display:block;width:60px;height:3px;background:#3498db;margin:15px auto 0;} .business-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:25px;margin-top:30px;} .business-item{background:#fff;border-radius:50%;width:200px;height:200px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:20px;box-shadow:0 5px 15px rgba(0,0,0,0.08);margin:0 auto;transition:all 0.3s ease;border:2px solid #f1f5f9;} .business-item:hover{transform:translateY(-10px);box-shadow:0 15px 30px rgba(0,0,0,0.15);border-color:#3498db;} .business-icon{font-size:2rem;margin-bottom:12px;color:#e74c3c;} .business-item h4{font-size:1rem;font-weight:600;color:#2c3e50;margin-bottom:5px;} .business-item p{font-size:0.8rem;color:#7f8c8d;} .business-tag{display:inline-block;background:#3498db;color:#fff;padding:12px 30px;border-radius:30px;font-size:1.2rem;margin-top:40px;font-weight:500;text-align:center;box-shadow:0 5px 15px rgba(0,0,0,0.1);} .business-icon img{height:50px;} @media(max-width:768px){ .business-container{padding:30px 20px;} .business-icon img{height:30px;} .business-item h4{font-size:0.8rem;} .section-title{font-size:1.6rem;} .business-grid{grid-template-columns:repeat(3,1fr);gap:1px;} .business-item{width:120px;height:120px;} } @media(max-width:480px){.business-grid{grid-template-columns:1fr;}.business-item{width:140px;height:140px;}} .section-title{font-size:32px;font-weight:700;text-align:center;margin:60px 0 40px;} .location-wrapper{display:flex;gap:40px;justify-content:center;flex-wrap:wrap;max-width:1200px;margin:0 auto;padding:0 20px;} .location-box{flex:1 1 500px;background:#fff;padding:20px;box-sizing:border-box;} .location-box h2{font-size:20px;font-weight:700;margin-bottom:10px;} .location-box p{font-size:18px;color:#333;margin:5px 0 10px;line-height:1.5;} .location-box strong{font-weight:700;color:#000;} .map-frame{width:100%;max-width:640px;height:auto;margin-top:10px;border:1px solid #ccc;border-radius:8px;overflow:hidden;box-sizing:border-box;} .root_daum_roughmap_landing{width:100%!important;max-width:100%!important;height:auto!important;} .root_daum_roughmap .wrap_map{width:100%!important;max-width:100%!important;} .section_address{display:none!important;} @media(max-width:768px){ .map-frame{max-width:100%;} .location-wrapper{flex-direction:column;} .location-box{padding:10px;} .section-title{font-size:24px;} } .rolling-tab-wrapper{font-family:"Noto Sans KR",sans-serif;text-align:center;margin:50px auto;max-width:1200px;} .rolling-tab-menu{display:flex;justify-content:center;gap:5px;margin-bottom:20px;} .rolling-tab-item{padding:15px 30px;width:30%;background:#fff;border:1px solid #ccc;font-weight:bold;cursor:pointer;transition:background 0.3s;color:#333;} .rolling-tab-item.active{background:#0051a4;color:#fff;border-color:#0051a4;} .rolling-tab-content{display:none;animation:rolling-tab-fade 1s ease;} .rolling-tab-content.active{display:block;} .rolling-tab-title{font-size:28px;font-weight:700;margin:50px;} .rolling-tab-desc{font-size:16px;color:#444;max-width:800px;margin:0 auto 40px;line-height:1.6;} .rolling-tab-desc b{color:#0051a4;} .rolling-tab-img{max-width:90%;height:auto;margin:0 auto;display:block;} @keyframes rolling-tab-fade{from{opacity:0;}to{opacity:1;}} .tl-container {max-width:1200px; margin: 80px 0 0 30%; display:grid; grid-template-columns:200px 1fr; gap:20px; position:relative;} .tl-container::before {content:""; position:absolute; top:-80px; left:230px; width:2px; height:103%; background:#ccc; z-index:0;} .tl-year {padding:20px 10px 0 0;font: 700 31px/1 'Noto Sans KR',sans-serif;color: #00848c;text-align:right;} .tl-event {position:relative; padding:20px 20px 20px 50px;} .tl-event::before {content:""; position:absolute; top:28px; left:6px; width:10px; height:10px; background:#62b30c; border-radius:50%; z-index:1;} .tl-date {font:700 16px/1.4 'Noto Sans KR',sans-serif; color:#07f;} .tl-desc {font-size:15px; color:#444; margin-top:4px;} .tl-image {margin-top:10px;} .tl-image img {max-width:100%; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,0.1);} /* 반응형 */ @media(max-width:768px){ .tl-container {grid-template-columns:1fr; margin: 0 0 0 50px; } .tl-container::before {left:-16px;} .tl-year {text-align:left; padding:20px 0 0 10px;} .tl-event {padding-left:40px;} .tl-event::before {left:-20px;} } /* 제이스틸 사업분야 */ .cutting-wrap{margin:0;padding:0;background:#fff;color:#111} .cutting-wrap .cutting-container{max-width:1230px;margin:0 auto;padding:60px 20px} .cutting-wrap .cutting-section{display:flex;flex-wrap:wrap;gap:60px;align-items:flex-start} .cutting-wrap .cutting-section img{max-width:100%;border-radius:12px;flex: 0 1 430px;} .cutting-wrap .text-box{flex:1 1 480px} .cutting-wrap .title{font-size:36px;font-weight:800; color:#ff7800} .cutting-wrap .desc{font-size:16px;line-height:1.7;margin-bottom:30px;color:#444;white-space:pre-line} .cutting-wrap .features{margin-top:20px;padding:20px;background:#f9f9f9;border-radius:10px;font-size:15px;line-height:1.6} .cutting-wrap .features-title{font-weight:700;margin-bottom:16px;background:#0ea2b8;color:#fff;padding:6px 12px;display:inline-block;border-radius:6px;font-size:14px} .cutting-wrap .feature-item{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:10px} .cutting-wrap .material-symbols-outlined{font-size:18px;color:#1a4cb0;vertical-align:middle} .flowchart-wrap * { box-sizing: border-box; } .flowchart-wrap {max-width: 1200px; margin: 0 auto; padding: 20px; position: relative; font-family: 'Noto Sans KR', sans-serif; background: #f0f4f8; color: #222;} .flowchart-wrap .flowchart-step {display: flex; align-items: stretch; background: #fff; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.08); margin-bottom: 0px; overflow: hidden; position: relative; min-height: 160px;} .flowchart-wrap .step-title {flex: 0 0 160px; color: #fff; font-size: 20px; font-weight: 700; text-align: center; padding: 30px 10px; border-right: 2px solid #ccc; display: flex; align-items: center; justify-content: center;} .flowchart-wrap .step-desc {flex: 1; padding: 30px 30px; font-size: 16px; line-height: 1.7; color: #444; background: #f8fafc; display: flex; align-items: center;} .flowchart-wrap .step-desc ul {margin: 0; padding-left: 20px;} .flowchart-wrap .step-desc li {margin-bottom: 6px;} .flowchart-wrap .step-desc li:last-child {margin-bottom: 0;} .flowchart-wrap .step-title.step-1 {background: #4f81bd;} .flowchart-wrap .step-title.step-2 {background: #5a9ec9;} .flowchart-wrap .step-title.step-3 {background: #66b2b2;} .flowchart-wrap .step-title.step-4 {background: #70bf90;} .flowchart-wrap .step-title.step-5 {background: #78c86d;} .flowchart-wrap .step-title.step-6 {background: #80d250;} .flowchart-wrap .arrow-icon { display: flex; justify-content: center; align-items: center; margin: -10px auto 3px; } .flowchart-wrap .arrow-icon .material-symbols-outlined { font-size: 72px !important; line-height: 1 !important; color: #0077cc !important; } @media (max-width: 768px) { .flowchart-wrap { padding: 10px; } .flowchart-wrap .flowchart-step { flex-direction: column; min-height: auto; } .flowchart-wrap .step-title { border-right: none; border-bottom: 2px solid #ccc; width: 100%; padding: 20px; font-size: 18px; } .flowchart-wrap .step-desc { padding: 20px; font-size: 15px; } .flowchart-wrap .arrow-icon .material-symbols-outlined { font-size: 56px !important; } } .features .imgBox2 img{width: 100%; }