@charset "utf-8"; @import url('font.css'); @import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500&display=swap'); @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap'); @font-face { font-family:'Cafe24Ssurround'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24Ssurround.woff') format('woff'); font-weight:normal; font-style:normal; } /* ---------------------------------------------------------- Everland Resort Reservation Mobile Cascading Style Sheets -------------------------------------------------------------*/ html, body { width:100%; margin:0; padding:0; } body { font-family:'Noto Sans KR',HelveticaNeue,'Helvetica Neue',AppleSDGothicNeo,'Apple SD Gothic Neo',sans-serif; font-size:13px; line-height:19px; color:#444; letter-spacing:-0.2px; } div, p, ul, ol, li, dl, dt, dd, form, fieldset, button, blockquote, table, th, td, h1, h2, h3, h4, h5, h6 { margin:0; padding:0; } table { border-collapse:collapse; } table caption { text-align:left; display:none; } ul, ol, li { list-style:none; } form, input, select, textarea, button { font-family:'Noto Sans KR',HelveticaNeue,'Helvetica Neue',AppleSDGothicNeo,'Apple SD Gothic Neo',sans-serif; font-size:13px; line-height:19px; color:#444; } button { border:0; margin:0; padding:0; cursor:pointer; outline-style:none; } input, select, textarea { outline-style:none; margin:0; } input[type=text]::-ms-clear, input[type=password]::-ms-reveal { width:27px; height:27px; } img { border:0; } i, em, cite { font-style:normal; } a { color:#000; text-decoration:none; cursor:pointer; } a:hover { color:#000; text-decoration:none; cursor:pointer; } /* layout ------------------------------------------------------------------------*/ /* Top */ #wrapTop { position:fixed; z-index:10; top:0; left:0; right:0; height:52px; background:#fff; padding-top:16px; overflow:hidden; box-sizing:border-box; } #wrapTop.stop { box-shadow:0 0 10px rgba(0,0,0,.2); } #wrapTop > a, #wrapTop h1 a { height:19px; background-image:url('/mobile/img/202003170001/btn_header.png'); background-repeat:no-repeat; background-size:auto 100%; font-size:0; line-height:0; text-indent:-9999px; display:block; overflow:hidden; } #wrapTop h1 { position:absolute; z-index:9; left:20px; bottom:14px; width:24px; height:24px; font-size:0; line-height:0; display:inline-block; overflow:hidden; } #wrapTop h1 a { width:100%; height:100%; background:url('/mobile/asset/images/icon_home.svg') center center no-repeat; } #wrapTop h1.logo { width:135px; height:18px; } #wrapTop h1.logo a { background:url('/mobile/img/202003170001/logo_resort.png') left center no-repeat; background-size:auto 100%; } #wrapTop h2 { padding:0 70px 0 62px; font-weight:500; font-size:15px; color:#000; } #wrapTop h2 span { color:#fe5730; } #wrapTop .btnBack, #wrapTop .btnMenu { position:absolute; z-index:9; } #wrapTop .btnBack { left:55px; bottom:17px; width:22px; background:url('/mobile/asset/images/btn_back.svg') center center no-repeat; } #wrapTop .btnMenu { right:25px; bottom:18px; width:20px; background-position:right center; } #wrapTop .btnCart { position:absolute; z-index:9; bottom:20px; right:64px; width:24px; background-image:url('/mobile/img/202003170001/btn_cart.png'); } #wrapTop .btnMylist { position:absolute; z-index:9; top:13px; right:22px; width:50px; height:41px; background:none; font-size:12px; line-height:14px; text-indent:0; text-align:center; box-sizing:border-box; } #wrapTop .btnMylist:before { content:''; width:23px; height:23px; background:url('/mobile/img/202003170001/icon_mylink.png') left top no-repeat; background-size:100% auto; margin:0 auto 4px auto; display:block; } /* 2020-07-16 버튼 추가 */ #wrapTop .btnParkCngstn { position:absolute; z-index:9; top:13px; right:85px; width:60px; height:41px; background:none; font-size:12px; line-height:14px; text-indent:0; text-align:center; box-sizing:border-box; } #wrapTop .btnParkCngstn:before { content:''; width:18px; height:23px; background:url('/mobile/img/202003170001/icon_ParkCngstn.png') left top no-repeat; background-size:100% auto; margin:0 auto 4px auto; display:block; } /* 2020-07-16 버튼 추가 */ #wrapTop.sub h2 { padding-left:88px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; } /* 모바일 오더 추가*/ #wrapTop.simp h2 { padding-left:66px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; } #wrapTop.simp .btnBack { left:25px; } /* 장바구니,결제*/ #wrapTop.order h1 { left:auto; right:20px; } #wrapTop.order h2 { padding-left:53px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; } #wrapTop.order .btnBack { left:20px; } #wrapTop.order .btnMenu { display:none; } /* Menu */ #wrapMenu { position:fixed; z-index:99; top:0; right:-450px; width:100%; height:100%; max-width:420px; background:#fff; display:none; overflow:hidden; box-shadow:0 0 50px #000; } #wrapMenu .contBox { position:relative; z-index:1; width:100%; height:100%; padding-top:60px; overflow:auto; box-sizing:border-box; -webkit-overflow-scrolling:touch; } #wrapMenu .logoBox { position:absolute; z-index:10; top:0; left:0; right:0; height:60px; background:#fff; padding-top:25px; box-sizing:border-box; } #wrapMenu .logoBox a { width:135px; height:18px; background:url('/mobile/img/202003170001/logo_resort.png') left center no-repeat; background-size:auto 100%; margin-left:25px; font-size:0; line-height:0; text-indent:-9999px; display:block; overflow:hidden; } #wrapMenu .logoBox.stop { box-shadow:0 0 10px rgba(0,0,0,.2); } #wrapMenu .memuBox { padding:7px 25px; } #wrapMenu .memuBox li { position:relative; word-wrap:break-word; word-break:keep-all; } #wrapMenu .memuBox li.on > ul { display:block; } #wrapMenu .memuBox > ul > li:after, #wrapMenu .memuBox .subDepth1 > li:after, #wrapMenu .memuBox .subDepth2 > li:after { content:''; position:absolute; z-index:1; right:10px; width:10px; height:6px; background-image:url('/mobile/img/202003170001/mark_open.png'); background-repeat:no-repeat; background-size:40px auto; display:block; clear:both; } #wrapMenu .memuBox > ul > li { border-top:solid 1px #e9e9e9; padding:18px 0; font-size:16px; font-weight:500; color:#000; } #wrapMenu .memuBox > ul > li:after { top:25px; background-position:-15px top; } #wrapMenu .memuBox > ul > li:first-child { border-top:0; } #wrapMenu .memuBox > ul > li.on { padding:41px 0; } #wrapMenu .memuBox > ul > li.on > .btnReserve { display:block !important; } #wrapMenu .memuBox > ul > li.on:after { display:none; } #wrapMenu .memuBox .menu1.on .btnReserve:after { background-color:#fe562c !important; } #wrapMenu .memuBox .menu2.on .btnReserve:after { background-color:#1b9bf0 !important; } #wrapMenu .memuBox .menu3 > a { margin:-19px 0; padding:19px 0; display:block; } #wrapMenu .memuBox .menu3 > a.btnReserve { padding:0; display:none; } #wrapMenu .memuBox .menu3.on > a { margin:-28px 0; } #wrapMenu .memuBox .menu3.on > a.btnReserve { margin:0; } #wrapMenu .memuBox .subDepth1 { border-top:solid 1px #000; margin-top:19px; padding:28px 0 7px 0; display:none; } #wrapMenu .memuBox .subDepth1 > li { padding:9px 0 9px 15px; color:#222; font-size:14px; font-weight:500; } #wrapMenu .memuBox .subDepth1 > li a { margin:-9px 0 -9px -15px; padding:9px 25px 9px 15px; color:#222; display:block; } #wrapMenu .memuBox .subDepth1 > li a:after { content:''; position:absolute; z-index:2; top:15px; right:10px; width:10px; height:10px; background:#fff; display:block; } #wrapMenu .memuBox .subDepth1 > li:after { top:15px; background-position:left top; } #wrapMenu .memuBox .subDepth1 > li:last-child .subDepth2 { border-bottom:0; margin-bottom:0; padding-bottom:0; } #wrapMenu .memuBox .subDepth1 > li.on:after { background-position:right top; } #wrapMenu .memuBox .subDepth2 { border-top:solid 1px #e9e9e9; border-bottom:solid 1px #e9e9e9; margin:12px 0 9px -15px; padding:17px 0 38px 30px; display:none; } #wrapMenu .memuBox .subDepth2 > li { padding:9px 30px 9px 10px; font-size:13px; font-weight:400; color:#444; } #wrapMenu .memuBox .subDepth2 > li a { color:#444; } #wrapMenu .memuBox .subDepth2 > li:after { top:16px; background-position:left top; } #wrapMenu .memuBox .subDepth2 > li.on:after { background-position:right top; } #wrapMenu .memuBox .subDepth3 { margin-right:-15px; padding:14px 0 15px 23px; display:none; } #wrapMenu .memuBox .subDepth3 > li { font-size:12px; font-weight:300; color:#444; } #wrapMenu .memuBox .subDepth3 > li a { margin:0; padding-right:10px; } #wrapMenu .memuBox .subDepth3 > li a:after { display:none; } #wrapMenu .memuBox .subDepth3 > li:before { content:''; position:absolute; top:18px; left:-3px; width:8px; height:1px; background:#bebebe; } #wrapMenu .userBef { position:relative; min-height:23px; background:#f7f9fa; padding:28px 25px; letter-spacing:0; color:#555; word-wrap:break-word; word-break:keep-all; } #wrapMenu .userBef b { margin-bottom:18px; font-size:26px; font-weight:200; line-height:27px; color:#000; display:block; } #wrapMenu .userBef p { font-weight:300; } #wrapMenu .userInfo { position:relative; min-height:23px; padding-top:28px; } #wrapMenu .userInfo .link { border-bottom:solid 1px #e9e9e9; } #wrapMenu .userInfo .link li { position:relative; z-index:1; float:left; width:33.33%; } #wrapMenu .userInfo .link li a { height:99px; padding-top:58px; text-align:center; display:block; overflow:hidden; box-sizing:border-box; } #wrapMenu .userInfo .link li a:before { content:''; position:absolute; top:25px; left:50%; width:35px; height:25px; background-image:url('/mobile/img/202003170001/icon_userlink.png'); background-repeat:no-repeat; background-size:auto 115px; margin-left:-17px; display:block; clear:both; } #wrapMenu .userInfo .link li:before { content:''; position:absolute; top:30px; left:0; width:1px; height:20px; background:#e9e9e9; display:block; } #wrapMenu .userInfo .link li:first-child:before { display:none; } #wrapMenu .userInfo .link li:nth-child(1) a:before { background-position:3px top; } #wrapMenu .userInfo .link li:nth-child(2) { width:33.34%; } #wrapMenu .userInfo .link li:nth-child(2) a:before { background-position:-39px top; } #wrapMenu .userInfo .link li:nth-child(3) a:before { background-position:-78px top; } #wrapMenu .userInfo .link:after { content:''; display:block; clear:both; } #wrapMenu .userInfo .link.addType li, #wrapMenu .userInfo .link.addType li:nth-child(2) { width:50%; } #wrapMenu .userInfo .visit, #wrapMenu .userInfo .intro { min-height:50px; background:#fe5730; margin-top:34px; padding:15px 0 15px 24px; font-weight:300; color:#fff; word-wrap:break-word; word-break:keep-all; overflow:hidden; box-sizing:border-box; } #wrapMenu .userInfo .visit .day { margin-top:-2px; font-family:'Roboto'; font-size:17px; font-weight:400; vertical-align:middle; display:inline-block; } #wrapMenu .userInfo .visit + .intro { margin-top:3px; } #wrapMenu .userInfo .name { padding:0 125px 0 25px; font-size:26px; font-weight:200; line-height:27px; color:#000; } #wrapMenu .userInfo.cb .visit, #wrapMenu .userInfo.cb .intro { background:#1b9bf0; } #wrapMenu .userInfo.cb .link li:nth-child(1) a:before { background-position:3px -30px; } #wrapMenu .userInfo.cb .link li:nth-child(2) a:before { background-position:-39px -30px; } #wrapMenu .userInfo.cb .link li:nth-child(3) a:before { background-position:-78px -30px; } /* 신규 스피드웨이 추가 */ #wrapMenu .userInfo.speed .visit, #wrapMenu .userInfo.speed .intro { background:#554fca; } #wrapMenu .userInfo.speed .link li:nth-child(1) a:before { background-position:3px -60px; } #wrapMenu .userInfo.speed .link li:nth-child(2) a:before { background-position:-39px -60px; } #wrapMenu .userInfo.speed .link li:nth-child(3) a:before { background-position:-78px -60px; } #wrapMenu .btnLog { position:absolute; top:30px; right:25px; height:22px; background:#fff; border:solid 1px #d4d4d4; border-radius:100px; padding:0 14px; font-size:12px; line-height:22px; color:#555; display:block; } #wrapMenu .btnClose { position:absolute; z-index:20; top:23px; right:25px; width:17px; height:17px; background:url('/mobile/img/202003170001/btn_close_menu.png') center center no-repeat; background-size:auto 100%; font-size:0; line-height:0; text-indent:-9999px; display:block; overflow:hidden; } #wrapMenu .btnReserve { position:absolute; top:38px; right:0; font-size:12px; color:#000; display:none; } #wrapMenu .btnReserve:after { content:''; width:28px; height:28px; background:url('/mobile/img/202003170001/btn_reserve.png') center center no-repeat #ccc; background-size:auto 10px; border-radius:50px; margin:-1px 0 0 10px; vertical-align:middle; display:inline-block; clear:both; overflow:hidden; } /* Content */ #wrapCont { padding-top:52px; } #wrapCont .btnTop { position:fixed; z-index:11; right:26px; bottom:15px; width:42px; height:42px; background:url('/mobile/img/202003170001/btn_gotop.png') center center no-repeat #fff; background-size:11px auto; border:solid 1px #dfe2e4; border-radius:100px; font-size:0; line-height:0; text-indent:-9999px; display:none; overflow:hidden; box-sizing:border-box; } #wrapCont .btnTop.addType { bottom:65px !important; } #wrapCont .btnTop.orderType { right:20px; bottom:80px !important; } /* Footer */ #wrapFooter { background:#3c3d3e; } #wrapFooter .copy { padding:3px 0 40px 25px; font-family:'Roboto',arial; font-size:10px; letter-spacing:0; color:#9a9a9a; } #wrapFooter .policy { padding:27px 0 0 15px; } #wrapFooter .policy a { position:relative; display:inline-block; font-size:11px; letter-spacing:0; color:#cbcbcb; padding:10px; z-index:3; } #wrapFooter .policy a:last-child { padding:10px 10px 10px 0; } #wrapFooter .policy a:before { content:''; width:1px; height:7px; background:#5f6061; margin:-2px 7px 0 -4px; vertical-align:middle; display:inline-block; } #wrapFooter .policy a:first-child:before { display:none; } #wrapFooter .linkBox { border-bottom:solid 1px #4a4b4c; padding:24px 0; text-align:center; } #wrapFooter .linkBox li { padding:0 0.6%; display:inline-block; } #wrapFooter .linkBox a { height:31px; border:solid 1px #595a5b; border-radius:100px; padding:0 15px; font-size:11px; line-height:30px; letter-spacing:-1px; color:#cbcbcb; display:block; } #wrapFooter .linkBox:after { content:''; display:block; clear:both; } #wrapFooter .infoBox { margin-top:6px; padding:0 15px 0 25px; font-style:normal; font-size:10px; line-height:20px; color:#9a9a9a; display:block; } #wrapFooter .infoBox a { color:#9a9a9a; display:inline-block; } #wrapFooter .infoBox a.mail { margin-left:15px; letter-spacing:0; } #wrapFooter .infoBox a.bizLink { margin-left:5px; } #wrapFooter .infoBox span { padding-right:10px; display:inline-block; } #wrapFooter .btnAllat { position:relative; z-index:2; margin:-23px 0 -16px 0; padding-right:25px; font-size:0; line-height:0; text-align:right; } #wrapFooter .btnAllat a { width:50px; height:43px; background:url('/mobile/img/202003170001/btn_allat.png') center top no-repeat; background-size:100% auto; text-indent:-9999px; display:inline-block; overflow:hidden; } #wrapFooter.addType { padding-bottom:50px; } #wrapFooter.orderType { padding-bottom:65px; } /* gate ---------------------------------------------------------------------*/ #wrapIndex { padding:60px 25px 30px 25px; } #wrapIndex .intro { padding:25px 0 23px 0; font-size:13px; color:#333; } #wrapIndex .intro em { margin-top:5px; font-size:22px; letter-spacing:-0.3px; font-weight:600; line-height:33px; color:#000; display:block; } #wrapIndex .intro em > span { color:#fe5730; /* display:block; */} #wrapIndex .txtBox { position:absolute; z-index:3; top:7.9vw; left:10.3vw; font-size:3.9vw; color:#fff; display:block; } #wrapIndex .txtBox i { width:28vw; margin-top:4.1vw; font-size:5vw; font-weight:500; line-height:6vw; word-wrap:break-word; word-break:keep-all; display:block; } #wrapIndex .imgBox { position:relative; z-index:2; font-size:0; line-height:0; display:block; } #wrapIndex .subBox { position:relative; z-index:1; background:#fff; margin-top:-20px; padding-top:50px !important; padding-bottom:30px !important; text-align:center; display:block; } #wrapIndex .subBox a { position:relative; height:43px; font-size:15px; line-height:43px; display:inline-block; } #wrapIndex .subBox a:before { content:''; position:absolute; z-index:-1; width:43px; height:43px; top:50%; left:50%; border-radius:50px; margin:-22px 0 0 -21px; overflow:hidden; } #wrapIndex .linkMenu { position:relative; z-index:1; } #wrapIndex .linkMenu li { position:relative; margin-top:20px; border-radius:15px; overflow:hidden; box-shadow:6px 7px 15px rgba(0,0,0,.16); } #wrapIndex .linkMenu li:after, #wrapIndex .linkMenu li:before { content:''; position:absolute; z-index:10; bottom:41px; width:8px; height:17px; background:url('/mobile/img/202003170001/gate_furrow.png'); background-repeat:no-repeat; background-color:#fff; background-size:auto 100%; display:block; overflow:hidden; } #wrapIndex .linkMenu li:after { right:-2px; border-radius:20px 0 0 20px; background-position:left center; } #wrapIndex .linkMenu li:before { left:-2px; border-radius:0 20px 20px 0; background-position:right center; } #wrapIndex .linkMenu li > a { display:block; } #wrapIndex .linkMenu a > b { height:50px; background:#fff; font-size:15px; font-weight:400; line-height:50px; text-align:center; display:block; } #wrapIndex .linkMenu img { width:100%; } #wrapIndex .typeAct .txtBox { top:7.9vw; font-size:3.9vw; } #wrapIndex .typeAct .txtBox i { width:37vw; margin-top:4.1vw; font-size:5vw; font-weight:500; line-height:6vw; } #wrapIndex .typeAct:after, #wrapIndex .typeAct:before { top:17.1vw; bottom:auto !important; } #wrapIndex .typeAct.open .imgBox { border-radius:0 0 15px 15px; overflow:hidden; } #wrapIndex .typeAct.open .subBox { display:block; } #wrapIndex .gift a { margin:0 3.8%; min-width:68px; } #wrapIndex .gift a:before { background:#fcf2cd; } #wrapIndex .member a { margin:0 4.3%; } #wrapIndex .member a:before { background:#ede6f4; } #wrapIndex .child a { margin:0 4.3%; } #wrapIndex .child a:before { background:#d8efe9; } /*메인개선 수정 2025-06-24*/ #wrapGateTop { position:fixed; top:0; left:0; right:0; height:60px; z-index:10; font-family:'Pretendard'; background:#fff; padding-top:19px; overflow:hidden; box-sizing:border-box; } #wrapGateTop.stop { box-shadow:0 0 10px rgba(0,0,0,0.2); } #wrapGateTop > a, #wrapGateTop h1 a { display:block; font-size:0; line-height:0; text-indent:-9999px; overflow:hidden; } #wrapGateTop h1 { position:absolute; top:16px; left:20px; width:33px; height:28px; z-index:9; display:inline-block; font-size:0; line-height:0; overflow:hidden; } #wrapGateTop h1 a { width:100%; height:100%; background:url('/mobile/img/202003170001/logo_resort2.png') left center no-repeat; background-size:auto 100%; } #wrapGateTop h2 { font-size:18px; font-weight:600; line-height:21px; text-align:center; color:#000; letter-spacing:-0.36px; padding:0 100px; } #wrapGateTop .btn { position:absolute; top:16px; z-index:9; border-radius:50px; font-size:12px; line-height:14px; letter-spacing:-0.24px; font-weight:600; padding:7px 11px; text-indent:0; } #wrapGateTop .btnMylist { right:20px; background:#FAF5FF; color:#7A2ECD; } #wrapGateTop .btnParkCngstn { right:40px; } #wrapGate { background:url('/mobile/img/202003170001/bg_index.png') center bottom no-repeat; background-size:100% auto; font-family:'Pretendard'; padding:62px 20px 60px; } #wrapGate .banner { font-size:0; line-height:0; margin:0 -2.5vw; } #wrapGate .banner img { width:100%; } #wrapGate .banner .bx-viewport { z-index:9; } #wrapGate .banner .bx-controls { position:relative; z-index:9; } #wrapGate .banner .bx-pager { margin-top:-3px; text-align:center; } #wrapGate .banner .bx-pager-item { margin:0 3px; display:inline-block; } #wrapGate .banner .bx-pager-item a { width:5px; height:5px; background:#e2e2e2; border-radius:10px; display:block; } #wrapGate .banner .bx-pager-item a.active { background:#999; } #wrapGate .banner .bx-controls-auto { position:absolute; bottom:8.125vw; right:6.875vw; z-index:9; } #wrapGate .banner .bx-controls-auto-item { display:inline-block; } #wrapGate .banner .bx-controls-auto-item > a { display:block; text-indent:-9999px; width:20px; height:20px; outline:0; } #wrapGate .banner .bx-controls-auto .bx-start { background:url('/mobile/img/202003170001/new_gate_btn_play.png') no-repeat; background-size:auto 100%; } #wrapGate .banner .bx-controls-auto .bx-stop { background:url('/mobile/img/202003170001/new_gate_btn_stop.png') no-repeat; background-size:auto 100%; } #wrapGate .main { margin:20px 0; } #wrapGate .main:after { content:''; display:block; clear:both; } #wrapGate .main li { float:left; position:relative; width:calc(50% - 5px); margin-bottom:10px; overflow:hidden; border-radius:16px; box-shadow:0px 4px 10px 0px rgba(0, 0, 0, 0.10); } #wrapGate .main li > a { display:block; } #wrapGate .main li img { width:100%; } #wrapGate .main li:first-child { margin-right:10px; } #wrapGate .main li:last-child { width:100%; } #wrapGate .main li:last-child .tit { top:5.83vw; } #wrapGate .main .imgBox { position:relative; z-index:2; font-size:0; line-height:0; display:block; } #wrapGate .main .tit { position:absolute; z-index:3; top:6.7vw; left:5.6vw; font-size:5.6vw; line-height:1.3; color:#fff; font-weight:700; } #wrapGate .main .txtBox { position:absolute; z-index:3; bottom:6.1vw; left:5.6vw; font-size:3.6vw; line-height:1.3; color:#fff; word-wrap:break-word; word-break:keep-all; letter-spacing:-0.26px; } #wrapGate .main .txtBox b { font-weight:normal; color:#FFFC9E; } #wrapGate .sub { display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:center; gap:2.78vw; } #wrapGate .sub li { width:calc(33.33% - 1.85vw); border-radius:20px; background:#FFF; box-shadow:0px 2px 30px 0px rgba(0, 0, 0, 0.06); } #wrapGate .sub li a { display:flex; flex-direction:column; justify-content:center; align-items:center; font-size:3.6vw; letter-spacing:-0.6px; padding:3.89vw 0; } #wrapGate .sub li a > img { display:block; width:13.89vw; height:13.89vw; margin:0 auto 1.11vw; } .eventInfo .popupCon { height:100%; box-sizing:border-box; text-align:center; } .eventInfo .popupCon h2 { color:#fff; margin:28.05vw 0 0; font-size:10.6vw; letter-spacing:-1px; line-height:1.2; } .eventInfo .popupCon p { color:#fff; font-weight:lighter; font-size:3.6vw; margin-top:2.5vw; } .eventInfo .popupCon > label input { position:absolute; top:0; left:-20px; width:0; height:0; opacity:0; } .eventInfo .popupCon > label { position:relative; display:flex; padding-bottom:21px; margin-top:77vw; margin-left:5.58%; } .eventInfo .popupCon > label span { font-size:3.61vw; color:#fff; letter-spacing:-0.65px; line-height:1.1; padding-left:6.5vw; } .eventInfo .popupCon > label span:before { content:''; position:absolute; top:0; left:0; width:4.618vw; height:4.36vw; border:2px solid #FFFFFF7D; background-color:rgb(255,255,255,0.49); border-radius:5px; box-sizing:border-box; } .eventInfo .popupCon > label input:checked + span:before { background-image:url('/mobile/img/202003170001/new_gate_checked.jpg'); background-size:auto 100%; border:0; } .eventInfo .btnBoxWrap { position:absolute; top:-12.5%; width:100%; padding:0 5.56%; box-sizing:border-box; z-index:99; overflow:hidden; } .eventInfo .btnBoxWrap > a { float:left; line-height:3.5; text-align:center; display:block; } .eventInfo .btnBoxWrap > a#close_today { width:26vw; height:7vw; background:rgba(251, 251, 251, 0.73); font-size:3vw; border-radius:18px; letter-spacing:-0.82px; font-weight:normal; line-height:2.2; color:#000; } .eventInfo .btnBoxWrap > a#close { float:right; width:20px; height:20px; background:url('/mobile/img/202003170001/new_gate_btnClosePop.png') no-repeat; background-size:contain; margin-top:2px; } .eventInfo .btnBoxWrap > a#share { float:right; width:21px; height:20px; background:url('/mobile/img/202003170001/new_gate_btnSharePop.png') no-repeat; background-size:contain; margin-right:15px; } .eventInfo .applying { position:absolute; left:50%; transform:translateX(-50%); bottom:5%; width:calc(100% - 12%); height:11vw; background:#fff; border-radius:20px; } .eventInfo .applying > a { display:block; text-align:center; line-height:2.3; font-size:4.44vw; color:#472600; font-weight:bold; letter-spacing:-0.7px; } .eventInfo .controls { position:absolute; top:16px; left:20px; z-index:99; } .eventInfo .controls a { display:inline-block; width:26px; height:26px; font-size:0; background-size:100% 100%; vertical-align:top; } .eventInfo .controls .bx-prev { left:20px; background-image:url('/mobile/img/202003170001/new_gate_btnLeftPop.png'); } .eventInfo .controls .bx-next { right:20px; background-image:url('/mobile/img/202003170001/new_gate_btnRightPop.png'); } .eventInfo .controls #counter { display:inline-block; color:#fff; font-size:15px; padding:0 19px; vertical-align:middle; } .eventInfo a#share { position:absolute; top:19px; right:18px; width:21px; height:20px; background:url('/mobile/img/202003170001/new_gate_btnSharePop.png') no-repeat; background-size:contain; z-index:99; } #popupEventInfo, #popupEventInfo2, #popupEventInfo3 { top:auto; bottom:0; left:0; border-radius:20px 20px 0 0; overflow:visible; width:100%; height:102.78vw; display:block; } #popupEventInfo2, #popupEventInfo3 { display:none; } #popupEventInfo .bx-viewport { border-radius:20px 20px 0 0; transform:translateZ(0); will-change:transform; } #popupEventInfo .slider { height:102.78vw; border-radius:20px 20px 0 0; overflow:hidden; } #popupShare { position:absolute; width:100%; max-width:100px; max-height:125px; overflow:visible; top:21px; left:auto; right:22px; } #popupShare .cont { border-radius:6px; } #popupShare ul { padding:8px 12px; } #popupShare ul li { position:relative; color:#000; line-height:36px; letter-spacing:-0.65px; padding-left:22px; } #popupShare ul li::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:15px; height:14px; background:url('/mobile/img/202003170001/new_gate_icoShare.png') no-repeat; background-size:45px auto; } #popupShare ul .kakaotalk::before { background-position:0 top; } #popupShare ul .url::before { background-position:50% top; } #popupShare ul .twitter::before { background-position:100% top; } #popupShare .closePop { position:absolute; top:-7px; right:-8px; width:22px; height:22px; background:url('/mobile/img/202003170001/new_gate_btnCloseSns.png') no-repeat; background-size:contain; font-size:0; } @media (min-width:560px) { .eventInfo .popupCon > label { margin-top:270px; } .eventInfo .popupCon > label span { font-size:13px; padding-left:26px; } .eventInfo .popupCon > label span:before { width:18px; height:17px; } .eventInfo .btnBoxWrap > a#close_today { width:96px; height:26px; font-size:11px; } .eventInfo .applying { height:40px; } .eventInfo .applying > a { font-size:16px; } #popupEventInfo, #popupEventInfo2, #popupEventInfo3 { width:360px; height:370px; left:50%; transform:translateX(-50%); } #popupEventInfo .bx-wrapper, #popupEventInfo .bx-viewport, #popupEventInfo .slider { height:100%; } } /* common ---------------------------------------------------------------------*/ .bodyStop { overflow:hidden; } .wSpaceLine { white-space:pre-line; } .menuMask { position:fixed; z-index:90; top:0; left:0; right:0; bottom:0; background:#000; opacity:.3; } .layerMask { position:fixed; z-index:900; top:0; left:0; right:0; bottom:0; background:#000; opacity:.75; } /* 하단고정 버튼 */ .btnFix { position:fixed; z-index:51; left:0; right:0; bottom:0; width:100%; overflow:hidden; } .btnFix:after { content:''; display:block; clear:both; } .btnFix a, .btnFix button { float:left; width:50%; height:50px; background:#fe5730; font-size:14px; line-height:50px; color:#fff; text-align:center; display:block; } .btnFix a:first-child { background:#dedfe2; color:#000; } .btnFix .list { background:#566277 !important; color:#fff !important; } .btnFix .cart { background:#edeff2 !important; color:#000; } .btnFix .price { width:100%; background:#fe5730 !important; color:#fff !important; font-size:18px; } .btnFix .price strong { font-family:'Roboto'; font-size:21px; font-weight:500; letter-spacing:0; } .btnFix .elRes { width:100%; background:#fe5730 !important; color:#fff !important; } .btnFix .cbRes { width:100%; background:#1b9bf0 !important; color:#fff !important; } .btnFix .cbNext { background:#1b9bf0; } .btnFix .mdRes { width:100%; background:#F33636 !important; color:#fff !important; } .btnFix .mdRes.soldout {background:#D4D6D8 !important; } .btnFix .ymRes { width:100%; background:#9855cd !important; color:#fff !important; display:block !important; } .btnFix .ymNext { background:#9855cd; } /* 신규 스피드웨이 추가 */ .btnFix .speedRes { width:100%; background:#554fca !important; color:#fff !important; } .btnFix .speedNext { background:#554fca; } .btnFix .list + .elRes, .btnFix .list + .cbRes, .btnFix .list + .speedRes, .btnFix .cart + .elRes, .btnFix .cart + .cbRes, .btnFix .cart + .speedRes{ width:50% !important; } .btnFix a + .ymRes { width:50%; } /*paging */ .paging { border-top:solid 1px #e9e9e9; padding:25px 0 60px 0; font-size:0; line-height:0; text-align:center; } .paging a, .paging span { height:24px; padding:0 14px; font-family:'Roboto'; font-size:14px; line-height:24px; color:#666; text-align:center; vertical-align:middle; display:inline-block; } .paging .btn { width:24px; height:24px; background-color:#fff; background-image:url('/mobile/img/202003170001/btn_paging_list.png'); background-repeat:no-repeat; background-size:auto 10px; border:solid 1px #e9e9e9; margin:0; padding:0; font-size:0; line-height:0; text-indent:-9999px; overflow:hidden; } .paging .btn.off { border-color:#a5a5a5; opacity:.25; } .paging .first { background-position:6px center; border-right:0; } .paging .last { background-position:-67px center; border-left:0; } .paging .prev { background-position:-18px center; margin-right:10px; } .paging .next { background-position:-43px center; margin-left:10px; } .paging .here { font-weight:500; color:#000; } /* 달력 */ .dateCalBox { position:relative; } .dateCalBox .ui-datepicker { position:relative; z-index:1; background:#fff; border-radius:30px 30px 15px 15px; padding:0 17px 25px 17px; letter-spacing:0; } .dateCalBox .ui-datepicker table { width:100%; } .dateCalBox .ui-datepicker table th { padding-bottom:4px; font-weight:400; } .dateCalBox .ui-datepicker table td { font-family:'Roboto'; font-size:14px; color:#000; text-align:center; } .dateCalBox .ui-datepicker table td a { position:relative; z-index:1; padding:11.5px 0; display:block; } .dateCalBox .ui-datepicker table td.ui-state-disabled { color:#c9c9c9; } .dateCalBox .ui-datepicker-title { font-family:'Roboto'; } .dateCalBox .ui-datepicker-year { margin-left:1px; display:inline-block; } .dateCalBox .ui-datepicker-month { letter-spacing:0.5px; } .dateCalBox .ui-datepicker-month i { position:absolute; top:18px; left:22px; font-size:40px; line-height:45px; letter-spacing:-1px; display:block; } .dateCalBox .ui-datepicker-header { height:71px; background:#aaa; border-radius:15px 15px 0 0; margin:0 -17px 32px -17px; padding:45px 27px 0 0; color:#fff; text-align:right; box-sizing:border-box; } .dateCalBox .ui-datepicker-prev, .dateCalBox .ui-datepicker-next { position:absolute; z-index:10; top:190px; width:25px; height:33px; background-image:url('/mobile/img/202003170001/mark_arrow_cal.png?ver=20210615'); background-repeat:no-repeat; background-size:85px auto; font-size:0; line-height:0; text-indent:-9999px; display:block; overflow:hidden; } .dateCalBox .ui-datepicker-prev { left:-13px; background-position:left top; } .dateCalBox .ui-datepicker-next { right:-13px; background-position:right top; } .dateCalBox .ui-state-default { padding:11.5px 0; display:block; } .dateCalBox .ui-state-active { color:#fff !important; } .dateCalBox .ui-state-active:before { content:''; position:absolute; z-index:-1; top:50%; left:50%; width:42px; height:42px; background:#000; border-radius:100px; margin:-21px 0 0 -21px; display:block; clear:both; } .dateCalBox .choice a { color:#fff; } .dateCalBox .choice a:before { content:''; position:absolute; z-index:-1; top:50%; left:50%; width:42px; height:42px; background:#ee2929; border-radius:100px; margin:-21px 0 0 -21px; display:block; clear:both; } .dateCalBox .choice .ui-state-active:before { background:#ee2929 !important; } .dateCalBox:before, .dateCalBox .ui-datepicker:after, .dateCalBox .ui-datepicker:before { content:''; position:absolute; z-index:1; height:40px; background:url('/mobile/img/202003170001/bg_calback.png'); background-size:auto 80px; display:block; } .dateCalBox .ui-datepicker:after, .dateCalBox .ui-datepicker:before { bottom:-40px; width:50px; background-repeat:no-repeat; } .dateCalBox .ui-datepicker:after { right:0; background-position:right bottom; } .dateCalBox .ui-datepicker:before { left:0; background-position:left bottom; } .dateCalBox:before { left:50px; right:50px; bottom:-40px; background-position:center top; background-repeat:repeat-x; } .dateCalBox.el .ui-datepicker-header, .dateCalBox.el .ui-state-active:before { background:#fe5730; } .dateCalBox.el .ui-datepicker table td.able a { color:#fe5730 } .dateCalBox.cb .ui-datepicker-header, .dateCalBox.cb .ui-state-active:before { background:#1b9bf0; } .dateCalBox.cb .ui-datepicker table td.able a { color:#1b9bf0 } /* 신규 스피드웨이 추가 */ .dateCalBox.speed .ui-datepicker-header, .dateCalBox.speed .ui-state-active:before {background:#554fca; } .dateCalBox.speed .ui-datepicker table td.able a { color:#554fca } .dateCalBox .ui-state-active.off:before { background:#7e8081 !important; } /* jquery-ui calendar */ #ui-datepicker-div { position:fixed; z-index:990; top:50%; left:10%; width:80%; background:#fff; border-radius:30px 30px 15px 15px; margin-top:-180px; padding:0 17px 25px 17px; letter-spacing:0; display:none; opacity:1 !important; box-sizing:border-box; } #ui-datepicker-div table { width:100%; } #ui-datepicker-div table th { padding-bottom:4px; font-weight:400; } #ui-datepicker-div table td { font-family:'Roboto'; font-size:14px; color:#000; text-align:center; } #ui-datepicker-div table td a { position:relative; z-index:1; padding:11.5px 0; display:block; } #ui-datepicker-div table td.ui-state-disabled { color:#c9c9c9; } #ui-datepicker-div .ui-datepicker-title { font-family:'Roboto'; } #ui-datepicker-div .ui-datepicker-year { margin-left:1px; display:inline-block; } #ui-datepicker-div .ui-datepicker-month { letter-spacing:0.5px; } #ui-datepicker-div .ui-datepicker-month i { position:absolute; top:18px; left:22px; font-size:40px; line-height:45px; letter-spacing:-1px; display:block; } #ui-datepicker-div .ui-datepicker-header { height:71px; background:#aaa; border-radius:15px 15px 0 0; margin:0 -17px 32px -17px; padding:45px 27px 0 0; color:#fff; text-align:right; box-sizing:border-box; } #ui-datepicker-div .ui-datepicker-prev, #ui-datepicker-div .ui-datepicker-next { position:absolute; z-index:10; top:190px; width:25px; height:33px; background-image:url('/mobile/img/202003170001/mark_arrow_cal.png?ver=20210615'); background-repeat:no-repeat; background-size:85px auto; font-size:0; line-height:0; text-indent:-9999px; display:block; overflow:hidden; } #ui-datepicker-div .ui-datepicker-prev { left:-13px; background-position:left top; } #ui-datepicker-div .ui-datepicker-next { right:-13px; background-position:right top; } #ui-datepicker-div .ui-state-default { padding:11.5px 0; display:block; } #ui-datepicker-div .ui-state-active { color:#fff; } #ui-datepicker-div .ui-state-active:before { content:''; position:absolute; z-index:-1; top:50%; left:50%; width:42px; height:42px; background:#000; border-radius:100px; margin:-21px 0 0 -21px; display:block; clear:both; } #ui-datepicker-div .ui-datepicker-header, #ui-datepicker-div .ui-state-active:before { background:#fe5730; } /* main ------------------------------------------------------------------------*/ .mainVisual { width:100%; overflow:hidden; font-size:0; line-height:0; } .mainVisual img { width:100%; } .mainRecom { margin:30px 0 40px 0; overflow:hidden; } .mainRecom h3 { font-size:20px; font-weight:500; line-height:26px; color:#000; text-align:center; } .mainRecom h3 small { margin-bottom:-3px; font-size:14px; font-weight:200; display:none; } .mainRecom .word { margin:17px 25px 15px 25px; text-align:center; } /* 2020-08-03 수정 */ .mainRecom .word a { height:26px; margin-top:5px; margin-right:6px; margin-left:6px; line-height:25px; color:#888; display:inline-block; } /* 2020-08-03 수정 */ .mainRecom .word a.choice { background:#000; border-radius:100px; padding:0 15px; color:#fff; } .mainRecom .wordList { position:relative; width:auto; border-radius:7px; padding-left:25px; overflow:hidden; } .mainRecom .wordList ul { height:auto; padding-right:25px; text-align:center; } .mainRecom .wordList ul:after { content:''; display:block; clear:both; } .mainRecom .wordList li { position:relative; width:auto; max-width:64.9vw; height:100%; margin:0 auto; text-align:left; display:block; overflow:hidden; } .mainRecom .wordList li a { height:100%; display:block; } .mainRecom .wordList .txt { padding:22px 10px 0 10px; font-size:13px; word-wrap:break-word; word-break:keep-all; display:block; } .mainRecom .wordList .txt i { font-weight:300; color:#666; font-size:14px; } .mainRecom .wordList .txt strong { margin:15px 0 9px 0; font-size:20px; font-weight:500; color:#000 !important; line-height:25px; display:block; } .mainRecom .wordList .txt strong b { font-weight:500; } .mainRecom .wordList .thumb { position:relative; z-index:1; width:100%; height:61.115vw; font-size:0; line-height:0; display:block; border-radius:7px; overflow:hidden; border:1px solid #e9e9e9; box-sizing:border-box} .mainRecom .wordList .thumb img { position:relative; right:0; bottom:0; height:100%; } .mainRecom .wordList .bx-pager { width:72.4%; height:6px; margin-top:40px; padding-right:25px; font-size:0; line-height:0; text-align:center; box-sizing:border-box; } .mainRecom .wordList .bx-pager-item { padding:0 5px; display:inline-block; } .mainRecom .wordList .bx-pager-item a { width:6px; height:6px; background:#d6d6d6; border-radius:10px; font-size:0; line-height:0; text-indent:-9999px; display:block; overflow:hidden; } .mainRecom .wordList .bx-pager-item a.active { background:#000; } .mainRecom .wordList .bx-wrapper { min-width:138%; } .mainRecom .wordList .bx-viewport ul { padding:0; text-align:left; } .mainRecom .wordList .bx-viewport li { float:left; margin-right:15px; } .mainRecom.el .txt { color:#fe5730 !important; } .mainRecom.cb .txt { color:#1b9bf0 !important; } .mainRecom.speed .txt { color:#554fca !important; } .mainRecom.md .txt { color:#fe5730 !important; } .mainList { background:#f2f6f9; padding:40px 25px; } .mainList h3 { font-size:21px; font-weight:500; line-height:25px; color:#000; } .mainList ul { background:#fff; border-radius:7px; margin:-19px 15px 0 15px; padding:18px 7px 34px 7px; overflow:hidden; } .mainList ul li { position:relative; margin-top:21px; padding-left:73px; word-wrap:break-word; word-break:keep-all; text-align:left; } .mainList ul li.nodata { padding-left:0px; text-align:center; } .mainList ul li.soldout strong { color:#aeaeae; } .mainList ul li.soldout .thumb:before { content:''; position:absolute;z-index:2; top:0; left:0;right:0; bottom:0; background:#000;opacity:.6; } .mainList ul li.soldout .thumb:after { content:'\d488\c808'; position:absolute;z-index:3; top:50%; left:0;right:0; transform:translate(0,-50%); font-size:13px;color:#fff; text-align:center; } .mainList ul li a { min-height:67px; display:table; } .mainList .tit { font-weight:300; color:#666; vertical-align:middle; display:table-cell; } .mainList .tit strong { margin-bottom:8px; font-size:16px; font-weight:500; line-height:20px; letter-spacing:-1px; color:#000; display:block; } .mainList .tit strong .ico_ilmo { top:1px; width:36px; height:15px; margin-left:6px; } .mainList .tit .tag img {height:13px; margin-right:4px} .mainList .tit .price em {font-family:'Roboto'; } .mainList .tit .price strong { display:inline-block; margin-right:4px; } .mainList .tit .price strong em {font-weight:500; } .mainList .tit .price del { color:#AEAEAE; font-size:14px; } .mainList .intro { min-height:62px; padding:10px 15px 34px 15px; font-size:12px; font-weight:300; line-height:15px; letter-spacing:0; color:#444; word-wrap:break-word; word-break:keep-all; box-sizing:border-box; } .mainList .more { height:39px; border:solid 2px #000; border-radius:100px; padding:0 20px; line-height:39px; display:inline-block; } .mainList .thumb { position:absolute; top:8px; left:0; width:54px; height:54px; background:#ccc; border-radius:100px; font-size:0; line-height:0; text-align:center; overflow:hidden; } .mainList .thumb img { position:relative; top:0; left:50%; height:100%; margin-left:-100%; } /* Q-PASS 추가 */ .mainList .listBox.elQpass {font-size:0; } .mainList .listBox.elQpass:before {background-color:#fff; } .mainList .listBox.elQpass:after { content:'';width:100%; height:20px; background-image:url('../../resources/img/202003170001/bg_qpass.png'); background-repeat:no-repeat; background-size:100% 20px; position:absolute; bottom:0; left:0;right:0;z-index:1; } .mainList .listBox.elQpass p { position:relative;display:inline-block; font-size:18px; text-align:left; line-height:1.27; } .mainList .listBox.elQpass p:after { content:''; position:absolute; top:0;right:-16px;display:block;width:1px; height:100%; background-color:#e2e4e6; } .mainList .listBox.elQpass .ticket { display:inline-block; font-size:0; margin-left:40px; } .mainList .listBox.elQpass .ticket a { display:inline-block;width:60px; } .mainList .listBox.elQpass .ticket a:first-child { margin-right:25px; } .mainList .listBox.elQpass .ticket a img { display:block;width:50px; margin:0 auto 7px; } .mainList .listBox.elQpass .ticket a span {font-size:14px; } .mainList .listBox.elQpass {font-size:0; } .mainList .listBox.elQpass:before { background-color:#fff; } .mainList .listBox.elQpass:after { content:''; width:100%; height:20px; background-image:url('/mobile/img/202003170001/qpass/bg_qpass.png'); background-repeat:no-repeat; background-size:100% 20px; position:absolute; bottom:0; left:0; right:0; z-index:1; } .mainList .listBox.elQpass p { position:relative;display:inline-block; font-size:18px; text-align:left; line-height:1.27; } .mainList .listBox.elQpass p:after { content:''; position:absolute; top:0;right:-16px;display:block;width:1px; height:100%; background-color:#e2e4e6; } .mainList .listBox.elQpass .ticket { display:inline-block; font-size:0; margin-left:40px; } .mainList .listBox.elQpass .ticket a { display:inline-block;width:60px; } .mainList .listBox.elQpass .ticket a:first-child { margin-right:25px; } .mainList .listBox.elQpass .ticket a img { display:block;width:50px; margin:0 auto 7px; } .mainList .listBox.elQpass .ticket a span {font-size:14px; } .mainList .listBox { position:relative; z-index:1; background:#fff; border-radius:15px; margin-top:40px; padding:25px 0 26px 0; text-align:center; overflow:hidden; box-shadow:5px 10px 20px rgba(0,0,0,.15); } .mainList .listBox > * { position:relative; z-index:10; } .mainList .listBox:before { content:''; position:absolute; z-index:1; top:0; left:0; right:0; height:130px; background:#ccc; display:block; clear:both; } .mainList .listBox:first-child { margin-top:0; } .mainList .elList1:before, .mainList .elList1 .intro { background:#fbe146; } .mainList .elList2:before, .mainList .elList2 .intro { background:#a2dc46; } .mainList .elList3:before, .mainList .elList3 .intro { background:#e390ff; } .mainList .elList4:before, .mainList .elList4 .intro { background:#fbe146; } .mainList .elList5:before, .mainList .elList5 .intro { background:#a2dc46; } .mainList .elList6:before, .mainList .elList6 .intro { background:#e390ff; } .mainList .elList7:before, .mainList .elList7 .intro { background:#fbe146; } .mainList .elList8:before, .mainList .elList8 .intro { background:#a2dc46; } .mainList .elList9:before, .mainList .elList9 .intro { background:#e390ff; } .mainList .elList10:before, .mainList .elList10 .intro { background:#fbe146; } .mainList .elList11:before, .mainList .elList11 .intro { background:#a2dc46; } .mainList .elList12:before, .mainList .elList12 .intro { background:#e390ff; } .mainList .cbList1:before, .mainList .cbList1 .intro { background:#d1ec71; } .mainList .cbList2:before, .mainList .cbList2 .intro { background:#4fb7fa; } .mainList .cbList3:before, .mainList .cbList3 .intro { background:#97a1ff; } .mainList .cbList4:before, .mainList .cbList4 .intro { background:#d1ec71; } .mainList .cbList5:before, .mainList .cbList5 .intro { background:#4fb7fa; } .mainList .cbList6:before, .mainList .cbList6 .intro { background:#97a1ff; } .mainList .cbList7:before, .mainList .cbList7 .intro { background:#d1ec71; } .mainList .cbList8:before, .mainList .cbList8 .intro { background:#4fb7fa; } .mainList .cbList9:before, .mainList .cbList9 .intro { background:#97a1ff; } .mainList .cbList10:before, .mainList .cbList10 .intro { background:#d1ec71; } .mainList .cbList11:before, .mainList .cbList11 .intro { background:#4fb7fa; } .mainList .cbList12:before, .mainList .cbList12 .intro { background:#97a1ff; } /* 신규 스피드웨이 추가 */ .mainList .speedList1:before, .mainList .speedList1 .intro { background:#554fca; } .mainList .speedList2:before, .mainList .speedList2 .intro { background:#8293ac; } .mainList .speedList3:before, .mainList .speedList3 .intro { background:#8890cd; } .mainList .speedList1 .intro { min-height:auto; color:#fff; } .mainList .speedList2 .intro { min-height:auto; color:#fff; } .mainList .speedList3 .intro { min-height:auto; color:#fff; } .mainList .speedList1 h3 { color:#fff; } .mainList .speedList2 h3 { color:#fff; } .mainList .speedList3 h3 { color:#fff; } /* 연간이용권 시즌/기간권 */ .mainList .ymList1:before, .mainList .ymList1 .intro { background:#fbe146; } .mainList .ymList2:before, .mainList .ymList2 .intro { background:#59dfe9; } .mainList .ymList3:before, .mainList .ymList3 .intro { background:#e390ff; } .mainList .ymList4:before, .mainList .ymList4 .intro { background:#d1ec71; } /* md shop */ .mainList .mdList1:before, .mainList .mdList1 .intro { background:#fbe146; } .mainList .mdList2:before, .mainList .mdList2 .intro { background:#e390ff; } .mainList .mdList3:before, .mainList .mdList3 .intro { background:#95a1f8; } .mainList .mdList4:before, .mainList .mdList4 .intro { background:#4fbeef; } .mainList .mdList5:before, .mainList .mdList5 .intro { background:#f1b45f; } /* sub -------------------------------------------------------------------------*/ /* 방문일 */ .dateChoice { padding:19px 25px 75px 25px; } .dateChoice .intro { max-width:450px; margin:0 auto; padding-left:48px; font-size:23px; font-weight:300; line-height:30px; color:#000; box-sizing:border-box; } .dateChoice .intro span { display:block; } .dateChoice .intro span i { display:inline-block; } /* 2020-07-24 버튼 추가 */ .dateChoice .intro .el_btnParkCngstn { display:inline-block; width:73px; height:25px; line-height:21px; font-size:11px; color:#fe5730; border:solid 1px #fe5730; border-radius:30px; border-width:2px; box-sizing:border-box; background-color:#ffebe6; text-align:center;vertical-align:middle; } .dateChoice .intro .cb_btnParkCngstn { display:inline-block; width:73px; height:25px; line-height:21px; font-size:11px; color:#1b9bf0; border:solid 1px #1b9bf0; border-radius:30px; border-width:2px; box-sizing:border-box; background-color:#e4f3fd; text-align:center;vertical-align:middle; } /* 2020-07-24 버튼 추가 */ .dateChoice .oprTime { color:#000; text-align:center; } .dateChoice .oprTime b { margin-left:3px; font-family:'Roboto'; font-size:14px; font-weight:500; display:inline-block; } .dateChoice .oprTime:before { content:''; width:12px; height:14px; background-image:url('/mobile/img/202003170001/icon_time.png'); background-repeat:no-repeat; background-size:auto 100%; margin:-2px 5px 0 0; vertical-align:middle; display:inline-block; } .dateChoice .dateCalBox { max-width:450px; border-radius:15px; margin:25px auto 40px auto; box-shadow:3px 5px 20px rgba(0,0,0,.15); } .dateChoice .dateCalBox.el + .oprTime:before { background-position:left center; } .dateChoice .dateCalBox.cb + .oprTime { margin:0 -25px 0 -25px; } .dateChoice .dateCalBox.cb + .oprTime:before { background-position:right center; } /* 방문일-상품목록 */ .visitDate { padding:44px 25px 0 25px; text-align:center; } .visitDate .btnBox { margin:4px 10px 0 24px; vertical-align:top; display:inline-block; overflow:hidden; } .visitDate .btnBox button { width:21px; height:21px; background-color:#fff; background-image:url('/mobile/img/202003170001/icon_calendar.png'); background-repeat:no-repeat; background-size:auto 21px; font-size:0; line-height:0; text-indent:-9999px; overflow:hidden; } .visitDate .uncheck { width:62%; max-width:375px; padding-bottom:41px; font-size:28px; font-weight:200; line-height:35px; color:#000; word-wrap:break-word; word-break:keep-all; text-align:left; vertical-align:top; display:inline-block; } .visitDate .checkDay { margin-top:-2px; padding-bottom:31px; font-family:'Roboto'; font-size:40px; line-height:45px; color:#000; letter-spacing:-2px; vertical-align:top; display:inline-block; } .visitDate .checkDay i { font-family:'Noto Sans KR'; font-size:38px; font-weight:500; } .visitDate .checkDay + .btnBox { margin:7px 5px 0 18px; } .visitDate .oprTime { position:relative; z-index:5; height:40px; background:#aaa; margin:0 -25px -8px -25px; padding:0 25px; line-height:40px; color:#fff; text-align:center; overflow:hidden; } .visitDate .oprTime b { margin-left:3px; font-family:'Roboto'; font-size:14px; font-weight:500; display:inline-block; } .visitDate .oprTime a { height:18px; border:solid 1px #fff; border-radius:3px; margin:-3px 0 0 27px; padding:0 6px; font-size:11px; line-height:17px; color:#fff; vertical-align:middle; display:inline-block; } /* 에버랜드 */ .visitDate.el .oprTime { background:#fe5730; } .visitDate.el .oprTime a { border-color:#ff9279; } .visitDate.el .btnBox button { background-position:0 bottom; } /* 캐리비안 베이 */ .visitDate.cb .oprTime { background:#1b9bf0; padding:0; letter-spacing:-0.3px; } .visitDate.cb .oprTime a { border-color:#65b5f0; margin-left:7px; } .visitDate.cb .btnBox button { background-position:-25px bottom; } /* 스피드웨이 */ .visitDate.speed .oprTime {background-color:#554fca} .visitDate.speed .btnBox button {background-image:url('/mobile/img/202003170001/icon_prodlist_sw.png'); background-position:0 -15px; background-size:auto 36px; } /* 상품목록 */ .prodList { padding:0 25px 0 25px; overflow:hidden; } .prodList h3 { border-top:solid 8px #f2f3f5; margin:0 -25px; padding:60px 15px 0 15px; font-size:14px; font-weight:500; color:#000; text-align:center; box-sizing:border-box; } .prodList h3:before { content:''; width:50px; background-image:url('/mobile/img/202003170001/icon_prodlist.png'); background-repeat:no-repeat; background-size:auto 85px; margin:0 auto 12px auto; display:block; } .prodList ul { margin:12px 0 35px 0; } .prodList ul li { position:relative; border-top:solid 1px #dfdfdf; padding:23px 17px 21px 7px; font-weight:300; line-height:19px; word-wrap:break-word; word-break:keep-all; } .prodList ul li:first-child { border-top:0; } .prodList .tit { font-size:16px; font-weight:500; line-height:21px; letter-spacing:-1px; } .prodList .tit:after { content:''; position:absolute; top:24px; right:0; width:15px; height:16px; background:url('/mobile/img/202003170001/mark_list.png') right center no-repeat; background-size:auto 10px; display:block; } .prodList .intro { margin-top:8px; margin-right:-10px; line-height:22px; display:block; } .prodList .nodata { padding:37px 15px 20px 15px; font-size:14px; color:#777; text-align:center; } .prodList .tip { position:relative; width:16px; height:16px; background:url('/mobile/img/202003170001/mark_tip.png') 7px center no-repeat #fff; background-size:auto 11px; border:solid 2px #e1e1e1; border-radius:100px; margin:-5px 0 0 3px; font-size:0; line-height:0; vertical-align:middle; display:inline-block; } .prodList .tip > span { position:absolute; z-index:10; top:25px; left:-60px; width:63vw; min-width:220px; max-width:270px; background:#fff; border:solid 1px #b6b6b6; border-radius:7px; padding:5px 25px 21px 25px; font-size:10px; line-height:19px; color:#444; white-space:nowrap; box-sizing:border-box; display:none; } .prodList .tip > span b { margin:17px 0 4px 0; font-size:12px; color:#000; display:block; } .prodList .tip > span:before { content:''; position:absolute; top:-14px; left:60px; width:17px; height:14px; background:url('/mobile/img/202003170001/mark_tooltip.png') left bottom no-repeat; background-size:auto 100%; display:block; } .prodList .tip.active > span { display:block; } /* 버튼 공통 */ .btn_group { text-align:center; margin:20px 0 50px; } .btn_group .btns { margin-right:10px; } .btn_group .btns:last-child { margin-right:0; } .btns { display:inline-block; width:100px; padding:9px 10px; font-size:14px; letter-spacing:-0.7px; font-weight:400; border-radius:22px; } .btns-outline-white { background:#fff; border:1px solid #D5D5D5; color:#666; } .btns-outline-purple { background:#fff; border:1px solid #9855CC; color:#9855CC; } /* 에버랜드 */ .prodList.el h3 { color:#fe5730; } .prodList.el h3:before { height:36px; background-position:-50px top; } .prodList.el .sort1:before { height:36px; background-position:0 top; } .prodList.el .sort2:before { height:36px; background-position:-50px top; } .prodList.el .sort3:before { height:32px; background-position:-100px top; } .prodList.el .sort4:before { height:38px; background-position:-150px top; } .prodList.el .sort5:before { height:33px; background-position:-200px top; } .prodList.el .sort6:before { height:29px; background-position:-250px top; } .prodList.el .sort7:before { height:30px; background-position:-300px top; } .prodList.el .sort8:before { height:28px; background-position:-350px top; } .prodList.el .sort9:before { height:32px; background-position:-400px top; } .prodList.el .sort10:before { height:39px; background-position:-450px top; } .prodList.el .sort11:before { height:36px; background-position:-500px top; } .prodList.el .sort12:before { height:27px; background-position:-550px top; } .prodList.el .sort13:before { height:30px; background-position:-600px top; } .prodList.el .sort14:before { height:27px; background-position:-650px top; } /* 캐리비안 베이 */ .prodList.cb h3 { color:#1b9bf0; } .prodList.cb h3:before { height:36px; background-position:-50px bottom; } .prodList.cb .sort1:before { height:35px; background-position:0 bottom; } .prodList.cb .sort2:before { height:36px; background-position:-50px bottom; } .prodList.cb .sort3:before { height:32px; background-position:-100px bottom; } .prodList.cb .sort4:before { height:38px; background-position:-150px bottom; } .prodList.cb .sort5:before { height:35px; background-position:-200px bottom; } .prodList.cb .sort6:before { height:29px; background-position:-250px bottom; } .prodList.cb .sort7:before { height:30px; background-position:-300px bottom; } .prodList.cb .sort8:before { height:27px; background-position:-350px bottom; } .prodList.cb .sort9:before { height:33px; background-position:-400px bottom; } .prodList.cb .sort10:before { height:39px; background-position:-450px bottom; } .prodList.cb .sort11:before { height:36px; background-position:-500px bottom; } .prodList.cb .sort12:before { height:30px; background-position:-550px bottom; } .prodList.cb .sort13:before { height:34px; background-position:-600px bottom; } /* 스피드웨이 */ .prodList.speed h3 { color:#554fca; } .prodList.speed h3:before { height:36px; background-image:url('/mobile/img/202003170001/icon_prodlist_sw.png'); background-size:auto 36px; } .prodList.speed .sort1:before { background-position:-21px bottom; } .prodList.speed .sort2:before { background-position:-71px 0; } /* 상세 */ .viewVisual { font-size:0; line-height:0; } .viewVisual img { width:100%; } .viewVisual .bx-pager { margin-top:20px; text-align:center; } .viewVisual .bx-pager-item { margin:0 5px; display:inline-block; } .viewVisual .bx-pager-item a { width:6px; height:6px; background:#d6d6d6; border-radius:10px; display:block; } .viewVisual .bx-pager-item a.active { background:#000; } .viewInfo { padding:13px 25px 50px 25px; line-height:22px; word-wrap:break-word; word-break:keep-all; } .viewInfo h3 { margin-top:13px; font-size:21px; line-height:27px; font-weight:500; color:#000; display:block; } .viewInfo h4 { margin-top:31px; font-size:16px; font-weight:500; color:#000; } .viewInfo h4 > i { color:#fe5730; } .viewInfo h4 > i.colorCB { color:#1b9bf0; } .viewInfo p { position:relative; margin-top:7px; padding-left:15px; } .viewInfo p:before { content:'※'; position:absolute; top:0; left:0; } .viewInfo ul { margin-top:12px; } .viewInfo ul li { position:relative; margin-top:5px; padding-left:8px; font-weight:300; color:#222; } .viewInfo ul li:before { content:''; position:absolute; top:9px; left:0; width:4px; height:1px; background:#555; display:block; } .viewInfo .intro { border-bottom:solid 1px #dfdfdf; margin-bottom:25px; padding-bottom:17px; font-size:21px; font-weight:300; line-height:26px; letter-spacing:-1px; color:#000; display:block; } .viewInfo .txt { font-size:14px; } .viewInfo .more { width:26.5vw; min-width:96px; height:39px; border:solid 2px #000; border-radius:100px; margin:46px auto 0 auto; line-height:39px; text-align:center; display:block; } .viewInfo .tag { display:block; margin:17px 0 -8px; line-height:0; } .viewInfo .tag img { height:13px; margin-right:4px; } .viewInfo .contBox { margin-top:20px; font-size:13px; font-weight:300; line-height:23px; color:#222; } .viewInfo .contBox .foodInfo h4 { position:relative; padding-left:20px; font-size:15px;color:#222; font-weight:400; }/*모바일오더*/ .viewInfo .contBox .foodInfo h4:before { content:''; position:absolute; bottom:4px; left:0;width:14px; height:14px; background:url('/mobile/img/202003170001/icon_morder_time.png') center center no-repeat; background-size:cover;; } .viewInfo .contBox .foodInfo h4 b { font-size:24px; color:#FE5730; margin-left:3px; } .viewInfo .contBox .foodInfo h4 b.cb { color:#1b9bf0; } .viewInfo .contBox .foodInfo .notice { width:95%; margin-top:8px; font-size:12px; font-weight:300; color:#666666; line-height:20px; word-break:keep-all; } .viewInfo .contBox .foodInfo hr { height:1px; margin:28px 0; background-color:#666; } .viewInfo .contBox .foodInfo .exp { font-size:14px; font-weight:300; line-height:23px; color:#222; margin:0; padding:0; word-break:keep-all; } .viewInfo .contBox .foodInfo .exp:before { content:""; } .viewRelate { border-top:solid 1px #e3e3e3; padding:0 25px; word-wrap:break-word; word-break:keep-all; } .viewRelate h4 { height:60px; font-size:14px; font-weight:400; line-height:60px; color:#000; } .viewRelate dl { margin-top:0; line-height:19px; display:none; } .viewRelate dl dt { margin:22px 0 8px 0; font-size:14px; font-weight:500; color:#000; } .viewRelate dl dt:first-child { margin-top:4px; } .viewRelate dl dd { position:relative; margin-top:7px; font-weight:300; line-height:22px; } .viewRelate .notify { padding-left:15px; } .viewRelate .notify:before { content:'※'; position:absolute; top:0; left:0; } .viewRelate .mkDot { margin-top:5px; padding-left:7px; } .viewRelate .mkDot:before { content:''; position:absolute; top:8px; left:0; width:2.5px; height:2.5px; background:#666; border-radius:5px; display:block; overflow:hidden; } .viewRelate.open { background:#f7f9fa; border:0; padding:27px 25px 46px 25px; } .viewRelate.open h4 { font-size:16px; font-weight:500; } .viewRelate.open dl { display:block; } .viewRelate.open + .viewRelate { border-top:0; } .viewRelateBox { border-top:solid 8px #f7f9fa; } .viewRelateBox .viewRelate:first-child { border-top:0; } /* 결제옵션 */ .buyInfo { position:fixed; z-index:50; top:50px; left:0; right:0; bottom:0; display:none; opacity:0; } .buyInfo:before { content:''; position:fixed; z-index:1; top:0; left:0; right:0; bottom:0; background:#000; opacity:.7; display:block; } .buyInfo .btnClose { position:absolute; z-index:11; top:-47px; left:50%; width:43px; height:43px; background:url('/mobile/img/202003170001/btn_close_buy.png') center center no-repeat #000; background-size:100% auto; border-radius:100px; margin-left:-22px; font-size:0; line-height:0; text-indent:-9999px; display:block; overflow:hidden; } .buyInfo .amtBox { position:absolute; z-index:10; bottom:50px; left:0; right:0; height:72px; background:#fff; padding:28px 35px 7px 35px; font-size:17px; font-weight:500; line-height:21px; color:#000; overflow:hidden; box-sizing:border-box; } .buyInfo .amtBox span { position:absolute; left:35px; right:35px; bottom:10px; line-height:45px; text-align:right; display:block; } .buyInfo .amtBox strong { margin:-2px 4px 0 0; font-family:'Roboto'; font-size:30px; font-weight:400; letter-spacing:-1px; vertical-align:top; display:inline-block; } .buyInfo .amtBox:before { content:''; position:absolute; z-index:11; top:0; left:25px; right:25px; height:2px; background:#000; display:block; } .buyInfo .optBox { position:relative; z-index:2; height:100%; background:#fff; border-radius:15px 15px 0 0; padding:0 0 125px 0; overflow-x:auto; overflow-y:scroll; -webkit-overflow-scrolling:touch; box-sizing:border-box; scrollbar-track-color:transparent; scrollbar-face-color:#9da0a1; } .buyInfo .optBox:after, .buyInfo .optBox:before { content:''; position:fixed; z-index:50; left:0; right:0; height:35px; background:url('/mobile/img/202003170001/bg_buyinfo.png'); background-repeat:repeat-x; background-size:5px auto; display:none; overflow:hidden; } .buyInfo .optBox:after { bottom:122px; background-position:center bottom; display:block; } .buyInfo .optBox:before { top:50px; background-position:center top; border-radius:20px 20px 0 0; } .buyInfo .optBox::-webkit-scrollbar { width:4px; background-color:transparent; -webkit-appearance:none; } .buyInfo .optBox::-webkit-scrollbar:vertical { width:4px; background-color:transparent; } .buyInfo .optBox::-webkit-scrollbar-button { width:0; height:15px; } .buyInfo .optBox::-webkit-scrollbar-button:end:increment { height:122px; } .buyInfo .optBox::-webkit-scrollbar-track { background-color:transparent; } .buyInfo .optBox::-webkit-scrollbar-thumb { background-color:#9da0a1; border-radius:10px; opacity:.5; } .buyInfo .optBox.end:after { display:none; } .buyInfo .optBox.move:before { display:block; } .buyInfo .optBox .tit { border-bottom:solid 8px #f7f9fa; padding:22px 0 12px 0; font-size:12px; font-weight:300; color:#444; text-align:center; } .buyInfo .optBox .tit + .itemOpt { border-top:0; margin-top:15px; } .buyInfo .optBox .btnCal { height:60px; background:url('/mobile/img/202003170001/icon_calendar.png') -90px 17px no-repeat #fff; background-size:auto 21px; padding-left:22px; font-size:14px; line-height:60px; } .buyInfo .itemTit { height:60px; background:#fff; border-top:solid 1px #e9e9e9; margin:0 25px; padding:0 10px 0 10px; font-weight:300; line-height:60px; color:#666; } .buyInfo .itemOpt { position:relative; height:60px; background:#fff; border-top:solid 1px #e9e9e9; margin:0 25px; padding:0 10px 0 90px; line-height:60px; } .buyInfo .itemOpt dt { position:absolute; top:0; left:10px; font-weight:300; color:#666; } .buyInfo .itemOpt dd { height:60px; font-size:14px; font-weight:300; text-align:right; } .buyInfo .itemOpt dd em { min-width:45px; display:inline-block; } .buyInfo .itemOpt .tip { position:relative; z-index:10; width:15px; height:15px; background:url('/mobile/img/202003170001/mark_tip.png') 6px center no-repeat #fff; background-size:auto 11px; border:solid 2px #e1e1e1; border-radius:100px; margin:-2px 0 0 3px; font-size:0; line-height:0; vertical-align:middle; display:inline-block; } .buyInfo .itemOpt .tip > span { position:absolute; top:-35px; left:20px; width:56vw; min-width:175px; max-width:260px; min-height:85px; background:#fff; border:solid 1px #b6b6b6; border-radius:7px; padding:15px 15px 15px 16px; font-size:10px; line-height:19px; color:#444; word-wrap:break-word; word-break:keep-all; box-sizing:border-box; display:none; } .buyInfo .itemOpt .tip > span:before { content:''; position:absolute; top:35px; left:-14px; width:14px; height:17px; background:url('/mobile/img/202003170001/mark_tooltip.png') right center no-repeat; background-size:auto 100%; display:block; } .buyInfo .itemOpt .tip bdo { margin-top:5px; display:block; } .buyInfo .itemOpt .tip.active { z-index:11; } .buyInfo .itemOpt .tip.active:before { content:''; position:absolute; top:0; left:7px; width:14px; height:17px; background:url('/mobile/img/202003170001/mark_tooltip.png') right center no-repeat; background-size:auto 100%; display:block;z-index:1 } .buyInfo .itemOpt .tip.active > span { display:block; } .buyInfo .itemOpt .basic, .buyInfo .itemOpt .basic .btnCal { font-weight:300; color:#999; } .buyInfo .itemOpt .notify { color:#fe5730; } .buyInfo .itemOpt .choice, .buyInfo .itemOpt .choice .btnCal { font-weight:400; color:#000; } .buyInfo .itemOpt .cardChk { height:18px; border:solid 1px #d5d5d5; border-radius:100px; margin:0 5px 3px 0; padding:0 8px; font-size:10px; font-weight:300; color:#777; line-height:18px; vertical-align:middle; display:inline-block; overflow:hidden; } .buyInfo .itemOpt .widthBtn { width:5000px; line-height:17px; vertical-align:middle; display:table-cell; height:60px; } .buyInfo .itemOpt:first-child { border-top:0; } .buyInfo .itemDet { position:relative; z-index:2; background:#f7f9fa; margin-bottom:-1px; padding:35px; display:none; } .buyInfo .itemDet textarea { width:100%; min-width:100%; max-width:100%; border:solid 1px #e9e9e9; box-sizing:border-box; } .buyInfo .itemDet textarea::placeholder { font-weight:300; color:#999; } .buyInfo .itemDet textarea::-moz-placeholder { font-weight:300; color:#999; } .buyInfo .itemDet textarea::-ms-input-placeholder { font-weight:300; color:#999; } .buyInfo .itemDet textarea::-webkit-input-placeholder { font-weight:300; color:#999; } .buyInfo .itemDet .txtType { text-align:right; } .buyInfo .itemDet .txtType + .numType { margin-top:0; } .buyInfo .itemDet .note { position:relative; margin:16px 0 0 -10px; padding-left:8px; font-size:12px; font-weight:300; color:#777; word-wrap:break-word; word-break:keep-all; } .buyInfo .itemDet .note:before { content:'-'; position:absolute; top:0; left:0; display:block; } .buyInfo .itemDet.open { display:block; } .buyInfo .selType li { background:#fff; color:#999; font-size:14px; box-sizing:border-box; } .buyInfo .selType li > p { font-size:13px; font-weight:400; } .buyInfo .selType li > span { background:#fff; color:#000; word-wrap:break-word; word-break:keep-all; display:block; box-sizing:border-box; } .buyInfo .selType li.on { border:solid 2px #000; font-weight:500; color:#000; } .buyInfo .selType li.on p { color:#666; } .buyInfo .selType li.on span { color:#000; } .buyInfo .selType:after { content:''; display:block; clear:both; } .buyInfo .numType { margin-top:-21px; } .buyInfo .numType li { position:relative; min-height:24px; margin-top:21px; padding:1px 85px 0 0; line-height:21px; color:#000; word-wrap:break-word; word-break:keep-all; box-sizing:border-box; } .buyInfo .numType li.end .txt { font-weight:300; color:#aaa; } .buyInfo .numType li.end .tip, .buyInfo .numType li.end .sign { opacity:.3; } .buyInfo .numType li.end .tip.active > span { display:none; } .buyInfo .numType select { max-width:95%; height:30px; background:url('/mobile/img/202003170001/mark_select.png') 93% -29px no-repeat transparent; background-size:11px auto; border:solid 1px #e2e2e2; border-radius:100px; margin:6px 0; padding:0 25px 0 10px; line-height:28px; vertical-align:middle; appearance:none; -moz-appearance:none; -webkit-appearance:none; } .buyInfo .numType .tip { position:relative; z-index:10; width:15px; height:15px; background:url('/mobile/img/202003170001/mark_tip.png') 6px center no-repeat; background-size:auto 11px; border:solid 1px #e1e1e1; border-radius:100px; margin:-2px 0 0 3px; font-size:0; line-height:0; vertical-align:middle; display:inline-block; } .buyInfo .numType .tip > span { position:absolute; top:25px; left:-40px; width:45vw; min-width:150px; max-width:212px; background:#fff; border:solid 1px #b6b6b6; border-radius:7px; padding:15px 15px 15px 16px; font-size:10px; line-height:19px; color:#444; word-wrap:break-word; word-break:keep-all; box-sizing:border-box; display:none; } .buyInfo .numType .tip > span:before { content:''; position:absolute; top:-14px; left:39px; width:17px; height:14px; background:url('/mobile/img/202003170001/mark_tooltip.png') left bottom no-repeat; background-size:auto 100%; display:block; } .buyInfo .numType .tip bdo { margin-top:5px; display:block; } .buyInfo .numType .tip.active { z-index:11; } .buyInfo .numType .tip.active:before { content:''; position:absolute; top:12px; left:0; width:17px; height:14px; background:url('/mobile/img/202003170001/mark_tooltip.png') left bottom no-repeat; background-size:auto 100%; display:block; z-index:1; } .buyInfo .numType .tip.active > span { display:block; max-height:150px;overflow-y:auto; } .buyInfo .numType .sign { width:8px; height:8px; background:url('/mobile/img/202003170001/mark_opt_x.png') center top no-repeat; background-size:100% auto; margin:-2px 2px 0 3px; font-size:0; line-height:0; text-indent:-9999px; vertical-align:middle; display:inline-block; overflow:hidden; } .buyInfo .numType .number { position:absolute; z-index:1; top:50%; right:0; width:73px; height:24px; margin-top:-12px; text-align:center; display:block; box-sizing:border-box; } .buyInfo .numType .number input { border:0; width:27px; height:22px; background:transparent; font-family:'Roboto'; font-size:20px; font-weight:500; line-height:22px; color:#000; text-align:center; -webkit-text-fill-color:#000; -webkit-opacity:1; } .buyInfo .numType .number input:disabled { -webkit-opacity:1; } .buyInfo .numType .number button { position:absolute; bottom:0; width:24px; height:24px; background:transparent; border:solid 1px #d1d1d1; border-radius:50px; font-size:0; line-height:0; text-indent:-9999px; display:block; overflow:hidden; } .buyInfo .numType .number button:after, .buyInfo .numType .number button:before { content:''; position:absolute; background:#000; display:block; } .buyInfo .numType .number button:after { top:7px; left:10px; width:2px; height:8px; } .buyInfo .numType .number button:before { top:10px; left:7px; width:8px; height:2px; } .buyInfo .numType .number .up { right:0; background:none; } .buyInfo .numType .number .down { left:0; background-position:-14px 7px; } .buyInfo .numType .number .down:after { display:none; } .buyInfo .numType .number.off input { color:#aeaeae; -webkit-text-fill-color:#aeaeae; } .buyInfo .numType .number.off button:after, .buyInfo .numType .number.off button:before { background:#ccc; } .buyInfo .numType del { display:block; color:#a0a0a0; } /* 히든 URL */ .buyInfo .addrType input { width:101px; height:41px; border:1px solid #e9e9e9; padding:0 13px; color:#000; box-sizing:border-box; } .buyInfo .addrType input::placeholder { font-family:'Noto Sans KR'; font-size:13px; font-weight:400; color:#aaa; } .buyInfo .addrType input::-moz-placeholder { font-family:'Noto Sans KR'; font-size:13px; font-weight:400; color:#aaa; } .buyInfo .addrType input::-ms-input-placeholder { font-family:'Noto Sans KR'; font-size:13px; font-weight:400; color:#aaa; } .buyInfo .addrType input::-webkit-input-placeholder { font-family:'Noto Sans KR'; font-size:13px; font-weight:400; color:#aaa; } .buyInfo .addrType .blind { position:absolute; top:0; left:-5000px; padding:0; overflow:hidden; width:0; height:0; line-height:0; } .buyInfo .addrType .btn { display:inline-block; width:80px; height:40px; line-height:40px; text-align:center; color:#fff; border-radius:4px; background:#7f828a; margin-left:2px; } .buyInfo .addrType label input { width:100%; margin-top:7px; } /* 모바일 오더 추가*/ .buyInfo .numType.moList { margin-bottom:40px; } .buyInfo .numType.moList:last-child { margin-bottom:0; } .buyInfo .numType.moList li { display:flex; align-items:center; min-height:100px; padding:16px 35px 16px 88px; border-bottom:1px solid #dfdfdf; margin-top:-5px; } /*250617 수정*/ .buyInfo .numType.moList li:last-child { border:0; } .buyInfo .numType.moList li .number { width:27px; } .buyInfo .numType.moList li .number input { text-align:right; } .buyInfo .numType.moList li .thumb { position:absolute; top:50%; left:0; margin-top:-33px;width:4.7rem; height:auto; border-radius:8px; font-size:0; line-height:0; text-align:center;overflow:hidden; aspect-ratio: 450 / 420; } /*250617 수정*/ .buyInfo .numType.moList li.category { justify-content:center; min-height:24px; font-size:12px; line-height:24px;color:#9d9fa1; background-color:#e3e5e7; text-align:center; padding:0; border:0; border-radius:12px; letter-spacing:1px; margin-top:35px; } /*250617 수정*/ .buyInfo .numType.moList li.done { color:#aeaeae; } .buyInfo .numType.moList li.done .number input { color:#aeaeae;-webkit-text-fill-color:#aeaeae; } /* .buyInfo .numType.moList li.done .thumb img {opacity:.51; } */ .buyInfo .numType.moList li.done .thumb:before { content:''; position:absolute;z-index:2; top:0; left:0;right:0; bottom:0; background:#000;opacity:.6; } .buyInfo .numType.moList li.done .thumb:after { content:'\c900\be44\c911'; position:absolute;z-index:3; top:33px; left:0;right:0; font-size:13px;color:#fff; text-align:center; } /*250617 수정*/ .buyInfo .numType.moList li.done .sign { opacity:.31; } .buyInfo .numType.moList li .txt { word-break:break-all;-webkit-text-size-adjust:none; } /*250617 수정*/ .buyInfo .numType.mdList { margin-bottom:40px; } .buyInfo .numType.mdList:last-child { margin-bottom:0; } .buyInfo .numType.mdList li { min-height:95px; padding:21px 35px 21px 89px; border-bottom:1px solid #dfdfdf; margin-top:0; } /*250617 수정*/ .buyInfo .numType.mdList li:last-child {border:0; } .buyInfo .numType.mdList li .number {width:27px; } .buyInfo .numType.mdList li .number input {text-align:right; } .buyInfo .numType.mdList li .txt { display:table-cell; padding:10px 0; } .buyInfo .numType.mdList li.soldout { color:#aeaeae; } .buyInfo .numType.mdList li.soldout .thumb:before { content:''; position:absolute;z-index:2; top:0; left:0;right:0; bottom:0; background:#000;opacity:.6; } .buyInfo .numType.mdList li.soldout .thumb:after { content:'\d488\c808'; position:absolute;z-index:3; top:50%; left:0;right:0; transform:translate(0,-50%); font-size:13px;color:#fff; text-align:center; } .buyInfo .numType.mdList li.soldout .number input { color:#aeaeae; -webkit-text-fill-color:#aeaeae; } .buyInfo .numType.mdList li.soldout .sign { opacity:0.4; } /* Q-PASS 추가 */ .buyInfo .numType.Qpass { margin-bottom:40px; } .buyInfo .numType.Qpass:last-child { margin-bottom:0; } .buyInfo .numType.Qpass li { display:flex; align-items:center; min-height:100px; padding:21px 74px 21px 88px; border-bottom:1px solid #dfdfdf; margin-top:-5px; } /*250617 수정*/ .buyInfo .numType.Qpass li:last-child {border:0; } .buyInfo .numType.Qpass li .thumb { position:absolute; top:50%; left:0; margin-top:-33px;width:4.7rem; height:auto; border-radius:8px; font-size:0; line-height:0; text-align:center; overflow:hidden; aspect-ratio: 450 / 420; } /*250617 수정*/ .buyInfo .numType.Qpass li .thumb img { position:relative; top:0; left:50%; height:100%; margin-left:-100%; } .buyInfo .numType.Qpass li.end { color:#aeaeae; } .buyInfo .numType.Qpass li.end:after { content:none; } .buyInfo .numType.Qpass li.end .number input { color:#aeaeae;-webkit-text-fill-color:#aeaeae; } .buyInfo .numType.Qpass li.end .thumb img {opacity:.51; } .buyInfo .numType.Qpass li .txt { word-break:break-all;-webkit-text-size-adjust:none; } /*250617 수정*/ .buyInfo .numType.tier1 li:after { content:''; position:absolute; top:50%; right:0; transform:translateY(-50%); width:7px; height:10px; background:url('/mobile/img/202003170001/mark_list.png') no-repeat; background-size:auto 100%; opacity:0.5; } .buyInfo .prod { text-align:center; } .buyInfo .prod li { height:100%; margin-top:5px; padding:14px 17px 15px 17px; line-height:21px; } .buyInfo .prod li.on { padding:12px 15px 13px 15px; } .buyInfo .prod li:first-child { margin-top:0; } .buyInfo .prod.addType1 li, .buyInfo .prod.addType2 li { float:left; background:none; padding:0; border:0; } .buyInfo .prod.addType1 li span, .buyInfo .prod.addType2 li span { margin-left:3px; padding:14px 7px 15px 7px; box-sizing:border-box; } .buyInfo .prod.addType1 li.on span, .buyInfo .prod.addType2 li.on span { border:solid 2px #000; padding:12px 5px 13px 5px; font-weight:500; } .buyInfo .prod.addType1 { margin:-5px 0 0 -3px; } .buyInfo .prod.addType1 li { width:50%; } .buyInfo .prod.addType1 li:first-child { margin-top:5px; } .buyInfo .prod.addType2 { margin:-3px 0 0 -3px; } .buyInfo .prod.addType2 li { width:33.33%; margin-top:3px; } .buyInfo .prod.addType2 li:first-child { margin-top:3px; } .buyInfo .prod.addType3 li { position:relative; padding-right:100px; text-align:left; } .buyInfo .prod.addType3 li small { position:absolute; top:50%; right:17px; margin-top:-11px; font-size:11px; } .buyInfo .prod.addType3 li.on { padding-right:98px; } .buyInfo .prod.addType3 li.on small { right:15px; } .buyInfo .prod + .prod { margin-top:0; } .buyInfo .prod + .prod.addType2 { margin-top:2px; } .buyInfo .card { margin:-3px 0 0 -3px; } .buyInfo .card li { float:left; width:33.33%; background:none; margin-top:3px; padding-left:3px; text-align:center; display:table; box-sizing:border-box; } .buyInfo .card li span { height:50px; line-height:21px; vertical-align:middle; display:table-cell; } .buyInfo .card li.on { border:0; } .buyInfo .card li.on span { border:solid 2px #000; font-weight:500; } .buyInfo .card li:first-child { width:33.34%; } .buyInfo .card.addType1 li { width:100%; } .buyInfo .card.addType2 li { width:50%; } .buyInfo .asso li { min-height:65px; background:#fff; margin-top:5px; padding:15px 20px; } .buyInfo .asso li small { margin-top:2px; font-size:12px; font-weight:300; display:block; } .buyInfo .asso li.on { padding:13px 18px; } .buyInfo .asso li.on small { color:#333; } .buyInfo .asso li:first-child { margin-top:0; } .buyInfo .time { margin:-3px 0 0 -3px; } .buyInfo .time li { float:left; width:33.33%; background:none; margin-top:3px; font-family:'Roboto'; font-size:14px; text-align:center; } .buyInfo .time li span { position:relative; height:50px; margin-left:3px; line-height:50px; overflow:hidden; } .buyInfo .time li span:after { content:''; display:block; clear:both; } .buyInfo .time li span small { float:right; font-family:'Noto Sans KR'; font-size:11px; } .buyInfo .time li.on { border:0; } .buyInfo .time li.on span { border:solid 2px #000; font-weight:500; line-height:46px; } .buyInfo .time li.end span { color:#aaa; } .buyInfo .time li.end span:before { content:''; position:absolute; top:50%; left:50%; width:50px; height:1px; background:#aaa; margin:-1px 0 0 -25px; } .buyInfo .time li:first-child { width:33.34%; } .buyInfo .time.addType1 { margin:-5px 0 0 -5px; } .buyInfo .time.addType1 li { width:50%; margin-top:5px; } .buyInfo .time.addType2 { margin-top:-5px; } .buyInfo .time.addType2 li { width:100%; margin-top:5px; } .buyInfo .time.addType3 { margin:-5px 0 0 -5px; } .buyInfo .time.addType3 li { width:50%; margin-top:5px; text-align:left; } .buyInfo .time.addType3 li span { margin-left:5px; padding:0 12px; } .buyInfo .time.addType3 li.on span { padding:0 10px; } .buyInfo .time.addType3 li.end span:before { left:2px; margin-left:0; } .buyInfo .time.addType4 { margin-top:-5px; } .buyInfo .time.addType4 li { width:100%; margin-top:5px; text-align:left; } .buyInfo .time.addType4 li span { padding:0 17px; } .buyInfo .time.addType4 li.on span { padding:0 15px; } .buyInfo .time.addType4 li.end span:before { left:9px; margin-left:0; } .buyInfo .baby { margin-left:-5px; } .buyInfo .baby li { float:left; width:50%; background:none; text-align:center; } .buyInfo .baby li span { height:50px; margin-left:5px; line-height:50px; } .buyInfo .baby li.on { border:0; } .buyInfo .baby li.on span { border:solid 2px #000; font-weight:500; line-height:46px; } .buyInfo .request { height:135px; min-height:135px; margin-bottom:-2px; padding:20px; } .buyInfo.el .amtBox strong { color:#fe5730; } .buyInfo.el .itemDet li.on, .buyInfo.el .itemDet li.on span { border-color:#fe5730; } .buyInfo.cb .amtBox strong { color:#1b9bf0; } .buyInfo.cb .itemDet li.on, .buyInfo.cb .itemDet li.on span { border-color:#1b9bf0; } /* 신규 스피드웨이 추가 */ .buyInfo.speed .amtBox strong { color:#554fca; } .buyInfo.speed .itemDet li.on, .buyInfo.speed .itemDet li.on span { border-color:#554fca; } .buyInfo.md .amtBox strong { color:#F33636; } .buyInfo.md .itemDet li.on, .buyInfo.md .itemDet li.on span { border-color:#F33636; } .buyInfo + .btnFix a { display:none; } /* 모바일오더 카테고리 탭 */ .itemDet .moList { display:none; } .itemDet .moList.active { display:block; } .itemDet .numType.moList { margin-bottom:0; } .itemDet .moListTab { border-bottom:solid 1px #b16e3a; display:block; margin-bottom:42px; font-size:0; line-height:0; white-space:nowrap; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-track-color:transparent; } .itemDet .moListTab::-webkit-scrollbar { height:0; -webkit-appearance:none; } .itemDet .moListTab button { position:relative;z-index:1; height:30px; background:#fff; border-radius:10px 10px 0 0; margin-left:4px; padding:0 13px; font-size:13px;color:#999; line-height:29px;vertical-align:bottom;display:inline-block; box-sizing:border-box; } .itemDet .moListTab button:first-child { margin-left:0; } .itemDet .moListTab button.on { position:relative;z-index:2; background:#b16e3a; color:#fff; font-weight:400; } /* 시간제한 알림 */ .timeLim { position:fixed; z-index:11; top:60px; left:0; right:0; height:50px; background:#fe5730; padding:0 25px; line-height:50px; color:#fff; box-sizing:border-box; } .timeLim .tip { position:relative; width:15px; height:15px; background:url('/mobile/img/202003170001/mark_tip.png') -4px center no-repeat; background-size:auto 11px; border:solid 2px #fe8a6f; border-radius:100px; margin:-2px 0 0 3px; font-size:0; line-height:0; vertical-align:middle; display:inline-block; } .timeLim .tip > span { position:absolute; z-index:10; top:25px; right:-10px; width:195px; background:#fff; border:solid 1px #b6b6b6; border-radius:7px; padding:13px 15px; font-size:10px; line-height:19px; color:#444; text-align:left; word-wrap:break-word; word-break:keep-all; box-sizing:border-box; display:none; } .timeLim .tip > span:before { content:''; position:absolute; top:-10px; right:8px; width:14px; height:10px; background:url('/mobile/img/202003170001/mark_tooltip.png') left bottom no-repeat; background-size:auto 100%; display:block; } .timeLim .tip.active > span { display:block; } .timeLim .num { float:right; padding-top:9px; line-height:30px; display:block; } .timeLim .num i { position:relative; z-index:1; float:left; width:25px; height:30px; background:#fff; border-radius:3px; margin-right:2px; font-family:'Roboto'; font-size:18px; font-weight:500; line-height:30px; color:#000; text-align:center; vertical-align:middle; display:block; overflow:hidden; } .timeLim .num i:before { content:''; position:absolute; z-index:-1; top:50%; left:0; right:0; bottom:0; background:#f8f8f8; display:block; } .timeLim .num i:last-child { margin-right:5px; } .timeLim .num:after { content:''; display:block; clear:both; } .timeLim + .cartIntro { padding-top:72px; } .timeLim + .payment { padding-top:100px; padding-bottom:60px; } /* 장바구니 */ .cartIntro { padding-top:21px; font-size:12px; font-weight:300; color:#000; text-align:center; } .cartBox { position:relative; z-index:1; width:100%; padding:61px 25px 65px 25px; word-wrap:break-word; word-break:keep-all; box-sizing:border-box; } .cartBox h3 { min-height:35px; border-bottom:solid 3px #000; padding-bottom:9px; font-size:11px; font-weight:400; text-align:center; overflow:hidden; box-sizing:border-box; } .cartBox h3 strong { font-size:25px; } .cartBox h3 strong i { font-size:23px; } .cartBox h3 strong { margin-top:3px; font-family:'Roboto'; font-size:30px; font-weight:500; line-height:35px; color:#000; letter-spacing:-2px; display:block; } .cartBox h3 strong i { margin-top:-6px; font-family:'Noto Sans KR'; font-size:27px; line-height:28px; vertical-align:middle; display:inline-block; } .cartBox h3 strong.term { margin:5px 50px 3px 50px; font-size:20px; line-height:23px; letter-spacing:-1px; } .cartBox h4 { position:relative; z-index:2; border-bottom:solid 2px #000; margin:36px 0 -1px 0; padding:0 50px 13px 0; font-size:17px; font-weight:500; line-height:23px; color:#000; } .cartBox label { position:absolute; z-index:10; width:23px; height:23px; background:#fff; font-size:0; line-height:0; overflow:hidden; } .cartBox label span { height:100%; background:url('/mobile/img/202003170001/mark_check_cart.png') 5px center no-repeat; background-size:auto 9px; border:solid 1px #d1d1d1; border-radius:30px; text-indent:-9999px; display:block; box-sizing:border-box; } .cartBox label input { position:absolute; top:-15px; left:-15px; width:0; height:0; opacity:0; } .cartBox label input:checked + span { background-position:-15px center; border-color:#fe5730; } .cartBox .time { width:72px; height:17px; font-size:10px; color:#fe5730; display:inline-block; border:solid 1px #fe5730; border-radius:50px; margin:5px 0 -5px; padding:0 10px; line-height:16px; font-weight:500; } .cartBox .time:after { content:''; width:9px; height:11px; background:url('/mobile/img/202003170001/icon_time2.png') left center no-repeat; background-size:auto 100%; margin:-2px 0 0 6px; vertical-align:middle; display:inline-block; } .cartBox .partItem .time + label { top:40px; } .cartBox .sort { float:right; min-width:43px; height:17px; border:solid 1px #000; border-radius:3px; margin-top:-37px; padding:0 4px 0 3px; font-size:10px; font-weight:500; line-height:16px; text-align:center; } .cartBox .noday { width:0; height:29px; font-size:0; line-height:0; color:#fff; opacity:0; display:block; background:#000; } .cartBox .totalChk { position:relative; z-index:10; float:left; margin-top:-41px; display:block; overflow:hidden; } .cartBox .price, .cartBox .btnDel { height:40px; text-align:center; display:block; overflow:hidden; box-sizing:border-box; } .cartBox .price { background:#eff0f2; border-radius:3px; margin:20px 100px 0 -32px; font-size:14px; line-height:40px; color:#000; } .cartBox .price b { font-family:'Roboto'; font-size:15px; font-weight:500; } .cartBox .btnDel { float:right; background:#fff; width:95px; margin-top:-40px; border:solid 1px #d1d1d1; border-radius:3px; line-height:38px; color:#666; } .cartBox .btnDel button { width:100%; height:40px; background:#fff !important; line-height:40px; color:#666; } .cartBox .number { position:absolute; z-index:1; top:50%; right:0; width:73px; height:24px; margin-top:-12px; text-align:center; display:block; box-sizing:border-box; } .cartBox .number input { border:0; width:27px; height:22px; background:transparent; font-family:'Roboto'; font-size:20px; font-weight:500; line-height:22px; color:#000; text-align:center; -webkit-text-fill-color:#000; -webkit-opacity:1; } .cartBox .number button { position:absolute; bottom:0; width:24px; height:24px; background:transparent; border:solid 1px #d1d1d1; border-radius:50px; font-size:0; line-height:0; text-indent:-9999px; display:block; overflow:hidden; } .cartBox .number button:after, .cartBox .number button:before { content:''; position:absolute; background:#000; display:block; } .cartBox .number button:after { top:7px; left:10px; width:2px; height:8px; } .cartBox .number button:before { top:10px; left:7px; width:8px; height:2px; } .cartBox .number .up { right:0; background:none; } .cartBox .number .down { left:0; background-position:-14px 7px; } .cartBox .number .down:after { display:none; } .cartBox .number .done:after, .cartBox .number .done:before { background:#ccc; } .cartBox .number.off input { color:#aeaeae; -webkit-text-fill-color:#aeaeae; } .cartBox .number.off button:after, .cartBox .number.off button:before { background:#ccc; } .cartBox .partProd { position:relative; clear:both; } .cartBox .partItem { position:relative; border-top:solid 1px #dbdbdb; padding:10px 0 25px 32px; clear:both; } .cartBox .partItem > div { position:relative; min-height:24px; margin-top:10px; padding:1px 100px 1px 0; line-height:20px; box-sizing:border-box; } .cartBox .partItem > label { top:20px; left:0; } .cartBox .partItem:after { content:''; display:block; clear:both; } .cartBox .partItem .optList { margin:0 -80px 0 11px; padding:2px 0 6px 0} .cartBox .partItem .optList li { position:relative; margin-top:12px; padding-left:7px; padding-right:75px; font-size:12px; color:#666; line-height:19px; } .cartBox .partItem .optList li:before { content:'-'; position:absolute; top:0; left:0; display:block; } .cartBox .partItem .optList li.tit { color:#fe5730; padding-left:0; } .cartBox .partItem .optList li.tit:before { content:none; } .cartBox .partItem .optList.optListLine { position:relative; } .cartBox .partItem .optList.optListLine:before { content:'';display:block;width:calc(100% - 80px); height:1px; background-color:#e9e9e9; margin-top:10px; } .cartBox .addSubAr { border-top:solid 1px #dbdbdb; padding-top:24px; } .cartBox .addSubAr .tit { margin-bottom:-2px; font-size:15px; font-weight:500; color:#000; display:block; } .cartBox .addSubAr .tit + .partItem { border-top:0; } .cartBox .btnBox { margin-top:25px; } .cartBox .btnBox button { width:100%; height:45px; background:#3c414b; border-radius:3px; font-size:14px; line-height:43px; color:#fff; text-align:center; display:block; } .cartBox .btnBox button b { margin-right:2px; font-size:15px; font-weight:500; display:inline-block; } .cartBox .btnBox .btnDel { float:left; width:32.4%; height:45px; border:0; margin:0; padding-right:5px; } .cartBox .btnBox .btnDel button { height:45px; border:solid 1px #d1d1d1; border-radius:3px; color:#222; display:block; } .cartBox .btnBox .btnDel + button { float:right; width:67.6%; } .cartBox .btnBox:after { content:''; display:block; clear:both; } .cartBox .btnBox + .partProd:before { content:''; height:0; border-top:solid 1px #e9e9e9; margin:65px -25px 60px -25px; display:block; } /* 에버랜드 */ .cartBox.el h3 { border-color:#fe5730; } .cartBox.el h3 strong { color:#fe5730; } .cartBox.el .sort { border-color:#fe5730; color:#fe5730; } /* 캐리비안 베이 */ .cartBox.cb h3 { border-color:#1b9bf0; } .cartBox.cb h3 strong { color:#1b9bf0; } .cartBox.cb h3 strong.term { font-size:17px; } .cartBox.cb label input:checked + span { background-position:-35px center; border-color:#1b9bf0; } .cartBox.cb .sort { border-color:#1b9bf0; color:#1b9bf0; } .cartBox.cb + .btnFix .price { background:#1b9bf0 !important; } .cartBox.mo { padding-top:35px; padding-bottom:200px; }/* 모바일 오더 추가 */ /* 스피드웨이 */ .cartBox.speed h3 { border-color:#554fca; } .cartBox.speed h3 strong { color:#554fca; } .cartBox.speed h3 strong.term { font-size:17px; } .cartBox.speed label input:checked + span { background-position:-55px center; border-color:#554fca; } .cartBox.speed .sort { border-color:#554fca; color:#554fca; } .cartBox.speed + .btnFix .price { background:#554fca !important; } .cartBox + .cartBox { border-top:solid 10px #f7f9fa; } /* 예약자,방문자 정보 */ .contactBox { margin:0 25px; padding:32px 0 50px 0; } .contactBox dl { width:100%; border-top:solid 1px #e9e9e9; clear:both; } .contactBox dt { height:60px; line-height:60px; color:#666; } .contactBox dd { height:60px; border-bottom:solid 1px #e9e9e9; margin-top:-60px; padding:0 0 0 80px; text-align:right; overflow:hidden; } .contactBox dd input { width:100%; height:60px; border:0; padding:0; font-family:'Roboto'; font-size:15px; color:#000; text-align:right; } .contactBox dd input::placeholder { font-family:'Noto Sans KR'; font-size:12px; font-weight:300; color:#999; } .contactBox dd input::-moz-placeholder { font-family:'Noto Sans KR'; font-size:12px; font-weight:300; color:#999; } .contactBox dd input::-ms-input-placeholder { font-family:'Noto Sans KR'; font-size:12px; font-weight:300; color:#999; } .contactBox dd input::-webkit-input-placeholder { font-family:'Noto Sans KR'; font-size:12px; font-weight:300; color:#999; } .contactBox dd select { width:22%; max-width:60px; height:60px; background:url('/mobile/img/202003170001/mark_select.png') 95.5% 27px no-repeat transparent; background-size:11px auto; border:0; padding:0 18px 0 0; font-family:'Roboto'; font-size:15px; color:#000; vertical-align:bottom; appearance:none; -moz-appearance:none; -webkit-appearance:none; } .contactBox dd:nth-child(2) input { font-family:'Noto Sans KR'; font-size:14px; } .contactBox dd:nth-child(4) input { width:21.5%; max-width:130px; } .contactBox label { position:relative; float:right; height:20px; margin-bottom:15px; padding-left:25px; display:block; overflow:hidden; } .contactBox label span { height:20px; line-height:20px; color:#666; display:inline-block; } .contactBox label span:before { content:''; position:absolute; top:0; left:0; width:20px; height:20px; background:url('/mobile/img/202003170001/mark_check.png') left center no-repeat; background-size:auto 100%; border:solid 1px #d1d1d1; border-radius:3px; display:block; box-sizing:border-box; } .contactBox label input { position:absolute; top:0; left:-20px; width:0; height:0; opacity:0; } .contactBox label input:checked + span:before { background-color:#fe5730; background-position:right center; border:0; } .contactBox label.cb input:checked + span:before { background-color:#1b9bf0; } .contactBox label.speed input:checked + span:before { background-color:#554fca; } /* 신규 스피드웨이 추가 */ .contactBox label.md input:checked + span:before { background-color:#F33636; } .contactBox label.ecube input:checked + span:before { background-color:#00ADA2; } .contactBox .sign { width:10px; height:1px; background:#000; margin:-5px 0 0 15px; font-size:0; line-height:0; vertical-align:middle; display:inline-block; } .contactBox .intro { margin-bottom:30px; font-size:28px; font-weight:200; line-height:30px;color:#000;word-wrap:break-word;word-break:keep-all; } .contactBox .intro i { margin:13px 25% 0 0; font-size:12px; font-weight:300; line-height:19px; color:#666; display:block; } .contactBox .intro span { display:inline-block; } .contactBox .notify { margin:16px 0 0 0; font-size:12px; font-weight:300; color:#fe5730; text-align:right; } .contactBox .addrList {height:auto; padding:0; } .contactBox .addrList button{height:25px; background:#f7f9fa; border:solid 1px #d1d1d1; margin-left:2px; padding:0 10px; font-size:11px;color:#666; } .contactBox .addrList .addrNum {font-family:'Roboto'; font-size:15px;display:inline-block; margin-right:10px; height:60px; padding-left:80px; line-height:60px; } .contactBox .addrList .addrTxt {font-family:'Noto Sans KR'; font-size:14px; height:60px; border-top:solid 1px #e9e9e9; line-height:60px; } .contactBox .addrList .addrTxt input {font-family:'Noto Sans KR'; font-size:14px; } .contactBox .text {height:125px; padding-left:0; margin-top:-13px; } .contactBox .text textarea { display:block;width:100%; min-width:100%; max-width:100%; height:105px; border:solid 1px #e9e9e9; padding:15px 10px; box-sizing:border-box; } .contactBox .text textarea::placeholder { font-family:'Noto Sans KR'; font-size:13px; font-weight:300; color:#999; } .contactBox .text textarea::-moz-placeholder { font-family:'Noto Sans KR'; font-size:13px; font-weight:300; color:#999; } .contactBox .text textarea::-ms-input-placeholder { font-family:'Noto Sans KR'; font-size:13px; font-weight:300; color:#999; } .contactBox .text textarea::-webkit-input-placeholder { font-family:'Noto Sans KR'; font-size:13px; font-weight:300; color:#999; } .contactBox + hr { margin:0; border:none; border-top:solid 8px #f7f9fa; } hr + .contactBox { padding:40px 0 80px; } .contactBox2 { margin:0; padding:32px 25px 50px; border-top:solid 8px #f7f9fa; } .contactBox2 dt select { width:100px; height:60px; background:url('/mobile/img/202003170001/mark_select.png') 95.5% 27px no-repeat transparent; background-size:11px auto; border:0; padding:0 18px 0 0; font-size:14px; color:#000; vertical-align:bottom; appearance:none; -moz-appearance:none; -webkit-appearance:none; } .contactBox2 dd { padding:0 0 0 110px; } .contactBox2 dd:nth-child(4) input { width:100%; max-width:100%; } .contactBox2 dd.ch select {float:left;width:100px; max-width:100px; font-size:14px; font-family:'Noto Sans KR'; } .contactBox2 dd.ch input {width:calc(100% - 100px)} .contactBox2 dd.tel select {width:22%; } .contactBox2 dd.tel input {width:21.5%; max-width:130px; } .contactBox2 .intro i { margin:13px 12% 0 0; } .contactBox2 .count { margin-bottom:13px; font-size:13px;color:#666; text-align:right; } .contactBox2 .count b { color:#FE5730; font-weight:500;; } .titBox { position:relative; margin:40px 0 0; padding-bottom:20px; border-bottom:1px solid #000; font-size:14px;color:#000; } .titBox .number { position:absolute; z-index:1; top:50%; right:0; width:73px; height:24px; margin-top:-22px; text-align:center; display:block; box-sizing:border-box; } .titBox .number input { border:0; width:27px; height:22px; background:transparent; font-family:'Roboto'; font-size:20px; font-weight:500; line-height:22px; color:#000; text-align:center; -webkit-text-fill-color:#000; -webkit-opacity:1; } .titBox .number button { position:absolute; bottom:0; width:24px; height:24px; background:transparent; border:solid 1px #d1d1d1; border-radius:50px; font-size:0; line-height:0; text-indent:-9999px; display:block; overflow:hidden; } .titBox .number button:after, .titBox .number button:before { content:''; position:absolute; background:#000; display:block; } .titBox .number button:after { top:7px; left:10px; width:2px; height:8px; } .titBox .number button:before { top:10px; left:7px; width:8px; height:2px; } .titBox .number .up { right:0; background:none; } .titBox .number .down { left:0; background-position:-14px 7px; } .titBox .number .down:after { display:none; } .titBox .number .done:after, .titBox .number .done:before { background:#ccc; } .titBox .number.off input { color:#aeaeae; -webkit-text-fill-color:#aeaeae; } .titBox .number.off button:after, .titBox .number.off button:before { background:#ccc; } .titBox + .infoBox {border-top:none; } /* 추가 정보 */ .addInfo {border-top:solid 8px #f7f9fa; padding:45px 25px 125px 25px; } .addInfo h3 { margin-bottom:30px; font-size:28px; font-weight:200; line-height:35px;color:#000; } .addInfo h4 { position:relative; height:60px; background:url('/mobile/img/202003170001/mark_arrow_show.png') right 27px no-repeat; background-size:auto 41px; border-top:solid 1px #e9e9e9; border-bottom:solid 1px #e9e9e9; margin-top:-1px; font-weight:300; line-height:60px; color:#444; overflow:hidden; } .addInfo h4 .notify { position:absolute; top:0; left:0; right:30px; background:#fff; line-height:60px !important; display:block; } .addInfo h4.on { background-position:right -8px; font-weight:400; color:#000; } .addInfo h4.on .notify { display:none !important; } .addInfo h4.on + .infoBox { display:block !important; } .addInfo .infoBox { position:relative; z-index:2; border-top:solid 2px #000; border-bottom:solid 1px #000; margin-top:-1px; display:none; } .addInfo .notify { font-size:12px; font-weight:300; line-height:20px; color:#fe5730; } .addInfo .notice { margin:70px 15px 56px 0; } .addInfo .notice li { position:relative; margin-top:6px; padding-left:6px; font-size:12px; font-weight:300; line-height:19px; color:#666; word-wrap:break-word; word-break:keep-all; } .addInfo .notice li:before { content:''; position:absolute; top:8px; left:0; width:3px; height:1px; background:#999; display:block; } .addInfo .notice li i { display:inline-block; } .addInfo .parking { margin-top:30px; } .addInfo .parking input, .addInfo .parking select { width:100%; height:45px; border:0; border-bottom:solid 1px #dfdfdf; padding:0; font-size:15px; color:#000; vertical-align:bottom; box-sizing:border-box; } .addInfo .parking input { text-align:center; } .addInfo .parking select { background:url('/mobile/img/202003170001/mark_select.png') 95.5% 19px no-repeat transparent; background-size:11px auto; padding-right:18px; appearance:none; -moz-appearance:none; -webkit-appearance:none; } .addInfo .parking > a { height:18px; border:solid 1px #dfdfdf; border-radius:20px; margin:0 0 -4px 20px; padding:0 7px; font-size:10px; line-height:18px; color:#666; vertical-align:middle; display:inline-block; } .addInfo .parking > p { margin-top:15px; font-size:0; line-height:0; } .addInfo .parking > p span { float:left; display:block; box-sizing:border-box; } .addInfo .parking > p span:first-child { padding-left:0 !important; } .addInfo .parking > p:after { content:''; display:block; clear:both; } .addInfo .parking input[type='tel'] { font-family:'Roboto'; font-size:17px; } .addInfo .parking .tit { border-bottom:solid 2px #000; padding-bottom:2px; font-size:11px; font-weight:500; color:#000; vertical-align:top; display:inline-block; } .addInfo .parking .type1 span { padding-left:20px; } .addInfo .parking .type1 .sbox1 { width:26%; } .addInfo .parking .type1 .wbox1 { width:25%; } .addInfo .parking .type1 .wbox2 { width:21%; } .addInfo .parking .type1 .wbox3 { width:28%; } .addInfo .parking .type2 span { padding-left:15px; } .addInfo .parking .type2 .sbox1 { width:20%; } .addInfo .parking .type2 .sbox2 { width:22%; } .addInfo .parking .type2 .wbox1 { width:18%; } .addInfo .parking .type2 .wbox2 { width:17%; } .addInfo .parking .type2 .wbox3 { width:23%; } .addInfo .parking + .notice { margin-top:85px; } .addInfo .parking + .notify { min-height:40px; margin:15px 0 -40px 0; } /* 2020-08-25 차량정보입력영역 */ .addInfo .parking .parkingType { display:inline-block; width:auto; padding:0 15px; height:22px; border:solid 1px #ccc; border-radius:25px; font-size:13px; color:#777; line-height:22px; letter-spacing:-0.5px; text-align:center; } .addInfo .parking.typeBtn p { position:relative; } .addInfo .parking.typeBtn .type1 span { padding-left:10px; } .addInfo .parking.typeBtn .type1 .wbox1 { width:20%; } .addInfo .parking.typeBtn .type1 .wbox2 { width:17%; } .addInfo .parking.typeBtn .type1 .wbox3 { width:25%; } .addInfo .parking.typeBtn .type2 span { padding-left:10px; } .addInfo .parking.typeBtn .type2 .wbox1 { width:13%; } .addInfo .parking.typeBtn .type2 .wbox2 { width:13%; } .addInfo .parking.typeBtn .type2 .wbox3 { width:19%; } .addInfo .parking.typeBtn p .btn_cancle { position:absolute; top:10px;right:0;width:24px; height:24px; border-radius:50px; background:#E9E9E9 url('/mobile/img/202003170001/mark_list_x.png') no-repeat center center; background-size:10px; font-size:0; box-sizing:border-box;vertical-align:top; } .addInfo .bayCoin { position:relative; border-bottom:solid 1px #dfdfdf; margin-top:20px; padding-left:130px; } .addInfo .bayCoin i { position:absolute; top:28px; left:0; color:#666; } .addInfo .bayCoin input { width:100%; height:67px; background:#fff; border:0; font-family:'Roboto'; font-size:17px; color:#000; letter-spacing:2px; text-align:right; } .addInfo .bayCoin input::placeholder { font-family:'Noto Sans KR'; font-size:12px; font-weight:300; color:#aaa; letter-spacing:0; } .addInfo .bayCoin input::-moz-placeholder { font-family:'Noto Sans KR'; font-size:12px; font-weight:300; color:#aaa; letter-spacing:0; } .addInfo .bayCoin input::-ms-input-placeholder { font-family:'Noto Sans KR'; font-size:12px; font-weight:300; color:#aaa; letter-spacing:0; } .addInfo .bayCoin input::-webkit-input-placeholder { font-family:'Noto Sans KR'; font-size:12px; font-weight:300; color:#aaa; letter-spacing:0; } .addInfo .bayCoin + .notify { height:20px; margin:10px 0 -30px 0; text-align:right; } .addInfo .infoBox dt{ height:60px; line-height:60px; color:#666; } .addInfo .infoBox dd { height:60px; border-bottom:solid 1px #e9e9e9; margin-top:-60px; padding:0 0 0 80px; text-align:right; overflow:hidden; } .addInfo .infoBox dd select { width:170px; height:60px; background:url('/mobile/img/202003170001/mark_select.png') 95.5% 27px no-repeat transparent; background-size:11px auto; border:0; padding:0 18px 0 0; font-size:14px; color:#000; vertical-align:bottom; appearance:none; -moz-appearance:none; -webkit-appearance:none; } .addInfo .infoBox dd.text { padding:0; margin-top:-10px; height:auto; padding-bottom:15px; } .addInfo .infoBox dd.text textarea {width:100%; min-width:100%; max-width:100%; height:120px; min-height:75px; border:solid 1px #e9e9e9; padding:15px 10px; box-sizing:border-box; } .addInfo .infoBox .btnAdd { position:relative; min-width:60px; height:25px; background:#fff; border:solid 1px #d5d5d5; border-radius:25px; margin:10px auto; padding:0 29px 0 13px; font-size:12px;color:#999; letter-spacing:-0.5px; text-align:center;vertical-align:middle;display:block; } .addInfo .infoBox .btnAdd:before {background-color:#ccc;width:1px; height:9px; border-radius:1px;-webkit-border-radius:1px;-moz-border-radius:1px; position:absolute; top:8px;right:18px; content:""; } .addInfo .infoBox .btnAdd:after {background-color:#ccc;width:9px; height:1px; border-radius:1px;-webkit-border-radius:1px;-moz-border-radius:1px; position:absolute; top:12px;right:14px; content:""; } /* 결제 */ .payment { padding:32px 25px 0 25px; } .payment hr { content:''; height:8px; background:#f7f9fa; border:0; margin:0 -25px 44px -25px; padding:0; display:block; } .payment h3 { padding-right:17%; font-size:17px; font-weight:400; line-height:27px; color:#000; word-wrap:break-word; word-break:keep-all; } .payment + .prodRecom { border-top:solid 40px #f7f9fa; } .payment + .viewRelateBox { border-top:solid 40px #f7f9fa; } .payment .intro { padding-right:15%; font-size:12px; font-weight:300; line-height:19px; word-wrap:break-word; word-break:keep-all; } .payment .intro span { display:inline-block; } .payment .intro b, .payment .intro strong { margin-bottom:10px; font-size:28px; font-weight:200; line-height:34px; color:#000; display:block; } .payment .intro strong i { font-family:'Roboto'; font-size:30px; font-weight:400; } .payment .visitDay { margin-top:68px; color:#000; } .payment .visitDay i { font-family:'Roboto'; font-size:30px; letter-spacing:-1.3px; } .payment .visitDay span { margin-top:9px; font-size:25px; line-height:30px; color:#000; display:block; } .payment .detailBox { position:relative; margin-top:28px; word-wrap:break-word; word-break:keep-all; } .payment .detailBox > ul { margin-top:13px; padding:10px 0 47px 0; border-top:solid 1px #e9e9e9; } .payment .detailBox > ul > li { position:relative; margin-top:15px; padding-right:90px; font-size:14px; font-weight:300; line-height:22px; color:#222; } .payment .detailBox > ul > li:after { content:''; display:block; clear:both; } .payment .detailBox > ul > li.disc, .payment .detailBox > ul > li.disc .price { color:#fe5730; } .payment .detailBox > ul + .charge { margin-top:-21px; } .payment .detailBox .time { width:72px; height:17px; color:#fe5730; border:solid 1px #fe5730; border-radius:50px; margin-bottom:5px; padding:0 10px; font-size:10px; line-height:16px; font-weight:500; overflow:hidden; } .payment .detailBox .time:after { content:''; width:9px; height:11px; background:url('/mobile/img/202003170001/icon_time2.png') left center no-repeat; background-size:auto 100%; margin:-2px 0 0 6px; vertical-align:middle; display:inline-block; } .payment .detailBox .time + .price { margin-top:0; } .payment .detailBox .time + .optList + .price { top:24px; } .payment .detailBox .price { position:absolute; top:50%; right:0; margin-top:-11px; font-weight:400; color:#000; display:block; } .payment .detailBox .price em { font-family:'Roboto'; font-size:16px; } .payment .detailBox .charge { border-top:solid 1px #e9e9e9; margin-top:13px; padding-bottom:49px; font-size:14px; color:#fe5730; } .payment .detailBox .charge dt { float:left; padding-top:20px; font-weight:300; clear:both; } .payment .detailBox .charge dt.final { width:100%; border-top:solid 1px #000; margin:27px 0 -20px 0; padding:29px 0 0 0 !important; } .payment .detailBox .charge dd { float:right; padding-top:20px; } .payment .detailBox .charge dd em, .payment .detailBox .charge dd strong { font-family:'Roboto'; font-size:15px; display:inline-block; } .payment .detailBox .charge dt:nth-child(1), .payment .detailBox .charge dd:nth-child(2) { padding:28px 0 7px 0; font-weight:400; color:#000; } .payment .detailBox .charge dd:nth-child(2) em { margin-bottom:-1px; font-size:16px; font-weight:500; } .payment .detailBox .charge dd.final { padding-top:0 !important; padding-right:0; } .payment .detailBox .charge .final { font-size:15px; font-weight:500; color:#000; } .payment .detailBox .charge .final strong { font-size:19px; font-weight:500; } .payment .detailBox .charge:after { content:''; display:block; clear:both; } .payment .detailBox .optList { margin:0 -80px 0 11px; padding:2px 0 6px 0; } .payment .detailBox .optList li { position:relative; margin-top:12px; padding-left:7px; padding-right:75px; font-size:12px; color:#666; line-height:19px; } .payment .detailBox .optList li:before { content:'-'; position:absolute; top:0; left:0; display:block; } .payment .detailBox .optList li.tit { color:#fe5730; padding-left:0; } .payment .detailBox .optList li.tit:before { content:none; } .payment .detailBox .optList.optListLine { position:relative; } .payment .detailBox .optList.optListLine:before { content:'';display:block;width:100%; height:1px; background-color:#e9e9e9; margin-top:10px; } .payment .detailBox .optList + .price { top:0; margin-top:0; } .payment .detailBox .coupon { margin:10px 0 15px 0; } .payment .detailBox .coupon button { height:24px; border-radius:12px; padding:0 14px; font-size:12px; font-weight:500; line-height:20px; color:#fff; } .payment .detailBox:after { content:''; position:absolute; z-index:1; left:-25px; right:-25px; bottom:-10px; height:10px; background:url('/mobile/img/202003170001/bg_payment.png') center top no-repeat; background-size:auto 100%; display:block; } /*.payment .detailBox:after { content:''; position:absolute; z-index:1; left:-25px; right:-25px; bottom:-10px; height:10px; background:url('/mobile/img/202003170001/bg_payment.png') center top no-repeat; background-size:auto 100%; display:block; }*/ .payment .pointBox { background-color:#F4F5F6; border:1px solid #E9E9E9; border-radius:5px; margin:-34px 0 27px; padding:13px 13px 9px; } .payment .pointBox dl { font-size:0; text-align:right; } .payment .pointBox dl dt { display:inline-block; font-size:14px; color:#666; line-height:34px; letter-spacing:-0.7px; margin-right:16px; } .payment .pointBox dl dd { display:inline-block; } .payment .pointBox dl dd input { width:114px; height:34px; background:#fff; border:1px solid #D1D1D1; border-radius:3px; box-sizing:border-box; font-family:'Roboto'; font-size:15px; font-weight:500; color:#000; text-align:right; padding:0 11px; } .payment .pointBox dl dd button { width:70px; height:34px; color:#fff; text-align:center; background-color:#8B8F91; border-radius:3px; margin-left:5px; } .payment .pointBox .notify { text-align:right; margin-top:10px; font-size:12px; line-height:16px; font-weight:500; letter-spacing:-0.6px; color:#FE5730; } .payment .pointBox .notify strong { display:inline-block; font-size:14px; letter-spacing:-0.7px; } .payment .total { position:relative; z-index:2; border-top:solid 8px #f7f9fa; margin:0 -25px; padding:34px 25px 72px 25px; font-size:17px; font-weight:600; line-height:25px; color:#000; text-align:right; } .payment .total:after { content:''; position:absolute; z-index:1; left:0; right:0; bottom:-10px; height:10px; background:url('/mobile/img/202003170001/bg_payment.png') center top no-repeat; background-size:auto 100%; display:block; } .payment .total i { position:absolute; top:34px; left:25px; } .payment .total strong { margin:0 3px -2px 0; font-family:'Roboto'; font-size:20px; vertical-align:bottom; display:inline-block; } .payment .means { position:relative; background:#f7f9fa; margin:0 -25px; padding:45px 25px 130px 80px; text-align:right; } .payment .means dt { position:absolute; top:57px; left:25px; color:#222; } .payment .means dd { width:210px; background:#fff; border-radius:3px; margin:1px 0 0 2px; font-size:11px; text-align:left; display:inline-block; overflow:hidden; box-shadow:3px 2px 7px rgba(0,0,0,.04); } .payment .means label { display:block; } .payment .means span { position:relative; height:40px; padding-left:30px; font-weight:300; line-height:40px; display:block; box-sizing:border-box; } .payment .means span > i { display:inline-block; } .payment .means span > i:before { content:''; width:1px; height:7px; background:#e1e1e1; margin:-3px 7px 0 4px; vertical-align:middle; display:inline-block; } .payment .means span > i:first-child:before { display:none; } .payment .means span:before { content:''; position:absolute; top:8px; left:7px; width:23px; height:23px; background:url('/mobile/img/202003170001/mark_check_cart.png') 5px center no-repeat; background-size:auto 9px; display:block; } .payment .means input { position:absolute; top:-15px; left:-15px; width:0; height:0; opacity:0; } .payment .means input:checked + span { border:solid 2px #000; padding-left:28px; font-weight:400; line-height:36px; color:#000; } .payment.el .visitDay span { color:#fe5730; } .payment.el .means input:checked + span { border:solid 2px #fe5730; } .payment.el .means input:checked + span:before { top:6px; left:5px; background-position:-15px center; } .payment.cb .visitDay span { color:#1b9bf0; } .payment.cb .means input:checked + span { border:solid 2px #1b9bf0; } .payment.cb .means input:checked + span:before { top:6px; left:5px; background-position:-35px center; } .payment.cb + .btnFix .price { background:#1b9bf0 !important; } /* 신규 스피드웨이 추가 */ .payment.speed .visitDay span { color:#554fca; } .payment.speed .means input:checked + span { border:solid 2px #554fca; } .payment.speed .means input:checked + span:before { top:6px; left:5px; background-position:-35px center; } .payment.speed + .btnFix .price { background:#554fca !important; } .payment.el .detailBox .coupon button { background:#fe5730; } .payment.cb .detailBox .coupon button { background:#1b9bf0; } .payment.speed .detailBox .coupon button { background:#554fca; } .payment.md .detailBox .coupon button { background:#f33636; } /* 예약내역 */ .searchRes { position:relative; z-index:1; border:0; border-bottom:solid 1px #e9e9e9; margin-top:39px; padding:37px 25px 25px 25px; } .searchRes select { width:100%; background:url('/mobile/img/202003170001/mark_select.png') 95.5% 6px no-repeat transparent; background-size:11px auto; border:0; border-bottom:solid 1px #e9e9e9; padding:0 0 12px 0; font-size:12px; font-weight:300; color:#777; appearance:none; -moz-appearance:none; -webkit-appearance:none; } .searchRes legend { margin:0; padding:0; font-size:18px; font-weight:500; color:#000; } .searchRes .term { margin:30px -3px 0 1px; } .searchRes .term:after { content:''; display:block; clear:both; } .searchRes .term button { position:relative; z-index:1; float:left; width:33.33%; height:40px; background:#fff; border:solid 1px #e9e9e9; margin-left:-1px; font-weight:300; color:#777; display:block; } .searchRes .term button i { font-family:'Roboto'; font-weight:400; } .searchRes .term button:first-child { width:33.34%; } .searchRes .term button.on { z-index:2; border:solid 2px #000; font-weight:400; color:#000; } .searchRes .date { min-height:25px; margin-top:25px; } .searchRes .date input { position:relative; z-index:2; width:90px; height:25px; background:transparent; border:0; padding:0 17px 0 0; font-family:'Roboto'; font-size:14px; font-weight:200; color:#777; letter-spacing:-0.5px; } .searchRes .date .num { position:relative; display:inline-block; } .searchRes .date .num:after { content:''; position:absolute; z-index:1; top:2px; right:0; width:18px; height:17px; background:url('/mobile/img/202003170001/icon_calendar.png') -50px bottom no-repeat; background-size:auto 21px; display:block; } .searchRes .date.active input { font-weight:300; color:#000; } .searchRes .date.active .num:after { background-position:-70px bottom; } .searchRes .mkBar { width:10px; height:1px; background:#dbdbdb; margin:-5px 15px 0 15px; font-size:0; line-height:0; vertical-align:middle; display:inline-block; overflow:hidden; } .searchRes .btnSearch { position:absolute; z-index:10; right:25px; bottom:25px; width:25px; height:25px; background:url('/mobile/img/202003170001/btn_search.png') center center no-repeat #000; background-size:100% auto; border-radius:100px; margin:0; padding:0; font-size:0; letter-spacing:0; text-indent:-9999px; display:block; overflow:hidden; } .searchRes + .resList { border-top:0; margin-top:20px; } /* 모바일 오더 추가 */ .searchRes.mo .btnSearch {bottom:60px; } .searchRes.mo label { position:relative;display:block; margin-top:15px; } .searchRes.mo label span { height:20px; line-height:20px; color:#666; display:inline-block; margin-left:25px; } .searchRes.mo label span:before { content:''; position:absolute; top:0; left:0; width:20px; height:20px; background:url('/mobile/img/202003170001/mark_check.png') left center no-repeat; background-size:auto 100%; border:solid 1px #d1d1d1; border-radius:3px; display:block; box-sizing:border-box; } .searchRes.mo label input { position:absolute; top:0; left:-20px; width:0; height:0; opacity:0; } .searchRes.mo label input:checked + span:before { background-color:#fe5730; background-position:right center; border:0; } .searchRes.mo label.cb input:checked + span:before {background-color:#1b9bf0; } .resList { position:relative; z-index:1; border-top:solid 8px #f7f9fa; padding:37px 25px 23px 25px; } .resList h3 { font-size:12px; font-weight:400; color:#000; } .resList h3 small { font-size:12px; font-weight:300; color:#777; } .resList h3 strong { margin:11px 0 5px 0; font-family:'Roboto'; font-size:23px; font-weight:500; line-height:25px; letter-spacing:-1px; display:block; } .resList h4 { margin-top:22px; font-size:17px; font-weight:400; line-height:24px; color:#000; } .resList dl { border-top:solid 1px #e9e9e9; margin-top:13px; padding-top:22px; } .resList dl:after { content:''; display:block; clear:both; } .resList dt, .resList dd { margin-bottom:15px; font-size:14px; } .resList dt { float:left; width:40%; font-weight:300; color:#444; clear:both; } .resList dd { float:right; width:60%; font-size:14px; color:#000; text-align:right; } .resList .day, .resList .price b { font-family:'Roboto'; font-size:16px; font-weight:400; } .resList .state { color:#fe5730; } .resList .state.finish { color:#a82cd1; } .resList .more { position:absolute; z-index:10; top:0; left:0; right:0; bottom:0; background:transparent; font-size:0; line-height:0; text-indent:-9999px; display:block; overflow:hidden; } .resList .more:after { content:''; position:absolute; top:71px; right:25px; width:16px; height:12px; background:url('/mobile/img/202003170001/mark_more.png') center right no-repeat; background-size:auto 12px; display:block; } .resList .nodata { padding:16px 0 50px 0; font-size:14px; color:#777; text-align:center; display:block; } .resList:first-child { border-top:0; } /* 모바일 오더 추가*/ .resList.mo h3 strong { position:relative; } .resList.mo h3 strong:after {font-family:'Noto Sans KR',HelveticaNeue,'Helvetica Neue',AppleSDGothicNeo,'Apple SD Gothic Neo',sans-serif;content:"모바일오더"; position:absolute; top:2px; left:120px; min-width:57px; height:20px; padding:0 9px; font-size:10px; line-height:17px; border:1px solid #fe5730;color:#fe5730; box-sizing:border-box; border-radius:50px; } .resList.mo.cb h3 strong:after {border:1px solid #1b9bf0;color:#1b9bf0; } .resInfo { border-top:solid 8px #f7f9fa; padding:39px 25px 45px 25px; } .resInfo h3 { border-bottom:solid 1px #e9e9e9; padding-bottom:16px; font-size:18px; font-weight:500; color:#000; } .resInfo h3 span { font-family:'Roboto'; } .resInfo h3 + .titSort { margin-top:25px; } .resInfo dl { padding-top:10px; } .resInfo dl:after { content:''; display:block; clear:both; } .resInfo dl + dl { margin-top:45px; } .resInfo dt, .resInfo dd { min-height:20px; margin-top:12px; font-size:14px; } .resInfo dt { float:left; width:30%; font-weight:300; color:#444; clear:both; } .resInfo dt.final { width:100%; border-top:solid 1px #e9e9e9; margin-top:15px; padding-top:22px; font-weight:400; color:#000; } .resInfo dd { float:right; width:70%; font-size:14px; color:#000; text-align:right; word-break:break-all; } .resInfo dd > i { font-family:'Roboto'; font-size:16px; } .resInfo dd.final { margin-top:-20px; font-weight:500; color:#000; } .resInfo dd.final > em { margin-bottom:-1px; font-family:'Roboto'; font-size:17px; vertical-align:bottom; display:inline-block; } .resInfo dd.disc, .resInfo dd.discEL { color:#fe5730; } .resInfo .titSort { height:24px; background:#f2f4f6; border-radius:50px; margin-top:55px; padding:0 9px; font-size:12px; font-weight:500; line-height:24px; color:#000; display:inline-block; } .resInfo .titSort i { font-family:'Roboto'; font-size:13px; } .resInfo .titSort + dl { padding-top:5px; } .resInfo .titProd { padding:20px 0 36px 0; font-size:16px; font-weight:400; line-height:24px; color:#000; } .resInfo .intro { margin-top:-1px; font-size:12px; font-weight:300; color:#444; } .resInfo .note { font-size:13px; font-weight:300; padding-top:20px; word-wrap:break-word; word-break:keep-all; } .resInfo .imgQR { width:95px; margin:42px auto 0 auto; font-size:0; line-height:0; text-align:center; } .resInfo .imgQR img { width:100%; } .resInfo .total { line-height:27px; color:#000; } .resInfo .total em { margin-bottom:2px; font-family:'Roboto'; font-size:25px; vertical-align:bottom; display:inline-block; } .resInfo .total .price { float:right; margin-top:-3px; font-size:14px; display:block; } .resInfo .total:after { content:''; display:block; clear:both; } .resInfo .notify { position:relative; margin:35px 0 -1px 0; padding-left:8px; font-size:12px; font-weight:300; line-height:20px; color:#fe5730; } .resInfo .notify:before { content:'-'; position:absolute; top:0; left:0; display:block; } .resInfo .proc { margin:5px 0 23px -7px; } .resInfo .name { font-size:14px; font-weight:400; color:#000; line-height:22px; display:block; } .resInfo .chkPay { position:absolute; top:15px; left:20px; width:56px; height:20px; border:solid 1px #a82cd1; border-radius:50px; font-size:10px; line-height:17px; color:#a82cd1; text-align:center; box-sizing:border-box; } .resInfo .chkPay.not, .resInfo .chkPay.cancel { border-color:#fe5730; color:#fe5730; } .resInfo .chkUse { position:absolute; top:16px; right:20px; font-size:12px; font-weight:400; color:#fe5730; display:block; } .resInfo .chkUse.done { color:#a82cd1; } .resInfo .btnAss { height:37px; margin-top:-37px; text-align:right; } .resInfo .btnAss button { height:25px; background:#f7f9fa; border:solid 1px #d1d1d1; margin-left:2px; padding:0 10px; font-size:11px; color:#666; } .resInfo .btnBox { margin:6px 0 4px 0; } .resInfo .btnBox button { margin-right:2px; padding:0 14px; } .resInfo .contDet { position:relative; z-index:1; background:#f7f9fa; margin:0 -25px -47px -25px; padding:47px 25px 44px 25px; overflow:hidden; } .resInfo .contDet > ul { background:#fff; border:solid 1px #e9e9e9; margin-top:17px; } .resInfo .contDet > ul > li { position:relative; border-top:solid 1px #e9e9e9; padding:65px 20px 46px 20px; word-wrap:break-word; word-break:keep-all; display:block; } .resInfo .contDet > ul > li:first-child { border-top:0; } .resInfo .contDet > ul > li > button { margin:6px 2px 4px 0; padding:0 14px; } .resInfo .contDet > ul ul { margin:10px 0 -1px 0; font-weight:300; line-height:22px; } .resInfo .contDet > ul ul li { position:relative; margin-top:1px; padding-left:7px; } .resInfo .contDet > ul ul li > span { display:inline-block; } .resInfo .contDet > ul ul li:before { content:'-'; position:absolute; top:0; left:0; display:block; } .resInfo .contDet > ul ul li:last-child .proc { margin-bottom:5px; } .resInfo .contDet > ul ul li.tit { color:#fe5730; padding-left:0; } .resInfo .contDet > ul ul li.tit:before { content:none; } .resInfo .contDet button { min-width:98px; height:25px; background:#fff; border:solid 1px #d1d1d1; border-radius:3px; padding:0 15px; font-size:12px; font-weight:300; line-height:23px; color:#222; display:inline-block; } .resInfo .contDet button.btn_useInfo { display:block; margin:3px 0 15px; } .resInfo .contDet button.pay { background:#fe5730; border:0; padding:0 15px; font-weight:400; line-height:25px; color:#fff; } .resInfo .contDet button.used { background:#fe5730; border:0; padding:0 13px; font-weight:500; line-height:25px; color:#fff; border-radius:12px; } .resInfo .contDet .end { color:#999; } .resInfo .contDet .end .proc, .resInfo .contDet .end .usable, .resInfo .contDet .end .nonuse { color:#999; } .resInfo .contDet .usable { color:#a82cd1; } .resInfo .contDet .nonuse { color:#fe5730; } .resInfo .contDet .infoCar { padding-bottom:5px; } .resInfo .contDet .infoCar li { min-height:25px; margin-top:10px; padding-right:110px; line-height:25px; } .resInfo .contDet .infoCar button { position:absolute; top:0; right:0; display:block; } .resInfo .contDet .infoVisitor { margin:5px 0 -1px 0; } .resInfo .contDet .infoVisitor li { line-height:25px; padding-right:110px; } .resInfo .contDet .infoVisitor button { position:absolute; top:0; right:0; display:block; } .resInfo .contDet .infoVisitor li:first-child { padding-right:110px; } .resInfo .contDet .optListLine { width:100%; height:1px; border-top:1px solid #eee; margin-top:10px; } .resInfo .contDet:before { content:''; position:absolute; z-index:10; top:-16px; left:0; right:0; height:16px; background:#fff; display:block; box-shadow:0 2px 3px rgba(0,0,0,.05); } .resInfo .contDet.cb .btnBox .pay { background:#1b9bf0; } .resInfo .contDet.speed .btnBox .pay { background:#554fca; } /* 신규 스피드웨이 추가 */ .resInfo.QR { border-top:0; padding-bottom:55px; } .resInfo.QR h3 { border-bottom:0; } .QRList { margin:33px -25px 0; overflow:hidden; } .QRList ul { position:relative; left:calc(28vw - 10px); overflow:visible !important; } .QRList ul li { width:44vw !important; border:1px solid #CACCCE; background:#FFF; border-radius:5px; text-align:center; box-sizing:border-box; margin:0 10px; opacity:.3; overflow:hidden; } .QRList ul li.active-slide { opacity:1; } .QRList ul li > img { width:78px; height:78px; padding:25px 0; } .QRList ul li > span { display:block; font-family:'Roboto'; font-size:12px; line-height:19px; letter-spacing:-0.2px; color:#666; background:#F7F9FA; border-top:1px solid #CACCCE; padding:5px 0; overflow:hidden; } .QRList .controls { text-align:center; padding-top:10px; margin:0 18px; } .QRList .controls a { display:inline-block; width:17px; height:9px; font-size:0; } .QRList .controls .prev { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='10' viewBox='0 0 17 10' fill='none'%3E%3Cpath d='M0.575736 4.57574C0.341421 4.81005 0.341421 5.18995 0.575736 5.42426L4.39411 9.24264C4.62843 9.47696 5.00833 9.47696 5.24264 9.24264C5.47696 9.00833 5.47696 8.62843 5.24264 8.39411L1.84853 5L5.24264 1.60589C5.47696 1.37157 5.47696 0.991674 5.24264 0.75736C5.00833 0.523045 4.62843 0.523045 4.39411 0.757359L0.575736 4.57574ZM16 5.6C16.3314 5.6 16.6 5.33137 16.6 5C16.6 4.66863 16.3314 4.4 16 4.4L16 5.6ZM1 5.6L16 5.6L16 4.4L1 4.4L1 5.6Z' fill='%23444444'/%3E%3C/svg%3E"); } .QRList .controls .next { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='10' viewBox='0 0 17 10' fill='none'%3E%3Cpath d='M1 4.4C0.668629 4.4 0.4 4.66863 0.4 5C0.4 5.33137 0.668629 5.6 1 5.6L1 4.4ZM16.4243 5.42427C16.6586 5.18995 16.6586 4.81005 16.4243 4.57574L12.6059 0.75736C12.3716 0.523046 11.9917 0.523046 11.7574 0.75736C11.523 0.991675 11.523 1.37157 11.7574 1.60589L15.1515 5L11.7574 8.39411C11.523 8.62843 11.523 9.00833 11.7574 9.24264C11.9917 9.47696 12.3716 9.47696 12.6059 9.24264L16.4243 5.42427ZM1 5.6L16 5.6L16 4.4L1 4.4L1 5.6Z' fill='%23444444'/%3E%3C/svg%3E"); } .QRList .controls .number { display:inline-block; margin:0 18px; } .QRList .controls .number .cNum { font-weight:500; } .QRList .controls .number .tNum { color:#999; } /* 모바일 오더 추가*/ .resInfo.mo { border-top:0; } .resInfoBox { border:1px solid #E9E9E9; background-color:#F4F5F6; border-radius:5px; padding:20px; margin-top:20px; } .resInfoBox h3 { position:relative; font-size:15px; letter-spacing:-0.6px; } .resInfoBox h3 i { position:absolute; top:0; right:0; font-size:12px; font-weight:500; color:#9855CD; } .resInfoBox .btnAss button { position:relative; width:70px; padding:1px 12px; font-size:11px; color:#fff; background-color:#323436; border-radius:3px; border:0; } .resInfoBox .notice { margin-top:20px; } .resInfoBox .notice li { position:relative; font-size:12px; line-height:19px; font-weight:300; color:#666; letter-spacing:-0.48px; margin-top:9px; padding-left:7px; word-wrap:break-word; word-break:keep-all; } .resInfoBox .notice li:before { content:'-'; position:absolute; top:0; left:0; display:inline-block; } .resInfoBox .link { background:url('/mobile/img/202003170001/mark_move.png') right center no-repeat; background-size:6px auto; margin:13px 0 -4px 0; padding-right:15px; font-size:12px; font-weight:400; color:#000; display:block; text-align:right; } .resTrans { padding:0 25px 50px 25px; } .resTrans a, .resTrans button { height:55px; border-radius:100px; font-size:15px; line-height:51px; text-align:center; display:block; overflow:hidden; box-sizing:border-box; } .resTrans .btnList { width:100%; border:solid 2px #000; } .resTrans .btnCancel { float:left; width:49%; background:#edeff2; } .resTrans .btnCancel + .btnList { float:right; width:49%; } .resTrans:after { content:''; display:block; clear:both; } /* 추천상품 */ .prodRecom { border-top:solid 10px #f7f9fa; padding:0 25px 70px 25px; overflow:hidden; } .prodRecom li { position:relative; overflow:hidden; } .prodRecom li span { display:block; } .prodRecom .tit { padding-top:58px; font-size:14px; font-weight:100; color:#000; display:block; } .prodRecom .tit b { font-size:22px; font-weight:400; line-height:25px; display:block; } .prodRecom .pic { position:relative; z-index:1; font-size:0; line-height:0; } .prodRecom .theme { margin-top:11px; color:#666; display:block; } .prodRecom .recomList li { background:#fff; margin-top:20px; border-radius:7px; box-shadow:3px 3px 15px rgba(0,0,0,.1); } .prodRecom .recomList .pic img { width:100%; } .prodRecom .recomList .txt { height:50px; padding:0 39% 0 9.5%; font-size:14px; font-weight:500; line-height:50px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; } .prodRecom .recomList .sort { position:absolute; right:9.5%; margin-top:16px; font-size:10px; } .prodRecom .themeList { width:145%; margin:22px -25px 0 0; overflow:hidden; } .prodRecom .themeList ul { height:39vw; margin-left:-15px; } .prodRecom .themeList ul li { float:left; width:33.33%; height:100%; } .prodRecom .themeList ul li a { position:relative; height:100%; border-radius:7px; margin-left:15px; display:block; overflow:hidden; } .prodRecom .themeList ul:after { content:''; display:block; clear:both; } .prodRecom .themeList .pic { height:100%; } .prodRecom .themeList .pic img { height:100%; } .prodRecom .themeList .txt { position:absolute; z-index:2; left:10px; right:10px; bottom:17px; font-weight:500; color:#fff; text-align:center; word-wrap:break-word; word-break:keep-all; } /* APP 배너 */ .bannerApp { position:relative; border-top:solid 1px #e9e9e9; box-sizing:border-box; } .bannerApp .imgBox { position:relative; z-index:1; font-size:0; line-height:0; } .bannerApp .imgBox img { width:100%; } .bannerApp .txtBox { position:absolute; z-index:2; top:15.3vw; left:6.6vw; font-size:3.9vw; font-weight:100; line-height:5.6vw; color:#444; letter-spacing:-0.3vw; } .bannerApp .txtBox a { background:url('/mobile/img/202003170001/btn_down.png') 84.5% 45% no-repeat #333; background-size:auto 53.2%; border-radius:100px; margin-top:11.8vw; padding:1.9vw 18.5vw 2.3vw 5vw; font-size:3.7vw; line-height:5.4vw; color:#fff; display:inline-block; } .bannerApp .txtBox > i { margin-bottom:4.4vw; font-size:5.85vw; line-height:6.7vw; color:#fe5730; display:block; } .bannerApp .txtBox span { display:block; } .bannerApp .txtBox.cb a { margin-top:6.1vw; } .bannerApp .txtBox.cb > i { color:#1b9bf0; } .bannerApp .txtBox.speed > i { color:#554fca; } /* 신규 스피드웨이 추가 */ /* 쿠폰 */ .couponList { padding:38px 24px 0 25px; } .couponList .usePlace { margin-bottom:40px; text-align:center; } .couponList .usePlace a { margin:0 9%; font-size:17px; font-weight:500; color:#000; vertical-align:top; display:inline-block; } .couponList .usePlace a:after { content:''; width:7px; height:7px; background-repeat:no-repeat; background-size:auto 100%; border-radius:10px; margin:7px auto 0 auto; display:block; opacity:0; overflow:hidden; } .couponList .usePlace .now:after { background-image:url('/mobile/img/202003170001/mark_cpdot.png'); opacity:1; } .couponList .usePlace .el.now { color:#fe5730; } .couponList .usePlace .el.now:after { background-position:left center; } .couponList .usePlace .cb.now { color:#1b9bf0; } .couponList .usePlace .cb.now:after { background-position:right center; } .couponList .usePlace .speed.now { color:#554fca; } /* 신규 스피드웨이 추가 */ .couponList .sortPick { position:relative; z-index:2; float:left; width:50%; height:40px; background:#fff; border:solid 1px #e9e9e9; margin:0 -1px -20px 0; box-sizing:border-box; } .couponList .sortPick ul { position:absolute; z-index:10; top:100%; left:-1px; right:-1px; background:#fff; border:solid 1px #e9e9e9; padding:10px 0; display:none; box-sizing:border-box; } .couponList .sortPick ul li { padding:7px 20px; font-size:12px; font-weight:300; color:#777; } .couponList .sortPick ul li.on { color:#000; } .couponList .sortPick span { height:100%; padding-left:20px; font-size:12px; font-weight:300; line-height:38px; color:#000; display:block; } .couponList .sortPick:before { content:''; position:absolute; top:16px; right:20px; width:11px; height:6px; background:url('/mobile/img/202003170001/mark_select.png') right top no-repeat; background-size:100% auto; display:block; } .couponList .listBox { position:relative; z-index:1; background:#f7f9fa; margin:0 -24px 0 -25px; padding:42px 25px 60px 25px; clear:both; } .couponList .listBox li { position:relative; width:100%; background:#fff; border:solid 1px #e0e0e0; border-radius:10px; margin-top:18px; padding:13px 0; box-shadow:0 3px 0 #edeff0; } .couponList .listBox li:after, .couponList .listBox li:before { content:''; position:absolute; z-index:1; right:39px; width:14px; height:10px; background-image:url('/mobile/img/202003170001/bg_coupon.png'); background-repeat:no-repeat; background-size:auto 20px; margin-left:-6px; display:block; } .couponList .listBox li:after { bottom:-4px; background-position:left bottom; } .couponList .listBox li:before { top:-1px; height:8px; background-position:left top; } .couponList .listBox li > a { border-radius:10px; margin:-13px 0; padding:13px 0; display:block; overflow:hidden; } .couponList .listBox strong { margin-right:25px; font-size:16px; font-weight:500; line-height:26px; color:#000; display:block; } .couponList .listBox .flag { position:absolute; left:165px; bottom:24px; height:23px; background:#fe5730; border-radius:50px; padding:0 11px; font-size:10px; line-height:22px; color:#fff; } .couponList .listBox .flag i { font-family:'Roboto'; font-size:11px; } .couponList .listBox .intro { margin-top:5px; line-height:20px; display:block; } .couponList .listBox .date { margin-top:22px; font-family:'Roboto'; font-size:12px; font-weight:300; display:block; } .couponList .listBox .cont { position:relative; padding:11px 45px 12px 25px; font-weight:300; color:#777; word-wrap:break-word; word-break:keep-all; display:block; } .couponList .listBox .cont:after { content:''; position:absolute; top:-15px; right:0; bottom:-15px; width:45px; background:url('/mobile/img/202003170001/bg_coupon.png') -17px center no-repeat #f7f9fa; background-size:auto 20px; display:block; } .couponList .listBox .cont:before { content:''; position:absolute; top:-15px; right:45px; bottom:-15px; border-left:dashed 1px #e9e9e9; display:block; } .couponList .listBox .end .cont { opacity:.5; } .couponList .listBox .end .flag { background:#ededed !important; color:#999; } .couponList .listBox .nodata { margin-top:0; padding:45px 0; font-size:14px; color:#777; text-align:center; } .couponList .listBox .nodata:after, .couponList .listBox .nodata:before { display:none; } .couponList .listBox.cb .flag { background:#1b9bf0; } .couponList .listBox.speed .flag { background:#554fca; } /* 신규 스피드웨이 추가 */ .couponNb { background:#f7f9fa; padding:0 25px 35px 25px; } .couponNb dt { margin:22px 0 8px 0; color:#000; } .couponNb dd { position:relative; margin-top:4px; padding-left:5px; font-weight:300; line-height:20px; color:#777; word-wrap:break-word; word-break:keep-all; } .couponNb dd:before { content:''; position:absolute; top:8px; left:0; width:2px; height:2px; background:#777; border-radius:5px; overflow:hidden; display:block; } .couponNb .tit { padding:2px 0 4px 0; font-size:16px; font-weight:500; color:#000; display:block; } /* 이용안내 */ .helpLink { margin:0 20px 0 26px; padding-top:30px; } .helpLink li { position:relative; z-index:1; float:left; width:33.33%; border:solid 1px #e9e9e9; margin-left:-1px; text-align:center; display:table; box-sizing:border-box; } .helpLink li a { height:48px; padding:0 3px; font-size:12px; font-weight:300; line-height:15px; letter-spacing:-0.5px; color:#777; vertical-align:middle; word-wrap:break-word; word-break:keep-all; display:table-cell; } .helpLink li.on { z-index:2; border:solid 2px #000; } .helpLink li.on a { height:46px; font-weight:500; color:#000; } .helpLink li:nth-child(2) { width:33.34%; } .helpLink:after { content:''; display:block; clear:both; } .helpBox { margin:0 25px; padding:54px 0 100px 0; word-wrap:break-word; word-break:keep-all; } .helpBox h3 { padding-bottom:37px; font-size:28px; font-weight:200; line-height:35px; color:#000; } .helpBox h3 span { display:block; } .helpBox h4 { color:#000; } .helpBox .guide { position:relative; z-index:1; border-top:solid 1px #e9e9e9; border-bottom:solid 1px #e9e9e9; margin-top:-1px; } .helpBox .guide h4 { height:60px; background:url('/mobile/img/202003170001/mark_arrow_show.png') right 27px no-repeat; background-size:auto 41px; font-size:15px; font-weight:300; line-height:60px; } .helpBox .guide .cont { border-top:solid 2px #000; padding:45px 0 55px 13px; display:none; } .helpBox .guide .cont > li { list-style:decimal; margin-top:10px; font-weight:300; line-height:21px; color:#222; } .helpBox .guide .cont > li li, .helpBox .guide .cont > li small { position:relative; margin-top:5px; padding-left:7px; font-size:12px; line-height:20px; color:#444; display:block; } .helpBox .guide .cont > li li:before, .helpBox .guide .cont > li small:before { content:'-'; position:absolute; top:0; left:0; display:inline-block; } .helpBox .guide .cont > li ul { padding-top:5px; } .helpBox .guide.active { z-index:2; border-bottom:solid 1px #000; } .helpBox .guide.active .cont { display:block; } .helpBox .guide.active h4 { background-position:right -8px; font-weight:400; } .helpBox .faq { border-bottom:solid 1px #e9e9e9; padding-bottom:20px; } .helpBox .faq dt, .helpBox .faq dd { position:relative; line-height:21px; } .helpBox .faq dt:before, .helpBox .faq dd:before { position:absolute; left:0; width:21px; height:21px; border-radius:50px; font-family:'Roboto'; color:#fff; text-align:center; display:block; } .helpBox .faq dt { min-height:21px; border-top:solid 1px #e9e9e9; margin-top:20px; padding:20px 25px 0 30px; font-weight:300; letter-spacing:-0.5px; } .helpBox .faq dt:after { content:''; position:absolute; top:50%; right:0; width:21px; height:6px; background:url('/mobile/img/202003170001/mark_arrow_show.png') right top no-repeat; background-size:auto 41px; margin-top:6px; } .helpBox .faq dt:before { content:'Q'; top:21px; background:#333; } .helpBox .faq dt.on { font-weight:400; } .helpBox .faq dt.on:after { display:none; } .helpBox .faq dd { width:0; height:0; font-weight:300; overflow:hidden; } .helpBox .faq dd a { color:#444; } .helpBox .faq dd > p { margin-top:10px; } .helpBox .faq dd mark { background:none; color:#e02f2f; } .helpBox .faq dd span { display:inline-block; } .helpBox .faq dd.active { width:auto; height:auto; min-height:21px; margin-top:10px; padding-left:30px; overflow:inherit; } .helpBox .faq dd:before { content:'A'; top:0; background:#fe5730; } .helpBox .faq table { width:100%; margin:5px 0 25px 0; } .helpBox .faq table th, .helpBox .faq table td { border:solid 1px #e9e9e9; padding:5px 3px; font-size:8px; font-weight:300; line-height:14px; text-align:center; } .helpBox .faq table td span { margin:2px 0; } .helpBox .faq table tr th:first-child { width:34%; } .helpBox .faq table span { display:inline-block; } .helpBox .faq .info, .helpBox .faq .add { font-size:11px; line-height:20px; display:block; } .helpBox .faq .info { margin-top:10px; } .helpBox .faq .info + .info { margin-top:5px; } .helpBox .faq .add { margin-top:7px; } .helpBox .faq .cardCall { margin-right:-10px; } .helpBox .faq .cardCall span { width:40%; min-width:115px; max-width:130px; margin-right:10px; } .helpBox .faq .imgbox { border:solid 1px #e9e9e9; margin:10px 0 25px 0; padding:15px; font-size:0; line-height:0; text-align:center; display:block; } .helpBox .faq .imgbox img { max-width:100%; } .aboutUs { width:100%; max-width:720px; height:162.5vw; max-height:1200px; background:url('/mobile/img/202003170001/aboutus_frame.png') center top no-repeat; background-size:100% auto; margin:20px auto 0 auto; } .aboutUs h3 { width:0; height:0; font-size:0; line-height:0; overflow:hidden; } .aboutUs .cont { width:61.6%; height:100%; margin:0 auto; overflow:hidden; } .aboutUs .cont p { position:relative; width:100%; height:100%; font-size:0; line-height:0; text-align:center; overflow:hidden; } .aboutUs .cont p img { width:100%; } .aboutUs .cont span { border-top:solid 1px #e9e9e9; padding:3.2vw 0 17px 22.5%; font-size:2.7vw; line-height:18px; color:#000; text-align:left; display:block; box-sizing:border-box; } .aboutUs .cont span:after { content:''; width:4.5vw; height:4.5vw; background:url('/mobile/img/202003170001/btn_reserve.png') 52% center no-repeat #fe5730; background-size:26% auto; border-radius:100px; margin:-2px 0 0 1.3vw; vertical-align:middle; display:inline-block; overflow:hidden; } .aboutUs .bx-wrapper { width:61.6%; padding-top:20%; } .aboutUs .bx-viewport { height:auto !important; } /* sub :연간 회원 -------------------------------------------------------------------------*/ /* 상품상세 */ .viewInfo .contBox .info { padding:0; font-size:13px; line-height:20px; display:block; } .viewInfo .contBox .info:before { display:none; } .viewInfo .contBox .guide { border-bottom:solid 1px #e9e9e9; margin-top:35px; padding-bottom:31px; } .viewInfo .contBox .imgBox { margin-top:25px; padding:0; font-size:0; line-height:0; display:block; } .viewInfo .contBox .imgBox img { height:125px; } .viewInfo .contBox .imgBox:before { display:none; } .viewInfo .contBox hr { height:7px; background:#f7f9fa; border:0; margin:35px -25px; padding:0; } .viewInfo .contBox table { width:100%; border:solid 1px #e9e9e9; margin:17px 0 35px 0; } .viewInfo .contBox table th, .viewInfo .contBox table td { border:solid 1px #e9e9e9; padding:8px 0 9px 0; color:#000; text-align:center; } .viewInfo .contBox thead th { background:#f7f9fa; font-weight:500; } .viewInfo .contBox tbody th { font-weight:normal; } .viewInfo .contBox tbody td b { font-weight:500; } /* 가입옵션 */ .ymJoinInfo { position:fixed; z-index:50; top:50px; left:0; right:0; bottom:0; display:none; opacity:0; } .ymJoinInfo:before { content:''; position:fixed; z-index:1; top:0; left:0; right:0; bottom:0; background:#000; opacity:.7; display:block; } .ymJoinInfo .btnClose { position:absolute; z-index:11; top:-47px; left:50%; width:43px; height:43px; background:url('../img/202003170001/btn_close_buy.png') center center no-repeat #000; background-size:100% auto; border-radius:100px; margin-left:-22px; font-size:0; line-height:0; text-indent:-9999px; display:block; overflow:hidden; } .ymJoinInfo .optBox { position:relative; z-index:2; height:100%; background:#fff; border-radius:15px 15px 0 0; padding:0 0 100px 0; box-sizing:border-box; overflow-x:hidden; overflow-y:scroll; -webkit-overflow-scrolling:touch; scrollbar-track-color:transparent; scrollbar-face-color:#9da0a1; } .ymJoinInfo .optBox:after, .ymJoinInfo .optBox:before { content:''; position:fixed; z-index:50; left:0; right:0; height:35px; background:url('../img/202003170001/bg_buyinfo.png'); background-repeat:repeat-x; background-size:5px auto; display:none; overflow:hidden; } .ymJoinInfo .optBox:after { bottom:50px; background-position:center bottom; display:block; } .ymJoinInfo .optBox:before { top:50px; background-position:center top; border-radius:20px 20px 0 0; } .ymJoinInfo .optBox::-webkit-scrollbar { width:4px; background-color:transparent; -webkit-appearance:none; } .ymJoinInfo .optBox::-webkit-scrollbar:vertical { width:4px; background-color:transparent; } .ymJoinInfo .optBox::-webkit-scrollbar-button { width:0; height:15px; } .ymJoinInfo .optBox::-webkit-scrollbar-button:end:increment { height:50px; } .ymJoinInfo .optBox::-webkit-scrollbar-track { background-color:transparent; } .ymJoinInfo .optBox::-webkit-scrollbar-thumb { background-color:#9da0a1; border-radius:10px; opacity:.5; } .ymJoinInfo .optBox.end:after { display:none; } .ymJoinInfo .optBox.move:before { display:block; } .ymJoinInfo .optBox ul { margin:0 21px 0 25px; padding-top:25px; } .ymJoinInfo .optBox ul li { position:relative; background:#fff; border:solid 1px #e9e9e9; margin-top:10px; padding:13px 20px; font-size:14px; font-weight:500; color:#777; word-wrap:break-word; word-break:keep-all; box-sizing:border-box; } .ymJoinInfo .optBox ul li small { margin:2px 0 -1px 0; font-size:12px; font-weight:300; display:block; } .ymJoinInfo .optBox ul li mark { position:absolute; top:10px; right:9px; height:25px; background:#f3f3f3; border-radius:50px; padding:0 7px; font-size:12px; font-weight:300; line-height:25px; color:#666; display:block; } .ymJoinInfo .optBox ul li:first-child { margin-top:0; } .ymJoinInfo .optBox ul li.on { border:solid 2px #9855cd; padding:12px 19px; color:#000; } .ymJoinInfo .optBox ul li.on small { color:#9855cd; } .ymJoinInfo .optBox ul li.on mark { top:9px; right:8px; } .ymJoinInfo .optBox .tit { border-bottom:solid 8px #f7f9fa; padding:22px 0 12px 0; font-size:12px; font-weight:300; color:#444; text-align:center; } .ymJoinInfo .optBox .itemTit { position:relative; border-bottom:solid 1px #e9e9e9; margin:38px 21px 0 25px; padding:0 130px 12px 0; font-size:15px; font-weight:500; color:#000; display:block; } .ymJoinInfo .optBox .itemTit i { position:absolute; top:0; right:0; font-size:12px; font-weight:300; color:#666; display:block; } .ymJoinInfo .assoPick li i { font-weight:300; } .ymJoinInfo .assoPick mark + span { margin-right:80px; display:block; } /* 정책동의 */ .ymPolicy { padding:25px 25px 80px 25px; } .ymPolicy label { position:relative; float:right; font-size:0; line-height:0; vertical-align:bottom; display:block; overflow:hidden; } .ymPolicy label i { width:20px; height:20px; background:url('../img/202003170001/mark_check.png') left center no-repeat; background-size:auto 100%; border:solid 1px #d1d1d1; border-radius:4px; display:block; box-sizing:border-box; } .ymPolicy input { position:absolute; top:-15px; left:-15px; width:0; height:0; opacity:0; } .ymPolicy input:checked + i { background-position:right center; background-color:#9855cd; border:0; } .ymPolicy .intro { margin-bottom:50px; font-size:12px; line-height:21px; color:#666; word-wrap:break-word; word-break:keep-all; } .ymPolicy .intro i { position:relative; padding-left:15px; display:block; } .ymPolicy .intro i:before { content:'※'; position:absolute; top:0; left:0; } .ymPolicy .subj { position:relative; margin-top:30px; font-weight:300; line-height:20px; color:#000; overflow:hidden; } .ymPolicy .subj:after { content:''; display:block; clear:both; } .ymPolicy .total { position:relative; border-bottom:solid 1px #000; padding-bottom:4px; line-height:26px; color:#222; overflow:hidden; } .ymPolicy .total:after { content:''; display:block; clear:both; } .ymPolicy .chkInfo { position:relative; border-top:solid 1px #000; margin-top:30px; padding-top:15px; line-height:20px; color:#222; overflow:hidden; } .ymPolicy .chkInfo:after { content:''; display:block; clear:both; } .ymPolicy .txtbox { max-height:205px; border:solid 1px #e9e9e9; margin-top:12px; padding:15px; font-size:12px; font-weight:300; line-height:21px; word-wrap:break-word; word-break:keep-all; box-sizing:border-box; overflow-y:scroll; } .ymPolicy .txtbox b { font-weight:normal; color:#9855cd; } .ymPolicy .txtbox dt { margin-top:35px; font-weight:400; color:#000; } .ymPolicy .txtbox dd .notify { margin-top:5px; } .ymPolicy .txtbox dd, .ymPolicy .txtbox > ul > li { margin-top:10px; } .ymPolicy .txtbox dt:first-child, .ymPolicy .txtbox > ul > li:first-child { margin-top:0; } .ymPolicy .notify { position:relative; margin-top:15px; padding-left:13px; } .ymPolicy .notify:before { content:'※'; position:absolute; top:0; left:0; } .ymPolicy .refund { margin-top:5px; } .ymPolicy .refund span { position:relative; margin-left:15px; padding-left:8px; display:block; } .ymPolicy .refund span:before { content:'-'; position:absolute; top:0; left:0; } .ymPolicy .listType1 { margin:5px 0 0 8px; } .ymPolicy .listType1 li { position:relative; padding-left:8px; } .ymPolicy .listType1 li:before { content:'-'; position:absolute; top:0; left:0; } .ymPolicy .listType2 li { margin-top:7px; } .ymPolicy .listType3 { margin:5px 0 0 15px; } .ymPolicy .listType3 li { list-style:decimal; list-style-position:inside; } /* 가입종류 */ .ymJoinType { border-bottom:solid 8px #f7f9fa; padding:27px 25px 50px 25px; } .ymJoinType h3 { margin-bottom:12px; font-size:15px; font-weight:500; color:#000; } .ymJoinType ul { margin-left:-5px; } .ymJoinType ul:after { content:''; display:block; clear:both; } .ymJoinType ul li { float:left; width:50%; padding-left:5px; display:block; box-sizing:border-box; overflow:hidden; } .ymJoinType ul li a { height:48px; border:solid 1px #e9e9e9; font-size:14px; font-weight:300; color:#666; line-height:48px; text-align:center; display:block; } .ymJoinType ul li.on a { height:46px; border:solid 2px #9855cd; font-weight:500; line-height:46px; color:#9855cd; } .ymJoinType ul li:last-child { width:100%; } .ymJoinType ul li + li:last-child { width:50%; } /* 가입자 정보 입력 */ .ymJoinWrite { padding:48px 25px 50px 25px; } .ymJoinWrite h3 { border-bottom:solid 1px #000; margin-bottom:30px; padding-bottom:12px; font-size:15px; font-weight:500; color:#000; } .ymJoinWrite .notify { margin:15px 0 -6px 0; font-size:12px; color:#fe5730; line-height:21px; word-wrap:break-word; word-break:keep-all; text-align:right; } .ymJoinWrite .photo { position:relative; z-index:1; min-height:122px; margin-bottom:33px; padding-left:115px; } .ymJoinWrite .photo button { background:url('../img/202003170001/mark_move.png') right center no-repeat #fff; background-size:6px auto; margin:17px 0 0 8px; padding-right:15px; font-size:12px; color:#666; } .ymJoinWrite .photo .info { font-size:12px; font-weight:300; line-height:21px; color:666; word-wrap:break-word; word-break:keep-all; } .ymJoinWrite .photo .info li { position:relative; padding-left:8px; } .ymJoinWrite .photo .info li:before { content:'-'; position:absolute; top:0; left:0; } .ymJoinWrite .photo .picBox { position:absolute; top:0; left:0; width:95px; height:105px; background:url('../img/202003170001/icon_photo.png') center center no-repeat #d4d4d4; background-size:43px 43px; font-size:0; line-height:0; } .ymJoinWrite .photo .picBox input { position:absolute; z-index:50; top:0; left:0; width:100%; height:110px; background:transparent; font-size:0; line-height:0; opacity:0; } .ymJoinWrite .photo .picBox > p { position:relative; z-index:10; width:100%; height:100%; text-align:center; overflow:hidden; } .ymJoinWrite .photo .picBox > p img { width:100%; } .ymJoinWrite .photo .picBox button { position:absolute; z-index:90; top:-10px; right:-8px; width:22px; height:22px; background:url('../img/202003170001/mark_opt_x.png') center center no-repeat #fff; background-size:8px auto; border:solid 1px #e9e9e9; border-radius:50px; margin:0; padding:0; font-size:0; line-height:0; display:block; overflow:hidden; box-shadow:0 5px 5px rgba(0,0,0,.1); } .ymJoinWrite .photo .picBox .nodata { background:url('../img/202003170001/icon_noimg.png') center center no-repeat #d4d4d4; background-size:43px auto; } .ymJoinWrite .photo .picBox .nodata + p { display:none; } .ymJoinWrite .sameChk { position:relative; float:right; height:20px; margin-bottom:10px; padding-left:25px; display:block; overflow:hidden; } .ymJoinWrite .sameChk span { height:20px; line-height:20px; color:#666; display:inline-block; } .ymJoinWrite .sameChk span:before { content:''; position:absolute; top:0; left:0; width:20px; height:20px; background:url('../img/202003170001/mark_check.png') left center no-repeat; background-size:auto 100%; border:solid 1px #d1d1d1; border-radius:3px; display:block; box-sizing:border-box; } .ymJoinWrite .sameChk input { position:absolute; top:0; left:-20px; width:0; height:0; opacity:0; } .ymJoinWrite .sameChk input:checked + span:before { background-color:#9855cd; background-position:right center; border:0; } .ymJoinWrite .searchApp { float:left; height:20px; background:none; border-bottom:solid 1px #9855cd; font-size:12px; color:#9855cd; } .ymJoinWrite .infoBox { width:100%; border-top:solid 1px #e9e9e9; clear:both; } .ymJoinWrite .infoBox dt { height:60px; line-height:60px; color:#666; clear:both; } .ymJoinWrite .infoBox dd { min-height:60px; border-bottom:solid 1px #e9e9e9; margin-top:-60px; padding:0 0 0 80px; text-align:right; overflow:hidden; } .ymJoinWrite .infoBox input { height:60px; background:#fff; border:0; padding:0 !important; font-family:'Roboto'; font-size:15px; color:#000; text-align:right; } .ymJoinWrite .infoBox input::placeholder { font-family:'Noto Sans KR'; font-size:12px; font-weight:300; color:#999; } .ymJoinWrite .infoBox input::-moz-placeholder { font-family:'Noto Sans KR'; font-size:12px; font-weight:300; color:#999; } .ymJoinWrite .infoBox input::-ms-input-placeholder { font-family:'Noto Sans KR'; font-size:12px; font-weight:300; color:#999; } .ymJoinWrite .infoBox input::-webkit-input-placeholder { font-family:'Noto Sans KR'; font-size:12px; font-weight:300; color:#999; } .ymJoinWrite .infoBox select { width:19%; max-width:60px; height:60px; background:url('../img/202003170001/mark_select.png') 95.5% 27px no-repeat transparent; background-size:11px auto; border:0; padding:0 18px 0 0; font-family:'Roboto'; font-size:14px; color:#000; vertical-align:bottom; appearance:none; -moz-appearance:none; -webkit-appearance:none; } .ymJoinWrite .infoBox button { min-width:60px; height:25px; background:#fff; border:solid 1px #d5d5d5; border-radius:25px; margin:6px 0 10px 0; padding:0 7px; font-size:12px; color:#999; letter-spacing:-0.5px; text-align:center; vertical-align:middle; display:inline-block; } .ymJoinWrite .infoBox button.active { border-color:#9e9e9e; color:#000; } .ymJoinWrite .infoBox .sep select, .ymJoinWrite .infoBox .addr select, .ymJoinWrite .infoBox .name input, .ymJoinWrite .infoBox .birthday input { font-family:'Noto Sans KR'; font-size:14px; } .ymJoinWrite .infoBox .sign { margin-top:-5px; font-weight:bold; vertical-align:middle; display:inline-block; } .ymJoinWrite .infoBox .tip { position:relative; z-index:2; width:14px; height:14px; background:url('../img/202003170001/mark_tip.png') 6px center no-repeat #fff; background-size:auto 10px; border:solid 2px #e1e1e1; border-radius:100px; margin:-2px 0 0 5px; font-size:0; line-height:0; vertical-align:middle; display:inline-block; } .ymJoinWrite .infoBox .tip > span { position:absolute; z-index:10; top:31px; left:-51px; width:67vw; min-width:220px; max-width:270px; background:#fff; border:solid 1px #b6b6b6; border-radius:7px; padding:16px 20px; font-size:12px; font-weight:300; line-height:19px; color:#444; word-wrap:break-word; word-break:keep-all; box-sizing:border-box; display:none; } .ymJoinWrite .infoBox .tip > span b { margin:17px 0 4px 0; font-size:12px; color:#000; display:block; } .ymJoinWrite .infoBox .tip > span:before { content:''; position:absolute; top:-14px; left:50px; width:17px; height:14px; background:url('../img/202003170001/mark_tooltip.png') left bottom no-repeat; background-size:auto 100%; display:block; } .ymJoinWrite .infoBox .tip.active > span { display:block; } .ymJoinWrite .infoBox .sep { float:right; width:70px; margin-top:-61px; padding-left:0; } .ymJoinWrite .infoBox .sep select { width:100%; max-width:none; padding-left:15px; } .ymJoinWrite .infoBox .addr select { width:42%; max-width:none; padding-left:10px; } .ymJoinWrite .infoBox .addr select:first-child { margin-right:20px; } .ymJoinWrite .infoBox .name { margin-right:80px; } .ymJoinWrite .infoBox .name input { width:100%; } .ymJoinWrite .infoBox .email input { width:100%; } .ymJoinWrite .infoBox .phone input { width:17%; min-width:42px; max-width:130px; text-align:center; } .ymJoinWrite .infoBox .phone select { min-width:42px; } .ymJoinWrite .infoBox .phone button { margin-left:5px; } .ymJoinWrite .infoBox .certify { position:relative; } .ymJoinWrite .infoBox .certify input { width:50%; margin-right:10px; } .ymJoinWrite .infoBox .certify > span { position:absolute; top:0; color:#9855cd; line-height:60px; display:block; } .ymJoinWrite .infoBox .certify .time { left:70px; } .ymJoinWrite .infoBox .certify .finish { right:0; background:#fff; padding:0 10px; } .ymJoinWrite .infoBox .birthday { position:relative; margin-right:80px; } .ymJoinWrite .infoBox .birthday input { position:relative; z-index:2; width:100%; background:#fff; appearance:none; -moz-appearance:none; -webkit-appearance:none; } .ymJoinWrite .infoBox .birthday button { position:absolute; z-index:1; top:15px; right:0; width:20px; min-width:auto; height:20px; background:url('../img/202003170001/icon_calendar.png') -88px -3px no-repeat #fff; background-size:auto 21px; border:0; border-radius:0; font-size:0; display:block; } .ymJoinWrite .infoBox .memnum { padding-left:115px; } .ymJoinWrite .infoBox .memnum input { width:51%; margin-right:10px; } .ymJoinWrite .infoBox.rejoin .name, .ymJoinWrite .infoBox.rejoin .birthday { margin-right:0; } .ymJoinWrite .certifyNote { margin:15px 0 -6px 0; font-size:12px; color:#666; word-wrap:break-word; word-break:keep-all; } .ymJoinWrite .certifyNote .notify { margin-top:7px; text-align:left; } /* 부모동의 */ .ymJoinAgree { border-top:solid 8px #f7f9fa; padding:13px 25px 50px 25px; } .ymJoinAgree h3 { margin-top:35px; font-size:15px; font-weight:500; color:#000; } .ymJoinAgree label { position:relative; margin-top:33px; border-bottom:solid 1px #e9e9e9; font-weight:300; color:#666; display:block; overflow:hidden; } .ymJoinAgree label i { height:35px; display:block; } .ymJoinAgree label i:after { content:''; position:absolute; top:0; right:0; width:20px; height:20px; background:url('../img/202003170001/mark_check.png') left center no-repeat; background-size:auto 100%; border:solid 1px #d1d1d1; border-radius:3px; display:block; box-sizing:border-box; } .ymJoinAgree input { position:absolute; top:-15px; left:-15px; width:0; height:0; } .ymJoinAgree input:checked + i:after { background-color:#9855cd; background-position:right center; border:0; } .ymJoinAgree .notify { margin:15px 0 -6px 0; font-size:12px; color:#fe5730; line-height:21px; word-wrap:break-word; word-break:keep-all; text-align:right; } /* 상품선택 */ .ymJoinProd { border-top:solid 8px #f7f9fa; padding:48px 25px 50px 25px; } .ymJoinProd h3 { font-size:15px; font-weight:500; color:#000; } .ymJoinProd ul { padding-top:3px; } .ymJoinProd ul li { position:relative; margin-top:10px; overflow:hidden; overflow:hidden; } .ymJoinProd label span { border:solid 1px #e9e9e9; padding:15px 19px; font-size:14px; font-weight:300; line-height:23px; color:#777; display:block; } .ymJoinProd label strong { margin:3px 0 -1px 0; font-weight:400; display:block; } .ymJoinProd label strong i { font-family:'Roboto',arial; font-size:15px; } .ymJoinProd input { position:absolute; top:-15px; left:-15px; width:0; height:0; } .ymJoinProd input:checked + span { border:solid 2px #9855cd; padding:14px 18px; font-weight:400; color:#000; } .ymJoinProd input:checked + span strong { color:#9855cd; } .ymJoinProd .link { background:url('../img/202003170001/mark_move.png') right center no-repeat #fff; background-size:6px auto; margin:20px 0 -4px 0; padding-right:15px; font-size:12px; font-weight:400; color:#000; vertical-align:bottom; display:inline-block; } .ymJoinProd .notify { margin:15px 0 -6px 0; font-size:12px; color:#fe5730; line-height:21px; word-wrap:break-word; word-break:keep-all; text-align:right; } .ymJoinProd + hr { margin:0 25px 25px;width:calc(100% - 50px); height:1px; background:#000; border:none; } /* 가입대상 */ .ymJoinPerson { padding:30px 20px 40px 25px; background:#F6F9FA} .ymJoinPerson b { display:block; margin-bottom:10px; font-size:13px;color:#666; font-weight:500; } .ymJoinPerson .list li { margin:0; padding-left:15px; border:1px solid #E3E3E3; border-radius:5px; background:#fff; margin-bottom:5px;; } .ymJoinPerson .list li a {height:50px; } .ymJoinPerson .list li { position:relative; } .ymJoinPerson .list li a { position:relative; height:50px; font-size:14px; color:#666; font-weight:300; line-height:50px; display:block;width:90%;white-space:nowrap;overflow:hidden; text-overflow:ellipsis; } .ymJoinPerson .list li button { position:absolute; z-index:2; top:50%; right:15px; width:12px; height:12px; background:url('/mobile/img/202003170001/mark_ymadd.png') right bottom no-repeat; background-size:auto 19px; margin-top:-7px; font-size:0; line-height:0; display:block; overflow:hidden; } .ymJoinPerson .btn_group { margin-bottom:0; } /* 가입자 추가 */ .ymJoinAdd { border-top:solid 8px #f7f9fa; padding:50px 25px; text-align:center; } .ymJoinAdd button { height:38px; background:#fff; border:solid 1px #d5d5d5; border-radius:100px; padding:0 30px; line-height:38px; color:#000; } /* 가입자 목록 */ .ymJoinList { padding:0 25px; } .ymJoinList li { position:relative; border-bottom:solid 1px #e9e9e9; } .ymJoinList li a { position:relative; height:60px; font-size:14px; color:#666; font-weight:300; line-height:60px; display:block; } .ymJoinList li button { position:absolute; z-index:2; top:50%; right:-1px; width:12px; height:12px; background:url('../img/202003170001/mark_ymadd.png') right bottom no-repeat; background-size:auto 19px; margin-top:-7px; font-size:0; line-height:0; display:block; overflow:hidden; } .ymJoinList li:first-child { border-top:solid 1px #e9e9e9; margin-top:30px; } .ymJoinList li:last-child { margin-bottom:25px; } /* 가입자 정보 초기화 */ .ymJoinReset { margin-bottom:-19px; padding:0 24px; text-align:right; } .ymJoinReset button { width:95px; height:25px; background:#fff; border:solid 1px #d5d5d5; border-radius:25px; font-size:12px; line-height:23px; color:#999; letter-spacing:-0.5px; text-align:center; display:inline-block; } .ymJoinReset .tip { position:relative; width:14px; height:14px; background:url('/mobile/img/202003170001/mark_tip.png') 6px center no-repeat #fff; background-size:auto 10px; border:solid 2px #e1e1e1; border-radius:100px; margin:-2px 3px 0 0; font-size:0; line-height:0; vertical-align:middle; display:inline-block; } .ymJoinReset .tip > span { position:absolute; z-index:10; top:31px; right:-103px; width:220px; background:#fff; border:solid 1px #b6b6b6; border-radius:7px; padding:21px 25px; font-size:12px; font-weight:300; line-height:19px; color:#444; text-align:center; word-wrap:break-word; word-break:keep-all; box-sizing:border-box; display:none; } .ymJoinReset .tip > span b { margin:17px 0 4px 0; font-size:12px; color:#000; display:block; } .ymJoinReset .tip > span:before { content:''; position:absolute; top:-14px; left:101px; width:17px; height:14px; background:url('/mobile/img/202003170001/mark_tooltip.png') left bottom no-repeat; background-size:auto 100%; display:block; } .ymJoinReset .tip.active > span { display:block; } /* 가입 제한 안내 */ .ymInfo { text-align:center; padding:76px 25px 135px 25px; } .ymInfo h3 { font-size:28px; font-weight:100; line-height:30px; color:#000; } .ymInfo p { font-size:15px; font-weight:300; letter-spacing:-0.6px; line-height:24px; color:#666; border-top:solid 2px #000; border-bottom:solid 2px #000; padding:42px 0; margin:42px 0 0; } .ymInfo + .btnFix a { width:100%; background:#9855CD; color:#fff; } /* 예약내역 */ .resInfo dd button { height:25px; background:#fff; border:solid 1px #d5d5d5; border-radius:3px; margin:-4px 0 0 5px; padding:0 7px; font-size:12px; color:#999; letter-spacing:-0.5px; vertical-align:middle; display:inline-block; } .resInfo dd button + button { margin-left:1px; } .resInfo .intro { word-wrap:break-word; word-break:keep-all; } .resInfo .issNote { padding-top:25px; } .resInfo .issNote li { position:relative; margin-top:7px; padding-left:16px; font-size:12px; color:#9855cd; word-wrap:break-word; word-break:keep-all; } .resInfo .issNote li:before { content:'※'; position:absolute; top:0; left:0; } .resInfo .chkPay { width:auto; min-width:56px; padding:0 9px; box-sizing:border-box; } .resInfo .chkPay .benefit { position:absolute; top:-1px; right:-77px; width:70px; height:20px; border:solid 1px #a82cd1; border-radius:50px; font-size:10px; line-height:17px; color:#a82cd1; text-align:center; box-sizing:border-box; } .resInfo .contDet > .notify { margin:15px 0 -4px 0; padding-left:15px; color:#000; word-wrap:break-word; word-break:keep-all; } .resInfo .contDet > .notify:before { content:'※'; } .resInfo .contDet.ym li { padding-bottom:37px; } .resInfo .contDet.ym .chkPay { width:95px; } .resInfo .contDet.ym .chkPay .benefit { position:absolute; bottom:-37px; right:-1px; width:95px; height:30px; border:solid 1px #a82cd1; border-radius:100px; font-size:13px; line-height:30px; color:#a82cd1; text-align:center; } .resInfo .contDet.ym .chkUse { right:158px; } .resInfo .contDet.ym > .notify { position:relative; margin-left:0; margin-bottom:-4px; font-size:13px; font-weight:300; color:#666; text-align:right; } .resInfo .contDet.ym > .notify:before { content:'※'; margin:-2px 3px 0 0; vertical-align:middle; display:inline-block; } /* 모바일 오더 추가*/ .moList.el .sort1:before { height:36px; background-position:-705px top; } .moList.el .sort2:before { height:36px; background-position:-755px top; } .moList.el .sort3:before { height:36px; background-position:-251px top; } .moList.el .sort4:before { height:36px; background-position:-805px top; } .moList.cb .sort1:before { height:36px; background-position:-705px bottom; } .moList.cb .sort2:before { height:36px; background-position:-755px bottom; } .moList.cb .sort3:before { height:36px; background-position:-251px bottom; } .moList.cb .sort4:before { height:36px; background-position:-805px bottom; } .moList ul li { position:relative; min-height:90px; padding:17px 0 17px 7rem; word-wrap:break-word; word-break:keep-all; text-align:left; border-bottom:1px solid #efefef} /*250617 수정*/ .moList ul li:last-child {border-bottom:0; } .moList ul li a{ min-height:67px;display:table; } .moList .thumb{ position:absolute; top:19px; left:0;width:6rem; height:auto; background:#ccc; border-radius:10px; font-size:0; line-height:0; text-align:center ;overflow:hidden; aspect-ratio:450 / 420; }/*250617 수정*/ .moList .thumb img { position:relative; top:0; left:50%; height:100%; margin-left:-100%; } /*250617 수정*/ .moList .tit {font-weight:300;color:#666;;display:table-cell; font-size:13px; padding-top:10px; } .moList .tit:after {top:31px; } .moList .tit strong { margin-bottom:8px; font-size:16px; font-weight:500; line-height:20px; letter-spacing:-1px;color:#000;display:block; } .resInfo dd .order_staus li { display:inline-block;color:#888; } .resInfo dd .order_staus li.on { color:#FE5730} .resInfo dd .order_staus li:after { content:''; width:6px; height:10px; background:url('/mobile/img/202003170001/mark_list.png') center center no-repeat; background-size:auto 10px; margin:-2px 2px 0 6px; vertical-align:middle; display:inline-block;opacity:0.45; } .resInfo dd .order_staus li:last-child:after { display:none; } .mdList > h3:first-child {border-top:none; padding-top:25px; } .mdList h3:before { display:none; } .mdList ul li { position:relative; padding:17px 0 17px 89px;word-wrap:break-word; word-break:keep-all; text-align:left; border-bottom:1px solid #efefef} .mdList ul li:last-child {border-bottom:0; } .mdList ul li.soldout { color:#aeaeae; } .mdList ul li.soldout strong { color:#aeaeae; } .mdList ul li.soldout .thumb:before { content:''; position:absolute;z-index:2; top:0; left:0;right:0; bottom:0; background:#000;opacity:.6; } .mdList ul li.soldout .thumb:after { content:'\d488\c808'; position:absolute;z-index:3; top:50%; left:0;right:0; transform:translate(0,-50%); font-size:13px;color:#fff; text-align:center; } .mdList ul li a{ min-height:67px;display:table; } .mdList .thumb{ position:absolute; top:50%; left:0; transform:translate(0,-50%);width:65px; height:65px; background:#ccc; border-radius:100px; font-size:0; line-height:0; text-align:center;overflow:hidden; } .mdList .thumb img { position:relative; top:0; left:50%; height:100%; margin-left:-100%; } .mdList .tit {font-weight:300;color:#666;;display:table-cell; font-size:13px; padding-top:10px; } .mdList .tit:after {top:31px; } .mdList .tit strong { margin-bottom:8px; font-size:16px; font-weight:500; line-height:20px; letter-spacing:-1px;color:#000;display:block; } .mdList .tit .tag img {height:13px; margin-right:4px} .mdList .tit .price em {font-family:'Roboto'; } .mdList .tit .price strong { display:inline-block; margin-right:4px; } .mdList .tit .price strong em {font-weight:500; } .mdList .tit .price del { color:#AEAEAE; font-size:14px; } /* APP 배너 */ .bannerApp .txtBox.ym > i { color:#9855cd; } .payment.ym + hr + .bannerApp { border-top:0; } /* 알림톡 */ .alertTalk { margin-top:-60px; width:100%; height:100vh; background-position:center top; background-size:cover; } .alertTalk.el .alertQR::before { background-color:#F97722; } .alertTalk.el .alertQR::after { border-top-color:#F97722; } .alertTalk.cb .alertQR::before { background-color:#4B7BF4; } .alertTalk.cb .alertQR::after { border-top-color:#4B7BF4; } .alertTalk.hb .alertQR::before { background-color:#53BD6A; } .alertTalk.hb .alertQR::after { border-top-color:#53BD6A; } .alertTalk.sw .alertQR::before { background-color:#4451C7; } .alertTalk.sw .alertQR::after { border-top-color:#4451C7; } .alertTalk.ecube .alertQR::before { background-color:#00BEB3; } .alertTalk.ecube .alertQR::after { border-top-color:#00BEB3; } .alertTalk.none .alertQR::before { background-color:rgb(128, 0, 255); } .alertTalk.none .alertQR::after { border-top-color:rgb(128, 0, 255); } .alertTalk .inner { position:absolute; bottom:30px; left:50%; transform:translateX(-50%); width:calc(100% - 50px); filter:drop-shadow(0px 5px 15px rgba(41, 40, 39, 0.18)); } .alertQR { position:relative; background:#fff; border-radius:30px; padding:45px 0 25px; } .alertQR::before { position:absolute; top:-16px; left:50%; transform:translateX(-50%); content:'\bcf8\0020\d654\ba74\c744\0020\adfc\bb34\c790\c5d0\ac8c\0020\bcf4\c5ec\c8fc\c138\c694\002e'; width:208px; font-size:13px; line-height:19px; letter-spacing:-0.39px; color:#fff; border-radius:30px; padding:6px 0 8px; text-align:center; } .alertQR::after { position:absolute; left:50%; transform:translateX(-50%); content:''; border-top-width:8px; border-top-style:solid; border-left:5px solid white; border-right:5px solid white; height:0; top:17px; width:0; } .alertQR .imgQR { width:120px; height:120px; box-sizing:border-box; margin:0 auto; } .alertQR .imgQR img { width:100%; border:solid 3px #fff; } .alertQR p { font-size:18px; line-height:19px; letter-spacing:-0.54px; font-family:'Roboto'; font-weight:500; color:#000; text-align:center; margin-top:15px; } .alertQR dl { text-align:center; margin-top:8px; } .alertQR dl dt { display:inline-block; font-size:11px; line-height:19px; letter-spacing:-0.33px; color:#AAA; border-radius:50px; background:#F5F5F6; padding:0 7px; margin-right:2px; } .alertQR dl dd { display:inline-block; font-size:13px; line-height:19px; letter-spacing:-0.39px; } .alertQR dl dd > i { font-family:'Roboto'; letter-spacing:0; } .alertInfo { position:relative; background:#F8F8F9; border-radius:30px; padding:25px 50px; } .alertInfo::before { position:absolute; top:0; left:50%; transform:translateX(-50%); content:''; width:calc(100% - 56px); height:1px; background-color:#EAEAEA; } .alertInfo > ul { min-height:45px; } .alertInfo > ul > li { font-size:13px; line-height:19px; letter-spacing:-0.39px; margin-bottom:5px; } .alertInfo > ul > li:last-child { margin-bottom:0; } .alertInfo > ul ul li { font-size:11px; line-height:17px; letter-spacing:-0.33px; color:#A7A7A7; } .alertTxt p { position:relative; font-size:18px; line-height:1.38; letter-spacing:-0.54px; color:#000; text-align:center; padding:150px 20px; } .alertTxt p::before { content:''; display:block; width:106px; height:106px; background:url('/mobile/img/202003170001/ico_notice.png') center center no-repeat; background-size:auto 100%; margin:0 auto 33px; } .viewrelateQr { color:#333; } .viewrelateQr h4 { font-size:15px; color:#000; padding:32px 12px 20px; letter-spacing:-0.45px; font-weight:500; } .viewrelateQr dl { padding:14px 20px 13px; background-color:#F7F9FA; color:#333; font-size:13px; line-height:1.5; letter-spacing:-0.39px; } .viewrelateQr dl dt { font-weight:normal; font-size:13px; } .viewrelateQr dl dd { position:relative; } .viewrelateQr .mkDot:before { content:'ㆍ'; position:absolute; top:0; left:0; display:block; overflow:hidden; } .viewrelateQr .mkDot { margin-top:5px; padding-left:10px; } .viewrelateQr .notify:before { content:'※'; position:absolute; top:1px; left:0; display:block; overflow:hidden; } .viewrelateQr .notify { margin-top:5px; padding-left:15px; } /* layerPopup -------------------------------------------------------------------------*/ .layerPopup { position:fixed; z-index:999; top:50%; left:50%; border-radius:5px; overflow:hidden; display:none; } .layerPopup .cont { background:#fff; } .layerPopup .cont .tit { font-size:20px; font-weight:500; line-height:24px; color:#000; word-wrap:break-word; word-break:keep-all; text-align:center; display:block; } .layerPopup .btnBox { position:relative; z-index:10; background:none !important; } .layerPopup .btnBox a, .layerPopup .btnBox button { float:left; width:50%; height:45px; background:#fe5730; font-size:14px; line-height:45px; color:#fff; text-align:center; display:block; } .layerPopup .btnBox a:first-child, .layerPopup .btnBox button:first-child { background:#edeff2 !important; color:#000; } .layerPopup .btnBox.cb a, .layerPopup .btnBox.cb button { background:#1b9bf0; } .layerPopup .btnBox.ym a, .layerPopup .btnBox.ym button { background:#9855cd; } /* 신규 스피드웨이 추가 */ .layerPopup .btnBox.speed a, .layerPopup .btnBox.speed button { background:#554fca; } .layerPopup .btnBox:after { content:''; display:block; clear:both; } .layerPopup.posAbs { position:absolute !important; margin-bottom:25px; } .layerPopup .btnBox.md a, .layerPopup .btnBox.md button { background:#F33636; } .layerPopup .btnBox.gift a, .layerPopup .btnBox.gift button { background:#FF6A94; } .layerPopup.notice1 { width:280px; margin-left:-140px; } .layerPopup.notice1 .cont { padding:35px 20px; font-size:14px; font-weight:300; line-height:23px; color:#222; word-wrap:break-word; word-break:keep-all; text-align:center; } .layerPopup.notice1 .btnBox .only { width:100%; background:#fe5730 !important; color:#fff; } .layerPopup.notice1 .btnBox.cb .only { background:#1b9bf0 !important; } .layerPopup.notice1 .btnBox.ym .only { background:#9855cd !important; } /* 신규 스피드웨이 추가 */ .layerPopup.notice1 .btnBox.speed .only { background:#554fca !important; } .layerPopup.notice1 .btnBox.ym .only { background:#9855cd !important; } .layerPopup.notice2 { width:280px; margin-left:-140px; } .layerPopup.notice2 .cont { padding:27px 20px 45px 20px; text-align:center; } .layerPopup.notice2 .cont p { max-height:230px; margin-top:43px; font-size:14px; font-weight:300; line-height:23px; color:#222; word-wrap:break-word; word-break:keep-all; overflow:auto; } .layerPopup.notice2 .btnBox .only { width:100%; background:#fe5730 !important; color:#fff; } .layerPopup.notice2 .btnBox.cb .only { background:#1b9bf0 !important; } .layerPopup.notice2 .btnBox.ym .only { background:#9855cd !important; } /* 신규 스피드웨이 추가 */ .layerPopup.notice2 .btnBox.speed .only { background:#554fca !important; } .layerPopup.notice2 .btnBox.ym .only { background:#9855cd !important; } /* 방문날짜 선택 */ #popupDate { width:94.5%; max-width:430px; background:#fff; } #popupDate .time { position:relative; z-index:2; background:#fff; margin-top:-17px; font-size:12px; color:#000; text-align:center; overflow:hidden; display:none; } #popupDate .time b { margin-left:3px; font-family:'Roboto'; font-size:12px; font-weight:500; display:inline-block; } #popupDate .time:before { content:''; width:12px; height:14px; background-image:url('/mobile/img/202003170001/icon_time.png'); background-repeat:no-repeat; background-size:auto 100%; margin:-3px 5px 0 0; vertical-align:middle; display:inline-block; } #popupDate .time.active { display:block; } #popupDate .intro { background:#fff; padding-top:34px; font-size:18px; color:#000; text-align:center; } #popupDate .dateCalBox { background:#fff; padding:20px 4.3vw 40px 4.3vw; margin-bottom:-15px; } #popupDate .dateCalBox .ui-datepicker { padding-bottom:14px; box-shadow:2px 7px 15px rgba(0,0,0,.17); } #popupDate .dateCalBox .ui-datepicker-prev, #popupDate .dateCalBox .ui-datepicker-next { top:167px; } #popupDate .dateCalBox .ui-datepicker-header { height:54px; margin-bottom:27px; padding-top:32px; } #popupDate .dateCalBox .ui-datepicker-month i { top:14px; font-size:35px; line-height:37px; } #popupDate .dateCalBox:before, #popupDate .dateCalBox .ui-datepicker:after, #popupDate .dateCalBox .ui-datepicker:before { content:''; position:absolute; z-index:2; height:17px; background:url('/mobile/img/202003170001/bg_calback_popup.png'); background-size:auto 34px; display:block; } #popupDate .dateCalBox .ui-datepicker:after, #popupDate .dateCalBox .ui-datepicker:before { bottom:-17px; width:30px; background-repeat:no-repeat; } #popupDate .dateCalBox .ui-datepicker:after { right:0; background-position:right bottom; } #popupDate .dateCalBox .ui-datepicker:before { left:0; background-position:left bottom; } #popupDate .dateCalBox:before { left:45px; right:45px; bottom:23px; background-position:center top; background-repeat:repeat-x; } #popupDate .dateCalBox.el + .time:before { background-position:left center; } #popupDate .dateCalBox.cb + .time:before { background-position:right center; } #popupDate .dateCalBox.ym + .time { display:block; } #popupDate .dateCalBox.ym .ui-datepicker-header, #popupDate .dateCalBox.ym .ui-state-active:before { background:#9855cd; } /* 예약 이용안내 */ #popupResGuid { width:86%; max-width:325px; } #popupResGuid .cont { padding:28px 25px 45px 25px; } #popupResGuid .cont dt { margin-bottom:29px; font-size:20px; font-weight:500; line-height:21px; color:#000; text-align:center; } #popupResGuid .cont dt + dd { margin-bottom:10px; font-size:14px; } #popupResGuid .cont dd { font-weight:300; line-height:22px; color:#555; letter-spacing:-0.5px; word-wrap:break-word; word-break:keep-all; } #popupResGuid .cont strong { font-weight:500; color:#000; } /* 확인안내 */ #popupConfirm { width:80%; max-width:310px; } #popupConfirm .cont { padding:45px 0; font-size:14px; font-weight:300; line-height:23px; color:#000; text-align:center; } /* 알림 */ #popupNotify { width:78%; max-width:280px; } #popupNotify .cont { padding:35px 0; font-size:14px; font-weight:300; line-height:23px; color:#222; text-align:center; } #popupNotify .btnBox a { width:100%; background:#fe5730 !important; color:#fff; } #popupNotify .btnBox.cb a { background:#1b9bf0 !important; } #popupNotify .btnBox.ym a { background:#9855cd !important; } /* 신규 스피드웨이 추가 */ #popupNotify .btnBox.speed a { background:#554fca !important; } #popupNotify .btnBox.ym a { background:#9855cd !important; } /* 제휴포인트 사용동의 */ #popupAssoPoint { width:86%; max-width:500px; } #popupAssoPoint .cont { max-height:60vh; overflow-y:auto; padding:27px 25px 35px 25px; } #popupAssoPoint .intro { margin-top:24px; font-weight:300; line-height:21px; } #popupAssoPoint .intro em { margin-bottom:12px; font-size:14px; font-weight:400; color:#000; display:block; } #popupAssoPoint .policy { margin-top:35px; } #popupAssoPoint .policy > p { position:relative; } #popupAssoPoint .policy > p:after { content:''; display:block; clear:both; } #popupAssoPoint .policy label { position:relative; float:right; font-size:0; line-height:0; vertical-align:bottom; display:block; overflow:hidden; } #popupAssoPoint .policy label i { width:20px; height:20px; background:url('/mobile/img/202003170001/mark_check.png') left center no-repeat; background-size:auto 100%; border:solid 1px #d1d1d1; border-radius:4px; display:block; box-sizing:border-box; } #popupAssoPoint .policy input { position:absolute; top:-15px; left:-15px; width:0; height:0; opacity:0; } #popupAssoPoint .policy input:checked + i { background-position:right center; background-color:#fe5730; border:0; } #popupAssoPoint .policy .subj { margin-top:30px; font-weight:300; line-height:20px; color:#000; } #popupAssoPoint .policy .total { border-bottom:solid 1px #000; padding-bottom:4px; line-height:26px; color:#222; } #popupAssoPoint .policy .cbox { height:140px; border:solid 1px #e9e9e9; margin-top:12px; padding:15px; font-size:11px; font-weight:300; line-height:20px; word-wrap:break-word; word-break:keep-all; box-sizing:border-box; overflow-y:scroll; } #popupAssoPoint .policy .cbox li, #popupAssoPoint .policy .cbox dd { position:relative; padding-left:8px; } #popupAssoPoint .policy .cbox li:before, #popupAssoPoint .policy .cbox dd:before { content:'-'; position:absolute; top:0; left:0; } #popupAssoPoint .policy .cbox li { margin-top:20px; } #popupAssoPoint .policy .cbox li:first-child, #popupAssoPoint .policy .cbox dt:first-child { margin-top:0; } #popupAssoPoint .policy .cbox dt { margin-top:10px; } #popupAssoPoint .policy .cbox mark { background:none; color:#fe5730; display:block; } #popupAssoPoint .policy .cbox small { position:relative; margin:10px 0 0 -8px; padding-left:8px; font-size:11px; line-height:20px; display:block; } #popupAssoPoint .policy .cbox small:before { content:'*'; position:absolute; top:2px; left:0; font-size:12px; } #popupAssoPoint .policy .cbox .notify { position:relative; margin-top:10px; padding-left:13px; } #popupAssoPoint .policy .cbox .notify:before { content:'※'; position:absolute; top:0; left:0; } #popupAssoPoint .policy.cb input:checked + i { background-color:#1b9bf0; } #popupAssoPoint .policy.speed input:checked + i { background-color:#554fca; } /* 신규 스피드웨이 추가 */ /* 매크로 확인 */ #popupCaptcha { width:86%; max-width:500px; max-height:445px;overflow-y:auto; } #popupCaptcha .cont { padding:27px 25px 35px 25px; } #popupCaptcha .intro { margin-top:24px; font-weight:300; line-height:22px; text-align:center; } #popupCaptcha .intro em { margin-bottom:15px; font-size:14px; font-weight:400; color:#000; display:block; letter-spacing:-1.05px; } #popupCaptcha .infoBox .imgBox { width:130px; border:0px solid #707070; margin:0 auto; box-sizing:border-box; } #popupCaptcha .infoBox .imgBox > img { width:100%; height:auto; } #popupCaptcha .infoBox p { font-size:14px; color:#000; line-height:18px; letter-spacing:-0.56px; font-weight:300; margin-top:22px; } #popupCaptcha .write { border-bottom:solid 1px #E9E9E9; text-align:center; margin-top:20px; } #popupCaptcha .write.on { border-color:#4D4D4D; } #popupCaptcha .write input { width:100%; height:36px; background:#fff; border:0; font-family:'Roboto'; font-size:16px; color:#000; text-align:center; padding:0; } #popupCaptcha .write input::placeholder { font-family:'Noto Sans KR'; font-size:16px; font-weight:300; color:#999; letter-spacing:0; letter-spacing:-0.56px; } #popupCaptcha .write input::-moz-placeholder { font-family:'Noto Sans KR'; font-size:16px; font-weight:300; color:#999; letter-spacing:0; letter-spacing:-0.56px; } #popupCaptcha .write input::-ms-input-placeholder { font-family:'Noto Sans KR'; font-size:16px; font-weight:300; color:#999; letter-spacing:0; letter-spacing:-0.56px; } #popupCaptcha .write input::-webkit-input-placeholder { font-family:'Noto Sans KR'; font-size:16px; font-weight:300; color:#999; letter-spacing:0; letter-spacing:-0.56px; } /* 로그인 */ #popupLogin { top:0; left:0; width:100%; height:100%; max-width:450px; background:#f3f4f7; border-radius:0; } #popupLogin .tit { background:#fff; padding-top:52px; font-size:24px; line-height:26px; text-align:center; display:block; } #popupLogin .btnClose { position:absolute; z-index:20; top:23px; right:25px; width:17px; height:17px; background:url('/mobile/img/202003170001/btn_close_menu.png') center center no-repeat; background-size:auto 100%; font-size:0; line-height:0; text-indent:-9999px; display:block; overflow:hidden; } #popupLogin .logInfo { position:relative; background:#fff; padding:23px 25px; } #popupLogin .logInfo input[type='text'], #popupLogin .logInfo input[type='password'] { width:100%; height:52px; border:solid 1px #d1d1d1; padding-left:20px; line-height:50px; letter-spacing:0; color:#000; box-sizing:border-box; } #popupLogin .logInfo input[type='text'] { border-radius:5px 5px 0 0; } #popupLogin .logInfo input[type='password'] { border-radius:0 0 5px 5px; margin-top:-1px; } #popupLogin .logInfo input[type='checkbox'] { position:absolute; top:-15px; left:-15px; width:0; height:0; overflow:hidden; opacity:0; } #popupLogin .logInfo input::placeholder { color:#b8b8b8; } #popupLogin .logInfo input::-ms-input-placeholder { color:#b8b8b8; } #popupLogin .logInfo input::-ms-input-placeholder { color:#b8b8b8; } #popupLogin .logInfo input::-webkit-input-placeholder { color:#b8b8b8; } #popupLogin .logInfo button { width:100%; height:50px; background:#fe5730; margin-top:35px; font-size:15px; font-weight:500; line-height:50px; color:#fff; border-radius:100px; display:block; } #popupLogin .logInfo .idChk { position:relative; height:20px; margin:15px 0 -4px 0; line-height:20px; display:inline-block; overflow:hidden; } #popupLogin .logInfo .idChk span { padding-left:30px; display:block; } #popupLogin .logInfo .idChk span:before { content:''; position:absolute; top:0; left:0; width:20px; height:20px; border:solid 1px #d1d1d1; border-radius:4px; box-sizing:border-box; display:block; } #popupLogin .logInfo .idChk input:checked + span:before { background:url('/mobile/img/202003170001/mark_check.png') right center no-repeat #fe5730; background-size:auto 100%; border:0; } #popupLogin .logInfo .notify { position:absolute; right:25px; bottom:109px; color:#fe5730; } #popupLogin .linkRel { background:#fff; padding:4px 0 57px 0; text-align:center; } #popupLogin .linkRel li { display:inline-block; } #popupLogin .linkRel li a { color:#555; } #popupLogin .linkRel li:before { content:''; width:1px; height:8px; background:#d3d3d3; margin:-3px 13px 0 12px; vertical-align:middle; display:inline-block; } #popupLogin .linkRel li:first-child::before { display:none; } #popupLogin .socNet { background:#f3f4f7; padding:25px 25px; text-align:center; } #popupLogin .socNet a { position:relative; width:90px; margin:0 9px; padding-top:54px; display:inline-block; } #popupLogin .socNet a:before { content:''; position:absolute; top:0; left:50%; width:43px; height:43px; background-image:url('/mobile/img/202003170001/icon_socnet.png'); background-repeat:no-repeat; background-color:#fff; background-size:auto 17px; border-radius:100px; margin-left:-21px; display:block; } #popupLogin .socNet .notify { margin-top:27px; padding-right:45px; font-size:10px; line-height:15px; color:#666; text-align:left; } #popupLogin .socNet .notify li { position:relative; margin-top:5px; padding-left:9px; word-wrap:break-word; word-break:keep-all; } #popupLogin .socNet .notify li:before { content:''; position:absolute; top:7px; left:0; width:4px; height:1px; background:#d3d3d3; display:block; } #popupLogin .socNet .facebook:after { content:''; position:absolute; top:17px; right:-11px; width:1px; height:13px; background:#dbdbdb; display:block; } #popupLogin .socNet .facebook:before { background-position:17px center; } #popupLogin .socNet .kakaotalk:before { background-position:-24px center; } /* 이벤트 참여자 정보 */ #popupPartInfo { width:85%; min-width:250px; max-width:360px; } #popupPartInfo dl { margin-top:23px; } #popupPartInfo dt { height:60px; line-height:60px; color:#666; } #popupPartInfo dd { height:60px; border-bottom:solid 1px #dfdfdf; margin-top:-60px; padding:0 0 0 80px; text-align:right; overflow:hidden; } #popupPartInfo dd input { width:100%; height:60px; border:0; padding:0; font-family:'Roboto'; font-size:15px; color:#000; text-align:right; } #popupPartInfo dd input::placeholder { font-family:'Noto Sans KR'; font-size:12px; font-weight:300; color:#999; } #popupPartInfo dd input::-moz-placeholder { font-family:'Noto Sans KR'; font-size:12px; font-weight:300; color:#999; } #popupPartInfo dd input::-ms-input-placeholder { font-family:'Noto Sans KR'; font-size:12px; font-weight:300; color:#999; } #popupPartInfo dd input::-webkit-input-placeholder { font-family:'Noto Sans KR'; font-size:12px; font-weight:300; color:#999; } #popupPartInfo dd select { width:31%; max-width:60px; height:60px; background:url('/mobile/img/202003170001/mark_select.png') 95.5% 27px no-repeat transparent; background-size:11px auto; border:0; margin-right:3%; padding:0 18px 0 0; font-family:'Roboto'; font-size:15px; color:#000; vertical-align:bottom; appearance:none; -moz-appearance:none; -webkit-appearance:none; } #popupPartInfo dd textarea { width:100%; min-width:100%; max-width:100%; height:120px; min-height:75px; border:solid 1px #e9e9e9; padding:15px 10px; box-sizing:border-box; } #popupPartInfo dd textarea::placeholder { font-weight:300; color:#999; } #popupPartInfo dd textarea::-moz-placeholder { font-weight:300; color:#999; } #popupPartInfo dd textarea::-ms-input-placeholder { font-weight:300; color:#999; } #popupPartInfo dd textarea::-webkit-input-placeholder { font-weight:300; color:#999; } #popupPartInfo dd:nth-child(2) input { font-family:'Noto Sans KR'; font-size:14px; } #popupPartInfo dd:nth-child(4) input { width:25%; max-width:45px; text-align:center; } #popupPartInfo dd:nth-child(4) input:last-child { text-align:right; } #popupPartInfo dd:nth-child(6) { height:auto; border-bottom:0; margin-top:-10px; padding-left:0; } #popupPartInfo .tit { position:absolute; top:0; left:0; right:0; background:#fff; padding:30px 0 25px; word-wrap:break-word; word-break:keep-all; } #popupPartInfo .sign { width:10px; height:1px; background:#000; margin:-5px 0 0 2%; font-size:0; line-height:0; vertical-align:middle; display:inline-block; } #popupPartInfo .sort { border-bottom:solid 2px #000; margin-top:43px; padding:0 2px 2px 0; font-size:11px; display:inline-block; } #popupPartInfo .sort + dl { margin-top:5px; } #popupPartInfo .cont { max-height:510px; padding:55px 25px 46px 25px; overflow:auto; box-sizing:border-box; } #popupPartInfo .notify { margin:10px 0 -13px 0; font-size:11px; font-weight:300; color:#fe5730; text-align:right; } #popupPartInfo .notify + .sort { margin-top:29px; } /* 최근 차량 정보 */ #popupCarPlate { width:85%; max-width:270px; } #popupCarPlate .cont { padding:26px 25px 50px 25px; } #popupCarPlate .cont b { font-size:20px; font-weight:500; line-height:24px; color:#000; text-align:center; display:block; } #popupCarPlate .cont ul { margin-top:44px; } #popupCarPlate .cont ul li { border-bottom:solid 1px #dfdfdf; font-family:'Roboto','Noto Sans KR'; font-size:16px; color:#000; line-height:50px; } #popupCarPlate .cont label { position:relative; height:50px; padding-left:75px; display:block; overflow:hidden; } #popupCarPlate .cont span i { margin-top:-2px; font-family:'Noto Sans KR'; font-size:14px; vertical-align:top; display:inline-block; } #popupCarPlate .cont span:before { content:''; position:absolute; top:14px; left:10px; width:23px; height:23px; background:url('/mobile/img/202003170001/mark_check_cart.png') 5px center no-repeat; background-size:auto 9px; border:solid 1px #d1d1d1; border-radius:30px; display:block; box-sizing:border-box; } #popupCarPlate .cont input { position:absolute; top:-15px; left:-15px; width:0; height:0; opacity:0; } #popupCarPlate .cont input:checked + span:before { background-position:-16px center; border:solid 2px #fe5730; } #popupCarPlate .cont.cb input:checked + span:before { background-position:-36px center; border:solid 2px #1b9bf0; } #popupCarPlate .cont.speed input:checked + span:before { background-position:-36px center; border:solid 2px #554fca; } /* 신규 스피드웨이 추가 */ /* 쿠폰선택 */ #popupCoupon { width:85%; max-width:310px; } #popupCoupon select { width:100%; background:url('/mobile/img/202003170001/mark_select.png') 95.5% 6px no-repeat transparent; background-size:11px auto; border:0; border-bottom:solid 1px #e9e9e9; margin-top:4px; padding:0 30px 12px 0; font-size:11px; font-weight:300; color:#000; appearance:none; -moz-appearance:none; -webkit-appearance:none; } #popupCoupon .tit { position:absolute; z-index:2; top:0; left:0; right:0; background:#fff; padding:27px 0 20px 0; } #popupCoupon .tit .name { margin-top:20px; font-size:16px; font-weight:500; color:#000; display:block; } #popupCoupon .cont { height:400px; padding:120px 25px 0 25px; overflow-y:scroll; } #popupCoupon .cont:after { content:''; position:absolute; z-index:-1; top:50px; left:0; right:0; bottom:30px; background:#fff; } #popupCoupon .intro { font-size:11px; font-weight:300; line-height:20px; word-wrap:break-word; word-break:keep-all; display:block; } #popupCoupon .intro cite { border-bottom:solid 1px #e9e9e9; margin-bottom:15px; padding-bottom:12px; font-size:15px; font-weight:400; color:#000; display:block; } #popupCoupon .intro cite i { color:#fe5730; } #popupCoupon .intro cite .tip { position:relative; z-index:10; width:15px; height:15px; background:url('/mobile/img/202003170001/mark_tip.png') 6px center no-repeat #fff; background-size:auto 11px; border:solid 2px #e1e1e1; border-radius:100px; margin:-2px 0 0 3px; font-size:0; line-height:0; vertical-align:middle; display:inline-block; } #popupCoupon .intro cite .tip > span { position:absolute; top:-35px; left:20px; width:43vw; min-width:110px; max-width:195px; min-height:85px; background:#fff; border:solid 1px #b6b6b6; border-radius:7px; padding:15px 15px 15px 16px; font-size:10px; line-height:19px; color:#444; word-wrap:break-word; word-break:keep-all; box-sizing:border-box; display:none; } #popupCoupon .intro cite .tip > span:before { content:''; position:absolute; top:35px; left:-14px; width:14px; height:17px; background:url('/mobile/img/202003170001/mark_tooltip.png') right center no-repeat; background-size:auto 100%; display:block; } #popupCoupon .intro cite .tip.active { z-index:11; } #popupCoupon .intro cite .tip.active > span { display:block; } #popupCoupon .intro + .item > span { margin-top:32px; } #popupCoupon .intro + .pickBox { margin-top:31px; } #popupCoupon .item { margin-top:27px; } #popupCoupon .item > span { margin-bottom:5px; color:#000; display:block; } #popupCoupon .pickBox { position:relative; border-bottom:solid 1px #e9e9e9; margin-top:10px; font-size:11px; } #popupCoupon .pickBox > p { height:25px; background:url('/mobile/img/202003170001/mark_select.png') 95.5% 6px no-repeat transparent; background-size:11px auto; font-weight:300; color:#777; display:block; } #popupCoupon .pickBox > ul { position:absolute; z-index:11; top:100%; left:0; right:0; background:#fff; border:solid 1px #e9e9e9; margin-bottom:20px; padding:15px 0; display:none; } #popupCoupon .pickBox > ul li { padding:6px 20px 7px 20px; color:#000; } #popupCoupon .pickBox > ul li.end, #popupCoupon .pickBox > ul li:first-child { font-weight:300; color:#444; } #popupCoupon .pickBox.active > ul { display:block; } #popupCoupon .partSort { padding-bottom:46px; } /* n회차 결제*/ #popupPayState {width:85%; max-width:310px; max-height:530px;overflow-y:auto; } #popupPayState .cont { padding:23px 25px 20px 25px; } #popupPayState .cont dl { margin-top:8px; } #popupPayState .cont dt, #popupPayState .cont dd { min-height:34px; box-sizing:border-box; } #popupPayState .cont dt { padding-left:10px; font-size:11px; font-weight:300; line-height:34px; } #popupPayState .cont dd { border-bottom:solid 1px #e9e9e9; margin-top:-34px; padding:8px 10px 8px 70px; color:#000; text-align:right; } #popupPayState .cont dd:last-child { border-bottom:0; } #popupPayState .count { position:absolute; top:37px; right:25px; font-size:0; line-height:0; } #popupPayState .count i { width:10px; height:4px; background:#e2e2e2; border-radius:10px; margin-left:3px; font-size:0; line-height:0; display:inline-block; overflow:hidden; } #popupPayState .count i.on { background:#000; } #popupPayState .cont dd.means { min-height:35px; border-bottom:0; margin:0 0 6px 0 !important; padding:0; text-align:right; } #popupPayState .cont dd.means label { position:relative; width:100%; background:#fff; border-radius:3px; margin:1px 0 0 2px; font-size:11px; text-align:left; display:inline-block; overflow:hidden; display:block; } #popupPayState .cont dd.means span { position:relative; height:35px; border:solid 1px #d1d1d1; padding-left:30px; font-weight:300; line-height:33px; display:block; box-sizing:border-box; } #popupPayState .cont dd.means span > i { display:inline-block; } #popupPayState .cont dd.means span > i:before { content:''; width:1px; height:7px; background:#e1e1e1; margin:-3px 8px 0 5px; vertical-align:middle; display:inline-block; } #popupPayState .cont dd.means span > i:first-child:before { display:none; } #popupPayState .cont dd.means span:before { content:''; position:absolute; top:5px; left:7px; width:23px; height:23px; background:url('/mobile/img/202003170001/mark_check_cart.png') 5px center no-repeat; background-size:auto 9px; display:block; } #popupPayState .cont dd.means input { position:absolute; top:-15px; left:-15px; width:0; height:0; opacity:0; } #popupPayState .cont dd.means input:checked + span { border:solid 2px #fe5730; padding-left:29px; font-weight:400; line-height:31px; color:#000; } #popupPayState .cont dd.means input:checked + span:before { background-position:-16px 6px; } #popupPayState .cont dd.means.on {width:100%; margin-left:2px !important; border:solid 2px #fe5730; border-radius:3px;overflow:hidden; } #popupPayState .cont dd.means.on span {border:none} #popupPayState .cont dd.means.on input:checked + span {border:none; } #popupPayState .cont dd.means.on .option { display:block; margin-top:-5px; } #popupPayState .cont dd.means.on span:before {left:5px; } #popupPayState .cont dd.means .option { display:none; } #popupPayState .cont dd.means .option .type { position:relative; height:35px; font-size:12px;color:#999; font-weight:300; line-height:35px; background:url('/mobile/img/202003170001/mark_arrow_show.png') right 17px no-repeat; background-size:auto 41px; border-bottom:solid 1px #E9E9E9; overflow:hidden; text-align:left; margin:0 16px 0 15px; padding-right:20px;cursor:pointer; } #popupPayState .cont dd.means .option .type.on { color:#000; font-weight:400; } #popupPayState .cont dd.means .switch { position:relative; margin:20px 18px 19px 0; } #popupPayState .cont dd.means .switch label { display:inline-block;width:auto; margin:-2px 0 0 0; text-align:right; font-size:11px; font-weight:300;color:#444444;vertical-align:middle; } #popupPayState .cont dd.means .switch .toggle { position:relative; display:inline-block; width:34px; height:20px; margin-left:7px;vertical-align:middle; } #popupPayState .cont dd.means .switch .toggle input { width:36px; height:20px; top:0; left:0; z-index:5; } #popupPayState .cont dd.means .switch .slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:#E2E2E2; -webkit-transition:.4s; transition:.4s; border-radius:34px; } #popupPayState .cont dd.means .switch .slider:before { position:absolute; content:""; width:16px; height:16px; left:2px; bottom:2px; background-color:#fff; -webkit-transition:.4s; transition:.4s; border-radius:50%; } #popupPayState .cont dd.means .switch input:checked + .slider { background-color:#333; } #popupPayState .cont dd.means .switch input:checked + .slider:before { -webkit-transform:translateX(13px); -ms-transform:translateX(13px); transform:translateX(13px); } #popupPayState .cont dd.means .select { display:none; text-align:left; margin:0 16px 0 15px; border-bottom:1px solid #e9e9e9; } #popupPayState .cont dd.means .select .info { margin-bottom:20px; border-bottom:1px solid #E9E9E9; } #popupPayState .cont dd.means .select .info:after { content:""; display:block; clear:both; } #popupPayState .cont dd.means .select .info select {width:92px; height:35px; background:url('/mobile/img/202003170001/mark_select.png') 95.5% 16px no-repeat transparent; background-size:11px auto; border:0; padding:0 18px 0 0; font-size:12px;color:#000;vertical-align:bottom;appearance:none;-moz-appearance:none;-webkit-appearance:none; } #popupPayState .cont dd.means .select .info input { display:inline-block; width:100px; height:35px; font-family:'Roboto'; font-size:12px;color:#000; letter-spacing:-0.6px; text-align:right; position:relative; top:0; left:0;opacity:1; border:0; float:right; } #popupPayState .cont dd.means .select .info input::placeholder { color:#999} #popupPayState .cont dd.means .select .notify { font-size:11px; line-height:16px; color:#FE5730; margin:-10px 0 7px; padding-left:7px; letter-spacing:-0.6px; } #popupPayState .cont dd.means .notice { margin-bottom:20px; } #popupPayState .cont dd.means .notice li { position:relative; font-size:12px;color:#666; padding-left:7px; margin-bottom:6px; line-height:17px; font-weight:300;; letter-spacing:-0.6px;word-break:keep-all; } #popupPayState .cont dd.means .notice li:last-child { margin-bottom:0; } #popupPayState .cont dd.means .notice li:before { content:'-'; position:absolute; top:0; left:0; } #popupPayState .cont dd.means .charge { position:relative; margin:15px 16px 21px; text-align:left; padding:8px 78px 8px 9px; background:#F7F7F7; border:1px solid #EFEFEF; border-radius:3px; } #popupPayState .cont dd.means .charge p { color:#fe5730; font-size:11px; letter-spacing:-0.55px; line-height:16px;; } #popupPayState .cont dd.means .charge button { position:absolute; top:50%;right:8px; transform:translate(0,-50%); font-size:12px; letter-spacing:-0.3px;display:inline-block; padding:4px 14px; font-weight:400;color:#000; border:1px solid #000; border-radius:15px;; background-color:#fff; line-height:18px; } /* 기프트카드 선택 */ #popupGiftType {top:auto; left:0;right:0; bottom:0; margin:0 !important; border-radius:0;overflow:initial; background:#fff; } #popupGiftType:before { content:''; position:absolute;width:100%; height:100vh; left:0; bottom:0; background:#000;opacity:.75; } #popupGiftType .cont { position:relative; padding-bottom:25px;z-index:999; } #popupGiftType .cont .tit {font-size:14px; font-weight:500; letter-spacing:-0.35px; line-height:16px; padding:20px 0; margin:0 25px; text-align:left; } #popupGiftType .cont .list { position:relative; margin:15px 20px 0; max-height:182px;overflow-y:auto; } #popupGiftType .cont .list li { position:relative; padding-left:21px; font-size:13px; font-weight:300; line-height:19px;color:#000; margin-bottom:10px;cursor:pointer; padding-bottom:10px; border-bottom:1px solid #efefef; } #popupGiftType .cont .list li:before { content:''; position:absolute; top:0; left:-4px;width:23px; height:23px; background:url('/mobile/img/202003170001/mark_check_cart.png') 25px center no-repeat; background-size:auto 9px;display:block; } #popupGiftType .cont .list li.on:before {background-position:-16px 6px; } #popupGiftType .cont .list li:last-child { margin-bottom:0; border-bottom:0} #popupGiftType .cont .list li.on {font-weight:500; } /* 기프트카드 충전팝업 */ #popupGiftCharge { display:none; position:fixed; top:auto; left:0;right:0; bottom:0; height:100%; margin:0 !important; border-radius:0;overflow:initial; background:#fff;z-index:999;; } #popupGiftCharge:before { content:''; position:absolute; top:-100%; left:0;right:0; bottom:0; background:#000;opacity:.75;z-index:-1; } #popupGiftCharge iframe {border:none;width:100%; height:100%; } #popupGiftCharge .cont { height:100%; background-color:#F4F6F8; } /* 기프트카드 선물하기 정보확인 */ #popupSendGift { width:85%; max-width:310px; max-height:530px;overflow-y:auto; } #popupSendGift .cont { padding:27px 25px 50px 25px; } #popupSendGift .cont p { font-size:14px; line-height:22px; margin:18px 0 -20px; text-align:center; word-break:keep-all; } #popupSendGift .cont dl { margin-top:40px; } #popupSendGift .cont dt, #popupSendGift .cont dd { min-height:51px; box-sizing:border-box; } #popupSendGift .cont dt { padding-left:10px; font-size:12px; font-weight:300; line-height:50px; } #popupSendGift .cont dd { border-bottom:solid 1px #e9e9e9; margin-top:-51px; padding:16px 10px 17px 102px; color:#000; text-align:right; word-wrap:break-word; word-break:keep-all; } /* 결제 완료 */ #popupPayFinish { width:78%; max-width:310px; } #popupPayFinish .cont { padding:27px 10px 45px 10px; text-align:center; } #popupPayFinish .cont p { margin-top:43px; font-size:14px; font-weight:300; line-height:23px; color:#222; } #popupPayFinish .btnBox a { width:100%; background:#fe5730 !important; color:#fff; } #popupPayFinish .btnBox.cb a { background:#1b9bf0 !important; } #popupPayFinish .btnBox.speed a { background:#554fca !important; } /* 신규 스피드웨이 추가 */ /* 차량정보수정 */ #popupCarInfo { width:95%; max-width:340px; } #popupCarInfo .cont { padding:27px 25px 15px 25px; } #popupCarInfo .parking { margin-top:44px; } #popupCarInfo .parking p { position:relative; margin:5px 0 35px 0; font-size:0; line-height:0; } #popupCarInfo .parking p span { float:left; display:block; box-sizing:border-box; } #popupCarInfo .parking p span:first-child { padding-left:0 !important; } #popupCarInfo .parking p:after { content:''; display:block; clear:both; } #popupCarInfo .parking input, #popupCarInfo .parking select { width:100%; height:42px; border:0; border-bottom:solid 1px #e9e9e9; padding:0; color:#000; vertical-align:bottom; box-sizing:border-box; } #popupCarInfo .parking input { text-align:center; } #popupCarInfo .parking select { background:url('/mobile/img/202003170001/mark_select.png') 95.5% 19px no-repeat transparent; background-size:11px auto; padding-right:18px; appearance:none; -moz-appearance:none; -webkit-appearance:none; } #popupCarInfo .parking input[type='tel'] { font-family:'Roboto'; font-size:14px; } #popupCarInfo .parking .sort { border-bottom:solid 2px #000; padding-bottom:2px; font-size:11px; font-weight:500; color:#000; vertical-align:top; display:inline-block; } #popupCarInfo .parking .type1 span { padding-left:15px; } #popupCarInfo .parking .type1 .sbox1 { width:26%; } #popupCarInfo .parking .type1 .wbox1 { width:25%; } #popupCarInfo .parking .type1 .wbox2 { width:21%; } #popupCarInfo .parking .type1 .wbox3 { width:28%; } #popupCarInfo .parking .type2 span { padding-left:10px; } #popupCarInfo .parking .type2 .sbox1 { width:20%; } #popupCarInfo .parking .type2 .sbox2 { width:22%; } #popupCarInfo .parking .type2 .wbox1 { width:18%; } #popupCarInfo .parking .type2 .wbox2 { width:17%; } #popupCarInfo .parking .type2 .wbox3 { width:23%; } #popupCarInfo .parking.typeBtn p { width:90%; } #popupCarInfo .parking.typeBtn .btn_cancle { position:absolute; top:8px; right:-34px; width:24px; height:24px; border-radius:50px; background:#E9E9E9 url('/mobile/img/202003170001/mark_list_x.png') no-repeat center center; background-size:10px; font-size:0; box-sizing:border-box;vertical-align:top; } /* 상세정보 수정 */ #popupResInfo { width:92%; max-width:330px; } #popupResInfo .tit { position:relative; background:#fff; padding:0 0 25px; word-wrap:break-word; word-break:keep-all; } #popupResInfo .cont { max-height:510px; padding:25px 25px 46px 25px; overflow:auto; box-sizing:border-box; } #popupResInfo dt { height:60px; line-height:60px; color:#666; } #popupResInfo dt select { width:100px; height:60px; background:url('/mobile/img/202003170001/mark_select.png') 95.5% 27px no-repeat transparent; background-size:11px auto; border:0; padding:0 18px 0 0; font-size:14px; color:#000; vertical-align:bottom; appearance:none; -moz-appearance:none; -webkit-appearance:none; } #popupResInfo dd { height:60px; border-bottom:solid 1px #dfdfdf; margin-top:-60px; padding:0 0 0 110px; text-align:right; overflow:hidden; } #popupResInfo dd input { width:100%; height:60px; border:0; padding:0; font-size:14px; color:#000; text-align:right; } #popupResInfo dd input::placeholder { font-family:'Noto Sans KR'; font-size:12px; font-weight:300; color:#999; } #popupResInfo dd input::-moz-placeholder { font-family:'Noto Sans KR'; font-size:12px; font-weight:300; color:#999; } #popupResInfo dd input::-ms-input-placeholder { font-family:'Noto Sans KR'; font-size:12px; font-weight:300; color:#999; } #popupResInfo dd input::-webkit-input-placeholder { font-family:'Noto Sans KR'; font-size:12px; font-weight:300; color:#999; } #popupResInfo dd select { width:170px; height:60px; background:url('/mobile/img/202003170001/mark_select.png') 95.5% 27px no-repeat transparent; background-size:11px auto; border:0; margin-right:3%; padding:0 18px 0 0; color:#000; vertical-align:bottom; appearance:none; -moz-appearance:none; -webkit-appearance:none; } #popupResInfo dd textarea { width:100%; min-width:100%; max-width:100%; height:120px; min-height:75px; border:solid 1px #e9e9e9; padding:15px 10px; box-sizing:border-box; } #popupResInfo dd textarea::placeholder { font-weight:300; color:#999; } #popupResInfo dd textarea::-moz-placeholder { font-weight:300; color:#999; } #popupResInfo dd textarea::-ms-input-placeholder { font-weight:300; color:#999; } #popupResInfo dd textarea::-webkit-input-placeholder { font-weight:300; color:#999; } #popupResInfo dd.ch select {float:left;width:100px; max-width:100px; font-size:14px; font-family:'Noto Sans KR'; } #popupResInfo dd.ch input {width:calc(100% - 120px)} #popupResInfo dd.tel select {width:24%; } #popupResInfo dd.tel input {width:21.5%; max-width:130px; } #popupResInfo dd.tel .sign { width:10px; height:1px; background:#000; margin:-5px 0 0 5px; font-size:0; line-height:0; vertical-align:middle; display:inline-block; } #popupResInfo dd.text { padding:0; margin-top:-10px; height:auto; padding-bottom:15px; } #popupResInfo dd.text textarea {width:100%; min-width:100%; max-width:100%; height:120px; min-height:75px; border:solid 1px #e9e9e9; padding:15px 10px; box-sizing:border-box; } #popupResInfo label { position:relative; border-bottom:solid 1px #e9e9e9; font-weight:300; color:#666; display:block; overflow:hidden; } #popupResInfo label i { display:block; height:60px; line-height:60px;; } #popupResInfo label i:after { content:''; position:absolute; top:20px; right:0; width:20px; height:20px; background:url('/mobile/img/202003170001/mark_check.png') left center no-repeat; background-size:auto 100%; border:solid 1px #d1d1d1; border-radius:3px; display:block; box-sizing:border-box; } #popupResInfo label input { position:absolute; top:-15px; left:-15px; width:0; height:0; } #popupResInfo label input:checked + i:after { background-color:#FE5730; border:0; background-position:right center; } /* 베이코인 사용내역 */ #popupBayCoinRpt { width:86%; max-width:450px; } #popupBayCoinRpt li { position:relative; min-height:20px; border-top:solid 1px #e9e9e9; padding:15px 75px 16px 0; font-weight:300; line-height:20px; color:#444; word-wrap:break-word; word-break:keep-all; } #popupBayCoinRpt li .price { position:absolute; top:50%; right:0; height:20px; margin-top:-10px; color:#000; } #popupBayCoinRpt li .price i { font-family:'Roboto'; font-size:14px; font-weight:400; } #popupBayCoinRpt li:first-child { border-top:0; } #popupBayCoinRpt dl { margin-top:-17px; } #popupBayCoinRpt dt, #popupBayCoinRpt dd { color:#000; } #popupBayCoinRpt dt { height:25px; border-top:solid 1px #e9e9e9; margin-top:17px; padding-top:17px; } #popupBayCoinRpt dt + dd { margin-top:-25px; } #popupBayCoinRpt dt.calc { font-size:14px; } #popupBayCoinRpt dd { min-height:25px; padding-left:85px; text-align:right; } #popupBayCoinRpt dd i { font-family:'Roboto'; font-size:14px; font-weight:500; } #popupBayCoinRpt dd.calc i { font-size:17px; } #popupBayCoinRpt .bal { margin-top:8px; font-size:11px; font-weight:300; display:block; } #popupBayCoinRpt .bal i { font-size:12px; } #popupBayCoinRpt .cont { padding:27px 25px 47px 25px; } #popupBayCoinRpt .spend { max-height:400px; margin-top:28px; overflow-y:auto; } #popupBayCoinRpt .btnBox a { width:100%; background:#fe5730 !important; color:#fff; } #popupBayCoinRpt .btnBox.cb a { background:#1b9bf0 !important; } #popupBayCoinRpt .btnBox.speed a { background:#554fca !important; } /* 신규 스피드웨이 추가 */ /* 베이코인 비밀번호 설정 */ #popupBayCoinPass { width:86%; max-width:380px; } #popupBayCoinPass ul { margin:55px 0 0 0; } #popupBayCoinPass ul li { position:relative; padding-left:7px; font-size:11px; font-weight:300; line-height:20px; color:#777; word-wrap:break-word; word-break:keep-all; } #popupBayCoinPass ul li:before { content:'-'; position:absolute; top:0; left:0; display:block; } #popupBayCoinPass ul li i { display:inline-block; } #popupBayCoinPass .cont { padding:27px 25px 45px 25px; } #popupBayCoinPass .write { position:relative; border-bottom:solid 1px #dfdfdf; margin-top:25px; padding-left:80px; } #popupBayCoinPass .write i { position:absolute; top:19px; left:0; font-weight:300; color:#444; } #popupBayCoinPass .write input { width:100%; height:50px; background:#fff; border:0; font-family:'Roboto'; font-size:17px; color:#000; letter-spacing:2px; text-align:right; } #popupBayCoinPass .write input::placeholder { font-family:'Noto Sans KR'; font-size:12px; font-weight:200; color:#aaa; letter-spacing:0; } #popupBayCoinPass .write input::-moz-placeholder { font-family:'Noto Sans KR'; font-size:12px; font-weight:200; color:#aaa; letter-spacing:0; } #popupBayCoinPass .write input::-ms-input-placeholder { font-family:'Noto Sans KR'; font-size:12px; font-weight:200; color:#aaa; letter-spacing:0; } #popupBayCoinPass .write input::-webkit-input-placeholder { font-family:'Noto Sans KR'; font-size:12px; font-weight:200; color:#aaa; letter-spacing:0; } #popupBayCoinPass .notify { margin:9px 0 -26px 0; font-size:11px; font-weight:300; color:#fe5730; text-align:right; } #popupBayCoinPass .notify.cb { color:#1b9bf0; } #popupBayCoinPass .notify.speed { color:#554fca; } /* 신규 스피드웨이 추가 */ /* 사용처리 */ #popupUseProd { width:86%; max-width:350px; } #popupUseProd label { position:relative; display:block; overflow:hidden; } #popupUseProd input[type='checkbox'] { position:absolute; top:-15px; left:-15px; width:0; height:0; opacity:0; } #popupUseProd .cont { padding:27px 25px 50px 25px; } #popupUseProd .intro { margin-top:24px; font-size:11px; font-weight:300; color:#777; } #popupUseProd .listBox { margin-top:22px; } #popupUseProd .listBox li { position:relative; min-height:19px; border-bottom:solid 1px #e9e9e9; padding:15px 0; font-weight:300; line-height:21px; color:#444; word-wrap:break-word; word-break:keep-all; } #popupUseProd .listBox label { min-height:24px; padding:1px 0 2px 31px; display:block; overflow:hidden; box-sizing:border-box; } #popupUseProd .listBox input + .name:before { content:''; position:absolute; top:50%; left:0; width:23px; height:23px; background:url('/mobile/img/202003170001/mark_check_cart.png') 5px center no-repeat; background-size:auto 9px; border:solid 1px #d4d4d4; border-radius:30px; margin-top:-12px; display:block; box-sizing:border-box; } #popupUseProd .listBox input:checked + .name:before { background-position:-15px center; border-color:#fe5730; } #popupUseProd .listBox.cb input:checked + .name:before { background-position:-35px center; border-color:#1b9bf0; } #popupUseProd .listBox.speed input:checked + .name:before { background-position:-35px center; border-color:#554fca; } /* 신규 스피드웨이 추가 */ /* 사용처리 개수 선택 */ #popupUseProdSet { width:86%; max-width:350px; } #popupUseProdSet .cont { padding:27px 25px 50px 25px; } #popupUseProdSet .name { margin:45px 0 10px 0; color:#000; display:block; } #popupUseProdSet select { width:100%; background:url('/mobile/img/202003170001/mark_select.png') 95.5% 6px no-repeat transparent; background-size:11px auto; border:0; border-bottom:solid 1px #e9e9e9; margin-top:4px; padding:0 30px 12px 0; font-size:12px; font-weight:300; color:#666; appearance:none; -moz-appearance:none; -webkit-appearance:none; } /* 사용처리 확인,완료 */ #popupUseProdEnd { width:78%; max-width:310px; } #popupUseProdEnd .cont { padding:27px 10px 45px 10px; text-align:center; } #popupUseProdEnd .cont p { margin-top:43px; font-size:14px; font-weight:300; line-height:23px; color:#222; } #popupUseProdEnd .btnBox a.only { width:100%; background:#fe5730 !important; color:#fff; } #popupUseProdEnd .btnBox a.only { background:#1b9bf0 !important; } #popupUseProdNextEnd { width:78%; max-width:310px; } #popupUseProdNextEnd .cont { padding:27px 10px 45px 10px; text-align:center; } #popupUseProdNextEnd .cont p { margin-top:43px; font-size:14px; font-weight:300; line-height:23px; color:#222; } #popupUseProdNextEnd .btnBox a.only { width:100%; background:#fe5730 !important; color:#fff; } #popupUseProdNextEnd .btnBox a.only { background:#1b9bf0 !important; } /* 사용정보 */ #popupUseInfo { width:86%; max-width:450px; } #popupUseInfo .tit { padding:25px 0; } #popupUseInfo ul { padding-bottom:50px; margin:0 25px; } #popupUseInfo ul li { position:relative; padding:15px 0 15px 100px; font-size:14px;color:#000; font-weight:400px; font-family:'Roboto'; border-bottom:1px solid #e9e9e9; text-align:right; } #popupUseInfo ul li span { position:absolute; top:50%; left:0; transform:translate(0,-50%);color:#444444; font-size:13px; font-family:'Noto Sans KR',HelveticaNeue,'Helvetica Neue',AppleSDGothicNeo,'Apple SD Gothic Neo',sans-serif; text-align:left} #popupUseInfo .btnBox a { width:100%; background:#fe5730 !important; color:#fff; } /* 예약취소 */ #popupResCanc { width:86%; max-width:350px; } #popupResCanc label { position:relative; display:block; overflow:hidden; } #popupResCanc input[type='checkbox'] { position:absolute; top:-15px; left:-15px; width:0; height:0; opacity:0; } #popupResCanc .cont { padding:27px 25px 50px 25px; } #popupResCanc .chkAll { z-index:10; margin-top:-23px; font-size:0; line-height:0; } #popupResCanc .chkAll span, #popupResCanc .listBox input + .name:before { width:23px; height:23px; background:url('/mobile/img/202003170001/mark_check_cart.png') 5px center no-repeat; background-size:auto 9px; border:solid 1px #d4d4d4; border-radius:30px; display:block; box-sizing:border-box; } #popupResCanc .chkAll input:checked + span, #popupResCanc .listBox input:checked + .name:before { background-position:-15px center; border-color:#fe5730; } #popupResCanc .chkAll.cb input:checked + span, #popupResCanc .listBox.cb input:checked + .name:before { background-position:-35px center; border-color:#1b9bf0; } /* 신규 스피드웨이 추가 */ #popupResCanc .chkAll.speed input:checked + span, #popupResCanc .listBox.speed input:checked + .name:before { background-position:-35px center; border-color:#554fca; } #popupResCanc .listBox { margin-top:20px; } #popupResCanc .listBox li { position:relative; min-height:19px; border-bottom:solid 1px #e9e9e9; padding:15px 60px 15px 31px; font-weight:300; line-height:21px; color:#444; word-wrap:break-word; word-break:keep-all; } #popupResCanc .listBox label { min-height:24px; margin-left:-31px; padding:1px 0 2px 31px; display:block; overflow:hidden; box-sizing:border-box; } #popupResCanc .listBox input + .name:before { content:''; position:absolute; top:50%; left:0; margin-top:-12px; } #popupResCanc .listBox .cp { position:absolute; top:50%; right:0; width:40px; height:22px; background:#fe5730; border-radius:50px; margin-top:-11px; font-size:10px; font-weight:300; line-height:21px; color:#fff; text-align:center; display:block; } #popupResCanc .listBox .carNum { font-family:'Roboto', 'Noto Sans KR'; font-size:14px; font-weight:400; color:#000; } #popupResCanc .listBox .carNum:before { content:''; width:6px; height:1px; background:#d1d3d6; margin:-3px 9px 0 9px; vertical-align:middle; display:inline-block; } #popupResCanc .listBox .off, #popupResCanc .listBox .off .carNum { color:#999; } #popupResCanc .listBox .off .cp { opacity:.3; } #popupResCanc .listBox.cb .cp { background:#1b9bf0; } #popupResCanc .listBox.speed .cp { background:#554fca; } /* 신규 스피드웨이 추가 */ /* 취소확인 */ #popupCancConfd { width:78%; max-width:310px; } #popupCancConfd .cont { padding:27px 25px 45px 25px; text-align:center; } #popupCancConfd .cont p { margin-top:43px; font-size:14px; font-weight:300; line-height:23px; color:#222; } #popupCancConfd .btnBox a.only { width:100%; background:#fe5730 !important; color:#fff; } #popupCancConfd .btnBox a.only { background:#1b9bf0 !important; } /* 쿠폰사용안내 */ #popupCouponGuid { width:86%; max-width:430px; } #popupCouponGuid .tit { letter-spacing:-1px; } #popupCouponGuid .cont { padding:28px 25px 45px 25px; color:#222; word-wrap:break-word; word-break:keep-all; } #popupCouponGuid .cont dl { max-height:390px; margin-top:25px; overflow:auto; } #popupCouponGuid .cont dt { margin:22px 0 13px 0; color:#000; } #popupCouponGuid .cont dt:first-child { margin-top:0; } #popupCouponGuid .cont dd { position:relative; margin-top:5px; padding-left:7px; font-weight:300; line-height:21px; } #popupCouponGuid .cont dd:before { content:'-'; position:absolute; top:0; left:0; display:block; } #popupCouponGuid .btnBox a { width:100%; background:#fe5730 !important; color:#fff; } #popupCouponGuid .btnBox.cb a { background:#1b9bf0 !important; } #popupCouponGuid .btnBox.speed a { background:#554fca !important; } /* 신규 스피드웨이 추가 */ /* 쿠폰상세 */ #popupCouponView { width:275px; border-radius:0 0 10px 10px; } #popupCouponView strong { font-size:16px; font-weight:400; line-height:22px; color:#000; display:block; } #popupCouponView .flag { float:right; width:77px; height:23px; background:#fe5730; border-radius:100px; margin-top:-22px; font-size:10px; line-height:22px; color:#fff; text-align:center; } #popupCouponView .flag.cb { background:#1b9bf0; } #popupCouponView .flag.speed { background:#554fca; } /* 신규 스피드웨이 추가 */ #popupCouponView .date { margin-top:30px; font-family:'Roboto'; font-size:12px; font-weight:400; color:#888; letter-spacing:-0.5px; display:block; } #popupCouponView .intro { margin-top:10px; line-height:19px; display:block; } #popupCouponView .cont { background:#fff; padding:35px 35px 25px 35px; } #popupCouponView .golink { margin:19px 0 -9px 0; font-size:13px; display:inline-block; } #popupCouponView .golink:after { content:''; width:27px; height:27px; background:url('/mobile/img/202003170001/mark_list.png') center center no-repeat; background-size:auto 10px; border:solid 1px #d8d8d8; border-radius:30px; margin:-2px 0 0 15px; vertical-align:middle; display:inline-block; } #popupCouponView .notify { border-top:solid 1px #e9e9e9; margin:33px 0 -5px 0; padding-top:15px; font-size:12px; line-height:18px; color:#777; clear:both; } #popupCouponView .imgBox { width:124px; height:124px; border-radius:200px; margin:0 auto 31px auto; font-size:0; line-height:0;overflow:hidden; } #popupCouponView .imgBox img { width:100%; } #popupCouponView .btnBox { background:url('/mobile/img/202003170001/bg_line.png') left top no-repeat !important; background-size:auto 15px !important; padding-top:15px; } #popupCouponView .btnBox a { width:100%; height:45px; background:#fe5730 !important; font-size:14px; color:#fff; line-height:42px; box-sizing:border-box; } #popupCouponView .btnBox.cb { background-position:right top !important; } #popupCouponView .btnBox.cb a { background:#1b9bf0 !important; } #popupCouponView .btnBox.speed a { background:#554fca !important; } /* 신규 스피드웨이 추가 */ /* 연간회원인증 */ #popupCertify { width:86%; max-width:350px; } #popupCertify .cont { padding:27px 25px 45px 25px; } #popupCertify .stit { margin-top:48px; font-size:14px; color:#000; display:block; } #popupCertify .chk { margin:25px -3px 0 -3px; text-align:center; } #popupCertify .chk a { width:47.5%; height:35px; background:#fff; border:solid 1px #d1d1d1; border-radius:3px; margin:0 2px; line-height:33px; color:#000; text-align:center; display:inline-block; box-sizing:border-box; overflow:hidden; } #popupCertify .chk a:first-child { background:#eff0f2; border:0; line-height:35px; } #popupCertify .chk:after { content:''; display:block; clear:both; } #popupCertify .info { margin-top:15px; } #popupCertify .info li { position:relative; margin-top:10px; padding-left:7px; font-size:11px; font-weight:300; line-height:20px; color:#777; word-wrap:break-word; word-break:keep-all; } #popupCertify .info li:before { content:'-'; position:absolute; top:0; left:0; display:block; } #popupCertify .write { margin-top:20px; } #popupCertify .write dt { height:50px; font-weight:300; line-height:50px; } #popupCertify .write dd { height:50px; border-bottom:solid 1px #e9e9e9; margin-top:-50px; padding-left:95px; text-align:right; } #popupCertify .write dd input { width:100%; max-width:160px; height:50px; background:#fff; border:0; padding:0; font-family:'Roboto','Noto Sans KR'; font-size:14px; line-height:50px; color:#000; text-align:right; } #popupCertify .write dd:nth-child(2) input { font-family:'Noto Sans KR'; font-size:13px; } #popupCertify .serch { width:190px; height:25px; background:#eff0f2; border-radius:5px; margin:17px auto 0 auto; font-size:11px; color:#444; display:block; } #popupCertifyPick { width:86%; max-width:350px; } #popupCertifyPick label { position:relative; display:block; overflow:hidden; } #popupCertifyPick label input { position:absolute; top:-15px; left:-15px; width:0; height:0; opacity:0; } #popupCertifyPick .cont { padding:27px 25px 50px 25px; } #popupCertifyPick .listBox { max-height:305px; margin-top:22px; overflow:auto; } #popupCertifyPick .listBox li { position:relative; min-height:19px; border-bottom:solid 1px #e9e9e9; padding:13px 0 11px 0; font-weight:400; font-size:14px; line-height:21px; color:#000; word-wrap:break-word; word-break:keep-all; } #popupCertifyPick .listBox li i { margin-top:5px; font-size:12px; font-weight:300; color:#444; display:block; } #popupCertifyPick .listBox li i b { font-family:'Roboto'; font-weight:300; } #popupCertifyPick .listBox label { min-height:24px; padding:1px 0 2px 31px; display:block; overflow:hidden; box-sizing:border-box; } #popupCertifyPick .listBox input + .name:before { content:''; position:absolute; top:0; left:0; width:23px; height:23px; background:url('/mobile/img/202003170001/mark_check_cart.png') 5px center no-repeat; background-size:auto 9px; border:solid 1px #d4d4d4; border-radius:30px; display:block; box-sizing:border-box; } #popupCertifyPick .listBox input:checked + .name i { color:#222; } #popupCertifyPick .listBox input:checked + .name i b { font-weight:400; } #popupCertifyPick .listBox input:checked + .name:before { background-position:-15px center; border-color:#fe5730; } #popupCertifyNo { width:310px; } #popupCertifyNo p { padding:45px 0; font-size:14px; line-height:23px; color:#222; text-align:center; } #popupCertifyNo p .info { margin-top:14px; font-size:12px; color:#666; display:block; } #popupCertifyNo p .info:before { content:'-'; margin-right:5px; display:inline-block; } #popupCertifyNo .btnBox a { width:100%; background:#fe5730 !important; color:#fff; } /* 서브클럽인증 */ #popupSubclubAuth { width:360px; } #popupSubclubAuth .cont { padding:43px 25px 30px 25px; } #popupSubclubAuth .stit { margin-top:48px; font-size:14px; color:#000; display:block; } #popupSubclubAuth .chk { margin-top:25px; text-align:center; } #popupSubclubAuth .chk a { width:120px; height:35px; background:#fff; border:solid 1px #d1d1d1; border-radius:3px; margin:0 2px; line-height:33px; color:#000; text-align:center; display:inline-block; box-sizing:border-box; overflow:hidden; } #popupSubclubAuth .chk a:first-child { background:#eff0f2; border:0; line-height:35px; } #popupSubclubAuth .chk:after { content:''; display:block; clear:both; } #popupSubclubAuth .info { margin-top:15px; } #popupSubclubAuth .info li { position:relative; margin-top:10px; padding-left:7px; font-size:12px; font-weight:300; line-height:20px; color:#777; word-wrap:break-word; word-break:keep-all; } #popupSubclubAuth .info li:before { content:'-'; position:absolute; top:0; left:0; display:block; } #popupSubclubAuth .write { margin-top:20px; } #popupSubclubAuth .write dt { height:50px; font-weight:300; line-height:50px; } #popupSubclubAuth .write dd { height:50px; border-bottom:solid 1px #e9e9e9; margin-top:-50px; padding-left:95px; text-align:right; } #popupSubclubAuth .write dd input { width:100%; height:50px; background:#fff; border:0; padding:0; font-family:'Roboto','Noto Sans KR','Nanum Gothic','나눔고딕','Malgun Gothic','맑은고딕'; font-size:14px; line-height:50px; color:#000; text-align:right; } #popupSubclubAuth .write dd input::placeholder { font-weight:300; color:#999; } #popupSubclubAuth .write dd input::-moz-placeholder { font-weight:300; color:#999; } #popupSubclubAuth .write dd input::-ms-input-placeholder { font-weight:300; color:#999; } #popupSubclubAuth .write dd input::-webkit-input-placeholder { font-weight:300; color:#999; } #popupSubclubAuth .write dd:nth-child(2) input { font-family:'Noto Sans KR','Nanum Gothic','나눔고딕','Malgun Gothic','맑은고딕'; font-size:13px; } #popupSubclubAuth .serch { width:190px; height:25px; background:#eff0f2; border-radius:5px; margin:17px auto 0 auto; font-size:12px; color:#444; display:block; } /* 픽업장소변경 */ #popupChangePlace { width:86%; max-width:350px; } #popupChangePlace .cont { padding:27px 25px 35px 25px; } #popupChangePlace .picBox { margin-top:45px; } #popupChangePlace .picBox i { margin-bottom:14px; color:#000; display:block; } #popupChangePlace .picBox select { width:100%; background:url('/mobile/img/202003170001/mark_select.png') 95.5% 6px no-repeat transparent; background-size:11px auto; border:0; border-bottom:solid 1px #e9e9e9; padding:0 30px 12px 0; font-size:12px; font-weight:300; color:#666; appearance:none; -moz-appearance:none; -webkit-appearance:none; } #popupChangePlace .notice { padding-top:20px; font-size:12px; font-weight:300; } #popupChangePlace .notice li { position:relative; margin-top:4px; padding-left:7px; word-wrap:break-word; word-break:keep-all; } #popupChangePlace .notice li:before { content:'-'; position:absolute; top:0; left:0; display:block; } /* 배송정보 수정 */ #popupShippingInfo { width:85%; min-width:250px; max-width:360px; } #popupShippingInfo dl { margin-top:23px; } #popupShippingInfo dt { height:60px; line-height:60px; color:#666; } #popupShippingInfo dd { height:60px; border-bottom:solid 1px #dfdfdf; margin-top:-60px; padding:0 0 0 80px; text-align:right; overflow:hidden; } #popupShippingInfo dd input { width:100%; height:60px; border:0; padding:0; font-family:'Roboto'; font-size:15px; color:#000; text-align:right; } #popupShippingInfo dd input::placeholder { font-family:'Noto Sans KR'; font-size:12px; font-weight:300; color:#999; } #popupShippingInfo dd input::-moz-placeholder { font-family:'Noto Sans KR'; font-size:12px; font-weight:300; color:#999; } #popupShippingInfo dd input::-ms-input-placeholder { font-family:'Noto Sans KR'; font-size:12px; font-weight:300; color:#999; } #popupShippingInfo dd input::-webkit-input-placeholder { font-family:'Noto Sans KR'; font-size:12px; font-weight:300; color:#999; } #popupShippingInfo dd select { width:31%; max-width:60px; height:60px; background:url('/mobile/img/202003170001/mark_select.png') 95.5% 27px no-repeat transparent; background-size:11px auto; border:0; margin-right:3%; padding:0 18px 0 0; font-family:'Roboto'; font-size:15px; color:#000; vertical-align:bottom; appearance:none; -moz-appearance:none; -webkit-appearance:none; } #popupShippingInfo dd:nth-child(2) input { font-family:'Noto Sans KR'; font-size:14px; } #popupShippingInfo dd:nth-child(4) input { width:25%; max-width:45px; text-align:center; } #popupShippingInfo dd:nth-child(4) input:last-child { text-align:right; } #popupShippingInfo .tit { position:absolute; top:0; left:0; right:0; background:#fff; padding:30px 0 25px; word-wrap:break-word; word-break:keep-all; } #popupShippingInfo .sign { width:10px; height:1px; background:#000; margin:-5px 0 0 2%; font-size:0; line-height:0; vertical-align:middle; display:inline-block; } #popupShippingInfo .cont { max-height:510px; padding:55px 25px 46px 25px; overflow:auto; box-sizing:border-box; } #popupShippingInfo .addrList { height:auto; padding:0; } #popupShippingInfo .addrList button { height:25px; background:#f7f9fa; border:solid 1px #d1d1d1; margin-left:2px ; padding:0 10px; font-size:11px; color:#666; } #popupShippingInfo .addrList .addrNum { font-family:'Roboto'; font-size:15px; display:inline-block; margin-right:10px; height:60px; padding-left:80px; line-height:60px; } #popupShippingInfo .addrList .addrTxt { font-family:'Noto Sans KR'; font-size:14px; height:60px; border-top:solid 1px #e9e9e9; line-height:60px; } #popupShippingInfo .addrList .addrTxt input { font-family:'Noto Sans KR'; font-size:14px; } #popupShippingInfo .text { height:125px; padding-left:0; margin-top:-13px; } #popupShippingInfo .text textarea { width:100%; min-width:100%; max-width:100%; height:105px; min-height:75px; border:solid 1px #e9e9e9; padding:15px 10px; box-sizing:border-box; } #popupShippingInfo .text textarea::placeholder { font-weight:300; color:#999; } #popupShippingInfo .text textarea::-moz-placeholder { font-weight:300; color:#999; } #popupShippingInfo .text textarea::-ms-input-placeholder { font-weight:300; color:#999; } #popupShippingInfo .text textarea::-webkit-input-placeholder { font-weight:300; color:#999; } /* 교환/환불 신청 */ #popupRefund{ width:85%; min-width:250px; max-width:360px; } #popupRefund .cont { max-height:510px; padding:27px 25px 50px 25px; overflow:auto; box-sizing:border-box; } #popupRefund dl { margin-top:23px; } #popupRefund dt { height:35px; line-height:35px; color:#666; } #popupRefund dd textarea { width:100%; min-width:100%; max-width:100%; height:105px; min-height:75px; border:solid 1px #e9e9e9; padding:15px 10px; box-sizing:border-box; } #popupRefund dd textarea::placeholder { font-weight:300; color:#999; } #popupRefund dd textarea::-moz-placeholder { font-weight:300; color:#999; } #popupRefund dd textarea::-ms-input-placeholder { font-weight:300; color:#999; } #popupRefund dd textarea::-webkit-input-placeholder { font-weight:300; color:#999; } #popupRefund label { position:relative; display:block; overflow:hidden; } #popupRefund input[type='radio'] { position:absolute; top:-15px; left:-15px; width:0; height:0; opacity:0; } #popupRefund .listBox input + .name:before { width:23px; height:23px; background:url('/mobile/img/202003170001/mark_check_cart.png') 5px center no-repeat; background-size:auto 9px; border:solid 1px #d4d4d4; border-radius:30px; display:block; box-sizing:border-box; } #popupRefund .listBox input:checked + .name:before { background-position:-15px center; border-color:#fe5730; } #popupRefund .listBox { margin-top:20px; } #popupRefund .listBox li { position:relative; min-height:19px; border-bottom:solid 1px #e9e9e9; padding:15px 15px 15px 31px; font-weight:300; line-height:21px; color:#444; word-wrap:break-word; word-break:keep-all; } #popupRefund .listBox li.txt { font-weight:400; padding:15px 15px 15px 0; } #popupRefund .listBox label { min-height:24px; margin-left:-31px; padding:1px 0 2px 31px; display:block; overflow:hidden; box-sizing:border-box; } #popupRefund .listBox input + .name:before { content:''; position:absolute; top:50%; left:0; margin-top:-12px; } /* PG */ #ALLAT_MOBILE_PAY{ position:fixed !important; z-index:9999 !important; } /* 연간이용권 권종 안내 및 우대정보 */ #popupInfoym { width:86%; max-width:430px; } #popupInfoym .tit span { display:inline-block; } #popupInfoym .cont { padding:28px 25px 25px 25px; } #popupInfoym .infoBox { position:relative; border-top:solid 2px #000; margin-top:20px; display:block; } #popupInfoym .infoBox th { width:75px; font-weight:400; } #popupInfoym .infoBox thead { width:100%; display:table; } #popupInfoym .infoBox thead th { height:32px; background:#fff; border-bottom:solid 1px #ababab; font-size:12px; } #popupInfoym .infoBox thead th:last-child { width:auto; border-left:solid 1px #e9e9e9; } #popupInfoym .infoBox tbody { width:100%; height:285px; display:block; overflow-x:hidden; overflow-y:scroll; } #popupInfoym .infoBox tbody tr { width:100%; display:table; } #popupInfoym .infoBox tbody th, #popupInfoym .infoBox tbody td { border-bottom:solid 1px #e9e9e9; padding:13px 0; word-wrap:break-word; word-break:keep-all; } #popupInfoym .infoBox tbody td { border-left:solid 1px #e9e9e9; padding-left:15px; font-size:12px; line-height:18px; color:#666; } #popupInfoym .infoBox tbody li { position:relative; margin-top:7px; padding-left:8px; } #popupInfoym .infoBox tbody li:before { content:'-'; position:absolute; top:0; left:0; display:block; } #popupInfoym .infoBox tbody li:last-child ul { margin-bottom:0; } #popupInfoym .infoBox tbody li ul { margin:5px 0 15px 0; } #popupInfoym .infoBox tbody li ul li { margin-top:3px; padding-left:6px; } #popupInfoym .infoBox tbody li ul li:before { content:''; top:7px; width:2px; height:2px; background:#666; border-radius:3px; } #popupInfoym .infoBox tbody ul { margin:-2px 0 5px 0; } #popupInfoym .infoBox .link { background:url(/mobile/img/202003170001/mark_move.png) right center no-repeat #fff; background-size:6px auto; margin-top:10px; padding-right:15px; font-size:12px; font-weight:400; color:#000; display:inline-block; } #popupInfoym .infoBox .notify { border:0; padding:18px 0 0 0; font-weight:300; } /* 보호자 동의서 */ #popupJoinAgree { width:92%; max-width:470px; } #popupJoinAgree .cont { padding:28px 15px 42px 15px; } #popupJoinAgree .intro, #popupJoinAgree .txtBox { margin-top:24px; font-size:12px; font-weight:300; line-height:18px; color:#666; word-wrap:break-word; word-break:keep-all; } #popupJoinAgree .txtBox { margin-top:16px} #popupJoinAgree .infoBox dt { height:45px; line-height:45px; } #popupJoinAgree .infoBox dd { min-height:45px; margin-top:-45px; line-height:45px; } #popupJoinAgree .infoBox input, #popupJoinAgree .infoBox select { height:45px; } #popupJoinAgree .infoBox select { background-position:95.5% 20px; } #popupJoinAgree .infoBox .sep { margin-top:-46px; } #popupJoinAgree .infoBox .phone { padding-left:70px; } #popupJoinAgree .infoBox .certify > span { line-height:45px; } #popupJoinAgree .infoBox .birthday button { top:6px; } #popupJoinAgree .sameChk { font-size:12px; } #popupJoinAgree .ymJoinWrite { margin-top:37px; padding:0; } /* 사진등록 가이드 */ #popupPhotoGuid { width:84%; max-width:360px; } #popupPhotoGuid .cont { padding:28px 25px 35px 25px; } #popupPhotoGuid .notify { margin-top:24px; } #popupPhotoGuid .notify li { position:relative; margin-top:5px; padding-left:8px; word-wrap:break-word; word-break:keep-all; } #popupPhotoGuid .notify li:before { content:'-'; position:absolute; top:0; left:0; } #popupPhotoGuid .sample { margin-top:20px; font-size:0; line-height:0; } #popupPhotoGuid .sample img { width:100%; } #popupPhotoGuid .btnBox.ym a { width:100%; background:#9855cd !important; color:#fff; } /* APP 연간이용권 */ #popupAppInfo { width:86%; max-width:350px; } #popupAppInfo label { position:relative; display:block; overflow:hidden; } #popupAppInfo label input { position:absolute; top:-15px; left:-15px; width:0; height:0; opacity:0; } #popupAppInfo .cont { padding:27px 25px 50px 25px; } #popupAppInfo .intro { margin-top:15px; font-size:12px; color:#666; text-align:center; } #popupAppInfo .listBox { max-height:305px; margin-top:22px; overflow:auto; } #popupAppInfo .listBox li { position:relative; min-height:19px; border-bottom:solid 1px #e9e9e9; padding:13px 0 11px 0; font-weight:400; font-size:14px; line-height:21px; color:#000; word-wrap:break-word; word-break:keep-all; } #popupAppInfo .listBox li i { margin-top:5px; font-size:12px; font-weight:300; color:#444; display:block; } #popupAppInfo .listBox li i b { font-family:'Roboto'; font-weight:300; } #popupAppInfo .listBox label { min-height:24px; padding:1px 0 2px 31px; display:block; overflow:hidden; box-sizing:border-box; } #popupAppInfo .listBox input + .name:before { content:''; position:absolute; top:0; left:0; width:23px; height:23px; background:url('../img/202003170001/mark_check_ym.png') 5px center no-repeat; background-size:auto 9px; border:solid 1px #d4d4d4; border-radius:30px; display:block; box-sizing:border-box; } #popupAppInfo .listBox input:checked + .name i { color:#222; } #popupAppInfo .listBox input:checked + .name i b { font-weight:400; } #popupAppInfo .listBox input:checked + .name:before { background-position:-15px center; border-color:#9855cd; } #popupAppInfoNo { width:310px; } #popupAppInfoNo p { padding:45px 0; font-size:14px; line-height:23px; color:#222; text-align:center; } #popupAppInfoNo p .info { margin-top:14px; font-size:12px; color:#666; display:block; } #popupAppInfoNo p .info:before { content:'-'; margin-right:5px; display:inline-block; } #popupAppInfoNo .btnBox a { width:100%; background:#9855cd !important; color:#fff; } /* 연간이용권 번호 조회 */ #popupMemNumChk { width:310px; } #popupMemNumChk p { padding:45px 0; font-size:14px; line-height:23px; color:#222; text-align:center; } #popupMemNumChk .btnBox a { width:100%; background:#9855cd !important; color:#fff; } /* 가입자 입력 완료 정보 */ #popupJoinInfo { width:86%; max-width:360px; } #popupJoinInfo .cont { padding:27px 25px 35px 25px; } #popupJoinInfo .cont dl { padding-top:11px; } #popupJoinInfo .cont dt { height:45px; margin-bottom:-45px; line-height:45px; } #popupJoinInfo .cont dd { min-height:46px; border-bottom:solid 1px #e9e9e9; padding:13px 0 12px 75px; text-align:right; word-wrap:break-word; word-break:keep-all; box-sizing:border-box; } #popupJoinInfo .picBox { width:115px; height:135px; margin:28px auto 0 auto; font-size:0; line-height:0; text-align:center; } #popupJoinInfo .picBox img { height:100%; } #popupJoinInfo .btnBox a { width:100%; background:#9855cd !important; color:#fff; } /* 발급일 선택 */ #popupDate .dateCalBox.ym .ui-datepicker-header, #popupDate .dateCalBox.ym .ui-state-active:before { background:#9855cd; } #popupDate .dateCalBox.ym + .time { display:block; } /* 멤버 조회 */ #popupMemInfo { width:92%; min-width:260px; max-width:330px; } #popupMemInfo .cont { max-height:510px; padding:55px 14px 34px; overflow:auto; box-sizing:border-box; } #popupMemInfo .tit { position:absolute; top:0; left:0; right:0; background:#fff; padding:24px 0; word-wrap:break-word; word-break:keep-all; z-index:1; } #popupMemInfo dl { width:100%; border-top:solid 1px #e9e9e9; clear:both; } #popupMemInfo dl dt { height:60px; line-height:60px; color:#666; clear:both; } #popupMemInfo dl dd { min-height:60px; border-bottom:solid 1px #e9e9e9; margin-top:-60px; padding:0 0 0 60px; text-align:right; overflow:hidden; } #popupMemInfo dl input { width:100%; height:60px; background:#fff; border:0; padding:0 !important; font-size:14px; color:#000; text-align:right; } #popupMemInfo dl input::placeholder { font-family:'Noto Sans KR'; font-size:12px; font-weight:300; color:#999; } #popupMemInfo dl input::-moz-placeholder { font-family:'Noto Sans KR'; font-size:12px; font-weight:300; color:#999; } #popupMemInfo dl input::-ms-input-placeholder { font-family:'Noto Sans KR'; font-size:12px; font-weight:300; color:#999; } #popupMemInfo dl input::-webkit-input-placeholder { font-family:'Noto Sans KR'; font-size:12px; font-weight:300; color:#999; } #popupMemInfo dl select { min-width:42px; width:19%; max-width:60px; height:60px; background:url('/mobile/img/202003170001/mark_select.png') 95.5% 27px no-repeat transparent; background-size:11px auto; border:0; padding:0 18px 0 0; font-size:14px; color:#000; vertical-align:bottom; appearance:none; -moz-appearance:none; -webkit-appearance:none; } #popupMemInfo dl button { min-width:60px; height:25px; background:#fff; border:solid 1px #d5d5d5; border-radius:25px; margin:6px 0 10px 0; padding:0 7px; font-size:12px; color:#999; letter-spacing:-0.6px; text-align:center; vertical-align:middle; display:inline-block; } #popupMemInfo dl button.active { border-color:#9e9e9e; color:#000; } #popupMemInfo dl .phone .sign { margin-top:-5px; font-weight:bold; vertical-align:middle; display:inline-block; } #popupMemInfo dl .phone input { width:17%; min-width:35px; max-width:130px; text-align:center; } #popupMemInfo dl .certify { position:relative; } #popupMemInfo dl .certify input { width:30%; margin-right:15px; } #popupMemInfo dl .certify > span { position:absolute; top:0; color:#9855cd; line-height:60px; display:block; } #popupMemInfo dl .certify .time { left:55px; } #popupMemInfo dl .certify .finish { right:0; background:#fff; padding:0 8px; } #popupMemInfo .notify { font-size:12px; color:#666; font-weight:300; line-height:19px; word-wrap:break-word; word-break:keep-all; margin-top:20px; } #popupMemInfo .txt { font-size:13px; letter-spacing:-0.52px; color:#9855CD; margin-top:34px; } #popupMemInfo .ymlistBox { max-height:100%; margin-top:17px; } #popupMemInfo .ymlistBox li label { height:50px; padding:16px 20px; } #popupMemInfo .ymlistBox li label i { right:23px; text-align:right; } #popupMemInfo .ymlistBox li label i::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:13px; background-color:#dcdcdc; } #popupMemInfo .ymlistBox li input + .name:before { height:50px; } #popupMemInfo .ymlistBox li input + .name > span { left:20px; } #popupMemInfo .ymlistBox li input:checked + .name + i { color:#000; } #popupMemInfo .ymlistBox li.btnSelect { background-color:#f2f2f2; border:1px solid #e9e9e9; color:#bebebe; } #popupMemInfo .ymlistBox li.btnSelect input + .name:before { border:none; } #popupMemInfo .ymlistBox li.btnSelect input:checked + .name, #popupMemInfo .ymlistBox li.btnSelect input:checked + .name + i { color:#bebebe; } /* 자리선택 */ .layerPopup.selPlace { top:50%; width:86%; max-width:460px; } .layerPopup.selPlace > * { background:#fff; } .layerPopup.selPlace .intro { padding:28px 0 15px 0; font-size:17px; color:#000; text-align:center; } .layerPopup.selPlace .intro.add { padding:23px 0 12px 0; } .layerPopup.selPlace .intro.add em { margin-top:6px; font-size:11px; font-weight:300; color:#777; display:block; } .layerPopup.selPlace .notice { padding:0 25px 37px 25px; font-size:11px; font-weight:300; } .layerPopup.selPlace .notice li { position:relative; margin-top:8px; padding-left:7px; word-wrap:break-word; word-break:keep-all; } .layerPopup.selPlace .notice li:before { content:'-'; position:absolute; top:0; left:0; display:inline-block; } .layerPopup.selPlace .notice li:first-child { margin-top:0; } .layerPopup.selPlace .locate { position:absolute; z-index:10; top:0; left:0; right:0; bottom:0; } .layerPopup.selPlace .locate li { position:absolute; box-sizing:border-box; } .layerPopup.selPlace .locate li > i { width:0; height:0; font-size:0; line-height:0; display:block; overflow:hidden; opacity:0; } .layerPopup.selPlace .locate li > span { width:22px; height:22px; background:#1b9bf0; border:solid 1px #fff; border-radius:50px; padding-right:1px; font-family:'Roboto'; font-size:12px; color:#fff; line-height:20px; text-align:center; display:block; box-sizing:border-box; } .layerPopup.selPlace .locate li.off { display:none; } .layerPopup.selPlace .locate li.end > span { background:#000; } .layerPopup.selPlace .locate li.choice > span { background:#fe5730; } .layerPopup.selPlace .mapBox { position:relative; width:100%; } .layerPopup.selPlace .mapBox .guid { padding:11px 0 13px 0; text-align:center; } .layerPopup.selPlace .mapBox .guid > * { margin:0 10px; font-size:11px; font-weight:300; color:#444; text-decoration:none; display:inline-block; } .layerPopup.selPlace .mapBox .guid > *:before { content:''; width:11px; height:11px; border-radius:15px; margin:-1px 7px 0 0; vertical-align:middle; display:inline-block; background:#000; } .layerPopup.selPlace .mapBox .guid b:before { background:#1b9bf0; } .layerPopup.selPlace .mapBox .guid ins:before { background:#fe5730; } .layerPopup.selPlace .mapBox .guid del:before { background:#333; } .layerPopup.selPlace .mapBox .whole { position:absolute; z-index:90; top:10px; left:10px; background:#fff; border:solid 1px #000; box-shadow:10px 10px 15px rgba(0,0,0,.2); overflow:hidden; } .layerPopup.selPlace .mapBox .whole .bg { position:relative; z-index:1; width:105px; height:74px; background-position:center center; background-repeat:no-repeat; background-size:100% auto; opacity:.5; } .layerPopup.selPlace .mapBox .whole .pos { position:absolute; z-index:10; top:1px; left:1px; border:solid 2px #000; } .layerPopup.selPlace .mapBox .imgBg { position:relative; z-index:1; font-size:0; line-height:0; } .layerPopup.selPlace .mapBox .pickArea { position:relative; background:#000; max-height:290px; overflow:auto; } .layerPopup.selPlace .placeInfo { padding-top:20px; display:none; } .layerPopup.selPlace .placeInfo .name { padding:37px 25px 40px 25px; font-weight:300; color:#222; line-height:21px; word-wrap:break-word; word-break:keep-all; } .layerPopup.selPlace .placeInfo .name b { margin-bottom:9px; font-size:18px; font-weight:500; color:#000; display:block; } .layerPopup.selPlace .placeInfo .notice { padding-top:0; } .layerPopup.selPlace .placeInfo .picBox { height:175px; font-size:0; line-height:0; overflow:hidden; } .layerPopup.selPlace .placeInfo .picBox img { width:100%; } .layerPopup.selPlace .placeInfo.active { display:block; } .layerPopup.selPlace .chkName { border-top:solid 1px #fff; min-height:77px; font-size:18px; font-weight:500; line-height:24px; color:#fff; text-align:center; box-sizing:border-box; } .layerPopup.selPlace .chkName small { margin-top:4px; font-size:12px; display:block; } .layerPopup.selPlace .chkName.active { border-top:solid 1px #e9e9e9; padding:26px 0; font-size:18px; font-weight:500; line-height:24px; color:#000; display:block; } /* 자리선택-로즈가든 */ .selPlace .roseGarden img { height:380px; } .selPlace .roseGarden .whole .bg { background-image:url('/mobile/img/202003170001/place_rose_garden.jpg'); background-color:#ebe3d4; } .selPlace .roseGarden .locate li { width:34px; height:62px; } .selPlace .roseGarden .whole .pos { width:45%; height:56%; } .selPlace .roseGarden .locate li > span { position:absolute; top:38px; left:50%; transform:translateX(-50%); width:27px; height:23px; border-radius:0; } .selPlace .roseGarden .locate li > span:after { content:''; position:absolute; z-index:2; top:100%; left:50%; width:10px; height:7px; background:url('/mobile/img/202003170001/mark_place.png') 0 top no-repeat; background-size:auto 15px; margin:-27px 0 0 -5px; display:block; } .selPlace .roseGarden .locate li.end span { background:#333; } .selPlace .roseGarden .locate li.end > span:after { background-position:-15px top; } .selPlace .roseGarden .locate li.choice > span:after { background-position:-30px top; } .selPlace .roseGarden .locate li:nth-child(1) { top:62px; left:570px; } .selPlace .roseGarden .locate li:nth-child(2) { top:62px; left:536px; } .selPlace .roseGarden .locate li:nth-child(3) { top:62px; left:502px; } .selPlace .roseGarden .locate li:nth-child(4) { top:62px; left:468px; } .selPlace .roseGarden .locate li:nth-child(5) { top:62px; left:434px; } .selPlace .roseGarden .locate li:nth-child(6) { top:62px; left:400px; } .selPlace .roseGarden .locate li:nth-child(7) { top:72px; left:287px; } .selPlace .roseGarden .locate li:nth-child(8) { top:79px; left:253px; } .selPlace .roseGarden .locate li:nth-child(9) { top:84px; left:220px; } .selPlace .roseGarden .locate li:nth-child(10) { top:92px; left:185px; } .selPlace .roseGarden .locate li:nth-child(11) { top:109px; left:81px; } .selPlace .roseGarden .locate li:nth-child(12) { top:93px; left:45px; } .selPlace .roseGarden .locate li:nth-child(13) { top:92px; left:8px; } .selPlace .roseGarden .locate li:nth-child(14) { top:160px; left:12px; } .selPlace .roseGarden .locate li:nth-child(15) { top:184px; left:44px; } .selPlace .roseGarden .locate li:nth-child(11) span, .selPlace .roseGarden .locate li:nth-child(12) span, .selPlace .roseGarden .locate li:nth-child(13) span { top:0; } .selPlace .roseGarden .locate li:nth-child(11) span:after, .selPlace .roseGarden .locate li:nth-child(12) span:after, .selPlace .roseGarden .locate li:nth-child(13) span:after { background-position:0 bottom; margin:-1px 0 0 -5px; } .selPlace .roseGarden .locate li:nth-child(11).end span:after, .selPlace .roseGarden .locate li:nth-child(12).end span:after .selPlace .roseGarden .locate li:nth-child(13).end span:after { background-position:-15px bottom; } .selPlace .roseGarden .locate li:nth-child(11).choice span:after, .selPlace .roseGarden .locate li:nth-child(12).choice span:after, .selPlace .roseGarden .locate li:nth-child(13).choice span:after { background-position:-30px bottom; } /* 자리선택-글램핑힐 */ .selPlace .glamping { max-height:none !important; overflow:hidden !important; } .selPlace .glamping img { width:100%; } .selPlace .glamping .locate li { width:9%; height:12%; } .selPlace .glamping .locate li > span { position:absolute; top:-14px; left:-29px; width:48px; height:21px; border-radius:3px; font-family:'Noto Sans KR'; font-size:11px; line-height:20px; box-shadow:5px 5px 5px rgba(0,0,0,.3); } .selPlace .glamping .locate li > span:after { content:''; position:absolute; z-index:2; top:100%; left:50%; width:10px; height:7px; background:url('/mobile/img/202003170001/mark_place.png') 0 bottom no-repeat; background-size:auto 15px; margin:-1px 0 0 -5px; display:block; } .selPlace .glamping .locate li.end > span:after { background-position:-15px bottom; } .selPlace .glamping .locate li.choice > span:after { background-position:-30px bottom; } .selPlace .glamping .locate li:before { content:''; width:100%; height:100%; display:block; opacity:0; } .selPlace .glamping .locate li:nth-child(1), .selPlace .glamping .locate li:nth-child(2), .selPlace .glamping .locate li:nth-child(3), .selPlace .glamping .locate li:nth-child(4), .selPlace .glamping .locate li:nth-child(5) { transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); } .selPlace .glamping .locate li:nth-child(1) span, .selPlace .glamping .locate li:nth-child(2) span, .selPlace .glamping .locate li:nth-child(3) span, .selPlace .glamping .locate li:nth-child(4) span, .selPlace .glamping .locate li:nth-child(5) span { transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); } .selPlace .glamping .locate li:nth-child(6), .selPlace .glamping .locate li:nth-child(7) { transform:rotate(40deg); -webkit-transform:rotate(40deg); -moz-transform:rotate(40deg); } .selPlace .glamping .locate li:nth-child(6) span, .selPlace .glamping .locate li:nth-child(7) span { transform:rotate(-40deg); -webkit-transform:rotate(-40deg); -moz-transform:rotate(-40deg); } .selPlace .glamping .locate li:nth-child(1) { z-index:5; top:39.5%; left:68.3%; } .selPlace .glamping .locate li:nth-child(2) { z-index:4; top:36%; left:54%; } .selPlace .glamping .locate li:nth-child(3) { z-index:3; top:30%; left:40%; } .selPlace .glamping .locate li:nth-child(4) { z-index:2; top:26%; left:25.6%; } .selPlace .glamping .locate li:nth-child(5) { z-index:1; top:22%; left:10.5%; } .selPlace .glamping .locate li:nth-child(6) { z-index:1; top:50.5%; left:10.8%; } .selPlace .glamping .locate li:nth-child(7) { z-index:1; top:59%; left:19.8%; } .selPlace .glamping .locate li:nth-child(8) { z-index:1; top:65.8%; left:35.5%; transform:rotate(30deg); -webkit-transform:rotate(30deg); -moz-transform:rotate(30deg); } .selPlace .glamping .locate li:nth-child(8) span { top:-16px; left:-27px; transform:rotate(-30deg); -webkit-transform:rotate(-30deg); -moz-transform:rotate(-30deg); } .selPlace .glamping .locate li:nth-child(9) { top:67.8%; left:52.7%; transform:rotate(-20deg); -webkit-transform:rotate(-20deg); -moz-transform:rotate(-20deg); } .selPlace .glamping .locate li:nth-child(9) span { top:-20px; left:auto; right:-25px; transform:rotate(20deg); -webkit-transform:rotate(20deg); -moz-transform:rotate(20deg); } /* 자리선택-레스토랑, 쿠치나마리오 테라스 */ .selPlace .restrMario img { height:400px; } .selPlace .restrMario .whole .bg { background-image:url('/mobile/img/202003170001/place_restr_mario_stove.jpg'); background-color:#ebe3d4; } .selPlace .restrMario .whole .pos { width:45%; height:56%; } .selPlace .restrMario .locate li { width:76px; height:45px; } .selPlace .restrMario .locate li > span { position:absolute; top:-17px; left:50%; margin-left:-10px; } .selPlace .restrMario .locate li:nth-child(1) { top:300px; left:519px; } .selPlace .restrMario .locate li:nth-child(2) { top:300px; left:426px; } .selPlace .restrMario .locate li:nth-child(3) { top:300px; left:332px; } .selPlace .restrMario .locate li:nth-child(4) { top:300px; left:241px; } .selPlace .restrMario .locate li:nth-child(5) { top:300px; left:151px; } .selPlace .restrMario .locate li:nth-child(6) { top:300px; left:58px; } .selPlace .restrMario .locate li:nth-child(7) { top:221px; left:530px; } .selPlace .restrMario .locate li:nth-child(8) { top:221px; left:446px; } .selPlace .restrMario .locate li:nth-child(9) { top:221px; left:363px; } .selPlace .restrMario .locate li:nth-child(10) { top:221px; left:200px; } .selPlace .restrMario .locate li:nth-child(11) { top:221px; left:118px; } .selPlace .restrMario .locate li:nth-child(12) { top:147px; left:565px; } .selPlace .restrMario .locate li:nth-child(13) { top:147px; left:475px; } .selPlace .restrMario .locate li:nth-child(14) { top:147px; left:380px; } .selPlace .restrMario .locate li:nth-child(15) { top:147px; left:200px; } .selPlace .restrMario .locate li:nth-child(16) { top:147px; left:107px; } .selPlace .restrMario .locate li:nth-child(17) { top:147px; left:200px; } .selPlace .restrMario .locate li:nth-child(18) { top:147px; left:107px; } .selPlace .restrMario + .chkName { min-height:15px; padding:0; font-size:0; line-height:0; } /* 자리선택-레스토랑, 가든테라스 */ .selPlace .restrGarden img { height:400px; } .selPlace .restrGarden .whole .bg { background-image:url('/mobile/img/202003170001/place_restr_garden_stove.jpg'); background-color:#ebe3d4; } .selPlace .restrGarden .locate li { width:72px; height:40px; } .selPlace .restrGarden .whole .pos { width:45%; height:56%; } .selPlace .restrGarden .locate li > span { position:absolute; top:-15px; left:50%; margin-left:-10px; } .selPlace .restrGarden .locate li:nth-child(1) { top:300px; left:455px; } .selPlace .restrGarden .locate li:nth-child(2) { top:300px; left:348px; } .selPlace .restrGarden .locate li:nth-child(3) { top:300px; left:241px; } .selPlace .restrGarden .locate li:nth-child(4) { top:300px; left:134px; } .selPlace .restrGarden .locate li:nth-child(5) { top:300px; left:29px; } .selPlace .restrGarden .locate li:nth-child(6) { top:240px; left:455px; } .selPlace .restrGarden .locate li:nth-child(7) { top:240px; left:348px; } .selPlace .restrGarden .locate li:nth-child(8) { top:240px; left:241px; } .selPlace .restrGarden .locate li:nth-child(9) { top:240px; left:134px; } .selPlace .restrGarden .locate li:nth-child(10) { top:240px; left:28px; } .selPlace .restrGarden .locate li:nth-child(11) { top:176px; left:348px; } .selPlace .restrGarden .locate li:nth-child(12) { top:176px; left:240px; } .selPlace .restrGarden .locate li:nth-child(13) { top:176px; left:135px; } .selPlace .restrGarden .locate li:nth-child(14) { top:176px; left:29px; } .selPlace .restrGarden .locate li:nth-child(15) { top:112px; left:349px; } .selPlace .restrGarden .locate li:nth-child(16) { top:112px; left:240px; } .selPlace .restrGarden .locate li:nth-child(17) { top:112px; left:135px; } .selPlace .restrGarden .locate li:nth-child(18) { top:112px; left:29px; } .selPlace .restrGarden .locate li:nth-child(19) { top:300px; left:567px; } .selPlace .restrGarden .locate li:nth-child(20) { top:240px; left:567px; } .selPlace .restrGarden .locate li:nth-child(21) { top:176px; left:455px; } .selPlace .restrGarden + .chkName { min-height:75px; padding:0; font-size:0; line-height:0; } /* 장소선택-빌리지 */ .selPlace .villageAll img { height:725px; } .selPlace .villageAll .whole .bg { background-image:url('/mobile/img/202003170001/place_caribbean.jpg'); } .selPlace .villageAll .whole .pos { width:33%; height:37%; } .selPlace .villageAll .locate li { width:11px; height:11px; background:#1b9bf0; border:solid 2px #fff; border-radius:50px; } .selPlace .villageAll .locate li > span { position:absolute; bottom:17px; width:auto; height:20px; border-radius:3px; padding:0 8px; font-family:'Noto Sans KR'; font-size:12px; font-weight:300; line-height:18px; box-shadow:5px 5px 5px rgba(0,0,0,.3); white-space:nowrap; } .selPlace .villageAll .locate li > span:after { content:''; position:absolute; z-index:2; top:100%; left:50%; width:10px; height:7px; background:url('/mobile/img/202003170001/mark_place.png') 0 bottom no-repeat; background-size:auto 15px; margin:-1px 0 0 -5px; display:block; } .selPlace .villageAll .locate li.end { background:#333; } .selPlace .villageAll .locate li.end span:after { background-position:-15px bottom; } .selPlace .villageAll .locate li.choice { background:#fe5730; } .selPlace .villageAll .locate li.choice span:after { background-position:-30px bottom; } .selPlace .villageAll .locate li:before { content:''; width:100%; height:100%; display:block; opacity:0; } .selPlace .villageAll .locate li:nth-child(3) span, .selPlace .villageAll .locate li:nth-child(4) span, .selPlace .villageAll .locate li:nth-child(7) span, .selPlace .villageAll .locate li:nth-child(10) span, .selPlace .villageAll .locate li:nth-child(14) span, .selPlace .villageAll .locate li:nth-child(18) span, .selPlace .villageAll .locate li:nth-child(20) span, .selPlace .villageAll .locate li:nth-child(22) span { top:17px; bottom:auto; } .selPlace .villageAll .locate li:nth-child(3) span:after, .selPlace .villageAll .locate li:nth-child(4) span:after, .selPlace .villageAll .locate li:nth-child(7) span:after, .selPlace .villageAll .locate li:nth-child(10) span:after, .selPlace .villageAll .locate li:nth-child(14) span:after, .selPlace .villageAll .locate li:nth-child(18) span:after, .selPlace .villageAll .locate li:nth-child(20) span:after, .selPlace .villageAll .locate li:nth-child(22) span:after { top:auto; bottom:100%; background-position:0 top; margin-top:0; margin-bottom:-1px; } .selPlace .villageAll .locate li:nth-child(3).end span:after, .selPlace .villageAll .locate li:nth-child(4).end span:after, .selPlace .villageAll .locate li:nth-child(7).end span:after, .selPlace .villageAll .locate li:nth-child(10).end span:after, .selPlace .villageAll .locate li:nth-child(14).end span:after, .selPlace .villageAll .locate li:nth-child(18).end span:after, .selPlace .villageAll .locate li:nth-child(20).end span:after, .selPlace .villageAll .locate li:nth-child(22).end span:after { background-position:-15px top; } .selPlace .villageAll .locate li:nth-child(3).choice span:after, .selPlace .villageAll .locate li:nth-child(4).choice span:after, .selPlace .villageAll .locate li:nth-child(7).choice span:after, .selPlace .villageAll .locate li:nth-child(10).choice span:after, .selPlace .villageAll .locate li:nth-child(14).choice span:after, .selPlace .villageAll .locate li:nth-child(18).choice span:after, .selPlace .villageAll .locate li:nth-child(20).choice span:after, .selPlace .villageAll .locate li:nth-child(22).choice span:after { background-position:-30px top; } .selPlace .villageAll .locate li:nth-child(1) { top:402px; left:660px; } .selPlace .villageAll .locate li:nth-child(1) span { left:-34px; } .selPlace .villageAll .locate li:nth-child(2) { top:435px; left:601px; } .selPlace .villageAll .locate li:nth-child(2) span { left:-62px; } .selPlace .villageAll .locate li:nth-child(3) { top:450px; left:656px; } .selPlace .villageAll .locate li:nth-child(3) span { left:-45px; } .selPlace .villageAll .locate li:nth-child(4) { top:505px; left:650px; } .selPlace .villageAll .locate li:nth-child(4) span { left:-46px; } .selPlace .villageAll .locate li:nth-child(5) { top:59px; left:724px; } .selPlace .villageAll .locate li:nth-child(5) span { left:-34px; } .selPlace .villageAll .locate li:nth-child(6) { top:157px; left:645px; } .selPlace .villageAll .locate li:nth-child(6) span { left:-39px; } .selPlace .villageAll .locate li:nth-child(7) { top:246px; left:733px; } .selPlace .villageAll .locate li:nth-child(7) span { left:-39px; } .selPlace .villageAll .locate li:nth-child(8) { top:248px; left:791px; } .selPlace .villageAll .locate li:nth-child(8) span { left:-45px; } .selPlace .villageAll .locate li:nth-child(9) { top:221px; left:640px; } .selPlace .villageAll .locate li:nth-child(9) span { left:-39px; } .selPlace .villageAll .locate li:nth-child(10) { top:304px; left:772px; } .selPlace .villageAll .locate li:nth-child(10) span { left:-34px; } .selPlace .villageAll .locate li:nth-child(11) { top:275px; left:469px; } .selPlace .villageAll .locate li:nth-child(11) span { left:-34px; } .selPlace .villageAll .locate li:nth-child(12) { top:278px; left:379px; } .selPlace .villageAll .locate li:nth-child(12) span { left:-34px; } .selPlace .villageAll .locate li:nth-child(13) { top:282px; left:584px; } .selPlace .villageAll .locate li:nth-child(13) span { left:-45px; } .selPlace .villageAll .locate li:nth-child(14) { top:299px; left:383px; } .selPlace .villageAll .locate li:nth-child(14) span { left:-40px; } .selPlace .villageAll .locate li:nth-child(15) { top:302px; left:429px; } .selPlace .villageAll .locate li:nth-child(15) span { top:-7px; bottom:auto; left:17px; } .selPlace .villageAll .locate li:nth-child(15) span:after { top:5px; left:-6px; width:7px; height:10px; background-position:-50px top; margin:0; } .selPlace .villageAll .locate li:nth-child(15).end span:after { background-position:-60px top; } .selPlace .villageAll .locate li:nth-child(15).choice span:after { background-position:-70px top; } .selPlace .villageAll .locate li:nth-child(16) { top:286px; left:287px; } .selPlace .villageAll .locate li:nth-child(16) span { left:-45px; } .selPlace .villageAll .locate li:nth-child(17) { top:379px; left:81px; } .selPlace .villageAll .locate li:nth-child(17) span { left:-39px; } .selPlace .villageAll .locate li:nth-child(18) { top:495px; left:545px; } .selPlace .villageAll .locate li:nth-child(18) span { left:-50px; } .selPlace .villageAll .locate li:nth-child(19) { top:509px; left:278px; } .selPlace .villageAll .locate li:nth-child(19) span { left:-56px; } .selPlace .villageAll .locate li:nth-child(19) span { left:-50px; } .selPlace .villageAll .locate li:nth-child(20) { top:305px; left:250px; } .selPlace .villageAll .locate li:nth-child(20) span { left:-50px; } .selPlace .villageAll .locate li:nth-child(21) { top:407px; left:363px; } .selPlace .villageAll .locate li:nth-child(21) span { left:-45px; } .selPlace .villageAll .locate li:nth-child(22) { top:418px; left:90px; } .selPlace .villageAll .locate li:nth-child(22) span { left:-44px; } /* 자리선택-빌리지, 스파 빌리지 */ .selPlace .villageAqua1 img { height:400px } .selPlace .villageAqua1 .whole .bg { background-image:url('/mobile/img/202003170001/place_village_01.jpg'); } .selPlace .villageAqua1 .whole .pos { width:46%; height:70%; } .selPlace .villageAqua1 .locate li:nth-child(1) { top:160px; left:115px; } .selPlace .villageAqua1 .locate li:nth-child(2) { top:135px; left:168px; } .selPlace .villageAqua1 .locate li:nth-child(3) { top:140px; left:227px; } .selPlace .villageAqua1 .locate li:nth-child(4) { top:160px; left:320px; } .selPlace .villageAqua1 .locate li:nth-child(5) { top:202px; left:377px; } /* 자리선택-빌리지, 아쿠아틱 데이베드 */ .selPlace .villageAqua2 img { height:436px } .selPlace .villageAqua2 .whole .bg { background-image:url('/mobile/img/202003170001/place_village_02.jpg'); background-color:#efe2c8; } .selPlace .villageAqua2 .whole .pos { width:40%; height:61%; } .selPlace .villageAqua2 .locate li { width:86px; height:86px; border-radius:100px; } .selPlace .villageAqua2 .locate li span { position:absolute; bottom:-10px; left:50%; margin-left:-10px; } .selPlace .villageAqua2 .locate li:nth-child(1) span, .selPlace .villageAqua2 .locate li:nth-child(2) span, .selPlace .villageAqua2 .locate li:nth-child(3) span { top:-15px; margin-left:-6px; } .selPlace .villageAqua2 .locate li:nth-child(1) { top:264px; left:202px; } .selPlace .villageAqua2 .locate li:nth-child(2) { top:230px; left:111px; } .selPlace .villageAqua2 .locate li:nth-child(3) { top:125px; left:63px; } .selPlace .villageAqua2 .locate li:nth-child(4) { top:69px; left:158px; } .selPlace .villageAqua2 .locate li:nth-child(5) { top:69px; left:250px; } .selPlace .villageAqua2 .locate li:nth-child(6) { top:69px; left:342px; } .selPlace .villageAqua2 .locate li:nth-child(7) { top:69px; left:434px; } .selPlace .villageAqua2 .locate li:nth-child(8) { top:173px; left:343px; } /* 자리선택-빌리지, 아쿠아틱 카바나 */ .selPlace .villageAqua3 img { height:400px } .selPlace .villageAqua3 .whole .bg { background-image:url('/mobile/img/202003170001/place_village_03.jpg'); } .selPlace .villageAqua3 .whole .pos { width:42%; height:61%; } .selPlace .villageAqua3 .locate li span { margin:0 auto; } .selPlace .villageAqua3 .locate li:nth-child(1) { top:86px; left:130px; width:170px; height:110px; padding-top:15px; } .selPlace .villageAqua3 .locate li:nth-child(2) { top:86px; left:306px; width:174px; height:110px; padding-top:15px; } .selPlace .villageAqua3 .locate li:nth-child(3) { top:200px; left:393px; width:88px; height:156px; padding-top:50px; } .selPlace .villageAqua3 .locate li:nth-child(4) { top:266px; left:305px; width:83px; height:89px; padding-top:5px; } .selPlace .villageAqua3 .locate li:nth-child(5) { top:266px; left:215px; width:81px; height:89px; padding-top:5px; } .selPlace .villageAqua3 .locate li:nth-child(6) { top:266px; left:130px; width:79px; height:89px; padding-top:5px; } /* 자리선택-빌리지, 타워 빌리지 */ .selPlace .villageWild1 img { height:530px } .selPlace .villageWild1 .whole .bg { background-image:url('/mobile/img/202003170001/place_village_04.jpg'); } .selPlace .villageWild1 .whole .pos { width:42%; height:61%; } .selPlace .villageWild1 .locate li:nth-child(1) { top:395px; left:446px; } .selPlace .villageWild1 .locate li:nth-child(2) { top:401px; left:475px; } .selPlace .villageWild1 .locate li:nth-child(3) { top:405px; left:499px; } .selPlace .villageWild1 .locate li:nth-child(4) { top:410px; left:524px; } .selPlace .villageWild1 .locate li:nth-child(5) { top:414px; left:547px; } .selPlace .villageWild1 .locate li:nth-child(6) { top:300px; left:150px; } .selPlace .villageWild1 .locate li:nth-child(7) { top:300px; left:188px; } .selPlace .villageWild1 .locate li:nth-child(8) { top:300px; left:226px; } .selPlace .villageWild1 .locate li:nth-child(9) { top:300px; left:264px; } .selPlace .villageWild1 .locate li:nth-child(10) { top:300px; left:302px; } .selPlace .villageWild1 .locate li:nth-child(11) { top:273px; left:422px; } .selPlace .villageWild1 .locate li:nth-child(12) { top:278px; left:450px; } .selPlace .villageWild1 .locate li:nth-child(13) { top:285px; left:485px; } .selPlace .villageWild1 .locate li:nth-child(14) { top:290px; left:512px; } .selPlace .villageWild1 .locate li:nth-child(15) { top:287px; left:623px; } .selPlace .villageWild1 .locate li:nth-child(16) { top:280px; left:661px; } .selPlace .villageWild1 .locate li:nth-child(17) { top:250px; left:145px; } .selPlace .villageWild1 .locate li:nth-child(18) { top:250px; left:180px; } .selPlace .villageWild1 .locate li:nth-child(19) { top:250px; left:215px; } .selPlace .villageWild1 .locate li:nth-child(20) { top:250px; left:250px; } .selPlace .villageWild1 .locate li:nth-child(21) { top:150px; left:340px; } .selPlace .villageWild1 .locate li:nth-child(22) { top:157px; left:371px; } .selPlace .villageWild1 .locate li:nth-child(23) { top:185px; left:507px; } .selPlace .villageWild1 .locate li:nth-child(24) { top:179px; left:545px; } .selPlace .villageWild1 .locate li:nth-child(25) { top:174px; left:571px; } .selPlace .villageWild1 .locate li:nth-child(26) { top:169px; left:601px; } /* 자리선택-빌리지, 래프트 빌리지 */ .selPlace .villageWild2 img { height:520px } .selPlace .villageWild2 .whole .bg { background-image:url('/mobile/img/202003170001/place_village_05.jpg'); } .selPlace .villageWild2 .whole .pos { width:42%; height:61%; } .selPlace .villageWild2 .locate li:nth-child(1) { top:380px; left:457px; } .selPlace .villageWild2 .locate li:nth-child(2) { top:361px; left:436px; } .selPlace .villageWild2 .locate li:nth-child(3) { top:329px; left:409px; } .selPlace .villageWild2 .locate li:nth-child(4) { top:310px; left:386px; } .selPlace .villageWild2 .locate li:nth-child(5) { top:284px; left:353px; } .selPlace .villageWild2 .locate li:nth-child(6) { top:267px; left:326px; } .selPlace .villageWild2 .locate li:nth-child(7) { top:243px; left:288px; } .selPlace .villageWild2 .locate li:nth-child(8) { top:230px; left:260px; } .selPlace .villageWild2 .locate li:nth-child(9) { top:207px; left:220px; } .selPlace .villageWild2 .locate li:nth-child(10) { top:193px; left:192px; } .selPlace .villageWild2 .locate li:nth-child(11) { top:170px; left:145px; } .selPlace .villageWild2 .locate li:nth-child(12) { top:160px; left:113px; } /* 자리선택-빌리지, 와일드 라운지 */ .selPlace .villageWild3 img { height:575px } .selPlace .villageWild3 .whole .bg { background-image:url('/mobile/img/202003170001/place_village_06.jpg'); } .selPlace .villageWild3 .whole .pos { width:42%; height:61%; } .selPlace .villageWild3 .locate li:nth-child(1) { top:490px; left:239px; } .selPlace .villageWild3 .locate li:nth-child(2) { top:471px; left:346px; } .selPlace .villageWild3 .locate li:nth-child(3) { top:452px; left:452px; } .selPlace .villageWild3 .locate li:nth-child(4) { top:435px; left:562px; } /* 자리선택-빌리지, 와일드 데이베드 */ .selPlace .villageWild4 img { height:575px } .selPlace .villageWild4 .whole .bg { background-image:url('/mobile/img/202003170001/place_village_06.jpg'); } .selPlace .villageWild4 .whole .pos { width:42%; height:61%; } .selPlace .villageWild4 .locate li:nth-child(1) { top:40px; left:650px; } .selPlace .villageWild4 .locate li:nth-child(2) { top:78px; left:677px; } .selPlace .villageWild4 .locate li:nth-child(3) { top:123px; left:697px; } .selPlace .villageWild4 .locate li:nth-child(4) { top:171px; left:708px; } /* 자리선택-빌리지, 산후앙 빌리지 */ .selPlace .villageWild5 img { height:530px } .selPlace .villageWild5 .whole .bg { background-image:url('/mobile/img/202003170001/place_village_07.jpg'); } .selPlace .villageWild5 .whole .pos { width:42%; height:61%; } .selPlace .villageWild5 .locate li:nth-child(1) { top:163px; left:225px; } .selPlace .villageWild5 .locate li:nth-child(2) { top:173px; left:253px; } .selPlace .villageWild5 .locate li:nth-child(3) { top:183px; left:280px; } .selPlace .villageWild5 .locate li:nth-child(4) { top:248px; left:319px; } .selPlace .villageWild5 .locate li:nth-child(5) { top:270px; left:338px; } .selPlace .villageWild5 .locate li:nth-child(6) { top:90px; left:330px; } .selPlace .villageWild5 .locate li:nth-child(7) { top:110px; left:345px; } .selPlace .villageWild5 .locate li:nth-child(8) { top:130px; left:363px; } .selPlace .villageWild5 .locate li:nth-child(9) { top:170px; left:380px; } .selPlace .villageWild5 .locate li:nth-child(10) { top:190px; left:397px; } .selPlace .villageWild5 .locate li:nth-child(11) { top:210px; left:413px; } .selPlace .villageWild5 .locate li:nth-child(12) { top:263px; left:435px; } .selPlace .villageWild5 .locate li:nth-child(13) { top:282px; left:452px; } .selPlace .villageWild5 .locate li:nth-child(14) { top:301px; left:470px; } .selPlace .villageWild5 .locate li:nth-child(15) { top:74px; left:427px; } .selPlace .villageWild5 .locate li:nth-child(16) { top:93px; left:443px; } .selPlace .villageWild5 .locate li:nth-child(17) { top:114px; left:460px; } .selPlace .villageWild5 .locate li:nth-child(18) { top:135px; left:478px; } .selPlace .villageWild5 .locate li:nth-child(19) { top:187px; left:503px; } .selPlace .villageWild5 .locate li:nth-child(20) { top:208px; left:517px; } .selPlace .villageWild5 .locate li:nth-child(21) { top:228px; left:532px; } .selPlace .villageWild5 .locate li:nth-child(22) { top:247px; left:547px; } /* 자리선택-빌리지, 키디 빌리지 */ .selPlace .villageWild6 img { height:530px } .selPlace .villageWild6 .whole .bg { background-image:url('/mobile/img/202003170001/place_village_08.jpg'); } .selPlace .villageWild6 .whole .pos { width:42%; height:61%; } .selPlace .villageWild6 .locate li:nth-child(1) { top:90px; left:295px; } .selPlace .villageWild6 .locate li:nth-child(2) { top:93px; left:330px; } .selPlace .villageWild6 .locate li:nth-child(3) { top:103px; left:365px; } .selPlace .villageWild6 .locate li:nth-child(4) { top:116px; left:397px; } .selPlace .villageWild6 .locate li:nth-child(5) { top:134px; left:428px; } .selPlace .villageWild6 .locate li:nth-child(6) { top:153px; left:452px; } .selPlace .villageWild6 .locate li:nth-child(7) { top:178px; left:480px; } .selPlace .villageWild6 .locate li:nth-child(8) { top:198px; left:503px; } .selPlace .villageWild6 .locate li:nth-child(9) { top:219px; left:525px; } .selPlace .villageWild6 .locate li:nth-child(10) { top:243px; left:543px; } .selPlace .villageWild6 .locate li:nth-child(11) { top:270px; left:562px; } .selPlace .villageWild6 .locate li:nth-child(12) { top:297px; left:582px; } .selPlace .villageWild6 .locate li:nth-child(13) { top:325px; left:598px; } .selPlace .villageWild6 .locate li:nth-child(14) { top:356px; left:613px; } .selPlace .villageWild6 .locate li:nth-child(15) { top:390px; left:627px; } .selPlace .villageWild6 .locate li:nth-child(16) { top:420px; left:640px; } .selPlace .villageWild6 .locate li:nth-child(17) { top:453px; left:650px; } /* 자리선택-빌리지, 서핑 빌리지 */ .selPlace .villageFort1 img { height:530px } .selPlace .villageFort1 .whole .bg { background-image:url('/mobile/img/202003170001/place_village_09.jpg'); } .selPlace .villageFort1 .whole .pos { width:42%; height:61%; } .selPlace .villageFort1 .locate li:nth-child(1) { top:323px; left:268px; } .selPlace .villageFort1 .locate li:nth-child(2) { top:296px; left:258px; } .selPlace .villageFort1 .locate li:nth-child(3) { top:267px; left:247px; } .selPlace .villageFort1 .locate li:nth-child(4) { top:240px; left:235px; } .selPlace .villageFort1 .locate li:nth-child(5) { top:210px; left:215px; } .selPlace .villageFort1 .locate li:nth-child(6) { top:185px; left:200px; } .selPlace .villageFort1 .locate li:nth-child(7) { top:160px; left:185px; } /* 자리선택-빌리지, 캐슬 빌리지 */ .selPlace .villageFort2 img { height:530px } .selPlace .villageFort2 .whole .bg { background-image:url('/mobile/img/202003170001/place_village_10.jpg'); } .selPlace .villageFort2 .whole .pos { width:42%; height:61%; } .selPlace .villageFort2 .locate li:nth-child(1) { top:460px; left:149px; } .selPlace .villageFort2 .locate li:nth-child(2) { top:425px; left:160px; } .selPlace .villageFort2 .locate li:nth-child(3) { top:392px; left:171px; } .selPlace .villageFort2 .locate li:nth-child(4) { top:360px; left:183px; } .selPlace .villageFort2 .locate li:nth-child(5) { top:334px; left:199px; } .selPlace .villageFort2 .locate li:nth-child(6) { top:308px; left:216px; } .selPlace .villageFort2 .locate li:nth-child(7) { top:283px; left:237px; } .selPlace .villageFort2 .locate li:nth-child(8) { top:258px; left:256px; } .selPlace .villageFort2 .locate li:nth-child(9) { top:236px; left:279px; } .selPlace .villageFort2 .locate li:nth-child(10) { top:215px; left:303px; } .selPlace .villageFort2 .locate li:nth-child(11) { top:195px; left:328px; } .selPlace .villageFort2 .locate li:nth-child(12) { top:176px; left:353px; } .selPlace .villageFort2 .locate li:nth-child(13) { top:159px; left:380px; } .selPlace .villageFort2 .locate li:nth-child(14) { top:142px; left:408px; } .selPlace .villageFort2 .locate li:nth-child(15) { top:127px; left:436px; } .selPlace .villageFort2 .locate li:nth-child(16) { top:113px; left:463px; } .selPlace .villageFort2 .locate li:nth-child(17) { top:101px; left:490px; } .selPlace .villageFort2 .locate li:nth-child(18) { top:90px; left:521px; } .selPlace .villageFort2 .locate li:nth-child(19) { top:80px; left:548px; } .selPlace .villageFort2 .locate li:nth-child(20) { top:73px; left:576px; } /* 자리선택-빌리지, 어드벤처 빌리지 */ .selPlace .villageFort3 img { height:520px } .selPlace .villageFort3 .whole .bg { background-image:url('/mobile/img/202003170001/place_village_11.jpg'); } .selPlace .villageFort3 .whole .pos { width:42%; height:61%; } .selPlace .villageFort3 .locate li:nth-child(1) { top:113px; left:290px; } .selPlace .villageFort3 .locate li:nth-child(2) { top:130px; left:315px; } .selPlace .villageFort3 .locate li:nth-child(3) { top:147px; left:335px; } .selPlace .villageFort3 .locate li:nth-child(4) { top:170px; left:365px; } .selPlace .villageFort3 .locate li:nth-child(5) { top:188px; left:386px; } .selPlace .villageFort3 .locate li:nth-child(6) { top:207px; left:405px; } .selPlace .villageFort3 .locate li:nth-child(7) { top:237px; left:432px; } .selPlace .villageFort3 .locate li:nth-child(8) { top:258px; left:449px; } .selPlace .villageFort3 .locate li:nth-child(9) { top:280px; left:465px; } .selPlace .villageFort3 .locate li:nth-child(10) { top:308px; left:483px; } .selPlace .villageFort3 .locate li:nth-child(11) { top:337px; left:494px; } .selPlace .villageFort3 .locate li:nth-child(12) { top:366px; left:503px; } /* 자리선택-빌리지, 리버웨이 데이베드 */ .selPlace .villageFort4 img { height:530px } .selPlace .villageFort4 .whole .bg { background-image:url('/mobile/img/202003170001/place_village_12.jpg'); } .selPlace .villageFort4 .whole .pos { width:42%; height:61%; } .selPlace .villageFort4 .locate li:nth-child(1) { top:343px; left:251px; } .selPlace .villageFort4 .locate li:nth-child(2) { top:312px; left:262px; } .selPlace .villageFort4 .locate li:nth-child(3) { top:285px; left:280px; } .selPlace .villageFort4 .locate li:nth-child(4) { top:258px; left:301px; } .selPlace .villageFort4 .locate li:nth-child(5) { top:237px; left:322px; } .selPlace .villageFort4 .locate li:nth-child(6) { top:218px; left:345px; } .selPlace .villageFort4 .locate li:nth-child(7) { top:201px; left:370px; } .selPlace .villageFort4 .locate li:nth-child(8) { top:186px; left:396px; } .selPlace .villageFort4 .locate li:nth-child(9) { top:171px; left:422px; } .selPlace .villageFort4 .locate li:nth-child(10) { top:159px; left:447px; } .selPlace .villageFort4 .locate li:nth-child(11) { top:148px; left:474px; } .selPlace .villageFort4 .locate li:nth-child(12) { top:138px; left:501px; } .selPlace .villageFort4 .locate li:nth-child(13) { top:129px; left:530px; } /* 자리선택-빌리지, 카바나 빌리지 */ .selPlace .villageFort5 img { height:530px } .selPlace .villageFort5 .whole .bg { background-image:url('/mobile/img/202003170001/place_village_13.jpg'); } .selPlace .villageFort5 .whole .pos { width:42%; height:61%; } .selPlace .villageFort5 .locate li:nth-child(1) { top:405px; left:355px; } .selPlace .villageFort5 .locate li:nth-child(2) { top:370px; left:350px; } .selPlace .villageFort5 .locate li:nth-child(3) { top:370px; left:305px; } .selPlace .villageFort5 .locate li:nth-child(4) { top:330px; left:300px; } .selPlace .villageFort5 .locate li:nth-child(5) { top:280px; left:270px; } .selPlace .villageFort5 .locate li:nth-child(6) { top:265px; left:238px; } .selPlace .villageFort5 .locate li:nth-child(7) { top:235px; left:255px; } .selPlace .villageFort5 .locate li:nth-child(8) { top:247px; left:287px; } .selPlace .villageFort5 .locate li:nth-child(9) { top:218px; left:312px; } .selPlace .villageFort5 .locate li:nth-child(10) { top:197px; left:342px; } .selPlace .villageFort5 .locate li:nth-child(11) { top:210px; left:275px; } .selPlace .villageFort5 .locate li:nth-child(12) { top:184px; left:304px; } .selPlace .villageFort5 .locate li:nth-child(13) { top:165px; left:332px; } .selPlace .villageFort5 .locate li:nth-child(14) { top:148px; left:363px; } .selPlace .villageFort5 .locate li:nth-child(15) { top:180px; left:375px; } .selPlace .villageFort5 .locate li:nth-child(16) { top:212px; left:386px; } .selPlace .villageFort5 .locate li:nth-child(17) { top:242px; left:396px; } .selPlace .villageFort5 .locate li:nth-child(18) { top:274px; left:407px; } .selPlace .villageFort5 .locate li:nth-child(19) { top:305px; left:417px; } .selPlace .villageFort5 .locate li:nth-child(20) { top:338px; left:427px; } .selPlace .villageFort5 .locate li:nth-child(21) { top:370px; left:438px; } /* 자리선택-빌리지, 슬라이드 빌리지 */ .selPlace .villageSlide img { height:530px } .selPlace .villageSlide .whole .bg { background-image:url('/mobile/img/202003170001/place_village_14.jpg'); } .selPlace .villageSlide .whole .pos { width:42%; height:61%; } .selPlace .villageSlide .locate li:nth-child(1) { top:155px; left:383px; } .selPlace .villageSlide .locate li:nth-child(2) { top:135px; left:343px; } .selPlace .villageSlide .locate li:nth-child(3) { top:200px; left:400px; } .selPlace .villageSlide .locate li:nth-child(4) { top:180px; left:360px; } .selPlace .villageSlide .locate li:nth-child(5) { top:160px; left:320px; } .selPlace .villageSlide .locate li:nth-child(6) { top:226px; left:376px; } .selPlace .villageSlide .locate li:nth-child(7) { top:206px; left:336px; } .selPlace .villageSlide .locate li:nth-child(8) { top:186px; left:296px; } .selPlace .villageSlide .locate li:nth-child(9) { top:252px; left:353px; } .selPlace .villageSlide .locate li:nth-child(10) { top:232px; left:313px; } .selPlace .villageSlide .locate li:nth-child(11) { top:212px; left:273px; } .selPlace .villageSlide .locate li:nth-child(12) { top:192px; left:233px; } .selPlace .villageSlide .locate li:nth-child(13) { top:259px; left:289px; } .selPlace .villageSlide .locate li:nth-child(14) { top:239px; left:249px; } .selPlace .villageSlide .locate li:nth-child(15) { top:219px; left:209px; } .selPlace .villageSlide .locate li:nth-child(16) { top:288px; left:263px; } .selPlace .villageSlide .locate li:nth-child(17) { top:268px; left:223px; } .selPlace .villageSlide .locate li:nth-child(18) { top:248px; left:183px; } .selPlace .villageSlide .locate li:nth-child(19) { top:297px; left:196px; } .selPlace .villageSlide .locate li:nth-child(20) { top:277px; left:156px; } .selPlace .villageSlide .locate li:nth-child(21) { top:228px; left:143px; } .selPlace .villageSlide .locate li:nth-child(22) { top:199px; left:170px; } .selPlace .villageSlide .locate li:nth-child(23) { top:172px; left:194px; } .selPlace .villageSlide .locate li:nth-child(24) { top:146px; left:217px; } .selPlace .villageSlide .locate li:nth-child(25) { top:210px; left:480px; } .selPlace .villageSlide .locate li:nth-child(26) { top:185px; left:503px; } .selPlace .villageSlide .locate li:nth-child(27) { top:225px; left:515px; } .selPlace .villageSlide .locate li:nth-child(28) { top:200px; left:538px; } /* 자리선택-빌리지, 웨이브 빌리지 */ .selPlace .villageWave img { height:530px } .selPlace .villageWave .whole .bg { background-image:url('/mobile/img/202003170001/place_village_15.jpg'); } .selPlace .villageWave .whole .pos { width:42%; height:61%; } .selPlace .villageWave .locate li:nth-child(1) { top:388px; left:152px; } .selPlace .villageWave .locate li:nth-child(2) { top:386px; left:184px; } .selPlace .villageWave .locate li:nth-child(3) { top:384px; left:220px; } .selPlace .villageWave .locate li:nth-child(4) { top:382px; left:255px; } .selPlace .villageWave .locate li:nth-child(5) { top:380px; left:288px; } .selPlace .villageWave .locate li:nth-child(6) { top:375px; left:90px; } .selPlace .villageWave .locate li:nth-child(7) { top:440px; left:378px; } .selPlace .villageWave .locate li:nth-child(8) { top:445px; left:410px; } .selPlace .villageWave .locate li:nth-child(9) { top:450px; left:440px; } .selPlace .villageWave .locate li:nth-child(10) { top:410px; left:381px; } .selPlace .villageWave .locate li:nth-child(11) { top:380px; left:384px; } .selPlace .villageWave .locate li:nth-child(12) { top:350px; left:389px; } .selPlace .villageWave .locate li:nth-child(13) { top:420px; left:443px; } .selPlace .villageWave .locate li:nth-child(14) { top:390px; left:446px; } .selPlace .villageWave .locate li:nth-child(15) { top:360px; left:450px; } .selPlace .villageWave .locate li:nth-child(16) { top:290px; left:270px; } .selPlace .villageWave .locate li:nth-child(17) { top:287px; left:298px; } .selPlace .villageWave .locate li:nth-child(18) { top:280px; left:325px; } .selPlace .villageWave .locate li:nth-child(19) { top:262px; left:347px; } .selPlace .villageWave .locate li:nth-child(20) { top:238px; left:360px; } .selPlace .villageWave .locate li:nth-child(21) { top:212px; left:367px; } .selPlace .villageWave .locate li:nth-child(22) { top:185px; left:370px; } .selPlace .villageWave .locate li:nth-child(23) { top:160px; left:370px; } .selPlace .villageWave .locate li:nth-child(24) { top:85px; left:528px; } .selPlace .villageWave .locate li:nth-child(25) { top:72px; left:565px; } .selPlace .villageWave .locate li:nth-child(26) { top:65px; left:593px; } .selPlace .villageWave .locate li:nth-child(27) { top:59px; left:633px; } .selPlace .villageWave .locate li:nth-child(28) { top:56px; left:662px; } .selPlace .villageWave .locate li:nth-child(29) { top:54px; left:694px; } /* 자리선택-빌리지, 웨이브S 빌리지 */ .selPlace .villageWaveS img { height:530px } .selPlace .villageWaveS .whole .bg { background-image:url('/mobile/img/202003170001/place_village_15.jpg'); } .selPlace .villageWaveS .whole .pos { width:42%; height:61%; } .selPlace .villageWaveS .locate li:nth-child(1) { top:369px; left:329px; } /* 자리선택-빌리지, 릴렉스 데이베드 */ .selPlace .villageAqua4 img { height:473px } .selPlace .villageAqua4 .whole .bg { background-image:url('/mobile/img/202003170001/place_village_16.jpg'); } .selPlace .villageAqua4 .whole .pos { width:42%; height:61%; } .selPlace .villageAqua4 .locate li span { margin:22px 0; } .selPlace .villageAqua4 .locate li:nth-child(1) { top:379px; left:165px; width:75px; height:65px; } .selPlace .villageAqua4 .locate li:nth-child(2) { top:343px; left:246px; width:75px; height:65px; } .selPlace .villageAqua4 .locate li:nth-child(3) { top:266px; left:246px; width:75px; height:65px; } .selPlace .villageAqua4 .locate li:nth-child(4) { top:188px; left:246px; width:75px; height:65px; } .selPlace .villageAqua4 .locate li:nth-child(5) { top:108px; left:246px; width:75px; height:65px; } .selPlace .villageAqua4 .locate li:nth-child(6) { top:23px; left:246px; width:75px; height:65px; } .selPlace .villageAqua4 .locate li:nth-child(7) { top:140px; left:129px; width:75px; height:65px; } /* 장소선택-실내 비치체어 */ .selPlace .chairInside img { position:absolute; top:-380px; left:-440px; height:725px; } .selPlace .chairInside .pickArea { height:290px; overflow:hidden !important; } .selPlace .chairInside .locate li { width:11px; height:11px; background:#1b9bf0; border:solid 2px #fff; border-radius:50px; } .selPlace .chairInside .locate li > span { position:absolute; left:-29px; bottom:17px; width:65px; height:20px; border-radius:3px; font-family:'Noto Sans KR'; font-size:12px; font-weight:300; line-height:18px; box-shadow:5px 5px 5px rgba(0,0,0,.3); white-space:nowrap; } .selPlace .chairInside .locate li > span:after { content:''; position:absolute; z-index:2; top:100%; left:50%; width:10px; height:7px; background:url('/mobile/img/202003170001/mark_place.png') 0 bottom no-repeat; background-size:auto 15px; margin:-1px 0 0 -5px; display:block; } .selPlace .chairInside .locate li.end { background:#333; } .selPlace .chairInside .locate li.end span:after { background-position:-15px bottom; } .selPlace .chairInside .locate li.choice { background:#fe5730; } .selPlace .chairInside .locate li.choice span:after { background-position:-30px bottom; } .selPlace .chairInside .locate li:before { content:''; width:100%; height:100%; display:block; opacity:0; } .selPlace .chairInside .locate li:nth-child(1) { top:198px; left:169px; } .selPlace .chairInside .locate li:nth-child(2) { top:147px; left:202px; } .selPlace .chairInside .locate li:nth-child(3) { top:118px; left:118px; } /* 장소선택-실외 비치체어 */ .selPlace .chairOutside img { height:725px; } .selPlace .chairOutside .whole .bg { background-image:url('/mobile/img/202003170001/place_caribbean.jpg'); } .selPlace .chairOutside .whole .pos { width:33%; height:37%; } .selPlace .chairOutside .locate li { width:11px; height:11px; background:#1b9bf0; border:solid 2px #fff; border-radius:50px; } .selPlace .chairOutside .locate li > span { position:absolute; left:50%; transform:translateX(-50%); bottom:17px; width:auto; height:20px; border-radius:3px; font-family:'Noto Sans KR'; font-size:12px; font-weight:300; line-height:18px; box-shadow:5px 5px 5px rgba(0,0,0,.3); white-space:nowrap; padding:0 8px; } .selPlace .chairOutside .locate li > span:after { content:''; position:absolute; z-index:2; top:100%; left:50%; width:10px; height:7px; background:url('/mobile/img/202003170001/mark_place.png') 0 bottom no-repeat; background-size:auto 15px; margin:-1px 0 0 -5px; display:block; } .selPlace .chairOutside .locate li.end { background:#333; } .selPlace .chairOutside .locate li.end span:after { background-position:-15px bottom; } .selPlace .chairOutside .locate li.choice { background:#fe5730; } .selPlace .chairOutside .locate li.choice span:after { background-position:-30px bottom; } .selPlace .chairOutside .locate li:before { content:''; width:100%; height:100%; display:block; opacity:0; } .selPlace .chairOutside .locate li:nth-child(1) { top:208px; left:716px; } .selPlace .chairOutside .locate li:nth-child(2) { top:445px; left:490px; } .selPlace .chairOutside .locate li:nth-child(3) { top:500px; left:280px; } .selPlace .beachChair img { height:575px; } .selPlace .beachChair .locate li > span { padding-right:0; box-shadow:4px 4px 5px rgba(0,0,0,.1); } /* 자리선택-실내 비치체어, 6층 키디풀 */ .selPlace .beachChair.inside1 .whole .bg { background-image:url('/mobile/img/202003170001/place_chair_01.jpg'); } .selPlace .beachChair.inside1 .whole .pos { width:36%; height:40%; } .selPlace .beachChair.inside1 .locate li:nth-child(1) { top:159px; left:105px; } .selPlace .beachChair.inside1 .locate li:nth-child(2) { top:172px; left:126px; } .selPlace .beachChair.inside1 .locate li:nth-child(3) { top:180px; left:150px; } .selPlace .beachChair.inside1 .locate li:nth-child(4) { top:185px; left:175px; } .selPlace .beachChair.inside1 .locate li:nth-child(5) { top:189px; left:200px; } .selPlace .beachChair.inside1 .locate li:nth-child(6) { top:189px; left:225px; } .selPlace .beachChair.inside1 .locate li:nth-child(7) { top:189px; left:250px; } .selPlace .beachChair.inside1 .locate li:nth-child(8) { top:189px; left:275px; } .selPlace .beachChair.inside1 .locate li:nth-child(9) { top:189px; left:300px; } .selPlace .beachChair.inside1 .locate li:nth-child(10) { top:189px; left:325px; } .selPlace .beachChair.inside1 .locate li:nth-child(11) { top:490px; left:371px; } .selPlace .beachChair.inside1 .locate li:nth-child(12) { top:490px; left:346px; } .selPlace .beachChair.inside1 .locate li:nth-child(13) { top:490px; left:321px; } .selPlace .beachChair.inside1 .locate li:nth-child(14) { top:490px; left:296px; } .selPlace .beachChair.inside1 .locate li:nth-child(15) { top:490px; left:271px; } .selPlace .beachChair.inside1 .locate li:nth-child(16) { top:490px; left:246px; } .selPlace .beachChair.inside1 .locate li:nth-child(17) { top:490px; left:221px; } .selPlace .beachChair.inside1 .locate li:nth-child(18) { top:483px; left:195px; } .selPlace .beachChair.inside1 .locate li:nth-child(19) { top:461px; left:180px; } .selPlace .beachChair.inside1 .locate li:nth-child(20) { top:439px; left:167px; } .selPlace .beachChair.inside1 .locate li:nth-child(21) { top:416px; left:154px; } .selPlace .beachChair.inside1 .locate li:nth-child(22) { top:394px; left:141px; } .selPlace .beachChair.inside1 .locate li:nth-child(23) { top:372px; left:126px; } .selPlace .beachChair.inside1 .locate li:nth-child(24) { top:350px; left:113px; } .selPlace .beachChair.inside1 .locate li:nth-child(25) { top:328px; left:99px; } .selPlace .beachChair.inside1 .locate li:nth-child(26) { top:306px; left:86px; } .selPlace .beachChair.inside1 .locate li:nth-child(27) { top:284px; left:71px; } .selPlace .beachChair.inside1 .locate li:nth-child(28) { top:263px; left:58px; } .selPlace .beachChair.inside1 .locate li:nth-child(29) { top:241px; left:45px; } .selPlace .beachChair.inside1 .locate li:nth-child(30) { top:220px; left:32px; } .selPlace .beachChair.inside1 .locate li:nth-child(31) { top:198px; left:17px; } .selPlace .beachChair.inside1 .locate li:nth-child(32) { top:176px; left:4px; } /* 자리선택-실내 비치체어, 5층 유아풀 */ .selPlace .beachChair.inside2 .whole .bg { background-image:url('/mobile/img/202003170001/place_chair_02.jpg'); } .selPlace .beachChair.inside2 .whole .pos { width:36%; height:40%; } .selPlace .beachChair.inside2 .locate li:nth-child(1) { top:431px; left:540px; } .selPlace .beachChair.inside2 .locate li:nth-child(2) { top:453px; left:523px; } .selPlace .beachChair.inside2 .locate li:nth-child(3) { top:471px; left:504px; } .selPlace .beachChair.inside2 .locate li:nth-child(4) { top:464px; left:345px; } .selPlace .beachChair.inside2 .locate li:nth-child(5) { top:447px; left:326px; } .selPlace .beachChair.inside2 .locate li:nth-child(6) { top:431px; left:307px; } .selPlace .beachChair.inside2 .locate li:nth-child(7) { top:414px; left:289px; } .selPlace .beachChair.inside2 .locate li:nth-child(8) { top:397px; left:269px; } .selPlace .beachChair.inside2 .locate li:nth-child(9) { top:380px; left:251px; } .selPlace .beachChair.inside2 .locate li:nth-child(10) { top:364px; left:232px; } .selPlace .beachChair.inside2 .locate li:nth-child(11) { top:347px; left:213px; } .selPlace .beachChair.inside2 .locate li:nth-child(12) { top:330px; left:195px; } .selPlace .beachChair.inside2 .locate li:nth-child(13) { top:313px; left:176px; } .selPlace .beachChair.inside2 .locate li:nth-child(14) { top:163px; left:241px; } .selPlace .beachChair.inside2 .locate li:nth-child(15) { top:163px; left:269px; } .selPlace .beachChair.inside2 .locate li:nth-child(16) { top:163px; left:299px; } .selPlace .beachChair.inside2 .locate li:nth-child(17) { top:163px; left:328px; } .selPlace .beachChair.inside2 .locate li:nth-child(18) { top:163px; left:357px; } .selPlace .beachChair.inside2 .locate li:nth-child(19) { top:163px; left:386px; } .selPlace .beachChair.inside2 .locate li:nth-child(20) { top:163px; left:414px; } .selPlace .beachChair.inside2 .locate li:nth-child(21) { top:163px; left:443px; } .selPlace .beachChair.inside2 .locate li:nth-child(22) { top:163px; left:472px; } .selPlace .beachChair.inside2 .locate li:nth-child(23) { top:163px; left:501px; } .selPlace .beachChair.inside2 .locate li:nth-child(24) { top:163px; left:530px; } .selPlace .beachChair.inside2 .locate li:nth-child(25) { top:163px; left:559px; } .selPlace .beachChair.inside2 .locate li:nth-child(26) { top:163px; left:588px; } .selPlace .beachChair.inside2 .locate li:nth-child(27) { top:163px; left:618px; } /* 자리선택-실내 비치체어, 4층 샌디풀 */ .selPlace .beachChair.inside3 .whole .bg { background-image:url('/mobile/img/202003170001/place_chair_03.jpg?ver=20220512'); } .selPlace .beachChair.inside3 .whole .pos { width:36%; height:40%; } .selPlace .beachChair.inside3 .locate li:nth-child(1) { top:204px; left:44px; } .selPlace .beachChair.inside3 .locate li:nth-child(2) { top:229px; left:44px; } .selPlace .beachChair.inside3 .locate li:nth-child(3) { top:254px; left:44px; } .selPlace .beachChair.inside3 .locate li:nth-child(4) { top:279px; left:44px; } .selPlace .beachChair.inside3 .locate li:nth-child(5) { top:304px; left:44px; } .selPlace .beachChair.inside3 .locate li:nth-child(6) { top:329px; left:44px; } .selPlace .beachChair.inside3 .locate li:nth-child(7) { top:354px; left:44px; } .selPlace .beachChair.inside3 .locate li:nth-child(8) { top:379px; left:44px; } .selPlace .beachChair.inside3 .locate li:nth-child(9) { top:204px; left:96px; } .selPlace .beachChair.inside3 .locate li:nth-child(10) { top:204px; left:121px; } .selPlace .beachChair.inside3 .locate li:nth-child(11) { top:204px; left:146px; } .selPlace .beachChair.inside3 .locate li:nth-child(12) { top:204px; left:171px; } .selPlace .beachChair.inside3 .locate li:nth-child(13) { top:204px; left:196px; } .selPlace .beachChair.inside3 .locate li:nth-child(14) { top:378px; left:112px; display:none; } .selPlace .beachChair.inside3 .locate li:nth-child(15) { top:395px; left:130px; display:none; } .selPlace .beachChair.inside3 .locate li:nth-child(16) { top:412px; left:150px; display:none; } .selPlace .beachChair.inside3 .locate li:nth-child(17) { top:428px; left:168px; display:none; } .selPlace .beachChair.inside3 .locate li:nth-child(18) { top:445px; left:188px; display:none; } .selPlace .beachChair.inside3 .locate li:nth-child(19) { top:260px; left:91px; } .selPlace .beachChair.inside3 .locate li:nth-child(20) { top:278px; left:110px; } .selPlace .beachChair.inside3 .locate li:nth-child(21) { top:296px; left:129px; } .selPlace .beachChair.inside3 .locate li:nth-child(22) { top:314px; left:148px; } .selPlace .beachChair.inside3 .locate li:nth-child(23) { top:332px; left:167px; } .selPlace .beachChair.inside3 .locate li:nth-child(24) { top:350px; left:186px; } .selPlace .beachChair.inside3 .locate li:nth-child(25) { top:368px; left:205px; } .selPlace .beachChair.inside3 .locate li:nth-child(26) { top:386px; left:224px; } .selPlace .beachChair.inside3 .locate li:nth-child(27) { top:404px; left:243px; } .selPlace .beachChair.inside3 .locate li:nth-child(28) { top:422px; left:262px; } .selPlace .beachChair.inside3 .locate li:nth-child(29) { top:437px; left:281px; } .selPlace .beachChair.inside3 .locate li:nth-child(30) { top:455px; left:300px; } .selPlace .beachChair.inside3 .locate li:nth-child(31) { top:473px; left:319px; } .selPlace .beachChair.inside3 .locate li:nth-child(32) { top:490px; left:368px; } .selPlace .beachChair.inside3 .locate li:nth-child(33) { top:495px; left:393px; } .selPlace .beachChair.inside3 .locate li:nth-child(34) { top:497px; left:418px; } .selPlace .beachChair.inside3 .locate li:nth-child(35) { top:498px; left:443px; } .selPlace .beachChair.inside3 .locate li:nth-child(36) { top:498px; left:468px; } .selPlace .beachChair.inside3 .locate li:nth-child(37) { top:498px; left:493px; } .selPlace .beachChair.inside3 .locate li:nth-child(38) { top:494px; left:518px; } .selPlace .beachChair.inside3 .locate li:nth-child(39) { top:487px; left:542px; } .selPlace .beachChair.inside3 .locate li:nth-child(40) { top:472px; left:563px; } .selPlace .beachChair.inside3 .locate li:nth-child(41) { top:515px; left:350px; } .selPlace .beachChair.inside3 .locate li:nth-child(42) { top:521px; left:374px; } .selPlace .beachChair.inside3 .locate li:nth-child(43) { top:527px; left:397px; } .selPlace .beachChair.inside3 .locate li:nth-child(44) { top:531px; left:421px; } .selPlace .beachChair.inside3 .locate li:nth-child(45) { top:532px; left:445px; } .selPlace .beachChair.inside3 .locate li:nth-child(46) { top:532px; left:469px; } .selPlace .beachChair.inside3 .locate li:nth-child(47) { top:530px; left:493px; } .selPlace .beachChair.inside3 .locate li:nth-child(48) { top:525px; left:517px; } .selPlace .beachChair.inside3 .locate li:nth-child(49) { top:516px; left:541px; } .selPlace .beachChair.inside3 .locate li:nth-child(50) { top:506px; left:563px; } .selPlace .beachChair.inside3 .locate li:nth-child(51) { top:492px; left:584px; } .selPlace .beachChair.inside3 .locate li:nth-child(52) { top:478px; left:605px; } .selPlace .beachChair.inside3 .locate li:nth-child(53) { top:460px; left:634px; } .selPlace .beachChair.inside3 .locate li:nth-child(54) { top:442px; left:651px; } .selPlace .beachChair.inside3 .locate li:nth-child(55) { top:424px; left:669px; } .selPlace .beachChair.inside3 .locate li:nth-child(56) { top:406px; left:685px; } .selPlace .beachChair.inside3 .locate li:nth-child(57) { top:442px; left:613px; } .selPlace .beachChair.inside3 .locate li:nth-child(58) { top:425px; left:630px; } .selPlace .beachChair.inside3 .locate li:nth-child(59) { top:408px; left:647px; } .selPlace .beachChair.inside3 .locate li:nth-child(60) { top:389px; left:663px; } .selPlace .beachChair.inside3 .locate li:nth-child(61) { top:344px; left:647px; } .selPlace .beachChair.inside3 .locate li:nth-child(62) { top:358px; left:667px; } .selPlace .beachChair.inside3 .locate li:nth-child(63) { top:372px; left:687px; } .selPlace .beachChair.inside3 .locate li:nth-child(64) { top:388px; left:705px; } .selPlace .beachChair.inside3 .locate li:nth-child(65) { top:403px; left:724px; } .selPlace .beachChair.inside3 .locate li:nth-child(66) { top:428px; left:746px; } .selPlace .beachChair.inside3 .locate li:nth-child(67) { top:447px; left:763px; } .selPlace .beachChair.inside3 .locate li:nth-child(68) { top:471px; left:763px; } .selPlace .beachChair.inside3 .locate li:nth-child(69) { top:495px; left:763px; } /* 자리선택-실외 비치체어, 와일드 커플체어 */ .selPlace .beachChair.outside1 .whole .bg { background-image:url('/mobile/img/202003170001/place_village_06.jpg'); } .selPlace .beachChair.outside1 .whole .pos { width:36%; height:40%; } .selPlace .beachChair.outside1 .locate li:nth-child(1) { top:456px; left:131px; } .selPlace .beachChair.outside1 .locate li:nth-child(2) { top:449px; left:169px; } .selPlace .beachChair.outside1 .locate li:nth-child(3) { top:443px; left:207px; } .selPlace .beachChair.outside1 .locate li:nth-child(4) { top:436px; left:245px; } .selPlace .beachChair.outside1 .locate li:nth-child(5) { top:429px; left:282px; } .selPlace .beachChair.outside1 .locate li:nth-child(6) { top:423px; left:319px; } .selPlace .beachChair.outside1 .locate li:nth-child(7) { top:416px; left:356px; } .selPlace .beachChair.outside1 .locate li:nth-child(8) { top:408px; left:394px; } .selPlace .beachChair.outside1 .locate li:nth-child(9) { top:401px; left:432px; } .selPlace .beachChair.outside1 .locate li:nth-child(10) { top:395px; left:469px; } .selPlace .beachChair.outside1 .locate li:nth-child(11) { top:389px; left:504px; } .selPlace .beachChair.outside1 .locate li:nth-child(12) { top:382px; left:543px; } .selPlace .beachChair.outside1 .locate li:nth-child(13) { top:375px; left:580px; } .selPlace .beachChair.outside1 .locate li:nth-child(14) { top:369px; left:619px; } .selPlace .beachChair.outside1 .locate li:nth-child(15) { top:397px; left:237px; } .selPlace .beachChair.outside1 .locate li:nth-child(16) { top:389px; left:276px; } .selPlace .beachChair.outside1 .locate li:nth-child(17) { top:382px; left:313px; } .selPlace .beachChair.outside1 .locate li:nth-child(18) { top:375px; left:351px; } .selPlace .beachChair.outside1 .locate li:nth-child(19) { top:368px; left:389px; } .selPlace .beachChair.outside1 .locate li:nth-child(20) { top:361px; left:426px; } .selPlace .beachChair.outside1 .locate li:nth-child(21) { top:354px; left:463px; } .selPlace .beachChair.outside1 .locate li:nth-child(22) { top:348px; left:498px; } .selPlace .beachChair.outside1 .locate li:nth-child(23) { top:340px; left:536px; } .selPlace .beachChair.outside1 .locate li:nth-child(24) { top:335px; left:573px; } .selPlace .beachChair.outside1 .locate li:nth-child(25) { top:328px; left:611px; } .selPlace .beachChair.outside1 .locate li:nth-child(26) { top:507px; left:49px; } .selPlace .beachChair.outside1 .locate li:nth-child(27) { top:501px; left:88px; } .selPlace .beachChair.outside1 .locate li:nth-child(28) { top:495px; left:127px; } /* 자리선택-실외 비치체어, 실외 샌디풀 */ .selPlace .beachChair.outside2 .imgBg img { height:800px; } .selPlace .beachChair.outside2 .whole .bg { background-image:url('/mobile/img/202003170001/place_chair_05.jpg'); } .selPlace .beachChair.outside2 .whole .pos { width:36%; height:40%; } .selPlace .beachChair.outside2 .locate li span { width:21px; height:21px; font-size:11px; padding-right:1px; line-height:19px; letter-spacing:-1px; } .selPlace .beachChair.outside2 .locate li:nth-child(1) { top:540px; left:1050px; } .selPlace .beachChair.outside2 .locate li:nth-child(2) { top:559px; left:1042px; } .selPlace .beachChair.outside2 .locate li:nth-child(3) { top:577px; left:1032px; } .selPlace .beachChair.outside2 .locate li:nth-child(4) { top:591px; left:1017px; } .selPlace .beachChair.outside2 .locate li:nth-child(5) { top:602px; left:999px; } .selPlace .beachChair.outside2 .locate li:nth-child(6) { top:604px; left:979px;; } .selPlace .beachChair.outside2 .locate li:nth-child(7) { top:602px; left:959px; } .selPlace .beachChair.outside2 .locate li:nth-child(8) { top:593px; left:940px; } .selPlace .beachChair.outside2 .locate li:nth-child(9) { top:584px; left:921px; } .selPlace .beachChair.outside2 .locate li:nth-child(10) { top:577px; left:902px; } .selPlace .beachChair.outside2 .locate li:nth-child(11) { top:570px; left:882px; } .selPlace .beachChair.outside2 .locate li:nth-child(12) { top:566px; left:820px; } .selPlace .beachChair.outside2 .locate li:nth-child(13) { top:567px; left:800px; } .selPlace .beachChair.outside2 .locate li:nth-child(14) { top:570px; left:780px; } .selPlace .beachChair.outside2 .locate li:nth-child(15) { top:575px; left:760px; } .selPlace .beachChair.outside2 .locate li:nth-child(16) { top:583px; left:740px; } .selPlace .beachChair.outside2 .locate li:nth-child(17) { top:597px; left:726px; } .selPlace .beachChair.outside2 .locate li:nth-child(18) { top:612px; left:713px; } .selPlace .beachChair.outside2 .locate li:nth-child(19) { top:626px; left:695px; } .selPlace .beachChair.outside2 .locate li:nth-child(20) { top:638px; left:677px; } .selPlace .beachChair.outside2 .locate li:nth-child(21) { top:645px; left:659px; } .selPlace .beachChair.outside2 .locate li:nth-child(22) { top:652px; left:639px; } .selPlace .beachChair.outside2 .locate li:nth-child(23) { top:658px; left:618px; } .selPlace .beachChair.outside2 .locate li:nth-child(24) { top:723px; left:515px; } .selPlace .beachChair.outside2 .locate li:nth-child(25) { top:734px; left:495px; } .selPlace .beachChair.outside2 .locate li:nth-child(26) { top:743px; left:474px; } .selPlace .beachChair.outside2 .locate li:nth-child(27) { top:754px; left:456px; } .selPlace .beachChair.outside2 .locate li:nth-child(28) { top:764px; left:438px; } .selPlace .beachChair.outside2 .locate li:nth-child(29) { top:330px; left:195px; } .selPlace .beachChair.outside2 .locate li:nth-child(30) { top:305px; left:180px; } .selPlace .beachChair.outside2 .locate li:nth-child(31) { top:280px; left:165px; } .selPlace .beachChair.outside2 .locate li:nth-child(32) { top:255px; left:150px; } .selPlace .beachChair.outside2 .locate li:nth-child(33) { top:230px; left:135px; } .selPlace .beachChair.outside2 .locate li:nth-child(34) { top:205px; left:120px; } .selPlace .beachChair.outside2 .locate li:nth-child(35) { top:335px; left:245px; } .selPlace .beachChair.outside2 .locate li:nth-child(36) { top:310px; left:230px; } .selPlace .beachChair.outside2 .locate li:nth-child(37) { top:285px; left:215px; } .selPlace .beachChair.outside2 .locate li:nth-child(38) { top:260px; left:200px; } .selPlace .beachChair.outside2 .locate li:nth-child(39) { top:235px; left:185px; } .selPlace .beachChair.outside2 .locate li:nth-child(40) { top:185px; left:155px; } .selPlace .beachChair.outside2 .locate li:nth-child(41) { top:160px; left:140px; } .selPlace .beachChair.outside2 .locate li:nth-child(42) { top:135px; left:125px; } .selPlace .beachChair.outside2 .locate li:nth-child(43) { top:350px; left:295px; } .selPlace .beachChair.outside2 .locate li:nth-child(44) { top:325px; left:280px; } .selPlace .beachChair.outside2 .locate li:nth-child(45) { top:300px; left:265px; } .selPlace .beachChair.outside2 .locate li:nth-child(46) { top:275px; left:250px; } .selPlace .beachChair.outside2 .locate li:nth-child(47) { top:250px; left:235px; } .selPlace .beachChair.outside2 .locate li:nth-child(48) { top:225px; left:220px; } .selPlace .beachChair.outside2 .locate li:nth-child(49) { top:165px; left:185px; } .selPlace .beachChair.outside2 .locate li:nth-child(50) { top:140px; left:170px; } .selPlace .beachChair.outside2 .locate li:nth-child(51) { top:115px; left:155px; } .selPlace .beachChair.outside2 .locate li:nth-child(52) { top:715px; left:332px; } .selPlace .beachChair.outside2 .locate li:nth-child(53) { top:692px; left:327px; } .selPlace .beachChair.outside2 .locate li:nth-child(54) { top:671px; left:319px; } .selPlace .beachChair.outside2 .locate li:nth-child(55) { top:650px; left:310px; } .selPlace .beachChair.outside2 .locate li:nth-child(56) { top:630px; left:302px; } .selPlace .beachChair.outside2 .locate li:nth-child(57) { top:611px; left:293px; } .selPlace .beachChair.outside2 .locate li:nth-child(58) { top:592px; left:283px; } .selPlace .beachChair.outside2 .locate li:nth-child(59) { top:576px; left:269px; } /* 자리선택-실외 비치체어, 실외 파도풀 */ .selPlace .beachChair.outside3 .whole .bg { background-image:url('/mobile/img/202003170001/place_chair_06.jpg?ver=20210701_2'); } .selPlace .beachChair.outside3 .whole .pos { width:36%; height:40%; } .selPlace .beachChair.outside3 .locate li:nth-child(1) { top:494px; left:214px; } .selPlace .beachChair.outside3 .locate li:nth-child(2) { top:445px; left:118px; } .selPlace .beachChair.outside3 .locate li:nth-child(3) { top:417px; left:343px; } .selPlace .beachChair.outside3 .locate li:nth-child(4) { top:324px; left:77px; } .selPlace .beachChair.outside3 .locate li:nth-child(5) { top:343px; left:380px; } .selPlace .beachChair.outside3 .locate li:nth-child(6) { top:275px; left:428px; } .selPlace .beachChair.outside3 .locate li:nth-child(7) { top:214px; left:477px; } .selPlace .beachChair.outside3 .locate li:nth-child(8) { top:191px; left:248px; } .selPlace .beachChair.outside3 .locate li:nth-child(9) { top:140px; left:196px; } .selPlace .beachChair.outside3 .locate li:nth-child(10) { top:90px; left:142px; } /* .selPlace .beachChair.outside3 .locate li:nth-child(11) { top:255px; left:175px; } .selPlace .beachChair.outside3 .locate li:nth-child(12) { top:205px; left:125px; } .selPlace .beachChair.outside3 .locate li:nth-child(13) { top:335px; left:392px; } .selPlace .beachChair.outside3 .locate li:nth-child(14) { top:290px; left:347px; } .selPlace .beachChair.outside3 .locate li:nth-child(15) { top:235px; left:290px; } .selPlace .beachChair.outside3 .locate li:nth-child(16) { top:191px; left:244px; } .selPlace .beachChair.outside3 .locate li:nth-child(17) { top:147px; left:200px; } .selPlace .beachChair.outside3 .locate li:nth-child(18) { top:103px; left:156px; } .selPlace .beachChair.outside3 .locate li:nth-child(19) { top:244px; left:434px; } .selPlace .beachChair.outside3 .locate li:nth-child(20) { top:201px; left:478px; } */ /* 자리선택- 아쿠아틱 빌리지(new) */ .selPlace .villageAqua5 img { height: 436px; } .selPlace .villageAqua5 .whole .bg { background-image:url('../img/202003170001/place_village_17.jpg'); } .selPlace .villageAqua5 .whole .pos { width:36%; height:40%; } .selPlace .villageAqua5 .locate li { width:86px; height:96px; } .selPlace .villageAqua5 .locate li span { position:absolute; left:50%; top:50%; margin-left:-11px; margin-top:-11px; } .selPlace .villageAqua5 .locate li:nth-child(1) { top:54px; left:449px; } .selPlace .villageAqua5 .locate li:nth-child(2) { top:54px; left:345px; } .selPlace .villageAqua5 .locate li:nth-child(3) { top:54px; left:251px; } .selPlace .villageAqua5 .locate li:nth-child(4) { top:54px; left:154px; } .selPlace .villageAqua5 .locate li:nth-child(5) { z-index:1; top:85px; left:49px; transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); } .selPlace .villageAqua5 .locate li:nth-child(6) { z-index:1; top:206px; left:49px; transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); } .selPlace .villageAqua5 .locate li:nth-child(7) { z-index:1; top:263px; left:117px; transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); } .selPlace .villageAqua5 .locate li:nth-child(5) span, .selPlace .villageAqua5 .locate li:nth-child(6) span, .selPlace .villageAqua5 .locate li:nth-child(7) span { transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); } .selPlace .villageAqua5 .locate li:nth-child(8) { top:316px; left:226px; } /* 자리선택- 야외비치 데이베드 */ .selPlace .beachDaybed img { height: 575px; } .selPlace .beachDaybed .whole .bg { background-image:url('/mobile/img/202003170001/place_daybed_01.jpg'); } .selPlace .beachDaybed .whole .pos { width:36%; height:40%; } .selPlace .beachDaybed .locate li { width:70px; height:70px; border-radius:100px; } .selPlace .beachDaybed .locate li span { position:absolute; } .selPlace .beachDaybed .locate li:nth-child(1) { top:337px; left:330px; } .selPlace .beachDaybed .locate li:nth-child(1) span { top:1px; left:-2px; } .selPlace .beachDaybed .locate li:nth-child(2) { top:425px; left:286px; } .selPlace .beachDaybed .locate li:nth-child(2) span { top:-4px; left:6px; } .selPlace .beachDaybed .locate li:nth-child(3) { top:462px; left:203px; } .selPlace .beachDaybed .locate li:nth-child(3) span { top:-8px; left:50%; margin-left:-11px; } .selPlace .beachDaybed .locate li:nth-child(4) { top:437px; left:116px; } .selPlace .beachDaybed .locate li:nth-child(4) span { top:6px; right:0; } .selPlace .beachDaybed .locate li:nth-child(5) { top:347px; left:62px; } .selPlace .beachDaybed .locate li:nth-child(5) span { top:50%; margin-top:-11px; right:-6px; } .selPlace .beachDaybed .locate li:nth-child(6) { top:260px; left:70px; } .selPlace .beachDaybed .locate li:nth-child(6) span { top:25px; right:-10px; } .selPlace .beachDaybed .locate li:nth-child(7) { top:178px; left:104px; } .selPlace .beachDaybed .locate li:nth-child(8) { top:96px; left:144px; } .selPlace .beachDaybed .locate li:nth-child(7) span, .selPlace .beachDaybed .locate li:nth-child(8) span { top:23px; right:-10px; } /* 자리선택- 퀵라이드 데이베드 */ .selPlace .villageAqua6 img { height: 575px; } .selPlace .villageAqua6 .locate li { width:92px; height:92px; border-radius:100px; } .selPlace .villageAqua6 .locate li span { position:absolute; bottom:-10px; left:50%; margin-left:-10px; } .selPlace .villageAqua6 .locate li:nth-child(1) { top:402px; left:231px; } .selPlace .villageAqua6 .locate li:nth-child(2) { top:402px; left:48px; } .selPlace .villageAqua6 .locate li:nth-child(3) { top:109px; left:231px; } .selPlace .villageAqua6 .locate li:nth-child(4) { top:109px; left:48px; } /* 자리선택- 슬라이드 데이베드 */ .selPlace .slideDaybed img { height: 575px; } .selPlace .slideDaybed .whole .bg { background-image:url('/mobile/img/202003170001/place_daybed_03.jpg'); } .selPlace .slideDaybed .whole .pos { width:36%; height:40%; } .selPlace .slideDaybed .locate li { width:140px; height:140px; } .selPlace .slideDaybed .locate li span { position:absolute; top:-4px; } .selPlace .slideDaybed .locate li:nth-child(1) span, .selPlace .slideDaybed .locate li:nth-child(2) span { left:40px; } .selPlace .slideDaybed .locate li:nth-child(3) span, .selPlace .slideDaybed .locate li:nth-child(4) span { left:84px; } .selPlace .slideDaybed .locate li:nth-child(1) { top:258px; left:76px; } .selPlace .slideDaybed .locate li:nth-child(2) { top:226px; left:244px; } .selPlace .slideDaybed .locate li:nth-child(3) { top:211px; left:433px; } .selPlace .slideDaybed .locate li:nth-child(4) { top:281px; left:590px; } /* 자리선택- 파도풀 데이베드 */ .selPlace .wavePoolDaybed img { height: 575px; } .selPlace .wavePoolDaybed .whole .bg { background-image:url('/mobile/img/202003170001/place_daybed_04.jpg'); } .selPlace .wavePoolDaybed .whole .pos { width:36%; height:40%; } .selPlace .wavePoolDaybed .locate li { width:122px; height:122px; } .selPlace .wavePoolDaybed .locate li span { position:absolute; bottom:-8px; left:50%; transform:translateX(-50%); } .selPlace .wavePoolDaybed .locate li:nth-child(1) { top:340px; left:87px; } .selPlace .wavePoolDaybed .locate li:nth-child(2) { top:340px; left:455px; } .selPlace .wavePoolDaybed .locate li:nth-child(3) { top:91px; left:87px; } .selPlace .wavePoolDaybed .locate li:nth-child(4) { top:91px; left:455px; } /* Error -------------------------------------------------------------------------*/ #errorCont { position:relative; height:calc(100vh - 50px); text-align:center; } #errorCont h3 { font-size:23px; font-weight:700; line-height:35px; letter-spacing:-1px; color:#000; } #errorCont h3:before { content:''; width:98px; height:96px; background-image:url('/mobile/img/202003170001/error.png'); background-repeat:no-repeat; background-size:auto 96px; margin:0 auto 30px auto; display:block; } #errorCont h3.en { font-family:'Roboto'; letter-spacing:0; } #errorCont p { font-size:14px; font-weight:100; line-height:22px; color:#222; } #errorCont .btnFix { display:block !important; } #errorCont .btnFix a:first-child { background:#edeff2 !important; } /* Page Not Found */ .errorBox1 { position:absolute; width:100%; top:50%; margin-top:-153px; padding-bottom:50px; } .errorBox1 h3 { padding-bottom:34px; } .errorBox1 h3:before { background-position:0 0; } /* 에러발생 */ .errorBox2 { position:relative; height:70%; min-height:350px; } .errorBox2 .inner { position:absolute; top:50%; width:100%; margin-top:-121px; } .errorBox2 h3 { padding-bottom:14px; } .errorBox2 h3:before { background-position:-98px 0; } .errorBox2 + .info { height:30%; min-height:190px; background:#f7f9fa; padding-top:30px; font-size:12px; font-weight:300; line-height:21px; color:#666; box-sizing:border-box; } /* 시스템 점검 안내 */ .errorBox3 { position:relative; height:70%; min-height:350px; } .errorBox3 .inner { position:absolute; top:50%; width:100%; margin-top:-143px; } .errorBox3 h3 { padding-bottom:14px; } .errorBox3 h3:before { background-position:-188px 0; } .errorBox3 + .info { height:30%; min-height:190px; background:#f7f9fa; padding-top:20px; font-size:14px; font-weight:400; line-height:24px; color:#000; box-sizing:border-box; } .errorBox3 + .info span { color:#fe5730; } /* OtherSize -------------------------------------------------------------------------*/ @media screen and (max-width:359px){ #wrapIndex .gift a { margin:0 3.2%; } #wrapIndex .member a { margin:0 2.5%; } #wrapFooter .infoBox, #wrapFooter .infoBox p span:last-child { padding-right:0; } #wrapFooter .btnAllat { margin:-32px 0 9px 0; } .dateChoice .intro { padding:0 14%; } .visitDate { padding:44px 15px 0 15px; } .visitDate .oprTime { margin:0 -15px -8px -15px; } .visitDate.cb .oprTime { font-size:10px; letter-spacing:-0.3px; } .visitDate.cb .oprTime b { font-size:11px; } .buyInfo .time.addType3 li span { padding:0 8px 0 9px; } .buyInfo .time.addType3 li.on span { padding:0 6px 0 7px; } .buyInfo .time.addType3 small { font-size:10px; } .searchRes .date input { width:87px; } .searchRes .mkBar { margin:-5px 5px 0 5px; } #popupPayState .cont dd.means .charge { padding-right:85px !important; } #popupPayState .cont dd.means .charge p br { display:none; } #popupPayState .cont dd.means .select .info input {width:80px; } #popupBankType .cont dl dd .item li a {font-size:10px !important; } } @media screen and (max-width:321px){ .cartBox h3 strong { text-align:left; padding:0 70px 0 30px; } .contactBox dd select { width:30%; } .contactBox dd:nth-child(4) input { width:24%; } .contactBox .sign { margin:-5px 0 0 5px; } #popupPayState .cont { padding:23px 20px 20px 20px; } #popupPayState .cont dd.means .select .info select { width:72px; font-size:10px; } #popupPayState .cont dd.means .select .info input { font-size:10px; } .alertInfo { padding:25px 30px; } } @media screen and (min-width:450px){ #popupLogin { top:50%; left:50%; width:75%; height:auto; } } @media screen and (max-height:639px){ .dateChoice { padding-bottom:100px; } #popupLogin { overflow-y:scroll; } } /* AddBefore -------------------------------------------------------------------------*/ /* 달력 */ #calendarWrap { position:fixed !important; z-index:999; top:50px; left:50% !important; width:320px; background:#fff; border-radius:5px; margin-left:-160px; display:none; box-sizing:border-box; } #calendarWrap h1 { font-size:1.231em; font-weight:400; color:#1c3678; text-align:center; } #calendarWrap .tit { margin:10px 9px; padding:15px 0; background:#eef3f7; line-height:1.3em; text-align:center; } #calendarWrap .calendarHeader { position:relative; margin:20px 9px 0 9px; text-align:center; } #calendarWrap .calendarHeader a { width:18px; height:25px; background-image:url('/mobile/img/202003170001/mark_arrow_cal.png?ver=20210615'); background-repeat:no-repeat; background-size:85px auto; margin-top:-4px; text-indent:-9999px; vertical-align:top; display:inline-block; overflow:hidden; } #calendarWrap .calendarHeader .h2_year { padding:0 25px; font-family:'Roboto'; font-size:26px; font-weight:400; color:#222; display:inline-block; } #calendarWrap .calendarHeader .btn_prev { background-position:left bottom; } #calendarWrap .calendarHeader .btn_next { background-position:right bottom; } #calendarWrap .calendarContainner { margin:14px 9px 15px 9px; } #calendarWrap .calendarContainner .calendarView { width:100%; border-top:1px solid #dddddd; table-layout:fixed; } #calendarWrap .calendarContainner thead th { padding:8px 0; background:#fff; font-size:12px; font-weight:normal; color:#666; vertical-align:middle; } #calendarWrap .calendarContainner tbody td { border:1px solid #fff; font-family:'Roboto'; font-size:14px; text-align:center; } #calendarWrap .calendarContainner tbody td a { padding:12px 0; color:#ccc; display:block; } #calendarWrap .calendarContainner tbody td .el_on, #calendarWrap .calendarContainner tbody td .hb_on { position:relative; color:#fff; display:block; } #calendarWrap .calendarContainner tbody td .el_on:link, #calendarWrap .calendarContainner tbody td .el_on:hover, #calendarWrap .calendarContainner tbody td .el_on:visited, #calendarWrap .calendarContainner tbody td .el_on:active { color:#fff; text-decoration:none; } #calendarWrap .calendarContainner tbody td .el_on:before, #calendarWrap .calendarContainner tbody td .hb_on:before { content:''; position:absolute; z-index:-1; top:0; left:0; width:100%; height:100%; background:#7ead21; border-radius:100px; display:block; overflow:hidden; } #calendarWrap .calendarContainner tbody td .possible { color:#444; } #calendarWrap .calendarContainner tbody td .reservation_available { color:#444; } #calendarWrap .calendarfooter { border-top:1px solid #ddd; overflow:hidden; } #calendarWrap .calendarfooter a { float:left; width:50%; height:50px; font-size:14px; line-height:50px; text-align:center; display:block; box-sizing:border-box; } #calendarWrap .calendarfooter .btn_cancel { border-right:1px solid #ddd; } /* gate-pop */ .layPopWrap { position:fixed !important; z-index:9999; top:50% !important; left:50% !important; width:280px; border-radius:5px; margin:-105px 0 0 -140px; overflow:hidden; } .layPopWrap h1 { font-size:20px; font-weight:500; line-height:23px; color:#000; text-align:center; } .layPopWrap .layPop_header { background:#fff; padding:27px 0 40px 0; } .layPopWrap .layPop_header p { margin-top:28px; font-size:13px; line-height:22px; color:#555; text-align:center; } .layPopWrap .layPop_BtnGroup a { float:left; width:50%; height:45px; background:#fe5730; font-size:14px; line-height:45px; color:#fff; text-align:center; display:block; } .layPopWrap .layPop_BtnGroup a:first-child { background:#edeff2 !important; color:#000; } .layPopWrap .layPop_BtnGroup:after { content:''; display:block; clear:both; } /* ------------------------------------------ Everland Resort Reservation Mobile :Yearly ---------------------------------------------*/ .btnFix .ymRes { width:100%; background:#9855cd !important; color:#fff !important; display:block !important; } .btnFix .ymNext { background:#9855cd; } .btnFix .mdNext { background:#F33636; } .btnFix a + .ymRes { width:50%; } /* 상품상세 */ .viewInfo .contBox .info { padding-bottom:10px; font-size:15px; display:block; } .viewInfo .contBox .info i { display:inline-block; } .viewInfo .contBox table { width:100%; border-top:solid 2px #000; margin-top:10px; } .viewInfo .contBox table th { font-weight:normal; color:#666; } .viewInfo .contBox thead th { border-bottom:solid 1px #ababab; padding:10px 0; } .viewInfo .contBox tbody th, .viewInfo .contBox tbody td { border-bottom:solid 1px #e9e9e9; padding:17px 0; text-align:center; } .viewInfo .contBox tbody td b { font-weight:500; } /* 가입옵션 */ .ymJoinInfo { position:fixed; z-index:50; top:50px; left:0; right:0; bottom:0; display:none; opacity:0; } .ymJoinInfo:before { content:''; position:fixed; z-index:1; top:0; left:0; right:0; bottom:0; background:#000; opacity:.7; display:block; } .ymJoinInfo .btnClose { position:absolute; z-index:11; top:-47px; left:50%; width:43px; height:43px; background:url('/mobile/img/202003170001/btn_close_buy.png') center center no-repeat #000; background-size:100% auto; border-radius:100px; margin-left:-22px; font-size:0; line-height:0; text-indent:-9999px; display:block; overflow:hidden; } .ymJoinInfo .optBox { position:relative; z-index:2; height:100%; background:#fff; border-radius:15px 15px 0 0; padding:0 0 100px 0; box-sizing:border-box; overflow-x:hidden; overflow-y:scroll; -webkit-overflow-scrolling:touch; scrollbar-track-color:transparent; scrollbar-face-color:#9da0a1; } .ymJoinInfo .optBox:after, .ymJoinInfo .optBox:before { content:''; position:fixed; z-index:50; left:0; right:0; height:35px; background:url('/mobile/img/202003170001/bg_buyinfo.png'); background-repeat:repeat-x; background-size:5px auto; display:none; overflow:hidden; } .ymJoinInfo .optBox:after { bottom:50px; background-position:center bottom; display:block; } .ymJoinInfo .optBox:before { top:50px; background-position:center top; border-radius:20px 20px 0 0; } .ymJoinInfo .optBox::-webkit-scrollbar { width:4px; background-color:transparent; -webkit-appearance:none; } .ymJoinInfo .optBox::-webkit-scrollbar:vertical { width:4px; background-color:transparent; } .ymJoinInfo .optBox::-webkit-scrollbar-button { width:0; height:15px; } .ymJoinInfo .optBox::-webkit-scrollbar-button:end:increment { height:50px; } .ymJoinInfo .optBox::-webkit-scrollbar-track { background-color:transparent; } .ymJoinInfo .optBox::-webkit-scrollbar-thumb { background-color:#9da0a1; border-radius:10px; opacity:.5; } .ymJoinInfo .optBox.end:after { display:none; } .ymJoinInfo .optBox.move:before { display:block; } .ymJoinInfo .optBox ul { margin:0 21px 0 25px; padding-top:25px; } .ymJoinInfo .optBox ul li { position:relative; background:#fff; border:solid 1px #e9e9e9; margin-top:10px; padding:13px 20px; font-size:14px; font-weight:500; color:#777; word-wrap:break-word; word-break:keep-all; box-sizing:border-box; } .ymJoinInfo .optBox ul li small { margin:2px 0 -1px 0; font-size:12px; font-weight:300; display:block; } .ymJoinInfo .optBox ul li mark { position:absolute; top:10px; right:9px; height:25px; background:#f3f3f3; border-radius:50px; padding:0 7px; font-size:12px; font-weight:300; line-height:25px; color:#666; display:block; } .ymJoinInfo .optBox ul li:first-child { margin-top:0; } .ymJoinInfo .optBox ul li.on { border:solid 2px #9855cd; padding:12px 19px; color:#000; } .ymJoinInfo .optBox ul li.on small { color:#9855cd; } .ymJoinInfo .optBox ul li.on mark { top:9px; right:8px; } .ymJoinInfo .optBox .tit { border-bottom:solid 8px #f7f9fa; padding:22px 0 12px 0; font-size:12px; font-weight:300; color:#444; text-align:center; } .ymJoinInfo .optBox .itemTit { position:relative; border-bottom:solid 1px #e9e9e9; margin:38px 21px 0 25px; padding:0 130px 12px 0; font-size:15px; font-weight:500; color:#000; display:block; } .ymJoinInfo .optBox .itemTit i { position:absolute; top:0; right:0; font-size:12px; font-weight:300; color:#666; display:block; } .ymJoinInfo .assoPick li i { font-weight:300; } .ymJoinInfo .assoPick mark + span { margin-right:80px; display:block; } /* 정책동의 */ .ymPolicy { padding:25px 25px 80px 25px; } .ymPolicy label { position:relative; float:right; font-size:0; line-height:0; vertical-align:bottom; display:block; overflow:hidden; } .ymPolicy label i { width:20px; height:20px; background:url('/mobile/img/202003170001/mark_check.png') left center no-repeat; background-size:auto 100%; border:solid 1px #d1d1d1; border-radius:4px; display:block; box-sizing:border-box; } .ymPolicy input { position:absolute; top:-15px; left:-15px; width:0; height:0; opacity:0; } .ymPolicy input:checked + i { background-position:right center; background-color:#9855cd; border:0; } .ymPolicy .intro { margin-bottom:50px; font-size:12px; line-height:21px; color:#666; word-wrap:break-word; word-break:keep-all; } .ymPolicy .intro i { position:relative; padding-left:15px; display:block; } .ymPolicy .intro i:before { content:'※'; position:absolute; top:0; left:0; } .ymPolicy .subj { position:relative; margin-top:30px; font-weight:300; line-height:20px; color:#000; overflow:hidden; } .ymPolicy .subj:after { content:''; display:block; clear:both; } .ymPolicy .total { position:relative; border-bottom:solid 1px #000; padding-bottom:4px; line-height:26px; color:#222; overflow:hidden; } .ymPolicy .total:after { content:''; display:block; clear:both; } .ymPolicy .chkInfo { position:relative; border-top:solid 1px #000; margin-top:30px; padding-top:15px; line-height:20px; color:#222; overflow:hidden; } .ymPolicy .chkInfo:after { content:''; display:block; clear:both; } .ymPolicy .txtbox { max-height:205px; border:solid 1px #e9e9e9; margin-top:12px; padding:15px; font-size:12px; font-weight:300; line-height:21px; word-wrap:break-word; word-break:keep-all; box-sizing:border-box; overflow-y:scroll; } .ymPolicy .txtbox b { font-weight:normal; color:#9855cd; } .ymPolicy .txtbox dt { margin-top:35px; font-weight:400; color:#000; } .ymPolicy .txtbox dd .notify { margin-top:5px; } .ymPolicy .txtbox dd, .ymPolicy .txtbox > ul > li { margin-top:10px; } .ymPolicy .txtbox dt:first-child, .ymPolicy .txtbox > ul > li:first-child { margin-top:0; } .ymPolicy .notify { position:relative; margin-top:15px; padding-left:13px; } .ymPolicy .notify:before { content:'※'; position:absolute; top:0; left:0; } .ymPolicy .refund { margin-top:5px; } .ymPolicy .refund span { position:relative; margin-left:15px; padding-left:8px; display:block; } .ymPolicy .refund span:before { content:'-'; position:absolute; top:0; left:0; } .ymPolicy .listType1 { margin:5px 0 0 8px; } .ymPolicy .listType1 li { position:relative; padding-left:8px; } .ymPolicy .listType1 li:before { content:'-'; position:absolute; top:0; left:0; } .ymPolicy .listType2 li { margin-top:7px; } .ymPolicy .listType3 { margin:5px 0 0 15px; } .ymPolicy .listType3 li { list-style:decimal; list-style-position:inside; } /* 가입종류 */ .ymJoinType { border-bottom:solid 8px #f7f9fa; padding:27px 25px 50px 25px; } .ymJoinType h3 { margin-bottom:12px; font-size:15px; font-weight:500; color:#000; } .ymJoinType ul { margin-left:-5px; } .ymJoinType ul:after { content:''; display:block; clear:both; } .ymJoinType ul li { float:left; width:50%; padding-left:5px; display:block; box-sizing:border-box; overflow:hidden; } .ymJoinType ul li a { height:48px; border:solid 1px #e9e9e9; font-size:14px; font-weight:300; color:#666; line-height:48px; text-align:center; display:block; } .ymJoinType ul li.on a { height:46px; border:solid 2px #9855cd; font-weight:500; line-height:46px; color:#9855cd; } .ymJoinType ul li:last-child { width:100%; } .ymJoinType ul li + li:last-child { width:50%; } /* 가입자 정보 입력 */ .ymJoinWrite { padding:48px 25px 50px 25px; } .ymJoinWrite h3 { border-bottom:solid 1px #000; margin-bottom:30px; padding-bottom:12px; font-size:15px; font-weight:500; color:#000; } .ymJoinWrite .notify { margin:15px 0 -6px 0; font-size:12px; color:#fe5730; line-height:21px; word-wrap:break-word; word-break:keep-all; text-align:right; } .ymJoinWrite .photo { position:relative; z-index:1; min-height:122px; margin-bottom:33px; padding-left:115px; } .ymJoinWrite .photo button { background:url('/mobile/img/202003170001/mark_move.png') right center no-repeat #fff; background-size:6px auto; margin:17px 0 0 8px; padding-right:15px; font-size:12px; color:#666; } .ymJoinWrite .photo .info { font-size:12px; font-weight:300; line-height:21px; color:666; word-wrap:break-word; word-break:keep-all; } .ymJoinWrite .photo .info li { position:relative; padding-left:8px; } .ymJoinWrite .photo .info li:before { content:'-'; position:absolute; top:0; left:0; } .ymJoinWrite .photo .picBox { position:absolute; top:0; left:0; width:95px; height:105px; background:url('/mobile/img/202003170001/icon_photo.png') center center no-repeat #d4d4d4; background-size:43px 43px; font-size:0; line-height:0; } .ymJoinWrite .photo .picBox input { position:absolute; z-index:50; top:0; left:0; width:100%; height:110px; background:transparent; font-size:0; line-height:0; opacity:0; } .ymJoinWrite .photo .picBox > p { position:relative; z-index:10; width:100%; height:100%; overflow:hidden; } .ymJoinWrite .photo .picBox > p img { height:100%; } .ymJoinWrite .photo .picBox button { position:absolute; z-index:90; top:-10px; right:-8px; width:22px; height:22px; background:url('/mobile/img/202003170001/mark_opt_x.png') center center no-repeat #fff; background-size:8px auto; border:solid 1px #e9e9e9; border-radius:50px; margin:0; padding:0; font-size:0; line-height:0; display:block; overflow:hidden; box-shadow:0 5px 5px rgba(0,0,0,.1); } .ymJoinWrite .photo .picBox .nodata { background:url('/mobile/img/202003170001/icon_noimg.png') center center no-repeat #d4d4d4; background-size:43px auto; } .ymJoinWrite .photo .picBox .nodata + p { display:none; } .ymJoinWrite .sameChk { position:relative; float:right; height:20px; margin-bottom:10px; padding-left:25px; display:block; overflow:hidden; } .ymJoinWrite .sameChk span { height:20px; line-height:20px; color:#666; display:inline-block; } .ymJoinWrite .sameChk span:before { content:''; position:absolute; top:0; left:0; width:20px; height:20px; background:url('/mobile/img/202003170001/mark_check.png') left center no-repeat; background-size:auto 100%; border:solid 1px #d1d1d1; border-radius:3px; display:block; box-sizing:border-box; } .ymJoinWrite .sameChk input { position:absolute; top:0; left:-20px; width:0; height:0; opacity:0; } .ymJoinWrite .sameChk input:checked + span:before { background-color:#9855cd; background-position:right center; border:0; } .ymJoinWrite.el .sameChk input:checked + span:before {background-color:#FE5730; border:0} .ymJoinWrite .searchApp { float:left; height:20px; background:none; border-bottom:solid 1px #9855cd; font-size:12px; color:#9855cd; } .ymJoinWrite .infoBox { width:100%; border-top:solid 1px #e9e9e9; clear:both; } .ymJoinWrite .infoBox dt { height:60px; line-height:60px; color:#666; clear:both; } .ymJoinWrite .infoBox dd { min-height:60px; border-bottom:solid 1px #e9e9e9; margin-top:-60px; padding:0 0 0 80px; text-align:right; overflow:hidden; } .ymJoinWrite .infoBox input { height:60px; border:0; padding:0; !important; font-family:'Roboto'; font-size:15px; color:#000; text-align:right; } .ymJoinWrite .infoBox input::placeholder { font-family:'Noto Sans KR'; font-size:12px; font-weight:300; color:#999; } .ymJoinWrite .infoBox input::-moz-placeholder { font-family:'Noto Sans KR'; font-size:12px; font-weight:300; color:#999; } .ymJoinWrite .infoBox input::-ms-input-placeholder { font-family:'Noto Sans KR'; font-size:12px; font-weight:300; color:#999; } .ymJoinWrite .infoBox input::-webkit-input-placeholder { font-family:'Noto Sans KR'; font-size:12px; font-weight:300; color:#999; } .ymJoinWrite .infoBox select { width:19%; max-width:60px; height:60px; background:url('/mobile/img/202003170001/mark_select.png') 95.5% 27px no-repeat transparent; background-size:11px auto; border:0; padding:0 18px 0 0; font-family:'Roboto'; font-size:14px; color:#000; vertical-align:bottom; appearance:none; -moz-appearance:none; -webkit-appearance:none; } .ymJoinWrite .infoBox button { min-width:60px; height:25px; background:#fff; border:solid 1px #d5d5d5; border-radius:25px; margin:6px 0 10px 0; padding:0 7px; font-size:12px; color:#999; letter-spacing:-0.5px; text-align:center; vertical-align:middle; display:inline-block; } .ymJoinWrite .infoBox button.active { border-color:#9e9e9e; color:#000; } .ymJoinWrite .infoBox .sep select, .ymJoinWrite .infoBox .addr select, .ymJoinWrite .infoBox .name input, .ymJoinWrite .infoBox .birthday input { font-family:'Noto Sans KR'; font-size:14px; } .ymJoinWrite .infoBox .sign { margin-top:-5px; font-weight:bold; vertical-align:middle; display:inline-block; } .ymJoinWrite .infoBox .tip { position:relative; z-index:2; width:14px; height:14px; background:url('/mobile/img/202003170001/mark_tip.png') 6px center no-repeat #fff; background-size:auto 10px; border:solid 2px #e1e1e1; border-radius:100px; margin:-2px 0 0 5px; font-size:0; line-height:0; vertical-align:middle; display:inline-block; } .ymJoinWrite .infoBox .tip > span { position:absolute; z-index:10; top:31px; left:-51px; width:67vw; min-width:220px; max-width:270px; background:#fff; border:solid 1px #b6b6b6; border-radius:7px; padding:16px 20px; font-size:12px; font-weight:300; line-height:19px; color:#444; word-wrap:break-word; word-break:keep-all; box-sizing:border-box; display:none; } .ymJoinWrite .infoBox .tip > span b { margin:17px 0 4px 0; font-size:12px; color:#000; display:block; } .ymJoinWrite .infoBox .tip > span:before { content:''; position:absolute; top:-14px; left:50px; width:17px; height:14px; background:url('/mobile/img/202003170001/mark_tooltip.png') left bottom no-repeat; background-size:auto 100%; display:block; } .ymJoinWrite .infoBox .tip.active > span { display:block; } .ymJoinWrite .infoBox .sep { float:right; width:70px; margin-top:-61px; padding-left:0; } .ymJoinWrite .infoBox .sep select { width:100%; max-width:none; padding-left:15px; } .ymJoinWrite .infoBox .addr select { width:42%; max-width:none; padding-left:10px; } .ymJoinWrite .infoBox .addr select:first-child { margin-right:20px; } .ymJoinWrite .infoBox .name { margin-right:80px; } .ymJoinWrite .infoBox .name input { width:100%; } .ymJoinWrite .infoBox .email input { width:100%; } .ymJoinWrite .infoBox .phone input { width:17%; min-width:42px; max-width:130px; text-align:center; } .ymJoinWrite .infoBox .phone select { min-width:42px; } .ymJoinWrite .infoBox .phone button { margin-left:5px; } .ymJoinWrite .infoBox .certify { position:relative; } .ymJoinWrite .infoBox .certify input { width:50%; margin-right:10px; } .ymJoinWrite .infoBox .certify > span { position:absolute; top:0; color:#9855cd; line-height:60px; display:block; } .ymJoinWrite.el .infoBox .certify > span { color:#FE5730} .ymJoinWrite .infoBox .certify .time { left:70px; } .ymJoinWrite .infoBox .certify .finish { right:0; background:#fff; padding:0 10px; } .ymJoinWrite .infoBox .birthday { position:relative; margin-right:80px; } .ymJoinWrite .infoBox .birthday input { position:relative; z-index:2; width:100%; background:none; appearance:none; -moz-appearance:none; -webkit-appearance:none; } .ymJoinWrite .infoBox .birthday button { position:absolute; z-index:1; top:15px; right:0; width:20px; min-width:auto; height:20px; background:url('/mobile/img/202003170001/icon_calendar.png') -88px -3px no-repeat #fff; background-size:auto 21px; border:0; border-radius:0; font-size:0; display:block; } .ymJoinWrite .infoBox .memnum { padding-left:115px; } .ymJoinWrite .infoBox .memnum input { width:51%; margin-right:10px; } .ymJoinWrite .infoBox.rejoin .name, .ymJoinWrite .infoBox.rejoin .birthday { margin-right:0; } .ymJoinWrite .certifyNote { margin:15px 0 -6px 0; font-size:12px; color:#666; word-wrap:break-word; word-break:keep-all; } .ymJoinWrite .certifyNote .notify { margin-top:7px; text-align:left; } /* 부모동의 */ .ymJoinAgree { border-top:solid 8px #f7f9fa; padding:13px 25px 50px 25px; } .ymJoinAgree h3 { margin-top:35px; font-size:15px; font-weight:500; color:#000; } .ymJoinAgree label { position:relative; margin-top:33px; border-bottom:solid 1px #e9e9e9; font-weight:300; color:#666; display:block; overflow:hidden; } .ymJoinAgree label i { height:35px; display:block; } .ymJoinAgree label i:after { content:''; position:absolute; top:0; right:0; width:20px; height:20px; background:url('/mobile/img/202003170001/mark_check.png') left center no-repeat; background-size:auto 100%; border:solid 1px #d1d1d1; border-radius:3px; display:block; box-sizing:border-box; } .ymJoinAgree input { position:absolute; top:-15px; left:-15px; width:0; height:0; } .ymJoinAgree input:checked + i:after { background-color:#9855cd; background-position:right center; border:0; } .ymJoinAgree.el input:checked + i:after {background-color:#FE5730; border:0} .ymJoinAgree .notify { margin:15px 0 -6px 0; font-size:12px; color:#fe5730; line-height:21px; word-wrap:break-word; word-break:keep-all; text-align:right; } /* 상품선택 */ .ymJoinProd { border-top:solid 8px #f7f9fa; padding:48px 25px 50px 25px; } .ymJoinProd h3 { font-size:15px; font-weight:500; color:#000; } .ymJoinProd ul { padding-top:3px; } .ymJoinProd ul li { position:relative; margin-top:10px; overflow:hidden; overflow:hidden; } .ymJoinProd label span { border:solid 1px #e9e9e9; padding:15px 19px; font-size:14px; font-weight:300; line-height:23px; color:#777; display:block; } .ymJoinProd label strong { margin:3px 0 -1px 0; font-weight:400; display:block; } .ymJoinProd label strong i { font-family:'Roboto',arial; font-size:15px; } .ymJoinProd input { position:absolute; top:-15px; left:-15px; width:0; height:0; } .ymJoinProd input:checked + span { border:solid 2px #9855cd; padding:14px 18px; font-weight:400; color:#000; } .ymJoinProd input:checked + span strong { color:#9855cd; } .ymJoinProd .link { background:url('/mobile/img/202003170001/mark_move.png') right center no-repeat #fff; background-size:6px auto; margin:20px 0 -4px 0; padding-right:15px; font-size:12px; font-weight:400; color:#000; vertical-align:bottom; display:inline-block; } .ymJoinProd .notify { margin:15px 0 -6px 0; font-size:12px; color:#fe5730; line-height:21px; word-wrap:break-word; word-break:keep-all; text-align:right; } /* 가입자 추가 */ .ymJoinAdd { border-top:solid 8px #f7f9fa; padding:50px 25px; text-align:center; } .ymJoinAdd button { height:38px; background:#fff; border:solid 1px #d5d5d5; border-radius:100px; padding:0 30px; line-height:38px; color:#000; } /* 가입자 목록 */ .ymJoinList { padding:0 25px; } .ymJoinList li { position:relative; border-bottom:solid 1px #e9e9e9; } .ymJoinList li a { position:relative; height:60px; font-size:14px; color:#666; font-weight:300; line-height:60px; display:block; } .ymJoinList li button { position:absolute; z-index:2; top:50%; right:-1px; width:12px; height:12px; background:url('/mobile/img/202003170001/mark_ymadd.png') right bottom no-repeat; background-size:auto 19px; margin-top:-7px; font-size:0; line-height:0; display:block; overflow:hidden; } .ymJoinList li:first-child { border-top:solid 1px #e9e9e9; margin-top:30px; } .ymJoinList li:last-child { margin-bottom:25px; } /* 결제하기 */ .payment .ymNote { margin-top:32px; } .payment .ymNote dt { font-size:13px; font-weight:500; color:#9855cd; } .payment .ymNote dd { position:relative; margin-top:6px; padding-left:8px; font-size:12px; color:#666; word-wrap:break-word; word-break:keep-all; } .payment .ymNote dd:before { content:'-'; position:absolute; top:0; left:0; } .payment.ym { position:relative; padding:0 25px 70px 25px; } .payment.ym h3 { font-size:15px; font-weight:500; } .payment.ym .btnFix .price, .payment.ym + .btnFix .price { background:#9855cd !important; } .payment.ym .intro { padding-top:32px; } .payment.ym .visitDay span { color:#9855cd; } .payment.ym .issDate { position:relative; z-index:2; min-height:21px; padding-top:4px; font-size:12px; font-weight:300; } .payment.ym .issDate strong { position:absolute; top:5px; right:0; font-family:'Roboto', arial; font-size:13px; font-weight:400; color:#666; display:block; } .payment.ym .issDate strong b { margin-top:-1px; font-family:'Noto Sans KR'; font-weight:400; font-size:12px; vertical-align:top; display:inline-block; } .payment.ym .issDate .tip { position:relative; width:14px; height:14px; background:url('/mobile/img/202003170001/mark_tip.png') 6px center no-repeat #fff; background-size:auto 10px; border:solid 2px #e1e1e1; border-radius:100px; margin:-2px 0 0 9px; font-size:0; line-height:0; vertical-align:middle; display:inline-block; } .payment.ym .issDate .tip > span { position:absolute; z-index:10; top:31px; left:-41px; width:67vw; min-width:220px; max-width:270px; background:#fff; border:solid 1px #b6b6b6; border-radius:7px; padding:21px 25px; font-size:12px; font-weight:300; line-height:19px; color:#444; word-wrap:break-word; word-break:keep-all; box-sizing:border-box; display:none; } .payment.ym .issDate .tip > span b { margin:17px 0 4px 0; font-size:12px; color:#000; display:block; } .payment.ym .issDate .tip > span:before { content:''; position:absolute; top:-14px; left:40px; width:17px; height:14px; background:url('/mobile/img/202003170001/mark_tooltip.png') left bottom no-repeat; background-size:auto 100%; display:block; } .payment.ym .issDate .tip.active > span { display:block; } .payment.ym .detailBox { margin-top:23px; } .payment.ym .detailBox > ul { border-top:solid 1px #000; margin-top:8px; padding:0; } .payment.ym .detailBox > ul li { position:relative; border-top:solid 1px #e9e9e9; margin-top:0; padding:22px 0; font-size:13px; } .payment.ym .detailBox > ul li:first-child { border-top:0; } .payment.ym .detailBox .name { font-weight:400; color:#000; } .payment.ym .detailBox .prod { margin:4px 0 1px 0; font-size:14px; color:#666; display:block; } .payment.ym .detailBox .price { position:absolute; top:22px; right:0; margin-top:0; } .payment.ym .detailBox .price del { color:#a0a0a0; margin-right:5px; } .payment.ym .detailBox .price em { font-size:14px; } .payment.ym .detailBox .charge { border-color:#000; margin-top:0; padding-bottom:40px; } .payment.ym .detailBox .charge dt { font-weight:500; } .payment.ym .detailBox .charge dd { padding-top:26px; font-size:17px; } .payment.ym .detailBox .charge dd strong { margin-bottom:-2px; font-size:20px; font-weight:500; vertical-align:bottom; } .payment.ym .detailBox .finalList li { padding:28px 0; } .payment.ym .detailBox .finalList .prod { margin:0; font-weight:500; color:#000; } .payment.ym .detailBox .finalList .price { position:relative; top:0; margin-top:14px; color:#666; text-align:right; display:block; } .payment.ym .detailBox .finalList .price i { position:absolute; top:0; left:0; font-weight:300; } .payment.ym .detailBox:after { display:none; } .payment.ym .benefit { border-top:solid 8px #f7f9fa; margin:0 -25px; padding:44px 25px 46px 25px; } .payment.ym .benefit .link { margin-top:10px; } .payment.ym .benefit .link a { background:url('/mobile/img/202003170001/mark_move.png') right center no-repeat #fff; background-size:6px auto; margin:2px 25px 0 0; padding-right:15px; font-size:12px; font-weight:400; color:#000; display:inline-block; } .payment.ym .benefit .note { margin-top:36px; font-size:12px; font-weight:300; line-height:19px; color:#666; word-wrap:break-word; word-break:keep-all; clear:both; } .payment.ym .benefit .choice { margin-left:-5px; padding-top:8px; } /* G-market 제휴 */ .payment.ym .benefit .choice.promo label { width:100%; margin-bottom:8px; } .payment.ym .benefit .choice label { position:relative; float:left; width:50%; padding-left:5px; display:block; overflow:hidden; box-sizing:border-box; } .payment.ym .benefit .choice label span { height:50px; border:solid 1px #e9e9e9; font-size:14px; line-height:48px; color:#666; text-align:center; display:block; box-sizing:border-box; } .payment.ym .benefit .choice input { position:absolute; top:-15px; left:-15px; width:0; height:0; } .payment.ym .benefit .choice input:checked + span { border:solid 2px #9855cd; line-height:46px; font-weight:500; color:#9855cd; } .payment.ym .benefit .choice:after { content:''; display:block; clear:both; } .payment.ym .optIss { position:relative; border-top:solid 8px #f7f9fa; margin:0 -25px; padding:44px 25px 46px 25px; } .payment.ym .optIss button { position:relative; z-index:2; background:transparent; padding-right:25px; font-size:14px; color:#999; text-align:right; } .payment.ym .optIss button i { font-family:'Roboto', arial; font-size:15px; } .payment.ym .optIss button.active { color:#000; } .payment.ym .optIss button + button { display:none; } .payment.ym .optIss .note { padding-top:22px; } .payment.ym .optIss .note li { position:relative; margin-top:5px; padding-left:8px; font-size:12px; color:#666; word-wrap:break-word; word-break:keep-all; } .payment.ym .optIss .note li:before { content:'-'; position:absolute; top:0; left:0; display:block; } .payment.ym .optIss .note .link { background:url('/mobile/img/202003170001/mark_move.png') right center no-repeat #fff; background-size:6px auto; padding-right:15px; font-size:12px; font-weight:400; color:#000; display:inline-block; } .payment.ym .optIss .date { position:relative; height:25px; font-size:14px; margin-top:-23px; margin-left:125px; text-align:right; } .payment.ym .optIss .date:after { content:''; position:absolute; z-index:1; top:0; right:28px; width:19px; height:20px; background:url('/mobile/img/202003170001/icon_calendar.png') -89px -3px no-repeat #fff; background-size:auto 21px; } .payment.ym .optIss .date.noCal:after { content:none; } .payment.ym .optIss .btnReset { width:20px; height:20px; background:url('/mobile/img/202003170001/btn_reset.png') center center no-repeat; background-size:10px auto; border:solid 1px #e3e3e3; border-radius:30px; margin-left:3px; padding:0; font-size:0; line-height:0; vertical-align:middle; display:inline-block; overflow:hidden; box-sizing:border-box; } .payment.ym .means { background:#fff; border-top:solid 8px #f7f9fa; padding:48px 25px 46px 20px; text-align:left; } .payment.ym .means dt { position:relative; top:0; left:5px; padding-bottom:12px; font-size:15px; font-weight:500; color:#000; } .payment.ym .means dd { float:left; width:50%; border-radius:0; margin:0; box-shadow:none; } /* G-market 제휴 */ .payment.ym .means.promo dd { display:block; float:none;width:100%; border-radius:0; margin:0; box-shadow:none; } .payment.ym .means.promo dd label{ margin-bottom:8px; } .payment.ym .means dd.only { width:100%; } .payment.ym .means label { margin-left:5px; display:block; } .payment.ym .means label span { height:50px; border:solid 1px #e9e9e9; padding:0; font-size:14px; line-height:48px; color:#666; text-align:center; display:block; box-sizing:border-box; } .payment.ym .means label span:before { display:none; } .payment.ym .means input { position:absolute; top:-15px; left:-15px; width:0; height:0; } .payment.ym .means input:checked + span { border:solid 2px #9855cd; line-height:46px; font-weight:500; color:#9855cd; } .payment.ym .means input:disabled + span { background:#f3f3f3; color:#ccc; } .payment.ym .means .note { width:100%; margin:36px 0 0 5px; font-size:12px; font-weight:300; line-height:19px; color:#666; word-wrap:break-word; word-break:keep-all; clear:both; } .payment.ym .means:after { content:''; display:block; clear:both; } .payment.ym + hr { position:relative; height:42px; background:#f7f9fa; border:0; margin:-44px 0 0 0; padding:0; display:block; } .payment.ym + hr:before { content:''; position:absolute; z-index:1; left:0; right:0; top:0; height:10px; background:url('/mobile/img/202003170001/bg_payment.png') center top no-repeat; background-size:auto 100%; display:block; } /* [s]정기권 수정 */ .payment.ym .detailBox2 > ul li { padding:22px 90px 42px 0; } .payment.ym .detailBox2 .price { text-align:right; } .payment.ym .detailBox2 .price del { display:block; margin:0; } .payment.ym .detailBox2 .price i { color:#9855CD; } .payment.ym .detailBox2 .coupon { margin:0; } .payment.ym .detailBox2 .coupon button { border-color:#9E9E9E; border-radius:13px; color:#000; padding:0 7px; } .ymJoinWrite2 h3 { margin-bottom:0; } .ymJoinWrite2 .infoBox { border-top:none; } .ymJoinWrite2 .info { text-align:left; margin:18px 0 6px; color:#666; } .ymJoinWrite2 .link { background:url('/mobile/img/202003170001/mark_move.png') right center no-repeat #fff; background-size:6px auto; padding-right:15px; font-size:12px; font-weight:400; color:#000; vertical-align:bottom; display:inline-block; } .ymJoinSelect { border-top:solid 8px #f7f9fa; padding:19px 25px 20px 26px; font-size:14px; letter-spacing:-0.56px; } .ymJoinSelect button { min-width:60px; height:25px; background:#fff; border:solid 1px #9e9e9e; border-radius:25px; font-size:12px; letter-spacing:-0.6px; float:right; } .ymlistBox { max-height:305px; margin-top:26px; overflow:auto; } .ymlistBox li { margin:0 0 10px; color:#777; word-wrap:break-word; word-break:keep-all; } .ymlistBox li label { position:relative; display:block; height:60px; overflow:hidden; box-sizing:border-box; padding:21px 15px; } .ymlistBox li.noApply label{ height:40px; padding:10px 15px; } .ymlistBox li label i { position:absolute; top:50%; right:14px; transform:translateY(-50%); width:28%; text-align:right; } .ymlistBox input { position:absolute; top:-15px; left:-15px; width:0; height:0; opacity:0; } .ymlistBox input:checked + i { color:#9855CD; } .ymlistBox input + .name { display:block; width:58%; height:100%; } .ymlistBox input + .name > span { position:absolute; top:50%; left:15px; transform:translateY(-50%); width:58%; } .ymlistBox input + .name:before { content:''; position:absolute; top:0; left:0; width:100%; height:60px; border:solid 1px #e9e9e9; display:block; box-sizing:border-box; } .ymlistBox li.noApply label input + .name:before { height:40px; } .ymlistBox input:checked + .name { color:#000; border:#000; } .ymlistBox input:checked + .name:before { border-width:2px; border-color:#9855CD; } .ymlistBox input:checked + .name + i { color:#9855CD; } #popupymCoupon, #popupJoinSel { width:86%; max-width:300px; letter-spacing:-0.52px; font-size:13px; } #popupymCoupon .cont, #popupJoinSel .cont { padding:25px 20px 27px; } #popupJoinSel .ymlistBox li label i { right:9px; text-align:left; } #popupJoinSel .ymlistBox li label i::before { content:''; position:absolute; left:-9px; top:50%; transform:translateY(-50%); width:1px; height:13px; background-color:#dcdcdc; } #popupJoinSel .ymlistBox li.btnSelect { background-color:#f2f2f2; border:1px solid #e9e9e9; color:#bebebe; } #popupJoinSel .ymlistBox li.btnSelect input + .name:before {border:none; } #popupJoinSel .ymlistBox li.btnSelect input:checked + .name { color:#bebebe; } #popupJoinSel .ymlistBox input:checked + .name + i { color:#000; } #popupJoinSel .notice { margin-top:11px; } #popupJoinSel .notice li { line-height:19px; position:relative; padding-left:7px; } #popupJoinSel .notice li::before { content:"-"; position:absolute; left:0; top:0; } /* [e]정기권 수정 */ /* 예약내역 */ .resInfo dd button { height:25px; background:#fff; border:solid 1px #d5d5d5; border-radius:3px; margin:-4px 0 0 5px; padding:0 7px; font-size:12px; color:#999; letter-spacing:-0.5px; vertical-align:middle; display:inline-block; } .resInfo dd button + button { margin-left:1px; } .resInfo .intro { word-wrap:break-word; word-break:keep-all; } .resInfo .issNote { padding-top:25px; } .resInfo .issNote li { position:relative; margin-top:7px; padding-left:16px; font-size:12px; color:#9855cd; word-wrap:break-word; word-break:keep-all; } .resInfo .issNote li:before { content:'※'; position:absolute; top:0; left:0; } .resInfo .chkPay { width:auto; min-width:56px; padding:0 9px; box-sizing:border-box; } .resInfo .contDet > .notify { margin:15px 0 -4px 0; padding-left:15px; color:#000; word-wrap:break-word; word-break:keep-all; } .resInfo .contDet > .notify:before { content:'※'; } /* APP 배너 */ .bannerApp .txtBox.ym > i { color:#9855cd; } .payment.ym + hr + .bannerApp { border-top:0; } /* layerPopup -------------------------------------------------------------------------*/ .layerPopup .btnBox.ym a, .layerPopup .btnBox.ym button { background:#9855cd; } .layerPopup.notice1 .btnBox.ym .only { background:#9855cd !important; } #popupNotify .btnBox.ym a { background:#9855cd !important; } /* 연간이용권 권종 안내 및 우대정보 */ .popupInfoym { width:86%; max-width:430px; } .popupInfoym .tit { font-size:20px; font-weight:500; line-height:24px; background:#fff; color:#000; word-wrap:break-word; word-break:keep-all; text-align:center; display:block; padding:28px 0 20px; } .popupInfoym .tit span { display:inline-block; } .popupInfoym .cont { padding:0 25px 25px 25px; } .popupInfoym .infoBox { position:relative; border-top:solid 2px #000; display:block; } .popupInfoym .infoBox th { width:75px; font-weight:400; } .popupInfoym .infoBox thead { width:100%; display:table; } .popupInfoym .infoBox thead th { height:32px; background:#fff; border-bottom:solid 1px #ababab; font-size:12px; } .popupInfoym .infoBox thead th:last-child { width:auto; border-left:solid 1px #e9e9e9; } .popupInfoym .infoBox tbody { width:100%; height:285px; display:block; overflow-x:hidden; overflow-y:scroll; } .popupInfoym .infoBox tbody tr { width:100%; display:table; } .popupInfoym .infoBox tbody th, .popupInfoym .infoBox tbody td { border-bottom:solid 1px #e9e9e9; padding:13px 0; word-wrap:break-word; word-break:keep-all; } .popupInfoym .infoBox tbody td { border-left:solid 1px #e9e9e9; padding-left:15px; font-size:12px; line-height:18px; color:#666; } .popupInfoym .infoBox tbody li { position:relative; margin-top:7px; padding-left:8px; } .popupInfoym .infoBox tbody li:before { content:'-'; position:absolute; top:0; left:0; display:block; } .popupInfoym .infoBox tbody li:last-child ul { margin-bottom:0; } .popupInfoym .infoBox tbody li ul { margin:5px 0 15px 0; } .popupInfoym .infoBox tbody li ul li { margin-top:3px; padding-left:6px; } .popupInfoym .infoBox tbody li ul li:before { content:''; top:7px; width:2px; height:2px; background:#666; border-radius:3px; } .popupInfoym .infoBox tbody ul { margin:-2px 0 5px 0; } .popupInfoym .infoBox .notify { border:0; padding:18px 0 0 0; font-weight:300; } /* 보호자 동의서 */ #popupJoinAgree { width:92%; max-width:470px; } #popupJoinAgree .cont { padding:28px 15px 42px 15px; } #popupJoinAgree .intro, #popupJoinAgree .txtBox { margin-top:24px; font-size:12px; font-weight:300; line-height:18px; color:#666; word-wrap:break-word; word-break:keep-all; } #popupJoinAgree .txtBox { margin-top:16px} #popupJoinAgree .infoBox dt { height:45px; line-height:45px; } #popupJoinAgree .infoBox dd { min-height:45px; margin-top:-45px; line-height:45px; } #popupJoinAgree .infoBox input, #popupJoinAgree .infoBox select { height:45px; } #popupJoinAgree .infoBox select { background-position:95.5% 20px; } #popupJoinAgree .infoBox .sep { margin-top:-46px; } #popupJoinAgree .infoBox .phone { padding-left:70px; } #popupJoinAgree .infoBox .certify > span { line-height:45px; } #popupJoinAgree .infoBox .birthday button { top:6px; } #popupJoinAgree .sameChk { font-size:12px; } #popupJoinAgree .ymJoinWrite { margin-top:37px; padding:0; } /* 사진등록 가이드 */ #popupPhotoGuid { width:84%; max-width:360px; } #popupPhotoGuid .cont { padding:28px 25px 35px 25px; } #popupPhotoGuid .notify { margin-top:24px; } #popupPhotoGuid .notify li { position:relative; margin-top:5px; padding-left:8px; word-wrap:break-word; word-break:keep-all; } #popupPhotoGuid .notify li:before { content:'-'; position:absolute; top:0; left:0; } #popupPhotoGuid .sample { margin-top:20px; font-size:0; line-height:0; } #popupPhotoGuid .sample img { width:100%; } #popupPhotoGuid .btnBox.ym a { width:100%; background:#9855cd !important; color:#fff; } /* APP 연간이용권 */ #popupAppInfo { width:86%; max-width:350px; } #popupAppInfo label { position:relative; display:block; overflow:hidden; } #popupAppInfo label input { position:absolute; top:-15px; left:-15px; width:0; height:0; opacity:0; } #popupAppInfo .cont { padding:27px 25px 50px 25px; } #popupAppInfo .intro { margin-top:15px; font-size:12px; color:#666; text-align:center; } #popupAppInfo .listBox { max-height:305px; margin-top:22px; overflow:auto; } #popupAppInfo .listBox li { position:relative; min-height:19px; border-bottom:solid 1px #e9e9e9; padding:13px 0 11px 0; font-weight:400; font-size:14px; line-height:21px; color:#000; word-wrap:break-word; word-break:keep-all; } #popupAppInfo .listBox li i { margin-top:5px; font-size:12px; font-weight:300; color:#444; display:block; } #popupAppInfo .listBox li i b { font-family:'Roboto'; font-weight:300; } #popupAppInfo .listBox label { min-height:24px; padding:1px 0 2px 31px; display:block; overflow:hidden; box-sizing:border-box; } #popupAppInfo .listBox input + .name:before { content:''; position:absolute; top:0; left:0; width:23px; height:23px; background:url('/mobile/img/202003170001/mark_check_ym.png') 5px center no-repeat; background-size:auto 9px; border:solid 1px #d4d4d4; border-radius:30px; display:block; box-sizing:border-box; } #popupAppInfo .listBox input:checked + .name i { color:#222; } #popupAppInfo .listBox input:checked + .name i b { font-weight:400; } #popupAppInfo .listBox input:checked + .name:before { background-position:-15px center; border-color:#9855cd; } #popupAppInfoNo { width:310px; } #popupAppInfoNo p { padding:45px 0; font-size:14px; line-height:23px; color:#222; text-align:center; } #popupAppInfoNo p .info { margin-top:14px; font-size:12px; color:#666; display:block; } #popupAppInfoNo p .info:before { content:'-'; margin-right:5px; display:inline-block; } #popupAppInfoNo .btnBox a { width:100%; background:#9855cd !important; color:#fff; } /* 연간이용권 번호 조회 */ #popupMemNumChk { width:310px; } #popupMemNumChk p { padding:45px 0; font-size:14px; line-height:23px; color:#222; text-align:center; } #popupMemNumChk .btnBox a { width:100%; background:#9855cd !important; color:#fff; } /* 가입자 입력 완료 정보 */ #popupJoinInfo { width:86%; max-width:360px; } #popupJoinInfo .cont { padding:27px 25px 35px 25px; } #popupJoinInfo .cont dl { padding-top:11px; } #popupJoinInfo .cont dt { height:45px; margin-bottom:-45px; line-height:45px; } #popupJoinInfo .cont dd { min-height:46px; border-bottom:solid 1px #e9e9e9; padding:13px 0 12px 75px; text-align:right; word-wrap:break-word; word-break:keep-all; box-sizing:border-box; } #popupJoinInfo .picBox { width:115px; background:#e9e9e9; margin:28px auto 0 auto; font-size:0; line-height:0; text-align:center; } #popupJoinInfo .picBox img { width:100%; } #popupJoinInfo .btnBox a { width:100%; background:#9855cd !important; color:#fff; } /* 발급일 선택 */ #popupDate .dateCalBox.ym .ui-datepicker-header, #popupDate .dateCalBox.ym .ui-state-active:before { background:#9855cd; } #popupDate .dateCalBox.ym + .time { display:block; } /* 모바일 오더 추가*/ /* 메뉴 정보 */ #popupMenuInfo { width:85%; min-width:250px; max-width:360px; } #popupMenuInfo .tit { font-size:18px; line-height:22px; padding:22px 25px; word-wrap:break-word; word-break:keep-all; } #popupMenuInfo .cont { max-height:400px; overflow:auto; box-sizing:border-box; } #popupMenuInfo .numBox { background-color:#fff; border-top:1px solid #e9e9e9; padding:15px 0; } #popupMenuInfo .menuVisual { font-size:0; line-height:0;width:100%; height:205px;overflow:hidden; } #popupMenuInfo .menuVisual img {width:100%; max-height:185px; } #popupMenuInfo .menuVisual .bx-viewport { max-height:185px; } #popupMenuInfo .menuVisual .bx-pager { margin-top:14px; text-align:center; } #popupMenuInfo .menuVisual .bx-pager-item { margin:0 5px; display:inline-block; } #popupMenuInfo .menuVisual .bx-pager-item a { width:6px; height:6px; background:#d6d6d6; border-radius:10px; display:block; } #popupMenuInfo .menuVisual .bx-pager-item a.active { background:#000; } #popupMenuInfo .txt { padding:20px 25px; } #popupMenuInfo .number { position:relative; z-index:1; width:73px; height:24px; text-align:center; display:block; box-sizing:border-box; margin:0 auto; } #popupMenuInfo .number input { border:0; width:27px; height:22px; background:transparent; font-family:'Roboto'; font-size:20px; font-weight:500; line-height:22px; color:#000; text-align:center; -webkit-text-fill-color:#000; -webkit-opacity:1; } #popupMenuInfo .number input:disabled { -webkit-opacity:1; } #popupMenuInfo .number button { position:absolute; bottom:0; width:24px; height:24px; background:transparent; border:solid 1px #d1d1d1; border-radius:50px; font-size:0; line-height:0; text-indent:-9999px; display:block; overflow:hidden; } #popupMenuInfo .number button:after, #popupMenuInfo .number button:before { content:''; position:absolute; background:#000; display:block; } #popupMenuInfo .number button:after { top:7px; left:10px; width:2px; height:8px; } #popupMenuInfo .number button:before { top:10px; left:7px; width:8px; height:2px; } #popupMenuInfo .number .up { right:0; background:none; } #popupMenuInfo .number .down { left:0; background-position:-14px 7px; } #popupMenuInfo .number .down:after { display:none; } #popupMenuInfo .number.off input { color:#aeaeae; -webkit-text-fill-color:#aeaeae; } #popupMenuInfo .number.off button:after, #popupMenuInfo .number.off button:before { background:#ccc; } /* 히든 URL 우편번호 추가 */ #addr_search_main { z-index:999; border-radius:4px; background-color:#fff; max-width:310px; width:85%; overflow:hidden; box-sizing:border-box; } #addr_search_main .zipCode { padding:15px 15px 0 15px; } #addr_search_main select { border-top:1px solid #ababab; border-right:1px solid #ebebeb; border-left:1px solid #ababab; border-bottom:1px solid #ebebeb; height:26px; width:100%; border-radius:4px; -webkit-border-radius:4px; padding:0 3px; -webkit-appearance:none; -moz-appearance:none; background:#f7f7f7 url("/mobile/img/common/bg_webkit-sel_960.gif") no-repeat 98% 10px; background-size:11px 7px; } #addr_search_main input[type="text"] { border-top:1px solid #ababab; border-right:1px solid #ebebeb; border-left:1px solid #ababab; border-bottom:1px solid #ebebeb; background:#fff; height:26px; vertical-align:bottom; padding:0 3px;color:#000; font-size:13px; border-radius:4px; -webkit-border-radius:4px; -webkit-appearance:none; background-color:#f7f7f7; } /* Q-PASS 추가 */ /* 시간 선택 - 시설명 */ #popupTimeSet { width:85%; max-width:310px; } #popupTimeSet .cont { max-height:300px; padding:0px 25px 15px; overflow-y:scroll; } #popupTimeSet .tit { font-size:18px; line-height:22px; padding:22px 0 15px 0; margin:0 -25px; } #popupTimeSet .numType li { position:relative; min-height:24px; border-top:solid 1px #e9e9e9; padding:15px 85px 16px 0; line-height:21px; color:#000; word-wrap:break-word; word-break:keep-all; box-sizing:border-box; } #popupTimeSet .numType li:first-child {border-top:0; } #popupTimeSet .numType li.end .txt { font-weight:300; color:#aaa; } #popupTimeSet .numType .number { position:absolute; z-index:1; top:50%; right:0; width:73px; height:24px; margin-top:-12px; text-align:center; display:block; box-sizing:border-box; } #popupTimeSet .numType .number input { border:0; width:27px; height:22px; background:transparent; font-family:'Roboto'; font-size:20px; font-weight:500; line-height:22px; color:#000; text-align:center; -webkit-text-fill-color:#000; -webkit-opacity:1; } #popupTimeSet .numType .number input:disabled { -webkit-opacity:1; } #popupTimeSet .numType .number button { position:absolute; bottom:0; width:24px; height:24px; background:transparent; border:solid 1px #d1d1d1; border-radius:50px; font-size:0; line-height:0; text-indent:-9999px; display:block; overflow:hidden; } #popupTimeSet .numType .number button:after, #popupTimeSet .numType .number button:before { content:''; position:absolute; background:#000; display:block; } #popupTimeSet .numType .number button:after { top:7px; left:10px; width:2px; height:8px; } #popupTimeSet .numType .number button:before { top:10px; left:7px; width:8px; height:2px; } #popupTimeSet .numType .number .up { right:0; background:none; } #popupTimeSet .numType .number .down { left:0; background-position:-14px 7px; } #popupTimeSet .numType .number .down:after { display:none; } #popupTimeSet .numType .number.off input { color:#aeaeae; -webkit-text-fill-color:#aeaeae; } #popupTimeSet .numType .number.off button:after, #popupTimeSet .numType .number.off button:before { background:#ccc; } #popupTimeSet .notice { font-size:11px; font-weight:300; padding:5px 0 0; color:red; } #popupTimeSet .notice li { position:relative; margin-top:8px; padding-left:7px; word-wrap:break-word; word-break:keep-all; } #popupTimeSet .notice li:before { content:''; position:absolute; top:0; left:0; display:inline-block; } #popupTimeSet .notice li:first-child { margin-top:0; } /* 제휴 이용권 */ .payment .detailBox .charge dt button { display:inline-block; margin-left:15px; padding:1px 12px; font-size:12px; font-weight:400;color:#fff; background-color:#323436; border-radius:3px; line-height:22px; } .payment .detailBox .charge dd .btn_toggle { display:inline-block;width:20px; height:20px; position:relative; background:url('/mobile/img/202003170001/mark_arrow_show.png') right 7px no-repeat; background-size:auto 41px;vertical-align:top; } .payment .detailBox .charge dd .btn_toggle.on { background-position:right -28px; } .payment .detailBox .charge .list_more { display:none; float:left;width:100%; margin-top:17px;color:#000; padding:0; clear:both; background-color:#f7f9fa; } .payment .detailBox .charge .list_more.on { display:block} .payment .detailBox .charge .list_more.on + .final { margin-top:0; border-top:none; } .payment .detailBox .charge .list_more ul { position:relative; padding:35px 0; } .payment .detailBox .charge .list_more ul:before { content:''; position:absolute; top:0; left:-25px;right:-25px; bottom:0; background-color:#f7f9fa} .payment .detailBox .charge .list_more ul li { position:relative; background-color:#fff; margin-bottom:5px; padding:13px 130px 12px 16px;overflow:hidden} .payment .detailBox .charge .list_more ul li.last { margin-bottom:0; } .payment .detailBox .charge .list_more ul li i { font-weight:300; color:#444; text-align:left; } .payment .detailBox .charge .list_more ul li div { position:absolute; top:50%;right:16px; transform:translate(0,-50%); text-align:right; } .payment .detailBox .charge .list_more ul li span { font-family:'Roboto'; font-size:14px; color:#333; letter-spacing:0; text-align:right; line-height:25px; text-align:left} .payment .detailBox .charge .list_more ul li .btn_more { display:inline-block;width:25px; height:25px; margin-left:5px; border:1px solid #d8d8d8; border-radius:50px; background:url('/mobile/img/202003170001/mark_list.png') no-repeat center center; background-size:6px 11px; font-size:0; box-sizing:border-box;vertical-align:top; } .payment .detailBox .charge .list_more ul li .btn_cancle { background:url('/mobile/img/202003170001/mark_list_x.png') no-repeat center center; background-size:10px; } .resInfo dd .btn_toggle { display:inline-block; width:20px; height:20px; position:relative; background:url('/mobile/img/202003170001/mark_arrow_show.png') right 7px no-repeat; background-size:auto 41px; vertical-align:top; } .resInfo dd .btn_toggle.on { background-position:right -28px; } .resInfo .list_more { display:none; float:left; width:100%; margin-top:17px; color:#000; padding:0; clear:both; } .resInfo .list_more.on { display:block; } .resInfo .list_more.on + .final { margin-top:0; border-top:none; } .resInfo .list_more ul { position:relative; padding:8px 0; } .resInfo .list_more ul:before { content:''; position:absolute; top:0; left:-25px;right:-25px; bottom:0; background-color:#f7f9fa} .resInfo .list_more ul li { position:relative; font-size:13px; color:#444; font-weight:300; text-align:left; padding-left:7px; margin:12px 0; } .resInfo .list_more ul li:before { content:'-'; position:absolute; top:0; left:0; display:block; } .resInfo .list_more ul li .option { position:absolute; top:50%; right:0; margin-top:-11px; display:block; } .resInfo .list_more ul li .option span:first-child { font-family:'Roboto'; font-size:14px; font-weight:400; color:#000; letter-spacing:0; } #popupPoint { width:85%; max-width:310px; } #popupPoint .cont {height:420px; padding:27px 0 40px;overflow:auto; } #popupPoint .cont .tit { margin-bottom:15px; } #popupPoint .cont .inner{ padding:0 25px; background-color:#fff; } #popupPoint .cont .inner .notifyTxt { position:absolute; top:14px;right:0;display:block; font-weight:300; color:#888; text-align:right; } #popupPoint .cont hr { margin:30px 0 25px; border:none; border-top:8px solid #f7f9fa; } #popupPoint .write { position:relative; min-height:48px; border-bottom:solid 1px #dfdfdf; padding-left:80px; } #popupPoint .write:first-child { margin-top:15px; } #popupPoint .write i { position:absolute; top:15px; left:0; font-weight:300; color:#444; } #popupPoint .write input { width:100%; height:45px; background:#fff; border:0; font-family:'Roboto'; font-size:14px; color:#000; text-align:right; } #popupPoint .write input::placeholder { font-family:'Noto Sans KR'; font-size:12px; font-weight:200; color:#aaa; letter-spacing:0; } #popupPoint .write input::-moz-placeholder { font-family:'Noto Sans KR'; font-size:12px; font-weight:200; color:#aaa; letter-spacing:0; } #popupPoint .write input::-ms-input-placeholder { font-family:'Noto Sans KR'; font-size:12px; font-weight:200; color:#aaa; letter-spacing:0; } #popupPoint .write input::-webkit-input-placeholder { font-family:'Noto Sans KR'; font-size:12px; font-weight:200; color:#aaa; letter-spacing:0; } #popupPoint label { position:relative; height:20px; margin-bottom:0; padding-left:25px; display:block; margin-right:30px; } #popupPoint label span { height:20px; line-height:20px; color:#666; display:inline-block; } #popupPoint label span:before { content:''; position:absolute; top:0; left:0; width:20px; height:20px; background:url('/mobile/img/202003170001/mark_check.png') left center no-repeat; background-size:auto 100%; border:solid 1px #d1d1d1; border-radius:3px; display:block; box-sizing:border-box; } #popupPoint label input { position:absolute; top:0; left:-20px; width:0; height:0; opacity:0; } #popupPoint label input:checked + span:before { background-color:#fe5730; background-position:right center; border:0; } #popupPoint .notify { margin:16px 0 10px; font-size:12px; font-weight:300;color:#fe5730; text-align:right; } #popupPoint .btnInquiry { width:calc(50% - 5px); background:#eff0f2; border-radius:3px; font-size:14px; line-height:40px; color:#000; height:40px; text-align:center;display:block;overflow:hidden; box-sizing:border-box; } #popupPoint .btnReset { width:calc(50% - 5px); float:right; background:#fff; margin-top:-40px; border:solid 1px #d1d1d1; border-radius:3px; line-height:38px; color:#666; height:40px; text-align:center; display:block; overflow:hidden; box-sizing:border-box; } #popupPoint .btnReset button { width:100%; height:40px; background:#fff !important; line-height:40px; color:#666; } #popupPoint .personalInfo { margin-bottom:25px; } #popupPoint .personalInfo dt { position:relative; background:url('/mobile/img/202003170001/mark_arrow_show.png') right 16px no-repeat; background-size:auto 41px; background-position:right 23px; border-bottom:solid 1px #e9e9e9; margin-top:-1px; font-weight:300; color:#444; overflow:hidden; padding:13px 0; } #popupPoint .personalInfo dt .notify { position:absolute; top:0; left:0; right:30px; background:#fff; line-height:60px !important; display:block; } #popupPoint .personalInfo dt.on { background-position:right -14px; font-weight:400; color:#000; } #popupPoint .personalInfo dt.on + dd { display:block; } #popupPoint .personalInfo dd { display:none; position:relative; z-index:2; margin-top:-1px; padding:10px 0; } #popupPoint .personalInfo dd p { margin-bottom:14px; font-size:12px; font-weight:300; line-height:20px;color:#777; } #popupPoint .pointList { margin-bottom:33px; } #popupPoint .pointList li { position:relative; padding:14px 150px 14px 0; font-weight:300; color:#222; border-bottom:solid 1px #e9e9e9; } #popupPoint .notice li { position:relative; margin-top:5px; padding-left:7px; font-size:12px; font-weight:300; line-height:20px; color:#777; word-wrap:break-word; word-break:keep-all; } #popupPoint .notice li:last-child { margin-top:0; } #popupPoint .notice li:before { content:'-'; position:absolute; top:0; left:0; display:block; } #popupPoint .cont .inner .option { position:absolute; top:50%;right:0; margin-top:-11px; font-weight:400;color:#000;display:block; } #popupPoint .cont .inner .option input {width:auto; max-width:140px; height:auto; } #popupPoint .cont .inner .price { position:absolute; top:50%;right:0; margin-top:-11px; font-weight:400;color:#000;display:block; } .colorOrg { color:#fe5730 !important; } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {-webkit-appearance:none; margin:0; } /* 프로모션 인증코드 입력 */ .promo h2 { font-size:19px; line-height:20px; font-weight:400; letter-spacing:-0.05em; background-color:#f7f9fa; padding:35px 25px 30px; } .promo h2 span { display:block; font-size:28px; line-height:30px; font-weight:100; letter-spacing:0; margin-top:7px; } .promo .promoBox { margin:0 25px; padding:70px 0 50px; } .promo .promoBox dl { width:100%; border-top:solid 1px #e9e9e9; clear:both; } .promo .promoBox dt { height:60px; line-height:60px; color:#444; } .promo .promoBox dd { min-height:60px; border-bottom:solid 1px #e9e9e9; margin-top:-60px; padding:0 0 0 80px; text-align:right; overflow:hidden; } .promo .promoBox dd input { width:100%; height:60px; border:0; padding:0; font-family:'Roboto'; font-size:15px; color:#000; text-align:right; } .promo .promoBox dd input::placeholder { font-family:'Noto Sans KR'; font-size:13px; font-weight:300; color:#999; } .promo .promoBox dd input::-moz-placeholder { font-family:'Noto Sans KR'; font-size:13px; font-weight:300; color:#999; } .promo .promoBox dd input::-ms-input-placeholder { font-family:'Noto Sans KR'; font-size:13px; font-weight:300; color:#999; } .promo .promoBox dd input::-webkit-input-placeholder { font-family:'Noto Sans KR'; font-size:13px; font-weight:300; color:#999; } .promo .promoBox .notify { font-size:12px; font-weight:300; color:#fe5730; text-align:right; margin-top:8px; } .promo .promoBox .btnBox { margin-top:23px; overflow:hidden; } .promo .promoBox .btnBox a { float:left; width:calc(50% - 5px); background-color:#eff0f2; border-radius:3px; font-size:14px; line-height:45px; color:#000; height:45px; text-align:center; box-sizing:border-box; } .promo .promoBox .btnBox a + a { float:right; background:#fe5730; color:#fff; } .promo .promoBox .btnBox.cb a + a { background:#1b9bf0; } /* 프로모션 대상 확인 */ .promo .promoBox .phone input { width:90%; min-width:42px; max-width:130px; text-align:left; } .promo .promoBox .phone select { min-width:42px; } .promo .promoBox .phone button { margin-left:5px; } .promo .promoBox .certify { position:relative; } .promo .promoBox .certify input { width:50%; margin-right:10px; } .promo .promoBox .certify > span { position:absolute; top:0; color:#fe5730; line-height:60px; display:block; } .promo .promoBox .certify .time { left:70px; } .promo .promoBox .certify .finish { right:0; background:#fff; padding:0 10px; } .promo .promoBox select { width:19%; max-width:60px; height:60px; background:url('/mobile/img/202003170001/mark_select.png') 95.5% 27px no-repeat transparent; background-size:11px auto; border:0; padding:0 18px 0 0; font-family:'Roboto'; font-size:14px; color:#000; vertical-align:bottom; appearance:none; -moz-appearance:none; -webkit-appearance:none; } .promo .promoBox button { min-width:60px; height:25px; background:#fff; border:solid 1px #d5d5d5; border-radius:25px; margin:6px 0 10px 0; padding:0 7px; font-size:12px; color:#999; letter-spacing:-0.5px; text-align:center; vertical-align:middle; display:inline-block; } .promo .promoBox button.active { border-color:#9e9e9e; color:#000; } .promo .promoBox .certifyNote { margin:15px 0 -6px 0; font-size:12px; color:#666; word-wrap:break-word; word-break:keep-all; } .promo .promoBox .certifyNote .notify { margin-top:7px; text-align:left; } .noticeBox { border-top:solid 8px #f7f9fa; padding:45px 25px; } .noticeBox .notice { font-size:12px; font-weight:300; color:#666; } .noticeBox .notice li { position:relative; margin-top:8px; padding-left:7px; word-wrap:break-word; word-break:keep-all; } .noticeBox .notice li:before { content:'-'; position:absolute; top:0; left:0; display:inline-block; } .noticeBox .notice li:first-child { margin-top:0; } /* 캘린더 예약 가능 표시 */ .legend { font-size:12px; text-align:center; letter-spacing:-0.05em; } .legend li { position:relative; display:inline-block; padding-left:15px; margin:0 10px; } .legend li::before { content:""; position:absolute; top:5px; left:0; width:10px; height:10px; border-width:2px; border-style:solid; border-radius:50%; box-sizing:border-box; } .legend li.off { color:#262626; } .legend li.disabled { color:#898989; } .legend.el li.able { color:#fe5730; } .legend.cb li.able { color:#1b9bf0; } .legend.speed li.able { color:#554fca; } .legend.ym li.able { color:#9855cd; } /*#popupDate .time { padding-bottom:10px; }*/ #popupDate .legend { background:#fff; padding:0 0 21px; } /* 은행 선택 */ #popupBankType {top:auto; left:0;right:0; bottom:0; margin:0 !important; border-radius:0;overflow:initial; background:#fff; } #popupBankType .cont { position:relative; max-height:430px;z-index:999;overflow-y:auto; } #popupBankType .cont .tit {font-size:14px; font-weight:500; letter-spacing:-0.35px; line-height:16px; padding:20px 0; margin:0 25px; border-bottom:1px solid #EFEFEF; text-align:left; } #popupBankType .cont dl { margin:20px 20px 0; text-align:center; margin-bottom:13px; } #popupBankType .cont dl dt { margin-bottom:10px; font-size:14px; font-weight:300; letter-spacing:-0.35px; line-height:16px;color:#000} #popupBankType .cont dl dd .item { display:flex; flex-wrap:wrap; } #popupBankType .cont dl dd .item li {width:calc(25% - 6px); height:35px; margin-right:7px; margin-top:7px; text-align:center; border:1px solid #D1D1D1; box-sizing:border-box;vertical-align:middle;align-items:center; border-radius:3px;; } #popupBankType .cont dl dd .item li.on {border:2px solid #fe5730; } #popupBankType .cont dl dd .item li:nth-child(4n) { margin-right:0; } #popupBankType .cont dl dd .item li a { color:#000; font-size:11.5px; font-weight:300; line-height:33px; letter-spacing:-0.6px; } /* 일모 영역 추가 */ .ilmoInfo { line-height:27px; border-top:1px solid #E5E5E5; background-color:#F2F3F4; box-sizing:border-box; overflow:hidden; margin-bottom:-40px; padding:10px 25px 11px; } .ilmoInfo dt { position:relative; float:left; width:45%; font-weight:300; color:#313131; clear:both; padding-left:36px; box-sizing:border-box; } .ilmoInfo dt::before { content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:27px; height:27px; background:url('/mobile/img/202003170001/ico_ilmo.png') no-repeat; background-size:100% auto; display:block; } .ilmoInfo dd { float:right; width:55%; font-size:15px; font-weight:bold; color:#313131; text-align:right; word-break:break-all; } .ilmoInfo dd > i { font-family:'Roboto'; font-size:16px; letter-spacing:0; } .ilmoInfo .btnInquiry { display:inline-block; font-weight:400; letter-spacing:-0.6px;width:62px; margin-left:5px; padding:0; font-size:12px;color:#646464; border:1px solid #B5B5B5; border-radius:13px; background:#fff; line-height:22px; text-align:center} .ico_ilmo { position:relative; } .ico_ilmo::before { content:""; position:absolute; width:36px; height:15px; background:url('/mobile/img/202003170001/ico_s_ilmo.png') no-repeat; background-size:100% auto; display:block; } #wrapMenu .ilmoInfo { margin:20px 0 -34px; } #wrapMenu .memuBox .subDepth2 > li .ico_ilmo { display:inline-block; padding-right:50px; } #wrapMenu .memuBox .subDepth2 > li .ico_ilmo::before { right:0; top:3px; } .resList h3 strong.ico_ilmo::before { right:25px; top:50%; transform:translateY(-50%); } .prodList ul li .ico_ilmo { padding-right:65px; } .prodList ul li .ico_ilmo::before { right:2px; top:3px; } .prodList ul li .ico_ilmo .tit::after { top:3px; right:-17px; } .prodList.moList ul li .ico_ilmo { position:static; } .prodList.moList ul li .ico_ilmo::before { right:20px; top:30px; } .prodList.moList ul li .ico_ilmo .tit::after { top:30px; right:0; } .prodList.mdList ul li .ico_ilmo { position:static; } .prodList.mdList ul li .ico_ilmo::before { right:20px; top:30px; } .prodList.mdList ul li .ico_ilmo .tit::after { top:30px; right:0; } .ymJoinProd ul li.ico_ilmo::before { top:19px; right:19px; } .ymJoinProd ul li.ico_ilmo label span { padding:15px 65px 15px 19px; } .ymJoinProd input:checked + span strong del { color:#a0a0a0; } #popupNotice p { margin-top:24px; text-align:left;word-break:keep-all; } /* 파크 메인 개편 */ #wrapCont .mainVisual.new { position:relative; } #wrapCont .mainVisual.new p::after { content:''; position:absolute; left:0; bottom:-60px; display:block; background:transparent linear-gradient(180deg, #00000000 0%, #0000002B 49%, #00000094 100%) 0% 0% no-repeat padding-box; width:100%; height:180px; } #wrapCont .mainVisual.new .txt { display:block; position:absolute; left:25px; bottom:58px; color:#fff; word-wrap:break-word; word-break:break-all; width:310px; z-index:1; } #wrapCont .mainVisual.new .txt strong { font-size:26px; line-height:35px; letter-spacing:-1.3px; font-weight:600; text-shadow:0px 3px 6px #0000001F; word-wrap:break-word; word-break:keep-all; } #wrapCont .mainVisual.new .txt i { font-size:13px; font-weight:500; line-height:19px; letter-spacing:-0.33px; display:block; margin-top:6px; } #wrapCont .mainVisual.new .bx-viewport { max-height:76.667vw; } #wrapCont .mainVisual.new .bx-viewport > div, #wrapCont .mainVisual.new .bx-viewport > div > p { height:100%; } #wrapCont .mainVisual.new .bx-pager { text-align:center; position:absolute; bottom:36px; left:50%; transform:translate(-50%,0); z-index:1; } #wrapCont .mainVisual.new .bx-pager-item { margin:0 3px; display:inline-block; } #wrapCont .mainVisual.new .bx-pager-item a { width:6px; height:6px; background:#FFFFFF4D; border-radius:10px; display:block; } #wrapCont .mainVisual.new .bx-pager-item a.active { background:#fff; } #wrapCont .selDate { position:relative; margin-top:-16px; border-radius:15px 15px 0 0; color:#fff; padding:18px 25px 45px 60px; } #wrapCont .selDate .uncheck { font-size:15px; line-height:22px; letter-spacing:-0.38px; } #wrapCont .selDate .checkDate { position:relative; font-size:20px; line-height:22px; font-family:'Roboto'; font-weight:500; } #wrapCont .selDate .checkDate .operInfo { position:absolute; right:0; top:2px; height:18px; font-family:'Noto Sans KR', sans-serif; font-size:11px; color:#FFFFFFE6; letter-spacing:-0.28px; line-height:11px; border:1px solid #FFFFFFE6; border-radius:9px; padding:2px 8px; box-sizing:border-box; } #wrapCont .selDate .checkDate i { display:block; position:absolute; left:111px; top:3px; width:16px; height:16px; background-size:100% auto; } #wrapCont .selDate .btnBox button { position:absolute; left:25px; top:16px; width:24px; height:24px; font-size:0; background-color:inherit; background-size:100% auto; } #wrapCont .selDate .oprTime { font-family:'Noto Sans KR', sans-serif; font-size:12px; line-height:16px; margin-top:5px; letter-spacing:-0.3px; overflow:hidden; } #wrapCont .selDate .oprTime b { font-family:'Roboto'; font-weight:400; font-size:13px; margin-left:4px; } #wrapCont .selDate .oprTime li { float:left; font-size:12px; } #wrapCont .selDate .oprTime li + li { margin-left:15px; } #wrapCont .selDate.el { background-color:#FE5730; } #wrapCont .selDate.el .checkDate i { background-image:url('/mobile/img/202003170001/date_cancel.png'); } #wrapCont .selDate.el .btnBox button { background-image:url('/mobile/img/202003170001/icon_calander_el.png'); } #wrapCont .selDate.cb { background-color:#1B9BF0; } #wrapCont .selDate.cb .checkDate i { background-image:url('/mobile/img/202003170001/date_cancel_cb.png'); } #wrapCont .selDate.cb .btnBox button { background-image:url('/mobile/img/202003170001/icon_calander_cb.png'); } #wrapCont .selDate.sp { background-color:#554FCA; } #wrapCont .selDate.sp .checkDate i { background-image:url('/mobile/img/202003170001/date_cancel_cb.png'); } #wrapCont .selDate.sp .btnBox button { background-image:url('/mobile/img/202003170001/icon_calander_sp.png'); } #wrapCont .mainList.new { padding:0; position:relative; margin-top:-25px; border-radius:15px 15px 0 0; width:100%; background:#fff; box-shadow:0px -5px 16px #0000001D; } #wrapCont .mainList.new .el { color:#FE5730; } #wrapCont .mainList.new .cb { color:#1B9BF0; } #wrapCont .mainList.new .sp { color:#544EC7; } #wrapCont .mainList.new .ym { color:#9855cd; } #wrapCont .mainList.new ul { margin:0; padding:0; } #wrapCont .mainList.new ul li { display:inline-block; margin:0; padding:0; } #wrapCont .mainList.new ul li a { min-height:48px; } #wrapCont .mainList .menuIcon { border-bottom:1px solid #eee; padding:0 10px 20px; } #wrapCont .mainList .menuIcon ul { font-size:0; } #wrapCont .mainList .menuIcon ul li { width:20%; text-align:center; margin-top:20px; vertical-align:top; opacity:0.5; } #wrapCont .mainList .menuIcon ul li.on { opacity:1; } #wrapCont .mainList .menuIcon ul li a { margin:0 auto; } #wrapCont .mainList .menuIcon ul li a img { display:block; width:24px; height:24px; margin:0 auto; } #wrapCont .mainList .menuIcon ul li a span { font-size:12px; letter-spacing:-0.6px; line-height:16px; display:block; margin-top:7px; } #wrapCont .mainList .prodList { padding:15px 25px 60px; } /*메인상품목록개선 수정 2025-06-17 */ #wrapCont .mainList .prodList ul li { display:block; min-height:90px; border-bottom:solid 1px #eee; border-top:0; padding:18px 0; } #wrapCont .mainList .prodList ul li::after { content:''; position:absolute; top:50%; right:0; transform:translateY(-50%); width:15px; height:16px; background:url('/mobile/img/202003170001/mark_list.png') right center no-repeat; background-size:auto 10px; } #wrapCont .mainList .prodList ul li .thumb { top:50%; transform:translate(0,-50%); border-radius:10px; width:6rem; height:auto; background-color:#fff; aspect-ratio:450 / 420;} #wrapCont .mainList .prodList ul li .tit { font-size:13px; padding-left:7.2rem; padding-right:15px; } #wrapCont .mainList .prodList ul li .tit::after { display:none; } #wrapCont .mainList .prodList ul li .tit .tag { font-size:11px; letter-spacing:-0.55px; line-height:13px; } #wrapCont .mainList .prodList ul li .tit strong { font-size:15px; line-height:21px; letter-spacing:-0.75px; word-break:break-all; } #wrapCont .mainList .prodList ul li .tit strong .ico_ilmo { width:auto; height:15px; margin-left:5px; top:2px; padding-right:0; } #wrapCont .mainList .prodList ul li .tit .sub_txt { display:block; font-size:13px; letter-spacing:-0.65px; font-weight:400; line-height:18px; color:#666666; } #wrapCont .mainList .prodList ul li .price { display:block; font-size: 15px;} #wrapCont .mainList .prodList ul li .price strong { margin:0 4px 0 0; } #wrapCont .mainList .prodList ul li.resEnd::after { opacity:0.5; } #wrapCont .mainList .prodList ul li.resEnd .tit strong, #wrapCont .mainList .prodList ul li.resEnd .tit .sub_txt, #wrapCont .mainList .prodList ul li.resEnd .tit .tag { color:#AEAEAE; } #wrapCont .mainList .prodList ul li.resEnd .thumb::before { content:''; position:absolute; z-index:2; top:0; left:0; right:0; bottom:0; background:#000; opacity:.45; } #wrapCont .mainList .prodList ul li.resEnd .thumb:after { content:'예약\00000a마감'; white-space:pre; line-height:1; position:absolute; z-index:3; top:50%; left:0; right:0; transform:translate(0,-50%); font-size:11px; color:#fff; text-align:center; } #wrapCont .mainList .prodList .noProd { font-size:15px; letter-spacing:-0.75px; text-align:center; line-height:1.4; color:#191919; font-weight:500; padding:38px 0 164px; } #wrapCont .mainList.md, #wrapCont .mainList.ym { margin-top:-14px; } #wrapCont .mainList.sp .menuIcon, #wrapCont .mainList.ym .menuIcon { text-align:center; } #wrapCont .mainList.md .prodList ul li.resEnd .thumb:after { content:'품절'; } /*굿즈# 상품목록개선 추가 2025-06-17 */ #wrapCont .mainList.md { margin-top:-25px; } #wrapCont .mainList.md .prodList { padding-top:30px; } #wrapCont .mainList.md .prodList ul li.resEnd .thumb:after { content:'품절'; font-size:16px; } #wrapCont .mainList.md .prodList ul { display:flex; flex-wrap:wrap; justify-content:space-between; row-gap:2.4rem; border-radius:0; } #wrapCont .mainList.md .prodList ul li { width:calc(50% - .5rem); padding:0; border:none; } #wrapCont .mainList.md .prodList ul li::after { display:none; } #wrapCont .mainList.md .prodList ul li a { display:flex; flex-direction:column; } #wrapCont .mainList.md .prodList ul li .thumb { display:flex; justify-content:center; position:relative; top:auto; left:auto; width:100%; height:auto; margin-bottom:0.5rem; border-radius:10px; transform:none; aspect-ratio:450 / 420; } #wrapCont .mainList.md .prodList ul li .thumb img { top:auto; left:auto; width:100%; height:auto; margin-left:0; } #wrapCont .mainList.md .prodList ul li .tit { padding:0; } .dateInfo { display:block; max-width:260px; border-radius:20px; border:1px solid #D6D6D6; background:#FFF; color:#A5513D; text-align:center; font-size:12px; line-height:18px; letter-spacing:-0.8px; word-wrap :break-word; word-break:keep-all; box-sizing:border-box; padding:3px 12px; margin:15px auto 10px; } .dateInfo > p { position:relative; } .dateInfo > p::before { content:''; position:absolute; bottom:-9px; left:50%; transform:translateX(-50%); width:7px; height:7px; background:url('/mobile/img/202003170001/bg_tooltip.png') left bottom no-repeat; background-size:auto 100%; } /* 메인팝업 */ #popupMain { display:none; position:fixed; bottom:0; left:0; z-index:999; width:100%; } #popupMain.el .contBox { background-color:#FCF0E2; } #popupMain.cb .contBox { background-color:#E5F6FA; } #popupMain.speed .contBox { background-color:#E5E8FA; } #popupMain.md .contBox { background-color:#F8EDF9; } #popupMain .contBox { height:410px; border-radius:20px 20px 0 0; overflow-y:auto; padding:25px 20px 17px; box-sizing:border-box; } #popupMain .contBox .tit { font-size:16px; line-height:140%; letter-spacing:-0.8px; color:#34373C; text-align:center; margin-bottom:20px; word-wrap:break-word; word-break:keep-all; } #popupMain .contBox .tit h2 { font-size:29px; font-weight:700; line-height:120%; letter-spacing:-1px; padding-bottom:14px; } #popupMain .contBox .thumb { max-width:480px; border-radius:5px; margin:0 auto; overflow:hidden; } #popupMain .contBox .thumb img { width:100%; height:auto; vertical-align:top; } #popupMain .btnBox { overflow:hidden; } #popupMain .btnBox a { float:left; width:50%; height:45px; background:#8B8D93; font-size:13px; line-height:45px; color:#fff; letter-spacing:-0.2px; text-align:center; display:block; } #popupMain .btnBox a:first-child { background:#fff; color:#666; } /* KCP 결제 팝업 */ #popupKcpPay { display:none; position:fixed; top:auto; left:0;right:0; bottom:0; height:100%; margin:0 !important; border-radius:0;overflow:initial; background:#fff;z-index:999;; } #popupKcpPay:before { content:''; position:absolute; top:-100%; left:0;right:0; bottom:0; background:#000;opacity:.75;z-index:-1; } #popupKcpPay iframe {border:none;width:100%; height:100%; } #popupKcpPay .cont { height:100%; background-color:#F4F6F8; } /* 예약 상품 UX 개선 -------------------------------------------------------------------------*/ /* 공통 메뉴 */ #wrapMenu .userInfo.hb .visit, #wrapMenu .userInfo.hb .intro { background:#489A00; } #wrapMenu .userInfo.post .visit, #wrapMenu .userInfo.post .intro { background:#FF6A94; } #wrapMenu .userInfo.ecube .visit, #wrapMenu .userInfo.ecube .intro { background:#00ADA2; } #wrapMenu .userInfo.comm .link li:nth-child(1) a:before { background-position:3px -90px; } #wrapMenu .userInfo.comm .link li:nth-child(2) a:before { background-position:-39px -90px; } #wrapMenu .userInfo.comm .link li:nth-child(3) a:before { background-position:-78px -90px; } /* 공통 달력 */ .dateCalBox.hb .ui-datepicker-header, .dateCalBox.hb .ui-state-active:before { background:#489A00; } .dateCalBox.hb .ui-datepicker table td.able a { color:#489A00; } .legend.hb li.able { color:#489A00; } .dateCalBox.ecube .ui-datepicker-header, .dateCalBox.ecube .ui-state-active:before { background:#00ADA2; } .dateCalBox.ecube .ui-datepicker table td.able a { color:#00ADA2; } .legend.ecube li.able { color:#00ADA2; } #popupDate .remainder { position:relative; z-index:2; margin:-22px 0 15px; color:#000; font-size:12px; line-height:24px; text-align:center; } /* 공통 버튼 */ .btnFix .hbRes { width:100%; background:#489A00; color:#fff; } .btnFix .postRes { width:100%; background:#FF6A94; color:#fff; } .btnFix .ecubeRes { width:100%; background:#00ADA2; color:#fff; } .btnFix .ecubeNext { background:#00ADA2; } .btnFix .list + .hbRes, .btnFix .cart + .hbRes { width:50%; } .btnFix .list + .postRes, .btnFix .cart + .postRes { width:50%; } .btnFix .list + .ecubeRes, .btnFix .cart + .ecubeRes { width:50%; } .layerPopup .btnBox.hb a, .layerPopup .btnBox.hb button { background:#489A00; } .layerPopup .btnBox.post a, .layerPopup .btnBox.post button { background:#FF6A94; } .layerPopup .btnBox.ecube a, .layerPopup .btnBox.ecube button { background:#00ADA2; } .layerPopup.notice1 .btnBox.hb .only, .layerPopup.notice2 .btnBox.hb .only { background:#489A00 !important; } .layerPopup.notice1 .btnBox.post .only, .layerPopup.notice2 .btnBox.post .only { background:#FF6A94 !important; } .layerPopup.notice1 .btnBox.ecube .only, .layerPopup.notice2 .btnBox.ecube .only { background:#00ADA2 !important; } /* 메인 */ #wrapCont .selDate.hb { background-color:#489A00; } #wrapCont .selDate.hb .checkDate i { background-image:url('/mobile/img/202003170001/date_cancel_cb.png'); } #wrapCont .selDate.hb .btnBox button { background-image:url('/mobile/img/202003170001/icon_calander_hb.png'); } #wrapCont .mainList.new .hb { color:#458F04; } #wrapCont .mainList.new .post { color:#FF6A94; } #wrapCont .mainList.new .ecube { color:#00ADA2; } #wrapCont .mainList.ecube .menuIcon { text-align:center; } /* 메인 - 예약 양해 안내 팝업 */ #popupInfo { width:92%; max-width:500px; max-height:530px; } #popupInfo .cont { padding:25px 25px 40px 25px; text-align:left; } #popupInfo .cont p { font-size:12px; font-weight:300; line-height:19px; letter-spacing:-0.2px; color:#444; height:315px; overflow-y:auto; margin-top:25px; } /* 상세 */ .buyInfo.hb .amtBox strong { color:#489A00; } .buyInfo.post .amtBox strong { color:#FF6A94; } .buyInfo.ecube .amtBox strong { color:#00ADA2; } .buyInfo.hb .itemDet li.on, .buyInfo.hb .itemDet li.on span { border-color:#489A00; } .buyInfo.post .itemDet li.on, .buyInfo.post .itemDet li.on span { border-color:#FF6A94; } .buyInfo.ecube .itemDet li.on, .buyInfo.ecube .itemDet li.on span { border-color:#00ADA2; } #popupNotify .btnBox.ecube a { background:#00ADA2 !important; } /* 상세 - 이큐브스쿨 멤버 정보 입력 팝업 */ #popupEcubeMemInfo { width:85%; min-width:250px; max-width:360px; } #popupEcubeMemInfo .tit { position:absolute; top:0; left:0; right:0; background:#fff; padding:30px 0 25px; word-wrap:break-word; word-break:keep-all; } #popupEcubeMemInfo .cont { max-height:510px; padding:55px 25px 40px 25px; overflow:auto; box-sizing:border-box; } #popupEcubeMemInfo dl { margin-top:23px; } #popupEcubeMemInfo dt { height:60px; line-height:60px; color:#666; } #popupEcubeMemInfo dd { height:60px; border-bottom:solid 1px #dfdfdf; margin-top:-60px; padding:0 0 0 80px; text-align:right; overflow:hidden; } #popupEcubeMemInfo dd input { width:100%; height:60px; border:0; padding:0; font-family:'Roboto'; font-size:14px; color:#000; text-align:right; } #popupEcubeMemInfo dd input::placeholder { font-family:'Noto Sans KR'; font-size:14px; font-weight:300; color:#999; } #popupEcubeMemInfo dd input::-moz-placeholder { font-family:'Noto Sans KR'; font-size:14px; font-weight:300; color:#999; } #popupEcubeMemInfo dd input::-ms-input-placeholder { font-family:'Noto Sans KR'; font-size:14px; font-weight:300; color:#999; } #popupEcubeMemInfo dd input::-webkit-input-placeholder { font-family:'Noto Sans KR'; font-size:14px; font-weight:300; color:#999; } #popupEcubeMemInfo dd select { width:100%; max-width:135px; height:60px; background:url('/mobile/img/202003170001/mark_select.png') right 27px no-repeat transparent; background-size:11px auto; border:0; padding-right:21px; font-size:14px; color:#000; text-align:right; appearance:none; -moz-appearance:none; -webkit-appearance:none; } #popupEcubeMemInfo .btnWrap { text-align:center; margin:20px -3px; } #popupEcubeMemInfo .btnWrap a { display:inline-block; border-radius:17px; border-width:1px; border-style:solid; border-color:#AEAEAE; color:#888; padding:5px 20px; margin:0 3px; } #popupEcubeMemInfo .btnWrap a + a { border-color:#666; color:#666; } #popupEcubeMemInfo .notify { margin:10px 0 -10px 0; font-size:11px; font-weight:300; color:#fe5730; text-align:right; } #popupEcubeMemInfo .notice { margin-top:30px; } #popupEcubeMemInfo .notice li { position:relative; margin-top:5px; padding-left:7px; font-size:12px; font-weight:300; line-height:20px; color:#777; word-wrap:break-word; word-break:keep-all; } #popupEcubeMemInfo .notice li:last-child { margin-top:0; } #popupEcubeMemInfo .notice li:before { content:'-'; position:absolute; top:0; left:0; display:block; } #popupEcubeMemInfo .radioBox { display:flex; justify-content:end; align-items:center; height:100%; } #popupEcubeMemInfo .radioBox label { position:relative; padding-left:24px; } #popupEcubeMemInfo .radioBox label + label { margin-left:40px; } #popupEcubeMemInfo .radioBox label span:before { content:''; position:absolute; top:2px; left:0; width:16px; height:16px; border:solid 1px #d1d1d1; border-radius:50%; box-sizing:border-box; } #popupEcubeMemInfo .radioBox input { position:absolute; top:-15px; left:-15px; width:0; height:0; opacity:0; } #popupEcubeMemInfo .radioBox input:checked + span:before { border:4px solid #00ADA2; } /* 상세 - 전년도 이큐브스쿨 멤버 정보 입력 팝업 */ #popupPreEcubeMemInfo { width:85%; max-width:410px; } #popupPreEcubeMemInfo .tit { position:absolute; top:0; left:0; right:0; background:#fff; padding:30px 0 25px; word-wrap:break-word; word-break:keep-all; } #popupPreEcubeMemInfo .cont { max-height:510px; padding:55px 30px 40px; overflow:auto; box-sizing:border-box; } #popupPreEcubeMemInfo dl { margin-top:23px; } #popupPreEcubeMemInfo dt { height:60px; line-height:60px; color:#666; } #popupPreEcubeMemInfo dd { height:60px; border-bottom:solid 1px #dfdfdf; margin-top:-60px; padding:0 0 0 100px; text-align:right; overflow:hidden; } #popupPreEcubeMemInfo dd input { width:100%; height:60px; border:0; padding:0; font-family:'Roboto'; font-size:15px; color:#000; text-align:right; } #popupPreEcubeMemInfo dd input::placeholder { font-family:'Noto Sans KR'; font-size:14px; font-weight:300; color:#999; } #popupPreEcubeMemInfo dd input::-moz-placeholder { font-family:'Noto Sans KR'; font-size:14px; font-weight:300; color:#999; } #popupPreEcubeMemInfo dd input::-ms-input-placeholder { font-family:'Noto Sans KR'; font-size:14px; font-weight:300; color:#999; } #popupPreEcubeMemInfo dd input::-webkit-input-placeholder { font-family:'Noto Sans KR'; font-size:14px; font-weight:300; color:#999; } #popupPreEcubeMemInfo dd select { width:100%; max-width:135px; height:60px; background:url('/mobile/img/202003170001/mark_select.png') right 27px no-repeat transparent; background-size:11px auto; border:0; padding-right:21px; font-size:14px; color:#000; text-align:right; appearance:none; -moz-appearance:none; -webkit-appearance:none; } #popupPreEcubeMemInfo .btnWrap { text-align:center; margin:20px -3px; } #popupPreEcubeMemInfo .btnWrap a { display:inline-block; border-radius:17px; border-width:1px; border-style:solid; border-color:#AEAEAE; color:#888; padding:5px 20px; margin:0 3px; } #popupPreEcubeMemInfo .btnWrap a + a { border-color:#666; color:#666; } #popupPreEcubeMemInfo .notify { margin:10px 0 -10px 0; font-size:12px; font-weight:300; color:#fe5730; text-align:right; } #popupPreEcubeMemInfo .notice { font-size:14px; font-weight:300; margin-top:40px; } #popupPreEcubeMemInfo .notice li { line-height:22px; position:relative; padding-left:7px; } #popupPreEcubeMemInfo .notice li::before { content:"-"; position:absolute; left:0; top:0; } #popupPreEcubeMemInfo .radioBox { display:flex; justify-content:end; align-items:center; height:100%; } #popupPreEcubeMemInfo .radioBox label { position:relative; padding-left:24px; } #popupPreEcubeMemInfo .radioBox label + label { margin-left:40px; } #popupPreEcubeMemInfo .radioBox label span:before { content:''; position:absolute; top:4px; left:0; width:16px; height:16px; border:solid 1px #d1d1d1; border-radius:50%; box-sizing:border-box; } #popupPreEcubeMemInfo .radioBox input { position:absolute; top:-15px; left:-15px; width:0; height:0; opacity:0; } #popupPreEcubeMemInfo .radioBox input:checked + span:before { border:4px solid #00ADA2; } /* 상세 - 이큐브스쿨 보호자 정보 입력 팝업 */ #popupEcubeNokInfo { width:85%; min-width:250px; max-width:360px; } #popupEcubeNokInfo .tit { position:absolute; top:0; left:0; right:0; background:#fff; padding:30px 0 25px; word-wrap:break-word; word-break:keep-all; } #popupEcubeNokInfo .cont { max-height:510px; padding:55px 25px 40px 25px; overflow:auto; box-sizing:border-box; } #popupEcubeNokInfo .sameChk { display:flex; justify-content:end; color:#666; height:20px; margin-top:30px; padding-bottom:15px; border-bottom:1px solid #E9E9E9; } #popupEcubeNokInfo .sameChk span { position:relative; height:20px; line-height:20px; color:#666; display:inline-block; padding-left:25px; } #popupEcubeNokInfo .sameChk span:before { content:''; position:absolute; top:0; left:0; width:20px; height:20px; background:url('/mobile/img/202003170001/mark_check.png') left center no-repeat; background-size:auto 100%; border:solid 1px #d1d1d1; border-radius:3px; display:block; box-sizing:border-box; } #popupEcubeNokInfo .sameChk input { position:absolute; top:0; left:-20px; width:0; height:0; opacity:0; } #popupEcubeNokInfo .sameChk input:checked + span:before { background-color:#00ADA2; background-position:right center; border:0; } #popupEcubeNokInfo dt { height:60px; line-height:60px; color:#666; } #popupEcubeNokInfo dd { height:60px; border-bottom:solid 1px #dfdfdf; margin-top:-60px; padding:0 0 0 80px; text-align:right; overflow:hidden; } #popupEcubeNokInfo dd input { width:100%; height:60px; border:0; padding:0; font-family:'Roboto'; font-size:14px; color:#000; text-align:right; } #popupEcubeNokInfo dd input::placeholder { font-family:'Noto Sans KR'; font-size:14px; font-weight:300; color:#999; } #popupEcubeNokInfo dd input::-moz-placeholder { font-family:'Noto Sans KR'; font-size:14px; font-weight:300; color:#999; } #popupEcubeNokInfo dd input::-ms-input-placeholder { font-family:'Noto Sans KR'; font-size:14px; font-weight:300; color:#999; } #popupEcubeNokInfo dd input::-webkit-input-placeholder { font-family:'Noto Sans KR'; font-size:14px; font-weight:300; color:#999; } #popupEcubeNokInfo dd.number .sign { width:10px; height:1px; background:#000; margin:-5px 0 0 5px; font-size:0; line-height:0; vertical-align:middle; display:inline-block; } #popupEcubeNokInfo dd.number select { width:30%; max-width:50px; height:60px; background:url('/mobile/img/202003170001/mark_select.png') right 27px no-repeat transparent; background-size:11px auto; border:0; padding:0 18px 0 0; font-family:'Roboto'; font-size:15px; color:#000; vertical-align:bottom; appearance:none; -moz-appearance:none; -webkit-appearance:none; } #popupEcubeNokInfo dd.number input { width:22%; font-size:15px; } /* 약관 동의 */ .ymPolicy.comm h3 { font-size:15px; line-height:19px; font-weight:700; letter-spacing:-0.2px; } .ymPolicy.comm input:checked + i { background-color:#fe5730; } .ymPolicy.comm .listType { margin:5px 0 0 15px; } .ymPolicy.ecube input:checked + i { background-color:#00ADA2; } .ymPolicy.ecube .listType { margin:5px 0 0 15px; } /* ------------------------------------------ renew :장바구니, 결제 ---------------------------------------------*/ .payNew, .cartNew { background:#f3f7f9; font-family:'Pretendard'; font-weight:400; overflow:hidden; box-sizing:border-box; } .payNew input, .payNew select, .payNew button, .cartNew input, .cartNew select, .cartNew button { font-family:'Pretendard'; font-weight:400; } .orderNew { position:fixed; z-index:51; left:0; right:0; bottom:0; width:100%; background:#fff; padding:10px 5.56vw; font-family:'Pretendard'; font-weight:400; text-align:center; display:flex; box-sizing:border-box; } .orderNew a { color:#fff; display:block; } .orderNew > a:last-child { width:100%; height:50px; background:#142136; border-radius:10px; font-size:16px; font-weight:600; line-height:50px; } .orderNew .noteTime { position:relative; min-width:94px; max-width:150px; height:50px; background:#fff; border:solid 1px #ececec; border-radius:10px; margin-right:10px; padding-top:4px; font-size:11px; color:#595b5f; display:block; box-sizing:border-box; flex-basis:40%; } .orderNew .noteTime b { margin-top:-1px; font-size:18px; font-weight:700; color:#d8321c; display:block; } .orderNew .noteTime b:before { content:''; width:16px; height:16px; background:url('/mobile/asset/images/icon_timer.svg') center center no-repeat; margin:-2px 4px 0 0; font-size:0; line-height:0; text-indent:-9999px; vertical-align:middle; display:inline-block; overflow:hidden; } .orderNew .noteTime .guid { position:absolute; z-index:2; top:-29px; left:0; width:148px; height:22px; background:#d8321c; border-radius:25px; font-size:10px; font-weight:500; line-height:21px; letter-spacing:-0.2px; -webkit-tap-highlight-color:rgba(0,0,0,0); } .orderNew .noteTime .guid:after { content:''; width:10px; height:10px; background:url('/mobile/asset/images/mark_more_01.svg') center center no-repeat; margin:-1px 0 0 4px; vertical-align:middle; display:inline-block; } .orderNew .noteTime .guid:before { content:''; position:absolute; z-index:-1; left:40px; bottom:-2px; width:9px; height:9px; background:#d8321c; display:block; transform:rotate(45deg); } /* 장바구니 */ .cartNew { padding-bottom:4.17vw; } .cartNew hr { position:relative; z-index:1; width:100%; height:1px; background:#e5e5e5; border:0; margin:0; padding:0; display:block; } .cartNew .intro { position:relative; height:min(8.34vw,40px); background:#faf5ff; padding:0 20px; font-size:min(3.34vw,13px); color:#7a2ecd; display:flex; align-items:center; box-sizing:border-box; } .cartNew .intro:before { content:''; width:14px; height:14px; background:url('/mobile/asset/images/mark_note_01.svg') center center no-repeat; border:solid 1.6px #7a2ecd; border-radius:15px; margin-right:5px; box-sizing:border-box; } .cartNew .dateBox { background:#fff; margin-bottom:-1px; padding-top:min(5.56vw,35px); } .cartNew .dateBox li { position:relative; z-index:2; height:39px; margin:0 10px; display:inline-block; box-sizing:border-box; } .cartNew .dateBox li a { height:37px; font-size:min(3.9vw,17px); font-weight:500; color:#c3c3c3; line-height:37px; letter-spacing:-0.64px; display:block; -webkit-tap-highlight-color:rgba(0,0,0,0); } .cartNew .dateBox li .timer { width:16px; height:16px; background:url('/mobile/asset/images/icon_timer.svg') center center no-repeat; margin-top:-2px; font-size:0; line-height:0; text-indent:-9999px; vertical-align:middle; display:inline-block; overflow:hidden; opacity:.27; } .cartNew .dateBox li.on { border-bottom:solid 2px #142136; } .cartNew .dateBox li.on a { font-weight:700; color:#142136; } .cartNew .dateBox li.on .timer { opacity:1; } .cartNew .dateBox ul { padding:0 11px 0 10px; text-align:left; white-space:nowrap; overflow-x:auto; overflow-y:hidden; scrollbar-track-color:transparent; -webkit-overflow-scrolling:touch; } .cartNew .dateBox ul::-webkit-scrollbar { height:0; -webkit-appearance:none; } .cartNew .dateBox .now { padding-bottom:min(4.83vw,32px); color:#7a2ecd; letter-spacing:-0.48px; text-align:center; box-sizing:border-box; } .cartNew .dateBox .now i { height:min(6.12vw,30px); border:solid 1px #7a2ecd; border-radius:50px; padding:0 min(2.5vw,15px); font-size:min(3.34vw,15px); display:inline-flex; align-items:center; box-sizing:border-box; } .cartNew .dateBox .now i:before { content:''; width:min(3.056vw,15px); height:15px; background:url('/mobile/asset/images/icon_calendar.svg') center center no-repeat; background-size:100% auto; margin-top:-2px; margin-right:min(1.112vw,5px); vertical-align:middle; display:inline-block; } .cartNew .dateBox .now strong { margin-top:5px; font-size:min(6.67vw,34px); font-weight:700; line-height:normal; display:block; } .cartNew .delBox { margin:25px 5.56vw 15px 5.56vw; display:flex; justify-content:space-between; align-items:center; } .cartNew .delBox label { position:relative; padding-left:25px; color:#000; display:inline-block; overflow:hidden; } .cartNew .delBox label span { font-size:14px; letter-spacing:-0.28px; } .cartNew .delBox label span:before { content:''; position:absolute; z-index:2; top:0; left:0; width:18px; height:18px; background:#fff; border:solid 1.4px #cbccce; border-radius:4px; box-sizing:border-box; } .cartNew .delBox label input { position:absolute; z-index:-1; top:0; left:-1px; width:0; height:0; border:0; opacity:0; } .cartNew .delBox label input:checked + span:before { background:url('/mobile/asset/images/mark_check.svg') center center no-repeat; background-color:#142136; border:0; } .cartNew .delBox button { height:26px; background:#fff; border:solid 1px #e3e5e8; border-radius:5px; padding:0 6px; font-size:13px; color:#595b5f; line-height:22px; } .cartNew .partBox { position:relative; background:#fff; border-radius:min(2.3vw,15px); margin:0 5.56vw 15px 5.56vw; overflow:hidden; } .cartNew .partBox h3 { border-bottom:solid 1px #e9e9e9; margin-bottom:4.17vw; padding:4.17vw 4.17vw 3.8vw 4.17vw; font-size:min(4.45vw,21px); font-weight:600; color:#000; box-sizing:border-box; } .cartNew .partBox h4 { border-bottom:solid 1px #f4f4f6; margin:0 4.17vw 4.17vw 4.17vw; padding-bottom:0.8vw; font-weight:500; font-size:min(3.35vw,15px); color:#595b5f; } .cartNew .partBox mark { position:absolute; top:0; right:0; height:min(6.95vw,30px); background:#ea3e23; border-top-right-radius:min(1.5vw,16px); border-bottom-left-radius:min(2.3vw,15px); padding:0 2vw; font-size:min(3.06vw,13px); font-weight:500; color:#fff; line-height:min(6.95vw,30px); display:none; box-sizing:border-box; } .cartNew .partBox.limit { border:solid 1px #ea3e23; margin:0 5.3vw 15px 5.3vw; overflow:visible; } .cartNew .partBox.limit h3 { padding-right:75px; } .cartNew .partBox.limit mark { display:block; } .cartNew .itemBox { position:relative; padding:0 4.17vw 5.6vw 4.17vw; } .cartNew .itemBox label { position:relative; min-height:18px; margin-right:30px; padding-left:28px; color:#000; display:inline-block; overflow:hidden; } .cartNew .itemBox label span { font-size:min(3.89vw,17px); letter-spacing:-0.28px; } .cartNew .itemBox label span:before { content:''; position:absolute; z-index:2; top:0; left:0; width:18px; height:18px; background:#fff; border:solid 1.4px #cbccce; border-radius:4px; box-sizing:border-box; } .cartNew .itemBox label input { position:absolute; z-index:-1; top:0; left:-1px; width:0; height:0; border:0; opacity:0; } .cartNew .itemBox label input:checked + span:before { background:url('/mobile/asset/images/mark_check.svg') center center no-repeat; background-color:#142136; border:0; } .cartNew .itemBox .price { position:relative; z-index:1; height:27px; margin:-27px 0 0 100px; text-align:right; font-size:min(3.89vw,17px); font-weight:400; color:#000; line-height:27px; letter-spacing:-0.28px; display:block; } .cartNew .itemBox .btnDel { position:absolute; z-index:2; top:-1px; right:4.17vw; width:20px; height:20px; background:url('/mobile/asset/images/btn_delete_01.svg') center center no-repeat; background-color:transparent; font-size:0; line-height:0; text-indent:-9999px; display:block; overflow:hidden; } .cartNew .itemBox .number { position:relative; z-index:5; width:82px; height:27px; background:#fff; border:solid 1px #dddfe1; border-radius:5px; margin:6px 0 0 28px; text-align:center; display:block; overflow:hidden; box-sizing:border-box; } .cartNew .itemBox .number input { width:30px; height:22px; background:transparent; border:0; padding-bottom:3px; font-size:14px; color:#000; letter-spacing:-0.28px; text-align:center; } .cartNew .itemBox .number button { position:absolute; z-index:2; top:0; width:28px; height:25px; background:transparent; font-size:0; line-height:0; text-indent:-9999px; overflow:hidden; } .cartNew .itemBox .number button:after, .cartNew .itemBox .number button:before { content:''; position:absolute; background:#000; display:block; } .cartNew .itemBox .number button:after { top:6px; left:13px; width:2px; height:12px; } .cartNew .itemBox .number button:before { top:11px; left:8px; width:12px; height:2px; } .cartNew .itemBox .number .up { right:0; } .cartNew .itemBox .number .down { left:0; } .cartNew .itemBox .number .down:after { display:none; } .cartNew .itemBox .number .done:after, .cartNew .itemBox .number .done:before { background:#ccc; } .cartNew .itemBox .number.off input { color:#ccc; } .cartNew .itemBox .number.off button:after, .cartNew .itemBox .number.off button:before { background:#ccc; } .cartNew .timeInfo { border-top:solid 1px #eee; margin:0 4.17vw; padding:3.6vw 2.7vw; font-size:min(3.35vw,14px); color:#808080; letter-spacing:-0.24px; } .cartNew .timeInfo li { position:relative; padding-left:18px; margin-top:7px; line-height:min(4.5vw,21px); word-break:keep-all; } .cartNew .timeInfo li:before { content:''; position:absolute; top:min(1.7vw,9px); left:7px; width:3px; height:2px; background:#808080; border-radius:3px; display:block; overflow:hidden; } .cartNew .timeInfo ul { padding-bottom:18px; } .cartNew .timeInfo ul:last-child { padding-bottom:8px; } .cartNew .timeInfo .tit { color:#000; display:block; } /* 연관 상품 */ .prodRel { padding:30px 5.56vw 150px 5.56vw; font-family:'Pretendard'; font-weight:400; } .prodRel .tit { font-size:18px; color:#142136; line-height:24px; letter-spacing:-0.36px; text-align:center; display:block; } .prodRel .tit b { font-weight:700; } .prodRel .relList { padding-top:2px; } .prodRel .relList li { position:relative; min-height:100px; background:#fff; border-radius:15px; margin-top:15px; padding-left:105px; font-size:13px; color:#808080; letter-spacing:-0.26px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; box-shadow:3px 3px 15px 0px rgba(0, 0, 0, 0.08); } .prodRel .relList button { position:absolute; right:15px; bottom:15px; width:64px; height:23px; background:#fff; border:solid 1px #e3e5e8; border-radius:5px; font-family:'Pretendard'; font-weight:400; font-size:11px; color:#595b5f; letter-spacing:-0.44px; text-align:center; display:block; box-sizing:border-box; } .prodRel .relList button:before { content:''; width:12px; height:13px; background:url('/mobile/asset/images/icon_cart.svg') center center no-repeat; margin:-2px 1px 0 0; vertical-align:middle; display:inline-block; } .prodRel .relList .pic { position:absolute; top:15px; left:15px; width:74px; height:69px; border-radius:10px; font-size:0; line-height:0; display:block; overflow:hidden; } .prodRel .relList .pic img { width:100%; } .prodRel .relList .txt { margin-bottom:6px; display:block; } .prodRel .relList .txt b { padding-bottom:1px; font-size:16px; font-weight:500; color:#000; letter-spacing:-0.32px; display:block; } .prodRel .relList .charge { font-weight:500; color:#000; } /* 결제 */ .payNew { padding:15px 5.56vw 110px 5.56vw; } .payNew > h3 { margin-top:min(5.28vw,40px); margin-bottom:min(2.78vw,20px); font-size:min(4.45vw,21px); font-weight:600; color:#7e9db3; letter-spacing:-0.32px; } .payNew select, .payNew input[type='text'], .payNew input[type='number'], .payNew input[type='password'] { height:37px; border:solid 1px #e7e7e7; border-radius:5px; padding-left:7px; font-size:14px; color:#000; letter-spacing:-0.28px; vertical-align:top; box-sizing:border-box; } .payNew select { background:url('/mobile/asset/images/mark_select.svg') calc(100% - 10px) center no-repeat; appearance:none; -webkit-appearance:none; } .payNew select:disabled { background-color:#f4f4f4; color:#b7b7b7; opacity:1; opacity:1; } .payNew select:focus, .payNew input[type='text']:focus, .payNew input[type='number']:focus, .payNew input[type='password']:focus { border-color:#142136; } .payNew input[type='text']::placeholder, .payNew input[type='number']::placeholder, .payNew input[type='password']::placeholder { color:#bdbdbd; } .payNew .partBox { position:relative; min-height:50px; background:#fff; border-radius:min(2.3vw,15px); margin-top:10px; padding:0 4.17vw; overflow:hidden; } .payNew .partBox h3, .payNew .partBox h4 { position:relative; height:min(13.89vw,70px); margin:0 -4.17vw; padding:0 4.17vw; font-size:min(3.89vw,18px); font-weight:700; color:#595b5f; line-height:min(13.89vw,70px); letter-spacing:-0.28px; } .payNew .partBox h3 mark, .payNew .partBox h4 mark { height:19px; background:#faf5ff; border:solid 1px #7a2ecd; border-radius:20px; margin:-2px 0 0 4px; padding:0 5px; font-size:10px; font-weight:500; color:#7a2ecd; line-height:17px; vertical-align:middle; display:inline-block; box-sizing:border-box; } .payNew .partBox h4 .vital { width:6px; height:6px; background:#d8321c; border-radius:10px; margin:-16px 0 0 5px; font-size:0; line-height:0; text-indent:-9999px; vertical-align:middle; display:inline-block; overflow:hidden; } .payNew .partBox h4 .guide { font-size:12px; font-weight:400; letter-spacing:-0.24px; display:none; } .payNew .partBox h4 .guide.active { display:inline-block; } .payNew .partBox h4 .guide.active + .vital { margin-left:3px; } .payNew .partBox h4 .btnExtd { left:0; width:100%; background-position:calc(100% - 4.17vw) center; } .payNew .partBox > button { position:absolute; top:12px; right:15px; height:26px; background:#fff; border:solid 1px #e3e5e8; border-radius:5px; padding:0 8px; font-size:13px; color:#595b5f; } .payNew .partBox > button + button { right:15px; } .payNew .partBox > button + button + button { right:62px; background:#838c9c; border-color:#838c9c; color:#fff; } .payNew .partBox .notify li { position:relative; margin-top:6px; padding-left:18px; font-size:12px; color:#808080; letter-spacing:-0.24px; line-height:14.5px; word-break:keep-all; } .payNew .partBox .notify li:before { content:''; position:absolute; top:5px; left:7px; width:3px; height:3px; background:#808080; border-radius:5px; display:block; } .payNew .partBox .btnExtd { position:absolute; z-index:2; top:0; right:0; width:min(13.89vw,70px); height:min(13.89vw,70px); background:url('/mobile/asset/images/mark_extend_open.svg') center center no-repeat; background-color:transparent !important; border:0 !important; padding:0; font-size:0; line-height:0; text-indent:-9999px; display:block; overflow:hidden; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0); } .payNew .partBox .btnExtd.on { background-image:url('/mobile/asset/images/mark_extend_close.svg'); } .payNew .partBox .btnView { position:absolute; z-index:2; top:14px; right:15px; width:31px; height:22px; background:#fff; border:solid 1px #d0d3d7; border-radius:5px; font-size:11px; font-weight:500; color:#808080; line-height:21px; text-align:center; display:block; box-sizing:border-box; } .payNew .infoDate { height:min(13.89vw,70px); margin-top:-13.89vw; font-size:min(5vw,24px); font-weight:600; color:#000; letter-spacing:-0.36px; line-height:min(13.89vw,70px); text-align:right; display:block; } .payNew .infoProd { position:relative; padding-top:min(4.6vw,27px); padding-bottom:min(4.2vw,25px); font-size:min(3.89vw,17px); color:#000; letter-spacing:-0.28px; display:block; } .payNew .infoProd:before { content:''; position:absolute; top:0; left:-4.17vw; right:-4.17vw; height:1px; background:#f4f4f6; display:block; } .payNew .infoProd mark { width:80px; height:17px; background:#fff7f6; border:solid 1px #d8321c; border-radius:20px; margin:1px 0 4px 0; font-size:10px; font-weight:600; color:#d8321c; letter-spacing:-0.2px; line-height:15px; text-align:center; display:block; box-sizing:border-box; } .payNew .infoProd mark:before { content:''; width:12px; height:12px; background:url('/mobile/asset/images/icon_timer.svg') center center no-repeat; background-size:12px 12px; margin:-2px 2px 0 0; vertical-align:middle; display:inline-block; } .payNew .infoProd summary { position:relative; line-height:min(5.3vw,24px); overflow:hidden; list-style-type:none; cursor:pointer; -webkit-tap-highlight-color:rgba(0,0,0,0); } .payNew .infoProd summary:after { content:''; position:absolute; bottom:0; right:0; width:20px; height:20px; background:url('/mobile/asset/images/mark_extend_open.svg') center center no-repeat; display:block; } .payNew .infoProd summary::-webkit-details-marker { display:none; } .payNew .infoProd summary span { max-width:calc(100% - 85px); text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; display:inline-block; overflow:hidden; } .payNew .infoProd[open] summary { position:absolute; top:min(5vw,25px); right:0; width:100%; height:18px; font-size:0; line-height:0; text-indent:-9999px; } .payNew .infoProd[open] summary:after { background-image:url('/mobile/asset/images/mark_extend_close.svg'); } .payNew .infoProd[open] summary mark { display:none; } .payNew .infoProd .tit { font-size:min(3.89vw,18px); font-weight:700; color:#595b5f; letter-spacing:-0.28px; } .payNew .infoProd .prod { padding-top:13px; font-size:14px; } .payNew .infoProd .prod li { position:relative; margin-top:4px; padding:0 70px 0 10px; font-size:13px; color:#595b5f; letter-spacing:-0.26px; } .payNew .infoProd .prod li:before { content:''; position:absolute; top:7px; left:0; width:3px; height:3px; background:#595b5f; border-radius:10px; display:block; } .payNew .infoProd .prod li i { position:absolute; top:50%; right:0; width:70px; margin-top:-1px; text-align:right; display:block; transform:translateY(-50%); } .payNew .infoProd .prod li span { display:inline-block; } .payNew .infoProd .prod ul { padding:4px 0 0 8px; } .payNew .infoProd .prod + .prod { border-top:solid 1px #f4f4f6; margin-top:13px; } .payNew .infoProd .prod + .dlvy { border-top:solid 1px #f4f4f6; margin-top:8px; } .payNew .infoProd .dlvy { padding-top:8px; font-size:14px; } .payNew .infoProd .dlvy i { position:absolute; right:0; font-size:13px; color:#595b5f; letter-spacing:-0.26px; } .payNew .infoProd .dlvy + .prod { border-top:solid 1px #f4f4f6; margin-top:20px; } .payNew .chkSame { position:relative; margin-top:3px; padding-left:25px; display:inline-block; overflow:hidden; } .payNew .chkSame span { height:18px; font-size:12px; color:#595b5f; line-height:18px; letter-spacing:-0.24px; display:block; } .payNew .chkSame span:before { content:''; position:absolute; z-index:2; top:0; left:0; width:18px; height:18px; background:#fff; border:solid 1.4px #cbccce; border-radius:4px; box-sizing:border-box; } .payNew .chkSame input { position:absolute; z-index:-1; top:0; left:-1px; width:0; height:0; border:0; opacity:0; } .payNew .chkSame input:checked + span:before { background:url('/mobile/asset/images/mark_check.svg') center center no-repeat; background-color:#142136; border:0; } .payNew .contactInfo { margin-top:-3px; padding-bottom:min(4.17vw,23px); font-size:min(3.89vw,17px); color:#000; letter-spacing:-0.28px; display:block; } .payNew .contactModify { border-top:solid 1px #f4f4f6; margin-top:5px; padding-bottom:15px; } .payNew .contactModify dt { height:37px; margin:10px 0 -37px 0; font-size:13px; color:#595b5f; letter-spacing:-0.26px; line-height:37px; } .payNew .contactModify dd { padding-left:98px; display:flex; justify-content:space-between; } .payNew .contactModify select { width:30%; flex-shrink:0; } .payNew .contactModify select + input[type='number'] { margin:0 6px; } .payNew .contactModify input[type='text'] { width:100%; } .payNew .contactModify input[type='number'] { width:35%; padding-left:0; text-align:center; } .payNew .contactModify .req select, .payNew .contactModify .req input[type='text'], .payNew .contactModify .req input[type='number'] { border-color:#d8321c; } .payNew .contactModify .reqNote { margin:4px 0 -2px 0; font-size:12px; color:#d8321c; letter-spacing:-0.24px; text-align:right; display:block; } .payNew .contactModify .reqNote:last-child { margin-bottom:-5px; } .payNew .disctCoupon .cont { position:relative; height:37px; padding-right:75px; font-size:14px; color:#595b5f; display:none; } .payNew .disctCoupon .cont a { position:absolute; top:0; right:0; width:66px; height:37px; background:#ececec; border:solid 1px #ddd; border-radius:5px; font-size:14px; font-weight:400; color:#c6c6c6; line-height:37px; text-align:center; display:block; box-sizing:border-box; } .payNew .disctCoupon .cont.using { font-weight:500; color:#000; } .payNew .disctCoupon .cont.using a { background:#838c9c; border-color:#838c9c; color:#fff; } .payNew .disctCoupon.active { padding-bottom:15px; } .payNew .disctCoupon.active .cont { display:flex; align-items:center; } .payNew .disctCoupon.active .btnExtd { background-image:url('/mobile/asset/images/mark_extend_close.svg'); } .payNew .disctSom { position:relative; margin-top:1px; } .payNew .disctSom:before { content:''; position:absolute; top:-1px; left:-4.17vw; right:-4.17vw; height:1px; background:#f4f4f6; } .payNew .disctSom .write { position:relative; height:37px; padding-right:76px; display:none; } .payNew .disctSom .write input[type='text'], .payNew .disctSom .write input[type='number'] { width:100%; padding-right:10px; text-align:right; } .payNew .disctSom .write .erase { position:absolute; z-index:5; top:0; right:88px; height:37px; font-size:14px; color:#000; line-height:38px; display:block; } .payNew .disctSom .write .erase button { width:18px; height:19px; background:url('/mobile/asset/images/btn_delete_02.svg') center center no-repeat; background-color:#cfcfcf; border-radius:25px; margin:-2px 0 0 5px; font-size:0; line-height:0; text-indent:-9999px; vertical-align:middle; display:inline-block; overflow:hidden; } .payNew .disctSom .write .btnUseAll { position:absolute; z-index:2; top:0; right:0; width:66px; height:37px; background:#838c9c; border-radius:5px; font-size:14px; color:#fff; text-align:center; display:block; } .payNew .disctSom .write.using input[type='text'], .payNew .disctSom .write.using input[type='number'] { padding-right:52px; } .payNew .disctSom .notify { margin-top:15px; display:none; } .payNew .disctSom .mySom { font-size:12px; font-weight:400; letter-spacing:-0.24px; text-indent:-9999px; vertical-align:bottom; display:inline-block; overflow:hidden; opacity:0; } .payNew .disctSom.active { padding-bottom:14px; } .payNew .disctSom.active .write, .payNew .disctSom.active .notify { display:block; } .payNew .disctSom.active .mySom { text-indent:0; opacity:1; } .payNew .disctSom.active .btnExtd { background-image:url('/mobile/asset/images/mark_extend_close.svg'); } .payNew .pickWay { padding-bottom:5px; } .payNew .pickWay > li { border-top:solid 1px #f4f4f6; padding:14px 0 10px 0; } .payNew .pickWay > li:first-child { border-top:0; padding-top:2px; } .payNew .pickWay label { position:relative; display:inline-block; overflow:hidden; } .payNew .pickWay label span { height:16px; padding-left:25px; font-size:14px; color:#000; line-height:16px; letter-spacing:-0.28px; display:block; } .payNew .pickWay label span:before { content:''; position:absolute; top:0; left:0; width:16px; height:16px; background:#fff; border:solid 1.4px #cbccce; border-radius:20px; box-sizing:border-box; } .payNew .pickWay label input { position:absolute; top:0; left:-1px; width:0; height:0; line-height:0; opacity:0; } .payNew .pickWay label input:checked + span:before { border:solid 4px #142136; } .payNew .pickWay .linkInfo { height:16px; background:#faf5ff; border:solid 0.6px #7a2ecd; border-radius:20px; margin-left:6px; padding:0 5px 0 7px; font-size:10px; color:#7a2ecd; line-height:14px; letter-spacing:-0.2px; vertical-align:top; display:inline-block; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0); } .payNew .pickWay .linkInfo:after { content:''; width:10px; height:10px; background:url('/mobile/asset/images/mark_more_02.svg') center center no-repeat; margin:-2px 0 0 1px; vertical-align:middle; display:inline-block; } .payNew .pickWay .nodata { height:38px; background:#f6f6f6; border-radius:5px; margin:7px 0 3px 0; font-size:12px; font-weight:400; color:#808080; line-height:38px; text-align:center; display:block; } .payNew .pickWay .nodata:before { content:''; width:14px; height:14px; background:url('/mobile/asset/images/mark_note_02.svg') center center no-repeat; border:solid 1.6px #808080; border-radius:20px; margin:-3px 3px 0 0; vertical-align:middle; display:inline-block; box-sizing:border-box; } .payNew .giftCard { height:83px; margin:7px -4.17vw 3px -4.17vw; padding:0 4.17vw; white-space:nowrap; overflow-y:hidden; overflow-x:auto; scrollbar-track-color:transparent; -webkit-overflow-scrolling:touch; } .payNew .giftCard::-webkit-scrollbar { height:0; -webkit-appearance:none; } .payNew .giftCard li { margin-left:15px; display:inline-block; } .payNew .giftCard li:first-child { margin-left:0; } .payNew .giftCard mark { background:none; margin-bottom:1px; font-size:10px; color:#d8321c; display:block; } .payNew .giftCard label { position:relative; width:223px; height:83px; display:block; overflow:hidden; } .payNew .giftCard label span { width:100%; height:100%; border:solid 1px #eaeaea; border-radius:5px; padding:11px 10px 11px 120px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; box-sizing:border-box; } .payNew .giftCard label span:before { display:none; } .payNew .giftCard label input:checked + span { border:solid 2px #142136; padding:10px 9px 10px 119px; } .payNew .giftCard .tit { width:100%; font-size:10px; color:#808080; letter-spacing:-0.2px; text-align:left; text-overflow:ellipsis; white-space:nowrap; display:block; overflow:hidden; } .payNew .giftCard .pic { position:absolute; z-index:1; top:12px; left:12px; width:100px; height:59px; background:#eee; border-radius:3px; margin:0; padding:0; font-size:0; line-height:0; overflow:hidden; } .payNew .giftCard .pic img { height:100%; } .payNew .giftCard .link { position:absolute; z-index:5; top:32px; left:37px; width:50px; height:23px; font-size:11px; font-weight:500; color:#595b5f; line-height:23px; text-align:center; display:block; } .payNew .giftCard .link:after { content:''; position:absolute; z-index:-1; top:0; left:0; right:0; bottom:0; background:#fff; border-radius:5px; display:block; } .payNew .giftCard .link:before { content:''; position:absolute; z-index:-1; top:-20px; left:-25px; width:100px; height:59px; background:#00000033; border-radius:2px; display:block; } .payNew .giftCard .worth { padding-bottom:3px; font-size:14px; font-weight:500; color:#000; letter-spacing:-0.28px; text-align:left; display:block; } .payNew .giftCardNote { position:relative; margin-top:10px; padding-left:18px; font-size:12px; color:#d8321c; line-height:14px; letter-spacing:-0.24px; word-break:keep-all; display:block; } .payNew .giftCardNote:before { content:''; position:absolute; top:4px; left:8px; width:3px; height:3px; background:#d8321c; border-radius:5px; overflow:hidden; } .payNew .cashRecp { min-height:16px; margin-top:15px; padding-bottom:2px; text-align:right; } .payNew .cashRecp label { position:relative; padding-right:36px; display:inline-block; } .payNew .cashRecp label span { padding-left:0; font-size:12px; color:#595b5f; } .payNew .cashRecp label span:after { content:''; position:absolute; top:2px; right:13px; width:12px; height:12px; background:#fff; border-radius:15px; display:block; overflow:hidden; } .payNew .cashRecp label span:before { left:auto; right:0; width:27px; background:#e6e6e6; border:0 !important; } .payNew .cashRecp label input:checked + span:after { right:2px; } .payNew .cashRecp label input:checked + span:before { background:#142136; } .payNew .cashRecp .write, .payNew .cashRecp .notify { text-align:left; display:none; } .payNew .cashRecp .write { margin:10px 0 13px 0; } .payNew .cashRecp .write select { float:left; width:130px; font-size:13px; } .payNew .cashRecp .write input[type='text'], .payNew .cashRecp .write input[type='number'] { float:right; width:calc(100% - 140px); padding-left:7px; } .payNew .cashRecp .write:after { content:''; display:block; clear:both; } .payNew .cashRecp.active .write, .payNew .cashRecp.active .notify { display:block; } .payNew .creditCard { padding-bottom:8px; } .payNew .creditCard select { width:100%; margin-bottom:10px; } .payNew .sumDetail { font-size:14px; color:#000; letter-spacing:-0.28px; } .payNew .sumDetail dl { margin-top:-3px; padding-bottom:15px; } .payNew .sumDetail dt, .payNew .sumDetail dd { height:20px; line-height:20px; } .payNew .sumDetail dt { margin:12px 0 -20px 0; } .payNew .sumDetail dt:first-child { margin-top:0; } .payNew .sumDetail dd { text-align:right; } .payNew .sumDetail dt.total { border-top:solid 1px #eaeaea; padding-top:12px; } .payNew .sumDetail dd.total { font-size:16px; font-weight:600; letter-spacing:-0.32px; } .payNew .sumDetail summary { position:absolute; top:0; left:0; right:0; height:min(13.89vw,70px); background:transparent; font-size:0; line-height:0; text-indent:-9999px; display:block; overflow:hidden; list-style-type:none; cursor:pointer; -webkit-tap-highlight-color:rgba(0,0,0,0); } .payNew .sumDetail summary:after { content:''; position:absolute; top:50%; right:4.17vw; width:20px; height:20px; background:url('/mobile/asset/images/mark_extend_open.svg') center center no-repeat; display:block; transform:translateY(-50%); } .payNew .sumDetail summary::-webkit-details-marker { display:none; } .payNew .sumDetail[open] summary:after { background-image:url('/mobile/asset/images/mark_extend_close.svg'); } .payNew .sumDetail .disct { color:#d8321c; } .payNew .sumDetail .disctDet { position:relative; margin-top:6px; padding-left:19px; font-size:13px; color:#808080; display:flex; } .payNew .sumDetail .disctDet:before { content:''; position:absolute; top:7px; left:8px; width:3px; height:3px; background:#808080; border-radius:5px; display:block; } .payNew .sumDetail .disctDet a { width:41px; height:22px; border:solid 1px #d0d3d7; border-radius:5px; margin:-2px 0 0 6px; font-size:11px; font-weight:500; color:#808080; line-height:21px; text-align:center; vertical-align:middle; display:inline-block; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0); } .payNew .sumDetail .disctDet span { margin-left:auto; } .payNew .sumDetail .disctDet + .disctDet { margin-top:2px; } .payNew .agreeAll span, .payNew .agreeList span, .payNew .agreeDet span { height:18px; display:block; } .payNew .agreeAll span:before, .payNew .agreeList span:before, .payNew .agreeDet span:before { content:''; position:absolute; z-index:2; top:0; left:0; width:18px; height:18px; background:#fff; border:solid 1.4px #cbccce; border-radius:4px; box-sizing:border-box; } .payNew .agreeAll input, .payNew .agreeList input, .payNew .agreeDet input { position:absolute; z-index:-1; top:0; left:-1px; width:0; height:0; border:0; opacity:0; } .payNew .agreeAll input:checked + span:before, .payNew .agreeList input:checked + span:before, .payNew .agreeDet input:checked + span:before { background:url('/mobile/asset/images/mark_check.svg') center center no-repeat; background-color:#142136; border:0; } .payNew .agreeAll { position:relative; min-height:min(5vw,25px); margin-top:4.45vw; margin-bottom:2.5vw; padding-left:27px; display:inline-block; overflow:hidden; } .payNew .agreeAll span { font-size:14px; color:#000; line-height:18px; letter-spacing:-0.28px; } .payNew .agreeList, .payNew .agreeDet { border-top:solid 1px #f4f4f6; padding:3px 0 16px 0; } .payNew .agreeList li, .payNew .agreeDet li, .payNew .policyList li { position:relative; margin-top:13px; font-size:14px; color:#595b5f; line-height:18px; letter-spacing:-0.28px; display:flex; justify-content:space-between; align-items:center; } .payNew .agreeList li a, .payNew .agreeDet li a, .payNew .policyList li a { width:31px; height:22px; background:#fff; border:solid 1px #d0d3d7; border-radius:5px; font-size:11px; font-weight:500; color:#808080; line-height:21px; text-align:center; display:block; box-sizing:border-box; } .payNew .agreeList label, .payNew .agreeDet label { position:relative; padding-left:28px; display:inline-block; } .payNew .agreeList label span, .payNew .agreeDet label span { color:#595b5f; } .payNew .agreeDet { display:none; } .payNew .agreeDet.active { display:block; } .payNew .argeeNote { margin-top:max(-3.34vw,-21px); padding:0 0 13px 28px; font-size:12px; color:#d8321c; letter-spacing:-0.24px; display:block; } .payNew .policyList { border-top:solid 1px #f4f4f6; padding-top:16px; } .payNew .infoPolicy { border-top:solid 1px #f4f4f6; max-height:150px; padding:15px 10px 15px 0; font-size:14px; color:#595b5f; line-height:1.5; letter-spacing:-0.28px; word-break:keep-all; display:none; overflow-y:auto; } .payNew .infoPolicy dl { padding-left:13px; } .payNew .infoPolicy dt { position:relative; margin-top:9px; } .payNew .infoPolicy dt:before { content:''; position:absolute; top:7px; left:-10px; width:3px; height:3px; background:#595b5f; border-radius:5px; } .payNew .infoPolicy dt:first-child { margin-top:0; } .payNew .infoPolicy .note { margin-top:15px; } .payNew .infoPolicy .note:before { content:'※'; margin:-5px 5px 0 0; font-family:sans-serif; color:#595b5f; vertical-align:middle; display:inline-block; } .payNew .infoPolicy::-webkit-scrollbar { width:3px; background:#fff; } .payNew .infoPolicy::-webkit-scrollbar-thumb { background:#d9d9d9; border-radius:20px; } .payNew .infoPolicy::-webkit-scrollbar-button { width:10px; height:10px; } .payNew .infoPolicy.active { display:block; } /* 결제 :n회차 */ .payNew .infoCount { position:relative; background:#faf5ff; border:solid 1px #c7aee3; border-radius:min(2.3vw,15px); margin-top:10px; padding:4.17vw 50px 4vw 4.17vw; font-size:12px; color:#7a2ecd; line-height:1.2; } .payNew .infoCount a { position:absolute; top:18px; right:15px; width:14px; height:14px; background:url('/mobile/asset/images/mark_note_01.svg') center center no-repeat; border:solid 1.6px #7a2ecd; border-radius:20px; font-size:0; line-height:0; text-indent:-9999px; display:block; overflow:hidden; box-sizing:border-box; } .payNew .infoCount span { display:inline-block; } .payNew .infoCount strong { margin-bottom:13px; font-size:18px; font-weight:700; line-height:24px; display:block; } .payNew .infoCount .sameChk { position:relative; z-index:2; min-height:18px; padding-left:27px; display:inline-block; overflow:hidden; } .payNew .infoCount .sameChk span { font-size:14px; } .payNew .infoCount .sameChk span:before { content:''; position:absolute; z-index:2; top:0; left:0; width:18px; height:18px; background:#fff; border:solid 1.4px #cbccce; border-radius:4px; box-sizing:border-box; } .payNew .infoCount .sameChk input { position:absolute; z-index:-1; top:0; left:-1px; width:0; height:0; border:0; opacity:0; } .payNew .infoCount .sameChk input:checked + span:before { background:url('/mobile/asset/images/mark_check.svg') center center no-repeat; background-color:#142136; border:0; } .payNew .infoCount .sameNote { margin:-2px 0 0 27px; font-size:12px; display:block; } .payNew .infoCount .sameNote:before { content:'*'; margin:0 3px 0 0; vertical-align:middle; display:inline-block; } .payNew .rptPay { background:#fff; border:solid 1px #9aa1a5; border-radius:min(2.3vw,15px); margin-top:8px; overflow:hidden; } .payNew .rptPay > h3 { padding:15px 4.17vw 14px 4.17vw; font-size:min(3.89vw,17px); font-weight:400; color:#000; line-height:1.3; } .payNew .rptPay .intro { position:relative; border-bottom:solid 1px #f4f4f6; padding:4.5vw 100px 4.2vw 4.17vw; font-size:min(3.89vw,18px); font-weight:700; color:#000; letter-spacing:-0.28px; display:flex; align-items:center; flex-wrap:wrap; box-sizing:border-box; } .payNew .rptPay .intro dt, .payNew .rptPay .intro dd { display:inline-block; } .payNew .rptPay .intro dt { margin-right:6px; } .payNew .rptPay .intro dd:after { content:')'; } .payNew .rptPay .intro dd:before { content:'('; } .payNew .rptPay .intro .sum { position:absolute; top:50%; right:4.17vw; font-size:min(5vw,21px); margin-top:-1px; color:#000; font-weight:600; letter-spacing:-0.36px; transform:translateY(-50%); } .payNew .rptPay .intro .sum:after, .payNew .rptPay .intro .sum:before { display:none; } .payNew .rptPay .intro .state { display:none !important; } .payNew .rptPay .intro .points { height:auto !important; padding-right:0 !important; font-weight:400; color:#808080; } .payNew .rptPay .btnBox { border-top:solid 1px #e5e6e7; margin-top:6px; padding:15px 2.78vw; display:flex; justify-content:space-between; } .payNew .rptPay .btnBox button { width:100%; height:45px; background:#c3c3c3; border:0; border-radius:8px; margin:0 5px; padding:0 4.17vw; font-size:16px; font-weight:600; color:#fff; line-height:45px; letter-spacing:-0.32px; text-align:center; } .payNew .rptPay .btnBox button i { font-size:14px; letter-spacing:-0.28px; } .payNew .rptPay .btnBox button:last-child { background:#142136; display:flex; justify-content:space-between; align-items:center; } .payNew .rptPay .btnBox button:first-child { width:21.8%; max-width:150px; flex-shrink:0; } .payNew .rptPay .partBox { margin-top:0; } .payNew .rptPay .pickWay { padding-bottom:14px; } .payNew .rptPay .pickWay li:last-child { border-bottom:solid 1px #f4f4f6; } .payNew .rptPay:last-child { margin-bottom:-75px; } .payNew .rptPay.off, .payNew .rptPay.end { border:0; padding-bottom:3px; } .payNew .rptPay.off h3, .payNew .rptPay.end h3, .payNew .rptPay.off .intro, .payNew .rptPay.end .intro { padding-left:4.3vw; } .payNew .rptPay.off .intro .sum, .payNew .rptPay.end .intro .sum { right:4.3vw; } .payNew .rptPay.off { background:#e6e9ec; } .payNew .rptPay.off h3, .payNew .rptPay.off .intro, .payNew .rptPay.off .intro .sum { color:#bebfc2; } .payNew .rptPay.off .btnBox, .payNew .rptPay.off .partBox, .payNew .rptPay.off .intro .state, .payNew .rptPay.off .intro .points { display:none !important; } .payNew .rptPay.end { background:#fff; } .payNew .rptPay.end h3, .payNew .rptPay.end .intro, .payNew .rptPay.end .intro .sum { color:#c2c2c2; } .payNew .rptPay.end .btnBox, .payNew .rptPay.end .partBox, .payNew .rptPay.end .intro .points { display:none !important; } .payNew .rptPay.end .intro .state { display:inline-block !important; } /* 결제 :추가정보 */ .payNew .infoVital { height:20px; margin-top:-20px; font-size:12px; font-weight:400; color:#d8321c; line-height:20px; text-align:right; display:block; } .payNew .infoVital span { width:6px; height:6px; background:#d8321c; border-radius:10px; margin:-3px 3px 0 0; font-size:0; line-height:0; text-indent:-9999px; vertical-align:middle; display:inline-block; overflow:hidden; } .payNew .infoExtra { padding-bottom:15px; display:none; } .payNew .infoExtra .notify { padding-top:9px; } .payNew .infoExtra .reqNote { margin-top:4px; font-size:12px; color:#d8321c; text-align:right; } .payNew .infoExtra.active { display:block; } .payNew .infoExtra .visitor { display:flex; } .payNew .infoExtra .visitor input { width:75%; } .payNew .infoExtra .visitor select { width:25%; min-width:105px; margin-right:6px; flex-shrink:0; } .payNew .infoExtra .visitor select + select { width:21%; min-width:63px; max-width:120px; padding-right:27px; } .payNew .infoExtra .visitor + .visitor { margin-top:10px; } .payNew .infoExtra .number { position:relative; z-index:5; width:82px; height:27px; background:#fff; border:solid 1px #dddfe1; border-radius:5px; text-align:center; display:block; overflow:hidden; box-sizing:border-box; } .payNew .infoExtra .number input { width:30px; height:22px; background:transparent; border:0; padding-bottom:3px; font-size:14px; color:#000; letter-spacing:-0.28px; text-align:center; } .payNew .infoExtra .number button { position:absolute; z-index:2; top:0; width:28px; height:25px; background:transparent; font-size:0; line-height:0; text-indent:-9999px; overflow:hidden; } .payNew .infoExtra .number button:after, .payNew .infoExtra .number button:before { content:''; position:absolute; background:#000; display:block; } .payNew .infoExtra .number button:after { top:6px; left:13px; width:2px; height:12px; } .payNew .infoExtra .number button:before { top:11px; left:8px; width:12px; height:2px; } .payNew .infoExtra .number .up { right:0; } .payNew .infoExtra .number .down { left:0; } .payNew .infoExtra .number .down:after { display:none; } .payNew .infoExtra .number .done:after, .payNew .infoExtra .number .done:before { background:#ccc; } .payNew .infoExtra .withInfo { height:27px; margin-top:10px; color:#595b5f; display:flex; align-items:center; justify-content:space-between; } .payNew .infoExtra .carList li { height:37px; border-bottom:solid 1px #f4f4f6; margin-top:5px; font-size:14px; color:#595b5f; display:flex; align-items:center; } .payNew .infoExtra .carList li b { margin-left:auto; font-weight:400; color:#000; } .payNew .infoExtra .carList li button { width:18px; height:18px; background:url('/mobile/asset/images/btn_delete_02.svg') center center no-repeat; background-color:#cfcfcf; border-radius:25px; margin-left:5px; font-size:0; line-height:0; text-indent:-9999px; vertical-align:middle; display:inline-block; overflow:hidden; } .payNew .infoExtra .carNum { color:#595b5f; display:flex; align-items:center; justify-content:space-between; } .payNew .infoExtra .carNum input { width:calc(100% - 98px); margin-left:3px; } .payNew .infoExtra .carNum select { min-width:75px; flex-shrink:0; } .payNew .infoExtra .carNum + .carNum { margin-top:10px; } .payNew .infoExtra .pickInfo { color:#595b5f; display:flex; align-items:center; justify-content:space-between; } .payNew .infoExtra .pickInfo select { width:calc(100% - 93px); } .payNew .infoExtra .btnAdd { position:relative; min-width:74px; height:26px; background:#fff; border:solid 1px #e3e5e8; border-radius:5px; margin:15px auto 0 auto; padding:0 7px 0 20px; font-size:13px; color:#595b5f; text-align:left; display:block; box-sizing:border-box; } .payNew .infoExtra .btnAdd:after, .payNew .infoExtra .btnAdd:before { content:''; position:absolute; background:#6d6f73; opacity:.6; } .payNew .infoExtra .btnAdd:after { top:8px; left:10px; width:2px; height:8px; } .payNew .infoExtra .btnAdd:before { top:11px; left:7px; width:8px; height:2px; } .payNew .points { position:relative; height:37px; padding-right:75px; font-size:14px; color:#595b5f; display:flex; align-items:center; } .payNew .points a { position:absolute; top:0; right:0; width:66px; height:37px; background:#838c9c; border-radius:5px; font-size:14px; font-weight:400; color:#fff; line-height:37px; text-align:center; display:block; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0); } .payNew .points.using { font-weight:500; color:#000; } .payNew .bayCoinPin { color:#595b5f; display:flex; align-items:center; justify-content:space-between; } .payNew .bayCoinPin input { width:calc(100% - 98px); } .payNew .concInfo { margin-bottom:-5px; } .payNew .concInfo dt { height:37px; margin:10px 0 -37px 0; font-size:13px; color:#595b5f; line-height:37px; } .payNew .concInfo dt:first-child { margin-top:0; } .payNew .concInfo dd { padding-left:93px; } .payNew .concInfo dd select { width:100%; } .payNew .concInfo dt.note { margin:0; } .payNew .concInfo dd.note { padding-left:0; } .payNew .concInfo dd.note textarea { width:100%; min-width:100%; max-width:100%; height:70px; min-height:70px; border:solid 1px #e7e7e7; border-radius:5px; margin:0; padding:8px; font-size:14px; color:#000; line-height:16px; letter-spacing:-0.26px; word-break:keep-all; box-sizing:border-box; } .payNew .concInfo dd.note textarea::placeholder { font-size:13px; color:#bdbdbd; word-break:keep-all; } .payNew .delvyInfo { margin-top:-3px; padding-bottom:min(4vw,23px); font-size:min(3.89vw,16px); color:#000; letter-spacing:-0.28px; line-height:min(5.36vw,21px); display:block; } .payNew .delvyInfo span { display:inline-block; } .payNew .delvyInfo.nodata { color:#595b5f; } .payNew .btnDelvy { position:absolute; top:12px; right:15px; height:26px; background:#fff; border:solid 1px #e3e5e8; border-radius:5px; padding:0 8px; font-size:13px; color:#595b5f; line-height:24px; display:block; box-sizing:border-box; } .payNew .accom { color:#595b5f; display:flex; justify-content:space-between; align-items:center; } .payNew .accom input { width:calc(100% - 50.265vw - 59px); min-width:45px; padding-right:8px; text-align:right; } .payNew .accom select { width:calc(100% - 130px); } .payNew .accom + .accom { margin-top:10px; } .payNew .ecubeJoin { margin-top:5px; padding-bottom:15px; } .payNew .ecubeJoin dt { height:37px; margin:10px 0 -37px 0; font-size:13px; color:#595b5f; letter-spacing:-0.26px; line-height:37px; } .payNew .ecubeJoin dd { height:37px; padding-left:98px; display:flex; align-items:center; } .payNew .ecubeJoin select, .payNew .ecubeJoin input[type='text'] { width:100%; } .payNew .ecubeJoin input[type='number'] { width:35%; padding-left:0; text-align:center; } .payNew .ecubeJoin label { position:relative; margin-left:9px; display:inline-block; overflow:hidden; } .payNew .ecubeJoin label span { height:17px; padding-left:25px; font-size:14px; color:#000; line-height:17px; letter-spacing:-0.28px; display:block; } .payNew .ecubeJoin label span:before { content:''; position:absolute; top:0; left:0; width:17px; height:17px; background:#fff; border:solid 1.4px #cbccce; border-radius:20px; box-sizing:border-box; } .payNew .ecubeJoin label input { position:absolute; top:0; left:-1px; width:0; height:0; line-height:0; opacity:0; } .payNew .ecubeJoin label input:checked + span:before { border:solid 4px #142136; } .payNew .ecubeJoin label + label { margin-left:40px; } .payNew .ecubeJoin .req select, .payNew .ecubeJoin .req input[type='text'], .payNew .ecubeJoin .req input[type='number'] { border-color:#d8321c; } .payNew .ecubeJoin .reqNote { height:auto; margin:4px 0 -2px 0; font-size:12px; color:#d8321c; letter-spacing:-0.24px; text-align:right; display:block; } .payNew .ecubeJoin .reqNote:last-child { margin-bottom:-5px; } .payNew .ecubeJoin .contact { justify-content:space-between; } .payNew .ecubeJoin .contact select { width:30%; flex-shrink:0; } .payNew .ecubeJoin .contact select + input[type='number'] { margin:0 6px; } .payNew .chkSame + .ecubeJoin { border-top:solid 1px #f4f4f6; } .payNew .ecubeChk { position:relative; height:37px; margin-bottom:15px; padding-right:75px; font-size:14px; color:#595b5f; line-height:37px; } .payNew .ecubeChk a { position:absolute; top:0; right:0; width:66px; height:37px; background:#838c9c; border-radius:5px; font-size:14px; font-weight:400; color:#fff; line-height:37px; text-align:center; display:block; box-sizing:border-box; } .payNew .ecubeChk.using { font-weight:500; color:#000; } .payNew .chkProtector { position:relative; padding-left:27px; display:inline-block; overflow:hidden; } .payNew .chkProtector h4 { position:unset; } .payNew .chkProtector h4:before { content:''; position:absolute; z-index:2; top:50%; left:0; width:18px; height:18px; background:#fff; border:solid 1.4px #cbccce; border-radius:4px; margin-top:-9px; margin-left:0; display:block; box-sizing:border-box; } .payNew .chkProtector input { position:absolute; z-index:-1; top:0; left:-1px; width:0; height:0; border:0; opacity:0; } .payNew .chkProtector input:checked + h4:before { background:url('/mobile/asset/images/mark_check.svg') center center no-repeat; background-color:#142136; border:0; } .payNew .chkProtectorNote { position:relative; margin:-6px 0 15px 0; padding-left:18px; font-size:12px; color:#808080; line-height:14.5px; letter-spacing:-0.24px; word-break:keep-all; display:block; } .payNew .chkProtectorNote:before { content:''; position:absolute; top:5px; left:7px; width:3px; height:3px; background:#808080; border-radius:5px; display:block; } .payNew .chkProtectorNote span { display:inline-block; } .payNew .onlyNote { width:100%; min-width:100%; max-width:100%; height:80px; min-height:80px; border:solid 1px #e7e7e7; border-radius:5px; margin:0 0 -5px 0; padding:8px; font-size:14px; color:#000; line-height:16px; letter-spacing:-0.26px; word-break:keep-all; box-sizing:border-box; } .payNew .onlyNote::placeholder { font-size:13px; color:#bdbdbd; word-break:keep-all; } /* 결제 완료 */ .payFinish { background:#f3f7f9; padding:15px 5.56vw 35px 5.56vw; font-family:'Pretendard'; font-weight:400; box-sizing:border-box; } .payFinish .intro { padding:9.74vw 30px; font-size:min(6.67vw,35px); font-weight:700; color:#000; line-height:min(7.5vw,34px); letter-spacing:-0.48px; text-align:center; } .payFinish .intro i { margin:0 auto; padding-top:min(3.4vw,20px); font-size:min(3.89vw,15px); font-weight:400; color:#595b5f; line-height:normal; letter-spacing:-0.28px; display:block; } .payFinish .intro i > span { display:block; } .payFinish .infoBox { background:#fff; border-radius:min(2.3vw,15px); padding:4.17vw; overflow:hidden; } .payFinish .infoBox a { height:15px; background:#faf5ff; border:solid 1px #7a2ecd; border-radius:20px; margin:-3px 0 0 5px; padding:0 3px 0 7px; font-size:10px; color:#7a2ecd; line-height:15px; vertical-align:middle; display:inline-block; } .payFinish .infoBox a:after { content:''; width:10px; height:10px; background:url('/mobile/asset/images/mark_more_02.svg') center center no-repeat; margin-top:-1px; vertical-align:middle; display:inline-block; } .payFinish .infoBox dt, .payFinish .infoBox dd { font-size:min(3.89vw,17px); color:#000; letter-spacing:-0.28px; } .payFinish .infoBox dt { height:20px; margin-top:min(3.34vw,20px); margin-bottom:-20px; } .payFinish .infoBox dt:first-child { margin-top:0; } .payFinish .infoBox dd { min-height:20px; padding-left:75px; font-weight:500; text-align:right; word-break:keep-all; } .payFinish .infoBox dt.total { border-top:solid 1px #eaeaea; margin-top:min(3.62vw,25px); padding-top:min(3.9vw,25px); font-weight:500; } .payFinish .infoBox dd.total { font-size:min(4.45vw,21px); font-weight:600; letter-spacing:-0.32px; } .payFinish .infoBox dd.detail { position:relative; margin-top:11px; padding-left:20px; font-size:13px; font-weight:400; color:#595b5f; display:flex; justify-content:space-between; } .payFinish .infoBox dd.detail:before { content:''; position:absolute; top:7px; left:11px; width:3px; height:3px; background:#595b5f; border-radius:5px; display:block; opacity:.7; } .payFinish .infoBox dd.detail + .detail { margin-top:2px; } .payFinish .infoAmass { background:#faf5ff; border:solid 1px #c7aee3; border-radius:min(2.3vw,15px); margin-top:10px; padding:4.17vw; font-size:min(3.89vw,17px); letter-spacing:-0.28px; } .payFinish .infoAmass dl { padding-top:min(1.67vw,10px); } .payFinish .infoAmass dt { height:20px; margin-top:min(1.95vw,15px); margin-bottom:-20px; color:#000; } .payFinish .infoAmass dd { min-height:20px; font-weight:500; color:#7a2ecd; text-align:right; } .payFinish .infoAmass .tit { height:22px; font-weight:700; color:#7a2ecd; line-height:22px; display:block; } .payFinish .infoAmass .tit a { width:14px; height:14px; background:url('/mobile/asset/images/mark_note_01.svg') center center no-repeat; border:solid 1.6px #7a2ecd; border-radius:20px; margin:-3px 0 0 3px; font-size:0; line-height:0; text-indent:-9999px; vertical-align:middle; display:inline-block; overflow:hidden; box-sizing:border-box; } .payFinish .infoAmass .notify { position:relative; margin-top:min(3.34vw,25px); padding-left:15px; font-size:min(3.34vw,14px); color:#808080; line-height:min(3.9vw,17px); letter-spacing:-0.24px; word-break:keep-all; } .payFinish .infoAmass .notify:before { content:''; position:absolute; top:5px; left:7px; width:2px; height:2px; background:#808080; border-radius:5px; display:block; overflow:hidden; } .payFinish .infoAmass .notify span { display:inline-block; } .payFinish .infoAmass .btnBox { border-top:solid 1px #ece5f2; margin-top:15px; padding-top:15px; text-align:center; } .payFinish .infoAmass .btnBox a { height:37px; background:#fff; border:solid 1px #7a2ecd; border-radius:40px; margin:0 3px; padding:0 15px; font-size:14px; font-weight:700; color:#7a2ecd; line-height:35px; letter-spacing:-0.28px; display:inline-block; box-sizing:border-box; } .payFinish .infoAmass .btnBox a:last-child { background:#7a2ecd; color:#fff; } .payFinishLink { position:fixed; z-index:51; left:0; right:0; bottom:0; width:100%; background:#fff; padding:10px 4.17vw; font-family:'Pretendard'; font-weight:400; text-align:center; display:flex; box-sizing:border-box; } .payFinishLink a, .payFinishLink button { width:100%; height:50px; background:#595b5f; border-radius:10px; margin:0 5px; font-size:16px; font-weight:600; color:#fff; line-height:50px; display:block; box-sizing:border-box; } .payFinishLink a:last-child, .payFinishLink button:last-child { background:#142136; } .orderRecom { padding:56px 0 105px 0; font-family:'Pretendard'; font-weight:400; } .orderRecom .tit { margin-left:5.56vw; font-size:18px; font-weight:700; color:#142136; line-height:24px; letter-spacing:-0.36px; display:block; } .orderRecom .recomList { height:170px; padding-top:20px; padding-left:calc(5.56vw - 15px); padding-right:5.56vw; font-size:0; line-height:0; white-space:nowrap; overflow-x:auto; overflow-y:hidden; scrollbar-track-color:transparent; -webkit-overflow-scrolling:touch; } .orderRecom .recomList::-webkit-scrollbar { height:0; -webkit-appearance:none; } .orderRecom .recomList li { position:relative; width:125px; height:155px; background:#fff; border-radius:15px; margin-left:15px; display:inline-block; box-shadow:3px 3px 15px 0px rgba(0, 0, 0, 0.08); } .orderRecom .recomList li a { height:100%; padding:15px 15px 0 15px; font-weight:500; color:#000; line-height:normal; text-align:center; display:block; box-sizing:border-box; } .orderRecom .recomList .pic { width:100%; height:65px; border-radius:10px; line-height:0; display:block; overflow:hidden; } .orderRecom .recomList .pic img { width:100%; } .orderRecom .recomList .txt { margin:15px 0 5px 0; font-size:16px; letter-spacing:-0.32px; display:block; } .orderRecom .recomList .charge { font-size:13px; letter-spacing:-0.26px; } /* popup */ .popupNew { top:unset !important; left:0 !important; right:0 !important; bottom:0 !important; background:#fff; border-radius:10px 10px 0 0 !important; margin:0 !important; font-family:'Pretendard'; font-weight:400; } .popupNew .tit { padding:23px 20px 20px 20px; font-size:17px; font-weight:600; color:#000; line-height:21px; letter-spacing:-0.34px; display:block; } .popupNew .cont { min-height:85px; padding:0 20px 20px 20px; font-size:14px; color:#595b5f; line-height:21px; letter-spacing:-0.28px; word-break:keep-all; box-sizing:border-box; } .popupNew .cont > span { display:inline-block; } .popupNew .cont.scrollBox { max-height:calc(100vh - 224px); margin-bottom:20px; padding-bottom:0; overflow:auto; } .popupNew .infoList { padding:0 20px 20px 20px; } .popupNew .infoList li { position:relative; margin-top:9px; padding:0 10px 0 20px; font-size:14px; color:#595b5f; letter-spacing:-0.28px; line-height:21px; word-break:keep-all; } .popupNew .infoList li:before { content:''; position:absolute; top:7px; left:9px; width:3px; height:3px; background:#595b5f; border-radius:5px; display:block; overflow:hidden; } .popupNew .infoList li:first-child { margin-top:0; } .popupNew .btnBox { padding:10px 15px; display:flex; } .popupNew .btnBox a, .popupNew .btnBox button { width:100%; background:#c3c3c3; color:#fff; border:0; border-radius:10px; height:45px; margin:0 5px; font-family:'Pretendard'; font-size:16px; font-weight:600; line-height:45px; } .popupNew .btnBox a:last-child, .popupNew .btnBox button:last-child { background:#142136 !important; } .popupNew .btnBox a:first-child, .popupNew .btnBox button:first-child { background:#c3c3c3 !important; color:#fff !important; } .popupNew.posAbs { position:fixed !important; } #popupBenefit .listInfo { padding:0 10px 0 9px; } #popupBenefit .listInfo li { position:relative; padding-left:10px; margin-top:5px; line-height:18px; } #popupBenefit .listInfo li:before { content:''; position:absolute; top:7px; left:0; width:3px; height:3px; background:#595b5f; border-radius:5px; display:block; } #popupBenefit .listInfo b { font-weight:500; } #popupDisctDet .total { height:40px; margin-top:-41px; padding-right:20px; font-size:17px; font-weight:600; color:#d8321c; line-height:21px; text-align:right; display:block; } #popupDisctDet .detail { padding:0 20px 20px 20px; } #popupDisctDet .detail dt { border-top:solid 1px #f4f4f6; margin-top:9px; padding-top:10px; font-size:14px; color:#595b5f; letter-spacing:-0.28px; } #popupDisctDet .detail dt:first-child { border-top:0; margin-top:0; padding-top:0; } #popupDisctDet .detail dd { position:relative; margin-top:4px; padding-left:20px; font-size:13px; color:#808080; letter-spacing:-0.26px; display:flex; justify-content:space-between; align-items:flex-start; } #popupDisctDet .detail dd:before { content:''; position:absolute; top:8px; left:8px; width:3px; height:3px; background:#808080; border-radius:5px; display:block; overflow:hidden; } #popupDisctDet .detail dd i { color:#D8321C; } #popupCouponNew label { position:relative; overflow:hidden; } #popupCouponNew label span:before { content:''; position:absolute; z-index:2; width:18px; height:18px; background:#fff; border:solid 1.4px #cbccce; border-radius:4px; box-sizing:border-box; } #popupCouponNew label input { position:absolute; z-index:-1; top:0; left:-1px; width:0; height:0; border:0; opacity:0; } #popupCouponNew label input:checked + span:before { background:url('/mobile/asset/images/mark_check.svg') center center no-repeat; background-color:#142136; border:0; } #popupCouponNew .listBox { max-height:calc(100vh - 175px); padding-bottom:20px; overflow-x:hidden; overflow-y:auto; box-sizing:border-box; -webkit-overflow-scrolling:touch; scrollbar-track-color:transparent; scrollbar-face-color:#c6c6c6; } #popupCouponNew .btnBox a:first-child { width:45%; } #popupCouponNew .btnBox button > span { font-weight:400; } #popupCouponNew .pickList { border:0; margin-top:21px; padding:0 20px; } #popupCouponNew .pickList label { margin-top:8px; display:block; } #popupCouponNew .pickList label span { border:solid 1px #ecedef; border-radius:5px; padding:14px 10px 13px 42px; font-size:14px; color:#7f7f7f; letter-spacing:-0.28px; display:block; box-sizing:border-box; } #popupCouponNew .pickList label span:before { top:15px; left:15px; } #popupCouponNew .pickList label input:checked + span { border:solid 2px #142136; padding:13px 9px 12px 41px; color:#000; } #popupCouponNew .pickList legend { padding-bottom:1px; font-size:14px; color:#000; letter-spacing:-0.28px; display:block; } #popupCouponNew .pickList:first-child { margin-top:0; } #popupCouponNew .pickAuto { position:absolute; z-index:2; top:24px; right:20px; } #popupCouponNew .pickAuto span { height:18px; padding-right:25px; font-size:12px; color:#595b5f; line-height:18px; display:block; } #popupCouponNew .pickAuto span:before { top:0; right:0; } #popupAffiPoint { max-height:calc(100vh - 25px); padding-bottom:65px; overflow-y:auto; box-sizing:border-box; } #popupAffiPoint select, #popupAffiPoint input[type='text'], #popupAffiPoint input[type='number'], #popupAffiPoint input[type='password'] { height:37px; width:100%; border:solid 1px #e7e7e7; border-radius:5px; padding-left:7px; font-size:14px; color:#000; letter-spacing:-0.28px; vertical-align:top; box-sizing:border-box; } #popupAffiPoint input[type='text']:focus, #popupAffiPoint input[type='number']:focus, #popupAffiPoint input[type='password']:focus { border-color:#142136; } #popupAffiPoint input[type='text']::placeholder, #popupAffiPoint input[type='number']::placeholder, #popupAffiPoint input[type='password']::placeholder { color:#bdbdbd; } #popupAffiPoint .write { padding:0 20px; } #popupAffiPoint .write dt { height:37px; margin:10px 0 -37px 0; font-size:13px; color:#595b5f; line-height:37px; } #popupAffiPoint .write dt:first-child { margin-top:0; } #popupAffiPoint .write dd { height:37px; padding-left:90px; } #popupAffiPoint .agree { position:relative; margin:25px 0 0 20px; display:inline-block; overflow:hidden; } #popupAffiPoint .agree span { height:18px; padding-left:25px; font-size:14px; font-weight:400; color:#595b5f; line-height:18px; letter-spacing:-0.28px; display:block; } #popupAffiPoint .agree span:before { content:''; position:absolute; z-index:2; top:0; left:0; width:18px; height:18px; background:#fff; border:solid 1.4px #cbccce; border-radius:4px; box-sizing:border-box; } #popupAffiPoint .agree input { position:absolute; z-index:-1; top:0; left:-1px; width:0; height:0; border:0; opacity:0; } #popupAffiPoint .agree input:checked + span:before { background:url('/mobile/asset/images/mark_check.svg') center center no-repeat; background-color:#142136; border:0; } #popupAffiPoint .policy { position:relative; padding:0 25px 9px 30px; font-size:13px; font-weight:400; color:#616161; line-height:16px; word-break:keep-all; } #popupAffiPoint .policy li { position:relative; margin-top:2px; padding-left:20px; } #popupAffiPoint .policy li:before { content:''; position:absolute; top:6px; left:8px; width:3px; height:3px; background:#616161; border-radius:5px; display:block; } #popupAffiPoint .policy li:last-child { font-weight:700; } #popupAffiPoint .policy ul { padding-top:10px; } #popupAffiPoint .policy small { margin:10px 0 4px 0; font-size:13px; display:block; } #popupAffiPoint .policy summary { position:absolute; top:-23px; right:20px; width:18px; height:18px; background:url('/mobile/asset/images/mark_extend_open.svg') center center no-repeat; font-size:0; line-height:0; text-indent:-9999px; display:block; list-style-type:none; } #popupAffiPoint .policy[open] summary { background-image:url('/mobile/asset/images/mark_extend_close.svg'); } #popupAffiPoint .search { border-top:solid 1px #f4f4f6; margin:0 20px; padding-top:15px; text-align:center; display:flex; justify-content:center; flex-wrap:wrap; } #popupAffiPoint .search button { width:80px; height:37px; background:#838c9c; border:solid 1px #838c9c; border-radius:5px; margin:0 5px; font-size:14px; color:#fff; line-height:35px; text-align:center; box-sizing:border-box; } #popupAffiPoint .search button:last-child { background:#fff; border-color:#e3e5e8; color:#595b5f; } #popupAffiPoint .search .notice { width:100%; padding-bottom:10px; font-size:13px; color:#d8321c; line-height:normal; letter-spacing:-0.26px; text-align:center; } #popupAffiPoint .search .notice span { display:block; } #popupAffiPoint .myPoint { background:#f4f5f8; border:solid 1px #e0e3e8; border-radius:8px; margin:20px; padding:6px 15px; font-size:13px; color:#595b5f; letter-spacing:-0.26px; } #popupAffiPoint .myPoint dt, #popupAffiPoint .myPoint dd { height:34px; line-height:34px; } #popupAffiPoint .myPoint dt { border-top:solid 1px #e8e9ee; margin-bottom:-34px; } #popupAffiPoint .myPoint dt:first-child { border-top:0; } #popupAffiPoint .myPoint dd { text-align:right; } #popupAffiPoint .myPoint dd:last-child { color:#d8321c; } #popupAffiPoint .btnBox { position:fixed; z-index:10; left:0; right:0; bottom:0; background:#fff !important; } #popupAffiPoint .btnBox a:first-child { width:45%; } #popupMyDelvy .delvySearch dt, #popupRegDelvy .delvySearch dt { height:37px; font-size:13px; color:#595b5f; letter-spacing:-0.26px; line-height:37px; } #popupMyDelvy .delvySearch dd, #popupRegDelvy .delvySearch dd { margin-bottom:10px; display:flex; justify-content:space-between; } #popupMyDelvy .delvySearch dt.post + dd, #popupRegDelvy .delvySearch dt.post + dd, #popupMyDelvy .delvySearch dt.name + dd, #popupRegDelvy .delvySearch dt.name + dd, #popupMyDelvy .delvySearch dt.phone + dd, #popupRegDelvy .delvySearch dt.phone + dd { margin-top:-37px; padding-left:125px; } #popupMyDelvy .delvySearch dt.memo, #popupRegDelvy .delvySearch dt.memo { height:auto; padding-bottom:4px; line-height:17px; } #popupMyDelvy .delvySearch select, #popupRegDelvy .delvySearch select, #popupMyDelvy .delvySearch input[type='text'], #popupRegDelvy .delvySearch input[type='text'], #popupMyDelvy .delvySearch input[type='number'], #popupRegDelvy .delvySearch input[type='number'] { height:37px; border:solid 1px #e7e7e7; border-radius:5px; padding-left:7px; font-family:'Pretendard'; font-size:14px; color:#000; letter-spacing:-0.28px; vertical-align:top; box-sizing:border-box; } #popupMyDelvy .delvySearch input[type='text'], #popupRegDelvy .delvySearch input[type='text'], #popupMyDelvy .delvySearch input[type='number'], #popupRegDelvy .delvySearch input[type='number'] { width:100%; } #popupMyDelvy .delvySearch select, #popupRegDelvy .delvySearch select { background:url('/mobile/asset/images/mark_select.svg') calc(100% - 10px) center no-repeat; appearance:none; -webkit-appearance:none; } #popupMyDelvy .delvySearch select:disabled, #popupRegDelvy .delvySearch select:disabled { background-color:#f4f4f4; color:#b7b7b7; opacity:1; opacity:1; } #popupMyDelvy .delvySearch select:focus, #popupRegDelvy .delvySearch select:focus, #popupMyDelvy .delvySearch input[type='text']:focus, #popupRegDelvy .delvySearch input[type='text']:focus, #popupMyDelvy .delvySearch input[type='number']:focus, #popupRegDelvy .delvySearch input[type='number']:focus, #popupMyDelvy .delvySearch input[type='password']:focus, #popupRegDelvy .delvySearch input[type='password']:focus { border-color:#142136; } #popupMyDelvy .delvySearch input[type='text']::placeholder, #popupRegDelvy .delvySearch input[type='text']::placeholder, #popupMyDelvy .delvySearch input[type='number']::placeholder, #popupRegDelvy .delvySearch input[type='number']::placeholder, #popupMyDelvy .delvySearch input[type='password']::placeholder, #popupRegDelvy .delvySearch input[type='password']::placeholder { color:#bdbdbd; } #popupMyDelvy .delvySearch .post + dd button, #popupRegDelvy .delvySearch .post + dd button { width:25%; min-width:66px; height:37px; background:#838c9c; border:0; border-radius:5px; margin-left:10px; font-family:'Pretendard'; font-size:14px; color:#fff; text-align:center; flex-shrink:0; } #popupMyDelvy .delvySearch .phone + dd select, #popupRegDelvy .delvySearch .phone + dd select { width:30%; flex-shrink:0; } #popupMyDelvy .delvySearch .phone + dd input[type='number'], #popupRegDelvy .delvySearch .phone + dd input[type='number'] { width:35%; padding-left:0; text-align:center; } #popupMyDelvy .delvySearch .phone + dd select + input[type='number'], #popupRegDelvy .delvySearch .phone + dd select + input[type='number'] { margin:0 6px; } #popupMyDelvy .delvySearch .req select, #popupRegDelvy .delvySearch .req select, #popupMyDelvy .delvySearch .req input[type='text'], #popupRegDelvy .delvySearch .req input[type='text'], #popupMyDelvy .delvySearch .req input[type='number'], #popupRegDelvy .delvySearch .req input[type='number'] { border-color:#d8321c; } #popupMyDelvy .delvySearch .reqNote, #popupRegDelvy .delvySearch .reqNote { margin:-7px 0 7px 0; font-size:12px; color:#d8321c; letter-spacing:-0.24px; text-align:right; display:block; } #popupMyDelvy .delvySearch .reqNote:last-child, #popupRegDelvy .delvySearch .reqNote:last-child { margin-bottom:-5px; } #popupMyDelvy .cont { max-height:calc(100vh - 320px); } #popupMyDelvy .intro { margin-bottom:20px; padding:0 20px; font-size:14px; color:#595b5f; line-height:21px; letter-spacing:-0.28px; word-break:keep-all; } #popupMyDelvy .btnAdd { margin-bottom:10px; text-align:right; } #popupMyDelvy .btnAdd button { position:relative; min-width:74px; height:26px; background:#fff; border:solid 1px #e3e5e8; border-radius:5px; padding:0 7px 0 20px; font-family:'Pretendard'; font-size:13px; color:#595b5f; text-align:left; display:inline-block; box-sizing:border-box; } #popupMyDelvy .btnAdd button:after, #popupMyDelvy .btnAdd button:before { content:''; position:absolute; background:#6d6f73; opacity:.6; } #popupMyDelvy .btnAdd button:after { top:8px; left:10px; width:2px; height:8px; } #popupMyDelvy .btnAdd button:before { top:11px; left:7px; width:8px; height:2px; } #popupMyDelvy .btnBox a:first-child { width:45%; } #popupMyDelvy .delvyList li { position:relative; border-bottom:solid 1px #f4f4f6; padding:10px 50px 9px 0; word-break:keep-all; overflow:hidden; } #popupMyDelvy .delvyList label { display:inline-block; overflow:hidden; } #popupMyDelvy .delvyList label span { font-size:14px; color:#595b5f; line-height:19.6px; letter-spacing:-0.28px; } #popupMyDelvy .delvyList label span:after { content:''; position:absolute; z-index:2; top:50%; right:0; width:18px; height:18px; background:#fff; border:solid 1.4px #cbccce; border-radius:4px; margin-top:-9px; box-sizing:border-box; } #popupMyDelvy .delvyList label input { position:absolute; z-index:-1; top:0; left:-1px; width:0; height:0; border:0; opacity:0; } #popupMyDelvy .delvyList label input:checked + span { color:#000; } #popupMyDelvy .delvyList label input:checked + span:after { background:url('/mobile/asset/images/mark_check.svg') center center no-repeat; background-color:#142136; border:0; } #popupMyDelvy .delvyList .btnDel { background:transparent; margin-top:-4px; font-size:14px; font-weight:500; color:#d8321c; letter-spacing:-0.28px; text-decoration:underline; display:block; } #popupMyDelvy .delvySearch { border-bottom:solid 1px #e9e9e9; margin-bottom:10px; padding-bottom:5px; } #popupMyDelvy .delvySearch .btn { margin-bottom:20px; text-align:right; } #popupMyDelvy .delvySearch .btn button { height:26px; background:#fff; border:solid 1px #e3e5e8; border-radius:5px; padding:0 8px; font-family:'Pretendard'; font-size:13px; color:#595b5f; } #popupMyDelvy .delvySearch .btn button + button { background:#838c9c; border-color:#838c9c; margin-left:4px; color:#fff; } #popupRegDelvy .intro { margin-bottom:20px; padding:0 20px; font-size:14px; color:#595b5f; line-height:21px; letter-spacing:-0.28px; word-break:keep-all; } #popupRegDelvy .btnAdd button:before { top:11px; left:7px; width:8px; height:2px; } #popupRegDelvy .btnBox a:first-child { width:45%; } #popupRegDelvy .delvySearch { padding:0 20px 10px 20px; } #popupEcube .intro { padding:0 20px; font-size:14px; color:#595b5f; line-height:21px; letter-spacing:-0.28px; } #popupEcube .intro a { height:26px; background:#838c9c; border-radius:5px; margin-top:8px; padding:0 9px; font-size:13px; color:#fff; line-height:26px; display:inline-block; overflow:hidden; box-sizing:border-box; } #popupEcube .wirte { padding:14px 20px 10px 20px; } #popupEcube .wirte dt, #popupEcube .wirte dd { height:37px; } #popupEcube .wirte dt { font-size:13px; line-height:37px; } #popupEcube .wirte dd { margin:-37px 0 10px 0; padding-left:90px; } #popupEcube .wirte dd input { width:100%; height:37px; border:solid 1px #e7e7e7; border-radius:5px; padding:0 0 0 7px; font-family:'Pretendard'; font-size:14px; color:#000; letter-spacing:-0.28px; box-sizing:border-box; } #popupEcube .wirte dd input:focus { border-color:#142136; } #popupEcube .wirte dd input::placeholder { color:#bdbdbd; } #popupEcube .wirte .req select, #popupEcube .wirte .req input[type='text'], #popupEcube .wirte .req input[type='number'] { border-color:#d8321c; } #popupEcube .wirte .reqNote { height:auto; margin:-7px 0 7px 0; font-size:12px; color:#d8321c; letter-spacing:-0.24px; text-align:right; display:block; } #popupEcube .wirte .reqNote:last-child { margin-bottom:-5px; } #popupEcube .btnBox a:first-child { width:45%; } #popupEcube .btnBox button > span { font-weight:400; } #popupChkPrmt { max-height:calc(100vh - 25px); padding-bottom:65px; overflow-y:auto; box-sizing:border-box; } #popupChkPrmt input, #popupChkPrmt select { height:37px; border:solid 1px #e7e7e7; border-radius:5px; margin-left:10px; font-family:'Pretendard'; font-size:14px; color:#000; letter-spacing:-0.28px; box-sizing:border-box; } #popupChkPrmt input:focus, #popupChkPrmt select:focus { border-color:#142136; } #popupChkPrmt input { padding:0 0 0 7px; } #popupChkPrmt input::placeholder { color:#bdbdbd; } #popupChkPrmt select { background:url('/mobile/asset/images/mark_select.svg') calc(100% - 10px) center no-repeat; padding:0 27px 0 7px; appearance:none; -webkit-appearance:none; } #popupChkPrmt .intro { border-top:solid 1px #f4f4f6; margin:10px 20px 0 20px; padding:17px 0 26px 0; font-size:14px; font-weight:400; color:#000; letter-spacing:-0.28px; text-align:center; } #popupChkPrmt .intro span { display:inline-block; } #popupChkPrmt .myInfo { padding:0 20px; } #popupChkPrmt .myInfo dl { border-top:solid 1px #f4f4f6; margin-top:6px; } #popupChkPrmt .myInfo dt { height:37px; margin-top:10px; font-size:13px; font-weight:400; color:#595b5f; line-height:37px; } #popupChkPrmt .myInfo dd { height:37px; margin-top:-37px; padding-left:80px; display:flex; justify-content:space-between; } #popupChkPrmt .myInfo dd input { width:100%; } #popupChkPrmt .myInfo dd select { width:40%; min-width:70px; } #popupChkPrmt .myInfo dd:last-child input { padding:0 7px; text-align:center; } #popupChkPrmt .myInfo label { position:relative; padding-left:25px; display:inline-block; overflow:hidden; } #popupChkPrmt .myInfo label span { height:18px; font-size:12px; color:#595b5f; line-height:18px; letter-spacing:-0.24px; display:block; } #popupChkPrmt .myInfo label span:before { content:''; position:absolute; z-index:2; top:0; left:0; width:18px; height:18px; background:#fff; border:solid 1.4px #cbccce; border-radius:4px; box-sizing:border-box; } #popupChkPrmt .myInfo label input { position:absolute; z-index:-1; top:0; left:-1px; width:0; height:0; border:0; opacity:0; } #popupChkPrmt .myInfo label input:checked + span:before { background:url('/mobile/asset/images/mark_check.svg') center center no-repeat; background-color:#142136; border:0; } #popupChkPrmt .certify { padding:10px 20px; } #popupChkPrmt .certify button { height:37px; background:#838c9c; border-radius:5px; font-family:'Pretendard',arial; font-size:14px; color:#fff; line-height:36px; letter-spacing:-0.28px; text-align:center; } #popupChkPrmt .certify button:disabled { opacity:.3; } #popupChkPrmt .certify .send { text-align:right; } #popupChkPrmt .certify .send button { min-width:91px; padding:0 9px; } #popupChkPrmt .certify .timer { background:none; margin:1px 0 0 5px; font-size:12px; color:#d8321c; letter-spacing:-0.24px; display:inline-block; } #popupChkPrmt .certify .finish { position:absolute; z-index:10; top:-1px; right:0; background:#fff; width:70px; height:39px; padding-left:4px; font-size:14px; color:#7a2ecd; line-height:39px; display:block; box-sizing:border-box; } #popupChkPrmt .certify .finish:before { content:''; width:10px; height:9px; background:url('/mobile/asset/images/mark_check_certify.svg') left center no-repeat; margin-right:4px; display:inline-block; } #popupChkPrmt .certify .verify { position:relative; margin-top:10px; padding-right:76px; font-size:13px; color:#595b5f; letter-spacing:-0.26px; display:flex; justify-content:space-between; align-items:center; } #popupChkPrmt .certify .verify input { width:calc(100% - 90px); margin-left:auto; } #popupChkPrmt .certify .verify button { position:absolute; top:0; right:0; width:66px; } #popupChkPrmt .certify .notify { margin-top:10px; font-size:12px; color:#808080; line-height:14.4px; letter-spacing:-0.24px; word-break:keep-all; display:none; } #popupChkPrmt .certify .notify li { position:relative; margin-top:5px; padding-left:15px; } #popupChkPrmt .certify .notify li:before { content:''; position:absolute; top:5px; left:7px; width:3px; height:3px; background:#808080; border-radius:10px; display:block; } #popupChkPrmt .certify .notify.active { display:block; } #popupChkPrmt .btnBox { position:fixed; z-index:10; left:0; right:0; bottom:0; background:#fff !important; } #popupNPay { max-height:calc(100vh - 25px); padding-bottom:95px; overflow-y:auto; box-sizing:border-box; } #popupNPay .btnBox { position:fixed; z-index:10; left:0; right:0; bottom:0; background:#fff !important; } #popupNPay .btnBox a:first-child { width:44.19%; max-width:150px; } #popupNPay .btnBox button { background:#09ab49 !important; letter-spacing:-0.32px; } #popupNPay .btnBox button:disabled { color:#ffffff80; } #popupNPay .pickBox { border:0; margin:-6px 0 0 0; padding:0 20px; } #popupNPay .pickBox label { position:relative; margin-top:8px; display:block; overflow:hidden; } #popupNPay .pickBox label span { height:47px; border:solid 1px #ecedef; border-radius:5px; padding-left:15px; font-size:14px; font-weight:400; color:#7f7f7f; line-height:45px; letter-spacing:-0.28px; display:block; box-sizing:border-box; } #popupNPay .pickBox label input { position:absolute; top:0; left:-1px; width:0; height:0; border:0; opacity:0; } #popupNPay .pickBox label input:checked + span { border:solid 2px #09ab49; padding-left:14px; color:#000; line-height:43px; } #popupNPay .cashRecp { min-height:23px; padding:0 20px; margin-top:11px; text-align:right; } #popupNPay .cashRecp label { position:relative; padding-right:36px; display:inline-block; } #popupNPay .cashRecp label span { font-size:12px; color:#595b5f; line-height:16px; letter-spacing:-0.28px; display:block; } #popupNPay .cashRecp label span:after, #popupNPay .cashRecp label span:before { content:''; position:absolute; display:block; overflow:hidden; box-sizing:border-box; } #popupNPay .cashRecp label span:after { top:2px; right:13px; width:12px; height:12px; background:#fff; border-radius:15px; } #popupNPay .cashRecp label span:before { top:0; left:auto; right:0; width:27px; height:16px; background:#e6e6e6; border:0; border-radius:20px; } #popupNPay .cashRecp label input { position:absolute; top:0; left:-1px; width:0; height:0; border:0; opacity:0; } #popupNPay .cashRecp label input:checked + span:after { right:2px; } #popupNPay .cashRecp label input:checked + span:before { background:#142136; } #popupNPay .cashRecp .write { margin:12px 0 13px 0; } #popupNPay .cashRecp .write input, #popupNPay .cashRecp .write select { height:37px; border:solid 1px #e7e7e7; border-radius:5px; padding-left:7px; font-family:'Pretendard',sans-serif; font-size:13px; color:#000; letter-spacing:-0.28px; vertical-align:top; box-sizing:border-box; } #popupNPay .cashRecp .write select:focus, #popupNPay .cashRecp .write input[type='text']:focus, #popupNPay .cashRecp .write input[type='number']:focus { border-color:#142136; } #popupNPay .cashRecp .write input[type='text']::placeholder, #popupNPay .cashRecp .write input[type='number']::placeholder { color:#bdbdbd; } #popupNPay .cashRecp .write select { float:left; width:130px; background:url('/mobile/asset/images/mark_select.svg') calc(100% - 10px) center no-repeat; appearance:none; -webkit-appearance:none; } #popupNPay .cashRecp .write select:disabled { background-color:#f4f4f4; color:#b7b7b7; opacity:1; opacity:1; } #popupNPay .cashRecp .write input[type='text'], #popupNPay .cashRecp .write input[type='number'] { float:right; width:calc(100% - 140px); } #popupNPay .cashRecp .write:after { content:''; display:block; clear:both; } #popupNPay .cashRecp .notify { margin-top:10px; font-size:12px; color:#808080; line-height:14.4px; letter-spacing:-0.24px; word-break:keep-all; display:none; } #popupNPay .cashRecp .notify li { position:relative; margin-top:5px; padding-left:15px; } #popupNPay .cashRecp .notify li:before { content:''; position:absolute; top:5px; left:7px; width:3px; height:3px; background:#808080; border-radius:10px; display:block; } #popupNPay .cashRecp .write, #popupNPay .cashRecp .notify { text-align:left; display:none; } #popupNPay .cashRecp.active .write, #popupNPay .cashRecp.active .notify { display:block; } #popupNPay .cashRecp.off { display:none; } /* popup :약관 및 정책 */ .policyTit { margin:15px 0 3px 0; display:block; } .policyTit + .policyList { padding-top:0 !important; } .policyInfo { margin-top:3px; padding-left:10px; } .policyInfo dt, .policyInfo dd { float:left; } .policyInfo dt { position:relative; clear:both; } .policyInfo dt:after { content:':'; margin:-3px 5px 0 5px; vertical-align:middle; display:inline-block; } .policyInfo dt:before { content:'-'; position:absolute; top:0; left:-10px; } .policyInfo .full { width:100%; } .policyInfo:after { content:''; display:block; clear:both; } .policyInfo + p { margin-top:10px; } .policyList { padding-top:10px; } .policyList li:first-child { margin-top:0 !important; } .policyList > li { list-style:decimal; list-style-position:inside; margin-top:8px; } .policyList ol { margin:3px 0 0 10px; } .policyList ol.typeGap > li { margin-top:8px; } .policyList ol.typeCircle i { margin-top:-4px; font-size:18px; font-weight:300; vertical-align:middle; display:inline-block; } .policyList ul { padding-left:10px; } .policyList ul > li { position:relative; padding-left:10px; } .policyList ul > li:before { content:'-'; position:absolute; top:0; left:0; display:block; } .policyList ul ul { padding-left:5px; } .policyList ul ul > li { padding-left:6px; } .policyList ul ul > li:before { content:''; top:8px; width:2px; height:2px; background:#888; border-radius:10px; } .policyList ul.typeTit i { background:#faf5ff; padding:0 3px; display:inline-block; } .policyList ul.typeGap { padding-top:5px; } .policyList ul.typeGap > li { margin-top:5px; } .policyList span { display:inline-block; } .policyList small { margin-top:-5px; font-size:13px; line-height:18px; display:block; } .policyList .bundle { border:solid 1px #ddd; border-radius:4px; margin:2px 0 10px 0; padding:5px 8px 3px 8px; display:block; } .policyList.single li { margin-top:0; } .policyList.notNum li { list-style:none; } .policyList + p { margin-top:12px; } .policyListItem { padding-top:10px; } .policyListItem li { position:relative; padding-left:10px; } .policyListItem li:before { content:'-'; position:absolute; top:0; left:0; } .policyListItem + p { margin-top:12px; } .policyChap { margin-top:25px; font-size:15px; white-space:nowrap; display:block; overflow:hidden; } .policyChap:after { content:''; width:100%; height:0; border-bottom:dashed 1px #ddd; margin:-3px 0 0 10px; vertical-align:middle; display:inline-block; } .policyChap:first-child { margin-top:0; } .policyChap + br { display:none; } .policyTbl { margin-top:8px; overflow-x:auto; } .policyTbl th, .policyTbl td { border:solid 1px #ddd; } .policyTbl th { background:#f5f5f5; padding:10px 0 8px 0; font-size:13px; color:#777; font-weight:400; line-height:18px; } .policyTbl td { padding:6px 8px 4px 8px; } .policyTbl table { width:100%; min-width:750px; border:solid 1px #ddd; } .policyTbl table.cntr td { text-align:center; } .policyTbl span { display:inline-block; } .policyNote { position:relative; margin-top:4px; padding-left:13px; font-size:12px; line-height:16px; display:block; } .policyNote:before { content:'※'; position:absolute; top:-1px; left:0; font-size:18px; font-weight:100; color:#999; display:block; } .policyRefer { margin-top:10px; } .policyRefer mark { background:#faf5ff; font-weight:600; color:#888; } .policyRefer span { display:inline-block; } .policyPeriod dt { background:#f6f6ff; margin:15px 0 3px 0; padding:0 3px; display:inline-block; } .policyPeriod dt:after { content:'>'; display:inline-block; } .policyPeriod dt:before { content:'<'; display:inline-block; } .policyPeriod dd { position:relative; margin-left:5px; padding-left:10px; } .policyPeriod dd:before { content:'-'; position:absolute; top:0; left:0; } .policyPeriod span { display:inline-block; } .policyPeriod .depth { padding-left:0; } .policyPeriod .depth:before { display:none; } .policyPeriod .depth li { position:relative; margin-left:8px; padding-left:10px; } .policyPeriod .depth li:before { content:'-'; position:absolute; top:0; left:0; } .policyPeriod .depth + .depth { margin-top:5px; } .policyRevise { border-top:dashed 1px #ddd; padding-top:20px; font-size:13px; line-height:18px; } .policyRevise i { background:#f6f6ff; padding:0 3px; display:inline-block; } #popupPlcyMulti { max-height:calc(100vh - 95px); padding-bottom:90px; overflow-y:auto; box-sizing:border-box; } #popupPlcyMulti .note { padding:0 20px 13px 20px; font-size:14px; color:#595b5f; line-height:1.5; } #popupPlcyMulti .titPart { font-size:15px; font-weight:600; color:#000; } #popupPlcyMulti .plcyBox { max-height:180px; border:solid 1px #e6e6e6; border-radius:7px; margin-top:13px; padding:10px; font-size:14px; color:#595b5f; line-height:1.5; overflow:hidden; overflow-y:auto; box-sizing:border-box; } #popupPlcyMulti .plcyBox::-webkit-scrollbar { width:13px; background:transparent; } #popupPlcyMulti .plcyBox::-webkit-scrollbar-thumb { background:#d9d9d9; border:solid 5px #fff; border-radius:20px; } #popupPlcyMulti .plcyBox::-webkit-scrollbar-button { width:0; height:0; } #popupPlcyMulti .partBox { margin-top:15px; padding:0 20px; } #popupPlcyMulti .partBox + .partBox { margin-top:30px; } #popupPlcyMulti .btnBox { position:fixed; z-index:10; left:0; right:0; bottom:0; background:#fff !important; } /* otherSize */ @media screen and (min-width:500px){ .payNew .agreeAll { margin:26px 0 14px 0; } .payNew .agreeAll + .btnExtd { width:84px; } .payNew .infoDate { margin-top:-70px; } .payNew .rptPay .intro { padding:22px 4.17vw 21px 4.17vw; } .payNew .rptPay .btnBox button { padding:0 20px; } } @media screen and (min-width:600px){ .payNew .infoCount { padding:25px 4.17vw; } .payFinish .intro { padding:60px 30px; } .payFinish .infoAmass { padding:25px 4.17vw; } } @media screen and (min-width:750px){ .cartNew .itemBox { padding:0 30px 40px 30px; } .cartNew .partBox mark { border-top-right-radius:13px; padding:0 15px; } .cartNew .itemBox .btnDel { right:30px; } .cartNew .partBox h3 { margin-bottom:30px; padding:30px 30px 28px 30px; } .cartNew .partBox h4 { margin:0 30px 30px 30px; } .payFinish .infoBox { padding:30px 4.17vw; } } /* 결제 완료 - 시스템점검안내 */ .payFinish .systemNotice { padding:2.78vw 0.84vw 0.84vw; margin:10px auto; border-radius:min(2.3vw,15px); background-color:#381FC3; text-align:center; } .payFinish .systemNotice h3 { margin-bottom:2.78vw; color:#FFFFFF; font-size:min(4.45vw,21px); font-weight:700; line-height:normal; letter-spacing:-0.32px; } .payFinish .systemNotice .txtBox { padding:3.34vw 4.45vw; border-radius:min(1.7vw,11px); background-color:#FFFFFF; } .payFinish .systemNotice .txtBox .date { padding-bottom:2.78vw; } .payFinish .systemNotice .txtBox .date li { color:#371FC3; font-size:min(3.89vw,19px); font-weight:500; line-height:normal; letter-spacing:-0.28px; } .payFinish .systemNotice .txtBox .date li + li { margin-top:1.39vw; } .payFinish .systemNotice .txtBox p { padding-top:2.78vw; border-top:1px solid #EEEEEE; color:#000000; font-size:min(3.62vw,17px); font-weight:400; line-height:1.4; letter-spacing:-0.26px; } .payFinish .systemNotice .txtBox p strong { font-weight:700; } @media screen and (min-width:600px) { .payFinish .systemNotice { padding:17px 5px 5px; } .payFinish .systemNotice h3 { margin-bottom:17px; } .payFinish .systemNotice .txtBox { padding:20px 4.45vw; } .payFinish .systemNotice .txtBox .date { padding-bottom:17px; } .payFinish .systemNotice .txtBox .date li + li { margin-top:8px; } .payFinish .systemNotice .txtBox p { padding-top:17px; } }