|
|
|
@ -1,9 +1,5 @@
|
|
|
|
|
@charset "utf-8"; |
|
|
|
|
|
|
|
|
|
body,html{ |
|
|
|
|
overflow-y: 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} |
|
|
|
@ -11,11 +7,19 @@ body,html{
|
|
|
|
|
/*header*/ |
|
|
|
|
#hd {background:rgba(0, 0, 0, 0);z-index:1000;position:fixed;width:100%; top:0;overflow:hidden; transition:0.6s ease; -webkit-transition:0.6s ease;} |
|
|
|
|
#hd:hover{background:#fff; border-bottom:1px solid rgba(0, 0, 0, 0.5);} |
|
|
|
|
.color_logo{display:none;} |
|
|
|
|
.wh_logo{display:block;} |
|
|
|
|
#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{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;} |
|
|
|
|
.hd-sub .wh_logo{display:none;} |
|
|
|
|
.hd-sub .gnb_1da{color: #000!important;} |
|
|
|
|
.hd-sub .gnb_2da{color: #000!important;} |
|
|
|
|
.hd-sub:hover .gnb_1da{color:#000!important;} |
|
|
|
|
/* nav */ |
|
|
|
|
#gnb{position:relative;width:calc(100% - 250px);} |
|
|
|
|
#gnb h2{position:absolute;font-size:0;line-height:0;overflow:hidden} |
|
|
|
@ -44,18 +48,18 @@ body,html{
|
|
|
|
|
.main-bn h4{font-size:1.5rem;font-weight:600;color:rgba(0,0,0,0.8);text-align:center;line-height:1.8;} |
|
|
|
|
.main-bn .big{display:block;font-size:6rem;color:#fff;font-weight:bold;} |
|
|
|
|
.main-bn .sm{display:block;font-size:1.25rem;color:rgba(255,255,255,0.8);margin:10px 0 0 10px;} |
|
|
|
|
.txt-box{font-size:1.25rem;font-weight:300;color:rgba(255,255,255,0.8);line-height:1.5;} |
|
|
|
|
.txt-box b{font-size:3rem;} |
|
|
|
|
.main-txt-box{font-size:1.25rem;font-weight:300;color:rgba(255,255,255,0.8);line-height:1.5;} |
|
|
|
|
.main-txt-box b{font-size:3rem;} |
|
|
|
|
.bg-canvas{position: absolute;top:0;opacity:0.3;} |
|
|
|
|
.bg-square{display:block;border:20px solid rgba(255,255,255,0.2);width:250px;height:250px;position:absolute;top:-160px;} |
|
|
|
|
.bg01{background:url('../images/bg01.jpg');} |
|
|
|
|
.bg02{background:url('../images/bg02.jpg');} |
|
|
|
|
.bg03{background:url('../images/bg03.jpg') no-repeat 80% 50%;} |
|
|
|
|
.bg04{background:url('../images/pal_icon02_2.png') #f4f4f4 no-repeat 95% 20%;background-size:400px;} |
|
|
|
|
.bg02 .txt-box, .bg03 .txt-box{padding-left:134px;} |
|
|
|
|
.bg02 .main-txt-box, .bg03 .main-txt-box{padding-left:134px;} |
|
|
|
|
.bg04 .inner{padding-top:80px;} |
|
|
|
|
.bg04 ul{width:100%;display:flex;flex-wrap:wrap;} |
|
|
|
|
.bg05 .main-ti{margin-top:-100px;} |
|
|
|
|
.bg05{padding:200px 0;} |
|
|
|
|
.box{position:relative;display:flex;flex:0 0 33.333%;;margin-top:40px;} |
|
|
|
|
.box > a{width:300px;height:300px;display:block;} |
|
|
|
|
.box:hover .list-box{ opacity: 0; } |
|
|
|
@ -94,7 +98,11 @@ box-shadow: 4px 4px 4px #ddd;}
|
|
|
|
|
50% { transform: translateY(-5px); } |
|
|
|
|
100% { transform: translateY(0px); } |
|
|
|
|
} |
|
|
|
|
.topBtn{color:#fff;font-weight:500;position:fixed;right:20px;bottom:20px;z-index:999;} |
|
|
|
|
.topBtn{color:#fff;font-weight:500;width:50px;height:50px;background:rgba(255,255,255,0.5);border:2px solid #2290c9;border-radius:100%; |
|
|
|
|
position:fixed;right:50px;bottom:20px;z-index:999;display:flex;justify-content:center;align-items:center;} |
|
|
|
|
.topBtn i{font-size:20px;} |
|
|
|
|
|
|
|
|
|
/*footer*/ |
|
|
|
|
#footer{background:#21272e;position:absolute;bottom:0;width:100%;height:160px;} |
|
|
|
|
.footer-box{display:flex;} |
|
|
|
|
.ft-logo{padding-right:80px;} |
|
|
|
@ -102,4 +110,32 @@ box-shadow: 4px 4px 4px #ddd;}
|
|
|
|
|
.ft-info span{display: inline-block;position: relative;color:rgba(255,255,255,0.8);font-size:0.875rem;font-weight:300;} |
|
|
|
|
.ft-info span::before {content: '';width: 1px;height: 12px;background-color:rgba(255,255,255,0.8);display: inline-block;margin: 0 10px;} |
|
|
|
|
.ft-info span.no-line::before{display:none;} |
|
|
|
|
.test{color:#000;background:#000;} |
|
|
|
|
.ft-sub{bottom:auto!important;} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*sub*/ |
|
|
|
|
.breadcrumbs{position: absolute;z-index:1;} |
|
|
|
|
.breadcrumbs ul{display:flex;} |
|
|
|
|
.breadcrumbs ul li::before{content:'\e93f';color:#555;padding:0 6px;font-family: 'xeicon' !important;display: inline-block;speak: none;font-style: normal; font-weight:normal;font-variant: normal;text-transform: none;vertical-align:middle;} |
|
|
|
|
.breadcrumbs ul li:first-child::before{display:none} |
|
|
|
|
.breadcrumbs ul li i{margin-right:4px;} |
|
|
|
|
.breadcrumbs ul li a{font-size:0.875rem;color:#555} |
|
|
|
|
.breadcrumbs ul li.on a{font-weight:600;} |
|
|
|
|
.sub-con{padding-top:100px;} |
|
|
|
|
.sub-ti{position:relative} |
|
|
|
|
.sub-ti .breadcrumbs{max-width:1280px;position:absolute;left:0px;top:20px;} |
|
|
|
|
.sub-ti h4{text-align:center;font-size:3rem;padding:100px 0;} |
|
|
|
|
.sub-inner{max-width:1280px;margin:0px auto;} |
|
|
|
|
.design-line-ti{position:relative;margin:0 auto;max-width:1280px;} |
|
|
|
|
.design-line-ti::before{content:'';display:block;width:30%;height:4px;background:#2290c9;position:absolute;left:0;} |
|
|
|
|
.design-line-ti::after{content:'';display:block;width:70%;height:4px;background:#f4f4f4;position:absolute;right:0;} |
|
|
|
|
.design-line{position:relative;margin:0 60px;} |
|
|
|
|
.design-line::before{content:'';display:block;width:4px;height:200px;background:#000;} |
|
|
|
|
.design-line::after{content:'';display:block;width:1px;height:200px;background:#000;} |
|
|
|
|
.sub-cont{display:flex;padding:100px 0;} |
|
|
|
|
.company .img{margin-right:60px;} |
|
|
|
|
.company .img img{width:450px;} |
|
|
|
|
.company .txt h6{font-size:1.8rem;color:#000} |
|
|
|
|
.company .txt p{line-height:1.8;font-size:1rem;padding:20px 0;word-break: keep-all;} |
|
|
|
|
.company .txt-box + .txt-box{margin-top:40px;} |
|
|
|
|
.point-txt{color:#2290c9} |