.con.banner-home {
				width: 100%;
				line-height: 1.1em;
				background: url('banner-card.jpg') center/cover no-repeat;
				
			}
			.wrap {
				max-width: 1400px;
				margin: 0 auto;
				padding: 34px 20px 42px
			}

			.hero {
				display: grid;
				grid-template-columns: 1.02fr .98fr;
				gap: 34px;
				align-items: center;
				min-height: 520px
			}

			.pill {
				display: inline-block;
				padding: 8px 14px!important;
				margin: 0;
				background: #e9fff2;
				color: #16803c;
				border-radius: 999px;
				font-size: 13px;
				font-weight: 600
			}

			.title {
				font-size: 46px;
				line-height: 1.14;
				margin: 18px 0 16px;
				letter-spacing: -1.5px;
				color: #1f2937;
			}

			.desc {
				font-size: 17px;
				line-height: 1.9;
				color: #667085;
				max-width: 630px
			}

			.search {
				margin: 30px 0 18px;
				background: #fff;
				border: 1px solid #e8eef5;
				border-radius: 24px;
				padding: 14px;
				box-shadow: 0 18px 50px rgba(16, 24, 40, .08)
			}

			.search-row {
				display: flex;
				gap: 12px
			}

			.search input {
				flex: 1;
				height: 58px;
				border: none;
				background: #f6f8fb;
				border-radius: 16px;
				padding: 0 18px;
				font-size: 16px;
				outline: none;
				
			}
			.search input.ntn{cursor: pointer;}
			

			.con.banner-home .search .btn {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				height: 58px;
				padding: 0 28px;
				border: none;
				border-radius: 16px;
				background: #16a34a;
				color: #fff;
				font-size: 16px;
				font-weight: 700;
				text-decoration: none;
				cursor: pointer;
				flex: 0;
			}

			.mini {
            display: flex;
            gap: 0px;
            flex-wrap: wrap;
            margin-top: 20px;
            margin-bottom: 16px;
            }

			.mini span {
			padding: 0px 10px 0;
            margin: 0;
            background: #fff;
            border-right: 1px solid #ecf0f5;
            color: #475467;
            font-size: 14px;
			}

			.visual {
				position: relative
			}

			.main {
				width: 100%;
				display: block;
				border-radius: 28px;
				box-shadow: 0 24px 70px rgba(18, 38, 63, .14)
			}

			.float {
				position: absolute;
				left: -20px;
				bottom: 18px;
				background: rgba(255, 255, 255, .95);
				backdrop-filter: blur(10px);
				padding: 18px 18px 16px;
				border-radius: 22px;
				box-shadow: 0 18px 40px rgba(16, 24, 40, .12);
				max-width: 320px
			}

			.float strong {
				display: block;
				font-size: 18px;
				margin-bottom: 8px
			}

			.float p {
				margin: 0;
				color: #667085;
				line-height: 1.7;
				font-size: 14px
			}

			.toplinks {
				display: flex;
				gap: 12px;
				margin-top: 20px;
				font-size: 16px;
			}

			.link {
				height: 48px;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				padding: 0 22px;
				border-radius: 999px;
				text-decoration: none;
				font-weight: 700
			}

			.link.ghost {
				border: 1px solid #16a34a;
				color: #16a34a;
				background: #fff;
			}

			.link.soft {
				background: #16a34a;
				color: #fff;
			}


			.hero__visual {
				flex: 1;
				min-width: 0;
				position: relative;
			}

			.hero__image-wrap {
				position: relative;
				border-radius: 28px;
				overflow: hidden;
				background: #ecf6f1;
				box-shadow: 0 20px 60px rgba(22, 61, 46, .10);
			}

			.hero__image {
				display: block;
				width: 100%;
				height: auto;
				aspect-ratio: 1920 / 500;
				object-fit: cover;
			}

			.hero__card {
				position: absolute;
				right: 260px;
				bottom: -170px;
				width: min(360px, calc(100% - 40px));
				padding: 10px 20px 10px;
				border-radius: 22px;
				color: #222;
/* 				background:
					linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .90)),
					url('banner-card.jpg') center/cover no-repeat; */
				border: 1px solid rgba(255, 255, 255, .8);
				box-shadow: 0 12px 36px rgba(15, 23, 42, .12);
				backdrop-filter: blur(8px);
				-webkit-backdrop-filter: blur(8px);
			}

			.hero__badge {
				display: inline-flex;
				align-items: center;
				padding: 6px 11px;
				border-radius: 999px;
				background: #fff7dd;
				color: #b07900;
				font-size: 12px;
				font-weight: 700;
				margin-bottom: 10px;
			}

			.hero__card h2 {
            margin: 0 0 10px;
            font-size: 20px;
            line-height: 1;
            font-weight: bold;
            color: #1f2937;
			}

			.hero__card p {
				margin: 0;
				color: #5f6773;
				font-size: 14px;
				line-height: 1.8;
			}

			.tips {
				margin-top: 18px;
				color: #7b8794;
				font-size: 13px;
				text-align: center;
			}

    @media (max-width: 1100px){
      .hero__visual{flex:none;width:100%;max-width:none}
      .hero__title{font-size:42px}
      .hero__card{position:static;width:100%;margin-top:16px}
    }


	@media (max-width:960px) {
				.hero {
					grid-template-columns: 1fr;
					display: block;
				}

				.title {
					font-size: 40px
				}

				.float {
					position: static;
					margin-top: 16px;
					max-width: none
				}
				.search-row { 
				 display: 
				flex;gap: 12px;
				flex-wrap: wrap;}
				.search input { flex: 1;width: 50%;}
			}
		
    @media (max-width: 768px){
      .page{padding:16px 12px 30px}
      .hero{border-radius:22px}
      .hero__wrap{padding:22px}
      .hero__title{font-size:31px;line-height:1.28;letter-spacing:-.2px}
      .hero__desc{font-size:15px;line-height:1.8}
      .hero__actions{flex-direction:column}
      .btn{width:100%}
      .hero__points{gap:8px;justify-content:flex-start}
      .hero__points li{font-size:13px}
      .hero__card h2{font-size:18px}
    }