@charset "utf-8";

/* sub header */
#sub #header .sitelogo a {width:262px; height:46px; background-image:url('../img/layout/logo-w.png'); background-repeat:no-repeat; background-size:cover;}
#sub #header .sitelogo a img {display:none;}
#sub #gnb>ul>li>a {color:#fff;}
#sub #gnb>ul>li>a:after {background:#fff;}
#sub .sitemap-btn span.side {background:#fff;}
#sub .sitemap-btn span.middle {background:#fff;}

#sub #header.active {background:#fff;}
#sub #header.active .sitelogo a {background-image:url('../img/layout/logo.png');}
#sub #header.active #gnb>ul>li>a {color:#121212;}
#sub #header.active #gnb>ul>li>a:after {background:#0f6bb0;}
#sub #header.active .sitemap-btn span.side {background:#121212;}
#sub #header.active .sitemap-btn span.middle {background:#0f6bb0;}
/* sub-visual */
.sub-visual {padding-top:120px; padding-bottom:35px; height:500px; background-repeat:no-repeat; background-size:cover; background-position:center center;}
.sub-visual .title {display:flex; align-items:center; justify-content:center; text-align:center; height:100%;}
.sub-visual .title h2 {font-size:63px; line-height:1.2em; font-weight:600; font-family:'Paperlogy'; color:#fff; position:relative; top:100px; opacity:0; filter:blur(15px); transition:all 1s;}
.sub-visual.on .title h2 {opacity:1; top:0; filter:blur(0);}
/* sub common */
#lnb {border-bottom:1px solid #ddd;}
#lnb ul {display:flex;}
#lnb ul li {width:100%; position:relative;}
#lnb ul li:after {content:''; width:1px; height:20px; background:#ddd; position:absolute; top:50%; margin-top:-10px; right:0;}
#lnb ul li:last-child:after {display:none;}
#lnb ul li a {font-size:18px; line-height:80px; color:#666; position:relative; text-align:center;}
#lnb ul li.active a {color:#0f6bb0; font-weight:600;}
#lnb ul li a:hover {color:#0f6bb0;}
#lnb ul li a:after {content:''; width:0; left:50%; bottom:-1px; background:#0f6bb0; position:absolute; height:3px; transition:all 0.4s;}
#lnb ul li.active a:after {width:100%; left:0;}
#lnb ul li a:hover:after {width:100%; left:0;}

.sub-title {margin:140px 0 90px; text-align:center;}
.sub-title h3 {font-size:56px; line-height:1.2em; font-weight:600; color:#121212; font-family:'Paperlogy'; position:relative; padding-top:28px; top:100px; opacity:0; filter:blur(15px); transition:all 1s;}
.sub-title h3:before {content:''; width:8px; height:8px; background:#0f6bb0; position:absolute; top:0; left:50%; margin-left:-4px; border-radius:50%; opacity:0; transition:all 1s;}

.sub-title.on h3 {opacity:1; top:0; filter:blur(0);}
.sub-title.on h3:before {opacity:1; transition-delay:.8s;}

.real-cont {padding:0 0 180px;}
/* sub 01 */
.greeting .img-box {position:relative; margin-bottom:90px;}
.greeting .img-box img {border-radius:10px; overflow:hidden;}
.greeting .img-box .img {position:absolute; right:80px; bottom:-160px;}
.greeting .txt-box {padding:0 60px;}
.greeting .txt-box h4 {font-size:40px; line-height:1.3em; color:#121212; font-weight:600; margin-bottom:40px;}
.greeting .txt-box h4 strong {color:#0f6bb0;}
.greeting .txt-box p {font-size:20px; line-height:1.6em; color:#666; margin-bottom:34px;}
.greeting .txt-box p:last-child {margin-bottom:0;}
/* sub 02 */
.list-category {margin-bottom:66px;}
.list-category ul {display:flex; justify-content:center;}
.list-category ul li {padding:0 33px; position:relative;}
.list-category ul li:after {content:''; width:6px; height:6px; background:#ddd; position:absolute; top:50%; margin-top:-3px; right:-3px; border-radius:50%;}
.list-category ul li:last-child:after {display:none;}
.list-category ul li a {font-size:18px; line-height:1.6em; color:#666; transition:all 0.4s;}
.list-category ul li a#bo_cate_on {color:#0f6bb0; font-weight:700;}
.list-category ul li a:hover {color:#0f6bb0;}

.product-list .notada {text-align:center; font-size:20px; line-height:1.5em; color:#121212; padding:60px 0; border-top:1px solid #121212; border-bottom:1px solid #ddd; width:100%;}
.product-list .col {display:flex; margin:0 -20px; flex-wrap:wrap;}
.product-list .col .row {width:25%; padding:0 20px; margin-bottom:76px;}
.product-list .inner {display:block;}
.product-list .inner .thumb {margin-bottom:24px; border-radius:10px; overflow:hidden; position:relative;}
.product-list .inner .thumb:before,
.product-list .inner .thumb:after {content:''; width:100%; height:100%; position:absolute; top:0; left:0; border-radius:10px; z-index:11; transition:all 0.4s;}
.product-list .inner .thumb:before {border:1px solid #ddd;}
.product-list .inner .thumb:after {border:2px solid #0f6bb0; opacity:0;}
.product-list .inner:hover .thumb:after {opacity:1;}
.product-list .inner .thumb .pic {position:relative; height:0; padding-bottom:84.85%; overflow:hidden; transition:all 1s;}
.product-list .inner:hover .thumb .pic {transform:scale(1.08);}
.product-list .inner .thumb .pic img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100% !important; height:100% !important; max-width:100%; min-height:100%; object-fit:cover; transition:0.3s;}
.product-list .inner .txt-box {padding:0 10px;}
.product-list .inner .txt-box .category {font-size:16px; line-height:1.8em; color:#999; margin-bottom:2px; transition:all 0.4s;}
.product-list .inner:hover .txt-box .category {color:#279ccf;}
.product-list .inner .txt-box .tit {font-size:20px; line-height:1.6em; color:#333; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; position:relative; transition:all 0.4s;}
.product-list .inner:hover .txt-box .tit {color:#0f6bb0;}
.product-list .inner .txt-box .tit:after {content:''; width:0; height:1px; background:#0f6bb0; position:absolute; left:0; bottom:4px; transition:all 0.4s;}
.product-list .inner:hover .txt-box .tit:after {width:100%;}

.product-view .col {margin-bottom:60px; display:flex; align-items:center;}
.product-view .col .img-box {width:100%; max-width:670px;}
.product-view .col .img-box .pic {position:relative; height:0; padding-bottom:62.39%; overflow:hidden; transition:all 0.6s; border-radius:10px; border:1px solid #ddd;}
.product-view .col .img-box .pic img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100% !important; height:100% !important; max-width:100%; min-height:100%; object-fit:cover; transition:0.3s;}
.product-view .col .txt-box {width:1%; flex:1 1 auto; padding-left:100px;}
.product-view .col .txt-box .tit {margin-bottom:40px;}
.product-view .col .txt-box .tit p {font-size:16px; line-height:1.8em; color:#146eb2; font-weight:600; margin-bottom:4px;}
.product-view .col .txt-box .tit h3 {font-size:28px; line-height:1.3em; color:#121212; font-weight:600;}
.product-view .col .txt-box .txt {border-top:2px solid #0f6bb0;}
.product-view .col .txt-box .txt dl {display:flex; font-size:20px; line-height:1.5em; padding:18px 0; border-bottom:1px solid #ddd;}
.product-view .col .txt-box .txt dt {width:100%; max-width:170px; position:relative; padding:0 20px; color:#333; font-weight:600;}
.product-view .col .txt-box .txt dt:after {content:''; width:1px; height:12px; background:#ddd; position:absolute; top:50%; margin-top:-6px; right:0;}
.product-view .col .txt-box .txt dd {width:1%; flex:1 1 auto; padding:0 40px; color:#666;}
.product-view .content-box {padding:66px 40px; border-top:1px solid; border-bottom:1px solid; border-color:#ddd;}
.product-view .content-box .txt-box {font-size:20px; line-height:1.6em; color:#666;}