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

@supports (-ms-ime-align:auto)
{
	html{
		overflow: hidden;
		height: 100%;      
	}
	body{
		overflow: auto;
		height: 100%;
		position: relative;
	}
}
 
/*Ie 10/11*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
{
	html{
		overflow: hidden;
		height: 100%;   
	}
	body{
		overflow: auto;
		height: 100%;
	}
}


#main_visual {width:100%; min-width:1200px; height:488px; margin:0px; text-align:left; overflow:hidden; box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;z-index:1;position:relative;}
/* slick animation 적용 */
.slider{width:100%; height:100%;}
.bnr_imgslideA {position: relative; width:100%; height:488px; margin:0px;overflow:hidden; box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-webkit-transition:background-size 1s;-moz-transition:background-size 1s;transition:background-size 1s;}
.bnr_imgslideA .slide_img {position: relative; width: 100%; height:488px; overflow: hidden;}
.bnr_imgslideA .slide_img img {width: 100%; min-width:1600px; height:auto; text-align: center;opacity: 1 !important; -webkit-animation-duration: 5s; animation-duration: 5s; transition: all 1s ease;}


.bnr_imgslideA .slide_content_headings {position: absolute; width:100%; text-align: center; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);padding:0 5%;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;z-index:3; }
.bnr_imgslideA .txt1{font-size:50px;color:#fff;line-height:1;letter-spacing:-.05em; margin-bottom:10px; text-shadow:0px 0px 7px rgba(0, 0, 0, .5);}
.bnr_imgslideA .txt2{display:inline-block;padding:7px 10px 3px; font-size:17px;color:#fff;line-height:1;letter-spacing:.-05em; margin-top:10px; text-shadow:0px 0px 3px rgba(0, 0, 0, .5);}


.bnr_imgslideA .view{display:inline-block;border:1px solid #fff;font-family: 'GmarketSansMedium';font-size:14px;color:#fff;padding:10px 40px 12px;margin-top:30px; margin-bottom:20px; box-shadow: 0px 0px 8px rgba(0, 0, 0, .1);}
.bnr_imgslideA .view:hover{border:1px solid #1baf5b;background:#1baf5b;color:#fff;}

.slide_content_headings .animated {transition: all 0.5s ease; -webkit-animation-duration: 3s; animation-duration: 3s;}

.bnr_imgslideA .slide_content {position: absolute; top:0;left:0;-webkit-transition:background-size 1s;-moz-transition:background-size 1s;background:url("/new/img/pan_bg.png") no-repeat right top;background-size:100% 100%; width:60%;height:100%;/* transform: skew(-25deg);margin-left:-50%; */z-index:2;}
.bnr_imgslideA .slide_content .animated {transition: all 0.5s ease; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; }

.slider [data-animation-in] {opacity: 0;-webkit-animation-duration: 1.5s;animation-duration: 1.5s;transition: opacity 0.5s ease 0.3s;}
.slick-dotted .slick-slider { margin-bottom: 0px;}
.slick-dots { position: absolute;bottom: 80px;list-style: none;display: block;text-align: center;padding: 0;margin: 0; width: 100%;}
.slick-dots li { position: relative; display: inline-block; margin: 0 5px;padding: 0;cursor: pointer;}
.slick-dots li button { border: 0; display: block;outline: none;line-height: 0px;font-size: 0px;color: transparent;padding: 5px;cursor: pointer;transition: all 0.3s ease;}
.slick-dots li button:hover,
.slick-dots li button:focus {outline: none;}

.simple-dots .slick-dots li { width: 14px; height: 14px;}
.simple-dots .slick-dots li button { border-radius: 50%;background-color: white;opacity: 0.8;width: 14px;height: 14px;}
.simple-dots .slick-dots li button:hover,
.simple-dots .slick-dots li button:focus { opacity: 1;}
.simple-dots .slick-dots li.slick-active button {opacity: 1;background:#d21217; }

.stick-dots .slick-dots li { height: 3px;width: 50px;}
.stick-dots .slick-dots li button { position: relative; background-color: white;opacity: 0.5; width: 50px; height: 3px;padding: 0;}
.stick-dots .slick-dots li button:hover,
.stick-dots .slick-dots li button:focus {opacity: 1;}
.stick-dots .slick-dots li.slick-active button {color: white;opacity: 1;}
.stick-dots .slick-dots li.slick-active button:hover,
.stick-dots .slick-dots li.slick-active button:focus {opacity: 1;}

.down_top {bottom:20px;width: 100%; margin:0px auto; overflow: hidden;position: absolute;z-index: 100;text-align: center;}
.down_top {animation: scrollAni 2.0s ease-in-out reverse; animation-iteration-count: infinite; 
	-webkit-animation: scrollAni 2.0s ease-in-out reverse; -webkit-animation-iteration-count: infinite; 
	-moz-animation: scrollAni 2.0s ease-in-out reverse; -moz-animation-iteration-count: infinite; 
}
 @keyframes scrollAni{
	0%{bottom: 20px;} 
	25%{bottom: 30px;} 
	50%{bottom: 20px;} 
	75%{bottom: 30px;} 
	100%{bottom: 20px;} 
}
@-webkit-keyframes scrollAni{
	0%{bottom: 20px;} 
	25%{bottom: 30px;} 
	50%{bottom: 20px;} 
	75%{bottom: 30px;} 
	100%{bottom: 20px;} 
}
@-moz-keyframes scrollAni{
	0%{bottom: 20px;} 
	25%{bottom: 30px;} 
	50%{bottom: 20px;} 
	75%{bottom: 30px;} 
	100%{bottom: 20px;} 
}


/* /////////// IMAGE ZOOM /////////// */
@-webkit-keyframes zoomInImage {
  from {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  to {
    -webkit-transform: scale3d(1.15, 1.15, 1.15);
            transform: scale3d(1.15, 1.15, 1.15);
  }
}
@keyframes zoomInImage {
  from {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  to {
    -webkit-transform: scale3d(1.15, 1.15, 1.15);
            transform: scale3d(1.15, 1.15, 1.15);
  }
}
.zoomInImage {
  -webkit-animation-name: zoomInImage;
          animation-name: zoomInImage;
}
@-webkit-keyframes zoomOutImage {
  from {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@keyframes zoomOutImage {
  from {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
.zoomOutImage { -webkit-animation-name: zoomOutImage; animation-name: zoomOutImage;}


#mid_layout {letter-spacing:-.03em; padding-bottom:80px}
#mid_layout h2 {font-weight:500}
#mid_layout h2.lnb_title {display:none; font-size:0; height:0}

.row01 h2, .row03 h2 {font-size:52px; text-align:center; margin-top:60px}

.row01 {height:1060px}
.row01 .divs {position:absolute; overflow:hidden}
.row01 .divs img {transition:all 0.3s ease-in-out; -webkit-transition:all 0.3.0s ease-in-out;}
.row01 .divs img:hover {transition:all 0.3s ease-in-out; -webkit-transition:all 0.3.0s ease-in-out; transform: scale3d(1.1, 1.1, 1.1); -webkit-transform: scale3d(.1.1, .1.1, 1.1);}
.row01 .div01 {left:0; top:110px; width:575px; height:633px;}
.row01 .div02 {right:0; top:110px; width:575px; height:306px;}
.row01 .div03 {right:0; top:437px; width:575px; height:306px;}
.row01 .div04 {left:0; top:767px; width:1170px; height:506px;}
.row01 .divs .img {outline:1px solid red; position:relative; z-index:1}
.row01 .divs .txt {outline:1px solid red; position:absolute; z-index:999}


.row02 {color:#fff; height:300px; text-align:center; margin-top:50px; background:url('/img/main/ma_r02_bg.jpg') no-repeat; background-size:cover; background-attachment:fixed}
.row02 h2 {font-weight:500; font-size:36px; padding-top:70px; text-shadow:0px 0px 7px rgba(0, 0, 0, .7);}
.row02 p {font-size:16px; margin-top:5px; text-shadow: 0px 0px 3px rgba(0, 0, 0, .7); }
.row02 a {margin-top:40px}


.row03 h3 {font-weight:500; font-size:28px}
.row03 ul {margin-top:30px}
.row03 li {float:left; margin-left:26.5px; }
.row03 li:first-child {margin-left:0}
.row03 a {font-family:Roboto; float:left; letter-spacing:0.1em;}
.row03 em {font-family:Roboto; letter-spacing:0.07em;}

.row03 li.li01 em {display:block; color:#3f52a1; margin-top:25px;}
.row03 li.li01 h3 {color:#2d3d7f}
.row03 li.li01 p {font-size:.9em; line-height:30px; color:#616161; border-top:1px solid #c1c1c1; margin:5px 0 15px}

.row03 li.li02 > div {width:377px; height:464px; color:#fff; text-align:center; background:url('/img/main/ma_r03_img2.jpg') no-repeat; }
.row03 li.li02 h3 {font-size:34px; padding-top:75px; text-shadow: 0px 0px 5px rgba(0, 0, 0, .7);}
.row03 li.li02 em {font-size:15px; display:block; margin-top:5px; text-shadow: 0px 0px 3px rgba(0, 0, 0, .7);}
.row03 li.li02 a {float:none; margin-top:32px; /* box-shadow: 0px 0px 3px rgba(195, 140, 100, .9); */ border:1px solid #896f5c}
.row03 li.li02 p {font-size:.95em; line-height:25px; margin:10px 0 0; text-shadow: 0px 0px 3px rgba(0, 0, 0, .7);}

.row03 li.li03 {width:370px}
.row03 li.li03 em {display:block; color:#7c4489; margin-top:25px;}
.row03 li.li03 h3 {color:#462d4c}
.row03 li.li03 p {font-size:.9em; line-height:30px; color:#616161; border-top:1px solid #c1c1c1; ; margin:5px 0 15px}
.row03 li.li03 .div01{width:368px; height:276px; border:1px solid #777}