@import"https://fonts.googleapis.com/css?family=Noto+Sans+TC:100,300,400,500,700";
@import"https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700";
@import"https://fonts.googleapis.com/css?family=Noto+Serif+TC:300,400,500,600,700";

/*! normalize.css v3.0.0 | HTML5 Display Definitions | MIT License | git.io/normalize */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block
}

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline
}

audio:not([controls]) {
  display: none;
  height: 0
}

[hidden],
template {
  display: none
}

/*! normalize.css v3.0.0 | Base | MIT License | git.io/normalize */
html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%
}

body {
  margin: 0
}

/*! normalize.css v3.0.0 | Links | MIT License | git.io/normalize */
a {
  background: rgba(0, 0, 0, 0)
}

a:active,
a:hover {
  outline: 0
}

/*! normalize.css v3.0.0 | Embedded Content | MIT License | git.io/normalize */
img {
  border: 0
}

svg:not(:root) {
  overflow: hidden
}

/*! normalize.css v3.0.0 | Figures | MIT License | git.io/normalize */
figure {
  margin: 1em 40px
}

hr {
  box-sizing: content-box;
  height: 0
}

pre {
  overflow: auto
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em
}

/*! normalize.css v3.0.0 | Forms | MIT License | git.io/normalize */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0
}

button {
  overflow: visible
}

button,
select {
  text-transform: none
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer
}

button[disabled],
html input[disabled] {
  cursor: default
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0
}

input {
  line-height: normal
}

input[type=checkbox],
input[type=radio] {
  box-sizing: border-box;
  padding: 0
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  height: auto
}

input[type=search] {
  -webkit-appearance: textfield;
  box-sizing: content-box
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none
}

fieldset {
  border: 1px solid silver;
  margin: 0 2px;
  padding: .35em .625em .75em
}

legend {
  border: 0;
  padding: 0
}

textarea {
  overflow: auto
}

optgroup {
  font-weight: bold
}

/*! normalize.css v3.0.0 | Tables | MIT License | git.io/normalize */
table {
  border-collapse: collapse;
  border-spacing: 0
}

td,
th {
  padding: 0
}

input,
select {
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none
}

input::-ms-expand,
select::-ms-expand {
  display: none
}

input:focus,
select:focus {
  outline: 0
}

input[type*=number]::-webkit-inner-spin-button,
input[type*=number]::-webkit-outer-spin-button {
  opacity: 0
}

.form {
  font-size: 0
}

.form__group {
  position: relative;
  max-width: 290px;
  font-weight: normal
}

.form__group>* {
  display: block
}

.form__group .label {
  position: relative;
  display: block
}

.form__group .form__group__placeholder {
  position: absolute;
  top: 1rem;
  left: 1rem;
  color: #7a838b;
  font-size: 14px;
  transition: all .3s
}

.form__group .form__group__input {
  min-width: 144px;
  width: 100%;
  color: #171717;
  font-size: 1rem;
  border-style: solid;
  border-color: #939ea7
}

.form__group .form__group__input:focus {
  border-color: #003a9f
}

.form__group.w-100 {
  max-width: none;
  width: 100%
}

.form__group--filled .form__group__input {
  padding: 1.5rem 1rem .4rem;
  background-color: #eee;
  border-width: 0px 0px 1px
}

.form__group--filled .form__group--defalt:hover .form__group__placeholder,
.form__group--filled .form__group--defalt.hasValue .form__group__placeholder {
  top: .2em
}

.form__group--filled .form__group--correct:hover .form__group__placeholder,
.form__group--filled .form__group--correct.hasValue .form__group__placeholder {
  color: #003a9f
}

.form__group--filled .form__group--correct:hover .form__group__input,
.form__group--filled .form__group--correct.hasValue .form__group__input {
  border-color: #003a9f
}

.form__group--filled .form__group--error:hover .form__group__placeholder,
.form__group--filled .form__group--error.hasValue .form__group__placeholder {
  color: #d60c18
}

.form__group--filled .form__group--error:hover .form__group__input,
.form__group--filled .form__group--error.hasValue .form__group__input {
  border-color: #d60c18
}

.form__group--filled .form__group--hasicon .form__group__input {
  padding: 1.5rem 3rem .4rem 1rem
}

.form__group--filled .form__group--hasicon i.icon {
  top: 1.5rem
}

.form__group--filled .form__group--disabled.hasValue .form__group__placeholder {
  top: .2em
}

.form__group--outlined .form__group__input {
  padding: 1rem 1rem .8rem;
  background-color: rgba(0, 0, 0, 0);
  border-width: 1px
}

.form__group--outlined .form__group--defalt:hover .form__group__placeholder,
.form__group--outlined .form__group--defalt.hasValue .form__group__placeholder {
  top: -0.8em;
  padding: 0 2px;
  font-size: 12px;
  background-color: #fff
}

.form__group--outlined .form__group--correct:hover .form__group__placeholder,
.form__group--outlined .form__group--correct.hasValue .form__group__placeholder {
  color: #003a9f
}

.form__group--outlined .form__group--correct:hover .form__group__input,
.form__group--outlined .form__group--correct.hasValue .form__group__input {
  border-color: #003a9f
}

.form__group--outlined .form__group--hasicon .form__group__input {
  padding: 1.1rem 3rem .7rem 1rem
}

.form__group--outlined .form__group--disabled.hasValue .form__group__placeholder {
  top: -0.8em;
  padding: 0 2px;
  background-color: #fff
}

.form__group--outlined .form__group--disabled.hasValue .form__group__input {
  background-color: #fff;
  border-color: #939ea7
}

.form__group--defalt:hover .form__group__placeholder {
  color: #003a9f
}

.form__group--hasicon i.icon {
  position: absolute;
  top: 1.25rem;
  right: 1rem;
  font-size: 1rem;
  transition: all .3s
}

.form__group--correct .form__group__placeholder,
.form__group--correct .icon,
.form__group--correct .form__group__help--highlight {
  color: #003a9f !important
}

.form__group--correct .form__group__placeholder,
.form__group--correct .icon {
  color: #003a9f
}

.form__group--correct .form__group__input {
  border-color: #003a9f
}

.form__group--error .form__group__placeholder,
.form__group--error .icon,
.form__group--error .form__group__help--highlight {
  color: #d60c18 !important
}

.form__group--error .form__group__input {
  border-color: #d60c18 !important
}

.form__group--error .select__group::before {
  color: #d60c18
}

.form__group--undone .form__group__placeholder {
  color: #d60c18
}

.form__group--undone .form__group__input {
  border-color: #d60c18
}

.form__group--undone:hover .form__group__placeholder,
.form__group--undone .hasValue .form__group__placeholder {
  color: #003a9f
}

.form__group--undone:hover .form__group__input,
.form__group--undone .hasValue .form__group__input {
  border-color: #003a9f
}

.form__group--disabled>* {
  cursor: not-allowed
}

.form__group--disabled .form__group__placeholder {
  color: #d3d5d7
}

.form__group--disabled .form__group__input {
  color: #7a838b;
  background-color: #eee;
  border-color: #eee;
  cursor: not-allowed
}

.form__group--disabled.hasValue .form__group__placeholder {
  color: #7a838b;
  font-size: .75rem
}

.form__group--disabled.hasValue .form__group__input {
  color: #939ea7;
  border-color: #939ea7
}

.form__group__help {
  display: block;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-top: 5px;
  color: #7a838b;
  font-size: .75rem;
  font-style: normal;
  line-height: 1
}

.form__group__help--strong {
  padding-left: 0;
  padding-right: 0;
  margin-top: 10px;
  margin-bottom: 20px;
  color: #48545d;
  font-size: .875rem
}

.form__group__help+.form__group__help {
  margin-top: -10px
}

#more {
  width: 100%;
  padding-top: 8px;
  padding-bottom: 2px;
  text-align: center;
  border: 1px solid #d3d5d7;
  background-color: rgba(238, 238, 238, .5);
  transition: background .3s;
  cursor: pointer
}

#more::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../img/download_arrow.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center
}

#more:hover {
  background-color: rgba(211, 213, 215, .5)
}

button,
a {
  background-color: rgba(0, 0, 0, 0);
  -ms-flex-item-align: baseline;
  align-self: baseline;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none
}

button:focus,
a:focus {
  outline: 0
}

button.btn,
a.btn {
  position: relative;
  display: inline-block;
  min-width: 120px;
  padding: .6875em 1em;
  font-size: 1rem;
  line-height: 1.25;
  text-align: center;
  word-break: keep-all;
  text-decoration: none;
  overflow: hidden
}

@media screen and (min-width: 375px) {

  button.btn,
  a.btn {
    min-width: 135px
  }
}

@media screen and (min-width: 768px) {

  button.btn,
  a.btn {
    min-width: 144px;
    padding: .8125em 1em
  }
}

button.btn.btn--small,
a.btn.btn--small {
  min-width: 72px;
  padding: .7em 1em;
  font-size: .875rem;
  line-height: 1
}

button.btn+button.btn,
button.btn+a.btn,
a.btn+button.btn,
a.btn+a.btn {
  margin-left: .5rem
}

@media screen and (min-width: 768px) {

  button.btn+button.btn,
  button.btn+a.btn,
  a.btn+button.btn,
  a.btn+a.btn {
    margin-left: 1rem
  }
}

button.btn::before,
button.btn::after,
a.btn::before,
a.btn::after {
  content: "";
  display: block;
  position: absolute;
  opacity: 0;
  z-index: -1
}

button.btn::before,
a.btn::before {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transition: opacity .2s
}

button.btn::after,
a.btn::after {
  left: 50%;
  top: 50%;
  padding: 55%;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity 2s, transform .5s
}

button.btn:hover::before,
a.btn:hover::before {
  opacity: .04
}

button.btn:hover:focus::before,
a.btn:hover:focus::before {
  opacity: .16
}

button.btn:focus::before,
a.btn:focus::before {
  opacity: .12
}

button.btn:active::after,
a.btn:active::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0s
}

button.btn--text,
a.btn--text {
  display: inline;
  min-width: auto !important;
  padding: 0 !important;
  color: #003a9f;
  text-decoration: underline;
  border: 0;
  cursor: pointer
}

button.btn--text:hover,
a.btn--text:hover {
  color: #d60c18
}

button.btn--text.btn--black,
a.btn--text.btn--black {
  color: #171717;
  text-decoration: none
}

button.btn--text.btn--black:hover,
a.btn--text.btn--black:hover {
  text-decoration: underline
}

button.btn--text.disabled,
a.btn--text.disabled {
  color: #d3d5d7;
  cursor: not-allowed
}

button.btn--outlined,
a.btn--outlined {
  color: #003a9f;
  background-color: #fff;
  border: 1px solid #003a9f;
  z-index: 1
}

button.btn--outlined::-moz-focus-inner,
a.btn--outlined::-moz-focus-inner {
  border: none
}

button.btn--outlined:hover,
a.btn--outlined:hover {
  color: #9d0505;
  border-color: #9d0505
}

button.btn--outlined::before,
a.btn--outlined::before {
  background-color: #feebec
}

button.btn--outlined::after,
a.btn--outlined::after {
  background-color: #feebec
}

button.btn--contained,
a.btn--contained {
  color: #fff;
  background-color: #003a9f;
  border: 1px solid #003a9f;
  z-index: 1
}

button.btn--contained::-moz-focus-inner,
a.btn--contained::-moz-focus-inner {
  border: none
}

button.btn--contained:hover,
a.btn--contained:hover {
  background-color: #9d0505;
  border-color: #9d0505
}

button.btn--contained::before,
a.btn--contained::before {
  background-color: #d60c18
}

button.btn--contained::after,
a.btn--contained::after {
  background-color: #d60c18
}

button.btn--100,
a.btn--100 {
  width: 100%
}

button.btn[disabled],
a.btn[disabled] {
  color: #d3d5d7;
  background: #eee;
  border: 1px solid #eee;
  cursor: not-allowed
}

button.btn[disabled]::before,
a.btn[disabled]::before {
  opacity: 0
}

button.btn[disabled]::after,
a.btn[disabled]::after {
  opacity: 0
}

button.btn[disabled]:hover,
a.btn[disabled]:hover {
  color: #d3d5d7;
  background: #eee;
  border: 1px solid #eee
}

button.btn[disabled].btn--animate,
a.btn[disabled].btn--animate {
  color: #48545d
}

body.message__open {
  overflow: hidden
}

.message p {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 1rem;
  line-height: 1.5
}

.message p+p {
  margin-top: 1em
}

.message__btn {
  font-size: 0
}

.message--center {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.message--notification {
  display: table;
  max-width: calc(100% - 30px);
  padding: 25px 35px;
  color: #fff;
  font-size: 1.125rem;
  line-height: 1.25;
  word-break: keep-all;
  white-space: nowrap;
  background-color: #48545d;
  z-index: 10
}

.message--notification .message__container {
  position: relative;
  margin: auto;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-align: center;
  align-items: center
}

.message--notification .message__txt {
  padding-bottom: 0
}

.message--notification p {
  color: #fff
}

.message--alert {
  position: fixed;
  top: 50%;
  left: 50%;
  max-width: 560px;
  width: calc(100% - 30px);
  padding: 30px 24px 24px;
  background-color: #fff;
  z-index: 14;
  transform: translate(-50%, -50%)
}

.message--alert .message__txt {
  padding-bottom: 30px
}

.message--alert .message__btn {
  text-align: right
}

.message--dialogs {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  max-width: 560px;
  width: calc(100% - 30px);
  padding: 30px 24px 24px;
  background-color: #fff;
  z-index: 14;
  transform: translate(-50%, -50%)
}

.message--dialogs .message__close,
.message--dialogs .touch__close {
  top: -5px;
  right: -10px
}

.message--dialogs .message__container {
  position: relative
}

.message--dialogs .message__txt {
  padding-bottom: 30px
}

.message--dialogs .message__txt h2 {
  padding-right: 50px;
  margin-top: 0;
  margin-bottom: 24px
}

.message--dialogs .message__txt .title {
  padding-right: 50px;
  margin-top: 0;
  margin-bottom: 24px;
  font-size: 1.25rem;
  font-weight: 600
}

@media screen and (min-width: 1024px) {
  .message--dialogs .message__txt .title {
    font-size: 1.375rem;
    font-weight: 500
  }
}

.message--dialogs .message__txt__btn {
  text-align: right
}

.message .message__close,
.message .touch__close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 1rem;
  padding: 10px;
  cursor: pointer
}

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

  .message .message__close,
  .message .touch__close {
    font-weight: bold
  }
}

@media screen and (min-width: 1024px) {

  .message .message__close,
  .message .touch__close {
    top: 10px;
    right: 10px;
    font-size: 1.5rem
  }
}

.message .black {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #171717;
  opacity: .5;
  z-index: 0
}

.message .black.dialogs {
  cursor: pointer
}

html {
  min-height: 100%;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, San Francisco, Roboto, Segoe UI, Helvetica Neue, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth
}

body {
  position: relative;
  min-height: 100%;
  padding-bottom: 0 !important
}

@media screen and (min-width: 1024px) {
  body {
    font-family: "Roboto", "Noto Sans TC", "思源黑體 TC", "思源黑體 TW", "思源黑體", "微軟正黑體", "繁黑體", "Microsoft JhengHei", "Lato", "Arial", "Segoe UI Emoji", "Segoe UI Symbol", "新細明體", sans-serif;
    font-display: swap;
    font-weight: 300
  }
}

.serif {
  font-family: "Noto Serif TC", serif
}

.sans-serif {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
}

@media screen and (min-width: 1024px) {
  .sans-serif {
    font-family: "Roboto", "Noto Sans TC", "思源黑體 TC", "思源黑體 TW", "思源黑體", "微軟正黑體", "繁黑體", "Microsoft JhengHei", "Lato", "Arial", "Segoe UI Emoji", "Segoe UI Symbol", "新細明體", sans-serif
  }
}

@media screen and (max-width: 1023px) {
  .desktop {
    display: none !important
  }
}

@media screen and (min-width: 1024px) {
  .mobile {
    display: none !important
  }
}

* {
  box-sizing: border-box
}

*::before,
*::after {
  box-sizing: border-box
}

a {
  text-decoration: none;
  transition: color .3s, background .3s, border .3s
}

img {
  display: block
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit
}

.sr-only {
  position: absolute !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 0 !important;
  height: 0 !important;
  font-size: 0 !important
}

#fb-root {
  font-size: 0
}

