/* --------------- motion --------------- 
 -addClass('motion') 되었을때
*/

.fade_m{ /* fade */
    transition: opacity 1s;
    opacity: 0;
}
.upto_m{ /* 위에서 아래로 */
    transform: translate(0, -70px);
    /*transition: transform 0.1s, opacity 0.1s;*/
    opacity: 0;
}
.btmto_m{ /* 아래에서 위로 */
    transform: translate(0, 70px);
    transition: transform 1s, opacity 1s;
    opacity: 0;
}
.btmto_m2{ /* 아래에서 위로2 */
    transform: translate(0, 70px);
    transition: transform 1.5s, opacity 1s;
    opacity: 0;
}
.lftto_m{ /* 왼쪽에서 오른쪽으로 */
    transform: translate(-70px, 0);
    transition: transform 1s, opacity 1s;
    opacity: 0;
}
.rgtto_m{ /* 오른쪽에서 왼쪽으로 */
    transform: translate(70px, 0);
    transition: transform 1s, opacity 1s;
    opacity: 0;
}
.roll_l{
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1s, opacity 0.8s;
    opacity: 0.3;
}
.roll_l.active{
    clip-path: inset(0 0 0 0);
    opacity: 1;
}
.motion.active, .motion-wrap.active .motion_b{ /* active */
    transform: translate(0,0);
    opacity: 1;
}




/* -------------------- introduction -------------------- */

/* 공통 */
.intro-wrap h3{
    font-size: 35px;
    line-height: 1.4;
    letter-spacing: -0.05em;
}
.intro-wrap p.txt1{
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: -0.05em;
}
.intro-wrap p.txt2{
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: -0.05em;
}
.intro-wrap p.txt3{
    font-size: 16px;
    letter-spacing: -0.05em;
    line-height: 1.4;
}
.frame img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.intro-wrap h4{
    display: flex;
    align-items: center;
    font-size: 22px;
    letter-spacing: -0.025em;
}
.intro-wrap h4 .line{
    width: 100px;
    height: 1px;
    background-color: #111111;
    margin-right: 17px;
}


.intro-wrap .se01 h3{
    margin-bottom: 55px;
    letter-spacing: -0.075em;
}
.intro-wrap .se01 p{    
    margin-bottom: 25px;
}
.intro-wrap .se01 .frame{
    width: 100%;
    height: 400px;    
}

.intro-wrap .se02 p.txt2,
.intro-wrap .se03 p.txt2{
    letter-spacing: -0.075em;
}
.intro-wrap .se02 h3,
.intro-wrap .se03 h3{
    margin-bottom: 20px;
    letter-spacing: -0.025em;
}
.intro-wrap .se02 .imgbox{
    display: flex;
    justify-content: space-between;
    margin: 35px 0;
}
.intro-wrap .se02 .imgbox .frame02{
    margin-left: 50px;
    transition-delay: 0.3s;
}
.intro-wrap .se02 .detail-wrap h4{
    margin-bottom: 40px;
}
.intro-wrap .se02 .detail-wrap .icon{
    width: 35px;
    margin-bottom: 25px;
}
.intro-wrap .detail-wrap .num{
    font-size: 22px;
    margin-bottom: 10px;
}
.intro-wrap .se02 .detail-wrap ul{
    display: flex;
    justify-content: space-between;
}
.intro-wrap .se02 .detail-wrap ul li{
    width: calc(25% - 60px/4);
}
.intro-wrap .se02 .detail-wrap ul li:nth-of-type(2){transition-delay: 0.2s;}
.intro-wrap .se02 .detail-wrap ul li:nth-of-type(3){transition-delay: 0.4s;}
.intro-wrap .se02 .detail-wrap ul li:nth-of-type(4){transition-delay: 0.6s;}

.intro-wrap .se03 .imgbox{
    display: flex;
    justify-content: space-between;
    margin: 35px 0;
}
.intro-wrap .se03 .imgbox .frame02{
    margin: 0 50px;
}
.intro-wrap .se03 p.btm.txt3{
    color: #4E4E4E ;
}
/*.intro-wrap .se03 p.btm{
    text-align: center;
}*/
.intro-wrap .se03 p.txt4{
    font-size: 25px;
    margin-bottom: 20px;
}

.intro-wrap .se03 .detail-wrap h4{
    margin-bottom: 50px;
}
.intro-wrap .se03 .detail-wrap .subtit{
    display: flex;
}
.intro-wrap .se03 .detail-wrap .subtit .num{
    margin-right: 30px;
}
.intro-wrap .se03 .detail-wrap ol{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 95%;
    max-width: 1300px;
    margin: 25px auto 0;
}
.intro-wrap .se03 .detail-wrap ol li{
    width: 160px;
    margin: 20px 20px 0;
}
.intro-wrap .se03 .detail-wrap ol li .frame{
    overflow: hidden;
    width: 100%;
    height: 160px;
    border-radius: 50%;
}
.intro-wrap .se03 .detail-wrap ol li p{
    margin-top: 15px;
    text-align: center;
}

