/**
* OLYM Cascading Style Sheets
* File Name : main.css
* Description : 메인 스타일시트
* Author : Web business Team / Choi Hyun Mi
* Email : desingtj@olym.co.kr
* Date : 2016.11.03
* Update : 2016.11.03
* Copyright(c) 2016 OLYM Communications. All Rights Reserved.
*/

#main { position:relative; width:100%; overflow-x:hidden;}
#main .swiper-slide { height:648px; position:relative; width:100%;}
#main .img { position:absolute; top:0; left:50%; margin-left:-960px; width:100%; height:648px;}
#main .bg1 .desc, #main .bg2 .desc, #main .bg3 .desc { text-align:center;}
#main .bg1 .p_desc1 { padding:145px 0 0 0;}
#main .bg1 .p_desc2 { font-family:"Noto Sans Korean"; font-size:20px; color:#000; text-shadow:1px 1px 2px rgba(255, 255, 255, 1);}
#main .bg1 .p_desc3 { padding-top:76px;}

#main .bg2 .p_desc1 { padding:145px 0 0 0;}
#main .bg2 .p_desc2 { font-family:"Noto Sans Korean"; font-size:20px; color:rgba(255,255,255,0.8);}
#main .bg2 .p_desc3 { padding-top:76px;}

#main .bg3 .p_desc1 { padding:145px 0 0 0;}
#main .bg3 .p_desc2 { font-family:"Noto Sans Korean"; font-size:20px; color:#fff;}
#main .bg3 .p_desc3 { padding-top:76px;}
#main .swiper-pagination1 { position:absolute; top:auto; bottom:10px; left:50%; margin-left:-35px; z-index:100; height:20px;}
#main .swiper-pagination1 .swiper-pagination-bullet { background:rgba(0,0,0,0.5); opacity:.8; width:16px; height:16px; margin:0 4px !important;}
#main .swiper-pagination1 .swiper-pagination-bullet-active { background:#ee4357;}

#main .desc span {display:block;}

