|
|
|
@ -1,5 +1,5 @@
|
|
|
|
|
@charset "utf-8"; |
|
|
|
|
body,html{overflow-x: hidden;} |
|
|
|
|
#main{overflow: hidden!important;} |
|
|
|
|
/* 본문 바로가기 */ |
|
|
|
|
#skip_to_container a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden} |
|
|
|
|
#skip_to_container a:focus, #skip_to_container a:active {width:100%;height:75px;background:#21272e;color:#fff;font-size:2em;font-weight:bold;text-align:center;text-decoration:none;line-height:3.3em} |
|
|
|
@ -17,7 +17,7 @@ body,html{overflow-x: hidden;}
|
|
|
|
|
#hd_h1 {position:absolute;font-size:0;line-height:0;overflow:hidden} |
|
|
|
|
#logo a{display:block;padding:20px;} |
|
|
|
|
#logo a img{width:200px;} |
|
|
|
|
#hd_wrapper{min-width:1280px;display:flex;width:100%;justify-content: space-between;} |
|
|
|
|
#hd_wrapper{display:flex;width:100%;justify-content: space-between;} |
|
|
|
|
|
|
|
|
|
.hd-sub #hd{position:fixed;background:#fff!important;border-bottom:1px solid #ddd;} |
|
|
|
|
.hd-sub .color_logo{display:block;} |
|
|
|
@ -116,7 +116,7 @@ position:fixed;right:50px;bottom:20px;z-index:999;display:flex;justify-content:c
|
|
|
|
|
.topBtn i{font-size:20px;color:#fff;} |
|
|
|
|
|
|
|
|
|
/*footer*/ |
|
|
|
|
#footer{background:#21272e;position:absolute;bottom:0;width:100%;height:200px;} |
|
|
|
|
#footer{z-index:0;background:#21272e;position:absolute;bottom:0;width:100%;height:200px;} |
|
|
|
|
.footer-box{display:flex;} |
|
|
|
|
.ft-logo{padding-right:80px;} |
|
|
|
|
.ft-logo img{width:200px;} |
|
|
|
@ -332,7 +332,7 @@ padding:18px 20px 15px 20px;font-weight:500;margin: 0px auto;font-size:1rem;box-
|
|
|
|
|
.mg_box.on{z-index:9999;} |
|
|
|
|
.m_gnb{position:absolute; top:0; right:-100%; width:100%; z-index:9; transition:0.3s ease; -webkit-transition:0.3s ease;} |
|
|
|
|
.m_gnb.on{z-index:9999; right:0;} |
|
|
|
|
div.mg_btn{display:none;position:absolute; top:15px; right:10px; z-index:99999; |
|
|
|
|
div.mg_btn{display:none;position:absolute; top:27px; right:10px; z-index:99999; |
|
|
|
|
transition:0.5s ease; -webkit-transition:0.5s ease; -o-transition:0.5s ease; |
|
|
|
|
transition-delay:0.3s; -webkit-transition-delay:0.3s; -o-transition-delay:0.3s; |
|
|
|
|
} |
|
|
|
@ -353,19 +353,27 @@ div.mg_btn.on span:last-child{width:42px; transform:translateY(-12px) rotate(90d
|
|
|
|
|
.m_gnb div.mg_bk.on{display:block; opacity:0.9;} |
|
|
|
|
|
|
|
|
|
/*1024이하 메인*/ |
|
|
|
|
#mo-main{display:none} |
|
|
|
|
#mo-main .swiper-button-next:after, #mo-main .swiper-rtl .swiper-button-prev:after{color:#fff;font-size:25px;} |
|
|
|
|
#mo-main .swiper-button-prev:after, #mo-main .swiper-rtl .swiper-button-next:after{color:#fff;font-size:25px;} |
|
|
|
|
|
|
|
|
|
.hd-sub div.mg_btn span{background:#000} |
|
|
|
|
.mo-sub{display:none;} |
|
|
|
|
@media screen and (max-width:1024px){ |
|
|
|
|
body,html{height:100%;} |
|
|
|
|
#mo-main{display:block;} |
|
|
|
|
#fullpage{display:none} |
|
|
|
|
.pc-hd{display:none} |
|
|
|
|
.hd-sub #hd_wrapper{background:#fff} |
|
|
|
|
#fp-nav{display:none;} |
|
|
|
|
div.mg_btn{display:block;} |
|
|
|
|
html,body{} |
|
|
|
|
#hd{position:absolute} |
|
|
|
|
#hd:hover{background:inherit!important;} |
|
|
|
|
#mo-main .main-bn{height:520px;background-size:cover;display: flex;align-items: center;} |
|
|
|
|
#mo-main .main-bn.bg04{height:auto;background-size:400px;} |
|
|
|
|
#container{height:100%;} |
|
|
|
|
#hd .color_logo{display:none} |
|
|
|
|
#hd .wh_logo{display:block} |
|
|
|
|
.hd-sub #hd .wh_logo{display:none} |
|
|
|
|
.hd-sub #hd .color_logo{display:block} |
|
|
|
|
#mo-main .main-bn{height:550px;background-size:cover;display: flex;align-items: center;} |
|
|
|
|
#mo-main .main-bn.bg04{height:auto;background-size:400px;padding:80px 0;} |
|
|
|
|
.inner{width:100%;padding:0 20px;position: inherit;top:0;left:0;transform: inherit;} |
|
|
|
|
.bg-square{width:200px;height:200px;top:-50px} |
|
|
|
|
.main-txt-box{padding:0 40px;} |
|
|
|
@ -373,13 +381,78 @@ div.mg_btn.on span:last-child{width:42px; transform:translateY(-12px) rotate(90d
|
|
|
|
|
.bg01 .inner{padding:0 60px;} |
|
|
|
|
.bg02 .main-txt-box, .bg03 .main-txt-box{padding-left:40px;} |
|
|
|
|
.mg_btn{display:block;} |
|
|
|
|
.main-bn h2{font-size:2rem} |
|
|
|
|
.main-bn h2{font-size:1.8rem} |
|
|
|
|
.main-bn h4{font-size:1.4rem} |
|
|
|
|
.main-bn .big{font-size:4rem} |
|
|
|
|
.main-txt-box b{font-size:2.5rem;} |
|
|
|
|
.main-txt-box{font-size:1.25rem;word-break: keep-all;} |
|
|
|
|
.main-bn .sm{margin:10px 0 0 0} |
|
|
|
|
.bg04 .inner{padding-top:0px;} |
|
|
|
|
.line-box{display:none;} |
|
|
|
|
.list-box .icon img{width:80px;} |
|
|
|
|
.list-box .ti{font-size:1rem;} |
|
|
|
|
.box > a{width:220px;height:220px;} |
|
|
|
|
.list-box{width:220px;height:220px;} |
|
|
|
|
#footer{position: initial;} |
|
|
|
|
} |
|
|
|
|
.list-box{width:100%;height:100%;} |
|
|
|
|
.box:hover .list-box{ opacity: 1; } |
|
|
|
|
#footer{position: initial;display: flex;align-items: center;height:auto;padding:40px 0;} |
|
|
|
|
.footer-box{flex-direction: column;text-align: center;} |
|
|
|
|
.ft-logo{padding-right:0;} |
|
|
|
|
.ft-logo img{width:180px;margin-bottom:14px;} |
|
|
|
|
.ft-info span{font-size:0.75rem;} |
|
|
|
|
.topBtn{display:flex!important;bottom:100px;} |
|
|
|
|
/*sub*/ |
|
|
|
|
.mo-sub{display:block} |
|
|
|
|
.pc-sub{display:none;} |
|
|
|
|
.mo-sub .sub-inner{width:100%;padding:0 20px;} |
|
|
|
|
.mo-sub .sub-ti h4{font-size:2.5rem;padding:60px 0;} |
|
|
|
|
.mo-sub .sub-cont{padding:60px 0;flex-direction: column;} |
|
|
|
|
.mo-sub .company .img{margin-bottom:40px;margin-right:0;} |
|
|
|
|
.mo-sub .company .img img{width:100%;} |
|
|
|
|
.mo-sub .company .txt-box + .txt-box{margin-top:20px;} |
|
|
|
|
.mo-sub .company-link a + a{margin-left:0;margin-top:20px;} |
|
|
|
|
.mo-sub .sub-cont + .sub-cont{padding-top:0px;} |
|
|
|
|
.mo-sub .certification-box ul li{margin-top:40px;} |
|
|
|
|
.mo-sub .sub-cont h6{font-size:1.5rem} |
|
|
|
|
.mo-sub .history-box{padding:0 80px;min-height:auto} |
|
|
|
|
.mo-sub .swiper-container-history{width:100%;} |
|
|
|
|
.mo-sub .swiper-container-history .swiper-button-next, .mo-sub .swiper-container-history .swiper-rtl .swiper-button-prev{right:20px;} |
|
|
|
|
.mo-sub .swiper-container-history .swiper-button-prev, .mo-sub .swiper-container-history .swiper-rtl .swiper-button-next{left:20px;} |
|
|
|
|
.mo-sub .sub-cont.history{overflow-x: hidden;} |
|
|
|
|
} |
|
|
|
|
@media screen and (max-width:520px){ |
|
|
|
|
.m_gnb div.mg_wrap{width:100%;} |
|
|
|
|
#logo a img{width:150px;} |
|
|
|
|
.main-bn h2{font-size:1rem;} |
|
|
|
|
.main-bn .big{font-size:2rem;margin:20px 0;} |
|
|
|
|
.main-txt-box b{font-size:1.5rem} |
|
|
|
|
.main-txt-box{font-size:0.875rem} |
|
|
|
|
.main-bn .sm{font-size:0.875rem} |
|
|
|
|
.bg-square{width:100px;height:100px;top:0px;border: 10px solid rgba(255,255,255,0.2);} |
|
|
|
|
.main-bn h4{font-size:1rem;} |
|
|
|
|
#mo-main .main-bn.bg04{padding:40px 0;} |
|
|
|
|
.box > a{width:140px;height:140px;} |
|
|
|
|
.list-box .icon img{width:40px;} |
|
|
|
|
.bg04 ul{justify-content: space-around;} |
|
|
|
|
.list-box .ti{font-size:0.75rem;} |
|
|
|
|
.topBtn{bottom:70px;right:20px} |
|
|
|
|
div.mg_btn{top:24px;} |
|
|
|
|
.hd-sub div.mg_btn span{width:30px;margin:8px} |
|
|
|
|
div.mg_btn.on span{margin:10px;} |
|
|
|
|
.mo-sub .sub-ti h4{font-size:1.8rem} |
|
|
|
|
.breadcrumbs{top:0px;} |
|
|
|
|
.breadcrumbs ul li a{font-size:0.725rem} |
|
|
|
|
div.mg_btn span{width:30px;margin:5px;} |
|
|
|
|
.mo-sub{word-break: keep-all;} |
|
|
|
|
.mo-sub .sub-cont h6{font-size:1.25rem;} |
|
|
|
|
.mo-sub .company .txt-box p{font-size:0.875rem;} |
|
|
|
|
.mo-sub .certification-box .ti{text-align: center;} |
|
|
|
|
.mo-sub .company-link a{padding:40px 20px;} |
|
|
|
|
.mo-sub .company-link a span{font-size:1.2rem} |
|
|
|
|
.mo-sub .list-txt > li b{display:block} |
|
|
|
|
.mo-sub .list-txt > li b.wh_txt{display:none} |
|
|
|
|
.mo-sub .sub-cont .history-box h6{font-size:1.5rem} |
|
|
|
|
.mo-sub .history{height:100%;} |
|
|
|
|
.mo-sub .history-box{padding:30px 40px 0 30px} |
|
|
|
|
.mo-sub .swiper-container-history .swiper-button-next, .mo-sub .swiper-container-history .swiper-rtl .swiper-button-prev{top:-10px;} |
|
|
|
|
.mo-sub .swiper-container-history .swiper-button-prev, .mo-sub .swiper-container-history .swiper-rtl .swiper-button-next{top:-10px;} |
|
|
|
|
.mo-sub .swiper-container-history:nth-child(2){height:500px;} |
|
|
|
|
.mo-sub .swiper-container-history { |
|
|
|
|