@charset "utf-8";

/*.msg_sect  이거 검색해서 바로 상단에다 넣으셈 */


/*.intro_sect {}*/
/*.intro_sect .in { max-width:180rem; position: static; }*/
/*.intro_sect .year { display: flex; align-items: center; font-size:18rem; margin:12rem 0; justify-content: center; line-height: 1; }*/
/*.intro_sect .year strong { font-weight:600; transition: all 0.8s ease; }*/
/*.intro_sect .year strong:nth-child(1) { transform: translateX(50%); opacity:0;}*/
/*.intro_sect .year strong:last-child { opacity: 0; ;}*/
/*.intro_sect .year span {  width:60rem; width:0; transition: all 1.4s ease; height:1.5rem;   background: url("data:image/svg+xml,%3Csvg width='600' height='15' viewBox='0 0 600 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='2' height='15' fill='black'/%3E%3Crect x='23.0371' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='45.0742' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='67.1113' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='89.1484' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='111.186' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='133.223' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='155.26' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='177.297' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='199.334' width='2' height='15' fill='black'/%3E%3Crect x='222.371' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='244.408' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='266.445' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='288.482' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='310.518' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='332.555' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='354.592' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='376.629' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='398.666' width='2' height='15' fill='black'/%3E%3Crect x='421.703' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='443.74' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='465.777' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='487.814' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='509.852' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='531.889' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='553.926' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='575.963' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='598' width='2' height='15' fill='black'/%3E%3C/svg%3E") no-repeat 0 0 / auto 1.5rem;}*/
/*.intro_sect .year span.mobile { display: none;}*/
/*.intro_sect .year.active span { width:60rem;margin:0 5rem; }*/
/*.intro_sect .year.active strong:nth-child(1) { transform: unset; opacity:1; }*/
/*.intro_sect .year.active strong:last-child { opacity: 1;}*/


.intro_sect {margin-bottom: var(--secPd)}
.intro_sect .in { max-width:180rem; position: static; }
.intro_sect .year { display: flex; align-items: center; font-size:18rem; margin:12rem 0; justify-content: center; line-height: 1; }
.intro_sect .year .num {display: flex; font-weight: 700; transition: all 1.4s ease;}
.intro_sect .year .num.after {transform: translateX(50%);opacity: 0; transition-delay: 0.2s}
.intro_sect .year .num.before {transform: translateX(-50%)}
.intro_sect .year .line {  width:0rem; transition: all 1.4s ease; height:1.5rem;   background: url("data:image/svg+xml,%3Csvg width='600' height='15' viewBox='0 0 600 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='2' height='15' fill='black'/%3E%3Crect x='23.0371' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='45.0742' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='67.1113' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='89.1484' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='111.186' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='133.223' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='155.26' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='177.297' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='199.334' width='2' height='15' fill='black'/%3E%3Crect x='222.371' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='244.408' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='266.445' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='288.482' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='310.518' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='332.555' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='354.592' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='376.629' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='398.666' width='2' height='15' fill='black'/%3E%3Crect x='421.703' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='443.74' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='465.777' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='487.814' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='509.852' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='531.889' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='553.926' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='575.963' y='3.5' width='1' height='8' fill='black' fill-opacity='0.5'/%3E%3Crect x='598' width='2' height='15' fill='black'/%3E%3C/svg%3E") no-repeat center / auto 1.5rem;}
.intro_sect .year span.mobile {display: none}

.intro_sect .year.active .line {width: 70rem}
.intro_sect .year.active .num.after {opacity: 1; transform: unset}
.intro_sect .year.active .num.before {transform: unset}

.intro_sect .sub_tit.fill_txt.txt_b{font-size:calc(var(--tit70) * 1.8); margin-bottom: 0; padding-right: 0.3em; line-height: 1.2}

.odometer-formatting-mark {display: none !important;}


