html, body { width: 100%; height: 100%; margin: 0; padding: 0; position: relative; border: none; font-family: "Noto Sans", sans-serif; font-size: 18px; color: #000000;}
* { box-sizing: border-box; }
body { display: flex; flex-direction: column; justify-content: space-between;}
img, fieldset, ul, ol { margin: 0; padding: 0; border: none;}
input, button { margin: 0; border: none;}
li { margin: 0; padding: 0; border: none; list-style: none;}
h1, h2, h3, h4, h5, h6, p, dl, dd, dt, ul, ol, li { margin: 0; padding: 0;}
h2 { margin-bottom: 1rem; font-size: 2.66rem; line-height: 3.2rem;}
h3 { margin-bottom: 1rem; font-size: 1.6rem; line-height: 2rem;}
h4 { margin-bottom: .5rem; font-size: 1rem; line-height: 1.5rem;}
p { margin-bottom: 1rem; left: 1.7rem;}
main { /*flex-grow: 1;*/}


/* header */
header { width: 100%; height: 60px; flex-shrink: 0; position: sticky; top: 0; z-index: 99; background: #ffffff; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);}
header h1 { margin-left: 1rem; font-size: 1.38rem; color: #666666;}
header h1::before { content: " "; height: 1rem; display: inline-block; padding-right: 1rem; border-left: #898989 solid 1px;}
header h1 a, header h1 a:visited, header h1 a:active { color: #666666; text-decoration: none;}
header .header-wrapper { height: 100%; padding: 0 20px; display: flex; flex-direction: row; justify-content: space-between; align-items: center;}
header .header-wrapper .logo { display: flex; flex-direction: row; align-items: center;}
header .header-wrapper img { max-height: 1.38rem;}
header .account { margin-right: 0;}
header .account a { color: #000000;}
header .account a:hover { color: #c8161e;}
header .account a:active { color: #000000;}
header .account-item { width: 280px; padding: 20px; display: none; position: absolute; top: 70px; right: 10px; border-radius: 15px; background: #ffffff; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);}
header .account-item .item-wrapper { position: relative;}
header .account-item .closed {  position: absolute; top: -20px ; right: -5px; z-index: 99;}
header .account-item .material-icons { position: absolute; top: 0; right: 0; color: #000000;}
header .account-item .material-icons a { display: block;}
header .account-item .material-icons:hover { /*color: #c8161e;*/}
header .account-item .material-icons:active { color: #000000;}
header .account-item .account-subnav { width: 100%; margin-bottom: 30px; position: relative;}
header .account-item .account-subnav a { width: 100%; margin-top: 15px; display: block; color: #000000; text-decoration: none;}
header .account-item .account-subnav a:hover { color: #c8161e;}
header .account-item .account-subnav a:active { color: #000000;}

/* footer */
footer { padding: .5rem 1.1rem; background: #666666; color: #ffffff; font-size: .77rem; display: flex;  flex-direction: row; justify-content: space-between; align-items: center;}
footer > div:nth-of-type(1) { width: auto;}
footer > div:nth-of-type(2) {}
.footer-links { display: flex; flex-direction: row; color: #898989;}
.footer-links a { display: block; color: #ffffff; text-decoration: none;}
.footer-links a:nth-of-type(2):after, .footer-links a:nth-of-type(1):after { content: " "; height: .5rem; display: inline-block; margin-left: .77rem; padding-left: .77rem; border-left: #898989 solid 1px;}
.footer-links a:hover { text-decoration: underline;}

/* login */
.login { width: 100%; position: relative; display: flex; flex-direction: row; justify-content: space-between;}
.login .login-main { width: 43%; padding: 3vh 5vw; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center;}
.login .login-main article { text-align: center;}
.login .login-main article p { font-size: 1.77rem;}
.login .login-main .link-partner { display: block; color: #000000; text-align: center;}
.login .login-main .link-partner:hover { color: #c8161e;}
.login-cover { flex-grow: 1; position: relative; overflow: hidden;}
.login-cover img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center left;}

/* login form */
.login .form-login { width: 100%; height: auto; margin: 3vh auto; background: #F5F5F5; border-radius: 1.66rem;}
.login .form-login fieldset { padding: 3.2rem 1.66rem; text-align: center;}
.login .form-login fieldset span { display: block;}
.login .form-login .item { width: 80%; margin: 0 auto 1rem;}
.login .form-login input { width: 100%; margin-bottom: 1rem; padding-top: .6rem; padding-bottom: .6rem; border-radius: 10px; font-size: 1rem;}
.login .form-login input::placeholder { padding-left: 1rem; opacity: 0.5;color: #424242; }
.login .form-login .setting { width: 80%; margin: 0 auto 2rem; display: flex; flex-direction: row; justify-content: space-between; align-items: center;}
.login .form-login .custom { display: flex; flex-direction: row-reverse; justify-content: start; align-items: center;}
.login .form-login .custom label { padding-left: .5vw; display: block; flex-grow: 1; flex-shrink: 0;}
.login .form-login .custom input { width: 15px; height: 15px; margin: 0;}
.login .form-login .setting a { display: block;}
.login .form-login .setting a, .login .form-login .setting a:visited, .login .form-login .setting a:active { color: #c8161e;}
.login .form-login .setting a:hover { color: #000000;}
.login .textbox { background: #ffffff;}
.login input.textbox:focus { background: #ffffff;}
.login .btn-login { background: #c8161e; color: #ffffff; cursor: pointer;}
.login .btn-login:hover { background: #424242; transition: all .5s ease-in;}
.login .btn-request { background: #ffffff; border: #898989 solid 1px; cursor: pointer;}
.login .btn-request:hover { background: #424242; color: #ffffff; border: #424242 solid 1px; transition: all .5s ease-in;}
.login .form-login .error-message { width: 75%; margin: 0 auto 1rem; padding: 2.5%; background: #ffe2e3; border-radius: 10px; display: flex; flex-direction: row; justify-content: space-around;}
.login .form-login .error-message span { text-align: left;}
.login .form-login .error-message span:nth-of-type(2) { padding-left: .5rem;}

/* home */
.home .intro { width: 100%; height: auto; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; align-items: center;}
.home .intro article { width: 50%; height: 100%; position: absolute; display: flex; flex-direction: column; justify-content: center; position: absolute; text-align: center; z-index: 1;}
.home .intro .cover-photo { width: 100%; max-height: auto; height: 450px; position: relative; background: #eeeeee; opacity: .5;}
.home .intro .cover canvas { width: 100%; height: 100%;}

.home .brand { width: 80%; height: auto; margin: 0 auto; padding: 5vh 0; position: relative; display: flex; flex-direction: row; justify-content: space-around; align-items: center;}
.home .brand dl { width: 46%; position: relative; overflow: hidden; border-radius: 30px;}
.home .brand dt { width: 100%; height: 100%; position: absolute; z-index: 1; display: flex; flex-direction: row; justify-content: center; color: #ffffff; font-size: 2rem;}
.home .brand dt strong { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;}
.home .brand dt a { width: 100%; height: 100%; text-decoration: none; display: block;}
.home .brand dd { width: 100%; height: auto; position: relative; overflow: hidden;}
.home .brand .photo img { width: 100%; height: auto; display: block;}

.home .brand .brand-AVerMedia dd { background: #ffffff;}
.home .brand .brand-AVerMedia a { color: #ffffff;}
.home .brand .brand-AVerMedia a:hover { /*background-color: rgba(30, 30, 30, .8);*/ background-color: rgba(200, 22, 30, .8); transition: all .5s ease-in; color: #ffffff;}
.home .brand .brand-AVerAI dd { background: #1a5ab1;}
.home .brand .brand-AVerAI a { color: #ffffff;}
.home .brand .brand-AVerAI a:hover { background-color: rgba(29, 32, 136, .8); transition: all .5s ease-out; color: #ffffff;}
.home .brand .brand-AVerAI .photo img { opacity: .6;}

/* category */
.title-cover { width: 100%; position: relative; overflow: hidden;}
.title-cover article { display: flex; flex-direction: column; justify-content: center; align-items: center;}
.title-cover article h2 { width: 100%; height: 100%; position: absolute; display: flex; flex-direction: column; justify-content: center; color: #ffffff; text-align: center; z-index: 1;}
.title-cover picture { width: 100%; overflow: hidden;}
.title-cover picture img { width: 100%; height: auto; display: block; object-fit: cover;}

.AVerMedia .title-cover { background: #ffffff;}
.AVerMedia .title-cover picture img { opacity: 1;}
.AVerAI .title-cover { background: #1a5ab1;}
.AVerAI .title-cover picture img { opacity: .8;}

.category { width: 100%; position: relative;}
.category .category-list { width: 70%; margin: 5vh auto; position: relative; display: flex; flex-wrap: wrap; justify-content: start;}
.category .category-list .item { width: 30%; margin: 2vh 0; position: relative; overflow: hidden; border-radius: 30px;}
.category .category-list .item dt { width: 100%; height: 100%; position: absolute; z-index: 1; display: flex; flex-direction: row; justify-content: center; color: #ffffff; font-size: 1.5rem; text-align: center;}
.category .category-list .item dt strong { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center;}
.category .category-list .item dt a { width: 100%; height: 100%; color: #ffffff; text-decoration: none; display: block;}
.category .category-list .item dd { background-color: rgba(92, 92, 92, .2);}
.category .category-list .item  span { padding: 0 1rem;}
.category .category-list .item a { background-color: rgba(92, 92, 92, .35);}
.category .category-list .item a:hover { transition: all .3s ease-in; color: #ffffff;}
.category .category-list .item a:hover span { /*font-size: 1.6rem; transition: all .5s ease-in;*/}
.category .category-list .item .photo { width: 100%; height: 100%; position: relative; overflow: hidden;}
.category .category-list .item .photo img { width: 100%; height: auto; display: block; object-fit: cover; opacity: .75;}
.category .photo img { width: 100%; height: auto; display: block; object-fit: cover;}

.AVerMedia.category .category-list .item a:hover { background-color: rgba(200, 22, 30, .8); /*background-color: rgba(30, 30, 30, .8);*/}
.AVerAI.category .category-list .item a:hover { background-color: rgba(29, 32, 136, .8);  /*background-color: rgba(30, 30, 30, .8);*/}
/*
.AVerMedia .category-list .item:nth-of-type(1) { background-color: rgba(200, 22, 30, 1);}
.AVerMedia .category-list .item:nth-of-type(2) { background-color: rgba(255, 119, 125, 1);}
.AVerMedia .category-list .item:nth-of-type(3) { background-color: rgba(255, 177, 159, 1);}
.AVerMedia .category-list .item:nth-of-type(4) { background-color: rgba(255, 137, 111, 1);}
.AVerMedia .category-list .item:nth-of-type(5) { background-color: rgba(255, 65, 65, 1);}
.AVerAI .category-list .item:nth-of-type(1) { background-color: rgba(29, 32, 136, 1);}
.AVerAI .category-list .item:nth-of-type(2) { background-color: rgba(96, 100, 234, 1);}
.AVerAI .category-list .item:nth-of-type(3) { background-color: rgba(146, 143, 255, 1);}
.AVerAI .category-list .item:nth-of-type(4) { background-color: rgba(0, 208, 183, 1);}
.AVerAI .category-list .item:nth-of-type(5) { background-color: rgba(80, 216, 245, 1);}
.AVerAI .category-list .item:nth-of-type(6) { background-color: rgba(107, 166, 255, 1);}
*/

@media screen and (min-width:576px) {
  .category .category-list .item { margin-right: 5%;}
  .category .category-list .item:nth-of-type(3n) { margin-right: 0;}
}

/* path */
.path { width: 70%; height: auto; margin: 1vh auto 3vh; position: relative; color: #898989;}
.path a { color: #000000; text-decoration: none;}
.path a:hover { text-decoration: underline;}
.path a:active { color: #000000; text-decoration: none;}

/* download */
.download { width: 100%; position: relative;}
.download h3 { text-align: center;}
.download .download-wrapper { width: 70%; height: auto; margin: 5vh auto; position: relative;}
.download .download-wrapper h3 + p { text-align: center;}
.download .download-list { width: 100%; margin-top: 5vw; display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: start;}
.download .download-list article { flex-grow: 2;}
.download .download-list .photo { max-width: 30%; margin-right: 3%; flex-grow: 1; background: #F5F5F5; border-radius: 30px; overflow: hidden;}
.download .download-list .photo img { width: 100%; height: auto; display: block; object-fit: cover;}
.download .download-list h4:nth-of-type(2) { margin-top: 2rem;}
.download .download-list .item li { margin-bottom: 1rem; display: flex; flex-direction: row; justify-content: start; align-items: center;}
.download .download-list .item li img { width: 40px; margin-right: 1rem; vertical-align: bottom;}
.download .download-list .item li a { color: #000000;}
.download .download-list .item li a:hover { color: #c8161e;}
.download .download-list .item li a:active { color: #000000;}

/* download category */
.download .download-category { width: 100%; margin: 6vh auto; position: relative;}
.download-tab { display: flex; flex-wrap: wrap; justify-content: center;}
.download-tab input { display:none;}
.download-tab label { margin: 0 .5rem 1rem; padding: .5rem 2rem; cursor: pointer; border-radius: 10px; background: #f5f5f5; color: #000000; text-align: center;}
.download-tab .tab-content { order:1; width:100%; display: none; border-top: 1px solid #898989;}
.download-tab input:checked + label, .download-tab label:hover { opacity: 1; background: #c8161e; color: #ffffff;}
.download-tab input.AVerAI:checked + label, .download-tab .AVerAI + label:hover { background: #1d2088; /*background: #c8161e;*/}
.download-tab input:checked + label + .tab-content { display: initial;}
.download-tab .tab-content p { text-align: center;}
.download .tab-content ul { width: 100%; margin-top: 5vh; position: relative; display: flex; flex-wrap: wrap; justify-content: start; align-items: center;}
.download .tab-content .item { width: 22%; margin-bottom: 2vh;}
.download .tab-content .item a { display: block; color: #000000;}
.download .tab-content.AVerAI .item a:hover { color: #1d2088; /*color: #c8161e;*/}
.download .tab-content .item a:hover { color: #c8161e;}
.download .tab-content .item p { margin-top: 2vh; min-height: 4rem;}
.download .tab-content .item .photo { width: 100%; height: 100%; overflow: hidden; border-radius: 30px; background: #f5f5f5;}
.download .tab-content .item .photo:hover { background: #D9D9D9; transition: all .5s ease-in;}
.download .tab-content .item .photo img { width: 100%; height: auto; display: block; object-fit: cover; object-position: center;}
.download .tab-content .item .photo img:hover { object-position: center; transform: scale(1.1); transition: all .5s ease-in;}

@media screen and (min-width:768px) {
  .download .tab-content .item { margin-right: 4%;}
  .download .tab-content .item:nth-of-type(4n) { margin-right: 0;}
}

/* member */
.member { width: 100%; height: 100%; background: #f5f5f5; display: flex; flex-direction: column; justify-content: center; align-items: center;}

/* logout */
.logout h2 { display: none;}
.logout .logout-wrapper { width: 40%; height: 50%; margin: 0 auto; padding:5% 5%; display: flex; flex-direction: column; justify-content: center; background: #ffffff; border-radius: 30px; text-align: center;}
.logout .btn-member { width: 100%; margin: 2rem auto; padding: .6rem 1rem; display: block; border-radius: 10px; font-size: 1rem; background: #c8161e; color: #ffffff; cursor: pointer; text-decoration: none;}
.logout .btn-member:hover { background: #424242; transition: all .5s ease-in;}

/* forgot */
.forgot article { width: 90%; margin: 0 auto; text-align: center;}
.forgot .forgot-form-wrapper { width: 30%; margin: 0 auto;}

/* forgot form */
.form-forgot { width: 100%; height: auto; margin: 3vh auto; background: #ffffff; border-radius: 1.66rem;}
.form-forgot fieldset { padding: 3.2rem 2.4rem; text-align: center;}
.form-forgot fieldset span { display: block;}
.form-forgot .item { width: 100%; margin: 0 auto 1rem;}
.form-forgot label { display: block;}
.form-forgot input { width: 100%; margin-bottom: 1rem; padding-top: .6rem; padding-bottom: .6rem; border-radius: 10px; font-size: 1rem;}
.form-forgot input::placeholder { padding-left: 1rem; opacity: 0.5; color: #424242;}
.form-forgot .textbox { background: #F5F5F5;}
.form-forgot .textbox:focus { background: #ffffff; border: #666666 solid 1px;}
.btn-forgot { background: #c8161e; color: #ffffff; cursor: pointer;}
.btn-forgot:hover { background: #424242; transition: all .5s ease-in;}
.form-forgot .error-message { width: 100%; margin: 0 auto 1rem; padding: 2.5%; background: #ffe2e3; border-radius: 10px; display: flex; flex-direction: row; justify-content: space-around;}
.form-forgot .error-message span { text-align: left;}
.form-forgot .error-message span:nth-of-type(2) { padding-left: .5rem;}




/* -------- RWD -------- */
@media screen and (max-width:1600px) {
  /* header */
  header .account-item .closed { }

  /* forgot */
  .forgot .forgot-form-wrapper { width: 33%;}

  /* home */
  .home .brand dt { font-size: 2rem;}
  
}

@media screen and (max-width:1440px) {
  /* login */
  .login .login-main { width: 40%;}

  /* home */
  .home .brand dt {  text-align: center;}
}

@media screen and (max-width:1366px) {

  /* member */
  .member .logout { width: 50%;}

  /* logout */
  .logout .logout-wrapper { width: 45%;}

  /* forgot */
  .forgot .forgot-form-wrapper { width: 36%;}
  
}

@media screen and (max-width:1200px) {

  /* header */
  header .account-item .closed {}

  /* login */
  .login .login-main { width: 45%; margin: 0 auto;}

  /* forgot */
  .forgot .f
  
  /* home */
  .home .intro article { width: 70%;}
  .home .brand dt { font-size: 1.8rem;}

  /* download category */
  .download .tab-content .item p { min-height: 6rem;}
}

@media screen and (max-width:1100px) {
  /* login */
  .login { width: 100%; position: relative; display: flex; flex-direction: column; justify-content: space-between;}
  .login .login-main { width: 55%; margin: 0 auto;}

  /* logout */
  .logout .logout-wrapper { width: 50%;}
}

@media screen and (max-width:960px) {
  h2 { margin-bottom: 1rem; font-size: 1.8rem; line-height: 2rem;}
  /* header */
  header { width: 100%; height: 60px; flex-shrink: 0; position: sticky; top: 0; z-index: 99; background: #ffffff; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);}
  header h1 { width: 90px; margin-left: .5rem; font-size: .65rem; line-height: .65rem; text-align: left; display: flex; flex-direction: row; align-items: center;}
  header h1::before { content: " "; height: 1rem; padding-right: .5rem; }
  header h1 a { display: block;}
  header .header-wrapper img { max-height: .85rem;}
  header .account-item .closed {;}

  /* footer */
  footer { display: flex; flex-direction: column; justify-content: space-between; align-items: center;}
  footer > div:nth-of-type(1) { margin-bottom: .5rem;}

  /* login */
  .login .login-main { width: 80%; margin: 0 auto;}
  .login .login-main article p { font-size: 1.2rem;}

  /* home */
  .home .brand { width: 90%; padding: 5vh 0;}
  .home .brand dl { border-radius: 20px;}
  .home .brand dt { font-size: 1.6rem;}

  /* category */
  .category .category-list .item { border-radius: 20px;}
  .category .category-list .item dt { font-size: 1rem;}
  .category .category-list .item a:hover span { font-size: 1.1rem;}

  /* download */
  .download .download-wrapper { width: 90%;}
  .download .download-list .photo { border-radius: 10px;}
  .download .tab-content .item .photo { border-radius: 10px;}

  /* path */
  .path { width: 90%;}

  /* login */
  .member .logout  { width: 60%;}

  /* logout */
  .logout .logout-wrapper { width: 60%;}

  /* forgot */
  .forgot .forgot-form-wrapper { width: 50%;}

}

@media screen and (max-width:768px) {
  /* header */
  header .account-item .closed {}

  /* category */
  .category .category-list { width: 90%; margin: 5vh auto;}

  /* login */
  .member .logout  { width: 80%;}

  /* logout */
  .logout .logout-wrapper { width: 80%;}

  /* forgot */
  .forgot .forgot-form-wrapper { width: 70%;}
  
}

@media screen and (max-width:768px) and (min-width:576px) {
  /* download */
  .download .tab-content .item { width: 30%; margin-right: 4%;}
  .download .tab-content .item:nth-of-type(3n) { margin-right: 0;}
}

@media screen and (max-width:576px) {
  h2 { font-size: 1.3rem; line-height: 1.5rem;}

  /* login */
  .login .login-main { width: 100%;}
  .login .login-main article p { font-size: 1rem;}

  /* login form */
  .login .form-login fieldset { padding: 1.5rem 1.66rem;}
  .login .form-login .item { width: 100%; margin: 0 auto 1rem;}
  .login .form-login .setting { width: 100%; display: flex; flex-direction:column; }
  .login .form-login .custom { margin-bottom: .5rem;}
  .login .form-login .error-message { width: 95%;}

  /* home */
  .home .brand { width: 90%; height: auto; margin: 0 auto; padding: 2vh 0; position: relative; display: flex; flex-direction: column; justify-content: space-around; align-items: center;}
  .home .brand dl { width: 100%; margin: 2vh;}
  .home .brand dt { font-size: 2rem;}

  /* category */
  .category .title-cover h2, .download .title-cover h2  { margin-bottom: 0; line-height: 0 !important;}
  .category .category-list { margin: 1vh auto;}
  .category .category-list .item { width: 47.5%; margin: 1vh 0;}
  .category .category-list .item { margin-right: 5%;}
  .category .category-list .item:nth-of-type(2n) { margin-right: 0;}

  /* download */
  .download .download-list { margin-top: 5vw; display: flex; flex-direction: column-reverse;}
  .download .download-list .photo { max-width: 50%; margin: 5% auto; border-radius: 10px;}
  .download .download-list .item li img { width: 25px; margin-right: .75rem;}

  /* download category */
  .download .tab-content .item p { min-height: 4rem;}

  /* login */
  .member .logout  { width: 90%;}

  /* logout */
  .logout .logout-wrapper { width: 90%;}

  /* forgot */
  .forgot .forgot-form-wrapper { width: 90%;}

}

@media screen and (max-width:576px) and (min-width:480px) {

  /* download */
  .download .tab-content .item { width: 47.5%; margin-right: 5%;}
  .download .tab-content .item:nth-of-type(2n) { margin-right: 0;}
}

@media screen and (max-width:480px) {
  /* login */
  .login .login-main article p { font-size: 1rem;}

  /* home */
  .home .brand dt { font-size: 1.6rem;}

  /* download */
  .download .tab-content .item { width: 100%; margin-right: 0;}

  /* download category */
  .download .tab-content .item p { min-height: 2rem;}
}

@media screen and (max-width:375px) {
  .download-tab label { margin: 0 .5rem .5rem; padding: .5rem 1rem;}
}