@charset "utf-8";
/* CSS Document */

/* ******************  메인 컨텐츠 ********************** */
#mainContent { overflow:hidden; min-height:500px; padding-bottom:0px;}

#mainStory {visibility:hidden; opacity:0;filter:Alpha(opacity=0);  -webkit-transition: all 0.7s; -moz-transition: all 0.7s; -ms-transition: all 0.7s; -o-transition: all 0.7s; transition: all 0.7s; position:relative; bottom:-50px}
#mainStory.animated {bottom:0; opacity:1;filter:Alpha(opacity=100); visibility:visible;}

#mainStory .slick-arrow {position:absolute; z-index:10; border:0; font-size:0; width:54px; height:54px; text-align:center; line-height: 54px; cursor:pointer; border:1px solid #AFAFAF; /* top:475px; */top:520px;}


.main-story-inner {float:left;}
.main-story-inner > div {height:640px; padding-top:50px;}

.main-story-tit p {font-size:20px; letter-spacing: 5px; color:#bab9b9; font-weight: 600; margin-bottom: 10px;}
.main-story-tit h3 {font-size:80px; letter-spacing: -2.5px; color:#272c32; font-weight: 400;}

.main-story-info {margin-top:20px; margin-bottom: 115px; min-height:209px;}
.main-story-info p strong {font-size:21px; line-height: 32px; color:#454545; font-weight: 500;}
.main-story-info p {font-size:15px; line-height: 25px; letter-spacing: -0.5px; color:#787878;}
.main-story-info p:last-child {margin-top:20px;}

.main-story-btn {display:inline-block; font-size:15px; line-height: 56px; letter-spacing: -0.5px; color:#fff; text-align:center; width:187px; height:56px; background-color:#12845d; border-radius:28px;}


#mainInterior {padding-top:0px; visibility:hidden; opacity:0;filter:Alpha(opacity=0); position:relative; top:-100px; -webkit-transition: all 1.5s; -moz-transition: all 1.5s; -ms-transition: all 1.5s; -o-transition: all 1.5s; transition: all 1.5s;}
#mainInterior.animated {opacity:1;filter:Alpha(opacity=1000);top:30px; visibility:visible; marquee-speed:slow;}

.interior-gang {position:absolute; z-index:10; right:350px; bottom:0;}

.main-interior-tit {position:relative; bottom:-35px; z-index:10;}
.brand-gang {position:absolute; bottom:0; left:50%; margin-left:360px;}

.main-interior-tit p {font-size:20px; letter-spacing: 5px; color:#bab9b9; font-weight: 600; margin-bottom: 10px;}
.main-interior-tit h3 {font-size:80px; letter-spacing: -0.25px; color:#fff; font-weight: 400;}


.main-interior-wrap {position:relative; width:1500px; left:50%; margin-left: -750px;}

.main-tab-list-wrap {position:absolute; z-index:10; width:1200px; top:60px; left:50%; text-align:left; margin-left: -600px;}
.main-tab-list-wrap ul {width:190px;}
.main-tab-list-wrap li {width:190px; display:block;}
.main-tab-list-wrap li a {display:block; width:175px; padding-left: 15px; position:relative; font-size:17px; line-height: 32px; letter-spacing: -0.5px; color:#fff; font-weight: 600; margin-bottom: 20px;}
.main-tab-list-wrap li a::before {content:""; position:absolute; width:7px; height:2px; background-color:#fff; left:0; top:15px;}
.main-tab-list-wrap li.select a, .main-tab-list-wrap li:hover a {background-color:#12845d}

.main-interior-inner {float:left; width:1500px;}
.interior-inner {height:auto; position:relative; overflow:hidden;}

.main-interior-txt {background-color:rgb(29,44,50);}
.main-interior-txt {position:absolute; z-index:10; left:0; bottom:-200px; width:570px; height:280px; background-color:rgba(29,44,50,0.9); padding-left: 150px; -webkit-transition: all 0.5s;
-moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;}
.main-interior-txt.open {bottom:0;}
.main-interior-txt.open .interior-slider-tit .arrow {top:27px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);}
.interior-slider-tit {height:80px; position:relative; }
.interior-slider-tit h3 {font-size:25px; line-height: 80px; letter-spacing: -0.5px; color:#fff; font-weight: 500; }
.interior-slider-tit .arrow {position:absolute; top:30px; right:35px;}
.interior-slider-tit .arrow i {vertical-align: middle; color:#fff;}

.interior-slider-info p {font-size:15px; line-height: 26px; letter-spacing: -0.5px; color:rgba(255, 255, 255, 0.6); margin-bottom: 25px;}
.interior-slider-info a {display:inline-block; width:216px; height:56px; border:2px solid #BFC0C2; text-align:center; font-size:16px; line-height: 56px; letter-spacing: 5px; color:rgba(255, 255, 255, 0.7); font-weight: 500;}
.interior-slider-info a:hover {border:2px solid #fff; background-color:#fff; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s; color:#333;}

.interior-sub-slider .slick-arrow {position:absolute; z-index:10; width:80px; height:80px; font-size:0; border:0; bottom:0;}


/* **** BUTTON STYLE 03 **** */
.cm-button-style03{position:relative; display:inline-block; width:176px; height:58px;  text-indent:30px; line-height:58px; border:3px solid #fff; color:#fff; font-size:16.5px;}
.cm-button-style03:before,
.cm-button-style03:after{
    display:inline-block; position:absolute; top:-2px; content:""; 
    -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s
}
.cm-button-style03:before{left:-2px;width:2px; height:60px; background-color:#fff}
.cm-button-style03:after{left:0; width:73px; height:58px; border-top:2px solid #fff; border-bottom:2px solid #fff }
.cm-button-style03:hover:before{width:178px}
.cm-button-style03:hover:after{width:176px}
.cm-button-style03 span{position:relative; z-index:1;}
.cm-button-style03 .arrow{position:absolute; top:50%; right:30px; line-height:20px; margin-top:-5px;}
.cm-button-style03:hover span{color:#12845d;}

.cm-button-style04{position:relative; display:inline-block; width:176px; height:58px; line-height:58px; border:3px solid #fff; color:#fff; font-size:16.5px; text-align:left;}
.cm-button-style04 .txt {display:inline-block; margin-left: 60px;}
.cm-button-style04:before,
.cm-button-style04:after{
    display:inline-block; position:absolute; top:-2px; content:""; 
    -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s
}
.cm-button-style04:before{right:-2px;width:2px; height:60px; background-color:#fff}
.cm-button-style04:after{right:0; width:73px; height:58px; border-top:2px solid #fff; border-bottom:2px solid #fff }
.cm-button-style04:hover:before{width:178px}
.cm-button-style04:hover:after{width:176px}
.cm-button-style04 span{position:relative; z-index:1;}
.cm-button-style04 .arrow{position:absolute; top:50%; left:30px; line-height:20px; margin-top:-5px;}
.cm-button-style04:hover span{color:#12845d;}


.main-fran {position:relative; min-height:300px; margin-top:30px; visibility:hidden; opacity:0;filter:Alpha(opacity=0); -webkit-transition: all 1.5s;-moz-transition: all 1.5s;-ms-transition: all 1.5s;-o-transition: all 1.5s;transition: all 1.5s; left:-30%;}
.main-fran.animated {left:0; opacity:1;filter:Alpha(opacity=100);visibility:visible; }

.main-fran-tit {position:absolute; z-index:10; left:0; top:0; width:192px; height:100%; background-color:rgba(18,132,93, 0.8) !important;}
.main-fran-tit {background-color:rgba(1,141,110);}
.main-fran-tit p {font-size:20px; letter-spacing: 5px; color:#fff; font-weight: 600; margin-bottom: 10px;}
.main-fran-tit h3 {font-size:71px; letter-spacing: -0.25px; color:#fff; margin-bottom: 50px; font-weight:400;}

.main-fran-tit-inner {position:relative; top:150px; left:65px;}

.main-fran-slider {width:816px; height:500px;}
.main-fran-slider .slick-arrow {position:absolute; z-index:12; font-size:0; border:0; width:55px; height:55px; cursor:pointer; top:395px;}

.main-fran-img-wrap {width:816px; height:500px; }
.main-fran-img {width:816px; height:500px; overflow:hidden; }
.main-fran-img > span {display:inline-block; -webkit-transform: scale(1.0); -moz-transform: scale(1.0); -ms-transform: scale(1.0); -o-transform: scale(1.0); transform: scale(1.0); -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s;}
.main-fran-img-wrap .main-fran-img:hover > span {-webkit-transform: scale(1.1);  -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform:scale(1.1) ; transform: scale(1.1);}

.main-fran-info {position:absolute; z-index:11; right:0; top:55px; width:420px; height:275px; background-color:#fff; padding:60px 50px;}
.main-fran-info h4 {font-size:25px; line-height: 34px; letter-spacing: -0.5px; color:#4a4a49; font-weight: 500;}
.main-fran-info h4 span {color:#12845d}
.main-fran-info p {font-size:15px; line-height: 25px; letter-spacing: -0.5px; color:#787878; margin:20px 0;}
.main-fran-info ul li {float:left; margin-left: 38px;  }
.main-fran-info ul li a {display:block; width:76px; padding-top: 70px;  font-size:16px; color:#646464; text-align:center;}
.main-fran-info ul li:first-child {margin-left: 20px;}


.main-center {position:relative; min-height:300px; text-align:right; margin-top:30px;  visibility:hidden; opacity:0;filter:Alpha(opacity=0); -webkit-transition: all 1.5s;-moz-transition: all 1.5s;-ms-transition: all 1.5s;-o-transition: all 1.5s;transition: all 1.5s;  right:-30%;}
.main-center.animated {opacity:1;filter:Alpha(opacity=100); right:0; visibility:visible;}

.main-center-tit {position:absolute; z-index:10; right:0; top:0; width:192px; height:100%; background-color:rgba(18,132,93, 0.8) !important;}
.main-center-tit  {background-color:rgba(1,141,110);}
.main-center-tit p {font-size:20px; letter-spacing: 5px; color:#fff; font-weight: 600; margin-bottom: 10px;}
.main-center-tit h3 {font-size:71px; letter-spacing: -2.5px; color:#fff; margin-bottom: 50px; font-weight:400;}

.main-center-tit-inner {position:relative; top:150px; right:65px;}


.main-center-slider {width:816px; height:500px;}
.main-center-slider .slick-arrow {position:absolute; z-index:12; font-size:0; border:0; width:55px; height:55px; cursor:pointer; top:395px;}

.main-center-img-wrap {position:absolute; right:0; top:0; width:816px; height:500px;}
.main-center-img {width:816px; height:500px; overflow:hidden; }
.main-center-img > span {display:inline-block; -webkit-transform: scale(1.0); -moz-transform: scale(1.0); -ms-transform: scale(1.0); -o-transform: scale(1.0); transform: scale(1.0); -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s;}
.main-center-img-wrap  .main-center-img:hover > span {-webkit-transform: scale(1.1);  -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform:scale(1.1) ; transform: scale(1.1);}

.main-center-info {position:absolute; z-index:11; left:0; top:55px; width:430px; height:275px; background-color:#fff; padding:60px 45px; text-align:left;}
.main-center-info h4 {font-size:25px; line-height: 34px; letter-spacing: -0.5px; color:#4a4a49; font-weight: 500;}
.main-center-info h4 span {color:#12845d}
.main-center-info p {font-size:15px; line-height: 25px; letter-spacing: -0.5px; color:#787878; margin:20px 0;}
.main-center-info a {display:inline-block; width:159px; height:48px; background-color:#12845d; border-radius:25px; font-size:15px; line-height: 48px; letter-spacing: -0.5px; color:#fff; text-align:center; margin-top: 20px;}
.main-center-info a:hover {line-height: 45px; background:none; color:#12845d; border:2px solid #12845d; box-sizing:border-box;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}



/* 미디어쿼리 */
@media all and (max-width:1600px) {
	#mainVisual {height:850px;}
	/* #mainVisual .slick-arrow {top:57%;} */
	.main-visual-txt h2 {padding-top:250px;}
	.sub-content article {width:85%; margin:0 auto;}
}

@media all and (max-width:1300px) {
	#mainVisual {height:800px;}
	/* #mainVisual .slick-arrow {top:57%;} */
	.main-visual-txt h2 {padding-top:220px;}
	.sub-content article {width:85%; margin:0 auto;}
}