@media screen and (max-width: 1240px) {
    .history_page .goldhistory_sect .sub_tit {margin-bottom: 100px}

}

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

    .intro_sect .sub_tit.fill_txt.txt_b{font-size:calc(var(--tit50) * 1.5); }


    /*스토리 > 히스토라 */
    .history_page .history_nav ul {padding: 1em var(--inPd)}



}

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


    /*스토리 > 히스토라 */

    .history_page .goldhistory_sect .sub_tit {margin-bottom: 50px;}

    .history_page .history .bar {left: 19px; }
    .history_page .history .bar p:before {width: 6.5rem; height: 6.5rem}

    .history_page .history .cont {display: block; padding-left: 55px}
    .history_page .history .cont .tit {position: static; font-size: 24px; width: 100%}
    .history_page .history .cont .list {padding-left: 0; width: 100%; margin-top: 30px}
    .history_page .history .cont .list dl {display: block}
    .history_page .history .cont .list dl dt {width: 100%; font-size: var(--txt22); margin-bottom: 5px}
    .history_page .history .cont .list dl dd ul li {margin-bottom: 15px}
    .history_page .history .cont .list dl dd ul li.img {position: relative; }
    .history_page .history .cont .list dl dd ul li.img:before {content: "";position: absolute; inset: 0; background-color: rgba(255,255,255,0.05)}
    .history_page .history .cont .list dl dd ul li img {width: 100%}
    .history_page .history .cont .list dl dd ul li:last-child {margin-bottom: 0}

}


/* 특별함 */

@media screen and (max-width: 1640px) {
    .intro_sect .year {font-size: 16rem}
    .core_sect .box .circle {width: 70%}
    .value_sect ul li .item dl dd {font-size: var(--txt20)}
    /*.point_sect2 .left .img_box {height: 80vh}*/
    .point_sect2 .left .img_box .img img {width: 100%; height: 100%}

    .point_sect2 .left {padding-top: 0; }
    .point_sect2 .right .txt_box {min-height: 100vh; display: flex; flex-direction: column; justify-content: center}

    .data_sect {padding-top: 0}
    .value_sect {padding-bottom: var(--secPd2)}

    .data_box .left_box .txt1 strong {font-size: 15rem}

    }


@media screen and (max-width: 1440px) {
    .point_sect2 .right .txt_box { padding:15rem 0 15rem 5rem;}
}


@media screen and (max-width: 1240px) {
    .intro_sect .year.active .line {width: 30rem}
    .core_sect .box .txt strong {font-size: var(--tit70)}
    .value_sect ul {gap: 15px;}

    .value_sect.active ul li .item.active.num1 {transform: translateX(calc(100% + 15px));}
    .value_sect.active ul li .item.active.num2 {transform: translateX(calc(100% + 15px));}
    .value_sect.active ul li .item.active.num3 {transform: translateX(calc(100% + 15px));}
    .value_sect.active ul li .item.copy.num2, .value_sect.active ul li .item.copy.num1 {transform: translateX(calc(100% + 15px))}
    .value_sect.active.on ul li .item.active.num2 {transform: translateX(calc(200% + 30px));}
    .value_sect.active.on ul li .item.active.num3 {transform: translateX(calc(200% + 30px));}

    .value_sect ul li .item dl dt {font-size: var(--tit50)}
    .value_sect ul li .item dl dd {padding: 0 1em}

    .data_box .left_box .txt1 strong {font-size: var(--tit70)}
    .data_box .center_box .img {border-radius: 15px}
    .data_box .right_box .txt2 div {padding-left: 15px}
    .data_box .right_box .txt2 p {font-size: var(--txt20)}
    .data_box .right_box .txt2 p br {display: none}

}

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

    .point_wrap {position: relative}
    .point_sect2 {display: block}
    .point_sect2 .left {display: none}
    .point_sect2 .right {overflow-x: auto; display: flex; width: calc(100% + var(--inPd) * 2); margin-left: calc(var(--inPd) * -1); padding: 0 var(--inPd)}
    .point_sect2 .right::-webkit-scrollbar {display: none}
    .point_sect2 .right .cont {width: 45%; flex-shrink: 0}
    .point_sect2 .right .cont + .cont {margin-left: 30px}
    .point_sect2 .right .txt_box .txt2 {font-size: var(--tit50)}
    .point_sect2 .right .txt_box .txt2 br {display: none}
    .point_sect2 .right .img {display: block; border-radius: 15px; overflow: hidden}
    .point_sect2 .right .txt_box {padding: 0; height: auto; min-height: 0;}
    .point_sect2 .right .txt_box .num {position: static; font-size: var(--tit50);}

    .point_sect2 .right .txt_box .txt3 { margin-top: 20px}
    .point_sect2 .right .txt_box .txt3 br {display: none}
    .point_sect2 .right .txt_box .txt4 p {opacity: 0.6; margin-bottom: 0}
    .point_sect2 .right .txt_box .txt4 p br {display: none}


    .point_sect2 .right .txt_box .crc {grid-template-columns: repeat(2, minmax(0, 1fr)); width: 80%; gap: 10px; margin: 15px auto 0}
    .point_sect2 .right .txt_box .crc div dl dt img {width: 2.5em}

    .special_page .data_sect {padding-top: var(--secPd)}
    .point_sect2 .right .txt_box .crc div dl dd {font-size: var(--txt18)}
    .point_sect2 .right .txt_box .txt5 p {font-size: var(--txt18)}


}

