@charset 'utf-8';

/* reset */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    letter-spacing: 0;
    font-family: 'pretendard';
}
html, body{
    scroll-behavior: smooth;
}
li{
    list-style: none;
}
button{
    border:none; 
    box-shadow:none;
    background-color: transparent;
    all: unset; 
    cursor: pointer;
}
a {
    color: #102820; 
    text-decoration: none; 
    outline: none;
}

.hidden{
    font-size: 0;
    text-indent: -9999px;
    opacity: 0;
}
.inner{
    padding: 0 24px;
    margin: 0 auto;
    position: relative;
}
.img-wrap img{
    width: 100%;
    margin: 0 auto;
}
/* !reset */
body{
    background-color: #eee;
}
.wrapper{
    max-width: 500px;
    margin: 0 auto;
    position: relative;
    background-color: #fff;
}
header{
    background-color: #FFF;
    color: #11151C;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    height: 48px;
    line-height: 48px;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
}
header button{
    position: absolute;
    right: 0;
    top: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* nav */
nav{
    position: sticky;
    top: 48px;
    left: 0;
    right: 0;
    z-index: 10;
}
nav ul{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    background: #fff;
    padding: 0 20px;
    transition: 0.4s;
}
nav ul li a{
    width: 100%;
    height: 100%;
    display: block;
    padding: 12px 8px;
    color: #717D8E;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    box-sizing: border-box;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    cursor: pointer;
}
nav ul li a.active{
    color: #11151C;
    font-weight: 700;
    border-color:#11151C;
}
/* nav */
.main-wrap{
    padding: 32px 24px;
    background: #FFF9E5;

}
.main-wrap .title-wrap{
    padding-bottom: 24px;
}
.main-wrap h3{
    color: var(--Color-Text-black, #11151C);
    text-align: center;
    font-size: var(--size-font-heading-heading-1, 28px);
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 42px */
    padding-bottom: 11px;
}
.main-wrap h5{
    color: var(--Color-Text-gray-01, #717D8E);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%; /* 24px */
}
.main-wrap > .img-wrap{
    max-width: 282px;
    margin: 0 auto;
}
.main-wrap .main-banner{
    padding: 12px 16px;
    border-radius: 16px;
    background: #FFEBA9;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 24px;
}
.main-wrap .main-banner .img-wrap{
    width: 42px;
    height: 28px;
}
.main-wrap .main-banner .main-banner-text h4,
.main-wrap .main-banner .main-banner-text h4 b{
    color: #846602;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 19.5px */
}
.main-wrap .main-banner .main-banner-text h4 b{
    font-weight: 700;
}
/* contents-wrap */
.contents-wrap{
}

.contents-wrap .tab-box{
    background: #11151C;
    /* padding-top: 94px; */
}
.contents-wrap .tab-header{
    height: 58px;
    padding: 0 20px;
    line-height: 58px;
    border-bottom: 1px dashed #576375;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.tab-header .icon-wrap{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}
.tab-header .img-wrap{
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tab-header .icon-wrap span{
    color: var(--Color-Text-white, #FFF);
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%; /* 21px */
}
.tab-header .line{
    width: 100%;
    height: 1px;
    background:#fff;
}
.tab-header .page-wrap span{
    color: var(--Color-Text-gray-02, #A9B4C4);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
}
.tab-header .page-wrap span.current-page{
    color: #00E645;
}
.tab-content{
    padding: 40px 0;
}
.tab-content .tab-title{
    padding: 0 20px 40px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 125px 170px;
}
#tab1 .tab-content .tab-title{
    background-image: url('../img/external.webp');
}
#tab2 .tab-content .tab-title{
    background-image: url('../img/internal.webp');
}
#tab3 .tab-content .tab-title{
    background-image: url('../img/engine.webp');
}
#tab4 .tab-content .tab-title{
    background-image: url('../img/oil.webp');
}
#tab5 .tab-content .tab-title{
    background-image: url('../img/wheel.webp');
}
#tab6 .tab-content .tab-title{
    background-image: url('../img/bottom.webp');
}
#tab7 .tab-content .tab-title{
    background-image: url('../img/flood.webp');
}
.tab-content .tab-title h4{
    color: #fff;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 36px */
    padding-bottom: 12px;
}
#tab1 .tab-content .tab-title h4{
    color: #00990D;
}
#tab2 .tab-content .tab-title h4{
    color: #FFA725;
}
#tab3 .tab-content .tab-title h4{
    color: #985CFF;
}
#tab4 .tab-content .tab-title h4{
    color: #BF9264;
}
#tab5 .tab-content .tab-title h4{
    color: #578FCA;
}
#tab6 .tab-content .tab-title h4{
    color: #F38FBA;
}
#tab7 .tab-content .tab-title h4{
    color: #FFD400;
}

