@charset "utf-8";
/* CSS Document */
@media only screen and (max-width:1280px) {
.menuCon{display:none}
#logo{padding:0 0 0 30px}
.main-con{height:700px}
.main-copy{font-size:48px;min-width:240px;line-height:100%}
.sub-copy{font-size:16px;letter-spacing:-1px;line-height:150%;min-width:240px;}
.copy-area{left:0;margin-left:13px;width:1280px;position:relative;top:50%;height:230px;}
.aPrev, .aNext{display:none}
.ms_nav{bottom:0}
.gnb>ul>li{padding-top:5px}
.visual li:nth-child(1) .copy-area{margin-top:-180px}
.visual li:nth-child(2) .copy-area{margin-top:-150px}
.visual li:nth-child(3) .copy-area{margin-top:-150px}
.visual li:nth-child(2) .sub-copy { left:5px;margin-top:10px}
.visual li:nth-child(3) .sub-copy { left:5px;;margin-top:10px}
.blog-check{padding:0 10px}
.pfixed #logo{margin-top:5px}
}

@media only screen and (max-width:1000px) {
.menuCon{display:none}
.main-con{height:500px}
.main-copy{font-size:36px;min-width:240px;line-height:100%}
.sub-copy{font-size:14px;letter-spacing:-1px;line-height:150%;min-width:240px;}
.copy-area{left:0;margin-left:13px;width:1280px;position:relative;top:50%;height:230px;}
.visual li:nth-child(1) .copy-area{margin-top:-120px}
.visual li:nth-child(2) .copy-area{margin-top:-100px}
.visual li:nth-child(3) .copy-area{margin-top:-100px}
.visual li:nth-child(2) .sub-copy { left:5px;margin-top:10px}
.visual li:nth-child(3) .sub-copy { left:5px;;margin-top:10px}
.title{font-size:36px}
.section-txt p{font-size:14px}
h3{font-size:36px}
.skin-sample > li{padding:0 10px}

}

@media only screen and (max-width:860px) {
#header{height:68px;z-index:9999}
.menu-bt-wrapper{display:block}
.gnb li{float:none}
.pfixed{position:relative !important;height:68px !important;top:32px !important}
.pfixed .gnb>ul>li{padding-top:4px !important}
.menu{background:rgba(0,0,0,0.6);padding:15px 10px 5px 10px;width:160px;margin-top:-10px;position:fixed;right:-100%;display:none;border-right:none;border-top-left-radius:20px;border-bottom-right-radius:20px}
.gnb{width:100%;}
.gnb>ul{height:auto}
.gnb>ul>li{height:40px;margin-left:15px;float:none;text-align:left}
.gnb>ul>li>a{color:#fff}
.menu-open{position:fixed;top:45px}
.menu-open .menu-bt-line{background:#fff}
.tbt li.on a{color:#fff}
}


@media only screen and (max-width:800px) {
#header{padding:0}
.copy-area .sub-copy{max-width:280px}
.visual li:nth-child(1) .sub-copy br, .visual li:nth-child(3) .sub-copy br{display:none}
.foot_layerpopup01{width:96%;margin-left:-48%}
.client li{width:20%;}
.skin-sample h4{font-size:24px}
.title{font-size:24px;margin-bottom:10px;font-weight:600}
.section-txt{padding:50px 20px 0 0;line-height:120%;width:58%}
.cl-area{width:40%}
#client{height:250px}
#client .section-txt{width:60%;padding-top:50px}
.blog-icon{top:0;width:50px}
#section1{height:180px;background-size:cover}
#section1 .section-txt{padding-top:50px}
#section2{padding-top:20px}
#section2 .section-txt{width:68%}
#section2-1{padding-top:20px}
#section2-1 .section-txt{width:68%}
.monitor-area{width:42%}
.blimg-area{width:32%}
.monitor{margin-right:20px;margin-top:20px;width:230px;height:193px;background-size:cover}
.monitor-back{padding:6px 5px 0 5px}
.b-design{width:150px;height:102px}
.blimg-area{padding-right:20px}
h3{padding-top:50px;margin-bottom:30px;font-size:30px;}
.skin-sample p{font-size:14px}
.skin-sample h4{font-size:20px}
.blog-check{font-size:14px}
.blog-check li{background-position:left 4px}
#section4{background-size:cover}
}

@media only screen and (max-width:768px) {
.pro1-bg .col-lg-6, .pro1-bg .col-sm-6, .pro2-bg .col-lg-6, .pro2-bg .col-sm-6, .pro3-bg .col-lg-6, .pro3-bg .col-sm-6, .pro4-bg .col-lg-6, .pro4-bg .col-sm-6, .pro5-bg .col-lg-6, .pro5-bg .col-sm-6, .pro6-bg .col-lg-6, .pro6-bg .col-sm-6, .pro7-bg .col-lg-6, .pro7-bg .col-sm-6, .pro8-bg .col-lg-6, .pro8-bg .col-sm-6, .pro9-bg .col-lg-6, .pro9-bg .col-sm-6, .pro10-bg .col-lg-6, .pro10-bg .col-sm-6
{min-height:0}
.homepage-list li br{display:none}
#client{height:220px}
}



@media only screen and (max-width:640px) {
#section2{position:relative}
#section2-1{position:relative}
.blimg-area{position:absolute;bottom:0}
.client li{width:33.3%;}
.main-visual{height:450px}
.l-area {padding-right:2em;}
.visual_texts01{margin-top:50px}
.visual_texts01 h2, .visual_texts02 h2{font-size:48px}
.visual_texts02 span{font-size:14px}

.main-con{height:340px}
.main-copy{font-size:28px}
.copy-area .sub-copy{max-width:230px}
.sub-copy{min-width:100px}
.blog-icon{top:-10px}
#section2 .section-txt{padding-top:34px}
#section2-1 .section-txt{padding-top:34px}
#client{height:190px}
#client .section-txt{padding-top:30px;width:70%}
.cl-area{padding-right:20px;width:30%}
.client{margin:60px auto}
}


@media only screen and (max-width:580px) {
.blog-list>li{float:none;width:100%;margin-bottom:50px}
.cafe-list li{float:none;width:100%;margin-bottom:40px}
.homepage-list li{float:none;width:100%;margin-right:0;margin:10px 0}

}

@media only screen and (max-width:480px) {
.skin-sample > li{width:100%;float:none;margin-bottom:50px}
.skin-sample ul{height:auto;margin-bottom:20px}
#section2{position:relative}
#section2-1{position:relative}
.blimg-area{position:absolute;bottom:0;left:0;width:32%}
#section2 .section-txt{padding-bottom:10px}
#section2-1 .section-txt{padding-bottom:10px}
.client li{width:50%;}
}

@media only screen and (max-width:460px) {
#section1 .section-txt{padding-top:30px}
.blimg-area{display:none}
#section2{padding-left:20px}
#section2 .section-txt{width:100%;}
#section2-1{padding-left:20px}
#section2-1 .section-txt{width:100%;}
}

@media only screen and (max-width:420px) {
#section1{padding-left:20px;height:auto;padding-bottom:20px}
.monitor-area{display:none}
.visual li:nth-child(2){background-position:-100px top !important}
#section1 .section-txt{width:100%;}
#section5{padding-top:10px}
.phone{padding-left:40px;width:210px;height:50px;font-size:24px}
#client{height:auto}
#client .section-txt{padding-top:0;width:100%;padding-bottom:30px;padding-left:20px}
.cl-area{display:none}
}