.main-sec {padding: 100px 0;}
.main-sec .htitle {width: 100%; margin: 20px 0;}
.htitle h1 
{font-size: 45px; font-weight: 700; margin: 0 auto 20px; color: #d2af50; letter-spacing: -0.03em;}
.htitle p 
{font-size: 32px; letter-spacing: -0.03em; color: #222; line-height: 50px; font-weight: 500;}


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






/*메인-company*/
.cimgwrap {position: relative;}
.cimgwrap > div {display: inline-block; background: #d2af50; position: absolute;}
.cimg01 {top: -100px;}
.cimg01 img {opacity: 15%;}
.cimg02 {top: 10px; left: 130px;}
.cimg02 img {opacity: 90%;}

.mcont p {font-size: 20px; color: #555; font-weight: 300; line-height: 1.8; margin-bottom: 50px;}
.detailbtn {text-align: right; margin-bottom: 10px!important;}
.detailbtn span {margin-right: 15px; position: relative; font-size: 20px; font-weight: 600;}
.detailbtn span::before {content: ""; opacity: .8; background: url(../img/d-pattern.png); position: absolute; width: 45px; height: 45px; top: -20px; left: -30px; z-index: -1;}
.detailbtn img {position: relative; transition: all .2s; right: 0; top: -5px;}
.detailbtn a:hover img {right: -10px;}


/*메인-product*/
#mainproduct 
{background: url('productbg.jpg') center center no-repeat; background-size: cover; background-attachment: fixed;position: relative;}
#mainproduct::before 
{content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 40%; background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);}

a.mproduct {display: block; background: #fff; box-shadow: 5px 5px 10px rgb(0,0,0,.5); position: relative; top: 0;}
.mp-tit {padding: 15px; border-bottom: 1px solid #ddd;}
.mp-tit p {font-size: 25px; font-weight: 500; color: #222;}
.mp-img {padding: 40px 0;}
#mainproduct .even {margin-top: 30px;}

a.mproduct:hover {top: -20px; transition: all .2s;}
a.mproduct:hover .mp-tit p {color: #d2af50; transition: all .2s;}
#mainproduct .col-md-3 {padding-right: 10px; padding-left: 10px;}
#mainproduct .row {margin-right: -10px; margin-left: -10px;}

/*메인-갤러리슬라이드*/
#mainnotice
{background: url('noticebg.jpg') center center no-repeat; background-size: cover; background-attachment: fixed;position: relative;}
#mainnotice h3 {color: #ffc82f; margin-bottom: 30px; font-size: 26px; font-weight: 600; padding-bottom: 20px; border-bottom: 2px solid #fff;}
#mainnotice p {color: #fff; font-size: 22px; font-weight: 300; margin-bottom: 15px;}
#mainnotice p:last-child {margin-bottom: 0;}



/*메인-공지사항*/


@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;}

    .htitle h1 {font-size: 40px; margin: 0 auto 15px;}
    .htitle p {font-size: 28px; line-height: 1.5;}
    .mcont p {font-size: 18px;}
    .detailbtn span {font-size: 18px;}
    

}






@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%;}

    .cimgwrap > div {max-width: 60%;}
    
    .mp-tit p {font-size: 22px;}
    
    #mainnotice h3 {font-size: 22px; margin-bottom: 20px;}
    #mainnotice p {font-size: 18px; margin-bottom: 10px;}
}







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


@media screen and (max-width: 768px){
    
    .main-sec .htitle {margin-bottom: 30px;}
    .htitle h1 {font-size: 2.5em;}
    .htitle p  {font-size: 24px;}
    
/*
    #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;}
    
    .cimgwrap {height: 380px;}
    .cimgwrap > div {max-width: 40%;}
    .cimg01 {top: -60px; right: 40%;}
    .cimg02 {left: 40%;}

    .detailbtn {margin-bottom: 0!important;}
    
    #mainnotice ul {margin-bottom: 50px;}
    #mainnotice ul.lastul {margin-bottom: 0!important;}

    
}

@media screen and (max-width: 650px){
    .cimgwrap {height: 320px;}

}







@media screen and (max-width: 575px){
    
    .htitle h1 {font-size: 2.3rem; word-break: keep-all;margin-bottom: 10px;}
    .htitle p {font-size: 1.5rem!important; line-height: 1.5; word-break: keep-all;}
    .mcont p {font-size: 1em;}
    .detailbtn span {font-size: 1em;}


    #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%;}
    span.more {position: static; text-align: center;}
    span.more a {background: #ddd; padding: 5px; margin-top: 30px;}
    
    .cimgwrap {height: 250px;}
    
    #mainproduct .even {margin-top: 0;}
    a.mproduct {margin: 0 auto 30px; max-width: 90%;}
    .mp-img {padding: 50px 0;}
    .mp-tit p {font-size: 19px;}
    
    #mainnotice ul {margin-bottom: 30px;}
    #mainnotice h3 {font-size: 20px;}
    #mainnotice p {font-size: 16px; margin-bottom: 5px;}
}

@media screen and (max-width: 480px){
    .cimgwrap {height: 220px;}
}
@media screen and (max-width: 420px){
    .cimgwrap {height: 200px;}
}