.tab-content .tab-title h6{
    color: var(--Color-Text-white, #FFF);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
}
.content-list{
   /* padding-right: 20px; */
}
.content-list > li{

}
.slick-track {
    /* display: flex !important; */
}
.slick-dots{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-top: 40px;
}
.slick-dots li{
    font-size: 0;
    overflow: hidden;
}
.slick-dots li button {
    all: unset;
    width: 6px;
    height: 6px;
    display: inline-block;
    border-radius: 50%;
    background-color: #8D97A5;
    box-sizing: border-box;
    font-size: 0;
    text-indent: -9999px;
    cursor: pointer;
    overflow: hidden;
}
.slick-dots .slick-active button{
    background-color: #328E6E;
}
#tab1 .slick-dots .slick-active button{
    background: #00990D;
}
#tab2 .slick-dots .slick-active button{
    background: #FFA725;
}
#tab3 .slick-dots .slick-active button{
    background: #985CFF;
}
#tab4 .slick-dots .slick-active button{
    background: #BF9264;
}
#tab5 .slick-dots .slick-active button{
    background: #578FCA;
}
#tab6 .slick-dots .slick-active button{
    background: #F38FBA;
}
#tab7 .slick-dots .slick-active button{
    background: #FFD400;
}
.content-list .content-item{
    width: 300px;
    border-radius: 16px;
    padding: 24px 0;
    text-align: center;
    background-color: #D9F2B6;
    margin-right: 8px;
}
#tab1 .content-list .content-item{
    background-color: #D9F2B6;
}
#tab2 .content-list .content-item{
    background-color: #FFEACC;
}
#tab3 .content-list .content-item{
    background-color: #DAD2FF;
}
#tab4 .content-list .content-item{
    background-color: #D7D3BF;
}
#tab5 .content-list .content-item{
    background-color: #C6E8FF;
}
#tab6 .content-list .content-item{
    background-color: #FEDDDD;
}
#tab7 .content-list .content-item{
    background-color: #FFF2B1;
}
.content-list .content-item:last-child {
    margin-right: 20px;
}
.slick-slide[aria-hidden="false"]:last-of-type {
    margin-right: 0;
  }
