@charset 'utf-8';
/********************************************************
2020-10-28
created by coDribble belong to GGOLCREATIVE.

01. 공통
02. 헤더
03. 푸터
04. 메인
05. 서브
	- 공통
06. 미디어쿼리


01. 공통
********************************************************/
/* clearfix */
.clearfix:after { content:''; display:block; clear:both; }
.flex { display:flex; }

.en { font-family:'Poppins', sans-serif; letter-spacing:0; }
.txt { font-size:20px; }
.md-title { font-size:24px; }
.lg-title { font-size:30px; }
.section-title { font-size:36px; }
.page-title { font-size:40px; }
.accent { color:#b91315; }
.symbol { display:inline-block; position:relative; }
.symbol .icon-symbol { font-size:55px; }
.symbol strong { position:absolute; top:24px; right:5px; font-size:16px; color:#fff; }
.title-wrap { margin-bottom:50px; text-align:center; }
.title-wrap .section-title { margin-top:10px; font-weight:400; color:#1b1b1b; }

/* container */
#wrapper.no-visual { padding-top:90px; }
#container { padding:120px 0; }
.contents { position:relative; width:100%; max-width:1300px; margin:0 auto; }

/* checkbox */

/* selectbox */


/* button */
.view-more { padding:17px 20px; background:none; border-bottom:1px solid #1b1b1b; font-weight:700; }
.view-more .plus { display:inline-block; position:relative; width:15px; height:15px; margin-left:15px; background-image:url('../images/common/plus.png'); background-position:center center; background-repeat:no-repeat; background-size:cover; background-color:#1b1b1b; border-radius:50%; vertical-align:middle; }
.view-more.white { border-color:#fff; color:#fff; }
.view-more.white .plus { background-image:url('../images/common/plus_white.png'); background-color:#fff; }

.sns { margin-top:40px; text-align:center; }
.sns li { display:inline-block; margin-left:30px; vertical-align:middle; }
.sns li:first-child { margin-left:0; }
.sns li a { display:block; transition:color .3s ease; }
.sns li a:hover { color:#b91315; }



/****************************************
02. 헤더
****************************************/
#header { position:fixed; top:0; left:0; width:100%; padding:22px 0; border-bottom:1px solid rgba(255,255,255,.2); z-index:10; }

#logo { width:176px; height:48px; }
#logo a { display:block; width:100%; height:100%; background-image:url('../images/common/logo_white.png'); /*background-image:url('../images/common/logo_white.svg');*/ background-position:center center; background-repeat:no-repeat; background-size:auto 100%; }

#gnb { position:absolute; top:50%; right:0; transform:translateY(-50%); }
#gnb .gnb li { float:left; margin-left:70px; }
#gnb .gnb li:first-child { margin:0; }
#gnb .gnb li a { display:block; font-size:20px; color:#fff; }

#header.scroll { background:#fff; border-color:rgba(47,47,47,.2); }
#header.scroll #gnb .gnb li a { color:#1b1b1b; }
#header.scroll #logo a { background-image:url('../images/common/logo.png'); /*background-image:url('../images/common/logo.svg');*/ }

#gnb .gnb li a.active, #header.scroll #gnb .gnb li a.active { color:#b91315; }
#gnb .sns { display:none; }

#hamburger { display:none; position:absolute; top:50%; right:10px; width:40px; height:40px; background:0; border:0; transform:translateY(-50%); }
#hamburger .bar { display:block; position:absolute; top:50%; left:10px; width:calc(100% - 20px); height:2px; margin-top:-1px; background:#b91315; }
#hamburger .bar.top { top:30%; }
#hamburger .bar.bot { top:70%; }



/****************************************
03. 푸터
****************************************/
#footer {  }
#footer .footer-top { padding:30px 0; border-top:1px solid #ddd; }
#footer .footer-top li { float:left; margin-left:36px; color:#1b1b1b; }
#footer .footer-top li:first-child { margin:0; }
#footer .footer-top li .icon { display:inline-block; margin-right:10px; font-size:22px; vertical-align:middle; }
#footer .footer-top a { position:absolute; top:50%; right:0; padding-right:17px; font-weight:700; font-size:15px; transform:translateY(-50%); }
#footer .footer-top a:after { content:''; display:block; position:absolute; top:50%; right:0; width:7px; height:7px; border-top:1px solid #1b1b1b; border-left:1px solid #1b1b1b; transform-origin:center top; transform:rotate(45deg); }
#footer .footer-bot { padding:40px 0; border-top:1px solid #ddd; }
#footer .footer-logo { /*position:absolute; top:0; left:0;*/ width:176px; height:48px; background-image:url('../images/common/logo.png');/* background-image:url('../images/common/logo.svg');*/ background-position:center center; background-repeat:no-repeat; background-size:auto 100%; margin-bottom:30px; }
#footer .footer-info {  }
#footer .footer-info div { margin-top:12px; text-align:left; }
#footer .footer-info div:first-child { margin-top:0; }
#footer .footer-info p:first-child { margin-left:0; }
#footer .footer-info p { font-weight:600; margin-left:20px; font-size:14px; }
#footer .footer-info span { font-weight:normal; }
#footer .footer-info span:before { content:''; clear:both; display:inline-block; width:2px; height:14px; background-color:#ddd; margin:0 5px; }
#footer .footer-sns { position:absolute; top:0; right:0; font-size:0; text-align:center; }
#footer .footer-info .copy { margin:0; margin-top:20px; font-weight:400; color:#999; text-align:left; }



/****************************************
04. 메인
****************************************/
#mainVisual { position:relative; }
#mainVisual .main-visual .item { position:relative; height:0; padding-bottom:49%; }
#mainVisual .main-visual .item.swiper-slide-active { z-index:1; }
#mainVisual .main-visual .item img { position:absolute; top:0; left:50%; width:auto; height:100%; transform:translateX(-50%); }
#mainVisual .slogan-slide { position:absolute; top:50%; left:0; width:100%; color:#fff; text-align:center; transform:translateY(-50%); z-index:1; }
#mainVisual .slogan-slide .swiper-container { padding-top:70px; }
#mainVisual .slogan-slide .slogan { padding:0 60px; }
#mainVisual .page-title { display:block; font-weight:300; line-height:1.4; }
#mainVisual .page-title.last { font-weight:500; }
#mainVisual .slogan-slide a { color:#fff; }
#mainVisual .btn_confirm { margin-top:50px; text-align:center; }
#mainVisual .dot .swiper-pagination-bullet { position:relative; width:20px; height:20px; margin:0 8px; background:none; border:0; opacity:1; }
#mainVisual .dot { position:absolute; top:0; bottom:auto; }
#mainVisual .dot .swiper-pagination-bullet:before { content:''; display:block; position:absolute; top:50%; left:50%; width:6px; height:6px; margin:-3px 0 0 -3px; background:#fff; border-radius:50%; }
#mainVisual .dot .swiper-pagination-bullet:after { content:''; display:block; position:absolute; top:50%; left:50%; width:0; height:0;background:none; border:1px solid #fff; border-radius:50%; transform:translate(-50%, -50%); transition:width .3s ease, height .3s ease; }
#mainVisual .dot .swiper-pagination-bullet-active:after { width:100%; height:100%; }

#mainCategory { margin-bottom:120px; }
#mainCategory .category-list { margin:0 -10px; }
#mainCategory li { float:left; width:25%; padding:0 10px; }
#mainCategory li a { display:block; position:relative; width:100%; height:0; padding-bottom:161%; color:#999; transition:all .3s ease; }
#mainCategory li div { display:block; position:absolute; top:0; left:0; width:100%; height:100%; padding:30px 20px; background-position:center center; background-repeat:no-repeat; background-size:cover; transition:background-image .3s ease; }
#mainCategory li p { margin-top:10px; font-weight:300; font-size:28px; }
#mainCategory li span { display:none; position:relative; margin-top:20px; font-weight:700; color:#1b1b1b; }
#mainCategory li span:before { content:''; display:block; position:absolute; top:50%; left:calc(100% + 15px); width:7px; height:7px; border-top:1px solid #1b1b1b; border-right:1px solid #1b1b1b; transform-origin:right top; transform:rotate(45deg); }
#mainCategory li span:after { content:''; display:block; position:absolute; top:50%; left:calc(100% + 10px); width:11px; height:1px; margin-top:-.5px; background:#1b1b1b; }
#mainCategory li .category01 { background-image:url('../images/main/category01.jpg'); }
#mainCategory li .category02 { background-image:url('../images/main/category02.jpg'); }
#mainCategory li .category03 { background-image:url('../images/main/category03.jpg'); }
#mainCategory li .category04 { background-image:url('../images/main/category04.jpg'); }
#mainCategory li a:hover { box-shadow:10px 10px 20px 0px rgba(0,0,0, .2); color:#1b1b1b; }
/*#mainCategory li a:hover .category01 { background-image:url('../images/main/category01_on.jpg'); }
#mainCategory li a:hover .category02 { background-image:url('../images/main/category02_on.jpg'); }
#mainCategory li a:hover .category03 { background-image:url('../images/main/category03_on.jpg'); }
#mainCategory li a:hover .category04 { background-image:url('../images/main/category04_on.jpg'); }*/
#mainCategory li a:hover span { display:inline-block; }



/****************************************
05. 서브
****************************************/
/* 공통 */
.tab li { float:left; }
.tab .col-2 li { width:50%; }

#subVisual { position:relative; }
#subVisual .sub-visual { position:relative; height:660px; background-position:center top; background-repeat:no-repeat; background-size:auto 780px; }
#subVisual .sub-visual.about { background-image:url('../images/about/visual.jpg'); }
#subVisual .sub-visual.contact { background-image:url('../images/contact/visual.jpg'); }
#subVisual .page-intro { position:absolute; top:35%; left:50%; width:100%; color:#fff; text-align:center; transform:translateX(-50%); }
#subVisual .page-intro .page-title { margin-top:30px; font-weight:300; }
#subVisual .page-intro .txt { margin-top:30px; line-height:1.6; }
#subVisual .symbol strong { color:#aaa; }

#subVisual .tab { position:absolute; bottom:0; left:0; width:100%; }
#subVisual .tab li a { display:block; width:100%; padding:20px 40px; background:rgba(255,255,255,.5); }
#subVisual .tab li a span { display:block; font-weight:700; }
#subVisual .tab .active { background:#fff; }

.sub-cont { position:relative; }
.sub-cont .title-wrap .en { font-weight:700; }
.sub-cont .title-wrap .md-title { font-weight:500; color:#1b1b1b; }
.sub-cont .title-wrap strong { display:block; margin:30px 0 40px; padding:0 100px; font-weight:500; color:#1b1b1b; line-height:1.4; word-break:keep-all; }
.sub-cont .visual { margin-bottom:50px; }
.sub-cont .paragraph { margin-top:10px; }
.sub-cont .txt { text-align:center; line-height:1.7; padding:0 150px; }
.sub-cont .txt p { word-break:keep-all; }
.sub-cont .sign { font-weight:500; color:#1b1b1b; }

/* 업무 프로세스 */
#process .process { display:-webkit-box; display:-ms-flex; display:flex; flex-wrap:wrap; margin:0 -30px; }
#process .process li { float:left; width:33.33%; padding:0 30px; margin-top:2.84%; text-align:center; line-height:1.4; word-break:keep-all; }
#process .process li > div { display:-webkit-box; display:-ms-flex; display:flex; flex-direction:column; justify-content:space-between; position:relative; width:100%; height:100%; padding:60px 40px; background:#f6f6f6; }
#process .process li > div:before { content:''; display:block; position:absolute; bottom:100%; left:0; width:100%; height:0; padding-bottom:9.5%; background-image:url('../images/about/poligon.png'); background-position:center center; background-repeat:no-repeat; background-size:cover; }
#process .process li .icon { display:block; margin-bottom:20px; font-size:70px; color:#1b1b1b; }
#process .process li:first-child .icon { color:#b91315; }
#process .process li .md-title { margin-bottom:15px; }
#process .process li .md-title strong { display:inline-block; font-weight:500; color:#1b1b1b; vertical-align:middle; }
#process .process li .num { display:inline-block; width:23px; height:23px; margin-right:8px; background:#1b1b1b; border-radius:50%; font-size:15px; color:#fff; text-align:center; line-height:23px; vertical-align:middle; }
#process .process li .bot { margin-top:30px; }
#process .process li a { display:inline-block; padding:10px 0; border-bottom:1px solid #1b1b1b; }
#process .process li a .plus { display:inline-block; position:relative; width:10px; height:10px; margin-left:7px; vertical-align:2px; }
#process .process li a .plus:before, #process .process li a .plus:after { content:''; display:block; position:absolute; top:50%; left:50%; width:90%; height:1px; background:#1b1b1b; transform:translate(-50%, -50%); }
#process .process li a .plus:after { transform:translate(-50%, -50%) rotate(90deg); }

/* 협업 제안 및 문의 */
#contact .md-title { font-weight:500; color:#1b1b1b; }

#contact .contact { margin-bottom:50px; background:#f6f6f6; text-align:center; }
#contact .contact .md-title { float:left; width:40%; padding:40px 0; background:#f6f6f6; border-right:1px solid #fff; }
#contact .contact ul { float:left; width:60%; }
#contact .contact li { float:left; width:50%; }
#contact .contact li:first-child { border-right:1px solid #fff; }
#contact .contact li p, #contact .contact li a { display:block; padding:40px 0; color:#1b1b1b; }
#contact .contact li a { background:#efd924; font-weight:500; }
#contact .contact li .icon { display:inline-block; font-size:22px; vertical-align:middle; }
#contact .contact li a .icon { margin-right:10px; }

#contact .example .md-title { float:left; width:290px; padding:0 40px; line-height:1.4; }
#contact .example .md-title span { display:block; }
#contact .example .txt { float:left; width:calc(100% - 290px); padding:0 35px; text-align:left; }


@media screen and ( max-width: 1300px ){
	.contents { padding:0 10px; }
	#gnb, #footer .footer-top a, #footer .footer-sns { right:10px; }
	#mainVisual .main-visual .item { padding-bottom:58%; }
	#mainVisual .page-title { display:inline; font-size:30px; }
/*	#footer .footer-logo { left:10px; }*/
	#process .process { margin:0 -20px; }
	#process .process li { padding:0 20px; }
	#process .process li .num { display:block; margin:0 auto 10px; }

	#contact .contact .md-title { width:100%; border:0; border-bottom:1px solid #fff; padding:30px 0; }
	#contact .contact ul { width:100%; }
	#contact .contact li p, #contact .contact li a { padding:30px 0; }
}

@media screen and ( max-width: 1200px ){
.sub-cont .title-wrap strong { padding:0 50px;  }
.sub-cont .txt { padding:0 100px; }
}

@media screen and ( max-width: 1024px ){
	#footer .footer-logo { position:static; }
	#footer .footer-sns { position:static; margin:20px auto; }
	#footer .footer-info { max-width:none; text-align:center; }
	#footer .footer-info dl { float:none; display:inline-block; line-height:1.4; }

	#mainVisual .main-visual .item { height:80vh; padding:0; }
	#mainVisual .slogan-slide { transform:translateY(-20%); }
	#mainVisual .page-title { display:inline; margin-left:.2em; word-break:keep-all; font-size:22px; }
	#mainVisual .page-title:first-child { margin:0; }
	/*#mainVisual .slogan-slide .swiper-container { padding:0; }
	#mainVisual .dot { display:none; }*/

	#mainCategory li div { padding:20px; }
	#mainCategory li p { font-size:24px; }

	#subVisual .sub-visual { height:650px; padding:0; background-size:auto 120%; }

	#process .process { margin:0 -10px; }
	#process .process li { padding:0 10px; }
	#process .process li > div { padding:40px 20px; }

	#contact .contact .md-title { float:none; width:100%; padding:38px 0; border-bottom:1px solid #fff; }
	#contact .contact ul { float:none; width:100%; }

	#contact .example .md-title { padding:0 20px; }
	#contact .example .txt { padding:0 15px; }

	.sub-cont .title-wrap strong { padding:0 30px;  }
	.sub-cont .txt { padding:0 50px; }
}

@media screen and ( max-width: 768px ){
	body  { font-size:16px; line-height:1.5; }
	.txt { font-size:18px; }
	.md-title { font-size:20px; }
	.lg-title { font-size:26px; }
	.section-title { font-size:28px; }
/*	.page-title, #mainVisual .slogan-slide .page-title { font-size:40px; }*/
	.accent { color:#b91315; }
	.symbol { display:inline-block; position:relative; }
	.symbol .icon-symbol { font-size:40px; }
	.symbol strong { top:17px; right:1px; font-size:12px; }
	.title-wrap .section-title { margin-top:5px; }
	.title-wrap { margin-bottom:30px; }

	.mo-hidden { display:none; }

	#container { padding:60px 0 90px; }

	#logo { width:140px; height:38px; }
	#header { padding:15px 0; }
	/*#logo { width:140px; height:38px; }*/
	#gnb { top:calc(100% + 16px); left:0; width:100%; padding:20px 0; background:rgba(255,255,255,1); border-bottom:1px solid rgba(47,47,47,.2); transform:none; opacity:0; visibility:hidden; }
	#gnb .gnb li { float:none; width:100%; margin:0; }
	#gnb .gnb li a { padding:20px 0; color:#1b1b1b; text-align:center; }
	#gnb .sns { display:block; }
	#hamburger { display:block; }

	#footer .footer-logo { width:140px; height:38px; margin-bottom:15px; }
	#footer .footer-top li { font-size:15px; float:none; margin:0; margin-top:12px; }
	#footer .footer-top li .icon, #contact .contact li .icon { font-size:18px; margin-right:5px; }
	#footer .footer-top a { font-size:15px; }

	#mainVisual .slogan-slide { transform:translateY(-40%); }
	#mainVisual .main-visual .item { height:60vh; }

	#mainCategory { margin-bottom:80px; }
	#mainCategory .category-list { margin:0 -10px -20px; }
	#mainCategory li { width:50%; margin-bottom:20px; }
	#mainCategory li p { margin-top:7px; font-size:28px; }

	#process .process { flex-direction:column; }
	#process .process li { float:none; display:block; width:100%; max-width:400px; margin:50px auto 0; }
	#process .process li > div { padding:30px 20px; }
	#process .process li .num { font-size:12px; }

	#contact .contact li { width:100%; }
	#contact .contact .md-title, #contact .contact li p, #contact .contact li a { padding:25px 10px; line-height:1.6 }
	#contact .contact li:first-child { border:0; border-bottom:1px solid #fff; }
	#contact .example .md-title { width:100%; padding:0; margin-bottom:20px; }
	#contact .example .md-title span { display:inline-block; }
	#contact .example .txt { width:100%; padding:0; }

	#subVisual .sub-visual { height:500px; }
	#subVisual .page-intro .page-title { margin-top:25px; font-size:30px; }
	#subVisual .page-intro .txt { margin-top:10px; padding:0 40px; }
	#subVisual .page-intro .txt p { word-break:keep-all; }
	.sub-cont .txt { line-height:1.6; padding:0; }
	#subVisual .tab li a { padding:20px 25px; }

	.sub-cont .title-wrap strong { padding:0 10px;  }
}


@media screen and ( max-width:500px ){
	body { font-size:15px; }
	.md-title { font-size:18px; }
	.txt { font-size:17px; }
	.lg-title { font-size:22px; }

	#footer .footer-top { padding:15px 0; }
	#footer .footer-top li { font-size:15px; }
	#footer .footer-info div { margin-top:8px; }
	#footer .footer-info div { flex-direction:column; }
	#footer .footer-info div p:last-child { margin-left:0; margin-top:8px; }
	#footer .footer-info div:nth-child(2) p { margin-top:0; }
	#footer .footer-info span:before { height:10px; }
	#footer .footer-top li .icon, #contact .contact li .icon { font-size:14px; }

/*	#mainVisual .main-visual .item { height:65vh; }*/
	#mainVisual .slogan-slide .slogan { padding:0 30px; }
	#mainVisual .slogan-slide .page-title { font-size:17px; }

	#subVisual .page-intro { top:25%; }
	#subVisual .tab li a { padding:15px;}
	#subVisual .page-intro .txt { padding:0 20px; }

	#mainCategory li p { font-size:17px; line-height:1.3; }

	#bo_gall .bo_tit, .product-list .bo_tit { margin-top:5px; }
	.product-list .gall_text_href, #bo_gall .gall_text_href { padding:15px; }

	.sub-cont .title-wrap strong { padding:0; }
}