@charset "utf-8";

html { -webkit-text-size-adjust:none; }
.code {position:absolute; top: 440px; z-index:100; color:#fff; width: 1150px; margin:0 auto; text-align:right; font-size:14px;}
.code .mversion {color:#bbb; font-size:13px; line-height:10px; text-align:left; font-weight:bold; padding-top:4px;}
.pro01 {width: 367px; height:330px; background: url(../../images/pro_img_bg01.png) no-repeat top right; float:left; text-align: center; padding: 80px 0 0 0;border: 1px solid #fff}
.pro02 {width: 367px; height:330px; background: url(../../images/pro_img_bg02.png) no-repeat top right; float:left; margin: 0 2% 0 2%; text-align: center; padding: 80px 0 0 0;}
.pro03 {width: 367px; height:330px; background: url(../../images/pro_img_bg03.png) no-repeat top right; float:left; text-align: center; padding: 80px 0 0 0;}
.pro_title {font-size:24px; padding: 10px 0 20px 0; letter-spacing:-1px;}
.pro_con {font-size:15px; padding: 0px 20px 0 20px;}
.mboard_title a {color:#555555;}
.mboard_title a:hover {color:#ff7011;text-decoration:underline;}
.mboard01 {width: 342px; background:#f5f5f5; float:left;}
.mboard02 {width: 342px; background:#f5f5f5; float:left;margin: 0 5% 0 5%;}
.mboard03 {width: 342px; background:#f5f5f5; float:left;}
.mboard_title {font-size:17px; letter-spacing:-1px; line-height:150%;}
.mboard_con {font-size:14px;padding-top: 12px;line-height:150%;}
.pro04 {text-align:left; background: url(../../images/pro_bg02.png) no-repeat top right, url(../../images/pro_bg01.png);  background-size: auto 162px;height:162px; width: 564px; float:left; color:#fff;}
.pro04 a {color:#fff;}
.pro05 {text-align:left; background: url(../../images/pro_bg04.png) no-repeat top right, url(../../images/pro_bg03.png);  background-size: auto 162px;height:162px; width: 564px; float:right; color:#fff;}
.pro05 a {color:#fff;}
.mpro_title {font-size:21px; font-weight:bold; padding: 30px 0 0px 40px; letter-spacing:-1px;}
.mpro_con {font-size:13px; padding: 0px 0 10px 40px;}
.mpro_btn a {font-size: 13px; border: 1px solid #fff; margin: 0 0 0 40px; text-align:center; padding:5px 13px;}
.mpro_btn a:hover {font-size: 13px; border: 1px solid #fff; margin: 0 0 0 40px; text-align:center; background: #fff; color:#333;}
.mnotice_title {font-size:15px; display: inline-block; padding-top: 0px; overflow: hidden; width: 100%; text-overflow: ellipsis; white-space: nowrap; margin:0; line-height:150%;}
.mnotice_title a {color:#555555;}
.mnotice_title a:hover {color:#ff7011;text-decoration:underline;}

.familysite-box{position:relative; float:right; width:170px; text-align:left; margin: -6px -25px 0 0;}
.familysite-box > a{display:block; height:30px; line-height:30px; text-indent:20px; border:1px solid #46474c; background-color:#313238; color:#8d8d8d; }
.familysite-box > a i{position:absolute; right:15px; top:7px;}
.family-list{position:absolute; bottom:30px; left:0px; width:168px;  padding:10px 0; background-color:#313238; border:1px solid #46474c; border-bottom:0;  z-index:11; display:none; }
.family-list a{display:block; padding:5px 0px; color:#fff; font-weight:normal; font-size:14px; width:108px; }


@media (max-width:1149px) {
.code {top: 440px; width: 100%;}
.pro01 {width: 32%;}
.pro02 {width: 32%; margin: 0 1% 0 1%;}
.pro03 {width: 32%;}
.pro_title {font-size:20px; color:#333; padding: 10px 0 20px 0;}
.mboard01 {width: 30%;}
.mboard02 {width: 30%;}
.mboard03 {width: 30%;}
.pro04 {text-align:left; background: url(../../images/pro_bg01.png) no-repeat top left, url(../../images/pro_bg02.png);  background-size: auto 162px;height:162px; width: 49%; float:left; color:#fff;}
.pro05 {text-align:left; background: url(../../images/pro_bg03.png) no-repeat top left, url(../../images/pro_bg04.png);  background-size: auto 162px;height:162px; width: 49%; float:right; color:#fff;}
.family-list a{display:block; padding:5px 0px; color:#fff; font-weight:normal; font-size:14px; width:138px; }
}


@media (max-width:768px) {
.code {top: 230px; width: 100%;}
.code a {display:none;}
.pro01 {width: 100%; padding: 30px 0 30px 0; height:auto;background:#f5f5f5;}
.pro02 {width: 100%;margin: 20px 0; padding: 30px 0 30px 0; height:auto;background:#f5f5f5;}
.pro03 {width: 100%; padding: 30px 0 30px 0; height:auto;background:#f5f5f5;}
.mboard01 {width: 100%; background:#f5f5f5;}
.mboard02 {width: 100%; background:#f5f5f5; margin: 0;}
.mboard03 {width: 100%; background:#f5f5f5;}
.pro04 {text-align:left; background: url(../../images/pro_bg01.png) no-repeat top left, url(../../images/pro_bg02.png);  background-size: auto 162px;height:162px; width: 100%; color:#fff;}
.pro05 {text-align:left; background: url(../../images/pro_bg03.png) no-repeat top left, url(../../images/pro_bg04.png);  background-size: auto 162px;height:162px; width: 100%; color:#fff; margin-top:20px;}
.mpro_title {font-size:18px; font-weight:normal; padding: 30px 0 0px 20px; letter-spacing:-1px;}
.mpro_con {font-size:13px; padding: 0px 0 10px 20px;}
.mpro_btn a {font-size: 13px; border: 1px solid #fff; margin: 0 0 0 20px; text-align:center; padding:5px 13px;}
.mpro_btn a:hover {font-size: 13px; border: 1px solid #fff; margin: 0 0 0 20px; text-align:center; background: #fff; color:#333;}
}

/* 메인 :: 비주얼 */
#mainVisual {
	position:relative;
	width:100%;
	height:461px;
	overflow:hidden;
	margin-top: 59px;
	background: #222;
	font-family: 'NanumSquare';
}
#mainVisual .visual-item {
	position:relative;
	width:100%;
	overflow:hidden;
}
#mainVisual .visual-item > img {
	width:100%;
	-ms-transform: scale(1.2, 1.2); /* IE 9 */
	-o-transform: scale(1.2, 1.2); /* IE 9 */
	-moz-transform: scale(1.2, 1.2); /* IE 9 */
	-webkit-transform: scale(1.2, 1.2); /* Chrome, Safari, Opera */
	transform: scale(1.2, 1.2);
	-webkit-transition:transform 5000ms ease-in-out; /* Safari */
	-moz-transition:transform 5000ms ease-in-out; /* Safari */
	-o-transition:transform 5000ms ease-in-out; /* Safari */
	-ms-transition:transform 5000ms ease-in-out; /* Safari */
	transition:transform 5000ms ease-in-out;
}
#mainVisual .visual-item:focus {
	outline:none;
}
#mainVisual .visual-txt {
	position:absolute;
	margin: 0 auto;
	top:70px;
	width: 100%;
	text-align:center;
}
#mainVisual .visual-inner-txt {
	color:#fff;
	padding-bottom:30px;
	text-align:center;
	width: 1150px;
	margin: 0 auto;
}
#mainVisual .visual-inner-txt h2, #mainVisual .visual-inner-txt strong, #mainVisual .visual-inner-txt p {
	display:block;
	opacity:0;
	filter:Alpha(opacity=0);
	-moz-transform:translateX(10%);
	-ms-transform:translateX(10%);
	transform:translateX(10%);
	-moz-transition:all 0.5s;
	-ms-transition:all 0.5s;
	transition:all 0.5s;
	line-height:60px;
	letter-spacing:0px;
	font-family: 'NanumSquare';
}

#mainVisual .visual-inner-txt h2 .red_font01 {
color:#ff5f11;
display:inline-block;
font-size:48px;
font-weight:bold;
opacity:1;
margin:0;
padding:0;
font-family: 'NanumSquare';
}

.protitle {
font-size:60px; float:left; color:#ff5f11; font-weight:bold;	
}
#mainVisual .visual-inner-txt strong {
	padding:0px 20px 15px 0px;
	font-size:18px;
	font-weight:300;
	transition-delay:0.2s;
	line-height:28px;
	letter-spacing:-1px;
	font-family: 'NanumSquare';
}

#mainVisual .visual-inner-txt span {
	font-size:36px;
	font-weight:300;
	transition-delay:0.4s
}

#mainVisual .visual-inner-txt p {
	font-size:27px;
	padding-top:15px;
	line-height:24px;
	transition-delay:0.6s;
	letter-spacing:-1px;
}

#mainVisual .visual-txt a {
	margin-left:0px;
	color:#fff;
	padding:0 42px 5px 0;
	background:url(/images/main/more_bg.png) no-repeat 0 100%;
	opacity:0;
	filter:Alpha(opacity=0);
	transition:all 0.5s 0.8s;
}
#mainVisual .visual-txt a:hover {
	margin-left:0px;
	color:#ff7011;
	padding:0 42px 5px 0;
	background:url(/images/main/more_bg.png) no-repeat 0 100%;
	opacity:0;
	filter:Alpha(opacity=0);
	transition:all 0s 0s;
}
#mainVisual .visual-txt a.long {
	margin-left:0px;
	color:#fff;
	padding:0 42px 5px 0;
	background:url(/images/main/more_bg01.png) no-repeat 0 100%;
	transition:all 0.5s 0.8s;
}
#mainVisual .visual-txt a.long:hover {
	margin-left:0px;
	color:#ff7011;
	padding:0 42px 5px 0;
	background:url(/images/main/more_bg01.png) no-repeat 0 100%;
	transition:all 0s 0s;
}
/* active */
#mainVisual .visual-item.active > img {
	-ms-transform: scale(1, 1); /* IE 9 */
	-o-transform: scale(1, 1); /* IE 9 */
	-moz-transform: scale(1, 1); /* IE 9 */
	-webkit-transform: scale(1, 1); /* Chrome, Safari, Opera */
	transform: scale(1, 1);
}
#mainVisual .active .visual-inner-txt h2, #mainVisual .active .visual-inner-txt strong, #mainVisual .active .visual-inner-txt span, #mainVisual .active .visual-inner-txt p {
	-moz-transform:translateX(0);
	-ms-transform:translateX(0);
	transform:translateX(0);
}
#mainVisual .active .visual-inner-txt h2, #mainVisual .active .visual-inner-txt strong, #mainVisual .active .visual-txt a {
	opacity:1.0;
	filter:Alpha(opacity=100);
}
#mainVisual .active .visual-inner-txt span {
	opacity:1.0;
	filter:Alpha(opacity=73);
}
#mainVisual .active .visual-inner-txt p {
	opacity:1.0;
	filter:Alpha(opacity=54);
}

 @media all and (max-width:1149px) {
h2 {
	margin: 0px;
	padding: 20px 0px 30px 0px;
	color:#fff;
	font-size:38px;
	letter-spacing:-1px;
	font-family:NanumSquare;
	font-weight:normal;
	line-height:100%;
}
#mainVisual .visual-inner-txt h2 .red_font01 {
color:#ff5f11;
display:inline;	
font-size:38px;
font-weight:bold;
opacity:1;
font-family: 'NanumSquare';
}
#mainVisual .visual-inner-txt {
	width: 80%;
}
#mainVisual .visual-txt a {
	margin-left:0px;
	color:#fff;
	padding:0 42px 5px 0px;
	background:url(/images/main/more_bg.png) no-repeat 0 100%;
	margin-left: 90px;
	opacity:0;
	filter:Alpha(opacity=0);
	transition:all 0.5s 0.8s;
}
#mainVisual .visual-txt a:hover {
	margin-left:0px;
	color:#ff7011;
	padding:0 42px 5px 0px;
	background:url(/images/main/more_bg.png) no-repeat 0 100%;
	margin-left: 90px;
	opacity:0;
	filter:Alpha(opacity=0);
	transition:all 0s 0s;
}
#mainVisual .visual-txt a.long {
	margin-left:0px;
	color:#fff;
	padding:0 42px 5px 0px;
	background:url(/images/main/more_bg01.png) no-repeat 0 100%;
	margin-left: 90px;
	transition:all 0.5s 0.8s;
}
#mainVisual .visual-txt a.long:hover {
	margin-left:0px;
	color:#ff7011;
	padding:0 42px 5px 0px;
	background:url(/images/main/more_bg01.png) no-repeat 0 100%;
	margin-left: 90px;
	transition:all 0s 0s;
}
}
@media all and (max-width:768px) {
#nav {
	display:none;
}
/* 메인 비주얼 */
	#mainVisual {
	position:relative;
	margin-top: 20px;
	height:270px;
}

#mainVisual .visual-txt {
	bottom:40%;
}
#mainVisual .visual-inner-txt {
	border-left:0;
	padding:0;
	width: 80%;
}

#mainVisual .visual-inner-txt p {
	font-size:18px;
	padding-top:0px;
	line-height:24px;
	transition-delay:0.6s;
}

#mainVisual .visual-inner-txt h2 img {
	height:20px;
}
h2 {
	margin: 0px;
	padding: 10px 0px 10px 0px;
	color:#fff;
	font-size:22px;
	letter-spacing:-1px;
	font-weight:normal;
	line-height:10px;
}
#mainVisual .visual-inner-txt strong {
	font-size:14px;line-height: 130%; margin-top:10px;
}
.protitle {
font-size:30px; float:left; color:#ff5f11; font-weight:bold;	
}
#mainVisual .slick-arrow {
	bottom:auto;
	top:30%;
	margin-bottom:0px;
	margin-top:30px;
	width:40px;
	height:40px;
	left:0;
	background-size:40px 40px !important;
}
#mainVisual .slick-arrow.slick-next {
	margin-left:0;
	left:auto;
	right:0;
}
#mainVisual .visual-inner-txt h2 .red_font01 {
color:#ff5f11;
display:inline-block;	
font-size:24px;
font-weight:bold;
opacity:1;
font-family: 'NanumSquare';
}
#mainVisual .visual-inner-txt h2, #mainVisual .visual-inner-txt span, #mainVisual .visual-inner-txt p {
	display:block;
	opacity:0;
	filter:Alpha(opacity=0);
	line-height:30px;
	letter-spacing:-1px;
	font-family: 'NanumSquare';
}
.familysite-box{display:none;}
#mainVisual .slick-arrow {
	bottom:auto;
	top:50%;
	margin-bottom:0px;
	margin-top:-20px;
	width:40px;
	height:40px;
	left:0;
	background-size:40px 40px !important;
}
#mainVisual .visual-txt a {
	display:none;
}
#mainVisual .visual-txt a.long {
	display:none;
}
}
/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}
.slick-dots {position:absolute; top:420px; left:50%; z-index:100; margin-left: -30px;}
.slick-dots li {float:left; margin-right:7px;text-align:center;}
.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
      transition: all ease-in-out .3s;
      opacity: .2;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}
