.inner {max-width: 1600px; margin: 0 auto;}
.s_wrap {display: flex;}

/*서브타이틀*/
.title {padding: 75px 0 0;}
.tit_h2 {font-size: 44px; line-height: 140%; font-weight: 700; color: #222; word-break: keep-all;}
.title .tit_ul {display: flex; flex-wrap: wrap; margin-top: 30px;}
.title .tit_ul li {display: flex; padding-right: 30px;}
.title .tit_ul li a {font-size: 22px; font-weight: 500; color: #f18e01;position: relative;}
.title .tit_ul li a:after {content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background-color:#f18e01;transition:all .2s ease;}
.title .tit_ul li:hover a:after{width:100%;}

.sub-bg {width: 100%; overflow: hidden; height: 60vh; margin-top: 30px;position: relative;}
.sub-bg .subbg-img {width: 100%; height: 100%; display: inline-block;}
#subbg1 .subbg-img {background: url(subbg01.png)no-repeat top center/cover;}
#subbg2 .subbg-img {background: url(subbg02.png)no-repeat top center/cover;}
#subbg3 .subbg-img {background: url(subbg03.png)no-repeat top center/cover;}
.sub-bg .subbg-img {transition: all 0.4s ease-in-out;}
.sub-bg.scroll .subbg-img {height: 70vh;}
.sub-bg > .inner{position:absolute;width:100%;height:100%;top: 0; left: 50%;transform: translateX(-50%);padding: 0 20px;max-width:1600px;}
.sub-visual-scroll{color:#fff;font-size:16px;font-family:'Proxima' , sans-serif;font-weight:500px;width:40px;text-align:center;position:absolute;bottom:60px;}
.sub-visual-scroll .arrow{display:inline-block;transform: translateY(0);animation: bounce 1600ms infinite cubic-bezier(0.445, 0.05, 0.55, 0.95);-webkit-animation: bounce 1600ms infinite cubic-bezier(0.445, 0.05, 0.55, 0.95);-moz-animation: bounce 1600ms infinite cubic-bezier(0.445, 0.05, 0.55, 0.95);opacity:1;}
.sub-visual-scroll .arrow:after{content:"";display:inline-block;width:8px;height:8px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg);}

@keyframes bounce {
    20% {transform: translateY(12px);opacity:0.6;}
    40% {transform: translateY(6px);opacity:0.8;}
    60% {transform: translateY(12px);opacity:0.6;}
    100% {transform: translateY(0px);opacity:1;}
}

@-webkit-keyframes bounce {
    20% {transform: translateY(12px);opacity:0.6;}
    40% {transform: translateY(6px);opacity:0.8;}
    60% {transform: translateY(12px);opacity:0.6;}
    100% {transform: translateY(0px);opacity:1;}
}

.sub_box.sub-cont {padding: 0;}

/*서브페이지 서브왼쪽메뉴*/
.left {position: relative;}
.left-menu-wrap {position: sticky; width: 100%; top: 15%;}
.left-menu li {display: block; text-align: left; line-height: 50px; transition: padding 0.3s ease-in-out;}
.l-menu .left-menu li:hover {padding-left: 6px;}
.left-menu-item {display: block; color: #a8a8a8;}
.left-menu-item:hover, .isactive {color: #f18e01; font-weight: 500;}

/*서브페이지 서브내용-큰레이아웃*/
.right {}
.sub_boxwrap {}
.sub_boxwrap section {margin-bottom: 100px;}
.sub01_box, .sub03_box {margin-bottom: 70px; display: flex; flex-wrap: wrap;}
/*서브페이지 서브내용-이미지*/
.sub01_map {width: 100%; margin-bottom: 30px;}
.sub02_img {margin-bottom: 30px; width: 100%; display: flex; justify-content: center; align-items: center;}
.sub01_img, .sub03_img {width: 100%; height: 400px; margin-bottom: 30px;}
#section-1 .sub01_img {background: url(../img/sub01_img01.png)no-repeat top center/cover;}
#section-2 .sub01_img {background: url(../img/sub01_img02.png)no-repeat top center/cover;}
#section-3 .sub01_img {background: url(../img/sub01_img03.png)no-repeat top center/cover; height: 500px;}
#section-1 .sub03_img {background: url(../img/sub03_img01.png)no-repeat top center/cover;}
#section-2 .sub03_img {background: url(../img/sub03_img02.png)no-repeat top center/cover;}
#section-3 .sub03_img {background: url(../img/sub03_img03.png)no-repeat top center/contain; height: 500px;}
#section-5 .sub03_img {background: url(../img/sub03_img05.png)no-repeat top center/cover;}
.sub02_img img {max-width: 100%;}
/*서브페이지 서브내용-폰트*/
.tit_h3 {font-size: 32px; font-weight: 600; color: #f18e01; margin-bottom: 50px;}
.tit_h4 {font-size: 36px; color: #333; font-weight: 700; word-break: keep-all; line-height: 140%;}
.tit_h5 {font-size: 28px; color: #f18e01; font-weight: 600; word-break: keep-all; line-height: 140%;}
.tit_h6 {font-size: 23px; color: #444; font-weight: 600; word-break: keep-all; line-height: 140%; margin-bottom: 40px;}
.sub_b {color: #f18e01; font-weight: 700;}
.sub_p {font-size: 18px; color: #555; font-weight: 400; word-break: keep-all; line-height: 160%; margin-top: 25px;}
.sub_p1 {font-size: 18px; color: #222; font-weight: 500; word-break: keep-all; line-height: 160%; margin-top: 25px;}
.sub_p2 {font-size: 15px; color: #666; font-weight: 300; word-break: keep-all; line-height: 160%; margin-top: 10px;}
.sub01_box span {display: inline-block; padding-right: 50px; font-size: 20px; color: #444; line-height: 36px; font-weight: 600;}
.sub01_box span:nth-child(1) {color: #f18e01; font-weight: 700; font-size: 24px;}
/*서브페이지 서브내용-세부레이아웃*/
.sub01_text {padding: 0;}
.sub01_text1 {padding: 0 60px 0 0;}
.sub01_text2 {padding: 0 30px 0 0;}
.sub01_text3 {padding: 0 0 0 30px;}
.sub01_box li {width: 20%;}
.sub01_icon img {border-radius: 100%; box-shadow: 2px 2px 4px rgba(0,0,0,0.2);}
/*서브페이지 서브내용-table*/
.sub01_table {padding: 0;}
.sub01_table table {width: 100%;}
.sub01_table table tr:first-child {border-top: 2px solid #f18e01;}
.sub01_table table tr {border-bottom: 1px solid #dbdbdb;}
.sub01_table table tr th {font-size: 17px; font-weight: 500; color: #f18e01; padding: 15px; background: #f7f7f7; text-align: center; width: 20%;}
.sub01_table table tr td {font-size: 17px; font-weight: 400; color: #444; padding: 15px; text-align: center; word-break: keep-all;}

/*서브페이지 고객지원 왼쪽회사정보*/
.left_wrap {}
.left_wrap .left_h2 {font-size: 42px; color: #222; font-weight: 700;}
.left_wrap .left_text {margin-top: 65px;}
.left_text .left_textwrap {margin-bottom: 35px;}
.left_textwrap .left_h3 {font-size: 20px; font-weight: 700; color: #333; margin-bottom: 10px;}
.left_textwrap .left_p {font-size: 16px; color: #666; font-weight: 400;}

/*서브페이지 고객지원 오른쪽폼메일*/
.formmail_txt {font-size:16px;font-family:'Noto Sans KR';color:#333333}
.formmail_border {font-size:16px; background-color: transparent; border: none;}
.formmail_title_bgcolor {}
.formmail > tbody > tr {border-bottom: 1px solid #ddd;}
.formmail_cell_bgcolor {font-size:16px;padding: 5px;}
.table_02 {width:100%;}
.table_02 tbody {display: flex; flex-wrap: wrap; justify-content: space-between;}
.table_02 tr {border: 1px solid #d7e3ec; background-color: #f0f6fa; width: 48%; display: flex; flex-wrap: wrap; padding: 30px 0; border-radius: 10px; margin-bottom: 30px;}
.table_02 tr:nth-child(4) {width: 100%; height: 220px;}
.table_02 tr:nth-child(5) {display: none;}
.table_02 tr:nth-child(6) {display: none;}
.table_02 td {padding: 0 5px; height: 100%; display: flex; align-items: center;}
.table_02 td:nth-child(1) {padding-left: 25px; width: 30%;}
.table_02 td:nth-child(2) {width: 70%;}
.table_02 td font {font-size: 16px; color: #666; position: relative;}
.table_02 td font::after {position: absolute; content: "*"; color: #f18e01; top: 0; right: -10px; display: inline-block;}


#sec-company .imgwrap {text-align: center;}
#sec-company .imgwrap img {max-width: 300px;}

#sec-company .cont-g h3 {color: #222; font-size: 1.8rem; line-height: 1.5; word-break: keep-all; margin-bottom: 20px;}
#sec-company .cont-g p {color: #333; line-height: 1.6;}
#sec-company .cont-g li {margin-bottom: 20px;}


/*타이어 타이틀*/

#sec-product .row > div {position: relative;}
#sec-product a > ul{position: relative;}

#sec-product .imgarea {overflow: hidden; position: relative;}
#sec-product .imgarea::after {
    content: "";
    position: absolute;
    width: 100%; height: 100%;
    background: rgba(20, 20, 20, .15);
    transition: .2s all;
    top: 0;
    left: 0;
}
#sec-product a.mlist-btn:hover .imgarea::after {
    background: rgba(20, 20, 20, .3);
}
#sec-product a.mlist-btn .imgarea 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;
}
#sec-product a.mlist-btn:hover .imgarea 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);
}
#sec-product a.mlist-btn > ul > li:nth-child(2) {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    width: 100%;
}
.t-title {
    padding: 35px 0;
    border: 3px solid #fff;
    text-align: center;
    width: 70%;
    margin: auto;
    position: relative;
}
.t-title h2 {font-size: 26px; font-weight: 700; color: #fff; word-break: keep-all; margin-bottom: 25px; text-shadow: 0 2px 4px rgb(0 0 0 / 50%);}
.t-btn {
    padding: 5px 20px; 
    border: 1px solid #fff; 
    display: inline-block;
    position: relative;
}
.t-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0; height: 100%;
    background: #f18e01;
    z-index: -1;
    transition: .2s all;
}

a.mlist-btn:hover .t-btn::before {
    width:100%
}
.t-btn p {color: #fff; font-size: 16px; text-shadow: 0 2px 4px rgb(0 0 0 / 50%);}


/*서브- 제품*/
#sec-product {position: relative; padding-top: 50px;}

.slickwrap {
    display:block;
    position: relative;
    max-width: 100%;
    overflow-x: hidden;
}
.slider-screen {
    display: block;
    width: 100%;
    margin-bottom: 20px;
}
.slider-screen > div{
    position: relative;
}

.slider-navbar .navlist{
    display: block;
    font-weight: 600;
    padding: 5px;
}
.slickarrow {position: absolute; bottom: 100px; width: 100%;}
.sprev {left: -30px; position: absolute; cursor: pointer;}
.snext {right: -30px; position: absolute; cursor: pointer;}


/*제품소개(슬릭슬라이더) 내용*/
.cont-g {padding: 30px 0;}
.prodtitle h4 {text-align: left;}

.prodimgwrap {text-align: center;}
.imgbox {border: 1px solid #ddd; text-align: center; margin-bottom: 30px;}

.prodinfowrap {}
.prodtitle {margin-bottom: 40px; position: relative;}
.prodtitle h4 {
    color: #333;
    font-size: 1.8em;
    font-weight: 700;
    margin-bottom: 15px;
}
.prodtitle p {
    font-weight: 400;
    font-size: 18px;
    color: #444;
    word-break: keep-all;
}
.prodtitle ul li {padding-left: 18px; position: relative;}
.prodtitle ul li::before {
    content: "";
    width: 6px; height: 6px;
    position: absolute;
    border-radius: 5px;
    background: #f18e01;
    top: 10px; left: 0;
    
}

.prodtitle .detailbtn {right: 0; top: 0;}
.onlinebtn {
    position: relative;
    text-align: center;
    width: 100%; 
    background: #f18e01;
    margin-top: 20px;
}
.onlinebtn a{
    display: block;
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    padding: 10px 0;
    width: 100%;
}
.onlinebtn a:hover {
    background: #ecaa4e;
    transition: .2s;
}

.infotable table {
    width: 100%;
    text-align: center;
    line-height: 1.3;
    font-weight: 500;
    color: #666;
    border-top: 2px solid #333;
    border-bottom: 2px solid #333;
}
.prodtable tr {border-bottom: 1px solid #ddd;}
.prodtable th {
    padding: 15px;
    font-size: 1.2rem; font-weight: 600;
    background: #f6f6f6;
}
.prodtable td {padding: 15px; font-size: 1.1rem; font-weight: 500;}

.subwrap {background: #eee; padding: 30px 0;}

.cont-g h3 {
    color: #222;
    font-size: 30px;
    font-weight: 500;
}
.cont-g h3 span {
    position: relative;
    display: inline-block;
    width: 10px;
    height: 10px;
    top: -5px;
    margin-right: 15px;
    background: #f18e01;
}
.cont-g h3 span::before {
    content: "";
    position: absolute;
    width: 0px;
    height: 0px;
    border-left: 10px solid #efefef;
    border-top: 0px solid transparent;
    border-bottom: 10px solid transparent;
}
.subcont table {
    width: 100%;
    text-align: center;
    line-height: 1.3;
    font-weight: 500;
    color: #666;
    border-top: 2px solid #333;
    border-bottom: 2px solid #333;
}
.subcont tr {border-bottom: 1px solid #ddd;}
.subcont th {
    color: #fff;
    padding: 15px 0;
    font-size: 1.2rem; font-weight: 600;
    background: #f18e01;
}
.subcont td {padding: 15px 0; font-size: 1.1rem; font-weight: 500; background: #fff;}


/*제품버튼*/
.tirelist_btn {display: block; position: relative; transition: .3s all; top: 0; background: #fff; padding: 30px 25px; box-shadow: 3px 3px 5px rgba(0,0,0,0.5); margin-bottom: 50px;}
.tirelist_btn > ul {position: relative;}
.tirelist_btn > ul > li {margin-bottom: 20px;}
.tirelist_btn > ul > li:first-child {text-align: center;}
.tire-info h3 {font-size: 25px; font-weight: 700; text-align: center; margin-bottom: 20px;}
.tire-info p {color: #222; font-size: 18px; font-weight: 400;}
.tire-info p span {font-weight: 600;}

.plusbtn {width: 60px; height: 60px; border: 2px solid #f18e01; background: #f18e01; border-radius: 30px; position: absolute; bottom: 0; right: 0; margin-bottom: 0!important; transition: all .2s;}
.plusbtn span {position: absolute; display: block; transition: all .2s; transform: translate(-50%, -50%); top: 50%; left: 50%;}
.plusbtn span::before {content: ""; width: 35px; height: 2px; position: absolute; background: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.plusbtn span::after {content: ""; width: 2px; height: 35px; position: absolute; background: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%);}

.tirelist_btn:hover {top: -10px;}
a:hover .plusbtn span {transform: rotate(90deg); transition: all .2s;}
a:hover .plusbtn {background: #222; border: 2px solid #222;}
a:hover .plusbtn span::before {background: #f18e01;}
a:hover .plusbtn span::after {background: #f18e01;}


@media screen and (max-width: 1600px){
  .title {padding: 75px 20px 0;}
  .tit_h2 {font-size: 38px;}
  .tit_h3 {font-size: 28px;}
  .title .tit_ul li a {font-size: 20px;}
  
  .sub01_box span {padding-right: 10px;}
  
  .left_wrap .left_h2 {font-size: 36px;}
  .left_wrap .left_text {margin-top: 45px;}
  .table_02 tr {width: 100%;}
}

@media screen and (max-width: 1024px){
  .s_wrap {flex-wrap: wrap;}
  .title {padding: 55px 15px 0;}
  .tit_h2 {font-size: 34px;}
  .tit_h3 {margin-bottom: 20px;}
  .tit_h4 {font-size: 30px;}
  .tit_h5 {font-size: 24px;}
  .tit_h6 {font-size: 21px;}
  .title .tit_ul {margin-top: 15px;}
  
  .sub-bg {margin-top: 10px; height: 50vh;}
  .sub01_img, .sub03_img {height: 300px;}
  #section-3 .sub01_img {height: 400px;}
  
  .sub_boxwrap {margin-top: 40px;}
  .sub_boxwrap section {margin-bottom: 70px;}
  .sub01_box, .sub03_box {margin-bottom: 0;}
  .sub01_box li {width: 33.33%; padding-right: 10px; margin-bottom: 20px;}
  .sub01_text1 {padding: 0;}
  .sub01_text2 {padding: 0;}
  .sub01_text3 {padding: 0;}
  
  .left_wrap .left_text {margin: 30px 0 45px;}
  .left_text .left_textwrap {margin-bottom: 20px;}
}

@media screen and (max-width: 992px){
  .left-menu li {display: inline-block; padding-right: 50px;}
  .left-menu-item:hover, .isactive {padding: 0 40px; background: #f18e01; border-radius: 50px; color: #fff;}
  
  .tire-info p {font-size: 16px;}
  .plusbtn {scale: .9; bottom: -30px; right: -10px;}

}

@media screen and (max-width: 768px){
  .tit_h2 {font-size: 30px;}
  .tit_h3 {font-size: 24px;}
  .tit_h4 {font-size: 26px;}
  .tit_h5 {font-size: 20px;}
  .tit_h6 {font-size: 19px;}
  .sub_p {margin-top: 15px; font-size: 17px;}
  .title .tit_ul li {line-height: 40px;}
  .title .tit_ul li a {font-size: 18px;}
  
  .sub-bg {height: 40vh;}
  .sub01_img, .sub03_img {height: 250px;}
  #section-3 .sub01_img {height: 300px;}
  
  .sub_boxwrap section {margin-bottom: 50px;}
  .sub01_text {margin-bottom: 30px;}
  .sub01_text1 {margin-bottom: 30px;} 
  .sub01_box span {padding-right: 30px; font-size: 18px; line-height: 30px;}
  .sub01_box span:nth-child(1) {font-size: 21px;}
  .sub01_box li {width: 50%; padding-right: 0; margin-bottom: 0}

  .cont-g {padding: 20px 0;}
  .ps-cont {margin-bottom: 30px;}
  .plusbtn {scale: 1; bottom: 0; right: 0;}
  .tire-info p {font-size: 18px;}

  .prodtitle h4 {font-size: 1.5em;}
  .prodtitle p {font-size: 16px;}
  .subcont th {font-size: 1rem;}
  .subcont th {font-size: 1rem;}
  .cont-g h3 {font-size: 25px;}
  
}

@media screen and (max-width: 575px){
  .sub01_box li {width: 100%; text-align: center;}
  .sub01_box span {padding-right: 0;}
  .sub01_table table tr th {width: 30%;}
  .sub01_img, .sub03_img {height: 170px;}
  #section-2 .sub01_img {background: url(../img/sub01_img02.png)no-repeat top center/contain;}
  #section-3 .sub01_img {height: 200px;}

  #sec-company .cont-g h3 {font-size: 1.6rem; text-align: center;}
  #sec-company .imgwrap img {max-width: 250px;}


}





/*메인-포트폴리오 모달창*/
.main_modal {background: rgba(0,0,0,0.4); position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 9999999; display: none;}
.main_modal.show {display: block;}
.main_modal .modal_wrap {max-width: 1024px; margin: 0 auto; vertical-align: middle;}
.main_modal .modal_wrap .modal_bg {background: #fff; padding: 60px; position: relative;}
.modal_bg .bi {font-size: 20px; color: #333; position: absolute; top: 0px; right: 0;}
.modal_bg .modal_text {}
.modal_bg .modal_text p {font-size: 16px; font-weight: 500; color: #333;}
.modal_bg .modal_text h2 {font-size: 34px; font-weight: 600; color: #222; margin-bottom: 20px;}
.modal_bg .modal_img {margin-bottom: 30px; text-align: center;}
.modal_bg .modal_img img {max-width: 100%; height: 500px;}
.modal_bg .modal_key {display: flex; flex-wrap: wrap;}
.modal_bg .modal_key .modal_k {display: flex; width: 66.67%; flex-wrap: wrap;}
.modal_bg .modal_key .modal_k h3 {width: 100%; font-weight: 600; color: #222; font-size: 17px; margin-bottom: 5px;}
.modal_bg .modal_key .modal_k ul {display: flex;}
.modal_bg .modal_key .modal_k ul li {padding-right: 10px;}
.modal_bg .modal_key .modal_k ul li span {border: 1px solid #ddd; color: #666; font-size: 14px; font-weight: 400; padding: 5px 10px; border-radius: 6px;}
.modal_bg .modal_key .modal_link {display: flex; width: 33.33%; justify-content: flex-end;}
.modal_bg .modal_key .modal_link a {font-size: 16px; font-weight: 500; color: #f18e01; background: url(../img/portfolio_link.png)no-repeat 85% center; border: 1px solid #f18e01; line-height: 38px; border-radius: 40px; padding: 5px 70px 5px 30px;}
.modal_bg .modal_key .modal_link a:hover {background: #f18e01; color: #fff;}