.intro-wrap .se03 .detail-wrap ol li:nth-of-type(1){transition-delay: 0.1s;}
.intro-wrap .se03 .detail-wrap ol li:nth-of-type(2){transition-delay: 0.2s;}
.intro-wrap .se03 .detail-wrap ol li:nth-of-type(3){transition-delay: 0.3s;}
.intro-wrap .se03 .detail-wrap ol li:nth-of-type(4){transition-delay: 0.4s;}
.intro-wrap .se03 .detail-wrap ol li:nth-of-type(5){transition-delay: 0.5s;}
.intro-wrap .se03 .detail-wrap ol li:nth-of-type(6){transition-delay: 0.6s;}
.intro-wrap .se03 .detail-wrap ol li:nth-of-type(7){transition-delay: 0.7s;}
.intro-wrap .se03 .detail-wrap ol li:nth-of-type(8){transition-delay: 0.8s;}
.intro-wrap .se03 .detail-wrap ol li:nth-of-type(9){transition-delay: 0.9s;}
.intro-wrap .se03 .detail-wrap ol li:nth-of-type(10){transition-delay: 1.0s;}
.intro-wrap .se03 .detail-wrap ol li:nth-of-type(11){transition-delay: 1.1s;}






/* -------------------- BI -------------------- */
.bi-wrap{
    position: relative;
    padding: 0 75px;
    margin-top: 120px;
    box-sizing: border-box;
}
.bi-wrap .cover{
    display: flex;
    align-items: center;
    gap: 75px;
}
.bi-wrap .lft{
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 606px;
    width: 55%;
    height: 532px;
    margin-top: 50px;
    border: 2px solid #1b1b1b;
    box-sizing: border-box;
    border-top-right-radius: 266px;
    border-bottom-right-radius: 266px;
}
.bi-wrap .lft .frame{
    width: 40%;
    max-width: 220px;
}
.bi-wrap .lft .frame img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.bi-wrap .rgt{
    width: 45%;
}
.bi-wrap .rgt h3{
    font-size: 45px;
    letter-spacing: -0.025em;
    line-height: 1.3;
    margin-bottom: 80px;
}
.bi-wrap .rgt .txt1{
    font-size: 24px;
    letter-spacing: -0.05em;
    line-height: 1.3;
    margin-bottom: 30px;
    transition-delay: 0.4s;
}
.bi-wrap .rgt .txt2{
    font-size: 18px;
    letter-spacing: -0.05em;
    line-height: 1.5;
    transition-delay: 0.7s;
}
.bi-wrap .point-wrap{
    position: absolute;
    top: 0;left: 0;
    width: 145px;
    height: 530px;
    background-image: url(//cdn.dessert39.com/www/img/brand/bi/orora_bg.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.bi-wrap .point-wrap p{
    width: 300px;
    color: #fff;
    font-size: 25px;
    letter-spacing: 0.1em;
    transform: rotate(90deg);
    margin-top: 160px;
    margin-left: -40px;
}

.logodetail-wrap{
    display: flex;
    justify-content: space-between;
    margin-top: 100px;
}
.logodetail-wrap .detail-wrap{
    width: 50%;
    max-width: 606px;
}
.logodetail-wrap .detail-wrap.logo-wrap{margin-right: 20px;}
.logodetail-wrap h4{
    font-size: 26px;
    letter-spacing: -0.025em;
    margin-bottom: 15px;
}
.logodetail-wrap .cont-box{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 213px;
    border: 1px solid #1b1b1b;
}
.logodetail-wrap .cont-box img{
    width: 90%;
    max-width: 220px;
}
.logodetail-wrap .emb-wrap .cont-box img{
    height: 150px;
}
.logodetail-wrap .cont-box .bg{
    position: absolute;
    top: 0;left: 0;
    width: 100%;
    height: 100%;
    background-image: url(//cdn.dessert39.com/www/img/brand/bi/patten_bg.svg);
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.2;
    z-index: -1;
}





/* -------------------- Headquarters -------------------- */
.hq-wrap .cover .bg{
    width: 100%;
    height: 260px;
    background-image: url(//cdn.dessert39.com/www/img/brand/headquaters/orora_bg_1440.png);
    background-size: cover;
}
.hq-wrap .cover .text-wrap{
    width: 95%;
    max-width: 1290px;
    margin: -80px auto 0;
}
.hq-wrap .cover h3{
    font-size: 40px;
    letter-spacing: -0.06em;
    line-height: 1.3;
    margin-bottom: 60px;
}
.hq-wrap .cover .titbox{
    display: flex;
    align-items: flex-end;
    gap: 30px;
    margin-bottom: 35px;
}
.hq-wrap .cover .titbox .topline{
    width: 77px;
    height: 2px;
    background-color: #bad6f8;
}

.hq-wrap .cover p.txt1{
    width: calc(50% - 15px);
    font-size: 22px;
    letter-spacing: 0.01em;
}
.hq-wrap .cover .text-wrap .inner{
    display: flex;
    font-size: 16px;
    gap: 30px;
}
.hq-wrap .cover .text-wrap .inner .lft,
.hq-wrap .cover .text-wrap .inner .rgt{
    width: calc(50% - 15px);
}
.hq-wrap .cover .text-wrap .inner .lft,
.hq-wrap .cover .text-wrap .inner .rgt-01,
.hq-wrap .cover .text-wrap .inner .rgt-02{
    line-height: 1.4;
}
.hq-wrap .cover .text-wrap .inner .rgt-01{
    margin-bottom: 55px;
}
.hq-wrap .cover .text-wrap .inner .topline-mo{display: none;}


.hq-wrap .chart-wrap{
    background-color: #fafafa;
}
.hq-wrap .chart-wrap h3{
    font-size: 45px;
    letter-spacing: 0.01em;
    margin-bottom: 20px;
    text-align: center;
}
.hq-wrap .chart-wrap p.txt2{
    font-size: 16px;
    letter-spacing: -0.05em;
    text-align: center;
    line-height: 1.5;
    margin-bottom: 65px;
}
.hq-wrap .chart-wrap .part-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap:100px;
}
.hq-wrap .chart-wrap .part-wrap{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: calc(100%/3 - 200px/3);
    max-width: 300px;
}
.hq-wrap .chart-wrap .part-wrap .titbox{
    display: flex;
    align-items: center;
    width: 230px;
    height: 85px;
    background-color: #2c2c2c;
    border-radius: 42.5px;
}
.hq-wrap .chart-wrap .part-wrap .titbox .icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-left: 12px;
    background-color: #fff;
    border-radius: 50%;
	overflow:hidden;
}
.hq-wrap .chart-wrap .part-wrap .titbox .icon img{
    width: 73%;
}
.hq-wrap .chart-wrap .part-wrap .titbox p{
    width: calc(100% - 74px);
    color: #fff;
    font-size: 20px;
    letter-spacing: -0.05em;
    text-align: center;
}
.hq-wrap .chart-wrap .part-wrap .linebox{
    width: 1px;
    height: 120px;
}
.hq-wrap .chart-wrap .part-wrap .linebox .line{
    width: 100%;
    height: 0%;
    background-color: #1b1b1b;
    transition: height 1s;
}
.hq-wrap .chart-wrap .part-wrap .linebox .line.active{
    height: 100%;
}
.hq-wrap .chart-wrap .part-wrap .inner{
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: center;
    width: 100%;
}
.hq-wrap .chart-wrap .part-wrap .inner .name{
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(50% - 25px/2);
    max-width: 142px;
    height: 50px;
    font-size: 18px;
    letter-spacing: -0.05em;
    background-color: #e8e8e8;
    border-radius: 26px;
}




/* -------------------- location -------------------- */
.location-wrap .topbox{
    display: flex;
    align-items: center;
}
.location-wrap .section-title{
    font-size: 45px;
    margin-right: 120px;
}
.location-wrap .contact-list{
    display: flex;
}
.location-wrap .contact-list .cont-wrap{
    display: flex;
    align-items: center;
    margin-left: 50px;
}
.location-wrap .contact-list .cont-wrap:first-of-type{margin-left: 0;}
.location-wrap .contact-list .cont-wrap02{
    display: flex;
    align-items: center;
}
.location-wrap .cont-wrap .icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    background-color: #AFD4A5;
    border-radius: 50%;
    margin-right: 15px;
}
.location-wrap .cont-wrap .icon img{
    width: 60%;
}
.location-wrap .cont-wrap h3{
    font-size: 30px;
    letter-spacing: -0.025em;
    margin-bottom: 8px;
}
.location-wrap .cont-wrap p{
    font-size: 18px;
    letter-spacing: -0.025em;
    line-height: 1.3;
}
.location-wrap .map-wrap{
    width: 100%;
    margin-top: 50px;
    height: 470px;
}
.root_daum_roughmap{
    width: 100%;
    height: 100%;
}
.root_daum_roughmap .wrap_controllers{display: none;}
.root_daum_roughmap .wrap_map{
    height: 100%;
}






