html, body {width:100%; min-height:100%;}
html {overflow-y:scroll; overflow-x:hidden; filter:expression(document.execCommand("BackgroundImageCache", false, true));}
body {background:#fff; overflow-x:hidden; -webkit-text-size-adjust:none;}
body.stop-transitions * { transition: none !important; }

*::placeholder { color:#999; }                     
*::-webkit-input-placeholder { color:#999; }
*:-moz-placeholder { color:#999; }             
*::-moz-placeholder { color:#999; }           
*:-ms-input-placeholder { color:#999 !important; }      
*::-ms-input-placeholder { color:#999; } 

img { max-width:100%;  }
* { word-break:keep-all; }

#wrap {width:100%; }
#header, #mainVisual, #subVisual, #container, #foot{width:100%; position:relative;}
.inner {max-width:1320px; margin:0 auto; position:relative;}
.inner:after,
.clearfix:after {content:''; clear: both; display: block;}

input[type=text], input[type=password], input[type=submit], input[type=button], textarea, button {  -webkit-appearance: none; -webkit-border-radius: 0; }
select { -webkit-border-radius: 0; }

.pc {display:block !important;}
.tablet {display:none !important;}
.mobile {display:none !important;}
.tabmo {display:none !important;}

/*header*/
#header {position: fixed; top: 0; left: 0; width: 100%; height: 100px; border-bottom: 1px solid rgba(238,238,238,0.5); z-index: 500; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
#header .headerWrap {padding: 0 7.5%;}
#header .headerWrap:after {content:''; clear: both; display: block;}
#header h1 {float: left; margin-top: 22px; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
#header h1 a {position: relative; display: block; width: 310px; height: 55px;}
#header h1 a img {position: absolute; top: 0; left: 0; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
#header h1 a img.logo {opacity: 0; filter:alpha(opacity=0); -mox-opacity:0;}
#header .btn_allmenu {display: none;}

#header .lang {position: relative; float: right; margin-top: 30px;}
#header .lang .tt {width: 142px; height: 40px; border: 1px solid #aaa; font-size: 14px; font-weight: 400; text-align: center; color: #fff; line-height: 38px; border-radius: 5px; cursor: pointer;}
#header .lang .tt span {display: inline-block; padding-right: 25px; background: url('/images/common/icon/lang_arrow_w.png') no-repeat right 48%;}
#header .lang ul {display: none; position: absolute; top: 40px; left: 0; width: 100%; border: 1px solid #aaa; background: #fff; border-radius: 5px; box-sizing: border-box; overflow: hidden;}
#header .lang ul li {height: 35px; font-size: 14px; line-height: 37px;}
#header .lang ul li a {display: block; padding: 0 25px;}
#header .lang ul li a:hover {background: #f7f7f7; font-weight: 400; color: #3f57bc;}

/* #header .erp {position: relative; float: right; margin-top: 30px; margin-right:10px;}
#header .erp .erp_tt {width: 152px; height: 40px; border: 1px solid #4255be; font-size: 14px; font-weight: 400; text-align: center; color: #fff; line-height: 38px; border-radius: 5px; cursor: pointer; background-color:#4255be;}
#header .erp .erp_tt span {display: inline-block; padding-right: 25px; background: url('/images/common/icon/lang_arrow_w.png') no-repeat right 48%;}
#header .erp .erp_tt a {font-weight: 400; color: #fff;}
#header .erp .erp_tt a:hover {font-weight: 400; color: #fff;} */

#header:hover,
#header.scroll,
#header.blk {background: #fff; border-color: #dfdfdf;}
#header:hover h1 a img.logo,
#header.scroll h1 a img.logo,
#header.blk h1 a img.logo  {opacity: 1; filter:alpha(opacity=1); -mox-opacity:1;}
#header:hover h1 a img.logo_w,
#header.scroll h1 a img.logo_w,
#header.blk h1 a img.logo_w  {opacity: 0; filter:alpha(opacity=0); -mox-opacity:0;}
#header:hover .tt span,
#header.scroll .tt span,
#header.blk .tt span  {background-image: url('/images/common/icon/lang_arrow.png'); color: #666;}

/* topmenu */
#topmenu {position: absolute; top: 0; left: 50%; transform:translateX(-45%); z-index: 505;}
#topmenu .menu > li {position: relative; display: inline-block; margin-left: 165px; vertical-align: top;}
#topmenu .menu > li:first-child {margin-left: 0;}
#topmenu .menu > li > a {position: relative; display: block; font-size: 21px; font-weight: 400; color: #fff; line-height: 100px; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
#topmenu .menu > li > a:before {content:''; position: absolute; top: 0; left: 50%; width: 2px; height: 0; margin-left: -1px; background: #4255be; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
#topmenu .menu > li:hover > a,
#topmenu .menu > li.active > a {color: #3f57bc !important;}
#topmenu .menu > li:hover > a:before,
#topmenu .menu > li.active > a:before {height: 28px;}

#submenu {display: block;}
#submenu .list {display: none; position: fixed; top: 101px; left: 0; width: 100%; background: #fff; border-bottom: 1px solid #eee; -webkit-box-shadow: 0px 5px 7px 0px rgba(0, 0, 0, 0.3); -moz-box-shadow:0px 5px 7px 0px rgba(0, 0, 0, 0.3); box-shadow:0px 5px 7px 0px rgba(0, 0, 0, 0.3);}
#submenu .list > ul {display:flex; width: 1320px; margin: 0 auto; border-left: 1px solid #eee; border-right: 1px solid #eee; box-sizing: border-box;}
#submenu .list > ul > li {width: 25%; border-left: 1px solid #eee; box-sizing: border-box;}
#submenu .list > ul > li {width: 25%; border-left: 1px solid #eee; box-sizing: border-box;}
#submenu .list > ul > li:first-child {border-left: none;}
#submenu .list > ul > li > a {display: block; background: url('/images/common/icon/submenu_off.png') no-repeat; background-position: calc(100% - 30px) center; padding: 0 30px; font-size: 19px; font-weight: 400; color: #666; line-height: 82px;}
#submenu .list > ul > li:hover > a {background-image: url('/images/common/icon/submenu_on.png'); color: #3f57bc;}
#submenu .list .depth3 {position: relative; padding: 0 30px 50px 30px; margin-top: -20px; z-index: 10;}
#submenu .list .depth3 li {line-height: 34px;}
#submenu .list .depth3 li a {display: block; font-size: 16px; font-weight: 400; color: #888;}
#submenu .list .depth3 li a:hover {color: #3f57bc;}

#submenu .list > ul > li.s_m_w50 {width:44%;}

#header:hover #topmenu .menu > li > a,
#header.scroll #topmenu .menu > li > a,
#header.blk #topmenu .menu > li > a  {color: #222;}

/* allmenu */
#allmenu {display: none;}

/* 메인비주얼 */
#mainVisual {position:relative; height: 100vh; overflow:hidden;}

#mainVisual .mainVtxt {position:absolute; top:28vh; left:50%; width:1100px; margin-left:-660px; color:#fff; z-index:50; box-sizing:border-box;}
#mainVisual .mainVtxt b {display: block; padding-bottom: 12px; font-size: 22px; font-weight: 600; color: rgba(255,255,255,0.68); line-height: 1.2; letter-spacing:10px; opacity: 0; filter:alpha(opacity=0); -mox-opacity:0;}
#mainVisual .mainVtxt strong {display:block; font-size:60px; font-weight:300; line-height:1.2; letter-spacing:15px; opacity: 0; filter:alpha(opacity=0); -mox-opacity:0;}
#mainVisual .mainVtxt strong em {font-weight: 700;}
#mainVisual .mainVtxt p {padding-top:40px; font-size:22px; font-weight:300; line-height:32px; opacity: 0; filter:alpha(opacity=0); -mox-opacity:0; -webkit-transform:scale(1.3);transform:scale(1.3);-webkit-filter:blur(10px);filter:blur(10px);}

#mainVisual .mainVtxt.on b {opacity: 1; filter:alpha(opacity=1); -mox-opacity:1; letter-spacing: 2.5px !important; -webkit-transition:all 1.2s 0s;transition:all 1.2s 0s;}
#mainVisual .mainVtxt.on strong {opacity: 1; filter:alpha(opacity=1); -mox-opacity:1; letter-spacing:-1px !important; -webkit-transition:all 1.2s 0s;transition:all 1.2s 0s;}
#mainVisual .mainVtxt.on p {opacity: 1; filter:alpha(opacity=1); -mox-opacity:1; -webkit-transform:scale(1);transform:scale(1);-webkit-filter:blur(0);filter:blur(0);-webkit-transition:all 1.2s 0.6s;transition:all 1.2s 0.6s;}

#mainVisual .mainSlider div {vertical-align:top;}
#mainVisual .mainSlider .list {position:relative; overflow:hidden;}
#mainVisual .mainSlider .ImgArea {position:relative; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover;}
#mainVisual .mainSlider .ImgArea.vis1 { background-image:url('/images/main/mainvisual_01.jpg'); }
#mainVisual .mainSlider .ImgArea.vis2 { background-image:url('/images/main/mainvisual_01.jpg'); }
#mainVisual .mainSlider .ImgArea.vis3 { background-image:url('/images/main/mainvisual_01.jpg'); }
#mainVisual .mainSlider .active-item .ImgArea {animation: mvScale 10s 1;}
#mainVisual .mainSlider .active-item .ImgArea.stop {animation-play-state: paused;}
@keyframes mvScale{
	0%{transform:scale(1)}
	100%{transform:scale( 1.2 );}
}

@media screen and (max-width:640px){
	#mainVisual .mainSlider .ImgArea.vis1 { background-image:url('/images/main/mainvisual_01_m.jpg'); }
	#mainVisual .mainSlider .ImgArea.vis2 { background-image:url('/images/main/mainvisual_01_m.jpg'); }
	#mainVisual .mainSlider .ImgArea.vis3 { background-image:url('/images/main/mainvisual_01_m.jpg'); }
}


#mainVisual .mainControl {margin-top: 70px; opacity: 0; filter:alpha(opacity=0); -mox-opacity:0;}
#mainVisual .mainVtxt.on .mainControl {opacity: 1; filter:alpha(opacity=1); -mox-opacity:1; -webkit-transition:all 1.2s 1.2s;transition:all 1.2s 1.2s;}
#mainVisual .mainControl .paging {display:inline-block; width:70px; vertical-align:middle; white-space:nowrap;}
#mainVisual .mainControl .paging span {font-size: 20px; font-weight: 500; color:rgba(255,255,255,0.4);}
#mainVisual .mainControl .pagingInfo01 {color: #fff !important;}

#mainVisual .mainControl .progress_bar {position:relative; display:inline-block; width:265px; height:2px; background:rgba(255,255,255,0.3); vertical-align:middle;}
#mainVisual .mainControl .progress_bar .progress {position:absolute; top:0; left:0; height:100%; background:#f7f7f7;}
#mainVisual .mainControl .progress_bar .progress.pro-ani{
animation: proBar 5s linear;
-webkit-animation: proBar 5s linear;
-moz-animation: proBar 5s linear;
-ms-animation: proBar 5s linear;
-o-animation: proBar 5s linear;
}
@keyframes proBar{ 	0%{width:0;}	100%{width:100%;} }
-webkit-@keyframes proBar{ 	0%{width:0;}	100%{width:100%;} }
-moz-@keyframes proBar{ 	0%{width:0;}	100%{width:100%;} }
-ms-@keyframes proBar{ 	0%{width:0;}	100%{width:100%;} }
-o-@keyframes proBar{ 	0%{width:0;}	100%{width:100%;} }

#mainVisual .mainControl .play_state {display:inline-block; width:10px; height:14px; margin-left: 10px; background-repeat:no-repeat; background-position:center center; box-sizing:border-box; vertical-align:middle; font-size:0; line-height:0; text-indent:-9999px; cursor:pointer;}
#mainVisual .mainControl .play_state.pause {background-image:url('/images/main/btn_pause.png');}
#mainVisual .mainControl .play_state.play {display:none; background-image:url('/images/main/btn_play.png');}

#mainVisual .Paging {position: relative; display:inline-block; font-size:0; margin-left: 20px; vertical-align:middle;}
#mainVisual .Paging:before {content:''; position: absolute; top: 0; left: 50%; width: 1px; height: 100%; transform:translateX(-50%); background: rgba(255,255,255,0.5);}
#mainVisual .Paging .slick-arrow {display:inline-block; width:8px; height:14px; font-size:0; line-height:0; text-indent:-9999px; cursor:pointer; opacity: 0.5; filter:alpha(opacity=50); -mox-opacity:0.5;}
#mainVisual .Paging .slick-arrow:hover {opacity: 1; filter:alpha(opacity=1); -mox-opacity:1;}
#mainVisual .Paging .slick-arrow.slick-prev {background:url('/images/main/btn_mv_prev.png') no-repeat 0 0; background-size:100%;}
#mainVisual .Paging .slick-arrow.slick-next {margin-left:30px; background:url('/images/main/btn_mv_next.png') no-repeat 0 0; background-size:100%;}

#mainVisual .noticeArea {position: absolute; left: 50%; bottom: 75px; width: 1320px; height: 85px; line-height: 65px; padding: 10px 10px 10px 0; margin-left: -660px; background: rgba(0,0,0,0.3); z-index: 50; border-radius: 10px; overflow: hidden; box-sizing: border-box; transform:translateY(50px); opacity: 0; filter:alpha(opacity=0); -mox-opacity:0;}
#mainVisual .noticeArea .tt {position: relative; float: left; display: block; width: 230px; font-size: 24px; text-align: center; color: #fff;}
#mainVisual .noticeArea .tt:after {content:''; position: absolute; top: 50%; right: 0; width: 1px; height: 24px; background: rgba(255,255,255,0.8); transform:translateY(-50%);}
#mainVisual .noticeArea .tt b {display: inline-block; padding-left: 43px; background: url('/images/main/icon_notice.png') no-repeat 0 center; font-weight: 500;}
#mainVisual .noticeArea .latest_con {float: left; width: calc(100% - 570px); height: 31px; line-height: 31px; margin-top: 18px; padding-left: 50px; box-sizing: border-box; overflow: hidden;}
#mainVisual .noticeArea .noticeControl {float: left; position: relative; margin-top: 15px; margin-left: 30px; width: 14px; height: 37px;}
#mainVisual .noticeArea .noticeControl .slick-arrow {position: absolute; left: 0; display: block; width: 100%; height: 8px; background-repeat: no-repeat; background-position: center top; background-size: 100%; font-size: 0; line-height: 0; text-indent: -9999px; cursor: pointer; opacity: 0.5; filter:alpha(opacity=50); -mox-opacity:0.5;}
#mainVisual .noticeArea .noticeControl .slick-arrow:hover {opacity: 1; filter:alpha(opacity=1); -mox-opacity:1;}
#mainVisual .noticeArea .noticeControl .slick-arrow.slick-prev {top: 0; background-image: url('/images/main/btn_latest_prev.png');}
#mainVisual .noticeArea .noticeControl .slick-arrow.slick-next {bottom: 0; background-image: url('/images/main/btn_latest_next.png');}
#mainVisual .noticeArea .btn_more01 {float: right;}
#mainVisual .noticeArea.on {transform:translateY(0); opacity: 1; filter:alpha(opacity=1); -mox-opacity:1; -webkit-transition:all 1.2s 1.2s;transition:all 1.2s 1.2s;}

/*main contents*/
.fp-section {height: 100vh; background: #fff;}
.fp-tableCell {padding-top: 100px; box-sizing: border-box;}
.mainvisual_section .fp-tableCell {padding-top: 0;}

.main_TitleArea {margin-bottom: 70px; text-align: center; transform:translateY(30px); -webkit-transform:translateY(30px); opacity: 0; filter:alpha(opacity=0); -mox-opacity:0; -webkit-transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out;}
.main_TitleArea h2 {font-size: 54px; font-weight: 700; color: #222; line-height: 1.1; letter-spacing: -1px;}
.main_TitleArea h2 span {position: relative;}
.main_TitleArea h2 span:after {content:''; position: absolute; /*top: 64px;*/ right: -17px; width: 11px; height: 11px; background: #4255be; border-radius: 3px;}
.main_TitleArea.w h2 {color: #fff;}
.main_TitleArea p {padding-top: 20px; font-size: 20px; font-weight: 300; color: #666; line-height: 1.4;}
.fp-section.active .main_TitleArea {transform:translateX(0); -webkit-transform:translateX(0); opacity: 1; filter:alpha(opacity=1); -mox-opacity:1; transition-delay:.2s;-webkit-transition-delay:.2s;}



.section2-bg { background:url("/images/main/section02_bg.jpg") no-repeat center bottom; background-size:cover; }
.main_company .inner {z-index: 50;}
.main_company .company_con {}
.main_company .company_con ul {display:flex; padding-right: 1px;}
.main_company .company_con ul li {width: 25%; padding-left: 1px; box-sizing: border-box; opacity: 0; filter:alpha(opacity=0); -mox-opacity:0; -webkit-transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out;}
.main_company .company_con ul li:nth-child(2n-1) {margin-top: 70px;}
.main_company .company_con ul li:nth-child(2n-1) {transform:translateY(30px); -webkit-transform:translateY(30px);}
.main_company .company_con ul li:nth-child(2n) {transform:translateY(-30px); -webkit-transform:translateY(-30px);}

.main_company .company_con ul li a {display: block;}
.main_company .company_con ul li .ImgArea {-webkit-box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow:0px 5px 20px 0px rgba(0, 0, 0, 0.2); box-shadow:0px 5px 20px 0px rgba(0, 0, 0, 0.2);}
.main_company .company_con ul li .ImgArea img {width: 100%;}
.main_company .company_con ul li .tt {display: block; padding-left: 18px; margin-top: 20px; font-size: 23px; font-weight: 500; color: #222; line-height: 1; opacity: 0.4; filter:alpha(opacity=40); -mox-opacity:0.4; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
.main_company .company_con ul li .tt i {display: inline-block; width: 14px; height: 13px; margin-top: -4px; margin-left: 5px; background: url('/images/common/icon/icon_arrow02.png') no-repeat right center; vertical-align: middle; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
.main_company .company_con ul li:hover .tt {opacity: 1; filter:alpha(opacity=1); -mox-opacity:1;}
.main_company .company_con ul li:hover .tt i {width: 44px;}

.main_company .bgLineArea {position: absolute; top: 0; left: 50%; width: 1320px; height: 100%; transform:translateX(-50%); z-index: 10; opacity: 0; filter:alpha(opacity=0); -mox-opacity:0; -webkit-transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out;}
.main_company .bgLineArea span {position: absolute; top: 0; width: 1px; height: 100%; background: #eee;}
.main_company .bgLineArea .line01 {left: 0;}
.main_company .bgLineArea .line02 {left: 25%;}
.main_company .bgLineArea .line03 {left: calc(50% - 1px);}
.main_company .bgLineArea .line04 {left: calc(75% - 1px);}
.main_company .bgLineArea .line05 {right: 0;}

.main_company.active .company_con ul li {transform:translateY(0); -webkit-transform:translateY(0); opacity: 1; filter:alpha(opacity=1); -mox-opacity:1; transition-delay:.4s; -webkit-transition-delay:.4s;}
.main_company.active .bgLineArea {opacity: 1; filter:alpha(opacity=1); -mox-opacity:1;}


.section3-bg { background:url("/images/main/section03_bg.jpg") no-repeat center; background-size:cover; }
.main_business .main_TitleArea {margin-bottom: 90px;}
.main_business .business_con ul {display:flex; transform:translateY(30px); -webkit-transform:translateY(30px); opacity: 0; filter:alpha(opacity=0); -mox-opacity:0; -webkit-transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out;}
.main_business .business_con ul li {width: 47%; height: 300px; margin-left: 6%; background: #fff url('/images/main/business_con_bg.png') no-repeat left top; background-size: 100%; border-radius: 5px; -webkit-box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.3); -moz-box-shadow:0px 8px 10px 0px rgba(0, 0, 0, 0.3); box-shadow:0px 8px 10px 0px rgba(0, 0, 0, 0.3);}
.main_business .business_con ul li:first-child {margin-left: 0;}
.main_business .business_con ul li a {position: relative; display: block; width: 100%; height: 100%; padding: 10%; box-sizing: border-box;}
.main_business .business_con ul li .tt {display: block; font-size: 34px; font-weight: 500; color: #222; line-height: 1.1;}
.main_business .business_con ul li .btn_more02 {position: absolute; left: 10%; bottom: 22%;}
.main_business .business_con ul li .icon {position: absolute; right: 10%; bottom: 22%; background-repeat: no-repeat; background-position: 0 0; background-size: 100%;}
.main_business .business_con ul li .icon.icon_01 {width: 73px; height: 67px; background-image: url('/images/main/icon_business01.png');}
.main_business .business_con ul li .icon.icon_02 {width: 76px; height: 72px; background-image: url('/images/main/icon_business02.png');}
.main_business .business_con ul li a:hover .btn_more02 {color: #fff;}
.main_business .business_con ul li a:hover .btn_more02 span {background-image: url('/images/common/icon/icon_arrow03_w.png');}
.main_business .business_con ul li a:hover .btn_more02:after {width: 100%;}
.main_business.active .business_con ul {transform:translateY(0); -webkit-transform:translateY(0); opacity: 1; filter:alpha(opacity=1); -mox-opacity:1; transition-delay:.4s; -webkit-transition-delay:.4s;}


.section4-bg { background:url("/images/main/section04_bg.jpg") no-repeat left bottom; background-size:cover; }
.main_cscenter .cscenter_wrap {transform:translateY(30px); -webkit-transform:translateY(30px); opacity: 0; filter:alpha(opacity=0); -mox-opacity:0; -webkit-transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out;}
.main_cscenter .latest_con {position: relative; display: none;}
.main_cscenter .latest_con:first-child {display: block;}
.main_cscenter .latest_con .btn_more {position: absolute; top: -40px; right: 0; padding-right: 18px; background: url('/images/common/icon/icon_arrow05.png') no-repeat right center; font-size: 16px; font-weight: 600; color: #666;}
.main_cscenter.active .cscenter_wrap {transform:translateY(0); -webkit-transform:translateY(0); opacity: 1; filter:alpha(opacity=1); -mox-opacity:1; transition-delay:.4s; -webkit-transition-delay:.4s;}

.fp-viewing-page5 .main_cscenter .main_TitleArea {transform:translateX(0); -webkit-transform:translateX(0); opacity: 1; filter:alpha(opacity=1); -mox-opacity:1;}
.fp-viewing-page5 .cscenter_wrap {transform:translateY(0); -webkit-transform:translateY(0); opacity: 1; filter:alpha(opacity=1); -mox-opacity:1;}


/* Tab Style */
.TabType01 {margin-bottom: 20px;}
.TabType01 li {position: relative; display: inline-block; padding-bottom: 2px; margin-left: 20px; font-size: 26px; font-weight: 400; color: #bcbcbc; cursor: pointer;}
.TabType01 li:first-child {margin-left: 0;}
.TabType01 li.on {font-weight: 500; color: #222;}
.TabType01 li:after {content:''; position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background: #222; border-radius: 5px; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
.TabType01 li.on:after {width: 100%;}

/* 서브비주얼 */
#subVisual {position: relative; height:420px; }
#subVisual .tb {display: table; width: 100%; height: 100%; padding-top: 100px; padding-bottom: 64px; margin: 0 auto; text-align: center; color: #fff; box-sizing: border-box;}
#subVisual .subv-title {display: table-cell; vertical-align: middle;}
#subVisual .subv-title h2 {font-size: 50px; font-weight: 600; line-height: 1;}

.subVsal01 { background:url("/images/common/subvisual_01.jpg") no-repeat 50% top; background-size:cover;}
.subVsal02 { background:url("/images/common/subvisual_02.jpg") no-repeat 50% top; background-size:cover;}
.subVsal03 { background:url("/images/common/subvisual_03.jpg") no-repeat 50% top; background-size:cover;}

/*sub navigation bar*/
#SNB {position: relative; width:100%; height:64px; line-height: 62px; margin-top: -64px; z-index: 10;}
#SNB:before {content:''; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: #fff; border-top: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf; box-sizing: border-box;}
.SNBWrap {position: relative; width:100%; max-width:1200px; margin:0 auto; background: #fff; border: 1px solid #dfdfdf; border-left: none; -moz-border-radius-topright: 6px; -webkit-border-top-right-radius: 6px; border-top-right-radius: 6px; box-sizing: border-box; z-index: 10;}
.SNBWrap:before {content:''; clear:both; display:block; width:0; height:0; font-size:0; line-height:0; visibility:hidden;}
.SNBWrap:after {content:''; clear: both; display: block;}
.SNBWrap div {border-right:1px solid #d1d1d1; box-sizing:border-box;}
.SNBWrap .home {float:left; width:64px; height:62px; border-left:1px solid #d1d1d1; background: #fff; box-sizing: border-box;}
.SNBWrap .home a {display:block; width:100%; height:100%; background:url('/images/common/icon/icon_home.png') no-repeat center center; font-size:0; line-height:0; text-indent:-9999px;}
.SNBWrap .depth {position:relative; float:left; width:240px; z-index:100;}
.SNBWrap .depth span {display:block; padding-right:20px; margin:0 24px; background:url('/images/common/icon/snb_arrow.png') no-repeat right center; font-size: 18px; font-weight:400; color:#666; cursor:pointer; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.SNBWrap .depth span.depthNone {background:none; cursor:default;}
.SNBWrap .depth ul {display:none; position:absolute; top:62px; left:-1px; padding:20px 0; width:100%; border:1px solid #d1d1d1; background:#fff; z-index: 10;}
.SNBWrap .depth ul li {margin-top:15px; line-height:25px;}
.SNBWrap .depth ul li:first-child {margin-top:0;}
.SNBWrap .depth ul li a {display:block; padding:0 24px; font-weight:300; color:#666; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s;}
.SNBWrap .depth ul li a:hover {color:#3f57bc;}

/*sub contents*/
.contentsArea {padding: 120px 0 185px;}

.contentsArea .TitleArea {margin-bottom: 100px; text-align: center;}
.contentsArea .TitleArea h3 {font-size: 48px; font-weight: 600; color: #222; line-height: 1;}

.sectionType01 {display:flex;}
.sectionType01 .ttArea {position: relative; width: 280px;}
.ttArea {margin-bottom: 35px;}
.ttArea h4 {position: relative; font-size: 30px; padding-bottom: 20px; font-weight: 500; color: #222; line-height: 1;}
.ttArea h4:after {content:''; position: absolute; bottom: -2px; left: 0; width: 45px; height: 3px; background: #4562e1;}
.sectionType01 .section_con {width: calc(100% - 280px); box-sizing: border-box;}

.contentsArea .section {padding: 170px 0;}
.contentsArea .section.bg {background: #f5f5f5;}
.contentsArea .Inner_section {padding-top: 120px;}
.contentsArea .Inner_section:first-child {padding-top: 0;}

/* 회사개요 */
.Introdction .Greeting {padding-bottom: 200px;}
.Introdction .Greeting .big_txt {margin-bottom: 40px; line-height: 1.2;}
.Introdction .Greeting .big_txt p {font-size: 30px;}
.Introdction .Greeting .big_txt p  + strong {padding-top: 18px;}
.Introdction .Greeting .big_txt strong {display: block; font-size: 34px; font-weight: 600; color: #222;}
.Introdction .Greeting .big_txt strong b {font-weight: 600;}
.Introdction .Greeting .txt_con p {padding-top: 12px; line-height: 1.6;}
.Introdction .Greeting .txt_con p:first-child {padding-top: 0;}
.Introdction .Greeting .txt_name {font-size:20px; padding-top:30px;}
.Introdction .Greeting .txt_name p {font-family:Allison; font-size:50px;}


.Introdction .Overview .BgArea {width: calc(50% + 660px); height: 523px; margin-top: -300px; background: url('/images/company/introduction_bg.png') no-repeat left top; background-size: cover; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px; border-top-right-radius: 10px;}
.Introdction .Overview .BgArea img {display: none;}
.Introdction .Overview .inner:before {content:''; position: absolute; top: -100px; right: -5px; width: calc(100% + 85px); height: 105px; background: #f5f5f5; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; border-top-left-radius: 10px; z-index: 10;}
.Introdction .Overview .ttArea {padding-top: 10px;}
.Introdction .Overview .big_txt {margin-bottom: 80px; line-height: 1.3;}
.Introdction .Overview .big_txt strong {display: block; font-size: 40px; font-weight: 500; color: #222;}
.Introdction .Overview .big_txt strong b {font-weight: 600;}
.Introdction .Overview .overview_info ul {display:flex;}
.Introdction .Overview .overview_info ul li {width: 28%; margin-left: 8%; padding: 60px 2%; background: #fff; text-align: center; border-radius: 6px; -webkit-box-shadow: 6px 6px 15px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow:6px 6px 15px 0px rgba(0, 0, 0, 0.2); box-shadow:6px 6px 15px 0px rgba(0, 0, 0, 0.2); box-sizing: border-box;}
.Introdction .Overview .overview_info ul li:first-child {margin-left: 0;}
.Introdction .Overview .overview_info ul li .icon {display: inline-block; width: 64px; height: 64px; margin-bottom: 20px; background-repeat: no-repeat; background-position: center center;}
.Introdction .Overview .overview_info ul li .icon.icon_01 {background-image: url('/images/company/icon_overview01.png');}
.Introdction .Overview .overview_info ul li .icon.icon_02 {background-image: url('/images/company/icon_overview02.png');}
.Introdction .Overview .overview_info ul li .icon.icon_03 {background-image: url('/images/company/icon_overview03.png');}
.Introdction .Overview .overview_info ul li b {display: block; font-size: 23px; font-weight: 500; color: #222;}
.Introdction .Overview .overview_info ul li p {padding-top: 10px; line-height: 1.6;}

/* 연력 */
#History {border-top: 1px solid #222;}
#History dl {padding: 35px 20px; border-top: 1px solid #dfdfdf; overflow: hidden;}
#History dl:first-child {border-top: none;}
#History dl:last-child {padding-bottom: 0 !important;}
#History dl dt {float: left; width: 100px; font-size: 28px; font-weight: 600; color: #4255be;}
#History dl dd {float: left; width: calc(100% - 100px);}
#History dl dd ul {margin-top: 8px;}
#History dl dd ul li {position: relative; margin-top: 20px; padding-left: 105px; line-height: 1.4;}
#History dl dd ul li:first-child {margin-top: 0;}
#History dl dd ul li .date {position: absolute; top: 0; left: 0; font-weight: 500; color: #222;}

/* 오시는길 */
#Location {overflow: hidden;}
#Location .AapArea {float: left; width: calc(100% - 355px); padding-right: 4.5%; box-sizing: border-box;}
#Location .AapArea .root_daum_roughmap {width: 100% !important;}

#Location .InfoArea {float: right; width: 355px; font-family: 'Nunito Sans', 'Noto Sans KR' ,'돋움', Dotum, Helvetica, AppleGothic, Sans-serif;}
#Location .InfoArea .tt {position: relative; font-size: 30px; padding-bottom: 20px; font-weight: 500; color: #222; line-height: 1;}
#Location .InfoArea .tt:after {content:''; position: absolute; bottom: -2px; left: 0; width: 45px; height: 3px; background: #4562e1;}
#Location .InfoArea ul {margin-top: 10px;}
#Location .InfoArea ul li {padding: 30px 0 30px 30px; border-bottom: 1px solid #dfdfdf; background-repeat: no-repeat; background-position: left 32px;}
#Location .InfoArea ul li.address {background-image: url('/images/company/icon_address.png');}
#Location .InfoArea ul li.tel {background-image: url('/images/company/icon_tel.png');}
#Location .InfoArea ul li.fax {background-image: url('/images/company/icon_fax.png');}
#Location .InfoArea ul li.mail {background-image: url('/images/company/icon_mail.png');}
#Location .InfoArea ul li b {display: block; font-size: 22px; font-weight: 500; color: #222; line-height: 1;}
#Location .InfoArea ul li p {padding-top: 5px;}

/* Table Style */
.TblType01 {width: 100%; border-top: 1px solid #222;}
.TblType01 tbody th {padding: 15px 30px; background: #f3f6f7; border-bottom: 1px solid #dfdfdf; font-weight: 400; color: #222; text-align: left; box-sizing: border-box; vertical-align: middle;}
.TblType01 tbody td {padding: 15px 30px; border-left: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf; vertical-align: middle;}
.TblType01 + .ImgArea,
.ImgArea + .TblType01 {margin-top: 40px;}

/* 사업개요 */
.BusinessOverView .business_info {background: url('/images/business/business_bg.jpg') no-repeat center top; background-size: cover;}
.BusinessOverView .business_info ul {display:flex;}
.BusinessOverView .business_info li {width: 33.33333333%; text-align: center; color: #fff; line-height: 1.2;}
.BusinessOverView .business_info li .icon {display: inline-block; width: 171px; height: 171px; margin-bottom: 25px; background-repeat: no-repeat; background-position: 0 0; background-size: 100%; vertical-align: top;}
.BusinessOverView .business_info li .icon.icon_01 {background-image: url('/images/business/icon_business01.png');}
.BusinessOverView .business_info li .icon.icon_02 {background-image: url('/images/business/icon_business02.png');}
.BusinessOverView .business_info li .icon.icon_03 {background-image: url('/images/business/icon_business03.png');}
.BusinessOverView .business_info li b {display: block; font-size: 23px; font-weight: 500;}
.BusinessOverView .business_info li p {padding-top: 12px;}
.BusinessOverView .business_info li p span {font-size: 16px;}

.BusinessOverView .business_scale {display:flex; flex-wrap:wrap; margin-top: -80px;}
.BusinessOverView .business_scale li {width: 22.75%; margin-left: 3%; margin-top: 80px; padding: 35px 5px; border-top: 2px solid #666; border-bottom: 1px solid #dfdfdf; box-sizing: border-box;}
.BusinessOverView .business_scale li:nth-child(4n-3) {margin-left: 0;}
.BusinessOverView .business_scale li .num {display: block; padding-bottom: 10px; font-weight: 700; color: #4f65da;}
.BusinessOverView .business_scale li strong {display: block; font-size: 23px; font-weight: 500; color: #222; line-height: 1.4;}
.BusinessOverView .business_scale li p {padding-top: 15px; line-height: 1.2;}

/* 수상태양광 발전설비 개요 */
.business_prd {display:flex; flex-wrap:wrap; margin-top: -70px;}
.business_prd li {width: 22.75%; margin-left: 3%; margin-top: 70px;}
.business_prd li:nth-child(4n-3) {margin-left: 0;}
.business_prd li b {display: block; padding: 15px 10px 0 10px; font-size: 20px; font-weight: 500; color: #222;}


/* 회원단 공통 */
#MemBody {width:100%; padding:0px 0; margin-top:0px; position:relative;}
#MemBody caption {display:none;}
#MemBody textarea { width:100%; height:200px;border:1px solid #ddd; color:#666; overflow-x:hidden; padding:5px; box-sizing:border-box;}

/* 로그인 */
.login #MemBody {padding:50px 0;}
.login #MemBody .login_title {margin-bottom:25px; padding-top:145px; background:url('/images/member/icon_login02.png') no-repeat center 0; text-align:center;}
.login #MemBody .login_title h4 {font-size:36px; font-weight:600; color:#222; letter-spacing:-0.25px;}
.login #MemBody .login_title p {padding-top:20px; font-size:18px; font-weight:300; letter-spacing:-0.2px;}
.login #MemBody .login_con {width:440px; margin:0 auto;}
.login #MemBody .login_con table {width:100%;}
.login #MemBody .login_con table input.text {width:285px; height:38px; background:#f9f9f9;}
.login #MemBody .login_con .login_util {border-top:1px solid #bfbfbf; margin-top:20px; padding-top:20px; overflow:hidden;}
.login #MemBody .login_con .login_util ul {float:left;}
.login #MemBody .login_con .login_util ul li {display:inline-block; padding-left:11px; margin-left:10px; background:url('/images/member/login_gap.gif') no-repeat 0 center; font-size:14px; letter-spacing:-0.2px; line-height:30px;}
.login #MemBody .login_con .login_util ul li:first-child {padding-left:0; margin-left:0; background:none;}
.login #MemBody .login_con .login_util ul li:hover a {text-decoration:underline;}
.login #MemBody .login_con .login_util .btn_black {float:right;}
.login .save {margin-top:-3px; margin-right:6px;}

/* 회원가입 - 약관동의 */
#MemBody.join_agree .info_check_box {padding:30px 20px; border:1px solid #cccccc; background:#f3f3f3; text-align:center;}
#MemBody.join_agree .join_agree_box {margin-top:30px;}
#MemBody.join_agree .info_check_box input.mem_name {width:100px;}
#MemBody.join_agree .info_check_box input.mem_email {width:200px;}
#MemBody.join_agree .join_agree_box .title {position:relative; display:block; margin-bottom:10px; padding-left:15px; font-size:17px;}
#MemBody.join_agree .join_agree_box .title:before {content:''; display:block; position:absolute; top:50%; left:0; width:5px; height:18px; margin-top:-9px; background:#977b5d;}
#MemBody.join_agree .join_agree_box .agree_check {padding:10px; background:#f5f5f5;}

/* 아이디/비번 찾기 */
#findIdpw {overflow:hidden;}
#findIdpw h4 {margin-bottom:20px; font-size:18px; font-weight:600; text-align:left; color:#222;}
#findIdpw .over {overflow:hidden;}
#findIdpw .find { display:inline-block; width:440px; height:260px; background:#f5f5f5; padding:40px 50px; border:1px solid #cfcfcf;}
#findIdpw .find p {padding-bottom:20px; margin-bottom:20px; border-bottom:1px dashed #c3c3c3; font-size:15px; color:#393939; line-height:22px; letter-spacing:-0.8px;}
#findIdpw .find p .blue {text-decoration:underline;}
#findIdpw .findTable {width:100%;}
#findIdpw .findTable th, 
#findIdpw .findTable td {padding:2px 2px;}
#findIdpw .findTable td input.text {width:310px; height:40px;}
#findIdpw .btn_idpw01 {width:104px; height:88px; line-height:88px;}
#findIdpw .btn_idpw02 {width:104px; height:134px; line-height:134px;}
#findIdpw.idpw_result .find {display:block; width:auto; height:auto; margin:0 auto; text-align:center;}
#findIdpw.idpw_result .find {padding-bottom:20px;}
#findIdpw.idpw_result .btnArea {width:280px; margin:0 auto;}

/*개인정보 / 이용약관*/
.rule-txt-area { max-width:1100px; width:100%; margin:0 auto 0px; }
.rule-txt-area textarea { width:100%; height:500px;  padding:10px 15px; border:1px solid #ddd; box-sizing:border-box; font-size:16px; color:#333; font-weight:400; line-height:1.5;}	
.rule-txt-area .rul-btn-box { margin-top:50px; text-align:center;  }

@media screen and (max-width:640px){
	.rule-txt-area textarea { font-size:14px; }
}


/*전자결제(pay)*/
.pay {background:#fff; width:94%; padding:3%; margin-bottom:0px; margin-left:0; margin-right:0; margin-top:0;}
.pay h3 {position:relative; font-size:22px; margin-bottom:20px;  padding-left:15px; font-weight:600; color:#222;}
.pay h3:before {content:''; display:block; position:absolute; top:50%; left:0; width:5px; height:20px; margin-top:-10px; background:#977b5d;}
.pay h4 {font-size:16px; margin-bottom:10px; color:#222;}
.pay .mgB30 {margin-bottom:30px;}
.pay #Board .privacy .textarea {font-size:13px; line-height:20px;}
.pay .btnArea {text-align:center; margin-top:25px}

/*foot*/
.footer_section .fp-tableCell {padding-top: 0;}

#foot {width:100%; background:#222;}
#foot .inner {padding-top: 80px; padding-bottom: 80px;}
#foot .f_logo {float: left; width: 260px;}
#foot .footCnt {float: left; width: calc(100% - 420px); padding-left: 50px; font-size: 15px; color: #999; box-sizing: border-box;}
#foot .footCnt address .bul {display: inline-block; margin: 0 15px; width: 1px; height: 12px; margin-top: -2px; background: #818181; vertical-align: middle;}
#foot .footCnt .copy {padding-top: 6px; font-size: 13px;}
#foot .footCnt .copy a {color: #999;}

#foot .erp_tt {width: 152px; height: 40px; border: 1px solid #4255be; font-size: 14px; font-weight: 400; text-align: center; color: #fff; line-height: 38px; border-radius: 5px; cursor: pointer; background-color:#4255be; float:left;}
#foot .erp_tt span {display: inline-block; padding-right: 25px; background: url('/images/common/icon/lang_arrow_w.png') no-repeat right 48%;}
#foot .erp_tt a {font-weight: 400; color: #fff;}
#foot .erp_tt a:hover {font-weight: 400; color: #fff;}

#foot .btn_top {position: absolute; top: -33px; right: 0; width: 65px; height: 65px; background: url('/images/common/btn/btn_top.png') no-repeat 0 0; background-size: 100%; font-size: 0; line-height: 0; text-indent: -9999px; z-index: 10;}

#wrap.main #foot .btn_top {transform:translateY(30px); -webkit-transform:translateY(30px); opacity: 0; filter:alpha(opacity=0); -mox-opacity:0; -webkit-transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out;}
.fp-viewing-page5 #wrap.main #foot .btn_top {transform:translateX(0); -webkit-transform:translateX(0); opacity: 1; filter:alpha(opacity=1); -mox-opacity:1;}


/* 관리자 로그인 */
.divbox {display:none; left:50%; position:absolute;	z-index: 1;}
.divbox .text {width:150px;}
div#box {width:400px; margin-left:-200px; text-align:center; background-color:#fff; position:fixed; left:50%; bottom:300px; z-index:9999; padding:40px 30px 20px 30px; border:5px solid #eee;}
div#box .login_center{overflow:hidden; padding:30px 0;  border-top:1px solid #222;  border-bottom:1px solid #bbb;}
div#p_input {text-align:center;}
div#p_input span.label {display:inline-block; width:90px; padding-right:10px; text-align:right;}
div.login_foot {clear:both; text-align:center; margin-top:20px;}






/*===============================================================*/
/*======================= PC 1540 px ~ =======================*/
/*===============================================================*/
@media only screen and (max-width:1540px){

.inner {width: 100%; max-width: 100%; padding: 0 6%; box-sizing: border-box;}


/* header */
#header .headerWrap {padding: 0 6%;}

/* topmenu */
#topmenu {transform:translateX(-35%);}
#topmenu .menu > li {margin-left: 50px;}

/* 메인비주얼 */
#mainVisual .mainVtxt,
#mainVisual .noticeArea {left: 6%; width: 88%; margin-left: 0; box-sizing: border-box;}
#mainVisual .mainVtxt p {padding-top: 30px;}
#mainVisual .mainControl {margin-top: 40px;}
#mainVisual .noticeArea {bottom: 40px;}

/*main contents*/
.main_TitleArea {margin-bottom: 50px;}
.main_business .main_TitleArea {margin-bottom: 60px;}

/* foot */
#foot .btn_top {right: 6%;}

}



/*===============================================================*/
/*======================= PC 1400 px ~ =======================*/
/*===============================================================*/
@media only screen and (max-width:1400px){

.inner {padding: 0 4%;}

/* header */
#header .headerWrap {padding: 0 4%;}

/* foot */
#foot .btn_top {right: 4%;}

}



/*===============================================================*/
/*======================= PC 1280 px ~ =======================*/
/*===============================================================*/
@media only screen and (max-width:1280px){

/* topmenu */
#topmenu .menu > li {margin-left: 30px;}

/* 메인비주얼 */
#mainVisual .mainVtxt,
#mainVisual .noticeArea {left: 4%; width: 92%;}











}