@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2017-05-30
******************************************************** */

/* MAIN :: CONTENT */
#mainContent {overflow:hidden;  background:#eee;}
#mainContent h1{font-size:30px; padding:70px 0 40px 0; color:#252525; position:relative;}
#mainContent h1 span{display:inline-block; content:"";  width:36px; height:4px;  background:#d41b1b}
/* ******************  메인 컨텐츠 ********************** */
#mainContainer { background-color:#fff; overflow:hidden; min-height:1000px; }
/* MAIN :: VISUAL */
#mainVisual { width:100%; height:980px; margin:0 auto; background-color:#f7f5fa; color:#564183; position:relative; text-align:center;}
.scroll-icon {position:absolute; bottom:75px; left:50%; margin-left: -10px; z-index:9999;}

.main-visual-inner {width:100%; height:980px; background-color:#424242;}

/* 메인비주얼 텍스트 */
.main-visual-txt { text-align:right; position:absolute; bottom:156px; right:60px; }
.main-visual-txt h2 { font-family:'Nanum Myeongjo',sans-serif ;position:relative;left:50px; z-index:10; font-size:35px; letter-spacing: -1px; color:#fff; font-weight: 400; margin-bottom: 30px; opacity:0;filter:Alpha(opacity=0);  -webkit-transition: all 1 s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s;  text-shadow: 1px 1px 1px #000; font-weight:600;}
.main-visual-txt h2 span{opacity:0.7;filter:Alpha(opacity=70);  font-weight:400;}
.main-visual-txt p {position:relative; left:0px; font-size:16px; line-height: 26px; letter-spacing: -0.75px; color:#fff; opacity:0;filter:Alpha(opacity=0);left:50px; -webkit-transition: all 1 s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s;-webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; -ms-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s;  }

.main-visual-txt.active h2, .main-visual-txt.active a {opacity:1;filter:Alpha(opacity=100); left:0; }
 .main-visual-txt.active p{opacity:0.7;filter:Alpha(opacity=70); left:0; }

/* 메인비주얼 dot */
.main-visual .slick-dots {position:absolute; z-index:9999; right:66px; bottom:307px; display:inline-block;}
.main-visual .slick-dots li {float:left; margin-left: 7px;}
.main-visual .slick-dots button {border:0; font-size:0; cursor:pointer; width:8px; height:8px; border:1px solid #fff; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;}
.main-visual .slick-dots .slick-active button {background-color:#d41b1b; border:none;}


/* 메인비주얼 화살표 */
.main-visual .slick-arrow {position:absolute; font-size:0; border:0; cursor:pointer; top:486px; z-index:9999;}
.main-visual .slick-prev {left:66px;}
.main-visual .slick-next {right:66px;}

/* ******************  메인리스트 - style01 ********************** */
.main-list-style1 {margin:55px auto;}
.main-list-style1 ul li {float:left; width:273.5px; height:150px; border:1px solid #DEDEDE; border-left: 0;}
.main-list-style1 ul li a {display:block; width:251.5px; height:70px; padding:40px 10px; border:1px solid #fff; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
.main-list-style1 ul li:first-child {border-left: 1px solid #dedede;}
.main-list-style1 .main-list1-img {float:left; width:63px; height:63px; margin-right: 10px; background-color:#CCCCCC; -webkit-border-radius: 63px; -moz-border-radius: 63px;border-radius: 63px;}
.main-list-style1 .main-list1-txt {float:left; width:178px;}
.main-list-style1 .main-list1-txt h3 {font-size:20px; line-height: 24px; letter-spacing: -0.25px; color:#303030; font-weight: 400;}
.main-list-style1 .main-list1-txt p {font-size:13.5px; line-height: 18px; letter-spacing: -0.75px; color:#ababab;}
.main-list-style1 ul li:hover a{border:1px solid #000;}

/* ******************  메인공지사항 ********************** */
.main-board-style1 {float:left; width:395px;}
.main-board-style1 .main-board-tit {margin-bottom: 35px;}
.main-board-style1 .main-board-tit ul {float:left;}
.main-board-style1 .main-board-tit ul li {float:left; width:97px; height:37px; text-align:center;}
.main-board-style1 .main-board-tit ul li:first-child {margin-right:1px}
.main-board-style1 .main-board-tit ul li a {display:block; width:100%; height:37px; font-size:16px; line-height: 37px; letter-spacing: -0.25px; color:#fff; background-color:#BABABA; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
.main-board-style1 .main-board-tit ul li.select a, .main-board-tit ul li:hover a {background-color:#363636;}
.main-board-style1 .main-board-tit a {float:right; }
.main-board-style1 .main-board-tit a i {vertical-align: middle; color:#585858; line-height: 37px;}

.main-notice-content {min-height:180px;}
.main-notice-content ul li a{display:block; height:36px;}
.main-notice-content ul li p {float:left; font-size:14.5px; line-height: 36px; letter-spacing: -0.5px; color:#363535; padding-left: 10px; background:url("/template/kr_v01/images/main/main_notice_dot.png") no-repeat left center; width:310px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.main-notice-content ul li .date {float:right; display:inline-block; font-size:12px; line-height: 36px; letter-spacing: -0.75px; color:#505050; font-weight: 600; }

/* ******************  메인갤러리 ********************** */
.main-gallery {float:right; width:630px;}
.main-gallery-img {float:left; width:301px; height:276px;}

.main-gallery-txt {float:left; width:329px; height:276px; background-color:#373737;}
.main-gallery-txt .slick-arrow {position:absolute; z-index:10; border:0; font-size:0; bottom:27px; }
.main-gallery-txt .slick-arrow i {vertical-align: middle; color:#fff;}
.main-gallery-txt .slick-prev {right:70px;}
.main-gallery-txt .slick-next {right:30px;}

.gallery-txt-inner {position:relative; width:269px; height:216px; margin:30px;}
.main-gallery-txt h3 {font-size:20px; line-height: 24px; letter-spacing: -0.25px; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.main-gallery-txt .sub-txt {font-size:16px; line-height: 22px; color:#fff; font-weight: 300; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top: 20px; margin-bottom: 25px;}
.main-gallery-txt .exp {font-size:13px; line-height: 21px; letter-spacing: -0.25px; color:rgba(255, 255, 255, 0.6); height:105px; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow:hidden; text-overflow:ellipsis; word-break:keep-all; margin-bottom: 20px;}
.main-gallery-txt .date {position:absolute; left:0; bottom:0; font-size:12px; line-height: 24px; letter-spacing: -0.25px; color:rgba(255, 255, 255, 0.7); font-weight: 600;}
.main-gallery-txt .date i {vertical-align: middle; color:#fff;}

/* ******************  메인리스트 - style02 ********************** */
.main-list-style2 {margin:55px auto;}
.main-list-style2 ul li {float:left; width:273.5px; height:251px; border:1px solid #DEDEDE; border-left: 0; text-align:center;}
.main-list-style2 ul li a {display:block; width:171.5px; height:179px; padding:35px 50px; border:1px solid #fff; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
.main-list-style2 ul li:first-child {border-left: 1px solid #dedede;}
.main-list-style2 .main-list2-img {display:inline-block; width:63px; height:63px; background-color:#CCCCCC; -webkit-border-radius: 63px; -moz-border-radius: 63px;border-radius: 63px;}

.main-list-style2 .main-list2-txt h3 {font-size:20px; line-height: 24px; letter-spacing: -0.25px; color:#303030; font-weight: 400; margin-top: 35px; margin-bottom: 15px;}
.main-list-style2 .main-list2-txt p {font-size:13px; line-height: 18px; letter-spacing: -0.75px; color:#ababab;}
.main-list-style2 ul li:hover a{border:1px solid #000;}

.main-gallery-wrap {background-color:#EFEFEF; padding:45px 0;}

/* ******************  메인리스트 - style03 ********************** */
.main-list-style3 {margin:70px auto 0 auto;}
.main-list-style3 .main-vertical-tab {border-bottom: 1px solid #D1D1D1; margin-bottom: 35px;}
.main-list-style3 .main-vertical-tab > a {float:right; line-height: 37px;}
.main-list-style3 .main-vertical-tab ul {float:left; position:relative; top:1px;}
.main-list-style3 .main-vertical-tab ul li {float:left; width:97px; height:37px; text-align:center;}
.main-list-style3 .main-vertical-tab ul li:first-child {margin-right: 1px;}
.main-list-style3 .main-vertical-tab ul li a {display:block; font-size:16px; line-height: 37px; letter-spacing: -0.25px; color:#fff; background-color:#BABABA;}
.main-list-style3 .main-vertical-tab ul li.select a, .main-list-style3 .main-vertical-tab ul li:hover a {background-color:#363636;}
.main-list-style3 .main-vertical-list-inner {display:table; width:1025px;}
.main-list-style3 .main-vertical-tit {display:table-cell; width:920px;}
.main-list-style3 .main-vertical-tit .tit {font-size:17px; line-height: 24px; letter-spacing: -0.5px;  color:#333333; font-weight: 400; background:url("/template/kr_v01/images/main/main_notice_dot.png") no-repeat left center; margin-bottom: 5px; } 
.main-list-style3 .main-vertical-tit p {width:910px; font-size:15px; line-height: 24px; letter-spacing: -0.5px;  color:rgba(73, 73, 73, 0.75); font-weight: 300; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-left:12px;  }
.main-list-style3 .date {display:table-cell; vertical-align: middle; padding-left: 35px; font-size:14px; line-height: 37px; letter-spacing: -0.75px; color:#505050; font-weight: 600;}
.main-list-style3 .main-vertical-list .slick-arrow {position:absolute; z-index:9; cursor:pointer; right:0;}
.main-list-style3 .main-vertical-list .slick-prev {top:3px;}
.main-list-style3 .main-vertical-list .slick-next {top:29px;}

/* ******************  메인갤러리리스트 - style01 ********************** */
.main-gallery-wrap ul{overflow:hidden; width:100%; }
.main-gallery-wrap ul li{float:left; width:24%; margin:0 0.5%  1% 0.5%; }
.main-gallery-wrap ul li a{display:block; position:relative; border:1px solid #d4d4d4; 
    -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;
}
.main-gallery-wrap ul li a .gallery-thum-box{position: relative; padding-top: 70%; overflow: hidden;}
.main-gallery-wrap ul li a .gallery-thum,.main-gallery-wrap ul li a .movie-thum-over{position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
.main-gallery-wrap ul li a .movie-thum-over{background:rgba(0,0,0,0.3); text-align:center;}
.main-gallery-wrap ul li a .movie-thum-over i{color:#fff; font-size:50px; margin:25% 0 0 0;}
.main-gallery-wrap ul li a:hover .movie-thum-over i{color:#faa61a}
.main-gallery-wrap ul li a .gallery-thum img{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.main-gallery-wrap ul li a .gallery-txt-con{padding:8% 4%; background-color:#fff;}
.main-gallery-wrap ul li a .gallery-txt-con .gal-tit{display:block;width:100%; color:#363535; font-size:16px; font-weight:300; letter-spacing:-0.25px; line-height:26px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.main-gallery-wrap ul li a .gallery-txt-con .gal-txt{height:38px; overflow:hidden; margin:3% 0 6%; color:#656464; font-size:13px; letter-spacing:-0.25px; line-height:1.5em;}
.main-gallery-wrap ul li a .gallery-txt-con .gal-day{color:#616161; font-size:14px; font-weight:300;}
.main-gallery-wrap ul li a .gallery-txt-con .gal-day i{font-size:20px; vertical-align:middle; color:inherit}
.main-gallery-wrap ul li a:hover{border-color:#000}

/* ******************  메인갤러리리스트 - style02 ********************** */
.main-gallery-style2 {margin:70px auto;}
.main-gallery-style2 ul li {float:left; display:block; width:285px; height:375px; padding:0 40px; border-left: 1px solid #E8E8E8;}
.main-gallery-style2 ul li:first-child {border-left: 0;}
.main-gallery-style2 ul li a {display:block; height:375px;}
.main-gallery-style2 ul li:hover .gallery-style2-img span {bottom:0;}

.main-gallery-style2 .gallery-style2-img {position:relative; width:285px; height:193px; background-color:#9B9B9B; overflow:hidden;}
.main-gallery-style2 .gallery-style2-img span {position:absolute; right:0; bottom:-31px; display:inline-block; width:93px; height:31px; background-color:#383838; color:#fff; font-size:14px; line-height: 31px; letter-spacing: -0.5px; font-weight: 600; text-align:center;  -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
.main-gallery-style2 .gallery-style2-txt h3 {font-size:24px; line-height: 36px; letter-spacing: -0.5px; font-weight: 400; color:#17100c; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:25px 0;}
.main-gallery-style2 .gallery-style2-txt p {font-size:14px; line-height: 24px; letter-spacing: -0.75px; color:#727272; height:96px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow:hidden; text-overflow:ellipsis; word-break:keep-all;}

/* ******************  메인갤러리리스트 - style03 ********************** */
.main-gallery3-wrap {padding:80px 0; border-top: 1px solid #AEAEAE; border-bottom: 1px solid #AEAEAE;}
.gallery-style3-wrap {float:left; display:inline-block;width:550px; }
.gallery-style3-wrap.top {margin-top: 1px;}
.gallery-style3-wrap > a {position:relative; display:block; height:273px;}
.main-gallery-style3 .gallery-style3-img {position:relative; float:left; width:273px; height:273px; }
.main-gallery-style3 .gallery-style3-img .arrow {position:absolute; right:-12px; top:45px; z-index:10;}

.gallery-style3-wrap .quick-border{position:absolute; top:0; left:0; z-index:10; width:550px; height:273px;}
.gallery-style3-wrap .quick-border span{display:inline-block; background-color:#000; position:absolute;}
.gallery-style3-wrap span.top-bar{top:0; left:0; width:0; height:5px;}
.gallery-style3-wrap .right-bar{top:5px; right:0px; width:5px; height:0;}
.gallery-style3-wrap .bottom-bar{bottom:0; right:5px; width:0; height:5px;}
.gallery-style3-wrap .left-bar{bottom:0; left:0; width:5px; height:0;}

.main-gallery-style3 .gallery-style3-txt {float:left; width:219px; height:193px; padding:40px 20px; padding-left: 34px; background-color:#F4F4F4;}
.main-gallery-style3 .gallery-style3-txt h3{font-size:18px; line-height: 36px; letter-spacing: -0.5px; color:#17100c; font-weight: 400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.main-gallery-style3 .gallery-style3-txt p {font-size:14px; line-height: 24px; letter-spacing: -0.75px; color:#727272; margin:30px 0; height:72px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow:hidden; text-overflow:ellipsis; word-break:keep-all;}
.main-gallery-style3 .gallery-style3-txt span {font-size:15px; line-height: 24px; color:#727272;}


/* ******************  메인 제품 슬라이더 ********************** */
.main-business {float:left; width:289px; margin-right:14px;}
.main-business:last-child { margin-right:0;}
.main-business h3 {font-size:24px; letter-spacing: -0.25px; color:#343434; font-weight: 400; margin-bottom: 15px;}
.main-business-wrap .slick-arrow {position:absolute; top:145px; z-index:10; cursor:pointer; width:48px; height:48px; }
.main-business-wrap .slick-prev {left:0;}
.main-business-wrap .slick-next {right:0;}
.main-business-wrap .slick-dots {position:absolute; z-index:9999; right:50%; margin-right:-15px; bottom:20px; display:inline-block;}
.main-business-wrap .slick-dots li {float:left; margin-left: 7px;}
.main-business-wrap .slick-dots button {border:0; font-size:0; cursor:pointer; width:8px; height:8px; border:1px solid #fff; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;}
.main-business-wrap .slick-dots .slick-active button {background-color:#d41b1b; border:none;}
.main-business-inner {width:295px; height:410px; background-color:#9B9B9B; position:relative;}

.main-news {float:right; width:437px; height:260px; padding:40px 45px; background-color:#EEEEEE; margin-top: 40px;}
.main-news-txt {float:left; width:210px; margin-right: 40px;}
.main-news-txt .sub-tit {font-size:24px; letter-spacing: -0.25px; color:#000000}
.main-news-txt h3 {font-size:24px; letter-spacing: -0.25px; color:#000000; font-weight: 400; margin:20px 0;}
.main-news-txt .exp {font-size:14px; line-height: 24px; letter-spacing: -0.1px; color:#727272; height:96px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow:hidden; text-overflow:ellipsis; word-break:keep-all;}
.main-news-txt a {display:inline-block; width:120px; height:43px; font-size:15px; line-height: 43px; letter-spacing: -0.1px; color:rgba(255, 255, 255, 0.8); text-align:center; background-color:#242424; margin-top: 34px; }

.main-news-img {float:left;width:184px; height:260px; }
.news-img-inner {width:184px; height:260px; background-color:#535353;}


/* ******************  메인배너 ********************** */
.main-banner {padding-bottom: 30px;}
.main-banner ul li {float:left; width:392px; height:228px; background-color:#535353; margin-left: 10px; position:relative;}
.main-banner ul li:first-child {margin-left: 0;}
.main-banner ul li a {position:relative; display:block;width:330px;  height:150px; padding:30px 30px; position:absolute; top:0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
.main-banner ul li a:hover { padding:40px 35px; position:absolute; top:0;}
.main-banner ul li a h3 {font-size:24px; letter-spacing: -0.5px; color:#fff; font-weight: 400;}
.main-banner ul li a .sub-txt {font-size:18px; line-height: 24px; letter-spacing: -0.5px; color:#fff; margin:15px 0;}
.main-banner ul li a p {font-size:14px; line-height: 24px; letter-spacing: -0.1px; color:#bcbcbc;}

.main-banner ul li a img {position:absolute; z-index:10; top:30px; right:35px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
.main-banner ul li:hover a img {transform:rotate(90deg);  -moz-transform:rotate(90deg);  }

/* ******************  메인롤링배너 ********************** */
.rolling-banner {height:67px; padding-top: 23px; }
.rolling-banner-inner {height:45px; width:1200px; margin:0 auto;}
.rolling-banner-inner .slick-arrow {position:absolute; top:15px; z-index:10; width:9px; height:18px; cursor:pointer; border:0; font-size:0;}
.rolling-banner-inner .slick-prev {left:-15px; }
.rolling-banner-inner .slick-next {right:-15px; }
.rolling-banner-img {margin:0 3px;}