@charset "euc-kr";
/**********************************************
* ½ºÅÄ´Ùµå¹ÝÀÀÇü SD001 ÄÁÅÙÃ÷ css
* ¹öÀü : 1.6
* ¸±¸®Áî : 2017-10-26
* º» cssÀÇ ÀúÀÛ±ÇÀº µµÆ®ÇǾƿ¡ ÀÖ½À´Ï´Ù.
**********************************************/
/*------------------ ¸ÞÀÎÆäÀÌÁö ½ºÅ¸ÀÏ ------------------ */
/* Å°ºñÁÖ¾ó */
#keyVisual {position:relative; height:700px; overflow:hidden}
#keyVisual .bx-wrapper {height:100%; border:none; background:transparent}
#keyVisual .bx-wrapper .bx-viewport {height:100% !important}
#keyVisual .slides {position:relative; height:100%}
#keyVisual .slides > li {position:absolute; top:0; left:0; width:100%; height:100%; background-size:cover !important}
#keyVisual .slides > li.slide-1 {background:url(../../img/keyvisual10.jpg) center top no-repeat}
#keyVisual .slides > li.slide-2 {background:url(../../img/keyvisual7.jpg) center top no-repeat}
#keyVisual .slides > li.slide-3 {background:url(../../img/keyvisual1.jpg) center top no-repeat}
#keyVisual .slides > li.slide-4 {background:url(../../img/keyvisual2.jpg) center top no-repeat}
#keyVisual .slides > li.slide-5 {background:url(../../img/keyvisual4.jpg) center top no-repeat}
#keyVisual .slides > li.slide-6 {background:url(../../img/keyvisual3.jpg) center top no-repeat}
#keyVisual .slides > li .text {position:relative; top:50%; max-width:1200px; margin:-130px auto 0; color:#fff}
#keyVisual .slides > li .text span {display:block; font-size:18px; text-shadow:0 2px 2px rgba(0,0,0,0.15)}
#keyVisual .slides > li .text h2 {font-size:76px; line-height:1.2; font-weight:400; margin:5px 0 25px; text-shadow:0 0 12px rgba(0,0,0,0.2)}

#keyVisual .slides > li .text p {font-size:18px; font-weight:500; line-height:1.5; margin-bottom:30px; text-shadow:0 2px 2px rgba(0,0,0,0.15)}
#keyVisual .slides > li .text span {font-size:18px; font-weight:500; line-height:0.02; margin-bottom:20px; text-shadow:0 2px 2px rgba(0,0,0,0.15)}
#keyVisual .slides > li .text .btn-arrow:hover {box-shadow:0 2px 20px 5px rgba(0,0,0,0.055)}
#keyVisual .bx-controls-direction {opacity:0; transition:opacity 0.3s}
#keyVisual:hover .bx-controls-direction {opacity:1}
#keyVisual .bx-controls-direction a {position:absolute; top:50%; width:80px; height:100px; font-size:28px; text-align:center; line-height:100px; color:#fff !important; text-indent:inherit; margin-top:-50px; background:rgba(0,0,0,0.5); z-index:30 !important}
#keyVisual .bx-prev {left:0}
#keyVisual .bx-next {right:0}
#keyVisual .bx-pager {position:absolute; bottom:50px; left:0; width:100%}
#keyVisual .bx-pager .bx-pager-item {display:inline-block; margin:0 4px}
#keyVisual .bx-pager .bx-pager-item a {display:block; width:15px; height:15px; text-indent:-9999em; margin:2px; opacity:0.8; transition:all 0.35s ease-in-out; border-radius: 50%; border: 2px solid #fff ;}
#keyVisual .bx-pager .bx-pager-item a.active {margin:1px 1px; width:18px; height:18px; background:#fff; opacity:1 }


/* Å°ºñÁÖ¾ó¼­ºê */
#mainContainer #keyVisuals {position:relative; width:100%; height:500px; overflow:hidden; margin-top:60px; text-align:center;}
#mainContainer #keyVisuals .bx-wrapper {height:100%; border:none; background:transparent}
#mainContainer #keyVisuals .bx-wrapper .bx-viewport {height:100% !important}
#mainContainer #keyVisuals .slides {position:relative; height:100%}
#mainContainer #keyVisuals .slides > li {position:absolute; top:0; left:0; width:100%; height:100%; background-size:cover !important}
#mainContainer #keyVisuals .slides > li.slide-1 {background:url(../../img/keyvisual1.jpg) center top no-repeat}
#mainContainer #keyVisuals .slides > li.slide-2 {background:url(../../img/keyvisual2.jpg) center top no-repeat}
#mainContainer #keyVisuals .slides > li.slide-3 {background:url(../../img/keyvisual4.jpg) center top no-repeat}
#mainContainer #keyVisuals .slides > li.slide-4 {background:url(../../img/keyvisual3.jpg) center top no-repeat}
#mainContainer #keyVisuals .slides > li .text {position:relative; top:60%; max-width:1200px; margin:-220px auto 0; color:#fff}
#mainContainer #keyVisuals .slides > li .text span {display:block; font-size:18px; text-shadow:0 2px 2px rgba(0,0,0,0.15)}
#mainContainer #keyVisuals .slides > li .text h2 {font-size:40px; line-height:1; font-weight:400; margin:5px 0 30px; text-shadow:0 0 12px rgba(0,0,0,0.2)}

#mainContainer #keyVisuals .slides > li .text p {font-size:18px; font-weight:500; line-height:1.5; margin-bottom:30px; text-shadow:0 2px 2px rgba(0,0,0,0.15)}
#mainContainer #keyVisuals .slides > li .text span {font-size:18px; font-weight:500; line-height:0.02; margin-bottom:30px; text-shadow:0 2px 2px rgba(0,0,0,0.15)}
#mainContainer #keyVisuals .slides > li .text .btn-arrow:hover {box-shadow:0 2px 20px 5px rgba(0,0,0,0.055)}
#mainContainer #keyVisuals .bx-controls-direction {opacity:0; transition:opacity 0.3s}
#mainContainer #keyVisuals:hover .bx-controls-direction {opacity:1}
#mainContainer #keyVisuals .bx-controls-direction a {position:absolute; top:50%; width:80px; height:100px; font-size:28px; text-align:center; line-height:100px; color:#fff !important; text-indent:inherit; margin-top:-50px; background:rgba(0,0,0,0.5); z-index:30 !important}
#mainContainer #keyVisuals .bx-prev {left:0}
#mainContainer #keyVisuals .bx-next {right:0}
#mainContainer #keyVisuals .bx-pager {position:absolute; bottom:50px; left:0; width:100%}
#mainContainer #keyVisuals .bx-pager .bx-pager-item {display:inline-block; margin:0 4px}
#mainContainer #keyVisuals .bx-pager .bx-pager-item a {display:block; width:30px; height:10px; text-indent:-9999em; margin:2px; opacity:0.8; transition:all 0.35s ease-in-out; border-radius: 0; border: 2px solid #fff ;}
#mainContainer #keyVisuals .bx-pager .bx-pager-item a.active {margin:2px; width:35px; height:10px; background:#fff; opacity:1 }



/* Å°ºñÁÖ¾ó3 */
#keyVisual3 {position:relative; overflow:hidden}
#keyVisual3 .bx-wrapper {height:100%; border:none; background:transparent}
#keyVisual3 .bx-wrapper .bx-viewport {height:100% !important}
#keyVisual3 .slides {position:relative; height:100%}
#keyVisual3 .slides > li {position:absolute; top:0; left:0; width:100%; height:100%; background-size:cover !important}
#keyVisual3 .slides > li.slide-1 {background:url(../../img/product_background_2.jpg) center top no-repeat}
#keyVisual3 .slides > li.slide-2 {background:url(../../img/product_background_2.jpg) center top no-repeat}
#keyVisual3 .slides > li.slide-3 {background:url(../../img/product_background_2.jpg) center top no-repeat}
#keyVisual3 .slides > li.slide-4 {background:url(../../img/product_background_2.jpg) center top no-repeat}
#keyVisual3 .slides > li.slide-5 {background:url(../../img/product_background_2.jpg) center top no-repeat}
#keyVisual3 .slides > li .text {position:relative; top:50%; max-width:1200px; margin:0 auto 0; }
#keyVisual3 .slides > li .text span {display:block; font-size:18px; text-shadow:0 2px 2px rgba(0,0,0,0.15)}
#keyVisual3 .slides > li .text h2 {font-size:34px; line-height:1.2; text-align:center; padding:0px 20px 0px 20px; font-weight:500; margin:50px 0 25px; color:#222; text-shadow:0 0 12px rgba(0,0,0,0.0)}

#keyVisual3 .slides > li .text p {padding:0px 20px 0px 20px; font-size:16px; font-weight:500; line-height:1.5; margin-bottom:30px; color:#555; text-shadow:0 2px 2px rgba(0,0,0,0.0)}
#keyVisual3 .slides > li .text span {font-size:18px; font-weight:500; line-height:0.02; margin-bottom:20px; text-shadow:0 2px 2px rgba(0,0,0,0.15)}
#keyVisual3 .slides > li .text .btn-arrow:hover {box-shadow:0 2px 20px 5px rgba(0,0,0,0.055)}
#keyVisual3 .bx-controls-direction {opacity:100; transition:opacity 0.3s}
#keyVisual3:hover .bx-controls-direction {opacity:100%;}
#keyVisual3 .bx-controls-direction a {position:absolute; top:50%; width:80px; height:100px; font-size:28px; text-align:center; line-height:100px; #cd133300 !important text-indent:inherit; margin-top:-50px; background:rgba(0,0,0,0.0); z-index:30 !important}
#keyVisual3 .bx-prev {left:10%}
#keyVisual3 .bx-next {right:10%}
#keyVisual3 .bx-pager {position:absolute; bottom:30px; left:0; width:100%}
#keyVisual3 .bx-pager .bx-pager-item {display:inline-block; margin:0 4px}
#keyVisual3 .bx-pager .bx-pager-item a {display:block; width:15px; height:15px; text-indent:-9999em; margin:2px; opacity:0.8; transition:all 0.35s ease-in-out; border-radius: 50%; border: 2px solid #888 ;}
#keyVisual3 .bx-pager .bx-pager-item a.active {margin:1px 1px; width:18px; height:18px; background:#888; opacity:1 }




/* COMPANY - ȸ»ç¼Ò°³ */
#container .about-main {padding:50px 0; background:url(../../img/keyvisual1_1.jpg) center top no-repeat; background-size:cover; text-align:center;}
#container .about-main h3 {font-size:24px; font-weight:normal; color:#fff; text-align:center; line-height:1.65; margin-bottom:80px}
#container .about-main .company-infos {display:table; width:100%; max-width:1200px; margin:auto; table-layout:fixed}
#container .about-main .company-infos > li {display:inline-block; color:#333; margin : auto; }
#container .about-main .company-infos > li:first-child {border-left:0px solid rgba(255, 255, 255, 0.55)}
#container .about-main .company-infos > li i {display:inline-block; font-size:48px; height:60px}
#container .about-main .company-infos > li span {font-size:3em; font-weight:500; line-height:40px; padding:30px; }
#container .about-main .company-infos > li p {font-size:1.1em; line-height:1.5; margin-bottom:30px; margin-top:20px;}
#container .about-section1 {padding-bottom:0 !important}
#container .about-section1 .about-desc {font-size:16.5px; color:#555555; text-align:center; line-height:1.6; margin-bottom:60px}
#container .about-section1 .about-info {}
#container .about-section1 .about-info:after {content:''; clear:both; display:block}
#container .about-section1 .about-info dt, #container .about-section1 .about-info dd {font-size:16px; line-height:1}
#container .about-section1 .about-info dt {float:left; display:block; width:130px; padding:20px 15px; font-weight:600; color:#2b2b2b; border-top:1px solid #333}
#container .about-section1 .about-info dd {display:block; margin-left:150px; padding:20px 15px; color:#666; border-top:1px solid #e2e2e2}
#container .about-section2 .team-info > li {transition:opacity 0.4s ease}
#container .about-section2 .team-info > li:before {content:''; display:block; height:1px; margin-bottom:30px; background:#e5e5e5; transition:background 0.4s ease}
#container .about-section2 .team-info > li .imgBox {overflow:hidden}
#container .about-section2 .team-info > li .imgBox img {display:block; width:100%}
#container .about-section2 .team-info > li .detail h3 {font-size:24px; font-weight:300; color:#2b2b2b; margin:35px 0 5px}
#container .about-section2 .team-info > li .detail .subtit {display:block; font-size:14px; font-weight:300; color:#9a9a9a; margin-bottom:25px}
#container .about-section2 .team-info > li .detail p {color:#6a6a6a; line-height:1.85}
#container .about-section2 .team-info > li .detail .sns-link {margin-top:25px; font-size:0}
#container .about-section2 .team-info > li .detail .sns-link > li {display:inline-block; font-size:18px; margin-right:10px}
#container .about-section2 .team-info > li .detail .sns-link > li a {font-size:18px; color:#ffa600}




