@charset "utf-8";

#wrap {width: 100%; min-width:360px}
.clear_fix {content:""; display:block; clear:both}
.addr_block{display:block; margin-top:10px}
.addr_block2{display:block; margin-top:5px}

/* HEADER */
#mainheader {position: fixed; left: 0; top: 0; width: 100%; z-index: 50}
.headerWrap {height: 60px}
.headerWrap .top_wrap {margin: 0 auto; position: relative}
.headerWrap .m_logo {position: absolute; left: 10px; top: 11px; -webkit-transition: top .3s; -moz-transition: top .3s; -o-transition: top .3s; transition: top .3s}
.headerWrap .top_btn {position: absolute; right: 16px; top: 18px; -webkit-transition: top .3s; -moz-transition: top .3s; -o-transition: top .3s; transition: top .3s}
.headerWrap .top_btn li {float: left; margin-left: 13px}

#mainheader:hover,
#mainheader.open,
#mainheader.fix {background: rgba(0, 0, 0, .5)}
#mainheader .bg {position: absolute; top: 0px; right: 0; z-index: 80}
#mainheader .bg span {position: absolute; top: 50%; left: 50%; width: 0; height: 0; margin: -30px 0 0 -30px; background: #000; border-radius: 50%}

/* GNB */
#gnb {display: none}
#gnb .navOverBg {display: none}
 
/* VISUAL */
#visual .visual_wrap {z-index: 20;position: relative; overflow: hidden}
#visual .visual_list {width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 30}
#visual .visual_wrap .vimg {outline: none}
#visual .visual_wrap .vimg.img01 .v_txt{background: url(../images/main/v02.jpg) center top no-repeat}
#visual .visual_wrap .vimg.img02 .v_txt{background: url(../images/main/v01.jpg) center top no-repeat}
#visual .visual_wrap .vimg.img03 .v_txt{background: url(../images/main/v03.jpg) center top no-repeat}
.com2zoaVideo {
position: absolute; width: auto; height: auto; min-width: 100%; min-height: 100%; z-index: 21; display: inline-block;
left: 50%; top: 50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity:.7
}

#visual .visual_wrap .v_txt {color: #fff; text-align: center; padding: 150px 25px 0 25px; position: relative; z-index: 35}
#visual .visual_wrap .v_txt .tit {font-size: 20px; margin-bottom: 20px; line-height: 1.4}
#visual .visual_wrap .v_txt .eng {font-size: 44px; text-transform: uppercase; font-weight: 700; letter-spacing: 0.1em; line-height: 1.2; margin-bottom: 20px}
#visual .visual_wrap .v_txt .kor {line-height: 1.7}
#visual .visual_wrap .slick-arrow {position: absolute; bottom: 150px; text-indent: -9999px; overflow: hidden; font-size: 0; width: 70px; height: 40px; z-index: 40}
#visual .visual_wrap .slick-prev {background: url(../images/main/slick-prev.png) 0 0 no-repeat; left: 25px}
#visual .visual_wrap .slick-next {background: url(../images/main/slick-next.png) 0 0 no-repeat; right: 25px}
#visual .visual_wrap .slick-arrow:after {content:""; display: block; width: 38px; height: 35px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; border: 1px solid #fff; transition: all .7s; opacity: 0}
#visual .visual_wrap .slick-prev:after {float: left; margin-left: 70px}
#visual .visual_wrap .slick-next:after {float: right; margin-right: 70px}
#visual .visual_wrap .slick-arrow:hover:after {opacity: 1; margin: 0}

#visual .visual_wrap .visualpage {position: absolute; left: 50%; bottom: 150px; margin-left: -35px;z-index: 30; background: url(../images/main/bar_count.png) 50% 50% no-repeat; color: #fff; font-size: 30px; font-weight: 100; width: 70px}
#visual .visual_wrap .visualpage span {display: block}
#visual .visual_wrap .visualpage .sd01 {text-align: left}
#visual .visual_wrap .visualpage .sd02 {text-align: right}

#visual .visual_wrap .btn_scroll {position: absolute; left: 50%; bottom: 16px; margin-left: -38px; color: #fff; text-align: center; width: 76px; cursor: pointer; font-size: 12px; font-weight: 100;z-index: 40}
#visual .visual_wrap .btn_scroll img {display: block; margin: 0 auto 10px auto}

