@charset "UTF-8";
body {
    font-family: 'Pretendard', sans-serif;
    letter-spacing: -0.04em;
    --theme  : #EE0018;
    --light1 : #FEF2F3;
    --light2 : #FCCCD1;
    --light3 : #F13346;
    --dark1  : #D40015;
    --dark2  : #BC0013;
    --mark   : #FFD600;
}
.wrap { padding: 0 3em; } 
.inner { max-width: 1280px; }
.thin { font-weight: 300; }


/* 상단 */
#header { position: fixed; left: 0; top: 0; width: 100%; z-index: 999; color: #fff; }
#header .wrap { padding-top: 1em; padding-bottom: 1em; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 5;  }
#header .logo { width: 5.124em; filter: brightness(0) invert(1); } 
#header .logo a { display: block; }
#header .logo img { width: 100%; vertical-align: top; }
#header .nav { display: flex; text-align: center; position: relative; }
#header .nav li { width: 25%; }
#header .nav li a { font-size: 1.25em; font-weight: 600; position: relative; display: inline-block;  }
#header .nav li a::after { content:""; width: 100%; height: 0.2em; background-color: transparent; display: inline-block; position: absolute; bottom: -1.25em; left: 0; }
#header .nav li.active { color: var(--theme) }
#header .nav li.active a::after,
#header .nav li:hover a::after { background-color: var(--theme); }
#header .anb-btn { font-size: 1em; line-height: 0; width: 3em; height: 2em; font-weight: 600; cursor: pointer; margin-left: 2em; position: relative; }
#header .anb-btn .bar i { margin-bottom: 0.7em; display: block; height: 2px; background-color: #fff; transition: 0.3s; transform-origin: 50% 50%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
#header .anb-btn .bar1 { width: 3em; margin-top: -1em; }
#header .anb-btn .bar2 { width: 2.5em; margin-top: -0.3em; }
#header .anb-btn span { font-size: 0.8em; line-height: 0.8; letter-spacing: -0.08em; margin-left: -0.1em; transition: 0.3s; position: absolute; bottom: 0; left: 0; }
#header .anb-btn:hover .bar i { background-color: var(--theme); }
#header .anb-btn:hover .bar2 { margin-left: 0.5em; }
#header .anb-btn:hover span { color: var(--theme); margin-left: 0.8em; }
#header .line { width: 100%; height: 1px; border: 0; background-color: #ddd; position: relative; z-index: 10; opacity: 0; }
#header .anb { position: fixed; left: 0; top: 0; width: 100%; background-color: #fff; border-bottom: 1px solid #ddd; transform: translateY(-100%); transition: 0.6s; z-index: 3; opacity: 0; } 
#header .anb .gnb { max-width: 1280px; width: calc(100% - 20em); padding: 2em 0 3em; display: flex; margin-top: 4.75em; }
#header .anb .gnb > li { width: 25%; }
#header .anb .gnb dl { text-align: center; }
#header .anb .gnb dt { font-size: 1.25em; font-weight: 600; display: none; }
#header .anb .gnb dd { font-size: 1.125em; }
#header .anb .lnb li { margin-bottom: 1em; font-weight: 500; color: #777; }
#header .anb .lnb li:hover { color: var(--theme); }

/* 상단 고정 */
#header.fixed { color: #000; background-color: #fff; }
#header.fixed .logo { filter: none; }
#header.fixed .anb-btn .bar i { background-color: #000; }
#header.fixed .anb-btn:hover .bar i { background-color: var(--theme); }
#header.fixed .anb-btn:hover .bar i { background-color: var(--theme); }
#header.fixed .line { opacity: 1; }

/* 상단 오픈 */
#header.open { color: #000; }
#header.open .logo { filter: none; }
#header.open .anb-btn span { display: none; }
#header.open .anb-btn .bar i { width: 60%; margin: 0; left: 50%; background-color: #000; }
#header.open .anb-btn .bar1 { transform: translate(-50%,-50%) rotate(-45deg); }
#header.open .anb-btn .bar2 { transform: translate(-50%,-50%) rotate(45deg); }
#header.open .anb-btn:hover .bar i { background-color: var(--theme); }
#header.open .anb-btn:hover .bar2 { margin: 0; }
#header.open .anb-btn:hover span { margin-left: 0; }
#header.open .line { opacity: 1; }
#header.open .anb { transform: translateY(0); opacity: 1; }

