@charset "utf-8";
/* 웹폰트 CSS */
@import url('https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/stylesheets/NotoSansKR-Hestia.css');
@font-face {font-family: 'Y Spotlight App';font-style: normal; font-weight: 100;src: url('yspotlightapp.otf') format('opentype');}


body{overflow-x:hidden;width:100%}
.header .nav{position:fixed; z-index:1; top:-100px; width:100%; height:100px; background:rgba(0,0,0,.1); transition: all 0.5s}
.header .nav.on{top:0;}
.header .nav ul{float: right;padding:25% 10% 10%; width:80%;background:#fff; list-style:none;z-index:10000;box-sizing : content-box}
.header .nav ul li{display:block; padding:20px;}
.header .nav ul li a{text-decoration:none; font-weight:400; color:#111}
.header .nav ul li a:hover{text-decoration:underline;}
.section{width:100%; height:100px}
.section .nav{width:100%; height:100px;}
.section .nav .logo{position:absolute; top:0; z-index:1000}
.section .nav ul{position:absolute;top:30px;right:50px; padding:0; min-width:600px; list-style:none;z-index:1000}
.section .nav ul li{display:inline-block; padding:5px 20px;font-family:'Noto Sans Korean'}
.section .nav ul li a{text-decoration:none;  color:#fff;}
.section .nav ul li a:hover{text-decoration:underline;}
.section .page.loading{display:none;}
.section .page .title{ font-weight:bold;}
.section .page.index .title{padding:0;}
.slider .sd_img{height:100%;float:right;width:100%;}
.slider .sd_img img{height:100%;float:right;width:100%;}

/* 모바일용 CSS */
/* 기본 CSS */
#pop1{top:5%;left:5%} #pop1 img{width:80%}
.slider .sd_img{width:100%;height:100%;;background:url('../images/p-images/slide02.png') 90% 0 no-repeat}
.slider .sd_img img {display:none}
.container{
width:90%;
max-width:1500px;
margin:0 auto;
}    

.sub_nav{top:0}
.cfixed:after, .container:after{
display:block;
content:"";
clear:both;
}
    
.blind{
position:absolute;
width:0;
height:0;
line-height:0;
text-indent:-9999px;
overflow:hidden;
}

.sec-tit{
font-size:60px;
color:#353436;
}

.divider{
width:90%;
max-width:1132px;
margin:0 auto;
margin-top:77px;
background:#eee;
}
    
.m-divider{
width:20px;
margin:0 auto;
margin-top:77px;
background:#353436;
}
    
/* 헤더 영역 CSS */
.header{width:100%;
position:fixed;
z-index:100000000;
}
.section .nav{position:static; width:100%; height:100px;}
.section .nav .logo{position:fixed;margin:17px 0 0 33px} 
.nav .logo{position:fixed;margin:15px 0 0 15px} 
.nav .logo,.nav ul{float:left;}
.nav ul{display:none}

.header .logo a{font-size:26px;color:#353436;font-weight:normal;}
    
.header .nav{position:fixed; z-index:10000; top:-100px; width:100%; height:100px; background:#fff; transition: all 0.5s;}
.header .nav.sub {top:0px}
.header .nav li{border-bottom:1px solid #ffcc33;font-family:'Noto Sans Korean'}
    
.header .nav li a{font-size:14px;color:#fff;}
.header .nav li a:hover{font-weight:bold;color:#ffcc33}
    
.header .menu-toggle-btn{
position:fixed;
top:30px;
right:30px;
width:20px;
margin-top:4px;
cursor:pointer;
z-index:100000000;
}
    
.header .menu-toggle-btn span{
display:block;
width:100%;
height:2px;
background:#353436;
}
    
.header .menu-toggle-btn span:nth-child(2){
margin:5px 0;
}

/* 슬라이더 영역 CSS */
.slider{position:absolute;
min-width:100%;
height:100%;
text-align:left;
overflow:hidden;
z-index:0

}
.slider p.tit{
font-family: 'Y Spotlight App';
width:80%;
position:absolute;
text-align:center;
display:block;
letter-spacing:-1px;
font-size:1.1em;
left:10%;
line-height:150%;
top:250px;z-index:10
}
.slider p.tit img{margin-bottom:15px;width:100%}


.slider p span{color:#6c646a;font-size:0.8em;line-height:150%; display: block}

/* 슬라이더 영역 CSS */
.sub_slider{position:relative;width:100%;height:auto;margin-top:100px;overflow:hidden;}
.sub_slider img{display:block;min-width:100%;height:100%;}

.sub_slider p{position:absolute;top:120px;width:100%;text-align:center;color:#fff;font-weight:bold;font-family:'Noto Sans Korean';}
.sub_slider p img{display: inline;width:370px;min-width:370px;margin-top:15px}
.sub_slider p strong{padding-top:15px;font-size:3em;display:inline-block}

.slider img.tt{min-width:40%; padding-top:20px}
.sub_slider p img.tt1{min-width:190px;width:190px; padding-top:5px}

    
/* 디스플레이 영역 CSS */
.display-section{margin-top:5%;text-align:center;}

.display-section .sec-tit{margin-bottom:30px;font-weight:bold}
    
.display-section .desc{color:#616161;line-height:1.9;font-weight:bold;}
.display-section .desc a img{
width:60px;
vertical-align: bottom; margin: 0 0 -2px 10px;}

.promotion-section .desc{position:relative;width:100%;height:auto;margin-top:50px;text-align:center}
.promotion-section .desc img{width:80%;margin:0 auto}
.promotion-section .desc span{position:absolute;z-index:100;top:45%;left:35%;color:#fff;font-size:2.5em}
.promotion-section .desc span strong{font-size:28px;margin:-3px 10px 3px 0}
.display-section .sec-tit{text-align:center;padding-top:180px;}
    
/* 프로모션 영역 CSS */
.promotion-section{
padding-top:68px;line-height:180%;width:100%
}

.promotion-section span{
font-weight:bold;color:#3437b2}
.promotion-section .promo-list li{
margin-top:52px;
text-align:center;
}
    
.promotion-section .promo-list li:first-child{
margin-top:0;
}
    
.promotion-section .promo-list li img{
height:52px;
}
    
.promotion-section .promo-list li h3{
margin:29px 0 20px 0;
color:#ffbe40;
font-weight:normal;
}
    
.promotion-section .promo-list li p{
font-size:14px;
font-family:'PT Serif';
color:#616161;
line-height:1.5;
}  
    
/* 최근 작업 영역 CSS */

.content{text-align:center}
.work-section{
margin:73px auto 0;height:100%;width:100%;display:inline-block
}
    
.work-section .sec-tit{
width:90%;
max-width:1500px;
margin:100px auto 40px;
text-align:center;
}

.work-section .work-list{
width:100%;    margin: 0 auto;
}
.work-section .work-list li{
width:100%;
}
.work-section .work-list li .wk_bk h3{position:absolute;top:100px;text-align:center;width:100%}
.work-section .work-list li a{
display:block;
position:relative;
width:100%;
height:100%;
}
    
.work-section .work-list li a:before{
display:block;
position:absolute;
top:0;
left:0;
z-index:10;
width:100%;
height:100%;
background:#ffcf38;
content:"";
opacity:0;
transition:all 0.2s;

}

.work-section .work-list li a:hover:before{
opacity:0.86;
}
.work-section .work-list li .wk_bk{
position:relative;
opacity:0.9;
transition:all 0.3s;
color:#fff;
text-shadow: 0 0 2px rgba(0,0,0,.5);
font-size:2.5em;
font-weight:bold;
width:100%;
height:auto
}


.work-section .work-list li .info{
position:absolute;
bottom:50%;transform:translateY(50%);
left:0;
z-index:20;
opacity:0;
transition:all 0.3s;
text-align:center;
width:100%
}
    
.work-section .work-list li a:hover .info{
transform:translateY(23px);
opacity:1;
}
.work-section .work-list li a:hover .wk_bk{
display:none}
    
.work-section .work-list li .info h3{
margin-bottom:8px;
font-size:30px;
color:#fff;
font-weight:bold;
margin-top:25px
}
    
.work-section .work-list li .info span{
font-size:18px;
color:#383639;
line-height:200%
}
    
.work-section .work-list li img{
display:block;
width:100%;
max-width:100%;
height:auto;
}   
    
/* 최근 글 영역 CSS */
 
.contact-section .sec-tit{
margin-bottom:47px;
text-align:center;
}
    
.contact-section .contact-list li{
width:100%;
margin-top:45px;
}
    
.contact-section .contact-list li:first-child{
margin-top:0;
}
    
.contact-section .contact-list li img{
display:block;
width:100%;
max-width:100%;
height:auto;
}
    
.contact-section .contact-list li time{
display:block;
margin:11px 0 10px 0;
font-size:11px;
color:#9e9e9e;
}
    
.contact-section .contact-list li h3{
color:#424242;
font-weight:normal;
line-height:1.6;
}    
    
/* 연락처 영역 CSS */
.contact-section{
margin-top:100px;
}

.contact-section .sec-tit{
margin-bottom:47px;
}

.contact-section .form-box .form input{
padding-bottom:13px;
margin-bottom:38px;
}

.contact-section .form-box .textarea textarea{
height:165px;
}

.contact-section .form-box .send-btn{
margin-right:50px;
margin-top:36px;
text-align:right;
}

.contact-section .form-box .send-btn button{
padding:15px;
margin:0; 
border:0;
font-size:12px;
color:#fff;
background:#353436;
font-family:'Montserrat';
cursor:pointer;
}

.blog-list li{text-align:center;margin-bottom:50px}
.blog-list li a img{margin-bottom:10px}

.sub_tit {width:90%;margin:0 auto; padding:70px 0 50px;border-bottom:2px solid #2e375f;text-align: center;font-size: 2em;color: #232323;font-weight: 700;font-family:'Noto Sans Korean'}
.sub_con {display:inline;margin:0 auto;text-align: center;font-family:'Noto Sans Korean',sans-serif !important;line-height:200%}
.sub_con strong{margin-top:150px;}
.sub_con .bg_g{background:#f7f7f7;margin-bottom:80px;max-width:100%}
.sub_con  img{max-width:100%}
.sub_con .bg_g dl{border-bottom:1px solid #2e375f;display:inline-block;width:100%}
.sub_con .bg_g dt,.sub_con .bg_g dd{float:left}
.sub_con .bg_g dt{width:10%;padding:5%}
.sub_con .bg_g dd{width:70%;text-align:left;padding:5%}
.sub_con .bg_g dd strong{font-size:1.5em;padding-bottom:20px;}

.sub_con .pdt dl{display:inline-block;width:80%;padding:5%;text-align: center;border:1px solid #a5a5a5;margin:0 auto 25px}
.sub_con .pdt dt{width:90%;padding:5%}
.sub_con .pdt dd{width:90%;padding:5%}
.sub_con .pdt dl.blank{display:none}

.sub_con .txt{text-align:center;margin:132px;;gaeul:5}
.sub_con .red{margin:70px 0 30px;color:#ffcc33;font-size:1.4em}
.sub_con .img100{width:100%;margin:70px 0 30px;}
.char-item{
    padding:40px 0;
    border-bottom:1px solid #dddddd;
}

.char-item-img{
    max-width:215px;
    width:100%;
    float:left;
    position:relative;
}
.char-item-img:before{
    content:"";
    display:block;
    padding-top:56.26%;
}
.char-item-img img{
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}
.char-item-txt{
    width:calc(100% - 215px);
    float:left;
}
.char-item-txt dt{
    font-size:20px;
    color:#232323;
    font-weight:700;
    margin-bottom:20px;
}
.char-item-txt dd{
    font-size:16px;
    color:#232323;
    padding-left:10px;
    box-sizing:border-box;
    position:relative;
    margin:10px 0;
}
.char-item-txt dd:before{
    content:"";
    display:block;
    width:3px;
    height:3px;
    border-radius:50%;
    background:#232323;
    position:absolute;
    top:11px;
    left:0;
}
.char-list{
    margin: 30px auto;
	width:1220px;max-width:100%;
}
.char-list .char-list-item{
    width:calc(100% - 20px);
    margin:10px;
    float:left;
}
.char-list .char-list-item .char-list-item-txt{
    margin-top:5px;
	padding:10px;
    box-sizing:border-box;
    border:1px solid #dddddd;
    text-align:center;
}
.char-list .char-list-item .char-list-item-txt p{
    font-size:16px;
    color:#232323;
    font-weight:500;
}

.menu-link{
    margin: 0 auto;
	width:1220px;
	max-width:100%;
    text-align:center;
	 display:block;
}
.menu-link a{
    display:inline-block;
    padding:20px 60px;
    box-sizing:border-box;
    background:#8993af;
    font-size:16px;
    color:#ffffff;
    font-weight:500;
	margin-top: 70px;
}
    
/* 푸터 영역 CSS */
.footer{width:90%;
position:relative;
text-align:center;
margin:70px auto 0;
border-top: 2px solid #595959;
padding:5%
}
    
.footer iframe{
width:100%;
height:320px;
}
    
.footer span{
color:#353436;
text-align:center;
margin:150px auto;
}    
.aside{display:none}
.blog-list h3{color:#ffbe40;padding:8px}
   
/* PC용 CSS */
@media all and (min-width:1132px){

.aside{display:none;position:fixed; right:0; top:50%;margin-top:-50px;z-index:100000}
.aside ul{margin:0; padding:0; list-style:none; ;}
.aside ul li a{display:block; margin:20px; width:12px; height:12px; overflow:hidden; line-height:50px; text-indent:-1000px; background:#333;border-radius:50%;}
.aside ul li.on a{background:#8573d4;}
.aside ul li a:hover{background:#ffe04d;}

.slider .sd_img img,.nav ul{display:block}

.nav .logo{display:block;margin:17px 0 0 33px}
.header .nav li{border-bottom:0;}
.header .nav ul{float: right;margin:30px 50px 0 50px; padding:0; min-width:600px; list-style:none;z-index:10000}
.header .nav ul li{display:inline-block; padding:5px 20px;}
.header .nav ul li a{text-decoration:none; font-weight:400; color:#111}
.header .nav ul li a:hover{text-decoration:underline;}
.menu-toggle-btn{display:none}
.content {height:100%;display:block}
.slider p.tit{
font-family: 'Y Spotlight App';
position:absolute;
text-align:left;
display:block;
letter-spacing:-1px;
font-size:2.8em;
top:160px;
line-height:150%
}
.slider p.tit img{width:40%}

.char-list .char-list-item{
    width:calc(33.33% - 20px);
    margin:10px;
    float:left;
}

#wrap .slider p.txt{
width:100%;
color:#fff;
bottom:10%
}

.sub_con .bg_g dl{width:1200px}
.sub_con .pdt{margin:0 auto;width:90%; height: 750px;}

.sub_con .pdt dl{float:left;display:inline-block;width:27%;height:300px;padding:20px;text-align: center;border:1px solid #a5a5a5;margin:20px}
.sub_con .pdt dt{width:90%;padding:5%}
.sub_con .pdt dd{width:90%;padding:5%}
.sub_con .pdt dl.blank{display:block;border:1px solid #dbdbdb}
/* 디스플레이 영역 CSS */
.display-section{
margin-top:100px;
text-align:left;
}
    
.display-section .sec-tit{
float:left;
margin-bottom:0;
}
    
.display-section .desc{
position:relative;
float:right;
padding-left:20px;
color:#616161; 
line-height:1.9;
}
    
.display-section .desc:before{
display:block;
position:absolute;
top:9px;
left:0;
width:2px;
height:44px;
background:#e0e0e0;
content:"";
}   

.work-section .work-list li .wk_bk{
position:absolute;
top:0;
left:50%;transform:translatex(-50%);
z-index:19;
opacity:0.5;
transition:all 0.3s;
color:#fff;
font-size:30px;
font-weight:bold;
background:#000;
width:100%;height:100%;text-align:center;
}
.work-section .work-list li .wk_bk h3{margin-top:105px}

/* 프로모션 영역 CSS */
.promotion-section .promo-list li{
width:23.67491166077739%;
/* 268px ÷ 1132px*/
margin-left:1.76678445229682%;
/* 20px ÷ 1132px*/
}
.promotion-section {width:90%;
max-width:1500px;
margin:0 auto;}
.promotion-section .container{float:left; width:50%;margin-right:7%;font-weight:400;color:#616161;line-height:200%;font-family:'Noto Sans Korean'}
.promotion-section .desc{position:relative;float:left; width:40%;margin-top:-70px}
.promotion-section .desc span{position:absolute;z-index:100;top:30px;left:100px;color:#fff;font-size:36px}
.promotion-section .desc span strong{font-size:28px;margin:-3px 10px 3px 0}
.display-section .sec-tit{text-align:center;padding-top:180px;}

/* 최근 작업 영역 CSS */
.work-section .sec-tit,.sec-tit,.contact-section .sec-tit{
text-align:left;
}
    
.work-section .work-list li{
width:50%;    float: left;
}   

/* 최근 글 영역 CSS */
.sec-tit{
margin-bottom:0;
} 
    
.blog-list{
float:right;
width:74.5583038869258%;
/* 844px ÷ 1132px*/
}
    
.blog-list li{float:left;
width:48%;
/* 268px ÷ 844px*/
margin-left:2%;
/* 20px ÷ 844px*/
}

.blog-list li time{padding:10px;display:inline-block;font-size:0.8em}
.blog-list li h3{color:#ffbe40;font-size:1.5em;padding-top:10px}

.fbox{width:90%;max-width:1500px;margin:50px auto 0}
/* 연락처 영역 CSS */
.contact-section{
display: inline-block;
margin-top:100px;
width: 100%;
}

.contact-section .sec-tit{
float:left;
margin-bottom:0;
height:200px
}
    
.contact-section .form-box{
float:left;
width:74%;
margin-left:5%
/* 844px ÷ 1132px*/
}
    
.contact-section .form-box .form, .contact-section .form-box .textarea{
width:45%; display:inline-block;vertical-align:top
/* 412px ÷ 844px*/
}

.contact-section .form-box .form{
margin-right:5%;
/* 20px ÷ 844px*/
}    
}