@charset "utf-8";
/* CSS Document */

#designService{min-width:1200px;}
#designService *{border:none;}

#designService a { border:none; }
#designService a:hover {text-decoration: none; border:none;}
#designService a:active {text-decoration: none; border:none;}
#designService ul li {list-style: none; margin:0; padding:0;}

#designService .pad150 {padding:75px;}

.mainBanner {  margin: 0 auto; }
.mainBanner .bannerArea { background: url("../images/ko/img-dser/main_banner_bg.png") center center no-repeat; width:100%; height: 630px; position: relative;min-width: 1200px;}
.mainBanner .bannerArea .bannerBox { width: 700px; position: absolute; right:15%;}
.mainBanner .bannerArea span.book1 {position: absolute; top:48px; left: 5%; z-index: 1;}
.mainBanner .bannerArea span.book2 {position: absolute; top:48px; left: 35%; z-index: 2;}
.mainBanner .bannerArea span.book3 {position: absolute; top:48px; left: 65%; z-index: 3;}



#menubar   {  width: 100%; margin: 0 auto; overflow: hidden; text-align: center; background-color: #fff; z-index: 999;}
#menubar a { display:inline-block; padding: 20px 14px;  }
#menubar a:focus {outline: none;}
.sticky {position: fixed; top: 0; left: 0; }
.sticky + .contentArea {}

.contentArea { padding: 0; }


.introduce { width: 1200px; margin: 200px auto; position: relative; height: 919px; }

.introduce .left { float:left;  }
.introduce .left .img2 { padding-top:160px;}
.introduce .right {float:left;}


.expertArea {clear: both;}
.expertArea .expert { width:1050px;  margin: 200px auto; }
.expertArea .expert .txt { width:50%;  float: left;}
.expertArea .expert .txt  ul li {padding:10px 0 ;}
.expertArea .expert .img { width:50%; float: left; text-align: right;}