.text-center {
  text-align: center
}

.font-weight-500 {
  font-weight: 500
}

.main,
.container {
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  margin-left: auto;
  margin-right: auto
}

@media screen and (min-width: 1024px) {

  .main,
  .container {
    width: 1010px
  }
}

.main {
  position: relative;
  padding-bottom: 40px;
  z-index: 0
}

@media screen and (min-width: 768px) {
  .main>* {
    display: block !important
  }
}

.main>*>h2 {
  padding-bottom: 10px;
  margin: 0 !important;
  color: #373737;
  font-size: 1.125em;
  font-weight: 400
}

@media screen and (max-width: 767px) {
  .main>*>h2 {
    display: none
  }
}

.main::after {
  content: "";
  display: block;
  clear: both
}

@media screen and (min-width: 768px) {
  .main article {
    float: left;
    width: 650px
  }
}

@media screen and (min-width: 768px) {
  .main aside {
    float: left;
    width: 300px;
    margin-left: 20px
  }
}

@media screen and (max-width: 767px) {
  .main aside {
    margin-top: 80px
  }
}

.main aside>*,
.main aside .leaflet,
.main aside .leafletBig {
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto
}

@media screen and (min-width: 768px) {

  .main aside>*,
  .main aside .leaflet,
  .main aside .leafletBig {
    margin-bottom: 20px
  }
}

.m0 {
  margin: 0px !important
}

.ml0,
.mx0 {
  margin-left: 0px !important
}

.mr0,
.mx0 {
  margin-right: 0px !important
}

.mt0,
.my0 {
  margin-top: 0px !important
}

.mb0,
.my0 {
  margin-bottom: 0px !important
}

.m5 {
  margin: 5px !important
}

.ml5,
.mx5 {
  margin-left: 5px !important
}

.mr5,
.mx5 {
  margin-right: 5px !important
}

.mt5,
.my5 {
  margin-top: 5px !important
}

.mb5,
.my5 {
  margin-bottom: 5px !important
}

.m10 {
  margin: 10px !important
}

.ml10,
.mx10 {
  margin-left: 10px !important
}

.mr10,
.mx10 {
  margin-right: 10px !important
}

.mt10,
.my10 {
  margin-top: 10px !important
}

.mb10,
.my10 {
  margin-bottom: 10px !important
}

.m20 {
  margin: 20px !important
}

.ml20,
.mx20 {
  margin-left: 20px !important
}

.mr20,
.mx20 {
  margin-right: 20px !important
}

.mt20,
.my20 {
  margin-top: 20px !important
}

.mb20,
.my20 {
  margin-bottom: 20px !important
}

.m30 {
  margin: 30px !important
}

.ml30,
.mx30 {
  margin-left: 30px !important
}

.mr30,
.mx30 {
  margin-right: 30px !important
}

.mt30,
.my30 {
  margin-top: 30px !important
}

.mb30,
.my30 {
  margin-bottom: 30px !important
}

.m40 {
  margin: 40px !important
}

.ml40,
.mx40 {
  margin-left: 40px !important
}

.mr40,
.mx40 {
  margin-right: 40px !important
}

.mt40,
.my40 {
  margin-top: 40px !important
}

.mb40,
.my40 {
  margin-bottom: 40px !important
}

.m50 {
  margin: 50px !important
}

.ml50,
.mx50 {
  margin-left: 50px !important
}

.mr50,
.mx50 {
  margin-right: 50px !important
}

.mt50,
.my50 {
  margin-top: 50px !important
}

.mb50,
.my50 {
  margin-bottom: 50px !important
}

.m60 {
  margin: 60px !important
}

.ml60,
.mx60 {
  margin-left: 60px !important
}

.mr60,
.mx60 {
  margin-right: 60px !important
}

.mt60,
.my60 {
  margin-top: 60px !important
}

.mb60,
.my60 {
  margin-bottom: 60px !important
}

.p0 {
  padding: 0px !important
}

.pl0,
.px0 {
  padding-left: 0px !important
}

.pr0,
.px0 {
  padding-right: 0px !important
}

.pt0,
.py0 {
  padding-top: 0px !important
}

.pb0,
.py0 {
  padding-bottom: 0px !important
}

.p5 {
  padding: 5px !important
}

.pl5,
.px5 {
  padding-left: 5px !important
}

.pr5,
.px5 {
  padding-right: 5px !important
}

.pt5,
.py5 {
  padding-top: 5px !important
}

.pb5,
.py5 {
  padding-bottom: 5px !important
}

.p10 {
  padding: 10px !important
}

.pl10,
.px10 {
  padding-left: 10px !important
}

.pr10,
.px10 {
  padding-right: 10px !important
}

.pt10,
.py10 {
  padding-top: 10px !important
}

.pb10,
.py10 {
  padding-bottom: 10px !important
}

.p20 {
  padding: 20px !important
}

.pl20,
.px20 {
  padding-left: 20px !important
}

.pr20,
.px20 {
  padding-right: 20px !important
}

.pt20,
.py20 {
  padding-top: 20px !important
}

.pb20,
.py20 {
  padding-bottom: 20px !important
}

.p30 {
  padding: 30px !important
}

.pl30,
.px30 {
  padding-left: 30px !important
}

.pr30,
.px30 {
  padding-right: 30px !important
}

.pt30,
.py30 {
  padding-top: 30px !important
}

.pb30,
.py30 {
  padding-bottom: 30px !important
}

.p40 {
  padding: 40px !important
}

.pl40,
.px40 {
  padding-left: 40px !important
}

.pr40,
.px40 {
  padding-right: 40px !important
}

.pt40,
.py40 {
  padding-top: 40px !important
}

.pb40,
.py40 {
  padding-bottom: 40px !important
}

.p50 {
  padding: 50px !important
}

.pl50,
.px50 {
  padding-left: 50px !important
}

.pr50,
.px50 {
  padding-right: 50px !important
}

.pt50,
.py50 {
  padding-top: 50px !important
}

.pb50,
.py50 {
  padding-bottom: 50px !important
}

.p60 {
  padding: 60px !important
}

.pl60,
.px60 {
  padding-left: 60px !important
}

.pr60,
.px60 {
  padding-right: 60px !important
}

.pt60,
.py60 {
  padding-top: 60px !important
}

.pb60,
.py60 {
  padding-bottom: 60px !important
}

@media screen and (min-width: 1024px) {
  .m-d-0 {
    margin: 0px !important
  }

  .ml-d-0,
  .mx-d-0 {
    margin-left: 0px !important
  }

  .mr-d-0,
  .mx-d-0 {
    margin-right: 0px !important
  }

  .mt-d-0,
  .my-d-0 {
    margin-top: 0px !important
  }

  .mb-d-0,
  .my-d-0 {
    margin-bottom: 0px !important
  }

  .p-d-0 {
    padding: 0px !important
  }

  .pl-d-0,
  .px-d-0 {
    padding-left: 0px !important
  }

  .pr-d-0,
  .px-d-0 {
    padding-right: 0px !important
  }

  .pt-d-0,
  .py-d-0 {
    padding-top: 0px !important
  }

  .pb-d-0,
  .py-d-0 {
    padding-bottom: 0px !important
  }

  .m-d-5 {
    margin: 5px !important
  }

  .ml-d-5,
  .mx-d-5 {
    margin-left: 5px !important
  }

  .mr-d-5,
  .mx-d-5 {
    margin-right: 5px !important
  }

  .mt-d-5,
  .my-d-5 {
    margin-top: 5px !important
  }

  .mb-d-5,
  .my-d-5 {
    margin-bottom: 5px !important
  }

  .p-d-5 {
    padding: 5px !important
  }

  .pl-d-5,
  .px-d-5 {
    padding-left: 5px !important
  }

  .pr-d-5,
  .px-d-5 {
    padding-right: 5px !important
  }

  .pt-d-5,
  .py-d-5 {
    padding-top: 5px !important
  }

  .pb-d-5,
  .py-d-5 {
    padding-bottom: 5px !important
  }

  .m-d-10 {
    margin: 10px !important
  }

  .ml-d-10,
  .mx-d-10 {
    margin-left: 10px !important
  }

  .mr-d-10,
  .mx-d-10 {
    margin-right: 10px !important
  }

  .mt-d-10,
  .my-d-10 {
    margin-top: 10px !important
  }

  .mb-d-10,
  .my-d-10 {
    margin-bottom: 10px !important
  }

  .p-d-10 {
    padding: 10px !important
  }

  .pl-d-10,
  .px-d-10 {
    padding-left: 10px !important
  }

  .pr-d-10,
  .px-d-10 {
    padding-right: 10px !important
  }

  .pt-d-10,
  .py-d-10 {
    padding-top: 10px !important
  }

  .pb-d-10,
  .py-d-10 {
    padding-bottom: 10px !important
  }

  .m-d-20 {
    margin: 20px !important
  }

  .ml-d-20,
  .mx-d-20 {
    margin-left: 20px !important
  }

  .mr-d-20,
  .mx-d-20 {
    margin-right: 20px !important
  }

  .mt-d-20,
  .my-d-20 {
    margin-top: 20px !important
  }

  .mb-d-20,
  .my-d-20 {
    margin-bottom: 20px !important
  }

  .p-d-20 {
    padding: 20px !important
  }

  .pl-d-20,
  .px-d-20 {
    padding-left: 20px !important
  }

  .pr-d-20,
  .px-d-20 {
    padding-right: 20px !important
  }

  .pt-d-20,
  .py-d-20 {
    padding-top: 20px !important
  }

  .pb-d-20,
  .py-d-20 {
    padding-bottom: 20px !important
  }

  .m-d-30 {
    margin: 30px !important
  }

  .ml-d-30,
  .mx-d-30 {
    margin-left: 30px !important
  }

  .mr-d-30,
  .mx-d-30 {
    margin-right: 30px !important
  }

  .mt-d-30,
  .my-d-30 {
    margin-top: 30px !important
  }

  .mb-d-30,
  .my-d-30 {
    margin-bottom: 30px !important
  }

  .p-d-30 {
    padding: 30px !important
  }

  .pl-d-30,
  .px-d-30 {
    padding-left: 30px !important
  }

  .pr-d-30,
  .px-d-30 {
    padding-right: 30px !important
  }

  .pt-d-30,
  .py-d-30 {
    padding-top: 30px !important
  }

  .pb-d-30,
  .py-d-30 {
    padding-bottom: 30px !important
  }

  .m-d-40 {
    margin: 40px !important
  }

  .ml-d-40,
  .mx-d-40 {
    margin-left: 40px !important
  }

  .mr-d-40,
  .mx-d-40 {
    margin-right: 40px !important
  }

  .mt-d-40,
  .my-d-40 {
    margin-top: 40px !important
  }

  .mb-d-40,
  .my-d-40 {
    margin-bottom: 40px !important
  }

  .p-d-40 {
    padding: 40px !important
  }

  .pl-d-40,
  .px-d-40 {
    padding-left: 40px !important
  }

  .pr-d-40,
  .px-d-40 {
    padding-right: 40px !important
  }

  .pt-d-40,
  .py-d-40 {
    padding-top: 40px !important
  }

  .pb-d-40,
  .py-d-40 {
    padding-bottom: 40px !important
  }

  .m-d-50 {
    margin: 50px !important
  }

  .ml-d-50,
  .mx-d-50 {
    margin-left: 50px !important
  }

  .mr-d-50,
  .mx-d-50 {
    margin-right: 50px !important
  }

  .mt-d-50,
  .my-d-50 {
    margin-top: 50px !important
  }

  .mb-d-50,
  .my-d-50 {
    margin-bottom: 50px !important
  }

  .p-d-50 {
    padding: 50px !important
  }

  .pl-d-50,
  .px-d-50 {
    padding-left: 50px !important
  }

  .pr-d-50,
  .px-d-50 {
    padding-right: 50px !important
  }

  .pt-d-50,
  .py-d-50 {
    padding-top: 50px !important
  }

  .pb-d-50,
  .py-d-50 {
    padding-bottom: 50px !important
  }

  .m-d-60 {
    margin: 60px !important
  }

  .ml-d-60,
  .mx-d-60 {
    margin-left: 60px !important
  }

  .mr-d-60,
  .mx-d-60 {
    margin-right: 60px !important
  }

  .mt-d-60,
  .my-d-60 {
    margin-top: 60px !important
  }

  .mb-d-60,
  .my-d-60 {
    margin-bottom: 60px !important
  }

  .p-d-60 {
    padding: 60px !important
  }

  .pl-d-60,
  .px-d-60 {
    padding-left: 60px !important
  }

  .pr-d-60,
  .px-d-60 {
    padding-right: 60px !important
  }

  .pt-d-60,
  .py-d-60 {
    padding-top: 60px !important
  }

  .pb-d-60,
  .py-d-60 {
    padding-bottom: 60px !important
  }
}

@media screen and (max-width: 1023px) {
  .m-m-0 {
    margin: 0px !important
  }

  .ml-m-0,
  .mx-m-0 {
    margin-left: 0px !important
  }

  .mr-m-0,
  .mx-m-0 {
    margin-right: 0px !important
  }

  .mt-m-0,
  .my-m-0 {
    margin-top: 0px !important
  }

  .mb-m-0,
  .my-m-0 {
    margin-bottom: 0px !important
  }

  .p-m-0 {
    padding: 0px !important
  }

  .pl-m-0,
  .px-m-0 {
    padding-left: 0px !important
  }

  .pr-m-0,
  .px-m-0 {
    padding-right: 0px !important
  }

  .pt-m-0,
  .py-m-0 {
    padding-top: 0px !important
  }

  .pb-m-0,
  .py-m-0 {
    padding-bottom: 0px !important
  }

  .m-m-5 {
    margin: 5px !important
  }

  .ml-m-5,
  .mx-m-5 {
    margin-left: 5px !important
  }

  .mr-m-5,
  .mx-m-5 {
    margin-right: 5px !important
  }

  .mt-m-5,
  .my-m-5 {
    margin-top: 5px !important
  }

  .mb-m-5,
  .my-m-5 {
    margin-bottom: 5px !important
  }

  .p-m-5 {
    padding: 5px !important
  }

  .pl-m-5,
  .px-m-5 {
    padding-left: 5px !important
  }

  .pr-m-5,
  .px-m-5 {
    padding-right: 5px !important
  }

  .pt-m-5,
  .py-m-5 {
    padding-top: 5px !important
  }

  .pb-m-5,
  .py-m-5 {
    padding-bottom: 5px !important
  }

  .m-m-10 {
    margin: 10px !important
  }

  .ml-m-10,
  .mx-m-10 {
    margin-left: 10px !important
  }

  .mr-m-10,
  .mx-m-10 {
    margin-right: 10px !important
  }

  .mt-m-10,
  .my-m-10 {
    margin-top: 10px !important
  }

  .mb-m-10,
  .my-m-10 {
    margin-bottom: 10px !important
  }

  .p-m-10 {
    padding: 10px !important
  }

  .pl-m-10,
  .px-m-10 {
    padding-left: 10px !important
  }

  .pr-m-10,
  .px-m-10 {
    padding-right: 10px !important
  }

  .pt-m-10,
  .py-m-10 {
    padding-top: 10px !important
  }

  .pb-m-10,
  .py-m-10 {
    padding-bottom: 10px !important
  }

  .m-m-20 {
    margin: 20px !important
  }

  .ml-m-20,
  .mx-m-20 {
    margin-left: 20px !important
  }

  .mr-m-20,
  .mx-m-20 {
    margin-right: 20px !important
  }

  .mt-m-20,
  .my-m-20 {
    margin-top: 20px !important
  }

  .mb-m-20,
  .my-m-20 {
    margin-bottom: 20px !important
  }

  .p-m-20 {
    padding: 20px !important
  }

  .pl-m-20,
  .px-m-20 {
    padding-left: 20px !important
  }

  .pr-m-20,
  .px-m-20 {
    padding-right: 20px !important
  }

  .pt-m-20,
  .py-m-20 {
    padding-top: 20px !important
  }

  .pb-m-20,
  .py-m-20 {
    padding-bottom: 20px !important
  }

  .m-m-30 {
    margin: 30px !important
  }

  .ml-m-30,
  .mx-m-30 {
    margin-left: 30px !important
  }

  .mr-m-30,
  .mx-m-30 {
    margin-right: 30px !important
  }

  .mt-m-30,
  .my-m-30 {
    margin-top: 30px !important
  }

  .mb-m-30,
  .my-m-30 {
    margin-bottom: 30px !important
  }

  .p-m-30 {
    padding: 30px !important
  }

  .pl-m-30,
  .px-m-30 {
    padding-left: 30px !important
  }

  .pr-m-30,
  .px-m-30 {
    padding-right: 30px !important
  }

  .pt-m-30,
  .py-m-30 {
    padding-top: 30px !important
  }

  .pb-m-30,
  .py-m-30 {
    padding-bottom: 30px !important
  }

  .m-m-40 {
    margin: 40px !important
  }

  .ml-m-40,
  .mx-m-40 {
    margin-left: 40px !important
  }

  .mr-m-40,
  .mx-m-40 {
    margin-right: 40px !important
  }

  .mt-m-40,
  .my-m-40 {
    margin-top: 40px !important
  }

  .mb-m-40,
  .my-m-40 {
    margin-bottom: 40px !important
  }

  .p-m-40 {
    padding: 40px !important
  }

  .pl-m-40,
  .px-m-40 {
    padding-left: 40px !important
  }

  .pr-m-40,
  .px-m-40 {
    padding-right: 40px !important
  }

  .pt-m-40,
  .py-m-40 {
    padding-top: 40px !important
  }

  .pb-m-40,
  .py-m-40 {
    padding-bottom: 40px !important
  }

  .m-m-50 {
    margin: 50px !important
  }

  .ml-m-50,
  .mx-m-50 {
    margin-left: 50px !important
  }

  .mr-m-50,
  .mx-m-50 {
    margin-right: 50px !important
  }

  .mt-m-50,
  .my-m-50 {
    margin-top: 50px !important
  }

  .mb-m-50,
  .my-m-50 {
    margin-bottom: 50px !important
  }

  .p-m-50 {
    padding: 50px !important
  }

  .pl-m-50,
  .px-m-50 {
    padding-left: 50px !important
  }

  .pr-m-50,
  .px-m-50 {
    padding-right: 50px !important
  }

  .pt-m-50,
  .py-m-50 {
    padding-top: 50px !important
  }

  .pb-m-50,
  .py-m-50 {
    padding-bottom: 50px !important
  }

  .m-m-60 {
    margin: 60px !important
  }

  .ml-m-60,
  .mx-m-60 {
    margin-left: 60px !important
  }

  .mr-m-60,
  .mx-m-60 {
    margin-right: 60px !important
  }

  .mt-m-60,
  .my-m-60 {
    margin-top: 60px !important
  }

  .mb-m-60,
  .my-m-60 {
    margin-bottom: 60px !important
  }

  .p-m-60 {
    padding: 60px !important
  }

  .pl-m-60,
  .px-m-60 {
    padding-left: 60px !important
  }

  .pr-m-60,
  .px-m-60 {
    padding-right: 60px !important
  }

  .pt-m-60,
  .py-m-60 {
    padding-top: 60px !important
  }

  .pb-m-60,
  .py-m-60 {
    padding-bottom: 60px !important
  }
}

