@charset "utf-8";
/* *******************************************************
 * filename : main_responsive.css
 * description : 메인 레이아웃 및 컨텐츠 반응형 CSS
 * date : 2020-11-25
******************************************************** */

/* ******************  공통 :: 레이아웃 ********************** */
@media all and ( max-height: 600px ){
	/* 공통 :: 레이아웃 */
	#fullpage .section:not(#mainVisual) {height:auto !important;}
	#fullpage .fp-section:not(#mainVisual) .fp-tableCell{padding-top:0; height:0 !important;}
}
/* ******************  메인비주얼 ********************** */
@media all and (max-width:1740px){
	.main-scroll-icon {right:32px;}
	.main-visual-play-btn {right:30px;}
}
@media all and (min-width:1025px) and (max-height:700px){
	.main-visual-txt .main-visual-txt2 {font-size:50px;}
	.main-visual-utile {bottom:50px;}
}
@media all and (max-width:1024px){
	.main-visual-txt .main-visual-txt1 {font-size:34px; margin-bottom:10px;}
	.main-visual-txt .main-visual-txt2 {font-size:16px;}
	.main-visual-utile {height:25px; bottom:30px;}
	.main-visual-play-btn , .main-scroll-icon {display:none;}
	.main-visual-paging .paging-item {padding-right:10px;}
	.main-visual-paging .paging-item .tit {font-size:12px; padding-bottom:5px;}
}
/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
@media all and ( max-width: 1024px ){
	/* 공통 :: 타이틀 */
	.main-tit-box .main-tit {font-size:35px;}
	.main-tit-box .main-sub-tit{font-size:13px;}
	/* 공통 :: View more 버튼 */
	.view-more-btn { width:110px; height:27px; font-size:12px;  line-height:27px; }
	.view-more-btn:before {width: 27px; height:27px; }
	.view-more-btn i {width:27px;font-size:15px; line-height:27px; margin-right:10px;}
}

/* -------- 메인 컨텐츠 :: About -------- */
@media all and (min-width:1025px) and (max-height:700px){  /* 가로 1024이상  높이 700이하일때 */
	.main-about-con .right-con-item a .txt-box .view-more-btn {margin-top:30px;}
}
@media all and (min-width:1025px) and ( max-height: 600px ){  /* 높이 600에서 풀페이지 해제 */
	.main-about-con {padding-top:0;}
	.main-about-con .img-wrap {padding-top:92.7%; height:auto;}
}
@media all and (max-width:1024px) {
	.main-about-con {display:block; padding-top:80px;}
	.main-about-con .left-con {width:100%; height:40%; }
	.main-about-con .left-con .txt-box {top:10.5%; padding:0 15px;}
	.main-about-con .left-con .txt-box .view-more-btn {margin-top:10px;}
	.main-about-con .right-con {width:100%; height:60%; }
	.main-about-con .right-con-item a .txt-box {padding:0 15px;}
	.main-about-con .right-con-item a .txt-box .tit {font-size:22px;}
	.main-about-con .right-con-item a .txt-box .txt {font-size:13px; margin-top:5px;}
	.main-about-con .right-con-item a .txt-box .view-more-btn {margin-top:20px;}
}
@media all and (max-width:480px){
	.main-about-con {padding-top:60px;}
}
@media all and (max-width:1024px) and ( max-height: 600px ) {
	.main-about-con {padding-top:0;}
	.main-about-con .img-wrap,
	.main-about-con .left-con,
	.main-about-con .right-con{height:auto;}
	.main-about-con .left-con .img-wrap {padding-top:62.5%;}
	.main-about-con .right-con-item .img-wrap {padding-top:100%;}
}
/* -------- 메인 컨텐츠 :: Business -------- */
@media all and (min-width:1025px) and (max-height:700px){
	.main-business-con .main-business-list .tit-box .tit {position:relative; padding-right: 30px; font-size:24px; margin-bottom:15px;}
	.main-business-con .main-business-list .tit-box .tit:after {content:"\e93f"; position:absolute; right:0; top:50%; margin-top: -10px; font-size:20px; font-weight:400; font-family:'xeicon' !important;}
	.main-business-con .main-business-list .tit-box .view-more-btn {display:none;}
}
@media all and (min-width:1025px) and ( max-height: 600px ){  /* 높이 600에서 풀페이지 해제 */
	.main-business-con {margin:110px 0; }
}
@media all and (max-width:1024px){
	.main-business-con {margin-top:80px;}
	.main-business-con .main-tit-box {position:static; margin-bottom:20px;}
	.main-business-con .main-business-list {margin:0; flex-wrap:wrap;}
	.main-business-con .main-business-list li {width:50%; margin:0;}
	.main-business-con .main-business-list li.bottom {margin-top:0;}
	.main-business-con .main-business-list li dl {display:flex; align-items: center; }
	.main-business-con .main-business-list li dl dt,
	.main-business-con .main-business-list li dl dd {width:50%;}
	.main-business-con .main-business-list .tit-box {padding:0 10%; }
	.main-business-con .main-business-list .tit-box .tit {font-size: 22px; margin-bottom:15px;}
}
@media all and (max-width:1024px) and (min-width:801px){
	.main-business-con .main-business-list li:nth-child(3) dl, 
	.main-business-con .main-business-list li:nth-child(4) dl { flex-direction: row-reverse;}
}
@media all and (max-width:800px)  {
	#mainBusinessCon .fp-tableCell {vertical-align:top;}
	#mainBusinessCon .area-box {height:100%; margin:0 -15px;}
	.main-business-con {height:100%;}
	.main-business-con .main-tit-box {padding:20px 15px; margin-bottom:0;}
	.main-business-con .main-tit-box .main-tit {font-size:40px;}
	.main-business-con .main-business-list {height:calc(100% - 160px);}
	.main-business-con .main-business-list li {width:100%; height:25%;}
	.main-business-con .main-business-list li a {display:block; height:100%;}
	.main-business-con .main-business-list li dl {height:100%;}
	.main-business-con .main-business-list li dl dt {height:100%;}
	.main-business-con .main-business-list li .img-wrap {height:100%; background:center no-repeat; background-size:cover !important; }
	.main-business-con .main-business-list li .img-wrap img {display:none;}
	.main-business-con .main-business-list li:nth-child(1) .img-wrap {background-image:url("/images/main/main_business_img_01.jpg");}
	.main-business-con .main-business-list li:nth-child(2) .img-wrap {background-image:url("/images/main/main_business_img_02.jpg");}
	.main-business-con .main-business-list li:nth-child(3) .img-wrap {background-image:url("/images/main/main_business_img_03.jpg");}
	.main-business-con .main-business-list li:nth-child(4) .img-wrap {background-image:url("/images/main/main_business_img_04.jpg");}
	.main-business-con .main-business-list li:nth-child(2) dl, 
	.main-business-con .main-business-list li:nth-child(4) dl { flex-direction: row-reverse;}
}
@media all and (max-width:1024px) and ( max-height: 600px ) {
	.main-business-con {margin-top:40px;}
	.main-business-con .main-business-list {height:calc(100% - 120px);}
	.main-business-con .main-business-list li .img-wrap {background:none !important;}
	.main-business-con .main-business-list li .img-wrap img {display:block;}
}