/* ¼½¼Ç °øÅë */
#mainContainer {position:relative; overflow:hidden}
#mainContainer .main-section {position:relative; padding:30px 0px 80px}
#mainContainer .main-section2 {position:relative; padding:10px 0px 50px}
#mainContainer .main-section:before, #mainContainer .main-section:after {content:''; display:block}
#mainContainer .main-section:after {clear:both}
#mainContainer .main-section .main-title {margin-bottom:20px; text-align:center}
#mainContainer .main-section .main-title h2 {font-size:42px; font-weight:500; color:#222; letter-spacing:-1px; margin-bottom:10px}
#mainContainer .main-section .main-title h2:before {content:''; display:block; margin:0 auto 15px; width:1px; height:40px; background:#fff}
#mainContainer .main-section .main-title p {font-size:18px; color:#333}
#mainContainer .main-section > .container {position:relative; max-width:1200px; margin:auto}
#mainContainer .main-section > .container:before, #mainContainer .main-section > .container:after {content:''; display:block}
#mainContainer .main-section > .container:after {clear:both}
#mainContainer .main-section .btn-bottom {clear:both; margin-top:50px; text-align:center}

/* ¼½¼Ç °øÅë2 */
#mainContainer {position:relative; overflow:hidden}
#mainContainer .main-section2 {position:relative; padding:10px 0px 70px}
#mainContainer .main-section2:before, #mainContainer .main-section:after {content:''; display:block}
#mainContainer .main-section2:after {clear:both}
#mainContainer .main-section2 .main-title {margin-bottom:20px; text-align:center}
#mainContainer .main-section2 .main-title h2 {font-size:42px; font-weight:500; color:#222; letter-spacing:-1px; margin-bottom:10px}
#mainContainer .main-section2 .main-title h2:before {content:''; display:block; margin:0 auto 15px; width:1px; height:40px; background:#fff}
#mainContainer .main-section2 .main-title p {font-size:18px; color:#333}
#mainContainer .main-section2 > .container {position:relative; max-width:1200px; margin:auto}
#mainContainer .main-section2 > .container:before, #mainContainer .main-section > .container:after {content:''; display:block}
#mainContainer .main-section2 > .container:after {clear:both}
#mainContainer .main-section2 .btn-bottom {clear:both; margin-top:50px; text-align:center}


/* ¸ÞÀÎ ¼½¼Ç - OUR BUSINESS */
#mainContainer #section1 {}
#mainContainer #section1 .business-grid > li {text-align:center; }
#mainContainer #section1 .business-grid > li .imgBox {position:relative; overflow:hidden; }
#mainContainer #section1 .business-grid > li .imgBox:before {position:absolute; top:0; left:0; content:''; width:100%; height:100%; transition:opacity 0.25s ease-in-out; z-index:10; }
#mainContainer #section1 .business-grid > li .imgBox img {display:block; width:100%; transition:transform 0.25s; ease-in-out; }
#mainContainer #section1 .business-grid > li:hover .imgBox:before {opacity:0.2 }
#mainContainer #section1 .business-grid > li:hover .imgBox img {transform:scale(1.15) }
#mainContainer #section1 .business-grid > li .title {font-size:22px; font-weight:500; color:#333; line-height:1.3; margin:25px 0 15px;}
#mainContainer #section1 .business-grid > li .p {font-size:14px; font-weight:400; color:#666666; line-height:1.45; word-break:keep-all; margin:25px 0 15px;}

/* ¸ÞÀÎ ¼½¼Ç - ¼Ö·ç¼Ç->½½¶óÀÌµå ¹è³Ê*/
#mainContainer #section100 {}
#mainContainer #section100 .business-grid > li {text-align:center; }
#mainContainer #section100 .business-grid > li .imgBoxn {position:relative; overflow:hidden; margin:0px auto 10px; background-color: #fff;}
#mainContainer #section100 .business-grid > li .imgBoxn:before {position:absolute; top:0; left:0; content:''; width:100%; height:100%; z-index:10; }
#mainContainer #section100 .business-grid > li .imgBoxn img {display:block; width:100%; }
#mainContainer #section100 .business-grid > li:hover .imgBoxn:before { }
#mainContainer #section100 .business-grid > li:hover .imgBoxn img { }
#mainContainer #section100 .business-grid > li .title {font-size:1.4em; font-weight:700; color:#333; line-height:1.3; margin:25px auto 10px 20px;}
#mainContainer #section100 .business-grid > li p {font-size:16px; font-weight:400; color:#666666; line-height:1.45; word-break:keep-all; margin-bottom:20px}


/* ¸ÞÀÎ ¼½¼Ç - ¼Ö·ç¼Ç->6°¡Áö ¹è³Ê*/
#mainContainer #section1 {}
#mainContainer #section1 .business-grid > li {text-align:center; }
#mainContainer #section1 .business-grid > li .imgBoxs {position:relative; overflow:hidden; }
#mainContainer #section1 .business-grid > li .imgBoxs:before {position:absolute; top:0; left:0; content:''; width:100%; height:100%;transition:opacity 0.25s ease-in-out;; z-index:10; }
#mainContainer #section1 .business-grid > li .imgBoxs img {display:block; width:100%; transition:transform 0.25s; ease-in-out; }
#mainContainer #section1 .business-grid > li:hover .imgBoxs:before {opacity:0.2 }
#mainContainer #section1 .business-grid > li:hover .imgBoxs img {transform:scale(1.15) }
#mainContainer #section1 .business-grid > li .title {font-size:22px; font-weight:500; color:#333; line-height:1.3; margin:25px 0 15px;}
#mainContainer #section1 .business-grid > li p {font-size:14px; font-weight:400; color:#666666; line-height:1.45; word-break:keep-all; margin-bottom:20px}


/* ¸ÞÀÎ ¼½¼Ç - business2 */
#mainContainer #section1 {}
#mainContainer #section1 .business-grid > li {text-align:center; margin-top:30px;}
#mainContainer #section1 .business-grid > li .imgBox2 {position:relative; overflow:hidden; }
#mainContainer #section1 .business-grid > li .imgBox2:before {position:absolute; top:0; left:0; content:''; width:100%; height:100%; transition:opacity 0.25s ease-in-out; z-index:10; }
#mainContainer #section1 .business-grid > li .imgBox2 img {display:block; width:100%; transition:transform 0.25s ease-in-out; }
#mainContainer #section1 .business-grid > li:hover .imgBox2:before {opacity:0.2 }
#mainContainer #section1 .business-grid > li:hover .imgBox2 img {transform:scale(1.15) }
#mainContainer #section1 .business-grid > li .title {font-size:22px; font-weight:500; color:#333; line-height:1.3; margin:25px 0 15px;}
#mainContainer #section1 .business-grid > li p {font-size:16px; font-weight:400; color:#666666; line-height:1.45; word-break:keep-all; margin-bottom:20px}


/* ¸ÞÀÎ ¼½¼Ç - Fiberbase Networks*/
#mainContainer #section1_1 {}
#mainContainer #section1_1 .business-grid > li {text-align:center}
#mainContainer #section1_1 .business-grid > li .imgBox {position:relative; overflow:hidden; }
#mainContainer #section1_1 .business-grid > li .imgBox:before {position:absolute; top:0; left:0; content:''; width:100%; height:100%; transition:opacity 0.25s ease-in-out; z-index:10; }
#mainContainer #section1_1 .business-grid > li .imgBox img {display:block; width:100%; transition:transform 0.25s ease-in-out; }
#mainContainer #section1_1 .business-grid > li:hover .imgBox:before {opacity:0.2 }
#mainContainer #section1_1 .business-grid > li:hover .imgBox img {transform:scale(1.15) }
#mainContainer #section1_1 .business-grid > li .title {font-size:22px; font-weight:500; color:#333; line-height:1.3; margin:25px 0 15px;}
#mainContainer #section1_1 .business-grid > li p {font-size:15px; font-weight:300; color:#666666; line-height:1.45; word-break:keep-all; margin-bottom:20px}
#mainContainer #section1_1 .business-grid > li .imgBox .info bg3 {background-color: #448fd4; width:100%; height:100%;}




/* ¸ÞÀÎ ¼½¼Ç - Æз²·¢½º À̹ÌÁö */
#mainContainer #section2 {padding:50px 10px}
#mainContainer #section2:before {position:absolute; top:0; left:0; content:''; width:100%; height:100%; background:#000; opacity:.0; z-index:5}
#mainContainer #section2 .text {position:relative; text-align:center; z-index:10}
#mainContainer #section2 .text h2 {font-size:64px; font-weight:500; color:#fff}
#mainContainer #section2 .text h3 {font-size:20px; font-weight:400; color:#fff}


/* ¸ÞÀÎ ¼½¼Ç - PRODUCT */
#mainContainer #section4 {background:#f4f4f4}
#mainContainer #section4 .photo-grid > table {position:relative; box-shadow:0 30px 40px -20px rgba(0,0,0,0.1); transition:transform 0.3s ease}
#mainContainer #section4 .photo-grid > table td {background:#fff}
#mainContainer #section4 .photo-grid > table .board_output_gallery_img {position:relative; overflow:hidden}
#mainContainer #section4 .photo-grid > table .board_output_gallery_img img {display:block; width:100%; height:auto !important; transition:transform .3s}
#mainContainer #section4 .photo-grid > table br {display:none}
#mainContainer #section4 .photo-grid > table .board_output_gallery_img a:before {position:absolute; top:0; left:0; content:''; width:100%; height:100%; background:#000; opacity:0; z-index:5; transition:opacity .3s}
#mainContainer #section4 .photo-grid > table tr:last-child td {position:relative; margin-top:10px; padding:30px; vertical-align:top}
#mainContainer #section4 .photo-grid > table tr span {text-align:left !important}
#mainContainer #section4 .photo-grid > table .board_output_gallery_subject {display:block; margin-bottom:20px}
#mainContainer #section4 .photo-grid > table .board_output_gallery_subject a {font-size:18px; font-weight:300; color:#2b2b2b; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#mainContainer #section4 .photo-grid > table .board_output_gallery_description {display:-webkit-box; font-size:14px; color:#9a9a9a; line-height:1.5; max-height:63px; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis}
/*
#mainContainer #section4 .photo-grid > table .board_output_gallery_description:before {position:absolute; bottom:30px; left:30px; content:'read more'; color:#666}
#mainContainer #section4 .photo-grid > table .board_output_gallery_description:after {position:absolute; bottom:29px; left:105px; content:'\e907'; font-family:'xeicon'; color:#666; transition:left 0.3s}
#mainContainer #section4 .photo-grid > table:hover .board_output_gallery_description:before, #mainContainer #section4 .photo-grid > table:hover .board_output_gallery_description:after {color:#ffa600}
#mainContainer #section4 .photo-grid > table:hover .board_output_gallery_description:after {left:110px}
*/
#mainContainer #section4 .photo-grid > table:hover .board_output_gallery_img a img {transform:scale(1.125)}
#mainContainer #section4 .photo-grid > table:hover .board_output_gallery_img a:before {opacity:0.25}

