@font-face {
    font-family: 'MapoFlowerIsland';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/MapoFlowerIslandA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}




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




h2 {color:#1E1E1E; font-size:40px; line-height:54px; font-weight:700; font-family:'Montserrat','Noto Sans KR', sans-serif;}
h3 {color:#333; font-size:28px; line-height:34px; font-weight:500; font-family:'Montserrat','Noto Sans KR', sans-serif;}
p {font-size:14px; line-height:22px; word-break:keep-all;}




.bg-white {background:#FFF;}




.title_leaf {margin-bottom:20px;}





/* 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;}




/* ¼­ºñ½º ¿µ¿ª */
#our-service {font-size:0; position:relative;}
#our-service h3 {color:#FFF; font-size:25px; line-height:30px; font-weight:500; padding-top:10px; font-family:'MapoFlowerIsland'; letter-spacing:-1px;}
#our-service p {color:#FFF; opacity:0.85; word-break:keep-all; font-weight:300;}
#our-service i {display:block; padding-bottom:15px; font-size:40px;}
#our-service .service-box-01 {width:20%; display:inline-block; vertical-align:middle; background:#0f7962; box-shadow:5px 5px 15px rgba(0,0,0,0.3); background-image:url('../../img/_designcoco/images/main-pattern01.png');}
#our-service .service-box-02 {width:20%; display:inline-block; vertical-align:middle; background:#263552; box-shadow:5px 5px 15px rgba(0,0,0,0.3); background-image:url('../../img/_designcoco/images/main-pattern01.png');}
#our-service .service-box-03 {width:20%; display:inline-block; vertical-align:middle; background:#801878; box-shadow:5px 5px 15px rgba(0,0,0,0.3); background-image:url('../../img/_designcoco/images/main-pattern01.png');}
#our-service .service-box-04 {width:20%; display:inline-block; vertical-align:middle; background:#218f94; box-shadow:5px 5px 15px rgba(0,0,0,0.3); background-image:url('../../img/_designcoco/images/main-pattern01.png');}
#our-service .service-box-05 {width:20%; display:inline-block; vertical-align:middle; background:#d75f0b; box-shadow:5px 5px 15px rgba(0,0,0,0.3); background-image:url('../../img/_designcoco/images/main-pattern01.png');}
#our-service .service-box-btn {width:140px; color:#FFF; border:1px solid #FFF; font-size:11px; font-weight:600 !important; font-family:'Montserrat', sans-serif; padding:8px 15px; margin:0 auto;}
#our-service .service-box-btn:hover { border:1px solid #FFF; background:rgba(255,255,255,0.2); color:#FFF; }
a.service-btn {display:inline-block; width:100%; color:#FFF; padding:50px; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;}





/* ´Ù¾çÇѳìÂ÷Á¤º¸ ¿µ¿ª */
#what-we-do {font-size:0; padding:100px 80px; background:#f8f8f8;}
#what-we-do h2 {color:#1E1E1E; font-size:45px; line-height:36px; padding-bottom:18px; font-family:'MapoFlowerIsland'; letter-spacing:-1px; font-weight:400; width:406px; margin:0 auto 13px; border-bottom:1px solid #bdbdbd;}
#what-we-do p {padding-bottom:50px; font-weight:300; color:#565656; font-size:17px; line-height:1.55;}
#what-we-do .title_sub {font-size:17px;}
#what-we-do .what-box { width:32.66%; margin:0 1% 1% 0; box-shadow:5px 5px 12px rgba(0,0,0,0.06); display:inline-block; vertical-align:top; background:#ffffff;}
#what-we-do .what-box h4 {font-size:28px; line-height:30px; padding-bottom:10px; font-family: 'MapoFlowerIsland'; letter-spacing: -1px; color: #107963;}
#what-we-do .what-box p {padding-bottom:20px;}
#what-we-do .what-box .in-box {padding:30px; background:#FFF; height:210px; display:table; margin:0 auto;}
#what-we-do .what-box .in-box .in-box-2 {display:table-cell; vertical-align:middle;}
#what-we-do .what-img figure {margin:0; padding:0; background:#fff; overflow:hidden;}
#what-we-do .what-img figure img {width:100%; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;}
#what-we-do .what-img figure:hover img { -webkit-transform: scale(1.2); transform: scale(1.2);}
#what-we-do .what-btn {width:130px; color:#999; background:#FFF; border:1px solid #CCC; font-size:14px; font-weight:600 !important; font-family:'Montserrat', sans-serif; padding:8px; margin:0 auto;}
#what-we-do .what-btn:hover { border:1px solid #666; background:#666; color:#FFF; }
#what-we-do .wow > div:last-child {marign-right:0;}





/* 2ºÐÇÒ Æз²·¢½º ¿µ¿ª */
#introduce {background: url(../../img/_designcoco/images/main_intro_bg_pc.jpg) center top no-repeat; padding: 123px 20px; background-attachment: fixed; background-size: cover; width: 50%; float:left; height:530px;}
/*
#introduce.img1 {background: url(../../img/_designcoco/images/main_intro_bg1.jpg) center top no-repeat;}
#introduce.img2 {background: url(../../img/_designcoco/images/main_intro_bg2.jpg) center top no-repeat;}
*/
#introduce h3 {color:#FFF; font-size:34px; line-height:42px; padding-bottom:20px; font-size:1.7em; font-weight:300;font-family:'MapoFlowerIsland'; letter-spacing:-1px;}
#introduce h3 span {font-size:2.3em; line-height:1.3;}
#introduce p {color:#FFF; padding-bottom:25px; width:80%; margin:0 auto; font-size:1.5em; line-height:1.5; font-weight:300;}
#introduce .intro-box {width:100%;}
/* ¼Ò°³ ¹öÆ° µðÀÚÀÎ */
a.intro-btn {display:inline-block; margin:0 auto; color:#FFF; border:1px solid rgba(255,255,255,0.75); padding:8px 30px; font-size:1.25em; font-weight:300; }
a.intro-btn:hover {color:#FFF; background-color:rgba(255,255,255,0.3); }





/* ´Ù¾çÇѳìÂ÷Á¤º¸ ¿µ¿ª */
#product {padding:100px 20px 70px; font-size:0;}
#product h2 {color:#1E1E1E; font-size:45px; line-height:36px; padding-bottom:18px; font-family:'MapoFlowerIsland'; letter-spacing:-1px; font-weight:400; width:406px; margin:0 auto 13px; border-bottom:1px solid #bdbdbd;}
#product .title_sub {font-size:17px;}
#product p {padding-bottom:50px; font-weight:300; color:#565656; font-size:17px; line-height:1.55;}





/* ¹Ìµð¾î ¼Ó Çϵ¿ ¿µ¿ª */
#main_youtube {padding: 100px 80px; background-image:url('../../img/_designcoco/images/what-we-do_bg.jpg');}
#main_youtube .youtube_bnr {width:32%;float:left;}
#main_youtube .youtube01 {margin:0 2% 1% 0;}
#main_youtube .youtube02 {margin:0 2% 1% 0}
#main_youtube .youtube03 {margin-bottom:1%}
#main_youtube .youtube04 {margin-right:2%;}
#main_youtube .youtube05 {margin-right:2%;}
/*Á¦¸ñ*/
#main_youtube h2 {color:#1E1E1E; font-size:45px; line-height:36px; padding-bottom:18px; font-family:'MapoFlowerIsland'; letter-spacing:-1px; font-weight:400; width:406px; margin:0 auto 13px; border-bottom:1px solid #bdbdbd;}
#main_youtube .title_sub {font-size:17px;}
#main_youtube p {padding-bottom:50px; font-weight:300; color:#565656; font-size:17px; line-height:1.55;}





/* °í°´¼¾ÅÍ ¿µ¿ª */
#customer {padding:40px 0px 40px 80px; border-top:1px solid #DDD; text-align:left; width:66.6666%; position:relative; font-size:0; float:left;}
#customer:after {content:""; display:block; clear:both;}
#customer h4 {color:#000; font-size:20px; line-height:28px; padding-bottom:15px; font-weight:500;}





/* °øÁö»çÇ× */
#customer .cs-notice {width:50%; display:inline-block; vertical-align:top; padding-right:80px;}
#customer .cs-notice h4 {display:inline-block; float:left; width:80%;}
#customer .cs-notice .more {display:inline-block; width:20%; float:right; padding-right:10px; text-align:right;}
#customer .cs-notice .more a {color:#CCC; display:inline-block;}
#customer .cs-notice .more a:hover {text-decoration: underline;}
#customer .cs-notice .notice_list {width:100%;}
/* °øÁö»çÇ× ÃßÃâ */
.board_output td {color:#666 !important; font-size:14px; font-weight:400;}
.board_output td:last-child {text-align:right;}
.board_output a { font-size:15px !important; line-height:40px; font-weight:400; color:#666 !important;}
.board_output_1_tr {border-bottom:1px solid #DDD;}
/* °í°´¼¾ÅÍ */
#customer .cs-center {width:50%; display:inline-block; vertical-align:top; padding:0 80px 0 0;}
#customer .cs-center li {font-size:17px; line-height:28px; padding-left:10px; margin:2px 0; text-indent:-14px; margin-left:14px; text-align:center;}
/*
#customer .cs-center li::before {content:""; width:3px; height:3px; background:#666; border-radius:50px; vertical-align:top; margin-right:10px; margin-top:10px; display:inline-block;}
*/
#customer .cs-center li a {text-indent:0px;}
#customer .cs-center li.tel_num {color:#ef690b; font-size:40px; line-height:36px; font-weight:700; font-family:'Montserrat',sans-serif; padding-bottom:10px; text-align:center;}
#customer .cs-center li.tel_num a {color:#ef690b; font-weight:600;}
#customer .cs-center li.cs-btn::before {display:none;}
#customer .cs-center li.cs-btn {padding:20px 0 10px 0; text-indent:0; margin:0; font-size:0; text-align:center;}
/* È«º¸¿µ»ó */
#customer .cs-movie {width:33.3333%; display:inline-block; vertical-align:top; padding-left:30px;}
#customer .cs-movie .youtube-wrap .youtube { position:relative; width:100%; height:330px;}
#customer .cs-movie .youtube-wrap .youtube iframe { position: absolute; width:100%; height:100%; }
/* ¹öÆ° */
a.cs-btn {display:inline-block; width:48%; margin-right:1%; border-radius:3px; color:#FFF; background:#787878; padding:10px; font-size:14px; text-align:center; vertical-align:bottom;}
a.cs-btn:hover {background:#555;}
a.cs-btn2 {display:inline-block; width:48%; margin-left:1%; border-radius:3px; color:#FFF; background:#182e3e; padding:10px; font-size:14px; text-align:center; vertical-align:bottom;}
a.cs-btn2:hover {background:#00113c;}

/* Áöµµ ¿µ¿ª */
#map {width:33.3333%; float:left;}
#map .map-wrap {}
#map .map-wrap iframe {width:100%; height:350px;}

/* ÇÏ´Ü Ç²ÅÍ ¿µ¿ª */
#footer { background:#333; padding:50px 20px; text-align:center; font-size:12px; line-height:18px;}
#footer a {color:#BBB;}
#footer .copyright_sns { width:100%;}
#footer .copyright_sns ul li {display: inline-block; padding-right:6px;}
#footer .copyright_sns ul li:last-child {padding-right:0;}
#footer .copyright_sns ul li a {display:block; color:#FFF; width:42px; height:42px; font-size:17px; padding-top:10px; border-radius:30px; background-color:rgba(255,255,255,.1);}
#footer .copyright_sns ul li a:hover {background-color:rgba(255,255,255,.3);}
#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:14px; border:1px solid #A0A0A0; padding:6px 14px;}
#footer .footer_util li a:hover {background:#999; border:1px solid #999; color:#FFF;}
#footer .footer_copyright {width:100%; padding:0 0 20px; font-size:15px; line-height:1.6;}
#footer .footer_copyright li {color:#bdbdbd; display:inline-block; padding-right:20px;}
#footer .footer_copyright li:last-child {padding-right:0;}
#footer .footer_copyright li:nth-last-child(2) {padding-right:0; display:none;}
#footer .copy_end {width:100%;}

@media screen and (max-width: 1280px) {
    /* °øÅë */
    .container {width:100%;}
    /* ¼­ºñ½º ¿µ¿ª */
    #our-service { margin-top:0px; position:relative;}
}

@media screen and (max-width: 1450px) {
    #our-service .service-box-01 {height:270px;}
    #our-service .service-box-02 {height:270px;}
    #our-service .service-box-03 {height:270px;}
    #our-service .service-box-04 {height:270px;}
    #our-service .service-box-05 {height:270px;}

    #introduce {padding:40px 20px 47px; height:auto;}
    #introduce h3 {font-size:1.3em;}
    #introduce h3 span {font-size:2em;}
    #introduce p {font-size:1.22em;}
    
    /* ¹Ìµð¾î¼ÓÇϵ¿ ¿µ¿ª */
    #main_youtube .youtube_bnr {width:32%;float:left;}
    #main_youtube .youtube01 {margin-right:2%;}
    #main_youtube .youtube02 {margin-right:2%;}
    #main_youtube .youtube03 {}

    /* °í°´¼¾ÅÍ ¿µ¿ª */
    #customer .cs-center li.tel_num {font-size:32px;}
}

@media screen and (max-width: 1200px) {
    /* °øÅë */
    h2 {font-size:28px; line-height:34px;}
    h3 {font-size:22px; line-height:30px;}
    p {font-size:13px; line-height:18px;}

    /* What-we-do ¿µ¿ª */
    #what-we-do {font-size:0; padding:60px 20px;}
    #what-we-do h2 {font-size:28px; line-height:36px; }
    #what-we-do p {padding-bottom:30px;}
    #what-we-do .what-box .in-box {padding:25px;}
    #what-we-do .what-box h4 {font-size:20px; line-height:24px;}

    /* ¼­ºñ½º ¿µ¿ª */
    #our-service {padding-bottom:0px;}
    #our-service h3 {font-size:18px; line-height:24px; padding-bottom:10px;}
    #our-service i {display:block; padding-bottom:15px; font-size:30px;}
    a.service-btn {padding:30px 15px;}
    #our-service .service-box-01 {height:230px;}
    #our-service .service-box-02 {height:230px;}
    #our-service .service-box-03 {height:230px;}
    #our-service .service-box-04 {height:230px;}
    #our-service .service-box-05 {height:230px;}

    /* ÀÎÆ®·Î ¿µ¿ª */
    #introduce {background-size:cover; height:auto; padding:80px 20px; background-attachment:fixed;} 
    #introduce h3 {font-size:21px; line-height:34px; padding-bottom:10px;}
    #introduce p {font-size:1.25em;}

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

    /* ¹Ìµð¾î¼ÓÇϵ¿ ¿µ¿ª */
    #main_youtube {padding:60px 20px;}
    #main_youtube h2 {font-size:28px;}

    /* °í°´¼¾ÅÍ ¿µ¿ª */
    
    #customer {padding:30px 20px; background-attachment:scroll;width:100%;}
    #customer h4 {font-size:16px;}
    #customer .cs-center {padding:0 20px 0 20px;}
    #customer .cs-center li {margin:0; padding-left:18px;}
    #customer .cs-center li.tel_num {font-size:30px;}
    /* °í°´¼¾ÅÍ °øÁö»çÇ× */
    #customer .cs-notice {padding:0 20px;}
    /* °øÁö»çÇ× ÃßÃâ */
    .board_output td {font-size:13px;}
    .board_output a { font-size:14px !important; line-height:38px;}
    /* °í°´¼¾ÅÍ È«º¸¿µ»ó */
    #customer .cs-movie {padding-left:20px;}
    #map {width:100%;}
    #map .map-wrap iframe {height:306px;}

    /* ÇÏ´Ü Ç²ÅÍ ¿µ¿ª */
    #footer {padding:30px 20px;}
    #footer .copyright {font-size:13px; line-height:20px;}
    #footer .copyright_sns ul li a {width:32px; height:32px; font-size:14px; padding-top:6px;}
}

@media screen and (max-width: 1024px) {
    /* °í°´¼¾ÅÍ ¿µ¿ª */
    
    #customer h4 {padding-bottom:10px;}
    #customer .cs-center li.tel_num {font-size:26px;}
    #customer .cs-center li.cs-btn {padding:15px 0 0;}
    a.cs-btn {padding:7px; font-size:13px;}
    a.cs-btn2 {padding:7px; font-size:13px;}



    /* °øÁö»çÇ× ÃßÃâ */
    .board_output a { font-size:13px !important; line-height:32px;}
    #what-we-do .what-box {width:32.66%; margin:0 1% 1% 0;}
    #what-we-do .what-box.delay3 {margin-right:0;}
}




@media all and (max-width: 992px) {
    /* ¼­ºñ½º ¿µ¿ª */
    #introduce {width:100%;}
    #introduce.img1 {background: url(../../img/_designcoco/images/main_intro_bg1.jpg) center top no-repeat;}
    #introduce.img2 {background: url(../../img/_designcoco/images/main_intro_bg2.jpg) center top no-repeat;}



    /* ¹Ìµð¾î¼ÓÇϵ¿ ¿µ¿ª */
    #main_youtube .youtube_bnr {width:100%; padding-bottom:0;}
    #main_youtube .youtube01 {margin-bottom:15px;}
    #main_youtube .youtube02 {margin-bottom:15px;}



    /* °í°´¼¾ÅÍ ¿µ¿ª */
    #customer .cs-notice {width:100%;}
    #customer .cs-center {width:100%; height:auto; padding:30px 20px 10px; border:0;}
    #customer .cs-movie {width:100%; padding:0;}
    #our-service .service-box-01,#our-service .service-box-02,#our-service .service-box-03,#our-service .service-box-04,#our-service .service-box-05 {height:227px;}
    #customer .cs-center li.tel_num {font-size:35px;}
    #customer {width:100%;}
    #map {width:100%;}

    #what-we-do .what-box .in-box {height:243px}
}




@media all and (max-width: 768px) {
    /* °øÅë */
    h2 {font-size:25px; line-height:1.5;}



    /* What-we-do ¿µ¿ª */
    #what-we-do h2 {font-size:25px; line-height:1.5;}
    #what-we-do .what-box {width:45%; margin:10px;}
    #what-we-do .what-box.delay2,#what-we-do .what-box.delay4 {margin-right:0;}
    #what-we-do .what-box.delay3 {margin:10px;}
    #what-we-do .what-box h4 {line-height:22px;}



    /* ¼­ºñ½º ¿µ¿ª */
    #our-service .service-box-01 img,#our-service .service-box-02 img,#our-service .service-box-03 img,#our-service .service-box-04 img,#our-service .service-box-05 img {width:auto; height:70px;}
    #our-service .service-box-01,#our-service .service-box-02,#our-service .service-box-03,#our-service .service-box-04,#our-service .service-box-05 {width:100%; height:140px;}
    a.service-btn {padding:17px;}
    #our-service h3 {font-size:16px;}
    #our-service p {display:none;}



    /* Á¦Ç°¼Ò°³ ¿µ¿ª */
    #product h2 {font-size:25px; line-height:1.5;}



    /* À¯Æ©ºê ¿µ¿ª */
    #main_youtube h2 {font-size:25px; line-height:1.5;}



    /* ÀÎÆ®·Î ¿µ¿ª */
    #introduce {background-size:cover; padding:40px 20px;}
    #introduce h3 {font-size:25px; line-height:26px; padding-bottom:15px;}
    #introduce .intro-box {width:80%; } /* ÅؽºÆ®¿µ¿ª °¡·Î³ÐÀÌ */
    #introduce .intro-box > p {padding-bottom:15px;}
    a.intro-btn {padding:8px 20px; font-size:12px;}



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




@media all and (max-width: 530px) {
    /*¼­ºñ½º¿µ¿ª*/
    #our-service .service-box-01 img,#our-service .service-box-02 img,#our-service .service-box-03 img,#our-service .service-box-04 img,#our-service .service-box-05 img {width:auto; height:70px;}



    /* What-we-do ¿µ¿ª */
    #what-we-do .what-box {width:90%; margin:0; margin-bottom:30px;}
    #what-we-do .what-box h4 {line-height:22px;} 
    #what-we-do h2 {width:85%;}
    #what-we-do p {font-size:14px;}
    #what-we-do .what-box.delay3 {margin:0px 10px 30px 10px;}



    /* ÀÎÆ®·Î */
    #introduce h3 {font-size:17px;}
    #introduce p {font-size:14px;}



    /* ÇÁ·Î´öÆ®¿µ¿ª */
    #product h2 {width:85%;}
    #product p {font-size:14px;}



    /* ¸ÞÀÎ À¯Æ©ºê ¿µ¿ª */
    #main_youtube h2 {width:85%;}
}