/* -------- 메인 컨텐츠 :: IR&NEWS -------- */
@media all and (min-width:1025px) and (max-height:700px){	
	.main-ir-con {margin-top:3%;}
	.main-news-con .main-news-bbs-con .tit-box {margin-bottom:2%;}
	.main-news-con .main-news-bbs-con .main-bbs-list .txt  {display:none;}
}
@media all and (min-width:1025px) and ( max-height: 600px ) {
	.main-ir-news-con {padding-bottom:110px;}
}
@media all and (max-width:1366px){
	.main-ir-con .ir-info-left .tit {margin-right:3.76%;}
	.main-ir-con .ir-info-left .tit span {margin-left:15px;}
	.main-ir-con .ir-info-left .cur-price {font-size:50px; padding-left:50px;}
}
@media all and (max-width:1024px){
	.main-ir-news-con {margin-top:80px;}
	.main-ir-con {display:block;}
	.main-ir-con .ir-info-left {display:flex; width:100%; align-items: center;}
	.main-ir-con .ir-info-left > div {width:50%; padding:10px 15px 10px 9.05%; -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	 box-sizing: border-box; }
	.main-ir-con .ir-info-left .tit-box {width:50%;}
	.main-ir-con .ir-info-left .tit {margin-right:0; font-size: 22px;}
	.main-ir-con .ir-info-left .tit span {font-size:16px; margin-left:5px;}
	.main-ir-con .ir-info-left .cur-price { font-size:30px; padding-left:40px;}
	.main-ir-con .ir-info-left .cur-price:before {background-size:auto 19px; width:30px; height:19px; margin-top:-9.5px;}
	.main-ir-con .ir-info-right {display:block; width:100%; padding-right:0; }
	.main-ir-con .ir-info-right .inner {display:flex; width:100%; flex-wrap:wrap; align-items: center; border-top:1px solid rgba(255,255,255,0.3); border-bottom:1px solid rgba(255,255,255,0.3); padding:30px 0;}
	.main-ir-con .ir-info-right .ir-info-item {width:50%; margin:0; padding:10px 9.05%; font-size:15px; -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	 box-sizing: border-box;}
	.main-ir-con .ir-info-right .btn-wrap {position:static; margin-top:0; display:block; margin:25px auto 0; width:110px;}
	
	.main-news-con {margin-top: 25px;}
	.main-news-con .main-news-bbs-con {padding:25px 20px; margin-top:0;}
	.main-news-con .main-news-bbs-con .tit-box {padding:0;}
	.main-news-con .main-news-bbs-con .tit-box .tit {font-size:17px;}
	.main-news-con .main-news-bbs-con .tit-box .more-btn {font-size:19px;}
	.main-news-con .main-news-bbs-con .main-bbs-list li {width:100%;}
	.main-news-con .main-news-bbs-con .main-bbs-list li:nth-child(2) {display:none;}
	.main-news-con .main-news-bbs-con .main-bbs-list li a {padding:0 0;}
	.main-news-con .main-news-bbs-con .main-bbs-list .tit {font-size:15px;}
	.main-news-con .main-news-bbs-con .main-bbs-list .txt {font-size:13px; margin-top:10px;}
}
@media all and (max-width:1024px) and (max-height:700px){	
	.main-ir-con .ir-info-right .inner {padding:15px 0}
	.main-news-con {margin-top:15px;}
	.main-news-con .main-news-bbs-con .main-bbs-list .txt  {display:none;}
}
@media all and (max-width:480px){
	.main-ir-news-con {margin-top:60px;}
	.main-ir-con .ir-info-left > div {padding:10px 5px 10px 15px;}
	.main-ir-con .ir-info-right .ir-info-item {padding:10px 15px;}
}
@media all and (max-width:1024px) and ( max-height: 600px ) {
	.main-ir-news-con {padding-bottom:80px;}
}
/* -------- 메인 컨텐츠 :: CUSTOMER -------- */
@media all and (min-width:1025px) and (max-height:700px){	
	.main-customer-con .main-inquiry-item a .txt-box .tit {margin-bottom: 9%;}
}
@media all and (min-width:1025px) and ( max-height: 600px ) {
	.main-customer-con {padding-top:0;}
	.main-customer-con .left-con {padding:110px 0;}
}
@media all and (max-width:1024px){
	#mainCustomerCon .fp-tableCell {vertical-align:top;}
	.main-customer-con {padding-top:80px;}
	.main-customer-con .left-con .main-customer-slide-tab li {margin:10px 0;}
	.main-customer-con .left-con .main-customer-slide-tab button {font-size: 22px; padding-bottom:10px; padding-right:30px;}
	.main-customer-con .left-con .main-customer-slide-tab button:after {width:30px; background-size:30px auto;   background-position: 0 5px;}
	.main-customer-con .right-con .info-slide-box .tit {font-size:14px;}
	.main-customer-con .right-con .info-slide-box .txt {font-size:17px; margin-top:5px;}
	.main-customer-con .main-inquiry-item a .txt-box .tit {font-size:22px;}
}
@media all and (max-width:800px){
	.main-customer-con {display:block;}
	.main-customer-con .left-con {width:100%; height:43%; }
	.main-customer-con .left-con .main-tit-box {text-align:center; margin-bottom:40px;}
	.main-customer-con .left-con .inner-box {padding:0 25px; }
	.main-customer-con .left-con .main-customer-slide-tab li {margin:5px 0;}
	.main-customer-con .left-con .main-customer-slide-tab button:before {height:2px;}
	.main-customer-con .right-con {width:100%; height:57%; }
	.main-customer-con .right-con .info-slide-box a {padding:0 25px;}
	.main-customer-con .right-con .info-slide-box .item {margin-top:10px;}
	.main-customer-con .main-inquiry-item a .inner-box {padding:0 25px;}
	.main-customer-con .main-inquiry-item a .txt-box .tit {margin-bottom:9%}
}
@media all and (max-width:1024px) and (max-height:700px){	
	.main-customer-con .left-con {height:30%; }
	.main-customer-con .right-con {height:70%; }
	.main-customer-con .left-con .main-customer-slide-tab {display:none;}
}
@media all and (max-width:480px){
	.main-customer-con .right-con .info-slide-box .txt {font-size:14px; }
}
@media all and (max-width:1024px) and ( max-height: 600px ) {
	.main-customer-con {height:auto; padding-top:0;}
	.main-customer-con .left-con {height:auto;}
	.main-customer-con .right-con {height:auto;}
	.main-customer-con .right-con .info-slide-box a {padding:25px;}
	.main-customer-con .right-con .img-wrap {height:100%; }
	.main-customer-con .right-con .right-con-item {height:auto;}
	.main-customer-con .main-inquiry-item a .inner-box {padding:60px 25px;}
	.main-customer-con .main-inquiry-item a .img-wrap {height:100%; padding-top:0;}
}
@media all and (max-width:800px) and ( max-height: 600px ) {
	.main-customer-con {padding-top:40px;}
}