/* **************************************** *
* 우리아이들병원
* **************************************** */

/* intro01(개요) */
.intro01 { }
.intro01 .top_visual { background: url(../images/intro/bg_intro01.jpg) 50% no-repeat; background-size: cover; }
.intro01 .top_visual .tit_sub .icon { width: 150px; background: url(../images/intro/icon_intro01.png) 50% no-repeat; }
.intro01 .box01 { background: #f4f4f4; padding-top: 100px; }
.intro01 .box01 .inner { max-width: 1200px; margin: 0 auto; }
.intro01 .box01 .inner ul li{ float:left; width:23%; height:360px; padding:0 26px; box-sizing:border-box; margin:1% 1%; background:#fff; border:1px solid #eee; border-radius:10px; font-size:15px; text-align:center; }
.intro01 .box01 .inner ul li .icon{ display:block; width:80px; height:80px; margin:50px auto 30px; border-radius:100px; }
.intro01 .box01 .inner ul li.n1 .icon{ background:#84bf45 url(../images/intro/icon_intro01_1_1.png) 50% no-repeat; background-size:70px;}
.intro01 .box01 .inner ul li.n11 .icon{ background:#12449b url(http://sb.woorisoa.co.kr/images/intro/icon_intro_240724_1.png) 50% no-repeat; background-size:70px;}
.intro01 .box01 .inner ul li.n12 .icon{ background:#12449b url(http://sb.woorisoa.co.kr/images/intro/icon_intro_240724_2.png) 50% no-repeat; background-size:70px;}
.intro01 .box01 .inner ul li.n2 .icon{ background:#84bf45 url(../images/intro/icon_intro01_1_2.png) 50% no-repeat; background-size:70px;}
.intro01 .box01 .inner ul li.n3 .icon{ background:#84bf45 url(../images/intro/icon_intro01_1_3.png) 50% no-repeat; background-size:70px;}
.intro01 .box01 .inner ul li.n4 .icon{ background:#84bf45 url(../images/intro/icon_intro01_1_4.png) 50% no-repeat; background-size:70px;}
.intro01 .box01 .inner ul li.n5 .icon{ background:#84bf45 url(../images/intro/icon_intro01_1_5.png) 50% no-repeat; background-size:70px;}
.intro01 .box01 .inner ul li.n6 .icon{ background:#84bf45 url(../images/intro/icon_intro01_1_6.png) 50% no-repeat; background-size:70px;}
.intro01 .box01 .inner ul li.n7 .icon{ background:#84bf45 url(../images/intro/icon_intro01_1_7.png) 50% no-repeat; background-size:70px;}
.intro01 .box01 .inner ul li.n8 .icon{ background:#84bf45 url(../images/intro/icon_intro01_1_8.png) 50% no-repeat; background-size:70px;}
.intro01 .box01 .inner ul li.n9 .icon{ background:#84bf45 url(../images/intro/icon_intro01_1_9.png) 50% no-repeat; background-size:70px;}
.intro01 .box01 .inner ul li.n10 .icon{ background:#84bf45 url(../images/intro/icon_intro01_1_10.png) 50% no-repeat; background-size:70px;}
.intro01 .box01 .inner ul li .txt{ color:#777;}
.intro01 .box01 .inner ul li .txt strong{ color:#222; font-weight:bold;}

@media screen and (max-width:1200px) {
.intro01 .box01 .inner ul li{ width:31.33%; margin:1% 1%;}
}
@media screen and (max-width:1023px) {
.intro01 .box01 .inner .cont .box { padding: 50px 50px 0; }
.intro01 .box01 .inner .cont .tit { font-size: 26px; }
.intro01 .box01 .inner .cont .desc { font-size: 15px; line-height: 1.8; }
}
@media screen and (max-width:768px) {
.intro01 .box01 { padding-top: 60px; }
.intro01 .box01 .inner .cont, .intro01 .box01 .inner .img { width: 100%; height: 270px; clear: both; }
.intro01 .box01 .inner .img { height: 200px; }
.intro01 .box01 .inner .cont .box { padding: 30px 20px 0; }
.intro01 .box01 .inner .cont .tit { font-size: 24px; text-align: center; padding-bottom: 20px; }
.intro01 .box01 .inner .cont .desc { font-size: 14px; line-height: 1.8; }
.intro01 .box01 .inner ul li{ width:100%; height:auto; padding:0 20px 40px 20px; margin:0 0 10px 0;}
}
/* intro02(연혁) */
.intro02 { }
.intro02 .top_visual { background: url(../images/intro/bg_intro02.jpg) 50% no-repeat; background-size: cover; }
.intro02 .top_visual .tit_sub .icon { width: 150px; background: url(../images/intro/icon_intro01.png) 50% no-repeat; }
.intro02 .box01 { padding: 0; }
.intro02 .box01 .inner { max-width: 1060px; margin: 0 auto; text-align: left; margin-top: 40px; }
.intro02 .box01 .inner > div > div{ position:relative; margin-bottom:50px; background: url(../images/intro/img_intro02_3_c.png) 0px 14px no-repeat;}
/*.intro02 .box01 .inner .year2016, .intro02 .box01 .inner .year2017, .intro02 .box01 .inner .year2018 { margin-bottom: 58px; }
.intro02 .box01 .inner .year2014 { margin-bottom: 68px; }*/
/*.intro02 .box01 .inner .left{background: url(../images/intro/img_intro02_3_c.png) 0px 97% no-repeat;}*/
.intro02 .box01 .inner .left, .intro02 .inner .right { position: relative; width: 42%; float: left; }
.intro02 .box01 .inner .left .bg { position: absolute; top: 34px; left: 0; bottom:54px; width: 40px;  background: url(../images/intro/img_intro02_3.png) 0px 14px repeat-y; }
.intro02 .box01 .inner .right .bg { position: absolute; top: 34px; left: 0; bottom:54px; width: 40px; background: url(../images/intro/img_intro02_3.png) 0px 14px repeat-y; }
.intro02 .box01 .inner .right { margin-left: 14%; }
.intro02 .box01 .inner .left > div, .intro02 .box01 .inner .right > div { width: 450px; padding-left: 40px; }
.intro02 .box01 .inner .tit { display: block; padding-bottom: 20px; color: #68c00c; font-size: 30px; font-weight: bold; }
.intro02 .box01 .inner ul li { font-size: 15px; margin-bottom: 8px; letter-spacing:-0.05em; }
.intro02 .box01 .inner ul li.em { color: #68c00c; font-weight: bold; }
.intro02 .box01 .inner ul li .month { padding-right: 6px; font-weight: bold; }
@media screen and (max-width:1200px) {
}
@media screen and (max-width:1023px) {
.intro02 .box01 .inner .left > div, .intro02 .box01 .inner .right > div { width: 100%;}
.intro02 .box01 .inner .right { margin-left: 8%; }
}
@media screen and (max-width:768px) {
.intro02 .box01 .inner { text-align: center; }
.intro02 .box01 .inner .left, .intro02 .inner .right { width: 100%; float: none; clear: both; }
.intro02 .inner .bg { display: none; }
.intro02 .box01 .inner .left{ background:none;}
.intro02 .box01 .inner > div > div{ background:none;}
.intro02 .box01 .inner .right { margin: 0; }
.intro02 .box01 .inner .left > div, .intro02 .box01 .inner .right > div { width: 100%; padding-left: 0px; }
/*.intro02 .box01 .inner .year2017, .intro02 .box01 .inner .year2016, .intro02 .box01 .inner .year2015, .intro02 .box01 .inner .year2014 { margin-bottom: 40px; }*/
.intro02 .box01 .inner ul li { font-size: 14px; }
}
/* intro03(인사말) */
.intro03 { }
.intro03 .top_visual { background: url(../images/intro/bg_intro03.jpg) 50% no-repeat; background-size: cover; }
.intro03 .top_visual .tit_sub .icon { width: 150px; background: url(../images/intro/icon_intro01.png) 50% no-repeat; }
.intro03 .top_visual .desc { padding-bottom: 20px; }
/* intro04(비전미션핵심가치) */
.intro04 { }
.intro04 .top_visual { background: url(../images/intro/bg_intro04.jpg) 50% no-repeat; background-size: cover; }
.intro04 .top_visual .tit_sub .icon { width: 150px; background: url(../images/intro/icon_intro01.png) 50% no-repeat; }
.intro04 .top_visual .desc { padding-bottom: 20px; }
.intro04 .box01 { position: relative; max-width: 1000px; margin: 0 auto; }
.intro04 .box01 .cont { overflow: hidden; margin-top: 50px; padding-bottom: 30px; }
.intro04 .box01 .cont > div { width: 50%; float: left; }
.intro04 .box01 .cont .tit { display: block; padding-bottom: 20px; font-family: 'Nanum Myeongjo'; font-size: 30px; }
.intro04 .box01 .cont .desc2 { font-size: 16px; }
.intro04 .box01 .value_list { width: 640px; margin: 0 auto; margin-top: 50px; }
.intro04 .box01 .value_list li { text-align: left; line-height: 46px; }
.intro04 .box01 .value_list li .tit { font-size: 18px; font-weight: bold; padding: 0 20px 10px 40px; }
.intro04 .box01 .value_list li .txt { font-size: 16px; }
.intro04 .box01 .value_list li.no1 .tit { background: url(../images/intro/img_intro04_2.png) 0 0px no-repeat; background-size: 30px; }
.intro04 .box01 .value_list li.no2 .tit { background: url(../images/intro/img_intro04_3.png) 0 0px no-repeat; background-size: 30px; }
.intro04 .box01 .value_list li.no3 .tit { background: url(../images/intro/img_intro04_4.png) 0 0px no-repeat; background-size: 30px; }
@media screen and (max-width:1200px) {
}
@media screen and (max-width:1023px) {
}
@media screen and (max-width:768px) {
.intro04 .box01 .cont > div { width: 100%; float: none; padding-bottom: 30px; }
.intro04 .box01 .cont .desc2 { font-size: 14px; line-height: 2; }
.intro04 .box01 .value img { width: 100%; max-width: 383px; }
.intro04 .box01 .value_list { width: 100%; text-align: center; }
.intro04 .box01 .value_list li .tit { display: inline; }
.intro04 .box01 .value_list li .txt { display: block; font-size: 14px; line-height: 1.8; padding-bottom: 20px; }
}
@media screen and (max-width:768px) {
.intro03 .top_visual { background: url(../images/intro/bg_intro03.jpg) 65% 50% no-repeat; background-size: cover; }
}
/* intro05(의료진 소개) */
.intro05 { }
.intro05 .top_visual { background: url(../images/intro/bg_intro05.jpg) 50% 20% no-repeat; background-size: cover; }
.intro05 .top_visual .tit_sub .icon { width: 150px; background: url(../images/intro/icon_intro05.png) 50% no-repeat; }
.intro05 .box01 { padding-top: 100px; }
.intro05 .inner { width: 1200px; margin: 0 auto; }
.intro05 .box01 ul { overflow: hidden; }
.intro05 .box01 ul li { position:relative; float: left; width: 270px; margin: 0 15px 30px; }
.intro05 .box01 ul li a { display: block; height: 438px; border: 1px solid #eee; cursor:pointer; }
.intro05 .box01 ul li a span { display: block; text-align: center;  }
.intro05 .box01 ul li a .thumb { height: 260px; background: #f9f9f9; }
.intro05 .box01 ul li a .name { color: #333; font-size: 21px; font-weight: bold; margin-top: 26px; letter-spacing: -0.045em; }
.intro05 .box01 ul li a .desc { color: #777; font-size: 16px;  margin-top: 8px; letter-spacing: -0.045em; }
.intro05 .box01 ul li a .btn { width: 178px; height: 48px; line-height: 50px; margin: 16px auto 0; border: 1px solid #eee; color: #777; font-size: 18px;  }
.intro05 .box01 ul li a .btn1, .intro05 .box01 ul li a .btn2{ display:inline-block; width:87px;}
.intro05 .box01 ul li a .btn:hover { border: 1px solid #68c00c; color: #68c00c; }
.intro05 .box01 ul li .btn2, .intro05 .box01 ul li .btn3{ position:absolute; bottom:24px; left:25px; width: 103px; height: 43px; padding-top:5px; line-height: 18px; border: 1px solid #eee; color: #777; font-size: 14px;  text-align:center; }
.intro05 .box01 ul li .btn3{ left:inherit; right:25px;}
.intro05 .box01 ul li .btn2:hover, .intro05 .box01 ul li .btn3:hover{ border: 1px solid #68c00c; color: #68c00c; }
@media screen and (max-width:1200px) {
.intro05 .inner { width: 900px; }
}
@media screen and (max-width:1023px) {
.intro05 .inner { width: 600px; }
}
@media screen and (max-width:768px) {
.intro05 .box01 { padding-top: 60px; }

}
@media screen and (max-width:640px) {

.intro05 .inner { width: 465px; }
.intro05 .box01 ul li {width: 150px !important; margin: 0 2.5px 10px; }
.intro05 .box01 ul li a{ height:auto;}
.intro05 .box01 ul li a .thumb{ height:auto;}
.intro05 .box01 ul li a .thumb img { width:100%;}
.intro05 .box01 ul li a .name{ font-size:18px;}
.intro05 .box01 ul li a .desc{ font-size:14px;}
.intro05 .box01 ul li a .btn { width: 110px; height: 36px; margin:15px auto 20px; line-height: 38px; font-size: 15px;}

.intro05 .box01 ul li .btn2, .intro05 .box01 ul li .btn3{ left:10px; bottom:22px; width: 60px; height: 33px; padding-top:3px; line-height: 15px;font-size: 13px;}
.intro05 .box01 ul li .btn3{ left:inherit; right:10px;}
.intro05 .box01 ul li .b2{ padding-bottom:73px;}
}
@media screen and (max-width:414px) {
.intro05 .inner { width: 310px; }

}
/* intro06(우리아이들공간) */
.intro06 { }
.intro06 .top_visual { background: url(../images/intro/bg_intro06.jpg) 50% no-repeat; background-size: cover; }
.intro06 .top_visual .tit_sub .icon { width: 150px; background: url(../images/intro/icon_intro01.png) 50% no-repeat; }
.intro06 .box01 { display:none; max-width: 1200px; margin: 0 auto; padding-top: 100px; overflow:visible;}
.intro06 .box01 .tabs { overflow: hidden; }
.intro06 .box01 .tabs li { float: left; width: 18%; margin: 0 1%; border: 1px solid #ddd; box-sizing: border-box; font-size: 24px; text-align: center; padding: 15px 0; cursor: pointer; }
.intro06 .box01 .tabs li.active { background: #68c00c; border: 0; color: #fff; font-weight: bold; }
.intro06 .box01 .tab_content { width: 98%; height: auto; margin: 0 1%; margin-top: 50px; }
.intro06 .box01 .tab_content .tit { display: block; padding-bottom: 20px; color: #68c00c; font-size: 30px; font-weight: bold; }
.intro06 .box01 ul.desc { margin-top: 50px; }
.intro06 .box01 ul.desc li { padding-left: 14px; font-size: 16px; line-height: 2; background: url(../images/common/icon_list_dot2.png) 0 14px no-repeat; background-size: 5px; }
.intro06 .box02 { background: url(../images/intro/img_intro06_9_1.jpg) 50% no-repeat; background-size: cover; }
.intro06 .box02 .inner { max-width: 1200px; margin: 0 auto; overflow: hidden; }
.intro06 .box02 .inner .left { float: left; width: 410px; height: 650px; background: url(../images/intro/img_intro06_9_97.png) 50% -50px no-repeat; }
.intro06 .box02 .inner .right { float: left; padding-left: 100px; }
.intro06 .box02 .inner .right ul li { color: #fff; padding: 4px 0; }
.intro06 .box02 .inner .right ul li .floor { display: inline-block; width: 80px; font-size: 24px; font-weight: bold; }
.intro06 .box02 .inner .right ul li .3l { margin-bottom: 10px; }
.intro06 .box02 .inner .right ul li .desc { display: inline-block; padding: 8px 0; width: 500px; font-size: 18px; font-weight: bold; border-bottom: 1px solid #fff; }
.intro06 .box02 .inner .right ul li .desc .sm { display: inline-block; padding-left: 10px; font-size: 14px;  }
.intro06 .box02 .inner .right ul li.fy { color: #fbf953; }
.intro06 .for { margin-bottom: 30px; }
.intro06 .for li img { width: 100%; margin: 0 auto; }
.intro06 .for li .txt { position: absolute; left: 0; bottom: 0; background: #68c00c; color: #fff; padding: 10px 30px; font-size: 24px; opacity: 0.9; }
.intro06 .nav { overflow: hidden; }
.intro06 .nav li { float: left; margin: 0 10px; cursor:pointer; }
.intro06 .nav li img { width: 100%; opacity: 0.8; }
.intro06 .nav li.slick-current img { border: 5px solid #68c00c; box-sizing: border-box; opacity: 1; }
.intro06 .slick-next { position: absolute; top: 50%; right: -90px; width: 80px; height: 80px; background: url(../images/common/arrow_right2.png) no-repeat; }
.intro06 .slick-prev { position: absolute; top: 50%; left: -90px; width: 80px; height: 80px; background: url(../images/common/arrow_left2.png) no-repeat; }

/* 슬라이드 */
@media screen and (max-width:1200px) {
.intro06 .box02 .inner .right { padding-left: 60px; }
.intro06 .box02 .inner .right ul li .desc { width: 400px; }
.intro06 .slick-next { position: absolute; top: 50%; right: -30px; width: 40px; height: 40px; background: url(../images/common/arrow_right2.png) no-repeat; background-size:40px; }
.intro06 .slick-prev { position: absolute; top: 50%; left: -30px; width: 40px; height: 40px; background: url(../images/common/arrow_left2.png) no-repeat; background-size:40px; }
}
@media screen and (max-width:1023px) {
.intro06 .box02 .inner .left { display: none; }
.intro06 .box02 .inner .right { float: none; margin: 0 auto; padding: 0; width: 500px; }
.intro06 .box02 .inner .right ul li .desc { width: 400px; }
}
@media screen and (max-width:768px) {
.intro06 .box01 { padding-top: 60px; }
.intro06 .box01 .tab_content { margin-top: 30px; }
.intro06 .box01 .tab_content .tit { font-size: 24px; }
.intro06 .box01 .tabs li { font-size: 16px; padding: 8px 0; }
.intro06 .nav li { margin: 0 3px; }
.intro06 .nav li.slick-current img { border: 3px solid #68c00c; }
.intro06 .box02 .inner .right { width: 300px; }
.intro06 .box02 .inner .right ul li .floor { font-size: 18px; width: 60px; }
.intro06 .box02 .inner .right ul li .desc { width: 240px; font-size: 16px; }
.intro06 .box02 .inner .right ul li .desc .sm { font-size: 13px; padding-left: 0; }
.intro06 .box02 .inner .right ul li .desc br { display: none; }
}
@media screen and (max-width:360px) {
.intro06 .box01 .tabs li { font-size: 14px;}

}
/* intro07(인증 및 수상) */
.intro07 { }
.intro07 .top_visual { background: url(../images/intro/bg_intro07.jpg) 50% no-repeat; background-size: cover; }
.intro07 .top_visual .tit_sub .icon { width: 150px; background: url(../images/intro/icon_intro07.png) 50% no-repeat; }
.intro07 .box01 {}
.intro07 > .box01 > div{ padding:80px 0;}
.intro07 .box01 .year2017{background:#fff; color:#000 !important; }
.intro07 .box01 .year2016{background: url(../images/intro/bg_intro07_2016.jpg) 50% no-repeat; background-size: cover; color:#000 !important; }
.intro07 .box01 .year2015{background: url(../images/intro/bg_intro07_2015.jpg) 50% no-repeat; background-size: cover; }
.intro07 .box01 .year2014{background: url(../images/intro/bg_intro07_2014.jpg) 50% no-repeat; background-size: cover; }
.intro07 .box01 .year2013{background: url(../images/intro/bg_intro07_2013.jpg) 50% no-repeat; background-size: cover; }
.intro07 .box01 .year{ display:block; margin-bottom:50px; color:#fff; font-family: 'Nanum Myeongjo'; font-size: 56px; font-weight: bold; text-align:center;}
.intro07 .box01 .year.em{ color:#68c00c;}
.intro07 .box01 .list li{ padding-bottom:70px;}
.intro07 .box01 .list li:last-child{ padding-bottom:0;}
.intro07 .box01 .list li .tit{ display:block; color:#fff; font-size:24px; font-family: 'Nanum Myeongjo'; font-weight: bold; text-align:center; letter-spacing:-0.06em;}
.intro07 .box01 .list.em li .tit{ color:#333; font-weight: bold;}
.intro07 .box01 .list li .img{ display:block; max-width:400px; margin:0 auto 30px; border-radius:3px; overflow:hidden;}
.intro07 .box01 .list li .img.odd{ max-width:400px;}
.intro07 .box01 .list li .img img{ width:100%;}
@media screen and (max-width:768px) {
.intro07 > .box01 > div{ padding:60px 30px;}
.intro07 .box01 .year{ font-size:42px; margin-bottom:30px;}
.intro07 .box01 .list li .img{ margin:0 auto 15px;}
.intro07 .box01 .list li .tit{ font-size:18px;}
.intro07 .box01 .list li{ padding-bottom:50px;}
}
@media screen and (max-width:360px) {

}




/* intro08(오시는길) */
.intro08 { }
.intro08 .top_visual { background: url(../images/intro/bg_intro08.jpg) 50% no-repeat; background-size: cover; }
.intro08 .top_visual .tit_sub .icon { width: 150px; background: url(../images/intro/icon_intro08.png) 50% no-repeat; }
.intro08 .box01 { padding-top: 100px; padding-bottom: 0; }
.intro08 .box01 .inner { max-width: 900px; margin: 0 auto 80px; }
.intro08 .box01 .inner .left, .intro08 .box01 .inner .right { width: 50%; float: left; }
.intro08 .box01 .inner .tit { display: block; padding-bottom: 20px; color: #68c00c; font-size: 36px; font-weight: bold; }
.intro08 .box01 .inner .desc { font-size: 16px; line-height: 2; }
.intro08 .box01 .inner .cont1 { margin-bottom: 50px; }
.intro08 .box01 .inner .btn_lnk { display: block; width: 200px; background: #68c00c; color: #fff; font-size: 18px; font-weight: bold; border-radius: 30px; padding: 12px 0; text-align: center; margin-top: 30px; }
.intro08 .map { height: 450px; }
@media screen and (max-width:1200px) {
}
@media screen and (max-width:1023px) {
}
@media screen and (max-width:768px) {
.intro08 .box01 { padding-top: 60px; }
.intro08 .box01 .inner .left, .intro08 .box01 .inner .right { width: 100%; float: none; clear: both; }
.intro08 .box01 .inner .cont1, .intro08 .box01 .inner .cont2 { margin-bottom: 80px; }
.intro08 .box01 .inner .tit { text-align: center; font-size: 24px; }
.intro08 .box01 .inner .desc { text-align: center; font-size: 14px; }
.intro08 .box01 .inner .btn_lnk { margin: 30px auto 0; }
.intro08 .map { height: 260px; }
}
/* intro09(주차안내) */
.intro09 {}
.intro09 .tit_ssub { margin: 0 0 50px; }
.intro09 .top_visual { background: url(../images/intro/bg_intro09.jpg) 50% no-repeat; background-size: cover; }
.intro09 .top_visual .tit_sub .icon { width: 150px; background: url(../images/intro/icon_intro09.png) 50% no-repeat; }
.intro09 .box01 { padding-top: 100px; }
.intro09 .box01 .inner { max-width: 900px; margin: 0 auto; }
.intro09 .box01 .inner ul.g1 { overflow: hidden; margin-bottom: 80px; }
.intro09 .box01 .inner ul.g1 li { float: left; width:23%; margin: 0 1%; padding: 40px 0; font-size: 16px; border: 1px solid #ddd; box-sizing: border-box; text-align: center; }
.intro09 .box01 .inner ul.g1 li strong{ display:block; margin-bottom:10px; color:#333; font-size:24px; font-weight:bold;}
.intro09 .box01 .inner ul.g2 { overflow: hidden; }
.intro09 .box01 .inner ul.g2 li { float: left; width: 420px; height: 420px; margin: 10px 9px; border: 1px solid #ddd; text-align: center; }
.intro09 .box01 .inner ul.g2 li .tit { display: block; padding: 135px 0 25px; color: #333; font-size: 24px; font-weight: bold; }
.intro09 .box01 .inner ul.g2 li.n1 .tit { background: url(../images/intro/parking_ticket.png) 50% 50px no-repeat; background-size: 70px; }
.intro09 .box01 .inner ul.g2 li.n2 .tit { background: url(../images/intro/stethoscope.png) 50% 50px no-repeat; background-size: 70px; }
.intro09 .box01 .inner ul.g2 li.n3 .tit { background: url(../images/intro/blood-donation.png) 50% 50px no-repeat; background-size: 70px; }
.intro09 .box01 .inner ul.g2 li.n4 .tit { background: url(../images/intro/hospital.png) 50% 50px no-repeat; background-size: 70px; }
.intro09 .box01 .inner ul.g2 li.n5 .tit { background: url(../images/intro/parking_worker.png) 50% 50px no-repeat; background-size: 70px; }
.intro09 .box01 .inner ul.g2 li.n7 .tit { background: url(../images/intro/hyundai_parking.png) 50% 50px no-repeat; background-size: 70px; }
.intro09 .box01 .inner ul.g2 li .desc1 { padding-bottom: 20px; color: #333; font-size: 18px; font-weight: bold; }
.intro09 .box01 .inner ul.g2 li .desc1 .icon { padding-left: 25px; background: url(../images/intro/icon_intro09_1.png) 0 3px no-repeat; background-size: 16px; }
.intro09 .box01 .inner ul.g2 li .desc2 { font-size: 15px;  }
.intro09 .box01 .inner ul.g2 li .desc2 strong { display: block; color: #68c00c; font-weight: bold; }
.intro09 .box01 .inner ul.g2 li.n6{border:0;background: #498787;text-align:left;padding: 30px;box-sizing:  border-box;}
.intro09 .box01 .inner ul.g2 li.n6 .tit{color:#fff;font-size:21px;padding-top: 10px;padding-bottom: 20px;}
.intro09 .box01 .inner ul.g2 li.n6 .desc2{color:  #fff; font-size: 14px;line-height: 1.6;}
.intro09 .box01 .parking1, .intro09 .box01 .parking2, .intro09 .box01 .parking3, .intro09 .box01 .parking4{ display: block; width:100px; padding:6px 0; text-align:center; margin:20px auto 10px; border:1px solid #ddd; font-size:15px; color:#555; cursor:pointer;}

.intro09 .bottom{ position:relative; margin-top:50px}
.intro09 .bottom  img{ width:100%;}
.intro09 .bottom  .btn_map{ position:absolute; bottom:80px; right:40px; background:#777; color:#fff; font-weight:bold; font-size:14px; text-align:center; padding:4px 10px; border-radius:4px;}




@media screen and (max-width:1200px) {
.intro09 .box01 .inner ul.g2 { width: 600px; margin: 0 auto; }
}
@media screen and (max-width:1023px) {
}
@media screen and (max-width:768px) {
.intro09 .box01 { padding-top: 60px; }
.intro09 .box01 .inner ul.g1 { margin-bottom: 40px; }
.intro09 .tit_ssub { margin: 0 0 30px; }
.intro09 .box01 .inner ul.g1 li { float: none; width: 100%; margin: 0 0 10px 0; padding: 20px 0; }
.intro09 .box01 .inner ul.g2 { width: 300px; margin: 0 auto; }
.intro09 .bottom{ padding-top:50px;}
.intro09 .bottom .left, .intro09 .bottom .right{ display:block; width:100%; max-width:540px; margin:0 auto; padding:0;}
}

/* ====== g2 레이아웃: float 기반을 flex로 덮어쓰기 (데스크탑은 기존 420x420 유지) ====== */
.intro09 .box01 .inner ul.g2{
  overflow: visible;              /* flex 쓰면 굳이 hidden 필요 없음 */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;        /* 중앙정렬 */
  gap: 20px;                      /* li 간격 */
  margin: 0;
  padding: 0;
  width: auto;                    /* 기존 600px/300px 고정값 무력화 */
}

.intro09 .box01 .inner ul.g2 li{
  float: none;                    /* float 제거 */
  width: 420px;                   /* 데스크탑은 기존처럼 */
  height: 420px;
  margin: 0;                      /* gap으로 간격 관리 */
  box-sizing: border-box;
}

/* 타이틀(아이콘+글씨) 기본(데스크탑) */
.intro09 .box01 .inner ul.g2 li .tit{
  padding: 135px 16px 25px;       /* 좌우 여백 추가(줄바꿈/정렬 안정) */
  line-height: 1.2;
  word-break: keep-all;
}

/* 버튼(주차장 박스) - 중앙정렬 안정화 */
.intro09 .box01 .parking1,
.intro09 .box01 .parking2,
.intro09 .box01 .parking3,
.intro09 .box01 .parking4{
  float: none;
  display: inline-flex;           /* 가운데 정렬/세로정렬 안정 */
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* n6 카드(특수 카드)도 flex에서 크기 동일하게 보이게 */
.intro09 .box01 .inner ul.g2 li.n6{
  width: 420px;
  height: 420px;
}

/* ====== 태블릿/작은 화면(1200 이하)에서도 “고정 폭 ul” 없애기 ====== */
@media screen and (max-width:1200px){
  .intro09 .box01 .inner ul.g2{
    width: auto;                  /* 기존 600px 강제 제거 */
    padding: 0 16px;
  }
}

/* ====== 모바일(768 이하): 박스는 화면에 맞게 1열로, 잘림/겹침 해결 ====== */
@media screen and (max-width:768px){

  .intro09 .box01 .inner{ 
    max-width: 100%;
    padding: 0 16px;              /* 좌우 여백 */
    box-sizing: border-box;
  }

  .intro09 .box01 .inner ul.g2{
    width: auto;                  /* 기존 300px 강제 제거 */
    padding: 0;
    gap: 16px;
  }

  .intro09 .box01 .inner ul.g2 li{
    width: 100%;                  /* 화면 가로에 맞춤 */
    max-width: 520px;             /* 너무 커지면 제한(중앙) */
    height: auto;                 /* 잘림 방지(가장 중요) */
    min-height: 320px;            /* 카드 형태 유지 */
    margin: 0 auto;               /* 중앙 */
  }

  /* 아이콘+제목 겹침 방지: 아이콘 위치/크기와 패딩을 모바일에 맞게 */
  .intro09 .box01 .inner ul.g2 li .tit{
    font-size: 22px;
    padding: 110px 16px 18px;     /* 상단 여백 줄여서 겹침 방지 */
    line-height: 1.25;
  }

  .intro09 .box01 .inner ul.g2 li.n1 .tit,
  .intro09 .box01 .inner ul.g2 li.n2 .tit,
  .intro09 .box01 .inner ul.g2 li.n3 .tit,
  .intro09 .box01 .inner ul.g2 li.n4 .tit,
  .intro09 .box01 .inner ul.g2 li.n5 .tit,
  .intro09 .box01 .inner ul.g2 li.n7 .tit{
    background-position: 50% 20px; /* 아이콘을 위로 */
    background-size: 50px;         /* 아이콘 크기 살짝 축소 */
  }

  .intro09 .box01 .inner ul.g2 li .desc1{
    font-size: 16px;
    padding: 0 16px 14px;
    box-sizing: border-box;
  }

  .intro09 .box01 .inner ul.g2 li .desc2{
    font-size: 15px;
    padding: 0 70px 18px;
    box-sizing: border-box;
  }

  /* 주차장 버튼(초록/청록 박스) 중앙정렬 + 화면 밖 잘림 방지 */
  .intro09 .box01 .parking1,
  .intro09 .box01 .parking2,
  .intro09 .box01 .parking3,
  .intro09 .box01 .parking4{
    width: min(320px, 100%);      /* 모바일에서 자동 줄어듦 */
    margin: 12px auto 8px;        /* 중앙 */
    padding: 10px 14px;
    font-size: 15px;
    white-space: normal;          /* 긴 글씨 잘림 방지 */
    text-align: center;
  }

  /* n6 카드(특수) 모바일에서도 자동 높이 */
  .intro09 .box01 .inner ul.g2 li.n6{
    width: 100%;
    max-width: 520px;
    height: auto;
    min-height: 260px;
    padding: 20px;
  }
}

/* intro10(CI 소개) */
.intro10 { }
.intro10 .top_visual { background: url(../images/intro/bg_intro02.jpg) 50% no-repeat; background-size: cover; }
.intro10 .top_visual .tit_sub .icon { width: 150px; background: url(../images/intro/icon_intro01.png) 50% no-repeat; }
.intro10 .inner{ overflow:hidden; max-width:1200px; margin:0 auto;}
.intro10 .box01, .intro10 .box02, .intro10 .box03, .intro10 .box04{ padding:80px 0;}
.intro10 .box02, .intro10 .box04{ background:#f9f9f9;}
.intro10 .box01 .tit, .intro10 .box02 .tit, .intro10 .box03 .tit, .intro10 .box04 .tit { display: block; float:left; width:25%; padding-bottom: 20px; color: #68c00c; font-size: 36px; font-weight: bold; }
.intro10 .box01 .cont, .intro10 .box02 .cont, .intro10 .box03 .cont, .intro10 .box04 .cont { overflow:hidden; display: block; float:left; width:75%; font-size:15px; line-height:1.6;}
.intro10 img{ width:100%;}
.intro10 .img2, .intro10 .img3{ display:block; float:left;}
.intro10 .img{ width:100%;}
.intro10 .img2{ width:50%;}
.intro10 .img3{width:33.33%; margin-top:30px;}
.intro10 .box02 .colorlist{ overflow:hidden; display:table; padding-top:30px;}
.intro10 .box02 .colorlist li{ overflow:hidden; display:table-cell; width:25%;  float:left; margin:15px 0; vertical-align:middle; }
.intro10 .box02 .colorlist li .shape{ display:inline-block; width:80px; height:80px; line-height:80px; border-radius:100px; background:#333; color:#fff;font-size:15px; font-weight:bold; text-align:center;}
.intro10 .box02 .colorlist li .txt{display:inline-block; padding-left:20px; font-size:13px; line-height:1.3; font-weight:bold; vertical-align:middle;}
.intro10 .box02 .colorlist .color1 .shape{background:#64C6F2;}
.intro10 .box02 .colorlist .color2 .shape{background:#FFF000; color:#333;}
.intro10 .box02 .colorlist .color3 .shape{background:#ee3729;}
.intro10 .box02 .colorlist .color4 .shape{background:#22AB38;}
.intro10 .box02 .colorlist .color5 .shape{background:#58585B;}
.intro10 .box02 .colorlist .color6 .shape{background:#00367B;}
.intro10 .box02 .colorlist .color7 .shape{background:#FBAF3F;}
@media screen and (max-width:1200px) {
.intro10 .box01 .inner, .intro10 .box02 .inner, .intro10 .box03 .inner, .intro10 .box04 .inner{ padding:0 30px;}
}
@media screen and (max-width:1023px) {
}
@media screen and (max-width:768px) {
.intro10 .box01, .intro10 .box02, .intro10 .box03, .intro10 .box04{ padding:30px 0;}
.intro10 .box01 .inner, .intro10 .box02 .inner, .intro10 .box03 .inner, .intro10 .box04 .inner{ padding:0 20px;}
.intro10 .box01 .tit, .intro10 .box02 .tit, .intro10 .box03 .tit, .intro10 .box04 .tit { width:100%; float:none; clear:both; font-size:24px; text-align:center;}
.intro10 .box01 .cont, .intro10 .box02 .cont, .intro10 .box03 .cont, .intro10 .box04 .cont{ font-size:13px;}
.intro10 .tit br{ display:none;}
.intro10 .box01 .cont, .intro10 .box02 .cont, .intro10 .box03 .cont, .intro10 .box04 .cont { width:100%; float:none; clear:both;}
.intro10 .box02 .colorlist li{ width:50%; margin:8px 0;}
.intro10 .box02 .colorlist li .shape{ width:65px; height:65px; line-height:65px;font-size:14px; }
.intro10 .box02 .colorlist li .txt{ padding-left:10px;}
.intro10 .box04 .cont .desc br{ display:none;}
}