@charset "utf-8";

.online-wrap { display:flex; gap:0 20px; padding-top:10px; padding-right:10px; padding-left:50%; flex-wrap:wrap; background:url(../Images/Layout/RWD/online.png) left center no-repeat; background-size:contain;}
.online-wrap .online-box { width:100%; height:auto; display:flex; flex-wrap:wrap; gap:0 20px; overflow:hidden; border:2px solid #bce0fd; border-radius:50px; padding:10px; margin-bottom:20px; transition: all 0.3s ease; align-items:center; background:rgba(255,255,255,0.5); box-shadow:5px 5px 5px 0 rgba(0,0,0,.05);}
.Showroom .productlist li:hover {  transform:translateY(-5px);}
.online-wrap .online-box * { padding:0; margin:0; list-style:none; text-decoration:none;}
.online-wrap .online-box .icon-circle-wrapper { width:240px; height:240px; border-radius: 50%; background-color: #eaf8ff; border: 2px solid #bce0fd; display: flex; justify-content: center; align-items: center; transition: all 0.3s ease; position: relative; }
.online-wrap .online-box .icon-circle-wrapper img { display:block; width:100%; height: auto; object-fit: contain; background:#bce0fd; border-radius: 50%; border:5px solid white;transition: all 0.3s ease; }
.online-wrap .online-box .icon-circle-wrapper + div { width:calc( 100% - 270px );}
.online-wrap .online-box h3 { font-size: 28px; color: #3b5a86; font-weight: bold; margin-bottom:10px;}
.online-wrap .online-box ul {display:flex; gap:0 10px; flex-wrap:wrap;}
.online-wrap .online-box li { width:calc( 50% - 5px );}
.online-wrap .online-box li a { width:100%; display: flex; align-items: center; padding:10px 15px; border: 1px solid #ccc; border-radius: 20px; cursor: pointer; transition: all 0.3s ease; position: relative; color: #555; font-size: 16px; font-weight: 500; margin-bottom:10px; }

@media only screen and (min-width:1025px) {
	.online-wrap .online-box:hover { border-color: #f7b52c;transform: translateY(-10px);box-shadow: 0 0 20px 0 rgba(0,0,0,.15);}
	.online-wrap .online-box:hover .icon-circle-wrapper {  background-color: #fff;border-color: #f7b52c; color:#f7b52c;}
	.online-wrap .online-box:hover .icon-circle-wrapper img { background:#f7b52c; }
	.online-wrap .online-box li:hover a:link,
	.online-wrap .online-box li:hover a:visited,
	.online-wrap .online-box li:hover a:hover,
	.online-wrap .online-box li:hover a:active{ border-color:#f5a623; color: #f5a623;transform: translateX(5px);box-shadow: 0 10px 20px rgba(0,0,0,0.1);}
}

@media only screen and (min-width:0px) and (max-width:1320px) {
	.online-wrap { gap:0 10px;}
	.online-wrap .online-box h3 { margin-bottom:5px;}
	.online-wrap .online-box .icon-circle-wrapper { width:160px; height:160px; }
	.online-wrap .online-box .icon-circle-wrapper + div { width:calc( 100% - 190px );}
}

@media only screen and (min-width:0px) and (max-width:1150px) {
	.online-wrap { display:block;}
}

@media only screen and (min-width:0px) and (max-width:1024px) {
	.online-wrap { padding:0; padding-bottom:75%; background:url(../Images/Layout/RWD/online_m.png) bottom center no-repeat; background-size:contain;}
}

@media only screen and (min-width:0px) and (max-width:600px) {
	.online-wrap .online-box ul { display:block; }
	.online-wrap .online-box li { width:100%;}
}

@media only screen and (min-width:0px) and (max-width:480px) {
}