h1,
.h1 {
  font-size: 2rem;
  line-height: 1.5;
  font-weight: 500
}

h2,
.h2 {
  font-size: 1.375rem;
  line-height: 1.5;
  font-weight: 500
}

h3,
.h3 {
  font-size: 1.125rem;
  line-height: 2;
  font-weight: 500
}

h4,
.h4 {
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 500
}

h5,
.h5 {
  font-size: .875rem;
  line-height: 1;
  font-weight: 500
}

strong,
b {
  font-weight: 600
}

@media screen and (min-width: 1024px) {

  strong,
  b {
    font-weight: 500
  }
}

@font-face {
  font-family: "cw_icon_new";
  src: url("../fonts/cw/cw_icon_new.eot?d0n253");
  src: url("../fonts/cw/cw_icon_new.eot?d0n253#iefix") format("embedded-opentype"), url("../fonts/cw/cw_icon_new.ttf?d0n253") format("truetype"), url("../fonts/cw/cw_icon_new.woff?d0n253") format("woff"), url("../fonts/cw/cw_icon_new.svg?d0n253#cw_icon_new") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block
}

[class^=icon-],
[class*=" icon-"] {
  font-family: "cw_icon_new" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

.icon-apple:before {
  content: "\e903"
}

.icon-arrow-left:before {
  content: "\e934"
}

.icon-arrow-right:before {
  content: "\e933"
}

.icon-benefits:before {
  content: "\e940"
}

.icon-bookmark-filled:before {
  content: "\e932"
}

.icon-bookmark-outlined:before {
  content: "\e923"
}

.icon-cancel:before {
  content: "\e92e"
}

.icon-caret-down:before {
  content: "\e911"
}

.icon-caret-left:before {
  content: "\e928"
}

.icon-caret-right:before {
  content: "\e927"
}

.icon-caret-up:before {
  content: "\e912"
}

.icon-check:before {
  content: "\e929"
}

.icon-check-circle:before {
  content: "\e90d"
}

.icon-check-solid:before {
  content: "\e92a"
}

.icon-coin:before {
  content: "\e92f"
}

.icon-coupon:before {
  content: "\e941"
}

.icon-dot-single:before {
  content: "\e902"
}

.icon-down:before {
  content: "\e920"
}

.icon-download:before {
  content: "\e937"
}

.icon-download-pdf:before {
  content: "\e949"
}

.icon-error-solid:before {
  content: "\e935"
}

.icon-exclamation-circle:before {
  content: "\e90f"
}

.icon-exclamation-solid:before {
  content: "\e93a"
}

.icon-eyeoff:before {
  content: "\e90b"
}

.icon-eyeon:before {
  content: "\e90c"
}

.icon-facebook:before {
  content: "\e91a"
}

.icon-fontsize:before {
  content: "\e930"
}

.icon-gift:before {
  content: "\e942"
}

.icon-headphones:before {
  content: "\e94e"
}

.icon-instagram:before {
  content: "\e91b"
}

.icon-internet:before {
  content: "\e93b"
}

.icon-left:before {
  content: "\e91e"
}

.icon-line:before {
  content: "\e91c"
}

.icon-lock:before {
  content: "\e936"
}

.icon-mail:before {
  content: "\e925"
}

.icon-mail-filled:before {
  content: "\e947"
}

.icon-mailing:before {
  content: "\e900"
}

.icon-member-download:before {
  content: "\e93d"
}

.icon-member-invite:before {
  content: "\e93e"
}

.icon-member-lecture:before {
  content: "\e93f"
}

.icon-member-notification:before {
  content: "\e93c"
}

.icon-member-only:before {
  content: "\e943"
}

.icon-minus:before {
  content: "\e938"
}

.icon-note:before {
  content: "\e94b"
}

.icon-pause-solid:before {
  content: "\e94f"
}

.icon-play:before {
  content: "\e91d"
}

.icon-play-solid:before {
  content: "\e94d"
}

.icon-plus:before {
  content: "\e939"
}

.icon-pushpin:before {
  content: "\e945"
}

.icon-question-circle:before {
  content: "\e90e"
}

.icon-right:before {
  content: "\e91f"
}

.icon-rss:before {
  content: "\e921"
}

.icon-search:before {
  content: "\e917"
}

.icon-security:before {
  content: "\e944"
}

.icon-sort:before {
  content: "\e910"
}

.icon-twitter:before {
  content: "\e901"
}

.icon-up:before {
  content: "\e922"
}

.icon-user-filled:before {
  content: "\e918"
}

.icon-user-outlined:before {
  content: "\e919"
}

.icon-volume:before {
  content: "\e94c"
}

.icon-zoom:before {
  content: "\e94a"
}

header {
  width: 100%;
  padding: 12px 0;
  position: sticky;
  top: 0;
  z-index: 12;
  font-weight: 400;
  background-color: #fff;
  border-bottom: 1px solid #eee
}

header.opened {
  z-index: 10
}

header .container {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center
}

header .container.main-header {
  display: block
}

header .container::after {
  content: "";
  display: table;
  clear: both
}

header .container>.item {
  display: inline-block;
  vertical-align: middle;
  font-size: 0
}

header .container>.item.item--right {
  display: grid;
  grid-template-columns: repeat(4, auto);
  -ms-flex-align: center;
  align-items: center;
  column-gap: .75rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  overflow: hidden
}

@media screen and (max-width: 1023px) {
  header .container>.item.item--right {
    grid-template-columns: repeat(2, auto)
  }
}

header .container>.item.item--right>* {
  margin: 0;
  display: inline-block;
  vertical-align: middle;
  -ms-flex-item-align: center;
  align-self: center;
  cursor: pointer
}

header .container>.item.item--right #openInApp {
  display: none
}

header .container>.item.item--center {
  width: 100%;
  height: 40px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  gap: 1.25rem;
  overflow: hidden
}

@media screen and (max-width: 1023px) {
  header .container>.item.item--center {
    gap: .625rem
  }
}

header .container>.item.item--center .item__scroll {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  gap: .9375rem;
  overflow: hidden;
  transition: transform .3s
}

@media screen and (max-width: 1023px) {
  header .container>.item.item--center .item__scroll {
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-item-align: start;
    align-self: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 0
  }
}

header .container>.item.item--center .title__share {
  overflow: hidden
}

header .container>.item.item--center .title__share .icon {
  color: #000
}

header .container>.item.item--center .title__share .h3 {
  padding: 0 3rem 0 2rem;
  line-height: 40px;
  transform: translateY(100%);
  transition: all .3s;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden
}

header .hamburger {
  -ms-flex-negative: 0;
  flex-shrink: 0
}

header a.logo {
  display: inline-block;
  vertical-align: middle
}

header a.logo img {
  height: 40px
}

header a.logo.logo--main {
  margin-right: 20px
}

header a.logo.logo--sub {
  color: #d60c18;
  font-size: 1rem;
  font-weight: 500
}

header a.language {
  display: none
}

@media screen and (min-width: 768px) {
  header a.language {
    color: #171717;
    font-size: 1rem;
    line-height: 1;
    display: inline-block;
    -ms-flex-item-align: center;
    align-self: center;
    white-space: nowrap
  }
}

@media screen and (min-width: 768px) {
  header a.language:hover {
    color: #d60c18
  }
}

header .search__icon,
header .menubar__user {
  padding: .25rem
}

header .search__icon {
  cursor: pointer
}

header .search__icon .circle,
header .search__icon .handle {
  font-family: "cw_icon_new";
  font-size: 1.3125rem
}

header .search__icon .circle::before {
  content: "\e917";
  display: block
}

header .search__icon .handle {
  display: none;
  font-weight: bold
}

header .search__icon .handle::before {
  content: "\e92e";
  display: block
}

header .search__icon.opened .circle {
  display: none
}

header .search__icon.opened .handle {
  display: block
}

@media screen and (max-width: 1023px) {
  header .search__icon {
    display: none !important
  }
}

header .menubar__user i {
  font-size: 1.3125rem
}

header .menubar__user i.icon-close::before {
  content: "\e92e";
  font-weight: bold
}

header .message {
  position: absolute;
  top: 50px;
  right: 0;
  padding: 20px;
  background-color: #eee;
  border: 1px solid #d3d5d7
}

header .message.message--tos {
  width: 260px;
  cursor: inherit !important
}

header .message.message--tos .h3 {
  line-height: 1.5
}

header .message.message--tos p {
  font-size: .875rem
}

@media screen and (min-width: 1024px) {
  header .message.message--tos p {
    font-weight: 300
  }
}

header .message.message--tos .btn.btn--small {
  z-index: 0
}

.hamburger {
  position: relative;
  width: 20px;
  padding: 0;
  border: 0;
  background-color: rgba(0, 0, 0, 0);
  cursor: pointer
}

.hamburger span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: #171717;
  opacity: 1;
  transform: rotate(0deg);
  transition: background .4s
}

.hamburger span+span {
  margin-top: 4px
}

.hamburger:hover span,
.hamburger.active span {
  background-color: #171717
}

.search.search__block {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  margin: 1px 0 0;
  background-color: #fff;
  border-bottom: 1px solid #eee
}

.search.search__block .search__item--left {
  float: left;
  width: calc(100% - 400px);
  padding-right: 30px
}

.search.search__block .search__item--right {
  float: right;
  width: 400px;
  padding-left: 30px;
  border-left: 1px solid #eee
}

footer {
  position: relative;
  width: 100%;
  background-color: #eee
}

footer .container:last-child {
  padding-top: 30px;
  padding-bottom: 30px
}

footer .container::before,
footer .container::after {
  display: none
}

@media screen and (min-width: 1024px) {
  footer .container:first-child {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: justify;
    justify-content: space-between
  }

  footer .container:last-child {
    padding-top: 40px;
    padding-bottom: 40px
  }
}

@media screen and (max-width: 1023px) {
  footer .channel__group {
    border-bottom: 1px solid #d3d5d7
  }
}

footer .channel__group::after {
  content: "";
  display: table;
  clear: both
}

footer .channel__group .channel {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .875em
}

@media screen and (min-width: 1024px) {
  footer .channel__group .channel {
    display: block !important
  }
}

@media screen and (min-width: 1024px) {
  footer .channel__group .channel li {
    margin-bottom: 5px
  }
}

@media screen and (max-width: 1023px) {
  footer .channel__group .channel li {
    padding-top: 5px;
    padding-bottom: 5px
  }
}

footer .channel__group .channel a {
  color: #171717;
  text-decoration: none
}

footer .channel__group .channel a:hover {
  color: #d60c18
}

@media screen and (max-width: 1023px) {
  footer .channel__group .channel {
    display: none;
    padding-bottom: 10px
  }

  footer .channel__group .channel+.channel {
    margin-top: -10px
  }
}

@media screen and (max-width: 1023px) {
  footer .channel__group h4 {
    position: relative;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.5
  }

  footer .channel__group h4::after {
    content: "\e920";
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    font-family: "cw_icon_new";
    transform: translateY(-50%);
    transition: transform .3s
  }

  footer .channel__group h4.active::after {
    transform: translateY(-50%) rotate(180deg)
  }
}

@media screen and (min-width: 1024px) {
  footer .channel__group h4 {
    margin-top: 0;
    margin-bottom: 10px
  }
}

@media screen and (min-width: 1024px) {
  footer .channel__group:first-child h4 {
    width: 100%
  }

  footer .channel__group:first-child ul {
    float: left
  }

  footer .channel__group:first-child ul:last-child {
    padding-left: 60px
  }

  footer .channel__group .channel__group .channel {
    padding-left: 0 !important
  }

  footer .channel__group .channel__group+.channel__group h4 {
    margin-top: 30px
  }
}

footer .sns__group {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1
}

@media screen and (max-width: 1023px) {
  footer .sns__group {
    text-align: center
  }
}

footer .sns__group li {
  display: inline-block;
  margin-right: 20px
}

footer .sns__group li a {
  display: block;
  color: #171717;
  font-size: 1.5em;
  text-decoration: none
}

footer .sns__group li a:hover {
  color: #d60c18
}

footer .sns__group li a i {
  display: block
}

footer .sns__group li.facebook a:hover {
  color: #1877f2
}

footer .sns__group li.line a:hover {
  color: #00c200
}

footer .sns__group li.instagram a:hover {
  color: #dd2a7b
}

footer .sns__group li.rss a:hover {
  color: #ff5700
}

footer .cwgroup__copyright {
  display: -ms-flexbox;
  display: flex
}

@media screen and (min-width: 1024px) {
  footer .cwgroup__copyright {
    -ms-flex-align: end;
    align-items: flex-end;
    -ms-flex-pack: justify;
    justify-content: space-between
  }
}

@media screen and (max-width: 1023px) {
  footer .cwgroup__copyright {
    -ms-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
    text-align: center
  }

  footer .cwgroup__copyright>div {
    width: 100%
  }
}

footer .cwgroup__copyright ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0
}

footer .cwgroup__copyright ul.sns li {
  display: inline-block;
  font-size: 1.5rem;
  vertical-align: middle
}

footer .cwgroup__copyright ul.sns li+li {
  margin-left: 20px
}

footer .cwgroup__copyright ul.sns li a {
  display: block
}

footer .cwgroup__copyright ul.sns li a i.icon {
  display: block
}

footer .cwgroup__copyright ul.sns li a.facebook:hover {
  color: #1877f2
}

footer .cwgroup__copyright ul.sns li a.line:hover {
  color: #00c200
}

footer .cwgroup__copyright ul.sns li a.instagram:hover {
  color: #dd2a7b
}

footer .cwgroup__copyright ul.sns li a.rss:hover {
  color: #ff5700
}