/*------------------ ¼­ºêÆäÀÌÁö ½ºÅ¸ÀÏ ------------------ */
/* ¼­ºêºñÁÖ¾ó */
#subVisual {position:relative; height:380px; overflow:hidden}
#subVisual > .visual_img {position:absolute; display:block; top:-50px; left:50%; margin-left:-1250px; transform:scale(1.15); transition:transform 5s ease}
#subVisual > .title {position:relative; display:table; max-width:1200px; width:100%; height:100%; margin:auto}
#subVisual > .title h2 {display:table-cell; height:100%; font-family:'Abel','Noto Sans KR'; font-size:48px; font-weight:normal; color:#fff; text-align:center; letter-spacing:3px; padding-top:105px; vertical-align:middle; opacity:0; text-shadow:0 3px 8px rgba(0, 0, 0, 0.15); transform:translateY(30px); transition:all 0.8s ease; transition-delay:2s}
#subVisual.load > .visual_img {transform:scale(1.0)}
#subVisual.load > .title h2 {opacity:1; transform:translateY(0)}
/* ÆäÀÌÁö ³»ºñ°ÔÀÌ¼Ç */
#breadcrumbs {border-bottom:1px solid #e2e2e2}
#breadcrumbs > .container {max-width:1200px; margin:auto}
#breadcrumbs > .container > .home {float:left; width:55px; height:55px; font-size:18px; color:#000; text-align:center; line-height:55px; border-left:1px solid #e2e2e2; border-right:1px solid #e2e2e2}
#breadcrumbs > .container > .home:hover {color:#cd1333;}




#breadcrumbs > .container > div {float:left; position:relative; width:240px}
#breadcrumbs > .container > div > a {position:relative; display:block; width:100%; height:55px; padding:0 20px; font-size:16px; color:#333; line-height:55px; border-right:1px solid #e2e2e2}
#breadcrumbs > .container > div > a.current {font-weight:550; color:#444444}
#breadcrumbs > .container > div > a:after {position:absolute; right:20px; content:'\e936'; font-family:'xeicon'; font-size:14px; color:#000; transition:transform 0.3s ease-in-out}
#breadcrumbs > .container > div > ul {position:absolute; display:none; top:55px; left:-1px; right:0; padding:25px 30px; border:1px solid #dedede; background:#f9f9f9; z-index:20}
#breadcrumbs > .container > div > ul li a {font-size:16px; color:#555; line-height:2.2}
#breadcrumbs > .container > div > ul li a:hover {font-size:16px; color:#cd1333; line-height:2.2}
#breadcrumbs > .container > div.open > a:after {transform:rotate(180deg); color:#cd1333;}
/* ¼½¼Ç °øÅë */
#container {position:relative; overflow:hidden}
#container img {max-width:100%}
#container imgs {width:100%}
#container .container-inner {position:relative; max-width:1200px; margin:auto; padding-top:0px; padding-bottom: 30px; border-bottom: 1px solid #DDD;}
#container .container-inner .imgbox1 {position:relative; float:center; margin-bottom:30px; }
#container .container-inner:before, #container .container-inner:after, #container .container-fluid:before, #container .container-fluid:after, #container section.sub-section:before, #container section.sub-section:after {content:''; display:block}
#container .container-inner:after, #container .container-fluid:after, #container section.sub-section:after {clear:both}

#container .container-inners {position:relative; max-width:1200px; margin:auto; padding-top:30px; padding-bottom: 30px; border-bottom: 1px dashed #ccc;}
#container .container-inners .imgbox1 {position:relative; float:center; margin-bottom:30px; }
#container .container-inners:before, #container .container-inners:after, #container .container-fluid:before, #container .container-fluid:after, #container section.sub-section:before, #container section.sub-section:after {content:''; display:block}
#container .container-inners:after, #container .container-fluid:after, #container section.sub-section:after {clear:both}




#container section.sub-section {position:relative; padding:0 0; }
#container .main-title {padding:50px 0 15px 0; text-align:center; border-bottom: 1px solid #e5e5e5; }
#container .main-title.innerTitle {padding-top:0}
#container .main-title h2 {font-size:36px; font-weight:300; color:#2b2b2b}
#container .main-title p {font-size:16px; font-weight:300; color:#555; line-height:1.6; margin-top:25px; margin-bottom:25px;}
#container .main-title p strong {font-weight:600; color:#ff6c00}


#container section.sub-section {position:relative; padding:0 0; }

#container .main-titles{padding:50px 0 5px 0; text-align:center; }
#container .main-titles.innerTitle {padding-top:0}
#container .main-titles h2 {font-size:36px; font-weight:300; color:#2b2b2b}
#container .main-titles p {font-size:16px; font-weight:300; color:#555; line-height:1.6; margin-top:25px; margin-bottom:25px;}
#container .main-titles p strong {font-weight:600; color:#ff6c00}


#container .bottom-btn {padding-top:60px; text-align:center}

#container section.sub-section2 {position:relative; padding:5px 0; }


#container .main-title2 {padding:45px 0 15px 0; text-align:center; }
#container .main-title2.innerTitle {padding-top:0}
#container .main-title2 h2 {font-size:36px; font-weight:300; color:#2b2b2b}
#container .main-title2 p {font-size:16px; font-weight:300; color:#555; line-height:1.6; margin-top:15px; padding:0 10px 0 10px;}
#container .main-title2 p strong {font-weight:600; color:#ff6c00}


/* COMPANY - ȸ»ç¼Ò°³ */
#container .about-main {padding:50px 0; background:url(../../img/about_main_bg.jpg) center top no-repeat; background-size:cover}
#container .about-main h3 {font-size:24px; font-weight:normal; color:#fff; text-align:center; line-height:1.65; margin-bottom:80px}
#container .about-main .company-info {display:table; width:100%; max-width:1200px; margin:auto; table-layout:fixed}
#container .about-main .company-info > li {display:table-cell; padding:50px 20px; color:#fff; text-align:center; border-right:1px solid rgba(255, 255, 255, 0.55)}
#container .about-main .company-info > li:first-child {border-left:1px solid rgba(255, 255, 255, 0.55)}
#container .about-main .company-info > li i {display:inline-block; font-size:48px; height:60px}
#container .about-main .company-info > li h4 {font-size:24px; font-weight:600; margin:10px 0 15px}
#container .about-main .company-info > li p {font-size:17px; line-height:1.5}
#container .about-section1 {padding-bottom:0 !important}
#container .about-section1 .about-desc {font-size:16.5px; color:#555555; text-align:center; line-height:1.6; margin-bottom:60px}
#container .about-section1 .about-info {}
#container .about-section1 .about-info:after {content:''; clear:both; display:block}
#container .about-section1 .about-info dt, #container .about-section1 .about-info dd {font-size:16px; line-height:1}
#container .about-section1 .about-info dt {float:left; display:block; width:130px; padding:20px 15px; font-weight:600; color:#2b2b2b; border-top:1px solid #333}
#container .about-section1 .about-info dd {display:block; margin-left:150px; padding:20px 15px; color:#666; border-top:1px solid #e2e2e2}
#container .about-section2 .team-info > li {transition:opacity 0.4s ease}
#container .about-section2 .team-info > li:before {content:''; display:block; height:1px; margin-bottom:30px; background:#e5e5e5; transition:background 0.4s ease}
#container .about-section2 .team-info > li .imgBox {overflow:hidden}
#container .about-section2 .team-info > li .imgBox img {display:block; width:100%}
#container .about-section2 .team-info > li .detail h3 {font-size:24px; font-weight:300; color:#2b2b2b; margin:35px 0 5px}
#container .about-section2 .team-info > li .detail .subtit {display:block; font-size:14px; font-weight:300; color:#9a9a9a; margin-bottom:25px}
#container .about-section2 .team-info > li .detail p {color:#6a6a6a; line-height:1.85}
#container .about-section2 .team-info > li .detail .sns-link {margin-top:25px; font-size:0}
#container .about-section2 .team-info > li .detail .sns-link > li {display:inline-block; font-size:18px; margin-right:10px}
#container .about-section2 .team-info > li .detail .sns-link > li a {font-size:18px; color:#ffa600}


/* COMPANY - ¿¬Çõ */
#container .history-section {padding:20px 0 80px !important}
#container .history-section .year-wrap {position:relative; padding-bottom:50px}
#container .history-section .year-wrap:after {content:''; clear:both; display:block}
#container .history-section .year-wrap:before {position:absolute; top:0; left:50%; content:''; width:1px; height:100%; margin-left:1px; background:#cd1333; z-index:10}
#container .history-section .year-wrap:last-child {padding-bottom:200px}
#container .history-section .year-wrap > .year {position:relative; width:80px; height:80px; margin:auto; font-family:'Abel','Noto Sans KR',sans-serif; font-size:24px; font-weight:300; color:#fff; text-align:center; line-height:80px; border-radius:50%; background:#cd1333; z-index:20}
#container .history-section .year-wrap > ul {position:relative}
#container .history-section .year-wrap > ul:after {content:''; clear:both; display:block}
#container .history-section .year-wrap > ul > li {position:relative; margin-top:40px; padding-left:55%}
#container .history-section .year-wrap > ul > li:before {position:absolute; top:5px; left:50%; content:''; width:16px; height:16px; margin-left:-8px; border:2px solid #aaaaaa; border-radius:50%; background:#fff; z-index:20}
#container .history-section .year-wrap > ul > li.left {text-align:right; padding-left:0; padding-right:55%}
#container .history-section .year-wrap > ul > li .inner {margin:auto}
#container .history-section .year-wrap > ul > li h3 {font-size:26px; font-weight:normal; color:#cd1333; margin-bottom:20px}
#container .history-section .year-wrap > ul > li dl dt, #container .history-section .year-wrap > ul > li dl dd {font-size:15px}
#container .history-section .year-wrap > ul > li dl dt {font-family:'Abel','Noto Sans KR',sans-serif; font-weight:normal; color:#8a8a8a; letter-spacing:1px; margin-bottom:15px}
#container .history-section .year-wrap > ul > li dl dd {color:#6a6a6a; line-height:1.6}
#container .history-section .finish-box {position:absolute; bottom:0; left:50%; width:200px; height:200px; margin-left:-95px; text-align:center; border:6px solid #f2f2f2; border-radius:50%; background:#cd1333; z-index:20}
#container .history-section .finish-box:before {display:inline-block; content:''; height:100%; vertical-align:middle}
#container .history-section .finish-box p {display:inline-block; font-size:16px; font-weight:500; color:#fff; line-height:1.65; vertical-align:middle}
/* COMPANY - ¿À½Ã´Â±æ */
#container .location-section {padding:0 0 80px !important}
#container .location-section #map {height:500px; margin-bottom:50px}
#container .location-section h3 {font-size:20px; font-weight:normal; color:#2b2b2b; margin-bottom:5px}
#container .location-section h4 {font-size:15px; font-weight:normal; color:#8a8a8a; margin-bottom:60px}
#container .location-section h4 span:before {content:''; display:inline-block; width:1px; height:12px; margin:0 10px; background:#ccc; vertical-align:-1px}
#container .location-section .method-wrapper {border-top:3px solid #cd1333}
#container .location-section .method-wrapper .method-line {padding:30px; border-bottom:1px dotted #bbb}
#container .location-section .method-wrapper .method-line p.title {font-size:20px; font-weight:normal; color:#cd1333; margin-bottom:15px}
#container .location-section .method-wrapper .method-line dl:after {content:''; clear:both; display:block}
#container .location-section .method-wrapper .method-line dl dt, #container .location-section .method-wrapper .method-line dl dd {font-size:15px; padding:7px 0}
#container .location-section .method-wrapper .method-line dl dt {clear:both; float:left; font-weight:normal; color:#2b2b2b; padding-right:20px}
#container .location-section .method-wrapper .method-line dl dd {color:#6a6a6a}
#container .location-section .method-wrapper .method-line dl dd .arrow:before {display:inline-block; content:'\e90b'; font-family:'xeicon'; margin:0 8px}
#container .location-section .method-wrapper .method-line .subway {display:inline-block; color:#fff}
#container .location-section .method-wrapper .method-line .subway.line1 {background:#00498b}
#container .location-section .method-wrapper .method-line .subway.line2 {background:#009246}
#container .location-section .method-wrapper .method-line .subway.line3 {background:#f36630}
#container .location-section .method-wrapper .method-line .subway.line4 {background:#00a2d1}
#container .location-section .method-wrapper .method-line .subway.line5 {background:#5940ff}
#container .location-section .method-wrapper .method-line .subway.line6 {background:#cc660d}
#container .location-section .method-wrapper .method-line .subway.line7 {background:#4d8000}
#container .location-section .method-wrapper .method-line .subway.line8 {background:#ff33a6}
#container .location-section .method-wrapper .method-line dl dt.subway {position:relative; top:4px; margin-right:20px; padding:4px 10px}
#container .location-section .method-wrapper .method-line span.subway {margin:0 5px; padding:0 6px; border-radius:50%}
#container .location-section .method-wrapper .method-line .box {float:left; width:40%}
#container .location-section .method-wrapper .method-line .box.last {width:20%; padding-top:42px}
/* BUSINESS - »ç¾÷¼Ò°³ */
#container .business-intro {padding-top:0 !important}
#container .business-intro .business-info > li {position:relative; text-align:center}
#container .business-intro .business-info > li:before {position:absolute; top:0; left:-1px; content:''; width:1px; height:100%; background:#eee}
#container .business-intro .business-info > li:first-child:before {display:none}
#container .business-intro .business-info > li .iconBox img {max-width:160px}
#container .business-intro .business-info > li h3 {margin:40px 0 30px; font-size:18px; font-weight:600; color:#cd1333}
#container .business-intro .business-info > li p {color:#6a6a6a; line-height:1.8; word-break:keep-all; padding-top:20px;}
#container .business-intro .business-info > li h2 {margin:20px 0 20px; font-size:24px; font-weight:600; color:#cd1333}
#container .business-detail {background:#f7f7f7}
#container .business-detail .detail-items {white-space:nowrap; overflow:hidden}
#container .business-detail .detail-items > li {position:relative; width:33.333%; height:500px; text-align:center; overflow:hidden; transition:width 0.3s ease-out}
#container .business-detail .detail-items > li .bg {position:absolute; top:0; left:50%; width:600px; margin-left:-300px}
#container .business-detail .detail-items > li .bg:before {position:absolute; top:0; left:0; content:''; width:100%; height:100%; background:#000; opacity:0.2; transition:opacity 0.3s ease-out; z-index:10}
#container .business-detail .detail-items > li .bg > img {display:block; max-width:100%}
#container .business-detail .detail-items > li .info-box {position:relative; top:40%; padding:0 30px; transition:top 0.3s ease-out; z-index:20}
#container .business-detail .detail-items > li .info-box span {display:block; font-size:13px; color:#ff6c00; margin-top:15px}
#container .business-detail .detail-items > li .info-box h3 {font-size:20px; font-weight:500; color:#fff; margin-bottom:20px}
#container .business-detail .detail-items > li .info-box p {font-size:14px; color:#fff; line-height:1.75; white-space:normal; word-break:keep-all; width:300px; margin:auto auto 30px; opacity:0; transition:opacity 0.3s ease-out}
#container .business-detail .detail-items > li .info-box a {opacity:0; transition:all 0.3s ease-out}
/* BUSINESS - »ç¾÷¼Ò°³ È«º¸¿µ»ó ¸ð´Þ */
#container .business-detail #promo-wrapper {display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:9999}
#container .business-detail #promo-wrapper > .mask-layer {position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.75; z-index:100}
#container .business-detail #promo-wrapper > .modal {position:absolute; top:50%; left:50%; width:80%; max-width:800px; height:450px; margin:-225px 0 0 -400px; box-shadow:0 0 60px 10px rgba(0,0,0,0.2) ; opacity:0; z-index:120; transform:translateY(-50px); transition:all 0.4s ease-out}
#container .business-detail #promo-wrapper > .modal .btn-close {position:absolute; top:0; right:-60px; width:40px; height:40px; cursor:pointer; border:none; background:transparent; outline:none}
#container .business-detail #promo-wrapper > .modal .btn-close span {position:absolute; display:block; top:16px; left:50%; width:42px; height:2px; margin-left:-21px; background:#fff}
#container .business-detail #promo-wrapper > .modal .btn-close .closeline1 {transform:rotate(45deg)}
#container .business-detail #promo-wrapper > .modal .btn-close .closeline2 {transform:rotate(-45deg)}
#container .business-detail #promo-wrapper.play > .modal {opacity:1; transform:translateY(0)}
/* BUSINESS - »ç¾÷ ºÐ¾ß */
#container .business-part1 {padding-top:20px !important}
#container .business-part1 .part-items > li {margin-bottom:60px; text-align:center; vertical-align:top}
#container .business-part1 .part-items > li:nth-child(4), #container .business-part1 .part-items > li:nth-child(5), #container .business-part1 .part-items > li:nth-child(6) {margin-bottom:0}
#container .business-part1 .part-items > li .icon {width:80px; height:80px; font-size:34px; color:#ff6c00; text-align:center; line-height:76px; margin:auto; border:2px solid #e2e2e2; border-radius:50%; transition:all 0.3s ease-out}
#container .business-part1 .part-items > li h3 {margin:30px 0 15px; font-size:22px; font-weight:500; color:#ff6c00}
#container .business-part1 .part-items > li p {font-size:15px; color:#6a6a6a; line-height:1.8}