/* 하단 */
#footer { height: 18em; padding-top: 3em; background-color: var(--theme); color: #fff; }
#footer span { vertical-align: middle; }
#footer i { display: inline-block; margin: 0 0.75em; font-size: 0.8em; vertical-align: middle; margin-top: -0.2em; }
#footer h5 { font-size: 1.5em; font-weight: 700; }
#footer .fnb { margin-top: 1em; display: flex; align-items: center; }
#footer .fnb span { font-size: 1.125em; }
#footer .info { margin: 1em 0; line-height: 1.5; }
#footer .copy { font-size: 0.875em; opacity: 0.8; }

/* 컨텐츠 */
#wrapper {  }
.container { display: flex; align-items: center; justify-content: center; min-height: 75vh; }
.container-title { text-align: center; font-size: 2em; font-weight: 700; margin-bottom: 1em; }
.before::before { content:""; display: block; width: 2.5em; height: 0.5em; background-color: var(--theme); border-radius: 5em; margin: 2em auto; }
.section { padding: 6em 0; }
.title { margin-bottom: 3em; }
.ratio { width: 100%; margin: auto; }
.ratio-box { padding-top: 100%; position: relative; }
.ratio-box > * { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }

/* sub */
.sub { text-align: center; }
.sub h3 { font-size: 2.5em; font-weight: 700; }
.sub h4 { font-size: 1.875em; }
.sub h5 { font-size: 1.5em; }
.sub .common { padding-bottom: 0; }
.sub .common .logo { width: 25%; max-width: 250px; }
.sub .common p { font-size: 1.5em; line-height: 1.6; }