footer .cwgroup__copyright ul.app__img li {
  display: inline-block
}

footer .cwgroup__copyright ul.app__img li+li {
  margin-left: 10px
}

footer .cwgroup__copyright ul.app__img li a {
  display: block
}

footer .cwgroup__copyright ul.app__img li a img {
  width: auto;
  height: 40px
}

footer .cwgroup__copyright .contact>span,
footer .cwgroup__copyright .copyright>span {
  display: block;
  font-size: .75rem
}

@media screen and (min-width: 1024px) {

  footer .cwgroup__copyright .contact>span,
  footer .cwgroup__copyright .copyright>span {
    display: inline-block
  }

  footer .cwgroup__copyright .contact>span:first-child,
  footer .cwgroup__copyright .copyright>span:first-child {
    margin-right: 20px
  }
}

footer .cwgroup__copyright a {
  color: #171717;
  text-decoration: none
}

footer .cwgroup__copyright a:hover {
  color: #d60c18
}

.hello__bar {
  position: relative;
  margin: 20px 20px 0;
  padding: 20px;
  font-size: 0;
  background-color: rgba(0, 58, 159, .1);
  z-index: 0
}

@media screen and (min-width: 768px) {
  .hello__bar {
    width: 1248px;
    padding: 15px 20px;
    margin: 30px auto;
    text-align: center
  }
}

.hello__bar>* {
  display: block;
  vertical-align: middle;
  font-size: 1rem
}

@media screen and (min-width: 768px) {
  .hello__bar>* {
    display: inline-block;
    font-size: 1.125rem
  }
}

@media screen and (max-width: 767px) {
  .hello__bar div {
    margin-bottom: 5px;
    font-size: 1.25rem
  }
}

@media screen and (min-width: 768px) {
  .hello__bar a.btn {
    padding: .657em 1.157em
  }
}

@media screen and (max-width: 767px) {
  .hello__bar a.btn {
    display: table;
    margin-top: 15px
  }
}

.hello__bar a.btn>* {
  display: inline-block;
  vertical-align: middle
}

@media screen and (min-width: 768px) {
  .hello__bar a.btn>* {
    font-size: 1.125rem
  }
}

.hello__bar a.btn i.icon {
  margin-left: 5px
}

.search .search__group {
  position: relative;
  font-size: 0
}

.search .search__group>* {
  display: inline-block;
  vertical-align: bottom
}

.search .search__group .search__input {
  width: calc(100% - 41px);
  padding: 10.5px 1rem;
  color: #171717;
  font-size: 1rem;
  border-style: solid;
  background-color: #eee;
  border-width: 0px
}

.search .search__group .search__input:focus {
  outline: 0
}

.search .search__group .search__submit {
  position: relative;
  width: 41px;
  height: 40px;
  color: #171717;
  font-size: 1.25rem;
  border-width: 0px;
  background-color: #eee
}

.search .search__group .search__submit::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 20px;
  background-color: #d3d5d7;
  transform: translateY(-50%)
}

.search .search__group .search__submit i.icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.search .search__group--white {
  border: 1px solid #eee;
  transition: border .3s
}

.search .search__group--white.focus {
  border-color: #171717
}

.search .search__group--white .search__input,
.search .search__group--white .search__submit {
  background-color: #fff;
  vertical-align: middle;
  line-height: 1.3
}

.search .search__group--white .search__input {
  width: calc(100% - 60px);
  padding: 1rem
}

@media screen and (min-width: 1024px) {
  .search .search__group--white .search__input {
    padding: 20px 1rem
  }
}

.search .search__group--white .search__submit {
  width: 60px;
  height: 50px
}

@media screen and (min-width: 1024px) {
  .search .search__group--white .search__submit {
    width: 60px;
    height: 60px
  }
}

.search-page .banner {
  min-height: 312px
}

.search-page .main>.searchOption {
  float: left;
  width: calc(100% - 820px)
}

@media screen and (max-width: 767px) {
  .search-page .main>.searchOption {
    display: none
  }
}

.search-page .searchOptionGroup h3 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 1.125em;
  font-weight: normal
}

.search-page .searchOptionGroup label {
  display: block;
  padding: 5px 0
}

@media screen and (min-width: 768px) {
  .search-page article {
    width: 820px
  }
}

.search-page .searchInput {
  display: none
}

@media screen and (max-width: 767px) {
  .search-page .searchDoneTxt {
    padding-top: 1em
  }
}

.search-page .searchDoneTxt>* {
  display: inline-block
}

.search-page .searchDoneTxt .searchKeyword {
  display: block
}

@media screen and (min-width: 768px) {
  .search-page .searchDoneTxt .searchKeyword {
    display: none
  }
}

.search-page .searchDoneTxt h1 {
  margin-top: 0;
  margin-bottom: 0;
  padding-right: 5px;
  font-size: 1.75em
}

.search-page .articleGroup .subArticle .caption h3 a span,
.search-page .articleGroup .subArticle .caption p span {
  color: #d60c18;
  font-weight: 500
}

@media screen and (max-width: 767px) {
  .search-page .articleGroup .subArticle .pic {
    display: none
  }

  .search-page .articleGroup .subArticle .caption {
    border-width: 1px
  }

  .search-page .articleGroup .subArticle .caption p {
    display: -webkit-box !important
  }
}

.searchCag {
  padding-top: 10px
}

@media screen and (max-width: 767px) {
  .searchCag {
    padding-bottom: 10px
  }
}

.searchCag ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0
}

.searchCag ul li {
  display: inline-block;
  margin-right: 15px;
  font-size: 1.125rem;
  border-bottom: 2px solid rgba(0, 0, 0, 0)
}

@media screen and (min-width: 768px) {
  .searchCag ul li {
    font-size: 1rem
  }
}

.searchCag ul li a {
  display: block;
  color: #171717
}

.searchCag ul li.active a,
.searchCag ul li:hover a {
  color: #d60c18
}

.searchCag ul li.active {
  border-bottom-color: #d60c18
}

.searchCag ul li.active a {
  color: #d60c18
}

.tag-page .banner {
  min-height: 312px
}

.tag-page article {
  width: 100%
}

.tag-page .searchDoneTxt {
  padding-top: 1em;
  text-align: center
}

.tag-page .searchDoneTxt>* {
  display: inline-block
}

.tag-page .searchDoneTxt h1 {
  display: block;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.75em
}

.tag-page .article__keyword--description p {
  margin: 20px 0
}

@media screen and (max-width: 767px) {
  .tag-page .articleGroup .subArticle .pic {
    display: none
  }

  .tag-page .articleGroup .subArticle .caption {
    border-width: 1px
  }

  .tag-page .articleGroup .subArticle .caption p {
    display: -webkit-box !important
  }
}

body.slide__open,
body.opened {
  overflow: hidden
}

nav {
  font-weight: 400
}

nav a {
  display: block
}

nav.menubar--left {
  position: fixed;
  top: 0;
  left: -300px;
  width: 300px;
  max-height: 100%;
  font-size: 1rem;
  border: 1px solid #d3d5d7;
  background-color: #fff;
  overflow: scroll;
  transition: all .3s;
  z-index: 14
}

@media screen and (min-width: 1024px) {
  nav.menubar--left {
    overflow: hidden scroll
  }
}

nav.menubar--left ul {
  padding: 0;
  margin: 0;
  list-style: none
}

nav.menubar--left ul li {
  line-height: 1
}

nav.menubar--left ul li .li__group {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between
}

nav.menubar--left ul li .li__group a {
  color: #171717
}

nav.menubar--left ul li .li__group:hover a,
nav.menubar--left ul li .li__group:hover i {
  color: #d60c18
}

nav.menubar--left ul li .li__group a.sns-facebook:hover>i,
nav.menubar--left ul li .li__group a.sns-facebook:hover>span {
  color: #1877f2
}

nav.menubar--left ul li .li__group a.sns-line:hover>i,
nav.menubar--left ul li .li__group a.sns-line:hover>span {
  color: #00c200
}

nav.menubar--left ul li.subtitle {
  padding: 9px 12px;
  font-size: 14px;
  font-weight: 500;
  background-color: #fafafa
}

nav.menubar--left ul li.now {
  background-color: #d60c18
}

nav.menubar--left ul li.now>.li__group>a,
nav.menubar--left ul li.now>.li__group>i {
  color: #fff
}

nav.menubar--left ul.ctalist {
  padding: 20px
}

nav.menubar--left ul.ctalist li+li {
  margin-top: 20px
}

nav.menubar--left ul.ctalist li a.btn {
  display: block;
  margin-top: 0;
  margin-bottom: 0
}

nav.menubar--left>ul+ul {
  border-top: 1px solid #d3d5d7
}

nav.menubar--left>ul>li .li__group {
  position: relative
}

nav.menubar--left>ul>li .li__group>a {
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding: 17px 25px;
  -ms-flex-align: center;
  align-items: center
}

nav.menubar--left>ul>li .li__group>a.sns i+span {
  margin-left: 5px
}

nav.menubar--left>ul>li .li__group>i.more {
  position: absolute;
  top: 0;
  right: 0;
  padding: 17px 25px;
  font-weight: bold;
  cursor: pointer;
  transition: all .3s
}

nav.menubar--left>ul>li .li__group>i.more.active {
  transform: rotate(180deg)
}

nav.menubar--left>ul>li>ul {
  display: none;
  background-color: #eee
}

nav.menubar--left>ul>li>ul>li .li__group>a {
  padding: 17px 50px
}

nav.menubar--left.opened {
  left: 0
}

.menubar__user--member {
  position: absolute;
  width: 150px;
  word-break: keep-all
}

@media screen and (min-width: 768px) {
  .menubar__user--member {
    top: 43px;
    right: 0
  }

  .menubar__user--member.menubar__user--login {
    width: auto
  }
}

@media screen and (max-width: 767px) {
  .menubar__user--member {
    top: 42px;
    right: -20px;
    opacity: 1 !important
  }
}

@media screen and (max-width: 767px) {
  .menubar__user--member>ul.desktop {
    display: none
  }
}

@media screen and (min-width: 768px) {
  .menubar__user--member>ul.mobile {
    display: none
  }
}

.menubar__user--member,
aside.menubar--left {
  font-size: 1rem;
  border: solid #d3d5d7;
  background-color: #fff
}

@media screen and (min-width: 768px) {

  .menubar__user--member,
  aside.menubar--left {
    border-width: 1px
  }
}

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

  .menubar__user--member,
  aside.menubar--left {
    border-width: 1px 0;
    width: 100vw;
    overflow: hidden scroll
  }
}

.menubar__user--member ul,
aside.menubar--left ul {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none
}

.menubar__user--member ul li,
aside.menubar--left ul li {
  line-height: 1
}

.menubar__user--member ul li.hr,
aside.menubar--left ul li.hr {
  height: 1px;
  background-color: #d3d5d7
}

.menubar__user--member ul li .li__group,
aside.menubar--left ul li .li__group {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between
}

.menubar__user--member ul li .li__group a,
aside.menubar--left ul li .li__group a {
  color: #171717
}

.menubar__user--member ul li .li__group:hover a,
.menubar__user--member ul li .li__group:hover i,
aside.menubar--left ul li .li__group:hover a,
aside.menubar--left ul li .li__group:hover i {
  color: #d60c18
}

.menubar__user--member ul li .li__group a.sns-facebook:hover>i,
.menubar__user--member ul li .li__group a.sns-facebook:hover>span,
aside.menubar--left ul li .li__group a.sns-facebook:hover>i,
aside.menubar--left ul li .li__group a.sns-facebook:hover>span {
  color: #1877f2
}

.menubar__user--member ul li .li__group a.sns-line:hover>i,
.menubar__user--member ul li .li__group a.sns-line:hover>span,
aside.menubar--left ul li .li__group a.sns-line:hover>i,
aside.menubar--left ul li .li__group a.sns-line:hover>span {
  color: #00c200
}

.menubar__user--member>ul>li .li__group,
aside.menubar--left>ul>li .li__group {
  position: relative
}

.menubar__user--member>ul>li .li__group--id,
aside.menubar--left>ul>li .li__group--id {
  padding: 15px 25px;
  line-height: 1.25
}

.menubar__user--member>ul>li .li__group--id span,
aside.menubar--left>ul>li .li__group--id span {
  display: block
}

.menubar__user--member>ul>li .li__group>a,
aside.menubar--left>ul>li .li__group>a {
  width: 100%;
  padding: 15px 25px;
  line-height: 1.25
}

.menubar__user--member>ul>li .li__group>a.sns i+span,
aside.menubar--left>ul>li .li__group>a.sns i+span {
  margin-left: 5px
}

.menubar__user--member>ul>li .li__group>i.more,
aside.menubar--left>ul>li .li__group>i.more {
  position: absolute;
  top: 0;
  right: 0;
  padding: 15px 25px;
  font-weight: bold;
  cursor: pointer;
  transition: transform .3s
}

.menubar__user--member>ul>li .li__group>i.more.active,
aside.menubar--left>ul>li .li__group>i.more.active {
  transform: rotate(180deg)
}

.menubar__user--member>ul>li.now>.li__group,
aside.menubar--left>ul>li.now>.li__group {
  background-color: #d60c18
}

.menubar__user--member>ul>li.now>.li__group>a,
.menubar__user--member>ul>li.now>.li__group>i,
aside.menubar--left>ul>li.now>.li__group>a,
aside.menubar--left>ul>li.now>.li__group>i {
  color: #fff
}

.menubar__user--member>ul>li>ul,
aside.menubar--left>ul>li>ul {
  display: none
}

.menubar__user--member>ul>li>ul>li .li__group>a,
aside.menubar--left>ul>li>ul>li .li__group>a {
  padding: 15px 20px 15px 50px
}

.menubar__user--member>ul>li>ul>li.now a,
aside.menubar--left>ul>li>ul>li.now a {
  color: #d60c18
}

.menubar__user--member.opened,
aside.menubar--left.opened {
  left: 0
}

.main-nav {
  position: relative;
  font-weight: 400;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  z-index: 1
}

@media screen and (max-width: 767px) {
  .main-nav {
    display: none
  }
}

.main-nav.fixed {
  margin-top: 60px
}

@media screen and (min-width: 1024px) {
  .main-nav.fixed {
    margin-top: 65px
  }
}

.main-nav>ul {
  width: 1280px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  font-size: 0
}

.main-nav>ul>li {
  position: relative;
  display: inline-block;
  width: 10%;
  font-size: 1rem
}

.main-nav>ul>li>a:hover {
  color: #d60c18
}

.main-nav>ul>li>ul {
  position: absolute;
  display: none;
  top: 100%;
  width: 126%;
  background-color: #fff;
  border-top: 1px solid #eee;
  margin: 0 auto 0 -13%;
  padding: 0;
  list-style: none;
  opacity: 0;
  transition: opacity .5s
}

.main-nav>ul>li>ul li a {
  border-style: solid;
  border-width: 0 1px;
  border-color: #eee
}

.main-nav>ul>li>ul li a:hover {
  color: #fff;
  background-color: #d60c18;
  border-color: #d60c18
}

.main-nav>ul>li>ul li:last-child a {
  border-width: 0 1px 1px
}

.main-nav>ul>li:hover>ul {
  display: block;
  opacity: 1
}

.main-nav a {
  display: block;
  padding: 1em 0;
  color: #171717;
  line-height: 1;
  text-align: center
}

.opacity,
.black,
.touch__black {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0
}

.opacity.opened,
.black.opened,
.touch__black.opened {
  width: 100%;
  height: 100%
}

.opacity {
  z-index: 3
}

.black,
.touch__black {
  background-color: rgba(23, 23, 23, .4);
  opacity: 0;
  transition: opacity .3s;
  z-index: 13
}

.black.opened,
.touch__black.opened {
  opacity: 1
}

.black.search__opened,
.touch__black.search__opened {
  z-index: 11
}

:root {
  --member-menu-duration: 400ms
}

.member-menu {
  font-size: 0;
  line-height: 1
}

.member-menu i {
  font-size: 1.3125rem
}

.member-menu i.icon-close::before {
  content: "\e92e" !important;
  font-weight: 700
}

.member-menu .member-menu-container {
  position: absolute;
  top: 2.5rem;
  right: 0;
  display: none;
  font-size: 1rem;
  line-height: 1.2;
  cursor: default
}

.member-menu .desktop,
.member-menu .mobile {
  z-index: 10;
  border-width: 1px;
  border-style: solid;
  border-color: #d3d5d7;
  background-color: #fff;
  transition-duration: var(--member-menu-duration)
}

