
#articleInfo20{margin: 30px auto;width: 95%;}
#articleInfo20 .tit{margin: 40px 20px;}
#articleInfo20 .tit .BoxTitle{margin: 0px 0px 10px;color: #000000;font-weight: 600;font-size: 28px;}
#articleInfo20 .tit .topTitle{font-weight: 400;margin: 30px 0px 10px;font-size: 18px;}
#articleInfo20 .tit .AreaTitle{background-color: #f1f1f1;padding: 10px;text-align: center;font-size: 18px;font-weight: 500;padding: 10px 30px;}
#articleInfo20 .tit p{line-height: 180%;}
.textEditor{}
.textEditor ol{margin: 10px 0 20px;padding-left: 15px;}
.textEditor li{margin: 2px 0px;list-style: square;display: list-item;color: rgb(60 60 60);font-size: 15px;line-height: 1.8;letter-spacing: 0.2px;}
.textEditor h5{font-weight: 500;margin: 20px 0 0px;font-size: 20px;color: #2582bc;letter-spacing: 0.5px;}
.textEditor li a{color: #343434;}
.textEditor li a:hover{color:#afb5b9}

/*topBox*/
.topBox {display: flex;flex-wrap: wrap;justify-content: center;}
.topBox li{position: relative;width: 30%;margin: 20px;}
.topBox li .TXT02{position: absolute;bottom: 0;padding: 10px 20px;background-color: hsl(0deg 0% 0% / 49%);width: -webkit-fill-available;color: #fff;text-align: center;font-weight: 300;}
.topBox li .photo img{width: 100%;height: 230px;object-position: 50% 0;object-fit: cover;}

/*processbox*/
.processbox {display: flex;position: relative;}
.processbox::before {content: "";width: 100%;height: 1px;display: block;background-color: hsl(0deg 0% 89% / 20%);position: absolute;top: 94px;left: 0;}
.processbox li{width: 20%;background-color: #203954;padding: 30px 20px;border-radius: 0px 100px 0px 30px;}
.processbox li:nth-child(2){background-color: #1e4870;}
.processbox li:nth-child(3){background-color: #0B4A8F;}
.processbox li:nth-child(4){background-color: #335D83;}
.processbox li:nth-child(5){background-color: #4f5a6e;}
.processbox li .item .title{padding: 0 5px;color: #ffffff;margin: 0px 0px 10px;font-size: 30px;display: flex;align-items: flex-start;}
.processbox li .item .dotBox {position: relative;width: 7px;height: 7px;border-radius: 50%;background-color: #2582bc;margin-top: 10px;margin-bottom: 18px;margin-left: 10px;}
.processbox li .item .dotBox::before {content: "";width: 13px;height: 13px;border-radius: 50%;display: block;border: 1px solid #2582bc;position: absolute;top: -4px;left: -4px;transform: scale(1);}
.processbox li .item .Txt{padding: 0px 10px;color: #bfd8f1;}
.defaultTitle{margin: 30px 0;color: #000000;font-weight: 600;font-size: 28px;text-align: center;}

/*table*/
.table-container {width: 100%;margin: 20px 0 30px;}
.table_brand {width: 100%;border-right: 1px #e6e6e6 solid;border-top: 1px #e6e6e6 solid;border-spacing: 0px;background-color: #fff;padding: 0 0 10px 0;}
.table_brand td a{font-family: var(--font-family), sans-serif;}
.table_brand th, .table_brand td{border-left: 1px rgb(187 187 187 / 57%) solid;border-bottom: 1px rgb(187 187 187 / 57%) solid;padding: 10px 10px;width: auto;font-size: 16px;font-weight: 400;}
.table_brand td:nth-child(1){/* text-align: center; */}
.table_brand .gray_bg{background-color: #f8f8f8;}
.table_brand td h2{text-align: center;font-size: 18px;padding-bottom: 10px;}
.table_brand tr th:nth-child(1){font-size: 16px;font-weight:400;line-height: 160%;}
.table_brand tr:nth-child(1){text-align: center;background-color: #22b2e6;color: #fff;background-image: -webkit-gradient(linear, left top, right top, from(#22b2e6), to(#5464fc));background-image: linear-gradient(to right, #22b2e6, #5464fc);}
.table_brand tr:nth-child(1) td{font-weight: 500;font-size: 18px;}
.table_brand tr tr:nth-child(odd){background-color: rgb(215 215 215 / 0%);}
.table_brand td.alt{ text-align:left;}
.table_brand tr.black_bg{background-color: #535353;color: #fff;}
.table_brand td.blue_bg{background-color: #badeff;color: #262626;}
.table_brand td.C_bg{background-color: #f8f8f8;}
.table_brand td.purple_bg{background-color: #218ddb;color: #fff;}

.itemBox{display: flex;padding: 10px 0 30px;flex-wrap: wrap;}
.itemBox .Areaitem{width: calc((100% / 3) - 20px);margin: 5px;border: 4px solid #f1f1f1;}
.itemBox .Areaitem h2{padding: 10px 20px;font-size: 20px;font-weight: 500;color: #335d83;border-bottom: 1px solid #f1f1f1;}
.itemBox .Areaitem ol{padding-left: 40px;padding-right: 40px;}
.itemBox .Areaitem p{padding: 10px 20px;}
.itemBox .titleBoxitem{width: calc((100% / 3) - 10px);margin: 5px;}
.itemBox .titleBoxitem:last-child{width: calc((100% / 1) - 10px);}
.itemBox .titleBoxitem p{padding: 20px;}


ul.process_m{margin: 50px 0 30px;text-align: center;}
ul.process_m .btn {width: 270px;line-height: 50px;font-size: 14px;font-weight: 400;color: #261714;padding: 0;display: inline-block;}
ul.process_m .btn a{color: #242424;font-size: 17px;display: block;text-align: center;padding: 10px 0px;-webkit-animation-delay: .7s;animation-delay: .7s;-webkit-animation: fsUp .8s ease-out both;animation: fsUp .8s ease-out both;position: relative;border: 1px solid #d0d0d0;z-index: 0;}ul.process_m .btn a i{font-size: 15px;margin-right: 17px;color: #242424;}
ul.process_m .btn:hover a::before {height: 100%;top: auto;bottom: 0;}
ul.process_m .btn a::before {content: '';position: absolute;top: 0;right: 0;z-index: -1;width: 100%;height: 0;background-color: #251e1e;transition-duration: .3s;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
ul.process_m .btn:hover a,ul.process_m .btn:hover a i{color: #ffffff;}


@media screen and (max-width: 1140px) {
	.textEditor{padding: 00px 0 0px 0px;}
	.topBox li{width: 43%;}
	.processbox {display: flex;flex-wrap: wrap;}
	.processbox li{width: 27%;}
}
@media screen and (max-width: 960px) {
	#articleInfo20 ul li article{font-size: 16px;}
	.itemBox .Areaitem,.itemBox .titleBoxitem{width: calc((100% / 1) - 10px);margin: 10px 0;}
}
@media screen and (max-width: 768px) {
	.main-article #describe article{padding: 10px 0px;}
	#articleInfo20 .tit h4{margin: 0px 0 10px;display: flex;align-items: flex-start;flex-direction: column;}
	#articleInfo20 .tit p{}
	#articleInfo20{width: 100%;margin: 30px auto 10px;}
	.table_brand tbody{height: 40px;overflow: overlay;}
	.table_brand {width: 855px;border-right: 1px #e6e6e6 solid;border-top: 1px #e6e6e6 solid;}
	.table_brand {width: 550px;}
	.table-container {width: 100%;overflow-x: scroll;margin: 0 0 .5em;-webkit-overflow-scrolling: touch;}
	.topBox li{width: auto;margin: 10px 0;}
	.topBox li .photo img{height: auto;}
	.processbox {display: flex;flex-wrap: wrap;}
	.processbox li{width: -webkit-fill-available;padding: 10px 20px;border-radius: 0;}
	.processbox::before,.processbox li .item .dotBox{display: none;}
	.processbox li .item{display: flex;align-items: center;}
	.processbox li .item .title{margin: 0px 0px 0px;}
	#articleInfo20 .tit .topTitle{font-size: 18px;}
	#articleInfo20 .tit .AreaTitle{padding: 10px 10px;font-size: 17px;}
	#articleInfo20 .tit .BoxTitle{font-size: 24px;}
	ul.process_m .btn{width: 100%;}
	ul.process_m {margin: 10px 0 0px;}
}
@media screen and (max-width: 480px) {
	.topBox li .photo img{}
	#articleInfo20 .tit{margin: 30px 0px 10px;}
	.textEditor h5{font-size: 16px;}.textEditor ol{padding-left: 20px;}
	.textEditor li{margin: 5px 0px;}
	.table_brand td:nth-child(1){width: 150px;}
	.itemBox{padding: 10px 0 0px;}
}
