#top-img {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 580px;
	background: url("../img/sub/sub01-top.png") no-repeat center / cover;
}
#top-img strong {
	display: block;
	font-size: var(--font-contitle);
	color: var(--white-color);
	text-align: center;
}

#sub .sec-in {
	padding: 140px 0 180px;
}
#sub .sub-title {
	display: block;
	margin-bottom: 50px;
	font-size: var(--font-contitle1);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.05em;
}
#sub .sub-text {	
	font-size: var(--font-subtitle1);
	line-height: 1.6;
}




/************************** about **************************/
.about .top {
	background: url("../img/sub/about-bg.png") no-repeat center / cover;
}
.about .top .sub-title {
	color: var(--primary-color);	
}
.about .top .from {
	margin-top: 100px;
	text-align: right;
}
.about .sub-text span {
	display: block;
}
.about .bottom {
	background: var(--primary-color);
}
.about .bottom .right {
	padding-left: 100px;
}
.about .bottom .sub-title, .about .bottom .count-wrap li span, .about .bottom .count-wrap li div {
	color: var(--white-color);
}
.about .bottom .count-wrap {
	flex-wrap: wrap;
}
.about .bottom .count-wrap li {
	width: 50%;
	min-width: 200px;
}
.about .bottom .count-wrap li:nth-child(-n+2) {
	margin-bottom: 50px;
}
.about .bottom .count-wrap li span {
	margin: 0 0 20px;
	text-align: left;
}
.about .bottom .count strong {
	font-size: var(--font-contitle);
}
.about .bottom .mobile {
	display: none;
}
/************************** about **************************/




/************************** service **************************/
#top-img.service {
	background: url("../img/sub/sub02-top.png") no-repeat center / cover;
}
#sub.service .sub-title {
	text-align: center;
}
#sub.service .new-tab {
	gap: 15px;
	margin-bottom: 130px;
}
#sub.service .new-tab li a {
	display: block;
	width: 196px;
	height: 58px;
	line-height: 58px;
	border-radius: 50px;
	font-size: var(--font-subtitle1);
	font-weight: 600;
	text-align: center;
	color: var(--primary-color);
	border: 1px solid var(--primary-color);
	background: #f5faff;
	transition: all .3s ease-in;
}
#sub.service .new-tab li a:hover {
	background: var(--white-color);
}
#sub.service .content:not(:last-child) {
	margin-bottom: 145px;
}
#sub.service .content .img {
	position: relative;
	width: 450px;
	height: 290px;
	background: #f5f7fa;
	border-radius: 20px;
	overflow: hidden;
}
#sub.service .content .img img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#sub.service .content .box {
	width: 800px;
	padding-left: 50px;
}
#sub.service .content .box > strong {
	font-size: var(--font-contitle2);
	font-weight: 800;
}
#sub.service .content .box > p {
	margin: 10px 0 25px;
	font-size: var(--font-header2);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.03em;
	color: var(--primary-color);
}
#sub.service .content .box > p span {
	display: block;
}
#sub.service .content .box > ul {
	margin-bottom: 25px;
	padding: 25px 15px;
	border-top: 1px solid var(--border-color);
	border-bottom: 1px solid var(--border-color);
}
#sub.service .content .box > ul li {
	position: relative;
	padding-left: 15px;
	font-size: var(--font-subtitle1);
	line-height: 1.4;
}
#sub.service .content .box > ul li:not(:last-child) {
	margin-bottom: 10px;
}
#sub.service .content .box > ul li::before {
	display: block;
	content: "●";
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	font-size: 7px;
	color: var(--primary-color);
}
#sub.service .content .box > ul li.none::before {
	content: "";
}
#sub.service .content .box table {
	width: 100%;
	border-collapse : collapse;
	border-spacing : 0;
}
#sub.service .content .box tr {
	width: 100%;
}
#sub.service .content .box th, #sub.service .content .box td {
	width: 50%;
	padding: 16px 10px;
	font-size: var(--font-subtitle1);
	font-weight: 600;
	text-align: center;
}
#sub.service .content .box th {
	color: var(--white-color);
	background: var(--primary-color);
	border: 1px solid #005fca;
}
#sub.service .content .box td {
	border: 1px solid var(--border-color);
	vertical-align: middle;
}
#sub.service .content .box td:first-child {
	background: #f1f1f1;
}
#sub.linked .content .box td:first-child {
	background: var(--white-color);
}
/************************** service **************************/




/************************** linked **************************/
#top-img.linked {
	background: url("../img/sub/sub03-top.png") no-repeat center / cover;
}
#sub.linked .content .box td span {
	color: var(--primary-color);
}
/************************** linked **************************/




