/* header */ #header {display:flex; align-items:center; position:relative; z-index:199; box-sizing:border-box; width:100%; height:clamp(120px,10.4167vw,200px);} #header .h_wrap {display:flex; position:relative; width:100%; justify-content:space-between; align-items:center;} #header .h_logo {display:flex; position:relative; width:100px; height:40px; background:url(../images/newbird/common/logo.svg) no-repeat; background-size:100% auto; aspect-ratio:5/2;} #header .h_logo a {position:absolute; left:0; right:0; top:0; bottom:0;} #header .h_cate {display:flex; gap:clamp(40px, 5.2084vw, 100px); position:absolute; left:150px; right:250px;} #header .h_cate > .hc_btn {display:none;} #header .h_cate > ul {display:flex; position:relative; gap:clamp(20px, 2.6042vw, 50px);} #header .h_cate > ul ~ ul::before {content:""; position:absolute; left:clamp(-51px, -2.6563vw, -20px); top:50%; width:2px; height:20px; margin-top:-10px; background-color:var(--gray);} #header .h_cate > ul > li {display:flex;} #header .h_cate > ul > li > a {display:flex; position:relative; font-size:17px; font-weight:500; letter-spacing:-0.96px; line-height:45px;} #header .h_cate > ul > li > a.on, #header .h_cate > ul > li > a:hover {color:var(--blue); transition:all 0.25s;} #header .h_cate > ul > li > a::before {content:""; position:absolute; left:50%; bottom:5px; width:0; height:2px; background-color:var(--blue); transform:translateX(-50%);} #header .h_cate > ul > li > a.on::before, #header .h_cate > ul > li > a:hover::before {width:100%; opacity:1; transition:all 0.25s;} #header .h_cate > ul > li > a#washMenuItem {align-items:center; gap:5px; background:linear-gradient(300deg, rgba(135, 155, 234, 1) 50%, rgba(39, 57, 147, 1) 100%); background-size:200% 200%; animation:gradientAnimation 3s ease infinite; color:transparent; -webkit-background-clip:text; font-weight:700;} #header .h_cate > ul > li > a#washMenuItem i {display:inline-block; width:20px; height:17px; background:url(../images/newbird/common/icon_care.svg) no-repeat; background-size:contain; background-position:center;} @keyframes gradientAnimation {0% {background-position:0%;}100% {background-position:200%;}} #header .h_function {display:flex;} #header .h_function > ul {display:flex; gap:10px;} #header .h_function > ul > li {display:flex; position:relative; width:50px; height:50px;} #header .h_function > ul > li:last-child {display:none;} #header .h_function > ul > li .hf_btn {display:flex; justify-content:center; align-items:center; position:absolute; left:0; right:0; top:0; bottom:0; border-radius:50%; background-color:var(--white); box-shadow:0px 20px 40px 0px rgba(28, 28, 32, 0.06);} #header .h_function > ul > li .hf_btn.on {background-color:var(--skyblue_t1); transition:all 0.3s;} #header .h_function > ul > li > #hdrWrpMbs {background-color:var(--blue) !important; box-shadow:0px 20px 40px 0px rgba(23, 42, 126, 0.06);} #header .h_function > ul > li > #hdrWrpMbs i.icon {background:url(../images/newbird/common/icon_service_w.svg); background-position-y:100% !important} #header .h_function > ul > li .hf_btn i.icon {display:inline-block; position:relative; width:20px; height:20px; background:url(../images/newbird/common/icon_service.svg) no-repeat; background-size:100% auto; background-position:left; background-position-y:25% !important;} #header .h_function > ul > li .hf_btn#crtOpn i.icon {left:-1px; background-position-y:50% !important;} #header .h_function > ul > li#hdrWrpSch > .hf_btn i.icon {background-position-y:75% !important;} #header .h_function > ul > li#hdrWrpSch > .hf_btn .hfb_close {display:none; position:relative; width:22px; height:22px; transform:rotate(45deg); transition:0.3s;} #header .h_function > ul > li#hdrWrpSch > .hf_btn .hfb_close::before, #header .h_function > ul > li#hdrWrpSch > .hf_btn .hfb_close::after {content:""; position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px; border-radius:1px; background-color:var(--white);} #header .h_function > ul > li#hdrWrpSch > .hf_btn .hfb_close::after {transform:rotate(90deg);} #header .h_function > ul > li#hdrWrpSch > .hf_btn.on i.icon {display:none;} #header .h_function > ul > li#hdrWrpSch > .hf_btn.on .hfb_close {display:inline-block;} #header .h_function > ul > li > ul {display:flex; flex-wrap:wrap; position:absolute; right:-100px; top:60px; width:180px; opacity:0; padding:15px; border-radius:15px; background-color:rgb(255, 255, 255); box-shadow:rgba(28, 28, 32, 0.05) 14px 14px 40px 0px; pointer-events:none;} #header .h_function > ul > li > ul:before {content:""; position:absolute; right:115px; top:-5px; width:0; height:0; border-style:solid; border-width:0px 5px 5px 5px; border-color:transparent transparent var(--white) transparent;} #header .h_function > ul > li > ul:after {content:""; position:absolute; left:0; right:0; top:-20px; height:20px; ;} #header .h_function > ul > li > ul > li {display:flex; width:100%;} #header .h_function > ul > li > ul > li > a {display:inline-block; width:100%; padding:0px 15px; color:var(--gray_t1); font-size:14px; line-height:40px; letter-spacing:-0.05px; text-align:left; transition:0.3s;} #header .h_function > ul > li .hf_btn .hfb_cartcount {display:block; position:absolute; right:0; top:0; width:16px; height:16px; border-radius:50%; background-color:var(--skyblue_t1); font-size:10px; font-weight:800; color:var(--white); line-height:16px; text-align:center;} @media screen and (min-width: 768px) and (hover: hover) and (pointer: fine) { #header .h_function > ul > li:hover .hf_btn {background-color:var(--skyblue_t1); transition:all 0.3s;} #header .h_function > ul > li#hdrWrpSch > .hf_btn:hover .hfb_close {transform:rotate(135deg);} #header .h_function > ul > li:hover .hf_btn i.icon {background:url(../images/newbird/common/icon_service_w.svg); transition:all 0.3s;} #header .h_function > ul > li:hover > ul {opacity:1; pointer-events:auto;} #header .h_function > ul > li > ul > li > a:hover {color:var(--blue); font-weight:700;} } /* search */ #searchpop {position:fixed; left:0; top:calc(-100vh - 80px); z-index:197; width:100%; height:100vh; background-color:var(--white); box-shadow:0px 40px 80px 0px rgba(28, 28, 32, 0.08); transition:all 0.5s;} #searchpop.on {top:0; transition:all 0.5s;} #searchpop .wrap {height:100%;} #searchpop .s_wrap {display:flex; justify-content:center; align-items:flex-start; position:relative; box-sizing:border-box; height:100%; padding-top:200px} #searchpop .s_close {display:flex; justify-content:center; align-items:center; position:absolute; top:75px; right:0; width:50px; height:50px; border-radius:50%; background-color:var(--blue); box-shadow:0 10px 20px rgba(2, 31, 147, 0.2);} #searchpop .s_contents {display:flex; flex-wrap:wrap; position:relative; top:40px; width:100%; max-width:800px; text-align:left;} #searchpop .s_contents .sc_title {display:flex; flex-wrap:wrap; gap:30px; width:100%;} #searchpop .s_contents .sc_title > strong {display:inline-block; vertical-align:middle; width:100%; font-size:60px; color:var(--blue); font-weight:700; line-height:70px; letter-spacing:-2.4px;} #searchpop .s_contents .sc_title > strong > span {display:inline-block; width:100%; font-weight:100; letter-spacing:-4.8px;} #searchpop .s_contents .sc_title > p {display:inline-block; vertical-align:middle; width:100%; font-size:16px; color:var(--gray_t2); font-weight:400; line-height:30px; letter-spacing:-1.28px;} #searchpop .s_contents .sc_title > p > span {display:inline-block; float:left; width:100%;} #searchpop .s_contents .sc_searchform {display:inline-block; float:left; width:100%; margin-top:40px;} #searchpop .s_contents .sc_searchform .csf_box {display:inline-block; position:relative; box-sizing:border-box; width:100%; padding:15px 10px; padding-right:70px; border-bottom:2px var(--blue) solid;} #searchpop .s_contents .sc_searchform input {width:100%; height:40px; border:none; font-size:20px; font-weight:700; color:var(--blue); line-height:45px; letter-spacing:-0.8px;} #searchpop .s_contents .sc_searchform input::placeholder {font-weight:400; color:var(--blue);} #searchpop .s_contents .sc_searchform .scf_btn {display:flex; justify-content:center; align-items:center; position:absolute; right:7px; top:50%; width:66px; height:66px; margin-top:-33px; background-color:transparent; border-radius:50%; transition:0.3s;} #searchpop .s_contents .sc_searchform .scf_btn:hover {background-color:var(--blue);} #searchpop .s_contents .sc_searchform .scf_btn i {display:flex; width:40px; height:40px; background:url(../images/newbird/icon_bigsearch.svg) no-repeat; background-size:100% auto; transition:0.3s;} #searchpop .s_contents .sc_searchform .scf_btn:hover i {background-image:url(../images/newbird/icon_bigsearch_w.svg);} #searchpop .s_contents .sc_function {display:inline-block; float:left; width:100%; margin-top:90px;} #searchpop .s_contents .sc_function .csf_wrap {margin-bottom:50px;} /* searchrank 공통 */ .searchrank {display:inline-block; width:100%; text-align:left;} .searchrank strong {display:inline-block; float:left; position:relative; box-sizing:border-box; width:100%; margin-bottom:20px; padding-left:30px; font-size:18px; font-weight:700; color:var(--blue); text-align:left;} .searchrank strong:before {content:""; position:absolute; left:3px; top:50%; width:20px; height:20px; margin-top:-10px; background:url(../images/newbird/common/icon_note.svg) no-repeat; background-size:100% auto;} .searchrank ul {display:inline-flex; flex-wrap:wrap; counter-reset:list-number;} .searchrank ul li {margin-right:45px; margin-bottom:20px; counter-increment:list-number;} .searchrank ul li a {display:block; line-height:20px; font-size:16px; color:var(--gray_t1); letter-spacing:-0.64px;} .searchrank ul li a:hover {text-decoration:underline; text-underline-offset:3px;} .searchrank ul li a::before {content:counter(list-number); display:inline-block; vertical-align:top; width:20px; height:20px; margin-right:10px; border-radius:3px; background-color:var(--gray_t3); font-size:12px; color:var(--gray_t1); line-height:20px; text-align:center;} .searchrank ul li:nth-child(n + 6) {display:none;} .searchrank ul li:first-child a {color:var(--blue); font-weight:700;} .searchrank ul li:first-child a::before {background-color:var(--blue); color:var(--white);} /* mobilemenu */ #mobilemenu {overflow:hidden; position:absolute; left:0; right:0; top:0; bottom:0; z-index:198; pointer-events:none;} #mobilemenu ~ .mobilemenubg {position:fixed; left:0; top:0; bottom:0; z-index:199; width:calc(100% - 380px); background-color:var(--black); opacity:0; transition:0.3s; pointer-events:none;} #searchpop.on ~ .mobilemenubg {z-index:997;} #mobilemenu .m_wrap {position:absolute; right:-380px; top:0; bottom:0; width:380px; background-color:var(--white); transition:0.3s;} /* mobileNav */ #mobileNav {display:none;} /* aside */ #aside {display:flex; position:fixed; right:70px; bottom:70px; z-index:196; pointer-events:none;} #aside ul {display:flex; flex-wrap:wrap; gap:30px; width:120px;} #aside ul li {display:flex; justify-content:center; width:100%; transition:0.3s;} #aside ul li:nth-child(1), #aside ul li:nth-child(2) {display:none;} #aside.off ul li:nth-child(1), #aside.off ul li:nth-child(2) {opacity:0} #aside.off ul li .a_btn {pointer-events:none !important;} #aside ul li .a_btn {display:flex; justify-content:center; align-items:center; position:relative; width:100%; aspect-ratio:1/1; border-radius:50%; pointer-events:auto;} #aside ul li .a_btn > span {position:absolute; left:50%; top:-10px; z-index:1; font-size:20px; font-weight:900; color:var(--blue); line-height:20px; letter-spacing:-0.5px; white-space:nowrap; text-shadow:0px 5px 10px rgba(255, 255, 255, 0.5); transform:translateX(-50%);} #aside ul li .a_btn .ab_pic {display:flex; justify-content:center; align-items:center; overflow:hidden; position:absolute; left:0; right:0; top:0; bottom:0; border-radius:50%; transition:0.3s;} #aside ul li .a_btn.naver .ab_pic {background-color:var(--white); box-shadow:0 20px 40px rgba(21, 21, 20, 0.06);} #aside ul li .a_btn.video .ab_pic {box-shadow:0px 0px 20px 0px rgba(23, 42, 126, 0.2);} #aside ul li .a_btn.naver .ab_pic:before {content:""; position:absolute; left:10px; right:10px; top:10px; bottom:10px; border:var(--gray_t5) solid 1px; border-radius:50%;} #aside ul li .a_btn:hover .ab_pic {transform:scale(1.1);} #aside ul li .a_btn .ab_pic > img {width:100%; height:auto;} #aside ul li .a_btn i {transition:0.3s;} #aside ul li .a_btn.naver i {display:inline-block; width:56px; height:56px; background:url(../images/newbird/common/icon_store.svg) center center no-repeat; background-size:100% 100%;} #aside ul li .a_btn.video i {position:absolute; left:50%; bottom:-20px; width:40px; height:40px; margin-left:-20px; border-radius:50%; background:url(../images/newbird/common/icon_videocontrol.jpg) no-repeat; background-size:100% auto;} #aside ul li .a_topbtn {display:inline-block; position:relative; width:60px; height:60px; border-radius:50%; background-color:var(--blue); box-shadow:0px 30px 60px 0px rgba(2, 31, 147, 0.25); transition:0.3s; opacity:0; pointer-events:none;} #aside ul li .a_topbtn.on {opacity:1; pointer-events:auto;} #aside ul li .a_topbtn:hover {transform:scale(1.1);} #aside ul li .a_topbtn i {display:inline-block; position:absolute; left:50%; bottom:0; width:2px; height:35px; margin-left:-1px; background-color:var(--white); transition:0.3s;} #aside ul li .a_topbtn i:before {content:""; display:block; position:absolute; right:calc(100% - 1px); top:0px; width:5px; height:2px; border-radius:1px; transform:rotate(-45deg); background:var(--white); transition:0.3s; transform-origin:100%;} #aside ul li .a_topbtn i:after {content:""; display:block; position:absolute; left:calc(100% - 1px); top:0; width:5px; height:2px; border-radius:1px; transform:rotate(45deg); background:var(--white); transition:0.3s; transform-origin:0;} #aside ul li .a_topbtn:hover i::before, #aside ul li .a_topbtn:hover i::after {width:16px;} /* contents */ #contents {display:inline-block; vertical-align:middle; width:100%; padding-bottom:120px;} /* main */ #contents.main {background-color:var(--white_t1);} #contents.main .cm_hero {display:inline-block; position:relative; width:100%; background-color:var(--white); font-size:0; line-height:0;} #contents.main .cm_hero .mobile {display:none;} #contents.main .cm_hero .cmh_wrap {display:inline-block; position:relative; align-items:center; width:100%; max-width:1920px; min-height:450px; height:calc(100vh - clamp(240px,20.8334vw,400px)); max-height:600px; margin:auto 0; aspect-ratio:1920/569;} #contents.main .cm_hero .cmh_border {position:absolute; top:0; bottom:0; z-index:100; pointer-events:none;} #contents.main .cm_hero .cmh_border.t1 {left:clamp(60px, 5.2083vw, 100px); right:50%;} #contents.main .cm_hero .cmh_border.t2 {right:0; aspect-ratio:100/569;} #contents.main .cm_hero .cmh_border i {content:""; overflow:hidden; position:absolute; width:20px; height:20px; border-radius:50%;} #contents.main .cm_hero .cmh_border i:nth-child(1) {left:0; top:0; box-shadow:-10px -10px 0 0 var(--white);} #contents.main .cm_hero .cmh_border i:nth-child(2) {left:0; bottom:0; box-shadow:-10px 10px 0 0 var(--white);} #contents.main .cm_hero .cmh_border i:nth-child(3) {right:0; top:0; box-shadow:10px -10px 0 0 var(--white);} #contents.main .cm_hero .cmh_border i:nth-child(4) {right:0; bottom:0; box-shadow:10px 10px 0 0 var(--white);} #contents.main .cm_hero .cmh_swiper {position:absolute; left:0; right:0; top:0; bottom:0;} #contents.main .cm_hero .cmh_swiper.t2 {pointer-events:none;} #contents.main .cm_hero .cmh_swiper.t2 .swiper-slide {pointer-events:none !important} #contents.main .cm_hero .cmh_swiper .cmh_pic {background-repeat:no-repeat; background-size:cover; background-position:center;} #contents.main .cm_hero .cmh_swiper .cmh_pic.t1 {overflow:hidden; position:absolute; left:clamp(60px, 5.2083vw, 100px); right:50%; top:0; bottom:0;} #contents.main .cm_hero .cmh_swiper .cmh_pic.t2 {overflow:hidden; position:absolute; right:0; top:0; bottom:0; aspect-ratio:100/569;} #contents.main .cm_hero .cmh_swiper .cmh_pic.t1 img {display:none;} #contents.main .cm_hero .cmh_swiper .cmh_pic img {width:auto; height:100%;} #contents.main .cm_hero .cmh_swiper.t2 {text-align:left;} #contents.main .cm_hero .cmh_swiper.t2 .swiper-slide {display:flex; align-items:center;} #contents.main .cm_hero .cmh_swiper .cmh_text {display:inline-block; position:relative; float:left; left:52%; width:calc(43% - 30px); filter:blur(10px); transition:1s;} #contents.main .cm_hero .cmh_swiper .swiper-slide-active .cmh_text {left:57%; pointer-events:auto; filter:blur(0);} #contents.main .cm_hero .cmh_swiper .cmh_text > strong {display:inline-block; vertical-align:middle; width:100%; margin-bottom:45px; font-size:20px; font-weight:700; color:var(--blue); line-height:28px; letter-spacing:-0.5px;} #contents.main .cm_hero .cmh_swiper .cmh_text > p {display:inline-block; vertical-align:middle; width:100%; margin-bottom:30px;} #contents.main .cm_hero .cmh_swiper .cmh_text > p > span {display:inline-block; vertical-align:middle; width:100%; font-size:45px; font-weight:100; color:var(--black); line-height:60px; letter-spacing:-0.1px;} #contents.main .cm_hero .cmh_swiper .cmh_text > p > span > strong {font-weight:400; color:var(--blue);} #contents.main .cm_hero .cmh_swiper .cmh_text > ul {display:flex; flex-wrap:wrap; column-gap:13px; position:relative; width:100%; margin-bottom:60px;} #contents.main .cm_hero .cmh_swiper .cmh_text > ul > li {font-size:16px; font-weight:200; color:var(--gray_t2); line-height:22px; letter-spacing:-0.5px;} #contents.main .cm_hero .cmh_bi {position:absolute; top:0; right:13.02%; background-color:var(--white); border-radius:25px; padding:7px 22px; box-shadow:0px 10px 40px 0px rgba(28, 28, 32, 0.08);} #contents.main .cm_hero .cmh_bi > img {height:35px;} #contents.main .cm_hero .cmh_bottomwrap {display:flex; align-items:center; position:relative; width:100%; height:clamp(120px,10.4167vw,200px);} #contents.main .cm_hero .cmh_catalog {display:flex; align-items:center; gap:10px; position:absolute; left:0; z-index:1; height:40px; padding:0 35px 0 23px; border-radius:20px; background-color:var(--blue); box-shadow:0px 20px 40px 0px rgba(2, 31, 147, 0.15); transition:0.3s;} #contents.main .cm_hero .cmh_catalog:hover {background-color:var(--skyblue_t1);} #contents.main .cm_hero .cmh_catalog i {display:inline-block; width:14px; height:16px; background:url(../images/newbird/common/icon_catalog.svg) no-repeat; background-size:100% auto; aspect-ratio:14/16;} #contents.main .cm_hero .cmh_catalog span {font-size:14px; letter-spacing:-0.5px; color:var(--white);} #contents.main .cm_hero .cmh_catalog:hover span {text-decoration:underline; text-underline-position:under;} #contents.main .cm_hero .cmh_function {display:flex; gap:80px; position:absolute; right:50%;} #contents.main .cm_hero .cmh_function .cmhf_controller {display:flex;} #contents.main .cm_hero .cmh_function .cmhf_controller li {display:flex;} #contents.main .cm_hero .cmh_function .cmhf_controller li + li {margin-left:10px;} #contents.main .cm_hero .cmh_function .cmhf_controller li:last-child {margin-left:20px;} #contents.main .cm_hero .cmh_function .cmhf_controller li .cmhfc_btn {display:flex; justify-content:center; align-items:center; position:relative; width:40px; height:40px; background-color:transparent; border-radius:50%; transition:0.3s;} #contents.main .cm_hero .cmh_function .cmhf_controller li .cmhfc_btn:hover {background-color:var(--blue);} #contents.main .cm_hero .cmh_function .cmhf_controller li .cmhfc_btn i {display:flex; position:relative; width:20px; height:20px; background:url(../images/newbird/common/icon_controller.svg) no-repeat; background-size:100% auto; transition:0.3s;} #contents.main .cm_hero .cmh_function .cmhf_controller li .cmhfc_btn i.next {background-position-y:33.333%;} #contents.main .cm_hero .cmh_function .cmhf_controller li .cmhfc_btn i.play {background-position-y:66.666%;} #contents.main .cm_hero .cmh_function .cmhf_controller li .cmhfc_btn i.stop {background-position-y:100%;} #contents.main .cm_hero .cmh_function .cmhf_controller li .cmhfc_btn.play i.play {display:none;} #contents.main .cm_hero .cmh_function .cmhf_controller li .cmhfc_btn.stop i.stop {display:none;} #contents.main .cm_hero .cmh_function .cmhf_controller li .cmhfc_btn:hover i {background-image:url(../images/newbird/common/icon_controller_w.svg);} #contents.main .cm_hero .cmh_function .cmhf_progress {display:flex; align-items:center; gap:20px;} #contents.main .cm_hero .cmh_function .cmhf_progress > span {font-size:14px; color:var(--blue); font-weight:700; line-height:40px;} #contents.main .cm_hero .cmh_function .cmhf_progress .bar {display:flex; width:120px; height:2px; background-color:var(--gray_t3);} #contents.main .cm_hero .cmh_function .cmhf_progress .bar i {display:inline-block; height:2px; background-color:var(--blue);} #contents.main .cm_hero .cmh_pagination {position:absolute; left:50%; right:0;} #contents.main .cm_hero .cmh_pagination ul {display:flex; justify-content:flex-end; align-items:center; gap:20px; transform:none;} #contents.main .cm_hero .cmh_pagination ul li {display:inline-block; position:relative; width:125px; height:auto; margin:0; background:none !important; font-size:15px; font-weight:400; color:var(--black)AA; opacity:1 !important; line-height:40px; white-space:nowrap; transition:0.3s;} #contents.main .cm_hero .cmh_pagination ul li:before {content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background-color:var(--black); opacity:0.1;} #contents.main .cm_hero .cmh_pagination ul li:after {content:""; position:absolute; left:0; bottom:0; width:0.001px; height:2px; background-color:var(--blue);} #contents.main .cm_hero .cmh_pagination ul li b {font-weight:700; transition:0.3s;} #contents.main .cm_hero .cmh_pagination ul li.swiper-pagination-bullet-active, #contents.main .cm_hero .cmh_pagination ul li:hover {color:var(--black);} #contents.main .cm_hero .cmh_pagination ul li.swiper-pagination-bullet-active:after, #contents.main .cm_hero .cmh_pagination ul li:hover:after {width:100%; transition:0.5s;} #contents.main .cm_hero .cmh_pagination ul li.swiper-pagination-bullet-active b, #contents.main .cm_hero .cmh_pagination ul li:hover b {color:var(--blue);} #contents.main .cm_product {padding-top:40px; padding-bottom:60px;} #contents.main .cm_product .cmp_depth {display:none; margin-bottom:40px; justify-content:space-between;} #contents.main .cm_product .cmp_depth li {display:flex;} #contents.main .cm_product .cmp_list {display:inline-block; vertical-align:middle; float:left; width:100%; aspect-ratio:172/70;} #contents.main .cm_product .cmp_list > li {display:inline-block; position:relative; float:left; width:50%; height:calc(50% - 10px); background-color:var(--white); border-radius:10px;} #contents.main .cm_product .cmp_list > li.big {height:100%;} #contents.main .cm_product .cmp_list > li:nth-child(n + 2) {width:calc(50% - 20px); margin-left:20px;} #contents.main .cm_product .cmp_list > li:nth-child(n + 3) {width:calc(25% - 20px); margin-top:20px;} #contents.main .cm_product .cmp_list > li .cmpl_type {position:absolute; left:30px; top:30px; z-index:40; box-sizing:border-box; min-width:70px; height:20px; padding:0 10px; border-radius:2px; font-size:14px; font-weight:800; color:var(--white); line-height:20px; border:0; text-align:center;} #contents.main .cm_product .cmp_list > li .cmpl_type.t1 {background-color:var(--skyblue_t1);} #contents.main .cm_product .cmp_list > li .cmpl_type.t2 {background-color:var(--skyblue);} #contents.main .cm_product .cmp_list > li .cmpl_type.t3 {background-color:var(--purple);} #contents.main .cm_product .cmp_list > li .cmpl_type.t4 {background-color:var(--mint);} #contents.main .cm_product .cmp_list > li .cmpl_pic {position:relative; top:2%; box-sizing:border-box; padding:15px; height:calc(100% - 110px);} #contents.main .cm_product .cmp_list > li.big .cmpl_pic {top:0; height:100%; height:clamp(300px, 29.68vw, 570px); max-height:570px; padding:30px;} #contents.main .cm_product .cmp_list > li.wide .cmpl_pic {position:absolute; left:5%; top:0; height:100%; padding:50px;} #contents.main .cm_product .cmp_list > li .cmpl_pic img {width:auto; height:100%;} #contents.main .cm_product .cmp_list > li .cmpl_box {position:relative; width:100%; height:100%;} #contents.main .cm_product .cmp_list > li .cmpl_box > div, #contents.main .cm_product .cmp_list > li .cmpl_box > div > div, #contents.main .cm_product .cmp_list > li .cmpl_swiper, #contents.main .cm_product .cmp_list > li .cmpl_wrap {height:100%;} #contents.main .cm_product .cmp_list > li .cmpl_swiper, #contents.main .cm_product .cmp_list > li .cmpl_wrap {cursor:pointer;} #contents.main .cm_product .cmp_list > li .cmpl_swiper .swiper {position:relative; height:100%;} #contents.main .cm_product .cmp_list > li .cmpl_info {display:inline-block; position:absolute; left:0; top:0; width:100%; height:100%;} #contents.main .cm_product .cmp_list > li.wide .cmpl_info {display:flex; align-items:center; left:calc(50% + 10px); right:0; width:auto;} #contents.main .cm_product .cmp_list > li .cmpl_info .cmpli_detail {position:absolute; left:30px; right:30px; bottom:30px;} #contents.main .cm_product .cmp_list > li.wide .cmpl_info .cmpli_detail {bottom:auto;} #contents.main .cm_product .cmp_list > li .cmpl_info .cmpli_detail > p {display:-webkit-box; overflow:hidden; max-height:25px; font-size:16px; color:var(--black); font-weight:400; line-height:25px; letter-spacing:-0.5px; text-align:left; text-overflow:ellipsis; -webkit-line-clamp:1; -webkit-box-orient:vertical; word-break:keep-all;} #contents.main .cm_product .cmp_list > li:hover .cmpl_info .cmpli_detail > p {text-decoration:underline; text-underline-position:under;} #contents.main .cm_product .cmp_list > li.big .cmpl_info .cmpli_detail > p, #contents.main .cm_product .cmp_list > li.wide .cmpl_info .cmpli_detail > p {max-height:60px; font-size:20px; line-height:30px; -webkit-line-clamp:2;} #contents.main .cm_product .cmp_list > li.wide .cmpl_info .cmpli_detail > p {max-height:30px; -webkit-line-clamp:1;} #contents.main .cm_product .cmp_list > li .cmpl_info .cmpli_detail > p strong {font-weight:700;} #contents.main .cm_product .cmp_list > li .cmpl_info .cmpli_detail > span {display:inline-block; vertical-align:middle; width:100%; font-size:12px; color:var(--gray_t2); line-height:25px; letter-spacing:-0.5px; text-align:left;} #contents.main .cm_product .cmp_list > li.big .cmpl_info .cmpli_detail > span, #contents.main .cm_product .cmp_list > li.wide .cmpl_info .cmpli_detail > span {font-size:15px; line-height:30px;} #contents.main .cm_product .cmp_list > li .cmpl_info .cmpli_detail > strong {display:inline-block; vertical-align:middle; width:100%; font-size:16px; font-weight:800; line-height:25px; letter-spacing:-0.5px; text-align:left;} #contents.main .cm_product .cmp_list > li.big .cmpl_info .cmpli_detail > strong, #contents.main .cm_product .cmp_list > li.wide .cmpl_info .cmpli_detail > strong {font-size:20px; line-height:30px;} #contents.main .cm_product .cmp_list > li .cmpl_info .cmpli_detail > b {display:block; font-size:16px; line-height:25px; letter-spacing:-0.8px;} #contents.main .cm_product .cmp_list > li .cmpl_info .cmpli_detail > b > span {color:var(--skyblue_t1); padding-right:15px; margin-right:5px; font-weight:700; text-decoration:line-through;} #contents.main .cm_product .cmp_list > li.big .cmpl_info .cmpli_detail .itmDtlInf > b, #contents.main .cm_product .cmp_list > li.wide .cmpl_info .cmpli_detail .itmDtlInf > b {font-size:20px; line-height:30px;} #contents.main .cm_product .cmp_list > li .cmpl_pagination {position:absolute; right:30px; bottom:30px; z-index:10; width:auto; height:auto !important; text-align:right; pointer-events:none;} #contents.main .cm_product .cmp_list > li .cmpl_pagination .swiper-pagination-bullet {position:relative; width:8px; height:8px; margin:0; border:var(--blue) solid 1px; border-radius:50%; background-color:transparent; opacity:1 !important; transition:0.3s; pointer-events:auto;} #contents.main .cm_product .cmp_list > li .cmpl_pagination .swiper-pagination-bullet::before {content:""; position:absolute; left:-5px; right:-5px; top:-5px; bottom:-5px;} #contents.main .cm_product .cmp_list > li .cmpl_pagination .swiper-pagination-bullet + .swiper-pagination-bullet {margin-left:10px;} #contents.main .cm_product .cmp_list > li .cmpl_pagination .swiper-pagination-bullet.swiper-pagination-bullet-active, #contents.main .cm_product .cmp_list > li .cmpl_pagination .swiper-pagination-bullet:hover {background-color:var(--blue);} #contents.main .cm_product .cmp_list > li .cmpl_controller {position:absolute; left:30px; right:30px; z-index:10; top:50%; height:50px; margin-top:-25px; pointer-events:none;} #contents.main .cm_product .cmp_list > li .cmpl_controller li {position:absolute; left:0; top:0; bottom:0; width:auto; aspect-ratio:1/1; pointer-events:auto;} #contents.main .cm_product .cmp_list > li .cmpl_controller li:last-child {left:auto; right:0;} #contents.main .cm_product .cmp_list > li .cmpl_controller li .cmplc_btn {display:flex; justify-content:center; align-items:center; position:absolute; left:0; right:0; top:0; bottom:0; box-sizing:border-box; border-radius:50%; border:var(--blue01) solid 1px; transition:0.3s;} #contents.main .cm_product .cmp_list > li .cmpl_controller li .cmplc_btn:hover {background-color:var(--blue); border-color:var(--blue);} #contents.main .cm_product .cmp_list > li .cmpl_controller li .cmplc_btn i {display:flex; position:relative; width:20px; height:20px; background:url(../images/newbird/common/icon_controller_b.svg) no-repeat; background-size:100% auto; transition:0.3s;} #contents.main .cm_product .cmp_list > li .cmpl_controller li .cmplc_btn:hover i {background-image:url(../images/newbird/common/icon_controller_w.svg)} #contents.main .cm_product .cmp_list > li .cmpl_controller li .cmplc_btn i.next {background-position-y:33.333%;} #contents.main .cm_product .cmp_list > li .cmpl_controller li .cmplc_btn i.play {background-position-y:66.666%;} #contents.main .cm_now {display:inline-block; width:100%; margin-bottom:20px; margin:120px 0;} #contents.main .cm_now .cmn_title {display:flex; flex-wrap:wrap; justify-content:center; width:100%; margin-bottom:160px;} #contents.main .cm_now .cmn_title h2 {display:inline-block; vertical-align:middle; width:100%; margin-bottom:20px; font-size:50px; color:var(--blue); font-weight:100; line-height:60px; letter-spacing:-4px;} #contents.main .cm_now .cmn_title h2 strong {color:var(--blue); font-weight:400;} #contents.main .cm_now .cmn_title p {display:inline-block; vertical-align:middle; width:100%; margin-bottom:40px; font-size:16px; color:var(--gray_t2); font-weight:400; line-height:30px; letter-spacing:-0.64px; word-break:keep-all;} #contents.main .cm_now .cmn_title p > span {display:inline-block;} #contents.main .cm_now .cmn_deco {overflow:hidden; display:inline-block; position:sticky; left:0; top:50%; width:calc(100% + clamp(120px, 10.4166vw, 240px)); margin-left:clamp(-120px, -5.2083vw, -60px); transform:translateY(-140px);} #contents.main .cm_now .cmn_deco > span {display:inline-block; position:relative; left:clamp(60px, 5.2083vw, 120px); font-size:250px; font-weight:400; color:var(--white); line-height:280px; letter-spacing:-20px; white-space:nowrap;} #contents.main .cm_now .cmn_wrap {display:inline-block; position:relative; width:100%;} #contents.main .cm_now .cmn_list {display:inline-block; vertical-align:middle; position:relative; width:calc(100% + 80px); margin-left:-40px; margin-top:-400px;} #contents.main .cm_now .cmn_list.moblie {position:absolute; left:0; right:0; top:0; bottom:0; opacity:0; pointer-events:none;} #contents.main .cm_now .cmn_list > li {display:inline-block; vertical-align:middle; float:left; position:relative; box-sizing:border-box; width:33.333%; padding:0 40px;} #contents.main .cm_now .cmn_list > li:nth-child(1) {padding-top:200px;} #contents.main .cm_now .cmn_list > li:nth-child(2) {padding-top:420px;} #contents.main .cm_now .cmn_list > li > .cmnl_box {display:inline-block; vertical-align:middle; float:left; width:100%; text-align:left; cursor:pointer;} #contents.main .cm_now .cmn_list > li > .cmnl_box + .cmnl_box {margin-top:70px;} #contents.main .cm_now .cmn_list > li > .cmnl_box > .cmnl_pic {display:inline-block; overflow:hidden; vertical-align:middle; float:left; position:relative; width:100%; margin-bottom:50px; border-radius:10px; font-size:0; line-height:0; aspect-ratio:1/1;} #contents.main .cm_now .cmn_list > li > .cmnl_box > .cmnl_pic > img {width:100%; height:100%; object-fit:cover; transition:5s;} #contents.main .cm_now .cmn_list > li > .cmnl_box > .cmnl_pic .icon {position:absolute; right:20px; top:20px; width:22px; height:22px; background-color:var(--white); border-radius:3px;} #contents.main .cm_now .cmn_list > li > .cmnl_box > .cmnl_pic .icon:before {content:""; position:absolute; left:50%; top:50%; width:14px; height:14px; margin-left:-7px; margin-top:-7px; background:url(../images/newbird/common/icon_instargram.svg) no-repeat; background-size:100% auto;} #contents.main .cm_now .cmn_list > li > .cmnl_box > .cmnl_pic .icon.youtube:before {background:url(../images/newbird/common/icon_youtube.svg) no-repeat;} #contents.main .cm_now .cmn_list > li > .cmnl_box > .cmnl_pic .icon.snsTag_facebook:before {background-image:url('../images/newbird/common/icon_facebook_t1.svg');} #contents.main .cm_now .cmn_list > li > .cmnl_box > .cmnl_pic .icon.snsTag_insta:before {background-image:url('../images/newbird/common/icon_instargram.svg');} #contents.main .cm_now .cmn_list > li > .cmnl_box > .cmnl_pic .icon.snsTag_ {display:none;} #contents.main .cm_now .cmn_list > li > .cmnl_box:hover > .cmnl_pic > img {transform:scale(1.2);} #contents.main .cm_now .cmn_list > li > .cmnl_box > strong {display:inline-block; vertical-align:middle; float:left; position:relative; width:100%; padding-top:7px; margin-bottom:15px; font-size:30px; font-weight:800; color:var(--blue); line-height:50px; letter-spacing:-1.2px;} #contents.main .cm_now .cmn_list > li > .cmnl_box > strong:before {content:""; position:absolute; left:0; top:0; width:20px; height:5px; background-color:currentColor;} #contents.main .cm_now .cmn_list > li > .cmnl_box > b {display:-webkit-box; overflow:hidden; vertical-align:middle; float:left; position:relative; width:100%; height:34px; font-size:20px; font-weight:400; color:var(--black); line-height:34px; letter-spacing:-0.5px; text-overflow:ellipsis; -webkit-line-clamp:1; -webkit-box-orient:vertical;} #contents.main .cm_now .cmn_list > li > .cmnl_box > p {display:-webkit-box; overflow:hidden; vertical-align:middle; float:left; position:relative; width:100%; max-height:60px; margin-bottom:30px; font-size:16px; color:var(--gray_t2); font-weight:400; line-height:30px; letter-spacing:-0.5px; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:keep-all;} #contents.main .cm_now .cmn_list > li > .cmnl_box > span {display:inline-block; vertical-align:middle; float:left; position:relative; width:100%; font-size:12px; font-weight:400; color:var(--gray_t2); line-height:30px; letter-spacing:-0.5x;} #contents.main .cm_function {display:flex; vertical-align:middle; width:100%; margin-top:clamp(100px, 10.4vw, 200px);} #contents.main .cm_function ul {display:flex; justify-content:space-between; gap:20px;} #contents.main .cm_function ul li {display:flex; position:relative; overflow:hidden; width:14.285%; background-color:var(--white); border-radius:10px; box-shadow:0 40px 80px rgba(28, 28, 32, 0.08); transition:0.3s;} #contents.main .cm_function ul li:hover {box-shadow:0 60px 120px rgba(13, 92, 171, 0.35);} #contents.main .cm_function ul li:before {content:""; position:absolute; left:0; right:0; top:0; bottom:0; z-index:0; opacity:0; background:linear-gradient(135deg, rgba(8, 88, 197, 1) 0%, rgba(2, 31, 147, 1) 100%); transition:0.3s;} #contents.main .cm_function ul li:hover:before {opacity:1;} #contents.main .cm_function ul li > a {display:inline-block; vertical-align:middle; position:relative; z-index:1; width:100%; padding:25px 0; text-align:center;} #contents.main .cm_function ul li > a > i {display:inline-block; width:80px; height:80px; margin-bottom:18px; background:url(../images/newbird/common/icon_mainfunction.svg) no-repeat; background-size:100% auto; transition:0.3s;} #contents.main .cm_function ul li:nth-child(2) > a > i {background-position-y:16.666%;} #contents.main .cm_function ul li:nth-child(3) > a > i {background-position-y:33.333%;} #contents.main .cm_function ul li:nth-child(4) > a > i {background-position-y:49.999%;} #contents.main .cm_function ul li:nth-child(5) > a > i {background-position-y:66.666%;} #contents.main .cm_function ul li:nth-child(6) > a > i {background-position-y:83.333%;} #contents.main .cm_function ul li:nth-child(7) > a > i {background-position-y:100%;} #contents.main .cm_function ul li:hover > a > i {background-image:url(../images/newbird/common/icon_mainfunction_w.svg);} #contents.main .cm_function ul li > a > strong {display:inline-block; vertical-align:middle; width:100%; margin-bottom:11px; font-size:22px; font-weight:700; color:var(--blue); line-height:26px; letter-spacing:-0.5px; transition:0.3s;} #contents.main .cm_function ul li:hover > a > strong {color:var(--white);} #contents.main .cm_function ul li > a > p {display:inline-block; vertical-align:middle; width:100%; font-size:12px; color:var(--gray_t2); font-weight:400; line-height:22px; letter-spacing:-0.5px; transition:0.3s;} #contents.main .cm_function ul li:hover > a > p {color:var(--skyblue_t2);} #contents.main .cm_function ul li > a > p > span {display:inline-block; vertical-align:middle; width:100%;} /* sub 공통 */ #contents .c_boxwrap {overflow:hidden; display:inline-block; width:100%; background-color:var(--white); border-radius:10px; box-shadow:0px 40px 80px 0px rgba(28, 28, 32, 0.08);} #contents .c_1200wrap {display:inline-block; width:calc(100% - 40px); max-width:1200px; margin:0 auto;} /* 탭 관련 아이템 */ #contents .tabFnc {position:relative; box-sizing:border-box; width:calc(100% - 40px); max-width:1200px;} #contents .tabFncWrp {position:relative; z-index:20; background-color:var(--white); border-bottom:1px var(--gray_t3) solid;} #contents .storyTabWrap.t1 .tabFncWrp {border-top:1px var(--gray_t3) solid;} #contents .tabItm {display:flex;} #contents .tabItm > a {display:block; float:left; position:relative; z-index:10; margin-left:65px; font-size:20px; line-height:84px; color:var(--black); letter-spacing:-0.04em;} #contents .tabItm > a:hover {text-decoration:underline; text-underline-position:under;} #contents .tabItm > a:first-child {margin-left:0;} #contents .tabItm > a.on {color:var(--blue); font-weight:700;} #contents .tabItm > a > span {color:var(--skyblue_t1); font-weight:600;} #contents .tabItm > a::after{content:""; display:block; position:absolute; top:calc(100% - 2px); left:50%; z-index:10; width:0; height:3px; transform:translateX(-50%); background-color:var(--blue); opacity:0; transition:all 0.3s;} #contents .tabItm > a.on::after{width:100%; opacity:1;} #contents .tabSrt {width:250px; position:absolute; top:50%; right:0; transform:translateY(-50%);} /* 토글버튼 */ #contents .tglBtn{display:inline-block; position:relative; height:30px; border-radius:15px; background-color:#a9aab1; box-shadow:2px 2px 6px 0px rgba(0, 0, 0, 0.1) inset; cursor:pointer;} #contents .tglBtn > strong{position:absolute; width:calc(40%); height:calc(100% - 6px); border-radius:12px; background-color:var(--white); top:3px; left:3px;} #contents .tglBtn > strong::after{display:inline-block; content:"마감순"; font-size:1.167em; font-weight:400; color:var(--white); letter-spacing:-0.04em; position:absolute; top:0; left:100%; width:120%; line-height:24px; text-align:center;} #contents .tglBtn.on{background-color:var(--skyblue_t1);} #contents .tglBtn.on > strong{left:auto; right:3px;} #contents .tglBtn.on > strong::after{content:"최신순"; left:auto; right:100%;} /* 검색 관련 아이템 */ #contents .innSch {display:flex; align-items:center; justify-content:flex-end; position:absolute; top:0; left:50%; z-index:50; width:calc(100% - 40px); max-width:1200px; height:87px; margin:0 auto; transform:translateX(-50%); pointer-events:none;} #contents .innSch > div {display:inline-flex; pointer-events:auto;} #contents .innSch .iptCmn00 input {width:250px;} #contents .innSch .btn {min-width:100px;} /* 스토리허브 갤러리 리스트 */ #contents .storyWrap {border-radius:10px; padding-bottom:80px;} #contents .storyTop {background:var(--white); padding:100px 20px; overflow:hidden; border-radius:10px 10px 0 0;} #contents .storyTop .storyTopTit {font-size:22px; font-weight:700; color:var(--blue); line-height:40px;} #contents .storyTop .storyTopTit .num {color:var(--skyblue_t1); vertical-align:middle; font-weight:600;} #contents .storyTabWrap {position:relative; margin-bottom:80px;} #contents .storyTabWrap .innSch .btn {width:100px;} #contents .storyTabWrap .tabFnc {padding-right:370px;} /* #contents .storyTabWrap .tabItm > a {margin-left:45px;} */ #contents .searchBottom {display:flex; align-items:center; justify-content:space-between; margin-bottom:30px;} #contents .searchBottom .s_wrap {display:flex; align-items:center;} #contents .searchBottom .total {font-size:16px; font-weight:700; color:var(--blue); margin-right:20px;} #contents .searchBottom .tglBtn {width:100px; margin-left:30px;} #contents .searchBottom .tglBtn:hover strong:after {text-decoration:underline; text-underline-position:under;} #contents .storyWrap .tglBtn > strong:after {content:"좋아요";} #contents .storyWrap .tglBtn.on > strong:after {content:"최신순";} #contents .gallUl {display:flex; gap:30px; flex-wrap:wrap;} #contents .cs_swiper {overflow:visible;} #contents .cs_swiper .gallUl {gap:0; flex-wrap:initial; margin-top:0 !important} #contents .cs_swiper .gallUl > .gallLi {opacity:0; transition:0.3s;} #contents .cs_swiper .gallUl > .gallLi.swiper-slide-active, #contents .cs_swiper .gallUl > .gallLi.swiper-slide-next, #contents .cs_swiper .gallUl > .gallLi.swiper-slide-next + .gallLi {opacity:1 !important;} #contents .gallUl > li {overflow:hidden; width:calc(33.333% - 20px); background:var(--white); border-radius:10px; box-shadow:0 40px 80px rgba(28,28,32,0.08);} #contents .gallUl > .gallLi {overflow:hidden; background:var(--white); border-radius:10px; box-shadow:0 40px 80px rgba(28,28,32,0.08);} #contents .gallUl .gallUlImgArea {width:100%; padding-bottom:100%; height:0; position:relative; overflow:hidden; cursor:pointer;} #contents .gallUl .gallUlImgArea > span {position:absolute; left:0; top:0; z-index:0; width:100%; height:100%;} #contents .gallUl .image_thumb {position:absolute; left:50%; top:50%; width:100%; height:auto; transform:translate(-50%, -50%); transition:5s;} #contents .gallUl .gallUlImgArea > span:hover .image_thumb {transform:scale(1.2) translate(-40%, -40%);} #contents .gallUlTxtArea .top {padding:30px 30px 25px; text-align:left;} #contents .gallUlTxtArea .gallUlTit {overflow:hidden; font-size:18px; margin-bottom:15px; text-overflow:ellipsis; line-height:20px; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:100%; overflow:hidden; letter-spacing:-0.08em; font-weight:700; cursor:pointer;} #contents .gallUlTxtArea .gallUlTit:hover {text-decoration:underline; text-underline-position:under;} #contents .gallUlTxtArea .gallUlCon {display:-webkit-box; overflow:hidden; font-size:14px; color:var(--gray_t2); text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:break-word; line-height:25px; height:50px;} #contents .gallUlTxtArea .bottom {display:flex; border-top:1px solid var(--gray_t3); height:50px; text-align:left;} #contents .gallUlTxtArea .bottom > div {position:relative; padding:0 0 0 45px; font-size:12px; line-height:48px;} #contents .gallUlTxtArea .bottom .c_score {width:100px; color:var(--gray_t1);} #contents .gallUlTxtArea .bottom .c_date {width:calc(100% - 100px); color:var(--gray_t2); border-left:1px solid var(--gray_t3);} #contents .gallUlTxtArea .bottom .gallIcon {display:inline-block; position:absolute; left:20px; top:50%; width:16px; height:16px; transform:translateY(-50%);} #contents .gallUlTxtArea .bottom .gallIcon.iconHeart {background:url('../images/newbird/common/icon_heart_off.svg') no-repeat center; background-size:22px auto; cursor:pointer;} #contents .gallUlTxtArea .bottom .gallIcon.iconHeart.on {background:url('../images/newbird/common/icon_heart_on.svg') no-repeat center; background-size:22px auto;} #contents .gallUlTxtArea .bottom .gallIcon.iconClock {background:url('../images/newbird/common/icon_time.svg') no-repeat center; background-size:22px auto;} #contents .boardTagWrap {position:absolute; left:20px; top:20px; z-index:1;} #contents .boardTagWrap .boardTag {box-sizing:border-box; min-width:80px; height:22px; padding:0 5px; line-height:22px; font-size:14px; color:var(--white); font-weight:700; text-align:center; background:var(--blue); border-radius:3px;} #contents .snsTagWrap {position:absolute; right:20px; top:20px; z-index:1;} #contents .snsTagWrap .snsTag {width:22px; height:22px; background-color:var(--white); background-repeat:no-repeat; background-position:center; border-radius:3px; background-size:14px;} #contents .snsTagWrap .snsTag.snsTag_facebook {background-image:url('../images/newbird/common/icon_facebook_t1.svg');} #contents .snsTagWrap .snsTag.snsTag_insta {background-image:url('../images/newbird/common/icon_instargram.svg');} #contents .snsTagWrap .snsTag.snsTag_youtube {background-image:url('../images/newbird/common/icon_youtube.svg');} #contents .snsTagWrap .snsTag.snsTag_etc {display:none;} /* 겔러리 리스트 */ #contents .thbLstWrp {padding-bottom:30px; border-bottom:1px var(--gray_t3) solid; margin-bottom:30px;} #contents .thbLst {display:flex; flex-wrap:wrap; justify-content:flex-start; gap:30px;} #contents .thbLstItm {position:relative; width:calc(33.333% - 20px);} #contents .thbLstItm > a {display:block; position:relative;} #contents .thbLstItm p {overflow:hidden; position:relative; width:100%; height:0; margin-bottom:26px; padding-bottom:58.14%; border-radius:5px;} #contents .thbLstItm p img {position:absolute; left:50%; top:50%; width:100%; height:auto; transform:translate(-50%, -50%); transition:5s;} #contents .thbLstItm > a:hover img {transform:scale(1.2) translate(-40%,-40%);} #contents .thbLstItm strong {display:block; margin-bottom:14px; font-size:18px; font-weight:700; color:var(--black); text-align:center; line-height:20px; letter-spacing:-1.44px; word-break:keep-all;} #contents .thbLstItm span {display:block; font-size:14px; color:var(--gray_t2); text-align:center; line-height:16px; letter-spacing:-0.56px;} #contents .thbLstItm div {display:flex; align-items:center; justify-content:center; position:absolute; bottom:20px; right:20px; box-sizing:border-box; width:80px; height:80px; border-radius:40px; background-color:var(--gray_t1); color:var(--white); font-weight:700; font-size:14px; text-align:center; line-height:20px; letter-spacing:-0.56px;} #contents .thbLstItm div.on {background-color:var(--blue);} /* event */ #contents .c_event .c_boxwrap {padding-bottom:80px;} #contents .c_event .no_data_area2 {border-bottom:none;} /* youtubepop */ .youtubepop {display:none; justify-content:center; align-items:center; position:fixed; left:0; top:0; z-index:1001; width:100%; height:100%; background-color:var(--black08);} .youtubepop.open {display:flex;} .youtubepop .y_bg {position:absolute; left:0; right:0; top:0; bottom:0;} .youtubepop .y_wrap {display:inline-block; position:relative; width:100%; max-width:960px; aspect-ratio:16/9;} .youtubepop .y_close {display:block; position:absolute; left:50%; top:-70px; width:50px; height:50px; margin-left:-25px; background:var(--blue); border-radius:50%; box-shadow:0 10px 20px rgba(23,42,126,0.2);} .youtubepop .y_close i {position:absolute; left:50%; top:50%; width:22px; height:22px; margin-left:-11px; margin-top:-11px; transform:rotate(45deg); transition:0.3s;} .youtubepop .y_close:hover i {transform:rotate(135deg);} .youtubepop .y_close i:before, .youtubepop .y_close i:after {content:""; position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px; background-color:var(--white); border-radius:1px;} .youtubepop .y_close i:after {transform:rotate(90deg);} .youtubepop .y_video {position:relative; width:100%; height:100%; box-shadow:0 80px 160px rgba(28,28,32,0.6);} .youtubepop .y_video iframe {position:absolute; left:0; right:0; top:0; bottom:0; width:100%; height:100%;} /* footer */ #footer {display:flex; justify-content:center; width:100%; padding:60px 0; background-color:var(--white);} #footer .f_wrap {display:flex; flex-wrap:wrap; align-items:flex-start; width:100%; gap:50px;} #footer .f_area {display:flex; width:100%;} #footer .f_area.t2 {flex-wrap:wrap;} #footer .f_nav, #footer .f_info {display:flex; flex-wrap:wrap; gap:45px;} #footer .f_nav {flex-shrink:0; width:170px;} #footer .f_logo {display:flex; position:relative; width:100px; height:40px; margin-right:70px; background:url(../images/newbird/common/logo.svg) no-repeat; background-size:100% auto; aspect-ratio:10/4;} #footer .f_nav ul {display:flex; flex-wrap:wrap;} #footer .f_nav ul li {width:100%;} #footer .f_nav ul li a {display:inline-block; vertical-align:middle; width:100%; font-size:13px; line-height:40px; letter-spacing:-0.64px; text-align:left; transition:0.3s;} #footer .f_nav ul li a:hover {font-weight:700; text-decoration:underline; text-underline-position:under;} #footer .f_nav ul li a strong {font-weight:700;} #footer .f_copyright {font-size:11px; font-weight:700; color:var(--gray_t2); line-height:40px;} #footer .f_info ul {display:flex; flex-wrap:wrap;} #footer .f_info ul li {width:100%; font-size:13px; color:var(--gray_t1); line-height:40px; letter-spacing:-0.64px; text-align:left;} #footer .f_info ul li a {color:var(--gray_t1); transition:0.3s;} #footer .f_info ul li a:hover {font-weight:700; text-decoration:underline; text-underline-position:under; color:var(--black);} #footer .f_info ul li strong {font-size:16px; font-weight:700; color:var(--blue);} #footer .f_box {display:flex; justify-content:space-between; align-items:flex-start; width:50%;} #footer .f_box.t1 {justify-content:initial; align-items:center;} #footer .f_box.t2 {align-items:center;} #footer .f_box.t4 {flex-wrap:wrap;} #footer .f_box.t4 > div {display:flex;} #footer .f_box.t4 > div + div {margin-top:60px;} /* #footer .f_box:nth-child(1) {align-items:center;} #footer .f_box:nth-child(2) {margin-top:45px;} #footer .f_box:nth-child(3) {margin-top:60px;} */ #footer .f_sns {display:flex; gap:10px;} #footer .f_sns li {position:relative; width:30px; height:30px;} #footer .f_sns li a, #footer .f_sns li i {position:absolute; left:0; right:0; top:0; bottom:0;} #footer .f_sns li a {background-color:var(--gray_t4); border-radius:50%;} #footer .f_sns li:nth-child(1) a:hover {background-color:#03cf5d; transition:all 0.5s;} #footer .f_sns li:nth-child(2) a:hover {background-color:#43619b; transition:all 0.5s;} #footer .f_sns li:nth-child(3) a:hover {background-color:#cc181e; transition:all 0.5s;} #footer .f_sns li:nth-child(4) a:hover {background-color:#da3073; transition:all 0.5s;} #footer .f_sns li i {background:url(../images/newbird/common/icon_sns.svg) no-repeat; background-size:100% auto;} #footer .f_sns li:nth-child(2) i {background-position-y:33.333%;} #footer .f_sns li:nth-child(3) i {background-position-y:66.666%;} #footer .f_sns li:nth-child(4) i {background-position-y:100%;} #footer .f_link {display:flex; align-items:flex-start; gap:10px;} #footer .f_link .fl_btn {display:inline-block; position:relative; vertical-align:middle; box-sizing:border-box; width:200px; padding-left:20px; background-color:var(--blue); border-radius:3px; font-size:14px; font-weight:700; line-height:50px; color:var(--white); text-align:left;} @media screen and (min-width: 768px) and (hover: hover) and (pointer: fine) { #footer .f_link .fl_btn:hover {text-decoration:underline; text-underline-position:under;} } #footer .f_link .fl_btn.t2 {background-color:var(--white_t1); color:var(--gray_t1);} #footer .f_link .fl_btn i {position:absolute; top:50%; right:20px; margin-top:-5px; width:6px; height:10px; color:var(--skyblue_t2); transition:0.3s;} #footer .f_link .fl_btn i:before {content:""; position:absolute; left:2px; top:1px; width:6px; height:2px; border-radius:2px; background-color:currentColor; transform-origin:left top; transform:rotate(45deg);} #footer .f_link .fl_btn i:after {content:""; position:absolute; left:2px; bottom:1px; width:6px; height:2px; border-radius:2px; background-color:currentColor; transform-origin:left bottom; transform:rotate(-45deg);} #footer .f_link .fl_btn.t2 i {color:var(--gray_t2); transform:rotate(90deg);} #footer .f_link .fl_btn.open.t2 i {transform:rotate(-90deg);} #footer .f_link .fl_familysite {position:relative;} #footer .f_link .fl_familysite > ul {overflow:hidden; position:absolute; left:0; top:50px; z-index:30; width:100%; height:0; background-color:var(--white_t1); transition:all 0.5s;} #footer .f_link .fl_familysite > .fl_btn.open ~ ul {height:auto; transition:all 0.5s;} #footer .f_link .fl_familysite > ul li:last-child {padding-bottom:16px;} #footer .f_link .fl_familysite > ul li a {display:block; padding:0 20px; color:var(--gray_t1); font-size:14px; line-height:40px; text-align:left;} @media screen and (min-width: 768px) and (hover: hover) and (pointer: fine) { #footer .f_link .fl_familysite > ul li a:hover {text-decoration:underline; text-underline-position:under;} } #footer .f_address {display:flex; flex-wrap:wrap; width:100%;} #footer .f_address li {position:relative; box-sizing:border-box; width:100%; padding-left:110px; text-align:left;} #footer .f_address li strong {position:absolute; left:0; top:0; font-size:13px; color:var(--black); font-weight:700; line-height:40px; letter-spacing:-0.64px;} #footer .f_address li span {font-size:13px; color:var(--gray_t1); line-height:40px; letter-spacing:-0.64px; word-break:keep-all;} #footer .f_wa {flex-shrink:0; width:69px; font-size:0; line-height:0;} #footer .f_wa img {width:100%; height:auto;} #footer .f_cs {display:flex; flex-wrap:wrap; gap:40px;} #footer .f_cs > li > a {display:block; position:relative; padding-left:35px; font-size:14px; line-height:30px; letter-spacing:-0.8px;} #footer .f_cs > li > a > i {position:absolute; left:0; top:50%; width:22px; height:22px; margin-top:-11px; background:url("../images/newbird/common/icon_cs.svg") no-repeat; background-size:100% auto;} #footer .f_cs > li > a > span {margin-left:20px;} #footer .f_cs > li > a:hover > span {text-decoration:underline; text-underline-position:under;} #footer .f_cs > li > span {display:block; font-size:12px; color:var(--gray_t1); text-align:right;} #footer .f_cs > li:nth-child(1) > a > i {background-position-y:0%;} #footer .f_cs > li:nth-child(2) > a > i {background-position-y:50%;} #footer .f_cs > li:nth-child(3) > a > i {background-position-y:100%;} #footer .f_infobtn {display:none;} #mobilecs {display:none;} /* 광고 수신 동의 팝업 */ #marketingDeatilLayer2::before {content:""; display:block; position:fixed; top:0; left:0; width:100%; height:100vh; background:rgba(28,28,32,0.8);} @media all and (max-width:1680px) { /* header */ #header .h_cate {gap:clamp(40px, 3vw, 60px);} #header .h_cate > ul {gap:clamp(20px, 1.5vw, 30px);} #header .h_cate > ul ~ ul::before {left:clamp(-30px,-1.5vw,-20px);} /* main */ #contents.main .cm_hero .cmh_wrap {min-height:0; height:auto;} #contents.main .cm_hero .cmh_swiper .cmh_text > strong {margin-bottom:clamp(15px,2.6786vw,45px); font-size:clamp(14px, 1.1905vw ,20px); font-weight:700; line-height:28px;} #contents.main .cm_hero .cmh_swiper .cmh_text > p {margin-bottom:clamp(15px,1.7857vw,30px);} #contents.main .cm_hero .cmh_swiper .cmh_text > p > span {font-size:clamp(20px,2.6786vw,45px); line-height:clamp(25px,3.5714vw,60px);} #contents.main .cm_hero .cmh_swiper .cmh_text > ul {column-gap:clamp(10px,0.7738vw,13px); margin-bottom:clamp(25px,3.5714vw,60px);} #contents.main .cm_hero .cmh_swiper .cmh_text > ul > li {font-size:clamp(12px,0.9524vw,16px); line-height:clamp(20px,1.3095vw,22px);} #contents.main .cm_hero .cmh_pagination ul li {width:110px; font-size:14px;} #contents.main .cm_product .cmp_depth li {width:9%;} #contents.main .cm_product .cmp_depth li .scnDthIco {width:100%; height:auto; aspect-ratio:15/14;} #contents.main .cm_now .cmn_list {width:calc(100% + 60px); margin-left:-30px;} #contents.main .cm_now .cmn_list > li {padding:0 30px;} #contents.main .cm_function ul {flex-wrap:wrap;} #contents.main .cm_function ul li {width:calc(25% - 20px);} #contents.main .cm_function ul li:nth-child(n + 5) {width:calc(33.333% - 13.333px);} } @media all and (max-width:1440px) { /* header */ #header .h_cate {left:120px;} #header .h_cate > ul > li > a {font-size:16px;} /* aside */ #aside {right:60px; bottom:60px;} #aside ul {gap:25px; width:100px;} #aside ul li .a_btn > span {font-size:18px;} #aside ul li .a_btn.naver i {width:48px;} /* main */ #contents {padding-bottom:100px;} #contents.main .cm_hero .cmh_function {gap:40px;} #contents.main .cm_hero .cmh_function .cmhf_progress {gap:10px;} #contents.main .cm_hero .cmh_function .cmhf_progress .bar {width:100px;} #contents.main .cm_hero .cmh_pagination ul li {font-size:13px;} #contents.main .cm_product .cmp_list > li.big .cmpl_info .cmpli_detail > p, #contents.main .cm_product .cmp_list > li.wide .cmpl_info .cmpli_detail > p {max-height:56px; font-size:18px; line-height:28px;} #contents.main .cm_product .cmp_list > li.wide .cmpl_info .cmpli_detail > span {font-size:14px; line-height:28px;} #contents.main .cm_product .cmp_list > li.wide .cmpl_info .cmpli_detail > strong {font-size:18px; line-height:28px;} #contents.main .cm_product .cmp_list > li.big .cmpl_info .cmpli_detail .itmDtlInf > b, #contents.main .cm_product .cmp_list > li.wide .cmpl_info .cmpli_detail .itmDtlInf > b {font-size:18px; line-height:28px;} } @media all and (max-width:1280px) { /* header */ #header .h_logo {width:80px; height:auto;} #header .h_function > ul > li {width:40px; height:40px;} #header .h_function > ul > li > ul {top:55px;} #header .h_cate {align-items:center; gap:25px;} #header .h_cate > .hc_btn {display:flex; justify-content:center; align-items:center; position:relative; width:40px; height:40px; border-radius:50%; background-color:var(--white); box-shadow:0px 20px 40px 0px rgba(28, 28, 32, 0.06); transition:0.3s;} #header .h_cate > .hc_btn:hover, #header .h_cate > .hc_btn.open {background-color:var(--skyblue_t1);} #header .h_cate > .hc_btn i {display:inline-block; width:20px; height:20px;} #header .h_cate > .hc_btn i.menu {background:url(../images/newbird/common/icon_menu.svg) no-repeat; background-size:100% auto; transition:0.3s;} #header .h_cate > .hc_btn:hover i.menu {background-image:url(../images/newbird/common/icon_menu_w.svg);} #header .h_cate > .hc_btn i.close {display:none;} #header .h_cate > .hc_btn.open i.menu {display:none;} #header .h_cate > .hc_btn.open i.close {display:inline-block; position:relative; width:22px; height:22px; transform:rotate(45deg); transition:0.3s;} #header .h_cate > .hc_btn.open:hover i.close {transform:rotate(135deg);} #header .h_cate > .hc_btn.open i.close::before, #header .h_cate > .hc_btn.open i.close::after {content:""; position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px; border-radius:1px; background-color:var(--white);} #header .h_cate > .hc_btn.open i.close::after {transform:rotate(90deg);} #header .h_cate .hc_list {display:none;} #header .h_cate > .hc_btn + .hc_list {flex-wrap:wrap; flex-wrap:wrap; gap:0; position:absolute; left:340px; top:55px; width:180px; padding:15px; border-radius:15px; background-color:rgb(255, 255, 255); box-shadow:rgba(28, 28, 32, 0.05) 14px 14px 40px 0px;} #header .h_cate > .hc_btn + .hc_list:before {content:""; position:absolute; left:30px; top:-5px; width:0; height:0; margin-top:0; border-style:solid; border-width:0px 5px 5px 5px; border-color:transparent transparent var(--white) transparent; background:none;} #header .h_cate > .hc_btn + .hc_list:after {content:""; position:absolute; left:0; right:0; top:-20px; height:20px;} #header .h_cate > .hc_btn.open + .hc_list {display:flex;} #header .h_cate > .hc_btn + .hc_list > li {display:flex; width:100%;} #header .h_cate > .hc_btn + .hc_list > li > a {display:inline-block; width:100%; padding:0px 15px; color:var(--gray_t1); font-size:14px; line-height:40px; letter-spacing:-0.05px; text-align:left; transition:0.3s;} #header .h_cate > .hc_btn + .hc_list > li > a::before {display:none;} #header .h_cate > .hc_btn + .hc_list > li > a:hover {color:var(--blue); font-weight:700;} .searchrank ul li {margin-right:33px;} /* searchpop */ #searchpop .s_wrap {padding-top:150px;} /* aside */ #aside {right:50px; bottom:50px;} #aside ul {width:90px;} #aside ul li .a_btn > span {font-size:17px;} #aside ul li .a_btn.naver i {width:42px;} #aside ul li .a_btn.video i {bottom:-15px; width:30px; height:30px; margin-left:-15px;} #aside ul li .a_topbtn {width:50px; height:50px;} #aside ul li .a_topbtn i {height:30px;} /* main */ #contents {padding-bottom:80px;} #contents.main .cm_hero .cmh_function {display:none;} #contents.main .cm_hero .cmh_pagination {left:160px;} #contents.main .cm_hero .cmh_bi {right:7%; transform:scale(0.75); transform-origin:top right;} #contents.main .cm_product {padding-top:30px; padding-bottom:50px;} #contents.main .cm_product .cmp_list {height:500px; aspect-ratio:auto;} #contents.main .cm_product .cmp_list > li .cmpl_type {left:20px; top:20px;} #contents.main .cm_product .cmp_list > li .cmpl_info .cmpli_detail {left:20px; right:20px; bottom:20px;} #contents.main .cm_product .cmp_list > li .cmpl_pic {height:calc(100% - 100px);} #contents.main .cm_now {margin:90px 0;} #contents.main .cm_now .cmn_deco {transform:translateY(-110px);} #contents.main .cm_now .cmn_deco > span {left:clamp(60px, 5.2083vw, 120px); font-size:200px; line-height:220px; letter-spacing:-15px;} #contents.main .cm_now .cmn_list {width:calc(100% + 50px); margin-left:-25px;} #contents.main .cm_now .cmn_list li {padding:0 25px;} #contents.main .cm_now .cmn_list > li > .cmnl_box + .cmnl_box {margin-top:50px;} #contents.main .cm_now .cmn_list > li > .cmnl_box > .cmnl_pic {margin-bottom:35px;} #contents.main .cm_now .cmn_list > li > .cmnl_box > strong {padding-top:10px; margin-bottom:10px; font-size:25px; line-height:35px;} #contents.main .cm_now .cmn_list > li > .cmnl_box > b {font-size:18px; height:32px; line-height:32px;} #contents.main .cm_now .cmn_list > li > .cmnl_box > p {margin-bottom:20px; font-size:15px;} /* sub 공통 */ #contents .tabItm > a {margin-left:40px; font-size:18px; line-height:70px;} #contents .innSch {height:70px;} /* 스토리허브 갤러리 리스트 */ #contents .storyTop {padding:40px 20px 30px;} #contents .storyTabWrap.t1 {margin-bottom:0;} #contents .gallUl > li {width:calc(50% - 15px) !important;} #contents .gallUlTxtArea .top {padding:17px 20px 15px;} /* 겔러리 리스트 */ #contents .thbLstItm {width:calc(50% - 15px);} /* event */ #contents .c_event .c_boxwrap {padding-bottom:60px;} /* footer */ #footer .f_wrap {flex-wrap:wrap; gap:30px; position:relative; margin-bottom:70px;} #footer .f_area.t1 {width:100%; gap:30px; flex-wrap:wrap;} #footer .f_nav, #footer .f_info {gap:30px;} #footer .f_box.t1, #footer .f_box.t2 {width:100%;} #footer .f_box.t4 > div + div {position:absolute; left:0; right:0; bottom:-70px; margin-top:0;} #footer .f_logo {width:80px; height:auto; margin-right:90px;} #footer .f_copyright {line-height:30px;} } @media all and (max-width:1024px) { /* header */ #header {height:120px;} #header .h_cate {display:none;} #header .h_function > ul > li:last-child {display:flex;} #header .h_function > ul > li .hf_btn.hf_menu i.icon {position:relative; background:none; width:16px; height:12px; color:var(--gray_t2);} #header .h_function > ul > li .hf_btn.hf_menu i.close {display:none;} #header .h_function > ul > li .hf_btn.hf_menu i.menu:before, #header .h_function > ul > li .hf_btn.hf_menu i.menu:after {content:""; position:absolute; right:0; top:0; width:100%; height:3px; background-color:currentColor; border-radius:2px;} #header .h_function > ul > li .hf_btn.hf_menu i.menu:after {width:12px; top:auto; bottom:0;} #header .h_function > ul > li .hf_btn.hf_menu:hover i.icon {color:var(--white);} #header .h_function > ul > li .hf_btn.hf_menu.open {background-color:var(--skyblue_t1);} #header .h_function > ul > li .hf_btn.hf_menu.off {background-color:var(--white);} #header .h_function > ul > li .hf_btn.hf_menu.open i.menu {display:none;} #header .h_function > ul > li .hf_btn.hf_menu.off i.menu {display:block;} #header .h_function > ul > li .hf_btn.hf_menu.open i.close {display:inline-block; position:relative; width:22px; height:22px; transform:rotate(45deg); transition:0.3s;} #header .h_function > ul > li .hf_btn.hf_menu.off i.close {display:none;} #header .h_function > ul > li .hf_btn.hf_menu.open:hover i.close {transform:rotate(135deg);} #header .h_function > ul > li .hf_btn.hf_menu.open i.close::before, #header .h_function > ul > li .hf_btn.hf_menu.open i.close::after {content:""; position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px; border-radius:1px; background-color:var(--white);} #header .h_function > ul > li .hf_btn.hf_menu.open i.close::after {transform:rotate(90deg);} /* mobilemenu */ #mobilemenu.open {pointer-events:auto;} #mobilemenu.open ~ .mobilemenubg {opacity:0.8; pointer-events:auto;} #mobilemenu.open .m_wrap {right:0;} #mobilemenu .m_area {position:absolute; left:0; right:0; top:150px; bottom:0;} #mobilemenu .m_login {display:flex; align-items:center; gap:20px; position:relative; box-sizing:border-box; width:100%; height:70px; padding:0 30px; background-color:var(--blue); font-size:16px; font-weight:400; color:var(--white); line-height:30px; letter-spacing:-0.5px;} #mobilemenu .m_login strong {font-weight:700;} #mobilemenu .m_login .icon.member {display:flex; align-items:center; justify-content:center; position:relative; width:30px; height:30px; background-color:var(--white); border-radius:50%;} #mobilemenu .m_login .icon.member i {width:20px; height:20px; background:url(../images/newbird/common/icon_member.svg) no-repeat; background-size:100% auto;} #mobilemenu .m_login .icon.arrow {position:absolute; top:50%; right:30px; width:20px; height:20px; margin-top:-10px; background:url(../images/newbird/common/icon_rightarrow.svg) no-repeat; background-size:100% auto; opacity:0.3; transition:0.3s;} #mobilemenu .m_login:hover .icon.arrow {opacity:1;} #mobilemenu .m_login ~ .m_nav {height:calc(100vh - 220px);} #mobilemenu .m_nav {display:inline-block; position:relative; overflow:auto; width:100%; height:calc(100vh - 150px); background-color:var(--white_t1);} #mobilemenu .m_nav > li {display:inline-block; float:left; position:relative; width:100%;} #mobilemenu .m_nav > li.t1 {display:none;} #mobilemenu .m_nav > li::before {content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background-color:var(--gray_t3);} #mobilemenu .m_nav > li > .mn_btn {display:flex; justify-content:flex-start; align-items:center; position:relative; box-sizing:border-box; width:100%; padding:0 30px; font-size:17px; font-weight:500; color:var(--black); line-height:60px; letter-spacing:-0.5px; text-align:left;} #mobilemenu .m_nav > li > .mn_btn.newCreSvc {background:linear-gradient(300deg,rgba(135, 155, 234, 1) 50%,rgba(39,57,147,1) 100%); background-size:200% 200%; animation:gradientAnimation 3s ease infinite; color:transparent; -webkit-background-clip:text; font-weight:700;} #mobilemenu .m_nav > li > .mn_btn.newCreSvc::before {content:""; display:inline-block; width:20px; height:17px; margin-right:5px; background:url(../images/newbird/common/icon_care.svg) no-repeat; background-size:contain; background-position:center;} #mobilemenu .m_nav > li > .mn_btn > i {position:absolute; top:50%; right:35px; width:10px; height:10px; margin-top:-5px;} #mobilemenu .m_nav > li > .mn_btn > i::before, #mobilemenu .m_nav > li > .mn_btn > i::after {content:""; position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px; border-radius:1px; background-color:var(--gray_t2);} #mobilemenu .m_nav > li > .mn_btn > i::after {transform:rotate(90deg);} #mobilemenu .m_nav > li > .mn_btn.on > i::after {display:none;} #mobilemenu .m_nav > li > ul {display:none; padding:10px 0 10px 20px; background-color:var(--gray_t3);} #mobilemenu .m_nav > li > .mn_btn.on ~ ul {display:block;} #mobilemenu .m_nav > li > ul > li > a {display:inline-block; position:relative; box-sizing:border-box; width:100%; padding:0 20px; font-size:15px; font-weight:500; color:var(--black); line-height:40px; letter-spacing:-0.5px; text-align:left;} #mobilemenu .m_nav > li > ul > li > a > i {position:absolute; top:50%; right:35px; width:10px; height:10px; margin-top:-5px;} #mobilemenu .m_nav > li > ul > li > a > i:before {content:""; position:absolute; box-sizing:border-box; top:50%; width:6px; height:6px; margin-top:-3px; border-top:var(--gray_t2) solid 2px; border-right:var(--gray_t2) solid 2px; transform:rotate(45deg);} #mobilemenu .m_nav > li > .mn_btn .cmb_pic {display:inline-block; vertical-align:middle; width:30px; margin-left:10px; font-size:0; line-height:0;} #mobilemenu .m_nav > li > .mn_btn .cmb_pic > img {width:100%; height:auto;} /* mobilemenu */ #mobilemenu .m_area {top:120px;} #mobilemenu .m_login ~ .m_nav {height:calc(100vh - 190px);} #mobilemenu .m_nav {height:calc(100vh - 120px);} /* searchpop */ #searchpop .s_wrap {padding-top:120px;} /* aside */ #aside {right:40px; bottom:40px;} /* main */ #contents {padding-bottom:60px;} #contents.main .cm_hero .cmh_wrap {aspect-ratio:1712 / 569;} #contents.main .cm_hero .cmh_border.t1 {left:0;} #contents.main .cm_hero .cmh_border.t1 i:nth-child(1), #contents.main .cm_hero .cmh_border.t1 i:nth-child(2) {display:none;} #contents.main .cm_hero .cmh_swiper .cmh_pic.t1 {left:0;} #contents.main .cm_hero .cmh_bottomwrap {gap:5px; height:130px; flex-wrap:wrap; align-content:center;} #contents.main .cm_hero .cmh_catalog {position:relative; height:35px; padding:0 25px 0 18px;} #contents.main .cm_hero .cmh_catalog span {font-size:13px;} #contents.main .cm_hero .cmh_catalog i {width:12px; height:auto;} #contents.main .cm_hero .cmh_pagination {position:relative; left:0; width:100%;} #contents.main .cm_hero .cmh_pagination ul {width:100%;} #contents.main .cm_hero .cmh_pagination ul li {width:100%; font-size:12px; line-height:30px;} #contents.main .cm_product .cmp_depth {overflow:hidden; overflow-x:auto; margin-bottom:30px;} #contents.main .cm_product .cmp_depth li {width:auto;} #contents.main .cm_product .cmp_depth li + li {margin-left:10px;} #contents.main .cm_product .cmp_depth li .scnDthIco {width:110px; height:100px; aspect-ratio:auto;} #contents.main .cm_product .cmp_depth li {width:9.5%;} #contents.main .cm_product .cmp_list {position:relative; height:auto;} #contents.main .cm_product .cmp_list > li {width:calc(50% - 5px); height:230px;} #contents.main .cm_product .cmp_list > li:nth-child(2) {width:100%; margin-left:0; margin-top:10px;} #contents.main .cm_product .cmp_list > li:nth-child(3) {margin-left:0;} #contents.main .cm_product .cmp_list > li:nth-child(3) {position:absolute; right:0; top:0; width:calc(50% - 5px); margin-top:0;} #contents.main .cm_product .cmp_list > li:nth-child(4) {position:absolute; right:0; top:240px; width:calc(50% - 5px); margin-top:0; margin-left:0;} #contents.main .cm_product .cmp_list > li.big {height:470px;} #contents.main .cm_product .cmp_list > li.big .cmpl_pic {height:calc(100% - 80px);} #contents.main .cm_product .cmp_list > li .cmpl_controller {height:40px; margin-top:-20px;} #contents.main .cm_product .cmp_list > li .cmpl_pic {height:calc(100% - 80px);} #contents.main .cm_product .cmp_list > li .cmpl_info .cmpli_detail > p {font-size:14px; line-height:20px;} #contents.main .cm_product .cmp_list > li.big .cmpl_info .cmpli_detail > p, #contents.main .cm_product .cmp_list > li.wide .cmpl_info .cmpli_detail > p {max-height:50px; font-size:16px; line-height:25px;} #contents.main .cm_product .cmp_list > li .cmpl_info .cmpli_detail > span {font-size:12px; line-height:20px;} #contents.main .cm_product .cmp_list > li.big .cmpl_info .cmpli_detail > span, #contents.main .cm_product .cmp_list > li.wide .cmpl_info .cmpli_detail > span {font-size:12px; line-height:25px;} #contents.main .cm_product .cmp_list > li .cmpl_info .cmpli_detail > strong {font-size:14px; line-height:20px;} #contents.main .cm_product .cmp_list > li.big .cmpl_info .cmpli_detail > strong, #contents.main .cm_product .cmp_list > li.wide .cmpl_info .cmpli_detail > strong {font-size:16px; line-height:25px;} #contents.main .cm_now {margin-top:70px; margin-bottom:0;} #contents.main .cm_now .cmn_title p {margin-bottom:25px;} #contents.main .cm_now .cmn_deco {width:calc(100% + clamp(80px, 10.7188vw, 120px)); margin-left:clamp(-60px, -5.8594vw, -40px); transform:translateY(-90px);} #contents.main .cm_now .cmn_deco > span {left:clamp(40px, 5.8594vw, 60px); font-size:160px; line-height:180px; letter-spacing:-12px;} #contents.main .cm_now .cmn_list {width:calc(100% + 30px); margin-left:-15px; margin-top:-275px;} #contents.main .cm_now .cmn_list.pc {display:none;} #contents.main .cm_now .cmn_list.moblie {position:relative; left:auto; right:auto; top:auto; bottom:auto; opacity:1; pointer-events:auto;} #contents.main .cm_now .cmn_list > li {width:50%; padding:0 15px;} #contents.main .cm_now .cmn_list > li:nth-child(1) {position:relative; padding-top:0;} #contents.main .cm_now .cmn_list > li:nth-child(1):before {content:""; position:absolute; right:0; top:0; bottom:0; width:1px; background-color:var(--blue); opacity:0.1;} #contents.main .cm_now .cmn_list > li:nth-child(2) {padding-top:170px;} #contents.main .cm_function ul {gap:10px;} #contents.main .cm_function ul li:first-child {width:100%;} #contents.main .cm_function ul li {width:calc(33.333% - 6.666px);} #contents.main .cm_function {margin-top:60px;} /* sub 공통 */ #contents .tabSrt {position:relative; top:auto; right:auto; box-sizing:border-box; width:100%; padding:10px; transform:none;} #contents .tabFnc {width:100%;} #contents .tabItm {flex-wrap:wrap;} #contents .tabItm > a {width:100%; margin-left:0; font-size:16px; line-height:50px;} #contents .tabItm > a:before {content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background-color:var(--gray_t3);} #contents .tabItm > a.on {background-color:var(--blue); color:var(--white)} /* 스토리허브 갤러리 리스트 */ #contents .storyTabWrap {margin-bottom:0;} #contents .storyWrap > .c_contents {padding-top:0;} #contents .storyTabWrap.t1 .innSch {padding:20px;} #contents .storyTabWrap .tabFncWrp {border-bottom:0;} #contents .storyTabWrap .tabFnc {display:block; padding:0;} #contents .storyTabWrap .tabItm {padding:0;} #contents .storyTabWrap .tabItm > a {margin:0;} #contents .storyTabWrap .tabItm > a.on::after{display:none;} #contents .storyWrap .tabItm > a:hover::after{display:none;} #contents .storyTabWrap .innSch {position:relative; box-sizing:border-box; height:auto; padding:30px 20px; text-align:left; width:100%;} #contents .storyTabWrap .innSch > div {display:block; position:relative; width:100%; left:0; top:0;} #contents .storyTabWrap .innSch .iptCmn00 {margin:0 !important; box-sizing:border-box; width:100%; height:40px; border-radius:40px;} #contents .storyTabWrap .innSch .iptCmn00 input {width:100%; height:40px; line-height:40px; padding:0 55px 0 20px;} #contents .storyTabWrap .innSch .iptCmn00 a {right:45px; width:15px; height:15px;} #contents .storyTabWrap .innSch .iptCmn00 a img {display:block; width:100%;} #contents .storyTabWrap .innSch .btn {position:absolute; right:0; top:50%; transform:translateY(-50%); min-width:0; width:40px; height:40px; margin:0; box-shadow:none; text-indent:-9999px; overflow:hidden; background-color:transparent !important; background-size:16px auto; border:0;} #contents .storyTabWrap .innSch .btn:before {content:""; position:absolute; left:50%; top:50%; width:20px; height:20px; margin-left:-10px; margin-top:-10px; background-image:url("../images/newbird/icon_bigsearch.svg"); background-size:100% auto; background-repeat:no-repeat;} #contents .searchBottom {flex-wrap:wrap; gap:20px; margin-bottom:20px;} #contents .searchBottom .text {width:100%; text-align:left;} #contents .searchBottom > .s_wrap {display:flex; justify-content:space-between; align-items:center; width:100%;} /* 이벤트 */ #contents .c_event .storyTabWrap .innSch {position:relative; padding:20px;} #contents .c_event .searchBottom > div:first-child {display:block; text-align:right;} #contents .c_event .searchBottom > div:first-child .fkeSlc {margin:0; height:40px; line-height:40px; width:100% !important;} #contents .c_event .searchBottom > div:first-child .fkeSlc select {height:40px; font-size:14px;} #contents .c_event .searchBottom > div:first-child .tglBtn {margin-top:20px;} #contents .gallUl {margin-top:20px; gap:20px;} #contents .gallUl > li {width:calc(50% - 10px) !important;} /* 겔러리 리스트 */ #contents .thbLst {gap:20px;} #contents .thbLstItm {width:calc(50% - 10px);} #contents .thbLstItm p {margin-bottom:16px;} #contents .thbLstItm strong {margin-bottom:10px;} /* footer */ #footer .f_area.t2 {gap:30px;} #footer .f_box {width:100%;} #footer .f_address li {padding-left:170px;} } @media all and (max-width:768px) { /* header */ #header {height:90px;} .searchrank ul li {width:100%; margin-right:0;} /* mobilemenu */ #mobilemenu .m_area {top:90px;} #mobilemenu .m_login ~ .m_nav {height:calc(100vh - 160px);} #mobilemenu .m_nav {height:calc(100vh - 90px);} /* searchpop */ #searchpop .s_wrap {padding-top:90px;} #searchpop .s_contents .sc_title {gap:20px;} #searchpop .s_contents .sc_title > strong {font-size:50px; line-height:60px; letter-spacing:-1.6px;} #searchpop .s_contents .sc_title > p {font-size:15px; line-height:28px;} #searchpop .s_contents .sc_searchform {margin-top:30px;} #searchpop .s_contents .sc_searchform .csf_box {padding:5px; padding-right:40px;} #searchpop .s_contents .sc_searchform input {font-size:16px;} #searchpop .s_contents .sc_searchform .scf_btn {width:40px; height:40px; margin-top:-20px;} #searchpop .s_contents .sc_searchform .scf_btn i {width:26px; height:26px;} /* aside */ #aside {right:30px; bottom:30px;} #aside ul {gap:20px; width:70px;} #aside ul li .a_btn > span {font-size:15px;} #aside ul li .a_btn.naver i {width:32px;} #aside ul li .a_btn.video i {bottom:-13px; width:26px; height:26px; margin-left:-13px;} #aside ul li .a_topbtn {width:40px; height:40px;} #aside ul li .a_btn.naver .ab_pic:before {left:7px; right:7px; top:7px; bottom:7px;} #aside ul li .a_topbtn i {height:25px;} #aside ul li .a_topbtn:hover i::before, #aside ul li .a_topbtn:hover i::after {width:12px;} /* main */ #contents {padding-bottom:40px;} #contents.main .cm_hero {margin-top:-90px; padding-bottom:30px;} #contents.main .cm_hero .pc {display:none;} #contents.main .cm_hero .mobile {display:inline-block;} #contents.main .cm_hero .cmh_bottomwrap {height:120px;} #contents.main .cm_hero .cmh_bi {right:30px; transform:scale(0.6);} #contents.main .cm_hero .cmh_silde {width:100%;} #contents.main .cm_hero .cmh_silde .cmhs_pic {display:inline-block; width:100%; height:85.33vw; max-height:500px; margin-bottom:50px; background-size:cover; background-repeat:no-repeat; background-position:center; font-size:0; line-height:0;} #contents.main .cm_hero .cmh_silde .cmhs_pic img {display:none; width:100%; height:auto;} #contents.main .cm_hero .cmh_silde .cmhs_contents {display:flex; justify-content:center; align-items:center; flex-wrap:wrap; width:100%;} #contents.main .cm_hero .cmh_silde .cmhs_contents .cmhsc_bi {display:inline-block; width:100%; height:35px; margin-bottom:20px; font-size:0; line-height:0;} #contents.main .cm_hero .cmh_silde .cmhs_contents .cmhsc_bi img {width:auto; height:100%;} #contents.main .cm_hero .cmh_silde .cmhs_contents > strong {display:inline-block; border-radius:10px; padding:0 15px; background-color:var(--blue); font-size:16px; font-weight:600; color:var(--white); line-height:20px; ;} #contents.main .cm_hero .cmh_silde .cmhs_contents > p {display:inline-block; vertical-align:middle; width:100%; margin-top:10px; margin-bottom:30px; font-size:24px; font-weight:200; color:var(--black); line-height:35px;} #contents.main .cm_hero .cmh_silde .cmhs_contents > p span {display:inline-block; width:100%;} #contents.main .cm_hero .cmh_silde .cmhs_contents > p strong {font-weight:700; font-size:30px; color:var(--blue);} #contents.main .cm_hero .cmh_silde .cmhs_pagination {margin-top:40px;} #contents.main .cm_hero .cmh_silde .cmhs_pagination .swiper-pagination-bullet {position:relative; width:8px; height:8px; margin:0; border:var(--blue) solid 1px; border-radius:50%; background-color:transparent; opacity:1 !important; transition:0.3s; pointer-events:auto;} #contents.main .cm_hero .cmh_silde .cmhs_pagination .swiper-pagination-bullet::before {content:""; position:absolute; left:-5px; right:-5px; top:-5px; bottom:-5px;} #contents.main .cm_hero .cmh_silde .cmhs_pagination .swiper-pagination-bullet + .swiper-pagination-bullet {margin-left:10px;} #contents.main .cm_hero .cmh_silde .cmhs_pagination .swiper-pagination-bullet.swiper-pagination-bullet-active, #contents.main .cm_hero .cmh_silde .cmhs_pagination .swiper-pagination-bullet:hover {background-color:var(--blue);} #contents.main .cm_product {padding-top:30px;} #contents.main .cm_product .cmp_list > li {width:100%;} #contents.main .cm_product .cmp_list > li:nth-child(3) {position:relative; right:auto; top:auto; margin-top:10px;} #contents.main .cm_product .cmp_list > li:nth-child(4) {position:relative; right:auto; top:auto; margin-top:10px; margin-left:10px;} #contents.main .cm_function {margin-top:40px;} #contents.main .cm_function ul li, #contents.main .cm_function ul li:nth-child(n + 5) {width:calc(50% - 5px);} #contents.main .cm_function ul li > a {padding:20px 0;} #contents.main .cm_function ul li > a > i {width:60px; height:60px; margin-bottom:15px;} #contents.main .cm_function ul li > a > strong {font-size:18px; line-height:24px;} #contents.main .cm_now .cmn_deco {width:calc(100% + 60px); margin-left:-30px; transform:translateY(-70px);} #contents.main .cm_now .cmn_deco > span {left:30px; font-size:120px; line-height:140px; letter-spacing:-10px;} /* 겔러리 리스트 */ #contents .thbLstItm div {bottom:15px; right:15px; width:60px; height:60px; font-size:13px; line-height:18px;} /* event */ #contents .c_event .c_boxwrap {padding-bottom:30px;} /* footer */ #footer {padding-top:40px; padding-bottom:0;} #footer .f_wrap {gap:20px; margin-bottom:0;} #footer .f_area.t1 {gap:20px;} #footer .f_area.t2 {display:inline-block;} #footer .f_nav {width:180px;} #footer .f_nav, #footer .f_info {gap:25px;} #footer .f_box.t4 > div + div {position:initial;} #footer .f_copyright {padding:5px 0; font-size:10px; text-align:left; line-height:20px;} #footer .f_nav ul li a {font-size:14px; line-height:30px;} #footer .f_info ul li {font-size:14px; line-height:30px;} #footer .f_address li {padding-left:180px;} #footer .f_address li strong {font-size:14px; line-height:30px;} #footer .f_address li span {padding:3px 0; font-size:14px; line-height:24px;} #footer .f_box:nth-child(1) {justify-content:flex-start;} #footer .f_box:nth-child(2) {gap:10px;} #footer .f_link .fl_btn {width:150px; height:40px; padding-left:15px; font-size:13px; line-height:40px;} #footer .f_link .fl_familysite > ul {top:40px;} #footer .f_link .fl_familysite > ul li a {font-size:13px; line-height:35px;} #footer .f_box.t4 {display:inline-block; width:100%; margin-top:20px;} #footer .f_box.t4 > div:last-child {box-sizing:border-box; width:calc(100% + 60px); margin-left:-30px; margin-top:20px; padding:20px 30px; background-color:var(--white_t2);} #footer .f_cs {gap:10px;} #footer .f_cs > li {width:100%;} #footer .f_cs > li > a {box-sizing:border-box; padding-left:50px; padding-right:20px; border-radius:5px; background-color:var(--white_t1); font-size:16px; line-height:50px; text-align:left; box-shadow:-20px -20px 20px 0 rgba(255, 255, 255, 1), 20px 20px 20px 0 rgba(0, 0, 0, 0.06);} #footer .f_cs > li:nth-child(2) > a {box-shadow:20px 20px 20px 0 rgba(0, 0, 0, 0.06);} #footer .f_cs > li:nth-child(3) > a {box-shadow:20px 20px 20px 0 rgba(0, 0, 0, 0.06);} #footer .f_cs > li > a > span {float:right; font-weight:600;} #footer .f_cs > li > a > i {left:20px;} #footer .f_cs > li > span {display:none;} } @media all and (max-width:600px) { /* header */ #header {height:70px;} #header .h_wrap {justify-content:flex-end;} #header .h_logo {position:fixed; top:19px; left:20px;} #header .h_function > ul > li:nth-child(1), #header .h_function > ul > li:nth-child(3), #header .h_function > ul > li:nth-child(4) {display:none;} #header .h_function > ul > li#hdrWrpSch {position:relative; left:auto;} #header .h_function > ul > li .hf_btn:not(.hf_menu) i.icon {background-image:url(../images/newbird/common/icon_service_b.svg);} #header .h_function > ul > li:hover .hf_btn:not(.hf_menu) i.icon {background-image:url(../images/newbird/common/icon_service_w.svg);} #header.main .h_function > ul > li .hf_btn:not(.hf_menu) i.icon {background-image:url(../images/newbird/common/icon_service_w.svg);} #header.main::before {content:""; display:block; position:absolute; top:0; left:0; width:100%; height:41.7vw; background:url("../images/newbird/asset/mobile/header_bg.png") no-repeat; background-size:100% auto;} #header .h_function > ul > li .hf_btn {background:none; box-shadow:none;} #header .h_function > ul > li:hover .hf_btn, #header .h_function > ul > li .hf_btn.on {background-color:var(--skyblue_t1);} #header .h_function > ul > li:hover .hf_menu.off {background-color:var(--white);} #header .h_function > ul > li .hf_btn.hf_menu i.icon {color:var(--black);} #header.main .h_function > ul > li .hf_menu i.icon {color:var(--white);} #header .h_function > ul > li .hf_btn.hf_menu.off i.icon {color:var(--blue);} #header.main.on::before {display:none;} #header .h_function > ul > #hdrWrpSch.off i.icon {background-image:url(../images/newbird/common/icon_service_b.svg);} #header .h_function > ul > #hdrWrpSch.off:hover .hf_btn {background:var(--white)} /* mobilemenu */ #mobilemenu .m_area {top:70px;} #mobilemenu ~ .mobilemenubg {opacity:0 !important; pointer-events:none !important;} #mobilemenu .m_wrap {right:-100%; width:100%;} #mobilemenu .m_login {gap:10px;} #mobilemenu .m_login, #mobilemenu .m_nav > li > .mn_btn {padding:0 20px;} #mobilemenu .m_nav > li > ul > li > a {padding:0 10px;} #mobilemenu .m_nav > li.t1 {display:inline-block;} #mobilemenu .m_nav > li.t2 {display:none;} /* mobileNav */ #mobileNav {display:inline-block; position:fixed; left:0; right:0; bottom:0; z-index:195; background-color:var(--white);} #mobileNav:before {content:""; position:absolute; left:0; right:0; top:0; height:1px; background-color:var(--gray_t3);} #mobileNav ul {display:flex;} #mobileNav ul li {display:flex; width:100%;} #mobileNav ul li a {display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; width:100%; height:60px; box-sizing:border-box; padding-top:5px;} #mobileNav ul li a i {display:inline-block; width:20px; height:20px; background:url(../images/newbird/common/icon_dock.svg) no-repeat; background-size:100% auto;} #mobileNav ul li a i.catalog {background-position-y:25%} #mobileNav ul li a i.customer {background-position-y:50%} #mobileNav ul li a i.home {background-position-y:75%} #mobileNav ul li a i.mypage {background-position-y:100%} #mobileNav ul li a:hover i {background-image:url(../images/newbird/common/icon_dock_b.svg)} #mobileNav ul li a span {display:inline-block; vertical-align:middle; width:100%; font-size:11px; color:var(--gray_t1); line-height:24px;} #mobileNav ul li a:hover span {color:var(--blue);} /* aside */ #aside {right:20px; bottom:80px;} #aside ul {gap:18px; width:60px;} #aside ul li .a_btn > span {font-size:14px;} #aside ul li .a_btn.naver i {width:28px;} #aside ul li .a_btn.video i {bottom:-11px; width:22px; height:22px; margin-left:-11px;} #aside ul li .a_topbtn {width:30px; height:30px;} #aside ul li .a_btn.naver .ab_pic:before {left:5px; right:5px; top:5px; bottom:5px;} #aside ul li .a_topbtn i {height:20px;} #aside ul li .a_topbtn:hover i::before, #aside ul li .a_topbtn:hover i::after {width:10px;} /* main */ #contents.main .cm_product {padding-top:20px;} #contents.main .cm_product .cmp_list > li.wide .cmpl_pic {left:0;} #contents.main .cm_now .cmn_deco {width:calc(100% + 40px); margin-left:-20px;} /* sub */ /* 스토리허브 갤러리 리스트 */ #contents .gallUl > li {width:100% !important;} /* 겔러리 리스트 */ #contents .thbLstItm {width:100%;} /* event */ #contents .c_event .tglBtn {height:20px; width:60px;} #contents .c_event .tglBtn > strong {width:14px; height:14px} #contents .c_event .tglBtn > strong::after {font-size:12px; width:40px; line-height:16px;} /* footer */ #footer {padding-bottom:60px;} #footer .f_area {flex-wrap:wrap;} #footer .f_nav {width:100%;} #footer .f_nav, #footer .f_info {gap:20px;} #footer .f_box:nth-child(1) {flex-wrap:wrap; gap:20px;} #footer .f_box.t4 > div:last-child {width:calc(100% + 40px); margin-left:-20px; padding:20px;} #footer .f_address li {padding-left:0;} #footer .f_address li strong {display:inline-block; position:relative; width:100%;} #footer .f_box.t2 {flex-wrap:wrap; gap:20px;} #footer .f_box.t4 > div:first-child {gap:10px;} #footer .f_link .fl_btn, #footer .f_link .fl_familysite {width:100%;} #footer .f_link {width:100%;} #footer .f_infobtn {display:flex; align-items:center; justify-content:space-between; width:100%; font-size:18px; font-weight:700; color:var(--black); line-height:30px; text-align:left;} #footer .f_infobtn i {display:inline-block; position:relative; right:5px; width:6px; height:10px; color:var(--black); transform:rotate(90deg); transition:0.3s;} #footer .f_infobtn.open i {transform:rotate(270deg);} #footer .f_infobtn i:before {content:""; position:absolute; left:2px; top:1px; width:6px; height:2px; border-radius:2px; background-color:currentColor; transform-origin:left top; transform:rotate(45deg);} #footer .f_infobtn i:after {content:""; position:absolute; left:2px; bottom:1px; width:6px; height:2px; border-radius:2px; background-color:currentColor; transform-origin:left bottom; transform:rotate(-45deg);} #footer .f_info {display:none;} #footer .f_infobtn.open + .f_info {display:flex;} } @media all and (max-width:425px) { /* main */ #contents.main .cm_hero .cmh_silde .cmhs_contents > p {margin-bottom:25px; font-size:22px; line-height:32px;} #contents.main .cm_hero .cmh_silde .cmhs_contents > p strong {font-size:27px;} #contents.main .cm_hero .cmh_silde .cmhs_pagination {margin-top:30px;} #contents.main .cm_product .cmp_list > li {height:auto !important; aspect-ratio:1/1;} #contents.main .cm_product .cmp_list > li.big .cmpl_info .cmpli_detail > p, #contents.main .cm_product .cmp_list > li.wide .cmpl_info .cmpli_detail > p {max-height:20px; font-size:14px; line-height:20px; -webkit-line-clamp:1;} #contents.main .cm_product .cmp_list > li.big .cmpl_info .cmpli_detail > span, #contents.main .cm_product .cmp_list > li.wide .cmpl_info .cmpli_detail > span {line-height:20px;} #contents.main .cm_product .cmp_list > li.big .cmpl_info .cmpli_detail > strong, #contents.main .cm_product .cmp_list > li.wide .cmpl_info .cmpli_detail > strong {font-size:14px; line-height:20px;} #contents.main .cm_product .cmp_list > li:nth-child(3) {width:100%;} #contents.main .cm_product .cmp_list > li:nth-child(4) {width:100%; margin-left:0;} #contents.main .cm_product .cmp_list > li.wide .cmpl_pic {position:relative; left:auto; height:calc(100% - 80px); padding:15px;} #contents.main .cm_product .cmp_list > li.big .cmpl_pic {height:calc(100% - 80px);} #contents.main .cm_product .cmp_list > li.wide .cmpl_info {left:0;} #contents.main .cm_product .cmp_list > li.wide .cmpl_info .cmpli_detail {left:20px; right:20px; bottom:20px;} #contents.main .cm_now .cmn_list > li {width:100%;} #contents.main .cm_now .cmn_list > li:nth-child(2) {padding-top:40px;} #contents.main .cm_now .cmn_list > li:nth-child(1)::before {display:none;} #contents.main .cm_now .cmn_list > li > .cmnl_box + .cmnl_box {margin-top:40px;} #contents.main .cm_function ul li {width:100% !important;} #contents.main .cm_function ul li > a {padding:15px 20px; padding-left:80px; text-align:left;} #contents.main .cm_function ul li > a > i {position:absolute; left:20px; top:50%; margin:0; margin-top:-20px; width:40px; height:40px;} #contents.main .cm_function ul li > a > strong {width:auto; margin:0;} #contents.main .cm_function ul li > a > p {line-height:20px; margin-top:5px;} /* footer */ #footer .f_info ul li {font-size:13px;} #footer .f_box:nth-child(2) {flex-wrap:wrap;} #footer .f_box:nth-child(3) {margin-top:30px;} }