@charset "utf-8";

/* 공통(default) */
div.wrapper{font-family:'Noto Sans KR'}
div.subHeader{position:relative}
div.subHeader h2{color:#000; font-weight:800; text-align:center}
div.subHeader p.sub{color:#db3e28; font-weight:500; text-align:center}
div.subHeader div.desc{color:#7a7a7a; font-weight:500; text-align:center}
#page_title.page_title14:before{background-color:rgba(0,0,0,.25) !important}
#contents{background-color:#fff}
#contents section{position:relative}
#footMenu{font-family:'Noto Sans KR' !important}
#footer{font-family:'Noto Sans KR' !important}
#footMenu ul.link li a:after{background-color:#ab1500 !important}
#footMenu ul.link li.on a:after{background-color:#ab1500 !important}
#footMenu ul.link li:hover a{color:#ab1500 !important}
#footer ul.ft > li.tel a{color:#ab1500 !important}
@media screen and (max-width:1280px){
	#header h1.logo img{height:32px}
	#gnb{background-image:linear-gradient(45deg,#db3e28,#3d0800)}
	#contents section{padding:40px 10px}
	div.subHeader{margin:0 0 40px 0}
	div.subHeader h2{font-size:20px}
	div.subHeader p.sub{font-size:15px}
	div.subHeader div.desc{margin:4px 0 0 0; font-size:13px}
}
@media screen and (min-width:1281px){
	#header h1.logo a{width:130px; height:63px; background-image:url('../image/logo_tw.svg?v=210410')}
	div.navBar:hover #header h1.logo a{background-image:url('../image/logo.svg?v=210410')}
	div.navBar.scrolled #header h1.logo a{background-image:url('../image/logo.svg?v=210410')}
	div.navBar.scrolled #header h1.logo{padding:10px 0}
	#lnb{display:none}
	#contents section{padding:100px 0}
	div.subHeader{margin:0 0 60px 0}
	div.subHeader h2{font-size:45px}
	div.subHeader p.sub{font-size:16px}
	div.subHeader div.desc{margin:4px 0 0 0; font-size:15px}
}
@media screen and (min-width:1281px) and (max-width:1399px){
	div.inner{width:1200px}
}
@media screen and (min-width:1400px) and (max-width:1599px){
	div.inner{width:1200px}
}
@media screen and (min-width:1600px) and (max-width:1679px){
	div.inner{width:1440px}
}
@media screen and (min-width:1680px) and (max-width:1919px){
	div.inner{width:1440px}
}
@media screen and (min-width:1920px){
	div.inner{width:1440px}
}

div.emph_{position:relative; background-position:50% 50%; background-repeat:no-repeat; background-size:cover; color:#fff}
div.emph_:before{content:''; position:absolute; top:0; right:0; bottom:0; left:0; background-color:rgba(0,0,0,.4)}
div.emph_ div.inner{position:relative}
div.emph_ h4{position:relative; text-shadow:rgba(0,0,0,0.75) 1px 1px 2px}
div.emph_ div.desc{position:relative; text-shadow:rgba(0,0,0,0.75) 1px 1px 2px; word-break:keep-all}
@media screen and (max-width:320px){
	div.emph_ img.img{display:block; width:120px; margin:auto}
	div.emph_ div.txt{margin:20px 0 0 0; text-align:center}
}
@media screen and (min-width:321px) and (max-width:360px){
	div.emph_ img.img{display:block; width:120px; margin:auto}
	div.emph_ div.txt{margin:20px 0 0 0; text-align:center}
}
@media screen and (min-width:361px) and (max-width:383px){
	div.emph_ img.img{display:block; width:120px; margin:auto}
	div.emph_ div.txt{margin:20px 0 0 0; text-align:center}
}
@media screen and (min-width:384px) and (max-width:428px){
	div.emph_ img.img{display:block; width:120px; margin:auto}
	div.emph_ div.txt{margin:20px 0 0 0; text-align:center}
}
@media screen and (min-width:429px) and (max-width:767px){
	div.emph_ div.inner{padding:0 130px 0 0}
	div.emph_ img.img{position:absolute; top:50%; right:0; transform:translateY(-50%); width:120px}
}
@media screen and (min-width:768px) and (max-width:1024px){
	div.emph_ div.inner{padding:0 130px 0 0}
	div.emph_ img.img{position:absolute; top:50%; right:0; transform:translateY(-50%); width:120px}
}
@media screen and (min-width:1025px) and (max-width:1280px){
	div.emph_ div.inner{padding:0 130px 0 0}
	div.emph_ img.img{position:absolute; top:50%; right:0; transform:translateY(-50%); width:120px}
}
@media screen and (max-width:1280px){
	div.emph_{padding:20px 10px}
	div.emph_ h4{margin-bottom:8px; font-size:22px}
	div.emph_ div.desc{font-size:15px}
}
@media screen and (min-width:1281px){
	div.emph_{padding:40px 0}
	div.emph_ img.img{position:absolute; top:50%; right:0; margin-top:-90px}
	div.emph_ h4{padding:0 292px 0 0; margin-bottom:10px; line-height:120%; font-size:32px}
	div.emph_ div.desc{font-size:22px}
	div.emph_ div.desc span{display:block}
}
/* 공통(default) */

/* 메인페이지(main) */
section.mainSect{position:relative}
#mainSlide14{background-position:50% 50%; background-repeat:no-repeat; background-size:cover; background-image:url('/image/main/mainSlideBg_1.jpg')}
#mainSlide14 div.swiper-slide0 div.img{background-image:url('/image/prd0/thumb.png?v=211116') !important}
#mainSlide14 div.swiper-slide1 div.img{background-image:url('/image/prd1/thumb.png?v=211116') !important}
#mainSlide14 div.swiper-slide2 div.img{background-image:url('/image/prd2/thumb.png?v=211116') !important}
#mainSlide14 div.swiper-slide3 div.img{background-image:url('/image/prd3/thumb.png?v=211116') !important}
#mainSlide14 div.swiper-slide4 div.img{background-image:url('/image/prd4/thumb.png?v=211116') !important}
#mainSlide14 div.swiper-slide5 div.img{background-image:url('/image/hiab/thumb.png?v=251117') !important}
#mainSlide14 div.desc{text-shadow:rgba(0,0,0,.7) 1px 1px 1px; word-break:keep-all}
#mainSlide14 div.desc strong{display:inline-block}
#mainSlide14 div.commentary strong{color:#ffa7a7 !important}
#mainSlide14 button.fa:hover{background-color:#ab1500 !important}
#mainSlide14 div.swiper-pagination-bullet div.progress{background-color:#db3e28 !important}
@media screen and (max-width:1280px){
	section.mainSect{padding:60px 10px}
	#mainSlide14 div.img{background-repeat:no-repeat; background-size:contain !important}
	#mainSlide14 div.img{width:16em !important}
}
@media screen and (min-width:1281px){
	section.mainSect{padding:100px 0}
	#mainSlide14 div.img{width:50% !important}
	#mainSlide14 div.swiper-pagination div.swiper-pagination-bullet:hover{background-color:rgba(219,62,40,.5) !important}
}

section.mainSect ul.prd{position:relative; display:flex; flex-wrap:wrap; text-align:center}
section.mainSect ul.prd > li{box-sizing:border-box}
section.mainSect ul.prd > li a.box{position:relative; display:block; background-color:#fff; box-shadow:0 0 8px 2px rgba(0,0,0,.1); transition:all 1s}
section.mainSect ul.prd > li div.imgW{overflow:hidden}
section.mainSect ul.prd > li div.img{background-position:50% 50%; background-repeat:no-repeat; background-size:cover; background-color:#eee; transition:all 1s}
section.mainSect ul.prd > li a.box:hover{box-shadow:0 0 10px 4px rgba(0,0,0,.2)}
section.mainSect ul.prd > li a.box:hover div.img{background-color:#fff; transform:scale(1.2)}
section.mainSect ul.prd > li div.img:before{content:''; display:block; padding:40% 0}
section.mainSect ul.prd > li h3{font-weight:600}
section.mainSect ul.prd > li div.desc{overflow:hidden; word-break:keep-all; color:#7a7a7a}
section.mainSect ul.prd > li div.cate{display:flex; flex-wrap:nowrap; justify-content:space-between; align-items:center; background-color:#db3e28; color:#fff; font-weight:300; text-align:left; transition:all 1s}
section.mainSect ul.prd > li a.box:hover div.cate{background-color:#ab1500}
section.mainSect ul.prd > li div.Tmask{right:1px; transition:all 1s}
section.mainSect ul.prd > li div.Rmask{bottom:1px; transition:all 1s}
section.mainSect ul.prd > li div.Bmask{left:1px; transition:all 1s}
section.mainSect ul.prd > li div.Lmask{top:1px; transition:all 1s}
section.mainSect ul.prd > li a.box:hover div.Tmask{background-color:#ab1500}
section.mainSect ul.prd > li a.box:hover div.Rmask{background-color:#ab1500}
section.mainSect ul.prd > li a.box:hover div.Bmask{background-color:#ab1500}
section.mainSect ul.prd > li a.box:hover div.Lmask{background-color:#ab1500}
@media screen and (max-width:320px){
	section.mainSect ul.prd > li{width:50%}
	section.mainSect ul.prd > li:nth-child(2n+1):nth-last-child(-n+2), section.mainSect ul.prd > li:nth-child(2n+1):nth-last-child(-n+2) ~ li{margin-bottom:0}
}
@media screen and (min-width:321px) and (max-width:360px){
	section.mainSect ul.prd > li{width:50%}
	section.mainSect ul.prd > li:nth-child(2n+1):nth-last-child(-n+2), section.mainSect ul.prd > li:nth-child(2n+1):nth-last-child(-n+2) ~ li{margin-bottom:0}
}
@media screen and (min-width:361px) and (max-width:383px){
	section.mainSect ul.prd > li{width:50%}
	section.mainSect ul.prd > li:nth-child(2n+1):nth-last-child(-n+2), section.mainSect ul.prd > li:nth-child(2n+1):nth-last-child(-n+2) ~ li{margin-bottom:0}
}
@media screen and (min-width:384px) and (max-width:428px){
	section.mainSect ul.prd > li{width:50%}
	section.mainSect ul.prd > li:nth-child(2n+1):nth-last-child(-n+2), section.mainSect ul.prd > li:nth-child(2n+1):nth-last-child(-n+2) ~ li{margin-bottom:0}
}
@media screen and (min-width:429px) and (max-width:767px){
	section.mainSect ul.prd > li{width:50%}
	section.mainSect ul.prd > li:nth-child(2n+1):nth-last-child(-n+2), section.mainSect ul.prd > li:nth-child(2n+1):nth-last-child(-n+2) ~ li{margin-bottom:0}
}
@media screen and (min-width:768px) and (max-width:1024px){
	section.mainSect ul.prd > li{width:calc(100% / 3)}
	section.mainSect ul.prd > li:nth-child(3n+1):nth-last-child(-n+3), section.mainSect ul.prd > li:nth-child(3n+1):nth-last-child(-n+3) ~ li{margin-bottom:0}
}
@media screen and (min-width:1025px) and (max-width:1280px){
	section.mainSect ul.prd > li{width:25%}
	section.mainSect ul.prd > li:nth-child(4n+1):nth-last-child(-n+4), section.mainSect ul.prd > li:nth-child(4n+1):nth-last-child(-n+4) ~ li{margin-bottom:0}
}
@media screen and (max-width:1280px){
	section.mainSect ul.prd{left:-5px; width:calc(100% + 10px)}
	section.mainSect ul.prd > li{padding:0 5px; margin:0 0 10px 0}
	section.mainSect ul.prd > li div.txt{padding:10px 0}
	section.mainSect ul.prd > li h3{height:36px; font-size:15px; line-height:18px}
	section.mainSect ul.prd > li div.desc{height:48px; padding:0 10px; margin:10px 0 0 0; font-size:13px; line-height:16px}
	section.mainSect ul.prd > li div.cate{padding:8px 10px; font-size:15px}
}
@media screen and (min-width:1281px){
	section.mainSect ul.prd{left:-10px; width:calc(100% + 20px)}
	section.mainSect ul.prd > li{width:25%; padding:0 10px; margin:0 0 20px 0}
	section.mainSect ul.prd > li:nth-child(4n+1):nth-last-child(-n+4), section.mainSect ul.prd > li:nth-child(4n+1):nth-last-child(-n+4) ~ li{margin-bottom:0}
	section.mainSect ul.prd > li div.txt{padding:20px 0}
	section.mainSect ul.prd > li h3{height:56px; font-size:22px; line-height:28px}
	section.mainSect ul.prd > li div.desc{height:60px; padding:0 10px; margin:10px 0 0 0; font-size:15px; line-height:20px}
	section.mainSect ul.prd > li div.cate{padding:10px 12px; font-size:15px}
}

section.mainSect.video{background: #fff; text-align: center}
section.mainSect.video iframe{width: 100%; aspect-ratio: 1.777 / 1}




section.mainSect.sup{background-color:#fff}
section.mainSect.sup div.inner{display:flex}
section.mainSect.sup div.inner ul.sup{display:flex; flex-wrap:nowrap}
section.mainSect.sup div.inner ul.sup > li{position:relative; background-position:50% 50%; background-repeat:no-repeat; background-size:cover; background-color:#000}
section.mainSect.sup div.inner ul.sup > li:before{content:''; display:block; padding:35% 0}
section.mainSect.sup div.inner ul.sup > li div.overlay{position:absolute; top:0; right:0; bottom:0; left:0; background-color:rgba(0,0,0,.25); transition:all .6s}
section.mainSect.sup div.inner ul.sup > li:hover div.overlay{background-color:rgba(219,62,40,.65)}
section.mainSect.sup div.inner ul.sup > li div.txt{position:absolute; top:50%; right:0; left:0; transform:translateY(-50%); color:#fff; text-align:center; word-break:keep-all}
@media screen and (max-width:1280px){
	section.mainSect.sup div.inner{flex-wrap:wrap}
	section.mainSect.sup div.subHeader{width:100%}
	section.mainSect.sup ul.sup{width:100%}
	section.mainSect.sup ul.sup > li{width:calc(100% / 3)}
	section.mainSect.sup div.inner ul.sup > li:before{padding:50% 0}
	section.mainSect.sup ul.sup h4{margin:0 0 8px 0; font-size:16px}
	section.mainSect.sup ul.sup div.desc{padding:0 4px; font-size:10px}
}
@media screen and (min-width:1281px){
	section.mainSect.sup div.inner{flex-wrap:nowrap}
	section.mainSect.sup div.inner div.subHeader{width:25%; margin:0}
	section.mainSect.sup div.subHeader div.in{position:absolute; top:50%; right:0; left:0; transform:translateY(-50%); padding-right:15px}
	section.mainSect.sup div.subHeader h2{text-align:left}
	section.mainSect.sup div.subHeader p.sub{text-align:left}
	section.mainSect.sup div.subHeader div.desc{text-align:left}
	section.mainSect.sup ul.sup{width:75%; padding-left:15px; box-sizing:border-box}
	section.mainSect.sup ul.sup > li{width:calc(100% / 3)}
	section.mainSect.sup ul.sup h4{margin:0 0 20px 0; font-size:24px}
	section.mainSect.sup ul.sup div.desc{padding:0 10px; font-size:16px}
}
/* 메인페이지(main) */

/* 제품정보(prd) */
#contents.prd section.summary div.inner{display:flex}
#contents.prd section.summary div.img img{display:block; max-width:100%}
#contents.prd section.summary p.sub{color:#db3e28; font-weight:500}
#contents.prd section.summary h1{font-weight:900}
#contents.prd section.summary div.desc{background-color:#f5f5f5}
#contents.prd section.summary p.desc{position:relative; font-weight:300; color:#444}
#contents.prd section.summary p.desc:last-child{margin:0}
#contents.prd section.summary p.desc:before{content:''; position:absolute; left:0; border-radius:50%; background-color:#db3e28}
#contents.prd section.summary div.btns{display:flex; flex-wrap:nowrap}
#contents.prd section.summary div.btn{width:50%; box-sizing:border-box}
#contents.prd section.summary a.tel{position:relative; display:flex; justify-content:center; align-items:center; width:100%; height:100%; border:1px solid #000; box-sizing:border-box; color:#000; transition:all .8s}
#contents.prd section.summary a.tel:hover{background-color:#ab1500; border-color:#ab1500; color:#fff}
#contents.prd section.summary a.tel span{display:block}
#contents.prd section.summary a.tel span.ico svg{display:block; width:100%; height:100%; fill:#000; transition:all .8s}
#contents.prd section.summary a.tel:hover span.ico svg{fill:#fff}
#contents.prd section.summary button.request{position:relative; display:flex; justify-content:center; align-items:center; width:100%; height:100%; border:1px solid #000; box-sizing:border-box; background-color:#000; color:#fff; font-family:'Noto Sans KR'; transition:all .8s}
#contents.prd section.summary button.request:hover{background-color:#ab1500; border-color:#ab1500}
#contents.prd section.summary button.request span{display:block}
#contents.prd section.summary button.request span.ico svg{display:block; width:100%; height:100%; fill:#fff}
@media screen and (max-width:1280px){
	#contents.prd{padding:40px 0}
	#contents.prd section{padding:40px 0 0 0}
	#contents.prd section.summary{padding:0}
	#contents.prd section.summary div.inner{flex-wrap:wrap}
	#contents.prd section.summary div.thumb{width:100%; padding:0 0 20px 0}
	#contents.prd section.summary div.img{height:100%; background-color:#eee}
	#contents.prd section.summary div.txt{width:100%; padding:0 10px; box-sizing:border-box}
	#contents.prd section.summary p.sub{font-size:13px}
	#contents.prd section.summary h1{font-size:20px}
	#contents.prd section.summary div.desc{padding:10px; border:3px solid #ab1500; margin:10px 0 0 0}
	#contents.prd section.summary p.desc{margin:0 0 10px 0; font-size:13px; text-indent:12px; line-height:20px}
	#contents.prd section.summary p.desc:before{top:8px; width:4px; height:4px}
	#contents.prd section.summary div.btns{margin:10px 0 0 0}
	#contents.prd section.summary div.btn{height:44px}
	#contents.prd section.summary div.btn:nth-child(1){padding-right:5px}
	#contents.prd section.summary div.btn:nth-child(2){padding-left:5px}
	#contents.prd section.summary a.tel{font-size:14px}
	#contents.prd section.summary a.tel span{height:20px; line-height:20px}
	#contents.prd section.summary a.tel span.ico{width:20px; padding:2px; margin:0 2px 0 0; box-sizing:border-box}
	#contents.prd section.summary button.request{font-size:14px}
	#contents.prd section.summary button.request span{height:20px; line-height:20px}
	#contents.prd section.summary button.request span.ico{width:20px; padding:2px; margin:0 2px 0 0; box-sizing:border-box}
}
@media screen and (min-width:1281px){
	#contents.prd{padding:100px 0}
	#contents.prd section{padding:70px 0 0 0}
	#contents.prd section.summary{padding:0}
	#contents.prd section.summary div.inner{flex-wrap:nowrap}
	#contents.prd section.summary div.thumb{width:50%; padding:0 20px 0 0; box-sizing:border-box}
	#contents.prd section.summary div.img{height:100%; background-color:#eee}
	#contents.prd section.summary div.txt{width:50%; padding:0 0 0 20px; box-sizing:border-box}
	#contents.prd section.summary p.sub{font-size:16px}
	#contents.prd section.summary h1{font-size:45px}
	#contents.prd section.summary div.desc{padding:25px; border:3px solid #ab1500; margin:20px 0 0 0}
	#contents.prd section.summary p.desc{margin:0 0 10px 0; font-size:17px; text-indent:12px; line-height:24px}
	#contents.prd section.summary p.desc:before{top:9px; width:6px; height:6px}
	#contents.prd section.summary div.btns{margin:20px 0 0 0}
	#contents.prd section.summary div.btn{height:52px}
	#contents.prd section.summary div.btn:nth-child(1){padding-right:10px}
	#contents.prd section.summary div.btn:nth-child(2){padding-left:10px}
	#contents.prd section.summary a.tel{font-size:15px}
	#contents.prd section.summary a.tel span{height:22px; line-height:22px}
	#contents.prd section.summary a.tel span.ico{width:22px; padding:2px; margin:0 2px 0 0; box-sizing:border-box}
	#contents.prd section.summary button.request{font-size:15px}
	#contents.prd section.summary button.request span{height:22px; line-height:22px}
	#contents.prd section.summary button.request span.ico{width:22px; padding:2px; margin:0 2px 0 0; box-sizing:border-box}
}
#contents.prd div.tab{border-top:1px solid #000; border-bottom:1px solid #ccc; background-color:#f5f5f5; color:#000; font-weight:500}
#contents.prd ul.tab{display:flex; flex-wrap:nowrap}
#contents.prd ul.tab > li{position:relative}
#contents.prd ul.tab > li:after{content:''; position:absolute; bottom:-1px; left:0; opacity:0; width:100%; height:3px; background-color:#ab1500; transition:all .25s ease-in-out; -webkit-transform:translateX(-50%); transform:translateX(-50%)}
#contents.prd ul.tab > li.on:after{left:50%; opacity:1}
#contents.prd ul.tab > li:hover:after{left:50%; opacity:1}
#contents.prd ul.tab a{color:#000}
@media screen and (max-width:320px){
	#contents.prd div.tab{font-size:11px}
}
@media screen and (min-width:321px) and (max-width:428px){
	#contents.prd div.tab{font-size:12px}
}
@media screen and (min-width:429px) and (max-width:767px){
	#contents.prd div.tab{font-size:13px}
}
@media screen and (min-width:768px) and (max-width:1280px){
	#contents.prd div.tab{font-size:14px}
}
@media screen and (max-width:1280px){
	#contents.prd div.tab{margin:0 0 30px 0}
	#contents.prd ul.tab > li{width:25%}
	#contents.prd ul.tab a{display:flex; justify-content:center; align-items:center; width:100%; height:100%; padding:8px 0; box-sizing:border-box; text-align:center}
}
@media screen and (min-width:1281px){
	#contents.prd div.tab{margin:0 0 60px 0; font-size:16px}
	#contents.prd ul.tab a{display:block; padding:12px 20px}
}

#contents.prd ul.print{display:flex; flex-wrap:wrap}
#contents.prd ul.print > li{position:relative; display:flex; box-sizing:border-box}
#contents.prd ul.print > li div.box{position:relative; display:flex; flex-direction:column; width:100%; border:1px solid rgba(0,0,0,.2); box-sizing:border-box; background-color:#fff; box-shadow:0 0 8px 2px rgba(0,0,0,.2); cursor:pointer; transition:all .8s}
#contents.prd ul.print > li div.box:hover{z-index:2; border-color:rgba(0,0,0,1); transform:scale(1.1)}
#contents.prd ul.print > li h3{font-weight:500; color:#444}
#contents.prd ul.print > li div.img{display:flex; justify-content:center; align-items:center; overflow:hidden}
#contents.prd ul.print > li img{display:block; width:100%; margin:auto}
@media screen and (max-width:1280px){
	#contents.prd ul.print{padding:0 10px}
	#contents.prd ul.print > li{width:50%; margin:0 0 20px 0}
	#contents.prd ul.print > li:nth-child(2n+1){padding:0 5px 0 0}
	#contents.prd ul.print > li:nth-child(2n){padding:0 0 0 5px}
	#contents.prd ul.print > li div.box{padding:8px}
	#contents.prd ul.print > li h3{font-size:13px}
}
@media screen and (min-width:1281px){
	#contents.prd ul.print > li{width:50%; margin:0 0 20px 0}
	#contents.prd ul.print > li:nth-child(2n+1){padding:0 10px 0 0}
	#contents.prd ul.print > li:nth-child(2n){padding:0 0 0 10px}
	#contents.prd ul.print > li div.box{padding:15px}
	#contents.prd ul.print > li h3{font-size:16px}
}

#contents.prd ul.tbl{display:flex; flex-wrap:wrap}
#contents.prd ul.tbl > li{position:relative; display:flex}
#contents.prd div.moreInfo{color:#6a6a6a}
@media screen and (max-width:1280px){
	#contents.prd ul.tbl{flex-direction:column; font-size:12px; text-align:center; font-weight:500}
	#contents.prd ul.tbl > li{flex-wrap:nowrap; width:100%}
	#contents.prd ul.tbl > li.header{display:none}
	#contents.prd ul.tbl.tbl0 > li{justify-content:flex-end}
	#contents.prd ul.tbl.tbl1 > li{justify-content:space-between}
	#contents.prd ul.tbl > li div.th{position:relative; height:44px; border-right:1px solid rgba(0,0,0,.2); border-bottom:1px solid rgba(0,0,0,.2); background-color:#eee}
	#contents.prd ul.tbl > li.ln2 div.th{height:68px}
	#contents.prd ul.tbl > li.header div.th{border-right-color:rgba(0,0,0,.4); border-bottom-color:rgba(0,0,0,.4)}
	#contents.prd ul.tbl > li.header.last div.th{border-bottom-width:2px}
	#contents.prd ul.tbl.tbl0 > li div.th{width:16%}
	#contents.prd ul.tbl.tbl1 > li div.th{width:14%}
	#contents.prd ul.tbl > li.header div.th{background-color:#ab1500; color:#fff}
	#contents.prd ul.tbl.tbl0 > li div.th.header{width:10%}
	#contents.prd ul.tbl.tbl1 > li div.th.header{width:16%}
	#contents.prd ul.tbl > li div.th:last-child{border-right:0}
	#contents.prd ul.tbl > li:last-child div.th{border-bottom:0}
	#contents.prd ul.tbl > li div.td{position:relative; display:flex; height:44px; border-right:1px solid rgba(0,0,0,.2); border-bottom:1px solid rgba(0,0,0,.2)}
	#contents.prd ul.tbl > li.ln2 div.td{height:68px}
	#contents.prd ul.tbl.tbl0 > li div.td{width:16%}
	#contents.prd ul.tbl.tbl1 > li div.td{width:14%}
	#contents.prd ul.tbl > li div.td:last-child{border-right:0}
	#contents.prd ul.tbl > li:last-child div.td{border-bottom:0}
	#contents.prd ul.tbl > li div.rowspan{position:absolute; z-index:1; top:0; left:0; width:100%; box-sizing:border-box; background-color:#eee}
	#contents.prd ul.tbl > li div.rowspan3{height:134px} /* 45 * 3 - 1 */
	#contents.prd ul.tbl > li div.colspan{position:absolute; z-index:1; top:0; left:0; height:100%; box-sizing:border-box}
	#contents.prd ul.tbl > li.tr div.colspan{background-color:#fff}
	#contents.prd ul.tbl > li.tr div.header div.colspan{background-color:#eee}
	#contents.prd ul.tbl > li.header div.colspan{background-color:#ab1500}
	#contents.prd ul.tbl > li div.colspan2{width:200%}
	#contents.prd ul.tbl > li div.colspan3{width:300%}
	#contents.prd ul.tbl > li div.colspan4{width:400%}
	#contents.prd ul.tbl > li div.colspan5{width:500%}
	#contents.prd ul.tbl > li p.txt{display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; height:100%}
	#contents.prd div.moreInfo{padding:0 10px; margin:10px 0 0 0; font-size:12px}
}
@media screen and (min-width:1281px){
	#contents.prd ul.tbl{flex-direction:column; border-top:3px solid #000; border-bottom:2px solid #410800; font-size:16px; text-align:center; font-weight:500}
	#contents.prd ul.tbl > li{flex-wrap:nowrap; width:100%}
	#contents.prd ul.tbl.tbl0 > li{justify-content:flex-end}
	#contents.prd ul.tbl.tbl1 > li{justify-content:space-between}
	#contents.prd ul.tbl > li div.th{position:relative; height:44px; border-right:1px solid rgba(0,0,0,.2); border-bottom:1px solid rgba(0,0,0,.2); background-color:#eee}
	#contents.prd ul.tbl > li.ln2 div.th{height:68px}
	#contents.prd ul.tbl > li.header div.th{border-right-color:rgba(0,0,0,.4); border-bottom-color:rgba(0,0,0,.4)}
	#contents.prd ul.tbl > li.header.last div.th{border-bottom-width:2px}
	#contents.prd ul.tbl.tbl0 > li div.th{width:16%}
	#contents.prd ul.tbl.tbl1 > li div.th{width:14%}
	#contents.prd ul.tbl > li.header div.th{background-color:#ab1500; color:#fff}
	#contents.prd ul.tbl.tbl0 > li div.th.header{width:10%}
	#contents.prd ul.tbl.tbl1 > li div.th.header{width:16%}
	#contents.prd ul.tbl > li div.th:last-child{border-right:0}
	#contents.prd ul.tbl > li:last-child div.th{border-bottom:0}
	#contents.prd ul.tbl > li div.td{position:relative; display:flex; height:44px; border-right:1px solid rgba(0,0,0,.2); border-bottom:1px solid rgba(0,0,0,.2)}
	#contents.prd ul.tbl > li.ln2 div.td{height:68px}
	#contents.prd ul.tbl.tbl0 > li div.td{width:16%}
	#contents.prd ul.tbl.tbl1 > li div.td{width:14%}
	#contents.prd ul.tbl > li div.td:last-child{border-right:0}
	#contents.prd ul.tbl > li:last-child div.td{border-bottom:0}
	#contents.prd ul.tbl > li div.rowspan{position:absolute; z-index:1; top:0; left:0; width:100%; box-sizing:border-box; background-color:#eee}
	#contents.prd ul.tbl > li div.rowspan3{height:134px} /* 45 * 3 - 1 */
	#contents.prd ul.tbl > li div.colspan{position:absolute; z-index:1; top:0; left:0; height:100%; box-sizing:border-box}
	#contents.prd ul.tbl > li.tr div.colspan{background-color:#fff}
	#contents.prd ul.tbl > li.tr div.header div.colspan{background-color:#eee}
	#contents.prd ul.tbl > li.header div.colspan{background-color:#ab1500}
	#contents.prd ul.tbl > li div.colspan2{width:200%}
	#contents.prd ul.tbl > li div.colspan3{width:300%}
	#contents.prd ul.tbl > li div.colspan4{width:400%}
	#contents.prd ul.tbl > li div.colspan5{width:500%}
	#contents.prd ul.tbl > li p.txt{display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; height:100%; word-break:keep-all}
	#contents.prd div.moreInfo{margin:20px 0 0 0; font-size:15px}
}

#contents.prd ul.truck{display:flex; font-weight:500}
#contents.prd ul.truck > li{position:relative; display:flex}
#contents.prd ul.truck > li div.title{position:relative; display:flex; align-items:center}
#contents.prd ul.truck > li div.th{position:relative; display:flex; align-items:center}
#contents.prd ul.truck > li div.td{position:relative; display:flex}
#contents.prd ul.truck > li div.td.capacity{flex-direction:column}
@media screen and (max-width:1280px){
	#contents.prd ul.truck{flex-direction:column; padding:0 10px; font-size:13px}
	#contents.prd ul.truck > li{flex-wrap:wrap; padding:10px; margin:0 0 10px 0; border-radius:3px; overflow:hidden; box-shadow:0 0 6px 1px rgba(0,0,0,.3)}
	#contents.prd ul.truck > li:last-child{margin:0}
	#contents.prd ul.truck > li.header{display:none}
	#contents.prd ul.truck > li div.td{flex-direction:column; padding:0 0 10px 0; margin:0 0 10px 0; border-bottom:1px solid #ddd}
	#contents.prd ul.truck > li div.td:before{display:block; width:100%; color:#777; font-size:10px}
	#contents.prd ul.truck > li div.title{width:100%; margin:0 0 10px 0; font-size:16px; font-weight:900; color:#ab1500}
	#contents.prd ul.truck > li.box div.title{flex-direction:column; align-items:flex-start; width:50%}
	#contents.prd ul.truck > li.box div.title:before{display:block; width:100%; color:#777; font-size:10px; font-weight:500}
	html.ko #contents.prd ul.truck > li.box div.title.av:before{content:'적용차량'}
	html.en #contents.prd ul.truck > li.box div.title.av:before{content:'Applied Vehicle'}
	html.ko #contents.prd ul.truck > li.box div.title.bsz:before{content:'박스 루베'}
	html.en #contents.prd ul.truck > li.box div.title.bsz:before{content:'Box Size'}
	#contents.prd ul.truck > li div.vw{width:calc(100% / 3)}
	html.ko #contents.prd ul.truck > li div.vw:before{content:'차량중량(kg)'}
	html.en #contents.prd ul.truck > li div.vw:before{content:'Vehicle weight(kg)'}
	#contents.prd ul.truck > li div.ml{width:calc(100% / 3)}
	html.ko #contents.prd ul.truck > li div.ml:before{content:'최대적재량(kg)'}
	html.en #contents.prd ul.truck > li div.ml:before{content:'Maximum load(kg)'}
	#contents.prd ul.truck > li div.gw{width:calc(100% / 3)}
	html.ko #contents.prd ul.truck > li div.gw:before{content:'차량총중량(kg)'}
	html.en #contents.prd ul.truck > li div.gw:before{content:'Gross weight(kg)'}
	#contents.prd ul.truck > li div.bs{width:100%; padding:0; border-bottom:0; margin:0 0 2px 0}
	#contents.prd ul.truck > li div.bs:before{font-size:12px}
	html.ko #contents.prd ul.truck > li div.bs:before{content:'차체제원(mm)'}
	html.en #contents.prd ul.truck > li div.bs:before{content:'Body specifications(mm)'}
	#contents.prd ul.truck > li div.ss{width:100%; padding:0; border-bottom:0; margin:0 0 2px 0}
	#contents.prd ul.truck > li div.bs:before{font-size:12px}
	html.ko #contents.prd ul.truck > li div.ss:before{content:'특장제원(mm)'}
	html.en #contents.prd ul.truck > li div.ss:before{content:'Special specifications(mm)'}
	#contents.prd ul.truck > li div.length{width:calc(100% / 3)}
	#contents.prd ul.truck > li.box div.length{padding:0; margin:0; border-bottom:0}
	html.ko #contents.prd ul.truck > li div.length:before{content:'길이'}
	html.ko #contents.prd ul.truck > li.box div.length:before{content:'길이(mm)'}
	html.en #contents.prd ul.truck > li div.length:before{content:'Length'}
	html.en #contents.prd ul.truck > li.box div.length:before{content:'Length(mm)'}
	#contents.prd ul.truck > li div.width{width:calc(100% / 3)}
	#contents.prd ul.truck > li.box div.width{padding:0; margin:0; border-bottom:0}
	html.ko #contents.prd ul.truck > li div.width:before{content:'너비'}
	html.ko #contents.prd ul.truck > li.box div.width:before{content:'너비(mm)'}
	html.en #contents.prd ul.truck > li div.width:before{content:'Width'}
	html.en #contents.prd ul.truck > li.box div.width:before{content:'Width(mm)'}
	#contents.prd ul.truck > li div.height{width:calc(100% / 3)}
	#contents.prd ul.truck > li.box div.height{padding:0; margin:0; border-bottom:0}
	html.ko #contents.prd ul.truck > li div.height:before{content:'높이'}
	html.ko #contents.prd ul.truck > li.box div.height:before{content:'높이(mm)'}
	html.en #contents.prd ul.truck > li div.height:before{content:'Height'}
	html.en #contents.prd ul.truck > li.box div.height:before{content:'Height(mm)'}
	#contents.prd ul.truck > li div.fu{width:50%}
	html.ko #contents.prd ul.truck > li div.fu:before{content:'샤용연료'}
	html.en #contents.prd ul.truck > li div.fu:before{content:'Fuel used'}
	#contents.prd ul.truck > li div.om{width:50%}
	html.ko #contents.prd ul.truck > li div.om:before{content:'작동방식'}
	html.en #contents.prd ul.truck > li div.om:before{content:'Operation method'}
	#contents.prd ul.truck > li div.dm{width:50%; padding:0; border-bottom:0; margin:0}
	html.ko #contents.prd ul.truck > li div.dm:before{content:'배출방식'}
	html.en #contents.prd ul.truck > li div.dm:before{content:'Discharge method'}
	#contents.prd ul.truck > li div.o{width:50%; padding:0; border-bottom:0; margin:0}
	html.ko #contents.prd ul.truck > li div.o:before{content:'기타'}
	html.en #contents.prd ul.truck > li div.o:before{content:'Others'}
}
@media screen and (min-width:1281px){
	#contents.prd ul.truck{flex-wrap:nowrap; justify-content:flex-end; border-top:3px solid #000; border-bottom:2px solid #410800; font-size:16px; text-align:center}
	#contents.prd ul.truck > li{flex-direction:column}
	#contents.prd ul.truck > li.header{width:20%}
	#contents.prd ul.truck > li.header.boxHeader{width:16%}
	#contents.prd ul.truck > li.truck{width:16%}
	#contents.prd ul.truck > li.box{width:14%}
	#contents.prd ul.truck > li div.title{justify-content:center; height:44px; border-right:1px solid rgba(0,0,0,.2); border-bottom:2px solid rgba(0,0,0,.6); background-color:#ab1500; color:#fff}
	#contents.prd ul.truck > li div.title.av{border-bottom-width:1px}
	#contents.prd ul.truck > li:last-child div.title{border-right:0}
	#contents.prd ul.truck > li div.title div.colspan{position:absolute; z-index:1; top:0; bottom:0; left:0; display:flex; justify-content:center; align-items:center; background-color:#ab1500; color:#fff}
	#contents.prd ul.truck > li div.title div.colspan.colspan2{width:calc(200% + 1px)}
	#contents.prd ul.truck > li div.title div.colspan.colspan3{width:calc(300% + 2px)}
	#contents.prd ul.truck > li div.th{flex-wrap:nowrap; justify-content:center; height:44px; border-right:1px solid rgba(0,0,0,.2); border-bottom:1px solid rgba(0,0,0,.2); background-color:#eee}
	#contents.prd ul.truck > li div.th:last-child{border-bottom:0}
	#contents.prd ul.truck > li:last-child div.th{border-right:0}
	#contents.prd ul.truck > li div.th div.col{position:relative; display:flex; justify-content:center; align-items:center; width:50%; height:100%}
	#contents.prd ul.truck > li div.th div.rowspan{position:absolute; z-index:1; top:0; right:0; left:0; display:flex; justify-content:center; align-items:center; border-right:1px solid rgba(0,0,0,.2); background-color:#eee}
	#contents.prd ul.truck > li div.th div.rowspan3{height:134px}
	#contents.prd ul.truck > li div.td{align-items:center; justify-content:center; height:44px; border-right:1px solid rgba(0,0,0,.2); border-bottom:1px solid rgba(0,0,0,.2)}
	#contents.prd ul.truck > li div.td:last-child{border-bottom:0}
	#contents.prd ul.truck > li:last-child div.td{border-right:0}
	#contents.prd ul.truck > li div.td div.colspan{position:absolute; z-index:1; top:0; bottom:0; left:0; display:flex; justify-content:center; align-items:center; background-color:#fff}
	#contents.prd ul.truck > li div.td div.colspan5{width:calc(500% + 4px)}
	#contents.prd ul.truck > li div.td p.txt span{display:block}
	#contents.prd ul.truck > li div.om{height:68px}
	#contents.prd ul.truck > li div.capacity{height:116px}
	#contents.prd ul.truck > li div.bs, #contents.prd ul.truck > li div.ss{display:none}
}

#contents.prd div.imgList{position:relative; overflow:hidden}
#contents.prd div.imgList ul.img{position:relative; z-index:1; display:flex; flex-wrap:wrap}
#contents.prd div.imgList ul.img > li{position:relative; cursor:pointer}
#contents.prd div.imgList ul.img > li div.box{position:relative; width:100%; background-size:cover; background-position:50% 50%; background-repeat:no-repeat}
#contents.prd div.imgList ul.img > li div.box:before{content:''; display:block; padding:75% 0 0 0}
#contents.prd div.imgList ul.img > li div.box.hiab{aspect-ratio:1400/580}
#contents.prd div.imgList ul.img > li div.box.hiab:before{display:none}
#contents.prd div.imgList ul.img > li div.txt{position:absolute; bottom:0; right:0; background-color:rgba(0,0,0,.5); color:#fff; font-weight:500}
#contents.prd div.imgList ul.img > li img{display:none}
@media screen and (max-width:320px){
	#contents.prd div.imgList ul.img > li{width:50%}
	#contents.prd div.imgList ul.img > li:nth-child(2n):before{display:none}
}
@media screen and (min-width:321px) and (max-width:428px){
	#contents.prd div.imgList ul.img > li{width:50%}
	#contents.prd div.imgList ul.img > li:nth-child(2n):before{display:none}
}
@media screen and (min-width:429px) and (max-width:767px){
	#contents.prd div.imgList ul.img > li{width:calc(100% / 3)}
	#contents.prd div.imgList ul.img > li:nth-child(3n):before{display:none}
}
@media screen and (min-width:768px) and (max-width:1280px){
	#contents.prd div.imgList ul.img > li{width:25%}
	#contents.prd div.imgList ul.img > li:nth-child(4n):before{display:none}
}
@media screen and (max-width:1280px){
	#contents.prd div.imgList{padding:20px 0; margin:26px 0 0 0}
	#contents.prd div.imgList ul.img{border-top:1px solid rgba(0,0,0,.1)}
	#contents.prd div.imgList ul.img > li{transition:all .8s}
	#contents.prd div.imgList ul.img > li:hover{background-color:#eee}
	#contents.prd div.imgList ul.img > li:before{content:''; position:absolute; top:0; right:0; bottom:1px; width:1px; background-color:rgba(0,0,0,.1)}
	#contents.prd div.imgList ul.img > li:after{content:''; position:absolute; right:0; bottom:0; left:0; height:1px; background-color:rgba(0,0,0,.1)}
	#contents.prd div.imgList ul.img > li div.txt{padding:8px; font-size:12px}
}
@media screen and (min-width:1281px){
	#contents.prd div.imgList{padding:20px 0; margin:26px 0 0 0}
	#contents.prd div.imgList ul.img{border-top:1px solid rgba(0,0,0,.1)}
	#contents.prd div.imgList ul.img > li{width:25%; transition:all .8s}
	#contents.prd div.imgList ul.img > li:hover{background-color:#eee}
	#contents.prd div.imgList ul.img > li:before{content:''; position:absolute; top:0; right:0; bottom:1px; width:1px; background-color:rgba(0,0,0,.1)}
	#contents.prd div.imgList ul.img > li:nth-child(4n):before{display:none}
	#contents.prd div.imgList ul.img > li:after{content:''; position:absolute; right:0; bottom:0; left:0; height:1px; background-color:rgba(0,0,0,.1)}
	#contents.prd div.imgList ul.img > li div.txt{padding:10px; font-size:18px}
}

#swiperExpand ul.swiperExpand > li.swiper-slide{background-color:rgba(255,255,255,.75)}

#contents.prd div.videoW{position:relative}
#contents.prd div.videoW:before{content:''; display:block; padding:0 0 56.25% 0}
#contents.prd div.videoW div.video{position:absolute; top:0; right:0; bottom:0; left:0}
#contents.prd div.video iframe.ytb{display:block; width:100%; height:100%}
@media screen and (max-width:1280px){
	#contents.prd div.videoW{margin:40px 0 0 0}
}
@media screen and (min-width:1281px){
	#contents.prd div.videoW{margin:80px 0 0 0}
}

#contents.prd ul.detail{position:relative; display:flex; flex-wrap:wrap}
#contents.prd ul.detail > li{box-sizing:border-box}
#contents.prd ul.detail > li div.img{position:relative; background-color:#000; overflow:hidden; cursor:pointer}
#contents.prd ul.detail > li div.img:before{content:''; display:block; padding:50% 0}
#contents.prd ul.detail > li div.img img{position:absolute; max-width:100%; max-height:100%; left:-100%; right:-100%; top:-100%; bottom:-100%; margin:auto; transition:all 1s}
#contents.prd ul.detail > li div.box:hover img{transform:scale(1.1)}
#contents.prd ul.detail > li div.txt{background-image:linear-gradient(45deg,#002c51,#3c0000); color:#fff; text-align:center}
@media screen and (max-width:1280px){
	#contents.prd ul.detail{padding:0 5px}
	#contents.prd ul.detail > li{width:calc(100% / 3); padding:0 5px; margin:0 0 10px 0}
	#contents.prd ul.detail > li:nth-child(3n+1):nth-last-child(-n+3), #contents.prd ul.detail > li:nth-child(3n+1):nth-last-child(-n+3) ~ li{margin-bottom:0}
	#contents.prd ul.detail > li div.txt{padding:12px 0; font-size:12px; line-height:22px}
}
@media screen and (min-width:1281px){
	#contents.prd ul.detail{left:-10px; width:calc(100% + 20px)}
	#contents.prd ul.detail > li{width:20%; padding:0 10px}
	#contents.prd ul.detail > li div.txt{padding:12px 0; font-size:16px; line-height:22px}
}
/* 제품정보(prd) */

/* 인사말(about) */
#contents.about{position:relative}
#contents.about div.greet{position:relative; background-color:#f3f3f3}
#contents.about div.greet div.ico{position:relative}
#contents.about div.greet div.ico svg{display:block; width:100%; height:100%}
#contents.about div.greet h3{font-weight:900}
#contents.about div.greet p{font-family:'Nanum Gothic'}
#contents.about div.greet img.leaf{position:absolute; right:0}
#contents.about section.history{background-color:#F9F9F9}
#contents.about section.history div.overlay{position:absolute; top:0; right:0; bottom:0; left:0; opacity:0.1; background-attachment:fixed; background-position:50% 50%; background-repeat:no-repeat; background-size:cover}
#contents.about section.history div.inner{position:relative}
@media screen and (max-width:1280px){
	#contents.about div.greet{padding:12px 10px; font-size:13px}
	#contents.about div.greet div.ico{width:40px; height:40px}
	#contents.about div.greet h3{margin:0 0 12px 0; font-size:18px}
	#contents.about div.greet p.mb{margin:0 0 10px 0}
	#contents.about div.greet img.leaf{bottom:0; max-width:12%}
}
@media screen and (min-width:1281px){
	#contents.about div.greet{padding:50px 60px; font-size:17px}
	#contents.about div.greet div.ico{width:60px; height:60px}
	#contents.about div.greet h3{margin:0 0 32px 0; font-size:26px}
	#contents.about div.greet p.mb{margin:0 0 16px 0}
	#contents.about div.greet p.pr{padding:0 168px 0 0}
	#contents.about div.greet img.leaf{bottom:6%; max-width:20%}
}


#contents.about section.video{padding-top: 0 !important}
#contents.about div.video{text-align: center}
#contents.about div.video iframe{width: 100%; aspect-ratio: 1.777 / 1}


#contents.about ol.history{position:relative}
#contents.about ol.history li.year{position:relative}
#contents.about ol.history li.year:last-child{margin:0}
#contents.about ol.history li.year div.img img{display:block; max-width:100%}
#contents.about ol.history li.year ol.month > li{position:relative}
#contents.about ol.history li.year ol.month > li:last-child{margin:0}
#contents.about ol.history strong.year{font-weight:900; color:#000}
#contents.about ol.history strong.month{font-weight:900; color:#db3e28}
#contents.about ol.history div.do{font-weight:300; color:#000}
#contents.about ol.history p.do{position:relative}
#contents.about ol.history p.do:after{content:''; position:absolute; background-color:#423268}
#contents.about ol.history p.do strong{font-weight:500; color:#000}
#contents.about ol.history p.do img{display:block; max-width:100%}
@media screen and (max-width:1280px){
	#contents.about ol.history{padding:0 0 0 80px}
	#contents.about ol.history:before{content:''; position:absolute; top:0; bottom:0; left:80px; width:2px; background-color:#ccc}
	#contents.about ol.history li.year{padding:0 0 0 30px; margin-bottom:40px}
	#contents.about ol.history li.year:before{content:''; position:absolute; top:10px; left:2px; width:6px; height:6px; border:2px solid #ccc; border-radius:50%; margin-left:-6px; background-color:#fff}
	#contents.about ol.history strong.year{position:absolute; top:0; left:-80px; font-size:24px; line-height:30px}
	#contents.about ol.history li.year div.img{position:relative; padding:0 0 0 10px; margin:10px 0 0 0}
	#contents.about ol.history li.year ol.month > li{margin:0 0 12px 0}
	#contents.about ol.history li.year ol.month{padding-left:10px}
	#contents.about ol.history li.year ol.month > li{padding-left:10px}
	#contents.about ol.history strong.month{position:absolute; top:0; left:-27px; font-size:16px; line-height:30px}
	#contents.about ol.history div.do{min-height:30px; line-height:30px; font-size:13px}
	html.ko #contents.about ol.history div.do{padding:0 0 0 8px}
	html.en #contents.about ol.history div.do{padding:0 0 0 56px}
	#contents.about ol.history li.year p.do{padding:0 0 0 10px}
	#contents.about ol.history li.year p.do:after{top:14px; left:0; width:2px; height:2px}
}
@media screen and (min-width:1281px){
	#contents.about ol.history:before{content:''; position:absolute; top:0; bottom:0; left:50%; width:2px; margin-left:-1px; background-color:#ccc}
	#contents.about ol.history li.year{margin-bottom:100px}
	#contents.about ol.history li.year:before{content:''; position:absolute; top:13px; left:50%; width:8px; height:8px; border:2px solid #ccc; border-radius:50%; margin-left:-6px; background-color:#fff}
	#contents.about ol.history li.year{padding-left:50%}
	#contents.about ol.history strong.year{position:absolute; top:0; left:420px; font-size:60px; line-height:38px}
	#contents.about ol.history li.year div.img{position:absolute; top:70px}
	#contents.about ol.history li.year div.img{left:214px}
	#contents.about ol.history li.year ol.month{padding-left:30px}
	#contents.about ol.history li.year ol.month > li{margin:0 0 20px 0}
	html.ko #contents.about ol.history li.year ol.month > li{padding-left:90px}
	html.en #contents.about ol.history li.year ol.month > li{padding-left:180px}
	#contents.about ol.history strong.month{position:absolute; top:0; left:0; font-size:32px; line-height:38px}
	#contents.about ol.history div.do{min-height:38px; line-height:38px; font-size:18px}
	#contents.about ol.history li.year p.do{padding:0 0 0 10px}
	#contents.about ol.history li.year p.do:after{top:17px; left:0; width:4px; height:4px}
}
/* 인사말(about) */

/* 회사개요(overview) */
#contents.overview{position:relative}
#contents.overview section.org{background-color:#eee}
#contents.overview div.tbl{display:flex}
#contents.overview table._tbl th{font-weight:500}
@media screen and (max-width:1280px){
	#contents.overview div.tbl{flex-wrap:wrap}
	#contents.overview div.tblW{width:100%; box-sizing:border-box}
	#contents.overview table._tbl{width:100%; border-top:2px solid #ab1500; border-bottom:2px solid #ab1500}
	#contents.overview table._tbl{font-size:13px}
	#contents.overview table._tbl th{width:25%; padding:10px; border-bottom:1px solid #ddd; background-color:#f5f5f5}
	#contents.overview table._tbl tr:last-child th{border-bottom:0}
	#contents.overview table._tbl td{width:75%; padding:10px 0 10px 12px; border-bottom:1px solid #ddd}
	#contents.overview table._tbl tr:last-child td{border-bottom:0}
}
@media screen and (min-width:1281px){
	#contents.overview div.tbl{flex-wrap:nowrap}
	#contents.overview div.tblW{width:50%; padding:0 30px 0 0; box-sizing:border-box}
	#contents.overview table._tbl{width:100%; border-top:2px solid #ab1500; border-bottom:2px solid #ab1500}
	#contents.overview table._tbl{font-size:16px}
	#contents.overview table._tbl th{width:25%; padding:12px; border-bottom:1px solid #ddd; background-color:#f5f5f5}
	#contents.overview table._tbl tr:last-child th{border-bottom:0}
	#contents.overview table._tbl td{width:75%; padding:12px 0 12px 20px; border-bottom:1px solid #ddd}
	#contents.overview table._tbl tr:last-child td{border-bottom:0}
}

#contents.overview div.imgW{position:relative}
#contents.overview div.logo{background-position:50% 50%; background-repeat:no-repeat; background-size:cover}
@media screen and (max-width:1280px){
	#contents.overview div.imgW{width:100%; padding:30px 0 0 0}
	#contents.overview div.logo{width:100%}
	#contents.overview div.logo:before{content:''; display:block; padding:30% 0}
}
@media screen and (min-width:1281px){
	#contents.overview div.imgW{width:50%; padding:0 0 0 30px; box-sizing:border-box}
	#contents.overview div.logo{height:100%}
}

#contents.overview section.org{background-color:#005ca9}
#contents.overview section.org div.overlay{position:absolute; top:0; right:0; bottom:0; left:0; opacity:0.1; background-position:50% 50%; background-repeat:no-repeat; background-size:cover}
#contents.overview section.org div.subHeader h2{color:#fff}
#contents.overview section.org div.subHeader p.sub{color:#ffaea3}
#contents.overview section.org div.subHeader div.desc{color:rgba(255,255,255,.6)}
#contents.overview div.inner{position:relative}
#contents.overview div.ceo{position:relative; background-image:linear-gradient(45deg,#002c51,#3c0000); color:#fff; font-weight:500; text-align:center}
#contents.overview ul.org{position:relative; display:flex}
#contents.overview ul.org > li{position:relative; box-sizing:border-box; text-align:center}
#contents.overview ul.org > li div.box{background-color:#d1eaff; font-weight:500}
#contents.overview ul.org > li div.title{background-color:#002c51; color:#fff}
#contents.overview ul.org > li div.sub{color:#000}
@media screen and (max-width:1280px){
	#contents.overview div.ceo{display:flex; justify-content:center; align-items:center; width:100%; height:56px; margin:0 auto 20px auto; font-size:15px}
	#contents.overview ul.org{left:-5px; flex-wrap:wrap; width:calc(100% + 10px)}
	#contents.overview ul.org > li{width:50%; padding:0 5px; margin:0 0 10px 0}
	#contents.overview ul.org > li:nth-child(2n+1):nth-last-child(-n+2), #contents.overview ul.org > li:nth-child(2n+1):nth-last-child(-n+2) ~ li{margin-bottom:0}
	#contents.overview ul.org > li div.box{height:100%; box-sizing:border-box}
	#contents.overview ul.org > li div.title{padding:12px 0; font-size:14px}
	#contents.overview ul.org > li div.sub{font-size:13px}
}
@media screen and (min-width:1281px){
	#contents.overview div.ceo{width:25%; padding:15px 0; margin:0 auto 40px auto; font-size:24px}
	#contents.overview div.ceo:after{content:''; position:absolute; top:100%; left:50%; width:4px; height:40px; margin:0 0 0 -2px; background-color:rgba(255,255,255,.8)}
	#contents.overview ul.org{left:-15px; flex-wrap:nowrap; width:calc(100% + 30px)}
	#contents.overview ul.org:before{content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:75%; height:4px; background-color:rgba(255,255,255,.8)}
	#contents.overview ul.org > li{width:25%; padding:40px 15px 0 15px}
	#contents.overview ul.org > li:before{content:''; position:absolute; top:0; left:50%; width:4px; height:40px; margin:0 0 0 -2px; background-color:rgba(255,255,255,.8)}
	#contents.overview ul.org > li div.box{height:100%; box-sizing:border-box}
	#contents.overview ul.org > li div.title{padding:15px 0; font-size:23px}
	#contents.overview ul.org > li div.sub{padding:20px 0; font-size:17px}
}
/* 회사개요(overview) */

/* 인증서(cert) */
#contents ul.cert{position:relative; display:flex; flex-wrap:wrap}
#contents ul.cert > li{width:10%; box-sizing:border-box}
#contents ul.cert > li div.box{display:flex; justify-content:center; align-items:center; width:100%; height:100%; cursor:pointer; box-shadow:0 0 8px 2px rgba(0,0,0,.2)}
#contents ul.cert > li img{display:block; width:100%; margin:auto}
@media screen and (max-width:320px){
	#contents ul.cert > li{width:50%}
	#contents ul.cert > li:nth-child(2n+1):nth-last-child(-n+2), #contents ul.cert > li:nth-child(2n+1):nth-last-child(-n+2) ~ li{margin-bottom:0}
}
@media screen and (min-width:321px) and (max-width:360px){
	#contents ul.cert > li{width:50%}
	#contents ul.cert > li:nth-child(2n+1):nth-last-child(-n+2), #contents ul.cert > li:nth-child(2n+1):nth-last-child(-n+2) ~ li{margin-bottom:0}
}
@media screen and (min-width:361px) and (max-width:383px){
	#contents ul.cert > li{width:50%}
	#contents ul.cert > li:nth-child(2n+1):nth-last-child(-n+2), #contents ul.cert > li:nth-child(2n+1):nth-last-child(-n+2) ~ li{margin-bottom:0}
}
@media screen and (min-width:384px) and (max-width:428px){
	#contents ul.cert > li{width:calc(100% / 3)}
	#contents ul.cert > li:nth-child(3n+1):nth-last-child(-n+3), #contents ul.cert > li:nth-child(3n+1):nth-last-child(-n+3) ~ li{margin-bottom:0}
}
@media screen and (min-width:429px) and (max-width:767px){
	#contents ul.cert > li{width:calc(100% / 3)}
	#contents ul.cert > li:nth-child(3n+1):nth-last-child(-n+3), #contents ul.cert > li:nth-child(3n+1):nth-last-child(-n+3) ~ li{margin-bottom:0}
}
@media screen and (min-width:768px) and (max-width:1024px){
	#contents ul.cert > li{width:25%}
	#contents ul.cert > li:nth-child(4n+1):nth-last-child(-n+4), #contents ul.cert > li:nth-child(4n+1):nth-last-child(-n+4) ~ li{margin-bottom:0}
}
@media screen and (min-width:1025px) and (max-width:1280px){
	#contents ul.cert > li{width:20%}
	#contents ul.cert > li:nth-child(5n+1):nth-last-child(-n+5), #contents ul.cert > li:nth-child(5n+1):nth-last-child(-n+5) ~ li{margin-bottom:0}
}
@media screen and (max-width:1280px){
	#contents ul.cert{left:-5px; width:calc(100% + 10px)}
	#contents ul.cert > li{padding:0 5px; margin:0 0 10px 0}
}
@media screen and (min-width:1281px){
	#contents ul.cert{left:-10px; width:calc(100% + 20px)}
	#contents ul.cert > li{width:20%; padding:0 10px; margin:0 0 20px 0}
	#contents ul.cert > li:nth-child(5n+1):nth-last-child(-n+5), #contents ul.cert > li:nth-child(5n+1):nth-last-child(-n+5) ~ li{margin-bottom:0}
}
/* 인증서(cert) */

/* 생산공정(process) */
ol.process{display:flex; flex-wrap:wrap; flex-direction:row; justify-content:flex-start}
ol.process > li{position:relative; text-align:center}
ol.process > li > div.ico{position:relative; border-radius:50%; background-color:#fffcfc; box-shadow:1px 1px 4px 1px rgba(0,0,0,.25); transition:all .6s}
ol.process.prd0 > li > div.ico{border-radius:0; background-color:#fff; box-shadow:none}
ol.process > li > div.ico:before{content:''; display:block; padding:50% 0}
ol.process.prd0 > li > div.ico:before{display:none}
ol.process > li:hover > div.ico{background-color:#ce3f29}
ol.process.prd0 > li:hover > div.ico{background-color:#fff}
ol.process > li > div.ico div.svg{position:absolute; top:26%; right:26%; bottom:26%; left:26%; z-index:1}
ol.process > li > div.ico svg{display:block; width:100%; height:100%; fill:#ce3f29; color:#ce3f29; transition:all .6s}
ol.process > li > div.ico:after{content:''; position:absolute; top:5%; right:5%; width:20%; height:20%; border-radius:50%; background-color:#ce3f29; transition:all .6s}
ol.process.prd0 > li > div.ico:after{display:none}
ol.process > li:hover > div.ico:after{opacity:0.4}
ol.process > li:hover > div.ico svg{fill:#fff; color:#fff}
ol.process.prd0 > li > div.ico img{display:block; max-width:100%}
ol.process > li span.no{position:relative; display:block; font-weight:900}
ol.process > li > div.line{position:relative; background-color:#ccc}
ol.process > li div.line:after{content:''; position:absolute; top:50%; left:50%; border-radius:50%; background-color:#ce3f29; transition:all .6s}
ol.process > li:hover div.line:after{transform:scale(1.4)}
@media screen and (max-width:1280px){
	ol.process > li{padding:1.6em 0 0 0; box-sizing:border-box}
	ol.process > li > div.ico{width:64%; margin:0 auto 0.4em auto}
	ol.process > li span.no{position:relative; display:block; height:1.6em; padding:0 0 0.26em 0; line-height:1.6em; font-weight:900; font-size:1.8em}
	ol.process > li > div.line{height:2px}
	ol.process > li > div.line:after{width:10px; height:10px; margin:-5px 0 0 -5px}
	ol.process > li h3.title{padding:0.6em 0.4em 0 0.4em; font-weight:600; font-size:1.4em}
	ol.process.prd0 > li h3.title{font-size:1.2em}
	html.en #contents.process ol.process > li h3.title{font-size:1.2em}
	ol.process > li div.desc{padding:0.4em 1em 0 1em; font-weight:300; font-size:1em}
}
@media screen and (max-width:320px){
	/* iPhone SE */
	ol.process > li{width:50%}
	ol.process > li:nth-child(1),ol.process > li:nth-child(2){padding:0}
}
@media screen and (min-width:321px) and (max-width:360px){
	/* Samsung S20 포함한 대부분의 갤럭시 */
	ol.process > li{width:50%}
	ol.process > li:nth-child(1),ol.process > li:nth-child(2){padding:0}
}
@media screen and (min-width:361px) and (max-width:428px){
	/* 고급 스마트폰 */
	ol.process > li{width:50%}
	ol.process > li:nth-child(1),ol.process > li:nth-child(2){padding:0}
}
@media screen and (min-width:429px) and (max-width:1024px){
	/* 태블릿(Portrait) */
	ol.process > li{width:calc(100% / 3)}
	ol.process > li:nth-child(1),ol.process > li:nth-child(2),ol.process > li:nth-child(3){padding:0}
}
@media screen and (min-width:1025px) and (max-width:1280px){
	/* 태블릿(Landscape) */
	ol.process > li{width:25%}
	ol.process > li:nth-child(1),ol.process > li:nth-child(2),#contents.prd ol.process > li:nth-child(3),#contents.prd ol.process > li:nth-child(4){padding:0}
}
@media screen and (min-width:1281px){
	ol.process > li{width:25%; margin:0 0 5em 0}
	ol.process.prd0 > li{width:calc(100% / 3)}
	ol.process > li:nth-child(4n+1):nth-last-child(-n+4), ol.process > li:nth-child(4n+1):nth-last-child(-n+4) ~ li{margin-bottom:0}
	ol.process.prd0 > li:nth-child(3n+1):nth-last-child(-n+3), ol.process.prd0 > li:nth-child(3n+1):nth-last-child(-n+3) ~ li{margin-bottom:0}
	ol.process > li > div.ico{width:42%; margin:0 auto 0.4em auto}
	ol.process.prd0 > li > div.ico{width:100%}
	ol.process > li span.no{height:1.6em; padding:0 0 0.26em 0; line-height:1.6em; font-size:2em}
	ol.process > li div.line{height:4px}
	ol.process > li div.line:after{width:16px; height:16px; margin:-8px 0 0 -8px}
	ol.process > li h3.title{padding:0.6em 0 0 0; font-weight:600; font-size:1.5em}
	ol.process > li div.desc{padding:0.4em 1em 0 1em; font-weight:300; font-size:1em}
}
@media screen and (min-width:1281px) and (max-width:1399px){
	#contents.process{font-size:12px}
}
@media screen and (min-width:1400px) and (max-width:1599px){
	#contents.process{font-size:13px}
}
@media screen and (min-width:1600px) and (max-width:1679px){
	#contents.process{font-size:14px}
}
@media screen and (min-width:1680px) and (max-width:1919px){
	#contents.process{font-size:15px}
}
@media screen and (min-width:1920px){
	#contents.process{font-size:16px}
}
/* 생산공정(process) */

/* 오시는길(contact) */
#contents.contact p.subTitle{color:#db3e28; font-weight:500}
#contents.contact ul.infoList > li:hover svg{fill:#db3e28}
#contents.contact ul.infoList > li div.ico:after{background-color:#db3e28}
/* 오시는길(contact) */

/* 갤러리(project) */
@media screen and (max-width:1280px){
	#contents.projectList{padding:40px 10px}
}
@media screen and (min-width:1281px){
	#contents.projectList{padding:100px 0}
	#contents.projectView{padding:100px 0}
	#contents.projectWrite{padding:100px 0}
}
/* 갤러리(project) */

/* 게시물(community) */
@media screen and (max-width:1280px){
	#contents.communityList{padding:40px 10px}
	#contents.communityView{padding:40px 10px}
}
@media screen and (min-width:1281px){
	#contents.communityList{padding:60px 0}
	#contents.communityView{padding:60px 0}
}
/* 게시물(community) */

/* 문의하기(request) */
@media screen and (max-width:1280px){
	#contents.request{padding:40px 10px}
}
@media screen and (min-width:1281px){
	#contents.request{padding:60px 0}
}
/* 문의하기(request) */