/* TIT WRAP */
.m_tit_wrap {padding: 60px 20px; text-align: center}
.m_tit_wrap .m_h3 {font-weight: 350; font-size: 32px; color: #282828; line-height: 1.2}
.m_tit_wrap .m_h3:after {content:""; display: block; width: 30px; height: 2px; background: #000; margin: 16px auto}
.m_tit_wrap .m_h3_sub {line-height: 160%; font-size:17px}

.m_tit_wrap .m_h3_w, .m_tit_wrap .m_h3_sub_w {color: #fff}
.m_tit_wrap .m_h3_w:after {background: #fff}

/* WEB PRODUCTION */
.product_body {max-width: 1400px; margin: 0 auto; padding: 0 20px}
.product_body li {position: relative; overflow: hidden}
.product_body .ico_pd {display: block; position: relative; overflow: hidden}
.product_body dt {font-size: 16px; font-weight: 400; color: #282828; line-height: 1.2; margin-bottom: 10px}
.product_body dd {line-height: 1.4}

/* PORTFOLIO */
.portfolio_wrap {background: url(../images/main/m_portfolio_bg.jpg) 50% 0 no-repeat; background-size: cover; background-attachment:fixed}
.portfolio_wrap .portfolio_list {max-width: 1300px; margin: 0 auto}
.portfolio_wrap .portfolio_item {width: 100%; float: left}
.portfolio_wrap .item_wrap {width: 316px; margin: 0 auto; background: #fff; position: relative; z-index: 10}
.portfolio_wrap .item_wrap:after {content:""; display: block; width: 100%; height: 30px; background: url(../images/main/portfolio_item_cover.png) 0 0 no-repeat; position: absolute; left: 0; top: 220px; z-index: 15}
.portfolio_wrap .item_img {display: block}
.portfolio_wrap .item_txt {padding: 30px}
.portfolio_wrap .item_txt dt {font-size: 18px; font-weight: 400; line-height: 1.2; letter-spacing:-0.5px}
.portfolio_wrap .item_txt .tech {font-weight: 350; line-height: 1.2; padding: 10px 0}
.portfolio_wrap .solution {margin-bottom: 14px}
.portfolio_wrap .solution li {line-height: 1.5}
.portfolio_wrap .btn_detail {border: 1px solid #dfdfdf}
.portfolio_wrap .btn_detail a {display: block; line-height: 36px; color: #777; font-weight: 350; padding-left: 12px; background: url(../images/main/btn_detail.gif) 100% 50% no-repeat}
.portfolio_wrap .btn_portfolio_more {padding: 54px 0}
.portfolio_wrap .btn_portfolio_more a {display: block; width: 185px; text-align: center; color: #fff; margin: 0 auto; border: 1px solid #ddd; padding: 14px; -webkit-border-radius: 14px; -moz-border-radius: 14px; -o-border-radius: 14px; border-radius: 14px; font-size: 16px; font-weight: 350}

/* CLIENT */
#client {background: #f3f3f3}
.client_body {max-width: 1400px; margin: 0 auto; padding: 0 0 40px}
.client_body .client_item {float:left; width: 100%; margin:0 auto}
.client_body .client_list {padding:0 40px}
.client_body .client_list li:first-child {border-top:1px solid #d9d9d9}
.client_body .client_list li {margin:0 10px; border-collapse: separate; border-spacing: 0; border: 1px solid #d9d9d9; border-top:0; vertical-align: middle; text-align:center; box-sizing:border-box}
.client_body .client_list li img {margin:0 auto; text-align:center}
.client_body .logo_wrap {display: block; text-align: center; /*padding: 25px;*/}

.client_body .slick-arrow {display:block; position: absolute; width:23px; height:40px; top:50%; font-size:0; cursor:pointer; margin-top:-12px}
.client_body .slick-prev {left:10px; background:url(../images/main/btn_clientarr01.png) no-repeat 0 0 }
.client_body .slick-next {right:10px; background:url(../images/main/btn_clientarr02.png) no-repeat 0 0}
.client_body .slick-prev:hover {background:url(../images/main/btn_clientarr01_on.png) no-repeat 0 0; transition:.4s}
.client_body .slick-next:hover {background:url(../images/main/btn_clientarr02_on.png) no-repeat 0 0; transition:.4s}

.client_body .btn_client_more {padding:30px 0}
.client_body .btn_client_more a {display: block; width: 185px; text-align: center; color:#898989; margin: 0 auto; border: 1px solid #d9d9d9; padding: 14px; -webkit-border-radius: 14px; -moz-border-radius: 14px; -o-border-radius: 14px; border-radius: 14px; font-size: 16px; font-weight: 350}
.client_body .btn_client_more:hover a {border-color:#c3c0c0; color:#505050; transition:.3s}

/*! Gray v1.6.0 (https://github.com/karlhorky/gray) | MIT */
.grayscale {
/* Firefox 10-34 */
filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='saturate' values='0'/></filter></svg>#grayscale");

/*
Chrome 19+,
Safari 6+,
Safari 6+ iOS,
Opera 15+
*/
-webkit-filter: grayscale(1);

/* Firefox 35+ */
filter: grayscale(1);

/* IE 6-9 */
filter: gray;
}

.grayscale.grayscale-fade {
transition: filter .5s;
}

/* Webkit hack until filter is unprefixed */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.grayscale.grayscale-fade {
	-webkit-transition: -webkit-filter .5s;
	transition:         -webkit-filter .5s;
}
}

.grayscale.grayscale-off,
.grayscale.grayscale-fade:hover {
-webkit-filter: grayscale(0);
filter:         grayscale(0);
}

/* Background element */
.grayscale.grayscale-replaced {
-webkit-filter: none;
filter:         none;
}

.grayscale.grayscale-replaced > svg {
-webkit-transition: opacity .5s ease;
transition:         opacity .5s ease;
opacity: 1;
}

.grayscale.grayscale-replaced.grayscale-off > svg,
.grayscale.grayscale-replaced.grayscale-fade:hover > svg {
opacity: 0;
}


/* REQUEST */
.request_box {width: 100%; float: left; text-align: center; height: 264px; color: #fff; -ms-transition: all .4s; -webkit-transition: all .4s; -moz-transition: all .4s; -o-transition: all .4s; transition: all .4s; position: relative; overflow: hidden}
.request_box.request01 {background: url(../images/main/request01_bg.jpg) 50% 50% no-repeat; background-size: auto 100%}
.request_box.request02 {background: url(../images/main/request02_bg.jpg) 50% 50% no-repeat; background-size: auto 100%}
.request_box::before {content:""; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1;
-webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; transition: all .4s ease-in-out}
.request_box.request01::before {background: url(../images/main/request01_bg.jpg) 50% 50% no-repeat; background-size: cover}
.request_box.request02::before {background: url(../images/main/request02_bg.jpg) 50% 50% no-repeat; background-size: cover}
.request_box:hover::before {width: 120%; height: 120%; margin: 0 0 0 -10%}

.request_box:hover {background-size: auto 120%}
.request_box dl {padding: 40px 0 0 0; position: relative; z-index: 5}
.request_box .request_tit {font-size: 20px; font-weight: 350; margin-bottom: 30px}
.request_box .request_sub {font-size: 40px; font-weight: 100; margin-bottom: 40px}
.request_box .request_btn {width: 180px; border: 1px solid #d9d9d9; margin: 0 auto; position: relative; z-index:10; overflow: hidden} 
.request_box .request_btn a {display: block; color: #fff; padding: 12px 0; position: relative; text-transform: uppercase; z-index: 12;
-webkit-transition: all .4s; -moz-transition: all .4s; -o-transition: all .4s; transition: all .4s;
}
.request_box .request_btn:after {content:""; display: block; width: 100%; height: 100%; position: absolute; left: -1px; top: 0; background: #fff; z-index: 11; margin-left: -100%;
-webkit-transition: all .4s; -moz-transition: all .4s; -o-transition: all .4s; transition: all .4s;
}
.request_box .request_btn:hover a {color: #282828}
.request_box .request_btn:hover:after {left:0; margin-left: 0}

/* BUSINESS */
.business_list li {width: 100%; float: left; margin-bottom: 60px}
.business_list .business_photo {border: 1px solid #d9d9d9; width: 264px; height: 264px; overflow: hidden; padding: 9px; background: #fff; margin: 0 auto}
.business_list .circle {display: block; overflow: hidden; width: 264px; height: 264px; position: relative}
.business_list .btn_business_more {display: block; width: 100%; height: 100%; background: rgba(11, 74, 201, .7); position: absolute; color: #fff; font-size: 20px; text-align: center; transition: all .4s}
.business_list .btn_business_more span {display: block; padding-top: 48px; margin-top: 95px; background: url(../images/main/btn_business_more.png) 50% 0 no-repeat}
.business_list .business_photo ,
.business_list .circle,
.business_list .btn_business_more {-webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%}
.business_list .busi01 .btn_business_more {left: 0; top: 264px}
.business_list .busi02 .btn_business_more {left: 264px; top: 0}
.business_list .busi03 .btn_business_more {left: 0; top: -264px}
.business_list .business_photo:hover .btn_business_more {left: 0; top: 0}
.business_item {padding: 45px 0 0 0; text-align: center}
.business_item dt {font-size: 20px; font-weight: 400; margin-bottom: 10px}
.business_item dd {font-size: 16px; font-weight: 300; line-height: 140%}

/* CONTACT */
.contact_body {margin: 0 auto}
.contact_body .contact_bg {height: 390px; background: url(../images/main/contact_bg_n.jpg) 50% 0 no-repeat; background-size: cover; padding: 80px 0}
.contact_body .contact_list {background: rgba(5, 4, 12, .3); color: #fff; width: 85%; padding: 46px 0; margin: 0 auto; max-width: 560px}
.contact_body .contact_list li {position: relative; margin: 20px 40px 0 40px; padding: 0 0 0 150px; line-height:150%}
.contact_body .contact_list li:first-child {margin-top: 0}
.contact_body .contact_list .contact_tit {display: block; position: absolute; left: 0; top: 0}
.contact_body .contact_list .main_num {font-size: 30px; color: #fbfca1; font-weight: 400}

/* FOOTER */
#footwrap {background: #1e2021; padding-bottom: 100px}
.m_footer {max-width: 1300px; margin: 0 auto; position: relative; padding: 0 10px}
.m_footer .f_logo {position: absolute; left: 20px; top: 23px}
.m_footer .foot_menu {border-bottom: 1px solid #4b4d4d}
.m_footer .foot_menu_list {padding: 35px 0 20px 150px}
.m_footer .foot_menu_list li {float: left; position: relative; padding-left: 5px}
.m_footer .foot_menu_list li:after {content:""; display: block; width: 5px; height: 13px; background: url(../images/main/bar_fmenu.png) 0 0 no-repeat; position: absolute; left: 0; top: 1px}
.m_footer .foot_menu_list li:first-child {padding-left: 0}
.m_footer .foot_menu_list li:first-child:after {display: none}
.m_footer .foot_menu_list li a {display: block; color: #fff; font-weight:400; padding: 0 10px}
.m_footer .foot_menu_list li.point a{color:#ffc528}
.m_footer .address_wrap {padding: 14px 7px 7px 7px; line-height: 1.4; color: #767676}
.m_footer .copy {font-size: 13px; line-height: 1.4; padding: 0 7px; color: #767676}
.m_footer .foot_box {padding-top: 13px; float: right}
.m_footer .foot_box .bd_box {border: 1px solid #4b4d4d; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px}
.m_footer .foot_box .btn_consult {float: left; width: 136px; margin-right: 10px}
.m_footer .foot_box .btn_consult a {display: block; line-height: 34px; padding: 0 0 0 14px; background: url(../images/main/ico_letter.png) 90% 50% no-repeat; color: #767676}
.m_footer .family {float: left; width: 154px; height: 34px; position: relative; margin-right: 10px}
.m_footer .family_tit {color: #767676; line-height: 34px; width: 100%;text-transform: uppercase; padding-left: 14px; box-sizing: border-box; cursor: pointer; display: block; position: relative}
.m_footer .family_tit:after {content:""; display: block; width: 15px; height: 8px; background: url(../images/main/family_arw.png) 0 0 no-repeat; position: absolute; right: 14px; top: 50%; 
-webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); transition: transform .4s}
.m_footer .foot_box .btn_corp {float: left; width: 136px; margin-right: 10px}
.m_footer .foot_box .btn_corp a {display: block; line-height: 34px; padding: 0 0 0 14px; background: url(../images/main/ico_corp.png) 90% 50% no-repeat; color: #767676}
.m_footer .family_tit.on:after {
-webkit-transform: translateY(-50%) rotate(180deg); -moz-transform: translateY(-50%) rotate(180deg); -o-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg);
}
.m_footer .family_list {position: absolute; left: 0; top: 35px; width: 100%; background: #fff; padding: 5px 0; display: none}
.m_footer .family_list li a {display: block; padding: 8px 10px}
.m_footer .family_list li:hover a {color: #000; font-weight: 400; background: #eaeaea}
.m_footer .family select {background: none; border: 0; color: #767676; height: 34px; line-height: 34px; width: 100%; text-transform: uppercase; padding-left: 14px; box-sizing: border-box}
.m_footer .family .btn_family {width: 9px; height: 9px; background: url(../images/main/btn_family.png) 0 0 no-repeat; position: absolute; right: 14px; top: 50%; margin-top: -4px}
.m_footer .foot_box .btn_admin {float: left; width: 88px}
.m_footer .foot_box .btn_admin a {display: block; line-height: 34px; text-align: center; color: #767676}

/* GOTOP */
#goTop {position: fixed; right: 26px; bottom: 30px; z-index: 40; -webkit-opacity: .85; -moz-opacity: .85; -o-opacity: .85; opacity: .85;
-webkit-transition: opacity .8s; -moz-transition: opacity .8s; -o-transition: opacity .8s; transition: opacity .8s;
}
#goTop:hover {-webkit-opacity: 1; -moz-opacity: 1; -o-opacity: 1; opacity: 1}
#goTop .go_consult {width: 40px; height: 40px; overflow: hidden; background: #f9660d; -webkit-transition: all .6s; -moz-transition: all .6s; -o-transition: all .6s; transition: all .6s; margin-bottom: 10px}
#goTop .go_consult a {padding: 4px 0; height: 32px; font-size: 12px; line-height: 16px; text-align: center; display: block; color: #fff; letter-spacing: 1px}
#goTop .go_consult.circle {-webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; background: #f9660d url(../images/main/ico_consult.png) 0 0 no-repeat}
#goTop .go_consult.circle a {font-size: 0; line-height: 0; text-indent: -9999}
#goTop .go_top {width: 40px; height: 40px; background: #5c5c5c; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%}
#goTop .go_top button {display: block; width: 40px; height: 40px; background: url(../images/main/ico_gotop.png) 0 0 no-repeat}


/* MOBILE LAYOUT */
@media only screen and (max-width:980px) {

/* HEADER*/
#wrap.overlay #mainheader,
#wrap.overlay .headerWrap {height: 100%}

/* GNB */
#gnb {position: relative; z-index: 99}
#gnb .gmn {padding: 20px 0; transform: translate(0px, 50px); opacity:0; transition: all .5s}
#gnb .gmn > a {color: #fff; text-align: center; display: block; font-size: 48px; font-weight: 500}
#gnb .allbtnClose {position: absolute; right: 25px; top: 25px; z-index: 150}
#gnb .allbtnClose a {display: block; background: #fff; width: 0; height: 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-transition: all .4s; -moz-transition: all .4s; -o-transition: all .4s; transition: all .4s}
#gnb .allbtnClose a img {width: 100%}

#wrap.overlay #gnb {display: block; height: 100%}
#wrap #gnb .gmn.effect {transform: translate(0px, 0px); opacity:1}
#wrap.overlay #gnb .allbtnClose a {width: 60px; height: 60px}

.naviSub {display: none}

/* VISUAL */
#visual .visual_wrap{height:650px !important}
#visual .visual_wrap .v_txt {height: 937px}

/* WEB PRODUCTION */
.product_body li {border-top: 1px solid #dfdfdf; padding: 40px 0}
.product_body li dl {position: relative}
.product_body li:first-child {border: 0; padding-top: 0}
.product_body .ico_pd {width: 70px; height: 70px; position: absolute; left: 0; top: 50%; margin-top: -35px}
.product_body .ico_pd img {width: 100%}
.product_body dl {padding:0 0 0 86px; min-height: 70px}
.product_body li:nth-child(2n) dl {padding: 0 86px 0 0; text-align: right}
.product_body li:nth-child(2n) .ico_pd {left: auto; right: 0}

/* PORTFOLIO */
.portfolio_wrap .portfolio_item:nth-child(2),
.portfolio_wrap .portfolio_item:nth-child(3) {display: none}

/* CLIENT */
.client_body .client_tbl .mb, .client_body .client_tbl .tb {display: none}

/* REQUEST */
.request_box.request01 {background: url(../images/main/request01_bg.jpg) 50% 50% no-repeat; background-size: cover}
.request_box.request02 {background: url(../images/main/request02_bg.jpg) 50% 50% no-repeat; background-size: cover}
.request_box:hover {background-size: cover}

/* FOOTER */
.m_footer .f_logo {display: none}
.m_footer .foot_box {float: left}

/* GOTOP */
#goTop {right: 10px}
.m_footer .foot_menu_list {padding: 20px 0 12px 0}

}

/* TABLET LAYOUT */
@media only screen and (min-width:981px) and (max-width:1302px) {

/* GNB */
#gnb {position: relative; z-index: 99}
#gnb .gmn {padding: 20px 0; transform: translate(0px, 50px); opacity:0; transition: all .5s}
#gnb .gmn > a {color: #fff; text-align: center; display: block; font-size: 48px; font-weight: 500}
#gnb .allbtnClose {position: absolute; right: 25px; top: 25px; z-index: 150}
#gnb .allbtnClose a {display: block; background: #fff; width: 0; height: 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-transition: all .4s; -moz-transition: all .4s; -o-transition: all .4s; transition: all .4s}
#gnb .allbtnClose a img {width: 100%}

#wrap.overlay #gnb {display: block; height: 100%}
#wrap #gnb .gmn.effect {transform: translate(0px, 0px); opacity:1}
#wrap.overlay #gnb .allbtnClose a {width: 60px; height: 60px}

.naviSub {display: none}

/* VISUAL */
#visual .visual_wrap .v_txt {padding-top: 200px; height: 937px}
#visual .visual_wrap .v_txt dt {font-size: 24px}
#visual .visual_wrap .v_txt .eng {font-size: 56px}
#visual .visual_wrap .v_txt .kor {font-size: 16px}
#visual .visual_wrap .slick-arrow,
#visual .visual_wrap .slick-dots {bottom:200px}

/* TIT WRAP */
.m_tit_wrap {padding: 80px 0}
.m_tit_wrap .m_h3 {font-size: 40px}
.m_tit_wrap .m_h3:after {margin: 20px auto}

/* WEB PRODUCTION */
.product_body li {float: left; width: 50%; text-align: center; padding-bottom: 40px}
.product_body dl {padding: 0 10%}
.product_body dt {font-size: 18px}
.product_body dd {min-height: 76px}
.product_body .ico_pd {display: block; margin-bottom: 20px}

/* PORTFOLIO */
.portfolio_wrap .portfolio_item {width: 50%}
.portfolio_wrap .portfolio_item:nth-child(3) {display: none}

/* CLIENT */
.client_body {padding-bottom: 56px}
.client_body .client_tbl .tb {display: none}

/* REQUEST */
.request_box {width: 50%; height: 342px}
.request_box dl {padding-top: 80px}
.request_box .request_tit {font-size: 24px}
.request_box .request_sub {font-size: 48px}

/* CONTACT */
.contact_body .contact_bg {height: 410px}
.contact_body .contact_list {max-width: 700px}
.contact_body .contact_list li {font-size: 16px; margin: 20px 80px 0 80px}

/* FOOTER */
.m_footer .foot_box {float: left}

}

/* PC LAYOUT */
@media only screen and (min-width:1303px) {

/* HEADER */
.fix{box-shadow:5px 5px 10px rgba(0, 0, 0, 0.1)}
.headerWrap .top_wrap {max-width: 1300px}
.headerWrap {height: 70px}
.headerWrap .m_logo {top: 16px}
.headerWrap .top_btn {top: 23px}

/* GNB */
#gnb {display: block; max-width: 1300px; margin: 0 auto; padding: 15px 0 0 0}
#gnb .allbtnClose {display: none}
#gnb .gnbList {*zoom:1; float: right; margin: 0 100px 0 0}
#gnb .gnbList:after {content:""; display: block; clear: both}
#gnb .gmn {float: left; width: 140px; position: relative}
#gnb .gmn > a {color: #fff; display: block; padding: 10px 0 23px 0; font-size: 20px; font-weight: 500; text-align: center}

.naviSub {display: none; position: absolute; left: 0; top: 53px; z-index: 9999; width: 100%; background: #fff; box-shadow:5px 5px 10px rgba(0, 0, 0, 0.1)}
.naviSub ul {padding: 16px 0}
.naviSub ul li a {display: block; text-align: center; line-height: 1.4; padding: 6px 0; color: #000; opacity: .8; transition: all .6s}
.naviSub ul li:hover a {opacity: 1; font-weight: 400; background: #4b4d4d; color: #fff}
#gnb .gmn:hover .naviSub {display: block}

#gnb .navOverBg {position: fixed; left: 0; top: 80px; width: 100%; height: 0; background: rgba(0, 0, 0, .85); overflow: hidden; height: 205px; border-top: 1px solid #404040}

#mainheader.open .naviSub {display: block}
#mainheader.open .navOverBg {display: block}

/* VISUAL */
/* #visual .visual_wrap .vimg {min-height: 1000px} */
#visual .visual_wrap{width:100%; height:100%}
#visual .visual_wrap .vimg.img01 .v_txt, #visual .visual_wrap .vimg.img02 .v_txt, #visual .visual_wrap .vimg.img03 .v_txt{background-size:100% 100%}
#visual .visual_wrap .v_txt {padding-top: 240px; min-height:937px; background:#f0f}
#visual .visual_wrap .v_txt .tit {font-size: 30px}
#visual .visual_wrap .v_txt .eng {font-size: 70px}
#visual .visual_wrap .v_txt .kor {font-size: 18px}
#visual .visual_wrap .slick-arrow,
#visual .visual_wrap .slick-dots {bottom:200px}
#visual .visual_wrap .btn_scroll {bottom: 50px}

/* TIT WRAP */
.m_tit_wrap {padding: 100px 0}
.m_tit_wrap .m_h3 {font-size: 50px}
.m_tit_wrap .m_h3:after {margin: 20px auto}

/* WEB PRODUCTION */
.product_body {padding-bottom: 80px}
.product_body li {float: left; width: 25%; text-align: center}
.product_body dl {padding: 0 8%}
.product_body dt {font-size: 22px}
.product_body dd {min-height: 76px; font-size: 15px}
.product_body .ico_pd {display: block; margin-bottom: 20px}

/* PORTFOLIO */
.portfolio_wrap .portfolio_item {width: 33.3%}

/* CLIENT */
.client_body {padding:0; padding-bottom: 80px}
.client_item {border:0}
.client_body .client_list {padding:0; border:1px solid #d9d9d9;border-top:0; border-bottom:0}
.client_body .client_list li {margin:0; border-left:0;}

/* REQUEST */
.request_box {width: 50%; height: 436px}
.request_box dl {padding-top: 90px}
.request_box .request_tit {font-size: 30px; margin-bottom: 36px}
.request_box .request_sub {font-size: 60px; margin-bottom: 60px}
.request_box .request_btn {width: 200px}
.request_box .request_btn a {font-size: 16px; padding: 16px}

/* BUSINESS */
.business_list li {width: 33.3%}

/* CONTACT */
.contact_body .contact_bg {height:484px}
.contact_body .contact_list {max-width: 923px}
.contact_body .contact_list li {font-size: 18px; margin: 20px 120px}
.contact_body .contact_list li {margin-top: 30px}

/* FOOTER */
#footwrap{padding-bottom:20px}
.m_footer .foot_box {position: absolute; right: 10px; top: 5px}

}


/* LOWSET FIX */
@media only screen and (max-width:580px) {
	#visual .visual_wrap .v_txt dt {font-size: 16px}
	#visual .visual_wrap .v_txt .eng {font-size: 30px}

	.contact_body .contact_bg {height: auto; padding: 40px 0}
	.contact_body .contact_list li {padding: 0; line-height: 1.4}
	.contact_body .contact_list .contact_tit {position: relative; display: inline-block; margin-right: 13px}
	.contact_body .contact_list .main_num {font-size: 16px}
}

@media only screen and (max-width:470px) {
	#footwrap {padding-bottom: 120px}
	.m_footer .foot_box .btn_admin {clear: both; margin-top: 10px}
}

@media (max-height:640px) {
	#visual .visual_wrap .v_txt {padding-top: 100px}
	#visual .visual_wrap .slick-dots {bottom: 130px}
}

@media (min-height:621px) and (max-width:1199px) {#gnb .gnbList {padding-top: 120px}}
@media (max-height:620px) and (max-width:1199px) {#gnb .gmn > a {font-size: 38px} #gnb .gnbList {padding-top: 80px}}
@media (max-height:520px) and (max-width:1199px) {#gnb .gmn > a {font-size: 28px} #gnb .gnbList {padding-top: 60px}}
@media (max-height:410px) and (max-width:1199px) {#gnb .gmn > a {font-size: 20px} #gnb .gnbList {padding-top: 40px}}
@media (max-height:330px) and (max-width:1199px) {#gnb .gmn {padding: 12px 0}}

@media (max-height:768px) and (min-width: 768px) {
	#visual .visual_wrap .v_txt {padding-top: 100px}
	#visual .visual_wrap .slick-dots {bottom: 130px}
}


/* layer_popup 추가 kjh 210520 */
#content {position:relative}
.top_btn .btn_pop {display:none}
.popup_wrap {width: 100%; position:absolute; top:0; right:0; z-index:49}
.popup_pc .popup_on {display:none; position: absolute; top:50px; right:0; overflow:hidden; width: 100%; height:579px; margin:0 auto; background:rgba(0,0,0,0.7); text-align: center; box-shadow:0 3px 3px 2px rgba(0,0,0,0.1)}
.popup_pc .popup_layer_wrap {overflow: hidden; position: relative}
/* .popup_pc .slick-prev {position: absolute; bottom:20px; left:12px; width:29px; height:29px; background:url(../images/main/btn_popup_prev.png) 0 0 no-repeat}
.popup_pc .slick-next {position: absolute; bottom:20px; right:12px; width:29px; height:29px; background:url(../images/main/btn_popup_next.png) 100% 0 no-repeat}
.popup_pc button {display:none !important; overflow:hidden; line-height:0; font-size:0; text-indent:-9999px} */
.popup_pc .popup_imgsize {width: 100%; height:480px}
.popup_pc .popup_imgsize img {width:340px; height:460px; margin:0 auto; box-sizing:border-box}
.popup_pc .popup_layer .popup_tit {display:block;padding:10px 90px 10px 0; margin:17px 40px; font-size:1.154em; font-weight:400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left}
.popup_pc .popup_layer .popup_tit a {color:#fff}
.popup_pc .popup_layer .popup_tit:hover a {text-decoration:underline}
.popup_wrap .popup_on.active {display:block}
.popup_wrap .bt_bar_text {padding:6px 0; background:#2d2c2c; color:#fff}
/* .popup_wrap .btn_slide {position: absolute; top:20px; right:40px; z-index: 30}
.popup_wrap .btn_slide li {float:left}
.popup_wrap .btn_slide li:first-child {border-left:1px solid rgba(255,255,255,0.3)}
.popup_wrap .btn_slide li a {display:block; width:30px; height:30px; line-height:28px; border:1px solid rgba(255,255,255,0.3); border-left:0}
.popup_wrap .btn_slide li img {width:16px; height:16px; vertical-align:middle} */
.popup_pc button{overflow:hidden; height:0; width:0; line-height:0; font-size:0; text-indent:-9999999px; cursor: pointer}
.popup_pc .slick-prev,.popup_pc .slick-next{position: absolute; top:20px; width:30px; height:30px; border:1px solid rgba(255,255,255,0.3); z-index: 500}
.popup_pc .slick-prev {right:75px; background:url(../images/main/btn_pop_prev.png) center no-repeat}
.popup_pc .slick-next {right:40px; background:url(../images/main/btn_pop_next.png) center no-repeat}


@media only screen and (max-width:999px) {
/* 팝업 */
.top_btn .btn_pop {display:block}
.popup_open {display:none}
.top_btn .btn_pop a {display:block; width:21px; height:21px; background:url(../images/main/btn_mpop_close.png) no-repeat 50% 0; text-indent:-9999px; font-size:0}
.top_btn .btn_pop.openact a {background:url(../images/main/btn_mpop_open.png) no-repeat 50% 0}
.popup_pc .popup_on {top:71px}
.popup_pc .popup_layer .popup_tit {width:340px; margin:17px auto; box-sizing:border-box}
.popup_wrap .btn_slide {right:50%; margin-right:-170px}
     
}

@media only screen and (min-width:1000px) {
/* popup */
.popup_wrap .popup_open {position:absolute; top:100px; right:0; width:73px; height:73px; transition: ease-in 0.3s; z-index:1}
.popup_wrap .popup_open.openact {right:480px}
.popup_wrap .popup_open span {display:block; padding:15px 0 20px}
.popup_wrap .popup_on {top:100px; right:0; width:500px; height:636px}
.popup_open .open_pop {display:block; width:73px; height:73px; background:#9ec542 url(../images/main/btn_pcpop_open.png) no-repeat left 50% bottom 15px; box-sizing:border-box; transition:ease-in .4s; text-align:center; font-size:14px; color:#1a1a1a; font-weight:400; box-shadow:0 2px 2px 1px rgba(0,0,0,0.1)}
.popup_open.openact .open_pop {background:#9ec542 url(../images/main/btn_pcpop_close.png) no-repeat left 50% bottom 15px}
.popup_open .open_pop a {display:block}
.popup_wrap .popup_open span {color:#fff}
.popup_pc .popup_imgsize {height:510px; margin-bottom:25px}
.popup_pc .popup_imgsize img {width:420px; height:510px}
.popup_pc .popup_layer .popup_tit {font-size:1.231em}
/*.popup_pc .slick-prev {bottom:10px; left:26px}
.popup_pc .slick-next {bottom:10px; right:26px}*/
/* 유지보수 리스트 내 팝업 레이어스타일 */
.popup_wrap.repair_pop{top:-50px}
.popup_wrap.repair_pop .popup_pc .popup_imgsize img{width:250px; height:310px}
.popup_wrap.repair_pop .popup_on{width:270px; height:378px}
.popup_wrap.repair_pop .popup_open.openact{right:270px}
.popup_wrap.repair_pop .popup_open .open_pop{width:63px; height:64px; font-size:12px}
.popup_wrap.repair_pop .popup_pc .popup_layer .popup_tit{margin:10px; font-size:14px}
.popup_wrap.repair_pop .popup_pc .slick-prev, .popup_wrap.repair_pop .popup_pc .slick-next{top:9px}
.popup_wrap.repair_pop .popup_pc .slick-next{right:15px}
.popup_wrap.repair_pop .popup_pc .slick-prev{right:50px}
.popup_wrap.repair_pop .popup_open{width:63px}
.popup_wrap.repair_pop .popup_open span {display:block; padding:10px 0 0px}
}

/*로그인 관련 추가*/
#mainheader .btn_login{position: relative; height: 30px}
#mainheader .btn_login .logmu{display: none; position: absolute; top:30px; left:-47px; width: 120px; padding: 10px 0; background: #fff; border-radius: 2px 2px 7px 7px; text-align: center}
#mainheader .btn_login .logmu li{float: none; margin: 0}
#mainheader .btn_login .logmu li a{display: block; padding: 7px 5px; transition: all .6s}
#mainheader .btn_login .logmu li a:hover{font-weight: 400; background: #4b4d4d; color: #fff}
#mainheader .btn_login:hover .logmu{display: block}
/* MOBILE LAYOUT */
@media only screen and (max-width:980px) {
#mainheader .btn_login .logmu{left:-32px; width: 90px}
}

/* MOBILE LAYOUT */
@media only screen and (max-width:480px) {
.m_footer .foot_menu_list {text-align:center}
.m_footer .foot_menu_list li {display:inline-block; float:inherit}
.m_footer .foot_menu_list li a {padding:2px 7px}

}

@media only screen and (max-width:440px) {
.m_footer .foot_menu_list li a {padding:2px 3px; letter-spacing:-1px}
}

/* MOBILE LAYOUT */
@media only screen and (max-width:1000px) {
.popup_wrap.repair_pop{display:none}
}