@charset "utf-8";
/* 브랜드 스토리 반응형 */


/*.sub.story_page { margin-top: -16rem; } !* 서브 비주얼 아래 마진 공용으로 하고 변경해야할듯 (반응형 고려) *!*/
/* > sub3에 있던 스타일 sub2로 옮겼고, 변수 사용 */

/* 호버 스타일 */
@media screen and (min-width: 1024px) {  }

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

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

/* 1640px - 1241px */
@media screen and (max-width: 1640px) { 

    .story_page .slogan_sect .cont .cont_bg { height: 100%; }
    .story_page .slogan_sect .cont .cont_bg img { height: 100%; object-fit: cover; }

    .story_page .slogan_sect .cont .side_ico_cont .side_box { width: 25%; align-items: center; }
    .story_page .slogan_sect .cont .side_ico_cont .side_box .ico { max-width: 17rem; }

 }

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

/* 1240px - 769px */
@media screen and (max-width: 1240px) {

    .story_page .do_cir_sect{overflow: hidden;}
    .story_page .do_cir_sect .cont { grid-template-columns: 22rem minmax(0, 45rem) 22rem; justify-content: center; align-items: center; gap: 5rem; padding: 0; }
    /*.story_page .do_cir_sect .cont .bg { display: none; }*/
    .story_page .do_cir_sect .cont .bg{width: 90rem; height: auto;}
    .story_page .do_cir_sect .cont .sub_cir_box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-left: 15px;}
    .story_page .do_cir_sect .cont .sub_cir_box .sub_cir { padding-top: 100%;}
    .story_page .do_cir_sect .cont .sub_cir_box .sub_cir + .sub_cir { margin-left: 0; }
    .story_page .do_cir_sect .cont .sub_cir_box .sub_cir:nth-child(even){margin-left:-15px;}
    .story_page .do_cir_sect .cont .sub_cir_box .sub_cir:nth-child(3),
    .story_page .do_cir_sect .cont .sub_cir_box .sub_cir:nth-child(4){margin-top:-15px;}

    .story_page .slogan_sect .cont .side_ico_cont .side_box { width: 30%; }

    .story_page .slogan_sect .cont .logo_cont { display: flex; align-items: center; justify-content: center; flex-direction: column; }
    .story_page .slogan_sect .cont .logo_cont .logo { max-width: 55rem; }

    .story_page .logo_sect .line_box { height: 20rem; }

    .story_page .logo_sect .cont { gap: 3rem; }
    .story_page .logo_sect .cont .logo_cont .txt_box .txt { margin-top: 0.5rem; }
    .story_page .logo_sect .cont .logo_cont .txt_box .txt br { display: none; }

    .story_page .story_philo_sect .cont .philo_txt { padding-top: 28vh; }
    .story_page .story_philo_sect .cont .philo_img { width: calc(100% - 6rem); }
    .story_page .story_philo_sect .cont .philo_txt .txt_box .txt br { display: none; }


    .story_page .story_rule_sect .rule_slide .item .txt_box{ padding: 5.2rem; }
    .story_page .story_rule_sect .rule_slide .item .ico { margin-bottom: 4.5rem; }
    

 }

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