.member-menu .desktop ul,
.member-menu .mobile ul {
  margin: 0;
  padding: 0;
  list-style: none
}

.member-menu .desktop li,
.member-menu .mobile li {
  display: block
}

.member-menu .desktop li.hr,
.member-menu .mobile li.hr {
  margin: 0;
  padding: 0;
  height: 1px;
  background-color: #d3d5d7
}

.member-menu .desktop a,
.member-menu .mobile a {
  padding: .9rem 1.5rem;
  display: block;
  color: #171717
}

.member-menu .desktop a:hover,
.member-menu .mobile a:hover {
  color: #d60c18
}

.member-menu .desktop {
  max-height: 0;
  position: absolute;
  top: 12px;
  right: 0;
  overflow: hidden;
  white-space: nowrap;
  transition-property: max-height
}

@media screen and (max-width: 1023px) {
  .member-menu .desktop {
    display: none !important
  }
}

.member-menu .mobile {
  width: 300px;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  translate: 100% 0;
  transition-property: translate
}

@media screen and (min-width: 1024px) {
  .member-menu .mobile {
    display: none !important
  }
}

.member-menu .member-menu-mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0);
  opacity: 0;
  transition: opacity 300ms
}

@media screen and (max-width: 1023px) {
  .member-menu .member-menu-mask {
    background-color: rgba(23, 23, 23, .5)
  }
}

.member-menu.opened .member-menu-container {
  display: block
}

.member-menu.opened .member-menu-container.active .member-menu-mask {
  opacity: 1
}

.member-menu.opened .member-menu-container.active .desktop {
  max-height: 500px
}

.member-menu.opened .member-menu-container.active .mobile {
  translate: 0
}

.mobile-tab {
  position: relative;
  width: 100%;
  padding: 20px 20px 0;
  margin-bottom: -20px;
  overflow: auto
}

@media screen and (min-width: 768px) {
  .mobile-tab {
    display: none
  }
}

.mobile-tab>ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 400
}

.mobile-tab>ul::after {
  content: "";
  display: block;
  clear: both
}

.mobile-tab>ul li {
  float: left;
  width: 33.33333%;
  line-height: 44px;
  color: #939ea7;
  text-align: center;
  border-top: 1px solid #d3d5d7;
  background-color: #d3d5d7;
  cursor: pointer
}

.mobile-tab>ul li+li {
  border-left: 1px solid #fff
}

.mobile-tab>ul li:hover {
  color: #6b7780
}

.mobile-tab>ul li.active {
  color: #373737;
  background-color: #fff;
  border: solid #d3d5d7;
  border-width: 1px 0 0 1px
}

.mobile-tab>ul li.active+li {
  border-left-color: #d3d5d7
}

.mobile-tab>ul li:last-child.active {
  border-width: 1px 1px 0 0
}

.tabGroup {
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 400
}

.tabGroup::after {
  content: "";
  display: block;
  clear: both
}

.tabGroup li {
  float: left;
  width: 50%;
  line-height: 44px;
  color: #939ea7;
  text-align: center;
  border-top: 1px solid #d3d5d7;
  background-color: #d3d5d7;
  cursor: pointer
}

.tabGroup li+li {
  border-left: 1px solid #fff
}

.tabGroup li:hover {
  color: #6b7780
}

.tabGroup li.active {
  color: #373737;
  background-color: #fff;
  border: solid #d3d5d7;
  border-width: 1px 0 0 1px
}

.tabGroup li.active+li {
  border-left-color: #d3d5d7
}

.tabGroup li:last-child.active {
  border-width: 1px 1px 0 0
}

@media screen and (max-width: 767px) {
  .tabGroup {
    display: none
  }
}

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

  section.article,
  section.subArticle {
    border: 1px solid #d3d5d7
  }
}

.pic {
  position: relative;
  overflow: hidden
}

.pic>a {
  position: relative;
  display: block
}

.pic>a::before {
  position: relative;
  width: 100%;
  padding-top: 66.984127%;
  content: "";
  display: block;
  background-color: rgba(23, 23, 23, .5);
  background-image: -webkit-radial-gradient(center center, closest-side ellipse, rgba(255, 255, 255, 0.1) 30%, rgba(0, 0, 0, 0.4) 130%);
  opacity: 0;
  transition: opacity .3s;
  z-index: 1
}

.pic>a:hover::before {
  opacity: 1
}

.pic>a img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.pic>a img.lazyload {
  opacity: 0
}

.pic>a.finished {
  background: none
}

.pic>a.finished::after {
  opacity: 0
}

.pic>a.finished img.lazyload {
  opacity: 1
}

.pic .informationArea {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 10px;
  background-color: rgba(23, 23, 23, .5);
  transform: translateY(100%);
  transition: transform .3s;
  z-index: 2
}

.pic .informationArea .views {
  color: #fff
}

.pic:hover .informationArea {
  transform: translateY(0%)
}

.caption {
  position: relative
}

@media screen and (max-width: 767px) {
  .caption {
    background-color: #fff
  }
}

.caption .channelTitle {
  display: table;
  margin-bottom: 3px;
  color: #d60c18;
  font-size: .875rem;
  font-weight: normal;
  line-height: 1
}

.caption .channelTitle:hover {
  color: #fff;
  background-color: #d60c18
}

.caption time {
  position: absolute;
  top: 0;
  right: 15px;
  padding-top: 10px;
  color: secondary-text;
  font-size: .875rem;
  font-weight: normal;
  line-height: 1
}

@media screen and (min-width: 1024px) {
  .caption time {
    padding-top: 15px
  }
}

.caption h3 {
  margin-top: 10px;
  margin-bottom: 5px;
  font-weight: normal
}

@media screen and (min-width: 768px) {
  .caption h3 {
    margin-top: 0
  }
}

.caption h3 a {
  display: block;
  color: #171717;
  line-height: 1.25
}

@media screen and (min-width: 768px) {
  .caption h3 a {
    line-height: 1.5
  }
}

.caption h3 a:hover {
  color: #d60c18
}

.caption p {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.4;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical
}

@media screen and (max-width: 767px) {
  .caption p {
    display: none !important;
    color: #48545d
  }
}

.articleGroup .article .caption {
  padding: 10px
}

@media screen and (min-width: 768px) {
  .articleGroup .article .caption {
    padding: 15px
  }
}

.articleGroup .article .caption h3 a {
  font-size: 22px
}

@media screen and (min-width: 768px) {
  .articleGroup .article .caption h3 a {
    font-size: 28px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical
  }
}

.articleGroup .subArticle {
  -ms-flex-align: center;
  align-items: center;
  margin: 5px 0 15px
}

@media screen and (min-width: 768px) {
  .articleGroup .subArticle {
    display: -ms-flexbox;
    display: flex;
    margin: 20px 0
  }
}

@media screen and (min-width: 768px) {
  .articleGroup .subArticle .pic {
    width: 120px
  }
}

.articleGroup .subArticle .pic .informationArea {
  display: none
}

@media screen and (min-width: 768px) {
  .articleGroup .subArticle .caption {
    width: calc(100% - 120px);
    padding-left: 10px
  }
}

@media screen and (max-width: 767px) {
  .articleGroup .subArticle .caption {
    padding: 10px
  }
}

.articleGroup .subArticle .caption h3 a {
  font-size: 22px
}

@media screen and (min-width: 768px) {
  .articleGroup .subArticle .caption h3 a {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical
  }
}

.articleGroup .subArticle .caption time {
  right: 10px
}

@media screen and (min-width: 768px) {
  .articleGroup .subArticle .caption time {
    padding-top: 0
  }
}

@media screen and (min-width: 768px) {
  .articleGroup .subArticle .caption p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical
  }
}

.articleGroup .subArticle.media .pic::before,
.articleGroup .subArticle.media .pic::after {
  position: absolute;
  content: "";
  display: block;
  z-index: 2
}

.articleGroup .subArticle.media .pic::before {
  bottom: 5px;
  left: 5px;
  width: 40px;
  height: 40px;
  border: 3px solid #fff;
  border-radius: 50%
}

.articleGroup .subArticle.media .pic::after {
  bottom: 15px;
  left: 20px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #fff
}

@media screen and (min-width: 768px) {

  aside .article,
  aside .media {
    border: 1px solid #d3d5d7;
    background-color: #fff
  }
}

aside .article .caption,
aside .media .caption {
  padding: 10px
}

aside .article .caption .channelTitle,
aside .media .caption .channelTitle {
  margin-bottom: .25em
}

aside .article .caption h3,
aside .media .caption h3 {
  margin-top: 5px;
  margin-bottom: 0
}

aside .article .caption h3 a,
aside .media .caption h3 a {
  font-size: 1rem
}

aside .media .pic::before,
aside .media .pic::after {
  position: absolute;
  content: "";
  display: block;
  z-index: 2
}

aside .media .pic::before {
  bottom: 10px;
  left: 10px;
  width: 55px;
  height: 55px;
  border: 4px solid #fff;
  border-radius: 50%
}

aside .media .pic::after {
  bottom: 25px;
  left: 30px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 0 12px 21px;
  border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #fff
}

.card__group {
  font-size: 0
}

.card__group .card__item {
  width: 100%
}

.card__group .card__item span {
  display: block
}

.card__group .card__item .card__img {
  position: relative
}

.card__group .card__item .card__img .label {
  position: absolute;
  bottom: 0;
  right: 0;
  display: block;
  padding: 0 5px;
  color: #fff;
  font-size: .875rem;
  line-height: 30px;
  text-align: center;
  background: rgba(23, 23, 23, .5);
  text-transform: uppercase
}

.card__group .card__item .card__subtitle {
  margin-bottom: 5px;
  color: #d60c18;
  font-size: .875rem
}

.card__group .card__item .card__subtitle i.icon {
  display: inline-block;
  margin-right: 5px;
  vertical-align: text-top;
  line-height: 1
}

.card__group .card__item .card__title {
  color: #171717;
  font-size: 1rem;
  transition: color .2s
}

.card__group .card__item:hover .card__title {
  color: #d60c18
}

@media screen and (max-width: 1023px) {
  .card__group.card__group--grid {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start
  }
}

@media screen and (min-width: 1024px) {
  .card__group.card__group--grid .card__item {
    display: inline-block;
    vertical-align: top;
    width: calc((100% - 40px)/3);
    margin-left: 20px;
    margin-bottom: 30px
  }
}

@media screen and (max-width: 1023px) {
  .card__group.card__group--grid .card__item {
    width: 220px;
    margin-right: 20px;
    margin-bottom: 10px
  }
}

.card__group.card__group--grid .card__item:nth-child(3n+1) {
  margin-left: 0
}

.card__group.card__group--grid .card__item .card__subtitle {
  margin-top: 10px
}

.card__group.card__group--list .card__item {
  display: block
}

.card__group.card__group--list .card__item+.card__item {
  margin-top: 20px
}

.card__group.card__group--list .card__item .card__img {
  display: inline-block;
  vertical-align: middle;
  width: 110px
}

.card__group.card__group--list .card__item .card__img img {
  width: 100%
}

.card__group.card__group--list .card__item .card__body {
  display: inline-block;
  vertical-align: middle;
  width: calc(100% - 110px);
  padding-left: 20px
}

.card__group.card__group--list .card__item .card__body .card__title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical
}

.label--radio,
.label--check {
  display: block;
  position: relative;
  font-size: 0;
  cursor: pointer;
  z-index: 1;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.label--radio span,
.label--check span {
  display: inline-block;
  vertical-align: top;
  line-height: 1.25;
  transition: all .3s
}

.label--radio .form__group,
.label--check .form__group {
  display: block;
  max-width: none;
  margin-top: 10px;
  padding-left: calc(20px + .5rem)
}

.label--radio span.label__radio__txt {
  width: calc(100% - 20px - .5em);
  padding-left: .5em;
  font-size: 1rem
}

.label--radio span.label__radio__helper {
  display: block;
  padding-top: 5px;
  padding-left: calc(20px + .575rem);
  color: #7a838b;
  font-size: .875rem;
  font-weight: normal;
  line-height: 1.25
}

.label--radio span.label__radio__mark {
  position: relative;
  top: .125rem/2;
  left: 0;
  width: 1.125rem;
  height: 1.125rem;
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid #48545d;
  border-radius: 50%
}

.label--radio span.label__radio__mark::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background: #feebec;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: all .3s;
  z-index: -1
}

.label--radio span.label__radio__mark::after {
  content: "";
  position: absolute;
  display: none;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background: #d60c18;
  border-radius: 50%;
  transform: translate(-50%, -50%)
}

.label--radio input[type=radio] {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  cursor: pointer
}

.label--radio input[type=radio]:checked~span.label__radio__mark {
  border-color: #d60c18
}

.label--radio input[type=radio]:checked~span.label__radio__mark::after {
  display: block
}

.label--radio:hover input[type=radio]~span.label__radio__mark,
.label--radio.active input[type=radio]~span.label__radio__mark {
  border-color: #d60c18
}

.label--radio:hover input[type=radio]:checked~span.label__radio__mark::before,
.label--radio.active input[type=radio]:checked~span.label__radio__mark::before {
  width: 1.75rem;
  height: 1.75rem;
  opacity: 1
}

.label--check span.label__check__txt {
  width: calc(100% - 20px - .5em);
  padding-left: .5em;
  font-size: 1rem
}

.label--check span.label__check__helper {
  display: block;
  padding-top: 5px;
  padding-left: calc(20px + .575rem);
  color: secondary-text;
  font-size: .875rem;
  font-weight: normal;
  line-height: 1.25
}

.label--check span.label__check__mark {
  position: relative;
  top: .125rem/2;
  left: 0;
  width: 1.125rem;
  height: 1.125rem;
  background-color: rgba(0, 0, 0, 0);
  border: 2px solid #48545d
}

.label--check span.label__check__mark::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background: #feebec;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: all .3s;
  z-index: -1
}

.label--check span.label__check__mark::after {
  content: "\e929";
  position: absolute;
  display: none;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  color: #fff;
  font-family: "cw_icon_new";
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  transform: translate(-50%, -50%)
}

.label--check input[type=checkbox] {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  cursor: pointer
}

.label--check input[type=checkbox]:checked~span.label__check__mark {
  border-color: #d60c18;
  background-color: #d60c18
}

.label--check input[type=checkbox]:checked~span.label__check__mark::after {
  display: block
}

.label--check:hover input[type=checkbox]~span.label__check__mark,
.label--check.active input[type=checkbox]~span.label__check__mark {
  border-color: #d60c18
}

.label--check:hover input[type=checkbox]:checked~span.label__check__mark::before,
.label--check.active input[type=checkbox]:checked~span.label__check__mark::before {
  width: 1.75rem;
  height: 1.75rem;
  opacity: 1
}

.align-label-text {
  padding-left: calc(20px + .5em)
}

[class*="--disabled"] .label--radio span.label__radio__helper {
  color: #d3d5d7
}

[class*="--disabled"] .label--radio span.label__radio__mark {
  border: 2px solid #d3d5d7
}

[class*="--disabled"] .label--radio span.label__radio__mark::before {
  background: #fff
}

[class*="--disabled"] .label--radio span.label__radio__mark::after {
  background: #d3d5d7
}

[class*="--disabled"] .label--radio input[type=radio] {
  cursor: pointer
}

[class*="--disabled"] .label--radio input[type=radio]:checked~span.label__radio__mark {
  border-color: #d3d5d7
}

[class*="--disabled"] .label--radio:hover input[type=radio]~span.label__radio__mark,
[class*="--disabled"] .label--radio.active input[type=radio]~span.label__radio__mark {
  border-color: #d3d5d7
}

[class*="--disabled"] .label--check span.label__check__helper {
  color: #d3d5d7
}

[class*="--disabled"] .label--check span.label__check__mark {
  border: 2px solid #d3d5d7
}

[class*="--disabled"] .label--check span.label__check__mark::before {
  background: #fff
}

[class*="--disabled"] .label--check span.label__check__mark::after {
  color: #fff
}

[class*="--disabled"] .label--check input[type=checkbox]:checked~span.label__check__mark {
  border-color: #d3d5d7;
  background-color: #d3d5d7
}

[class*="--disabled"] .label--check:hover input[type=checkbox]~span.label__check__mark,
[class*="--disabled"] .label--check.active input[type=checkbox]~span.label__check__mark {
  border-color: #d3d5d7
}

