/* ¸ÞÀÎ ÄÁÅÙÃ÷ */
.mainWrap {width:100%; margin:0 auto;}
.main_slider {position:relative; z-index:9; width:100%;}
.contents {font-size:0; width:100%; text-align:center;}
.container {width:1200px; margin:0 auto;}
.mainWrap h2 {font-weight:700; font-size:34px; color:#1e1e1e; text-align:center; letter-spacing:1px; font-family:'Raleway', sans-serif;}

/* ÀÎÆ®·Î ¿µ¿ª */
.introwrap {width:100%; padding: 100px 0; background:url('../img/_designcoco/images/intro_bg.jpg') center no-repeat; text-align:left;}
.intro_tit {color:#000; font-size:32px; width:100%; line-height:34px; margin:0 auto; padding-bottom: 40px;}
.intro_txt {color:#666; font-size:14px; width:50%; line-height:22px; padding-bottom: 40px;}

/* ¹è³Ê ¿µ¿ª */
.bannerwrap {font-size:0; width:100%; display:table;}
.bannerwrap h3 {color:#FFF; font-family:'Raleway', sans-serif; font-weight:300; font-size:32px; padding-bottom: 20px;}
.bannerwrap p {color:#FFF; font-size:14px; line-height:20px; opacity:0.7;}
.bannerwrap .box {width:33.33%; display:table-cell; font-size:14px; vertical-align:top;  padding:50px;}
.bannerwrap .box_img {width:33.33%; display:table-cell; vertical-align:top;  background:url('../img/_designcoco/images/mainbn02.jpg')50% 50% no-repeat;  background-size:cover; vertical-align:middle;}
.bannerwrap .box_img img {width:100%; height:100%;}
.btnwrap {display:flex;}
.btn_pd {padding: 20px 0 10px 0;}
.bg1 {background:#997b5c;}
.bg2 {background:#102130;}

/* ¹è³Ê2 ¿µ¿ª */
.banner2wrap {font-size:0; width:100%; display:inline-block; padding: 80px 0; background:#F6F6F6;}
.banner2wrap > p {padding-bottom: 50px;}
.business_box {width:23%; display:inline-block; font-size:14px; vertical-align:top; margin:0 10px;}
.business_box img {width: 100%;}
.box_txt {padding: 15px 15px 0 0; text-align:left;}
.box_txt p {padding: 10px 0;}
.box_txt h3 {font-size:24px; color:#111; font-weight: 500; font-family: 'Raleway', sans-serif;}

/* Á¦Ç°¼Ò°³ ¿µ¿ª */
.productwrap {width:100%; padding: 80px 0;}
.productwrap p {padding-bottom: 30px;}

/* È«º¸¿µ»ó ¿µ¿ª */
.youtubewrap {width:100%; background:url('../img/_designcoco/images/movie_bg.jpg')50% 50% no-repeat; background-attachment:fixed; background-size:cover; padding: 80px 0;}
.youtubewrap .youtube_box {width:1200px; margin:0 auto; font-size:0; text-align:left;}
.youtubewrap .youtube_box .movie {display:inline-block; width:53%; height:360px;}
.youtubewrap .youtube_box .movietxt {display:inline-block; width:42%; padding-left:70px; color:#FFF; vertical-align:top;}
.youtubewrap .youtube_box .movietxt h3 {font-size:50px; font-weight:300; padding:40px 0; color:#FFF; font-family: 'Raleway', sans-serif;}
.youtubewrap .youtube_box .movietxt p {font-size:14px; line-height:22px; opacity:0.7; color:#FFF;}

/* ±¸±ÛÁöµµ ¿µ¿ª*/
.mapwrap {width:100%; height:450px;}

/* °í°´¼¾ÅÍ ¿µ¿ª */
.customerwrap {width:100%; padding: 40px 0;}
.cs_box {display:inline-block; width:33.33%; vertical-align:top; text-align: left;}
.cs_box > h3 {text-align:left; color:#222; font-size:17px; padding-bottom:10px; font-family: 'Raleway', sans-serif; letter-spacing: 0.5px; font-weight:600; display:inline-block;}
.cs_box .more {display:inline-block; float: right; padding-right:10px;}
.cs_box .more a {color:#666; display:inline-block;}
.cs_box .more a:hover {color:#666; text-decoration: underline;}
.cs_box_center {display:inline-block; width:33.33%; vertical-align:top; padding: 0 15px;}
.cs_box_center > h3 {text-align:left; color:#222; font-size:17px; padding-bottom:10px; font-family: 'Raleway', sans-serif; letter-spacing: 0.5px; font-weight:600;}
.box_in { border:1px solid #D5D5D5; height:220px; padding:30px; font-size:13px; line-height:20px; color:#888;}
.tel_num {color:#9f682d; font-size:32px;  font-weight:700;  font-family:"Source Sans Pro"; letter-spacing:1px;  padding-bottom:15px;}
.bank_num { color:#222; font-size:25px;  font-family:"Source Sans Pro"; font-weight:500; letter-spacing:1px;  padding-bottom:10px;}
.b_line { border-bottom:1px solid #E5E5E5;  margin:20px 30px;}
.cs_quick { display:inline-block; width:32%; vertical-align:top;  text-align:center;}
.cs_quick h4 { font-size:15px;  padding:10px 0;  color:#1e1e1e;  font-weight:600;}
.cs_quick p { font-size:12px;  padding:0 3px;  color:#888;  line-height:17px;}

/* Äü¸Þ´º ¿µ¿ª */
.quick_menu {position: fixed; _position: absolute; /*_z-index:-1;*/ right:10px;  bottom:10px; background:#444;  width:75px;  text-align:center;  font-size:12px;  z-index:999; font-family: 'Raleway', sans-serif; opacity:0.7;}
.quick_menu .top { background:#000;  padding:10px 0; }
.quick_menu .top a { color:#FFF; font-weight:600; display:block; cursor:pointer;}
.quick_menu .top a:hover { text-decoration:none;}
.quick_menu .down { background:#333;  padding:10px 0;}
.quick_menu .down a { color:#FFF;  font-weight:600;  display:block; cursor:pointer;}
.quick_menu .down a:hover { text-decoration:none;}
.quick_menu li { padding:9px 0;}
.quick_menu li a { color:#CCC;  font-weight:500;}
.quick_menu .start { padding-top:20px;}
.quick_menu .end { padding-bottom:25px;}
.dbp { height: 180px; margin-top: 30px; line-height: 1.4em; color: #666;}
.dbp a { padding: 0 10px; color: #000; font-weight: bold;} 
.dbp_table TH { text-align: left; font-size: 12px; font-weight: 600; color: #2499d4; vertical-align: top; padding: 20px 0; border-top: 1px solid #DDD;}
.dbp_table TD { padding: 20px 20px; border-top: 1px solid #DDD;}

/* ÇÏ´Ü Ç²ÅÍ ¿µ¿ª */
#footer { background:#555; padding: 30px 0; font-size: 0; width:100%; font-family:'nanumgothic','Nanum Gothic',sans-serif; }
#footer .copyright_logo { width: 20%; display: inline-block; vertical-align:top;}
#footer .copyright { width: 80%; display: inline-block; font-size: 13px;}
#footer .copyright .footer_util { width: 100%; }
#footer .copyright .footer_util ul { padding-bottom: 15px;}
#footer .copyright .footer_util li { display: inline-block; padding-right: 25px;}
#footer .copyright .footer_util li a { color: #DDD;}#footer .copyright .footer_util li a:hover { color: #DDD; text-decoration: underline;}
#footer .copyright .footer_copyright { width: 100%; }
#footer .copyright .footer_copyright li { color:#DDD; display:inline-block; padding-right:20px; line-height:20px;}

/* ¹öÆ° ¿µ¿ª */
a.bn_btn { color:#FFF; border:1px solid #FFF; text-align:center; font-size:12px; padding:5px 20px; font-weight:700; margin:0 auto; letter-spacing:1px;}
a.bn_btn:hover { text-decoration:none; background:#FFF; color:#333;}
a.bn_btn2 { color:#FFF; background:#777; text-align:center; font-size:12px; padding:10px 25px; font-weight:600; margin:0 auto; letter-spacing:1px;}
a.bn_btn2:hover { text-decoration:none; border:1px solid #999; background:#FFF; color:#666; }
a.bn_btn3 { color:#FFF; border:2px solid #FFF; text-align:center; font-size:13px; font-family: 'Raleway', sans-serif; padding:8px 25px; font-weight:700; margin:0 auto; letter-spacing:1px;}
a.bn_btn4 { color:#333; border:2px solid #444; text-align:center; font-size:16px; padding:12px 22px; font-weight:600; margin:0 auto; letter-spacing:1px;}
a.bn_btn4:hover { text-decoration:none; background:#444; color:#FFF; }
a.main_btn { color:#FFF; border:2px solid #FFF; text-align:center; font-size:19px; padding:15px 35px; font-weight:600; margin:0 auto; letter-spacing:1px;}
a.main_btn:hover { text-decoration:none; color:#FFF; background-color:rgba(255,255,255,0.3); border:0;}

@media screen and (max-width: 1200px) {
/* Çì´õ */
.headerwrap {width:100%; margin:0 auto;}
.utilwrap { width: 100%;} 

/* ¸ÞÀÎ ÄÁÅÙÃ÷ */
.mainWrap {width:100%; margin: 0 auto;}
.main_slider {width:100%;}
.main_slider img {width:150%;}
.contents {width: 100%; }
.container { width: 100%; }
.con_img img {width: 100%;}

 /* Á¦Ç°¼Ò°³ ¿µ¿ª */
.product_tb {width:100%;}
.product_board {width:100%;}

/* È«º¸¿µ»ó ¿µ¿ª */
.youtubewrap .youtube_box {width:100%;}

/* ÇÏ´Ü Ç²ÅÍ ¿µ¿ª */ 
#footer { padding:30px;}
#footer .copyright_logo { width: 20%; display: inline-block; vertical-align:top;}
#footer .copyright_logo img { width: 100%; }
#footer .copyright { width: 70%; display: inline-block; font-size: 13px; padding-left:20px;}

}


@media all and (max-width: 1024px) {
 
/* ¹è³Ê ¿µ¿ª */
.bannerwrap .leftwrap .box { padding:30px; }
.bg1 { background-size:cover;}
.bg2 { background-size:cover;}
.bg3 { background-size:cover;}
.bannerwrap .box { width:33.33%; display:table-cell; font-size:14px; vertical-align:top;  padding:30px;}

/* ¹è³Ê2 ¿µ¿ª */
.business_box {width:47%;  margin: 5px;}

/* Äü¸Þ´º ¿µ¿ª */ 
.quick_menu {display: none; }
 
/* °í°´¼¾ÅÍ ¿µ¿ª */ 
.box_in { padding:20px; font-size: 12px; height: auto; }
.tel_num { font-size: 25px; }
.bank_num { font-size: 20px; }

/* È«º¸¿µ»ó ¿µ¿ª */
.youtubewrap {padding:50px; }
.youtubewrap .youtube_box .movie { width:100%; }
.youtubewrap .youtube_box .movietxt { width:100%; padding-left:0; }

/* ÇÏ´Ü Ç²ÅÍ ¿µ¿ª */
#footer { padding:20px;}
}


@media all and (max-width: 768px) {
 
/* Çì´õ */
#header { height: auto; }
.menuFixed { height: auto; position: absolute; }
.utilwrap .utilsns {  display: none; }
.utilwrap .logo {   }
.utilwrap .utilmenu {  display: none; }

/* ¹öÆ° */
 a.bn_btn4 { color:#333; border:2px solid #444; text-align:center; font-size:12px; padding:8px 18px; font-weight:600; margin:0 auto; letter-spacing:1px;}
 a.bn_btn4:hover { text-decoration:none; background:#444; color:#FFF; }
 a.bn_btn2 { color:#FFF; background:#777; text-align:center; font-size:11px; padding:7px 15px; font-weight:600; margin:0 auto; letter-spacing:1px;}

 /* ¸ÞÀÎ ÄÁÅÙÃ÷ */
 .contents h3 {  font-size: 20px; }
 .mainWrap h2 {  font-size: 24px; }
 
 /* ÀÎÆ®·Î ¿µ¿ª */ 
 .introwrap {  padding: 50px;  background-size:cover; } 
 .intro_tit {  font-size: 22px;  line-height: 26px;  padding-bottom: 10px; }
 .intro_txt {  width: 100%;  font-size: 12px;  line-height: 18px;  padding-bottom: 30px; }

 /* ¹è³Ê ¿µ¿ª */
 .bannerwrap {  padding-bottom:0; }
 .bannerwrap .box {  width:100%;  height:auto;  padding:30px;  display:inline-block; }
 .bannerwrap .box_img {  display:none; }

 /* ¹è³Ê2 ¿µ¿ª */
 .banner2wrap {  padding: 30px; }
 .banner2wrap > p {  padding-bottom:20px; }

 /* Á¦Ç°¼Ò°³ ¿µ¿ª */
 .productwrap {  background: #FFF;  padding: 30px; }
 
 /* È«º¸¿µ»ó ¿µ¿ª */
 .youtubewrap .youtube_box .movietxt h3 {  font-size: 32px;  padding: 20px 0; }

/* ±¸±ÛÁöµµ ¿µ¿ª*/
.mapwrap { width:100%; height:300px;}

 /* °í°´¼¾ÅÍ ¿µ¿ª */
 .customerwrap {  padding: 20px; }
 .customerwrap h3 {  font-size: 15px; }
 .cs_box {  width:100%; }
 .cs_box_center {  width:100%;  margin: 10px 0;  padding: 10px 0; }
 .box_in {  height: auto;  padding: 20px; }
 .tel_num {  font-size: 30px; }
 .tel_num a {  color: #b30010; }
 .bank_num a {  color: #222; }

/* ÇÏ´Ü Ç²ÅÍ ¿µ¿ª */ 
#footer { padding: 20px; width:100%;}
#footer .copyright_logo { width: 100%; padding:5px 0;}
#footer .copyright_logo img { width:auto; }
#footer .copyright { width: 100%; font-size: 12px; padding-left:0; }
#footer .copyright .footer_util { width: 100%;  padding: 15px 0;}
#footer .copyright .footer_util ul { padding-bottom: 0;}
#footer .copyright .footer_util li { display: inline-block; padding-right: 25px;}
#footer .copyright .footer_util li a { color: #DDD;}
#footer .copyright .footer_util li a:hover { color: #DDD; text-decoration: underline;}
#footer .copyright .footer_copyright { width: 100%; }
#footer .copyright .footer_copyright li { color:#DDD; line-height:18px; width:100%;}
#footer .copyright .footer_copyright li a { color:#DDD;}

}


@media all and (max-width: 480px) {
 
 /* ÀÎÆ®·Î ¿µ¿ª */
 .introwrap {  padding: 30px; }
 
 /* ¹è³Ê ¿µ¿ª */
 .bannerwrap .leftwrap .box_img img {  width: 100%; }

 /* ¹è³Ê2 ¿µ¿ª */
 .business_box {  width: 90%;  }

 /* Á¦Ç°¼Ò°³ ¿µ¿ª */
 .productwrap {  padding: 20px; }

 /* È«º¸¿µ»ó ¿µ¿ª */
 .youtubewrap {  padding: 30px; }
 .youtubewrap .youtube_box .movie {  width: 100%;  height: 150px; }

}