/* »ç¾÷ºÐ¾ß °¡¿îµ¥Á¤·Ä ½ÃÀÛ */
#container .business-part2_1 {border-top:1px solid #f0f0f0; width:100%; background:#f0f0f0;}
#container .business-part2_1 .choose-info .text-info-title h3 {font-size:28px; font-weight:normal; color:#2b2b2b}
#container .business-part2_1 .choose-info .text-info-title h3:after {display:block; content:''; width:35px; height:2px; margin:20px 0 10px; background:#cd1333}
#container .business-part2_1 .choose-info .text-info-title p {color:#4a4a4a; line-height:1.75; margin-bottom:5px}
/* »ç¾÷ºÐ¾ß °¡¿îµ¥Á¤·Ä ³¡ */

#container .business-part2 {border-top:1px solid #fff;width:100%; }
#container .business-part2 .choose-info .text-info-title h3 {font-size:28px; font-weight:normal; color:#2b2b2b}
#container .business-part2 .choose-info .text-info-title h3:after {display:block; content:''; width:35px; height:2px; margin:10px 0 10px; background:#cd1333}
#container .business-part2 .choose-info .text-info-title p {color:#4a4a4a; line-height:1.75; margin-bottom:5px}

#container .business-part2 {border-top:1px solid #fff; }
#container .business-part2 .choose-info .text-info h3 {font-size:28px; font-weight:normal; color:#2b2b2b}
#container .business-part2 .choose-info .text-info h3:after {display:block; content:''; width:35px; height:2px; margin:10px 0 10px; background:#cccccc}
#container .business-part2 .choose-info .text-info p {color:#4a4a4a; line-height:1.75; margin-bottom:25px}

#container .business-part2 .choose-info .text-title h3 {font-size:20px; font-weight:normal; color:#b46100; line-height:1.75;}
#container .business-part2 .choose-info .text-title h4 {font-size:16px; font-weight:bold; line-height:1.75; color:#555 }
#container .business-part2 .choose-info .text-title p_1 {color:#4a4a4a; line-height:1.6; margin-bottom:5px}
#container .business-part2 .choose-info .text-title p_2 {color:#4a4a4a; line-height:1.75; margin-bottom:5px}

