@charset "utf-8";

/* common */
i.br {display: block;}
.sub .visual {
    position: relative;
    width: 100%; height: 220px;
    margin-top: 55px;
    background: url(/img/sub1_bg_m.jpg) no-repeat center/cover;
}
.sub .visual h3 {
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%,-50%);
    font-size: 3.8rem; color: #fff;
}

/* sub1_1 인사말 */
.ceoInner {padding: 60px 4.533% 80px;}
.ceoInner .title {font-size: 2.1rem; line-height: 27px; font-weight: 700;}
.ceoInner .content {
    margin: 26px 0 19px;
    font-size: 1.4rem; color: #747474;
    line-height: 23px;
}
.ceoInner b {
    font-size: 1.6rem; line-height: 24px;
    white-space: pre;
}
.ceoInner i.img {
    position: relative;
    display: block;
    width: 100%; height: 220px;
    margin-top: 35px;
    background: url(/img/sub1_1_dmz_m.jpg) no-repeat center/cover;
}
.ceoInner i.img:after {
    position: absolute;
    content:"양구 DMZ 피라미드형 온실공사";
    bottom: -20px; right: 2px;
    font-size: 1.2rem; color: #747474;
    font-style: normal;
}
/* sub1_2 연혁 */
.hisInner {padding: 60px 4.533% 80px;}
.hisInner .tabs {margin-bottom: 17px;}
.hisInner .tabs:nth-child(n +2) {margin-top: 42px;}
.hisInner .tabs li {float: left; width: 33.333%;}
.hisInner .tabs li a {
    display: block;
    height: 37px;
    line-height: 38px; text-align: center;
    font-size: 1.3rem; color: #747474;
    background: #f8f8f8; border: 1px solid #eee;
}
.hisInner .tabs li.on a {
    font-size: 1.7rem; color: #fff;
    font-weight: 700;
    line-height: 42px;
    background: #73c102;
    border: none;
}
.hisInner article ul li {
    width: 100%;
    background: #fcfcfc; border: 1px solid #eee;
}
.hisInner article ul li:first-child {
    margin-top: 11px;
    padding: 17px 0 11px 20px;
    font-size: 1.4rem; font-weight: 700;
    border-bottom: none;
}
.hisInner article ul li:last-child {
    padding: 0 0 17px 20px;
    font-size: 1.4rem;
    border-top: none;
}

/* sub1_3 오시는길 */
.mapInner {padding: 60px 4.533% 80px;}
.mapInner iframe {width: 100%; height: 425px;}
.mapInner .text .right {
    width: 100%;
    padding: 31px 0 29px 20.703%;
    font-size: 1.4rem; color: #fff;
    background: #3b8c03;
}
.mapInner .text .right p:nth-child(n+2) {margin-top: 23px;}
.mapInner .text .right p {position: relative;}
.mapInner .text .right p:before {
    position: absolute;
    content: "";
    top: 50%; left: -40px; transform: translateY(-50%);
    width: 17px; height: 24px;
    background: url(/img/sub1_map01.png) no-repeat center/contain;
}
.mapInner .text .right p:nth-child(2):before {
    background-image: url(/img/sub1_map02.png);
}
.mapInner .text .right p:nth-child(3):before {
    background-image: url(/img/sub1_map03.png);
}
.mapInner .text .right p:nth-child(4):before {
    background-image: url(/img/sub1_map04.png);
}

