@charset "utf-8";
@import url("common.css");


body {overflow-y:scroll;}
#container_wrap {background-color:#000;}
#container {height:490px;background:url('/images/main/bg_container.jpg') 0 0 no-repeat;}

.grid_link {width:900px;position:absolute;left:195px;top:40px;}
.grid_link li {float:left;margin:6px;}







/* 공통 ------------------------------------------------------------------------------------------------------------------------------------------------*/






/* 메인슬라이드 ------------------------------------------------------------------------------------------------------------------------------------------------*/
.main_slide_box { width: 100%; height: 585px; position: relative; }

.main_slide li { width: 100%; height: 585px; background-repeat: no-repeat; background-size: cover; background-position: center; }
.main_slide li.slide1 { background-image: url(/images/main/main_slide01.jpg); }
.main_slide li.slide2 { background-image: url(/images/main/main_slide02.jpg); }
.main_slide li.slide3 { background-image: url(/images/main/main_slide03.jpg); }

.slide_paging { width: 1325px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 10; display: flex; justify-content: space-between; }
.slide_paging div { opacity: 0.6; cursor: pointer; }
.slide_paging div:hover { opacity: 1; }


.main_visual_tit_box { position: absolute; top: 70px; left: 50%; transform: translateX(-50%); color: #fff; z-index: 10; text-align: center; }
.main_visual_tit_box h3 { margin-top: 20px; font-size: 22px; opacity: 0.6; font-weight: bold; }
.main_visual_tit_box h2 { font-size: 54px; font-weight: bold; }
.main_visual_tit_box p { font-size: 18px; font-weight: 300; color: #f7f7f7; }

.product_icon_box { display: flex; justify-content: space-between; position: absolute; bottom: 75px; left: 50%; transform: translateX(-50%); }

.product_icon_box li a { display: flex; justify-content: center; flex-flow: column wrap; width: 150px; height: 150px; border-radius: 50%; background: rgba(0,32,71,0.5); text-align: center; border: 1px solid rgba(255,255,255,0.5); transition: all 0.3s; }
.product_icon_box li:nth-child(2n) a { background: rgba(5,71,123,0.5); }

.product_icon_box li a:hover { background: rgba(0,32,71,0.8); border-color: rgba(255,255,255,0.8); }
.product_icon_box li:nth-child(2n) a:hover { background: rgba(5,71,123,0.8); }

.product_icon_box li a figure { width: 100%; text-align: center; }
.product_icon_box li a p { width: 100%; font-size: 18px; color: #fff; margin-top: 10px; line-height: 1.3; }









/* 메인 영역 1  ------------------------------------------------------------------------------------------------------------------------------------------------*/
.section01 { width: 100%; background: #f2f2f2; padding: 80px 0; }
.section01_box { display: flex; justify-content: space-between; }
.section01_box > div { width: 33%; max-width: 386px; }

.intro_box { background: url(/images/main/intro_bg.jpg) no-repeat center / cover;  color: #fff; padding: 50px 40px; box-sizing: border-box; }
.intro_box h4 { font-size: 26px; font-weight: bold; }
.intro_box p { font-size: 16px; font-weight: 300; margin: 20px 0 80px; }
.intro_box a { display: block; width: 194px; height: 50px; line-height: 50px; border-radius: 25px; border: 1px solid #fff; color: #fff; text-align: center; font-size: 16px; }
.intro_box a:hover { background: rgba(0,0,0,0.3); }

.qna_box { background: url(/images/main/qna_bg.jpg) no-repeat center / cover;  padding: 50px 40px; box-sizing: border-box; border: 1px solid #c8c8c8; }
.qna_box h4 { font-size: 26px; font-weight: bold; }
.qna_box p { font-size: 16px; font-weight: 300; margin: 20px 0 80px; color: #494949; }
.qna_box a { display: block; width: 194px; height: 50px; line-height: 50px; border-radius: 25px; border: 1px solid #03152a; background: #03152a; color: #fff; text-align: center; font-size: 16px; }
.qna_box a:hover { background: #062952; }

.counsel_box { background: url(/images/main/counsel_bg.jpg) no-repeat center / cover; color: #fff; padding: 50px 40px; box-sizing: border-box;  }
.counsel_box h4 { font-size: 26px; font-weight: bold; margin-bottom: 20px; }
.counsel_box h4 span { font-size: 16px; display: block; font-weight: 300; margin-bottom: -5px; }
.counsel_box p { font-size: 16px; font-weight: 300; line-height: 1.7; }
.counsel_box p img { vertical-align: baseline; margin-right: 10px; }
.counsel_box a { display: block; width: 194px; height: 50px; line-height: 50px; border-radius: 25px; border: 1px solid #fff; color: #fff; text-align: center; font-size: 16px; margin-top: 30px; }
.counsel_box a:hover { background: rgba(0,0,0,0.3); }