@charset "utf-8";

/* 공통속성 */
.container{width: 1440px; margin: 0 auto; height: inherit}
.left{float: left}
.right{float: right}
/* h2{margin-bottom: 80px; padding: 0 0 18px 27px;color: #111; font-size: 21px; font-weight: 600; letter-spacing: -1px;} */
h3{color: #151515; font-size: 26px; font-weight: 900}
.bg{background: #f3f3f3}

/* 레이아웃 */
#wrap{width: 100%}
#header{position: absolute; width: 100%; height: 80px; top: 0; left: 0; z-index: 3}
#contents{width: 100%;}
#banner{width: 100%; height: 700px; margin-bottom: 70px; background: url(../images/main_bg.jpg) no-repeat center -350px; overflow: hidden; }
#tab{width: 100%; margin-bottom: 110px; padding: 10px 0;}
#work_list{width: 100%; height: auto}
#footer{width: 100%; margin-top: -140px;}

/* header */
#header h1 a{display: block; margin-top: 34px; color: #fff; font-size: 30px; font-weight: 200; letter-spacing: -1px}
#header h1 a span{font-weight: 600}
#header .nav li{float: left; margin: 0 42px 0 42px;}
#header .nav li a{display: block; margin-top: 34px; padding-bottom: 10px; color: #fff; font-size: 21px; font-weight: 500; letter-spacing: -0.5px}
#header .nav li:last-child{margin-right: 0}
#header .nav li:hover a{border-bottom: 4px solid #ffef38}

/* banner */
#banner #slide{position: relative; width: 100%; height: 700px; overflow: hidden}
#banner #slide ul{position: relative; float: left; width: 100%; height: 700px}
#banner #slide li{position: absolute; width: 100%; height: 700px}
#banner #slide .slide_1{left: 0; background: url(../images/slide_1.jpg) no-repeat center}
#banner #slide .slide_2{left: 100%; background: url(../images/slide_2.jpg) no-repeat center}
#banner #slide .slide_3{left: 200%; background: url(../images/slide_3.jpg) no-repeat center}
#banner #slide li a{display: block; width: 100%; height: 700px}
#banner #slide div{position: absolute; text-align: center}
/* #banner #slide .slide_1 div{top: 292px; left: 842px}
#banner #slide .slide_2 div{top: 248px; left: 785px}
#banner #slide .slide_3 div{top: 275px; left: 815px} */
#banner #slide .slide_1 div{top: 292px; left: 50%; transform: translate(-50%, 0)}
#banner #slide .slide_2 div{top: 270px; left: 50%; transform: translate(-50%, 0)}
#banner #slide .slide_3 div{top: 275px; left: 50%; transform: translate(-50%, 0)}
#banner #slide div p{margin-top: 27px; color: #fff; font-size: 21px; text-align: center; letter-spacing: -0.5px}

#btn_list ul{position:relative; top:-26px; left: 50%; transform: translate(-26px, -50%)}
#btn_list li{background: url(../images/slide_btn.png)0 -10px no-repeat; width:6px; height:6px; float:left; overflow:hidden; margin:0 5px; cursor:pointer}
#btn_list li.on{background-position:0 0}
#btn_list li a{display:block; text-indent:-999999px}

/* tab */
#tab ul{width: 1245px; margin: 0 auto;}
#tab li{float: left}
#tab li a{display: block; margin: 0 70px; padding: 2px 15px; color: #111; font-size: 21px; font-weight: 700; letter-spacing: -1px}
#tab li:hover a{background: #ffef38}
.on{background: #ffef38}
#tab.sticky{position: fixed; top: 0; background: rgba(255,255,255,.9); z-index: 9}

/* work */
.work{width: 100%; height: auto; padding: 150px 0}
.work .container{width: 1386px; padding: 0 27px;}
.work .content{position: relative; width: 362px; height: 470px; padding: 115px 40px 0 40px; background: #555;}
.work .content h2{margin-bottom: 18px; color: #fff; font-size: 32px; font-weight: 700}
.work .content h2 span{font-size: 21px; font-weight: 100}
.work .content p{color: #fff}
.work .content .plus{margin-bottom: 28px; font-size: 60px; font-weight: 100}
.work .content .t_txt{margin-bottom: 50px; font-size: 24px; line-height: 30px}
.work .content .s_txt{font-size: 18px; font-weight: 300}
.work .content .details{margin-top: 20px; padding: 7px 0; color: #fff; font-size: 14px; font-weight: 300; border-top: 1px solid #fff}
.work .content .pop_btn{position: absolute; bottom: 40px; cursor: pointer;}
.work .content .pop_btn a{display: block; width: 247px; height: 29px; color: #fff; font-size: 20px; font-weight: 300; text-align: left; line-height: 20px; letter-spacing: -0.5px; background: url(../images/arrow.png) no-repeat right 2px}
.work .content .pop_1 a, .work .content .pop_2 a, .work .content .pop_3 a, .work .content .pop_4 a, .work .content .pop_5 a, .work .content .pop_6 a{width: 205px}
.work .content .pop_btn:hover a{background: url(../images/arrow_on.png) no-repeat right 2px}

.work .mac_inner{height: 0}

.work .img p{width: 941px; height: 601px; position: relative; top: 0}
.work .img p .click_icon{display: block; position: absolute; top: 410px; right: 45px; width: 60px; height: 60px; border-radius: 60px; box-shadow: 0 0 0 rgba(255, 239, 56, .7); animation: pulse 2s infinite; background: url(../images/click_icon.png) no-repeat #ffef38; cursor: pointer; z-index: 2}
@-webkit-keyframes pulse { 
	0% { box-shadow: 0 0 0 0 rgba(255, 239, 56, .8); } 
	60%{ box-shadow: 0 0 0 10px rgba(255, 239, 56, 0); } 
	100%{ box-shadow: 0 0 0 0 rgba(255, 239, 56, 0); } 
}
@keyframes pulse { 
	0% { -moz-box-shadow: 0 0 0 0 rgba(255, 239, 56, .8); box-shadow: 0 0 0 0 rgba(255, 239, 56, .8); } 
	60%{ -moz-box-shadow: 0 0 0 16px rgba(255, 239, 56, 0); box-shadow: 0 0 0 16px rgba(255, 239, 56, 0); } 
	100%{ -moz-box-shadow: 0 0 0 0 rgba(255, 239, 56, 0); box-shadow: 0 0 0 0 rgba(255, 239, 56, 0); } 
}
.mac_con{width: 815px; height: 467px; overflow: hidden; position: relative; top: -593px; left: 63px; display: block}
.mac_con>img{display: block; position: relative; top: 0; left: 0}


/* top btn */
.top_btn{display: none; position: fixed; right: 70px; bottom: 130px; width: 60px; height: 60px; font-size: 13px; font-weight: 500; text-align: center; line-height: 80px; border: 1px solid #333; border-radius: 50%; background: url(../images/top_btn_bg.png) no-repeat center 10px #f5f5f5; cursor: pointer; z-index: 99}
.top_btn:hover{color: #fff; background: url(../images/top_btn_bg_on.png) no-repeat center 10px #333;}


/* footer */
#footer{margin-top: 0; background: #fff}
#footer .container{padding-top: 40px; border-top: 1px solid #f3f3f3}
#footer .w3c{height: 15px}
#footer .w3c div{width: 80px; height: 15px; padding: 0 15px}
#footer .w3c div:last-child{padding-right: 0}
#footer .w3c div a{display: block; width: 80px; height: 15px}
/* #footer .w3c img{display: block; width: 50px; height: 24px}
#footer .w3c p{margin: 3px 0 0 8px; color: #333; font-size: 18px; font-weight: 500} */
#footer .copy{margin: 38px 0 60px; color: #aaa; font-size: 16px; font-weight: 300; text-align: center}

/* modal */
.modal_1, .modal_2, .modal_3, .modal_4, .modal_5, .modal_6, .modal_7{display: none; position: fixed; width: 100%; height: 100vh;top: 0; left:0; background: rgba(0,0,0,.85); overflow: hidden; z-index: 9999}
.modal_1 .close_btn, .modal_2 .close_btn, .modal_3 .close_btn, .modal_4 .close_btn, .modal_5 .close_btn, .modal_6 .close_btn, .modal_7 .close_btn{position: absolute; top: 10%; right: 15%; cursor: pointer;}

.modal_con{width: 1000px; height: 600px; margin: 200px auto; overflow: hidden;  position: relative; clear:left; }
.modal_1 .slider_panel1{width: 4000px; position: relative;}
.modal_2 .slider_panel2, .modal_3 .slider_panel3, .modal_7 .slider_panel7{width: 3000px; position: relative;}
.modal_4 .slider_panel4, .modal_5 .slider_panel5, .modal_6 .slider_panel6{width: 2000px; position: relative;}
.slider_image{float: left; width: 1000px; height: 600px;}

/* control panel */
.control_panel{position: absolute; left: 50%; bottom: 0; height: 15px; /* width:95px; */ width: auto; transform: translate(-50%, -50%); overflow: hidden; }
.control_button{width: 15px; height: 45px; position: relative; float: left; margin: 0 3px; cursor: pointer; background: url(../images/point_button.png);}
.control_button2{width: 15px; height: 45px; position: relative; float: left; margin: 0 3px; cursor: pointer; background: url(../images/point_button.png);}
.control_button3{width: 15px; height: 45px; position: relative; float: left; margin: 0 3px; cursor: pointer; background: url(../images/point_button.png);}
.control_button4{width: 15px; height: 45px; position: relative; float: left; margin: 0 3px; cursor: pointer; background: url(../images/point_button.png);}
.control_button5{width: 15px; height: 45px; position: relative; float: left; margin: 0 3px; cursor: pointer; background: url(../images/point_button.png);}
.control_button6{width: 15px; height: 45px; position: relative; float: left; margin: 0 3px; cursor: pointer; background: url(../images/point_button.png);}
.control_button7{width: 15px; height: 45px; position: relative; float: left; margin: 0 3px; cursor: pointer; background: url(../images/point_button.png);}

.control_button:hover, .control_button2:hover, .control_button3:hover, .control_button4:hover, .control_button5:hover, .control_button6:hover, .control_button7:hover{top:-15px;}
.control_button.active, .control_button2.active, .control_button3.active, .control_button4.active, .control_button5.active, .control_button6.active, .control_button7.active{top: -30px;}

@media screen and (max-width:1439px) {
	.container{width: 100%}
}