.main-sec {padding: 80px 0; }
.main-sec .htitle {width: 100%; margin-bottom: 45px; position: relative;}
.htitle h1 {    
    font-size: 44px;
    font-weight: 600;
    margin: 0 auto 10px;
    color: #222;
    text-transform: uppercase;
    letter-spacing: -1px;
    text-align: left;
}
.htitle p {
    font-size: 18px!important;
    letter-spacing: -0.03em;
    font-weight: 600;
    color: #222;
    line-height: 2;
    word-break: keep-all;
}
.htitle h2 {    
    font-size: 32px;
    font-weight: 800;
    margin: 0 auto 30px;
    color: #222;
    text-transform: uppercase;
}


@media screen and (max-width: 768px){
    .main-sec {padding: 60px 0;}
    .htitle h2 {font-size: 28px;}

}
@media screen and (max-width: 575px){
    .htitle h2 {font-size: 25px;}
}
.morebtn a {
    font-size: 16px;
    color: #222;
    font-weight: 500;
    transition: all 0.2s;
}
.morebtn a:hover {color: #33b1d3;}

.morebtn img {
    margin-right: 15px;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .2s;
    -moz-transition: .2s;
    -ms-transition: .2s;
    -o-transition: .2s;
    transition: .2s;
}
.morebtn a:hover img {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}  



/*메인-company*/
#maincompany .row > div {position: relative;}
#maincompany .container > div {position: relative;}
#maincompany .htitle {z-index: 150; position: relative;}
#maincompany .htitle p {width: 60%;}

.customerwrap {padding: 30px 0 120px; position: relative; z-index: 100;}
.customerwrap h3 {
    color: #222;
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 50px;
}

.custslick {height: 150px; position: relative;}
.custslick ul {position: absolute;}
.custslick ul li {float: left; height: 80px;}
.custslick img {height: 100%;}

.circlewrap {
    position: absolute;
    z-index: 1;
    top: 55%;
    right: -3%;
    transform: translateY(-50%);
    width: 480px;
    height: 480px;
    background: url(../img/circlebg.png) center center no-repeat;
    background-size: cover;

    display: grid;
    justify-content: center;
    align-content: center;
}
.circlewrap > * {
    grid-column: 1;
    grid-row: 1;
}
.circleitem {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 3px solid #127db5;
    background: rgba(255, 255, 255, .6);
    padding: 30px 10px;
    text-align: center;

    animation: spinAround 12s linear infinite;
}
.circle01 {animation-delay: 0s;}
.circle02 {animation-delay: -6s;}

.circle01 ul {
    display: block;
    animation: rotate 12s linear infinite;
}
.circle02 ul {
    display: block;
    animation: rotate 12s linear infinite;
    animation-delay: -6s;
}

@keyframes spinAround {
    from {
      transform: rotate(0deg) translate(220px) scale(1);
    }
    to {
      transform: rotate(360deg) translate(220px) scale(1);
    }
}
@keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(-360deg);
    }
}

