@charset "utf-8";

@import url("../../../resource/css/basic.css?after");


.hero{background: var(--bg-primary); height: 100vh;}
.hero .inner{padding: 210px 0 0; box-sizing: border-box}
.hero .inner > .flex{justify-content: right}
.hero .left{width: 40%; padding-top: 20px;   display: flex; align-items: center; justify-content: center}
.hero .right{width: 50%; padding-left: 80px; box-sizing: border-box;}

.hero .left .img-area img{width: 100%; height: auto;}

.hero .tit-txt{font-size:var(--font-size-3xl); font-weight: var(--font-weight-bolder); text-shadow: var(--shadow-lg);}
.hero .sub-txt{font-size:var(--font-size-lg);  font-weight: var(--font-weight-medium);  padding: 30px 0;}
.hero .write-box{width: 500px;}
.hero .write-box input{margin-bottom: 20px;}
.hero .write-box .agree-area{margin-bottom: 20px;}
.hero .write-box .agree-area input[type='checkbox'] + label:after{color: #fff;}
.hero .btn{border-radius: 9px;}

.sec{padding: 165px 0; box-sizing: border-box; background: var(--bg-dark200);}
.sec .tit-area{}
.sec .tit-area p{font-size: var(--font-size-2xl); font-weight: var(--font-weight-bolder); text-align: center; color: var(--primary);}

.sec.info .tit-area p span{font-size: 36px; font-weight: 400; color: #222; background: var(--bg-primary); padding: 10px 20px; margin-top: 40px; display: inline-block;}
.sec.info div.flex{justify-content: center; margin-top: 80px;}
.sec.info div.flex > div{padding: 0 110px;}
.sec.info div.flex > div div.img-area{margin: 0 auto; width:300px;  height: 150px; background: url("./img/icon-step1.webp") -2% center no-repeat;}
.sec.info div.flex > div p{color: var(--primary); font-size: 30px; font-weight: var(--font-weight-medium); text-align: center;}
.sec.info p.line-txt{position: relative; margin-top: 80px; color: var(--primary); font-size: var(--font-size-xl); font-weight:var(--font-weight-bolder);  text-align: center;}

.sec.info p.line-txt:before,
.sec.info p.line-txt:after{position: absolute; transform: translate(-50%, -50%); top: 50%; display: block; content: ''; width: 420px; height: 1px; background: var(--bg-primary);}

.sec.info p.line-txt:before{left: 25%;}
.sec.info p.line-txt:after{left: 75%;}

.sec.info div.flex > div:nth-child(2) div.img-area{background-position: 60% center;}
.sec.info div.flex > div:last-child div.img-area{background-position: 110% center;}

.sec.banner{background: var(--bg-primary); padding: 0;}
.sec.banner .box{}
.sec.banner .box a{display: block; width: 100%; height: 100%; padding: 80px 0}
.sec.banner .box a p{font-size:var(--font-size-2xl); text-align: center;}
.sec.banner .box a p span{ font-weight: var(--font-weight-bolder); }
.sec.banner .img-area{width: 540px; height: 180px; background: url("./img/img-banner.webp") center bottom no-repeat; margin: 0 auto}
.sec.banner .box a div.btn{width: 560px; margin: 0 auto; border-radius:var(--radius-round);}

.sec.step{}
.sec.step div.inner{width: 1400px;}
.sec.step div.flex{margin-top: 150px; justify-content: space-between;  align-items: flex-start}
.sec.step div.flex > div.area{width: 20%;}
.sec.step div.flex > div.area div.img-area{
    width: 140px;
    height: 140px;
    display: block;
    margin: 0 auto 40px;
    background: url('./img/icon-step2.webp') -0.5% center no-repeat;
}
.sec.step div.flex > div.area:nth-child(3) div.img-area{background-position: 34% center ;}
.sec.step div.flex > div.area:nth-child(5) div.img-area{background-position: 68% center ;}
.sec.step div.flex > div.area:last-of-type div.img-area{background-position: 105% center ;}

.sec.step div.flex > div.area p{color: var(--primary); text-align: center;}
.sec.step div.flex > div.area p.tit{font-size: var(--spacing-xl); font-weight: var(--font-weight-bold); margin-bottom: 20px;}
.sec.step div.flex > div.area p.sub{font-size: var(--font-size-md); line-height: 1.8;}
.sec.step div.flex > div.dot{position: relative; width: calc(20% / 3); margin-top: 70px; }
.sec.step div.flex > div.dot:after{position: absolute; transform: translate(-50%, -50%); top: 50%;  left: 50%; content: ''; display: block; width: 20px; height: 20px; border-radius: 50%; background: var(--primary);}
.sec.step div.flex > div.dot:before{position: absolute; transform: translate(-50%, -50%); top: 50%;  left: 50%; content: ''; display: block; width: 150px; height: 1px;  background: var(--primary);}

.sec.portfolio{position: relative; padding: 100px 0 165px;}
.sec.portfolio:before{
    position: absolute;
    top: -400px;
    left: 0;
    display: block;
    width: 100%;
    height: 800px;
    background: linear-gradient(rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.0));
    content: '';
}
.sec.portfolio .inner{position: relative; width: 1280px; z-index: 1;}
.sec.portfolio div.flex{margin-top: 100px; justify-content: space-between;}
.sec.portfolio div.flex > div{width: calc(90% / 4); margin-right: calc(10%/3);}
.sec.portfolio div.flex > div:last-of-type{margin-right: 0;}
.sec.portfolio div.flex > div a{display: block; width: 100%; height: 100%; color: var(--primary); transition: all 0.2s;}
.sec.portfolio div.flex > div a div.img-area{position: relative; background: #ddd; margin-top: 40px; border-radius: 30px; overflow: hidden}
.sec.portfolio div.flex > div a p.tit{font-size: var(--font-size-lg); font-weight: var(--font-weight-medium);}
.sec.portfolio div.flex > div a p.tit span{display: block; font-size: var(--font-size-2xs); margin-bottom: 10px;}
.sec.portfolio div.flex > div a p.tit b{display: block; font-size: var(--font-size-sm); margin-top: 8px;}
.sec.portfolio div.flex > div a div.txt-area{padding: 20px 0}
.sec.portfolio div.flex > div a div.txt-area p.sub{margin-bottom: 20px;}
.sec.portfolio div.flex > div a div.txt-area ul{flex-wrap: wrap; opacity: 0.7;}
.sec.portfolio div.flex > div a div.txt-area ul li{
    width: max-content;
    padding: 5px 10px;
    border-radius: var(--radius-round);
    font-size: var(--font-size-2xs);
    border:1px solid var(--primary);
    margin: 0 5px 5px 0;
}
.sec.portfolio div.flex > div a p.date{ opacity: 0.8; font-size: var(--font-size-xs);}
.sec.portfolio div.flex > div a div.bg-primary{position: absolute; top:20px; left: 50%; transform: translateX(-50%); width: max-content; padding: 5px 10px; border-radius: 50px; opacity: 0; transition: all 0.2s;}


.sec.portfolio div.flex > div a:hover{margin-top: -20px; }
.sec.portfolio div.flex > div a:hover ul.dot-list,
.sec.portfolio div.flex > div a:hover p.date{opacity: 1;}
.sec.portfolio div.flex > div a:hover div.bg-primary{opacity: 1;}


.sec.portfolio div.btn-area{margin-top: 90px;}
.sec.portfolio div.btn-area a.btn{width: 560px; margin: 0 auto; border-radius:var(--radius-round); background: var(--bg-primary); color: var(--bg-dark200); font-weight: var(--font-weight-bold);}
.sec.portfolio div.btn-area a.btn:hover{}

.sec.portfolio div.flex > div.no-data{color: #fff;}

.sec.contactus{background: var(--bg-dark300);}
.sec.contactus div.inner{width: 600px; }
.sec.contactus .tit-area{margin-bottom: 80px;}

.sec.contactus fieldset.etc{margin-bottom: 3rem;}
.sec.contactus .area dl{display: flex; align-items: center; margin-bottom: 20px;}
.sec.contactus .area dl:last-child{margin-bottom: 0;}
.sec.contactus .area dl dt{margin-bottom: 0.5rem; width: 80px; margin-right: 20px;}
.sec.contactus .area dl dt label{display: flex; justify-content: space-between; color: var(--primary)}
.sec.contactus .area dl dd{width: 500px;}
.sec.contactus .area dl dd div{border: 0.1rem solid var(--bg-primary);  border-radius: 0.5rem;     background: var(--bg-dark300);}
.sec.contactus .area dl dd div input[type='text']{height: 5rem; line-height: 5rem; padding: 0 6rem 0rem 1rem; box-sizing: border-box; width: 100%; border:unset; background: unset; color: #fff;}
.sec.contactus .area dl dd div span.cnt_length{margin-left: -5rem; font-size: 1.2rem;}

.sec.contactus .area ul.agree-area{padding-top: 30px; border-top: 1px solid var(--bg-primary)}
.sec.contactus .area ul.agree-area li label{color: var(--primary)}
.sec.contactus .area ul.agree-area li label:before,
.sec.contactus .area ul.agree-area li label:after{color: var(--primary); border-color: var(--bg-primary);}
.sec.contactus .area ul.agree-area li button{color: var(--primary)}

.sec.contactus .write-footer{margin-top: 40px}
.sec.contactus .write-footer .btn{border-radius: 9px !important; height: 50px; line-height: 50px;}
.sec.contactus .write-footer a{width: 35%; margin-right: 5%; background: var(--bg-dark100);}
.sec.contactus .write-footer button{width: 60%; background: var(--primary); font-weight: var(--font-weight-bold);}
.sec.contactus .write-footer button:hover{color: #222;}


.sec.faq{}
.sec.faq div.inner{width: 1280px; }
.sec.faq .tit-area{margin-bottom: 80px;}
.sec.faq .faq-list {margin-bottom: 28px; }
.sec.faq .faq-item {border-bottom: 1px solid var(--primary);padding: 30px 0;}
.sec.faq .faq-q {
    position: relative;
    width: 100%;
    color: var(--primary);
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: var(--font-size-lg);
}
.sec.faq .circle{
    display: block;
    background: var(--primary); color: var(--bg-dark300);
    margin-right: 10px;
    width: 50px; height: 50px;
    line-height: 49px;
    border-radius: 50%;
    text-align: center;
    font-weight: 800;
}
.sec.faq .faq-icon {
    position: absolute;
    width: 25px;
    height: 25px;
    right: 0;
    display: block;
    top: 32%;
}
.sec.faq .faq-icon:after,
.sec.faq .faq-icon:before{position: absolute; top:50%; right: 50%; display: block; content: ''; width: 100%; height: 1px; transform: translate(-50%, -50%); background: var(--bg-primary); transition: transform .3s;}
.sec.faq .faq-icon:before{transform: translate(-50%, -50%) rotate(90deg);}
.sec.faq .faq-q.open .faq-icon:before {transform: translate(-50%, -50%) rotate(180deg);}
.sec.faq .faq-a {
    display: flex;
    align-items: start;
    font-size: var(--font-size-md);
    color: #aaa;
    line-height: 1.7;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease, padding .3s;
    }
.sec.faq .faq-a.open { max-height: 160px; padding-top:20px;}
.sec.faq .faq-a.open pre{margin-top: 7px;}

.sec.faq div.btn-area{margin-top: 90px;}
.sec.faq div.btn-area a.btn{width: 560px; margin: 0 auto; border-radius:var(--radius-round); background: var(--bg-primary); color: var(--bg-dark200); font-weight: var(--font-weight-bold);}
.sec.faq div.btn-area a.btn:hover{}

/* sub 페이지 */
.vehicle .outline{padding: 40px 30px; margin: 20px 0; border-top:5px solid #f5f5f5; border-bottom:5px solid #f5f5f5; border-radius: 9px;}
.vehicle .outline > p{font-size: var(--font-size-xl);  font-weight: var(--font-weight-bold)}
.vehicle .outline ul{padding: 20px 0;}
.vehicle .outline ul li{font-size: var(--font-size-md);}
.vehicle .outline p.info{font-size: var(--font-size-sm); color: var(--color-info);}
.vehicle .table-area{margin-top: 80px; border-bottom: 5px solid #f5f5f5;}
.vehicle .table-area > p{font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); margin-bottom: 20px; }
.vehicle .table-area table thead{background: #f5f5f5;}
.vehicle .table-area table th,
.vehicle .table-area table td{}
.vehicle .table-area table th{padding:15px 10px; text-align: left; font-size: var(--font-size-base); font-weight: var(--font-weight-bold); color: var(--primary)}
.vehicle .table-area table tbody{}
.vehicle .table-area table td{
    vertical-align: top; padding:15px 15px; font-size: var(--font-size-md); font-weight: var(--font-weight-medium); border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
}
.vehicle .table-area table td:last-of-type{border-right: 0;}
.vehicle .table-area table td ul li{margin-bottom: 20px;}
.vehicle .table-area table td ul li:last-of-type{margin-bottom: 0;}
.vehicle .table-area table td ul li span{padding: 5px 10px; border-radius: 5px; background: #f5f5f5; color: #666;}
.vehicle .table-area table td ul li span.red{color: var(--color-error); background: var(--bg-error-opacity)}
.vehicle .table-area table td ul li span.blue{color: var(--color-info);  background: var(--bg-info-opacity)}
.vehicle .table-area table td ul li span.green{color: var(--color-success); background: var(--bg-success-opacity)}
.vehicle .table-area table td ul li span.orange{color: var(--primary); background: var(--bg-warning-opacity)}

@media screen and (max-width:1279px){
    /* 노트북 */

    .hero{height: auto;}
    .hero .inner{padding: 180px 4% 100px;}
    .hero .left{position: absolute; top: 160px; right: 4%; width: 35%; padding-top: 0;}
    .hero .right{width: 100%; padding-left: 0}
    .hero .right fieldset{display: flex; flex-wrap: wrap; justify-content: space-between;}
    .hero .right fieldset dl{width: 49%;}
    .hero .right fieldset ul.agree-area{width: 100%;}
    .hero .write-box{width: 100%;}

    .sec.info div.flex{justify-content: space-between}
    .sec.info div.flex > div{padding: 0;}
    .sec.info p.line-txt:before,
    .sec.info p.line-txt:after{transform: unset; width: 30%;}
    .sec.info p.line-txt:before{left: 0;}
    .sec.info p.line-txt:after{right: 0; left: unset}



    .sec.step div.inner{width: 100%; padding: 0 4%;}


    .sec.portfolio .inner{width: 100%; padding: 0 4%;}

    .sec.contactus div.inner{width: 100%; padding: 0 4%;}


    .sec.faq div.inner{width: 100%; padding: 0 4%; box-sizing: border-box;}
}

@media screen and (max-width:1203px){
    /* wide tablet (breakpoint : 1023px) */


}

@media screen and (max-width:839px){

    .sec{padding: 120px 0 100px;}

    .sec.info .tit-area p span{font-size: 28px;}
    .sec.info div.flex > div div.img-area{width: 100%;  background-size: cover;}
    .sec.info div.flex > div p{font-size: 20px;}

    .sec.info div.flex > div:nth-child(1) div.img-area {background-position: 2% center;}
    .sec.info div.flex > div:nth-child(2) div.img-area {background-position: 61% center;}
    .sec.info div.flex > div:nth-child(3) div.img-area {background-position: 105% center ;}

    .sec.step div.flex{margin-top: 100px; flex-wrap: wrap; justify-content: space-between;}
    .sec.step div.flex > div.area{width: 49%; padding-left: 30px; position: relative; margin: 0 0 40px; padding: 30px; border-radius: 30px; border:1px solid rgba(255,255,255,0.5);}
    .sec.step div.flex > div.dot,
    .sec.step div.flex > div.dot:before{display: none}
    /*.sec.step div.flex > div.area div.img-area{position: absolute; left: 30px; top:50%; transform: translateY(-50%); background-size: cover}*/
    .sec.step div.flex > div.area p{}
    .sec.step div.flex > div.area p.tit{font-size: 26px;}
    .sec.step div.flex > div.area p.sub{}

    .sec.portfolio div.btn-area a.btn{width: 100%;}
    .sec.portfolio div.list-scroll{
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        width: 800px;
    }
    .sec.portfolio div.flex > div a div.txt-area ul li{margin-bottom: 10px;}

    .sec.contactus .area dl dd{flex: 1; width: auto}

    .sec.faq .faq-q{padding-right: 60px;}
    .sec.faq div.btn-area a.btn{width: 100%;}

    .vehicle .table-area table colgroup,
    .vehicle .table-area table thead{display: none}
    .vehicle .table-area table tr:first-child{;}
    .vehicle .table-area table tr{display: block; margin-bottom: 30px;}
    .vehicle .table-area table td{border: 0; display: block; width: 100%;}
    .vehicle .table-area table td:first-child{display: inline-block; background: #f5f5f5;  font-weight: 600; font-size: 20px;}

}

@media screen and (max-width:599px){
    /* mobile (breakpoint : 599px) 599px ~ 280px */

    .hero .inner {padding: 140px 4% 100px;}
    .hero .left{display: none}
    .hero .right fieldset dl{width: 100%;}


    .sec.info div.flex{flex-wrap: wrap; margin-top: 40px;}
    .sec.info div.flex > div{width: 100%; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--bg-primary);}
    .sec.info div.flex > div:last-child{margin-bottom: 0; border-bottom: 0}
    .sec.info div.flex > div p{}
    .sec.info div.flex > div div.img-area{width: 180px;  height: 100px; background-size: 250%;}
    .sec.info div.flex > div:nth-child(1) div.img-area {background-position: 0% center;}
    .sec.info div.flex > div:nth-child(2) div.img-area {background-position: 60% center;}
    .sec.info div.flex > div:nth-child(3) div.img-area {background-position: 114% center ;}

    .sec.info p.line-txt:before,
    .sec.info p.line-txt:after{display: none}
    .sec.info p.line-txt{
        color: #222;
        background: var(--bg-primary);
        padding: 10px 20px;
        margin: 40px auto 0;
        display: block;
        width: fit-content;
        font-size: 30px;
    }



    .sec.banner .box a{padding: 80px 4%;}
    .sec.banner .img-area,
    .sec.banner .box a div.btn{width: 100%;}

    .sec.step div.flex{margin-top: 60px;}

    .sec.step div.flex > div.area{width: 100%; padding-left: 30%; margin-bottom: 20px;}
    .sec.step div.flex > div.area div.img-area{position: absolute; left: 20px; top:50%; transform: translateY(-50%); background-size: cover; width: 60px; height: 60px;}
    .sec.step div.flex > div.area p{text-align: left}
    .sec.step div.flex > div.area p.tit{font-size: 22px; margin-bottom: 10px;}
    .sec.step div.flex > div.area p.sub{font-size: 18px;}



}



@media screen and (max-width:300px) {
    /* mobile ~ 280px */

}