.main-sec {padding: 120px 0;}
.main-sec .htitle {width: 100%; margin-bottom: 50px;}
.htitle h1 
{font-size: 38px; font-weight: 800; margin: 0 auto 20px; color: #111; text-transform: uppercase;}
.htitle .subtit {font-size: 16px; font-weight: 700; color: #17459b; margin-bottom: 20px;}
.htitle p 
{font-size: 18px; letter-spacing: -0.03em; color: #333; font-weight: 600;}

.morebtn {display: inline-block; padding: 15px 25px; border: 1px solid #17459b; border-radius: 30px; color: #17459b; font-weight: 800;}
.morebtn span {font-size: 16px; margin-right: 30px; line-height: 20px;}
.morebtn i {font-weight: 800; font-size: 20px;}
.morebtn:hover {background: #17459b; color: #fff;}

@media screen and (max-width: 768px){
    .main-sec {padding: 60px 0;}
}
@media screen and (max-width: 575px){
    .htitle .subtit {margin-bottom: 10px;}
}




/*메인-company*/
#maincompany.main-sec {padding: 120px 0;}
#maincompany .row > div {position: relative;}
#maincompany {width: 100; overflow-x: hidden;}
.m-imgbox {text-align: center; height: 100%;}
.m-imgbox img {height: 100%; object-fit: cover;}

.aboutus-txt {display: flex; flex-wrap: wrap; position: relative;} 
.aboutus-txt::before {
    content: '';
    height: 60%;
    width: 300%;
    background: #f2f2f2;
    display: block;
    position: absolute;
    bottom: 0;
    left: -15px;
}
.upper {position: relative; height: 40%; padding: 20px 0; color: #333;}
.upper li {margin-bottom: 5px;}
.upper span {font-size: 16px; font-weight: 700; margin-left: 30px;}

.lower {height: 60%; padding: 30px 0; color: #111; position: relative;}
.lower li {margin-bottom: 15px;}
.lower li p {font-weight: 300; word-break: keep-all; line-height: 1.3;}
.lower li span {font-weight: 700;}


@media screen and (max-width: 991px){
    #maincompany.main-sec {padding: 120px 0 0;}
    .upper {width: 50%; height: auto; padding: 50px 0;}
    .lower {width: 50%; height: auto; padding: 50px 0;}
    .aboutus-txt {background: #f2f2f2;}
    .aboutus-txt::before {display: none;}
    
}

@media screen and (max-width: 768px){
    #maincompany.main-sec {padding: 80px 0 0;}
    .upper {width: 100%; padding: 20px 0;}
    .lower {width: 100%; padding: 20px 0;} 
}

@media screen and (max-width: 575px){
    .m-imgbox {margin: 20px 0;}
}


/*메인-product*/
#mainproduct 
{background: url('mainproduct_bg.jpg') center center no-repeat; background-size: cover; background-attachment: fixed;position: relative;}
#mainproduct .htitle h1, #mainproduct .htitle p {color: #fff;}
#mainproduct .morebtn 
{border: 1px solid #fff; color: #fff;}
#mainproduct.main-sec {padding: 80px 0;}

.pbtn-wrap {display: flex; flex-wrap: wrap; width: 100%;}
.pbtn {display: inline-block; width: 48%; margin: 0 5px 20px;}
.pbtn-wrap > a:nth-child(3),
.pbtn-wrap > a:nth-child(4) {margin: 0 5px 0px;}
.pbtn > ul > li:first-child {overflow: hidden;}
.pbtn > ul > li:first-child img {
    display: inline-block; 
    width: 100%;
    -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;
}
.pbtn:hover > ul > li:first-child 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);
}
.pbtn > ul > li:last-child {background: #fff; padding: 15px 20px;}
.pbtn p {color: #111; font-weight: 800; transition: all .2s;}
.pbtn:hover p {color: #17459b;}


@media screen and (max-width: 768px){
    .pbtn-wrap {margin-top: 30px;}
}
@media screen and (max-width: 575px){
    .pbtn {width: 100%;} 
    .pbtn-wrap > a:nth-child(3) {margin: 0 5px 20px;}
}



/*메인-notice*/
#mainnotice .bluearea
{background: #17459b;}
.bluewrap {display: flex; flex-wrap: wrap; width: 100%;}
.bluewrap > div {width: 33.33%; display: block; padding: 30px 10px;}
.blist ul {display: flex; flex-wrap: wrap; width: 100%; color: #fff; text-align: left;} 
.blist ul li:first-child {width: 30%;}
.blist ul li:last-child {width: 70%; padding-left: 20px;}
.blist ul li h3 {font-size: 26px; font-weight: 500; margin-bottom: 10px;}
.blist ul li p {font-size: 16px; font-weight: 400; line-height: 1.3; word-break: keep-all;}

.gmapwrap {padding: 60px 0;}
.gmapwrap iframe {width: 100%;}

@media screen and (max-width: 991px){
    .blist ul li:last-child {padding-left: 10px;}
    .blist ul li h3 {font-size: 1.5rem;}
    .blist ul li p {font-size: 15px;}
    .bluewrap > div {padding: 20px 5px;}

    
}
@media screen and (max-width: 768px){
    .bluewrap {justify-content: center;}
    .bluewrap > div {width: 100%; max-width: 320px;}

}
@media screen and (max-width: 575px){
    .blist ul li h3 {font-size: 1.3rem; margin-top: 10px;}
    .blist ul li:last-child {padding-left: 20px;}


}



/*메인-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: #0669bf ;
    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 #0669bf ;
    color: #0669bf ;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: -0.04em;
}
.goto-btns a:hover {
    background-color: #0669bf ;
    color: #fff;
}




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


@media screen and (max-width: 768px){
    .main-sec {padding: 80px 0;}
    .main-sec .htitle {margin-bottom: 30px;}
    .htitle h1 {font-size: 2.5em;}
    .htitle p  {font-size: 1em!important;}

    
}





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

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

    
}