@charset "utf-8";

:root { 
    --mainColor:#e70012;
    --subColor:#053ca1;
    --box1:1600px;
    --bor_r:3px;
    --item_r:20px;
    --header_H:80px;
    --font: 'Pretendard';
    color-scheme: light;
}

.box1{width:var(--box1); max-width:96%; margin:0 auto; position: relative;}

/*메인 xeicon 기본 크기 (시안 xeicon 기준)*/
.main [class^=xi-], .main .xi{font-size:1em; vertical-align:baseline;}

#header{position:fixed; top:0; left:0; width:100%; height:var(--header_H); z-index:100; transition:background .3s, border-color .3s; border-bottom:1px solid rgba(255,255,255,.15);}
#header .box1{height:var(--header_H);}
#header .logo{position:relative; z-index:2;}
#header .logo img{width:240px; height: auto;}
#header .logo a{display:block; line-height:0;}
#header .logo .lg_c{display:none;}
#header .gnb{}
#header .gnb .dep1 > li{position:relative;}
#header .gnb .dep1 > li > a{display:flex; align-items:center; height:var(--header_H); padding:0 45px; font-size:1.125em; font-weight:500; color:#fff; letter-spacing:0; transition:color .3s;}
#header .gnb .dep1 > li > a:after{content:''; position:absolute; left:28px; right:28px; bottom:0px; height:2px; background:var(--subColor); opacity:0; transition:opacity .3s;}
#header .gnb .dep1 > li.on > a:after, #header .gnb .dep1 > li:hover > a:after{opacity:1;}

#header .m_btn{width:26px; height:22px; background:none; border:0; position:relative; cursor: inherit;}
#header .m_btn span{display:block; width:100%; height:2px; background:#fff; position:absolute; left:0; transition:background .3s;}
#header .m_btn span:nth-child(1){top:0;}
#header .m_btn span:nth-child(2){top:50%; margin-top:-1px; width: 75%; right:0; left:inherit; background-color: var(--mainColor)!important;}
#header .m_btn span:nth-child(3){bottom:0;}
.scroll #header, #header:hover{background:#fff; border-color:#e5e5e5;}
.scroll #header .logo .lg_w, #header:hover .logo .lg_w{display:none;}
.scroll #header .logo .lg_c, #header:hover .logo .lg_c{display:block;}
.scroll #header .gnb .dep1 > li > a, #header:hover .gnb .dep1 > li > a{color:#111;}
.scroll #header .m_btn span, #header:hover .m_btn span{background:#111;}


#footer{background:#000; padding:4.5em 0 20px; }
#footer .f_logo img{width:250px; height: auto;}
#footer .ft_top{ margin-bottom: 50px;}
#footer .ft_partner{color:#888; background-color: #333; border-radius: 5px; padding:15px 30px; width:190px;}
#footer .f_info_w{width:65%;}
#footer .f_menu{margin-bottom:1.5em}
#footer .f_menu li{position:relative; margin-right:2.5em;}
#footer .f_menu a{font-size:.938em; font-weight:400; color:#aaa}
#footer .f_menu a:hover{color:#ccc;}
#footer .f_info{font-size:.938em; color:#888}
#footer .f_info li{margin-right:20px; margin-bottom: 5px;}
#footer .f_info li:after{content:'|'; margin-left:20px; color:#888}
#footer .f_info li:nth-child(4):after,
#footer .f_info li:last-child:after{display:none;}
#footer .f_info li.cl{flex:0 0 100%;}
#footer .f_copy{margin-top:40px; font-size:.8125em; color:#555; text-align: center; padding-top:20px; border-top:1px solid rgba(255,255,255,.2); text-transform: uppercase;}