.content-list .item-title{
    color: var(--Color-Text-black, #11151C);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 24px */
    padding-bottom: 20px;
}
.content-list .content-item ul{
    padding: 0 16px 20px;
}
.content-list .content-item li{
    margin-bottom: 8px;
    padding: 16px 12px 16px 36px;
    background-color: #fff;
    border-radius: 12px;
    position: relative;
    color: var(--Color-Text-black, #11151C);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%; /* 21px */
    text-align: left;
    word-break: break-all;
}
.content-list .content-item li:last-of-type{
    margin-bottom: 0;
}
.content-list .content-item li::before{
    content:'';
    width: 14.667px;
    height: 14.667px;;
    border-radius: 2.667px;
    background-color: #000;
    position: absolute;
    top: 16px;
    left: 12px;
}
#tab1 .content-list .content-item li::before{
    background-color: #00990D;
}
#tab2 .content-list .content-item li::before{
    background-color: #FFA725;
}
#tab3 .content-list .content-item li::before{
    background-color: #985CFF;
}
#tab4 .content-list .content-item li::before{
    background-color: #BF9264;
}
#tab5 .content-list .content-item li::before{
    background-color: #578FCA;
}
#tab6 .content-list .content-item li::before{
    background-color: #F38FBA;
}
#tab7 .content-list .content-item li::before{
    background-color: #FFD400;
}
.content-list .content-item li::after{
    content:'';
    width: 13.333px;
    height: 13.333px;
    background:url('../img/icon_check.svg') center center / auto no-repeat;
    position: absolute;
    top: 17px;
    left: 13px;
}
.content-list p{
    color: var(--Color-Text-black, #11151C);
    text-align: center;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 19.5px */
}
/* !contents-wrap */

/* banner */
.banner{
    border-radius: 16px 16px 0 0;
    background: rgba(23, 25, 28, 0.70);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* For Safari */
    padding: 24px 32px 32px;
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: -100%;
    transition: 0.5s;
    max-width: 500px;
    margin: 0 auto;
    cursor: pointer;
    z-index: 10;
    /* display: none; */
}
.banner.on{
    bottom: 0px;
}
.banner h4{
    color: var(--Color-Text-white, #FFF);
    font-size: var(--size-font-body-body-1, 14px);
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 21px */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding-bottom: 16px;
}
.banner h4 img{
    width: 32px;
    height: 21px;
}
.banner a{
    display: block;
    height: 48px;
    line-height: 48px;
    text-align: center;
    border-radius: 8px;
    background-color: var(--Color-Background-Button-Primary, #0C8);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.88462 2.54877C5.59172 2.84166 5.59172 3.31654 5.88462 3.60943L11.2753 9.00009L5.88462 14.3908C5.59172 14.6836 5.59172 15.1585 5.88462 15.4514C6.17751 15.7443 6.65238 15.7443 6.94528 15.4514L12.8663 9.53042C13.1592 9.23753 13.1592 8.76265 12.8663 8.46976L6.94528 2.54877C6.65238 2.25588 6.17751 2.25588 5.88462 2.54877Z' fill='white'/%3E%3C/svg%3E");
    background-size: 18px 18px;
    background-position: center right 16px;
    background-repeat: no-repeat;
    color: #FFF;
    text-align: center;
    font-size: var(--size-font-title-title-2, 16px);
    font-style: normal;
    font-weight: 700;
}
/* !banner */


/* 공유하기 모달 */
.share-modal-wrap{
	/* display: none; */
}
.share-modal-wrap *{
	font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}
.share-modal-wrap .modal-bg{
	position: fixed;
	left:0;
	right:0;
	top:0;
	bottom:0;
	background: #101820;
	opacity: 0.7;
	z-index: 1000;
}
.share-modal-wrap .modal-con{
	width:calc(100% - 16px);
	background: #FFFFFF;
	border-radius: 10px;
	position: fixed;
	left:50%;
	top:50%;
	transform: translate(-50%, -50%);
	padding:0 16px;
	box-sizing: border-box;
	z-index: 1001;
}
.share-modal-wrap .modal-con .modal-header{
	text-align: center;
	height: 68px;
	line-height:68px;
	border-bottom: 1px solid #DFE1E4;
	color: #878C95;
	font-weight: 700;
	font-size: 20px;
	position: relative;
}
.share-modal-wrap .modal-con .modal-header .modal-close{
	width:24px;
	height:24px;
	background:url("https://images.carvazo.com/mechanics/icon_mec_close@2x.png") center center no-repeat;
	position: absolute;
	background-size: contain;
	right:4px;
	top:22px;
}
.share-modal-wrap .modal-body{
	padding:24px 0;
	box-sizing: border-box;
}
.share-modal-wrap .modal-body > p{
	font-weight: bold;
	font-size: 16px;
	text-align: center;
	color: #101820;
	padding-bottom:32px;
}
.share-modal-wrap .modal-body .input-wrap{
	margin-top:32px;
	border: 1px solid #DFE1E4;
	border-radius: 4px;
	height:44px;
	line-height:44px;
}
.share-modal-wrap .modal-body .input-wrap input[type="text"]{
	padding-left:16px;
	font-weight: 500;
	font-size: 15px;
	color: #878C95;
	width:100%;
}
.share-modal-wrap .modal-body .share-list{
	display: flex;
	justify-content:center;
	padding-bottom:32px;
	gap:24px;
}
.share-modal-wrap .modal-body .share-list li{
	text-align: center;
}
.share-modal-wrap .modal-body .share-list li .sns-share{
	width:72px;
	height:72px;
	display: block;
	margin-bottom: 6px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.share-modal-wrap .modal-body .share-list li.kakaotalk .sns-share{
	background:url('https://images.carvazo.com/mechanics/icon_kakao.png');
}
.share-modal-wrap .modal-body .share-list li.sms .sns-share{
	background:url('https://images.carvazo.com/mechanics/icon_msg.png');
}
.share-modal-wrap .modal-body .share-list li span{
	font-weight: 400;
	font-size: 14px;
	text-align: center;
	color: #444E5A;
	line-height: 1;
}
.share-modal-wrap .modal-body .url-wrap{
	border: 1px solid #DFE1E4;
	border-radius: 4px;
	position: relative;
	height:44px;
}
.share-modal-wrap .modal-body .url-wrap .url-input{
	width:calc(100% - 90px);
	line-height: 44px;
	padding-left: 16px;
	font-weight: 400;
	font-size: 15px;
	color: #878C95;
	box-sizing: border-box;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.share-modal-wrap .modal-body .url-wrap #url{
	/* font-size: 0px; */
	opacity: 0;
	height:0;
}
.share-modal-wrap .modal-body .url-wrap button{
	position: absolute;
	right:0;
	top:0;
	background: #444E5A;
	border-radius: 4px;
	width:86px;
	height:44px;
	line-height:44px;
	text-align: center;
	font-weight: 500;
	font-size: 16px;
	color: #FFFFFF;
}
.share-modal-wrap .btn-wrap{
	padding-bottom: 20px;
}
.share-modal-wrap .btn-wrap button{
	background: #444E5A;
	border-radius: 4px;
	width:100%;
	height:56px;
	line-height:56px;
	font-weight: 600;
	font-size: 20px;
	text-align: center;
	color: #FFFFFF;
}
.share-modal-1 .btn-wrap button:disabled{
	background: #a9adb4;
}
.share-modal-1 .btn-wrap button{
	background: #00CC83;
}
  /* !공유하기 모달 */