/* 사업장주소 */ #sub .address_box { margin:0 0 -200px; } #sub .address_box .map { position:relative; } #sub .address_box .map iframe { width:100%; height:490px; } #sub .address_box .map .box { padding:22px 25px 25px; box-sizing:border-box; max-width:307px; width:100%; background-image:linear-gradient(to bottom, #004098, #131169); position:absolute; top:50%; right:40px; transform:translate(0,-50%) translateX(30px); transition-duration:1s; opacity:0; } #sub .address_box .map .box.on { transition-duration:1s; opacity:1; transform:translate(0,-50%) translateX(0); } #sub .address_box .map .box p { color:#fff; font-size:17px; line-height:30px; font-weight:300; padding:0 0 20px; } #sub .address_box .map .box p b { font-weight:500; } #sub .address_box .map .box ul { } #sub .address_box .map .box ul li { margin:13px 0 0; background-color:#fff; } #sub .address_box .map .box ul li a { display:block; text-align:center; padding:13px 0; } #sub .address_box .map .box ul li a:hover { background-color:#f7fafd; } #sub .address_box .map .box ul li a img { vertical-align:middle; } #sub .address_box .map .box ul li a img.sns { height:20px !important; margin:0 6px 3px 0; } #sub .address_box .map .box ul li a img.link { height:13px !important; margin:0 0 3px 6px; } #sub .address_box .map .box ul li a span { font-size:16px; font-weight:500; color:#333; } #sub .address_box .inquire { background-image:url('../img/sub/inquire_bg.jpg'); background-size:cover; background-repeat:no-repeat; background-position:center; padding:90px 0 120px; margin:130px 0 0; position:relative; } #sub .address_box .inquire:after { width:181px; height:181px; content:''; background-color:#302825; display:block; position:absolute; left:-90px; bottom:-90px; transform:rotate(45deg); z-index:10; background-image:url('../img/sub/inquire_decobg.jpg'); background-size:cover; background-repeat:no-repeat; background-position:center; } #sub .address_box .inquire .title { text-align:center; padding:0 0 70px; } #sub .address_box .inquire .title p { font-size:36px; font-weight:300; color:#fff; padding:0 0 20px; } #sub .address_box .inquire .title span { font-size:17px; font-weight:300; color:#fff; } #sub .address_box .inquire .box { overflow:hidden; padding:0 45px; box-sizing:border-box; } #sub .address_box .inquire .box .div { width:50%; float:left; padding:0 25px; box-sizing:border-box; } #sub .address_box .inquire .box .div input { font-size:16px; margin:15px 0 0; font-weight:300; color:#fff; width:100%; height:70px; background-color:rgba(0,0,0,0); border:0; border-bottom:1px solid #fff; } #sub .address_box .inquire .box .div input.first { margin:0; } #sub .address_box .inquire .box .div input::placeholder { color:#fff; } #sub .address_box .inquire .box .div textarea { font-size:16px; color:#fff; font-weight:300; background-color:rgba(255,255,255,0.1); width:100%; height:171px; overflow:auto; padding:12px; box-sizing:border-box; } #sub .address_box .inquire .box .div input:focus { outline:none; } #sub .address_box .inquire .box .div textarea:focus { outline:none; } #sub .address_box .inquire .box .div textarea::placeholder { color:#fff; } #sub .address_box .inquire .box .div span { color:#fff; font-size:16px; font-weight:300; display:block; padding:22px 0 23px; } #sub .address_box .inquire .box .btn { text-align:center; padding: 0 0 20px; clear: both; } #sub .address_box .inquire .box .btn button { margin:55px auto 0; background-color:rgba(14,43,109,0.95); color:#fff; font-weight:500; width:300px; line-height:60px; font-size:20px; position:relative; } #sub .address_box .inquire .box .btn button:after { width:15px; height:15px; transform:skewX(45deg) rotate(45deg); display:block; content:''; position:absolute; bottom:-8px; right:3px; background-color:rgba(14,43,109,0.95); } /* 회사 소개 */ #sub .about_box .graph_wrap { text-align:center; } #sub .about_box .graph { position:relative; display:inline-block; opacity:0; transform:translateY(50px); transition-duration:1s; } #sub .about_box .graph img { } #sub .about_box .graph .one { width:45%; background-color:#004098; position:absolute; top:calc(50% + 17px); left:50%; transform:translate(-50%,-50%); border-radius:50%; animation:graphone 1s linear infinite; z-index:-1; opacity:0.2; } #sub .about_box .graph .one:after { display:block; content:''; padding-bottom:100%; } #sub .about_box .graph_wrap.on .graph { opacity:1; transform:translateY(0); transition-duration:1s; } @keyframes graphone { 0% { width:42%; height:42%; } 30% { width:33%; height:33%; } 80% { width:40%; height:40%; } 100% { width:42%; height:42%; } } /* 원전분야 사업 */ #sub .nnuclear_box .graph { text-align:center; margin:70px 0 0; } #sub .nnuclear_box .graph img { } #sub .nnuclear_box .graph .moimg { padding:0 0 40px; } #sub .nnuclear_box .graph .moimg .activity { position:relative; width:70%; margin:0 auto 30px; background-color:#f1f1f1; border-radius:100%; border:1px solid #ccc; max-width:280px; } #sub .nnuclear_box .graph .moimg .activity:after { display:block; content:''; padding-bottom:100%; } #sub .nnuclear_box .graph .moimg .activity:before { display:block; content:''; position:absolute; top:50%; left:50%; width:75%; transform:translate(-50%,-50%); height:75%; background-color:#fcfcfc; border-radius:50%; border:1px solid #ddd; } #sub .nnuclear_box .graph .moimg .activity span { font-size:30px; position:absolute; top:50%; left:0; width:100%; transform:translate(0,-50%); } #sub .nnuclear_box .graph .moimg .txt { text-align:left; } #sub .nnuclear_box .graph .moimg .txt > ul { } #sub .nnuclear_box .graph .moimg .txt > ul > li { margin:20px 0 0; } #sub .nnuclear_box .graph .moimg .txt > ul > li > p { font-size:16px; padding:10px; box-sizing:border-box; margin:0; color:#fff; } #sub .nnuclear_box .graph .moimg .txt > ul > li:nth-child(1) p { background-color:#ff77b8; border:1px solid #ff77b8; } #sub .nnuclear_box .graph .moimg .txt > ul > li:nth-child(2) p { background-color:#8f5eca; border:1px solid #8f5eca; } #sub .nnuclear_box .graph .moimg .txt > ul > li:nth-child(3) p { background-color:#695caf; border:1px solid #695caf; } #sub .nnuclear_box .graph .moimg .txt > ul > li:nth-child(4) p { background-color:#5268af; border:1px solid #5268af; color:#fff; } #sub .nnuclear_box .graph .moimg .txt > ul > li:nth-child(5) p { background-color:#b272c9; border:1px solid #b272c9; } #sub .nnuclear_box .graph .moimg .txt > ul > li:nth-child(6) p { background-color:#ef72d2; border:1px solid #ef72d2; } #sub .nnuclear_box .graph .moimg .txt > ul > li > ul { border:1px dashed #dedede; padding:10px 0 15px; border-top:0; } #sub .nnuclear_box .graph .moimg .txt > ul > li > ul > li { } #sub .nnuclear_box .graph .moimg .txt > ul > li > ul > li > span { color:#555; font-size:15px; display:block; padding:3px 0 3px 10px; box-sizing:border-box; } #sub .nnuclear_box .infomation { } #sub .nnuclear_box .infomation ul { overflow:hidden; padding:0 8% 35px; box-sizing:border-box; } #sub .nnuclear_box .infomation ul li { float:left; min-height:260px; width:33.3%; text-align:center; } #sub .nnuclear_box .infomation ul li img { } #sub .nnuclear_box .infomation ul li span { display:block; text-align:center; font-size:15px; line-height:23px; color:#222; font-weight:300; padding:10px 0 0; } #sub .nnuclear_box .img { text-align:center; padding:0 0 30px; } #sub .nnuclear_box .nims { overflow:hidden; margin:0 -1%; } #sub .nnuclear_box .nims div { float:left; width:48%; margin:0 1%; } #sub .nnuclear_box .nims div img { } /* 연구분야사업 */ #sub .research_box { } #sub .research_box ol { text-align:center; padding:0 6.5%; box-sizing:border-box; } #sub .research_box ol li { width:20%; display:inline-block; margin:0 -1%; position:relative; background-color:#ddd; border-radius:100%; background-color:rgba(145,145,145,0.96); opacity:0; transform:translateY(50px); transition-duration:0.5s; } #sub .research_box ol.on li { opacity:1; transform:translateY(0); transition-duration:0.7s; } #sub .research_box ol.on li:nth-child(1) { transition-delay:0s; } #sub .research_box ol.on li:nth-child(2) { transition-delay:0.15s; } #sub .research_box ol.on li:nth-child(3) { transition-delay:0.3s; } #sub .research_box ol.on li:nth-child(4) { transition-delay:0.45s; } #sub .research_box ol.on li:nth-child(5) { transition-delay:0.6s; } #sub .research_box ol li:nth-child(odd) { background-color:rgba(34,114,190,0.96); } #sub .research_box ol li:after { display:block; content:''; padding-bottom:100%; } #sub .research_box ol li div { position:absolute; top:50%; left:0; transform:translate(0,-50%); text-align:center; width:100%; font-size:17px; font-weight:300; line-height:32px; color:#fff; } #sub .research_box iframe { height:676px; width:100%; } #sub .research_box ul { margin:0 -1%; overflow:hidden; padding:40px 0 0; } #sub .research_box ul li { float:left; width:48%; margin:0 1%; position:relative; overflow:hidden; } #sub .research_box ul li .bg { background-size:cover; background-repeat:no-repeat; background-position:center; width:100%; height:100%; position:absolute; top:0; left:0; transition-duration:0.5s; } #sub .research_box ul li a { line-height:90px; display:block; font-size:24px; font-weight:300; color:#fff; text-align:center; position:relative; transition-duration:0.5s; } #sub .research_box ul li a:after { width:30px; height:30px; content:''; background-color:#fff; display:block; position:absolute; right:-15px; top:-15px; transform:rotate(45deg); z-index:11; } #sub .research_box ul li:hover .bg { transform:scale(1.07); transition-duration:0.5s; } #sub .research_box ul li.smart .bg { background-image:url('../img/sub/btn_research1.jpg'); } #sub .research_box ul li.farm .bg { background-image:url('../img/sub/btn_research2.jpg'); } #sub .research_box ul li a img { height:18px !important; vertical-align:middle; margin:0 0 5px 8px; } #sub .research1_box ul.product { overflow:hidden; margin:0 -1.5%; } #sub .research1_box ul.product li { width:30.33%; float:left; margin:0 1.5%; border:1px solid #205091; padding:45px 30px 0; box-sizing:border-box; opacity:0; transform:translateY(100px); transition-duration:0.5s; } #sub .research1_box ul.product.on li { opacity:1; transform:translateY(0); transition-duration:0.7s; } #sub .research1_box ul.product.on li:nth-child(1) { transition-delay:0s; } #sub .research1_box ul.product.on li:nth-child(2) { transition-delay:0.15s; } #sub .research1_box ul.product.on li:nth-child(3) { transition-delay:0.3s; } #sub .research1_box ul.product li .icon { width:80%; max-width:222px; background-color:#205091; position:relative; border-radius:100%; margin:0 auto 30px; } #sub .research1_box ul.product li .icon:after { display:block; content:''; padding-bottom:100%; } #sub .research1_box ul.product li .icon img { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } #sub .research1_box ul.product li.num1 .icon img { height:75px !important; } #sub .research1_box ul.product li.num2 .icon img, #sub .research1_box ul.product li.num3 .icon img { height:94px !important; } #sub .research1_box ul.product li .txt { min-height:170px; } #sub .research1_box ul.product li .txt span { font-size:18px; font-weight:300; color:#222; line-height:28px; display:block; position:relative; padding:0 0 5px 13px; } #sub .research1_box ul.product li .txt span:after { display:block; content:''; width:3px; height:3px; background-color:#004098; border-radius:50%; position:absolute; top:13px; left:0; } #sub .research1_box .characteristic { overflow:hidden; } #sub .research1_box .characteristic div { width:50%; float:left; } #sub .research1_box .characteristic div:first-child { padding:0 10px 0 0; box-sizing:border-box; } #sub .research1_box .characteristic div:last-child { padding:0 0 0 10px; box-sizing:border-box; } #sub .research1_box div.product { background-color:#f5f5f5; padding:40px 0 65px; } #sub .research1_box div.product .imgtxtwrap { overflow:hidden; margin:0 0 60px; } #sub .research1_box div.product .img { width:600px; float:left; } #sub .research1_box div.product .img img { } #sub .research1_box div.product .txt { width:calc(100% - 600px); float:left; } #sub .research1_box div.product .txt ol { } #sub .research1_box div.product .txt ol li { background-color:#fff; padding:20px; box-sizing:border-box; margin:10px 0 0; } #sub .research1_box div.product .txt ol li p { font-size:24px; color:#222; font-weight:300; position:relative; } #sub .research1_box div.product .txt ol li p b { display:inline-block; width:27px; height:27px; color:#fff; font-weight:700; font-size:18px; background-color:#205091; border-radius:50%; text-align:center; margin:0 5px 0 0; position:absolute; top:6px; left:0; } #sub .research1_box div.product .txt ol li span { font-size:18px; font-weight:300; color:#222; display:block; margin:2px 0 0; } #sub .research1_box .characteristic div p.textp { margin:0 0 20px; } #sub .research1_box div.product .txt ol li p, #sub .research1_box div.product .txt ol li span { padding:0 0 0 35px; } @media screen and (max-width:1500px) { #sub .address_box .inquire:after { bottom:-71px; } } @media screen and (max-width:1280px) { #sub .research_box ol { padding:0 1%; } #sub .research1_box ul.product li .txt { min-height:200px; } #sub .research1_box .table colgroup { display:none; } #sub .address_box .inquire:after { width:90px; height:90px; bottom:-25px; left:-53px; } #sub .research1_box div.product .txt ol li p { font-size:20px; } #sub .research1_box div.product .txt ol li p b { width:20px; height:20px; font-size:13px; font-weight:400; } #sub .research1_box div.product .txt ol li p, #sub .research1_box div.product .txt ol li span { padding:0 0 0 28px; } #sub .research1_box div.product .txt ol li span { font-size:16px; } #sub .research1_box div.product .img { width:550px; } #sub .research1_box div.product .txt { width:calc(100% - 550px); } } @media screen and (max-width:1024px) { #sub .nnuclear_box .infomation ul { padding:0 0 35px; } #sub .research_box ol { padding:0 0 40px; } #sub .research_box ol li { margin:0 -20px -30px; width:50%; max-width:300px; } #sub .research_box ol li:nth-child(3) { background-color:rgba(145,145,145,0.96); } #sub .research_box ol li:nth-child(4) { background-color:rgba(34,114,190,0.96); } #sub .research_box ol li div { font-size:20px; line-height:29px; } #sub .research_box iframe { height:500px !important; } #sub .address_box .inquire .box { padding:0; } #sub .address_box .inquire .box .div { padding:0 15px; } #sub .research1_box ul.product li { padding:25px 15px 0; } #sub .research1_box ul.product li .txt span { font-size:16px; line-height:26px; } #sub .research1_box ul.product li.num1 .icon img { height:50px !important; } #sub .research1_box ul.product li.num2 .icon img, #sub .research1_box ul.product li.num3 .icon img { height:62px !important; } #sub .research1_box div.product .img { width:380px; } #sub .research1_box div.product .txt { width:calc(100% - 380px); padding:0 0 0 30px; box-sizing:border-box; } #sub .about_box .graph img { width:100%; } #sub .address_box .inquire:after { bottom:-5px; } } @media screen and (max-width:768px) { #sub .nnuclear_box .infomation ul li { width:50%; } #sub .research_box iframe { height:400px !important; } #sub .research_box ul li a { font-size:18px; line-height:70px; } #sub .research_box ul li a img { height:15px !important; } #sub .research_box ul { padding:20px 0 0; } #sub .address_box .map .box { position:static; top:auto; transform:none; right:auto; max-width:100%; margin:10px 0 0; padding:20px; } #sub .address_box .map .box.on { transform:translateX(0); } #sub .address_box .map .box p br { display:none; } #sub .address_box .map .box p br.mobileblock { display:block; } #sub .address_box .inquire:after { width:60px; height:60px; bottom:10px; left:-44px; } #sub .address_box .inquire .title p { font-size:30px; } #sub .address_box .inquire { padding:70px 0 130px; } #sub .address_box .map iframe { height:360px; } #sub .research1_box ul.product li .txt span { font-size:15px; line-height:25px; } #sub .research1_box ul.product li .txt { min-height:215px; } #sub .research1_box .mobile_table_wrap { overflow-x:auto; } #sub .research1_box .mobile_table { width:800px; } #sub .research1_box div.product .img { width:100%; text-align:center; padding:0 0 50px; } #sub .research1_box div.product .txt { width:100%; padding:0; } #sub .research1_box div.product .txt ol li { padding:15px 20px 17px; } #sub .research1_box div.product .txt ol li p { font-size:18px; } #sub .research1_box div.product .txt ol li p b { width:18px; height:18px; font-size:12px; line-height:18px; font-weight:400; margin:-1px 10px 0px 0; } #sub .research1_box div.product .txt ol li span { font-size:15px; } } @media screen and (max-width:640px) { #sub .about_box .graph .one { display:none; } #sub .nnuclear_box .infomation ul li { width:100%; margin:10px 0 30px; min-height:inherit; } #sub .nnuclear_box .nims { margin:0 } #sub .nnuclear_box .nims div { width:100%; margin:0; } #sub .nnuclear_box .infomation ul li img { width:100%; } #sub .research_box ol li { width:calc(50% + 10px); margin:0 -10px -20px; } #sub .research_box ol li div { font-size:17px; line-height:26px; padding:0 10px; box-sizing:border-box; } #sub .research_box iframe { height:300px !important; } #sub .research_box ul li a { font-size:17px; line-height:60px; } #sub .nnuclear_box .infomation ul { padding:0 0 15px; } #sub .address_box .map .box p { font-size:16px; line-height:26px; } #sub .address_box .inquire .title { padding:0 0 20px; } #sub .address_box .inquire .box .div { width:100%; padding:30px 0 0; } #sub .address_box .inquire .box .btn button { width:100%; margin:25px auto 0; font-size:18px; } #sub .address_box .inquire:after { bottom:50px; } #sub .address_box .inquire .box .div input { height:60px; font-size:15px; } #sub .address_box .inquire .box .div textarea { font-size:15px; } #sub .address_box .inquire .title span { font-size:15px; line-height:24px; } #sub .address_box .inquire .title p { padding:0 0 15px; font-size:24px; } #sub .research1_box ul.product { margin:0; } #sub .research1_box ul.product li { width:100%; margin:0 0 30px; } #sub .research1_box ul.product li .icon { width:65%; } #sub .research1_box ul.product li .txt { min-height:inherit; padding:0 0 35px; } } @media screen and (max-width:360px) { #sub .research_box ol { overflow:hidden; } #sub .research_box ol li { width:50%; margin:0; float:left; } #sub .research_box ol li div { font-size:16px; line-height:25px; } #sub .research_box ul { padding:10px 0 0; } #sub .research_box ul li { margin:15px 0 0; width:100%; } #sub .research1_box .characteristic div:first-child, #sub .research1_box .characteristic div:last-child { width:100%; padding:0; } #sub .research1_box .characteristic div p.textp { margin:0 0 12px; } } /* ========================================================================== 아라온실 플랫폼 (Ara Greenhouse Platform) 스타일 ========================================================================== */ .ara_platform_wrap { padding:30px 0 80px; } .ara_hero { background:linear-gradient(135deg, #0e294d 0%, #17427d 50%, #205091 100%); border-radius:12px; padding:45px 40px; color:#fff; margin-bottom:40px; box-shadow:0 10px 25px rgba(16, 45, 84, 0.15); position:relative; overflow:hidden; } .ara_hero:after { content:''; position:absolute; right:-50px; bottom:-50px; width:220px; height:220px; background:radial-gradient(circle, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 70%); border-radius:50%; pointer-events:none; } .ara_hero_tag { display:inline-block; background:rgba(255, 255, 255, 0.2); border:1px solid rgba(255, 255, 255, 0.35); padding:5px 14px; border-radius:20px; font-size:14px; font-weight:500; letter-spacing:0.5px; margin-bottom:15px; color:#a9d2ff; } .ara_hero h3 { font-size:32px; font-weight:700; margin-bottom:15px; line-height:1.3; color:#fff; } .ara_hero p { font-size:16px; line-height:1.7; color:#dbe8fc; font-weight:300; margin-bottom:0; } /* 4대 서브 카테고리 빠른 탐색 탭 */ .ara_subnav { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:50px; } .ara_subnav_item { flex:1; min-width:220px; background:#fff; border:1px solid #dbe2ea; border-radius:8px; padding:18px 20px; text-decoration:none; color:#333; transition:all 0.25s ease; box-shadow:0 2px 8px rgba(0,0,0,0.04); display:flex; align-items:center; justify-content:space-between; } .ara_subnav_item:hover { border-color:#205091; transform:translateY(-3px); box-shadow:0 6px 16px rgba(32,80,145,0.12); color:#205091; } .ara_subnav_item b { font-size:16px; font-weight:600; display:block; color:#205091; } .ara_subnav_item span { font-size:13px; color:#777; margin-top:3px; display:block; } .ara_subnav_item i { font-size:18px; color:#205091; font-style:normal; font-weight:700; } /* 서브카테고리 섹션 타이틀 */ .ara_sub_title { font-size:26px; font-weight:600; color:#1a2c42; padding:15px 0 15px 22px; position:relative; border-bottom:2px solid #205091; margin:60px 0 30px; display:flex; align-items:center; justify-content:space-between; } .ara_sub_title:before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:8px; height:26px; background:#205091; border-radius:4px; } .ara_sub_title .sub_badge { font-size:13px; font-weight:500; background:#edf4fe; color:#205091; padding:4px 12px; border-radius:14px; border:1px solid #c9defc; } /* 시스템 구성도 박스 */ .ara_arch_box { background:#fbfcfe; border:1px solid #e1e8f0; border-radius:10px; padding:30px; margin-bottom:40px; box-shadow:0 4px 14px rgba(0,0,0,0.03); } .ara_arch_grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-top:25px; } .ara_arch_col { background:#fff; border:1px solid #e2e8f0; border-radius:8px; padding:20px; box-shadow:0 2px 6px rgba(0,0,0,0.02); } .ara_arch_col h5 { font-size:17px; font-weight:700; color:#205091; margin-bottom:12px; padding-bottom:8px; border-bottom:2px solid #edf2f7; display:flex; align-items:center; gap:8px; } .ara_arch_col ul { list-style:none; padding:0; margin:0; } .ara_arch_col ul li { font-size:14px; color:#444; line-height:1.6; padding:5px 0 5px 14px; position:relative; } .ara_arch_col ul li:before { content:'-'; position:absolute; left:2px; color:#205091; font-weight:700; } /* 아이템 카드 그리드 */ .ara_grid_2 { display:grid; grid-template-columns:repeat(2, 1fr); gap:30px; margin-bottom:40px; } .ara_grid_3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin-bottom:40px; } .ara_card { background:#fff; border:1px solid #e1e7ee; border-radius:10px; overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,0.05); transition:transform 0.25s, box-shadow 0.25s; display:flex; flex-direction:column; } .ara_card:hover { transform:translateY(-4px); box-shadow:0 10px 24px rgba(32,80,145,0.12); border-color:#205091; } .ara_card_header { padding:22px 24px 15px; border-bottom:1px solid #edf1f6; background:#fbfcfd; } .ara_card_header h4 { font-size:20px; font-weight:700; color:#205091; margin:0 0 6px; } .ara_card_header .badge { display:inline-block; font-size:12px; font-weight:600; padding:3px 8px; border-radius:4px; background:#eaf2ff; color:#0d47a1; margin-right:6px; margin-bottom:4px; } .ara_card_header p { font-size:14px; color:#666; margin:6px 0 0; line-height:1.5; } .ara_card_body { padding:20px 24px; flex:1; display:flex; flex-direction:column; } .ara_card_img { text-align:center; background:#f8fafc; padding:15px; border-radius:6px; margin-bottom:18px; border:1px solid #ecf0f5; } .ara_card_img img { max-width:100%; height:auto; max-height:220px; object-fit:contain; } .ara_card_img_dual { display:flex; gap:10px; justify-content:center; } .ara_card_img_dual div { flex:1; text-align:center; } .ara_card_img_dual img { max-width:100%; max-height:160px; object-fit:contain; } .ara_card_img_dual span { font-size:12px; color:#777; display:block; margin-top:6px; } /* 스펙 리스트 및 미니 테이블 */ .ara_spec_list { list-style:none; padding:0; margin:0 0 15px; flex:1; } .ara_spec_list li { font-size:14px; color:#333; line-height:1.6; padding:6px 0 6px 16px; position:relative; border-bottom:1px dashed #eef2f6; } .ara_spec_list li:last-child { border-bottom:none; } .ara_spec_list li:before { content:'•'; position:absolute; left:2px; color:#205091; font-size:16px; top:4px; } .ara_spec_list li strong { color:#111; font-weight:600; } /* 미니 스펙 테이블 */ .ara_mini_table { width:100%; border-collapse:collapse; margin-top:12px; font-size:13px; } .ara_mini_table th { background:#f5f8fc; border:1px solid #e2e8f0; padding:7px 10px; text-align:left; color:#1a365d; font-weight:600; width:30%; } .ara_mini_table td { border:1px solid #e2e8f0; padding:7px 10px; color:#444; } /* 용역 서비스 블록 */ .ara_service_box { background:#f9fbfd; border-left:4px solid #205091; padding:25px 28px; border-radius:0 8px 8px 0; margin-bottom:24px; box-shadow:0 2px 8px rgba(0,0,0,0.03); } .ara_service_box h4 { font-size:19px; font-weight:700; color:#1e3a63; margin-bottom:10px; display:flex; align-items:center; gap:8px; } .ara_service_box p { font-size:15px; color:#444; line-height:1.7; margin-bottom:14px; } .ara_service_tags { display:flex; flex-wrap:wrap; gap:8px; } .ara_service_tags span { background:#e8eef8; color:#205091; font-size:13px; font-weight:500; padding:4px 10px; border-radius:4px; } /* CTA 배너 */ .ara_cta_banner { background:#f0f5fc; border:1px solid #cfe0f5; border-radius:10px; padding:35px 25px; text-align:center; margin-top:40px; } .ara_cta_banner h4 { font-size:22px; color:#1b3d6c; font-weight:700; margin-bottom:10px; } .ara_cta_banner p { font-size:15px; color:#555; margin-bottom:22px; line-height:1.6; } .ara_cta_btn { display:inline-block; background:#205091; color:#fff !important; padding:12px 36px; border-radius:6px; font-size:16px; font-weight:600; text-decoration:none; transition:background 0.2s; box-shadow:0 4px 10px rgba(32,80,145,0.25); } .ara_cta_btn:hover { background:#004098; color:#fff !important; } @media screen and (max-width:1024px) { .ara_grid_2, .ara_grid_3, .ara_arch_grid { grid-template-columns:1fr; } .ara_subnav { flex-direction:column; } .ara_hero h3 { font-size:26px; } .ara_hero { padding:30px 20px; } .ara_sub_title { font-size:22px; } }