@charset "utf-8";

/************************************************ 
Version : 1.0
Date :2021-12
*************************************************/

/* import */
@import "fonts.css";

/* reset */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,
h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,
table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0; padding:0; border:0; box-sizing:border-box;}
article,aside,details,dt,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block;}
audio,canvas,progress,video{display:inline-block; vertical-align:baseline;}

blockquote,q{quotes:none;}
blockquote:after,blockquote:before,q:after,q:before{content:''; content:none;}

hr{display:none;}ol,ul{list-style:none;}
table{border-spacing:0; border-collapse:collapse;}

abbr[title]{border-bottom:1px dotted;}
mark{background:#ff0; color:#000;}
sub,sup{position:relative; vertical-align:baseline; line-height:0;}
sup{top:-.5em;}
sub{bottom:-.25em;}
svg:not(:root){overflow:hidden;}
pre,textarea{overflow:auto;}

/* --- 기본설정 --- */
* {box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0);}
html {font-size:10px; height:100%; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{font-size:1.6rem; height:100%; font-family:'Noto Sans KR'; font-weight:400; color:#222; letter-spacing: -0.4px; }
strong {font-weight:800;}
em, b, i {font-style:normal;}
a {cursor:pointer; background-color:transparent; color:inherit;}
a,label,span {display:inline-block;}
a, a:hover {text-decoration:none;}
a,button,[role=button],[role=tab], main.ios {cursor:pointer;}
mark {margin:0; padding:0; background-color:transparent;}
button, input {outline: none;}

/* --- 공통요소 --- */
.block {display:block;}
.valign {vertical-align: middle!important;}
.clearfix {*zoom:1;}
.clearfix:after,.clearfix:before {display:table; line-height:0; content:'';}
.clearfix:after {clear:both;}
.hidden {position:absolute; overflow:hidden; clip:rect(0,0,0,0); width:1px; height:1px; margin:-1px; padding:0; border:0;}
caption {overflow:hidden; clip:rect(0,0,0,0); width:1px; height:1px; margin:-1px; padding:0; border:0;}

button,html input[type=button],html input[type=reset],html input[type=submit] {cursor:pointer; -webkit-appearance:button; border-radius:0;}
button,input,optgroup,select,textarea {margin:0; font:inherit; color:inherit;}
button,select {text-transform:none;}
button[disabled],html input[disabled] {cursor:default;}
button::-moz-focus-inner,input::-moz-focus-inner {padding:0; border:0;}
input {line-height:normal;}

input[type=checkbox],input[type=radio] {box-sizing:border-box; padding:0; vertical-align:middle;}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {height:auto;}
input[type=search] {-webkit-appearance:textfield;}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration {-webkit-appearance:none;}
optgroup {font-weight:bold;}

label+input {margin-left:.4rem;}
button {margin:0; padding:0; cursor:pointer; border:0; background:0 0;}
input[type=checkout],input[type=radio] {margin-right:.4rem; padding:.5rem .5rem .3rem; border:0;}
input[type=search] {box-sizing:content-box;}
input[type=file],input[type=number],input[type=password],input[type=tel],input[type=text] {vertical-align:middle; width:100%; height:4.3rem; padding:0 1.6rem; border: solid 1px #707070;}
input:focus {border: solid 1px #222222}
select {padding:.4rem 3.2rem .4rem 1.2rem; border: solid 1px #707070; appearance:none; background:#fff url('../images/arrow-down.png') no-repeat 97% 50%; }
select::-ms-expand {display: none;}
textarea { width:100%;  margin:0; padding:1rem; border: solid 1px #707070;}

/* --- 버튼 --- */
button.btn-gray {height:4rem; color:#fff; width:20rem; border-radius:.4rem; background:#fe9686;}
button.btn-org {height:4rem; color:#fff; width:20rem; border-radius:.4rem; background:#7e7e7e;}

/* 검색 */
.srarch-wrap {margin-bottom:2rem; border:2px solid #f59b8b; height:3.2rem; border-radius:2.4rem; overflow: hidden; position: relative;}
.srarch-wrap input {border:0; height:3.2rem; line-height:3rem; padding:0 1rem;}
.srarch-wrap button {position:absolute; right:.2rem; top:0; width:3.2rem; height:3rem; background:url('../images/btn-search.png') no-repeat 50% 50%; background-size: 1.6rem auto;}

/* 플로팅버튼 */
.float-menu {position:fixed; z-index:12; right:3.8rem; bottom:3.8rem;}
.btn-back {display:block; width:2.9rem; height:2.9rem; background:url('../images/btn-back.png') no-repeat 50% 50%; background-size: 2.9rem auto;}
.btn-top {display:block; width:2.9rem; height:2.9rem; margin-top:1rem; background:url('../images/btn-top.png') no-repeat 50% 50%; background-size: 2.9rem auto;}

.wrapper {max-width:42rem; margin:0 auto; position:relative; height:100%; background:#fff}

/* gnb */
header {max-width:42rem; margin:0 auto; height:2.55rem; position:fixed; top:0; left:0; right:0; z-index:3;}
.top-menu {display:flex; height:2.55rem;  background:url('../images/bg-top.png') repeat 0 100%; background-size: auto 2.55rem;}
.top-menu a {width:9rem; height:2.55rem; line-height:2.55rem; text-align:center; font-size:1.3rem; font-weight:700; background:url('../images/top-menu-off.png') no-repeat 0 0; background-size: 9rem auto; font-family: 'Binggrae-Bold';}
.top-menu a.on {color: #fff; background:url('../images/top-menu-on.png') no-repeat 0 0; background-size: 8.5rem auto;}

.container {margin-top:2.55rem;}

/* HOME */
.visual-wrap {position: relative; padding:3.8rem; height:48rem; background:url('../images/bg-main.png') no-repeat 50% 0; background-size: 100% auto;}
.visual-wrap::before {content:"";  position: absolute; left:0; top: -1px; width:100%; height:3rem; background:url('../images/bg-vod.png') no-repeat 0 0;}
.visual-wrap h1 {width:6rem; height:1.4rem; margin-bottom:4rem; background:url('../images/logo.png') no-repeat 50% 50%; background-size: 6rem auto;}
.visual-wrap .text01 img{width: 10.6rem;}
.visual-wrap .btn-share { position:absolute; width: 3.9rem; height:3.9rem; left:3.8rem; bottom:7rem; background:url('../images/btn-share1.png') no-repeat 50% 50%; background-size:3.8rem auto;}
.main-menu-list {display:flex; width:29.2rem; margin:2rem auto; flex-direction: column;}
.main-menu-list li {padding:2rem; height:9rem; margin-top:-2rem; background:url('../images/menu-main-bg.png') no-repeat 0 0; background-size:29.2rem auto;}
.main-menu-list li a {display:block; height:4rem; line-height:4rem; text-align:center; font-family: 'Binggrae'; font-weight:400; font-size:1.7rem;}

/* 회사소개 */
.visual-wrap-ceo::before {content:"";  position: absolute; left:0; top: -1px; width:100%; height:3rem; background:url('../images/bg-vod.png') no-repeat 0 0;}
.visual-wrap-ceo {position: relative; padding:3.8rem 3.5rem; height:48rem; background:url('../images/bg_addr.png') no-repeat 50% 0; background-size: 100% auto;}
.visual-wrap-ceo h2 {font-size:2.25rem; margin-bottom:3rem; color:#fff; font-family: 'Binggrae-Bold'; font-weight:700;}
.visual-wrap-ceo p {font-size: 1.65rem; margin-bottom:3rem; color:#fff; font-weight:300; letter-spacing:-1px;}
.visual-wrap-ceo p b {font-weight:500;}
.visual-wrap-ceo p span {font-size:1.2rem;}
.visual-wrap-ceo p strong {font-size: 1.65rem; font-family: 'Binggrae-Bold'; font-weight:700;}
.vision-wrap {padding:0 1.8rem 3.8rem;}
.vision-wrap h2 {padding-bottom:13rem; margin-bottom:2rem; text-align:center; font-size:1.5rem; font-family:'Binggrae-Bold'; font-weight:700; background:url('../images/img-intro.png') no-repeat 50% 100%; background-size: 27.7rem auto; }
.vision-wrap .text-box {font-size:1.5rem; text-align:center; height:18rem; letter-spacing:-1px; background:url('../images/bg-box.png') no-repeat 50% 0; background-size: 33.2rem auto;}
.vision-wrap .text-box .inner {display:flex; height:9rem; align-items:center; justify-content: center;}
.vision-wrap p {text-align:center; font-size:1.5rem; word-break: keep-all; letter-spacing: -1px; padding: 0 2rem;}
.vision-wrap p + p { margin-top:2rem;}
.history-wrap {padding:0 2rem 3.8rem;}
.history-wrap h2 {font-size:1.5rem; margin-bottom:4rem; font-family: 'Binggrae-Bold'; font-weight:700; text-align:center; font-family: 'Binggrae-Bold'; font-weight:700;}
.history-wrap h3 {display:flex; justify-content: center; align-items:center; margin:-2rem auto 5.5rem; width:8.5rem; height:8.5rem; border-radius:100%; color:#f59b8b; border:2px solid #f59b8b; font-family: 'Binggrae-Bold'}
.history-wrap dl {text-align:center;font-size:1.5rem;}
.history-wrap dl dt {position: relative; font-family: 'Binggrae-Bold'; font-weight:700;}
.history-wrap dl dt::before { content:""; position:absolute; left:50%; top:-4rem; height:1.6rem; border-left:1px solid #ccc;}
.history-wrap dl dt::after { content:""; position:absolute; left:50%; top:-1.5rem; transform:translate(-50%, 0); width:1.1rem; height:1.1rem; border-radius:2.4rem; background:#f59b8b;}
.history-wrap dl dd {margin-bottom:4.5rem;}

/* 제품안내 */
.visual-wrap-product  {position: relative;  height: calc(100vh - (2.55rem + 0rem)); background:url('../images/bg-comm.png') no-repeat 50% 0; background-size: 100% auto;}
.visual-wrap-product::before {content:"";  position: absolute; left:0; top: -1px; width:100%; height:3rem; background:url('../images/bg-vod.png') no-repeat 0 0;}
.visual-wrap-product h2 {padding-top:6rem; font-size:3.75rem; text-align:center; margin-bottom:1.0rem; color:#fff; font-family: 'Binggrae-Bold'; font-weight:700;}
.visual-wrap-product ul {width:25rem; margin:0 auto;}
.visual-wrap-product ul li { background-color:#fff; border-radius:2.4rem; margin-bottom:1.7rem; }
.visual-wrap-product ul li a {display:block; text-align:center; height:4.5rem; line-height:4.5rem; font-size:2.25rem; color:#f59b8b; font-family: 'Binggrae-Bold'; font-weight:700;}

.visual-wrap-detail { z-index: 1; position: relative; padding:0 0 2rem; background:url('../images/bg-vod.png') no-repeat 50% 100%; background-size: 100% auto;}
.visual-wrap-detail:before {content:"";  position: absolute; left:0; top: -1px; width:100%; height:5rem; background:url('../images/bg-vod.png') no-repeat 0 0;}

.product-cont {margin-top: -.5rem;}
.product-cont .srarch-wrap {margin:0 3.5rem 1.75rem;}
.product-cont .pro-list { margin-top: -.5rem; padding:0 3.5rem 4rem;}
.product-cont .pro-list li {box-shadow: 2px 7px 25px  rgba(0, 0, 0, .14); background-color:#fff; border-radius:1rem; padding:1.5rem 1rem; margin-bottom:1.7rem; }
.product-cont .pro-list li a {display:flex;}
.product-cont .pro-list li a .img {width:6rem;  display:flex; align-items: center; flex-shrink:0; flex-grow:0;}
.product-cont .pro-list li a .img img {width:100%;}
.product-cont .pro-list li a p {flex-grow:1; padding-left:2.5rem; display:flex; flex-direction:column; justify-content: space-evenly;}
.product-cont .pro-list li a p strong { font-size:1.5rem; font-weight:500;}
.product-cont .pro-list li a p em {color: #7d7d7d; font-size:1.1rem;}

.visual-wrap-detail .productSwiper {overflow: hidden; padding-top: 3.5rem;}
.visual-wrap-detail .swiper-slide { width:17.5rem !important; text-align: center;  }
.visual-wrap-detail .swiper-slide .img {display: block;}
.visual-wrap-detail .swiper-slide .img img {width: 100%; max-width:20rem; opacity: .5;}
.visual-wrap-detail .swiper-slide .tag { opacity:0; margin-top:1rem; display: inline-block; border-radius:2.4rem; color:#f59b8b; background: #e9e9e9; padding:.2rem 1.2rem; font-size:1.3rem; font-family: 'Binggrae-Bold'; font-weight:700;}
.visual-wrap-detail .swiper-slide p { opacity:0; color:#fff; margin-top: .75rem; font-size:1.5rem; font-family: 'Binggrae'; font-weight:400; word-break: keep-all;}
.visual-wrap-detail .swiper-slide .tag { opacity:0; margin-top:1.75rem; display: inline-block; border-radius:2.4rem; color:#f59b8b; background: #e9e9e9; padding:.2rem 1.2rem; font-size:1.3rem; font-family: 'Binggrae-Bold'; font-weight:700;}
.visual-wrap-detail .swiper-slide a {padding-bottom:.8rem;}
.visual-wrap-detail .swiper-slide p.sub-text {font-size:1.25rem; }
.visual-wrap-detail .swiper-slide.swiper-slide-active .img img{opacity: 1;}
.visual-wrap-detail .swiper-slide.swiper-slide-active .tag {opacity:1;}
.visual-wrap-detail .swiper-slide.swiper-slide-active p {opacity:1;}

.word-wrap .wordSwiper {overflow: hidden; padding-left: 3.5rem;}
.word-wrap .swiper-slide { width:auto !important; border-radius:2.4rem; color:#f59b8b; background: #e9e9e9; padding:.2rem 1.2rem; font-family: 'Binggrae-Bold'; font-weight:700;}
/*.word-wrap .swiper-slide.swiper-slide-active {background: #f59b8b; color:#fff;}*/
.word-wrap .swiper-slide.active {background: #f59b8b; color:#fff;}

/* 오시는길 */

.visual-wrap-addr  {position: relative;  height: 400px; background:url('../images/bg_addr.png') no-repeat 50% 0; background-size: 100% auto;}
.visual-wrap-addr::before {content:"";  position: absolute; left:0; top: -1px; width:100%; height:2rem; background:url('../images/bg_addr.png') no-repeat 0 0;}
.visual-wrap-addr h2 {padding-top:9rem; font-size:3.75rem; text-align:center; margin-bottom:3.7rem; color:#fff; font-family: 'Binggrae-Bold'; font-weight:700;}
.visual-wrap-addr ul {width:25rem; margin:0 auto;}
.visual-wrap-addr ul li { background-color:#fff; border-radius:2.4rem; margin-bottom:1.2rem; }
.visual-wrap-addr ul li a {display:block; text-align:center; height:4.5rem; line-height:4.5rem; font-size:2.25rem; color:#f59b8b; font-family: 'Binggrae-Bold'; font-weight:700;}


/* 제품 팝업 */
.modal {position:fixed; left:0; top:0; right:0; bottom:0; z-index:100; }
.modal .modal-in {max-width:40rem; height: 60rem; margin:0 auto; position:absolute; left:3.5rem; top:50%; transform: translate(0, -50%);  right:3.5rem; background:#fff; border-radius: 1rem;box-shadow: 2px 7px 25px  rgba(0, 0, 0, .14);}
.modal .modal-in .btn-close { position:absolute; top:1.5rem; width:3rem; height:3rem; right:1rem; text-indent:-999px; overflow:hidden; background:url('../images/btn-close.png') no-repeat 50% 50%; background-size:2rem; }
.modal .modal-in .menu-head {padding:4.5rem 3rem 4rem; }
.modal .modal-in .modal-body { padding:2rem 1rem; display:flex; flex-direction: column; overflow-y: auto; height:100%;}
.modal .modal-in .img-wrap {display:flex; flex-shrink:0; height: 18.5rem; width: 18.5rem; align-items: center; margin: 0 auto; justify-content: center;}
.modal .modal-in .img-wrap img {width: 100%; }
.modal .modal-in .btn-wrap {text-align: center; padding-bottom:4rem;}
.modal .modal-in .barcode-wrap {text-align: center;}
.modal .modal-in .barcode-wrap span {display:block;}
.modal .modal-in .barcode-wrap span img {max-width:39rem; width:100%;max-height:120px;height:100%; border-style: solid; border-width: thin;}
.modal .modal-in .barcode-wrap .btn-share { width: 3.9rem; height:3.9rem; left:3.8rem; margin-top:1.5rem; bottom:7rem; background:url('../images/btn-share2.png') no-repeat 50% 50%; background-size:3.8rem auto;}

.tableList {margin-bottom: 2rem;font-family: 'Binggrae'; font-weight:400;}
.tableList .tit {background:#f59b8b; position: relative; z-index:2; color:#fff; display:flex; min-height:3rem; align-items:center; padding:.5rem 1rem ; font-size:1.7rem;}
.tableList table {width:100%; font-size:1.35rem; border:1px solid #c9c9c9; border-top:0; }
.tableList table tbody th {font-weight:400; background-color:#eee; padding:.4rem 1rem; border-bottom:1px solid #c9c9c9; text-align: left; white-space: nowrap;}
.tableList table tbody td { padding:.4rem 1rem; border-bottom:1px solid #c9c9c9;}

/* 온에어 */
.visual-wrap-vod {z-index: 1; position: relative; padding:2rem 2rem 4rem; background:url('../images/bg-vod.png') no-repeat 50% 100%; background-size: 100% auto;}
.visual-wrap-vod::before {content:"";  position: absolute; left:0; top: -1px; width:100%; height:5rem; background:url('../images/bg-vod.png') no-repeat 0 0;}
.visual-wrap-vod .vod {position: relative; z-index:2;}
.visual-wrap-vod .vod img {width:100%;}
.visual-wrap-vod p {position: relative; z-index:2; padding:1rem 0; text-align: center; font-size:1.5rem; font-family: 'Binggrae-Bold'; font-weight:700; color:#fff;}

.vod-list { padding:0 3rem 2rem; display:flex; flex-wrap:wrap; height:100%; overflow-y: auto;}
.vod-list li {width:48%; margin-bottom:1rem; }
.vod-list li:nth-of-type(even) {margin-left:1rem;}
.vod-list li p {font-size:1.5rem; font-weight: 500;}
.vod-list li .vod img {width:100%;}

@media only screen and (max-width:380px){
    .visual-wrap {height: 44rem;}
    .visual-wrap-ceo {height: 43rem;}
    .visual-wrap-ceo h2 {margin-bottom: 2rem;}
}

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

    .visual-wrap { height: 41rem; }
    .visual-wrap-ceo {height: 41rem;}
}

/* --- ie11 대응 --- */
@media all and (-ms-high-contrast:none) {
    *::-ms-backdrop, .modal .modal-in { left:50%; top:50%; transform: translate(-50%, -50%); }
    *::-ms-backdrop, header { left:50%; top:0; transform: translate(-50%, 0);}
}