#con1 { margin-top:40px;}
.icon_go_list {padding:0 5%; width:100%;}
.icon_go_list .icon_over {background:#eee; display:inline-block; border-radius:100%;}
.icon_go_list li {float:left; text-align:center; width:15%;}
.icon_go_list li a p {font-size:16px; color:#333; margin:10px auto 0 auto;}
.icon_go_list li a:hover p {font-size:16px; color:#294688; margin:10px auto 0 auto;}
.icon_go_list li a:hover .icon_over {background:#8db9e6; transition: all .3s ease;}

#con2 { margin-top:50px;}
.prod_list {text-align:center; margin:0 auto; padding:0 4px;}
.prod_list h2 {font-weight:400; font-family:"Noto Sans Korean"; font-size:34px; color:#111; line-height:50px;}
.prod_list .prod_tit_txt {color:#666; margin-bottom:36px; font-size:15px;}
.prod_list li {float:left; margin-right:2%; width:32%;}
.prod_list li:last-child { margin-right:0;}
.prod_list .hover_wrap {position:relative; width:auto;}
.prod_list .hover_wrap img {width:100%;}
.prod_list .hover_wrap .prod_list_txt h3 {font-size:20px; color:#111; font-weight:bold;}
.prod_list .hover_wrap .prod_list_txt {position:absolute; bottom:0; left:0; text-align:left; padding:30px; color:#333;}
.prod_list .hover_wrap .hover_con {display:none; position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; color:#fff; text-align:center; padding:80px 30px 30px 30px; box-sizing:border-box;} 
.prod_list .hover_wrap .hover_con h3 {font-size:20px; font-weight:bold; margin-bottom:10px;}
.prod_list .hover_wrap .hover_con::before {content:''; display:block; position:absolute; top:0; left:0; z-index:-1; opacity:0.6; width:100%; height:100%; background:#003b6a;}
.prod_list .hover_wrap:hover .hover_con {display:block;} 
.prod_list .hover_wrap:hover .prod_list_txt {display:none;}
.prod_list .hover_wrap .hover_con .btn_def {border:1px solid #fff; padding:7px 0; width:163px; margin:0 auto; margin-top:30px;}


#con3 { margin-top:50px; background:#005696 url(/project/design/main/bg_notice.png) repeat-y center top; height:328px;}
.notice_tit {float:left; padding:55px 30px; background:#005696; width:20%; height:328px; box-sizing:border-box;}
.notice_tit h2 {font-size:34px; color:#fff; font-family:"Noto Sans Korean"; font-weight:400;}
.notice_tit .notice_txt {color:#fff; line-height:20px; margin-top:5px;}
.notice_tit .btn_def a {border:1px solid #fff; color:#fff; padding:7px 42px; display:inline-block; margin-top:70px;}
.notice_tit .btn_def a:hover {background:#fff; color:#005696;}
.notice_list {padding:34px 0; margin-left:20%; box-sizing:border-box; width:80%; height:328px;}
.notice_list li {float:left; width:25%; border-right:1px solid #d0d0d0; padding:30px; box-sizing:border-box; height:260px;}
.notice_list li:last-child {border-right:none;}
.notice_list h3 {font-size:16px; line-height:23px; color:#333; font-weight:bold; height:50px;}
.notice_list .notice_con {color:#666; height:70px; overflow-y:hidden; margin:30px 0;}
.notice_list span {color:#888;}
.notice_list li a h3:hover {color:#005696; text-decoration:underline;}


#con4 { margin:50px 0 26px 0;}
.go_list {text-align:center; margin:0 auto; padding:0 5px;}
.go_list li {float:left; margin-right:2%; width:23.5%;}
.go_list li:last-child { margin-right:0;}
.go_list .hover_wrap .go_list_txt h3 {font-size:20px; color:#fff; font-weight:bold;}
.go_list .hover_wrap .go_list_txt {position:absolute; bottom:0; left:0; text-align:left; padding:30px; color:#fff;}
.go_list .hover_wrap {position:relative;} 
.go_list .hover_wrap img {width:100%;}
.go_list .hover_wrap .hover_con {display:none; position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; color:#fff; text-align:center; padding:160px 30px 30px 30px; box-sizing:border-box;} 
.go_list .hover_wrap .hover_con h3 {font-size:20px; font-weight:bold; margin-bottom:10px;}
.go_list .hover_wrap .hover_con::before {content:''; display:block; position:absolute; top:0; left:0; z-index:-1; opacity:0.6; width:100%; height:100%; background:#003b6a;}
.go_list .hover_wrap:hover .hover_con {display:block;} 
.go_list .hover_wrap:hover .go_list_txt {display:none;}


#con5 {margin-bottom:50px;}
.go_banner li {float:left; width:49%; border:1px solid #ddd; box-sizing:border-box; position:relative;}
.go_banner li:first-of-type {margin-right:2%;}
.go_banner li a {padding:50px; box-sizing:border-box; display:inline-block; color:#666; width:100%;}
.go_banner li a h2 {color:#333; font-size:20px; font-weight:bold; margin-bottom:5px;}
.go_banner .icon_over {position:absolute; top:28px; right:50px; background:#eee; display:inline-block; border-radius:100%;}
.go_banner li a:hover .icon_over {background:#8db9e6; transition: all .3s ease;}


/* 1600 */
@media all and (max-width:1600px) {
.prod_list .hover_wrap .hover_con {padding:55px 30px 30px 30px;} 
.go_list .hover_wrap .hover_con {padding:120px 30px 30px 30px;} 
.go_banner li a {padding:50px 20% 50px 40px;}
.go_banner .icon_over {right:40px;}
}

/* 태블릿 가로 */
@media all and (max-width:1260px) {

#main .swiper-slide { height:480px;}
#main .img {  margin-left:-711px; height:480px;}
#main .img img { height:480px;}

#main .bg1 .p_desc1 { padding:90px 0 10px 0;}
#main .bg1 .p_desc1 img { width:55%;}
#main .bg1 .p_desc2 { font-size:18px;}
#main .bg1 .p_desc3 { padding-top:55px;}
#main .bg1 .p_desc3 img {width:65%;}

#main .bg2 .p_desc1 { padding:90px 0 10px 0;}
#main .bg2 .p_desc1 img { width:55%;}
#main .bg2 .p_desc2 { font-size:18px;}
#main .bg2 .p_desc3 { padding-top:55px;}
#main .bg2 .p_desc3 img {width:65%;}

#main .bg3 .p_desc1 { padding:90px 0 10px 0;}
#main .bg3 .p_desc1 img { width:55%;}
#main .bg3 .p_desc2 { font-size:18px;}
#main .bg3 .p_desc3 { padding-top:55px;}
#main .bg3 .p_desc3 img {width:65%;}

.icon_go_list li a:hover p {background-position:105px 6px;}

.prod_list .hover_wrap .prod_list_txt {padding:30px; font-size:18px;}
.prod_list .hover_wrap .prod_list_txt p {display:none;}
.prod_list .hover_wrap .hover_con {padding:30px 30px 30px 30px;}


.notice_tit .btn_def a {padding:7px 22px; margin-top:70px;}
.notice_list h3 {height:45px;}
.notice_list .notice_con {height:65px;}

.go_list .hover_wrap .hover_con {padding:90px 30px 30px 30px;} 

.go_banner .icon_over {position:absolute; top:20px; right:30px;}
.go_banner li a {padding:30px 35% 30px 30px;}
}


/* 태블릿 세로 */
@media all and (max-width:1000px) {

#main .swiper-slide { height:405px;}
#main .img {  margin-left:-600px; height:405px;}
#main .img img { height:405px;}

#main .bg1 .p_desc1 { padding:80px 0 10px 0;}
#main .bg1 .p_desc1 img { width:60%;}
#main .bg1 .p_desc3 { padding-top:50px;}
#main .bg1 .p_desc3 img {width:70%;}

#main .bg2 .p_desc1 { padding:80px 0 10px 0;}
#main .bg2 .p_desc1 img { width:60%;}
#main .bg2 .p_desc3 { padding-top:50px;}
#main .bg2 .p_desc3 img {width:70%;}

#main .bg3 .p_desc1 { padding:80px 0 10px 0;}
#main .bg3 .p_desc1 img { width:60%;}
#main .bg3 .p_desc3 { padding-top:50px;}
#main .bg3 .p_desc3 img {width:70%;}

.icon_go_list li img {width:100%;}
.icon_go_list .icon_over {width:70%;}

.prod_list h2 {font-size:30px;}
.prod_list .prod_tit_txt {margin-bottom:30px;}
.prod_list .hover_wrap .prod_list_txt h3 {font-size:18px;}
.prod_list .hover_wrap .hover_con {padding:48px 20px 20px 20px;} 
.prod_list .hover_wrap .hover_con h3 {display:none;}
.prod_list .hover_wrap .hover_con .btn_def {display:none;}

#con3 {background:none; height:auto;}
.notice_tit {float:none; padding:10px 30px; width:100%; height:100px;}
.notice_tit h2 {font-size:30px;}
.notice_tit .notice_txt {margin-top:0;}
.notice_tit .btn_def {position:absolute; right:30px; top:30px;}
.notice_tit .btn_def a {margin-top:0;}
.notice_list {padding:0; margin-left:0; width:100%; height:auto;}
.notice_list li {float:none; width:100%; border-bottom:1px solid #d0d0d0; border-right:none; height:auto; background:#f3f3f3;}
.notice_list li:last-child {border-right:none; border-bottom:none;}
.notice_list h3 {font-size:16px; height:auto; margin-bottom:5px;}
.notice_list .notice_con {height:auto; margin:0;}

.go_list .hover_wrap .go_list_txt {padding:20px;}
.go_list .hover_wrap .go_list_txt h3 {font-size:18px;}
.go_list .hover_wrap .go_list_txt p {display:none;}
.go_list .hover_wrap .hover_con h3 {display:none;}
.go_list .hover_wrap .hover_con {padding:50px 30px 30px 30px;}

.go_banner li a h2 {font-size:18px;}
.go_banner .icon_over {top:30px; right:40px; width:23%;}
.go_banner .icon_over img {width:100%;}
}


/* 모바일 가로 */
@media all and (max-width:736px) {

#main .bg1 .p_desc2, #main .bg2 .p_desc2, #main .bg3 .p_desc2 { font-size:16px;}

.prod_list .hover_wrap .prod_list_txt h3 {font-size:17px;}
.prod_list .hover_wrap .hover_con {padding:40px 20px 20px 20px;}

.go_list .hover_wrap .go_list_txt h3 {font-size:15px;}
.go_list .hover_wrap .hover_con {padding:35px 20px 20px 20px;} 

.go_banner li {float:none; width:100%;}
.go_banner li:first-of-type {margin-right:0; margin-bottom:10px;}
.go_banner li a {padding:30px 20% 30px 30px; font-size:14px;}
.go_banner li a h2 {font-size:16px; margin-bottom:5px;}
.go_banner .icon_over {top:20px; right:20px; width:15%;}
}


/* 모바일 세로 */
@media all and (max-width:414px) {

#main .swiper-slide { height:355px;}
#main .img { margin-left:-526px; height:355px;}
#main .img img { height:355px;}
#main .bg2 .img { margin-left:-700px;}

#main .bg1 .p_desc1 img { width:80%;}
#main .bg1 .p_desc2 { font-size:14px;}
#main .bg1 .p_desc3 { padding-top:30px;}
#main .bg1 .p_desc3 img {width:100%;}

#main .bg2 .p_desc1 img { width:80%;}
#main .bg2 .p_desc2 { font-size:14px;}
#main .bg2 .p_desc3 { padding-top:30px;}
#main .bg2 .p_desc3 img {width:100%;}

#main .bg3 .p_desc1 img { width:80%;}
#main .bg3 .p_desc2 { font-size:14px;}
#main .bg3 .p_desc3 { padding-top:30px;}
#main .bg3 .p_desc3 img {width:100%;}

#main .desc span {display:inline;}

#con1 { margin-top:30px;}
.icon_go_list {padding:0;}
.icon_go_list li {padding:0; width:33.33%; margin-bottom:30px;}
.icon_go_list li a p {font-size:14px; margin:5px auto 0 auto;}
.icon_go_list li a:hover p {font-size:14px; background:none; margin:5px auto 0 auto;}


#con2 { margin-top:0;}
.prod_list h2 {font-size:24px;}
.prod_list .prod_tit_txt {margin-bottom:20px; font-size:14px;}
.prod_list li {float:none; margin-right:0; width:100%; margin-bottom:15px;}
.prod_list .hover_wrap .prod_list_txt {padding:20px;}
.prod_list .hover_wrap .prod_list_txt h3 {font-size:18px;}
.prod_list .hover_wrap .prod_list_txt p {display:block; font-size:14px;}
.prod_list .hover_wrap .hover_con {padding:40px 20px 20px 20px;} 
.prod_list .hover_wrap .hover_con h3 {display:block;}
.prod_list .hover_wrap .hover_con .btn_def {display:block;}


#con3 { margin-top:30px;}
.notice_tit {height:90px;}
.notice_tit h2 {font-size:26px; text-align:center;}
.notice_tit .btn_def {display:none;}
.notice_tit .notice_txt {font-size:13px; text-align:center;}
.notice_list h3 {font-size:14px; height:20px; margin-bottom:10px;}
.notice_list .notice_con {font-size:14px;}
.notice_list span {color:#888;}
.notice_list li {padding:20px;}
.notice_list li a h3:hover {color:#005696; text-decoration:underline;}


#con4 { margin:30px 0;}

.go_list li {float:left; margin-right:2%; width:49%; margin-bottom:10px;}
.go_list li:nth-child(2n) { margin-right:0;}
.go_list li:nth-child(3), .go_list li:nth-child(4) { margin-bottom:0;}
.go_list .hover_wrap .hover_con {padding:30px; font-size:14px;} 
.go_list .hover_wrap .hover_con h3 {display:block; font-size:16px;}


#con5 {margin-bottom:30px;}
.go_banner li a {padding:25px 35% 25px 25px;}
.go_banner li a h2 {margin-bottom:5px;}
.go_banner .icon_over {top:20px; right:20px; width:23%;}
}
/*
.go_list li {float:none; margin-right:0; width:100%; margin-bottom:15px;}
.go_list .hover_wrap .go_list_txt {padding:30px;}
.go_list .hover_wrap .go_list_txt p {display:block;}
.go_list .hover_wrap .hover_con {padding:170px 30px 30px 30px;} 
.go_list .hover_wrap .hover_con h3 {display:block;}
*/