.expertArea .expert .txt2 { width:50%;  float: left; text-align: right; padding:200px 0; }
.expertArea .expert .txt2  ul li {padding:20px 10px;}
.expertArea .expert .txt2  .subtxt{ padding-top:20px; border:1px solid #ff0000;}
.expertArea .expert .img2 { width:50%; float: left; }

.expertArea .expert .expert_book_img{width:530px; height:679px; overflow:hidden; margin:0 auto;}

.expertArea .expert .expert_book_img ul  {width:100%; height: 100%; position: relative;}
.expertArea .expert .expert_book_img ul li {position:absolute; width:100%; height: 100%; left:0; top:0;}


.subBanner { background: url("../images/ko/img-dser/only_design_banner.png") center center no-repeat ; width:100%;  height: 517px;   clear: both;    text-align: center; }



.experience { }
.experience .title {text-align: center; padding:0 0 80px 0 ;}

.experience .bookArea {   text-align: center;}
.book_name {width:234px; font-size:20px; font-weight:bold;  text-align:center; text-indent: 30px;}
.experience .explation {width:1200px; margin: 0 auto; text-align: center;}
.experience .explation .btn{margin: 50px 0; }
.experience .explation .btn div {display:inline-block;}
.experience .explation .info {margin: 117px auto 0;}
.experience .explation .info .ex{ margin-top:50px;}
.experience .explation .info .note { margin-top:120px; text-align: left; text-indent: 85px;}



.onlyOne { text-align: center; margin: 0 auto;}
.onlyOne .bg_img { background: url("../images/ko/img-dser/make_bg1.png") center center no-repeat; width:100%; height: 179px;}
.onlyOne .estimate { background: url("../images/ko/img-dser/make_bg2.png") center center no-repeat; width:100%; height: 571px;}
.onlyOne .estimate .btnArea { width: 1040px; margin: 0 auto; position: relative; text-align: left;}
.onlyOne .estimate .btnArea .btn { position: absolute; top:290px;}

.onlyOne .designSample { background: url("../images/ko/img-dser/make_bg3.png")center center no-repeat; width:100%; height: 791px;  }
.onlyOne .designSample .title { }
.onlyOne .designSample .sampleSlick { width: 1200px; margin: 0 auto ;   padding-top:50px;}

.onlyOne .contentDesign { background: url("../images/ko/img-dser/contentDesign_bg.jpg")center center repeat-y; width:100%;  height: inherit; }
.onlyOne .contentDesign .contentDesignArea {width:1200px; margin: 0 auto 100px ;  clear: both;}
.onlyOne .contentDesign .contentDesignArea .title { padding:80px;}
.onlyOne .contentDesign .contentDesignArea .cont { float:left;   width: 396px; padding:2px 2px ;  position: relative;  box-sizing:border-box; }


.onlyOne .contentDesign .contentDesignArea .cont .bookImg {display:block; height:auto;}


.onlyOne .contentDesign .contentDesignArea .cont .overlay { 
 position: absolute;
  top: 0;
  bottom: 0;
  left: 2px;
  right: 0;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: #f1f1f1;
  height: 100%;
  width: inherit;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 22px;
  text-align: center;
  cursor: pointer;
 
}
.onlyOne .contentDesign  .contentDesignArea .cont .overlay span {  position: absolute; top: 50%;   transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center; font-size:18px; }
.onlyOne .contentDesign  .contentDesignArea .cont .overlay span p {font-size:24px;  margin-top:5px;}
.onlyOne .contentDesign  .contentDesignArea .cont:hover .overlay {opacity: 1; text-decoration: none;}

.onlyOne .contentDesign  .notice { width: 1200px; margin: 0 auto; text-align: left;  padding:100px 0; }
.onlyOne .contentDesign  .notice img { padding-top:100px;}


.onlyOne .popup {
	position: fixed;
    width: 860px;
	height:72%;
    left: 50%;
    margin-left: -430px; /* half of width */
    top: 150px;
    

    /* decoration */
	overflow-x:hidden;
	overflow-y:hidden;
    border: 1px solid #000;
    background-color: #ffffff;
    box-sizing: border-box;display:none;
	padding-bottom:100px;
}

.onlyOne .popup2 {
	position: fixed;
    width: 860px;
	height:58%;
    left: 50%;
    margin-left: -430px; /* half of width */
    top: 150px;
    

    /* decoration */
	overflow-x:hidden;
	overflow-y:hidden;
    border: 1px solid #000;
    background-color: #ffffff;
    box-sizing: border-box;display:none;
	padding-bottom:100px;
}





.onlyOne .popup .pop_top {width:100%; height:70px; border-bottom:1px solid #dadada; float:left; background:#fff;}
.onlyOne .popup .pop_top h2 {float:left; font-size:18px; line-height:70px; font-weight:bold; font-family: 'Noto Sans KR', sans-serif; margin:0 0 20px 20px; }
.onlyOne .popup .close {position:absolute; right:20px; top:22px;}
.onlyOne .popup .pop_con { width:inherit; height:100%;  text-align:center; padding:7px;}
.onlyOne .popup .pop_con img {  text-align:center;  margin-bottom:30px; border:none; !important}
.onlyOne .popup .pop_con img:first-child {margin-top:30px;}



.onlyOne .popup2 .pop_top {width:100%; height:70px; border-bottom:1px solid #dadada; float:left; background:#fff;}
.onlyOne .popup2 .pop_top h2 {float:left; font-size:24px; line-height:70px; font-weight:bold; font-family: 'Noto Sans KR', sans-serif; margin:0 0 20px 20px; }
.onlyOne .popup2 .close {position:absolute; right:20px; top:22px;}
.onlyOne .popup2 .pop_con {float:left; width:100%; height:100%;  text-align:center; padding:20px;}
.onlyOne .popup2 .pop_con img {  text-align:center;  margin-bottom:30px;}
.onlyOne .popup2 .pop_con img:first-child {margin-top:30px;}