body.on {overflow:hidden;}
html.on {overflow:hidden;}
/* header */
#header {position:fixed; left:0; top:0; width:100%; height:80px; z-index:3; border-bottom:1px solid var(--black-20); background:var(--white); transition:0.3s}
#header.header {height:100px}
#header.header .h_logo {top:32px}
#header .wrap {display:flex; align-items:center; justify-content:center; position:relative; width:100%; height:100%;}
#header .h_logo {display:block; position:absolute; left:40px; top:22px; width:150px; aspect-ratio:100/24; background:url("../img/logo.svg") center center no-repeat; background-size:100%; transition:0.3s}
#header .h_logo.on {background-image:url("../img/logo.svg")!important;}
#header .h_menu {display:flex; align-items:center;}
#header .h_menu .hm_mobile {display:none}
#header .h_menu > ul {display:flex; align-items:center; height:100%}
#header .h_menu ul ul {display:none; position:absolute; top:0; z-index:1; width:100%; padding-top:80px; padding-bottom:20px; border-radius:10px; background:var(--white); box-shadow:0 10px 20px 0 rgba(0, 0, 0, 0.03)}
#header .h_menu > ul > li {display:flex; align-items:center; justify-content:center; position:relative; width:200px; height:60px; text-align:center}
#header .h_menu > ul > li:before {content:""; display:block; position:absolute; top:0; left:0; width:100%; height:101%;}
#header .h_menu > ul > li a {display:block; position:relative; z-index:2; font-family:"Open Sans"; font-size:22px; font-weight:500; line-height:40px;}
#header .h_menu > ul > li:hover > a::before {content:""; display:block; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--brown)}
#header .h_menu > ul > li:hover > a {color:var(--brown); font-weight:600; transition:none}
#header .h_menu > ul > li:hover ul {display:block}
#header .h_menu > ul > li.on > a {color:var(--brown); font-weight:700;}
#header .h_menu > ul > li.on > a::before {content:""; display:block; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--brown)}
#header .h_menu ul ul:before {content:""; display:block; position:absolute; top:70px; left:20px; width:calc(100% - 40px); height:1px; background:rgba(35, 31, 32, 0.10)}
#header .h_menu ul ul a {color:var(--black); font-size:16px; line-height:50px;}
#header .h_menu ul ul a:hover {color:var(--brown)}
#header .h_menu .hm_btn {display:none}
#header .h_menu .hm_mobile li {flex-direction:column; align-items:flex-start; height:auto!important;}
#header .h_menu .hm_mobile li:before {display:none}
#header .h_menu .hm_mobile ul {width:auto; position:relative; padding:0; padding-left:10px; padding-bottom:20px; background:none; box-shadow:none}
#header .h_menu .hm_mobile ul:before {display:none}
#header .h_menu .hm_mobile ul a {text-align:left; font-size:20px; color:var(--black-60)}
#header .h_menu .hm_mobile button, #header .h_menu .hm_mobile > li > a {position:relative; width:100%; color:var(--black)!important; text-align:left; font-size:30px; font-family:"Open Sans"; font-weight:500; line-height:100px}
#header .h_menu .hm_mobile button::before {content:""; display:block; position:absolute; top:50%; right:0; width:35px; aspect-ratio:1/1; margin-top:-12px; background:url("../img/icon_arrow_down_g.svg") center center no-repeat; background-size:100%; transition:0.3s}
#header .h_menu .hm_mobile button:hover {font-weight:700}
#header .h_menu .hm_mobile button.on::before {transform:rotate(-180deg)}
#header .h_menu .hm_mobile button:after {content:""; display:block; width:0; height:1px; background:var(--black-5); transition:0.7s}
#header .h_menu .hm_mobile button.on:after {width:100%}
#header .h_menu .hm_mobile > li > a:hover {transition:none}
#header .h_menu.open > ul > li:hover ul {display:none}
#header.on {height:100px; border-bottom-color:#fff0; background:#fff0}
#header.on .h_logo {top:32px; background-image:url("../img/logo_w.svg")!important;}
#header.on .h_menu > ul > li {height:60px}
#header.on .h_menu > ul > li > a {color:var(--white)}
#header.on .h_menu > ul > li:hover > a {color:var(--brown)}
#header.on .h_menu ul:before {top:70px}
#header.on .h_menu ul ul {}
#header.on .h_search .hs_btn i {background-image:url("../img/icon_search_w.svg")}
#header.on .h_search div {border-color:#fff0}
#header.on .h_search .hs_btn:before, #header.on .h_menu .hm_btn:hover:before {background:var(--black)}
#header .h_search {position:absolute; right:30px;}
#header .h_search .hs_btn {display:flex; align-items:center; justify-content:center; position:relative; width:48px; aspect-ratio:1/1;}
#header .h_search .hs_btn i {position:relative; width:24px; aspect-ratio:1/1; background:url("../img/icon_search.svg") center center no-repeat; background-size:100%; transition:0.3s}
#header .h_search .hs_btn:before, #header .h_menu .hm_btn:before {content:""; display:block; position:absolute; z-index:-1; width:40px; aspect-ratio:1/1; border-radius:100%; background:rgba(179, 167, 121, 0.7); transform:scale(0); opacity:0; transition:0.3s}
#header .h_search .hs_btn:hover:before, #header .h_menu .hm_btn:hover:before {transform:scale(1); opacity:1}
#header .h_search > div {display:none; box-sizing:border-box}
#header .h_search form {display:flex; align-items:center; gap:10px; width:100%; box-sizing:border-box; padding:5px 5px 5px 15px; border:1px solid var(--black-20); border-radius:30px; background:var(--white);}
#header .h_search form > button[type="submit"] {display:flex; align-items:center; justify-content:center; flex-shrink:0; width:30px; aspect-ratio:1/1;}
#header .h_search form > button[type="submit"] i {width:24px; aspect-ratio:1/1; background:url("../img/icon_search.svg") center center no-repeat; background-size:100%;}
#header.on .h_search form {border:none;}
#header .h_search input {width:170px; height:40px; padding-left:5px; font-size:16px;}
#header .h_search .hs_close {display:flex; align-items:center; justify-content:center; flex-shrink:0; width:40px; aspect-ratio:1/1; border-radius:100%; background:var(--black);}
#header .h_search .hs_close i {width:20px; aspect-ratio:1/1; background:url("../img/icon_close_w.svg") center center no-repeat; background-size:100%; transition:0.3s}
#header .h_search .hs_close:hover i {transform:rotate(90deg)}
#header .h_search.on .hs_btn {display:none}
#header .h_search.on div {display:block}
/* aside */
#aside.on .a_top {opacity:1; pointer-events:auto}
#aside {display:flex; flex-direction:column; gap:10px; align-items:center; position:fixed; right:40px; bottom:40px; z-index:1; transition:0.3s;}
#aside .a_catalog {display:flex; flex-direction:column; align-items:center; justify-content:center; box-sizing:border-box; width:90px; aspect-ratio:1/1; padding-bottom:5px; border-radius:100%; background:var(--black-60); transition:0.2s; }
#aside .a_catalog:hover {transform:scale(1.11)}
#aside .a_catalog i {width:28px; aspect-ratio:1/1; margin-bottom:5px; background:url("../img/icon_book_w.svg") center center no-repeat; background-size:100%;}
#aside .a_catalog span {color:var(--white); font-size:14px; line-height:16px; font-weight:600;}
#aside .a_top {opacity:0; display:flex; align-items:center; justify-content:center; width:80px; aspect-ratio:1/1; background:var(--white); border-radius:100%; box-shadow:0 10px 20px 0 rgba(35, 31, 32, 0.12); pointer-events:none; transition:0.2s}
#aside .a_top i {width:24px; aspect-ratio:1/1; background:url("../img/icon_arrow_up.svg") center center no-repeat; background-size:100%; transition:0.2s}
#aside .a_top:hover {background:var(--black)}
#aside .a_top:hover i {background-image:url("../img/icon_arrow_up_w.svg"); transform:translateY(-2px);}
#toTop {display:none!important;}
/* main */
#contents .cm_hero {height:100vh; min-height:768px; max-height:1080px; padding:0}
#contents .cm_hero .cmh_slide {position:relative}
#contents .cm_hero .cmh_slide, #contents .cm_hero .cmh_slide .slick-slider, #contents .cm_hero .cmh_slide .slick-list, #contents .cm_hero .cmh_slide .slick-track {height:100%}
#contents .cm_hero .cmh_slide .slick-active .cmhs_bg img {transform:scale(1)}
#contents .cm_hero .cmh_slide .cmhs_bg {display:flex; align-items:center; justify-content:center; position:absolute; top:0; left:0; width:100%; height:100%;}
#contents .cm_hero .cmh_slide .cmhs_bg::before {content:""; display:block; position:absolute; top:0; left:0; z-index:1; width:100%; height:310px; background:linear-gradient(var(--black), rgba(35, 31, 32, 0)); opacity:0.4}
#contents .cm_hero .cmh_slide .cmhs_bg::after {content:""; display:block; position:absolute; bottom:0; left:0; width:100%; height:345px; background:linear-gradient(rgba(35, 31, 32, 0), var(--black)); opacity:0.65}
#contents .cm_hero .cmh_slide .cmhs_bg img {width:100%; height:100%; object-fit:cover; transform:scale(1.2); transition:10s}
#contents .cm_hero .cmh_slide .cmhs_text {display:flex; flex-direction:column; align-items:flex-start; gap:10px; position:absolute; bottom:100px; left:40px; color:var(--white)}
#contents .cm_hero .cmh_slide .cmhs_text strong {font-size:60px; font-weight:700; line-height:80px; font-family:"Open Sans"; text-shadow:0 5px 10px rgba(0, 5, 18, 0.15);}
#contents .cm_hero .cmh_slide .cmhs_text p {font-size:26px; font-weight:400; letter-spacing:-0.25px; text-shadow:0 3px 6px rgba(0, 5, 18, 0.15);}
#contents .cm_hero .cmh_slide .slick-slide:first-child .cmhs_bg img {animation:zoomimg 10s}
@keyframes zoomimg {0% {transform:scale(1.2)} 100% {transform:scale(1)}}
#contents .cm_hero .cmh_slide .slide-control {position:absolute; top:0; left:0; width:100%; height:100%;}
#contents .cm_hero .cmh_slide .slide-control .wrap > div {display:flex; align-items:center; gap:10px; position:absolute; bottom:100px; right:40px;}
#contents .cm_hero .cmh_slide .slide-control .wrap > div > div {display:flex; align-items:center; gap:10px}
#contents .cm_hero .cmh_slide .slide-control .fraction {display:flex; align-items:center; gap:10px; margin-right:10px;}
#contents .cm_hero .cmh_slide .slide-control .fraction span {opacity:0.6; font-weight:500; color:var(--white); font-size:16px; line-height:30px; letter-spacing:-0.16px}
#contents .cm_hero .cmh_slide .slide-control .fraction .current {opacity:1; font-weight:700}
#contents .cm_hero .cmh_slide .slide-control .progress {position:relative; z-index:1; width:150px; height:4px; border-radius:10px; overflow:hidden;}
#contents .cm_hero .cmh_slide .slide-control .progress:before {content:""; position:absolute; left:0; right:0; top:0; bottom:0; width:100%; background:var(--white); opacity:0.3;}
#contents .cm_hero .cmh_slide .slide-control .progress .bar {display:inline-block; position:absolute; left:0; top:0; bottom:0; width:0; background:var(--white); border-radius:10px;}
#contents .cm_hero .cmh_slide .slide-control button {display:flex; align-items:center; justify-content:center; width:50px; aspect-ratio:1/1; border-radius:100%; border:1px solid rgba(255, 255, 255, 0.30); transition:0.3s}
#contents .cm_hero .cmh_slide .slide-control button i {width:24px; aspect-ratio:1/1; background-size:100%; background-position:center center; background-repeat:no-repeat;}
#contents .cm_hero .cmh_slide .slide-control button:hover {border-color:var(--brown); background-color:var(--brown); box-shadow: 0 5px 10px 0 rgba(101, 90, 51, 0.10);}
#contents .cm_hero .cmh_slide .slide-control .play {margin-right:-3px; background-image:url("../img/icon_play_w.svg")}
#contents .cm_hero .cmh_slide .slide-control .pause {background-image:url("../img/icon_pause_w.svg")}
#contents .cm_hero .cmh_slide .slide-control .control i.off {display:none;}
#contents .cm_hero .cmh_slide .slide-control .prev i {margin-left:-5px; background-image:url("../img/icon_arrow_left_w.svg")}
#contents .cm_hero .cmh_slide .slide-control .next i {background-image:url("../img/icon_arrow_right_w.svg")}
/* portfolio */
#contents .cm_portfolio {overflow:visible; padding-top:0; padding-bottom:150px}
#contents .cm_portfolio .wrap {display:flex; align-items:flex-start;}
#contents .cm_portfolio .cmp_title {position:sticky; top:0; box-sizing:border-box; width:100%; height:100vh; padding-top:150px;}
#contents .cm_portfolio .c_title {align-items:flex-start;}
#contents .cm_portfolio .cmp_title ul {display:flex; flex-direction:column; align-items:flex-start; gap:25px;}
#contents .cm_portfolio .cmp_title li {position:relative; color:var(--black-60); line-height:30px; cursor:pointer}
#contents .cm_portfolio .cmp_title li:hover {color:var(--brown)}
#contents .cm_portfolio .cmp_title li.on {color:var(--brown); font-weight:700}
#contents .cm_portfolio .cmp_title li.on::before {content:""; display:block; position:absolute; bottom:0; left:0; width:100%; height:2px; background:var(--brown)}
#contents .cm_portfolio .cmp_wrap {flex-shrink:0; width:65.6%; padding-top:150px;}
#contents .cm_portfolio .cmp_wrap > ul {display:none; flex-wrap:wrap; align-items:flex-start; column-gap:40px; animation:fadein 0.5s}
#contents .cm_portfolio .cmp_wrap > ul.on {display:flex}
@keyframes fadein {0% {opacity:0;} 100% {opacity:1;}}
#contents .cm_portfolio .cmp_wrap > ul > li {width:calc((100% - 40px) / 2); aspect-ratio:1/1; margin-top:40px;}
#contents .cm_portfolio .cmp_wrap > ul > li:nth-child(even) { transition-delay:0.3s}
#contents .cm_portfolio .cmp_wrap > ul > li:nth-child(odd) {margin-top:-40px;}
#contents .cm_portfolio .cmp_wrap > ul > li:nth-child(1) {margin-top:0;}
#contents .cm_portfolio .cmp_wrap > ul > li:nth-child(2) {margin-top:80px;}
#contents .cm_portfolio .cmp_wrap > ul > li > a {overflow:hidden; display:block; position:relative; width:100%; height:100%; box-sizing:border-box; border-radius:20px;}
#contents .cm_portfolio .cmp_wrap > ul > li > a:before {content:""; display:block; position:absolute; top:0; left:0; z-index:2; box-sizing:border-box; width:100%; height:100%; border:3px solid var(--brown); border-radius:20px; opacity:0; transition:0.3s}
#contents .cm_portfolio .cmp_wrap > ul > li > a:hover:before {opacity:1}
#contents .cm_portfolio .cmp_wrap > ul > li > a:hover .cmp_img {border-radius:21px}
#contents .cm_portfolio .cmp_wrap > ul > li > a:hover img {border-radius:21px}
#contents .cm_portfolio .cmp_wrap > ul > li > a:after {content:""; display:block; position:absolute; bottom:0; left:0; width:100%; height:50%; border-radius:25px; background:linear-gradient(rgba(35, 31, 32, 0), rgba(35, 31, 32, 0.7)); opacity:0; transition:0.3s}
#contents .cm_portfolio .cmp_wrap > ul > li > a:hover:after {opacity:1}
#contents .cm_portfolio .cmp_wrap .cmp_img {display:flex; align-items:center; justify-content:center; width:100%; height:100%; background-repeat:no-repeat; background-size:100%; background-position:center center;}
#contents .cm_portfolio .cmp_wrap .cmp_img img {width:100%; height:100%; object-fit:cover;}
#contents .cm_portfolio .cmp_wrap .cmp_img:before {content:""; display:block; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(35, 31, 32, 0.05)}
#contents .cm_portfolio .cmp_wrap .cmp_text {position:absolute; left:40px; bottom:20px; z-index:1; width:calc(100% - 40px); opacity:0; transition:0.3s; color:var(--white)}
#contents .cm_portfolio .cmp_wrap > ul > li > a:hover .cmp_text {opacity:1; bottom:40px}
#contents .cm_portfolio .cmp_wrap .cmp_text strong {display:block; margin-bottom:5px; font-size:26px; font-weight:700; letter-spacing:-0.26px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:keep-all;}
#contents .cm_portfolio .cmp_wrap .cmp_text ul {display:flex; align-items:center;}
#contents .cm_portfolio .cmp_wrap .cmp_text li {position:relative; max-width:calc(50% - 10px); overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;}
#contents .cm_portfolio .cmp_wrap .cmp_text li + li {max-width:calc(50% + 10px); padding-left:10px; margin-left:10px}
#contents .cm_portfolio .cmp_wrap .cmp_text li + li:before {content:""; display:block; position:absolute; top:50%; left:0; width:1px; height:12px; margin-top:-6px; background:var(--white)}
/* product */
#contents .cm_product .cmp_slide {display:none; margin-top:60px;}
#contents .cm_product .cmp_slide.on {display:block;}
#contents .cm_product .cmp_slide .slick-slider {display:flex; align-items:center; margin-bottom:50px}
#contents .cm_product .cmp_slide .slick-track {display:flex; align-items:center; width:100vw !important; padding:40px 0; }
#contents .cm_product .cmp_slide .slick-slide {width:490px; padding:0; flex-shrink:0; box-sizing:border-box; transform:scale(0.776); transition:0.3s;}
#contents .cm_product .cmp_slide .slick-center {transform:scale(1.225); z-index:10}
#contents .cm_product .cmp_slide .slick-center + .slick-slide a {left:13%;}
#contents .cm_product .cmp_slide .slick-slide.prevslide a {right:13%;}
#contents .cm_product .cmp_slide .slick-slide > a {overflow:hidden; display:block; position:relative; box-sizing:border-box; width:100%; padding:30px; border:4px solid #fff0; border-radius:20px; background:var(--white); transition:0.5s}
#contents .cm_product .cmp_slide .slick-slide > a::before {content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(255, 255, 255, 0.5)}
#contents .cm_product .cmp_slide .cmps_img {display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:100/66.66; margin-bottom:30px; background-repeat:no-repeat; background-size:100%; background-position:center;}
#contents .cm_product .cmp_slide .cmps_img img {display:none; width:100%; height:100%; object-fit:cover}
#contents .cm_product .cmp_slide .cmps_text {display:flex; flex-direction:column; align-items:flex-start; gap:5px}
#contents .cm_product .cmp_slide .cmps_text strong {font-family:"Open Sans"}
#contents .cm_product .cmp_slide .cmps_text span {color:var(--black-60); line-height:30px}
#contents .cm_product .cmp_slide .slick-center > a {border-color:var(--brown);}
#contents .cm_product .cmp_slide .slick-center > a:before {display:none}
#contents .cm_product .cmp_slide .slick-center > a:hover:after {transform:rotate(90deg)}
#contents .cm_product .cmp_slide .slick-center .cmps_text strong {font-size:20px; line-height:30px}
#contents .cm_product .cmp_slide .slick-center .cmps_text span {font-size:12px; line-height:18px}
#contents .cm_product .cmp_slide .slide-control .wrap > div {display:flex; align-items:center; gap:10px;}
#contents .cm_product .cmp_slide .slide-control .fraction {display:flex; align-items:center; gap:10px; margin-right:20px;}
#contents .cm_product .cmp_slide .slide-control .fraction span {font-weight:500; color:var(--black-60); font-size:16px; line-height:30px; letter-spacing:-0.16px}
#contents .cm_product .cmp_slide .slide-control .fraction .current {opacity:1; color:var(--brown); font-weight:700}
#contents .cm_product .cmp_slide .slide-control .progress {position:relative; z-index:1; width:100%; height:4px; margin-right:20px; border-radius:10px; overflow:hidden;}
#contents .cm_product .cmp_slide .slide-control .progress:before {content:""; position:absolute; left:0; right:0; top:0; bottom:0; width:100%; background:rgba(35, 31, 32, 0.1); opacity:0.3;}
#contents .cm_product .cmp_slide .slide-control .progress .bar {display:inline-block; position:absolute; left:0; top:0; bottom:0; width:0; background:var(--brown); border-radius:10px;}
#contents .cm_product .cmp_slide .slide-control button {display:flex; align-items:center; justify-content:center; flex-shrink:0; width:40px; aspect-ratio:1/1; border-radius:100%; border:1px solid var(--black-40); transition:0.3s}
#contents .cm_product .cmp_slide .slide-control button i {width:24px; aspect-ratio:1/1; background-size:100%; background-position:center center; background-repeat:no-repeat;}
#contents .cm_product .cmp_slide .slide-control button:hover {border-color:var(--brown); background-color:var(--brown); box-shadow: 0 5px 10px 0 rgba(101, 90, 51, 0.10);}
#contents .cm_product .cmp_slide .slide-control .play {margin-right:-3px; background-image:url("../img/icon_play.svg")}
#contents .cm_product .cmp_slide .slide-control .pause {background-image:url("../img/icon_pause.svg")}
#contents .cm_product .cmp_slide .slide-control .control i.off {display:none;}
#contents .cm_product .cmp_slide .slide-control .prev i {margin-left:-2px; background-image:url("../img/icon_arrow_left_g_t1.svg")}
#contents .cm_product .cmp_slide .slide-control .next i {background-image:url("../img/icon_arrow_right_g_t1.svg")}
#contents .cm_product .cmp_slide .slide-control button:hover .play {background-image:url("../img/icon_play_w.svg")}
#contents .cm_product .cmp_slide .slide-control button:hover .pause {background-image:url("../img/icon_pause_w.svg")}
#contents .cm_product .cmp_slide .slide-control .prev:hover i {background-image:url("../img/icon_arrow_left_w.svg")}
#contents .cm_product .cmp_slide .slide-control .next:hover i {background-image:url("../img/icon_arrow_right_w.svg")}
/* contact */
#contents .cm_contact .cmc_wrap {display:flex; gap:40px; margin-top:60px;}
#contents .cm_contact .cmc_wrap li {box-sizing:border-box; width:100%; padding:40px; border:1px solid var(--black-20); border-radius:10px}
#contents .cm_contact .cmc_wrap li a {display:flex; flex-direction:column; align-items:flex-start;}
#contents .cm_contact .cmc_wrap li:hover {border-color:var(--brown); background-color:var(--brown); color:var(--white)}
#contents .cm_contact .cmc_wrap li:hover p {color:var(--white)}
#contents .cm_contact .cmc_wrap li:hover mark {background-color:var(--white);}
#contents .cm_contact .cmc_wrap li:hover mark i {background-image:url("../img/icon_contact.svg")}
#contents .cm_contact .cmc_wrap mark {display:flex; align-items:center; justify-content:center; width:60px; aspect-ratio:1/1; margin-bottom:60px; border-radius:100%; background:var(--brown)}
#contents .cm_contact .cmc_wrap mark i {width:30px; aspect-ratio:1/1; background-image:url("../img/icon_contact_w.svg"); background-position:0 0; background-size:100% auto; background-repeat:no-repeat}
#contents .cm_contact .cmc_wrap li:nth-child(2) i {background-position:0 33.33%}
#contents .cm_contact .cmc_wrap li:nth-child(3) i {background-position:0 66.66%}
#contents .cm_contact .cmc_wrap li:nth-child(4) i {background-position:0 100%}
#contents .cm_contact .cmc_wrap strong {line-height:30px}
#contents .cm_contact .cmc_wrap p {margin-top:20px; line-height:25px; color:var(--black-60)}
/* sub */
#contents .c_hero {position:relative; height:350px; margin-top:100px; background-size:cover; background-repeat:no-repeat; background-position:center center;}
#contents .c_hero::before {content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.3}
#contents .c_hero .ch_wrap {display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; position:relative; height:100%; padding-top:20px}
#contents .c_hero h2 {position:relative; margin-top:-15px; font-size:60px; font-weight:700; line-height:70px; letter-spacing:-0.6px; color:var(--white)}
#contents .c_hero p {line-height:30px; color:var(--white); text-align:center; word-break:keep-all}
#contents .c_hero .ch_nav {display:flex; align-items:center; position:absolute; top:80px; right:0;}
#contents .c_hero .ch_nav span {flex-shrink:0; width:auto; line-height:25px}
#contents .c_hero .ch_nav i {width:24px; aspect-ratio:1/1; background:url("../img/icon_arrow_right_w_t1.svg") center center no-repeat; baseline-shift:100%}
#contents .c_tab {flex-shrink:0; width:300px; padding:30px; border-radius:20px; background:var(--black-5)}
#contents .c_tab li {display:flex; width:100%;}
#contents .c_tab li + li {margin-top:20px;}
#contents .c_tab li a {display:flex; font-weight:700; line-height:40px;}
#contents .c_tab li a:hover {color:var(--brown)}
#contents .c_tab li a.on {position:relative; color:var(--brown)}
#contents .c_tab li a.on span {position:relative}
#contents .c_tab li a.on span::before {content:""; display:block; position:absolute; bottom:5px; left:0; width:100%; height:2px; background:var(--brown)}
#contents .c_tab > button {display:none}
/* company */
#contents .c_company {padding-top:190px}
#contents .c_company .cc_greetings .ccg_title {display:block; position:relative; margin-bottom:50px; background:linear-gradient(to right, var(--black) 30%, var(--brown) 70%); background-size:300% 300%; font-size:60px; line-height:80px; text-align:center; letter-spacing:-0.6px; color:transparent; -webkit-background-clip:text; animation: bg_move 3s linear infinite alternate;}
@keyframes bg_move {0% {background-position:0 0;} 100% {background-position: 100% 100%;}}
#contents .c_company .cc_greetings .ccg_bg {display:flex; align-items:flex-start; justify-content:center; aspect-ratio:100/34.722; margin-bottom:160px}
#contents .c_company .cc_greetings .ccg_bg > div {width:50%; aspect-ratio:100/34.722; margin:0 auto; background-position:center center; background-repeat:no-repeat; background-size:cover; transition:cubic-bezier(0.84, 0.03, 0.38, 0.98) 1s; transition-delay:0.3s!important;}
#contents .c_company .cc_greetings .ccg_bg > div.aos-animate {width:100%}
#contents .c_company .cc_greetings .ccg_logo {display:flex; flex-direction:column; align-items:center;}
#contents .c_company .cc_greetings .ccg_logo i {width:150px; aspect-ratio:1/1; background-position:center center; background-repeat:no-repeat; background-size:100%}
#contents .c_company .cc_greetings .ccg_logo mark {margin-top:80px; font-size:80px; line-height:90px; letter-spacing:-0.8px; font-weight:700}
#contents .c_company .cc_greetings .ccg_logo p {margin-top:30px; background:linear-gradient(to right, var(--black) 30%, var(--brown) 70%); background-size:300% 300%;line-height:40px; color:transparent; -webkit-background-clip:text; animation: bg_move 3s linear infinite alternate;}
#contents .c_company .cc_greetings .ccg_content {margin-top:30px; text-align:center;}
#contents .c_company .cc_greetings .ccg_content p > span {position:relative; width:auto; font-weight:500}
#contents .c_company .cc_greetings .ccg_content p > span span br {display:none}
#contents .c_company .cc_greetings .ccg_content p > span span:nth-child(odd) {color:var(--black-40)}
#contents .c_company .cc_greetings .ccg_content p > span span:nth-child(even) {position:absolute; left:0; top:0; width:0; color:var(--black); overflow:hidden; white-space:nowrap; transition:2s}
#contents .c_company .cc_greetings .ccg_content.aos-animate p > span span:nth-child(even) {width:100%}
#contents .c_company .cc_greetings .ccg_content.aos-animate p > span br {display:none}
#contents .c_company .cc_marquee {overflow:hidden}
#contents .c_company .cc_marquee > div {display:flex;}
#contents .c_company .cc_marquee > div > p {animation:slidemarquee 50s linear infinite; white-space:nowrap}
#contents .c_company .cc_greetings .cc_marquee {margin-top:120px;}
#contents .c_company .cc_greetings .cc_marquee > div > p {font-size:130px; line-height:140px; color:rgba(177, 171, 153, 0.15); letter-spacing:-1.3px; font-weight:600; font-family:"Open Sans"; animation:slidemarquee 50s linear infinite; white-space:nowrap}
@keyframes slidemarquee { 0% {transform:translateX(-100%);} 100% {transform:translateX(-200%);} }
#contents .c_company .cc_title {display:flex; width:100%; margin-bottom:60px}
#contents .c_company .cc_title mark {line-height:30px}
#contents .c_company .cc_title > div {display:flex; flex-direction:column; align-items:flex-start; gap:10px;}
#contents .c_company .cc_business {padding:150px 0; background:#B1AB99}
#contents .c_company .cc_business .cc_title {align-items:flex-end; justify-content:space-between;}
#contents .c_company .cc_business .cc_title .text {display:flex; flex-direction:column; align-items:flex-start}
#contents .c_company .cc_business .cc_title .text span {width:auto; line-height:30px}
#contents .c_company .cc_business .cc_title .text > br {display:none}
#contents .c_company .cc_business .ccb_banner {position: relative; width:100%;}
#contents .c_company .cc_business .ccb_banner ul {margin-bottom:-60px}
#contents .c_company .cc_business .ccb_banner li {position:sticky; top:150px; left:0; overflow:hidden; width:100%; aspect-ratio:100/41.667; margin-bottom:60px; border-radius:20px; background-size:cover; background-position:center center; background-repeat:no-repeat; transition:0.5s ease-in-out}
#contents .c_company .cc_business .ccb_banner li.on {transform:perspective(800px) translateZ(-30px) rotateX(-5deg);}
#contents .c_company .cc_business .ccb_banner li:nth-child(2) {top:210px;}
#contents .c_company .cc_business .ccb_banner li:nth-child(3) {top:270px;}
#contents .c_company .cc_business .ccb_banner li:nth-child(4) {top:330px;}
#contents .c_company .cc_business .ccb_banner li:nth-child(5) {top:390px;}
#contents .c_company .cc_business .ccb_banner li:nth-child(6) {top:450px;}
#contents .c_company .cc_business .ccb_banner li::before {content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(26, 22, 22, 0.15)}
#contents .c_company .cc_business .ccb_banner li::after {content:""; display:block; position:absolute; top:0; left:0; width:100%; height:40%; background:linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));}
#contents .c_company .cc_business .ccb_banner .ccbb_text {display:flex; flex-direction:column; gap:10px; position:absolute; top:60px; left:60px; z-index:1}
#contents .c_company .cc_business .ccb_banner .ccbb_text mark {line-height:30px}
#contents .c_company .cc_value {height:320vh; padding:150px 0;}
#contents .c_company .cc_value .ccv_content {overflow:hidden; position:sticky; top:130px; height:calc(100vh - 200px); min-height:684px}
#contents .c_company .cc_value .ccv_content ul {display:flex; gap:40px; width:1482px;}
#contents .c_company .cc_value .ccv_content li {overflow:hidden; flex-shrink:0; position:relative; width:947px; aspect-ratio:100/56.283; border-radius:20px; background-size:cover; background-position:center center; background-repeat:no-repeat;}
#contents .c_company .cc_value .ccv_content li::before {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.40)}
#contents .c_company .cc_value .ccv_content li::after {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.20))}
#contents .c_company .cc_value .ccv_content li:nth-child(1) {order:3}
#contents .c_company .cc_value .ccv_content li:nth-child(2) {order:2}
#contents .c_company .cc_value .ccv_content li:nth-child(3) {order:1}
#contents .c_company .cc_value .ccv_content .ccvc_text {display:flex; flex-direction:column; align-items:flex-start; gap:20px; position:absolute; bottom:0; left:0; z-index:1; padding:60px;}
#contents .c_company .cc_value .ccv_content .ccvc_text i {width:36px; aspect-ratio:1/1; background-size:100%; background-repeat:no-repeat; background-position:center}
#contents .c_company .cc_value .ccv_content .ccvc_text p {line-height:30px}
#contents .c_company .cc_value .ccv_content .ccvc_text > div {display:flex; align-items:center; gap:15px;}
#contents .c_company .cc_value .ccv_content .ccvc_text > div mark {opacity:0.6}
#contents .c_company .cc_history {padding:150px 0; background:rgba(179, 167, 121, 0.10)}
#contents .c_company .cc_history .cc_title {flex-shrink:0; width:340px;}
#contents .c_company .cc_history ul {display:flex; justify-content:flex-end; gap:30px; width:calc(100% - 340px);}
#contents .c_company .cc_history li {position:relative; width:124px; height:453px; background:var(--white); border-radius:20px; overflow:hidden; z-index:1; transition:.2s linear;}
#contents .c_company .cc_history li * {transition:.2s linear;}
#contents .c_company .cc_history .cch_img {position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; z-index:-1; background-size:cover; background-position:center center; background-repeat:no-repeat;}
#contents .c_company .cc_history .cch_img::before {content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:var(--black); opacity:0.2}
#contents .c_company .cc_history li > p {transform:rotate(90deg) translateX(70%); font-weight:700; line-height:40px;}
#contents .c_company .cc_history .cch_text {width:0; height:0; overflow:hidden;}
/*#contents .c_company .cc_history .cch_text strong {white-space:nowrap}*/
#contents .c_company .cc_history li.on {width:calc(100% - 647px); padding:40px;}
#contents .c_company .cc_history li.on .cch_img {opacity:1;}
#contents .c_company .cc_history li.on > p {transform:rotate(0deg) translateX(0); color:var(--white);}
#contents .c_company .cc_history li.on .cch_text {margin-top:10px; width:100%; height:auto;}
#contents .c_company .cc_history > .wrap {display:flex; align-items:flex-start; justify-content:space-between}
#contents .c_company .cc_achivement .cc_marquee > div {align-items:center; position:relative; height:200px;}
#contents .c_company .cc_achivement .cc_marquee > div::before {content:""; display:block; position:absolute; top:0; left:0; z-index:1; width:400px; height:100%; background:linear-gradient(90deg, var(--white), rgba(255, 255, 255, 0.00))}
#contents .c_company .cc_achivement .cc_marquee > div::after {content:""; display:block; position:absolute; top:0; right:0; z-index:1; width:400px; height:100%; background:linear-gradient(-90deg, var(--white), rgba(255, 255, 255, 0.00))}
#contents .c_company .cc_achivement .cc_marquee > div > p {font-size:100px; letter-spacing:-1px; line-height:110px; font-family:"Open Sans"; color:rgba(177, 171, 153, 0.70)}
#contents .c_company .cc_achivement {}
#contents .c_company .cc_achivement .cc_title {margin-bottom:30px}
#contents .c_company .cc_achivement .cca_wrap {display:flex; align-items:flex-start; justify-content:space-between; gap:50px; padding-top:120px; padding-bottom:150px}
#contents .c_company .cc_achivement .cca_area {display:flex; flex-direction:column; justify-content:space-between; position:sticky; top:120px; width:600px; height:calc((var(--vh, 1vh) * 100) - 255px); min-height:680px}
#contents .c_company .cc_achivement .cca_tab {display:flex; align-items:center; gap:10px; margin-bottom:60px}
#contents .c_company .cc_achivement .cca_tab button {border:1px solid var(--brown); background:var(--white); color:var(--brown); line-height:23px;}
#contents .c_company .cc_achivement .cca_tab button.on {background:var(--brown); color:var(--white)}
#contents .c_company .cc_achivement .cca_img {}
#contents .c_company .cc_achivement .cca_img > div {display:none; width:600px; aspect-ratio:100/75; border-radius:20px; background-position:center center; background-repeat:no-repeat; background-size:cover}
#contents .c_company .cc_achivement .cca_img > div.on {display:block}
#contents .c_company .cc_achivement .cca_text > div {display:none; position:relative; padding-left:100px}
#contents .c_company .cc_achivement .cca_text > div.on {display:block}
#contents .c_company .cc_achivement .cca_text ul {width:464px}
#contents .c_company .cc_achivement .cca_text li + li {padding-top:70px}
#contents .c_company .cc_achivement .cca_text li p {color:var(--black-60); transition:0.3s}
#contents .c_company .cc_achivement .cca_text li strong {color:var(--black-60); transition:0.3s}
#contents .c_company .cc_achivement .cca_text li.on p {color:var(--black)}
#contents .c_company .cc_achivement .cca_text li.on strong {color:var(--brown)}
#contents .c_company .cc_achivement .cca_text strong {display:block; margin-bottom:10px}
#contents .c_company .cc_achivement .cca_text .ccat_progressbar {position:absolute; top:0; left:0; width:100px; height:100%;}
#contents .c_company .cc_achivement .cca_text .ccat_progressbar .bar {position:absolute; top:50px; bottom:0; left:-4px; width:4px; height:auto; background:rgba(0, 0, 0, 0.10)}
#contents .c_company .cc_achivement .cca_text .ccat_progressbar .bar i {position:absolute; top:0; left:0; width:4px; background:var(--brown); transition:0.3s}
#contents .c_company .cc_achivement .cca_text .ccat_progressbar .bar i::before {content:""; display:block; position:absolute; top:100%; left:50%; width:50px; aspect-ratio:1/1; margin-left:-25px; margin-top:-50px; border-radius:100%; background:url("../img/icon_arrow_down_w.svg") center center no-repeat var(--brown); background-size:24px; box-shadow:0 10px 20px 0 rgba(0, 0, 0, 0.10)}
#contents .c_company .cc_achivement .cca_text .ccat_progressbar .bar i:after {content:''; display:inline-block; vertical-align:middle; position:absolute; top:-50px; bottom:100%; left:0; z-index:-1; width:4px; background-color:var(--brown);}
#contents .c_company .cc_partners {padding-top:100px}
#contents .c_company .cc_partners .ccp_wrap {display:flex; align-items:flex-start; justify-content:space-between}
#contents .c_company .cc_partners .cc_title {width:auto}
#contents .c_company .cc_partners .ccp_area {position:relative; width:946px; overflow:hidden;}
#contents .c_company .cc_partners .ccp_area::before {content:""; display:block; position:absolute; top:0; left:0; z-index:1; width:175px; height:100%; background:linear-gradient(to right, #fff, #fff0)}
#contents .c_company .cc_partners .ccp_area::after {content:""; display:block; position:absolute; top:0; right:0; width:175px; height:100%; background:linear-gradient(to left, #fff, #fff0)}
#contents .c_company .cc_partners .ccp_area > div {display:flex; align-items:center; gap:107px; animation:slidemarquee1 30s linear infinite;}
#contents .c_company .cc_partners .ccp_area > div:nth-child(2) {animation:slidemarquee2 30s linear infinite;}
#contents .c_company .cc_partners .ccp_area ul {display:flex; gap:107px;}
#contents .c_company .cc_partners .ccp_area li {flex-shrink:0; width:160px; aspect-ratio:100/56.25}
#contents .c_company .cc_partners .ccp_area li img {display:block; width:100%; height:100%; object-fit:cover;}
@keyframes slidemarquee1 { 0% {transform:translateX(calc(-100% - 1068px));} 100% {transform:translateX(calc(-200% - 1068px));} }
@keyframes slidemarquee2 { 0% {transform:translateX(-100%);} 100% {transform:translateX(-200%);} }
@keyframes slidemarquee3 { 0% {transform:translateX(calc(-100% - 720px));} 100% {transform:translateX(calc(-200% - 720px));} }
@keyframes slidemarquee4 { 0% {transform:translateX(-100%);} 100% {transform:translateX(-200%);} }
@keyframes slidemarquee5 { 0% {transform:translateX(calc(-100% - 440px));} 100% {transform:translateX(calc(-200% - 440px));} }
@keyframes slidemarquee6 { 0% {transform:translateX(-100%);} 100% {transform:translateX(-200%);} }
/* footer */
#footer {padding:40px 0; background:#414042; color:var(--white); font-size:14px; line-height:20px; font-weight:500}
#footer a:hover {text-decoration:underline; text-underline-position:under}
#footer .wrap > div:nth-child(1) {display:flex; justify-content:space-between; padding-bottom:30px; margin-bottom:30px; border-bottom:1px solid #ffffff26}
#footer .wrap > div:nth-child(2) > div {display:flex; align-items:flex-start; justify-content:space-between; opacity:0.8}
#footer .wrap > div:nth-child(2) .f_mark {display:flex; opacity:0.7}
#footer .wrap > div:nth-child(2) .f_mark li {width:60px; aspect-ratio:1/1; background-image:url("../img/icon_mark.png"); background-position:0 0; background-size:100% auto; background-repeat:no-repeat}
#footer .wrap > div:nth-child(2) .f_mark li:nth-child(2) {background-position:0 33.33%}
#footer .wrap > div:nth-child(2) .f_mark li:nth-child(3) {background-position:0 66.66%}
#footer .wrap > div:nth-child(2) .f_mark li:nth-child(4) {background-position:0 100%}
#footer ul {display:flex}
#footer .f_logo {width:172px; aspect-ratio:100/20.349; background:url("../img/logo_w.svg") center center no-repeat; background-size:100%}
#footer .f_logo + ul li {display:flex; align-items:center;}
#footer div > p {display:flex; gap:31px; font-family:"Open Sans"}
#footer .f_bar {display:flex; gap:31px;}
#footer .f_bar li {position:relative; line-height:30px}
#footer .f_bar li a {display:inline-block; line-height:30px;}
#footer div > p span:nth-child(2) {font-size:10px; line-height:20px; opacity:0.5}
#footer .f_bar li:not(:last-child):before {content:""; display:block; position:absolute; right:-16px; top:50%; width:1px; height:12px; margin-top:-6px; background:#fff; opacity:0.2}
#footer .f_logo + ul li a {display:block; line-height:30px}
#footer address {margin-top:5px}
#footer .wrap > div:nth-child(2) > ul li:last-child {opacity:0.3}
/* popup */
.pop {display:none; align-items:center; justify-content:center; position:fixed; z-index:2; top:0; left:0; width:100%; height:100%;}
.pop.on {display:flex}
.pop .p_wrap {position:relative; box-sizing:border-box; width:calc(100% - 80px); max-width:1440px; padding:40px; background:var(--white); border-radius:20px;}
.pop .p_bg {position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.5}
.pop .p_close {display:flex; align-items:center; justify-content:center; position:absolute; right:40px; top:40px; width:40px; aspect-ratio:1/1;}
.pop .p_close i {width:100%; aspect-ratio:1/1; background:url("../img/icon_close.svg") center center no-repeat; background-size:100%; transition:0.3s}
.pop .p_close:hover i {transform:rotate(90deg)}
.pop .p_head {margin-bottom:20px}
.pop.p_filter {display:none}
.pop.p_privacy .pp_content {height:635px; max-height:calc(100vh - 200px); overflow-y:auto; padding:20px 40px; border-radius:10px; border:1px solid var(--black-20); background:var(--black-5)}
/* board */
.board .b_gallery .bg_thumb {position:relative; z-index:-1}
.board .b_gallery > li::before {z-index:0!important;}
@media all and (max-height:820px) {
#contents .c_company .cc_value {height:450vh}
#contents .c_company .cc_value .ccv_content li {aspect-ratio:100/46.283}
}
@media all and (max-width:1520px) {
#contents .c_company .cc_value .ccv_content ul {width:1508px}
}
@media all and (max-width:1440px) {
#header .h_menu > ul > li {min-width:170px}
#header .h_search input {width:100px}
#contents .cm_product .cmp_slide .slick-slide {width:390px}
#contents .cm_product .cmp_slide .slick-slide.prevslide a {right:14%}
#contents .cm_product .cmp_slide .slick-center + .slick-slide a {left:14%}
#contents .c_company .cc_history .cc_title {width:170px;}
#contents .c_company .cc_history ul {width:calc(100% - 170px)}
#contents .c_company .cc_history li {width:100px}
#contents .c_company .cc_achivement .cca_area {display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between;}
#contents .c_company .cc_achivement .cca_tab {margin-bottom:0}
#contents .c_company .cc_achivement .cca_img > div {width:520px}
}
@media all and (max-width:1280px) {
section {padding:100px 0}
#header, #header.on, #header.header {height:80px}
#header.header .h_logo, #header.on .h_logo {top:22px}
#header .wrap {justify-content:flex-end}
#header .h_logo {z-index:2}
#header .h_logo.on {background-image:url("../img/logo.svg")!important}
#header .h_menu > ul {display:none}
#header .h_menu > ul > li {min-width:inherit; width:100%}
#header .h_menu .hm_btn {display:flex; align-items:center; justify-content:center; position:relative; width:30px; aspect-ratio:1/1;}
#header .h_menu .hm_btn i {width:30px; aspect-ratio:1/1; background:url("../img/icon_menu.svg") center center no-repeat; background-size:100%;}
#header .h_menu.open {align-items:flex-start; position:fixed; top:0; left:0; z-index:1; width:100vw; height:100vh; padding-top:80px; box-sizing:border-box; padding-left:30px; padding-right:30px; background:#fff}
#header .h_menu.open .hm_btn {position:absolute; right:40px; top:25px; transition:0.3s}
#header .h_menu.open .hm_btn i {width:30px; background-image:url("../img/icon_close.svg")!important;}
#header .h_menu.open .hm_btn:hover:before {opacity:0; display:none}
#header .h_menu.open .hm_btn:hover {transform:rotate(90deg)}
#header .h_menu.open .hm_mobile {display:block; width:calc(100% - 30px); max-width:600px; height:auto; margin:0 auto; border-top:1px solid var(--black-5)}
#header .h_menu .hm_mobile button.on:after {width:0}
#header .h_menu .hm_mobile button:after {display:none}
#header .h_menu .hm_mobile > li {border-bottom:1px solid var(--black-5)}
#header .h_menu .hm_mobile button:after {width:100%}
#header .h_search {right:85px}
#header .h_search .hs_btn {width:30px}
#header .h_search > div {display:flex!important; position:fixed; top:0; left:0; width:100%; height:0; padding:10px 40px; border-right:0; border-left:0; border-top:0; border-radius:0; background:var(--white); opacity:0; overflow:hidden; transition:0.3s}
#header .h_search .hs_btn i {transition:0s}
#header .h_search.on > div {height:130px; padding-top:80px; border-bottom:1px solid var(--black-20); overflow:visible; opacity:1;}
#header .h_search > div form {width:100%; padding:0 10px; background:var(--black-5); border-radius:30px;}
#header .h_search > div input {width:100%; padding-left:10px}
#header .h_search form {padding:0; border:none}
#header .h_search .hs_close {position:absolute; bottom:calc(100% - 60px); right:35px; background:var(--white)}
#header .h_search .hs_close > i {width:24px; background-image:url("../img/icon_close.svg")}
#header.on .h_search div {border-color:var(--black-20)}
#header.on .h_search.on .hs_close {bottom:calc(100% - 62px)}
#header.on .h_search.on div {height:130px; padding-top:80px; background:var(--white)}
#header.on .h_menu .hm_btn i {background-image:url("../img/icon_menu_w.svg")}
#header .h_menu > ul > li:hover > a::before {display:none}
#contents .cm_hero .cmh_slide .cmhs_text {bottom:15%}
#contents .cm_hero .cmh_slide .slide-control .wrap > div {bottom:5%; width:calc(100% - 80px)}
#contents .cm_hero .cmh_slide .slide-control .fraction {width:100%}
#contents .cm_hero .cmh_slide .slide-control .progress {width:100%}
#contents .cm_portfolio {padding-bottom:100px}
#contents .cm_portfolio .cmp_title {top:30px; padding-top:100px}
#contents .cm_portfolio .cmp_wrap .cmp_text {left:20px;}
#contents .cm_portfolio .cmp_wrap > ul > li > a:hover .cmp_text {bottom:20px;}
/*#contents .cm_portfolio .cmp_wrap > ul > li:nth-child(even) {margin-top:40px}*/
#contents .cm_portfolio .cmp_wrap .cmp_text strong {font-size:22px; line-height:30px}
#contents .cm_portfolio .cmp_wrap .cmp_text p {font-size:16px; line-height:30px}
#contents .cm_product .cmp_slide {margin-top:60px}
#contents .cm_product .cmp_slide .slick-track {padding:30px 0}
#contents .cm_product .cmp_slide .slick-slide > a {border-width:3px}
#contents .cm_product .cmp_slide .slick-center .cmps_text strong {font-size:18px; line-height:25px}
#contents .cm_product .cmp_slide .slick-center .cmps_text span {font-size:12px; line-height:15px}
#contents .cm_contact .cmc_wrap {gap:30px}
#contents .cm_contact .cmc_wrap li {padding:25px}
#contents .cm_contact .cmc_wrap mark {margin-bottom:45px}
#contents .cm_contact .cmc_wrap p {margin-top:10px}
#contents .c_company .cc_title strong {line-height:1.2}
#contents .c_company .cc_greetings .ccg_logo i {width:120px;}
#contents .c_company .cc_greetings .ccg_logo mark {font-size:70px; line-height:1.2}
#contents .c_company .cc_greetings .cc_marquee > div > p {font-size:110px; line-height:1.1}
#contents .c_company .cc_business .ccb_banner .ccbb_text {top:40px; left:40px}
#contents .c_company .cc_business .ccb_banner ul {height:auto; min-height:inherit; aspect-ratio:100/60}
#contents .c_company .cc_achivement .cc_marquee > div {height:130px}
#contents .c_company .cc_achivement .cc_marquee > div > p {font-size:85px; line-height:1.5}
#contents .c_company .cc_achivement .cca_area {gap:30px; min-height:570px; height:100%}
#contents .c_company .cc_achivement .cca_area, #contents .c_company .cc_achivement .cca_text {width:50%}
#contents .c_company .cc_achivement .cca_img {width:100%}
#contents .c_company .cc_achivement .cca_img > div {width:100%}
#contents .c_company .cc_achivement .cca_text > div {padding-left:60px}
#contents .c_company .cc_achivement .cca_text ul {width:100%}
#contents .c_company .cc_history li.on {width:calc(100% - 460px)}
#contents .c_company .cc_partners .ccp_wrap {flex-direction:column; align-items:flex-start}
#contents .c_company .cc_partners .ccp_area {width:100%}
#contents .c_hero {margin-top:80px}
#contents .c_tab {width:250px}
.pop .p_close {top:44px; width:30px}
.pop .p_title {margin-bottom:25px}
.pop.b_catalog .bc_list {gap:30px}
.pop.b_catalog .bc_list li {padding:25px}
.pop.b_catalog .bc_list li, .pop.b_catalog .bc_list li > div {gap:20px;}
}
@media all and (max-width:1024px) {
section {padding:80px 0}
#contents .c_hero p {line-height:25px}
#contents .cm_hero .cmh_slide .cmhs_text p {font-size:20px; line-height:30px}
#contents .cm_hero .cmh_slide .cmhs_text strong {font-size:50px}
#contents .cm_portfolio {padding-bottom:80px}
#contents .cm_portfolio .cmp_title {padding-top:80px}
#contents .cm_portfolio .cmp_wrap > ul {column-gap:25px}
#contents .cm_portfolio .cmp_wrap > ul > li {width:calc((100% - 25px) / 2)}
#contents .cm_product .cmp_slide {margin-top:50px}
#contents .cm_product .cmp_slide .slick-slider {margin-bottom:30px}
#contents .cm_product .cmp_slide .slick-slide {padding:0 10px}
#contents .cm_product .cmp_slide .slick-slide > a {padding:20px}
#contents .cm_product .cmp_slide .slick-center > a {padding:15px}
#contents .cm_contact .cmc_wrap {flex-wrap:wrap;}
#contents .cm_contact .cmc_wrap li {width:calc((100% - 30px) / 2)}
#contents .c_tab {display:flex; align-items:center; position:relative; width:calc(100% + 80px); height:54px; box-sizing:border-box; margin-left:-40px; margin-top:-30px; padding:0; border-radius:0; background:var(--black-5)}
#contents .c_tab > button {display:block; position:relative; width:100%; padding:5px 15px 5px 40px; text-align:left; font-weight:700; font-size:16px; line-height:44px}
#contents .c_tab > button::before {content:""; display:block; position:absolute; right:40px; top:50%; width:28px; aspect-ratio:1/1; margin-top:-14px; background:url("../img/icon_arrow_down_t1.svg") center center no-repeat; background-size:100%; font-weight:700; font-size:16px}
#contents .c_tab.on > button::before {transform:rotate(-180deg)}
#contents .c_tab ul {display:none}
#contents .c_tab li + li {margin-top:10px}
#contents .c_tab.on {z-index:2}
#contents .c_tab.on ul {display:block; position:absolute; top:100%; left:0; z-index:1; box-sizing:border-box; width:100%; padding:10px 20px 10px 20px; background:var(--white); background:var(--black-5); font-size:16px}
#contents .c_tab.on ul:before {content:""; display:block; position:absolute; left:0; top:0; width:100%; height:1px; background:var(--black-20);}
#contents .c_tab.on li {padding:0 20px}
#contents .c_tab li a {width:100%}
#contents .c_hero {height:290px}
#contents .c_hero .ch_nav {top:30px}
#contents .c_company {padding-top:100px}
#contents .c_company .cc_greetings .ccg_title {margin-bottom:30px; font-size:50px; line-height:1.2}
#contents .c_company .cc_greetings .ccg_bg {margin-bottom:110px}
#contents .c_company .cc_greetings .ccg_logo i {width:100px}
#contents .c_company .cc_greetings .ccg_logo mark {margin-top:60px}
#contents .c_company .cc_greetings .ccg_content p > span span:nth-child(odd) {color:var(--black)}
#contents .c_company .cc_greetings .ccg_content p > span span:nth-child(even) {display:none;}
#contents .c_company .cc_greetings .ccg_content p > span {width:100%}
#contents .c_company .cc_greetings .ccg_content.aos-animate p > span br {display:block}
#contents .c_company .cc_greetings .ccg_content p {line-height:2}
#contents .c_company .cc_greetings .ccg_content p br {display:none}
#contents .c_company .cc_greetings .cc_marquee {margin-top:80px}
#contents .c_company .cc_business {padding-top:80px; aspect-ratio:100 / 350; padding-bottom:80px}
#contents .c_company .cc_business {aspect-ratio:inherit}
#contents .c_company .cc_business .ccb_banner {height:auto}
#contents .c_company .cc_business .ccb_banner ul {top:0; height:auto; aspect-ratio:inherit; margin-bottom:0; padding-bottom:60px}
#contents .c_company .cc_business .ccb_banner li.on {transform:none}
#contents .c_company .cc_business .ccb_banner li {position:relative; top:inherit!important; margin-bottom:0; transition-duration:0.5s; transition-delay:0.5s}
#contents .c_company .cc_business .ccb_banner li::after {height:100%}
#contents .c_company .cc_business .ccb_banner li:nth-child(3) {transition-delay:1s}
#contents .c_company .cc_business .ccb_banner li + li {transform:translateY(80px); opacity:0}
#contents .c_company .cc_business .ccb_banner.aos-animate li + li {transform:translateY(30px); opacity:1}
#contents .c_company .cc_business .ccb_banner.aos-animate li:nth-child(3) {transform:translateY(60px); opacity:1}
#contents .c_company .cc_business .ccb_banner .ccbb_text mark {font-size:16px}
#contents .c_company .cc_value .ccv_content {height:511px; min-height:inherit}
#contents .c_company .cc_value .ccv_content ul {width:1224px}
#contents .c_company .cc_value .ccv_content li {width:690px; aspect-ratio:100/54}
#contents .c_company .cc_value .ccv_content .ccvc_text {gap:10px; padding:30px}
#contents .c_company .cc_value, #contents .c_company .cc_history {padding:80px 0}
#contents .c_company .cc_history ul {gap:20px;}
#contents .c_company .cc_history li {width:60px; height:300px}
#contents .c_company .cc_history li.on {width:250px; padding:30px}
#contents .c_company .cc_achivement .cca_wrap {padding-top:60px; padding-bottom:80px}
#contents .c_company .cc_achivement .cca_tab button {width:130px; line-height:18px;}
#contents .c_company .cc_achivement .cca_text li + li {padding-top:50px}
#contents .c_company .cc_achivement .cc_marquee > div > p {font-size:70px}
#contents .c_company .cc_achivement .cca_area {min-height:425px; height:100%}
#contents .c_company .cc_partners {padding-top:50px}
#contents .c_company .cc_partners .ccp_area > div {animation:slidemarquee3 20s linear infinite}
#contents .c_company .cc_partners .ccp_area > div:nth-child(2) {animation:slidemarquee4 20s linear infinite}
#contents .c_company .cc_partners .ccp_area > div, #contents .c_company .cc_partners .ccp_area ul {gap:60px}
#contents .c_company .cc_partners .ccp_area li {width:120px;}
#footer .wrap > div:nth-child(2) > div {flex-direction:column}
#footer .wrap > div:nth-child(2) .f_mark {margin:10px 0}
.pop.b_catalog .bc_list {gap:20px}
.pop.b_catalog .bc_list li {padding:20px}
.pop.b_catalog .bc_list li mark {width:55px;}
.pop.b_catalog .bc_list li p {line-height:25px;}
.pop.p_filter.on {display:flex!important;}
.pop.p_filter .b_filter {display:block!important;}
.pop.p_filter .p_wrap {width:100%; height:100%; border-radius:0}
}
@media all and (max-width:768px) {
section {padding:60px 0}
#header, #header.on, #header.header {height:70px}
#header .h_logo {transition:none}
#header .h_logo, #header.on .h_logo {top:21px!important; left:30px; width:120px; height:29px; aspect-ratio:inherit}
#header .h_menu .hm_mobile button, #header .h_menu .hm_mobile > li > a {color:var(--black-20); font-size:22px; line-height:70px}
#header .h_menu.open {align-items:flex-start; padding-top:70px}
#header .h_menu.open .hm_btn {right:30px; top:20px;}
#header .h_menu.open .hm_btn i {width:24px}
#header .h_menu .hm_mobile button::before {width:30px; margin-top:-15px; background-size:24px}
#header .h_menu .hm_mobile ul {padding-left:4px}
#header .h_menu .hm_mobile ul a {font-size:15px; line-height:30px}
#header .h_menu .hm_mobile ul li + li {margin-top:10px}
#header .h_search {right:75px}
#header .h_search > div {padding:10px 30px}
#header .h_search form > button[type="submit"] i {left:45px; width:20px;}
#header .h_search > div input {font-size:14px}
#header .h_search .hs_close {right:30px; bottom:calc(100% - 58px)}
#header.on .h_search .hs_btn:before, #header .h_menu .hm_btn:hover:before {background:#fff0}
#header.on .h_search.on div, #header .h_search.on > div {height:120px; padding-top:70px}
#header.on .h_search.on .hs_close {bottom:calc(100% - 58px)}
#header .h_search.on > div {}
#header .h_search .hs_btn:before, #header .h_menu .hm_btn:before {display:none}
#aside {right:20px; bottom:20px}
#aside .a_top {width:40px}
#aside .a_top i {width:20px; margin-top:-2px}
#aside .a_top:hover {background-color:var(--white)}
#aside .a_top:hover i {transform:none; background-image:url("../img/icon_arrow_up.svg")}
#aside .a_catalog {width:70px}
#aside .a_catalog span {font-size:12px}
#aside .a_catalog i {width:20px; margin-bottom:2px}
#contents .cm_hero {max-height:920px; min-height:600px}
#contents .cm_hero .cmh_slide .cmhs_bg::before {height:220px}
#contents .cm_hero .cmh_slide .cmhs_bg::after {height:250px}
#contents .cm_hero .cmh_slide .cmhs_text {left:30px; width:calc(100% - 60px)}
#contents .cm_hero .cmh_slide .cmhs_text strong {font-size:35px; line-height:45px}
#contents .cm_hero .cmh_slide .cmhs_text p {font-size:18px; line-height:25px}
#contents .cm_hero .cmh_slide .cmhs_text p span {display:inline}
#contents .cm_hero .cmh_slide .slide-control .wrap > div {left:30px; width:calc(100% - 60px)}
#contents .cm_hero .cmh_slide .slide-control button.prev, #contents .cm_hero .cmh_slide .slide-control button.next {display:none}
#contents .cm_portfolio {padding-bottom:60px}
#contents .cm_portfolio .cmp_title {padding-top:60px}
#contents .cm_portfolio .wrap {flex-direction:column}
#contents .cm_portfolio .cmp_title {position:relative; top:0; height:auto}
#contents .cm_portfolio .cmp_title ul {flex-direction:row; overflow-x:auto; gap:31px}
#contents .cm_portfolio .cmp_title li {width:100%; min-width:70px; text-align:center}
#contents .cm_portfolio .cmp_title li:first-child {max-width:42px; min-width:inherit}
#contents .cm_portfolio .cmp_title li + li:after {content:""; display:block; position:absolute; left:-16px; top:50%; width:1px; height:16px; margin-top:-8px; background:var(--black-20)}
#contents .cm_portfolio .cmp_title.scroll > button {opacity:1; content:""; display:block; position:absolute; right:0; bottom:0; width:30px; aspect-ratio:1/1; border-radius:100%; background:url("../img/icon_arrow_right_w.svg") center center no-repeat var(--brown); background-size:20px; transition:0.3s; pointer-events:auto}
#contents .cm_portfolio .cmp_title.end > button {opacity:0; pointer-events:none}
#contents .cm_portfolio .cmp_wrap {width:100%; padding-top:25px}
#contents .cm_portfolio .cmp_wrap > ul {gap:20px}
#contents .cm_portfolio .cmp_wrap > ul > li {width:calc((100% - 20px) / 2)}
#contents .cm_portfolio .cmp_wrap > ul > li:nth-child(odd) {margin-top:0}
#contents .cm_portfolio .cmp_wrap > ul > li:nth-child(even) {margin-top:0; transition-delay:0s}
#contents .cm_portfolio .cmp_wrap > ul > li > a:after {opacity:1; height:60%}
#contents .cm_portfolio .cmp_wrap .cmp_text {opacity:1; }
#contents .cm_portfolio .cmp_wrap .cmp_text ul {font-size:14px; line-height:20px}
#contents .cm_portfolio .cmp_wrap .cmp_text strong {font-size:18px; line-height:25px}
#contents .cm_product .cmp_slide {margin-top:40px}
#contents .cm_product .cmp_slide .slick-slide {width:300px}
#contents .cm_product .cmp_slide .slick-track {padding:20px 0}
#contents .cm_product .cmp_slide .slick-center > a {transform:scale(1)}
#contents .cm_product .cmp_slide .slick-slide.prevslide a {right:5%}
#contents .cm_product .cmp_slide .slick-center + .slick-slide a {left:5%}
#contents .cm_product .cmp_slide .slide-control button.prev, #contents .cm_product .cmp_slide .slide-control button.next {display:none}
#contents .cm_contact .cmc_wrap {gap:20px; margin-top:30px}
#contents .cm_contact .cmc_wrap li {width:calc((100% - 20px) / 2); padding:20px}
#contents .cm_contact .cmc_wrap mark {width:50px; margin-bottom:30px}
#contents .cm_contact .cmc_wrap mark i {width:20px}
#contents .cm_contact .cmc_wrap p {font-size:15px}
#contents .c_hero {margin-top:70px}
#contents .c_hero h2 {font-size:50px}
#contents .c_tab > button::before {right:30px}
#contents .c_tab {width:calc(100% + 60px); margin-left:-30px}
#contents .c_tab > button {padding-left:30px}
#contents .c_tab.on ul {padding:10px}
#contents .c_company {padding-top:70px}
#contents .c_company .cc_title {margin-bottom:40px}
#contents .c_company .cc_greetings .ccg_bg > div, #contents .c_company .cc_greetings .ccg_bg {aspect-ratio:100/44}
#contents .c_company .cc_greetings .ccg_bg {margin-bottom:80px}
#contents .c_company .cc_greetings .ccg_logo i {width:80px}
#contents .c_company .cc_greetings .ccg_logo mark {margin-top:40px; font-size:60px;}
#contents .c_company .cc_greetings .ccg_title {font-size:40px}
#contents .c_company .cc_greetings .cc_marquee > div > p {font-size:85px}
#contents .c_company .cc_business {padding:60px 0;}
#contents .c_company .cc_business .ccb_banner .ccbb_text {gap:0; top:25px; left:25px;}
#contents .c_company .cc_business .cc_title {flex-direction:column; align-items:flex-start; gap:10px;}
#contents .c_company .cc_business .cc_title .text {display:inline-block; line-height:1.2}
#contents .c_company .cc_business .cc_title .text span {display:inline}
#contents .c_company .cc_value, #contents .c_company .cc_history {padding:60px 0}
#contents .c_company .cc_value {height:275vh}
#contents .c_company .cc_value .ccv_content ul {width:1010px}
#contents .c_company .cc_value .ccv_content li {width:540px; aspect-ratio:100/70}
#contents .c_company .cc_history > .wrap {flex-direction:column; align-items:flex-start}
#contents .c_company .cc_history ul {flex-direction:column; width:100%}
#contents .c_company .cc_history li {width:100%; height:auto; padding:30px; transition:0.3s}
#contents .c_company .cc_history li * {transition:none}
#contents .c_company .cc_history li.on {width:100%;}
#contents .c_company .cc_history li > p {transform:none; transition:none}
#contents .c_company .cc_history li.on > p {transform:none}
#contents .c_company .cc_history .cch_text {display:none}
#contents .c_company .cc_achivement .cca_wrap {flex-direction:column; align-items:flex-start; gap:20px; padding-top:30px}
#contents .c_company .cc_achivement .cca_area {top:70px; z-index:1; height:auto; width:calc(100% + 60px); min-height:inherit; height:205px; margin-left:-30px; padding:0 30px; padding-top:30px; background:var(--white); transition:0.5s}
#contents .c_company .cc_achivement .cca_area.on {top:-194px;}
#contents .c_company .cc_achivement .cca_text {width:100%}
#contents .c_company .cc_achivement .cca_text ul {width:auto}
#contents .c_company .cc_achivement .cca_text > div {padding-left:40px}
#contents .c_company .cc_achivement .cca_text .ccat_progressbar .bar i::before {width:36px; margin-left:-18px; margin-top:-36px; box-shadow:none}
#contents .c_company .cc_achivement .cca_text .ccat_progressbar .bar i:after {top:-36px}
#contents .c_company .cc_achivement .cca_text .ccat_progressbar .bar {top:36px}
#contents .c_company .cc_achivement .cca_img > div {display:none}
#contents .c_company .cc_achivement .cca_img {display:none}
#footer {padding:30px 0}
#footer .f_logo {width:140px}
#footer .wrap > div:nth-child(1) {padding-bottom:20px; margin-bottom:20px}
#footer .wrap > div:nth-child(2) > div ul {flex-direction:column; gap:5px}
#footer .wrap > div:nth-child(2) .f_mark {flex-direction:row; gap:0}
#footer .wrap > div:nth-child(2) > ul {flex-direction:column; gap:5px}
#footer .wrap > div:nth-child(2) .f_bar li:not(:last-child):before {display:none}
.pop .p_title {margin-bottom:10px}
.pop .p_wrap {width:calc(100% - 60px); padding:30px;}
.pop .p_close {top:30px; right:30px}
.pop .p_close i {width:24px}
.pop.b_catalog .bc_list {flex-direction:column; max-height:61vh; overflow-y:auto; margin-bottom:-30px; padding-bottom:30px;}
.pop.b_catalog .bc_list::-webkit-scrollbar {width:13px;}
.pop.b_catalog .bc_list::-webkit-scrollbar-thumb {background-color:var(--black); border-radius:10px; background-clip:padding-box; border:4px solid transparent;}
.pop.b_catalog .bc_list::-webkit-scrollbar-thumb:hover {background-color:#241a13;}
.pop.b_catalog .bc_list::-webkit-scrollbar-track {background-color:#fff0;}
.pop.p_privacy .pp_content {padding:20px 25px; font-size:16px; line-height:30px}
}
@media all and (max-width:600px) {
#contents .cm_portfolio .cmp_wrap .cmp_text {left:15px; bottom:15px; width:calc(100% - 30px)}
#contents .c_hero {height:230px}
#contents .c_hero h2 {font-size:40px; line-height:1.3; text-align:center}
#contents .c_hero .ch_nav {top:15px; left:0}
#contents .c_hero .ch_wrap {gap:10px;}
#contents .c_company .cc_greetings .ccg_bg > div, #contents .c_company .cc_greetings .ccg_bg {aspect-ratio:100/60}
#contents .c_company .cc_greetings .ccg_title {font-size:30px}
#contents .c_company .cc_greetings .ccg_bg {margin-bottom:60px}
#contents .c_company .cc_greetings .ccg_logo i {width:70px;}
#contents .c_company .cc_greetings .ccg_logo mark {margin-top:30px; font-size:50px}
#contents .c_company .cc_greetings .ccg_logo p, #contents .c_company .cc_greetings .ccg_content {margin-top:20px}
#contents .c_company .cc_greetings .cc_marquee {margin-top:60px}
#contents .c_company .cc_business {padding-top:70px}
#contents .c_company .cc_business .ccb_banner li {aspect-ratio:100/60}
#contents .c_company .cc_value, #contents .c_company .cc_history {padding:70px 0}
#contents .c_company .cc_value {height:auto}
#contents .c_company .cc_value .ccv_content {position:relative; top:0; height:auto}
#contents .c_company .cc_value .ccv_content ul {flex-direction:column; align-items:flex-start; width:100%; transform:none!important;}
#contents .c_company .cc_value .ccv_content li {width:100%; height:auto; aspect-ratio:inherit}
#contents .c_company .cc_value .ccv_content .ccvc_text {position:relative}
#contents .c_company .cc_value .ccv_content .ccvc_text > div {flex-direction:column; align-items:flex-start; gap:0}
#contents .c_company .cc_partners {padding-top:20px}
#contents .c_company .cc_history li {height:auto; padding:20px}
#contents .c_company .cc_history li.on {padding:20px}
#contents .c_company .cc_history .cch_text {width:100%; height:auto; display:none}
/*#contents .c_company .cc_history li.on .cch_text { display:block}*/
#contents .c_company .cc_achivement .cca_wrap {padding-bottom:70px}
#contents .c_company .cc_partners .ccp_area::before, #contents .c_company .cc_partners .ccp_area::after {width:70px}
}
@media all and (max-width:425px) {
#header .h_menu ul ul a {line-height:40px; font-size:16px}
section {padding:45px 0}
#contents .cm_portfolio {padding-bottom:45px}
#contents .cm_portfolio .cmp_title {padding-top:45px}
#contents .cm_hero .cmh_slide .slide-control button {width:40px}
#contents .cm_portfolio .cmp_wrap > ul > li {width:100%}
#contents .cm_portfolio .cmp_wrap .cmp_text {bottom:20px; left:20px; width:calc(100% - 40px)}
#contents .cm_product .cmp_slide {margin-top:40px}
#contents .cm_product .cmp_slide .slick-slider {height:auto}
#contents .cm_product .cmp_slide .slick-track {padding:0}
#contents .cm_product .cmp_slide .slick-slide {transform:scale(1)}
#contents .cm_product .cmp_slide .slick-slide > a { padding:15px}
#contents .cm_product .cmp_slide .cmps_img {margin-bottom:10px}
#contents .cm_product .cmp_slide .slick-center .cmps_img {aspect-ratio:100/66.66}
#contents .cm_product .cmp_slide .slick-center .cmps_text strong {font-size:20px; line-height:30px}
#contents .cm_product .cmp_slide .slick-center .cmps_text span {font-size:16px; line-height:30px}
#contents .cm_product .cmp_slide .slide-control .fraction, #contents .cm_product .cmp_slide .slide-control .progress {margin-right:0}
#contents .cm_product .cmp_slide .slide-control .fraction {gap:5px}
#contents .slide-control .fraction span {font-size:14px!important;}
#contents .cm_contact .cmc_wrap li {width:100%}
#contents .c_hero .ch_wrap {padding-top:40px}
#contents .c_hero h2 {font-size:36px}
#contents .c_company .cc_title {margin-bottom:30px}
#contents .c_company .cc_title mark {line-height:20px}
#contents .c_company .cc_greetings .ccg_title span {display:inline}
#contents .c_company .cc_greetings .ccg_bg > div, #contents .c_company .cc_greetings .ccg_bg {aspect-ratio:100/70}
#contents .c_company .cc_greetings .ccg_logo i {width:60px;}
#contents .c_company .cc_greetings .ccg_logo mark {font-size:45px}
#contents .c_company .cc_greetings .ccg_logo p {text-align:center; line-height:1.4}
#contents .c_company .cc_greetings .cc_marquee > div > p {font-size:50px}
#contents .c_company .cc_business .ccb_banner .ccbb_text {width:calc(100% - 50px)}
#contents .c_company .cc_business .ccb_banner .ccbb_text mark {font-size:14px; line-height:1.2}
#contents .c_company .cc_achivement .cc_marquee > div {height:80px}
#contents .c_company .cc_achivement .cc_marquee > div > p {font-size:50px}
#contents .c_company .cc_achivement .cc_marquee > div::before, #contents .c_company .cc_achivement .cc_marquee > div::after {width:25%}
#contents .c_company .cc_partners .ccp_area li {width:80px;}
#contents .c_company .cc_partners .ccp_area > div, #contents .c_company .cc_partners .ccp_area ul {gap:30px}
#contents .c_company .cc_partners .ccp_area > div {animation:slidemarquee5 10s linear infinite}
#contents .c_company .cc_partners .ccp_area > div:nth-child(2) {animation:slidemarquee6 10s linear infinite}
#footer .wrap > div:nth-child(1) {flex-direction:column}
#footer .f_logo {margin-bottom:15px}
.pop .p_wrap {padding:20px}
.pop .p_close {top:20px; right:20px}
.pop .p_head {margin-bottom:15px}
}
@media all and (max-width:360px) {
#contents .c_tab ul {gap:20px}
#contents .c_hero h2 {font-size:32px}
}