/*탑버튼*/
.qk_list{position: fixed; bottom:10px; right: 15px; z-index: 100;font-size: 16px; }
.qk_list li{ margin-top: 5px;}
.qk_list li a{display: block; width: 52px; height: 52px; line-height: 52px; text-align: center;  border-radius: 20px; font-size: 1.45em;  box-shadow: 2px 2px 3px rgb(0 0 0 / 20%); overflow: hidden; margin-left: auto; background-color: #333; color: #fff; transition: .5s; border:1px solid #0000;}
.qk_list li .xi{width: 52px; line-height: 52px; text-align:center;}
.qk_list li .stx{font-style: normal; font-size: .75em; width:0; overflow: hidden; display: none; font-weight: 700;}
.qk_list li a:hover .stx{width:auto; overflow: hidden; display: block;}
.qk_list li .qk_call{background-color: #fff; color:#222; border:1px solid #333;}
.qk_list li .qk_call:hover{width:200px;}
.qk_list li .qk_kakao{background-color: #faea00; color:#111;}
.qk_list li .qk_kakao .xi{font-size:1.2em;}
.qk_list li .qk_kakao .stx{font-size:.7em; color:#111;}
.qk_list li .qk_kakao:hover{width:170px;}
.qk_list li .qk_blog{background-color:#03c75a; color:#fff;}
.qk_list li .qk_blog:hover{width:180px;}
.main_tit .in_cate{font-size:1em; font-weight:700; color:var(--mainColor); letter-spacing:.5px; margin-bottom:20px;}
.main_tit .in_tt{font-size:2.625em; color:#111; font-weight:700; line-height:1.4;}
.main_tit .in_tx{font-size:1.25em; color:#555; margin-top:35px; line-height: 1.7;}

.mvisual{position:relative; width:100%; height:100vh; min-height:700px; overflow:hidden;}
.mvisual .el{ height:100vh; position:relative; overflow:hidden}
.mvisual .mv_bg{ position:absolute; left:0; top:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover; transform:scale(1.2,1.2); transition-delay:1s}
.mvisual .mv_bg:after{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(90deg, rgba(3,8,22,.6) 0%, rgba(3,8,22,.4) 55%, rgba(3,8,22,.2) 100%);}
.mvisual .mv_txt{position:absolute; left:50%; top:50%; transform:translate(-50%, -70%); color:#fff;}
.mvisual .mv_txt .mv_eng{font-size:1.068em; font-weight:300; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.75); margin-bottom:25px; transform:translateY(1em);opacity:0;}
.mvisual .mv_txt .in_tt{font-size:4em; font-weight: 700; line-height: 1.3; transform:translateY(1em);opacity:0;}
.mvisual .mv_txt .in_tx{font-size:1.5em; font-weight: 300; line-height: 1.3; margin-top:40px; transform:translateY(1em);opacity:0;}
.mvisual .mv_txt .dot{display: inline-block; width: 18px; height: 18px; border-radius: 50%; background-color: var(--mainColor); vertical-align: -8px;}

.mvisual .el.swiper-slide-active .mv_bg{ transform:scale(1); transition:2s; transition-delay:0; transition-timing-function:ease-in}
.mvisual .el.swiper-slide-active .mv_eng{ transform:translateY(0); opacity:1; transition:1s; transition-delay:.5s}
.mvisual .el.swiper-slide-active .in_tt{ transform:translateY(0); opacity:1; transition:1s; transition-delay:1s}
.mvisual .el.swiper-slide-active .in_tx{ transform:translateY(0); opacity:.8; transition:1s; transition-delay:1.5s}

.mvisual .mainSlider-pagination{ position: absolute; left:50%; bottom:3em; transform: translateX(-50%); z-index: 100;}
.mvisual .mainSlider-pagination .swiper-pagination-bullet{width:120px; height:auto; margin: 0 20px 0 0; border-radius: 0; opacity: .4; background:transparent; color:#fff; border-bottom:3px solid #fff; padding-bottom:5px;}
.mvisual .mainSlider-pagination .swiper-pagination-bullet-active{opacity: 1;}
.scroll_wrap{position: absolute; bottom: 0; left:0;width:100%; z-index: 10;}
.scroll_wrap .mainSlide_scroll{ color: #fff; font-size: 0.85em; text-align: center; letter-spacing: 4px; font-weight: 200;}
.scroll_wrap .mainSlide_scroll_bar{ width: 1px; height:45px; background:rgba(255,255,255,.3); margin: 5px auto 0; position: relative; overflow: hidden;}
.scroll_wrap .scroll_bar {width:1px; height: 15px; background: #fff; animation: box-ani 2s linear infinite backwards; margin-left:0px; border-radius: 50%;}

@keyframes box-ani { 
0% {transform: translate(50%, 0);} 
100% {transform: translate(50%, 53px);}
}



/*main1 시안*/
.sr_only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.skip_nav{position:absolute; top:-100px; left:0; z-index:1000; padding:10px 20px; background:#111; font-size:1em;}
.skip_nav:link, .skip_nav:visited{color:#fff;}
.skip_nav:focus{top:0;}
.btn_more{display:inline-flex; align-items:center; gap:14px; padding-bottom:8px; border-bottom:1px solid #111; font-size:1em; font-weight:600; transition:gap .3s;}
.btn_more svg{width:22px; height:22px;}
.btn_more:hover{gap:26px;}
a.btn_more.w{color:#fff; border-color:rgba(255,255,255,.7);}
.s_view_btn{display:block; width:80px; height: 80px; line-height: 80px; background-color: #fff; border-radius: 50%; text-align: center; }
.s_view_btn .xi{transform: rotate(-45deg); transition:transform .4s; font-size:1.375em; color:#111;}


/* 히어로 고정 + msec_over 오버레이 */
.mv_stack{position:relative;}
.mv_stack .mvisual{position:sticky; top:0; z-index:0;}
.mv_stack .mvisual .mv_txt{transform:translate(-50%, calc(-70% - var(--mv_p, 0) * 120px)); opacity:calc(1 - var(--mv_p, 0) * 1.3);}
.mv_stack .mvisual .mv_pagen{opacity:calc(1 - var(--mv_p, 0) * 2);}
.mv_stack .msec_over{z-index:1; min-height:120vh; border-radius:calc((1 - var(--ov_p, 1)) * 60px) calc((1 - var(--ov_p, 1)) * 60px) 0 0; box-shadow:0 -30px 80px rgba(0,0,0,.35);}

.msec_over{position:relative; background:#04060c; color:#fff; overflow:hidden;}
.msec_over .over_sphere{ width:1100px; height:1100px; border-radius:50%; background-image:radial-gradient(rgba(255,255,255,.9) 1.2px, transparent 1.8px); background-size:12px 12px; -webkit-mask-image:radial-gradient(circle at 35% 35%, #000 0%, rgba(0,0,0,.7) 35%, rgba(0,0,0,.25) 60%, transparent 71%); mask-image:radial-gradient(circle at 35% 35%, #000 0%, rgba(0,0,0,.7) 35%, rgba(0,0,0,.25) 60%, transparent 71%); opacity:.3;}
.msec_over .over_sphere.st1{position:absolute; right:-22%; top:15%; transform:translateY(-50%);}
.msec_over .over_sphere.st2{position:absolute; left:-22%; bottom:5%; transform:translateY(50%);}
.msec_over .over_sphere:after{content:''; position:absolute; top:22%; left:32%; width:40%; height:40%; border-radius:50%; background:rgba(5,60,161,.45); filter:blur(120px);}
.msec_over .box1{z-index:1;}
.msec_over .over_tt{font-size:4.5em; font-weight:500; line-height:1.25; letter-spacing:-1.5px;}
.msec_over .over_pill{display:inline-block; width:2.4em; height:1em; border-radius:1em; background-size:cover; background-position:center; vertical-align:-.1em; border:1px solid rgba(255,255,255,.35); box-shadow:0 0 50px rgba(5,60,161,.7);}
.msec_over .over_tx{margin:50px auto 90px; font-size:1.25em; line-height:1.8; color:rgba(255,255,255,.65);}
.msec_over .s_view_btn{width:100px; height: 100px; line-height: 100px; margin:0 auto; position:relative; animation:sv_glow 3s ease-out infinite; cursor: pointer;}

/* s_view_btn 물결 모션 */
.msec_over .s_view_btn:before,
.msec_over .s_view_btn:after{content:''; position:absolute; inset:0; border-radius:50%; border:1px solid rgba(255,255,255,.6); pointer-events:none; animation:sv_wave 3s cubic-bezier(.2,.6,.35,1) infinite;}
.msec_over .s_view_btn:after{animation-delay:1.5s;}
.msec_over .s_view_btn .xi{transition:transform .4s;}
.msec_over .s_view_btn:hover .xi{transform:rotate(0deg);}
@keyframes sv_wave{
    0%{transform:scale(1); opacity:.9;}
    100%{transform:scale(2.4); opacity:0;}
}
@keyframes sv_glow{
    0%{box-shadow:0 0 0 0 rgba(255,255,255,.35);}
    70%, 100%{box-shadow:0 0 0 40px rgba(255,255,255,0);}
}
@media (prefers-reduced-motion: reduce){
    .msec_over .s_view_btn, .msec_over .s_view_btn:before, .msec_over .s_view_btn:after{animation:none;}
}



/* 글자 순차 등장 */
.msec_over .rv_word{display:inline-block; white-space:nowrap;}
.msec_over .rv_char{display:inline-block;}
.js_reveal .msec_over .rv_item{--p:0; opacity:var(--p); transform:translateY(calc((1 - var(--p)) * 40px)); transition: .4s;}
.js_reveal .msec_over .rv_char{transform:translateY(calc((1 - var(--p)) * .45em)); filter:blur(calc((1 - var(--p)) * 6px));}
.js_reveal .msec_over .over_pill.rv_item{transform:scale(calc(.6 + var(--p) * .4));}



.msec_prd{padding:200px 0 220px;}
.msec_prd .prd_head{width:47%}
.msec_prd .prd_head .main_tit{position: sticky; top: calc(var(--header_H) + 100px); padding-bottom:200px}
.msec_prd .prd_list{gap:40px; width:53%; margin-top:200px;}
.msec_prd .prd_list li{width:calc(50% - 20px);}
.msec_prd .prd_list li:nth-child(2n-1){margin-top:-200px;}
.msec_prd .prd_list a{height:430px; padding:50px; border-radius: var(--item_r); transition: transform 0.4s ease-out; transform-style: preserve-3d; transform-origin: center center; position: relative; overflow: hidden;}
.msec_prd .prd_list a:before{content:''; position: absolute; top: 0; left: 0; width:100%; height: 100%; background-color: rgba(0,0,0,.2); backdrop-filter: blur(2px); opacity: 0; transition: .3s; z-index: 10;}
.msec_prd .prd_list a:after{content:''; position: absolute; top: 0; left: 0; width:100%; height: 50%; background: linear-gradient(0deg, transparent, rgba(0,0,0,0.5));}
.msec_prd .prd_nm{font-size:1.25em; font-weight: 800; color:var(--mainColor); position: relative;z-index: 10; margin-bottom: 10px;}
.msec_prd .prd_tt{font-size:2em; font-weight:700; color:#fff; position: relative; z-index: 10;}
.msec_prd .prd_en{margin-top:5px; font-size:1.068em; color:rgba(255,255,255,.8); font-weight: 300; position: relative; z-index: 10;}
.msec_prd .prd_list .s_view_btn{margin-top:20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: .3s; z-index: 10; opacity: 0;}
.msec_prd .prd_list a:hover{transform: rotateY(-20deg) skewY(-5deg);}
.msec_prd .prd_list a:hover:before{opacity: 1;}
.msec_prd .prd_list a:hover .s_view_btn{opacity: 1; margin-top:0;}
.msec_prd .prd_list a:hover .s_view_btn .xi{transform:rotate(0deg); transition-delay: .2s;}


.msec_proc{position:relative; padding:170px 0; background-position: center top; background-size: cover; background-repeat: no-repeat; background-attachment: fixed;}
.msec_proc:before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(180deg, rgba(3,8,22,.75) 0%, rgba(3,8,22,.45) 100%);}
.msec_proc .main_tit .in_tt{color:#fff;}
.msec_proc .proc_list{gap:20px; margin-top:80px; align-items:flex-end;}
.msec_proc .proc_list li{flex:1; min-width:0;}
.msec_proc .proc_list a{height:400px; padding:40px 32px; border:1px solid rgba(255,255,255,.28); border-radius:var(--item_r); background:rgba(255,255,255,.12); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); color:#fff; transition:all .4s;}
.msec_proc .proc_icon{margin-top:auto;}
.msec_proc .proc_icon svg{width:60px; height: auto;}
.msec_proc .proc_icon .cls-1{fill:#fff;}
.msec_proc .proc_ko{margin-top:20px; font-size:1.5em; font-weight:700; line-height:1.25;}
.msec_proc .proc_en{margin-top:6px; font-size:1.068em; font-weight: 300; opacity:.8;}
.msec_proc .proc_tx{max-height:0; overflow:hidden; opacity:0; font-size:1em; line-height:1.6; color:#555; transition:all .4s;}
.msec_proc .proc_btn{display:inline-flex; align-items:center; gap:10px; max-height:0; overflow:hidden; opacity:0; font-size:1em; font-weight:600; transition:all .4s;}
.msec_proc .proc_btn i{display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:#111; color:#fff; font-size:1.125em;}
.msec_proc .proc_list li a:hover{ background:#fff; border-color:#fff; color:#111;}
.msec_proc .proc_list li a:hover .proc_tx{max-height:120px; margin-top:20px; opacity:1;}
.msec_proc .proc_list li a:hover .proc_btn{max-height:40px; margin-top:28px; opacity:1;}



.msec_cs{padding:170px 0;}
.msec_cs .cs_head{margin-bottom:70px;}
.msec_cs .cs_wrap{gap:60px}
.msec_cs .cs_notice{width:calc(50% - 30px);}
.msec_cs .cs_label{padding-bottom:20px; border-bottom:2px solid #111; font-size:1.25em; font-weight:700; color:#111;}
.msec_cs .cs_notice li{border-bottom:1px solid #e5e5e5;}
.msec_cs .cs_notice li a{gap:30px; padding:28px 5px;}
.msec_cs .cs_notice .nt_tt{flex:1; font-size:1.125em; color:#222; transition:color .3s;}
.msec_cs .cs_notice time{font-size:1em; color:#999;}
.msec_cs .cs_notice li a:hover .nt_tt{color:var(--subColor);}


.msec_cta .cta_box{position:relative; flex:1; height:560px; overflow:hidden;}
.msec_cta .cta_inquiry:before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(3,8,22,.68);}
.msec_cta .cta_in{position:relative; z-index:1; height:100%; padding:110px 100px 110px 160px; color:#fff;}
.msec_cta .cta_catalog{background:var(--mainColor);}
.msec_cta .cta_catalog .cta_in{padding:110px 160px 110px 100px;}
.msec_cta .cta_tt{font-size:3em; font-weight:700; line-height:1.2;}
.msec_cta .cta_tx{margin:22px 0 35px; font-size:1.125em; line-height:1.7; color:rgba(255,255,255,.85);}
.msec_cta .cta_contact{margin:-5px 0 45px;}
.msec_cta .cta_contact li{display:flex; gap:20px; margin-bottom:8px; font-size:1.125em;}
.msec_cta .cta_contact li span{width:70px; font-weight:600; color:rgba(255,255,255,.6);}
.msec_cta .cta_contact li a{color:#fff;}
.msec_cta .cata_book{position:relative; display:flex; flex-direction:column; width:300px; height:400px; padding:36px 30px 36px 40px; border-radius:6px 16px 16px 6px; background:#fff; box-shadow:25px 35px 60px rgba(0,0,0,.28); transform:rotate(-6deg); overflow:hidden;}
.msec_cta .cata_book:before{content:''; position:absolute; top:0; left:0; width:14px; height:100%; background:linear-gradient(90deg, #d9dde5, #f5f6f8);}
.msec_cta .cata_book:after{content:''; position:absolute; right:-70px; top:90px; width:230px; height:230px; border-radius:50%; background-image:radial-gradient(rgba(5,60,161,.35) 1.5px, transparent 2px); background-size:12px 12px;}
.msec_cta .cata_book img{position:relative; z-index:1; width:170px; height:auto;}
.msec_cta .cata_book .cb_tt{position:relative; z-index:1; margin-top:auto; font-size:2.25em; font-weight:800; line-height:1.15; color:#111;}


/*=================================================================그누보드 적용 추가============================================================*/
/*gnb 2차메뉴*/
#header .gnb .dep2{position:absolute; top:100%; left:50%; min-width:180px; padding:15px 0; background:#fff; border:1px solid #e5e5e5; border-top:0; box-sizing:border-box; transform:translateX(-50%); opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s;}
#header .gnb .dep1 > li:hover .dep2{opacity:1; visibility:visible;}
#header .gnb .dep2 a{display:block; padding:8px 20px; font-size:1em; color:#555; text-align:center; white-space:nowrap; transition:color .3s;}
#header .gnb .dep2 a:hover{color:var(--mainColor);}

/*전체메뉴 버튼*/
#header .h_util{position:relative; z-index:1001;}
#header .m_btn{cursor:pointer;}
#header .m_btn span{transition:background .3s, transform .3s, opacity .3s;}
#header .m_btn.on span{background:#111;}
#header .m_btn.on span:nth-child(1){top:50%; margin-top:-1px; transform:rotate(45deg);}
#header .m_btn.on span:nth-child(2){opacity:0;}
#header .m_btn.on span:nth-child(3){bottom:50%; margin-bottom:-1px; transform:rotate(-45deg);}
.menu_open #header .logo{z-index:1001;}
.menu_open #header .logo .lg_w{display:none;}
.menu_open #header .logo .lg_c{display:block;}

/*footer 관련사이트*/
#footer .f_site{position:relative;}
#footer .ft_partner{border:0; font-family:inherit; font-size:1em; line-height:inherit; cursor:pointer;}
#footer .ft_partner i{font-style:normal;}
#footer .ft_partner .xi{transition:transform .3s;}
#footer .ft_partner.on .xi{transform:rotate(180deg);}
#footer .f_site_list{display:none; position:absolute; top:100%; left:0; width:100%; max-height:150px; margin-top:5px; padding:5px 15px; overflow-y:auto; background:#333; border-radius:5px; box-sizing:border-box; z-index:5;}
#footer .f_site_list.on{display:block;}
#footer .f_site_list li a{display:block; padding:10px 0; font-size:1em; color:#aaa; border-bottom:1px solid rgba(255,255,255,.1);}
#footer .f_site_list li:last-child a{border-bottom:0;}
#footer .f_site_list li a:hover{color:#fff;}
#footer address{font-style:normal;}
#footer .f_info a{color:inherit;}
.sub #footer{margin-top:8em;}

/*메인 고객센터 최신글*/
.msec_cs .cs_label a{display:flex; color:inherit;}
.msec_cs .cs_notice .nt_tt .xi-lock{margin-right:5px; color:#999;}
.msec_cs .cs_notice .empty_li{padding:28px 5px; font-size:1em; color:#999; text-align:center;}

/*=================================================================서브============================================================*/
/*서브 비주얼*/
.sub_v_wrap{position: relative;}
#sub_visual{height:430px; position: relative; overflow: hidden;}
#sub_visual .bgfix{position:absolute; top: 0; left:0; width:100%; height: 100%; transform: scale(1.15); transition-timing-function: ease-in-out; transition: 1s;}
#sub_visual .sub_v_tit{ font-weight: 700; text-align:center; font-size:3.625em; color:#fff; position: relative; z-index: 10; margin-right:3em; opacity:0; transition:1s;}
.load #sub_visual .bgfix{transform: scale(1);}
.load #sub_visual .sub_v_tit{margin-right:0; opacity:1}

/*서브 비주얼 : 대메뉴(me_code 앞 2자리)별 이미지*/
#sub_visual.sub10 .bgfix{background-image:url(../img/sub/sub_v_01.jpg);}  /*ABOUT*/
#sub_visual.sub20 .bgfix{background-image:url(../img/sub/sub_v_02.jpg);}  /*분말사출성형*/
#sub_visual.sub30 .bgfix{background-image:url(../img/sub/sub_v_03.jpg);}  /*PRODUCT*/
#sub_visual.sub40 .bgfix{background-image:url(../img/sub/sub_v_04.jpg);}  /*PROCESS*/
#sub_visual.sub50 .bgfix{background-image:url(../img/sub/sub_v_05.jpg);}  /*고객센터*/

/*snb*/
#snb { position: absolute; bottom:4em; left:50%; transform: translateX(-50%); z-index: 10; opacity: 0; transition: 1.5s; width:96%;}
#snb .snb_list .sdp1 a{display:block; width:55px; height: 55px; line-height: 55px; border-radius: 50%; text-align:center; background-color:var(--mainColor); color:#fff; font-size:1.125em;}
#snb .snb_list .sdp2,
#snb .snb_list .sdp3,
#snb .snb_list .last{position: relative; width:250px; border-bottom:1px solid rgba(255,255,255,.3);padding:15px 20px; margin-left:20px; cursor: pointer; box-sizing: border-box;}
#snb .snb_list .last{cursor: default;}
#snb .snb_list .sdp_tt{ color:#fff; font-size:1.125em; font-weight: 500; padding-right:20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
#snb .snb_list .sdp_tt:before{content:'\e943'; font-family: 'xeicon'; position: absolute; top: 50%; right:20px; transform: translateY(-50%); font-size:.938em;}
#snb .snb_list .last .sdp_tt:before{display:none;}
#snb .snb_list .sdp_list_wrap{ max-height: 0px; position: absolute; top: 75px; left: 0;  width: 100%;  background: #fff; border-radius: 20px; box-sizing: border-box; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.10); z-index: 10; transition: .3s; transition-timing-function: ease-in-out; opacity: 0; overflow: hidden;}
#snb .snb_list .Aon .sdp_list_wrap{ max-height: 1000px; opacity: 1;}
#snb .snb_list .sdp_list{ padding: 25px; }
#snb .snb_list .sdp_list > li{margin-bottom:7px;}
#snb .snb_list .sdp_list > li:last-child{margin-bottom:0;}
#snb .snb_list .sdp_list > li a{color:#777; font-size:1.05em;}
#snb .snb_list .sdp_list > li.on a{color:var(--mainColor); font-weight: 500;}
.load #snb{ opacity: 1;}

/*컨텐츠 페이지*/
.ctt_admin{display:none;}/*관리자 내용수정 버튼*/
#ctt header{display:none;}/*컨텐츠 페이지 타이틀 header*/

/*컨텐츠 타이틀*/
.container_title{font-weight: 200; font-size: 2.125em; padding-top: 35px; margin: 55px 0; text-align: center; position: relative;}
.container_title:before{content:''; width:1px; height: 26px; visibility: hidden; transition: .8s; transition-timing-function: ease-in-out; transform: scaleY(0); transform-origin: left top; background: #222; position: absolute; top: 0; left: 50%;}
.load .container_title:before{transform: scaleY(1); visibility: visible;} 

/*개인정보&이용약관*/
.agree_box{ border:1px solid #ddd; background:#f9f9f9; border-radius:5px}
.agree_box .in_con{  padding:2em; border:1px solid #ededed; margin:1em; background:#fff;}
.agree_box .in_con .agree_wrap{ font-size: .938em;}
.agree_box .in_con .agree_wrap span{ display: block;}


/**/
.tab_idx{ margin:-1em 0 3em -1em;}
.tab_idx > li{flex:1 20%;}
.tab_idx > li > a{ padding:0 .5em; height:4em; border:1px solid #ddd; margin:1em 0 0 1em; color:#666; transition:.3s;}
.tab_idx > li > a .va{font-size:1.068em; font-weight:500}
.tab_idx > li > a:hover,
.tab_idx > li.on > a{ box-shadow:0 0 1em .125em rgba(0,0,0,.1); color:var(--mainColor); border-color:var(--mainColor)}

/**/
.nm_page_tt{font-size:1.5em; text-align: center; margin:80px auto 30px;}
.nm_page_tt .nmb{width:50px; height: 50px; line-height: 50px; border-radius: 50%; background-color: var(--mainColor); display: inline-block; color:#fff; margin-right:5px;}
.page_tt{font-size:1.825em; font-weight: 600;}
.page_stt{font-size:1.45em; font-weight: 600;}
.page_tx{font-size:1.125em; font-weight: 300;}
.page_stx{font-size:1em; font-weight: 300;}


/* ============================================================
   SUB PAGE : page 폴더 콘텐츠 공용 스타일
   page/*.php 에 인라인으로 있던 <style> 통합 (2026-09-29)
   반응형은 response.css 하단 'SUB PAGE 반응형' 참고
============================================================ */

/* ----- ABOUT 01 : 회사개요 info.php ----- */
.sub_info{padding-bottom:6em;}
.sub_info .info_kv{padding:0 0 4em; border-bottom:1px solid #e5e5e5;}
.sub_info .info_kv .kv_cate{font-size:1em; font-weight:700; color:var(--mainColor); letter-spacing:.5px; margin-bottom:20px;}
.sub_info .info_kv .kv_tt{font-size:2.625em; font-weight:700; color:#111; line-height:1.4;}
.sub_info .info_kv .kv_tt .dot{display:inline-block; width:14px; height:14px; margin-left:8px; border-radius:50%; background:var(--mainColor); vertical-align:-2px;}
.sub_info .info_kv .kv_tx{margin-top:30px; font-size:1.125em; line-height:1.8; color:#555;}
.sub_info .info_kv .kv_num{gap:20px; margin-top:55px;}
.sub_info .info_kv .kv_num > li{flex:1; min-width:0; padding:35px 30px; border:1px solid #e5e5e5; border-radius:var(--item_r); background:#fafafa; transition:border-color .3s, background .3s;}
.sub_info .info_kv .kv_num > li:hover{border-color:var(--mainColor); background:#fff;}
.sub_info .info_kv .kv_num .num{display:block; font-size:2.5em; font-weight:800; color:#111; line-height:1.1; letter-spacing:-1px;}
.sub_info .info_kv .kv_num .num i{font-style:normal; font-size:.5em; font-weight:700; margin-left:4px;}
.sub_info .info_kv .kv_num .unit{display:inline-block; margin-top:14px; padding:4px 14px; border-radius:50px; background:var(--mainColor); font-size:1em; font-weight:600; color:#fff;}
.sub_info .info_kv .kv_num .tx{display:block; margin-top:12px; font-size:1em; color:#777; line-height:1.5;}
.sub_info .info_sec{padding-top:5em;}
.sub_info .info_sec .main_tit{margin-bottom:35px;}
.sub_info .info_sec .main_tit .in_tt{font-size:2.125em;}
.sub_info .info_sec .main_tit .in_tx{margin-top:20px; font-size:1.125em;}
.sub_info .info_tb{border-top:2px solid #111;}
.sub_info .info_tb table{width:100%; border-collapse:collapse; table-layout:fixed;}
.sub_info .info_tb th, .sub_info .info_tb td{padding:22px 30px; border-bottom:1px solid #e5e5e5; font-size:1.063em; text-align:left; line-height:1.6;}
.sub_info .info_tb th{background:#f7f7f8; font-weight:700; color:#111;}
.sub_info .info_tb td{color:#555; word-break:keep-all;}
.sub_info .info_tb td a{color:#555; transition:color .3s;}
.sub_info .info_tb td a:hover{color:var(--subColor);}
.sub_info .info_tb td .bar{margin:0 14px; color:#ddd;}
.sub_info .client_list{gap:24px;}
.sub_info .client_list > li{width:calc(33.33% - 16px); padding:40px 35px; border:1px solid #e5e5e5; border-radius:var(--item_r); transition:border-color .3s, box-shadow .3s, transform .3s;}
.sub_info .client_list > li:hover{border-color:var(--mainColor);}
.sub_info .client_list .cl_nm{font-size:1em; font-weight:800; color:var(--mainColor);}
.sub_info .client_list .cl_tt{display:block; margin-top:14px; font-size:1.5em; font-weight:700; color:#111;}
.sub_info .client_list .cl_tx{display:block; margin-top:12px; font-size:1.063em; color:#666; line-height:1.6; word-break:keep-all;}

/* ----- ABOUT 02 : 연혁 history.php ----- */
.sub_his{padding-bottom:6em;}
.sub_his .his_kv{padding:0 0 4em; border-bottom:1px solid #e5e5e5;}
.sub_his .his_kv .kv_cate{font-size:1em; font-weight:700; color:var(--mainColor); letter-spacing:.5px; margin-bottom:20px;}
.sub_his .his_kv .kv_tt{font-size:2.625em; font-weight:700; color:#111; line-height:1.4;}
.sub_his .his_kv .kv_tt .dot{display:inline-block; width:14px; height:14px; margin-left:8px; border-radius:50%; background:var(--mainColor); vertical-align:-2px;}
.sub_his .his_kv .kv_tx{margin-top:30px; font-size:1.125em; line-height:1.8; color:#555;}
.sub_his .his_group{padding:5em 0; border-bottom:1px solid #eee;}
.sub_his .his_group:last-child{border-bottom:0; padding-bottom:0;}
.sub_his .his_era{width:35%;}
.sub_his .his_era .main_tit{position:sticky; top:calc(var(--header_H) + 60px);}
.sub_his .his_era .main_tit .in_tt{font-size:2.5em; letter-spacing:-1px;}
.sub_his .his_era .main_tit .in_tt i{font-style:normal; margin:0 6px; color:var(--mainColor);}
.sub_his .his_list{width:65%; padding-left:50px; border-left:1px solid #e5e5e5;}
.sub_his .his_list > li{position:relative; display:flex; gap:40px; padding:26px 0;}
.sub_his .his_list > li:before{content:''; position:absolute; top:38px; left:-56px; width:11px; height:11px; border:2px solid #fff; border-radius:50%; background:#c9c9c9; box-shadow:0 0 0 1px #e5e5e5; transition:background .3s, box-shadow .3s;}
.sub_his .his_list > li:first-child:before{background:var(--mainColor); box-shadow:0 0 0 1px var(--mainColor);}
.sub_his .his_list > li:hover:before{background:var(--mainColor); box-shadow:0 0 0 1px var(--mainColor);}
.sub_his .his_list .yy{flex:0 0 auto; width:4.5em; font-size:1.5em; font-weight:800; color:#111; line-height:1.3; letter-spacing:-.5px;}
.sub_his .his_list .tx{flex:1; padding-top:4px; font-size:1.125em; color:#555; line-height:1.7; word-break:keep-all;}
.sub_his .his_list > li:hover .tx{color:#111;}

/* ----- ABOUT 03 : 조직도 org.php ----- */
.sub_org{padding-bottom:6em; --org_bw:280px;}  /*--org_bw : 조직도 박스 기본 폭. 연결선 길이가 이 값에 연동되므로 반응형에서는 이 변수만 바꾼다*/
.sub_org .org_kv{padding:0 0 4em; border-bottom:1px solid #e5e5e5;}
.sub_org .org_kv .kv_cate{font-size:1em; font-weight:700; color:var(--mainColor); letter-spacing:.5px; margin-bottom:20px;}
.sub_org .org_kv .kv_tt{font-size:2.625em; font-weight:700; color:#111; line-height:1.4;}
.sub_org .org_kv .kv_tt .dot{display:inline-block; width:14px; height:14px; margin-left:8px; border-radius:50%; background:var(--mainColor); vertical-align:-2px;}
.sub_org .org_kv .kv_tx{margin-top:30px; font-size:1.125em; line-height:1.8; color:#555;}
.sub_org .org_sec{padding-top:5em;}
.sub_org .org_sec .main_tit{margin-bottom:60px;}
.sub_org .org_sec .main_tit .in_tt{font-size:2.125em;}
.sub_org .org_chart{position:relative; overflow:hidden; padding:90px 40px 90px; border:1px solid #ededed; border-radius:calc(var(--item_r) * 1.5); background:#fff; background-image:radial-gradient(rgba(17,17,17,.06) 1px, transparent 1.6px); background-size:22px 22px;}
 
/* 박스 공통 */
.sub_org .org_box{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; width:var(--org_bw); min-height:104px; margin:0 auto; padding:22px 20px; border-radius:var(--item_r); text-align:center;}
.sub_org .org_box .nm{font-size:1.5em; font-weight:700; line-height:1.3; word-break:keep-all;}
.sub_org .org_box .en{margin-top:6px; font-size:1em; font-weight:500; letter-spacing:1px; text-transform:uppercase; opacity:.6;}
 
/* 대표이사 */
.sub_org .org_box.st1{background:linear-gradient(145deg, #1c1c1c, #000); color:#fff; box-shadow:0 20px 40px rgba(0,0,0,.22);}
/* 전무이사 */
.sub_org .org_box.st2{background:linear-gradient(145deg, #f4142a, var(--mainColor)); color:#fff; box-shadow:0 20px 45px rgba(231,0,18,.3);}
/* 부서 */
.sub_org .org_box.st3{overflow:hidden; width:100%; background:#fff; border:1px solid #e8e8e8; color:#111; box-shadow:0 10px 24px rgba(0,0,0,.05); transition:border-color .3s;}
.sub_org .org_box.st3:before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--mainColor);}
.sub_org .org_box.st3 .nm{font-size:1.25em;}
.sub_org .org_box.st3 .en{font-size:.8125em; letter-spacing:.5px; color:#999; opacity:1;}
/*박스를 띄우면 연결선(.org_side:before, .org_team > li:before)과 접합점이 어긋나므로 테두리 색만 변경*/
.sub_org .org_box.st3:hover{border-color:var(--mainColor);}
 
/* 대표이사 + 전무이사 + 우측 부서 */
.sub_org .org_ceo{position:relative; display:grid; grid-template-columns:repeat(4, 1fr); align-items:center; margin-top:56px;}
.sub_org .org_ceo:before{content:""; position:absolute; top:-56px; left:50%; width:2px; height:56px; margin-left:-1px; background:linear-gradient(#d0d0d0, #9a9a9a);}
.sub_org .org_ceo .org_box.st2{grid-column:2 / 4;}
 
/* 사이드 부서 */
.sub_org .org_side{position:relative; padding:0 12px; box-sizing:border-box;}
.sub_org .org_side .org_box{max-width:var(--org_bw);}  /*부서 박스가 전무이사보다 넓어지지 않도록*/
.sub_org .org_side.r{grid-column:4;}
.sub_org .org_side.l{grid-column:1;}
/*가로 연결선 : 박스 모서리 ↔ 중앙 줄기. 100%=열 폭이므로 --org_bw 만 바뀌면 자동으로 맞는다*/
.sub_org .org_side.r:before{content:""; position:absolute; top:50%; right:calc((100% + var(--org_bw)) / 2); width:calc(150% - var(--org_bw)); height:2px; margin-top:-1px; background:#c9c9c9;}
.sub_org .org_side.l:before{content:""; position:absolute; top:50%; left:calc((100% + var(--org_bw)) / 2); width:calc(150% - var(--org_bw) / 2); height:2px; margin-top:-1px; background:#c9c9c9;}
.sub_org .org_side.l:after{content:""; position:absolute; top:50%; left:calc(200% - 5px); z-index:2; width:10px; height:10px; margin-top:-5px; border:2px solid #fff; border-radius:50%; background:#c9c9c9; box-shadow:0 0 0 1px #e0e0e0;}
 
/* 전무이사 → 하단 버스 */
.sub_org .org_mid{position:relative; display:grid; grid-template-columns:repeat(4, 1fr); align-items:center; padding:60px 0;}
.sub_org .org_mid:before{content:""; position:absolute; top:0; bottom:0; left:50%; width:2px; margin-left:-1px; background:linear-gradient(var(--mainColor), rgba(231,0,18,.25));}
 
/* 하단 4개 팀 + 버스 */
.sub_org .org_team{position:relative; padding-top:46px;}
.sub_org .org_team:before{content:''; position:absolute; top:0; left:12.5%; right:12.5%; height:2px; background:linear-gradient(90deg, rgba(200,200,200,.35), #c9c9c9 15%, #c9c9c9 85%, rgba(200,200,200,.35));}
.sub_org .org_team > li{position:relative; width:25%; padding:0 12px; box-sizing:border-box;}
.sub_org .org_team > li:before{content:''; position:absolute; top:-46px; left:50%; width:2px; height:46px; margin-left:-1px; background:#c9c9c9;}
.sub_org .org_team > li:after{content:''; position:absolute; top:-51px; left:50%; width:10px; height:10px; margin-left:-5px; border:2px solid #fff; border-radius:50%; background:#c9c9c9; box-shadow:0 0 0 1px #e0e0e0; transition:background .3s, box-shadow .3s;}
.sub_org .org_team > li:hover:after{background:var(--mainColor); box-shadow:0 0 0 1px var(--mainColor), 0 0 0 6px rgba(231,0,18,.12);}

/* ----- ABOUT 04 : 오시는 길 location.php ----- */
.sub_loc{padding-bottom:6em;}
.sub_loc .loc_kv{padding:0 0 4em; border-bottom:1px solid #e5e5e5;}
.sub_loc .loc_kv .kv_cate{font-size:1em; font-weight:700; color:var(--mainColor); letter-spacing:.5px; margin-bottom:20px;}
.sub_loc .loc_kv .kv_tt{font-size:2.625em; font-weight:700; color:#111; line-height:1.4;}
.sub_loc .loc_kv .kv_tt .dot{display:inline-block; width:14px; height:14px; margin-left:8px; border-radius:50%; background:var(--mainColor); vertical-align:-2px;}
.sub_loc .loc_kv .kv_tx{margin-top:30px; font-size:1.125em; line-height:1.8; color:#555;}
.sub_loc .loc_sec{padding-top:5em;}
.sub_loc .loc_head{margin-bottom:35px;}
.sub_loc .loc_sec .main_tit .in_tt{font-size:2.125em;}
.sub_loc .loc_head .btn_more{margin-bottom:6px;}
.sub_loc .loc_map{overflow:hidden; border:1px solid #e5e5e5; border-radius:var(--item_r); box-shadow:0 20px 40px rgba(0,0,0,.06);}
.sub_loc .loc_map .map_bar{gap:20px; padding:22px 30px; border-top:1px solid #e5e5e5; background:#fafafa;}
.sub_loc .loc_map .map_bar .in_add{font-size:1.125em; font-weight:700; color:#111;}
.sub_loc .loc_map .map_bar .in_tx{font-size:1.063em; color:#555;}
.sub_loc .loc_map .map_bar .xi{margin-right:8px; color:var(--mainColor);}
.sub_loc .loc_map .root_daum_roughmap{width:100%;}
.sub_loc .loc_map .root_daum_roughmap .wrap_controllers{display:none;}
.sub_loc .loc_map .root_daum_roughmap .cont{display:none;}
.sub_loc .loc_info{gap:24px; margin-top:24px; align-items:stretch;}
.sub_loc .loc_info > li{width:calc(33.33% - 16px); padding:40px 35px; border:1px solid #e5e5e5; border-radius:var(--item_r); transition:border-color .3s, box-shadow .3s, transform .3s;}
.sub_loc .loc_info > li:hover{border-color:var(--mainColor); box-shadow:0 20px 40px rgba(0,0,0,.08); transform:translateY(-6px);}
.sub_loc .loc_info .in_icon{display:flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; background:rgba(231,0,18,.07); font-size:1.375em; color:var(--mainColor);}
.sub_loc .loc_info .in_tt2{display:block; margin-top:22px; font-size:1.375em; font-weight:700; color:#111;}
.sub_loc .loc_info .in_tx2{display:block; margin-top:12px; font-size:1.125em; color:#555; line-height:1.6; word-break:keep-all;}
.sub_loc .loc_info .in_tx2 a{color:#555; transition:color .3s;}
.sub_loc .loc_info .in_tx2 a:hover{color:var(--subColor);}
.sub_loc .loc_info .in_tx3{display:block; margin-top:8px; font-size:1em; color:#888; line-height:1.6; word-break:keep-all;}
.sub_loc .loc_info .in_tx3 a{color:var(--subColor); font-weight:600;}

/* ----- ABOUT 05 : 인사말 company.php ----- */
.sub_ceo{padding-bottom:6em;}
.sub_ceo .ceo_kv{padding:0 0 4em; border-bottom:1px solid #e5e5e5;}
.sub_ceo .ceo_kv .kv_cate{font-size:1em; font-weight:700; color:var(--mainColor); letter-spacing:.5px; margin-bottom:20px;}
.sub_ceo .ceo_kv .kv_tt{font-size:2.625em; font-weight:700; color:#111; line-height:1.4;}
.sub_ceo .ceo_kv .kv_tt .dot{display:inline-block; width:14px; height:14px; margin-left:8px; border-radius:50%; background:var(--mainColor); vertical-align:-2px;}
.sub_ceo .ceo_kv .kv_tx{margin-top:30px; font-size:1.125em; line-height:1.8; color:#555;}
.sub_ceo .ceo_sec{padding-top:5em; align-items:flex-start;}
.sub_ceo .ceo_side{position:sticky; top:calc(var(--header_H) + 60px); width:32%;}
.sub_ceo .ceo_side .main_tit .in_tt{font-size:2.125em;}
.sub_ceo .ceo_side .ceo_num{margin-top:45px;}
.sub_ceo .ceo_side .ceo_num{padding:30px 34px; border:1px solid #e5e5e5; border-radius:var(--item_r); background:#fafafa;}
.sub_ceo .ceo_side .ceo_num > li{padding:18px 0; border-top:1px solid #e5e5e5;}
.sub_ceo .ceo_side .ceo_num > li:first-child{padding-top:0; border-top:0;}
.sub_ceo .ceo_side .ceo_num > li:last-child{padding-bottom:0;}
.sub_ceo .ceo_side .ceo_num .num{display:block; font-size:1.75em; font-weight:800; color:var(--mainColor); line-height:1.2; letter-spacing:-.5px;}
.sub_ceo .ceo_side .ceo_num .tx{display:block; margin-top:6px; font-size:1.063em; color:#666;}
.sub_ceo .ceo_body{width:62%;}
.sub_ceo .ceo_lead{position:relative; padding-top:50px; font-size:1.875em; font-weight:700; color:#111; line-height:1.5; letter-spacing:-.5px; word-break:keep-all;}
.sub_ceo .ceo_lead .mark{position:absolute; top:-10px; left:-4px; font-size:3.2em; font-weight:800; line-height:1; color:var(--mainColor); opacity:.18;}
.sub_ceo .ceo_txt{margin-top:40px;}
.sub_ceo .ceo_txt p{margin-bottom:24px; font-size:1.125em; line-height:1.9; color:#555; word-break:keep-all;}
.sub_ceo .ceo_txt p:last-child{margin-bottom:0;}
.sub_ceo .ceo_txt strong{font-weight:700; color:#111;}
.sub_ceo .ceo_sign{margin-top:55px; padding-top:35px; border-top:1px solid #e5e5e5; text-align:right;}
.sub_ceo .ceo_sign .co{display:block; font-size:1.063em; color:#888; letter-spacing:.5px;}
.sub_ceo .ceo_sign .in_nm{display:flex; align-items:baseline; justify-content:flex-end; gap:14px; margin-top:10px;}
.sub_ceo .ceo_sign .pos{font-size:1.125em; font-weight:600; color:#555;}
.sub_ceo .ceo_sign .nm{font-size:2.75em; font-weight:400; color:#111; font-family:var(--fs_01); letter-spacing:2px; line-height:1.1;}
.sub_ceo .ceo_value{margin-top:7em; padding:6em 5em; border-radius:calc(var(--item_r) * 1.5); background:#0a0e16; background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.6px); background-size:22px 22px;}
.sub_ceo .ceo_value .main_tit{margin-bottom:55px;}
.sub_ceo .ceo_value .main_tit .in_tt{font-size:2.125em; color:#fff;}
.sub_ceo .value_list{gap:24px;}
.sub_ceo .value_list > li{width:calc(33.33% - 16px); padding:45px 40px; border:1px solid rgba(255,255,255,.18); border-radius:var(--item_r); background:rgba(255,255,255,.04); transition:border-color .3s;}
.sub_ceo .value_list > li:hover{border-color:var(--mainColor);}
.sub_ceo .value_list .v_ico{width:52px; height:52px; line-height:0; color:var(--mainColor);}
.sub_ceo .value_list .v_ico svg{width:100%; height:100%; overflow:visible; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.sub_ceo .value_list .v_ico svg *{stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.1s cubic-bezier(.65,0,.35,1);}
.sub_ceo .value_list .v_ico svg .ani_check,
.sub_ceo .value_list .v_ico svg .ani_hand{transition-delay:.55s;}
.sub_ceo .value_list > li:nth-child(2) .v_ico svg *{transition-duration:1.25s;}
.sub_ceo .value_list > li:nth-child(3) .v_ico svg *{transition-duration:1.4s;}
.sub_ceo .value_list.is_on .v_ico svg *{stroke-dashoffset:0;}
.sub_ceo .value_list .ico_quality .ani_glass{transition:transform .5s cubic-bezier(.34,1.56,.64,1);}
.sub_ceo .value_list > li:hover .ico_quality .ani_glass{transform:translate(-2px, -2px);}
.sub_ceo .value_list .ico_delivery .ani_hand{transform-box:view-box; transform-origin:24px 27px;}
.sub_ceo .value_list > li:hover .ico_delivery .ani_hand{animation:ceo_hand 1.2s cubic-bezier(.65,0,.35,1);}
.sub_ceo .value_list > li:hover .ico_trust .ani_check{animation:ceo_check .9s cubic-bezier(.65,0,.35,1);}
@keyframes ceo_hand{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
@keyframes ceo_check{0%{stroke-dashoffset:1;} 100%{stroke-dashoffset:0;}}
@media (prefers-reduced-motion: reduce){
	.sub_ceo .value_list .v_ico svg *{stroke-dashoffset:0; transition:none;}
	.sub_ceo .value_list > li:hover .v_ico *{animation:none; transform:none;}
}
.sub_ceo .value_list .v_tt{display:block; margin-top:24px; font-size:1.625em; font-weight:700; color:#fff;}
.sub_ceo .value_list .v_en{display:block; margin-top:6px; font-size:1em; color:rgba(255,255,255,.5); letter-spacing:.5px; text-transform:uppercase;}
.sub_ceo .value_list .v_tx{display:block; margin-top:20px; font-size:1.063em; color:rgba(255,255,255,.7); line-height:1.7; word-break:keep-all;}

/* ----- BUSINESS 공통 business_01~05 ----- */
/*분말사출성형·PROCESS 공통 (ABOUT와 구분되는 테크 스타일)*/
.tech_pg{padding-bottom:6em;}
.tech_pg .tech_hero{position:relative; overflow:hidden; padding:70px 70px 62px; border-radius:calc(var(--item_r) * 1.5); background:#0a0e16; background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.6px); background-size:22px 22px; color:#fff;}
.tech_pg .tech_hero .hr_num{position:absolute; top:34px; right:56px; font-size:7em; font-weight:800; line-height:1; letter-spacing:-2px; color:rgba(255,255,255,.06);}
.tech_pg .tech_hero .hr_cate{font-size:1em; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--mainColor);}
.tech_pg .tech_hero .hr_tt{position:relative; margin-top:22px; font-size:2.5em; font-weight:700; line-height:1.35; word-break:keep-all;}
.tech_pg .tech_hero .hr_tt .dot{display:inline-block; width:13px; height:13px; margin-left:8px; border-radius:50%; background:var(--mainColor); vertical-align:-1px;}
.tech_pg .tech_hero .hr_tx{position:relative; margin-top:24px; font-size:1.125em; line-height:1.8; color:rgba(255,255,255,.7); word-break:keep-all;}
.tech_pg .tech_hero .hr_meta{gap:10px; margin-top:34px;}
.tech_pg .tech_hero .hr_meta > li{padding:10px 22px; border:1px solid rgba(255,255,255,.22); border-radius:50px; font-size:1em; color:rgba(255,255,255,.65);}
.tech_pg .tech_hero .hr_meta > li b{margin-left:4px; font-weight:700; color:#fff;}
.tech_pg .tech_sec{margin-top:5em;}
.tech_pg .sec_hd{gap:18px; align-items:baseline; padding-bottom:22px; border-bottom:2px solid #111;}
.tech_pg .sec_hd .hd_en{font-size:1em; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--subColor);}
.tech_pg .sec_hd .hd_tt{font-size:1.875em; font-weight:700; color:#111;}
.tech_pg .sec_hd .hd_tx{margin-left:auto; font-size:1.063em; color:#888;}
.tech_pg .row_list > li{display:flex; gap:40px; padding:34px 20px; border-bottom:1px solid #ededed; transition:background .3s;}
.tech_pg .row_list > li:hover{background:#fafafa;}
.tech_pg .row_list .rw_lb{flex:0 0 200px;}
.tech_pg .row_list .rw_no{font-size:1.75em; font-weight:800; line-height:1; color:var(--mainColor);}
.tech_pg .row_list .rw_en{display:block; margin-top:10px; font-size:1em; letter-spacing:.5px; color:#aaa;}
.tech_pg .row_list .rw_ct{flex:1; min-width:0;}
.tech_pg .row_list .rw_tt{display:block; font-size:1.375em; font-weight:700; color:#111; word-break:keep-all;}
.tech_pg .row_list .rw_tx{display:block; margin-top:12px; font-size:1.063em; color:#666; line-height:1.8; word-break:keep-all;}

/* ----- BUSINESS 01 : business_01.php ----- */
.tech_pg .row_list .rw_dot{margin-top:16px;}
.tech_pg .row_list .rw_dot > li{position:relative; padding-left:15px; margin-bottom:7px; font-size:1.063em; color:#555; line-height:1.6;}
.tech_pg .row_list .rw_dot > li:last-child{margin-bottom:0;}
.tech_pg .row_list .rw_dot > li:before{content:''; position:absolute; top:11px; left:0; width:5px; height:5px; border-radius:50%; background:var(--subColor);}
.tech_pg .spec_tb{width:100%; border-collapse:collapse; table-layout:fixed; margin-top:10px;}
.tech_pg .spec_tb th, .tech_pg .spec_tb td{padding:20px 26px; border-bottom:1px solid #ededed; font-size:1.063em; text-align:left; line-height:1.6;}
.tech_pg .spec_tb thead th{background:var(--subColor); color:#fff; font-weight:700; border-bottom:0;}
.tech_pg .spec_tb tbody th{font-weight:700; color:#111;}
.tech_pg .spec_tb td{color:#555; word-break:keep-all;}
/*MIM 결합 구성*/
.tech_pg .mim_eq{gap:18px; margin-top:40px;}
.tech_pg .mim_eq .eq_box{flex:1; min-width:0; padding:40px 28px; border:1px solid #e5e5e5; border-radius:var(--item_r); text-align:center; transition:border-color .3s;}
.tech_pg .mim_eq .eq_box:hover{border-color:var(--subColor);}
.tech_pg .mim_eq .eq_box.st_on{border-color:#111; background:#111;}
.tech_pg .mim_eq .eq_tt{display:block; font-size:1.375em; font-weight:700; color:#111; word-break:keep-all;}
.tech_pg .mim_eq .eq_en{display:block; margin-top:10px; font-size:1em; color:#999;}
.tech_pg .mim_eq .st_on .eq_tt{color:#fff;}
.tech_pg .mim_eq .st_on .eq_en{color:rgba(255,255,255,.6);}
.tech_pg .mim_eq .eq_mark{flex:0 0 auto; font-size:1.5em; font-weight:700; color:#ccc;}
.tech_pg .eq_note{margin-top:26px; font-size:1.125em; color:#555; line-height:1.7; word-break:keep-all;}
.tech_pg .eq_note strong{font-weight:700; color:var(--mainColor);}

/* ----- BUSINESS 02 : business_02.php ----- */
/*세로 스텝*/
.tech_pg .step_list{margin-top:45px;}
.tech_pg .step_list > li{position:relative; display:flex; gap:34px; padding-bottom:38px;}
.tech_pg .step_list > li:last-child{padding-bottom:0;}
.tech_pg .step_list > li:before{content:''; position:absolute; top:74px; bottom:0; left:36px; width:1px; background:#e5e5e5;}
.tech_pg .step_list > li:last-child:before{display:none;}
.tech_pg .step_list .sp_no{position:relative; z-index:1; display:flex; align-items:center; justify-content:center; flex:0 0 74px; height:74px; border:1px solid #e5e5e5; border-radius:50%; background:#fff; font-size:1.25em; font-weight:800; color:var(--mainColor); transition:border-color .3s, background .3s, color .3s;}
.tech_pg .step_list > li:hover .sp_no{border-color:#111; background:#111; color:#fff;}
.tech_pg .step_list .sp_ct{flex:1; min-width:0; padding-top:12px;}
.tech_pg .step_list .sp_tt{display:block; font-size:1.375em; font-weight:700; color:#111;}
.tech_pg .step_list .sp_tt i{margin-left:10px; font-style:normal; font-size:.72em; font-weight:500; letter-spacing:.5px; color:#aaa;}
.tech_pg .step_list .sp_tx{display:block; margin-top:12px; font-size:1.063em; color:#666; line-height:1.8; word-break:keep-all;}

/* ----- BUSINESS 04 : business_04.php ----- */
/*문의 CTA*/
.tech_pg .gd_cta{gap:30px; margin-top:5em; padding:55px 60px; border-radius:calc(var(--item_r) * 1.5); background:#0a0e16; background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.6px); background-size:22px 22px;}
.tech_pg .gd_cta .ct_tt{display:block; font-size:1.875em; font-weight:700; color:#fff; line-height:1.4; word-break:keep-all;}
.tech_pg .gd_cta .ct_sub{display:block; margin-top:14px; font-size:1.125em; color:rgba(255,255,255,.7); line-height:1.7; word-break:keep-all;}
.tech_pg .gd_cta .btn_more{flex:0 0 auto;}

/* ----- BUSINESS 05 : business_05.php ----- */
/*대표 사례*/
.tech_pg .case_ws{margin-top:45px;}
.tech_pg .case_ws .cs_hd{gap:30px; padding-bottom:32px; border-bottom:1px solid #ededed;}
.tech_pg .case_ws .cs_tt{flex:1; min-width:0; font-size:1.75em; font-weight:700; color:#111; line-height:1.45; word-break:keep-all;}
.tech_pg .case_ws .cs_kpi{flex:0 0 auto; text-align:right;}
.tech_pg .case_ws .cs_kpi b{font-size:3.25em; font-weight:800; line-height:1; letter-spacing:-2px; color:var(--mainColor);}
.tech_pg .case_ws .cs_kpi i{margin-left:6px; font-style:normal; font-size:1.25em; font-weight:700; color:#111;}
.tech_pg .case_ws .cs_kpi span{display:block; margin-top:12px; font-size:1em; color:#888;}
.tech_pg .case_ws .cs_chk{gap:20px; margin-top:34px;}
.tech_pg .case_ws .cs_chk > li{display:flex; align-items:flex-start; gap:16px; width:calc(50% - 10px); padding:28px 30px; border:1px solid #e5e5e5; border-radius:var(--item_r); box-sizing:border-box; transition:border-color .3s;}
.tech_pg .case_ws .cs_chk > li:hover{border-color:var(--mainColor);}
.tech_pg .case_ws .cs_chk svg{flex:0 0 auto; width:24px; height:24px; margin-top:2px; color:var(--mainColor);}
.tech_pg .case_ws .cs_chk span{flex:1; min-width:0; font-size:1.125em; color:#555; line-height:1.7; word-break:keep-all;}

/* ----- PROCESS 공통 process_01~06 ----- */
/*PROCESS 공통 (분말사출성형 페이지와 구분되는 스텝 스타일)*/
.prc_pg{padding-bottom:6em;}
.prc_pg .prc_top{gap:44px; padding-bottom:36px; border-bottom:2px solid #111;}
.prc_pg .ic_box{display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:96px; height:96px; border:1px solid #e5e5e5; border-radius:50%; transition:border-color .3s;}
.prc_pg .ic_box svg{width:48px; height:48px; fill:none; stroke:var(--mainColor); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
.prc_pg .prc_top .tp_ct{flex:1; min-width:0;}
.prc_pg .prc_top .tp_cate{font-size:1em; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--subColor);}
.prc_pg .prc_top .tp_tt{margin-top:14px; font-size:2.5em; font-weight:700; color:#111; line-height:1.35; word-break:keep-all;}
.prc_pg .prc_top .tp_tt .dot{display:inline-block; width:13px; height:13px; margin-left:8px; border-radius:50%; background:var(--mainColor); vertical-align:-1px;}
.prc_pg .prc_top .tp_tx{margin-top:18px; font-size:1.125em; color:#666; line-height:1.8; word-break:keep-all;}
/*단계 인디케이터*/
.prc_pg .prc_bar{margin-top:34px; border:1px solid #e5e5e5; border-radius:50px; overflow:hidden;}
.prc_pg .prc_bar > li{flex:1; min-width:0;}
.prc_pg .prc_bar a, .prc_pg .prc_bar span{display:block; padding:17px 8px; border-left:1px solid #f0f0f0; font-size:1em; color:#999; text-align:center; white-space:nowrap; transition:.3s;}
.prc_pg .prc_bar > li:first-child a, .prc_pg .prc_bar > li:first-child span{border-left:0;}
.prc_pg .prc_bar a:hover{background:#fafafa; color:#111;}
.prc_pg .prc_bar .on span{background:#111; color:#fff; font-weight:700;}
/*본문 2단*/
.prc_pg .prc_body{margin-top:4.5em;}
.prc_pg .prc_main{flex:1; min-width:0;}
.prc_pg .sec_tt{display:flex; align-items:baseline; gap:16px; margin-top:3em; padding-bottom:20px; border-bottom:1px solid #111; font-size:1.875em; font-weight:700; color:#111;}
.prc_pg .sec_tt i{font-style:normal; font-size:.533em; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--subColor);}
.prc_pg .sec_tt.first{margin-top:0;}
.prc_pg .mn_lead{padding:32px 0 10px; font-size:1.25em; color:#333; line-height:1.85; word-break:keep-all;}
/*공정 사진*/
.prc_pg .mn_intro{gap:50px; align-items:stretch; margin-top:32px;}
.prc_pg .mn_intro .in_tx{display:flex; flex-direction:column; flex:1; min-width:300px;}
.prc_pg .mn_intro .mn_lead{padding:0 0 4px;}
.prc_pg .mn_intro .dl_list{margin-top:14px;}
.prc_pg .ph_box{position:relative; flex:0 0 auto; width:420px; max-width:100%; height:475px; border-radius:var(--item_r); background:#ddd; color:#888; overflow:hidden;}
.prc_pg .ph_box:before{content:''; display:block; padding-top:100%;}
.prc_pg .ph_box img{position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
/*정의형 목록*/
.prc_pg .dl_list{margin-top:2.5em;}
.prc_pg .dl_list > div{position:relative; padding:28px 0 28px 26px; border-bottom:1px solid #ededed;}
.prc_pg .dl_list > div:before{content:''; position:absolute; top:37px; left:0; width:12px; height:2px; background:var(--mainColor);}
.prc_pg .dl_list dt{font-size:1.25em; font-weight:700; color:#111;}
.prc_pg .dl_list dt span{margin-left:8px; font-size:.75em; font-weight:500; letter-spacing:.5px; color:#aaa;}
.prc_pg .dl_list dd{margin-top:10px; font-size:1.063em; color:#666; line-height:1.8; word-break:keep-all;}
/*설비 타일*/
.prc_pg .eq_tile{gap:16px; margin-top:26px;}
.prc_pg .eq_tile > li{flex:1; min-width:180px; padding:28px 26px; border:1px solid #e5e5e5; border-radius:var(--item_r); background:#fafafa; transition:border-color .3s;}
.prc_pg .eq_tile > li:hover{border-color:var(--mainColor);}
.prc_pg .eq_tile .tl_nm{font-size:1.063em; color:#666;}
.prc_pg .eq_tile .tl_no{display:block; margin-top:10px; font-size:2em; font-weight:800; line-height:1; color:#111;}
.prc_pg .eq_tile .tl_no i{margin-left:4px; font-style:normal; font-size:.5em; font-weight:700; color:#888;}
/*하단 이동*/

/* ----- PROCESS 06 : process_06.php ----- */
/*다음 단계 안내*/
.prc_pg .nx_note{gap:20px; margin-top:3em; padding:30px 34px; border:1px solid #e5e5e5; border-radius:var(--item_r); background:#fafafa; transition:border-color .3s;}
.prc_pg .nx_note:hover{border-color:var(--mainColor);}
.prc_pg .nx_note .nt_tx{font-size:1.063em; color:#666; word-break:keep-all;}
.prc_pg .nx_note .nt_tx b{font-weight:700; color:#111;}
.prc_pg .nx_note .nt_btn{display:inline-flex; align-items:center; gap:10px; flex:0 0 auto; font-size:1em; font-weight:600; color:#111;}
.prc_pg .nx_note .nt_btn i{display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:#111; color:#fff; font-style:normal; font-size:1.125em; transition:background .3s;}
.prc_pg .nx_note:hover .nt_btn i{background:var(--mainColor);}

/* ----- PROCESS 01 : 전체 공정 process_01.php ----- */
.prc_pg .prc_top .tp_no{flex:0 0 auto; font-size:10.5em; font-weight:800; line-height:.82; letter-spacing:-4px; color:#fff; -webkit-text-stroke:1px #ddd;}
.prc_pg .prc_sec{margin-top:4.5em;}
/*공정 흐름*/
.prc_pg .flow_big > li{border-bottom:1px solid #ededed;}
.prc_pg .flow_big a{display:flex; align-items:center; gap:36px; padding:30px 24px 30px 10px; transition:background .3s, padding .3s;}
.prc_pg .flow_big a:hover{background:#fafafa; padding-left:24px;}
.prc_pg .flow_big a:hover .ic_box{border-color:var(--mainColor);}
.prc_pg .flow_big .fb_ct{flex:1; min-width:0;}
.prc_pg .flow_big .fb_no{display:block; font-size:1em; font-weight:800; letter-spacing:.5px; color:var(--mainColor);}
.prc_pg .flow_big .fb_tt{display:block; margin-top:8px; font-size:1.5em; font-weight:700; color:#111;}
.prc_pg .flow_big .fb_tt i{margin-left:10px; font-style:normal; font-size:.7em; font-weight:500; color:#999;}
.prc_pg .flow_big .fb_tx{display:block; margin-top:10px; font-size:1.063em; color:#666; line-height:1.7; word-break:keep-all;}
.prc_pg .flow_big .fb_btn{display:inline-flex; align-items:center; gap:10px; flex:0 0 auto; font-size:1em; font-weight:600; color:#111;}
.prc_pg .flow_big .fb_btn i{display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:#111; color:#fff; font-style:normal; font-size:1.125em; transition:background .3s;}
.prc_pg .flow_big a:hover .fb_btn i{background:var(--mainColor);}
.prc_pg .fin_wrap{gap:36px; margin-top:34px;}
/*후공정*/
.prc_pg .fin_list{flex:1; min-width:300px; flex-direction:column; gap:24px; margin-top:0;}
.prc_pg .fin_list > li{flex:1; width:100%; padding:34px 36px; border:1px solid #e5e5e5; border-radius:var(--item_r); transition:border-color .3s;}
.prc_pg .fin_list > li:hover{border-color:var(--mainColor);}
.prc_pg .fin_list .fn_tt{display:block; margin-top:22px; font-size:1.375em; font-weight:700; color:#111;}
.prc_pg .fin_list .fn_tt i{margin-left:8px; font-style:normal; font-size:.72em; font-weight:500; color:#aaa;}
.prc_pg .fin_list .fn_tx{display:block; margin-top:12px; font-size:1.063em; color:#666; line-height:1.8; word-break:keep-all;}
/*전체 공정 : 목록형 아이콘 / 섹션 타이틀 간격 보정*/
.prc_pg .prc_sec .sec_tt{margin-top:0;}
.prc_pg .flow_big .ic_box{width:88px; height:88px; border:0; background:#fafafa;}
.prc_pg .flow_big .ic_box svg{width:44px; height:44px;}
.prc_pg .ic_box.sm{width:64px; height:64px; border:0; background:#fafafa;}
.prc_pg .ic_box.sm svg{width:32px; height:32px;}

/*모션 최소화 설정 존중 (page 폴더 콘텐츠)*/
@media (prefers-reduced-motion: reduce){
	.doc .scrollAni{visibility:visible; opacity:1; transform:none; transition:none;}
}


/* =========================================================
   가로 오버플로 차단 (2026-10-02)
   .scrollAni.moveR 는 등장 전 transform:translateX(50px) 상태라
   전체 폭 요소에 적용되면 뷰포트를 넘어 가로 스크롤이 생긴다.
   overflow-x:clip 은 스크롤 컨테이너를 만들지 않으므로
   메인 히어로·인사말·연혁의 position:sticky 가 그대로 동작한다.
   ========================================================= */
#wrapper{overflow-x:clip;}
#main_content{overflow-x:clip;}  /*메인에는 #wrapper 가 없음*/