/* °øÅë */
#contents {width:100%; text-align:center;}
.container {width:1200px; margin: 0 auto;}

.clearfix:after {content:""; display:block; clear:both; } 
.bg-white {background:#FFF;}


/* TOP¹öÆ° */
#go-top {position: fixed; right:20px; bottom:20px;}
#go-top a { width:45px; height:45px; display: block; cursor:pointer; text-align: center; font-size:10px; font-weight:600; padding-top:22px; color: #FFF; background-color:rgba(0,0,0,0.6); background-image: url(../../img/_designcoco/images/top-bg.png); background-repeat:no-repeat; background-position: center 10px; border-radius:3px; -webkit-transition: 1s; -moz-transition: 1s; transition: 1s;}
#go-top a:hover { color: #FFF;}

/* »ó´ãÇϱâ¹öÆ°*/
.co-btn {position: fixed; left:230px; bottom:20px;}

/* Info ¹è³Ê */
#info-wrap {margin-top:-100px; background:#EDEFF2;}
.info {width:33.3333%; height: 280px; float:left; position:relative;}
.info-slide {width:33.3333%; height: 280px; float:left; position:relative;}
.info > img {width: 100%;}
.info .overlay {background: rgba(0,0,0,0.1); border: 1px solid rgba(255,255,255,0.5); position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; opacity: 0;
 -webkit-transition: 0.2s opacity; transition: 0.2s opacity; -webkit-transition-delay: 0.2s; transition-delay: 0.2s;}
.info:hover .overlay {-webkit-transition-delay: 0s; transition-delay: 0s; opacity: 0.8;}
.info .info-content {position: absolute; left: 25px; right: 25px; top: 50%; text-align: center; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: 0.2s all; transition: 0.2s all;}
.info:hover .info-content {top: 45%;}
.info .info-content h3 {font-size:28px; line-height:34px; font-weight:500; opacity: 1; color: #FFF; margin-bottom: 25px; -webkit-transition: 0.2s all; transition: 0.2s all;}
.info .info-content p {font-size:16px; line-height:24px; display: block; text-transform: uppercase; opacity: 1; color: #FFF; margin-bottom: 5px; -webkit-transition: 0.2s all; transition: 0.2s all;}
.info .info-link {text-align: center; margin-top: 25px; opacity: 1; -webkit-transition: 0.2s all; transition: 0.2s all;}
a.btn-style1 {display: inline-block; font-size: 15px; padding: 8px 25px; border: 1px solid rgba(255,255,255,0.7); color: #FFF; text-align: center;}
a.btn-style1:hover {color: #333; background: rgba(255,255,255,0.7);}
a.btn-style2 {display: inline-block; font-size: 14px; padding: 8px 25px; border: 1px solid #BBB; color: #999; text-align: center;}
a.btn-style2:hover {color: #FFF; background: #999; border: 1px solid #999;}
.notice {padding: 30px;}
.notice-header {border-bottom: 1px solid #DDD; text-align: left; font-size:0; padding-bottom: 10px; margin-bottom: 20px;}
.notice-header h3 {display:inline-block; font-size:19px; width:80%; font-weight:500;}
.notice-header .more {display:inline-block; width:20%; font-size:13px; padding-right:5px; text-align:right;}
.notice-header .more a {color:#888; display:inline-block;}
.notice-header .more a:hover {text-decoration: underline;}
/* °øÁö»çÇ× ÃßÃâ */
.board_output td { color:#666 !important; font-size:14px; height:34px; font-weight:400; vertical-align:top;}
.board_output a { font-size:15px !important; font-weight:400; color:#666 !important;}


/* ¼Ò°³ ¿µ¿ª */
#introduce {background:#EDEFF2;}
#introduce .intro-box {width:100%; background:url('../../img/_designcoco/images/intro_bg.jpg') center bottom no-repeat; padding:100px 40px; text-align:center;}
#introduce .intro-box h3 {color:#0E294A; font-size:34px; line-height:40px; font-weight:500; padding-bottom:30px; letter-spacing:-0.8px;}
#introduce .intro-box .p-big {color:#333; font-size:25px; line-height:30px; font-weight:300; padding-bottom:5px;}

/* ¼Ò°³ ¹öÆ° µðÀÚÀÎ */
a.intro-btn {display:inline-block; margin-top:30px; background:#0E294A; color:#FFF; padding:8px 30px; font-size:15px; }
a.intro-btn:hover {background:#333;}


/* Á¦Ç°¼Ò°³ ¿µ¿ª */
#product {padding:100px 20px; font-size:0;}
#product h2 {color:#1E1E1E; font-size:40px; line-height:54px; font-weight:700; font-family:'Montserrat','Noto Sans KR', sans-serif; padding-bottom:15px;}
#product p {font-size:14px; line-height:22px; padding-bottom:40px;}


/* È«º¸¿µ»ó ¿µ¿ª */
#movie {background:url('../../img/_designcoco/images/movie_bg.jpg') center top no-repeat; background-attachment:fixed; background-size:cover; padding:50px 20px; text-align:left; font-size:0;}
#movie .sm-tit {font-size:14px; color:#FFF; font-weight:500; letter-spacing:10px; font-family:'Montserrat', sans-serif; padding-bottom:10px;}
#movie h3 {color:#FFF; font-size:36px; font-weight:300; padding-bottom:25px;}
#movie p {color:#FFF; font-size:16px; line-height:24px;}
#movie .youtube-txt {width:50%; display:inline-block; vertical-align:middle;}
#movie .youtube-wrap {width:50%; display:inline-block; vertical-align:middle; padding-left:100px;}
#movie .youtube-wrap .youtube { position:relative; width:100%; padding-bottom: 56.25%;}
#movie .youtube-wrap .youtube iframe { position: absolute; width:100%; height:100%; }


/* °í°´¼¾ÅÍ ¿µ¿ª */
#customer {background:#EDEFF2; padding:50px 20px;}
#customer .cs-box-bg {height:180px; background:url('../../img/_designcoco/images/customer_bg.jpg') no-repeat; font-size:0; box-shadow:8px 8px 22px rgba(0,0,0,0.2);}
#customer .cs-center {width:55%; display:inline-block; padding-left:20px; vertical-align:middle; text-align:left;}
#customer .cs-center ul { padding:25px; }
#customer .cs-center li {color:rgba(255,255,255,0.85); font-size:14px;}
#customer .cs-center li.cs_tit {padding-bottom:8px;}
#customer .cs-center li.tel_num {color:#FFF; font-size:20px; font-weight:700; font-family:'Montserrat',sans-serif; padding-bottom:5px;}
#customer .cs-center li.tel_num a {color:#FFF; }
#customer .cs-icon {font-size:0;}
#customer .cs-icon {width:45%; display:inline-block; vertical-align:middle;}
#customer .cs-icon ul {width:100%; display:table; position:relative;}
#customer .cs-icon li {width:33%; height:180px; display:table-cell; text-align:center; font-size:12px; line-height:16px; vertical-align:middle; border-left:1px solid rgba(255,255,255,0.3);}
#customer .cs-icon li i {font-size:40px; display:table-cell; vertical-align:middle;}
#customer .cs-icon li a {padding-top:30px; color:rgba(255, 255, 255, 0.75); display:block; height:100%; vertical-align:middle;}
#customer .cs-icon li a:hover {background:rgba(0, 0, 0, 0.3);;}
.icon-img {color:#FFF; display:inline-table; width:80px; height:60px; border-radius:100px; }
.icon-tit {color:#FFF; font-size:16px; font-weight:500; padding:8px 0; display:block;}


/* ÇÏ´Ü Ç²ÅÍ ¿µ¿ª */
#footer { background:#333; padding:40px 20px; text-align:center; font-size:13px; line-height:22px;}
#footer a {color:#BBB;}
#footer .copyright_logo {width:100%;}
#footer .footer_util {width:100%;}
#footer .footer_util li {display:inline-block; padding-right:2px;}
#footer .footer_util li a {display:block; color:#BBB; font-size:12px; border:1px solid #A0A0A0; padding:3px 15px;}
#footer .footer_util li a:hover {background:#999; border:1px solid #999; color:#FFF;}
#footer .footer_copyright {width:100%; padding-bottom:20px;}
#footer .footer_copyright li {color:#DDD; display:inline-block; padding-right:20px;}
#footer .copy_end {width:100%; padding-right:0px !important;}




@media screen and (max-width: 1200px) {

/* °øÅë */
.container {width:100%;}
.notice {padding:20px;}

/* »ó´ãÇϱâ¹öÆ°*/
.co-btn {position: fixed; left:20px; bottom:20px;}

}


@media screen and (max-width: 1100px) {


/* What we do ¿µ¿ª */
#info-wrap {margin-top:0; padding:0;}
.info {height:220px;}
.info .info-content h3 {font-size:22px; line-height:30px; margin-bottom:15px;}
a.btn-style1 {font-size:13px; padding:6px 20px;}

/* ÀÎÆ®·Î ¿µ¿ª */
#introduce .intro-box {background-size:cover; padding:80px 40px;} 
#introduce h3 {font-size:28px; line-height:34px; padding-bottom:10px;}
#introduce p {font-size:13px; line-height:18px; padding-bottom:20px;}

/* È«º¸¿µ»ó ¿µ¿ª */
#movie {background-size:cover; height:auto; padding:30px;} 
#movie h3 {font-size:28px; line-height:34px;}

/* Á¦Ç°¼Ò°³ ¿µ¿ª */
#product {padding:60px 20px;}
#product h2 {font-size:28px; line-height:34px;}
#product p {font-size:13px; line-height:18px; padding-bottom:20px;}

/* ºü¸¥¹®ÀÇ ¿µ¿ª */
#cs-qna {padding:0px; }
#cs-qna .cs-formmail {display:inline-block; width:60%; vertical-align:top; text-align:left; padding:0 20px;}
#cs-qna .cs-formmail h4 {padding-bottom:20px;}
#cs-qna .cs-info {padding-left:20px;}

#customer {padding:0;}

/* °øÁö»çÇ× ÃßÃâ */
.board_output td {font-size:12px; height:24px;}
.board_output a { font-size:13px !important;}


/* °í°´¼¾ÅÍ ¿µ¿ª */
#customer .cs-center ul {padding:0 10px;}
#customer .cs-center li.tel_num {font-size:20px; padding-bottom:10px;}
#customer .cs-box-bg {background-size:cover;}
#customer .cs-box-bg {height:160px;}
#customer .cs-icon li {height:160px;}
#customer .cs-icon li a {padding-top:20px;}


/* ÇÏ´Ü Ç²ÅÍ ¿µ¿ª */
#footer {padding:30px 20px;}
#footer .copyright {font-size:13px; line-height:20px;}
}



@media all and (max-width: 768px) {

/* Info ¹è³Ê */
.info {width:50%;}
.info > img {height:220px;}
.info .info-content p {font-size:14px; line-height:22px;}

/* È«º¸¿µ»ó ¿µ¿ª */
#movie {padding:50px;}
#movie .youtube-wrap {padding:30px 0 0;}
#movie .youtube-txt {width:100%; text-align:center;}
#movie .youtube-wrap {width:100%; padding-left:0px; padding-top:20px;}
#movie p {font-size:13px; line-height:18px;}

/* ¼Ò°³ ¿µ¿ª */
#introduce .intro-box {padding:60px 40px;}
#introduce .intro-box h3 {font-size:24px; line-height:30px; padding-bottom:10px;}
#introduce .intro-box .p-big {font-size:16px; line-height:22px;}
#introduce .img-responsive {width:90%;}

/* ¼Ò°³ ¹öÆ° µðÀÚÀÎ */
a.intro-btn {margin-top:10px; font-size:13px; }

/* Á¦Ç°¼Ò°³ ¿µ¿ª */
#product {padding:40px 20px;}
#product h2 {font-size:24px; line-height:30px;}
#product p {padding-bottom:20px;}

/* °í°´¼¾ÅÍ ¿µ¿ª */
#customer {background-attachment:scroll;}
#customer .cs-center ul {padding:15px;}
#customer .cs-icon ul li img {width:auto;}
#customer .cs-center li.tel_num {color:#FFF; font-size:18px; font-weight:700; font-family:'Montserrat',sans-serif; padding-bottom:5px; word-break:keep-all; }

/* ÇÏ´Ü Ç²ÅÍ ¿µ¿ª */
#footer .footer_copyright li {width:100%;}

}


@media all and (max-width: 480px) {

/* »ó´ãÇϱâ¹öÆ°*/
.co-btn {position: fixed; left:20px; bottom:20px;}
.co-btn img {width:70%; height:auto;}

/* Info ¹è³Ê */
.info {width:100%;}

/* ¼Ò°³ ¿µ¿ª */
#introduce .intro-box {padding:40px 20px;}

/* È«º¸¿µ»ó ¿µ¿ª */
#movie {padding:30px;}

/* °í°´¼¾ÅÍ ¿µ¿ª */
#customer .cs-box-bg {height:auto;}
#customer .cs-center {width:100%; padding:30px;}
#customer .cs-center ul {padding:0;}
#customer .cs-icon {width:100%;}
#customer .cs-icon li {border-left:0; height:auto;}
#customer .cs-icon li i {font-size:30px;}
#customer .cs-icon li a {padding-top:0; padding-bottom:30px;}
.icon-img {height:40px;}


}