.sub-block{width: 100%; overflow: hidden;}
.sub-inner{max-width: 1200px; width: 95%; margin: auto;}

.sub-head{width:100%; min-height: 260px; padding: 100px 0 54px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; background-repeat: no-repeat; background-size: cover; background-position: center; box-sizing: border-box;}
.sub-head.sub01{background-image: url('../img/sub/visual/sub_visual_01.png');}
.sub-head.sub02{background-image: url('../img/sub/visual/sub_visual_02.png');}
.sub-head.sub03{background-image: url('../img/sub/visual/sub_visual_03.png');}
.sub-head.sub04{background-image: url('../img/sub/visual/sub_visual_04.png');}
.sub-head h1{width: 100%; position: relative; font-family: var(--font-esamanruOTF); font-size: 50px; font-weight: 500; text-align: center; color: #fff;}
.sub-head h1::after{content: ""; position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: 1px; background-color: rgba(255,255,255,0.2);}
.sub-head .location{font-size: 14px; font-weight: 200; letter-spacing: -0.35px; text-align: left; color: #fff;}

.sub-contents{}
.sub-contents .contents-section h2{font-size: 55px; line-height: 1.09; letter-spacing: -1.38px; text-align: left; color: #999;}
.sub-contents .contents-section .sub__img{width: 100%; position: relative;}
.sub-contents .contents-section .sub__img img{width: 100%;}
.sub-contents .contents-section .sub__img .txt{position: absolute; bottom: 50px; padding: 0 40px; font-family: var(--font-esamanruOTF); font-size: 30px; font-weight: bold; text-align: left; color: #fff;}

.sub-tit{font-family: var(--font-esamanruOTF); font-size: 25px; line-height: 1.4; text-align: left; color: var(--main-color);}
.sub-tit-ko{font-family: var(--font-esamanruOTF); font-size: 18px; font-weight: 300; letter-spacing: -0.45px; text-align: left; color: #040000;}
.paragraph{}
.paragraph p{font-size: 18px; font-weight: 500; line-height: 1.67; letter-spacing: -0.45px; text-align: left; color: #040000; word-break: keep-all;}
.paragraph p + p{margin-top: 30px;}
p.default{font-size: 18px; font-weight: 500; line-height: 1.67; letter-spacing: -0.45px; text-align: left; color: #040000; word-break: keep-all;}

.contents-section .sub-left{width: 176px;}
.contents-section .sub-right{width: calc(100% - 176px - 18.66%); margin-left: 18.66%;}






.sub-contents.sub01_1{}
.sub-contents.sub01_1 .contents-section.company-intro{}
.sub-contents.sub01_1 .contents-section.company-intro .sub-right b{font-size: 35px; letter-spacing: -0.88px; text-align: left; color: #040000;}
.sub-contents.sub01_1 .contents-section.company-intro .sub-right .diagram{width: 800px; display: flex; align-items: center; position: relative;}
.sub-contents.sub01_1 .contents-section.company-intro .sub-right .diagram li{width: 250px; height: 250px; display: flex; flex-direction: column; align-items: center; padding: 35px; border-radius: 50%; border: solid 5px var(--main-color); box-sizing: border-box;}
.sub-contents.sub01_1 .contents-section.company-intro .sub-right .diagram li + li{margin-left: 25px;}
.sub-contents.sub01_1 .contents-section.company-intro .sub-right .diagram li span{display: inline-block;}
.sub-contents.sub01_1 .contents-section.company-intro .sub-right .diagram li span.num{margin-top: 30px; font-family: var(--font-GmarketSansBold); font-size: 24px; text-align: center; color: var(--main-color);}
.sub-contents.sub01_1 .contents-section.company-intro .sub-right .diagram li p{font-family: var(--font-GmarketSansBold); font-size: 38px; letter-spacing: -1.9px; text-align: center; color: var(--main-color);}
.sub-contents.sub01_1 .contents-section.company-intro .sub-right .diagram li span.en{font-family: var(--font-GmarketSansBold); font-size: 14px; text-align: center; color: var(--main-color);}
.sub-contents.sub01_1 .contents-section.company-intro .sub-right .representative{display: flex; align-items: center;}
.sub-contents.sub01_1 .contents-section.company-intro .sub-right .representative p{font-size: 18px; font-weight: 500; line-height: 1.67; text-align: left; color: #000;}
.sub-contents.sub01_1 .contents-section.company-intro .sub-right .representative b{display: inline-block; margin-left: 15px; font-family: 'ROEHOE-CHAN'; font-size: 40px; line-height: 0.75; letter-spacing: normal; text-align: left; color: #000;}

.sub-contents.sub01_2 .contents-section.directions .sub-left {width: 365px;}
.sub-contents.sub01_2 .contents-section.directions .sub-left .sub-tit{font-family: 'Pretendard'; font-size: 55px; font-weight: bold; line-height: 1.09; letter-spacing: -1.38px; text-align: left; color: #040000;}
.sub-contents.sub01_2 .contents-section.directions .sub-right{width: calc(100% - 365px - 6.66%); margin-left: 6.66%; padding-top: 60px;}
.sub-contents.sub01_2 .contents-section.directions .sub-right .directions-info{width: 100%;}
.sub-contents.sub01_2 .contents-section.directions .sub-right .directions-info td.tit{width: 60px; font-family: 'esamanruOTF'; font-size: 18px; font-weight: 500; line-height: 1.67; text-align: left; color: var(--main-color);}
.sub-contents.sub01_2 .contents-section.directions .sub-right .directions-info td.con{width: calc(100% - 60px); font-size: 18px; line-height: 1.67; text-align: left; color: #040000; word-break: keep-all;}
.sub-contents.sub01_2 .contents-section.directions .directions__map{margin-top: 60px;}
.sub-contents.sub01_2 .contents-section.directions .directions__map .root_daum_roughmap{width: 100% !important;}
.sub-contents.sub01_2 .contents-section.directions .directions__map .root_daum_roughmap .wrap_map{height: 620px !important;}




@media (max-width:1024px) {
    .contents-section .sub-inner.flex{flex-direction: column;}
    .contents-section .sub-left{width: 176px;}
    .contents-section .sub-right{width: 100%; margin-left:0; margin-top: 60px;}

    .sub-contents .contents-section .sub__img{padding-top: 50px; margin-top: 0;}

    .sub-contents.sub01_2 .contents-section.directions .sub-right{width: 100%; margin-left: 0; padding-top: 0;}
}

@media (max-width:769px) {
    .sub-head h1{font-size: 36px;}
    .sub-contents{margin-top: 100px;}
    .sub-contents .contents-section h2{font-size: 36px;}
    .sub-contents .contents-section .sub__img .txt{bottom: 20px; padding: 0 20px; font-size: 24px;}

    .sub-contents.sub01_1 .contents-section.company-intro .sub-right b{font-size: 28px;}

    .sub-contents.sub01_2 .contents-section.directions .sub-left .sub-tit{font-size: 36px;}
    .sub-contents.sub01_2 .contents-section.directions .directions__map .root_daum_roughmap .wrap_map{height: 500px !important;}
}

@media (max-width:500px) {
    .sub-head{min-height: initial; padding: 80px 0 44px;}
    .sub-head h1{padding-bottom: 10px; font-size: 24px;}

    .sub-tit{font-size: 20px;}
    p.default{font-size: 16px;}
    .sub-contents .contents-section h2{font-size: 20px;}
    
    .sub-contents{margin-top: 80px;}    
    .sub-contents .contents-section .sub__img .txt{font-size: 16px;}

    .sub-contents.sub01_1 .contents-section .sub01_1__img{padding-top: 30px;}
    .sub-contents.sub01_1 .contents-section .sub01_1__img img.mark_01{width: 28vw;}
    .sub-contents.sub01_1 .contents-section.company-intro .sub-right b{font-size: 20px;}
    .sub-contents.sub01_1 .contents-section.company-intro .sub-right .diagram{width: 650px;}
    .sub-contents.sub01_1 .contents-section.company-intro .sub-right .diagram li{width: 200px; height: 200px; padding: 20px; justify-content: center;}
    .sub-contents.sub01_1 .contents-section.company-intro .sub-right .diagram li span.num{margin-top: 0; font-size: 20px;}
    .sub-contents.sub01_1 .contents-section.company-intro .sub-right .diagram li p{font-size: 24px;}
    .sub-contents.sub01_1 .contents-section.company-intro{margin-top: 60px;}
    .sub-contents.sub01_1 .contents-section.company-intro .sub-right .representative p{font-size: 16px;}
    .sub-contents.sub01_1 .contents-section.company-intro .sub-right .representative b{font-size: 28px; line-height: 1;}

    .sub-contents.sub01_2{padding-bottom: 100px;}
    .sub-contents.sub01_2 .contents-section.directions .sub-left .sub-tit{font-size: 24px;}
    .sub-contents.sub01_2 .contents-section.directions .sub-right{margin-top: 40px;}
    .sub-contents.sub01_2 .contents-section.directions .sub-right .directions-info td.tit{width: 40px; font-size: 16px;}
    .sub-contents.sub01_2 .contents-section.directions .sub-right .directions-info td.con{width: calc(100% - 40px); font-size: 16px;}
    .sub-contents.sub01_2 .contents-section.directions .directions__map{margin-top: 40px;}
    .sub-contents.sub01_2 .contents-section.directions .directions__map .root_daum_roughmap .wrap_map{height: 250px !important;}
}


@media (max-width:375px) {
    p.default{font-size: 14px;}
    .sub-contents .contents-section h2{font-size: 18px;}

    .sub-contents.sub01_1 .contents-section.company-intro .sub-right b{font-size: 18px;}
    .sub-contents.sub01_1 .contents-section.company-intro .sub-right .diagram{width: 590px;}
    .sub-contents.sub01_1 .contents-section.company-intro .sub-right .diagram li{width: 180px; height: 180px;}
    .sub-contents.sub01_1 .contents-section.company-intro .sub-right .diagram li p{font-size: 20px;}
    .sub-contents.sub01_1 .contents-section.company-intro .sub-right .representative p{font-size: 14px;}
    .sub-contents.sub01_1 .contents-section.company-intro .sub-right .representative b{font-size: 20px;}

    .sub-contents.sub01_2 .contents-section.directions .sub-right .directions-info td.tit{font-size: 14px; line-height: 1.43; vertical-align: top;}
    .sub-contents.sub01_2 .contents-section.directions .sub-right .directions-info td.con{font-size: 14px; line-height: 1.43;}
}