@charset "utf-8"; /* 공통 (default) */ .sect-title-b {font-weight: 500; color: var(--color-primary); border-bottom: 2px solid var(--color-primary);} /* 공통 (default) */ #contents.prd section.header div.text {text-align: center;} /* 서비스정보 홈페이지/쇼핑몰(prd) */ .compare { max-width: 1600px; margin: 0 auto; } #contents.prd{font-family:'Noto Sans KR'; word-break:keep-all} #contents.prd h1.hidden{position:fixed; top:-200px; left:-200px} html.ja #contents.prd p.h2Desc{word-break: break-all} html.zh #contents.prd p.h2Desc{word-break: break-all} #contents.prd section.summary{position:relative; overflow:hidden} #contents.prd section.feature{position:relative;} #contents.prd section.desk{position:relative; overflow:hidden} #contents.prd section.keyword.bgf5{background-color:#F0F4FB} #contents.prd section.process{position:relative; overflow:hidden; background-color:#fff; } #contents.prd section.keyword h2{color: #222; text-align: left;} #contents.prd section.keyword h2 strong {font-weight: 500; } #contents.prd section.check{position:relative; overflow:hidden; background-color: #2c2b2e} #contents.prd section.check h2 b{color: #fff; border-bottom: 2px solid #fff} #contents.prd section.check p.h2Desc{color: #fff} #contents.prd section.check > div.circle{position:absolute; z-index:0; bottom:-495vw; left:50%; width:500vw; margin-left:-250vw; border-radius:50%} #contents.prd section.check.homepage > div.circle{background-color:rgba(213,42,21,.1)} #contents.prd section.check.shop > div.circle{background-color:rgba(0,93,219,.1)} #contents.prd section.check.catalog > div.circle{background-color:rgba(163,0,220,.1)} #contents.prd section.check.maintenance > div.circle{background-color:rgba(21,213,53,.1)} #contents.prd section.check > div.circle:after{content:''; display:block; padding:50% 0} #contents.prd section.summary div.img{position:relative; z-index:3} #contents.prd section.summary div.txt{position:relative; z-index:3} #contents.prd section.summary div.txt h2{margin:0 0 0.4em 0; font-weight:600; color:#555} #contents.prd section.summary div.txt h2 strong{font-weight:900; color:#000} #contents.prd section.summary div.txt p.animateMotion{position:relative; padding:0 0 0 0.6em; font-weight:500; line-height:1.6em; color:#666} #contents.prd section.summary div.txt p.animateMotion:before{content:''; position:absolute; top:0.7em; left:0.1em; width:0.2em; height:0.2em} #contents.prd section.summary.homepage div.txt p.animateMotion:before{background-color:#d52a15} #contents.prd section.summary.shop div.txt p.animateMotion:before{background-color:#006cff} #contents.prd section.summary.catalog div.txt p.animateMotion:before{background-color:#a300dc} #contents.prd section.summary.html div.txt p.animateMotion:before{background-color:#f16529} #contents.prd section.summary.maintenance div.txt p.animateMotion:before{background-color:#089c00} #contents.prd section.summary > div.overlay{position:absolute; transform:rotate(32deg)} #contents.prd section.summary > div.overlay.overlay-1{z-index:0; opacity:.3; background-blend-mode: overlay} #contents.prd section.summary > div.overlay.overlay-2{z-index:1; opacity:.2; background-blend-mode: overlay} #contents.prd section.summary > div.overlay.overlay-3{z-index:2; opacity:.1} #contents.prd section.summary.homepage > div.overlay.overlay-1{background-color:#d52a15} #contents.prd section.summary.homepage > div.overlay.overlay-2{background-color:#d52a15} #contents.prd section.summary.homepage > div.overlay.overlay-3{background-image:linear-gradient(25deg,#d52a15,#600a00)} #contents.prd section.summary.shop > div.overlay.overlay-1{background-color:#005ddb} #contents.prd section.summary.shop > div.overlay.overlay-2{background-color:#005ddb} #contents.prd section.summary.shop > div.overlay.overlay-3{background-image:linear-gradient(25deg,#005ddb,#00357b)} #contents.prd section.summary.catalog > div.overlay.overlay-1{background-color:#a300dc} #contents.prd section.summary.catalog > div.overlay.overlay-2{background-color:#a300dc} #contents.prd section.summary.catalog > div.overlay.overlay-3{background-image:linear-gradient(25deg,#a300dc,#44005c)} #contents.prd section.summary.html > div.overlay.overlay-1{background-color:#f16529} #contents.prd section.summary.html > div.overlay.overlay-2{background-color:#f16529} #contents.prd section.summary.html > div.overlay.overlay-3{background-image:linear-gradient(25deg,#f16529,#952d00)} #contents.prd section.summary.maintenance > div.overlay.overlay-1{background-color:#15d523} #contents.prd section.summary.maintenance > div.overlay.overlay-2{background-color:#15d523} #contents.prd section.summary.maintenance > div.overlay.overlay-3{background-image:linear-gradient(25deg,#2ad515,#066000)} #contents.prd i.fa-check{color:#1e00ff} #contents.prd i.fa-times{color:#7f8b9f} #contents.prd span.hidden{font-size:0} #contents.prd section.logo.header{} #contents.prd section.homepage div.pagination button.btn.on{background-color:var(--color-button-background); color:#fff} #contents.prd section.feature button.order{border-radius: 500px} #contents.prd section.feature ul.compare{position:relative} #contents.prd section.maintenance ul.compare { border-bottom: 1px solid #e3e3e3; } #contents.prd section.feature ul.compare > li.tab{position:relative} #contents.prd section.feature header.lbl{overflow:hidden} #contents.prd section.homepage li.tab:nth-child(2) header.lbl{background-color:#262259} #contents.prd section.homepage li.tab:nth-child(3) header.lbl{background-color:#30298a} #contents.prd section.homepage li.tab:nth-child(4) header.lbl{background-color:var(--color-primary)} #contents.prd section.homepage li.tab:nth-child(5) header.lbl{background-color:#291bd5} #contents.prd section.homepage.shop li.tab:nth-child(2) header.lbl{background-color:#30298a} #contents.prd section.homepage.shop li.tab:nth-child(3) header.lbl{background-color:var(--color-primary)} #contents.prd section.homepage.shop li.tab:nth-child(4) header.lbl{background-color:#291bd5} #contents.prd section.catalog li.tab:nth-child(2) header.lbl{background-color:#30298a} #contents.prd section.catalog li.tab:nth-child(3) header.lbl{background-color:var(--color-primary)} #contents.prd section.maintenance li.tab:nth-child(2) header.lbl{background-color:#262259} #contents.prd section.maintenance li.tab:nth-child(3) header.lbl{background-color:#30298a} #contents.prd section.maintenance li.tab:nth-child(4) header.lbl{background-color:var(--color-primary)} #contents.prd section.maintenance li.tab:nth-child(5) header.lbl{background-color:#291bd5} #contents.prd section.homepage.detailpage li.tab:nth-child(2) header.lbl{background-color:#262259} #contents.prd section.homepage.detailpage li.tab:nth-child(3) header.lbl{background-color:#30298a} #contents.prd section.homepage.detailpage li.tab:nth-child(4) header.lbl{background-color:var(--color-primary)} #contents.prd section.homepage.detailpage li.tab:nth-child(5) header.lbl{background-color:#291bd5} #contents.prd section.homepage.detailpage li.tab:nth-child(6) header.lbl{background-color:#130079} #contents.prd span.rec{position:absolute; top:0.6em; right:0.6em; padding:0.3em 0.9em; border-radius:1em; background-color:#d63e2d; color: #fff; font-weight:500; animation:_blinker ease-in 1.2s infinite} #contents.prd section.homepage li.tab:nth-child(2) button.order{color:#262259} #contents.prd section.homepage li.tab:nth-child(3) button.order{color:#30298a} #contents.prd section.homepage li.tab:nth-child(4) button.order{color:var(--color-primary)} #contents.prd section.homepage li.tab:nth-child(5) button.order{color:#291bd5} #contents.prd section.homepage.shop li.tab:nth-child(2) button.order{color:#30298a} #contents.prd section.homepage.shop li.tab:nth-child(3) button.order{color:var(--color-primary)} #contents.prd section.homepage.shop li.tab:nth-child(4) button.order{color:#291bd5} #contents.prd section.catalog li.tab:nth-child(2) button.order{color:var(--color-primary)} #contents.prd section.catalog li.tab:nth-child(3) button.order{color:var(--color-primary)} #contents.prd section.homepage.detailpage li.tab:nth-child(2) button.order{color:#262259} #contents.prd section.homepage.detailpage li.tab:nth-child(3) button.order{color:#30298a} #contents.prd section.homepage.detailpage li.tab:nth-child(4) button.order{color:var(--color-primary)} #contents.prd section.homepage.detailpage li.tab:nth-child(5) button.order{color:#291bd5} #contents.prd section.homepage.detailpage li.tab:nth-child(6) button.order{color:#130079} #contents.prd section.feature div.pagination button.btn{border-radius: 500px} #contents.prd section.feature strong.price{display:block; color:#fff; font-weight:900} #contents.prd section.feature div.port{padding:1em 0; background-color:#494485;} #contents.prd section.feature a.port{display:block; padding: 1em 0;font-size:1.1em; font-weight:500} #contents.prd section.feature li.th a.port{padding:calc(1em + 1px); text-align:left; color:#fff} #contents.prd section.feature li.td a.port{margin:0 1em; text-align:center; color:var(--color-primary); font-weight:600} #contents.prd section.homepage li.td a.port{border: 1px solid rgb(255 255 255 / 50%); color:#fff; border-radius: 500px} #contents.prd section.homepage li.td a.port:hover{background-color:rgba(255,255,255,.2); color:#fff} #contents.prd section.shop li.td a.port{color:#fff} #contents.prd section.shop li.td a.port:hover{background-color:#fbfaff} #contents.prd section.catalog li.td a.port{background-color:var(--color-primary)} #contents.prd section.catalog li.td a.port:hover{background-color:var(--color-primary)} #contents.prd section.desk div.text{position:relative; text-align:center} #contents.prd section.desk div.bg{position:absolute; top:0; right:0; bottom:0; left:0; background-position:50% 50%; background-repeat:no-repeat; background-size:cover} #contents.prd section.desk div.bg:before{content:''; position:absolute; top:0; right:0; bottom:0; left:0; background-color:rgb(3 0 18 / 71%)} #contents.prd section.desk ul.char > li{position: relative; padding: 1em 1em 1em 5.4em; margin: 0 0 1em 0; border-radius: 500px; background-color: rgba(255,255,255,.1); text-align: left} #contents.prd section.desk ul.char > li:last-child{margin:0} #contents.prd section.desk div.ico{position: absolute; top: 50%; left: 1em; transform: translateY(-50%); width: 3.13em; height: 3.13em; box-sizing: border-box; border-radius: 50%; margin: auto; display: flex; justify-content: center; align-items: center} #contents.prd section.desk div.ico svg{display:block; fill: #fff;} #contents.prd section.desk h2{margin:0 0 1em 0; font-size:2em; font-weight:300; color:#fff; } #contents.prd section.desk h2 span {font-weight: 500} #contents.prd section.desk h3{margin:0 0 0.2em 0; font-size:1em; color:#fff; font-weight: 500;} #contents.prd section.desk p.char{font-size: 0.83em; color: rgba(255,255,255,.71); line-height: 120%; word-break: break-all;} #contents.prd section.process{background: #edf0f6} #contents.prd section.process ol.process{max-width: 1600px; margin: 0 auto; display:flex; flex-wrap:wrap; flex-direction:row; justify-content:flex-start} #contents.prd section.process ol.process > li{position:relative; text-align:center} #contents.prd section.process ol.process > li > div.ico{position:relative; border-radius:50%} #contents.prd section.process.homepage ol.process > li > div.ico{background-color: #fff; display: flex;justify-content: center; align-items: center;border: 1px solid #dee5f1} #contents.prd section.process ol.process > li > div.ico:before{content:''; display:block; padding:50% 0} #contents.prd section.process ol.process > li > div.ico svg{display:block; width:100%; height:100%; fill:#454356} #contents.prd section.process ol.process > li span.no{position:relative; display:block; font-weight:900} html.zh #contents.prd section.process ol.process > li div.desc p{word-break: break-all} html.ja #contents.prd section.process ol.process > li div.desc p{word-break: break-all} #contents.prd section.homepage ol.process > li span.no{color:var(--color-secondary)} #contents.prd section.shop ol.process > li span.no{color:#006cff} #contents.prd section.process ol.process > li > div.line{position:relative; background-color:#dce2ef} #contents.prd section.process ol.process > li div.line:after{content:''; position:absolute; top:50%; left:50%; border-radius:50%} #contents.prd section.homepage ol.process > li div.line:after{background-color:#dce2ef} #contents.prd section.server.keyword{padding-top: 0;} #contents.prd section.keyword ul.keyword{max-width: 1600px; margin: 2em auto 0} #contents.prd section.keyword ul.keyword > li{display:inline-block; margin:0.63em 0.28em 0 0} #contents.prd section.keyword ul.keyword > li:last-child{margin:0.4em 0 0 0} #contents.prd section.keyword ul.keyword > li strong{display:block; padding:0.36em 0.9em; border-radius:1.2em; color:#fff; font-weight:500; -moz-transition:all 0.1s ease-in; -o-transition:all 0.1s ease-in; -webkit-transition:all 0.1s ease-in; transition:all 0.1s ease-in} #contents.prd section.homepage ul.keyword > li strong{background-color:#e6efff;border:1px solid #e6efff; color:var(--color-button-background-hover)} #contents.prd section.homepage ul.keyword > li strong:hover{border:1px solid var(--color-primary); color: #fff; background-color:var(--color-button-background)} #contents.prd section.check ul.chkList{max-width: 1600px; margin: 0 auto; position:relative; z-index:1; display:flex; flex-wrap:wrap; flex-direction:row; justify-content:flex-start} #contents.prd section.check ul.chkList > li{box-sizing:border-box; margin:0.94em 0 0 0} #contents.prd section.check ul.chkList > li div.txt{position:relative; padding:0 0 0 1.25em; line-height:1.5em; font-weight:400; color:#fff; word-break:keep-all} html.ja #contents.prd section.check ul.chkList > li div.txt{word-break:break-all} html.zh #contents.prd section.check ul.chkList > li div.txt{word-break:break-all} #contents.prd section.check ul.chkList > li div.txt:before{content:''; position:absolute; top:0.6em; left:0.3em; width:0.3em; height:0.3em; border-radius:50%} #contents.prd section.homepage ul.chkList > li div.txt:before{background-color:#fff} a.chklist-link{color:var(--color-text-link-light)} a.chklist-link:hover{text-decoration:underline} a.chklist-link:focus{text-decoration:underline} @media screen and (max-width:1280px){ #contents.prd section.section{padding:4em 3em} #contents.prd section.desk{padding:4em 0.8em} #contents.prd h2{margin:0 0 0.2em 0; font-size:1.8em; font-weight:300; color: #222;} #contents.prd p.h2Desc{margin:0.63em 0 2em 0; font-size:1em; font-weight: 400; color: var(--color-secondary)} #contents.prd section.summary div.img{max-width:36em; margin:0 auto 2em auto} #contents.prd section.summary div.img:before{content:''; display:block; padding:50% 0} #contents.prd section.summary div.img div.svg{position:absolute; top:0; right:0; bottom:0; left:0; padding:0 2em; box-sizing:border-box} #contents.prd section.summary div.img svg{display:block; width:100%; height:100%; margin:auto} #contents.prd section.summary div.txt h2{font-size:2.7em} #contents.prd section.summary div.txt p.animateMotion{margin:0 0 0.18em 0; font-size:1.5em} #contents.prd section.summary div.txt p.animateMotion:last-child{margin:0} #contents.prd section.summary > div.overlay{width:120vw; height:380vh} #contents.prd section.summary > div.overlay.overlay-1{top:-50vh; right:-50vw} #contents.prd section.summary > div.overlay.overlay-2{top:-50vh; right:-45vw} #contents.prd section.summary > div.overlay.overlay-3{top:-50vh; right:-40vw} #contents.prd section.feature div.pagination{position:-webkit-sticky; position:sticky; z-index:4; top:80px; display: flex; flex-wrap: wrap; margin: 0 0 2em 0; padding: 1em 0; background: #fff} #contents.prd section.feature div.pagination button.btn{padding:0.6em 1.8em; margin:0.25em; color: var(--color-primary); background: #e5e8ed; font-weight:600; } #contents.prd section.feature div.compare{position:relative; overflow:hidden} #contents.prd section.feature ul.compare{-ms-flex-direction:row; -webkit-flex-direction:row; flex-direction:row; display:-ms-flexbox; display:-webkit-flex; display:flex; will-change:transform} #contents.prd section.feature ul.compare > li.tab{-ms-flex:none; -webkit-flex:none; flex:none; width:100%; text-align:center; opacity:0; transition:all .25s ease-in-out} #contents.prd section.feature ul.compare > li.tab.td.on{z-index:2; opacity:1} section.homepage #homeOne{transform:translateX(-100%)} section.homepage #homeLite{transform:translateX(-200%)} section.homepage #homeBasic{transform:translateX(-300%)} section.homepage #homePro{transform:translateX(-400%)} section.shop #homeLite{transform:translateX(-100%)} section.shop #homeBasic{transform:translateX(-200%)} section.shop #homePro{transform:translateX(-300%)} section.catalog #homeLite{transform:translateX(-100%)} section.catalog #homeBasic{transform:translateX(-200%)} section.maintenance #homeLite{transform:translateX(-100%)} section.maintenance #homeBasic{transform:translateX(-200%)} section.maintenance #homePro{transform:translateX(-300%)} section.maintenance #homePremium{transform:translateX(-400%)} section.detailpage #imgDetailPop{transform:translateX(-100%)} section.detailpage #imgDetailLite{transform:translateX(-200%)} section.detailpage #imgDetailBasic{transform:translateX(-300%)} section.detailpage #imgDetailPro{transform:translateX(-400%)} section.detailpage #imgDetailPremium{transform:translateX(-500%)} section.marketing #homeLite{transform:translateX(-100%)} section.marketing #homeBasic{transform:translateX(-200%)} section.marketing #homePro{transform:translateX(-300%)} #contents.prd section.feature header.lbl{padding:1em} #contents.prd section.feature h3.eng{height:1.5em; line-height:1.5em; font-size:2em; color:rgba(255,255,255,.9)} #contents.prd section.feature h3.kor{height:1.5em; line-height:1.5em; font-size:1.22em; color:rgba(255,255,255,.7)} #contents.prd section.feature p.olexp{height:1.5em; margin:1em 0 0 0; line-height:1.5em; font-size:0.9em; color:rgba(255,255,255,.5)} #contents.prd section.feature strong.price{height:1.2em; margin:0.4em 0 0 0; line-height:1.2em; font-size:2em} #contents.prd section.feature button.order{display:block; width:100%; height:3.2em; margin:1em 0 0 0; box-sizing:border-box; background-color:#fff; font-size:1em; font-weight:500; font-family:'Noto Sans KR'} #contents.prd section.feature li.tab:nth-child(1) button.order{background-color:#F0F4FB} #contents.prd section.feature h4.th{height:3.2em; padding:0 0 0 1em; background-color:#e5e8ed; text-align:left; font-size:1.1em; line-height:3.2em; font-weight:500} #contents.prd section.feature dl.tr{display:flex; flex-direction:row; justify-content:flex-start; background-color:#fff} #contents.prd section.feature dl.tr:nth-child(2n+1){background-color:#f8f8f8} #contents.prd section.feature dl.tr dt{flex:50%; padding:1em; border-width:0 0 1px 1px; border-style:none none dashed solid; border-color:#e3e3e3; text-align:left;display: flex; align-items: center;} #contents.prd section.feature dl.tr dt.ln2{height:auto; padding-top:0.8em; padding-bottom:0.8em; display:flex; align-items:center} #contents.prd section.feature dl.tr dt.ln3{height:6em; padding-top:0.8em; padding-bottom:0.8em; line-height:6em} #contents.prd section.feature dl.tr dt.ln4{height:auto; padding-top:0.8em; padding-bottom:0.8em; display:flex; align-items:center} #contents.prd section.feature dl.tr:last-child dt{border-bottom:0} #contents.prd section.feature dl.tr dd{flex:50%; padding:1em; border-width:0 1px 1px 0; border-style:none solid dashed none; border-color:#e3e3e3; color:#444; text-align:right} #contents.prd section.feature dl.tr dd.ln2{height:auto; padding:0.8em 1em 0.8em 0; line-height:2em} #contents.prd section.feature dl.tr dd.ln3{height:6em; padding:0.8em 1em 0.8em 0; line-height:2em} #contents.prd section.feature dl.tr dd.ln3o{height:6em; padding:0.8em 1em 0.8em 0; line-height:6em} #contents.prd section.feature dl.tr dd.ln4{height:auto; padding:0.8em 1em 0.8em 0; line-height:2em} #contents.prd section.feature dl.tr dd.ln4o{height:8em; padding:0.8em 1em 0.8em 0; line-height:8em} #contents.prd section.feature dl.tr:last-child dd{border-bottom:0} #contents.prd section.feature li.th dl.tr dd{display:none} #contents.prd section.desk div.ico svg{width:24px; height:24px;} #contents.prd section.process h2 {text-align: center} #contents.prd section.process p.h2Desc {text-align: center} #contents.prd section.process ol.process > li{padding:1.6em 0 0 0; box-sizing:border-box} #contents.prd section.process ol.process > li > div.ico{max-width: 140px; margin: 0 auto 0.4em;} #contents.prd section.process ol.process > li > div.ico div.svg{width: 30px; height: 30px;} #contents.prd section.process ol.process > li span.no{position:relative; display:block; height:1.6em; padding:0 0 0.26em 0; line-height:1.6em; font-weight:900; font-size:1.8em} #contents.prd section.process ol.process > li > div.line{height:2px} #contents.prd section.process ol.process > li > div.line:after{width:10px; height:10px; margin:-5px 0 0 -5px} #contents.prd section.process ol.process > li h3.title{padding:0.6em 0.4em 0 0.4em; font-weight:600; font-size:1.2em; color: #222;} html.zh #contents.prd section.process ol.process > li h3.title{word-break:break-all} html.ja #contents.prd section.process ol.process > li h3.title{word-break:break-all} #contents.prd section.process ol.process > li div.desc{padding:0.4em 1em 0 1em; font-weight:400; font-size:1em; color: var(--color-tertiary); line-height: 140%;} #contents.prd section.keyword ul.keyword > li{font-size:0.8em} #contents.prd section.check ul.chkList > li{width:100%} #contents.prd section.check ul.chkList > li:nth-child(1){margin:0} #contents.prd section.check ul.chkList > li div.txt{font-size:1em} } @media screen and (max-width:320px){ /* iPhone SE */ #contents.prd section.section{font-size:12px} #contents.prd section.section.summary{font-size:8px} #contents.prd section.process ol.process > li{width: 100%;} #contents.prd section.process ol.process > li:nth-child(1),#contents.prd section.process ol.process > li:nth-child(2){} #contents.prd section.process ol.process > li > div.ico { max-width: 110px; } #contents.prd section.feature div.pagination button.btn{flex: 1 1 auto} } @media screen and (min-width:321px) and (max-width:360px){ /* Samsung S20 포함한 대부분의 갤럭시 */ #contents.prd section.section{font-size:13px} #contents.prd section.section.summary{font-size:9px} #contents.prd section.process ol.process > li{width: 100%;} #contents.prd section.process ol.process > li:nth-child(1),#contents.prd section.process ol.process > li:nth-child(2){} #contents.prd section.process ol.process > li > div.ico { max-width: 110px; } #contents.prd section.feature div.pagination button.btn{flex: 1 1 auto} } @media screen and (min-width:361px) and (max-width:428px){ /* 고급 스마트폰 */ #contents.prd section.section{font-size:14px} #contents.prd section.section.summary{font-size:10px} #contents.prd section.process ol.process > li{width: calc(100% / 2);} #contents.prd section.process ol.process > li:nth-child(1),#contents.prd section.process ol.process > li:nth-child(2){} #contents.prd section.process ol.process > li > div.ico { max-width: 110px; } #contents.prd section.feature div.pagination button.btn{flex: 1 1 auto} } @media screen and (min-width:429px) and (max-width:1024px){ /* 태블릿(Portrait) */ #contents.prd section.section{font-size:15px; padding: 4em 1em;} #contents.prd section.section.summary{font-size:11px} #contents.prd section.process ol.process > li{width: calc(100% / 2);} #contents.prd section.process ol.process > li:nth-child(1),#contents.prd section.process ol.process > li:nth-child(2),#contents.prd section.process ol.process > li:nth-child(3){} #contents.prd section.process ol.process > li > div.ico { max-width: 110px; } } @media screen and (min-width:1025px) and (max-width:1280px){ /* 태블릿(Landscape) */ #contents.prd section.section{font-size:16px} #contents.prd section.section.summary{font-size:12px} #contents.prd section.process ol.process > li{width: calc(100% / 3);} #contents.prd section.process ol.process > li:nth-child(1),#contents.prd section.process ol.process > li:nth-child(2),#contents.prd ol.process > li:nth-child(3),#contents.prd ol.process > li:nth-child(4){} #contents.prd section.process ol.process > li > div.ico { max-width: 130px; } } @media screen and (min-width:1281px){ #contents.prd section.section{padding:7.5em 7.25em} #contents.prd h2{max-width: 1600px; margin: 0 auto 0.2em; font-size:3em; font-weight:300;} #contents.prd p.h2Desc{margin: 1em auto 2em; max-width: 1600px; font-size: 1.25em; font-weight: 400; color: var(--color-secondary)} #contents.prd section.summary{display:flex; flex-direction:row; justify-content:flex-start} #contents.prd section.summary div.img{width:28%} #contents.prd section.summary div.img div.svg{position:absolute; top:0; right:0; bottom:0; left:0} #contents.prd section.summary div.img svg{display:block; width:100%; height:100%} #contents.prd section.summary div.txt{width:72%; padding:0 0 0 4em; box-sizing:border-box} #contents.prd section.summary div.txt h2{font-size:3.5em} #contents.prd section.summary div.txt p.animateMotion{font-size:1.6em} #contents.prd section.summary > div.overlay{width:70vw; height:300vh} #contents.prd section.summary > div.overlay.overlay-1{top:-50vh; right:-40vw} #contents.prd section.summary > div.overlay.overlay-2{top:-50vh; right:-35vw} #contents.prd section.summary > div.overlay.overlay-3{top:-50vh; right:-30vw} #contents.prd section.feature div.pagination{max-width: 1600px; position:-webkit-sticky; position:sticky; z-index:4; top:70px; margin:0 auto 2em; padding: 1em 0; background: #fff} #contents.prd section.feature div.pagination button.btn{padding:1em 4em; margin: 0 1em 0 0; color: var(--color-primary); background: #edecf4; font-weight:600; transition:all .25s ease-in-out} #contents.prd section.feature div.pagination button.btn:last-child{margin:0} #contents.prd section.feature ul.compare{display:flex; flex-direction:row; justify-content:flex-start} #contents.prd section.feature ul.compare > li.tab{flex:1; box-sizing:border-box; text-align:center; transition:all .25s ease-in-out} #contents.prd section.feature li.tab.td.on{z-index:3; box-shadow:0 0 1em 0.1em rgb(0 23 57 / 40%)} #contents.prd section.feature header.lbl{padding:1em} #contents.prd section.feature li.th header.lbl{visibility:hidden; background-color:transparent} #contents.prd section.feature h3.eng{height:1.5em; line-height:1.5em; font-size:2em; color:rgba(255,255,255,.9)} #contents.prd section.feature h3.kor{height:1.5em; line-height:1.5em; font-size:1.22em; color:rgba(255,255,255,.7)} #contents.prd section.feature p.olexp{height:1.5em; margin:1em 0 0 0; line-height:1.5em; font-size:0.9em; color:rgba(255,255,255,.5)} #contents.prd section.feature strong.price{height:1.2em; margin:0.4em 0 0 0; line-height:1.2em; font-size:2em} html.en #contents.prd section.feature strong.price{height: 2em; line-height: 110%; display: flex; justify-content: center; align-items: center} html.zh #contents.prd section.feature strong.price{height: 2em; line-height: 110%} html.ja #contents.prd section.feature strong.price{height: 2em; line-height: 110%} #contents.prd section.feature button.order{position:relative; display:block; width:100%; height:3.2em; margin:1em 0 0 0; box-sizing:border-box; background-color:#fff; font-size:1em; font-weight:600; font-family:'Noto Sans KR'; -moz-transition:all 0.1s ease-in; -o-transition:all 0.1s ease-in; -webkit-transition:all 0.1s ease-in; transition:all 0.1s ease-in} #contents.prd section.feature button.order:hover{} #contents.prd section.feature li.tab:nth-child(1) button.order{z-index:-1; visibility:hidden; background-color:transparent} #contents.prd section.feature h4.th{height:3em; padding:0 0 0 1em; background-color:#edecf4; text-align:left; font-size:1.1em; line-height:3em; font-weight:500} #contents.prd section.feature li.td h4.th > span{display:none} #contents.prd section.feature dl.tr{background-color:#fff} #contents.prd section.feature dl.tr:nth-child(2n+1){background-color:#f8f8f8} #contents.prd section.feature dl.tr dt{height:2.6em; padding:0 0 0 1em; border-width:0 1px 1px 1px; border-style:none solid dashed solid; border-color:#e3e3e3; line-height:2.6em; text-align:left} html.en #contents.prd section.detailpage dl.tr dt {height: 4em; display: flex; align-items: center} html.zh #contents.prd section.detailpage dl.tr dt {height: 4em; display: flex; align-items: center} #contents.prd section.feature dl.tr dt.ln2{height:3.8em; padding-top:0.8em; padding-bottom:0.8em; line-height:3.8em} #contents.prd section.feature dl.tr dt.ln3{height:5.7em; padding-top:0.8em; padding-bottom:0.8em; line-height:5.7em} #contents.prd section.feature dl.tr dt.ln4{height:7.6em; padding-top:0.8em; padding-bottom:0.8em; line-height:7.6em} #contents.prd section.feature dl.tr:last-child dt{border-bottom:0} #contents.prd section.feature li.td dl.tr dt{display:none} #contents.prd section.feature dl.tr dd{height:2.6em; border-width:0 1px 1px 0; border-style:none solid dashed none; border-color:#e3e3e3; line-height:2.6em; color:#222} #contents.prd section.feature dl.tr dd{overflow:hidden; white-space:nowrap; text-overflow:ellipsis; letter-spacing:-0.04em} /* 2024-06-25 baek 한글에서 글짜 떨어지는 오류 발생 */ html.en #contents.prd section.detailpage dl.tr dd{height: 4em; line-height: 140%; display: flex; justify-content: center; align-items: center; padding: 0 0.5em} html.zh #contents.prd section.detailpage dl.tr dd{height: 4em; line-height: 140%; display: flex; justify-content: center; align-items: center; padding: 0 0.5em} #contents.prd section.feature dl.tr dd.ln2{height:3.8em; padding:0.8em 0; line-height:1.9em} #contents.prd section.feature dl.tr dd.ln3{height:5.7em; padding:0.8em 0; line-height:1.9em} #contents.prd section.feature dl.tr dd.ln3o{height:5.7em; padding:0.8em 0; line-height:5.7em} #contents.prd section.feature dl.tr dd.ln4{height:7.6em; padding:0.8em 0; line-height:1.9em} #contents.prd section.feature dl.tr dd.ln4o{height:7.6em; padding:0.8em 0; line-height:7.6em} #contents.prd section.feature dl.tr:last-child dd{border-bottom:0} #contents.prd section.feature li.th dl.tr dd{display:none} #contents.prd section.feature div.port{position:-webkit-sticky; position:sticky; z-index:2; bottom:0} #contents.prd section.desk{padding:6.6em 0} #contents.prd section.desk div.ico svg{width:35px; height:35px;} #contents.prd section.process ol.process > li{flex:1} #contents.prd section.process ol.process > li > div.ico{max-width: 160px; margin: 0 auto 0.4em;} #contents.prd section.process ol.process > li > div.ico div.svg{width: 40px; height: 40px;} #contents.prd section.process ol.process > li span.no{height:1.6em; padding:0 0 0.26em 0; line-height:1.6em; font-size:1.8em} #contents.prd section.process ol.process > li div.line{height:4px} #contents.prd section.process ol.process > li div.line:after{width:12px; height:12px; margin:-6px 0 0 -6px} #contents.prd section.process ol.process > li h3.title{padding:0.7em 0 0 0; font-weight:600; font-size:1.37rem; color: #222;} #contents.prd section.process ol.process > li div.desc{padding:0.4em 1em 0 1em; font-weight:400; font-size:1em;color: #545e6a; line-height: 140%;} #contents.prd section.keyword ul.keyword > li{font-size:1.2em} #contents.prd section.check ul.chkList > li{width:50%} #contents.prd section.check ul.chkList > li:nth-child(2n+1){padding:0 1.4em 0 0} #contents.prd section.check ul.chkList > li:nth-child(2n+2){padding:0 0 0 1.4em} #contents.prd section.check ul.chkList > li:nth-child(1),#contents.prd section.check ul.chkList > li:nth-child(2){margin:0} #contents.prd section.check ul.chkList > li div.txt{font-size:1.2em} } @media screen and (min-width:1281px) and (max-width:1399px){ #contents.prd section.section{font-size:12px} #contents.prd section.desk{font-size:16px} } @media screen and (min-width:1400px) and (max-width:1599px){ #contents.prd section.section{font-size:13px} #contents.prd section.desk{font-size:18px} } @media screen and (min-width:1600px) and (max-width:1679px){ #contents.prd section.section{font-size:14px} #contents.prd section.desk{font-size:20px} } @media screen and (min-width:1680px) and (max-width:1919px){ #contents.prd section.section{font-size:15px} #contents.prd section.desk{font-size:21px} } @media screen and (min-width:1920px){ #contents.prd section.section{font-size:16px} #contents.prd section.desk{font-size:24px} } /* 서비스정보 홈페이지/쇼핑몰(prd) */ /* 서비스정보 홈페이지/쇼핑몰(prd) new */ #contents.prd section.payPerUse{position:relative; background-color:#F0F4FB} #contents.prd section.payPerUse ul.service{display:flex; flex-wrap:wrap; max-width: 1600px; margin: 0 auto; border-width:1px 0 0 1px; border-style:solid; border-color:#e3e3e3; background-color:#fff;} #contents.prd section.payPerUse ul.service > li{display:flex; flex-direction:column; justify-content:center; align-items:center; flex: 1 1 auto; border-width:0 1px 1px 0; border-style:solid; border-color:#e3e3e3; box-sizing:border-box; background-color:#fff} #contents.prd section.payPerUse ul.service > li h3{position:relative; font-weight:700; text-align:center; color: #222} html.zh #contents.prd section.payPerUse ul.service > li h3{word-break:break-all} html.ja #contents.prd section.payPerUse ul.service > li h3{word-break:break-all} #contents.prd section.payPerUse ul.service > li h3:after{content:''; display:block; height:2px; background-color:#d4d9e5} #contents.prd section.payPerUse ul.service > li div.per{color:var(--color-tertiary); font-weight:400} #contents.prd section.payPerUse ul.service > li div.price{font-weight: 700; color: var(--color-primary); font-size: 1.2em;text-align: center;} #contents.prd section.payPerUse ul.service > li div.price span {display: block} @media screen and (max-width:1280px){ #contents.prd section.payPerUse ul.service > li{padding:1em} #contents.prd section.payPerUse ul.service > li h3{font-size: 1.1em;} #contents.prd section.payPerUse ul.service > li h3:after{width:20px; margin:1em auto} #contents.prd section.payPerUse ul.service > li div.per{margin:0 0 8px 0} #contents.prd section.payPerUse ul.service > li div.price{font-size: 1.1em;} } @media screen and (max-width:320px){ /* iPhone SE */ #contents.prd section.payPerUse ul.service > li{width:50%;} } @media screen and (min-width:321px) and (max-width:360px){ /* Samsung S20 포함한 대부분의 갤럭시 */ #contents.prd section.payPerUse ul.service > li{width:50%;} } @media screen and (min-width:361px) and (max-width:428px){ /* 고급 스마트폰 */ #contents.prd section.payPerUse ul.service > li{width:50%;} } @media screen and (min-width:429px) and (max-width:1024px){ /* 태블릿(Portrait) */ #contents.prd section.payPerUse ul.service > li{width:calc(100% / 3)} } @media screen and (min-width:1025px) and (max-width:1280px){ /* 태블릿(Landscape) */ #contents.prd section.payPerUse ul.service > li{width:25%} } @media screen and (min-width:1281px){ #contents.prd section.payPerUse ul.service > li{width:20%; padding:2em 0} #contents.prd section.payPerUse ul.service > li h3:after{width:30px; margin:1em auto} #contents.prd section.payPerUse ul.service > li div.per{margin:0 0 10px 0} } @media screen and (min-width:1281px) and (max-width:1399px){ #contents.prd section.payPerUse ul.service > li{font-size:14px} } @media screen and (min-width:1400px) and (max-width:1599px){ #contents.prd section.payPerUse ul.service > li{font-size:15px} } @media screen and (min-width:1600px) and (max-width:1679px){ #contents.prd section.payPerUse ul.service > li{font-size:16px} } @media screen and (min-width:1680px) and (max-width:1919px){ #contents.prd section.payPerUse ul.service > li{font-size:17px} } @media screen and (min-width:1920px){ #contents.prd section.payPerUse ul.service > li{font-size:18px} } /* project */ ul.project{display:flex; flex-wrap:wrap; max-width:1600px; margin:0 auto; overflow:hidden; word-break:keep-all} ul.project > li{box-sizing:border-box} ul.project > li > a{display:block; font-family:"Noto Sans KR", sans-serif} ul.project > li div.ctn{position:relative;border: 1px solid rgb(0 0 0 / 9%); border-radius: 20px; padding:0; overflow:hidden} ul.project > li div.ctn:before{content:''; display:block; padding:50% 0} ul.project > li div.box{position:absolute; top:0; right:0; bottom:0; left:0; opacity: 0; background-position:50% 50%; background-repeat:no-repeat; background-size:cover; text-align:center; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; text-align:center; -webkit-transition:.5s; transition:.5s; /*-moz-transform:perspective(800px) rotateY(0deg); -webkit-transform:perspective(800px) rotateY(0deg); -ms-transform:perspective(800px) rotateY(0deg); -o-transform:perspective(800px) rotateY(0deg); transform:perspective(800px) rotateY(0deg)*/} ul.project > li div.box:before{content:''; position:absolute; top:0; right:0; bottom:0; left:0; background-color:rgb(8 13 24 / 80%)} ul.project > li:hover div.box{opacity: 1; z-index: 1; -webkit-transition: .6s; transition: .6s; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /*-moz-transform:perspective(800px) rotateY(180deg); -webkit-transform:perspective(800px) rotateY(180deg); -ms-transform:perspective(800px) rotateY(180deg); -o-transform:perspective(800px) rotateY(180deg); transform:perspective(800px) rotateY(180deg)*/} ul.project > li div.box div.date{position:absolute; right:15px; top:15px; font-size: 14px; border-radius:500px; color:#fff; background:var(--color---color-primary)} ul.project > li div.box div.type{position:absolute; top:50%; transform:translateY(-50%); width:100%; padding:10px; box-sizing:border-box} ul.project > li h3{color:#fff} ul.project > li p.desc{color:#fff} ul.project > li p.etc{color: #fff; opacity: .8;} ul.project > li p.etc span.keyword{display:inline-block} ul.project > li div.company{position:absolute; right:20px; bottom:20px; color:rgb(90,202,255)} ul.project > li div.boxBack{position:absolute; top:0; right:0; bottom:0; left:0; background-color:#fff; background-position:50% 50%; background-repeat:no-repeat; background-size:cover; text-align:center; opacity:1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; text-align:center; -webkit-transition:.5s; transition:.5s; /*-moz-transform:perspective(800px) rotateY(-180deg); -webkit-transform:perspective(800px) rotateY(-180deg); -ms-transform:perspective(800px) rotateY(-180deg); -o-transform:perspective(800px) rotateY(-180deg); transform:perspective(800px) rotateY(-180deg)*/} ul.project > li div.boxBack .date{position:absolute; right:15px; top:15px; font-size: 14px; color:#fff; background:var(--color-primary); border-radius: 500px;} ul.project > li div.boxBack h3{position:absolute; width:100%; right:0; bottom:0; padding:10px; margin:0; color:#fff; background-color:rgb(0 14 41 / 60%);font-weight: 400;} ul.project > li div.boxBack p.desc{color:#fff} ul.project > li div.boxBack p.etc{color:#48ff3e} @media screen and (max-width:1280px){ ul.project > li{width:calc(100%/2); padding: 5px;} ul.project > li .date{padding:8px; font-size:12px} ul.project > li h3{font-size:16px} ul.project > li div.box h3{margin:0 0 10px 0} ul.project > li p.desc{margin:0 0 8px 0; font-size:13px} ul.project > li p.etc{font-size:12px} ul.project > li div.company{font-size:10px} } @media screen and (max-width:320px){ ul.project > li{width:100%} } @media screen and (min-width: 319px) and (max-width: 428px) { ul.project > li{width:100%} } @media screen and (min-width:1281px){ ul.project > li{width: calc(100% / 4); padding: 10px;} ul.project > li .date{padding:8px 15px} ul.project > li h3{font-size:2em} ul.project > li div.box h3{margin:0 0 0.5em 0} ul.project > li p.desc{margin:0 0 0.8em 0} ul.project > li .boxBack h3{font-size: 1em; font-weight: 400; } } /* project */ .uufZp { --gradient-color-1: #20bdff; --gradient-color-2: #0ce8e1; --gradient-color-3: #e5e298; --gradient-color-4: #ffffff; --gradient-color-5: #0061ff; width: 100%; height: 100%; box-shadow: rgb(255 255 255 / 0%) 0px 0px 1px; } /* detailpage */ #contents.prd section.detailpage { border-top: 1px solid #e3e3e3; } /* 소식지 필요한 이유 (explanation) */ .newsletter-explanation {background:url('https://www.picosoft.kr/image/newsletter/bg.png') no-repeat; background-size: cover; color: #fff} .newsletter-explanation-inner { } .newsletter-explanation-content {padding-top: 7.5rem;} .newsletter-explanation-desc {display: flex; flex-direction: column; gap: 1.25rem; margin: 3.88rem 0 4rem 0;} .newsletter-explanation-desc-p {font-weight: 300;} .newsletter-explanation-mid-ul{display: flex; margin:-10px -10px 0; padding-bottom: 5em;} .newsletter-explanation-mid-ul-li{display: flex; box-sizing: border-box; width: calc(100% / 2); padding: 10px;} .newsletter-explanation-mid-ul-li-in{width: 100%; border-radius: 20px; box-sizing: border-box; background: rgba(255, 255, 255, 0.1); padding: 3em 3em 4em;} .newsletter-explanation-mid-ul-li-in-h4{#fff; font-size: 1.5em; margin: 1.42em 0;} .newsletter-explanation-mid-ul-li-in-p{#fff; white-space: pre-line; word-break: break-word;} .newsletter-explanation-mid-ul-li-wrap {display: flex;} @media screen and (max-width:1280px){ .newsletter-explanation {padding: 4rem 3vw 2rem;} .newsletter-explanation-title-st {color: #fff; font-weight: 500; font-size: 2rem;} .newsletter-explanation-content {padding-top: 2.5rem;} .newsletter-explanation-mid-ul-li-in {padding: 2em 2em 3em;} } @media screen and (max-width:1024px) { .newsletter-explanation-mid-ul {flex-direction: column;} } /* 소식지 유형(newsletter type) */ section.newsletter div.comment p{font-weight:400; white-space:pre-line; line-height: 148%; color: var(--color-secondary);} html.ja section.newsletter div.comment p{word-break:break-all} html.zh section.newsletter div.comment p{word-break:break-all} .newsletter-type-inner {padding: 7.5rem 0;} .newsletter-type-title { white-space: pre-line;} .newsletter-type-desc {white-space: pre-line;} .newsletter-type-list {max-width: 1600px; margin: 3rem auto 0 auto; display: flex; flex-wrap: wrap; gap: 2rem;} .newsletter-type-item {width: calc((100% - 2 * 2rem) / 3); box-sizing: border-box; background-color: var(--color-background-tertiary); border-radius: 2.5rem; padding: 4.5rem 4rem; text-align: center; word-break: break-word;} .newsletter-type-item-head {display: flex; justify-content: space-between; align-items: center;} .newsletter-type-item-head-l {flex: 1} .newsletter-type-item-head-l img {width: 5.5rem; height: 5.5rem;} .newsletter-type-item-ico {width: 5.5rem; height: 5.5rem; fill: #403898} .newsletter-type-item-title {margin-top: 1.7rem; font-size: 1.6rem; font-weight: 600;} .newsletter-type-item-simple-desc {margin-top: 1rem; font-size: 1.25rem;} .newsletter-type-item-body {align-items: center; margin-top: 0.5rem;} .newsletter-type-item-content-desc {font-size: 0.875rem; color: #757575; margin-top: 0.5rem; white-space: pre-line;} @media screen and (min-width:1281px){ section.newsletter div.comment{max-width:1600px; margin:1rem auto; font-size:1.25rem} } @media screen and (max-width:1280px){ section.newsletter div.comment{margin:1rem auto; font-size:1.25rem;} #contents.prd section.newsletter.suggest div.overlay{background-position-x:40vw; background-size:cover} #contents.prd h2 {text-align: center;} section.newsletter div.comment p {text-align: center;} .newsletter-type-list{column-gap: 2rem; row-gap: 1.5rem;} .newsletter-type-item{width: calc((100% - 2rem) / 2); border-radius: 2.5rem; padding: 2.5rem 2rem;} } @media screen and (max-width: 768px){ .newsletter-type-item {width: 100%;} .newsletter-type-item-ico {width: 4.5rem; height: 4.5rem;} } /* 체크포인트 (Check Point) */ .check-point {background: #2c2b2e; color: #fff;} .check-point-inner {padding: 7.5rem 0;} .check-point-content {} .check-point-title {} .check-point-title-b {font-weight: 500; border-bottom: 2px solid #fff; color: #fff; font-size: 2rem; text-align: left;} .check-point-desc {margin-top: 1.25rem;} .sect-desc {font-size: 1.25rem; font-weight: 400;} .check-point-list {margin-top: 2.5rem; display: flex; flex-wrap: wrap; row-gap: 0.94rem} .check-point-item {position: relative; width: 50%; padding: 0 1.5rem; box-sizing: border-box; font-size: 1.2rem; line-height: 1.8rem; font-weight: 400; word-break: keep-all} html.ja .check-point-item{word-break: break-all} html.zh .check-point-item{word-break: break-all} .check-point-item::before {content: ''; position: absolute; top: 0.72rem; left: 0.36rem; width: 0.36rem; height: 0.36rem; border-radius: 50%; background: #fff;} .check-point-item-question{color: rgba(255,255,255,.86)} .check-point-item-answer{display:flex; flex-wrap:nowrap} .check-point-item-answer::before{content:url("data:image/svg+xml; utf8, "); display:block; width:0.75rem; height:0.75rem; flex-shrink: 0} .check-point-item-answer-txt{padding-top:0.2rem; padding-left:0.4rem} .check-point-item-link {color: var(--color-text-link-light);} .check-point-item-link:hover {text-decoration: underline;} @media screen and (max-width:1280px){ .check-point-inner {padding: 4rem 3vw;} .check-point-title {text-align: left !important;} .check-point-desc {text-align: left;} .check-point-item {width: 100%;} } /* 체크포인트 (Check Point) */