/* 사이트 공통 */ .wrap { width:1200px; margin:0 auto; } ::selection { background-color:#004098; color:#fff; } body { word-break:keep-all; } input,textarea { -webkit-appearance:none; -webkit-border-radius:0; } .moimg { display:none; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition:background-color 5000s ease-in-out 0s; -webkit-transition:background-color 9999s ease-out; -webkit-box-shadow:0 0 0px 1000px 000 inset !important; -webkit-text-fill-color:#fff !important; } /* 메인 공통 */ #main { padding:100px 0 0; } #main article { padding:130px 0 140px; overflow:hidden; } #main .up-on-scroll { } #main .up-on-scroll.action { transition-duration:1s; } #main .title { padding:0 40px; box-sizing:border-box; margin:0 0 75px; } #main .title .htag { font-size:46px; color:#222; font-family:'Pretendard'; font-weight: 700;} /*#main .title .htag { font-size:46px; color:#222; font-family:'paybooc-ExtraBold'; }*/ /* 메인 */ #main .remote { position:fixed; top:50%; transform:translate(0,-50%); left:0; z-index:-1; opacity:0; transition-duration:0.5s; } #main .remote.stop { opacity:0 !important; } #main .remote.on { opacity:1; transition-duration:0.5s; z-index:12; } #main .remote ul { } #main .remote ul li { } #main .remote ul li a { display:inline-block; font-size:18px; color:#222; font-family:'Pretendard'; z-index:0; padding:15px 0 15px 60px; position:relative; } #main .remote ul li a:after { position:absolute; width:0; height:2px; display:block; content:''; background-color:#415dbb; top:50%; left:0; transform:translate(0,-50%); } #main .remote ul li.on a { color:#004098; } #main .remote ul li.on a:after { width:46px; transition-duration:0.5s; } #main .visual { position:relative; padding:0; } #main .visual .deco_round { width:180px; height:180px; content:''; background-color:#fff; display:block; position:absolute; right:-90px; bottom:-90px; transform:rotate(45deg); z-index:11; } #main .visual .deco_text { position:absolute; font-size:15px; color:#888; font-family:'Pretendard'; transform:rotate(-90deg); left:-112px; top:50%; z-index:11; } #main .visual .scroll { position:absolute; width:40px; height:210px; bottom:0; right:16%; z-index:10; } #main .visual .scroll > div { } #main .visual .scroll p { font-size:16px; color:#fff; font-family:'Pretendard'; transform:rotate(90deg); width:120px; top:43px; left:-39px; position:absolute; } #main .visual .scroll .bar { width:2px; height:84px; background-color:#fff; position:absolute; bottom:0; left:50%; transform:translate(-50%,0); } #main .visual .scroll .bar span { background-color:rgba(0,0,0,0.4); width:2px; height:30px; position:absolute; top:0; left:0; animation:scroll 2s linear infinite; } @keyframes scroll { 0% { top:0; } 50% { top:120px; } 100% { top:120px; } } #main .visual:after { position:absolute; top:0; left:0; background-color:#fff; width:80px; height:70vh; display:block; content:''; z-index:10; } #main .visual:before { position:absolute; bottom:0; left:0; background-color:rgba(0,0,0,0.5); width:80px; height:calc(100vh - 70vh - 100px); display:block; content:''; z-index:10; } #main .visual .box { overflow:hidden; height:calc(100vh - 100px); background-size:cover; background-repeat:no-repeat; background-position:center; } #main .visual .box .bg { height:calc(100vh - 100px); position:absolute; top:0; left:0; width:100%; z-index:0; background-size:cover; background-repeat:no-repeat; background-position:center; } /* 메인페이지 바탕이미지 */ #main .visual .box.num1 .bg { background-image:url('../img/main/visual1.jpg'); } #main .visual .box.num2 .bg { background-image:url('../img/main/visual2.jpg'); } #main .visual .box.num3 .bg { background-image:url('../img/main/visual3.jpg'); } #main .visual .box.num4 .bg { background-image:url('../img/main/visual4.jpg'); } #main .visual .box.num5 .bg { background-image:url('../img/main/visual5.jpg'); } #main .visual .box.num4 .bg:after, #main .visual .box.num5 .bg:after { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(10,18,35,0.45); } #main .visual .box .txt { padding:19.37vh 0 0; } #main .visual .box .txt > span { font-size:20px; color:#fff; font-family:'Pretendard'; letter-spacing:0; transform:translateY(30px); opacity:0.5; display:block; transition-duration:1s; } #main .visual .box .txt h2 { margin:4vh 0 8vh -5px; } #main .visual .box .txt h2 b { font-family:'Pretendard'; color:#fff; display:block; line-height:80px; font-size:54px; letter-spacing:0; transform:translateY(30px); opacity:0; transition-duration:1s; } #main .visual .box .txt a.more { display:inline-block; text-align:center; background-image:url('../img/main/btn.png'); background-size:204px 66px; background-repeat:no-repeat; width:204px; height:66px; transform:translateY(30px); opacity:0; transition-duration:1s; color:#fff; font-size:20px; color:#fff; font-family:'Pretendard'; } #main .visual .box .txt a.more span { z-index:1; position:relative; line-height:66px; } #main .visual .box .txt .scrollbar_wrap { position:absolute; bottom:calc(10.67vh + 19px); left:50%; transform:translate(-50%,0); height:20px; } #main .visual .box .txt .scrollbar { width:100px; height:2px; background-color:#fff; position:absolute; left:63px; top:5px; margin:0 auto; } #main .visual .box .txt .scrollbar span { width:0; height:2px; position:absolute; left:0; background-color:#0c3f8d; display:inline-block; } #main .visual .visual_btn { width:100%; height:20px; position:absolute; bottom:10.67vh; left:0; z-index:10; } #main .visual .visual_btn .wrap { height:20px; } #main .visual .visual_btn .div { max-width:230px; position:relative; height:20px; margin:-20px 0 0; } #main .visual .visual_btn .button { width:14px; height:14px; display:inline-block; top:0; z-index:11; margin:0; } #main .visual .visual_btn .button.btn_next { border-top:2px solid #fff; border-right:2px solid #fff; transform:rotate(45deg); right:0; } #main .visual .visual_btn .button.btn_prev { border-top:2px solid #fff; border-left:2px solid #fff; transform:rotate(-45deg); left:0; } #main .visual .swiper-button-next:after, .swiper-button-prev:after { display:none; } #main .visual .visual_btn .pagination { color:#fff; position:absolute; top:0; bottom:auto; left:auto; font-family:'Pretendard'; font-size:15px; color:rgba(0,0,0,0); } #main .visual .visual_btn .pagination .swiper-pagination-current { position:absolute; left:30px; color:#fff; } #main .visual .visual_btn .pagination .swiper-pagination-total { position:absolute; right:30px; color:#fff; } #main .visual .box.swiper-slide-active { background-size:110% !important; } #main .visual .box.swiper-slide-active .bg { transform:scale(1.09); transition-duration:7s; } #main .visual .box.swiper-slide-active .txt span { transform:translateY(0); opacity:1; } #main .visual .box.swiper-slide-active .txt h2 b { transform:translateY(0); opacity:1; transition-delay:0.2s; } #main .visual .box.swiper-slide-active .txt a.more { transform:translateY(0); opacity:1; transition-delay:0.5s; } #main .visual .box.swiper-slide-active .txt .scrollbar span { animation:5.25s scroll2 linear infinite; } @keyframes scroll2 { 0% { width:0; } 100% { width:100%; } } #main .onetech { padding:160px 0; position:relative; } #main .onetech .wrap { padding:0 40px; box-sizing:border-box; position:relative; } #main .onetech .wrap:after { display:block; clear:both; content:''; } #main .onetech img.deco_text { position:absolute; bottom:0; left:0; opacity:0; } #main .onetech img.deco_text.action { left:10%; opacity:1; transition-duration:1.5s; } #main .onetech img.deco_img { height:150px !important; position:absolute; bottom:25px; right:11.25%; animation:25s decoimg linear infinite; } @keyframes decoimg { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } } #main .onetech .img { width:60%; max-width:600px; height:400px; float:left; background-image:url('../img/main/onetech_img.jpg'); background-size:cover; background-repeat:no-repeat; background-position:center; transform:translateX(-50px); opacity:0; position:relative; } #main .onetech .img:after { display:block; content:''; position:absolute; width:72px; height:72px; background-color:#fff; top:-36px; left:-36px; transform:rotate(45deg); } #main .onetech .img.action { transform:translateX(0); opacity:1; } #main .onetech .txt { box-shadow:0 3px 40px rgba(62,76,89,0.3); width:50%; max-width:560px; background-color:#fff; padding:50px 55px; box-sizing:border-box; float:right; position:absolute; top:calc(50% + 60px); right:50px; background-image:url('../img/main/onetech_txt.jpg'); background-size:cover; background-repeat:no-repeat; background-position:center; transform:translateX(50px) translate(0,-50%); opacity:0; } #main .onetech .txt.action { transform:translateX(0) translate(0,-50%); opacity:1; } #main .onetech .txt h2 { color:#222; font-size:30px; font-family:'Pretendard'; display:block; padding:0 0 2px; } #main .onetech .txt span { } #main .onetech .txt span b { font-size:18px; font-weight:300; color:#333; display:block; margin:22px 0 0; } #main .business { background-color:#fbfbfb; position:relative; } #main .business img.deco_img { height:80px !important; position:absolute; top:28%; left:16.25%; animation:25s decoimg linear infinite; } #main .business img.deco_img2 { height:283px !important; position:absolute; bottom:-100px; right:-30px; animation:25s decoimg linear infinite; animation-direction:reverse; } #main .business ul { overflow:hidden; } #main .business ul li { float:left; width:25%; transform:translateY(70px); opacity:0; } #main .business ul.action li { transform:translateY(0); opacity:1; transition-duration:0.5s; } #main .business ul.action li:nth-child(1) { transition-delay:0s; } #main .business ul.action li:nth-child(2) { transition-delay:0.2s; } #main .business ul.action li:nth-child(3) { transition-delay:0.4s; } #main .business ul.action li:nth-child(4) { transition-delay:0.6s; } #main .business ul li:first-child:after, #main .business ul li:last-child:after { width:30px; height:30px; background-color:#fff; display:block; content:''; position:absolute; } #main .business ul li:first-child { position:relative; } #main .business ul li:first-child:after { bottom:0; left:0; } #main .business ul li:last-child { position:relative; } #main .business ul li:last-child:after { top:0; right:0; } #main .business ul li * { transition-duration:0.5s; } #main .business ul li a { display:block; } #main .business ul li a .box { background-size:cover; background-repeat:no-repeat; background-position:center; height:410px; position:relative; } #main .business ul li:nth-child(1) a .box { background-image:url('../img/main/business1.jpg'); } #main .business ul li:nth-child(2) a .box { background-image:url('../img/main/business2.jpg'); } #main .business ul li:nth-child(3) a .box { background-image:url('../img/main/business3.jpg'); } #main .business ul li:nth-child(4) a .box { background-image:url('../img/main/business4.jpg'); } #main .business ul li a .box .bg { background-color:#004098; position:absolute; bottom:-100%; left:0; width:100%; height:100%; opacity:0.85; } #main .business ul li a .box .txt { text-align:center; position:absolute; top:50%; left:0; width:100%; transform:translate(0,-50%); } #main .business ul li a .box .txt p { font-size:14px; color:#fff; font-family:'Pretendard'; display:none; } #main .business ul li a .box .txt b { font-size:24px; font-weight:700; color:#fff; margin:10px 0 20px; display:block; } #main .business ul li a .box .txt span { color:#fff; font-size:15px; font-family:'Pretendard'; background-image:url('../img/main/btn.png'); background-size:127px 42px; background-repeat:no-repeat; background-position:bottom center; width:127px; height:42px; line-height:42px; margin:0 auto; padding:60px 0 0; position:relative; display:none; } #main .business ul li a .box .txt span:after { width:1px; height:0; background-color:#fff; display:block; content:''; position:absolute; left:50%; trasnlate(-50%,0); top:0; } #main .business ul li a:hover * { transition-duration:0.75s; } #main .business ul li a:hover .bg { bottom:0; } #main .business ul li a:hover .txt p { display:block; } #main .business ul li a:hover .txt span { display:block; } #main .business ul li a:hover .txt span:after { height:47px; } #main .product { position:relative; } #main .product .deco_img { position:absolute; position:absolute; bottom:-200px; right:-200px; animation:40s decoimg linear infinite; } #main .product .deco_bg { position:absolute; left:19%; } #main .product .div { position:relative; } #main .product .div .product_img { position:absolute; z-index:1; bottom:-100px; left:0; opacity:0; transition-duration:1s; } #main .product .div .img { height:377px; max-width:716px; width:100%; margin:0 auto 100px; position:relative; overflow:hidden; } #main .product .div .img div { background-image:url('../img/main/product_img.jpg'); background-size:cover; background-position:center; background-repeat:no-repeat; height:377px; max-width:716px; position:absolute; top:0; left:0; width:100%; } #main .product .div .img:after { width:72px; height:72px; background-color:#fff; display:block; content:''; position:absolute; top:-36px; right:-36px; transform:rotate(45deg); } #main .product .div ul { position:absolute; bottom:-82px; right:200px; } #main .product .div ul li { display:inline-block; text-align:center; margin:0 -15px; transform:translateY(50px); opacity:0; } #main .product .div ul li.iot1 a { background-image:url('../img/main/product_iot1.png'); } #main .product .div ul li.iot2 a { background-image:url('../img/main/product_iot2.png'); } #main .product .div ul li a { display:inline-block; position:relative; width:182px; height:158px; background-size:cover; background-repeat:no-repeat; background-position:center; } #main .product .div ul li a div { position:absolute; top:50%; left:0; transform:translate(0,-50%); text-align:center; width:100%; } #main .product .div ul li a div b { font-size:15px; font-family:'Pretendard'; color:#fff; display:block; } #main .product .div ul li a div span { font-size:21px; color:#fff; font-weight:300; line-height:28px; display:block; padding:2px 0 0; } #main .product.action .div .product_img { opacity:1; transition-duration:1s; animation:productimg 1s linear infinite; } #main .product.action .div ul li { transform:translateY(0); opacity:1; transition-duration:0.8s; } #main .product.action .div ul li:nth-child(1) { transition-delay:0s; } #main .product.action .div ul li:nth-child(2) { transition-delay:0.3s; } #main .product.action .div .img div { transform:scale(1.2); transition-duration:3s; } @keyframes productimg { 0% { transform:translateY(50deg); } 50% { transform:translateY(0); } 100% { transform:translateY(50deg); } } #main .findus { background-image:url('../img/main/us_bg.jpg'); background-size:cover; background-repeat:no-repeat; background-position:center; } #main .findus iframe { width:100%; height:490px; } #main .findus .box { background-image:linear-gradient(to bottom, #004098, #131169); overflow:hidden; position:relative; max-width:864px; width:95%; margin:-90px auto 0; opacity:0; transform:translateY(0); } #main .findus .box.action { transform:translateY(-50px); opacity:1; } #main .findus .box > span { width:215px; float:left; display:block; text-align:center; position:absolute; top:50%; left:0; transform:translate(0,-50%); font-size:30px; font-family: 'Pretendard'; color:#fff; } #main .findus .box div { border-left:1px solid #405789; box-sizing:border-box; float:right; color:#fff; padding:33px 0 40px 30px; box-sizing:border-box; width:calc(100% - 215px); } #main .findus .box div p { font-size:18px; line-height:32px; color:#fff; font-weight:300; padding:0 0 15px; } #main .findus .box div span { display:inline-block; font-family:'Pretendard'; font-weight: 100; font-size:14px; margin:0 45px 0 0; } #main .findus .box div span a {color:#fff;} #main .findus .box div span b { font-family:'Pretendard'; margin:0 4px 0 0; } /* 서브 공통 */ #sub { padding:100px 0 200px; } #sub .visual { height:750px; position:relative; text-align:center; margin:0 0 -70px; overflow:hidden; border-bottom:1px solid #fff; box-sizing:border-box; } #sub .visual:after { width:180px; height:180px; content:''; background-color:#fff; display:block; position:absolute; right:-90px; bottom:-90px; transform:rotate(45deg); z-index:11; } #sub p.textp { font-size:18px; color:#222; font-weight:300; background-color:#f7f7f7; padding:20px 30px 20px 20px; line-height:28px; box-sizing:border-box; margin:0 0 10px; position:relative; } #sub p.textp b { display:block; font-weight:500; padding:0 0 2px; } /* #sub p.textp:after { width:30px; height:30px; content:''; background-color:#fff; display:block; position:absolute; right:-15px; top:-15px; transform:rotate(45deg); z-index:11; } */ #sub .visual .bg { background-size:cover; background-repeat:no-repeat; background-position:center; position:absolute; top:0; left:0; width:100%; height:100%; z-index:-1; transform: scale(1.00); } #sub .visual p { color:#fff; font-size:72px; font-family: 'Pretendard'; font-weight: 300; padding:240px 0 75px; transform:translateY(20px); opacity:0; position:relative; display:none; } #sub .visual p:after { display:block; content:''; width:1px; height:0; background-color:#fff; position:absolute; top:calc(100% - 60px); left:50%; transform:translate(-50%,0); } #sub .visual span { display:block; color:#fff; font-family: 'Pretendard'; font-weight: 100; font-size:18px; transform:translateY(20px); opacity:0; display:none; } #sub .visual .route { position:absolute; bottom:0; left:50%; transform:translate(-50%,0); width:100%; background-color:#fff; width:1390px; z-index:1; } #sub .visual .route ul { text-align:left; padding:0 0 0 90px; box-sizing:border-box; } #sub .visual .route ul li { display:inline-block; margin:0 50px 0 0; position:relative; font-size:16px; color:#222; font-family:'Pretendard'; line-height:90px; } #sub .visual .route ul li:after { display:block; content:''; width:5px; height:5px; border-top:1px solid #555; border-right:1px solid #555; position:absolute; top:50%; left:-28px; transform:translate(0,-50%) rotate(45deg); } #sub .visual .route ul li:first-child:after { display:none; } #sub .visual .route ul li a img { height:15px !important; vertical-align:middle; margin:0 0 1px; } #sub .visual.on .bg { transform:scale(1.05) rotate(.001deg); transition-duration:2s; } #sub .visual.on p { transform:translateY(0); opacity:1; transition-duration:1s; } #sub .visual.on p:after { height:40px; transition-duration:1s; transition-delay:0.3s; } #sub .visual.on span { transform:translateY(0); transition-duration:1s; opacity:1; transition-delay:0.7s; } /* 서브메뉴 바탕이미지 */ #sub.address .visual .bg { background-image:url('../img/sub/visual_address.jpg'); } #sub.about .visual .bg { background-image:url('../img/sub/visual_onetech.jpg'); } #sub.nnuclear .visual .bg { background-image:url('../img/sub/visual_nnuclear.jpg'); } #sub.research .visual .bg { background-image:url('../img/sub/visual_research.jpg'); } #sub.research_sensor .visual .bg { background-image:url('../img/sub/visual_onetech.jpg'); } #sub.products .bg { background-image:url('../img/sub/product.jpg'); } #sub.scada .bg { background-image:url('../img/sub/visual_research.jpg'); } #sub .visual .route ul li { display:none; } #sub .visual .route ul li.home { display:inline; } #sub.address .visual .route ul li.address { display:inline; } #sub.about .visual .route ul li.about { display:inline; } #sub.nnuclear .visual .route ul li.nnuclear { display:inline; } #sub.research .visual .route ul li.research { display:inline; } #sub.products .visual .route ul li.products { display:inline; } #sub.scada .visual .route ul li.scada { display:inline; } #sub.research_sensor .visual .route ul li.research_sensor { display:inline; } #sub.research_iotfarm .visual .route ul li.research_iotfarm { display:inline; } #sub.research_research .visual .route ul li.research_research { display:inline; } #sub.address .visual p.address { display:block; } #sub.about .visual p.about { display:block; } #sub.nnuclear .visual p.nnuclear { display:block; } #sub.research .visual p.research { display:block; } #sub.products .visual p.products { display:block; } #sub.scada .visual p.scada { display:block; } #sub.address .visual span.address { display:block; } #sub.about .visual span.about { display:block; } #sub.nnuclear .visual span.nnuclear { display:block; } #sub.research .visual span.research { display:block; } #sub.products .visual span.products { display:block; } #sub.scada .visual span.scada { display:block; } #sub.research_sensor .visual span.research_sensor { display:block; } #sub.research_iotfarm .visual span.research_iotfarm { display:block; } #sub.research_sensor .visual span.research, #sub.research_iotfarm .visual span.research { display:none; } #sub h2.tit { font-size:36px; font-weight:300; color:#222; padding:130px 0 30px; } #sub h3.tit { font-size:24px; font-weight:300; color:#222; padding:95px 0 30px 20px; position:relative; box-sizing:border-box; } #sub h3.tit:after { background-color:#205091; width:9px; height:9px; border-radius:50%; position:absolute; left:0; top:109px; display:block; content:''; } #sub h3.tit.interval:after { top:29px; } #sub h3.tit.image { padding:95px 0 30px 40px; } #sub h3.tit.image:after { background-color:inherit; background-image:url('../img/sub/title_img.png'); background-size:28px; background-position:left 0; background-repeat:no-repeat; width:28px; height:28px; bottom:33px; top:auto; } #sub h3.tit.interval { padding:15px 0 30px 20px; } #sub .table { border-top:1px solid #999; background-color:#fff; } #sub .table colgroup .pc { } #sub .table colgroup .mobile { display:none; } #sub .table.border tr td { border:1px solid #ddd; } #sub .table.border tr td:last-child { border-right:0; } #sub .table thead { } #sub .table thead tr { } #sub .table thead tr th { background-color:#205091; color:#fff; font-size:18px; font-weight:500; line-height:60px; } #sub .table thead tr th { background-color:#205091; color:#fff; font-size:18px; font-weight:500; line-height:60px; } #sub .table thead tr th.new { background-color:#258bc3; color:#fff; font-size:18px; font-weight:500; line-height:60px; } #sub .table tbody tr { border-bottom:1px solid #ddd; } #sub .table tbody tr th { background-color:#f9f9f9; font-size:18px; font-weight:500; color:#222; border-right:1px solid #ddd; box-sizing:border-box; padding:20px 0; } #sub .table tbody tr td { padding:20px 18px; box-sizing:border-box; font-size:16px; font-weight:300; } #sub .table tbody tr td.gray { background-color:#f9f9f9; } #sub .table tbody tr td b { display:block; text-align:center; font-weight:300; font-size:16px; } #sub .table tbody tr td span { font-size:16px; font-weight:300; color:#222; position:relative; padding:0 0 0 13px; box-sizing:border-box; display:block; line-height:28px; } #sub .table tbody tr td span:after { display:block; content:''; width:3px; height:3px; background-color:#004098; border-radius:50%; position:absolute; top:13px; left:0; } /* 익스에만 적용하는 css */ @media screen and (-ms-high-contrast:active), (-ms-high-contrast:none){ #sub .visual p:after { width:2px; } #main .visual .scroll .bar { width:2px !important; } } @media screen and (max-width:1500px) { #sub .visual { height:600px; } #sub .visual:after { display:none; } #sub .visual p { padding:180px 0 75px; } #sub .visual .route { width:calc(100% - 50px); } #sub .visual .route ul { padding:0 0 0 35px; } #main .visual:after { display:none; } #main .visual .deco_text { display:none; } #main .visual .deco_round { width:150px; height:150px; } #main .visual:before { display:none; } #main .visual .scroll { right:8%; } #main { padding:88px 0 0; } #sub { padding:88px 0 180px; } #main .visual .box { height:calc(100vh - 88px); } #main .visual .box .bg { height:calc(100vh - 88px); } #main .visual .scroll p { font-size:14px; font-family:'Pretendard'; font-weight:100; top:56px; left:-41px; } #main .visual .scroll .bar { width:1px; } #main .remote ul li a { padding:15px 0 15px 30px; font-size:15px; } #main .remote ul li.on a:after { width:20px; } } @media screen and (max-width:1280px) { .wrap { width:auto; padding:0 50px; box-sizing:border-box; } #main .visual .box .wrap, #main .visual .visual_btn .wrap { width:100%; padding:0 50px; } #main .visual .box .txt .scrollbar_wrap { left:52px; transform:none; } #main .visual .box .txt .scrollbar { width:80px; left:50px; } #main .visual .visual_btn .pagination .swiper-pagination-total { right:46px; } #main .visual .visual_btn .button.btn_next { right:13px; } #main .visual .box .txt a.more { width:185px; height:59px; background-size:185px 59px; font-size:18px; font-family:'Pretendard'; font-weight:100; } #main .visual .box .txt a.more span { line-height:59px; } #main .remote { display:none; } #main .onetech .txt { padding:30px 25px; } #main .onetech .txt h2 { font-size:26px; } #main .onetech .txt span b { margin:15px 0 0; } #main .onetech img.deco_text.action { left:30px; height:100px !important; } #main .onetech { padding:105px 0; } } @media screen and (max-width:1024px) { .wrap { padding:0 35px; } #main article { padding:110px 0; } #main .visual .box .wrap, #main .visual .visual_btn .wrap { padding:0 35px; } #main { padding:68px 0 0; } #sub { padding:68px 0 160px; } #sub .visual { height:550px; } #sub .visual p { font-size:58px; } #sub .visual .route ul li { line-height:70px; margin:0 40px 0 0; } #sub .visual .route ul li:after { left:-26px; } #main .visual .box { height:calc(100vh - 68px); } #main .visual .box .bg { height:calc(100vh - 68px); } #main .visual .box .txt h2 b { font-size:5.6vw; line-height:8.4vw; } #main .visual .box .txt > span { font-size:2.2vw; } #main .onetech .wrap { padding:0 35px; } #main .onetech .txt { right:35px; } #main .onetech .txt span b { font-size:16px; } #main .onetech .txt h2 { font-size:22px; } #main .business ul li a .box { height:350px; } #main .business ul li a .box .txt b { font-size:21px; margin:5px 0 10px; } #main .business ul li a .box .txt p { font-size:12px; } #main .business ul li a:hover .txt span:after { height:25px; } #main .business ul li a:hover .txt span { padding:40px 0 0; font-size:14px; } #main .title .htag { font-size:40px; } #main .title { padding:0 25px; margin:0 0 55px; } #main .product .deco_img { height:300px !important; bottom:-20px; right:-20px; } #main .product.action .div .product_img { height:250px !important; } #main .product .div ul { bottom:-50px; right:50px; } #main .findus .box > span { width:160px; font-size:24px; } #main .findus .box div { width:calc(100% - 160px); } #main .findus .box div p { font-size:16px; line-height:27px; } } @media screen and (max-width:768px) { .wrap { padding:0 20px; } #main .visual .box .wrap, #main .visual .visual_btn .wrap { padding:0 30px; } #sub .visual { height:500px; margin:0 0 -40px; } #sub .visual p { font-size:50px; padding:150px 0 55px; } #sub .visual p:after { top: calc(100% - 45px); } #sub .visual.on p:after { height:35px; } #main .visual .box .txt a.more { width:150px; height:48px; background-size:150px 48px; } #main .visual .box .txt a.more span { line-height:48px; } #main .visual .visual_btn .button { width:10px; height:10px; } #main .visual .visual_btn .pagination { font-size:13px; } #main .onetech { padding:80px 0 100px; } #main .onetech .wrap { padding:0 20px; } #main .onetech img.deco_text.action { display:none; } #main .onetech .txt { top:calc(50% + 30px); right:20px; } #main .business ul li { width:50%; } #main .business ul li a .box { height:300px; } #main .business ul li:first-child:after { bottom:auto; top:0; } #main .business ul li:last-child:after { top:auto; bottom:0; } #main .title { padding:0; margin:0 0 45px; } #main .title .htag { font-size:34px; } #main .product .div ul { right:20px; } #main .product .div .img div { height:300px; } #main .findus .box > span { display:none; } #main .findus .box div { width:100%; border:0; padding:25px; } #main .findus iframe { height:400px; } #main .findus .box { margin:-20px auto 0; } #sub .visual .route ul { padding:0 0 0 25px; } #sub .table colgroup { display:none; } #sub .table tbody tr th { width:130px; font-size:16px; } #sub .table tbody tr td { padding:15px; } #sub .table thead tr th:first-child { width:130px; } #sub .table thead tr th { line-height:50px; font-size:16px; } #sub h2.tit { font-size:28px; padding:80px 0 20px; } #sub h3.tit { font-size:20px; padding:60px 0 25px 11px; } #sub h3.tit.first_tit { margin:40px 0 25px; } #sub h3.tit:after { width:6px; height:6px; top:73px; bottom:auto; } #sub h3.tit.interval:after { top:27px; } #sub h3.tit.image:after { top:38px; background-size:25px; width:25px; height:25px; } #sub h3.tit.image { padding:35px 0 20px 32px; } } @media screen and (max-width:640px) { .wrap { padding:0 25px; } #main article { padding:90px 0; } #main { padding:66px 0 0; } #sub { padding:66px 0 120px; } #sub h3.tit:after { top:51px; } #main .visual .box { height:calc(100vh - 68px); } #main .visual .deco_round { width:40px; height:40px; right:-20px; bottom:-20px; } #main .visual .box .wrap, #main .visual .visual_btn .wrap { padding:0 25px; } #main .visual .box .txt { padding:16vh 0 0; } #main .visual .box .txt > span { font-size:16px; font-family:'Pretendard'; } #main .visual .box .txt h2 b { font-size:32px; line-height:48px; } #main .visual .box .txt h2 b br { display:none; } #main .visual .box .txt h2 b br.blockimportant { display:block; } #main .visual .box .txt a.more { font-size:17px; } #main .visual .box .txt .scrollbar { left:41px; } #main .visual .box .txt .scrollbar_wrap { left:30px; bottom:calc(10.67vh + 20px); } #main .visual .visual_btn .pagination .swiper-pagination-current { left:20px; } #main .visual .visual_btn .pagination .swiper-pagination-total { right:76px; } #main .visual .visual_btn .button.btn_next { right:56px; } #main .onetech { padding:80px 0 150px; } #main .onetech .txt { padding:22px 20px; width:80%; top:75%; } #main .onetech .img { width:80%; } #main .business ul li a .box .txt b { font-size:19px; } #main .business ul li a .box .txt span { width:110px; height:36px; background-size:110px 36px; line-height:36px; } #main .business ul li a .box .txt p { line-height:19px; padding:0 10px; box-sizing:border-box; } #main .title .htag { font-size:28px; } #main .product.action .div .product_img { display:none; } #main .product .div .img div { height:275px; } #main .product .div ul { bottom:0; } #main .product .div ul li a { width:150px; height:130px; } #main .product .div ul li a div b { font-size:13px; } #main .product .div ul li a div span { font-size:17px; } #main .product .div .img { margin:0 auto 50px; } #main .findus { background-color:#f8f8f8; background-image:none; } #main .findus .box div { padding:20px; } #sub .visual p { font-size:42px; padding:140px 0 55px; } #sub .visual span { font-size:16px; padding:0 20px; box-sizing:border-box; line-height:26px; } #sub .visual.on p:after { height:30px; } #sub .visual { height:450px; margin:0 0 -40px; } #main .onetech .txt span b br { display:none; } #sub .visual .route ul li { line-height:60px; } #sub .table .pc { display:none; } #sub .table .mobile { display:inline; } #sub .table tbody tr th { font-size:15px; } #sub .table tbody tr td { padding:12px; } #sub .table tbody tr td span { padding:0 0 0 10px; font-size:15px; } #sub p.textp { font-size:15px; line-height:25px; padding:14px 15px 14px 15px; } /*#sub p.textp:after { width:25px; height:25px; right:-12px; top:-12px; }*/ #sub h2.tit { font-size:20px; line-height:30px; } #sub h3.tit { padding:40px 0 15px 11px; } #sub h3.tit.interval { padding:5px 0 15px 11px; } #sub h3.tit.interval:after { top:18px; } #sub h3.tit.image:after { top:36px; bottom:auto; } .pcimg { display:none; } .moimg { display:inline; } } @media screen and (max-width:500px) { #main .visual .box .txt h2 { margin:3.2vh 0 6vh -5px; padding:0 20px 0 0; box-sizing:border-box; } #sub .visual .route ul { padding:0 0 0 20px; } #sub .visual .route ul li { margin:0 30px 0 0; font-size:15px; } #sub .visual .route ul li:after { left:-21px; } } @media screen and (max-width:360px) { #sub .visual .route ul { padding:0 0 0 15px; } #sub .visual .route ul li { margin:0 25px 0 0; font-size:14px; } #sub .visual .route ul li:after { left:-19px; } #sub .visual .route { width:calc(100% - 30px); } #main .visual .box .txt h2 { margin:3vh 0 5vh -5px; } #main .visual .box .txt h2 b { font-size:28px; line-height:40px; } #main .visual .box .txt { padding:15vh 0 0; } } @media screen and (max-width:300px) { #sub .visual .route { display:none; } } /* @media screen and (max-height:550px) and (max-width:500px) { #main .visual .box { height:550px; } #main .visual .box .bg { height:550px; } #main .visual .box .txt { padding:15vh 0 0; } } */ /* 가로는 넓은데 세로는 짧을 때 */ @media screen and (max-height:750px) and (min-width:1280px) { #main .visual .box .txt { padding:16vh 0 0; } #main .visual .box .txt h2 { margin:3.5vh 0 5vh -5px; } #main .visual .box .txt h2 b { line-height:70px; font-size:48px; } } /* 세로가 더 짧을 때 */ @media screen and (max-height:550px) and (min-width:1280px) { #main .visual .box { height:600px; } #main .visual .box .bg { height:600px; } }