@charset "utf-8"; /* ------------------------------------------------------------ * Name : common.css ------------------------------------------------------------ */ body { margin:0; padding:0; font-family:'HelveticaNeue-Light','AppleSDGothicNeo-Light','Malgun Gothic','맑은 고딕',sans-serif; font-size:15px; color:#000000; line-height:1.46; letter-spacing:0; background:#ffffff; -webkit-text-size-adjust:none; } fieldset { min-width:100%; } h1, h2, h3, h4, h5, h6, form, div, p, em, img, table, tr, td, fieldset, label, dl, dt, dd { padding:0; margin:0; border:0;} h1, h2, h3, h4, h5, h6 {font-size:15px; color:#000000; line-height:1.46; font-weight:normal;} hr {display: none;} label {vertical-align:middle;} strong { font-weight:normal; } em, i {font-style:normal; } ul, ol, li {padding:0; margin:0; list-style:none;} .skip, legend, caption, .blindTit {position:absolute; top:0; left:-100px; width:0; height:0; overflow:hidden; visibility:hidden; font-size:0; line-height:0;} img {vertical-align:top; border:none 0;} table {width:100%;border:0;border-collapse:collapse;border-spacing:0;empty-cells:show;} button {cursor:pointer;border:none;} a { font-size:15px; color:#000000; line-height:1.46; text-decoration:none; } /* html.no-touchevents a:link , html.no-touchevents a:active , html.no-touchevents a:visited {color:#000000; text-decoration:none; } */ /* a:hover {text-decoration:underline;} */ .png24 { tmp:expression(setPNG24(this));} /* input */ input.text {padding:4px 2px 2px 2px; height:15px; border:1px solid #ccc; font-family:'HelveticaNeue-Light','AppleSDGothicNeo-Light','Malgun Gothic','맑은 고딕',sans-serif; font-size:15px; color:#000000; line-height:1.46; vertical-align:middle;} input.radio, input.checkbox { width:13px; height:13px; margin:0 3px -2px 3px; padding:0; } textarea {padding:2px; border:1px solid #ccc; background:#fff; font-family:'HelveticaNeue-Light','AppleSDGothicNeo-Light','Malgun Gothic','맑은 고딕',sans-serif; font-size:15px; color:#000000; line-height:1.46; vertical-align:middle;} select {height:18px; border:1px solid #ccc; font-family:'HelveticaNeue-Light','AppleSDGothicNeo-Light','Malgun Gothic','맑은 고딕',sans-serif; font-size:15px; color:#000000; line-height:1.46; vertical-align:middle; } select { text-overflow: ellipsis; white-space: nowrap;} select:focus {outline-color: #c00;} input {font-family:'HelveticaNeue-Light','AppleSDGothicNeo-Light','Malgun Gothic','맑은 고딕',sans-serif; font-size:15px; color:#000000; line-height:1.46; letter-spacing:0; } address{font-family:'HelveticaNeue-Light','AppleSDGothicNeo-Light','Malgun Gothic','맑은 고딕',sans-serif; font-style:normal;} article,aside,canvas,details,figcaption,figure, footer,header,hgroup,menu,nav,section,summary {display:block;} .ellipsis {text-overflow:ellipsis; -o-text-overflow: ellipsis; -moz-binding:url('./ellipsis.xml#ellipsis'); -moz-binding:url('./ellipsis.xml#ellipsis'); white-space: nowrap; overflow: hidden;} .img_valign {display:inline-block; margin-top:-1px; overflow:hidden; height:100%; vertical-align:middle;} /* input ios */ input::-webkit-date-and-time-value{ text-align:left; } /* common */ .cboth:before, .cboth:after {content:"";display:table;} .cboth:after {clear:both;} .cboth {zoom:1;} * html .cboth {zoom:1;} a, button { -webkit-tap-highlight-color:rgba(24,24,24,.1); } /* Skip nav Start */ #skip { position: relative; } #skip a { position: absolute; left:0; top: -35px; display: block; width:140px; color:#ffffff; background: #333333; text-align: center; line-height: 30px; font-size: 12px; z-index: 200; } #skip a:active , #skip a:focus { top:0; } /* Skip nav End */ /* Icon Set Start */ .icon , .formcheckbox .formcheckbox-wrap label:before , .formcheckbox .formcheckbox-wrap label:after , .formradiobox .formradiobox-wrap label:before , .formradiobox .formradiobox-wrap label:after , .formcheckFullbox .formcheckbox-wrap label span:before , .formcheckFullbox .formcheckbox-wrap label span:after , .listgroup-info-list.link li a.listgroup-info-link:before , .popupgroup-box .popupgroup-co-filterlist ul li a.filterlist-item.selected span:before , .popup-datepicker-wrap #ui-datepicker-div .ui-datepicker-header .ui-corner-all span , .listgroup-alarm .listgroup-alarm-item:first-of-type .listgroup-alarm-inner.listgroup-alarm-open:before , .payment-state-header-wrap:before , .formselectbox .formselectbox-inner:after , .cashtable-sort-wrap .formselectbox .formselectbox-inner:after , .amp-default-skin .vjs-control::before , .amp-default-skin.vjs-fullscreen .vjs-fullscreen-control::before , .amp-default-skin .vjs-big-play-button::before , .icon-03 { position:relative; width:15px; height:15px; font-size:0; color:transparent; line-height:0; text-indent:-999999px; vertical-align:middle; display:inline-block; background-repeat: no-repeat; background-position: 0 0; } .icon-badge-point , .icon-badge-coupon , .icon-badge-item , .icon-badge-gift , .icon-badge-event , .icon-badge-nft , .icon-badge-token { display: inline-block; vertical-align:top; background-repeat: no-repeat; background-position: 0 0; } .icon-logo { width:101px; height:30px; background-position:0px 0px;} .icon-logo-white { width:101px; height:30px; background-position:0px -40px; } .icon-logo-gary-ty1 { width: 102px; height: 20px; background-position: -387px -943px;} .icon-ti-arrow {width:15px; height:30px; background-position:0px -80px;} .icon-back { width:30px; height:30px; background-position:0px -500px; } .icon-back-white { width:30px; height:30px; background-position:-40px -780px; } .icon-select-bullet { width:30px; height:30px; background-position:-120px -500px; } .icon-search { width:30px; height:30px; background-position:-80px -540px; } .icon-search-white { width:30px; height:30px; background-position:-80px -820px; } .icon-search-gray-s { width:30px; height:30px; background-position:0px -820px; } .icon-search-delete-white { width:30px; height:30px; background-position:-120px -820px; } .icon-search-ti-01 { width: 23px; height:23px; background-position: -146px -938px; } .icon-search-ti-02 { width: 23px; height:23px; background-position: -174px -938px; } .icon-latest-search { width:30px; height:30px; background-position:-40px -820px; } .icon-setting { width:30px; height:30px; background-position:-120px -540px; } .icon-close { width:30px; height:30px; background-position:-80px -580px; } .icon-sharing { width:30px; height:30px; background-position:-120px -780px; } .icon-sharing-white { width:30px; height:30px; background-position:-80px -780px; } .icon-gift-white { width:30px; height:30px; background-position:-80px -500px; } .icon-more-rating-1 { width:34px; height:34px; background-position:-560px -590px; } .icon-more-rating-2 { width:34px; height:34px; background-position:-599.5px -590px; } .icon-more-rating-3 { width:34px; height:34px; background-position:-639px -590px; } .icon-more-rating-4 { width:34px; height:34px; background-position:-678.5px -590px; } .icon-more-rating-5 { width:34px; height:34px; background-position:-718px -590px; } .icon-more-down { width:34px; height:34px; background-position:-560px -629px; } .icon-crypto { width:34px; height:34px; background-position:-599.5px -629px; } .icon-externalpayment-2 { width:34px; height:34px; background-position:-639px -629px; } .icon-autoinstall-btn { width:30px; height:30px; background-position:-40px -500px; } .icon-reserve-benefits { width:50px; height:50px; background-position:-700px -500px; } .icon-pass-marking { width:26px; height:26px; background-position:0px -465px; } .on > .icon-pass-marking { background-position:-30px -465px; } .icon-externalpayment { width:23px; height:23px; background-position:-260px -500px; } .icon-reserveapp { width:23px; height:23px; background-position:-285px -500px; } .icon-alarm { width:23px; height:23px; background-position:-310px -500px; } .icon-category-game { width:23px; height:23px; background-position:-260px -525px; } .icon-category-app { width:23px; height:23px; background-position:-285px -525px; } .icon-11-info { width:22px; height:22px; vertical-align:top; background-position:-395px -500px; } .icon-logo-ss { width:22px; height:22px; vertical-align:top; background-position:-420px -500px; } .icon-benefit-nav-white { width:22px; height:22px; vertical-align:top; background-position:-445px -500px; } .icon-benefit-nav-white.down { width:22px; height:22px; vertical-align:top; background-position:-470px -500px; } .icon-del-s { width:20px; height:20px; background-position:-500px -500px; } .icon-reserve-01 { width:20px; height:20px; background-position:-525px -575px; } .icon-reserve-02 { width:20px; height:20px; background-position:-525px -600px; } .icon-info-20 { width:20px; height:20px; background-position:-525px -625px; } .icon-reserve-benefits-36 { width: 36px; height: 36px; background-position: -605px -545px; } .icon-link { width:15px; height:15px; background-position:-160px -500px; } .icon-controller-mark { width:15px; height:15px; background-position:-180px -500px; } .icon-controller-mark-blue { width:15px; height:15px; background-position:-160px -520px; } .icon-link-15 { width:11px; height:15px; background-position:-180px -500px; } .icon-externalpayment-15 { width:15px; height:15px; background-position:-220px -500px; } .icon-externalpayment-15-white { width:15px; height:15px; background-position:-220px -540px; } .icon-externalpayment-12-white { width:15px; height:15px; background-position:-875px -513px; } .icon-info { width:12px; height:12px; background-position:-982px -500px; } .icon-select-calendar { width:15px; height:15px; background-position:-180px -520px; } .icon-faq-arrow {width:15px; height:15px; background-position: -200px -520px;} .icon-faq-arrow.down {width:15px; height:15px; background-position: -220px -520px;} .icon-arrow.ty3 { width:15px; height:15px; background-position: -160px -540px;} .icon-arrow-main { width:15px; height:15px; background-position: -291px -900px; } .icon-externalpayment-15-2 { width:15px; height:15px; background-position: -240px -540px; } .icon-link-15-2 { width:15px; height:15px; background-position: -180px -540px; } .icon-9-plus { width:9px; height:9px; vertical-align:top; background-position:-850px -500px; } .icon-link-12-blue { width:12px; height:12px; vertical-align:top; background-position:-860px -500px; display: none; } .icon-rating-12-1 { width:12px; height:12px; vertical-align:top; background-position:-875px -500px; } .icon-rating-12-2 { width:12px; height:12px; vertical-align:top; background-position:-890px -500px; } .icon-rating-12-3 { width:12px; height:12px; vertical-align:top; background-position:-905px -500px; } .icon-rating-12-4 { width:12px; height:12px; vertical-align:top; background-position:-920px -500px; } .icon-rating-12-5 { width:12px; height:12px; vertical-align:top; background-position:-935px -500px; } .icon-rating-12-6 { width:12px; height:12px; vertical-align:top; background-position:-950px -500px; } .icon-rating-12-7 { width:12px; height:12px; vertical-align:top; background-position:-965px -500px; } .icon-fluc-new { width:23px; height:9px; background-position:-850px -490px; } .icon-fluc-no { width:15px; height:9px; background-position:-875px -490px; } .icon-fluc-up { width:9px; height:9px; background-position:-891px -490px; } .icon-fluc-down { width:9px; height:9px; background-position:-901px -490px; } .icon-fluc-upup { width:15px; height:15px; background-position:-920px -484px; } .icon-badge-point { width:44px; height:20px; background-position:0 0; } .icon-badge-coupon { width:44px; height:20px; background-position:-49px 0; } .icon-badge-item { width:44px; height:20px; background-position:-98px 0; } .icon-badge-gift { width:44px; height:20px; background-position:-147px 0; } .icon-badge-event { width:44px; height:20px; background-position:-196px 0; } .icon-badge-nft { width:44px; height:20px; background-position:0 -25px; } .icon-badge-token { width:44px; height:20px; background-position:-49px -25px; } .icon-todaybenefit { width:120px; height:52px; background-position:-100px -355px; } .icon-todaycoupon { width:120px; height:52px; background-position:-100px -417px; } .icon-todaycoupon2 { width:120px; height:52px; background-position:-230px -417px; } .icon-comm-url { width:40px; height:40px; background-position:-500px -280px; } .icon-comm-cafe { width:40px; height:40px; background-position:-545px -280px; } .icon-comm-facebook { width:40px; height:40px; background-position:-590px -280px; } .icon-comm-youtube { width:40px; height:40px; background-position:-635px -280px; } .icon-comm-twitter { width:40px; height:40px; background-position:-680px -280px; } .icon-comm-link { width:40px; height:40px; background-position:-725px -280px; } .icon-comm-telegram { width:40px; height:40px; background-position:-770px -280px; } .icon-comm-discord { width:40px; height:40px; background-position:-815px -280px; } .icon-window-20 { width:20px; height:20px; background-position:-500px -325px; } .icon-window-16 { width:16px; height:16px; background-position:-525px -325px; } .icon-info-12 { width:12px; height:12px; background-position:-546px -325px; } .icon-logo-34 { width:34px; height:42px; background-position:-869px -35px; } .icon-arrow-18 { width:18px; height:18px; background-position:-485px -623px; } .icon-cash { width:16px; height:16px; background-position:-260px -230px; } .icon-notice-info { width:40px; height:40px; background-position:-560px -500px; } .icon-refresh { width:40px; height:40px; background-position:-605px -500px; } .icon-logo-notice { width:40px; height:40px; background-position:-560px -545px; } .icon-point-text{vertical-align:middle; margin:0 0 0 2px;} .icon-arrow {width: 17px; height:17px; background-position: -850px -230px;} .icon-arrow.ty2 {width: 17px; height:17px; background-position: -873px -230px;} .icon-type-order-1 {width: 30px; height:30px; background-position: -850px -253px;} .icon-type-order-2 {width: 30px; height:30px; background-position: -890px -253px;} .icon-type-order-3 {width: 30px; height:30px; background-position: -930px -253px;} .icon-type-order-4 {width: 30px; height:30px; background-position: -850px -293px;} .icon-type-order-5 {width: 30px; height:30px; background-position: -890px -293px;} .icon-type-order-6 {width: 30px; height:30px; background-position: -930px -293px;} .icon-type-order-7 {width: 30px; height:30px; background-position: -850px -333px;} .icon-type-adult-18 {width:16px; height:16px; background-position: -500px -450px;} .icon-type-benefit-adult-18 {width:18px; height:18px; background-position: -500px -471px;} .icon-type-adult-19 {width:16px; height:16px; background-position: -523px -450px;} .icon-shop-detail-adult-19 {width:25px; height:25px; vertical-align: top; background-position: -600px -450px;} .icon-footer-kt {width:194px; height:30px; background-position: -160px -900px;} .icon-footer-lg {width:194px; height:30px; background-position: -160px -934px;} .icon-footer-onestore {width:194px; height:30px; background-position: -160px -968px;} .icon-footer-youtube {width:35px; height:35px; background-position: -76px -900px;} .icon-footer-facebook {width:35px; height:35px; background-position: -116px -900px;} .icon-footer-kt-m {width:80px; height:50px; background-position: -475px -900px;} .icon-footer-lg-m {width:80px; height:50px; background-position: -563px -900px;} .icon-footer-onestore-m {width:114px; height:17.5px; background-position: -387px -968px;} .icon-footer-youtube-m {width:25px; height:25px; background-position: -500px -190px;} .icon-footer-facebook-m {width:25px; height:25px; background-position: -530px -190px;} .icon-error-notice {width:12px; height:19px; background-position: -650px -500px;} .icon-logo-floating {width:19px; height:19px; background-position: -672px -500px;} .icon-member-social-g {width:16px; height:21px; background-position: -497px 0px;} .icon-member-arrow {width:15px; height:21px; background-position: -518px 0px;} .icon-reserve-notice {width:34px; height:10px; background-position: -260px -355px;} .icon-guide-num-1 {width:17px; height:17px; background-position: -850px -400px;} .icon-guide-num-2 {width:17px; height:17px; background-position: -872px -400px;} .icon-guide-num-3 {width:17px; height:17px; background-position: -894px -400px;} .icon-guide-num-4 {width:17px; height:17px; background-position: -916px -400px;} .icon-info-16-white { width:16px; height:16px; background-position:-260px -230px; } .icon-betazone-icon-01 { width: 60px; height: 60px; background-position: -760px -500px; } .icon-betazone-icon-02 { width: 60px; height: 60px; background-position: -760px -565px; } .icon-betazone-icon-03 { width: 60px; height: 60px; background-position: -760px -630px; } .icon-betazone-icon-04 { width: 60px; height: 60px; background-position: -760px -695px; } .icon-betazone-icon-05 { width: 60px; height: 60px; background-position: -760px -760px; } .icon-betazone-icon-06 { width: 60px; height: 60px; background-position: -760px -825px; } .icon-betazone-icon-info { width: 15px; height: 15px; background-position: -240px -520px; } .icon-betazone-arrow {width:19px; height:19px; background-position: -850px -425px;} .icon-carrier-kt { width:74px; height: 39px; background-position: -260px 0; } .icon-carrier-lg { width:74px; height: 39px; background-position: -339px 0; } .icon-carrier-onestore { width:74px; height: 39px; background-position: -418px 0; } .icon-change-language { width: 35px; height:35px; background-position: -156px -900px; } .icon-mainnet-01 { width:24px; height:24px; background-position:-500px -350px; } .icon-mainnet-02 { width:24px; height:24px; background-position:-529px -350px; } .icon-mainnet-03 { width:24px; height:24px; background-position:-558px -350px; } .icon-mainnet-04 { width:24px; height:24px; background-position:-587px -350px; } .icon-mainnet-05 { width:24px; height:24px; background-position:-616px -350px; } .icon-mainnet-06 { width:24px; height:24px; background-position:-645px -350px; } .icon-mainnet-07 { width:24px; height:24px; background-position:-674px -350px; } .icon-mainnet-08 { width:24px; height:24px; background-position:-703px -350px; } .icon-mainnet-09 { width:24px; height:24px; background-position:-732px -350px; } .icon-mainnet-10 { width:24px; height:24px; background-position:-761px -350px; } .icon-mainnet-11 { width:24px; height:24px; background-position:-790px -350px; } .icon-mainnet-12 { width:24px; height:24px; background-position:-819px -350px; } .icon-mainnet-13 { width:24px; height:24px; background-position:-848px -350px; } .icon-04 { position:relative; width:19px; height:19px; font-size:0; color:transparent; line-height:0; text-indent:-999999px; vertical-align:middle; background:url(../images/icon/icon_04.png) no-repeat 0px 0px; display:inline-block; -ms-background-size:500px 100px; -moz-background-size:500px 100px; -webkit-background-size:500px 100px; background-size:500px 100px; } .icon-04.icon-data-s-my-19 { background-position: 0 0;} .icon-04.icon-data-s-location-19 { background-position: -29px 0; } .icon-04.icon-data-s-card-19 { background-position: -58px 0; } .icon-04.icon-data-s-health-19 { background-position: -87px 0; } .icon-04.icon-data-s-media-19 { background-position: -116px 0; } .icon-04.icon-data-s-audio-19 { background-position: -145px 0; } .icon-04.icon-data-s-files-19 { background-position: -174px 0; } .icon-04.icon-data-s-mail-19 { background-position: -203px 0; } .icon-04.icon-data-s-touch-19 { background-position: -232px 0; } .icon-04.icon-data-s-appinfo-19 { background-position: -261px 0; } .icon-04.icon-data-s-devies-19 { background-position: -290px 0; } .icon-04.icon-data-s-etc-19 { background-position: -319px 0; } .icon-04.icon-data-s-my-24 { width: 24px; height: 24px; background-position: 0 -29px;} .icon-04.icon-data-s-location-24 { width: 24px; height: 24px; background-position: -34px -29px; } .icon-04.icon-data-s-card-24 { width: 24px; height: 24px; background-position: -68px -29px; } .icon-04.icon-data-s-health-24 { width: 24px; height: 24px; background-position: -102px -29px; } .icon-04.icon-data-s-media-24 { width: 24px; height: 24px; background-position: -136px -29px; } .icon-04.icon-data-s-audio-24 { width: 24px; height: 24px; background-position: -170px -29px; } .icon-04.icon-data-s-files-24 { width: 24px; height: 24px; background-position: -204px -29px; } .icon-04.icon-data-s-mail-24 { width: 24px; height: 24px; background-position: -238px -29px; } .icon-04.icon-data-s-touch-24 { width: 24px; height: 24px; background-position: -272px -29px; } .icon-04.icon-data-s-appinfo-24 { width: 24px; height: 24px; background-position: -306px -29px; } .icon-04.icon-data-s-devies-24 { width: 24px; height: 24px; background-position: -340px -29px; } .icon-04.icon-data-s-etc-24 { width: 24px; height: 24px; background-position: -374px -29px; } .icon-04.icon-data-24 { width: 24px; height: 24px; background-position: -408px -29px; } .icon-04.icon-data-20 { width: 20px; height: 20px; background-position: 0 -63px; } .icon-04.icon-data-info-20 { width: 20px; height: 20px; background-position: -30px -63px; } .icon-04.icon-data-arrow-20 { width: 20px; height: 20px; background-position: -90px -63px; } .icon-03.icon-logo { width:134px; height: 25px; background-position: -161px 0;} .icon-03.icon-search { width:30px; height: 30px; background-position: -45px -128px;} .icon-03.icon-logo-download { width:20px; height: 20px; background-position: -266px -38px;} .icon-03.icon-step-01 { width: 28px; height: 28px; background-position: -42px -231px; flex:0 0 28px; } .icon-03.icon-step-02-logo { width: 30px; height: 30px; background-position: -192px -38px; flex:0 0 30px; } .icon-03.icon-step-02-onoff { width: 42px; height: 26px; background-position: -80px -231px;} .icon-03.icon-step-03-logo { width: 20px; height: 20px; background-position: -266px -38px; flex:0 0 20px; } .icon-03.icon-outlink { width: 24px; height: 24px; background-position: -84px -303px;} .icon-03.icon-footer-logo { width: 50px; height: 50px; background-position: -90px -38px;} .icon-03.icon-menu-check { width: 20px; height: 20px; background-position: -60px -201px;} /* Icon Set End */ /* shop 뱃지 Start */ .detailshoppingtop .icon-shop-detail-adult-19 {padding: 0 7px 0 0;} /* shop 뱃지 End */ .icon-logo-download { width:140px; height:140px; background-position: -860px -82px;} .icon-logo-download-s { width:76px; height:76px; background-position: -908px 0px;} /* Loading Style Start */ @-ms-keyframes loadingBoxAni { 0% { -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); transform:rotate(0deg); } 100% { -ms-transform:rotate(360deg); -moz-transform:rotate(360deg); -webkit-transform:rotate(360deg); transform:rotate(360deg); } } @-moz-keyframes loadingBoxAni { 0% { -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); transform:rotate(0deg); } 100% { -ms-transform:rotate(360deg); -moz-transform:rotate(360deg); -webkit-transform:rotate(360deg); transform:rotate(360deg); } } @-webkit-keyframes loadingBoxAni { 0% { -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); transform:rotate(0deg); } 100% { -ms-transform:rotate(360deg); -moz-transform:rotate(360deg); -webkit-transform:rotate(360deg); transform:rotate(360deg); } } @keyframes loadingBoxAni { 0% { -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); transform:rotate(0deg); } 100% { -ms-transform:rotate(360deg); -moz-transform:rotate(360deg); -webkit-transform:rotate(360deg); transform:rotate(360deg); } } .loadingBoxGroup { margin:0 auto; width:44px; height:44px; display:block; } .icon-loading-88 { margin:0 auto; width:44px; height:44px; display:block; background:url(../../common/images/icon/icon_loading_88.png) no-repeat center center; -ms-background-size:44px 44px; -moz-background-size:44px 44px; -webkit-background-size:44px 44px; background-size:44px 44px; -ms-animation:loadingBoxAni 1s linear infinite; -moz-animation:loadingBoxAni 1s linear infinite; -webkit-animation:loadingBoxAni 1.5s linear infinite; animation:loadingBoxAni 1s linear infinite; } .icon-loading-88.white { background-image:url(../../common/images/icon/icon_loading_88_white.png); } /* Loading Style End */ /* Text Style Start */ .text-warning { color:#ff3543 !important; } /* Text Style End */ /* Margin Style Start */ .pt5 { padding-top:5px !important; } .pt7 { padding-top:7px !important; } .pt8 { padding-top:8px !important; } .pt10 { padding-top:10px !important; } .pt12 { padding-top:12px !important; } .pt15 { padding-top:15px !important; } .pt20 { padding-top:20px !important; } .pt25 { padding-top:25px !important; } .pt30 { padding-top:30px !important; } .pt40 { padding-top:40px !important; } .pt60 { padding-top:60px !important; } .pb10 { padding-bottom:10px !important; } .pb15 { padding-bottom:15px !important; } .pb20 { padding-bottom:20px !important; } .pb25 { padding-bottom:25px !important; } .pb30 { padding-bottom:30px !important; } .pb35 { padding-bottom:35px !important; } .pb40 { padding-bottom:40px !important; } .pb45 { padding-bottom:45px !important; } .pb50 { padding-bottom:50px !important; } .pb55 { padding-bottom:55px !important; } .pb60 { padding-bottom:60px !important; } .pb65 { padding-bottom:65px !important; } .pb70 { padding-bottom:70px !important; } .pb75 { padding-bottom:75px !important; } .pb80 { padding-bottom:80px !important; } .pb85 { padding-bottom:85px !important; } .pb90 { padding-bottom:90px !important; } .pb95 { padding-bottom:95px !important; } .pb100 { padding-bottom:100px !important; } .mb0 { margin-bottom:0px !important; } .mb5 { margin-bottom:5px !important; } .mb7 { margin-bottom:7px !important; } .mb8 { margin-bottom:8px !important; } .mt30 { margin-top:30px !important; } .mb10 { margin-bottom:10px !important; } .mb12 { margin-bottom:12px !important; } .mb13{ margin-bottom:13px !important; } .mb15 { margin-bottom:15px !important; } .mb20 { margin-bottom:20px !important; } .mb23 { margin-bottom:23px !important; } .mb25 { margin-bottom:25px !important; } .mb30 { margin-bottom:30px !important; } .mb35 { margin-bottom:35px !important; } .mb40 { margin-bottom:40px !important; } .mb50 { margin-bottom:50px !important; } /* Margin Style End */ /* Button Style Start */ .btn { padding:11px 28px 11px 28px; min-width:140px; font-size:16px; color:#ffffff; line-height:21px; text-align:center; border:1px solid #272558; outline-width:0; background:#272558; display:inline-block; -ms-border-radius:23px; -moz-border-radius:23px; -webkit-border-radius:23px; border-radius:23px; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } /* html.no-touchevents a.btn:link, html.no-touchevents a.btn:active, html.no-touchevents a.btn:visited { color:#ffffff; } */ .btn-sm { padding:7px 17px 7px 17px; min-width:130px; font-size:14px; line-height:17px; } .btn-ssm { padding:6px 10px 6px 10px; min-width:73px; font-size:13px; line-height:16px; } .btn-link { min-width:0px; padding:0px 5px 0px 5px; color:#3d3a73; text-align:left; line-height:22px; background-color:transparent; border-width:0; -ms-border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px; border-radius:0px; } /* html.no-touchevents a.btn-link:link, html.no-touchevents a.btn-link:active, html.no-touchevents a.btn-link:visited { color:#3d3a73; } */ .btn-under { position:relative; min-width:0px; padding:0px 3px 0px 3px; font-size:13px; color:#4b469c; line-height:19px; background-color:transparent; border-width:0; -ms-border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px; border-radius:0px; } .left .btn-under { padding:0 } /* html.no-touchevents a.btn-under:link, html.no-touchevents a.btn-under:active, html.no-touchevents a.btn-under:visited { color:#8a899f; } */ .btn-primary { color:#ffffff; border-color:#272558; background:#272558; } .btn-primary.dimmed{opacity:.5; background: #272558;} /* html.no-touchevents a.btn-primary:link, html.no-touchevents a.btn-primary:active, html.no-touchevents a.btn-primary:visited { color:#ffffff; } */ .btn-primary.btn-w140 {padding:11px 22px 11px 22px;} .btn-primary.btn-text-long {padding:11px 9px;} .btn-light { color:#3e3877; border-color:#acaac4; background:#ffffff; } /* html.no-touchevents a.btn-light:link, html.no-touchevents a.btn-light:active, html.no-touchevents a.btn-light:visited { color:#3e3877; } */ .btn-trans { color:#3e3877; border-color:transparent; background:#ffffff; } .btn-toggle { position:relative; width:40px; height:20px; font-size:0px; color:transparent; line-height:0; text-indent:-999999px; vertical-align:middle; display:inline-block; } .btn-toggle:before { position:absolute; content:''; left:0; top:2px; width:40px; height:16px; background-color:#d8d8d8; display:block; -ms-border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; -ms-transition:all 0.1s linear; -moz-transition:all 0.1s linear; -webkit-transition:all 0.1s linear; transition:all 0.1s linear; } .btn-toggle:after { position:absolute; content:''; left:0; top:0; width:20px; height:20px; background:#ffffff; border:1px solid #d8d8d8; display:block; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; -ms-border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; -ms-transition:all 0.1s linear; -moz-transition:all 0.1s linear; -webkit-transition:all 0.1s linear; transition:all 0.1s linear; } .btn-toggle.selected:before { background-color:#272558; } .btn-toggle.selected:after { left:20px; } .btngroup { margin:0; } .btngroup ul { text-align:center; display:block; } .btngroup ul.left { text-align:left; } .btngroup ul li { margin:0 2px 0 3px; display:inline-block; padding-top:10px;} .btngroup ul li.dimmed {opacity: 0.5;} .btngroupblock { margin:0; } .btngroupblock ul { text-align:center; display:block; } .btngroupblock ul li { margin:0; padding-top:12px; display:block; } .btngroupblock ul li:first-of-type { padding-top:0; } .btngroupblock.w195 ul li .btn { min-width:195px; } .btngroupblock.w150 ul li .btn { min-width:150px; } /* Button Style End */ /* Toast Popup Start */ .toastgroup-wrap { position:fixed; left:0; bottom:-200px; width:100%; z-index:1000; max-width: 768px; padding:20px 20px 0; margin: 0 auto; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .toastgroup-wrap .toastgroup-inner { position:relative; padding:13px; width:100%; margin:0 auto; background: rgba(53, 53, 53, 0.95); font-size:14px; color:#ffffff; line-height:20px; text-align:center; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; -ms-border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; } .toastgroup-wrap .toastgroup-inner i { position: relative; top:-1px; padding-right: 7px; } /* Toast Popup End */ /* Header Type Start */ .webviewheader { position:fixed; left:0; top:0; width:100%; height:70px; table-layout:fixed; display:table; background-color:rgba(255,255,255,0.9); z-index:101; } .webviewheader .header-co { padding:20px 20px 20px 20px; } .webviewheader .header-co .header-co-full { } .webviewheader .header-co .header-link { position:relative; padding:0 0 0 38px; height:30px; display:block; } .webviewheader .header-co .header-link .icon-back { position:absolute; left:0; top:0; } .webviewheader .header-co .header-link span { font-size:17px; color:#010101; line-height:30px; display:block; text-overflow:ellipsis; white-space: nowrap; overflow: hidden; } .helpheader { position:fixed; left:0; top:0; width:100%; height:70px; table-layout:fixed; display:table; background-color:rgba(255,255,255,0.9); z-index:101; } .helpheader .header-co { padding:20px 20px 20px 20px; } .helpheader .header-co .header-co-full { } .helpheader .header-co .header-link { position:relative; padding:0 0 0 38px; height:30px; display:block; } .helpheader .header-co .header-link .icon-back { position:absolute; left:0; top:0; } .helpheader .header-co .header-link span { font-size:17px; color:#010101; line-height:30px; display:inline-block; padding:0; } .helpheader .header-co .header-co-inner { } .helpheader .header-co .header-co-inner .header-co-left { float:left; height:30px; } .helpheader .header-co .header-co-inner .header-co-left .header-link { float:left; height:30px; padding:0 0 0 38px; } .helpheader .header-co .header-co-inner .header-co-left .header-link .icon-back { position:absolute; vertical-align:top; } .helpheader .header-co .header-co-inner .header-co-right { float:right; } .helpheader .header-co .header-co-inner .header-co-right .header-link { float:left; margin-left:10px; height:30px; padding:0; } .helpheader .header-co .header-co-inner .header-co-right .header-link span { font-size:15px; line-height: 30px; color:#4b469c; } .landingheader { position:fixed; left:0; top:0; width:100%; height:70px; table-layout:fixed; display:table; background-color:rgba(255,255,255,0.9); z-index:101; } .landingheader .header-co { padding:20px 20px 20px 20px; } .landingheader .header-co .header-co-full { } .landingheader .header-co .header-link { position:relative; padding:0 0 0 38px; height:30px; display:block; } .landingheader .header-co .header-link .icon-back { position:absolute; left:0; top:0; } .landingheader .header-co .header-link span { font-size:17px; color:#010101; line-height:30px; display:block; text-overflow:ellipsis; white-space: nowrap; overflow: hidden; } .detailheader { position:fixed; left:0; top:0; width:100%; height:70px; display:table; background-color:rgba(255,255,255,0.9); z-index:101; } .detailheader .header-co { padding:20px 20px 20px 20px; } .detailheader .header-co .header-co-full { } .detailheader .header-co .header-link { position:relative; padding:0 0 0 38px; height:30px; display:block; } .detailheader .header-co .header-link .icon-back { position:absolute; left:0; top:0; } .detailheader .header-co .header-link span { font-size:17px; color:#010101; line-height:30px; display:inline-block; } .detailheader .header-co .header-co-inner { } .detailheader .header-co .header-co-inner .header-co-left { float:left; height:30px; } .detailheader .header-co .header-co-inner .header-co-left .header-link { float:left; height:30px; padding:0; } .detailheader .header-co .header-co-inner .header-co-left .header-link .icon-back { position:relative; vertical-align:top; } .detailheader .header-co .header-co-inner .header-co-right { float:right; } .detailheader .header-co .header-co-inner .header-co-right .header-link { float:left; margin-left:10px; height:30px; padding:0; } .detailheader .header-co .header-co-inner .header-co-right .header-link .icon-back { position:relative; } .detailheader .header-co .header-co-inner .header-co-right .header-link:first-of-type { margin-left:0;} .detailheader .header-co .header-co-inner .header-co-right .header-link-app { width:30px; background-repeat:no-repeat; background-position:center center; -ms-border-radius:7px; -moz-border-radius:7px; -webkit-border-radius:7px; border-radius:7px; -ms-background-size:30px 30px; -moz-background-size:30px 30px; -webkit-background-size:30px 30px; background-size:30px 30px; font-size:0px; text-indent: -999999px; } .oscMVMode .detailheader.reverse a:nth-of-type(2) { display:none; } .reserveheader { position:fixed; left:0; top:0; width:100%; height:70px; display:table; background-color:rgba(49,44,112,0.8); z-index:101; } .reserveheader .header-co { padding:20px 20px 20px 20px; } .reserveheader .header-co .header-co-full { } .reserveheader .header-co .header-link { position:relative; padding:0 0 0 38px; height:30px; display:block; } .reserveheader .header-co .header-link .icon-back { position:absolute; left:0; top:0; } .reserveheader .header-co .header-link span { font-size:17px; color:#010101; line-height:30px; display:inline-block; } .reserveheader .header-co .header-co-inner { } .reserveheader .header-co .header-co-inner .header-co-left { float:left; height:30px; } .reserveheader .header-co .header-co-inner .header-co-left .header-link { float:left; height:30px; padding:0; } .reserveheader .header-co .header-co-inner .header-co-left .header-link .icon-back { position:relative; vertical-align:top; } .reserveheader .header-co .header-co-inner .header-co-right { float:right; } .reserveheader .header-co .header-co-inner .header-co-right .header-link { float:left; margin-left:10px; height:30px; padding:0; } .reserveheader .header-co .header-co-inner .header-co-right .header-link .icon-back { position:relative; } .reserveheader .header-co .header-co-inner .header-co-right .header-link:first-of-type { margin-left:0; } .reserveheader .header-co .header-co-inner .header-co-right .header-link-app { width:30px; background-repeat:no-repeat; background-position:center center; -ms-border-radius:7px; -moz-border-radius:7px; -webkit-border-radius:7px; border-radius:7px; -ms-background-size:30px 30px; -moz-background-size:30px 30px; -webkit-background-size:30px 30px; background-size:30px 30px; } .reserveheader.white { background-color:rgba(255,255,255,0.9); } .reserveheader.friend { background-color:rgba(112,200,120,0.8); } .reserveheader.push {} .reserveheader.push .header-co .header-co-inner .header-co-left .header-link.oscWebViewHeaderLink {position: relative; padding: 0 0 0 38px; height: 30px;} .reserveheader.push .header-co .header-co-inner .header-co-left .header-link.oscWebViewHeaderLink .icon-back {position: absolute;left: 0;top: 0;} .reserveheader.push .header-co .header-link.oscWebViewHeaderLink span {font-size: 17px; color: #010101;line-height: 30px;display: block;text-overflow: ellipsis;white-space: nowrap; overflow: hidden;} .reserveheader.logotextMW {display: block} .reserveheader.logotextMW .header-co .header-co-inner .header-co-left {float:none;} .reserveheader.logotextMW .header-co .header-co-inner .header-co-left .header-link.oscMWHeaderLink{position: relative; padding: 0 0 0 101px; height: 30px; float: none;} .reserveheader.logotextMW .header-co .header-co-inner .header-co-left .header-link.oscMWHeaderLink .header-link-home { position: absolute; left:0; top:0; display: inline-block; width:101px; vertical-align: top;} .reserveheader.logotextMW .header-co .header-co-inner .header-co-left .header-link.oscMWHeaderLink .header-link-home .icon-logo {} .reserveheader.logotextMW .header-co .header-co-inner .header-co-left .header-link.oscMWHeaderLink .icon-ti-arrow { display: inline-block; vertical-align: top; margin:0 3px; float:left;} .reserveheader.logotextMW .header-co .header-co-inner .header-co-left .header-link.oscMWHeaderLink span {font-size: 17px; color: #010101; line-height: 30px; display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;} .reserveheader.logotextMW .header-co .header-co-inner .header-co-left .header-link.oscWebViewHeaderLink {position: relative; padding: 0 0 0 38px; height: 30px; float:none;} .reserveheader.logotextMW .header-co .header-co-inner .header-co-left .header-link.oscWebViewHeaderLink .icon-back {position: absolute;left: 0;top: 0;} .reserveheader.logotextMW .header-co .header-link.oscWebViewHeaderLink span {font-size: 17px; color: #010101;line-height: 30px;display: block;text-overflow: ellipsis;white-space: nowrap; overflow: hidden;} .detailheader.logotextheader {display: block;} .detailheader.logotextheader .header-co .header-co-inner {position: relative; width: 100%; height: 100%;} .detailheader.logotextheader .header-co .header-co-inner .header-co-left {float:none;} .detailheader.logotextheader .header-co .header-co-inner .header-co-left .header-link{position: relative; padding: 0 30px 0 101px; height: 30px; float: none;} .detailheader.logotextheader .header-co .header-co-inner .header-co-left .header-link .header-link-home { position: absolute; left:0; top:0; display: inline-block; width: 101px; vertical-align: top;} .detailheader.logotextheader .header-co .header-co-inner .header-co-left .header-link .header-link-home .icon-logo {} .detailheader.logotextheader .header-co .header-co-inner .header-co-left .header-link .icon-ti-arrow { display: inline-block; vertical-align: top; margin:0 3px; float:left;} .detailheader.logotextheader .header-co .header-co-inner .header-co-left .header-link span {font-size: 17px; color: #010101; line-height: 30px; display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} .detailheader.logotextheader .header-co .header-co-inner .header-co-right {position:absolute; right:0; top:0;float:none;} .detailheader.logotextheader.right-content-no .header-co .header-co-inner .header-co-left .header-link{padding: 0 0 0 101px;} .detailheader.logotextheader.fs15 .header-co .header-co-inner .header-co-left .header-link span {font-size:15px;} .detailheader.logotextheader.downloadguide { background-color: transparent; } .detailheader.logotextheader.downloadguide.HeaderAni { background-color: rgba(16,16,16,0.4); } #wrap.conditions #header.reserveheader.logotextMW .header-co .header-co-inner .header-co-left .header-link.oscMWHeaderLink span { /*font-size:15px;*/ display: none; } #wrap.conditions #header.reserveheader.logotextMW .header-co .header-link.oscWebViewHeaderLink span { display:none; } #wrap.conditions #header.reserveheader.logotextMW .header-co .header-co-inner .header-co-left .header-link.oscMWHeaderLink .icon-ti-arrow { display:none; } .detailheader.logotextheader.landing .header-co .header-co-inner .header-co-left .header-link { padding: 0 30px 0 38px; } .detailheader.logotextheader.landing .header-co .header-link .icon-back { position:absolute; left:0; top: 0; } body.oscMVMode .reserveheader .oscMWHeaderLink { display:block; } body.oscMVMode .reserveheader .oscWebViewHeaderLink { display:none; } body.webViewMode .reserveheader .oscMWHeaderLink { display:none; } body.webViewMode .reserveheader .oscWebViewHeaderLink { display:block; } body.oscMVMode .reverse .oscMWHeaderLink { display:block; } body.oscMVMode .reverse .oscWebViewHeaderLink { display:none; } body.webViewMode .reverse .oscMWHeaderLink { display:none; } body.webViewMode .reverse .oscWebViewHeaderLink { display:block; } .searchheader { position:fixed; left:0; top:0; padding:15px 20px 0 20px; width:100%; height:65px; display:table; background-color:rgba(255,255,255,0.9); z-index:101; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .searchheader .header-co { position:relative; width:100%; height:55px; padding:12px 15px 12px 20px; background-color:#181438; -ms-border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .searchheader .header-co .header-co-full { width:100%; height:100%; table-layout:fixed; display:table; } .searchheader .header-co .header-co-cell { text-align:center; vertical-align:middle; display:table-cell; } .searchheader .header-co .header-co-search { text-align:left; } .searchheader .header-co .header-co-search-back { width:45px; text-align:left; display:none; } .searchheader .header-co .header-co-search-back a { display:block; } .searchheader .header-co .header-co-search-back a .icon { display:block; } .searchheader .header-co .header-co-search-del { width:45px; display:none; } .searchheader .header-co .header-co-search-del button { margin:0 auto; padding:0; width:30px; height:30px; outline:none; background-color:transparent; display:block; } .searchheader .header-co .header-co-search-del button .icon { display:block; } .searchheader .header-co .header-co-search-btn { width:30px; } .searchheader .header-co .header-co-search-btn a { display:block; } .searchheader .header-co .header-co-search-btn a .icon { display:block; } .searchheader .header-co .header-co-search .header-co-search-input { padding:0 15px 0 0; vertical-align:top; display:block; } .searchheader .header-co .header-co-search .input-search-control { width:100%; font-size:17px; color:#ffffff; line-height:30px; border:none; outline:none; background-color:transparent; padding: 0; } .searchheader .header-co .header-co-search .input-search-control::-ms-clear { display:none; } .searchheader .header-co .header-co-search .input-search-control::-webkit-input-placeholder { color:#ffffff; } .searchheader .header-co .header-co-search .input-search-control::-moz-placeholder { color:#ffffff; } .searchheader .header-co .header-co-search .input-search-control::-moz-p { color:#ffffff; } .searchheader .header-co .header-co-search .input-search-control:-ms-input-placeholder { color:#ffffff !important; } .searchheader.focus .header-co { padding-left:15px; } .searchheader.focus .header-co .header-co-search-back { display:table-cell; } .searchheader.focus .header-co .header-co-search .input-search-control::-webkit-input-placeholder { color:rgba(255,255,255,0.3); } .searchheader.focus .header-co .header-co-search .input-search-control::-moz-placeholder { color:rgba(255,255,255,0.3); } .searchheader.focus .header-co .header-co-search .input-search-control::-moz-p { color:rgba(255,255,255,0.3); } .searchheader.focus .header-co .header-co-search .input-search-control:-ms-input-placeholder { color:rgba(255,255,255,0.3) !important; } .searchheader.focus.delon .header-co .header-co-search .header-co-search-input { padding-right:5px; } .searchheader.focus.delon .header-co .header-co-search-del { display:table-cell; } .mwtextheader { position:fixed; left:0; top:0; width:100%; height:70px; table-layout:fixed; display:table; background-color:rgba(255,255,255,0.9); z-index:101; } .mwtextheader .header-co { padding:20px 20px 20px 20px; } .mwtextheader .header-co .header-co-full { } .mwtextheader .header-co .header-text { position:relative; padding:0; height:30px; display:block; } .mwtextheader .header-co .header-text span { font-size:17px; color:#010101; line-height:30px; display:block; text-overflow:ellipsis; white-space: nowrap; overflow: hidden; } .dataheader { position:fixed; left:0; top:0; width:100%; height:70px; display:table; background-color:rgba(247, 247, 248, 1); z-index:101; } .dataheader .header-co { padding:20px 20px 20px 20px; } .dataheader .header-co .header-co-full { } .dataheader .header-co .header-link { position:relative; padding:0 0 0 38px; height:30px; display:block; } .dataheader .header-co .header-link .icon-back { position:absolute; left:0; top:0; } .dataheader .header-co .header-link span { font-size:17px; color:#000000; line-height:30px; display:inline-block; } .dataheader .header-co .header-co-inner { } .dataheader .header-co .header-co-inner .header-co-left { float:left; height:30px; } .dataheader .header-co .header-co-inner .header-co-left .header-link { float:left; height:30px; padding:0; } .dataheader .header-co .header-co-inner .header-co-left .header-link .icon-back { position:relative; vertical-align:top; } .dataheader .header-co .header-co-inner .header-co-right { float:right; } .dataheader .header-co .header-co-inner .header-co-right .header-link { float:left; margin-left:10px; height:30px; padding:0; } .dataheader .header-co .header-co-inner .header-co-right .header-link .icon-back { position:relative; } .dataheader .header-co .header-co-inner .header-co-right .header-link:first-of-type { margin-left:0; } .dataheader .header-co .header-co-inner .header-co-right .header-link-app { width:30px; background-repeat:no-repeat; background-position:center center; -ms-border-radius:7px; -moz-border-radius:7px; -webkit-border-radius:7px; border-radius:7px; -ms-background-size:30px 30px; -moz-background-size:30px 30px; -webkit-background-size:30px 30px; background-size:30px 30px; font-size:0px; text-indent: -999999px; } .oscMVMode .dataheader.reverse a:nth-of-type(2) { display:none; } .gnbdatastyle #header { -ms-transition: background 0.3s linear; -moz-transition: background 0.3s linear; -webkit-transition: background 0.3s linear; transition: background 0.3s linear; } .gnbdatastyle .dataheader.dataHeaderAni , .gnbdatastyle .dataheader.dataHeaderAni { border-bottom-width: 1px; border-bottom-color: rgba(255,255,255,0.05); background: rgba(255,255,255,0.9); } /* Header Type End */ /* Form Controller Start */ .forminputbox { margin:0 20px; } .forminputbox .forminputbox-wrap { position:relative; } .forminputbox .forminputbox-wrap label { margin-bottom:5px; font-size:16px; line-height:30px; display:block; } .forminputbox .forminputbox-wrap .forminputbox-btn { position:absolute; right:0; top:0; } .forminputbox .forminputbox-col { position:relative; } .forminputbox .forminputbox-col:before { position:absolute; content:''; left:0; bottom:0; width:1px; height:8px; background:#cccccc; display:block; } .forminputbox .forminputbox-col:after { position:absolute; content:''; right:0; bottom:0; width:1px; height:8px; background:#cccccc; display:block; } .forminputbox .forminputbox-col input.form-input-control { width:100%; padding:0 15px 0 15px; font-size:15px; color:#000000; line-height:42px; border-width:0; border-bottom:1px solid #cccccc; outline-width:0; background-color:transparent; display:block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .forminputbox .forminputbox-col input.form-input-control[disabled] { color:#c8c8d2; background:#ffffff; } .forminputbox .forminputbox-col input.form-input-control::-ms-clear { display:none; } .forminputbox .forminputbox-col input.form-input-control::-webkit-input-placeholder { color:#a4a4a4; } .forminputbox .forminputbox-col input.form-input-control::-moz-placeholder { color:#a4a4a4; } .forminputbox .forminputbox-col input.form-input-control::-moz-p { color:#a4a4a4; } .forminputbox .forminputbox-col input.form-input-control:-ms-input-placeholder { color:#a4a4a4 !important; } .forminputbox .forminputbox-info { margin:0 5px; padding:7px 0 0 0; font-size:13px; color:#8c8c8c; line-height:19px; } .forminputbox.focus .forminputbox-col:before { background:#2d297a; } .forminputbox.focus .forminputbox-col:after { background:#2d297a; } .forminputbox.focus .forminputbox-col input.form-input-control { border-bottom-color:#2d297a; } .formselectbox { margin:0 20px; } .formselectbox .formselectbox-wrap { position:relative; } .formselectbox .formselectbox-wrap label { margin-bottom:5px; font-size:16px; line-height:30px; display:block; } .formselectbox .formselectbox-col { position:relative; } .formselectbox .formselectbox-col select { display:none; } .formselectbox .formselectbox-col:before { position:absolute; content:''; left:0; bottom:0; width:1px; height:8px; background:#cccccc; display:block; } .formselectbox .formselectbox-col:after { position:absolute; content:''; right:0; bottom:0; width:1px; height:8px; background:#cccccc; display:block; } .formselectbox .formselectbox-col .form-select-control { width:100%; padding:0 45px 0 15px; font-size:15px; color:#000000; height:43px; line-height:42px; border-width:0; border-bottom:1px solid #cccccc; outline-width:0; background-color:transparent; display:block; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .formselectbox .formselectbox-col .form-select-control span { font-size:15px; color:#a4a4a4; height:42px; line-height:42px; display:block; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; } .formselectbox .formselectbox-col .form-select-control-blank { position:absolute; left:0; top:0; width:100%; height:100%; display:block; z-index:10; } .formselectbox .formselectbox-col.selected .form-select-control span { color:#000000; } .formselectbox .formselectbox-col.no .form-select-control { padding-right:15px; } .formselectbox .formselectbox-col.no .icon-select-bullet { display:none; } .formselectbox .formselectbox-col .icon-select-bullet { position:absolute; right:5px; top:6px; vertical-align:top; } .formcheckFullbox { margin:0 20px; } .formcheckFullbox input[type="checkbox"] { position:absolute; left:0; top:0; opacity:0; } .formcheckFullbox .formcheckbox-wrap { width:100%; min-height:48px; display:table; } .formcheckFullbox .formcheckbox-wrap label { position:relative; width:100%; padding:8px 10px 8px 10px; border:1px solid #e1e1e1; text-align:center; display:table-cell; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; -ms-border-radius:12px; -moz-border-radius:12px; -webkit-border-radius:12px; border-radius:12px; } .formcheckFullbox .formcheckbox-wrap label span { position:relative; padding:0 0 0 40px; font-size:15px; color:#000000; line-height:30px; display:inline-block; } .formcheckFullbox .formcheckbox-wrap label em { font-size:15px; color:#828282; line-height:30px; display:inline-block; } .formcheckFullbox .formcheckbox-wrap label span:before { position:absolute; content:''; width:30px; height:30px; left:0; top:50%; margin-top:-15px; background-position:0px -540px; opacity:1; -ms-transform:scale(1); -moz-transform:scale(1); -webkit-transform:scale(1); transform:scale(1); } .formcheckFullbox .formcheckbox-wrap label span:after { position:absolute; content:''; width:30px; height:30px; left:0; top:50%; margin-top:-15px; background-position:-40px -540px; opacity:0; -ms-transform:scale(0); -moz-transform:scale(0); -webkit-transform:scale(0); transform:scale(0); } .formcheckFullbox .formcheckbox-wrap input[type="checkbox"]:checked + label { border-color:#272558; background-color:#272558; } .formcheckFullbox .formcheckbox-wrap input[type="checkbox"]:checked + label span , .formcheckFullbox .formcheckbox-wrap input[type="checkbox"]:checked + label em { color:#ffffff; } .formcheckFullbox .formcheckbox-wrap input[type="checkbox"]:checked + label span:before { opacity:0; -ms-transform:scale(0); -moz-transform:scale(0); -webkit-transform:scale(0); transform:scale(0); } .formcheckFullbox .formcheckbox-wrap input[type="checkbox"]:checked + label span:after { opacity:1; -ms-transform:scale(1); -moz-transform:scale(1); -webkit-transform:scale(1); transform:scale(1); } .formcheckbox { position:relative; margin:0; width:100%; min-height:30px; height:1px; table-layout:fixed; display:table; } .formcheckbox input[type="checkbox"] { position:absolute; left:0; top:0; opacity:0; } .formcheckbox .formcheckbox-wrap { width:100%; min-height:30px; display:table-cell; vertical-align:middle; } .formcheckbox .formcheckbox-wrap label { position:relative; width:100%; padding:0 30px 0 45px; display:block; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .formcheckbox .formcheckbox-wrap label span { font-size:14px; line-height:19px; display:block; } .formcheckbox .formcheckbox-wrap label em { margin:6px 0 0 0; font-size:12px; color:#828282; line-height:16px; display:block; } .formcheckbox .formcheckbox-wrap label em a { font-size:12px; color:#828282; line-height:16px; } .formcheckbox .formcheckbox-wrap label .icon-controller-mark { position:absolute; right:0; top:50%; margin-top:-8px; display:block; } .formcheckbox .formcheckbox-wrap label a.form-more-btn { position:absolute; right:0; top:50%; margin-top:-15px; width:20px; height:30px; display:block; } .formcheckbox .formcheckbox-wrap label:before { position:absolute; content:''; width:30px; height:30px; left:0; top:50%; margin-top:-15px; background-position:-40px -355px; opacity:1; -ms-transform:scale(1); -moz-transform:scale(1); -webkit-transform:scale(1); transform:scale(1); } .formcheckbox .formcheckbox-wrap label:after { position:absolute; content:''; width:30px; height:30px; left:0; top:50%; margin-top:-15px; background-position:0px -355px; opacity:0; -ms-transform:scale(0); -moz-transform:scale(0); -webkit-transform:scale(0); transform:scale(0); } .formcheckbox .formcheckbox-wrap input[type="checkbox"]:checked + label:before { opacity:0; -ms-transform:scale(0); -moz-transform:scale(0); -webkit-transform:scale(0); transform:scale(0); } .formcheckbox .formcheckbox-wrap input[type="checkbox"]:checked + label:after { opacity:1; -ms-transform:scale(1); -moz-transform:scale(1); -webkit-transform:scale(1); transform:scale(1); } .formradiobox { position:relative; margin:0; width:100%; min-height:30px; height:1px; table-layout:fixed; display:table; } .formradiobox input[type="radio"] { position:absolute; left:0; top:0; opacity:0; } .formradiobox .formradiobox-wrap { width:100%; min-height:30px; display:table-cell; vertical-align:middle; } .formradiobox .formradiobox-wrap label { position:relative; width:100%; padding:0 30px 0 45px; display:block; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .formradiobox .formradiobox-wrap label span { font-size:14px; line-height:19px; display:block; } .formradiobox .formradiobox-wrap label em { margin:6px 0 0 0; font-size:12px; color:#828282; line-height:16px; display:block; } .formradiobox .formradiobox-wrap label em a { font-size:12px; color:#828282; line-height:16px; } .formradiobox .formradiobox-wrap label .icon-controller-mark { position:absolute; right:0; top:50%; margin-top:-8px; display:block; } .formradiobox .formradiobox-wrap label a.form-more-btn { position:absolute; right:0; top:50%; margin-top:-15px; width:20px; height:30px; display:block; } .formradiobox .formradiobox-wrap label:before { position:absolute; content:''; width:30px; height:30px; left:0; top:50%; margin-top:-15px; background-position:-40px -395px; opacity:1; -ms-transform:scale(1); -moz-transform:scale(1); -webkit-transform:scale(1); transform:scale(1); } .formradiobox .formradiobox-wrap label:after { position:absolute; content:''; width:30px; height:30px; left:0; top:50%; margin-top:-15px; background-position:0px -395px; opacity:0; -ms-transform:scale(0); -moz-transform:scale(0); -webkit-transform:scale(0); transform:scale(0); } .formradiobox .formradiobox-wrap input[type="radio"]:checked + label:before { opacity:0; -ms-transform:scale(0); -moz-transform:scale(0); -webkit-transform:scale(0); transform:scale(0); } .formradiobox .formradiobox-wrap input[type="radio"]:checked + label:after { opacity:1; -ms-transform:scale(1); -moz-transform:scale(1); -webkit-transform:scale(1); transform:scale(1); } .formradiobox .formradiobox-wrap strong.formradiobox-label { position:relative; width:100%; padding:0 30px 0 45px; font-weight:normal; display:block; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .formmdntel-wrap { position:relative; margin:0 20px; } .formmdntel-wrap .formmdntel-inner { width:100%; display:table; } .formmdntel-wrap .formmdntel-cell { display:table-cell; } .formmdntel-wrap .formmdntel-select { width:110px; vertical-align:top; } .formmdntel-wrap .formmdntel-select .formselectbox { margin:0; } .formmdntel-wrap .formmdntel-select .formselectbox .formselectbox-wrap { width:90px; } .formmdntel-wrap .formmdntel-select .formselectbox .formselectbox-wrap label { display:none; } .formmdntel-wrap .formmdntel-select .formselectbox .formselectbox-col .form-select-control { padding-right:30px; } .formmdntel-wrap .formmdntel-input .forminputbox { margin:0; } .formmdntel-wrap .formmdntel-input .forminputbox .forminputbox-wrap label { display:none; } .formmdntel-wrap .forminputbox .forminputbox-col input.form-input-control {letter-spacing: 1px;} .agreeboxset-wrap { position:relative; margin:0 20px; } .agreeboxset-wrap .agreeboxset-ti { margin-bottom:15px; font-size:17px; color:#000000; line-height:22px; } .agreeboxset-wrap .formcheckFullbox { margin:0 0 14px 0; } .agreeboxset-wrap .listgroup-defaultcheck { margin:0; } .listgroup-authcheck .formcheckbox input[type="checkbox"] { left: 15px; top: 50%; width: 30px; height: 30px; margin-top: -15px;} .listgroup-authcheck .formradiobox input[type="radio"] { left: 15px; top: 50%; width: 30px; height: 30px; margin-top: -15px;} .listgroup-defaultcheck .formcheckbox input[type="checkbox"] { left:-5px; top: 50%; width: 30px; height: 30px; margin-top:-15px; } .listgroup-defaultcheck .formradiobox input[type="radio"] { left:-5px; top: 50%; width: 30px; height: 30px; margin-top:-15px; } /* Form Controller End */ /* Title Group Component Start */ .titlegroup { margin:0 20px; } .titlegroup .titlegroup-header { font-size:15px; line-height:22px; text-align:center; } .titlegroup .titlegroup-summary { font-size:13px; color:#828282; line-height:19px; text-align:center; } .titlegroup .titlegroup-header + .titlegroup-summary { padding-top:7px; } .titlegroup.ty2 .titlegroup-header { font-size:15px; line-height:22px; } .titlegroup.ty3 .titlegroup-header { font-size:16px; line-height:22px; } .titlegroup.ty3 .titlegroup-summary { color:#8c8c8c; } /* Title Group Component End */ /* Para Group Start */ .paragroup { margin:0 20px; } .paragroup p { font-size:15px; line-height:22px; } /* Para Group End */ /* List Component Start */ .listgroup-info { margin:0 20px; } .listgroup-info-list { } .listgroup-info-list li { position:relative; padding:0 0 0 12px; font-size:13px; color:#8c8c8c; line-height:18px;} .listgroup-info-list li:before { position:absolute; content:''; left:0; top:7px; width:4px; height:4px; background:#cccccc; display:block; -ms-border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; } .listgroup-info-list.link li { line-height:20px; } .listgroup-info-list.link li:before { background:#8C8C8C; } .listgroup-info-list.link li a.listgroup-info-link { padding:0 25px 0 0; font-size:13px; line-height:19px; display:block; } .listgroup-info-list.link li a.listgroup-info-link:before { position:absolute; content:''; right:0; top:50%; margin-top:-8px; width:15px; height:15px; background-position:-180px -500px; display:block; } .listgroup-radius { margin:0 20px; } .listgroup-radius .listgroup-radius-list { padding:19px; border:1px solid #e1e1e1; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; } .listgroup-radius .listgroup-radius-list li { position:relative; min-height:28px; } .listgroup-radius .listgroup-radius-list li em { position:absolute; left:0; top:0; width:100px; font-size:15px; color:rgba(0,0,0,0.6); line-height:28px; } .listgroup-radius .listgroup-radius-list li span { padding:0 0 0 100px; font-size:15px; line-height:28px; text-align:right; display:block; } .listgroup-radius-para { margin:0 20px; } .listgroup-radius-para .listgroup-radius-list { } .listgroup-radius-para .listgroup-radius-list li { padding:15px 0 0 0; } .listgroup-radius-para .listgroup-radius-list li .listgroup-radius-item { padding:19px; border:1px solid #e1e1e1; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; } .listgroup-radius-para .listgroup-radius-list li .listgroup-t-date { font-size:14px; color:#3e3877; line-height:22px; display:block; } .listgroup-radius-para .listgroup-radius-list li .listgroup-t-name { padding-top:8px; font-size:15px; line-height:22px; display:block; } .listgroup-radius-para .listgroup-radius-list li .listgroup-t-corp { padding-top:5px; font-size:13px; color:#8b8b8b; line-height:20px; display:block; } .listgroup-radius-para .listgroup-radius-list li .listgroup-t-corp em { font-size:13px; color:#8b8b8b; line-height:20px; display:block; } .listgroup-radius-para .listgroup-radius-list li:first-of-type { padding-top:0; } .listgroup-auth { margin:0 20px; } .listgroup-auth .listgroup-auth-list { } .listgroup-auth .listgroup-auth-item { } .listgroup-auth .listgroup-auth-item .listgroup-auth-link { position:relative; width:100%; padding:19px 44px 19px 19px; border:1px solid #e1e1e1; border-top-width:0; outline-width:0; background-color:transparent; display:block; -webkit-tap-highlight-color: rgba(24,24,24,0.1); -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .listgroup-auth .listgroup-auth-item .listgroup-auth-link span { text-align:left; display:block; } .listgroup-auth .listgroup-auth-item .listgroup-auth-link strong { line-height:19px; display:block; } .listgroup-auth .listgroup-auth-item .listgroup-auth-link em { font-size:13px; color:#8c8c8c; line-height:18px; display:block; } .listgroup-auth .listgroup-auth-item .listgroup-auth-link .icon-link { position:absolute; right:19px; top:50%; margin-top:-7px; } .listgroup-auth .listgroup-auth-item .listgroup-auth-link strong + em { margin-top:6px; } .listgroup-auth .listgroup-auth-item:first-of-type .listgroup-auth-link { border-top-width:1px; -ms-border-top-left-radius:15px; -moz-border-top-left-radius:15px; -webkit-border-top-left-radius:15px; border-top-left-radius:15px; -ms-border-top-right-radius:15px; -moz-border-top-right-radius:15px; -webkit-border-top-right-radius:15px; border-top-right-radius:15px; } .listgroup-auth .listgroup-auth-item:last-of-type .listgroup-auth-link { -ms-border-bottom-left-radius:15px; -moz-border-bottom-left-radius:15px; -webkit-border-bottom-left-radius:15px; border-bottom-left-radius:15px; -ms-border-bottom-right-radius:15px; -moz-border-bottom-right-radius:15px; -webkit-border-bottom-right-radius:15px; border-bottom-right-radius:15px; } .listgroup-auth .listgroup-auth-item .listgroup-auth-link.disabled { opacity:0.5; -webkit-tap-highlight-color: rgba(24,24,24,0); } .listgroup-defaultcheck { margin:0 25px; } .listgroup-defaultcheck ul { } .listgroup-defaultcheck ul li { padding-top:5px; } .listgroup-defaultcheck ul li:first-of-type { padding-top:0; } .listgroup-authcheck { margin:0 20px; } .listgroup-authcheck ul { } .listgroup-authcheck ul li { border:1px solid #e1e1e1; border-top-width:0; } .listgroup-authcheck ul li:first-of-type { border-top-width:1px; -ms-border-top-left-radius:15px; -moz-border-top-left-radius:15px; -webkit-border-top-left-radius:15px; border-top-left-radius:15px; -ms-border-top-right-radius:15px; -moz-border-top-right-radius:15px; -webkit-border-top-right-radius:15px; border-top-right-radius:15px; } .listgroup-authcheck ul li:last-of-type { -ms-border-bottom-left-radius:15px; -moz-border-bottom-left-radius:15px; -webkit-border-bottom-left-radius:15px; border-bottom-left-radius:15px; -ms-border-bottom-right-radius:15px; -moz-border-bottom-right-radius:15px; -webkit-border-bottom-right-radius:15px; border-bottom-right-radius:15px; } .listgroup-authcheck .formcheckbox { margin:0; } .listgroup-authcheck .formcheckbox .formcheckbox-wrap { min-height:10px; } .listgroup-authcheck .formcheckbox .formcheckbox-wrap label { padding:19px 19px 19px 59px; } .listgroup-authcheck .formcheckbox .formcheckbox-wrap label:before , .listgroup-authcheck .formcheckbox .formcheckbox-wrap label:after { left:19px; } .listgroup-authcheck .formcheckbox .formcheckbox-wrap label span { line-height:18px; } .listgroup-authcheck .formcheckbox .formcheckbox-wrap label em { margin-top:3px; font-size:13px; color:#828282; line-height:19px; } .listgroup-authcheck .formcheckbox .formcheckbox-wrap label em a { font-size:13px; color:#828282; line-height:19px; } .listgroup-authcheck .formradiobox { margin:0; } .listgroup-authcheck .formradiobox .formradiobox-wrap { min-height:10px; } .listgroup-authcheck .formradiobox .formradiobox-wrap label { padding:19px 19px 19px 59px; } .listgroup-authcheck .formradiobox .formradiobox-wrap label:before , .listgroup-authcheck .formradiobox .formradiobox-wrap label:after { left:19px; } .listgroup-authcheck .formradiobox .formradiobox-wrap label span { line-height:18px; } .listgroup-authcheck .formradiobox .formradiobox-wrap label em { margin-top:3px; font-size:13px; color:#828282; line-height:19px; } .listgroup-authcheck .formradiobox .formradiobox-wrap label em a { font-size:13px; color:#828282; line-height:19px; } .listgroup-authcheck .formradiobox .formradiobox-wrap strong.formradiobox-label { padding:19px 19px 19px 19px; } .listgroup-alarm { position:relative; margin:0 20px; } .listgroup-alarm .listgroup-alarm-list { background:#ffffff; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; } .listgroup-alarm .listgroup-alarm-item { padding:0 20px; } .listgroup-alarm .listgroup-alarm-inner { width:100%; min-height:60px; height:1px; border-top:1px solid #f5f5f7; display:table; } .listgroup-alarm .listgroup-alarm-icon { padding:15px 0; width:31px; vertical-align:middle; display:table-cell; } .listgroup-alarm .listgroup-alarm-text { padding:15px 0; vertical-align:middle; display:table-cell; } .listgroup-alarm .listgroup-alarm-text-inner { } .listgroup-alarm .listgroup-alarm-text-inner strong { font-size:14px; line-height:22px; display:inline-block; padding:0 10px 0 0; margin-right: -4px; } .listgroup-alarm .listgroup-alarm-btn { padding:15px 0; width:50px; text-align:right; vertical-align:middle; display:table-cell; } .listgroup-alarm .listgroup-alarm-item:first-of-type .listgroup-alarm-inner { border-top-width:0; } .listgroup-alarm .btn-link { position: relative; padding:0; font-size:14px; color:#4d44a2; line-height:22px; vertical-align:top; padding:0 0 0 10px; } .listgroup-alarm .btn-link:before { position:absolute; content:''; left:0; top:6px; width:1px; height:12px; background:#e7e7e7; } .listgroup-alarm .listgroup-alarm-item:first-of-type .listgroup-alarm-inner.listgroup-alarm-open { position: relative; background: #f6f6f6; padding:17px 20px; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -ms-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; opacity: 0; display: none; } .listgroup-alarm .listgroup-alarm-item:first-of-type .listgroup-alarm-inner.listgroup-alarm-open:before { content: ''; position: absolute; top:-10px; left:29px; width:34px; height:10px; background-position: -260px -355px; } .listgroup-alarm .listgroup-alarm-item:first-of-type .listgroup-alarm-inner.listgroup-alarm-open .autoinstall-btn-before { width:100%; opacity: 0; display: none; } .listgroup-alarm .listgroup-alarm-item:first-of-type .listgroup-alarm-inner.listgroup-alarm-open .autoinstall-btn-after { width:100%; opacity: 0; display: none; } .listgroup-alarm .listgroup-alarm-item:first-of-type .listgroup-alarm-inner.listgroup-alarm-open .listgroup-alarm-text {padding:0;} .listgroup-alarm .listgroup-alarm-item:first-of-type .listgroup-alarm-inner.listgroup-alarm-open .listgroup-alarm-text .listgroup-alarm-text-inner strong {line-height: 20px;} .listgroup-alarm .listgroup-alarm-item:first-of-type .listgroup-alarm-inner.listgroup-alarm-open.auto-after .listgroup-alarm-text .listgroup-alarm-text-inner strong {line-height: 21px;} .listgroup-alarm .listgroup-alarm-item:first-of-type .listgroup-alarm-inner.listgroup-alarm-open .listgroup-alarm-btn {padding:0; text-align: center;} .listgroup-alarm .listgroup-alarm-item:first-of-type .listgroup-alarm-inner.listgroup-alarm-open .listgroup-alarm-btn .autoinstall-btn { display: block; text-align: center; background: #272558; width: 77px; height: 30px; line-height: 30px; -ms-border-radius: 15px;-moz-border-radius: 15px;-webkit-border-radius: 15px;border-radius: 15px; } .listgroup-alarm .listgroup-alarm-open .autoinstall-btn-after .listgroup-alarm-text .listgroup-alarm-text-inner strong { text-align: center; display: block; margin:0; padding:0; } .listgroup-alarm .listgroup-alarm-item:first-of-type .listgroup-alarm-inner.listgroup-alarm-open .listgroup-alarm-btn .autoinstall-btn em { color: #ffffff;font-size: 12px;display: inline-block;vertical-align: top; } .listgroup-alarm .listgroup-alarm-item:first-of-type .listgroup-alarm-inner.listgroup-alarm-open.auto-before { opacity: 0; display: table; } .listgroup-alarm .listgroup-alarm-item:first-of-type .listgroup-alarm-inner.listgroup-alarm-open.auto-after { opacity: 0; display: table; padding:27px 20px; } .listgroup-alarm .listgroup-alarm-item:first-of-type .listgroup-alarm-inner.listgroup-alarm-open.os-before { opacity: 0; display: table; } .listgroup-alarm .listgroup-alarm-item .listgroup-alarm-inner.listgroup-alarm-open.os-before .ossetting-btn-before { display: block; width:100%; opacity: 1; } .listgroup-alarm .listgroup-alarm-item:first-of-type .listgroup-alarm-inner.listgroup-alarm-open:after{ content: ""; height: 1px; width: 100%; background:#ffffff; position: absolute; bottom:-1px; left:0; } .listgroup-alarm .listgroup-alarm-item:first-of-type .listgroup-alarm-inner.listgroup-alarm-open.auto-before .autoinstall-btn-before { display: block; width:100%; opacity: 1; } .listgroup-alarm .listgroup-alarm-item:first-of-type .listgroup-alarm-inner.listgroup-alarm-open.auto-after .autoinstall-btn-after { display: table; width:100%; opacity: 1; } @-ms-keyframes autoInstallOpen{ from { opacity: 0;} to { opacity: 1;} } @-moz-keyframes autoInstallOpen{ from { opacity: 0;} to { opacity: 1;} } @-webkit-keyframes autoInstallOpen{ from { opacity: 0;} to { opacity: 1;} } @keyframes autoInstallOpen{ from { opacity: 0;} to { opacity: 1;} } .listgroup-alarm-inner.listgroup-alarm-open.auto-before { -ms-animation:autoInstallOpen 0.5s forwards 0.4s linear; -moz-animation:autoInstallOpen 0.5s forwards 0.4s linear; -webkit-animation:autoInstallOpen 0.5s forwards 0.4s linear; animation:autoInstallOpen 0.5s forwards 0.4s linear; } .listgroup-alarm-inner.listgroup-alarm-open.auto-after { -ms-animation:autoInstallOpen 0.5s forwards 0.4s linear; -moz-animation:autoInstallOpen 0.5s forwards 0.4s linear; -webkit-animation:autoInstallOpen 0.5s forwards 0.4s linear; animation:autoInstallOpen 0.5s forwards 0.4s linear; } .listgroup-alarm-inner.listgroup-alarm-open.os-before { -ms-animation:autoInstallOpen 0.5s forwards 0.4s linear; -moz-animation:autoInstallOpen 0.5s forwards 0.4s linear; -webkit-animation:autoInstallOpen 0.5s forwards 0.4s linear; animation:autoInstallOpen 0.5s forwards 0.4s linear; } .listgroup-game { position:relative; margin:0 20px; } .listgroup-game .listgroup-game-list { } .listgroup-game .listgroup-item { padding-top:30px; } .listgroup-game .listgroup-item:first-of-type { padding-top:0; } .listgroup-game .listgroup-item-inner { position:relative; } .listgroup-game .listgroup-item-inner .listgroup-item-dimmed { position:absolute; left:0; top:0; width:100%; height:100%; background:#ffffff; opacity:0.4; display:block; z-index:11; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; } .listgroup-game .listgroup-item-screenshots { width:100%; } .listgroup-game .listgroup-item-screenshots .listgroup-item-screenshots-pic { position:relative; width:100%; display:block; } .listgroup-game .listgroup-item-screenshots .listgroup-item-screenshots-pic img { width:100%; vertical-align:top; -ms-border-radius:15px 15px 0 0; -moz-border-radius:15px 15px 0 0; -webkit-border-radius:15px 15px 0 0; border-radius:15px 15px 0 0; } .listgroup-game .listgroup-item-screenshots .listgroup-item-screenshots-pic .listgroup-item-play { position:absolute; left:50%; top:50%; margin:-20px 0 0 -20px; width:40px; height:40px; display:block; z-index:1; } .listgroup-game .listgroup-item-app { position:relative; padding:20px; background:#ffffff; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; } .listgroup-game .listgroup-item-screenshots + .listgroup-item-app { -ms-border-radius:0 0 15px 15px; -moz-border-radius:0 0 15px 15px; -webkit-border-radius:0 0 15px 15px; border-radius:0 0 15px 15px; } .listgroup-game .listgroup-item-link { display:block; } .listgroup-game .listgroup-item-top { width:100%; display:table; } .listgroup-game .listgroup-item-cell { text-align:left; vertical-align:top; display:table-cell; } .listgroup-game .listgroup-item-cell.listgroup-item-left { width:70px; vertical-align:middle; padding-right:15px; } .listgroup-game .listgroup-item-cell.listgroup-item-right { vertical-align:middle; } .listgroup-game .listgroup-item-thumbnail { position:relative; width:70px; height:70px; display:block; } .listgroup-game .listgroup-item-thumbnail .listgroup-item-thumbnail-app { position:relative; width:70px; height:70px; background-repeat:no-repeat; background-position:center center; display:block; -ms-background-size:100% 100%; -moz-background-size:100% 100%; -webkit-background-size:100% 100%; background-size:100% 100%; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; } .listgroup-game .listgroup-item-thumbnail .listgroup-item-thumbnail-app:before { position:absolute; content:''; left:0; top:0; width:100%; height:100%; border:1px solid rgba(0,0,0,0.04); -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .listgroup-game .listgroup-item-thumbnail .listgroup-item-thumbnail-app .icon-type-adult-18 {width:14px; height:14px; background-position: -550px -450px;} .listgroup-game .listgroup-item-thumbnail .listgroup-item-thumbnail-app .icon-type-adult-19 {width:14px; height:14px; background-position: -571px -450px;} .listgroup-game .listgroup-item-co { display:block; } .listgroup-game .listgroup-item-co .listgroup-item-title { font-size:17px; line-height:22px; display:block; } .listgroup-game .listgroup-item-co .listgroup-item-summary { margin-top:4px; font-size:12px; color:rgba(0,0,0,0.8); line-height:17px; display:block; } .listgroup-game .listgroup-item-co .listgroup-item-company { margin-top:4px; font-size:12px; color:rgba(0,0,0,0.8); line-height:17px; display:block; } .listgroup-game .listgroup-item-co .listgroup-item-date { font-size:12px; color:#3e3877; line-height:17px; display:block;} .listgroup-game .listgroup-item-co .listgroup-item-autoinstall { font-size:12px; color:#8c8c8c; line-height:17px; display:block; } /* .listgroup-game .listgroup-item-co .listgroup-item-date span { position:relative; padding:0 10px 0 11px; font-size:12px; color:#3e3877; line-height:17px; display:inline-block; } .listgroup-game .listgroup-item-co .listgroup-item-date span.point { color:#312c70; } .listgroup-game .listgroup-item-co .listgroup-item-date span:before { position:absolute; content:''; left:0; top:50%; margin-top:-5px; width:1px; height:9px; background:#c6c6c6; display:block; } .listgroup-game .listgroup-item-co .listgroup-item-date span:first-of-type { padding-left:0; } .listgroup-game .listgroup-item-co .listgroup-item-date span:first-of-type:before { display:none; } */ .listgroup-game .listgroup-item-benefits { margin-top:12px; padding-top:12px; border-top:1px solid #f6f6f6; display:block;} .listgroup-game .listgroup-item-benefits .listgroup-item-benefits-item { position:relative; margin-top:8px; padding:1px 0 1px 52px; line-height:18px; display:block; } .listgroup-game .listgroup-item-benefits .listgroup-item-benefits-item .listgroup-item-benefits-icon { position:absolute; left:0; top:0; width:44px; height:20px; display:block; } .listgroup-game .listgroup-item-benefits .listgroup-item-benefits-item .listgroup-item-benefits-text { font-size:14px; line-height:18px; display:block; } .listgroup-game .listgroup-item-benefits .listgroup-item-benefits-item:first-of-type { margin-top:0; } .listgroup-game .listgroup-item-btn { padding-top:20px; display:block; } .listgroup-game .listgroup-item-btn .btn-primary { padding-top:9px; padding-bottom:9px; font-size:15px; line-height:20px; background:#272558; border-color:#272558; display:block; -ms-border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; } .listgroup-game .listgroup-item-btn .btn-primary.cancel { color:#3e3877; border-color:#acaac2; background-color:transparent; } .listgroup-game .listgroup-item-btn .btn-primary.complet , .listgroup-game .listgroup-item-btn .btn-primary.close { color:#3e3877; border-color:#f6f6f6; background-color:#f6f6f6; } .listgroup-game .listgroup-item-inner.no { padding:39px 15px 38px 15px; font-size:15px; color:#ffffff; line-height:21px; text-align:center; border:1px solid #1e1a59; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; } .listgroup-betazone { position:relative; margin:0 20px; } .listgroup-betazone dl { } .listgroup-betazone dl dt { padding-bottom:5px; border-bottom:1px solid #433e7c; } .listgroup-betazone dl dt .listgroup-betazone-title { padding-bottom:5px; font-size:17px; color:#ffffff; font-weight:normal; line-height:23px; display:block; } .listgroup-betazone dl dt .listgroup-betazone-summary { padding-bottom:10px; font-size:13px; color:#ffffff; line-height:18px; display:block; } .listgroup-betazone dl dd { } .listgroup-betazone .listgroup-betazone-list { } .listgroup-betazone .listgroup-item { border-bottom:1px solid #433e7c; } .listgroup-betazone .listgroup-item-link { padding:14px 0 15px 0; display:block; } .listgroup-betazone .listgroup-item-top { width:100%; display:table; } .listgroup-betazone .listgroup-item-cell { text-align:left; vertical-align:top; display:table-cell; } .listgroup-betazone .listgroup-item-cell.listgroup-item-left { width:100px; } .listgroup-betazone .listgroup-item-cell.listgroup-item-right { vertical-align:middle; } .listgroup-betazone .listgroup-item-thumbnail { position:relative; width:80px; height:80px; display:block; } .listgroup-betazone .listgroup-item-thumbnail .listgroup-item-thumbnail-app { position:relative; width:80px; height:80px; background-repeat:no-repeat; background-position:center center; display:block; -ms-background-size:100% 100%; -moz-background-size:100% 100%; -webkit-background-size:100% 100%; background-size:100% 100%; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; } .listgroup-betazone .listgroup-item-thumbnail .listgroup-item-thumbnail-app:before { position:absolute; content:''; left:0; top:0; width:100%; height:100%; border:1px solid rgba(0,0,0,0.04); -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .listgroup-betazone .listgroup-item-co { display:block; } .listgroup-betazone .listgroup-item-co .listgroup-item-genre { font-size:12px; color:#ffffff; line-height:17px; display:block; } .listgroup-betazone .listgroup-item-co .listgroup-item-title { margin-top:3px; font-size:15px; color:#ffffff; line-height:22px; display:block; } .listgroup-betazone .listgroup-item-co .listgroup-item-date { font-size:12px; color:#9e9ad5; line-height:18px; display:block; } .listgroup-betazone .listgroup-item-co .listgroup-item-sumary { margin-top:3px; font-size:12px; color:#8e85fe; line-height:17px; display:block; } .listgroup-betazone.no dl dt { border-bottom-width:0; } .listgroup-betazone.no .listgroup-item { border-bottom-width:0; } .listgroup-betazone .listgroup-item-inner.no { padding:39px 15px 38px 15px; font-size:15px; color:#ffffff; line-height:21px; text-align:center; border:1px solid #1e1a59; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; } .listgroup-purchase { position:relative; margin:0 20px; } .listgroup-purchase .listgroup-purchase-list { } .listgroup-purchase .listgroup-item { padding-top:15px; } .listgroup-purchase .listgroup-item:first-of-type { padding-top:0; } .listgroup-purchase .listgroup-item-link { padding:0; display:block; } .listgroup-purchase .listgroup-item-top { width:100%; display:table; } .listgroup-purchase .listgroup-item-cell { text-align:left; vertical-align:top; display:table-cell; } .listgroup-purchase .listgroup-item-cell.listgroup-item-left { width:100px; } .listgroup-purchase .listgroup-item-cell.listgroup-item-right { vertical-align:middle; } .listgroup-purchase .listgroup-item-thumbnail { position:relative; width:80px; height:80px; display:block; } .listgroup-purchase .listgroup-item-thumbnail .listgroup-item-thumbnail-app { position:relative; width:80px; height:80px; background-repeat:no-repeat; background-position:center center; display:block; -ms-background-size:100% 100%; -moz-background-size:100% 100%; -webkit-background-size:100% 100%; background-size:100% 100%; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; } .listgroup-purchase .listgroup-item-thumbnail .listgroup-item-thumbnail-app:before { position:absolute; content:''; left:0; top:0; width:100%; height:100%; border:1px solid rgba(0,0,0,0.04); -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .listgroup-purchase .listgroup-item-co { display:block; } .listgroup-purchase .listgroup-item-co .listgroup-item-title { font-size:15px; color:#000000; line-height:19px; display:block; } .listgroup-purchase .listgroup-item-co .listgroup-item-sumary { margin-top:3px; font-size:12px; color:#454545; line-height:17px; display:block; } .listgroup-purchaselist { position:relative; margin:0 20px; } .listgroup-purchaselist .listgroup-purchaselist-list { width:100%; } .listgroup-purchaselist .listgroup-item { float:left; width:29.48%; height:fit-content; margin-left:5.76%; padding-top:18px; } .listgroup-purchaselist .listgroup-item-link { padding:0; display:block; } .listgroup-purchaselist .listgroup-item-top { width:100%; display:block; } .listgroup-purchaselist .listgroup-item-cell { text-align:center; display:block; } .listgroup-purchaselist .listgroup-item-cell.listgroup-item-left { width:100%; } .listgroup-purchaselist .listgroup-item-cell.listgroup-item-right { padding-top:6px; } .listgroup-purchaselist .listgroup-item-thumbnail { position:relative; width:100%; display:block; } .listgroup-purchaselist .listgroup-item-thumbnail .listgroup-item-thumbnail-app { position:relative; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; display:block; -ms-background-size:100% 100%; -moz-background-size:100% 100%; -webkit-background-size:100% 100%; background-size:100% 100%; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; text-indent: -99999px; } .listgroup-purchaselist .listgroup-item-thumbnail .listgroup-item-thumbnail-app:before { position:absolute; content:''; left:0; top:0; width:100%; height:100%; border:1px solid rgba(0,0,0,0.04); -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .listgroup-purchaselist .listgroup-item-thumbnail .listgroup-item-thumbnail-app img { width:100%; vertical-align:top; } .listgroup-purchaselist .listgroup-item-co { text-align:left; display:block; } .listgroup-purchaselist .listgroup-item-co .listgroup-item-title { width:100%; max-height:34px; font-size:12px; color:#000000; line-height:17px; display:block; white-space:normal; overflow:hidden; text-overflow:ellipsis; word-wrap:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .listgroup-purchaselist .listgroup-item-co .listgroup-item-sumary { font-size:11px; color:#828282; line-height:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; } .listgroup-purchaselist .listgroup-item:nth-of-type(3n-2) { margin-left:0; } .listgroup-purchaselist .listgroup-item:nth-of-type(1) , .listgroup-purchaselist .listgroup-item:nth-of-type(2) , .listgroup-purchaselist .listgroup-item:nth-of-type(3) { padding-top:0; } .listgroup-purchaselist .listgroup-item:nth-of-type(3n-2) { clear: both;} .listgroup-benefitsreserve { position:relative; margin:0 20px; } .listgroup-benefitsreserve .listgroup-benefitsreserve-inner { } .listgroup-benefitsreserve .listgroup-benefitsreserve-ti { margin-bottom:20px; font-size:17px; line-height:23px; } .listgroup-benefitsreserve .listgroup-benefitsreserve-item { position:relative; margin-top:8px; padding:1px 0 1px 52px; line-height:18px; display:block; } .listgroup-benefitsreserve .listgroup-benefitsreserve-item .listgroup-benefitsreserve-icon { position:absolute; left:0; top:0; width:44px; height:20px; display:block; } .listgroup-benefitsreserve .listgroup-benefitsreserve-item .listgroup-benefitsreserve-text { font-size:15px; line-height:18px; display:block; } .listgroup-benefitsreserve .listgroup-benefitsreserve-item:first-of-type { margin-top:0; } .adultauth-wrap { position:relative; margin:0 20px; } .adultauth-wrap .adultauth-inner { padding:12px 20px 12px 20px; background:#1e1a59; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; } .adultauth-wrap .adultauth-content { width:100%; display:table; } .adultauth-wrap .adultauth-text { vertical-align:middle; display:table-cell; } .adultauth-wrap .adultauth-text .adultauth-text-inner { } .adultauth-wrap .adultauth-text .adultauth-text-inner strong { font-size:14px; color:#ffffff; line-height:19px; display:block; } .adultauth-wrap .adultauth-text .adultauth-text-inner span { margin-top:4px; font-size:12px; color:#817db6; line-height:17px; display:block; } .adultauth-wrap .adultauth-btn { width:80px; text-align:right; vertical-align:middle; display:table-cell; } .adultauth-wrap .adultauth-btn .btn-link { padding:0; font-size:14px; color:#8e85fe; } .personauth-wrap { position:relative; margin:0 20px; } .personauth-wrap .personauth-inner { padding:12px 20px 12px 20px; background:#f7f7f8; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; } .personauth-wrap .personauth-content { width:100%; display:table; } .personauth-wrap .personauth-text { vertical-align:middle; display:table-cell; } .personauth-wrap .personauth-text .personauth-text-inner { } .personauth-wrap .personauth-text .personauth-text-inner strong { font-size:14px; line-height:19px; display:block; } .personauth-wrap .personauth-text .personauth-text-inner span { margin-top:4px; font-size:12px; color:#929292; line-height:17px; display:block; } .personauth-wrap .personauth-btn { width:80px; text-align:right; vertical-align:middle; display:table-cell; } .personauth-wrap .personauth-btn .btn-link { padding:0; font-size:14px; color:#3e3877; } /* List Component End */ /* 상단 일러스트 이미지 Start */ .headerill-pic { margin:0 20px; } .headerill-pic .headerill-pic-co { position:relative; text-align:center; } .headerill-pic .headerill-pic-co img { vertical-align:top; height:120px; } .mypagecash-list-wrap-co-n .headerill-pic .headerill-pic-co img { vertical-align:top; height:100px; } .mypagecash-list-wrap-co-n.referral-history .headerill-pic .headerill-pic-co img { vertical-align:top; height:120px; } /* 상단 일러스트 이미지 End */ /* 잠금 비밀번호 Start */ .lockgroup { padding:0 20px; } .lockgroup .lockgroup-header { margin:0 0 20px 0; font-size:15px; line-height:22px; text-align:center; } .lockgroup .lockgroup-repassword { margin:20px 0 0 0; text-align: center; line-height: 22px;} .lockgroup .lockgroup-repassword a {font-size:13px; color: #8a88a1; text-decoration: underline; } .lockgroup .lockgroup-marking { } .lockgroup .lockgroup-marking ul { text-align:center; display:block; } .lockgroup .lockgroup-marking ul li { margin:0 3px; vertical-align:top; display:inline-block; } .lockgroup .lockgroup-marking ul li span { width:26px; height:26px; display:block; } .locknumgroup {} .locknumgroup .locknumgroup-co { padding:28px 20px 25px 20px; background:#1a1837; -ms-border-radius:15px 15px 0 0; -moz-border-radius:15px 15px 0 0; -webkit-border-radius:15px 15px 0 0; border-radius:15px 15px 0 0; } .locknumgroup .locknumgroup-summary { margin-bottom:20px; } .locknumgroup .locknumgroup-summary p { font-size:12px; color:rgba(156,154,180,0.8); line-height:18px; text-align:center; } .locknumgroup .locknumgroup-co ul { } .locknumgroup .locknumgroup-co ul li { float:left; width:33.33%; height:56px; } .locknumgroup .locknumgroup-co ul li a { width:100%; height:100%; text-align:center; display:block; } .locknumgroup .locknumgroup-co ul li a span { margin:0 auto; width:50px; height:56px; text-indent:-999999px; color:transparent; background:url(../../common/images/icon/icon_keypad_01.png) no-repeat 0px 0px; display:block; -ms-background-size:50px 672px; -moz-background-size:50px 672px; -webkit-background-size:50px 672px; background-size:50px 672px; } .locknumgroup .locknumgroup-co ul li.num-1 a span { background-position:0px 0px; } .locknumgroup .locknumgroup-co ul li.num-2 a span { background-position:0px -56px; } .locknumgroup .locknumgroup-co ul li.num-3 a span { background-position:0px -112px; } .locknumgroup .locknumgroup-co ul li.num-4 a span { background-position:0px -168px; } .locknumgroup .locknumgroup-co ul li.num-5 a span { background-position:0px -224px; } .locknumgroup .locknumgroup-co ul li.num-6 a span { background-position:0px -280px; } .locknumgroup .locknumgroup-co ul li.num-7 a span { background-position:0px -336px; } .locknumgroup .locknumgroup-co ul li.num-8 a span { background-position:0px -392px; } .locknumgroup .locknumgroup-co ul li.num-9 a span { background-position:0px -448px; } .locknumgroup .locknumgroup-co ul li.num-0 a span { background-position:0px -504px; } .locknumgroup .locknumgroup-co ul li.num-cancel a span { background-position:0px -560px; } .locknumgroup .locknumgroup-co ul li.num-delete a span { background-position:0px -616px; } .layout-lock-cell.layout-table-full {padding:0;} .layout-lock-cell .titlegroup {margin-bottom: 25px;} .layout-lock-cell .titlegroup .titlegroup-header {font-size:16px; line-height: 22px; color:#000000;} .layout-lock-cell .titlegroup .titlegroup-summary {font-size:13px; line-height: 19px; color:#828282;} /* 잠금 비밀번호 End */ /* 상품권 충전소 Start */ .giftcharge-btnfaq { margin:0 15px; } .giftcharge-btnfaq .btngroup ul { text-align:right; } .btngroup-giftcharge { margin:0 17px; } .btngroup-giftcharge .btngroup ul li { padding-bottom:10px; } .btngroup-giftcharge .btngroup ul li a i.icon-9-plus { margin-right:3px; top:3px; } /* 상품권 충전소 End */ /* 오퍼링 카드 Start */ .offeringkeyword-wrap { position:relative; padding:0 20px 0 20px; overflow:hidden; } .offeringkeyword-wrap .offeringkeyword-ti { position:relative; margin-bottom:15px; padding:0 20px 0 0; font-size:17px; color:#111111; line-height:23px; } .offeringkeyword-wrap .offeringkeyword-ti span { font-size:17px; color:#111111; line-height:23px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; } .offeringkeyword-wrap .offeringkeyword-ti a.offeringkeyword-more { position:absolute; padding:4px 0 0 8px; right:0; top:0; width:23px; height:23px; display:block; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .offeringkeyword-wrap .offeringkeyword-ti a.offeringkeyword-more i.icon-link { vertical-align:top; } .offeringkeyword-wrap .offeringcard-swiper { } .offeringkeyword-wrap .swiper-container { padding:0 0 0 0; overflow:visible; } .offeringkeyword-wrap .swiper-slide { position:relative; width:auto; } .offeringkeyword-wrap .swiper-slide a.btn { margin:0 0 0 8px; min-width:1px; padding:7px 19px 7px 19px; color:#000000; line-height:19px; text-align:left; border-color:#dddddd; display:block; } .offeringkeyword-wrap .swiper-slide a.btn.selected { color:#ffffff; background:#272558; border-color:#272558; } .offeringkeyword-wrap .swiper-slide:first-of-type { width:auto; } .offeringkeyword-wrap .swiper-slide:first-of-type a { margin-left:0; } .offeringcard-wrap { position:relative; padding:20px 20px 20px 20px; overflow:hidden; } .offeringcard-wrap .offeringcard-ti { position:relative; margin:0 20px 15px; padding:0 20px 0 0; font-size:17px; color:#111111; line-height:23px; } .offeringcard-wrap .offeringcard-ti span { font-size:17px; color:#111111; line-height:23px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; } .offeringcard-wrap .offeringcard-ti a.offeringcard-more { position:absolute; padding:4px 0 0 8px; right:0; top:0; width:23px; height:23px; display:block; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .offeringcard-wrap .offeringcard-ti a.offeringcard-more i.icon-link { vertical-align:top; } .offeringcard-wrap .offeringcard-swiper { } .offeringcard-wrap .swiper-container { padding:0 0 0 0; overflow:visible; } .offeringcard-wrap .swiper-slide { position:relative; width:110px; } .offeringcard-wrap .swiper-slide a { margin:0 0 0 18px; padding:0; font-size:15px; text-align:left; display:block; } .offeringcard-wrap .swiper-slide a.selected { color:#ffffff; border-color:#242151; background:#242151; } .offeringcard-wrap .swiper-slide:first-of-type { width:92px; } .offeringcard-wrap .swiper-slide:first-of-type a { margin-left:0; } .offeringcard-wrap .swiper-slide .offeringcard-thumbnail { position:relative; margin-bottom:8px; width:92px; height:92px; display:block; } .offeringcard-wrap .swiper-slide .offeringcard-thumbnail .offeringcard-thumbnail-app { position:relative; width:92px; height:92px; background-repeat:no-repeat; background-position:center center; display:block; -ms-background-size:100% 100%; -moz-background-size:100% 100%; -webkit-background-size:100% 100%; background-size:100% 100%; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; } .offeringcard-wrap .swiper-slide .offeringcard-thumbnail .offeringcard-thumbnail-app:before { position:absolute; content:''; left:0; top:0; width:100%; height:100%; border:1px solid rgba(0,0,0,0.04); -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .offeringcard-wrap .swiper-slide .offeringcard-title { width:100%; max-height:32px; font-size:12px; color:#000000; line-height:16px; white-space:normal; overflow:hidden; text-overflow:ellipsis; word-wrap:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .offeringcard-wrap .swiper-slide .offeringcard-desc { padding-top:5px; display:block; } .offeringcard-wrap .swiper-slide .offeringcard-desc-sale { font-size:12px; font-weight:bold; line-height:16px; display:block; } .offeringcard-wrap .swiper-slide .offeringcard-desc-price { font-size:12px; line-height:16px; display:block; } .offeringcard-wrap.keyword .offeringcard-ti { margin-bottom:18px; padding-right:0; } .offeringcard-wrap.keyword .offeringkeyword-wrap { margin-bottom:20px; padding:0; overflow:visible; } .offeringcard-wrap.keyword .offeringkeyword-wrap .swiper-slide { width:auto; } .offeringcard-wrap.keyword .offeringkeyword-wrap .swiper-slide:first-of-type { width:auto; } .offeringcard-wrap.keyword .offeringcardgroup-sub {} .offeringcard-wrap.keyword .offeringcardgroup-sub .offeringcardgroup-loading { position:relative; width:100%; table-layout:fixed; display:table; } .offeringcard-wrap.keyword .offeringcardgroup-sub .offeringcardgroup-loading.game { height:132px; } .offeringcard-wrap.keyword .offeringcardgroup-sub .offeringcardgroup-loading.app { height:132px; } .offeringcard-wrap.keyword .offeringcardgroup-sub .offeringcardgroup-loading.shopping { height:169px; } .offeringcard-wrap.keyword .offeringcardgroup-sub .offeringcardgroup-loading .offeringcardgroup-loading-cell { width:100%; height:100%; text-align:center; vertical-align:middle; display:table-cell; } /* // 오퍼링 카드 End */ /* 랜딩 카드 Start */ .landingsummaryroup { margin:0 20px; } .landingsummaryroup p { font-size:14px; color:#454545; line-height:20px; } .landingcard-item { } .landingcard-item .landingcard-link { padding:0 20px; display:block; } .landingcard-item .landingcard-item-inner { width:100%; table-layout:fixed; display:table; } .landingcard-item .landingcard-cell { vertical-align:middle; display:table-cell; } .landingcard-item .landingcard-cell.landingcard-cell-thumbnail { width:100px; } .landingcard-item.numbering .landingcard-cell.landingcard-cell-thumbnail { width:95px; } .landingcard-item .landingcard-cell.landingcard-cell-co { } .landingcard-item .landingcard-cell.landingcard-cell-number { width:40px; } .landingcard-item .landingcard-cell.landingcard-cell-number span { margin:0 15px 0 0; width:25px; font-size:15px; color:#4d44a2; line-height:19px; text-align:center; display:block; } .landingcard-item .landingcard-cell .landingcard-cell-thumbnail-app { position:relative; width:80px; height:80px; margin:0 20px 0 0; display:block; background-repeat:no-repeat; background-position:center center; -ms-background-size:100% 100%; -moz-background-size:100% 100%; -webkit-background-size:100% 100%; background-size:100% 100%; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; } .landingcard-item .landingcard-cell .landingcard-cell-thumbnail-app:before { position:absolute; content:''; left:0; top:0; width:100%; height:100%; border:1px solid rgba(0,0,0,0.04); -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .landingcard-item .landingcard-cell .landingcard-cell-thumbnail-app img { width:100%; height:100%; } .landingcard-item .landingcard-link .landingcard-co-title { margin-bottom:2px; height:21px; font-size:15px; color:#000000; line-height:21px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; } .landingcard-item .landingcard-link .landingcard-co-seller { font-size:13px; color:#454545; line-height:19px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; } .landingcard-item .landingcard-link .landingcard-co-payment { font-size:12px; color:#454545; line-height:16px; display:block; padding-bottom:2px; } .landingcard-item .landingcard-link .landingcard-co-payment span { font-size:12px; color:#454545; line-height:16px; display:inline-block; } .landingcard-item .landingcard-link .landingcard-co-payment span em { position:relative; padding:0 2px 0 5px; font-size:12px; color:#454545; line-height:16px; display:inline-block; } .landingcard-item .landingcard-link .landingcard-co-payment span em:before { position:absolute; content:''; left:0; top:50%; margin-top:-1px; width:2px; height:2px; background:#454545; display:block; -ms-border-radius:1px; -moz-border-radius:1px; -webkit-border-radius:1px; border-radius:1px; } .landingcard-item .landingcard-link .landingcard-co-payment span em:first-of-type { padding-left:0; } .landingcard-item .landingcard-link .landingcard-co-payment span em:first-of-type:before { display:none; } .landingcard-item .landingcard-link .landingcard-co-price { display:block; } .landingcard-item .landingcard-link .landingcard-co-price span { line-height:17px; display:block; } .landingcard-item .landingcard-link .landingcard-co-price span del { font-size:11px; color:#8c8c8c; text-decoration:line-through; } .landingcard-item .landingcard-link .landingcard-co-price strong { line-height:21px; display:block; } .landingcard-item .landingcard-link .landingcard-co-price em { margin-left:7px; font-size:15px; font-weight:bold; line-height:21px; vertical-align:top; display:inline-block; } .landingcard-item .landingcard-link .landingcard-co-price em.text-warning { font-size:16px; line-height:21px; } .landingcard-item .landingcard-link .landingcard-co-price em.text-warning i { margin-left:1px; font-size:11px; font-weight:bold; line-height:17px; display:inline-block; } .landingcard-item .landingcard-link .landingcard-co-price em ins { text-decoration:none; } .landingcard-item .landingcard-link .landingcard-co-price em:first-of-type { margin-left:0; } /* .landingcard-item .landingcard-link .landingcard-co-comment { font-size:12px; color:#454545; line-height:18px; display:block; } .landingcard-item .landingcard-link .landingcard-co-comment .icon { top:3px; } */ .landingcard-item .landingcard-link .landingcard-co-info { font-size:12px; color:#454545; line-height:18px; display:block; } .landingcard-item .landingcard-link .landingcard-co-info span { position:relative; padding:0 8px 0 10px; line-height:18px; display:inline-block; } .landingcard-item .landingcard-link .landingcard-co-info span:before { position:absolute; content:''; left:0; top:50%; margin-top:-4px; width:1px; height:9px; background:#cfcfcf; display:block; } .landingcard-item .landingcard-link .landingcard-co-info span:first-of-type { padding-left:0; } .landingcard-item .landingcard-link .landingcard-co-info span:first-of-type:before { display:none; } .landingcard-item .landingcard-link .landingcard-co-info span.landingcard-co-comment { } .landingcard-item .landingcard-link .landingcard-co-info span.landingcard-co-comment .icon { top:3px; } .landingcard-item .landingcard-link .landingcard-co-info span.landingcard-co-external { } .landingcard-item .landingcard-link .landingcard-co-info span.landingcard-co-external .icon { top:2px; vertical-align:top; } .landingcard-item .shopping .landingcard-cell.landingcard-cell-thumbnail { width:130px; } .landingcard-item .shopping .landingcard-cell .landingcard-cell-thumbnail-app { width:110px; height:110px; } .landingcard-item .landingcard-link.shopping .landingcard-co-seller { margin-bottom:3px; font-size:12px; line-height:17px; } .landingcard-item .landingcard-link.shopping .landingcard-co-title { margin-bottom:5px; } .landingcard-item.numbering .landingcard-cell .landingcard-cell-thumbnail-app { margin:0 0 0 15px; } .landinglistgroup-wrap { } .landinglistgroup-wrap .landinglistgroup-list { padding-bottom:15px; } .landinglistgroup-wrap .landinglistgroup-list ul { } .landinglistgroup-wrap .landinglistgroup-list ul .landinglistgroup-item { padding:10px 0 10px 0; } .landinglistgroup-wrap.rows3 {} .landinglistgroup-wrap.rows3 .landinglistgroup-list {} .landinglistgroup-wrap.rows3 .landinglistgroup-list ul { padding:0 20px; box-sizing:border-box; } .landinglistgroup-wrap.rows3 .landinglistgroup-list li { width:33.33%; float:left; padding: 20px 0 0 0; } .landinglistgroup-wrap.rows3 .landinglistgroup-list li:nth-of-type(3n-2) { } .landinglistgroup-wrap.rows3 .landinglistgroup-list li:nth-of-type(1) , .landinglistgroup-wrap.rows3 .landinglistgroup-list li:nth-of-type(2) , .landinglistgroup-wrap.rows3 .landinglistgroup-list li:nth-of-type(3) { padding-top:10px; } .landinglistgroup-wrap.rows3 .landinglistgroup-list li:nth-of-type(3n-2) { clear: both;} .landinglistgroup-wrap.rows3 .landingcard-item { display:block; width:92px; margin:0 auto; } .landinglistgroup-wrap.rows3 .landingcard-item .landingcard-item-inner { display:block; table-layout:unset; } .landinglistgroup-wrap.rows3 .landingcard-item .landingcard-cell { display:block; vertical-align:unset; width: 100%; height: 100%;} .landinglistgroup-wrap.rows3 .landingcard-item .landingcard-cell .landingcard-cell-thumbnail-app { margin:0; width: 92px; height: 92px; } .landinglistgroup-wrap.rows3 .landingcard-item .landingcard-cell .landingcard-cell-thumbnail-app img { width:100%; height:100%; } .landinglistgroup-wrap.rows3 .landingcard-item .landingcard-link { padding:0; } .landinglistgroup-wrap.rows3 .landingcard-item .landingcard-link .landingcard-co-title { font-size:12px; line-height:16px; max-height:32px; margin: 8px 0 3px; width: 100%; height: auto; white-space:normal; overflow:hidden; text-overflow:ellipsis; word-wrap:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .landingcard-item .landingcard-link .landingcard-co-info { font-size:12px; line-height:16px; } .landingcard-item .landingcard-link .landingcard-co-info span { line-height:16px; } /* 랜딩 카드 End */ /* 검색 결과 박스 Start */ .searchcomplete-wrap { } .searchcomplete-wrap .searchcomplete-list { display: none; } .searchcomplete-wrap .searchcomplete-list.open { display: block; } .searchcomplete-wrap .searchcomplete-item { padding:18px 0 18px 0; } .searchcomplete-wrap .searchcomplete-item:last-of-type { border-bottom-width:0; } .searchcomplete-wrap .searchcomplete-item.goods { border-bottom:10px solid #f7f7f8; } .searchcomplete-wrap .searchcomplete-item.box + .searchcomplete-item.goods { border-top:10px solid #f7f7f8; } .searchcomplete-wrap .searchcomplete-item.box + .searchcomplete-item.box { padding-top:10px; } /* 검색 결과 박스 End */ /* 검색 랜딩 카드 Start */ .searchkeyword-wrap { position:relative; padding:0 20px 0 20px; overflow:hidden; } .searchkeyword-wrap .searchkeyword-swiper { } .searchkeyword-wrap .swiper-container { padding:0 0 0 0; overflow:visible; } .searchkeyword-wrap .swiper-slide { position:relative; width:auto; } .searchkeyword-wrap .swiper-slide a { margin:0 0 0 5px; min-width:1px; padding:5px 15px 5px 15px; font-size:13px; color:#000000; line-height:20px; text-align:left; border-color:#dddddd; background:#f7f7f8; display:block; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; } .searchkeyword-wrap .swiper-slide a.selected { color:#3e3877; background-color:#eae9f6; } .searchkeyword-wrap .swiper-slide:first-of-type { width:auto; } .searchkeyword-wrap .swiper-slide:first-of-type a { margin-left:0; } .searchcard-item { } .searchcard-item .searchcard-link { padding:0 20px 0 20px; display:block; } .searchcard-item .searchcard-item-inner { width:100%; table-layout:fixed; display:table; } .searchcard-item .searchcard-cell { vertical-align:middle; display:table-cell; } .searchcard-item .searchcard-cell.searchcard-cell-thumbnail { width:100px; } .searchcard-item .searchcard-cell.searchcard-cell-co { } .searchcard-item .searchcard-cell.searchcard-cell-number { width:40px; } .searchcard-item .searchcard-cell.searchcard-cell-number span { margin:0 15px 0 0; width:25px; font-size:15px; color:#4d44a2; line-height:19px; text-align:center; display:block; } .searchcard-item .searchcard-cell .searchcard-cell-thumbnail-app { position:relative; width:80px; height:80px; margin:0 20px 0 0; display:block; background-repeat:no-repeat; background-position:center center; -ms-background-size:100% 100%; -moz-background-size:100% 100%; -webkit-background-size:100% 100%; background-size:100% 100%; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; } .searchcard-item .searchcard-cell .searchcard-cell-thumbnail-app:before { position:absolute; content:''; left:0; top:0; width:100%; height:100%; border:1px solid rgba(0,0,0,0.04); -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .searchcard-item .searchcard-link .searchcard-co-title { margin-bottom:2px; height:19px; font-size:15px; color:#000000; line-height:21px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; } .searchcard-item .searchcard-link .searchcard-co-seller { font-size:13px; color:#454545; line-height:19px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; } .searchcard-item .searchcard-link .searchcard-co-payment { font-size:12px; color:#454545; line-height:18px; display:block; } .searchcard-item .searchcard-link .searchcard-co-payment span { font-size:12px; color:#454545; line-height:18px; display:inline-block; } .searchcard-item .searchcard-link .searchcard-co-payment span em { position:relative; padding:0 2px 0 5px; font-size:12px; color:#454545; line-height:18px; display:inline-block; } .searchcard-item .searchcard-link .searchcard-co-payment span em:before { position:absolute; content:''; left:0; top:50%; margin-top:-1px; width:2px; height:2px; background:#454545; display:block; -ms-border-radius:1px; -moz-border-radius:1px; -webkit-border-radius:1px; border-radius:1px; } .searchcard-item .searchcard-link .searchcard-co-payment span em:first-of-type { padding-left:0; } .searchcard-item .searchcard-link .searchcard-co-payment span em:first-of-type:before { display:none; } .searchcard-item .searchcard-link .searchcard-co-price { display:block; } .searchcard-item .searchcard-link .searchcard-co-price strong { line-height:20px; display:block; } .searchcard-item .searchcard-link .searchcard-co-price em { margin-left:4px; font-size:13px; font-weight:normal; line-height:20px; vertical-align:top; display:inline-block; } .searchcard-item .searchcard-link .searchcard-co-price em.text-warning { font-size:13px; line-height:20px; font-weight: bold; } .searchcard-item .searchcard-link .searchcard-co-price em.text-warning i { margin-left:1px; font-size:11px; font-weight:bold; line-height:17px; display:inline-block; } .searchcard-item .searchcard-link .searchcard-co-price em ins { text-decoration:none; } .searchcard-item .searchcard-link .searchcard-co-price em del { font-size:11px; color:#8c8c8c; text-decoration:line-through; } .searchcard-item .searchcard-link .searchcard-co-price em:first-of-type { margin-left:0; } .searchcard-item .searchcard-link .searchcard-co-info { font-size:12px; color:#454545; line-height:18px; display:block; } .searchcard-item .searchcard-link .searchcard-co-info span { position:relative; padding:0 8px 0 10px; line-height:18px; display:inline-block; } .searchcard-item .searchcard-link .searchcard-co-info span:before { position:absolute; content:''; left:0; top:50%; margin-top:-4px; width:1px; height:9px; background:#cfcfcf; display:block; } .searchcard-item .searchcard-link .searchcard-co-info span:first-of-type { padding-left:0; } .searchcard-item .searchcard-link .searchcard-co-info span:first-of-type:before { display:none; } .searchcard-item .searchcard-link .searchcard-co-info span.searchcard-co-comment { } .searchcard-item .searchcard-link .searchcard-co-info span.searchcard-co-comment .icon { top:3px; } .searchcard-item .searchcard-link .searchcard-co-info span.searchcard-co-external { } .searchcard-item .searchcard-link .searchcard-co-info span.searchcard-co-external .icon { top:2px; vertical-align:top; } .searchofferingcard-wrap { position:relative; padding:0 20px 0 20px; overflow:hidden; } .searchofferingcard-wrap .searchofferingcard-ti { position:relative; margin-bottom:15px; padding:0 20px 0 0; font-size:17px; color:#111111; line-height:23px; } .searchofferingcard-wrap .searchofferingcard-ti span { font-size:17px; color:#111111; line-height:23px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; } .searchofferingcard-wrap .searchofferingcard-ti span i.icon { margin-right:8px; top:2px; } .searchofferingcard-wrap .searchofferingcard-ti a.searchofferingcard-more { position:absolute; padding:4px 0 0 8px; right:0; top:0; width:23px; height:23px; display:block; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .searchofferingcard-wrap .searchofferingcard-ti a.searchofferingcard-more i.icon-link { vertical-align:top; } .searchofferingcard-wrap .searchofferingcard-ti.nomore { padding-right:0; } .searchofferingcard-wrap .searchofferingcard-swiper { } .searchofferingcard-wrap .swiper-container { padding:0 0 0 0; overflow:visible; } .searchofferingcard-wrap .swiper-slide { position:relative; width:95px; } .searchofferingcard-wrap .swiper-slide a { margin:0 0 0 15px; padding:0; font-size:15px; text-align:left; display:block; } .searchofferingcard-wrap .swiper-slide a.selected { color:#ffffff; border-color:#242151; background:#242151; } .searchofferingcard-wrap .swiper-slide:first-of-type { width:80px; } .searchofferingcard-wrap .swiper-slide:first-of-type a { margin-left:0; } .searchofferingcard-wrap .swiper-slide .searchofferingcard-thumbnail { position:relative; margin-bottom:10px; width:80px; height:80px; display:block; } .searchofferingcard-wrap .swiper-slide .searchofferingcard-thumbnail .searchofferingcard-thumbnail-app { position:relative; width:80px; height:80px; background-repeat:no-repeat; background-position:center center; display:block; -ms-background-size:100% 100%; -moz-background-size:100% 100%; -webkit-background-size:100% 100%; background-size:100% 100%; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; } .searchofferingcard-wrap .swiper-slide .searchofferingcard-thumbnail .searchofferingcard-thumbnail-app:before { position:absolute; content:''; left:0; top:0; width:100%; height:100%; border:1px solid rgba(0,0,0,0.04); -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .searchofferingcard-wrap .swiper-slide .searchofferingcard-title { width:100%; max-height:38px; font-size:13px; color:#000000; line-height:19px; white-space:normal; overflow:hidden; text-overflow:ellipsis; word-wrap:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .searchofferingcard-wrap .swiper-slide .searchofferingcard-desc { padding-top:0; display:block; } .searchofferingcard-wrap .swiper-slide .searchofferingcard-desc-sale { font-size:12px; font-weight:bold; line-height:17px; display:block; } .searchofferingcard-wrap .swiper-slide .searchofferingcard-desc-price { font-size:12px; line-height:17px; display:block; } /* 검색 랜딩 카드 End */ /* 검색 스크린샷 Start */ .searchscreenshots-wrap { padding:0 20px 0 20px; overflow:hidden; } .searchscreenshots-wrap .swiper-container { padding:0 0 0 0; overflow:visible; } .searchscreenshots-wrap .swiper-slide { position:relative; width:auto; padding:0; } .searchscreenshots-wrap .swiper-slide .searchscreenshots-item { display:block; padding:0 0 0 2px; } .searchscreenshots-wrap .swiper-slide .searchscreenshots-link { position:relative; display:block; } .searchscreenshots-wrap .swiper-slide .searchscreenshots-link .searchscreenshots-play { position:absolute; left:50%; top:50%; margin:-20px 0 0 -20px; width:40px; height:40px; display:block; z-index:1; } .searchscreenshots-wrap .swiper-slide .searchscreenshots-link .searchscreenshots-play i.icon { display:block; } .searchscreenshots-wrap .swiper-slide .searchscreenshots-link img { height:128px; vertical-align:top; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; } .searchscreenshots-wrap .swiper-slide:first-of-type .searchscreenshots-item { padding-left:0; } .searchscreenshots-wrap .swiper-slide .searchscreenshots-link .searchscreenshots-vod-btn { position:absolute; left:0; top:0; width:100%; height:100%; cursor:pointer; display:block; } .searchscreenshots-wrap .swiper-slide .searchscreenshots-link .searchscreenshots-vod { position:relative; width:221px; height:128px; overflow:hidden; display:block; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; } .searchscreenshots-wrap .swiper-slide .searchscreenshots-link .searchscreenshots-vod .searchscreenshots-video { width:221px; height:128px; } .searchscreenshots-wrap .swiper-slide .searchscreenshots-item .detailscreenshots-link .video-player { width:221px; height:128px; } /* 검색 스크린샷 End */ /* 검색 아이템 Start */ .searchlistgroup-item { } .searchlistgroup-item .searchlistgroup-sub { } .searchlistgroup-item .searchlistgroup-sub .searchlistgroup-loading { position:relative; width:100%; table-layout:fixed; display:table; } .searchlistgroup-item .searchlistgroup-sub .searchlistgroup-loading.screenshots { height:143px; } .searchlistgroup-item .searchlistgroup-sub .searchlistgroup-loading.game { height:143px; } .searchlistgroup-item .searchlistgroup-sub .searchlistgroup-loading.app { height:143px; } .searchlistgroup-item .searchlistgroup-sub .searchlistgroup-loading.shopping { height:177px; } .searchlistgroup-item .searchlistgroup-sub .searchlistgroup-loading .searchlistgroup-loading-cell { width:100%; height:100%; text-align:center; vertical-align:middle; display:table-cell; } .searchlistgroup-item .searchlistgroup-sub .searchscreenshots-wrap { padding-top:15px; } .searchlistgroup-item .searchlistgroup-sub .searchofferingcard-wrap { padding-top:15px; } /* 검색 아이템 End */ /* 인기 검색어 / 연관 검색어 Start */ .hotsearch-wrap { position:relative; padding:0 20px 0 20px; overflow:hidden; } .hotsearch-wrap .hotsearch-ti { position:relative; margin-bottom:15px; padding:0 20px 0 0; font-size:17px; color:#111111; line-height:23px; } .hotsearch-wrap .hotsearch-ti span { font-size:17px; color:#111111; line-height:23px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; } .hotsearch-wrap .hotsearch-ti span i.icon { margin-right:8px; top:2px; } .hotsearch-wrap .hotsearch-ti.nomore { padding-right:0; } .hotsearch-wrap .hotsearch-co { } .hotsearch-wrap .hotsearch-co .hotsearch-list { padding:15px 10px; background:#f7f7f8; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; } .hotsearch-wrap .hotsearch-co .hotsearch-list ul { } .hotsearch-wrap .hotsearch-co .hotsearch-list ul li { } .hotsearch-wrap .hotsearch-co .hotsearch-list ul li .hotsearch-item { width:100%; line-height:32px; table-layout:fixed; display:table; } .hotsearch-wrap .hotsearch-co .hotsearch-list ul li .hotsearch-cell { font-size:14px; color:#353535; line-height:32px; text-align:center; vertical-align:middle; display:table-cell; } .hotsearch-wrap .hotsearch-co .hotsearch-list ul li .hotsearch-number { width:35px; } .hotsearch-wrap .hotsearch-co .hotsearch-list ul li .hotsearch-text { text-align:left; } .hotsearch-wrap .hotsearch-co .hotsearch-list ul li .hotsearch-text a { font-size:14px; color:#353535; line-height:32px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; } .hotsearch-wrap .hotsearch-co .hotsearch-list ul li .hotsearch-fluc { width:50px; } .hotsearch-wrap .hotsearch-co .hotsearch-list ul li .hotsearch-fluc span { font-size:13px; display:block; } .hotsearch-wrap .hotsearch-co .hotsearch-list ul li .hotsearch-fluc span .icon { top:-1px; } .hotsearch-wrap .hotsearch-co .hotsearch-list ul li .hotsearch-fluc span.up { color:#ff3543; } .hotsearch-wrap .hotsearch-co .hotsearch-list ul li .hotsearch-fluc span.down { color:#6186fd; } .relationsearch-wrap { position:relative; padding:0 20px 0 20px; overflow:hidden; } .relationsearch-wrap .relationsearch-ti { position:relative; margin-bottom:15px; padding:0 20px 0 0; font-size:17px; color:#111111; line-height:23px; } .relationsearch-wrap .relationsearch-ti span { font-size:17px; color:#111111; line-height:23px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; } .relationsearch-wrap .relationsearch-ti span i.icon { margin-right:8px; top:2px; } .relationsearch-wrap .relationsearch-ti.nomore { padding-right:0; } .relationsearch-wrap .relationsearch-co { } .relationsearch-wrap .relationsearch-co .relationsearch-list { padding:15px 20px 15px 17px; background:#f7f7f8; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; } .relationsearch-wrap .relationsearch-co .relationsearch-list ul { } .relationsearch-wrap .relationsearch-co .relationsearch-list ul li { } .relationsearch-wrap .relationsearch-co .relationsearch-list ul li .relationsearch-item { width:100%; line-height:32px; table-layout:fixed; display:table; } .relationsearch-wrap .relationsearch-co .relationsearch-list ul li .relationsearch-cell { font-size:14px; color:#353535; line-height:32px; text-align:left; vertical-align:middle; display:table-cell; } .relationsearch-wrap .relationsearch-co .relationsearch-list ul li .relationsearch-icon { width:41px; } .relationsearch-wrap .relationsearch-co .relationsearch-list ul li .relationsearch-icon .icon { vertical-align:top; } .relationsearch-wrap .relationsearch-co .relationsearch-list ul li .relationsearch-text { } .relationsearch-wrap .relationsearch-co .relationsearch-list ul li .relationsearch-text a { font-size:14px; color:#353535; line-height:32px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; } /* 인기 검색어 / 연관 검색어 End */ /* 최근 검색어 / 자동 완성 Start */ .latestsearch-wrap { position:relative; padding:0 20px 0 20px; overflow:hidden; } .latestsearch-wrap .latestsearch-co { } .latestsearch-wrap .latestsearch-co .latestsearch-list { padding:0 0 0 0; } .latestsearch-wrap .latestsearch-co .latestsearch-list ul { padding:0 0 5px 0; } .latestsearch-wrap .latestsearch-co .latestsearch-list ul li { height: 30px; margin-bottom:15px; } .latestsearch-wrap .latestsearch-co .latestsearch-list ul li .latestsearch-item { width:100%; line-height:30px; table-layout:fixed; display:table; } .latestsearch-wrap .latestsearch-co .latestsearch-list ul li .latestsearch-cell { font-size:14px; color:#353535; line-height:30px; text-align:left; vertical-align:middle; display:table-cell; } .latestsearch-wrap .latestsearch-co .latestsearch-list ul li .latestsearch-icon { width:45px; } .latestsearch-wrap .latestsearch-co .latestsearch-list ul li .latestsearch-icon .icon { margin-top:-2px; margin-left:5px; vertical-align:middle; } .latestsearch-wrap .latestsearch-co .latestsearch-list ul li .latestsearch-text { } .latestsearch-wrap .latestsearch-co .latestsearch-list ul li .latestsearch-text a { font-size:14px; color:#000000; line-height:30px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; } .latestsearch-wrap .latestsearch-co .latestsearch-list ul li .latestsearch-date { width:85px; text-align:center; } .latestsearch-wrap .latestsearch-co .latestsearch-list ul li .latestsearch-date span { display:block; padding-right:10px; font-size:13px; color:#8c8c8c; line-height:30px; text-align: right; } .latestsearch-wrap .latestsearch-co .latestsearch-list ul li .latestsearch-del { width:35px; text-align:left; } .latestsearch-wrap .latestsearch-co .latestsearch-list ul li .latestsearch-del a { padding:5px 0 0 0; width:30px; height:30px; display:block; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .latestsearch-wrap .latestsearch-co .latestsearch-list ul li .latestsearch-del a .icon { display:block; } .latestsearch-wrap .latestsearch-co .latestsearch-list .latestsearch-total-del { margin:0; padding:13px 15px; text-align:right; border-top:1px solid #E1E1E1; } .latestsearch-wrap .latestsearch-co .latestsearch-list .latestsearch-total-del a { display:inline-block; font-size:14px; color:#3E3877; line-height:20px; } .autocompletesearch-wrap { position:relative; padding:0 20px 0 15px; overflow:hidden; } .autocompletesearch-wrap .autocompletesearch-co { } .autocompletesearch-wrap .autocompletesearch-co .autocompletesearch-list { padding:0 0 0 0; } .autocompletesearch-wrap .autocompletesearch-co .autocompletesearch-list ul { padding:0 0 0 0; } .autocompletesearch-wrap .autocompletesearch-co .autocompletesearch-list ul li { height: 30px; margin-bottom: 15px; } .autocompletesearch-wrap .autocompletesearch-co .autocompletesearch-list ul li .autocompletesearch-item { width:100%; line-height:30px; table-layout:fixed; display:table; } .autocompletesearch-wrap .autocompletesearch-co .autocompletesearch-list ul li .autocompletesearch-cell { font-size:14px; color:#353535; line-height:30px; text-align:left; vertical-align:middle; display:table-cell; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .autocompletesearch-wrap .autocompletesearch-co .autocompletesearch-list ul li .autocompletesearch-icon { width:50px; text-align:center; padding: 0 10px 0 5px; } .autocompletesearch-wrap .autocompletesearch-co .autocompletesearch-list ul li .autocompletesearch-icon .icon { margin-top:-2px; vertical-align:middle; } .autocompletesearch-wrap .autocompletesearch-co .autocompletesearch-list ul li .autocompletesearch-icon .autocompletesearch-thumbnail { position:relative; margin:0 auto; width:30px; height:30px; display:block; } .autocompletesearch-wrap .autocompletesearch-co .autocompletesearch-list ul li .autocompletesearch-icon .autocompletesearch-thumbnail .autocompletesearch-thumbnail-app { position:relative; width:30px; height:30px; background-repeat:no-repeat; background-position:center center; display:block; -ms-background-size:100% 100%; -moz-background-size:100% 100%; -webkit-background-size:100% 100%; background-size:100% 100%; -ms-border-radius:7px; -moz-border-radius:7px; -webkit-border-radius:7px; border-radius:7px; } .autocompletesearch-wrap .autocompletesearch-co .autocompletesearch-list ul li .autocompletesearch-icon .autocompletesearch-thumbnail .autocompletesearch-thumbnail-app:before { position:absolute; content:''; left:0; top:0; width:100%; height:100%; border:1px solid rgba(0,0,0,0.04); -ms-border-radius:7px; -moz-border-radius:7px; -webkit-border-radius:7px; border-radius:7px; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .autocompletesearch-wrap .autocompletesearch-co .autocompletesearch-list ul li .autocompletesearch-text { } .autocompletesearch-wrap .autocompletesearch-co .autocompletesearch-list ul li .autocompletesearch-text a { font-size:14px; color:#000000; line-height:30px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; } .autocompletesearch-wrap .autocompletesearch-co .autocompletesearch-list ul li .autocompletesearch-text a strong.autocomplete-text { color:#4B469C; } .autocompletesearch-wrap .autocompletesearch-co .autocompletesearch-list ul li .autocompletesearch-date { width:95px; text-align:center; } .autocompletesearch-wrap .autocompletesearch-co .autocompletesearch-list ul li .autocompletesearch-date span { margin-left:15px; font-size:13px; color:#8c8c8c; line-height:30px; display:block; text-align:left; } /* 최근 검색어 / 자동 완성 End */ /* 검색 카테고리 Start */ .categorysearch-wrap { position:relative; padding:0 20px 0 20px; overflow:hidden; } .categorysearch-wrap .categorysearch-ti { position:relative; margin-bottom:8px; padding:0 0 0 0; font-size:17px; color:#000000; line-height:23px; } .categorysearch-wrap .categorysearch-ti span { font-size:17px; color:#000000; line-height:23px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; } .categorysearch-wrap .categorysearch-ti span i.icon { margin-right:8px; vertical-align:top; } .categorysearch-wrap .categorysearch-co { } .categorysearch-wrap .categorysearch-co .categorysearch-list { margin:0 -2px; } .categorysearch-wrap .categorysearch-co .categorysearch-list a { margin:10px 2px 0 2px; padding:0 17px; font-size:13px; color:#000000; line-height:28px; border:1px solid #e1e1e1; vertical-align:top; display:inline-block; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; } /* 검색 카테고리 End */ /* 오늘의 인기 검색어 Start */ .todaysearch-wrap { padding:0 20px 0 20px; overflow:hidden; } .todaysearch-wrap .todaysearch-co { } .todaysearch-wrap .todaysearch-co .todaysearch-ti { font-size:17px; line-height:23px; } .todaysearch-wrap .todaysearch-co .todaysearch-ti i { vertical-align: top; margin:0 10px 0 0; position:relative; top:1px; } .todaysearch-wrap .todaysearch-co ul { display: flex; align-items: flex-start; align-content: flex-start; align-self: stretch; flex-wrap: wrap; } .todaysearch-wrap .todaysearch-co ul li { height: 30px; margin:0 8px 10px 0; border: 1px solid #E1E1E1; display: flex; justify-content: center; align-items: center; -ms-border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .todaysearch-wrap .todaysearch-co ul li a { display:block; font-size:13px; line-height:19px; width: 100%; padding: 4.5px 15px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } /* 오늘의 인기 검색어 End */ /* 검색 결과 없음 Start */ .searchnoitem-wrap { padding:140px 20px 140px 20px; } .searchnoitem-wrap .searchnoitem-co { text-align:center; } .searchnoitem-wrap .searchnoitem-text { padding-top:20px; font-size:16px; color:#000000; line-height:23px; } .searchnoitem-wrap .searchnoitem-text strong { color:#4d44a2; display:block; } .searchnoitem-wrap .searchnoitem-summary { padding-top:7px; font-size:13px; color:#8c8c8c; line-height:19px; display:block; } /* 검색 결과 없음 End */ /* 교정전 후 Start */ .searchmodify-wrap { padding:25px 20px 25px 20px; border-bottom:10px solid #f7f7f8; } .searchmodify-wrap .searchmodify-co { text-align:left; } .searchmodify-wrap .searchmodify-text { font-size:14px; color:#000000; line-height:24px; } .searchmodify-wrap .searchmodify-text strong { color:#4d44a2; } .searchmodify-wrap .searchmodify-text-n a { font-size:14px; color:#000000; } .searchmodify-wrap .searchmodify-text-n a strong { color:#000000; } .searchmodify-wrap .searchmodify-text-n a strong em { text-decoration:underline; } /* Detail App Top Start */ .detailapptop { padding:0 20px 0 20px; width:100%; display:table; table-layout: fixed; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .detailapptop-cell { padding:0; text-align:left; vertical-align:top; display:table-cell; } .detailapptop-left { width:80px; padding-right:20px; } .detailapptop-right { padding-top:5px; } .detailapptop-qr { padding-left:10px; width:85px; height:85px; } .detailapptop-qr img { width:85px; height:85px; } .detailapptop-thumbnail { position:relative; width:80px; height:80px; } .detailapptop-thumbnail .detailapptop-thumbnail-app { position:relative; width:80px; height:80px; background-repeat:no-repeat; background-position:center center; display:block; -ms-background-size:100% 100%; -moz-background-size:100% 100%; -webkit-background-size:100% 100%; background-size:100% 100%; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; } .detailapptop-thumbnail .detailapptop-thumbnail-app:before { position:absolute; content:''; left:0; top:0; width:100%; height:100%; border:1px solid rgba(0,0,0,0.04); -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .detailapptop-co-title { font-size:19px; line-height:25px; overflow: hidden; } .detailapptop-co-seller { font-size:13px; color:#353535; line-height:19px; margin-top:6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; word-break:break-word; } .detailapptop-co-pc { font-size:13px; color:#353535; line-height:19px; margin-top:4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; } .detailapptop-co-pc i { position:relative; top:-1px; padding-right:4px; } .detailapptop-co-summary { font-size:13px; color:#353535; line-height:19px; margin-top:6px; } .detailapptop-co-payment { font-size:13px; color:#353535; line-height:19px; margin-top:1px; } .detailapptop-co-payment span { position:relative; padding:0; font-size:13px; color:#353535; line-height:19px; display:block; } .detailapptop-co-payment span:first-of-type { padding-left:0; } .detailapptop-co-payment span:first-of-type:before { display:none; } .detailapptop-co-payment span em { position:relative; padding:0 2px 0 5px; font-size:13px; color:#353535; line-height:19px; display:inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; } .detailapptop-co-payment span em:first-of-type { padding-left:0; } .detailapptop-co-payment span em:first-of-type:before { display:none; } .detailapptop-co-payment span.external_payment { position:relative; } .detailapptop-co-payment span.external_payment a { display:flex; font-size:13px; color:#353535; line-height:19px; } .detailapptop-co-payment span.external_payment a em { display: block; padding:0 } .detailapptop-co-payment span.external_payment a em i { padding-right:4px; top: -1px;} .detailapptop-co-payment span.external_payment a em:last-child { overflow:visible; } .detailapptop-co-payment span.external_payment a em:last-child i { padding-right:0; top:0; } .detailapptop-co-date { font-size:13px; color:#353535; line-height:20px; } .detailapptop-co-date span { position:relative; padding:0 7px 0 11px; font-size:13px; color:#3e3877; line-height:20px; display:inline-block; } .detailapptop-co-date span.point { color:#6056e8; } .detailapptop-co-date span:before { position:absolute; content:''; left:0; top:50%; margin-top:-5px; width:1px; height:9px; background:#c6c6c6; display:block; } .detailapptop-co-date span:first-of-type { padding-left:0; } .detailapptop-co-date span:first-of-type:before { display:none; } .detail-banner-item { position: relative; width: 100%; padding:25px 20px 0; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .detail-banner-item .detail-banner-link { display: block; position: relative; width: 100%; background-color: #F2F3FA; overflow: hidden; -ms-border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; } .detail-banner-item .detail-banner-link .detail-banner-banner { width: 100%; text-align: left; display: table; padding: 11px 46px 11px 18px; table-layout: fixed; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .detail-banner-item .detail-banner-link .detail-banner-banner span { display:table-cell; vertical-align:middle;} .detail-banner-item .detail-banner-link .detail-banner-banner span.logo { width:34px; padding-right:8px;} .detail-banner-item .detail-banner-link .detail-banner-banner span strong { display:block; font-size:14px; line-height:20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .detail-banner-item .detail-banner-link .detail-banner-banner span em { display:block; font-size:12px; line-height:16px; padding-top:3px; color: rgba(30, 26, 89,0.8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .detail-banner-item .detail-banner-link .detail-banner-pic { position: absolute; right: 20px; top: 50%; width: 18px; height: 18px; display: block; transform: translate3d(0, -50%, 0); } .detail-banner-item .detail-banner-link .detail-banner-pic i { display:block; } /* Detail App Top End */ /* Detail Shopping Top Start */ .detailshoppingtop { padding:0 20px 0 20px; width:100%; display:table; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .detailshoppingtop-cell { padding:0; text-align:left; vertical-align:top; display:table-cell; } .detailshoppingtop-right { padding-top:25px; padding-bottom:35px; } .detailshoppingtop-co-brand { padding-bottom:5px; font-size:14px; color:#8c8c8c; line-height:19px; } .detailshoppingtop-co-title { padding-bottom:5px; font-size:19px; line-height:25px; } .detailshoppingtop-co-price { padding-bottom:5px; line-height:25px; } .detailshoppingtop-co-price span { margin-left:7px; line-height:25px; display:inline-block; } .detailshoppingtop-co-price span:first-of-type { margin-left:0; } .detailshoppingtop-co-price em { font-size:19px; font-weight:bold; line-height:25px; vertical-align:top; display:inline-block; } .detailshoppingtop-co-price em i { font-size:12px; line-height:20px; vertical-align:bottom; display:inline-block; } .detailshoppingtop-co-price ins { font-size:19px; font-weight:bold; line-height:25px; text-decoration:none; vertical-align:top; display:inline-block; } .detailshoppingtop-co-price del { font-size:12px; color:#8c8c8c; line-height:25px; text-decoration:line-through; vertical-align:top; display:inline-block; } .detailshoppingtop-co-summary { line-height:19px; } .detailshoppingtop-co-summary span { font-size:14px; line-height:19px; } .detailshoppingtop-co-summary span.point { color:#3e3877; } /* Detail Shopping Top End */ /* Detail Header 부가 정보 Start */ .detailapptop-info { padding:20px 0 5px 0; } .detailapptop-info .swiper-slide { position:relative; width:min-content; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .detailapptop-info .swiper-slide .detailapptop-info-item { padding:0; text-align:center; display:block; } .detailapptop-info .swiper-slide .detailapptop-info-item:before { position:absolute; content:''; left:0; top:9px; width:1px; height:13px; background:#CCCCCC; display:block; } .detailapptop-info .swiper-slide .detailapptop-info-item .detailapptop-info-icon { margin-bottom:3px; display:block; } .detailapptop-info .swiper-slide .detailapptop-info-item .detailapptop-info-icon .age-wrap , .age-wrap { width:34px; height:34px; display: inline-block; margin: 0 auto; } .detailapptop-info .swiper-slide .detailapptop-info-item .detailapptop-info-icon .age-wrap img , .age-wrap img { width:100%; height:100%; } .detailapptop-info .swiper-slide .detailapptop-info-item .detailapptop-info-text { font-size:12px; color:#353535; line-height:16px; display:block; margin-top:6px; } .detailapptop-info .swiper-slide .detailapptop-info-item .detailapptop-info-text a { font-size:12px; line-height:16px; display:inline-block; } .detailapptop-info .swiper-slide .detailapptop-info-item .detailapptop-info-text a i.icon-info { top:2.5px; vertical-align:top; margin-left: 1px; } .detailapptop-info .swiper-slide:first-of-type .detailapptop-info-item:before { display:none; } .detailapptop-info .swiper-slide { min-width: 96px; } .detailapptop-info .swiper-slide .detailapptop-info-item { padding:0 12px 0 12px; } .detailapptop-info .step-2 .swiper-slide { width: 50%; } .detailapptop-info .step-3 .swiper-slide { width: 33.33%; } .detailapptop-info .step-4 .swiper-slide { width: 96px; } .detailapptop-info .step-5 .swiper-slide { width: 96px; } .detailapptop-info .swiper-slide.age , .detailapptop-info .swiper-slide.crypto { min-width: 108px; } /* Detail Header 부가 정보 End */ /* Detail 공식 커뮤니티 Start */ .detailcommunity-wrap { position:relative; padding:20px; overflow:hidden; } .detailcommunity-wrap .detailcommunity-ti { position:relative; font-size:17px; color:#000000; line-height:23px; } .detailcommunity-wrap .detailcommunity-ti span { font-size:17px; color:#000000; line-height:23px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; } .detailcommunity-wrap ul { display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: center; } .detailcommunity-wrap li { margin:15px 50px 0 0; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;} .detailcommunity-wrap li:last-of-type { margin:15px 0 0 0; } @supports (gap:10px) { .detailcommunity-wrap ul { display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; gap:15px 40px; margin-top: 15px; } .detailcommunity-wrap li { margin:0 !important; } .detailcommunity-wrap li:last-of-type { margin:0 !important; } } .detailcommunity-wrap li a { display:block; padding:0; text-align:center; width:40px; height: 40px; background: #F7F7F8; -ms-border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; } .detailcommunity-wrap li a i.icon { display:block; } /* Detail 공식 커뮤니티 End */ /* Detail 혜택 Start */ .detailbenefits-wrap { position:relative; padding:20px; overflow:hidden; } .detailbenefits-wrap .detailbenefits-ti { padding:0 20px 20px; font-size:17px; color:#000000; line-height:23px; } .detailbenefits-wrap .detailbenefits-ti span { font-size:17px; color:#000000; line-height:23px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; } .detailbenefits-wrap .detailbenefits-ti.step-2 { padding-right:30px; } .detailbenefits-wrap .detailbenefits-ti.step-3 { padding-right:43px; } .detailbenefits-wrap .detailbenefits-ti.step-4 { padding-right:56px; } .detailbenefits-wrap .detailbenefits-ti.step-5 { padding-right:69px; } .detailbenefits-wrap .swiper-container { margin-right:-4px; padding:0 0 0 0; overflow:visible; } .detailbenefits-wrap .swiper-slide { position:relative; width:100%; padding:0 5px 0 0; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .detailbenefits-wrap .swiper-slide:last-child { padding:0; } .detailbenefits-wrap .swiper-slide .detailbenefits-link { padding:18px 20px 16px; background:#f7f7f8; display:block; -ms-border-radius:0 15px 15px 15px; -moz-border-radius:0 15px 15px 15px; -webkit-border-radius:0 15px 15px 15px; border-radius:0 15px 15px 15px; } .detailbenefits-wrap .swiper-slide .detailbenefits-link .detailbenefits-desc-icon { padding-bottom:8px; line-height:20px; display:block; } .detailbenefits-wrap .swiper-slide .detailbenefits-link .detailbenefits-desc-icon i.icon { } .detailbenefits-wrap .swiper-slide .detailbenefits-link .detailbenefits-desc-wrap { display: flex; height: 60px; flex-direction: column; align-items: flex-start; justify-content: center; } .detailbenefits-wrap .swiper-slide .detailbenefits-link .detailbenefits-desc-ti { margin-bottom:1px; font-size:14px; color:#000000; font-weight:normal; line-height:20px; max-height: 40px; white-space: normal; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .detailbenefits-wrap .swiper-slide .detailbenefits-link .detailbenefits-desc-co { font-size:13px; color:#8c8c8c; font-weight:normal; line-height:19px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; flex-direction: column; justify-content: center; align-self: stretch; } .detailbenefits-wrap .swiper-pagination { position:absolute; right:2px; top:-43px; width:auto; } .detailbenefits-wrap .swiper-pagination .swiper-pagination-bullet { margin:0 2px 0 3px !important; width:7px; height:7px; border:1px solid rgba(0,0,0,0.6); background-color:transparent; opacity:1; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .detailbenefits-wrap .swiper-pagination .swiper-pagination-bullet-active { border-color:rgba(0,0,0,1); background-color:rgba(0,0,0,1); } /* Detail 혜택 End */ /* Detail 스크린샷 Start */ .detailscreenshots-wrap { position:relative; padding:20px; overflow:hidden; } .detailscreenshots-wrap .swiper-container { padding:0 0 0 0; overflow:visible; } .detailscreenshots-wrap .swiper-slide { position:relative; width:auto; padding:0; } .detailscreenshots-wrap .swiper-slide .detailscreenshots-item { display:block; padding:0 0 0 2px; } .detailscreenshots-wrap .swiper-slide .detailscreenshots-link { position:relative; display:block; } .detailscreenshots-wrap .swiper-slide .detailscreenshots-link:before { content:""; position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.03); -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; z-index: 30; pointer-events: none; } .detailscreenshots-wrap .swiper-slide .detailscreenshots-link .detailscreenshots-play { position:absolute; left:50%; top:50%; margin:-20px 0 0 -20px; width:40px; height:40px; display:block; z-index:1; } .detailscreenshots-wrap .swiper-slide .detailscreenshots-link .detailscreenshots-play i.icon { display:block; } .detailscreenshots-wrap .swiper-slide .detailscreenshots-link img { height:155px; vertical-align:top; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; } .detailscreenshots-wrap .swiper-slide:first-of-type .detailscreenshots-item { padding-left:0; } .detailscreenshots-wrap .swiper-slide .detailscreenshots-link .detailscreenshots-vod-btn { position:absolute; left:0; top:0; width:100%; height:100%; cursor:pointer; display:block; } .detailscreenshots-wrap .swiper-slide .detailscreenshots-link .detailscreenshots-vod { position:relative; width:276px; height:155px; overflow:hidden; display:block; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; } .detailscreenshots-wrap .swiper-slide .detailscreenshots-link .detailscreenshots-vod .detailscreenshots-video { width:276px; height:155px; } .detailproductscreen-wrap { position:relative; margin:0; background:#ffffff; overflow:hidden; } .detailproductscreen-wrap img.detailproductscreen-blank { position:relative; left:0; top:0; height:auto; width:100%; vertical-align:top; } .detailproductscreen-wrap .detailproductscreen-inner { position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden; } .detailproductscreen-wrap .swiper-container { position:relative; width:100%; height:100%; overflow:visible; z-index:1; } .detailproductscreen-wrap .swiper-slide { position:relative; width:100%; padding:0; } .detailproductscreen-wrap .swiper-slide:after { position:absolute; content:''; left:0; top:0; width:100%; height:100%; background:#000000; opacity:0.03; } .detailproductscreen-wrap .swiper-slide .detailproductscreen-item { width:100%; height:100%; display:block; background-color:#ffffff; background-repeat:no-repeat; background-position:center center; -ms-background-size:contain; -moz-background-size:contain; -webkit-background-size:contain; background-size:contain; text-indent: -99999px; } .detailproductscreen-wrap .swiper-pagination { position:absolute; left:0; width:100%; bottom:15px; } .detailproductscreen-wrap .swiper-pagination .swiper-pagination-bullet { margin:0 2px 0 3px !important; width:8px; height:8px; border:1px solid rgba(0,0,0,0.6); background-color:transparent; opacity:1; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .detailproductscreen-wrap .swiper-pagination .swiper-pagination-bullet-active { border-color:rgba(0,0,0,1); background-color:rgba(0,0,0,1); } /* Detail 스크린샷 End */ /* Detail 기타 정보 Start */ .detaildescription-wrap { position:relative; padding:20px; } .detaildescription-wrap .detaildescription-ti { position:relative; margin-bottom:10px; padding:0 20px 0 0; font-size:17px; color:#111111; line-height:23px; } .detaildescription-wrap .detaildescription-ti span { font-size:17px; color:#000000; line-height:23px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; } .detaildescription-wrap .detaildescription-ti a.detaildescription-more { position:absolute; padding:4px 0 0 8px; right:0; top:0; width:23px; height:23px; display:block; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .detaildescription-wrap .detaildescription-ti a.detaildescription-more i.icon-link { vertical-align:top; } .detaildescription-wrap .detaildescription-date { margin-bottom:5px; font-size:14px; color:#000000; line-height:21px; } .detaildescription-wrap .detaildescription-co { font-size:14px; line-height: 20px; color:#353535;} .detaildescription-wrap .detaildescription-co span { display: block; } .detaildescription-wrap .detaildescription-co p { width:100%; max-height:60px; font-size:14px; color:#353535; line-height:20px; white-space:normal; overflow:hidden; text-overflow:ellipsis; word-wrap:break-word; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; } .detaildescription-wrap .detaildescription-co span + p { padding-top: 7px;} .detaildescription-wrap .detaildescription-list { } .detaildescription-wrap .detaildescription-list ul { } .detaildescription-wrap .detaildescription-list ul li { } .detaildescription-wrap .detaildescription-list ul li strong { float:left; font-size:14px; color:#454545; line-height:20px; } .detaildescription-wrap .detaildescription-list ul li span { float:right; font-size:14px; color:#353535; line-height:20px; } .detaildescription-wrap .detaildescription-updatelist { } .detaildescription-wrap .detaildescription-updatelist dl { } .detaildescription-wrap .detaildescription-updatelist dl dt { position:relative; padding:20px 0 0 45px; font-size:15px; line-height:22px; } .detaildescription-wrap .detaildescription-updatelist dl dd { position:relative; padding:7px 0 0 45px; font-size:14px; color:#8c8c8c; line-height:20px; } .detaildescription-wrap .detaildescription-updatelist dl dt:after { position:absolute; content:''; left:10px; top:26px; width:10px; height:10px; background:#ffffff; border:2px solid #d4d4d4; display:block; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; -ms-border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; } .detaildescription-wrap .detaildescription-updatelist dl dt:before { position:absolute; content:''; left:14px; top:0%; width:2px; height:100%; background:#eaeaea; display:block; } .detaildescription-wrap .detaildescription-updatelist dl dd:before { position:absolute; content:''; left:14px; top:0%; width:2px; height:100%; background:#eaeaea; display:block; } .detaildescription-wrap .detaildescription-updatelist dl dt:first-of-type { padding-top:0; } .detaildescription-wrap .detaildescription-updatelist dl dt:first-of-type:after { top:6px; } .detaildescription-wrap .detaildescription-updatelist dl dt:first-of-type:before { top:50%; height:50%; } .detaildescription-wrap .detaildescription-updatelist dl dt:last-of-type:before { top:0%; height:33px; } .detaildescription-wrap .detaildescription-updatelist dl dd:last-of-type:before { display:none; } .detaildescription-wrap .detaildescription-updatelist.num-1 dl dt:before { display:none; } .detaildescription-wrap.ty1 .detaildescription-ti { margin-bottom:15px; padding:0; line-height:24px; } .detaildescription-wrap.ty1 .detaildescription-ti span { line-height:24px; } .detaildescriptionclamp-wrap { position:relative; margin:0 20px 0 20px; } .detaildescriptionclamp-wrap .detaildescriptionclamp-ti { position:relative; margin-bottom:15px; padding:0 20px 0 0; font-size:17px; color:#111111; line-height:24px; } .detaildescriptionclamp-wrap .detaildescriptionclamp-ti span { font-size:17px; color:#111111; line-height:24px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; } .detaildescriptionclamp-wrap .detaildescriptionclamp-ti a.detaildescription-more { position:absolute; padding:4px 0 0 8px; right:0; top:0; width:23px; height:23px; display:block; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .detaildescriptionclamp-wrap .detaildescriptionclamp-ti a.detaildescription-more i.icon-link { vertical-align:top; } .detaildescriptionclamp-wrap .detaildescriptionclamp-date { margin-bottom:5px; font-size:14px; color:#000000; line-height:20px; } .detaildescriptionclamp-wrap .detaildescriptionclamp-co { overflow:hidden; line-height:20px; } .detaildescriptionclamp-wrap .detaildescriptionclamp-co .detaildescriptionclamp-para { width:100%; font-size:14px; color:#454545; line-height:20px; } .detaildescriptionclamp-wrap .detaildescriptionclamp-more { text-align:right; } .detaildescriptionclamp-wrap .detaildescriptionclamp-more a.btn-link { font-size:14px; line-height:40px; padding-right:0; padding-left:0; } .detaildescriptionclamp-wrap.nolink .detaildescriptionclamp-ti { padding-right:0px; } .detail-add-impo-all-wrap { position:relative; margin:0 22px 0 22px; word-wrap: break-word; word-break: break-all; padding-top: 19px;} .detail-add-impo-all-wrap .detail-add-impo-all-ti { position:relative; margin-bottom:16px; padding:0 20px 0 0; font-size:17px; color:#111111; line-height:24px; } .detail-add-impo-wrap .detail-add-impo-ti { display: flex; align-items: center; } .detail-add-impo-wrap .detail-add-impo-ti img { display: inline-block; width: 34px; height: 34px;} .detail-add-impo-wrap .detail-add-impo-ti span { font-size:14px; line-height: 20px; display: inline-block; padding:0 0 0 8px;} .detail-add-impo-wrap .detail-add-impo-desc { font-size: 14px; line-height: 20px; color:#454545; padding: 12px 0 8px;} .detail-add-impo-wrap .btn { font-size: 13px; line-height: 19px; color: #4B469C; padding: 0; text-decoration: underline;} /* Detail 기타 정보 End */ /* Detail 데이터 보안 Start */ .datasafety-wrap { position:relative; padding: 20px; } .datasafety-wrap .datasafety-ti { position:relative; margin-bottom:10px; padding:0 20px 0 0; font-size:17px; color:#000000; line-height:23px; } .datasafety-wrap .datasafety-ti a.datasafety-more { position:absolute; padding:4px 0 0 8px; right:0; top:0; width:23px; height:23px; display:block; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .datasafety-wrap .datasafety-ti a.datasafety-more i.icon-link { vertical-align:top; } .datasafety-wrap .datasafety-co > span { font-size:14px; line-height: 20px; color:#353535; } .datasafety-wrap .datasafety-co .datasafety-list { width:100%; padding: 20px; border:1px solid #E1E1E1; margin-top: 16px; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -ms-border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; } .datasafety-wrap .datasafety-co ul { position:relative; display: flex; flex-wrap: wrap; align-items: flex-start; align-self: stretch; justify-content: flex-start; gap:12px; } .datasafety-wrap .datasafety-co ul li { display: table;} .datasafety-wrap .datasafety-co ul span { display:table-cell; font-size: 13px; line-height: 19px; color:#353535; padding-left: 8px; text-align: left; } .datasafety-wrap .datasafety-co ul span:first-child { width:19px; padding-left:0;} .datasafety-wrap .datasafety-co ul span:first-child i { margin-top: -1px;} .datasafety-wrap .datasafety-co ul li , .datasafety-wrap .datasafety-co ul.one-items li , .datasafety-wrap .datasafety-co ul.two-items li { width: 100%; } .datasafety-wrap .datasafety-co .datasafety-list-no { width:100%; padding: 20px 16px; border:1px solid #E1E1E1; margin-top: 16px; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -ms-border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; text-align: center; } .datasafety-wrap .datasafety-co .datasafety-list-no i { position: relative; top:1px; vertical-align: top;} .datasafety-wrap .datasafety-co .datasafety-list-no span { font-size:14px; line-height: 20px; color: #353535; display: block; padding: 8px 0 0; } .datasafety-detail-warp { background-color: #F7F7F8; } .datasafety-detail-warp .datasafety-detail-inner { padding:0 24px 32px; } .datasafety-detail-warp .datasafety-detail-inner img { display:block; margin:0 auto; width: 80px; } .datasafety-detail-warp .datasafety-detail-inner ul { padding:16px 0 0; } .datasafety-detail-warp .datasafety-detail-inner ul li { position:relative; font-size: 13px; line-height: 19px; color:#353535; padding-left: 10px; margin-top: 5px; } .datasafety-detail-warp .datasafety-detail-inner ul li:first-child { margin-top: 0;} .datasafety-detail-warp .datasafety-detail-inner ul li:before { content:""; position: absolute; top: 8px; left: 0; width: 4px; height: 4px; background-color: #8C8C8C; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } .datasafety-detail-warp .datasafety-detail-inner ul li a { font-size: 13px; line-height: 19px; color: #4B469C; text-decoration: underline; } .datasafety-detail-co-warp { padding:32px 20px 0; } .datasafety-detail-co-warp .datasafety-detail-co-ti { } .datasafety-detail-co-warp .datasafety-detail-co-ti strong { font-size:17px; line-height: 23px; color:#000000; display: block; } .datasafety-detail-co-warp .datasafety-detail-co-ti span { font-size: 14px; line-height: 20px; color:#454545; display: block; padding-top: 8px; } .datasafety-detail-co-warp .data-box-co { margin-bottom: 15px; } .datasafety-detail-co-warp .data-box-co .data-box-list { padding: 16px 0;} .datasafety-detail-co-warp .data-box-co .data-box-list .data-box-item{width: 100%; padding:14px 0;} .datasafety-detail-co-warp .data-box-co .data-box-list .data-box-item .data-box-link {display: block;} .datasafety-detail-co-warp .data-box-co .data-box-list .data-box-item .data-box-item-inner {position: relative; display: table; width: 100%;} .datasafety-detail-co-warp .data-box-co .data-box-list .data-box-item .data-box-item-inner .data-box-question {font-size:16px; line-height: 22px; color:#000000; display: table-cell;} .datasafety-detail-co-warp .data-box-co .data-box-list .data-box-item .data-box-item-inner .data-box-question i { vertical-align: top; padding-right:12px;} .datasafety-detail-co-warp .data-box-co .data-box-list .data-box-item .data-box-item-inner .icon-data-arrow-20 {display: table-cell; vertical-align: middle;} .datasafety-detail-co-warp .data-box-co .data-box-list .data-box-item.on .data-box-item-inner .icon-data-arrow-20 {background-position: -60px -63px;} .datasafety-detail-co-warp .data-box-co .data-box-list .data-box-answer { margin:16px 0 0; padding:10px 24px 22px; border: 1px solid #ECECEC; -ms-border-radius:16px; -moz-border-radius:16px; -webkit-border-radius:16px; border-radius:16px; display: none; } .datasafety-detail-co-warp .data-box-co .data-box-list .data-box-answer strong { display:block; font-size:13px; line-height: 19px; color:#8C8C8C; padding:6.5px 0; } .datasafety-detail-co-warp .data-box-co .data-box-list .data-box-answer ul { padding-top: 10px; } .datasafety-detail-co-warp .data-box-co .data-box-list .data-box-answer li { padding-top: 20px; } .datasafety-detail-co-warp .data-box-co .data-box-list .data-box-answer li:first-child { padding-top: 0; } .datasafety-detail-co-warp .data-box-co .data-box-list .data-box-answer dt { font-size: 14px; line-height: 20px; color: #000000;} .datasafety-detail-co-warp .data-box-co .data-box-list .data-box-answer dd { font-size: 13px; line-height: 19px; color: #585858; padding-top: 4px; } .data-summary { font-size: 14px; line-height: 20px; color: #353535; padding: 2px 0 0 36px; } .data-info-box { display: table; } .data-info-box span { display:table-cell; font-size: 13px; line-height: 19px; padding-left:12px; vertical-align: middle; } .data-info-box span:first-child { padding: 0; } .data-info-box span i { display:block; padding:1px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; vertical-align: middle; } .data-info-box span a { display: inline-block; font-size: 13px; line-height: 19px; color: #4B469C; text-decoration: underline;} .data-box-co .datasafety-list-no { width:100%; padding: 28px 16px; border:1px solid #E1E1E1; margin: 16px 0; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -ms-border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; text-align: center; } .data-box-co .datasafety-list-no i { position: relative; top:1px; vertical-align: top;} .data-box-co .datasafety-list-no span { font-size:14px; line-height: 20px; color: #000000; display: block; padding: 8px 0 0; } /* Detail 데이터 보안 End */ /* Detail 평점 및 리뷰 Start */ .detailcomment-wrap { position:relative; margin:20px; } .detailcomment-wrap .detailcomment-ti { position:relative; margin-bottom:20px; font-size:17px; color:#000000; line-height:23px; } .detailcomment-wrap .detailcomment-ti span { font-size:17px; color:#000000; line-height:23px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; } .detailcomment-wrap .detailcomment-info-wrap { margin-left:-20px; margin-right:-20px; margin-bottom:20px; } .detailcomment-wrap .detailcomment-info { width:100%; display:table; } .detailcomment-wrap .detailcomment-info .detailcomment-cell { width:50%; vertical-align:middle; display:table-cell; } .detailcomment-wrap .detailcomment-info .detailcomment-left { text-align:center; } .detailcomment-wrap .detailcomment-info .detailcomment-left strong { margin-bottom:11px; font-size:34px; color:#000000; font-weight:bold; line-height:34px; display:block; } .detailcomment-wrap .detailcomment-info .detailcomment-left span { font-size:12px; color:#000000; line-height:16px; display:block; } .detailcomment-wrap .detailcomment-info .detailcomment-info-list { width:75%; display:block; } .detailcomment-wrap .detailcomment-info .detailcomment-info-list ul { } .detailcomment-wrap .detailcomment-info .detailcomment-info-list ul li { position:relative; margin-bottom:5px; padding:5px 0px 5px 18px; } .detailcomment-wrap .detailcomment-info .detailcomment-info-list ul li:last-of-type { margin-bottom:0; } .detailcomment-wrap .detailcomment-info .detailcomment-info-list ul li .comment-num { position:absolute; left:0; top:0; font-size:11px; color:#000000; font-weight:bold; line-height:15px; } .detailcomment-wrap .detailcomment-info .detailcomment-info-list ul li .comment-bar { height:5px; background-color:#e8e8ea; display:block; -ms-border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; } .detailcomment-wrap .detailcomment-info .detailcomment-info-list ul li .comment-bar em { height:5px; background-color:#2c275e; display:block; -ms-border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; } .detailcomment-list { } .detailcomment-list ul { padding:0 20px; background:#f7f7fa; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; } .detailcomment-list ul li { position:relative; padding:25px 0 25px 0; border-top:1px solid #e6e6e8; } .detailcomment-list ul li strong { margin-bottom:10px; font-size:14px; color:#000000; font-weight:bold; line-height:20px; display:block; } .detailcomment-list ul li .detailcomment-desc { width:100%; max-height:40px; margin-bottom:5px; font-size:14px; color:#353535; line-height:20px; white-space:normal; overflow:hidden; text-overflow:ellipsis; word-wrap:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .detailcomment-list ul li .detailcomment-data { } .detailcomment-list ul li .detailcomment-data span { margin-left:16px; font-size:12px; color:#8c8c8c; line-height:20px; } .detailcomment-list ul li .detailcomment-data span:first-of-type { margin-left:0; } .detailcomment-list ul li:first-of-type { border-top-width:0; } /* Detail 평점 및 리뷰 End */ /* 판매자 공지 Start */ .detailsellernotice-wrap { position:relative; margin:0 20px 0 20px; } .detailsellernotice-wrap .detailsellernotice-ti { position:relative; padding:0 0 0 0; font-size:16px; color:#111111; line-height:23px; text-align:center; } .detailsellernotice-wrap .detailsellernotice-ti span { font-size:16px; color:#111111; line-height:23px; display:block; } .detailsellernotice-wrap .detailsellernotice-date { padding-top:5px; font-size:14px; color:#8c8c8c; line-height:21px; text-align:center; } .detailsellernotice-wrap .detailsellernotice-date span { font-size:14px; color:#8c8c8c; line-height:21px; display:block; } .detailsellernotice-wrap .detailsellernotice-co { padding-top:15px; } .detailsellernotice-wrap .detailsellernotice-co p { font-size:14px; color:#353535; line-height:22px; } /* 판매자 공지 End */ /* Detail 하단 다운로드 Start */ .detailfooterfixed { position:fixed; left:0; bottom:0; width:100%; z-index:1001; } .detailfooterfixed .detailfooterfixed-inner { width:100%; max-width:768px; height:100%; margin:0 auto; padding:0 20px; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .detailfooterfixed .detaildownload-btn { padding-bottom:20px; } .detailfooterfixed .detaildownload-btn a { position:relative; font-size:19px; color:#ffffff; line-height:55px; text-align:center; background-color:#2c275e; display:block; -ms-border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; -ms-box-shadow:0 10px 20px 0 rgba(0,0,0,0.2); -moz-box-shadow:0 10px 20px 0 rgba(0,0,0,0.2); -webkit-box-shadow:0 10px 20px 0 rgba(0,0,0,0.2); box-shadow:0 10px 20px 0 rgba(0,0,0,0.2); } .detailfooterfixed .detaildownload-btn a:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.2); -ms-border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; } .detailfooterfixed .detaildownload-btn a.icon-btn { padding:10px 0 0 0; line-height:30px; height:55px; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .detailfooterfixed .detaildownload-btn a em { position:relative; z-index:21; } .detailfooterfixed.dim .detaildownload-btn a { background: rgba(134, 134, 145, 0.98) !important; font-size:14px; line-height: 20px; padding: 17.5px 0;} .detailfooterfixed.dim .detaildownload-btn a:before { display:none; } /* Detail 하단 다운로드 End */ /* 꼭 알아두세요 Start */ .reservefooter-wrap { background:#f6f6f6; } .reservefooter-wrap.marketing { background:#1e1a59; } .reservefooter-wrap.friend { background:#2fa069; } .precautionary-wrap { position:relative; padding:20px 20px 0 20px; background:#f6f6f6; } .precautionary-wrap .precautionary-inner { } .precautionary-wrap .precautionary-ti { margin-bottom:8px; font-size:15px; color:#000000; line-height:22px; } .precautionary-wrap .precautionary-co { font-size:14px; color:#8c8c8c; line-height:22px; overflow:hidden; } .precautionary-wrap .precautionary-co .precautionary-para { font-size:14px; color:#8c8c8c; line-height:22px; } .precautionary-wrap .precautionary-co ul.precautionary-para { } .precautionary-wrap .precautionary-co ul.precautionary-para li { position:relative; padding:0 0 0 13px; font-size:14px; color:#8c8c8c; line-height:22px; } .precautionary-wrap .precautionary-co ul.precautionary-para li:before { position:absolute; content:''; left:3px; width:4px; height:4px; background:#828282; display:block; -ms-border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; } .precautionary-wrap .precautionary-more { text-align:center; line-height:35px; } .precautionary-wrap .precautionary-more .btn-link { padding:0; font-size:14px; color:#3e3877; line-height:35px; text-align:center; display:block; cursor: pointer;} .precautionary-wrap.marketing { background:#1e1a59; } .precautionary-wrap.marketing .precautionary-ti { color:#ffffff; } .precautionary-wrap.marketing .precautionary-co { color:#817db6; } .precautionary-wrap.marketing .precautionary-co .precautionary-para { color:#817db6; } .precautionary-wrap.marketing .precautionary-co ul.precautionary-para li { color:#817db6; } .precautionary-wrap.marketing .precautionary-co ul.precautionary-para li:before { background:#817db6; } .precautionary-wrap.marketing .precautionary-more .btn-link { color:#8e85fe;} .precautionary-wrap.friend { background:#2fa069; } .precautionary-wrap.friend .precautionary-ti { color:#c4fff2; } .precautionary-wrap.friend .precautionary-co { color:#c2f7dc; } .precautionary-wrap.friend .precautionary-co .precautionary-para { color:#c2f7dc; } .precautionary-wrap.friend .precautionary-co ul.precautionary-para li { color:#c2f7dc; } .precautionary-wrap.friend .precautionary-co ul.precautionary-para li:before { background:#c2f7dc; } .precautionary-wrap.friend .precautionary-more .btn-link { color:#ffffff;} .precautionary-wrap .precautionary-co ul.precautionary-para.no li { padding-left:0; } .precautionary-wrap .precautionary-co ul.precautionary-para.no li:before { display:none; } .precautionary-wrap.js-clamppara-wrap ul.precautionary-para li { display:none; } .precautionarybtn-wrap { position:relative; padding:0 20px; background:#f6f6f6; } .precautionarybtn-wrap .precautionarybtn-inner { } .precautionarybtn-wrap .precautionarybtn-more {} .precautionarybtn-wrap .precautionarybtn-more a { position:relative; padding:15px 20px 15px 20px; font-size:14px; color:#000000; line-height:20px; background:#ffffff; display:block; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; } .precautionarybtn-wrap .precautionarybtn-more a i.icon { position:absolute; right:20px; top:50%; margin-top:-7px; display:block; } .precautionarybtn-wrap.marketing { background:#1e1a59; } .precautionarybtn-wrap.marketing .precautionarybtn-more a { color:#ffffff; background:#19154c; } /* 꼭 알아두세요 End */ /* 혜택 메인 Start */ @-ms-keyframes benefitroundAni { 0% { -ms-transform: translate3d(0,9px,0); -moz-transform: translate3d(0,9px,0); -webkit-transform: translate3d(0,9px,0); transform: translate3d(0,9px,0); opacity: 0.2;} 50% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1;} 100% { -ms-transform: translate3d(0,9px,0); -moz-transform: translate3d(0,9px,0); -webkit-transform: translate3d(0,9px,0); transform: translate3d(0,9px,0); opacity: 0.2;} } @-moz-keyframes benefitroundAni { 0% { -ms-transform: translate3d(0,9px,0); -moz-transform: translate3d(0,9px,0); -webkit-transform: translate3d(0,9px,0); transform: translate3d(0,9px,0); opacity: 0.2;} 50% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1;} 100% { -ms-transform: translate3d(0,9px,0); -moz-transform: translate3d(0,9px,0); -webkit-transform: translate3d(0,9px,0); transform: translate3d(0,9px,0); opacity: 0.2;} } @-webkit-keyframes benefitroundAni { 0% { -ms-transform: translate3d(0,9px,0); -moz-transform: translate3d(0,9px,0); -webkit-transform: translate3d(0,9px,0); transform: translate3d(0,9px,0); opacity: 0.2;} 50% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1;} 100% { -ms-transform: translate3d(0,9px,0); -moz-transform: translate3d(0,9px,0); -webkit-transform: translate3d(0,9px,0); transform: translate3d(0,9px,0); opacity: 0.2;} } @keyframes benefitroundAni { 0% { -ms-transform: translate3d(0,9px,0); -moz-transform: translate3d(0,9px,0); -webkit-transform: translate3d(0,9px,0); transform: translate3d(0,9px,0); opacity: 0.2;} 50% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1;} 100% { -ms-transform: translate3d(0,9px,0); -moz-transform: translate3d(0,9px,0); -webkit-transform: translate3d(0,9px,0); transform: translate3d(0,9px,0); opacity: 0.2;} } .benefitmain-wrap { position:relative; background:#312c70; } .benefitmain-wrap .benefitmain-inner { padding-bottom:20px; -ms-transition:background-color 0.3s linear; -moz-transition:background-color 0.3s linear; -webkit-transition:background-color 0.3s linear; transition:background-color 0.3s linear; } .benefitmain-wrap .benefitmain-ti { margin:0 20px; height:40px; } .benefitmain-wrap .benefitmain-nav { padding:20px 0 0 0; } .benefitmain-wrap .benefitmain-nav ul { width:100%; table-layout:fixed; display:table; } .benefitmain-wrap .benefitmain-nav ul li { text-align:center; vertical-align:middle; display:table-cell; } .benefitmain-wrap .benefitmain-nav ul li a { position: relative; padding:0; font-size:13px; color:#ffffff; line-height:30px; display:block; } .benefitmain-wrap .benefitmain-nav ul li:last-child a:before { position:absolute; content:''; left:0; top:50%; margin-top:-20px; width:1px; height:40px; background:rgba(255,255,255,0.1); display:block; } .benefitmain-wrap .benefitmain-nav ul li a .icon { vertical-align:top; } .benefitmain-wrap .benefitmain-loading { position:absolute; left:0; top:0; width:100%; height:98px; table-layout:fixed; display:table; } .benefitmain-wrap .benefitmain-loading .benefitmain-loading-cell { padding-bottom:0; height:100%; vertical-align:middle; display:table-cell; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .benefitmain-wrap .benefitmain-loading .benefitmain-loading-cell .loadingBoxGroup { width:85px; height:26px; } .benefitmain-wrap .benefitmain-loading .benefitmain-loading-cell .loadingBoxGroup span { float:left; width:16px; height:16px; background: #ffffff; opacity:0.4; margin:0 16px 0 0; display:block; -ms-border-radius:8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; -ms-transform: translate3d(0,9px,0); -moz-transform: translate3d(0,9px,0); -webkit-transform: translate3d(0,9px,0); transform: translate3d(0,9px,0); -ms-animation: benefitroundAni 1.2s ease-in-out infinite; -moz-animation: benefitroundAni 1.2s ease-in-out infinite; -webkit-animation: benefitroundAni 1.2s ease-in-out infinite; animation: benefitroundAni 1.2s ease-in-out infinite; } .benefitmain-wrap .benefitmain-loading .benefitmain-loading-cell .loadingBoxGroup span:last-child { margin-right:0; } .benefitmain-wrap .benefitmain-loading .benefitmain-loading-cell .loadingBoxGroup span.round-ani-item-02 {-ms-animation-delay: 0.15s; -moz-animation-delay: 0.15s; -webkit-animation-delay: 0.15s; animation-delay: 0.15s;} .benefitmain-wrap .benefitmain-loading .benefitmain-loading-cell .loadingBoxGroup span.round-ani-item-03 {-ms-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -webkit-animation-delay: 0.3s; animation-delay: 0.3s;} .benefitmain-wrap .benefitmain-co { padding-top:30px; overflow:hidden; height:164px; visibility:hidden; } .benefitmain-wrap .benefitmain-co-ti { position:relative; margin:0 20px; padding-bottom:10px; font-size:17px; color:#ffffff; line-height:25px; display:block; } .benefitmain-wrap .benefitmain-swiper { position:relative; } .benefitmain-wrap .benefitmain-swiper .swiper-container { padding:0 15px; height:100%; overflow:visible; } .benefitmain-wrap .benefitmain-swiper .swiper-wrapper { } .benefitmain-wrap .benefitmain-swiper .swiper-slide { padding-right:10px; width:124px; height:114px; overflow:visible; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .benefitmain-wrap .benefitmain-swiper .swiper-slide:last-of-type { padding-right:0; width:114px; } .benefitmain-wrap .benefitmain-swiper .swiper-slide a.benefitmain-swiper-link { width:100%; height:100%; display:block; padding:3px; border:2px solid transparent; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; -ms-border-radius:26px; -moz-border-radius:26px; -webkit-border-radius:26px; border-radius:26px; -ms-transition:border-color 0.3s linear; -moz-transition:border-color 0.3s linear; -webkit-transition:border-color 0.3s linear; transition:border-color 0.3s linear; } .benefitmain-wrap .benefitmain-swiper .swiper-slide a.benefitmain-swiper-link span { position:relative; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; display:block; -ms-background-size:100% 100%; -moz-background-size:100% 100%; -webkit-background-size:100% 100%; background-size:100% 100%; -ms-border-radius:22px; -moz-border-radius:22px; -webkit-border-radius:22px; border-radius:22px; text-indent: -99999px; } .benefitmain-wrap .benefitmain-swiper .swiper-slide a.benefitmain-swiper-link span .icon-type-benefit-adult-18 { position: absolute; bottom:10px; right:10px; } .benefitmain-wrap .benefitmain-swiper .swiper-slide a.benefitmain-swiper-link span .icon-type-adult-19 {bottom:8px; right:8px;} .benefitmain-wrap .benefitmain-swiper .swiper-slide.loading span.benefitmain-swiper-link { padding:5px; width:100%; height:100%; table-layout:fixed; display:table; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .benefitmain-wrap .benefitmain-swiper .swiper-slide.loading span.benefitmain-swiper-link .loadingBoxGroup { width:100%; height:100%; vertical-align:middle; display:table-cell; background-color:rgba(255,255,255,0.1); -ms-border-radius:22px; -moz-border-radius:22px; -webkit-border-radius:22px; border-radius:22px; } .benefitmain-wrap .benefitmain-summary { margin:0; height:130px; visibility:hidden; } .benefitmain-wrap .benefitmain-summary-box { position:relative; width:100%; height:90px; display:block; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; } .benefitmain-wrap .benefitmain-summary-link { width:100%; height:100%; padding:12px 20px 12px 20px; background:#ffffff; display:block; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; } .benefitmain-wrap .benefitmain-summary-link em { margin-bottom:5px; line-height:20px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; display:block; } .benefitmain-wrap .benefitmain-summary-link em .icon { vertical-align:top; } .benefitmain-wrap .benefitmain-summary-link strong { font-size:15px; color:#111111; line-height:23px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; display:block; } .benefitmain-wrap .benefitmain-summary-link span { font-size:13px; color:#8c8c8c; line-height:18px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; display:block; } .benefitmain-wrap .benefitmain-content { position:relative; height:93px; overflow:hidden; } .benefitmain-wrap .benefitcampaign-swiper { padding:0 20px; height:100%; overflow:hidden; } .benefitmain-wrap .benefitcampaign-swiper .swiper-container { overflow:visible; } .benefitmain-wrap .benefitcampaign-swiper .swiper-wrapper { overflow:visible; } .benefitmain-wrap .benefitcampaign-swiper .swiper-slide { width:92%; padding-left:5px; } .benefitmain-wrap .benefitcampaign-swiper .swiper-slide:first-of-type { padding-left:0; } .benefitmain-wrap .benefitmain-summary-loading { padding:23px 0 0 0; display:none; } .benefitmain-wrap .benefitmain-summary-box.loading .benefitmain-summary-link { display:none; } .benefitmain-wrap .benefitmain-summary-box.loading .benefitmain-summary-loading { width:100%; height:90px; padding:0; display:table; } .benefitmain-wrap .benefitmain-swiper .swiper-slide a.benefitmain-swiper-link.selected { border-color:#ffffff; } .benefitmain-wrap .benefitmain-customer { overflow:hidden; min-height:25px; padding-top:30px; padding-bottom:40px; visibility:hidden; } .benefitmain-wrap .benefitmain-customer-ti { margin:0 20px; padding-bottom:10px; } .benefitmain-wrap .benefitmain-customer-ti div { position:relative; padding:0 40px 0 0; font-size:17px; color:#ffffff; line-height:22px; display:block; } .benefitmain-wrap .benefitmain-customer-ti div span { font-size:17px; color:#ffffff; line-height:25px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; display:block; } .benefitmain-wrap .benefitmain-customer-swiper { width:100%; overflow:hidden; } .benefitmain-wrap .benefitmain-customer-swiper .swiper-container { position:relative; padding:0 20px; } .benefitmain-wrap .benefitmain-customer-swiper .swiper-wrapper { } .benefitmain-wrap .benefitmain-customer-swiper .swiper-slide { width: 290px; height: 140px; margin-left:10px; overflow:hidden; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; } .benefitmain-wrap .benefitmain-customer-swiper .swiper-slide:first-child { margin-left:0; } .benefitmain-wrap .benefitmain-customer-swiper .swiper-slide a { margin:0; display:block;overflow:hidden; } .benefitmain-wrap .benefitmain-customer-swiper .swiper-slide a span { width:100%; height:100%; background-repeat:no-repeat; background-position:center center; display:block; -ms-background-size:100% 100%; -moz-background-size:100% 100%; -webkit-background-size:100% 100%; background-size:100% 100%; } .benefitmain-wrap .benefitmain-customer-swiper .swiper-slide a span img { width:100%; vertical-align:top; } .benefitmain-wrap .benefitmain-customer-swiper .swiper-pagination { position:absolute; left:50%; bottom:8%; -ms-transform:translate3d(-50%,0,0); -moz-transform:translate3d(-50%,0,0); -webkit-transform:translate3d(-50%,0,0); transform:translate3d(-50%,0,0); } .benefitmain-wrap .benefitmain-customer-swiper .swiper-pagination .swiper-pagination-bullet { margin:0 2px 0 3px !important; width:8px; height:8px; border:1px solid rgba(255,255,255,0.8); background-color:transparent; opacity:1; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .benefitmain-wrap .benefitmain-customer-swiper .swiper-pagination .swiper-pagination-bullet-active { border-color:rgba(255,255,255,1); background-color:rgba(255,255,255,1); } .benefitmain-wrap .benefitmain-customer-nav { margin:0 20px; } .benefitmain-wrap .benefitmain-customer-nav ul { width:100%; table-layout:fixed; display:table; } .benefitmain-wrap .benefitmain-customer-nav li { text-align:center; display:table-cell; } .benefitmain-wrap .benefitmain-customer-nav li a { position:relative; padding:0 5px; display:block; } .benefitmain-wrap .benefitmain-customer-nav li a:before { position:absolute; content:''; left:0; top:50%; margin-top:-5px; width:1px; height:10px; background:rgba(255,255,255,0.2); display:block; } .benefitmain-wrap .benefitmain-customer-nav li span { font-size:13px; color:rgba(255,255,255,0.7); line-height:50px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; display:block; } .benefitmain-wrap .benefitmain-customer-nav li:first-of-type a:before { display:none; } .benefitmain-bottom-wrap {margin-bottom:25px; border-top: 2px solid #f8f8f8;} .benefitmain-bottom-wrap .benefitmain-customer-nav { margin:0 20px; padding-top:10px; } .benefitmain-bottom-wrap .benefitmain-customer-nav ul { width:100%; table-layout:fixed; display:table; } .benefitmain-bottom-wrap .benefitmain-customer-nav li { text-align:center; display:table-cell; } .benefitmain-bottom-wrap .benefitmain-customer-nav li a { position:relative; padding:0 5px; display:block; } .benefitmain-bottom-wrap .benefitmain-customer-nav li a:before { position:absolute; content:''; left:0; top:50%; margin-top:-5px; width:1px; height:10px; background:#f1f1f1; display:block; } .benefitmain-bottom-wrap .benefitmain-customer-nav li span { font-size:14px; color:#272558; line-height:50px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; display:block; } .benefitmain-bottom-wrap .benefitmain-customer-nav li:first-of-type a:before { display:none; } /* 혜택 메인 End */ /* 혜택메인 리스트 Start */ .benefitlist-title{padding:20px 20px 25px; font-size:17px; line-height:23px; color:#ffffff;} .benefitlist-wrap { position:relative; width:100%; padding:0 20px 15px; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .benefitlist-wrap .benefitlist-list { } .benefitlist-wrap .benefitlist-item { -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; overflow: hidden; margin-bottom: 15px;} .benefitlist-wrap .benefitlist-item:last-of-type { margin-bottom:0; } .benefitlist-wrap .benefitlist-link { position:relative; display:block; height: auto; min-height: 140px; background-color:#202036; background-repeat:no-repeat; background-position:center center; -ms-background-size:100% 100%; -moz-background-size:100% 100%; -webkit-background-size:100% 100%; background-size:100% 100%; } .benefitlist-wrap .benefitlist-link > img { position:relative; width:100%; height:100%; } .benefitlist-wrap .benefitlist-link .benefitlist-banner { position:absolute; top:0; left:0; width:100%; text-align:left; display:block; z-index: 50; } .benefitlist-wrap .benefitlist-link .benefitlist-banner img { width:100%; vertical-align:top; } .benefitlist-wrap .benefitlist-link .benefitlist-pic { position:absolute; right:0; bottom:0; width:100%; height:auto; text-align:right; display:block; } .benefitlist-wrap .benefitlist-link .benefitlist-pic img { width:100%; vertical-align:top; } .benefitlist-wrap .benefitlist-link .benefitlist-app-icon { position:absolute; left:20px; bottom:20px; width:100%; height:22px; display:block; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .benefitlist-wrap .benefitlist-link .benefitlist-app-item { position: relative; float:left; margin-right:4px; width:22px; height:22px; vertical-align:top; display:block; background-repeat:no-repeat; background-position:center center; -ms-background-size:100% 100%; -moz-background-size:100% 100%; -webkit-background-size:100% 100%; background-size:100% 100%; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; -ms-border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; font-size: 0; } .benefitlist-wrap .benefitlist-link .benefitlist-app-item:after { content: ""; width: 22px; height: 22px; position: absolute; left:0; top:0; border:1px solid rgba(0,0,0,0.1); -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; -ms-border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; } .benefitlist-wrap .benefitlist-link .benefitlist-app-item.more:after {display: none;} .benefitlist-wrap .benefitlist-link .benefitlist-app-item.more { background:transparent; table-layout:fixed; display:table; border:1px solid rgba(255,255,255,0.3) } .benefitlist-wrap .benefitlist-link .benefitlist-app-item.more em { font-size:11px; color:#ffffff; text-align:center; vertical-align:middle; display:table-cell; } .benefitlist-wrap .benefitalarm-item { padding:0 20px; } .benefitlist-wrap .benefitalarm-item .benefitlist-link { background: #f8f8f8; padding: 12px 20px 12px 14px; -ms-border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; box-sizing: border-box; } .benefitlist-wrap .benefitalarm-item .benefitlist-banner img { height: 70px; } .benefitlist-wrap .benefitalarm-item .benefitlist-pic img { height: 70px; } .benefitlist-wrap .benefitalarm-item .icon-01 { display: table-cell; background: url(../../common/images/icon/icon_benefitalarm.png) no-repeat 0 50%; width:48px; height: 48px; background-size:48px 48px;} .benefitlist-wrap .benefitalarm-item em span { vertical-align: middle; display: table-cell; padding:0 8px; font-size:13px; line-height: 19px; color:#000000; text-align: left;} .benefitlist-wrap .benefitalarm-item .icon-02 { display: table-cell; background: url("../../common/images/icon/icon_benefitalarm_arrow.png") no-repeat 0 50%; width:15px; height: 15px; background-size:15px 15px;} .benefitlist-banner-list { padding:0 20px 15px; } .benefitlist-banner-list em { display:block; width:100%; padding: 11px 20px 11px 14px; -webkit-box-sizing: border-box; box-sizing: border-box; } .benefitlist-banner-list .benefitalarm-item a > em { display: table; table-layout: fixed; width: 100%; } .benefitlist-banner-list em > span { display: table-cell; vertical-align: middle; } .benefitlist-banner-list em .alarm-left { width: 30px; } .benefitlist-banner-list em .alarm-text { font-size: 13px; line-height: 19px; color: #ffffff; padding-left: 12px; -webkit-box-sizing: border-box; box-sizing: border-box; } .benefitlist-banner-list .benefitalarm-item a { display:block; } .benefitlist-banner-list .benefitalarm-item em { background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); padding: 12px 20px 12px 20px; -ms-border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; } .benefitlist-banner-list .benefitalarm-item em .icon-alarm-benefit { width: 30px; height: 30px; display: inline-block; vertical-align: top; } .benefitlist-banner-list .benefitalarm-item > em { display: block; padding: 12px 20px 16px 20px;} .benefitlist-banner-list em .alarm-text-wrap { display: table; width: 100%; table-layout: fixed; } .benefitlist-banner-list em .alarm-text-wrap .alarm-left { display: table-cell; vertical-align: middle; } .benefitlist-banner-list em .alarm-text-wrap .alarm-text { display: table-cell; vertical-align: middle; padding-right: 0; } .benefitlist-banner-list em .alarm-btn { display: block; text-align: center; padding-top: 12px; } .benefitlist-banner-list em .alarm-btn span { display: inline-block; font-size: 12px; line-height: 16px; color: #ffffff; text-align: center; padding: 6px 15px; border: 1px solid rgba(255,255,255,0.4); -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; white-space: nowrap; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .benefitlist-banner-list.tip em { padding: 13px 20px 13px 14px; } .benefitmain .error-notice-wrap .error-notice-co { } .benefitmain .error-notice-wrap .error-notice-co .error-notice-ti { font-size:15px; line-height:21px; color:#ffffff; padding-top:10px; } /* // 혜택메인 리스트 End */ /* 사전예약 Start */ .reservetop { margin:0 20px 0 25px; padding-top:70px; } .reservetop .reservetop-inner { width:100%; display:table; } .reservetop .reservetop-text { vertical-align:middle; display:table-cell; } .reservetop .reservetop-text strong { font-size:21px; color:#ffffff; line-height:30px; display:block; } .reservetop .reservetop-pic { width:150px; vertical-align:middle; display:table-cell; } .reservetop .reservetop-pic img { width:100%;} .reservebenefits-wrap { position:relative; margin:0 20px; } .reservebenefits-wrap .reservebenefits-inner { padding:4px 20px 4px 10px; border:1px solid #e1e1e1; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; } .reservebenefits-wrap .reservebenefits-content { width:100%; display:table; } .reservebenefits-wrap .reservebenefits-cell { vertical-align:middle; display:table-cell; } .reservebenefits-wrap .reservebenefits-cell.reservebenefits-cell-left { width:50px; } .reservebenefits-wrap .reservebenefits-cell.reservebenefits-cell-left .icon { margin:0 auto; display:block; } .reservebenefits-wrap .reservebenefits-cell.reservebenefits-cell-right { text-align:left; line-height:17px; } .reservebenefits-wrap .reservebenefits-cell.reservebenefits-cell-right .reservebenefits-cell-inner { padding:0 0 0 8px; } .reservebenefits-wrap .reservebenefits-cell.reservebenefits-cell-right span { position:relative; padding:0 10px 0 0; font-size:14px; color:#000000; line-height:20px; display:inline-block; } .reservebenefits-wrap .reservebenefits-cell.reservebenefits-cell-right em { position:relative; padding:2px 0 0 0; font-size:12px; color:#8c8c8c; line-height:17px; display:block; } .reservebenefits-wrap .reservebenefits-cell.reservebenefits-cell-btn { padding:20px 0; display: none;} .reservebenefits-wrap .reservebenefits-cell.reservebenefits-cell-btn .autoinstall-btn { text-align:center;background: #272558; width:100%; height:30px; line-height: 30px; -ms-border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; display: none; } .reservebenefits-wrap .reservebenefits-cell.reservebenefits-cell-btn .autoinstall-btn em {color:#ffffff; font-size:12px;display: inline-block; vertical-align: top;} .reservebenefits-wrap .reservebenefits-cell.reservebenefits-cell-btn .autoinstall-btn.install-ok-btn {background:#f3f4fc; display: none;} .reservebenefits-wrap .reservebenefits-cell.reservebenefits-cell-btn .autoinstall-btn.install-ok-btn .icon-autoinstall-btn {vertical-align: top;} .reservebenefits-wrap .reservebenefits-cell.reservebenefits-cell-btn.auto-before , .reservebenefits-wrap .reservebenefits-cell.reservebenefits-cell-btn.auto-after { display: table-cell; opacity: 0; -ms-transition:all 1s linear; -moz-transition:all 1s linear; -webkit-transition:all 1s linear; transition:all 1s linear; } .reservebenefits-wrap .reservebenefits-cell.reservebenefits-cell-btn.auto-before .autoinstall-btn {display: block;} .reservebenefits-wrap .reservebenefits-cell.reservebenefits-cell-btn.auto-before .autoinstall-btn.install-ok-btn {display: none;} .reservebenefits-wrap .reservebenefits-cell.reservebenefits-cell-btn.auto-after .autoinstall-btn {display: none;} .reservebenefits-wrap .reservebenefits-cell.reservebenefits-cell-btn.auto-after .autoinstall-btn.install-ok-btn {display: block;} .reservebenefits-wrap .reservebenefits-cell.reservebenefits-cell-btn.auto-before , .reservebenefits-wrap .reservebenefits-cell.reservebenefits-cell-btn.auto-after { -ms-animation:autoInstallOpen 0.5s forwards 0.4s linear; -moz-animation:autoInstallOpen 0.5s forwards 0.4s linear; -webkit-animation:autoInstallOpen 0.5s forwards 0.4s linear; animation:autoInstallOpen 0.5s forwards 0.4s linear; } .reservebenefits-wrap + .detailscreenshots-wrap { padding:0 20px; } .reservefooterfixed { position:fixed; left:0; bottom:0; width:100%; z-index:1001; } .reservefooterfixed .reservefooterfixed-inner { width:100%; max-width:768px; height:100%; margin:0 auto; padding:0 20px; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; /* background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 27%, rgba(255,255,255,1) 100%); background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 27%,rgba(255,255,255,1) 100%); background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 27%,rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); */ } .reservefooterfixed .detaildownload-btn { padding-bottom:20px; } .reservefooterfixed .detaildownload-btn a { position:relative; font-size:19px; color:#ffffff; line-height:55px; text-align:center; background-color:#64242c; display:block; -ms-border-radius:9px; -moz-border-radius:9px; -webkit-border-radius:9px; border-radius:9px; -ms-box-shadow:0 10px 20px 0 rgba(0,0,0,0.2); -moz-box-shadow:0 10px 20px 0 rgba(0,0,0,0.2); -webkit-box-shadow:0 10px 20px 0 rgba(0,0,0,0.2); box-shadow:0 10px 20px 0 rgba(0,0,0,0.2); } .reservefooterfixed .detaildownload-btn a:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.2); -ms-border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; } .reservefooterfixed .detaildownload-btn a em { position:relative; z-index:21; } .reservefooterfixed.dim .detaildownload-btn a { background: rgba(134, 134, 145, 0.98) !important; font-size:14px; line-height: 20px; padding: 17.5px 0;} .reservefooterfixed.dim .detaildownload-btn a:before { display:none; } .listgroup-alarm { position:relative; margin:0 20px; } .listgroup-alarm .listgroup-alarm-list { background:#ffffff; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; } .listgroup-alarm .listgroup-alarm-item { padding:0 20px; } .listgroup-alarm .listgroup-alarm-inner { width:100%; min-height:60px; height:1px; border-top:1px solid #f5f5f7 !important; display:table; } .listgroup-alarm .listgroup-alarm-icon { padding:15px 0; width:31px; vertical-align:middle; display:table-cell; } .listgroup-alarm .listgroup-alarm-text { padding:15px 0; vertical-align:middle; display:table-cell; } .listgroup-alarm .listgroup-alarm-text-inner { } .listgroup-alarm .listgroup-alarm-text-inner strong { font-size:14px; line-height:22px; display:inline-block; padding:0 10px 0 0; margin-right: -4px; } .listgroup-alarm .listgroup-alarm-btn { padding:15px 0; width:50px; text-align:right; vertical-align:middle; display:table-cell; } .listgroup-alarm .listgroup-alarm-item .listgroup-alarm-inner { border-top-width:0 !important; } .listgroup-alarm .btn-link { position: relative; padding:0; font-size:14px; color:#4d44a2; line-height:22px; vertical-align:top; padding:0 0 0 10px; } .listgroup-alarm .btn-link:before { position:absolute; content:''; left:0; top:6px; width:1px; height:12px; background:#e7e7e7; } .listgroup-alarm .listgroup-alarm-item .listgroup-alarm-inner.listgroup-alarm-open { position: relative; background: #f6f6f6; padding:18px 20px; margin: 10px 0 0; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -ms-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; opacity: 0; display: none; } .listgroup-alarm .listgroup-alarm-item:last-child .listgroup-alarm-inner.listgroup-alarm-open { margin: 10px 0 0; } .listgroup-alarm .listgroup-alarm-item .listgroup-alarm-inner.listgroup-alarm-open:before { content: ''; position: absolute; top:-10px; left:50%; width:34px; height:10px; background-position: -260px -355px; transform: translate3d(-50%, 0, 0); } .listgroup-alarm .listgroup-alarm-item .listgroup-alarm-inner.listgroup-alarm-open .autoinstall-btn-before { width:100%; opacity: 0; display: none; } .listgroup-alarm .listgroup-alarm-item .listgroup-alarm-inner.listgroup-alarm-open .autoinstall-btn-after { width:100%; opacity: 0; display: none; } .listgroup-alarm .listgroup-alarm-item .listgroup-alarm-inner.listgroup-alarm-open .ossetting-btn-before { width:100%; opacity: 0; display: none; } .listgroup-alarm .listgroup-alarm-item .listgroup-alarm-inner.listgroup-alarm-open .ossetting-btn-before-all { width:100%; opacity: 0; display: none; } .listgroup-alarm .listgroup-alarm-inner.listgroup-alarm-open.auto-before .listgroup-alarm-text { display: block; text-align: center; } .listgroup-alarm .listgroup-alarm-inner.listgroup-alarm-open.auto-before .listgroup-alarm-btn { display: block; width: 100%;} .listgroup-alarm .listgroup-alarm-inner.listgroup-alarm-open.auto-before .listgroup-alarm-btn .autoinstall-btn { margin:10px auto 0; } /* 사전예약 End */ /* 사전예약 Start : 신버전 */ .reserve.new .reservetop { margin:0 20px 20px; } .reserve.new .reservetop .reservetop-text { vertical-align: top; padding: 24px 0 0 0; } .reserve.new .reservetop .reservetop-text strong { font-size:20px; line-height:26px; overflow: hidden; text-overflow: ellipsis; max-height: 52px; white-space: normal; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .reserve.new .reservetop .reservetop-pic i { width:150px; height:120px; display:block; } .reserve.new .listgroup-alarm { background: #19164E; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; } .reserve.new .listgroup-alarm .listgroup-alarm-text { padding:15px 20px; display: block;} .reserve.new .listgroup-alarm .listgroup-alarm-text-inner { } .reserve.new .listgroup-alarm .listgroup-alarm-list { background: transparent; padding:0 0 20px; } .reserve.new .listgroup-alarm .listgroup-alarm-text-inner strong { font-size: 16px; line-height: 22px; color: #FFFFFF; vertical-align: middle; padding: 0 15px 0 0; display:block; } .reserve.new .listgroup-alarm .listgroup-alarm-inner { min-height:auto; } .reserve.new .listgroup-alarm li .listgroup-alarm-text-inner strong { font-size: 13px; line-height: 19px; padding:0; overflow: unset; white-space: unset;} .reserve.new .listgroup-alarm li .listgroup-alarm-text { padding:14px 15px 14px 12px; } .reserve.new .listgroup-alarm .listgroup-alarm-item { background: #282372; margin:0 20px; padding:0 15px; -ms-border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; } .reserve.new .listgroup-alarm .listgroup-alarm-item + .listgroup-alarm-item { margin-top:10px; } .reserve.new .listgroup-alarm .listgroup-alarm-item .listgroup-alarm-inner.listgroup-alarm-open { background: #282372; padding:12px 0 15px; margin:0; } .reserve.new .listgroup-alarm .listgroup-alarm-item .listgroup-alarm-inner.listgroup-alarm-open:before { display:none; } .reserve.new .listgroup-alarm .listgroup-alarm-item .listgroup-alarm-inner.listgroup-alarm-open:after { display:none; } .reserve.new .listgroup-alarm .listgroup-alarm-item .listgroup-alarm-inner.listgroup-alarm-open strong { position:relative; text-align:center; color:rgba(243, 244, 252, 0.9); font-size: 12px; line-height: 18px; } .reserve.new .listgroup-alarm .listgroup-alarm-item .listgroup-alarm-inner.listgroup-alarm-open.auto-before .autoinstall-btn-before .listgroup-alarm-btn { padding-top: 12px; } .reserve.new .listgroup-alarm .listgroup-alarm-item .listgroup-alarm-inner.listgroup-alarm-open.os-before { opacity: 0; display: table; } .reserve.new .listgroup-alarm .listgroup-alarm-item .listgroup-alarm-inner.listgroup-alarm-open.auto-after strong { display: table; width:100%; table-layout:fixed; } .reserve.new .listgroup-alarm .listgroup-alarm-item .listgroup-alarm-inner.listgroup-alarm-open.auto-after strong .cell { display: table-cell; vertical-align:middle; text-align:left; line-height: 18px;} .reserve.new .listgroup-alarm .listgroup-alarm-item .listgroup-alarm-inner.listgroup-alarm-open.auto-after strong .cell:first-of-type { width:26px; line-height: unset;} .reserve.new .listgroup-alarm .listgroup-alarm-item .listgroup-alarm-inner.listgroup-alarm-open.auto-after strong .cell:first-of-type i { position:relative; top:-1px; } .reserve.new .listgroup-alarm .listgroup-alarm-item .listgroup-alarm-inner.listgroup-alarm-open .listgroup-alarm-btn .autoinstall-btn , .reserve.new .listgroup-alarm li.listgroup-alarm-item.ty2 .autoinstall-btn { background-color:transparent; border: 1px solid rgba(255, 255, 255, 0.4); margin: 0; display: inline-block; padding: 7px 15px; width: auto; height: auto; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; color: #F3F4FC; text-align: center; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .reserve.new .listgroup-alarm .listgroup-alarm-item .listgroup-alarm-inner.listgroup-alarm-open.os-before .listgroup-alarm-btn , .reserve.new .listgroup-alarm li.listgroup-alarm-item.ty2 .listgroup-alarm-btn { width:auto; text-align: center; display: block; margin: 12px auto 0; padding: 0; } .reserve.new .listgroup-alarm li.listgroup-alarm-item.ty2 .listgroup-alarm-btn { padding:0 } .reserve.new .listgroup-alarm .listgroup-alarm-item .listgroup-alarm-inner.listgroup-alarm-open.os-before .listgroup-alarm-btn .autoinstall-btn , .reserve.new .listgroup-alarm li.listgroup-alarm-item.ty2 .autoinstall-btn { width:auto; } .reserve.new .listgroup-alarm .listgroup-alarm-item .listgroup-alarm-inner.listgroup-alarm-open .listgroup-alarm-btn .autoinstall-btn em , .reserve.new .listgroup-alarm li.listgroup-alarm-item.ty2 .autoinstall-btn em { display:block; font-size: 12px; line-height: 16px; } .reserve.new .listgroup-alarm .listgroup-alarm-item .listgroup-alarm-inner.listgroup-alarm-open { border-top: 1px solid rgba(255, 255, 255, 0.1) !important; -ms-border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; } .reserve.new .listgroup-game .listgroup-item { padding-top:20px; } .reserve.new .listgroup-game .listgroup-item:first-of-type { padding-top: 0; } .reserve.new .listgroup-alarm .listgroup-alarm-icon { width:20px; height:20px; padding:0; } .reserve.new .listgroup-alarm .listgroup-alarm-icon i { top:-1.5px; } .reserve.new .listgroup-alarm .listgroup-alarm-btn { width:40px; padding:13px 0; } .reserve.new .listgroup-alarm .listgroup-alarm-btn .btn-toggle { display:block; } .reserve.new .btn-toggle:before { width:37px; height:15px; background: #0F0C3F; } .reserve.new .btn-toggle.selected:before { top:2.5px; background: #5662DF; } .reserve.new .adultauth-wrap .adultauth-inner { display: block; padding: 20px; } .reserve.new .adultauth-wrap .adultauth-content .adultauth-icon { display:table-cell; vertical-align:middle; width: 30px; } .reserve.new .adultauth-wrap .adultauth-text .adultauth-text-inner strong { line-height:20px; } .reserve.new .adultauth-wrap .adultauth-btn { width:28px; } .reserve.new .adultauth-wrap .adultauth-text .adultauth-text-inner span { line-height:16px; color: rgba(255,255,255,0.6); margin-top:3px; } .reserve.new .listgroup-alarm .listgroup-alarm-item .listgroup-alarm-inner.listgroup-alarm-open .listgroup-alarm-text { padding:0; } .reserve.new .listgroup-alarm li.listgroup-alarm-item.ty2 { padding:15px; opacity: 0; display:none; padding: 15px 15px 15px 17px; } .reserve.new .listgroup-alarm li.listgroup-alarm-item.ty2.os-before-all { display:block; -ms-animation:autoInstallOpen 0.5s forwards 0.4s linear; -moz-animation:autoInstallOpen 0.5s forwards 0.4s linear; -webkit-animation:autoInstallOpen 0.5s forwards 0.4s linear; animation:autoInstallOpen 0.5s forwards 0.4s linear; } .reserve.new .listgroup-alarm li.listgroup-alarm-item.ty2 .listgroup-alarm-text { padding:0; } .reserve.new .listgroup-alarm li.listgroup-alarm-item.ty2 .listgroup-alarm-text strong { font-size:12px; line-height:18px; text-align:center; } .reserve.new .listgroup-game strong { display:block; font-size:17px; line-height:23px; color:#ffffff; margin-bottom: 20px; } .reserve.new .listgroup-game .listgroup-item-screenshots { position:relative; overflow: hidden; background-repeat: no-repeat; background-position: center; -moz-background-size: cover; -webkit-background-size: cover; background-size: cover; -ms-border-radius:15px 15px 0 0; -moz-border-radius:15px 15px 0 0; -webkit-border-radius:15px 15px 0 0; border-radius:15px 15px 0 0; } .reserve.new .listgroup-game .listgroup-item-screenshots:before { content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.03); -webkit-backdrop-filter: blur(60px); backdrop-filter: blur(60px); } .reserve.new .listgroup-game .listgroup-item-screenshots a { max-height: 247px; margin: 0 auto; } .reserve.new .listgroup-game .listgroup-item-screenshots .listgroup-item-screenshots-pic img { -ms-border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; } .reserve.new .listgroup-game .listgroup-item-screenshots .listgroup-item-screenshots-pic .screenshots_img { position: absolute; top: 0; left: 50%; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; -moz-background-size: contain; -webkit-background-size: contain; background-size: contain; -moz-transform: translate3d(-50%,0,0); -webkit-transform: translate3d(-50%,0,0); transform: translate3d(-50%,0,0); } .reserve.new .listgroup-game .listgroup-item-top { table-layout:fixed; } .reserve.new .listgroup-game .listgroup-item-cell.listgroup-item-left { width:90px; vertical-align: top; padding-right: 0; } .reserve.new .listgroup-game .listgroup-item-cell.listgroup-item-right { vertical-align: top; padding:4px 0 0; } .reserve.new .listgroup-game .listgroup-item-co .listgroup-item-title { font-size:15px; line-height:21px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .reserve.new .listgroup-game .listgroup-item-co .listgroup-item-summary { margin-top:2px; font-size:13px; line-height: 19px; color: #454545; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .reserve.new .listgroup-game .listgroup-item-co .listgroup-item-date { font-size:12px; line-height: 16px; color: #454545; } .reserve.new .listgroup-game .listgroup-item-co .listgroup-item-autoinstall { display: table; width: 100%; font-size:12px; line-height:16px; color:#4B469C; margin-top:4px; } .reserve.new .listgroup-game .listgroup-item-co .listgroup-item-autoinstall i { display:table-cell; top:2px; padding-right:5px; } .reserve.new .listgroup-game .listgroup-item-co .listgroup-item-autoinstall em { display:table-cell; } .reserve.new .listgroup-game .listgroup-item-btn { padding-top:15px; } .reserve.new .listgroup-game .listgroup-item-btn .btn-primary { font-size:16px; line-height:22px; max-width:280px; margin:0 auto; padding:11px 15px; -ms-border-radius: 12px; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; } .reserve.new .listgroup-game .listgroup-item-btn .btn-primary.cancel { border-color:#ACAAC4; } .reserve.new .listgroup-end-game { position: relative; margin: 0 20px; } .reserve.new .listgroup-end-game strong { display:block; font-size:17px; line-height:23px; color:#ffffff; margin-bottom: 20px; } .reserve.new .listgroup-end-game .listgroup-item { padding-top:15px; } .reserve.new .listgroup-end-game .listgroup-item:first-of-type { padding-top:0; } .reserve.new .listgroup-end-game .listgroup-item-app { position:relative; } .reserve.new .listgroup-end-game .listgroup-item-screenshots + .listgroup-item-app { -ms-border-radius:0 0 15px 15px; -moz-border-radius:0 0 15px 15px; -webkit-border-radius:0 0 15px 15px; border-radius:0 0 15px 15px; } .reserve.new .listgroup-end-game .listgroup-item-link { display:block; } .reserve.new .listgroup-end-game .listgroup-item-top { width:100%; display:table; table-layout:fixed; } .reserve.new .listgroup-end-game .listgroup-item-cell { text-align:left; vertical-align:top; display:table-cell; } .reserve.new .listgroup-end-game .listgroup-item-cell.listgroup-item-left { width:90px; vertical-align:top; } .reserve.new .listgroup-end-game .listgroup-item-cell.listgroup-item-right { vertical-align:top; padding:6px 0 0; } .reserve.new .listgroup-end-game .listgroup-item-thumbnail { position:relative; width:70px; height:70px; display:block; } .reserve.new .listgroup-end-game .listgroup-item-thumbnail .listgroup-item-thumbnail-app { position:relative; width:70px; height:70px; background-repeat:no-repeat; background-position:center center; display:block; -ms-background-size:100% 100%; -moz-background-size:100% 100%; -webkit-background-size:100% 100%; background-size:100% 100%; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; } .reserve.new .listgroup-end-game .listgroup-item-thumbnail .listgroup-item-thumbnail-app:before { position:absolute; content:''; left:0; top:0; width:100%; height:100%; border:1px solid rgba(0,0,0,0.04); -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .reserve.new .listgroup-end-game .listgroup-item-thumbnail .listgroup-item-thumbnail-app .icon-type-adult-18 {width:14px; height:14px; background-position: -550px -450px;} .reserve.new .listgroup-end-game .listgroup-item-thumbnail .listgroup-item-thumbnail-app .icon-type-adult-19 {width:14px; height:14px; background-position: -571px -450px;} .reserve.new .listgroup-end-game .listgroup-item-co { display:block; } .reserve.new .listgroup-end-game .listgroup-item-co .listgroup-item-title { font-size:15px; line-height:21px; color: #ffffff; display:block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .reserve.new .listgroup-end-game .listgroup-item-co .listgroup-item-summary { margin-top:2px; font-size:13px; color:#ACAAC4; line-height:19px; display:block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .reserve.new .listgroup-end-game .listgroup-item-co .listgroup-item-date { font-size:12px; color:#ACAAC4; line-height:16px; display:block; } .reserve.new .listgroup-end-game .listgroup-item-co .listgroup-item-autoinstall { font-size:12px; color:#8E85FE; line-height:16px; display:block; } .reserve.new .precautionary-wrap.marketing .precautionary-more .btn-link { color: #8e85fe; } .reserve.new .precautionary-wrap .precautionary-ti { margin-bottom:5px; } .reserve.new .precautionary-wrap .precautionary-co ul.precautionary-para li { padding:0 0 0 10px; } .reserve.new .precautionary-wrap .precautionary-co ul.precautionary-para li:before { left:0; } /* 사전예약 End : 신버전 */ /* 사전예약 상세 Start : 신버전 */ .new .detailapptop-co-title { margin-bottom:6px; } .new .detailapptop-co-summary { line-height:19px; } .new .reservebenefits-wrap .reservebenefits-inner { background: #F7F7F8; border:0; padding: 0; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; } .new .reservebenefits-wrap .reservebenefits-content { min-height:60px; padding: 12px 15px 12px 15px; display: flex; align-self: stretch; flex-wrap: wrap; flex-direction: column; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .new .reservebenefits-wrap .reservebenefits-content .reservebenefits-content-inner { display:table; } .new .reservebenefits-wrap .reservebenefits-cell.reservebenefits-cell-right .reservebenefits-cell-inner { padding: 0 0 0 8px; } .new .reservebenefits-wrap .reservebenefits-cell.reservebenefits-cell-right .reservebenefits-cell-inner span { padding:0; } .new .reservebenefits-wrap .reservebenefits-cell.reservebenefits-cell-right em { font-size:13px; line-height:19px; color: #585858; } .new .listgroup-benefitsreserve .listgroup-benefitsreserve-ti { margin-bottom:15px; } .new .listgroup-benefitsreserve ul { border:1px solid #E1E1E1; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; } .new .listgroup-benefitsreserve .listgroup-benefitsreserve-item { border-top: 1px solid #E1E1E1; padding: 20px; margin: 0; box-sizing: border-box; } .new .listgroup-benefitsreserve .listgroup-benefitsreserve-item:first-of-type { border-top:0; } .new .listgroup-benefitsreserve .listgroup-benefitsreserve-item .listgroup-benefitsreserve-icon { position:relative; } .new .listgroup-benefitsreserve .listgroup-benefitsreserve-item .listgroup-benefitsreserve-text { font-size:14px; line-height:20px; margin-top:6px; } .new .detaildescriptionclamp-wrap .detaildescriptionclamp-ti span { line-height:23px; color:#000000; } .new .detaildescriptionclamp-wrap.nolink .detaildescriptionclamp-ti { margin-bottom:10px; } .new .detaildescriptionclamp-wrap .detaildescriptionclamp-co { line-height:20px; } .new .detaildescriptionclamp-wrap .detaildescriptionclamp-co .detaildescriptionclamp-para { line-height:20px; color: #454545; } .new .detaildescriptionclamp-wrap .detaildescriptionclamp-more { text-align:center; } .new .detaildescriptionclamp-wrap .detaildescriptionclamp-more a.btn-link { color: #4B469C; } .new .reservebenefits-wrap .reservebenefits-cell.reservebenefits-cell-btn.auto-before { position:relative; display:block; margin:0 auto; } .new .reservebenefits-wrap .reservebenefits-cell.reservebenefits-cell-btn .autoinstall-btn { background: transparent; border: 1px solid #ACAAC4; height:30px; margin: 12px auto 0; line-height: 28px; padding: 0 15px; max-width: 728px; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } @-ms-keyframes autoInstallAni { 0% { background: transparent; opacity: 1; } 10% { background: rgba(77, 68, 162, 0.15); opacity: 1; } 50% { background: rgba(77, 68, 162, 0.15); opacity: 1; } 100% { background: rgba(77, 68, 162, 0.15); opacity: 0; } } @-moz-keyframes autoInstallAni { 0% { background: transparent; opacity: 1; } 10% { background: rgba(77, 68, 162, 0.15); opacity: 1; } 50% { background: rgba(77, 68, 162, 0.15); opacity: 1; } 100% { background: rgba(77, 68, 162, 0.15); opacity: 0; } } @-webkit-keyframes autoInstallAni { 0% { background: transparent; opacity: 1; } 10% { background: rgba(77, 68, 162, 0.15); opacity: 1; } 50% { background: rgba(77, 68, 162, 0.15); opacity: 1; } 100% { background: rgba(77, 68, 162, 0.15); opacity: 0; } } @keyframes autoInstallAni { 0% { background: transparent; opacity: 1; } 10% { background: rgba(77, 68, 162, 0.15); opacity: 1; } 50% { background: rgba(77, 68, 162, 0.15); opacity: 1; } 100% { background: rgba(77, 68, 162, 0.15); opacity: 0; } } .new .reservebenefits-wrap .reservebenefits-cell.reservebenefits-cell-btn .autoinstall-btn.ani { -ms-animation:autoInstallAni 0.5s linear forwards; -moz-animation:autoInstallAni 0.5s linear forwards; -webkit-animation:autoInstallAni 0.5s linear forwards; animation:autoInstallAni 0.5s linear forwards; } .new .reservebenefits-wrap .reservebenefits-cell.reservebenefits-cell-btn.auto-before.ani2 { -ms-transition: none; -moz-transition: none; -webkit-transition: none; transition: none; } .new .reservebenefits-wrap .reservebenefits-cell.reservebenefits-cell-btn .autoinstall-btn em { font-size:13px; color: #3E3877; } .new .reservebenefits-wrap .reservebenefits-cell.reservebenefits-cell-btn.auto-before , .new .reservebenefits-wrap .reservebenefits-cell.reservebenefits-cell-btn.auto-after { padding: 0; } .new .auto-before .lottie-wrap { height:30px; display:none; text-align:center; margin-top:12px; } .new .lottie-wrap i { width:30px; height:30px; display:inline-block; } .new .auto-before.ani2 .lottie-wrap { display:block; position: absolute; left:0; top:12px; width:100%; text-align:center; margin:0; } .new .reservebenefits-wrap .reservebenefits-cell.reservebenefits-cell-left { width:36px; vertical-align: middle; } .new .reservebenefits-wrap .reservebenefits-cell.reservebenefits-cell-left.os-before { vertical-align:top; padding: 6px 0; } .new .reservebenefits-wrap .reservebenefits-cell.reservebenefits-cell-right .reservebenefits-cell-inner .ossetting-btn { font-size:13px; line-height:19px; color: #4B469C; margin-top: 4px; display: block; } .reservebenefits-wrap .reservebenefits-cell.reservebenefits-cell-right .reservebenefits-cell-inner .ossetting-btn i { top:5px; } .new .detailcommunity-wrap { position:relative; padding:20px; overflow:hidden; } .new .detailcommunity-wrap .detailcommunity-ti { position:relative; font-size:17px; color:#000000; line-height:23px; } .new .detailcommunity-wrap .detailcommunity-ti span { font-size:17px; color:#000000; line-height:23px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; } .new .detailcommunity-wrap ul { display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: center; } .new .detailcommunity-wrap li { margin:15px 50px 0 0; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;} .new .detailcommunity-wrap li:last-of-type { margin:15px 0 0 0; } .new .detailcommunity-wrap li a { display:block; padding:0; text-align:center; width:40px; height: 40px; background: #F7F7F8; -ms-border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; } .new .detailcommunity-wrap li a i.icon { display:block; } .new .detaildescription-wrap { padding:20px 20px 40px; } .new .detaildescription-wrap .detaildescription-ti span { color:#000000; } .new .detailseller-ti span { display:block; font-size: 15px; line-height: 21px;} .new .detailseller-ti span a { position:relative; top:-3px; display:inline-block; padding-left:8px; vertical-align:top; } .new .precautionary-wrap .precautionary-ti { margin-bottom:5px; } .new .precautionary-wrap.js-clamppara-wrap ul.precautionary-para li { margin-top:4px } .new .precautionary-wrap.js-clamppara-wrap ul.precautionary-para li:first-of-type { margin-top:0; } .new .precautionary-wrap .precautionary-more .btn-link { color: #4B469C; } .new .reservebenefits-wrap { padding:15px 0 15px; } .new .listgroup-benefitsreserve { padding:20px 0 20px; } .new .detaildescriptionclamp-wrap { padding:20px 0 20px; } /* 사전예약 상세 End : 신버전 */ /* 사전예약 상세 : 공유하기 레이어 팝업 관련 Start */ .sharegroup-wrap { position:fixed; top:20px; right:20px; z-index:110; width: 178px; padding:15px 20px; border:1px solid #ECECEC; background:#ffffff; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; } .sharegroup-wrap .sharegroup-inner { display:block; padding:7px 0; font-size: 15px; line-height: 21px; } /* 사전예약 상세 : 공유하기 레이어 팝업 관련 End */ /* 베타존 Start */ .betazonetop { margin:0 20px 0 25px; padding-top:70px; } .betazonetop .betazonetop-inner { width:100%; display:table; } .betazonetop .betazonetop-text { vertical-align:middle; display:table-cell; } .betazonetop .betazonetop-text strong { font-size:21px; color:#ffffff; line-height:30px; display:block; } .betazonetop .betazonetop-pic { width:150px; vertical-align:middle; display:table-cell; } .betazonetop .betazonetop-pic img { width:100%;} .betazonereward-wrap { margin:0 20px; } .betazonereward-wrap .betazonereward-inner { } .betazonereward-wrap .betazonereward-text { font-size:13px; line-height:20px; overflow:hidden; } .betazonereward-wrap .betazonereward-text p { font-size:13px; color:#9e9ad5; line-height:20px; } .betazonereward-wrap .betazonereward-more { text-align:center; line-height:35px; } .betazonereward-wrap .betazonereward-more .btn-link { padding:0; font-size:14px; color:#8e85fe; line-height:35px; text-align:center; display:block; } .betatester-wrap { margin:0 20px; } .betatester-wrap .betatester-inner { padding:11px 15px 11px 11px; background:#1e1a59; display:block; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; } .betatester-wrap .betatester-content { width:100%; display:table; } .betatester-wrap .betatester-cell { text-align:left; vertical-align:middle; display:table-cell; } .betatester-wrap .betatester-cell.betatester-cell-left { width:68px; } .betatester-wrap .betatester-cell.betatester-cell-right { } .betatester-wrap .betatester-cell .betatester-pic { width:52px; height:58px; display:block; background:url(../common/images/pic/betatester_pic_01.png) no-repeat center center; -ms-background-size:52px 58px; -moz-background-size:52px 58px; -webkit-background-size:52px 58px; background-size:52px 58px; } .betatester-wrap .betatester-cell .betatester-text { display:block; } .betatester-wrap .betatester-cell .betatester-text strong { font-size:14px; color:#ffffff; line-height:18px; display:block; } .betatester-wrap .betatester-cell .betatester-text span { margin-top:3px; font-size:12px; color:#9e9ad5; line-height:15px; display:block; } .betatester-wrap .betatester-cell .betatester-text span em { font-size:12px; color:#9e9ad5; line-height:15px; text-decoration:underline; display:inline; } /* 베타존 End */ /* 출시게임 Start */ .launchtop { margin:0 20px 0 25px; padding-top:70px; } .launchtop .launchtop-inner { width:100%; display:table; } .launchtop .launchtop-text { vertical-align:middle; display:table-cell; } .launchtop .launchtop-text strong { font-size:21px; color:#ffffff; line-height:30px; display:block; } .launchtop .launchtop-pic { width:150px; vertical-align:middle; display:table-cell; } .launchtop .launchtop-pic img { width:100%;} /* 출시게임 End */ /* 구매혜택 Start */ .purchasepic-wrap { margin:0; } .purchasepic-wrap .purchasepic-inner { } .purchasepic-wrap .purchasepic-inner img { width:100%; vertical-align:top; } .purchasedesc-wrap { position:relative; margin:0 20px; } .purchasedesc-wrap .purchasedesc-inner { } .purchasedesc-wrap .purchasedesc-ti { margin-bottom:10px; font-size:18px; color:#000000; line-height:23px; } .purchasedesc-wrap .purchasedesc-date { font-size:15px; color:#2c285e; line-height:22px; } .purchasedesc-wrap .purchasedesc-co { font-size:15px; color:#8c8c8c; line-height:22px; overflow:hidden; } .purchasedesc-wrap .purchasedesc-co .purchasedesc-para { font-size:15px; color:#8c8c8c; line-height:22px; white-space: pre-line;} .purchasedesc-wrap .purchasedesc-more { text-align:center; line-height:35px; } .purchasedesc-wrap .purchasedesc-more .btn-link { padding:0; font-size:14px; line-height:35px; text-align:center; display:block; } /* 구매혜택 End */ /* 즉시당첨 Start */ .winpic-wrap { margin:0; } .winpic-wrap .winpic-inner { } .winpic-wrap .winpic-inner img { width:100%; vertical-align:top; } .participaevent-wrap { position:relative; margin:0 20px; } .participaevent-wrap .participaevent-inner { } .participaevent-wrap .participaevent-ti { margin-bottom:10px; font-size:17px; color:#000000; line-height:22px; } .participaevent-wrap .participaevent-list { margin-bottom:10px; } .participaevent-wrap .participaevent-list ul { } .participaevent-wrap .participaevent-list ul li { position:relative; padding:0 0 0 10px; font-size:13px; color:#929292; line-height:22px; } .participaevent-wrap .participaevent-list ul li:before { position:absolute; content:''; left:0; top:9px; width:4px; height:4px; background:#929292; display:block; -ms-border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; } .participaevent-wrap .participaevent-bar { } .participaevent-wrap .participaevent-bar-wrap { position:relative; width:100%; height:40px; background:#cdcdd6; overflow:hidden; -ms-border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; } .participaevent-wrap .participaevent-bar-line { position:absolute; left:0; top:0; height:100%; background:#272558; } .participaevent-wrap .participaevent-bar-ti { position:absolute; left:20px; top:50%; margin-top:-10px; font-size:13px; color:#ffffff; line-height:20px; display:block; } .participaevent-wrap .participaevent-bar-num { position:absolute; right:25px; top:50%; margin-top:-10px; font-size:13px; color:#ffffff; line-height:20px; display:block; } .participabenefits-wrap { position:relative; margin:0 20px; } .participabenefits-wrap .participabenefits-ti { margin-bottom:15px; font-size:17px; line-height:22px; } .participabenefits-wrap .listgroup-authcheck { margin:0; } .participabenefits-wrap .listgroup-authcheck .formcheckbox .formcheckbox-wrap label span { line-height:20px; } .participabenefits-wrap .listgroup-authcheck .formradiobox .formradiobox-wrap label span { line-height:20px; } .winpic-wrap + .purchasedesc-wrap {margin-top:40px;} .winpic-wrap + .participaevent-wrap {margin-top:40px;} .winpic-wrap + .participabenefits-wrap {margin-top:40px;} .winpic-wrap + .agreeboxset-wrap {margin-top:40px;} .winpic-wrap + .participaevent-wrap {margin-top:40px;} .winpic-wrap + .participabenefits-wrap {margin-top:40px;} .winpic-wrap + .agreeboxset-wrap {margin-top:40px;} .instantlyfooterfixed { position:fixed; left:0; bottom:0; width:100%; z-index:1001; } .instantlyfooterfixed .instantlyfooterfixed-inner { width:100%; max-width:768px; height:100%; margin:0 auto; padding:0 20px; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; /* background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 27%, rgba(255,255,255,1) 100%); background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 27%,rgba(255,255,255,1) 100%); background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 27%,rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); */ } .instantlyfooterfixed .detaildownload-btn { padding-bottom:20px; } .instantlyfooterfixed .detaildownload-btn a { font-size:19px; color:#ffffff; line-height:55px; text-align:center; background-color:#2b295b; display:block; -ms-border-radius:9px; -moz-border-radius:9px; -webkit-border-radius:9px; border-radius:9px; -ms-box-shadow:0 10px 20px 0 rgba(0,0,0,0.2); -moz-box-shadow:0 10px 20px 0 rgba(0,0,0,0.2); -webkit-box-shadow:0 10px 20px 0 rgba(0,0,0,0.2); box-shadow:0 10px 20px 0 rgba(0,0,0,0.2); } .btnarea { text-align:center; } .btnarea a { display:inline-block; font-size:14px; line-height:20px; color:#4B469C; padding:10px 10px; } /* 즉시당첨 End */ /* 친구초대 Start */ .friendwrap { padding-top:70px; background:#70c878; } .friendtoppicstep1-wrap { background:#44bb81; } .friendtoppicstep1-wrap .friendtoppicstep1-inner { } .friendtoppicstep1-wrap .friendtoppicstep1-inner img { width:100%; vertical-align:top; } .friendtoppicstep2-wrap { background:#44bb81; } .friendtoppicstep2-wrap .friendtoppicstep2-inner { } .friendtoppicstep2-wrap .friendtoppicstep2-inner img { width:100%; vertical-align:top; } .friendcode-wrap { position:relative; padding:0 30px; background:#44bb81; } .friendcode-wrap .friendcode-inner { padding:15px 0 15px 0; } .friendcode-wrap .friendcode-co { padding:0 0 10px 0; text-align:center; } .friendcode-wrap .friendcode-ti { font-size:17px; color:#ffffff; line-height:22px; } .friendcode-wrap .friendcode-summary { font-size:15px; color:#ffffff; line-height:22px; } .friendcode-wrap .friendcode-pic { margin-bottom:6px; } .friendcode-wrap .friendcode-thumbnail { position:relative; margin:0 auto; width:76px; height:76px; display:block; } .friendcode-wrap .friendcode-thumbnail .friendcode-thumbnail-app { position:relative; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; display:block; -ms-background-size:100% 100%; -moz-background-size:100% 100%; -webkit-background-size:100% 100%; background-size:100% 100%; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; text-indent: -99999px; } .friendcode-wrap .friendcode-thumbnail .friendcode-thumbnail-app .icon-type-adult-18 {width:14px; height:14px; background-position: -550px -450px;} .friendcode-wrap .friendcode-thumbnail .friendcode-thumbnail-app .icon-type-adult-19 {width:14px; height:14px; background-position: -571px -450px;} .friendcode-wrap .friendcode-thumbnail .friendcode-thumbnail-app:before { position:absolute; content:''; left:0; top:0; width:100%; height:100%; border:1px solid rgba(0,0,0,0.04); -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .friendcode-wrap .friendcode-btn { } .friendcode-wrap .friendcode-link { padding:14px 15px; font-size:17px; color:#ffffff; line-height:22px; text-align:center; background-color:#00875e; display:block; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; -ms-border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; } .friendcode-wrap span.friendcode-link { opacity:0.3; } .friendcode-wrap .friendcode-code { position:relative; padding:11px 89px 11px 15px; width:100%; min-height:50px; background-color:#ffffff; table-layout:fixed; display:none; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; -ms-border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; } .friendcode-wrap .friendcode-code-text { width:100%; vertical-align:middle; display:table-cell; } .friendcode-wrap .friendcode-code-text span { font-size:14px; color:#00824f; line-height:20px; display:block; } .friendcode-wrap .friendcode-code-btn { position:absolute; right:0; top:0; padding:6px; width:80px; height:100%; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .friendcode-wrap .friendcode-code-btn button { width:100%; height:100%; font-size:17px; color:#ffffff; text-align:center; background-color:#00875e; display:block; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; -ms-border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; } .friendcode-wrap .friendcode-btn.open .friendcode-link { display:none; } .friendcode-wrap .friendcode-btn.open .friendcode-code { display:table; } .friendinstall-wrap { position:relative; padding:0 30px 30px 30px; background:#44bb81; } .friendinstall-wrap .friendinstall-inner { width:100%; table-layout:fixed; display:table; } .friendinstall-wrap .friendinstall-cell { vertical-align:middle; display:table-cell; } .friendinstall-wrap .friendinstall-text { font-size:15px; color:#ffffff; line-height:20px; } .friendinstall-wrap .friendinstall-btn { width:170px; } .friendinstall-wrap .friendinstall-btn a { margin:0 0 0 10px; padding:11px 0 12px 0; font-size:14px; color:#ffffff; text-align:center;line-height:22px; background:#00875e; display:block; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; -ms-border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; } .friendcode-code.copynot {padding-right:15px;} .friendcode-code.copynot .friendcode-code-btn {display: none;} /* 친구초대 End */ /* 앱 호출 시나리오 Start */ .notusedfixed-wrap { position:fixed; left:0; bottom:0; width:100%; z-index:1001; display:block; } .notusedfixed-wrap.open { display:table; } .notusedfixed-wrap .notusedfixed-inner { width:100%; max-width:768px; margin:0 auto; padding:0; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .notusedfixed-wrap .notusedfixed-co { /* padding:0 5px 0 5px; background:#2c285e; -ms-border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; */ } .notusedfixed-appopen {} .notusedfixed-appopen .notusedfixed-appopen-summary { margin:0 20px; padding:13px 10px; font-size:14px; color:#ffffff; line-height:20px; text-align:center; display:none; opacity:0; background-color:rgba(53, 53, 53, 0.95); -ms-border-radius: 10px; -moz-border-radius: 10px; -mebkit-border-radius: 10px; border-radius: 10px; -ms-transform:translate3d(0,10px,0); -moz-transform:translate3d(0,10px,0); -webkit-transform:translate3d(0,10px,0); transform:translate3d(0,10px,0); -ms-transition:all 0.2s linear 0.3s; -moz-transition:all 0.2s linear 0.3s; -webkit-transition:all 0.2s linear 0.3s; transition:all 0.2s linear 0.3s; } .notusedfixed-appopen .notusedfixed-appopen-summary i { position:relative; top:-1px; padding-right: 7px; } .notusedfixed-appopen .notusedfixed-appopen-btn { position:relative; width:100%; /* margin:10px 0 0; */ padding:0 20px 20px 20px; z-index:1; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .notusedfixed-appopen .notusedfixed-appopen-btn ul { position:relative; width:100%; background-color:#2c285e; display:table; -ms-border-radius: 10px; -moz-border-radius: 10px; -mebkit-border-radius: 10px; border-radius: 10px; -ms-box-shadow: 0 10px 20px 0 rgba(0,0,0,0.2); -moz-box-shadow: 0 10px 20px 0 rgba(0,0,0,0.2); -webkit-box-shadow: 0 10px 20px 0 rgba(0,0,0,0.2); box-shadow: 0 10px 20px 0 rgba(0,0,0,0.2); } .notusedfixed-appopen .notusedfixed-appopen-btn ul:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.2); -ms-border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; } .notusedfixed-appopen .notusedfixed-appopen-btn ul li { width: 50%; text-align:center; display:table-cell; } .notusedfixed-appopen .notusedfixed-appopen-btn ul li:only-child { width: 100%; } .notusedfixed-appopen .notusedfixed-appopen-btn ul li a { position:relative; padding:15px 5px 15px 5px; font-size:16px; color:#ffffff; line-height:25px; display:block; z-index: 21; } .notusedfixed-appopen .notusedfixed-appopen-btn ul li a:before { position:absolute; content:''; left:0; top:50%; margin-top:-8px; width:1px; height:15px; background:rgba(255,255,255,0.3); display:block; } .notusedfixed-appopen .notusedfixed-appopen-btn ul li:first-of-type a:before { display:none; } .notusedfixed-appopen .notusedfixed-appopen-summary.toast { opacity:1; transform:translate3d(0,0,0); } .notusedfixed-pcno {} .notusedfixed-pcno .notusedfixed-pcno-summary { margin:0 20px; padding:13px 0; font-size:13px; color:#ffffff; line-height:19px; text-align:center; display:none; opacity:0; background-color:#3f3f3f; -ms-border-radius: 10px; -moz-border-radius: 10px; -mebkit-border-radius: 10px; border-radius: 10px; -ms-transform:translate3d(0,10px,0); -moz-transform:translate3d(0,10px,0); -webkit-transform:translate3d(0,10px,0); transform:translate3d(0,10px,0); -ms-transition:all 0.2s linear 0.3s; -moz-transition:all 0.2s linear 0.3s; -webkit-transition:all 0.2s linear 0.3s; transition:all 0.2s linear 0.3s; } .notusedfixed-pcno .notusedfixed-pcno-btn { position:relative; width:100%; margin:10px 0 0; padding:0 20px 20px 20px; z-index:1; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .notusedfixed-pcno .notusedfixed-pcno-btn ul { width:100%; table-layout:fixed; background-color:#2c285e; display:table; -ms-border-radius: 10px; -moz-border-radius: 10px; -mebkit-border-radius: 10px; border-radius: 10px; -ms-box-shadow: 0 10px 20px 0 rgba(0,0,0,0.2); -moz-box-shadow: 0 10px 20px 0 rgba(0,0,0,0.2); -webkit-box-shadow: 0 10px 20px 0 rgba(0,0,0,0.2); box-shadow: 0 10px 20px 0 rgba(0,0,0,0.2); } .notusedfixed-pcno .notusedfixed-pcno-btn ul li { text-align:center; display:table-cell; } .notusedfixed-pcno .notusedfixed-pcno-btn ul li a { position:relative; padding:15px 5px 15px 5px; font-size:17px; color:#ffffff; line-height:25px; display:block; } .notusedfixed-pcno .notusedfixed-pcno-btn ul li a:before { position:absolute; content:''; left:0; top:50%; margin-top:-12px; width:1px; height:23px; background:rgba(255,255,255,0.4); display:block; } .notusedfixed-pcno .notusedfixed-pcno-btn ul li:first-of-type a:before { display:none; } .notusedfixed-pcno .notusedfixed-pcno-btn ul li button { position:relative; width:100%; padding:15px 5px 15px 5px; font-size:16px; color:#ffffff; line-height:25px; background-color:transparent; border-width:0; outline-width:0; display:block; } .notusedfixed-pcno .notusedfixed-pcno-btn ul li button:before { position:absolute; content:''; left:0; top:50%; margin-top:-12px; width:1px; height:23px; background:rgba(255,255,255,0.4); display:block; } .notusedfixed-pcno .notusedfixed-pcno-btn ul li:first-of-type button:before { display:none; } .notusedfixed-pcno .notusedfixed-pcno-summary.toast { opacity:1; transform:translate3d(0,0,0); } /* 앱 호출 시나리오 End */ /* 원스토어 포인트, 원스토어 캐쉬 Start */ .cashtable-wrap { margin:0 20px; } .cashtable-wrap .cashtable-title {} .cashtable-wrap .cashtable-title h2 {font-size:15px; line-height: 22px;} .cashtable-sort-wrap { margin:0 20px; } .cashtable-sort-wrap .cashtable-sort-inner { position: relative; } .cashtable-sort-wrap .cashtable-sort-inner .layout-list-sort-date { position: relative; } .cashtable-sort-wrap .cashtable-sort-inner .layout-list-sort-date .layout-list-sort-date-table { width:100%; table-layout:fixed; display:table; } .cashtable-sort-wrap .cashtable-sort-inner .layout-list-sort-date .layout-list-sort-date-cell { text-align:right; display:table-cell; } .cashtable-sort-wrap .cashtable-sort-inner .layout-list-sort-date p { font-size:14px; line-height:20px; color:#000000; padding:7px 0 7px 0; line-height:26px;letter-spacing:0; } .cashtable-sort-wrap .cashtable-sort-inner .layout-list-sort-date .btn-date { font-size:14px; line-height:20px; color:#3e3877; line-height:40px; display:inline-block; } .cashtable-sort-wrap .cashtable-sort-inner .layout-list-sort-select { display:none; position:relative; margin-top: 4px; } .cashtable-sort-wrap .cashtable-sort-inner .layout-list-sort-select .layout-list-sort-select-table { } .cashtable-sort-wrap .cashtable-sort-inner .layout-list-sort-select .layout-list-sort-select-cell { } .cashtable-sort-wrap .cashtable-sort-inner .layout-list-sort-select .layout-list-sort-select-cell-btn { width:100%; text-align:center; padding:20px 0 5px; } .cashtable-sort-wrap .cashtable-sort-inner .layout-list-sort-select .layout-list-sort-select-cell-btn .btn-sm { min-width: 112px; } .cashtable-sort-wrap .cashtable-sort-inner .layout-list-sort-select .formselectbox { margin:0; } .cashtable-sort-wrap .cashtable-sort-inner .layout-list-sort-select .formselectbox-wrap { display: table; width: 100%; table-layout: fixed; } .cashtable-sort-wrap .cashtable-sort-inner .layout-list-sort-select .formselectbox-col { position:relative; display: table-cell; width: 30.625%; float: left; } .cashtable-sort-wrap .cashtable-sort-inner .layout-list-sort-select .formselectbox-wrap > div:nth-child(2){ margin:0 4.0625%; } .cashtable-sort-wrap .cashtable-sort-inner .layout-list-sort-select .formselectbox-col:before {position: absolute; content: '';left: 0;bottom: 0;width: 1px;height: 8px;background: #cccccc; display: block;} .cashtable-sort-wrap .cashtable-sort-inner .layout-list-sort-select .formselectbox-col:after {position: absolute; content: '';right: 0;bottom: 0;width: 1px;height: 8px;background: #cccccc; display: block;} .cashtable-sort-wrap .cashtable-sort-inner .layout-list-sort-select .formselectbox-col .formselectbox-inner select { -moz-appearance: none;-webkit-appearance: none;appearance: none; width: 100%; padding:0 29px 0 12px; font-size: inherit; color: #000000; outline: 0; background-color: transparent; margin: 0;border-top:0;border-left:0;border-right:0; border-bottom: 1px solid #cccccc; font-size: 14px; height: 32px; line-height: 32px; display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; letter-spacing: 0px; } .cashtable-sort-wrap .formselectbox .formselectbox-col.focus select { border-color: #2d297a !important; } .cashtable-sort-wrap .cashtable-sort-inner .layout-list-sort-select .formselectbox-col.focus:before { background-color: #2d297a; } .cashtable-sort-wrap .cashtable-sort-inner .layout-list-sort-select .formselectbox-col.focus:after { background-color: #2d297a; } .cashtable-sort-wrap .formselectbox .formselectbox-col select::-ms-expand { display: none; } .cashtable-sort-wrap .cashtable-sort-inner .layout-list-sort-select .formselectbox-col .btn-popup-open { display: inline-block;} .cashtable-sort-wrap .cashtable-sort-inner .layout-list-sort-select .formselectbox-col .form-select-control { width: 100%;font-size: 15px;color: #000000;height: 40px;line-height: 40px; letter-spacing: 0; border-width: 0; border-bottom: 1px solid #cccccc; outline-width: 0; background-color: transparent; display: block; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .cashtable-sort-wrap .cashtable-sort-inner em {display: block; text-align: center; width: 100%; margin:10px 0 0; line-height: 14px;} .cashtable-sort-wrap .cashtable-sort-inner em .icon-dash { color:#000000; font-size: 16px; line-height: 14px;} .cashtable-sort-wrap .cashtable-sort-inner .layout-list-sort-select .btn-date { font-size:14px; line-height:40px; color:#3e3877; width:30px; } .mypagecash-list-tab-co {} .mypagecash-list-tab-co ul { position: relative; width: 100%;padding:0 20px; border-bottom: 1px solid #ececec;-ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;} .mypagecash-list-tab-co ul .list-item-menu{ width: 50%; float:left; line-height: 40px; text-align: center;} .mypagecash-list-tab-co ul .list-item-menu a {display: inline-block; width: 100%; line-height: 40px; font-size:15px; color:#8c8c8c;} .mypagecash-list-tab-co ul .list-item-menu a.selected {color:#0f0c3f;} .mypagecash-list-tab-co ul .list-item-menu a.selected span {position: relative; display: inline-block} .mypagecash-list-tab-co ul .list-item-menu a.selected span:before{ position: absolute; content: '';left: -14px;bottom: -1px;width: 58px;height: 3px; background: #272558; display: block; -ms-border-top-right-radius: 17.5px; -moz-border-top-right-radius: 17.5px; -webkit-border-top-right-radius: 17.5px; border-top-right-radius: 17.5px; -ms-border-top-left-radius: 17.5px; -moz-border-top-left-radius: 17.5px; -webkit-border-top-left-radius: 17.5px; border-top-left-radius: 17.5px; } /* 마이페이지 구버전 START */ .mypagecash-list-wrap-co .mypagecash-list-co { margin:0 20px 0; } .mypagecash-list-wrap-co .mypagecash-list-co .mypagecash-wrap { margin:0; } .mypagecash-list-wrap-co .mypagecash-list-co .cashtable-sort-wrap { margin:0; } .mypagecash-list-wrap-co .mypagecash-list-co .cashtable-sort-wrap .cashtable-title span { font-size:16px; line-height: 22px; } .mypagecash-list-wrap-co .mypagecash-list-co .mypagecash-inner { width: 100%; padding:6px 20px 8px 0; background-color:#1f1d35; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -ms-border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; -ms-box-shadow: 0 4px 8px rgba(0,0,0,0.1); -moz-box-shadow: 0 4px 8px rgba(0,0,0,0.1); -webkit-box-shadow: 0 4px 8px rgba(0,0,0,0.1); box-shadow: 0 4px 8px rgba(0,0,0,0.1); } .mypagecash-list-wrap-co .mypagecash-list-co .mypagecash-inner dl { display: table; table-layout: fixed; width: 100%; } .mypagecash-list-wrap-co .mypagecash-list-co .mypagecash-inner dl dt { display: table-cell; width: 39%; min-width:120px; vertical-align: middle;} .mypagecash-list-wrap-co .mypagecash-list-co .mypagecash-inner dl dt .cash-pic { width: 120px; margin: 0 auto; } .mypagecash-list-wrap-co .mypagecash-list-co .mypagecash-inner dl dt .cash-pic.point{ background:url("../../common/images/pic/onestorepoint_icon_01.png") no-repeat 0 0; -ms-background-size:120px 120px; -moz-background-size:120px 120px; -webkit-background-size:120px 120px; background-size:120px 120px; } .mypagecash-list-wrap-co .mypagecash-list-co .mypagecash-inner dl dt .cash-pic.cash{ background:url("../../common/images/pic/onestorecash_icon_01.png") no-repeat 0 0; -ms-background-size:120px 120px; -moz-background-size:120px 120px; -webkit-background-size:120px 120px; background-size:120px 120px; } .mypagecash-list-wrap-co .mypagecash-list-co .mypagecash-inner dl dt .cash-pic img { width: 100%; } .mypagecash-list-wrap-co .mypagecash-list-co .mypagecash-inner dl dt .thum-pic img { width: 100%; } .mypagecash-list-wrap-co .mypagecash-list-co .mypagecash-inner dl dd { display: table-cell; vertical-align: middle; padding:0;} .mypagecash-list-wrap-co .mypagecash-list-co .mypagecash-inner dl dd .cash-possible-price { text-align: center; font-size: 25px; line-height: 23px; color:#ffffff; } .mypagecash-list-wrap-co .mypagecash-list-co .mypagecash-inner dl dd .cash-possible-price em { vertical-align: middle; letter-spacing: 0; } .mypagecash-list-wrap-co .mypagecash-list-co .mypagecash-inner dl dd .cash-demise { font-size:11px; line-height:16px; color:#ff3543; text-align: center; padding-top:6px; font-weight: bold;} .mypagecash-list-wrap-co .mypagecash-list-co .mypagecash-inner dl dd .cash-demise em { letter-spacing: 0; } .mypagecash-list-wrap-co .mypagecash-list-co .mypagecash-inner dl dd .cash-summary { font-size:10px; line-height:15px; color:#9b99b7; margin-top: 0; padding-top: 9px; border-top:0; text-align: center; } .mypagecash-list-wrap-co .mypagecash-list-co .mypagecash-inner dl dd .cash-summary em { letter-spacing: 0; } .mypagecash-list-wrap-co.cash-list-wrap-co .mypagecash-list-co { margin:0 20px; } .mypagecash-list-wrap-co.cash-list-wrap-co .mypagecash-list-co .mypagecash-tab-list { display: block !important; } .mypagecash-list-wrap-co.cash-list-wrap-co .mypagecash-list-inner > .mypagecash-list-co { margin:0; } .mypagecash-list-wrap-co.referral-history .purchasenoitem-text{text-align:center; padding-top: 20px; font-size: 16px; color: #000000; line-height: 22px;} .mypagecash-list-wrap-co.referral-history .layout-table-full-cell{padding:127px 0px;} /* 마이페이지 구버전 END */ /* 마이페이지 신버전*/ .mypagecash-list-wrap-co-n .mypagecash-list-co { margin:0 20px 0; } .mypagecash-list-wrap-co-n .mypagecash-list-co .mypagecash-wrap { margin:0; } .mypagecash-list-wrap-co-n .mypagecash-list-co .cashtable-sort-wrap { margin:0; } .mypagecash-list-wrap-co-n .mypagecash-list-co .cashtable-sort-wrap .cashtable-title span { font-size:16px; line-height: 22px; } .mypagecash-list-wrap-co-n .mypagecash-list-co .mypagecash-inner { width: 100%; padding:20px; background-color:#181438; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -ms-border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; -ms-box-shadow: 0 4px 8px rgba(0,0,0,0.1); -moz-box-shadow: 0 4px 8px rgba(0,0,0,0.1); -webkit-box-shadow: 0 4px 8px rgba(0,0,0,0.1); box-shadow: 0 4px 8px rgba(0,0,0,0.1); } .mypagecash-list-wrap-co-n .mypagecash-list-co .mypagecash-inner dl { display: table; table-layout: fixed; width: 100%; } .mypagecash-list-wrap-co-n .mypagecash-list-co .mypagecash-inner dl dt { display: table-cell; vertical-align: middle; padding:0 0 0 4px;} .mypagecash-list-wrap-co-n .mypagecash-list-co .mypagecash-inner dl dt .cash-possible-price { text-align: left; font-size:23px; line-height:30px; color:#ffffff; font-weight:bold; display: flex; } .mypagecash-list-wrap-co-n .mypagecash-list-co .mypagecash-inner dl dt .cash-possible-price em { vertical-align: middle; letter-spacing: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-wrap: break-word; display: block; } .mypagecash-list-wrap-co-n .mypagecash-list-co .mypagecash-inner dl dt .cash-demise { font-size:12px; line-height:16px; color:#F3F4FC; text-align: left; padding-top:4px; } .mypagecash-list-wrap-co-n .mypagecash-list-co .mypagecash-inner dl dt .cash-demise em { letter-spacing: 0; } .mypagecash-list-wrap-co-n .mypagecash-list-co .mypagecash-inner dl dd { display: table-cell; width: 70px; min-width:70px; padding-left:10px; vertical-align: top;} .mypagecash-list-wrap-co-n .mypagecash-list-co .mypagecash-inner dl dd .cash-pic { width: 70px; margin: 0 auto; } .mypagecash-list-wrap-co-n .mypagecash-list-co .mypagecash-inner dl dd .cash-pic.point{ background:url("../../common/images/pic/onestorepoint_icon_01.png") no-repeat 0 0; -ms-background-size:70px 70px; -moz-background-size:70px 70px; -webkit-background-size:70px 70px; background-size:70px 70px; } .mypagecash-list-wrap-co-n .mypagecash-list-co .mypagecash-inner dl dd .cash-pic img { width: 100%; } .mypagecash-list-wrap-co-n .mypagecash-list-co .mypagecash-inner dl dd .thum-pic img { width: 100%; } .mypagecash-list-wrap-co-n .mypagecash-list-co .mypagecash-inner .cash-summary { font-size:10px; line-height:15px; color:rgba(194, 192, 216, 0.8); margin-top: 18px; padding: 18px 4px 0; border-top:1px solid rgba(255,255,255,0.1); text-align: left; } .mypagecash-list-wrap-co-n .mypagecash-list-co .mypagecash-inner .cash-summary em { letter-spacing: 0; } .mypagecash-list-wrap-co-n .mypagecash-list-co .mypagecash-inner .report-wrap + .cash-summary { border-top:0; margin-top: 0;} .mypagecash-list-wrap-co-n.cash-list-wrap-co .mypagecash-list-co { margin:0 20px; } .mypagecash-list-wrap-co-n.cash-list-wrap-co .mypagecash-list-co .mypagecash-tab-list { display: block !important; } .mypagecash-list-wrap-co-n.cash-list-wrap-co .mypagecash-list-inner > .mypagecash-list-co { margin:0; } .mypagecash-list-wrap-co-n.referral-history .purchasenoitem-text{text-align:center; padding-top: 20px; font-size: 16px; color: #000000; line-height: 22px;} .mypagecash-list-wrap-co-n.referral-history .layout-table-full-cell{padding:127px 0px;} .mypagecash-list-wrap-co-n .cashtable-sort-wrap .cashtable-sort-inner .layout-list-sort-date .btn-date { position:relative; padding-right:30px; font-size:14px; color:#000000; line-height:30px; display:inline-block; vertical-align:top; margin-bottom:12.5px; margin-top:7.5px; } .mypagecash-list-wrap-co-n.referral-history .cashtable-sort-wrap .cashtable-sort-inner .layout-list-sort-date .btn-date{ margin-bottom:17.5px; } .mypagecash-list-wrap-co-n .cashtable-sort-wrap .cashtable-sort-inner .layout-list-sort-date .btn-date .icon-select-bullet-1{ position:absolute; top:50%; right:0px; -ms-transform: translate3d(0,-50%,0); -moz-transform: translate3d(0,-50%,0); -webkit-transform: translate3d(0,-50%,0); transform: translate3d(0,-50%,0); } .mypagecash-list-wrap-co-n .formselectbox.ty2 { margin:0; } .mypagecash-list-wrap-co-n .formselectbox.ty2 .formselectbox-inner { position:relative; display:flex; } .mypagecash-list-wrap-co-n .formselectbox.ty2 .formselectbox-col select { position:relative; border: none; padding:0; width: auto; height: 40px; line-height: 40px; font-size: 17px; } .mypagecash-list-wrap-co-n .formselectbox.ty2 .formselectbox-col:before , .mypagecash-list-wrap-co-n .formselectbox.ty2 .formselectbox-col:after , .mypagecash-list-wrap-co-n .formselectbox.ty2 .formselectbox-inner:after { display: none; } .mypagecash-list-wrap-co-n .formselectbox.ty2 .formselectbox-inner i { position:relative; top:5px; left:0; display:inline-block; width: 30px; height: 30px; background-position: -120px -500px; } .mypagecash-list-wrap-co-n .layout-date-select { padding:10px 0 0px; text-align:center; } .mypagecash-list-wrap-co-n .layout-date-select .layout-date-select-table { display:table; width:100%; table-layout:fixed; } .mypagecash-list-wrap-co-n .layout-date-select .layout-date-select-cell { position:relative; border-bottom:1px solid #CCCCCC; display:inline-block; display: table-cell; text-align: left; overflow: hidden;} .mypagecash-list-wrap-co-n .layout-date-select span { display: table-cell; width: 22px; text-align: center; font-size: 16px; color: #8C8C8C; } .mypagecash-list-wrap-co-n .layout-date-select .layout-date-select-cell:before {position: absolute; content: '';left: 0;bottom: 0;width: 1px;height: 8px;background: #cccccc; display: block; z-index: 109;} .mypagecash-list-wrap-co-n .layout-date-select .layout-date-select-cell:after {position: absolute; content: '';right: 0;bottom: 0;width: 1px;height: 8px;background: #cccccc; display: block; z-index: 109;} .mypagecash-list-wrap-co-n .layout-date-select input.date-input { position: relative; width: 100%; height: 32px; padding:0 8px 0 8px; outline: 0; background: #ffffff url(../../en/images/icon/icon_calendar_24.png) no-repeat right 8px center / 15px auto; border:none; z-index: 1000; color:#000000; font-size:14px; z-index: 10; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .mypagecash-list-wrap-co-n .layout-date-select input.date-input::-webkit-clear-button , .mypagecash-list-wrap-co-n .layout-date-select input.date-input::-webkit-inner-spin-button{ display: none; -webkit-appearance: none; margin: 0; } .mypagecash-list-wrap-co-n .layout-date-select input.date-input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; left: 0; top:0; width: 100%; height: 100%; background: transparent; color: transparent; cursor: pointer; } .mypagecash-list-wrap-co-n .layout-date-select input.date-input[type="date"]::before { content: attr(data-placeholder); width: 100%; } .mypagecash-list-wrap-co-n .layout-date-select input.date-input[type="date"]:valid::before { display: none; } .mypagecash-list-wrap-co-n .layout-date-select input.date-input[data-placeholder]::before { color:#000000; font-size:14px; } .mypagecash-list-wrap-co-n .layout-date-select input.date-input[type="date"]::after { content: ''; width: 10px; height: 30px; background: #ffffff; position: absolute; top: 50%; right: 2px; margin-top: -15px; } .mypagecash-list-wrap-co-n .layout-date-select .btn-trans { font-size: 14px; line-height: 20px; padding: 6.5px 32px; min-width: unset; text-align: center; border: 1px solid #acaac4; margin:15px 0; } .mypagecash-list-wrap-co-n.referral-history .layout-date-select .btn-trans{ margin-bottom:20px; } .mypagecash-list-wrap-co-n .mypagelist-tab-wrap { position:relative; overflow:hidden; padding:0 20px; } .mypagecash-list-wrap-co-n .mypagelist-tab-wrap .swiper-container { padding:0 0 0 0; overflow:visible; } .mypagecash-list-wrap-co-n .mypagelist-tab-wrap .swiper-slide { position:relative; width:auto; } .mypagecash-list-wrap-co-n .mypagelist-tab-wrap .swiper-slide a.btn { margin:0 0 0 8px; font-size:14px; line-height:33px; height:35px; min-width:1px; padding:0 18px; color:#000000; background:transparent; text-align:center; display:block; border: 1px solid #E1E1E1; } .mypagecash-list-wrap-co-n .mypagelist-tab-wrap .swiper-slide a.btn.selected { color:#ffffff; background:#272558; border-color:#272558; } .mypagecash-list-wrap-co-n .mypagelist-tab-wrap .swiper-slide:first-of-type { width:auto; } .mypagecash-list-wrap-co-n .mypagelist-tab-wrap .swiper-slide:first-of-type a { margin-left:0; } .mypagecash-list-wrap-co-n .mypagelist-tab-wrap .mypagelist-tab-swiper .swiper-slide { width:auto; } .mypagecash-list-wrap-co-n .mypagelist-tab-wrap .mypagelist-tab-swiper .swiper-slide:first-of-type { width:auto; } .mypagecash-list-wrap-co-n .date-select-result-wrap { padding:5px 20px; margin:30px 0 15px; display: none; } .mypagecash-list-wrap-co-n .date-select-result-wrap a { display: block; font-size:17px; line-height:30px; color:#000000; } .mypagecash-list-wrap-co-n .date-select-result-wrap a i { vertical-align:top; } .mypagecash-list-wrap-co-n .info-btn { display: block; padding:7px 0 0 6px; } .mypagecash-list-wrap-co-n .info-btn i { vertical-align:top; } /* 마이페이지 신버전 END */ .cash-list-wrap-detail-co {} .cash-list-wrap-detail-co .mypagecash-list-co .mypagecash-inner { padding:22px 15px 24px 0; } .cash-list-wrap-detail-co .mypagecash-list-co .mypagecash-inner dl dt { width:42%; } .cash-list-wrap-detail-co .mypagecash-list-co .mypagecash-inner dl dt .thum-pic-wrap { position:relative; width: 70px; height:70px; margin: 0 auto; display: block; } .cash-list-wrap-detail-co .mypagecash-list-co .mypagecash-inner dl dt .thum-pic-wrap .thum-pic { position:relative; width:70px; height:70px; background-repeat:no-repeat; background-position:center center; display:block; -ms-background-size:100% 100%; -moz-background-size:100% 100%; -webkit-background-size:100% 100%; background-size:100% 100%; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; } .cash-list-wrap-detail-co .mypagecash-list-co .mypagecash-inner dl dt .thum-pic-wrap .thum-pic:before { position:absolute; content:''; left:0; top:0; width:100%; height:100%; border:1px solid rgba(0,0,0,0.04); -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .restri-use-wrap { text-align: center; margin:6px 0 12px; padding:0 0 0 20px; } .restri-use-wrap a { display:inline-block; padding:9px 30px; width:90%; text-align: center; background-color: #312e49; line-height: 16px; -ms-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -ms-box-shadow: 0 4px 8px rgba(0,0,0,0.1); -moz-box-shadow: 0 4px 8px rgba(0,0,0,0.1); -webkit-box-shadow: 0 4px 8px rgba(0,0,0,0.1); box-shadow: 0 4px 8px rgba(0,0,0,0.1); -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .restri-use-wrap a span { display:inline-block; width: 100%; font-size:13px; line-height: 18px; color:#ffffff;} .mypagecash-list-wrap {} .mypagecash-list-wrap .mypagecash-list-inner {} .mypagecash-list-wrap .mypagecash-list-inner .mypagecash-list-co { background-color: #f5f5f7; -ms-border-radius: 12px; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; margin:0; } .mypagecash-list-wrap .mypagecash-list-inner .mypagecash-list-co ul { position: relative; width: 100%;padding:5px; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .mypagecash-list-wrap .mypagecash-list-inner .mypagecash-list-co ul .list-item-menu{ width: 50%; float:left; line-height: 35px; text-align: center;} .mypagecash-list-wrap .mypagecash-list-inner .mypagecash-list-co ul .list-item-menu a { display: inline-block; width: 100%; line-height: 35px; font-size:14px; color:#000000; width: 100%; -ms-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } .mypagecash-list-wrap .mypagecash-list-inner .mypagecash-list-co ul .list-item-menu a.selected { color:#ffffff; background-color: #272558; } .mypagecash-list-wrap .mypagecash-list-inner .mypagecash-list-co ul .list-item-menu a.selected span { position: relative; display: inline-block; } .mypagecash-list-wrap .mypagecash-list-inner .mypagecash-list {margin:10px 0 0;} .mypagecash-list-wrap .mypagecash-list-inner .mypagecash-list .list-item-area {display: none;} .mypagecash-list-wrap .mypagecash-list-inner .mypagecash-list .list-item-area.open {display: block;} .mypagecash-list-wrap .mypagecash-list-inner .mypagecash-list .list-item-area table { border-collapse: collapse; empty-cells: show;table-layout: fixed; } .mypagecash-list-wrap .mypagecash-list-inner .mypagecash-list .list-item-area table thead {} .mypagecash-list-wrap .mypagecash-list-inner .mypagecash-list .list-item-area table thead th { border-bottom: 1px solid #f7f7f8; } .mypagecash-list-wrap .mypagecash-list-inner .mypagecash-list .list-item-area table thead th:first-child { -ms-border-top-left-radius: 10px; -moz-border-top-left-radius: 10px; -webkit-border-top-left-radius: 10px; border-top-left-radius: 10px; -ms-border-bottom-left-radius: 10px; -moz-border-bottom-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; border-bottom-left-radius: 10px; } .mypagecash-list-wrap .mypagecash-list-inner .mypagecash-list .list-item-area table thead th:last-child { -ms-border-top-right-radius: 10px; -moz-border-top-right-radius: 10px; -webkit-border-top-right-radius: 10px; border-top-right-radius: 10px; -ms-border-bottom-right-radius: 10px; -moz-border-bottom-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; border-bottom-right-radius: 10px; } .mypagecash-list-wrap .mypagecash-list-inner .mypagecash-list .list-item-area table thead th span { padding:12px 5px 12px 5px; display: block; color:#8c8c8c; font-size: 12px; font-weight: normal;} .mypagecash-list-wrap .mypagecash-list-inner .mypagecash-list .list-item-area table tbody tr td { vertical-align: top; border-bottom: 1px solid #f7f7f8;} .mypagecash-list-wrap .mypagecash-list-inner .mypagecash-list .list-item-area table .table-cell { padding:11.5px 5px; line-height: 16px; color:#454545; } .mypagecash-list-wrap .mypagecash-list-inner .mypagecash-list .list-item-area table tr:first-child .table-cell { } .mypagecash-list-wrap .mypagecash-list-inner .mypagecash-list .list-item-area table .table-cell-no .table-cell {padding:42px 8px 42px 8px;} .mypagecash-list-wrap .mypagecash-list-inner .mypagecash-list .list-item-area table .table-cell-center { text-align: center; letter-spacing: 0; font-size: 12px;} .mypagecash-list-wrap .mypagecash-list-inner .mypagecash-list .list-item-area table .table-cell-lg { display: block; text-align: right; font-size: 12px; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; word-wrap: break-word;} .mypagecash-list-wrap .mypagecash-list-inner .mypagecash-list .list-item-area table .table-cell-lg-center{ display: block; text-align: center; font-size: 12px; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; word-wrap: break-word; } .mypagecash-list-wrap .mypagecash-list-inner .mypagecash-list .list-item-area table .table-cell-sm { display: block; text-align: right; color:#4B469C; letter-spacing: 0; font-size: 12px;} .mypagecash-list-wrap .mypagecash-list-inner .mypagecash-list .list-item-area.use table .table-cell-sm { color: #FF3543; } .mypagecash-list-wrap .mypagecash-list-inner .mypagecash-list .list-item-area table colgroup .table-cell-date-w , .mypagecash-list-wrap .mypagecash-list-inner .mypagecash-list .list-item-area table thead .table-cell-date-w { width:90px; } .mypagecash-list-wrap .mypagecash-list-inner .mypagecash-list .list-item-area table colgroup .table-cell-date-w-ty2 , .mypagecash-list-wrap .mypagecash-list-inner .mypagecash-list .list-item-area table thead .table-cell-date-w-ty2 { width:90px; } .mypagecash-tab-list .landinglistgroup-wrap .landinglistgroup-list { padding-bottom: 0; } .mypagecash-tab-list .landingcard-item .landingcard-link { padding:0; } .mypagecash-tab-list .landingcard-item .landingcard-link .landingcard-co-title { font-size:15px; line-height: 21px; } .mypagecash-tab-list .landingcard-item .landingcard-link .landingcard-co-seller { font-size:11px; line-height:16px; color:#ff3543; font-weight: bold; } .mypagecash-tab-list .landingcard-item .landingcard-link .landingcard-co-payment { font-size:11px; line-height:16px; color:#454545; } .mypagecash-tab-list .landingcard-item .landingcard-link .landingcard-co-payment span , .mypagecash-tab-list .landingcard-item .landingcard-link .landingcard-co-payment em { font-size:11px; line-height:16px; color:#454545; } .mypagecash-tab-list .landingcard-cell.landingcard-cell-btn { width:82px; text-align: right; } .mypagecash-tab-list .landingcard-cell.landingcard-cell-btn .landingcard-cell-btn-co { width: 72px; border:1px solid #acaac4; line-height: 30px; display: inline-block; text-align: center; -ms-border-radius: 22.5px; -moz-border-radius: 22.5px; -webkit-border-radius: 22.5px; border-radius: 22.5px; } .mypagecash-tab-list .landingcard-cell.landingcard-cell-btn .landingcard-cell-btn-co span {font-size:13px; line-height: 30px; color:#3e3877;} .mypagecash-tab-list .layout-table-full { padding:0; } .mypagecash-list-wrap-co-n.referral-history .mypagecash-tab-list .layout-table-full .layout-table-full-cell { padding:145px 10px; } .mypagecashnoitem-wrap .headerill-pic { margin:0 20px; } .mypagecashnoitem-wrap .headerill-pic .headerill-pic-co { position:relative; text-align:center; } .mypagecashnoitem-wrap .headerill-pic .headerill-pic-co img { vertical-align:top; height:120px; } .mypagecashnoitem-wrap { } .mypagecashnoitem-wrap .mypagecashnoitem-co { text-align:center; } .mypagecashnoitem-wrap .mypagecashnoitem-text { padding-top:20px; font-size:16px; color:#000000; line-height:22px; } .mypagecashnoitem-wrap .mypagecashnoitem-summary { padding-top:6px; font-size:13px; color:#454545; line-height:19px; } .mypagecashnoitem-wrap .btn-light { border-color:#e1e1e1; font-size:13px; line-height: 20px; color:#000000; padding:4px 16px 4px 16px;} /* 원스토어 포인트, 원스토어 캐쉬 End */ /* 원스토어 포인트, 원스토어 캐쉬 (다국어 대응) Start */ .list-table-wrap { } .list-table-wrap .list-table { display:table; width:100%; table-layout:fixed; padding:16px 4px; border-bottom: 1px solid #ECECEC; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .list-table-wrap .list-table .list-table-cell { display:table-cell; } .list-table-wrap .list-table .list-table-cell.right { vertical-align:middle; text-align:right; width:90px; padding-left: 15px;} .list-table-wrap .list-table .list-table-cell .list-table-date { display:block; font-size:13px; line-height:19px; color:#585858; } .list-table-wrap .list-table .list-table-cell .list-table-title { display:block; font-size:14px; line-height:20px; color:#000000; padding-top:4px; white-space: normal; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .list-table-wrap .list-table .list-table-cell .list-table-period { display:block; font-size:12px; line-height:16px; color:#8C8C8C; padding-top:4px; } .list-table-wrap .list-table .list-table-cell .list-table-price { display:block; font-size:15px; line-height:21px; color:#000000; font-weight:bold; } .use .list-table-wrap .list-table .list-table-cell .list-table-price { color:#FF3543; } .mypagecash-list-wrap-co-n .purchasenoitem-text { text-align: center; padding-top: 15px; font-size: 14px; color: #000000; line-height: 20px; } .mypagecash-list-wrap-co-n .mypagecash-tab-list .layout-table-full .layout-table-full-cell { padding:80px 0; } /* 원스토어 포인트, 원스토어 캐쉬 (다국어 대응) End */ /* 원스토어 포인트 내역 리포트 버튼 추가 Start */ .report-wrap{ position:relative; background:#272558; margin:16px 0 0; -ms-border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; padding:10.5px 15px; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .report-wrap .report-info{ padding-right:76px; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .report-wrap .report-info .referral-title { font-size:11px; line-height:16px; color:#C2C0D8; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-wrap: break-word; display: block; } .report-wrap .report-btn{ position: absolute; top:50%; right:15px; -ms-transform: translate3d(0,-50%,0); -moz-transform: translate3d(0,-50%,0); -webkit-transform: translate3d(0,-50%,0); transform: translate3d(0,-50%,0); } .report-wrap .report-btn a{ display:block; border:1px solid rgba(255,255,255,0.6); text-align:center; min-width:66px; padding:6px 7px; font-size:12px; color:#ffffff; line-height:16px; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .report-wrap .referral-point { font-size:14px; line-height:20px; color:#ffffff;font-weight: bold; margin-top: 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-wrap: break-word; display: block; } .report-wrap .referral-point i { vertical-align:top; } /* 원스토어 포인트 내역 리포트 버튼 추가 End */ /* Referral History, report Start */ .referral-report-list-wrap{margin:0 20px 0;} .referral-report-list-wrap .referral-report-inner .referral-report-top{ width: 100%; padding:20px; background-color:#181438; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -ms-border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; -ms-box-shadow: 0 4px 8px rgba(0,0,0,0.1); -moz-box-shadow: 0 4px 8px rgba(0,0,0,0.1); -webkit-box-shadow: 0 4px 8px rgba(0,0,0,0.1); box-shadow: 0 4px 8px rgba(0,0,0,0.1); } .referral-report-list-wrap .referral-report-inner .cash-possible-price {font-size: 23px; line-height: 30px; color:#ffffff; font-weight:bold; } .referral-report-list-wrap .referral-report-inner .cash-possible-price em { vertical-align:middle; letter-spacing: 0; } .referral-report-list-wrap .referral-report-inner .cash-demise { font-size:11px; line-height:18px; color:#ff0038; padding-bottom:4px; } .referral-report-list-wrap .referral-report-inner .cash-demise em { letter-spacing: 0; } .referral-report-list-wrap .referral-report-inner .availble-text{ font-size:11px; line-height:16px; color:#F3F4FC; padding-bottom:4px; } .referral-report-list-wrap .referral-report-inner .referral-report-summary{ font-size:10px; line-height:15px; color:#C2C0D8; margin-top: 0; padding-top:12px; border-top:0; text-align: right; } .referral-report-list-wrap .referral-report-inner .referral-report-wrap{ background:#272558; margin:20px 0px 0px; -ms-border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; padding:15px 15px; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .referral-report-list-wrap .referral-report-inner .referral-report-wrap dl { display: table; table-layout: fixed; width: 100%; } .referral-report-list-wrap .referral-report-inner .referral-report-wrap dl + dl { margin-top:2px; } .referral-report-list-wrap .referral-report-inner .referral-report-wrap dl dt { display: table-cell; width:60%; vertical-align: middle; font-size:11px; line-height:16px; color:#C2C0D8; } .referral-report-list-wrap .referral-report-inner .referral-report-wrap dl dd { display: table-cell; vertical-align:top; padding:0; text-align:right; font-size:11px; line-height:16px; color:#ffffff; font-weight: bold; } .referral-report-list-wrap .referral-report-inner .referral-report-wrap dl dd i{vertical-align:top; } .referral-report-list-wrap .referral-report-inner .chart-title{font-size:15px; line-height:21px; color:#000000; margin:30px 0px 20px;} .referral-report-list-wrap .referral-report-inner .chart-btn{margin-bottom:15px; font-size:0px; letter-spacing:0;;} .referral-report-list-wrap .referral-report-inner .chart-btn button{ font-size:15px; line-height:21px; color:#000000; background:none; border:1px solid #e1e1e1; padding:7px 20px; -ms-border-radius:22.5px; -moz-border-radius:22.5px; -webkit-border-radius:22.5px; border-radius:22.5px; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin-right:8px; } .referral-report-list-wrap .referral-report-inner .chart-btn button.btn-on{background:#272558; border:1px solid #272558; color:#ffffff;} .referral-report-list-wrap .referral-report-inner .chart-canvas-wrap{width:100%; max-width:800px; margin:0 auto; background:#f7f7f8; border-radius:15px; padding:20px; box-sizing: border-box; margin-bottom:16px;} .referral-report-list-wrap .referral-report-inner .chart-canvas-wrap .chart-subtitle{ text-align:center; padding:0px 12px; font-size:11px; color:rgba(53,53,53,0.7); line-height:16px; -ms-border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin-top:16px; } .referral-report-list-wrap .referral-report-inner .chart-history-btn a{ display:block; border:1px solid #acaac4; font-size:16px; line-height:45px; color:#3e3877; text-align:center; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* Referral History, report End */ /* Referral marketing Start */ .code-box-wrap{ background:#f7f7f8; padding:20px; margin:20px; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .code-box-wrap .code-title{font-size:14px; line-height:20px; color:#000000; text-align:center; margin-bottom:20px;} .code-box-wrap .create-btn{ display:block; width:100%; text-align:center; background:#272558; color:#ffffff; font-size:15px; line-height:21px; padding:10px 10px 11px; -ms-border-radius:21px; -moz-border-radius:21px; -webkit-border-radius:21px; border-radius:21px; margin-top:10px; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .code-box-wrap .create-btn.dimmed { opacity: .5;} .code-box-wrap .code-show-box{display:none;} .code-box-wrap .code-show-box .js-btn-clipboard-copy{ display:block; background:none; border:1px solid #acaac4; color:#4b469c; width:100%; text-align:center; font-size:15px; line-height:21px; padding:10px 10px 11px; -ms-border-radius:21px; -moz-border-radius:21px; -webkit-border-radius:21px; border-radius:21px; margin-top:10px; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .code-box-wrap .code-show-box .create-copy-code{ font-size:15px; line-height:21px; color:#3e3877; padding:10px 10px 11px; text-align:center; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .code-box-wrap.open .code-show-box{display:block !important;} .code-box-wrap.copynot .js-btn-clipboard-copy{display:none !important;} .code-box-wrap .listgroup-purchase{margin:0px} .code-box-wrap .listgroup-purchase .listgroup-item{margin-bottom:15px;} .code-box-wrap .listgroup-purchase .listgroup-item .listgroup-item-cell{vertical-align:middle;} .code-box-wrap .listgroup-purchase .listgroup-item-co .listgroup-item-title{line-height:21px;} .code-box-wrap .listgroup-purchase .listgroup-item-cell.listgroup-item-left{ width:85px; } .code-box-wrap .listgroup-purchase .listgroup-item-thumbnail, .code-box-wrap .listgroup-purchase .listgroup-item-thumbnail .listgroup-item-thumbnail-app{ width:70px; height:70px; } /* Referral marketing End */ /* 환급여부 확인 및 환급신청 Start */ .country_title { font-size:15px; line-height: 21px; padding:10px 20px 5px; } .refund-all-wrap + .country_title { padding:0 20px 5px; } .refund-all-wrap { margin:10px 20px 30px 20px; border:1px solid #e1e1e1; -ms-box-sizing: border-box;-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -ms-border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; } .refund-detail-wrap { margin:20px 20px 0; } .refund-detail-wrap + .refund-detail-wrap { margin:15px 20px 0; } .refund-detail-wrap .refund-detail-title { padding:0 0 0 0;} .refund-detail-wrap .refund-detail-title span { font-size: 13px; line-height: 19px; display: block; } .refund-detail-wrap .refund-detail-inner { width: 100%; padding:24px 20px 24px 20px; background-color:#ffffff; } .refund-detail-wrap .refund-detail-inner dl { position:relative; } .refund-detail-wrap .refund-detail-inner dl dt { position:relative; } .refund-detail-wrap .refund-detail-inner .refund-detail-summary { margin-top:23px; padding-top:24px; border-top:1px solid #e1e1e1; color:#8c8c8c;font-size:13px;line-height:20px; } .refund-detail-wrap .refund-detail-inner .refund-detail-summary em {display: block;} .refund-detail-wrap .refund-listgroup-radius { } .refund-detail-wrap .refund-listgroup-radius .refund-listgroup-radius-list { padding:4px 0 0; } .refund-detail-wrap .refund-listgroup-radius .refund-listgroup-radius-list li { position:relative; min-height:19px; } .refund-detail-wrap .refund-listgroup-radius .refund-listgroup-radius-list li em { width:100px; font-size:13px; color:#8c8c8c; line-height:19px; } .refund-detail-wrap .refund-listgroup-radius .refund-listgroup-radius-list li span { font-size:13px; line-height:19px; text-align:right; display:block; letter-spacing: 0;} .refund-detail-wrap .refund-listgroup-radius .refund-listgroup-radius-list .refund-unsatisfy { width: auto; display:inline-block; position:relative; color:#ff3543; padding-right:5px; letter-spacing: 0;} .refund-detail-wrap .refund-listgroup-radius .refund-listgroup-radius-list li.refund-total-amount {margin:15px 0 25px 0; border-top:1px solid rgba(204,204,204,0.49); padding:14px 0 0 0;} .refund-detail-wrap .refund-listgroup-radius .refund-listgroup-radius-list li.refund-total-amount em {top:15px; color:#3e3877;} .refund-detail-wrap .refund-listgroup-radius .refund-listgroup-radius-list li.refund-total-amount .refund-listgroup-cell { color:#3e3877; } .refund-detail-wrap .refund-listgroup-radius .refund-listgroup-radius-list .refund-listgroup-table {width:100%; table-layout: fixed; display:table;} .refund-detail-wrap .refund-listgroup-radius .refund-listgroup-radius-list .refund-listgroup-cell {display: table-cell; word-wrap: break-word; vertical-align: top;} .refund-info-wrap { margin:0 20px; } .refund-info-wrap .refund-info-inner {} .refund-info-wrap .refund-info-inner .refund-info-title {line-height: 19px;} .refund-info-wrap .refund-info-inner .refund-info-title span { font-size:12px; } .refund-info-wrap .refund-info-inner .refund-info-summary { font-size:12px; color:#8c8c8c; line-height: 19px; } .refund-info-wrap.refund-co-info-wrap .refund-info-inner .refund-info-title span { font-size:13px; } .refund-info-wrap.refund-co-info-wrap .refund-info-inner .refund-info-summary { font-size:13px; } .refund-detail-wrap .btngroup { margin-bottom:25px; } .btngroup ul li.dimmed { opacity: .3; } .norefund-wrap { margin:0 20px; } .norefund-wrap .norefund-inner { text-align:center; background-color:#f7f7f8; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px;} .norefund-wrap .norefund-inner .info-decimal {padding: 20px 20px 15px 20px; line-height: 19px;} .norefund-wrap .norefund-inner .info-decimal em { color:#8c8c8c; font-size:12px;} .norefund-wrap .norefund-inner .account-box-btn {padding:0 0 25px 0;} .norefund-wrap .norefund-inner .account-box-btn .btn-light { font-size: 14px; line-height: 20px; padding: 6px 14px 6px 14px; color: #3e3877; border-color: #acaac4; background: #f7f7f8; } .refund-co-wrap {} .refund-co-wrap .refund-co-title { padding:0 20px 15px 20px;} .refund-co-wrap .refund-co-title span {} .refund-co-wrap .formselectbox { margin:0; } .refund-co-wrap .formselectbox .formselectbox-wrap { margin:0 20px; } .refund-co-wrap .forminputbox {margin:12px 20px 0;} .formrefundtel-wrap { position:relative; margin:0 20px; } .formrefundtel-wrap .formrefundtel-ti {margin-bottom: 15px; font-size:15px; color:#000000; line-height: 22px;} .formrefundtel-wrap .formrefundtel-inner { margin:0 5px;} .formrefundtel-wrap .formrefundtel-cell { } .formrefundtel-wrap .formrefundtel-select { width:110px; vertical-align:top; } .formrefundtel-wrap .formrefundtel-input .forminputbox { display:table; width:100%; margin:0;} .formrefundtel-wrap .formrefundtel-input .forminputbox .forminputbox-wrap {display:table-cell;} .formrefundtel-wrap .formrefundtel-input .forminputbox .forminputbox-wrap label { display:none; } .formrefundtel-wrap .formrefundtel-input .forminputbox .forminputbox-wrap.forminputbox-tel-1 .forminputbox-col:after, .formrefundtel-wrap .formrefundtel-input .forminputbox .forminputbox-wrap.forminputbox-tel-2 .forminputbox-col:before, .formrefundtel-wrap .formrefundtel-input .forminputbox .forminputbox-wrap.forminputbox-tel-2 .forminputbox-col:after, .formrefundtel-wrap .formrefundtel-input .forminputbox .forminputbox-wrap.forminputbox-tel-3 .forminputbox-col:before{ display: none; } .formrefundtel-wrap .formrefundtel-input .forminputbox .forminputbox-wrap.forminputbox-tel-1:after, .formrefundtel-wrap .formrefundtel-input .forminputbox .forminputbox-wrap.forminputbox-tel-2:after { position: absolute;content: '';right: -4px;bottom: 20px; width: 10px; height: 1px; background: #cccccc; display: block; } .formrefundtel-wrap .formrefundtel-inner .forminputbox .forminputbox-col input {text-align: center;} .formrefundtel-wrap .formrefundtel-cell .forminputbox .forminputbox-col input.form-input-control { letter-spacing: 1px; } .refund-agree-wrap {} .refund-agree-wrap .listgroup-defaultcheck {margin:0 20px;} .refund-agree-wrap .formcheckbox .formcheckbox-wrap label {padding:0 0 0 42px;} .refund-agree-wrap .formcheckbox .formcheckbox-wrap label span {font-size:15px;} .refund-agree-wrap .formcheckbox .formcheckbox-wrap label .icon-controller-mark {display: none;} .refund-agree-wrap .listgroup-info {padding:10px 0 0;} .refund-agree-wrap .refund-agree-summary { font-size:13px; color:#8c8c8c; margin:0 20px; padding:3px 0 0 0; line-height: 18px;} /* 환급여부 확인 및 환급신청 End */ /* 광고성 정보 수신 동의 Start */ .adagree-push-wrap { margin:0 20px; } .adagree-push-wrap .adagree-push-notice { padding:0 0 20px 0;} .adagree-push-wrap .adagree-push-notice span { line-height: 22px; } .adagree-push-wrap .adagree-push-inner { width: 100%; padding:24px 20px 24px 20px; background-color:#ffffff;border:1px solid #e1e1e1; -ms-box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box; box-sizing: border-box; -ms-border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;} .adagree-push-wrap .adagree-push-inner dl { position:relative; } .adagree-push-wrap .adagree-push-inner dl dt { position:relative; } .adagree-push-wrap .adagree-push-inner dl dt .adagree-push-title { position:absolute; top:50%; left:0; color:#8c8c8c; font-size:15px; line-height: 25px; } .adagree-push-wrap .adagree-push-inner dl dd .adagree-push-date { color:#272558; font-size:15px; text-align: right;line-height: 25px;} .adagree-push-wrap .adagree-push-inner .adagree-push-summary { margin-top:23px; padding-top:24px; border-top:1px solid #e1e1e1; color:#8c8c8c;font-size:13px;line-height:20px; } .adagree-push-wrap .adagree-push-inner .adagree-push-summary em {display: block;} /* 광고성 정보 수신 동의 End */ /* 배송지 입력 Start */ .delivery-landingcard-item { } .delivery-landingcard-item .delivery-landingcard-product { padding:0 20px 25px; display:block; } .delivery-landingcard-item .delivery-landingcard-item-inner { width:100%; table-layout:fixed; display:table; } .delivery-landingcard-item .landingcard-cell { vertical-align:middle; display:table-cell; } .delivery-landingcard-item .landingcard-cell.landingcard-cell-thumbnail { width:100px; } .delivery-landingcard-item .landingcard-cell.landingcard-cell-co { } .delivery-landingcard-item .landingcard-cell .landingcard-cell-thumbnail-app { position:relative; width:80px; height:80px; margin:0 20px 0 0; display:block; background-repeat:no-repeat; background-position:center center; -ms-background-size:100% 100%; -moz-background-size:100% 100%; -webkit-background-size:100% 100%; background-size:100% 100%; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; } .delivery-landingcard-item .landingcard-cell .landingcard-cell-thumbnail-app:before { position:absolute; content:''; left:0; top:0; width:100%; height:100%; border:1px solid rgba(0,0,0,0.04); -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .delivery-landingcard-item .delivery-landingcard-product .landingcard-co-title { margin-bottom:2px; max-height:38px; font-size:15px; color:#000000; line-height:19px; white-space: normal; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; } .delivery-landingcard-item .delivery-landingcard-product .landingcard-co-payment { font-size:12px; color:#454545; line-height:18px; display:block; } .delivery-landingcard-item .delivery-landingcard-product .landingcard-co-payment span { font-size:12px; color:#454545; line-height:18px; display:inline-block; } .delivery-landingcard-item .delivery-landingcard-product .landingcard-co-payment span em { position:relative; padding:0 2px 0 5px; font-size:12px; color:#454545; line-height:18px; display:inline-block; } .delivery-landingcard-item .delivery-landingcard-product .landingcard-co-payment span em:before { position:absolute; content:''; left:0; top:50%; margin-top:-1px; width:2px; height:2px; background:#454545; display:block; -ms-border-radius:1px; -moz-border-radius:1px; -webkit-border-radius:1px; border-radius:1px; } .delivery-landingcard-item .delivery-landingcard-product .landingcard-co-detail-btn { display:block; } .delivery-landingcard-item .delivery-landingcard-product .landingcard-co-detail-btn a {display: inline-block; line-height: 17px;} .delivery-landingcard-item .delivery-landingcard-product .landingcard-co-detail-btn em { font-size:12px; color:#454545; line-height:17px; vertical-align:top; display:inline-block; } .delivery-landingcard-item .delivery-landingcard-product .landingcard-co-detail-btn em:first-of-type { margin-left:0; } .delivery-landingcard-item .delivery-landingcard-product .landingcard-co-detail-btn i {vertical-align: top;} .delivery-landingcard-item.on .landingcard-co-detail-btn .icon-arrow {background-position: -873px -230px;} .delivery-landingcard-item .shopping .landingcard-cell.landingcard-cell-thumbnail { width:130px; } .delivery-landingcard-item .shopping .landingcard-cell .landingcard-cell-thumbnail-app { width:110px; height:110px; } .delivery-landingcard-item .delivery-landingcard-product.shopping .landingcard-co-title { margin-bottom:3px; } .detail-goods-wrap {padding:0 20px 25px; display: none;} .detail-goods-wrap .detail-goods-info {width: 100%; } .detail-goods-wrap .detail-goods-info img {width: 100%; vertical-align: top; } .delivery-forminputbox-wrap {} .delivery-forminputbox-wrap .forminputbox {margin: 12px 25px 0;} .delivery-forminputbox-wrap .forminputbox.delivery-ti-box {margin: 0 25px;} .delivery-forminputbox-wrap .forminputbox-wrap .delivery-ti {margin-bottom:3px;font-size: 16px; line-height: 30px; display: block;} .delivery-forminputbox-wrap .btn-ssm {min-width: 100px;} .delivery-address-forminputbox-wrap .forminputbox.delivery-address-box {} .delivery-address-forminputbox-wrap .forminputbox.delivery-address-box .forminputbox-col input.form-input-control {padding: 0 108px 0 15px;} .delivery-address-forminputbox-wrap .btn.btn-text {position: absolute; top: 0; right: 0; background: transparent; border: 0; min-width: 108px; padding: 0;} .delivery-address-forminputbox-wrap .btn.btn-text span { font-size: 14px; line-height: 43px; color: #3e3877;} .delivery-forminputbox-wrap .formtelbox .forminputbox-wrap label {display: none;} .delivery-forminputbox-wrap .forminputbox.formtelbox .forminputbox-col input.form-input-control {letter-spacing: 1px;} .delivery-agree-wrap {} .delivery-agree-wrap .listgroup-defaultcheck {margin:0 25px;} .delivery-agree-wrap .formcheckbox .formcheckbox-wrap label {padding:0 0 0 42px;} .delivery-agree-wrap .formcheckbox .formcheckbox-wrap label span {font-size:15px;} .delivery-agree-wrap .formcheckbox .formcheckbox-wrap label .icon-controller-mark {display: none;} .delivery-agree-wrap .listgroup-info {padding:10px 0 0;} .delivery-agree-wrap .paragroup {margin:0 25px;} .delivery-agree-wrap .listgroup-defaultcheck input[disabled] + label {opacity: 0.3;} .delivery-bottom-wrap {background-color:#f6f6f6;} .delivery-bottom-wrap .delivery-bottom-co {padding:20px 20px 35px;} .delivery-bottom-wrap .delivery-bottom-co dl dt {margin:0 0 8px;} .delivery-bottom-wrap .delivery-bottom-co dl dt a {display:inline-block;} .delivery-bottom-wrap .delivery-bottom-co dl dt a em {line-height: 22px; display:inline-block;} .delivery-bottom-wrap .delivery-bottom-co dl dt a .icon-arrow {vertical-align: top; top: 2px;} .delivery-bottom-wrap .delivery-bottom-co dl dt a.on .icon-arrow {background-position: -873px -230px;} .delivery-bottom-wrap .delivery-bottom-co dl dd {line-height: 22px; font-size:14px;color:#8c8c8c; display: none;} /* 배송지 입력 End */ /* 최근 배송지 Start */ .delivery-header-info-wrap {margin:0 20px;} .delivery-header-info-wrap .delivery-header-info-co {} .delivery-header-info-wrap .delivery-header-info-co dl dt { font-size:17px; line-height: 24px; margin:0 0 3px; } .delivery-header-info-wrap .delivery-header-info-co dl dd { font-size:14px; line-height: 22px; color:#8c8c8c; } .delivery-form-default-wrap {margin:0 20px;} .delivery-form-default-wrap .form-default-summary {font-size:14px; line-height:24px; margin:0 0 15px; color:#8c8c8c;} .delivery-form-default-wrap .form-default-co {} .delivery-form-default-wrap .form-default-co .form-default-cond { width: 100%; padding: 15px 20px 20px; margin:0 0 15px; background-color: #ffffff; border: 1px solid #e1e1e1; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -ms-border-radius: 15px;-moz-border-radius: 15px;-webkit-border-radius: 15px; border-radius: 15px; } .delivery-form-default-wrap .form-default-co .formradiobox .formradiobox-wrap label {padding:0 0 0 40px;} .delivery-form-default-wrap .form-default-co .formradiobox .formradiobox-wrap label span {font-size:15px; letter-spacing: 0;} .delivery-form-default-wrap .form-default-co .form-default-cond ul { position: relative; margin:15px 0 0;} .delivery-form-default-wrap .form-default-co .form-default-cond ul li { display:table; font-size: 13px; line-height: 20px;} .delivery-form-default-wrap .form-default-co .form-default-cond ul li em { display:table-cell; width:80px; color:#8c8c8c;} .delivery-form-default-wrap .form-default-co .form-default-cond ul li span { display:table-cell; color:#353535;} .deliverynoitem-wrap .headerill-pic { margin:0 20px; } .deliverynoitem-wrap .headerill-pic .headerill-pic-co { position:relative; text-align:center; } .deliverynoitem-wrap .headerill-pic .headerill-pic-co img { vertical-align:top; height:120px; } .deliverynoitem-wrap { } .deliverynoitem-wrap .deliverynoitem-co { text-align:center; } .deliverynoitem-wrap .deliverynoitem-text { padding-top:15px; font-size:16px; color:#000000; line-height:23px; } /* 최근 배송지 End */ /* 주소찾기 Start */ .delivery-post-info-wrap {margin:0 25px;} .delivery-post-info-wrap .delivery-post-info-co dl dt {font-size:13px; line-height: 20px; margin:0 0 3px;} .delivery-post-info-wrap .delivery-post-info-co dl dd .listgroup-info-list li {padding:0 0 0 14px;} .delivery-post-table-wrap {margin:0 20px;} .delivery-post-table-wrap .post-table-inner table { border-collapse: collapse; empty-cells: show;table-layout: fixed; } .delivery-post-table-wrap .post-table-inner table thead {} .delivery-post-table-wrap .post-table-inner table thead th {background: #f7f7f7;} .delivery-post-table-wrap .post-table-inner table thead th:first-child { -ms-border-top-left-radius: 10px; -moz-border-top-left-radius: 10px; -webkit-border-top-left-radius: 10px; border-top-left-radius: 10px; -ms-border-bottom-left-radius: 10px; -moz-border-bottom-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; border-bottom-left-radius: 10px; } .delivery-post-table-wrap .post-table-inner table thead th:last-child { -ms-border-top-right-radius: 10px; -moz-border-top-right-radius: 10px; -webkit-border-top-right-radius: 10px; border-top-right-radius: 10px; -ms-border-bottom-right-radius: 10px; -moz-border-bottom-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; border-bottom-right-radius: 10px; } .delivery-post-table-wrap .post-table-inner table thead th span { padding:12px 8px 12px 8px; display: block; color:#000000; font-size: 12px; font-weight: normal;} .delivery-post-table-wrap .post-table-inner table tbody tr {border-bottom: 1px solid #ececec;} .delivery-post-table-wrap .post-table-inner table tbody tr td {vertical-align: top; } .delivery-post-table-wrap .post-table-inner table .table-cell { padding:10px 5px 10px 5px; line-height: 16px; color:#454545;} .delivery-post-table-wrap .post-table-inner table .table-cell-no .table-cell {padding:42px 8px 42px 8px;} .delivery-post-table-wrap .post-table-inner table .table-cell-center { text-align: center; letter-spacing: 0; font-size: 12px; vertical-align:middle;} .delivery-post-table-wrap .post-table-inner table .table-cell-lg { display: block; text-align: left; font-size: 12px;} .delivery-post-table-wrap .post-table-inner table .table-cell-sm { display: block; text-align: left; color:#8c8c8c; letter-spacing: 0; font-size: 12px;} .delivery-post-table-wrap .post-table-inner table colgroup .table-cell-date-w , .delivery-post-table-wrap .post-table-inner table thead .table-cell-date-w { width:70px; } .delivery-post-table-wrap .table-post-more {margin:5px 0 0;} .delivery-post-table-wrap .table-post-more a { font-size: 14px; color: #3e3877; text-align: center; line-height: 40px; display: block;} /* 주소찾기 End */ /* 배송 정보 Start */ .delivery-complete-wrap {margin:0 20px;}.delivery-post-table-wrap .post-table-inner table tr:first-child .table-cell .delivery-complete-wrap .delivery-complete-co {} .delivery-complete-wrap .delivery-complete-co dl dt { font-size: 17px; margin:12px 0 15px; } .delivery-complete-wrap .delivery-complete-co dl dd { width: 100%; padding: 14px 0; background-color: #ffffff; border: 1px solid #e1e1e1; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -ms-border-radius: 15px; -moz-border-radius: 15px;-webkit-border-radius: 15px; border-radius: 15px; } .delivery-complete-wrap .delivery-complete-co dl dd .delivery-complete-status {display: table; width: 100%;} .delivery-complete-wrap .delivery-complete-co dl dd .delivery-complete-status .delivery-complete-status-co {display:table-cell; padding: 0 0 0 20px;} .delivery-complete-wrap .delivery-complete-co dl dd .delivery-complete-status .delivery-complete-status-co i {display: inline-block; vertical-align: top;} .delivery-complete-wrap .delivery-complete-co dl dd .delivery-complete-status .delivery-complete-status-co em {font-size: 14px; padding:4px 8px 2px 0; min-height: 24px; display: inline-block;} .delivery-complete-wrap .delivery-complete-co dl dd .delivery-complete-status .delivery-complete-status-btn {display:table-cell;width: 52px;vertical-align: middle;} .delivery-complete-wrap .delivery-complete-co dl dd .delivery-complete-status .delivery-complete-status-btn .btn-delivery {font-size: 14px;color: #40367b; padding:0 19px 0 0; text-align: right; width:52px; display: inline-block;} .delivery-complete-wrap .delivery-complete-co dl dd .delivery-complete-status .delivery-complete-status-btn span.btn-delivery {opacity: 0.3;} .delivery-complete-wrap .delivery-complete-co .delivery-complete-status.delivery-complete-status-order-7 .delivery-complete-status-btn {display: none;} .delivery-form-complete-wrap {margin:0 20px;} .delivery-form-complete-wrap .form-complete-summary {font-size:17px; margin:0 0 15px;} .delivery-form-complete-wrap .form-complete-co {} .delivery-form-complete-wrap .form-complete-co .form-complete-cond { width: 100%; padding: 15px 20px 20px; margin:0 0 15px; background-color: #ffffff; border: 1px solid #e1e1e1; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -ms-border-radius: 15px;-moz-border-radius: 15px;-webkit-border-radius: 15px; border-radius: 15px; } .delivery-form-complete-wrap .form-complete-co .formradiobox .formradiobox-wrap label {padding:0 0 0 40px;} .delivery-form-complete-wrap .form-complete-co .formradiobox .formradiobox-wrap label span {font-size:15px; letter-spacing: 0;} .delivery-form-complete-wrap .form-complete-co .form-complete-cond ul { position: relative;} .delivery-form-complete-wrap .form-complete-co .form-complete-cond ul li { display:table; font-size: 13px; line-height: 20px;} .delivery-form-complete-wrap .form-complete-co .form-complete-cond ul li em { display:table-cell; width:80px; color:#8c8c8c;} .delivery-form-complete-wrap .form-complete-co .form-complete-cond ul li span { display:table-cell; color:#353535;} .delivery-form-complete-wrap .delivery-form-complete-info {color:#8c8c8c; font-size:13px; line-height: 18px; margin:0 0 17px;} /* 배송 정보 End */ /* Home - 약관 리스트/ 내 폰에 설치하기/ 내 폰에서 보기 Start */ .terms-list-wrap {margin:0 20px;} .terms-list-wrap .terms-list {} .terms-list-wrap .terms-list li {} .terms-list-wrap .terms-list li a { width:100%; font-size:16px; padding:13px 0; line-height: 22px; display: inline-block;} .myphone-install-wrap{background-color:#f7f7f8; padding: 0 0 40px 0;} .myphone-install-wrap .myphone-install-inner {} .myphone-install-wrap .myphone-install-inner .myphone-install-header {margin:0 20px; text-align: center;} .myphone-install-wrap .myphone-install-inner .myphone-install-header .icon.icon-logo {width:147px; height:27px; background-position: 0 -135px;} .myphone-install-wrap .myphone-install-inner .myphone-install-header span {display: block; line-height: 21px; font-size:15px; padding:15px 0 0;} .myphone-install-wrap .myphone-install-inner .myphone-install-header .myphone-look-summary {font-size:13px; color:#8c8c8d;padding:10px 0 0;} .myphone-install-wrap .myphone-install-inner .myphone-install-co { margin: 35px 20px 35px; padding:0 0 25px;background-color:#ffffff; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; margin-bottom: 0 !important; -ms-box-shadow: 0 5px 5px rgba(238,238,238,1); -moz-box-shadow: 0 5px 5px rgba(238,238,238,1); -webkit-box-shadow: 0 5px 5px rgba(238,238,238,1); box-shadow: 0 5px 5px rgba(238,238,238,1); } .myphone-install-wrap .myphone-install-inner .myphone-install-co .formmdntel-wrap .forminputbox .forminputbox-col input.form-input-control::-webkit-input-placeholder {letter-spacing: 0;} .myphone-install-wrap .myphone-install-inner .myphone-install-co .formmdntel-wrap .forminputbox .forminputbox-col input.form-input-control::-moz-placeholder {letter-spacing: 0;} .myphone-install-wrap .myphone-install-inner .myphone-install-co .formmdntel-wrap .forminputbox .forminputbox-col input.form-input-control::-moz-p {letter-spacing: 0;} .myphone-install-wrap .myphone-install-inner .myphone-install-co .formmdntel-wrap .forminputbox .forminputbox-col input.form-input-control:-ms-input-placeholder {letter-spacing: 0;} .myphone-install-wrap .myphone-install-inner .forminputbox .forminputbox-col input.form-input-control {height:42px;} .numsave-agree-wrap {} .numsave-agree-wrap .listgroup-defaultcheck{} .numsave-agree-wrap .numsave-agree-summary {font-size:13px; color:#8c8c8d; display: inline-block;} .myphone-install-notice .listgroup-info-list li {font-size:12px;} .myphonesms-wrap {} .myphonesms-wrap .myphonesms-co {text-align: center;} .myphonesms-wrap .myphonesms-text { padding-top: 20px; font-size: 16px; color: #000000; line-height: 23px;} /* Home - 약관 리스트/ 내 폰에 설치하기/ 내 폰에서 보기 End */ /* 휴대폰 인증 - 캡챠이미지/ 새로고침 Start */ .captcha-section-wrap { margin:0 20px 5px; } .captcha-section-wrap .captcha-section-inner { display: table; width: 100%; height:40px;} .captcha-section-wrap .captcha-section-inner p { display: table-cell; width: 180px; } .captcha-section-wrap .captcha-section-inner p img { width: 100%; vertical-align: top; } .captcha-section-wrap .captcha-section-inner span { display: table-cell; vertical-align: middle; padding:0 0 0 5px;} .captcha-section-wrap .captcha-section-inner span a { display: block; width:40px; height:40px;} .captcha-section-wrap .captcha-section-inner span a .icon-refresh {vertical-align: top;} .popupgroup-content .captcha-section-wrap { margin:0 0 5px; } /* 휴대폰 인증 - 캡챠이미지/ 새로고침 End */ /* 공지사항/ FQA Start */ #container #notice-search {position: relative; z-index: 100;} #container #notice-search.searchheader {padding:0 20px 0 20px;} #container #notice-search.searchheader.focus .header-co {padding-left:20px;} .searchnoitem-wrap.notice-no-wrap { border-bottom: 0; padding:50px 20px;} .notice-box-wrap {margin:0 20px 0;} .notice-box-wrap .notice-box-inner {} .notice-box-wrap .notice-box-inner .notice-list {} .notice-box-wrap .notice-box-inner .notice-list .list-item-inner {position:relative; border-bottom:1px solid #ececec; } .notice-box-wrap .notice-box-inner .notice-list .list-item-inner > a { width: 100%;padding:18px 0; display: inline-block;} .notice-box-wrap .notice-box-inner .notice-list .list-item-inner a .item-box {} .notice-box-wrap .notice-box-inner .notice-list .list-item-inner a .item-box .item-title {font-size:14px; display: block; line-height: 20px;} .notice-box-wrap .notice-box-inner .notice-list .list-item-inner a .item-box .item-date {font-size:12px; color:#8c8c8c; display: block;line-height: 16px;letter-spacing: 0;} .faqcategory-wrap { position:relative; padding:0 20px 10px 20px; overflow:hidden; } .faqcategory-wrap .swiper-container { padding:0 0 0 0; overflow:visible; } .faqcategory-wrap .swiper-slide { position:relative; width:auto; } .faqcategory-wrap .swiper-slide a.btn { margin:0 0 0 8px; font-size:15px; min-width:1px; padding:7px 19px 7px 19px; color:#000000; background:transparent; line-height:19px; text-align:left; border-color:#e6e6e6; display:block; } .faqcategory-wrap .swiper-slide a.btn.selected { color:#ffffff; background:#2c2a65; border-color:#2c2a65; } .faqcategory-wrap .swiper-slide:first-of-type { width:auto; } .faqcategory-wrap .swiper-slide:first-of-type a { margin-left:0; } .faqcategory-wrap .faqcategory-swiper .swiper-slide { width:auto; } .faqcategory-wrap .faqcategory-swiper .swiper-slide:first-of-type { width:auto; } .notice-box-wrap .notice-box-inner.faq-box-inner {display: none;} .notice-box-wrap .notice-box-inner.faq-box-inner.open {display: block;} .notice-box-wrap .notice-box-inner.faq-box-inner .notice-list .list-item-inner a .item-box .item-title { font-size:13px; white-space: normal; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .notice-box-wrap .notice-box-inner.faq-search-inner .notice-list .list-item-inner a .item-box .item-content { font-size:12px; color:#8c8c8c; display: block;line-height: 18px; max-height: 54px; margin:4px 0 0; white-space: normal; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; -webkit-line-clamp: 3; -webkit-box-orient: vertical; display: -webkit-box; } .notice-box-wrap .notice-box-inner.faq-search-inner .notice-list .list-item-inner > em {display: none !important;} .notice-box-wrap .notice-box-inner.faq-search-inner .notice-list .list-item-inner font { font-family: 'HelveticaNeue-Light','AppleSDGothicNeo-Light','Malgun Gothic','맑은 고딕',sans-serif; } .notice-view-wrap {margin:0 20px;} .notice-view-wrap .notice-view-inner {} .notice-view-wrap .notice-view-inner .notice-view-title {padding: 10px 0 15px;} .notice-view-wrap .notice-view-inner .notice-view-title .item-title {font-size:14px; display: block; line-height: 20px;} .notice-view-wrap .notice-view-inner .notice-view-title .item-date { font-size: 12px;color: #8c8c8c;display: block;line-height: 18px; letter-spacing: 0;} .notice-view-wrap .notice-view-inner .notice-content-box { background: #f7f7f8; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; font-size: 12px;} .notice-view-wrap .notice-view-inner .notice-content-box .notice-text-box {padding: 19px 20px;} .notice-view-wrap .notice-view-inner .notice-content-box .notice-file-box {padding: 0 15px 15px;} .notice-view-wrap .notice-view-inner .notice-content-box .notice-file-box .notice-file-save { background: #ffffff; -ms-border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; display: table; width: 100%; margin:0 0 10px 0; -ms-box-shadow: 0 1px 0 rgba(0,0,0,0.04); -moz-box-shadow: 0 1px 0 rgba(0,0,0,0.04); -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.04); box-shadow: 0 1px 0 rgba(0,0,0,0.04); } .notice-view-wrap .notice-view-inner .notice-content-box .notice-file-box .notice-file-save:last-child {margin:0;} .notice-view-wrap .notice-view-inner .notice-content-box .notice-file-box .notice-file-save > span { padding: 11px 15px; color:#8c8c8c; display: table-cell;width:49px;padding:0 3px 0 14px; vertical-align: middle;} .notice-view-wrap .notice-view-inner .notice-content-box .notice-file-box .notice-file-save > em {padding-left:8px; color:#000000; display: table-cell; vertical-align: middle; padding:11px 0;} .notice-view-wrap .notice-view-inner .notice-content-box .notice-file-box .notice-file-save a {color:#3e3877; font-size:12px; display: table-cell; padding: 11px 13px;width: 26px; text-align: center; vertical-align: middle;} .notice-view-wrap .notice-view-inner .notice-content-box .notice-link-box {padding:0 15px 14px;} .notice-view-wrap .notice-view-inner .notice-content-box .notice-link-box a { color:#40367b; font-size:13px; text-decoration: underline; display: inline-block; padding: 5px;} /* 공지사항/ FQA End */ /* 2020.04 FAQ/공지사항 에디터 스타일 Start */ .notice-view-wrap .notice-view-inner .notice-content-box .notice-text-box , .notice-box-wrap .notice-box-inner.faq-search-inner .notice-list .list-item-inner a .item-box .item-content { font-size:12px; line-height:1.5; } .notice-view-wrap .notice-view-inner .notice-content-box .notice-text-box img , .notice-box-wrap .notice-box-inner.faq-search-inner .notice-list .list-item-inner a .item-box .item-content img { max-width:100%; } .notice-view-wrap .notice-view-inner .notice-content-box .notice-text-box font , .notice-view-wrap .notice-view-inner .notice-content-box .notice-text-box span , .notice-view-wrap .notice-view-inner .notice-content-box .notice-text-box b , .notice-view-wrap .notice-view-inner .notice-content-box .notice-text-box u , .notice-view-wrap .notice-view-inner .notice-content-box .notice-text-box strike , .notice-box-wrap .notice-box-inner.faq-search-inner .notice-list .list-item-inner a .item-box .item-content font , .notice-box-wrap .notice-box-inner.faq-search-inner .notice-list .list-item-inner a .item-box .item-content span , .notice-box-wrap .notice-box-inner.faq-search-inner .notice-list .list-item-inner a .item-box .item-content b , .notice-box-wrap .notice-box-inner.faq-search-inner .notice-list .list-item-inner a .item-box .item-content u , .notice-box-wrap .notice-box-inner.faq-search-inner .notice-list .list-item-inner a .item-box .item-content strike { font-family:'HelveticaNeue-Light','AppleSDGothicNeo-Light','Malgun Gothic','맑은 고딕',sans-serif !important; text-decoration: none !important; } .notice-view-wrap .notice-view-inner .notice-content-box .notice-text-box font { font-size:12px !important; color:#000000; background-color: transparent !important; } .notice-box-wrap .notice-box-inner.faq-search-inner .notice-list .list-item-inner a .item-box .item-content font { font-size:12px !important; color:#8c8c8c; background-color: transparent !important; font-weight: normal; } .notice-view-wrap .notice-view-inner .notice-content-box .notice-text-box a font { font-size:12px !important; color:#40367b; } .notice-box-wrap .notice-box-inner.faq-search-inner .notice-list .list-item-inner a .item-box .item-content a font { font-size:12px !important; color:#8c8c8c; background-color: transparent !important; font-weight: normal; } .notice-view-wrap .notice-view-inner .notice-content-box .notice-text-box span , .notice-box-wrap .notice-box-inner.faq-search-inner .notice-list .list-item-inner a .item-box .item-content span { font-size:12px !important; } .notice-view-wrap .notice-view-inner .notice-content-box .notice-text-box a , .notice-box-wrap .notice-box-inner.faq-search-inner .notice-list .list-item-inner a .item-box .item-content a { font-size:12px; text-decoration:underline; color:#40367b; } .notice-view-wrap .notice-view-inner .notice-content-box .notice-text-box ol , .notice-box-wrap .notice-box-inner.faq-search-inner .notice-list .list-item-inner a .item-box .item-content ol { padding:0 0 0 20px; list-style:decimal; } .notice-view-wrap .notice-view-inner .notice-content-box .notice-text-box ol li , .notice-box-wrap .notice-box-inner.faq-search-inner .notice-list .list-item-inner a .item-box .item-content ol li { padding:0 0 0 0; width:auto; list-style:decimal; display:list-item; } .notice-view-wrap .notice-view-inner .notice-content-box .notice-text-box ul , .notice-box-wrap .notice-box-inner.faq-search-inner .notice-list .list-item-inner a .item-box .item-content ul { padding:0 0 0 20px; list-style:disc; } .notice-view-wrap .notice-view-inner .notice-content-box .notice-text-box ul li , .notice-box-wrap .notice-box-inner.faq-search-inner .notice-list .list-item-inner a .item-box .item-content ul li { padding:0 0 0 0; width:auto; list-style:disc; display:list-item; } .notice-view-wrap .notice-view-inner .notice-content-box .notice-text-box table { margin-top:10px; border:1px solid #d9d9d9; border-left-width:0; border-right-width:0; overflow: hidden; } .notice-view-wrap .notice-view-inner .notice-content-box .notice-text-box table tr {} .notice-view-wrap .notice-view-inner .notice-content-box .notice-text-box table tr td {padding:10px 5px; border-left:1px solid #d9d9d9; border-top:1px solid #d9d9d9;} .notice-view-wrap .notice-view-inner .notice-content-box .notice-text-box table tr td:first-of-type {border-left-width: 0;} .notice-view-wrap .notice-view-inner .notice-content-box .notice-text-box table tr:first-of-type td {border-top-width:0;} .notice-view-wrap .notice-view-inner .notice-content-box .notice-text-box table tr[bgcolor] { background:transparent !important; } .layout-detail-notice-co .layout-detail-notice-co-inner { font-size:12px; line-height:1.5; } .layout-detail-notice-co .layout-detail-notice-co-inner img { max-width:100%; } .layout-detail-notice-co .layout-detail-notice-co-inner font , .layout-detail-notice-co .layout-detail-notice-co-inner span , .layout-detail-notice-co .layout-detail-notice-co-inner b , .layout-detail-notice-co .layout-detail-notice-co-inner u , .layout-detail-notice-co .layout-detail-notice-co-inner strike { font-family:'HelveticaNeue-Light','AppleSDGothicNeo-Light','Malgun Gothic','맑은 고딕',sans-serif !important; text-decoration: none !important; } .layout-detail-notice-co .layout-detail-notice-co-inner font { font-size:12px !important; color:#000000; background-color: transparent !important; } .layout-detail-notice-co .layout-detail-notice-co-inner a font { font-size:12px !important; color:#40367b; } .layout-detail-notice-co .layout-detail-notice-co-inner span {font-size:12px !important;} .layout-detail-notice-co .layout-detail-notice-co-inner a { font-size:12px; text-decoration:underline; color:#40367b; } .layout-detail-notice-co .layout-detail-notice-co-inner ol { padding:0 0 0 20px; list-style:decimal; } .layout-detail-notice-co .layout-detail-notice-co-inner ol li { padding:0 0 0 0; width:auto; list-style:decimal; display:list-item; } .layout-detail-notice-co .layout-detail-notice-co-inner ul { padding:0 0 0 20px; list-style:disc; } .layout-detail-notice-co .layout-detail-notice-co-inner ul li { padding:0 0 0 0; width:auto; list-style:disc; display:list-item; } .layout-detail-notice-co .layout-detail-notice-co-inner table {margin-top:10px; border:1px solid #d9d9d9; border-left-width:0; border-right-width:0; overflow: hidden} .layout-detail-notice-co .layout-detail-notice-co-inner table tr {} .layout-detail-notice-co .layout-detail-notice-co-inner table tr td {padding:10px 5px; border-left:1px solid #d9d9d9; border-top:1px solid #d9d9d9; } .layout-detail-notice-co .layout-detail-notice-co-inner table tr td:first-of-type {border-left-width: 0;} .layout-detail-notice-co .layout-detail-notice-co-inner table tr:first-of-type td {border-top-width:0;} .layout-detail-notice-co .layout-detail-notice-co-inner table tr[bgcolor] { background:transparent !important; } /* 2020.04 FAQ/공지사항 에디터 스타일 End */ /* 앱 다운로드 안내 페이지 Start */ #wrap.about { background: #000216; padding: 0; margin: 0; max-width: none; } #wrap.about #container { padding-bottom: 0;} #wrap.about .mainhead { z-index: 1000; position: -webkit-sticky; position: sticky; top:0; left: 0!important; } #wrap.about .mainhead .header-co-outwrap { height:70px; } #wrap.about .mainhead .header-co-outwrap .js-btn-popup-open span { position: relative; display:block !important; } #wrap.about .mainhead .header-co-outwrap .js-btn-popup-open span:after{ position:absolute; content:''; width:16px; height:16px; top:50%; right:0px; background-position:-28px -173px; -moz-transform: translate3d(0%, -50%, 0); -webkit-transform: translate3d(0%, -50%, 0); transform: translate3d(0%, -50%, 0); } #wrap.about .mainhead .header-co-outwrap .js-btn-popup-open img { width: 30px; } #wrap.about .mainhead .header-co-fiexd.fiexd { width:100%; z-index:11; background: rgba(0, 2, 22, 0.5); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); } #wrap.about .mainhead .header-co {margin:0 auto; padding:20px; box-sizing: border-box; } #wrap.about .mainhead .header-co .header-co-full { } #wrap.about .mainhead .header-co .header-link { position:relative; padding:0 0 0 38px; height:34px; display:block; } #wrap.about .mainhead .header-co .header-link .icon-back { position:absolute; left:0; top:0; } #wrap.about .mainhead .header-co .header-link span { font-size:17px; color:#010101; line-height:30px; display:inline-block; } #wrap.about .mainhead .header-co .header-co-inner { position: relative; width: 100%; height: 100%; z-index: 2;} #wrap.about .mainhead .header-co .header-co-inner .header-co-left { height:30px; } #wrap.about .mainhead .header-co .header-co-inner .header-co-left .header-link { position: relative; padding: 0 0px 0 151px;} #wrap.about .mainhead .header-co .header-co-inner .header-co-left .header-link .icon-back { position:relative; vertical-align:top; } #wrap.about .mainhead .header-co .header-co-inner .header-co-left .header-link .header-link-home { position: absolute; left:0; top:50%; display: inline-block; width:135px; vertical-align: top; -moz-transform: translate3d(0, -50%, 0); -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } #wrap.about .mainhead .header-co .header-co-inner .header-co-left .header-link .icon-ti-arrow { display: inline-block; vertical-align: top; padding:0 5px 0 0; float:left; } #wrap.about .mainhead .header-co .header-co-inner .header-co-left .header-link span { font-size: 17px; color: #010101; line-height: 30px; display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } #wrap.about .mainhead .header-co .header-co-inner .header-co-right { position:absolute; right:0; top:0px; } #wrap.about .mainhead .header-co .header-co-inner .header-co-right .header-link { float:left; margin-left:15px; height:30px; padding:0; } #wrap.about .mainhead .header-co .header-co-inner .header-co-right .header-link .icon-back { position:relative; } #wrap.about .mainhead .header-co .header-co-inner .header-co-right .header-link:first-of-type {margin-left:0; width:46px;} #wrap.about .mainhead .header-co .header-co-inner .header-co-right .header-link-app { width:30px; background-repeat:no-repeat; background-position:center center; -ms-border-radius:7px; -moz-border-radius:7px; -webkit-border-radius:7px; border-radius:7px; -ms-background-size:30px 30px; -moz-background-size:30px 30px; -webkit-background-size:30px 30px; background-size:30px 30px; } .menu-wrap { position: sticky; top: 100px; z-index: 900; display: flex; justify-content: center; width: fit-content; margin:0 auto; } .menu-wrap .menu-inner { display: inline-flex; align-items: center; text-align: center; background-color: rgba(75, 62, 178, 0.4); border: 1px solid rgba(152, 135, 255, 0.4); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); -moz-box-shadow: 0px 10px 20px 0px rgba(0, 0, 47, 0.05); -webkit-box-shadow: 0px 10px 20px 0px rgba(0, 0, 47, 0.05); box-shadow: 0px 10px 20px 0px rgba(0, 0, 47, 0.05); -moz-border-radius: 90px; -webkit-border-radius: 90px; border-radius: 90px; } .menu-wrap ul { display: flex; justify-content: flex-start; transition: all .3s ease; padding:12px 14px; } .menu-wrap ul li { padding:12px 24px; min-width: 100px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .menu-wrap ul li a { font-size: 18px; line-height: 24px; font-weight: 700; color:rgba(255,255,255,0.7); } .menu-wrap ul li a:hover { color: #ffffff;} .menu-wrap ul li.active { background-color: #ffffff; border-radius: 30px; } .menu-wrap ul li.active a { color:#3917C0; } .menu-wrap { display: none; } .mobile-menu-wrap { position: fixed; width: 100%; bottom: 24px; left: 0; z-index: 100; padding: 0px 32px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .mobile-menu-wrap .mobile-menu-inner { position:relative; display:flex; justify-content: space-between; align-items: center; max-width: 360px; margin: 0 auto; width:100%; height: 60px; padding: 10px 10px 10px 20px; bottom:0; background-color: rgba(75, 62, 178, 0.4); border: 1px solid rgba(152, 135, 255, 0.4); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); -moz-box-shadow: 0px 10px 20px 0px rgba(0, 0, 47, 0.05); -webkit-box-shadow: 0px 10px 20px 0px rgba(0, 0, 47, 0.05); box-shadow: 0px 10px 20px 0px rgba(0, 0, 47, 0.05); -moz-border-radius: 44px; -webkit-border-radius: 44px; border-radius: 44px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .mobile-menu-wrap .mobile-menu-inner button { position:relative; display: inline-flex; gap: 12px; align-items: center; padding: 9.5px 0 9.5px 26px;border: none; background: transparent; line-height: 1; font-weight: 500; color: #000; } .mobile-menu-wrap .mobile-menu-inner button::before { content: ""; position: absolute; top:0; left:0; width: 20px; height: 20px; margin-top: 10px; background-position: -30px -201px; } .mobile-menu-wrap .mobile-menu-inner button.open::before { background-position: 0 -201px; } .mobile-menu-wrap .mobile-menu-inner .mobile-menu { display: grid; grid-template-columns: 1fr; align-items: center; height: 100%; } .mobile-menu-wrap .mobile-menu-inner .mobile-menu li { opacity: 0; grid-column: 1 / span 1; grid-row: 1 / span 1; pointer-events: none; text-align: left; } .mobile-menu-wrap .mobile-menu-inner .mobile-menu li div { font-size: 15px; line-height: 21px; color: #ffffff;} .mobile-menu-wrap .mobile-menu-inner .mobile-menu li.active { opacity: 1; } .mobile-menu-wrap .mobile-menu-inner .install-btn-wrap { padding:10px 20px; background-color: #ffffff; min-width: 110px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-border-radius: 90px; -webkit-border-radius: 90px; border-radius: 90px; } .mobile-menu-wrap .mobile-menu-inner .install-btn-wrap a { display: block; font-size:14px; line-height:20px; font-weight:700; color: #3917C0; } .mobile-open-menu-wrap { display:none; opacity: 0; position: absolute; left: 0; bottom: calc(100% + 12px); z-index: 100; max-width: 360px; width: 100%; background: #ffffff; padding: 8px 16px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; -moz-transform: translateY(10px); -webkit-transform: translateY(10px); transform: translateY(10px); -moz-transition: all .3s ease; -webkit-transition: all .3s ease; transition: all .3s ease; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.35); -webkit-box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.35); box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.35); } .mobile-open-menu-wrap ul li { padding:12px 0; border-top: 1px solid #ECECEC; } .mobile-open-menu-wrap ul li:first-child { border-top: unset; } .mobile-open-menu-wrap ul li a { display: block; position: relative; font-size: 13px; line-height: 19px; color: #000000;} .mobile-open-menu-wrap ul li.active a { color: #312C70; } .mobile-open-menu-wrap ul li.active a i { display: block; position: absolute; right: 0; top: 50%; margin-top: -10px; } .mobile-open-menu-wrap ul li a i { display: none; } .content-wrap { position:relative; border-top: 1px solid rgba(219, 206, 255, 0.2); background: linear-gradient(180deg, rgba(173, 161, 255, 0.1), rgba(173, 161, 255, 0)); } .section-01-wrap { position: relative; } .section-01-text { text-align: center; padding: 100px 24px 0; opacity: 0; } .section-01-text strong { display:block; font-size: 19px; line-height: 25px; font-weight:700; color: #fff; text-align: left; padding:0 10px;} .section-01-text span { display:block; font-size: 13px; line-height: 19px; font-weight:400; color: rgba(255,255,255,0.8); text-align: left; padding:16px 10px 0; } .marquee-app-wrap { padding: 40px 0 30px; overflow: hidden; display: flex; } .marquee-app-wrap .icon-set { display: flex; animation: scroll 20s linear infinite; } .marquee-app-wrap .icon-set li { width: 120px; height: 120px; margin: 0 6px; overflow: hidden; -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; -moz-box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.15); } .marquee-app-wrap .icon-set li div { position: relative; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; -moz-background-size: cover; -webkit-background-size: cover; background-size: cover; } .marquee-app-wrap .icon-set li div::before { content: ""; position: absolute; top: 0; left: 0; right:0; bottom:0; width: 120px; height:120px; -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; padding:1px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; pointer-events: none; } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } .installation-top { position:relative; background-color:transparent; } .installation-top .installation-top-inner { display: flex; } .installation-top .text-box{ padding:0 34px; height:428px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .pc .installation-top .text-box { height:368px; } .installation-top .text-box::before { content: ""; position: absolute; top: -70px; left: 0; width: 100%; height: 820px; background: url('../images/pic/top_bg_light_mo.jpg') no-repeat 0 0; -moz-background-size: 100% 820px; -webkit-background-size: 100% 820px; background-size: 100% 820px; } .installation-top .text-box .text-type01{ position:relative; z-index:13; margin-top:20px; font-size:24px; line-height:30px; font-weight:700; color:#ffffff; opacity: 0; } .installation-top .text-box .text-type02{ position:relative; z-index:13; margin-top:8px; font-size:13px;line-height:19px; font-weight:700; color:rgba(255,255,255,0.9); opacity:0; } .installation-top .install-btn-wrap { position:relative; z-index:13; margin: 20px 0 0; opacity: 0;} .installation-top .install-btn-wrap a { position: relative; display: inline-block; padding:9px 19px; font-size: 14px; line-height: 20px; font-weight: 700; min-width: 110px; text-align: center; background-color: #F3F4FC; color: #3917C0; -moz-border-radius: 90px; -webkit-border-radius: 90px; border-radius: 90px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border:1px solid rgba(255, 255, 255, 0.6); } @-moz-keyframes textAni { 0% {-moz-transform:translate3d(-25%,0%,0); -webkit-transform:translate3d(-25%,0%,0); transform:translate3d(-25%,0%,0); opacity:0;} 100% {-moz-transform:translate3d(0%,0%,0); -webkit-transform:translate3d(0%,0%,0); transform:translate3d(0%,0%,0); opacity:1;} } @-webkit-keyframes textAni { 0% {-moz-transform:translate3d(-25%,0%,0); -webkit-transform:translate3d(-25%,0%,0); transform:translate3d(-25%,0%,0); opacity:0;} 100% {-moz-transform:translate3d(0%,0%,0); -webkit-transform:translate3d(0%,0%,0); transform:translate3d(0%,0%,0); opacity:1;} } @keyframes textAni { 0% {-moz-transform:translate3d(-25%,0%,0); -webkit-transform:translate3d(-25%,0%,0); transform:translate3d(-25%,0%,0); opacity:0;} 100% {-moz-transform:translate3d(0%,0%,0); -webkit-transform:translate3d(0%,0%,0); transform:translate3d(0%,0%,0); opacity:1;} } .installation-top .text-type01.Ani , .installation-top .text-type02.Ani , .installation-top .install-btn-wrap.Ani , .store-download-qr-wrap.Ani { -moz-animation:textAni 0.5s ease-in-out forwards; -webkit-animation:textAni 0.5s ease-in-out forwards; animation:textAni 0.5s ease-in-out forwards; } .installation-top .phone-img{ position:absolute; top:91px; right:0; display: block; -webkit-transform:translate3d(5%,0%,0); transform:translate3d(5%,0%,0); opacity:0; z-index:12; text-align:center; } .pc .installation-top .phone-img { top:31px; } .installation-top .phone-img img{ width:199px; } .installation-top .phone-img .pcQrCode , .installation-top .phone-img .mobileQrCode { position:relative; margin:0 auto; z-index:1; } .installation-top .phone-img .pcQrCode { display:none; } .installation-top .phone-img .pcQrCode .phoneQrBack , .installation-top .phone-img .mobileQrCode .phoneQrBack { position: relative; display: block; width: 360px; height: 437px; } .installation-top .phone-img .pcQrCode .phoneQrBack img , .installation-top .phone-img .mobileQrCode .phoneQrBack img { width:100%; } @-moz-keyframes imgAni { 0% { -moz-transform:translate3d(5%,0%,0); -webkit-transform:translate3d(5%,0%,0); transform:translate3d(5%,0%,0); opacity:0;} 100% { -moz-transform:translate3d(0%,0%,0); -webkit-transform:translate3d(0%,0%,0); transform:translate3d(0%,0%,0); opacity:1;} } @-webkit-keyframes imgAni { 0% { -moz-transform:translate3d(5%,0%,0); -webkit-transform:translate3d(5%,0%,0); transform:translate3d(5%,0%,0); opacity:0;} 100% { -moz-transform:translate3d(0%,0%,0); -webkit-transform:translate3d(0%,0%,0); transform:translate3d(0%,0%,0); opacity:1;} } @keyframes imgAni { 0% { -moz-transform:translate3d(5%,0%,0); -webkit-transform:translate3d(5%,0%,0); transform:translate3d(5%,0%,0); opacity:0;} 100% { -moz-transform:translate3d(5%,0%,0); -webkit-transform:translate3d(0%,0%,0); transform:translate3d(0%,0%,0); opacity:1;} } .installation-top .phone-img.Ani{ -moz-animation:textAni 0.5s ease-in-out forwards; -webkit-animation:textAni 0.5s ease-in-out forwards; animation:textAni 0.5s ease-in-out forwards; } .store-download-qr-wrap { position: relative; padding:30px 30px 0; opacity: 0;} .store-download-qr-wrap .store-download-qr-inner { position: relative; padding:28px; background-color: rgba(83, 83, 255, 0.08); -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; } .store-download-qr-wrap .store-download-qr-inner:before { content:''; position:absolute; top:0; left:0; right:0; bottom:0; z-index: 11; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; padding:1px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: linear-gradient(180deg, rgba(152, 135, 255, 0.2), rgba(105, 105, 219, 0.2)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; pointer-events: none; } .store-download-qr-wrap .store-download-qr-inner strong { display:block; font-size: 15px; line-height: 21px; font-weight:700; color:#ffffff; padding-bottom: 28px; } .store-download-qr-wrap .store-download-qr-inner strong i { margin-right: 12px; top:-1px; } .store-download-qr-wrap .store-download-qr-inner .store-qr-code-wrap { display: flex; align-items: center; padding:0 0 16px 0; } .store-download-qr-wrap .store-download-qr-inner .store-qr-code-wrap span img { width: 85px; } .store-download-qr-wrap .store-download-qr-inner .store-qr-code-wrap .text-wrap { display: block; font-size: 13px; line-height: 19px; color: #ffffff; padding:0 0 0 20px; } .store-download-qr-wrap .store-download-qr-inner .store-qr-btn-wrap { position:relative; padding: 16px 0 0; text-align: center; } .store-download-qr-wrap .store-download-qr-inner .store-qr-or-line { display: flex; align-items: center; } .store-download-qr-wrap .store-download-qr-inner .store-qr-or-line em { background: rgba(255, 255, 255, 0.3); width: 50%; height: 1px;} .store-download-qr-wrap .store-download-qr-inner .store-qr-or-line span { font-size: 12px; line-height: 16px; color: rgba(255, 255, 255, 0.6); padding:0 8px } .store-download-qr-wrap .store-download-qr-inner .store-qr-btn-wrap a { display: inline-block; font-size: 14px; line-height: 20px; font-weight: 700; min-width: 120px; padding:10px 20px; background-color: rgba(182, 173, 255, 0.08); border: 1px solid rgba(205, 201, 231, 0.6); -moz-border-radius: 90px; -webkit-border-radius: 90px; border-radius: 90px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .section-02-wrap { background:#EDEDF3; } .guide-layout { } .guide-layout .title{ text-align:center; font-size:20px; line-height:26px; font-weight:bold; color:#0B0340; padding:50px 24px 30px; opacity: 0; } .guide-layout-inner { padding:0 24px; } .guide-layout-inner .guide-box { display:flex; justify-content: space-between; align-items: center; gap:20px; background-color: #ffffff; padding: 24px 28px; margin-top: 12px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-border-radius: 16px; -webkit-border-radius: 16px; border-radius: 16px; opacity: 0; } .guide-layout-inner .guide-box:first-child { margin-top: 0; } .guide-layout-inner .guide-box .box-text { } .guide-layout-inner .guide-box .box-text em { display: inline-block; font-size: 12px; line-height: 16px; font-weight: 700; text-align: center; color: #3E3877; background-color: #EDEDF7; padding: 4px 12px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; } .guide-layout-inner .guide-box .box-text strong { display:block; font-size: 14px; line-height: 20px; font-weight: 700; color: #181438; padding: 16px 0 0; } .guide-layout-inner .guide-box .box-text p { font-size: 12px; line-height: 16px; color: #454545; padding:8px 0 0; } .guide-layout-inner .guide-box .box-img { background-color: #EDEDF7; padding: 12px; min-width: 270px; width: 270px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; } .guide-layout-inner .guide-box .box-img-inner { display: flex; justify-content: space-between; align-items: center; background-color: #FBFBFF; height: 100%; padding: 12px 16px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; } .guide-layout-inner .guide-box .box-img-inner .box-img-item { font-size: 12px; line-height: 16px; text-align: center; font-weight: 700; color: #5662DF; } .guide-layout-inner .guide-box .box-img-inner .box-img-item-inner { display: flex; align-items: center; } .guide-layout-inner .guide-box .box-img-inner .box-img-item-inner i { display: block; } .guide-layout-inner .guide-box .box-img-inner .box-img-item-inner em { font-size: 12px; line-height:16px; font-weight: 700; color:#000000; padding:0 12px; text-align: left; } .guide-layout-inner .guide-box.box10 .box-img-inner { display: block; padding: 16px; } .guide-layout-inner .guide-box.box10 .box-img-inner + .box-img-inner { margin-top: 12px; } .guide-layout-inner .guide-box.box10 .box-img-inner .box-img-text { font-size: 12px; line-height: 16px; color:#000000; text-align: left; font-weight: 400; padding:8px 0 20px } .guide-layout-inner .guide-box.box10 .box-img-inner .box-img-item ul { display: flex; justify-content: space-around } .guide-layout-inner .guide-box.box10 .box-img-inner .box-img-item ul li { position:relative; width:50%; font-size: 12px; line-height: 16px; text-align: center; color:#74778F; } .guide-layout-inner .guide-box.box10 .box-img-inner .box-img-item ul li:after { content: ""; position:absolute; top:2px; right:0; width: 1px; height:12px; background-color: #CCCCCC; } .guide-layout-inner .guide-box.box10 .box-img-inner .box-img-item ul li:last-child { color: #5662DF; } .guide-layout-inner .guide-box.box10 .box-img-inner .box-img-item ul li:last-child:after { display: none; } .section-03-wrap { background:#EDEDF3; } .support-layout { background:#EDEDF3; padding:0px 0px 50px; overflow:hidden; } .support-layout .title{ text-align:center; font-size:20px; line-height:26px; font-weight:bold; color:#0B0340; margin:50px 24px 30px; opacity: 0; } .support-layout .support-layout-inner{ padding:0 24px; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .support-layout .support-layout-inner .guid-box-list .guid-box-item{ width: 100%; background: rgba(254, 254, 255, 0.9); margin-bottom:12px; overflow:hidden; -moz-border-radius:16px; -webkit-border-radius:16px; border-radius:16px; opacity: 0; } .support-layout .support-layout-inner .guid-box-list .guid-box-item:last-child{margin-bottom:0px;} .support-layout .support-layout-inner .guid-box-list .guid-box-item .guid-box-link {display: block;} .support-layout .support-layout-inner .guid-box-list .guid-box-item .guid-box-link .guid-box-item-inner { position: relative; display: table; width: 100%; padding:20px 56px 20px 28px; line-height: 16px; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .floting-wrap .floting-btn a span:before , .pecan-main .popupgroup-wrap.languagePopup .popupgroup-box .popupgroup-co-filterlist ul li a.filterlist-item.selected:before , .cookie-setting-inner .cookie-box-list .cookie-box-item .cookie-box-link .cookie-box-item-inner:after , .cookie-setting-inner .cookie-box-list .cookie-box-item.on .cookie-box-link .cookie-box-item-inner:after { background-image:url(../../en/images/icon/icon_01.png); background-repeat: no-repeat; -ms-background-size:1000px 1000px; -moz-background-size:1000px 1000px; -webkit-background-size:1000px 1000px; background-size:1000px 1000px; } .support-layout .support-layout-inner .guid-box-list .guid-box-item .guid-box-link .guid-box-item-inner:after { position: absolute; content: ''; right:28px; top:50%; width:16px; height:16px; margin-top:-8px; display: block; background-position: -86px -273px; } .support-layout .support-layout-inner .guid-box-list .guid-box-item.on .guid-box-link .guid-box-item-inner:after { background-position: -60px -273px; } .support-layout .support-layout-inner .guid-box-list .guid-box-item .guid-box-link .guid-box-item-inner .guid-box-question{ font-size:14px; line-height:20px; font-weight:bold; color:#181438; display: table-cell; } .support-layout .support-layout-inner .guid-box-list .guid-box-answer{ display:none; padding:0px 28px 24px; margin-top:5px; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .support-layout .support-layout-inner .guid-box-list .guid-box-answer div{ margin:0px 0 6px; padding:18px 20px; background-color:#EBEBF7; color:#130a3e; font-size:12px; line-height:18px; -ms-border-radius:16px; -moz-border-radius:16px; -webkit-border-radius:16px; border-radius:16px; } .support-layout .support-layout-inner .guid-box-list .guid-box-answer div.last-answer{ margin-bottom:0px; background:none; padding:0; } .support-layout .support-layout-inner .guid-box-list .guid-box-answer div.last-answer p { position:relative; font-size: 12px; line-height: 16px; color: #454545; padding-left:16px; margin-top:2px; } .support-layout .support-layout-inner .guid-box-list .guid-box-answer div.last-answer p:first-child{margin-top:0px;} .support-layout .support-layout-inner .guid-box-list .guid-box-answer div.last-answer p:before { position:absolute; content:''; left:0; top:6px; width:4px; height:4px; background:#8C8C8C; display:block; -ms-border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; } .support-layout .support-layout-inner .guid-box-list .guid-box-answer div strong{display:block; font-weight:bold; font-size:13px; line-height:20px; margin-bottom:6px;} .support-layout .support-layout-inner .guid-box-list .guid-box-answer div p.disc-type{ position:relative; padding-left:16px;} .support-layout .support-layout-inner .guid-box-list .guid-box-answer div p.disc-type:before { position:absolute; content:''; left:0; top:7px; width:4px; height:4px; background:#13073f; display:block; -ms-border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; } .about-onestore { padding:50px 24px 30px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .about-onestore .title{ display:block; text-align:center; font-size:19px; line-height:25px; font-weight:bold; color:#ffffff; padding:0 10px 32px; text-align: left; opacity: 0; } .about-box-wrap { position: relative;} .about-onestore .about-box{ position:relative; opacity:0; overflow: hidden; display: flex; padding: 28px; background: linear-gradient(180deg, rgba(112, 90, 255, 0.15), rgba(77, 62, 193, 0)) ; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; -moz-transform:translate3d(0%,15%,0); -webkit-transform:translate3d(0%,15%,0); transform:translate3d(0%,15%,0); } .about-onestore .about-box:before { content:''; position:absolute; top:0; left:0; right:0; bottom:0; z-index: 11; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; padding:1px; background: linear-gradient(180deg, rgba(62, 55, 114, 0.6), rgba(62, 55, 114, 0)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; pointer-events: none; } @-moz-keyframes boxAni { 0% {-moz-transform:translate3d(0%,15%,0); -webkit-transform:translate3d(0%,15%,0); transform:translate3d(0%,15%,0); opacity:0;} 100% {-moz-transform:translate3d(0%,0%,0); -webkit-transform:translate3d(0%,0%,0); transform:translate3d(0%,0%,0); opacity:1;} } @-webkit-keyframes boxAni { 0% {-moz-transform:translate3d(0%,15%,0); -webkit-transform:translate3d(0%,15%,0); transform:translate3d(0%,15%,0); opacity:0;} 100% {-moz-transform:translate3d(0%,0%,0); -webkit-transform:translate3d(0%,0%,0); transform:translate3d(0%,0%,0); opacity:1;} } @keyframes boxAni { 0% {-moz-transform:translate3d(0%,15%,0); -webkit-transform:translate3d(0%,15%,0); transform:translate3d(0%,15%,0); opacity:0;} 100% {-moz-transform:translate3d(0%,0%,0); -webkit-transform:translate3d(0%,0%,0); transform:translate3d(0%,0%,0); opacity:1;} } .about-onestore .about-box.Ani , .about-onestore .about-box.Ani , .section-01-text.Ani , .about-onestore .title.Ani , .guide-layout-inner .guide-box.Ani , .guide-layout .title.Ani , .support-layout .title.Ani , .support-layout .support-layout-inner .guid-box-list .guid-box-item.Ani , .more-help-wrap.Ani , .footer-store-download-wrap.Ani { -moz-animation:boxAni 0.6s ease-in-out forwards; -webkit-animation:boxAni 0.6s ease-in-out forwards; animation:boxAni 0.6s ease-in-out forwards; } .about-onestore .about-box .box-inner{ padding:0 20px 0 0; width:100%; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .about-onestore .about-box .box-img { width: 240px; height: 168px; } .about-onestore .about-box .box-img img { display: block; width: 240px; height: 168px; } .about-onestore .about-box .box-img.pc { display: none; } .about-onestore .about-box strong{ display:block; font-weight:700; font-size:15px; line-height:21px; color:#ffffff; } .about-onestore .about-box p { font-size:13px;line-height:19px; color:rgba(255,255,255,0.8); margin-top:8px; } .about-box-wrap.ty2 {} .about-onestore .about-box-wrap.ty2 .about-box { align-items: center; flex-direction: row-reverse; background: transparent; padding: 50px 0; } .about-onestore .about-box-wrap.ty2 .about-box:before { display: none; } .about-onestore .about-box-wrap.ty2 .box-inner { padding: 0 10px 0 30px; } .about-onestore .about-box-wrap.ty2 .box-img { width: 280px; height: 290px; } .about-onestore .about-box-wrap.ty2 .box-img img { width: 280px; height: 290px; } .about-onestore .about-box-wrap.ty2 .box06 .box-img { height: 208px; } .about-onestore .about-box-wrap.ty2 .box06 .box-img img { height: 208px; } .about-onestore .about-box-wrap.ty2 strong { font-size: 19px; line-height: 25px; } .about-onestore .about-box-wrap.ty2 p { font-size: 13px; line-height: 19px; margin-top: 16px; } /* floting 버튼 */ .floting-wrap{ position:fixed; bottom:0; left:0; width:100%; overflow:hidden; padding-bottom:30px; z-index:3; } .floting-wrap .floting-btn{ width:264px; height:50px; text-align:center; margin:0 auto; } .floting-wrap .floting-btn a{ display:block; padding:13px 0; font-size:17px; font-weight:bold; line-height:24px; color:#ffffff; background: #5012FF; -ms-border-radius:25px; -moz-border-radius:25px; -webkit-border-radius:25px; border-radius:25px; -ms-box-shadow: 0 15px 20px 0 rgba(6,2,26,0.3), inset 0 1px 2px rgba(198,197,238,0.1); -moz-box-shadow: 0 15px 20px 0 rgba(6,2,26,0.3), inset 0 1px 2px rgba(198,197,238,0.1); -webkit-box-shadow: 0 15px 20px 0 rgba(6,2,26,0.3), inset 0 1px 2px rgba(198,197,238,0.1); box-shadow: 0 15px 20px 0 rgba(6,2,26,0.3), inset 0 1px 2px rgba(198,197,238,0.1); -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .floting-wrap .floting-btn a span{ position:relative; padding-left:37px; } .floting-wrap .floting-btn a span:before{ position: absolute; content: ''; left:0px; top:50%; width:28px; height:28px; background-position: -814px 0; -ms-transform: translate3d(0,-50%,0);-moz-transform: translate3d(0,-50%,0);-webkit-transform: translate3d(0,-50%,0); transform: translate3d(0,-50%,0); } .more-help-wrap { opacity: 0; } .more-help-wrap .btn { display:block; width: 220px; margin: 30px auto 0; padding: 12px 17px 12px 20px; background-color: #ffffff; border: none; -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; } .more-help-wrap .btn .more-help-inner { display:flex; justify-content: space-between; align-items: center; } .more-help-wrap .btn em { font-size: 13px; line-height: 19px; font-weight: 700; color: #000; } .more-help-wrap .btn em i { display: none; } .footer-store-download-wrap { padding: 50px 24px 0; opacity: 0; } .footer-store-download-inner { display:flex; align-items: center; justify-content: space-between; padding: 25px 28px; background-color: #181438; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; } .footer-store-download-inner .left-item-text { position: relative; padding:0 24px 0 74px;} .footer-store-download-inner .left-item-text i { position: absolute; top:50%; left:0; margin-top: -25px; } .footer-store-download-inner .left-item-text strong { font-size: 17px; line-height: 23px; color: #ffffff; font-weight: 700;} .footer-store-download-inner .left-item-text em { display:block; font-size: 13px; line-height: 19px; color: rgba(255,255,255,0.8); padding:4px 0 0; } .footer-store-download-inner .right-item { } .footer-store-download-inner .right-item a { position: relative; display: block; padding: 9px 19px; font-size: 14px; line-height: 20px; font-weight: 700; min-width: 110px; width:110px; margin:0 auto; text-align: center; background-color: #F3F4FC; color: #3917C0; -moz-border-radius: 90px; -webkit-border-radius: 90px; border-radius: 90px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.6); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); } .footer-store-download-inner .right-item img { display: none; } #wrap.about #footer .footer-content-wrap .footer-content-inner { padding:0 20px 92px 20px; } #wrap.about #footer .footer-content-wrap { width: 100%; border-top: 1px solid rgba(255, 255, 255, 0.1); max-width: none; } .mo-layout-01 { display: block; } .pc-layout-01 { display: none; } .pc-layout-01.pc { display: none; } .footer-store-download-inner .left-item-text em { display: none; } .pc .mo-layout-01 { display: none; } .pc .pc-layout-01 { display: block; } .pc .pc-layout-01.pc { display: none; } .pc .footer-store-download-inner { padding: 20px 28px; } .pc .footer-store-download-inner .left-item-text em { display: block; } .pc .footer-store-download-inner .right-item { width: 85px; height: 85px; } .pc .footer-store-download-inner .right-item a { display: none; } .pc .footer-store-download-inner .right-item img { display: block; width: 85px; height: 85px; } /* 앱 다운로드 안내 페이지 End */ /* 마케팅 인프라 공통정책 : 앱 호출 시나리오 Start */ .onestore-guide-download-wrap {display: none;} /* 마케팅 인프라 공통정책 : 앱 호출 시나리오 End */ /* 미지원 안내 Start */ .service-error-box-wrap { padding: 0 20px; } .service-error-box-wrap .headerill-pic { margin:0 20px; } .service-error-box-wrap .headerill-pic .headerill-pic-co { position:relative; text-align:center; } .service-error-box-wrap .headerill-pic .headerill-pic-co img { vertical-align:top; height:120px; } .service-error-box-wrap .onestoreno-co { text-align:center; } .service-error-box-wrap .onestoreno-text { padding-top:20px; font-size:16px; color:#000000; line-height:23px; } .service-error-box-wrap .onestoreno-summary { padding-top: 10px; font-size: 13px; color: #828282;line-height: 19px; display: block;} .service-error-box-wrap .onestoreno-summary strong{color:#272558; } /* 미지원 안내 End */ /* 기타 Start */ .error-notice-wrap { margin: 0 20px;} .error-notice-wrap .headerill-pic { margin: 0 20px; } .error-notice-wrap .headerill-pic .headerill-pic-co { position: relative; text-align: center;} .error-notice-wrap .headerill-pic .headerill-pic-co img { vertical-align: top; height: 120px;} .error-notice-wrap .error-notice-co { text-align: center;} .error-notice-wrap .error-notice-ti { padding-top: 20px; font-size: 16px; color: #000000; line-height: 23px;} .error-notice-wrap .error-notice-summary { font-size: 13px; color: #8c8c8c; padding: 6px 0 0;} .error-notice-wrap .error-date-box { padding: 15px 20px; background-color: #f5f5f5; -ms-border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; } .error-notice-wrap .error-date-box strong { color: #3e3877; font-size: 12px; display: block; letter-spacing: 0; line-height: 19px;} .error-notice-wrap .error-date-box strong .icon-error-notice { padding: 0 4px 0 0; vertical-align: top; width: 12px;height: 19px; background-position: -650px -500px;} .error-notice-wrap .error-date-box span { color: #8c8c8c; font-size: 12px; line-height: 19px; } /* 기타 End */ /* Bridge Start */ .bridge-round-wrap { margin: 0 20px;} .bridge-round-wrap .headerill-pic { margin: 0 20px; } .bridge-round-wrap .headerill-pic .headerill-pic-co { position: relative; text-align: center;} .bridge-round-wrap .headerill-pic .headerill-pic-co .bridge-round-ani {height:25px; width:80px; margin:0 auto;} .bridge-round-wrap .headerill-pic .headerill-pic-co .bridge-round-ani span { display: inline-block; width:16px; height:16px; -ms-border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; background: #4d44a2; opacity: 0.4; margin:0 16px 0 0; float:left; -ms-transform: translate3d(0,9px,0); -moz-transform: translate3d(0,9px,0); -webkit-transform: translate3d(0,9px,0); transform: translate3d(0,9px,0); -ms-animation: bridgeroundAni 1.2s ease-in-out infinite; -moz-animation: bridgeroundAni 1.2s ease-in-out infinite; -webkit-animation: bridgeroundAni 1.2s ease-in-out infinite; animation: bridgeroundAni 1.2s ease-in-out infinite; } .bridge-round-wrap .headerill-pic .headerill-pic-co .bridge-round-ani span.round-ani-item-02 {-ms-animation-delay: 0.15s; -moz-animation-delay: 0.15s; -webkit-animation-delay: 0.15s; animation-delay: 0.15s;} .bridge-round-wrap .headerill-pic .headerill-pic-co .bridge-round-ani span.round-ani-item-03 {-ms-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -webkit-animation-delay: 0.3s; animation-delay: 0.3s;} .bridge-round-wrap .headerill-pic .headerill-pic-co .bridge-round-ani span:last-child{margin-right:0;} @-ms-keyframes bridgeroundAni { 0% { -ms-transform: translate3d(0,9px,0); -moz-transform: translate3d(0,9px,0); -webkit-transform: translate3d(0,9px,0); transform: translate3d(0,9px,0); opacity: 0.4;} 50% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1;} 100% { -ms-transform: translate3d(0,9px,0); -moz-transform: translate3d(0,9px,0); -webkit-transform: translate3d(0,9px,0); transform: translate3d(0,9px,0); opacity: 0.4;} } @-moz-keyframes bridgeroundAni { 0% { -ms-transform: translate3d(0,9px,0); -moz-transform: translate3d(0,9px,0); -webkit-transform: translate3d(0,9px,0); transform: translate3d(0,9px,0); opacity: 0.4;} 50% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1;} 100% { -ms-transform: translate3d(0,9px,0); -moz-transform: translate3d(0,9px,0); -webkit-transform: translate3d(0,9px,0); transform: translate3d(0,9px,0); opacity: 0.4;} } @-webkit-keyframes bridgeroundAni { 0% { -ms-transform: translate3d(0,9px,0); -moz-transform: translate3d(0,9px,0); -webkit-transform: translate3d(0,9px,0); transform: translate3d(0,9px,0); opacity: 0.4;} 50% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1;} 100% { -ms-transform: translate3d(0,9px,0); -moz-transform: translate3d(0,9px,0); -webkit-transform: translate3d(0,9px,0); transform: translate3d(0,9px,0); opacity: 0.4;} } @keyframes bridgeroundAni { 0% { -ms-transform: translate3d(0,9px,0); -moz-transform: translate3d(0,9px,0); -webkit-transform: translate3d(0,9px,0); transform: translate3d(0,9px,0); opacity: 0.4;} 50% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1;} 100% { -ms-transform: translate3d(0,9px,0); -moz-transform: translate3d(0,9px,0); -webkit-transform: translate3d(0,9px,0); transform: translate3d(0,9px,0); opacity: 0.4;} } .bridge-round-wrap .bridge-round-co { text-align: center;} .bridge-round-wrap .bridge-round-ti { padding-top: 20px; font-size: 16px; color: #000000; line-height: 23px;} .bridge-round-wrap .bridge-round-summary { font-size: 13px; color: #8c8c8c; padding: 6px 0 0;} .bridge-box-progressbar {position:absolute; left:0; top:0; width:100%; height: 2px;} .bridge-box-progressbar-ani { position: relative; width:0; height:2px; background:#4d44a2; -ms-animation: bridgebarAni 5s linear infinite; -moz-animation: bridgebarAni 5s linear infinite; -webkit-animation: bridgebarAni 5s linear infinite; animation: bridgebarAni 5s linear infinite; } @-ms-keyframes bridgebarAni { 0% { width:0%; } 100% { width:100%; } } @-moz-keyframes bridgebarAni { 0% { width:0%; } 100% { width:100%; } } @-webkit-keyframes bridgebarAni { 0% { width:0%; } 100% { width:100%; } } @keyframes bridgebarAni { 0% { width:0%; } 100% { width:100%; } } .bridge-box-loading-icon {} .bridge-box-loading-icon-ani { position: absolute; left: 0; top: 50%; width: 100%; text-align: center; -ms-transform: translate3d(0,-50%,0);-moz-transform: translate3d(0,-50%,0);-webkit-transform: translate3d(0,-50%,0); transform: translate3d(0,-50%,0); } .bridge-box-loading-icon-ani img { width:44px; height:44px; vertical-align:top; -ms-animation: loadingIconAni 1s linear infinite; -moz-animation: loadingIconAni 1s linear infinite; -webkit-animation: loadingIconAni 1s linear infinite; animation: loadingIconAni 1s linear infinite; } @-ms-keyframes loadingIconAni { 0% { -ms-transform:rotateZ(0deg); -moz-transform:rotateZ(0deg); -webkit-transform:rotateZ(0deg); transform:rotateZ(0deg); } 100% { -ms-transform:rotateZ(360deg); -moz-transform:rotateZ(360deg); -webkit-transform:rotateZ(360deg); -webkit-transform:rotateZ(360deg); transform:rotateZ(360deg); } } @-moz-keyframes loadingIconAni { 0% { -ms-transform:rotateZ(0deg); -moz-transform:rotateZ(0deg); -webkit-transform:rotateZ(0deg); transform:rotateZ(0deg); } 100% { -ms-transform:rotateZ(360deg); -moz-transform:rotateZ(360deg); -webkit-transform:rotateZ(360deg); -webkit-transform:rotateZ(360deg); transform:rotateZ(360deg); } } @-webkit-keyframes loadingIconAni { 0% { -ms-transform:rotateZ(0deg); -moz-transform:rotateZ(0deg); -webkit-transform:rotateZ(0deg); transform:rotateZ(0deg); } 100% { -ms-transform:rotateZ(360deg); -moz-transform:rotateZ(360deg); -webkit-transform:rotateZ(360deg); -webkit-transform:rotateZ(360deg); transform:rotateZ(360deg); } } @keyframes loadingIconAni { 0% { -ms-transform:rotateZ(0deg); -moz-transform:rotateZ(0deg); -webkit-transform:rotateZ(0deg); transform:rotateZ(0deg); } 100% { -ms-transform:rotateZ(360deg); -moz-transform:rotateZ(360deg); -webkit-transform:rotateZ(360deg); -webkit-transform:rotateZ(360deg); transform:rotateZ(360deg); } } /* Bridge End */ /* 약관 개정 안내 MW 하위버전 Start */ .onestore-login-conditions-wrap {} .onestore-login-conditions-wrap .onestore-login-ti { border-bottom: 1px solid #e9e9e9; padding: 0 0 25px; margin: 0 25px 25px; } .onestore-login-conditions-wrap .onestore-login-ti span { font-size: 14px; line-height: 21px; color: #000000; text-align: left; } .onestore-login-conditions-wrap .listgroup-info { margin: 0 25px 45px;} .onestore-login-conditions-wrap .listgroup-info-list {} .onestore-login-conditions-wrap .listgroup-info-list li { position: relative; padding: 0 30px 0 12px; font-size: 13px; color: #8c8c8c; line-height: 20px; } .onestore-login-conditions-wrap .listgroup-info-list.link li { margin-top: 16px; padding: 0 30px 0 12px;} .onestore-login-conditions-wrap .listgroup-info-list.link li:first-of-type { margin-top: 0; } .onestore-login-conditions-wrap .listgroup-info-list li:before { position: absolute; content: ''; left: 0; top: 9px; width: 4px; height: 4px; background: #828282; display: block; -ms-border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } .onestore-login-conditions-wrap .listgroup-info-list.link li span { font-size: 14px;color: #000000; line-height: 19px; display: block;} .onestore-login-conditions-wrap .listgroup-info-list.link li a { position: absolute; right: 0; top: 0; height: 100%; display: block;} .onestore-login-conditions-wrap .listgroup-info-list.link li a .icon-controller-mark { position: relative; right: 0; top: 50%; margin-top: -8px; display: block;} /* 약관 개정 안내 MW 하위버전 End */ /* 약관 Start */ .terms-date-wrap { margin:0 20px;} .terms-date-wrap .terms-date-inner {display: table; width: 100%;} .terms-date-wrap .terms-date-inner .formselectbox {display:table-cell;} .terms-date-wrap .terms-date-inner .formselectbox .formselectbox-col.selected .form-select-control span {letter-spacing: 0;} .terms-date-wrap .terms-date-inner .forminputbox-btn {display:table-cell; width:80px; text-align: right;} .terms-date-wrap .terms-date-inner .forminputbox-btn .btn-ssm {min-width: 60px;} .terms-link-wrap { margin:0 20px;} .terms-link-wrap .terms-link-inner {background-color: #f7f7f8; padding:15px 20px 10px; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px;} .terms-link-wrap .terms-link-inner ul {} .terms-link-wrap .terms-link-inner ul li {display: none;} .terms-link-wrap .terms-link-inner ul li em {display:table; width: 100%;} .terms-link-wrap .terms-link-inner ul li em span {color:#454545; font-size:13px; line-height: 24px; display: table-cell; width: 58px;} .terms-link-wrap .terms-link-inner ul li em a {color:#454545; font-size:13px; text-decoration: underline; line-height: 24px; margin:0 0 0 25px; display: table-cell;} .terms-link-wrap .terms-link-more { line-height: 35px; margin:10px 0 0;} .terms-link-wrap .terms-link-more a { line-height: 35px; text-align: center; color:#3e3877; font-size:14px; display:block;} .conditions-box-wrap { margin: 0 20px;} .conditions-box-wrap .conditions-box-co {} .conditions-box-wrap .conditions-box-hidden-title { display: none; } .conditions-box-wrap .conditions-box-co .conditions-section h2 { font-size: 16px; line-height: 24px; margin: 20px 0 0;} .terms-link-wrap + .conditions-box-wrap .conditions-box-co .conditions-section h2 { margin: 40px 0 0; } .conditions-box-wrap .conditions-box-co .conditions-section > p { font-size: 13px; line-height: 21px; color: #8c8c8c; margin: 20px 0 0 0;} .conditions-box-wrap .conditions-box-co .conditions-section h3 { display: block; font-size: 14px; line-height: 20px; margin: 15px 0 5px 0; font-weight: 200;} .conditions-box-wrap .conditions-box-co .conditions-section h2 + p , .conditions-box-wrap .conditions-box-co .conditions-section table + p { margin:10px 0 0 0; } .conditions-box-wrap .conditions-box-co .conditions-section .conditions-depth p { font-size: 13px; line-height: 18px; color: #8c8c8c; margin: 4px 0 0 0;} .conditions-box-wrap .conditions-box-co .conditions-section .conditions-depth table + p { margin:20px 0 0 0;} .conditions-box-wrap .conditions-box-co .conditions-section h3 + table {margin:4px 0 0;} .conditions-box-wrap .conditions-box-co .conditions-section ol li table.conditions-table {margin:10px 0 0;} .conditions-box-wrap .conditions-box-co .conditions-section .conditions-depth p a {font-size:13px; color:#3e3877;} .conditions-box-wrap .conditions-box-co .conditions-section ol li , .conditions-box-wrap .conditions-box-co .conditions-section ul li , .conditions-box-wrap .conditions-box-co .conditions-section dl { font-size: 13px; line-height: 19px; color: #8c8c8c; margin: 5px 0 0 0; } .conditions-box-wrap .conditions-box-co .conditions-text-primary, .conditions-box-wrap .conditions-box-co .conditions-section .conditions-depth p.conditions-text-primary { color:#000000; margin:20px 0 0 0; /* color:#ff3543; */} .conditions-box-wrap .conditions-box-co .conditions-section ol li ol li { margin: 0; } .conditions-box-wrap .conditions-box-co .conditions-section ul.conditions-ul-bg { margin:17px 0; padding: 15px 20px; background: #f5f5f5; -ms-border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; } .conditions-box-wrap p + table {margin-top: 10px;} .conditions-box-wrap .conditions-box-co .conditions-section ul.conditions-ul-bg li { margin:0 0 0 3px; text-indent: -3px;color: #8c8c8c;} .conditions-box-wrap .conditions-box-co .conditions-section ul.conditions-ul-bg li a { line-height: 21px; font-size:13px; color: #3e3877;} .conditions-box-wrap.conditions-box-wrap2 {letter-spacing: 0;} .conditions-box-wrap.conditions-box-wrap2 .conditions-box-co .conditions-section h2 {margin: 10px 0 0;} .conditions-box-wrap.conditions-box-wrap2 .conditions-box-co .conditions-section a {} .conditions-box-wrap table { margin-top: 20px;table-layout: fixed;width: 100%; border: 0; border-collapse: collapse; border-spacing: 0; empty-cells: show; word-wrap: break-word; } .conditions-box-wrap table thead th { border-left: 1px solid #d9d9d9;padding: 7px 0 7px 0; font-size: 12px; color: #000000; text-align: center; text-indent: 0; border-top: 1px solid #d9d9d9; font-weight: normal;} .conditions-box-wrap table thead th:first-child { border-left-width: 0;} .conditions-box-wrap table tbody { border-top: 1px solid #d9d9d9; } .conditions-box-wrap table tbody td{ color:#8c8c8c; border-left: 1px solid #d9d9d9;padding: 5px 5px 5px 5px; font-size: 11px; line-height: 14px; text-indent: 0; border-bottom: 1px solid #d9d9d9; } .conditions-box-wrap table tbody td:first-child { border-left-width: 0; } .conditions-box-wrap .conditions-box-co .conditions-section table ol li , .conditions-box-wrap .conditions-box-co .conditions-section table ul li { font-size:11px; line-height: 14px; } .conditions-box-wrap table.conditions-table tbody th {padding: 5px 5px 5px 5px; font-size: 12px; line-height: 14px; text-indent: 0; border-bottom: 1px solid #d9d9d9;font-weight: normal;} .conditions-box-wrap .conditions-box-co .form-default-submit { margin:20px 0 0 0; } .conditions-box-wrap .conditions-box-co .form-default-submit ul { text-align: center; display: block; } .conditions-box-wrap .conditions-box-co .form-default-submit ul li { margin:10px 2px 0 3px; min-width: 230px; display:inline-block; } .conditions-box-wrap .conditions-box-co .form-default-submit ul li .btn-og { padding: 11px 28px 11px 28px; min-width: 100%; font-size: 16px; color: #ffffff; line-height: 21px; text-align: center; border: 1px solid #272558; outline-width: 0; background: #272558; -ms-border-radius: 23px; -moz-border-radius: 23px; -webkit-border-radius: 23px; border-radius: 23px; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;box-sizing: border-box; display: inline-block; } .conditions-box-wrap .conditions-box-co .form-default-submit ul li .btn-og.btn-og-out { color: #3e3877; border-color: #acaac4; background: #ffffff; } .conditions-box-wrap .conditions-box-co .form-default-submit ul li .btn-og em {margin: 0 2px 0 0; letter-spacing: 0;} .terms-box-title { font-size:16px; line-height:22px; font-weight:bold; margin:10px 20px 25px; } /* old ver */ .conditionsList { margin:0 20px; background-color: #f7f7f8; padding: 15px 20px 10px; -ms-border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; } .conditionsList ul {display: block;} .conditionsList ul:first-child {display:block;} .conditionsList ul li { display:none; width:100%; } .conditionsList ul li span { display:table-cell; color: #454545; font-size: 13px; line-height: 24px; width: 58px;} .conditionsList ul li a { display:table-cell; color: #454545; font-size: 13px; text-decoration: underline; line-height: 24px; margin: 0 0 0 25px; } .conditionsList .terms-link-more { line-height: 35px; margin:10px 0 0;} .conditionsList .terms-link-more a { line-height: 35px; text-align: center; color:#3e3877; font-size:14px; display:block;} .conditions-box-wrap .conditionsList, .conditions-box-wrap .conditionsBox {margin:0;} .conditionsBox { margin: 0 20px; } .conditionsBox h3 { padding:30px 0 20px 0; margin:0; font-size:18px; display:block; } .conditionsBox h3 + h4 { margin-top:0; } .conditionsBox h4 { font-size:16px; line-height: 24px; margin:40px 0 0; } .conditionsBox em { display: block; font-size: 14px; line-height: 24px; margin: 10px 0 5px 0; font-weight: bold; } .conditionsBox em + table {margin-top:4px;} .conditionsBox p { font-size: 13px; line-height: 21px; color: #8c8c8c; margin:4px 0 0 0; } .conditionsBox.conditionsBox2 .fontBold {font-size: 14px; line-height: 24px; margin: 10px 0 5px 0; color: #000000;} .conditionsBox table { margin-top: 20px;table-layout: fixed;width: 100%; border: 0; border-collapse: collapse; border-spacing: 0; empty-cells: show; } .conditionsBox br + table { margin-top: 0;} .conditionsBox br + p + table { margin-top: 10px;} .conditionsBox table thead th { border-left: 1px solid #d9d9d9;padding: 7px 0 7px 0; font-size: 12px; color: #000000; text-align: center; text-indent: 0; border-top: 1px solid #d9d9d9; font-weight: normal;} .conditionsBox table thead th:first-child { border-left-width: 0;} .conditionsBox table tbody { border-top: 1px solid #d9d9d9; } .conditionsBox table tbody td{ color:#8c8c8c; border-left: 1px solid #d9d9d9;padding: 5px 5px 5px 5px; font-size: 11px; line-height: 14px; text-indent: 0; border-bottom: 1px solid #d9d9d9; } .conditionsBox table tbody td:first-child { border-left-width: 0; } /* 약관 End */ /* 메인 Start */ /* header Start */ #wrap.main {padding:0; margin:0; max-width: none; overflow: hidden;} #wrap.main #container {padding-bottom:0; background:#e8e8eb;} #wrap.main #container .onestore-intro-wrap {background: #ffffff;} .mainheader {position: absolute;left: 0; top: 0; width: 100%; height: 70px; z-index: 101;} .mainheader .header-co {max-width:1700px; margin:0 auto; padding:20px 7.76% 20px 7.76%; box-sizing: border-box;} .mainheader .header-co .header-co-full { } .mainheader .header-co .header-link { position:relative; padding:0 0 0 38px; height:30px; display:block; } .mainheader .header-co .header-link .icon-back { position:absolute; left:0; top:0; } .mainheader .header-co .header-link span { font-size:17px; color:#010101; line-height:30px; display:inline-block; } .mainheader .header-co .header-co-inner { position: relative; width: 100%; height: 100%;} .mainheader .header-co .header-co-inner .header-co-left {height:30px; } .mainheader .header-co .header-co-inner .header-co-left .header-link { position: relative; padding: 0 30px 0 125px; height: 30px;} .mainheader .header-co .header-co-inner .header-co-left .header-link .icon-back { position:relative; vertical-align:top; } .mainheader .header-co .header-co-inner .header-co-left .header-link .header-link-home { position: absolute; left:0; top:0; display: inline-block; width: 125px; vertical-align: top;} .mainheader .header-co .header-co-inner .header-co-left .header-link .header-link-home .icon-logo {} .mainheader .header-co .header-co-inner .header-co-left .header-link .icon-ti-arrow { display: inline-block; vertical-align: top; padding:0 5px 0 0; float:left;} .mainheader .header-co .header-co-inner .header-co-left .header-link span {font-size: 17px; color: #010101; line-height: 30px; display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} .mainheader .header-co .header-co-inner .header-co-right { position:absolute; right:0; top:0; } .mainheader .header-co .header-co-inner .header-co-right .header-link { float:left; margin-left:10px; height:30px; padding:0; } .mainheader .header-co .header-co-inner .header-co-right .header-link .icon-back { position:relative; } .mainheader .header-co .header-co-inner .header-co-right .header-link:first-of-type { margin-left:0; } .mainheader .header-co .header-co-inner .header-co-right .header-link-app { width:30px; background-repeat:no-repeat; background-position:center center; -ms-border-radius:7px; -moz-border-radius:7px; -webkit-border-radius:7px; border-radius:7px; -ms-background-size:30px 30px; -moz-background-size:30px 30px; -webkit-background-size:30px 30px; background-size:30px 30px; } /* header end */ /* content Start */ .onestore-intro-wrap {position:relative;} .onestore-intro-wrap .onestore-intro-inner {position:relative; width:100%;} .onestore-intro-wrap .onestore-intro-inner .onestore-intro-bg {max-width:1920px; margin:0 auto;} .onestore-intro-wrap .onestore-intro-inner .onestore-intro-bg img {width:100%;} .onestore-intro-wrap .onestore-intro-inner .onestore-intro-text { position:absolute; left:50%; top:0; width:100%; max-width:1700px; height:100%; padding:0 0 0 7.76%; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; -ms-transform: translate3d(-50%, 0, 0); -moz-transform: translate3d(-50%, 0, 0); -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } .onestore-intro-wrap .onestore-intro-inner .onestore-intro-text .onestore-intro-text-ta { width:33.82%; height:100%; table-layout:fixed; display:table; } .onestore-intro-wrap .onestore-intro-inner .onestore-intro-text .onestore-intro-text-cell { width:100%; height:100%; vertical-align:middle; display:table-cell; } .onestore-intro-wrap .onestore-intro-inner .onestore-intro-text .onestore-intro-text-cell img { width:100%; } .onestore-intro-wrap .onestore-intro-inner .onestore-intro-text .onestore-intro-text-box { position:relative; } .onestore-intro-wrap .onestore-intro-inner .onestore-intro-text .onestore-intro-text-box a {position:absolute;left:0; top:68.5%;width:58%; height:20.5%;text-indent: -99999px; overflow: hidden;} .onestore-app-wrap {position:relative; width: 100%; background-color:#171232;} .onestore-app-wrap .onestore-app-inner { max-width: 1200px; margin:0 auto; padding:0 60px; box-sizing: border-box; } .onestore-app-wrap .onestore-app-inner img {width: 100%;} .onestore-section-wrap { position:relative; width: 100%; background-color:#f2f2f5;} .onestore-section-wrap.onestore-section-wrap-01, .onestore-section-wrap.onestore-section-wrap-04 {background-color:#e8e8eb;} .onestore-section-wrap .onestore-section-inner {max-width: 1200px; margin:0 auto; padding:0 60px; box-sizing: border-box;} .onestore-section-wrap .onestore-section-inner .onestore-item-left-wrap {float:left;} .onestore-section-wrap .onestore-section-inner .onestore-item-right-wrap {float:right;} .onestore-section-wrap.onestore-section-wrap-01 .onestore-section-inner .onestore-item-left-wrap , .onestore-section-wrap.onestore-section-wrap-02 .onestore-section-inner .onestore-item-left-wrap { float:right; } .onestore-section-wrap.onestore-section-wrap-01 .onestore-section-inner .onestore-item-right-wrap , .onestore-section-wrap.onestore-section-wrap-02 .onestore-section-inner .onestore-item-right-wrap { float:left; } .onestore-section-wrap .onestore-section-inner .onestore-item-num-wrap { width:42.5%;} .onestore-section-wrap .onestore-section-inner .onestore-item-img-wrap { width: 34.38%; padding: 11.2% 2.96% 5.6% 1.97%;} .onestore-section-wrap .onestore-section-inner .onestore-item-left-wrap img {width: 100%;} .onestore-section-wrap .onestore-section-inner .onestore-item-right-wrap img {width: 100%;} .onestore-btn-wrap {position:relative; width: 100%; background-color:#e8e8eb;} .onestore-btn-wrap .onestore-btn-inner { max-width: 1200px; margin:0 auto; box-sizing: border-box; } .onestore-btn-wrap .onestore-btn-inner img {width: 100%;} /* .onestore-btn-wrap .onestore-btn-inner a {position:absolute; left:38%; top:0;width:24%; height:50.5%;text-indent: -99999px;} */ /* content End */ /* footer Start */ #footer { position:relative; background-color:#181438;} .notice-content-wrap { position:relative; border-bottom:1px solid rgba(255,255,255,0.1); } .notice-content-wrap .notice-content-inner { position:relative; max-width: 1200px; margin:0 auto; padding:35px 50px; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .notice-content-wrap .notice-content-inner dl { position:relative;padding: 0 50px 0 0;} .notice-content-wrap .notice-content-inner dl dt { line-height:30px;font-weight:bold; float:left; color:#e8e8eb;font-size:14px;padding:0 20px 0 0;} .notice-content-wrap .notice-content-inner dl dd { display: block;} .notice-content-wrap .notice-content-inner dl dd a { line-height:30px;color:#e8e8eb;font-size:14px;display:block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} .notice-content-wrap .notice-content-inner .notice-more-btn { width:30px; height:30px; color:#e8e8eb; position: absolute; top:35px; right:50px; display:inline-block} .footer-content-wrap { position:relative; max-width: 1200px; margin:0 auto; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .footer-content-wrap .footer-link-wrap {padding:50px 25px;} .footer-content-wrap .footer-link-wrap ul.conditions-item-wrap li:after {content: ""; width:1px; height:10px;background-color:rgba(255,255,255,0.2); position: absolute; right:0;top:6px;display: inline-block;} .footer-content-wrap .footer-link-wrap ul.conditions-item-wrap li:last-of-type:after {display: none;} .footer-content-wrap .contact-item-wrap {padding:8px 0 0;} .footer-content-wrap .contact-item-wrap em {letter-spacing: 0; padding: 0 0 0 10px; display: inline-block;} .footer-content-wrap .footer-company-wrap {font-size:12px;padding:0 5% 50px; line-height:19px;color:rgba(255,255,255,0.6);max-width:800px; margin:0 auto;} .footer-content-wrap .footer-company-wrap > ul {display:table; width:100%;} .footer-content-wrap .footer-company-wrap > ul > li {display: table-cell; width:33.33%; padding:0 30px 0 0;} .footer-content-wrap .footer-company-wrap > ul > li.footer-company-onestore {padding:0;} .footer-content-wrap .footer-company-wrap a {font-size:12px; color:rgba(255,255,255,0.6); text-decoration: underline;} .footer-content-wrap .footer-company-wrap .footer-company-icon-box {display:block;margin:10px 0 0;} .footer-content-wrap .footer-info-wrap {text-align: center;} .footer-content-wrap .footer-info-wrap p {font-size:12px; color:rgba(255,255,255,0.6);padding:0 20px 10px;} .footer-content-wrap .footer-info-wrap p.footer-logo {font-size:13px; letter-spacing: 0; padding:0 0 25px 0;} /* footer End */ .onestore-intro-wrap .onestore-intro-inner-mobile {display: none;} .onestore-app-wrap .onestore-app-inner-mobile {display:none;} .onestore-section-wrap .onestore-section-title-mobile {display: none;} .onestore-btn-wrap .onestore-btn-inner-mobile {display: none;} .footer-content-wrap .footer-company-wrap > ul > li .footer-company-icon-box-mobile {display: none;} .footer-content-wrap .footer-sns-wrap .footer-sns-inner-mobile {display: none;} /* animation Start */ /* common text ani */ @-ms-keyframes textAni { 0% { opacity:0; -ms-transform: translate3d(0,5%,0); -moz-transform: translate3d(0,5%,0); -webkit-transform: translate3d(0,5%,0); transform: translate3d(0,5%,0); } 100% { opacity:1; -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } } @-moz-keyframes textAni { 0% { opacity:0; -ms-transform: translate3d(0,5%,0); -moz-transform: translate3d(0,5%,0); -webkit-transform: translate3d(0,5%,0); transform: translate3d(0,5%,0); } 100% { opacity:1; -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } } @-webkit-keyframes textAni { 0% { opacity:0; -ms-transform: translate3d(0,5%,0); -moz-transform: translate3d(0,5%,0); -webkit-transform: translate3d(0,5%,0); transform: translate3d(0,5%,0); } 100% { opacity:1; -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } } @keyframes textAni { 0% { opacity:0; -ms-transform: translate3d(0,5%,0); -moz-transform: translate3d(0,5%,0); -webkit-transform: translate3d(0,5%,0); transform: translate3d(0,5%,0); } 100% { opacity:1; -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } } .textAni { -ms-animation:textAni 0.6s ease-in-out forwards; -moz-animation:textAni 0.6s ease-in-out forwards; -webkit-animation:textAni 0.6s ease-in-out forwards; animation:textAni 0.6s ease-in-out forwards; } /* intro */ .onestore-intro-wrap .onestore-intro-inner .onestore-intro-text .onestore-intro-text-box { opacity: 0; -ms-transform: translate3d(0,10px,0); -moz-transform: translate3d(0,10px,0); -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0); } .onestore-intro-wrap .onestore-intro-inner-mobile .onestore-intro-text .onestore-intro-text-box { opacity: 0; -ms-transform: translate3d(0,10px,0); -moz-transform: translate3d(0,10px,0); -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0); } .onestore-intro-wrap .onestore-intro-inner .onestore-intro-item-list { position: absolute; top:0; left:0; width:100%; height:100%; } .onestore-intro-wrap .onestore-intro-inner .onestore-intro-item-list ul { position: relative; width:100%; height:100%; } .onestore-intro-wrap .onestore-intro-inner .onestore-intro-item-list ul li { position: absolute;} .onestore-intro-wrap .onestore-intro-inner .onestore-intro-item-list ul li.onestore-intro-phone { width:100%; height:100%; opacity: 0;} .onestore-intro-wrap .onestore-intro-inner .onestore-intro-item-list ul li.onestore-intro-app { width:100%; height:100%; opacity: 0;} .onestore-intro-wrap .onestore-intro-inner-mobile .onestore-intro-item-list { position: absolute; top:0; left:0; width:100%; height:100%;} .onestore-intro-wrap .onestore-intro-inner-mobile .onestore-intro-item-list ul { position: relative; width:100%; height:100%; } .onestore-intro-wrap .onestore-intro-inner-mobile .onestore-intro-item-list ul li { position: absolute;} .onestore-intro-wrap .onestore-intro-inner-mobile .onestore-intro-item-list ul li.onestore-intro-phone { width:100%; height:100%; opacity: 0; } .onestore-intro-wrap .onestore-intro-inner-mobile .onestore-intro-item-list ul li.onestore-intro-app { width:100%; height:100%; opacity: 0; } .onestore-intro-wrap .onestore-intro-phone.imgAni { -ms-animation:sectionOpaAni 0.7s linear forwards; -moz-animation:sectionOpaAni 0.7s linear forwards;-webkit-animation:sectionOpaAni 0.7s linear forwards; animation:sectionOpaAni 0.7s linear forwards; } .onestore-intro-wrap .onestore-intro-app.imgAni { -ms-animation:sectionOpaAni 0.7s linear 0.6s forwards;-moz-animation:sectionOpaAni 0.7s linear 0.6s forwards; -webkit-animation:sectionOpaAni 0.7s linear 0.6s forwards; animation:sectionOpaAni 0.7s linear 0.6s forwards; } /* onestore-app */ .onestore-app-wrap .onestore-app-inner { position: relative; width: 100%;} .onestore-app-wrap .onestore-app-inner .onestore-app-item-list { position: absolute; top:0; left:0; width:100%; height:100%; } .onestore-app-wrap .onestore-app-inner .onestore-app-item-list ul { position: relative; width:100%; height:100%; } .onestore-app-wrap .onestore-app-inner .onestore-app-item-list ul li { position: absolute;} .onestore-app-wrap .onestore-app-inner .onestore-app-item-list ul li.onestore-app-title { width:79.27%; height:32%; left:9.77%; top:14.88%; opacity: 0; -ms-transform: translate3d(0,10px,0); -moz-transform: translate3d(0,10px,0); -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0); } .onestore-app-wrap .onestore-app-inner .onestore-app-item-list ul li.onestore-app-bar { width:18.55%; height:8.48%; left:44.43%; top:62.56%; -ms-transform: scale(0,1); -moz-transform: scale(0,1); -webkit-transform: scale(0,1); transform: scale(0,1); -ms-transform-origin: 53.61% 66.88%; -moz-transform-origin: 53.61% 66.88%; -webkit-transform-origin: 53.61% 66.88%; transform-origin: 53.61% 66.88%; } .onestore-app-wrap .onestore-app-inner .onestore-app-item-list ul li.onestore-app-icon { width:14.94%; height:35.2%; left:62.99%; top:49.76%; opacity: 0; -ms-transform: translate3d(-111.5%,0,0); -moz-transform: translate3d(-111.5%,0,0); -webkit-transform: translate3d(-111.5%,0,0); transform: translate3d(-111.5%,0,0); } .onestore-app-wrap .onestore-app-inner .onestore-app-item-list ul li.onestore-app-integrated { width:21.48%; height:35.2%; left:22.95%; top:49.76%; opacity: 0; -ms-transform: translate3d(75%,0,0); -moz-transform: translate3d(75%,0,0); -webkit-transform: translate3d(75%,0,0); transform: translate3d(75%,0,0); } @-ms-keyframes appAni01 { 0% { -ms-transform: scale(0,1); -moz-transform: scale(0,1); -webkit-transform: scale(0,1); transform: scale(0,1); } 20% { -ms-transform: scale(0,1); -moz-transform: scale(0,1); -webkit-transform: scale(0,1); transform: scale(0,1); } 100% { -ms-transform: scale(1,1); -moz-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); } } @-moz-keyframes appAni01 { 0% { -ms-transform: scale(0,1); -moz-transform: scale(0,1); -webkit-transform: scale(0,1); transform: scale(0,1); } 20% { -ms-transform: scale(0,1); -moz-transform: scale(0,1); -webkit-transform: scale(0,1); transform: scale(0,1); } 100% { -ms-transform: scale(1,1); -moz-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); } } @-webkit-keyframes appAni01 { 0% { -ms-transform: scale(0,1); -moz-transform: scale(0,1); -webkit-transform: scale(0,1); transform: scale(0,1); } 20% { -ms-transform: scale(0,1); -moz-transform: scale(0,1); -webkit-transform: scale(0,1); transform: scale(0,1); } 100% { -ms-transform: scale(1,1); -moz-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); } } @keyframes appAni01 { 0% { -ms-transform: scale(0,1); -moz-transform: scale(0,1); -webkit-transform: scale(0,1); transform: scale(0,1); } 20% { -ms-transform: scale(0,1); -moz-transform: scale(0,1); -webkit-transform: scale(0,1); transform: scale(0,1); } 100% { -ms-transform: scale(1,1); -moz-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); } } @-ms-keyframes appAni02 { 0% { -ms-transform: translate3d(-111.5%,0,0); -moz-transform: translate3d(-111.5%,0,0); -webkit-transform: translate3d(-111.5%,0,0); transform: translate3d(-111.5%,0,0); opacity: 0; } 20% { -ms-transform: translate3d(-111.5%,0,0); -moz-transform: translate3d(-111.5%,0,0); -webkit-transform: translate3d(-111.5%,0,0); transform: translate3d(-111.5%,0,0); opacity: 0; } 100% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } } @-moz-keyframes appAni02 { 0% { -ms-transform: translate3d(-111.5%,0,0); -moz-transform: translate3d(-111.5%,0,0); -webkit-transform: translate3d(-111.5%,0,0); transform: translate3d(-111.5%,0,0); opacity: 0; } 20% { -ms-transform: translate3d(-111.5%,0,0); -moz-transform: translate3d(-111.5%,0,0); -webkit-transform: translate3d(-111.5%,0,0); transform: translate3d(-111.5%,0,0); opacity: 0; } 100% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } } @-webkit-keyframes appAni02 { 0% { -ms-transform: translate3d(-111.5%,0,0); -moz-transform: translate3d(-111.5%,0,0); -webkit-transform: translate3d(-111.5%,0,0); transform: translate3d(-111.5%,0,0); opacity: 0; } 20% { -ms-transform: translate3d(-111.5%,0,0); -moz-transform: translate3d(-111.5%,0,0); -webkit-transform: translate3d(-111.5%,0,0); transform: translate3d(-111.5%,0,0); opacity: 0; } 100% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } } @keyframes appAni02 { 0% { -ms-transform: translate3d(-111.5%,0,0); -moz-transform: translate3d(-111.5%,0,0); -webkit-transform: translate3d(-111.5%,0,0); transform: translate3d(-111.5%,0,0); opacity: 0; } 20% { -ms-transform: translate3d(-111.5%,0,0); -moz-transform: translate3d(-111.5%,0,0); -webkit-transform: translate3d(-111.5%,0,0); transform: translate3d(-111.5%,0,0); opacity: 0; } 100% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } } @-ms-keyframes appAni03 { 0% { -ms-transform: translate3d(75%,0,0); -moz-transform: translate3d(75%,0,0); -webkit-transform: translate3d(75%,0,0); transform: translate3d(75%,0,0); opacity: 0;} 20% { -ms-transform: translate3d(75%,0,0); -moz-transform: translate3d(75%,0,0); -webkit-transform: translate3d(75%,0,0); transform: translate3d(75%,0,0); opacity: 1;} 100% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1;} } @-moz-keyframes appAni03 { 0% { -ms-transform: translate3d(75%,0,0); -moz-transform: translate3d(75%,0,0); -webkit-transform: translate3d(75%,0,0); transform: translate3d(75%,0,0); opacity: 0;} 20% { -ms-transform: translate3d(75%,0,0); -moz-transform: translate3d(75%,0,0); -webkit-transform: translate3d(75%,0,0); transform: translate3d(75%,0,0); opacity: 1;} 100% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1;} } @-webkit-keyframes appAni03 { 0% { -ms-transform: translate3d(75%,0,0); -moz-transform: translate3d(75%,0,0); -webkit-transform: translate3d(75%,0,0); transform: translate3d(75%,0,0); opacity: 0;} 20% { -ms-transform: translate3d(75%,0,0); -moz-transform: translate3d(75%,0,0); -webkit-transform: translate3d(75%,0,0); transform: translate3d(75%,0,0); opacity: 1;} 100% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1;} } @keyframes appAni03 { 0% { -ms-transform: translate3d(75%,0,0); -moz-transform: translate3d(75%,0,0); -webkit-transform: translate3d(75%,0,0); transform: translate3d(75%,0,0); opacity: 0;} 20% { -ms-transform: translate3d(75%,0,0); -moz-transform: translate3d(75%,0,0); -webkit-transform: translate3d(75%,0,0); transform: translate3d(75%,0,0); opacity: 1;} 100% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1;} } .onestore-app-bar.imgAni { -ms-animation:appAni01 1s ease-in-out 0.4s forwards;-moz-animation:appAni01 1s ease-in-out 0.4s forwards;-webkit-animation:appAni01 1s ease-in-out 0.4s forwards; animation:appAni01 1s ease-in-out 0.4s forwards; } .onestore-app-icon.imgAni { -ms-animation:appAni02 1s ease-in-out 0.4s forwards;-moz-animation:appAni02 1s ease-in-out 0.4s forwards;-webkit-animation:appAni02 1s ease-in-out 0.4s forwards; animation:appAni02 1s ease-in-out 0.4s forwards; } .onestore-app-integrated.imgAni { -ms-animation:appAni03 1s ease-in-out 0.4s forwards;-moz-animation:appAni03 1s ease-in-out 0.4s forwards;-webkit-animation:appAni03 1s ease-in-out 0.4s forwards; animation:appAni03 1s ease-in-out 0.4s forwards; } .onestore-app-wrap .onestore-app-inner-mobile { position: relative; width: 100%;} .onestore-app-wrap .onestore-app-inner-mobile .onestore-app-item-list { position: absolute; top:0; left:0; width:100%; height:100%; } .onestore-app-wrap .onestore-app-inner-mobile .onestore-app-item-list ul { position: relative; width:100%; height:100%; } .onestore-app-wrap .onestore-app-inner-mobile .onestore-app-item-list ul li { position: absolute;} .onestore-app-wrap .onestore-app-inner-mobile .onestore-app-item-list ul li.onestore-app-title { width:100%; height:34%; left:0; top:18%; opacity: 0; -ms-transform: translate3d(0,10px,0); -moz-transform: translate3d(0,10px,0); -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0); } .onestore-app-wrap .onestore-app-inner-mobile .onestore-app-item-list ul li.onestore-app-bar { width:25%; height:24%; left:42.22%; top:57.8%; -ms-transform: scale(0,1); -moz-transform: scale(0,1); -webkit-transform: scale(0,1); transform: scale(0,1); -ms-transform-origin: 53.61% 66.88%; -moz-transform-origin: 53.61% 66.88%; -webkit-transform-origin: 53.61% 66.88%; transform-origin: 53.61% 66.88%; } .onestore-app-wrap .onestore-app-inner-mobile .onestore-app-item-list ul li.onestore-app-icon { width:23.88%; height:24%; left:67.22%; top:57.8%; opacity: 0; -ms-transform: translate3d(-111.5%,0,0); -moz-transform: translate3d(-111.5%,0,0); -webkit-transform: translate3d(-111.5%,0,0); transform: translate3d(-111.5%,0,0); } .onestore-app-wrap .onestore-app-inner-mobile .onestore-app-item-list ul li.onestore-app-integrated { width:33.33%; height:24%; left:8.88%; top:57.8%; opacity: 0; -ms-transform: translate3d(75%,0,0); -moz-transform: translate3d(75%,0,0); -webkit-transform: translate3d(75%,0,0); transform: translate3d(75%,0,0); } /* common section1 ~ 4 */ .onestore-section-wrap {overflow: hidden;} .onestore-section-wrap .onestore-section-inner , .onestore-section-wrap .onestore-section-title-mobile { position: relative; width: 100%; } .onestore-section-wrap .onestore-section-inner .onestore-item-left-wrap , .onestore-section-wrap .onestore-section-inner .onestore-item-right-wrap , .onestore-section-wrap .onestore-section-title-mobile .onestore-item-left-wrap , .onestore-section-wrap .onestore-section-title-mobile .onestore-item-right-wrap{ position: relative; } .onestore-section-wrap .onestore-section-inner .section-num-list , .onestore-section-wrap .onestore-section-inner .section-img-list , .onestore-section-wrap .onestore-section-title-mobile .section-num-list { position: absolute; top:0; left:0; width:100%; height:100%; } .onestore-section-wrap .onestore-section-inner .section-num-list ul , .onestore-section-wrap .onestore-section-inner .section-img-list ul , .onestore-section-wrap .onestore-section-title-mobile .section-num-list ul { position: relative; width:100%; height:100%; } .onestore-section-wrap .onestore-section-inner .section-num-list ul li , .onestore-section-wrap .onestore-section-inner .section-img-list ul li , .onestore-section-wrap .onestore-section-title-mobile .section-num-list ul li { position: absolute; } .onestore-section-wrap .onestore-section-inner .section-num-list ul li.section-num-title , .onestore-section-wrap .onestore-section-inner .section-num-list ul li.section-num-img , .onestore-section-wrap .onestore-section-inner .section-img-list ul li.section-img-01 , .onestore-section-wrap .onestore-section-title-mobile .section-num-list ul li.section-num-title { width:100%; height:100%; left:0%; top:0%; } .onestore-section-wrap .onestore-section-inner .section-num-list ul li.section-num-title { opacity:0; z-index: 1002; -ms-transform: translate3d(0,10px,0); -moz-transform: translate3d(0,10px,0); -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0); } .onestore-section-wrap .onestore-section-inner .section-num-list ul li.section-num-img , .onestore-section-wrap .onestore-section-title-mobile .section-num-list ul li { opacity: 0; z-index: 1001; } .onestore-section-wrap .onestore-section-title-mobile .onestore-title-inner img { position: relative; z-index: 1000; } @-ms-keyframes sectionOpaAni { 0% { opacity:0; } 80% { opacity:1; } 100% { opacity:1; } } @-moz-keyframes sectionOpaAni { 0% { opacity:0; } 80% { opacity:1; } 100% { opacity:1; } } @-webkit-keyframes sectionOpaAni { 0% { opacity:0; } 80% { opacity:1; } 100% { opacity:1; } } @keyframes sectionOpaAni { 0% { opacity:0; } 80% { opacity:1; } 100% { opacity:1; } } .onestore-section-wrap-01 .onestore-section-inner .onestore-item-right-wrap > img.opaAni , .onestore-section-wrap-02 .onestore-section-inner .onestore-item-left-wrap > img.opaAni , .onestore-section-wrap-03 .onestore-section-inner .onestore-item-right-wrap > img.opaAni , .onestore-section-wrap-04 .onestore-section-inner .onestore-item-left-wrap > img.opaAni { -ms-animation:sectionOpaAni 0.3s linear forwards; -moz-animation:sectionOpaAni 0.3s linear forwards; -webkit-animation:sectionOpaAni 0.3s linear forwards; animation:sectionOpaAni 0.3s linear forwards; } .onestore-section-wrap-01 .section-img-01.opaAni , .onestore-section-wrap-02 .section-img-01.opaAni , .onestore-section-wrap-03 .section-img-01.opaAni , .onestore-section-wrap-04 .section-img-01.opaAni { -ms-animation:sectionOpaAni 0.6s linear 0.2s forwards;-moz-animation:sectionOpaAni 0.6s linear 0.2s forwards; -webkit-animation:sectionOpaAni 0.6s linear 0.2s forwards;animation:sectionOpaAni 0.6s linear 0.2s forwards; } .onestore-section-wrap .onestore-section-inner .section-num-list ul li.section-num-img.opaAni , .onestore-section-wrap .onestore-section-title-mobile .section-num-list ul li.opaAni { -ms-animation:sectionOpaAni 0.6s linear 0.2s forwards;-moz-animation:sectionOpaAni 0.6s linear 0.2s forwards;-webkit-animation:sectionOpaAni 0.6s linear 0.2s forwards; animation:sectionOpaAni 0.6s linear 0.2s forwards; } /* section01 */ .onestore-section-wrap-01 .onestore-section-inner .onestore-item-right-wrap > img { position:relative; z-index: 100; opacity: 0;} .onestore-section-wrap-01 .onestore-section-inner .section-img-list ul { width:56.714%; height:57%; left:20%; top:19.5%; overflow: hidden;} .onestore-section-wrap-01 .onestore-section-inner .section-img-list ul li.section-img-01 { width:100%; height:100%; opacity: 0;} @-ms-keyframes section01Ani { 0% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1;} 5% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 25% { -ms-transform: translate3d(0,-103%,0); -moz-transform: translate3d(0,-103%,0); -webkit-transform: translate3d(0,-103%,0); transform: translate3d(0,-103%,0); } 40% { -ms-transform: translate3d(0,-103%,0); -moz-transform: translate3d(0,-103%,0); -webkit-transform: translate3d(0,-103%,0); transform: translate3d(0,-103%,0); } 60% { -ms-transform: translate3d(0,-166%,0); -moz-transform: translate3d(0,-166%,0); -webkit-transform: translate3d(0,-166%,0); transform: translate3d(0,-166%,0); } 75% { -ms-transform: translate3d(0,-166%,0); -moz-transform: translate3d(0,-166%,0); -webkit-transform: translate3d(0,-166%,0); transform: translate3d(0,-166%,0); } 95% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1;} } @-moz-keyframes section01Ani { 0% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1;} 5% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 25% { -ms-transform: translate3d(0,-103%,0); -moz-transform: translate3d(0,-103%,0); -webkit-transform: translate3d(0,-103%,0); transform: translate3d(0,-103%,0); } 40% { -ms-transform: translate3d(0,-103%,0); -moz-transform: translate3d(0,-103%,0); -webkit-transform: translate3d(0,-103%,0); transform: translate3d(0,-103%,0); } 60% { -ms-transform: translate3d(0,-166%,0); -moz-transform: translate3d(0,-166%,0); -webkit-transform: translate3d(0,-166%,0); transform: translate3d(0,-166%,0); } 75% { -ms-transform: translate3d(0,-166%,0); -moz-transform: translate3d(0,-166%,0); -webkit-transform: translate3d(0,-166%,0); transform: translate3d(0,-166%,0); } 95% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1;} } @-webkit-keyframes section01Ani { 0% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1;} 5% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 25% { -ms-transform: translate3d(0,-103%,0); -moz-transform: translate3d(0,-103%,0); -webkit-transform: translate3d(0,-103%,0); transform: translate3d(0,-103%,0); } 40% { -ms-transform: translate3d(0,-103%,0); -moz-transform: translate3d(0,-103%,0); -webkit-transform: translate3d(0,-103%,0); transform: translate3d(0,-103%,0); } 60% { -ms-transform: translate3d(0,-166%,0); -moz-transform: translate3d(0,-166%,0); -webkit-transform: translate3d(0,-166%,0); transform: translate3d(0,-166%,0); } 75% { -ms-transform: translate3d(0,-166%,0); -moz-transform: translate3d(0,-166%,0); -webkit-transform: translate3d(0,-166%,0); transform: translate3d(0,-166%,0); } 95% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1;} } @keyframes section01Ani { 0% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1;} 5% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 25% { -ms-transform: translate3d(0,-103%,0); -moz-transform: translate3d(0,-103%,0); -webkit-transform: translate3d(0,-103%,0); transform: translate3d(0,-103%,0); } 40% { -ms-transform: translate3d(0,-103%,0); -moz-transform: translate3d(0,-103%,0); -webkit-transform: translate3d(0,-103%,0); transform: translate3d(0,-103%,0); } 60% { -ms-transform: translate3d(0,-166%,0); -moz-transform: translate3d(0,-166%,0); -webkit-transform: translate3d(0,-166%,0); transform: translate3d(0,-166%,0); } 75% { -ms-transform: translate3d(0,-166%,0); -moz-transform: translate3d(0,-166%,0); -webkit-transform: translate3d(0,-166%,0); transform: translate3d(0,-166%,0); } 95% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1;} } .onestore-section-wrap-01 .section-img-01.imgAni { -ms-animation:section01Ani 6s ease-in-out infinite; -moz-animation:section01Ani 6s ease-in-out infinite;-webkit-animation:section01Ani 6s ease-in-out infinite; animation:section01Ani 6s ease-in-out infinite; } .onestore-section-wrap .onestore-section-title-mobile .section-num-list ul li.section-num-title { opacity: 0; z-index: 5001;} /* section02 */ .onestore-section-wrap-02 .onestore-section-inner .onestore-item-left-wrap > img { position:relative; z-index: 100; opacity: 0;} .onestore-section-wrap-02 .onestore-section-inner .section-img-list ul {width:56.714%; height:56.5%; left:20%; top:19.9%;overflow: hidden; } .onestore-section-wrap-02 .onestore-section-inner .section-img-list ul li.section-img-01 {width:100%; height:100%; opacity: 0;} @-ms-keyframes section02Ani { 0% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } 5% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 25% { -ms-transform: translate3d(0,-110%,0); -moz-transform: translate3d(0,-110%,0); -webkit-transform: translate3d(0,-110%,0); transform: translate3d(0,-110%,0); } 40% { -ms-transform: translate3d(0,-110%,0); -moz-transform: translate3d(0,-110%,0); -webkit-transform: translate3d(0,-110%,0); transform: translate3d(0,-110%,0); } 60% { -ms-transform: translate3d(0,-180%,0); -moz-transform: translate3d(0,-180%,0); -webkit-transform: translate3d(0,-180%,0); transform: translate3d(0,-180%,0); } 70% { -ms-transform: translate3d(0,-180%,0); -moz-transform: translate3d(0,-180%,0); -webkit-transform: translate3d(0,-180%,0); transform: translate3d(0,-180%,0); } 95% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1;} } @-moz-keyframes section02Ani { 0% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } 5% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 25% { -ms-transform: translate3d(0,-110%,0); -moz-transform: translate3d(0,-110%,0); -webkit-transform: translate3d(0,-110%,0); transform: translate3d(0,-110%,0); } 40% { -ms-transform: translate3d(0,-110%,0); -moz-transform: translate3d(0,-110%,0); -webkit-transform: translate3d(0,-110%,0); transform: translate3d(0,-110%,0); } 60% { -ms-transform: translate3d(0,-180%,0); -moz-transform: translate3d(0,-180%,0); -webkit-transform: translate3d(0,-180%,0); transform: translate3d(0,-180%,0); } 70% { -ms-transform: translate3d(0,-180%,0); -moz-transform: translate3d(0,-180%,0); -webkit-transform: translate3d(0,-180%,0); transform: translate3d(0,-180%,0); } 95% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1;} } @-webkit-keyframes section02Ani { 0% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } 5% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 25% { -ms-transform: translate3d(0,-110%,0); -moz-transform: translate3d(0,-110%,0); -webkit-transform: translate3d(0,-110%,0); transform: translate3d(0,-110%,0); } 40% { -ms-transform: translate3d(0,-110%,0); -moz-transform: translate3d(0,-110%,0); -webkit-transform: translate3d(0,-110%,0); transform: translate3d(0,-110%,0); } 60% { -ms-transform: translate3d(0,-180%,0); -moz-transform: translate3d(0,-180%,0); -webkit-transform: translate3d(0,-180%,0); transform: translate3d(0,-180%,0); } 70% { -ms-transform: translate3d(0,-180%,0); -moz-transform: translate3d(0,-180%,0); -webkit-transform: translate3d(0,-180%,0); transform: translate3d(0,-180%,0); } 95% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1;} } @keyframes section02Ani { 0% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } 5% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 25% { -ms-transform: translate3d(0,-110%,0); -moz-transform: translate3d(0,-110%,0); -webkit-transform: translate3d(0,-110%,0); transform: translate3d(0,-110%,0); } 40% { -ms-transform: translate3d(0,-110%,0); -moz-transform: translate3d(0,-110%,0); -webkit-transform: translate3d(0,-110%,0); transform: translate3d(0,-110%,0); } 60% { -ms-transform: translate3d(0,-180%,0); -moz-transform: translate3d(0,-180%,0); -webkit-transform: translate3d(0,-180%,0); transform: translate3d(0,-180%,0); } 70% { -ms-transform: translate3d(0,-180%,0); -moz-transform: translate3d(0,-180%,0); -webkit-transform: translate3d(0,-180%,0); transform: translate3d(0,-180%,0); } 95% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1;} } .onestore-section-wrap-02 .section-img-01.imgAni { -ms-animation:section02Ani 6s ease-in-out infinite; -moz-animation:section02Ani 6s ease-in-out infinite;-webkit-animation:section02Ani 6s ease-in-out infinite; animation:section02Ani 6s ease-in-out infinite; } /* section03 */ .onestore-section-wrap-03 .onestore-section-inner .onestore-item-right-wrap > img { position:relative; z-index: 100; opacity: 0;} .onestore-section-wrap-03 .onestore-section-inner .section-img-list ul {width:56.714%; height:56.5%; left:20%; top:19.9%; overflow: hidden;} .onestore-section-wrap-03 .onestore-section-inner .section-img-list ul li.section-img-01 {width:100%; height:100%; opacity: 0;} .onestore-section-wrap-03 .onestore-section-inner .section-img-list ul li.section-img-02 {width:100%; height:100%; opacity: 0;} .onestore-section-wrap-03 .onestore-section-inner .section-img-list ul li.section-img-03 { width:14.374%; height:7.944%; border-radius: 50%; position: absolute; left:48%; top:28.7%; background:#000000; z-index: 50000; -ms-transform: scale(0); -moz-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); } .onestore-section-wrap-03 .onestore-section-inner .section-img-list ul li.section-img-04 { width:14.374%; height:7.944%; border-radius: 50%; position: absolute; left:12.4%; top:28.7%; background:#000000; z-index: 50000; -ms-transform: scale(0); -moz-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); } @-ms-keyframes section03Ani01 { 0% { opacity: 1; } 15% { opacity: 1; } 35% { opacity: 0; } 55% { opacity: 0; } 80% { opacity: 0; } 90% { opacity: 1; } 100% { opacity: 1; } } @-moz-keyframes section03Ani01 { 0% { opacity: 1; } 15% { opacity: 1; } 35% { opacity: 0; } 55% { opacity: 0; } 80% { opacity: 0; } 90% { opacity: 1; } 100% { opacity: 1; } } @-webkit-keyframes section03Ani01 { 0% { opacity: 1; } 15% { opacity: 1; } 35% { opacity: 0; } 55% { opacity: 0; } 80% { opacity: 0; } 90% { opacity: 1; } 100% { opacity: 1; } } @keyframes section03Ani01 { 0% { opacity: 1; } 15% { opacity: 1; } 35% { opacity: 0; } 55% { opacity: 0; } 80% { opacity: 0; } 90% { opacity: 1; } 100% { opacity: 1; } } @-ms-keyframes section03Ani02 { 0% { opacity: 0; } 15% { opacity: 0; } 30% { opacity: 1; } 65% { opacity: 1; } 80% { opacity: 1; } 95% { opacity: 0; } 100% { opacity: 0; } } @-moz-keyframes section03Ani02 { 0% { opacity: 0; } 15% { opacity: 0; } 30% { opacity: 1; } 65% { opacity: 1; } 80% { opacity: 1; } 95% { opacity: 0; } 100% { opacity: 0; } } @-webkit-keyframes section03Ani02 { 0% { opacity: 0; } 15% { opacity: 0; } 30% { opacity: 1; } 65% { opacity: 1; } 80% { opacity: 1; } 95% { opacity: 0; } 100% { opacity: 0; } } @keyframes section03Ani02 { 0% { opacity: 0; } 15% { opacity: 0; } 30% { opacity: 1; } 65% { opacity: 1; } 80% { opacity: 1; } 95% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes section03AniRound01 { 0% { -ms-transform: scale(0); -moz-transform: scale(0) ;-webkit-transform: scale(0); transform: scale(0); } 2% { -ms-transform: scale(0); -moz-transform: scale(0) ;-webkit-transform: scale(0); transform: scale(0); } 10% { -ms-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; } 100% { -ms-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; } } @-moz-keyframes section03AniRound01 { 0% { -ms-transform: scale(0); -moz-transform: scale(0) ;-webkit-transform: scale(0); transform: scale(0); } 2% { -ms-transform: scale(0); -moz-transform: scale(0) ;-webkit-transform: scale(0); transform: scale(0); } 10% { -ms-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; } 100% { -ms-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; } } @-webkit-keyframes section03AniRound01 { 0% { -ms-transform: scale(0); -moz-transform: scale(0) ;-webkit-transform: scale(0); transform: scale(0); } 2% { -ms-transform: scale(0); -moz-transform: scale(0) ;-webkit-transform: scale(0); transform: scale(0); } 10% { -ms-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; } 100% { -ms-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; } } @keyframes section03AniRound01 { 0% { -ms-transform: scale(0); -moz-transform: scale(0) ;-webkit-transform: scale(0); transform: scale(0); } 2% { -ms-transform: scale(0); -moz-transform: scale(0) ;-webkit-transform: scale(0); transform: scale(0); } 10% { -ms-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; } 100% { -ms-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; } } @-ms-keyframes section03AniRound02 { 0% { -ms-transform: scale(0); -moz-transform: scale(0) ;-webkit-transform: scale(0); transform: scale(0); } 60% { -ms-transform: scale(0); -moz-transform: scale(0) ;-webkit-transform: scale(0); transform: scale(0); } 68% { -ms-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; } 100% { -ms-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; } } @-moz-keyframes section03AniRound02 { 0% { -ms-transform: scale(0); -moz-transform: scale(0) ;-webkit-transform: scale(0); transform: scale(0); } 60% { -ms-transform: scale(0); -moz-transform: scale(0) ;-webkit-transform: scale(0); transform: scale(0); } 68% { -ms-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; } 100% { -ms-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; } } @-webkit-keyframes section03AniRound02 { 0% { -ms-transform: scale(0); -moz-transform: scale(0) ;-webkit-transform: scale(0); transform: scale(0); } 60% { -ms-transform: scale(0); -moz-transform: scale(0) ;-webkit-transform: scale(0); transform: scale(0); } 68% { -ms-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; } 100% { -ms-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; } } @keyframes section03AniRound02 { 0% { -ms-transform: scale(0); -moz-transform: scale(0) ;-webkit-transform: scale(0); transform: scale(0); } 60% { -ms-transform: scale(0); -moz-transform: scale(0) ;-webkit-transform: scale(0); transform: scale(0); } 68% { -ms-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; } 100% { -ms-transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; } } .onestore-section-wrap-03 .section-img-01.imgAni { -ms-animation:section03Ani01 4s linear infinite;-moz-animation:section03Ani01 4s linear infinite;-webkit-animation:section03Ani01 4s linear infinite;animation:section03Ani01 4s linear infinite; } .onestore-section-wrap-03 .section-img-02.imgAni { -ms-animation:section03Ani02 4s linear infinite;-moz-animation:section03Ani02 4s linear infinite; -webkit-animation:section03Ani02 4s linear infinite;animation:section03Ani02 4s linear infinite; } .onestore-section-wrap-03 .section-img-03.imgAni { -ms-animation:section03AniRound01 4s linear infinite; -moz-animation:section03AniRound01 4s linear infinite;-webkit-animation:section03AniRound01 4s linear infinite; animation:section03AniRound01 4s linear infinite; } .onestore-section-wrap-03 .section-img-04.imgAni { -ms-animation:section03AniRound02 4s linear infinite; -moz-animation:section03AniRound02 4s linear infinite;-webkit-animation:section03AniRound02 4s linear infinite; animation:section03AniRound02 4s linear infinite; } .onestore-section-wrap-03 .onestore-section-inner .section-coupon-list {position:absolute; left:0; top:0; width:100%; height:100%;} .onestore-section-wrap-03 .onestore-section-inner .section-coupon-list ul {position: relative; left:0; top:0; width:100%; height:100%;} .onestore-section-wrap-03 .onestore-section-inner .section-coupon-list ul li {position: absolute; z-index: 500;} .onestore-section-wrap-03 .onestore-section-inner .section-coupon-list ul li.section-coupon-01 { width:26.43%; height:16.72%; top:25.63%; left:80%; opacity: 0; transform: translate3d(0, -50%, 0);} .onestore-section-wrap-03 .onestore-section-inner .section-coupon-list ul li.section-coupon-02 { width:21.84%; height:18.18%; top:46.9%; left:-8%; opacity: 0; transform: translate3d(0, -50%, 0);} .onestore-section-wrap-03 .onestore-section-inner .section-coupon-list ul li.section-coupon-03 { width:35.91%; height:22.72%; top:63.63%; right:-5%; opacity: 0; transform: translate3d(0, -50%, 0);} @-ms-keyframes bounceInDown { from, 60%, 75%, 90%, to { -ms-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -moz-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { -ms-transform: translate3d(0, -50%, 0);-moz-transform: translate3d(0, -50%, 0);-webkit-transform: translate3d(0, -50%, 0);transform: translate3d(0, -50%, 0); opacity: 0;} 40% { -ms-transform: translate3d(0, 15px, 0);-moz-transform: translate3d(0, 15px, 0);-webkit-transform: translate3d(0, 15px, 0);transform: translate3d(0, 15px, 0); opacity: 1;} 60% { -ms-transform: translate3d(0, 7px, 0);-moz-transform: translate3d(0, 7px, 0);-webkit-transform: translate3d(0, 7px, 0);transform: translate3d(0, 7px, 0); } 90% { -ms-transform: translate3d(0, 1px, 0);-moz-transform: translate3d(0, 1px, 0);-webkit-transform: translate3d(0, 1px, 0);transform: translate3d(0, 1px, 0); } to { -ms-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0); opacity: 1; } } @-moz-keyframes bounceInDown { from, 60%, 75%, 90%, to { -ms-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -moz-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { -ms-transform: translate3d(0, -50%, 0);-moz-transform: translate3d(0, -50%, 0);-webkit-transform: translate3d(0, -50%, 0);transform: translate3d(0, -50%, 0); opacity: 0;} 40% { -ms-transform: translate3d(0, 15px, 0);-moz-transform: translate3d(0, 15px, 0);-webkit-transform: translate3d(0, 15px, 0);transform: translate3d(0, 15px, 0); opacity: 1;} 60% { -ms-transform: translate3d(0, 7px, 0);-moz-transform: translate3d(0, 7px, 0);-webkit-transform: translate3d(0, 7px, 0);transform: translate3d(0, 7px, 0); } 90% { -ms-transform: translate3d(0, 1px, 0);-moz-transform: translate3d(0, 1px, 0);-webkit-transform: translate3d(0, 1px, 0);transform: translate3d(0, 1px, 0); } to { -ms-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0); opacity: 1; } } @-webkit-keyframes bounceInDown { from, 60%, 75%, 90%, to { -ms-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -moz-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { -ms-transform: translate3d(0, -50%, 0);-moz-transform: translate3d(0, -50%, 0);-webkit-transform: translate3d(0, -50%, 0);transform: translate3d(0, -50%, 0); opacity: 0;} 40% { -ms-transform: translate3d(0, 15px, 0);-moz-transform: translate3d(0, 15px, 0);-webkit-transform: translate3d(0, 15px, 0);transform: translate3d(0, 15px, 0); opacity: 1;} 60% { -ms-transform: translate3d(0, 7px, 0);-moz-transform: translate3d(0, 7px, 0);-webkit-transform: translate3d(0, 7px, 0);transform: translate3d(0, 7px, 0); } 90% { -ms-transform: translate3d(0, 1px, 0);-moz-transform: translate3d(0, 1px, 0);-webkit-transform: translate3d(0, 1px, 0);transform: translate3d(0, 1px, 0); } to { -ms-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes bounceInDown { from, 60%, 75%, 90%, to { -ms-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -moz-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { -ms-transform: translate3d(0, -50%, 0);-moz-transform: translate3d(0, -50%, 0);-webkit-transform: translate3d(0, -50%, 0);transform: translate3d(0, -50%, 0); opacity: 0;} 40% { -ms-transform: translate3d(0, 15px, 0);-moz-transform: translate3d(0, 15px, 0);-webkit-transform: translate3d(0, 15px, 0);transform: translate3d(0, 15px, 0); opacity: 1;} 60% { -ms-transform: translate3d(0, 7px, 0);-moz-transform: translate3d(0, 7px, 0);-webkit-transform: translate3d(0, 7px, 0);transform: translate3d(0, 7px, 0); } 90% { -ms-transform: translate3d(0, 1px, 0);-moz-transform: translate3d(0, 1px, 0);-webkit-transform: translate3d(0, 1px, 0);transform: translate3d(0, 1px, 0); } to { -ms-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0); opacity: 1; } } .section-coupon-01.imgAni { -ms-animation:bounceInDown 0.8s linear 0.8s forwards;-moz-animation:bounceInDown 0.8s linear 0.8s forwards; -webkit-animation:bounceInDown 0.8s linear 0.8s forwards; animation:bounceInDown 0.8s linear 0.8s forwards; } .section-coupon-02.imgAni { -ms-animation:bounceInDown 0.8s linear 0.8s forwards; -moz-animation:bounceInDown 0.8s linear 0.8s forwards; -webkit-animation:bounceInDown 0.8s linear 0.8s forwards;animation:bounceInDown 0.8s linear 0.8s forwards; } .section-coupon-03.imgAni { -ms-animation:bounceInDown 0.8s linear 0.8s forwards; -moz-animation:bounceInDown 0.8s linear 0.8s forwards; -webkit-animation:bounceInDown 0.8s linear 0.8s forwards;animation:bounceInDown 0.8s linear 0.8s forwards; } @-ms-keyframes aniUpDown { from { -ms-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } 25% { -ms-transform: translate3d(0, 10px, 0); -moz-transform: translate3d(0, 10px, 0); -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 50% { -ms-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 75% { -ms-transform: translate3d(0, 10px, 0); -moz-transform: translate3d(0, 10px, 0); -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } to { -ms-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1;} } @-moz-keyframes aniUpDown { from { -ms-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } 25% { -ms-transform: translate3d(0, 10px, 0); -moz-transform: translate3d(0, 10px, 0); -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 50% { -ms-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 75% { -ms-transform: translate3d(0, 10px, 0); -moz-transform: translate3d(0, 10px, 0); -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } to { -ms-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1;} } @-webkit-keyframes aniUpDown { from { -ms-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } 25% { -ms-transform: translate3d(0, 10px, 0); -moz-transform: translate3d(0, 10px, 0); -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 50% { -ms-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 75% { -ms-transform: translate3d(0, 10px, 0); -moz-transform: translate3d(0, 10px, 0); -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } to { -ms-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1;} } @keyframes aniUpDown { from { -ms-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } 25% { -ms-transform: translate3d(0, 10px, 0); -moz-transform: translate3d(0, 10px, 0); -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 50% { -ms-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 75% { -ms-transform: translate3d(0, 10px, 0); -moz-transform: translate3d(0, 10px, 0); -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } to { -ms-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1;} } @-ms-keyframes aniDownUp{ from { -ms-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } 25% { -ms-transform: translate3d(0, -10px, 0); -moz-transform: translate3d(0, -10px, 0); -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 50% { -ms-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 75% { -ms-transform: translate3d(0, -10px, 0); -moz-transform: translate3d(0, -10px, 0); -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } to { -ms-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1;} } @-moz-keyframes aniDownUp{ from { -ms-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } 25% { -ms-transform: translate3d(0, -10px, 0); -moz-transform: translate3d(0, -10px, 0); -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 50% { -ms-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 75% { -ms-transform: translate3d(0, -10px, 0); -moz-transform: translate3d(0, -10px, 0); -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } to { -ms-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1;} } @-webkit-keyframes aniDownUp{ from { -ms-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } 25% { -ms-transform: translate3d(0, -10px, 0); -moz-transform: translate3d(0, -10px, 0); -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 50% { -ms-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 75% { -ms-transform: translate3d(0, -10px, 0); -moz-transform: translate3d(0, -10px, 0); -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } to { -ms-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1;} } @keyframes aniDownUp{ from { -ms-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } 25% { -ms-transform: translate3d(0, -10px, 0); -moz-transform: translate3d(0, -10px, 0); -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 50% { -ms-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 75% { -ms-transform: translate3d(0, -10px, 0); -moz-transform: translate3d(0, -10px, 0); -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } to { -ms-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1;} } .section-coupon-01.imgAni02 { -ms-animation:aniUpDown 7s infinite linear; -moz-animation:aniUpDown 7s infinite linear; -webkit-animation:aniUpDown 7s infinite linear; animation:aniUpDown 7s infinite linear; } .section-coupon-02.imgAni02 { -ms-animation:aniDownUp 7s infinite linear; -moz-animation:aniDownUp 7s infinite linear; -webkit-animation:aniDownUp 7s infinite linear; animation:aniDownUp 7s infinite linear; } .section-coupon-03.imgAni02 { -ms-animation:aniUpDown 7s infinite linear; -moz-animation:aniUpDown 7s infinite linear; -webkit-animation:aniUpDown 7s infinite linear; animation:aniUpDown 7s infinite linear; } /* section04 */ .onestore-section-wrap-04 .onestore-section-inner .onestore-item-left-wrap > img { position:relative; z-index: 100; opacity: 0;} .onestore-section-wrap-04 .onestore-section-inner .section-img-list ul { width:56.8%; height:60.9%; left:18.7%; top:20%; overflow: hidden;} .onestore-section-wrap-04 .onestore-section-inner .section-img-list ul li.section-img-01 {width:100%; height:100%; opacity: 0;} @-ms-keyframes section04Ani { 0% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1;} 5% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 20% { -ms-transform: translate3d(0,-99%,0); -moz-transform: translate3d(0,-99%,0); -webkit-transform: translate3d(0,-99%,0); transform: translate3d(0,-99%,0); } 40% { -ms-transform: translate3d(0,-99%,0); -moz-transform: translate3d(0,-99%,0); -webkit-transform: translate3d(0,-99%,0); transform: translate3d(0,-99%,0); } 60% { -ms-transform: translate3d(0,-99%,0); -moz-transform: translate3d(0,-99%,0); -webkit-transform: translate3d(0,-99%,0); transform: translate3d(0,-99%,0); } 75% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } } @-moz-keyframes section04Ani { 0% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1;} 5% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 20% { -ms-transform: translate3d(0,-99%,0); -moz-transform: translate3d(0,-99%,0); -webkit-transform: translate3d(0,-99%,0); transform: translate3d(0,-99%,0); } 40% { -ms-transform: translate3d(0,-99%,0); -moz-transform: translate3d(0,-99%,0); -webkit-transform: translate3d(0,-99%,0); transform: translate3d(0,-99%,0); } 60% { -ms-transform: translate3d(0,-99%,0); -moz-transform: translate3d(0,-99%,0); -webkit-transform: translate3d(0,-99%,0); transform: translate3d(0,-99%,0); } 75% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } } @-webkit-keyframes section04Ani { 0% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1;} 5% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 20% { -ms-transform: translate3d(0,-99%,0); -moz-transform: translate3d(0,-99%,0); -webkit-transform: translate3d(0,-99%,0); transform: translate3d(0,-99%,0); } 40% { -ms-transform: translate3d(0,-99%,0); -moz-transform: translate3d(0,-99%,0); -webkit-transform: translate3d(0,-99%,0); transform: translate3d(0,-99%,0); } 60% { -ms-transform: translate3d(0,-99%,0); -moz-transform: translate3d(0,-99%,0); -webkit-transform: translate3d(0,-99%,0); transform: translate3d(0,-99%,0); } 75% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } } @keyframes section04Ani { 0% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1;} 5% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 20% { -ms-transform: translate3d(0,-99%,0); -moz-transform: translate3d(0,-99%,0); -webkit-transform: translate3d(0,-99%,0); transform: translate3d(0,-99%,0); } 40% { -ms-transform: translate3d(0,-99%,0); -moz-transform: translate3d(0,-99%,0); -webkit-transform: translate3d(0,-99%,0); transform: translate3d(0,-99%,0); } 60% { -ms-transform: translate3d(0,-99%,0); -moz-transform: translate3d(0,-99%,0); -webkit-transform: translate3d(0,-99%,0); transform: translate3d(0,-99%,0); } 75% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } } .onestore-section-wrap-04 .section-img-01.imgAni { -ms-animation:section04Ani 5s ease-in-out infinite; -moz-animation:section04Ani 5s ease-in-out infinite; -webkit-animation:section04Ani 5s ease-in-out infinite; animation:section04Ani 5s ease-in-out infinite; } /* floating btn */ .onestore-btn-wrap {position:relative; width: 100%; background-color:#e8e8eb;} .onestore-btn-wrap .onestore-btn-inner { max-width: 1200px; margin:0 auto; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .onestore-btn-wrap .onestore-btn-inner .floating-btn { position: fixed; width:100%; bottom:-150px; left:50%; z-index: 10000; display:block; -ms-transform: translate3d(-50%,0,0); -moz-transform: translate3d(-50%,0,0); -webkit-transform: translate3d(-50%,0,0); transform: translate3d(-50%,0,0); transition:bottom 0.3s; } .onestore-btn-wrap .onestore-btn-inner .floating-btn img { max-width: 1200px; position: relative; left:50%; width:100%; -ms-transform: translate3d(-50%,0,0); -moz-transform: translate3d(-50%,0,0); -webkit-transform: translate3d(-50%,0,0); transform: translate3d(-50%,0,0); } .onestore-btn-wrap .onestore-btn-inner .floating-btn a { position: absolute; top:0; left:36.2%; width:27.4%; height:70%; display:block; text-indent: -99999px;} .onestore-btn-wrap .onestore-btn-inner .floating-btn.fix { display:block; bottom:0; } .onestore-btn-wrap .onestore-btn-inner .floating-btn.stop { bottom:0; display: block; position: absolute !important; top:0 !important; opacity: 1 !important; } .onestore-btn-wrap .onestore-btn-inner-mobile { max-width: 1200px; margin:0 auto; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .onestore-btn-wrap .onestore-btn-inner-mobile .floating-btn { position: fixed; width:100%; bottom:0; left:50%; z-index: 10000; display: none; -ms-transform: translate3d(-50%,0,0); -moz-transform: translate3d(-50%,0,0); -webkit-transform: translate3d(-50%,0,0); transform: translate3d(-50%,0,0); } .onestore-btn-wrap .onestore-btn-inner-mobile .floating-btn img { max-width: 1200px; position: relative; left:50%; width:100%; -ms-transform: translate3d(-50%,0,0); -moz-transform: translate3d(-50%,0,0); -webkit-transform: translate3d(-50%,0,0); transform: translate3d(-50%,0,0); } .onestore-btn-wrap .onestore-btn-inner-mobile .floating-btn a { position: absolute; top:0; left:21%; width:58%; height:61%; display:block; text-indent: -99999px;} .onestore-btn-wrap .onestore-btn-inner-mobile .floating-btn.fix { display: block;} .onestore-btn-wrap .onestore-btn-inner-mobile .floating-btn.stop { display: block; position: absolute !important; top:0 !important;} .onestore-bar-wrap { position: relative; width:100%; background-color:#e8e8eb; margin-top:-1px;} .onestore-bar-wrap img { width:100%; } .onestore-bar-wrap.onestore-bar-wrap-mobile {display: none;} /* animation End */ /* 메인 End */ /* 중앙배치 layout Start */ .layout-table-full { padding:70px 0 0 0; width:100%; height:100%; display:table; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .layout-table-full .layout-table-full-cell { padding:50px 0 100px; width:100%; height:100%; vertical-align:middle; display:table-cell; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } /* 중앙배치 layout End */ /* Layout Style Start */ #wrap { position:relative; padding:70px 0 0 0; margin:0 auto; width:100%; max-width:768px; } #wrap.webview { padding:70px 0 0 0; } #wrap.search { padding:85px 0 0 0; } #container { width:100%; padding-bottom:25px; } html.full , html.full body { width:100%; height:100%; } html.full #wrap { width:100%; height:100%; padding-top:0; table-layout:fixed; display:table; } html.full #header { position:relative; left:0; margin-left:0; display:table-row; } html.full #container { padding-bottom:0; display:table-row; } html.full #container .container-cell { width:100%; height:100%; display:table; } html.full #container .lockgroup { display:table-row;} html.full #container .lockgroup .lockgroup-inner { vertical-align:middle; display:table-cell; } html.full #container .locknumgroup { height:315px; display:table-row;} #wrap.detail #container { padding-bottom:75px; } #wrap.detail.reservedetail #container { padding-bottom:0; background-color:#ffffff; } #wrap.instantly #container { padding-bottom:0; background-color:#ffffff; } #wrap.benefitmain { padding-top:0; height: auto;} #wrap.benefitmain #container {padding-bottom: 15px; height: auto;} #wrap.reserve { padding-top:0; } #wrap.reserve #container { padding-bottom:0; background-color:#312c70; } #wrap.betazone { padding-top:0; } #wrap.launch { padding-top:0; } #wrap.launch #container { padding-bottom:0; background-color:#312c70; } #wrap.purchase #container { padding-bottom:0; background-color:#ffffff; } #wrap.friend { padding-top:0; } #wrap.friend #container { padding-bottom:0; background-color:#44bb81; } #wrap.delivery #container { padding-bottom: 0; background-color: #ffffff;} #wrap.conditions #container { padding-bottom:40px; } /* Layout Style End */ /* 네이티브 외부 진입 시 back키 + BI Start */ #header.reserveheader .header-co-left .icon-onestore-bi { content: ""; position: absolute; left:66px; top:20px; width:110px; height:30px; display: block; background:url("../common/images/icon/icon_type_prom_03.png") no-repeat -110px 0; -ms-background-size:220px 220px; -moz-background-size:220px 220px; -webkit-background-size:220px 220px; background-size:220px 220px; } #header.reserveheader.white .header-co-left .icon-onestore-bi {background-position:0 0;} /* 네이티브 외부 진입 시 back키 + BI End */ /* 구매혜택, 즉시당첨 자유형 GNB Start */ .gnbfreestyle#wrap { padding:0 !important; } .gnbfreestyle #header { -ms-transition: background 0.3s linear; -moz-transition: background 0.3s linear; -webkit-transition: background 0.3s linear; transition: background 0.3s linear; } .gnbfreestyle .reserveheader, .gnbfreestyle .reserveheader.white { background-color: transparent; } .gnbfreestyle .reserveheader.webviewHeaderAni.white { border-bottom-width: 1px; border-bottom-color: rgba(255,255,255,0.05); background: rgba(0,0,0,0.5); } .gnbfreestyle .reserveheader.webviewHeaderAni { border-bottom-width: 1px; border-bottom-color: rgba(0,0,0,0.05); background: rgba(0,0,0,0.3); } .gnbfreestyle .reserveheader .header-co .header-co-inner .header-co-left .header-link .icon-back {background-position: -40px -780px;} .gnbfreestyle .icon-logo {background-position: 0px -40px;} .gnbfreestyle .icon-sharing {background-position: -80px -780px;} .gnbfreestyle #header.reserveheader.white .header-co-left .icon-onestore-bi {background-position: -110px 0px;} /* 구매혜택, 즉시당첨 자유형 GNB End */ /* Full Screenshots Start */ html.full #wrap.screenshots { width:100%; max-width:100%; height:100%; background:#000000; } .fullscreenshots-wrap { width:100%; height:100%; overflow:hidden; } .fullscreenshots-wrap .swiper-container { width:100%; height:100%; padding:0 0 0 0; overflow:visible; } .fullscreenshots-wrap .swiper-slide { position:relative; width:100%; height:100%; padding:0; } .fullscreenshots-wrap .swiper-slide .fullscreenshots-item { display:block; width:100%; height:100%; } .fullscreenshots-wrap .swiper-slide .fullscreenshots-link { position:relative; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; display:block; -ms-background-size:contain; -moz-background-size:contain; -webkit-background-size:contain; background-size:contain; } html.full #wrap.youtubefull { width:100%; max-width:100%; height:100%; background:#000000; } .fullYoutube-wrap { width:100%; height:100%; overflow:hidden; } .fullYoutube-wrap iframe { width:100%; height:100%; } /* Full Screenshots End */ /* 쿠폰 득템전 Start */ #wrap.game {padding:0;} #wrap.game .reserveheader {background-color: rgba(24,21,67,0.8);} #wrap.game .reservetop {margin:0; padding:0;} #wrap.game .listgroup-game .listgroup-item-co .listgroup-item-summary , #wrap.game .listgroup-game .listgroup-item-co .listgroup-item-date {color:#585858;} #wrap.game .listgroup-game {padding:0 0 30px;} #wrap.game .mypagecash-list-wrap {background-color:#312c70;} #wrap.game .mypagecash-list-wrap .mypagecash-list-inner .mypagecash-list {margin:0;} #wrap.game .mypagecash-list-wrap .mypagecash-list-inner .mypagecash-list-co { padding:0 0 34px; background-color: transparent; -ms-border-radius:0; -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; } #wrap.game .mypagecash-list-wrap .mypagecash-list-inner .tab-desc { text-align: center; color:#ffffff; padding: 0 0 43px; font-size:14px; line-height: 20px;} #wrap.game .mypagecash-list-wrap .mypagecash-list-inner .mypagecash-list-co ul { border-bottom:1px solid #3c3a84; padding:0 20px;} #wrap.game .mypagecash-list-wrap .mypagecash-list-inner .mypagecash-list-co ul .list-item-menu {line-height:49px;} #wrap.game .mypagecash-list-wrap .mypagecash-list-inner .mypagecash-list-co ul .list-item-menu a {line-height:49px; color:#5f5fb0; font-size:15px;} #wrap.game .mypagecash-list-wrap .mypagecash-list-inner .mypagecash-list-co ul .list-item-menu a.selected {color:#f9f9f9; background-color: transparent;} #wrap.game .mypagecash-list-wrap .mypagecash-list-inner .mypagecash-list-co ul .list-item-menu a.selected span:before {left:-13px; width:101px; background-color:#ffffff;} #wrap.game .listgroup-game .listgroup-item-co .listgroup-item-title { padding: 0 0 5px; } #wrap.game .mypagecash-list-wrap .mypagecash-list-inner .mypagecash-list-co ul .list-item-menu a.selected span:before { position: absolute; content: ''; left: -13px; bottom: -1px; width: 101px; height: 3px; background: #ffffff; display: block; -ms-border-top-right-radius: 3px; -moz-border-top-right-radius: 3px; -webkit-border-top-right-radius: 3px; border-top-right-radius: 3px; -ms-border-top-left-radius: 3px; -moz-border-top-left-radius: 3px; -webkit-border-top-left-radius: 3px; border-top-left-radius: 3px; } #wrap.game .coupongetitem-wrap { margin:0 20px; } #wrap.game .coupongetitem-wrap .coupongetitem-inner { } #wrap.game .coupongetitem-wrap .coupongetitem-text { font-size:14px; line-height:20px; overflow:hidden; } #wrap.game .coupongetitem-wrap .coupongetitem-text p { font-size:14px; color:#9e9ad5; line-height:20px; text-align:center; } #wrap.game .coupongetitem-wrap .coupongetitem-more { text-align:center; line-height:35px; } #wrap.game .coupongetitem-wrap .coupongetitem-more .btn-link { padding:0; font-size:14px; color:#8e85fe; line-height:35px; text-align:center; display:block; } /* 쿠폰 득템전 End */ /* 베타게임 신청서 Start */ .betazone-apply-top { padding:25px 20px 40px; text-align:left; } .betazone-apply-top .betazonetop-inner { display: table; width: 100%; } .betazone-apply-top .betazonetop-inner .betazonetop-text { display: table-cell; vertical-align: middle; } .betazone-apply-top .betazonetop-inner .betazonetop-pic { width: 120px; display: table-cell; vertical-align: middle; } .betazone-apply-top .betazonetop-inner .betazonetop-pic img { width: 100%; } .betazone-apply-top .betazone-apply-top-header { font-size:16px; color:#000000; line-height:23px; display:block; } .betazone-apply-top .betazone-apply-top-header span { color:#4d44a2; } .betazone-apply-top .betazone-apply-top-summary { padding:6px 0 0 0; font-size:12px; color:#8c8c8c; line-height:19px; display:block; } .betazone-apply-top.apply { margin:0 20px; padding:10px 0 30px; text-align:left; border-bottom:1px solid #f0f0f0; } .betazone-apply-top.apply .betazone-apply-top-header { font-size:15px; line-height:24px; } .betazone-apply-top.apply .betazone-apply-top-summary { font-size:12px; line-height:19px; } .betazone-apply-step { margin:0 0 30px; } .betazone-apply-step ul { position: relative; display: table; width: 100%; table-layout: fixed; } .betazone-apply-step li { position: relative; display: table-cell; width:25%; height:66px; vertical-align: top; text-align: center; } .betazone-apply-step li div { width:66px; height:66px; border:1px solid #d5d5d5; display:inline-block; -ms-border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .betazone-apply-step li span { display: inline-block; width:100%; text-align: center; font-size:11px; line-height: 14px; color:#8c8c8c; top: 50%; position: relative; -ms-transform: translate3d(0,-50%,0); -moz-transform: translate3d(0,-50%,0); -webkit-transform: translate3d(0,-50%,0); transform: translate3d(0,-50%,0); } .betazone-apply-step i { position: absolute; top:50%; right:-10px; -ms-transform: translate3d(0,-50%,0); -moz-transform: translate3d(0,-50%,0); -webkit-transform: translate3d(0,-50%,0); transform: translate3d(0,-50%,0); } .betazone-apply-step li.active div { border-color: #4d44a2;} .betazone-apply-step li.active span { color: #4d44a2;} .betazone-apply-co { padding:0 20px; } .betazone-apply-co dl {} .betazone-apply-co dt { padding:0 0 15px 0; } .betazone-apply-co dt.info { padding-bottom:40px; } .betazone-apply-co dt strong { padding:0 0 0 0; font-size:15px; color:#181818; line-height:16px; font-weight:normal; display:block; } .betazone-apply-co dt span { padding:6px 0 0 10px; font-size:12px; color:#8c8c8c; line-height:19px; display:block; } .betazone-apply-co dd { padding:0 0 40px 0; } .betazone-apply-co > dl > dd:last-of-type { padding-bottom:20px; } .betazone-apply-co dd .betazone-apply-info-list-01 { padding:0 15px 5px 60px; background:#f9f9f9; -ms-border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; } .betazone-apply-co dd .betazone-apply-info-list-01 ul { } .betazone-apply-co dd .betazone-apply-info-list-01 ul li { position:relative; padding:17px 0; border-top:1px solid #eeeded; } .betazone-apply-co dd .betazone-apply-info-list-01 ul li:first-of-type { border-top-width:0; } .betazone-apply-co dd .betazone-apply-info-list-01 ul li .betazone-apply-info-list-item { } .betazone-apply-co dd .betazone-apply-info-list-01 ul li .betazone-apply-info-list-item i.icon { position:absolute; left:-60px; top:50%; margin-top:-30px; display:block; } .betazone-apply-co dd .betazone-apply-info-list-01 ul li .betazone-apply-info-list-item strong { font-size:13px; color:#181818; line-height:16px; font-weight:normal; display:block; } .betazone-apply-co dd .betazone-apply-info-list-01 ul li .betazone-apply-info-list-item span { padding:6px 0 0 0; font-size:12px; color:#8c8c8c; line-height:19px; display:block; } .betazone-apply-co dd .betazone-apply-info-list-01 ul li .betazone-apply-info-list-item span:first-of-type { padding-top:2px; } .betazone-apply-co dd .betazone-apply-info-list-02 { padding:0 20px 5px 20px; background:#f9f9f9; -ms-border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; } .betazone-apply-co dd .betazone-apply-info-list-02 ul { } .betazone-apply-co dd .betazone-apply-info-list-02 ul li { position:relative; padding:17px 0; border-top:1px solid #eeeded; } .betazone-apply-co dd .betazone-apply-info-list-02 ul li:first-of-type { border-top-width:0; } .betazone-apply-co dd .betazone-apply-info-list-02 ul li .betazone-apply-info-list-item { } .betazone-apply-co dd .betazone-apply-info-list-02 ul li .betazone-apply-info-list-item strong { font-size:13px; color:#181818; line-height:20px; font-weight:normal; display:block; } .betazone-apply-co dd .betazone-apply-info-list-02 ul li .betazone-apply-info-list-item em { padding:2px 0 0 0; font-size:12px; color:#8c8c8c; line-height:19px; display:block; } .betazone-apply-co dd .betazone-apply-info-list-02 ul li .betazone-apply-info-list-item span { padding:4px 0 0 0; font-size:12px; color:#8c8c8c; line-height:19px; display:block; } .betazone-apply-co dd .betazone-apply-info-list-02 ul li .betazone-apply-info-list-item em:first-child { padding-top:0; } .betazone-apply-co dd .betazone-apply-info-list-02 ul li.point .betazone-apply-info-list-item strong { color:#272558; } .betazone-apply-co dd .betazone-apply-info-list-02 ul li.point .betazone-apply-info-list-item strong i.icon-betazone-icon-info { top:2px; vertical-align:top; } .betazone-apply-co dd .betazone-apply-info-list-02 ul li.point .betazone-apply-info-list-item em { color:#272558; } .betazone-apply-co dd .betazone-apply-info-list-03 { padding:20px; background:#f9f9f9; -ms-border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; } .betazone-apply-co dd .betazone-apply-info-list-03 .betazone-apply-info-list-inner { position:relative; } .betazone-apply-co dd .betazone-apply-info-list-03 .betazone-apply-info-list-inner:before { position:absolute; content:''; left:0; top:0; width:100%; height:18px; background: linear-gradient(to right, #4d44a2, #272558); display:block; -webkit-border-radius:9px; border-radius:9px; } .betazone-apply-co dd .betazone-apply-info-list-03 ul { position:relative; z-index:1; } .betazone-apply-co dd .betazone-apply-info-list-03 ul li { float:left; width:33.3%; padding:0 5px; -webkit-box-sizing:border-box; box-sizing:border-box; } .betazone-apply-co dd .betazone-apply-info-list-03 ul li .betazone-apply-info-list-item { text-align:center; } .betazone-apply-co dd .betazone-apply-info-list-03 ul li .betazone-apply-info-list-item strong { font-size:9px; color:#ffffff; line-height:17px; font-weight:normal; display:block; letter-spacing: 0;} .betazone-apply-co dd .betazone-apply-info-list-03 ul li .betazone-apply-info-list-item em { padding:15px 0 0 0; font-size:13px; color:#181818; line-height:15px; display:block; } .betazone-apply-co dd .betazone-apply-info-list-03 ul li .betazone-apply-info-list-item span { padding:3px 0 0 0; font-size:12px; color:#8c8c8c; line-height:19px; display:block; } .betazone-apply-co dd .betazone-apply-info-list-03 ul li .betazone-apply-info-list-item span a { font-size:11px; color:#919191; line-height:15px; text-decoration:underline; } .betazone-apply-form-co { margin:0 20px; padding:0; } .betazone-apply-form-co .betazone-apply-form-essential { font-size:12px; color:#ff3543; line-height:17px; text-align:right; } .betazone-apply-form-co dl { } .betazone-apply-form-co dt { padding:0 0 12px 0; } .betazone-apply-form-co dt strong { font-size:15px; color:#181818; line-height:20px; font-weight:normal; display:block; } .betazone-apply-form-co dt strong em { color:#ff3543; } .betazone-apply-form-co dt span { padding:6px 0 0 0; font-size:12px; color:#8c8c8c; line-height:19px; display:block; } .betazone-apply-form-co dd { padding:0 0 40px 0; } .betazone-apply-form-co dd:last-of-type { padding-bottom:0; } .betazone-apply-form-co .forminputbox , .betazone-apply-form-co .forminputbox.betazone-apply-box { margin:0; } .betazone-apply-form-co .forminputbox.betazone-apply-box .forminputbox-col input.form-input-control {padding: 0 60px 0 15px;} .betazone-apply-form-co .btn.btn-text {position: absolute; top: 0; right: 0; background: transparent; border: 0; min-width: 60px; padding: 0;} .betazone-apply-form-co .btn.btn-text span { font-size: 14px; line-height: 43px; color: #3e3877;} .betazone-apply-form-co .lookup { position:relative; } .betazone-apply-form-co .lookup .input-placeholders { padding-right:100px; } .betazone-apply-form-co .lookup a.btn-og { position:absolute; right:7px; top:6px; width:80px; z-index:11; } .betazone-apply-form-co .lookup a.btn-og span { font-size:12px; line-height:23px; } .betazone-apply-form-co .form-default-group-summary { padding:10px 0 0; font-size:12px; color:#272558; line-height:17px; display:block; } .betazone-apply-form-co .form-default-group.date { width:100%; padding:0; table-layout:fixed; display:table; } .betazone-apply-form-co .form-default-group.date .form-default-group { position:relative; width:54%; padding:0 0 0 30px; display:table-cell; -webkit-box-sizing:border-box; box-sizing:border-box; } .betazone-apply-form-co .form-default-group.date .form-default-group:before { position:absolute; content:'~'; left:10px; top:50%; margin-top:-14px; font-size:14px; color:#181818; line-height:28px; display:block; } .betazone-apply-form-co .form-default-group.date .form-default-group:after { position:absolute; content:''; right:38px; top:50%; margin-top:-7px; width:1px; height:14px; background:#dcdcdc; display:block; } .betazone-apply-form-co .form-default-group.date .form-default-group:first-of-type { padding:0; width:46%; } .betazone-apply-form-co .form-default-group.date .form-default-group:first-of-type:before { display:none; } .betazone-apply-form-co .form-default-group input.inputdate { width:100%; padding:0 50px 0 11px; line-height:38px; height:38px; background:#f1f1f1 url(../common/images/common/icon_date.png) no-repeat right center; border:0 none; outline:0 none; display:block; -webkit-border-radius:3px; border-radius:3px; -webkit-box-sizing:border-box; box-sizing:border-box; -webkit-appearance:none; appearance:none; -webkit-background-size:30px 20px; background-size:30px 20px; } .betazone-apply-form-co .form-default-group input[type=date]::-webkit-clear-button /* blue cross */ , .betazone-apply-form-co .form-default-group input[type=date]::-webkit-inner-spin-button /* up */ , .betazone-apply-form-co .form-default-group input[type=date]::-webkit-outer-spin-button /* down */ { display: none; } .betazone-apply-form-co .form-default-group.dateselect { } .betazone-apply-form-co .form-default-group.dateselect .form-default-group { position:relative; padding:0 0 0 20px; display:inline-block; } .betazone-apply-form-co .form-default-group.dateselect .form-default-group:before { position:absolute; content:'~'; left:5px; top:50%; margin-top:-14px; font-size:14px; color:#181818; line-height:28px; display:block; } .betazone-apply-form-co .form-default-group.dateselect .form-default-group:first-of-type { padding:0; } .betazone-apply-form-co .form-default-group.dateselect .form-default-group:first-of-type:before { display:none; } .betazone-apply-form-co .form-default-group.dateselect .form-default-group .select-text { position:relative; display:inline-block; background:#f1f1f1 url(../common/images/common/icon_date_arr.png) no-repeat right center; -webkit-border-radius:3px; border-radius:3px; -webkit-background-size:12px 10px; background-size:12px 10px; } .betazone-apply-form-co .form-default-group.dateselect .form-default-group .select-text select { position:relative; padding:0 22px 0 8px; font-size:12px; color:#181818; line-height:38px; height:38px; border:0 none; outline:0 none; display:block; background-color:transparent; z-index:2; -webkit-box-sizing:border-box; box-sizing:border-box; -webkit-appearance:none; appearance:none; } .betazone-apply-form-co .form-default-group.dateselect .form-default-group .select-text.select-text-year:after { position:absolute; content:'년'; right:13px; top:0; line-height:38px; display:block; } .betazone-apply-form-co .form-default-group.dateselect .form-default-group .select-text.select-text-month:after { position:absolute; content:'월'; right:13px; top:0; line-height:38px; display:block; } .betazone-apply-form-co .form-default-group.dateselect .form-default-group .select-text.select-text-day:after { position:absolute; content:'일'; right:13px; top:0; line-height:38px; display:block; } .betazone-apply-form-co .form-default-group.dateselect .form-default-group .select-text select::-ms-expand { display: none; } .betazone-apply-form-co .input-placeholders input[disabled="disabled"] { color:#919191; } .betazone-apply-complete-co { margin:0 20px; padding:10px 0 0 0; } .betazone-apply-complete-co dl { border-bottom:1px solid #ededed; } .betazone-apply-complete-co dt { padding-bottom:6px; font-size:15px; color:#000000; line-height:24px; } .betazone-apply-complete-co dd { padding-bottom:40px; } .betazone-apply-complete-co dd p { font-size:12px; color:#8c8c8c; line-height:19px; } .betazone-apply-complete-co dd ol { } .betazone-apply-complete-co dd ol li { font-size:12px; color:#8c8c8c; line-height:19px; } .betazone-apply-complete-co dd ul { } .betazone-apply-complete-co dd ul li { font-size:12px; color:#8c8c8c; line-height:19px; } .betazone-apply-complete-co dd dl { border-bottom-width:0; } .betazone-apply-complete-co dd dl dt { padding-bottom:0; font-size:12px; color:#000000; line-height:19px; } .betazone-apply-complete-co dd dl dd { padding-bottom:10px; } .betazone-apply-complete-co dd dl dd:last-of-type { padding-bottom:0; } .betazone-agree-wrap { padding:25px 0 0; } .betazone-agree-wrap .listgroup-defaultcheck { margin:0;} .betazone-agree-wrap .formcheckbox .formcheckbox-wrap label {padding:0 0 0 42px;} .betazone-agree-wrap .formcheckbox .formcheckbox-wrap label span {font-size:14px; line-height: 22px;} .betazone-agree-wrap .formcheckbox .formcheckbox-wrap label .icon-controller-mark {display: none;} .betazone-agree-wrap .listgroup-info {padding:10px 0 0;} .betazone-agree-wrap .paragroup {margin:0 25px;} .betazone-agree-wrap .listgroup-defaultcheck input[disabled] + label {opacity: 0.3;} .betazone-apply-complete-co .form-default-cond { padding:20px 0 0 0; } .betazone-apply-complete-co .form-default-cond .label-type-checkbox { font-size:13px; color:#181818; } html.sticky body.betazone { padding-bottom:0; } .betazone-complete { } .betazone-complete-wrap .headerill-pic { margin:0 20px; } .betazone-complete-wrap .headerill-pic .headerill-pic-co { position:relative; text-align:center; } .betazone-complete-wrap .headerill-pic .headerill-pic-co img { vertical-align:top; height:120px; } .betazone-complete-wrap { } .betazone-complete-wrap .deliverynoitem-co { text-align:center; } .betazone-complete-wrap .deliverynoitem-text { padding-top:20px; font-size:16px; color:#000000; line-height:23px; } .betazone-apply-co-info { margin:0 25px; } .betazone-apply-co-info p { font-size:13px; color:#181818; line-height:20px; } .betazone-apply .form-default-submit ul { padding-top:30px; padding-bottom:20px; } .betazone-apply .listgroup-authcheck { position: relative; margin:0;} .betazone-apply .listgroup-authcheck ul li { border: 1px solid #e1e1e1; height: 120px; padding: 15px; -ms-border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .betazone-apply .listgroup-authcheck ul li.focus { border-color: #2d297a; } .betazone-apply .listgroup-authcheck ul li textarea { position: relative; padding: 0; width: 100%; height: 90px; line-height: 18px; border-width: 0; outline-width: 0; background-color: transparent; resize: none; display: block; z-index: 2; overflow:auto; min-height:1px; max-height:315px; margin-right:-10px;padding-right:10px; -webkit-overflow-scrolling:touch; } .betazone-apply .listgroup-authcheck ul li textarea::-webkit-scrollbar { width:2px; } .betazone-apply .listgroup-authcheck ul li textarea::-webkit-scrollbar-track { background-color:transparent; } .betazone-apply .listgroup-authcheck ul li textarea::-webkit-scrollbar-thumb { background-color:rgba(0,0,0,0.1); } .betazone-apply .listgroup-authcheck .textarea-placeholders .input-placeholders { position: absolute; left: 0; top: 0; padding: 15px; width: 100%; font-size: 14px; color: #a4a4a4; line-height: 22px; display: block; z-index: 1; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .betazone-apply-info-box { position:relative; border-bottom:1px solid #f0f0f0; } .betazone-apply-info-box .betazone-apply-info-box-text { padding:20px 70px 20px 0; font-size:12px; color:#8c8c8c; line-height:19px; } .betazone-apply-info-box .betazone-apply-info-box-btn { position:absolute; right:0; top:50%; margin-top:-15px; } .betazone-apply-info-box .betazone-apply-info-box-btn button.btn-og-out { width:60px; height:30px; line-height:28px; border:1px solid #acaac4; outline: 0; text-align:center; background-color: #ffffff; margin:0; padding:0; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; -ms-border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; } .betazone-apply-info-box .betazone-apply-info-box-btn button.btn-og-out span { font-size:14px; color:#40367b; display:inline-block; } .betazone-apply-info-box .betazone-apply-info-box-btn button.btn-og-out i {display: none;} .betazone-apply-info-box .betazone-apply-info-box-btn button.btn-og-out.checked { background-color:#f3f4fc; border-color:#f3f4fc; overflow: hidden;} .betazone-apply-info-box .betazone-apply-info-box-btn button.btn-og-out.checked span {display: none;} .betazone-apply-info-box .betazone-apply-info-box-btn button.btn-og-out.checked i {display: inline-block; top:-1px;} .betazone-apply-form-co .layout-list-sort-select { position:relative; } .betazone-apply-form-co .layout-list-sort-select .layout-list-sort-select-table { position:relative; width:100%; } .betazone-apply-form-co .layout-list-sort-select .layout-list-sort-select-cell { table-layout:fixed; display:table; width: 100%; } .betazone-apply-form-co .layout-list-sort-select .layout-list-sort-select-cell .formselectbox { margin: 0; } .betazone-apply-form-co .layout-list-sort-select .formselectbox-wrap { display: table; width: 100%; table-layout: fixed; } .betazone-apply-form-co .layout-list-sort-select .formselectbox-col { position:relative; display: table-cell; width:30.625%; float: left; } .betazone-apply-form-co .layout-list-sort-select .formselectbox-col.formselectbox-year { margin-right:4.0625%; } .betazone-apply-form-co .layout-list-sort-select .formselectbox-col.formselectbox-month { margin-right:4.0625%; } .betazone-apply-form-co .layout-list-sort-select .formselectbox-col:before {position: absolute; content: '';left: 0;bottom: 0;width: 1px;height: 8px;background: #cccccc; display: block;} .betazone-apply-form-co .layout-list-sort-select .formselectbox-col:after {position: absolute; content: '';right: 0;bottom: 0;width: 1px;height: 8px;background: #cccccc; display: block;} .betazone-apply-form-co .layout-list-sort-select .formselectbox-col .formselectbox-inner select { -moz-appearance: none;-webkit-appearance: none;appearance: none; width: 100%; padding:0 29px 0 12px; font-size: inherit; color: #000000; outline: 0; background-color: transparent; margin: 0;border-top:0;border-left:0;border-right:0; border-bottom: 1px solid #cccccc; font-size: 14px; height: 32px; line-height: 32px; display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; letter-spacing: 0px; } .betazone-apply-form-co .layout-list-sort-select .formselectbox-col.focus select { border-color: #2d297a !important; } .betazone-apply-form-co .layout-list-sort-select .formselectbox-col .formselectbox-inner:after { content: ""; position: absolute; top: 4px; right: 5px; width: 24px; height: 24px; background-position: -394.5px -597px; } .betazone-apply-form-co .layout-list-sort-select .formselectbox-col .btn-popup-open { display: inline-block; width: 100%; } .betazone-apply-form-co .layout-list-sort-select .formselectbox-col .form-select-control { width: 100%;font-size: 15px;color: #000000;height: 40px;line-height: 40px; letter-spacing: 0; border-width: 0; border-bottom: 1px solid #cccccc; outline-width: 0; background-color: transparent; display: block; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .betazone-apply-form-co .layout-list-sort-select .formselectbox-col .icon-select-calendar { position: absolute; right:13px; top:13px;} .betazone-apply-form-co .layout-list-sort-select em { display: block; width:100%; text-align: center; line-height: 14px; margin:10px 0 0;} .betazone-apply-form-co .layout-list-sort-select em .icon-dash { color:#000000; font-size:16px; line-height: 14px;} /* UI datepicker Start */ .betazone-apply-form-co #datepicker1, .betazone-apply-form-co #datepicker2 { padding: 0 28px 0 15px; position: relative;width: 100%; height: 40px; line-height: 40px; text-align: left;letter-spacing: 0; color:#454545; border-width: 0;outline-width: 0;vertical-align: top; background-color: transparent;-ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;z-index: 2; } /* UI datepicker End */ /* 베타게임 신청서 End */ /* 사업자 정보 Start */ .business-info-wrap { margin:0 20px; } .business-info-wrap .business-info-co { width:320px; margin:0 auto; } .business-info-wrap .business-info-co .business-info-item { display: table; width: 100%; table-layout: fixed; margin:0 0 30px 0; } .business-info-wrap .business-info-co .business-info-item:last-child { margin:0 0 50px 0;} .business-info-wrap .business-info-co .business-info-item .business-name { display: table-cell; vertical-align: middle; width:74px; padding:0 20px 0 0; } .business-info-wrap .business-info-co .business-info-item .business-cont { display: table-cell; vertical-align: middle; } .business-info-wrap .business-info-co .business-info-item .business-cont li { font-size:11px; line-height:16px; color:#454545; } .business-info-wrap .business-info-co .business-info-item .business-cont li a{ display:inline-block; font-size:11px; line-height:16px; color:#8c8c8c; margin:2px 0 0;} .business-info-wrap .business-info-co .business-info-item .business-cont li a i { display:inline-block; vertical-align: middle; padding:2px 0 0;} .business-notice-wrap { text-align: center; margin:0 20px; border-top:1px solid rgba(221,221,221,0.5); } .business-notice-wrap .business-notice-co { font-size:11px; line-height: 16px; color:#454545; padding:0 0 20px; width: 260px; margin: 30px auto 0; } .business-notice-wrap i { font-size:12px; line-height: 16px; color:#454545; letter-spacing: 0; } /* 사업자 정보 End */ /* 통신판매 사업자 안내 Start */ .business-info-form-wrap {margin:0 20px 30px;} .business-info-form-wrap .business-info-co { width: 100%; padding: 20px 20px 20px; background-color: #ffffff; border: 1px solid #e1e1e1; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -ms-border-radius: 15px;-moz-border-radius: 15px;-webkit-border-radius: 15px; border-radius: 15px; } .business-info-form-wrap .business-info-co ul { position: relative;} .business-info-form-wrap .business-info-co ul li { display:table; font-size: 14px; line-height: 20px; } .business-info-form-wrap .business-info-co ul li:last-child {margin: 10px 0 0;} .business-info-form-wrap .business-info-co ul li em { display:table-cell; width:70px; color:#8c8c8c;} .business-info-form-wrap .business-info-co ul li span { display:table-cell; color:#272558;} .carrier-info-wrap { margin:0 20px; } .carrier-info-wrap .carrier-info-co {} .carrier-info-wrap .carrier-info-co .carrier-info-item { display: table; width: 100%; table-layout: fixed; margin:0 0 20px 0;} .carrier-info-wrap .carrier-info-co .carrier-info-item .carrier-name { display: table-cell; vertical-align: top; width:74px; padding:0 15px 0 0; } .carrier-info-wrap .carrier-info-co .carrier-info-item .carrier-cont { display: table-cell; vertical-align: top; } .carrier-info-wrap .carrier-info-co .carrier-info-item .carrier-cont li {font-size:11px; line-height:18px; color:#8c8c8c; } /* 통신판매 사업자 안내 End */ /* 통신사 멤버십 Start */ .membership-detail-wrap { margin:0 20px; } .membership-detail-wrap .membership-detail-title { padding:0 0 20px; font-size:15px; line-height: 21px; } .membership-detail-wrap .phone-num-wrap { width:100%; height:60px; line-height:60px; background-color: #f7f7f8; text-align: center; -ms-border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; } .membership-detail-wrap .phone-num-wrap .phone-title { display: inline-block; font-size:15px; line-height: 21px; color:#8c8c8c; padding:0 15px 0 0; } .membership-detail-wrap .phone-num-wrap .phone-num { font-size:15px; line-height: 21px; } .membership-detail-wrap .phone-num-wrap .phone-num .round { font-size: 24px; letter-spacing: 0; position: relative; top: 2px; } .membership-form-wrap { } .membership-form-wrap p { font-size:15px; line-height: 21px; padding:0 0 10px; margin:0 20px; } .forminputbox.membership-input-box {} .forminputbox.membership-input-box .forminputbox-wrap { display: table; width: 100%; table-layout: fixed; border-bottom:1px solid #cccccc; } .forminputbox.membership-input-box .forminputbox-wrap:before { position:absolute; content:''; left:0; bottom:0; width:1px; height:8px; background:#cccccc; display:block; } .forminputbox.membership-input-box .forminputbox-wrap:after { position:absolute; content:''; right:0; bottom:0; width:1px; height:8px; background:#cccccc; display:block; } .forminputbox.membership-input-box.focus .forminputbox-wrap { border-color: #2d297a; } .forminputbox.membership-input-box.focus .forminputbox-wrap:before { background:#2d297a; } .forminputbox.membership-input-box.focus .forminputbox-wrap:after { background:#2d297a; } .forminputbox.membership-input-box .forminputbox-wrap .forminputbox-col { display: table-cell; width:50%; vertical-align: bottom; } .forminputbox.membership-input-box .forminputbox-col:after , .forminputbox.membership-input-box .forminputbox-col:before { display: none; } .forminputbox.membership-input-box .forminputbox-col input.form-input-control { border:0; letter-spacing: 0; } .forminputbox.membership-input-box .forminputbox-wrap .forminputbox-col.forminputbox-col-1 { } .forminputbox.membership-input-box .forminputbox-wrap .forminputbox-col.forminputbox-col-1:after { position:absolute; content:''; right:0; bottom:18px; width:10px; height:1px; background:#cccccc; display:block; } .forminputbox.membership-input-box .forminputbox-wrap .forminputbox-col.forminputbox-col-2 { } .forminputbox.membership-input-box .forminputbox-wrap .forminputbox-col.forminputbox-col-2 input { width: 20px; text-align: center; float: left; font-size: 15px; padding: 0; } .forminputbox.membership-input-box .forminputbox-wrap .forminputbox-col.forminputbox-col-2 .input-placeholders { position: absolute; left: 5px; line-height: 42px; font-size:28px; letter-spacing: 2px; color:#c7c7c7; } .forminputbox.membership-input-box .forminputbox-wrap .forminputbox-col.forminputbox-col-2 .input-placeholders-hide-num { line-height: 42px; font-size:28px; letter-spacing: 2px; display: block; } .forminputbox.membership-input-box .forminput-col-inner { position:relative; width:92px; margin: 0 auto; } .listgroup-info.membership-info .listgroup-info-list li { line-height: 19px; padding:0 0 10px 10px; } .listgroup-info.membership-info .listgroup-info-list li:before { width:3px; height:3px; top:8px; background-color:#c7c7c7; -ms-border-radius: 1.5px; -moz-border-radius: 1.5px; -webkit-border-radius: 1.5px; border-radius: 1.5px; } .membership-form-wrap.tmembership {} .membership-form-wrap.tmembership p { padding:0 0 20px; } .membership-form-wrap.tmembership .phone-num-wrap { height:60px; line-height:60px; text-align: center; margin:0 20px 15px;} .membership-form-wrap.tmembership .phone-num-wrap > div { background-color: #f7f7f8; -ms-border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; } .membership-form-wrap.tmembership .phone-num-wrap .phone-title { display: inline-block; font-size:15px; line-height: 21px; color:#8c8c8c; padding:0 11px 0 0; } .membership-form-wrap.tmembership .phone-num-wrap .phone-num { font-size:15px; line-height: 21px; } .membership-form-wrap.tmembership .phone-num-wrap .phone-num .round { font-size: 24px; letter-spacing: 0; position: relative; top: 2px; } /* 통신사 멤버십 End */ /* 법정대리인(부모 등) 동의 신청 Start */ .paidpay {} .paidpay #wrap { padding:70px 0 0 0; } .paidpay #container { padding-bottom:20px; } .paidpay .payment-state-header-wrap { display: none; } .paidpay-agree-img-wrap { padding:10px 0 0; margin: 0 20px 20px; } .paidpay-agree-img-wrap .paidpay-agree-img-inner { text-align: center} .paidpay-agree-img-wrap .paidpay-agree-img-inner > em { width: 200px; height: 120px; display: inline-block; } .paidpay-agree-img-wrap .paidpay-agree-img-inner img { width: 100%; vertical-align: top;} .paidpay-agree-img-wrap .paidpay-agree-img-inner .paidpay-state-txt { font-size:15px; line-height: 22px; color:#000000; margin-top:20px;} .paidpay-agree-img-wrap .paidpay-agree-img-inner span { font-size:13px; line-height: 19px; color:#454545; padding:7px 0 0; display: block; text-align: center; } .paidpay-agree-img-wrap .paidpay-agree-img-inner .point { font-size:13px; line-height: 19px; color:#7168cd; } .paidpay-agree-checkbox-wrap { margin:0 20px 40px; padding:10px 0 0; } .paidpay-agree-checkbox-wrap .paidpay-tit { font-size:15px; line-height: 22px; color:#000000; padding:0 0 13px; } .paidpay .formcheckbox { position:relative; margin:0; width:100%; min-height:auto; height:1px; table-layout:fixed; display:table; } .paidpay .formcheckbox input[type="checkbox"] { position:absolute; left:0; top:0; opacity:0; } .paidpay .formcheckbox .formcheckbox-wrap { width:100%; min-height:30px; display:table-cell; vertical-align:middle; } .paidpay .formcheckbox .formcheckbox-wrap label { position:relative; width:100%; padding:0 30px 0 45px; display:block; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .paidpay .formcheckbox .formcheckbox-wrap label span { color:#000000; font-size:13px; line-height:20px; display:inline-block; } .paidpay .formcheckbox .formcheckbox-wrap label em { font-size:13px; color:#000000; line-height:17px; display:inline-block; margin-top:0; } .paidpay .formcheckbox .formcheckbox-wrap label em a { font-size:13px; color:#000000; line-height:20px; text-decoration: underline; } .paidpay .formcheckbox .formcheckbox-wrap label .icon-controller-mark { position:absolute; right:0; top:50%; margin-top:-8px; display:block; } .paidpay .formcheckbox .formcheckbox-wrap label a.form-more-btn { position:absolute; right:0; top:50%; margin-top:-15px; width:20px; height:30px; display:block; } .paidpay .formcheckbox .formcheckbox-wrap label:before { position:absolute; content:''; width:30px; height:30px; left:0; top:50%; margin-top:-15px; background-position:-40px -355px; opacity:1; -ms-transform:scale(1); -moz-transform:scale(1); -webkit-transform:scale(1); transform:scale(1); } .paidpay .formcheckbox .formcheckbox-wrap label:after { position:absolute; content:''; width:30px; height:30px; left:0; top:50%; margin-top:-15px; background-position:0px -355px; opacity:0; -ms-transform:scale(0); -moz-transform:scale(0); -webkit-transform:scale(0); transform:scale(0); } .paidpay .formcheckbox .formcheckbox-wrap input[type="checkbox"]:checked + label:before { opacity:0; -ms-transform:scale(0); -moz-transform:scale(0); -webkit-transform:scale(0); transform:scale(0); } .paidpay .formcheckbox .formcheckbox-wrap input[type="checkbox"]:checked + label:after { opacity:1; -ms-transform:scale(1); -moz-transform:scale(1); -webkit-transform:scale(1); transform:scale(1); } .paidpay .listgroup-authcheck { margin:0; } .paidpay .listgroup-authcheck ul { } .paidpay .listgroup-authcheck ul li { border:1px solid #e1e1e1; border-top-width:0; } .paidpay .listgroup-authcheck ul li:first-of-type { border-top-width:1px; -ms-border-top-left-radius:15px; -moz-border-top-left-radius:15px; -webkit-border-top-left-radius:15px; border-top-left-radius:15px; -ms-border-top-right-radius:15px; -moz-border-top-right-radius:15px; -webkit-border-top-right-radius:15px; border-top-right-radius:15px; } .paidpay .listgroup-authcheck ul li:last-of-type { -ms-border-bottom-left-radius:15px; -moz-border-bottom-left-radius:15px; -webkit-border-bottom-left-radius:15px; border-bottom-left-radius:15px; -ms-border-bottom-right-radius:15px; -moz-border-bottom-right-radius:15px; -webkit-border-bottom-right-radius:15px; border-bottom-right-radius:15px; } .paidpay .listgroup-authcheck .formcheckbox { margin:0; } .paidpay .listgroup-authcheck .formcheckbox .formcheckbox-wrap { min-height:10px; } .paidpay .listgroup-authcheck .formcheckbox .formcheckbox-wrap label { padding:14px 19px 14px 59px; } .paidpay .listgroup-authcheck .formcheckbox .formcheckbox-wrap label:before , .paidpay .listgroup-authcheck .formcheckbox .formcheckbox-wrap label:after { left:17px; margin-top:-15px; } .paidpay .paidpay-agree-email-wrap { margin:0 20px 40px; } .paidpay .paidpay-agree-email-wrap label { font-size:15px; line-height:22px; color:#000000; padding:0 0 10px; display:block;} .paidpay .paidpay-agree-email-wrap .paidpay-tit { font-size:13px; line-height:19px; color:#454545; padding:0 0 15px; } .paidpay .forminputbox { margin:0; } .paidpay .forminputbox .forminputbox-wrap { position:relative; } .paidpay .forminputbox .forminputbox-wrap label { margin-bottom:5px; font-size:16px; line-height:30px; display:block; } .paidpay .forminputbox .forminputbox-wrap .forminputbox-btn { position:absolute; right:0; top:0; } .paidpay .forminputbox .forminputbox-col { position:relative; } .paidpay .forminputbox .forminputbox-col:before { position:absolute; content:''; left:0; bottom:0; width:1px; height:8px; background:#cccccc; display:block; } .paidpay .forminputbox .forminputbox-col:after { position:absolute; content:''; right:0; bottom:0; width:1px; height:8px; background:#cccccc; display:block; } .paidpay .forminputbox .forminputbox-col input.form-input-control { width:100%; padding:0 15px 0 15px; font-size:15px; color:#000000; line-height:42px; border-width:0; border-bottom:1px solid #cccccc; outline-width:0; background-color:transparent; display:block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .paidpay .forminputbox .forminputbox-col input.form-input-control[disabled] { color:#c8c8d2; background:#ffffff; } .paidpay .forminputbox .forminputbox-col input.form-input-control::-ms-clear { display:none; } .paidpay .forminputbox .forminputbox-col input.form-input-control::-webkit-input-placeholder { color:#a4a4a4; } .paidpay .forminputbox .forminputbox-col input.form-input-control::-moz-placeholder { color:#a4a4a4; } .paidpay .forminputbox .forminputbox-col input.form-input-control::-moz-p { color:#a4a4a4; } .paidpay .forminputbox .forminputbox-col input.form-input-control:-ms-input-placeholder { color:#a4a4a4 !important; } .paidpay .forminputbox .forminputbox-info { margin:0 5px; padding:7px 0 0 0; font-size:13px; color:#8c8c8c; line-height:19px; } .paidpay .forminputbox.focus .forminputbox-col:before { background:#2d297a; } .paidpay .forminputbox.focus .forminputbox-col:after { background:#2d297a; } .paidpay .forminputbox.focus .forminputbox-col input.form-input-control { border-bottom-color:#2d297a; } .paidpay .paidpay-notice { margin:0 20px 20px; font-size:15px; line-height:22px; color:#000000; text-align:center; } .paidpay .payment-ok-btn .btngroup { padding:0 0 25px 0;} .paidpay .paidpay-agree-content-wrap { margin:0 20px 20px;} .paidpay .paidpay-agree-content-wrap .paidpay-agree-content-inner { background-color:rgba(247,247,247,0.8); padding:20px; -ms-border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; } .paidpay .paidpay-agree-content-wrap .paidpay-agree-content-inner li { padding-bottom:20px;} .paidpay .paidpay-agree-content-wrap .paidpay-agree-content-inner li:last-child { padding-bottom:0;} .paidpay .paidpay-agree-content-wrap .paidpay-agree-content-inner em { display: block; font-size:13px; line-height:20px; color:rgba(0,0,0,0.6); } .paidpay .paidpay-agree-content-wrap .paidpay-agree-content-inner span { display: block; font-size:13px; line-height:20px; color:#000000; padding-top:2px; } .paidpay .paidpay-ok-notice { font-size:12px; line-height:18px; color:#8c8c8c; margin:20px 5px 0;} /* 법정대리인(부모 등) 동의 신청 End */ /* 기본 셀렉트 Start */ /* 상품권 충전소/ 환급여부 확인 및 환급신청/ 약관 Start */ .formselectbox .formselectbox-col.focus select { border-color: #2d297a; } .formselectbox .formselectbox-col.focus:before , .formselectbox .formselectbox-col.focus:after { background-color:#2d297a; } .formselectbox .formselectbox-col select { -moz-appearance: none;-webkit-appearance: none;appearance: none; width: 100%; padding:0 45px 0 15px; font-size: inherit; color: #000000; outline: 0; background-color: transparent; margin: 0;border-top:0;border-left:0;border-right:0; border-bottom: 1px solid #cccccc; font-size: 15px; height: 43px; line-height: 43px; display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .formselectbox .formselectbox-col select::-ms-expand { display: none; } .formselectbox .formselectbox-inner:after { content:""; position:absolute; top:6px; right:5px; width: 30px; height: 30px; background-position: -120px -500px; } /* 상품권 충전소/ 환급여부 확인 및 환급신청/ 약관 End */ /* 약관 Start */ .terms-date-wrap .formselectbox .formselectbox-col select { letter-spacing: 0px; } /* 약관 End */ /* 기본 셀렉트 End */ /* 공통 Custom Swiper Start */ .customSwiperWrap { position:relative; width:100%; min-width:1144px; max-width:1144px; margin:0 auto; box-sizing:border-box; padding:25px 0px;} .customSwiperWrap .customSwiperInner { position:relative; margin:0; } .customSwiperWrap .customSwiperBox { padding:0; margin:0 22px; overflow:hidden; } .customSwiperWrap .swiper { overflow: visible; } .customSwiperWrap .customSwiperButtonNext , .customSwiperWrap .customSwiperButtonPrev , .bannerTypeSwiper .swiper-button-next , .bannerTypeSwiper .swiper-button-prev { position:absolute; top:50%; margin:0; width:44px; height:44px; border:1px solid #ffffff; background:rgba(255,255,255, 0.9); box-sizing:border-box; border-radius:22px; box-shadow:0px 4px 10px rgba(0, 0, 0, 0.15); transform:translate3d(0, -50%, 0); display:block; z-index: 10; cursor: pointer; } .customSwiperWrap .customSwiperButtonNext.disabled , .customSwiperWrap .customSwiperButtonPrev.disabled , .bannerTypeSwiper .swiper-button-next.swiper-button-disabled , .bannerTypeSwiper .swiper-button-prev.swiper-button-disabled { display:none; } .customSwiperWrap .customSwiperButtonNext.touchdisabled , .customSwiperWrap .customSwiperButtonPrev.touchdisabled { display:none; } .customSwiperWrap .customSwiperButtonNext::after , .customSwiperWrap .customSwiperButtonPrev::after , .bannerTypeSwiper .swiper-button-next::after , .bannerTypeSwiper .swiper-button-prev::after{ position: absolute; left:50%; top:50%; content:''; width:10px; height:16px; background:url('../../common/images/icon/custom_swiper_button_small.png') no-repeat left top; background-size:18px 28px; transform: translate3d(-50%, -50%, 0); } .customSwiperWrap .customSwiperButtonNext.small , .customSwiperWrap .customSwiperButtonPrev.small { width:32px; height:32px; box-shadow: 0px 0.863636px 2.59091px rgba(0, 0, 0, 0.15); } .customSwiperWrap .customSwiperButtonNext.small::after , .customSwiperWrap .customSwiperButtonPrev.small::after { width:8px; height:14px; } .customSwiperWrap .customSwiperButtonNext.small { right:3px; } .customSwiperWrap .customSwiperButtonNext.small::after { background-position:0px 0px; } .customSwiperWrap .customSwiperButtonNext.small:hover::after { background-position:0px -14px; } .customSwiperWrap .customSwiperButtonPrev.small { left:3px; } .customSwiperWrap .customSwiperButtonPrev.small::after { background-position: -10px 0px; } .customSwiperWrap .customSwiperButtonPrev.small:hover::after { background-position: -10px -14px; } .customSwiperWrap .customSwiperDimedNext , .customSwiperWrap .customSwiperDimedPrev { position:absolute; top:0; width:42px; height:100%; box-sizing:border-box; display:block; pointer-events: none; z-index: 9; } .customSwiperWrap .customSwiperDimedNext { right:0; background: linear-gradient(270deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); } .customSwiperWrap .customSwiperDimedPrev { left:0; background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 100%); } .customSwiperWrap .customSwiperDimedNext.disabled , .customSwiperWrap .customSwiperDimedPrev.disabled { display:none; } .customSwiperWrap .customSwiperScrollbar { position: absolute; left:0; bottom: 0px; width: 100%; height: 2px; padding:0 21px; box-sizing: border-box; } .customSwiperWrap .customSwiperScrollbar em { position:relative; height: 100%; border-radius: 1px; background-color:#E1E1E1; overflow: hidden; display: block; } .customSwiperWrap .customSwiperScrollbar i { position: relative; left:0; top:0; width: 100%; height: 100%; display: block; } .customSwiperWrap .customSwiperScrollbar i span { position:absolute; left: 0; top: 0; width:0; height:100%; border-radius: 1px; background-color:#1B1B2E; display: block; } .customSwiperWrap .customSwiperScrollbar i span:nth-of-type(1) { left:-100%; } .customSwiperWrap .customSwiperScrollbar i span:nth-of-type(3) { left:100%; } /* 공통 Custom Swiper End */ /* Screenshot Swiper Start */ .screenshotSwiperWrap { padding:0; min-width:10px; max-width: 5000px; } .screenshotSwiperWrap .customSwiperBox { margin:0; padding:0 20px; } .screenshotSwiperWrap .swiper-slide-link { text-decoration:none; display:block; } .screenshotSwiperWrap .swiper-slide { width:auto; margin-right:2px; } .screenshotSwiperWrap .swiper-slide:last-of-type { margin-right:0; } .screenshotSwiperWrap .swiper-slide-pic { display:block; } .screenshotSwiperWrap .swiper-slide-pic img { height:155px; border-radius:15px; vertical-align:top; } .screenshotSwiperWrap.detailscreenshots-wrap { padding:15px 0 20px; } .card3NDetailSwiperWrap { padding:0; min-width:10px; max-width:5000px; } .card3NDetailSwiperWrap .customSwiperBox { margin:0; padding:0 20px; } .card3NDetailSwiperWrap .swiper-slide { width:92px; margin-right:16px; } .card3NDetailSwiperWrap .swiper-slide:last-of-type { margin-right:0; } .card3NDetailSwiperWrap .swiper-slide-link { text-decoration:none; display:block; } .card3NDetailSwiperWrap .swiper-slide-pic { width: 92px; height: 92px; margin:0 0 8px 0; border: 1px solid rgba(0, 0, 0, 0.04); border-radius:20px; background-repeat: no-repeat; background-position: center center; background-size: 100px 100px; display:block; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .card3NDetailSwiperWrap .swiper-slide-ti { font-size: 12px; line-height: 16px; color: #000000; text-decoration: none; display: block; height: 32px; overflow: hidden; } .card3NDetailSwiperWrap .customSwiperButtonNext , .card3NDetailSwiperWrap .customSwiperButtonPrev { top:28px; transform:translate3d(0, 0, 0);} .cardThemeSwiperWrap .customSwiperBg{ position:relative;} .card3NDetailSwiperWrap.offeringcard-wrap .swiper-slide a { margin:0; } .card3NDetailSwiperWrap.offeringcard-wrap { padding:20px 0 20px; } .customSwiperWrap.detailbenefitsSwiperWrap { padding:20px 0 20px; min-width:10px; } .customSwiperWrap.detailbenefitsSwiperWrap .customSwiperBox { margin:0; padding:0 20px; } .customSwiperWrap.detailbenefitsSwiperWrap .swiper-pagination { position:absolute; right: 20px; top: 20px; width: auto; height: 23px; text-align: right; } .customSwiperWrap.detailbenefitsSwiperWrap .swiper-pagination .swiper-pagination-bullet { margin:0 2px 0 3px !important; width:7px; height:7px; border:1px solid rgba(0,0,0,0.6); background-color:transparent; opacity:1; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .customSwiperWrap.detailbenefitsSwiperWrap .swiper-pagination .swiper-pagination-bullet-active { border-color:rgba(0,0,0,1); background-color:rgba(0,0,0,1); } /* Screenshot Swiper End */ /* 크립토 게임 팝업 아이콘 관련 Start */ .mainnet-wrap { position: relative; background: #ffffff; width:24px; height:24px; display: inline-block; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -ms-border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; } .mainnet-wrap:after { content: ""; position: absolute; top: 0; left: 0; width: 24px; height: 24px; border: 1px solid #ECECEC; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -ms-border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; } /* 크립토 게임 팝업 아이콘 관련 End */ /* wallet address Start */ .wallet{background:rgba(247,247,247,0.9);} .wallet-address{background:#f7f7f8; padding:5px 20px 35px;} .wallet-address p.please{padding-bottom:25px; font-size:15px; line-height:21px; color:#000000;} .wallet-address .detail-info{ background: #ffffff; padding:20px 20px 25px; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -ms-border-radius:15px; -moz-border-radius:18px; -webkit-border-radius:18px; border-radius:18px; -ms-box-shadow: 0 4px 10px rgba(0,0,0,0.1); -moz-box-shadow: 0 4px 10px rgba(0,0,0,0.1); -webkit-box-shadow: 0 4px 10px rgba(0,0,0,0.1); box-shadow: 0 4px 10px rgba(0,0,0,0.1); } .wallet-address .detail-info .detail-game{width: 100%; display: table; table-layout: fixed; padding-bottom:20px; border-bottom:1px solid #ececec; margin-bottom:25px;} .wallet-address .detail-info .detail-game .detail-cell{display: table-cell; vertical-align:middle;} .wallet-address .detail-info .detail-game .top-left p span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; } .wallet-address .detail-info .detail-game .top-right{width:70px; padding-left:15px;} .wallet-address .detail-info .detail-game .detail-title{font-size:15px; line-height:21px; color:#000000;} .wallet-address .detail-info .detail-game .detail-seller{font-size:13px; line-height:19px; color:#585858; margin-top:2px; } .wallet-address .detail-info .detail-game .detail-thumbnail{ position:relative; width:70px; height:70px; } .wallet-address .detail-info .detail-game .detail-thumbnail-app{ position:relative; width:70px; height:70px; background-repeat:no-repeat; background-position:center center; display:block; -ms-background-size:100% 100%; -moz-background-size:100% 100%; -webkit-background-size:100% 100%; background-size:100% 100%; -ms-border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; } .wallet-address .detail-info .detail-class{font-size:14px; line-height:20px; color:#585858; margin-bottom:10px;} .wallet-address-wrap .notice-wrap{padding:25px 20px;} .wallet-address-wrap .notice-wrap p.title-notice{font-size:14px; line-height:20px; color:#000000; margin-bottom:6px;} .wallet-address-wrap .notice-wrap p.text{font-size:13px; line-height:19px; color:#8c8c8c;} .wallet-address-wrap .register-btn{display:block; margin:0 auto; margin-top:30px; } .wallet-address-wrap .delete-btn{display:block; margin:0 auto; margin-top:30px;} .wallet-address-wrap .detail-blockchain{margin-bottom:30px;} .wallet-address-wrap .detail-blockchain .formselectbox, .wallet-address-wrap .detail-address .forminputbox{margin:0px;} .wallet-address-wrap .formselectbox .formselectbox-col select{position:relative; z-index:1;} .wallet-address-wrap .formselectbox-col .formselectbox-inner.only select { color: rgba(140,140,140,0.5); opacity:1; } .wallet-address-wrap .formselectbox-col .formselectbox-inner.only:after { display:none; } .wallet-address-wrap.after .detail-info{ background: #1e1a59; /* Old browsers */ background: -moz-linear-gradient(top, #1e1a59 0%, #0f0c3f 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #1e1a59 0%,#0f0c3f 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #1e1a59 0%,#0f0c3f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e1a59', endColorstr='#0f0c3f',GradientType=0 ); /* IE6-9 */ } .wallet-address-wrap.after .detail-info .detail-class{color:rgba(194,192,216,0.75); font-size:13px; line-height:19px;} .wallet-address-wrap.after .detail-info .detail-title{color:#ffffff;} .wallet-address-wrap.after .detail-info .detail-seller{color:rgba(243,244,252,0.8);} .wallet-address-wrap.after .wallet-address .detail-info .detail-game{border-bottom:1px solid rgba(236,236,236,0.15); margin-bottom:18px;} .wallet-address-wrap.after .wallet-address .detail-info .detail-blockchain{padding-bottom:18px; border-bottom:1px solid rgba(236,236,236,0.15); margin-bottom:18px;} .wallet-address-wrap.after .detail-code{font-size:14px; line-height:20px; color:#ffffff; word-wrap: break-word;} .wallet-address-wrap.after .information-title{font-size:15px; line-height:21px; color:#ffffff; margin-bottom:20px;} .wallet-address-wrap.after .chain-wrap{font-size:0px;} .wallet-address-wrap.after .chain-wrap span{font-size:15px; line-height:21px; color:#ffffff; vertical-align: top; padding-left:10px;} .wallet-address-wrap.after .detail-ifyou{margin-top:25px; padding:0px 4px 0px 34px; position:relative;} .wallet-address-wrap.after .detail-ifyou span{font-size:13px; line-height:19px; color:rgba(88,88,88,0.8);} .wallet-address-wrap.after .detail-ifyou i.ifyou{width:20px; height:20px; background-position: -54px -969px; position:absolute; top:2px; left:4px;} /* wallet address End */ /* blockchain icon Start */ .chain-icon{ position:relative; display:inline-block; width:24px; background:#ffffff; vertical-align: top; -ms-border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; } .chain-icon:after { content: ""; position: absolute; top: 0; left: 0; width: 24px; height: 24px; border: 1px solid #ECECEC; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -ms-border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; } .chain-icon img{width:100%;} /* blockchain icon End */ /* Detail 스크린샷 새창 레이어 팝업 Start */ .layoutPopupScreenshots { position:fixed; left:0; top:0; bottom:0; right:0; min-width:auto; max-width:100%; background-color:rgba(0,0,0,0.85); overflow: hidden; z-index: 3000; padding: 0;} .layoutPopupScreenshots:before { content:""; position:absolute; top:0; left:0; width:100%; height:70px; z-index: 11; pointer-events: none; background: -moz-linear-gradient(180deg, rgba(0, 0, 0, 0.70) 0%, rgba(0, 0, 0, 0.00) 100%); background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 0.70) 0%, rgba(0, 0, 0, 0.00) 100%); background: linear-gradient(180deg, rgba(0, 0, 0, 0.70) 0%, rgba(0, 0, 0, 0.00) 100%); } .layoutPopupScreenshots button.layoutPopupClose { position:absolute; left:15px; top:15px; width:40px; height:40px; padding:5px; box-sizing: border-box; background: transparent; z-index: 3100; } .layoutPopupScreenshots .swiper-container { width:100%; height:100%; padding:0 0 0 0; overflow:visible; } .layoutPopupScreenshots .swiper-slide { position:relative; top:50%; width:100%; height:90%; padding:0; -moz-transform: translate3d(0, -50%, 0); -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } .layoutPopupScreenshots .swiper-slide .fullscreenshots-item { position:relative; left:50%; display:block; width:80%; height:100%; -moz-transform: translate3d(-50%, 0, 0); -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } .layoutPopupScreenshots .swiper-slide .fullscreenshots-link { position:relative; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; display:block; -ms-background-size:contain; -moz-background-size:contain; -webkit-background-size:contain; background-size:contain; } .layoutPopupScreenshots .swiper-button-disabled { display:none;} .layoutPopupScreenshots.customSwiperWrap .customSwiperButtonPrev.small { left:33px; } .layoutPopupScreenshots.customSwiperWrap .customSwiperButtonNext.small { right:33px; } /* Detail 스크린샷 새창 레이어 팝업 End */ /* Video 관련 Start */ .video-player { width:100%; height:100%; overflow:hidden; display:block; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; } .video-player i.video-icon { position:relative; width:40px; height:40px; font-size:0; color:transparent; line-height:0; text-indent:-999999px; background: url(../images/icon/icon_video_01.png) no-repeat 0 0; background-size:300px 300px; vertical-align:top; display:inline-block; } .video-player i.video-icon.video-icon-play { width:40px; height:40px; background-position:0px 0px; z-index: 50; } .video-player i.video-icon.video-icon-pause { width:40px; height:40px; background-position:-40px 0px; } .video-player i.video-icon.video-icon-fullscreen { width:40px; height:40px; background-position:0px -40px; } .video-player i.video-icon.video-icon-timeprev { width:40px; height:40px; background-position:0px -80px; } .video-player i.video-icon.video-icon-timenext { width:40px; height:40px; background-position:-40px -80px; } .video-player .video-player-inner { width:100%; height:100%; display:block; } .video-player .video-player-box { position:relative; width:100%; height:100%; display:block; } .video-player .video-player-play-dummy { position:absolute; left:0; top:0; width:100%; height:100%; display:none; z-index:40; } .video-player .video-player-playbtn { position:absolute; left:50%; top:50%; margin:-20px 0 0 -20px; display:none; z-index:50; cursor:pointer; } .video-player .video-player-timeprevbtn { position:absolute; left:50%; top:50%; margin:-20px 0 0 -85px; display:none; z-index:50; cursor: pointer; } .video-player .video-player-timenextbtn { position:absolute; left:50%; top:50%; margin:-20px 0 0 45px; display:none; z-index:50; cursor: pointer; } .video-player .video-player-fullscreenbtn { position:absolute; right:5px; bottom:5px; margin:0; display:none; z-index:60;cursor:pointer; } .video-player .video-player-container { position:relative; width:100%; height:100%; display:block; overflow:hidden; z-index:10; } .video-player .video-player-container video { width:100%; height:100%; background-color:#000000; object-fit:cover; } .video-player .video-player-poster { position:absolute; left:0; top:0; width:100%; height:100%; background-color:#000000; display:none; z-index:20; background-repeat:no-repeat; background-position:center center; background-size:cover; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; } .video-player .video-player-progress { position:absolute; left:0; bottom:0px; width:100%; display:none; z-index:30; box-sizing:border-box; } .video-player .video-player-progress .video-player-progress-inner { position:relative; width:100%; padding:0 0; display:block; display:block; } .video-player .video-player-progress .video-player-progress-bar { position:relative; width:100%; height:4px; background-color:rgba(255,255,255,0.4); display:block; cursor:pointer; } .video-player .video-player-progress .video-player-progress-buffer { position:absolute; left:0; top:0; width:0; height:4px; background-color:rgba(255,255,255,0.6); display:none; } .video-player .video-player-progress .video-player-progress-time { position:absolute; left:0; top:0; width:0; height:4px; background-color:#5662DF; display:block; } .video-player .video-player-progress .video-player-progress-time em { position:absolute; right:-7px; top:-6px; width:14px; height:14px; background-color:#ffffff; display:none; border-radius:7px; } /* 아직 Play가 안되었을 때 Poster 이미지 노출 */ .video-player.preparing .video-player-poster { display:block; } /* 재생 준비가 되었을 때 버튼 생성 */ .video-player.onair .video-player-play-dummy { display:block; } .video-player.onair .video-player-playbtn { display:block; } /* 재생이거나 pause 인 경우 */ .video-player.onair.play .video-player-poster { display:none; } .video-player.onair.play .video-player-playbtn { display:none; } .video-player.onair.play .video-player-playbtn i.video-icon.video-icon-play { background-position:-40px 0px; } .video-player.onair.play .video-player-progress { display:none; } .video-player.onair.play .video-player-fullscreenbtn { display:none; } .video-player.onair.pause .video-player-poster { display:none; } .video-player.onair.pause .video-player-playbtn { display:block; } .video-player.onair.pause .video-player-fullscreenbtn { display:block; } .video-player.onair.pause .video-player-progress { display:block; } /* over 인 경우 */ .video-player.onair.over .video-player-playbtn { display:block; } .video-player.onair.over .video-player-fullscreenbtn { display:block; } .video-player.onair.over .video-player-progress { display:block; } /* fullscreen 인 경우 */ .video-player.fullscreen i.video-icon.video-icon-fullscreen { background-position:-40px -40px; } .video-player.onair.fullscreen { border-radius:0; } .video-player.onair.fullscreen .video-player-container video { object-fit:contain; } .video-player.onair.fullscreen.play .video-player-timeprevbtn { display:none; } .video-player.onair.fullscreen.play .video-player-timenextbtn { display:none; } .video-player.onair.fullscreen.pause .video-player-timeprevbtn { display:block; } .video-player.onair.fullscreen.pause .video-player-timenextbtn { display:block; } .video-player.onair.fullscreen.over .video-player-timeprevbtn { display:block; } .video-player.onair.fullscreen.over .video-player-timenextbtn { display:block; } .video-player.onair.fullscreen .video-player-progress { padding:0 20px; bottom:55px; z-index:50; } .video-player.onair.fullscreen .video-player-progress .video-player-progress-inner { padding:15px 0;} .video-player.onair.fullscreen .video-player-progress .video-player-progress-bar { height:2px; } .video-player.onair.fullscreen .video-player-progress .video-player-progress-buffer { height:2px; display:block; } .video-player.onair.fullscreen .video-player-progress .video-player-progress-time { height:2px; } .video-player.onair.fullscreen .video-player-progress .video-player-progress-time em { display:block; } .video-player.onair.fullscreen .video-player-fullscreenbtn { right:20px; bottom:15px; } /* Video 관련 end */ /* 블로그 Start */ .blog-box-wrap { margin: 0 20px; } .blog-box-wrap .blog-box-inner { position: relative; } .blog-box-wrap .blog-box-inner .blog-list { position: relative; } .blog-box-wrap .blog-box-inner .blog-list .list-item-inner a { display: block; padding: 8px 0 20px; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .blog-box-wrap .blog-box-inner .item-box , .blog-box-wrap .blog-box-inner .img-box { position: relative; } .blog-box-wrap .blog-box-inner .item-box { display:block; padding: 8px 8px 0 8px; vertical-align: middle; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .blog-box-wrap .blog-box-inner .item-box .item-title { font-size: 15px; line-height: 21px; color: #000000; display: block; margin-bottom: 8px; } .blog-box-wrap .blog-box-inner .item-box .item-desc { font-size: 13px; line-height: 19px; color: #757575; display: block; } .blog-box-wrap .blog-box-inner .img-box { -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; overflow: hidden; } .blog-box-wrap .blog-box-inner .img-box .img-inner { display: block; position: relative; top:0; left:0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; overflow: hidden; -ms-border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; -ms-background-size: 100% 100%; -moz-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%; } .blog-box-wrap .blog-box-inner .img-box .img-inner img { width:100%; height:100%; vertical-align: top; } /* 블로그 End */ @media (max-width:360px) { /* MW 랜딩 카드 : 3열 카드 (3열 반응형) Start */ .landingsummaryroup { padding-bottom:20px !important; } .landinglistgroup-wrap.rows3 .landinglistgroup-list li { width:30% !important; margin-left:5% !important; padding-top:20px !important; } .landinglistgroup-wrap.rows3 .landinglistgroup-list li:nth-of-type(3n-2) { margin-left:0 !important; } .landinglistgroup-wrap.rows3 .landinglistgroup-list li:nth-of-type(1) , .landinglistgroup-wrap.rows3 .landinglistgroup-list li:nth-of-type(2) , .landinglistgroup-wrap.rows3 .landinglistgroup-list li:nth-of-type(3) { padding-top:0 !important; } .landinglistgroup-wrap.rows3 .landingcard-item { width:100%; } .landinglistgroup-wrap.rows3 .landingcard-item .landingcard-cell { width:100%; } .landinglistgroup-wrap.rows3 .landingcard-item .landingcard-cell .landingcard-cell-thumbnail-app { width: 100%; height:100%; } /* MW 랜딩 카드 : 3열 카드 (3열 반응형) Start */ .detailapptop-co-title { font-size: 18px; line-height:24px; } } @media (min-width:500px) and (max-width:766px) { /* MW 랜딩 카드 : 3열 카드 (4열 반응형) Start */ .landinglistgroup-wrap.rows3 .landinglistgroup-list li { width:25% !important; padding-top:25px !important; } .landinglistgroup-wrap.rows3 .landinglistgroup-list li:nth-of-type(4n-3) { clear:both !important; } .landinglistgroup-wrap.rows3 .landinglistgroup-list li:nth-of-type(1) , .landinglistgroup-wrap.rows3 .landinglistgroup-list li:nth-of-type(2) , .landinglistgroup-wrap.rows3 .landinglistgroup-list li:nth-of-type(3) , .landinglistgroup-wrap.rows3 .landinglistgroup-list li:nth-of-type(4) { padding-top:10px !important; } .landinglistgroup-wrap.rows3 .landinglistgroup-list li:nth-of-type(3n-2) { clear: none;} /* MW 랜딩 카드 : 3열 카드 (4열 반응형) End */ } @media (min-width: 580px) { /* 블로그 Start */ .blog-box-wrap .blog-box-inner .blog-list .list-item-inner a { display: table; width: 100%; table-layout: fixed;} .blog-box-wrap .blog-box-inner .item-box , .blog-box-wrap .blog-box-inner .img-box { display: table-cell; } .blog-box-wrap .blog-box-inner .img-box { width:234px; height:132px; padding-right: 20px;} .blog-box-wrap .blog-box-inner .item-box { padding: 0 8px; } .blog-box-wrap .blog-box-inner .item-box .item-title { font-size:16px; line-height:22px; max-height: 88px; -webkit-line-clamp: 4; margin-bottom: 8px; text-overflow: ellipsis; white-space: normal; word-wrap: break-word; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .blog-box-wrap .blog-box-inner .item-box .item-desc { font-size: 14px; line-height: 20px;} /* 블로그 End */ } @media (max-width: 579px) { /* Detail 스크린샷 새창 레이어 팝업 Start */ .layoutPopupScreenshots .swiper-slide , .layoutPopupScreenshots .swiper-slide .fullscreenshots-item { -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .layoutPopupScreenshots .swiper-slide {height:100%; top:0; } .layoutPopupScreenshots .swiper-slide .fullscreenshots-item { width:100%; left:0; } .layoutPopupScreenshots.customSwiperWrap .customSwiperButtonPrev.small { left:13px; } .layoutPopupScreenshots.customSwiperWrap .customSwiperButtonNext.small { right:13px; } /* Detail 스크린샷 새창 레이어 팝업 End */ /* 앱 다운로드 안내 페이지 Start : 579 이하 */ .guide-layout-inner .guide-box { display: block;} .guide-layout-inner .guide-box .box-img { width: 100%; min-width: unset; margin: 20px auto 0;} .guide-layout-inner .guide-box .box-img-inner { max-width: 360px; margin: 0 auto; } .footer-store-download-inner { display:block; padding: 24px 28px; } .footer-store-download-inner .left-item-text { padding: 0; text-align: center; } .footer-store-download-inner .left-item-text i { position: relative; width: 20px; height: 20px; top: unset; left: unset; margin-top: -2px; background-position: -266px -38px; } .footer-store-download-inner .left-item-text strong { padding-left:10px; font-size: 15px; line-height: 21px; } .footer-store-download-inner .right-item { margin: 16px auto 0; } .pc .footer-store-download-inner { padding: 24px 28px; } .pc .footer-store-download-inner .left-item-text { text-align: left; } .pc .footer-store-download-inner .left-item-text em { padding: 8px 0 0; } .pc .footer-store-download-inner .right-item { margin: 16px auto 0; } .about-onestore .about-box { display: block; } .about-onestore .about-box .box-inner { padding: 0; } .about-onestore .about-box .box-img { max-width: 240px; width: 100%; height: auto; margin:20px auto 0; } .about-onestore .about-box .box-img img { width: 100%; height: 100%; } .about-onestore .about-box-wrap.ty2 .box-inner { padding:0 10px; } .about-onestore .about-box-wrap.ty2 .box-img , .about-onestore .about-box-wrap.ty2 .box04 .box-img , .about-onestore .about-box-wrap.ty2 .box06 .box-img { max-width: 280px; width: 100%; height: auto; margin:20px auto 0; } .about-onestore .about-box-wrap.ty2 .box-img img , .about-onestore .about-box-wrap.ty2 .box04 .box-img img , .about-onestore .about-box-wrap.ty2 .box06 .box-img img { width: 100%; height: 100%; } .installation-top .text-box { height: 528px;} .installation-top .phone-img { top: 191px; } .pc .installation-top .text-box { height: 468px;} .pc .installation-top .phone-img { top: 131px; } /* 앱 다운로드 안내 페이지 End : 579 이하 */ } @media (min-width: 500px) { /* Detail 혜택 Start */ .detailbenefits-wrap .swiper-slide { width:60%; } .detailbenefits-wrap .step-1 .swiper-slide { width:100%; } /* Detail 혜택 End */ } @media (min-width: 580px) { /* Detail Header 부가 정보 Start */ .detailapptop-info .step-4 .swiper-slide , .detailapptop-info .step-4 .swiper-slide.age { width: 25%; } .detailapptop-info .step-5 .swiper-slide , .detailapptop-info .step-5 .swiper-slide.age { width: 20%; } .detailapptop-info .step-4 .swiper-slide.age , .detailapptop-info .step-5 .swiper-slide.age { min-width: 128px; } /* Detail Header 부가 정보 End */ } @media (max-width:319px) { /* 마이페이지 신버전 Start */ .mypagecash-list-wrap-co-n .cashtable-sort-wrap .cashtable-sort-inner .layout-list-sort-date .btn-date{font-size:12px;} .mypagecash-list-wrap-co-n .layout-date-select input.date-input{background:#ffffff; font-size:12px; width: auto;} .referral-report-list-wrap .referral-report-inner .referral-report-wrap dl { display:block; table-layout: unset; } .referral-report-list-wrap .referral-report-inner .referral-report-wrap dl + dl { margin-top:5px; } .referral-report-list-wrap .referral-report-inner .referral-report-wrap dl dt { display:block; width:100%; } .referral-report-list-wrap .referral-report-inner .referral-report-wrap dl dd { display:block; width:100%; margin-top:1px; text-align:left; } /* 마이페이지 신버전 End */ } @media (max-width:240px) { /* 마이페이지 신버전 */ .mypagecash-list-wrap-co-n .layout-date-select input.date-input, .mypagecash-list-wrap-co-n .cashtable-sort-wrap .cashtable-sort-inner .layout-list-sort-date .btn-date{ display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-wrap: break-word; } /* // 마이페이지 신버전 */ } @media (min-width: 480px) { /* 사전예약 Start : 신버전 */ .reserve.new .listgroup-alarm .listgroup-alarm-item .listgroup-alarm-inner.listgroup-alarm-open.os-before .ossetting-btn-before , .reserve.new .listgroup-alarm li.listgroup-alarm-item.ty2.os-before-all .ossetting-btn-before-all { display:flex; table-layout: fixed; width: 100%; justify-content: space-between; align-items: center; flex-direction: row; flex-wrap: nowrap; } .listgroup-alarm .listgroup-alarm-item:first-of-type .listgroup-alarm-inner.listgroup-alarm-open.auto-before .autoinstall-btn-before { display:flex; justify-content: space-between; flex-direction: row; align-items: center; } .reserve.new .listgroup-alarm .listgroup-alarm-item:first-of-type .listgroup-alarm-inner.listgroup-alarm-open .listgroup-alarm-text { } .reserve.new .listgroup-alarm .listgroup-alarm-item .listgroup-alarm-inner.listgroup-alarm-open strong , .reserve.new .listgroup-alarm li.listgroup-alarm-item.ty2 .listgroup-alarm-text strong { text-align: left; padding-right: 12px; } .reserve.new .listgroup-alarm .listgroup-alarm-item .listgroup-alarm-inner.listgroup-alarm-open.auto-before .autoinstall-btn-before .listgroup-alarm-btn , .reserve.new .listgroup-alarm .listgroup-alarm-item .listgroup-alarm-inner.listgroup-alarm-open.os-before .listgroup-alarm-btn { padding-top: 0; text-align: right; padding: 0; width: auto; min-width: 120px; } .reserve.new .listgroup-alarm .listgroup-alarm-item .listgroup-alarm-inner.listgroup-alarm-open .listgroup-alarm-text , .reserve.new .listgroup-alarm li.listgroup-alarm-item.ty2.os-before-all .ossetting-btn-before-all .listgroup-alarm-text , .reserve.new .listgroup-alarm li.listgroup-alarm-item.ty2.os-before-all .ossetting-btn-before-all .listgroup-alarm-btn { } .reserve.new .listgroup-alarm .listgroup-alarm-item .listgroup-alarm-inner.listgroup-alarm-open.os-before .listgroup-alarm-btn , .reserve.new .listgroup-alarm li.listgroup-alarm-item.ty2.os-before-all .ossetting-btn-before-all .listgroup-alarm-btn { width:auto; margin:0; min-width: 110px; } .reserve.new .listgroup-alarm li.listgroup-alarm-item.ty2.os-before-all .ossetting-btn-before-all .listgroup-alarm-btn { text-align:right; } /* 사전예약 End : 신버전 */ /* // 혜택메인 리스트 Start */ .benefitlist-banner-list em .alarm-text-wrap .alarm-text { padding-right: 12px;} .benefitlist-banner-list .benefitalarm-item > em { display: flex; align-items: center; padding:12px 20px 12px 20px;} .benefitlist-banner-list em .alarm-btn { padding-top: 0;} /* // 혜택메인 리스트 End */ } @media (min-width: 580px) { /* 사전예약 상세 Start : 신버전 */ .new .reservebenefits-wrap .reservebenefits-content { display: flex; justify-content: space-between; align-items: center; align-content: center; align-self: stretch; flex-direction: row; flex-wrap: nowrap; } .new .reservebenefits-wrap .reservebenefits-cell.reservebenefits-cell-btn.auto-before { margin: unset; } .new .reservebenefits-wrap .reservebenefits-cell.reservebenefits-cell-btn .autoinstall-btn { margin: 0; } .new .auto-before.ani2 .lottie-wrap { top:0; } /* 사전예약 상세 End : 신버전 */ } @media (min-width: 767px) { /* MW 랜딩 카드 : 3열 카드 (5열 반응형) Start */ .landinglistgroup-wrap.rows3 .landinglistgroup-list li { width:20%; padding-top:25px !important; } .landinglistgroup-wrap.rows3 .landinglistgroup-list li:nth-of-type(5n-4) { padding-top:15px; clear: both !important; } .landinglistgroup-wrap.rows3 .landinglistgroup-list li:nth-of-type(1) , .landinglistgroup-wrap.rows3 .landinglistgroup-list li:nth-of-type(2) , .landinglistgroup-wrap.rows3 .landinglistgroup-list li:nth-of-type(3) , .landinglistgroup-wrap.rows3 .landinglistgroup-list li:nth-of-type(4) , .landinglistgroup-wrap.rows3 .landinglistgroup-list li:nth-of-type(5) { padding-top:10px !important; } .landinglistgroup-wrap.rows3 .landinglistgroup-list li:nth-of-type(3n-2) { clear: none;} /* MW 랜딩 카드 : 3열 카드 (5열 반응형) End */ /* MW 랜딩 카드 : 1열 카드 (2열 반응형) Start */ .landinglistgroup-wrap.rows1 .landinglistgroup-list ul .landinglistgroup-item { width: 50%; float: left; } .landinglistgroup-wrap.rows1 .landinglistgroup-list ul li:nth-child(odd) .landingcard-item .landingcard-link { padding-right:15px; } .landinglistgroup-wrap.rows1 .landinglistgroup-list ul li:nth-child(2n) .landingcard-item .landingcard-link { padding-left:15px; } .landinglistgroup-wrap.rows1 .landinglistgroup-list ul .landinglistgroup-item { padding: 15px 0 10px 0; } .landinglistgroup-wrap.rows1 .landinglistgroup-list ul .landinglistgroup-item:nth-of-type(1) , .landinglistgroup-wrap.rows1 .landinglistgroup-list ul .landinglistgroup-item:nth-of-type(2) { padding: 10px 0 10px 0; } /* MW 랜딩 카드 : 1열 카드 (2열 반응형) End */ .toastgroup-wrap { left: 50%; margin-left: -384px; width: 768px; } /* 앱 다운로드 안내 페이지 Start : 768이상 */ .icon-03.icon-logo { width:151px; height: 28px; background-position: 0 0;} .icon-03.icon-search { width:35px; height: 35px; background-position: 0 -128px;} .icon-03.icon-logo-download { width:20px; height: 20px; background-position: -192px -38px;} .icon-03.icon-step-01 { width: 32px; height: 32px; background-position: 0 -231px; flex: 0 0 32px; } .icon-03.icon-step-02-logo { width: 32px; height: 32px; background-position: -150px -38px; flex: 0 0 32px; } .icon-03.icon-step-03-logo { width: 24px; height: 24px; background-position: -232px -38px; flex: 0 0 24px; } .icon-03.icon-outlink { width: 32px; height: 32px; background-position: -42px -303px;} .icon-03.icon-footer-logo { width: 50px; height: 50px; background-position: -90px -38px;} .icon-03.icon-help-center { width: 32px; height: 32px; background-position: 0 -303px;} .icon-03.icon-search:hover { background-position: -85px -128px;} .more-help-wrap .btn:hover .icon-03.icon-outlink { background-position: -118px -303px;} #wrap.about .mainhead .header-co-outwrap .js-btn-popup-open span:hover:after { background-position: -54px -173px;} .section-01-wrap .section-inner , .section-02-wrap .section-inner , .section-03-wrap .section-inner { width: 1200px; margin: 0 auto; } .section-01-wrap:before { content: ""; position: absolute; top: 350px; left: 0; width: 320px; height: 670px; background: url('../images/pic/sub_ring_01_pc.png') no-repeat 0 0; -moz-background-size: 320px 670px; -webkit-background-size: 320px 670px; background-size: 320px 670px; } .section-01-wrap:after { content: ""; position: absolute; right: 0; bottom: 0; width: 500px; height: 340px; background: url('../images/pic/sub_ring_02_pc.png') no-repeat 0 0; -moz-background-size: 500px 340px; -webkit-background-size: 500px 340px; background-size: 500px 340px; } .support-layout { padding: 0px 0px 80px; } .pc .pc-layout-01 { display: none; } .pc .pc-layout-01.pc { display: block; } .pc-layout-01.pc.store-download-qr-wrap .store-download-qr-inner strong i { width: 32px; height: 32px; background-position: -150px -38px; } #wrap.about { padding: 0; width: 100%; max-width: unset; overflow: visible;} #wrap.about #container { margin:0 auto; } #wrap.about .mainhead { z-index: 1000; position: -webkit-sticky; position: sticky; top:0; left: 0!important; } #wrap.about .mainhead .header-co-outwrap { height:80px; } #wrap.about .mainhead .header-co-outwrap .js-btn-popup-open span { position: relative; display:block !important; } #wrap.about .mainhead .header-co-outwrap .js-btn-popup-open span:after{ width:18px; height:18px; background-position:0 -173px; } #wrap.about .mainhead .header-co-outwrap .js-btn-popup-open img { width: 35px; } #wrap.about .mainhead .header-co {margin:0 auto; max-width:1200px; padding:22.5px 49.5px; box-sizing: border-box;} #wrap.about .mainhead .header-co .header-co-full { } #wrap.about .mainhead .header-co .header-link { position:relative; padding:0 0 0 38px; height:34px; display:block; } #wrap.about .mainhead .header-co .header-link .icon-back { position:absolute; left:0; top:0; } #wrap.about .mainhead .header-co .header-link span { font-size:17px; color:#010101; line-height:30px; display:inline-block; } #wrap.about .mainhead .header-co .header-co-inner { position: relative; width: 100%; height: 100%; z-index: 2;} #wrap.about .mainhead .header-co .header-co-inner .header-co-left {height:40px; } #wrap.about .mainhead .header-co .header-co-inner .header-co-left .header-link { position: relative; padding: 0 0px 0 151px;} #wrap.about .mainhead .header-co .header-co-inner .header-co-left .header-link .icon-back { position:relative; vertical-align:top; } #wrap.about .mainhead .header-co .header-co-inner .header-co-left .header-link .header-link-home { position: absolute; left:0; top:50%; display: inline-block; width:151px; vertical-align: top; -moz-transform: translate3d(0, -50%, 0); -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } #wrap.about .mainhead .header-co .header-co-inner .header-co-left .header-link .icon-ti-arrow { display: inline-block; vertical-align: top; padding:0 5px 0 0; float:left; } #wrap.about .mainhead .header-co .header-co-inner .header-co-left .header-link span { font-size: 17px; color: #010101; line-height: 30px; display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } #wrap.about .mainhead .header-co .header-co-inner .header-co-right { position:absolute; right:0; top:0px; } #wrap.about .mainhead .header-co .header-co-inner .header-co-right .header-link { float:left; margin-left:25px; height:35px; padding:0; } #wrap.about .mainhead .header-co .header-co-inner .header-co-right .header-link .icon-back { position:relative; } #wrap.about .mainhead .header-co .header-co-inner .header-co-right .header-link:first-of-type {margin-left:0; width:54px;} #wrap.about .mainhead .header-co .header-co-inner .header-co-right .header-link-app { width:30px; background-repeat:no-repeat; background-position:center center; -ms-border-radius:7px; -moz-border-radius:7px; -webkit-border-radius:7px; border-radius:7px; -ms-background-size:30px 30px; -moz-background-size:30px 30px; -webkit-background-size:30px 30px; background-size:30px 30px; } #wrap.about .mainhead .header-co .header-co-inner .header-co-left { height:35px; } .marquee-app-wrap { padding: 48px 0 80px; } .marquee-app-wrap .icon-set { display: flex; animation: scroll 20s linear infinite; } .marquee-app-wrap .icon-set li { width: 160px; height: 160px; margin: 0 14px; -moz-border-radius: 40px; -webkit-border-radius: 40px; border-radius: 40px; -moz-box-shadow: 0 30px 30px 0 rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0 30px 30px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 30px 30px 0 rgba(0, 0, 0, 0.15); } .marquee-app-wrap .icon-set li div { width: 160px; height: 160px; -moz-background-size: 160px 160px; -webkit-background-size: 160px 160px; background-size: 160px 160px; } .marquee-app-wrap .icon-set li div::before { width: 160px; height:160px; -moz-border-radius: 40px; -webkit-border-radius: 40px; border-radius: 40px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .installation-top .installation-top-inner { width: 1200px; height:680px; margin: 0 auto; justify-content: space-between; } .installation-top .text-box { background-color: transparent; padding:0; background: none; height: 680px; } .installation-top .text-box::before { width: 100%; height: 1742px; background: url('../images/pic/top_bg_light_pc.jpg') no-repeat 0 0; top:-80px; -moz-background-size: 100% 1742px; -webkit-background-size: 100% 1742px; background-size: 100% 1742px; } .installation-top .text-box .text-type01 { font-size: 44px; line-height: 54px; margin: 70px 0 0 70px; } .installation-top .text-box .text-type02 { font-size: 24px; line-height: 32px; margin: 20px 0 0 70px; } .installation-top .install-btn-wrap { margin: 48px 0 0 70px; } .installation-top .install-btn-wrap a { font-size: 17px; line-height: 23px; min-width: 180px; padding: 12.5px 28px; } .installation-top .phone-img { position: relative; left:0; top: 30px; width: 610px; height: 790px; } .installation-top .phone-img.Ani { -moz-animation:imgAni 0.4s linear forwards; -webkit-animation:imgAni 0.4s linear forwards; animation:imgAni 0.4s linear forwards; } .installation-top .phone-img .mobileQrCode { display: none; } .installation-top .phone-img .pcQrCode { display:block; width: 610px; overflow: hidden;} .installation-top .phone-img .pcQrCode .phoneQrBack {width: 610px; height: 790px;} .menu-wrap { position: sticky; top: 100px; z-index: 900; display: flex; justify-content: center; } .content-wrap { padding:100px 0 0; overflow: visible; } .store-download-qr-wrap { width: 370px; padding: 48px 0 0; left: 69px; } .store-download-qr-wrap .store-download-qr-inner { position: relative; padding:28px; background-color: rgba(131, 131, 222, 0.1); -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; box-shadow: 0 10px 30px 0 rgba(53, 37, 155, 0.4); } .store-download-qr-wrap .store-download-qr-inner:before { content:''; position:absolute; top:0; left:0; right:0; bottom:0; z-index: 11; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; padding:1px; background: linear-gradient(180deg, rgba(152, 135, 255, 1), rgba(105, 105, 219, 1)); } .store-download-qr-wrap .store-download-qr-inner strong { font-size: 18px; line-height: 24px; } .store-download-qr-wrap .store-download-qr-inner .store-qr-code-wrap .text-wrap { font-size: 14px; line-height: 20px; } .store-download-qr-wrap .store-download-qr-inner .store-qr-or-line span { font-size:14px; line-height: 20px; } .store-download-qr-wrap .store-download-qr-inner .store-qr-btn-wrap a { padding:14px 28px; min-width: 180px; } .store-download-qr-wrap .store-download-qr-inner .store-qr-btn-wrap a:hover { background-color: rgba(182, 173, 255, 0.26); border-color: rgba(205, 201, 231, 0.76); } .floting-wrap .floting-btn a:hover{background: #5A2CFF;} .section-01-text { padding: 68px 0 0; } .section-01-text strong { font-size: 28px; line-height: 40px; text-align: center; } .section-01-text span { font-size: 17px; line-height: 23px; text-align: center; padding:16px 0 0; } .about-onestore { padding: 50px 60px 60px} .about-onestore .title { font-size: 28px; line-height: 40px; text-align: center; padding:0 71.5px 60px; } .about-box-wrap { display: flex; gap: 28px; } .about-onestore .about-box { display:block; padding: 50px 40px; width: 50%; background: linear-gradient(180deg, rgba(112, 90, 255, 0.3), rgba(77, 62, 193, 0)); } .about-onestore .about-box:before { background: linear-gradient(180deg, rgba(62, 55, 114, 1), rgba(62, 55, 114, 0)); } .about-onestore .about-box strong { font-size:20px; line-height:26px; text-align: center; } .about-onestore .about-box p { font-size:17px; line-height:23px; text-align: center; margin-top:12px; } .about-onestore .about-box .box-img { display: none; } .about-onestore .about-box .box-img.pc { display: block; width: 250px; height: 180px; margin: 40px auto 0; } .about-onestore .about-box .box-img.pc img { width: 250px; height: 180px; } .about-onestore .about-box-wrap.ty2 { display: block; gap: unset; } .about-onestore .about-box-wrap.ty2 .about-box { display:flex; width: 100%; padding: 60px 0; } .about-onestore .about-box-wrap.ty2 .box-img.pc { width: 50%; height: 412px; margin:0; } .about-onestore .about-box-wrap.ty2 .box-img.pc img { width: 320px; height: 412px; margin: 0 auto; } .about-onestore .about-box-wrap.ty2 .box06 .box-img img { width: 400px; height: 330px;} .about-onestore .about-box-wrap.ty2 .box-inner { width: 50%; padding: 0; } .about-onestore .about-box-wrap.ty2 strong { font-size:28px; line-height:40px; text-align: left; } .about-onestore .about-box-wrap.ty2 p { font-size:17px; line-height:23px; text-align: left; } .about-onestore .about-box.box03 , .about-onestore .about-box.box04 { padding:50px 40px 220px 50px; } .about-onestore .about-box.box03 .box-img.pc , .about-onestore .about-box.box04 .box-img.pc { position: absolute; left:0; bottom:0; margin: 0 0 0 125px; } .guide-layout .title { font-size:28px; line-height:40px; padding:80px 50px 48px; } .guide-layout-inner .guide-box { padding: 28px 40px; gap: 32px; } .guide-layout-inner .guide-box .box-text em { font-size: 16px; line-height: 22px; padding:7px 20px; } .guide-layout-inner .guide-box .box-text strong { font-size:16px; line-height:22px; padding: 20px 0 0; } .guide-layout-inner .guide-box .box-img { width: 320px; min-width: 320px;} .guide-layout-inner .guide-box .box-img-inner { padding: 16px; } .guide-layout-inner .guide-box .box-img-inner .box-img-item-inner em { font-size: 13px; line-height: 19px; } .guide-layout-inner .guide-box .box-img-inner .box-img-item { font-size: 13px; line-height: 19px; } .guide-layout-inner .guide-box .box-text p { font-size: 15px; line-height: 21px; padding:4px 0 0; } .guide-layout-inner .guide-box.box09 .box-img-inner .box-img-item-inner em , .guide-layout-inner .guide-box.box10 .box-img-inner .box-img-item-inner em { font-size: 14px; line-height: 20px; } .guide-layout-inner .guide-box.box10 .box-img-inner .box-img-text { padding:12px 0 20px; } .guide-layout-inner .guide-box.box10 .box-img-inner .box-img-item ul li { font-size: 13px; line-height: 19px;} .guide-layout-inner .guide-box.box10 .box-img-inner .box-img-item ul li:after { top: 3.5px } .support-layout .support-layout-inner .guid-box-list .guid-box-item .guid-box-link .guid-box-item-inner { padding: 28px 92px 28px 40px; } .support-layout .support-layout-inner .guid-box-list .guid-box-item .guid-box-link .guid-box-item-inner .guid-box-question { font-size: 16px; line-height:22px; } .support-layout .support-layout-inner .guid-box-list .guid-box-answer { padding: 0 40px 32px; } .support-layout .support-layout-inner .guid-box-list .guid-box-answer div.last-answer p { font-size: 15px; line-height: 21px; } .support-layout .support-layout-inner .guid-box-list .guid-box-item .guid-box-link .guid-box-item-inner:after { width: 20px; height: 20px; background-position: -30px -273px; } .support-layout .support-layout-inner .guid-box-list .guid-box-item.on .guid-box-link .guid-box-item-inner:after { background-position: 0 -273px; } .support-layout .support-layout-inner .guid-box-list .guid-box-item .guid-box-link:hover .guid-box-question {color: #3917C0;} .support-layout .support-layout-inner .guid-box-list .guid-box-item .guid-box-link:hover .guid-box-item-inner:hover:after{ background-position: -142px -273px; } .support-layout .support-layout-inner .guid-box-list .guid-box-item.on .guid-box-link:hover .guid-box-item-inner:hover:after { background-position: -112px -273px; } .more-help-wrap .btn { width: 360px; padding: 20px 28px; margin:40px auto 0; -moz-border-radius: 56px; -webkit-border-radius: 56px; border-radius: 56px; } .more-help-wrap .btn em { font-size: 17px; line-height: 23px; } .more-help-wrap .btn:hover em { color: #3917C0; } .more-help-wrap .btn em i { display:inline-block; margin:0 16px 0 0;} .footer-store-download-wrap { padding: 80px 50px 0; } .footer-store-download-inner { padding: 56px 50px; } .footer-store-download-inner .left-item-text { padding: 0 32px 0 112px; } .footer-store-download-inner .left-item-text i { width: 80px; height: 80px; margin-top: -40px; background-position: 0 -38px; } .footer-store-download-inner .left-item-text strong { font-size: 26px; line-height: 38px; } .footer-store-download-inner .left-item-text em { font-size: 17px; line-height: 23px; padding: 10px 0 0; } .footer-store-download-inner .right-item a { width:180px; min-width: 180px; font-size: 17px; line-height: 23px; padding: 11.5px 27px; } .pc .footer-store-download-inner { padding: 28px 50px; } .pc .footer-store-download-inner .right-item { width: 132px; height: 132px; } .pc .footer-store-download-inner .right-item img { width: 132px; height: 132px; } #wrap.about #footer{ overflow: hidden; } #wrap.about #footer .footer-content-wrap .footer-content-inner { width:1200px; padding:0 50px 60px 50px; } #wrap.about #footer.sub .footer-content-wrap .footer-link-wrap { padding: 50px 0 72px 0; display: table; width: 100%; table-layout: fixed; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #wrap.about #footer.sub .footer-content-wrap .footer-company-wrap { max-width: unset;} #wrap.about #footer.sub .footer-content-wrap .footer-company-wrap > ul > li .footer-company-icon-box-mobile { display: none;} #wrap.about #footer.sub .footer-content-wrap .footer-company-wrap .footer-company-icon-box { display: block; margin:0; } #wrap.about #footer.sub .footer-content-wrap .footer-link-wrap .conditions-item-wrap ul li { margin: 0 20px 0 0; padding: 0 21px 0 0;} #wrap.about #footer.sub .footer-content-wrap .footer-link-wrap .conditions-item-wrap ul li a { font-size: 15px; line-height: 21px; padding:13.5px 0; } #wrap.about #footer.sub .footer-content-wrap .footer-item-email { font-size: 15px; line-height: 21px; } #wrap.about #footer.sub .footer-content-wrap .footer-item-email a { padding: 13.5px 0; } #wrap.about #footer.sub .footer-content-wrap .footer-link-wrap em { font-size: 15px; line-height: 21px; } #wrap.about #footer.sub .footer-content-wrap .footer-link-wrap .conditions-item-wrap ul li:after { height: 13px; } #wrap.about #footer.sub .footer-content-wrap .footer-company-wrap > ul > li.footer-company-onestore ul { padding: 24px 0 0 } #wrap.about #footer.sub .footer-content-wrap .footer-company-wrap > ul > li.footer-company-onestore > ul > li { font-size: 15px; line-height: 21px; } #wrap.about #footer.sub .footer-content-wrap .footer-info-wrap p { font-size: 15px; line-height: 21px; padding-bottom: 8px; max-width: 760px; } #wrap.about #footer.sub .footer-content-wrap .footer-info-wrap p.footer-logo { padding: 0 0 8px 0; } #wrap.about #footer.sub .footer-content-wrap .footer-sns-wrap.mo { display: none;} #wrap.about #footer.sub .footer-content-wrap .footer-sns-wrap { display: block; text-align: right; padding: 0;display: table-cell; width: 130px;} #wrap.about #footer.sub .footer-content-wrap .footer-sns-wrap ul { font-size: 0; line-height: 0; display: block; text-align: right; } #wrap.about .footer-content-wrap .footer-sns-wrap li { display: inline-block; padding: 0 18px 0;} #wrap.about .footer-content-wrap .footer-sns-wrap li:first-of-type { padding-left: 0; } #wrap.about .footer-content-wrap .footer-sns-wrap li:last-of-type { padding-right: 0; } #wrap.about .footer-content-wrap .footer-sns-wrap li a { padding: 2.5px; display: inline-block;} #wrap.about .footer-content-wrap .footer-sns-wrap li a:hover{opacity:0.7 !important;} #wrap.about .footer-content-wrap .footer-link-wrap .conditions-item-wrap ul li a:hover{color:#8E85FE !important;} #wrap.about .footer-content-wrap .footer-item-email a:hover{color:#8E85FE !important;} /* 앱 다운로드 안내 페이지 End : 768px 이상 */ } @media (max-width:320px) { /* Detail 혜택 Start */ .detailcommunity-wrap li , .new .detailcommunity-wrap li { margin:15px 20px 0 0; } /* Detail 혜택 End */ } @media (min-width:320px) and (max-width:390px) { /* Detail 혜택 Start */ .detailcommunity-wrap li , .new .detailcommunity-wrap li { margin:15px 24px 0 0; } /* Detail 혜택 End */ } @media (min-width:390px) and (max-width:499px) { /* Detail 혜택 Start */ .detailcommunity-wrap li , .new .detailcommunity-wrap li { margin:15px 30px 0 0; } /* Detail 혜택 End */ } @supports ( gap:10px ) { @media (max-width:320px) { /* Detail 혜택 Start */ .detailcommunity-wrap ul , .new .detailcommunity-wrap ul { gap:15px 20px; } /* Detail 혜택 End */ } } @supports ( gap:10px ) { @media (min-width:320px) and (max-width:499px) { /* Detail 혜택 Start */ .detailcommunity-wrap ul , .new .detailcommunity-wrap ul { gap:15px 30px; } /* Detail 혜택 End */ } } @media (min-width:320px) { /* Detail 데이터 보안 Start */ .datasafety-wrap .datasafety-co ul.two-items , .datasafety-wrap .datasafety-co ul.three-items { flex-wrap: wrap; } .datasafety-wrap .datasafety-co ul.two-items li , .datasafety-wrap .datasafety-co ul.three-items li { flex-basis: calc(50% - 6px); } .datasafety-wrap .datasafety-co .datasafety-list-no span { display: inline-block; padding: 0 0 0 8px;} .data-box-co .datasafety-list-no span { display: inline-block; padding: 0 0 0 8px;} /* Detail 데이터 보안 End */ } @media (min-width:768px) { /* Detail 데이터 보안 Start */ .datasafety-wrap .datasafety-co ul.three-items { flex-wrap: wrap; } .datasafety-wrap .datasafety-co ul.three-items li { flex-basis: calc(100% / 3 - 8px); } /* Detail 데이터 보안 End */ /* 블로그 Start */ .blog-box-wrap .blog-box-inner .blog-list .list-item-inner a { display: table; width: 100%; table-layout: fixed;} .blog-box-wrap .blog-box-inner .item-box , .blog-box-wrap .blog-box-inner .img-box { display: table-cell; } .blog-box-wrap .blog-box-inner .img-box { width:348px; height:196px; padding-right: 24px;} .blog-box-wrap .blog-box-inner .item-box .item-title { max-height: 110px; -webkit-line-clamp: 5; margin-bottom: 12px; } /* 블로그 End */ } /* 통합 다운로드 레이아웃 */ .download-integration-wrap { width:100%; height:100%; display:table; table-layout: fixed;} .download-integration-wrap .download-integration-inner { padding:0 16px; height:100%; text-align: center; display: table-cell; vertical-align: middle; } .download-integration-wrap .download-integration-box { width:100%; max-width: 416px; margin:0 auto; } .download-integration-wrap .download-integration-ti { padding:0; text-align: center; } .download-integration-wrap .download-integration-ti h2 { margin:0 0 4px 0; padding:0; font-size: 16px; color: #000000; font-weight:700; line-height: 22px; } .download-integration-wrap .download-integration-ti p { margin:0; padding:0; font-size: 13px; color: #454545; line-height: 19px; } .download-integration-wrap .download-integration-item { padding: 32px 0 0 0;} .download-integration-wrap .download-integration-item ul { display:flex; align-items: stretch; } .download-integration-wrap .download-integration-item li { flex:1 1; padding:0 4px; box-sizing: border-box; display:flex; } .download-integration-wrap .download-integration-item li .item-brand { flex:1 1; background: #3917c0; border-radius:16px; display: block; } .download-integration-wrap .download-integration-item li .item-brand span { padding:36px 16px 0 16px; text-align: center; display: block; } .download-integration-wrap .download-integration-item li .item-brand span img { height: 70px; vertical-align:top;} .download-integration-wrap .download-integration-item li .item-brand span strong { margin:36px 0 0 0; padding:16px 0 16px 0; border-top:1px solid rgba(255,255,255,0.2); display: block; } .download-integration-wrap .download-integration-item li .item-brand span strong a { position:relative; padding:6px 0 6px 0; display:block; } .download-integration-wrap .download-integration-item li .item-brand span strong em { position: relative; padding:0 15px 0 0; font-size: 13px; color:#ffffff; line-height:19px; display: inline-block;} .download-integration-wrap .download-integration-item li .item-brand span strong em:after { position:absolute; content:''; right:0; top:50%; transform: translate3d(0, -50%, 0); width:15px; height:15px; background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAfCAYAAADwbH0HAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAETSURBVHgB7ZTPbYNQDIf9oNw7QjZoEXDgRkboBnSS0g26Ae0k7Q0JhOgIjJA7/2JHJCK5INuJksP7DoCQ7E/+PesBWCyWe1FVVVKWZQpKHGBijMkdx8nrus5BAVuMtPSYpinVyNli13Xf8PWvlRsQ0DTN8zAMv/j5emhizHcQBO+cHpKowff9HU6+hfPJPzg9ROKjvOs6ir2d5RlHLop6SVEUG8/zKPbNoaExGcb+uVanFkvl4qiXxHHcYtSn5aLY12quIqaJ6WJZiG8f9WXMJI2iKFurU4mlUpV4vkQaiVQsJmnf9394ri/zr58wDFNGC774GlKCvdUYb66VisRIopUST8BkHMctTpzgIn2BxfKI7AHsCoVt5kXPlwAAAABJRU5ErkJggg==') no-repeat center center; background-size:15px 15px; display:block; } .download-integration-footer { position: absolute; left:0; bottom:0; width: 100%; padding:0 20px 40px 20px; box-sizing:border-box; } .download-integration-footer .download-integration-footer-language { text-align:center; } .download-integration-footer .download-integration-footer-language-box { position: relative; display:inline-block; } .download-integration-footer .download-integration-footer-language a.download-language-btn { padding:0; font-size:13px; color:#000; line-height:19px; font-weight:400; border-bottom:1px solid #ccc; outline:0 none; background-color: transparent; display:inline-block; } .download-integration-footer .download-integration-footer-language a.download-language-btn:after { position: absolute; content: ''; right:8px; top:8px; width: 15px; height: 15px; background: url(../../en/images/icon/icon_calendar_24.png) no-repeat 0 0; background-size: 15px 15px; } .download-integration-footer .download-integration-footer-language a.download-language-btn span { position:relative; width:200px; padding:6px 23px 6px 8px; text-align: left; display:inline-block; box-sizing: border-box; } .download-integration-footer .download-integration-footer-language a.download-language-btn span:before { position:absolute; content: ''; left:0; bottom:0; width:1px; height:7px; background-color: #ccc; display:block;} .download-integration-footer .download-integration-footer-language a.download-language-btn span:after { position:absolute; content: ''; right:0; bottom:0; width:1px; height:7px; background-color: #ccc; display:block;} .download-integration-footer .download-integration-footer-para { padding:32px 0 0 0; font-size:13px; color:#8C8C8C; line-height:20px; text-align: center; vertical-align: middle; } .download-integration-footer .download-integration-footer-para span { margin-right:8px; line-height: 20px; display: inline-block;} .download-integration-footer .download-integration-footer-para i { vertical-align: top;} .download-integration-footer .download-integration-footer-language-box .languagePopup { text-align: left; } .download-integration-footer .popupgroup-wrap.languagePopup .popupgroup-box .popupgroup-co-filterlist ul li a.filterlist-item { padding:16px 0 16px 0;} /* // 통합 다운로드 레이아웃 */ @media (min-width: 769px) { .download-integration-footer .popupgroup-wrap.languagePopup { position: absolute; top:auto; bottom:51px; width:100%; background-color:transparent !important; } .download-integration-footer .popupgroup-wrap.languagePopup .popupgroup-box { top:unset; bottom:0; } .download-integration-footer .popupgroup-wrap.languagePopup .popupgroup-inner { padding:8px 16px !important; background-color:#ffffff; box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.35); } .download-integration-footer .popupgroup-wrap.languagePopup .popupgroup-co-filterlist { padding:0; } .download-integration-footer .popupgroup-wrap.languagePopup .popupgroup-co-filterlist ul li:last-of-type { border-bottom-width:0;} .download-integration-footer .popupgroup-wrap.languagePopup .popupgroup-box .popupgroup-co-filterlist ul li a.filterlist-item span{ padding-left:0; color:#000000; line-height:19px; } .download-integration-footer .popupgroup-wrap.languagePopup .popupgroup-box .popupgroup-co-filterlist ul li a.filterlist-item.selected span { color:#312C70; } } @media (min-width: 769px ) and (max-width: 1200px) { #wrap.about { overflow:visible; width: 1200px; } #wrap.about #container , #footer{ width: 1200px; } } @media (min-width: 1400px) and (max-width: 1600px) { .installation-top .phone-img .pcQrCode { overflow: visible; } } /* 2024.09.11 풋터 추가 관련 */ #footer.sub .footer-content-wrap { width:100%; border-top:1px solid rgba(255,255,255,0.1); max-width:none;} #footer.sub .footer-content-wrap .footer-content-inner { position:relative; width:100%; margin:0 auto; padding:0 20px 40px 20px; box-sizing:border-box; } #footer.sub .footer-content-wrap .footer-link-wrap { width:100%; padding:30px 0 56px 0; display:block; box-sizing:border-box; } #footer.sub .footer-content-wrap .footer-link-wrap em { letter-spacing:0; display:inline-block;} #footer.sub .footer-content-wrap .icon-footer-onestore-m { width:154px; height:20px; background-position:-387px -968px;} #footer.sub .footer-content-wrap .footer-company-wrap .footer-company-icon-box { display:none; } #footer.sub .footer-content-wrap .footer-link-wrap ul { font-size:0; text-align:left; display:table-cell; } #footer.sub .footer-content-wrap .footer-link-wrap .conditions-item-wrap ul li { position:relative; padding:0 12px 0 0; margin:0 12px 0 0; font-size:13px; color:rgba(255,255,255,0.9); display:inline-block; } #footer.sub .footer-content-wrap .footer-link-wrap .conditions-item-wrap ul li:after{ position:absolute; content:''; right:0; top:50%; width:1px; height:10px; background-color:rgba(255,255,255,0.2); display:block; transform: translate3d(0, -50%, 0); } #footer.sub .footer-content-wrap .footer-link-wrap .conditions-item-wrap ul li:last-of-type { padding-right:0; margin-right:0;} #footer.sub .footer-content-wrap .footer-link-wrap .conditions-item-wrap ul li:last-of-type:after {display: none;} #footer.sub .footer-content-wrap .footer-link-wrap .conditions-item-wrap ul li a { padding:14.5px 0; font-size:13px; color:rgba(255,255,255,0.9); line-height:19px; display:block; } #footer.sub .footer-content-wrap .footer-link-wrap .conditions-item-wrap ul li.bold-text a {font-weight: bold;} #footer.sub .footer-content-wrap .footer-item-email { position: relative; margin:0; font-size:13px; color:rgba(255,255,255,0.9); line-height:19px; } #footer.sub .footer-content-wrap .footer-item-email a { display:inline-block; font-size:13px; color:rgba(255,255,255,0.9); line-height:19px; padding: 14.5px 0; } #footer.sub .footer-content-wrap .footer-sns-wrap { display:none; } #footer.sub .footer-content-wrap .footer-company-wrap { padding:0 0 8px 0; font-size:12px; color:rgba(226,219,255,0.5); line-height:16px; max-width: unset;} #footer.sub .footer-content-wrap .footer-company-wrap > ul { display:block; } #footer.sub .footer-content-wrap .footer-company-wrap > ul > li { width:100%;} #footer.sub .footer-content-wrap .footer-company-wrap > ul > li .footer-company-icon-box-mobile { width:100%; padding:2px 0; display:block;} #footer.sub .footer-content-wrap .footer-company-wrap > ul > li.footer-company-onestore ul { padding:28px 0 0;} #footer.sub .footer-content-wrap .footer-company-wrap > ul > li.footer-company-onestore > ul > li { font-size:11px; color:rgba(255, 255, 255, 0.40); line-height:16px;} #footer.sub .footer-content-wrap .footer-info-wrap { text-align:left; } #footer.sub .footer-content-wrap .footer-info-wrap p { max-width:none; padding:0 0 8px; font-size:11px; color:rgba(255, 255, 255, 0.40); line-height:16px; letter-spacing:0; } #footer.sub .footer-content-wrap .footer-info-wrap p.footer-logo { padding-bottom:8px; font-size:11px; color:rgba(255, 255, 255, 0.40); line-height:16px; letter-spacing:0; } #footer.sub .footer-content-wrap .footer-sns-wrap.mo { width:100%; padding:20px 1px 8px 1px; text-align:left; display:block; box-sizing:border-box;} #footer.sub .footer-content-wrap .footer-sns-wrap .footer-sns-inner-mobile { text-align:left; display:block;} #footer.sub .footer-content-wrap .footer-sns-wrap .footer-sns-inner-mobile li { margin:0 16px 0 0; padding:0 !important; display:inline-block;} #footer.sub .footer-content-wrap .footer-sns-wrap .footer-sns-inner-mobile li a { padding:5px; display:inline-block;} #footer.sub .footer-content-wrap .icon-footer-onestore-m { width:154px; height:20px; background-position:-387px -968px;} #footer.sub .footer-content-wrap .icon-footer-youtube-m { width:30px; height:30px; background-position:-76px -938px;} #footer.sub .footer-content-wrap .icon-footer-facebook-m { width:30px; height:30px; background-position:-111px -938px;} /* //2024.09.11 풋터 추가 관련 */