@charset "utf-8"; @import url(reset.css); /* ------------------------------ COMMON ------------------------------ */ /* 한혜진 영상 */ .__mvpop {position:fixed;right:30px;bottom:120px;z-index:3000;} .__mvpop a {display:block;width:186px;height:186px;background:url(https://www.wholesoymilk.com/resources/front/image/mvpop.png) no-repeat;text-indent:-9999px;} .__mvpop .close {border:none;background:url(https://www.wholesoymilk.com/resources/front/image/mvpop-close.png) no-repeat;position:absolute;right:10px;top:10px;text-indent:-9999px;width:15px;height:14px;} /* IR */ .ir-wa {display:block; overflow:hidden; position:relative; z-index:-10; width:100%;height:100%} .ir-pm {display:block; overflow:hidden; text-indent:300%; white-space:nowrap } .blind {display:block; overflow:hidden; position:absolute ;top:-1000em; left:0} /* skip */ #wrap_skip { position:relative; } #wrap_skip a { z-index:300; position:absolute; top:-1000px; z-index:9999} #wrap_skip a:focus, #wrap_skip a:hover, #wrap_skip a:active { display:block; top:0; left:0; width:100%; height:30px; line-height:30px; text-align:center; color:#fff; background:#3b3b3d } /* common */ .wrap-pd { position:relative; max-width:1600px; padding:0 10px; margin:0 auto; box-sizing:border-box } .t-color-red { color:#f63d3d } button:focus { outline:none } .tbl-basic { width:100%; border-top:1px solid #303244; margin-bottom:20px } .tbl-basic caption { overflow:hidden; width:1px; height:1px; font-size:0; line-height:0; text-indent:-9999px } .tbl-basic th, .tbl-basic td { padding:10px 0 } .tbl-basic th { font-weight:500 } .tbl-basic tr { border-bottom:1px solid #e3e3e3; text-align:center } .tbl-basic tbody tr th { font-size:12px } .ir-soybean-feature .tbl-basic td:nth-of-type(1) { color:#f63d3d } .ir-soybean-feature .tbl-basic td:nth-of-type(2) { color:#999 } /* ie 업그레이드 */ .ie-wrap { display:none; position:fixed; top:0; left:0; width:100%; height:100%; overflow:hidden; background-color:rgba(49,51,69,0.8); border:10px solid #000; z-index:999 } .ie-wrap .box { position:relative; top:50%; left:50%; width:400px; height:180px; margin-top:-90px; margin-left:-200px; background-color:#fff; box-sizing:border-box } .ie-wrap .box p:nth-of-type(1) { padding:20px; font-size:16px; font-weight:300 } .ie-wrap .box p:nth-of-type(1) span { color:#ed1b23 } .ie-wrap .box p:nth-of-type(2) { padding:20px } .ie-wrap .box p a { text-decoration:underline } .ie-wrap .box button { position:absolute; top:10px; right:10px; width:40px; height:40px; background:url(../images/sprite.png) no-repeat right 10px top -778px; border:0; overflow:hidden; text-indent:300%; white-space:nowrap; cursor:pointer } /* header */ .header { position:fixed; top:0; left:0; width:100%; background:linear-gradient(to bottom, rgba(48,50,68,0.5), rgba(48,50,68,0.1), rgba(48,50,68,0)); z-index:500; -webkit-transition: background-color .3s linear; -moz-transition: background-color .3s linear; -o-transition: background-color .3s linear; transition: background-color .3s linear; } .header.on { background-color:#303244; background-image:none; background-color:#303244 } .header.on .sec-sitemap { border-top:0; border-bottom:1px solid #e3e3e3 } .header .wrap-gnb { border-bottom:1px solid #d3d3d3; border-bottom:1px solid rgba(255,255,255,0.3) } .header.on .wrap-gnb { border-bottom:0; border-bottom:1px solid rgba(255,255,255,0) } .header .wrap-pd { height:96px } .header h1 { float:left; margin-top:33px } .header .wrap-nav { float:right; margin-top:28px; width:525px} /* .header .wrap-nav ul { float:left } */ .header .wrap-nav ul { display:none } .header .wrap-nav li { float:left; font-size:16px; margin-right:25px } .header .wrap-nav li a { display:block; height:40px; line-height:40px; color:#fff} .header .wrap-nav button[data-btn="gnb"] { display:block; float:right; width:40px; height:40px; border:0; cursor:pointer; background:url(../images/sprite.png) no-repeat -69px -200px; overflow:hidden; text-indent:300%; white-space:nowrap; cursor: default } .header .wrap-nav button[data-btn="gnb"].on { background:url(../images/sprite.png) -69px -78px no-repeat } /* .header .wrap-nav button[data-btn="mgnb"] { display:none } */ .header .wrap-nav button[data-btn="mgnb"] { display:block; float:right; width:40px; height:40px; border:0; cursor:pointer; background:url(../images/sprite.png) no-repeat -69px -78px; overflow:hidden; text-indent:300%; white-space:nowrap } .header .wrap-nav button[data-btn="mgnb"].on { background:#303244 url(../images/sprite.png) no-repeat right 10px top -162px } .header .wrap-nav button[data-btn="gnb"] { display:none } .header .wrap-position { display:none; position:relative; padding-top:18px; height:60px; background-color: #fff; background-color: rgba(255,255,255,0); border-bottom:0; box-sizing:border-box; color:#fff; -webkit-transition: background-color .2s linear, border-bottom .2s linear, color.2s linear; -moz-transition: background-color .2s linear, border-bottom .2s linear, color.2s linear; -o-transition: background-color .2s linear, border-bottom .2s linear, color.2s linear; transition: background-color .2s linear, border-bottom .2s linear, color.2s linear; } .header .wrap-position [data-position]{ color:#fff } .header .wrap-position .wrap-pd { height:38px } .header .wrap-position[data-url='product']{ color:#303244 } .header .wrap-position[data-url='search']{ color:#303244 } .header .wrap-position[data-url='product'] [data-position]{ color:#303244 } .header .wrap-position[data-url='search'] [data-position]{ color:#303244 } .header .wrap-position .ul-box > li { float:left; position:relative; background:url(../images/sprite.png) no-repeat left 16px top -674px } .header .wrap-position[data-url='product'] .ul-box > li { float:left; position:relative; background:url(../images/sprite.png) no-repeat left 16px top -470px } .header .wrap-position[data-url='search'] .ul-box > li { float:left; position:relative; background:url(../images/sprite.png) no-repeat left 16px top -470px } .header .wrap-position .ul-box > li:nth-of-type(1) { background:none } .header .wrap-position[data-url='product'] .ul-box > li:nth-of-type(1) { background:none } .header .wrap-position .ul-box > li a[data-position] { display:block; padding:0 20px 0 40px; background:url(../images/sprite.png) no-repeat right 5px top -714px } .header .wrap-position .ul-box > li span[data-position] { display:block; padding:0 20px 0 40px; background:url(../images/sprite.png) no-repeat right 5px top -714px } .header .wrap-position[data-url='product'] .ul-box > li a[data-position] { display:block; padding:0 20px 0 40px; background:url(../images/sprite.png) no-repeat right 5px top -510px } .header .wrap-position .ul-box > li a[data-position].on { background-position:right 5px top -694px } .header .wrap-position[data-url='product'] .ul-box > li a[data-position].on { background-position:right 5px top -490px } .header .wrap-position .ul-box > li ul { display:none; position:absolute; top:40px; left:20px; background-color:rgba(255,255,255,0.8); border:1px solid #e3e3e3 } .header .wrap-position .ul-box > li ul li a { display:block; padding:8px; width:134px; box-sizing:border-box } .header .wrap-position[data-url='business'] .ul-box > li ul li a { width:110px } .header .wrap-position .ul-box > li:last-child ul li a { width:150px } .header .wrap-position .ul-box > li a { vertical-align:top } .header .wrap-position button { display:none } .header .wrap-position[data-url='privacy']{ color:#303244 } .header .wrap-position.on { background-color: #fff; background-color: rgba(255,255,255,1); border-top:1px solid rgba(0,0,0,0.1); color:#303244; border-bottom:1px solid #e3e3e3 } .header .wrap-position.on [data-position]{ color:#303244 } .header .wrap-position.on .ul-box > li:nth-of-type(1) { background:none } .header .wrap-position.on .ul-box > li { float:left; position:relative; background:url(../images/sprite.png) no-repeat left 16px top -470px } .header .wrap-position.on .ul-box > li a[data-position] { background-position:right 5px top -510px } .header .wrap-position.on .ul-box > li a[data-position].on { background-position:right 5px top -490px } .header .wrap-position.transition-off { transition:none } .header.product-header .wrap-gnb { background-color:#303244 } .header.product-header .wrap-position { background-color:#fff; border-bottom:1px solid #e3e3e3; border-top:1px solid #fff } /* sitemap */ .sec-sitemap { display:none; clear:both; padding:50px 0 50px 0; background-color:#fff; border-top:1px solid #e3e3e3; overflow:hidden;position:fixed;left:0;top:96px;width:100%;height:calc(100% - 96px);z-index:500;transition:0.3s;} .sec-sitemap.active {display:block;} .header[style*='96'] ~ div .sec-sitemap.active, .header.on ~ div .sec-sitemap.active {top:0;height:100%;} .sec-sitemap .wrap-menu { position:relative } .sec-sitemap .wrap-menu form { display:none; border-bottom:1px solid #e3e3e3; margin-bottom:34px } .sec-sitemap .wrap-menu form .box { position:relative; bottom:-1px; width:580px; margin:0 auto; border-bottom:1px solid #303244 } .sec-sitemap .wrap-menu form input { width:calc(99% - 40px); height:70px; border:0; text-indent:10px; font-size:20px; font-weight:200 } .sec-sitemap .wrap-menu form input::-webkit-input-placeholder { color: #999 } .sec-sitemap .wrap-menu form input::-moz-placeholder { color: #999 } .sec-sitemap .wrap-menu form input:-ms-input-placeholder { color: #999 } .sec-sitemap .wrap-menu form input:-moz-placeholder { color: #999 } .sec-sitemap .wrap-menu form button { width:40px; height:40px; background:url(../images/sprite.png) no-repeat right 10px top -358px; border:0; cursor:pointer; overflow:hidden; text-indent:300%; white-space:nowrap } .sec-sitemap .wrap-menu ul { margin:0 auto; max-width:1220px } .sec-sitemap .wrap-menu ul [data-menu] { float:left; width:20%; text-align:center } .sec-sitemap .wrap-menu ul li a { font-size:13px; color:#9d9ea7; margin-bottom:40px } .sec-sitemap .wrap-menu ul [data-menu] p a { color:#303244; font-weight:500 } .sec-sitemap .wrap-menu ul [data-menu] p button { display:none; border:0; cursor:pointer; overflow:hidden; text-indent:300%; white-space:nowrap } .sec-sitemap .wrap-menu ul [data-menu] li { margin-top:15px } .sec-sitemap .wrap-menu ul [data-menu] li:nth-of-type(1) { margin-top:26px } .sec-sitemap .wrap-menu .btn-soybeanshp { display:none; position:relative; max-width: 1600px; padding: 0 10px; margin: 0 auto } .sec-sitemap .wrap-menu .btn-soybeanshp a { display:block; position:absolute; top:-110px; right:28px; width:100px; height:44px; padding-left:30px; background:url(../images/btn_phoneshop.png) no-repeat 0 0; background-size:35px auto } .sec-sitemap .wrap-menu .btn-soybeanshp a span { display:block; text-align:left } .sec-sitemap .wrap-menu .btn-soybeanshp a strong { display:block; font-weight:400 } .sec-sitemap .wrap-menu .btn-soybeanshp .btn_eng{top:-108px;right:306px;width:66px;height:36px;border-radius:18px;padding:0;background:none;background-color:#303244;font-size:14px;line-height:36px;color:#fff;text-align:center;} .sec-sitemap .wrap-menu .btn-soybeanshp .btn_wholesoymilk{top:-108px;right:160px;background:url(../images/naver_logo.svg) no-repeat 0 0; background-size:auto 20px;} .sec-sitemap .wrap-hed .box { display:none } .sec-sitemap .btn-gnb-close { display:none; position:absolute; bottom:10px; right:10px; width:40px; height:40px; border:0; background:url(../images/sprite.png) no-repeat top -776px right 10px; overflow:hidden; text-indent:300%; white-space:nowrap } /* footer */ .footer { clear:both; height:100px; color:#9d9ea7; background-color:#292a33; border-top:1px solid #3a3c52; font-size:12px; box-sizing:border-box } .footer .wrap-pd { padding-top:40px } .footer address { float:left } .footer address span { vertical-align:top } .footer address span::before { content:""; margin-left:17px; padding-left:17px; background:url(../images/sprite.png) no-repeat 0 1px } .footer address + p { clear:both } .footer .btn-privacy { margin-left:20px; margin-top:-3px; border:1px solid #4e4f61; padding:3px 10px; background-color:#292a33; color:#9d9ea7; font-size:12px; cursor:pointer } .footer .wrap-family { position:absolute; top:20px; right:10px; width:140px; z-index:200 } .footer .wrap-family button { height:40px; width:140px; border:0; border-bottom:1px solid #4e4f61; background-color:#292a33; color:#9d9ea7; font-size:12px; cursor:pointer } .footer .wrap-family button.on { background:#292a33 url(../images/sprite.png) no-repeat 30px -40px } .footer .wrap-family .site { display:none; position:absolute; bottom:40px; left:0 } .footer .wrap-family .site li { width:140px; height:40px; line-height:40px; background-color:#fff; text-indent:20px } .footer .wrap-family .site li a { color:#303244 } .footer .wrap-family .site li a:hover { text-decoration:underline } /* sub common */ .div-sub-header { display:table; width:100%; position:relative } .div-sub-header .box { display:table-cell; width:100%; text-align:center; color:#fff; font-size:20px; text-shadow: 0 0 15px rgba(0,0,0,0.2) } .div-sub-header h2 { font-size:42px; font-weight:500; padding:40px 0 20px 0 } .div-sub-header h2 .wei { display:inline-block; font-weight:200; vertical-align:top } .div-sub-header h2, .div-sub-header p { margin:0 auto; max-width:600px } .div-sub-header { height:640px } .div-sub-header .btn-box { padding-top:37px } .div-sub-header .btn-box a:nth-of-type(2) { margin-left:20px } .sec-sub-design { clear:both; padding:100px 0 100px 0; overflow:hidden; border-top:1px solid #e3e3e3 } .sec-sub-design:nth-of-type(1) { border-top:0 } .sec-sub-design.bt-no { border-top:0 } .sec-sub-design .heading { overflow:hidden; padding-bottom:80px } .sec-sub-design h3 { padding-bottom:20px; font-size:24px; font-weight:500 } .sec-sub-design .heading h4 { font-size:34px; font-weight:400; padding-bottom:5px } .sec-sub-design .heading .p-big { padding-bottom:10px; font-size:34px; font-weight:400; max-width:1080px } .sec-sub-design .heading .p-small { padding-bottom:10px; font-size:16px; max-width:1080px } .sec-sub-design .heading .p-medium { padding-bottom:10px; font-size:22px; max-width:1080px } .sec-sub-design .heading strong { font-weight:500 } .sec-sub-design .heading sup { vertical-align:top; font-size:0.6em; } .sec-sub-design .visual-slide { max-height:463px; overflow:hidden } .sec-sub-design .visual-slide .swiper-container { float:right; position:relative; width:100%; max-width:1080px } .sec-sub-design .visual-slide .swiper-container img { width:100%; height:auto } .swiper-btn-square button { width:47px; height:47px; border:0; cursor:pointer; overflow:hidden; text-indent:300%; white-space:nowrap } .swiper-btn-square button[data-brnbtn="prev"] { position:absolute; top:50%; left:0; margin-top:-23px; background:url(../images/sprite.png) no-repeat 0 -540px } .swiper-btn-square button[data-brnbtn="next"] { position:absolute; top:50%; right:0; margin-top:-23px; background:url(../images/sprite.png) no-repeat 0 -587px } .sec-sub-design .cont-position { float:right; position:relative; width:100%; max-width:1080px } .sec-sub-design .cont-position.mgt { margin-top:40px } .sec-sub-design .cont-position .tx-info { margin-top:40px } .sec-sub-design .cont-position .tx-info strong { display:block; font-weight:500; padding-bottom:18px } .sec-sub-design .cont-position .tx-info[data-oem-info] { display:none } .sec-sub-design .cont-position .tx-info[data-oem-info="1"] { display:block } .sec-sub-design .cont-position h4 { font-size:24px; padding-bottom:20px } .sec-sub-design .bullet-ul { overflow:hidden; margin-top:20px } .sec-sub-design .bullet-ul > li { background:url(../images/icon_bullet.png) no-repeat 0 8px; background-size:4px 4px; margin-top:20px; padding-left:15px } .sec-sub-design .bullet-ul li:nth-of-type(1) { margin-top:0 } .sec-sub-design .bullet-ul .str { font-weight:500 } .sec-sub-design .bullet-ol { overflow:hidden } .sec-sub-design .bullet-ol li { list-style-type: decimal; margin-left:20px } .sec-sub-design .bullet-ol li:nth-of-type(1) { margin-top:20px } .sec-sub-design .cont-box { overflow:hidden } .sec-sub-design .cont-box.mgt { margin-top:85px } .sec-sub-design .cont-box h5 { font-weight:500 } .sec-sub-design .btn-main-wrap { clear:both; text-align:center; padding-top:100px } .sec-sub-design .btn-main-wrap a { display:inline-block; width:220px; height:60px; line-height:60px; border:1px solid #303244; background-color:#fff; text-align:center; color:#303244 } .sec-sub-design .btn-main-wrap a:nth-of-type(2) { margin-left:20px; background-color:#303244; color:#fff } .sec-sub-design .btn-wrap { overflow:hidden; margin-top:20px } .sec-sub-design .btn-wrap a { display:inline-block; height:54px; width:202px; border:1px solid #303244; box-sizing:border-box; text-align:center; line-height:54px } .sec-sub-design .btn-wrap.dwn a { background:url(../images/btn_sdk_b.png) no-repeat right 20px top 50% } .sec-sub-design .btn-wrap.dwn-b a { display:inline-block; height:43px; width:160px; border:1px solid #303244; box-sizing:border-box; text-align:center; line-height:43px; font-size:12px; color:#fff; background:#303244 url(../images/btn_sdk_w.png) no-repeat right 20px top 50% } .sec-sub-design .btn-wrap.dwn-b a:nth-of-type(1) { margin-right:20px } .wrap-pictogram .swiper-wrapper { display:block } .wrap-pictogram .swiper-pagination { display:none } .wrap-pictogram li { float:left; width:calc(100% / 4 - 60px); margin-left:80px; margin-top:80px; padding-top:110px; text-align:center; box-sizing:border-box } .wrap-pictogram li .num { display:block; padding-bottom:10px; font-size:16px; font-weight:500 } .wrap-pictogram li .h-tit { display:block; padding-bottom:30px; font-size:16px; font-weight:500 } .wrap-pictogram li:nth-of-type(1) { margin-left:0 } .wrap-pictogram li:nth-of-type(4n+1) { margin-left:0 } .wrap-pictogram li:nth-of-type(-n+4) { margin-top:0 } .wrap-pictogram .pictogram-btn { display:none } .wrap-red-pictogram li { float:left; width:calc(100% / 2 - 39px); margin-left:78px; padding:80px 0 80px 200px; border-bottom:1px solid #303244; box-sizing:border-box } .wrap-red-pictogram li strong { display:block; font-size:30px; font-weight:200; padding-bottom:21px } .wrap-red-pictogram li:nth-of-type(1) { margin-left:0 } .wrap-red-pictogram li:nth-of-type(2n+1) { margin-left:0 } /* contact question */ .sec-question li { float:left; width:calc(100%/2 - 60px); margin-left:120px; position:relative; background:#f6f6f6 url(../images/btn_career_job.png) no-repeat top 41px right 41px; padding:41px; overflow:hidden; box-sizing:border-box } .sec-question li:nth-of-type(1) { margin-left:0 } .sec-question li .h { padding-bottom:30px; font-size:18px; font-weight:500 } .sec-question li .h span { display:block; font-size:14px; font-weight:normal; color:#999999 } .sec-question li dt { overflow:hidden; text-indent:300%; white-space:nowrap } .sec-question li dd { padding-left:10px; background:url(../images/icon_bullet.png) no-repeat 0 50%; background-size:5px 5px } .sec-sub-design .ani { opacity: 0; -webkit-transition: transform .8s linear, opacity .8s linear; -moz-transition: transform .8s linear, opacity .8s linear; -o-transition: transform .8s linear, opacity .8s linear; transition: transform .8s linear, opacity .8s linear; -moz-transform: translate3d(0, 50px, 0); -webkit-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0); } .sec-sub-design .ani.action { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /* ------------------------------ MAIN ------------------------------ */ /* 배너 */ .pop_bnr { position:absolute; top:50%; right:0; margin-top:-40px; width:100px; height:100px; background-color:#292a33; text-align:center } .pop_bnr p { padding:5px; font-size:14px } .pop_bnr p:nth-of-type(1) { color:#f63d3d; font-weight:600 } .pop_bnr p:nth-of-type(2) { color:#9294a3 ; font-size:14px } .pop_bnr.notice { position:absolute; top:50%; right:0; margin-top:-80px; width:200px; height:160px; background-color:#292a33; text-align:center } .pop_bnr.notice div { position: relative; padding: 20px; box-sizing: border-box } .pop_bnr.notice .btn_close { position: absolute; top: 0; right:0; width: 40px; height: 40px; background: #292a33 url(../images/sprite.png) no-repeat right 10px top -162px; border: 0; text-indent:-9999px; cursor:pointer } .pop_bnr p:nth-of-type(1) { padding-top: 30px; color:#f63d3d; font-weight:600 } .pop_bnr p:nth-of-type(2) { color:#9294a3 } .pop_bnr.merger { width:500px; height:450px; background:none !important; margin-top:-250px; box-sizing:border-box; z-index:500 } .pop_bnr.merger article { position:relative; background-color:#292a33 } .pop_bnr.merger article button { position:absolute; top:10px; right:3px; width:40px; height:40px; background-color:#f63d3d; border:0; cursor:pointer } .pop_bnr.merger article button::after { content:""; display:block; position:absolute; top:20px; left:0; width:30px; height:1px; background-color:#fff; transform:rotate(45deg) } .pop_bnr.merger article button::before { content:""; display:block; position:absolute; top:20px; left:0; width:30px; height:1px; background-color:#fff; transform:rotate(-45deg) } .pop_bnr.merger header h2{ padding:20px; background-color:#f63d3d; font-size:16px; color:#e1e1e1; font-weight:400; color:#fff; z-index:500; text-align:left } .pop_bnr.merger header p { padding:20px !important; font-size:14px; color:#bbbbbb; font-weight:400; text-align:left } .pop_bnr.merger div { padding:0 } .pop_bnr.merger .main::before { content:"- 아래 -"; display:inline-block; text-align:center; font-size:12px; color:#bbbbbb; font-weight:600 } .pop_bnr.merger .main ul { padding:20px 20px 0 20px } .pop_bnr.merger .main li { font-size:14px; color:#fff; text-align:left } .pop_bnr.merger .main p { padding:5px 20px !important; color:#fff; font-size:14px; font-weight:400; text-align:left } .pop_bnr.merger .foot { padding:20px 0 } .pop_bnr.merger .foot p { padding:5px 0 0 0 !important; color:#bbbbbb; font-size:14px; font-weight:400 } .pop_bnr.merger .foot p:nth-of-type(1) span:nth-of-type(1) { margin-right:20px; color:#f63d3d; font-weight:600 } /* main video */ .div-video { position:relative; height:100vh; min-height:640px } .div-video .box { position:absolute; height:100%; width:100%; overflow: hidden; background:url(../images/gate_bg.jpg) no-repeat 50% 50%; background-size:cover } .div-video video { display:block; min-width:100%; min-height:100% } .div-video .div-txt { position:absolute; top:50%; left:50%; margin-left:-420px; margin-top:-52px; width:840px; font-size:48px; font-weight:600; text-align:center; color:#fff; line-height:1.2em; word-break:normal } .div-video .div-txt .btn-play { display:none } .div-video .seekbar { display:block; cursor:pointer; width:100%; height:5px; z-index:200; position:absolute; top:96px; left:0; overflow:visible } .div-video .seekbar p { position:relative; width:100%; padding:6px 0; margin:0 auto; margin-top:-5px; transition:all 0.3s linear } .div-video .seekbar p .line { background-color: rgba(255,255,255,0.6); position: absolute; top: 5px; left: 0; height: 1px; width: 0; display:block} .div-video .seekbar .btn { display:none; width:30px; height:30px; position:absolute; left:5px; z-index:600 } .div-video .seekbar.on p { height:10px } .div-video .seekbar.on p .line { height:1px; background-color: #ed1b23 } .div-video .seekbar .spn { display:none; width:30px; height:30px; position:absolute; left:0; top:15px; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition:all 0.3s linear } .div-video .seekbar .spn em { display:block; width:2px; height:15px; background-color:#ed1b23; position:absolute; transition: all .4s linear } .div-video .seekbar .spn em:nth-child(1) { transform: rotate(180deg); top:0; left:5px } .div-video .seekbar .spn em:nth-child(2) { transform: rotate(-180deg); top:0; left:14px; opacity:0 } .div-video .seekbar .spn em:nth-child(3) { transform: rotate(-180deg); top:0; left:14px } .div-video .seekbar .spn.on em { height:16px } .div-video .seekbar .spn.on em:nth-child(1) { transform: rotate(180deg); top:0; left:5px } .div-video .seekbar .spn.on em:nth-child(2) { display:block; transform: rotate(-57deg); top:-3px; left:12px; opacity:1 } .div-video .seekbar .spn.on em:nth-child(3) { transform: rotate(-118deg); top:4px; left:12px } .div-video .seekbar .spn:hover em { background-color:#ed1b23 } .div-video .seekbar .timebtn { display:none; position:absolute; bottom:-15px; z-index:600; color:#fff; font-size:12px; /* transform: rotate(-90deg); */font-weight:300 } .m-video { display:none } /* main banner */ .sec-bnr { height:360px; background-color:#292a33 } .sec-bnr .wrap { max-width:1290px; margin:0 auto; padding:0 20px } .sec-bnr .wrap div { position:relative; top:0; float:left; width:calc(99.9% / 3 - 14px); margin-left:21px; height:360px; box-sizing:border-box; background:#f63d3d url(../images/bg_bnr_medi.png) no-repeat 50% 28px; text-align:center } .sec-bnr .wrap div:nth-of-type(1) { margin-left:0 } .sec-bnr .wrap div:nth-of-type(2) { background:#fff url(../images/bg_bnr_food.png) no-repeat 50% 28px } .sec-bnr .wrap div:nth-of-type(3) { background:#303244 url(../images/bg_bnr_it.png) no-repeat 50% 28px } .sec-bnr .wrap div a { font-size:16px; color:#fff } .sec-bnr .wrap div h2 { padding:251px 0 27px 0; font-size:20px; font-weight:500 } .sec-bnr .wrap div:nth-of-type(2) a { color:#303244 } .sec-bnr .wrap .main-ani { -webkit-transition: transform .5s linear; -moz-transition: transform .5s linear; -o-transition: transform .5s linear; transition: transform .5s linear; -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .sec-bnr .wrap .main-ani.action { opacity: 1; -webkit-transform: translate3d(0, -110px, 0); -moz-transform: translate3d(0, -110px, 0); transform: translate3d(0, -110px, 0); } .sec-bnr .box div:nth-of-type(1) { margin-left:35px; background:#f63d3d url(../images/icon_banner1.png) no-repeat 50% 74px } .sec-bnr .box h2 { font-size:20px; font-weight:600 } .sec-bnr .box a { color:#fff } .sec-bnr .box a:hover { text-decoration:underline } /* ------------------------------ COMPANY ------------------------------ */ /* intro */ .company-intro { background:url(../images/p_sub_top_company.jpg) no-repeat 50% 0; background-attachment: fixed } /* mission */ .company-mission .wrap-red-pictogram li:nth-of-type(1) { background:url(../images/pc/icon_company_mission1.png) no-repeat 0 50% } .company-mission .wrap-red-pictogram li:nth-of-type(2) { background:url(../images/pc/icon_company_mission2.png) no-repeat 0 50% } .company-mission .wrap-red-pictogram li:nth-of-type(3) { background:url(../images/pc/icon_company_mission3.png) no-repeat 0 50% } /* history */ .company-history .heading { margin-bottom:53px } .company-history .wrap-btn-year { border-bottom:1px solid #e3e3e3 } .company-history .wrap-btn-year ul { float:right; position:relative; top:-45px } .company-history .wrap-btn-year li { float:left; padding-left:100px; padding-bottom:12px; background:url(../images/bg_btn_history.png) no-repeat bottom 0 left 20px } .company-history .wrap-btn-year li:first-child { background:none } .company-history .wrap-btn-year li span { display:inline-block; padding-left:20px } .company-history .wrap-btn-year li span:first-child { padding-left:0 } .company-history .wrap-btn-year li a { display:inline-block; padding:14px 0; color:#999999; font-weight:500; text-align:right } .company-history .wrap-btn-year li a.active { color:#f63d3d } .company-history .bxslider-history { width:60%; margin-top:50px } .company-history .bxslider-history li { font-size:72px; color:#c8c8c8; font-weight:600 } .company-history .bxslider-history li span { display:inline-block } .company-history .bxslider-history li span:nth-of-type(2) { width:40%; height:60px; background-color:#fff; border-bottom:1px solid #e3e3e3 } .company-history .wrap-history { margin-top:58px; min-height:520px; } .company-history .wrap-history .box-position { float:left; width:60% } .company-history .wrap-history .btn-page { overflow:hidden; margin-bottom:57px } .company-history .wrap-history .btn-page li { float:left } .company-history .wrap-history .btn-page li a { display:block; width:30px; height:30px; text-align:center } .company-history .wrap-history .btn-page li a.on span { background-color:#f63d3d } .company-history .wrap-history .btn-page li a span { display:inline-block; width:12px; height:12px; background-color:#c8c8c8; overflow:hidden; text-indent:300%; white-space:nowrap; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px } .company-history .wrap-history .cont-page { clear:both; float:left; display:none } .company-history .wrap-history ul:nth-of-type(2) { display:block } .company-history .wrap-history .cont-page li { padding-top:21px } .company-history .wrap-history .cont-page li:first-child { padding-top:0 } .company-history .wrap-history .cont-page time { float:left; color:#2b2b2b; font-weight:400 } .company-history .wrap-history .cont-page p { padding-left:120px } .company-history .wrap-photo { float:right; width:40% } .company-history .wrap-photo figure { float:right } .company-history .wrap-photo figure:nth-of-type(1) { float:left } .company-history .wrap-photo figure img { width:100%; height:auto } .company-history .wrap-photo figcaption { padding:20px 0; font-size:12px } .company-history [data-history-page] { display:none; position:relative } .company-history [data-history-page="0"] { display:block } /* group */ .company-group { background-color:#f6f6f6 } .company-group .cont-group { margin:0 auto; max-width:1220px } .company-group .cont-group li { float:left; width:calc(99.9% / 3 - 46px); margin-left:69px; margin-bottom:69px; -webkit-box-shadow:20px 20px 40px rgba(0, 0, 0, 0.1); -moz-box-shadow:20px 20px 40px rgba(0, 0, 0, 0.1); box-shadow:20px 20px 40px rgba(0, 0, 0, 0.1) } .company-group .cont-group li:nth-of-type(1) { margin-left:0 } .company-group .cont-group li:nth-of-type(4) { margin-left:0 } .company-group .cont-group li:nth-of-type(1) p { background:url(../images/p_company_group_logo1.png) no-repeat 50% 24px } .company-group .cont-group li:nth-of-type(2) p { background:url(../images/p_company_group_logo2.png) no-repeat 50% 24px } .company-group .cont-group li:nth-of-type(3) p { background:url(../images/p_company_group_logo6.png) no-repeat 50% 24px } .company-group .cont-group li:nth-of-type(4) p { background:url(../images/p_company_group_logo3.png) no-repeat 50% 24px } .company-group .cont-group li:nth-of-type(5) p { background:url(../images/p_company_group_logo4.png) no-repeat 50% 24px } .company-group .cont-group li:nth-of-type(6) p { background:url(../images/p_company_group_logo5.png) no-repeat 50% 24px } .company-group .cont-group li img { width:100%; height:auto } .company-group .cont-group li p { padding:80px 0 30px 0; text-align:center; font-size:12px } .company-group .cont-group li p strong { font-size:14px; font-weight:500 } /* map */ .company-map.sec-sub-design { padding-bottom:0 } .company-map .wrap-nav li { float:left } .company-map .wrap-nav li a { display:block; padding-left:20px; background: url(../images/sprite.png) no-repeat top 2px left 8px } .company-map .wrap-nav li:nth-of-type(1) a { padding-left:0; background:none } .company-map .wrap-nav li.on a { font-weight:500 } .company-map .wrap-map { display:none } .company-map .wrap-map[data-address='1'] { display:block } .company-map div { border:0 !important; background:none !important } .company-map .wrap-map { width:100%; height:500px } .company-map .map-position { padding:30px; width:100%; max-width:400px; background-color:rgba(255,255,255,0.8) !important; -webkit-box-shadow:20px 20px 40px rgba(0, 0, 0, 0.1); -moz-box-shadow:20px 20px 40px rgba(0, 0, 0, 0.1); box-shadow:20px 20px 40px rgba(0, 0, 0, 0.1) } .company-map .map-position h4 { margin-bottom:30px; text-align:center; font-size:24px; font-weight:500 } .company-map .map-position dt { float:left } .company-map .map-position dd { padding-left: 50px } /* ------------------------------ PRODUCT ------------------------------ */ /* product main banner */ .div-bnr-pro { margin-top:210px } .div-bnr-pro .pmain-visual-slide { max-height:413px; overflow:hidden } .div-bnr-pro button { width:47px; height:47px; border:0; cursor:pointer; overflow:hidden; text-indent:300%; white-space:nowrap } .div-bnr-pro button[data-brnbtn="prev"] { position:absolute; top:50%; left:0 !important; margin-top:-23px; background:url(../images/sprite.png) no-repeat 0 -540px } .div-bnr-pro button[data-brnbtn="next"] { position:absolute; top:50%; right:0 !important; margin-top:-23px; background:url(../images/sprite.png) no-repeat 0 -587px } .div-bnr-pro .swiper-slide img { width: 100%; height: auto; display: block } /* product list */ .sec-prolist{ overflow:hidden; min-height:380px } .sec-prolist.mgt { margin-top:170px } .sec-prolist h3 { font-size:34px } .sec-prolist h3 span { display:inline-block; vertical-align:top } .sec-prolist .p-small { padding-top:5px } .sec-prolist .p-small span { display:inline-block; vertical-align:top } .sec-prolist:nth-of-type(1) h3 { padding-top:58px } .sec-prolist .hed { position:relative; overflow:hidden; padding-bottom:40px } .sec-prolist .hed a { position:absolute; bottom:46px; right:0; display:block; width:32px; height:32px; background:url(../images/sprite.png) no-repeat 0 -438px; overflow:hidden; text-indent:300%; white-space:nowrap } .sec-prolist li { float:left; margin-left:60px; margin-bottom:60px; padding:20px; width:calc(100% / 4 - 45px); box-sizing:border-box; background-color:#f6f6f6; text-align:center } .sec-prolist li:nth-child(1), .sec-prolist li:nth-child(4n+1) { margin-left:0 } .sec-prolist li b { display:block; font-size:16px; font-weight:400; word-break:break-all } .sec-prolist li img { width:100%; height:auto; max-width:310px } /* product detail */ .sec-prodetail-top.mgt { margin-top:170px } .sec-prodetail-top { padding-top:58px; min-height:480px } .sec-prodetail-top h3 { position:absolute; top:0; left:0; font-size:34px; font-weight:400 } .sec-prodetail-top .basic-info { float:right; width:33.3%; width:calc(100% / 3 - 100px); min-height:430px; margin-bottom:100px } .sec-prodetail-top .basic-info dl:nth-of-type(1) { position:absolute; top:150px; left:0; width:33.3%; width:calc(100% / 3 - 100px) } .sec-prodetail-top .basic-info dt { font-weight:400; color:#999999 } .sec-prodetail-top .basic-info dd { margin-bottom:36px } .sec-prodetail-top .basic-info .box-btn a { display:inline-block; width:200px; height:60px; line-height:60px; border:1px solid #303244; background-color:#303244; text-align:center; color:#fff } .sec-prodetail-top .basic-info .box-btn a:first-child { margin-right:7px; background-color:#fff; color:#303244 } .sec-prodetail-top .box { position:relative } .sec-prodetail-top .wrap-thumb-slide { position:absolute; top:0; left:50%; margin-left:-210px; max-width:420px } .sec-prodetail-top .wrap-thumb-slide .swiper-container { max-height:420px; overflow:hidden } .sec-prodetail-top .wrap-thumb-slide .swiper-slide img { width: 100%; height: auto; display: block } .sec-prodetail-top .swiper-btn button { width:47px; height:47px; border:0; cursor:pointer; overflow:hidden; text-indent:300%; white-space:nowrap } .sec-prodetail-top .swiper-btn button[data-brnbtn="prev"] { position:absolute; top:50%; left:-47px; margin-top:-23px; background:url(../images/sprite.png) no-repeat 100% -540px } .sec-prodetail-top .swiper-btn button[data-brnbtn="next"] { position:absolute; top:50%; right:-47px; margin-top:-23px; background:url(../images/sprite.png) no-repeat 100% -587px } .sec-prodetail-top .nav-thumb { position:absolute; top:300px; left:0; width:370px } .sec-prodetail-top .nav-thumb li { float:left; width:calc(100% /3 - 14px); margin-left:21px } .sec-prodetail-top .nav-thumb li:first-child { margin-left:0 } .sec-prodetail-top .nav-thumb li img { width:100%; max-width:110px; height:auto; box-sizing:border-box } .sec-prodetail-top .nav-thumb li.active img { border:1px solid #303244 } .sec-prodetail-top::after { content:""; clear:both; display:block } .sec-prodetail-bottom { border-top:1px solid #e3e3e3; margin-bottom:61px } .sec-prodetail-bottom ul { overflow:hidden; max-width:900px; margin:0 auto; margin-top:-1px } .sec-prodetail-bottom li { float:left; width:50%; box-sizing:border-box } .sec-prodetail-bottom li a { display:block; height:60px; line-height:60px; border-top:1px solid #e3e3e3; text-align:center } .sec-prodetail-bottom li a.on { border-top:3px solid #303244; font-weight:500 } .sec-prodetail-bottom .detail-info { padding:0 80px; text-align:center } .sec-prodetail-bottom .detail-info [data-detail-info='2'] { display:none } .sec-prodetail-bottom .detail-info img { height:auto; max-width:900px } .sec-prodetail-bottom .detail-info dl { border-bottom:1px solid #dbdbdb; overflow:hidden; background-color:#f6f6f6; font-size:12px; margin:0 auto; max-width:900px; text-align:left } .sec-prodetail-bottom .detail-info dl:nth-of-type(1) { border-top:1px solid #dbdbdb } .sec-prodetail-bottom .detail-info dt { float:left; display:inline-block; width:22%; box-sizing:border-box; padding:10px 20px; box-sizing:border-box; color:#999 } .sec-prodetail-bottom .detail-info dd { display:inline-block; width:78%; box-sizing:border-box; padding:10px 20px; background-color:#fff; font-size:14px; box-sizing:border-box } /* ------------------------------ BUSINESS ------------------------------ */ /*biz main */ .business-it-intro { background:url(../images/p_sub_top_business_it.jpg) no-repeat 50% 0; background-attachment: fixed } .business-medical-intro { background:url(../images/p_sub_top_business_medical.jpg) no-repeat 50% 0; background-attachment: fixed } .business-food-intro { background:url(../images/p_sub_top_business_food.jpg) no-repeat 50% 0; background-attachment: fixed } .business-it-healthcare-intro { background:url(../images/p_sub_top_business_it_healthcare.jpg) no-repeat 50% 0; background-attachment: fixed } .business-it-hmp-intro { background:url(../images/p_sub_top_business_it_hmp.jpg) no-repeat 50% 0; background-attachment: fixed } .business-it-keidas-intro { background:url(../images/p_sub_top_business_it_keidas.jpg) no-repeat 50% 0; background-attachment: fixed } .business-it-vkinny-intro { background:url(../images/p_sub_top_business_it_vkinny.jpg) no-repeat 50% 0; background-attachment: fixed } .business-it-wappleshop-intro { background:url(../images/p_sub_top_business_it_wappleshop.jpg) no-repeat 50% 0; background-attachment: fixed } .business-it-rfprisma-intro { background:url(../images/p_sub_top_business_it_rfprisma.jpg) no-repeat 50% 0; background-attachment: fixed } .business-it-quantum-intro { background:url(../images/p_sub_top_business_it_quantum.jpg) no-repeat 50% 0; background-attachment: fixed } .business-it-tag-intro { background:url(../images/p_sub_top_business_it_tag.jpg) no-repeat 50% 0; background-attachment: fixed } .business-food-soybean-intro { background:url(../images/p_sub_top_business_food_soybean.jpg) no-repeat 50% 0; background-attachment: fixed } .business-food-oem-intro { background:url(../images/p_sub_top_business_food_oem.jpg) no-repeat 50% 0; background-attachment: fixed } .nav-biz-sub { margin-top:60px; padding-bottom:40px; overflow:hidden; border-bottom:1px solid #e3e3e3; text-align:center } .nav-biz-sub .swiper-container { position:relative } .nav-biz-sub li { float:left; height:140px } .nav-biz-sub li img { width:114px; height:102px } .nav-biz-sub li span { display:block; padding-top:16px; font-weight:500 } .nav-biz-sub li a { display:block } .nav-biz-sub .swiper_btn button { width:40px; height:40px; border:0; cursor:pointer } .nav-biz-sub .swiper_btn button span { display:inline-block; width:100%; height:47px } .nav-biz-sub .swiper_btn button[data-brnbtn="prev"] { position:absolute; top:50%; left:0; margin-top:-20px; background:url(../images/sprite.png) no-repeat right -5px top -545px } .nav-biz-sub .swiper_btn button[data-brnbtn="next"] { position:absolute; top:50%; right:0; margin-top:-20px; background:url(../images/sprite.png) no-repeat right -8px top -592px } .nav-biz-sub .swiper_btn button[data-brnbtn="prev"] span { overflow:hidden; text-indent:300%; white-space:nowrap } .nav-biz-sub .swiper_btn button[data-brnbtn="next"] span { overflow:hidden; text-indent:300%; white-space:nowrap } .nav-biz-sub .swiper_btn button.disabled { display:none } .business-main .main-visual-slide { float:left; position:relative; width:44%; max-width:700px; max-height:417px; overflow:hidden } .business-main .main-visual-slide .swiper-container img { width:100%; height:auto } .business-main .wrap-photo { float:right; width:56% } .business-main .wrap-photo figure { float:left; width:calc(100% / 2 - 80px); margin-left:80px } .business-main .wrap-photo figure figcaption strong { display:block; padding:20px 0 10px 0; font-size:16px; font-weight:500 } .business-main .wrap-photo figure figcaption strong sup { vertical-align: top } .business-main .wrap-photo figure img { width:100%; height:auto } .business-main-other .cont-group { margin:0 auto; max-width:1020px } .business-main-other .cont-group li { position:relative; float:left; width:calc(100% / 2 - 90px); margin-left:180px; margin-bottom:80px } .business-main-other .cont-group li:nth-of-type(odd) { margin-left:0 } .business-main-other .cont-group li:nth-of-type(even) { top:80px } .business-main-other .cont-group li img { width:100%; height:auto } .business-main-other .cont-group li p { position:absolute; bottom:0; left:0; width:100%; padding:40px; background-color:rgba(255,255,255,0.7); text-align:left; box-sizing:border-box } .business-main-other .cont-group li p strong { font-size:24px; font-weight:500; display:block; padding-bottom:10px } /* biz main notice */ .biz-main-notice .heading { padding-bottom:40px !important } .biz-main-notice { background-color:#f6f6f6 } .biz-main-notice li { border-top:1px solid #303244; padding:42px; margin-top:80px; background-color:#fff; -webkit-box-shadow:20px 20px 40px rgba(0, 0, 0, 0.1); -moz-box-shadow:20px 20px 40px rgba(0, 0, 0, 0.1); box-shadow:20px 20px 40px rgba(0, 0, 0, 0.1) } .biz-main-notice li:nth-of-type(1) { margin-top:0 } .biz-main-notice li .p-big { display:block; font-size:30px; font-weight:200; margin-bottom:20px } .biz-main-notice li .p-small { font-size:16px } .biz-main-notice li a { display:block; padding-right:120px } .biz-main-notice .box-down { display:block; margin-top:20px } .biz-main-notice .box-down a { display:inline-block; margin-right:6px; border:1px solid #303244; padding:5px 40px 5px 20px; background-color:#fff; font-size:12px; color:#fff; background:#303244 url(../images/btn_sdk_w.png) no-repeat right 20px top 50% } .business-sub section { margin-top:130px } .business-sub section::after { content:""; overflow:hidden; display:inline-block; width:100% } .business-sub section:nth-of-type(1) { margin-top:0 } .business-sub .wrap-pictogram.healthcare li[data-pictogram-bg='1'] { background:url(../images/pc/ico_biz_it_healthcare.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.healthcare li[data-pictogram-bg='2'] { background:url(../images/pc/ico_biz_it_healthcare2.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.healthcare li[data-pictogram-bg='3'] { background:url(../images/pc/ico_biz_it_healthcare3.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.healthcare li[data-pictogram-bg='4'] { background:url(../images/pc/ico_biz_it_healthcare4.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.hmp li[data-pictogram-bg='1'] { background:url(../images/pc/ico_biz_it_hmp.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.hmp li[data-pictogram-bg='2'] { background:url(../images/pc/ico_biz_it_hmp2.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.hmp li[data-pictogram-bg='3'] { background:url(../images/pc/ico_biz_it_hmp3.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.keidas[data-pictogram='1'] li[data-pictogram-bg='1'] { background:url(../images/pc/ico_biz_it_keidas_a1.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.keidas[data-pictogram='1'] li[data-pictogram-bg='2'] { background:url(../images/pc/ico_biz_it_keidas_a2.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.keidas[data-pictogram='1'] li[data-pictogram-bg='3'] { background:url(../images/pc/ico_biz_it_keidas_a3.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.keidas[data-pictogram='1'] li[data-pictogram-bg='4'] { background:url(../images/pc/ico_biz_it_keidas_a4.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.keidas[data-pictogram='1'] li[data-pictogram-bg='5'] { background:url(../images/pc/ico_biz_it_keidas_a5.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.keidas[data-pictogram='1'] li[data-pictogram-bg='6'] { background:url(../images/pc/ico_biz_it_keidas_a6.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.keidas[data-pictogram='1'] li[data-pictogram-bg='7'] { background:url(../images/pc/ico_biz_it_keidas_a7.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.keidas[data-pictogram='1'] li[data-pictogram-bg='8'] { background:url(../images/pc/ico_biz_it_keidas_a8.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.keidas[data-pictogram='2'] li[data-pictogram-bg='1'] { background:url(../images/pc/ico_biz_it_keidas_b1.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.keidas[data-pictogram='2'] li[data-pictogram-bg='2'] { background:url(../images/pc/ico_biz_it_keidas_b2.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.keidas[data-pictogram='2'] li[data-pictogram-bg='3'] { background:url(../images/pc/ico_biz_it_keidas_b3.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.keidas[data-pictogram='2'] li[data-pictogram-bg='4'] { background:url(../images/pc/ico_biz_it_keidas_b4.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.keidas[data-pictogram='2'] li[data-pictogram-bg='5'] { background:url(../images/pc/ico_biz_it_keidas_b5.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.keidas[data-pictogram='2'] li[data-pictogram-bg='6'] { background:url(../images/pc/ico_biz_it_keidas_b6.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.keidas[data-pictogram='2'] li[data-pictogram-bg='7'] { background:url(../images/pc/ico_biz_it_keidas_b7.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.keidas[data-pictogram='2'] li[data-pictogram-bg='8'] { background:url(../images/pc/ico_biz_it_keidas_b8.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.vkinny[data-pictogram='1'] li[data-pictogram-bg='1'] { background:url(../images/pc/ico_biz_it_vkinny1.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.vkinny[data-pictogram='1'] li[data-pictogram-bg='2'] { background:url(../images/pc/ico_biz_it_vkinny2.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.vkinny[data-pictogram='1'] li[data-pictogram-bg='3'] { background:url(../images/pc/ico_biz_it_vkinny3.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.rfprisma[data-pictogram='1'] li[data-pictogram-bg='1'] { background:url(../images/pc/ico_biz_it_rfprisma.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.rfprisma[data-pictogram='1'] li[data-pictogram-bg='2'] { background:url(../images/pc/ico_biz_it_rfprisma2.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.rfprisma[data-pictogram='1'] li[data-pictogram-bg='3'] { background:url(../images/pc/ico_biz_it_rfprisma3.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.rfprisma[data-pictogram='1'] li[data-pictogram-bg='4'] { background:url(../images/pc/ico_biz_it_rfprisma4.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.rfprisma[data-pictogram='1'] li[data-pictogram-bg='5'] { background:url(../images/pc/ico_biz_it_rfprisma5.png) no-repeat 50% 0 } .business-sub .wrap-thumb li { float:left; width:calc(99.9% / 3 - 40px); margin-left:60px; margin-bottom:60px; box-sizing:border-box } .business-sub .wrap-thumb li img { width:100%; height: auto; box-sizing:border-box } .business-sub .wrap-thumb li:nth-of-type(1) { margin-left:0 } .business-sub .wrap-thumb li:nth-of-type(3n+1) { margin-left:0 } .business-sub .wrap-thumb li .h-tit { display:block; padding:15px 0 10px 0; font-size:16px; font-weight:500 } .business-sub .wrap-thumb li .s-fnt { display:block; margin-top:5px; font-size:12px; color:#999999 } .business-sub .wrap-thumb li .s-fnt strong { display:inline-block; font-weight:500 } .business-sub .wrap-thumb li .s-fnt strong::after { content:"-"; padding:0 4px } .business-sub .ir-keidas-architecture { height:0; padding-top:47.5%; background:url(../images/pc/bg_business_it_keidas_architecture.jpg) no-repeat center; background-size:contain } .business-sub .ir-soybean-feature { height:0; padding-top:42.87%; background:url(../images/pc/bg_business_food_soybean_vs1.jpg) no-repeat center; background-size:contain } .business-sub .ir-soybean-feature2 { height:0; padding-top:42.59%; background:url(../images/pc/bg_business_food_soybean_vs2.jpg) no-repeat center; background-size:contain } .business-sub .wrap-pictogram.wappleshop-customer-service li[data-pictogram-bg='1'] { background:url(../images/pc/ico_biz_it_wappleshop_customer_service1.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.wappleshop-customer-service li[data-pictogram-bg='2'] { background:url(../images/pc/ico_biz_it_wappleshop_customer_service2.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.wappleshop-customer-service li[data-pictogram-bg='3'] { background:url(../images/pc/ico_biz_it_wappleshop_customer_service3.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.wappleshop-customer-service li[data-pictogram-bg='4'] { background:url(../images/pc/ico_biz_it_wappleshop_customer_service4.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.wappleshop-customer-service li[data-pictogram-bg='5'] { background:url(../images/pc/ico_biz_it_wappleshop_customer_service5.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.wappleshop-customer-service li[data-pictogram-bg='6'] { background:url(../images/pc/ico_biz_it_wappleshop_customer_service6.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.wappleshop-customer-service li[data-pictogram-bg='7'] { background:url(../images/pc/ico_biz_it_wappleshop_customer_service7.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.wappleshop-customer-service li[data-pictogram-bg='8'] { background:url(../images/pc/ico_biz_it_wappleshop_customer_service8.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.wappleshop-supporting-service li[data-pictogram-bg='1'] { background:url(../images/pc/ico_biz_it_wappleshop_supporting_service1.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.wappleshop-supporting-service li[data-pictogram-bg='2'] { background:url(../images/pc/ico_biz_it_wappleshop_supporting_service2.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.wappleshop-supporting-service li[data-pictogram-bg='3'] { background:url(../images/pc/ico_biz_it_wappleshop_supporting_service3.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.wappleshop-service-flow li[data-pictogram-bg='1'] { background:url(../images/pc/ico_biz_it_keidas_a1.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.wappleshop-service-flow li[data-pictogram-bg='2'] { background:url(../images/pc/ico_biz_it_keidas_a2.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.wappleshop-service-flow li[data-pictogram-bg='3'] { background:url(../images/pc/ico_biz_it_keidas_a3.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.wappleshop-service-flow li[data-pictogram-bg='4'] { background:url(../images/pc/ico_biz_it_keidas_a4.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.wappleshop-service-flow li[data-pictogram-bg='5'] { background:url(../images/pc/ico_biz_it_keidas_a5.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.tag-list li[data-pictogram-bg='1'] { background:url(../images/pc/ico_biz_it_tag_list1.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.tag-list li[data-pictogram-bg='2'] { background:url(../images/pc/ico_biz_it_tag_list2.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.tag-list li[data-pictogram-bg='3'] { background:url(../images/pc/ico_biz_it_tag_list3.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.tag-list li[data-pictogram-bg='4'] { background:url(../images/pc/ico_biz_it_tag_list4.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.tag-list li[data-pictogram-bg='5'] { background:url(../images/pc/ico_biz_it_tag_list5.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.tag-list li[data-pictogram-bg='6'] { background:url(../images/pc/ico_biz_it_tag_list6.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.tag-list li[data-pictogram-bg='7'] { background:url(../images/pc/ico_biz_it_tag_list7.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.tag-list li[data-pictogram-bg='8'] { background:url(../images/pc/ico_biz_it_tag_list8.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.tag-list li[data-pictogram-bg='9'] { background:url(../images/pc/ico_biz_it_tag_list9.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.tag-list li[data-pictogram-bg='10'] { background:url(../images/pc/ico_biz_it_tag_list10.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.tag-list li[data-pictogram-bg='11'] { background:url(../images/pc/ico_biz_it_tag_list11.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.tag-list li[data-pictogram-bg='12'] { background:url(../images/pc/ico_biz_it_tag_list12.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.tag-list li[data-pictogram-bg='13'] { background:url(../images/pc/ico_biz_it_tag_list13.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.tag-list li[data-pictogram-bg='14'] { background:url(../images/pc/ico_biz_it_tag_list14.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.tag-list li[data-pictogram-bg='15'] { background:url(../images/pc/ico_biz_it_tag_list15.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.tag-list li[data-pictogram-bg='16'] { background:url(../images/pc/ico_biz_it_tag_list16.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.tag-list li[data-pictogram-bg='17'] { background:url(../images/pc/ico_biz_it_tag_list17.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.tag-list li[data-pictogram-bg='18'] { background:url(../images/pc/ico_biz_it_tag_list18.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.tag-list li[data-pictogram-bg='19'] { background:url(../images/pc/ico_biz_it_tag_list19.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.tag-list li[data-pictogram-bg='20'] { background:url(../images/pc/ico_biz_it_tag_list20.png) no-repeat 50% 0 } .wappleshop-affiliates { background-color:#f6f6f6 } .wappleshop-affiliates .cont-alliance { height:0; padding-top:47.4%; overflow:hidden; background:url(../images/pc/bg_business_it_wapple_alliance.jpg) no-repeat; background-size:contain } .wappleshop-affiliates .cont-partnership { height:0; padding-top:12.9%; overflow:hidden; background:url(../images/pc/bg_business_it_wapple_partnership.jpg) no-repeat; background-size:contain } .wappleshop-flow-service .wrap-red-pictogram li:nth-of-type(1) { background:url(../images/pc/icon_biz_wappleshop_flow_service.png) no-repeat 0 50% } .wappleshop-flow-service .wrap-red-pictogram li:nth-of-type(2) { background:url(../images/pc/icon_biz_wappleshop_flow_service2.png) no-repeat 0 50% } .wappleshop-flow-service .wrap-red-pictogram li:nth-of-type(3) { background:url(../images/pc/icon_biz_wappleshop_flow_service3.png) no-repeat 0 50% } .wappleshop-flow-service .wrap-red-pictogram li:nth-of-type(4) { background:url(../images/pc/icon_biz_wappleshop_flow_service4.png) no-repeat 0 50% } .wappleshop-flow-service .wrap-red-pictogram li:nth-of-type(5) { background:url(../images/pc/icon_biz_wappleshop_flow_service5.png) no-repeat 0 50% } .tag-flow-service .wrap-red-pictogram li:nth-of-type(1) { background:url(../images/pc/icon_biz_tag_flow_service.png) no-repeat 0 50% } .tag-flow-service .wrap-red-pictogram li:nth-of-type(2) { background:url(../images/pc/icon_biz_tag_flow_service2.png) no-repeat 0 50% } .tag-flow-service .wrap-red-pictogram li:nth-of-type(3) { background:url(../images/pc/icon_biz_tag_flow_service3.png) no-repeat 0 50% } .tag-flow-service .wrap-red-pictogram li:nth-of-type(4) { background:url(../images/pc/icon_biz_tag_flow_service4.png) no-repeat 0 50% } .tag-flow-service .wrap-red-pictogram li:nth-of-type(5) { background:url(../images/pc/icon_biz_tag_flow_service5.png) no-repeat 0 50% } /* ------------------------------ CAREER ------------------------------ */ .career-intro { background:url(../images/p_sub_top_career.jpg) no-repeat 50% 0; background-attachment: fixed } /* 인사제도 */ .career-insa .wrap-red-pictogram li:nth-of-type(1) { background:url(../images/pc/icon_career_insa.png) no-repeat 0 50% } .career-insa .wrap-red-pictogram li:nth-of-type(2) { background:url(../images/pc/icon_career_insa2.png) no-repeat 0 50% } .career-insa .wrap-red-pictogram li:nth-of-type(3) { background:url(../images/pc/icon_career_insa3.png) no-repeat 0 50% } .career-insa .wrap-red-pictogram li:nth-of-type(4) { background:url(../images/pc/icon_career_insa4.png) no-repeat 0 50% } .career-welfare .wrap-pictogram li[data-pictogram-bg='1'] { background:url(../images/pc/ico_career_welfare.png) no-repeat 50% 0 } .career-welfare .wrap-pictogram li[data-pictogram-bg='2'] { background:url(../images/pc/ico_career_welfare2.png) no-repeat 50% 0 } .career-welfare .wrap-pictogram li[data-pictogram-bg='3'] { background:url(../images/pc/ico_career_welfare3.png) no-repeat 50% 0 } .career-welfare .wrap-pictogram li[data-pictogram-bg='4'] { background:url(../images/pc/ico_career_welfare4.png) no-repeat 50% 0 } .career-welfare .wrap-pictogram li[data-pictogram-bg='5'] { background:url(../images/pc/ico_career_welfare5.png) no-repeat 50% 0 } .career-welfare .wrap-pictogram li[data-pictogram-bg='6'] { background:url(../images/pc/ico_career_welfare6.png) no-repeat 50% 0 } .career-welfare .wrap-pictogram li[data-pictogram-bg='7'] { background:url(../images/pc/ico_career_welfare7.png) no-repeat 50% 0 } .career-welfare .wrap-pictogram li[data-pictogram-bg='8'] { background:url(../images/pc/ico_career_welfare8.png) no-repeat 50% 0 } .career-welfare .wrap-pictogram li[data-pictogram-bg='9'] { background:url(../images/pc/ico_career_welfare9.png) no-repeat 50% 0 } .career-welfare .wrap-pictogram li[data-pictogram-bg='10'] { background:url(../images/pc/ico_career_welfare10.png) no-repeat 50% 0 } .career-welfare .wrap-pictogram li[data-pictogram-bg='11'] { background:url(../images/pc/ico_career_welfare11.png) no-repeat 50% 0 } .career-welfare .wrap-pictogram li[data-pictogram-bg='12'] { background:url(../images/pc/ico_career_welfare12.png) no-repeat 50% 0 } .career-welfare .wrap-pictogram li[data-pictogram-bg='13'] { background:url(../images/pc/ico_career_welfare13.png) no-repeat 50% 0 } .career-welfare .wrap-pictogram li[data-pictogram-bg='14'] { background:url(../images/pc/ico_career_welfare14.png) no-repeat 50% 0 } .career-welfare .wrap-pictogram li[data-pictogram-bg='15'] { background:url(../images/pc/ico_career_welfare15.png) no-repeat 50% 0 } .career-welfare .wrap-pictogram li[data-pictogram-bg='16'] { background:url(../images/pc/ico_career_welfare16.png) no-repeat 50% 0 } .career-welfare .wrap-pictogram li[data-pictogram-bg='17'] { background:url(../images/pc/ico_career_welfare17.png) no-repeat 50% 0 } /* 모집공고 */ .career-job { background-color:#f6f6f6 } .career-job li { border-top:1px solid #303244; padding:42px; margin-top:80px; background:#fff url(../images/btn_career_job.png) no-repeat bottom 42px right 42px; -webkit-box-shadow:20px 20px 40px rgba(0, 0, 0, 0.1); -moz-box-shadow:20px 20px 40px rgba(0, 0, 0, 0.1); box-shadow:20px 20px 40px rgba(0, 0, 0, 0.1) } .career-job li:nth-of-type(1) { margin-top:0 } .career-job li .p-big { font-size:30px; font-weight:200; margin-bottom:30px } .career-job li .p-small { font-size:16px } .career-job li a { display:block } .career-job li.nothing { display:table; width:100%; box-shadow:none; background:none; background-color:#efefef; border:1px solid #e3e3e3; box-sizing:border-box } .career-job li.nothing p { display:table-cell; vertical-align:middle } .career-job li.nothing .p-big { color:#999; text-align:center } /* ------------------------------ CONTACT ------------------------------ */ /* intro */ .contact-intro { background:url(../images/p_sub_top_contact.jpg) no-repeat 50% 0; background-attachment: fixed } .contact-sub .choice { overflow:hidden } .contact-sub .choice li { float:left; width:calc(100% / 4 - 39px); margin-left:52px; border:1px solid #e3e3e3; background:url(../images/bg_contact_check_off.png) no-repeat bottom 40px left 40px; box-sizing:border-box } .contact-sub .choice li.on { background:url(../images/bg_contact_check_on.png) no-repeat bottom 40px left 40px } .contact-sub .choice li:nth-of-type(1) { margin-left:0 } .contact-sub .choice dt { font-size:30px; font-weight:300; padding-bottom:18px } .contact-sub .choice li a { display:block; padding:40px 40px 80px 40px; height:100% } .contact-sub .wrap-inquiry { display:none } .contact-sub .privacy { overflow:hidden } .contact-sub .privacy { border-top:1px solid #e2e2e2; border-bottom:1px solid #e2e2e2 } .contact-sub .privacy ol { padding:10px 0 40px 0; height:300px; overflow:hidden; overflow-y:scroll; box-sizing:border-box } .contact-sub .privacy ol > li { list-style:decimal; margin-left:20px; padding:10px } .contact-sub .privacy li li { list-style:disc; margin-left:20px } .contact-sub .privacy li ul { margin-top:10px } .contact-sub .privacy .h-tit { padding:20px 0 10px 0; font-weight:500 } .contact-sub .privacy button { display:none } .contact-sub .chk-box { padding:10px 0 } .contact-sub .chk-box input { margin-right:10px } .contact-sub .chk-box button { display:none } .contact-sub form legend { overflow:hidden; width:1px; height:1px; font-size:0; line-height:0; text-indent:-9999px } .contact-sub .inquiry { margin-top:80px } .contact-sub .inquiry label { float:left; width:160px; padding-top:10px } .contact-sub .inquiry p { padding:10px 0; border-top:1px solid #e3e3e3 } .contact-sub .inquiry input { border:0; background-color:#fff; width:20%; padding:10px } .contact-sub .inquiry p:nth-of-type(1) { border-top:0 } .contact-sub .inquiry p:nth-of-type(1) input { width:calc(100% - 180px) } .contact-sub .inquiry select { border:0; background-color:#fff; padding:10px } .contact-sub .inquiry textarea { width:calc(100% - 180px); border:0; background-color:#fff; padding:10px } .contact-sub .inquiry .btn-box { padding-top:40px; text-align:right } .contact-sub .inquiry .btn-box button { width:146px; height:54px; line-height:54px; background-color:#303244; border:0; color:#fff; cursor:pointer } .contact-sub .inquiry .btn-box button:nth-of-type(1) { background-color:#c8c8c8; margin-right:20px } .contact-sub .inquiry [data-value] { display:none } /* ------------------------------ PRIVACY ------------------------------ */ .privacy-sub { margin-top:150px } .privacy-sub .heading { padding-bottom:40px !important } .privacy-sub .heading h2 { padding-bottom:20px; font-size:24px; font-weight:500 } .privacy-sub .privacy { overflow:hidden } .privacy-sub .privacy p { padding-bottom:20px } .privacy-sub .privacy h3 { padding-top:40px; padding-bottom:20px; font-size:18px } .privacy-sub .privacy dl { padding-left:20px } .privacy-sub .privacy dt { padding:20px 0 10px 0; font-weight:500 } .privacy-sub .privacy dd { padding-left:8px } .privacy-sub .privacy dt::before { content:"-"; display:inline-block; padding-right:5px; font-size:12px; font-weight:500 } .privacy-sub .privacy dd:last-child { padding-bottom:20px } .privacy-sub .privacy .belit-box { padding-left:20px } .privacy-sub .privacy .belit-box p { font-weight:500 } .privacy-sub .privacy .belit-box p::before { content:"-"; display:inline-block; padding-right:5px; font-size:12px; font-weight:500 } .privacy-sub .privacy ol li { padding:10px; padding-left:0 } .privacy-sub .privacy li dl { padding-left:0 } /* ------------------------------ SEARCH ------------------------------ */ .search_sale_notice { padding: 20px; margin-top: 20px; display: inline-block; border-top:1px solid #303244; border-bottom:1px solid #303244 } .search_sale_notice b { display:inline-block; color: #f63d3d; font-weight: 600; vertical-align: top } /* ================================================= Large devices (desktops, less than 1600px) ================================================= */ @media (max-width: 1620px) { /* ------------------------------ COMMON ------------------------------ */ /* common */ .wrap-pd { padding:0 80px } /* sitemap */ .sec-sitemap .wrap-menu ul{overflow:hidden} .sec-sitemap .wrap-menu .btn-soybeanshp {float:right;margin:40px 6% 0 0} .sec-sitemap .wrap-menu .btn-soybeanshp a {position:static;float:left;margin-left:40px} .sec-sitemap .wrap-menu .btn-soybeanshp .btn_eng{position:relative;margin-top:4px;top:auto;right:auto} .sec-sitemap .wrap-menu .btn-soybeanshp .btn_eng:after{right:-20px} /* footer */ .footer .wrap-family { right:80px } /* ------------------------------ MAIN ------------------------------ */ /* main video */ .div-video .div-txt p { font-size:40px } /* ------------------------------ COMPANY ------------------------------ */ /* history */ .company-history .bxslider-history li span:nth-of-type(2) { width:25% } .company-history .wrap-photo figure { width:350px } .company-history .wrap-photo figure:nth-of-type(1) { float:inherit } /* ------------------------------ PRODUCT ------------------------------ */ /* product list */ .sec-prolist li { width:calc(99.9% / 3 - 40px) } .sec-prolist li:nth-child(4n+1) { margin-left:60px } .sec-prolist li:nth-child(3n+1) { margin-left:0 } /* product detail */ .sec-prodetail-top h3 { left:0 } .sec-prodetail-top .basic-info { width:55%; width:calc(100% - 560px); min-height:650px } .sec-prodetail-top .basic-info dl:nth-of-type(1) { position:inherit; width:100%; padding-top:80px } .sec-prodetail-top .basic-info .box-btn a { width:calc(100% /2 - 12px); max-width:202px } .sec-prodetail-top .basic-info .box-btn a:nth-of-type(1) { margin-left:0 } .sec-prodetail-top .basic-info .box-btn a.btn-back { display: block; position: absolute; top: 0; right: 0; width: 50px; height: 50px; background: url(../images/sprite.png) no-repeat -52px -540px; text-indent: -9999px } .sec-prodetail-top .box { min-height:650px } .sec-prodetail-top .wrap-thumb-slide { position:absolute; top:80px; left:0; margin-left:0 } .sec-prodetail-top .nav-thumb { position:absolute; top:inherit; left:20px; bottom:0 } /* ------------------------------ BUSINESS ------------------------------ */ /*biz main */ .business-main .wrap-photo figure { width:calc(100% / 2 - 40px); margin-left:40px } /* ------------------------------ CONTACT ------------------------------ */ .contact-sub .choice li {width:calc(100% / 2 - 26px); margin-left:52px; margin-top:52px } .contact-sub .choice li:nth-of-type(2n+1) { margin-left:0 } .contact-sub .choice li:nth-of-type(1) { margin-top:0 } .contact-sub .choice li:nth-of-type(2) { margin-top:0 } .contact-sub .choice li dd { display:inline; margin-right:10px } } /* ================================================= Medium devices (tablets, less than 992px) ================================================= */ @media (max-width: 991px) { /* ---------- COMMON ---------- */ /* common */ .wrap-pd { padding:0 40px } button:focus, input:focus { outline: none } .pfix { position:fixed } .header .wrap-position { text-align:center } .header .wrap-position .ul-box { float:none; position:static; display:inline-block } .header .wrap-position .ul-box::after { content:""; width:20px; height:20px; display:inline-block; background:url(../images/sprite.png) no-repeat right 5px top -714px } .header .wrap-position .ul-box.on::after { background-position:right 5px top -694px } .header .wrap-position.on .ul-box::after { content:""; width:20px; height:20px; display:inline-block; background:url(../images/sprite.png) no-repeat right 5px top -510px } .header .wrap-position.on .ul-box.on::after { background-position:right 5px top -490px } .header .wrap-position[data-url='product'] .ul-box::after { content:""; width:20px; height:20px; display:inline-block; background:url(../images/sprite.png) no-repeat right 5px top -510px } .header .wrap-position[data-url='product'] .ul-box.on::after { background-position:right 5px top -490px } .header .wrap-position .ul-box > li a[data-position] { background:none; padding:0 10px 0 15px } .header .wrap-position .ul-box > li a[data-position].on { background:none } .header .wrap-position[data-url='product'] .ul-box > li a[data-position] { background:none; padding:0 10px 0 15px } .header .wrap-position[data-url='product'] .ul-box > li a[data-position].on { background:none } .header .wrap-position .ul-box > li { position:static; background-position: left 0 top -674px } .header .wrap-position .ul-box > li:nth-of-type(1) { padding:0 10px } .header .wrap-position[data-url='product'] .ul-box > li { position:static; background-position: left 0 top -470px } .header .wrap-position[data-url='product'] .ul-box > li:nth-of-type(1) { padding:0 10px } .header .wrap-position.on .ul-box > li { position:static; background:url(../images/sprite.png) no-repeat left 0 top -470px } .header .wrap-position .ul-box > li ul { position:absolute; top:40px; left:0; width:100%; background-color:#fff; border:0 } .header .wrap-position .ul-box > li ul li a { width:100% !important; padding:10px 0; text-align:center } .header .wrap-position .ul-box > li:last-child ul li a { width:100% } .header .wrap-position .ul-box > li ul::after { content:""; margin-top:15px; height:40px; width:100%; display:block; background:#303244 url(../images/sprite.png) no-repeat 50% -400px } .header .wrap-position button { display:none; position:absolute; top:-8px; left:20px; width:40px; height:40px; background:url(../images/sprite.png) no-repeat 20px -636px; border:0; overflow:hidden; text-indent:300%; white-space:nowrap; cursor:pointer } .header .wrap-position[data-url='business'] button { background-position: top -734px left 20px } .header .wrap-position.posi-on[data-url='business'] button { background-position: top -636px left 20px } .header .wrap-position.on[data-url='business'] button { background-position: top -636px left 20px } .header .wrap-position.posi-on { background-color:#fff; color:#303244 } .header .wrap-position.posi-on [data-position]{ color:#303244 } .header .wrap-position.posi-on .ul-box::after { content:""; width:20px; height:20px; display:inline-block; background:url(../images/sprite.png) no-repeat right 5px top -510px } .header .wrap-position.posi-on .ul-box.on::after { background-position:right 5px top -490px } .header .wrap-position.posi-on .ul-box > li { position:static; background:url(../images/sprite.png) no-repeat left 0 top -470px } .header .wrap-position.posi-on .ul-box > li:nth-of-type(1) { background:none } .wrap-red-pictogram li { float:none; width:100%; margin-left:0 } /*header*/ .header { background-position:top 0 left 0 } .header .wrap-pd { height:60px } .header h1 { margin-top:18px } .header h1 img { width:230px; height:auto } .header .wrap-nav { margin-top:10px; width:inherit } .header .wrap-nav ul { display:none } .header .wrap-nav button[data-btn="mgnb"] { display:block; float:right; width:40px; height:40px; border:0; cursor:pointer; background:url(../images/sprite.png) no-repeat -69px -78px; overflow:hidden; text-indent:300%; white-space:nowrap } .header .wrap-nav button[data-btn="mgnb"].on { background:#303244 url(../images/sprite.png) no-repeat right 10px top -162px } .header .wrap-nav button[data-btn="gnb"] { display:none } .header.on { background-color:#303244 } .header.transition-non { background-color:#303244; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } .header.transition-non .wrap-position { display:none !important } /* site map */ .sec-sitemap { display:none; position:fixed; top:0; left:0; width:100%; height:100%; padding:0 !important; background-color:#fff; overflow:inherit; z-index:400 } .sec-sitemap .wrap-menu { margin-top:61px; overflow:hidden; overflow-y:auto; height:calc(100% - 61px) } .sec-sitemap .wrap-menu form { position:relative; display:block; margin-top:50px; margin-bottom:70px; border-bottom:0 } .sec-sitemap .wrap-menu form .box { width:70% } .sec-sitemap .wrap-menu form input { width:80%; width:calc(99% - 40px); height:60px; font-size:18px } .sec-sitemap .wrap-menu ul { margin:0 auto; max-width:inherit } .sec-sitemap .wrap-menu ul [data-menu] { float:none; width:inherit; text-align:left } .sec-sitemap .wrap-menu ul li { text-indent:40px; overflow:hidden; } .sec-sitemap .wrap-menu ul li a { display:inline-block; margin-bottom:0; padding:20px 40px; font-size:14px; color:#303244 } .sec-sitemap .wrap-menu ul [data-menu] p { position:relative } .sec-sitemap .wrap-menu ul [data-menu] p a { font-weight:200; font-size:18px; padding:16px 0 } .sec-sitemap .wrap-menu ul [data-menu] p button { display:block; position:absolute; top:10px; right:20px; width:40px !important; height:40px !important; background: url(../images/sprite.png) no-repeat right 14px top -250px } .sec-sitemap .wrap-menu ul [data-menu] p button.on { background:url(../images/sprite.png) no-repeat right 14px top -309px } .sec-sitemap .wrap-menu ul [data-menu] li { margin-top:0; background-color:#f6f6f6 } .sec-sitemap .wrap-menu ul [data-menu] li:nth-of-type(1) { margin-top:0 } .sec-sitemap .wrap-menu ul [data-menu] ul { display:none } .sec-sitemap .wrap-menu .btn-soybeanshp {float:none;padding:30px 80px;margin:0;text-align:center} .sec-sitemap .wrap-menu .btn-soybeanshp a {display:inline-block;float:none;width:60px;margin:0;vertical-align:top} .sec-sitemap .wrap-menu .btn-soybeanshp a {margin-left:50px} .sec-sitemap .wrap-menu .btn-soybeanshp a span { display:block;} .sec-sitemap .wrap-menu .btn-soybeanshp a strong { display:block;} .sec-sitemap .wrap-menu .btn-soybeanshp .btn_eng{position:relative;margin:4px 0 0 0} .sec-sitemap .wrap-menu .btn-soybeanshp .btn_eng:after{right:-22px} .sec-sitemap .wrap-menu .btn-soybeanshp .btn_wholesoymilk{padding-left:55px} /* footer */ .footer { height:200px } .footer .wrap-pd { padding-top:70px; text-align:center } .footer address { float:none } .footer address span::after { display:none } .footer .btn-privacy { margin:20px 0 } .footer .wrap-family { position:absolute; top:0; right:inherit; left:0; width:100%; border-bottom:1px solid #3a3c52; text-align:left } .footer .wrap-family button { border-bottom:none; width:100%; text-align:left; text-indent:30px; background:#292a33 url(../images/sprite.png) no-repeat right 40px top -122px } .footer .wrap-family button.on { background:#292a33 url(../images/sprite.png) no-repeat right 40px top -40px } .footer .wrap-family .site { width:100%; border-top:1px solid #e3e3e3 } .footer .wrap-family .site li { width:100%; text-indent:40px } /* sub common */ .sec-sub-design { padding:80px 0 80px 0 } .sec-sub-design .heading { padding-bottom:70px } .sec-sub-design .cont-position.mgt { margin-top:20px } .sec-sub-design .cont-position .tx-info { margin-top:20px } .sec-sub-design .visual-slide { max-height:100% } .swiper-btn-square button { display:none } .sec-sub-design .bx-wrapper .bx-has-pager { display:none } .div-sub-header { height:480px; background-size:auto 480px } .div-sub-header h2 { width:80% } .div-sub-header p { width:80% } .wrap-pictogram li { width:calc(99.9% / 3 - 30px); margin-left:45px; margin-top:45px } .wrap-pictogram li:nth-of-type(4n+1) { margin-left:45px } .wrap-pictogram li:nth-of-type(-n+4) { margin-top:45px } .wrap-pictogram li:nth-of-type(3n+1) { margin-left:0 } .wrap-pictogram li:nth-of-type(-n+3) { margin-top:0 } .wrap-red-pictogram li { background-size:160px 160px !important } .wrap-pictogram li { background-size:100px 100px !important } .sec-sub-design .btn-main-wrap { padding-top:60px } .sec-sub-design .btn-main-wrap a { width:calc(100 / 2 - 10px); height:47px; width:202px; line-height:47px; max-width:40% } .sec-sub-design .btn-main-wrap a:nth-of-type(1) { margin-left:0 } /* contact question */ .sec-question li { width:calc(100%/2 - 30px); margin-left:60px } /* ------------------------------ MAIN ------------------------------ */ /*main video */ .div-video video { display:none; width:auto; height:100% } .div-video .div-txt { margin-left:-200px; margin-top:-72px; width:400px; font-size:40px } .div-video .div-txt .btn-play { display:block; padding-top:40px } .div-video .div-txt .btn-play button { width:60px; background:url(../images/btn_videoplay.png) no-repeat 0 0; background-size:60px 60px; height:60px; border:0; cursor:pointer; overflow:hidden; text-indent:300%; white-space:nowrap } .div-video .seekbar { display:none } .m-video { position:fixed; top:0; left:0; width:100%; height:100%; background-color:#292a33; z-index:800 } .m-video .box { position:relative; top:50%; left:50%; max-width:640px } .m-video .i-frame { overflow:hidden; width:100%; height:100% } .m-video iframe { border:0; width:100%; height:100% } .m-video .btn-box { text-align:right } .m-video button { background:#f63d3d url(../images/sprite.png) no-repeat top -160px left -72px; width:40px; height:40px; border:0; overflow:hidden; text-indent:300%; white-space:nowrap; cursor:pointer } /* main banner */ .sec-bnr { height:1300px } .sec-bnr .wrap { max-width:380px } .sec-bnr .wrap div { float:none; width:380px; height:380px; margin-left:0 !important; margin-bottom:80px } .sec-bnr .wrap div:nth-of-type(3) { margin-bottom:0 } /* popup */ .pop_bnr.merger { right:50%; margin-right:-250px } .pop_bnr.merger header h2 {padding-right:45px;} /* ------------------------------ COMPANY ------------------------------ */ /* history */ .company-history .wrap-btn-year { border-bottom:0 } .company-history .wrap-btn-year ul { float:none; position:inherit; top:0 } .company-history .wrap-btn-year li { float:left; padding:0; background:none; width:25%; text-align:center } .company-history .bxslider-history { margin:0 auto; width:640px } .company-history .bxslider-history li span { font-size:40px; font-weight:500; width:92px } .company-history .bxslider-history li span:nth-of-type(2) { width:456px; height:60px; background-color:#fff; border-bottom:1px solid #e3e3e3 } .company-history .wrap-photo { float:left; width:100%; margin-top:58px } .company-history .wrap-photo figure { float:right; width:100%; max-width:400px } .company-history .wrap-photo figure:nth-of-type(1) { float:left } .company-history .wrap-history .box-position { float:none; width:640px; margin:0 auto } .company-history .wrap-history .btn-page { float:none; text-align:center } .company-history .wrap-history .btn-page li { float:none; display:inline-block } .company-history .wrap-btn-year li span { padding-left:0 } .company-history .wrap-btn-year li span:nth-of-type(2) { padding-left:20px } /* group */ .company-group .cont-group li { width:calc(100% / 2 - 19px); margin-left:38px; margin-bottom:38px } .company-group .cont-group li:nth-of-type(1) { margin-left:0 } .company-group .cont-group li:nth-of-type(3) { margin-left:0 } .company-group .cont-group li:nth-of-type(4) { margin-left:38px } .company-group .cont-group li:nth-of-type(5) { margin-left:0 } .company-map .wrap-map { height:400px } /* ------------------------------ PRODUCT ------------------------------ */ /* product main banner */ .div-bnr-pro .pmain-visual-slide { padding:0 } .div-bnr-pro { margin-top:120px } .div-bnr-pro button { width:47px; height:47px; border:0; cursor:pointer; overflow:hidden; text-indent:300%; white-space:nowrap } .div-bnr-pro button[data-brnbtn="prev"] { left:0 } .div-bnr-pro button[data-brnbtn="next"] { right:0 } .progress_bar { height:5px } .sec-prolist.mgt { margin-top:110px } .sec-prolist h3 { font-size:32px; text-align:center } .sec-prolist .hed .p-small { text-align:center } .sec-prolist li { width:calc(100% / 2 - 20px); margin-left:40px; margin-bottom:40px } .sec-prolist li:nth-child(4n+1) { margin-left:40px } .sec-prolist li:nth-child(3n+1) { margin-left:40px } .sec-prolist li:nth-child(2n+1) { margin-left:0 } .div-bnr-pro button { display:none } /* product detail */ .sec-prodetail-top { padding-top:0 } .sec-prodetail-top .wrap-pd { padding:0 } .sec-prodetail-top h3 { position:inherit; top:inherit; left:inherit; font-size:34px } .sec-prodetail-top .wrap-thumb-slide { position:relative; top:-20px; left:inherit; margin:0 auto; max-width:420px } .sec-prodetail-top .wrap-thumb-slide .swiper-container { margin:0 auto; max-width:420px } .sec-prodetail-top .basic-info { padding:40px 40px 0 40px; clear:both; float:none; width:100%; min-height:0; box-sizing:border-box } .sec-prodetail-top .basic-info dl:nth-of-type(1) { padding-top:50px } .sec-prodetail-top .basic-info .box-btn { text-align:center } .sec-prodetail-top .basic-info .box-btn a.btn-back { display: none } .sec-prodetail-top .nav-thumb { display:none; position:inherit; top:inherit; left:0; bottom:inherit; margin:20px auto 0 } .sec-prodetail-top .swiper-btn { display:block } .sec-prodetail-top .swiper-btn button[data-brnbtn="prev"] { left:-47px } .sec-prodetail-top .swiper-btn button[data-brnbtn="next"] { right:-47px } .sec-prodetail-bottom .detail-info { padding:0 40px } .sec-prodetail-bottom .detail-info img { width:100% !important } /* ------------------------------ BUSINESS ------------------------------ */ /* biz main */ .business-main .main-visual-slide { float:inherit; margin:0 auto; position:relative; width:100%; max-width:695px } .business-main .wrap-photo { float:inherit; margin:0 auto; width:100%; max-width:695px } .business-main .wrap-photo figure { float:left; width:calc(100% / 2 - 30px); margin-left:60px; margin-top:60px } .business-main .wrap-photo figure:nth-of-type(1) {margin-left:0 } .business-main-other .cont-group li { position:relative; float:left; width:calc(100% / 2 - 30px); margin-left:60px; margin-bottom:60px } .business-main-other .cont-group li p { padding:20px } .business-main-other .cont-group li p strong { font-size:20px } .business-main-other .cont-group li:nth-of-type(even) { top:60px } .business-sub section { margin-top:100px } .business-sub .wrap-thumb li { width:calc(100% / 2 - 30px) } .business-sub .wrap-thumb li:nth-of-type(3n+1) { margin-left:60px } .business-sub .wrap-thumb li:nth-of-type(2n+1) { margin-left:0 } /* biz main notice */ .biz-main-notice li { margin-top:40px } /* business pictogram */ .business-sub .wrap-pictogram.healthcare li[data-pictogram-bg='1'] { background:url(../images/mobile/ico_biz_it_healthcare.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.healthcare li[data-pictogram-bg='2'] { background:url(../images/mobile/ico_biz_it_healthcare2.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.healthcare li[data-pictogram-bg='3'] { background:url(../images/mobile/ico_biz_it_healthcare3.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.healthcare li[data-pictogram-bg='4'] { background:url(../images/mobile/ico_biz_it_healthcare4.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.hmp li[data-pictogram-bg='1'] { background:url(../images/mobile/ico_biz_it_hmp.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.hmp li[data-pictogram-bg='2'] { background:url(../images/mobile/ico_biz_it_hmp2.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.hmp li[data-pictogram-bg='3'] { background:url(../images/mobile/ico_biz_it_hmp3.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.keidas[data-pictogram='1'] li[data-pictogram-bg='1'] { background:url(../images/mobile/ico_biz_it_keidas_a1.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.keidas[data-pictogram='1'] li[data-pictogram-bg='2'] { background:url(../images/mobile/ico_biz_it_keidas_a2.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.keidas[data-pictogram='1'] li[data-pictogram-bg='3'] { background:url(../images/mobile/ico_biz_it_keidas_a3.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.keidas[data-pictogram='1'] li[data-pictogram-bg='4'] { background:url(../images/mobile/ico_biz_it_keidas_a4.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.keidas[data-pictogram='1'] li[data-pictogram-bg='5'] { background:url(../images/mobile/ico_biz_it_keidas_a5.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.keidas[data-pictogram='1'] li[data-pictogram-bg='6'] { background:url(../images/mobile/ico_biz_it_keidas_a6.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.keidas[data-pictogram='1'] li[data-pictogram-bg='7'] { background:url(../images/mobile/ico_biz_it_keidas_a7.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.keidas[data-pictogram='1'] li[data-pictogram-bg='8'] { background:url(../images/mobile/ico_biz_it_keidas_a8.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.keidas[data-pictogram='2'] li[data-pictogram-bg='1'] { background:url(../images/mobile/ico_biz_it_keidas_b1.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.keidas[data-pictogram='2'] li[data-pictogram-bg='2'] { background:url(../images/mobile/ico_biz_it_keidas_b2.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.keidas[data-pictogram='2'] li[data-pictogram-bg='3'] { background:url(../images/mobile/ico_biz_it_keidas_b3.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.keidas[data-pictogram='2'] li[data-pictogram-bg='4'] { background:url(../images/mobile/ico_biz_it_keidas_b4.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.keidas[data-pictogram='2'] li[data-pictogram-bg='5'] { background:url(../images/mobile/ico_biz_it_keidas_b5.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.keidas[data-pictogram='2'] li[data-pictogram-bg='6'] { background:url(../images/mobile/ico_biz_it_keidas_b6.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.keidas[data-pictogram='2'] li[data-pictogram-bg='7'] { background:url(../images/mobile/ico_biz_it_keidas_b7.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.keidas[data-pictogram='2'] li[data-pictogram-bg='8'] { background:url(../images/mobile/ico_biz_it_keidas_b8.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.vkinny[data-pictogram='1'] li[data-pictogram-bg='1'] { background:url(../images/mobile/ico_biz_it_vkinny1.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.vkinny[data-pictogram='1'] li[data-pictogram-bg='2'] { background:url(../images/mobile/ico_biz_it_vkinny2.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.vkinny[data-pictogram='1'] li[data-pictogram-bg='3'] { background:url(../images/mobile/ico_biz_it_vkinny3.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.rfprisma[data-pictogram='1'] li[data-pictogram-bg='1'] { background:url(../images/mobile/ico_biz_it_rfprisma.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.rfprisma[data-pictogram='1'] li[data-pictogram-bg='2'] { background:url(../images/mobile/ico_biz_it_rfprisma2.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.rfprisma[data-pictogram='1'] li[data-pictogram-bg='3'] { background:url(../images/mobile/ico_biz_it_rfprisma3.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.rfprisma[data-pictogram='1'] li[data-pictogram-bg='4'] { background:url(../images/mobile/ico_biz_it_rfprisma4.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.rfprisma[data-pictogram='1'] li[data-pictogram-bg='5'] { background:url(../images/mobile/ico_biz_it_rfprisma5.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.wappleshop-customer-service li[data-pictogram-bg='1'] { background:url(../images/mobile/ico_biz_it_wappleshop_customer_service1.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.wappleshop-customer-service li[data-pictogram-bg='2'] { background:url(../images/mobile/ico_biz_it_wappleshop_customer_service2.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.wappleshop-customer-service li[data-pictogram-bg='3'] { background:url(../images/mobile/ico_biz_it_wappleshop_customer_service3.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.wappleshop-customer-service li[data-pictogram-bg='4'] { background:url(../images/mobile/ico_biz_it_wappleshop_customer_service4.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.wappleshop-customer-service li[data-pictogram-bg='5'] { background:url(../images/mobile/ico_biz_it_wappleshop_customer_service5.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.wappleshop-customer-service li[data-pictogram-bg='6'] { background:url(../images/mobile/ico_biz_it_wappleshop_customer_service6.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.wappleshop-customer-service li[data-pictogram-bg='7'] { background:url(../images/mobile/ico_biz_it_wappleshop_customer_service7.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.wappleshop-customer-service li[data-pictogram-bg='8'] { background:url(../images/mobile/ico_biz_it_wappleshop_customer_service8.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.wappleshop-supporting-service li[data-pictogram-bg='1'] { background:url(../images/mobile/ico_biz_it_wappleshop_supporting_service1.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.wappleshop-supporting-service li[data-pictogram-bg='2'] { background:url(../images/mobile/ico_biz_it_wappleshop_supporting_service2.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.wappleshop-supporting-service li[data-pictogram-bg='3'] { background:url(../images/mobile/ico_biz_it_wappleshop_supporting_service3.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.wappleshop-service-flow li[data-pictogram-bg='1'] { background:url(../images/mobile/ico_biz_it_keidas_a1.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.wappleshop-service-flow li[data-pictogram-bg='2'] { background:url(../images/mobile/ico_biz_it_keidas_a2.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.wappleshop-service-flow li[data-pictogram-bg='3'] { background:url(../images/mobile/ico_biz_it_keidas_a3.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.wappleshop-service-flow li[data-pictogram-bg='4'] { background:url(../images/mobile/ico_biz_it_keidas_a4.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.wappleshop-service-flow li[data-pictogram-bg='5'] { background:url(../images/mobile/ico_biz_it_keidas_a5.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.tag-list li[data-pictogram-bg='1'] { background:url(../images/mobile/ico_biz_it_tag_list1.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.tag-list li[data-pictogram-bg='2'] { background:url(../images/mobile/ico_biz_it_tag_list2.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.tag-list li[data-pictogram-bg='3'] { background:url(../images/mobile/ico_biz_it_tag_list3.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.tag-list li[data-pictogram-bg='4'] { background:url(../images/mobile/ico_biz_it_tag_list4.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.tag-list li[data-pictogram-bg='5'] { background:url(../images/mobile/ico_biz_it_tag_list5.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.tag-list li[data-pictogram-bg='6'] { background:url(../images/mobile/ico_biz_it_tag_list6.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.tag-list li[data-pictogram-bg='7'] { background:url(../images/mobile/ico_biz_it_tag_list7.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.tag-list li[data-pictogram-bg='8'] { background:url(../images/mobile/ico_biz_it_tag_list8.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.tag-list li[data-pictogram-bg='9'] { background:url(../images/mobile/ico_biz_it_tag_list9.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.tag-list li[data-pictogram-bg='10'] { background:url(../images/mobile/ico_biz_it_tag_list10.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.tag-list li[data-pictogram-bg='11'] { background:url(../images/mobile/ico_biz_it_tag_list11.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.tag-list li[data-pictogram-bg='12'] { background:url(../images/mobile/ico_biz_it_tag_list12.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.tag-list li[data-pictogram-bg='13'] { background:url(../images/mobile/ico_biz_it_tag_list13.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.tag-list li[data-pictogram-bg='14'] { background:url(../images/mobile/ico_biz_it_tag_list14.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.tag-list li[data-pictogram-bg='15'] { background:url(../images/mobile/ico_biz_it_tag_list15.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.tag-list li[data-pictogram-bg='16'] { background:url(../images/mobile/ico_biz_it_tag_list16.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.tag-list li[data-pictogram-bg='17'] { background:url(../images/mobile/ico_biz_it_tag_list17.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.tag-list li[data-pictogram-bg='18'] { background:url(../images/mobile/ico_biz_it_tag_list18.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.tag-list li[data-pictogram-bg='19'] { background:url(../images/mobile/ico_biz_it_tag_list19.png) no-repeat 50% 0 } .business-sub .wrap-pictogram.tag-list li[data-pictogram-bg='20'] { background:url(../images/mobile/ico_biz_it_tag_list20.png) no-repeat 50% 0 } .wappleshop-flow-service .wrap-red-pictogram li:nth-of-type(1) { background:url(../images/mobile/icon_biz_wappleshop_flow_service.png) no-repeat 0 50% } .wappleshop-flow-service .wrap-red-pictogram li:nth-of-type(2) { background:url(../images/mobile/icon_biz_wappleshop_flow_service2.png) no-repeat 0 50% } .wappleshop-flow-service .wrap-red-pictogram li:nth-of-type(3) { background:url(../images/mobile/icon_biz_wappleshop_flow_service3.png) no-repeat 0 50% } .wappleshop-flow-service .wrap-red-pictogram li:nth-of-type(4) { background:url(../images/mobile/icon_biz_wappleshop_flow_service4.png) no-repeat 0 50% } .wappleshop-flow-service .wrap-red-pictogram li:nth-of-type(5) { background:url(../images/mobile/icon_biz_wappleshop_flow_service5.png) no-repeat 0 50% } .tag-flow-service .wrap-red-pictogram li:nth-of-type(1) { background:url(../images/mobile/icon_biz_tag_flow_service.png) no-repeat 0 50% } .tag-flow-service .wrap-red-pictogram li:nth-of-type(2) { background:url(../images/mobile/icon_biz_tag_flow_service2.png) no-repeat 0 50% } .tag-flow-service .wrap-red-pictogram li:nth-of-type(3) { background:url(../images/mobile/icon_biz_tag_flow_service3.png) no-repeat 0 50% } .tag-flow-service .wrap-red-pictogram li:nth-of-type(4) { background:url(../images/mobile/icon_biz_tag_flow_service4.png) no-repeat 0 50% } .tag-flow-service .wrap-red-pictogram li:nth-of-type(5) { background:url(../images/mobile/icon_biz_tag_flow_service5.png) no-repeat 0 50% } /* ------------------------------ CAREER ------------------------------ */ /* 모집공고 */ .career-job li { margin-top:40px } /* ------------------------------ CONTACT ------------------------------ */ .contact-sub .choice li {width:calc(100% / 2 - 20px); margin-left:40px; margin-top:40px } .contact-sub .choice li a { padding:40px 40px 80px 40px } } /* ================================================= Small devices (landscape phones, less than 768px) ================================================= */ @media (max-width: 767px) { /* ------------------------------ COMMON ------------------------------ */ /* 한예진 영상 */ .__mvpop {bottom:20px;right:20px;} .__mvpop a {width:95px;height:107.5px;background-image:url(https://www.wholesoymilk.com/resources/front/image/mvpop-m.png);background-size:contain;} .__mvpop .close {background:transparent;right:0;top:0;width:30px;height:30px;} /* common */ .wrap-pd { padding:0 20px } /* sub common */ .sec-sub-design .heading .p-big { font-size:26px } .sec-sub-design { padding:50px 0 50px 0 } .sec-sub-design .heading { padding-bottom:40px } .sec-sub-design .heading h3 { font-size:18px } .sec-sub-design .heading h4 { font-size:24px } .sec-sub-design .btn-main-wrap a { height:47px; line-height:47px } .header .wrap-position button { left:0 } .wrap-pictogram li { width:calc(100% / 2 - 10px); margin-left:20px; margin-top:20px } .wrap-pictogram li:nth-of-type(4n+1) { margin-left:20px } .wrap-pictogram li:nth-of-type(-n+4) { margin-top:20px } .wrap-pictogram li:nth-of-type(3n+1) { margin-left:20px } .wrap-pictogram li:nth-of-type(-n+3) { margin-top:20px } .wrap-pictogram li:nth-of-type(2n+1) { margin-left:0 } .wrap-pictogram li:nth-of-type(-n+2) { margin-top:0 } .sec-sub-design .cont-box.mgt { margin-top:50px } .div-sub-header { height:480px } .div-sub-header h2 { max-width:300px; font-size:30px } .div-sub-header p { max-width:300px; font-size:16px } .div-bnr-pro .pmain-visual-slide { max-height:100% } /* sitemap */ .sec-sitemap .wrap-menu ul li { text-indent:20px } .sec-sitemap .wrap-menu ul [data-menu] > a { background-position: right 32px top -240px } .sec-sitemap .wrap-menu ul [data-menu] > a.on { background-position: right 32px top -299px } .sec-sitemap .wrap-menu .btn-soybeanshp { padding:30px 0 } /* footer */ .footer .wrap-family button { text-indent:10px; background-position:right 20px top -122px } .footer .wrap-family button.on { background-position:right 20px top -40px } /* contact question */ .sec-question li { float:inherit; width:100%; margin-left:0 } .sec-question li:nth-of-type(2) { margin-top:20px } /* ------------------------------ MAIN ------------------------------ */ /* main video */ .div-video .div-txt { margin-left:-200px; margin-top:-57px; width:400px; font-size:32px } /* main banner */ .sec-bnr { height:920px } .sec-bnr .wrap { max-width:280px } .sec-bnr .wrap div { width:280px !important; height:280px; margin-bottom:40px; background-position:50% 0 } .sec-bnr .wrap div:nth-of-type(2) { background-position:50% 0 } .sec-bnr .wrap div:nth-of-type(3) { background-position:50% 0 } .sec-bnr .wrap div h2 { padding:180px 0 25px 0; font-size:18px } .sec-bnr .wrap div a { font-size:14px } /* ------------------------------ COMPANY ------------------------------ */ /* mission */ .company-mission .wrap-red-pictogram li { background-size:160px 160px !important } .company-mission .wrap-red-pictogram li:nth-of-type(1) { background:url(../images/mobile/icon_company_mission1.png) no-repeat 0 50% } .company-mission .wrap-red-pictogram li:nth-of-type(2) { background:url(../images/mobile/icon_company_mission2.png) no-repeat 0 50% } .company-mission .wrap-red-pictogram li:nth-of-type(3) { background:url(../images/mobile/icon_company_mission3.png) no-repeat 0 50% } /* history */ .company-history .heading { margin-bottom:10px } .company-history .bxslider-history { margin:0 auto; width:300px } .company-history .bxslider-history li span { font-size:40px; font-weight:500; width:92px } .company-history .bxslider-history li span:nth-of-type(2) { width:116px; height:60px; background-color:#fff; border-bottom:1px solid #e3e3e3 } .company-history .wrap-history .box-position { float:none; width:100% } .company-history .wrap-btn-year li span { font-size:12px } .company-history .wrap-btn-year li span:nth-of-type(2) { padding-left:10px } .company-history .wrap-history .cont-page li { padding-top:15px } .company-mission .mission li { width:100%; max-width:300px; margin:0 auto !important; padding:200px 0 0 0; background-position:50% 20px !important; text-align:center; margin-bottom:20px } .company-mission .mission li p { padding-bottom:20px } /* map */ .company-map .map-position { padding:20px; width:100%; max-width:300px; box-sizing:border-box } .company-map .map-position h4 { margin-bottom:20px; text-align:center; font-size:18px; font-weight:500 } .company-map .map-position dt { clear:both; float:left } .company-map .map-position dd { padding-left: 50px; font-size:12px } /* ------------------------------ PRODUCT ------------------------------ */ /* product main */ .sec-prolist li { width:calc(100% / 2 - 10px); margin-left:20px; margin-bottom:20px } .sec-prolist li:nth-child(3n+1) { margin-left:20px } .sec-prolist li:nth-child(2n+1) { margin-left:0 } /* product detail */ .sec-prodetail-top h3 { font-size:24px } .sec-prodetail-top .nav-thumb { width:280px } .sec-prodetail-top .nav-thumb li { width:calc(100% /3 - 12px); margin-left:18px } .sec-prodetail-top .basic-info { margin-bottom:50px; padding:30px 20px 0 20px } .sec-prodetail-top .basic-info dl:nth-of-type(1) { padding-top:40px } .sec-prodetail-top .basic-info .box-btn a { height:47px; line-height:47px } .sec-prodetail-bottom .detail-info { padding:0 20px } .sec-prodetail-bottom .detail-info dl { background-color:#fff; display:inherit } .sec-prodetail-bottom .detail-info dl:nth-of-type(1) { border:0 } .sec-prodetail-bottom .detail-info dt { width:100%; display:inherit; padding:10px 0 5px 0 } .sec-prodetail-bottom .detail-info dd { width:100%; display:inherit; padding:5px 0 10px 0} /* .sec-prodetail-bottom .detail-info img { max-width:320px } */ /* ------------------------------ BUSINESS ------------------------------ */ .nav-biz-sub .swiper_btn button[data-brnbtn="prev"] { left:-20px } .nav-biz-sub .swiper_btn button[data-brnbtn="next"] { right:-20px } .nav-biz-sub .swiper-container { overflow:inherit !important } .business-main .wrap-photo { max-width:320px } .business-main .wrap-photo figure { float:inherit; width:100%; margin-left:0; margin-top:60px } .business-sub section { margin-top:40px } .business-sub .wrap-thumb { margin:0 auto; max-width:300px } .business-sub .wrap-thumb li { float:none; width:100%; margin:40px 0 0 0 !important } .business-sub .wrap-thumb li:nth-of-type(1) { margin-top:0 !important } .business-sub .ir-soybean-feature { background:none; height:inherit; padding-top:0 } .business-sub .ir-soybean-feature .ir-wa { position:static; margin:20px 0 64px 0 } /* biz-main-notice */ .biz-main-notice li { margin-top:20px; padding:20px 20px 50px 20px; background-position:bottom 20px right 20px } .biz-main-notice li .p-big { font-size:20px; margin-bottom:20px } .biz-main-notice li .p-small { font-size:14px } /* ------------------------------ CAREER ------------------------------ */ /* 모집공고 */ .career-job li { margin-top:20px; padding:20px 20px 50px 20px; background-position:bottom 20px right 20px } .career-job li .p-big { font-size:20px; margin-bottom:20px } .career-job li .p-small { font-size:14px } .career-job li.nothing { padding:20px; font-size:16px } .career-job li.nothing .p-big { font-size:16px } /* 인사제도 */ .career-insa .wrap-red-pictogram li { background-size:160px 160px !important } .career-insa .wrap-red-pictogram li:nth-of-type(1) { background:url(../images/mobile/icon_career_insa.png) no-repeat 0 50% } .career-insa .wrap-red-pictogram li:nth-of-type(2) { background:url(../images/mobile/icon_career_insa2.png) no-repeat 0 50% } .career-insa .wrap-red-pictogram li:nth-of-type(3) { background:url(../images/mobile/icon_career_insa3.png) no-repeat 0 50% } .career-insa .wrap-red-pictogram li:nth-of-type(4) { background:url(../images/mobile/icon_career_insa4.png) no-repeat 0 50% } .career-welfare .wrap-pictogram li { background-size:100px 100px !important } .career-welfare .wrap-pictogram li[data-pictogram-bg='1'] { background:url(../images/mobile/ico_career_welfare.png) no-repeat 50% 0 } .career-welfare .wrap-pictogram li[data-pictogram-bg='2'] { background:url(../images/mobile/ico_career_welfare2.png) no-repeat 50% 0 } .career-welfare .wrap-pictogram li[data-pictogram-bg='3'] { background:url(../images/mobile/ico_career_welfare3.png) no-repeat 50% 0 } .career-welfare .wrap-pictogram li[data-pictogram-bg='4'] { background:url(../images/mobile/ico_career_welfare4.png) no-repeat 50% 0 } .career-welfare .wrap-pictogram li[data-pictogram-bg='5'] { background:url(../images/mobile/ico_career_welfare5.png) no-repeat 50% 0 } .career-welfare .wrap-pictogram li[data-pictogram-bg='6'] { background:url(../images/mobile/ico_career_welfare6.png) no-repeat 50% 0 } .career-welfare .wrap-pictogram li[data-pictogram-bg='7'] { background:url(../images/mobile/ico_career_welfare7.png) no-repeat 50% 0 } .career-welfare .wrap-pictogram li[data-pictogram-bg='8'] { background:url(../images/mobile/ico_career_welfare8.png) no-repeat 50% 0 } .career-welfare .wrap-pictogram li[data-pictogram-bg='9'] { background:url(../images/mobile/ico_career_welfare9.png) no-repeat 50% 0 } .career-welfare .wrap-pictogram li[data-pictogram-bg='10'] { background:url(../images/mobile/ico_career_welfare10.png) no-repeat 50% 0 } .career-welfare .wrap-pictogram li[data-pictogram-bg='11'] { background:url(../images/mobile/ico_career_welfare11.png) no-repeat 50% 0 } .career-welfare .wrap-pictogram li[data-pictogram-bg='12'] { background:url(../images/mobile/ico_career_welfare12.png) no-repeat 50% 0 } .career-welfare .wrap-pictogram li[data-pictogram-bg='13'] { background:url(../images/mobile/ico_career_welfare13.png) no-repeat 50% 0 } .career-welfare .wrap-pictogram li[data-pictogram-bg='14'] { background:url(../images/mobile/ico_career_welfare14.png) no-repeat 50% 0 } .career-welfare .wrap-pictogram li[data-pictogram-bg='15'] { background:url(../images/mobile/ico_career_welfare15.png) no-repeat 50% 0 } .career-welfare .wrap-pictogram li[data-pictogram-bg='16'] { background:url(../images/mobile/ico_career_welfare16.png) no-repeat 50% 0 } .career-welfare .wrap-pictogram li[data-pictogram-bg='17'] { background:url(../images/mobile/ico_career_welfare17.png) no-repeat 50% 0 } /* ------------------------------ CONTACT ------------------------------ */ .contact-sub .privacy button { display:block; width:40px; height:40px; background:url(../images/sprite.png) no-repeat top -774px right 9px; border:0; position:absolute; top:20px; right:20px; cursor:pointer } .contact-sub .choice li { width:100%; margin-left:0; margin-top:20px; background-position:bottom 50% right 20px } .contact-sub .choice li.on { background-position:bottom 50% right 20px } .contact-sub .choice li a { padding:20px 60px 20px 20px } .contact-sub .choice li:nth-of-type(2n+1) { margin-left:0 } .contact-sub .choice li:nth-of-type(1) { margin-top:0 } .contact-sub .choice li:nth-of-type(2) { margin-top:20px } .contact-sub .choice li dt { font-size:20px; padding-bottom:10px } .contact-sub .chk-box { position:relative; padding:40px 0; border-top:1px solid #303244; border-bottom:1px solid #303244 } .contact-sub .chk-box button { display:block; position:absolute; top:50%; right:0; margin-top:-11px; border:0; background-color:#fff; color:#999; cursor:pointer } .contact-sub .privacy { display:none; position:fixed; bottom:0; left:0; width:100%; padding:20px; background-color:#fff; box-sizing:border-box; z-index:500 } .contact-sub .privacy ol { height:300px } } /* ================================================= Extra small devices (portrait phones, less than 576px) ================================================= */ @media (max-width: 575px) { .sec-sitemap .wrap-menu .btn-soybeanshp a {margin-left:20px} /* ------------------------------ COMMON ------------------------------ */ /* common */ body { min-width:320px } .ie-wrap .box { width:280px; height:180px; margin-top:-90px; margin-left:-140px } .ie-wrap .box p:nth-of-type(1) { font-size:14px } /* footer */ .footer address span { display:block } .footer address span::before { content:""; margin-left:0; padding-left:0; background:none } /* sub common */ .div-sub-header .btn-box a { display:block } .div-sub-header .btn-box a:nth-of-type(2) { margin-left:0; margin-top:5px } .wrap-pictogram { position:relative; overflow:hidden } .wrap-pictogram .swiper-wrapper { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex } .wrap-pictogram .swiper-pagination { display:block; position:inherit; padding-top:50px } .wrap-pictogram .pictogram-btn { display:none } .wrap-pictogram .pictogram-btn button { width:47px; height:47px; border:0; cursor:pointer; overflow:hidden; text-indent:300%; white-space:nowrap } .wrap-pictogram .pictogram-btn button[data-brnbtn="prev"] { position:absolute; top:50%; left:-20px; margin-top:-23px; background:url(../images/sprite.png) no-repeat 0 -540px; z-index:500 } .wrap-pictogram .pictogram-btn button[data-brnbtn="next"] { position:absolute; top:50%; right:-20px; margin-top:-23px; background:url(../images/sprite.png) no-repeat 0 -587px } .wrap-pictogram li { width:100%; margin-left:0 !important; margin-top:0 !important } .wrap-pictogram .bx-has-pager { display:block !important; position:inherit; padding:20px 0; color:inherit; font-weight:500; text-align:center } .wrap-red-pictogram li { padding:220px 0 40px 0; background-position:50% 40px !important } .wrap-red-pictogram li p { text-align:center } .sec-sub-design .btn-wrap.dwn-b a { display:inline-block; height:43px; width:130px; background-position: top 50% right 10px } /* ------------------------------ MAIN ------------------------------ */ /* main video */ .div-video .div-txt { margin-left:-140px; margin-top:-77px; width:280px } .div-video .box { background:url(../images/mobile/gate_bg.jpg) no-repeat 50% 0; background-size:cover } /* popup */ .pop_bnr.merger { width:100%; right:inherit; margin-right:0; padding:20px } /* ------------------------------ COMPANY ------------------------------ */ /* history */ .company-history .wrap-btn-year li span:nth-of-type(2) { padding-left:5px } /* group */ .company-group .cont-group { width:300px } .company-group .cont-group li { float:inherit; width:300px; margin:0 auto 38px auto } .company-group .cont-group li:nth-of-type(4) { margin-left:0 } /* ------------------------------ PRODUCT ------------------------------ */ /* product detail */ .sec-prodetail-top .wrap-thumb-slide { top:-50px; width:100%; max-width:inherit; background-color:#f6f6f6 } .sec-prodetail-top .wrap-thumb-slide .swiper-container { width:100%; max-width:100% } .sec-prodetail-top .wrap-thumb-slide .swiper-container li img { max-width:420px; text-align:center; margin:0 auto } .sec-prodetail-top .basic-info { padding:0 20px; margin-top:0 } .sec-prodetail-top .swiper-btn { display:none } .sec-prodetail-bottom .detail-info { padding:0 } .sec-prodetail-bottom .detail-info [data-detail-info] { padding:20px } .sec-prodetail-bottom ul { display:none } .sec-prodetail-bottom .detail-info h5 { position:inherit; top:inherit; left:inherit; padding:20px; border-bottom:1px solid #e3e3e3; background:url(../images/sprite.png) no-repeat top -302px right 20px; cursor:pointer; text-align:left } .sec-prodetail-bottom .detail-info h5:nth-of-type(1) { border-bottom:0 } .sec-prodetail-bottom .detail-info h5:nth-of-type(2) { border-top:1px solid #e3e3e3 } .sec-prodetail-bottom .detail-info h5.on { background-position:top -243px right 20px } .sec-prodetail-bottom .detail-info h5:nth-of-type(1).on { border-bottom:1px solid #e3e3e3 } /* ------------------------------ BUSINESS ------------------------------ */ .business-main-other .cont-group ul { width:100%; max-width:250px; margin:0 auto } .business-main-other .cont-group li { position:relative; float:none; width:100%; max-width:250px; margin-left:0; margin-bottom:60px } .business-main-other .cont-group li:nth-of-type(even) { top:inherit } .business-sub .ir-soybean-feature2 { height:0; padding-top:163.21%; background:url(../images/mobile/bg_business_food_soybean_vs2.jpg) no-repeat center; background-size:contain } .business-sub .ir-keidas-architecture { height:0; padding-top:265%; background:url(../images/mobile/bg_business_it_keidas_architecture.jpg) no-repeat center; background-size:contain } .wappleshop-affiliates .cont-alliance { height:0; padding-top:163.6%; overflow:hidden; background:url(../images/mobile/bg_business_it_wapple_alliance.jpg) no-repeat; background-size:contain } .wappleshop-affiliates .cont-partnership { height:0; padding-top:53.65%; overflow:hidden; background:url(../images/mobile/bg_business_it_wapple_partnership.jpg) no-repeat; background-size:contain } /* ------------------------------ CONTACT ------------------------------ */ .contact-sub .inquiry { margin-top:40px } .contact-sub .inquiry label { float:none; display:block; width:100%; padding-bottom:5px } .contact-sub .inquiry input { width:100% } .contact-sub .inquiry p:nth-of-type(1) input { width:100% } .contact-sub .inquiry p:nth-of-type(4) input { width:20% } .contact-sub .inquiry textarea { width:100% } .contact-sub .inquiry .btn-box { padding-top:20px; text-align:center } .contact-sub .inquiry .btn-box button { width:calc(100% / 2 - 10px); margin-right:20px; height:40px; line-height:40px } .contact-sub .inquiry .btn-box button:nth-of-type(2) { margin-right:0 } /* ------------------------------ PRIVACY ------------------------------ */ .privacy-sub { margin-top:120px } .privacy-sub .heading { padding-bottom:0 !important } .privacy-sub .heading h2 { font-size:18px } .privacy-sub .privacy h3 { font-size:16px } }