/************************** monthlydelivery **************************/
#top-img.monthlydelivery {
	background: url("../img/sub/sub05-top.png") no-repeat center / cover;
}
.contact .info-banner {
	justify-content: center;
	gap: 15px;
	max-width: 960px;
	margin: 0 auto 50px;
	padding: 30px;
	font-size: var(--font-title);
	font-weight: 600;
	line-height: 1.3;
	border-radius: 15px;
	background: #edf5ff;
}
.contact .info-banner img {
	width: 50px;
}
.contact .form > li {
    display: flex;
    align-items: center;
    width: 100%;
	padding: 25px 15px;
    box-sizing: border-box;
	border-top: 1px solid #e9e9e9;
}
.contact .form > li:last-child {
	border-bottom: 1px solid #e9e9e9;
}
.contact .form > li:nth-child(odd) {
    margin-right: 40px;
}
.contact .form > li > span {
    position: relative;
    display: inline-block;
    min-width: 350px;
    font-size: var(--font-subtitle1);
	font-weight: 600;
}
.contact .form > li span span {
    display: inline-block;
    margin-left: 8px;
    position: absolute;
    top: 0;
    font-size: 18px;
    color: var(--primary-color);
}
.contact .form > li input[type='text'] {
    width: 100%;
	max-width: 620px;
    height: 54px;
    box-sizing: border-box;
    padding: 10px;
    font-size: var(--font-subtitle1);
    border: none;
	background: var(--white-color);
	border: 1px solid var(--border-color);
	border-radius: 5px;
}
.contact .form > li input[type='text']::placeholder {
    color: #bbbbbb;
}
.contact .form .radio-wrap li {
	position: relative;
    width: 25%;
    cursor: pointer;
}
.contact .radio-wrap {
	width: 100%;
	gap: 10px;
}
.contact .radio-wrap input[type="radio"] + label span {
    display: inline-block;
    margin-top: -18px;
    width: 100%;
    height: 54px;
    line-height: 54px;
    text-align: center;
    font-size: var(--font-subtitle1);
    color: #bbbbbb;
    background: #f3f3f3;
	border-radius: 5px;
    box-sizing: border-box;
    cursor: pointer;
}
.contact .radio-wrap input[type="radio"]:checked + label span {
    border: 1px solid var(--primary-color);
    background: #fff;
    color: var(--primary-color);
    font-weight: 500;
}
.contact .address {
	width: 100%;
}
.contact .address > .flex {
	margin-bottom: 10px;
}
.contact .address button, .contact .file-btn input[type=file]::file-selector-button {
	margin-left: 10px;
	width: 150px;
    height: 54px;
    line-height: 54px;
    font-size: var(--font-body1);
    color: var(--white-color);
	text-align: center;
	background: var(--black-color);
	border-radius: 5px;
}
.contact .file-btn input[type=file]::file-selector-button {
	margin-left: 0;
}
.contact .form > li .address input {
	max-width: 100%;
}
.contact .submit-btn {
	display: block;
	margin: 80px auto 0;
    padding: 20px 50px;
    font-size: var(--font-title);
    font-weight: 600;
	text-align: center;
    color: var(--white-color);
    background: var(--primary-color);
    border-radius: 8px;
	transition: all .3s ease-in;
}
.contact .submit-btn:hover {
    background: var(--primary-h-color);
    border-radius: 8px;
}
/************************** monthlydelivery **************************/




/************************** freight **************************/
#top-img.freight {
	background: url("../img/sub/sub06-top.png") no-repeat center / cover;
}
.contact select {
    width: 100%;
	max-width: 620px;
    height: 54px;
    padding: 0 10px;
    font-size: var(--font-subtitle1);
    background: url("../img/main/down.png") no-repeat right 10px top 21px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    background-size: 12px;
}
#sub.freight .content .box table {
	margin-bottom: 50px;
}
#sub.freight .content .box td:last-child {
	background: var(--white-color);
}
/************************** freight **************************/




/************************** menu **************************/
#top-img.delivery {
	background: url("../img/sub/sub04-top.png") no-repeat center / cover;
}
#top-img.tip {
	background: url("../img/sub/sub07-top.png") no-repeat center / cover;
}
#top-img.youtube {
	background: url("../img/sub/sub08-top.png") no-repeat center / cover;
}
#top-img.review {
	background: url("../img/sub/sub09-top.png") no-repeat center / cover;
}
/************************** menu **************************/



