/*  */
html, body, button, input, select, textarea{font-family:'Roboto','Noto Sans KR', Tahoma, Geneva, sans-serif !important;}
:before, :after{vertical-align:middle;}

/*추가 css*/
.product-badge li.new > div {background-color: #f3862f !important;}


/* common */
.inner { max-width: 1750px; margin: 0 auto; padding: 0 20px;}
.inner02 { max-width: 1230px; margin: 0 auto; padding: 0 20px;}
.section { padding-top: 100px;}
.ir { display: inline-block;}

.header-logo {} 
.scroll-ani01 { display: inline-block; overflow: hidden;}
.scroll-ani02 { display: inline-block; transform: translateY(100%); opacity: 0; transition: all 0.8s;}
.fp-completely .scroll-ani02,
.aos-animate .scroll-ani02 { transform: translateY(0); opacity: 1; transition: all 1s }
.main-visual .scroll-ani02 { transform: translateY(100%);}

.swiper-slide-active .scroll-ani02 { transform: translateY(0); opacity: 1;}

/* popup 팝업창 */
.pop-main-images { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 45%; z-index: 9999;}
.pop-main-images_close_box { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px;}
.pop-main-images_close_box input[type="checkbox"] + label:before { top: 3px; border-radius: 0;}
.pop-main-images_close_box label { color: #fff; font-size: 16px; font-weight: bold;}
.pop-main-images_close { width: 25px; height: 25px; background: url(/images/common/btn-close.png) 50% / cover no-repeat; }
.pop-main-bx .img_box { border-radius: 20px;}
.main-popup .img_box .swiper-slide { pointer-events: auto;}
.pop-main-bx .img_box a { display: block; height: 460px; overflow: hidden; }
.pop-main-bx .img_box img { width: 100%;}
.main-popup .swiper-pagination { bottom: -30px; left: 50%; transform: translateX(-50%); }
.main-popup .swiper-pagination-bullet { width: 12px; height: 12px; margin: 0 10px; background-color: transparent; border: 2px solid #fff; border-radius: 50%; opacity: 1; }
.main-popup .swiper-pagination-bullet-active { background-color: #68b82d; border-color: #68b82d;}

/* header 검색 */
.header .search-anchor { position:absolute;right:5%;top:35px;display: block;}
.header .search-anchor i { position: relative; width: 35px; height: 35px; background: url(/images/common/ico_search_w.png) 50% /contain no-repeat; text-indent:-9999em; transition: all .3s;}
.header.sub .search-anchor i { background-image: url(/images/common/ico_search_m.png); }
.header.fixed:not(.sub) .search-anchor i { background-image: url(/images/common/ico_search_m.png);}
.top-sch-bx{position:fixed;top:-100%;left:0;right:0;height:367px;display:flex;justify-content: center;align-items: center;z-index:9;background: #fff;}
.top-sch-bx > div{position: relative;width:600px;}
.top-sch-bx input[type=text]{width:100%;height:60px;padding:10px;color:#000;font-size:22px;border:0;border-bottom:2px solid #000;}
.top-sch-bx .btnSch{position:absolute;;right:0;top:0;width:30px; height: 60px; background: url(/images/common/ico_search.png) 50% / 24px no-repeat;text-indent:-9999em;}
.top-sch-bx .btn-close{position:absolute;;right:10%;bottom:0;width:80px; height: 80px; transform: translateY(50%);background:#68b82d url(/images/common/btn-close.png) 50% no-repeat;text-indent:-9999em;}

/* 국영 전환 버튼*/
.header-lang{
    position:absolute;right:10%;top:35px;display: block; display:flex; gap:5px;
}
.header-lang .lang-open-btn {
    overflow: hidden;
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
    height: 36px;
    font-size: 16px;
    color: #fff;
    padding: 0 10px 0 10px;
    border-radius: 1.5rem;
    transition: var(--transition-custom);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /* background-color: var(--main-color); */
    background-color: rgba(170, 170, 170, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 11;
}
.header-lang .lang-open-btn strong {
    position: relative;
    display: inline-block;
    /* border-bottom: 2px solid #fff; */
    font-weight: 500;
    transition: var(--transition-custom);
	color:#fff;
}
.header-lang .lang-open-btn i {
    position: relative;
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
    font-size: 20px;
    transition: var(--transition-custom);
}
.header-lang > ul {
    display: none;
    position: absolute;
    min-height: 36px;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    background-color: rgba(170, 170, 170, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 1.5rem 1.5rem 1rem 1rem;
    padding: 36px 0px 4px 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.header-lang>ul>li>a {
    display: block;
    padding: 0 10px;
    font-size: 16px;
    line-height: 36px;
    color: #fff;
}

.header-lang>ul>li>a:hover {}

/* .header-lang.open .lang-open-btn .arrow i{transform:rotate(180deg); margin-top:-3px;} */
.header-lang:hover .lang-open-btn,
.header-lang.open .lang-open-btn {
    background-color: rgba(170, 170, 170, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
}


/*** main ***/
.main-sec { height: 100vh; }
.main-sec .inner { height: 100%;}
.main-sec-tit { font-size: 48px; text-align: right; line-height: 1.2;}
.main-sec-subtit { font-size: 22px; font-weight: bold;}
.main-sec-subtxt { font-size: 18px; font-weight: bold;}

.main-sec-subtit + .main-sec-tit { padding: 40px 0;}

/* 밝은 배경 폰트색 변경 */
.header.fdark .gnb li a{color:#222;}
.header.fdark .search-anchor i{background-image : url(/images/common/ico_search.png)}


/* quick-menu 퀵메뉴 */
.qmenu{position:fixed;right:20px;bottom:20px;width:69px;z-index:99;}
.qmenu *{text-indent:-9999em;}
.qmenu li{margin-bottom:10px;}
.qmenu a{display:block;height:69px;border-radius:99px;}
.qmenu-01{background:#1ec800 url(/images/common/quick-btn-01.png) no-repeat;}
.qmenu-02{background:#ff1e1e url(/images/common/quick-btn-02.png) no-repeat;}
.qmenu-03{background:#141414 url(/images/common/quick-btn-03.png) no-repeat;}
.qmenu .btn{width:69px;height:69px;background:#fff url(/images/common/quick-btn-top.png) no-repeat;border-radius:99px;}

/* main-visual */
.main-visual { position: relative; padding: 0; height: 100vh}
.main-visual .scroll-down,
.main-visual .scroll-down::after { content: ''; position: absolute; width: 1px; height: 200px; background-color: rgba(255,255,255,0.5); z-index: 1;} 
.main-visual .scroll-down { bottom: 0; left: 50%; transform: translateX(-50%);}
.main-visual .scroll-down::after { top: 0; left: 0; background-color: #fff; animation: mainVisualLine 3s;}
@keyframes mainVisualLine {
	0%{ height:0; }
	100%{ height:100%; }
}

.main-visual > .inner { max-width: none; padding: 0;}
.main-visual .bg::after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0,0,0,0.1);}
.main-visual video { width: 100%; height: 100%; object-fit: cover;}
.main-visual .swiper-container { height: 100%;}
.main-visual-txt { display: flex; flex-direction: column; justify-content: flex-end; max-width: 1490px; height: 100%; margin: 0 auto; padding: 160px 20px; color: #fff;}
.main-visual-txt h2 { padding-bottom: 20px; font-size: 60px; line-height: 1.1;}
.main-visual-txt .subtit { font-size: 20px;}
.main-visual-txt .subtit br { display: none;}
.main-visual-txt > span{ letter-spacing: normal;}

.main-visual-menu { position: absolute; bottom: 70px; right: 50%; transform: translateX(50%); width: 1220px; padding: 0 10px; z-index: 1;}
.main-visual-menu ul { display: flex; justify-content: flex-end; margin: 0 -20px;}
.main-visual-menu-item { padding: 0 20px;}
.main-visual-menu-item > div { width: 160px; color: #fff;}
.main-visual-item-txt { margin-bottom: 10px;}
.main-visual-menu-item h4 { padding-bottom: 5px; font-size: 17px; font-weight: 500;}
.main-visual-menu-item p { height: 35px; font-size: 12px; font-weight: 300; line-height: 1.5;}
.main-visual-menu-item a { position: relative; display: block; width: 100%; height: 50px; background: url(/images/contents/main-visual-menu-01.jpg) 50% / cover no-repeat;}
.main-visual-menu-item:nth-child(2) a { background-image: url(/images/contents/main-visual-menu-02.jpg);}
.main-visual-menu-item:nth-child(3) a { background-image: url(/images/contents/main-visual-menu-03.jpg);}
.main-visual-menu-item a::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(73,128,230,0.8); opacity: 0; transition: all .4s;}
.main-visual-menu-item a span { position: absolute; top: 50%; left: 50%; transform: translate(-100%,-50%); color: #fff; font-size: 17px; font-weight: 500; opacity: 0; transition: all .4s;}
.main-visual-menu-item a span::after { content: ''; display: inline-block; width: 14px; height: 9px; margin-left: 5px; background: url(/images/contents/ico-arrow-w.png) 50% no-repeat; }
.main-visual-menu-item a:hover { box-shadow: 3px 3px 10px rgba(0,0,0,0.3);}
.main-visual-menu-item a:hover::before { opacity: 1;}
.main-visual-menu-item a:hover span { opacity: 1; transform: translate(-50%,-50%);}

/* 221222 main-visual 수정 (swiper 없앰)*/
.main-visual-bx { position: relative; width: 100%; height: 100%;}


/* swiper pagination bar 형태 */
.main-visual .swiper-control { position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1490px; height: 30px; padding: 0 15px; z-index: 99;}
.main-visual .swiper-control .swiper-button-prev::after,
.main-visual .swiper-control .swiper-button-next::after{ content:''; }
.main-visual .swiper-control .swiper-pagination{ position: relative; z-index:2; padding:0; text-align:left; }
.main-visual .swiper-control .swiper-pagination-bullet{ opacity: 1; width: 30px; height: 30px; line-height:28px; margin-right:10px; background: transparent; font-size:15px; color:rgba(255,255,255,0.6); text-align:center; transition: all .3s;}
.main-visual .swiper-control .swiper-pagination-bullet::before{ content:''; transition: opacity 0s; opacity:0; position: absolute; top:calc(50% - 1px); left: 45px; z-index:2; width:200px; height:2px; background:#fff; }
.main-visual .swiper-control.stop .swiper-pagination-bullet::before{ animation-play-state: paused; }
.main-visual .swiper-control .swiper-pagination-bullet::after{ content:''; transition:opacity 0s; opacity:0; position:absolute; top:calc(50% - 1px); left:45px; z-index:1; width:200px; height:2px; background:rgba(255,255,255,0.5); }
.main-visual .swiper-control .swiper-pagination-bullet-active{ position:relative; padding-right:220px; color:#fff; }
.main-visual .swiper-control .swiper-pagination-bullet-active::before{ transition:opacity 0.3s 0.3s; opacity:1; animation:slidePagiBar 5s 0.3s linear both; }
.main-visual .swiper-control .swiper-pagination-bullet-active::after{ transition:opacity 0.3s 0.3s; opacity:1; }
@keyframes slidePagiBar {
	0%{ width:0; }
	100%{ width:150px; }
}
@keyframes mainVisualAni { 
    0% { height: 0;}
    100% { height: 125vh; }
}

.main-visual .swiper-pause { position: relative; width: 10px; height: 15px; margin-left: 45px; z-index: 2;}
.main-visual .swiper-pause::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(/images/common/main-visual-pause.png) 50% / contain no-repeat;}
.main-visual .swiper-pause.on::before { background-image: url(/images/common/main-visual-play.png);}
.main-visual .swiper-button-prev, 
.main-visual .swiper-button-next { position: relative; left: auto; right: auto;}
.main-visual .swiper-button-prev::after,
.main-visual .swiper-button-next::after { content: ''; width: 10px; height: 20px; background: url(/images/common/ico-arrow-left.png) 50% no-repeat;}
.main-visual .swiper-button-next::after { background-image: url(/images/common/ico-arrow-right.png); }

.main-visual .swiper-control > div { position: relative; width: 300px; height: 100%; display: flex; align-items: center;}
.main-visual .swiper-control .swiper-pagination { position: absolute; bottom: 0; left: 0; color: #fff;}
.main-visual .swiper-control .swiper-pagination .current_num,
.main-visual .swiper-control .swiper-pagination .swiper-pagination-current { font-size: 20px; font-weight: 800; }
.main-visual .swiper-control .swiper-pagination .ptotal { top: -2px; right: 90px; font-size: 20px; font-weight: 800;}
.main-visual .swiper-button-prev { position: absolute; right: 30px}
.main-visual .swiper-button-next { position: absolute; right: 0;}
.main-visual .progresss-bar { height: 100%; margin: 0; margin-left: 30px; background-color: transparent; }
.main-visual .progresss-bar::before { content:''; position: absolute; top:calc(50% - 1px); left: 0px; z-index:2; /*width:150px;*/ height:2px; background:#fff;}
.main-visual .progresss-bar::after{ content:''; position:absolute; top:calc(50% - 1px); left:0px; z-index:1; width:150px; height:2px; background:rgba(255,255,255,0.5); transition:opacity 0s;}

.main-visual .progresss-bar.on::before { animation:slidePagiBar 4.7s 0.1s linear both; }
.main-visual .swiper-control.stop .progresss-bar::before{ animation-play-state: paused; }


/* main-product */
.main-product { position: relative;}
.main-product-bx { display: flex; align-items: center; height: 100%;}
.main-sec-tit-bx { position: relative; z-index: 2;}
.main-product-cover.swiper-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.main-product-cover::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 610px; height: 350px; background-color: #f5f4f3; border-radius: 999px;}
.main-prd-cover-item > div { display: flex; justify-content: center; align-items: center; height: 100%;}
.main-prd-cover-item > div img { max-width: 520px;}

.main-product-deco { position: absolute; color: #f9f9f9; font-weight: 900;}
.main-product-deco.top { top: -80px; left: 0; font-size: 220px;}
.main-product-deco.bottom { bottom: -85px; right: 0; font-size: 230px; }

/* 메인제품 swiper */
.main-product-wrap{height:100%;}
.main-product .main-product-name{overflow:hidden;}
.main-product .main-product-name .swiper-slide .current {display:block;font-size: 35px;font-weight: 700;color: #ededed; margin-bottom: 20px;text-align: left;}
.main-product .main-product-name .swiper-slide-active .current {opacity: 1;color: #000000;}
.main-product .swiper-slide .right-title li:last-of-type {margin-bottom: 0;}
.main-product .main-product-name {position: absolute;right: 0;bottom: 50%;transform: translateY(50%);z-index: 10;width: 50%;height: 370px;display: flex;align-items: center;}
.main-product .main-product-name .swiper-container {height: 380px;margin-left: 370px;}
.main-product .main-product-name .swiper-wrapper {width: 100%;position: relative;}
.main-product .prod-control {width: 1600px;margin: 0 240px;}
.main-product .prod-control .button-wrap {position: absolute;width: 322px;bottom: 200px;font-size: 20px;font-weight: 500;z-index: 10;}
.main-product .prod-control .button-wrap .swiper-pagination {position: absolute;left: 0;text-align: left;}
.main-product .prod-control .button-wrap .bold,.main-product .prod-control .button-wrap .swiper-pagination-current {font-weight: 800;font-size: 20px;}
.ptotal {position: absolute;right:100px;top: -2px;}
.main-product .swiper-button-prev {width: 16px;height: 16px;color:#000;left: auto;right: 40px;z-index: 20;top: -12px;}
.main-product .swiper-button-prev:after ,.main-product .swiper-button-next:after {font-size: 18px;font-weight:700;}
.main-product .swiper-button-next {width: 16px;height: 16px;color:#000;z-index: 20;top: -12px;}
.progresss-bar {position: relative;width: 150px;height: 2px;background: #e5e5e5;margin-left: 34px;margin-top: -25px;}
.progress-bar-bg {position: absolute;left: 0px;top: 0px;width: 150px;height: 2px;background: #e5e5e5;z-index: 9;}
.swiper-product-progress {position: absolute;left: 0;right: 0;top: 0px;bottom: 0px;width: 0;height: 2px;background: #2e2e2e;z-index: 10;}
.prod-control .control-btn {position: absolute;right: 74px;top: -42px;cursor: pointer;z-index: 20;}
.prod-control .control-btn div {display: none;}
.prod-control .control-btn div.active {display: block;}

/* video 버튼 */
.thumb-btn { position: absolute; bottom: 0; right: 35px; transform: translateY(50%); display: block; width: 85px; height: 85px; background-color: #fff; border-radius: 50%; box-shadow: 3px 3px 8px rgba(0,0,0,0.15); z-index: 1;}
.thumb-btn::before,
.thumb-btn::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color: #777; transition: all .4s;}
.thumb-btn::before { width: 2px; height: 22px;}
.thumb-btn::after { width: 22px; height: 2px;}

/* .thumb-btn:hover::before,
.thumb-btn:hover::after { transform: translate(-50%,-50%) rotate(180deg);} */

/* main-video */
.main-video { position: relative;}
.main-video .inner { max-width: none; padding: 0;}
.main-video-bx { display: flex; height: 100%;}
.main-video-bx .main-sec-tit-bx { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; width: 35%; padding-right: 130px;}
.main-video-list.swiper-container { width: 65%; margin-left: 80px; }
.main-video-list .swiper-wrapper { align-items: center; }
.main-video-item.swiper-slide { height: 470px; padding: 0 5px; }
.fp-completely .main-video-item { opacity: 1; transform: translateZ(0);}
.main-video-cover { position: relative; width: 100%; cursor: pointer;}
.main-video-cover::before { content: ''; position: absolute; top: -60px; bottom: 60px; left: 50%; width: 0; background-color: #f7f7f7; z-index: -1; transition: all .6s .2s;}
.main-video-cover::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #c1c1c1; opacity: 0.4; transition: all .3s;}
.main-video-txt { padding-top: 20px;}
.main-video-txt .tit { width: 80%; padding-bottom: 10px; font-size: 30px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.main-video-txt .subtit { color: #989898; font-size: 18px; font-weight: 500;}

.fp-completely .main-video-cover::before { width: 70%;}
.swiper-slide-active .main-video-cover::after { opacity: 0;}
.main-video-cover:hover::after { opacity: 0;}
.main-video-cover:hover .thumb-btn::before,
.main-video-cover:hover .thumb-btn::after { transform: translate(-50%,-50%) rotate(180deg);}

/* main-inquiry */
.main-inquiry { position: relative;}
.main-inquiry-bx { display: flex; justify-content: space-between; align-items: center; height: 100%;}
.main-inquiry-bx .main-sec-tit-bx { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; width: 32%; padding-right: 30px;}
.main-inquiry-cont { width: 68%; padding-left: 130px;}
.main-inquiry-write-form { padding: 50px; background-color: #fff; border-radius: 20px;}
.main-inquiry-write-form h3 { font-size: 40px; }
.main-inquiry-write-form ul { display: flex; flex-wrap: wrap; margin: 20px -20px 0;}
.main-inquiry .inquiry-write-item { width: 50%; padding: 30px 20px 0;}
.main-inquiry .inquiry-write-item > div { display: flex; align-items: center; padding: 5px 0; border-bottom: 2px solid #000;}
.main-inquiry .inquiry-write-item.whole { width: 100%;}
.main-inquiry .inquiry-write-item:last-child > div { flex-wrap: wrap; padding: 0; border: 0;}
.main-inquiry .inquiry-write-item .inquiry-tit { width: 244px; font-size: 18px; font-weight: bold;}
.main-inquiry .inquiry-write-item input { width: calc(100% - 90px); padding-bottom: 3px; border: 0; font-size: 16px;}
.main-inquiry .inquiry-write-item:last-child .inquiry-tit { width: auto;}
.main-inquiry .inquiry-write-item textarea { width: 100%; height: 140px; margin-top: 10px; padding: 10px; border: 2px solid #000; resize: none;}
.inquiry-form-bottom { padding-top: 10px;}
.inquiry-form-bottom .chk-item { margin-top: 10px;}
.inquiry-form-bottom label { font-size: 16px; font-weight: 500;}
.inquiry-form-bottom .view-more { display: inline-block; font-size: 16px; font-weight: 500; cursor: pointer;}
.inquiry-form-bottom .policy-bx { display: none; height: 80px; margin-top: 10px; padding: 5px; font-size: 13px; overflow-y: auto; border: 1px solid #ddd;}
.inquiry-form-bottom .policy-bx.show { display: block;}
.inquiry-btn { display: block; width: 200px; height: 60px; margin-left: auto; background-color: #68b82d; color: #fff; font-size: 18px; font-weight: bold; border-radius: 5px;}

.inquiry-form-bottom .password-input { /*display: none; margin-left: 10px;*/ font-size: 16px; border: 0; border-bottom: 1px solid #000; }
.inquiry-form-bottom .password-input.show { display: inline-block; }


.sub-inquiry-bx{justify-content: center;}
 .sub-inquiry-cont { justify-content:center; padding-left:0;}  

/*** sub ***/
.sub-top { margin-top: 100px; }
.snb-bg { position: relative; height: 470px; background: url(/images/contents/snb-bg-about.jpg) 0% 100% / cover no-repeat;}
.bg-greetings { background-image: url(/images/contents/snb-bg-greeting.jpg); background-position: bottom center;}
.bg-history { background-image: url(/images/contents/snb-bg-history.jpg);}
.bg-location { background-image: url(/images/contents/snb-bg-location.jpg);}
.bg-gcm, .bg-productList, .bg-productView, .bg-useProduct { background-image: url(/images/contents/snb-bg-gcm.jpg); background-position: center;}
.bg-faq, .bg-inquiry { background-image: url(/images/contents/snb-bg-inquiry.jpg);}
.bg-notice, .bg-video, .bg-certificates { background-image: url(/images/contents/snb-bg-notice.jpg);}
.sub-top-tit { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;}
.sub-top-tit p { font-size: 20px; font-weight: 500; letter-spacing: normal;}
.sub-top-tit h2 { font-size: 45px; font-weight: 900;}

.sub-nav { border-bottom: 1px solid #d9d9d9;}
.sub-nav > div { display: flex; justify-content: space-between; align-items: center; max-width: 1230px; height: 100%; margin: 0 auto; padding: 0 20px; }
.sub-page-navigation { position: relative; width: 280px; }
.sub-page-navigation::before { content: ''; position: absolute; top: 15px; left: 0; bottom: 15px; width: 1px; background-color: #d9d9d9;}
.sub-page-navigation > a { position: relative; display: block; padding: 0 50px; line-height: 100px; font-size: 20px; font-weight: bold; }
.sub-page-navigation > a::after { content: ''; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 16px; height: 10px; background: url(/images/common/ico_slt.png) 50% no-repeat; transition: all .3s;}
.sub-page-navigation > a.active::after { transform: translateY(-50%) rotate(-180deg); }
.sub-page-navigation ul { display: none; position: absolute; top: 101px; left: 0; right: 0; background-color: #fff; z-index: 1;}
.sub-page-navigation li a { display: block; padding: 0 50px; line-height: 60px; font-size: 16px; font-weight: 500; border: 1px solid #dcdcdc; border-top: 0; transition: all .4s;}
.sub-page-navigation li:hover a { color: #68b82d;}
.sub-page-navigation li.active a { background-color: #f4f4f4;}
.sub-nav-list { display: flex; }
.sub-nav-list li a { display: block; margin: 0 30px; font-size: 18px; font-weight: 500;}
.sub-nav-list li:last-child a { margin-right: 0;}
.sub-nav-list li.active a { color: #68b82d;}

/** about **/
/* about > about */
.about-sec-tit { padding-top: 15px; font-size: 43px; line-height: 1.2;}
.about-sec-tit02 { font-size: 38px;}
.about-sec-tit02 > div { display: inline;}
.about-sec-subtit { color: #b0b0b0; font-size: 22px; font-weight: 500; letter-spacing: normal;}
.about-sec-txt { padding-top: 30px; color: #666; font-size: 18px; font-weight: 500;}

.sub-about .half .inner02 { display: flex; justify-content: space-between; align-items: center; }
.sub-about .half .about-cont-txtWrap { width: 50%;}
.sub-about .whole { position: relative; text-align: center;}
.sub-about .whole .about-cont-txtWrap { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; }
.about-cont-cover { position: relative; width: 50%;}
.cir-ani01::before { content: ''; position: absolute; top: -94px; right: -94px; width: 188px; height: 188px; background: url(/images/contents/about-cir-gray.png) 50% / cover no-repeat; animation: aboutCir 8s linear infinite both; }
.cir-ani02::before { content: ''; position: absolute; top: -94px; left: -94px; width: 188px; height: 188px; background: url(/images/contents/about-cir-color.png) 50% / cover no-repeat; animation: aboutCir 8s linear infinite both;}
@keyframes aboutCir {
    0% { transform: rotate(0deg);}
    100% { transform: rotate(360deg);}
}

.sub-about { overflow: hidden;}
.sub-about > .inner { max-width: none; padding: 0;}
.sub-about-cont01 { position: relative; padding: 140px 0 100px;}
.sub-about-cont01::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 0; background-color: #f6f8f1; z-index: -1; transition: all 1.2s ease-in-out;}
.sub-about-cont01 .about-cont-cover { margin-right: 50px;}
.sub-about-cont01 .about-cont-cover img { width: 100%;}
.sub-about-cont01.aos-animate::before { width: 45%;}

.sub-about-cont02 { padding: 100px 0 150px;}
.sub-about-cont02 .about-cont-txtWrap { padding-left: 40px;}
.sub-about-cont03 { width: 96%; margin: 0 auto 50px;}
.sub-about-cont03 .about-sec-tit { font-size: 45px; text-shadow: 3px 3px 10px rgba(0,0,0,0.15);}
.sub-about-cont03.whole .about-cont-txtWrap { position: relative; height: 630px;}
.sub-about-cont03.whole .about-cont-txtWrap::before,
.sub-about-cont03.whole .about-cont-txtWrap::after { content: ''; position: absolute; top: 0; bottom: 0; width: 50%; background-color: #fff; transition: all 1.5s; z-index: 1;}
.sub-about-cont03.whole .about-cont-txtWrap::before { left: 0;}
.sub-about-cont03.whole .about-cont-txtWrap::after { right: 0;}
.sub-about-cont03.aos-animate .about-cont-txtWrap::before,
.sub-about-cont03.aos-animate .about-cont-txtWrap::after { width: 0;}
.sub-about-cont04 { padding-top: 100px; }
.sub-about-cont04.half .about-cont-txtWrap { width: 40%;}

.sub-about-cont05 { padding: 100px 0;}
.about-cont05-list ul { display: flex; margin: 0 -20px;}
.about-cont05-item { width: 25%; padding: 0 20px;}
.about-cont05-item > div { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; aspect-ratio: 1/1; text-align: center; border: 12px solid #f6f8f1;}
.about-cont05-item .ir { display: inline-block; width: 75px; height: 75px;}
.about-cont05-item .ico-about05-01 { background: url(/images/contents/ico-about05-01.png) 50% /contain no-repeat;}
.about-cont05-item .ico-about05-02 { background: url(/images/contents/ico-about05-02.png) 50% /contain no-repeat;}
.about-cont05-item .ico-about05-03 { background: url(/images/contents/ico-about05-03.png) 50% /contain no-repeat;}
.about-cont05-item .ico-about05-04 { background: url(/images/contents/ico-about05-04.png) 50% /contain no-repeat;}
.about-cont05-txt { padding-top: 25px;}
.about-cont05-subtit { color: #666666; font-size: 18px; font-weight: 500;}
.about-cont05-tit { color: #131313; font-size: 27px; font-weight: bold; line-height: 30px;}

.sub-about-cont06 { padding: 80px 0 130px; background-color: #f9f9f9; text-align: center;}
.about-cont06-cover { padding-top: 35px;}
.about-cont06-cover img { margin: 0 auto;}

.sub-about-cont07 { position: relative; padding: 585px 0 280px;}
.sub-about-cont07::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 650px; background: url(/images/contents/about-cont07-bg.jpg) 50% / cover no-repeat;}
.about-cont07-wrap { position: relative; padding-top: 70px; background-color: #fff; z-index: 1;}
.sub-about-cont07 .about-sec-tit { padding: 0; color: #e4e6e1; font-size: 60px; text-align: center;}
.about-cont07-bx { display: flex; padding-top: 70px; margin: 0 30px;}
.about-cont07-item { width: 50%; padding: 0 60px;}
.about-cont07-item:first-child { border-right: 1px solid #c6c6c6;}
.about-cont07-item .subtit { font-size: 22px; font-weight: 500;}
.about-cont07-item .txt { padding-top: 20px; font-size: 25px; font-weight: 500; line-height: 1.6;}


/* about > greetings */
.sub-greetings { padding-top: 120px;}
.sub-greetings > .inner { max-width: none; padding: 0;}
.sub-greeting-cont01 { position: relative; padding: 140px 0 20px;}
.sub-greeting-cont01::before { content: ''; position: absolute; bottom: 0; left: 40px; width: 0; height: 750px; background-color: #f6f8f1; transition: all .8s .2s; z-index: -1;}
.sub-greeting-cont01.aos-animate::before { width: 35%;}
.greeting-sec-tit { max-width: 1390px; margin: 0 auto; padding: 0 20px;}
.greeting-sec-tit h3 { font-size: 38px;}
.greeting-sec-tit h3 > div { display: inline; }
.sub-greeting-cont01 .inner02 { display: flex; justify-content: space-between}
.greeting-cont01-cover { position: relative; }
.greeting-cont01-txtWrap { width: 46%;}
.sub-greeting-cont01 .about-sec-tit02 { padding-top: 20px; line-height: 1.5;}
.sub-greeting-cont01 .about-sec-txt { padding-top: 35px; color: #090909;}
.sub-greeting-cont01 .about-sec-txt b { margin-left: 5px; font-size: 35px;}

.sub-greeting-cont02 { position: relative; width: 96%; margin: 150px auto 40px;}
.greeting-cont02-txtWrap { display: flex; justify-content: center; align-items: center; height: 610px;}
.greeting-cont02-txtWrap::before,
.greeting-cont02-txtWrap::after { content: ''; position: absolute; top: 0; bottom: 0; width: 50%; background-color: #fff; transition: all 1.5s; z-index: 1;}
.greeting-cont02-txtWrap::before { left: 0;}
.greeting-cont02-txtWrap::after { right: 0;}
.aos-animate .greeting-cont02-txtWrap::before,
.aos-animate .greeting-cont02-txtWrap::after { width: 0;}

.greeting-cont02-txt { color: #fff; font-size: 37px; font-weight: bold; text-align: center; line-height: 1.5; }

/* about > history */
.sub-history { position: relative; margin-top: 80px;}
.sub-history > .inner { max-width: none; padding: 0;}
.sub-history-cont { padding-bottom: 220px; }
.history-sec-tit h3 { font-size: 30px;}
.history-cover { position: absolute; top: 0; left: 35px; width: 800px; height: 840px; }
.history-cover ul { width: 100%; height: 100%;}
.history-cover-item { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; background: url(/images/contents/history-cover01.jpg) 50% / cover no-repeat; opacity: 0; visibility: hidden; transition: all .2s;}
.history-cover-item:nth-child(2) { background-image: url(/images/contents/history-cover02.jpg);}
.history-cover-item:nth-child(3) { background-image: url(/images/contents/history-cover03.jpg);}
.history-cover-item:nth-child(4) { background-image: url(/images/contents/history-cover04.jpg);}
.history-cover h4 { font-size: 75px; }
.history-cover p { font-size: 25px; font-weight: bold; text-align: center;}
.history-list { width: 46%; margin-left: auto; padding-top: 100px;}
.history-item + .history-item { padding-top: 80px; }
.history-item .history-year { font-size: 55px; font-weight: 900; transition: all .4s;}
.history-item ol { position: relative; margin-top: 20px;}
.history-item ol li { position: relative; padding-left: 50px;}
.history-item ol li + li { margin-top: 40px;}
.history-item ol li::before { content: ''; position: absolute; top: 12px; left: 0; width: 10px; height: 10px; background-color: #dadada; border-radius: 50%;}
.history-item ol li::after { content: ''; position: absolute; top: 12px; left: 5px; bottom: -52px; width: 1px; transform: translateX(-50%); background-color: #dadada;}
.history-item ol li:last-child::after { display: none;}
.history-item .history-month { font-size: 22px; font-weight: bold;}
.history-item-txt { position: relative; padding-left: 10px; font-size: 18px; font-weight: 500;}
.history-item-txt + .history-item-txt { margin-top: 15px;}
.history-item-txt::before { content: ''; position: absolute; top: 13px; left: 0; width: 3px; height: 3px; background-color: #000; border-radius: 50%;}

.history-cover.fixed { position: fixed; top: 35px;}
.history-cover.fixed02 { top: auto; bottom: 35px;} 
.history-cover.test { background-image: url(/images/contents/history-cover04.jpg) !important;}


/* about > location */
.sub-location-cont01 { padding-top: 70px; }
.sub-location-cont02 { padding: 170px 0 250px; }
.map-bx .root_daum_roughmap { width: 100%; height: 475px;}
.location-bx { padding-top: 40px;}
.location-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 25px; border-bottom: 1px solid #e7e7e7;}
.location-tit { display: flex; align-items: flex-end; }
.location-tit h3 { font-size: 40px; }
.location-tit p { padding-left: 20px; color: #b5b5b5; font-size: 20px; font-weight: 500;}
.location-top a { position: relative; display: block; padding-right: 50px; color: #666; font-size: 18px; font-weight: 500; }
.location-top a::after { content: ''; position: absolute; top: 50%; right: 0; width: 30px; height: 30px; transform: translateY(-50%); background: url(/images/contents/ico-naver.png) 50% / cover no-repeat; }
.location-info { padding-top: 25px; }
.location-info dl { display: flex; align-items: center;}
.location-info dl + dl { margin-top: 10px;}
.location-info dt { width: 155px; font-size: 20px; font-weight: 500;}
.location-info dt::before { content: ''; display: inline-block; width: 17px; height: 17px; margin-right: 25px; background: url(/images/contents/ico-location01.png) 50% no-repeat;}
.location-info dl:nth-child(2) dt::before { background-image: url(/images/contents/ico-location02.png); }
.location-info dl:nth-child(3) dt::before { background-image: url(/images/contents/ico-location03.png); }
.location-info dd { width: calc(100% - 155px); color: #666; font-size: 18px; font-weight: 500;}


/** product **/
/* product > GCM */
.sub-gcm { overflow: hidden;}
.sub-gcm > .inner { max-width: none; padding: 0;}
.sub-gcm-cont01 { padding: 120px 0 150px; }
.gcm-cont01-tit-bx { text-align: center; }
.gcm-cont01-tit-bx .tit { margin-bottom: 20px; font-size: 50px;}
.gcm-cont01-tit-bx .subtit { color: #b9b9b9; font-size: 25px; }
.gcm-cont01-tit-bx .subtit b { color: #a2a2a2; font-weight: 900;}
.gcm-cont01-tit-bx .info { padding-top: 30px; font-size: 24px; font-weight: 500; line-height: 1.5;}
.gcm-cont01-info { display: flex; justify-content: space-between; margin-top: 70px;}
.gcm-cont01-item { width: calc(50% - 10px);}
.gcm-cont01-item-cover { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 350px; background-color: #f8f8f8; text-align: center;}
.gcm-cont01-item-cover p { padding-top: 20px; font-size: 16px; line-height: 1.5; }
.gcm-cont01-item > p { position: relative; margin-top: 20px; padding-left: 10px; color: #999; font-size: 20px; font-weight: 500;}
.gcm-cont01-item > p::before { content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 3px; height: 3px; background-color: #999; border-radius: 50%;}

.sub-gcm-cont02 { padding: 70px 0 85px; background-color: #f9f9f9;}
.sub-gcm-cont02 h4 { font-size: 28px; text-align: center; }
.gcm-cont02-list { padding-top: 50px;}
.gcm-cont02-list > ul { display: flex; flex-wrap: wrap; margin: 0 -25px;}
.gcm-cont02-item { width: 50%; padding: 0 25px;}
.gcm-cont02-item:nth-child(n+3) { padding-top: 50px;}
.gcm-cont02-item > div { background-color: #fff; text-align: center;}
.gcm-cont02-tit-bx { padding: 25px 0 20px; border-bottom: 1px solid #ececec;  }
.gcm-cont02-tit-bx .num { color: #68b83d; font-size: 16px; font-weight: bold;}
.gcm-cont02-tit-bx .txt { padding-top: 5px; font-size: 22px; font-weight: bold; }
.gcm-cont02-item .compare { display: flex; justify-content: center; align-items: center; padding: 30px 0;}
.gcm-cont02-item .compare-item { padding: 0 15px;}
.gcm-cont02-item .compare-item p { padding-top: 15px; color: #959595; font-size: 20px; font-weight: 500; }
.gcm-cont02-item .compare-item:nth-child(2) p { color: #68b431; font-weight: bold; }

.sub-gcm-cont03 { padding: 120px 0 190px ;}
.gcm-cont03-tit-bx { text-align: center;}
.gcm-cont03-tit-bx .subtit { color: #999; font-size: 18px; font-weight: 500; }
.gcm-cont03-tit-bx .tit { padding-top: 5px; font-size: 45px;}
.gcm-cont03-tit-bx .info { padding-top: 20px; color: #070707; font-size: 18px; font-weight: 500;}
.gcm-cont03-info { display: flex; justify-content: space-between; align-items: center; padding-top: 70px;}
.gcm-cont03-item:nth-child(1) { width: 45%; padding-left: 80px; }
.gcm-cont03-item:nth-child(2) { width: 55%; padding-right: 80px; }
.gcm-cont03-item h4 { font-size: 30px;}
.gcm-cont03-item p { padding-top: 20px; color: #070707; font-size: 18px; font-weight: 500;}
.gcm-cont03-video { position: relative; padding-top: 56.25%;}
.gcm-cont03-item iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.sub-gcm-cont04 { padding: 130px 0 170px; background-color: #f5f5f5;}
.gcm-cont04-tit-bx { text-align: center;}
.gcm-cont04-tit-bx .subtit { font-size: 18px; font-weight: 500; }
.gcm-cont04-tit-bx .tit { padding-top: 10px; font-size: 45px; }
.gcm-cont04-list { padding-top: 100px;}
.gcm-cont04-list ul { display: flex; flex-wrap: wrap; justify-content: space-between;}
.gcm-cont04-item { width: 20%; text-align: center;}
.gcm-cont04-item .ir { display: inline-block; width: 80px; height: 73px;}
.gcm-cont04-item .ico-gcm04-01 { background: url(/images/contents/ico-gcm04-01.png) 50% no-repeat;}
.gcm-cont04-item .ico-gcm04-02 { background: url(/images/contents/ico-gcm04-02.png) 50% no-repeat;}
.gcm-cont04-item .ico-gcm04-03 { background: url(/images/contents/ico-gcm04-03.png) 50% no-repeat;}
.gcm-cont04-item .ico-gcm04-04 { background: url(/images/contents/ico-gcm04-04.png) 50% no-repeat;}
.gcm-cont04-item .ico-gcm04-05 { background: url(/images/contents/ico-gcm04-05.png) 50% no-repeat;}
.gcm-cont04-txt { padding-top: 30px; font-size: 18px; font-weight: 500; line-height: 1.6;}

/* product > culture_product_list, other_product_list 공통 */
.sub-product-list { padding-top: 80px;}
.sub-product-list ul { display: flex; flex-wrap: wrap; margin: 0 -25px;}
.product-item { width: 50%; padding: 0 25px 100px;}
.product-item > a { position: relative; display: block; border-bottom: 2px solid #ececec;}
.product-item > a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background-color: #68b82d; transition: all .4s;}
.product-thumb { position: relative; height: 375px; text-align: center;}
.product-thumb::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 80%; background-color: #f7f7f2; border-radius: 10px; z-index: -1; }
.product-thumb img { height: 96%; object-fit: contain; transition: all .4s;}
.product-item-txt { padding: 20px 0;}
.product-item-txt .tit { color: #333; font-size: 29px;}
.product-item-txt .info { padding-top: 10px; color: #8a8a8a; font-size: 18px;}

.product-item > a:hover::after { width: 100%; }
.product-item > a:hover .product-thumb img { transform: scale(1.03);}
.product-item > a:hover .thumb-btn::before,
.product-item > a:hover .thumb-btn::after { transform: translate(-50%,-50%) rotate(180deg);}


/* product > culture_product, other_product 공통 */
.sub-productView > .inner02 { max-width: none; padding: 0;}
.sub-product-cont-bx { display: flex; justify-content: space-between; align-items:top; max-width: 1390px; padding: 110px 20px 0; margin: 0 auto;}
.product-cover { width: 45%; padding: 0 60px;}
.product-detail { width: 47%; }
.product-badge ul { display: flex;}
.product-badge li { margin-right: 5px;}
.product-badge li > div { display: flex; justify-content: center; align-items: center; height: 30px; padding: 0 15px; color: #fff; border-radius: 999px;}
.product-badge li.best > div { background-color: #398be7; }
.product-badge li.kind > div { background-color: #95cd3e;}
.product-badge li.kind02 > div { background-color: #5c5c5c;}
.product-badge li.kind03 > div { background-color: #ea9064;}
.product-tit { padding-top: 20px;}
.product-name { color: #333; font-size: 40px;}
.product-txt { padding-top: 15px; color: #8a8a8a; font-size: 18px; line-height: 1.5;}
.product-info { padding-top: 40px;}
.product-info dl { position: relative; padding: 20px; font-size: 18px; border-top: 1px solid #ececec;}
.product-info dt { position: absolute; top: 20px; left: 20px; font-weight: bold;}
.product-info dd { position: relative; margin-left: 90px; padding-left: 93px; color: #888;}
.product-info dl:first-child dd::before { content: ''; position: absolute; top: 50%; left: 79px; transform: translateY(-50%); width: 3px; height: 3px; background-color: #888; border-radius: 50%; }
.product-info dd + dd { padding-top: 5px;}
.product-btn-wrap { display: flex; justify-content: space-between; padding-top: 20px; border-top: 1px solid #ececec;}
.product-btn-wrap a { position: relative; display: block; width: calc(50% - 10px); height: 70px; line-height: 70px; text-align: center; font-size: 18px; font-weight: bold;}
.product-btn-wrap a::after { content: ''; display: inline-block; width: 19px; height: 18px; margin-left: 15px; background: url(/images/contents/ico-product-btn01.png) 50% no-repeat; vertical-align: text-top;}
.product-btn-wrap a:last-child::after { background-image: url(/images/contents/ico-product-btn02.png); }
.product-btn-wrap a:first-child { color: #2e2e2e; background-color: #e5e5e5; }
.product-btn-wrap a:last-child { color: #fff; background-color: #68b82d; }

.product-btn-wrap02 a{width:100%;}

.product-list-btn-wrap { padding-top: 70px;}
.product-list-btn { position: relative; display: block; width: 215px; height: 70px; line-height: 68px; margin: 0 auto; color: #8a8a8a; font-size: 20px; border: 1px solid #cfcfcf; border-radius: 99px; transition: all .4s; text-align: center; overflow: hidden;}
.product-list-btn::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 0; background-color: #68b82d; transition: all .4s; z-index: -1;}
.product-list-btn:hover { color: #fff;}
.product-list-btn:hover::before { width: 100%; } 

.sub-product-bottom { margin-top: 270px; padding: 80px 0; background-color: #f8f8f8; }
.sub-product-bottom ul { display: flex; max-width: 1390px; padding: 0 20px; margin: 0 auto;}
.product-bottom-item { width: 50%; }
.product-bottom-item:first-child { border-right: 1px solid #c7c7c7;}
.product-bottom-item > div { display: flex; justify-content: center; align-items: center;}
.product-bottom-item a { position: relative; display: block;}
.product-bottom-item a::before { content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100px; height: 113px; background: url(/images/contents/ico-product-bottom01.png) 50% no-repeat;}
.product-bottom-item:last-child a::before { width: 133px; height: 92px; background-image: url(/images/contents/ico-product-bottom02.png);} 
.product-bottom-item a::after { content: ''; position: absolute; top: 0; right: -85px; width: 19px; height: 18px; background: url(/images/contents/ico-product-btn01.png) 50% no-repeat;}
.product-bottom-item:last-child a::after { right: -50px;}
.product-bottom-item:first-child a { padding-left: 150px; }
.product-bottom-item:last-child a { padding-left: 180px; }
.product-bottom-item span { color: #bababa; font-size: 16px; font-weight: 500; }
.product-bottom-item p { padding-top: 15px; font-size: 32px; font-weight: 500; line-height: 1.5;}

/* product > use_product */
.sub-useProduct { padding-top: 120px;}
.sub-useProduct > .inner { max-width: none; padding: 0; }
.use-cont-tit-bx { text-align: center;}
.use-cont-tit-bx .tit { font-size: 45px;}
.use-cont-tit-bx .subtit { color: #b9b9b9; font-size: 25px;}
.use-cont-tit-bx .subtit b { color: #a2a2a2; font-weight: 900; }

.sub-use-cont01 { position: relative; }
.sub-use-cont01::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 75%; background-color: #f7f7f7; z-index: -1;}
.sub-use-cont01 .use-cont-tit-bx .tit { padding-bottom: 20px;}
.use-cont01-img-list { padding-top: 60px; }
.use-cont01-img-list ul { display: flex; justify-content: space-between; align-items: flex-end; width: 80%; margin: 0 auto;}
.use-cont01-img-item { padding: 0 10px; text-align: center; margin-left:30px;}
.use-cont01-img-item p { padding-top: 20px; font-size: 22px; font-weight: bold;}
.use-cont01-list { padding: 130px 0 150px;}
.use-cont01-list ul { display: flex; flex-wrap: wrap; margin: 0 -15px; list-style: none; counter-reset: list-number;}
.use-cont01-item { width: 50%; padding: 0 15px; counter-increment: list-number;}
.use-cont01-item:nth-child(n+3) { padding-top: 30px;}
.use-cont01-item > div { display: flex; align-items: center; height: 250px; padding: 15px 20px; background-color: #fff; border: 2px solid #e1e1e1;}
.use-cont04_2-item > div,.use-cont05-item > div {height:355px;}
.use-cont01-item-cover { border: 3px solid #d0d0d0;}
.use-cont01-item-txt-bx { padding-left: 40px;}
.use-cont01-item-txt-bx .tit { position: relative; padding-left: 40px; font-size: 25px; line-height:1.2 }
.use-cont01-item-txt-bx .tit::before { content:counter(list-number); position: absolute; top: 5px; left: 0; width: 28px; height: 28px; line-height: 28px; background-color: #68b82d; color: #fff; font-size: 15px; font-weight: bold; text-align: center; border-radius: 50%;}
.use-cont01-item:nth-child(6) .tit::before { content: '5';}
.use-cont01-item-txt-bx .info { padding-left: 35px; padding-top: 10px; color: #666; font-size: 18px; line-height: 1.5;}
.use-cont01-item-txt-bx .info02 { padding-left: 35px; color: #b4b4b4; font-size: 16px;}

.use-cont01-table { width: 100%; border-bottom: 1px solid #8b8b8b;}
.use-cont01-table th { padding: 10px 0; background-color: rgba(104,184,45,0.2); font-size: 18px; font-weight: bold; text-align: center; border-top: 1px solid #8b8b8b; border-bottom: 1px solid #8b8b8b;}
.use-cont01-table th span { color: #27594d;}
.use-cont01-table td { padding: 10px 15px; color: #3c3c3c; font-size: 17px; font-weight: 500; border-bottom: 1px solid #d5d5d5;}
.use-cont01-table td:first-child { border-right: 1px solid #d5d5d5;}
.use-cont01-table tr:last-child td { border-bottom: 0;}

.sub-use-cont02 { padding: 120px 0;}
.sub-use-cont02 .use-cont-tit-bx .tit { padding-top: 20px;}
.use-cont02-list { padding-top: 50px;}
.use-cont02-list ul { list-style:none; counter-reset:list-number;}
.use-cont02-item { counter-increment:list-number; padding: 40px 120px; border-bottom: 1px solid #d7d7d7;}
.use-cont02-item > div { position: relative; padding-left: 60px; font-size: 23px; font-weight: 500; }
.use-cont02-item > div::before { content:counter(list-number); position: absolute; top: 7px; left: 0; width: 30px; height: 30px; line-height: 30px; background-color: #68b82d; color: #fff; border-radius: 50%; font-size: 16px; font-weight: bold; text-align: center;}

.sub-use-cont03 { padding: 130px 0; background: url(/images/contents/use-cont03-bg.jpg) 50% /cover no-repeat; overflow: hidden;}
.use-cont03-list ul { display: flex; flex-wrap: wrap; align-items: stretch; margin: 0 -25px;}
.use-cont03-item { width: 50%; padding: 0 25px;}
.use-cont03-item:nth-child(n+3) { padding-top: 50px;}
.use-cont03-item > div { position: relative; height: 100%; padding: 50px 45px; background-color: #fff; border-top: 3px solid #68b82d;} 
.use-cont03-item .txt { font-size: 18px;}
.use-cont03-tit-bx { padding-bottom: 10px; border-bottom: 2px solid #c9c9c9;} 
.use-cont03-tit-bx h4 { font-size: 35px;} 
.use-cont03-top-info { padding-top: 30px;}
.use-cont03-info01 { margin-top: 25px;}
.use-cont03-info02 > div { margin-top: 25px}
.use-cont03-item h5 { display: inline-block; margin-bottom: 15px; padding: 0 15px; background-color: #68b82d; color: #fff; font-size: 20px; border-radius: 99px;}
.use-cont03-info02 dl { display: flex;  font-size: 18px; }
.use-cont03-info02 dl + dl { padding-top: 10px;}
.use-cont03-info02 dt { width: 100px; color: #68b82d; font-weight: bold;}
.use-cont03-info02 dd { width: calc(100% - 100px); color: #191919;}
.use-cont03-info02 .ratio { display: flex;  flex-wrap: wrap;}
.use-cont03-info02 .ratio dl { width: 50%; flex-direction:column; }
.use-cont03-info02 .ratio dl + dl { padding: 0;}
.use-cont03-info02 .ratio dl:nth-child(n+3) { padding-top: 5px;}
.use-cont03-info02 .ratio dt { /*width: 95px;*/ width:auto; margin-right: 10px; border: 2px solid; text-align: center; min-height:60px; align-content:center;}
.use-cont03-info02 .ratio dd { /*width: calc(100% - 95px);*/  width:auto; }
.use-cont03-info02 .important { position: relative; padding: 15px 30px; background-color: #f5f5f5; border-radius: 10px;}
.use-cont03-info02 .important::before { content: ''; position: absolute; top: 20px; left: 30px; width: 43px; height: 43px; background: url(/images/contents/ico-important.png) 50% no-repeat;}
.use-cont03-info02 .important p { padding-left: 70px; line-height: 1.5;}
.use-cont03-info02 .important p + p { padding-top: 15px;}

.use-cont03-item:nth-child(1) > div::after { content: ''; position: absolute; bottom: 29%; left: -15%; width: 136px; height: 95px; background: url(/images/contents/use-cont03-item-01.png) 50% no-repeat;}
.use-cont03-item:nth-child(2) > div::after { content: ''; position: absolute; top: 35%; right: -80px; width: 116px; height: 121px; background: url(/images/contents/use-cont03-item-02.png) 50% no-repeat;}
.use-cont03-item:nth-child(3) > div::after { content: ''; position: absolute; top: 10%; right: 8%; width: 90px; height: 153px; background: url(/images/contents/use-cont03-item-03.png) 50% no-repeat;}
.use-cont03-item:nth-child(4) > div::after { content: ''; position: absolute; top: 30%; right: -8%; width: 103px; height: 87px; background: url(/images/contents/use-cont03-item-04.png) 50% no-repeat;}

.sub-use-cont04 { padding: 120px 0;}
.sub-use-cont04 .use-cont-tit-bx .tit { padding-top: 20px;}
.use-cont04-list { padding-top: 30px;}
.use-cont04-list ul { list-style:none; counter-reset:list-number;}
.use-cont04-item { counter-increment:list-number; padding: 40px 90px; border-bottom: 1px solid #d7d7d7;}
.use-cont04-item > div { position: relative; padding-left: 60px; font-size: 23px; font-weight: 500; }
.use-cont04-item > div::before { content:counter(list-number); position: absolute; top: 7px; left: 0; width: 30px; height: 30px; line-height: 30px; background-color: #68b82d; color: #fff; border-radius: 50%; font-size: 16px; font-weight: bold; text-align: center;}

/** inquiry **/
/* inquiry > FAQ */
.folderList{margin:100px 0;color:#000;border-top:3px solid #000;}
.folderList .q, .folderList .a{position:absolute;}
.folderList.faq .faq_q, .folderList.faq .faq_a{position:relative;}
.folderList .q{left:2em;top:1.9em;font-family:'Roboto';}
.folderList .a{left:26px;top:20px;}
.folderList.faq li{border-bottom:1px solid #e3e3e3;background:#fff;}
.folderList.faq li > p{cursor:pointer;}
.folderList.faq .faq_q{position:relative;padding:2em 140px;font-size:24px;font-weight:700;/*background:url(/images/common/icon-arrow-down.png) right 50px top 54px no-repeat;*/ transition: all .3s;}
.folderList.faq .faq_q::before { content: ''; position: absolute; top: 50%; right: 58px; transform: translateY(-50%); width: 3px; height: 20px; background-color: #333;}
.folderList.faq .faq_q::after { content: ''; position: absolute; top: 50%; right: 50px; transform: translateY(-50%); width: 20px; height: 3px; background-color: #333;}
.folderList.faq .faq_a{padding:2em 140px;font-size:20px;background:#f7f7f7;}
.folderList.faq .open .faq_q{color:#68b82d;border-bottom:1px solid #e3e3e3;}
.folderList.faq .open .faq_q::before { transform: translateY(-50%) rotate(90deg)}

/* inquiry > inquiry */
.sub-inquiry-cont { padding-bottom: 200px;}
.sub-inquiry-tit { padding-top: 110px; text-align: center;}
.sub-inquiry-tit h3 { font-size: 48px; }
.sub-inquiry-write-cont { max-width: 690px; margin: 80px auto 300px;}
.sub-inquiry-write-item + .sub-inquiry-write-item { padding-top: 20px;}
.inquiry-item-tit { margin-bottom: 5px; font-size: 22px; font-weight: bold; }
.inquiry-item-tit span { position: relative; }
.inquiry-item-tit.req span::after { content:''; position: absolute; top: 0; right: 0; width: 4px; height: 4px; background-color: #68b82d;  border-radius: 50%;}
.sub-inquiry-write-item input, .sub-inquiry-write-item textarea { width: 100%; padding: 0 20px; background-color: #f9f9f9; font-size: 18px; border: 0; border-radius: 5px;}
.sub-inquiry-write-item input { height: 60px;}
.sub-inquiry-write-item input::placeholder { color: #7d7d79;}
.sub-inquiry-write-item input[type=file] { height: auto; padding:5px;background-color: transparent;}
.sub-inquiry-write-item textarea { min-height: 250px; padding: 20px; resize: none;}
.inquiry-write-btnbox { display: flex; justify-content: space-between; margin: 40px auto 0;}
.inquiry-write-btn { width: calc(50% - 5px); height: 70px; line-height: 70px; color: #fff; font-size: 20px; font-weight: bold; border-radius: 5px;}
.inquiry-write-btnbox button.inquiry-write-btn { background-color: #68b82d;  }
.inquiry-write-btnbox a.inquiry-write-btn { display: block;  background-color: #b9b9b9; text-align: center;}

/* inquiry > inquiry_view */
.sub-inquiry-view-cont{ padding: 90px 0 200px;}
.sub-inquiry-view-cont .board-btn-wrap a { position: relative; display: block; width: 215px; height: 70px; line-height: 68px; margin: 60px auto 0; color: #8a8a8a; font-size: 20px; text-align: center; border: 1px solid #cfcfcf; border-radius: 99px; transition: all .4s; overflow: hidden;}

/** community **/
/* community > notice */
.sub-notice-cont { padding: 100px 0 200px;}
.notice-list { border-top: 3px solid #333;}
.notice-item { position: relative; border-bottom: 1px solid #e3e3e3;}
.notice-item::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 0; height: 1px; background-color: #68b82d; transition: all .4s;}
.notice-item.notice { background-color: #f7f7f7;}
.notice-item-anchor { display: block; }
.notice-item-anchor > div { display: flex; height: 190px; align-items: center;}
.notice-item .field { width: 15%; color: #8a8a8a; font-size: 16px; font-weight: 500; text-align: center;}
.notice-item.notice .field { color: #68b82d;}
.notice-item .txt { width: 70%; max-width: 903px;}
.notice-item .txt > a { display: block;}
.notice-item .tit-bx { height: 60px; margin-bottom: 30px;}
.notice-item .tit-bx .tit { color: #333; font-size: 22px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.notice-item .tit-bx .info { color: #666; font-size: 16px; }
.notice-item .date { color: #8a8a8a;}
.notice-item .cover { width: 15%; margin: 0 30px; text-align: center; border-radius: 5px; overflow: hidden;}
.notice-item .cover img { width: 100%; height: 110px; object-fit: cover; transition: all .4s;}

.notice-item:hover::after { width: 100%;}
.notice-item:hover .cover img { transform: scale(1.05);}

/* community > notice_view */
.sub-notice-view-cont { padding: 95px 0 200px;}
.sub-notice-view-cont .boardView { border-bottom: 1px solid #e4e4e4; }
.sub-notice-view-cont .boardView th { padding: 35px 60px; border-top-width: 3px;}
.sub-notice-view-cont .boardViewTit { display: flex; justify-content: space-between; align-items: center;}
.sub-notice-view-cont .boardViewTit h3 { font-size: 25px;}
.sub-notice-view-cont .boardViewTit .date { color: #8a8a8a; font-size: 16px; font-weight: 400;}
.sub-notice-view-cont .viewDetail { padding: 60px 0; font-size: 18px; line-height: 1.75;}
.notice-view-item { border-bottom: 1px solid #e4e4e4;}
.notice-view-anchor { display: block;}
.notice-view-anchor > div { display: flex; justify-content: space-between; align-items: center; padding: 40px 60px;}
.notice-view-item p { position: relative; padding: 0 5px 0 85px; color: #333; font-size: 20px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notice-view-item p::before { content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 18px; height: 10px; background: url(/images/common/notice-arrow-prev.png) 50% no-repeat;}
.notice-view-item.next p::before { background-image: url(/images/common/notice-arrow-next.png);}
.notice-view-item .date { color: #8a8a8a; font-size: 16px; }
.sub-notice-view-cont .board-btn-wrap { padding-top: 40px;}
.sub-notice-view-cont .board-btn-wrap a { position: relative; display: block; width: 135px; height: 55px; line-height: 53px; margin: 0 auto; font-size: 16px; font-weight: 500; border: 1px solid; border-radius: 99px; transition: all .4s; overflow: hidden;}

/* 목록으로 버튼*/
.sub-sec .board-btn-wrap a::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 0; background-color: #68b82d; transition: all .4s; z-index: -1;}
.sub-sec .board-btn-wrap a:hover { color: #fff; border-color: transparent;}
.sub-sec .board-btn-wrap a:hover::before { width: 100%;}

/* community > video */
.sub-video > .inner02 { max-width: none; padding: 0;}
.sub-video-cont { padding-bottom: 200px;}
.top-video { position: relative;}
.top-video::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 0; background-color: #f7f7f7; z-index: -1; transition: all 1.2s;}
.top-video::after { content: 'media'; position: absolute; top: 50%; right: -30px; color: #f8f8f8; font-size: 140px; font-weight: bold; transform: translateY(-50%) rotate(90deg); text-transform: uppercase; letter-spacing: normal; z-index: -1;}
.top-video-bx { display: flex; align-items: center; max-width: 1260px; height: 620px; margin: 0 auto;  padding: 0 20px;}
.top-video-txtWrap { width: 50%;}
.top-video-subtit { color: #cdcdcd; font-size: 20px; font-weight: bold; letter-spacing: normal}
.top-video-tit { padding-top: 20px; font-size: 40px; line-height: 1.4; }
.top-video-txt { padding-top: 30px; color: #999; font-size: 18px;}
.top-video-thumb { position: relative; width: 50%; padding-left: 50px; cursor: pointer;}
.top-video-thumb img { width: 100%; height: 380px; object-fit: cover;}

.top-video.aos-animate::before { width: 75%;}

.video-list ul { display: flex; flex-wrap: wrap; margin: 0 -50px;}
.video-item { width: 50%; padding: 120px 50px 0;}
.video-thumb { position: relative; padding-top: 56.25%; box-shadow: 3px 3px 10px rgba(0,0,0,0.1); cursor: pointer;}
.video-thumb img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; }
.video-thumb::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #000; opacity: 0.2;}
.video-item .video-thumb > a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;}
.video-txt { padding-top: 30px;}
.video-txt .tit { margin-bottom: 15px; font-size: 30px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.video-txt .subtit { color: #999; font-size: 18px;}

.top-video-thumb:hover .thumb-btn::before,
.top-video-thumb:hover .thumb-btn::after { transform: translate(-50%,-50%) rotate(180deg);}
.video-thumb:hover::after { opacity: 0;}
.video-thumb:hover .thumb-btn::before,
.video-thumb:hover .thumb-btn::after { transform: translate(-50%,-50%) rotate(180deg);}


/* community > certificate */
.sub-certificate-cont { padding: 140px 0 200px;}
.sub-certificate-cont02 { padding: 170px 0;}
.sub-certificate-tit h3 { font-size: 45px; }
.certificate-list { display: flex; flex-wrap: wrap; margin: 0 -15px; padding-top: 50px;}
.certificate-item { width: 25%; padding: 0 15px;}
.certificate-item:nth-child(n+5) { padding-top: 80px;}
.certificate-item .certificateAnchor { display: block;}
.certificate-img { position: relative; display: flex; justify-content: center; align-items: center; padding: 50px 80px; background-color: #f4f4f4;}
.certificate-img::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 75px; height: 75px; background: #68b82d url(/images/contents/ico-view.png) 50% no-repeat; border-radius: 50%; visibility: hidden; opacity: 0; transition: all .3s;}
.certificate-txt { padding-top: 20px; text-align: center;}
.certificate-txt .certificate-num { color: #999; font-size: 16px; font-weight: 500;}
.certificate-txt .certificate-info { padding-top: 15px; color: #333; font-size: 20px; font-weight: bold; line-height: 1.5;}

.certificateAnchor:hover .certificate-img::after { visibility: visible; opacity: 1;}

/*** 반응형 ***/
@media only screen and (max-width: 1600px) { /*  1600px 이하 */
    .main-product .swiper-slide img {width: 50%;}
	.main-product .main-product-name .swiper-container {margin-left: 50%;}

    .history-cover { width: 45%; height: 80vh;}
}

@media only screen and (max-width: 1200px) { /*  1200px 이하 */
    /*** main ***/
    .main-visual-txt { padding: 160px 110px;}
    .main-visual .swiper-control { padding: 0 110px;}

    .main-product .main-sec-tit { font-size: 34px; }
	.main-product .main-product-name .swiper-slide .current {font-size: 30px;}
	.main-product-cover::before { width: 60%; height: 40vw; }
	.main-product .swiper-slide img {width: 70%; margin-top:-50px;}

    .main-video-bx .main-sec-tit-bx { padding-right: 50px;}
    .main-inquiry-bx .main-sec-tit-bx { padding: 0;}

    /*** sub ***/
    .greeting-cont01-cover { width: 50%;}

    /* about > history */
    .history-cover { height: 60vh;}
    .history-cover h4 { font-size: 45px;}
    .history-cover p { font-size: 20px;}

    /* product > culture_product_list, other_product_list 공통 */
    .product-item-txt .tit { font-size: 24px;}
    .product-item-txt .info { padding-top: 5px; font-size: 16px;}
    
    /* product > culture_product, other_product 공통 */
    .product-cover { width: calc(50% - 20px); padding: 0 20px;}
    .product-detail { width: calc(50% - 20px);}
    .product-bottom-item p { font-size: 28px;}

    /* product > use_product */
    .use-cont-tit-bx .tit { font-size: 40px;}
    .use-cont-tit-bx .subtit { font-size: 20px;}
    .sub-use-cont01 .use-cont-tit-bx .tit { padding-bottom: 10px;}
    .use-cont01-item-txt-bx { padding-left: 20px;}
    .use-cont01-item-txt-bx .tit { padding-left: 30px; font-size: 20px;}
    .use-cont01-item-txt-bx .tit::before { width: 22px; height: 22px; line-height: 22px; font-size: 14px;}
    .use-cont01-item-txt-bx .info { padding-left: 30px; font-size: 16px;}
    .use-cont01-item-txt-bx .info02 { padding-left: 30px; font-size: 14px;}
    .use-cont01-table th { font-size: 16px;}
    .use-cont01-table td { font-size: 14px;}

    .sub-use-cont02 .use-cont-tit-bx .tit { padding-top: 10px;}
    .use-cont02-item { padding: 30px 100px;}
    .use-cont02-item > div { font-size: 22px;}
    .use-cont03-info02 dl { font-size: 15px;}
    .use-cont03-info02 .ratio dt { width: 85px;}
    .use-cont03-info02 .ratio dd { width: calc(100% - 85px);}
    .use-cont03-info02 .important::before { width: 35px; height: 35px; background-size: 80%;}
    .use-cont03-info02 .important p { padding-left: 40px;}
    .use-cont03-info02 .important p + p { padding-top: 5px;}
    .use-cont03-item > div {  padding: 35px 30px;}

    .sub-use-cont04 .use-cont-tit-bx .tit { padding-top: 10px;}

    /* community > video */ 
    .top-video::after { display: none;}
}

@media only screen and (max-width: 1024px) { /*  1024px 이하 */
    /* popup 팝업창 */
    .pop-main-images { width: 90%; margin: 0 auto;}
    .pop-main-bx .img_box { border-radius: 10px;}
    .pop-main-bx .img_box a { height: auto;}
    .main-popup .swiper-pagination { bottom: -25px;}
    .main-popup .swiper-pagination-bullet { width: 8px; height: 8px; margin: 0 5px; border-width: 1px;}


    /* quick-menu 퀵메뉴 */
    .quick-menu-btn { width: 50px; height: 50px; background-size: 65%;}
    .quick-menu li:nth-child(1) .quick-menu-btn { background-size: 48%;}
    .quick-menu li:nth-child(3) .quick-menu-btn { background-size: 45%;}
    .quick-menu li:nth-child(4) .quick-menu-btn { background-size: 30%;}

    /* header 검색 */
    .header .search-anchor { top: 19px; right: 16%; }
    .header .search-anchor i { background: url(/images/common/ico_search_w_m.png) 50% / 65% no-repeat;}
    .top-sch-bx { height: 250px;}
    .top-sch-bx > div { width: 80%;}
    .top-sch-bx input[type=text] { height: 45px; font-size: 16px;}
    .top-sch-bx .btnSch { width: 46px; height: 45px; background: url(/images/common/ico_search_m.png) 50% / 55% no-repeat;}
    .top-sch-bx .btn-close { width: 40px; height: 40px; background-size: 55%;}
    
	.header-lang{top: 19px; right: 28%;}
	
    /*** main ***/
    .main-sec-tit { font-size: 36px; }
    .main-sec-subtit { font-size: 18px;}
    .main-sec-subtxt { font-size: 14px;}
    .main-sec-subtit + .main-sec-tit { padding: 20px 0;}

    .main-visual-txt { padding: 140px 50px;}
    .main-visual-txt h2 { padding-bottom: 10px; font-size: 42px;}
    .main-visual-txt .subtit { font-size: 18px;}
    .main-visual .swiper-control { padding: 0 50px;}

    .main-product-deco.top { top: -45px; font-size: 140px;}
    .main-product-deco.bottom { bottom: -45px; font-size: 150px;}

    .main-video-bx .main-sec-tit-bx { width: 45%;}
    .main-video-list.swiper-container { width: 55%; margin-left: 15px;}
    .main-video-item.swiper-slide { padding: 0 20px;}
    .main-video-txt { padding-top: 10px;}
    .main-video-txt .tit { padding-bottom: 0; font-size: 22px;}
    .main-video-txt .subtit { font-size: 15px;}

    /* video 버튼 */
    .thumb-btn { width: 50px; height: 50px; right: 15px;}
    .thumb-btn::before { height: 15px;}
    .thumb-btn::after { width: 15px;}

    .main-inquiry-bx .main-sec-tit-bx { width: 40%;}
    .main-inquiry-cont { width: 55%; padding: 0;}    
    .main-inquiry-write-form { padding: 30px 25px;}
    .main-inquiry-write-form h3 { font-size: 32px;}
    .main-inquiry-write-form ul { margin: 10px -10px 0;}
    .main-inquiry .inquiry-write-item { padding: 10px 10px 0;}
    .main-inquiry .inquiry-write-item .inquiry-tit { width: 80px; font-size: 14px;}
    .main-inquiry .inquiry-write-item input { width: calc(100% - 80px); padding: 0 0 3px; font-size: 14px;}
    .inquiry-btn { width: 150px; height: 45px; margin-top: 10px; font-size: 15px;}
	
	  

    /*** sub ***/
    .sub-top { margin-top: 70px; }
    .snb-bg { height: 75vw;}
    .sub-top-tit p { font-size: 14px;}
    .sub-top-tit h2 { font-size: 32px;}

    .sub-nav { height: 70px;}
    .sub-page-navigation { width: auto;}
    .sub-page-navigation::before { top: 20px; bottom: 20px;}
    .sub-page-navigation > a { padding: 0 35px 0 25px; background-position: 100% 50%; line-height: 70px; font-size: 16px;}
    .sub-page-navigation ul { top: 71px; }
    .sub-page-navigation li a { padding: 0 25px; line-height: 50px; font-size: 14px;}
    .sub-nav-list li a { padding: 0 15px; font-size: 16px;}

    /** about **/
    /* about > about */
    .about-sec-tit { font-size: 30px;}
    .about-sec-tit02 { font-size: 24px;}
    .about-sec-subtit { font-size: 16px;}
    .about-sec-txt { padding-top: 14px; font-size: 16px;}

    .sub-about-cont01 { padding: 120px 0 70px;}
    .sub-about-cont02 { padding: 70px 0 80px;}

    .sub-about-cont03 { margin-bottom: 0px;}
    .sub-about-cont03.whole .about-cont-txtWrap { height: 70vw;}
    .sub-about-cont03 .about-sec-tit { font-size: 36px;}

    .sub-about-cont04 { padding-top: 70px;}

    .sub-about-cont05 { padding: 70px 0;}
    .about-cont05-item { padding: 0 10px;}
    .about-cont05-txt { padding-top: 15px;}
    .about-cont05-item .ir { width: 50px; height: 50px;}
    .about-cont05-subtit { font-size: 16px;}
    .about-cont05-tit { font-size: 24px;}

    .sub-about-cont06 { padding: 60px 0 80px;}

    .sub-about-cont07 { padding-bottom: 100px;}
    .about-cont07-item { padding: 0 30px;}

    /* about > greetings */
    .sub-greetings { padding-top: 70px;}
    .about-sec-subtit { font-size: 18px;}
    .greeting-sec-tit h3 { font-size: 32px;}
    .sub-greeting-cont01 { padding: 70px 0 100px;}
    .sub-greeting-cont01::before { left: 0; height: 600px;}
    .sub-greeting-cont01 .about-sec-tit02 { padding-top: 10px; }
    .sub-greeting-cont01 .about-sec-txt { padding-top: 25px;}
    .sub-greeting-cont01 .about-sec-txt b { font-size: 24px;}

    .sub-greeting-cont02 { margin: 0 auto;}
    .greeting-cont02-txtWrap { height: 70vw;}
    .greeting-cont02-txt { font-size: 32px;}

    /* about > history */
    .history-cover { height: 50vh;}
    .history-list { padding-top: 50px;}
    .history-item .history-year { font-size: 36px;}
    .history-item ol li { padding-left: 40px;}
    .history-item-txt { font-size: 15px;}

    /** product **/
    /* product > GCM */
    .sub-gcm-cont01 { padding: 60px 0 70px; }
    .gcm-cont01-info { margin-top: 35px;}
    .gcm-cont01-tit-bx .tit { padding-bottom: 10px; font-size: 42px;}
    .gcm-cont01-tit-bx .subtit { font-size: 20px;}
    .gcm-cont01-tit-bx .info { padding-top: 10px; font-size: 20px;}
    
    .sub-gcm-cont03 { padding: 60px 0 90px;}
    .gcm-cont03-tit-bx .tit { font-size: 36px;}
    .gcm-cont03-tit-bx .subtit { font-size: 16px}
    .gcm-cont03-tit-bx .info { font-size: 36px;}
    .gcm-cont03-tit-bx .info { padding-top: 10px; font-size: 16px;}
    .gcm-cont03-info { padding-top: 40px;}
    .gcm-cont03-item:nth-child(1) { width: calc(50% - 10px); padding: 0;}
    .gcm-cont03-item:nth-child(2) { width: calc(50% - 10px); padding: 0;}

    .sub-gcm-cont04 { padding: 60px 0 80px;}
    .gcm-cont04-tit-bx .tit { font-size: 26px;}
    .gcm-cont04-list { padding-top: 50px;}

    /* product > culture_product_list, other_product_list 공통 */
    .sub-product-list { padding-top: 50px;}
    .sub-product-list ul { margin: 0 -10px;}
    .product-item { padding: 0 10px 30px;}
    .product-thumb { height: 300px;}

    /* product > culture_product, other_product 공통 */
    .product-cover  { padding: 0;}
    .product-tit { padding-top: 10px;}
    .product-name { font-size: 32px;}
    .product-txt { padding-top: 10px; font-size: 16px;}
    .product-info { padding-top: 20px;}
    .product-info dl { font-size: 16px;}
    .product-info dd  { margin-left: 70px;}
    .product-btn-wrap a { height: 45px; line-height: 45px; font-size: 14px;}
    .product-btn-wrap a::after { margin-left: 10px; background-size: 80%;}
    .product-list-btn { width: 140px; height: 50px; line-height: 48px; font-size: 14px;}
    .sub-product-bottom { margin-top: 100px; padding: 40px 0; }
    .product-bottom-item:first-child > div { padding-right: 20px;}
    .product-bottom-item:last-child > div { padding-left: 20px;}
    .product-bottom-item a { width: 100%;}
    .product-bottom-item:first-child a { padding-left: 100px;}
    .product-bottom-item:last-child a { padding-left: 120px;}
    .product-bottom-item a::before { background-size: contain;}
    .product-bottom-item:first-child a::before {width: 74px; height: 85px; }
    .product-bottom-item:last-child a::before { width: 95px; height: 66px;}
    .product-bottom-item a::after { right: 0px;}
    .product-bottom-item:last-child a::after { right: 0px;}
    .product-bottom-item p { padding-top: 10px; font-size: 20px;}

    /* product > use_product */ 
    .sub-useProduct { padding-top: 60px;}
    .use-cont-tit-bx .tit { font-size: 30px;}
    .use-cont-tit-bx .subtit { font-size: 16px;}
    .sub-use-cont01::before { height: 88%;}
    .sub-use-cont01 .use-cont-tit-bx .tit { padding-bottom: 5px;}
    .use-cont01-img-list { padding-top: 20px;}
    .use-cont01-img-list ul { width: 80%;}
    .use-cont01-img-item { width: calc(100% / 3); }
    .use-cont01-img-item > div { height: 150px;}
    .use-cont01-img-item > div img { width: 100%; height: 100%; object-fit: contain;}
    .use-cont01-img-item p { font-size: 18px;}
    .use-cont01-list { padding: 40px 0;}
    .use-cont01-list ul { display: block; margin: 0;}
    .use-cont01-item { width: 100%; padding: 10px 0;}
    .use-cont01-item:nth-child(n+3) { padding-top: 10px;}

    .sub-use-cont02 { padding: 60px 0;}
    .use-cont02-list { padding-top: 25px;}
    .use-cont02-item { padding: 15px 50px;}
    .use-cont02-item > div { padding-left: 40px; font-size: 18px;}
    .use-cont02-item > div::before { top: 3px; width: 25px; height: 25px; line-height: 25px;}
    
    .sub-use-cont03 { padding: 60px 0; }
    .use-cont03-list ul { display: block; margin: 0;}
    .use-cont03-item { width: 100%; padding: 20px 0;}
    .use-cont03-item:nth-child(n+3) { padding-top: 20px;}
    .use-cont03-item > div { padding: 30px 25px;}
    .use-cont03-tit-bx h4 { font-size: 28px;}
    .use-cont03-item .txt { font-size: 14px;}
    .use-cont03-top-info { padding-top: 10px;}
    .use-cont03-info01 { margin-top: 10px;}
    .use-cont03-item h5 { margin-bottom: 10px; font-size: 16px;}
    .use-cont03-info02 > div { margin-top: 15px;}
    .use-cont03-info02 dl { font-size: 14px;}
    .use-cont03-info02 dt { width: 70px;}
    .use-cont03-info02 dd { width: calc(100% - 70px);}
	.use-cont03-info02 .ratio dl{flex-direction: row;}
    .use-cont03-info02 .ratio dt { width: 50%; border-width: 1px;}

    .use-cont03-item:nth-child(1) > div::after { left: auto; right: -7%; background-size: 60%;}
    .use-cont03-item:nth-child(2) > div::after { top: 45%; right: 10%; background-size: 60%;}
    .use-cont03-item:nth-child(3) > div::after { top: -15%; background-size: 50%;}
    .use-cont03-item:nth-child(4) > div::after { top: 15%; background-size: 60%;}

    .sub-use-cont04 { padding: 60px 0;}
    .sub-use-cont04 .use-cont-tit-bx .tit { padding-top: 5px;}
    .use-cont04-list { padding-top: 25px;}
    .use-cont04-item { padding: 15px 50px;}
    .use-cont04-item > div { padding-left: 50px; font-size: 18px;}
    .use-cont04-item > div::before { top: 0px;}

    /** inquiry **/
    /* inquiry > FAQ */
    .folderList { margin: 50px 0;}
	.folderList .q{left:2em;top:1.9em;}
	.folderList.faq .faq_q, .folderList.faq .open .faq_q{background-position:right 50px top 44px;}
	.folderList.faq .faq_q{padding:2em 100px;font-size:20px;}
	.folderList.faq .faq_a{padding:2em 100px;font-size:15px;}

    /* inquiry > inquiry */
    .sub-inquiry-tit { padding-top: 50px;}
    .sub-inquiry-tit h3 { font-size: 32px;}
    .sub-inquiry-write-cont { margin: 40px auto 100px;}
    .inquiry-item-tit { font-size: 18px;}
    .sub-inquiry-write-item + .sub-inquiry-write-item { padding-top: 10px;}
    .sub-inquiry-write-item input { height: 40px;}
    .sub-inquiry-write-item input, .sub-inquiry-write-item textarea { font-size: 14px;}
    .sub-inquiry-write-item textarea { min-height: 200px; padding: 10px;}
    .inquiry-write-btnbox { margin: 20px auto 0;}

    /* inquiry > inquiry_view */
    .sub-inquiry-view-cont { padding: 45px 0 100px;}
    .sub-inquiry-view-cont .board-btn-wrap a { width: 50%; height: 45px; line-height: 45px; font-size: 15px;}
    
    
    /** community **/
    /* community > notice */
    .sub-notice-cont { padding: 50px 0 100px;}
    .notice-item-anchor > div { height: auto; padding: 20px 0; align-items: flex-start;}
    .notice-item .field { width: 18%; margin-top: 5px; padding: 0 5px; font-size: 14px;}
    .notice-item .txt { width: 60%; max-width: 260px;}
    .notice-item .tit-bx { height: 50px; margin-bottom: 20px;}
    .notice-item .tit-bx .tit { font-size: 18px;}
    .notice-item .tit-bx .info { font-size: 14px;}
    .notice-item .date { font-size: 12px;}
    .notice-item .cover { width: 22%; margin: 0; margin-right: 10px;}
    .notice-item .cover img { height: 70px;}
    
    .sub-notice-view-cont .boardView th { padding: 20px 0px;}
    .sub-notice-view-cont .boardViewTit { display: block;}
    .sub-notice-view-cont .boardViewTit h3 { padding-bottom: 5px; font-size: 18px; }
    .sub-notice-view-cont .viewDetail { padding: 20px 0; font-size: 14px;}
    .notice-view-anchor > div { padding: 20px;}
    .notice-view-item p { padding-left: 30px; font-size: 14px;}
    .notice-view-item .date { font-size: 12px;}

    /* community > certificate */
    .sub-certificate-cont { padding: 60px 0 100px;}
    .sub-certificate-tit h3 { font-size: 36px;}
    .certificate-list { margin: 0; padding-top: 0;}
    .certificate-item { width: 50%; padding: 30px 10px 0;}
    .certificate-item:nth-child(n+5) { padding-top: 20px;}
    .certificate-img { padding: 30px 50px;}

    .sub-certificate-cont02 { padding: 60px 0;}

    /* community > video */ 
    .top-video-bx { display: block; height: auto; padding: 50px 20px;}
    .top-video-txtWrap { width: 100%;}
    .top-video.aos-animate::before { width: 100%;}
    .top-video-subtit { font-size: 16px;}
    .top-video-tit { padding-top: 10px; font-size: 24px;}
    .top-video-txt { padding-top: 15px; font-size: 15px;}
    .top-video-thumb { width: 100%; margin-top: 20px; padding: 0; padding-top: 56.25%;}
    .top-video-thumb img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%;}
    .top-video-thumb .thumb-btn { bottom: 25px;}

    .video-item { padding-top: 30px;}
    .video-thumb::after { display: none;}
    .video-txt { padding-top: 20px;}
    .video-txt .tit { font-size: 24px;}
    .video-txt .subtit { font-size: 16px;}
}

@media only screen and (max-width: 800px) { /*  800px 이하 */
    /* 메인제품 */
    .main-product .main-sec-tit { font-size: 30px; }
	.main-product .main-sec-tit br { display: inline;}
	.main-product-bx{position:relative;padding:20px;text-align:center;justify-content: center;}
	.main-product-bx .main-sec-tit-bx{transform: translateY(-210%);}
	.main-product-bx .main-sec-tit{text-align:center;}
	.main-product .main-product-name {left:50%;right: auto;bottom: 30px;width: 100%;height: 200px;transform: translateX(-50%);}
	.main-product .main-product-name .swiper-wrapper {width: 100%;height: 100%;position: relative;}
	.main-product .main-product-name .swiper-slide .current {font-size: 26px;text-align: center;margin-bottom: 0px;cursor: grab;}
	.main-product .main-product-name .swiper-container {width:100%;height: 100%;margin-left: 0;}
	.prod-control,
	.main-product .main-product-deco.top{display:none;}
	.main-product .main-product-deco.bottom{bottom:auto;top:0;font-size:32vw;}
	.main-product-cover::before { width: 65%; height: 42vw; margin-top:-20px; }
}

@media only screen and (min-width: 768px) { /*  768px 이상 */
    .pc-block { display: block;}
    .m-block { display: none;}
}

@media only screen and (max-width: 768px) { /*  768px 이하 */
    .pc-block { display: none;}
    .m-block { display: block;}

    .cir-ani01::before { top: -65px; right: -65px; width: 130px; height: 130px;}
    .cir-ani02::before { top: -65px; left: -65px; width: 130px; height: 130px;}

    /* quick-menu 퀵메뉴 */
    .qmenu { width: 45px;}
	.qmenu a { height: 45px; background-size: 100%;}
	.qmenu .btn { width: 45px; height: 45px; background-size: 100%;}

    /*** main ***/
    .main-sec { height: auto;}
    .main-sec-tit { font-size: 30px; text-align: center;}
    .main-sec-tit br { display: none;}
    .main-sec-subtit + .main-sec-tit { padding: 20px 0;}
    .main-visual-txt { padding: 150px 20px;}
    .main-visual-txt h2 { padding-bottom: 10px; }
    .main-visual-txt .subtit br { display: inline;}
    .main-visual .swiper-control { bottom: 110px; padding: 0 20px;}
    
    .main-video { height: auto !important;}
    .main-video-bx { display: block;}
    .main-video-list.swiper-container { width: 100%; margin: 20px 0 0;}
    .main-video-list .swiper-wrapper { display: block;}
    .main-video-item.swiper-slide { width: 100%; height: auto; padding: 0 20px 50px; transform: translateY(10%);}
    .main-video-item:nth-child(n+4) { display: none;}
    .main-video-item.aos-animate { transition: translateY(0);}
    .main-video-cover::before { top: -15px; bottom: 15px; left: 40%;}
    .main-video-cover::after { display: none;}
    .main-video-bx .main-sec-tit-bx { width: 100%; height: 90vw; padding: 60px 0; justify-content: flex-start; align-items: center; text-align: center;}
    .main-video .main-video-btn { position: relative; display: block; width: 140px; height: 50px; line-height: 48px; margin: 0 auto 60px; color: #989898; font-size: 14px; text-align: center; border: 1px solid #949494; border-radius: 99px; overflow: hidden; transition: color .6s, border-color .5s;}
    .main-video .main-video-btn::before {  content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 0; background-color: #68b82d; transition: all .4s; z-index: -1;}
    .main-video .main-video-btn:hover { color: #fff; border-color: transparent;}
    .main-video .main-video-btn:hover:before { width: 100%; }
    .main-sec-subtxt { display: none;}

    .main-inquiry { height: auto !important; padding: 100px 0;}
    .main-inquiry-bx { display: block;}
    .main-inquiry-bx .main-sec-tit-bx { width: 100%;}
    .main-inquiry-bx .main-sec-tit-bx { align-items: center;}
    .main-inquiry-cont { width: 100%; }
    .main-inquiry-write-form h3 { font-size: 24px;}
    .main-inquiry .inquiry-write-item:last-child { margin-top: 20px;}
    /* .main-inquiry .inquiry-write-item .inquiry-tit { width: auto;} */
    .main-inquiry .inquiry-write-item input { width: 100%; padding-left: 5px;}
    .main-inquiry .inquiry-write-item:first-child input { width: calc(100% - 70px);}
    .main-inquiry .inquiry-write-item textarea { height: 100px;}
    .inquiry-btn { margin: 20px auto 0;}

    .main-visual .swiper-control .swiper-pagination .current_num, 
    .main-visual .swiper-control .swiper-pagination .swiper-pagination-current { font-size: 16px;}
    .main-visual .swiper-control .swiper-pagination .ptotal { font-size: 16px;}
    .main-visual .swiper-pause { margin-top: 2px;}
    .main-visual .swiper-button-prev, 
    .main-visual .swiper-button-next { top: 0; width: 25px; height: 25px; margin-top: 3px;}

    /*** sub ***/
    .bg-greetings { background-image: url(/images/contents/snb-bg-greeting-m.jpg);} 
    .bg-history { background-image: url(/images/contents/snb-bg-history-m.jpg);} 
    .bg-location { background-image: url(/images/contents/snb-bg-location-m.jpg);} 
    .bg-faq, .bg-inquiry { background-image: url(/images/contents/snb-bg-inquiry-m.jpg);}
    .bg-notice, .bg-video, .bg-certificates { background-image: url(/images/contents/snb-bg-notice-m.jpg);}

    .sub-top-tit h2 { font-size: 28px;}

    .sub-page-navigation { display: none;}
    .sub-nav-list { width: 100%;}
    .sub-nav-list li { width: 100%; text-align: center;}
    .sub-nav-list li a { position: relative; padding: 0; /*line-height: 70px;*/ font-size: 13px; margin: 0 0px;}
    .sub-nav-list li.active a::after { content: ''; position: absolute; bottom: 0; left: 0; top:52px; right: 0; height: 4px; background-color: #68b82d;  }
    
    /** about **/
    /* about > about */
    .sub-about .half .inner02 { display: block;}
    .sub-about .half .about-cont-txtWrap { width: 100%;}
    
    .about-cont-cover { width: 100%; margin-top: 90px;}
    .about-sec-txt br { display: none }
    
    .sub-about-cont01 { padding: 50px 0;}
    .sub-about-cont01 .about-cont-cover { margin: 0; margin-top: 100px; padding: 0;}
    .sub-about-cont01::before { display: none;}
    .sub-about-cont01 .about-cont-cover::after { content: ''; position: absolute; top: -50px; right: -20px; bottom: -50px; width: 0; background-color: #f6f8f1; z-index: -1; transition: all 1.2s ease-in-out;}
    .sub-about-cont01.aos-animate .about-cont-cover::after { width: 80%;}

    .about-sec-tit02 > div { display: block;}
    .about-sec-tit02 br { display: none;}
    .sub-about-cont02.half .inner02 { display: flex; flex-direction:column-reverse}
    .sub-about-cont02 .about-cont-txtWrap { padding: 0;}

    .sub-about-cont03 { width: 100%;}
    .sub-about-cont03.whole .about-cont-txtWrap { padding: 0 15px;}
    .sub-about-cont03 .about-sec-tit { font-size: 24px;}

    .sub-about-cont04.half .inner02 { display: flex; flex-direction:column-reverse}
    .sub-about-cont04 .about-cont-cover { margin-top: 40px;}

    .about-cont05-list ul { flex-wrap: wrap;}
    .about-cont05-item { width: 50%;}
    .about-cont05-item:nth-child(n+3) { padding-top: 20px;}
    .about-cont05-item > div { border-width: 6px;}
    .about-cont05-subtit { font-size: 14px;}
    .about-cont05-tit { font-size: 20px;}

    .sub-about-cont07 { padding: 75vw 0 50px;}
    .sub-about-cont07::before { height: 75vw; background-image: url(/images/contents/about-cont07-bg-m.jpg)}
    .about-cont07-wrap { padding-top: 50px; background-color: transparent;}
    .sub-about-cont07 .about-sec-tit { font-size: 40px;}
    .about-cont07-bx { display: block; margin: 0; padding-top: 30px;}
    .about-cont07-item { width: 100%; padding: 20px 0; text-align: center;}
    .about-cont07-item:first-child { border: 0; border-bottom: 1px solid #c6c6c6;}
    .about-cont07-item .subtit { font-size: 20px;}
    .about-cont07-item .txt { font-size: 16px;}

    /* about > greetings */
    .sub-greeting-cont01::before { display: none;}
    .sub-greeting-cont01 .inner02 { display: block;}
    .greeting-sec-tit h3 { font-size: 24px;}
    .greeting-sec-tit h3 > div { display: block; }
    .greeting-cont01-cover { width: 100%; padding-bottom: 75px;}
    .greeting-cont01-cover::after { content: ''; position: absolute; bottom: 0; left: -20px; width: 0; height: 450px; background-color: #f6f8f1; z-index: -1; transition: all 1s .4s;}
    .aos-animate .greeting-cont01-cover::after { width: 70%; }
	.greeting-cont01-txtWrap { width: 100%; padding-top: 60px;}
    .sub-greeting-cont01 .about-sec-txt.ceo { text-align: right; }

    .sub-greeting-cont02 { width: 100%; padding: 70px 15px;}
    .greeting-cont02-txtWrap { align-items: flex-start; height: 55vh;}
    .greeting-cont02-txt { font-size: 24px;}
    .greeting-cont02-txt br { display: none;}
    .greeting-cont02-txt > span { display: block;}


    /* about > history */
    .history-cover { display: none;}
    .history-list { width: 100%; padding-top: 20px;}
    .history-item .history-year { font-size: 35px;}
    .history-item ol li + li { margin-top: 20px;}
    .history-item ol li::after { bottom: -35px;}
    .history-item .history-month { font-size: 18px;}
    .history-item + .history-item { padding-top: 40px;}
    .history-item-txt { font-size: 15px;}
    .history-item-txt br { display: none;}

    .history-item.on .history-year { color: #68b82d;}

    /* about > location */
    .sub-location-cont01 { padding-top: 50px;}
    .sub-location-cont02 { padding: 50px 0;}
    .map-bx .root_daum_roughmap { height: 300px;}
    .location-top { padding-bottom: 10px;}
    .location-top a { display: none;}
    .location-bx { padding-top: 20px;}
    .location-tit h3 { font-size: 22px;}
    .location-tit p { font-size: 16px;}
    .location-info { padding-top: 10px;}
    .location-info dl { align-items: flex-start;}
    .location-info dt { width: 100px; font-size: 15px;}
    .location-info dt::before { margin-right: 10px;}
    .location-info dd { width: calc(100% - 100px); padding-top: 5px; font-size: 14px;}

    /** product **/
    /* product > GCM */
    .gcm-cont01-info { display: block;}
    .gcm-cont01-tit-bx .tit { font-size: 36px;}
    .gcm-cont01-tit-bx .subtit { font-size: 18px;}
    .gcm-cont01-tit-bx .info { font-size: 18px;}
    .gcm-cont01-tit-bx .info br { display: none; }
    .gcm-cont01-item { width: 100%; padding: 20px 0;}
    .gcm-cont01-item-cover { height: auto; padding: 20px;}
    .gcm-cont01-item-cover img { height: auto;}
    .gcm-cont01-item-cover p { padding-top: 10px; font-size: 14px;}
    .gcm-cont01-item > p { font-size: 15px;}

    .sub-gcm-cont02 { padding: 35px 0 40px;}
    .sub-gcm-cont02 h4 { font-size: 20px;}
    .gcm-cont02-list { padding-top: 25px;}
    .gcm-cont02-list > ul { display: block; margin: 0;}
    .gcm-cont02-item { width: 100%; padding: 10px 0;}
    .gcm-cont02-item:nth-child(n+3) { padding: 10px 0;}
    .gcm-cont02-tit-bx { padding: 15px 0 10px;}
    .gcm-cont02-tit-bx .num { font-size: 14px;}
    .gcm-cont02-tit-bx .txt { font-size: 18px;}
    .gcm-cont02-item .compare { width: 80%; margin: 0 auto; padding: 15px 0;}
    .gcm-cont02-item .compare-item p { padding-top: 10px; font-size: 16px;}

    .gcm-cont03-tit-bx .tit { font-size: 26px;}
    .gcm-cont03-info { flex-direction: column-reverse;}
    .gcm-cont03-item:nth-child(1) { width: 100%; padding-top: 30px; text-align: center;}
    .gcm-cont03-item:nth-child(2) { width: 100%;}
    .gcm-cont03-item h4 { font-size: 24px;}
    .gcm-cont03-item p { padding-top: 10px; font-size: 16px;}

    .gcm-cont04-item { width: 50%;}
    .gcm-cont04-item:last-child { display: none;}
    .gcm-cont04-item:nth-child(n+3) { padding-top: 30px;}
    .gcm-cont04-txt { padding-top: 10px; font-size: 15px;}

    /* product > culture_product_list, other_product_list 공통 */
    .sub-product-list ul { margin: 0;}
    .product-item { width: 100%;}
    .product-thumb { height: 250px; padding: 0 10px;}
    .product-thumb::before { height: 70%;}
    .product-item-txt .tit { font-size: 18px;}
    .product-item-txt .info { font-size: 14px;}

    /* product > culture_product, other_product 공통 */
    .sub-product-cont-bx { display: block;}
    .product-cover { width: 100%; padding: 0 10px !important;}
    .product-detail { width: 100%; padding-top: 20px;}
    .product-name { font-size: 20px;}
    .product-txt { font-size: 14px;}
    .product-info dl { padding: 10px; font-size: 14px}
    .product-info dt { top: 11px; left: 10px;}
    .product-info dd { margin-left: 55spx;}
    .product-btn-wrap { padding-top: 10px;}
    .product-btn-wrap a { width: calc(50% - 5px);}
    .sub-product-bottom { padding: 0;}
    .sub-product-bottom ul { display: block;}
    .product-bottom-item { width: 100%;}
    .product-bottom-item:first-child { border: 0; border-bottom: 1px solid #c7c7c7;}
    .product-bottom-item:first-child > div { padding: 50px 20px;}
    .product-bottom-item:last-child > div { padding: 50px 20px;}
    .product-bottom-item:first-child a { padding-left: 120px;}
    .product-bottom-item a::before { background-size: 75%; }
    .product-bottom-item:first-child a::before { width: 95px; }

    /* product > use_product */ 
    .use-cont-tit-bx .tit { font-size: 24px;}
    .use-cont01-img-list ul { width: 100%;}
    .use-cont01-img-item > div { height: 180px;}
    .use-cont01-img-item p { padding-top: 10px; font-size: 15px;}
    .use-cont01-list { padding: 20px 0;}
    .use-cont01-item-cover { width: 40%; border-width: 2px;}
    .use-cont01-item-txt-bx { width: 60%; padding-left: 10px;}
    .use-cont01-item-txt-bx br { display: none;}
    .use-cont01-item-txt-bx .tit { font-size: 16px;}
    .use-cont01-item-txt-bx .info { padding-top: 5px; font-size: 14px;}
    .use-cont01-item-txt-bx .info02 { font-size: 12px;}
    .use-cont01-item-txt-bx .tit::before { top: 0;}
    .use-cont01-table th { font-size: 15px;}
    .use-cont01-table td { padding: 5px 10px; font-size: 13px;}

    .use-cont02-item  { padding: 10px 20px;}
    .use-cont02-item > div { font-size: 15px;}

    .sub-use-cont03 { position: relative; padding: 40px 0; background: #f7f7f7 url(/images/contents/use-cont03-bg-m01.png) 0px -30px / 88% no-repeat}
    .sub-use-cont03::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1000px; background: url(/images/contents/use-cont03-bg-m02.png) 0% calc(100% + 20px) / 70% no-repeat;}
    .use-cont03-tit-bx { border-width: 1px;}
    .use-cont03-list { position: relative; z-index: 1;}
    .use-cont03-item > div { padding: 40px 25px 60px;}
    .use-cont03-item:nth-child(4) > div { padding-bottom: 40px;}
    .use-cont03-item:nth-child(1) > div::before { content: ''; position: absolute; bottom: -20px; left: -20px; width: 70px; height: 75px; background: url(/images/contents/use-cont03-item-01-m.png) 50% / contain no-repeat;}
    .use-cont03-item:nth-child(1) > div::after { bottom: 35%; right: -14%; background-size: 50%;}
    .use-cont03-item:nth-child(2) > div::before { content: ''; position: absolute; bottom: -20px; left: -20px; width: 54px; height: 63px; background: url(/images/contents/use-cont03-item-02-m.png) 50% / contain no-repeat;}
    .use-cont03-item:nth-child(2) > div::after { right: 5%; background-size: 50%;}
    .use-cont03-item:nth-child(3) > div::before { content: ''; position: absolute; bottom: 50%; right: -10px; width: 52px; height: 70px; background: url(/images/contents/use-cont03-item-03-m.png) 50% / contain no-repeat;}
    .use-cont03-item:nth-child(4) > div::before { content: ''; position: absolute; bottom: 30%; left: -20px; width: 40px; height: 55px; background: url(/images/contents/use-cont03-item-04-m.png) 50% / contain no-repeat;}
    .use-cont03-tit-bx h4 { font-size: 24px;}
    .use-cont03-info02 .ratio { display: block;}
    .use-cont03-info02 .ratio dl { width: 100%; padding: 5px 0;}
    .use-cont03-info02 .important { padding: 15px 20px;}
    .use-cont03-info02 .important::before { top: 10px; left: 15px; width: 30px; height: 30px; }
    .use-cont03-info02 .important p { padding-left: 30px;}
    .use-cont03-info02 .important br { display: none;}

    .use-cont04-item  { padding: 10px 20px;}
    .use-cont04-item > div { font-size: 15px;}

    /** inquiry **/
    /* inquiry > FAQ */
    .folderList .q{left:10px;top:1.9em;}
	.folderList.faq .faq_q, .folderList.faq .open .faq_q{background-position:right 10px top 36px;background-size:15px;}
	.folderList.faq .faq_q{padding:2em 50px;font-size:15px;}
	.folderList.faq .faq_a{padding:2em 50px;font-size:13px;}
	.folderList.faq .faq_q::before { width: 2px; height: 16px; right: 17px;}
	.folderList.faq .faq_q::after { width: 16px; height: 2px; right: 10px;}

    /* inquiry > inquiry */
    .sub-inquiry-tit h3 { font-size: 24px;}
    .sub-inquiry-write-cont { margin: 20px auto 100px;}
    .inquiry-item-tit { font-size: 15px;}
    .inquiry-write-btn { height: 45px; line-height: 45px; font-size: 14px;}
    
    /** community > notice */
    .notice-item .field { margin-top: 2px;}
    .notice-item .tit-bx { height: 45px;}
    .notice-item .tit-bx .tit { font-size: 15px;}
    .notice-item .tit-bx .info { font-size: 13px;}

    /* community > certificate */
    .sub-certificate-tit h3 { font-size: 24px;}
    .certificate-txt { padding-top: 10px;}
    .certificate-img { padding: 20px 30px;}
    .certificate-txt .certificate-num { font-size: 14px;}
    .certificate-txt .certificate-info { padding-top: 5px; font-size: 16px;}
    .certificate-txt .certificate-info br { display: none;}

    /* community > video */ 
    .video-list ul { display: block; margin: 0 ;}
    .video-item { width: 100%; padding: 30px 0 0;}
    .video-txt .tit { margin-bottom: 5px; font-size: 20px;}
    .video-txt .subtit { font-size: 14px;}
}

@media only screen and (max-width: 480px) { /*  480px 이하 */
    .main-inquiry .inquiry-write-item { width: 100%;}
    .main-inquiry .inquiry-write-item .inquiry-tit { width: 75px;}
    .main-inquiry .inquiry-write-item input { width: calc(100% - 75px);}

	.aos-animate .greeting-cont01-cover::after { width: 90%; }
    .sub-use-cont03::after { height: 890px; background-size: 85%;}
    
    .notice-item .cover img { height: 50px;}
    .about-cont05-tit {line-height:22px;}
    .use-cont01-item > div {height:auto !important;}
}