#mainVisual {overflow: hidden;position: relative;margin-top: 100px;} #mainVisual .swiper-slide {height: 700px;background-repeat:no-repeat;background-position: 50% 0; background-size: cover;} #mainVisual .mainVisual01 {background-image: url("../images/main/mainVisual01.jpg");} #mainVisual .mainVisual02 {background-image: url("../images/main/mainVisual02.jpg");} #mainVisual .mainVisual03 {background-image: url("../images/main/mainVisual03.jpg");} /*#mainVisual .mainVisual04 {background-image: url("../images/main/mainVisual04.jpg");}*/ #mainContents .company {padding: 80px 0;text-align: center;background-color: #ededed;} #mainContents .company .main {font-size: 1.8rem;color: #0081cb;font-weight: 700; padding-bottom: 30px;margin-bottom: 30px;position: relative; } #mainContents .company .main:after {content:"";display:block;width: 30px;height: 5px; background: #000;position: absolute;bottom: 0;left: 50%;margin-left: -15px; } #mainContents .company ul {margin-top: 60px;} #mainContents .company li {float: left;width: 33.33%;} #mainContents .company li img {width: 50%;} #mainContents .company li strong {display: block;font-size: 1.5rem;font-weight: 700;color: #436980; margin: 20px 0 5px; } #mainContents .company li span {display: block;} #mainContents .company li .more {display: block;width: 100px;height: 40px;line-height: 33px; border: 2px solid #436980; margin: 10px auto 0; border-radius:8px; color:#436980;} #mainContents .company li .more:hover {background-color:#436980; color:#fff;} /* blog post */ #mainContents .blog {padding: 80px 0 80px;background:#ededed;} #mainContents .blog h2 {text-align: center;font-size: 45px;font-weight: 100;line-height: 1; letter-spacing: -0.05; margin-bottom:60px; } #mainContents .blog h2:after {content: "";display: block;width: 50px;height: 4px;background: #000; margin: 0 auto;margin-top: 30px;margin-bottom: 30px;} #mainContents .blog h2 strong {font-weight: 700;} #mainContents .blog .desc {text-align: center;} #mainContents .blog li {width: 295px;} #mainContents .blog li a {display: block;width: 100%;} #mainContents .blog li a img {width: 100%;} #mainContents .blog li .txt {height: 180px;padding: 20px;background: #fff;} #mainContents .blog li .txt .title {font-size: 18px;font-weight: 500;width: 100%; white-space:nowrap;overflow: hidden;text-overflow:ellipsis; } #mainContents .blog li .txt .desc {text-align: left;margin: 10px 0;height: 80px;} #mainContents .blog .mask {overflow: hidden;margin-top: 30px;} #mainContents .blog .btns {text-align: center;margin-top: 30px;} #mainContents .blog .btns a {display: inline-block;width:50px;height: 50px;line-height: 36px;border: 2px solid #000; font-size: 40px;font-weight: 700;margin: 0 5px; } #mainContents .quickMenu {padding: 55px 0 55px 0;background-color: #fff;} #mainContents .quickMenu li {width: 18%;height: 250px;margin: 1%;float: left;overflow: hidden;} #mainContents .quickMenu li:hover a {margin-top: -250px;} #mainContents .quickMenu li a {display: block;text-align: center;color: #fff; transition:all 0.5s ease-out; } #mainContents .quickMenu li a .top {display: table;width: 100%;} #mainContents .quickMenu li a .top .inner {display: table-cell;vertical-align: middle;height: 250px;} #mainContents .quickMenu li a .top .inner .title {font-size: 24px;font-weight: 700; padding-bottom:5px;} #mainContents .quickMenu li a .top .inner .img {padding: 5px 0; } #mainContents .quickMenu li a .top .inner img {width: 20%;} #mainContents .quickMenu li a .top .inner .inner_text {padding-top:15px;} #mainContents .quickMenu li a .bottom {display: table;width: 100%;} #mainContents .quickMenu li a .bottom .inner {display: table-cell;vertical-align: middle;height: 250px;} #mainContents .quickMenu li a .bottom .inner p {font-size: 24px;font-weight: 700;} #mainContents .quickMenu li a .bottom .inner .more {display: inline-block;padding: 10px 25px; border: 1px solid #fff; } #mainContents .quickMenu li:nth-child(1) a .top {background: #3a4348;} #mainContents .quickMenu li:nth-child(2) a .top {background: #3a4348;} #mainContents .quickMenu li:nth-child(3) a .top {background: #3a4348;} #mainContents .quickMenu li:nth-child(4) a .top {background: #3a4348;} #mainContents .quickMenu li:nth-child(5) a .top {background: #3a4348;} #mainContents .quickMenu li:nth-child(1) a .bottom {background: #bd2426;} #mainContents .quickMenu li:nth-child(2) a .bottom {background: #b02124;} #mainContents .quickMenu li:nth-child(3) a .bottom {background: #a41f21;} #mainContents .quickMenu li:nth-child(4) a .bottom {background: #991c1e;} #mainContents .quickMenu li:nth-child(5) a .bottom {background: #8c181b;} /* === gt === */ #subContents .gtDiv {width: 550px;padding: 100px 0 300px;} #subContents .gtCeo {/*padding-left: 300px;*/ text-align:right;font-size: 20px;font-weight: 600;} #subContents .ocDiv {padding: 30px 0 50px;} #subContents .ocCeo {padding-left: 300px;font-size: 20px;font-weight: 600;} @media all and (max-width:1240px){ #mainVisual .swiper-slide {height: 500px;} } @media all and (max-width:768px){ #subContents .gtBg {background-image:none);} #subContents .gtDiv {width: 100%; padding: none;} #subContents .gtCeo {100px;font-size: 20px;font-weight: 600;} #mainVisual {margin-top: 60px;} #mainVisual .swiper-slide {height: 300px;} #mainContents .company {padding: 30px 10px;} #mainContents .company ul {margin-top: 20px;} #mainContents .company .main {font-size: 1.25rem;} #mainContents .company p br {content:"";} #mainContents .company li {float: none;width: 100%;margin-top: 20px;border: 1px solid #d9d9d9; padding: 20px 0;border-radius:10px; } #mainContents .company li img {width: 35%;} #mainContents .blog {padding: 40px 10px 20px;} #mainContents .blog h2 {font-size: 30px;line-height: 1.5em} #mainContents .quickMenu li {width: 48%;} #mainContents .noticeDiv table {margin: 0 auto;} #mainContents .noticeDiv .noticeTd {width: 100%;display: block;} } @media all and (max-width:480px){ #subContents .gtBg {background-image:none);} #subContents .gtDiv {width: 100%; padding: none;} #subContents .gtCeo {padding-left: 120px;} #mainContents .quickMenu {padding: 30 10px;} #mainContents .quickMenu li {width: 100%;margin: 10px 0 0 0;} } /* 반응형 코딩시작 * / @media all and (max-width:640px) { html,body { font-size: 12px;} .container {width: 100px;} #product .productBox {width: 100%;} #product li {width: 48%;margin: 1%;} } @media all and (max-width: 420px;) { #product li {width: 98px;margin: 1%; } /* 반응형 코딩 끝 */