.sub-block{max-width: 1920px; width: 100%; margin: auto;}
.sub__title{width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative;}
.sub__contents{width: 100%;}

.sub__title.kangdajim{height: 1080px; background: url('../img/sub/con01_01_01.png') no-repeat; background-size: cover; background-position: center;}
.slogan-block{width: 100px; padding: 12px 0; border-top: 2px solid #fff; border-bottom: 2px solid #fff;}
.slogan-block span{font-size: 30px; font-weight: 800; text-align: center; color: #fff;}
.sub__title h1{position: relative; width: 100%; padding-bottom: 22px; font-family: 'Cafe24Ohsquare'; font-size: 100px; font-weight: bold; letter-spacing: -2.5px; text-align: center; color: #fff;}
.sub__title h1::after{content: ""; position: absolute; bottom: 0; display: block; width: 100%; height: 1px; background-color: #fff;}
.scroll{position: absolute; bottom: 35px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center;}
.scroll span{font-family: 'GmarketSansLight'; font-size: 11px; font-weight: 300; text-align: center; color: #fff;}

.sub__title.company{height: 460px; background: url('../img/sub/sub01_02.png') no-repeat; background-size: cover; background-position: center;}
.sub-tit{font-family: 'GmarketSansMedium'; font-size: 45px; text-align: center; color: #fff; text-transform: uppercase;}
.sub__title-text{position: absolute; bottom: 126px; display: flex; flex-direction: column; align-items: center;}
.sub__title-text h3{font-family: 'GmarketSansMedium'; font-size: 43px; text-align: center; color: #fff;}
.sub__title-text .location{min-width: 170px; padding: 15px 0; border-top: 1px solid rgba(255,255,255,.2);
    font-size: 16px; font-weight: 300; text-align: center; color: #fff;}

.sub__title.menu{height: 460px; background: url('../img/sub/sub03_01.png') no-repeat; background-size: cover; background-position: center;}

.sub__contents section{}
.sub__contents section.vision{min-height: 720px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: url('../img/sub/con01_02_01.png') no-repeat; background-size: cover; background-position: center;}

.sub__contents .contents__tit{display: flex; flex-direction: column; align-items: center;}
.sub__contents .contents__tit .num-block{width: 100px; height: 80px; position: relative; background: url('../img/sub/bg_triangle.png') no-repeat; background-position: center; background-size: cover;}
.sub__contents .contents__tit .num-block span{position: absolute; left: 50%; transform: translateX(-50%); bottom: 5px; font-family: 'Cafe24Ohsquare'; font-size: 32px; font-weight: bold; color: #fff;}
.sub__contents .contents__tit h5{font-family: 'Cafe24Ohsquare'; font-size: 60px; font-weight: bold; letter-spacing: -3px; text-align: center; color: #000;}
.sub__contents .contents__tit p{font-size: 20px; line-height: 1.5; letter-spacing: -1px; text-align: center; color: #000;}

.sub__contents .contents__tit.company h5{font-family: 'GmarketSansLight'; font-weight: 300; line-height: 1.28;}
.sub__contents .contents__tit.company h5 b{position: relative; font-family: 'GmarketSansBold';}
.sub__contents .contents__tit.company h5 b::before{content: ""; position: absolute; top: -16px; left: 50%; transform: translateX(-50%); display: block; width: 10px; height: 10px; background-color: #e7102d; border-radius: 50%;}

.contents__con img{width: 100%;}

.sub__contents section.vision ul{display: flex; max-width: 1200px; width: 95%;}
.sub__contents section.vision ul li{display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px 0 56px; width: 18.66%; min-height: 284px; 
    border-radius: 30px; box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.2); background-color: #fff;}
.sub__contents section.vision ul li+li{margin-left: 1.66%;}
.sub__contents section.vision ul li strong{margin: 20px 0 10px; font-family: 'GmarketSansMedium'; font-weight: 500; font-size: 26px; line-height: 1.15; letter-spacing: -1.95px; text-align: center; color: #000;}
.sub__contents section.vision ul li span{font-size: 16px; line-height: 1; text-align: center; color: #000;}


/* 갤러리 게시판 */
section.how-to-eat-block{position: relative;}
section.how-to-eat-block::before{content: ""; position: absolute; left: 50%; top: -50px; width: 117px; height: 100px; transform: translateX(-50%); display: block; background: url('../img/sub/icon_mark_new.png') no-repeat; background-size: cover; background-position: center;}
.how-to-eat__title{display: flex; flex-direction: column; align-items: center; width: 100%;}
.how-to-eat__title .title{opacity: 1;}
section.how-to-eat-block .how-to-eat__contents{display: flex; align-items: center; max-width: 1920px; width: 100%;}
section.how-to-eat-block .how-to-eat__contents>div{width: 50%;}
.how-to-eat__contents .contents-left ul{width: 100%;}
.how-to-eat__contents .contents-left ul li{width: 100%; padding-left:37.5%;}
.how-to-eat__contents .contents-left ul li b{font-family: 'Cafe24Ohsquare'; font-size: 40px; font-weight: bold; text-align: left; color: #364849; position: relative;}
.how-to-eat__contents .contents-left ul li b::after{content: ""; display: block; position: absolute; left: 20px; top: -13px; width: 50px; height: 40px; background: url('../img/sub/bg_num.png') no-repeat;}
.how-to-eat__contents .contents-left ul li strong{display: block; font-family: 'GmarketSansMedium'; font-size: 25px; letter-spacing: -1.25px; text-align: left; color: #000; margin-top: 7px;}
.how-to-eat__contents .contents-left ul li p{font-size: 18px; line-height: 1.39; letter-spacing: -0.9px; text-align: left; color: #000; margin-top: 6px;}
.how-to-eat__contents .contents-right{display: flex; align-items: center;}
.how-to-eat__contents .contents-right .logo_h{margin-left: 2.604%; margin-right: 2.08%; width: 3.5%;}
.how-to-eat__contents .contents-right img+img{margin-right: 3.125%;}
.how-to-eat__contents .contents-right img:not(:first-child){width: 41.66%;}


@media (max-width:1024px){
    .sub__title h1{font-size: 60px;}
    .sub__title.kangdajim{height: 980px;}

    .sub__contents .contents__tit h5{font-size: 45px;}
    .sub__contents .contents__tit p{padding: 0 20px;}

    .how-to-eat__contents .contents-left ul li{padding-left: 5.5%;}
}

@media (max-width:769px){
    .sub__title.kangdajim{height: 700px}

    .sub__contents .contents__tit h5{font-size: 36px;}
    .sub__contents .contents__tit p{padding: 0 20px;}
    .sub__contents .contents__tit.company h5 b::before{width: 8px; height: 8px;}

    .sub__contents section.vision{min-height: initial; padding: 60px 0;}
    .sub__contents section.vision ul{flex-wrap: wrap; align-items: center;}
    .sub__contents section.vision ul li{width: 31.66%; margin-left: 0 !important; margin-right: 1.66%; margin-top: 1.66%;}
    .sub__contents section.vision ul li:nth-child(3n){margin-right: 0;}

    section.how-to-eat-block .how-to-eat__contents{flex-direction: column;}
    section.how-to-eat-block .how-to-eat__contents>div{width: 100%;}
    .how-to-eat__contents .contents-left ul li{padding: 20px;}
    .how-to-eat__contents .contents-right{margin-top: 60px;}
}

@media (max-width:500px){
    .sub__title.kangdajim{height: 100vh;}
    .slogan-block span{font-size: 28px;}
    .sub__title h1{font-size: 36px; word-break: keep-all;}
    .sub__title-text h3{font-size: 36px;}

    .sub__contents .contents__tit h5{font-size: 28px; letter-spacing: -1px; word-break: keep-all;}
    .sub__contents .contents__tit p{font-size: 16px;}

    .sub__contents .contents__tit .num-block{width: 80px; height: 60px;}
    .sub__contents .contents__tit .num-block span{bottom: 0; font-size: 28px;}

    .sub__contents .contents__tit.company h5 b::before{width: 6px; height: 6px;}

    .sub__contents section.vision ul li{width: 48.66%; min-height: initial; padding: 25px 0 35px;}
    .sub__contents section.vision ul li:nth-child(2n){margin-right: 0;}
    .sub__contents section.vision ul li:nth-child(3n){margin-right: 1.66%;}
    .sub__contents section.vision ul li strong{font-size: 20px; margin: 10px 0;}
    .sub__contents section.vision ul li img{width: 85px;}

    .how-to-eat__contents .contents-left ul li b{font-size: 34px;}
    .how-to-eat__contents .contents-left ul li b::after{left: 10px;}
    .how-to-eat__contents .contents-left ul li strong{font-size: 20px;}
    .how-to-eat__contents .contents-left ul li p{font-size: 16px;}

    section.how-to-eat-block::before{width: 90px; height: 77px;}
    .how-to-eat__title{padding-top: 30px;}
    .how-to-eat__title .title{margin-top: 0;}
}

@media (max-width:375px){
    .sub__title.company{padding: 140px 0 100px; height: initial;}
    .sub__title-text{position: static;}

    .sub__title.menu{padding: 140px 0 100px; height: initial;}
    .sub__title-text{position: static;}
}