/* ************ 메인페이지 스타일 ************ */

@media screen and (min-width:1367px) {
	
	
	/* 메인 첫 섹션(영상화면) */
	.main .video_wrap {width:100%; height:100vh; position : relative; overflow : hidden;}
	.main .video_wrap:before { content:""; position:absolute; left:0; top:0; width:100%; height:100vh; background:rgba(0,0,0,0); z-index : 2;}
	.main .video_wrap > img { position : absolute; width : 100%; height : 100%; object-fit : cover; }
	.main .video_wrap .cont_wrap { display : flex; justify-content : space-between; max-width : 90%; margin : 0 5%; padding-top : 27vh; position : relative; z-index : 3; height : 82vh; gap : 40px; }
	.main .video_wrap .left { display : flex; flex-direction : column; justify-content : space-between; align-items : start; }
	.main .video_wrap .left .tit { color : #fff; }
	.main .video_wrap .left .tit p { font-size : 1.3vw; line-height : 1.2; font-weight : 600; margin-bottom : 2vh; }
	.main .video_wrap .left .tit h3 { font-size : 4.9vw; color : #fff; font-weight : 800; }
	.main .video_wrap .left > a { padding : 22px 25px 22px 25px; border-radius : 10px; font-size : 18px; font-weight : 600;
	background-color : #fff; position: relative; z-index: 1; -webkit-transition: all 0.4s;-moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; overflow : hidden;}
	.main .video_wrap .left > a img { margin-left : 10px; }
	.main .video_wrap .left > a:after { content: ""; width: 0%; height: 100%;
    top: 0; position: absolute; left: 0; -webkit-transition: all 0.4s;-moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; background: #0072ff;}
	.main .video_wrap .left > a:hover { color : #fff;  }
	.main .video_wrap .left > a:hover:after { width: 100%; z-index: -1; }
	.main .video_wrap .right { display : grid; grid-template-columns : repeat(3,1fr); gap : 10px;}
	.main .video_wrap .right article { display : flex; flex-direction : column; justify-content : space-between; border-radius : 1rem; position : relative;  }
	.main .video_wrap .right article:before { content : ""; display : block; width : 140px; height : 30px; position : absolute; top : -4vh; left : 50%; transform : translateX(-50%); border-top-left-radius : 15px; border-top-right-radius : 15px; }
	.main .video_wrap .right article:nth-of-type(1) { background : #0d3bd7; }
	/*.main .video_wrap .right article:nth-of-type(1):before { background : url(../images/main/battery_spot1.png) no-repeat center;  }*/
	.main .video_wrap .right article:nth-of-type(1):before { background : #0d3bd7;  }
	.main .video_wrap .right article:nth-of-type(2) { background : #0072ff; }
	/*.main .video_wrap .right article:nth-of-type(2):before { background : url(../images/main/battery_spot2.png) no-repeat center;  }*/
	.main .video_wrap .right article:nth-of-type(2):before { background : #0072ff;  }
	.main .video_wrap .right article:nth-of-type(3) { background : #009cff; }
	/*.main .video_wrap .right article:nth-of-type(3):before { background : url(../images/main/battery_spot3.png) no-repeat center;  }*/
	.main .video_wrap .right article:nth-of-type(3):before { background : #009cff;  }
	.main .video_wrap .right article .cont { padding: 10vh 20px 3vh 50px; }
	.main .video_wrap .right article .cont h3 { font-size : 36px; font-weight : 600; color : #fff; margin-bottom : 2vh;  }
	.main .video_wrap .right article .cont ul li a { font-size : 18px; color : #fff; font-weight : 500; padding-left : 15px; margin-bottom : 5px; transition : 0.5s;  }
	
	.main .video_wrap .right article .cont ul li { position : relative; transition : all 0.3s;  }
	.main .video_wrap .right article .cont ul li:before { content : ""; display : block; width : 5px; height : 2px; background : #fff; position : absolute; left : 2px; top : 12px; margin-right : 0; transition : all 0.3s; }
	.main .video_wrap .right article .cont ul li:hover { transform : translate(-5px); }
	.main .video_wrap .right article .cont ul li:hover:before { left : 2px; animation-duration : 0.5s; animation-iteration-count : infinite; animation-timing-function : ease-in-out; }
	.main .video_wrap .right article .cont ul li:last-child a { margin-bottom : 0; }
	.main .video_wrap .right article img { border-radius : 1rem; margin : 0 20px 20px 20px; width : 87%;}
	
	.popVideo { display: none; }
	.popVideo iframe { aspect-ratio: 1/.56; width: 100%; max-width: 1200px;
    background: #000; }
	.popVideo.on { z-index: 999999; position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0,.8); display: flex; justify-content: center; align-items: center; padding: 10vw; }
	.popVideo button { position: absolute; right: 20px; top: 20px;
    display: block; padding: 15px 30px; font-size: 14px; color: #fff;
    line-height: 1; letter-spacing: 3px; font-weight: 600; background: #000;
    border: 1px solid #fff; border-radius : 5px;  }
	
	/* 메인 두번째 섹션(영상화면) */
	.main .sliderV2 {width:100%; height:100vh;}
	.main .sliderV2 .sliderObj {height:100% !important;}
	.main .sliderV2 .sliderObj>li {transform:scale(1.1)}
	.main .sliderV2 .sliderObj>li:before {content:""; position:absolute; left:0; top:0; width:100%; height:100vh; background:rgba(0,0,0,.2);}
	.main .sliderV2 .sliderObj>li>div {position:relative;}
	.main .sliderV2 .sliderObj>li.on {transform:scale(1)}
	.main .sliderV2 .sliderButton {display:none;}
	.main .sliderV2 .sliderObj>li:before {content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.3);}
	.main .sliderV2 .txt {
	position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
	text-align:center; color:#fff; font-size:21px; 
	font-weight : 200; width : 100%; }
	.main .sliderV2 .txt h3 {font-size:3.7vw; font-weight: 800; line-height:1.4;}
	
	/* 메인 세번째 섹션(뉴스 & About BCC) */
	
	.main .bcc-wrap { position : relative; }
	.main .bcc-wrap .bcc_cont { display : grid; grid-template-columns : 50% 50%; margin : 0 5%; padding : 13vh 0; max-width : 90%; }
	.main .bcc-wrap .about_bg { position : absolute; width : 50%; height : 100%; right :0;top : 0; background : url(../images/main/main_about_bg.webp) no-repeat center 85%; background-color : #f4f5f9; z-index : -1;}
	
	/* News */
	.main .bcc-wrap .bcc_cont .news { padding-right : 13%;}
	.main .bcc-wrap .bcc_cont .news .tit { display : flex; justify-content : space-between; align-items : center; margin-bottom : 9vh; }
	.main .bcc-wrap .bcc_cont .news .tit h3 { color : #2145bf; font-size : 48px; font-weight : 800;  }
	.main .bcc-wrap .bcc_cont .news .tit .news_btn { display : flex;  }
	.main .bcc-wrap .bcc_cont .news .tit .news_btn a { display : block; font-size : 18px; font-weight : 800; position : relative; }
	.main .bcc-wrap .bcc_cont .news .tit .news_btn a:hover { color : #2145bf; }
	.main .bcc-wrap .bcc_cont .news .tit .news_btn a:nth-of-type(1) { padding-right : 40px;}
	.main .bcc-wrap .bcc_cont .news .tit .news_btn a:nth-of-type(1):after { 
	content : ""; display : block; width : 1px; height : 14px; background : #c7c7c7; position : absolute; top : 6px; right : 20px; }
	.main .bcc-wrap .bcc_cont .news .tit .news_btn > div { }
	
	.main .bcc-wrap .bcc_cont .news .con article+article {border-top : 1px solid #e8e8e8; padding-top : 3vh; margin-top : 3vh;}	
	.main .bcc-wrap .bcc_cont .news .con article .headline {margin-bottom : 1vh;}
	.main .bcc-wrap .bcc_cont .news .con article dt { font-size : 24px; font-weight : 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
	.main .bcc-wrap .bcc_cont .news .con article dd { font-size : 18px; font-weight : 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color : #666;}
	.main .bcc-wrap .bcc_cont .news .con article p { font-size : 15px; font-weight : 600;}
	.main .bcc-wrap .bcc_cont .news .con article p span { color : #2145bf; margin-left : 2%; }
	.main .bcc-wrap .bcc_cont .about { padding-left : 13%; } 
	
	/* About */
	.main .bcc-wrap .bcc_cont .about h3 { color : #2145bf; font-size : 48px; font-weight : 800; margin-bottom : 9vh;  }
	.main .bcc-wrap .bcc_cont .about .btn-wrap { display : grid; grid-template-columns : repeat(4,1fr); gap : 3%; margin-bottom : 5vh;}
	.main .bcc-wrap .bcc_cont .about .btn-wrap div { text-align : center; }
	.main .bcc-wrap .bcc_cont .about .btn-wrap a { display: flex; justify-content: center; align-items: center; padding: 27% 26%;
	background: #fff; box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px; border-radius: 1rem; transition : all 0.3s; }
	.main .bcc-wrap .bcc_cont .about .btn-wrap a:hover { background : #2145bf; }
	.main .bcc-wrap .bcc_cont .about .btn-wrap a div img { margin-bottom : 1vh; }
	.main .bcc-wrap .bcc_cont .about .btn-wrap a:hover div img { filter: invert(1); }
	.main .bcc-wrap .bcc_cont .about .btn-wrap a div span { display : block; font-size : 20px; font-weight : 600; color : #2145bf; }
	.main .bcc-wrap .bcc_cont .about .btn-wrap a:hover div span { color : #fff; }
	.main .bcc-wrap .bcc_cont .about > p { font-size : 18px; color : #666; }
}



/* ************************ 태블릿 (~1366) ************************ */
@media screen and (max-width:1366px) {
	
	/* 메인 첫 섹션(영상화면) */
	.main .video_wrap { position : relative; width:100%; height:100vh; min-height:450px; overflow : hidden; }
	.main .video_wrap:before { content:""; position:absolute; left:0; top:0; width:100%; height:100vh; background:rgba(0,0,0,0); z-index : 2;}
	.main .video_wrap > img { position: absolute; top: 0; width: 100%;
    height: 100vh; object-fit: cover; }
	.main .video_wrap .cont_wrap { display : flex; justify-content : space-between; margin : 0 30px; padding-top : 9vh; position : relative; z-index : 3; height : auto; flex-direction : column; gap : 7vh; }
	.main .video_wrap .left { display : flex; flex-direction : column; justify-content : space-between; align-items : center; gap : 3vh; }
	.main .video_wrap .left .tit { color : #fff; text-align : center; }
	.main .video_wrap .left .tit p { font-size : 20px; line-height : 1.2; font-weight : 600; margin-bottom : 2vh; }
	.main .video_wrap .left .tit h3 { font-size : 60px; color : #fff; font-weight : 800; }
	.main .video_wrap .left > a { padding: 14px 16px 12px 16px;
    border-radius: 10px; font-size: 16px; font-weight: 600;
    background-color: #fff; background-size: 24px; overflow : hidden;}
	.main .video_wrap .left > a img { margin-left : 10px;}
	.main .video_wrap .left > a:after { content: ""; width: 0%; height: 100%;
    top: 0; position: absolute; left: 0; -webkit-transition: all 0.4s;-moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; background: #0072ff; transform:rotate(0.03deg);}
	.main .video_wrap .left > a:hover { color : #fff; transform : translateY(-0px); }
	.main .video_wrap .left > a:hover:after { width: 100%; z-index: -1; }
	.main .video_wrap .right { display : grid; grid-template-columns : repeat(3,1fr); gap : 10px;}
	.main .video_wrap .right article { display : flex; flex-direction : column; justify-content : space-between; border-radius : 1rem; }
	.main .video_wrap .right article:nth-of-type(1) { background : #0d3bd7; }
	.main .video_wrap .right article:nth-of-type(2) { background : #0072ff; }
	.main .video_wrap .right article:nth-of-type(3) { background : #009cff; }
	.main .video_wrap .right article .cont { padding: 5vh 20px 3vh 35px; }
	.main .video_wrap .right article .cont h3 { font-size : 26px; font-weight : 600; color : #fff; margin-bottom : 2vh;  }
	.main .video_wrap .right article .cont ul li a { font-size : 18px; color : #fff; font-weight : 500; padding-left : 15px; margin-bottom : 5px; transition : 0.5s; }
	

	.main .video_wrap .right article .cont ul li { position : relative; transition : all 0.3s;  }
	.main .video_wrap .right article .cont ul li:before { content : ""; display : block; width : 5px; height : 2px; background : #fff; position : absolute; left : 2px; top : 12px; margin-right : 0; transition : all 0.3s; }
	.main .video_wrap .right article .cont ul li:hover { transform : translate(-5px); }
	.main .video_wrap .right article .cont ul li:last-child a { margin-bottom : 0; }
	.main .video_wrap .right article img { border-radius : 1rem; margin: 20px auto; width: 88%;}
	
	.popVideo { display: none; }
	.popVideo iframe { aspect-ratio: 1/.56; width: 100%; max-width: 1200px;
    background: #000; }
	.popVideo.on { z-index: 999999; position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0,.8); display: flex; justify-content: center; align-items: center; padding: 10vw; }
	.popVideo button { position: absolute; right: 20px; top: 20px;
    display: block; padding: 15px 30px; font-size: 14px; color: #fff;
    line-height: 1; letter-spacing: 3px; font-weight: 600; background: #000;
    border: 1px solid #fff; border-radius : 5px; }
	
	/* 메인 두번째 섹션(슬라이드) */
	.main .sliderV2 {width:100%; height:60vh;}
	.main .sliderV2 .sliderObj {height:100% !important;}
	.main .sliderV2 .sliderObj>li {transform:scale(1.1)}
	.main .sliderV2 .sliderObj>li img { background-size : cover; }
	.main .sliderV2 .sliderObj>li:before {content:""; position:absolute; left:0; top:0; width:100%; height:100vh; background:rgba(0,0,0,.2);}
	.main .sliderV2 .sliderObj>li>div {position:relative;}
	.main .sliderV2 .sliderObj>li.on {transform:scale(1)}
	.main .sliderV2 .sliderButton {display:none;}
	.main .sliderV2 .sliderObj>li:before {content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.3);}
	.main .sliderV2 .txt {
	position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
	text-align:center; font-family: 'GmarketSans', sans-serif; color:#fff; font-size:21px; text-shadow:1px 1px 5px rgba(0,0,0,.9);
	font-weight : 200; width : 100%; }
	.main .sliderV2 .txt h3 {font-size:3.7vw; font-weight: 800; line-height:1.6; letter-spacing : -0.3vw; }
	
	/* 메인 세번째 섹션(뉴스 & About BCC) */
	
	.main .bcc-wrap { position : relative; }
	.main .bcc-wrap .bcc_cont { display : grid; grid-template-columns : 50% 50%; margin : 0 30px; padding : 7vh 0; }
	.main .bcc-wrap .about_bg { position : absolute; width : 50%; height : 100%; right :0;top : 0; background : url(../images/main/main_about_bg.webp) no-repeat center 85%; background-color : #f4f5f9; z-index : -1; background-size : 90%; }
	
	/* News */
	.main .bcc-wrap .bcc_cont .news { padding-right : 10%; }
	.main .bcc-wrap .bcc_cont .news .tit { display : flex; justify-content : space-between; align-items : center; margin-bottom : 4vh; }
	.main .bcc-wrap .bcc_cont .news .tit h3 { color : #2145bf; font-size : 36px; font-weight : 800;  }
	.main .bcc-wrap .bcc_cont .news .tit .news_btn { display : flex;  }
	.main .bcc-wrap .bcc_cont .news .tit .news_btn a { display : block; font-size : 18px; font-weight : 800; position : relative; }
	.main .bcc-wrap .bcc_cont .news .tit .news_btn a:hover { color : #2145bf; }
	.main .bcc-wrap .bcc_cont .news .tit .news_btn a:nth-of-type(1) { padding-right : 40px;}
	.main .bcc-wrap .bcc_cont .news .tit .news_btn a:nth-of-type(1):after { 
	content : ""; display : block; width : 1px; height : 14px; background : #c7c7c7; position : absolute; top : 6px; right : 20px; }
	.main .bcc-wrap .bcc_cont .news .tit .news_btn > div {  }
	
	.main .bcc-wrap .bcc_cont .news .con article { border-bottom : 1px solid #e8e8e8; padding-bottom : 2vh; margin-bottom : 2vh;}
	.main .bcc-wrap .bcc_cont .news .con article .headline { width : 80%; margin-bottom : 1vh;}
	.main .bcc-wrap .bcc_cont .news .con article dt { font-size : 20px; font-weight : 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.main .bcc-wrap .bcc_cont .news .con article dd { font-size : 16px; font-weight : 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color : #666;}
	.main .bcc-wrap .bcc_cont .news .con article p { font-size : 14px; font-weight : 600;}
	.main .bcc-wrap .bcc_cont .news .con article p span { color : #2145bf; margin-left : 2%; }
	.main .bcc-wrap .bcc_cont .about { padding-left : 10%; } 
	
	/* About */
	.main .bcc-wrap .bcc_cont .about h3 { color : #2145bf; font-size : 36px; font-weight : 800; margin-bottom : 4vh; }
	.main .bcc-wrap .bcc_cont .about .btn-wrap { display : grid; grid-template-columns : repeat(4,1fr); gap : 3%; margin-bottom : 5vh;}
	.main .bcc-wrap .bcc_cont .about .btn-wrap div { text-align : center; }
	.main .bcc-wrap .bcc_cont .about .btn-wrap a { display: flex; justify-content: center; align-items: center; padding: 18% 15px;
	background: #fff; box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px; border-radius: 1rem; }
	.main .bcc-wrap .bcc_cont .about .btn-wrap a:hover { background : #2145bf; }
	.main .bcc-wrap .bcc_cont .about .btn-wrap a div img { margin-bottom : 1vh; }
	.main .bcc-wrap .bcc_cont .about .btn-wrap a:hover div img { filter: invert(1); }
	.main .bcc-wrap .bcc_cont .about .btn-wrap a div span { display : block; font-size : 18px; font-weight : 600; color : #2145bf; }
	.main .bcc-wrap .bcc_cont .about .btn-wrap a:hover div span { color : #fff; }
	.main .bcc-wrap .bcc_cont .about > p { font-size : 16px; color : #666; }
	

}

/* ************************ 태블릿2 (~991) ************************ */
@media screen and (max-width:991px) {
.main .bcc-wrap .bcc_cont .news { padding-right : 30px; }
.main .bcc-wrap .bcc_cont .news .tit { align-items: start; flex-direction: column; margin-bottom : 3vh;  }
.main .bcc-wrap .bcc_cont .news .tit h3 { margin-bottom : 2vh; font-size : 30px; }
.main .bcc-wrap .bcc_cont .news .tit .news_btn { display: grid; grid-template-columns: repeat(2,1fr); width: 100%; gap: 10px; }
.main .bcc-wrap .bcc_cont .news .tit .news_btn a { border: 1px solid #c7c7c7; text-align: center; border-radius: 5px; padding: 3px 3px 1px; font-size : 16px; }
.main .bcc-wrap .bcc_cont .news .tit .news_btn a:hover { background : #0d3bd7; color : #fff; border : none; }
.main .bcc-wrap .bcc_cont .news .tit .news_btn a:nth-of-type(1) { padding-right : 0;}
.main .bcc-wrap .bcc_cont .news .tit .news_btn a:nth-of-type(1):after { display : none; }
.main .bcc-wrap .bcc_cont .news .con article .headline { width : 90%; }
.main .bcc-wrap .bcc_cont .news .con article dt { font-size : 18px; }
.main .bcc-wrap .bcc_cont .news .con article dd { font-size : 14px; }
.main .bcc-wrap .bcc_cont .about { padding-left : 30px; }
.main .bcc-wrap .bcc_cont .about .btn-wrap { grid-template-columns: repeat(2,1fr); margin-bottom : 4vh; }
.main .bcc-wrap .bcc_cont .about h3 { font-size : 30px; margin-bottom : 2vh; }
.main .bcc-wrap .bcc_cont .about .btn-wrap a { padding: 24% 13px; }
.main .bcc-wrap .bcc_cont .news .con article { padding-bottom: 2vh; margin-bottom: 2vh; }


}

/* ************************ 모바일 (~768) ************************ */
@media screen and (max-width:768px) { 

.main .video_wrap .left > a { padding: 9px 12px 7px 12px; background-color : #fff; background-size: 24px; transition : 0.5s; }
.main .video_wrap .left > a img { width : 25px; }
.main .video_wrap .left > a:hover { transform : translateY(-0px); }
.main .video_wrap .left .tit p { font-size : 18px; }
.main .video_wrap .left .tit h3 { font-size : 50px; }
.main .video_wrap .right { grid-template-columns : repeat(1,1fr);     }
.main .video_wrap .right article { flex-direction: row; display: grid;grid-template-columns: 60% 40%; }
.main .video_wrap .right article .cont { padding : 3vh 20px 3vh 35px; }

.main .video_wrap .cont_wrap { gap : 4vh; height : 90vh; padding-top : 90px; justify-content : space-around; }

.main .sliderV2 { height : 50vh; }

.main .bcc-wrap .bcc_cont { padding : 0; margin : 0; grid-template-columns : 100%; }
.main .bcc-wrap .bcc_cont .news { padding : 5vh 30px; }
.main .bcc-wrap .bcc_cont .news .tit h3 { font-size : 24px; }
.main .bcc-wrap .bcc_cont .news .con article .headline { width : 95%; }
.main .bcc-wrap .bcc_cont .news .con article dt { font-size : 16px; }
.main .bcc-wrap .bcc_cont .about { padding : 5vh 30px; background : url(../images/main/main_about_bg.webp) no-repeat center 85%; background-color: #f4f5f9; background-size: 90%;}
.main .bcc-wrap .bcc_cont .about h3 { font-size : 24px; }
.main .bcc-wrap .bcc_cont .about .btn-wrap div span { font-size : 16px; }
.main .bcc-wrap .about_bg { display : none; }

}

/* ************************ 모바일2 (~500) ************************ */
@media screen and (max-width:500px) { 
.main .video_wrap .left .tit p { font-size : 3.5vw; }
.main .video_wrap .left .tit h3 { font-size : 10vw; }

.main .video_wrap .right article .cont { padding: 20px 0 12px 20px; }
.main .video_wrap .right article .cont h3 { font-size : 20px; margin-bottom : 1vh; }
.main .video_wrap .right article .cont ul li a { font-size : 16px; }
.main .video_wrap .right article img { display : none; }
.main .bcc-wrap .bcc_cont .about > p { font-size : 14px; }

}