.slick-active {
      opacity: .5;
    }

.slick-current {
      opacity: 1;
	  backgorund:#fff;
    }
	
	/* Arrows */
#mainVisual .slick-arrow {
	position:absolute;
	bottom:45%;
	margin-bottom:250px;
	width:63px;
	height:59px;
	left:6%;
	background:none;
	border:0;
	cursor:pointer;
	z-index:99;
	font-size:0;
	-webkit-transition:all 300ms;
	-moz-transition:all 300ms;
	-o-transition:all 300ms;
	-ms-transition:all 300ms;
	transition:all 300ms
}
#mainVisual .slick-arrow {
	bottom:auto;
	top:50%;
	margin-bottom:0px;
	margin-top:-20px;
	width:80px;
	height:80px;
	left:0;
	background-size:80px 80px !important;
}
#mainVisual .slick-arrow.slick-next {
	margin-left:0;
	left:auto;
	right:0;
}
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before,
.slick-next:before
{
    font-size: 100px;
    line-height: 1;

    opacity: .5;
    color: white;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev
{
    left: -25px;
}
[dir='rtl'] .slick-prev
{
    right: -25px;
    left: auto;
}
.slick-prev:before
{
    content:url(../../images/main/main_visual_prev_btn.png)
}
[dir='rtl'] .slick-prev:before
{
    content: url(../../images/main/main_visual_prev_btn.png);
}

.slick-next
{
    right: -25px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}
.slick-next:before
{
    content: url(../../images/main/main_visual_next_btn.png);
}
[dir='rtl'] .slick-next:before
{
    content: url(../../images/main/main_visual_next_btn.png);
}