:root{
	--background: #f3f6fc;
	--burger: #333;
	--orange-light: #fce3cf;
	--orange: #f17c24;
	--orange-dark: #EC4D1B;
	--blue-black: #30373d;
	--blue: #3498db;
	--blue-dark: #204282;
	--blue-ex-light: #e7f3fa;
	--red: #ed1c23;
	--grey: #e6e6e6;
	
	--link: #3498db;
	--link-hover: #204282;
	
	--alter: "alter-gothic";
}

html, body { font-family:roboto; line-height:1.3em; font-size:18px; background-color:var(--background);}
a { color:inherit; }
/* background: linear-gradient(94.88deg, #FF6C40 5.12%, #FFB800 93.99%); */
body { padding-top:55px; }

.form-error-message { padding:5px; font-size:.7em; line-height:1.3em; width:100%; max-width:800px; margin:0 auto 5px; background-color:#F66;color:#FFF; border-radius:5px; }
.form-message{background-color:var(--blue);border-color:var(--blue);padding:5px;font-size:0.7em;line-height:1.3em;}
.form-message a {color:#000;}
.form-message a:hover {color:#FFF;}

.container { text-align:center; }
.container .boundary, .breadcrumb { margin:0 auto; width:96%; max-width:1100px; }

.breadcrumb { margin:10px auto; }

.container .container-title { display:inline-block; font-size:1.4em; line-height:1.5em; margin-top:0; background: linear-gradient(94.88deg, #FF6C40 5.12%, #FFB800 93.99%); background-clip:text; -webkit-background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }

.top-menu { height:45px; position:fixed; top:0; left:0; z-index:9999; }
.top-menu .boundary { width:100%; }
.top-menu .table { width:96%; margin:0 auto; }

.top-menu .top-menu-logo { display:block; width:100%; height:55px; background-color:var(--orange); border-bottom-left-radius:10px; border-bottom-right-radius:10px; overflow:hidden; }
.top-menu .top-menu-logo img { display:inline-block; width:100%; height:auto; }

.top-menu .hamburger, .top-menu [class^='icon-'] { float:right; margin:8px 0 0; }
.top-menu [class^='icon-'] { border:0; background:0; font-size:1.4em; margin-right:15px; }
.top-menu [class^='icon-']:hover { color:var(--orange); }

.top-menu .hamburger, .top-menu [class^='icon-'], .top-menu .top-menu-logo, .top-menu .boundary { position:relative; }
.top-menu .hamburger, .top-menu [class^='icon-'], .top-menu .top-menu-logo { z-index:3; }
.top-menu .boundary:before { content:""; display:block; width:100%; height:45px; background-color:#FFF; z-index:2; position:absolute; top:0; left:0; box-shadow:0 0 3px #333; }

.top-menu .icon-qr_code_scanner { padding:0; }

.top-menu .member-area { display:inline-block; position:relative; float:right; }
.top-menu .member-area span { display:none; }

.top-menu .top-menu-content { position:absolute;  top:-1000px; left:5%; width:90%; height:auto; background-color:#FFF; padding:40px 0 20px; margin:0; box-shadow:0 0 3px #666; border-bottom-left-radius:10px; border-bottom-right-radius:10px; transition:all .3s; font-size:0.8em; }
.top-menu .top-menu-content.active { top:calc(100% - 10px); }

.top-menu .top-menu-content li { display:inline-block; width:50%; height:auto; margin-bottom:20px; vertical-align:top; line-height:1.3em; text-align:center; }
.top-menu .top-menu-content li:hover, .top-menu .top-menu-content li.active { color:var(--orange); }
.top-menu .top-menu-content li.min-hide { display:none; }
.top-menu .top-menu-content li a img { display:block; width:30px; margin:0 auto 10px; }
.top-menu .top-menu-content li a span { display:block; }

.banner { margin:20px 0; }
.banner .banner-text { font-family:var(--alter); color:var(--orange); line-height:2.5em; font-size:0.55em; background-color:var(--grey); border-radius:10px; position:relative; }
.banner .banner-text:before { content:""; padding-top:100%; display:block; }
.banner .banner-text div { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); white-space:nowrap; }
.banner .banner-text strong, .banner .banner-text span { display:block; }
.banner .banner-text strong { font-size:1.7em; }
.banner .banner-text span { font-size:0.85em; color:var(--blue-black); }

.banner .banner-icons-container { background-color:#FFF; border-radius:10px; overflow:hidden; width:96%; margin-left:4%;  border:1px solid #b3b3b3; }
.banner .banner-icons { width:60vw; white-space:nowrap; overflow-x:auto; margin-bottom:30px; padding:10px; box-sizing:border-box; text-align:center; }
.banner .banner-icons a { display:inline-block; width:25%; margin:0; text-align:center; }
.banner .banner-icons img { display:inline-block; width:30px; height:auto; }
.banner .banner-slogan { font-size:0.6em; line-height:1.2em; margin:-40px 0 10px; }

.banner .banner-button { background-color:var(--grey); padding:10px 22px 5px; box-sizing:border-box; text-align:right; }
.banner .banner-button a {background-color: var(--orange); font-size: 0.8em; padding: 3px 10px; color: #FFF; border-radius: 10px; border-bottom-right-radius:0; margin-top: -10px; display: inline-block; }
.banner .banner-button a:hover { background: linear-gradient(94.88deg, #FF6C40 5.12%, #FFB800 93.99%); }

.qr-code-tools-list { width:100%; background-color:#FFF; border-radius:10px; padding:5px; box-sizing:border-box; }
.qr-code-tools-list .qr-code-tools-item { display:inline-block; width:50%; padding:5px; box-sizing:border-box; text-align:center; }
.qr-code-tools-list .qr-code-tools-item:first-child, .qr-code-tools-list .qr-code-tools-item:nth-child(3) { border-right:1px solid #DDD; }
.qr-code-tools-list .qr-code-tools-item:first-child, .qr-code-tools-list .qr-code-tools-item:nth-child(2) { border-bottom:1px solid #DDD; }
.qr-code-tools-list .qr-code-tools-item img, .qr-code-tools-list .qr-code-tools-item .qr-code-tools-item-name { width: 20%; margin:0 auto 5px; height:auto; display:inline-block; vertical-align:middle; box-sizing:border-box; }
.qr-code-tools-list .qr-code-tools-item .qr-code-tools-item-name { width:100%; padding-left:10px; font-size:0.8em; line-height:1.3em; white-space:nowrap; }
.qr-code-tools-list .qr-code-tools-item .qr-code-tools-item-name span { display:block; text-overflow:ellipsis; overflow:hidden; }

.introduction { background-color:var(--blue-ex-light); padding:30px 0 20px; margin:40px 0 0; }
.introduction .introduction-container .introduction-item { display:inline-block; width:50%; box-sizing:border-box; margin-bottom:10px; padding:10px; text-align:center; }
.introduction .introduction-container .introduction-item img { width:60%; max-width:130px; height:auto; }
.introduction .introduction-container .introduction-item .introduction-item-content span:before { content:" "; }

.services { background-color:#FFF; padding:30px 0; }
.services .services-list .services-item { margin-bottom:20px; box-shadow:0 0 10px #999; border-radius:15px; overflow:hidden; }
.services .services-list .services-item .square-image { border-top-left-radius:15px; border-top-right-radius:15px; }
.services .services-list .services-item .square-image:before { padding-top:52.333%; }
.services .services-list .services-item .services-item-name { display:block; box-sizing:border-box; padding:15px 10px; border-bottom-left-radius:15px; border-bottom-right-radius:15px; background-color:#FFF; text-align:center; }
.services .services-list .services-item:hover .services-item-name { color:var(--orange); }

.news { padding-top:2em; }
.news .boundary > .table > .col:last-child { padding-top:1em; }
.news .boundary .table .col { text-align:left;color:#AAA;}
.news .boundary .table .col a {color:var(--blue);line-height:1.2em;display:block;margin-bottom:10px;}
.news .boundary .table .col a:hover { color:var(--blue-dark); }
.news .boundary .table .col .table {margin-bottom:1em;}
.news .boundary .table .col p {color:#000;}
.news .boundary .table .col h3 {margin: 1em 0 10px;}
.news .boundary .table .col h3 {color:var(--blue-dark);}
.news .boundary .table .col h3 a {color:inherit;}

.news .top-news .square-image:before { padding-top:52.333%; }
.news .boundary .top-news .top-news-description { color:#000; }

.footer, .copyright { background-color:var(--blue-black); color:#FFF; }
.footer .boundary { padding:40px 0 10px; }
.footer .footer-logo { margin-bottom:20px; height:70px; width:auto; }
.footer .footer-tools, .footer .footer-menu { list-style-type:none; padding:0; margin:0; }
.footer .footer-tools li, .footer .footer-menu li { display:inline-block; vertical-align:top; text-align:left; }
.footer .footer-tools li { margin:0 20px 20px 0; }
.footer .footer-tools li img, .footer .footer-tools li span { display:inline-block; width:20px; height:auto; vertical-align:middle; }
.footer .footer-tools li .footer-image { display:inline-block; width:30px; height:30px; line-height:30px; border-radius:100%; background-color:#FFF; padding:5px; vertical-align:middle; text-align:center; }
.footer .footer-tools li span { width:calc(100% - 50px); padding-left:5px; box-sizing:border-box; white-space:nowrap; }
.footer .footer-tools li span span { display:block; }

.footer .footer-menu { margin-top:10px; }
.footer .footer-menu li { display:inline-block; vertical-align:top; margin-right:30px; margin-bottom:5px; }

.copyright { border-top:1px solid #FFF; font-size:0.8em; box-sizing:border-box;}
.copyright .boundary { text-align:left; padding:10px 0; line-height:1.5em; }

.multi-selection .selection-content {position:fixed; top:0; left:0; width:100%; height:100%; z-index:99999; text-align:center; display:none;}
.multi-selection .selection-content.active {display:block;}
.multi-selection .selection-content .selection-bg {position:absolute; top:0; left:0; width:100%; height:100%; background-color:#000; opacity:.75;}
.multi-selection .selection-content .selected-items { display:block; width:100%; }
.multi-selection .selection-content .selection-body { display:inline-block; width:96%; max-width:300px; height:auto; margin:0; position:absolute; top:50%; left: 50%; transform:translate(-50%, -50%); background-color:#FFF; padding:10px; border-radius:5px; }
.multi-selection .selection-content .selection-body strong {margin-bottom:10px; display:inline-block;}
.multi-selection .selection-content .selection-body .lbjs {width:100%;box-sizing:border-box; text-align:left; }
.multi-selection .selection-content .selection-body .button {margin-top:10px;}

.multi-selection .selected-items { max-width:80%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: block; vertical-align: middle; margin-top: 5px; color:#999; }

.multi-selection .selected-items .textbox.amount {width:50px;}

.manager-form { position:fixed; top:0; left:0; width:100%; height:100%; z-index:99999; background-color:rgba(0,0,0,0.7); display:none; }
.manager-form .manager-form-container { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:94%; max-width:600px; border-radius:5px; background-color:#FFF; }
.manager-form .manager-form-container .manager-form-title { background-color:var(--blue-dark); color:#FFF; padding:10px; box-sizing:border-box; border-top-left-radius:5px; border-top-right-radius:5px; }
.manager-form .manager-form-container .manager-form-content { padding:10px; box-sizing:border-box; }
.manager-form .manager-form-container label { margin-top:5px; vertical-align:top; min-width:150px; }
.manager-form .manager-form-container .button { margin:10px 5px 0; min-width:80px; }
.manager-form .manager-form-container .manager-form-content .description { text-align:right; font-size:0.8em; color:#999; }
.manager-form .manager-form-container .textbox { width:calc(100% - 160px); }

@media (min-width:576px){
	.banner { margin-bottom:20px; }
	
	.top-menu .top-menu-content li { width:25%; border-right:1px solid #DDD; box-sizing:border-box; }
	.top-menu .top-menu-content li:last-child { border:0; }
	
	.banner .banner-text { font-size:0.7em; }
	
	.banner .banner-icons { width:90%; margin:10px auto 35px; }
	.banner .banner-icons img { width:50px; }
	
	.banner .banner-button { height:40px; padding:10px 55px; }
	
	.qr-code-tools-list { display:flex; padding:0; }
	.qr-code-tools-list .qr-code-tools-item { display:inline-block; flex:auto; width:auto; text-align:left; border:0!important; border-right:1px solid var(--background)!important; padding:10px 0 10px 7px; }
	.qr-code-tools-list .qr-code-tools-item:last-child { border-right:0!important; }
	.qr-code-tools-list .qr-code-tools-item img { width:27px; }
	.qr-code-tools-list .qr-code-tools-item .qr-code-tools-item-name { width:80%; }
	
	.introduction .introduction-container .introduction-item { width:25%; }
	.introduction .introduction-container .introduction-item img {width: auto; max-width: unset; height: 70px; }
	.introduction .introduction-container .introduction-item .introduction-item-content { line-height:1.3em; }
	
	.services .services-list .services-item { display:inline-block; vertical-align:top; width:32%; margin: 0 2% 0 0; }
	.services .services-list .services-item:nth-child(3n+0) { margin-right:0; }
	.services .services-list .services-item .services-item-name { font-size:.75em; padding:20px 5px; }
	
	.news .boundary .table .col h3 {margin: 0;}
	.news .boundary .table .col .table .col {padding:10px;}
}

@media (min-width:768px){
	.top-menu.scrolling { background-color:#FFF; box-shadow: 0 0 3px #333; }
	.top-menu .hamburger { display:none; }
	.top-menu .boundary:before { content:unset; }
	
	.top-menu .top-menu-content li.min-hide { display:inline-block; }
	
	.top-menu .member-area { display:none; }
	
	.top-menu .icon-qr_code_scanner { margin-right:0; }
	.top-menu .top-menu-logo img { margin-top:5px; }
	.top-menu .top-menu-content { position:relative!important; background:unset; width:92%; border-right:1px solid #DDD; border-radius:unset; top:unset!important; left:unset; padding:0; box-shadow:unset!important; }
	.top-menu .top-menu-content li { display:inline-block; width:auto; height:auto; margin:0 0 0 10px; border:0; white-space:nowrap; text-align:left; line-height:45px; }
	.top-menu .top-menu-content li a img { display:inline-block; vertical-align:middle; margin:0 5px 0 0; width:25px; }
	.top-menu .top-menu-content li a span { display:inline-block; vertical-align:middle; line-height:1.5em; font-size:0.8em; }
	.top-menu .top-menu-content li a span span { display:block; font-size:1em; text-overflow:ellipsis; overflow:hidden; max-width:100px; }
	.top-menu .top-menu-content li a i { float:unset; display:inline-block; color:#666; vertical-align:middle; margin:0 5px 0 0; }
	
	.banner .col-sm-9 { position:relative; }
	
	.banner .banner-text { font-size:0.8em; }
	
	.banner .banner-icons-container { position:absolute; top:0; right:0; height:100%; }
	.banner .banner-icons { margin-bottom:47px; margin-top:3%; }
	
	.banner .banner-slogan { margin:-50px 0 15px; }
	.banner .banner-button { height:50px; padding:10px 65px; position:absolute; bottom:0; right:0; width:100%; }
	.banner .banner-button a { padding:10px 15px; }
	
	.qr-code-tools-list { width:90%; margin:30px auto; }
	.qr-code-tools-list .qr-code-tools-item { padding:20px 0 20px 7px; }
	.qr-code-tools-list .qr-code-tools-item img { width:35px; }
	.qr-code-tools-list .qr-code-tools-item .qr-code-tools-item-name { width:75%; }
	
	.introduction .introduction-container .introduction-item .introduction-item-content { font-size:0.9em; }
	
	.services .services-list .services-item .services-item-name { font-size:0.8em; }
	
	.news .boundary .table .col .table .col { padding:0; }
	.news .boundary .top-news h3 a { display:-webkit-box!important; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
	.news .boundary .top-news .col:last-child { padding-left:10px!important; }
	.news .boundary .top-news .top-news-description { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
	
	.footer { margin-top:20px; }
}

@media (min-width:996px){
	.container .container-title { font-size:1.7em; }
	
	.top-menu .top-menu-logo img { margin-top:0; height:100%; object-fit:contain; }
	.top-menu .top-menu-content { text-align:right; padding-right:20px; width:90%; }
	.top-menu .top-menu-content li { margin:0 0 0 20px; }
	.top-menu .top-menu-content li a span span { max-width:120px; }
	
	.banner .banner-text { font-size:1.4em; width:28%!important; }
	.banner .banner-icons { margin:40px auto 75px; }
	.banner .banner-icons img { width:80px; }
	.banner .banner-button { height:70px; font-size:1.2em; }
	.banner .banner-slogan { font-size:.75em; margin:-65px 0 20px; }
	.banner .banner-button a { padding:15px 20px; }
	
	.qr-code-tools-list .qr-code-tools-item { padding:30px 0 30px 15px; }
	.qr-code-tools-list .qr-code-tools-item img { width:40px; }
	.qr-code-tools-list .qr-code-tools-item .qr-code-tools-item-name { font-size:1em; }

	.introduction .introduction-container .introduction-item img { height:80px; margin-bottom:10px; }
	.introduction .introduction-container .introduction-item .introduction-item-content { font-size:1em; }
	.introduction .introduction-container .introduction-item .introduction-item-content span { display:block; }
	.introduction .introduction-container .introduction-item .introduction-item-content span:before { content:unset; }
	
	.services { padding:40px 0; }
	
	.footer { margin-top:40px; }
}
@media (min-width:1200px){
	body { padding-top: 100px; }
	.top-menu, .top-menu .boundary { height:60px; }
	.top-menu .hamburger, .top-menu .icon-qr_code_scanner { display:none; }
	.top-menu .top-menu-logo { height:auto; border-bottom-right-radius:20px; border-bottom-left-radius:20px; position:relative; }
	.top-menu .top-menu-logo:before { content:""; display:block; width:100%; padding-top:30%; }
	.top-menu .top-menu-logo img { position:absolute; top:0; left:0; height:100%; object-fit:cover; }
	.top-menu .table { width:100%; height:100%; }
	
	.top-menu .top-menu-content { width:100%; padding:0; border:0; font-size:1em; }
	.top-menu .top-menu-content li { line-height:60px; margin-left:30px; }
	.top-menu .top-menu-content li a img { width:30px; margin-right:10px; }
	.top-menu .top-menu-content li a span { line-height:1rem; }
	.top-menu .top-menu-content li a span span { max-width:150px; }
	
	.banner .banner-text { width:24.999%!important; }
	.banner .banner-icons { margin-top:30px; }
	.banner .banner-button { padding:10px 95px; }
	
	.introduction .introduction-container .introduction-item img { height:100px; }
}