#container .business-part3 {border-bottom:1px solid #f0f0f0}
#container .business-part3 #client-slide > .info {float:left; width:30%}
#container .business-part3 #client-slide > .info h3 {font-size:22px; font-weight:normal; color:#2b2b2b; margin-bottom:20px}
#container .business-part3 #client-slide > .info p {color:#6a6a6a; line-height:1.8}
#container .business-part3 #client-slide > .info .controller {padding-top:30px; font-size:0}
#container .business-part3 #client-slide > .info .controller > li {display:inline-block; font-size:15px; margin-right:3px}
#container .business-part3 #client-slide > .info .controller > li a {display:block; width:32px; height:32px; font-size:13px; color:#000; text-align:center; line-height:30px; border:1px solid #e2e2e2; border-radius:50%; transition:all 0.3s ease}
#container .business-part3 #client-slide > .info .controller > li.disabled a {color:#ccc !important; border-color:#e2e2e2 !important; background:#f9f9f9 !important; cursor:not-allowed}
#container .business-part3 #client-slide > .info .controller > li a:hover {color:#fff; border-color:#2b2b2b; background:#2b2b2b}
#container .business-part3 #client-slide > .slides {position:relative; float:right; width:65%; padding-top:60px; overflow:hidden}
#container .business-part3 #client-slide > .slides ul {position:relative; width:5000px}
#container .business-part3 #client-slide > .slides ul > li {float:left; text-align:center}
#container .business-part3 #client-slide > .slides ul > li img {max-width:100%}
#container .business-part4 {}
#container .business-part4 .plan-list > li {font-size:14px; text-align:center; vertical-align:bottom}
#container .business-part4 .plan-list > li .title {padding:35px}
#container .business-part4 .plan-list > li.plan1 .title {background:linear-gradient(90deg, #42b574 0%, #84c450 100%)}
#container .business-part4 .plan-list > li.plan2 .title {background:linear-gradient(90deg, #64aae1 0%, #79ccf2 100%)}
#container .business-part4 .plan-list > li.plan3 .title {background:linear-gradient(90deg, #f5bf2f 0%, #f3a43d 100%)}
#container .business-part4 .plan-list > li.plan4 .title {background:linear-gradient(90deg, #f54b0f 0%, #e50a0a 100%)}
#container .business-part4 .plan-list > li .title > h3 {font-size:24px; font-weight:500; color:#fff}
#container .business-part4 .plan-list > li .title > span {font-size:16px; font-weight:500; color:#fff; margin-bottom:15px; opacity:0.8}
#container .business-part4 .plan-list > li .title > .price {font-size:24px; font-weight:500; color:#fff}
#container .business-part4 .plan-list > li .title > .price span {font-size:18px; font-weight:500; color:#fff; vertical-align:5px}
#container .business-part4 .plan-list > li .title > .price em {font-size:13px; color:#fff; padding-left:5px; vertical-align:-2px}
#container .business-part4 .plan-list > li .info {padding:20px; border:1px solid #f0f0f0; border-top:none}
#container .business-part4 .plan-list > li .info > ul {margin-bottom:20px}
#container .business-part4 .plan-list > li .info > ul > li {padding:10px 0; color:#8b8b8b; border-top:1px solid #f0f0f0}
#container .business-part4 .plan-list > li .info > ul > li:first-child {border-top:none}
#container .business-part4 .plan-list > li .info > ul > li strong {font-weight:600; color:#2b2b2b; padding-right:5px}
#container .business-part4 .plan-list > li .info .btn-black {padding-top:18px; padding-bottom:18px}
/*------------------ ¹öÆ° ½ºÅ¸ÀÏ ------------------ */
.btn-arrow {position:relative; display:inline-block; font-size:15px; color:#666; text-align:left; line-height:1; padding:12px 15px; width:150px; border:1px solid #dedede; transition:all 0.3s text-align:center; border-radius: 30px;}
.btn-arrows {position:relative; display:inline-block; font-size:15px; color:#666; text-align:left; line-height:1; padding:12px 15px; width:250px; border:1px solid #dedede; transition:all 0.3s text-align:center; border-radius: 30px;}

.btn-arrow i {position:absolute; right:15px; transition:right 0.3s; text-align:center;}
.btn-arrow:hover {color:#cd1333}
.btn-arrow:hover i {right:15px}

.btn-arrows i {position:absolute; right:15px; transition:right 0.3s text-align:center;}
.btn-arrows:hover {background-color:#cd1333; color:#fff; border-color:#cd1333;}
.btn-arrows:hover i {right:15px}

.btn-arrow.white {color:#fff; border-color:#fff}
.btn-arrow.white:hover {color:#fff; background:#fff}

.btn-arrow.whites {color:#fff; border-color:#fff;}
.btn-arrow.whites:hover {color:#2b2b2b; background:#fff}

.btn-arrow.black {color:#fff; border-color:#353535; background:#353535}
.btn-arrow.black:hover {border-color:#cd1333; background:#cd1333}
.btn {display:inline-block; font-size:14px; line-height:33px; height:35px; padding:0 15px; border:1px solid transparent; border-radius:2px !important; background:#fff; cursor:pointer; outline:none}
.btn-default {color:#6b6b6b !important; border:1px solid #e2e2e2; background:#fff}
.btn-default:hover {color:#454545 !important; border-color:#aaa; background:#f9f9f9}
.btn-function {color:#eee !important; border-color:#40424b; background:#40424b}
.btn-function:hover {color:#fff !important; border-color:#32343f; background:#32343f}

.btn-admin {color:#fff !important; border-color:#cd1333; background:#cd1333}
.btn-admin:hover {border-color:#cd1333; background:#cd1333}
.btn-danger {color:#fff !important; border-color:#d92f2f; background:#d92f2f}
.btn-danger:hover {border-color:#cf2b2b; background:#cf2b2b}


.btn-primary {display:inline-block; font-weight: bold; font-size:16px; letter-spacing: -0.5px; color:#fff; line-height:1; padding:15px 25px; margin:10px auto 0px; border-radius:8px; background:#cd1333; transition:all 0.4s}
.btn-primary:hover {background:#770014; box-shadow:0 2px 8px 2px rgba(0,0,0,0.1)}



.btn-black {display:inline-block; font-size:15px; color:#fff; line-height:1; padding:15px 25px; background:#4b4b4b; transition:all 0.4s}
.btn-black:hover {background:#ffa600}
.btn-block {display:block; width:100%}
.btn-load {cursor:not-allowed; color:#aaa; border-color:#ccc !important; background:#eee !important}
/*------------------ ÀÎDz ¹× ¼¿·ºÆ® ½ºÅ¸ÀÏ ------------------ */
.frm-input {height:35px; padding:0 10px; border:1px solid #e3e2e2; background:#fff; outline:none}
.frm-input:focus {border-color:#40424b; background:#f9f9f9}
.frm-select {height:35px; padding:0 30px 0 10px; border:1px solid #e2e2e2; cursor:pointer; background:url(../../img/select_arrow.png) right 10px center no-repeat; outline:none}
.frm-select:focus {border-color:#40424b; background-color:#f9f9f9}
/*------------------ °Ô½ÃÆÇ ½ºÅ¸ÀÏ ------------------ */
/* ¸®½ºÆ®Çü ½ºÅ¸ÀÏ */
.tbl-brd-list {width:100%; margin-bottom:40px}
.tbl-brd-list tr td {position:relative; padding:15px; border-bottom:1px solid #e2e2e2}
.tbl-brd-list tr td[width="26"] {width:60px}
.tbl-brd-list tr td, .tbl-brd-list font, .tbl-brd-list span {font-family:inherit !important; font-size:inherit !important; color:inherit !important}
.tbl-brd-list .att_title {font-weight:500; color:#fff !important; text-align:center; border:none !important; background:#777 !important}
.tbl-brd-list tr:nth-child(even) {background:#f9f9f9}
.tbl-brd-list tr td:first-child:before {position:absolute; top:0; left:0; content:''; width:5px; height:100%; background:rgba(0,0,0,0.15); opacity:0; transition:opacity 0.25s ease}
.tbl-brd-list tr:hover td a {color:#000}
.tbl-brd-read {width:100%; margin-bottom:40px; border-top:1px solid #40424b; table-layout:fixed text-align:center; border-bottom:1px solid #e2e2e2}
.tbl-brd-read tr td {height:auto !important; padding:10px; border-bottom:1px solid #e2e2e2 text-align:center; border-top:1px solid #e2e2e2 } /*--------ÀÌ°÷Àº ÄÁÅÙÃ÷ ¿Ã¸±¶§ ÅؽºÆ® ½ºÅ¸ÀÏ-------- */
.tbl-brd-read tr td, .tbl-brd-read tr td font, .tbl-brd-read tr td span {font-family:inherit !important; font-size: !important; line-height:1.3em;}
.tbl-brd-read .board_bgcolor {font-weight:500; color:#40424b; background-color:transparent !important}
.tbl-brd-read .board_bgcolor font {color:#40424b !important}
/* FAQ ½ºÅ¸ÀÏ */
.tbl-brd-faq {width:100%; margin-bottom:40px; border-top:1px solid #40424b}
.tbl-brd-faq tr td {background:#fff !important}
.tbl-brd-faq .board_bgcolor:after {display:inline-block; content:'Q'; width:30px; height:30px; font-size:14px; font-weight:600; color:#fff; text-align:center; line-height:30px; border-radius:2px; background:#40424b}
.tbl-brd-faq .board_bgcolor font {display:none}
.tbl-brd-faq .bbsnewf5 {position:relative}
.tbl-brd-faq .bbsnewf5:after {position:absolute; top:0; right:15px; content:'\e941'; font-family:'xeicon'; font-size:14px; color:#454545; line-height:61px}
.tbl-brd-faq .bbsnewf5.open:after {content:'\e944'}
.tbl-brd-faq .reply-row {display:none}
.tbl-brd-faq .reply-row.open {display:table-row}
.tbl-brd-faq .reply-row td {padding:15px 35px 15px; background:#f7f7f7 !important}
.tbl-brd-faq .reply-row td .reply-block {float:left; display:block; width:30px; height:30px; font-size:14px; font-weight:600; color:#fff; text-align:center; line-height:30px; border-radius:2px; background:#ffa600}
.tbl-brd-faq .reply-row td .reply-container {margin-left:80px}

/* °¶·¯¸®Çü ½ºÅ¸ÀÏ */
div[class^=photo-grid-] .photo-grid-inner {margin:0 -15px }
div[class^=photo-grid-] .photo-grid-inner:after {content:''; clear:both; display:block}
div[class^=photo-grid-] .photo-grid-inner > table {position:relative; float:left; margin-bottom:30px; padding:0 15px; overflow:hidden }
div[class^=photo-grid-] .photo-grid-inner > table a {position:relative; display:block; width:100%; height:100%; overflow:hidden }
div[class^=photo-grid-] .photo-grid-inner > table img {width:100% !important; height:auto !important; border : 1px solid #fff;}
div[class^=photo-grid-] .photo-grid-inner > table .overlay {position:absolute; top:80%; left:0; right:0; height:100%; background:rgba(205,19,51,0.85); opacity:0; z-index:5; border-radius: 8px; transition:all 0.35s ease} /*---¿©±â´Â Á¦Ç°½æ³×ÀÏ ¿À¹ö---*/
div[class^=photo-grid-] .photo-grid-inner > table .post-info {position:absolute; bottom:20px; left:20px; text-align:left; opacity:0; z-index:10; transition:all 0.35s ease}
div[class^=photo-grid-] .photo-grid-inner > table .post-info h3 {font-size:18px; font-weight:normal; color:#fff}
div[class^=photo-grid-] .photo-grid-inner > table .post-info h3:after {content:''; display:block; width:30px; height:1px; margin:15px 0; background:#fff}
div[class^=photo-grid-] .photo-grid-inner > table .post-info span {font-size:13px; color:#fff; font-weight:500;}
div[class^=photo-grid-] .photo-grid-inner > table:hover .overlay {top:0; opacity:1}
div[class^=photo-grid-] .photo-grid-inner > table:hover .post-info {bottom:30px; opacity:1 }
div[class^=photo-grid-] .photo-grid-inner > table:last-child {display:none}
div[class^=photo-grid-] .photo-grid-inner .board {float:none; clear:both; width:100%; padding-top:40px}
.container-fluid div[class^=photo-grid-] .photo-grid-inner, .no-gap .photo-grid-inner {margin-left:0 !important; margin-right:0 !important}
.container-fluid div[class^=photo-grid-] .photo-grid-inner > table, .no-gap .photo-grid-inner > table {margin-bottom:0 !important; padding-left:0 !important; padding-right:0 !important}
.container-fluid div[class^=photo-grid-] .photo-grid-inner > table .overlay, .no-gap .photo-grid-inner > table .overlay {left:0 !important; right:0 !important}
.container-fluid div[class^=photo-grid-] .photo-grid-inner > table .post-info, .no-gap .photo-grid-inner > table .post-info {left:30px}
.container-fluid div[class^=photo-grid-] .photo-container {max-width:1200px; margin:auto}
.photo-grid-2 .photo-grid-inner > table {width:50%}
.photo-grid-3 .photo-grid-inner > table {width:33.333334%}
.photo-grid-4 .photo-grid-inner > table {width:25%}
.photo-grid-5 .photo-grid-inner > table {width:20%}
.photo-grid-6 .photo-grid-inner > table {width:16.666667%}
.photo-grid-7 .photo-grid-inner > table {width:14.285714%}
.photo-grid-8 .photo-grid-inner > table {width:12.5%}
/* ÃÖ±Ù °Ô½Ã¹° - ¸®½ºÆ®Çü */
.tbl-brd-latest {width:100%; border-top:1px solid #e5e5e5; table-layout:fixed}
.tbl-brd-latest td[width="1%"] {display:none}
.tbl-brd-latest td[align="center"] {text-align:right}
.tbl-brd-latest tr td {font-size:14px; font-weight:600; color:#888; padding:30px 50px; border-bottom:1px solid #e5e5e5}
.tbl-brd-latest tr td a {font-size:18px; font-weight:300; color:#7b7b7b}
.tbl-brd-latest tr td a:hover {color:#cd1333}
/* °Ô½ÃÆÇ °øÅë */
/* Å×À̺í */
.board, .bbsnewf5 {font:inherit !important}
.board-write {text-align:right; margin-bottom:30px}
/* ºäÆäÀÌÁö */
#post_area {min-height:150px}
#post_area img {height:auto !important}
/* ÀÎDz ¹× ¼¿·ºÆ® */
input#border {height:35px; padding:0 10px; border:1px solid #e3e2e2; background:#fff; outline:none}
input#border:focus {border-color:#40424b; background:#f9f9f9}
input#border[type=file] {width:100%; border:none}
.board_desc select {height:35px; padding:0 30px 0 10px; border:1px solid #e2e2e2; cursor:pointer; background:url(../../img/select_arrow.png) right 10px center no-repeat; outline:none}
.board_desc select:focus {border-color:#40424b; background-color:#f9f9f9}
/* Ä«Å×°í¸® */
.board-category {margin-bottom:40px}
.board-category ul {font-size:0; text-align:center}
.board-category ul > li {display:inline-block; margin:0 2px; font-size:15px}
.board-category ul > li a {display:block; padding:5px 10px}
.board-category ul > li.active a {font-weight:500; color:#fff; background:#40424b !important}
/* ÆäÀÌ¡ */
.board-paging {margin-bottom:30px; font-size:0; text-align:center}
.board-paging > b, .board-paging > a {display:inline-block; width:30px; height:30px; margin:0 3px; font-size:13px; line-height:28px; border:1px solid #e2e2e2; border-radius:50%}
.board-paging > a {color:#6b6b6b}
.board-paging > a:hover {color:#454545; border-color:#ccc; background:#f9f9f9}
.board-paging > b {color:#fff !important; border-color:#40424b !important; background:#40424b !important}
/* °Ë»ö */
#ext_search input[type=text] {width:160px; height:35px; margin:0 5px; padding:0 10px; border:1px solid #e3e2e2; background:#fff; outline:none}
#ext_search input[type=text]:focus {border-color:#40424b; background:#f9f9f9}
#ext_search select {min-width:80px; height:35px; padding:0 30px 0 10px; border:1px solid #e2e2e2; cursor:pointer; background:url(../../img/select_arrow.png) right 10px center no-repeat; outline:none}
#ext_search select:focus {border-color:#40424b; background-color:#f9f9f9}
/*------------------ Æû¸ÞÀÏ ½ºÅ¸ÀÏ ------------------ */
input.formmail_border {width:100%; height:35px; padding:0 10px; border:1px solid #e3e2e2; background:#fff; outline:none}
input.formmail_border:focus {border-color:#40424b; background:#f9f9f9}
input.formmail_border[name^=phone] {width:60px !important}
input.formmail_border[type=file] {border:none}
.formmail_cell_bgcolor textarea {width:100%; padding:10px; font-family:inherit !important; font-size:inherit !important; border:1px solid #e3e2e2; background:#fff; outline:none}
.formmail_cell_bgcolor textarea:focus {border-color:#40424b; background:#f9f9f9}
/* ----------------------------------------------------------
* ¹Ìµð¾î Äõ¸®
---------------------------------------------------------- */
/* PC */
@media screen and (min-width:1025px) {
/*------------------ ¸ÞÀÎÆäÀÌÁö ½ºÅ¸ÀÏ ------------------ */
/* ¸ÞÀÎ ¼½¼Ç - PRODUCT */
#mainContainer #section4 .photo-grid > table:hover {transform:translateY(-20px)}
/*------------------ ¼­ºêÆäÀÌÁö ½ºÅ¸ÀÏ ------------------ */
/* COMPANY - ȸ»ç¼Ò°³ */
#container .about-section2 .team-info:hover > li {opacity:0.5}
#container .about-section2 .team-info > li:hover {opacity:1}
#container .about-section2 .team-info > li:hover:before {background:#333}
/* BUSINESS - »ç¾÷¼Ò°³ */
#container .business-detail .detail-items > li:hover .bg:before {opacity:0.5}
#container .business-detail .detail-items > li:hover .info-box {top:25%}
#container .business-detail .detail-items > li:hover .info-box p, #container .business-detail .detail-items > li:hover .info-box a {opacity:1}
#container .business-detail .detail-items > li.on {width:42%}
#container .business-detail .detail-items > li.off {width:29%}
/* BUSINESS - »ç¾÷ºÐ¾ß */
#container .business-part1 .part-items > li:hover .icon {color:#fff; border-color:#ff6c00; background:#ff6c00; box-shadow:0 2px 15px 3px rgba(0,0,0,0.12)}
#container .business-part3 #client-slide > .slides ul > li img {opacity:0.5; transition:opacity 0.3s}
#container .business-part3 #client-slide > .slides ul > li img:hover {opacity:1}
/*------------------ °Ô½ÃÆÇ ½ºÅ¸ÀÏ ------------------ */
/* ¸®½ºÆ®Çü ½ºÅ¸ÀÏ */
.tbl-brd-list tr td a {transition:color 0.4s ease}
.tbl-brd-list tr:hover td:first-child:before {opacity:1}
/* °Ô½ÃÆÇ °øÅë */
/* Ä«Å×°í¸® */
.board-category ul > li a:hover {background:#f7f7f7}
}
/* ÅÂºí¸´ */
@media screen and (max-width:1024px) {
/*------------------ ¸ÞÀÎÆäÀÌÁö ½ºÅ¸ÀÏ ------------------ */
/* Å°ºñÁÖ¾ó */
#keyVisual {height:650px}
#keyVisual .slides > li .text {padding:0 30px}
#keyVisual .slides > li .text h2 {font-size:62px}
#keyVisual .slides > li .text p {font-size:18px}
/* ¼½¼Ç °øÅë */
#mainContainer .main-section {padding:80px 0}
#mainContainer .main-section .main-title h2 {font-size:36px}
#mainContainer .main-section .main-title p {font-size:16px}
#mainContainer .main-section > .container {padding:0 30px}
#mainContainer .main-section .btn-bottom {margin-top:40px}
/* ¸ÞÀÎ ¼½¼Ç - OUR BUSINESS */
#mainContainer #section1 .business-grid > li {margin-bottom:50px}
/* ¸ÞÀÎ ¼½¼Ç - Æз²·¢½º À̹ÌÁö */
#mainContainer #section2 {padding:220px 0}
#mainContainer #section2 .text h2 {font-size:56px}
/*------------------ ¼­ºêÆäÀÌÁö ½ºÅ¸ÀÏ ------------------ */
/* ¼­ºêºñÁÖ¾ó */
#subVisual {height:380px; overflow:hidden}
#subVisual > .visual_img {top:-20px; width:1800px; margin-left:-900px}
/* ¼½¼Ç °øÅë */
#container .container-inner {padding:0 30px}
#container .container-inners {padding:0 30px}
#container section.sub-section {position:relative; padding:60px 0; }
/* COMPANY - ȸ»ç¼Ò°³ */
#container .about-main {padding:130px 0}
#container .about-main h3 {font-size:21px; margin-bottom:70px}
#container .about-main .company-info {padding:0 30px}
#container .about-section2 .team-info > li {margin-bottom:50px}

#container2 .about-main {padding:130px 0}
#container2 .about-main h3 {font-size:21px; margin-bottom:70px}
#container2 .about-main .company-info {padding:0 30px}
#container2 .about-section2 .team-info > li {margin-bottom:50px}

/* BUSINESS - »ç¾÷¼Ò°³ */
#container .business-intro .business-info > li {margin-bottom:60px}
#container .business-intro .business-info > li:nth-child(3), #container .business-intro .business-info > li:nth-child(4) {margin-bottom:0}
#container .business-intro .business-info > li:before {display:none}
#container .business-intro .business-info > li .iconBox img {max-width:130px}
#container .business-intro .business-info > li h3 {margin:30px 0 20px}
#container .business-detail .detail-items > li .bg:before {opacity:0.5}
#container .business-detail .detail-items > li .info-box {top:20%}
#container .business-detail .detail-items > li .info-box h3 {font-size:18px}
#container .business-detail .detail-items > li .info-box p {width:100%; padding:0; opacity:1}
#container .business-detail .detail-items > li .info-box a {opacity:1}
/* BUSINESS - »ç¾÷¼Ò°³ È«º¸¿µ»ó ¸ð´Þ */
#container .business-detail #promo-wrapper > .modal {width:80%; max-width:inherit; height:280px; margin:-140px 0 0 -40%; box-shadow:0 0 40px 10px rgba(0,0,0,0.2)}
#container .business-detail #promo-wrapper > .modal iframe {height:280px}
#container .business-detail #promo-wrapper > .modal .btn-close {right:-50px; width:35px; height:35px}
#container .business-detail #promo-wrapper > .modal .btn-close span {top:12px; width:30px; margin-left:-15px}
/* BUSINESS - »ç¾÷ºÐ¾ß */
#container .business-part4 .plan-list > li {margin-bottom:40px; vertical-align:top}
#container .business-part4 .plan-list > li .title {padding:30px}
#container .business-part4 .plan-list > li .title > h3 {font-size:20px}
#container .business-part4 .plan-list > li .title > span {font-size:15px}
#container .business-part4 .plan-list > li .title > .price {font-size:20px}
#container .business-part4 .plan-list > li .title > .price span {font-size:16px}
/*------------------ °Ô½ÃÆÇ ½ºÅ¸ÀÏ ------------------ */
/* °¶·¯¸®Çü ½ºÅ¸ÀÏ */
div[class^=photo-grid-] .photo-grid-inner > table {width:50% !important}
div[class^=photo-grid-] .photo-grid-inner > table a {display:block}
.container-fluid div[class^=photo-grid-] .photo-container {padding:0 50px}
}
@media screen and (max-width:768px) {
/*------------------ ¸ÞÀÎÆäÀÌÁö ½ºÅ¸ÀÏ ------------------ */
/* Å°ºñÁÖ¾ó */
#keyVisual {height:450px}
#keyVisual .slides > li .text {padding:0 15px; margin-top:-115px}
#keyVisual .slides > li .text span {font-size:14px}
#keyVisual .slides > li .text h2 {font-size:40px; margin:10px 0 20px}
#keyVisual .slides > li .text p {font-size:15px}
#keyVisual .slides > li .text .btn-arrow {font-size:13px; width:190px}
#keyVisual .bx-controls-direction a {width:40px; height:60px; font-size:16px; line-height:60px; margin-top:-30px}
#keyVisual .bx-pager {bottom:30px}


/* Å°ºñÁÖ¾ó¼­ºê */
#keyVisuals {height:450px}
#keyVisuals .slides > li .text {padding:0 15px; margin-top:-115px}
#keyVisuals .slides > li .text span {font-size:14px}
#keyVisuals .slides > li .text h2 {font-size:40px; margin:10px 0 20px}
#keyVisuals .slides > li .text p {font-size:15px}
#keyVisuals .slides > li .text .btn-arrow {font-size:13px; width:190px}
#keyVisuals .bx-controls-direction a {width:40px; height:60px; font-size:16px; line-height:60px; margin-top:-30px}
#keyVisuals .bx-pager {bottom:30px}






/* ¼½¼Ç °øÅë */
#mainContainer .main-section {padding:50px 0}
#mainContainer .main-section .main-title {margin-bottom:15px}
#mainContainer .main-section .main-title h2 {font-size:24px}
#mainContainer .main-section .main-title h2:before {margin:0 auto 10px; height:30px}
#mainContainer .main-section .main-title p {font-size:15px; color:#333}
#mainContainer .main-section > .container {padding:0 15px}
/* ¸ÞÀÎ ¼½¼Ç - OUR BUSINESS */
#mainContainer #section1 .business-grid > li .title {font-size:22px; margin:25px 0 15px}
#mainContainer #section1 .business-grid > li .title br {display:none}
#mainContainer #section1 .business-grid > li p {font-size:14px; font-weight:normal; line-height:1.75}
/* ¸ÞÀÎ ¼½¼Ç - Æз²·¢½º À̹ÌÁö */
#mainContainer #section2 {padding:160px 0}
#mainContainer #section2 .text h2 {font-size:36px}
/* ¸ÞÀÎ ¼½¼Ç - PRODUCT */
#mainContainer #section4 .photo-grid > table {margin-bottom:50px}
#mainContainer #section4 .photo-grid > table tr:last-child td {padding:20px; height:170px}
#mainContainer #section4 .photo-grid > table .board_output_gallery_subject a {font-size:15px}
#mainContainer #section4 .photo-grid > table .board_output_gallery_description {font-size:13px; max-height:59px}
#mainContainer #section4 .photo-grid > table .board_output_gallery_description:before {bottom:20px; left:20px}
#mainContainer #section4 .photo-grid > table .board_output_gallery_description:after {bottom:19px; left:90px}
#mainContainer #section4 .photo-grid > table:hover .board_output_gallery_description:after {left:95px}
/*------------------ ¼­ºêÆäÀÌÁö ½ºÅ¸ÀÏ ------------------ */
/* ¼­ºêºñÁÖ¾ó */
#subVisual {height:260px}
#subVisual > .visual_img {top:-10px; width:1100px; margin-left:-550px}
#subVisual > .title h2 {font-size:28px}
/* ÆäÀÌÁö ³»ºñ°ÔÀÌ¼Ç */
#breadcrumbs > .container > .home {display:none}
#breadcrumbs > .container > div {width:50%}
#breadcrumbs > .container > div > a {height:40px; padding:0 15px; font-size:14px; line-height:40px}
#breadcrumbs > .container > div:last-child > a {border-right:none}
#breadcrumbs > .container > div > a:after {right:10px; font-size:13px}
#breadcrumbs > .container > div > ul {top:40px; padding:15px 20px}
#breadcrumbs > .container > div > ul li a {font-size:14px}
/* ¼½¼Ç °øÅë */
#container .container-inner {padding:0 0px}
#container .container-inners {padding:0 0px}
#container section.sub-section {position:relative; padding:30px 0}
#container .main-title {padding:35px 0}
#container .main-title h2 {font-size:22px}
#container .main-title p {font-size:14px; width:80%; margin:25px auto auto}
#container .main-title p br {display:none}
/* COMPANY - ȸ»ç¼Ò°³ */
#container .about-main {padding:60px 15px}
#container .about-main h3 {font-size:16px; margin:auto auto 35px; width:80%; word-break:keep-all}
#container .about-main .company-info {}
#container .about-main .company-info > li {display:block; padding:35px 15px; border-bottom:1px solid rgba(255, 255, 255, 0.55); border-right:none}
#container .about-main .company-info > li:first-child {border-left:none}
#container .about-main .company-info > li:last-child {border-bottom:none}
#container .about-main .company-info > li i {display:inline-block; font-size:36px; height:50px}
#container .about-main .company-info > li h4 {font-size:15px; margin:5px 0 10px}
#container .about-main .company-info > li p {font-size:13px; word-break:keep-all}
#container .about-section1 .about-desc {font-size:15px; margin-bottom:35px}
#container .about-section1 .about-info {margin-bottom:30px}
#container .about-section1 .about-info dt, #container .about-section1 .about-info dd {font-size:13px; line-height:1}
#container .about-section1 .about-info dt {float:none; width:100%; font-size:14px; border-top:1px solid #333; border-bottom:1px solid #aaa}
#container .about-section1 .about-info dd {margin:0 0 40px 0px; border-top:none; border-bottom:1px solid #e2e2e2}
#container .about-section2 .team-info > li:before {margin-bottom:25px}
#container .about-section2 .team-info > li .detail h3 {font-size:15px; margin:25px 0 5px}
#container .about-section2 .team-info > li .detail .subtit {font-size:12px; margin-bottom:15px}
#container .about-section2 .team-info > li .detail .sns-link {margin-top:20px}
#container .about-section2 .team-info > li .detail .sns-link > li {font-size:16px}
#container .about-section2 .team-info > li .detail .sns-link > li a {font-size:16px}
/* COMPANY - ¿¬Çõ */
#container .history-section .year-wrap:before {display:none}
#container .history-section .year-wrap:last-child {padding-bottom:150px}
#container .history-section .year-wrap > ul > li {margin-top:25px; padding-left:0 !important; padding-right:0 !important; text-align:center !important}
#container .history-section .year-wrap > ul > li:before {position:relative; left:2px; display:block; width:10px; height:10px; margin:0 auto 20px; border-width:1px}
#container .history-section .year-wrap > ul > li h3 {font-size:18px; margin-bottom:15px}
#container .history-section .year-wrap > ul > li dl dt, #container .history-section .year-wrap > ul > li dl dd {font-size:13px}
#container .history-section .finish-box {width:100px; height:100px; margin-left:-50px; border-width:4px}
#container .history-section .finish-box p {font-size:13px}
#container .history-section .finish-box:after {position:absolute; bottom:96px; left:50%; content:''; width:1px; height:35px; background:#eee}
/* COMPANY - ¿À½Ã´Â±æ */
#container .location-section #map {height:350px}
#container .location-section h3 {font-size:16px}
#container .location-section h4 {font-size:14px; margin-bottom:40px}
#container .location-section .method-wrapper .method-line {padding:20px 0}
#container .location-section .method-wrapper .method-line p.title {font-size:16px}
#container .location-section .method-wrapper .method-line dl dt, #container .location-section .method-wrapper .method-line dl dd {font-size:13px; padding:0}
#container .location-section .method-wrapper .method-line dl dt {float:none; margin-bottom:5px; font-weight:600}
#container .location-section .method-wrapper .method-line dl dd {margin-bottom:10px; line-height:1.65}
#container .location-section .method-wrapper .method-line dl dt.subway {position:static; margin-right:20px; padding:4px 10px}
#container .location-section .method-wrapper .method-line span.subway {padding:0 4px; line-height:1.3}
#container .location-section .method-wrapper .method-line .box {float:none; clear:both; width:100%; padding-top:20px}
#container .location-section .method-wrapper .method-line .box.last {width:100%; padding:0 !important}
#container .location-section .method-wrapper .method-line .box:first-child {padding-top:0 !important; padding-bottom:10px}
#container .location-section .method-wrapper .method-line .box:nth-child(2) {border-top:1px dotted #bbb}
/* BUSINESS - »ç¾÷¼Ò°³ */
#container .business-intro .business-info > li {margin-bottom:45px}
#container .business-intro .business-info > li:nth-child(3) {margin-bottom:45px !important}
#container .business-intro .business-info > li h3 {font-size:16px; margin:25px 0 10px}
#container .business-intro .business-info > li p {font-size:13px}
#container .business-detail .detail-items > li {display:block; width:100%; margin-bottom:15px}
#container .business-detail .detail-items > li:last-child {margin-bottom:0}
#container .business-detail .detail-items > li .bg {left:0; margin-left:0}
#container .business-detail .detail-items > li .bg img {width:100%}
#container .business-detail .detail-items > li .info-box {padding:0 20px}
#container .business-detail .detail-items > li .info-box span {font-size:12px}
#container .business-detail .detail-items > li .info-box h3 {font-size:16px}
/* BUSINESS - »ç¾÷¼Ò°³ È«º¸¿µ»ó ¸ð´Þ */
#container .business-detail #promo-wrapper > .modal .btn-close {right:-35px}
/* BUSINESS - »ç¾÷ºÐ¾ß */
#container .business-part1 .part-items > li {margin-bottom:40px !important}
#container .business-part1 .part-items > li:last-child {margin-bottom:0 !important}
#container .business-part1 .part-items > li h3 {margin:20px 0 10px; font-size:16px}
#container .business-part1 .part-items > li p {font-size:13px}
#container .business-part2 .choose-info .text-info {margin-top:30px; margin-bottom:30px;}
#container .business-part2 .choose-info .text-info h3 {font-size:18px}
#container .business-part2 .choose-info .text-info h3:after {width:25px; margin:15px 0 20px}
#container .business-part2 .choose-info .text-info p {font-size:13px; margin-bottom:20px}
#container .business-part3 #client-slide > .info {float:none; width:100% !important; margin-bottom:35px}
#container .business-part3 #client-slide > .info h3 {font-size:16px}
#container .business-part3 #client-slide > .info p {font-size:13px}
#container .business-part3 #client-slide > .info .controller {padding-top:25px}
#container .business-part3 #client-slide > .info .controller > li {font-size:13px}
#container .business-part3 #client-slide > .info .controller > li a {width:28px; height:28px; font-size:12px; line-height:26px}
#container .business-part3 #client-slide > .info .controller > li a:hover {color:#fff; border-color:#2b2b2b; background:#2b2b2b}
#container .business-part3 #client-slide > .slides {float:none; width:100% !important; padding-top:0}
#container .business-part4 .plan-list > li {margin-bottom:25px}
#container .business-part4 .plan-list > li:last-child {margin-bottom:40px}
#container .business-part4 .plan-list > li .info > ul > li {font-size:13px}
/*------------------ ¹öÆ° ½ºÅ¸ÀÏ ------------------ */
.btn-arrow {font-size:14px}
.btn {font-size:13px}
/*------------------ °Ô½ÃÆÇ ½ºÅ¸ÀÏ ------------------ */
/* ¸®½ºÆ®Çü ½ºÅ¸ÀÏ */
.tbl-brd-list tr td, .tbl-brd-list font, .tbl-brd-list span {font-size:13px !important}
.tbl-brd-read tr td, .tbl-brd-read tr td font, .tbl-brd-read tr td span {font-size:13px !important}
/* FAQ ½ºÅ¸ÀÏ */
.tbl-brd-faq .board_bgcolor {width:60px !important}
.tbl-brd-faq .reply-row td {padding:15px !important}
.tbl-brd-faq .reply-row td .reply-block {float:left; display:block; width:30px; height:30px; font-size:14px; font-weight:600; color:#fff; text-align:center; line-height:30px; border-radius:2px; background:#ffa600}
.tbl-brd-faq .reply-row td .reply-container {margin-left:60px}
/* ƯÁ¤ ¿­ ¼û±èó¸® */
.att_title[rel="¼±ÅÃ"] {display:none}
.att_title[rel="¹øÈ£"] {display:none}
.att_title[rel="ÀÛ¼ºÀÚ"] {display:none}
.bbschk {display:none}
.bbsno {display:none}
.bbswriter {display:none}
/* °¶·¯¸®Çü ½ºÅ¸ÀÏ */
div[class^=photo-grid-] .photo-grid-inner {margin:0 }
div[class^=photo-grid-] .photo-grid-inner > table {width:50% !important; margin:0; padding:0 }
div[class^=photo-grid-] .photo-grid-inner > table .overlay {left:0; right:0}
div[class^=photo-grid-] .photo-grid-inner > table .post-info {left:15px; bottom:5px}
div[class^=photo-grid-] .photo-grid-inner > table:hover .post-info {bottom:15px}
div[class^=photo-grid-] .photo-grid-inner > table .post-info h3 {font-size:15px}
div[class^=photo-grid-] .photo-grid-inner > table .post-info h3:after {width:20px; margin:10px 0}
div[class^=photo-grid-] .photo-grid-inner > table .post-info span {font-size:11px}
.container-fluid div[class^=photo-grid-] .photo-container {padding:0 15px}
/* ÃÖ±Ù °Ô½Ã¹° - ¸®½ºÆ®Çü */
.tbl-brd-latest tr td {font-size:12px; padding:20px}
.tbl-brd-latest tr td a {font-size:15px}
/* °Ô½ÃÆÇ °øÅë */
/* Ä«Å×°í¸® */
.board-category ul > li {font-size:13px}
.board-category ul > li a {display:block; padding:5px 10px}
}
/* ÀúÇØ»óµµ ¸ð¹ÙÀÏ */
@media screen and (max-width:480px) {
/*------------------ ¼­ºêÆäÀÌÁö ½ºÅ¸ÀÏ ------------------ */
/* ¼­ºêºñÁÖ¾ó */
#subVisual {height:200px}
#subVisual > .visual_img {top:-10px; width:960px; margin-left:-480px}
#subVisual > .title h2 {font-size:28px}
}





.node1
{
float: left;
width:50%;
min-width: 380px;
background-color: #fff;
display: inline-block;
text-align:center;
}


.node2
{
float: left;
width:50%;
min-width: 380px;

background-color: #ffffff;
display: inline-block;
}


.node3 /*----¿©±âºÎÅÍ ÅؽºÆ®------*/
{
background-color: #ffffff;
font-size: 1.2em;
font-color: #555555;
line-height: 2;
margin-top:3%;
letter-spacing:-0.5px;
width:100%;
text-align:left;


}


.node4
{
line-height: 1.4;
font-size: 2.1em;
color: #444444;
letter-spacing:-0.5px;
width:100%;
text-align:left;
}


.node3 h2
{

font-size: 1em;
font-weight: 600;
font-color:#cccccc;




}

.node4 h2
{

font-size: 1.2em;
font-color:#cccccc;
line-height: 1.4;
font-weight:600;
}




.node5 /*----¿©±âºÎÅÍ ¹öÆ° ¹é±×¶ó¿îµå------*/
{
float: left;
width:50%;
min-width: 350px;
display: inline-block;



}





.node6 /*----¿©±âºÎÅÍ ¹öÆ°------*/
{
float: left;
width:100%;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #999999;
margin-top:4%;
margin-bottom:5%;
text-align:left;


}


.node6 h2 /*----¿©±âºÎÅÍ ¹öÆ°------*/
{
font-size: 1.5em;
font-color:#999999;
margin-top:5px;
}

.node7
{
float: left;
width: 50%;
max-width: 300px;
background-color: #fff;
display: inline-block;
padding:8px 5px ;
text-align:center;

}





.node8
{
float: left;
width: 50%;
max-width: 300px;
background-color: #fff;
display: inline-block;
padding:8px 5px ;
text-align:center;


}

.node9
{
float: left;
width: 50%;
min-width: 300px;
background-color: #fff;
display: inline-block;
padding:8px 3% ;
text-align:center;

}

.node10
{
float: left;
width: 50%;
min-width: 280px;
background-color: #fff;
display: inline-block;
padding:8px 3% ;
text-align:center;

}

.node11
{
float: left;
width:100%;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #dddddd;
margin-top:2%;

}

.btn-download {display:inline-block; width:200px; background:url(../../img/down icon.png) font-weight: bold; font-size:1.1em; letter-spacing: -0.5px; color:#fff; line-height:1; padding:15px 5px; border-radius:15px; background:#858585; transition:all 0.4s text-align: center; }
.btn-download:hover {background:#cd1333; box-shadow:0 2px 8px 2px rgba(0,0,0,0.1)}

.btn-down {display:inline-block; width:250px; background:url(../../img/down icon.png) font-weight: bold; font-size:1.2em; letter-spacing: -0.5px; color:#fff; line-height:1; padding:20px 10px; border-radius:10px; background:#858585; transition:all 0.4s text-align: center; }
.btn-down:hover {background:#444444; box-shadow:0 2px 8px 2px rgba(0,0,0,0.1)}

.btn-downn {display:inline-block; width:250px; background:url(../../img/down icon.png) font-weight: bold; font-size:1.2em; letter-spacing: -0.5px; color:#fff; line-height:1; padding:20px 10px; border-radius:10px; background:#cd1333; transition:all 0.4s text-align: center; }
.btn-downn:hover {background:#910d24; box-shadow:0 2px 8px 2px rgba(0,0,0,0.1)}

.btn-downs {display:inline-block; width:100px; background:url(../../img/down icon.png); text-align:center; font-weight: bold; font-size:0.8em; letter-spacing: -0.5px; color:#fff; line-height:0.5; padding:10px 10px; border-radius:5px; background:#858585; transition:all 0.4s text-align: center; }
.btn-downs:hover {background:#cd1333; }

.btn-price { display:inline-block; width:100%; background:url(../../img/down icon.png) font-weight: bold; font-size:1.2em; letter-spacing: -0.5px; color:#fff; line-height:1; padding:20px 10px; border-radius:10px; background:#cd1333; transition:all 0.4s text-align: center; }
.btn-price:hover { background:#910d24; box-shadow:0 2px 8px 2px rgba(0,0,0,0.1)}


.btn-estimate {display:inline-block; width:100%; background:url(../../img/down icon.png) font-weight: bold; font-size:1.2em; letter-spacing: -0.5px; color:#fff; line-height:1; padding:20px 10px; border-radius:10px; background:#858585; transition:all 0.4s text-align: center; }
.btn-estimate:hover {background:#444444; box-shadow:0 2px 8px 2px rgba(0,0,0,0.1)}


.node12
{
float: left;
width:100%;
min-width: 350px;
display: inline-block;
text-align:center;
margin-top:0;
margin-bottom:20px;
}


.node13
{
width:100%;
text-align:center;
font-size: 1.2em;
font-color: #555555;
line-height: 1.7;
background: #fff;
margin:0 auto;
margin-top:100%;

}
.node14
{

width:100%;
margin-top:4%;
display: table;
text-align:center;
font-size: 1.1em;
margin:0 auto;



}

.node20
{

width:100%;

display: inline-block;
text-align:left;
font-size: 1.2em;
font-color: #555555;
line-height: 1.7;
background: #fff;




}




.node14 h3{font-size:1.6em; margin-bottom:0.75em;color:#323232;letter-spacing:-0.03em; text-align:left; line-height:1;}


.node15 /*----¶óÀÎ------*/
{
float: left;
width:100%;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #999999;
margin-top:5%;
margin-bottom:1%;

}
.node16{
width:100%;
text-align:center;
background-size: 100%;
background-size:cover!important;

}




.tabs {
display: flex;
flex-wrap: wrap;
width:100%;


}
.tabs label {
width:25%;
order: 1;
display: block;
padding:15px 0px;
text-align:center;
cursor: pointer;
font-weight: bold;
transition: background ease 0.2s;
border: 1px solid #e7e7e7;
}
/*¹Ú½º¹è°æ*/
.tabs .tab {
order: 99;
flex-grow: 1;
width: 100%;
display: none;
padding: 1rem;
background: #ffffff;
text-align:left;
border: 1px solid #e7e7e7;
margin-bottom:50px;

}




.tabs .tab h1{
font-size:1.5em; font-weight:600; color:#333; text-align:left; margin-top:2%; }

.tabs .tab span{
font-size:1em; font-weight:400; color:#555; text-align:left; line-height:24px; }

.tabs .tab h3{
font-size:1.2em; font-weight:600; color:#333; text-align:left; margin-top:1%; margin-bottom:15px; }

.tabs input[type="radio"] {
display: none;
}
/*ÅÇ ´­·¶À»¶§ Ä÷¯*/
.tabs input[type="radio"]:checked + label {
background: #fff;
border-bottom: 3px solid #cd1333;

}
.tabs input[type="radio"]:checked + label + .tab {
display: block;
}


.node150
{

width:100%;
margin-top:4%;

display: table;
text-align:center;
font-size: 1.1em;

height: 200px;




}










#node51
{
background-color: #333333;
width:100%;
height: 609px;
}
#node52
{
background-color: #ffffff;
margin-top:60px;
width:980px;
height: 339px;
display: inline-block;
text-align:center;
float:center;


}
#node53
{
float: left;
width: 148px;
background-color: #BAE568;
}
#node54
{
float: left;
width: 174px;
background-color: #BAE568;
}
#node55
{
float: left;
width: 162px;
background-color: #BAE568;
}
#node56
{
background-color: #BAE568;
}
#node57
{
background-color: #BAE568;
}
#node58
{
background-color: #BAE568;
}
#node59
{
background-color: #BAE568;
}
#node60
{
background-color: #BAE568;
}
#node61
{
background-color: #BAE568;
}
#node62
{
background-color: #BAE568;
}
#node63
{
background-color: #BAE568;
}
#node64
{
float: left;
width: 212px;
background-color: #BAE568;
}
#node65
{
background-color: #BAE568;
}
#node66
{
float: left;
width: 84px;
background-color: #BAE568;
}
#node67
{
float: left;
width: 82px;
background-color: #BAE568;
}
#node68
{
float: left;
width: 20px;
background-color: #BAE568;
}
#node69
{
float: left;
width: 198px;
background-color: #BAE568;
}
#node70
{
background-color: #BAE568;
}
#node71
{
float: left;
width: 79px;
background-color: #BAE568;
}
#node72
{
float: left;
width: 84px;
background-color: #BAE568;
}


.node73
{
float: left;
width: 27%;
padding:22px 0 22px 5px;
}

.node74
{
float: left;
width: 73%;
text-align:left;
padding:3% 0 3% 0;
}

.node75
{
float: left;
max-width: 25%;
min-width: 315px;
text-align:left;
padding:10px 20px 0px 20px;
display: inline-block;


}


.node75 h3
{
font-size: 1.8em;
font-weight: 500;
color: #2b2b2b;
margin-bottom:5px;
}

.node75 p
{
font-size: 1em;
font-weight: 500;
color: #666;
margin-bottom:5px;
}


.node76
{
float: left;
max-width: 70%;
min-width: 400px;
text-align:left;
display: inline-block;
margin-bottom:10px;
padding:10px 20px 0px 20px;
}


.node76 h3
{
font-size: 1.1em;
font-weight: 500;
color: #444;
margin-bottom:20px;
}

.node76 p
{
font-size: 1.3em;
font-weight: 500;
color: #333;
margin-top:15px;
margin-bottom:20px;
}




/* .ec-base-tab .menu li a ¿¡ word-break:break-all; °¡ Ãß°¡µÆ½À´Ï´Ù. */
/* °øÅë css */
.ec-base-tab { position:relative; min-width:500px; }
.ec-base-tab .menu {
margin:0 0 20px; border:1px solid #cbcdce; border-bottom-color:#202020; border-left:0; background:#f2f2f2;
box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;
}
.ec-base-tab .menu:after { content:""; display:block; clear:both; }
.ec-base-tab .menu li { float:left; border-left:1px solid #cbcdce; background:#f2f2f2; }
.ec-base-tab .menu li a { display:block; min-width:187px; margin:0 0 0 -1px; padding:12px 5px 11px; border-right:1px solid #cbcdce; color:#707070; text-decoration:none; outline:0; text-align:center; word-break:break-all; background:#f2f2f2; }
.ec-base-tab .menu li:first-child a { margin-left:0; }
.ec-base-tab .menu li.selected a { position:relative; top:-1px; left:-1px; margin:0 0 -1px; border:1px solid #202020; border-bottom:0; color:#fff; font-weight:bold; background:#4a5164; }
.ec-base-tab .right { position:absolute; top:8px; right:10px; line-height:24px; color:#909090; }
/* ¹àÀºÇü ŸÀÔ */
.ec-base-tab.typeLight .menu li.selected a { margin:0 0 -2px; border-bottom:1px solid #fff; color:#404040; background:#fff; }
/* ³ÐÀÌ °¡º¯Çü grid(2~7) : ¸Þ´º°¹¼ö¸¸Å­ grid µÚÀÇ ¼ýÀÚ¸¦ ¹Ù²ãÁÖ¼¼¿ä */
.ec-base-tab[class*="grid"] { min-width:auto; }
.ec-base-tab[class*="grid"] .menu { display:table; table-layout:fixed; width:100%; }
.ec-base-tab[class*="grid"] .menu li { float:none; display:table-cell; vertical-align:middle; }
.ec-base-tab[class*="grid"] .menu li a { display:inline-block; width:100%; min-width:0; margin:0; padding:11px 0; border:0; }
.ec-base-tab[class*="grid"] .menu li.selected { position:relative; top:0; right:-1px; border:1px solid #292929; border-bottom:0; background:#4a5164; }
.ec-base-tab[class*="grid"] .menu li:first-child.selected { right:0; }
.ec-base-tab[class*="grid"] .menu li.selected a { position:static; background:none; }
.ec-base-tab.grid2 .menu li { width:50.5%; }
.ec-base-tab.grid3 .menu li { width:34%; }
.ec-base-tab.grid4 .menu li { width:25.5%; }
.ec-base-tab.grid5 .menu li { width:20.5%; }
.ec-base-tab.grid6 .menu li { width:17%; }
.ec-base-tab.grid7 .menu li { width:14.8%; width:15% \0/; }
.ec-base-tab.grid7 .menu li:first-child { width:13% \0/; }





ul,li{list-style:none} .tab{overflow:hidden} .tab li{float:left;width:63px;border:1px solid #fff; cursor:pointer;} .tab li a{display:block;width:100%;height:50px;line-height:50px;text-align:center} .con_wrap{position:relative;height:200px;border:1px solid red} .con_wrap div{position:absolute;left:0;top:0;} .con_wrap div:nth-child(2){display:none} .con_wrap div:nth-child(3){display:none} .con_wrap div:nth-child(4){display:none}


.videoWrap { position: relative; width: 100%; padding-bottom: 56.25%; } .videoWrap iframe, .videoWrap object, .videoWrap embed { position: absolute; width: 100%; height: 100%; }







.containerb{
height:100%;
width:100%;
padding:0;
margin:0px;
border-radius:5px;
float:center;


}

.hide {
display: none;
}
.tab-content {
padding:25px 0px;
text-align:center;
}
#material-tabs {
position: relative;
display: block;
padding:0;
border-bottom: 1px solid #e0e0e0;
}
#material-tabs>a {
position: relative;
display:inline-block;
text-decoration: none;
padding: 20px 80px;
text-transform: uppercase;
font-size: 14px;
font-weight: 600;
color: #424f5a;
text-align: center;
outline:;
}
#material-tabs>a.active {
font-weight: 700;
outline:none;
font-color:#cd1333;
}
#material-tabs>a:not(.active):hover {
background-color: inherit;
color: #cd1333;
}
@media only screen and (max-width: 520px) {
.nav-tabs#material-tabs>li>a {
font-size: 11px;
}
}
.yellow-bar {
position: absolute;
z-index: 10;
bottom: 0;
height: 3px;
background: #ffffff;
display: block;
left: 0;
transition: left .2s ease;
-webkit-transition: left .2s ease;
}
#tab1-tab.active ~ span.yellow-bar {
left: 0;
width: 200px;
}
#tab2-tab.active ~ span.yellow-bar {
left:19%;
width: 200px;
}
#tab3-tab.active ~ span.yellow-bar {
left: 39%;
width: 180px;
}
#tab4-tab.active ~ span.yellow-bar {
left:56%;
width: 163px;
}



.node101
{
float: left;
width: 100%;
background-color: #ffffff;
max-width: 580px;
padding-left:15px;
padding-right:15px;
padding-top:10px;
margin-bottom:20px;
}
.node102
{
float: left;
width: 100%;
padding-left:20px;
padding-right:20px;
padding-top:5px;
background-color: #ffffff;
line-height:1.8em;
text-align:left;
max-width: 580px;


}

.node102 h3{font-size:1.5em; margin-bottom:0.8em;color:#333333;letter-spacing:-0.03em; text-align:left; line-height:0.5; margin-top:0.4em; }
.node102 span{font-size:1.1em; color:#555;letter-spacing:-0.03em; text-align:left; line-height:1; padding-top:30px; }





.cssSlider {
display: block;
position: relative;
width: 100%;
margin: auto;
overflow: hidden;
}
.cssSlider .slides {
overflow: hidden;
width: 100%;
height: 350px;
margin-bottom: 5px;
padding: 0;
list-style: none;
}
.cssSlider .slides > li {
width: 100%;
height: 350px;
position: absolute;
z-index: 1;
overflow: hidden;
padding:3px;

}
.cssSlider .slides > li > img {
width: 100%;
height: auto;
}
/*
.cssSlider .slides > li:first-child:not(:target) {
z-index: 1;
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
*/
.cssSlider .thumbnails {
display: block;
position: relative;
padding: 0;
margin: 0;
list-style: none;
}
.cssSlider .thumbnails > li {
float: left;
width: 20%;
padding:3px;
}
.cssSlider .thumbnails > li > a {
display: block;
}
.cssSlider .thumbnails > li > a > img {
width: 100%;
height: auto;
}
.cssSlider .slides li:target {
z-index: 3;
-webkit-animation: slide 1s 1;
}
.cssSlider .slides li:not(:target) {
-webkit-animation: hidden 1s 1;
}
@-webkit-keyframes slide {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
100% {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
}
@keyframes slide {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
100% {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
}
@-webkit-keyframes hidden {
0% {
z-index: 2;
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
100% {
z-index: 2;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
@keyframes hidden {
0% {
z-index: 2;
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
100% {
z-index: 2;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}