/* -------------------- 메인 인트로페이지 -------------------- */
.intropage{
    display: flex;
    height: 100vh;
}
.intropage .cover{
    position: relative;
    width: 50%;
    color: #fff;
    background-size: cover;
    background-position: center;
}
.intropage .cover:before{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    content: '';
    transition : background-color 1s;
}
.intropage .lft{
    background-image: url(//cdn.dessert39.com/www/img/intro_menu_bg.jpg);
}
.intropage .rgt{
    background-image: url(//cdn.dessert39.com/www/img/intro_franchise_bg.jpg);
}
.intropage .cover .container{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 100px;
    box-sizing: border-box;
}
.intropage .cover h2{
    font-size: 50px;
    line-height: 1.2;
    margin-top: 80px;
    margin-bottom: 40px;
}
.intropage .cont-wrap{
    display: flex;
    height: 60%;
    max-height: 500px;
}
.intropage .cont-wrap .contbox{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.intropage .cont-wrap .line{
    display: block;
    width: 2px;
    height: 0%;
    background-color: #fff;
    margin-right: 40px;
    transition: height 1s;
}
.intropage .cont-wrap h3{
    font-size: 30px;
    letter-spacing: -0.05em;
    margin-bottom: 20px;
}
.intropage .cont-wrap p{
    font-size: 18px;
    letter-spacing: -0.05em;
    line-height: 1.4;
    margin-bottom: 40px;
}
.intropage .cont-wrap .btn-bubble{
    margin: unset;
    color: #fff;
    border: 2px solid #fff;
}
.intropage .cont-wrap .btn-bubble .btn-bubble-item{
    background-color: #fff;
}

.intropage.active .cont-wrap .line{
    height: 100%;
}

.delay1{transition-delay: 0.2s;}
.delay2{transition-delay: 0.4s;}
.delay3{transition-delay: 0.6s !important;}
.delay4{transition-delay: 0.8s !important;}
.delay5{transition-delay: 1.0s;}
.delay6{transition-delay: 1.2s;}



@media screen and (min-width:1024.1px){

    /* -------------------- 메인 인트로페이지 -------------------- */
    .intropage .cover:hover::before{
        background-color: rgba(0, 0, 0, 0.5);
    }
    .intropage .cont-wrap .btn-bubble:hover{
        color: #1c1c1c;
    }
    .intropage .cont-wrap .btn-bubble:hover .btn-bubble-item{
        transform: translateZ(0) scale(1.7);
    }
}


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

    /* -------------------- introduction -------------------- */
    .intro-wrap .se03 .detail-wrap ol{
        width: 100%;
    }



    /* -------------------- BI -------------------- */
    .bi-wrap{
        /* padding: 50px 0 0 50px; */
        padding: 0 50px;
    }
    .bi-wrap .cover{gap:65px;}
    .bi-wrap .lft{height: 460px;}
    .bi-wrap .rgt h3{
        font-size: 42px;
        margin-bottom: 50px;
    }
    .bi-wrap .rgt .txt2 br{display: none;}
    .bi-wrap .point-wrap{
        width: 130px;
        height: 450px;
    }
    .bi-wrap .point-wrap p{
        margin-left: -50px;
    }



    /* -------------------- Headquarters -------------------- */
    .hq-wrap .chart-wrap .part-list{
        gap: 80px;
    }
    .hq-wrap .chart-wrap .part-wrap{
        width: calc(100%/3 - 160px/3);
    }



    /* -------------------- location -------------------- */
    .location-wrap .section-title{
        font-size: 42px;
        margin-right: 100px;
    }
    .location-wrap .contact-list .cont-wrap{margin-left: 30px;}
    .location-wrap .cont-wrap h3{font-size: 28px;}
    .location-wrap .cont-wrap p{font-size: 17px;}




    /* -------------------- 메인 인트로페이지 -------------------- */
    .intropage .cover .container{
        padding: 50px;
        padding-right: 50px;
    }

}



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

    /* -------------------- introduction -------------------- */

    /* 공통 */
    .intro-wrap h3{font-size: 32px;}
    .intro-wrap p.txt1{font-size: 18px;}
    .intro-wrap p.txt2{font-size: 17px;}
    .intro-wrap p.txt3{font-size: 15px;}

    .intro-wrap .se01 h3{
        margin-bottom: 30px;
    }
    .intro-wrap .se01 .frame{height: 320px;}
    .intro-wrap .se02 .imgbox .frame02{
        margin-left: 15px;
    }
    .intro-wrap .se02 .detail-wrap ul li br{display: none;}

    .intro-wrap .se03 .detail-wrap h4{margin-bottom: 30px;}
    .intro-wrap .se03 .imgbox .frame02{margin: 0 15px;}



    /* -------------------- BI -------------------- */
    .bi-wrap{
        /* padding: unset; */
        margin-top: 80px;
    }
    .bi-wrap .cover{
        gap:40px;
    }
    .bi-wrap .lft{
        /* position: relative; */
        max-width: 500px;
        height: 380px;
        margin-top: 35px;
    }
    .bi-wrap .rgt h3{
        font-size: 38px;
        margin-bottom: 30px;
    }
    .bi-wrap .rgt .txt1{font-size: 20px;}
    .bi-wrap .rgt .txt2{font-size: 17px;}
    .bi-wrap .point-wrap{
        /* top: -50px;left: -50px; */
        width: 100px;
        height: 380px;
        font-size: 20px;
    }
    .bi-wrap .point-wrap p{
        margin-left: -80px;        
    }



    
    /* -------------------- Headquarters -------------------- */
    .hq-wrap .cover .bg{height: 220px;}
    .hq-wrap .cover .text-wrap{margin-top: -70px;}
    .hq-wrap .cover h3{font-size: 36px; margin-bottom: 40px;}

    .hq-wrap .cover .titbox{margin-bottom: 25px;}
    .hq-wrap .cover p.txt1{font-size: 20px;}
    .hq-wrap .cover .text-wrap .inner{
        font-size: 15px;
    }
    .hq-wrap .cover .text-wrap .inner .rgt-01{
        margin-bottom: 30px;
    }
    .hq-wrap .cover .text-wrap .inner br{display: none;}

    .hq-wrap .chart-wrap h3{font-size: 42px;}
    .hq-wrap .chart-wrap .part-list{
        gap: 50px;
    }
    .hq-wrap .chart-wrap .part-wrap{
        width: calc(100%/3 - 100px/3);
    }
    .hq-wrap .chart-wrap .part-wrap .titbox{
        width: 200px;
        height: 70px;
    }
    .hq-wrap .chart-wrap .part-wrap .titbox .icon{
        width: 56px;
        height: 56px;
        margin-left: 8px;
    }
    .hq-wrap .chart-wrap .part-wrap .titbox p{
        width: calc(100% - 64px);
        font-size: 18px;
    }
    .hq-wrap .chart-wrap .part-wrap .linebox{
        height: 90px;
    }
    .hq-wrap .chart-wrap .part-wrap .inner{gap:20px;}
    .hq-wrap .chart-wrap .part-wrap .inner .name{
        height: 46px;
        font-size: 16px;
    }



    /* -------------------- location -------------------- */
    .location-wrap .topbox{
        flex-direction: column;
        align-items: flex-start;
    }
    .location-wrap .contact-list{
        margin-top: 35px;
    }




    /* -------------------- 메인 인트로페이지 -------------------- */
    .intropage .cover h2{
        font-size: 44px;
    }
    .intropage .cont-wrap .line{
        margin-right: 25px;
    }
    .intropage .cont-wrap h3{
        font-size: 28px;
    }
    .intropage .cont-wrap p{
        font-size: 17px;
    }
    .intropage .cont-wrap .btn-bubble{
        color: #1c1c1c;
        background-color: #fff;
    }
}



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


    /* -------------------- introduction -------------------- */
    .intro-wrap h3{font-size: 28px;}
    .intro-wrap h4{font-size: 20px;}
    .intro-wrap h4 .line{width: 80px;}
    
    .intro-wrap .se01 p br{display: none;}
    
    .intro-wrap .se02 p.txt1 br{display: none;}
    .intro-wrap .se02 .detail-wrap h4{
        margin-bottom: 0px;
    }
    .intro-wrap .se02 .detail-wrap .icon{
        width: 30px;
        margin-bottom: 15px;
    }
    .intro-wrap .se02 .detail-wrap ul{
        flex-wrap: wrap;
    }
    .intro-wrap .se02 .detail-wrap ul li{
        width: calc(50% - 10px);		
        margin-top: 20px;
    }

    .intro-wrap .se03 p.txt4{font-size: 22px; margin-bottom: 10px;}
    .intro-wrap .se03 p.btm.txt3 br{display: none;}
    .intro-wrap .se03 .detail-wrap ol{margin-top: 5px;}
    .intro-wrap .se03 .detail-wrap ol li{
        width: 140px;
    }
    .intro-wrap .se03 .detail-wrap ol li .frame{
        height: 140px;
    }




    /* -------------------- BI -------------------- */
    .bi-wrap{
        padding: 0 30px;
    }
    .bi-wrap .cover{gap: unset;}
    .bi-wrap .lft{
        max-width: 420px;
        height: 340px;
        margin-right: 40px;
    }
    .bi-wrap .rgt h3{
        font-size: 32px;        
        margin-bottom: 15px;
        letter-spacing: -0.05em;
    }
    .bi-wrap .rgt .txt1{
        font-size: 18px;
        margin-bottom: 15px;
    }
    .bi-wrap .rgt .txt2{font-size: 15px;}
    .bi-wrap .point-wrap{
        width: 80px;
        height: 330px;
    }
    .bi-wrap .point-wrap p{
        font-size: 20px;
        margin-left: -90px;
    }

    .logodetail-wrap{
        margin-top: 80px;
    }
    .logodetail-wrap h4{font-size: 22px;}
    .logodetail-wrap .cont-box{
        height: 180px;
    }




    /* -------------------- Headquarters -------------------- */
    .hq-wrap .cover .bg{height: 180px;}
    .hq-wrap .cover .text-wrap{margin-top: -60px;}
    .hq-wrap .cover h3{font-size: 32px;}    
    .hq-wrap .cover .text-wrap .inner .rgt-01{
        margin-bottom: 20px;
    }

    .hq-wrap .chart-wrap h3{font-size: 38px;}
    .hq-wrap .chart-wrap p.txt2{
        font-size: 15px;
        margin-bottom: 30px;
    }
    .hq-wrap .chart-wrap .part-list{
        gap: 20px;
    }
    .hq-wrap .chart-wrap .part-wrap{
        width: calc(100%/3 - 40px/3);
        margin-top: 30px;
    }
    .hq-wrap .chart-wrap .part-wrap .linebox{
        height: 60px;
    }
    .hq-wrap .chart-wrap .part-wrap .inner{gap:10px;}
    .hq-wrap .chart-wrap .part-wrap .inner .name{
        width: calc(50% - 10px/2);
        font-size: 15px;
    }



    /* -------------------- location -------------------- */
    .location-wrap .section-title{font-size: 38px;}
    .location-wrap .contact-list{
        flex-wrap: wrap;
        margin-top: 25px;
    }
    .location-wrap .contact-list .cont-wrap{margin-left: unset;}
    .location-wrap .cont-wrap:nth-of-type(2),
    .location-wrap .cont-wrap:nth-of-type(3){
        width: calc(50% - 15px);
        margin-top: 20px;
    }
    .location-wrap .cont-wrap .icon{
        width: 48px;
        height: 48px;
    }
    .location-wrap .cont-wrap h3{
        font-size: 22px;
        margin-bottom: 3px;
    }
    .location-wrap .cont-wrap p{
        font-size: 16px;
    }
    .location-wrap .map-wrap{
        height: 420px;
        margin-top: 30px;
    }



    /* -------------------- 메인 인트로페이지 -------------------- */
    .intropage{
        flex-direction: column;
    }
    .intropage .cover{
        width: 100%;
        height: 50%;
        min-height: 360px;
    }
    .intropage .cover .container{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 50px;
    }
    .intropage .cover h2{
        margin-top: unset;
        font-size: 36px;
    }
    .intropage .cont-wrap{
        height: 65%;
    }
    .intropage .cont-wrap h3{
        font-size: 24px;
        margin-bottom: 15px;
    }
    .intropage .cont-wrap p{
        font-size: 16px;
        margin-bottom: 30px;
    }

}



