/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block} body{line-height:1} ol,ul{list-style:none} blockquote,q{quotes:none} blockquote:before,blockquote:after,q:before,q:after{content:'';content:none} table{border-collapse:collapse;border-spacing:0} *,*:after,*:before {box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;} /* default */ body {font-family: 'Manrope', "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;} .blind {position: absolute;top: -9999px;font-size: 0;line-height: 0;width: 0;height: 0;overflow: hidden;} img {max-width:100%;} a {color: inherit;text-decoration: none;} /* header */ .logo-protini {display: inline-block;vertical-align: middle;font-size: 0;line-height: 0;text-indent: -9999px;width: 126px;height: 24px;background-repeat: no-repeat;background-size: contain;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='125.954' height='24' viewBox='0 0 125.954 24'%3E%3Cg id='그룹_1' data-name='그룹 1' transform='translate(125.954 24) rotate(180)'%3E%3Cpath id='패스_1' data-name='패스 1' d='M18.636,0h-4.9a.032.032,0,0,0-.032.032V4.568H9.326A9.116,9.116,0,0,0,5.7,5.3,9.355,9.355,0,0,0,.733,10.264a9.311,9.311,0,0,0-.4,6.09,9.4,9.4,0,0,0,2.409,4.12A9.547,9.547,0,0,0,4.63,21.935a9.394,9.394,0,0,0,2.222.944,9.2,9.2,0,0,0,2.475.333h9.309a.032.032,0,0,0,.032-.032V.032A.032.032,0,0,0,18.636,0ZM13.705,9.509v8.746H9.326a4.231,4.231,0,0,1-1.691-.342A4.387,4.387,0,0,1,5.306,15.58a4.374,4.374,0,0,1,0-3.4A4.389,4.389,0,0,1,7.634,9.851a4.239,4.239,0,0,1,1.692-.343Z' transform='translate(107.286 0.499)'/%3E%3Cpath id='패스_2' data-name='패스 2' d='M13.738,0a.032.032,0,0,0-.032.032V4.569L8.913,4.6,6.929.019A.033.033,0,0,0,6.9,0H1.687a.032.032,0,0,0-.03.045L4.222,6.087A9.384,9.384,0,0,0,2.539,7.493,9.124,9.124,0,0,0,1.163,9.38,9.641,9.641,0,0,0,.3,11.54a9.29,9.29,0,0,0,.033,4.814,9.394,9.394,0,0,0,6.518,6.525,9.192,9.192,0,0,0,2.475.333h9.31a.033.033,0,0,0,.032-.032V.032A.032.032,0,0,0,18.636,0Zm-.032,9.509v8.746H9.326a4.234,4.234,0,0,1-1.691-.342,4.483,4.483,0,0,1-1.39-.938,4.412,4.412,0,0,1-.939-1.4,4.377,4.377,0,0,1,0-3.395A4.39,4.39,0,0,1,7.634,9.851a4.241,4.241,0,0,1,1.692-.343Z' transform='translate(86.736 0.499)'/%3E%3Cpath id='패스_3' data-name='패스 3' d='M22.379,5.964A12.013,12.013,0,0,0,8.812.43,11.921,11.921,0,0,0,5.945,1.644,12.228,12.228,0,0,0,3.516,3.529a11.89,11.89,0,0,0-1.88,2.436A12.3,12.3,0,0,0,.43,8.828a12.006,12.006,0,0,0,0,6.368,12.047,12.047,0,0,0,5.516,7.169,12.215,12.215,0,0,0,2.866,1.205,12.062,12.062,0,0,0,6.377,0,12.361,12.361,0,0,0,2.865-1.205,11.968,11.968,0,0,0,2.439-1.877,12.308,12.308,0,0,0,1.886-2.426,11.884,11.884,0,0,0,1.645-6.054,11.761,11.761,0,0,0-.43-3.18A12.062,12.062,0,0,0,22.379,5.964Zm-3.287,6.045a6.9,6.9,0,0,1-.558,2.749A7.1,7.1,0,0,1,17.014,17a7.291,7.291,0,0,1-2.251,1.512,7.1,7.1,0,0,1-5.51,0A7.047,7.047,0,0,1,5.49,14.757a6.9,6.9,0,0,1-.558-2.749A6.784,6.784,0,0,1,5.49,9.276,7.3,7.3,0,0,1,7,7.036,7.114,7.114,0,0,1,9.253,5.516a7.1,7.1,0,0,1,5.51,0,7.173,7.173,0,0,1,3.772,3.76A6.784,6.784,0,0,1,19.092,12.008Z' transform='translate(61.767 0)'/%3E%3Cpath id='패스_4' data-name='패스 4' d='M11.8,18.254V.032A.032.032,0,0,0,11.768,0H6.886a.032.032,0,0,0-.033.032V18.254H.033A.033.033,0,0,0,0,18.287v4.892a.033.033,0,0,0,.033.033h18.6a.033.033,0,0,0,.033-.033V18.287a.033.033,0,0,0-.033-.032Z' transform='translate(43.458 0.499)'/%3E%3Crect id='사각형_1' data-name='사각형 1' width='4.964' height='23.212' rx='0.075' transform='translate(6.164 0.499)'/%3E%3Crect id='사각형_2' data-name='사각형 2' width='4.963' height='23.212' rx='0.075' transform='translate(35.961 0.499)'/%3E%3Cpath id='패스_5' data-name='패스 5' d='M13.738,0a.032.032,0,0,0-.032.032V14.5L5.209.016A.032.032,0,0,0,5.18,0H.033A.032.032,0,0,0,0,.032V23.179a.033.033,0,0,0,.033.033h4.9a.033.033,0,0,0,.033-.033V8.695l8.5,14.5a.033.033,0,0,0,.028.016h5.148a.032.032,0,0,0,.032-.033V.032A.032.032,0,0,0,18.636,0Z' transform='translate(14.373 0.499)'/%3E%3Cpath id='패스_6' data-name='패스 6' d='M1.313,2.035v-2A.033.033,0,0,0,1.28,0h-.5A.033.033,0,0,0,.746.033v2H.033A.033.033,0,0,0,0,2.067V2.49a.033.033,0,0,0,.033.033h2a.033.033,0,0,0,.033-.033V2.067a.033.033,0,0,0-.033-.033Z' transform='translate(3.294 21.183)'/%3E%3Cpath id='패스_7' data-name='패스 7' d='M2.174,0a.033.033,0,0,0-.032.033v1.5L1.549.031a.033.033,0,0,0-.03-.021H1.18a.032.032,0,0,0-.03.021L.557,1.523V.033A.033.033,0,0,0,.524,0H.033A.033.033,0,0,0,0,.033V2.49a.033.033,0,0,0,.033.033H.658a.033.033,0,0,0,.03-.02L1.35.876,2.011,2.5a.033.033,0,0,0,.03.02h.624A.033.033,0,0,0,2.7,2.49V.033A.033.033,0,0,0,2.665,0Z' transform='translate(0 21.183)'/%3E%3C/g%3E%3C/svg%3E%0A");} .mo {display: block !important;} .pc {display: none !important;} #wrap {padding: 50px 22px 22px;} .header {position: fixed; top:0;left:0;right:0;z-index: 10;height: 50px;display: flex;align-items: center;justify-content: center; background: #fff;} .header h1 {display: inline-block;} .header h1 a {display: block;font-size: 0;line-height: 0;} .banner-box {position: relative;overflow: hidden;} .banner-box + .banner-box {margin-top: 22px;} .banner-box img {display: block;width: 100%;} .banner-box-1 {height: calc(100vh - 2rem);} .banner-box-1 img {object-fit: cover;inset: 0px;box-sizing: border-box;padding: 0px;border: none;margin: auto;display: block;width: 0px;height: 0px; min-width: 100%;max-width: 100%;min-height: 100%;max-height: 100%;} .img-animation {position: relative;display: block; overflow: hidden;} .img-animation .img-holder {display: block;} .img-animation img {position: absolute;object-fit: cover;inset: 0px;box-sizing: border-box;padding: 0px;border: none;margin: auto;display: block;width: 0px;height: 0px;min-width: 100%;max-width: 100%;min-height: 100%;max-height: 100%;} .img-placeholder {display: block;} .img-placeholder.img-placeholder-2 {padding-top: 62.24489795918367%; } .img-placeholder.img-placeholder-3 {padding-top: 133.3333333333333%;} .img-placeholder.img-placeholder-4 {padding-top: 132.9479768786127%;} .img-placeholder.img-placeholder-5 {padding-top: 62.31884057971014%;} .banner-box .banner-tit {position: absolute;z-index: 5;top:12px;left:0;right:0;text-align: center;font-size: 20px;color: #fff; font-weight: 800;} .prod-item {position: relative;width: 65.12820512820513vw;} .prod-name {position: absolute;top:12px;left:20px;right:20px;line-height: 27px;font-size: 20px;color: #fff;font-weight: 800;z-index: 5;} .prod-tag {position: absolute;top:42px;left:20px;right:20px;line-height: 16px;font-size: 12px;color: #fff;font-weight: 500;z-index: 5;} .prod-item .img {width: 100%;} .prod-link {position: absolute;bottom:14px;left:14px;right:14px;height: 30px;border: 1px solid #fff;font-size: 11px;color: #fff;font-weight: 500;line-height: 28px;text-align: center;text-decoration: none;z-index: 5;} .banner-box-4 {margin: 0 -22px;} .swiper-slide {width: 65.12820512820513vw;} .footer {margin-top: 22px;font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;color: #000;} .footer-logo , .footer-logo .logo-protini{width: 164px;height: 31px;display: block;} .footer .com-info {margin-top: 18px;font-size: 12px;line-height: 20px;font-weight: 500;} .footer .com-info p + p {margin-top: 16px;} .footer .sns-info {margin-top: 21px;} .footer .sns-info a {font-size: 12px;line-height: 16px;color: #000;text-decoration: none;} .footer .sns-info a:hover {text-decoration: underline;} .footer .sns-info a + a {margin-left: 25px;} @media (min-width: 1024px) { .mo {display: none !important;} .pc {display: block !important;} #wrap {padding: 50px 2.5vw 2.5vw;} .header {height: 50px;} .img-placeholder.img-placeholder-2 , .img-placeholder.img-placeholder-3 , .img-placeholder.img-placeholder-4 , .img-placeholder.img-placeholder-5 {padding-top: 55.92105263157895%; } .banner-box + .banner-box {margin-top: 2.5vw;} .banner-box .banner-tit {top:2.2265625vw;text-align: center;font-size: 1.5625vw;line-height: 1.325;} .banner-box-7 .banner-box-inner {display:flex;margin: 0 -1.25vw;} .banner-box-7 .prod-item {width: calc(33.3333333333% - 2.5vw);justify-content: space-between;margin: 0 1.25vw;} .prod-item .img {position: relative;} .prod-item .img img.hover {position: absolute;top:0;left:0;width: 100%;opacity:0;transition:opacity 0.3s} .prod-link {opacity:0;transition:all 0.3s;bottom:2.421875vw;left:2.421875vw;right:2.421875vw;height: 3.125vw;line-height: calc(3.125vw - 2px);font-size: 0.9375vw;font-family: 'Pretended';} .prod-item:hover .img img.hover {opacity:1;} .prod-item:hover .prod-link {opacity:1} .prod-link:hover {background: #fff;color: #e4e4e4;} .prod-name {top:1.796875vw;left:1.875vw;right:1.875vw;line-height: 1.33;font-size: 1.171875vw;} .prod-tag {top:3.7890625vw;left:1.875vw;right:1.875vw;line-height: 1.33;font-size: 0.9375vw;} .banner-box-5 .banner-tit {top:50%; transform:translateY(-50%)} .footer {padding: 2.5vw 0;margin-top: 0;} .footer:after {content:""; display: table;clear: both;} .footer-left{float:left;width: 50%;} .footer-right{float: left;width: 50%;padding-left: 20px;} .footer .com-info {margin-top: 0;} /* .footer-logo , .footer-logo .logo-protini{width: 13.75vw;height: 2.578125vw;display: block;} .footer .com-info {margin-top: 0;font-size: 0.703125vw;line-height: 1.33;} .footer .com-info p + p {margin-top: 1.40625vw;} .footer .sns-info {margin-top: 1.40625vw;} .footer .sns-info a {font-size: 0.703125vw;line-height: 1.33;color: #000;text-decoration: none;} .footer .sns-info a:hover {text-decoration: underline;} .footer .sns-info a + a {margin-left: 1.40625vw;} */ } @media (min-width: 1600px) { #wrap {padding: 3.125vw 2.5vw 2.5vw;} .header {height: 3.125vw;} .header .logo-protini {width: 7.734375vw;height: 1.484375vw;} .footer-logo , .footer-logo .logo-protini{width: 13.75vw;height: 2.578125vw;display: block;} .footer .com-info {margin-top: 0;font-size: 0.703125vw;line-height: 1.33;} .footer .com-info p + p {margin-top: 1.40625vw;} .footer .sns-info {margin-top: 1.40625vw;} .footer .sns-info a {font-size: 0.703125vw;line-height: 1.33;color: #000;text-decoration: none;} .footer .sns-info a:hover {text-decoration: underline;} .footer .sns-info a + a {margin-left: 1.40625vw;} } /* */