@media screen and (max-width: 768px) {
    /*.wrap_specialty .full_visual .sub_visual.specialty {height: auto; padding: 15% 0 40%}*/
    .wrap_specialty .full_visual .sub_visual.specialty {height: 90lvh; padding-top: 15%;}
    body.kakao .wrap_specialty .full_visual .sub_visual.specialty {height: calc(var(--kakaoVh) * 0.9); min-height: 90lvh;}
    


    .full_visual .sub_visual.specialty .sub_visual_img {position: absolute; height: 100%}
    .full_visual .sub_visual.specialty .tit_wrap {position: static; padding-top: 0}
    .full_visual .sub_visual.specialty .sub_visual_img .img {padding-top: 0; height: 100%}

    .sign_sect .txt_box .txt {font-size: var(--tit25)}
    .sign_sect .txt_box .txt + .txt {margin-top: 5rem; }
    .text_ani {font-size: 9vw; padding-top: 0}

    .value_sect ul li .item svg {width: 3em}
    .value_sect ul li .item dl dt {margin-bottom: 2rem}
    .special_tit_box {margin-bottom: var(--contMt2)}

    .point_sect2 .right .cont {width: 60%}
    .point_sect2 .right .cont + .cont {margin-left: 15px}

    .value_sect {padding-bottom: 0}
    .point_sect2 .right {padding-top: var(--secPd)}

    .data_sect .img {position: relative; overflow: hidden; border-radius: 15px}
    .data_sect .img:before {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.3)}
    .data_sect .img_tit {position: absolute; right: 30px; bottom: 15px; color: #fff; font-weight: 700; font-size: 38px; line-height: 1.1}
    .data_sect .txt_box {margin-top: 20px}
    .data_sect .txt_box .tit {font-size: var(--tit30); font-weight: 700}
    .data_sect .txt_box .txt {margin-top: 10px; }





}

@media screen and (max-width: 600px) {
    .text_ani {font-size: 15vw}
    .core_sect .box .txt {width: 80%}
    .core_sect .box .circle {width: 100%}


    .value_sect ul {display: block; height: 680px; width: 240px; margin-left: auto; margin-right: auto}
    .value_sect ul li {padding-top: 100%;}
    .value_sect ul li .item {border-radius: 50%}
    .value_sect.active ul li .item.active.num1 {transform: translateY(calc(100% - 25px));}
    .value_sect.active ul li .item.active.num2 {transform: translateY(calc(100% - 25px));}
    .value_sect.active ul li .item.active.num3 {transform: translateY(calc(100% - 25px));}
    .value_sect.active ul li .item.copy.num2, .value_sect.active ul li .item.copy.num1 {transform: translateY(calc(100% - 25px))}
    .value_sect.active.on ul li .item.active.num2 {transform: translateY(calc(200% - 50px));}
    .value_sect.active.on ul li .item.active.num3 {transform: translateY(calc(200% - 50px));}


    .point_sect2 .right .cont {width: 90%}
    .point_sect2 .right .cont + .cont {margin-left: 25px}
    .point_sect2 .right .txt_box .num {font-size: var(--tit70);}
    .point_sect2 .right .txt_box .txt1 {font-size: var(--txt20); margin-bottom: 1rem}
    .point_sect2 .right .txt_box .txt2 {font-size: 32px; margin-bottom: 25px}
    .point_sect2 .right .txt_box .txt3 {font-size: var(--txt22)}



}