body {margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 1em;}  
div {margin: 0; padding: 0;}
span {padding: 0;}
strong {color: #3475c0; font-size: 1.1em; letter-spacing: 1px;}
center {margin: 20px 0; padding: 4px 0;}
a {color: #ff0066; text-decoration: none; padding: 2px 3px;}
a:hover, a:active {background: #f4e0e9; border-radius: 4px;}
h1, h2, h3, h4, p {padding: 6px;}
h1 {font-size: 3em; border-bottom: 1px dotted black;}
h2 {font-size: 1.6em;}
h3 {font-size: 1.4em; background: #e4dcae;}
h4 { font-size: 1.2em;}
#head {width: 100%; min-height: 100px; position: relative; top: 0; left: 0; z-index: 99; overflow: visible; background: linear-gradient(to bottom, #0f1535 0%, #1c1c4b 40%, #2a3a7a 100%); background-color: #1c1c4b;}
#head_inner {width: 96%; margin: 0 auto; color: whitesmoke;}
#head_inner > div {line-height: 26px; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.95em;}
#head_row1 {display: flex; justify-content: space-between; align-items: center;}
#head_row2 {margin: 23px 0 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#head_path {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; text-align: right;}
#app_name {flex-shrink: 0; color: #dab957; background: linear-gradient(to right, #1c1c4b, #004e78, #4242b1, #1c1c4b); font-size: 1.1em;}
#app_name span {background-color: rgba(254, 204, 51, 0.5); color: black; font-family: Impact; letter-spacing: 0.15em; padding: 3px 4px; border-radius: 0 0 0.4em 0.4em;}
#sw_lang {color: #0578ff;}
#sw_lang:hover, #sw_lang:active {background: inherit;}
#sw_lang img {margin-left: 2px; vertical-align: center;}
.path {margin-left: 2px; font-size: 16px; letter-spacing: 1px; vertical-align: middle;}
.path a {color: #0578ff; text-decoration: none;}
.path span {padding: 0 6px; color: goldenrod;}
.section2 ul {list-style-type: none;}
.section2 ul li {padding: 12px 0; line-height: 26px;}
.btn-main, .btn-ghost {display: inline-block; margin: 0 4px; padding: 12px 22px; border-radius: 6px 6px 0 0; box-shadow: 0 0 6px rgba(0,0,0,0.35); transition: 0.25s ease;}
.btn-main {background: linear-gradient(to right, rgba(244, 197, 97, 0.8), rgba(215, 15, 207, 1)); color: black; font-weight: bold;}
.btn-main:hover {border-radius: 6px 6px 0 0; background: linear-gradient(to left, rgba(244, 197, 97, 1), rgba(215, 15, 207, 1)); box-shadow: 0 0 8px rgba(244,197,97,0.45);}
.btn-ghost {background: #2a3a7a; color: #fff;}
.btn-ghost:hover {border-radius: 6px 6px 0 0; background: #2b45aa; box-shadow: 0 0 10px rgba(0,0,0,0.45);}
.feature-block ul li {color: #333;}
.feature-block ul li span, .section2 ul li span {display: block; font-weight: bold;}
.img_set {border-radius: 0 4px 4px 0;}
.lg_dsk, .bt_dsk {display: inline;}
.lg_mob, .bt_mob {display: none;}
.main_link {background: #f4e0e9;}
.main_link:hover a {font-weight: bold;}

@media (max-width: 599px) {
  h1 {font-size: 2.2em;}
  h2 {font-size: 1.5em;}
  h3 {font-size: 1.3em;}
  h4 { font-size: 1.16em;}
  strong {font-size: 1em;}
  center {margin-top: 32px;}
  .img_set {width: 300px; height: auto; border-radius: 4px;}
  .lg_dsk, .bt_dsk {display: none;}
  .lg_mob, .bt_mob {display: inline;}
  .btn-box, .img_cont {text-align: center;}
  .nowr {white-space: nowrap;}
}