@charset "UTF-8";

.bg_hlt{background-image: linear-gradient(#3791d0,#3791d0); background-size: 0% 100%; background-position: 0% 0%; background-repeat: no-repeat; transition:1.8s;padding: 6px;}
.bg_hlt.active{background-size:100% 100%;color: #fff;}
sup {color: #09adff;font-weight: 400;margin-right: 3px;}
.tdu {text-decoration: underline;text-decoration-thickness: 1px;text-underline-offset: 7px;}
hr.line {border-style: dashed;color: #a3a3a3;width: 100%;margin-bottom: 40px;}

#contents {padding-top: 80px;transition: all .8s;}
#contents.zoom {font-size: 1.09em;transition: all .8s;}
.dark_active {background: #252525;transition: background .8s;}
.dark_active .cont_title_wrap h2.tit2, .dark_active .row .full .bq .writer {color: #fff !important;}
.dark_active .cont_title_wrap h2.tit2 span.line {  -webkit-text-stroke: 1px #fff !important;}
.dark_active .cont_title_wrap strong, .dark_active #contents.start .cont_title_wrap .author {color: #f1f1f1;}
.dark_active .sub_txt strong {color: #fff !important;}
.dark_active .sub_con .row h3 {color: #78c4f9 !important;}
.dark_active .sub_con .row h3 .fwn {color: #fff !important;}
.dark_active .button_wrap button a, .dark_active .sidetit::before {color: #78c4f9;}
.dark_active .button_wrap .prev_btn::after {border-left: 2px solid #78c4f9;border-bottom: 2px solid #78c4f9;}
.dark_active .button_wrap .next_btn::after {border-right: 2px solid #78c4f9;border-top: 2px solid #78c4f9;}
.dark_active .button_wrap .prev_btn::before, .dark_active .button_wrap .next_btn::before {border-top: 2px solid #78c4f9;}
.dark_active .row .bq .writer, .dark_active .row .bq_b .writer, .dark_active .sidetit span {color: #fff;}
.dark_active .button_wrap {border-top: 1px dotted #737373;}
.dark_active .sidetit {background: #000;}
.dark_active .sidetit span {border: 2px solid #000;}
.dark_active .txtwave span.q:nth-child(1) {-webkit-text-stroke: 2px #78c4f9;}
.dark_active .txtwave span.q:nth-child(2) {color: #78c4f9;}
.dark_active #contents.start .cont_title_wrap strong {color: #f1f1f1 !important;}
.dark_active .tdu, .dark_active .row .bq .txt {color: #b1b1b1 !important;}
.dark_active .bq__dot .small {color: #b1b1b1 !important;}
.dark_active .sub_con .vote_wrap .row h3.round_tit {color: #fff !important;}
.dark_active .box_line {color: #78c4f9 !important;}
.dark_active .tit_l, .dark_active .sub_con .row h3.roundbox {color: #fff;}
.dark_active .issue_check .section9 .notice_box::after {border: 2.1rem solid #1e1f21;border-left: 2.1rem solid #E5E5E5;border-bottom: 2.1rem solid #E5E5E5;}
.dark_active .sub_con .row p, .dark_active .row .step_tit, .dark_active .row .step, .dark_active .archive .row h4, .dark_active .archive .row h5, .dark_active .archive .row h6, .dark_active .tab li a {color: #e3e3e3;}
.dark_active .tab li a:hover, .dark_active .tab li a:active {background: transparent;}
.dark_active .sub_con .row .source p  {color: #555;}
.dark_active .sub_txt i, .dark_active .sub_con .row p.mark, .dark_active .with_wrap .swiper-wrapper .item:hover .month, .dark_active .with_wrap .swiper-wrapper .item:focus .month, .dark_active .sub_con .row .box_bg {color: #fff;}
.dark_active .with_wrap .swiper-wrapper .item:hover .month:before, .dark_active .with_wrap .swiper-wrapper .item:focus .month:before {background: #fff;}
.dark_active .row .full .bq_svg .txt {color: #fff;}
.dark_active .s2_04 .up {color: #fff;}
.dark_active .s3_02 img {filter: invert(1);}

.sub_txt { max-width: 800px; margin: 0 auto; text-align: center; }
.sub_txt strong {font-size: 1.75em;font-weight: 400;line-height: 1.4;}
.sub_txt i {margin-bottom: 20px;}
.sub_con {max-width: 1280px;margin: 50px auto 0;padding: 0 1rem;clear: both;position: relative;}
.sub_con .row h3 {font-size: 1.6em;color: #2f2f2f;}
.sub_con .row h3.round_tit {font-size: 2.3em;color: #2f2f2f;}
.sub_con .row h3.round_tit .round {font-size: .7em;color: #fff;background: #bf8c63;font-weight: 400;border-radius: 100px;padding: 7px 20px 6px;vertical-align: middle;}
.sub_con .row p { font-size: 1.3em; }
.sub_con .row .sidetit {color: #fff;}
.sub_con .row p.caption {font-size: 1.25em;padding-top: 10px;line-height: 1.2;}
.sub_con .sub_txt .row p {font-size: 1.15em;word-break: keep-all;}
.sub_con .youtube {position: relative;max-width: 1024px;padding-bottom: 48%;margin: 0 auto;}
.sub_con .half .youtube {padding-bottom: 70%;}
.sub_con .youtube iframe {position: absolute;width: 100%;height: 100%;}
.cont_title_wrap {font-family: 'TheJamsil', Malgun Gothic, AppleSDGothicNeo-Regular, sans-serif;position: absolute;top: 99px;left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);bottom: 35rem;min-height: 260px;width: 100%;}
.cont_title_wrap .category { color: #09adff; font-size: 3.4rem; font-weight: 600; line-height: 1; opacity: 0; -webkit-transition: 0.4s; transition: 0.4s; }
.cont_title_wrap .tit { font-size: 7rem; font-weight: 700; line-height: 1.3; color: #fff; background-position: 0 100%; background-size: 100% 6px; background-repeat: no-repeat; display: inline; -webkit-transform: translateY(40px); transform: translateY(40px); opacity: 0; -webkit-transition: 0.6s 0.4s; transition: 0.6s 0.4s;}
.cont_title_wrap .tit2 .fz4r {font-size: 4.5rem;}
.cont_title_wrap .tit2 {font-size: 6.9rem;font-weight: 700;line-height: 1.3;display: inline;-webkit-transform: translateY(40px);transform: translateY(40px);opacity: 0;-webkit-transition: 0.6s 0.4s;transition: 0.6s 0.4s;text-align: center;}
.cont_title_wrap strong {font-size: 2.9rem;font-weight: 300;line-height: 1.3;display: inline;-webkit-transform: translateY(40px);transform: translateY(40px);opacity: 0;-webkit-transition: 0.8s 0.6s;transition: 0.8s 0.6s;text-align: center;}
.cont_title_wrap .tit3 { font-size: 5.2rem; font-weight: 700; line-height: 1.3; color: #fff; background-position: 0 100%; background-size: 100% 6px; background-repeat: no-repeat; display: inline; -webkit-transform: translateY(40px); transform: translateY(40px); opacity: 0; -webkit-transition: 0.6s 0.4s; transition: 0.6s 0.4s;}
.cont_title_wrap .author {font-size: 2rem;font-weight: 300;opacity: 0;-webkit-transition: 0.4s 1s;transition: 0.4s 1s;position: absolute;bottom: 0;text-align: center;}
#sub-visual {height: 430px;max-width: 1450px;position: relative;margin: 0 auto;}
#sub-visual::before {width: 100vw;max-width: 1450px;border-bottom-left-radius: 50px;border-bottom-right-radius: 50px;}
#contents.start .cont_title_wrap .category { opacity: 1; }
#contents.start .cont_title_wrap .tit, #contents.start .cont_title_wrap .tit2, #contents.start .cont_title_wrap .tit3 {-webkit-transform: translateY(0);transform: translateY(0);opacity: 1;margin-top: 15px;display: block;}
#contents.start .cont_title_wrap .tit span, #contents.start .cont_title_wrap .tit3 span {color: transparent;-webkit-text-stroke: 1px #000;}
#contents.start .cont_title_wrap .tit2 .line {color: transparent;-webkit-text-stroke: 1px #000;}
#contents.start .cont_title_wrap .author {opacity: 1;width: 100%;bottom: -40%;}
#contents.start .cont_title_wrap strong {-webkit-transform: translateY(0);transform: translateY(0);opacity: 1;margin-top: 15px;display: block;}

/* grid */
#contents .row {display: flex; justify-content: space-evenly;}
.column.full {width: calc(100% - 30px);}
.column.half {width: calc(50% - 30px);}
.column.one-third {width: calc(33.5% - 30px);}
.column.one4 {width: calc(25.3% - 30px);}
.column.one {width: calc(30% - 30px);}
.column.one2 {width: calc(70% - 30px);}
.contwrap::after, .row::after {clear: both;}
.contwrap {margin-bottom: 50px;}
.row {margin-bottom: 30px;}
.flex_mod {display: flex;justify-content: space-around;}
.flex_mod>div:first-child {width: calc(20% - 20px);}
.flex_mod>div:last-child {width: calc(80% - 20px);}
.flex_mod div .img {margin: 25px auto;display: block;}
.sidetit {position: relative;font-size: 1.4em;line-height: 1.2;color: #fff;display: block;background: #2089d3;padding: 18px;border-bottom-right-radius: 30px;border-top-right-radius: 30px;border-bottom-left-radius: 30px;}
.sidetit span {color: #121212;display: block;border-bottom-right-radius: 30px;padding: 35px 13px 20px 13px;border-bottom-left-radius: 30px;border: 2px solid #2089d3;position: absolute;left: 9%;top: 90%;}
.sidetit::after {content: 'Q';display: block;color: #fff;font-weight: 600;font-size: 5em;position: absolute;right: 0;top: -40%;opacity: 0.9;}
.sidetit::before {content: '5문5답';display: block;color: #3791d0;font-weight: 500;position: absolute;left: -2.2em;rotate: -90deg;top: 1em;font-size: 1.2em;}
.txtwave {position: relative;display: inline-block;margin-right: 10px;}
.txtwave span.q {color: #fff;font-size: 2.5em;position: relative;}
.txtwave span.q:nth-child(1) {color: transparent;-webkit-text-stroke: 2px #3791d0;}
.txtwave span.q:nth-child(2) {color: #3791d0;animation: waves 5s ease-in-out infinite;position: absolute;left: 0;}
@keyframes waves {
  0%,
  100% {
    clip-path: polygon(
      0% 45%,
      16% 44%,
      33% 50%,
      54% 60%,
      70% 61%,
      84% 59%,
      100% 52%,
      100% 100%,
      0% 100%
    );
  }

  50% {
    clip-path: polygon(
      0% 60%,
      15% 65%,
      34% 66%,
      51% 62%,
      67% 50%,
      84% 45%,
      100% 46%,
      100% 100%,
      0% 100%
    );
  }
}

.imgwrap {margin: 0 auto 30px;}
.sub_con .interview h3 {font-size: 1.9em;}
.profile {-webkit-transform: translateX(240px);transform: translateX(240px);opacity: 0;-webkit-transition: 0.6s 0.4s;transition: 0.6s 0.4s;}
#contents.start .cont_title_wrap .profile {position: absolute;right: 0;top: 0;opacity: 1;-webkit-transform: translateX(0);transform: translateX(0);border-radius: 10%;overflow: hidden;}
#contents .profile_m {display: none;}
.row .step {text-align: left;}
.row .step_tit {display: block;text-align: left;font-size: 1.8em;font-weight: 400;border-bottom: 1px dashed #8d8d8d;margin-bottom: 10px;}
.row .step li {font-size: 1.75em;font-weight: 200;}
.tac {text-align: center;}
.fsi {font-style: italic;}
.img {display: block;}
.mark {background: #f79a84;color: #fff;display: inline-block;padding: 5px 7px;line-height: 1.2;}
#contents .mb0 {margin-bottom: 6px;}
.tab {list-style: none; margin: 0px; padding: 0px; overflow: hidden;border-bottom: 1px solid #0194e1;}
.tab li {float: left;width: 25%;text-align: center;}
.tab li a {display: block;color: black;text-align: center;text-decoration: none;padding: 10px 12px;font-size: 1.4em;}
.tab li a:hover, .tab li a:active {background: #eee;}
.tabcont {display: none;padding: 6px 12px;color:black;}
ul.tab li.on, .tab li.on a:hover, .tab li.on a:active {background-color: #0194e1;}
ul.tab li.on a {color: #fff;}
.tabcont.on {display: block;}
.row .point {display: block; font-size: 0.8em; line-height: 1.5; text-align: left; border-top: 1px solid rgb(133, 133, 133); padding-top: 10px; margin-top: 20px; }
.row .box_bg { background: #7f7e5b; padding: 5px 10px; color: #fff; margin-top: 10px; font-size: 1.2em; }
.row .box_line {border: 1px solid #ef8242; padding: 20px; box-shadow: 5px 10px 0px #ef8242;}
.sub_con .row .roundbox {font-size: 1.8em; font-weight: 700; color: #ffffff; background: #67a2e6; padding: 2px 23px; border-radius: 35px; display: inline-block; margin-bottom: 15px;}
.row .bq {margin: 1em;}
.row .half:first-child .bq::before {content:'';display: block;background: url(../img/common/bq_ico.png);width: 60px;height: 60px;}
.row .half:last-child .bq::before {content:'';display: block;background: url(../img/common/bq_ico.png);width: 60px;height: 60px;rotate: 180deg;float: right;}
.row .half:first-child .bq_b::before {content:'';display: block;background: url(../img/common/bq_balloon.png);width: 60px;height: 58px;margin-bottom: 10px;}
.row .half:last-child .bq_b::before {content:'';display: block;background: url(../img/common/bq_balloon.png);width: 60px;height: 58px;float: right;margin-bottom: 10px;}
.row .bq .txt {margin: 0;font-size: 1.35em;word-break: keep-all;text-decoration: underline;text-decoration-thickness: 1px;text-underline-offset: 7px;display: inline-block;margin-bottom: 10px;}
.row .bq .writer {color: #212121;display: block;text-align: right;font-size: 1.1em;}
.row .bq_b .txt {margin: 0;font-size: 1.35em;word-break: keep-all;display: inline-block;margin-bottom: 10px;}
.row .bq_b .writer {color: #212121;display: block;text-align: right;font-size: 1.1em;}
.row .full .bq {margin: 1em;border-top: 5px solid #a2dbdb;border-bottom: 5px solid #a2dbdb;position: relative;}
.row .full .bq::before {content: '';display: block;background: url(../img/common/bq_ico.png);width: 60px;height: 60px;z-index: 10;margin: -40px 0 0;}
.row .full .bq .txt {padding: 20px;text-decoration: none;margin: 0;}
.row .full .bq .txt::after {content: '';display: block;background: url(../img/common/bq_ico.png);width: 60px;height: 60px;rotate: 180deg;z-index: 10;position: absolute;z-index: 10;right: -19px;bottom: -42px;}

.row .bq_svg .txt {margin: 0;font-size: 1.35em;word-break: keep-all;text-decoration: underline;text-decoration-thickness: 1px;text-underline-offset: 7px;display: inline-block;margin-bottom: 10px;}
.row .full .bq_svg {margin: 1em;position: relative;}
.row .full .bq_svg::before {content: '';display: block;background: url(../img/common/bq_ico.svg);width: 50px;height: 41px;z-index: 10;margin: -40px 0 0;background-size: 100%;position: absolute;z-index: 10;left: 0;top: 20px;}
.row .full .bq_svg .txt {padding: 20px;text-decoration: none;margin: 0;line-height: 1.5;}
.row .full .bq_svg .txt::after {content: '';display: block;background: url(../img/common/bq_ico.svg);width: 50px;height: 41px;rotate: 180deg;z-index: 10;position: absolute;z-index: 10;right: 0;bottom: -20px;background-size: 100%;}

.s2_01 .row .full .bq_svg::before {content: '';display: block;background: url(../img/common/bq_ico_1.svg);width: 50px;height: 41px;z-index: 10;margin: -40px 0 0;background-size: 100%;position: absolute;z-index: 10;left: 0;top: 20px;}
.s2_01 .row .full .bq_svg .txt::after {content: '';display: block;background: url(../img/common/bq_ico_1.svg);width: 50px;height: 41px;rotate: 180deg;z-index: 10;position: absolute;z-index: 10;right: 0;bottom: -20px;background-size: 100%;}
.s2_04 hr {border: 2px dashed #ffbe47;margin: 50px auto;width: 90%;}
.s2_04 .tit {color: #ffbe47;}
.s2_04 .up {font-size: 1.65em;}

.row .full .bq .writer {display: block;font-size: 1.1em;color: #00abac;text-align: right;margin-bottom: 20px;}
.sub_con .row p span.box {color: #fff;background: #46a978;padding: 5px 10px 5px 8px;}
.bq__dot::before {content: "··"; display: block; margin-bottom: 10px;}
.bq__dot::after {content: "··"; display: block; margin-top: 10px;}
.bq__dot {text-align: center;color: #2c87c9;font-weight: 500;line-height: 1.5;font-size: 1.7em;margin: 0 auto;font-weight: 500;}
.bq__dot .small {font-size: .8em;}
.sub_con .vote_wrap {border: 10px solid #17b9ac;border-top-left-radius: 80px;border-top-right-radius: 80px;background: #fff;}
.sub_con .vote_wrap .row h3 {background: #17b9ac;color: #fff;text-align: center;}
.sub_con .vote_wrap .row p {background: #17b9ac;color: #fff;text-align: center;padding-bottom: 20px;}
.sub_con .vote_wrap .row .vote_list {background: #fff;color: #282828;text-align: justify;padding: 20px 20px 0;word-break: keep-all;}
.sub_con .vote_wrap .row .vote_list:nth-child(n+4) {word-break: break-all;}
.sub_con .vote_wrap .row .vote_list span {background: #17b9ac;color: #fff;padding: 5px 12px 4px 10px;border-radius: 20px;}
.sub_con .vote_wrap .row h3.round_tit {padding: 20px 0 10px 0;border-top-left-radius: 65px;border-top-right-radius: 65px;}
.sub_con .vote_wrap .column.full {width: 100%;}
.sub_con .vote_wrap .row .other_list {font-size: 1.3em;padding: 20px 20px 0;display: flex;justify-content: space-around;background: #fff;}
.sub_con .vote_wrap .row .other_list li {display: flex;align-items: center;flex-direction: column;align-content: center;line-height: 1.2;}
.sub_con .vote_wrap .row .other_list img {margin-bottom: 10px;}
.sub_con .vote_wrap .row .other_list .num {font-weight: 500;}
.button_wrap {margin: 40px 0 10px;text-align: right;border-top: 1px dotted #dbdbdb;padding-top: 15px;}
.button_wrap button { width: 100px; text-align: center; padding: 10px 0; background: none; border: none; display: inline-block; position: relative; transition: all 0.4s; }
.button_wrap button a { font-size: 18px; color: #666; width: 100%; height: 100%; display: block; }
.button_wrap button:before, .button_wrap button:after { position: absolute; content: ''; z-index: 1; transition: all 0.4s; }
.button_wrap button:hover a {color: #f1732a;font-weight: 500;}
.button_wrap span { font-size: 20px; color: #ddd; font-weight: normal; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.button_wrap .prev_btn { transition: left, color 0.4s; }
.button_wrap .prev_btn::after {position: absolute;content: '';transform: rotate(45deg);border-left: 2px solid #666;border-bottom: 2px solid #666;width: 8px;height: 8px;left: 2px;top: 16px;}
.button_wrap .prev_btn::before {position: absolute;content: '';border-top: 2px solid #666;width: 16px;height: 8px;left: 2px;top: 19px;}
.button_wrap .prev_btn:hover::after, .button_wrap .prev_btn:hover::before {left: -2px;border-color: #f1732a;}
.button_wrap .next_btn::after {transform: rotate(45deg);border-right: 2px solid #666;border-top: 2px solid #666;width: 8px;height: 8px;right: 2px;top: 16px;}
.button_wrap .next_btn::before {border-top: 2px solid #666;width: 16px;height: 8px;right: 2px;top: 19px;transition: all 0.4s;}
.button_wrap .next_btn:hover::after, .button_wrap .next_btn:hover::before {right: -2px;border-color: #f1732a;}


.s3_02 h3.ani_tit {line-height: 1.3;}
.s3_03 .button::before, .s3_03 .button::after {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.s3_03 .button {pointer-events: auto;cursor: pointer;background: #e7e7e7;border: none;/* padding: 1.5rem 3rem; */margin: 0;font-family: inherit;font-size: inherit;position: relative;display: inline-block;}
.s3_03 .button--mimas {text-transform: uppercase;letter-spacing: 0.05rem;font-weight: 500;font-size: 0.85rem;border-radius: 0.5rem;overflow: hidden;color: #fff;background: #f1732a;}
.s3_03 .button--mimas::before {content: '';background: #17b9ac;width: 120%;left: -10%;transform: skew(30deg);transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);}
.s3_03 .button--mimas:hover::before { transform: translate3d(100%, 0, 0); }
.s3_03 .button--mimas a {position: relative;/* mix-blend-mode: difference; */color: #fff;display: block;padding: 1.5rem 3rem;}

.s3_01 .button::before, .s3_03 .button::after {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.s3_01 .button {pointer-events: auto;cursor: pointer;background: #e7e7e7;border: none;/* padding: 1.5rem 3rem; */margin: 0;font-family: inherit;font-size: inherit;position: relative;display: inline-block;}
.s3_01 .button--mimas {text-transform: uppercase;letter-spacing: 0.05rem;font-weight: 500;font-size: 0.85rem;border-radius: 0.5rem;overflow: hidden;color: #fff;background: #f1732a;}
.s3_01 .button--mimas::before {content: '';background: #17b9ac;width: 120%;left: -10%;transform: skew(30deg);transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);}
.s3_01 .button--mimas:hover::before { transform: translate3d(100%, 0, 0); }
.s3_01 .button--mimas a {position: relative;/* mix-blend-mode: difference; */color: #fff;display: block;padding: 1.5rem 3rem;}

.sub_con h3 div span.q {color: #fff;font-size: 60px;position: absolute;transform: translate(-50%, -95%);}
.sub_con h3 div span.q:nth-child(1) {color: transparent;-webkit-text-stroke: 3px #00af8f;}
.sub_con h3 div span.q:nth-child(2) {animation: animate 4s ease-in-out infinite;color: #00af8f;}

.sub_con .row h3 .fwn {font-weight: 300;font-size: .9em;}

@keyframes animate {
  0%,
  100% {
    clip-path: polygon(
      0% 45%,
      16% 44%,
      33% 50%,
      54% 60%,
      70% 61%,
      84% 59%,
      100% 52%,
      100% 100%,
      0% 100%
    );
  }

  50% {
    clip-path: polygon(
      0% 60%,
      15% 65%,
      34% 66%,
      51% 62%,
      67% 50%,
      84% 45%,
      100% 46%,
      100% 100%,
      0% 100%
    );
  }
}


@media (max-width: 1450px) {
  .sidetit::before {position: relative;left: 0;rotate: 0deg;top: 0;color: #fff;}
}

@media (max-width: 1280px) {
  .sns_box {right: 1rem;}
  .sns_box.fix {bottom: 10rem;}
}

@media (max-width: 1100px) {
  .tit_l br.none {display: block;}
  .tit_l br.bl {display: none;}
}

@media (max-width: 1024px) {
  .cont_title_wrap {-webkit-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);top: 50%;height: 100%;width: 100%;min-height: 100px;}
  .cont_title_wrap .category {margin-bottom: 1rem;}
  #contents.start .cont_title_wrap .author {bottom: 5%;}
}

@media (max-width: 960px) {
  .qbox_wrap {display: flex;flex-direction: column;align-items: center;}
  .flex_mod>div:first-child.qbox {width: 100%;margin-bottom: 10px;text-align: center;}
  .flex_mod>div.qbox {max-width: 310px;text-align-last: left;}
  .sidetit span {position: relative; left: 0; background: #fff; padding: 20px; margin-top: 20px; border-bottom-right-radius: 30px;border-bottom-left-radius: 30px; border-top-right-radius: 30px;}
  .sidetit::before {font-size: 1.5em;font-weight: 400;}
  .sidetit::after { content: 'Q'; display: block; color: #fff; font-weight: 600; font-size: 5em; position: absolute; right: 6%; top: 0; opacity: 0.9; }
}

@media (max-width: 768px) {
  .cont_title_wrap {width: calc(100% - 7rem);}
  .cont_title_wrap .tit2 {font-size: 6rem;word-break: keep-all;}
  .column.half {width: calc(51% - 30px);}
  .row.half {flex-wrap: wrap;gap: 30px;}
  .row.one3 {flex-wrap: wrap;gap: 30px;}
  .row.one4 {flex-wrap: wrap;gap: 30px;}
  .column.one4 {width: calc(50% - 30px);}
  .archive .source {padding: 25px;}
  .contwrap {margin-bottom: 35px;}
  .sub_con .youtube, .sub_con .half .youtube {padding-bottom: 60%;}
  .flex_mod {display: flex;flex-direction: column;align-items: center;}
  .flex_mod>div:first-child { width: 100%; margin-bottom: 10px; text-align: center; }
  .flex_mod>div:last-child { width: 100%; }
  .sub_con .row h3.round_tit {text-align: center;}
  .sub_con .row h3.round_tit .txt {display: block;}
  .sub_con .row h3.round_tit .round {display: inline-block;text-align: center;margin-bottom: 20px;}
  .flex_mod div h3 {line-height: 1.3;}
  .sub_con .vote_wrap .row .other_list {display: block;}
  .sub_con .vote_wrap .row .other_list li {display: flex;align-items: center;align-content: center;line-height: 1.2;flex-direction: row;gap: 10px;}
}

@media (max-width: 640px) {
  #sub-visual {width: 100%;}
}

@media (max-width: 600px) {
  .sub_con {margin: 20px auto 0;}
  .s2_02 #sub-visual {height: 180px;}
  #sub-visual {height: 340px;}
  .sub_txt strong {font-size: 23px;line-height: 1.4;}
  .tab {list-style: none; margin: 0px; padding: 0px; overflow: hidden;border-bottom: none;}
  .tab li {float: none;width: 100%;}
  .cont_title_wrap .tit, .cont_title_wrap .tit2, .cont_title_wrap .tit3 {font-size: 5rem;}
}

@media (max-width: 480px) {
  #sub-visual {height: 265px;}
  .cont_title_wrap .category {font-size: 3rem;}
  .cont_title_wrap strong {font-size: 2rem;padding: 0 10px;word-break: keep-all;}
  #contents .cont_title_wrap .author {font-size: 1.5rem;padding: 0 10px;word-break: keep-all;}
  #contents.start .cont_title_wrap .author {bottom: 2%;}
  .sub_con {margin: 10px auto 0;}
  .sub_con .row h3 {font-size: 1.5em;line-height: 1.3;margin-bottom: 7px;}
  .sub_con .row p {font-size: 1.1em;}
  .sub_con .event_info p {text-align: center;}
	.sub_txt .row p {text-align: center;}
  .row {margin-bottom: 20px;}
  .imgwrap {margin: 0 auto 20px;}
  .contents .row, .row.r12, .event_txt {flex-direction: column;gap: 20px;}
  .row.half {gap: 20px;}
  .row.one3 {gap: 20px;}
  .row.one4 {gap: 20px;}
  .column.full,
  .column.half,
  .column.one,
  .column.one2,
  .column.one-third,
  .column.one4 {width: 100%;}
  .row .caption {font-size: 0.9em;padding-top: 8px;text-align: center;}
  .row p {font-size: 1em;text-align: justify;}
  .row.tac .fwb {text-align: center;line-height: 1.2;margin-bottom: 8px;}
  .sns_box {height: 5rem;}
  .sns_box a {width: 5rem;height: 5rem;}
  .sns_box a i {margin-right: 3px;}
  .sns_box a.share {line-height: 5rem;font-size: 2.4rem;}
  .sns_box.fix {bottom: 7rem;}
  .with_wrap {padding: 4rem 0 1rem;}
  .with_wrap .tit_l {padding: 0 5rem;font-size: 3rem;}
  .with_wrap .item .desc {margin-top: 2rem;}
  .with_wrap .item .tit {font-size: 1.9rem;font-weight: 500;line-height: 1.2;word-wrap: break-word;height: auto;}  
  .with_wrap .item .month:before {top: 12px;width: 4px;height: 4px;}
  .cont_title_wrap {width: calc(100% - 1rem);}
  .cont_title_wrap .tit, .cont_title_wrap .tit2, .cont_title_wrap .tit3 {word-break: keep-all;}
  .cont_title_wrap .tit2, .cont_title_wrap .tit3, .cont_title_wrap .tit2 .fz4r {font-size: 3.5rem;}
  .contwrap {margin-bottom: 20px;}
  .sub_txt i {margin-bottom: 10px;font-size: 2.2em;}
  .sub_con .row p.caption {font-size: 1.1em;}
  .sub_txt strong {font-size: 20px;}
  .button_wrap {text-align: center;}
  .sub_con .sub_txt .row p {font-size: 16px;}
  .sub_con .row .sidetit {font-size: 1.3em;}
  .txtwave {display: block;margin-right: 0;}
  .row .bq .txt {font-size: 1.2em;}
  .sub_con .row h3.round_tit {font-size: 1.8em;} 
  .sub_con .row h3.round_tit .round {margin-bottom: 15px;}
  .bq__dot {font-size: 1.3em;}
  .sub_con .vote_wrap .row h3.round_tit {margin-bottom: 0;font-size: 1.5em;}
  .sub_con .vote_wrap .row .other_list {font-size: 1.1em;}
  .sub_con .vote_wrap .row .other_list li {margin-bottom: 20px;display: flex; align-items: center; align-content: center; line-height: 1.2; flex-direction: column; gap: 0;}
  .sub_con .vote_wrap .row .other_list li:last-child {margin-bottom: 0;}
  .sub_con .vote_wrap .row .other_list img {margin-bottom: 10px;}

  .row .full .bq_svg .txt {font-size: 1.2em;}
	#contents.start .cont_title_wrap .tit2 {-webkit-transform: translateY(20%);transform: translateY(20%);margin-top: 0;}
	#contents.start .cont_title_wrap strong {-webkit-transform: translateY(90%);transform: translateY(90%);margin-top: 0;}

  #contents.s1_01 .cont_title_wrap strong {-webkit-transform: translateY(150%);transform: translateY(150%);margin-top: 0;}
  #contents.s1_01 .cont_title_wrap .author {bottom: -2%;}

  #contents.s1_04.start .cont_title_wrap .tit2 {-webkit-transform: translateY(15%);transform: translateY(15%);margin-top: 0;}
  #contents.s1_04 .cont_title_wrap strong {-webkit-transform: translateY(30%);transform: translateY(30%);margin-top: 0;}
  #contents.s1_04 .cont_title_wrap .author {bottom: -10%;}
  .s1_04 .sub_con {margin: 40px auto 0;}

  #contents.s2_01.start .cont_title_wrap .tit2 {-webkit-transform: translateY(15%);transform: translateY(15%);margin-top: 0;}
  #contents.s2_01 .cont_title_wrap strong {-webkit-transform: translateY(40%);transform: translateY(40%);margin-top: 0;}
  #contents.s2_01 .cont_title_wrap .author {bottom: -13%;}
  .s2_01 .sub_con {margin: 40px auto 0;}
  .s3_04  #sub-visual {height: 130px;}
}

@media (max-width: 375px) {
  .s1_01  #sub-visual {height: 280px;}
  .s1_02  #sub-visual {height: 200px;}
  .s2_02  #sub-visual {height: 150px;}
  .s2_03  #sub-visual {height: 200px;}
  .s3_02  #sub-visual {height: 200px;}
  .s3_03  #sub-visual {height: 200px;}
  .s3_04  #sub-visual {height: 130px;}
}

@media (max-width: 320px) {
  #contents.start .cont_title_wrap .tit2 {-webkit-transform: translateY(10%);transform: translateY(10%);margin-top: 0;}
  #contents.start .cont_title_wrap .author {bottom: -20%;}
  .sub_con {margin: 60px auto 0;}
  .s1_04 .sub_con {margin: 70px auto 0;}
  .s2_01 .sub_con {margin: 60px auto 0;}
  .s3_02  #sub-visual {height: 200px;}
  .s3_03  #sub-visual {height: 260px;}
}