.new-tab {
    display: flex;
    gap: 10px 50px;
    flex-wrap: wrap;
    justify-content: center;
	margin: 0 0 40px;
}
.new-tab li a {
	display: block;
	font-size: var(--font-medium);
	color: var(--text-gray-color);
}
.new-tab li.on a {
	font-weight: bold;
    color: var(--primary-color);
}


@media all and (max-width:1281px){
	#top-img {height: 480px;}
	#sub .sec-in {padding: 120px 0 160px;}
	#sub .sub-title {margin-bottom: 30px;}
	.about .top .from {margin-top: 80px;}
	.about .bottom .right {padding-left: 80px;}
}

@media all and (max-width:1025px){
	#top-img {height: 450px;}
	#sub .sec-in {padding: 110px 0 150px;}
	.about .top .from {margin-top: 60px;}
	.about .bottom .right {padding-left: 50px;}
	.about .bottom .count-wrap li span {margin-bottom: 10px;}
	#sub.service .new-tab {gap: 10px; margin-bottom: 100px;}
	#sub.service .new-tab li a {width: 150px; height: 48px; line-height: 48px;}
	#sub.service .content .box {padding-left: 30px;}
	#sub.service .content .img {width: 350px; height: 220px;}
	#sub.service .content .box {width: calc(100% - 380px);}
	#sub.service .content .box > p {margin: 5px 0 20px}
	#sub.service .content .box > ul {margin-bottom: 20px; padding: 20px 15px;}
	#sub.service .content:not(:last-child) {margin-bottom: 110px;}

	.contact .form > li > span {min-width: 200px;}
	.contact .form > li input[type='text'], .contact select {max-width: 100%;}
}

@media all and (max-width:877px){
	#top-img {height: 400px;}
	#sub .sec-in {padding: 100px 0 140px;}
	.about .bottom .count-wrap {justify-content: start;}
	.about .bottom .count-wrap li:nth-child(-n+2), .about .bottom .count-wrap li {margin-bottom: 30px;}
	.about .bottom .count-wrap li {min-width: 150px;}
	#sub.service .new-tab {margin-bottom: 80px;}
	#sub.service .content .img {width: 220px; height: 150px;}
	#sub.service .content .box {width: calc(100% - 220px);}
	#sub.service .content:not(:last-child) {margin-bottom: 100px;}
	#sub.service .content .box > p span {display: inline;}

	.contact .form > li > span {min-width: 130px;}

	#sub.freight .content .box table {margin-bottom: 30px;}
	#sub.freight .content .box td span {display: block;}
}

@media all and (max-width:641px){
	#top-img {height: 350px;}
	#sub .sec-in {padding: 90px 0 130px;}
    #sub .sub-title {margin-bottom: 20px;}
	#sub.about .bottom .sub-title {margin-bottom: 0px;}
	.about .sub-text span {display: inline;}
	.about .top .from {margin-top: 30px;}
	.about .bottom .right {padding-left: 0;}
	.about .bottom .left {display: none;}
	.about .bottom .mobile {display: block; max-width: 360px; margin: auto;}
	.about .bottom .count-wrap {flex-direction: row; justify-content: inherit; gap: 0; margin-top: 20px;}
	#sub.service .new-tab {margin-bottom: 50px; gap: 6px;}
	#sub.service .new-tab li a {width: 100px; height: 36px; line-height: 36px; font-size: 14px;}
	#sub.service .content {flex-direction: column;}
	#sub.service .content .img {width: 100%; height: 260px; margin: 0 auto 20px; border-radius: 15px;}
	#sub.service .content .box {width: 100%; padding-left: 0;}
	#sub.service .content:not(:last-child) {margin-bottom: 90px;}

	.contact .info-banner {margin-bottom: 30px; padding: 25px; border-radius: 15px;}
	.contact .info-banner img {width: 44px;}
	.contact .form > li {flex-direction: column; align-items: baseline; gap: 10px; padding: 20px 10px;}
	.contact .radio-wrap {flex-wrap: wrap;}
	.contact .form .radio-wrap li {width: calc(50% - 5px);}
	.contact .radio-wrap input[type="radio"] + label span, .contact .form > li input[type='text'], .contact .address button, .contact .file-btn input[type=file]::file-selector-button {height: 48px; line-height: 48px;}
	.contact select {height: 48px;}
	.contact .address button, .contact .file-btn input[type=file]::file-selector-button {width: 122px;}
	.contact .submit-btn {margin: 50px auto 0; padding: 15px 40px;}
}

@media all and (max-width:481px){
	#top-img {height: 260px;}
	#sub .sec-in {padding: 70px 0 110px;}
}