.views {
  line-height: 1
}

.views h2,
.views h4 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 400
}

@media screen and (min-width: 768px) {

  .views h2,
  .views h4 {
    font-size: 15px
  }
}

.views .count {
  font-size: 24px
}

@media screen and (min-width: 768px) {
  .views .count {
    font-size: 40px
  }
}

.sns-list {
  font-size: 0;
  font-weight: normal
}

.sns-list>div {
  position: relative;
  display: inline-block;
  font-size: 1rem;
  vertical-align: middle;
  transition: background .3s
}

.sns-list>div.title-text {
  padding-bottom: 10px;
  font-size: .875rem
}

.sns-list>div a,
.sns-list>div button {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0 .55em;
  color: #fff;
  line-height: 36px;
  border: 0;
  background: none;
  transition: color .3s, background .3s, border .3s
}

@media screen and (min-width: 768px) {

  .sns-list>div a,
  .sns-list>div button {
    padding: 0 .5em;
    line-height: 40px
  }
}

.sns-list>div a i,
.sns-list>div button i {
  font-size: 1.15em;
  line-height: 36px
}

@media screen and (min-width: 768px) {

  .sns-list>div a i,
  .sns-list>div button i {
    font-size: 1.5em;
    line-height: 40px
  }
}

@media screen and (max-width: 767px) {
  .sns-list>div .txt {
    display: none
  }
}

.sns-list .fbShare {
  background-color: #1877f2
}

.sns-list .fbShare:hover {
  background-color: #0d6ae4
}

.sns-list .comments {
  margin-left: 10px;
  background-color: #00c200
}

.sns-list .comments:hover {
  background-color: #00a900
}

.sns-list .link input {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  opacity: 0;
  z-index: -1
}

.sns-list .link .copy-success {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  width: 180px;
  padding: 5px 10px;
  color: #fff;
  font-size: .875em;
  text-align: center;
  word-break: break-all;
  background-color: #373737;
  transform: translate(-50%, 50%)
}

@media screen and (min-width: 768px) {
  .sns-list.origin>div.title-text {
    display: none
  }
}

.sns-list.origin>div+div {
  margin-left: 10px
}

.sns-list.origin .twitter {
  background-color: #00acee
}

.sns-list.origin .twitter:hover {
  background-color: #009ad5
}

@media screen and (min-width: 768px) {
  .sns-list.origin .twitter {
    display: none
  }
}

.sns-list.origin .whatapp {
  background-color: #4fce5d
}

.sns-list.origin .whatapp:hover {
  background-color: #3bc84b
}

@media screen and (min-width: 768px) {
  .sns-list.origin .whatapp {
    display: none
  }
}

.sns-list.origin .email {
  background-color: #373737
}

.sns-list.origin .email:hover {
  background-color: #171717
}

.sns-list.origin .link {
  background-color: #373737
}

.sns-list.origin .link:hover {
  background-color: #171717
}

.sns-list.fixed {
  position: fixed;
  top: 50%;
  left: calc((100% - 1000px)/2 - 70px);
  width: 50px;
  padding: 10px 5px 5px;
  text-align: center;
  z-index: 3;
  opacity: 0;
  animation: fadeIn .3s .3s forwards;
  transform: translateY(-50%)
}

.sns-list.fixed>div {
  margin-top: 5px;
  display: block !important
}

.sns-list.fixed>div a,
.sns-list.fixed>div button {
  color: #6b7780
}

.sns-list.fixed>div.fbShare {
  background-color: rgba(0, 0, 0, 0)
}

.sns-list.fixed>div.fbShare:hover {
  background-color: rgba(0, 0, 0, 0)
}

.sns-list.fixed>div.fbShare a:hover {
  color: #1877f2
}

.sns-list.fixed>div.comments {
  margin-left: 0;
  background-color: rgba(0, 0, 0, 0)
}

.sns-list.fixed>div.comments:hover {
  background-color: rgba(0, 0, 0, 0)
}

.sns-list.fixed>div.comments a:hover {
  color: #00c200
}

.sns-list.fixed>div.twitter a:hover {
  color: #00acee
}

.sns-list.fixed>div.whatapp a:hover {
  color: #4fce5d
}

.sns-list.fixed>div.email a:hover {
  color: #d60c18
}

.sns-list.fixed>div.link button:hover {
  color: #d60c18
}

.collect {
  font-size: 1rem;
  background-color: #d60c18;
  transition: background .3s
}

.collect a {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0 .55em;
  color: #fff;
  line-height: 36px
}

@media screen and (min-width: 768px) {
  .collect a {
    padding: 0 .5em;
    line-height: 40px
  }
}

.collect a i {
  font-size: 1.15em;
  font-weight: 600;
  line-height: 36px
}

@media screen and (min-width: 768px) {
  .collect a i {
    font-size: 1.5em;
    line-height: 40px
  }
}

.collect a i::before {
  content: ""
}

.collect:hover {
  background-color: #be0b15
}

.collect.addsave a i::before {
  content: ""
}

@keyframes fadeIn {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

section.list-link>h3,
.tabContent>h3 {
  padding: 1em;
  margin: 0;
  color: #373737;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  background-color: #d3d5d7
}

section.list-link>ul,
.tabContent>ul {
  background-color: #fff;
  border: solid #d3d5d7;
  border-width: 0 1px 1px;
  margin: 0;
  padding: 0;
  list-style: none
}

section.list-link>ul li,
.tabContent>ul li {
  padding-top: 10px;
  padding-bottom: 10px
}

@media screen and (min-width: 768px) {

  section.list-link>ul li,
  .tabContent>ul li {
    padding-top: .5325em;
    padding-bottom: .5325em
  }
}

section.list-link>ul li a,
.tabContent>ul li a {
  font-size: 1rem;
  color: #171717;
  line-height: 1.4;
  vertical-align: middle
}

section.list-link>ul li a:hover,
.tabContent>ul li a:hover {
  color: #d60c18
}

section.list-link>ul.etu-item-list {
  font-size: 0;
  border-width: 0
}

@media screen and (max-width: 767px) {
  section.list-link>ul.etu-item-list {
    padding-bottom: 10px
  }
}

section.list-link>ul.etu-item-list li {
  padding: 10px 10px 0
}

@media screen and (min-width: 768px) {
  section.list-link>ul.etu-item-list li {
    display: inline-block;
    padding: 10px;
    width: 33.3333333333%;
    vertical-align: top
  }
}

@media screen and (max-width: 767px) {
  section.list-link>ul.etu-item-list li .interest-list-link-img {
    display: inline-block;
    width: 120px;
    vertical-align: middle
  }
}

section.list-link>ul.etu-item-list li .interest-list-link-img a {
  display: block;
  position: relative
}

section.list-link>ul.etu-item-list li .interest-list-link-img a::before {
  position: relative;
  width: 100%;
  padding-top: 66.984127%;
  content: "";
  display: block;
  background-color: rgba(23, 23, 23, .5);
  background-image: -webkit-radial-gradient(center center, closest-side ellipse, rgba(255, 255, 255, 0.1) 30%, rgba(0, 0, 0, 0.4) 130%);
  opacity: 0;
  transition: opacity .3s;
  z-index: 1
}

section.list-link>ul.etu-item-list li .interest-list-link-img img {
  width: 100%
}

@media screen and (min-width: 768px) {
  section.list-link>ul.etu-item-list li .interest-list-link-title {
    padding-top: .5rem
  }
}

@media screen and (max-width: 767px) {
  section.list-link>ul.etu-item-list li .interest-list-link-title {
    display: inline-block;
    width: calc(100% - 120px);
    padding-left: 10px;
    vertical-align: middle
  }
}

section.list-link>ul.etu-item-list li .interest-list-link-title a {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical
}

section.list-link>ul.etu-item-list li:hover .interest-list-link-img a::before {
  opacity: 1
}

section.list-link>ul.etu-item-list li:hover .interest-list-link-title a {
  color: #d60c18
}

@media screen and (min-width: 768px) {
  section.list-link>ul:not(.etu-item-list) li {
    padding-top: .225em;
    padding-bottom: .225em
  }
}

section.list-link>ul:not(.etu-item-list) li+li {
  border-top: 1px solid #eee
}

section.list-link>ul:not(.etu-item-list) li a {
  display: block;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 5px;
  font-size: 1rem;
  color: #171717;
  font-size: 1rem;
  line-height: 1.5;
  vertical-align: middle;
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden
}

section.list-link>ul:not(.etu-item-list) li a::before {
  content: "．";
  display: inline-block;
  width: 2rem;
  color: #171717 !important;
  font-weight: 600;
  text-align: center
}

section.list-link>ul:not(.etu-item-list) li a:hover {
  color: #d60c18
}

.tabContent>ul {
  display: none;
  border-top: 0
}

.tabContent>ul.active {
  display: block
}

.tabContent>ul li {
  padding-left: 15px;
  padding-right: 10px
}

.tabContent>ul li+li {
  border-top: 1px solid #eee
}

.tabContent>ul li a {
  display: inline-block;
  width: calc(100% - 18px);
  padding-left: 5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden
}

.breadCrumbs {
  max-width: 1010px;
  padding-top: 20px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px
}

.breadCrumbs ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0
}

.breadCrumbs ul li {
  display: inline-block;
  color: #373737;
  font-size: 1rem
}

.breadCrumbs ul li a {
  display: inline-block;
  color: #373737
}

.breadCrumbs ul li a:hover {
  color: #d60c18
}

.breadCrumbs ul li+li {
  margin-left: 5px
}

.breadCrumbs ul li+li::before {
  content: ">";
  display: inline-block
}

.breadCrumbs ul li+li a {
  margin-left: 5px
}

.slider {
  position: relative;
  border: 1px solid #d3d5d7;
  background-color: #fff
}

.slider .pic {
  width: 298px;
  height: 248px;
  margin: auto;
  overflow: hidden
}

.slider .pic ul {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 10000px
}

.slider .pic ul li {
  position: absolute;
  top: 0;
  left: 100%;
  width: 298px;
  text-align: center
}

.slider .pic ul li.active {
  left: 0
}

.slider .pic ul li.ltr_in {
  left: 0;
  animation: slide_ltr_in .8s linear 1 both
}

.slider .pic ul li.ltr_out {
  left: 100%;
  animation: slide_ltr_out .8s linear 1 both
}

.slider .pic ul li.rtl_in {
  left: 0;
  animation: slide_rtl_in .8s linear 1 both
}

.slider .pic ul li.rtl_out {
  left: 100%;
  animation: slide_rtl_out .8s linear 1 both
}

.slider .pic ul li a {
  color: #373737
}

.slider .pic ul li a:hover {
  color: #d60c18
}

.slider .pic ul li a img {
  display: block;
  margin: 10px auto 10px;
  max-height: 190px
}

.slider .icon {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 46px;
  height: 46px;
  margin: auto;
  text-align: center;
  background-color: rgba(23, 23, 23, .6);
  background-position: 12px center;
  background-repeat: no-repeat;
  cursor: pointer;
  z-index: 2
}

.slider .icon.prev {
  left: 0;
  background-image: url("../img/prev-arrow.gif")
}

.slider .icon.prev:hover {
  background-position: 4px center
}

.slider .icon.next {
  right: 0;
  background-image: url("../img/next-arrow.gif")
}

.slider .icon.next:hover {
  background-position: 24px center
}

.slider .icon:hover {
  background-color: #d60c18
}

.slider-hr {
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  clear: both;
  overflow: auto
}

@media screen and (max-width: 767px) {
  .slider-hr {
    display: none
  }
}

.slider-hr .sliderContent {
  position: relative;
  overflow: hidden
}

.slider-hr ul {
  margin: 0;
  padding: 0;
  list-style: none;
  height: 54px
}

.slider-hr ul li.slider-item-group {
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  font-size: 0
}

.slider-hr ul li.slider-item-group.active {
  left: 0;
  z-index: 1
}

.slider-hr ul li.slider-item-group.ltr_in {
  left: 0;
  animation: slide_ltr_in .8s linear 1 both
}

.slider-hr ul li.slider-item-group.ltr_out {
  left: 100%;
  animation: slide_ltr_out .8s linear 1 both
}

.slider-hr ul li.slider-item-group.rtl_in {
  left: 0;
  animation: slide_rtl_in .8s linear 1 both
}

.slider-hr ul li.slider-item-group.rtl_out {
  left: 100%;
  animation: slide_rtl_out .8s linear 1 both
}

.slider-hr ul li.slider-item-group>ul li {
  display: inline-block;
  width: 33.3333333333%;
  vertical-align: top
}

.slider-hr ul li.slider-item-group>ul li+li {
  border-left: 1px solid #eee
}

.slider-hr ul li.slider-item-group>ul li a {
  position: relative;
  display: block;
  padding-top: 6px;
  padding-bottom: 4px;
  padding-left: 100px;
  padding-right: 20px;
  color: #171717
}

.slider-hr ul li.slider-item-group>ul li a:hover {
  color: #d60c18
}

.slider-hr ul li.slider-item-group>ul li a>* {
  font-size: 1rem
}

.slider-hr ul li.slider-item-group>ul li a .pic {
  position: absolute;
  top: 0;
  left: 20px;
  width: 80px
}

.slider-hr ul li.slider-item-group>ul li a .pic img {
  width: 100%
}

.slider-hr ul li.slider-item-group>ul li a .pic::before {
  position: relative;
  width: 100%;
  padding-top: 66.984127%;
  content: "";
  display: block;
  background-color: rgba(23, 23, 23, .5);
  background-image: -webkit-radial-gradient(center center, closest-side ellipse, rgba(255, 255, 255, 0.1) 30%, rgba(0, 0, 0, 0.4) 130%);
  opacity: 0;
  transition: opacity .3s;
  z-index: 1
}

.slider-hr ul li.slider-item-group>ul li a .txt {
  padding-left: 10px;
  line-height: 1.4;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical
}

.slider-hr ul li.slider-item-group>ul li a:hover .pic::before {
  opacity: 1
}

.slider-hr .slider-ct {
  position: relative;
  width: 980px;
  padding-left: 40px;
  padding-right: 40px;
  margin-left: auto;
  margin-right: auto
}

.slider-hr .controller .icon {
  position: absolute;
  top: 0;
  bottom: 0;
  display: block;
  width: 30px;
  transition: padding .3s;
  cursor: pointer
}

.slider-hr .controller .icon::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center
}

.slider-hr .controller .icon.prev {
  left: 10px
}

.slider-hr .controller .icon.prev::before {
  background-image: url("../img/prev-arrow-b.gif");
  background-position: center center
}

.slider-hr .controller .icon.next {
  right: 10px
}

.slider-hr .controller .icon.next::before {
  background-image: url("../img/next-arrow-b.gif")
}

.slider-hr .controller .icon.prev:hover {
  padding-right: 10px
}

.slider-hr .controller .icon.next:hover {
  padding-left: 10px
}

@keyframes slide_ltr_in {
  0% {
    left: -100%
  }

  100% {
    left: 0
  }
}

@keyframes slide_ltr_out {
  0% {
    left: 0
  }

  100% {
    left: 100%
  }
}

@keyframes slide_rtl_in {
  0% {
    left: 100%
  }

  100% {
    left: 0
  }
}

@keyframes slide_rtl_out {
  0% {
    left: 0
  }

  100% {
    left: -100%
  }
}

.paywallAnnounce {
  position: fixed;
  bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  font-weight: normal;
  z-index: 10
}

@media screen and (min-width: 768px) {
  .paywallAnnounce {
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    padding-left: 0;
    padding-right: 0
  }
}

@media screen and (max-width: 767px) {
  .paywallAnnounce {
    left: 0;
    padding-left: 0;
    padding-right: 0
  }
}

.paywallAnnounce .btn-close {
  display: none !important
}

.paywallAnnounce p {
  margin: 0
}

.paywallAnnounce p a {
  display: block;
  padding: .5rem 1rem;
  color: #fff;
  text-align: center;
  background-color: #d60c18;
  cursor: pointer
}

.paywallAnnounce p a:hover {
  background-color: #be0b15
}

.class-header {
  width: 100%;
  padding-top: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
  margin-left: auto;
  margin-right: auto
}

@media screen and (min-width: 768px) {
  .class-header {
    width: 1000px
  }
}

@media screen and (max-width: 767px) {
  .class-header {
    padding-bottom: .5em
  }
}

@media screen and (min-width: 1024px) {
  .class-header {
    width: 1000px
  }
}

