.tipsboxs:after { width: 100%; height: 0; display: block; clear: both; content: ""; }
.tipsboxs { position: relative;  }
.tipboxc { float: left; display: block; margin-right: 3.22033898305085%; width: 31.1864406779661%; }
.tipboxc3 { margin-right: 0px; }
.tipboxtilte { font-size: 18px; line-height: 25px; font-weight: 700; border-bottom: 1px solid #303052; padding-bottom: 10px; }
.tipboxtilteicon { float: left; display: block; width: 20px; height: 20px; background-repeat: no-repeat; background-position: center center; margin-right: 7px; margin-top: 2.5px; }
.tipboxtilteicon1 { background-image: url(../../images/tips_icon_1.svg); }
.tipboxtilteicon2 { background-image: url(../../images/tips_icon_2.svg); }
.tipboxtilteicon3 { background-image: url(../../images/tips_icon_3.svg); }
.tipboxul { padding-top: 10px; }
.tipboxli { float: left; display: block; width: 50%; margin-bottom: 5px; }
.tipboxli100 { width: 100%; }
.tipboxul li.li { margin-top: 0px; }
.hcharscc { width: 100%; position: relative; background-image: url(../../images/home_characters.webp); background-repeat: no-repeat; background-size: cover; }
.nowebp .hcharscc { background-image: url(../../images/home_characters.png); }
.tipschars { margin-top: 60px; }
.hcharsc { max-width: 1220px; position: relative; margin-left: auto; margin-right: auto; padding-top: 50px; padding-bottom: 50px; }
.hchars { margin-left: 20px; margin-right: 20px; position: relative; }
.gcharscc { width: 100%; position: relative; background-color: #1f1f45; background-image: url(../../images/back_characters.png); background-size: cover; background-repeat: no-repeat; background-position: center center; margin-top: -56px; padding-top: 56px; }
.gcharsc { max-width: 1220px; position: relative; margin-left: auto; margin-right: auto; }
.gchars { margin-left: 20px; margin-right: 20px; position: relative; overflow: hidden; }
.gchars .htitledesc { margin-top: 50px; }
.chars:after { width: 100%; height: 0; display: block; clear: both; content: ""; }
.chars {  margin-left: auto; margin-right: auto; }
.charc { width: 11.69%; float: left; display: block; margin-right: 3.028%; margin-top: 25px; }
.charscount6 .charc { margin-right: 5.972%; }
.charscount5 .charc { margin-right: 10.3875%; }
.charclast, .charscount6 .charclast, .charscount6 .charclast, .charscount5 .charclast { margin-right: 0px; }
.charlink { text-decoration: none; display: block; }
.charimgc { position: relative; width: 100%; padding-bottom: 100%; display: block; }
.charimg { position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 50%; border: 3px solid #BFD6FE; border-color: #76a8ff; overflow: hidden; display: block; transition: all 0.2s ease; }
.charimg img { -webkit-transition: -webkit-transform 0.4s ease-in-out; transition: transform 0.4s ease-in-out; width: 102%; height: 102%; margin-left: -1%; margin-top: -1%; }
.charlink:hover .charimg { border-color: #e15a00; }
.charlink:hover .charimg img { -moz-transform: rotate(360deg) scale(1.25); -webkit-transform: rotate(360deg) scale(1.25); transform: rotate(360deg) scale(1.25); }
.chardesc { color: #ff6600; text-decoration: none; text-align: center; margin-top: 10px; display: block; font-weight: 700; font-size: 16px; }
.charlink:hover .chardesc { text-decoration: underline; }
.charsmorec { margin-top: 35px; text-align: center; float: left; display: block; width: 100%; }
.gchars .chars { text-align: center; padding-bottom: 60px; }
.gchars .charc { width: 166px; margin-left: 40px; margin-right: 40px; display: inline-block; float: none; margin-top: 50px; }
.charchars { padding-bottom: 10px; }
.chartopchars { background-image: url(../../images/none); }
.chartopchars .hcharsc { padding-top: 20px; padding-bottom: 40px; }
@media (max-width: 1200px) { .charchars .charc { margin-right: 6.632%; }  }
@media (max-width: 1120px) { .tipboxli { float: left; display: block; width: 100%; } .charc { width: 12.57142857%; float: left; display: block; margin-right: 2%; } .charscount6 .charc { width: 15%; margin-right: 2%; } .charscount6 .charclast { margin-right: 0px; } .charscount5 .charc { width: 15%; margin-right: 6.25%; } .charscount5 .charclast { margin-right: 0px; } .charclast { margin-right: 0px; } .gchars .charc { width: 140px; margin-left: 35px; margin-right: 35px; margin-top: 40px; }  }
@media (max-width: 920px) { .charlink:hover .charimg { border-color: #BFD6FE; } .charlink:hover .charimg img { transform: none; } .charlink:hover .chardesc { text-decoration: none; } .hchars { margin-left: 10px; margin-right: 10px; position: relative; } .chars { text-align: center; font-size: 0px; } .charc { width: 24%; margin-right: 0px; float: none; display: inline-block; margin-top: 30px; vertical-align: top; } .charscount6 .charc { width: 33.333%; margin-right: 0px; } .charscount6 .charclast { margin-right: 0px; } .charscount5 .charc { width: 33.333%; margin-right: 0px; } .charscount5 .charclast { margin-right: 0px; } .char { width: 120px; margin-left: auto; margin-right: auto; } .gchars .charc { width: 100px; margin-left: 35px; margin-right: 35px; margin-top: 30px; } .gchars .htitledesc { margin-top: 25px; } .gchars { margin-left: 10px; margin-right: 10px; }  }
@media (max-width: 770px) { .charc { width: 24%; } .char { width: 100px; } .gchars .charc { width: 90px; margin-left: 35px; margin-right: 35px; margin-top: 30px; }  }
@media (max-width: 719px) { .tipboxc { margin-right: 0px; width: auto; float: none; border: 1px solid white; border-radius: 3px; margin-top: 10px; } .tipboxtilte { font-size: 14px; line-height: 20px; padding-top: 9px; padding-bottom: 9px; border-bottom: 0px; position: relative; color: #ff6600; } .tipboxtilteicon { margin-left: 10px; margin-top: 0px; margin-right: 8px; } .tipboxul:after { width: 100%; height: 0; display: block; clear: both; content: ""; } .tipboxul { display: none;  margin-left: 10px; margin-right: 10px; } .tipboxtitlearrow { background-image: url(../../images/icon_arrow_down_orange.svg); background-size: cover; width: 16px; height: 8px; position: absolute; top: 6px; right: 10px; display: block; } .tipboxtitlearrowa { }  }
@media (max-width: 600px) { .charc { width: 33%; margin-top: 25px; } .char { width: 100px; } .chardesc { margin-left: -15px; margin-right: -15px; font-size: 14px; line-height: 20px; } .charsmorec { display: inline-block; float: none; width: 40%; margin-top: 25px; margin-left: 30px; } .charsmorec .morelink { position: relative; } .charsmorec .morelinkicon { background-color: #303053; border-radius: 50%; border: 1px solid #6b6b84; width: 94px; height: 94px; background-image: url(../../images/icon_arrow_right_big.svg); background-repeat: no-repeat; background-position: center center; display: block; position: absolute; left: 50%; margin-left: -48px; margin-top: 0px; } .charsmorec .morelinkdesc { font-size: 14px; font-weight: 700; line-height: 20px; margin-top: 110px; margin-left: -10px; margin-right: -10px; } .gchars .chars { margin-left: -20px; margin-right: -20px; } .gchars .charc { width: 70px; margin-left: 16px; margin-right: 16px; margin-top: 25px; } .gchars .char { width: 100%; }  }
@media (max-width: 440px) { .char { width: 76px; } .charsmorec .morelinkicon { width: 74px; height: 74px; margin-left: -38px; } .charsmorec .morelinkdesc { margin-top: 86px; }  }