.circleitem ul li{color: #127db5;}



/*메인-제품소개*/
#mainproduct {background: #f7f7f7; position: relative;}
#mainproduct .morebtn, #maingallery .morebtn {position: absolute; top: 0; right: 10px;}

.productwrap {position: relative; clear: both;}
.productwrap > ul {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 400px;
    clear: both;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    margin-bottom: 20px;
} 
.productwrap > ul:nth-child(1) > li:first-child {background: url(../img/main01.jpg) center center no-repeat; background-size: cover;}
.productwrap > ul:nth-child(2) > li:first-child {background: url(../img/main02.jpg) center center no-repeat; background-size: cover;}
.productwrap > ul:nth-child(3) > li:first-child {background: url(../img/main03.jpg) center center no-repeat; background-size: cover;}
.productwrap > ul:nth-child(4) > li:first-child {background: url(../img/main04.jpg) center center no-repeat; background-size: cover;}
.productwrap > ul:nth-child(5) > li:first-child {background: url(../img/main05.jpg) center center no-repeat; background-size: cover;}
.productwrap > ul:nth-child(6) > li:first-child {background: url(../img/main06.jpg) center center no-repeat; background-size: cover;}

/*.productwrap > ul:hover > li:first-child{opacity: .8; transition: all .2s;}*/

.productwrap > ul > li {display: inline-block; float: left ;position: relative;height: 100%;}
.productwrap > ul > li:first-child {width: 35%;}
.productwrap > ul > li:last-child {width: 65%; padding: 30px; }
.productwrap > ul > li a {display: block; width: 100%; height: 100%;}
.productwrap > ul > li a img {width: 100%;}

.productwrap ul li h3 {
    color: #222;
    font-weight: 700;
    margin-bottom: 18px;
}
.txtwrap li {padding-left: 20px; margin-bottom: 8px;}
.txtwrap li p {
    line-height: 1.3; color: #222;
    font-size: 16px;
    position: relative;
    letter-spacing: .6px;
}
.txtwrap li p::before {
    position: absolute;
    content: '';
    width: 5px; height: 5px;
    background: #127db5;
    border-radius: 50%;
    top: 10px;
    left: -15px;
}

/*메인-갤러리슬라이드*/
#maingallery {
    position: relative;
    clear: both;
    width: 100%;
    text-align: center;
}
#maingallery .gmap iframe {height: 350px;}
.infowrap {padding: 40px 0 0px 20px; text-align: left;}
.infowrap h3{
    color: #222;
    font-size: 22px!important;
    font-weight: 600;
    margin-bottom: 10px;
}
.infowrap p {
    color: #222;
    font-size: 18px;
    line-height: 1.5;
}
.infolist {
    flex-wrap: wrap;
    display: flex;
    margin-top: 10px;
}
.infolist li {display: flex; margin-right: 20px;}
.infolist li span {margin-right: 10px; padding: 0;}

#footerarea .infolist {margin-top: 0;}



/*메인-공지사항*/
#maincustomer h3 {
    font-family: 'Roboto'!important;
    font-size: 24px;
    color: #3d3d3d;
    font-weight: 600;
    text-transform: uppercase;
    padding-top: 5px;
    margin-bottom: 5px!important;
}
#maincustomer .container .cont-wrap {position: relative;border: 1px solid #e3e3e3;padding: 40px; min-height: 270px;}
#maincustomer h3 {
    font-family: 'Roboto'!important;
    font-size: 24px;
    color: #3d3d3d;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 10px!important;
    text-align: left;
}
#maincustomer .board_output td {
    font-weight: 300;
    padding: 0px 0 0!important;
}
#maincustomer .board_output a {padding-left: 0px!important; display: block;}
#maincustomer .notice-area a:hover {
    color: #33b1d3!important;
}

#maincustomer .board_output {width: 100%!important;}
#maincustomer .board_output .board_output_1_tr td:last-child {text-align: right;}


/*메인-CUSTOMER CENTER*/
.gote-area {padding-top: 10px;}
.tel-wrapper li:nth-child(1) a {
    font-size: 36px;
    font-family: 'Roboto'!important;
    font-weight: 600;
    color: #33b1d3 ;
    line-height: 1.1;
}
.tel-wrapper li:nth-child(2) {
    font-size: 28px;
    font-family: 'Roboto'!important;
    letter-spacing: -0.02em;
    font-weight: 600;
    color: #6d6d6d;
    line-height: 1.8;
    border-bottom: 1px solid #d0d0d0;
}
.tel-wrapper li:nth-child(3) a {
    font-size: 16px;
    font-weight: 300;
    color: #212121;
    padding-top: 10px!important;
    display: block;
}
.goto-btns ul {
    display: flex;
    flex-direction: column;
    text-align: center;
    height: 100%;
    justify-content: space-between;
}
.goto-btns a {
    display: block;
    padding: 5px;
    border: 1px solid #33b1d3 ;
    color: #33b1d3 ;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: -0.04em;
}
.goto-btns a:hover {
    background-color: #33b1d3 ;
    color: #fff;
}



@media screen and (max-width: 1200px){
    #maincustomer .container .cont-wrap {max-width: 600px; margin: auto;}
    #maincustomer .container .cont-wrap {min-height: 1px;}
    #maincustomer .container .notice-area .cont-wrap{margin-bottom: 30px;}
    .tel-wrapper ul {display: flex; flex-wrap: wrap; justify-content: center;}
}






