@charset "UTF-8";

.tit-color {color: #222222 !important;}

/* S: contents - pc */
@media (min-width: 1024px) {
  .pc-class{display: block;}
  .mo-class{display: none;}
  
  .story .sec{padding: 80px 0 30px;min-height: 990px; box-sizing: border-box;}

  .dioline .fix-indi button:hover{color:#E25968}
  .dioline .fix-indi button:hover:after{background-color:#E25968}
  .dioline .fix-indi button.on{color:#E25968}
  .dioline .fix-indi button.on:after{background-color:#E25968}
  
  .dioline .sec .title-wrap .title{margin-bottom:17px}
  .dioline .sec .title-wrap .title span{display:block;letter-spacing:-1px;font-family:"NotoSans-Light";font-size:45px;line-height:1.3; letter-spacing: -3px;}
  .dioline .sec .title-wrap .title span em{letter-spacing:-1px;font-family:"NotoSans-Bold";font-size:45px;line-height:1.3;color:#AD283B;}
  .dioline .sec .title-wrap .tit{margin:20px 0 50px}
  .dioline .sec .title-wrap .sub-txt{max-width:100%}
  .dioline .sec .title-wrap .sub-txt span{display:block;margin-bottom:0;font-size:22px;line-height:1.5;font-family:"NotoSans-DemiLight"}
  .dioline .sec .title-wrap .sub-txt span em{font-family:"NotoSans-Medium"}
  
  /* S: 브랜드 스토리 */
  .dioline .section01 {position:relative;background:url('../../images/brand/dioline/dl_bs_sec01_bg01.png' ) no-repeat center bottom;background-size:cover; max-height: 988px; min-height: 989px;}
  .dioline .section01 .title-wrap {margin-top: 33px; text-align: center;}
  .dioline .section01 .title-wrap .title span {font-family:"NotoSans-Medium"; font-size: 32px; letter-spacing: 0px;}
  .dioline .section01 .title-wrap .title span em {font-size: 72px;}
  .dioline .section01 .title-wrap .title-box {display: flex; justify-content: center; align-items: center;}
  .dioline .section01 .title-wrap .title-box .sub-txt {margin: 0px; padding-top: 3px; font-size: 20px; color: #6E262A;}
  
  .dioline .section01 .sec01-cnt {position: relative; margin-top: 50px;}
  .dioline .section01 .sec01-cnt .txt-img01 {position: absolute; top: -6%; right: 20%;}
  .dioline .section01 .sec01-cnt .txt-img02 {position: absolute; top: 26%; right: 13%;}
  .dioline .section01 .sec01-cnt .txt-sub {position: absolute; bottom: 13%; left: 17.5%; font-family:"NotoSans-Light"; font-size: 23px; line-height: 1.5;}
  .dioline .section01 .sec01-cnt .txt-sub em {font-family:"NotoSans-Medium";}
  
  .dioline .section02 {position:relative;background:url('../../images/brand/dioline/dl_bs_sec02_bg01.png' ) no-repeat center bottom;background-size:cover; max-height: 988px; min-height: 989px;}
  .dioline .section02 .sec02-cnt {position: relative; margin-top: 30px;}
  .dioline .section02 .sec02-cnt .pc-class > img {position: relative; z-index: 1;}
  .dioline .section02 .sec02-cnt .sec02-cnt-sub01 {position: absolute; top: 5%; left: 9%; width: 100%; z-index: 0;}
  .dioline .section02 .sec02-cnt .sec02-cnt-sub01 > img {margin-bottom: 90px; object-fit: contain;}
  .dioline .section02 .sec02-cnt .sec02-cnt-sub01 .icon-box01 {position: absolute; top: 0px; left: 215px; line-height: 1.5;}
  .dioline .section02 .sec02-cnt .sec02-cnt-sub01 .icon-box02 {position: absolute; top: 0px; right: 190px; line-height: 1.5;}
  .dioline .section02 .sec02-cnt .sec02-cnt-sub01 .icon-line01 {position: absolute; top: 35px; right: 380px;}
  .dioline .section02 .sec02-cnt .sec02-cnt-sub01 > div span {display: block;}
  .dioline .section02 .sec02-cnt .sec02-cnt-sub01 > div span em {font-family:"NotoSans-Medium"; font-size: 25px; color: #AD283B;}
  
  .dioline .section02 .sec02-cnt .sec02-cnt-sub02 {position: absolute; top: 39%; left: -5%; width: 100%; z-index: 0;}
  .dioline .section02 .sec02-cnt .sec02-cnt-sub02 > img {margin-bottom: 90px; object-fit: contain;}
  .dioline .section02 .sec02-cnt .sec02-cnt-sub02 .icon-box01 {position: absolute; top: 0px; left: 215px; line-height: 1.5;}
  .dioline .section02 .sec02-cnt .sec02-cnt-sub02 .icon-box02 {position: absolute; top: 0px; right: 190px; line-height: 1.5;}
  .dioline .section02 .sec02-cnt .sec02-cnt-sub02 .icon-line01 {position: absolute; top: 35px; right: 380px;}
  .dioline .section02 .sec02-cnt .sec02-cnt-sub02 > div span {display: block;}
  .dioline .section02 .sec02-cnt .sec02-cnt-sub02 > div span em {font-family:"NotoSans-Medium"; font-size: 25px; color: #AD283B;}
  .dioline .section02 .sec02-cnt .sec02-cnt-sub02 > div .txtbox {position: relative; margin-top: 5px;}
  .dioline .section02 .sec02-cnt .sec02-cnt-sub02 > div .txtbox span {position: absolute; top: 27px; left: 46px; display: block; font-size: 15px; color: #AD283B;}
  
  .dioline .section03 {background-color: #FFFFFF; padding: 80px 0 100px;}
  .dioline .section03 .title-wrap .title .sub-txt {margin-top: 30px; line-height: 1.5; font-family:"NotoSans-DemiLight"; font-size: 21px; letter-spacing: 0px;}
  .dioline .section03 .sec03-cnt {position: relative; margin-top: 60px;}
  .dioline .section03 .sec03-cnt > img {display: revert; width: 42%;}
  .dioline .section03 .sec03-cnt .sec03-cnt-sub {display: inline-block; margin-left: 40px; vertical-align: top;}
  .dioline .section03 .sec03-cnt .sec03-cnt-sub .sec03-cnt-sub-box:first-child {margin-bottom: 45px;}
  .dioline .section03 .sec03-cnt .sec03-cnt-sub .sec03-cnt-sub-box .item-box {display: inline-block; vertical-align: top;}
  .dioline .section03 .sec03-cnt .sec03-cnt-sub .sec03-cnt-sub-box .item-box img.pc-class {display: revert;}
  .dioline .section03 .sec03-cnt .sec03-cnt-sub .sec03-cnt-sub-box .item-box h2 {margin-bottom: 25px; padding: 10px; font-family:"NotoSans-Bold"; font-size: 25px; background-color: #FFEEEC; color: #AD283B;}
  .dioline .section03 .sec03-cnt .sec03-cnt-sub .sec03-cnt-sub-box .item-box .txtbox {display: inline-block; padding: 0px 20px; vertical-align: top; text-align: left;}
  .dioline .section03 .sec03-cnt .sec03-cnt-sub .sec03-cnt-sub-box .item-box .txtbox span {font-family:"NotoSans-Medium";}
  .dioline .section03 .sec03-cnt .sec03-cnt-sub .sec03-cnt-sub-box > img {display: revert; width: 33%; margin-left: 15px;}
  .dioline .section03 .sec03-ref {margin-top: 30px; padding: 0px 15px; text-align: left;}
  .dioline .section03 .sec03-ref span {display: block; line-height: 1.3; font-size: 13px; color: #666666;}
  /* E: 브랜드 스토리 */

  /* S: 제품정보 */
  .product-info .title-wrap .title {margin-bottom: 50px;}
  .product-info .title-wrap .title span {display: block; font-size: 36px; margin-bottom: 50px; letter-spacing: 0px;}
  .product-info .title-wrap .title span em {font-size: 36px; color:#AD283B; letter-spacing: 0px;}
  
  .product-info .section01 .swiper-pagination {display: none;}
  .product-info .section01 .swiper-button-next,.product-info .section01 .swiper-button-prev {display: none;}
  .product-info .section01 .product-swiper .swiper-wrapper .swiper-slide .product-cnt .img-box {margin-top: 50px;}
  .product-info .section01 .product-swiper .swiper-wrapper .swiper-slide .product-cnt .img-box img {width: 100%;}
  .product-info .section01 .product-swiper .swiper-wrapper .swiper-slide .product-cnt .txt {margin-top: 20px;}
  .product-info .section01 .product-swiper .swiper-wrapper .swiper-slide.on .product-cnt .txt {margin-top: 20px; color: #222222;}
  .product-info .section01 .product-swiper .swiper-wrapper .swiper-slide.on .active-box {background-color: #FFE7E8;}
  
  .product-info .section02 .product-detail-wrap .title a {background-color: #AD283B;}
  /* E: 제품정보 */
  
  /* S: 궁금해요 */
  .dioline-qna .section05 {padding-top: 100px; background-color: #f1f5f8;}
  .dioline-qna .title-wrap .title{margin-bottom: 70px;}
  .dioline-qna .title-wrap .title span em{color:#AD283B;}
  .ui-accordion .accordion-item .btn .ico-q {color: #AD283B;}
  /* E: 궁금해요 */
}
@media screen and (min-width: 1024px) and (max-width: 1200px){
  .dioline .section02 .feature-cnt{width:100%}
}
/* E: contents - pc */


/* S: contents - mobile */
@media (max-width: 1023px) {
  .pc-class{display: none;}
  .mo-class{display: block;}

  .dioline .sec .title-wrap .title span {font-size: 4vw;}
  .dioline .sec .title-wrap .title span em {font-family:"NotoSans-Bold"; font-size:7.26667vw; line-height:1.3; color:#AD283B;}
  .dioline .sec .title-wrap .tit {margin:20px 0 50px}
  .dioline .sec .title-wrap .sub-txt {max-width:100%}
  .dioline .sec .title-wrap .sub-txt span {display:block;margin-bottom:0;font-size:22px;line-height:1.5;font-family:"NotoSans-DemiLight"}
  .dioline .sec .title-wrap .sub-txt span em {font-family:"NotoSans-Medium"}

  /* S: 브랜드 스토리 */
  .dioline .section01 {position:relative; padding-bottom: 0px; background:url('../../images/brand/dioline/dl_bs_sec01_bg01_mo.png' ) no-repeat center bottom; background-size:cover; min-height: 149.333vw;}
  .dioline .section01 .title-wrap {margin-top: 33px; width: 100%; text-align: center;}
  .dioline .section01 .title-wrap .title {margin-bottom: 2vw;}
  .dioline .section01 .title-wrap .title span {font-family:"NotoSans-Medium"; line-height: 1.5; font-size: 5vw; letter-spacing: 0px;}
  .dioline .section01 .title-wrap .title span em {font-size: 9vw;}
  .dioline .section01 .title-wrap .title-box {display: flex; justify-content: center; align-items: center;}
  .dioline .section01 .title-wrap .title-box .sub-txt {margin: 0px; padding-top: 3px; font-size: 4.2vw; color: #6E262A;}
  
  .dioline .section01 .sec01-cnt {position: relative; margin-top: 20vw;}
  .dioline .section01 .sec01-cnt .mo-class img:nth-child(1) {width: 91vw;}
  .dioline .section01 .sec01-cnt .txt-img01 {position: absolute; top: -13%; right: -4%; width: 32%;}
  .dioline .section01 .sec01-cnt .txt-img02 {position: absolute; top: 17%; right: -2%; width: 25%;}
  .dioline .section01 .sec01-cnt .txt-sub {position: absolute; bottom: 18%; left: 6%; font-family:"NotoSans-Light"; font-size: 3.8vw; line-height: 1.5;}
  .dioline .section01 .sec01-cnt .txt-sub em {font-family:"NotoSans-Medium";}
  
  .dioline .section02 {position:relative; padding-top: 12vw; padding-bottom: 65vw; background:url('../../images/brand/dioline/dl_bs_sec02_bg01_mo.png' ) no-repeat; background-size: cover; min-height: 149.333vw;}
  .dioline .section02 .title-wrap {width: 100%; text-align: center;}
  .dioline .section02 .title-wrap .title {margin-bottom: 0vw;}
  .dioline .section02 .title-wrap .title span {font-family:"NotoSans-Light"; line-height: 1.5; font-size: 7vw; letter-spacing: 0px;}
  .dioline .section02 .title-wrap .title span em {font-size: 7vw;}
  
  .dioline .section02 .sec02-cnt {position: relative;}
  .dioline .section02 .sec02-cnt .mo-class > img {position: absolute; top: -22px; right: -36%; width: 85%; z-index: 1;}
  .dioline .section02 .sec02-cnt .sec02-cnt-sub {position: relative;}
  .dioline .section02 .sec02-cnt .sec02-cnt-sub .icon-box {position: absolute; top: 9vw; left: 0px; text-align: center; width: 37vw;}
  .dioline .section02 .sec02-cnt .sec02-cnt-sub .icon-box > img {width: 40%;}
  .dioline .section02 .sec02-cnt .sec02-cnt-sub .icon-box > span {display: block; font-family:"NotoSans-DemiLight"; font-size: 3.5vw; margin-top: 5px; line-height: 1.5;}
  .dioline .section02 .sec02-cnt .sec02-cnt-sub .icon-box > span em {font-family:"NotoSans-Medium"; font-size: 4vw; color:#AD283B;}
  .dioline .section02 .sec02-cnt .sec02-cnt-sub > img.item01 {position: absolute; top: 15vw; right: -32vw;; width: 89vw; z-index: 0;}
  .dioline .section02 .sec02-cnt .sec02-cnt-sub .icon-box.item02 {position: absolute; top: 40vw; left: 3px; text-align: center; width: 40vw;}
  .dioline .section02 .sec02-cnt .sec02-cnt-sub .icon-box.item02 > img {width: 35%;}
  .dioline .section02 .sec02-cnt .sec02-cnt-sub > img.item02 {position: absolute; top: 48vw; right: 1vw;; width: 56vw; z-index: 0;}
  .dioline .section02 .sec02-cnt .sec02-cnt-sub .icon-box.item03 {position: absolute; top: 77vw; left: 3px; text-align: center; width: 40vw;}
  .dioline .section02 .sec02-cnt .sec02-cnt-sub .icon-box.item03 > img {width: 40%;}
  .dioline .section02 .sec02-cnt .sec02-cnt-sub > img.item03 {position: absolute; top: 85vw; right: 31vw;; width: 26vw; z-index: 0;}
  .dioline .section02 .sec02-cnt .sec02-cnt-sub .icon-box.item04 {position: absolute; top: 112vw; left: -1vw; text-align: center; width: 42vw;}
  .dioline .section02 .sec02-cnt .sec02-cnt-sub .icon-box.item04 > img {width: 40%;}
  .dioline .section02 .sec02-cnt .sec02-cnt-sub > img.item04 {position: absolute; top: 118vw; right: 30vw;; width: 27vw; z-index: 0;}
  .dioline .section02 .sec02-cnt .sec02-cnt-sub .icon-box.item05 {position: absolute; top: 144vw; left: 2vw; text-align: center;}
  .dioline .section02 .sec02-cnt .sec02-cnt-sub .icon-box.item05 > img {width: 100%;}
  .dioline .section02 .sec02-cnt .sec02-cnt-sub .icon-box.item05 > span {position: absolute; top: 2vw; left: 5vw; line-height: 1.3; font-size: 2.8vw; color: #AD283B;}  
  
  .dioline .section03 {background-color: #FFFFFF;}
  .dioline .section03 .title-wrap .title span {font-size: 7vw;}
  .dioline .section03 .title-wrap .title .sub-txt {margin-top: 30px; line-height: 1.5; font-family:"NotoSans-DemiLight"; font-size: 4vw; letter-spacing: 0px;}
  .dioline .section03 .sec03-cnt > img {width: 100%;}
  .dioline .section03 .sec03-cnt .sec03-cnt-sub {display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; justify-content: center;}
  .dioline .section03 .sec03-cnt .sec03-cnt-sub .sec03-cnt-sub-box {display: flex; margin-top: 10vw; flex-direction: row; align-items: center; flex-wrap: wrap;}
  .dioline .section03 .sec03-cnt .sec03-cnt-sub .sec03-cnt-sub-box h2 {width: 100%; padding: 1.5vw; font-family:"NotoSans-Bold"; font-size: 5vw; background-color: #FFEEEC; color: #AD283B;}
  .dioline .section03 .sec03-cnt .sec03-cnt-sub .sec03-cnt-sub-box .item-box {flex: 1; padding-top: 5vw;}
  .dioline .section03 .sec03-cnt .sec03-cnt-sub .sec03-cnt-sub-box .item-box img.mo-class {display: inline-block; width: 20vw; padding-right: 10vw;}
  .dioline .section03 .sec03-cnt .sec03-cnt-sub .sec03-cnt-sub-box .item-box .txtbox {padding-top: 1vw; font-family:"NotoSans-Light"; font-size: 3.3vw; text-align: left;}
  .dioline .section03 .sec03-cnt .sec03-cnt-sub .sec03-cnt-sub-box .item-box .txtbox span {font-family:"NotoSans-Medium";}
  .dioline .section03 .sec03-cnt .sec03-cnt-sub .sec03-cnt-sub-box > img {width: 37vw; padding-top: 5vw;}
  
  .dioline .section03 .sec03-ref {margin-top: 10vw; text-align: left;}
  .dioline .section03 .sec03-ref span {display: block; font-family:"NotoSans-Light"; font-size: 3.3vw;}
  
  /* E: 브랜드 스토리 */ 

  /* S: 제품정보 */
  .product-info .section01 {padding-top: 20vw;}
  .product-info .title-wrap .title {margin-bottom: 5.33vw;}
  .product-info .title-wrap .title span {line-height: 1.3;}
  .product-info .title-wrap .title span em {font-size: 7.26667vw; color:#AD283B;}
  
  .product-info .section01 .swiper-pagination {display: block; opacity: 1}
  .product-info .section01 .swiper-pagination .swiper-pagination-bullet-active {background-color: #AD283B}
  .product-info .section01 .swiper-button-next,.product-info .section01 .swiper-button-prev {display: block;}
  .product-info .section01 .product-swiper .swiper-wrapper .swiper-slide.on .active-box {background-color: #FFEEEC;}
  .product-info .section01 .product-swiper .swiper-wrapper .swiper-slide.on .product-cnt .txt {color: #222222;}

  .product-info .section02 .product-detail-wrap .title {padding:10vw 0 4vw;}
  .product-info .section02 .product-detail-wrap .title a {background-color: #AD283B;}
  .tit-color {color: #222222;}
  /* E: 제품정보 */

  /* S: 궁금해요 */
  .dioline-qna .title-wrap .title span em {color: #AD283B;}
  .ui-accordion .accordion-item .btn .ico-q {color: #AD283B;}
  /* E: 궁금해요 */

}
/* E: contents - mobile */