/* 768px - 500px */
@media screen and (max-width: 768px) { 

    /*.story_page .visual_sect { height: calc(100lvh - var(--hdH) - 7.2rem); }*/
    .story_page .visual_sect .cont_box { border-radius: 40rem 0 40rem 0; }
    .story_page .visual_sect .cont .tit_box .tit { font-size: var(--tit); }

    .story_page .do_cir_sect .cont { display: flex; flex-direction: column; }

    /*.story_page .do_cir_sect .cont .main_cir { width: 30%; padding-top: 30%; }*/
    .story_page .do_cir_sect .cont .main_cir { width: 30rem; padding-top: 0; height: 30rem; }
    .story_page .do_cir_sect .cont .sub_cir_box { width: 54rem; max-width: calc(100% + 30px);}
    .story_page .do_cir_sect .cont .bg { display:block; transform: translate(-50%, -50%) rotate(90deg); width: 115rem; }


    .story_page .slogan_sect { height: 100lvh; overflow: hidden; }
    .story_page .slogan_sect .cont .side_ico_cont .side_box { width: 50%; }
    .story_page .slogan_sect .cont .logo_cont .logo { max-width: 50%; }
    
    .story_page .logo_sect .line_box { height: 12rem; }
    .story_page .logo_sect .line .dot { width: 8px; height: 8px; }
    
    .story_page .logo_sect .cont { grid-template-columns: minmax(0, 1fr); }
    .story_page .logo_sect .cont .logo_cont { display: flex; justify-content: space-between; align-items: center; }
    
    .story_page .logo_sect .cont .logo_cont .logo_box { width: 45%; }
    .story_page .logo_sect .cont .logo_cont .txt_box { width: 50%; margin-top: 0; }

    .story_page .story_philo_sect { overflow: hidden; }
    .story_page .story_philo_sect .cont { flex-direction: column; }
    .story_page .story_philo_sect .cont .sticky_box { position: relative; top: unset; width: 100%; }
    .story_page .story_philo_sect .cont .philo_txt { display: flex; align-items: center; justify-content: flex-start; width: calc(100% + var(--inPd) * 2); padding: 0 var(--inPd); margin-left: calc(var(--inPd) * -1); padding-top: var(--contMt); overflow-x: auto; }
    .story_page .story_philo_sect .cont .philo_txt::-webkit-scrollbar {display: none}
    .story_page .story_philo_sect .cont .philo_txt .txt_box { width: 65%; margin-bottom: 0; flex-shrink: 0; opacity: 1; }
    .story_page .story_philo_sect .cont .philo_txt .txt_box + .txt_box { margin-left: 5rem; }
    .story_page .story_philo_sect .cont .philo_txt .txt_box .img { display: block; border-radius: 2rem; overflow: hidden; }
    .story_page .story_philo_sect .cont .philo_txt .txt_box .num_box { margin-top: 3rem; }
    .story_page .story_philo_sect .cont .philo_txt .txt_box .num { padding: 0.5rem 1.2rem; }
    .story_page .story_philo_sect .cont .philo_txt .txt_box .txt { margin-left: 5.4rem; }
    .story_page .story_philo_sect .cont .philo_img { display: none; }

    .story_page .story_rule_sect .rule_slide { margin: 0 calc(var(--inPd) * -1); padding: 0 var(--inPd); }
    .story_page .story_rule_sect .rule_slide .item .txt_box{ padding: 3.2rem; }
    .story_page .story_rule_sect .rule_slide .item .ico { margin-bottom: 2.5rem; }
    .story_page .story_rule_sect .rule_slide .item .txt { margin-top: 0.7em; }


 }

/* 500px ~ */
@media screen and (max-width: 620px) { 

    .sub .sub_page_tit .txt br { display: none; }

    .story_page .visual_sect .cont_box { border-radius: 30rem 0 30rem 0; }
    .story_page .visual_sect .cont .tit_box .tit { font-size: var(--smTit); }

    .story_page .do_cir_sect .cont .main_cir { width: 24rem; height: 24rem; }
    /*.story_page .do_cir_sect .cont .sub_cir_box { width: 95%; }*/
    .story_page .do_cir_sect .cont .sub_cir_box{width: 56rem;}
    .story_page .do_cir_sect .cont .bg { display:block; transform: translate(-50%, -50%) rotate(90deg); width: 108rem; }
    .story_page .do_cir_sect .cont .sub_cir_box .sub_cir .txt{font-size:13px; padding: 0 10%;}

    .story_page .slogan_sect .cont .side_ico_cont .side_box .ico { max-width: 13rem; }  
    .story_page .slogan_sect .cont .side_ico_cont .side_box .txt_box { margin-top: 6.5rem; }
    .story_page .slogan_sect .cont .side_ico_cont .side_box .txt_box .txt { font-size: var(--txt2); white-space: nowrap; }

    .story_page .slogan_sect .cont .logo_cont .txt_box .txt { font-size: var(--txt1); }

    .story_page .logo_sect .cont { gap: 6rem; }
    .story_page .logo_sect .cont .logo_cont { flex-direction: column; }
    .story_page .logo_sect .cont .logo_cont .logo_box { width: 100%; }
    .story_page .logo_sect .cont .logo_cont .txt_box { width: 100%; margin-top: 2rem; }

    .story_page .story_philo_sect .cont .philo_txt .txt_box { width: 85%; }
    .story_page .story_philo_sect .cont .philo_txt .txt_box .txt { margin-top: 0.6em; }
    .story_page .story_philo_sect .cont .philo_txt .txt_box + .txt_box { margin-left: 3rem; }

    .story_page .story_rule_sect .cont_tit .paging { display: none; }

 }