@charset "utf-8";
/* Clearfix */
.newclearfix:after{clear:both; content:' '; display:block; font-size:0; height:0; line-height:0; visibility:hidden; width:0}
* html .newclearfix,:first-child+html .newclearfix{zoom:1}

/* a */
.intro_panel a,
.intro_panel a > *{text-decoration:none; -webkit-transition:background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out; -moz-transition:background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out; -ms-transition:background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out; -o-transition:background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out; transition:background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out}
.intro_panel a:hover{text-decoration:none}
.intro_panel img,
.intro_panel iframe{vertical-align:middle}

/* Widget */
.panel-container{margin:0; padding:0; background:url(../panel_line.png) repeat-x right center}
.intro_panel{margin:0; padding:0; list-style:none}
.intro_panel li{float:left; margin:0 27px 0 0; padding:0; border-right:3px solid #fff; border-left:3px solid #fff; font-family:'Nanum Gothic','Malgun Gothic',돋움,sans-serif}
.intro_panel li:last-child{margin-right:0}
.intro_panel li a{position:relative; display:block; width:147px; height:120px; padding:10px 10px; background-color:#fff; border:1px solid #a7b5c3; border-radius:8px}
.intro_panel li:hover a,
.intro_panel li a:hover{border-color:#4e99b8; color:#4e99b8}

.intro_panel li a h3,
.intro_panel li a p{margin:0; padding:0; font-weight:500; color:#a7b5c3}
.intro_panel li a h3{margin-bottom:10px; font-weight: 700; font-size:20px}
.intro_panel li a p{line-height:1.5; font-size:15px}
.intro_panel li a span{position:absolute; right:12px; bottom:0; width:56px; height:56px; line-height:56px}
.intro_panel li a i{position:absolute; width:100%; text-align:right; line-height:inherit; font-size:42px; color:#a7b5c3; -webkit-transition:color .2s ease; -moz-transition:color .2s ease; -ms-transition:color .2s ease; -o-transition:color .2s ease; transition:color .2s ease}

.intro_panel li a:hover h3,
.intro_panel li a:hover p,
.intro_panel li a:hover i{border-color:#4e99b8; color:#4e99b8}

.intro_panel li.panel1 a{background-color:#4e99b8; color:#fff}
.intro_panel li.panel1 a h3,
.intro_panel li.panel1 a p,
.intro_panel li.panel1 a i{color:#fff}

.intro_panel li.panel1:hover a,
.intro_panel li.panel1 a:hover{background-color:#fff !important; color:#4e99b8}

.intro_panel li.panel1 a:hover h3,
.intro_panel li.panel1 a:hover p,
.intro_panel li.panel1 a:hover i{color:#4e99b8}

@media screen and (max-width:767px){
	.panel-container{background:none}
	.intro_panel{position:relative; width:300px; height:300px}
	.intro_panel li{position:absolute; float:none; margin:0; border:0}
	.intro_panel li:before{right:80px; bottom:5px; width:50%; height:10%; -webkit-box-shadow:80px 0 5px rgba(0,0,0,0.4); -moz-box-shadow:80px 0 5px rgba(0,0,0,0.4); box-shadow:80px 0 5px rgba(0,0,0,0.4); -webkit-transform:skew(-50deg); -moz-transform:skew(-50deg); -ms-transform:skew(-50deg); -o-transform:skew(-50deg); transform:skew(-50deg); -webkit-transform-origin:0 100%; -moz-transform-origin:0 100%; -ms-transform-origin:0 100%; -o-transform-origin:0 100%; transform-origin:0 100%}
	.intro_panel li:before, .intro_panel li:after{content:""; position:absolute; z-index:-2}
	.intro_panel li.panel1{top:80px; left:0; z-index:3}
	.intro_panel li.panel2{top:40px; left:100px; z-index:2}
	.intro_panel li.panel3{top:0px; left:200px; z-index:1}
	.intro_panel li:hover{z-index:9}
}

@media screen and (max-width:479px){
	.intro_panel li.panel2{left:50px}
	.intro_panel li.panel3{left:100px}
}

/* XE Fix */
.x #zonePageContent .intro_panel{margin:0; padding:0}