/* sub2 주요실적 */
.sub2 .visual {background-image: url(/img/sub2_bg_m.jpg);}
.perInner {padding: 60px 4.533% 80px;}
.perInner h3 {
    font-size: 1.9rem;
    line-height: 27px;
    font-weight: 400;
    text-align: center;
}
.perInner h3:after {
    display: block;
    content:"";
    width: 70px; height: 1px;
    margin: 21px auto 19px;
    background: #000;
}
.perInner .slider {position: relative;}
.perInner .slider img {
    width: 100%; height: 205px;
    object-fit: cover;
}
.perInner .slider:after {
    position: absolute;
    content: "";
    top: 202px; left: 0;
    width: 0; height: 3px;
    background: #73c102;
}
.perInner .slider.pro:after {
    animation: proBar 5s 1;
    animation-fill-mode: forwards;
}
@keyframes proBar{
    0% {width:0;}
    100% {width:100%;}
}
.perInner .slick-arrow {display: none;}
.perInner .slick-dotted.slick-slider {margin-bottom: 0;}
.perInner .slick-dots {
    position: static;
    margin-top: 5px;
}
.perInner .slick-dots li {
    position: relative;
    width: 80px; height: 70px;
    margin: 0;
    background: url(/img/sub2_5_tab01.jpg) no-repeat center/cover;
}
.perInner .slick-dots li:before {
    position: absolute;
    top: 0; left: 0;
    content:"";
    width: 100%; height: 100%;
    background: rgba(0,0,0,.6);
    transition: 0.5s;
}
.perInner .slick-dots li:nth-child(n+2) {margin-left: 2.052%;}
.perInner .slick-dots li.slick-active:before {opacity: 0;}
.perInner .slick-dots li:nth-child(2) {background-image: url(/img/sub2_5_tab02.jpg);}
.perInner .slick-dots li:nth-child(3) {background-image: url(/img/sub2_5_tab03.jpg);}
.perInner .slick-dots li:nth-child(4) {background-image: url(/img/sub2_5_tab04.jpg);}
.perInner .text {
    margin: 30px 0 31px;
    white-space: pre-line;
}
.perInner .text p {font-size: 1.4rem; line-height: 23px;}
.perInner .material {text-align: center;}
.perInner .material b {
    font-size: 2.1rem; color: #747474;
    font-weight: 400;
}
.perInner .material b:after {
    display: block;
    content:"";
    width: 40px; height: 1px;
    margin: 16px auto 13px;
    background: #747474;
}
.perInner .material li {
    background: #f8f8f8;
    font-size: 1.4rem; color: #747474;
}
.perInner .material li:first-child {
    padding: 13px 0 7px;
    font-weight: 700;
}
.perInner .material li:last-child {
    padding-bottom: 13px;
}
.perInner .material ul:nth-of-type(2n) li {background: #eee;}
.perInner .material ul:nth-of-type(n+2) {margin-top: 4px;}

/* sub2 각 페이지별 img 체인지 */
.sub2_1 .perInner .slick-dots li {background-image: url(/img/sub2_1_tab01.jpg);}
.sub2_1 .perInner .slick-dots li:nth-child(2) {background-image: url(/img/sub2_1_tab02.jpg);}
.sub2_1 .perInner .slick-dots li:nth-child(3) {background-image: url(/img/sub2_1_tab03.jpg);}
.sub2_1 .perInner .slick-dots li:nth-child(4) {background-image: url(/img/sub2_1_tab04.jpg);}

.sub2_2 .perInner .slick-dots li {background-image: url(/img/sub2_2_tab01.jpg);}
.sub2_2 .perInner .slick-dots li:nth-child(2) {background-image: url(/img/sub2_2_tab02.jpg);}
.sub2_2 .perInner .slick-dots li:nth-child(3) {background-image: url(/img/sub2_2_tab03.jpg);}
.sub2_2 .perInner .slick-dots li:nth-child(4) {background-image: url(/img/sub2_2_tab04.jpg);}

.sub2_3 .perInner .slick-dots li {background-image: url(/img/sub2_3_tab01.jpg);}
.sub2_3 .perInner .slick-dots li:nth-child(2) {background-image: url(/img/sub2_3_tab02.jpg);}
.sub2_3 .perInner .slick-dots li:nth-child(3) {background-image: url(/img/sub2_3_tab03.jpg);}
.sub2_3 .perInner .slick-dots li:nth-child(4) {background-image: url(/img/sub2_3_tab04.jpg);}

.sub2_4 .perInner .slick-dots li {background-image: url(/img/sub2_4_tab01.jpg);}
.sub2_4 .perInner .slick-dots li:nth-child(2) {background-image: url(/img/sub2_4_tab02.jpg);}
.sub2_4 .perInner .slick-dots li:nth-child(3) {background-image: url(/img/sub2_4_tab03.jpg);}
.sub2_4 .perInner .slick-dots li:nth-child(4) {background-image: url(/img/sub2_4_tab04.jpg);}
.sub2_4 .perInner .material {float: left;}
.sub2_4 .perInner .material2 {margin-left: 30px;}

.sub2_6 .perInner .slick-dots li {background-image: url(/img/sub2_6_tab01.jpg);}
.sub2_6 .perInner .slick-dots li:nth-child(2) {background-image: url(/img/sub2_6_tab02.jpg);}
.sub2_6 .perInner .slick-dots li:nth-child(3) {background-image: url(/img/sub2_6_tab03.jpg);}
.sub2_6 .perInner .slick-dots li:nth-child(4) {background-image: url(/img/sub2_6_tab04.jpg);}

/* sub3 공사실적 */
.sub3 .visual {background-image: url(/img/sub3_bg_m.jpg);}
.sub3 .visual h3 {width: 100%; text-align: center;}
.grWInner {padding: 60px 4.533% 80px;}
.grWInner .tabs {margin-bottom: 17px;}
.grWInner .tabs li {float: left; width: 50%}
.grWInner .tabs li a {
    display: block;
    height: 37px;
    font-size: 1.3rem; color: #747474;
    background: #f8f8f8;
    border: 1px solid #eee;
    line-height: 36px;
    text-align: center;
    transition: background 0.5s;
}
.grWInner .tabs li a.on {
    background: #73c102;
    font-size: 1.7rem; color: #fff;
    font-weight: 700;
    line-height: 40px;
    border: none;
}
.grWInner .tabs li:nth-child(2n) a {border-left: none;}
.grWInner .tabs li:nth-child(n+3) a {border-top: none;}
.grWInner .tabContent section:nth-of-type(n+2) {display: none;}
.grWInner .tabContent article {
    width: 100%;
    margin-top: 6px;
    padding: 21px 4.105% 18px;
    border: 1px solid #eee;
}
.grWInner .tabContent article h5 {
    margin-bottom: 16px;
    font-size: 2.1rem;
    line-height: 27px;
    font-weight: 400;
    white-space: pre-line;
}
.grWInner .tabContent article p {font-size: 1.4rem; color: #747474;}
.grWInner .tabContent article p.pur {margin: 7px 0 14px;}
.grWInner .tabContent article span {font-size: 1.2rem; color: #747474;}

/* sub4 시공실적 갤러리 */
.sub4 .visual {background-image: url(/img/sub4_bg_m.jpg);}
.sub4 .visual h3 {width: 100%; text-align: center;}
.grInner {padding: 60px 4.533% 80px;}
.grInner h3 {font-size: 2.1rem;}
.grInner .form {margin: 14px 0 19px;}
.grInner select {
    float: left;
    width: 70px; height: 25px;
    padding-left: 10px;
    font-size: 1.4rem; color: #747474;
    border-color: #747474;
}
.grInner input {
    float: left;
    width: 67.633%; height: 25px;
    margin-left: 5px;
    border: 1px solid #73c102;
    font-size: 1.4rem;
    padding-left: 10px;
}
.grInner button {
    position: relative;
    float: left;
    width: 34px; height: 25px;
    background: #73c102;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.grInner button:after {
    position: absolute;
    content: "";
    top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 18px; height: 15px;
    background: url(/img/sub4_search.png) no-repeat center/contain;
}
.grInner .photo {
    float: left;
    width: 48.973%;
}
.grInner .photo a {display: block;}
.grInner .photo img {
    width: 100%; height: 200px;
    object-fit: cover;
}
.grInner .photo:nth-child(n+4) {margin-top: 13px;}
.grInner .photo:nth-child(2n-1) {margin-left: 2.054%;}
.grInner .photo .text {
    width: 100%;
    padding: 10px 1.796% 7px;
    border: 1px solid #eee; border-top: none;
	background: #fff;
}
.grInner h5 {
    margin-bottom: 6px;
    font-size: 1.3rem; color: #000;
    font-weight: 400;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.grInner .text span {font-size: 1rem; color: #747474; display: none;} /* 0204삭제 */
.grInner .button {text-align: center; margin-top: 32px;}
.grInner .button li {display: inline-block;}
.grInner .button li a {
    display: block;
    width: 30px; height: 30px;
    margin: 0 6px;
    font-size: 1.4rem; color: #333;
    line-height: 26px;
    border: 1px solid #747474;
    font-family: sans-serif;
}
.grInner .button li.on a {background: #73c102; color: #fff; border: none;}

/* sub4 갤러리 뷰페이지 */
.vwInner {padding:60px 4.533% 80px; text-align: center;}
.vwInner span {font-size: 1.2rem; color: #747474; display: none;} /* 0204삭제 */
.vwInner h3 {font-size: 2.1rem; margin-top: 16px;}
.vwInner h3:after {
    display: block;
    content: "";
    margin: 16px 0 29px;
    width: 100%; height: 1px;
    background: #ddd;
}
.vwInner .gallery img {width: 100%; height: 230px; object-fit: cover;}
.vwInner .gallery .textBox {
    margin: 20px 0 24px;
    font-size: 1.4rem; color: #747474;
    line-height: 23px;
    text-align: left;
}
.vwInner .gallery .textBox b {font-weight: 400; color: #73c102;}
.vwInner a.button {
    display: block;
    width: 120px; margin: 0 auto;
    padding: 10px 0;
    font-size: 1.4rem; color: #73c102;
    border: 1px solid #73c102;
}

/* sub5 고객센터 */
.sub5 .visual {background-image: url(/img/sub5_bg_m.jpg);}
.serInner {padding: 60px 4.533% 80px;}
.serInner h3 {font-size: 2.1rem;}
.serInner .form {
    margin-top: 11px;
    border-top: 1px solid #888;
    color: #747474;
}
.serInner .form div {
    padding: 14px 0 14px 2.052%;
    border-bottom: 1px solid #dedfdc;
}
.serInner .form label {font-size: 1.4rem; margin-right: 33px;}
.serInner .form input {
    width: 48.853%; height: 24px;
    padding: 0 5px;
    font-size: 1.3rem;
    border: 1px solid #a5a5a5;
}
.serInner .form .title label {margin-right: 45px;}
.serInner .form .mail input, .serInner .form .title input {width: 71.847%;}
.serInner .form .content label {margin-right: 19px; vertical-align: top;}
.serInner .form textarea {
    width: 71.847%; height: 250px;
    padding: 3px 5px;
    font-size: 1.3rem;
    overflow-y: scroll;
}
.serInner button {
    display: block;
    width: 120px; height: 33px;
    margin: 24px auto 0;
    font-size: 1.4rem; color: #fff;
    background: #73c102;
    text-indent: 0;
}

@media screen and (min-width:1084px){
    /* common */
    i.br {display: inline;}
    header {border-bottom: 1px solid #eee;}
    .subBg {border-top: 1px solid #eee;}
    .gnb a {color: #333;}
    .sub .visual {
        height: 380px;
        margin-top: 100px;
        background-image: url(/img/sub1_bg.jpg);
    }
    .sub .visual h3 {font-size: 6rem;}
    .sub .visual .pc {
        position: absolute;
        width: 1280px;
        bottom: 0; left: 50%; transform: translateX(-50%);
    }
    .sub .visual .pc li {float: left;}
    .sub .visual .pc li a {
        display: block;
        width: 320px; height: 60px;
        line-height: 58px;
        background: #fff; border: 1px solid #eee;
        font-size: 1.8rem; color: #747474;
        text-align: center;
    }
    .sub .visual .pc li:nth-child(n+2) a {border-left: none;}
    .sub .visual .pc li.on a {
        color: #73c102; font-weight: 700;
        border-bottom: 3px solid #73c102;
    }
    
    /* miniNavi */
    .mnb {float: right; margin: 44px 104px 0 0;}
    .mnb li {float: left; font-size: 1.4rem;}
    .mnb li:nth-child(2n) {font-family: sans-serif; margin: 0 10px;}
    .mnb li a {color: #333;}
    
    /* sub1_1 인사말 */
    .ceoInner {padding: 157px 0 180px; width: 1280px; margin: 0 auto;}
    .ceoInner .text {
        float: left;
        width: 694px;
    }
    .ceoInner .title {font-size: 2.4rem; transform: translateY(20px); opacity: 0;}
    .ceoInner .content {
        margin: 67px 0 53px;
        font-size: 1.6rem;
        line-height: 30px;
        transform: translateY(20px); opacity: 0;
    }
    .ceoInner b {
        display: block;
        font-size: 1.8rem; line-height: 30px;
        transform: translateY(20px); opacity: 0;
    }
    .ceoInner.show .title, .ceoInner.show .content, .ceoInner.show b {
        transform: translateY(0); opacity: 1;
        transition: 0.8s;
    }
    .ceoInner.show .content {transition-delay: 0.2s;}
    .ceoInner.show b {transition-delay: 0.4s;}
    .ceoInner i.img {
        float: right;
        width: 408px; height: 546px;
        background-image: url(/img/sub1_1_dmz.jpg);
    }
    .ceoInner i.img:after {bottom: -24px; right: 2px;}
    
    /* sub1_2 연혁 */
    .hisInner {padding: 157px 0 180px; width: 1280px; margin: 0 auto;}
    .hisInner .tabs {width: 900px; margin: 0 auto 45px;}
    .hisInner .tabs:nth-child(n +2) {margin-top: 95px;}
    .hisInner .tabs li {width: 300px;}
    .hisInner .tabs li a {
        height: 60px;
        line-height: 60px;
        font-size: 1.8rem;
    }
    .hisInner .tabs li.on a {
        font-size: 2.4rem; 
        line-height: 64px;
    }
    .hisInner article ul {width: 1100px; margin: 28px auto 0;}
    .hisInner article ul:after {
        content: "";
        clear: both;
        display: block;
    }
    .hisInner article ul li {width: auto; float: left;}
    .hisInner article ul li:first-child {
        width: 180px; height: 100px;
        margin: 0;
        padding: 40px 0 40px 88px;
        font-size: 2.4rem;
        border: 1px solid #eee; border-right: none;
    }
    .hisInner article ul li:last-child {
        width: 920px; height: 100px;
        padding: 42px 0 42px 105px;
        font-size: 1.8rem;
        border: 1px solid #eee; border-left: none;
    }
    
    /* sub1_3 오시는길 */
    .mapInner {padding: 157px 0 180px; width: 1280px; margin: 0 auto;}
    .mapInner iframe {width: 100%; height: 480px;}
    .mapInner .text {margin-top: -2px;}
    .mapInner .text .left {
        position: relative;
        width: 50%; height: 240px;
        float: left;
        color: #fff;
        background: #3b8c03;
        text-align: center;
        font-size: 4rem;
        line-height: 240px;
    }
    .mapInner .text .left:after {
        position: absolute;
        content:"";
        right: 0; top: 46px;
        width: 1px; height: 150px;
        background: rgba(255,255,255,.3);
    }
    .mapInner .text .right {
        width: 50%; height: 240px;
        float: right;
        padding: 40px 0 38px 104px;
    }
    .mapInner .text .right p:nth-child(n+2) {margin-top: 34px;}
    .mapInner .text .right p:before {
        top: 50%; left: -50px; transform: translateY(-50%);
        width: 21px; height: 29px;
    }
    .mapInner .text .right p:nth-child(4):before {
		width: 24px; left: -51px;
		background-image: url(/img/sub1_map04.png);
	}
    /* sub2 주요실적 */
    .sub2 .visual {background-image: url(/img/sub2_bg.jpg);}
    .sub2 .visual .pc li a {width: 213px;}
    .perInner {padding: 157px 0 160px; width: 1280px; margin: 0 auto;}
    .perInner h3 {
        font-size: 2.4rem;
        line-height: 1;
    }
    .perInner h3:after {
        width: 50px; height: 1px;
        margin: 18px auto 33px;
    }
    .perInner .slick-dotted.slick-slider {width: 760px;}
    .perInner .slider img {width: 760px; height: 415px;}
    .perInner .slider:after {
        top: 410px;
        height: 5px;
    }
    .perInner .slick-dots {
        position: absolute;
        top: 0; left: 780px;
        margin-top: 0;
    }
    .perInner .slick-dots li {
        float: left;
        width: 240px; height: 195px;
    }
    .perInner .slick-dots li:nth-child(n+2) {margin: 0px;}
    .perInner .slick-dots li:nth-child(2n) {margin-left: 20px;}
    .perInner .slick-dots li:nth-child(3) {clear: both;}
    .perInner .slick-dots li:nth-child(n+3) {margin-top: 24px;}
    .perInner .text {margin: 46px 0 60px;}
    .perInner .text p {font-size: 1.6rem; line-height: 30px;}
    .perInner .material {text-align: left;}
    .perInner .material b {font-size: 2.4rem;}
    .perInner .material b:after {
        width: 30px; height: 1px;
        margin: 18px 0 33px;
    }
    .perInner .material ul:after {
        display: block;
        clear: both;
        content: "";
    }
    .perInner .material li {
        float: left;
        font-size: 1.6rem;
    }
    .perInner .material li:first-child {
        width: 160px; height: 42px;
        margin-right: 2px;
        padding: 14px 0 14px 26px;
    }
    .perInner .material li:last-child {
        width: 420px; height: 42px;
        padding: 14px 0 14px 25px;
    }
    .perInner .material ul:nth-of-type(n+2) {margin-top: 2px;}
    
    /* sub3 공사실적 */
    .sub3 .visual {background-image: url(/img/sub3_bg.jpg);}
    .grWInner {padding: 157px 0 160px; width: 1280px; margin: 0 auto;}
    .grWInner .tabs {margin-bottom: 82px;}
    .grWInner .tabs li {float: left; width: 25%}
    .grWInner .tabs li a {
        height: 60px;
        font-size: 1.8rem; color: #333;
        line-height: 59px;
    }
    .grWInner .tabs li a.on {
        font-size: 1.9rem;
        line-height: 59px;
    }
    .grWInner .tabs li:nth-child(n) a {border: 1px solid #eee;}
    .grWInner .tabs li:nth-child(n+2) a {border-left: none;}
    .grWInner .tabContent article {
        float: left;
        width: 406px;
        margin-top: 31px;
        padding: 46px 28px;
        transition-property: transform, background;
        transition-duration: 0.5s;
		cursor: default;
    }
    .grWInner .tabContent article:hover {
        transform: translateY(-15px);
        background: #73c102;
        color: #fff;
    }
    .grWInner .tabContent article:hover p {color: #fff;}
    .grWInner .tabContent article:hover span {color: #fff;}
    .grWInner .tabContent article:nth-of-type(3n-1) {margin: 0 31px;}
    .grWInner .tabContent article h5 {
        margin-bottom: 18px;
        font-size: 2.4rem;
        line-height: 36px;
    }
    .grWInner .tabContent article p {font-size: 1.6rem;}
    .grWInner .tabContent article p.pur {margin: 10px 0 30px;}
    .grWInner .tabContent article span {font-size: 1.4rem;}
    
    /* sub4 시공실적 갤러리 */
    .sub4 .visual {background-image: url(/img/sub4_bg.jpg);}
    .grInner {padding: 117px 0 180px; width: 1280px; margin: 0 auto;}
    .grInner h3 {
        position: relative;
        margin-left: 20px;
        font-size: 2.4rem;
    }
    .grInner h3:before {
        position: absolute;
        top: -8px; left: -20px;
        content: "";
        width: 16px; height: 19px;
        background: url(/img/sub4_titledeco.png) no-repeat center/contain;
    }
    .grInner .form {margin: 31px 0 45px 10px;}
    .grInner select {
        width: 100px; height: 30px;
        padding-left: 14px;
        font-size: 1.6rem;
    }
    .grInner input {
        width: 300px; height: 30px;
        margin: 0 8px;
        border-color: #b9b9b9;
        font-size: 1.6rem;
        padding-left: 14px;
    }
    .grInner button {
        width: 70px; height: 30px;
        background: #73c102;
        border-radius: 0;
        text-indent: 0;
        font-size: 1.6rem; color: #fff;
        cursor: pointer;
    }
    .grInner button:after {display: none;}
    .grInner .gallery {
        position: relative;
        width: 1200px; margin: 0 auto;
    }
    .grInner .gallery:before {
        position: absolute;
        content:"";
        top: 50%; left: 50%; transform: translate(-50%,-50%);
        width: 300%; height: 110%;
        background: #f8f8f8;
        z-index: -1;
    }
    .grInner .photo {width: 280px; margin-left: 27px;}
    .grInner .photo:nth-child(n+3) {margin-top: 0px;}
    .grInner .photo:nth-child(n+6) {margin-top: 20px;}
    .grInner .photo:nth-child(2),.grInner .photo:nth-child(6) {margin-left: 0;}
    .grInner .photo .text {padding: 18px 16px 15px;}
    .grInner h5 {
        margin-bottom: 9px;
        font-size: 1.5rem;
    }
    .grInner .text span {font-size: 1.2rem;}
    .grInner .button {margin-top: 61px;}
    .grInner .button li a {
        width: 34px; height: 34px;
        margin: 0 3px;
        font-size: 1.4rem;
        line-height: 30px;
    }
    .grInner .button li.on a {line-height: 32px;}
    
    /* sub4 갤러리 뷰페이지 */
    .vwInner {padding:94px 0 111px; width: 1280px; margin: 0 auto;}
    .vwInner span {font-size: 1.4rem;}
    .vwInner h3 {font-size: 3rem; margin-top: 14px;}
    .vwInner h3:after {
        margin: 40px 0 52px;
        width: 100%;
    }
    .vwInner .gallery img {display: block; width: 800px; height: 460px; margin: 0 auto;}
    .vwInner .gallery .textBox {
        width: 1080px;
        margin: 58px auto;
        font-size: 1.6rem;
        line-height:30px;
    }
    .vwInner a.button {
        position: relative;
        width: 180px;
        padding: 16px 0 16px 51px;
        font-size: 1.6rem;
        text-align: left;
        overflow: hidden;
        transition: 0.6s;
    }
    .vwInner a.button:after {
        position: absolute;
        content: "";
        top: 50%; right: 33px; transform: translateY(-50%);
        width: 15px; height: 15px;
        background: url(/img/sub4_view_tile.png) no-repeat center/cover;
    }
    .vwInner a.button:before {
        position: absolute;
        content: "";
        top: 50%; right: 37px; transform: translateY(-50%) scale(0);
        width: 8px; height: 8px;
        border-radius: 10px;
        background: #73c102;
        z-index: -1;
        transition: 0.6s ease;
    }
    .vwInner a.button:hover {color: #fff; padding-left: 61px;}
    .vwInner a.button:hover:before {
        transform: translateY(-50%) scale(40);
    }
    
    /* sub5 고객센터 */
    .sub5 .visual {background-image: url(/img/sub5_bg.jpg);}
    .serInner {padding: 117px 0 90px; width: 770px; margin: 0 auto;}
    .serInner h3 {font-size: 2.4rem;}
    .serInner .form {margin-top: 16px;}
    .serInner .form div {padding: 19px 0 18px 30px;}
    .serInner .form label {
        margin-right: 54px;
        font-size: 1.6rem; font-weight: 700;
    }
    .serInner .form input {
        width: 200px; height: 26px;
        font-size: 1.5rem;
    }
    .serInner .form .phone, .serInner .form .mail {float: left;}
    .serInner .form .phone {width: 48%;}
    .serInner .form .mail {width: 52%;}
    .serInner .form .title {clear: both;}
    .serInner .form .mail input {width: 240px;}
    .serInner .form .title label {margin-right: 68px;}
    .serInner .form .title input {width: 610px;}
    .serInner .form .content label {margin-right: 40px;}
    .serInner .form textarea {
        width: 610px; height: 415px;
        font-size: 1.5rem;
    }
    .serInner button {
        width: 180px; height: 46px;
        margin: 26px auto 0;
        font-size: 1.6rem; color: #fff;
        cursor: pointer;
    }
}