@charset "UTF-8";

/* S: contents - mobile */
@media (max-width: 1023px) {
  .pc-class{display: none;}
  .mo-class{display: block;}
  
  .keranon .sec.section01 {padding-top: 6.33333vw;}
  .keranon .section01 {position:relative; background:url('/images/brand/keranon/bs_sec01_bg01_mo.png' ) no-repeat center; background-size:cover; height: 227vw;}
  .keranon .section01 .title-wrap {margin-top: 17vw;}
  .keranon .section01 .title-wrap .title span:nth-child(1) {display: inline-block; font-family: "NotoSans-Medium",Arial,"Helvetica Neue",Helvetica,sans-serif; padding: 0px 20px; font-size: 5.06667vw; background-color: #FFFFFF; color: #4D3C54;}
  .keranon .section01 .title-wrap .title span em {font-family: "NotoSans-Medium",Arial,"Helvetica Neue",Helvetica,sans-serif; font-size: 14vw; color: #FFFFFF;}
  
  .keranon .section01 .sec01-cnt01 {display: flex; height: 108vw; align-items: flex-end;}
  .keranon .section01 .sec01-cnt01 img {width: 100%;}
  .keranon .section01 .sec01-cnt02 {margin-top: 10vw;}
  .keranon .section01 .sec01-cnt02 span {font-family: "NotoSans-Light",Arial,"Helvetica Neue",Helvetica,sans-serif; display: block; line-height: 1.3; font-size: 5.5vw; color: #FFFFFF;
  	text-shadow: 0px 0px 5px #9F51B7, 0px 0px 10px #9F51B7, 0px 0px 20px #9F51B7, 0px 0px 40px #9F51B7;}
  .keranon .section01 .sec01-cnt02 span em {font-family: "NotoSans-Medium",Arial,"Helvetica Neue",Helvetica,sans-serif; font-size: 6vw; line-height: 1.5;}
  
  .keranon .section02 {position:relative; background:url('/images/brand/keranon/bs_sec02_bg01_mo.png' ) no-repeat center; background-size:cover; height: 160vw;}
  .keranon .section02 .title-wrap .title span em {font-size: 7.26667vw; color: #564499;}
  .keranon .section02 .sec02-cnt .sec02-cnt-box .mo-class > img:nth-child(1) {position: relative; width: 60%; margin-left: 23vw; z-index: 2;}
  .keranon .section02 .sec02-cnt .sec02-cnt-box .mo-class > img:nth-child(2) {width: 100%; margin-top: -12vw;}
  .keranon .section02 .sec02-cnt .sec02-cnt-box .mo-class .sec02-cnt-textbox {position: absolute; width: 100%; bottom: 8%; left: 13%;}
  .keranon .section02 .sec02-cnt .sec02-cnt-box .mo-class .sec02-cnt-textbox .row-text {display: flex; width: 100%; align-items: center; line-height: 2.5;}
  .keranon .section02 .sec02-cnt .sec02-cnt-box .mo-class .sec02-cnt-textbox .row-text img {width: 4%;}
  .keranon .section02 .sec02-cnt .sec02-cnt-box .mo-class .sec02-cnt-textbox .row-text span {font-family: "NotoSans-Light", Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 3.7vw; margin-left: 2vw;}
  
  .keranon .section03 {position:relative; height: 110vw; background-color: #F6F1FA;}
  .keranon .section03 .title-wrap .title span em {color: #564499;}
  .keranon .section03 .sec03-cnt img {width: 49%;}
  .keranon .section03 .sec03-cnt .sec03-cnt-subtext {margin-top: 6vw;}
  .keranon .section03 .sec03-cnt .sec03-cnt-subtext span {font-family: "NotoSans-DemiLight", Arial, "Helvetica Neue", Helvetica, sans-serif; line-height: 1.5; font-size: 4vw; letter-spacing: 0px; color: #564499;}
  .keranon .section03 .sec03-cnt .sec03-cnt-subtext span em {font-family: "NotoSans-Medium",Arial,"Helvetica Neue",Helvetica,sans-serif;}
  .keranon .section03 .sec03-cnt .sec03-cnt-subtext span .color01 {color: #ED608B;}
  
  .product-info .section01 .title-wrap .title span em {font-size: 7.26667vw; color: #564499;}
  .product-info .section01 .product-swiper .swiper-wrapper .swiper-slide .product-cnt .img-box img {width: 25%;}
  .product-info .section01 .product-swiper .swiper-wrapper .swiper-slide.on .active-box {background-color: #564499;}
  .product-info .section02 .product-detail-wrap .title a {background-color: #564499;}
  
  .keranon-qna .section01 .title-wrap.mt50 {margin-top: 5vw;}
  .keranon-qna .section01 .title-wrap.mb30 {margin-bottom: 10vw;}
  .keranon-qna .section01 .title-wrap .title span em {color: #564499;}
  .keranon-qna .section01 {position:relative; background:url('/images/brand/keranon/qna_sec01_bg01_mo.png' ) no-repeat top; background-size: contain; background-color: #F1F5F8;}
  .keranon-qna .section01 .qna-info {display: flex; width: 100%; height: auto; align-items: center; justify-content: center; margin-bottom: 20vw;}
  .keranon-qna .section01 .qna-info img {width: 100%;}
  .keranon-qna .section01 .title-wrap .title span em.color-black {color: #222222;}
  .keranon-qna .section01 .ui-accordion .accordion-item .btn .ico-q {color: #564499;}
}

/* S: contents - pc */
@media (min-width: 1024px) {
  .pc-class{display: block;}
  .mo-class{display: none;}
  
  .keranon .fix-indi button:hover{color:#7455BE}
  .keranon .fix-indi button:hover:after{background-color:#7455BE}
  .keranon .fix-indi button.on{color:#7455BE}
  .keranon .fix-indi button.on:after{background-color:#7455BE}
  
  /* S: 브랜드 스토리 */
  .keranon .section01 {position:relative;background:url('/images/brand/keranon/bs_sec01_bg01.png' ) no-repeat bottom; background-size:cover; height: 900px;}
  .keranon .section01 .title-wrap .title span:nth-child(1) {font-family: "NotoSans-Medium",Arial,"Helvetica Neue",Helvetica,sans-serif; padding: 0px 20px; font-size: 32px; background-color: #FFFFFF; color: #4D3C54;}
  .keranon .section01 .title-wrap .title span em {font-family: "NotoSans-Medium",Arial,"Helvetica Neue",Helvetica,sans-serif; font-size: 86px; color: #FFFFFF;}
  .keranon .section01 .sec01-cnt01 {position: relative; height: 565px;}
  .keranon .section01 .sec01-cnt01 img {position: absolute; top: 38%; right: 16%;}
  .keranon .section01 .sec01-cnt02 span {font-family: "NotoSans-Light",Arial,"Helvetica Neue",Helvetica,sans-serif; font-size: 32px; color: #FFFFFF;
  	text-shadow: 0px 0px 5px #9F51B7, 0px 0px 10px #9F51B7, 0px 0px 20px #9F51B7, 0px 0px 40px #9F51B7;}
  .keranon .section01 .sec01-cnt02 span em {line-height: 2.5; font-family: "NotoSans-Medium",Arial,"Helvetica Neue",Helvetica,sans-serif;}
  
  .keranon .section02 {position:relative;background:url('/images/brand/keranon/bs_sec02_bg01.png' ) no-repeat center; background-size:cover; height: 720px;}
  .keranon .section02 .title-wrap .title span em {color: #564499;}
  .keranon .section02 .sec02-cnt .sec02-cnt-box {position: relative;}
  .keranon .section02 .sec02-cnt .sec02-cnt-box .img-memo {position: absolute; top: 120px; left: 150px;}
  .keranon .section02 .sec02-cnt .sec02-cnt-box .img-keranon {position: absolute; top: 0px; right: 50px; width: 290px;}
  .keranon .section02 .sec02-cnt .sec02-cnt-box .sec02-cnt-textbox {position: absolute; top: 200px; left: 250px;}
  .keranon .section02 .sec02-cnt .sec02-cnt-box .sec02-cnt-textbox .row-text {display: flex; line-height: 2; align-items: center;}
  .keranon .section02 .sec02-cnt .sec02-cnt-box .sec02-cnt-textbox .row-text span {font-family: "NotoSans-Light", Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 28px; margin-left: 10px;}
  
  .keranon .section03 {position:relative; height: 720px; background-color: #F6F1FA;}
  .keranon .section03 .title-wrap .title span em {color: #564499;}
  .keranon .section03 .sec03-cnt {margin-top: 80px;}
  .keranon .section03 .sec03-cnt .sec03-cnt-subtext {margin-top: 40px;}
  .keranon .section03 .sec03-cnt .sec03-cnt-subtext span {font-family: "NotoSans-DemiLight", Arial, "Helvetica Neue", Helvetica, sans-serif; line-height: 1.5; font-size: 23px; letter-spacing: 0px; color: #564499;}
  .keranon .section03 .sec03-cnt .sec03-cnt-subtext span em {font-family: "NotoSans-Medium",Arial,"Helvetica Neue",Helvetica,sans-serif;}
  .keranon .section03 .sec03-cnt .sec03-cnt-subtext span .color01 {color: #ED608B;}
  
  .product-info .section01 .title-wrap .title span em {color: #564499;}
  .product-info .section01 .product-swiper .swiper-wrapper .swiper-slide.on .active-box {background-color: #564499;}
  .product-info .section02 .product-detail-wrap .title a {background-color: #564499;}
  
  .keranon-qna .section01 .title-wrap.mt50 {margin-top: 50px;}
  .keranon-qna .section01 .title-wrap.mb30 {margin-bottom: 30px;}
  .keranon-qna .section01 .title-wrap .title span em {color: #564499;}
  .keranon-qna .section01 {position:relative; background:url('/images/brand/keranon/qna_sec01_bg01.png' ) no-repeat top; background-size: contain; background-color: #F1F5F8;}
  .keranon-qna .section01 .qna-info {display: flex; width: 100%; height: 650px; align-items: center; justify-content: center;}
  .keranon-qna .section01 .qna-info img {margin-bottom: 150px;}
  .keranon-qna .section01 .title-wrap .title span em.color-black {color: #222222;}
  .keranon-qna .section01 .ui-accordion .accordion-item .btn .ico-q {color: #564499;}
  
}