/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap'); */ /*[s] Reset Css */ html,body{width:100%; min-height:100%; background-color: #fff; -webkit-text-size-adjust:none} /* input,button,textarea{ border:none;background-color: transparent; -webkit-border-radius:0; -webkit-appearance:none} */ input[type=submit],input[type=image],input[type=button],button,a{ text-decoration: none;cursor: pointer;} img,video,audio,object,embed,iframe{max-width:100%;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,legend{margin:0;padding:0} fieldset,img,abbr,acronym{border:none} fieldset{display:block} ol,ul{list-style:none outside} h1,h2,h3,h4,h5,h6,address,caption,cite,code,dfn,em,th,var{font-size:100%;font-weight:normal} hr,legend,caption,hr{margin:0;padding:0;overflow:hidden;position:absolute;top:0;left:0;width:0;height:0;visibility:hidden;font-size:0;line-height:0;text-indent:-1000em} img{ image-rendering: -moz-crisp-edges; /* Firefox */ image-rendering: -o-crisp-edges; /* Opera */ image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges;/* Webkit (non-standard naming) */ } body,th,td,input,select,textarea,h2,h3,h4,h5,button,address,code{font-family:'Noto Sans KR', sans-serif; font-size:1rem; font-style:normal; font-weight:normal; line-height:1.6; color:#666;} input[type="number"] { -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; } /*[e] Reset Css */ /*[s] Transition Style */ #header, #header:before, #header .gnbBg, #header .gnbBg:before, #header h1, #header h1>a, #header h1>a img, #header .mMenu, #header .mMenu>span, #header .mMenu:before, #header .mMenu:after, #header #gnb:after, #header #gnb:before, #header #gnb>li>a:before, #header #gnb>li>a i:before, #header #gnb>li>a i:after, #header #gnb>li, #header #gnb a, #header #gnb>li>a>span:before, #header #gnb .gnbSub>li>a, #header #gnb>li>a em, #header #gnb>li>a em:after, #header #gnb>li>a em:before, #header #pcMenu, #header #pcMenu:before, #header #pcMenu .bg, #header #pcMenu #list:before, #header #pcMenu #list>li, #header #pcMenu #list>li>a, #header #pcMenu #list>li>a i, #header #pcMenu #list>li>a>span:before, #header #pcMenu #list .gnbSub>li>a, #header .utill .appDown, #header .language:before, #header .tSchArea, #header .tSchArea .tSch:before, #header .tSchArea .tSch:after, #header .tSchArea .tSch_in, .menuLayer .gnb>li>a, .menuLayer .gnb>li>a i, .menuLayer .gnb>li>a i:after, .menuLayer .gnb>li>a i:before, .menuLayer .gnb .gnbSub>li>a, #snb #nav>li>a, #snb #nav>li>a i, #snb #nav>li>a i:after, #snb #nav>li>a i:before, #snb #nav .lnbSub>a, #snbPc .inConts a, #snbMobile>a i, #snbD3 .inConts a, #snbD3 .inConts a>span:before, #container.portrait #snb #nav>li>a, #container.portrait #snb #nav>li .d3>li>a{transition: all .3s ease-out; transform-origin: 50% 50%;} a.goTop, a.goTop:before{transition: all .5s ease-out;} .menuLayer{transition: all .5s ease-in-out; transform-origin: 50% 50%;} /*[e] Transition Style */ .responsiveBox{padding-bottom: 100%;overflow: hidden;position: relative;width: 100%;height: 0;} .responsiveBox .img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-repeat: no-repeat;background-position: center;background-size: cover;} .limite1000{margin: 0 auto;padding: 0 3rem;width: 100%;max-width: 102rem;} .limite1200{margin: 0 auto;width: 100%;max-width: 122rem;} .limite1240{margin: 0 auto;padding: 0 3rem;width: 100%;max-width: 124rem;} .limite1780{margin: 0 auto;padding: 0 3rem;width: 100%;max-width: 180rem;} .skip{position: absolute;top: -30px;z-index: 100;width: 100%;height: 30px;background: rgba(0,0,0,0.7);line-height: 30px;color: #fff;text-align: center;opacity: 0;} /*[s] Bace Css */ :root, html{font-size: 10px} :root { /* color */ --point : #333; --event__color--point : #035ab6; --event__color--end : #b3b3b3; /* font size */ --f__size--12 : 1.2rem; --f__size--13 : 1.3rem; --f__size--14 : 1.4rem; --f__size--15 : 1.5rem; --f__size--16 : 1.6rem; --f__size--17 : 1.7rem; --f__size--18 : 1.8rem; --f__size--19 : 1.9rem; --f__size--20 : 2rem; --f__size--21 : 2.1rem; --f__size--22 : 2.2rem; --f__size--23 : 2.3rem; --f__size--24 : 2.4rem; --f__size--36 : 3.6rem; /* min size */ --min__size : 140rem; } .pVar, .ptVar{display:block;} img.pVar, img.ptVar{display:inline-block;} th.pVar, td.pVar{display:table-cell;} .tVar, .mVar, .tmVar, .br_t{display:none;} .br_p{} .tal{text-align: left !important;} .tac{text-align: center !important;} .tar{text-align: right !important;} .memTel__callTxt{font-family: 'Poppins';} .f_arr{font-family:"SUIT Variable", sans-serif !important;} html.hide{ overflow:hidden;height:100vh;} .inConts{ margin:0 auto; padding:0 3rem; position: relative;width:100%; max-width:146rem;} #wrap{ margin:0 auto; overflow:hidden; position:relative;width:100%; background-color:#fff;} #wrap *{letter-spacing:-0.04em; word-break:keep-all; word-wrap:break-word; box-sizing: border-box;} /*[e] Bace Css */ /*[s] HEADER */ #progressBar{ position:fixed; top:0;left:0; z-index:11;width:0%; height:3px; background-color:#f91355; font-size:0; line-height:0;} #ribbonArea{ display:none; margin-left:-960px; overflow:hidden; position: relative; left:50%;width:1920px; font-size:0; line-height:0;} #ribbonArea .ribbon_close{ margin:0 auto; position: relative; z-index:7;width:160rem; opacity: 0.6;} #ribbonArea .ribbon_close .checkIn{position: absolute; top:-46px; right:0;} #ribbonArea .ribbon_close .checkIn input[type=checkbox]+label:before{ right:0; left:auto;background-color: transparent;} #ribbonArea .ribbon_close .checkIn input[type=checkbox]+label{padding:0 2.6rem 0 0; font-family: 'S-CoreDream-2ExtraLight'; font-size:12px; font-weight: 300; color: #fff;} #header{display: flex; position: relative; z-index:100000;width:100%;height: 8rem; background-color: #fff;} #header .gnbBg{ display: block; border-top:1px solid #ddd; overflow:hidden; position:absolute; top:100%; left:50%;width: 100vw; height:0; background-color:#fff; transform: translateX(-50%); opacity:0;} #header .inConts{ display: flex; justify-content: space-between; margin-bottom:-1px; padding:0 3rem;max-width:1780px;} #header .inConts>*{ display: flex; align-items: center; justify-content: flex-start;flex:0 1 auto; flex-direction: row;} #header h1>a {display: block;width:16.1rem;height:3.1rem;;background:url("/img/common/logo.svg") no-repeat center center} /* #header.all h1>a{background:url("/theme/prix/img/logo.svg") no-repeat center center;display: block;width: 17rem;height: 4.8rem; } */ #header:before{ display: inline-block; position:absolute; top:100%; left: 0; width: 100%; height: 0; background-color: #f7f7f7;content: "";opacity: 0;} #header.active::before, #header.all::before{height: 22rem;opacity: 1;} #header #pcMenu, #header #pcMenu #list, #header #pcMenu #list>li, #header #pcMenu #list>li>a{height:8rem;} #header #pcMenu{display: inline-table;padding: 0 1rem;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);} #header #pcMenu #list{display:inline-block;} #header #pcMenu #list>li{ display:inline-block;padding:0 4rem; position: relative; vertical-align: top;} #header #pcMenu #list>li>a{ display:table;align-items: center; position: relative; z-index:3;width:100%; font-size:1.8rem; font-weight: 500; line-height:1; color: #1b1b1b; text-align: center; box-sizing: border-box;} #header #pcMenu #list>li>a>span{display:table-cell; vertical-align:middle;} #header #pcMenu #list>li>a>span:before{ display: inline-block; margin-left:0%; position:absolute; bottom:-.1rem; left: 50%; z-index:5; width: 0; height: .3rem; background-color: #ff7200;content: "";} #header #pcMenu #list .gnbSub{/* margin-top:-1.6rem; */ display:none;padding: 0 1.0rem;position: absolute;top: calc(100% + 2rem);left:50%; z-index:6;text-align: center;white-space: nowrap;box-sizing: border-box;transform: translateX(-50%);/* background-color: #f91355; *//* border-radius:9.9rem; */} #header #pcMenu #list .gnbSub>li{ display:block;padding:0 1.5rem 0 1.6rem; position: relative; vertical-align: top;} #header #pcMenu #list .gnbSub>li+li:before{ display: inline-block; position:absolute; top:50%; left: 0; width: .1rem; height: .8rem; background-color: rgba(255,255,255,0.5);content: ""; transform: translateY(-50%);} #header #pcMenu #list .gnbSub>li>a{ display:table;width:100%; height:3.6rem; font-size:1.5rem; line-height:1.4; color:#999999; text-align:center;} #header #pcMenu #list .gnbSub>li>a>span {display:table-cell; vertical-align: middle; word-break:keep-all; word-wrap:break-word;} #header #pcMenu #list>li:hover>a, #header #pcMenu #list>li.active>a{color: #ff7200;} #header #pcMenu #list .gnbSub>li:hover>a, #header #pcMenu #list .gnbSub>li.oPage>a{color: #ff7200;} #header #pcMenu #list>li:hover>a>span:before, #header #pcMenu #list>li.active>a>span:before, #header #pcMenu #list>li.oPage>a>span:before{ margin-left:0; left: 0;width: 100%; opacity: 1} #header .right-utill{display: flex;justify-content: flex-end; position: relative;} #header .right-utill>*+*{margin-left:0rem;} #header .mMenu{ display:inline-block;display: none; border:none; overflow:hidden; position: relative; z-index:4;width:3.4rem; height:2.9rem; background-color:transparent; font-size:0; line-height:0; cursor: pointer;} #header .mMenu>span, #header .mMenu:before, #header .mMenu:after{ display: inline-block; position:absolute; top:50%; left:50%; width: 100%; height: 0.3rem; background-color:#1b1b1b;content: ""; transform: translate(-50%, -50%);} #header .mMenu>span{ margin-top:0; right:0; left:auto;width:50%; background-color: #ff7200; transform: translate(0, -50%);} #header .mMenu:before{ margin-top:-1.2rem; right:0; left:auto;width:75%; transform: translate(0, -50%);} #header .mMenu:after{margin-top:1.3rem;} #header .mMenu.open>span{width:100%; opacity:0;} #header .mMenu.open:before{margin:-0.1rem 0 0 -1.7rem;width:100%; transform:rotate(45deg);} #header .mMenu.open:after{margin:-0.1rem 0 0 -1.7rem; transform:rotate(-45deg);} #header .language-area{ position: relative;width:8.0rem; height:3.8rem;} #header .language{ display:inline-block; border:2px solid #fff; overflow: hidden; position: absolute; top:0; left:0;width:100%; vertical-align: top; background-color: #f91355; cursor: pointer; border-radius:18px;} #header .language:before{ border-top:5px solid #ededed; border-bottom:0; border-right:4.5px solid transparent; border-left:4.5px solid transparent; position: absolute; top:15px; right:14px; width: 0; height: 0;content: "";} #header .language a{ display:table; padding:0 23px 0 13px;width:100%; height:34px; font-size:16px; font-weight: 400; line-height:1.2; color: #fff; table-layout: fixed; box-sizing: border-box;} #header .language a>span{display:table-cell; vertical-align: middle;} #header .language ul{display:none;} #header .language ul>li{border-top:1px solid #ccc;} #header .language ul>li>a{color: #fff;} #header .language.open:before{transform:rotate(180deg);} #header .tSchArea{ display:inline-block;font-size:0; line-height:0; cursor: pointer;} #header .tSchArea .tSch{ display:inline-block; border:none; position: relative; z-index:8;width:27px; height:27px; vertical-align: top; background-color: transparent; font-size:0; line-height:0; cursor: pointer;} #header .tSchArea>.tSch{position: relative;} #header .tSchArea .tSch:before, #header .tSchArea .tSch:after{ display:inline-block; position:absolute; top:50%; left:50%;content: "";} #header .tSchArea .tSch:before{ margin:-12px 0 0 -13px; border:2px solid #222;width:20px; height:20px; border-radius:99px;} #header .tSchArea .tSch:after{ margin:8px 0 0 1px;width:12px; height:2px; background-color: #222; transform:rotate(45deg);} #header .tSchArea .tSch_in{ border:0 solid #fff; box-shadow:0 0 10px rgba(0,0,0,0); overflow:hidden; position: absolute; top:50%; right:calc(100% + 1rem); z-index:8;width:0; height:50%; background-color:rgba(0,0,0,0.8); white-space: nowrap; transform: translateY(-50%); border-radius:99px;} #header .tSchArea .tSch_in .tSch{height:100%;} #header .tSchArea .tSch_in .tSch:before{border-color:#fff;} #header .tSchArea .tSch_in .tSch:after{background-color: #fff;} #header .tSchArea input[type=text]{ display:inline-block; padding:0 3rem; border:none;width:30rem; height:100%; vertical-align: top; background-color: transparent; font-size:16px; font-weight: 400; line-height:58px; color: #fff; text-align: left; box-sizing: border-box;} #header .tSchArea input[type=text]::-webkit-input-placeholder{color:#fff} #header .tSchArea input[type=text]::-moz-placeholder {color:#fff} #header .tSchArea.open .tSch_in{ box-shadow:0 0 10px rgba(0,0,0,0.3);width:35rem; border-width:2px;} #header .tSchArea.open>.tSch:before{ margin:-1px 0 0 -10px;width:27px; height:2px; border-width:1px; border-radius:0; transform:rotate(-45deg);} #header .tSchArea.open>.tSch:after{ margin:-1px 0 0 -10px;width:27px; height:2px;} #header .tUtill{ display:inline-block;position: absolute; top:0; right:95px; z-index:4;} #header .tUtill>a{ display:inline-block; position: relative; vertical-align: top; font-size:15px;font-weight: 300; line-height:111px; color: #fff; letter-spacing: -0.04em;} #header .tUtill>a+a{margin-left:21px;} #header .tUtill>a+a:before { display:inline-block; position:absolute; top:50%; left:-11px; width:1px; height: 10px; background-color:rgba(255,255,255,0.5);content: ""; transform: translateY(-50%);} #header .tUtill.on{right:64px;} #header.sch:before{width: 100%; height: 100%; background-color: rgba(255,255,255,0.3);} #header.sch #pcMenu:before{ display:block; position:absolute; top:0px; right: 0; bottom:0px; left: 0; z-index:3; background-color: #fff;content: "";} #header.sch #pcMenu, #header.sch .mMenu, #header.sch .language{filter:blur(3px);}f.menuLayer .gnb .gnbSub>li>a .voiceWrap__imgBox{max-width: 4.6rem;} .voiceWrap {display: flex;align-items: center;margin: 0 0 0 2rem;} .voiceWrap .voiceWrap__txt{padding-left: 1rem; font-size: 1.5rem; font-weight: 500; line-height: 1.8rem;} /* .voiceWrap .voiceWrap__txt {font-weight: 400;} */ .suaList{display: flex;gap: 2rem;} .sua--items{font-size: 1.5rem;color:#666666} .menuLayer{ overflow:hidden; overflow-y:auto; position: fixed; top:6.875rem; bottom:0; z-index:12; z-index: 100000;width:100%; } .menuLayer>.language{ display:table; border-top:1px solid #ccc;width:100%; background-color: #fff; table-layout: fixed;} .menuLayer>.language>a{ display:table-cell; position: relative;height:8rem; vertical-align: middle; font-size:2.2rem; line-height:1.2; color: #434343; text-align: center; box-sizing: border-box;} .menuLayer>.language>a>span{padding-left:3.25rem; background-repeat:no-repeat; background-position: left center; background-size:2.625rem 1.75rem;} .menuLayer>.language>a.ko>span{background-image:url('../img/flag_ko.gif');} .menuLayer>.language>a.en>span{background-image:url('../img/flag_en.gif');} .menuLayer>.language>a+a{border-left:1px solid #ccc} .menuLayer>.language>a.active{font-weight: 500; color: #ff7200;} .menuLayer .gnb{ border-top:1px solid #e6e6e6;background-color: #fff;} .menuLayer .gnb>li{border-bottom:1px solid #e6e6e6; position: relative;} .menuLayer .gnb>li>a{ display:table; padding:0 7rem 0 3rem; position: relative;width:100%; height:9rem; font-size:2.8rem; font-weight: 500; line-height:1.4; color: #1b1b1b; box-sizing: border-box;} .menuLayer .gnb>li>a>span{display:table-cell; position: relative; vertical-align:middle;} .menuLayer .gnb>li>a i{ display:inline-block; margin-top:-0.7rem; position: absolute; top:50%; right:3rem;width:2.6rem; height:1.4rem;} .menuLayer .gnb>li>a i:after, .menuLayer .gnb>li>a i:before{ display: block; margin:0 0 0 0; position:absolute; top:50%; width:1.7rem; height: 0.2rem; background-color: #aaa;content: "";} .menuLayer .gnb>li>a i:after{right:1rem; transform:rotate(45deg);} .menuLayer .gnb>li>a i:before{right:-0.1rem; transform:rotate(-45deg);} .menuLayer .gnb .gnbSub{ display:none;background-color: #f7f7f7;} .menuLayer .gnb .gnbSub>li{border-top:1px solid #dddddd;} .menuLayer .gnb .gnbSub>li>a{ display:table; padding-left:3rem; position: relative;width:100%; height:7.4rem; font-size:2.3rem; font-weight: 400; line-height:1.3; color: #666; text-align: left; letter-spacing: -1px; box-sizing: border-box;} .menuLayer .gnb .gnbSub>li>a>span{display:table-cell; position: relative; vertical-align:middle;} .menuLayer .gnb>li.active>a, .menuLayer .gnb>li.oPage>a{background-color: #ff7200; color: #fff;} .menuLayer .gnb>li.active>a em, .menuLayer .gnb>li.oPage>a em{color: #fff;} .menuLayer .gnb>li.active>a i, .menuLayer .gnb>li.oPage>a i{transform:rotate(-180deg);} .menuLayer .gnb>li.active>a i:after, .menuLayer .gnb>li.oPage>a i:after, .menuLayer .gnb>li.active>a i:before, .menuLayer .gnb>li.oPage>a i:before{background-color:#fff !important;} .menuLayer .gnb>li.one>a i{transform:rotate(-90deg);} #menuArea{right:-100%;} #menuArea.open{right:0;} .menuDim { display: none;position: fixed; top:0; left: 0; z-index: 10000;width:100%; height: 100%; background-color: rgba(0,0,0,0.7);} .menuDim.on {display: block;} .memTab{display: flex;gap: 0 4rem;align-items: center;padding: 5rem 3rem 3rem;background-color: #fff;} .memTab--items{position: relative;} .memTab--items + .memTab--items::before{display: block;position: absolute;top: 50%;top: 50%;left: -1.8rem;width: 0.1rem;height: 2.3rem;background-color: #333;content: "";transform: translate(-50%,-50%);} .memTab--items span{font-size: 2.6rem;color: #1b1b1b;} .memBottom{padding: 10rem 2rem;width: 100%;background-color: #fff;} .meminfoLink{display: flex;gap: 3rem;align-items: center;} .meminfoLink--items a{font-size: 2.2rem;color: #999999;} .meminfoLink--items{position: relative;} .meminfoLink--items + .meminfoLink--items::before{display: block;position: absolute;top: 50%;top: 50%;left: -1.5rem;width: 0.1rem;height: 2.3rem;background-color: #999999;content: "";transform: translate(-50%,calc(-50% + 0.1rem));} .memTel{display: flex;gap: 2rem;align-items: center;margin: 0 0 1.5rem 0;} .memTel__tit{font-size: 3rem;font-weight: 500;color: #111111;} .memTel__callTxt{font-size: 4.5rem;font-weight: 800;color: #ff7200;} .memTime{margin: 3rem 0 5rem;padding: 3rem 3rem;background-color: #f5f5f5;border-radius: 3rem;} .memTimeTit{margin: 0 0 1rem 0;font-size: 2.8rem;font-weight: 600;color: #111111;} .memTimeList--items{display: flex;align-items: center;} .memTimeList--items + .memTimeList--items{margin: 0.5rem 0 0 0;} .memTimeList--items b{width: 14rem;font-size: 2.4rem;font-weight: 300;} .memTimeList--items p{width: calc(100% - 14rem);font-size: 2.4rem;font-weight: 300;} /*[e] HEADER */ /*[s] SUB */ .cont_tit{ font-size:2.25rem; font-weight: 500; text-align:center;} #sVisual{display: flex;align-items: center;justify-content: center; flex-direction: column; overflow:hidden; position: relative;width:100%; height:22rem; background-repeat: no-repeat; background-position: center bottom; background-size: cover; font-size:0; line-height:0;} #sVisual h2{display:block; position: relative; font-size:4rem;font-weight: 700; line-height:1; color: #fff;letter-spacing: 0.025rem;} #sVisual h2>span{padding-top:2.5rem; font-size:1.8rem;} #sVisual.bg_1{background-image:url('../img/img_sVisual_01.jpg');} #sVisual.bg_2{background-image:url('../img/img_sVisual_01.jpg');} #sVisual.bg_3{background-image:url('../img/img_sVisual_01.jpg');} #sVisual.bg_4{background-image:url('../img/img_sVisual_01.jpg');} #sVisual.bg_5{background-image:url('../img/img_sVisual_05.jpg');} #sVisual.bg_6{background-image:url('../img/img_sVisual_06.jpg');} #sVisual.bg_7{background-image:url('../img/img_sVisual_01.jpg');} #sVisual.bg_8{background-image:url('../img/img_sVisual_01.jpg');} #sVisual.bg_9{background-image:url('../img/img_sVisual_01.jpg');} #sVisual.bg_10, #sVisual.bg_11, #sVisual.bg_12, #sVisual.bg_99{background-image:url('../img/img_sVisual_01.jpg');} /* #snb{width:1px; height:1px; font-size:0; line-height:0; position: fixed; left:-1px; top:-1px; z-index:-999; overflow:hidden; opacity: 0;} */ #snb{ border-bottom:1px solid rgba(191,191,191,0.6); position: relative; z-index:6;width:100%; background-color: #fff; font-size:0; line-height:0;} #snb:before{ display: inline-block; position:absolute; top:0px; left: 0; width: 25%; height: 100%; background-color: #f91355;content: "";} #snb #nav{ display: flex; align-content: center; justify-content: flex-start; flex-wrap: wrap; flex-direction: row; border-left:1px solid rgba(191,191,191,0.6); position: relative; z-index:2;width:100%; background-color: #fff;} #snb #nav>li{ display: flex; align-content: center; justify-content: center; flex-wrap: wrap;flex:0 1 18%; flex-direction: row; border-top:1px solid rgba(191,191,191,0.6); border-right:1px solid rgba(191,191,191,0.6); position:relative;} #snb #nav>li>a{ display:table; padding:0 5rem 0 2rem; position: relative;width:100%; height:5rem; font-size:1.5rem; font-weight: 300; line-height:1.2; color:#666;} #snb #nav>li>a>span{ display:table-cell;padding:0.5rem 0; vertical-align: middle; word-break:break-all !important;} #snb #nav>li>a i{ display:inline-block; margin-top:-0.5rem; position: absolute; top:50%; right:2rem;width:1.5rem; height:1rem;} #snb #nav>li>a i:after, #snb #nav>li>a i:before{ display: block; margin:0 0 0 0; position:absolute; top:50%; width:1rem; height: 0.2rem; background-color: #b2b2b2;content: "";} #snb #nav>li>a i:after{right:0.6rem; transform:rotate(45deg);} #snb #nav>li>a i:before{right:0px; transform:rotate(-45deg);} #snb #nav>li.home{flex-basis: 6rem; max-width:6rem;} #snb #nav>li.home>a{ padding:0;width:100%; height:5rem; background:url('../img/icon_home.png') no-repeat center center; font-size:0; line-height:0;} #snb #nav>li.home>a:before{ display:none;content: "";} #snb #nav>li:last-child{flex-basis: 25%;} #snb #nav>li:last-child>a{font-weight: 400; color: #333;} #snb #nav .lnbSub{ display:none; border:1px solid rgba(191,191,191,0.6); position:absolute; top:100%; right:-1px; left:-1px; z-index:3;background-color: #fff;} #snb #nav .lnbSub>a{ display:table; padding:0px 2rem;width:100%; height:5rem; font-size:1.5rem; font-weight: 300; line-height:1.4; color:#717171;} #snb #nav .lnbSub>a>span{ display:table-cell;padding:0.5rem 0; vertical-align: middle; word-break:break-all !important;} #snb #nav .lnbSub>a+a{border-top:1px solid rgba(191,191,191,0.6);} #snb #nav .lnbSub>a:hover, #snb #nav .lnbSub>a.active{background-color: #f0f0f0; color: #333;} #snb #nav .lnbSub>a.active{font-weight: 400;} #snb #nav>li.active>a i{transform:rotate(180deg);} #pageTop{padding:6rem 0 8rem; position: relative; font-size:0; line-height:0; text-align: center;} #pageTop>h3{padding-top:7.5rem; position: relative; font-size:4rem; font-weight: bold; line-height:1; color: #1b1b1b; text-align: center;} #pageTop>h3:before{ display: inline-block; margin-left:-0.5px; position:absolute; top:0px; left: 50%; width: 1px; height: 4rem;background-color: #000;content: "";} #pageTop>p{padding-top:3rem; font-size:2rem; font-weight: 400; line-height:1; color: #333;} #container{ margin:0 auto; padding:0 1rem 12rem; position: relative;width:100%; max-width:146rem; min-height:400px; background-color: #fff; box-sizing: border-box;} #container.full{padding: 0 0 8rem 0;width: 100%;max-width: none;} .fullBox{ display:block; margin-left:-50vw; position: relative; left:50%;width:100vw; font-size:0; line-height:0; text-align: center;} .fullBox.gray{background-color: #f7f7f7;} /*[e] SUB */ /*[s] FOOTER */ #footer{padding: 6rem 0;border-top: 1px solid #eeeeee; position: relative;width:100%;text-align: left;} /* #footer:before{content: ""; width: 100%; height: 1px; background-color: #484947; display: block; position:absolute; left: 0; top:7.6rem;} */ #footer .link{} #footer .link>a{ display:inline-block; position: relative; vertical-align: top; font-size:1.6rem;font-weight:500; color: #222222;} #footer .link>a+a{margin-left:2.5rem;} /*#footer .link>a+a:before{content: ""; width: 0.2rem; height: 2rem; margin-top:-1rem; background-color: #717070; display: inline-block; position:absolute; left: -1.6rem; top:50%;}*/ #footer .link>a.biz{display:none;} #footer .text{margin: 2.5rem 0 0 0;} #footer .text>p{} #footer .text>address, #footer .text>p>span{ display:inline-block; position: relative; vertical-align: top; font-size:1.6rem;font-style: normal; line-height:1.7; color:#999999;} #footer .text>p>span+span{margin: 0 0 0 1rem;} #footer .text>address{padding-top:1rem; font-size:1.5rem; color: #999999;} #footer .text>address>span{} #footer .csArea{ display:inline-block; position: absolute; top:12rem; right:2rem; z-index: 3;color: #fff;} #footer .csArea .tit{font-size:1.8rem; line-height:1;} #footer .csArea .tel{padding-top:1rem; font-size:4.5rem; font-weight: bold; line-height:1;} #footer .csArea .txt{padding-top:1rem; font-family: 'S-CoreDream-2ExtraLight'; font-size:1.5rem; line-height:1.5;} #footer .famArea{display:inline-block; position: absolute; top:1.6rem; right:2rem; z-index: 5;} #footer .famArea .famLay{ display:inline-block; border:1px solid #767775; position: relative;width:22rem; vertical-align: top; background: url('/theme/prix/img/board/bg_select_white.svg') no-repeat calc(100% - 1.5rem) center; background-size: 1.6rem; border-radius:3px;} #footer .famArea .famLay>p{ display:block; padding:0 4rem 0 2rem; border:none;height:4.2rem; font-size:1.5rem; line-height:4.2rem; color: rgba(255,255,255,1); text-align: left; box-sizing: border-box;} #footer .famArea .famLay .in_fam{ display:none; padding:1rem 0; border:1px solid #767775; overflow:hidden; overflow-y:auto; position: absolute; right:-1px; bottom:100%; left:-1px;max-height:20rem; background-color: #1a1c19; box-sizing: border-box; border-radius:3px;} #footer .famArea .famLay .in_fam>a{ display:block; padding:0 4rem 0 2rem; border:none;height:3.4rem; font-size:1.5rem; line-height:3.4rem; color: rgba(255,255,255,0.6); text-align: left; box-sizing: border-box;} .footerRight{display: flex;justify-content: space-between;} .siteLogoMore{} .siteLogoMoreBottom{margin: 3rem 0 0 0;} .siteMore--List{display: flex;gap: 1.3rem;align-items: center;justify-content: flex-end;} a.goTop{ display:block; overflow:hidden; position: fixed; right:15px; bottom:15px; z-index:9;width:50px; height:50px; background-color: #acacac; font-size:0; line-height:0; opacity: 0;} a.goTop.open{opacity: 1;} a.goTop:before{ display: block; position:absolute; top:0px; left: 0; width: 100%; height: 100%; background:url('/img/arr_goTop.png') no-repeat center center;content: "";} a.goTop:hover{background-color: #f91355; border-radius:50%; transform:rotate(180deg);} a.goTop:hover:before{transform:rotate(-180deg);} /**/ #footer .footerRight .f_info, #footer .footerRight .siteLogoMore {margin: 2.5rem 0 0 0;} #footer .footerRight .f_info li {display: inline-block;margin-right:10px;font-size: 1.6rem;font-style: normal;line-height: 1.7;color: #999999} #footer .footerRight .f_info .copy {display:block;padding-top:20px;width:100%;text-align:left} #footer .footerRight .f_info .copy a{ margin-left:10px; font-size: 1.5rem; color: #666;} /* 1006 이용안내 추가 */ .infor_content {display:flex;justify-content: space-between;margin-bottom:80px;width:100%;height:440px;} .infor_content .left_text {padding-top:2px;width:300px} .infor_content .left_text h1 {position:relative;top:0;left:0;font-size:1.5rem;font-weight: 700;color:#111;} .infor_content .left_text h1::after {display:block;position:absolute;top:30px;left:1px;width:35px;height:2px;background-color:#ff7200;content:"";} .infor_content .left_text > p {margin-top:40px;font-size:1.8rem;font-weight: 600;line-height: 1.3;} .infor_content .left_text div {margin-top:20px;padding: 15px 20px;width:240px;background-color:#fcf1ee;border-radius:15px;} .infor_content .left_text div > p {font-size:1.5rem;font-weight: 400;line-height: 1.3;color:#ff7200;} .infor_content .left_text .small {margin-top:15px;font-size:1.5rem;font-weight: 300;color:#666} .infor_content.st_pop{ display: block; margin-bottom: 0;height:auto;} .infor_content.st_pop .left_text{ margin-top: 40px;width:100%;} .infor_content.st_pop .left_text h1 {font-size:1.8rem;} .infor_content.st_pop .left_text > p {margin-top:30px;} .infor_content.st_pop .left_text div{width:100%; } .infor_content.st_pop .left_text .small {margin-top:15px;} /* 1006 추가 */ /*[s] FOOTER */ @media only screen and (max-width : 1550px){ #header #pcMenu #list>li{padding:0 3rem;} } @media only screen and (max-width : 1350px){ #header #pcMenu #list>li{padding:0 2rem;} } @media only screen and (max-width : 1280px){ #container{padding:0 3rem 14rem;} #header #pcMenu #list>li{padding:0 1rem;} #header #pcMenu #list>li>a{font-size:1.625em;} #header h1>a{width: 13rem;} #header #pcMenu{margin-left:6em;} } @media only screen and (max-width : 1024px){ .pVar, th.pVar, td.pVar{display:none !important;} .mVar, .br_p{display:none;} .tVar{display:block;} .br_t{display:block;} .ptVar{display:block;} .tmVar{display:block;} img.tVar, img.ptVar, img.tmVar{display:inline-block;} table .br_t{display:table-cell;} /*[s] HEADER */ #ribbonArea{display:none !important;} #header.all {box-shadow: 0 1rem 2rem -1rem rgb(0 0 0 / 8%);z-index: 1000;} #header .utill{padding-right:5rem;} #header .language{} #header .mMenu{display:block;} #header #pcMenu, #header .utill .appDown{ display: inline-block; margin: -1px; border: 0; overflow: hidden; clip: rect(1px, 1px, 1px, 1px);width: 1px; height: 1px; clip-path: inset(50%);} #header::before{display: none;} .menuLayer{padding-left:30%;} .voiceWrap{display: none;} .suaList{display: none;} /*[e] HEADER */ /*[s] SUB */ #sVisual{} #sVisual .inConts{} #sVisual h2{padding:0;} #snb>.inConts{padding:0 !important;} #snb #nav>li{flex:1 1 30%;} #snb #nav>li:last-child{flex-basis: 45%;} .fullBox{ margin-left:-3rem; left:0%;width:100vw;} /*[e] SUB */ /*[s] FOOTER */ #footer{} #footer:before{} .footerInner.limite1780 {padding: 0 2.93vw;} /* #footer .link{width:100%; display:table; table-layout: fixed;} #footer .link>a{height:7.7rem; line-height:1.4; text-align: center; display:table-cell; vertical-align: middle;} #footer .link>a+a{margin-left:0; border-left:1px solid #484947;} #footer .text{padding:17rem 0 3.5rem 0rem; background-position: center 4rem; text-align: center;} #footer .csArea{padding:4.5rem 0 7rem; text-align: center; position: static; display:block;} #footer .famArea{text-align: center; display:block; position: static;} */ /*[s] FOOTER */ } @media only screen and (max-width : 840px){ :root, html{font-size:8px;} :root { --f__size--12 : 2rem; --f__size--13 : 2rem; --f__size--14 : 2rem; --f__size--15 : 2rem; --f__size--16 : 2rem; --f__size--17 : 2.2rem; --f__size--18 : 2.2rem; --f__size--19 : 2.2rem; --f__size--20 : 2.4rem; --f__size--21 : 2.4rem; --f__size--22 : 2.4rem; --f__size--23 : 2.6rem; --f__size--24 : 2.6rem; --f__size--36 : 3rem; } .br_p, .pVar, .tVar, .ptVar{display:none !important;} .mVar, .tmVar, .br_t{display:block !important;} img.mVar, img.tmVar{display:inline-block !important;} table .br_t{display:table-cell !important;} /*[s] HEADER */ #header{} #header h1{padding:3rem 0;} #header h1>a{} #header h1>a img{width:17.6rem;} #header .inConts {padding: 0 2.86vw;} #header .right-utill>*+*{margin-left:2rem;} #header .tSchArea{} #header .tSchArea .tSch{width:4.6rem;} #header .tSchArea .tSch:before{ margin:-1.2rem 0 0 -1.3rem;width:2rem; height:2rem;} #header .tSchArea .tSch:after{ margin:0.8rem 0 0 1px;width:1.2rem; height:2px;} #header .tSchArea .tSch_in{ position: fixed; right:0%;height:8rem; background-color:rgba(0,0,0,0.6); transform: translate(0); border-radius:0;} #header .tSchArea input[type=text]{width:calc(100% - 6rem); font-size:2rem; line-height:6rem;} #header .tSchArea.open .tSch_in{width:100vw;} #header .language-area{ position: relative;width:12rem; height:5rem;} #header .language{border-radius:2.2rem;} #header .language:before{ border-bottom:0;border-top-width:0.8rem; border-right-width:0.4rem; border-left-width:0.4rem; top:1.7rem; right:1.4rem;} #header .language a{ padding:0 3rem 0 1.7rem;height:4.6rem; font-size:2rem;} .menuLayer{padding-left:0;} /*[e] HEADER */ /*[s] SUB */ #sVisual h2>strong{font-size:4rem;} #sVisual h2>span{font-size:2.6rem;} #snb{} #snb:before{display:none;} #snb #nav{} #snb #nav>li{flex:1 1 80%;} #snb #nav>li>a{height:7rem; font-size:2.2rem;} #snb #nav>li>a>span{} #snb #nav>li>a i{ margin-top:-0.8rem;width:2rem; height:1.6rem;} #snb #nav>li>a i:after, #snb #nav>li>a i:before{width:1.5rem;} #snb #nav>li>a i:after{right:1rem;} #snb #nav>li>a i:before{} #snb #nav>li.home{flex-basis: 7rem; max-width:7rem;} #snb #nav>li.home>a{width:100%; height:7rem;} #snb #nav>li.sDepth01{flex-basis: 35%;} #snb #nav>li.sDepth02{flex-basis: 45%;} #snb #nav>li.sDepth03{} #snb #nav>li.sDepth04{} #snb #nav>li:last-child{flex-basis: 45%;} #snb #nav .lnbSub{} #snb #nav .lnbSub>a{height:6rem; font-size:2.2rem;} #snb.four #nav>li.sDepth01{flex-basis: 70%;} #snb.four #nav>li.sDepth02{} #snb.four #nav>li.sDepth03{} #snb.four #nav>li.sDepth04{} #snb.four #nav>li:last-child{flex-basis: 80%;} #pageTop>h3{font-size:4.2rem;} #container{min-height:34.6rem;} /*[e] SUB */ /*[s] FOOTER */ .footerRight{display: flex;flex-direction: column;} .siteMore--List{justify-content: flex-start;} #footer{padding: 0 0 6rem;} #footer:before{top:7rem;} #footer .link{display: flex;} #footer .link>a{display: flex;align-items: center;height:10rem; font-size:2rem;} #footer .link>a+a{border-left: none;} #footer .text{padding: 0rem 0 6rem;background-size:17.9rem;text-align: left;} #footer .text>address, #footer .text>p>span{padding:0 0.9rem; font-size:2rem;} #footer .text>address{padding-top:2rem; font-size:2rem;} #footer .csArea{} #footer .csArea .tit{font-size:2.2rem;} #footer .csArea .tel{font-size:4.9rem;} #footer .csArea .txt{font-size:2rem;} #footer .famArea{} #footer .famArea .famLay{width:30rem; background-size: 2rem;} #footer .famArea .famLay>p{height:6rem; font-size:2rem; line-height:6rem;} #footer .famArea .famLay .in_fam{} #footer .famArea .famLay .in_fam>a{height:5rem; font-size:1.8rem; line-height:5rem;} .siteLogoMoreTop .siteMore--List{max-width: 70%;} .siteLogoMoreBottom .siteMore--List{max-width: 50%;} /*[s] FOOTER */ } @media only screen and (max-width : 840px){ #footer .link{justify-content: center;flex-wrap: wrap;} #footer .link>a{padding: 1.8rem 0;height: auto; font-size:1.625em;} #footer .link>a+a{margin-left:2rem;} .limite1000{padding: 0 1rem;} .limite1200{padding: 0 2rem;} .limite1780{padding: 0 1rem;} #sVisual{ height: 18rem;} .footerInner.limite1780 {padding: 0 3.57vw;} } @media screen and (max-width : 640px){ #header .inConts {padding: 0 3.75vw;} .footerInner.limite1780 {padding: 0 4.69vw;} } @media only screen and (max-width : 500px){ #footer .link>a.biz{display:inline-block;} #footer .link{justify-content: flex-start;} #footer .footerRight .f_info{margin-top:0;} } @media screen and (max-width : 375px){ #header .inConts {padding: 0 3.2vw;} .footerInner.limite1780 {padding: 0 4.27vw;} } /* -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); filter:grayscale(100%) blur(0px); -webkit-filter:grayscale(100%) blur(0px); transition: all .5s linear; transition: all .5s ease-out; transform:rotate(180deg); -webkit-transition-timing-function:ease-in linear; transition-timing-function:ease-in linear; -webkit-transition-delay: .8s; transition-delay: .8s; :before{content: ""; width: 24px; height: 24px; background-color: #fff; border:1px solid #666; display: inline-block; position:absolute; left: 0; top:0px; box-sizing: border-box;} display: flex; justify-content: space-between; // 양쪽 끝 정렬 display: flex; justify-content: space-around; // 센터 정렬 display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; //한줄 감추기 display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; //두줄 감추기 active :first-child text-indent:-99999px; !important display:table; table-layout:fixed; display:table-row; display:table-cell; box-sizing:border-box; word-break:keep-all; word-wrap:break-word; border-radius:2px; */ /* 20240702 추가 */ .none{display: none;} html.scrollHidden,body.scrollHidden {overflow: hidden !important;} .tabDepth>a, .lastDepth>a, .depth3>a, .depth3>a>span:before, .faq_list>li .q, .faq_list>li .q>.bul, #mVisual .visualRoll .slider>div, #mVisual .vTxtArea .ii, #mVisual .slick-dots>li button, #mVisual .slick-dots>li button:before, #mVisual .vTxt .ii,.dayFilterList--items a,.cateFilterList--items a,.btn_payEnd, #mVisual .iconMenu .inConts>a,.btnMore,.mTit--etc,.mProduct>.list a>.lay, .cont_img .btns>a{transition: all .3s ease-out; transform-origin: 50% 50%;} #mVisual .vTxt .ii{transition: all .5s ease-out; transform-origin: 50% 50%;} #mVisual .visualRoll .slider .photoBox p{transition: all 1s ease-out; transform-origin: 50% 50%;} .btnNormal{display: flex;align-items: center;justify-content: center;border: 1px solid #cccccc;width: 100%;max-width: 15rem;height: 5rem;font-size: 1.7rem;border-radius: 2.5rem;} .btn_payEnd{display: flex;align-items: center;justify-content: center;border: 0.2rem solid #ff7200;width: 100%;height: 9rem;font-size: 3rem;font-weight: 600;color: #ff7200;border-radius: 0.7rem;} .btn_payEnd:hover{background-color: #ff7200;color: #fff;} .btn_payment{border: 1px solid #ff7200;background-color: #ff7200;color: #fff !important;} .btn_gift{border: 1px solid #cccccc;background-color: #fff;color: #999999 !important;} .btn_table{padding: 0.6rem 1.3rem;background-color: #999999;font-size: 1.6rem;font-weight: 400;color: #fff !important;border-radius: 3rem;} .btn_table.pin{background-color: #ff7200;} .btn_table.pin.st{ border:1px solid #ff7200;background-color: #fff; color: #ff7200 !important;} .payment_online .btn_table{font-size:1.5rem; font-weight: 400;} .payment_paper .btn_table{font-size:1.5rem; font-weight: 400;} .bgPoint{background-color: #ff7200 !important;} .bold{font-weight:500} .black{color: #111;} .flexBetween{display: flex;align-items: center;justify-content: space-between;} .al{text-align: left;} .page_prev{ padding: 3em; border:6px solid #ededed; background: #fdfdfd; font-size: 1.5rem; border-radius: 30px;} .page_prev .nTable.giftTable>table th, .page_prev .nTable.giftTable>table td{padding:1rem;} .page_prev .nTable>table th{font-size:1.6rem;} .page_prev .nTable>table td{font-size:1.5rem;} .feeTxt{font-size: 1.6rem;font-weight: 500;} .textBoxAdd {margin: 1rem 0 2rem;} .textBoxAdd p {font-size: 1.5em; color: #f91c12;} /* 폰트 */ .discount .lineTxt,.total__txt,.nTable>table td,.productBox__price{font-family: 'NanumSquareRound';} .btnArea{text-align: center;} .btn_complete{display: flex;align-items: center;justify-content: center;margin: 5.5rem auto 0;width: 100%;max-width: 20rem;height: 5.5rem;background-color: #ff7200;font-size: 1.8rem;color: #fff !important;text-align: center;border-radius: 4rem;} .btn_complete.st_pop{ margin: 3rem auto 0; max-width: 22rem;font-size:1.7rem;} .btnMore{display: flex;align-items: center;justify-content: center;width: 100%;max-width: 22rem;height: 6rem;background-color: #222222;font-size: 1.8rem;font-weight: 500;color: #fff;text-align: center;border-radius:5rem;} .btnMore:hover{border: 1px solid #222;background-color: #fff;color: #222;;} /*[s] All Style */ .bg_thumb_box{width:100%; height:100%; background-repeat: no-repeat; background-position: center center; box-sizing: border-box;} img.bg_thumb{opacity: 0;} img.ofi{width:100%; height:100%; font-family: 'object-fit: cover; object-position: center center;'; object-fit:cover; object-position: center center;} .tbLayout{ display:table;width:100%;} .tbLayout.fixed{table-layout: fixed;} .tbLayout>*{display:table-cell; vertical-align: middle; box-sizing: border-box;} .tbLayout.vat>.td{vertical-align: top;} .tbLayout.full{ margin-left:-960px; position: relative; left:50%;width:1920px;} .nTable{ border-top:2px solid #333;width:100%;} .nTable>table{width:100%; table-layout : fixed; border-spacing:0;} .nTable>table th,.nTable>table td{padding:2rem 2rem; border-bottom:1px solid #dadada; vertical-align: middle; background-color: #fff; font-size:1.7rem; line-height:1.5; color:#666; text-align:left; word-break:keep-all; word-wrap:break-word; empty-cells:show; border-collapse:collapse; box-sizing: border-box;} .nTable>table th{ padding:0; border-right:1px solid #dadada;height:5rem; font-size:1.625rem; color: #333; text-align: center;} .nTable>table>tbody>tr{padding: 2rem 1rem;position: relative;} .nTable>table>thead>tr>th{background-color: #f8f9fb; font-weight: 500;} .nTable>table>tbody>tr>th{position: relative;} .nTable>table td{border-right: 1px solid #dadada;font-size: 1.5rem;font-weight: 600;color: #111;text-align: center;} .nTable>table th:last-child{border-right: 0;} .nTable>table td:last-child{border-right: 0;} /* 20230627 추가 */ .nTable>table td:last-child.bd_r{border-right: 1px solid #dadada;} .nTable.st1 >table td{font-weight:400;} .nTable>table .th_check{width: 5rem;} .nTable>table .td_checkIn{padding: 0;text-align: center;} .nTable>table .tableImg.responsiveBox{padding-bottom: 90%;} .nTable>table .td_cont{text-align: left;} .nTable>table .td_cont--inner{display: flex;align-items: center;} .nTable>table .td_cont--inner .ImgBox{overflow: hidden;position: relative;width: 12.6rem;height: 9.9rem;border-radius: 1rem;} .nTable>table .td_cont--inner .ImgBox img{display: block;position: absolute;top: 50%;left: 50%;width: 100%;transform: translate(-50%,-50%);} .nTable>table .td_cont--inner .ImgBox + .td_cont__tit{padding: 0 0 0 2rem;} .nTable>table .td_cont__tit{width: calc(100% - 12.6rem);color: #111111;} .td_commission--inner{font-size: 1.5rem;font-weight: 500;color: #f91254;} .td_commission--inner > p{display: flex;align-items: center;justify-content: center;margin: 0.7rem auto 0;padding:0.5rem 1rem;border: 1px solid #f91254;width: 100%;;max-width: 12rem;font-size: 1.4rem;font-weight: 600;color: #f91254 !important;text-align: center;border-radius: 2rem;} .nTable +.nTable{margin-top:40px;} .nTable.giftTable>table .td_cont--inner .ImgBox{width: 7.4rem;height: 5.9rem;} .nTable.giftTable>table .td_cont--inner .ImgBox + .td_cont__tit{padding: 0 0 0 1rem;} .nTable.giftTable>table .td_cont__tit{/*width: calc(100% - 7.4rem);*/ width: 100%;} .nTable.giftTable>table th, .nTable.giftTable>table td{ padding: 2rem 1rem;} .nTable.giftTable.onlineTable>table th, .nTable.giftTable.onlineTable>table td {padding: 1rem;} .nTable.onlineTable {margin-top: 0;} .td_resend:hover img {animation: rotate_image 3s linear infinite;transform-origin: 50% 50%;} .td_resend:hover a{color: #f91354;} @keyframes rotate_image{ 100% { transform: rotate(360deg); } } /* 테이블 넓기 */ .th_invoice{width: 14rem;} .th_tracking{width: 14rem;} .th_exchange{width: 14rem;} .th_gift{width: 12rem;} .th_pinNumberDay{width: 15rem;} .th_orderNumber{width: 13rem;} .th_method{width: 10rem;} .th_resend{width: 10rem;} .th_cancel{width:12rem} .th_pinNumber{width: 11rem;} .th_orderDay{width: 10rem;} .th_price{width: 17rem;} .th_commission{width: 16rem;} .th_total{width: 14rem;} .th_delivery{width: 15rem;} .td_pc{display: block;} .td_mobile{display: none;text-align: left;} .subTxt--etc{margin: 1.5rem 0 0 0;font-size: 1.6rem;color:#f91c12;} .paymentDetail{display: flex;gap: 2rem;justify-content: space-between;margin: 8rem 0 0 0;} .innerDetail{width: 100%;max-width: 55rem;} .detailCont{padding: 2rem 2rem 3rem;border-top: 0.2rem solid #111111;border-bottom: 0.1rem solid #e6e6e6;border-right: 0.1rem solid #e6e6e6;border-left: 0.1rem solid #e6e6e6;} .detailCont.st{padding: 3rem 0; border:0; border-bottom:1px solid #e6e6e6;} .detailCont.st.line{border-bottom:0;} .detailCont.st.pd_st .lineBox + .lineBox{border-top:0;} .detailCont.st.pd_st .lineBox{ padding: .3rem 0;min-height: auto;} /* 20230523 스타일 추가 */ .card_con {display: none;} .card_con.on {display: block;} .card_con .method {margin-bottom: 12px;} .radio_box { display: flex; gap: 19px; align-items: center; margin-bottom: 20px; width: 100%;clear: both;} .radio_box input[type='radio'] { margin: 0 6px 0 0; border: 1px solid #E8E8E8; position: relative;width: 20px; height: 20px; cursor: pointer; border-radius: 20px;} .radio_box input[type='radio']::after { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; background: #c1c1c1; content: ''; transform: translate(-50%, -50%); border-radius: 10px;} .radio_box input[type='radio']:checked {border: 1px solid #FF7200;} .radio_box input[type='radio']:checked::after {background: #FF7200;} .radio_box label { margin: 0;font-size: 15px; color: #222; cursor: pointer;} .card_con .pop_itx01 { margin-bottom: 15px;font-size: 15px; font-weight: 400; color: #222;} .card_con .card_mail {display: none;} .lineBox{display: flex;align-items: center;padding: 1rem 0;min-height:5.8rem;} .lineBox_r {position: relative;} .lineBox2{ margin-top:1em;padding: 0;min-height: inherit;} .lineTit{width: 12rem;font-size: 1.6rem;font-weight: 400;color: #111111;} .lineTit.bold{font-weight: 600;} .lineBox + .lineBox{border-top: 1px solid #eeeeee;} .lineBox2 + .lineBox2{border-top: 0} .lineBox input{padding: 0 1rem;border: 1px solid #e6e6e6;width: calc(100% - 11rem);height: 4.4rem;background-color: #f8f8f8;font-size: 1.6rem;color: #111111;} .buyComplete .DetailBox + .DetailBox{margin: 3rem 0 0 0;} .detailCont.st .btnTotal input + div{align-content: center; flex-wrap: wrap;border: 0.2rem solid #e6e6e6; box-shadow: none; height: 12rem;} .detailCont.st .btnTotalHe input + div {height: 15.5rem;} .detailCont.st .btnTotal .payment_icon{flex: 100%;} .detailCont.st .btnTotal .t1{flex:100%; margin-top:5px; color:#999;} .detailCont.noml .btnTotal .t1 {font-size: 14px;} .detailCont.st .btnTotal.on input + div{border: 0.2rem solid #ff7200; background: #fef8f7;} .detailCont.st .btnTotal.on .t1{flex:100%; color:#ff7200;} .detailCont.st .btnTotal:hover input + div{border: 0.2rem solid #ff7200; background: #fef8f7;} .detailCont.st .btnTotal:hover .t1{flex:100%; color:#ff7200;} .detailCont.st .btnTotal p.evn_t {font-size: 14px; color: #999;} .detailCont.st .btnTotal p.evn_t01 {font-size: 18px;} .detailCont.st .btnTotal p .event_txt2 {display: inline-block; } .detailCont.st .btnTotal p .col_o {color:#ff7200;} .Serv_box{ margin-top: 2.5em; padding-top: 2.5em;border-top: 1px solid #ddd;} .Serv_box .checkIn{margin-bottom:10px;} /* 주소찾기 */ .jusoArea{display: flex;flex-wrap: wrap;width:calc(100% - 11rem)} .jusoArea .jusoArea__input01{width: calc(100% - 10rem - 1rem);} .jusoArea .jusoArea__input02{margin: 1rem 0 0 0;width: 100%;} .jusoArea .jusoArea__button{margin: 0 0 0 1rem;width: 10rem;background-color: #666666;font-size: 1.6rem;color: #fff;} .completeTop{text-align: center;} .completeImg{display: block;margin: 0 auto;} .completeTit{display: block;margin: 0 0 1rem 0;font-size: 3rem;font-weight: 700;color: #ff7200;} .completeTxt{font-size: 1.8rem;color:#111111} .completeBottom{margin: 4.5rem 0 0 0;padding: 3.5rem 2rem;background-color: #f5f5f5;} .buyComplete{margin:3rem 0 0 0;} .lineTxt{font-size: 1.6rem;color: #111;} .lineTxt span{margin: 0 0 0 0.5rem;font-size: 1.8rem;font-weight: 500;} .moneyTxt{font-size: 2.2rem;font-weight: 600;color: #111111;} .moneyTxt .lineTxt{font-family: 'NanumSquareRound';} .discount .lineTxt{font-size: 2.2rem;font-weight: 600;} .payMentType{display: flex;gap: 0.5rem;align-items: center;flex-wrap: wrap;} .payMentType--items{padding: 0.4rem 1.5rem;background-color:#ff7200;font-size: 1.4rem;font-weight: 500;color: #fff;border-radius: 1.4rem;} .tabDepth{ margin-bottom:35px; overflow:hidden;width:100%; font-size:0; line-height:0; text-align: center; box-sizing: border-box;} .tabDepth>a{ display:inline-block; border:1px solid #e2e2e2;width:19rem; height:46px; vertical-align: top; background-color: #fdfdfd; font-size:18px; line-height:1.2; color: #737373; box-sizing: border-box;} .tabDepth>a+a{margin-left:-1px;} .tabDepth>a>span{display:inline-block; position: relative; top:50%;-webkit-transform: translateY(-50%); transform: translateY(-50%);} .tabDepth>a:hover,.tabDepth>a.active{ border-color:#1b54aa; z-index:2;background-color: #1b54aa; color: #fff;} .depth3{ margin-bottom:70px; overflow:hidden; position: relative;width:100%; font-size:0; line-height:0; text-align: center; box-sizing: border-box;} .depth3:before{ display: inline-block; position:absolute; top:50%; left: 0; width: 100%; height: 1px; background-color: #b0b0b0;content: "";} .depth3>a{ display:inline-block; border:1px solid #0c3879; position: relative; z-index:2;width:260px; height:54px; min-height:5.4rem; vertical-align: top; background-color: #1952a7; font-size:19px; line-height:1.2; color: #fff; box-sizing: border-box;} .depth3>a+a{margin-left:-1px;} .depth3>a>span{display:inline-block; position: relative; top:50%; word-break:keep-all; word-wrap:break-word;-webkit-transform: translateY(-50%); transform: translateY(-50%);} .depth3>a>span:before{ display: inline-block; margin-top:0.2rem; position: relative; left:-3.1rem; width: 0; height:2.1rem; vertical-align: top; background:url("../img/bul_d3.png") no-repeat left top; background-size: 2.1rem;content: ""; opacity: 0;} .depth3>a:hover,.depth3>a.active{ border-color:#0086cb; z-index:3;background-color: #0091db;} .depth3>a:hover>span:before,.depth3>a.active>span:before{ left:0rem;width: 3.1rem; opacity: 1;} .lastDepth{ display: flex; justify-content: space-between; margin-bottom:50px; overflow:hidden;width:100%; font-size:0; line-height:0; text-align: center; box-sizing: border-box; } .lastDepth>a{ display:inline-block; border:1px solid #d3d3d3;width:100%; height:60px; vertical-align: top; background-color: #fff; font-size:18px; line-height:1.2; color: #666; box-sizing: border-box;} .lastDepth>a+a{margin-left:-1px;} .lastDepth>a>span{display:inline-block; position: relative; top:50%;-webkit-transform: translateY(-50%); transform: translateY(-50%);} .lastDepth>a:hover,.lastDepth>a.active{ border-color:#f192a6; z-index:2;background-color: #f192a6; color: #fff;} .lastDepthConts{ display:none; overflow:hidden;font-size:0; line-height:0;} .groupTit{padding-bottom:3.5rem;} .groupTit .step{padding-bottom:1rem; font-size:2.2rem; font-weight: bold; line-height:1; color: #23abaf;} h4.txt{ font-size:2.6rem;font-weight: bold; line-height:1; color: #1b1b1b;} .nTxt{padding-top:2.5rem; font-size:1.7rem; line-height:2.6rem; color: #888;} .bul{padding: 0 0 0 1rem;position: relative;font-size: 1.6rem;color: #666;} .bul01{padding: 0 0 0 1rem;position: relative;font-size: 1.6rem;color: #666;} .bul01::before{position: absolute;top: 1.1rem;left: 0;width: 0.2rem;height:0.2rem;background-color: #747474;content:"";} .bul01 + .bul01{margin: 0.5rem 0 0 0;} .f0{font-size:0; line-height:0; text-align: center;} .scrollTb{display:inline-block; font-size:0; line-height:0; } .scrollTb img{max-width:none;} .nTable.scrollTb{padding-bottom:2rem;} .scroll_info{ display:none; padding:2rem 0; position: relative;width:100%; font-size:0; line-height:0;} .scroll_info:before{ display:inline-block; margin-top:-1rem; position: absolute; top:50%; left:44%; font-size:2rem; line-height:1; color: #ff0000; animation-name: scrollMove; animation-duration: 1s; animation-timing-function:ease-In-Out; animation-iteration-count:infinite;animation-direction:alternate;content:"← scroll →";} @keyframes scrollMove { from { left:42%;color: #ff0000;} to { left:46%;color: #006cb7;} } /*[s] Main Style */ .mScrolls{ display:none; position: fixed; bottom:40px; left:0; z-index:8;width:100%; font-size:0; line-height:0; text-align: center; animation-name: scrollDown;animation-duration: .7s; animation-timing-function:ease-in-out; animation-iteration-count:infinite; animation-direction:alternate;} @keyframes scrollDown { from {bottom:50px; opacity:1;} to {bottom:30px; opacity:0.5} } .mTitle{margin-bottom:7rem; color: #fff; text-align: center;} .mTitle>dt{margin-bottom:3.5rem; padding-bottom:4rem; background: url("../img/line_white.png") no-repeat center bottom; background-size: 7.8rem; font-family:"S-CoreDream-9Black"; font-size:4.8rem; line-height:1;} .mTitle>dd{font-family: 'S-CoreDream-4Regular'; font-size:2rem; line-height:1.6;} .mTitle.black{color: #111;} .mTitle.black>dt{background-image: url("../img/line_black.png");} #mainMotion{ overflow:hidden; position: relative;font-size:0; line-height:0;} #mainMotion .mainMotion_in{ position: absolute; top:-25%; left:17%;transform:rotate(-43deg);} #mainMotion .gift-logo{position: relative;} #mainMotion .gift-money + .gift-logo{margin-top:6.796%; left:31%;} #mainMotion .gift-money{ margin-top:7rem; position: relative;height:25.2427%; max-height:26rem; white-space: nowrap; will-change: transform;} #mainMotion .gift-money img{ margin:0 7rem 0 0;height:26rem;} #mainMotion .gift-money.one{left:-13%;} #mainMotion .gift-money.three{left:-48%;} #mainMotion .gift-text{ display:inline-block;margin:-1rem 7rem 0 0; vertical-align: top;} #mainMotion .gift-text>dt{ font-size:5rem;font-weight: bold; line-height:1.4; color: #000;} #mainMotion .gift-text>dd{padding-top:2rem; font-size:1.8rem; font-weight: 400; line-height:1.6; color: #666;} #mainMotion .gift-text>dd>strong{ display:block;padding-bottom:0.5rem; font-size:2.2rem; font-weight: bold; line-height:1.6; color: #000;} #mainMotion .gift-text>dd>strong.btm{padding:2rem 0 0; font-weight: 500;} /* visual */ #main-visual .main-slider .slick-slide{position: relative; -webkit-backface-visibility: hidden; backface-visibility: hidden;} #main-visual .main-slider video { display: block; position: absolute; top: 50%; left: 50%;width: auto; min-width: 100%; height: auto; min-height: 100%; transform:translate(-50%, -50%);} #main-visual .main-slider iframe {position: relative; pointer-events: none;} #main-visual .main-slider figure { margin:0; position: relative;height: 100%;} #main-visual .main-slider .slide-image {height: 100%; background-position: center; background-size: cover; transition:all .8s ease; opacity: 0;} #main-visual .main-slider .slide-image{opacity: 1;} #main-visual .main-slider .image-entity {width: 100%; visibility: hidden; opacity: 0;} #main-visual .main-slider .loading { position: absolute; top: 44%; left: 0;width: 100%;} #main-visual .main-slider .slide-media {background-repeat: no-repeat; background-position: center center; background-size: cover; animation:slideOut .4s cubic-bezier(0.4, 0.29, 0.01, 1);} #main-visual .main-slider .caption{ margin: 0; padding: 2rem;position: absolute; top: 50%; left: 50%; z-index: 1; width: 100%; color: #fff; text-align: center; transition:all .3s ease; transform: translate(-50%,-65%); opacity: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden;} #main-visual .main-slider .caption .main_txt {padding-top: 300px;} #main-visual .main-slider .caption b { font-size: 5rem; font-weight: bold;line-height: 6rem; line-height: 1.2; letter-spacing: -0.5rem;} #main-visual .main-slider .caption b span {font-weight: 400;} #main-visual .main-slider .caption b span.st { font-size: 1.375em;font-weight: bold;} #main-visual .main-slider .caption p { margin: 3rem 0 6rem; font-size: 2.2rem; font-weight: 500;line-height: 3rem; color:#fff;} #main-visual .main-slider .slick-active{z-index: 1;} #main-visual .main-slider .slick-active .slide-media{animation:slideIn 2.4s cubic-bezier(0.4, 0.29, 0.01, 1);} #main-visual .main-slider .slick-active .caption{ transition:all .7s cubic-bezier(0.32, 0.34, 0, 1.62) .6s;opacity: 1;} #main-visual .slick-arrow{ border:none; position: absolute; top:50%; z-index:7;width:47px; height:90px; background-color: transparent; background-repeat: no-repeat; background-position: center center; background-size: cover; font-size:0; line-height:0; cursor: pointer; transform: translateY(-50%);} #main-visual .slick-arrow:hover{opacity:1;} #main-visual .controll{ display: flex; align-items: center; justify-content: space-between; flex-direction: row; margin-left:-130px; padding-top:0; position: absolute; bottom: 5rem; left: 50%;width:260px;} #main-visual .controll .dot{display:inline-block; vertical-align: middle;} #main-visual .controll .auto{display:inline-block; vertical-align: middle;} #main-visual .controll .auto{padding-left:10px;} #main-visual .slick-dots{display:flex; justify-content: flex-start; flex-wrap: nowrap;} #main-visual .slick-dots>li{ display:inline-block; padding:0 !important;width:auto !important; vertical-align: top;} #main-visual .slick-dots>li+li{margin-left:0;} #main-visual .dot_Line,#main-visual .dot_Line>dt, #main-visual .dot_Line>dd .line{transition: all .3s ease-out; transform-origin: 50% 50%;} #main-visual .dot_Line{padding-right:10px; position: relative; box-sizing: border-box;} #main-visual .dot_Line>dt{ font-size:15px;font-weight: 500; line-height:1; color: rgba(255,255,255,0.3); white-space: nowrap;} #main-visual .dot_Line>dd{position: absolute; top:50%; right:10px; left:27px;} #main-visual .dot_Line>dd .line{ display:inline-block; overflow:hidden; position: relative;width:100%; height:2px; vertical-align: middle; background-color: rgba(255,255,255,0.3);} #main-visual .dot_Line>dd .line>span{ display:inline-block; position: absolute; top:0; left:-100%;width:100%; height:2px; background-color: rgba(255,255,255,1);} #main-visual .slick-dots>li.slick-active .dot_Line{padding-right:120px;} #main-visual .slick-dots>li.slick-active .dot_Line>dt{color: rgba(255,255,255,1);} #main-visual .slick-dots>li.slick-active .dot_Line>dd .line{width:100%;} @keyframes slideIn { from { filter:blur(15px); } to { filter:blur(0); } } @keyframes slideOut { from { filter:blur(0); } to { filter:blur(15px); } } /* visual */ #mVisual{ overflow:hidden; position: relative;width:100%; font-size:0; line-height:0;} #mVisual .visualRoll{white-space: nowrap;} #mVisual .visualRoll .slider{ display:inline-block; overflow:hidden; position: relative;width:100%; vertical-align: top; background-repeat: no-repeat; background-position: center center; background-size: cover; font-size:0; line-height:0;} #mVisual .visualRoll .slider img{width:100%; max-width:none; height:100vh; max-height:80rem; object-fit: cover;} #mVisual .vTxtArea{ display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; flex-direction: row; position: absolute; top:0; left:50%; z-index:5;width:100%; max-width:1400px; height:100%; text-align: left; transform: translateX(-50%); box-sizing: border-box;} #mVisual .vTxtArea .vTxt_in{ padding-bottom:15rem; position: relative;width:100%;} #mVisual .vTxt{ position: absolute; top:-999px; left:0;width:100%;} #mVisual .vTxt .ii{ display:block; position: relative;top:50px; text-align: center; word-break:keep-all; word-wrap:break-word; opacity: 0;} #mVisual .vTxt .i01{-webkit-transition-delay: .4s; transition-delay: .4s;} #mVisual .vTxt .i02{-webkit-transition-delay: .45s; transition-delay: .45s;} #mVisual .vTxt .i03{-webkit-transition-delay: .5s; transition-delay: .5s;} #mVisual .vTxt .i04{-webkit-transition-delay: .55s; transition-delay: .55s;} #mVisual .vTxt .i05{-webkit-transition-delay: .6s; transition-delay: .6s;} #mVisual .vTxt .i06{-webkit-transition-delay: .65s; transition-delay: .65s;} #mVisual .vTxt .i07{-webkit-transition-delay: .7s; transition-delay: .7s;} #mVisual .vTxt .ii.logo.i01 img{height:16.4rem;} #mVisual .vTxt .ii.logo.i02{margin-top:2rem;} #mVisual .vTxt .ii.logo.i02 img{height:4.7rem;} #mVisual .vTxt .ii.tit{ font-size:6.8rem;font-weight: bold; line-height:1; color: #f8f8f8; text-shadow:0 0 10px rgba(0,0,0,0.5);} #mVisual .vTxt .ii.txt{padding-top:3rem; font-family: 'S-CoreDream-3Light'; font-size:2rem; line-height:1.7; color: rgba(255,255,255,1);} #mVisual .vTxt.active{position: static; top:0px;} #mVisual .vTxt.active .ii{top:0px; opacity:1;} #mVisual .slick-dots{ display:none !important; position: absolute; bottom:4rem; left:0; z-index:7;width:100%; text-align: center;} #mVisual .slick-dots>li{display:inline-block; vertical-align: top;} #mVisual .slick-dots>li+li{margin-left:1.5rem;} #mVisual .slick-dots>li button{ margin:0; padding:0; border:none;width:2rem !important; height:2rem; background-color:#cdcdcc; font-size:0; line-height:0; cursor: pointer; box-sizing: border-box; border-radius:99px;} #mVisual .slick-dots>li.slick-active button{background-color:#7cb741; } /* 공통 */ .mTit{position: relative;z-index: 3;} .contFlex{display: flex; align-items: center;justify-content: flex-start;height: 100vh;} /* easy to use */ .mEasy{position: relative;background:url("../img/images/main/img_easyBg.jpg");background-size: cover;} .mEasy .swiper-wrapper{min-width: 0} .mTit--etc{margin: 0 0 4rem 0;padding: 0 0 2rem 0;position:relative; font-family: 'Poppins';font-size: 1.6rem;font-weight:700;color:#222;letter-spacing: 0 !important;} .mTit--etc::before{display: block;position: absolute;bottom: 0;left: 0;width:3.3rem;height: 0.2rem;background-color: #000000;content:"";} .mTit__tit{font-size: 4.5rem;line-height: 1.2;color:#222;} .mTit__tit strong{color:#111;} .mTit__tit span{font-weight: 400;} .mTit__tit .point{color:#f91254;} .mTit__txt{margin: 3.5rem 0 0 0;font-size: 1.8rem;font-weight: 500;color:#222;} .easySlide {background-color: #fff;border-radius: 5rem 0 5rem 0;} .easySlide.swiper{margin: 5rem 0 0 0;margin-left: 0;box-shadow: 1rem 1.5rem 2rem rgb(0 0 0 / 20%);width: 100%;max-width: 50rem;} .easySlideInner{display: flex;align-items: flex-start;align-items: center;justify-content: space-between;margin: 0 auto;max-width: 39rem;height: 22rem !important;} .easytxtBox__tit{margin: 0 0 1rem 0;font-size: 2rem;font-weight: 600;color:#222222;} .easytxtList--items{font-size: 1.6rem;color:#666666;} .easyimgBox{margin: 0 2rem 0 0rem;max-width:11rem;} .easytxtBox{width: calc(100% - 11rem - 2rem);} .easySlide .swiper-button-prev, .easySlide .swiper-button-next{width:3.3rem;height:3.3rem;} .easySlide .swiper-button-prev{left: 2rem;background: url("../img/images/main/img_easyArrowPrev.png")center no-repeat;filter: grayscale(1);opacity: 0.7;} .easySlide .swiper-button-next{right: 2rem;background: url("../img/images/main/img_easyArrowNext.png")center no-repeat;filter: grayscale(1);opacity: 0.7;} .easySlide .swiper-button-prev:hover, .easySlide .swiper-button-next:hover{filter: none;opacity: 1;} .easySlide .swiper-button-prev:after, .easySlide .swiper-button-next:after{display:none;} .giftCardArea{position: absolute;top: 0;right: 0;width: 120rem;height: 100%;/* height: 60rem; */} .giftCardArea > img{position: absolute;} .giftCardArea > img.giftCardMiddle{/* right: -44rem; */transform: translate(28rem, 16.5rem);} .giftCardArea > img.giftCardBottom{ transform: translate(58rem, 35.9rem);} .mPr{position: relative;background:url("../img/images/main/img_prBg.jpg");background-size: cover;} .mPr .btnMore{margin: 12rem 0 0 0;} .mBoard{display: flex;} .mBoardLink{display: flex;align-items: center;justify-content: center;flex-direction: column;width: calc((100%)/3);height: 300px;} .mBoardLink.news{background-color: #f0f0f0;} .mBoardLink.faq{background-color: #ff7200;} .mBoardLink.customer{background-color: #f5b833;} .mBoardLink.faq .mBoardLink__etc, .mBoardLink.faq .mBoardTxt__txt, .mBoardLink.faq .mBoardTxt, .mBoardLink.customer .mBoardLink__etc, .mBoardLink.customer .mBoardTxt__txt, .mBoardLink.customer .mBoardTxt{color: #fff;} .mBoardLink.faq .mBoardLink__etc::before, .mBoardLink.customer .mBoardLink__etc::before{background-color: #fff;} .mBoardInner{padding: 0 2rem;width: 100%;max-width: 53rem;} .mBoardLink__etc{margin: 0 0 3.75rem 0;padding: 0 0 2rem 0;position:relative;font-family: 'Poppins';font-size: 1.8rem;font-weight:700;color:#000000;} .mBoardLink__etc::before{display: block;position: absolute;bottom: 0;left: 0;width:3.3rem;height: 0.2rem;background-color: #000000;content:"";} .mBoardLink__etc .o_new_icon .xi{ margin-left:3px; vertical-align: text-bottom;font-size:1.375em; color: #f41159;} .mBoardTxt{display: flex;justify-content: space-between;font-size: 1.8rem;color: #666666;} .mBoardTxt__txt{font-weight: 500;color: #666666;} .mBoardTxt__txt > b{font-size: 3.5rem;font-weight: 800;color: #fff;} /*dao_App*/ .dao_App{position: relative;background:url("../img/images/main/dao_App_bg.jpg");background-size: cover;} .dao_Agree{position: relative;background:url("../img/images/main/dao_Agree_bg.jpg");background-size: cover;} .dao_Main_btn{margin-top:5.5rem;} .dao_Main_btn a{ display:inline-block; margin-right:10px; padding:0 52px; min-width: 220px; height: 60px; background-color:#000; font-size: 1.8rem; font-weight: 500; line-height: 60px; color:#fff; text-align: center; border-radius: 50px;} .dao_Agree .dao_Agree_img {flex:50%;} .dao_Agree .mTit{flex:50%;} .dao_Agree .dao_Main_btn a{background-color:#222;} .dao_Agree .mTit--etc{ font-family: 'Noto Sans KR';font-size: 2rem} .dao_Agree .in_Agree > li a{display:block; margin:0 auto; margin-right:20px; border:1px solid #e6e6e6; box-shadow: 10px 10px 30px rgb(0 0 0 / 20%); overflow: hidden; width:300px; background: #fff; border-radius: 30px;} .dao_Agree .in_Agree > li a .ag_img{height: 200px; background-position: center;background-size: cover;} .dao_Agree .in_Agree > li a .ag_img.st1{background:url("../img/images/main/dao_Agree_img01.jpg");} .dao_Agree .in_Agree > li a .ag_img.st2{background:url("../img/images/main/dao_Agree_img02.jpg");} .dao_Agree .in_Agree > li a .ag_tt{ padding:20px 0; font-size: 2rem; font-weight: 700; color: #222;text-align: center;} /* 리뉴얼 visual 20231030*/ .moBr{display: none;} #main-visual{ padding: 6.4rem 0; position: relative;width:100%;} #main-visual .mainWrap {display: flex; gap: 3rem; align-items: center; justify-content: center; margin: 0 auto; width: 100%;} #main-visual .mainWrap .textBox { margin-left: 3.5rem;width: 50%; max-width: 609px;} #main-visual .mainWrap .textBox h1{font-size:5.6rem; font-weight: 700; line-height: 89.6px; color: #000; letter-spacing: -1.96px;} #main-visual .mainWrap .textBox p{margin: 3.2rem 0 6.4rem; font-size:2.4rem; font-weight: 400; color: #666; letter-spacing: -1.2px;} #main-visual .mainWrap .textBox .btnBox {display: flex; gap: 2.4rem; align-items: center;} #main-visual .mainWrap .textBox .btnBox a {display: flex; align-items: center;justify-content: center; padding-bottom: 2px; border: 1px solid #ff7200; width: 100%; max-width: 164px; height: 56px; font-size: 1.8rem; font-weight: 500; line-height: normal; color: #ff7200; border-radius: 100px;} #main-visual .mainWrap .textBox .btnBox a:hover { background: #ff7200;color: #fff; transition: all 0.3s;} #main-visual .mainWrap .imgBox {width: 50%; max-width: 830px;} #main-visual .mainWrap .imgBox img {width: 100%; height: 100%;} /* main 섹션 공통 */ .sec {padding: 11rem 0 12rem;} .sec .secTitle {font-size: 4rem; font-weight: 700; color: #000; letter-spacing: -1.4px;} .sec .secWrap { margin: 0 auto; padding: 0 12rem;width: 100%; max-width: 1440px;} .sec .secWrap .secContent {margin-top: 6.4rem;} .sec .secWrap .secContent .textBox strong {display: block; font-size: 24px; font-weight: 500; line-height: normal; color: #000;} .sec .secWrap .secContent .textBox strong span {color: #FF7200;} .sec .secWrap .secContent .textBox p{font-size: 18px; font-weight: 400; line-height: 27px; color: #666;} .sec03 .secWrap .secContent ul li .iconBox img, .sec05 .secWrap .secContent .iconBox img {width: 100%; height: 100%;} /* 가장 인기있는 상품을 추천 */ .sec02 .secWrap .secContent ul{display: flex; gap: 4rem; align-items: center; justify-content: flex-start; flex-wrap: wrap;} .sec02 .secWrap .secContent ul li { border: 1px solid transparent; box-shadow: 0 3px 20px rgba(0,0,0,0.08);position: relative; width: calc((100% - 16rem) / 5); height: 20.8rem; border-radius: 16px;} .sec02 .secWrap .secContent ul li:hover {border: 1px solid #ff7200; transition: all 0.3s;} .sec02 .secWrap .secContent ul li a {display: flex; align-items: center; justify-content: center; padding: 2.4rem; width: 100%; height: 100%;} .sec02 .secWrap .secContent ul li:hover a::after { position: absolute; top: 1rem; right: 1rem; width: 3.2rem; height: 3.2rem; background: url('/img/main/linkArrow.svg') no-repeat center center; transition: all 0.3s;content: '';} /* 서비스 이용에 도움이 필요하신가요? */ .sec03 {padding: 40px 0 120px;} .sec03 .secWrap .secContent ul{display: flex; gap: 24px; align-items: center; justify-content: flex-start; flex-wrap: wrap;} .sec03 .secWrap .secContent ul li { box-shadow: 0 3px 20px rgba(0,0,0,0.08);position: relative; width: calc((100% - 48px) / 3); border-radius: 16px;} .sec03 .secWrap .secContent ul li .iconBox {position: absolute; top: 20px; right: 24px;} .sec03 .secWrap .secContent ul li a{ display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 64px 40px; width: 100%; height: 100%;} .sec03 .secWrap .secContent ul li a .textBox {text-align: center;} .sec03 .secWrap .secContent ul li a .textBox strong{ margin:40px 0 16px;} /* main 중간 베너 */ .sec04 {padding: 0;} .sec04 .swiper-slide .slideBg{padding: 120px 0 136px;} .sec04 .swiper-slide .slideBg01{background: #FFF3E8;} .sec04 .swiper-slide .slideBg02{background: #F2F6FA;} .sec04 .swiper-slide .slideBg .secWrap {display: flex; align-items: center; justify-content: space-between;} .sec04 .swiper-slide .slideBg .secWrap .textBox p{ margin-bottom: 32px;font-size: 24px; font-weight: 400; color: #000;} .sec04 .swiper-slide .slideBg .secWrap .textBox h2{font-size: 40px; font-weight: 700; line-height: 64px; color: #000;} .sec04 .swiper-slide .slideBg .secWrap .textBox h2 span{font-size: 40px; font-weight: 700; color: #FF7200;} .sec04 .swiper-slide .slideBg .secWrap .imgBox {height: 284px;} .sec04 .swiper-slide .slideBg .secWrap .imgBox img{height: 100%;} .sec04 .swiper-pagination { display: flex; justify-content: space-between; bottom: 64px;left: 50%; width: 60px; transform: translateX(-50%);} .sec04 .swiper-pagination .swiper-pagination-bullet { margin: 0;width: 12px; height: 12px; background: #999; transition: all 1s; opacity: 1;} .sec04 .swiper-pagination .swiper-pagination-bullet-active {width: 36px; background: #FF7200; transition: all 1s; border-radius: 12px;} /* main 고객센터 */ .sec05 .secWrap .secContent {display: flex; gap: 24px; align-items: center; justify-content: center; margin-top: 0; height: 421px;} .sec05 .secWrap .secContent .iconBox{position: absolute; top: 20px; right: 24px;} .sec05 .secWrap .secContent .leftBox {width: 50%; height: 100%;} .sec05 .secWrap .secContent .leftBox .box{ box-shadow: 0 3px 20px rgba(0,0,0,0.08);position: relative; border-radius: 16px;} .sec05 .secWrap .secContent .leftBox .box.qna {margin-bottom: 24px;} .sec05 .secWrap .secContent .leftBox .box.qna a{display: flex; gap: 48px; align-items: center; justify-content: flex-start; padding: 48px; } .sec05 .secWrap .secContent .leftBox .box.customerCenter {display: flex; gap: 48px; align-items: center; justify-content: flex-start; padding: 48px; } .sec05 .secWrap .secContent .textBox strong {margin-bottom: 1.6rem;} .sec05 .secWrap .secContent .rightBox { padding: 0 5.6rem 5.6rem; box-shadow: 0 3px 20px rgba(0,0,0,0.08);position: relative; width: 50%; height: 100%; border-radius: 16px;} .sec05 .secWrap .secContent .rightBox .notice { overflow: hidden;height: 100%;} .sec05 .secWrap .secContent .rightBox .notice .noticeTitle {display: block; padding: 4rem 0 3.2rem;} .sec05 .secWrap .secContent .rightBox .notice strong{display: block; font-size: 24px; font-weight: 500; line-height: normal; color: #000;} .sec05 .secWrap .secContent .rightBox .notice ul {padding-top: 3.2rem; border-top: 1px solid #FF7200;} .sec05 .secWrap .secContent .rightBox .notice ul li {margin-bottom: 24px; line-height: normal;} .sec05 .secWrap .secContent .rightBox .notice ul li:last-child {margin-bottom: 0;} .sec05 .secWrap .secContent .rightBox .notice ul li a {display: flex; gap: 2.4rem; align-items: center; justify-content: space-between;} .sec05 .secWrap .secContent .rightBox .notice ul li a p {font-size: 18px; font-weight: 400; color: #000;} #wrap * .sec05 .secWrap .secContent .rightBox .notice ul li a p {letter-spacing: -0.2px;} .sec05 .secWrap .secContent .rightBox .notice ul li a p.title{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} .sec05 .secWrap .secContent .rightBox .notice ul li a p.date {color: #666;} /*[e] Main Style */ /*[s] Sub Style */ .content{padding: 8rem 0 0 0;} .point{color: #ff7200 !important;} .subTit{margin: 0 0 2.5rem 0;} .subTit__tit{font-size: 3rem;font-weight: 700;color:#111111;} .subTit__tit span{color: #111111;} .subTit__tit b{font-size: 1.8rem;} .subTit__txt{margin: 1rem 0 0rem 0;font-size: 1.7rem;font-weight: 400;color:#111111;} .subTit__txt span{color: #f91254;} .subTit .checkIn{margin: 0 0 0 2rem;} .paymentChkall{display: none;} .btnDepth{display: flex;gap: 1rem;align-items: center;justify-content: center;} .btnDepth--items{width: 100%;max-width: 22rem;} .btnDepth--items a{display: flex;align-items: center;justify-content: center;width: 100%;height: 6rem;background-color: #999999;font-size: 1.8rem;color: #fff;border-radius: 3rem !important;} .btnDepth--items.active a, .btnDepth--items:hover a{/*background: linear-gradient( to right, #f91254, #f5b833 );*/ background: #ff7200;} .buy__btnList {display: flex; gap: 4rem ; align-items: flex-start; justify-content: center; text-align: center;} .buy__btnList li a { display: block;border: 1px solid #ddd; box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2); overflow: hidden; min-width: 300px; border-radius: 2rem;} .buy__btn__top { display: flex; align-items: center; justify-content: center; flex-direction: column;padding: 1.8rem 2rem 1.8rem; border-bottom: 1px solid #ddd; height: 104px; background: linear-gradient(90deg, #f2b531 0%, #fb7102 100%); font-size: 1.8rem; font-weight: 500; color: #fff!important;} .buy__btn__top.buy_btn_01{height: auto; } .buy__btn__top p {font-size: 15px; font-weight: 700; color: #fff; text-shadow: 0 0 3px rgba(0,0,0,0.25);} #wrap * .buy__btn__top p { line-height: 23px;letter-spacing: 0.2px;} #wrap * .buy__btn__top p.p_h {line-height: 45px;} .buy__btn__top p span.col_m{color: #C5FFE2;} .buy__btn__top p span.col_y{color: #FFF700;} .buy__btn__btm {padding: 3.5rem 0 2.6rem; font-size: 2.2rem; font-weight: 700; line-height: 2.4rem; color: #111111;} .buy__btn__btm span { display: block; margin-bottom: 7px;font-size: 1.8rem; font-weight: 500; color: #111111;} .buy__btn__btm .use_no{ margin-top: 5px;font-size: 16px; font-weight: 500; color: #ff7200;} .buy__tt{ margin-bottom:35px;font-size:2.5rem; font-weight: 700; color:#111;} .buy__inf{ margin-top:4rem;font-size:1.6rem; color:#666;} .buy__inf img{margin-right:8px;} .buy__txt { margin-bottom: 6rem;text-align: center;} .buy__txt01 {margin-bottom: 0;} .buy__txt02 {margin: 7rem 0 6rem;} .buy__txt strong {font-size: 4rem ; font-weight: 700; line-height: 6rem; color: #ff7200;} .buy__txt strong span { display: block;font-size: 4rem ; font-weight: 300; color: #111111;} .buy__txt p { margin-top: 2rem;font-size: 1.8rem; font-weight: 500; color: #666666;} .buy__btnList li .txt_box { margin-top: 38px;text-align: left;} .buy__btnList li .txt_box p {font-size: 15px; font-weight: 500; line-height: 21px; color: #666;} #wrap * .buy__btnList li .txt_box p {letter-spacing: 0;} #wrap * .buy__btnList li .txt_box.event02 p {letter-spacing: -0.15px;} #wrap * .buy__btnList li .txt_box.event02 p.lts {letter-spacing: 1px;} .buy__btnList li .txt_box p span {color: #ff7200;} #wrap * .buy__btnList li .txt_box p span {letter-spacing: -0.14px;} .buy__btnList li .txt_box p span.dash { color: #666;text-decoration: line-through;} .buy__slideWrap { padding: 6rem 0 7rem;background: #eeeeee;} .buy__slideTop { display: flex; gap:8rem; align-items: center; justify-content: flex-start; margin: 0 auto 3rem; width: 100%;max-width: 90rem;} .buy__slideTop strong { font-size: 3rem;font-weight: 700; color: #222222;} .buy__slideTop p { font-size: 2.5rem;font-weight: 300; color: #222222;} .buy__slideTop p span{font-weight: 700; } .buy__slideTxt { padding: 2rem 3rem 0 0;font-size: 1.8rem; font-weight: 400; color: #666666; } .popupModalVideo a { display: block; padding-bottom: 56.25%;position: relative; width: 100%;} .popupModalVideo a img {position: absolute; width: 100%; height: 100%;} .popupModalVideo a::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3);content: "";} .popupModalVideo a::after { position: absolute; top: 50%; left: 50%; width: 9rem; height: 9rem; background:url('/img/buy/buy__slidePlay.png') no-repeat center; background-size: contain;content: ""; transform: translate(-50%, -50%);} .video_modal_popup.reveal {display: flex;align-items: center;justify-content: center;position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 999} .video_modal_popup .video-wrapper {padding-bottom: 35.6%;position: relative;z-index: 10;width: 80%;max-width: 120rem;} .video_modal_popup .video-wrapper iframe { position: absolute; width: 100%; height: 100%; } .video_modal_popup.reveal .video_modal_popup-closer {position: fixed;top: 0;right: 0;bottom: 0;left: 0;background: rgba(0, 0, 0, .5);} /* 구매하기 */ /* 20230629 수정 */ .new_tit { display: block; margin-bottom: 8px;font-size: 30px; font-weight: 700; color: #111; text-align: center;} .buy__title { margin-bottom: 3rem; font-size: 18px; font-weight: 500; color: #222;text-align: center;} .buy__title span {color: #ff7200;} .buyContWrap .limite1200 {margin: 2rem auto 10rem;} .buyContWrap .limite1200mc {margin: 2rem auto 6rem;} .buyContWrap .buy__txt strong {line-height: 60px;} .buyCont__Bg {padding: 7rem 0; text-align: center; border-radius: 2rem 2rem 0 0;} .buyCont__Bg01{ padding: 7rem 0; height: 80rem; background: url('/img/buy/buyCont__Bg.png') no-repeat center center #f7f7f7; text-align: center; border-radius: 2rem 2rem 0 0;} .buyCont__txt b { display: block;margin-bottom: 1rem; font-size: 2.5rem; font-weight: 700; color: #111111;} .buyCont__txt strong {display: block; font-size: 5rem; font-weight: 700; color: #111111;} .buyCont__txt strong.new_tit { display: block; margin-bottom: 8px;font-size: 30px; font-weight: 700; color: #111; text-align: center;} .buyCont__txt img {margin: 1rem 0;} .buyCont__txt p { margin: 0.5rem 0 4rem;font-size: 1.8rem; font-weight: 400; color: #666666;} .buyCont__txt p.buy__title { margin-bottom: 3rem; font-size: 18px; font-weight: 500; color: #222;text-align: center;} .buyCont__btm {display: flex; justify-content: space-between; padding: 5rem 0; background: #fa961b; border-radius: 0 0 2rem 2rem;} .buyCont__btm__box { display: flex; gap: 3rem; align-items: center;flex: 1; padding-left: 12rem;} .buyCont__btm__box + .buyCont__btm__box {border-left: 1px solid #fff;} .buyCont__btm__txt b {font-size: 3rem; font-weight: 700; color: #fff;} .buyCont__btm__txt p {font-size: 2rem; font-weight: 400; color: #fff;} /* 20230629 추가, 20231103 리뉴얼 수정 */ .buy__btnList01 { gap: 6rem 4rem;flex-wrap: wrap;} .buy__btnList01 li a .buy__top__btm {padding: 36px 0 26px;} .buy__btnList01 li a .buy__btn__top {display: flex; align-items: center; justify-content: space-between; flex-direction: row; padding: 0 18px; height: 50px;} .buy__btnList01 li a .buy__btn__top span { font-size: 18px;font-weight: 500; } .buy__btnList01 li a .buy__btn__top span:nth-child(1) {font-size: 14px; line-height: 16px;} .buy__btnList01 .stk_con {top: -28px; left: 4px;} .buy__btnList01 .stk_con img {width: 100%; height: auto;} .buy_mobile_coupon .modalCont {padding: 2.5rem 2rem 2rem;} .buy_mobile_coupon .detailCont {text-align: left;} .buy_mobile_coupon .detailCont.st {padding: 3rem 0 3.2rem;} .buy_mobile_coupon .btnTotal.st {max-width: 100%;} .buy_mobile_coupon .btnTotal input + div{gap: 15px;} .buy_mobile_coupon .detailCont.st .btnTotal input + div {height: 10rem;} .buy_coupon .modal2 {text-align: left;} .gift_ck_pop .modal__inner {margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} .gift_ck_pop .modal__inner .modalCont {padding: 5.5rem 2rem 2rem;} .gift_ck_pop .writeArea { font-size: 16px;text-align: center;} /* 20230719 추가 */ .coupon_img { margin: 0 auto;width: 979px; height: 482px;} .buyListArea{margin: 6rem 0 15rem 0;} .buyList{display: flex;gap: 3rem;} .buyList--items{width: calc((100% - 6rem)/3);} .buyList--items .responsiveBox{padding-bottom: 78.95%;border-radius: 2.5rem;} .buyTxtBox{display: flex;align-items: center;justify-content: space-between;margin: 2rem 2.5rem 0;} .buyBanner.pd {margin: 12rem 0;} .buyBanner{background:url('/img/buy/img_buyBannerBg.jpg') center no-repeat;background-size: cover;} .buyBannerTit{font-size: 5rem;font-weight: 300;line-height: 1.2;color:#fff;} .buyBannerTit .st1{font-size:3.8rem;} .buyBannerTit .st2{ font-size: 4.2rem;font-weight:600;} .buyBannerTit i{ font-size: 5.5rem;font-style: normal;} .buyBannerTit b{font-weight:600;color:#ff7200;} .buyBannerTxt{margin: 0.8rem 0 0 0;font-size: 1.8rem;color: #fff;} .buyBannerBox{display: flex;align-items: center;width: 100%;} .buyBannerImg{width: 37rem;transform: translate(0,5rem);} .buyBannerInner{padding: 0 0 0 4rem;width: calc(100% - 37rem);} .buyBanner02.pd {margin: 12rem 0;} .buyBanner02.pd .limite1200{ padding:90px 0 70px;background-color:#f7f7f7; border-radius: 20px;} .buyBanner02.pd .buy__txt {margin-bottom:5rem;} .buyBanner02.pd .buy__txt i{font-style: normal;} .buyBanner02.pd .buy__txt i.f_st{font-size:5rem;} .buyBanner02.pd .buy__txt i.c_black{color:#111;} .buyBanner02.pd .buy__txt strong span{font-weight:400;} .buyBanner02.pd .BenefitsBanner02{margin: 0 auto 0; padding:40px 0; width:700px; max-width: 96%; background: #fff; border-radius: 20px;} .buyBanner02.pd .BenefitsBanner--items{display: flex; padding: 10px 70px; border-right:1px solid #e6e6e6;width: calc(100% / 2);} .buyBanner02.pd .BenefitsBanner--items:last-child{border-right:0;} .buyBanner02.pd .BenefitsBannerImgBox{width: 7rem;} .buyBanner02.pd .BenefitsBannerTxtBox{width: calc(100% - 7rem);} .buyBanner02.pd .BenefitsBanner__tit{font-size: 2rem;font-weight: 500;color: #111;} .buyBanner02.pd .BenefitsBanner__txt{font-size: 1.7rem;font-weight: 400; line-height: 1.3;color: #ff7200;} .buyBanner02.pd .BenefitsBanner__txt b{padding: 0 0.5rem 0 0;font-size: 3rem;} .BenefitsBanner{display: flex;margin: 5rem 0 0 0;} .BenefitsBanner--items{display: flex;width: calc((100%)/3);} .BenefitsBannerImgBox{width: 7rem;} .BenefitsBannerTxtBox{width: calc(100% - 7rem);} .BenefitsBanner__tit{font-size: 2.2rem;font-weight: 500;color: #fff;} .BenefitsBanner__txt{font-size: 1.8rem;font-weight: 400;color: #fff;} .BenefitsBanner__txt b{padding: 0 0.5rem 0 0;font-size: 3rem;} .productBox{display: flex;align-items: center;border-top: 0.2rem solid #f91254;border-bottom: 0.1rem solid #dddddd;min-height: 12rem;text-align: center;} .productBox__price{padding: 0 0 0 4rem;width: calc(100% - 14rem - 37rem);font-size: 3rem;font-weight: 600;color:#f91254;text-align: left;} .productBox__tit{width: 14rem;font-size: 2rem;font-weight: 600;color:#111111;} .productBox--buttonWrap{display: flex;gap: 1rem;align-items: center;justify-content: flex-end;width: 37rem;} .buy_payment_online .modal__inner{ background: #fff;} .buy_payment_online .modal__inner::before{ background: none;} .buy_payment_online .modalCont{border-radius: 0;} .buy_payment_online .modalCont__tit{ margin:0;text-align:left;} .buy_payment_online_st .modal__inner{ background: #fff;} .buy_payment_online_st .modal__inner::before{ background: none;} .buy_payment_online_st .modalCont{border-radius: 0;} .buy_payment_online_st .modalCont__tit{ margin:0;text-align:left;} /* 구매하기 디테일 */ .shadowStyle .buyList--items{border: 1px solid #cccccc;box-shadow: 0rem 1rem 2rem rgb(0 0 0 / 15%);overflow: hidden;border-radius: 2.5rem;} .shadowStyle .buyList--items .responsiveBox{border-radius: 0;} .shadowStyle .buyListDetail{padding: 3rem 2.5rem 2rem;background-color: #f8f8f8;} .shadowStyle .buyDetailName__price{color: #666666;} .buy_img_bg{height: 25rem; background-repeat: no-repeat; background-position: top center;} .buyDetail{display: flex;align-items: center;justify-content: space-between;height: 7rem;} .buyDetail.st{display: flex;align-items: center;justify-content: space-between; height: auto;} .buyDetail + .buyDetail{border-top: 1px solid #eeeeee;} .buyDetail.st + .buyDetail.st{border-top:0;} .buyDetail__tit{font-size: 1.6rem;font-weight: 500;color:#111111} .buyDetail__tit.st{font-size: 2.125rem;font-weight: 600;} .buyDetail__tit.st .wt{ margin-left: 3px;font-size: 1.8rem;font-weight: 400;} .buyDetailName__tit{font-size: 2rem;font-weight: 600;color: #111111;} .buyDetailName__price{font-size: 2.2rem;font-weight: 100;color: #f91254;letter-spacing: 0.09rem !important;} .buyDetailName__price span{margin: 0 0 0 0.5rem;font-size: 1.8rem;font-weight: 600;} .buyDetailCate p{display: inline-flex;align-items: center;justify-content: center;padding: 1rem 1.5rem;border: 1px solid #666666;font-size: 1.4rem;font-weight: 500;color: #666666;text-align: center;border-radius: 3rem;/* max-width: 12rem; */} .buyDetailAmount{display: flex;align-items: center;justify-content: space-between;} .amountInput{font-size: 1.6rem;color:#111111} .amountTen,.amountMinus,.amountInput,.amountPlus{display: flex;align-items: center;justify-content: center;border: 0.1rem solid #dddddd;width: 4rem;height: 4rem;text-align: center;} .amountMinus{position: relative;border-radius: 0.7rem 0 0 0.7rem;transform: translate(0.1rem,0);} .amountPlus{position: relative; background: #ff7200;border-radius: 0 0.7rem 0.7rem 0;transform: translate(-0.1rem,0);} .amountTen{margin: 0 0 0 0.5rem;border-color: #fdf4ed;width: 5rem;background: #fdf4ed;font-size: 1.6rem;font-weight: 400;color: #ff7200;border-radius:0.7rem;} .amountTen:hover,.amountMinus:hover,.amountPlus:hover{background-color:#ff7200} .amountMinus::before{margin: -0.5px 0 0 -5px;position: absolute;top: 50%;left: 50%;width: 10px;height: 1px;background-color: #999;content: "";} .amountPlus::before{margin: -0.5px 0 0 -5px;position: absolute;top: 50%;left: 50%;width: 10px;height: 1px;background-color: #fff;content: "";} .amountPlus::after{margin: -5px 0 0 -0.5px;position: absolute;top: 50%;left: 50%;width: 1px;height: 10px;background-color: #fff;content: "";} .amountTen:hover{color: #fff;} .amountMinus:hover::before,.amountPlus:hover::before,.amountPlus:hover::after{background-color:#fff;} .amountCount{display: flex;align-items: center;justify-content: space-between;} .section{margin: 0 0 8rem 0;} .subPost{padding: 10rem 0 0;} /* 보이스피싱 주의 */ .phishingCaution{padding: 8rem 5rem 7rem;background:url('../img/images/sub/img_phishingBg.jpg') center no-repeat;background-size: cover;} .phishing__tit{font-size: 5rem;font-weight: 700;color: #f91254;;} .phishing__txt{font-size: 1.8rem;font-weight: 500;color: #111111;} .phishing__txt span{color: #f91254;} .phishingBox{background-color: rgba(0,0,0,0.8);} .phishingBox{margin: 3rem 0 0 0;padding: 4rem;} .phishingBox__tit{margin: 0 0 1.5rem 0;font-size: 1.8rem;font-weight: 600;color: #fff;} .phishingTxtList--items{font-size: 1.6rem;font-weight: 300;color: #fff;} .phishingInfoArea{padding: 6rem 5rem 0;background-color:#f8f8f8} .phishingInfo{padding: 0 0 6rem 0;} .phishingInfo__tit{margin: 0 0 1.5rem 0;font-size: 1.8rem;font-weight: 700;color: #111111;} .phishingInfo__txt{font-size: 1.6rem;color: #555555;} .phishingInfo__txt + .phishingInfo__txt{margin: 2rem 0 0 0;} .paymentInfo{display: flex;border: 1px solid #ddd;} .paymentInfo__tit{display: flex;align-items: center;padding: 0 2.5rem 0;height: 8rem;font-size: 1.8rem;color: #fff;} .paymentInfo__tit img{margin: 0 2rem 0 0;} .paymentInfoBox .paymentInfo__tit p{color:#fff;} .paymentInfoBox{width: calc((100%)/2);} .paymentInfoBox + .paymentInfoBox{border-left: 1px solid #dddddd;} .paymentInfoBox.card .paymentInfo__tit{background-color: #f91254;} .paymentInfoBox.phone .paymentInfo__tit{background-color: #666666;} .paymentInfoTxtBox{padding: 4rem 2rem;} .paymentInfo__txt{font-size: 1.6rem;font-weight: 500;line-height: 1.8;color: #111111;} .paymentInfo__txt + .paymentInfo__txt{margin: 1rem 0 0 0;} .paymentInfoEtcBox{margin: 1.5rem 0 0 0;padding: 2rem;background-color: #f8f8f8;} .paymentInfoEtcBox__etc{font-size: 1.6rem;color:#555555} .whereUse{margin: 0;padding: 10rem 0;background-color: #f8f8f8;} .useTabList{display: flex;gap: 5rem;align-items: center;justify-content: center;padding: 3rem 0 0 0;} .useTab--items{text-align: center;cursor: pointer;} .useTabTxt{margin: 1rem 0 0 0;font-size: 1.8rem;font-weight: 500;color: #999999;} .useTab--items img{filter: grayscale(1);} .useTab--items.active .useTabTxt,.useTab--items:hover .useTabTxt{color: #f91254;} .useTab--items.active img,.useTab--items:hover img{filter: grayscale(0);} .mLogo__Img {max-width: 100%;max-height: 6rem;} .useLogoArea{margin: 4rem 0 0 0;} .mLogoBox-inner{display: flex;flex-wrap: wrap;position: relative;min-height: 15rem; transform: translate(0.5rem,0.5rem);} .mLogoBox--inner__piece{margin-bottom: -1px;margin-left: -1px;border:1px solid #e6e6e6;width: calc((100%)/4);height: 10rem;background-color: #fff;} .mLogoBox--inner__piece > a{display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;} .mLogoBox{display: none;} .mLogoBox.active{display: block;} .phishingLink{border-bottom: 1px solid #999999;font-size: 1.6rem;font-weight: 200;} .phishingLink img{margin: 0 0 0 1rem;} /* 토탈결제 */ .totalArea{background-color: #f91254;} .total__tit{font-size: 2rem;font-weight: 500;color: #fff;} .total__txt{font-size: 3rem;font-weight: 600;color: #fff;} .total__txt span{font-size: 1.8rem;} .totalLine{display: flex;align-items: center;justify-content: space-between;padding: 2rem 2rem 2rem;;} .totalLine span{font-weight: 400;} .DetailBox + .DetailBox{margin: 10rem 0 0 0;} .totalBtnWrap .tri{ margin: 0 0 0 1rem;border-top: 0.6rem solid transparent;border-bottom: 0.6rem solid transparent;border-right: 0.6rem solid none;border-left: 0.6rem solid #000000;width: 0px;height: 0px;} .totalBtnWrap{display: flex;gap: 1rem;align-items: center;} .totalPayEnd{margin: 8rem 0 0 0;} .btnTotal{width: 100%;max-width: 22rem;cursor: pointer;} .btnTotal.st{max-width: 50%;} .btnTotal input{display: none;position: absolute;top: 0;left: 0;} .btnTotal input[type="radio"]:checked + div{border: 0.2rem solid #ff7200; background: #fef8f7; color: #ff7200;} .btnTotal input[type="radio"]:checked + div .t1{color: #ff7200;} .btnTotal input[type="radio"]:checked + div .tri{border-left: 0.6rem solid red;} .btnTotal input + div{display: flex;align-items: center;justify-content: center;padding: 0 1rem;border: 0.1rem solid #cccccc;box-shadow: 0rem 0.5rem 1rem rgba(0,0,0,0.1);width: 100%;height: 5.5rem;font-size: 1.8rem;color: #111111;text-align: center;border-radius: 0.7rem;} .btnTotal:hover input + div{border: 0.1rem solid #ff7200;} .btnTotal:hover .tri{border-left: 0.6rem solid red;} /* popup */ .pop440{max-width: 460px;} .modal {/* cursor: pointer; */ display:block; overflow: auto;position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 100vh; visibility: hidden; background: rgba(0,0,0,0.6); transition: .3s ease; opacity: 0;} .modal.active { visibility: visible;opacity: 1;} .modal__inner { margin: 10rem auto 20rem; box-shadow: 8px 8px 20px 0 rgba(0,0,0,0.6);overflow: hidden;position: relative; width: calc(100% - 20px); max-width: 580px;background: transparent; cursor: auto; border-radius: 3rem;} .modal__inner::before{/* transform: translate(0px, 10px); */display: block; display: none;position: absolute;top: 0;left: 0; z-index: 2;width: 100%;height: 100%; background: linear-gradient(90deg, #f2b531 0%, #fb7102 100%);content:"";border-radius: 3rem;} .modal--close{padding: 1rem;position: absolute;top: 2rem;right: 2rem;z-index: 3;} .modalCont__tit{margin: 0 0 3rem 0;font-size: 2.5rem;font-weight: 600;color: #222222;text-align: center;} .modalCont__tit.al{text-align: left;} .modalCont{/* transform: translate(0, 1rem); */padding: 3.5rem 2rem 5rem;position: relative;z-index: 2;background-color: #fff;} .modal__inner2 { margin: 10rem auto 20rem; box-shadow: 8px 8px 20px 0 rgba(0,0,0,0.6);overflow: hidden;position: relative; width: calc(100% - 20px); max-width: 840px;background: transparent; cursor: auto; border-radius: 3rem;} .pop840{max-width: 800px;} .modal2 {/* cursor: pointer; */ display:block; overflow: auto;position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 100vh; visibility: hidden; background: rgba(0,0,0,0.6); transition: .3s ease; opacity: 0;} .modal2.active { visibility: visible;opacity: 1;} .modal2 .agree_wrap{font-size:1.25em;} .modal3 { display: none; padding: 20px 16px 16px; overflow: unset;position: absolute; top:auto; bottom: 11%; left: 36%; z-index: 100; width: 196px; height: auto; background: #000; cursor: pointer; border-radius: 12px; box-sizing: border-box; transform: translate(-50%);} .modal3.active {display: block;} .modal3 .close_bt {position: absolute; top: 11px; right: 9px; width: 9px; height: 9px; cursor: pointer;} .modal3 .close_bt li { position: absolute; top: 0; width: 100%; height: 1px;background: #fff;} .modal3 .close_bt li:nth-child(1) {transform: rotate(45deg);} .modal3 .close_bt li:nth-child(2) {transform: rotate(-45deg);} #wrap * .modal3 .txt p { font-size: 11px;line-height: 16px;color: #fff; letter-spacing: -0.6px;} .writeArea{margin: 0 0 4rem 0;} .btnModalWrap{display: flex;position: relative;z-index: 2;} .btnModalWrap .modalButton{flex: 1;} .modalButton{display: flex;align-items: center;justify-content: center;width: calc((100%)/2);height: 7rem;font-size: 1.7rem;font-weight: 600;color: #fff !important;text-align: center;} .modelCancel{background-color: #666666;} .modelConfirm{background-color: #ff7200;} .sendInfoArea{padding: 5rem 2.5rem;background-color: #f8f8f8;} .sendInfoinnerBox{display: flex;} .sendInfo__tit{width: 20rem;font-size: 2.6rem;font-weight: 600;color: #111111;transform: translate(0,-0.5rem);} .sendInfoListArea{width: calc(100% - 20rem);} .sendInfoinnerBox + .sendInfoinnerBox{margin: 7rem 0 0 0;} .sendInfoList{width: calc(100% - 20rem);} .sendInfoList + .sendInfoList{margin: 3rem 0 0 0;} .sendInfoEtc{padding: 1rem 0 0 1rem;font-size: 1.8rem;font-weight: 600;color: #ff7200;} .voiceFishing .modalCont{background: #fbfbfb;} /* 20230510 popup */ .modal2.quick_pop .modal__inner{ margin: 0; overflow: unset;position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} .modal2.quick_pop .modalCont {padding: 70px 2rem 38px; border-radius: 3rem;} .modal_txt { padding-bottom: 66px;text-align: center;} #wrap * .modal_txt h3{ margin-bottom: 40px;font-size: 25px; font-weight: 700; color: #111; letter-spacing: 0;} #wrap * .modal_txt p { margin-bottom: 30px;font-size: 18px; font-weight: 400; line-height: 26px; color: #000; letter-spacing: 0;} .modal_txt p span {color: #FF7200;} .modal_btn { position: absolute; bottom: 0; left: 0; width: 100%; height: 70px;text-align: center;} .modal_btn a {display: block; padding: 22px 0 23px; background: #FF7200; font-size: 17px; font-weight: 500; color: #fff; border-radius: 0 0 3rem 3rem;} .month_chk { display: flex; gap: 10px; align-items: center;position: absolute; bottom: -50px; left: 0;} .month_chk input[type="checkbox"] { margin: 0; width: 20px; height: 20px;} .month_chk input[type="checkbox"] + label::before { border: 1px solid #DEDEDE; position: absolute; top: 5px; left: 0; width: 20px; height: 20px; background: #fff;content:'';} .month_chk input[type="checkbox"]:checked + label::before {border: 1px solid #ff7200; background: #ff7200 url('../img/images/img_check.png') no-repeat center;content: '';} .month_chk label { margin: 0;font-size: 18px; font-weight: 400; color: #fff;} /* 20230510 popup 끝*/ /* 내 상품권 */ .dayFilterArea{margin: 0 0 4rem 0;padding: 0 0 1rem 0;border-bottom: 1px solid #e6e6e6;} .dayFilterArea01 {margin: 0;} .dayFilterList{display: flex;gap: 0.5rem;align-items: center;} .dayFilterList--items{display: flex;justify-content: center;width: 14rem;text-align: center;} .dayFilterList--items a{display: flex;align-items: center;justify-content: center;border: 1px solid #dddddd;width: 100%;height: 100%;height: 4.5rem;background-color: #f6f6f6;font-size: 1.5rem;font-size: 1.5rem;color: #666666;border-radius: 0.5rem;} .dayFilterList--items:hover a,.dayFilterList--items.active a{border: 1px solid #ff7200;background-color: #ff7200;color: #fff;} .mygift_txt { margin-top: 60px; padding: 24px 60px;width: 100%; background: #FCF1EE; text-align: center; border-radius: 14px;} .mygift_txt br {display: none;} .mygift_txt br.onBr {display: block;} #wrap * .mygift_txt p {font-size: 15px; font-weight: 400;color: #666; letter-spacing: -0.2px;} #wrap * .mygift_txt p span {color: #ff7200; letter-spacing: -0.2px;} .subContent.subContent_gift {margin: 55px 0 0;} .group_inpBtn{margin-left:15px;} .group_inpBtn input{ padding: 0 4rem 0 1rem;border: 1px solid #dddddd; position: relative; width:17rem;height: 4.5rem;font-size: 1.5rem;color: #666666;border-radius: 0.5rem;} .group_inpBtn .inp_btn{ margin-left:5px; padding: 0; border-color:#444; width:7rem; background-color: #444; color:#fff;} .group_inpBtn .input_sec{margin:0 10px;} .subContent{margin: 8rem 0 0 0;} .filterWrap{display: flex;justify-content: space-between;margin: 0 0 0.7rem 0;} .sortFilterList, .cateFilterList{display: flex;gap: 2rem;align-items: center;margin: 0 0 1rem 0;} .sortFilterList--items a, .cateFilterList--items a{font-size: 1.6rem;font-weight: 500;color: #999999;} .sortFilterList--items:hover a, .sortFilterList--items.active a{color: #111111;} .cateFilterList--items:hover a, .cateFilterList--items.active a{color: #111111;} .sortFilterArea{align-self: self-end;} /* 로딩팝업 20231020 */ .cancelLoading { position: fixed; top: 0; left: 0; z-index: 999; width: 100%; height: 100%; } .cancelLoading .dim{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7);} .cancelLoading .loading_wrap{display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;} .cancelLoading .loading_wrap .loader {border: 4px solid #ffffff; border-top: 4px solid #FB7102; width: 40px; height: 40px; animation: spin 2s linear infinite; border-radius: 50%;} @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* 보이스피싱 팝업 */ .vo__contWrap { margin: 0 auto;position: relative; max-width: 620px; background: #fbfbfb; } .vo__contWrap::before { position: absolute; right: -3rem; bottom: 0; width: 16rem; height: 29.2rem; background: url('/img/main/vo__wrap_img.png') no-repeat center; background-size: contain;content: "";} .vo_txt h5 {font-size: 2.8rem; font-weight: 500; line-height: 3.6rem; color: #000; text-align: center;} .vo_txt h5 span {font-size: 3.2rem; font-weight: 700;} .vo_txt p { padding: 3rem 0;font-size: 1.7rem; font-weight: 400; line-height: 2.2rem; color: #444444; text-align: center;} .vo_txt p span {font-style: italic ; color: #1b1b1b;} .vo__box {border: 1px solid #bbbbbb;} .vo__box .vo__boxTop { display: flex; align-items: center; justify-content: center; height: 5.5rem;background: #0d509a;} .vo__box .vo__boxTop p {position: relative; font-size: 1.8rem; font-weight: 500; color: #fff; } .vo__box .vo__boxTop p::before { position: absolute; top: 49%; left: 100%; width: 5.8rem; height: 4.4rem; background: url('/img/main/vo__boxTop.png') no-repeat; background-size: contain;content: ""; transform: translateY(-50%); } .vo__box .vo__boxTop p span {font-weight: 700;} .vo__boxBtm {display: flex; justify-content: space-between; padding: 4rem 0;} .vo__boxBtm .vo__btmtxt {flex: 1; position: relative; text-align: center;} .vo__btmtxt p {font-size: 1.6rem; font-weight: 400; color: #000;} .vo__btmtxt + .vo__btmtxt::before { position: absolute; top: 50%; left: 0; width: 1px; height: 5rem; background: #ddd;content: ""; transform: translateY(-50%); } .vo__call { margin: 4rem 0 8rem;border-top: 1px solid #000;} .vo__call li {display: flex; align-items: center; justify-content: space-between; padding:4rem 1rem; border-bottom: 1px solid #ddd;} .vo__call li b {font-size: 1.5rem; font-weight: 400; color: #000;} .vo__call li b span { font-weight: 500;} .vo__link {display: flex; gap: 2rem; align-items: center; justify-content: space-between; width: 15rem;} .vo__link.list3 {justify-content: start;} .vo__logo {text-align: center;} .vo__link a {font-size: 1rem; font-weight: 400; color: #666;} .x_btn { padding: 1rem;position: absolute; top: 2rem; right: 3rem; cursor: pointer;} .moGiftBox--imgBox .responsiveBox{padding-bottom: 58%;} .moGiftBox{display: block; margin: 0 auto; margin-bottom: 1em; padding:1.5em;border: 1px solid #dddddd;overflow: hidden;width: 100%;border-radius: 1.5rem;} .moGiftBox--textBox{padding:1.5rem 1rem 1.5rem 3rem;} .moGiftBox--textBox__tit{font-size: 2rem; font-weight: 500; color: #222;} .moGiftBox--textBox__txt{font-size: 1.85rem;color: #222;} .moGiftBox--textBox__won{font-size: 2rem; font-weight: 600; color: #222;} .moGiftBox--textBox__won .won_tx{ margin-left: 3px; font-size: 1.85rem; font-weight: 400;} .moGiftBox .moGiftBox--imgBox{flex:150px;} .moGiftBox .moGiftBox--imgBox .img{width:100%; height: 130px; background-repeat: no-repeat; background-position: center; background-size: cover; border-radius: 10px;} .moGiftBox .moGiftBox--textBox{flex:calc(100% - 150px);} .moGiftBox .GBox_btn > li a{ margin-left:3px;padding: 10px 15px; background: #ff7200; font-size: 1.375em; color: #fff; border-radius: 5px;} .moGiftBox_view{ font-size: 1.625em;text-align:center;} .moGiftBox_view a{display:block; padding: 13px; border: 1px solid #ddd; background: #f5f5f5; color:#444;} .moGiftLineArea{padding: 2rem 3rem 3.5rem;} .moGiftLine{display: flex;align-items: center;justify-content: space-between;padding: 1.4rem 0;} .moGiftLine + .moGiftLine{border-top: 1px solid #dddddd;} .moGiftLine b{font-size: 2rem;font-weight: 400;} .moGiftLine p{font-size: 2rem;color: #555555;} .moGiftLine .money{font-size: 2.6rem;font-weight: 700;color: #111111;} .moGiftLine .money span{font-size: 2.4rem;font-weight: 400;color: #111111;} .moGiftDetail__tit{display: flex;align-items: center;padding: 0 3rem;height: 7.5rem;background-color: #555555;font-size: 2.5rem;font-weight: 600;color: #fff;} .giftTable{display: block;} .giftTable1{display: none;} .moGiftBox_wrap{display: none;} #pageName{display: flex;align-items: center;justify-content: center;height: 22rem;text-align: center;} #pageName > h2{font-size: 4rem;font-weight: 600;color: #fff;} h2.co_black{color: #ff7200 !important;} /*[e] Sub Style */ /*[s] Plugin Style */ /* Layer Style */ .layerCell{display:none;} .layerArea{ overflow:hidden; overflow-y:auto; position:fixed; top:50%; left:50%; z-index:99;width:0px; height:0px; background-color: rgba(0,0,0,0.7); -webkit-transition: .5s; transition: .5s; transform-origin: 50% 50%;} .layerArea.one,.layerArea.two{ top:0%; left:0%;width:100%; height:100%;} .layerArea.two .layerBgIn{ top:0%; left:0%;width:100%; height:100%;} .layerArea .closeLy{ display:inline-block; position: absolute; top:0; right:0;width:1.7rem; height:1.7rem;} .layerArea .closeLy:before,.layerArea .closeLy:after{ position: absolute; top:50%; left:50%; background-color: #080808;content: "";} .layerArea .closeLy:before{width: 100%; height: 2px; transform:translate(-50%, -50%) rotate(45deg);} .layerArea .closeLy:after{width: 2px; height: 100%; transform:translate(-50%, -50%) rotate(45deg);} .layerArea .closeLy.type02{ top:3rem; right:3rem;width:2.3rem; height:2.3rem;} .layerArea .closeLy.type02:before,.layerArea .closeLy.type02:after{background-color: #676767;} .layerArea .layerIn{ display: table; position:relative;width:100%; height:100%;} .layerArea .layerIn .layerCell{ display: table-cell; padding:70px 0; position:relative;width:100%; height:100%; vertical-align:middle; box-sizing: border-box;} .layerArea .layerIn .layerBox{ display:none;margin:0 auto; position: relative; z-index:99; background-color: #fff; font-size:0; line-height:0; box-sizing: border-box; border-radius:1rem;} .layerArea .layerIn .layerBox .contLy{position: relative;} .downlay{ padding:10rem 0;width:100%; border-radius:0 !important;} .downlay .closeLy{top:-5rem;} .downlay>.contLy{ margin:0 auto;width:64.5rem; text-align: center;} .downlay .title{padding-bottom:5rem; font-size:3rem; font-weight: bold; line-height:1; color: #000;} .downlay .title>strong{color: #23abaf;} .downlay .utllBox{ display:table; margin:0 auto;width:47.6rem; table-layout: fixed;} .downlay .utllBox>*{ display:table-cell;width:50%; vertical-align: top; box-sizing: border-box;} .downlay .utllBox .tit{font-size:1.5rem; line-height:1; color: #666;} .downlay .utllBox .txt{margin-top:2.5rem; font-size:1.2rem; line-height:1; color: #888;} .downlay .utllBox .icon{ display: flex; align-content: center; justify-content: center; flex-wrap: wrap; flex-direction: row; margin-top:3rem;height:15rem;} .downlay .utllBox .icon>p+p{margin-top:2rem;} .downlay .utllBox>.qr{border-left:1px solid #dadada;} .downlay .utllBox>.store img{width:16.8rem;} .downlay .utllBox>.qr img{width:15rem;} .formLay{ padding:7rem 5rem 6rem;width:62rem; border-radius:1rem;} .formLay input[type=text]{ display:inline-block; padding:0; border-bottom:2px solid #e8e8e8;width:100%; height:5.4rem; vertical-align:middle; background-color:#fff; font-size:1.8rem; line-height:5.2rem; color:#666; box-sizing: border-box;} .formLay .title{padding-bottom:3.5rem; border-bottom:1px solid #333; font-size:2.6rem; font-weight: 500; line-height:1; color: #1b1b1b;} .formLay .textBox{ margin:-1px 0 0 -5rem; padding:4rem 0; border-top:1px solid #ececec; border-bottom:1px solid #ececec; position: relative; z-index:2;width:62rem; background-color: #f6f7fa; font-size:1.9rem; line-height:1; color: #1b1b1b; text-align: center; letter-spacing: -0.08em;} .formLay .textBox>span{color: #149699;} .formLay .launchingForm{margin-top:1rem;} .formLay .launchingForm>li{padding-top:4rem;} .formLay .launchingForm>li>dl>dt{ font-size:1.9rem;font-weight: 500; line-height:1; color: #1b1b1b;} .formLay .launchingForm>li>dl>dd{ display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; flex-direction: row; padding-top:1rem;height:6.4rem; box-sizing: border-box;} .formLay .launchingForm>li>dl>dd.two{ justify-content: space-between;flex-wrap: nowrap; white-space: nowrap;} .formLay .launchingForm>li.two{display: flex; justify-content: space-between;} .formLay .launchingForm>li.two>dl{width:48%;} .formLay .launchingForm>li .clauseView{display:inline-block;font-size:1.7rem; line-height:1; color: #989898;} .formLay .launchingForm>li .clauseView>span{ display:inline-block; padding:0.2rem 0 0.3rem;border-bottom:1px solid #999;} .formLay .btnArea{margin-top:6rem;} .privacylay{ padding:7rem 5rem;width:62rem;} .privacylay .title{padding-bottom:3.5rem; font-size:2.8rem; font-weight: 500; line-height:1; color: #000; text-align: center;} .privacylay .clauseArea .scroll{padding:3.5rem 3.9rem; border:1px solid #eee; background-color: #f8f9fb; font-size:1.7rem; font-weight: 300; line-height:2.6rem; color: #666;} /* Img Over Bg Style */ #photo{margin:0 auto; overflow:hidden; position:relative;width:960px;} #photo>li{ display:inline; margin:5px; overflow:hidden;width:150px; height:150px; float:left; } #photo>li>a{ display:block; overflow:hidden; position: relative;width:100%; height:100%;} #photo>li>a>img{ display:block;width:100%; height:100%; border-radius:5px;} #photo>li>a>.bg_l{ display:none; position: absolute; top:0; left:0;width:100%; height:100%; background-color:red; opacity:0.3; border-radius:5px;} /* Notice One Line Style */ .mNoticeList{ margin-top:25px; overflow:hidden; position: relative;width:100%; height:60px;} .mNoticeList>ul{ position: absolute; top:-60px; left:0;width:100%;} .mNoticeList>ul>li{ position: relative;height:60px;} .mNoticeList>ul>li>a{ display:block;padding-left:73px; position: relative;} .mNoticeList .day{ padding-right:15px; border-right:1px solid #d5d1cc; position: absolute; top:0; left:0;width:41px; font-size:12px; font-weight: 600; line-height:1; color: #b99764; text-align: center;} .mNoticeList .day>strong{ display:block; font-size:32px;font-weight: 700; line-height:1;} .mNoticeList dl.list{font-size:16px; line-height:20px; color: #876e49; word-break:keep-all; word-wrap:break-word;} .mNoticeList dl.list>dt{padding-bottom:6px; font-size:12px; font-weight: 600; line-height:1; color: #b99764;} /* company */ .comp__topBg { height: 95rem;background: url('/img/sub/comp__topBg.jpg')no-repeat center; text-align: center;} .comp__topBg .limite1200 {display: flex; align-items: center; justify-content: center; height: 100%;} .comp__topBg b { display: block;position: relative; font-family: 'NanumSquareRound'; font-size: 1.8rem; font-weight: 700; color: #fff ; text-transform: uppercase; letter-spacing: 0.7rem !important;} .comp__topBg b::before {position: absolute; bottom: -1rem; left: 50%; width: 4rem; height: 2px; background: #fff; content: ""; transform: translateX(-50%); } .comp__topBg strong { display: block; margin: 6rem 0 3rem;font-size: 7rem; font-weight: 700; color: #fff; } .comp__topBg p {font-size: 1.8rem; font-weight: 400; color: #fff; } .advanWrap {text-align: center;} .advan__tit { display: block; margin-bottom: 2rem;font-size: 4rem; font-weight: 400; color: #111111;} .advan__tit span { font-weight: 700; } .advan__arti {font-size: 2.2rem; font-weight: 500; color: #111;} .advan__arti span {color: #ff7200;} .advan__sm { margin-top: 1.5rem;font-size: 1.7rem; font-weight: 400; color: #666666;} .ci__tit { display: block;font-size: 4rem; font-weight: 700; color: #111;} .ci__arti {font-size: 1.8rem; font-weight: 300; color: #666666; } .ci__dw__Wrap {display: flex; gap: 1rem; align-items: center; justify-content: flex-end; margin-top: 5rem;} .ci__dw { display: flex; gap: 1rem; align-items: center; justify-content: center; border: 1px solid #111; width: 24rem; height: 6.5rem;border-radius: 3rem;} .ci__dw p {font-size: 1.8rem; font-weight: 500; color: #111;} .ci__dw p span {color: #ff7200;} .welfare {padding: 11rem 0; background: #f5f5f5;} .welf__flex {display: flex; gap: 2rem; align-items: flex-start; justify-content: center; margin: 4rem 0;} .welf__box {flex: 1 ;} .welf__box b { font-family: 'Poppins';font-size: 1.5rem; font-weight: 700; color: #222; text-transform: uppercase;} .welf__box div {margin: 2rem 0;} .welf__box strong {font-size: 1.8rem; font-weight: 700; color: #222;} .welf__box p {font-size: 1.7rem; font-weight: 400; color: #666666;} .welf__etctit { display: inline-flex; align-items: center; justify-content: center;margin-bottom: 2rem; width: 12rem; height: 4rem; background: #666666; font-size: 1.9rem ; font-weight: 500; color: #fff; border-radius: 3rem;} .welf__etc p {font-size: 1.6rem; font-weight: 400; line-height: 2.7rem; color: #666666;} .jobWrap {padding: 11rem 0 0 ;} .job__box { flex: 1; padding: 2rem;border: 1px solid #000; min-height: 19rem; text-align: center;} .job__box div {margin: 2.5rem 0 1rem}vvvvvvv .job__box b { font-family: 'Poppins';font-size: 1.6rem; font-weight: 700; color: #222;} .job__box p {font-size: 1.7rem; font-weight: 400; color: #666666;} .job__box p span { font-size: 1.8rem; font-weight: 500;color: #ff7200;} .jobWrap .welf__etctit {background-color: #e6e6e6; color: #222;} .guideWrap.top {margin-top: -3rem;} .guideWrap.btm {margin-top: 8rem;} .guideWrap > b {display: block; margin-bottom: 2rem; font-family: 'Poppins'; font-size: 2rem; color: #111;} .guide__Flex { display: flex; align-items: center; justify-content: center; border-top: 1px solid #111; border-bottom: 1px solid #eee;} .guide__box1 { display: flex; align-items: center; justify-content: center;flex: 1 25%; padding: 2rem; min-height: 20rem;} .guide__box2 { display: flex; gap: 3rem;flex: 1 50%; padding: 5rem; min-height: 20rem;} .color__box {width: 12rem; height: 8rem; background: #ff2b6f;} .color__box.co2 {background: #f5b833;} .color__txt b {display: block; margin-bottom: 1rem; font-size: 1.8rem; font-weight: 700; color: #111;} .color__txt p {font-size: 1.8rem; font-weight: 400; color: #666666;} .guide__box1 + .guide__box1 {border-left: 1px solid #eee;} .guide__box2 + .guide__box2 {border-left: 1px solid #eee;} /* company */ /* 221021 main */ .sec3__cont .swiper-button-next{background-image:none;} .wrap1200 { margin:0 auto; padding:0 14rem; position: relative;width:100%; max-width:1420px;} .sec.sec2::before {background: #eee;} .sec.sec2::after {background: #eee;} .sec.sec3::before {background: rgba(255,255,255,0.3);} .sec.sec3::after {background: rgba(255,255,255,0.3);} .sec {position: relative; } .sec .position{ display: flex; align-items: center;position: absolute; top: 50%; left: 3rem;z-index: 1; font-size: 1.4rem; line-height: 1.0; color: #fff; writing-mode: vertical-rl; transform: rotate(180deg) translate(0,50%);} .sec .position span{ margin: 2rem 0; position: relative; width: 2px; height: 6.7rem; background-color: rgba(255,255,255,0.1); } .sec .position em{position: absolute; top: 0; left: 0; width: 100%; height: 50%; background-color: #fff;} .sec .position2 { display: flex; align-items: center;position: absolute; top: 50%; right: 3rem;z-index: 1; font-size: 1.4rem; line-height: 1.0; color: #fff; writing-mode: vertical-rl; transform: rotate(180deg) translate(0,50%);} .sec .position2 span { border: 1px solid #fff;width: 1rem; height: 1rem; border-radius: 50%;} .sec .position2 span.on {position: relative; width: 2rem; height: 2rem;} .sec .position2 span.on::before { border: 1px solid #fff; position: absolute; top: 50%; left: 50%; width: 1rem; height: 1rem; background-color: #fff;content: ""; transform: translate(-50%, -50%); border-radius: 50%;} .sec .position2 span + span {margin-top: 1rem;} .sec.sec2 .position {color: #000;} .sec.sec2 .position span { background-color: #cccccc;} .sec.sec2 .position em { background-color:#000;} .sec.sec2 .position2 span {border: none; background-color: #cccccc;} .sec.sec2 .position2 span.on {border: 1px solid #ff8c2f; background: none;} .sec.sec2 .position2 span.on::before { border: none;background-color: #ff8c2f; } .sec.sec3 .position2 span {border: none; background-color: #cccccc;} .sec.sec3 .position2 span.on {border: 1px solid #ff8c2f; background: none;} .sec.sec3 .position2 span.on::before { border: none;background-color: #ff8c2f; } .sec.sec2 {padding: 11rem 0 ;} .sec2__top {text-align: center;} .sec2__top em { font-family: 'NanumSquareRound';font-size: 1.7rem; font-style: initial; font-weight: 700; color: #000;} .sec2__top h5 {font-size: 5rem; font-weight: 400; line-height: 5.8rem; color: #111111;} .sec2__top h5 span {color: #ff7200;} .sec2__top p {margin-top: 2rem; font-size: 1.8rem; font-weight: 400; color: #111111;} .sec2__flex { display: flex; gap: 2rem; align-items: center; justify-content: space-between;margin-top: 5rem;} .sec2__txt li {padding: 2rem 0; } .sec2__txt li:hover b {color: #ff7200;} .sec2__txt li + li {border-top: 1px solid #ddd;} .sec2__txt li b { font-family: 'NanumSquareRound'; font-size: 2rem; font-weight: 600; color: #000;} .sec2__txt li p {font-size: 1.6rem; font-weight: 400; color: #666666;} .sec2__img {flex: 1; text-align: center;} /*dao_App*/ .dao_Main_btn{margin:5.5rem auto 0; text-align: center;} .dao_Main_btn a{ display:inline-block; margin-right: 1rem; padding:0 5.2rem; min-width: 22rem; height: 6rem; background-color:#000; font-size: 1.8rem; font-weight: 500; line-height: 6rem; color:#fff; text-align: center; border-radius: 5rem;} .dao_Agree .dao_Agree_img {flex:50%;} .dao_Agree .mTit{flex:50%;} .dao_Agree .dao_Main_btn a{background-color:#222;} .dao_Agree .mTit--etc{ font-family: 'Noto Sans KR';font-size: 2rem} .dao_Agree .in_Agree > li a{display:block; margin:0 auto; margin-right:2rem; border:1px solid #e6e6e6; box-shadow: 10px 10px 30px rgb(0 0 0 / 20%); overflow: hidden; width:3rem; background: #fff; border-radius: 3rem;} .dao_Agree .in_Agree > li a .ag_img{height: 200px; background-position: center;background-size: cover;} .dao_Agree .in_Agree > li a .ag_img.st1{background:url("../img/images//main/dao_Agree_img01.jpg");} .dao_Agree .in_Agree > li a .ag_img.st2{background:url("../img/images//main/dao_Agree_img02.jpg");} .dao_Agree .in_Agree > li a .ag_tt{ padding:2rem 0; font-size: 2rem; font-weight: 700; color: #222;text-align: center;} .sec3 {padding: 11rem 0; background:url("../img/images//main/sec3__Bg.jpg") no-repeat; background-size: cover;} .sec3 .sec2__top em {color: #fff ;} .sec3 .sec2__top h5 { margin-top: 5rem;color: #fff ;} .sec3 .sec2__top p { margin-bottom: 9rem;color: #fff ;} .sec3slide .swiper-slide {display: flex; align-items: center; justify-content: center;} .sec3slide .swiper-slide .s3s__box { padding: 3.5rem 0 10rem; width: 32rem; background-color: #fff; text-align: center; border-radius: 1rem; } .s3s__box b { font-family: 'NanumSquareRound';font-size: 1.7rem; font-weight: 800; color: #222222;} .s3s__box__img {margin: 3rem 0;} .s3s__box .tit {font-size: 1.8rem; font-weight: 500; color: #000000;} .s3s__box .arti { margin-top: 1.5rem;font-size: 1.6rem; font-weight: 300; color: #666666;} .sec3slide .swiper-pagination {bottom: 3.5rem !important;} .sec3slide .swiper-pagination-bullet-active {background-color: #ff7200 !important;} .sec3slide .swiper-button-next:after, .sec3slide .swiper-button-prev:after {display: none;} .sec3slide .swiper-button-prev { margin-top: 0 !important;left: 30%; width: 4rem; height: 1.2rem; transform: translateY(-50%);} .sec3slide .swiper-button-next { margin-top: 0 !important;right: 30%; width: 4rem; height: 1.2rem; transform: translateY(-50%);} .sec3slide .swiper-button-prev:hover img,.sec3slide .swiper-button-next:hover img {filter: invert(44%) sepia(60%) saturate(1977%) hue-rotate(1deg) brightness(103%) contrast(106%);} .sec4__flex {display: flex; gap: 1.5rem; align-items: flex-start; justify-content: center ; padding: 8rem 0;} .sec4__box { padding: 4rem 3rem;width: 39rem; height: 23rem; background: #f2f2f2;} .sec4__box .tit { display: inline-block; padding-bottom: 2rem;position: relative; font-size: 1.7rem; font-weight: 800; color: #222222 ;} .sec4__box .tit::before { position: absolute; bottom: 0rem; left: 0; width: 3.5rem; height: 2px; background: #222;content: "";} .arti__flex {display: flex; align-items: center; justify-content: space-between; margin-top: 3rem;} .arti__flex p {font-size: 1.6rem; font-weight: 300; color: #666666;} .arti__flex p span {font-family: 'NanumSquareRound'; font-size: 2.5rem; font-weight: 900; color: #f1115e;} .page_sec1{margin-top:3em !important;} .page_sec2{margin-top:6em !important;} .tabl_st_tx{ margin-bottom: 7px;font-size:1.5em; color: #f91c12;} .checkIn.cs_st{margin-top:2em;} .checkIn.cs_st .tw{ display:inline-block; margin-top:-3px; font-size: 1.625rem; line-height: 1.5; color:#444;} .checkIn.cs_st .tw i{ font-style: normal; font-weight: 600;} /* 221021 main */ /* 221021 가져온것 */ /*[e] All Style */ .r_qk_List{ position: fixed; right: 2rem; bottom: 2rem; z-index: 10000;} .r_qk_List > .cont{flex:100%;} .r_qk_List > .cont .in{ margin-bottom: 10px; margin-left:auto;padding:0 23px; border: 2px solid #fff; box-shadow: 5px 5px 10px rgba(0,0,0,.15); overflow: hidden; position: relative; width:9.5rem; height: 10rem; background: #fdf6f1; transition: .8s; transition-timing-function: ease-in-out; border-radius: 30px;} .r_qk_List > .cont .in .img{text-align: center;} .r_qk_List > .cont .in .img .s_tt{ display: block; margin-top:5px; font-size: 1.3rem; font-weight: 400; color:#666;} .r_qk_List > .cont .in .tt{ position: absolute; top: 50%; left: 9rem; width:20rem;font-size: 2rem; font-weight:700; color: #222; transform: translateY(-50%);} .r_qk_List > .cont .in .tt .stt{ display: block; font-size: 1.4rem; font-weight: 400; color:#999;} .r_qk_List > .cont .in .tt::before { position: absolute; top: 50%; right: 0; width: 4rem; height: 0.8rem; background: url('/img/common/hd_cont_arr.png') no-repeat center; background-size: contain;content: ""; transform: translateY(-50%); } .r_qk_List > .cont .in.on{width:32rem; background: #fff;} .main .r_qk_List{display:flex !important;} .pin_table > li { margin-bottom: 5px; padding: 14px 20px; background: #fbf7ef;font-size: 1.6rem; color: #444; border-radius: 7px;} .pop_itx{ margin-top: 15px;font-size: 1.375rem; color: #888;} .pop_itx.st1, .pop_itx.st2, .pop_itx.st4{display:none;} .pop_itx.on{display:block;} /**/ .flex{display:flex;} .flex.fw{flex-wrap:wrap;} .flex.vc{align-content: center;align-items: center;} .flex.vb{ align-content:flex-end; align-items:flex-end} .flex.hc{justify-content: center;} .flex .mgL{margin-left:auto;} .fl_wrap > *{float: left} .fl_wrap:after{ display: block; clear: both;content:'';} .fr{float:right;} /* 1006 이용안내 추가 */ .infor_content {display:flex;justify-content: space-between;margin-bottom:80px;width:100%;height:440px;} .infor_content .left_text {padding-top:2px;width:300px} .infor_content .left_text h1 {position:relative;top:0;left:0;font-size:1.5rem;font-weight: 700;color:#111;} .infor_content .left_text h1::after {display:block;position:absolute;top:30px;left:1px;width:35px;height:2px;background-color:#ff7200;content:"";} .infor_content .left_text > p {margin-top:40px;font-size:1.8rem;font-weight: 600;line-height: 1.3; color: #222;} .infor_content .left_text div {margin-top:20px;padding: 15px 20px;width:240px;background-color:#fcf1ee;border-radius:15px;} .infor_content .left_text div > p {font-size:1.5rem;font-weight: 400;line-height: 1.3;color:#ff7200;} .infor_content .left_text .small {margin-top:15px;font-size:1.5rem;font-weight: 300;color:#666} .infor_content.st_pop{ display: block; margin-bottom: 0;height:auto;} .infor_content.st_pop .left_text{ margin-top: 40px;width:100%;} .infor_content.st_pop .left_text h1 {font-size:1.8rem;} .infor_content.st_pop .left_text > p {margin-top:30px;} .infor_content.st_pop .left_text div{width:100%; } .infor_content.st_pop .left_text .small {margin-top:15px;} /* 1006 추가 */ /*[s] 2022-11-04 레이어 팝업 추가 */ .text-base input[type=text],.text-base input[type=password]{ padding:0 1rem; border: 1px solid #e6e6e6;width: 100%; height:4.2rem; font-size: 1.5rem; font-weight: 300; line-height:3.4rem; color: #999;} .text-base .modal__inner{max-width: 450px;} .text-base .point{color: #ff7200 !important;} .text-base .base-title{padding:2rem 0 3rem; font-size:2.5rem; font-weight: 500; line-height:1; color: #222; text-align: center;} .text-base .base-text{font-size:1.6rem; line-height:1.4; color: #111; text-align: center;} .text-base .base-gray-box{margin-top:2.5rem; padding:1.8rem; background-color: #fbf7ef; font-size:1.5rem; line-height:1.4; color: #666; border-radius:4px;} .text-base .base-gray-box.black{color: #111;} .text-base .base-gray-box .number{margin-bottom:0.5rem; font-size:2rem; font-weight: 500; line-height:1.2; color: #111;} .text-base .base-gray-box .tit{margin-bottom:0.7rem; font-weight: 500; color: #111;} .text-base .base-gray-box ul>li{margin-top:0.5rem; padding-left:1rem; position: relative;} .text-base .base-gray-box ul>li:before{ position:absolute; top:0px; left: 0;content: "*";} .text-base .base-btn{ display: flex; justify-content: center;margin-top:3rem;} .text-base .base-btn>a{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; flex-direction: row; margin:0 0.5rem;width:18rem; height:4.8rem; background-color: #999; font-size:1.6rem; font-weight: 500; line-height:1.2; color: #fff; text-align: center; border-radius:2rem;} .text-base .base-btn>a.orange{background-color: #ff7200;} .text-base .base-form{margin-top:4rem;} .text-base .base-form>dl{margin-top:1.5rem;} .text-base .base-form>dl>dt{ font-size:1.5rem;font-weight: 500; line-height:1.2; color: #111;} .text-base .base-form>dl>dd{margin-top:1.2rem;} .text-base .base-form>dl>dd.txt{margin-top:0.7rem; font-size:1.5rem; line-height:1.6; color: #666;} .text-base .base-form>dl>dd table{ border-top:1px solid #000;width:100%; table-layout : fixed; border-spacing:0;} .text-base .base-form>dl>dd table th, .text-base .base-form>dl>dd table td{padding:1.5rem 2rem; border-bottom:1px solid #ddd; vertical-align: middle; background-color: #fff; font-size:1.5rem; line-height:1.5; color:#666; text-align:left; word-break:keep-all; word-wrap:break-word; empty-cells:show; border-collapse:collapse; box-sizing: border-box;} .text-base .base-form>dl>dd table th{background-color: #f7f7f7;} .text-base .base-form>dl>dd table strong{font-weight: 500; color: #111;} .text-base .dormant-check{margin-top:2rem; padding:1.7rem 0 2rem; border:1px solid #e6e6e6; background-color: #f7f7f7; text-align: center; border-radius:3px;} .text-base .dormant-check .checkIn{margin:0 2rem;} .text-base .dormant-check .checkIn input[type=radio]+label{height:2rem; font-size:1.5rem; line-height:1.8rem; color: #666;} .text-base .dormant-check .checkIn input[type=radio]:checked+label{font-weight: 400;} /*[e] 2022-11-04 레이어 팝업 추가 */ .ck_page .wrap440{max-width:560px;} .ck_page .wrap440 .membercont__top{padding:4rem 2rem 5rem;} .ck_page .wrap440 .membercont__top h5{line-height: 1.5;} .ck_page .wrap440 .self__box{ margin-right: auto; margin-bottom: 0; margin-left: auto;width:420px;} .ck_page .wrap440 .self__txt{padding: 0; font-size: 1.55rem;} .ck_page .wrap440 .ck_ttw{ margin-top:2rem; font-size: 1.5rem; font-weight: 400; color: #666666; text-align: center;} .ck_page .wrap440 .ck_ttw a{color:#333; text-decoration: underline} /* 20230817 ARS css추가 */ .V_txt { margin-top: 1.5rem; font-size: 1.7rem;line-height: 3rem;color: #fff;} .phone_box {display: flex; gap: 15px; align-items: center; justify-content: center; flex-direction: column;} .phone_box .notiTxt {width: 100%; max-width: 420px; font-size: 14px; font-weight: 400; color: #888; text-align: left;} .phone_box .notiTxt span{display: inline-block; line-height: 20px;} .ars_phone {display: flex; align-items: center; justify-content: center; border-top: 1px solid #e2e2e2; border-bottom: 1px solid #E2E2E2; width: 100%; max-width: 420px; } .ars_phone li {padding: 12.5px 20px;} .ars_phone li p {font-size: 15px; font-weight: 400; color: #333;} .ars_phone li:nth-child(1) {width: 32.384%; background: #F5F5F5; text-align: center;} .ars_phone li:nth-child(2) { border-left: 1px solid #E2E2E2;width: 67.616%;} .ars_phone li:nth-child(2) p {color: #000;} .arsBtn {display: flex; align-items: center;justify-content: center; margin: 3rem 0 5rem;} .arsBtn a {display: inline-block; padding: 16px 39px; border: 1px solid #FF7200; font-size: 17px; font-weight: 500; line-height: 1; color: #FF7200; border-radius: 30px;} .num_box {display: flex; gap: 2rem; align-items: center; justify-content: center; flex-direction: column;} .num_box strong {font-size: 25px; font-weight: 500; line-height: 1; color: #222;} .num_box .input_box {display: flex; gap: 1rem; align-items: center; justify-content: center;} .num_box .input_box input { padding: 18px 20px 22px; border: 1px solid #E2E2E2;width: 69px; height: 77px; background: #F5F5F5; font-size: 45px; font-weight: 500; color: #222; text-align: center; border-radius: 10px;} .memberPage.ars_page .btnWrap .btnConfirm {padding: 1.9rem 2rem 2.1rem;} .buy__btnList{margin-top:6em;} .buy__btnList > li{ position:relative; width: 298px;} .stk_con{position:absolute; top: -3em; left:1em;} .stk_con.stk_con01{top: -2.8em; left: 0.5em;} .event01 {display: none;} .event02 {display: block;} .cs_t_btn{ text-align: right;} .cs_t_btn a{display: inline-block; margin-top: -2em; margin-bottom: 10px; padding: 1rem 2rem; border-color: #999; background-color: #999; font-size: 1.6rem; font-weight: 400; color: #fff; border-radius: 50px;} .serv_btn_list:after{ display:block; clear: both;content:'';} .serv_btn_list > li{ margin-right:5px;float:left;} .serv_btn_list > li:last-child a{ border-color:#888;background-color:#888;} .bo_w_flie .stt{ margin-top: 3px;font-size: 1.4rem; color: #888;} .join_scroll{ margin:10px 0 15px; padding: 10px; border: 1px solid #ddd; overflow-y: scroll;height:7.5em; background: #fff; font-size: 1.25em;} .mb480 {display: none;} /*=================================================================cp/mcp=========================================================*/ .pin_stit{ margin-bottom: 1.5rem;font-size:2.625rem; color: #111;} .cp_stt{margin-bottom: 15px;font-size: 1.8rem; font-weight: 600; color: #222;} .intor__wr input[type=text].input_st.w2{width:calc(100% / 3 - 1em);} .intor__wr input[type=file]{ padding: 1rem; border: 1px solid #e6e6e6; width: 100%;font-size: 1.5rem; font-weight: 300; color: #999999;} .input_sec{display: inline-block; *display: inline; width: 1.25em; text-align: center; zoom: 1;} .agreeWrap .cp_agree_cont{ margin-bottom: 3em; padding-bottom: 3em;border-bottom:1px solid #ededed;} .agreeWrap .cp_agree_cont .checkIn input[type=checkbox]+label{ width:80%;height:auto; line-height: 2rem;} .cp__txt{ display: block; margin-bottom: 5rem;font-size: 3.125rem; font-weight: 300; line-height: 1.5; color: #111111; text-align: center;} .cp_info{ margin-top: 10px; margin-bottom: -2rem;font-size: 1.3rem; font-weight: 300; color: #555;} .sub__tit.al{text-align:left;} .pin_box .pin_nm_ck{ margin-bottom: 0;width:calc(100% - 50px);} .pin_box .pin_nm_ck .pin_input{margin-top:5px;} .pin_box .pin_nm_ck .pin_input:first-child{margin-top:0;} .pin_box .pin_plus{width:46px; height: 46px; background: #ff7200; font-size:1.5em; color: #fff; text-align: center; cursor: pointer;} .pin_box .pin_plus .xi{line-height: 46px;} .pin_table_total{ margin:5rem 0 4rem;font-size:1.825rem; color:#555; text-align: center;} .pin_table_total .tt{margin-right: 15px;} .pin_table_total .intor__wr{margin-bottom:0; position:relative; width: 26rem;} .pin_table_total .intor__wr .inp_st{margin-bottom:0; padding:1rem 5rem 1rem 1rem; font-size: 2rem; font-weight: 500; color: #333; text-align: right;} .pin_table_total .won_tx{position: absolute; top: 50%; right: 20px;font-size: 1.825rem; font-style: normal; font-weight: 400; color: #666; transform: translateY(-50%);} .pin_table_total .pin_tbox{padding:0 2em;} .pin_table_total .pin_tbox .tt{ margin-bottom: 5px; padding-left: 5px;font-size:1.7rem; color: #333;} .pin_table_total .pin_tbox.on .intor__wr .inp_st{ font-weight: 600; color:#ff7200;} .pin_table_total .pin_tbox.ip_tx .intor__wr input{ background-color:#fff;} .pin_table_total .md_tx{ font-size: 2rem;line-height:54px; color: #777;} .pin_ck_btn a{display:block; margin-left:5px; padding: 0 1.8rem; height: 54px; background:#333; font-size: 1.625rem; line-height: 54px; color:#fff!important; border-radius: 2px;} .Pintable{margin-bottom:5rem;} .checkIn.pin_st input[type=checkbox]+label{ margin-bottom: 10px;font-size:1.625rem; color:#444;} .Pintable .checkIn.pin_st input[type=checkbox]+label{margin-bottom: 20px;} .pin_view_box{ margin-top:-2rem; padding: 1.5em 6em 6em; box-shadow: 3px 3px 20px rgb(0 0 0 / 5%);background-color:#fff; border-radius: 50px;} .pin_pop_stt{ padding: 3rem 0 0;font-size: 1.9rem; font-weight: 500; text-align: center;} .pin_pop_stt .xi{display:block; margin-bottom: 10px;font-size: 4.5rem; color: #ff7200;} .pin_up_box{ margin-top: -2.5rem; margin-bottom: 6.5rem; padding: 5rem 4rem; box-shadow: 4px 4px 0px rgb(0 0 0 / 10%);background: #f9f9f9; border-radius: 30px;} .pin_up_box input{background:#fff;} .pin_view_bank .intor__wr{margin-bottom:0;} .pin_view_bank .intor__wr input[type=text]{background-color:#fff; color: #333;} .pin_view_bank select{ font-weight: 400;color: #333;} .nm_st{ margin-right: 2px; vertical-align: inherit;font-size: 1.825rem; font-weight: 600;} .mypage_bank input[type=text], .mypage_bank select{color:#333;} .cp_login .log__list{margin-top:2.5rem; margin-bottom: -2.5rem;} .main_notice_list{width:100%;} .main_notice_list > li .notice_tt{ padding-right: 25px; overflow: hidden; width: calc(100% - 66px);font-size:1.6rem;font-weight: 300; color: #666; white-space: nowrap; text-overflow: ellipsis;} .main_notice_list > li .notice_tt:hover{color:#333;} .main_notice_list > li .notice_tt .xi{margin-right:3px; font-size:1.75rem;} .main_notice_list > li .notice_date{ margin-left:auto; width:66px;font-size:1.4rem;font-weight: 300;color: #999;} .sec4__box{position:relative;} .sec4__box .sec_icon{ position:absolute; right: 21px; bottom:25px;} .sec4__box .sec_icon .xi{font-size:7.5rem; opacity: .5;} .sec4__box .sec_icon.st1{right:30px;} .sec4__box .sec_icon.st1 .xi{font-size:6rem;} .link_box { margin-bottom: 40px; padding: 24px 38px;width: 100%; background: #eb6624; border-radius: 20px;} .link_box ul {display: flex; align-items: center; justify-content: space-between} .link_box ul li:nth-child(2) { width: 146px;background: #000; line-height: 38px; text-align: center; border-radius: 45px;} .link_box ul li p { font-size: 16px;color: #fff;} .link_box ul li a { font-size: 14px; font-weight: bold;color: #fff; } #wrap * .link_box ul li p {letter-spacing: 0;} .lineBox_r a:hover {color: #000;} .lineBox_r a:focus {color: #000;} .lineBox_r a img { margin-top: -4px; margin-left: 4px;vertical-align: middle;} /* 리뉴얼 서브페이지 */ /* 구매하기 공통*/ .buyPage .newContent{padding-bottom: 12rem;} .buyPage #newSubVisual {padding: 8rem 0 11rem;} /* 모바일쿠폰 */ .buyPage .buy__btnList {margin-top: 0 ;} .buyPage .buy__btnList01 li a .buy__top__btm {height: 142px;} .buyPage .buy__btnList01 li a .buy__top__btm img {width: auto; height: 100%;} /* 이용안내 페이지 */ .newLimite1200 { margin: 0 auto; padding: 0 2rem; width: 100%;max-width: 124rem;} .inforStep {display: flex; align-items: center; justify-content: center; width: 8.6rem; height: 2.8rem; background: #FF7200; font-size: 1.5rem; color: #fff; border-radius: 50px;} .inforTitle {display: block; margin: 1.6rem 0; font-size: 2.4rem; font-weight: 500; line-height: normal; color: #000;} .inforText {font-size: 1.8rem; font-weight: 400; color: #666;} .inforTip { display: block; padding: 24px 0 16px 24px; border-top: 1px solid #D4D4D4; width: 100%;} .inforTip p {position: relative; font-size: 1.5rem; font-weight: 400; color: #666;} .inforTip p::after { position: absolute; top: 50%; left: -24px ; width: 16px; height: 16px; background: url('/img/sub/iconTip.svg') no-repeat center center;content: ''; transform: translateY(-50%);} .infrBr {display: block;} /* 구매방법 */ #container.inforPage {padding: 0 0 12rem 0;} #newSubVisual {padding: 8rem 0 12rem; text-align: center;} #newSubVisual h2 {margin-bottom:0.8rem; font-size: 4rem; font-weight: 700; line-height: normal; color: #000;} #newSubVisual p {font-size: 1.8rem; font-weight: 500; color: #666;} .newContent .subContent{margin-top: 0;} .newContent .subContent .infor_content{display: flex; gap: 4.8rem; justify-content: center; margin-bottom: 6.4rem; width: 100%; height: 350px;} .newContent .subContent .infor_content > .left_img,.newContent .subContent .infor_content > .right_text {width: 50%;} .newContent .subContent .infor_content .right_text {display: flex; align-items: flex-start; justify-content: space-between; flex-direction: column; padding-top: 1.6rem;} .newContent .subContent .infor_content01 .right_text {padding-top: 0;} /* 구매상품확인 */ .newContent .subContent .confirmation {display: flex; gap: 2.4rem; width: 100%;} .newContent .subContent .confirmation li { padding: 6.4rem 4rem; border: 1px solid #D4D4D4; width: calc((100% - 4.8rem) / 3); height: 423px; text-align: center; border-radius: 16px;} .newContent .subContent .confirmation li .imgBox { margin: 0 auto;width: 150px; height: 150px;} .newContent .subContent .confirmation li .imgBox img {width: 100%; height: 100%; } .newContent .subContent .confirmation li .inforTitle {margin: 4rem 0 1.6rem;} .newContent .subContent .confirmation .inforText {line-height: 27px;} .inforBr {display: none;} /* 구매상품사용방법 */ .newContent .subContent .infor_content01 {align-items: center; margin-bottom: 12rem; height: auto;} .newContent .subContent .infor_content01 .left_img {display: flex; align-items: center; justify-content: center; height: 200px;} .newContent .subContent .infor_content01 .left_img img {height: 100%; object-fit: cover;} .newContent .subContent .infor_content01 .inforTitle {margin: 0 0 1.6rem; font-size: 3rem; font-weight: 700; line-height: normal;} .newContent .subContent .infor_content01 .btBox {display: flex; gap: 1.6rem; align-items: center; margin-top: 2.4rem; text-align: center;} .newContent .subContent .infor_content01 .btBox a {display: flex; align-items: center; justify-content: center; padding-bottom: 2px; border: 1px solid #ff7200; width: 16.4rem; height: 5.6rem; font-size: 1.8rem; font-weight: 500; color: #ff7200; border-radius: 50px;} .newContent .subContent .infor_content01 .btBox a:hover {background: #ff7200; color: #fff; transition: all 0.3s;} .newContent .subContent .infor_content01 .inforTip {margin-top: 4.8rem; padding: 2.4rem 0 0 2.4rem;} .newContent .subContent .infor_content01 .inforTip p::after{top: 4px; transform: none;} /* 브랜드별 사용안내 */ .newContent .subContent .inforBrand {margin-top: 8rem; padding: 0 12.4rem; text-align: center;} .newContent .subContent .inforBrand .inforTitle{margin: 0;} .newContent .subContent .inforBrand .brandContent {display: flex; gap: 4.8rem 4rem; align-items: center; justify-content: flex-start; flex-wrap: wrap; margin-top: 4.8rem;} .newContent .subContent .inforBrand .brandContent li {width: calc((100% - 12rem) / 4);} .newContent .subContent .inforBrand .brandContent li .imgBox{display: flex; align-items: center; justify-content: center; margin-bottom: 2.4rem; width: 100%; height: 20.8rem;} .newContent .subContent .inforBrand .brandContent li .textBox h6{margin-bottom: 2.4rem; font-size: 1.8rem; font-weight: 500; color: #000;} .newContent .subContent .inforBrand .brandContent li .textBox a {display: flex; align-items: center; justify-content: center; margin: 0 auto; padding-bottom: 2px; border: 1px solid #666; width: 10.8rem; height: 4.8rem; font-size: 1.8rem; color: #666; border-radius: 50px;} .newContent .subContent .inforBrand .brandContent li .textBox a:hover {border: 1px solid #ff7200; color: #ff7200; transition: ease .3s;} /* 이용방법 팝업 */ .brandPop .modalCont {padding: 0; overflow: hidden;} .brandPop .modal--close { padding: 0;top: 3rem; right: 3rem;} .brandPop .modalCont .modalCont__tit {margin: 3rem 0;} .brandPop .modalCont .brandBg{display: flex; align-items: center; justify-content: center; padding: 4.5rem 0 ; background: #FFF3E8;} .brandPop .modalCont .brandText {padding: 3.2rem 3.2rem 4.8rem;} .brandPop .modalCont .brandText ul.text01 {display: flex; gap: 12px; flex-direction: column;} .brandPop .modalCont .brandText ul.text01 > li {padding-left: 2.4rem;} .brandPop .modalCont .brandText ul.text01 > li p {position: relative; font-size: 18px; font-weight: 400; color: #666;} .brandPop .modalCont .brandText ul.text01 > li p::before { position: absolute; top: 1.3rem; left: -1.7rem; width: 0.5rem; height: 0.5rem; background: #666;content: ''; border-radius: 50%;} .brandPop .modalCont .brandText ul.text02 {margin-top: 0.8rem;} .brandPop .modalCont .brandText ul.text02 > li {margin-bottom: 0.5rem; font-size: 15px; color: #999;} .brandPop .modalCont .brandText ul.text02 > li:last-child {margin-bottom: 0;} /*==========================================================================================================================*/ /* 20231201 */ /* 구매하기 리뉴얼 */ .btnTopText {display: flex; align-items: center; margin: 0 auto; width: 178px;} .btnTopText01 {margin-bottom: 0.6rem;} .btnTopText02 { padding: 0 0.5rem;width: 100%;} .btnTopText ul{ display: flex; gap: 12px; align-items: center;} .btnTopText ul.noT01{align-items: flex-start; justify-content: flex-start;} .btnTopText ul li { font-size: 13px;color: #fff; text-align: left;} .btnTopText ul li:nth-child(1) {display: flex; align-items: center; justify-content: center; padding: 0 20px; width: 60px; height: 20px; background: #D97D15; font-size: 11px; border-radius: 14px; } .btnTopText ul li .colorText{color: #FAF201;} /* 구매하기 페이지 팝업 */ .servicePopup , .buyLoadingPopup { overflow-y: auto;position: fixed; top:0; left:0; z-index: 999; width: 100%; height: 100%;} .popupWrap { padding-bottom: 30px;position: absolute; top: 80px; left: 50%; width: 582px; transform:translateX(-50%); } .servicePopup .popupWrap img , .buyLoadingPopup .popupWrap img{ border: 1px solid #e9e9e9; border-bottom: none;width: 100%; height: 100%;} /* 팝업 버튼 */ .popupWrap .btBox {display: flex; gap: 5px; align-items: center; justify-content: flex-end; padding: 0 10px; width: 100%; height: 47px; background: #000;} .popupWrap .btBox a {display: inline-block; padding: 5px 10px; background: #393939; color: #fff;} @media only screen and (max-width : 1440px){ /*[s] Main Style */ #mVisual .vTxtArea{padding:0 2rem;} .sec3slide .swiper-button-prev {left: 23%;} .sec3slide .swiper-button-next {right: 23%;} /*[e] Main Style */ } @media only screen and (max-width : 1320px){ /*[s] Main Style */ #startup_inquiry .startup_info>dl{padding:0 2rem;} /*[e] Main Style */ } @media only screen and (max-width : 1240px){ .scroll_info{display:block;} .scrollTb{ display:block; overflow:hidden; overflow-x:scroll;width:100%;} .scrollTb>*{width:1200px !important;} /*[s] Main Style */ #startup_inquiry .startup_info>dl{padding:0 1rem;} /*[e] Main Style */ /*[s] Sub Style */ .stackArea .stack_re>.textBox{padding-right:4rem;} .stackArea .stack_re:nth-child(even)>.textBox{padding:0 0 0 4rem;} /*[e] Sub Style */ /* 221021 main */ .sec2__flex { gap: 0 ; justify-content: center;flex-wrap: wrap;} .sec2__img { flex: none; margin-bottom: 5rem;width: 100%; order: 1;} .sec2__txt { width: 100%; max-width: 600px;order: 2;} .sec2__txt .bar {border-top: 1px solid #ddd;} } @media only screen and (max-width : 1200px){ .scroll_info{display:block;} .scrollTb{ display:block; overflow:hidden; overflow-x:scroll;width:100%;} .scrollTb>*{width:1200px;} /*[s] Sub Style */ .shadowStyle{gap: 2rem;flex-wrap: wrap;} .shadowStyle .buyList--items{width: calc((100% - 2rem)/2);} .td_cont--inner{flex-direction: column;} .nTable.giftTable>table .td_cont__tit{width: 100%;text-align: center;} .nTable.giftTable>table .td_cont--inner .ImgBox + .td_cont__tit{padding: 1rem 1rem 0;} /*[e] Sub Style */ /* 221021 main */ .sec4 .wrap1200 {padding: 0 3rem;} .sec4__box { flex: 1; width: auto;height: 25rem;} } @media only screen and (max-width : 1090px){ .buy__giftList {gap: 2rem;} .buy__giftList li {width: calc((100% - 4rem)/3);} } @media only screen and (max-width : 1024px){ /*[s] All Style */ .depth3{ display: flex; justify-content: space-between;margin-bottom:6rem;} .depth3:before{display:none;} .depth3>a{ padding:1rem 2rem;width:100%; height:auto;} .depth3>a+a{margin-left:-1px;} .depth3>a>span:before{display:none;} /*[e] All Style */ /*[s] Main Style */ /* visual */ #mVisual .slick-arrow{display:none !important;} #mVisual .slick-dots{display:block !important;} .contFlex{max-height: 90rem;} .mEasy{background: url('/images/main/img_m_easyBg.jpg') right top;background-size: cover;} .giftCardArea{display: none;} .easySlide.swiper{max-width: none;} .easySlideInner{height: auto !important;} .easytxtBox__tit{font-size: 2.2rem;} .easytxtList--items{font-size: 2rem;} .easySlideInner{ padding: 3rem 6rem; width: 100%;max-width:none;} .easyimgBox{width: 16rem;max-width: 15rem;} .easySlide .swiper-button-prev{transform: translate(0,50%);} .easySlide .swiper-button-next{transform: translate(0,50%);} #mainMotion{height: 100vh;max-height: 90rem;} #mainMotion > img{height: 100%;object-fit: cover;object-position: top left;/* width: 100%; */} /* pr Movie */ .mPr{background:url("../img/images/main/img_m_prBg.jpg") center;background-size: cover;} .mBoard{display: flex;flex-direction: column;} .mBoardLink{width: 100%;height: 25rem;} .mBoardInner{padding: 0 3rem;max-width: none;} .mBoardLink__etc{margin: 0 0 2rem 0;} #mainMotion .mainMotion_in{top: 2%;left: 46%;} #mainMotion .gift-money.one{left: -40%;} .buyListArea{margin: 6rem 0 10rem 0 ;} .buyBanner{height: 70rem;background: url("../img/images/sub/img_m_buyBannerBg.jpg") center no-repeat;background-size: cover;} .buyBannerTxt{margin: 3rem 0 0rem 0;} .buyBannerBox{height: 100%;} .buyBannerImg{display: none;} .buyBannerInner{padding: 0;width: 100%;} .BenefitsBanner{gap: 3rem;flex-wrap: wrap;} .BenefitsBanner--items{width: calc((100% - 3rem)/2);} .BenefitsBannerTxtBox{padding: 0 0rem 0 1rem;} .subTit__txt{font-size: 2rem;} .th_total{width: 14rem;} .th_delivery{width: 14rem;} .th_payment{width: 14rem;} .th_title{width: 20rem;} .paymentChkall{display: inline-block;} .btn_table{padding: 0.7rem 2rem;} /*[s] Sub Style */ /* 구매하기 */ .moGiftBox_wrap{display: block;} .giftTable{display: none;} .giftTable1 {display: block;} .buy__slideWrap {padding: 5rem 0 6rem;} .buyCont__btm__box { justify-content: center;padding-left: 0;} /*[e] Sub Style */ .buy__slideTop { display: block;margin: 0 0 2rem 0; max-width: none; text-align: center;} .buy__giftList {display: block; } .buy__giftList li { margin: 0 auto 3rem;width: 100%; max-width: 38rem; } .buy__giftList li:last-of-type {margin-bottom: 0;} /* 221021 main */ .sec3slide .swiper-button-prev, .sec3slide .swiper-button-next {display: none;} .sec.sec2 {padding: 8rem 0;} .sec3 {padding: 8rem 0;} #main-visual, #main-visual .main-slider, #main-visual .main-slider .slick-slide, #main-visual .main-slider .slide-media, #main-visual .main-slider .mobile_in{height:100vh !important;} #main-visual { padding: 3.91vw 0 5.86vw;height: auto !important;} #main-visual .main-slider .mobile_in{width: 100%;} #main-visual .main-slider .mobile_in video, #main-visual .main-slider .mobile_in iframe{height:100% !important;} #main-visual .main-slider .mobile_in video {object-fit: cover;} .group_inpBtn{display:block; flex:100%; margin-top:1em; margin-left:0;} .buy__btnList {flex-wrap: wrap;} .text-line {text-decoration: line-through;} .flex.gift_pinBt {display: block;} .flex .pin_Bt { margin-top: -35px; margin-left: 0;float: right;} /* 20230629 추가 */ #main-visual .main-slider .caption .main_txt {padding-top: 0;} .coupon_img { margin: 0 auto;width: 80%; height: auto;} } @media only screen and (max-width : 840px){ .tos__bold {font-size: 2.4rem;} /*[s] All Style */ .nTable>table th, .nTable>table td{padding:0rem; font-size:2.2rem;} .nTable>table th{ padding:0;height:8rem; font-size:2.4rem;} .nTable>table ul.bul>li{font-size:2rem; line-height:1.6;} .nTable.giftTable1 > table td {padding: 10px 0; font-size: 16px;} .nTable>table .transportation>li{padding-left:0;} .nTable>table .transportation>li>p{padding-bottom:1rem; position: relative; font-size:2.2rem; line-height:1;} .nTable>table .transportation>li>dl>dt>span{font-size:2rem; line-height:4rem;} .nTable>table .transportation>li>dl>dd .inT{font-size:2rem; line-height:4rem;} .nTable +.nTable{margin-top:4rem;} .nTable.onlineTable {margin-top: 0;} .tabDepth{margin-bottom:3rem;} .tabDepth>a{height:5.2rem; font-size:2rem;} .nTable>table .td_cont--inner .ImgBox + .td_cont__tit{font-size: 2.2rem;} .depth3>a{font-size:2rem; line-height:1.4;} .groupTit{padding-bottom:4rem;} .groupTit .step{font-size:2.4rem;} h4.txt{font-size:3rem;} .nTxt{font-size:2rem; line-height:2.8rem;} ul.bul>li{padding-left:1.5rem; font-size:2rem;} ul.star>li{padding-left:2.9rem; font-size:2rem;} ul.etc>li{padding-left:4rem; font-size:2rem;} h4.line{margin-bottom:4rem;} h4.line.mt{margin-top:6rem;} h5.bul{margin:6rem 0 3rem; padding-left:2.6rem; font-size:2.8rem;} h5.bul:before{width: 1.8rem; height: 1.8rem; border-width:0.4rem;} h5.bul .more{padding:1rem 1.5rem; top:-0.7rem; font-size:1.8rem;} .scrollTb>*{width:120rem;} .nTable.scrollTb>*{width:840px !important;} .introduceArea .scrollTb>*{width:111.8rem;} .admGo{ position: relative; z-index:7;font-size:0; line-height:0;} .admGo>a{ display:inline-block;padding:0.625rem 1.25rem; position:absolute; bottom:0; left:0; background-color:#f00; font-size:1.25rem; line-height:1.2; color:#fff;} .admGos{font-size:1.8rem;} .arrBtn{font-size:2rem; line-height:4.6rem;} .arrBtn>span{padding-right:60px;} select.base{height:5rem; background-size:4.3rem; font-size:2rem; line-height:4.8rem;} .mTit--etc{font-size: 2rem;} .mTit__tit{line-height: 1.2;} .mTit__txt{font-size: 2.2rem;} .mBoardTxt__txt{font-size: 2.2rem;} .mBoardLink__etc{font-size: 2rem;} /*[e] All Style */ /*[s] Main Popup Style */ .hd_pops{/* left:2rem !important; */ right:2rem !important;} /*[e] Main Popup Style */ /*[s] Main Style */ .mTitle{margin-bottom:5.5rem !important;} .mTitle>dt{margin-bottom:3rem; padding-bottom:3.5rem;} .mTitle>dd{font-size:2.2rem;} /* 221021 main */ /* visual */ #main-visual, #main-visual .main-slider, #main-visual .main-slider .slick-slide, #main-visual .main-slider .slide-media, #main-visual .main-slider .mobile_in{height:60vh !important;} #main-visual { padding: 6.67vw 0 5.95vw;height: auto !important;} #main-visual .main-slider .mobile_in{width: 100%;} #main-visual .main-slider .mobile_in video, #main-visual .main-slider .mobile_in iframe{height:100% !important;} #main-visual .main-slider .mobile_in video {object-fit: cover;} /* visual */ #mVisual .visualRoll .slider img{max-height:70rem;} #mVisual .vTxtArea .vTxt_in{padding-bottom:0;} #mVisual .vTxt .ii.logo.i01 img{height:12rem;} #mVisual .vTxt .ii.logo.i02{margin-top:2rem;} #mVisual .vTxt .ii.logo.i02 img{height:3.6rem;} #mVisual .vTxt .ii.txt{padding-top:2.5rem; font-size:2.4rem;} #mVisual .slick-dots>li+li{margin-left:2rem;} #mVisual .slick-dots>li button{width:2.8rem !important; height:2.8rem;} /* 메뉴 소개 */ /*[e] Main Style */ /*[s] Sub Style */ .mLogoBox--inner__piece{ width: calc((100%)/3);} .td_mobile b{width: 14rem;} /*[e] Sub Style */ .buy__slideTxt br {display: none;} .buyBanner.pd {margin: 8rem 0;} .temPayment .btnTotal input + div{height:15rem} /* 221021 main */ .tem #sVisual p { padding: 0 1rem;font-size: 2rem;} .advan__sm {font-size: 2rem;} .advan__sm br {display: none;} .ci__arti {font-size: 2rem;} .guideWrap > b {font-size: 2.2rem;} .color__txt b {font-size: 2rem;} .sec4__flex {flex-wrap: wrap;} .sec4__box {flex: none; width: 100%; max-width: 500px; height: 23rem ;} .sec2__top p,.sec2__top em,.sec2__txt li p,.s3s__box b,.s3s__box .arti,.dao_Main_btn a,.arti__flex p {font-size: 2rem;} .sec2__txt li b, .s3s__box .tit, .sec4__box b {font-size: 2.4rem;} .memTab{padding:3rem;} .buyCont__Bg {background-size: contain;} .memTab--items + .memTab--items::before{height: 1.5rem;} .menuLayer .gnb>li>a{ height: 8rem;font-size:2.125rem;} .menuLayer .gnb .gnbSub>li>a{font-size:2rem;} /**/ .job__box {min-height: 22rem;} .r_qk_List > .cont .in{ padding: 0 10px;height:11rem; border-radius: 15px;} .r_qk_List > .cont .in .img .s_tt{display:none;} .sec4__box .tit{font-size:2rem;} .memTab--items span{font-size:1.85rem;} .memBottom{padding:3rem 2rem 6rem;} .memTel{margin:0 0 2rem 0;} .memTel__tit{font-size:2.25rem;} .memTel__callTxt{font-size:4rem;} .meminfoLink{gap:0; flex-wrap:wrap; margin-left:-3px;} .meminfoLink--items{flex:50%;} .meminfoLink--items + .meminfoLink--items::before{display:none;} .memTime{padding:2rem 3rem; border-radius: 2rem;} .memTimeTit{font-size:2.25rem; border-radius: 2rem;} .memTimeList--items b, .memTimeList--items p{font-size:1.825rem;} .meminfoLink--items a{ display: block; margin: 0 3px 3px 0; padding: 5px 0; border:1px solid #ddd;font-size:1.825rem; text-align: center; border-radius: 4px;} #pageName{height:18rem;} .sec.sec2 .sec2__cont .sec2__top p br{display:none;} .sec2__top h5{font-size:4rem;line-height: 5rem;} .sec2__txt li p br{display:none;} .sec2__txt li b, .s3s__box .tit, .sec4__box b{font-size:2.25em} .sec2__top p, .sec2__top em, .sec2__txt li p, .s3s__box b, .s3s__box .arti, .dao_Main_btn a, .arti__flex p{font-size:1.825em} .sec4__box{height:25rem;} .sec3 .sec2__top p{margin-bottom:4rem;} .pop_itx{font-size:1.825rem; line-height: 1.3;} .checkIn.fs_st input[type=checkbox]+label, .checkIn.fs_st input[type=radio]+label, .board_write__stt{font-size:1.8em;} .detailCont .checkIn.fs_st label{ width:80%;} .buyCont__txt strong{font-size:4.25em;} .buyCont__txt p, .buy__txt p{font-size:2em;} .buyCont__Bg .buyCont__txt img{width:10rem !important;} .buy_img_bg{height:31rem;} .buy__slideTop p{font-size:2.125rem;} .popupModalVideo a::after{width:6rem; height: 6rem;} .ck_page .wrap440 .self__txt{font-size:1.825em;} .ck_page .wrap440 .ck_ttw{font-size:1.625em;} .subContent{margin:0;} .btnDepth{margin-bottom:3rem;} .infor_content{ display:block; margin-bottom: 40px; height: auto;} .infor_content .left_text{ margin-bottom: 3rem;width:100%;} .infor_content .left_text p br{display:none;} .infor_content .left_text > p{font-size:2.25em;} .infor_content .left_text .small{font-size:1.825em;} .bo_w_flie .stt{font-size:1.625rem;} #main-visual .main-slider .caption{transform: translate(-50%,-50%);} .comp__topBg strong{ margin:4rem 0 3rem;font-size:5.125rem;} .comp__topBg p{font-size:2rem;} .ci__tit{font-size:3.5rem;} .memTimeList--items b{width:12rem;} .modalButton{font-size:2rem;} .page_prev{ padding:1.5rem;font-size:1.625rem; border-radius: 10px;} .join_scroll{font-size: 1.5em;} .buyCont__btm__box div img{width:auto !important; height:45px !important;} .left__notiList li a p, .right__subtxt{font-size:1.625rem;} .right__subtit{font-size:1.825rem;} .serv__top__tit{font-size:3rem;} .welf__etc p{font-size:1.625rem;} .modal2 .agree_wrap{font-size: 1.625em;} /* 2023-04-10 내상품권 텍스트 */ .mygift_txt {padding: 24px 30px;} .mygift_txt br {display: block;} /* 20230629 추가 */ .gift_ck_pop .writeArea {font-size: 2.14vw;} } @media only screen and (max-width : 640px){ .buyList{gap: 5rem;flex-wrap: wrap;} .buyList--items{width: calc((100% - 2rem - 1px)/3);} .buyDetail{align-items: flex-start;padding: 1rem 0;height: auto;} .buyList--items{width: 100%;} /* 구매하기 */ .buyListArea{padding: 0rem 2.5rem;} .BenefitsBanner{max-width: 60rem;} .productBox{justify-content: space-between;flex-wrap: wrap;padding: 3rem 0 4rem;width: 100%;} .productBox__price{width: auto;font-size: 3.6rem;} .productBox__tit{font-size: 2.4rem;} .productBox--buttonWrap{margin: 3rem 0 0 0;width: 100%;} /* 구매하기 디테일 */ .shadowStyle .buyList--items{width: calc(100%);} .shadowStyle .buyDetailName__price{font-size: 2.8rem;} .shadowStyle .buyDetailName__tit{font-size: 2.8rem;} .shadowStyle .buyDetail__tit{font-size: 2.2rem;} .buyDetail{display: flex;align-items: center;} .buyDetail__tit{font-size: 2.2rem;} .buyDetailName__tit{font-size: 2.2rem;} .buyDetailName__price{font-size: 2.6rem;font-weight: 400;} .buyDetailCate p{font-size: 2rem;} .amountTen, .amountMinus, .amountInput, .amountPlus{width: 5rem;height: 5rem;} .amountInput{font-size: 1.8rem;} .amountTen{width: 7rem;font-size: 2rem;} .btnNormal{max-width: 17rem;height:5.5rem;font-size: 2rem} /* 보이스피싱 주의 */ .phishingCaution{padding: 8rem 3rem 6rem;background: url("../img/images/sub/img_m_phishingBg.jpg") bottom center no-repeat;} .phishingBox{padding: 2.5rem;} .phishingInfoArea{padding: 6rem 3rem 0;} .paymentInfo{flex-direction: column;} .mLogo__Img {max-width: 14rem;max-height: 5rem;} .paymentDetail{flex-wrap: wrap;} .innerDetail{max-width: none;} .lineTit{ width: 16rem;font-size: 2rem;} .lineTxt{font-size: 1.8rem;} .moneyTxt .lineTxt{font-size: 2rem;} .td_mobile b{width: 9rem;} .nTable>table th, .nTable>table td{font-size: 1.8rem;} .nTable>table .td_total .td_mobile > p{font-size: 2.2rem;} .nTable>table .td_cont--inner .ImgBox + .td_cont__tit{font-size: 2.4rem;} .nTable.giftTable1 > table td {padding: 1rem; font-size: 1.4rem;} .filterWrap{justify-content: flex-start;flex-direction: column;} .buy__btnList {gap: 3rem; flex-wrap: wrap;} .buy__btnList li {width: 100%;} .buy__btnList li .txt_box p br{ display: none;} /* .buy__btn__top img {width: 21.8rem;} */ .guideWrap.top {margin-top: 4rem;} .guide__Flex {flex-wrap: wrap;} .guide__box1 {flex: 1 50%;} .guide__box1:first-of-type { border-bottom: 1px solid #eee;border-left: 1px solid #eee;} .guide__box1:nth-of-type(2) { border-bottom: 1px solid #eee; border-right: 1px solid #eee;} .guide__box1:nth-of-type(4) { border-right: 1px solid #eee;} .guide__box2 {flex: 1 100%; border-bottom: 1px solid #eee; border-right: 1px solid #eee; border-left: 1px solid #eee;} .guide__box2:nth-of-type(2) {border-bottom: none;} .welf__flex {flex-wrap: wrap;} .job__box {flex: none; width: calc((100% - 2rem )/2);} .welf__box {flex: none; width: calc((100% - 2rem )/2);} h2.co_black{color:#fff !important;} .r_qk_List > .cont .in{ width:9rem;height:9rem;} .r_qk_List > .cont .in .img img{width:39px !important;} #main-visual .main-slider .caption{transform: translate(-50%,-50%);} .dao_Main_btn a{ padding: 0 2rem;min-width: 16rem;} .sec3 .sec2__top h5{margin-top:2rem;} .buyCont__txt strong{font-size:3.825rem;} .buy__txt strong span{font-size:3rem; line-height: 1.3;} .buyCont__btm__box{display:block; text-align: center;} .buyCont__btm__txt b{ display:block; margin-top:7px;font-size:2.25em;} .content{padding:5rem 0 0 0;} .btn_complete{margin:0 auto 0;} .buyCont__btm{padding:3rem 0;} .lineBox.flexBetween.discount.st{display:block;} .lineBox.flexBetween.discount.st p span{font-size:1.825em !important;} .buy__btn__top{font-size:2.25em;} .buy__btnList li{width:85%;} .buy__btnList li a{min-width:inherit;} .ci__dw__Wrap{justify-content: flex-start;} .welf__box strong{font-size:2rem;} .guide__box2{padding:3rem;} .buy__btnList li{margin-bottom: 4em;} .link_box {padding: 25px 15px;} .lineBox_r a:hover {color: #000;} .lineBox_r a:focus {color: #000;} .btnArea {margin-top: 30px;} /* 20230817 ARS CSS 추가 */ .phone_box {gap: 10px;} .arsBtn a {padding: 12px 24px 14px; font-size: 16px;} .num_box strong {font-size: 18px;} .ars_page .wrap440 .membercont__top h5 br.m_none{display: block;} /* 20231205 추가 */ .buy__btnList li .buy__btn__top .btnTopText ul li {margin-bottom: 0;} .detailCont.noml .btnTotal .t1 {font-size: 12px;} .detailCont.st .btnTotal p.evn_t01 {font-size: 14px;} .btnTopText02 {width: 252px;} .popupWrap {width: 90.63vw;} } @media only screen and (max-width : 480px){ /* 221021 main */ .sec::after {display: none;} .sec::before {display: none;} .sec .position {display: none;} .sec .position2 {display: none;} .wrap1200 {padding: 0 2rem;} #main-visual .main-slider .caption b {font-size: 4rem;} /*구매하기 */ .buyCont__Bg {height: auto;} .mb480 {display: block;} .buyCont__btm__box {gap: 1.5rem;} .comp__topBg p br {display: none;} .dayFilterList--items{width:13rem;} .group_inpBtn input{width:14rem;} .moGiftBox .moGiftBox--imgBox{flex:100%;} .moGiftBox .moGiftBox--imgBox .img{height:100px;} .moGiftBox .moGiftBox--textBox{flex:100%; padding:1.5rem 1rem;} .moGiftBox .GBox_btn > li a{font-size:1.45em;} .moGiftBox_view{font-size: 1.825em;} .link_box ul { justify-content: center;flex-wrap: wrap;} .link_box ul li:nth-child(2) {margin-top: 15px;} .modal3{left: 50%;} /* 20230510 popup 텍스트 */ #wrap * .modal_txt h3 {font-size: 22px;} #wrap * .modal_txt p {font-size: 16px;} /* 20230817 ARS CSS 추가 */ .V_txt {padding: 0 1%;text-align: center;} .ars_phone li:nth-child(1) {width: 45%;} .ars_phone li:nth-child(2) {width: 55%;} .ars_phone li p {font-size: 14px;} .phone_box .notiTxt {font-size: 12px;} .phone_box .notiTxt span{line-height: 18px;} .ars_page .wrap440 .membercont__top h5 br.m_none{display: none;} .num_box .input_box input { padding: 9% 10% 11%;width: 48px; height: 53px; font-size: 28px;} .ars_phone li {padding: 12.5px 10px;} .brandPop .modal--close {top: 4.8vw; right: 4.8vw; width: 4.17vw; height: 3.96vw;} } @media only screen and (max-width : 360px){ .phone_box .notiTxt span br {display: none;} } /* S: 20230914 newStyle */ /* S: datepicker style */ #ui-datepicker-div.ui-widget {font-family: 'Noto Sans KR', sans-serif;} .ui-datepicker-trigger {position: absolute; right: 15px; width: auto;} #ui-datepicker-div { padding: 24px 24px 14px; border: none; box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.15);width: 284px; border-radius: 10px;} #ui-datepicker-div.ui-datepicker .ui-datepicker-header { border-top: none; border-bottom: 1px solid #000; border-right: none; border-left: none;background: #fff; border-radius: 0;} #ui-datepicker-div.ui-datepicker .ui-datepicker-title {margin: -2px 0 7px; font-size: 14px; line-height: 20px; text-align: left;} #ui-datepicker-div.ui-datepicker .ui-datepicker-title span { margin-right: 3px;font-size: 15px;} #ui-datepicker-div.ui-datepicker .ui-datepicker-prev{right: 30px; left: auto;} #ui-datepicker-div .ui-widget-header .ui-icon{margin: 0;top: 0;right: 0;left: 0;width: 20px;height: 20px;background: url('../img/coupon/arrowLeft.svg') no-repeat center center;background-size: 100% 100%;cursor: pointer;} #ui-datepicker-div .ui-widget-header .ui-datepicker-next .ui-icon {transform: rotate(180deg);} #ui-datepicker-div .ui-state-hover, #ui-datepicker-div .ui-widget-content .ui-state-hover, #ui-datepicker-div .ui-widget-header .ui-state-hover { border: none;background: none;} #ui-datepicker-div .ui-datepicker-calendar {margin-top: 13px;} #ui-datepicker-div.ui-datepicker th {padding: 0; width: 24px; height: 24px;} #ui-datepicker-div.ui-datepicker th span{ display: block; padding-left: 1px;font-size: 10px; font-weight: 500; color: #7b7b7b; text-align: left;} #ui-datepicker-div.ui-datepicker th:nth-child(3) span, #ui-datepicker-div.ui-datepicker th:nth-child(5) span{ padding-left: 4px;} #ui-datepicker-div.ui-datepicker th:nth-child(6) span, #ui-datepicker-div.ui-datepicker th:nth-child(7) span{ padding-left: 6px;} #ui-datepicker-div.ui-datepicker td {padding: 12px 11px 0 0;} #ui-datepicker-div .ui-state-default, #ui-datepicker-div .ui-widget-content .ui-state-default{border: none; width: 24px; height: 24px; background: #fff; font-size: 14px; font-weight: 400;line-height: 1.2; color: #000; text-align: center;} #ui-datepicker-div .ui-state-active{ margin-top: -4px;border: none; width: 24px; height: 24px; background: #FF6532; color: #fff; border-radius: 50%;} #ui-datepicker-div.ui-datepicker .ui-datepicker-prev, #ui-datepicker-div.ui-datepicker .ui-datepicker-next {top: 0;width: 20px;height: 20px;} #ui-datepicker-div.ui-datepicker .ui-datepicker-next{right: 0;} #ui-datepicker-div .ui-datepicker-close {display: none;} #ui-datepicker-div .ui-widget-content { margin: 0; padding: 0; border: none; position: absolute; top: 21px; right: 85px; background: none;} #ui-datepicker-div .ui-widget-content .ui-datepicker-current {margin: 0; padding: 0;width: 26px; height: 26px; font-size: 14px; font-weight: 400; color: #000; opacity: 1;} /* E: datepicker style */ .newStyle .dayFilterList{margin-right: 15px;} .newStyle .dayFilterList li{width: auto;min-width:7rem;} .newStyle .dayFilterList li a{padding: 0 10px;width: 100%;} .newStyle .group_inpBtn{margin-left: 0;} .newStyle .group_inpBtn .new_inp_btn{padding: 0 10px;width: auto;min-width:7rem;} .newStyle .dayFilterArea{row-gap: 10px;} .myGift .content, .renewal .content {padding: 0;} .renewal .memberPage{padding-top : 0;} .renewal .tab-content .swiper-slide {padding: 1.2rem;} .renewal .tab-content .swiper-slide .servSlide__inner{box-shadow: 0 3px 15px rgba(0,0,0,0.08);} @media only screen and (max-width: 1024px){ .newStyle .dayFilterList{margin-right: 5px;} .newStyle .group_inpBtn{flex: auto;margin: 0;} .newStyle .group_inpBtn input{width: 13rem;} .newStyle .group_inpBtn .input_sec{margin: 0 5px;} } /* E: 20230914 newStyle */ /* 다오기프트 리뉴얼 */ @media screen and (max-width : 1280px){ /* 20231031 main 리뉴얼 */ #main-visual {padding: 4.69vw 0;} #main-visual .mainWrap {gap: 1.88vw; padding: 0 3.91vw 0 5vw; } #main-visual .mainWrap .textBox{margin-left: 0;} #main-visual .mainWrap .textBox h1 {font-size: 3.12vw; line-height: 5vw; } #main-visual .mainWrap .textBox p { margin: 1.88vw 0 3.75vw;font-size: 1.41vw;} #main-visual .mainWrap .textBox .btnBox {gap: 1.25vw;} #main-visual .mainWrap .textBox .btnBox a {width: 10.94vw; height: 3.75vw; font-size: 1.17vw;} .sec .secTitle {font-size: 2.34vw;} .sec .secWrap {padding: 0 5vw;} .sec .secWrap .secContent {margin-top: 3.75vw;} .sec .secWrap .secContent .textBox strong {font-size: 1.41vw;} .sec .secWrap .secContent .textBox p {font-size: 1.17vw; line-height: 1.72vw;} /* 가장인기 있는 상품 */ .sec02 {padding: 4.69vw 0;} .sec02 .secWrap .secContent ul {gap: 1.88vw;} .sec02 .secWrap .secContent ul li {width: calc((100% - 7.52vw) / 5); height: auto;} .sec02 .secWrap .secContent ul li a {padding: 1.41vw;} /* 서비스 이용 */ .sec03 {padding: 4.69vw 0 6.25vw;} .sec03 .secWrap .secContent ul {gap: 1.88vw;} .sec03 .secWrap .secContent ul li {width: calc((100% - 3.76vw) / 3);} .sec03 .secWrap .secContent ul li a{padding: 4.38vw 3.2vw;} .sec03 .secWrap .secContent ul li .iconBox {top: 1.25vw; right: 1.25vw; width: 2.5vw; height: 2.5vw; } .sec03 .secWrap .secContent .textBox strong {margin: 1.88vw 0 0.6vw; font-size: 1.41vw;} .sec03 .secWrap .secContent .textBox p {font-size: 1.17vw; line-height: 1.72vw;} /* 중간베너 */ .sec04 .swiper-slide .slideBg {padding: 6.25vw 0 8.44vw;} .sec04 .swiper-slide .slideBg .secWrap { gap: 9.92vw;justify-content: center; padding: 0 9.38vw;} .sec04 .swiper-slide .slideBg .secWrap .textBox p { margin-bottom: 1.88vw;font-size: 1.41vw;} .sec04 .swiper-slide .slideBg .secWrap .textBox h2 {font-size: 2.34vw; line-height: 3.75vw;} .sec04 .swiper-slide .slideBg .secWrap .textBox h2 span{font-size: 2.34vw;} .sec04 .swiper-slide .slideBg .secWrap .imgBox {height: 14.3vw;} .sec04 .swiper-pagination {bottom: 3.75vw;} /* 고객센터 */ /* 왼쪽 */ .sec05 {padding: 6.25vw 0 ;} .sec05 .secWrap .secContent {gap: 1.88vw; margin-top: 0; height: 24.38vw;} .sec05 .secWrap .secContent .iconBox {top: 1.25vw; right: 1.25vw; width: 2.5vw; height: 2.5vw; } .sec05 .secWrap .secContent .textBox strong {margin: 0 0 0.6vw;} .sec05 .secWrap .secContent .leftBox .box.qna {margin-bottom: 1.88vw;} .sec05 .secWrap .secContent .leftBox .box.qna a, .sec05 .secWrap .secContent .leftBox .box.customerCenter {gap: 2.5vw; padding: 2.5vw;} .sec05 .secWrap .secContent .imgBox{width: 6.25vw; height: 6.25vw;} .sec05 .secWrap .secContent .imgBox img {width: 100%; height: 100%;} /* 오른쪽 */ .sec05 .secWrap .secContent .rightBox {padding: 0 2.5vw 2.5vw;} .sec05 .secWrap .secContent .rightBox .notice .noticeTitle {padding: 2.5vw 0 1.88vw;} .sec05 .secWrap .secContent .rightBox .notice strong {font-size: 1.41vw;} .sec05 .secWrap .secContent .rightBox .notice ul {padding-top: 1.88vw;} .sec05 .secWrap .secContent .rightBox .notice ul li {margin-bottom: 1.25vw;} .sec05 .secWrap .secContent .rightBox .notice ul li a p {font-size: 1.17vw;} /* 구매하기 */ .buyPage #newSubVisual {padding: 4rem 0 9rem;} .buy__btnList01 {gap: 5.6rem 4rem;} /* 서브페이지 이용방법 */ #container.inforPage {padding: 0 0 8rem 0;} #newSubVisual {padding: 4rem 0 6rem;} #newSubVisual h2{font-size: 3rem;} #newSubVisual p {font-size: 1.5rem;} .inforStep {width: 7.5rem; height: 2.6rem; font-size: 1.4rem;} .inforTitle {margin:1.2rem 0; font-size: 1.8rem;} .inforText {font-size: 1.5rem;} .inforTip {padding: 1.6rem 0 1.2rem 2.4rem;} .inforTip p {font-size: 1.4rem;} .inforTip p::after {top:4px; transform: none;} .newContent .subContent .infor_content .right_text {padding-top: 1.4rem;} /* 구매방법 */ .newContent .newLimite1200 {padding: 0 6.4rem;} .newContent .subContent .infor_content {gap: 3.2rem; height: 25.68vw;} .newContent .subContent .infor_content .left_img img { width: auto; height: 100%;} /* 구매상품확인 */ .newContent .subContent .confirmation li { padding: 4.69vw 3.13vw;width: 27.54vw; height: auto;} .newContent .subContent .confirmation li .imgBox {width: 11.71vw; height: 11.71vw;} .newContent .subContent .confirmation li .inforTitle {margin: 2.34vw 0 0.8vw; font-size: 1.76vw;} .newContent .subContent .confirmation .inforText {font-size: 1.46vw; line-height: 2.15vw;} /* 구매상품 사용방법 */ .newContent .subContent .infor_content01 {align-items: center; margin-bottom: 8rem; height: auto;} .newContent .subContent .infor_content01 .inforTitle {margin: 0 0 1.2rem; font-size: 2.4rem;} .newContent .subContent .infor_content01 .btBox a {width: 14rem; height: 4.8rem; font-size: 1.5rem;} .newContent .subContent .infor_content01 .inforTip {margin-top: 3.2rem; padding: 1.6rem 0 0 2.4rem;} .newContent .subContent .infor_content01 .inforTip .tipBr {display: none;} .newContent .subContent .inforBrand {padding: 0;} .newContent .subContent .inforBrand .brandContent {gap: 2.4rem;} .newContent .subContent .inforBrand .brandContent li {width: calc((100% - 9.6rem) / 5);} .newContent .subContent .inforBrand .brandContent li .imgBox { margin-bottom: 1.6rem;height: 15.63vw;} .newContent .subContent .inforBrand .brandContent li .imgBox img{width: auto; height: 100%;} .newContent .subContent .inforBrand .brandContent li .textBox h6 {margin-bottom: 1.6rem; font-size: 1.5rem;} .newContent .subContent .inforBrand .brandContent li .textBox a {width: 8.3rem; height: 3.6rem; font-size: 1.4rem;} } @media screen and (max-width : 1024px){ /* 20231031 main 리뉴얼 */ #main-visual {padding: 5.47vw 0 4.88vw;} #main-visual .mainWrap {gap: 1.56vw; padding: 0 3.61vw;} #main-visual .mainWrap .textBox h1 {font-size: 2.93vw; line-height: 4.69vw;} #main-visual .mainWrap .textBox p { margin: 1.56vw 0 3.13vw;font-size: 1.56vw;} #main-visual .mainWrap .textBox .btnBox {gap: 1.56vw;} #main-visual .mainWrap .textBox .btnBox a {width: 11.72vw; height: 4.49vw; font-size: 1.37vw;} .sec .secWrap {padding: 0 3.13vw;} .sec .secWrap .secContent {margin-top: 3.13vw;} .sec .secWrap .secContent .textBox strong {font-size: 1.56vw;} .sec .secWrap .secContent .textBox p {font-size: 1.37vw; line-height: 2.05vw;} .sec03 .secWrap .secContent ul li .iconBox, .sec05 .secWrap .secContent .iconBox {top: 1.17vw; right: 1.17vw; width: 3.13vw; height: 3.13vw; } .sec02 {padding: 4.88vw 0;} .sec02 .secWrap .secContent ul {gap: 2.34vw;} .sec02 .secWrap .secContent ul li {width: calc((100% - 9.36vw) / 5);} .sec02 .secWrap .secContent ul li:hover {border: none;} .sec02 .secWrap .secContent ul li:hover::after {display: none;} .sec02 .secWrap .secContent ul li a {padding: 1.46vw;} .sec03 {padding: 4.88vw 0 7.81vw;} .sec03 .secWrap .secContent ul {gap: 2.34vw;} .sec03 .secWrap .secContent ul li {width: calc((100% - 4.69vw) / 3);} .sec03 .secWrap .secContent ul li a{padding: 4.68vw 3.13vw;} .sec03 .secWrap .secContent .textBox strong {margin: 2.34vw 0 0.78vw; font-size: 1.76vw;} .sec03 .secWrap .secContent .textBox p {font-size: 1.46vw; line-height: 2.15vw;} .sec04 .swiper-slide .slideBg {padding: 6.25vw 0 8.2vw;} .sec04 .swiper-slide .slideBg .secWrap {gap: 10.35vw; padding: 0 7.8vw;} .sec04 .swiper-slide .slideBg .secWrap .textBox p {margin-bottom: 1.56vw; font-size: 1.56vw; } .sec04 .swiper-slide .slideBg .secWrap .textBox h2 {font-size: 2.34vw; line-height: 3.71vw;} .sec04 .swiper-slide .slideBg .secWrap .textBox h2 span {font-size: 2.34vw;} .sec04 .swiper-pagination {bottom: 3.91vw;} /* 고객센터 */ /* 왼쪽 */ .sec05 {padding: 7.81vw 0 ;} .sec05 .secWrap {padding: 0 3.13vw;} .sec05 .secWrap .secContent {gap: 2.34vw; margin-top: 0; height: 27.64vw;} .sec05 .secWrap .secContent .textBox strong {margin: 0 0 0.78vw;} .sec05 .secWrap .secContent .leftBox .box.qna {margin-bottom: 2.34vw;} .sec05 .secWrap .secContent .leftBox .box.qna a, .sec05 .secWrap .secContent .leftBox .box.customerCenter {gap: 1.56vw; padding: 2.34vw;} .sec05 .secWrap .secContent .imgBox{width: 7.81vw; height: 7.81vw;} /* 오른쪽 */ .sec05 .secWrap .secContent .rightBox {padding: 0 3.13vw 2.34vw;} .sec05 .secWrap .secContent .rightBox .notice .noticeTitle {padding: 2.34vw 0;} .sec05 .secWrap .secContent .rightBox .notice strong {font-size: 1.56vw;} .sec05 .secWrap .secContent .rightBox .notice ul {padding-top: 2.34vw;} .sec05 .secWrap .secContent .rightBox .notice ul li {margin-bottom: 1.56vw;} .sec05 .secWrap .secContent .rightBox .notice ul li a p {font-size: 1.37vw;} /* 서브페이지 */ /* 구매하기 */ .buyPage #newSubVisual {padding: 6.67vw 0 10.71vw;} .buy__btnList01 {gap: 5.6rem 4.76vw;} .buy__btnList01 li {width:35.78vw;} .buy__btnList01 li a{ width: 100%;min-width: unset} .buyPage .buy__btnList01 li a .buy__top__btm { padding: 4.29vw 0;width: 100%; height: 16.9vw;} .buyPage .buy__btnList01 li a .buy__btn__top {height: 5.95vw;} .buyPage .buy__btnList01 li a .buy__btn__top span{font-size: 2.14vw;} .buyPage .buy__btnList01 li a .buy__btn__top span:nth-child(1) {font-size: 1.67vw;} /* 이용방법 */ #newSubVisual {padding: 5.6rem 0 6rem;} #newSubVisual h2{font-size: 2.86vw;} #newSubVisual p {font-size: 1.67vw;} .inforTitle {font-size: 1.9vw;} .inforText {font-size: 1.56vw;} .inforTip {padding:1.2rem 0 1.2rem 2.2rem;} .inforTip p {font-size: 1.55vw;} .inforTip p::after {top: 0.45vw; left: -2.2rem; width: 14px; height: 14px; background-size: cover;} /* 구매방법 */ .newContent .newLimite1200{ padding: 0 6.25vw;} .newContent .subContent .infor_content {gap: 2.4rem; height: 27.14vw;} .newContent .subContent .infor_content .right_text {padding-top: 1.43vw;} /* 구매상품확인 */ .newContent .subContent .confirmation {padding: 0 1.6rem;} .newContent .subContent .confirmation li { padding: 3.8vw 2.86vw;height: auto;} .newContent .subContent .confirmation li .imgBox {width: 11.9vw; height: 11.9vw;} .newContent .subContent .confirmation li .inforTitle {font-size: 1.9vw;} .newContent .subContent .confirmation .inforText {font-size: 1.67vw; line-height: 2.5vw;} /* 구매상품사용방법 */ .newContent .subContent .infor_content01 {gap: 3.12vw; height: auto;} .newContent .subContent .infor_content01 .left_img {height: 23.81vw;} .newContent .subContent .infor_content01 .inforTitle {margin-bottom: 1.17vw; font-size: 2.34vw;} .newContent .subContent .infor_content01 .btBox {margin-top: 2.34vw;} .newContent .subContent .infor_content01 .btBox a {width: 13.67vw; height: 4.69vw; font-size: 1.46vw;} .newContent .subContent .infor_content01 .btBox a:hover {background: #fff;color: #ff7200;} .newContent .subContent .infor_content01 .inforTip {padding: 1.2rem 0 0 2.2rem;} .newContent .subContent .infor_content01 .inforTip p::after {top: 0.36vw;} .newContent .subContent .inforBrand .inforTitle {font-size: 2.14vw;} .newContent .subContent .inforBrand .brandContent {gap: 2.85vw;} .newContent .subContent .inforBrand .brandContent li { width: calc((100% - 11.43vw) / 5);} .newContent .subContent .inforBrand .brandContent li .imgBox { margin-bottom: 1.55vw;height: 16.19vw;} .newContent .subContent .inforBrand .brandContent li .textBox h6 {margin-bottom: 1.55vw; font-size: 1.67vw;} .newContent .subContent .inforBrand .brandContent li .textBox a {width: 9.64vw; height: 4.05vw; font-size: 1.67vw;} } @media screen and (max-width : 840px){ /* 20231031 main 리뉴얼 */ #main-visual {padding: 8.75vw 0 9.38vw;} #main-visual .mainWrap { gap: 7.5vw;flex-direction: column; padding: 0 5vw; text-align: center;} #main-visual .mainWrap .textBox, #main-visual .mainWrap .imgBox { padding: 0;width: 100%;} #main-visual .mainWrap .imgBox {padding: 0 9.22vw;} #main-visual .mainWrap .textBox h1 {font-size: 4.69vw; line-height: 7.5vw;} #main-visual .mainWrap .textBox p {margin: 2.5vw 0 5vw; font-size: 2.5vw;} #main-visual .mainWrap .textBox .btnBox { gap: 2.5vw;justify-content: center;} #main-visual .mainWrap .textBox .btnBox a {width: 18.81vw; height: 7.26vw; font-size: 2.19vw;} #main-visual .mainWrap .textBox .btnBox a:hover {background: #fff; color: #ff7200;} .sec .secTitle {font-size: 3.75vw;} .sec .secWrap {padding: 0 5vw;} .sec .secWrap .secContent {margin-top: 8.53vw;} .sec03 .secWrap .secContent ul li .iconBox, .sec05 .secWrap .secContent .iconBox {top: 2.18vw; right: 2.5vw; width: 5vw; height: 5vw;} .sec02 {padding: 9.38vw 0;} .sec02 .secWrap .secContent ul { gap: 3.75vw;justify-content: flex-start;} .sec02 .secWrap .secContent ul li {width: calc((100% - 7.5vw) / 3); height: 27.5vw;} .sec02 .secWrap .secContent ul li a {padding: 3.13vw;} /* 서비스 이용 */ .sec03 {padding: 9.38vw 0 12.5vw;} .sec03 .secWrap .secContent ul { gap: 3.75vw;flex-direction: column;} .sec03 .secWrap .secContent ul li {width: 100%; } .sec03 .secWrap .secContent ul li a{ gap: 7.5vw; justify-content: flex-start;flex-direction: row; padding: 5vw 7.5vw;} .sec03 .secWrap .secContent ul li .iconBox { top: 2.18vw ; right: 2.5vw;width: 5vw; height: 5vw;} .sec03 .secWrap .secContent ul li .imgBox {height: 16.56vw;} .sec03 .secWrap .secContent ul li .imgBox img {width: auto; height: 100%;} .sec03 .secWrap .secContent ul li a .textBox {text-align: left;} .sec03 .secWrap .secContent ul li a .textBox strong {margin: 0 0 1.25vw; font-size: 2.5vw;} .sec03 .secWrap .secContent ul li a .textBox p {font-size: 2.18vw; line-height: 3.28vw;} .sec04 .swiper-slide .slideBg {padding: 6.25vw 0 12.5vw;} .sec04 .swiper-slide .slideBg .secWrap { gap: 7.5vw;flex-direction: column; padding: 0 2.5vw;} .sec04 .swiper-slide .slideBg .secWrap .textBox {text-align: center;} .sec04 .swiper-slide .slideBg .secWrap .textBox p { margin-bottom: 2.5vw;font-size: 2.5vw;} .sec04 .swiper-slide .slideBg .secWrap .textBox h2{font-size: 3.75vw; line-height: 5.93vw;} .sec04 .swiper-slide .slideBg .secWrap .textBox h2 span {font-size: 3.75vw;} .sec04 .swiper-slide .slideBg .secWrap .imgBox {height: 27.18vw;} .sec04 .swiper-pagination {bottom: 6.25vw; width: 9.38vw;} .sec04 .swiper-pagination .swiper-pagination-bullet {width: 1.87vw; height: 1.87vw;} .sec04 .swiper-pagination .swiper-pagination-bullet-active {width: 5.62vw;} /* 고객센터 */ /* 왼쪽 */ .sec05 {padding: 12.5vw 0 ;} .sec05 .secWrap .secContent { gap: 3.75vw;flex-direction: column; margin-top: 0; height: auto;} .sec05 .secWrap .secContent .leftBox, .sec05 .secWrap .secContent .rightBox {width: 100%;} .sec05 .secWrap .secContent .textBox strong {margin: 0 0 1.25vw; font-size: 2.5vw;} .sec05 .secWrap .secContent .textBox p {font-size: 2.19vw; line-height: 3.28vw;} .sec05 .secWrap .secContent .leftBox .box.qna {margin-bottom: 3.75vw;} .sec05 .secWrap .secContent .leftBox .box.qna a, .sec05 .secWrap .secContent .leftBox .box.customerCenter {gap: 7.5vw; padding: 5vw 7.5vw;} .sec05 .secWrap .secContent .imgBox{width: 15.62vw; height: 15.62vw;} /* 오른쪽 */ .sec05 .secWrap .secContent .rightBox {padding: 0 5vw 5vw;} .sec05 .secWrap .secContent .rightBox .notice .noticeTitle {padding: 5vw 0 3.75vw;} .sec05 .secWrap .secContent .rightBox .notice strong {font-size: 2.5vw;} .sec05 .secWrap .secContent .rightBox .notice ul {padding-top: 3.75vw;} .sec05 .secWrap .secContent .rightBox .notice ul li {margin-bottom: 1.9vw;} .sec05 .secWrap .secContent .rightBox .notice ul li a { gap: 3.75vw; align-items: center; justify-content: space-between;flex-direction: row;} .sec05 .secWrap .secContent .rightBox .notice ul li a p {font-size: 2.18vw;} /* 서브페이지 */ /* 공통 */ #container.inforPage {padding: 0 0 12.5vw 0;} #newSubVisual {padding: 8.75vw 0 9.34vw;} #newSubVisual h2{font-size: 3.75vw;} #newSubVisual p{font-size: 2.19vw;} .inforStep {width: 10.47vw; height: 3.9vw; font-size: 2.03vw;} .inforTitle {margin: 1.86vw 0; font-size: 2.5vw;} .inforText {font-size: 2.19vw;} .inforTip { padding: 2.5vw 0 0 3.43vw;} .inforTip p {font-size: 2.03vw;} .inforTip p::after { top: 0.78vw;left:-3.43vw; width: 2.19vw; height:2.19vw; background: url('/img/sub/iconTip14x14.svg') no-repeat center center; background-size: 100% 100%; } .newContent .newLimite1200{padding: 0 3.81vw;} .infrBr {display: none;} /* 구매하기 */ .buyPage #newSubVisual {padding: 8.75vw 0 13.75vw;} .buy__btnList01 {gap: 8.28vw 3.75vw; padding: 0 8.33vw;} .buy__btnList01 li { margin-bottom: 0;width: calc((100% - 3.75vw) / 2);} .buy__btnList01 .stk_con {top: -4.69vw; width: 18.28vw;} .buyPage .buy__btnList01 li a .buy__top__btm { padding: 4.29vw 0 3.1vw;width: 100%; height: 16.9vw;} .buyPage .buy__btnList01 li a .buy__btn__top {height: 5.95vw;} .buyPage .buy__btnList01 li a .buy__btn__top span{font-size: 2.14vw;} .buyPage .buy__btnList01 li a .buy__btn__top span:nth-child(1) {font-size: 1.67vw;} /* 이용방법 - 구매방법 */ .newContent .subContent .infor_content { gap: 3.75vw;flex-direction: column; margin-bottom: 10vw; padding: 0 1.19vw; height: auto;} .newContent .subContent .infor_content > .left_img, .newContent .subContent .infor_content > .right_text {width: 100%;} .newContent .subContent .infor_content .left_img img {width: 100%; height: auto;} .newContent .subContent .infor_content > .right_text > div {width: 100%;} .newContent .subContent .infor_content .right_text {gap: 3.75vw;} /* 구매상품확인 */ .newContent .subContent .confirmation { gap: 3.75vw;flex-direction: column; padding: 0 2.5vw;} .newContent .subContent .confirmation .inforText {font-size: 2.19vw; line-height: 3.28vw;} .newContent .subContent .confirmation li { padding: 5vw 3.75vw;width: 100%;} .newContent .subContent .confirmation li .imgBox {width: 15.62vw; height: 15.62vw;} .newContent .subContent .confirmation li .inforTitle {margin: 3.75vw 0 1.25vw; font-size: 2.5vw;} .inforBr {display: block;} /* 구매상품 사용방법 */ .newContent .subContent .infor_content01 {margin-bottom: 12.5vw; text-align: center;} .newContent .subContent .infor_content01 .left_img { margin: 5.93vw 0; padding-left: 2.98vw;height: 20.31vw;} .newContent .subContent .infor_content01 .left_img img {width: auto; height: 100%;} .newContent .subContent .infor_content01 .inforTitle {font-size: 2.81vw;} .newContent .subContent .infor_content01 .right_text {gap: 0;} .newContent .subContent .infor_content01 .btBox { gap: 2.5vw;justify-content: center; margin-top: 3.75vw;} .newContent .subContent .infor_content01 .btBox a {width: 18.75vw; height: 7.19vw; font-size: 2.19vw;} .newContent .subContent .infor_content01 .inforTip {margin-top:5vw; padding: 2.5vw 0 0 3.43vw; text-align: left;} .newContent .subContent .infor_content01 .inforTip p::after {top: 0.47vw;} .newContent .subContent .inforBrand {margin-top: 10vw;} .newContent .subContent .inforBrand .inforTitle {font-size: 2.81vw;} .newContent .subContent .inforBrand .brandContent {gap: 3.75vw;} .newContent .subContent .inforBrand .brandContent li { width: calc((100% - 7.5vw) / 3);} .newContent .subContent .inforBrand .brandContent li .imgBox { margin-bottom: 2.8vw;height: 27.5vw;} .newContent .subContent .inforBrand .brandContent li .textBox h6 {margin-bottom: 2.8vw; font-size: 2.19vw;} .newContent .subContent .inforBrand .brandContent li .textBox a {width: 13.13vw; height: 5.31vw; font-size: 2.19vw;} } @media screen and (max-width : 640px){ /* 20231031 main 리뉴얼 */ .moBr{display: block;} #main-visual {padding: 14.93vw 0 16vw;} #main-visual .mainWrap {gap: 12.8vw; padding: 0 4.27vw;} #main-visual .mainWrap .textBox h1 {font-size: 8vw; line-height: 12.8vw;} #main-visual .mainWrap .textBox p {margin: 4.27vw 0 8.53vw; font-size: 4.27vw;} #main-visual .mainWrap .textBox .btnBox a {width: 32vw; max-width: unset; height: 12.4vw; font-size: 3.73vw;} #main-visual .mainWrap .imgBox {padding: 0;} .sec .secTitle {font-size: 6.4vw; text-align: center;} .sec .secWrap {padding: 0 4.27vw;} .sec .secWrap .secContent {margin-top: 8.53vw;} .sec02 {padding: 10.67vw 0;} .sec02 .secWrap {padding: 0 4.27vw;} .sec02 .secWrap .secContent ul {gap: 4.27vw;} .sec02 .secWrap .secContent ul li {width: calc((100% - 4.27vw) / 2); height: 43.47vw;} .sec02 .secWrap .secContent ul li a {padding: 4.8vw;} /* 서비스 이용 */ .sec03 {padding: 10.67vw 0 16vw;} .sec03 .secWrap .secContent ul {gap: 4.27vw;} .sec03 .secWrap .secContent ul li {width: 100%; } .sec03 .secWrap .secContent ul li a{ gap: 6.4vw; justify-content: center;flex-direction: column; padding: 6.4vw;} .sec03 .secWrap .secContent ul li .iconBox { top: 2.13vw ; right: 2.13vw;width: 6.4vw; height: 6.4vw;} .sec03 .secWrap .secContent ul li .imgBox {height: 28.27vw;} .sec03 .secWrap .secContent ul li a .textBox {text-align: center;} .sec03 .secWrap .secContent ul li a .textBox strong {margin: 0 0 2.13vw; font-size: 4.27vw;} .sec03 .secWrap .secContent ul li a .textBox p {font-size: 3.73vw; line-height: 5.6vw;} .sec04 .swiper-slide .slideBg {padding: 12.8vw 0 22.4vw;} .sec04 .swiper-slide .slideBg .secWrap {gap: 12.8vw; padding: 0 4.27vw;} .sec04 .swiper-slide .slideBg01 .secWrap{gap: 17.87vw; margin-top: 5.07vw;} .sec04 .swiper-slide .slideBg .secWrap .textBox p {margin-bottom: 4.27vw; font-size: 4.27vw;} .sec04 .swiper-slide .slideBg .secWrap .textBox h2{font-size: 6.4vw; line-height: 10.13vw;} .sec04 .swiper-slide .slideBg .secWrap .textBox h2 span {font-size: 6.4vw;} .sec04 .swiper-slide .slideBg .secWrap .imgBox {height: 37.87vw;} .sec04 .swiper-pagination {bottom: 10.67vw; width: 15.94vw;} .sec04 .swiper-pagination .swiper-pagination-bullet {width: 3.2vw; height: 3.2vw;} .sec04 .swiper-pagination .swiper-pagination-bullet-active {width: 9.59vw; height: 3.2vw;} /* 고객센터 */ /* 왼쪽 */ .sec05 {padding: 16vw 0 21.33vw;} .sec05 .secWrap .secContent {gap: 4.27vw; margin-top: 0;} .sec05 .secWrap .secContent .iconBox {top: 2.13vw; right: 2.13vw; width: 6.4vw; height: 6.4vw;} .sec05 .secWrap .secContent .textBox strong {margin: 0 0 2.13vw; font-size: 4.27vw;} .sec05 .secWrap .secContent .textBox p {font-size: 3.73vw; line-height: 5.6vw;} .sec05 .secWrap .secContent .leftBox .box.qna {margin-bottom: 4.27vw;} .sec05 .secWrap .secContent .leftBox .box.qna a, .sec05 .secWrap .secContent .leftBox .box.customerCenter {gap: 4.27vw; padding: 6.4vw 4.27vw;} .sec05 .secWrap .secContent .imgBox{width: 17.07vw; height: 17.07vw;} /* 오른쪽 */ .sec05 .secWrap .secContent .rightBox {padding: 0 6.4vw 6.4vw;} .sec05 .secWrap .secContent .rightBox .notice .noticeTitle {padding: 6.4vw 0;} .sec05 .secWrap .secContent .rightBox .notice strong { font-size: 4.27vw;} .sec05 .secWrap .secContent .rightBox .notice ul {padding-top: 6.4vw;} .sec05 .secWrap .secContent .rightBox .notice ul li {margin-bottom: 4.27vw;} .sec05 .secWrap .secContent .rightBox .notice ul li a { gap: 1.07vw; align-items: flex-start; justify-content: center;flex-direction: column;} .sec05 .secWrap .secContent .rightBox .notice ul li a p {font-size: 3.73vw;} /* 서브페이지 */ /* 공통 */ #container.inforPage {padding: 0 0 21.3vw 0;} #newSubVisual {padding: 10.67vw 0 16vw;} #newSubVisual h2{font-size: 6.4vw;} #newSubVisual p{font-size: 3.73vw;} .inforStep {width: 17.86vw; height: 6.67vw; font-size: 3.47vw;} .inforTitle {margin: 3.2vw 0; font-size: 4.27vw;} .inforText {font-size: 3.73vw;} .inforTip { padding: 4.27vw 0 0 5.87vw;} .inforTip p {font-size: 3.47vw;} .inforTip p::after { top: 0.94vw;left:-5.87vw; width: 3.73vw; height:3.73vw; transform: none;} .newContent .newLimite1200 {padding: 0 4.27vw;} /* 구매하기 */ .buyPage #newSubVisual {padding: 10.67vw 0 23.73vw;} .buy__btnList01 {gap: 14.67vw; padding: 0 7.07vw;} .buy__btnList01 li {width: 100%;} .buy__btnList01 .stk_con {top: -8vw; width: 28.53vw;} .buyPage .buy__btnList01 li a .buy__top__btm { padding: 9.33vw 0 6.67vw;height: 36.8vw;} .buyPage .buy__btnList01 li a .buy__btn__top { padding: 0 4.27vw 0 4.53vw;height: 12.99vw;} .buyPage .buy__btnList01 li a .buy__btn__top span{font-size: 4.67vw;} .buyPage .buy__btnList01 li a .buy__btn__top span:nth-child(1) {font-size: 3.63vw;} /* 이용방법 - 구매방법 */ .newContent .subContent .infor_content {gap: 6.4vw; margin-bottom: 17.06vw; padding: 0;} .newContent .subContent .infor_content .left_img {height: 55.47vw;} .newContent .subContent .infor_content .right_text {gap: 6.4vw;} .newContent .subContent .confirmation {padding: 0;} .newContent .subContent .confirmation .inforText {font-size: 3.73vw; line-height: 5.6vw;} .newContent .subContent .confirmation li {padding: 8.53vw 6.4vw;} .newContent .subContent .confirmation li .inforTitle {font-size: 4.27vw;} .newContent .subContent .confirmation li .imgBox {width: 26.67vw; height: 26.67vw;} /* 구매상품 사용방법 */ .newContent .subContent .infor_content01 .inforTitle {font-size: 4.8vw;} .newContent .subContent .infor_content01 .left_img { margin-left: 2.34vw;height: 32vw;} .newContent .subContent .infor_content01 .btBox a {width: 32vw; height: 12.27vw; font-size: 3.73vw;} .newContent .subContent .infor_content01 .inforTip {margin-top: 8.53vw; padding: 4.27vw 0 0 5.87vw;} .newContent .subContent .infor_content01 .inforTip p::after {top: 0.8vw;} .newContent .subContent .infor_content01 .right_text {gap: 0;} .newContent .subContent .inforBrand {margin-top: 12.8vw;} .newContent .subContent .inforBrand .inforTitle {font-size: 4.27vw;} .newContent .subContent .inforBrand .brandContent {gap: 4.27vw; margin-top: 8.53vw; } .newContent .subContent .inforBrand .brandContent li {width: calc((100% - 4.27vw) / 2);} .newContent .subContent .inforBrand .brandContent li .imgBox{ margin-bottom: 4.27vw;height: 43.73vw;} .newContent .subContent .inforBrand .brandContent li .textBox h6 {margin-bottom: 4.27vw; font-size: 3.73vw;} .newContent .subContent .inforBrand .brandContent li .textBox a{width: 21.6vw; height: 9.07vw; font-size: 3.73vw;} .brandPop .modalCont .brandText {padding: 4.27vw 4.27vw 6.4vw;} .brandPop .modalCont .modalCont__tit {font-size: 4.8vw;} .brandPop .modalCont .brandText ul.text01 {gap: 2.13vw;} .brandPop .modalCont .brandText ul.text01 > li p {font-size: 3.73vw;} .brandPop .modalCont .brandText ul.text02 > li {font-size: 3.47vw;} } /* 고객센터 배너 */ .customerPop { display: none;position: fixed; top: 0; left: 0; z-index: 1000000; width: 100%; height: 100%; visibility: unset; opacity: 1;} .customerPop.active {display: block;} .customerPop .dim {position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.2);} .customerPop .customerPopWrap {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} .customerPop .customerPopWrap .customerImgBox {width: 430px;} @media screen and (max-width : 480px) { .customerPop .customerPopWrap .customerImgBox {width: 89.58vw;} } /* 20240704 추가 */ .none{display: none;}