@media screen and (max-width: 1024px){
    
    .tel-wrapper li {display: inline-block; padding-right: 17px;}
/*    .tel-wrapper li:nth-child(1) a {font-size: 2em; position: relative;}*/
    .tel-wrapper li:nth-child(2) {border: none;font-size: 1.4em;}
    .tel-wrapper li:nth-child(3) {font-size: 1em;}
    .goto-btns ul {flex-direction: row; margin-top: 30px;}
    .goto-btns ul li {width: 33%;}

    .productwrap > ul {height: 380px;}
    .productwrap > ul > li:first-child {width: 30%;}
    .productwrap > ul > li:last-child {width: 70%;}
    .productwrap ul li h3 {margin-bottom: 10px;}
    
    
    
    
}










@media screen and (max-width: 991px){
    #maincustomer h3 {text-align: center!important;}

    .circlewrap {width: 430px; height: 430px;}
    @keyframes spinAround {
        from {
          transform: rotate(0deg) translate(200px) scale(.9);
        }
        to {
          transform: rotate(360deg) translate(200px) scale(.9);
        }
    }
    
    #maingallery .infowrap {padding: 30px 0 0px 10px;}
    .productwrap > ul {height: 420px;}


}


@media screen and (max-width: 768px){
    
    .main-sec .htitle {margin-bottom: 40px;}
    .htitle h1 {font-size: 2.5em;}
    .htitle p  {font-size: 1em!important;}
    
/*
    #maincompany .row {padding: 0 10px;}
    #maincompany .row > div {padding: 0;}
*/
    #maincompany .copmany-txt {left: 0; text-align: center; width: 100%;}
    #maincompany .row:nth-child(2) > div::before {right: 30px;}
    #maincompany ul.copmany-txt li {max-width: 85%; margin: auto;}
    #maincompany ul.copmany-txt li br {display: none;}

    .customerwrap {padding: 30px 0 80px;}
    
    .circlewrap {width: 400px; height: 400px; right: -150px; top: 50%;}
    @keyframes spinAround {
        from {
          transform: rotate(0deg) translate(200px) scale(.8);
        }
        to {
          transform: rotate(360deg) translate(200px) scale(.8);
        }
    }
    
    .txtwrap li p {line-height: 1.2; font-size: 15px;}
    .productwrap > ul {height: 480px;}
    
    .infowrap {padding: 30px 0 10px;}

}























@media screen and (max-width: 575px){
    
    .htitle h1 {font-size: 2.3rem; word-break: keep-all;margin-bottom: 0;}
    .htitle p {font-size: 1.2rem!important; line-height: 1.5; word-break: keep-all;}
    
    #maingallery {background-attachment: fixed;}
    #maincompany .row > div {margin-bottom: 30px;}
    #maincompany .row > div:last-child {margin-bottom: 0px;}
    #maincompany .copmany-txt li {text-align: left; max-width: 80%; word-break: keep-all;line-height: 1.5;}
    #maincompany .copmany-txt li h2 {margin-bottom: 10px;}
    
    
    #maincustomer .container .cont-wrap {padding: 30px 20px;}
    #maincustomer .board_output a,
    #maincustomer .board_output .board_output_1_tr td:last-child
    {font-size: 13px!important;}
    #maincustomer .board_output a {padding-left: 2px!important;}
    #maincustomer h3 {margin-bottom: 0px!important;text-align: center;}
    .tel-wrapper li:nth-child(1) a::before {display: none}
    .tel-wrapper li:nth-child(4) a {padding-top: 0px!important;}
    .goto-btns ul {flex-wrap: wrap;}
    .goto-btns ul li {width: 100%;}

    .circlewrap {width: 350px; height: 350px;}    
    @keyframes spinAround {
        from {
          transform: rotate(0deg) translate(170px) scale(.7);
        }
        to {
          transform: rotate(360deg) translate(170px) scale(.7);
        }
    }
    .txtwrap li p {line-height: 1.1;}
    .productwrap > ul {height: 550px;}
    
    #maingallery .infowrap p {font-size: 16px;}
    .productwrap > ul > li:last-child {padding: 30px 20px;}
    .productwrap > ul > li:first-child {width: 25%;}
    .productwrap > ul > li:last-child {width: 75%;}
    
}

@media screen and (max-width: 480px){
    .productwrap > ul {height: 630px;}

}