@charset 'utf-8';
/********************************************************
2020-09-17
created by coDribble in GGOLCREATIVE.

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


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

/* container */
#wrapper { padding-top:101px; }
.contents { position:relative; width:100%; max-width:1300px; margin:0 auto; }
.section { padding-bottom:120px; }
.section article { margin-bottom:80px; }
.section article:last-child { margin-bottom:0; }
.article { padding:80px 0; }
.bg-gray { background:#f6f6f6; }
.bg-about { background-image:url('../images/main/about/main_about_bg.png'); background-position:center bottom; background-repeat:no-repeat; -webkit-background-size:auto 480px; background-size:auto 480px; }

/* checkbox */
.checkbox { position:relative; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }
.checkbox [type='checkbox'] { display:inline-block !important;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;width:1px;height:1px;clip:rect(1px 1px 1px 1px); /* IE6, IE7 */border:0 !important;overflow:hidden !important }
.checkbox span { display:inline-block; font-size:15px; line-height:1.4; vertical-align:top; }
.checkbox .checkbox_icon { width:20px; height:20px; margin-right:10px; background-image:url('../images/common/check_off.png'); -webkit-background-size:cover; background-size:cover; background-position:center center; background-repeat:no-repeat; }
.checkbox [type='checkbox']:checked + .checkbox_icon { background-image:url('../images/common/check_on.png'); }

/* selectbox */

/* font set */
.en { font-family:'Roboto Condensed', sans-serif; letter-spacing:0;}
.title { font-size:20px; }
.md-title { font-size:25px; }
.lg-title { font-size:30px; }
.section-title { font-size:42px; }
.page-title { font-size:68px; }
.page-title2 { font-size:50px; }
.largest-title { font-size:72px; }
.accent { color:#055a89; }
.accent-sub { color:#4b8ec7; }
.desc-title { color:#222; }
.txt { line-height:1.6; }
.title-wrap { margin-bottom:60px; text-align:center; }
.title-wrap .edge { display:block; margin:0 auto 20px; }

.i-marker { background-image:url('../images/about/location01.png'); }
.i-call { background-image:url('../images/about/location02.png'); }
.i-letter { background-image:url('../images/about/location03.png'); }

.edge { display:inline-block; width:20px; height:4px; background:#055a89; -webkit-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg); vertical-align:middle; }

.section-visual { padding:150px 0; margin-bottom:70px; background-position:center center; background-repeat:no-repeat; -webkit-background-size:auto 130%; background-size:auto 130%; color:#fff; text-align:center; }
.section-visual .page-title { font-weight:400; }

.description h3 { float:left; width:280px; font-size:48px; font-weight:400; color:#222; }
.description img { display:block; width:100%; height:auto; }
.description .desc-cont { padding:80px 0 70px; border-bottom:1px solid #222; }
.description .desc-cont .txt { float:left; width:-webkit-calc(100% - 280px); width:calc(100% - 280px); padding-left:35px; }
.description .desc-cont .txt p { word-break:keep-all; }

.half-layout .left { float:left; width:-webkit-calc(100% - 700px); width:calc(100% - 700px); }
.half-layout .right { float:right; width:700px; padding-left:80px; }
.half-layout.reverse .left { float:right; }
.half-layout.reverse .right { padding-left:0; padding-right:80px; }
.half-layout .right p { margin-bottom:20px; line-height:1.6; word-break:keep-all; }
.half-layout .right p:last-child { margin-bottom:0; }

.webzine { padding:30px 0; border-bottom:1px solid #999; -webkit-transform:scale(.9); -o-transform:scale(.9); transform:scale(.9); opacity:.5; }
.webzine .img-wrap { float:left; position:relative; width:260px; }
.webzine .img-wrap img { width:100%; height:auto; }
.webzine .txt-wrap { float:left; width:-webkit-calc(100% - 260px); width:calc(100% - 260px); padding-left:60px; }
.webzine .txt-wrap .desc { margin-top:25px; }
.webzine .txt-wrap .desc span { display:block; line-height:1.6; word-break:keep-all; }
.webzine .txt-wrap .opt { margin-top:30px; }
.webzine .txt-wrap .edge { width:9px; height:2px; margin-left:10px; }
.webzine .txt-wrap dl { margin-top:10px; line-height:1.6; }
.webzine .txt-wrap dl:first-child { margin-top:0; }
.webzine .txt-wrap dt { float:left; position:relative; margin-right:15px; font-weight:500; color:#222; }
/* .webzine .txt-wrap dt:after { content:''; display:block; position:absolute; top:50%; left:calc(100% + 11px); width:4px; height:4px; margin-top:-2px; background:#055a89; border-radius:50%; } */
.webzine .txt-wrap dd { float:left; word-break:keep-all; }
.webzine .txt-wrap strong { margin-right:20px; font-weight:500; line-height:1.4; }
.webzine .txt-wrap a { display:inline-block; padding:10px 15px; background:#222; font-size:15px; color:#fff; vertical-align:text-bottom; }
.webzine .txt-wrap a i { margin-left:10px; }
.webzine .process ul { margin:0 -18px; }
.webzine .process li { float:left; width:33.33%; position:relative; padding:0 18px; text-align:center; }

.location-info { margin:0 -25px; }
.location-info dl { float:left; width:33.33%; padding:0 25px; color:#222; }
.location-info dt { padding:40px 20px 0; margin-bottom:15px; border-top:1px solid #ddd; }
.location-info dt span { display:block; width:30px; height:30px; background-repeat:no-repeat; background-position:center bottom; -webkit-background-size:100% auto; background-size:100% auto; }
.location-info dt strong { display:block; margin-top:30px; }
.location-info dd { padding:0 20px; line-height:1.4; }

.swiper-slide img { width:100%; height:auto; }
.swiper-container .controller div { width:70px; height:70px; margin-top:-35px; background:rgba(0,0,0,.9); color:#fff; }
.swiper-container .controller div:after { font-size:20px; }
.swiper-container .controller .swiper-button-disabled { background:rgba(0,0,0,.2); opacity:1; }
.swiper-container .controller .slide_btn-prev { left:0; }
.swiper-container .controller .slide_btn-next { right:0; }

.fadeInUp { -webkit-transform:translateY(50%); -o-transform:translateY(50%); transform:translateY(50%); opacity:0; visibility:hidden; }


#quick { position:fixed; top:50%; right:10px; z-index:1; }
#quick li { margin-bottom:10px; }
#quick li:last-child { margin-bottom:0; }
#quick li a { display:block; position:relative; width:36px; height:36px; background:rgba(34,34,34,.8); border-radius:50%; font-size:14px; color:#fff; text-align:center; }
#btnQuickTop:before { content:''; display:block; position:absolute; top:25%; left:50%; width:25%; height:25%; background:none; border-top:2px solid #fff; border-left:2px solid #fff; -webkit-transform-origin:left top; -o-transform-origin:left top; transform-origin:left top; -webkit-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); }
#btnQuickTop:after { content:''; display:block; position:absolute; top:25%; left:50%; width:2px; height:50%; margin-left:-1px; background:#fff; }
#btnHome span:not(.icon) { font-size:0; height:0; line-height:0; }
#btnHome .icon { display:block; position:absolute; top:50%; left:0; width:100%; height:18px; background-position:center center; background-repeat:no-repeat; -webkit-background-size:auto 100%; background-size:auto 100%; background-image:url('../images/common/home.png'); background-image:url('../images/common/home.svg'); -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); }



/****************************************
02. 헤더
****************************************/
#header { position:fixed; top:0; left:0; width:100%; background:#fff; border-bottom:1px solid #999; z-index:9999; }
#header .header_inner { position:relative; padding:0 50px; }

#logo { position:absolute; top:50%; left:50px; width:198px; height:52px; -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); z-index:1; }
#logo a { display:block; width:100%; height:100%; background-image:url('../images/common/ci.png'); background-position:center center; background-repeat:no-repeat; -webkit-background-size:cover; background-size:cover; }

#gnb { width:100%; text-align:center; }
#gnb .gnb { font-size:0; }
#gnb .gnb > li { display:inline-block; position:relative; padding:0 45px; }
#gnb .gnb > li > a { display:block; padding:40px 0; }
#gnb .depth2 { display:none; position:absolute; top:100%; left:0; width:100%; background:#fff; border-top:1px solid #999; }
#gnb .current { font-weight:700; }

#extend { position:absolute; top:50%; right:120px; -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); }
#extend .edge { width:16px; height:3px; margin:0 5px; background:#ff7a43; }

#hamburger { overflow:hidden; display:none; position:absolute; top:50%; right:10px; width:30px; height:30px; margin-top:-15px; }
#hamburger button { display:block; position:relative; width:100%; height:100%; background:none; border:0; }
#hamburger button .bar { display:block; position:absolute; top:50%; right:0; width:100%; height:2px; margin-top:-1px; background:#222; }
#hamburger button:before { content:''; display:block; position:absolute; top:50%; left:0; width:100%; height:2px; margin-top:-10px; background:#222; -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); z-index:1; }
#hamburger button:after { content:''; display:block; position:absolute; top:50%; left:0; width:100%; height:2px; margin-top:10px; background:#222; -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); z-index:1; }



/****************************************
03. 푸터
****************************************/
#footer { font-size:15px; }

#footer .footer_top { border-top:1px solid #ddd; }
#footer .footer_top ul { padding:30px 0; }
#footer .footer_top li { float:left; margin-left:15px; }
#footer .footer_top li:first-child { margin-left:0; }

#btnTop { position:absolute; top:30px; right:0; font-size:1rem; }
#btnTop:before { content:''; display:block; position:absolute; top:0; left:-40px; width:1px; height:100%; background:#999; }
#btnTop .triangle { display:inline-block; margin-left:10px; border-style:solid; border-width:0 3px 9px 3px; border-color:transparent transparent #055a89 transparent; vertical-align:middle; }

#footer .footer_bot { padding:55px 0 70px; background:#111; color:#ccc; }

#sitemap { padding-bottom:45px; }
#sitemap > ul { float:left; }
#sitemap > ul > li { float:left; margin-left:60px; }
#sitemap > ul > li:first-child { margin-left:0; }
#sitemap > ul > li li { margin-bottom:15px; }
#sitemap > ul > li:nth-child(3) { width:170px; }
#sitemap > ul > li:nth-child(3).alone { width:210px; }
#sitemap > ul > li:nth-child(3) li { float:left; width:50%; }
#sitemap li a { color:#888; }
#sitemap li strong { display:inline-block; padding-bottom:10px; margin-bottom:30px; border-bottom:1px solid #fff; font-size:1rem; font-weight:normal; color:#fff; letter-spacing:0; }

#familySite { position:relative; float:right; }
#familySite button { display:inline-block; position:relative; width:260px; padding:24px 30px; background:none; border:1px solid #fff; text-align:left; font-size:1rem; color:#fff; }
#familySite button i { display:block; position:absolute; top:50%; right:30px; font-size:10px; -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); }
#familySite ul { display:none; position:absolute; bottom:100%; left:0; width:100%; padding:10px 0; background:#fff; border:1px solid #ddd; }
#familySite a { display:block; padding:10px; }


#footer .company_info { padding-top:20px; border-top:1px solid #999; }
#footer .company_info .info { float:left; margin-top:25px; }
#footer .company_info dl { float:left; margin-left:25px; line-height:1.4; }
#footer .company_info dl:first-child { margin-left:0; }
#footer .company_info dt { float:left; position:relative; }
#footer .company_info dt:after { content:':'; display:inline-block; margin:0 4px; }
#footer .company_info dd { float:left; }
#footer .company_info .copy { margin-top:15px; letter-spacing:-.2px;}
#footer .company_info .ft_logo { float:right; width:170px; height:44px; background-image:url('../images/common/ci_gray.png'); background-position:center center; background-repeat:no-repeat; -webkit-background-size:cover; background-size:cover; }



/****************************************
04. 메인
****************************************/
#mainVisual { position:relative; width:100%; height:0; padding-bottom:46%; }
#mainVisual .visual-slogan { position:absolute; bottom:35%; left:50%; width:100%; max-width:680px; color:#fff; text-align:center; -webkit-transform:translateX(-50%); -o-transform:translateX(-50%); transform:translateX(-50%); }
#mainVisual .visual-slogan .largest-title { margin-bottom:30px; font-weight:300; line-height:1.2; letter-spacing:-0.08em; word-break:keep-all; }
#mainVisual .visual-slogan strong { display:block; font-weight:500; }
#mainVisual .visual-slogan p:not(.largest-title) { font-size:22px; }
#btnScroll { position:absolute; bottom:60px; left:50%; color:#fff; letter-spacing:0.05em; -webkit-transform:translateX(-50%); -o-transform:translateX(-50%); transform:translateX(-50%); z-index:1; }
#btnScroll i { display:block; font-size:1rem; text-align:center; }
#btnScroll .first { margin-bottom:-3px; color:#aaa; }
#btnScroll .second { margin-bottom:15px; }

#section01 { padding:120px 0; }
#section01 .md-title { margin-bottom:30px; font-weight:500; color:#222; }
#section01 .swiper-slide { height:0; padding-bottom:56.25%; }
#section01 .swiper-slide div, #section01 .swiper-slide iframe { position:absolute; top:0; left:0; width:100%; height:100%; }

#section02 .section-visual { background-image:url('../images/main/product/visual.jpg'); }
#section02 .cmp-info { padding:40px 0 10px; margin-top:40px; border-top:1px solid #999; }
#section02 .cmp-info > div { margin-top:40px; }
#section02 .cmp-info > div:first-child { margin-top:0; }
#section02 .cmp-info .desc-title { display:inline-block; }
#section02 .process li { width:50%; max-width:216px; margin-top:10px; }
#section02 .process li:after { content:''; display:block; position:absolute; top:50%; right:-4px; margin-top:-4px; border-style:solid; border-width:4px 0px 4px 8px; border-color:transparent transparent transparent #055a89; }
#section02 .process li:last-child:after { display:none; }
#section02 .process li strong { display:block; width:100%; padding:20px 0; border:1px solid #ddd; font-weight:700; }
#section02 .development li { float:left; margin-top:10px; margin-right:30px; color:#222; }
#section02 .development li img { width:46px; height:auto; margin-right:10px; }
#section02 .webzine .img-wrap .controller { display:none; }
#section02 .webzine .img-wrap:hover .controller { display:block; }
#section02 .webzine .swiper-container .controller div { width:40px; height:40px; margin-top:-20px; }

#section03 .section-visual { background-image:url('../images/main/service/visual.jpg'); }
#section03 .desc li { position:relative; padding-left:10px; margin-bottom:10px; line-height:1.6; word-break:keep-all; }
#section03 .desc li:before { content:'\00b7'; display:block; position:absolute; top:0; left:0; }

#section04 .section-visual { background-image:url('../images/main/about/visual.jpg'); }
#history .history:first-child { border-top:1px solid #222; }
#history .history:first-child .list { display:block; }
#history .history button { display:block; position:relative; width:100%; padding:30px 20px; background:none; border:0; border-bottom:1px solid #ddd; color:#222; text-align:left; }
#history .history button i { position:absolute; top:50%; right:20px; font-size:12px; -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); color:#ddd; }
#history .history button.active, #history .history button.active i { color:#055a89; }
#history .history .list { display:none; padding:50px 20px; border-bottom:1px solid #ddd; }
#history .history .year-info { margin-top:35px; }
#history .history .year-info:first-child { margin-top:0; }
#history .history .year { display:block; float:left; width:120px; padding:10px 0; background:#055a89; color:#fff; text-align:center; }
#history .history .year-info div { float:left; width:-webkit-calc(100% - 120px); width:calc(100% - 120px); padding-left:30px; margin-top:5px; }
#history .history .month { float:left; width:35px; color:#999; text-align:center; line-height:1.6; }
#history .history .month + ul { float:left; width:-webkit-calc(100% - 35px); width:calc(100% - 35px); padding-left:20px; }
#history .history .year-info li li { position:relative; padding-left:10px; line-height:1.6; word-break:keep-all; }
#history .history .year-info li li:before { content:'\00b7'; display:block; position:absolute; top:0; left:0; }

#certification { background-image:url('../images/main/about/cert_bg.jpg'); background-position:center center; background-repeat:no-repeat; -webkit-background-size:cover; background-size:cover; }
#certification .cert-wrap { overflow:hidden; padding:80px 0; background:#fff; text-align:center; }
#certification .cert-wrap p { margin-bottom:60px; line-height:1.6; }
#certification ul { font-size:0; }
#certification li { display:inline-block; max-width:25%; padding:0 23px; font-size:1rem; vertical-align:top; }
#certification li img { display:block; width:100%; max-width:223px; height:auto; margin:0 auto 20px; }

#banner .banner { float:left; width:33.33%; }
#banner .banner a { display:block; padding:60px 30px 50px; background-repeat:no-repeat; background-position:center center; -webkit-background-size:cover; background-size:cover; color:#fff; }
#banner .banner p { margin-bottom:50px; }
#banner .banner span { display:inline-block; padding-bottom:10px; border-bottom:1px solid #fff; }



/****************************************
05. 서브
****************************************/
/* 공통 */
#subVisual.about { background-image:url('../images/about/visual.jpg'); }
#subVisual.news { background-image:url('../images/news/visual.jpg'); }
#subVisual.contact { background-image:url('../images/contact/visual.jpg'); }
#subVisual { padding:200px 0; background-position:center center; background-repeat:no-repeat; -webkit-background-size:auto 100%; background-size:auto 100%; text-align:center; color:#fff; }
#subVisual .page-title { font-weight:400; }

#location .tab { margin-bottom:40px; }
#location .tab li { float:left; width:50%; }
#location .tab li a { display:block; width:100%; padding:30px 0; border-bottom:2px solid #055a89; text-align:center; }
#location .tab li a.active { background:#055a89; color:#fff; }
#location .loc { display:none; }
#location #loc1 { display:block; }

#intro .desc { text-align:center; }
#intro .desc .txt { width:100%; max-width:1000px; margin:0 auto; }
#intro .desc .txt p { word-break:keep-all; }
#intro .desc .txt .md-title { margin-bottom:35px; font-weight:500; }
#intro .desc .txt div p { margin-bottom:20px; }
#intro .desc .txt div p:last-child { margin-bottom:0; }
#intro ul { position:relative; display:-webkit-box; display:-ms-flex; display:-webkit-flex; display:-ms-flexbox; display:flex; width:100%; max-width:1000px; margin:0 auto; }
#intro ul:before { content:''; display:block; position:absolute; top:0; left:50%; width:1px; height:100%; background:#ddd; }
#intro ul li { float:left; width:50%; }
#intro ul li a { display:block; width:100%; height:100%; padding:40px; background:#fff; border:1px solid #ddd; color:#222; line-height:1.6; -webkit-transition:border-color .3s ease; -o-transition:border-color .3s ease; transition:border-color .3s ease; }
#intro ul li:first-child a { border-right:0; }
#intro ul li:last-child a { border-left:0; }
#intro ul li a p { word-break:keep-all; }
#intro ul li a strong { display:block; margin-bottom:15px; }
#intro ul li a i { display:block; margin-bottom:15px; font-size:50px; }
#intro ul li .arrow { display:inline-block; position:relative; width:20px; height:2px; margin-top:20px; background:currentColor; color:#ddd; -webkit-transition:width .3s ease; -o-transition:width .3s ease; transition:width .3s ease; }
#intro ul li .arrow:before { content:''; display:block; position:absolute; top:50%; right:0; width:8px; height:2px; margin-top:-1px; background:currentColor; -webkit-transform-origin:right bottom; -o-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); }
#intro ul li .arrow:after { content:''; display:block; position:absolute; top:50%; right:0; width:8px; height:2px; margin-top:-1px; background:currentColor; -webkit-transform-origin:right top; -o-transform-origin:right top; transform-origin:right top; -webkit-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg); }
#intro ul li a:hover,
#intro ul li a:focus { border-color:#055a89; }
#intro ul li a:hover i, #intro ul li a:hover strong,
#intro ul li a:focus i, #intro ul li a:focus strong { color:#055a89; }
#intro ul li a:hover .arrow,
#intro ul li a:focus .arrow { width:45px; color:#055a89; }

#equipment .half-layout { margin-bottom:60px; }
#equipment .half-layout:last-child { margin-bottom:0; }
#equipment .desc-title { display:block; margin-bottom:20px; }
#equipment .desc-title span { display:inline-block; padding:7px; background:#222; font-size:1rem; color:#fff; vertical-align:middle; }
#equipment .equip-cont { padding:30px 20px; border-top:1px solid #ddd; }
#equipment .equip-cont strong { display:block; margin-bottom:20px; }
#equipment .equip-cont li { color:#222; line-height:1.6; }
#equipment .equip-cont li span { font-weight:500; }
/*#equipment .controller { display:none; }
#equipment {  }*/

#location .map { position:relative; height:0; padding-bottom:46%; margin-bottom:60px; }
#location .map iframe { position:absolute; top:0; left:0; width:100%; height:100%; }

#sustainable section { margin-bottom:80px; }
#sustainable section:last-child { margin-bottom:0; }
#sustainable .description .sustain-visual { position:relative; }
#sustainable .description .overlay { position:absolute; bottom:0; left:0; width:100%; padding:50px 70px; background:rgba(0,0,0,.7); color:#fff; }
#sustainable .description { padding-bottom:60px; margin-bottom:20px; border-bottom:1px solid #999; }
#sustainable .description .overlay > div { display:-webkit-box; display:-ms-flex; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; margin:0 -40px; }
#sustainable .description .overlay h4 { float:left; width:250px; padding:0 40px; font-weight:500; }
#sustainable .description .overlay .txt { float:left; width:-webkit-calc(100% - 250px); width:calc(100% - 250px); padding:0 40px; border-left:1px solid #fff; }
#sustainable .description .overlay .txt p { word-break:keep-all; }
#sustainable .description .overlay h4.eng { width:350px; }
#sustainable .description .overlay .txt.eng { width:-webkit-calc(100% - 350px); width:calc(100% - 350px); }
#sustainable .webzine { padding:40px 0; }
#sustainable .webzine:last-child { border-bottom:0; }
#sustainable .webzine li { margin-top:60px; }
#sustainable .webzine li:nth-child(1), #sustainable .webzine li:nth-child(2), #sustainable .webzine li:nth-child(3) { margin-top:0; }
#sustainable .webzine .cert-img { display:block; padding:20px; background:#fff; }
#sustainable .webzine .cert-img img { display:block; width:46%; height:auto; margin:0 auto; }
#sustainable .webzine .img-wrap .lg-title { word-break:keep-all; }
#sustainable .webzine .wz-cont { padding:25px 10px 0; line-height:1.6; }
#sustainable .webzine .wz-cont p { word-break:keep-all;}
#sustainable .webzine .policy { font-size:0; }
#sustainable .webzine .policy li { float:none; display:inline-block; font-size:1rem; vertical-align:top; }
#sustainable .webzine .policy .wz-cont { padding:0; text-align:left; }
#sustainable .webzine .policy strong { display:block; padding:0 10px; margin-top:25px; }
#sustainable .webzine .policy p { padding:0 10px; text-align:left; word-break:keep-all; line-height:1.6; }



/****************************************
06. 미디어쿼리
****************************************/
@media screen and ( max-width: 1300px ) {
	.contents { padding:0 10px; }

	#header .header_inner { padding:0 10px; }

	#logo { left:10px; width:178px; height:45px}

	#gnb .gnb > li { padding:0 25px; }
	#extend { right:10px; }

	#btnTop { right:10px; }
}

@media screen and ( max-width: 1024px ) {
	#wrapper { padding-top:79px; }

	html { font-size:14px; }
	.title { font-size:18px; }
	.md-title { font-size:22px; }
	.lg-title { font-size:26px; }
	.section-title { font-size:30px; }
	.page-title { font-size:60px; }
	.page-title2 { font-size:40px; }
	.largest-title { font-size:63px; }
	.webzine .txt-wrap a, #footer { font-size:12px; }

	.section-visual { padding:100px 0; }
	.half-layout .left { width:46%; padding:0 20px; }
	.half-layout .right, .half-layout.reverse .right { width:54%; padding:0 20px;}
	.webzine .txt-wrap { padding-left:30px; }
	.webzine .txt-wrap a { margin-top:10px; }
	.description .desc-cont { padding:50px 0; }
	.description h3 { font-size:42px; }

	.description .desc-cont .txt { padding-left:5px;}

	#sustainable .description .overlay h4 { float:left; width:200px; padding:0 40px; font-weight:500; }
	#sustainable .description .overlay .txt { float:left; width:-webkit-calc(100% - 200px); width:calc(100% - 200px); padding:0 40px; border-left:1px solid #fff; }
	#sustainable .description .overlay h4.eng { width:260px; }
	#sustainable .description .overlay .txt.eng { width:-webkit-calc(100% - 260px); width:calc(100% - 260px); }

	#sustainable .webzine .wz-cont p br { display:none;}

	#header { padding:24px 0; }
	#logo { position:relative; top:0; left:0; width:115px; height:30px; -webkit-transform:none; -o-transform:none; transform:none; }
	#gnb { position:absolute; top:-webkit-calc(100% + 24px); top:calc(100% + 24px); left:0; width:100%; background:#fff; border-top:1px solid #999; border-bottom:1px solid #999; opacity:0; visibility:hidden; }
	#gnb .gnb > li { display:block; }
	#gnb .gnb > li > a { padding:30px 0; }
	#extend { right:70px; }
	#hamburger { display:block; }

	#sitemap > ul, #familySite { float:none; }
	#familySite { margin-top:20px; }
}

@media screen and ( max-width: 768px ) {
	.largest-title { font-size:40px; }
	.page-title { font-size:40px;}
	.page-title2 { font-size:30px; }
	.section-title { font-size:26px;}
	.lg-title { font-size:20px;}
	.md-title { font-size:18px;}
	.title { font-size:16px;}
	.description h3 { font-size:30px;}

	.title-wrap { margin-bottom:30px; }
	.title-wrap .edge { margin-bottom:15px; }
	.section { padding-bottom:80px; }
	.article { padding:40px 0; }

	.hd_pops { top:70px !important; left:0 !important; }

	#wrapper { padding-top:73px; }

	#header { padding:20px 0 }
	#logo { width:125px; height:32px; }
	#extend { right:60px; }
	#extend .edge { margin:0; }
	#gnb { top:-webkit-calc(100% + 20px); top:calc(100% + 20px); }

	#sitemap > ul > li { width:33.33%; padding:0 5px; margin:0; }
	#sitemap > ul > li:nth-child(3), #sitemap > ul > li:nth-child(3).alone { width:auto; }
	#sitemap > ul > li:nth-child(3) li { float:none; width:100%; }
	#familySite button { width:100%; }
	#footer .company_info { border-top:0; text-align:center; }
	#footer .company_info .ft_logo { float:none; margin:0 auto; }
	#footer .company_info .info { float:none; }
	#footer .company_info dl { float:none; display:inline-block; margin-left:10px; vertical-align:top; }

	#subVisual { padding:100px 0; }

	.half-layout .left { width:100%; padding:0; }
	.half-layout .right, .half-layout.reverse .right { width:100%; padding:0; margin-top:30px;}
	.half-layout .right p { margin-bottom:10px; }
	.webzine .img-wrap { width:100%; }
	.webzine .txt-wrap { width:100%; padding:30px 0 0; }
	.webzine .txt-wrap .opt { margin-top:20px; }
	.webzine .txt-wrap strong { display:block; margin:0; }
	.webzine .process ul { margin:0 -5px; }
	.webzine .process li { padding:0 5px; }

	#mainVisual { height:-webkit-calc(100vh - 300px); height:calc(100vh - 300px); padding:0; }
	#mainVisual .visual-slogan .largest-title { margin-bottom:20px; }
	#mainVisual .visual-slogan p:not(.largest-title) { padding:0 10px; font-size:14px; word-break:keep-all; }
	#btnScroll { bottom:20px; }

	#section01 { padding:40px 0 80px; }
	#section01 .md-title, #intro .desc .txt .md-title { margin-bottom:20px; }

	#section02 .cmp-info .desc-title { padding-bottom:15px; }

	.description h3 { display:block; width:100%; }
	.description .desc-cont { padding:40px 0; }
	.description .desc-cont .txt { display:block; width:100%; padding:20px 0 0; }

	#certification .cert-wrap { padding:60px 0; }
	#certification ul { margin-bottom:-30px; }
	#certification li { max-width:50%; margin-bottom:30px; }

	#banner .banner { width:100%; }
	#banner .banner a { padding:50px 30px; }
	#banner .banner p { margin-bottom:30px; }

	#location .tab li a { padding:20px 0; }

	.location-info { margin:0 -5px; }
	.location-info dl { padding:0 5px; }
	.location-info dt, .location-info dd { padding-left:10px; padding-right:10px; }
	.location-info dd { line-height:1.6; }

	#intro .desc .txt div p { margin-bottom:10px; }

	#equipment .half-layout { margin-bottom:15px; }
	#equipment .equip-cont { padding:25px 20px; }
	#equipment .equip-cont strong { margin-bottom:15px; }

	#sustainable .description { padding-bottom:0; margin-bottom:0; }
	#sustainable .description .overlay { position:static; padding:40px 0; background:#f6f6f6; color:#222; }
	#sustainable .description .overlay > div { -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column; -webkit-box-align:start; -webkit-align-items:flex-start; -ms-flex-align:start; align-items:flex-start; margin:0; }
	#sustainable .description .overlay h4, #sustainable .description .overlay h4.eng { float:none; padding:0; width:100%; }
	#sustainable .description .overlay .txt, #sustainable .description .overlay .txt.eng { float:none; width:100%; padding:20px 0 0; border:0; }
	#sustainable .webzine li { margin-top:30px; }
}

@media screen and ( max-width: 480px ) {
	.mo-hidden { display:none; }

	.swiper-container .controller div { width:40px; height:40px; margin-top:-20px; }
	.swiper-container .controller div:after { font-size:16px; }

	.section { padding-bottom:60px; }

	.description .desc-cont { padding-top:30px; }

	#btnTop { top:15px; }
	#footer .footer_top ul { padding:15px 0; }
	#footer .footer_bot { padding:45px 0 50px; }
	#footer .company_info { padding:0; }
	#familySite button { padding:17px 30px; }

	#section01 { padding:40px 0 60px; }

	#section02 .process li { width:100%; max-width:none; margin-top:30px; }
	#section02 .process li:first-child { margin-top:10px; }
	#section02 .process li:after { top:100%; right:50%; margin-right:-2px; margin-top:10px; -webkit-transform:rotate(90deg); -o-transform:rotate(90deg); transform:rotate(90deg); }

	#intro ul { -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column; }
	#intro ul:before { display:none; }
	#intro ul li { width:100%; }
	#intro ul li:first-child a, #intro ul li:last-child a { padding:30px; border:1px solid #ddd; }
	#intro ul li:last-child a { margin-top:-1px; }
	#intro ul li div { display:-webkit-box; display:-ms-flex; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; margin-bottom:15px; }
	#intro ul li a i { margin:0 10px 0 0; }
	#intro ul li a strong { margin:0; }
	#intro ul li .arrow { width:45px; color:#055a89; }

	#history .history .year { width:60px; }
	#history .history .year-info div { width:-webkit-calc(100% - 80px); width:calc(100% - 80px); padding-left:15px; }

	#certification .cert-wrap { padding:40px 0 60px; }
	#certification .cert-wrap p { padding:0 15px; margin-bottom:40px; word-break:keep-all; }
	#certification li { padding:0 15px; }

	#location #map { margin:0; }
	.location-info { margin:0; }
	.location-info dl { width:100%; padding:30px 0; border-top:1px solid #ddd; }
	.location-info dl:first-child { border-top:0; }
	.location-info dt { display:-webkit-box; display:-ms-flex; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; padding:0 10px; border:0; }
	.location-info dt span { background-position:center center; }
	.location-info dt strong { margin:0 0 0 10px; }

	#banner .banner a { padding:30px; }
	#banner .banner p { margin-bottom:20px; }

	#sustainable .webzine:last-child { padding-bottom:0; }
	#sustainable .webzine .wz-cont { padding:15px 10px 0; }
	#sustainable .webzine .policy { margin:0; }
	#sustainable .webzine .policy li { width:100%; /*margin:0 0 30px 0;*/ padding:20px 0 15px; margin:0; border-bottom:1px dashed #999; }
	#sustainable .webzine .policy li:first-child { padding-top:0; }
	#sustainable .webzine .policy li:last-child { /*margin-bottom:0;*/ padding-bottom:0; border-bottom:0; }
	#sustainable .webzine .policy .wz-cont { display:-webkit-box; display:-ms-flex; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; }
	#sustainable .webzine .policy img { width:50%; }
	#sustainable .webzine .policy strong { width:50%; margin:0 0 0 10px; }
	#sustainable .webzine .policy p { padding:0; margin-top:10px; }
	#sustainable .webzine .certifi li { width:50%; }
	#sustainable .webzine .cert-img img { width:100%; }

	#footer .company_info dt:first-child { display:none; }
}