@charset "utf-8";

/*공통*/
@import url('https://fonts.googleapis.com/css?family=Raleway:400,700,900&display=swap');


.subin{box-sizing:border-box !important; min-width:300px; max-width:2000px; margin:0 auto}
.subin p.txt{font-size:1.1em}


.nbg{font-family:'Raleway', 'NanumBarunGothic','noto', sans-serif !important; }
.bsb{box-sizing:border-box}

.bgbox{background:#f8f8f8; padding:20px 20px; border:1px dashed #8ea6ca}
.pdbox{padding:30px 20px;}
.vab{vertical-align:bottom;}

.bdline{border-bottom:1px dashed #c8c8c8;}

.col-02{width:100%;}
.col-03{width:100%;}
.col-04{width:100%;}


.w1400{max-width:1400px; margin: 0 auto;}
.w1000{max-width:1000px; margin: 0 auto;}
.w800{max-width:800px; margin: 0 auto;}

.cb{clear:both;}



.mEnter{display:block;}
.mb{margin-bottom:30px !important}
.bmb{margin-bottom:40px !important}
.pb{padding-bottom:30px !important}
.bpb{padding-bottom:40px !important}

.mb10{margin-bottom:10px !important;}
.mb20{margin-bottom:20px !important;}
.mb30{margin-bottom:30px !important;}

.ofh{overflow:hidden;}

.tac{text-align:center;}
.tal{text-align:left;}
.tar{text-align:right;}

.move_scroll{max-width:768px; overflow-x:auto}

.line_link{display:inline-block; color:#ffffff; padding-bottom:5px; border-bottom:3px solid #ffffff; font-size:0.9em}
.arrow_cir_w:after{content:''; width:28px; height:25px; background:url(../img/ic_arrow_w.png) no-repeat center center; background-size:100%; display:inline-block; vertical-align:middle; margin-left:10px;}

.dpib{display:inline-block}
.dpb{display:block;}

.upper{text-transform:uppercase}
.fwb{font-weight:600}
.fss{font-size:0.8em}
.upcase{text-transform:uppercase}

.inner{max-width:1200px; width:100%; position:relative; margin: 0 auto;}
.pdinner{max-width:1200px; padding:0 3%; position:relative; margin: 0 auto; box-sizing:border-box}

.bTxt{color:#000000}
.rTxt{color:#d10000}
.blTxt{color:#1d2e79 !important}
.bsTxt{color:#0074f6 !Important}
.orTxt{color:#e63800}

.point_txt{position:relative;  text-transform:uppercase; color:#323232; font-weight:bold;}
.pDot{padding-left:15px; position:relative}
.pDot:before{content:''; width:8px; height:8px;border-radius:50px; position:absolute; right:0; top:3px; background:#0074f6}
.fsb{font-size:1.2em}
/*.point_txt:before{content:''; width:8px; height:8px;border-radius:50px; position:absolute; right:0; bottom:0px; background:#fbca4d}
.point_txt:after{content:''; clear:both;}*/
/*.redDot{display:inline-block; position:relative; padding-right:15px}
.redDot:before{content:''; width:8px; height:8px;border-radius:50px; position:absolute; right:0; bottom:0px; background:#fbca4d}
.redDot:after{clear:both;}*/

.pointTxt{background:#edff80;}
.bdLine{border-bottom:1px solid #e6e6e6; padding-bottom:20px; margin-bottom:20px;}

.imgbox img{width:100%;}

.btn_more{display:inline-block; padding:10px 15px; background:#0074f6;color:#ffffff !Important; font-size:0.9em}

@media all and (min-width:768px) {

.subin p.txt{font-size:1.2em}

.mb{margin-bottom:40px !important; }
.bmb{margin-bottom:60px !important;}

.pb{padding-bottom:40px !important}
.bpb{padding-bottom:60px !important}

.mo_only{display:none;}
.move_scroll{max-width:100%;}
.pdinner{padding:0 3%}

.half{width:47.5%; float:left;}
.col-02{width:50%; float:left;}

.mr{margin-right:3%;}

.bgbox{padding:30px 20px;}
.
}

@media all and (min-width:1200px) {


.mb{margin-bottom:50px !important}
.bmb{margin-bottom:80px !important}

.pb{padding-bottom:50px !important}
.bpb{padding-bottom:80px !important}
.pdinner{padding:0 20px}



}

/*탭리스트*/
.tablist {overflow:hidden; text-align:center; font-size:0;}
.tablist li{display:inline-block;  text-align:center; font-size:15px; vertical-align:top;}
.tablist li:last-child{border-right:0}
.tablist.list02 li{width:45%}
.tablist.list03 li{width:30%}
.tablist.list04 li{width:50%}


.tablist li a{ display:block;  line-height:45px; text-align:center; border:1px solid #dcdcdc; color:#808080; }
.tablist li.active a{background:#334061; color:#ffffff; font-weight:600}


@media all and (min-width:540px) {
.tablist.list04 li{width:25%}
}

@media all and (min-width:768px) {
.tablist li a{line-height:50px;}
}


/*owl*/
.syncSlider{margin-bottom:20px; position:relative;}
.syncSlider #sync1 .owl-wrapper-outer{margin-bottom:10px;}
.syncSlider #sync1 .tag{position:absolute; display:block; left:0; top:0; width:100px; font-size:1.2em; text-align:center;  color:#ffffff;  z-index:2; background:#0f449b; background:rgba(15,18,155,0.8);/*background:#0f449b url(../images/common/logo_mark.png) no-repeat right bottom*/; padding:20px 0px; background-size:30px !Important;}
.syncSlider #sync1{position:relative;}
.syncSlider #sync1 .item img{width:100%}
.syncSlider #sync2 .item{margin: 5px; cursor: pointer; padding:2px; opacity:0.5;}
.syncSlider #sync2 .synced .item{background: #2448a9; opacity:1;}
.syncSlider .item img{width:100%}
.syncSlider .owl-controls{margin-top:0px !important; position:absolute; z-index:2; right:0px; bottom:0px;}
.syncSlider .owl-controls .owl-buttons{float:right;}
.syncSlider .owl-controls .owl-buttons div{margin:0px !important; border-radius:0px  !important; opacity:0.8 !important; width:40px; height:40px; padding: 10px  !important; text-indent:-9999999px; box-sizing:border-box}
.syncSlider .owl-controls .owl-buttons div.owl-prev{margin-right:3px !important; background:#505050 url(../images/common/btn_prev.png) no-repeat center center !important;}
.syncSlider .owl-controls .owl-buttons div.owl-next{background:#505050 url(../images/common/btn_next.png) no-repeat center center !important;}

.syncSlider #sync2 {position:relative; margin-top:10px}
.syncSlider .owl-controls clickable{float:right}

/*owl 컨트롤러 css변경*/
.owl-controls{width:100%; margin:0 auto;}

/*owl pagenation css변경 */
.page_btn{position:relative;}
.page_btn .owl-controls {position:absolute; bottom:0; text-align:right !important; }
.page_btn .owl-page span{width:20px !important; height:20px !important; background:none !important; border:4px solid #ffffff; border-radius:20px; opacity:0.7; box-sizing:border-box; }
.page_btn .owl-page.active span{opacity:1;}

.page_btn2 .owl-page span{width:5px !important; height:5px !important; background:#808080 !important; border-radius:20px; position:relative; opacity:1 !important; margin:0 20px !important;}
.page_btn2 .owl-page.active span:before{content:''; width:30px; height:30px; position:absolute; margin-left:-16px; left:50%; margin-top:-16px; top:50%; border:1px solid #808080; border-radius:200px;}

/*owl navigation css변경*/
/*.owl-theme .owl-controls{position:relative}*/
.arrow_btn .owl-buttons{position:absolute; width:100%; top:-250px;}
.arrow_btn .owl-buttons div{position:absolute; font-family:'FontAwesome'; text-indent:-999999px; background:none !important; padding:0px !important; margin:0px !important;}
.arrow_btn .owl-buttons div:first-child{left:2%;}
.arrow_btn .owl-buttons div:last-child{right:2%;}
.arrow_btn .owl-buttons div.owl-prev:after,
.arrow_btn .owl-buttons div.owl-next:after{content:'\f104'; font-family:'FontAwesome'; position:absolute; left:0; top:0; text-indent:0 !important; font-size:3em;}
.arrow_btn .owl-buttons div.owl-next:after{content:'\f105'; right:0; left:auto;}

.pop_page_btn{position:relative;}
.pop_page_btn .owl-controls{position:absolute; bottom:0px; text-align:right !important}
.pop_page_btn .owl-pagination{display:inline-block; padding:1px 10px; border-radius:500px; height:22px;}
.pop_page_btn .owl-controls .owl-page span{width:10px !important; height:10px !important; background:#505050 !important; margin:2px 4px !important}
.pop_page_btn .owl-controls .active span{background:#8c000a !important}

@media all and (min-width:1200px) {
.arrow_btn .owl-buttons div:first-child{left:-10%;}
.arrow_btn .owl-buttons div:last-child{right:-10%;}
.arrow_btn .owl-buttons div.owl-prev:after,
.arrow_btn .owl-buttons div.owl-next:after{font-size:50px;}
}


/**/
.bgtxt{display:inline-block; padding:2px 10px; line-height:100%; color:#ffffff; background:#808080; font-size:0.9em; border-radius:5px;}
.bggr{background:#19a800}
.bgbl{background:#004eae}
.bgor{background:#e66300}
.bgrd{background:#e63800}

.brk{position:relative; display:inline-block; padding:0 20px}
.brk b{position:relative; z-index:1;}
.brk:after,
.brk:before{content:''; width:30px; height:18px; position:absolute; background-size:cover !important; z-index:0;}
.brk:after{right:0; top:0; background:url("../images/common/bracket_after.png") no-repeat center center}
.brk:before{left:0; top:0; background:url("../images/common/bracket_before.png") no-repeat center center}


@media all and (min-width:768px) {
.brk{padding:0 40px}
.brk:after,
.brk:before{width:50px; height:30px;}
}


.deco{position:relative;}
.deco:before,
.deco:after{content:''; display:block; position:absolute; top:0; left:0; width:20%; max-width:80px; height:1px; display:block; background:#0074f6}
.deco:after{left:auto; top:auto; right:0; bottom:0; background:#1d2e79}

.btn_li{overflow:hidden;}
.btn_li li a{display:block; box-sizing:border-box; color:#ffffff; padding:10px; text-align:center; background:#0074f6}
.btn_li li:last-child a{background:#1d2e79}

@media all and (min-width:768px) {
.btn_li li{float:left; margin-right:10px;}
}

/*컨텐츠공통*/



.content_table{width:100%; border-top:1px solid #323232; border-collapse:collapse; background:#ffffff}
.content_table th{padding:10px 5px}
.content_table th, .content_table td{border-bottom:1px solid #dcdcdc; padding:7px 3px; vertical-align:middle; box-sizing:border-box}
.content_table .bl, .content_table tr.bl td, .content_table tr.bl th{border-left:1px solid #dcdcdc}
/*.content_table tr.bl td:first-child, .content_table tr.bl th:first-child{border-left:0px;}*/
.content_table .bli{border-left:1px solid #dcdcdc !important}
.content_table th{font-weight:600; background:#f8f8f8; color:#323232; padding:12px 3px;}
.content_table .bgc{background:#fafafa; text-align:center}
.content_table tr.bgc th, .content_table tr.bgc td{ background:#fafafa}
.content_table .tal{text-align:left;}

.bd_table{border-right:1px solid #dcdcdc}
.bd_table th, .bd_table td{border-left:1px solid #dcdcdc}

.sm_table th, .sm_table td{font-size:0.9em}

@media all and (min-width:768px) {
.sm_table th, .sm_table td{font-size:1em}
}

.dot_li{overflow:hidden; }
.dot_li li{background:url("../images/common/dot_li.gif") no-repeat 0px 10px; padding-left:8px; margin-bottom:3px;}

.tit_nm{font-size:1.4em; font-weight:600; letter-spacing:-0.06em; color:#000000}
.tit_sm{font-size:1.2em; font-weight:600;}
.tit_dot{color:#1d2e79; font-size:1.3em; font-weight:600; letter-spacing:-0.065em; padding-left:26px; background:url(../images/common/tit_dot.png) no-repeat left center;}


@media all and (min-width:768px) {


.content_table th{padding:20px 10px}
.content_table td{padding:15px 10px;}
.comm_dl dt{float:left; margin-right:1%; clear:both;}
.comm_dl dd{width:87%; float:right;}

.sub_con .col-02{width:47%;float:left; margin:0 1.5%;}
.sub_con .col-03{width:30.33%; margin:0 1.5%; float:left;}
.sub_con .col-04{width:22%; margin:0 1.5%; float:left;}
.bdLine{padding-bottom:40px; margin-bottom:40px;}

.mEnter{display:inline-block;}
.tEnter{display:block;}

.tit_nm{font-size:1.8em;}
.tit_sm{font-size:1.4em;}
.tit_dot{ font-size:1.5em;}

}

@media all and (min-width:1200px) {
.pdbox{padding:60px 25px;}
.tEnter{display:inline-block;}
.pEnter{display:block;}
.bdLine{padding-bottom:60px; margin-bottom:60px;}

.tit_nm{font-size:2.5em;}
.tit_sm{font-size:1.6em;}
}



/*특별함*/

.vision{overflow:hidden; position:relative;  border-top:2px solid #1d2e79 ; border-left:1px solid #e6e6e6; text-align:center; text-transform:uppercase}
.vision dl{padding:20px 0px; border-right:1px solid #e6e6e6; border-bottom:1px solid #e6e6e6; width:50%; float:left; box-sizing:border-box}
.vision dl:last-child{width:100%}
.vision dl dt{font-weight:bold; margin-bottom:3px; color:#323232}
.vision dl dt img{max-width:60px; margin-bottom:10px;}
.vision dl dt  span{display:block; color:#1d2e79 }

.specialbox{background:#ffffff}
.specialbox h5 span.tit{display:block; font-size:14px; color:#0074f6; margin-bottom:10px; padding-bottom:10px; position:relative; text-transform:uppercase}
.specialbox h5 span.tit:after{content:''; width:30px; height:2px; background:#0074f6; display:block; position:absolute; bottom:0; left:0; }
.specialbox .box{position:relative;}
.specialbox .box .txt{box-sizing:border-box; padding:30px 20px; background:#ffffff;}
.specialbox .box .photo img{width:100%}

@media all and (min-width:768px) {
.vision dl{width:33.33% !important; padding:40px 0px}
.vision dl dt  span{font-size:1.3em}
}

@media all and (min-width:1200px) {
.specialbox .box {margin-bottom:120px;}
.specialbox .box .photo{float:left; width:80%;}
.specialbox .box .txt{padding:40px 30px; width:34%; position:absolute; top:-50px;
-webkit-box-shadow: 0px 0px 30px -5px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 30px -5px rgba(0,0,0,0.3);
box-shadow: 0px 0px 30px -5px rgba(0,0,0,0.3);}

.specialbox .box .left{float:left; left:0;}
.specialbox .box .right{float:right; right:0;}
.specialbox .box:after{content:''; clear:both; display:block;}

}


/*인사말*/
.greeting{position:relative; box-sizing:border-box;}
.greeting .grtxt{position:relative; z-index:1;}
.greeting .hos{position:relative; z-index:0; margin-top:-100px;}

@media all and (min-width:768px) {

.greeting .grtxt{padding-right:40%; }
.greeting .hos{position:absolute; right:0; width:60%; max-width:550px; bottom:0; margin-top:0}
}

@media all and (min-width:1200px) {
.greeting .grtxt{padding-bottom:200px;}
.greeting .hos{max-width:650px;}
}

/*오시는길*/
.mapbox{position:relative;}
.address_info{background:#1d2e79; color:#ffffff; padding:30px 20px;}
.address_info h4{font-size:1.4em; font-weight:600}
.address_info p{margin-bottom:10px; color:#ffffff}


@media all and (min-width:768px) {
.address_info{position:absolute; left:20px; top:20px; z-index:10; text-align:left;}
}




/*입퇴원안내*/
.process{overflow:hidden}
.process .linebox{padding:20px; border:1px solid #dcdcdc; position:relative; background:#ffffff; box-sizing:border-box; margin-bottom:20px;}

.img_dl{padding-left:70px; overflow:hidden; background-position:left top; background-size:50px !important; background-position:left center !important}
.img_dl dt{margin-bottom:10px; font-size:1.2em; clear:both; font-weight:800; color:#0f449b}
.img_dl dt span.num{position:relative; color:#ffffff;width:20px; height:20px;  line-height:20px; background:#0f449b; border-radius:100px;  text-align:center; font-size:12px; font-weight:600; display:inline-block; margin-right:5px;}
.img_dl dd{background:url("../images/common/dot_li.gif") no-repeat 0px 10px; padding-left:10px; margin-bottom:3px;}
.img_dl dd:last-child{margin-bottom:0;}


.ic_pr01{background:url(../images/sub02/ic_pr01.png) no-repeat }
.ic_pr02{background:url(../images/sub02/ic_pr02.png) no-repeat }
.ic_pr03{background:url(../images/sub02/ic_pr03.png) no-repeat }
.ic_pr04{background:url(../images/sub02/ic_pr04.png) no-repeat }
.ic_pr05{background:url(../images/sub02/ic_pr05.png) no-repeat }
.ic_pr06{background:url(../images/sub02/ic_pr06.png) no-repeat }
.ic_pr07{background:url(../images/sub02/ic_pr07.png) no-repeat }
.ic_pr08{background:url(../images/sub02/ic_pr08.png) no-repeat }


@media all and (min-width:768px) {
.process .linebox{padding:30px 20px; float:left; width:48%; margin:0 1%; margin-bottom:20px;}
.process .linebox:nth-child(3){clear:both;}
.process .linebox:nth-child(3),.process .linebox:nth-child(4){margin-bottom:0}
.img_dl{padding-left:120px; overflow:hidden; background-position:20px center !important; background-size:auto 60px !important;}
}



/*진료안내*/
.gra_li{text-align:center;}


.gra_li{max-width:1000px; margin:0 auto;}
.gra_li li{margin-bottom:10px; font-size:1.2em; font-weight:bold}
.gra_li:last-child{margin-bottom:0;}
.gra_li img{display:block; margin:0 auto; max-width:70px; margin-bottom:10px}
.gra_li  span{display:inline-block; padding-top:10px; border-top:1px solid #ffffff;}


@media all and (min-width:540px) {

.gra_li li{display:inline-block; vertical-align:top; padding: 0 20px 20px;}
}


.time_info{padding:30px 20px; border-top:2px solid #323232; border-bottom:1px solid #dcdcdc; box-sizing:border-box; font-size:1.2em}
.time_info dl{padding-left:100px; background:url(../images/sub02/ic_time01.png) no-repeat 0 20px; background-size:60px !important; box-sizing:border-box}
.time_info dt{font-weight:700; font-size:1.1em; margin-bottom:5px; color:#0074f6}
.time_info dd{margin-bottom:3px;}
.time_info dd:last-child{margin-bottom:0;}
.time_info div:last-child{padding-top:10px; margin-top:10px; border-top:1px solid #e6e6e6}
.time_info div:last-child dl{background:url(../images/sub02/ic_time02.png) no-repeat 0 center;}

.ic_dia01{background:url(../images/sub02/ic_dia01.png) no-repeat }
.ic_dia02{background:url(../images/sub02/ic_dia02.png) no-repeat }
.ic_dia03{background:url(../images/sub02/ic_dia03.png) no-repeat }
.ic_dia04{background:url(../images/sub02/ic_dia04.png) no-repeat }
.ic_dia05{background:url(../images/sub02/ic_dia05.png) no-repeat }
.ic_dia06{background:url(../images/sub02/ic_dia06.png) no-repeat }


@media all and (min-width:768px) {
.time_info{padding:30px 30px;}
.time_info div:last-child{padding:0; margin:0;  border-top:0px; border-left:1px solid #e6e6e6; padding-left:30px; background-position:30px center; box-sizing:border-box}

.longbox .linebox{width:100%; float:none; margin:0; margin-bottom:20px !important;}


}



/*의무기록발급*/
.step_li{text-align:center;}
.step_li li{display:inline-block; border:3px solid #0074f6; border-color:rgba(0,116,246,0.8); position:relative; border-radius:100px; padding: 0 20px 0 0; margin-bottom:5px; font-weight:800; width:100%; text-align:left; box-sizing:border-box}
.step_li li span{display:inline-block; font-size:0.8em; font-weight:800;  color:#ffffff; position:relative; line-height:60px; padding:0 10px; margin:5px; margin-right:10px;}
.step_li li span b{position:Relative; z-index:1;}
.step_li li span:before{content:'';  position:absolute; z-index:0; width:100%; height:100%; display:block; left:0; background:rgba(0,116,246, 0.8); border-radius:100px;}
.pricetable .btnone{border-width:0px;}

@media all and (min-width:768px) {
.step_li li{width:auto;  text-align:center;}
.step_li li{padding:0 25px 0 0}

.pricetable .col-02{box-sizing:border-box; padding-right:10px;}
.pricetable .col-02:last-child{padding-right:0; padding-left:10px;}
.pricetable .btnone {border-width:1px; }

}



/*의료진소개*/
.docBox{overflow:hidden;}
.docBox .img {position:relative}
.docBox .img span{position:absolute; display:inline-block; padding:20px 0px; width:120px; text-align:center; color:#ffffff; background:#0074f6; font-weight:600; font-size:1.2em}
.docBox .img img{width:100%}

.docBox .info{padding:20px 0; box-sizing:border-box}
.docBox .info h4{font-size:1.4em; margin-bottom:10px; font-weight:normal}
.docBox .info h4 span{color:#0f449b; font-weight:600; font-size:1.5em}
.docBox .info .doc_dl dt,
.docBox .info h5{font-size:1.2em; margin-bottom:10px; font-weight:600; padding-bottom:5px; border-bottom:1px solid #dcdcdc; color:#0074f6; position:relative; box-sizing:border-box}
.docBox .info .doc_dl dt:before,
.docBox .info h5:before{content:''; display:block; position:absolute; left:0; bottom:0; width:80px; height:2px;  background:#0074f6; }
.docBox .info .doc_dl dd{margin-bottom:4px; background:url("../images/common/dot_li.gif") no-repeat 0px 10px; padding-left:8px; margin-bottom:3px;}
.docBox .info .doc_dl dd:last-child{margin-bottom:0;}
.docBox .info .doc_dl{margin-bottom:20px;}

.doc_table{text-align:center; background:#ffffff; border-collapse:collapse;}
.doc_table th, .doc_table td{border-left:1px solid #dcdcdc; font-size:0.9em;}
.doc_table {width:100%; border-top:1px solid #0f449b;}
.doc_table th, .doc_table td {border-bottom:1px solid #dcdcdc; border-left:1px solid #dcdcdc; vertical-align:middle; padding:10px 5px;}
.doc_table th:first-child{border-left:0px}
.doc_table thead th {background:#f9fcff; color:#0f449b; border-bottom:1px solid #dcdcdc; font-weight:600}
.doc_table td.bgc {background:#f5f5f5; text-align:center; font-weight:600}
.doc_table td:first-child{border-left:0}
.doc_table tbody th {background:#f5f5f5; color:#333;}

.cir_on, .cir_off{position:relative;}
.cir_on:before{content:'●'; color:#505050 }
.cir_off:before{content:'○'; color:#505050 }
.cir_half:before{content:'◐'; color:#505050 }
@media all and (min-width:640px) {
.docBox{overflow:hidden; }
.docBox .img{float:left; width:35%;  background:none;}
.docBox .info{float:left; width:62%; padding:0 30px }

.docBox .left{float:left;}
.docBox .right{float:right;}
}

@media all and (min-width:1200px) {
.docBox .info{padding:40px;}
.docBox .info .doc_dl dt,
.docBox .info h5{padding-bottom:10px;}
}


/*진료과목안내*/

.divinfo{position:relative; border:1px solid #dcdcdc; margin-bottom:20px;}
.divinfo .info{padding:30px 20px; box-sizing:border-box;}
.division img{width:100%}

@media all and (min-width:768px) {
.division{border:1px solid #dcdcdc; box-sizing:border-box; }
.division .divinfo{overflow:hidden; box-sizing:border-box; margin-bottom:0; border:0px; border-bottom:1px solid #dcdcdc; position:relative;}
.division .divinfo .info{width:50%;}
.division .divinfo .photo{width:50%;}
.division .divinfo .left{float:left;}
.division .divinfo .right{float:right;}
.division .divinfo:first-child{border-bottom:0}

}
@media all and (min-width:1200px) {
.division .divinfo .info ul li{font-size:1.1em}
.division .divinfo .info{padding:50px 40px}
}

/*사회사업실소개*/
.introPro{position:relative}
.introPro .info{background:#0f449b url(../images/common/logo_mark.png) no-repeat right top; padding:20px 20px; background-size:80px !Important; box-sizing:border-box}
.introPro h6,
.introPro p{color:#ffffff}
.introPro h6{margin-bottom:10px; font-size:1.2em}
.introPro img{width:100%}

@media all and (min-width:768px) {
.introPro h6{font-size:1.4em}
}


@media all and (min-width:1200px) {
.introPro {margin-bottom:80px !important;}
.introPro h6{font-size:1.6em}
.introPro:after{content:''; display:block; clear:both;}
.introPro .photo{float:left; width:80%;}
.introPro .info{padding:40px 30px; width:25%; position:absolute; top:50px; z-index:10;
-webkit-box-shadow: 0px 0px 30px -5px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 30px -5px rgba(0,0,0,0.3);
box-shadow: 0px 0px 30px -5px rgba(0,0,0,0.3);}

.introPro .left{float:left; left:0;}
.introPro .right{float:right; right:0;}
.introPro:after{content:''; clear:both; display:block;}

}

.cir_li {text-align:center; padding-bottom:80px;}
.cir_li li{display:inline-block; vertical-align:top; position:relative;width:100px; height:100px; margin:20px;padding:45px 10px; box-sizing:border-box; color:#ffffff; text-align:center;}
.cir_li li:before{content:''; position:absolute; width:160px; height:160px; background:rgba(0,116,246, 0.8); z-index:0; top:0; left:50%; margin-left:-80px; border-radius:500px;}
.cir_li li b{position:relative; z-index:1; font-weight:600; font-size:1.2em;}
.cir_li li span{position:relative; z-index:1; color:#ffffff; line-height:1.2; font-weight:400; display:block; margin-top:10px;}




@media all and (min-width:768px){
.cir_li li{width:160px; height:160px;}
.cir_li li b{font-size:1.4em}
.cir_li li:before{width:180px; height:180px; margin-left:-90px;}
}