@charset "utf-8";

/* 
 * main CSS Document
 * KOWEB
 */

#container #content {display: flex; flex-wrap: wrap;}
article[class^=area_] h3 {font-size: 18rem; color: #000;}
article[class^=area_] h3 > a {display: inline-block; padding-right: 15rem; color:#000; background:url(/images/main/title_arrow.svg) no-repeat right 3rem; background-size: 7rem; }

/* area_visual */
.area_visual {padding: 45rem 0; background-color: #8323ff; transition: background-color 200ms ease-out;}
.area_visual .wrapper {display: flex; align-items: stretch; justify-content: space-between;}
.area_visual .wrapper::after {display: block; clear: both; content: '';}
.area_visual .vs_slider {position: relative; float: left; width: calc((100% - 40rem)/2); margin: 0; margin-left: auto; overflow: unset;}
.area_visual .slider_wrapper {border-radius: 5rem; overflow: hidden; box-sizing: border-box;}
.area_visual #video {width: calc((100% - 40rem)/2); border-radius: 5rem; overflow: hidden;}
.area_visual #video iframe {width: 100%; height: 100%;}

.slick_slider .slide {display: flex; flex-wrap: wrap; align-items: center; align-content: center; height: 370rem;border-radius: 5rem; overflow: hidden; box-sizing: border-box;}
.slick_slider .slide a {display: block; width: 100%; height:100%; background-size: cover; background-position: center; background-repeat: no-repeat; box-sizing: border-box;}
.slick_slider .slide .sd_title {flex-basis: 100%;}
.slick_slider .slide .sd_title em {font-size: 18rem; font-weight: 500;}
.slick_slider .slide .sd_title h2 {font-size: 52rem; font-weight: 600;}

.slick_button {width: 35rem; height: 35rem; border-radius: 100%; background: rgba(255, 255, 255, .8); box-shadow: 5rem 0 10rem rgba(0, 0, 0, .1);}
.slick_button::after {font-size: 12rem !important; color: #000;}
.slick_prev {left:0; transform: translate(-50%, 0);}
.slick_next {right:0; transform: translate(50%, 0);}

/* slide1 */
.slick_slider .slide1 {text-align: center; background:url(/images/main/main_slider01.jpg) no-repeat center / cover;}
.slick_slider .slide1 > a {display: flex; justify-content: center; align-content: center; flex-wrap: wrap; padding: 50rem;}
.slick_slider .slide1 .sd_title em {position: relative; display: inline-block; padding-bottom: 2rem; color: #c6afef;}
.slick_slider .slide1 .sd_title em::after {position: absolute; left: 0; bottom: 0; content: ''; width: 100%; height:1px; background-color: #c6afef;}
.slick_slider .slide1 .sd_title h2 {position: relative; display: inline-block; margin: 20rem 0 25rem; font-size: 45rem; color: #fff; line-height: 1.25;}
.slick_slider .slide1 .sd_title h2 span {display: block; color: #00eaff;}
.slick_slider .slide1 .sd_title h2::before {position: absolute; left:-30rem; top:-15rem; content:''; width: 40rem; height: 40rem; background: url(/images/main/main_slider01_icon01.png) no-repeat center;}
.slick_slider .slide1 .sd_title h2::after {position: absolute; right:-60rem; top:50%; content:''; width: 40rem; height: 40rem; margin-top: -5rem; background: url(/images/main/main_slider01_icon02.png) no-repeat center; }
.slick_slider .slide1 .countdown {display: inline-block; max-width:100%; height: 80rem; padding: 18rem 25rem; border-radius: 15rem; background-color: #260a59; box-sizing: border-box;}

#countdown_wrap {display: flex; align-items: center; padding: 10rem 35rem; background-color: #260a59; border-radius: 15rem;}
#countdown_wrap .dday {margin: 11rem 25rem 0 0; font-size: 50rem; font-weight: 600; color: #fff;}
#countdown_wrap .flip-clock-wrapper { width: auto; margin: 0; font-family:'GmarketSans';}
#countdown_wrap .flip-clock-divider.hours {display: none;}
#countdown_wrap .flip-clock-label {display: none;}
#countdown_wrap .flip-clock-wrappe .flip {box-shadow: none;}
#countdown_wrap .flip-clock-wrapper ul {width: 30rem; height: 45rem; margin: 0 2.5rem; font-size: 24rem; background:#fff; border-radius: 5rem;}
#countdown_wrap .flip-clock-wrapper ul li {line-height: 50rem;}
#countdown_wrap .flip-clock-wrapper ul li a div {font-size: 1em;}
#countdown_wrap .flip-clock-wrapper ul li a div div.inn {font-size: 1em; color: #000; background-color: #fff; text-shadow: none;}
#countdown_wrap .flip-clock-dot {left: 50%; width: 5rem; height: 5rem; background:#fff; box-shadow: none; transform: translate(-50%, 0);}
#countdown_wrap .flip-clock-dot.top {top: 15rem;}
#countdown_wrap .flip-clock-dot.bottom {bottom: 12rem;}
#countdown_wrap .flip-clock-divider {width: 25rem; height: 45rem;}


/* area_content*/
.area_content {position: relative; flex-basis: 910rem; max-width: 100%; padding-right: 35rem; box-sizing: border-box;}
.area_content::after {position: absolute; right: 0; top: 0; content: ''; width: 1px; height: 100%; background: #f7f7f7;}

/* area_quick */
.area_quick {display:grid; grid-template-columns: repeat(8, 1fr); gap:20rem; padding: 22rem 0 20rem; border-bottom: 1px solid #eee;}
.area_quick li a {display: block; text-align: center; font-weight: 500; color: #111; transition: .3s;}
.area_quick li a i {display: flex; align-items: center; justify-content: center; aspect-ratio: 1/1; margin-bottom: 12rem; border-radius: 15rem; background-color: #f5f5f5;  transition: .3s;}
.area_quick li a i img {height: 40rem; transition: .3s;}
.area_quick li a.best i {border: 2px solid transparent; background-image: linear-gradient(#f5f5f5, #f5f5f5), linear-gradient(to top, #3b5cd7 0%,  #f64561 100%); background-origin: border-box; background-clip: content-box, border-box;}
.area_quick li a.best i img {height: 37rem;}
.area_quick li:nth-child(2) a i img {height: 32rem;}
.area_quick li:nth-child(4) a i img,
.area_quick li:nth-child(7) a i img {margin-left: 10rem;}

.area_quick li a:hover {color:#3b5cd7}
.area_quick li a:hover i {background-color: #eee; margin-top: -5rem;}
.area_quick li a.best:hover i { background-image: linear-gradient(#eee, #eee), linear-gradient(to top, #3b5cd7 0%,  #f64561 100%);} 

/* area_tip */
.area_tip {padding:25rem 0 0;}
.area_tip h3 {margin-bottom: 15rem;}
.area_tip ul {display: grid; grid-template-columns: repeat(4, 1fr); gap:20rem 15rem;}
.area_tip ul li {width: 100%; max-width: 100%; overflow-x: auto; box-sizing: border-box;}
.area_tip ul li .img {width: 100%; aspect-ratio: 1/1; margin-bottom: 15rem; background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 5rem; border: 1px solid #efefef; box-sizing: border-box; overflow: hidden;}
.area_tip ul li a img {width: 100%; max-width: 100%; object-fit: cover; transition: .5s;}
.area_tip ul li a:hover img {transform: scale(1.07);}
.area_tip ul li dl dt {font-weight: 600; color: #333; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.4; min-height: 45rem;}
.area_tip ul li dl dd {display: inline-block; margin-top: 12rem; font-size: 13rem; color: #888;}
.area_tip ul li dl dd::before {content:''; display: inline-block; width: 13rem; height: 10rem; margin-right: 7rem; background: url(/images/main/icon_view.svg) no-repeat left center;}

/* area_inquiry */
.area_inquiry {flex-basis: 370rem; max-width: 100%; padding-left: 25rem; box-sizing: border-box; overflow: hidden;}
.area_inquiry > div {padding: 22rem 0 10rem; border-bottom: 1px solid #eee;}
.area_inquiry > div h3 {padding: 12rem 7rem;}
.area_inquiry > div ul li + li {border-top: 1px solid #eee;}
.area_inquiry > div ul li a {display: block; padding:6rem 7rem; font-weight: 500; color: #333; transition: .3s;}
.area_inquiry > div ul li a:hover {background:#f7f7f7;}
.area_inquiry > div ul li a::after {content:''; clear:both; display: block;}
.area_inquiry > div ul li a p {float: left; width: 55%; line-height:1.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.area_inquiry > div ul li a b {float:right; width: 45%; text-align: right; font-size: 13rem; font-weight: 400; color: #888;} 
.area_inquiry > div ul li a b span {display: inline-block; padding: 4rem 8rem; margin-left:8rem; font-weight: 500; border-radius: 50rem; background-color: #efefef;}
.area_inquiry > div ul li a b span.complete {font-weight: 600; color: #3b5cd7; background-color: #e8ecfa;}
.area_inquiry > div > a {display: block; padding: 18rem; text-align: center; font-size: 14rem; color: #666;} 
.area_inquiry > div > a span {position: relative; padding-right: 13rem;}
.area_inquiry > div > a span::after {position:absolute; right: 0; top: 5rem; content:''; width: 4rem; height: 7rem; background:url(/images/common/next_arrow.svg) no-repeat center / cover; opacity: .8;}
.area_inquiry > div > a strong {font-weight: 600;}

.area_inquiry .area_banner {margin-top: 40rem; border-radius: 5rem; overflow: hidden;}
.area_inquiry .area_banner .slick-slide img {width:100%; aspect-ratio: 345/211;}

/* area_sns */
.area_sns {flex-basis: 100%; margin: 40rem 0 0; padding-top: 55rem; border-top: 1px solid #eee;}
.area_sns div {display: flex; align-items: center; justify-content: space-between; padding: 30rem 35rem; border-radius: 5rem; background:url(/images/main/sns_banner.jpg) no-repeat center / cover;}
.area_sns div h3 {font-size: 20rem; color: #fff;}
.area_sns div ul {display: flex; gap: 0 10rem;}
.area_sns div ul li a {display: block; width: 50rem; height: 50rem; border-radius: 5rem; overflow: hidden;}
.area_sns div ul li a.instagram {display: flex; align-items: center; justify-content: center; background:url(/images/main/sns_instagram_bg.jpg) no-repeat center / cover;}
.area_sns div ul li a.instagram img {width: 27rem;}


/* 2023-04-13 :: 준비중 */
.area_inquiry > div {padding: 22rem 0 0; border-bottom: none;}
.area_inquiry .ready {display: flex; flex-wrap: wrap; justify-content: center; align-content: center; min-height: 365rem; margin-top: 5rem; text-align:center; border-radius: 5rem; border: 1rem solid #eee; padding: 30rem 20rem;}
.area_inquiry .ready i {display: block; width: 23rem; height: 23rem; margin: 0 auto 17rem; font-weight: 700; color: #3a61d3; line-height: 23rem; border-radius: 100%; border: 2rem solid #3a61d3;}
.area_inquiry .ready p {flex-basis: 100%; margin-bottom: 10rem; font-size: 19rem; color: #222;}
.area_inquiry .ready span {display: block;flex-basis: 100%;  font-size: 15rem; font-weight: 300; color: #666; line-height: 1.6;}
.area_inquiry .area_banner {margin: 20rem 0 0;}





 @media (min-width:2000px){}
 @media all and (max-width:1440px){}
 @media all and (max-width:1024px){

    .slick_slider .slide {height: 285rem;}
    .slick_slider .slide > a {padding: 35rem;}
    .slick_slider .slide1 .sd_title em {font-size: 16rem;}
    .slick_slider .slide1 .sd_title h2 {font-size: 35rem; margin-bottom: 10rem;}
    .slick_slider .slide1 > a {padding: 20rem;}

    #countdown_wrap {padding: 15rem;}
    #countdown_wrap .dday {margin: 7rem 15rem 0 0; font-size: 40rem;}
    #countdown_wrap .flip-clock-divider {width: 20rem;}

    .area_quick {padding: 33rem 0 28rem;}

    .area_tip {padding: 33rem 0 30rem;}

    .area_content,  
    .area_inquiry {flex-basis: 100%; padding: 0;}
    .area_content::after {display: none;}
    .area_inquiry > div {border-top: 1px solid #eee;} 
    .area_inquiry > div h3 {padding: 20rem 0 12rem;}
    .area_inquiry > div ul li a {padding: 7rem 0;}

    .area_sns {margin: 0; padding-top: 30rem; border-top: none;}

    /* 2023-04-13 :: 준비중 */
   .area_inquiry .ready {min-height: 260rem; }
   .area_inquiry .ready i {width: 27rem; height: 27rem; font-size: 17rem; line-height: 27rem; border-width: 3rem;}
   .area_inquiry .ready p {font-size: 20rem;}


    

 }
 @media all and (max-width:860px){
    .area_visual .wrapper {flex-wrap: wrap; flex-direction: column-reverse;}
    .area_visual #video {width: 100%;}
    .area_visual #video iframe {height: auto; aspect-ratio: 16/9;}
    .area_visual .vs_slider{width: 100%;  float: none; margin: 0 0 20rem;}
    .area_visual .slick_slider .slide {height: auto; aspect-ratio: 16/9;}


    .area_quick {grid-template-columns: repeat(4, 1fr);}
    .area_quick li a i {width: 80rem; margin: 0 auto 12rem; border-radius: 10rem;}

    .area_tip ul {grid-template-columns: repeat(3, 1fr);}

    .area_sns div {padding: 30rem; flex-wrap: wrap;}
    .area_sns div h3 {flex-basis: 100%; line-height: 1.5; margin-bottom: 15rem;}
    .area_sns div ul li a {width: 40rem; height: 40rem;}
    .area_quick li a.best i img,
    .area_quick li a i img {height: 28rem;}
    .area_quick li:nth-child(2) a i img {height: 25rem;}
    .area_quick li:nth-child(4) a i img, .area_quick li:nth-child(7) a i img {margin-left: 8rem;}

    .area_tip ul {grid-template-columns: repeat(2, 1fr); gap: 20rem 12rem;}
    .area_inquiry .area_banner {margin-top: 30rem;}
    .area_sns {padding-top: 20rem;}
    .area_sns div {padding:25rem 20rem; text-align: center; justify-content: center; background: #262c3d;}
    .area_sns div h3 {font-size: 18rem;}



 }
 @media all and (max-width:540px){
    .area_visual {padding: 30rem 0;}
    .area_visual .slick_slider .slide {aspect-ratio: 3/2;}
    .slick_slider .slide .sd_title em {font-size: 12rem;}
    .slick_slider .slide1 .sd_title h2 {font-size: 27rem; margin: 15rem 0;}
    .slick_slider .slide1 .sd_title h2::before {left: -15rem; top: 10rem; width: 20rem; height: 20rem; background-size: contain;}
    .slick_slider .slide1 .sd_title h2::after {right: -30rem; width: 20rem; height: 20rem; margin-top: -10rem; background-size: contain;}
    .slick_slider .slide1 .sd_title em {padding-bottom: 1rem;}
    .slick_slider .slide1 .countdown {height: 50rem; border-radius: 10rem; padding: 15rem 20rem;}
    .slick_button_wrapper .slick_button {width: 22rem; height: 35rem; border-radius: 0;}
    .slick_button {background:rgba(255, 255, 255, .7); box-shadow: 3rem 0 5rem rgba(0, 0, 0, .05);}
    .slick_button::after {font-size: 10rem !important;}
    .slick_button_wrapper .slick_prev {transform: none;}
    .slick_button_wrapper .slick_next {transform: none;}

    #countdown_wrap {width: 100%; justify-content: center; padding: 12rem; border-radius: 5rem; box-sizing: border-box;}
    #countdown_wrap .dday {margin: 5rem 13rem 0 0; font-size: 27rem;}
    #countdown_wrap .flip-clock-wrapper ul {width: 22rem; height: 35rem; margin: 0 1.5rem; font-size: 18rem; border-radius: 3rem;}
    #countdown_wrap .flip-clock-wrapper ul li {line-height: 38rem;}
    #countdown_wrap .flip-clock-divider {width: 15rem; height: 35rem;}
    #countdown_wrap .flip-clock-dot {width: 3rem; height: 3rem;}
    #countdown_wrap .flip-clock-dot.top {top: 10rem;}
    #countdown_wrap .flip-clock-dot.bottom {bottom: 10rem;}


    .area_quick {gap: 20rem 12rem;}
    .area_quick li a {font-size: 13rem;}
    .area_quick li a i {width: 70%; margin: 0 auto 8rem;}
    .area_quick li a.best i img,
    .area_quick li a i img {height: 21rem;}
    .area_quick li:nth-child(2) a i img {height: 17rem;}

    .area_tip ul li .img {margin-bottom: 12rem;}
    .area_tip ul li dl dt {min-height: 40rem;}
    .area_tip ul li dl dd {margin-top: 8rem; font-size: 12rem;}
    .area_tip ul li dl dd::before {width: 11rem; margin-right: 5rem;}

    .area_inquiry > div {padding: 22rem 0 0;}
    .area_inquiry > div ul li a {display: flex; align-items: center;}
    .area_inquiry > div ul li a p {line-height: 1.4;}
    .area_inquiry > div ul li a b {width: 40%; font-size: 12rem;}
    .area_inquiry > div ul li a b span {margin-left: 5rem; padding: 4rem 8rem 3rem; font-size: 12rem; font-weight: 400;}

     /* 2023-04-13 :: 준비중 */
   .area_inquiry .ready {min-height: auto; padding: 50rem 20rem;}
   .area_inquiry .ready i {width: 21rem; height: 21rem; margin-bottom: 15rem; font-size: 16rem; line-height: 21rem; border-width: 2.5rem;}
   .area_inquiry .ready p {font-size: 16rem;}
   .area_inquiry .ready span {font-size: 13rem;}
   .area_inquiry .area_banner {margin: 20rem 0 0;}
 }

 @media all and (max-width:420px){
  /* .area_tip ul {grid-template-columns: 1fr; gap: 12rem 0;}
   .area_tip ul li a {display: flex; align-items: stretch;}
   .area_tip ul li .img {flex-basis: 32%; width: auto; margin-bottom: 0;}
   .area_tip ul li dl {display: flex; flex-wrap: wrap; align-content: space-between; width: 68%; padding: 10rem 18rem; box-sizing: border-box;}*/
  
 }
 @media all and (max-width:360px){}