.class-header h1,
.class-header h2 {
  display: inline-block;
  margin-top: 0;
  margin-bottom: 0;
  margin-right: 1rem;
  font-size: 1.375rem;
  font-weight: normal;
  vertical-align: baseline
}

@media screen and (min-width: 768px) {

  .class-header h1,
  .class-header h2 {
    font-size: 1.75rem
  }
}

.class-header h1 .mgzNum,
.class-header h2 .mgzNum {
  color: #d60c18
}

.class-header .list-inline {
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
  vertical-align: baseline
}

.class-header .list-inline li {
  display: inline-block;
  margin-right: 1em
}

.class-header .list-inline li:last-child {
  margin-right: 0
}

.class-header .list-inline li a {
  display: block;
  color: #171717
}

.class-header .list-inline li a:hover {
  color: #d60c18
}

.class-header #selectYear {
  display: inline-block;
  padding: 5px 0;
  vertical-align: bottom
}

.class-header #selectYear select {
  width: 140px;
  height: 30px;
  padding: 0 10px;
  border-radius: 0;
  border: 1px solid #eee;
  background-color: #eee;
  background-image: url("../img/down.svg");
  background-repeat: no-repeat;
  background-position: 90% 50%;
  background-size: 14px;
  -webkit-appearance: none;
  cursor: pointer
}

.top-ad {
  min-height: 250px;
  max-height: 70vh;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  overflow: hidden
}

.top-ad.compelted {
  min-height: auto
}

.top-ad>.google-ads {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  overflow: hidden
}

.top-ad .top-ad-gdn,
.top-ad .top-ad-super {
  width: 100%;
  display: none;
  -ms-flex-align: stretch;
  align-items: stretch;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: #f7f7f7;
  overflow: hidden
}

.top-ad .top-ad-gdn.active,
.top-ad .top-ad-super.active {
  display: -ms-flexbox;
  display: flex
}

.top-ad .top-ad-gdn {
  padding: 30px 0;
  min-height: 110px;
  max-height: 310px;
  border-width: 1px;
  border-style: solid;
  border-color: #eee
}

.top-ad .top-ad-super {
  height: 70vh;
  min-height: 460px;
  max-height: 680px;
  padding: 0;
  -ms-flex-align: center;
  align-items: center;
  border-width: 0 0 1px;
  background: none
}

.top-ad .top-ad-super.super-top-970x460 {
  max-height: 460px
}

.top-ad .top-ad-super.super-top-1536x544 {
  min-height: 460px;
  max-height: 544px
}

.top-ad .top-ad-super.super-top-1920x680 {
  min-height: 544px;
  max-height: 680px
}

.banner {
  position: relative;
  min-height: 312px;
  padding-top: 30px;
  padding-bottom: 30px;
  background-color: #f7f7f7;
  border: 1px solid #eee
}

.banner.opened {
  z-index: 10
}

.banner img {
  margin: auto;
  max-width: 100%;
  height: auto
}

.banner.fixed {
  margin-bottom: 60px
}

@media screen and (min-width: 1024px) {
  .banner.fixed {
    margin-bottom: 65px
  }
}

#div-incover-ad+.banner {
  padding-top: 0;
  padding-bottom: 0;
  background-color: rgba(0, 0, 0, 0);
  border: 0
}

.couplet-wide,
.couplet-left,
.couplet-right {
  display: none
}

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

  .couplet-wide,
  .couplet-left,
  .couplet-right {
    display: none !important
  }
}

.couplet-left,
.couplet-right {
  position: absolute;
  top: -250px;
  width: 300px
}

.couplet-left {
  left: calc((100% - 1248px)/2 - 320px)
}

.couplet-right {
  right: calc((100% - 1248px)/2 - 320px)
}

.bottom-banner {
  margin-top: -1.5em;
  margin-bottom: 50px
}

.index-page .couplet-wide,
.index-page .couplet-left,
.index-page .couplet-right {
  display: block
}

.cw__advertising,
.leafletBig,
.leaflet {
  text-align: center
}

.leafletBig {
  width: 302px;
  height: 602px
}

.leaflet {
  width: 302px;
  height: 252px
}

@media screen and (min-width: 1024px) {

  .leafletBig,
  .leaflet {
    margin-left: -1px;
    margin-right: -1px;
    border: 1px solid #d3d5d7
  }
}

@media screen and (min-width: 768px) {
  .index-page {
    min-width: 1248px
  }
}

.index-page .banner.text-center {
  min-height: 112px
}

@media screen and (min-width: 768px) {
  .index-page .banner.text-center {
    min-height: 152px
  }
}

.index-page header .subNav {
  position: static;
  width: 100%;
  background-color: #939ea7;
  transform: translateY(0)
}

.index-page header .subNav li {
  border-left-color: #fff
}

.index-page header .subNav li.userName {
  background-image: url("../img/download_arrow_white.png")
}

.index-page header .subNav li.userName.opened {
  background-image: url("../img/upload_arrow_white.png")
}

.index-page header .subNav li a {
  color: #fff
}

.index-page header .subNav li a:hover {
  color: #48545d
}

.index-page header .subNav>ul {
  width: 1280px
}

.index-page header .subNav>ul>li {
  color: #fff
}

@media screen and (min-width: 768px) {
  .index-page header .main-header .main-header-body {
    width: 1280px
  }
}

@media screen and (min-width: 768px) {
  .index-page header .main-header .main-header-body .logo a img {
    width: 134px
  }
}

@media screen and (min-width: 768px) {
  .index-page .container {
    width: 1288px
  }
}

.index-page .main {
  margin-top: 20px
}

@media screen and (min-width: 768px) {
  .index-page .main {
    width: 1288px
  }
}

@media screen and (min-width: 768px) {
  .index-page .main article {
    width: 608px
  }
}

@media screen and (max-width: 767px) {
  .index-page .main aside {
    display: none;
    margin-top: 0px
  }
}

.index-page .main .articleGroup {
  margin-bottom: 10px
}

@media screen and (min-width: 768px) {
  .index-page .main .articleGroup {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid #d3d5d7
  }
}

@media screen and (min-width: 768px) {
  .index-page .main .articleGroup .subArticle {
    padding: 0 15px 20px;
    margin: 0
  }
}

@media screen and (max-width: 767px) {
  .index-page .main .articleGroup .subArticle {
    margin-top: 10px
  }
}

.index-page .main .magazine {
  background-color: #eee;
  display: -ms-flexbox;
  display: flex;
  padding: 20px;
  margin: 15px 0
}

@media screen and (min-width: 768px) {
  .index-page .main .magazine {
    padding: 15px;
    margin: 20px 0
  }
}

.index-page .main .magazine .img {
  width: 120px;
  -ms-flex: 0 0 120px;
  flex: 0 0 120px;
  margin-right: 12px
}

@media screen and (min-width: 768px) {
  .index-page .main .magazine .img {
    margin-right: 24px
  }
}

.index-page .main .magazine .img img {
  width: 100%
}

.index-page .main .magazine .text {
  width: calc(100% - 144px)
}

.index-page .main .magazine .text>* {
  margin-top: 5px;
  margin-bottom: 0px
}

.index-page .main .magazine .text .subText {
  font-size: .875rem;
  line-height: 1
}

.index-page .main .magazine .text .subText .number {
  color: #d60c18;
  margin-right: 20px
}

.index-page .main .magazine .text .subText .date {
  color: #939ea7
}

.index-page .main .magazine .text .h2 a {
  color: #000;
  max-height: 61px;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2
}

@media screen and (min-width: 768px) {
  .index-page .main .magazine .text .h2 a {
    max-height: 33px;
    -webkit-line-clamp: 1
  }
}

.index-page .main .magazine .text .h2 a:hover {
  color: #d60c18
}

.index-page .main .magazine .text .describtion {
  max-height: 70px;
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3
}

.index-page .main .magazine .text .cta {
  text-align: right;
  padding-right: 5px;
  margin-top: 10px
}

.index-page .main .magazine .text .cta a {
  text-decoration: none
}

.index-page .main .magazine .text .cta i {
  margin-left: 5px;
  vertical-align: text-top
}

.index-page footer .container {
  max-width: 1288px;
  margin: auto
}

ul.article__keyword {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0
}

ul.article__keyword li {
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 10px
}

ul.article__keyword li:last-child {
  margin-right: 0
}

ul.article__keyword li a {
  position: relative;
  display: block;
  padding: .875em .75em;
  color: #171717;
  font-size: .875rem;
  line-height: 1;
  text-align: center;
  word-break: keep-all;
  background-color: #fff;
  border: 1px solid #d3d5d7;
  overflow: hidden;
  z-index: 1
}

ul.article__keyword li a::before,
ul.article__keyword li a::after {
  content: "";
  display: block;
  position: absolute;
  background-color: #feebec;
  opacity: 0;
  z-index: -1
}

ul.article__keyword li a::before {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transition: opacity .2s
}

ul.article__keyword li a::after {
  left: 50%;
  top: 50%;
  padding: 55%;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity 2s, transform .5s
}

ul.article__keyword li a:hover {
  color: #d60c18;
  border-color: #d60c18
}

ul.article__keyword li a:hover::before {
  opacity: .04
}

ul.article__keyword li a:hover:focus::before {
  opacity: .16
}

ul.article__keyword li a:focus::before {
  opacity: .12
}

ul.article__keyword li a:active::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0s
}

ul.article__keyword li a::-moz-focus-inner {
  border: none
}

.download {
  padding: 20px 0px;
  margin-bottom: 1.5rem;
  font-size: 0;
  border: solid #eee;
  border-width: 1px 0
}

@media screen and (max-width: 767px) {
  .download {
    text-align: center
  }
}

.download>a {
  display: inline-block;
  color: #171717;
  font-size: 1.125rem;
  line-height: 1.5;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center right;
  cursor: pointer
}

.download>a span {
  color: #d60c18;
  transition: color .3s
}

.download .dowloadLink,
.download .payreadLink {
  width: 120px;
  text-align: left;
  line-height: 50px
}

.download .dowloadLink:hover,
.download .payreadLink:hover {
  color: #d60c18
}

.download .dowloadLink {
  margin-right: 2rem;
  background-image: url("../img/download_arrow.png")
}

@media screen and (max-width: 767px) {
  .download .dowloadLink {
    margin-left: 1em
  }
}

.download .dowloadLink.noPdf {
  color: #6b7780;
  opacity: .5;
  cursor: not-allowed
}

.download .dowloadLink.noPdf span {
  color: #6b7780
}

.download .payreadLink {
  background-image: url("../img/payread.png")
}

.download .payreadLink.noPay {
  color: #6b7780;
  opacity: .5;
  cursor: not-allowed
}

.download .payreadLink.noPay span {
  color: #6b7780
}

.download .nextArticle {
  padding-right: 35px;
  text-align: right;
  background-image: url("../img/download_arrow_right.png")
}

@media screen and (min-width: 768px) {
  .download .nextArticle {
    width: calc(100% - 240px - 6rem);
    margin-left: 4rem
  }
}

.download .nextArticle span:first-child {
  display: inline-block;
  padding-right: 1rem
}

.download .nextArticle span:last-child {
  color: #171717
}

.download .nextArticle:hover span:last-child {
  color: #d60c18
}

.bulletin {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 15px 20px 10px;
  font-size: .875rem;
  background-color: #eee;
  border: 1px solid #d3d5d7;
  transition: bottom 1s;
  z-index: 3
}

.bulletin.hide {
  bottom: -100%
}

@media screen and (min-width: 1024px) {
  .bulletin {
    width: 265px;
    padding: 30px 25px 20px
  }
}

@media screen and (max-width: 1023px) {
  .bulletin .bulletin__txt {
    font-size: .875rem
  }
}

.bulletin .bulletin__btn {
  margin-top: 10px
}

@media screen and (min-width: 1024px) {
  .bulletin .bulletin__btn {
    margin-top: 20px
  }
}

.spotbox {
  position: relative;
  margin: 0;
  width: 100%;
  border-bottom: 1px solid #d3d5d7;
  overflow: hidden;
  padding-bottom: 10px;
  min-height: 177px
}

@media screen and (min-width: 768px) {
  .spotbox {
    margin: 30px auto;
    width: calc(100% - 40px);
    border: 1px solid #d3d5d7;
    padding-bottom: 0;
    min-height: 75px
  }
}

@media screen and (min-width: 1310px) {
  .spotbox {
    max-width: 1248px
  }
}

.spotbox img {
  width: 100%;
  height: auto
}

.spotbox img.pc {
  display: none
}

@media screen and (min-width: 768px) {
  .spotbox img.pc {
    display: block
  }

  .spotbox img.mb {
    display: none
  }
}

.spotbox a {
  display: block
}

.spotbox h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  color: #000;
  font-weight: 400;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical
}

.spotbox h3 a {
  color: #000
}

.spotbox h3 a:hover {
  color: #d60c18
}

.spotbox p {
  margin: 0
}

.spotbox p a {
  color: #000
}

.spotbox p a:hover {
  color: #d60c18
}

.spotbox .more {
  width: calc(100% - 40px);
  padding-top: 8px;
  padding-bottom: 2px;
  text-align: center;
  border: 1px solid #d3d5d7;
  background-color: rgba(238, 238, 238, .5);
  transition: background .3s;
  cursor: pointer;
  position: absolute;
  left: 20px;
  bottom: 20px;
  display: none
}

.spotbox .more::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../img/download_arrow.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center
}

.spotbox .more:hover {
  background-color: rgba(211, 213, 215, .5)
}

.spotbox .more.show::before {
  padding-top: 7px;
  padding-bottom: 3px;
  transform: rotate(180deg)
}

.spotbox .imgbox {
  position: relative
}

.spotbox .imgbox a::before {
  content: "";
  background-color: rgba(23, 23, 23, .5);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity .3s
}

.spotbox .imgbox a:hover::before {
  opacity: 1
}

.spotbox .card {
  position: relative
}

@media screen and (min-width: 768px) {
  .spotbox .card.first {
    padding-right: 320px
  }
}

.spotbox .card.first .txtbox {
  padding: 10px 20px
}

.spotbox .card.first h3 {
  font-size: 26px
}

@media screen and (min-width: 768px) {
  .spotbox .card.first h3 {
    font-size: 32px;
    font-weight: 500;
    -webkit-line-clamp: 2
  }
}

.spotbox .card.first h3 a span:nth-child(1) {
  color: #d60c18
}

.spotbox .card.first p {
  display: none
}

@media screen and (min-width: 768px) {
  .spotbox .card.first p {
    display: block;
    margin-top: 8px;
    line-height: 1.4;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical
  }
}

.spotbox .listbox {
  position: relative;
  padding: 0 15px;
  max-height: 288px;
  overflow: hidden;
  transition: all .3s ease
}

@media screen and (min-width: 768px) {
  .spotbox .listbox {
    position: absolute;
    padding: 15px 10px;
    width: 300px;
    max-height: inherit;
    height: calc(100% - 4px);
    overflow-y: auto;
    overflow-x: hidden;
    right: 2px;
    top: 2px
  }
}

.spotbox .listbox.show {
  max-height: inherit;
  transition: all .3s ease
}

.spotbox .listbox .card {
  padding: 10px 5px;
  border-top: 1px solid #d3d5d7
}

@media screen and (min-width: 768px) {
  .spotbox .listbox .card {
    padding: 10px
  }

  .spotbox .listbox .card:first-child {
    border-top: none
  }
}

.spotbox .listbox .card h3 {
  height: 75px
}

@media screen and (min-width: 768px) {
  .spotbox .listbox .card h3 {
    height: 102px;
    -webkit-line-clamp: 4
  }
}

.spotbox .listbox .card h3 a {
  height: 100%
}

.spotbox .listbox .card h3 a span {
  font-size: 14px;
  color: #d60c18;
  display: block
}

.spotbox .listbox::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: #fff
}

.spotbox .listbox::-webkit-scrollbar-thumb {
  background: #d3d5d7
}

.hot-page article>*:first-child>*:first-child>*:first-child {
  margin-top: 0
}

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

  .channel-page .class-header .list-inline,
  .subChannel-page .class-header .list-inline,
  .channel-fashion-page .class-header .list-inline,
  .subChannel-fashion-page .class-header .list-inline {
    display: none
  }
}

@media screen and (min-width: 768px) {

  .channel-page .articleGroup,
  .subChannel-page .articleGroup,
  .channel-fashion-page .articleGroup,
  .subChannel-fashion-page .articleGroup {
    float: left;
    width: 650px
  }
}