@media screen and (max-width: 700px) {
    /* -------------------- BI -------------------- */
    .bi-wrap .cover{
        flex-direction: column;
        align-items: flex-start;
    }
    .bi-wrap .lft{
        width: 100%;
        margin-right: unset;
        margin-bottom: 25px;
    }
    .bi-wrap .rgt{width: 100%;}
    .bi-wrap .rgt h3{
        font-size: 40px;
    }
    .bi-wrap .rgt .txt1{
        font-size: 20px;
    }
    .bi-wrap .rgt .txt2{font-size: 17px;}
    .bi-wrap .rgt .txt2 br{display: block;}
    /* .bi-wrap .point-wrap{
        width: 80px;
        height: 330px;
    }
    .bi-wrap .point-wrap p{
        font-size: 20px;
        margin-left: -90px;
    } */

    .logodetail-wrap{
        flex-direction: column;
    }
    .logodetail-wrap .detail-wrap{
        width: 100%;
    }
    .logodetail-wrap .detail-wrap.logo-wrap{
        margin-right: unset;
        margin-bottom: 20px;
    }




    /* -------------------- Headquarters -------------------- */
    .hq-wrap .chart-wrap .part-wrap{
        width: calc(100%/2 - 20px/2);
    }


}



@media screen and (max-width: 600px) {
    /*메인인트로*/
    .competitiveness_btn{
        gap:10px;
    }

    /* -------------------- introduction -------------------- */
    .intro-wrap h3{font-size: 24px;}
    .intro-wrap p.txt1{font-size: 17px;}
    .intro-wrap p.txt2{font-size: 16px;}

    .intro-wrap .se01 h3{margin-bottom: 15px;}
    .intro-wrap .se01 .frame{
        height: 260px;
    }

    .intro-wrap .se02 h3, .intro-wrap .se03 h3{
        margin-bottom: 10px;
    }
    .intro-wrap .se03 p.txt1 br{display: none;}
    .intro-wrap .se03 p.txt4{font-size: 20px;}
    .intro-wrap .se03 .imgbox{margin: 25px 0;}
    .intro-wrap .se03 .detail-wrap ol li{
        margin: 20px 15px 0;
    }


    /* -------------------- BI -------------------- */
    .bi-wrap .rgt .txt2 br{display: none;}
    .logodetail-wrap{
        margin-top: 50px;
    }
    .logodetail-wrap .cont-box{
        height: 180px;
    }
    .logodetail-wrap h4{
        font-size: 22px;
        margin-bottom: 10px;
    }



    /* -------------------- Headquarters -------------------- */
    .hq-wrap .cover .bg{height: 150px;}
    .hq-wrap .cover .text-wrap{margin-top: -50px;}
    .hq-wrap .cover h3{font-size: 28px; margin-bottom: 30px;}
    .hq-wrap .cover .titbox{margin-bottom: 20px;}
    .hq-wrap .cover .titbox .topline{display: none;}
    .hq-wrap .cover p.txt1{
        width: 100%;
        font-size: 18px;
    }
    .hq-wrap .cover .text-wrap .inner{
        flex-direction: column;
        gap: 20px;
    }
    .hq-wrap .cover .text-wrap .inner .lft,
    .hq-wrap .cover .text-wrap .inner .rgt{
        width: 100%;
    }
    .hq-wrap .cover .text-wrap .inner .topline-mo{
        display: block;
        width: 55px;
        height: 2px;
        background-color: #bad6f8;
        margin-top: 20px;
    }

    .hq-wrap .chart-wrap h3{font-size: 32px;}
    /* .hq-wrap .chart-wrap .part-list{gap:10px;} */
    .hq-wrap .chart-wrap .part-wrap{gap:8px;}
    .hq-wrap .chart-wrap .part-wrap .titbox{
        width: 170px;
        height: 58px;
    }
    .hq-wrap .chart-wrap .part-wrap .titbox .icon{
        width: 48px;
        height: 48px;
        margin-left: 5px;
    }
    .hq-wrap .chart-wrap .part-wrap .titbox p{
        width: calc(100% - 53px);
        font-size: 16px;
    }
    .hq-wrap .chart-wrap .part-wrap .linebox{height: 50px;}
    .hq-wrap .chart-wrap .part-wrap .inner .name{
        height: 45px;
    }



    /* -------------------- location -------------------- */
    .location-wrap .section-title{font-size: 32px;}
    .location-wrap .cont-wrap .icon{
        width: 40px;
        height: 40px;
    }
    .location-wrap .cont-wrap h3{
        font-size: 20px;
    }
    .location-wrap .cont-wrap p{font-size: 15px;}

}


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

    /* -------------------- introduction -------------------- */
    .intro-wrap h3{font-size: 22px;}
    .intro-wrap h4{font-size: 19px;}
    .intro-wrap h4 .line{
        width: 60px;
        margin-right: 10px;
    }
    .intro-wrap p.txt1{font-size: 16px;}
    .intro-wrap p.txt2{font-size: 14px;}
	.intro-wrap .se02 .detail-wrap ul li{width:100%;}
    /*.intro-wrap .detail-wrap .num{font-size: 20px;}*/
	.intro-wrap .detail-wrap .num{display:none;}

    .intro-wrap .se01 h3{font-size: 20px;}
    .intro-wrap .se01 .frame{height: 200px;}
    

    .intro-wrap .se02 .imgbox{
        flex-direction: column;
    }
    .intro-wrap .se02 .imgbox .frame{
        width: 100%;
        height: 200px;
    }
    .intro-wrap .se02 .imgbox .frame02{
        margin-left: unset;
        margin-top: 10px;
    }
    .intro-wrap .se02 .detail-wrap .icon{
        width: 25px;
        margin-bottom: 10px;
    }

    .intro-wrap .se03 p.txt4{
        font-size: 18px;     
        line-height: 1.3;
    }
    .intro-wrap .se03 .imgbox{
        flex-direction: column;
    }
    .intro-wrap .se03 .imgbox .frame{
        width: 100%;
        height: 200px;
    }
    .intro-wrap .se03 .imgbox .frame02{
        margin: 10px 0;
    }
    .intro-wrap .se03 .detail-wrap .subtit .num{margin-right: 15px;}
    .intro-wrap .se03 .detail-wrap .subtit br{display: none;}
    .intro-wrap .se03 .detail-wrap ol li{
        width: 120px;
    }
    .intro-wrap .se03 .detail-wrap ol li .frame{
        height: 120px;
    }



    /* -------------------- BI -------------------- */
    .bi-wrap{
        padding: 0 20px;
        margin-top: 60px;
    }
    .bi-wrap .lft{
        height: 280px;
        margin-top: 20px;
    }
    .bi-wrap .rgt h3{
        font-size: 30px;
    }
    .bi-wrap .rgt .txt1{font-size: 18px;}
    .bi-wrap .rgt .txt2{font-size: 16px;}
    .bi-wrap .point-wrap{
        width: 70px;
        height: 260px;
    }
    .bi-wrap .point-wrap p{
        font-size: 18px;
        margin-left: -100px;
        margin-top: 155px;
    }
    .logodetail-wrap h4{font-size: 20px;}
    .logodetail-wrap .cont-box{height: 160px;}
    .logodetail-wrap .cont-box img{max-width: 180px;}
    .logodetail-wrap .emb-wrap .cont-box img{height: 120px;}



    /* -------------------- Headquarters -------------------- */
    .hq-wrap .chart-wrap h3{
        font-size: 28px;
        margin-bottom: 15px;
    }
    .hq-wrap .chart-wrap p.txt2{
        margin-bottom: 10px;
    }
    .hq-wrap .chart-wrap .part-list{gap: 10px;}
    .hq-wrap .chart-wrap .part-wrap .titbox{
        width: 155px;
        height: 52px;
    }
    .hq-wrap .chart-wrap .part-wrap .titbox .icon{
        width: 42px;
        height: 42px;
    }
    .hq-wrap .chart-wrap .part-wrap .titbox p{
        width: calc(100% - 47px);
        font-size: 15px;
    }
    .hq-wrap .chart-wrap .part-wrap .inner{gap: 5px;}
    .hq-wrap .chart-wrap .part-wrap .inner .name{
        height: 40px;
        font-size: 13px;
        letter-spacing: -0.1em;
    }




    /* -------------------- location -------------------- */
    .location-wrap .section-title{
        font-size: 28px;
    }
    .location-wrap .cont-wrap:nth-of-type(2),
    .location-wrap .cont-wrap:nth-of-type(3){
        width: calc(50% - 15px/2);
    }
    .location-wrap .cont-wrap .icon{
        width: 35px;
        height: 35px;
        margin-right: 10px;
    }
    .location-wrap .cont-wrap h3{font-size: 18px; margin-bottom: 0px;}
    .location-wrap .cont-wrap p{font-size: 14px;}

    .location-wrap .map-wrap{height: 360px;}




    /* -------------------- 메인 인트로페이지 -------------------- */
    .intropage .cover .container{
        padding: 25px;
    }
    .intropage .cover h2{
        font-size: 30px;
        margin-top: 15px;
    }
    .intropage .cont-wrap .line{
        margin-right: 15px;
    }
    .intropage .cont-wrap h3{
        font-size: 22px;
    }
    .intropage .cont-wrap p{
        font-size: 14px;
    }
    .competitiveness_btn{
        gap:10px;
    }

}



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

    /* -------------------- introduction -------------------- */
    .intro-wrap .se03 .detail-wrap ol li{
        width: calc(50vw - 30px);
        margin: 20px 0 0;
    }
    .intro-wrap .se03 .detail-wrap ol li .frame{
        height: calc(50vw - 30px);
    }
    .intro-wrap .se03 .detail-wrap ol li:nth-of-type(2n){
        margin-left: 20px;
    }



    /* -------------------- BI -------------------- */
    .bi-wrap{
        padding: 0 10px;
    }
    .bi-wrap .lft{
        height: 250px;
    }
    .bi-wrap .rgt h3{font-size: 28px;}
    .bi-wrap .point-wrap{
        width: 65px;
        height: 245px;
    }
    .bi-wrap .point-wrap p{
        font-size: 17px;
        margin-left: -105px;
    }
    .bi-wrap .rgt .txt2{font-size: 14px;}




    /* -------------------- Headquarters -------------------- */
    .hq-wrap .cover .bg{height: 120px;}
    .hq-wrap .cover h3{font-size: 24px; margin-bottom: 20px;}
    .hq-wrap .cover p.txt1{font-size: 17px; margin-bottom: 15px;}
    .hq-wrap .cover .text-wrap{margin-top: -45px;}
    .hq-wrap .cover .text-wrap .inner{font-size: 14px; gap: 15px;}
    .hq-wrap .cover .text-wrap .inner .rgt-01{margin-bottom: 15px;}

    .hq-wrap .chart-wrap .part-wrap{
        width: 90%;
    }
    .hq-wrap .chart-wrap .part-wrap .inner{gap: 10px;}
}



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

    /* -------------------- Headquarters -------------------- */
    .hq-wrap .cover h3 br{display: none;}



    /* -------------------- location -------------------- */
    .location-wrap .contact-list .cont-wrap{
        width: 100%;
    }
    .location-wrap .contact-list .cont-wrap:nth-of-type(1) .txtbox{
        width: calc(100% - 45px);
    }



    /* -------------------- 메인 인트로페이지 -------------------- */
    .intropage .cover .container{
        padding: 25px;
    }
    .intropage .cover h2{
        font-size: 26px;
        margin-bottom: 25px;
    }

    .intropage .cont-wrap p{
        font-size: 14px;
    }

}


/*==========메인 인트로 페이지 변경 231114==========*/
.competitiveness_btn{
    display: flex;
    align-items: center;
    gap: 15px;
    width:100%;
}