@charset "UTF-8"; @font-face { font-family: 'ONE-Mobile-Regular'; src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/ONE-Mobile-Regular.woff') format('woff'); font-weight: normal; font-style: normal; } /*[s] Reset Css */ html,body{width:100%; min-height:100%; background-color: #fff; -webkit-text-size-adjust:none} input,button,textarea{background-color: transparent; border:none; -webkit-border-radius:0; -webkit-appearance:none} input[type=submit],input[type=image],input[type=button],button,a{cursor: pointer; text-decoration: none;} img,video,audio,object,embed,iframe{max-width:100%; max-height: 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,li{list-style:none outside} em{font-style:normal;} h1,h2,h3,h4,h5,h6,address,caption,cite,code,dfn,em,th,var{font-size:100%;font-weight:normal} hr,legend,caption,hr{visibility:hidden;overflow:hidden;position:absolute;top:0;left:0;width:0;height:0;margin:0;padding:0;font-size:0;line-height:0;text-indent:-1000em} img{ vertical-align:top; } /* 다국어 html[lang="ko"]{font-family:'Noto Sans KR', sans-serif;} html[lang="en"]{font-family:'Noto Sans KR', sans-serif;} html[lang="zh"]{font-family:'Noto Sans SC', 'Noto Sans KR', sans-serif;} html[lang="ja"]{font-family:'Noto Sans JP', 'Noto Sans KR', sans-serif;} */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,select,textarea,p,blockquote,th,td,legend{ font-style:normal; font-weight:normal;} body,button{font-size:1.8rem; line-height: 2.8rem; color:#666;font-family: 'Noto Sans KR', sans-serif;} /*[e] Reset Css */ /*[s] Transition Style */ #hd .mMenu, #hd .mMenu>span, #hd .mMenu:before, #hd .mMenu:after, .mMenu.open:before, .mMenu.open:after, .mMenu.open>span, #hd #gnb:after, #hd #gnb:before, #hd #gnb>li>a:before, #hd #gnb>li>a i:before, #hd #gnb>li>a i:after, #hd #gnb>li, #hd #gnb a, #hd #gnb>li>a>span:before, #hd #gnb .gnbSub>li>a, #hd #gnb>li>a em, #hd #gnb>li>a em:after, #hd #gnb>li>a em:before, #hd #gnbMenu, #hd #gnbMenu:before, #hd #gnbMenu .bg, #hd #gnbMenu #list:before, #hd #gnbMenu #list>li, #hd #gnbMenu #list>li>a, #hd #gnbMenu #list>li>a i, #hd #gnbMenu #list>li>a>span:before, #hd #gnbMenu #list .gnbSub>li>a, #hd_menu li a, #gnbCate #list>li>a i, .paging_all *, .pg_wrap *, .multi-tab ul.multi-list>li a, .myTab li:hover a, .myTab li.active a, .idx_evenSw .swiper-slide img, .sort_wrap .ssch_sort li>a, .idx_sctAll>li:hover .sctImg img{transition: all .3s ease-out; transform-origin: 50% 50%;} #gnbCate{transition: all .5s ease-in-out; transform-origin: 50% 50%;} /*[e] Transition Style */ /*[s] Bace Css */ :root, html{font-size:10px} :root { /* color */ --point: #ff6600; --point2: #f3487b; --point_red: #f41010; --btn_c: #333; --bor_c: #ddd; --event__color--point: #035ab6; --event__color--end: #b3b3b3; /* font family */ --noto:'Noto Sans KR'; --prtd:'Pretendard'; --play:'Play'; --mtsr:'Montserrat'; } .mt5{margin-top:0.5rem !important;} .mt10{margin-top:1rem !important;} .mt15{margin-top:1.5rem !important;} .mt20{margin-top:2rem !important;} .mt25{margin-top:2.5rem !important;} .mt30{margin-top:3rem !important;} .mt35{margin-top:3.5rem !important;} .mt40{margin-top:4rem !important;} .mt45{margin-top:4.5rem !important;} .mt50{margin-top:5rem !important;} .mt55{margin-top:5.5rem !important;} .mt60{margin-top:6rem !important;} .mt65{margin-top:6.5rem !important;} .mt70{margin-top:7rem !important;} .mt75{margin-top:7.5rem !important;} .mt80{margin-top:8rem !important;} .mt85{margin-top:8.5rem !important;} .mt90{margin-top:9rem !important;} .mt95{margin-top:9.5rem !important;} .mt100{margin-top:10rem !important;} .mt160{margin-top: 16rem !important;} .mb30{margin-bottom:3rem !important;} .mb35{margin-bottom:3.5rem !important;} .wVar, .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;} html.hide{height:100vh;overflow:hidden;} .inConts{width:100%; max-width:124rem; margin:0 auto; padding:0 2rem; position: relative;} #container{width:100%; margin:0 auto; background-color:#fff; position:relative; overflow:hidden;} #container.container{padding: 0 2rem 14rem; max-width:124rem; min-height:60rem; margin:0 auto;} #container.container .inConts{padding: 0} #container.idx-container{padding-bottom:8rem;} html *{letter-spacing:-0.04em; word-break:keep-all; word-wrap:break-word; box-sizing: border-box;} .pnt_txt{color:var(--point) !important} .flex{display:flex; align-items:center;} .txt_ellipsis{display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break:break-all;} .txt_ellipsis.line1{-webkit-line-clamp: 1;} .txt_ellipsis.line2{-webkit-line-clamp: 2;} .round_box{border-radius:1rem; overflow:hidden;} .round_box::after{border-radius:1rem;} .icon_box{display:block; line-height:1;} .icon_box img{vertical-align:top;} .bc_grdet{background:linear-gradient(0deg, #ff6600 0%, #ff893b 100%);} .idx_tit{font-size:2.2rem;line-height:3.2rem;font-weight:700;color:#111;font-family:var(--mtsr);} .idx_tit .en_tit{font-size:1.3rem;line-height:3.2rem;color:#666; font-weight:400;} .fw_mtsr{font-family:var(--mtsr);} /* < > 화살표 */ i.arrow_icon{position:relative; width:0.7rem; height:1.2rem; display:inline-block} i.arrow_icon::before, i.arrow_icon::after{content:""; display:block; width:0.8rem; height:0.2rem; background-color:#111; position:absolute; left:0;} i.arrow_icon.right::before{top:2px; transform:rotate(45deg);} i.arrow_icon.right::after{top:6px; transform:rotate(-45deg);} i.arrow_icon.left::before{top:2px; transform:rotate(-45deg);} i.arrow_icon.left::after{top:6px; transform:rotate(45deg);} i.arrow_icon.bottom{width:1.2rem;height:0.7rem;} i.arrow_icon.bottom::before{top:0; transform:rotate(45deg);} i.arrow_icon.bottom::after{top:0;left:auto;right:0; transform:rotate(-45deg);} /*[s] HEADER*/ .ribbon_bann .inConts{} .today_noneWrap{position:absolute;bottom:1.5rem;right:2rem;} .today_noneWrap .today_chk{padding-right:1.3rem;display:inline-block;} .today_noneWrap .today_chk input[type=checkbox]{display: none;} .today_noneWrap .today_chk input[type=checkbox]+label{font-size:1.5rem;color:rgba(255,255,255,0.9);padding-left:2.2rem;cursor:pointer;position:relative;} .today_noneWrap .today_chk input[type=checkbox]+label::before{content:'';display:inline-block;width:1.4rem;height:1.4rem;background:url("/img/today_chkBox.png") no-repeat center;background-size:contain;position:absolute;left:0;top:calc(50% - 0.7rem)} .today_noneWrap .today_chk input[type=checkbox]:checked+label::before{background:url("/img/today_chkBox_on.png") no-repeat center;background-size:contain;} .today_noneWrap .todayClose{padding-left:1.6rem;display:inline-block;position:relative;} .today_noneWrap .todayClose::before{content:'';display:inline-block;width:0.1rem;height:1rem;background-color:rgba(195,195,195,0.75);position:absolute;left:0;top:calc(50% - 0.5rem);} .today_noneWrap .todayClose button{border:none;background-color:transparent;display:flex;align-items:center;} .cateNav{height:6.4rem;background-color:#fff;border-top:1px solid #e6e6e6; border-bottom:1px solid #e6e6e6} .cateNav>.inConts{display:flex;justify-content:space-between;} #gnbMenu, #gnbMenu #list, #gnbMenu #list>li, #gnbMenu #list>li>a{height:6.3rem;} #gnbMenu{position: relative;display:flex;justify-content:center;} #gnbMenu #list{width:100%; display: flex; justify-content: center;} #gnbMenu #list>li{display:inline-block;padding:0 4.2rem; vertical-align: top; position: relative;} #gnbMenu #list>li>a{width:100%; font-weight: 600; font-size:1.8rem; line-height:1; color: #111; text-align: center; display:table; position: relative; z-index:3;} #gnbMenu #list>li>a>span{display:table-cell; vertical-align:middle;position:relative;} #gnbMenu #list>li>a>span::after{content:"";display:block;width:100%;height:0.4rem;background-color:var(--point);position:absolute;left:0;bottom:0;opacity:0;transition:all 0.3s ease-out;} #gnbMenu #list .gnbSub{min-width:100%; padding:1rem 2rem; background-color:#fff; display:none; position: absolute; left:50%; top:calc(100% - 1px); white-space: nowrap; z-index:6;transform:translateX(-50%); border:1px solid #e6e6e6; border-top:none} #gnbMenu #list .gnbSub>li{display:block;padding:0 1rem} #gnbMenu #list .gnbSub>li>a{width:100%; height:4.5rem; font-size:1.7rem; line-height:1.4; color:#999; display:table;position:relative;} #gnbMenu #list .gnbSub>li>a>span {display:table-cell; vertical-align: middle; word-break:keep-all; word-wrap:break-word;text-align:center;} #gnbMenu #list>li:is(:hover, .oPage, .active)>a{color:var(--point)} #gnbMenu #list>li:is(:hover, .oPage, .active)>a>span::after{opacity:1;} #gnbMenu #list .gnbSub>li:is(:hover, .oPage, .active)>a{font-weight: 500; color:#111;} #gnbMenu #list>li.one .gnbSub, #gnbMenu #list .gnbSub>li.hide{display:none !important;} #header #list:hover .gnbSub, #header.all #list .gnbSub{opacity: 1;} /* 막대형 */ .mMenu_btn{transition:all 0.3s ease-out;} /* .mMenu_btn.open{background-color:#333;} */ .mMenu_btn .mMenu{padding:0 2rem; margin-top:-1px; width:22rem; height:6.4rem; background-color:transparent; border:none; font-size:1.6rem; line-height:1; font-weight:500; font-family:var(--noto); z-index:4; cursor: pointer; display:flex;align-items:center; position: relative;vertical-align:top; border:1px solid #e6e6e6} .mMenu_btn .mMenu img{filter: invert(41%) sepia(65%) saturate(2203%) hue-rotate(1deg) brightness(103%) contrast(106%); transition:all 0.3s ease-out;} .mMenu_btn .mMenu span{display:inline-block; margin-left:1.7rem;} #header .mMenu_btn .mMenu.open{background-color:var(--point); color:#fff; border-color:var(--point);} #header .mMenu_btn .mMenu.open img{filter:none;} /* .mMenu_btn .mMenu:before, .mMenu_btn .mMenu:after, .mMenu_btn .mMenu>span{content: ""; width: 2rem; height: 0.2rem; background-color:rgba(255,255,255,1); display: inline-block; position:absolute;top:50%; right:50%;margin-right:-1rem;} .mMenu_btn .mMenu:before{top:0} .mMenu_btn .mMenu:after{bottom:0;top:auto} .mMenu_btn .mMenu>span{margin-top:-0.1rem;} #header .mMenu_btn .mMenu.open:before, #header .mMenu_btn .mMenu.open:after{margin-right:0;bottom:auto; right:auto; left:50%; top:50%; transform:rotate(45deg) translate(-50%, -50%); transform-origin: 0% 0%;} #header .mMenu_btn .mMenu.open:after{transform:rotate(-45deg) translate(-50%, -50%);} #header .mMenu_btn .mMenu.open>span{opacity:0;} */ @media (hover: hover) and (pointer: fine) { .mMenu_btn:hover{background-color:var(--point);color:#fff; border-color:var(--point);} .mMenu_btn:hover img{filter:none;} .mMenu_btn:hover span{color:#fff} } /* 막대형2 */ #btn_all_cate.mAllMenu{display:none; width:5rem; height:1.4rem; margin-left:1rem; background-color:transparent; border:none; font-size:0; line-height:0; z-index:4; cursor: pointer; position: relative;vertical-align:top;} #btn_all_cate.mAllMenu:before, #btn_all_cate.mAllMenu:after, #btn_all_cate.mAllMenu>span{content: ""; width: 100%; height: 0.2rem; background-color:#666; display: inline-block; position:absolute;top:50%; right:50%;margin-right:-2.5rem;} #btn_all_cate.mAllMenu:before{top:0} #btn_all_cate.mAllMenu:after{width: 50%;bottom:0;top:auto} #btn_all_cate.mAllMenu>span{margin-top:-0.1rem;} #btn_all_cate.mAllMenu.open{width:3.2rem;height:3.2rem;} #btn_all_cate.mAllMenu.open:before, #btn_all_cate.mAllMenu.open:after{width:100%;bottom:auto; right:auto; left:0%; top:50%; transform:rotate(45deg) translate(0%, 0%); transform-origin: 0% 0%;} #btn_all_cate.mAllMenu.open:after{transform:rotate(-45deg) translate(0%, 0%);} #btn_all_cate.mAllMenu.open>span{opacity:0;} /* 주사위형 */ .mMenu_dice{display:flex;align-items:center;} .mMenu_dice .mMenu{width:3rem; min-width:3rem; height:3rem; background-color:transparent; border:none; font-size:0; line-height:0; z-index:4; cursor: pointer; overflow:hidden; display:block; position: relative;} .mMenu_dice .mMenu>span:before, .mMenu_dice .mMenu>span:after, .mMenu_dice .mMenu:before, .mMenu_dice .mMenu:after{content: ""; width: 1rem; height: 1rem; background-color:#fff; display: inline-block; position:absolute; border-radius:99px;} .mMenu_dice .mMenu>span:before{right:0; top:0;} .mMenu_dice .mMenu>span:after{left:0; bottom:0;} .mMenu_dice .mMenu:before{left:0; top:0;} .mMenu_dice .mMenu:after{right:0; bottom:0;} .mMenu_dice .mMenu.open{transform:rotate(90deg);} .mMenu_dice .mMenu.open>span:before, .mMenu_dice .mMenu.open>span:after{opacity:0;} .mMenu_dice .mMenu.open:before, .mMenu_dice .mMenu.open:after{width:100%; height:2px; background-color:#fff;} .mMenu_dice .mMenu.open:before{left:50%; top:50%; transform:translate(-50%, -50%) rotate(45deg);} .mMenu_dice .mMenu.open:after{right:auto; bottom:auto; left:50%; top:50%; transform:translate(-50%, -50%) rotate(-45deg);} #gnbMenu .gnbCateSide_top, #gnbMenu .gnbCateSide_bttm, #gnbMenu .gnbClose{display:none;} #gnbCate{position:fixed;right:0;top:0;z-index:100;width:100%;height:100%;min-height:max-content;overflow-y:auto;background-color: rgba(0, 0, 0, 0.5)} #gnbCate .gnbCateWrap{width:40rem;height:100vh;background-color: #fff;margin-left:auto;} #gnbCate .gnbCateWrap .innr{padding:0;height:calc(100% - 9rem);overflow-y:auto;} #gnbCate .gnbCateTop{padding:1rem 2rem;background-color:var(--point); display:flex; align-items:center; justify-content:space-between;} #gnbCate .gnbCateTop .gnbLogo img{filter:brightness(0) invert(1);} #gnbCate .gnbClose{display:inline-block;width:2.4rem;height:2.4rem;border:none;background-color:transparent; position:relative;} #gnbCate .gnbClose::before, #gnbCate .gnbClose::after{content:'';display:inline-block;width:120%;height:0.2rem;background-color:#fff;position:absolute;left:0%;top:50%;margin:-0.1rem 0 0 -0.1rem} #gnbCate .gnbClose::before{transform:rotate(45deg);} #gnbCate .gnbClose::after{transform:rotate(-45deg);} #gnbCate .gnbCateSide{padding:0 2rem;} #gnbCate .gnbCateSide .nav_tit{padding-top:3.2rem;font-size:2.2rem;line-height:3.6rem;color:#111;font-weight:700;} #gnbCate .gnbCateSide .mNav_list{padding:3.5rem 0;border-bottom: 1px solid #e8e8ea;} #gnbCate .gnbCateSide .nav_tit + .mNav_list{padding-top:0;margin-top:0.5rem;} #gnbCate .mNav_list > li{} #gnbCate .mNav_list > li > a{line-height:4rem;} #gnbCate .mNav_list a{font-size:1.8rem;color:#666;font-weight:400;} #gnbCate .area_top{} #gnbCate .area_top .area_top_txt{padding:1.8rem 2rem; font-size:2rem; line-height:3.4rem; color:#111; background-color:#f8f8f8;} #gnbCate .topNav_list{display:flex; justify-content:center; border-top:1px solid #e6e6e6; border-bottom:1px solid #e6e6e6} #gnbCate .topNav_list li{flex:1; padding:2rem 0; text-align:center;} #gnbCate .topNav_list li a{color:#666} #gnbCate .topNav_list li a>span{display:block;} #gnbCate .topNav_list li .name{font-size:1.8rem; line-height:2.8rem;} #gnbCate #list{} #gnbCate #list li{} #gnbCate #list a{display:inline-block;width:100%;} #gnbCate #list>li>a{position:relative;} #gnbCate #list>li>a i{width:2.4rem; height:1.4rem; margin-top:-0.7rem; position: absolute; right:0; top:50%; display:inline-block;} #gnbCate #list>li.one>a i{display:none;} #gnbCate #list>li>a i::before, #gnbCate #list>li>a i::after{content: ""; width:1.5rem; height:0.2rem; margin:0 0 0 0; background-color: #aaa; display: block; position:absolute; top:50%;} #gnbCate #list>li>a i::before{right:-0.1rem; transform:rotate(-45deg);} #gnbCate #list>li>a i::after{right:0.9rem; transform:rotate(45deg);} #gnbCate #list>li:is(.active)>a{color:var(--point);} #gnbCate #list>li.active>a i{transform:rotate(180deg);} #gnbCate #list>li:is(.active)>a i::before, #gnbCate #list>li:is(.active)>a i::after{background-color:var(--point);} #gnbCate #list .gnbSub{display:none;margin:1.2rem 0;padding:1.7rem 2.2rem;background-color:#f7f8fb;border-radius:1rem;} #gnbCate #list .gnbSub>li{} #gnbCate #list .gnbSub>li>a{line-height:4rem;} #gnbCate #list .gnbSub>li>a::before{content:"-";display:inline-block;margin-right:1.2rem;} #gnbCate{right:-100%;} #gnbCate.open{right:0;} /* pc 전체메뉴 */ .gnbMenuAll{display:none;position:absolute;top:100%;left:0;z-index:15;padding:0 2rem;} .gnbMenuAll .innr{} .gnbMenuAll .gnbAll_tit{display:none;padding:0 2rem;font-size:3.5rem;line-height:9.2rem;font-weight:700;color:#fff;} .gnbMenuAll .gnbAll_tit::before{content:"";display:inline-block;margin-right:3.2rem;width:5rem;height:9.2rem;vertical-align:middle;background:url("/theme/soda/img/gnbAll_tit_icon.png") no-repeat right center;background-size:3.9rem;} .gnbMenuAll #list{padding:1rem 0;width:22rem; border:1px solid #e6e6e6;border-top:0; background-color:#f6f6f6; position:relative;} .gnbMenuAll #list a{padding:0 2rem; display:block;font-size:1.5rem; line-height:3.5rem;} .gnbMenuAll #list a:hover{color:var(--point); background-color:#fff;} .gnbMenuAll #list > li{} .gnbMenuAll #list > li > a{position:relative;color:#111;font-weight:400;} .gnbMenuAll #list > li > a::before{content:"";display:inline-block;margin-top:-0.85rem;width:1px;height:1.7rem;background-color:rgba(255,255,255,0.2);position:absolute;left:0;top:50%;} .gnbMenuAll #list > li:first-child > a::before{display:none;} .gnbMenuAll #list li > a{position:relative;} .gnbMenuAll #list li > a > i{width:0.7rem; height:1.2rem; margin-top:-0.35rem; position: absolute; right:2rem; top:50%; z-index:1; display:inline-block; opacity:0; transition:all 0.3s ease-out;} .gnbMenuAll #list li > a > i::before, .gnbMenuAll #list li > a > i::after{content:""; display:block; width:0.8rem; height:0.2rem; background-color:var(--point); position:absolute; left:0;} .gnbMenuAll #list li > a > i::before{top:0; transform:rotate(45deg);} .gnbMenuAll #list li > a > i::after{top:0.6rem; transform:rotate(-45deg);} .gnbMenuAll #list li:hover > a > i{opacity:1;} .gnbMenuAll #list li.one i{display:none;} .gnbMenuAll #list li:hover > .gnbSub{display:block;} .gnbMenuAll #list .gnbSub{display:none; padding:1rem 0; width:100%; min-height:fit-content; position:absolute; left:calc(100% + 1px); top:0; background-color:#fff; border-bottom:1px solid #e6e6e6; border-right:1px solid #e6e6e6;} .gnbMenuAll #list .gnbSub a{} .gnbMenuAll #list .gnbSub.d2{} .gnbMenuAll #list .gnbSub.d2 > li > a{color:#666;} .gnbMenuAll #list .gnbSub.d2 > li + li{margin-top:1.3rem;} .gnbMenuAll #list > li + li .gnbSub.d2{} /* .gnbMenuAll #list > li + li .gnbSub.d2::before{content:"";display:inline-block;width:1px;height:calc(100% - 0.7rem);background-color:#e6e6e6;position:absolute;left:0;top:50%;transform:translateY(-50%);} */ .gnbMenuAll #list .gnbSub.d3{} .gnbMenuAll #list .gnbSub.d3 > li > a{color:#666;} .gnbMenuAll #list .gnbSub.d3 > li > a:hover{text-decoration:underline;text-underline-offset:0.2rem;} #snb{width:100%; /* margin-top:-6rem; */ font-size:0; line-height:0; border-bottom: 1px solid #e6e6e6; position: relative; z-index:4; background-color: #f5f5f5;} /* #snb:before{content: "";width: 50%;height: 100%;background-color: #f5f5f5;border-bottom:1px solid #e6e6e6;display: inline-block;position:absolute;right: 0;top:0px;} */ #snb #nav{width:100%; position: relative; z-index:2; display: flex; flex-wrap: wrap; flex-direction: row; align-content: center; justify-content: flex-start;} #snb #nav>li{flex:0 1 20rem; border-top:1px solid #e6e6e6; border-right:1px solid #e6e6e6; display: flex; flex-wrap: wrap; flex-direction: row; align-content: center; justify-content: center; position:relative;} #snb #nav>li>a{width:100%; height:5.4rem; padding:0 5rem 0 2rem; font-size:1.5rem; line-height:1.2; color:#999; display:table; position: relative;} #snb #nav>li>a>span{display:table-cell; vertical-align: middle; word-break:break-all !important;} #snb #nav>li>a i{width:1.5rem; height:1rem; margin-top:-0.5rem; position: absolute; right:2rem; top:50%; display:inline-block;} #snb #nav>li>a i:after, #snb #nav>li>a i:before{content: ""; width:1rem; height: 0.2rem; margin:0 0 0 0; background-color: #b2b2b2; display: block; position:absolute; top:50%;} #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: 5.5rem; max-width:5.5rem; border-left:1px solid #e6e6e6;} #snb #nav>li.home>a{width:100%; margin:-1px 0 -1px -1px; padding:0; font-size:1.5rem; line-height:5.4rem;color:#111;font-weight:600;text-align:center;} /* #snb #nav>li:last-child{flex-basis: 20%;} */ #snb #nav>li:last-child>a{font-weight: 500; color: #333;} #snb #nav>li:last-child>a:before{content: ""; width: 100%; height: 2px; background-color:#222; position:absolute; left: 0; bottom:-1px; z-index:3;} #snb #nav>li:last-child>a i:before, #snb #nav>li:last-child>a i::after{background-color:#111;} #snb #nav .lnbSub{background-color: #fff; border:1px solid #e6e6e6; position:absolute; left:-1px; right:-1px; top:100%; z-index:3; display:none;} #snb #nav .lnbSub>a{width:100%; height:5.8rem; padding:0px 2rem; font-size:1.7rem; line-height:1.3; color:#666; display:table;} #snb #nav .lnbSub>a>span{padding:0.5rem 0; display:table-cell; vertical-align: middle; word-break:break-all !important;} #snb #nav .lnbSub>a+a{border-top:1px solid #e6e6e6;} #snb #nav .lnbSub>a:hover, #snb #nav .lnbSub>a.active{background-color: #f0f0f0; color: var(--point);} #snb #nav .lnbSub>a.active{font-weight: 500;} #snb #nav>li.active>a i{transform:rotate(180deg);} #snb #nav>li[data-class="hide"]{display:none !important;} #snb.sub_nav{background-color: transparent;border:none} #snb.sub_nav #nav{margin-bottom:3rem; background-color: transparent; position: relative; z-index:2; display: flex; flex-wrap: wrap; flex-direction: row; align-items: center;} #snb.sub_nav #nav>li{flex:none; display:flex; align-items:center; flex-wrap:nowrap; border:none} #snb.sub_nav #nav>li>a{width:100%; height:auto; padding:0 1rem; font-weight: 400; font-size:1.5rem; line-height:1.2; color: #999; display: flex; align-items: center; position: relative;} #snb.sub_nav #nav>li>a i{display:none} #snb.sub_nav #nav>li>a>span{word-break:break-all !important;} #snb.sub_nav #nav>li:last-child::before{content:'';display:inline-block;width:0.6rem;height:0.8rem;background:url("/images/subNavArrow.png") no-repeat center;background-size:contain;vertical-align:middle;} #snb.sub_nav #nav>li:last-child>a{color:#111} #snb.sub_nav #nav>li:last-child>a::before{display:none;} #snb.sub_nav #nav>li.home a{padding:0} #snb.sub_nav #nav>li.home a span {display:inline-block; width:2.3rem; font-weight:600; font-size:1.2rem; color:#666; line-height:1.7rem; border:1px solid #ccc; border-radius:0.3rem;} #snb.sub_nav #nav .lnbSub{display:none !important;} .back_btn{display:none; padding:2rem; width:100%; position:fixed; top:0; left:0; z-index:10; transition:all 0.3s ease-out;} .back_btn.active{background-color:#fff;} .back_btn a{display:inline-block;} .back_btn a img{width:2rem;} /*[e] HEADER*/ /* q_right */ .q_right{width:10rem;border:1px solid #ddd;background-color:#fff;position:absolute;left:calc(50% + 67rem);top:0;z-index:10;} .q_right .today_box{} .q_right .today_top{padding:1.2rem 0;font-size:1.5rem;line-height:1.6rem;color:#fff;text-align:center;font-weight:600;background-color:var(--point);} .q_right .today_top > p{color:var(--point);font-weight:600;} .q_right .today_view{padding:1.2rem 0.9rem;border-bottom:1px solid #ddd;} .q_right .today_sw{overflow:hidden;} .q_right .today_sw .sw_slide_box{display:flex;flex-direction:column;gap:1.2rem;} .q_right .today_sw .slide_btn_wr{margin-top:1rem;display:flex;gap:0.5rem;justify-content:center;align-items:center;} .q_right .today_sw .slide_btn_wr .slide_btn{margin:0;width:auto;height:2.4rem;position:static;} .q_right .today_sw .slide_btn_wr .slide_btn::after{color:#111;font-size:0.9rem;font-weight:bold;} .q_right .today_sw .swiper-button-next.swiper-button-disabled, .q_right .today_sw .swiper-button-prev.swiper-button-disabled{border-color:#ddd;background-color:#fff;opacity:0.5;} .q_right .today_sw .swiper-button-next.swiper-button-disabled::after, .q_right .today_sw .swiper-button-prev.swiper-button-disabled::after{color:#666;} .q_right .today_sw .slide_btn_wr .swiper-pagination{width:auto;position:static;font-size:1.4rem;line-height:2.4rem;;} .q_right .today_sw .slide_btn_wr .swiper-pagination .swiper-pagination-current{color:#111;font-weight:700;} .q_right .q_menu{text-align:center;} .q_right .q_menu li+li{border-top:1px solid #ddd} .q_right .q_menu li{padding:1.2rem 0.9rem} .q_right .q_menu li a{display:flex;justify-content:center;flex-direction:column;align-items:center;width:100%;font-size:1.3rem;line-height:1.6rem;color:#666;font-weight:400;border-radius:1rem;} .q_right .q_menu li span{display:block;} .q_right .q_menu li .cart-count{padding:0 0.3rem;min-width:2rem;line-height:2rem;font-size:1.2rem;color:#fff;text-align:center;background-color:var(--point);border-radius:1rem;position:absolute;left:1.2rem;bottom:0;} .q_right .q_menu li:nth-child(1) .icon_box{padding-bottom:0.6rem;} .q_right .q_menu li:nth-child(2) .icon_box{margin-right:-1rem;} .q_right .q_menu .icon_box{margin-bottom:0.2rem;position:relative;} .q_right .q_menu .cart_total em{font-weight:600;color:#111} .q_right .scroll_btn a{display:block;font-size:1.3rem;line-height:3.9rem;text-align:center;font-weight:500;color:#666;border-top:1px solid #ddd;background-color:#f5f5f5;} /* 상품 정렬 NEW */ .sort_wrap{display:flex;justify-content:flex-end;} .sort_wrap .ssch_sort{display:flex;} .sort_wrap .ssch_sort li{position:relative;padding:0 1.6rem;} /* .sort_wrap .ssch_sort li+li::before{content:'';display:inline-block;width:0.1rem;height:1.4rem;background-color:#dcdcdc;position:absolute;left:0;top:calc(50% - 0.7rem);} */ .sort_wrap .ssch_sort li>a{display:inline-block;font-size:1.5rem;line-height:2.5rem;font-weight:400;color:#999;} .sort_wrap .ssch_sort li:last-child{padding-right:0;} .sort_wrap .ssch_sort li:is(.active, :hover)>a{color:#111;font-weight:500;border-bottom:1px solid #111;} .sort_wrap button{display:none;font-size:1.6rem;width:9rem;line-height:1;border:0;padding:0 ;background:none;color:#717989;font-family:inherit;text-align:left;position: relative;} .sort_wrap button i{width:1.5rem; height:1.4rem; margin-top:-0.7rem; position:absolute; right:0; top:50%; display:inline-block;} .sort_wrap button i::before, .sort_wrap button i::after{content: ""; width:0.9rem; height:0.1rem; margin:0 0 0 0; background-color: #aaa; display: block; position:absolute; top:50%;} .sort_wrap button i::before{right:0px; transform:rotate(-45deg);} .sort_wrap button i::after{right:0.7rem; transform:rotate(45deg);} .sort_wrap button.active i{transform:rotate(180deg);transition: all .3s ease-out; transform-origin: 50% 50%;} /* SUB */ .sVisual{height:24rem;display:none;align-items:center;justify-content:center;background-image:url("/theme/soda/img/sVisual_bg01.jpg");background-repeat:no-repeat;background-position:center;background-size:cover;} .sVisual h2{width:100%;text-align:center;font-size:3.5rem;line-height:4.5rem;font-weight:700;color:#fff;} .bar_tit{padding-left:1.7rem;margin-bottom:1.3rem;font-size:2.5rem;line-height:3.5rem;font-weight:700;color:#111;position:relative;} .bar_tit::before{content:"";display:block;width:0.9rem;height:2.7rem;background-color:#111;border-radius:0.3rem;position:absolute;left:0;top:0.4rem} #best_item .bar_tit::before{background-color:var(--point);} @media only screen and (max-width : 1540px) { .q_right{display:none;} } @media only screen and (max-width : 1340px) { .wVar{display:none !important;} } @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;} #wrap{padding-top:15.5rem;} /*[s] HEADER*/ #hd{width:100%; position:fixed; top:0; z-index:100;} #hd_wr{} .hd_middle{flex:1;} .hd_middle>.inConts{padding:1rem 2rem} .cateNav{padding:0;position:relative;} .cateNav>.inConts{padding:0;position:static;overflow-x:auto;} .mMenu_btn{} #gnbMenu #list>li{padding:0 2rem} #gnbMenu #list>li+li{margin-left:1rem;} #gnbMenu #list>li>a>span{white-space:nowrap;} #btn_all_cate.mAllMenu{display:inline-block;margin-left:3rem;} .gnbMenuAll .innr{padding:0;} .mMenu_dice .mMenu:before{background-color:#00282b;} .mMenu_dice .mMenu>span:before, .mMenu_dice .mMenu>span:after, .mMenu_dice .mMenu:after{background-color:var(--point);} .mMenu_dice .mMenu.open:before, .mMenu_dice .mMenu.open:after{background-color:#00282b;} /*[e] HEADER*/ /* .hd_middle{padding:0 2rem} .hd_middle>.inConts{padding:0} .cateNav>.inConts{padding:0} */ .memb_qa_list .memb_qaUl>li{} .memb_qa_list .mb_qaNum{display:none;} .memb_qa_list .mb_qaTit{width:100%;max-width:none;} .memb_qa_list .mb_qaFile{display:none} .memb_qa_list .mb_qaWait{margin-left:2rem;} .memb_qa_list .mb_qaYes{margin-left: 2rem;} } @media only screen and (max-width : 840px) { body{font-size:2.2rem;line-height:3.2rem;;} :root, html{font-size:6.5px;} .br_p, .pVar, .tVar, .ptVar{display:none !important;} .mVar, .tmVar, .br_t{display:block !important;} img.mVar, img.tmVar{display:inline-block !important;} #logo{position:relative;} #logo img{height:7rem;} #gnbCate{width:100%;box-shadow:none;} #gnbCate.open .gnbCateWrap{width:100%;} .myTab li{width:calc(50% - 0.5rem);} .myTab li a{width:100%;} .idx_tit{font-size:3.5rem; line-height:4.5rem;} .idx_tit .en_tit{display:block; font-size:2.2rem; line-height:3.2rem;} /*[s] HEADER*/ #gnbCate{background-color:transparent;} #gnbCate .gnbCateWrap{} #gnbCate .gnbCateTop .gnbLogo img{height:7rem;} #gnbCate .gnbClose{width:2.4rem;height:2.4rem;} #gnbCate .area_top .area_top_txt{font-size:2.2rem;} #gnbCate .area_top .mNav_list .hd_icon img{height:3.6rem;} #gnbCate .gnbCateSide .nav_tit{font-size:3rem;line-height:6rem;} #gnbCate .gnbCateSide.area_bttm .t_num{} #gnbCate .gnbCateSide.area_bttm .t_num dt{font-size:2.4rem; line-height:4rem;} #gnbCate .gnbCateSide.area_bttm .t_num dd{font-size:3.6rem; line-height:4rem;} #gnbCate .gnbCateSide.area_bttm .cstmr_time{font-size:2.4rem;line-height:3.4rem;} #gnbCate .gnbCateSide.area_bttm .cstmr_time dt{width:11.5rem;} #gnbCate .gnbCateSide.area_bttm .cstmr_time dd{width:calc(100% - 13.5rem);} #gnbCate .mNav_list a{font-size:2.4rem;} #gnbCate .mNav_list > li > a{line-height:5rem;} #gnbCate #list .gnbSub>li>a{line-height:5rem;} #gnbCate .gcs_qMenu li a{font-size:2.2rem;} #snb.sub_nav #nav>li>a{font-size:1.6rem;} .cateNav{height:8rem;} #gnbMenu, #gnbMenu #list, #gnbMenu #list>li, #gnbMenu #list>li>a{height:7.9rem;} #gnbMenu #list>li>a{font-size:2.4rem;line-height:3.4rem;} .mMenu_btn{} .mMenu_btn .mMenu{width:8.1rem; height:8rem; justify-content:center;} .mMenu_btn .mMenu img{display:none;} .mMenu_btn .mMenu span{font-size:0; line-height:0;text-indent:-99999px;} .mMenu_btn .mMenu span, .mMenu_btn .mMenu::before, .mMenu_btn .mMenu::after{content:""; display:block; width:2.6rem; height:2px; background-color:var(--point); margin:-1px 0 0 -1.3rem; position:absolute; left:50%; top:50%;} .mMenu_btn .mMenu::before{margin-top:-7px;} .mMenu_btn .mMenu::after{margin-top:5px;} #header .mMenu_btn .mMenu.open span, #header .mMenu_btn .mMenu.open::before, #header .mMenu_btn .mMenu.open::after{background-color:#fff;} .mMenu_dice .mMenu{width:4.1rem;height:4.1rem;} .mMenu_dice .mMenu>span:before, .mMenu_dice .mMenu>span:after, .mMenu_dice .mMenu:before, .mMenu_dice .mMenu:after{width:1.4rem;height:1.4rem;} #hd_btn .hd_quick{display:none;} #snb{display:none;} .back_btn a img{width:3rem;} /*[e] HEADER*/ /* 상품 정렬 NEW */ .sort_wrap .ssch_sort li{padding:0 2.5rem} .sort_wrap .ssch_sort li:first-child{padding-left:0;} .sort_wrap .ssch_sort li>a{font-size:2.6rem;line-height:3.6rem;} .sort_wrap .ssch_sort li+li::before{height:2.4rem;top:50%;margin-top:-1.4rem;} .sort_wrap button{font-size:1.8rem;} /* SUB */ .bar_tit{padding-left:2.3rem;margin-bottom:2.6rem;font-size:4rem;line-height:5rem;} .bar_tit::before{width:1.1rem;height:3.9rem;} } @media only screen and (max-width : 640px) { .sort_wrap .ssch_sort li:first-child{padding-left:2.5rem;} .sort_wrap .ssch_sort li:is(.active, :hover)>a{border:none} .sort_wrap:is(.sort_li){position:relative} .sort_wrap:is(.sort_li) button{display:block;line-height:3rem;} .sort_wrap:is(.sort_li) .ssch_sort{display:none;position: absolute;right:0;top:100%;border:0.1rem solid #dbdbdb;z-index: 99;background-color:#fff;} .sort_wrap:is(.sort_li) .ssch_sort li+li::before{display:none} .sort_wrap:is(.sort_li) .ssch_sort li>a{padding:0.8rem;display:block;line-height:4.9rem;} .sort_wrap:is(.sort_li) .ssch_sort li>a{border:none;display:block;} } @media only screen and (max-width : 480px) { }