.channel-page article>.article,
.subChannel-page article>.article,
.channel-fashion-page article>.article,
.subChannel-fashion-page article>.article {
  margin-bottom: 15px;
  background-color: #fff
}

@media screen and (min-width: 768px) {

  .channel-page article>.article,
  .subChannel-page article>.article,
  .channel-fashion-page article>.article,
  .subChannel-fashion-page article>.article {
    border: 1px solid #d3d5d7;
    margin-bottom: 20px
  }
}

.channel-page article>.article .caption p,
.subChannel-page article>.article .caption p,
.channel-fashion-page article>.article .caption p,
.subChannel-fashion-page article>.article .caption p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical
}

.pagination {
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0;
  text-align: center
}

.pagination li {
  display: inline-block;
  font-size: 1rem;
  vertical-align: middle
}

.pagination li+li {
  margin-left: 5px
}

.pagination li a,
.pagination li span {
  display: block;
  width: 30px;
  height: 30px;
  padding: 4px 0;
  color: #171717;
  text-align: center;
  line-height: 22px
}

.pagination li:hover a,
.pagination li:hover span,
.pagination li.active a,
.pagination li.active span {
  color: #fff;
  background-color: #939ea7
}

.pagination li.prev a,
.pagination li.prev span,
.pagination li.next a,
.pagination li.next span,
.pagination li.disabled a,
.pagination li.disabled span {
  background-color: rgba(0, 0, 0, 0)
}

.pagination li.prev a,
.pagination li.prev span {
  background-image: url("../img/prev-arrow-b.gif");
  background-position: center center;
  background-repeat: no-repeat
}

.pagination li.prev:hover a,
.pagination li.prev:hover span {
  background-position: left center
}

.pagination li.next a,
.pagination li.next span {
  background-image: url("../img/next-arrow-b.gif");
  background-position: center center;
  background-repeat: no-repeat
}

.pagination li.next:hover a,
.pagination li.next:hover span {
  background-position: right center
}

@media screen and (min-width: 768px) {

  .mgz-index-page article,
  .single-magz-page article {
    width: 650px
  }
}

.mgz-index-page .mgzIndexList {
  margin: 0 -10px;
  padding: 0;
  list-style: none;
  font-size: 0
}

.mgz-index-page .mgzIndexList>li {
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 20px;
  vertical-align: top
}

@media screen and (min-width: 414px) {
  .mgz-index-page .mgzIndexList>li {
    display: inline-block;
    width: 50%
  }
}

@media screen and (min-width: 590px) {
  .mgz-index-page .mgzIndexList>li {
    width: 33.333%
  }
}

@media screen and (min-width: 768px) {
  .mgz-index-page .mgzIndexList>li {
    width: 25%
  }
}

.mgz-index-page .mgzIndexList>li .pic>a::before {
  padding-top: 138.53211%
}

@media screen and (max-width: 413px) {
  .mgz-index-page .mgzIndexList>li .pic {
    display: inline-block;
    width: 90px;
    vertical-align: top
  }
}

.mgz-index-page .mgzIndexList>li .pic img {
  border: 1px solid #eee
}

.mgz-index-page .mgzIndexList>li .mgzIndexListTxt {
  position: relative;
  padding-top: 1.5rem;
  font-size: .875rem
}

@media screen and (min-width: 414px) {
  .mgz-index-page .mgzIndexList>li .mgzIndexListTxt {
    margin-top: 10px
  }
}

@media screen and (max-width: 413px) {
  .mgz-index-page .mgzIndexList>li .mgzIndexListTxt {
    display: inline-block;
    width: calc(100% - 100px);
    padding-left: 1rem;
    vertical-align: top
  }
}

.mgz-index-page .mgzIndexList>li .mgzIndexListTxt p.mgzNb {
  position: absolute;
  top: 0;
  left: 1rem;
  margin-top: 0;
  margin-bottom: 0;
  color: #d60c18
}

@media screen and (min-width: 414px) {
  .mgz-index-page .mgzIndexList>li .mgzIndexListTxt p.mgzNb {
    left: 0
  }
}

.mgz-index-page .mgzIndexList>li .mgzIndexListTxt time {
  position: absolute;
  top: 0;
  color: #939ea7
}

@media screen and (min-width: 414px) {
  .mgz-index-page .mgzIndexList>li .mgzIndexListTxt time {
    right: 0
  }
}

@media screen and (max-width: 413px) {
  .mgz-index-page .mgzIndexList>li .mgzIndexListTxt time {
    left: 5em
  }
}

.mgz-index-page .mgzIndexList>li .mgzIndexListTxt a {
  display: block;
  color: #171717
}

.mgz-index-page .mgzIndexList>li .mgzIndexListTxt a:hover {
  color: #d60c18
}

.mgz-index-page .mgzIndexList>li .mgzIndexListTxt a h2 {
  margin-top: 0;
  font-size: 1.125rem;
  line-height: 1.25;
  font-weight: normal
}

.single-magz-page .mgzIndex {
  font-size: 0
}

.single-magz-page .mgzIndex .pic {
  display: inline-block;
  width: 45%;
  vertical-align: top
}

@media screen and (min-width: 768px) {
  .single-magz-page .mgzIndex .pic {
    width: 35%
  }
}

.single-magz-page .mgzIndex .pic img {
  width: 100%;
  border: 1px solid #eee
}

.single-magz-page .mgzIndex .txt {
  display: inline-block;
  width: 55%;
  padding-left: 10px;
  vertical-align: top
}

@media screen and (min-width: 768px) {
  .single-magz-page .mgzIndex .txt {
    width: 65%;
    padding-left: 20px
  }
}

.single-magz-page .mgzIndex .txt h1 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2rem;
  font-weight: normal;
  line-height: 1.25
}

.single-magz-page .mgzIndex .txt p {
  margin-top: 0;
  font-size: 1rem
}

.single-magz-page .mgzIndex .txt p .mgzNum {
  color: #d60c18
}

.single-magz-page .mgzIndex .txt p time {
  padding-left: 1rem;
  color: #939ea7
}

.single-magz-page .mgzIndex .txt .btnGroup {
  display: block
}

.single-magz-page .mgzIndex .txt .btnGroup a {
  width: 100%;
  display: inline-block;
  padding: .7rem 1.4rem;
  min-width: 120px;
  color: #fff;
  font-size: 1rem;
  font-weight: 400;
  text-align: center;
  line-height: 1;
  background-color: #6b7780;
  border: 1px solid #6b7780
}

.single-magz-page .mgzIndex .txt .btnGroup a:hover {
  background-color: #5f6a72;
  border-color: #5f6a72
}

@media screen and (min-width: 768px) {
  .single-magz-page .mgzIndex .txt .btnGroup a {
    width: 200px
  }
}

.single-magz-page .mgzIndex .txt .btnGroup a+a {
  margin-top: 10px
}

@media screen and (max-width: 767px) {
  .single-magz-page .articleGroup {
    margin-top: 1.5rem
  }
}

.single-magz-page .articleGroup .h2 {
  font-weight: normal
}

@media screen and (max-width: 767px) {
  .single-magz-page .articleGroup .h2 {
    padding: 10px;
    font-size: 1.125rem;
    line-height: 1.25;
    background-color: #d3d5d7
  }
}

@media screen and (min-width: 768px) {
  .single-magz-page .articleGroup .h2 {
    padding-top: 1em;
    padding-bottom: 0;
    font-size: 1.5rem
  }
}

.single-magz-page .articleGroup .subArticle p {
  color: #48545d
}

@media screen and (max-width: 767px) {
  .single-magz-page .articleGroup .subArticle {
    margin-top: 0;
    margin-bottom: 0;
    border-top-width: 0
  }

  .single-magz-page .articleGroup .subArticle .pic {
    display: none
  }

  .single-magz-page .articleGroup .subArticle .caption .channelTitle {
    display: none
  }

  .single-magz-page .articleGroup .subArticle .caption h3 a {
    font-size: 1.25rem
  }

  .single-magz-page .articleGroup .subArticle .caption p {
    display: -webkit-box !important
  }
}

@media screen and (min-width: 768px) {
  .single-magz-page .articleGroup .subArticle {
    padding: 0;
    margin-bottom: 1.5rem
  }
}

.saleskit-page>section h1 {
  font-size: 2em;
  text-align: center
}

.saleskit-page section.header {
  margin-bottom: 3em
}

.saleskit-page section.intro .container {
  position: relative;
  padding-top: 20px;
  padding-bottom: 40px;
  border-bottom: 1px dotted #939ea7
}

@media screen and (min-width: 768px) {
  .saleskit-page section.intro .container {
    padding-left: 160px
  }
}

.saleskit-page section.intro .container .h3 {
  padding-left: 10px;
  font-size: 1.125em;
  line-height: 1.5;
  border-left: 2px solid #d60c18
}

.saleskit-page section.intro .container .h3 i {
  display: block;
  padding: 2.5px 0;
  color: #9d0505;
  font-size: .775em;
  font-style: normal;
  font-weight: normal
}

.saleskit-page section.intro .container p {
  color: #6b7780
}

.saleskit-page section.intro .container .btn-block {
  font-size: 0
}

@media screen and (max-width: 767px) {
  .saleskit-page section.intro .container .btn-block {
    padding-top: 1.5rem;
    text-align: center
  }
}

.saleskit-page section.intro .container .btn-block a {
  display: inline-block;
  padding: .5rem 1rem;
  min-width: 120px;
  color: #d60c18;
  font-size: 1rem;
  font-weight: 400;
  text-align: center;
  line-height: 1;
  border: 1px solid #d60c18;
  background-color: #fff
}

.saleskit-page section.intro .container .btn-block a:hover {
  color: #be0b15;
  border-color: #be0b15
}

@media screen and (max-width: 767px) {
  .saleskit-page section.intro .container .btn-block a {
    min-width: 210px
  }
}

@media screen and (min-width: 768px) {
  .saleskit-page section.intro .container .btn-block a+a {
    margin-left: 1rem
  }
}

@media screen and (max-width: 767px) {
  .saleskit-page section.intro .container .btn-block a+a {
    margin-top: 10px
  }
}

.saleskit-page section.intro .container img {
  margin: auto
}

@media screen and (min-width: 768px) {
  .saleskit-page section.intro .container img {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 120px;
    border: 1px solid #eee
  }
}

@media screen and (max-width: 767px) {
  .saleskit-page section.intro .container img {
    max-width: 220px;
    margin-top: 1rem
  }
}

.saleskit-page section.connect {
  padding-top: 40px;
  padding-bottom: 40px
}

.saleskit-page section.connect .container>ul {
  margin: 0;
  padding: 0;
  list-style: none
}

.saleskit-page section.connect .container>ul .h4 {
  padding-left: 10px;
  margin-bottom: 10px;
  line-height: 1.15;
  border-left: 2px solid #d60c18
}

.saleskit-page section.connect .container>ul ul {
  margin: 0;
  padding: 0 0 0 40px;
  list-style: disc
}

.saleskit-page section.connect .container>ul p {
  margin-top: 0;
  margin-bottom: 0
}

.saleskit-page section.connect .container>ul>li {
  margin-bottom: 1.5em
}

.saleskit-page section.connect .container>ul>li>p {
  padding-left: 15px
}

.tls-page h1,
.tls-page h5 {
  text-align: center
}

.tls-page h1 {
  margin-bottom: 0
}

.tls-page h5 {
  font-size: 1rem
}

.tls-page .chapter {
  margin-top: 3em
}

.tls-page .chapter h3 {
  margin-bottom: 0
}

.author-page .authorBlock {
  display: -ms-flexbox;
  display: flex;
  margin: 40px 0
}

.author-page .authorBlock .authorPhoto {
  position: relative;
  width: 80px;
  height: 80px;
  margin-right: 20px;
  border-radius: 50%;
  overflow: hidden
}

@media screen and (min-width: 768px) {
  .author-page .authorBlock .authorPhoto {
    margin-left: 20px
  }
}

.author-page .authorBlock .authorPhoto img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto
}

.author-page .authorBlock .authorIntroduction {
  width: calc(100% - 105px)
}

@media screen and (min-width: 768px) {
  .author-page .authorBlock .authorIntroduction {
    width: calc(100% - 125px)
  }
}

.author-page .authorBlock h1 {
  margin-top: 0;
  margin-bottom: 0;
  margin-right: .5em
}

.author-page .authorBlock h1,
.author-page .authorBlock .followBlock {
  display: inline-block;
  vertical-align: middle
}

.author-page .authorBlock #follow_msg {
  display: table;
  padding: .7em 1.4em;
  min-width: 120px;
  color: #fff;
  font-size: .875em;
  font-weight: 400;
  text-align: center;
  line-height: 1;
  background-color: #939ea7;
  border: 1px solid #939ea7;
  min-width: auto;
  cursor: pointer
}

.author-page .authorBlock #follow_msg:hover {
  background-color: #85919c;
  border-color: #85919c
}

.author-page .authorBlock .authorTxt {
  margin-top: 1em
}

@media screen and (max-width: 767px) {
  .author-page .articleGroup .subArticle .pic {
    display: none
  }

  .author-page .articleGroup .subArticle .caption {
    border-width: 1px
  }

  .author-page .articleGroup .subArticle .caption p {
    display: -webkit-box !important
  }
}

.author-page .lightbox {
  position: relative;
  z-index: 5
}

.author-page .lightbox.statusA .lightboxbg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #171717;
  opacity: .4
}

.author-page .lightbox.statusA .lightBoxContnt {
  position: fixed;
  top: 50%;
  left: 50%;
  max-width: 400px;
  width: calc(100% - 30px);
  padding: 30px;
  background: #fff;
  transform: translate(-50%, -50%)
}

.author-page .lightbox.statusA .lightBoxContnt .close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 1rem;
  padding: 10px;
  cursor: pointer
}

.author-page .lightbox.statusA .lightBoxContnt .close::before {
  content: "\e92e";
  display: block;
  font-family: "cw_icon_new";
  line-height: 1
}

@media screen and (max-width: 1023px) {
  .author-page .lightbox.statusA .lightBoxContnt .close {
    font-weight: bold
  }
}

@media screen and (min-width: 1024px) {
  .author-page .lightbox.statusA .lightBoxContnt .close {
    top: 10px;
    right: 10px;
    font-size: 1.5rem
  }
}

.author-page .lightbox.statusA .lightBoxContnt>p {
  margin: 0 0 24px;
  padding: 0 30px;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: center
}

.author-page .lightbox.statusA .lightBoxContnt>.btn a {
  display: table;
  padding: .725rem 1.45rem;
  min-width: 120px;
  color: #fff;
  font-size: 1rem;
  font-weight: 400;
  text-align: center;
  line-height: 1;
  background-color: #d60c18;
  border: 1px solid #d60c18;
  margin: auto
}

.author-page .lightbox.statusA .lightBoxContnt>.btn a:hover {
  background-color: #be0b15;
  border-color: #be0b15
}

.author-page .lightbox.statusA .lightBoxContnt>span {
  display: block;
  padding-top: 10px;
  text-align: center
}

.author-page .lightbox.statusA .lightBoxContnt>span a {
  color: #003a9f;
  text-decoration: underline
}

.author-page .lightbox.statusA .lightBoxContnt>span a:hover {
  color: #d60c18
}

.author-page .lightbox.statusB {
  position: fixed;
  top: 50%;
  left: 50%;
  max-width: 400px;
  width: calc(100% - 30px);
  padding: 30px;
  color: #fff;
  font-size: 1.125rem;
  line-height: 1.25;
  background-color: #48545d;
  transform: translate(-50%, -50%);
  z-index: 10
}

.author-page .lightbox.statusB p {
  margin: 0
}

iframe[src*="etu.cw.com.tw"] {
  bottom: 0
}

.newsletter__subscribe {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 15px 0;
  color: #171717;
  background-color: #eee
}

@media screen and (min-width: 768px) {
  .newsletter__subscribe {
    margin: 20px 0
  }
}

.newsletter__subscribe>* {
  -ms-flex-item-align: auto;
  align-self: auto
}

.newsletter__subscribe>div {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-align: center;
  align-items: center
}

.newsletter__subscribe i.icon-mailing {
  font-size: 2.5rem
}

.newsletter__subscribe .text {
  padding: 0 20px 0 0
}

@media screen and (min-width: 768px) {
  .newsletter__subscribe .text {
    padding: 0 20px
  }
}

/*# sourceMappingURL=main.min.css.map */