/* visual */
.sub .visual { border-bottom: 1px solid #ddd; background: no-repeat center/cover; padding-top: 22vw; }
.sub .visual .lnb { background-color: #fff; }
.sub .visual .lnb ul { display: flex; justify-content: center; text-align: center; }
.sub .visual .lnb li {  width: 25%; font-weight: 700; }
.sub .visual .lnb a { font-size: 1.25em; line-height: 3; border-bottom: 2px solid transparent; display: inline-block; }
.sub .visual .lnb li:hover a,
.sub .visual .lnb li.active a { border-color: var(--theme); color: var(--theme); }

/* brand */
.sub .brand .common { padding-bottom: 6em; }
.sub .brand .con1 { padding: 18em 0; background: url(../img/bg_brand.png) no-repeat center/cover; color: #fff; }
.sub .brand .con1 h1 { font-size: 3.75em; font-weight: 300; }
.sub .brand .con2 .list { display: flex; }
.sub .brand .con2 .list li { width: 24%; margin: 0.5%; }
.sub .brand .con2 .list .ratio { max-width: 12em; background: url(../img/bg_brand_list.png) no-repeat center/cover; color: #fff; border-radius: 30em; font-weight: 700; box-shadow: 3px 3px 10px rgba(0,0,0,0.5);}
.sub .brand .con2 .list p { font-size: 1.25em; line-height: 1.4; word-break: keep-all; }

/* history */
.sub .history .tit { background: url(../img/img_history.png) no-repeat center/cover; color: #fff; padding: 4em 0; }
.sub .history .tit h5 { letter-spacing: 0.5em; margin-bottom: 0.5em; }
.sub .history .tit h4 { font-weight: 700; }
.sub .history .list li { position: relative; padding-bottom: 5em; }
.sub .history .list li::before { content:""; width: 1px; height: 100%; background-color: #ddd; display: block; position: absolute; left: 50%; top: 0; }
.sub .history .list li:nth-child(odd) { padding-right: 50%; text-align: right; }
.sub .history .list li:nth-child(even) { padding-left: 50%; text-align: left; }
.sub .history .list .txt { margin: 0 2em; }
.sub .history .list .point { width: 1.6em; height: 1.6em; border-radius: 5em; background-color: var(--theme); display: inline-block; border: 0.45em solid var(--light2); position: absolute; left: 50%; top: 0.6em; margin-left: -0.8em; }
.sub .history .list h3 { font-weight: 700; margin-bottom: 0.3em; }
.sub .history .list p { font-size: 1.25em; color: #666; }

/* location */
.sub .location .tab { font-size: 1.125em; display: flex; justify-content: center; }
.sub .location .tab li { padding: 0 2em; line-height: 2.2; border: 1px solid var(--theme); color: var(--theme); border-radius: 5em; margin: 0 0.5em; cursor: pointer; }
.sub .location .tab li:hover,
.sub .location .tab li.active { background-color: var(--theme); color: #fff; }
.sub .location .list li { display: none; }
.sub .location .list li.active { display: block; }
.sub .location .list .map { margin: 3em 0; }
.sub .location .list .map .box { width: 100%; padding-top: 40%; position: relative; }
.sub .location .list .map .box iframe { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
.sub .location .list .txt { display: flex; justify-content: space-between; }
.sub .location .list .txt h5 { font-weight: 700; }
.sub .location .list .txt .desc { width: 100%; max-width: 700px; text-align: left; }
.sub .location .list .txt p { font-size: 1.25em; margin-bottom: 1em; }
.sub .location .list .txt b { width: 8em; display: inline-block; vertical-align: middle; }
.sub .location .list .txt i { margin-right: 1em; vertical-align: middle; }

/* process */
.sub .process .tit p { font-size: 1.125em; color: #666; margin-top: 0.75em; }
.sub .process .list { margin-top: 5em; display: flex; flex-wrap: wrap; justify-content: center; }
.sub .process .list li { width: 23%; margin: 0 1% 5%; position: relative; }
.sub .process .list li::after { content: url(../img/icon_process_arrow.png); display: inline-block; position: absolute; left: 102%; top: 35%; }
.sub .process .list li:nth-child(4n)::after { display: none; }
.sub .process .list .ratio { max-width: 12em; border: 0.625em solid #eee; border-radius: 30em;  }
.sub .process .list .ratio img { max-width: 50%; max-height: 50%; }
.sub .process .list .txt { font-weight: 600; margin-top: -1em; }
.sub .process .list h5:nth-child(1) { font-size: 1em; display: inline-block; background-color: #666; color: #fff; line-height: 2; padding: 0 1em; border-radius: 5em; margin-bottom: 0.75em; }
.sub .process .list p { font-size: 1.25em; }
.sub .process .list .num { display: none; }
.sub .process .list h5:nth-child(3) { display: none; }

/* product */
.sub .product .list ul { display: flex; flex-wrap: wrap; }
.sub .product .list li { width: 23%; margin: 1%; text-align: left; border: 1px solid #ddd;  margin-bottom: 1%; position: relative; cursor: pointer; }
.sub .product .thumb { padding-top: 170%; width: 100%; background: #eee no-repeat center/cover; border-bottom: 1px solid #ccc; }
.sub .product .text { padding: 1em; }
.sub .product .subject { font-size: 1.25em; font-weight: 500; margin-bottom: 0.5em; }
.sub .product .desc { font-size: 1em; color: #888; border-top: 1px solid #ddd; padding-top: 0.75em; padding-bottom: 2em; }
.sub .product .list li .chk_box { position: absolute; top: 0; left: 0; margin: 0.5em; }
.sub .product .bo_v_txt p { display: flex; margin-bottom: 1em; }
.sub .product .bo_v_txt p b { width: 13em; text-align: left; }
.sub .product .bo_v_img { display: flex; align-items: flex-start; margin-bottom: 2em; }
.sub .product .bo_v_img div { max-width: 20%; margin-right: 1%; text-align: center; }
.sub .product .bo_v_img div:last-child { margin-right: 0; }
.sub .product .bo_v_img img {  border: 1px solid #ddd; }

/* activities */
.sub .activities .list ul { display: flex; flex-wrap: wrap; justify-content: flex-start; }
.sub .activities .list li { border: 1px solid #ddd; width: 32.333%; margin: 1% 0.5%; text-align: left; position: relative; }
.sub .activities .list li .chk_box { position: absolute; top: 0; left: 0; margin: 0.5em; }
.sub .activities .thumb { width: 100%; background: no-repeat center/cover; border-bottom: 1px solid #ccc; }
.sub .activities .thumb a { padding-top: 75%; display: block; }
.sub .activities .text { padding: 1em; }
.sub .activities .subject { font-size: 1.125em; font-weight: 500; margin-bottom: 1.5em; }
.sub .activities .desc { display: none; }
.sub .activities .info {color: #888; text-align: right;}
.sub .activities #bo_view { text-align: left; }
.sub .activities #bo_view .bo_view_tit { font-size: 1.375em;  }
.sub .activities #bo_view .bo_view_tit h3 { font-size: 1em; }
.sub .activities #bo_view .bo_top { border-bottom: 0; border-top: 1px solid #ddd; align-items: flex-start; margin-bottom: 0; padding-top: 0.5em; margin-top: 1em;}
.sub .activities #bo_view .bo_view_content { border-top: 0; }

/* inquiry */
.sub .inquiry .frm_wrap { border-top: 2px solid #000; border-bottom: 2px solid #000; padding: 2em 3em; }
.sub .inquiry .frm_wrap li { display: flex; margin-bottom: 1em; }
.sub .inquiry .frm_wrap li > label { width: 8em; font-weight: 600; line-height: 2.5; }
.sub .inquiry .frm_wrap li > *:nth-child(2) { width: calc(100% - 8em); }
.sub .inquiry .frm_wrap .chk_box { margin-right: 1em; }
.sub .inquiry .frm_wrap .frm_input,
.sub .inquiry .frm_wrap textarea { border: 0; border-bottom: 1px solid #ddd; background-color: transparent; }
.sub .inquiry .inner { max-width: 1000px; margin: auto; }
.sub .inquiry form { font-size: 1.25em; }

/* 제품 팝업 */
.product-popup { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background-color: rgba(0,0,0,0.5); display: none; z-index: 99999; }
.product-popup-wrap { padding: 2em 2em 3em; position: absolute; max-width: 1000px; width: 90%; background-color: #fff; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.product-popup-close { position: absolute; top: 0; right: 0; margin: 0.5em; font-size: 1.5em; cursor: pointer; }
.product-popup-tit { text-align: center; }
.product-popup-tit h4 { font-size: 1.5em; font-weight: 700; }
.product-popup-tit p { font-size: 1em; color: #777; margin-top: 0.5em; }
.product-popup-box { margin-top: 1.5em; display: flex; justify-content: space-between; text-align: left; }
.product-popup-img { width: 37%; background:no-repeat center/auto 100%; border: 1px solid #ddd; }
.product-popup-con { width: 57%; }
.product-popup-con h5 { font-weight: 700; font-size: 1.25em; }
.product-popup-con ul { margin-top: 0.5em; border-top: 1px solid #000; border-bottom: 1px solid #000; }
.product-popup-con li { padding: 0.75em 0; border-bottom: 1px solid #ddd; display: flex; }
.product-popup-con strong { display: inline-block; width: 13em; }
.product-popup-con p { text-align: center; flex-grow: 1; }
.product-popup-con a { background-color: #000; color: #fff; display: inline-block; padding: 0.3em 0.8em; margin-top: 0.5em; }
.product-popup-swiper { text-align: center; margin-bottom: 2em; }
.product-popup-swiper .img { padding-bottom: 170%; border: 1px solid #ddd; background:no-repeat center/auto 100%; cursor: pointer; }
.product-popup-swiper p { margin-top: 0.5em; }
.product-popup img { width: 100%; }

.product-popup-navigtaion {
    --button-size: 65px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + (var(--button-size) * 2));
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-popup-navigtaion > button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--button-size);
    height: var(--button-size);
    border: unset;
    background: transparent;
}

.product-popup-navigtaion > button > svg {
    width: 100% !important;
    height: 100% !important;
}

.product-popup-navigtaion > button > svg > path {
    stroke: #c3c3c3 !important;;
    transition: stroke 0.15s;
}

.product-popup-navigtaion > button:hover > svg > path {
    stroke: #acacac !important;
}

@media screen and (max-width: 1150px){
    .product-popup-navigtaion {
        --button-size: 38px;
        width: calc(100% + calc(var(--button-size) / 1.2));
    }

    .product-popup-navigtaion > button {
        background: #FFF;
        border-radius: 50%;
    }
    
    .product-popup-navigtaion > button > svg {
        width: 80% !important;
        height: 80% !important;
    }
}

/* main */
.swiper-main { width: 100%; height: 100vh !important; }
.swiper-main .main-section { height: 100%; overflow: hidden; padding: 12em 0; }
.swiper-main .main-footer { height: auto !important; }

.main .visual { width: 100%; padding: 0; }
.main .visual .swiper { width: 100%; height: 100%; }
.main .visual .swiper-btn { font-size: 3.5em; position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; color: #fff; cursor: pointer; }
.main .visual .swiper-btn-prev { left: 3%; }
.main .visual .swiper-btn-next { right: 3%; }
.main .visual .swiper-slide { height: 100vh; }
.main .visual .swiper-slide > div { width: 100%; height: 100%; background: no-repeat center bottom/cover; display: flex; align-items: center; justify-content: flex-start; padding-left: 8%; }
.main .visual .swiper-slide img { max-width: 90%; }

.main .tit h3 { font-size: 2.25em; }
.main .more { width: 2.5em; height: 2.5em; text-align: center; line-height: 2.5; display: inline-block; -webkit-border-radius: 5em;-moz-border-radius: 5em; border-radius: 5em; }

.main .product .inner { display: flex; align-items: flex-start; justify-content: space-between; }
.main .product .tit { width: 30%; max-width: 300px; margin-right: 3em; }
.main .product .box { margin-top: -1px; }
.main .product .cate { margin-top: 1em; }
.main .product .cate h4 { font-size: 1.25em; font-weight: 600; border-bottom: 1px solid #ddd; padding: 0.75em 1em; border-top: 1px solid #ddd; display: flex; cursor: pointer; justify-content: space-between; }
.main .product .cate ul { padding: 1em; color: #777; display: none; }
.main .product .cate li { margin-bottom: 0.5em; cursor: pointer; }
.main .product .cate li::before { content:"-"; display: inline-block; margin-right: 0.5em; }
.main .product .con { width: 70%; max-width: 840px; }
.main .product .swiper-slide { position: relative; padding-bottom: 3.7em; }
.main .product .swiper-slide img { height: 80%; margin-top: 5%; }
.main .product .thumb { height: 60vh; border: 1px solid #ddd; text-align: center; }
.main .product .txt { position: absolute; bottom: 0; left: 0; background-color: #fff; padding: 1.5em; width: 90%; max-width: 600px; padding-right: 3em; }
.main .product .txt h5 { font-size: 1.25em; font-weight: 500; margin-bottom: 0.5em; }
.main .product .more { background-color: #a2d9ec; color: #fff; font-size: 1.375em; position: absolute; right: -1.25em; top: 50%; margin-top: -1.25em; cursor: pointer; }
.main .product .box.active h4 { background-color: var(--theme); color: #fff; }
.main .product .box.active h4 i { transform: rotate(180deg); }
.main .product .box.active ul { display: block; }

.main .activities { background-color: #f5f5f5; }
.main .activities .tit { display: flex; border-bottom: 1px solid #ccc; justify-content: space-between; margin-bottom: 2em; }
.main .activities .tit h3 { border-bottom: 2px solid #000; }
.main .activities .tit .more { background-color: #fff; border: 1px solid #ccc; font-size: 1.25em; margin-bottom: 0.5em; }
.main .activities .list ul { display: flex; flex-wrap: wrap; justify-content: flex-start; }
.main .activities .list li { width: 32.333%; margin: 0 0.5%; text-align: left; position: relative; }
.main .activities .thumb { width: 100%; background: no-repeat center/cover; border: 1px solid #ccc; }
.main .activities .thumb a { padding-top: 75%; display: block; }
.main .activities .subject { font-size: 1em; font-weight: 500; margin: 0.5em 0 0.75em; }
.main .activities .desc { font-size: 1.25em; }
.main .activities .info { font-size: 0.9em; margin-top: 2em; border-top: 1px solid #ccc; display: flex; justify-content: space-between; align-items: center; color: #888; padding: 0.5em 0; }

.main .inquiry { padding: 0; display: flex; align-items: center; background-color: #e9e9e9; }
.main .inquiry > div { width: 50%; }
.main .inquiry .map { height: 100vh; position: relative; }
.main .inquiry .map iframe { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
.main .inquiry .box { padding: 6em 5%; }
.main .inquiry .tit { margin-bottom: 1.5em; font-weight: 700; }
.main .inquiry .frm_wrap { font-size: 1.125em; padding: 0; border: 0; }
.main .inquiry .frm_wrap li { border-bottom: 1px solid #aaa; margin-bottom: 0.5em; display: flex; }
.main .inquiry .frm_wrap li > label:nth-child(1) { white-space: nowrap; line-height: 2.5; font-weight: 600; }
.main .inquiry .frm_wrap li:last-child { display: block; }
.main .inquiry .frm_wrap li:last-child > label:nth-child(1) { white-space: nowrap; line-height: 2; }
.main .inquiry .frm_wrap .frm_input,
.main .inquiry .frm_wrap textarea { border: 0; background-color: transparent; }
.main .inquiry .btn_confirm { text-align: left; }
.main .inquiry .btn_submit { padding: 0 2.5em; height: 2.6em; line-height: 2.6; font-size: 1.25em; }



/* fade */
.fade-up,
.fade-down,
.fade-right,
.fade-left { opacity: 0; }
.fade-up { transform: translateY(3rem); }
.fade-down { transform: translateY(-3rem); }
.fade-right { transform: translateX(-3rem); }
.fade-left { transform: translateX(3rem); }
.fade-up.on,
.fade-down.on { animation: fadeY 0.4s ease-out 0s 1 normal forwards; }
.fade-right.on,
.fade-left.on { animation: fadeX 0.4s ease-out 0s 1 normal forwards; }
@keyframes fadeY {
    100% { transform: translateY(0); opacity: 1; }
}
@keyframes fadeX {
    100% { transform: translateX(0); opacity: 1; }
}




br.mb { display: none; }




/******************************** 반응형 **********************************/
@media screen and (max-width: 1280px){
    .inner { padding-left: 3%; padding-right: 3%; }
    #header,#footer,#wrapper,.product-popup { font-size: 1.25vw; }
}
@media screen and (max-width: 1025px){
    /*.swiper-main .main-section { height: auto !important; }*/
    .main .inquiry .map { height: auto; }
    .main .inquiry .box { padding: 12em 5%; }
}
@media screen and (max-width: 769px){
    #header,#footer,#wrapper,.product-popup { font-size: 2vw; }
    #header .nav { display: none; }
    #header .anb { height: 100vh; }
    #header .anb .gnb { width: 100%; flex-direction: column; justify-content: center; align-items: center; padding: 0 3em; }
    #header .anb .gnb > li { width: 100%; padding: 3em 0; border-bottom: 1px solid #ddd; }
    #header .anb .gnb > li:last-child { border-bottom: 0; }
    #header .anb .gnb dt { font-size: 1.5em; display: block; margin-bottom: 1em; }
    #header .anb .gnb dd { font-size: 1.25em; }
    #header .anb .lnb li:last-child { margin-bottom: 0; }
    #header .anb .gnb {  }

    .swiper-main .main-section { padding: 0; display: flex; align-items: center; }
    .swiper-main .main-section.visual { padding: 0; }
    .main .product .inner { flex-direction: column; }
    .main .product .tit,
    .main .product .con { width: 100%; }
    .main .product .thumb { height: 40vh; }
    .main .product .tit { margin-bottom: 2em; max-width: 100%; }
    .main .activities .list { flex-wrap: wrap; }
    .main .activities .list li { width: 100%; display: flex; margin-bottom: 2em; }
    .main .activities .thumb { width: 40%; }
    .main .activities .text { width: 57%; }
    .main .activities .text a { display: block; padding: 1em; }
    .main .activities .desc { --ellipsis: 3; line-height: 1.5; }
    .main .inquiry {  padding: 0; }
    .main .inquiry > div { width: 100%; }
    .main .inquiry .map { height: 50vh; }
    .main .inquiry .box { padding: 8em 5%; height: auto; }

	.sub .visual { padding-top: 45vw; }

    .sub .brand .con2 .list { flex-wrap: wrap; }
    .sub .brand .con2 .list li { width: 48%; margin: 1%; }
    .sub .location .list .txt { display: block; text-align: left; }
    .sub .location .list .txt h5 { margin-bottom: 1.5em; }
    .sub .process .list li { width: 31.333%; margin: 1%; }
    .sub .process .list li::after { content: url(../img/icon_process_arrow.png); display: inline-block; position: absolute; left: 102%; top: 35%; }
    .sub .process .list li:nth-child(4n)::after { display: inline-block; }
    .sub .process .list li:nth-child(3n)::after { display: none; }
    .sub .process .list li:last-child::after { display: none; }
    .sub .location .list .map .box { padding-top: 50%; }
    .section .bo_list_cate ul li { width: 30%; }

    .product-popup-box { display: block; }
    .product-popup-box > div { width: 100%; margin-left: auto; margin-right: auto; }
    .product-popup-img { padding-top: 120%; overflow: hidden; margin-bottom: 1em; }
    .product-popup-swiper .img { padding-bottom: 150%; }

	.main .activities .list ul { flex-wrap: nowrap; }
	.main .activities .list li { margin: 0; padding: 0 2%; }

	.product-popup-box { overflow-y: scroll; max-height: 70vh; }

    .main .visual .swiper-slide { justify-content: center; }
    .main .visual .swiper-slide img { margin-top: -15vh; }

    .sub .brand .con1 { padding: 10em 0; font-size: 0.75em; }
}
@media screen and (max-width: 589px){
    #header,#footer,#wrapper,.product-popup { font-size: 3.25vw; }
    #footer { height: 20em; }
    #header .anb .gnb > li { padding: 4vh 0; }
    #wrapper { word-break: keep-all; }
    .wrap { padding: 0 3%; }
    .main .activities .list li { display: block; }
    .main .activities .thumb { width: 100%; }
    .main .activities .text { width: 100%; }
    .main .activities .text a { padding: 1em 0; }

    .sub br { display: none; }
    .sub br.mb { display: block; }

    .sub .history .list li:nth-child(odd),
    .sub .history .list li:nth-child(even) { text-align: left; padding: 0; padding-left: 1.5em; padding-bottom: 3em; }
    .sub .history .list li::before { left: 1em; }
    .sub .history .list .point { left: 1em; }
    .sub .location .list .txt b { display: block; width: 100%; margin-bottom: 0.5em; }
    .sub .process .list li { width: 48%; margin: 1%; }
    .sub .process .list li::after { content: url(../img/icon_process_arrow.png); display: inline-block; position: absolute; left: 102%; top: 35%; }
    .sub .process .list li:nth-child(3n)::after { display: inline-block; }
    .sub .process .list li:nth-child(2n)::after { display: none; }
    .sub .process .list li:last-child::after { display: none; }
    .sub .process .list .ratio { width: 60%; }
    .sub .product .list li { width: 48%; }
    .sub .activities .list li { width: 98%; margin: 1%; }
    .sub .activities .section { padding-top: 3em; }
    .section .bo_list_cate ul li { width: auto; white-space: nowrap; padding: 0 1.5em; }

	.sub .common p { font-size: 1.25em; }
    .sub .inquiry .frm_wrap { padding: 1.5em ; }
    .sub .inquiry .frm_wrap li { flex-direction: column; }
    .sub .inquiry .frm_wrap li > label { width: 100%; line-height: 1.5; }
    .sub .inquiry .frm_wrap li > *:nth-child(2) { width: 100%; }


	.sub .brand .con2 .list p { display: none; }
	.sub .brand .con2 .list .ratio { position: relative; margin-bottom: 3em; }

    .sub .brand .con1 { padding: 4em 0; font-size: 1em; }
    .sub .brand .con1 .title { margin-bottom: 1.5em; }
    .sub .brand .con1 h3 { font-size: 1.875em; }
    .sub .brand .con1 h1 { font-size: 2.25em; }

	.product-popup-con strong { width: 8em; }

    .sub .brand .con2 .list { justify-content: center; }
    .sub .brand .con2 .list li { width: 35%; margin: 3%; }
    .sub .brand .con2 .list .ratio { margin-bottom: 0; }
}