@charset "utf-8";

.pagecommon{position:relative;margin-top:80px;font-size:15px;line-height:1.5;color:#777}
.pagecommon .pl{white-space:pre-line}
.pagecommon *{word-break:keep-all}
.pagecommon .inner{max-width:var(--mainsize);margin:0 auto}

/* 회사소개 */
#About{transition:all .5s}
#About.black{background:#000;transition:all .5s}
#About h1{position:sticky;top:170px;padding-bottom:50px;font-weight:300} 
#About h1.on{color:#fff}
#About h1 b{font-weight:700;color:var(--primary)}
#About h2{font-size:40px;font-weight:700;color:#111;line-height:1;white-space:pre-line;text-transform:uppercase;font-family:var(--e-font)}
#About .box{display:flex;justify-content:space-between;padding-top:250px}
#About .box .r_cont{width:55%}
#About .bg{overflow:hidden;width:var(--mainsize);height:450px;margin:0 auto;border-radius:20px;transition:all .3s}
#About .bg img{width:100%;height:100%;object-fit:cover;object-position:center}

#About .cmp .info dl{display:flex;align-items:center;font-size:17px;font-weight:600;color:#111}
#About .cmp .info dl+dl{margin-top:20px}
#About .cmp .info dt{display:flex;align-items:center;justify-content:center;width:105px;height:50px;margin-right:25px;border-radius:5px;color:#aaa;background:#f2f2f2}
#About .cmp .count{display:grid;grid-template-columns:repeat(2,1fr);gap:50px;margin-top:80px;color:#111}
#About .cmp .count dt{padding-left:20px;border-bottom:1px solid #111;font-size:20px;line-height:1.5}
#About .cmp .count dt span{font-size:60px;font-weight:700;font-family:var(--e-font)}
#About .cmp .count dd{margin-top:10px;padding-left:20px;font-size:17px}

#About .bsn h2{margin-bottom:15px}
#About .bsn .view{overflow:hidden;border:1px solid #e1e1e1;border-radius:10px}
#About .bsn img{width:100%;filter:brightness(0.9)}
#About .bsn .cmt{position:relative;margin-top:-25px;padding:0 50px;font-size:17px}
#About .bsn .cmt span{display:inline-block;padding:7px 20px;border-radius:10px 10px 10px 0;font-weight:700;color:#fff}
#About .bsn .cmt span.sh{background:var(--primary)}
#About .bsn .cmt span.hd{background:#0067f4}
#About .bsn .cmt span.mk{background:#ff8400}
#About .bsn .cmt span.dk{background:#13cfb8}
#About .bsn .cmt span.lts{background:#E30005}
#About .bsn .cmt span.cso{background:#0F62FE}
#About .bsn .cmt h3{margin-top:20px;font-size:25px;font-weight:700;color:#111}
#About .bsn .cmt p{margin-bottom:20px}
#About .bsn .cmt a{font-size:15px;font-weight:700;text-decoration:underline}
#About .bsn .tabs{margin-top:100px}
#About .bsn .tabs span{width:100%;height:auto;border-radius:0;font-size:30px;font-weight:700;color:#aaa;opacity:1;background:none;transition:all .3s}
#About .bsn .tabs span.on{padding-left:20px;color:#111}
#About .bsn .tabs span+span{margin-top:10px}

#About .his .list>div+div{margin-top:10px}
#About .his .on .year svg{transform:rotate(180deg)}
#About .his .on ul{display:block}
#About .his .year{display:flex;justify-content:space-between;align-items:center;padding-right:20px;border-bottom:1px solid #111;font-size:40px;font-weight:700;color:#111;line-height:2;cursor:pointer}
#About .his .year svg{transition:all .3s}
#About .his ul{display:none;padding:50px 30px 30px 30px;transition:all .3s}
#About .his ul li{display:flex;font-size:17px;font-weight:400;color:#111}
#About .his ul li+li{margin-top:10px}
#About .his ul li em{width:130px;font-style:normal;font-weight:600;opacity:.5}
#About .his ul li span{display:inline-flex;align-items:center}
#About .his ul li span svg{width:21px}
#About .his h2{position:sticky;top:150px;height:100%}
#About.black .his h2{color:#fff}
#About.black .his .year{border-bottom:1px solid #fff;color:#fff}
#About.black .his ul li{color:#fff}
#About.black .his ul li span{color:var(--primary)}

#About .loc{display:block;color:#fff}
#About .loc h2{color:#fff;text-align:center}
#About .loc .add{margin:80px 0 60px;color:#fff}
#About .loc .add span{display:inline-block;padding:10px 30px;border-radius:50px;font-size:17px;font-weight:600;text-align:center;background:#333}
#About .loc .add p{margin-top:20px;font-size:25px;font-weight:700}
#About .loc .img_area{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
#About .loc .img_area img{width:100%}
#About .loc .add{text-align:center}
#About .loc .way{display:grid;grid-template-columns:repeat(2,1fr);padding:8% 5%}
#About .loc .way div>p{font-size:20px;font-weight:700}
#About .loc .way p img{margin-right:15px}
#About .loc .way ul{padding:10px 0 0 50px}
#About .loc .way li{font-size:17px;color:#999}
#About .loc .way div:nth-child(-n+2){margin-bottom:70px;padding-bottom:70px;border-bottom:1px solid rgba(255,255,255,.15)}
#About .loc .way li span{color:#f9e000}
#About .loc .way li:before{display:inline-block;content:'';width:3px;height:3px;margin-right:15px;vertical-align:5px;background:#999}
#About .loc .way>div:last-child{overflow:hidden;border-radius:20px}
#About .loc .way iframe{display:block;width:100%;height:295px}
#About .loc .way .map_link{display:flex;align-items:center;gap:10px;margin:15px 0 0 50px}
#About .loc .way .map_link a{display:flex;align-items:center;gap:10px;padding:10px 15px;border-radius:7px;font-size:15px;font-weight:600;color:#fff;background:#232323;transition:all .3s}

#About #award{flex-direction:column}
#About #award ul{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:50px}
#About #award img{width:100%;box-shadow:12px 0px 10px 0px rgba(0, 0, 0, .2)}
#About #award p{margin-top:15px;font-size:18px;font-weight:700;color:#111;text-align:center}


/* 서비스 */
#bsn .tit{font-size:20px;text-align:center}
#bsn h1{margin-bottom:40px;font-weight:700;white-space:pre-line}
#bsn h1 b{color:var(--primary)}
#bsn .bsn_cont{margin-top:150px}
#bsn figure{display:flex;height:100vh;margin:0}
#bsn figure>*{width:50%;padding:6%}
#bsn figure .bg{background-image:url(../sh_page/img/business_homepage.jpg);background-size:cover}
#bsn figure .bg02{background-image:url(../sh_page/img/business_erp.jpg)}
#bsn figure .bg03{background-image:url(../sh_page/img/business_intranet.jpg)}
#bsn figure .bg04{background-image:url(../sh_page/img/business_web.jpg)}
#bsn figure .bg05{background-image:url(../sh_page/img/business_hosting.jpg)}
#bsn figure .bg ul{font-size:50px;font-weight:200;line-height:1.3;color:#fff;text-align:right}
#bsn figure .bg ul li{opacity:.4;cursor:default;transition:all .3s}
#bsn figure .bg ul li:hover{opacity:1}
#bsn figure .c_tit{background:#fff}
#bsn figure .c_tit span{font-size:13px;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:0;font-family:var(--e-font)}
#bsn figure .c_tit h2{margin:10px 0 20px;font-size:40px;font-weight:700;color:#111}
#bsn figure .c_tit p{font-size:20px;line-height:1.5;white-space:pre-line}
#bsn figure.flex{flex-direction:row-reverse}
#bsn figure.flex .bg ul{text-align:left}
#bsn figure.flex .c_tit{text-align:right;color:#fff;background:#111}
#bsn figure.flex .c_tit h2{color:#fff}
#bsn figure.flex .c_tit p{opacity:.7}

#bsn .btm_cont{position:relative;padding:200px 0;background:#fff}
#bsn .merit h2{margin-bottom:80px;font-size:42px;font-weight:700;color:#111;text-align:center}
#bsn .merit h2 b{color:var(--primary)}
#bsn .merit ul{overflow:hidden;display:grid;grid-template-columns:repeat(2,1fr);border-radius:20px}
#bsn .merit ul li{padding:10%}
#bsn .merit ul li:nth-child(1), #bsn .merit ul li:nth-child(4){background:#fffaec}
#bsn .merit ul dt{margin-top:20px;padding-bottom:10px;font-size:20px;font-weight:700;color:#111}
#bsn .merit ul dd{font-size:17px}

#bsn .bnr_link{display:flex;justify-content:space-around;align-items:center;height:370px;margin-top:120px;border-radius:20px;background:url(../sh_page/img/business_bnr.jpg) center}
#bsn .bnr_link p{font-size:35px;font-weight:300;line-height:1.3;color:#fff}
#bsn .bnr_link p b{font-weight:700}
#bsn .bnr_link a{display:flex;justify-content:center;align-items:center;width:245px;height:75px;border-radius:50px;font-size:20px;font-weight:700;color:#fff;background:var(--primary);transition:all .3s}

/* 혜택 */
#Bnf{padding-bottom:200px;text-align:center}
#Bnf .tit{white-space:pre-line}
#Bnf .tit b{color:var(--primary)}
#Bnf .ps{margin-top:15px;font-weight:600;color:var(--primary);text-align:right}
#Bnf .cont_area{max-width:var(--mainsize);margin:0 auto;padding-top:100px}
#Bnf .box+.box{margin-top:150px}
#Bnf .box .s_tit{margin-bottom:30px}
#Bnf .box h2{font-size:28px;color:#111}
#Bnf .box li{border-radius:13px;border:5px solid #f2f2f2;padding:50px 30px;background:#f2f2f2;transition:all .3s}
#Bnf .box li p{white-space:pre-line}
#Bnf .box h3{margin-bottom:10px;font-size:18px;color:#111;white-space:pre-line}
#Bnf .cont01 ul{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
#Bnf .cont02 ul{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

#Bnf .box li:hover{border:5px solid var(--primary)}

/* 프로젝트 */
#Work h1{font-weight:700;text-align:center}
#Work .portfolio{display:grid;grid-template-columns:repeat(2,1fr);margin-top:80px}
#Work .portfolio a{position:relative;display:block}
#Work .portfolio a img{width:100%}
#Work .portfolio a svg{transition:all .3s}
#Work .portfolio a .subject{position:absolute;bottom:50px;left:50px;font-size:20px;font-weight:700;color:#fff}
#Work .btn_area{margin-top:50px;text-align:center}
#Work .btn_area button{border:none;text-align:center;background:none;font-family:var(--e-font);transition:all .3s}
#Work .btn_area p{margin:5px 0;font-size:18px;font-weight:600;color:#111}
#Work .btn_area span{font-size:15px;font-weight:500;color:#aaa}
#Work .btn_area span b{font-weight:500}
#Work .m_view{margin-top:150px;padding:10%;background:#000}
#Work .m_view h2{margin-bottom:70px;font-size:37px;color:#fff;text-align:center;line-height:1.3;white-space:pre-line}

/* 개발_페이지 */
@font-face{font-family:'GongGothicMedium';src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicMedium.woff') format('woff');font-weight: normal;font-style: normal;}
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900');
@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@import url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo.css');

#Devp{margin-bottom:100px}
#Devp h1{text-align:center}
#Devp .portfolio{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:80px}
#Devp ul.portfolio li{transition:all .3s}
#Devp ul.portfolio li a{position:relative;overflow:hidden;display:block;height:450px;padding:70px 50px 50px;border-radius:10px;color:#fff;transition:all .3s;background-position:center}
#Devp ul.portfolio li a .wrap{position:relative;z-index:10;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;height:100%;}
#Devp ul.portfolio li a .wrap div>span{font-size:18px;font-weight:500;opacity:.5;white-space:pre-line}
#Devp ul.portfolio li a p{margin-top:20px;font-size:32px;font-weight:600;line-height:1.3;text-transform:uppercase}
#Devp ul.portfolio li a .link{display:inline-flex;align-items:center;gap:10px;padding:12px 25px;border-radius:50px;font-size:15px;font-weight:600;color:#111;background:#fff;transition:all .3s}
#Devp ul.portfolio li a .link svg{width:20px}

#Devp ul.portfolio li.prd01 a{background-image:url(../sh_page/img/dev/dev_thumb01.jpg)}
#Devp ul.portfolio li.prd02 a{background-image:url(../sh_page/img/dev/dev_thumb02.jpg)}
#Devp ul.portfolio li.prd03 a{background-image:url(../sh_page/img/dev/dev_thumb03.jpg)}
#Devp ul.portfolio li.prd04 a{background-image:url(../sh_page/img/dev/dev_thumb04.jpg)}
#Devp ul.portfolio li.prd05 a{background-image:url(../sh_page/img/dev/dev_thumb05.jpg)}
#Devp ul.portfolio li.prd06 a{background-image:url(../sh_page/img/dev/dev_thumb06.jpg)}
#Devp ul.portfolio li.prd07 a{background-image:url(../sh_page/img/dev/dev_thumb07.jpg)}
#Devp ul.portfolio li.prd08 a{background-image:url(../sh_page/img/dev/dev_thumb08.jpg)}
#Devp ul.portfolio li.prd09 a{background-image:url(../sh_page/img/dev/dev_thumb09.jpg)}

#DevItem{overflow:hidden;margin-top:0 !important;font-size:20px;font-weight:500}

#DevItem .notokr{font-family: "Noto Sans KR", serif}
#DevItem .gong{font-family:'GongGothicMedium'}
#DevItem .play{font-weight:700;font-family: "Play", serif;}
#DevItem .poppins{font-family: 'Poppins'}
#DevItem .lato{font-family: "Lato", serif;}
#DevItem .apple{font-family: 'Apple SD Gothic Neo';}

#DevItem .inner{max-width:1500px;margin:0 auto}
#DevItem .flex{display:flex;margin-bottom:100px}
#DevItem .wh{color:#fff}
#DevItem .dk{color:#111}
#DevItem main{position:relative;padding-top:150px;font-weight:700;color:#111;text-align:center;background-size:cover;background-position:center}
#DevItem main h2{margin-bottom:10px;font-size:22px;color:var(--item)}
#DevItem main h1{margin-bottom:40px;font-size:50px}
#DevItem main img{position:relative;z-index:100}
#DevItem section{padding:150px 0}
#DevItem section .sec_tit{width:580px;font-size:50px;font-weight:200;text-transform:uppercase;font-family:var(--e-font)}
#DevItem section h2{margin-bottom:50px;font-size:35px;font-weight:700}
#DevItem .ov{background:var(--item-dk)}
#DevItem .ov .info{opacity:.5}
#DevItem .float{overflow:hidden;position:relative;margin-top:-150px;padding:300px 0 150px}
#DevItem .path{padding:60px;border:1px solid #e1e1e1;text-align:center}
#DevItem .wr{background:#111}
#DevItem .wr .sec_tit{margin-bottom:100px}
#DevItem .wr article~article{margin-top:100px}
#DevItem .wr article h3{font-size:30px}
#DevItem .wr ul{margin-top:80px}
#DevItem .wr .roll{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
#DevItem .wr .roll .img_box{overflow:hidden;height:600px}
#DevItem .wr .roll .img_box img{width:100%;height:100%;object-fit:cover;object-position:top;transition:object-position 5s cubic-bezier(0.2, 1, 0.2, 1)}
#DevItem .wr .roll .img_box:hover img{object-position:bottom}
#DevItem .wr .row2{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}
#DevItem .wr .row2 li:nth-child(2n){margin-top:150px}
#DevItem .wr .row2 img{width:100%}
#DevItem .label{position:relative;display:inline-block;margin-bottom:20px;padding:3px 10px;font-size:16px;background:var(--item);text-transform:uppercase}
#DevItem .label:after{position:absolute;content:'';left:0;bottom:-10px;width: 0;height: 0;border-left:10px solid var(--item);border-bottom:10px solid transparent}
#DevItem .sg .col1{background:var(--item)}
#DevItem .sg .col2{background:var(--item-dk)}
#DevItem .sg .list{display:grid;grid-template-columns:repeat(2,1fr);gap:50px;padding-top:150px}
#DevItem .sg .list .s_tit{margin-bottom:50px;font-size:20px;font-weight:700;color:#aaa;text-transform:uppercase}
#DevItem figure{margin:0}
#DevItem figure .label{color:#fff}
#DevItem .sg .c_wrap{display:flex;justify-content:space-between;gap:15px}
#DevItem .sg .c_wrap~.c_wrap{margin-top:50px}
#DevItem .sg .c_wrap div p{font-size:35px}
#DevItem .sg .c_wrap div span{font-size:15px;color:#777}
#DevItem .sg .c_wrap .b_txt{font-size:90px;line-height:1}
#DevItem .sg .c_wrap dl{display:flex;flex-direction:column;justify-content:space-between;height:250px;padding:50px;border-radius:20px;color:#fff;font-family:var(--e-font)}
#DevItem .sg .c_wrap dt{font-size:15px;opacity:.5;text-transform:uppercase}
#DevItem .sg .typ2 .col1{width:60%}
#DevItem .sg .typ2 .col2{width:40%}
#DevItem .sg .typ3 .col1{width:60%}
#DevItem .sg .typ3 div{width:40%}
#DevItem .sg .typ3 div dl{height:calc(50% - 5px);padding:25px 30px}
#DevItem .sg .typ3 div dl~dl{margin-top:10px}
#DevItem .sg .typ3 .col2{background:var(--item-se)}
#DevItem .sg .typ3 .col3{background:var(--item-pt)}
#DevItem .si{padding:0}
#DevItem .si .sec_tit{width:100%;padding:80px 0;color:#fff;background:var(--item)}
#DevItem .si figure h3{font-size:40px;font-weight:700}
#DevItem .si figure p{margin-top:10px;white-space:pre-line}

.ptf .prd_tab{display:flex;justify-content:center;gap:10px;margin-top:70px}
.ptf .prd_tab a{display:inline-block;padding:12px 30px;border-radius:50px;font-size:18px;font-weight:600;color:rgba(0,0,0,.5);background:#f2f2f2;transition:all .3s}
.ptf .prd_tab a.on{color:var(--primary);background:#111}

/* cso24 */
.cso24 main{background:url(../sh_page/img/dev/cso24_bg.jpg)}
.cso24 .si .wrap{position:relative;padding-left:210px}
.cso24 .si .wrap:after{position:absolute;content:'';z-index:-1;top:0;left:0;width:685px;height:100%;background:#ebf5fe}
.cso24 .si .nobg:after{display:none}
.cso24 .si .nobg figcaption{margin-bottom:50px}
.cso24 .si figure{margin:0;padding:200px 0 100px}
.cso24 .si h3{margin-bottom:10px}
.cso24 .si .img01{margin-top:-50px}
.cso24 .si .img02{margin-top:-200px}
.cso24 .si .img03{margin-top:-150px}
.cso24 .si .abs{position:absolute;top:30%;right:0;padding-top:0}
.cso24 .si .abs:after{position:absolute;content:'';top:0;right:0;width:400px;height:100%;background: linear-gradient(90deg, rgba(255,255,255,.1), #fff);}
.cso24 .si .abs img{position:relative}

/* dkerp */
.dkerp main{background:url(../sh_page/img/dev/dkerp_bg.jpg) no-repeat}
.dkerp .ov ul{display:flex;justify-content:center}
.dkerp .ov ul li{display:flex;flex-direction:column;align-items:center;gap:30px;width:30%}
.dkerp .ov ul li span{display:flex;align-items:center;justify-content:center;width:45px;height:45px;border-radius:50px;font-size:15px;font-weight:700;color:var(--item-dk);background:rgba(255,255,255,.2)}
.dkerp .ov ul li p{font-weight:700;text-align:center;white-space:pre-line}
.dkerp .si>.inner{display:flex;flex-direction:column;padding-bottom:150px}
.dkerp .si figure{padding-top:150px}
#DevItem.dkerp .si figure.right{margin-left:auto}

/* kumdo */
.kumdo main{background:url(../sh_page/img/dev/kumdo_bg.jpg) no-repeat}
#DevItem.kumdo main h2{color:var(--item-pt)}
#DevItem.kumdo .ov{background:var(--item)}
#DevItem.kumdo .ov .flex{margin-bottom:0}
#DevItem.kumdo .label{background:var(--item-pt)}
#DevItem.kumdo .label:after{border-left:10px solid var(--item-pt)}
.kumdo .si h3{white-space:pre-line;line-height:1.3}
.kumdo .si h3 b{color:var(--item-pt)}
.kumdo .si .bg{background:#f2f2f2}
.kumdo .si figure{position:relative}
.kumdo .si figure.inner{padding:150px 0}
.kumdo .si .img01 figcaption{position:absolute;left:40%}
.kumdo .si .img02{display:flex;align-items:center;justify-content:space-between}
.kumdo .si .img03 figcaption{position:absolute;top:20%}
.kumdo .si .img04 h3{margin-bottom:70px}

/* atel  */
.atel main{background:url(../sh_page/img/dev/atel_bg.jpg) no-repeat}
.atel .ov ul{display:flex;justify-content:center;}
.atel .ov li{display:flex;align-items:center;justify-content:center;width:450px;height:450px;margin-left:-59px;border-radius:50%;border:3px solid var(--item);font-size:27px;font-weight:600;color:var(--item);background:#111}
.atel .ov li p{text-align:center;white-space:pre-line}
.atel .ov li.num2{clip-path:circle(94% at 97.5% 50%)}
.atel .ov li.last{color:#fff;background:var(--item)}
.atel .sg{background:#f2f2f2}
.atel .si h3{white-space:pre-line;line-height:1.3}
.atel .si .bg{background:#fbf6ff}
.atel .si .img01 figcaption{left:52%;padding-top:70px}
.atel .si .img02{text-align:right}
.atel .si .img02 figcaption{text-align:left;left:200px}
.atel .si .img03 figcaption{left:50%;padding-top:70px}
.atel figure{position:relative;padding:150px 0}
.atel figcaption{position:absolute}
.atel .up .img_wrap{text-align:center}

/* iby */
.iby main{background:url(../sh_page/img/dev/iby_bg.jpg) no-repeat}
.iby .ov{background:#111 !important}
.iby .sol{display:flex;align-items:center;justify-content:center}
.iby .sol .cir{display:flex;align-items:center;justify-content:center;width:235px;height:235px;border-radius:50%;border:2px solid var(--item);font-size:25px;font-weight:700;color:var(--item)}
.iby .sol .b_cir{display:flex;align-items:center;justify-content:center;width:300px;height:300px;border-radius:50%;background:var(--item)}
.iby .sol .line{position:relative;width:150px;margin:0 20px;color:var(--item)}
.iby .sol .line>p{width:100%;font-weight:700;text-align:center}
.iby .sol .line .dot{display:flex;align-items:center}
.iby .sol .line .dot p{width:100%;height:1px;border-bottom:3px dotted var(--item);font-size:20px}
.iby .wr ul{display:grid;grid-template-columns:repeat(3,1fr);gap:50px}
.iby .si h3{white-space:pre-line;line-height:1.3}
.iby .si figure{position:relative;padding:150px 0}
.iby .si figure .abs{position:absolute}
.iby .si .img01{text-align:center}
.iby .si .img01 figcaption{margin-bottom:80px}
.iby .si .img02 figcaption{margin-top:100px}
.iby .si .img03 figcaption{left:55%;margin-top:150px}
.iby .si .img04{display:flex;align-items:center;justify-content:space-between}
.iby .si .img06{position:absolute;top:14%;right:0}
.iby .si .img06 figcaption{padding-left:30%}
.iby .si .wrap{position:relative}
.iby .si .wrap figcaption{margin-bottom:50px}
.iby .si .bg{background:#f5f7fd}

/* adt */
.adt{overflow:hidden}
.adt main{background:url(../sh_page/img/dev/adt_bg.jpg) no-repeat}
.adt .ov ul{display:flex;text-align:center;justify-content:center;gap:50px;color:var(--item)}
.adt .ov ul .icon{display:flex;align-items:center;justify-content:center;width:230px;height:230px;margin-bottom:20px;border-radius:50%;background:var(--item)}
.adt .sg{background:#f2f2f2}
.adt .si h3{white-space:pre-line;line-height:1.3}
.adt .si_tit{margin-bottom:100px;padding-left:200px}
.adt figure{padding:150px 0}
.adt figure.bg{position:relative}
.adt figure.bg:after{position:absolute;z-index:-1;content:'';top:0;left:0;width:100%;height:1400px;background:#fef9eb}
.adt figure.bg img{display:block;margin:0 auto}
.adt figure.vw .si_tit{background:#fef9eb} 
.adt figure.vw .si_tit h3{padding:100px 0}
.adt figure.vw img{margin:-700px 0 0 250px}

/* auto */
.auto main{background:url(../sh_page/img/dev/auto_bg.jpg)}
.auto main h2{color:#fff !important}
.auto main h1{color:#fff !important}
.auto .ov .flex{margin-bottom:0 !important}
.auto .sg{background:#f2f2f2}
.auto figure{padding:150px 0;text-align:center}
.auto figure:nth-child(odd){background:#fdf4f4}
.auto figure img{border-radius:25px;border:5px solid #222}
.auto figure .si_tit{margin-bottom:50px}

/* jin */
.jin main{background:url(../sh_page/img/dev/jin_bg.jpg) no-repeat}
.jin .ov{background:var(--item-se) !important}
.jin .ov .ov_img{position:relative;left:50%;display:inline-flex;gap:50px;transform:translateX(-50%)}
.jin .ov .ov_img li{overflow:hidden;display:block;width:400px;height:400px;border-radius:50%;background-position:center;background-size:cover}
.jin .ov .ov_img .pnt{display:flex;justify-content:center;align-items:center;text-align:center;color:#fff;background:var(--item-pt)}
.jin .ov .ov_img .pnt dt{font-size:25px;font-weight:700}
.jin .ov .ov_img .pnt dd{font-size:20px;font-weight:500;opacity:.7;white-space:pre-line}
.jin .sg{background:#f2f2f2}
.jin .si h3{white-space:pre-line;line-height:1.3}
.jin .si img:not(.img04){border-radius:30px}
.jin .si .wrap{position:relative}
.jin .si .wrap:after{position:absolute;z-index:-1;content:'';top:0;right:0;width:50%;height:100%;background:#f2f8fe}
.jin .si .box02:after{position:absolute;z-index:-1;content:'';top:60%;right:0;width:100%;height:30%;background:#f2f8fe;transform:translateY(-50%)}
.jin .si .box02 .img03{display:block;margin-left:auto;margin-top:100px}
.jin .si .box03{position:relative}
.jin .si .box03 .si_tit{position:absolute;top:300px;right:0;margin-bottom:0px}
.jin .si figure{position:relative;padding:150px 0}
.jin .si .si_tit{margin-bottom:80px}
.jin .img_box{position:relative}
.jin .num_mean div{position:absolute;left:75%}
.jin .num_mean span{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:15px;font-weight:700;color:#fff;background:var(--item-pt)}
.jin .num_mean span~span{margin-left:10px}
.jin .num_mean dl{display:block}
.jin .num_mean dt{margin:10px 0 5px;font-size:20px;font-weight:700;color:#111}
.jin .num_mean dd{font-size:16px;opacity:.5;white-space:pre-line}
.jin .num_mean .num01{top:5%}
.jin .num_mean .num02{top:13%}
.jin .num_mean .num03{top:28%}
.jin .num_mean .num04{top:47%}
.jin .num_mean .num05{top:62%}
.jin .num_mean .num06{top:71%}
.jin .num_mean .num07{top:88%}
.jin .num_mean .num08{top:94%}

/* pmca */
.pmca main{background:url(../sh_page/img/dev/pmca_bg.jpg) no-repeat}
.pmca .ov .flex{margin-bottom:0 !important}
.pmca .sg{background:#f2f2f2}
.pmca .si figure{padding:150px 0}
.pmca .si .img02 .inner{display:flex;align-items:center;justify-content:space-between}
.pmca .si .img02{background:#fbf3f3}
.pmca .si .img03{position:relative}
.pmca .si .img03 .si_tit{position:absolute;top:150px;right:200px}

@media(hover:hover){
.ptf .prd_tab a:not(.on):hover{color:#111}
}

/* 반응형 [s] */
@media (max-width:1440px){
#DevItem{font-size:17px;font-weight:400}
#DevItem main{padding-top:110px}
#DevItem main h2{font-size:18px}
#DevItem main h1{font-size:45px}
#DevItem main img{width:80%}
#DevItem .inner{padding:0 20px}
#DevItem .float{padding:220px 0 50px}
#DevItem .flex{margin-bottom:50px}
#DevItem section .sec_tit{font-size:40px}
#DevItem section h2{margin-bottom:20px;font-size:30px}
#DevItem .path img{width:100%}
#DevItem .wr article h3{font-size:25px}
#DevItem .si figure h3{font-size:22px}
#DevItem .sg .list{padding-top:100px}
#DevItem .sg .c_wrap div p{font-size:25px}
#DevItem .sg .c_wrap .b_txt{font-size:60px}
#DevItem .sg .list .s_tit{margin-bottom:10px;font-size:16px;margin-bottom:20px}
#DevItem .si figure:nth-child(even){background:#f2f2f2}
#DevItem .label{padding:3px 5px;font-size:13px;font-weight:600}
#DevItem .si img{width:60%;margin-top:0 !important;padding:30px;border-radius:20px;border:1px solid #e1e1e1;background:#fff}
#DevItem .si figure{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:50px 20px}
#DevItem.dkerp .si figure.right{margin:0}

.cso24 .step img{width:100%}
.cso24 .si .wrap{padding:0}
.cso24 .si .wrap:after{display:none}
.cso24 .si .nobg figcaption{margin-bottom:0}
.cso24 .si .abs{position:relative;padding:50px 20px}
.cso24 .si .abs:after{display:none}
.cso24 .si .nobg figure:nth-child(odd){background:#f2f2f2}
#DevItem.cso24 .si .nobg figure:nth-child(even){background:#fff}
.dkerp .si>.inner{padding:0 !important}
.kumdo .si .img01 figcaption{position:unset}
.kumdo .si .img03 figcaption{position:unset}
.kumdo .si figure:nth-child(even){background:#fff !important}
.atel .ov li{width:300px;height:300px;font-size:23px}
.atel .ov li.num2{clip-path:circle(92% at 97.5% 50%)}
.atel figcaption{position:unset}
.atel .si .img01 figcaption{padding-top:0}
.atel .si figure:nth-child(even){background:#fff !important}
.atel .si .img03 figcaption{padding-top:0}
.iby .wr ul li img{width:100%}
.iby .si figure .abs{position:unset}
.iby .si figure:nth-child(even){background:#fff !important}
#DevItem.iby .si .img01{display:block}
#DevItem.iby .si .img01 img{width:100%;border:none;padding:0}
#DevItem.iby .si .wrap{padding:0}
.iby .si .img01 figcaption{margin-bottom:30px}
#DevItem.iby .si .img05{display:block;text-align:center}
#DevItem.iby .si .img05 img{width:40%;padding:0;border:none}
#DevItem.iby .si .img06{position:unset;background:#f5f7fd !important}
.iby .si .img06 figcaption{padding:0}
#DevItem.iby .si .img06 img{width:100%}
.iby .si .img02 figcaption{margin-top:0}
.iby .si .img03 figcaption{margin-top:0}
.iby .sol .cir{width:180px;height:180px;font-size:20px}
.iby .sol .line{font-size:15px}
.iby .sol .b_cir{width:250px;height:250px}
.iby .si .img06 .si_tit{margin-bottom:0}
.iby .si picture{text-align:right}
#DevItem.iby .si .flex{margin-bottom:0;text-align:left}

.adt .si_tit{margin-bottom:0;padding-left:0}
#DevItem.adt .si figure:nth-child(even){background:#fff}
.adt figure.vw .si_tit{background:none}
.adt figure.vw{background:#fef9eb}
.adt figure.bg img{margin:0}

.adt .ov ul{gap:30px}
.adt .ov ul .icon{width:200px;height:200px}
.adt .ov ul .icon img{width:50px}

.auto figure{text-align:left}
.auto figure .si_tit{margin-bottom:0}
#DevItem.auto .si figure:nth-child(even){background:#fff}

.jin .si .si_tit{margin-bottom:0}
.jin .si .wrap:after{display:none}
.jin .ov .ov_img li{width:300px;height:300px}
.jin .ov .ov_img .pnt dt{font-size:20px}
.jin .ov .ov_img .pnt dd{font-size:17px}
.jin .box01{flex-direction:column}
.jin .box01 .si_tit{text-align:center}
#DevItem.jin .box01 img{width:70%}
.jin .num_mean dt{font-size:17px}
.jin .num_mean dd{font-size:14px}
.jin .num_mean span{width:25px;height:25px;font-size:13px}
.jin .num_mean .num07{top:86%}
.jin .num_mean .num08{top:93%}
#DevItem.jin .si figure:nth-child(even){background:#fff}
.jin .si .box02{background:#f2f8fe}
.jin .si .box02:after{display:none}
#DevItem.jin .si .box02 .inner{width:100%;padding:0}
.jin .si .box02 .inner div{display:flex;gap:10px;margin-top:10px;padding:20px;border-radius:20px;border:1px solid #e1e1e1;background:#fff}
#DevItem.jin .si .box02 .inner div img{width:calc(50% - 5px);border-radius:0}
#DevItem.jin .si .box02 img{padding:0;border:none}
.jin .si .box03 .si_tit{position:unset}

#DevItem.pmca .si figure:nth-child(even){background:#fff}
.pmca .si .img03 .si_tit{position:unset}
#DevItem.pmca .si .img02 .inner{width:100%;padding:0;gap:20px}
}
@media (max-width:1024px){
#DevItem{font-size:16px}
#DevItem section{padding:80px 0}
#DevItem main{padding-top:70px}
#DevItem main h1{font-size:35px}
#DevItem main img{width:65%}
#DevItem section{padding:55px 0}
#DevItem section .sec_tit{width:100%;margin-bottom:10px;font-size:25px;text-align:center}
#DevItem section h2{font-size:25px;line-height:1.3}
#DevItem .wr article h3{font-size:20px;text-align:center}
#DevItem .wr article>p{text-align:center}
#DevItem .wr .sec_tit{margin-bottom:20px}
#DevItem .wr .roll{grid-template-columns:repeat(2,1fr)}
#DevItem .float{padding:185px 0 50px}
#DevItem .flex{display:block;text-align:center;margin-bottom:30px}
#DevItem .wr .roll .img_box{overflow-y:scroll}
#DevItem .wr .roll .img_box img{height:auto}
#DevItem .wr ul{margin-top:30px}
#DevItem .label{font-size:13px;font-weight:600}
#DevItem .wr .row2 li:nth-child(2n){margin-top:0}
#DevItem .si .sec_tit{margin-bottom:0;padding:40px 0}
#DevItem .sg .list{display:block;padding-top:0}
#DevItem .sg .list .font{margin-top:50px}
#DevItem .sg .c_wrap dl{height:auto;padding:20px 25px;border-radius:5px;gap:5px}
#DevItem .sg .typ3 .col1{height:auto;padding:20px 25px;border-radius:5px;gap:5px}
#DevItem .sg .typ3 div{display:flex;gap:15px}
#DevItem .sg .typ3 div dl{width:50%;height:auto;padding:20px 25px;border-radius:5px;gap:5px}
#DevItem .sg .typ3 div dl~dl{margin-top:0}
#DevItem .sg .list .s_tit{font-size:14px;margin-bottom:5px}
#DevItem .sg .c_wrap~.c_wrap{margin-top:20px;padding-top:20px;border-top:1px solid #e1e1e1}
#DevItem .sg .c_wrap .b_txt{font-size:50px}
#DevItem .si figure h3{font-size:18px}
#DevItem .si figure p{margin-top:5px;white-space:normal}

.dkerp .ov ul li{gap:10px}
.dkerp .ov ul li span{width:30px;height:30px;font-size:11px}
.dkerp .ov ul li img{width:100px}

.atel .ov li{font-size:18px}
.atel .up .img_wrap img{width:60%}

.iby .sol .line{width:110px}
.iby .sol .cir{width:150px;height:150px;font-size:16px}
.iby .sol .b_cir{width:200px;height:200px}
.iby .sol .b_cir img{width:100px}
#DevItem.iby .si .img06 img{width:90%}
.adt figure.vw img{margin:0}
.adt figure.vw .si_tit h3{padding:0;white-space:normal}
.adt .ov ul .icon{width:120px;height:120px;margin-bottom:10px;font-size:15px}
.adt .ov ul .icon img{width:35px}

.jin .ov .ov_img{gap:20px}
.jin .ov .ov_img li{width:250px;height:250px}
.jin .ov .ov_img li img{width:100%}
.jin .ov .ov_img .pnt dt{font-size:17px}
.jin .ov .ov_img .pnt dd{font-size:15px}

.ptf .prd_tab{margin-top:35px}
.ptf .prd_tab a{padding:10px 20px;font-size:16px}
}
@media (max-width:768px){
#DevItem{font-size:15px}
#DevItem main{padding-top:50px}
#DevItem main h2{font-size:16px}
#DevItem main h1{font-size:30px}
#DevItem section h2{font-size:22px}
#DevItem section .sec_tit{font-size:16px;font-weight:600}
#DevItem .path{padding:30px}
#DevItem .wr ul{margin-top:10px}
#DevItem .wr .sec_tit{margin-bottom:10px}
#DevItem .wr article h3{font-size:17px}
#DevItem .si .sec_tit{padding:20px 0}
#DevItem .sg .c_wrap .b_txt{font-size:40px}
#DevItem .sg .list .s_tit{font-size:13px}
#DevItem .sg .c_wrap{align-items:center}
#DevItem .sg .c_wrap div p{font-size:20px}
#DevItem .sg .c_wrap div span{font-size:12px}
#DevItem .sg .c_wrap dt{font-size:13px}
#DevItem .sg .c_wrap dl{padding:15px 20px !important}

.cso24 .step{display:block;text-align:center}
.cso24 .step img{width:70%;margin:0 auto;padding:50px;border-radius:10px;background:rgba(0,0,0,.2)}

.dkerp .ov ul li img{width:70px}
#DevItem .sg .typ3{flex-wrap:wrap}
#DevItem .sg .typ3 .col1{width:100%}
#DevItem .sg .typ3 div{width:100%}
#DevItem .sg .c_wrap{gap:5px}
#DevItem .sg .typ3 div{gap:5px}
#DevItem .si figure{flex-direction:column}
#DevItem .si img{width:100%;padding:20px}
#DevItem .si figure h3{margin-bottom:0}
#DevItem .si figure p{white-space:normal}
#DevItem figure{gap:20px;text-align:center}

.atel .ov ul{flex-direction:column}
.atel .ov li{width:100%;height:auto;margin-left:0;padding:15px 0;border:2px solid var(--item);border-radius:5px;font-size:15px}
.atel .ov li~li{margin-top:10px}
.atel .ov li.num2{clip-path:none}
.atel .ov li p{white-space:normal}

.iby .sol{flex-direction:column}
.iby .sol .cir{height:auto;padding:10px 0;border-radius:5px}
.iby .sol .line .dot{flex-direction:column}
.iby .sol .line .dot svg{transform:rotate(90deg)}
.iby .sol .line .dot p{width:1px;height:50px;border-left:3px dashed var(--item);border-bottom:none}
.iby .sol .line{margin:10px 0}
.iby .sol .line>p{margin-bottom:10px}
#DevItem.iby .si .img05 img{width:70%}
#DevItem.iby .si .img06 img{width:100%}
#DevItem.iby .si .flex{text-align:center}

.jin .ov .ov_img{display:grid;grid-template-columns:repeat(2,1fr);justify-items:center;gap:10px;padding:0 20px}
.jin .ov .ov_img li{width:100%;height:200px;border-radius:10px}
.jin .ov .ov_img .bg02{display:none}
.jin .ov .ov_img .pnt dd{white-space:normal}
.jin .num_mean{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 0;margin-top:30px}
.jin .num_mean div{position:unset}
.jin .num_mean dt{margin:5px 0 0}
.jin .num_mean dt{font-size:15px}
.jin .num_mean span{width:20px;height:20px;font-size:11px;line-height:1}
.jin .num_mean dd{font-size:13px;line-height:1.3}

.pmca .si .img02 .inner{flex-direction:column}
.ptf .prd_tab a{padding:8px 20px;font-size:14px}
}
@media (max-width:480px){
#DevItem{font-size:14px;font-weight:400}
#DevItem main h2{margin-bottom:0}
#DevItem main h1{font-size:25px}
#DevItem main img{width:90%}
#DevItem main h2{font-size:14px}
#DevItem section h2{font-size:18px}
#DevItem .wr article h3{font-size:16px}
#DevItem .wr .roll{gap:15px}
#DevItem .wr .roll .img_box{height:300px}
#DevItem .wr .row2{grid-template-columns:repeat(1,1fr)}
#DevItem .label{font-size:12px}
#DevItem .wr .row2{gap:15px}
#DevItem .wr article~article{margin-top:50px}
#DevItem .sg .c_wrap{gap:5px}
#DevItem .sg .list .s_tit{font-size:12px}
#DevItem .sg .c_wrap dt{font-size:12px}
#DevItem .sg .list{padding-top:0}
#DevItem .sg .c_wrap .b_txt{font-size:30px}
#DevItem .sg .c_wrap div p{font-size:17px}
#DevItem .si img{padding:10px}

.cso24 .step img{width:100%}
.dkerp .ov ul{flex-direction:column;align-items:center;gap:10px}
.dkerp .ov ul li{width:100%;padding:30px;border-radius:10px;background:rgba(0,0,0,.1)}
.dkerp .ov ul li p{white-space:normal}
.dkerp .ov ul li span{display:none}

#DevItem .si figure h3{font-size:16px}
#DevItem .si img{border-radius:10px}

.atel .up .img_wrap img{width:100%}
.iby .sol .b_cir{width:180px;height:180px}
.iby .sol .b_cir img{width:80px}
.iby .wr ul{grid-template-columns:repeat(1,1fr)}
.iby .si .wrap figcaption{margin-bottom:30px}
.iby .sol .line .dot p{height:20px;border-left:2px dashed var(--item)}
.iby .sol .cir{font-size:15px}
.iby .sol .line>p{margin-bottom:5px}

.adt .ov ul{display:grid;grid-template-columns:repeat(2,1fr)}
.adt .ov ul .icon{width:100px;height:100px;margin:0 auto 10px}
.adt .ov ul .icon img{width:30px}

#DevItem.jin .box01 img{width:100%}
#DevItem .si figure h3{white-space:normal}

.jin .ov .ov_img .pnt dt{font-size:15px}
.jin .ov .ov_img .pnt dd{padding:0 10px;font-size:14px;font-weight:500}
.jin .si .box02 .inner div{flex-direction:column}
#DevItem.jin .si .box02 .inner div img{width:100%}
.jin .ov .ov_img li{height:155px}
.ptf .prd_tab a{padding:6px 15px}
}
@media (max-width:390px){
#DevItem{font-size:13px}
#DevItem main h2{font-size:13px}
#DevItem main h1{font-size:22px}
#DevItem section .sec_tit{font-size:13px}
#DevItem section h2{font-size:16px}
#DevItem .path{padding:10px}
#DevItem .wr article h3{font-size:14px}
#DevItem .wr .roll .img_box{height:250px}
#DevItem .label{padding:0 5px}
#DevItem .si .sec_tit{padding:20px 0}
#DevItem .sg .c_wrap .b_txt{display:none}
#DevItem .si figure h3{font-size:15px}

.cso24 .step img{padding:30px}
.dkerp .ov ul li{padding:20px}
.atel .ov li{padding:10px 0;font-size:14px}
}
/* 반응형 [e] */


/* 채용 */
#Recruit h2{font-size:38px;font-weight:700;color:#111;white-space:pre-line}
#Recruit .inner{padding:10% 0}
#Recruit .work_area{margin-top:100px;padding:10% 0;background:#111}
#Recruit .work_area ul{position:relative}
#Recruit .work_area li{display:flex;height:100vh;align-items:center}
#Recruit .work_area p{font-size:38px;font-weight:300;color:#fff;text-align:center}
#Recruit .work_area dl{margin-left:auto;padding-right:12%}
#Recruit .work_area dt{margin-bottom:20px;font-size:40px;font-weight:700;color:#fff;line-height:1.2;white-space:pre-line}
#Recruit .work_area dd{font-size:20px;color:#fff;white-space:pre-line}
#Recruit .work_area .img_inner{position:sticky;top:0;z-index:0}
#Recruit .work_area .img_box{position:relative;width:100%;height:100vh}
#Recruit .work_area .img_box img{overflow:hidden;position:absolute;top:50%;left:50%;border-radius:20px;transform:translate(-50%, -50%)}
#Recruit .welfare h2{margin-bottom:150px;text-align:center}
#Recruit .welfare ul{display:grid;grid-template-columns:repeat(3,1fr);gap:70px 0;padding:0 80px}
#Recruit .welfare ul li{text-align:center}
#Recruit .welfare dt{margin-top:30px;font-size:22px;font-weight:700;color:#111}
#Recruit .type h2{position:sticky;top:100px;height:100%;padding-bottom:100px}
#Recruit .type{display:flex;justify-content:space-between}
#Recruit .type .list{display:grid;grid-template-columns:repeat(2,1fr);gap:40px;width:50%}
#Recruit .list dl{display:flex;flex-direction:column;justify-content:space-between;height:325px;border-radius:20px;padding:50px 40px;background:#f2f2f2;transition:all .3s}
#Recruit .list dl.on{background:var(--primary)}
#Recruit .list dl.on dt{color:#fff}
#Recruit .list dl.on dd{color:#fff}
#Recruit .list dl:nth-child(even){transform:translateY(150px)}
#Recruit .list dt{font-size:22px;font-weight:700;color:#111;white-space:pre-line;transition:all .3s}
#Recruit .list dd{font-size:17px;color:#777;white-space:pre-line;transition:all .3s}
#Recruit .evnm{position:relative;color:#fff}
#Recruit .evnm h2{color:#fff}
#Recruit .evnm a{display:flex;width:100%;justify-content:center;align-items:center;height:150px;border:1px solid #fff;border-radius:10px;font-size:30px;color:#fff;transition:all .3s}
#Recruit .evnm ul{position:relative;width:100%}
#Recruit .evnm li{width:100%;height:100vh;background-image:url(../sh_page/img/recruit_view01.jpg);background-size:cover;background-position:center}
#Recruit .evnm li.bg02{background-image:url(../sh_page/img/recruit_view02.jpg)}
#Recruit .evnm li.bg03{background-image:url(../sh_page/img/recruit_view03.jpg)}
#Recruit .evnm li.bg04{background-image:url(../sh_page/img/recruit_view04.jpg)}
#Recruit .evnm li.bg05{background-image:url(../sh_page/img/recruit_view05.jpg)}
#Recruit .evnm li.bg06{background-image:url(../sh_page/img/recruit_view06.jpg)}
#Recruit .evnm li p{max-width:var(--mainsize);width:100%;margin:0 auto;padding-top:13.5%;font-size:25px;font-weight:600;opacity:.5}
#Recruit .evnm li p:before{display:inline-block;content:'';width:4px;height:4px;margin-right:15px;border-radius:50px;opacity:.5;vertical-align:8px;background:#fff}
#Recruit .evnm .txt{position:absolute;bottom:0;left:50%;z-index:10;display:flex;flex-direction:column;justify-content:space-between;max-width:var(--mainsize);width:100%;height:100vh;transform:translateX(-50%)}


/* 문의 */
.wrt_form .inner{display:flex}
.wrt_form .b_tit{position:sticky;top:150px;width:50%;height:100%;margin:0}
.wrt_form .half_area{width:50%;margin:250px 0 200px}
.wrt_form .info p{margin-bottom:80px;font-size:22px;font-weight:700;color:#111;white-space:pre-line}
#req .info .num{display:grid;grid-template-columns:repeat(2,1fr);gap:50px}
#req .info .num dl{position:relative;padding-left:23px}
#req .info .num dl:after{position:absolute;content:'';top:9px;left:0;width:3px;height:16px;background:#111}
#req .info dt{margin-bottom:10px;font-size:22px;font-weight:700;color:#111}
#req .info dd{font-size:16px;color:#111}

.wrt_form .form{margin-top:300px}
.wrt_form .form>span{display:block;font-size:15px;font-weight:700;color:#aaa;text-align:right}
.wrt_form .form>div+div{margin-top:80px}
.wrt_form .form h2{margin-bottom:30px;font-size:22px;font-weight:700;color:#111}
.wrt_form .form .s_tit{margin-bottom:5px;font-size:17px;font-weight:700;color:#111}
.wrt_form .form .pjt>div+div{margin-top:50px}
.wrt_form .form .sh_select{width:100%;padding:15px 25px;border:1px solid #e1e1e1;border-radius:50px;outline:none;font-size:15px;color:#111;cursor:pointer;appearance:none;background:url(/sh_page/img/request_down.png) calc(100% - 30px) center no-repeat;transition:all .3s}

.wrt_form .form .bsc{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}
.wrt_form .form .bsc input{width:100%;padding:15px 8px;border:none;border-radius:0 !important;border-bottom:1px solid #e1e1e1;font-size:15px;font-weight:400;color:#777}
.wrt_form .form .bsc input[type=text]:focus{border:none !important;border-bottom:1px solid #111 !important}

.wrt_form .form .chk{display:flex;flex-wrap:wrap;gap:5px}
.wrt_form .form .chk input{display:none}
.wrt_form .form .chk .ck_btn{display:inline-block;padding:10px 25px;border:1px solid #ccc;border-radius:50px;background-color:#fff;cursor:pointer;font-size:16px;font-weight:700;color:#333;text-align:center;transition:all .3s}
.wrt_form .form .chk input:checked + .ck_btn{background-color:black;color:white;border-color:black}
.wrt_form .form input[type=text]:focus, .wrt_form input[type=password]:focus, .wrt_form input[type=submit]:focus, .wrt_form select:focus, .wrt_form textarea:focus{outline:none;border:1px solid #111 !important;box-shadow:none !important}

.wrt_form .form .row_2 ul{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}
.wrt_form .form .row_2>ul li{width:100%}

.wrt_form .form .txt{width:100%;height:200px;padding:20px;border:1px solid #e1e1e1;border-radius:10px}
.wrt_form .form .txt:focus{box-shadow:none}

.wrt_form .file{margin-top:10px;font-size:14px}
.wrt_form .file .box{display:flex;align-items:center;gap:8px;margin-bottom:5px;border-radius:5px;background:#f2f2f2}
.wrt_form .file p{display:flex;align-items:center;gap:3px}
.material-symbols-outlined{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 15;font-size:20px;color:#111}
.wrt_form .file input[type="file"]{display:none}
.wrt_form .file .custom{display:flex;align-items:center;justify-content:center;gap:5px;width:120px;height:40px;cursor:pointer;background:#777;color:#fff;border-radius:4px;transition:all .3s}
.wrt_form .file .custom svg{width:17px}
.wrt_form .file .custom:hover{background:#111}

#req .met_on{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:13px;height:13px;border:1px solid #ccc;border-radius:50%;outline:none;cursor:pointer}
#req .form .met_on:checked{background-color:#111;border:3px solid #fff;box-shadow:0 0 0 1px #111}
.wrt_form .sh_ck{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:13px;height:13px;border:1px solid #ccc;border-radius:2px;outline:none;cursor:pointer}
.wrt_form .sh_ck:checked{background-color:#111;border:3px solid #fff;box-shadow:0 0 0 1px #ccc}

#req .meet{display:flex;gap:20px}
#req .meet_plus{display:none}
#req .meet_plus .sh_select{background-color:#fff}
#req .meet_plus{margin-top:20px !important;padding:30px;border-radius:10px;background:#f2f2f2}
#req .meet_plus>p{font-size:15px;color:#111}
#req .meet_plus>p:before{display:inline-block;content:'';width:3px;height:3px;margin-right:10px;vertical-align:3px;background:#111}
#req .meet_plus>div+div{margin-top:30px}
#req .adrs{display:flex;gap:10px;margin-top:10px}
#req .adrs .frm_address[type=text]:focus{border:none !important;border-bottom:1px solid #111 !important} 
#req .frm_address{width:33.33%;padding:15px 20px;border:none;border-radius:0;border-bottom:1px solid #e1e1e1;background:none}
#req .adrs_sch input{width:200px;height:40px;border:1px solid #e1e1e1;border-radius:4px;outline:none}
#req .zip_btn{width:110px;height:40px;border:none;border-radius:4px;font-size:14px;color:#fff;background-color:#777;transition:all .3s}
#req .map_link{display:flex;gap:10px;margin-top:15px}
#req .map_link a{display:flex;align-items:center;gap:10px;padding:10px 15px;border-radius:7px;font-size:15px;font-weight:600;color:#111;background:#fff;transition:all .3s}


.wrt_form .btn_area{margin-top:70px;text-align:left}
.wrt_form .btn_area button{width:200px;height:60px;border:none;border-radius:50px;font-size:18px;font-weight:700;color:#fff;background:var(--primary);transition:all .3s}
.wrt_form .btn_area .pvc_ck{margin-bottom:10px;font-size:15px;font-weight:500;color:#aaa}
.wrt_form .btn_area .pvc_ck a{color:#777}

.wrt_form .down{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:200px;height:60px;border:none;border:2px solid var(--primary);border-radius:50px;font-size:18px;font-weight:700;color:var(--primary);background:#fff;transition:all .3s}


/* 채용 */
#app .b_tit p{display:inline-flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:20px}
#app .b_tit p span{display:flex;align-items:center;gap:3px;font-weight:500;color:#333}
#app .b_tit p span svg{width:15px}
#app .form .row_2 .chk{gap:10px}
#app .form .chk .ck_btn{width:100%;padding:12px 25px}
#app .form .app_txt{margin-top:30px}
#app .form .file button{display:flex;width:15px;height:15px;align-items:center;justify-content:center;border:none;border-radius:50px;background:#ddd}
#app .form .file button span{font-size:13px;color:#333}
#app .form #file-name{margin-top:15px}
#app .form .file-item{display:flex;align-items:center;gap:10px}
#app .form .file-item+.file-item{margin-top:5px;padding-top:5px;border-top:1px solid #e1e1e1}

@media(hover:hover){
#About .loc .way a:hover{background:#333}

#bsn figure .bg ul li:hover{opacity:1}
#bsn .bnr_link a:hover{color:var(--primary);background:#fff}

#Work .btn_area button:hover svg{color:var(--primary)}
#Work .btn_area button:hover p{color:var(--primary)}

#Recruit .evnm a:hover{border:1px solid #fff;color:#111;background:#fff}

.wrt_form .btn_area button:hover{background:#111}
.wrt_form .form .ck_btn:hover{background-color:#f2f2f2}
.wrt_form .down:hover{border:2px solid #111;color:#111}

#req .zip_btn:hover{background:#111}
}

/* 반응형 [s] */
@media (max-width:1024px){
.pagecommon{margin-top:80px}
.pagecommon .inner{padding:0 15px}
#About h1{top:100px;text-align:center}
#About h2{font-size:30px}
#About .bg{width:80%;height:250px}
#About .box{padding-top:200px}
#About .cmp .info dl{font-size:15px}
#About .box .r_cont{width:60%}
#About .cmp .count dt span{font-size:45px}
#About .cmp .count dd{font-size:15px}
#About .bsn .tabs span{font-size:22px}
#About .bsn .cmt{font-size:15px}
#About .bsn .cmt h3{font-size:22px}
#About .his .year{font-size:25px}
#About .his ul li{font-size:15px}
#About .his .year svg{width:15px}
#About .loc .add span{font-size:15px}
#About .loc .add p{font-size:22px}
#About .loc .way div>p{font-size:18px}
#About .loc .way li{font-size:15px}
#About .loc .way .map_link{flex-wrap:wrap;align-items:flex-start}
#About .loc .way .map_link a{font-size:14px}
#About #award p{font-size:16px}

#bsn .tit{padding-top:0}
#bsn .bsn_cont{margin-top:100px}
#bsn figure .bg ul{font-size:28px}
#bsn figure .c_tit h2{font-size:28px}
#bsn .btm_cont{padding:130px 15px 50px}
#bsn .merit h2{font-size:25px}
#bsn .merit ul dd{font-size:14px;line-height:1.5}
#bsn .bnr_link{height:300px}
#bsn .bnr_link p{font-size:27px}
#bsn .bnr_link a{width:215px;height:65px;font-size:17px}

#Bnf{padding-bottom:50px}
#Bnf .cont_area{padding:50px 15px}
#Bnf .box+.box{margin-top:100px}
#Bnf .box h2{font-size:25px}
#Bnf .box li{padding:30px}
#Bnf .box h3{font-size:16px;white-space:normal}
#Bnf .box li p{white-space:normal}
#Bnf .cont01 ul{grid-template-columns:repeat(2,1fr)}

#Work{padding-top:0}
#Work h1{text-align:center}
#Work .portfolio{margin-top:40px}
#Work .portfolio a p{bottom:30px;left:30px;font-size:17px}
#Work .m_view img{width:100%}
#Work .portfolio a .subject{bottom:30px;left:30px;font-size:16px}
#Work .m_view h2{margin-bottom:40px;font-size:30px}

#Recruit h1{text-align:center}
#Recruit h2{font-size:30px}
#Recruit .inner{padding:10% 15px}
#Recruit .work_area .img_inner{padding:0 10%}
#Recruit .work_area .img_box img{width:100%}
#Recruit .work_area p{font-size:30px}
#Recruit .work_area dt{font-size:30px}
#Recruit .welfare h2{margin-bottom:100px}
#Recruit .welfare dt{font-size:18px}
#Recruit .type .list{width:65%}
#Recruit .list dl{height:270px;padding:40px}
#Recruit .list dd{font-size:15px}
#Recruit .list dt{font-size:20px}
#Recruit .evnm a{height:120px;font-size:22px}
#Recruit .evnm li p{padding-top:15%;padding-left:15px;font-size:22px}

.wrt_form .inner{display:block}
.wrt_form .b_tit{position:unset;width:100%;text-align:center}
.wrt_form .half_area{width:100%;margin:100px 0}
.wrt_form .info{text-align:center}
.wrt_form .info p{margin-bottom:80px;white-space:normal}
#req .info dt{font-size:20px}
#req .info .num dl{padding-left:0}
#req .info .num dl:after{display:none}
.wrt_form .form{margin-top:150px}
.wrt_form .btn_area{text-align:center}

#app .b_tit p{justify-content:center}

#DevItem{margin-top:0}
#Devp .portfolio{display:flex;flex-wrap:wrap;gap:20px;margin-top:40px}
#Devp ul.portfolio li{width:calc(50% - 10px)}
#Devp ul.portfolio li a{height:280px;padding:45px 30px 30px}
#Devp ul.portfolio li a .wrap div>span{font-size:16px}
#Devp ul.portfolio li a p{margin-top:10px;font-size:23px}
}
@media (max-width:768px){
.pagecommon{margin-top:40px}
.pagecommon .pl{white-space:normal}
#About h1{padding:0 15px 30px}
#About h2{margin-bottom:50px;font-size:25px;text-align:center;white-space:normal}
#About .box{display:block;padding-top:160px}
#About .s_tit{text-align:center}
#About .box .r_cont{width:100%}
#About .cmp .info dt{width:80px;height:40px}
#About .cmp .info dl+dl{margin-top:12px}
#About .cmp .count dt{font-size:15px}
#About .cmp .count dt span{font-size:28px}
#About .bsn .tabs{display:flex;margin-top:70px;padding-bottom:20px}
#About .bsn .tabs span.on{padding-left:0}
#About .bsn .tabs span{font-size:17px;text-align:center}
#About .bsn .tabs span+span{margin-top:0}
#About .bsn .cmt h3{font-size:20px}
#About .his h2{position:unset}
#About .his .year{font-size:22px}
#About .loc .add{margin:50px 0 30px}
#About .loc .add p{margin-top:10px;font-size:18px}
#About .loc .add span{padding:7px 20px}
#About .loc .way{display:block}
#About .loc .way>div:nth-child(-n+2){margin-bottom:50px;padding-bottom:50px}
#About .loc .way>div:nth-child(3){margin-bottom:50px;padding-bottom:50px;border-bottom:1px solid rgba(255,255,255,.15)}
#About .loc .way a{width:195px;font-size:15px}
#About .loc .way .map_link a{font-size:13px}
#About #award ul{grid-template-columns:repeat(2,1fr)}

#bsn .tit{font-size:17px}
#bsn h1{margin-bottom:20px}
#bsn figure{display:block}
#bsn figure>*{width:100%;height:50vh;padding:7%}
#bsn figure .c_tit p{font-size:15px;white-space:normal}
#bsn figure .bg ul{text-align:left !important}
#bsn figure.flex .c_tit{text-align:left !important}
#bsn figure .c_tit h2{font-size:24px}
#bsn .merit h2{margin-bottom:35px}
#bsn .merit ul li img{width:70px}
#bsn .merit ul dt{font-size:18px;line-height:1.3}
#bsn .bnr_link{flex-direction:column;justify-content:center;gap:20px;height:250px;margin-top:50px;border-radius:10px}
#bsn .bnr_link p{font-size:22px}
#bsn .bnr_link a{width:190px;height:50px;font-size:16px}
#bsn .bsn_cont{margin-top:50px}

#Bnf .box h2{font-size:22px}
#Bnf .cont01 ul{gap:10px}
#Bnf .cont02 ul{grid-template-columns:repeat(2,1fr);gap:10px}
#Bnf .cont02 ul li:last-child{grid-column:1/-1}

#Work .portfolio a p{left:25px;bottom:20px;font-size:15px}
#Work .btn_area p{font-size:16px}
#Work .btn_area span{font-size:13px}
#Work .m_view{margin-top:50px;padding:100px 30px 50px}
#Work .portfolio a .subject{bottom:20px;left:20px}
#Work .m_view h2{margin-bottom:35px;font-size:25px}

#Recruit .inner{padding:10% 15px}
#Recruit h2{font-size:25px}
#Recruit .work_area{margin-top:50px}
#Recruit .work_area p{font-size:25px}
#Recruit .work_area dt{font-size:25px}
#Recruit .work_area dd{font-size:15px}
#Recruit .welfare ul{padding:0}
#Recruit .welfare dt{font-size:16px}
#Recruit .welfare img{width:80px}
#Recruit .type .list{display:block}
#Recruit .list dl:nth-child(even){transform:translateY(0)}
#Recruit .list dl{height:150px;padding:30px;border-radius:10px}
#Recruit .list dl+dl{margin-top:20px}
#Recruit .list dt{font-size:18px;white-space:normal}
#Recruit .list dd{white-space:normal}
#Recruit .evnm a{height:100px;font-size:20px}
#Recruit .evnm li{height:50vh}
#Recruit .evnm li p{font-size:20px}
#Recruit .evnm .txt{height:50vh;padding:10% 15px}
#Recruit .evnm a{height:55px;font-size:17px}

.wrt_form .half_area{margin:20px 0 100px}
.wrt_form .info p{margin-bottom:70px;font-size:17px;font-weight:400;color:#777}
#req .info dt{margin-bottom:5px;font-size:17px}
#req .info dd{font-size:15px}
#req .info .num{gap:10px}
#req .info .num dl{padding:40px 0;border-radius:10px;background:#f2f2f2}
#req .meet_plus{padding:20px}
#req .meet_plus>p{font-size:15px}
.wrt_form .form{margin-top:70px}
.wrt_form .form h2{font-size:20px}
.wrt_form .form .pjt>div+div{margin-top:30px}
.wrt_form .form .s_tit{font-size:16px}
.wrt_form .form .bsc input{font-size:14px}
.wrt_form .form .chk .ck_btn{font-size:14px}
.wrt_form .form .sh_select{font-size:14px}
.wrt_form .form .row_2 ul{gap:15px}
.wrt_form .btn_area button{width:140px;height:45px;font-size:15px}
.wrt_form .down{font-size:16px}
.wrt_form .form>div+div{margin-top:50px}
.wrt_form .down{width:155px;height:45px;font-size:15px}

#app .b_tit p{margin-top:10px;padding:10px 20px;border-radius:50px;font-size:14px;background:#f2f2f2}

#Devp ul.portfolio li a{height:245px;padding:25px;color:#fff}
#Devp ul.portfolio li a .link{width:30px;height:30px;margin-left:auto;padding:0;font-size:0;color:#111;background:#fff}
#Devp ul.portfolio li a .link svg{width:14px}
#Devp ul.portfolio li a .thumb{position:absolute;left:0;top:0;width:100%;height:100%}
#Devp ul.portfolio li a .thumb img{top:auto;left:auto;opacity:1;transform:none;filter:blur(0);width:100%;height:100%;object-fit:cover}
#Devp ul.portfolio li a .wrap{justify-content: flex-end}
#Devp ul.portfolio li a .wrap div>span{opacity:.7;font-size:13px;line-height:1.45;white-space:normal;display:block}
#Devp ul.portfolio li a p{font-size:18px}
#Devp ul.portfolio li a:hover .thumb img{transform:none}
}
@media (max-width:550px){
.wrt_form .form .row_2 ul{display:block}
.wrt_form .form .row_2 ul li+li{margin-top:10px}
#app .form .row_2 .chk{display:grid;grid-template-columns:repeat(2,1fr)}
#app .form .row_2 .chk li+li{margin-top:0}

.wrt_form .file{position:relative}
.wrt_form .file .box{display:block;background:none}
.wrt_form .file p{margin-top:5px;padding:10px;border-radius:5px;background:#f2f2f2}
}
@media (max-width:480px){
.pagecommon{font-size:14px}
#About h2{margin-bottom:30px;font-size:22px}
#About .box{padding-top:100px}
#About .cmp .info dt{width:70px;height:35px;font-size:13px}
#About .cmp .info dd{width:70%;margin-top:5px;font-size:14px}
#About .cmp .count{gap:25px;margin-top:40px}
#About .cmp .count dt span{font-size:23px}
#About .cmp .count dd{font-size:14px}
#About .bsn .tabs{flex-wrap:wrap;justify-content:center;gap:10px}
#About .bsn .tabs span{width:auto;font-size:15px}
#About .bsn .cmt{margin-top:20px;padding:0 20px}
#About .bsn .cmt h3{font-size:18px}
#About .bsn .cmt p{line-height:1.5}
#About .bsn .cmt span{padding:3px 15px}
#About .his ul{padding:30px 20px}
#About .his ul li em{width:80px}
#About .his ul li p{width:80%}
#About .loc .add p{font-size:16px}
#About .loc .way div>p{font-size:16px}
#About .loc .way>div:nth-child(-n+2){margin-bottom:30px;padding-bottom:30px}
#About .loc .way>div:nth-child(3){margin-bottom:30px;padding-bottom:30px}
#About .loc .way a{font-size:14px}
#About .loc .way a img{width:25px}
#About .loc .way p img{width:25px}
#About .loc .way li:before{margin-right:7px}
#About #award p{font-size:14px}

#bsn .tit{font-size:15px}
#bsn .bsn_cont{margin-top:40px}
#bsn figure>*{padding:10%}
#bsn figure .bg ul{font-size:22px}
#bsn figure .c_tit h2{margin:0 0 20px;font-size:22px}
#bsn figure .c_tit p{font-size:15px}
#bsn .btm_cont{padding:70px 15px 0}
#bsn .merit h2{font-size:25px}
#bsn .merit ul{display:flex;flex-direction:column;border-radius:0}
#bsn .merit ul li{padding:10%}
#bsn .merit ul li:nth-child(2){order:2}
#bsn .merit ul li:nth-child(4){order:0}
#bsn .merit ul dt{font-size:16px}
#bsn .bnr_link{height:210px;margin-top:0;margin-bottom:30px}
#bsn .bnr_link p{font-size:18px}
#bsn .bnr_link a{width:180px;height:45px;font-size:15px}

#Bnf .box ul{grid-template-columns:repeat(1,1fr) !important}
#Bnf .box .s_tit{margin-bottom:20px}
#Bnf .box li{padding:10px;border-radius:5px}
#Bnf .box h2{font-size:18px}
#Bnf .box h3{font-size:15px;margin-bottom:0}
#Bnf .box+.box{margin-top:80px}

#Work .portfolio{margin-top:20px}
#Work .m_view{padding:80px 0 30px}
#Work .portfolio a .subject{left:15px;bottom:15px;font-size:14px}
#Work .btn_area p{margin:0;font-size:15px}
#Work .m_view h2{margin-bottom:25px;font-size:20px}

#Recruit h2{font-size:22px}
#Recruit .work_area{margin-top:50px;padding:15% 0}
#Recruit .work_area dl{margin:0 auto;padding-right:0;text-align:center}
#Recruit .work_area dt{margin-bottom:7px;font-size:23px;white-space:normal}
#Recruit .welfare h2{margin-bottom:50px}
#Recruit .welfare ul{grid-template-columns:repeat(2,1fr)}
#Recruit .type{display:block}
#Recruit .type h2{position:unset;padding-bottom:30px;text-align:center}
#Recruit .type .list{width:100%}
#Recruit .evnm h2{text-align:center}
#Recruit .evnm li p:before{margin-right:10px;vertical-align:5px}
#Recruit .evnm a{height:auto;padding:15px;font-size:16px;text-align:center}
#Recruit .evnm li p{padding-top:18%;font-size:18px;text-align:center}
#Recruit .evnm li p:before{display:none}
#Recruit .welfare dt{font-size:15px}
#Recruit .list dl{padding:20px}
#Recruit .list dt{margin-bottom:5px;font-size:15px}
#Recruit .list dd{font-size:14px}

#app .b_tit p{border-radius:5px}
.wrt_form .info p{margin-bottom:30px;font-size:15px}
#req .info dt{margin-bottom:0;font-size:16px}
#req .info dd{font-size:14px}
#req .info .num dl{padding:30px 10px}
#req .adrs{display:block}
#req .adrs input{width:100%}
.wrt_form .btn_area button{width:160px;height:50px}
.wrt_form .form{margin-top:50px}
.wrt_form .form h2{margin-bottom:10px;font-size:17px}
.wrt_form .form .bsc{gap:10px}
#req .adrs_sch input{width:160px}
#req .map_link a{font-size:14px;line-height:1.2}
#req .meet_plus>p{font-size:14px}
.wrt_form .btn_area button{font-size:15px}
.wrt_form .down{width:160px;height:50px}
.wrt_form .form>span{font-size:13px}
.wrt_form .form .s_tit{font-size:15px}

#Devp .portfolio{margin-top:20px}
#Devp ul.portfolio li{width:100%}
#Devp ul.portfolio li a{height:auto;padding:20px}
#Devp ul.portfolio li a .wrap{gap:20px}
#Devp ul.portfolio li a .wrap div>span{font-size:14px}
#Devp .portfolio{gap:10px}
}
@media (max-width:390px){
#About .cmp .info dl{font-size:14px}
#About .his ul li{font-size:14px}
#About .bsn .cmt{padding:0;font-size:14px}
#About .loc .add span{font-size:14px}
#About .loc .img_area{display:block}
#About .loc .img_area li+li{margin-top:10px}
#About .loc .way li{font-size:14px}
#About .loc .way div:last-child{border-radius:10px}
#About .loc .way li:before{margin-right:8px;vertical-align:3px}

#bsn .tit{padding:0 15px}
#bsn figure .c_tit h2{font-size:20px}
#bsn .merit h2{margin-bottom:30px;font-size:20px}
#bsn .bnr_link{height:200px}
#bsn .bnr_link a{width:160px;font-size:14px}
#bsn .merit ul li img{width:60px}
#bsn .bnr_link p{font-size:16px}

#Work .portfolio{display:block}

#Recruit h2{font-size:20px}
#Recruit .work_area p{font-size:22px}
#Recruit .work_area dt{font-size:20px}
#Recruit .welfare ul{gap:30px}
#Recruit .welfare img{width:65px}
#Recruit .list dl{height:auto}
#Recruit .list dl+dl{margin-top:10px}
#Recruit .evnm a{font-size:15px}

.wrt_form .btn_area button{font-size:14px}
.wrt_form .form .bsc{gap:10px}
.wrt_form .file .custom{width:190px}
.wrt_form .form>div+div{margin-top:30px}
.wrt_form .down{font-size:14px}

#app .b_tit p{gap:0;font-size:13px}
#Devp ul.portfolio li a{padding:20px}
}
/* 반응형 [e] */


/* ==================================== 포트폴리오 */
#shPortfolio{line-height:1.8}
#shPortfolio.main{padding:100px 0;background:#eff1f4}
#shPortfolio.main .tit{margin-bottom:60px;text-align:center;font-weight:700}
#shPortfolio.main .tit span{font-size:20px;color:var(--primary)}
#shPortfolio.main .tit p{font-size:32px;line-height:1.4;color:#111;white-space:pre-line;word-break:keep-all}
#shPortfolio .stit{display:flex;align-items:center;max-width:var(--mainsize);margin:0 auto 15px;font-size:28px;font-weight:700;color:#111}
#shPortfolio .sch_area{padding-bottom:35px}
#shPortfolio .sch_area h1{text-align:center}
#shPortfolio .sch_area .tit{margin:40px auto 30px;font-size:40px;font-weight:700;color:var(--dark);text-align:center}
#shPortfolio .sch_area .kwd{display:flex;justify-content:center;flex-wrap:wrap;max-width:var(--mainsize);margin:0 auto}
#shPortfolio .sch_area .kwd a{height:40px;margin:4px;padding:.0 18px;border:1px solid #f5f5f5;font-size:15px;font-weight:500;color:#111;letter-spacing:-.2px;line-height:40px;border-radius:30px;background:#f5f5f5;transition:all .2s}
#shPortfolio .sch_area .kwd a.on{border-color:var(--primary);color:#fff;background:var(--primary)}
#shPortfolio .grid{display:grid;grid-template-columns:repeat(4, 1fr);;column-gap:30px;row-gap:unset;grid-auto-rows:10px;max-width:var(--mainsize);margin:0 auto}
#shPortfolio .grid li{overflow:hidden;position:relative;width:auto;margin-bottom:0;border-radius:12px;border:1px solid #e1e1e1;background:#fff;transition:all .25s}
#shPortfolio .grid li .cate{display:block;position:absolute;left:12px;top:12px;z-index:1;height:26px;padding:0 14px;border-radius:20px;font-size:13px;font-weight:600;color:#fff;line-height:27px;background:rgba(0,0,0,.65)}
#shPortfolio .grid li img{position:relative;width:100%;transition:all .25s}
#shPortfolio .grid li .mask{opacity:0;display:flex;flex-flow:column;justify-content:center;align-items:center;position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;font-weight:600;color:#fff;background:rgba(0,0,0,.7);transition:all .25s} 
#shPortfolio .grid li .mask span{font-size:14px}
#shPortfolio .grid li .mask p{overflow:hidden;text-overflow:ellipsis;width:100%;font-size:18px;line-height:2.2;text-align:center;white-space:nowrap}
#shPortfolio .grid li .mask div{display:flex;margin-top:15px}
#shPortfolio .grid li .mask div a{width:120px;height:42px;border-radius:4px;border:1px solid #fff;font-size:15px;text-align:center;line-height:40px;color:#fff;transition:all .25s} 
#shPortfolio .grid li .mask div a+a{margin-left:6px}
#shPortfolio .grid li+li{margin-left:0}
#shPortfolio .more{display:block;width:195px;height:58px;margin:50px auto 0;border:1px solid #e1e1e1;border-radius:30px;font-size:15px;font-weight:600;line-height:56px;;text-align:center;color:#111;transition:all .25s}
#shPortfolio .more i{margin-left:15px}
#shPortfolio .pg_wrap{margin:50px 0 80px}

#shPortfolio .prd_tab{display:flex}
@media(hover:hover){
#shPortfolio .sch_area .kwd a:not(.on):hover{border-color:var(--primary);color:var(--primary);background:#fff}
#shPortfolio .grid li:hover .mask{opacity:1}
#shPortfolio .grid li .mask div a:hover{color:var(--primary);background:#fff}
#shPortfolio .more:hover{border-color:#111}
}
@media(max-width:1340px){
#shPortfolio .stit{padding:0 15px}	
#shPortfolio .grid{padding:0 15px}
}
@media(max-width:1200px){
#shPortfolio .sch_area{padding:0 15px 40px}
}
@media(max-width:1024px){
#shPortfolio .sch_area .kwd a{height:35px;font-size:14px;line-height:35px}
#shPortfolio.sub ul{grid-template-columns:repeat(3, 1fr)}
}
@media(max-width:768px){
#shPortfolio{margin-bottom:60px}	
#shPortfolio.main{padding:60px 0;margin:0}
#shPortfolio.main .tit{margin-bottom:30px;padding-right:15px}
#shPortfolio.main .tit span{font-size:16px}
#shPortfolio.main .tit p{font-size:24px;letter-spacing:-.5px}
#shPortfolio .stit{font-size:24px}
#shPortfolio .sch_area .tit{margin:40px 0 20px;font-size:32px;line-height:1.4}
#shPortfolio .sch_area .kwd{overflow-x:scroll;overflow-y:hidden;display:grid;justify-content:start;grid-template-columns:repeat(6, 1fr);gap:4px}
#shPortfolio .sch_area .kwd a{height:35px;padding:0 15px;margin:0;font-size:13px;white-space:nowrap;line-height:33px}
#shPortfolio .grid{grid-template-columns:repeat(2, 1fr)}
#shPortfolio.sub ul{grid-template-columns:repeat(2, 1fr);column-gap:12px}
#shPortfolio .grid li .fake-area{display:flex;flex-flow:column}
#shPortfolio .grid li .mask{opacity:1;position:relative;top:auto;left:auto;height:auto;padding:12px;border-top:1px solid #e1e1e1;color:#111;background:#fff}
#shPortfolio .grid li .mask p{font-weight:700;line-height:1.8}
#shPortfolio .grid li .mask div{width:100%;margin-top:10px}
#shPortfolio .grid li .mask div a{width:50%;height:40px;border-color:#e1e1e1;font-size:14px;line-height:38px;color:#999}
#shPortfolio .grid li .mask div a+a{margin-left:4px}
#shPortfolio .grid li:nth-child(9){display:none}
#shPortfolio .grid li img{order:-1}
#shPortfolio .more{width:180px;height:50px;margin-top:40px;line-height:48px}
}
@media(max-width:480px){
#shPortfolio.main .tit p{font-size:19px;white-space:normal}
#shPortfolio .sch_area{padding-bottom:25px}
#shPortfolio .sch_area .tit{margin:20px 0;font-size:26px}
#shPortfolio .sch_area .kwd a{height:26px;padding:0 12px;margin:0;font-size:11px;line-height:24px}
#shPortfolio .grid li .cate{top:8px;left:8px;height:24px;padding:0 10px;font-size:11px;line-height:25px}	
#shPortfolio .grid li .mask span{font-size:13px}
#shPortfolio .grid li .mask p{font-size:16px}
#shPortfolio .grid li .mask div a{height:30px;font-size:12px;line-height:28px}
}
@media(max-width:380px){
#shPortfolio .grid{grid-template-columns:repeat(1, 1fr)}
#shPortfolio.sub ul{grid-template-columns:repeat(1, 1fr)}
}

/* ==================================== 디자인 검색 */
#shDesignSch{display:flex;align-items:center;max-width:var(--mainsize);margin:0 auto 25px}
#shDesignSch button, #shDesignSch a{font-size:22px;font-weight:700;color:#aaa;transition:all .25s}
#shDesignSch button.on{color:#111}
#shDesignSch button+button, #shDesignSch a{margin-left:30px}
#shDesignSchWrap{display:flex;align-items:center;width:275px;height:55px;padding:0 20px 0 25px;border-radius:30px;margin-left:auto;background:var(--pale)}
#shDesignSchWrap input{width:calc(100% - 24px);height:100%;padding:0 10px 0 0;border:none;outline:none;font-size:16px;font-weight:500;background:none}
#shDesignSchWrap button{padding-top:3px;color:#111}
#shDesignSchWrap.sub{width:400px;margin:50px auto 30px;border:3px solid #e1e1e1;background:#fff}
#shDesignSchWrap.sub button{padding-top:1px;color:var(--dark)}
#shDesignSchWrap.sub button svg{stroke-width:2.5px}
#shDesignSchWrap input:focus, #shDesignSchWrap input:active{border:none!important;box-shadow:none}
@media(hover:hover){
#shDesignSch button:not(.on):hover, #shDesignSch a:hover{color:#888}
}
@media(max-width:1340px){
#shDesignSch{padding:0 15px}
}
@media(max-width:768px){
#shDesignSch{flex-wrap:wrap;justify-content:center}
#shDesignSch button, #shDesignSch a{font-size:18px}
#shDesignSch button+button, #shDesignSch a{margin-left:25px}
#shDesignSchWrap{width:100%;height:50px;padding-left:20px;margin:15px 0 0}
#shDesignSchWrap input{font-size:15px}
}
@media(max-width:480px){
#shDesignSch button, #shDesignSch a{font-size:16px}
#shDesignSch button+button, #shDesignSch a{margin-left:16px}
#shDesignSchWrap.sub{width:100%;height:45px;margin-bottom:20px;padding:0 12px 0 15px;border-width:2px}
#shDesignSchWrap.sub button svg{width:20px;height:20px}
}