@charset "utf-8";
body { background:; background-color:#c4cdd3;}
html.ie7 body img,
html.ie8 body img { display:none;}
body > svg { display:none;}
.IndexContent { display: block; background:url(/default/img/yami/img/main/main_bg.jpg) no-repeat; background-size: cover; }
.GridWrap { position:relative; z-index:2;}
.GridWrap .ItemWrap { overflow:hidden; margin:0 0 20px;}
.GridWrap .Item { overflow:hidden; position:relative;}
.GridWrap .Item > a > img { width:100%;}
.GridWrap .Item .SVGHoverTitle,
.GridWrap .Item .ItemTitle { display:none;position:absolute; left:10px; top:15px; z-index:4; color:#000; font-size:12px;}
.GridWrap .Item .ItemTitle2 { position:absolute; left:10px; top:15px; z-index:4; color:#fff; font-size:12px;}
.GridWrap .Item .SVGHoverTitle { color:#4DC1B4; z-index:8;}
.GridWrap .Item .Cover { position:absolute; left:0; top:0; z-index:5; width:100%; height:100%; }
.GridWrap .Item .Hover { position:absolute; z-index:5; width:100%; height:100%; opacity:0.85; filter:alpha(opacity=85); background-color:#000;}
.GridWrap .Item .slipbox {position:absolute; top:-100%;  left:-100%; width:100%; height:100%; text-align:center;  background:rgba(0,0,0,0.8); z-index:50;  vertical-align:middle}
.GridWrap .Item .slipbox img { width: 100%; }
.GridWrap .Item .slipbox h1 {color:#fff;text-align:left;padding:20px 20px 10px;}
.GridWrap .Item .slipbox p {color:#fff;text-align:left;padding:0px 20px;font-size:12px;line-height:1.4;}
.GridWrap .Item .BoxLink { width:100%; height:100%;}
.GridWrap .Item .HoverText { position:absolute; left:10px; bottom:10px; z-index:5; color:#fff; font-size:12px; line-height:1.6;}
.GridWrap .Item3 {background:rgba(61,192,185,0.8);;}
.GridWrap .Item4 {background:rgba(255,255,255,0.8);}
.GridWrap .Item5 {background:rgba(255,235,53,0.8);}
.GridWrap .Item5_1 {background:rgba(0,153,154,0.8);}
.GridWrap .Item6 {background:rgba(61,61,61,0.8);}
.GridWrap .Item7 {background:rgba(0,0,0,0.8);}
.GridWrap .Item8 {background:rgba(241,241,241,0.8);}
.GridWrap .Item9 {background:#000;}
.GridWrap .Item10 {background:rgba(255,255,255,0.8);}
.GridWrap .ItemWrap.Divide2 .LeftArea { float:left; width:50%;}
.GridWrap .ItemWrap.Divide2 .LeftArea .Item { margin-right:9px;}
.GridWrap .ItemWrap.Divide2 .RightArea { float:left; width:50%;}
.GridWrap .ItemWrap.Divide2 .RightArea .Item { margin-left:9px;}
.GridWrap .Item > img { width:100%;}
.GridWrap .Item1 .item .Tit { position:absolute; z-index:5;}
.GridWrap .Item1 .item .Tit > span { display:block; padding:0px; color:#fff; font-size:32px;line-height:1;}
.GridWrap .Item1 .item .Tit > span .kor {width:70%;font-size:14px;line-height:1.5;margin-top:10px;display:block;}
.GridWrap .item .Tit { left:25px; top:25px; font-size:42px; text-shadow:none;}
.GridWrap .Item2 h2.Tit { position:absolute; left:10px; top:70%; z-index:15; color:#fff; font-size:14px;line-height:1;}
.GridWrap .Item2 h2.Tit .kor{ font-size:14px;margin-top:5px;display:block;}
/* ���ν����̵� ù��° */
.indexSlider1 { position:relative; height:0; padding:0 0 90% 0; z-index:1;}
.indexSlider1 .innerFrame { width:100%; height:2500px;}
.indexSlider1 .innerFrame .slider { width:100%; height:100%;}
.indexSlider1 .innerFrame .slider .item { float:left; width:100%;}
.indexSlider1 .innerFrame .slider .item:first-child { visibility:visible;}
.indexSlider1 .innerFrame .slider .item img { width:100%; height:auto;}
.indexSlider1indicator { position:absolute; left:0; bottom:15px; width:100%; height:15px; z-index:10; text-align:center;}
.indexSlider1indicator button { display:inline-block; width:13px; height:13px; background:#fff;border-radius:13px; text-indent:-50px;-webkit-transition: 0.25s;transition: 0.25s;}
.indexSlider1indicator button.active { width:33px; height:13px; background:#21bbb1;border-radius:13px; }
.indexSlider1Prev { display:none; position:absolute; left:10px; top:50%; z-index:10; width:53px; height:53px; margin-top:-27px;opacity:0.5;-webkit-transition: 0.25s;transition: 0.25s;}
.indexSlider1Prev:hover { opacity:1;}
.indexSlider1Next { display:none; position:absolute; right:10px; top:50%; z-index:10; width:53px; height:53px; margin-top:-27px;opacity:0.5;-webkit-transition: 0.25s;transition: 0.25s;}
.indexSlider1Next:hover { opacity:1;}
/* ���ν����̵� ù��° */
/* ���ν����̵� �ι�° */
.indexSlider2 { position:relative; height:0; padding:0 0 43% 0; z-index:1;}
.indexSlider2 .innerFrame { width:100%; height:2500px;}
.indexSlider2 .innerFrame .slider { width:100%; height:100%;}
.indexSlider2 .innerFrame .slider .item { float:left; width:100%; height:100%; visibility:hidden;}
.indexSlider2 .innerFrame .slider .item:first-child { visibility:visible;}
.indexSlider2 .innerFrame .slider .item img { width:100%;}
.indexSlider2indicator { position:absolute; right:20px; top:15px; height:15px; z-index:10; text-align:right;}
.indexSlider2indicator button { display:inline-block; width:10px; height:10px; background:#fff;border-radius:10px; text-indent:-50px;-webkit-transition: 0.25s;transition: 0.25s;}
.indexSlider2indicator button.active { width:20px; height:10px; background:#21bbb1;border-radius:10px; }
.indexSlider2Prev { display:none; position:absolute; left:0px; top:50%; z-index:10; width:53px; height:53px; margin-top:-27px;opacity:0.5;-webkit-transition: 0.25s;transition: 0.25s;}
.indexSlider2Prev img {width:40px;}
.indexSlider2Prev:hover { opacity:1;}
.indexSlider2Next { display:none; position:absolute; right:0px; top:50%; z-index:10; width:53px; height:53px; margin-top:-27px;opacity:0.5;-webkit-transition: 0.25s;transition: 0.25s;}
.indexSlider2Next img {width:40px;}
.indexSlider2Next:hover { opacity:1;}
/* ���ν����̵� �ι�° */
@media all and (min-width: 480px) {

.GridWrap .Item .SVGHoverTitle2 {font-size:13px;padding:10px;color:#fff;line-height:16px;}
.GridWrap .Item .SVGHoverTitle,
.GridWrap .Item .ItemTitle { left:20px; top:15px; font-size:19px;}
.GridWrap .Item .ItemTitle2 { left:20px; top:15px; font-size:19px;}
.GridWrap .Item2 h2.Tit { position:absolute; left:20px;  z-index:20; color:#fff; font-size:16px;}
.GridWrap .Item2 h2.Tit .kor{ font-size:16px; }
}

@media all and (min-width: 320px) {
.IndexContent { margin-top: 62px; }
}
@media all and (min-width: 768px) and (max-width: 959px) {
.GridWrap { width:580px; margin:0 auto;}
.GridWrap .Item2 h2.Tit { top:165px;  }
}
@media all and (min-width: 980px) {
.IndexContent { margin-top: 0; padding-top: 105px; height: 100vh; background-size: cover; }
.indexSlider1Prev,
.indexSlider1Next,
.indexSlider2Prev,
.indexSlider2Next { display:block;}
.GridWrap { overflow:hidden; width:756px; margin:0 auto;}
.GridWrap > .LeftSect { float:left; width:498px;}
.GridWrap > .RightSect { float:Right; position:relative; width:240px;}
.GridWrap > .RightSect .LeftArea,
.GridWrap > .RightSect .RightArea,
.GridWrap > .RightSect .Item { float:none; width:100%; margin:0 !important;}
.GridWrap .Item1 { width:518px; height:499px;}
.GridWrap .Item2 { height:222px;}
.GridWrap .Item2 .indexSlider2 { height:222px;}
.GridWrap .Item1 .indexSlider1 { height:458px;}
.GridWrap .Item8 { position:absolute; left:0; top:0;}
.GridWrap .Item10 { position:absolute; left:0; top:240px;}
.GridWrap .Item6 { position:absolute; left:0; top:480px;}
.GridWrap .Item9 { position:absolute; left:0; top:720px;}
.GridWrap .Item7 { position:absolute; left:0; top:960px;}
.GridWrap .Item2 h2.Tit {}
.GridWrap .item .Tit { left:25px;top:25px; text-shadow:none;}
.GridWrap .Item {height:220px;}
.GridWrap .Item2 h2.Tit { top:165px;  }
}
@media all and (min-width: 1280px) {
body { background-color:#c4cdd3;}
.GridWrap { width:1320px; height:757px; position:relative;}
.GridWrap > .LeftSect,
.GridWrap > .RightSect { width:auto; position:static; float:none;}
.GridWrap .Item { position:absolute; left:auto; top:auto;}
.GridWrap .Item > img { width:100% !important; height:100% !important;}
.GridWrap .Item1 { left:0; top:0; height:499px !important;}
.GridWrap .Item9 { left:auto; right:266px; bottom:0; width:251px !important; height:241px; margin:0 !important;}
.GridWrap .Item10 { left:auto; right:0; bottom:0; width:250px !important; height:241px; margin:0 !important;}
.GridWrap .Item6 { left:auto; right:534px; top:0; width:251px !important; height:241px; margin:0 !important;}

.GridWrap .Item7 { left:auto; right:534px; top:258px; width:251px !important; height:241px; margin:0 !important;}
.GridWrap .Item8 { left:auto; right:534px; bottom:0; width:251px !important; height:241px; margin:0 !important;}
.GridWrap .Item2 { right:0; top:0; width:517px !important; height:241px; margin:0 !important;}
.GridWrap .Item3 { right:0; top:258px; width:250px !important; height:241px; margin:0 !important;}
.GridWrap .Item4 { right:266px; top:258px; width:251px !important; height:241px; margin:0 !important;}
.GridWrap .Item5 { left:0; bottom:0; width:251px !important; height:241px; margin:0 !important;}
.GridWrap .Item5_1 { left:267px; bottom:0; width:251px !important; height:241px; margin:0 !important;}
}