/*center_styleguide*/ .hidden_text_box{position:relative; display:inline-block;} .hidden_text_box img{position:relative; z-index:10;} .hidden_text_box .hidden_txt{overflow:auto; position:absolute; left:0; top:0; z-index:0; width:100%; height:100%;} /* 큰 이미지로 보기*/ .pic_btn a{display:none;} .pic_btn a:hover{background-color:#309bed;color:#fff;transition: all 300ms ease-out;} @media (max-width: 767px){ .pic_btn a{display:block;width:60%;margin:10px auto 10px;padding:10px 40px;border:1px solid #ddd;background:#fff;text-align:center;} } @media (max-width: 450px){ .pic_btn a{width:100%} } /* 큰 이미지로 보기 End */ .button_center {width: 100%;text-align: center;clear: both;padding: 15px 0;} .center_contents:after {content: ''; display: block;clear: both;} .clear {clear: both;} .h2 {color: #127ac7;} /*color*/ .txt_gr {color:#aaaaaa;} .txt_nv {color: #05263f;} .txt_sb {color: #33a7fe;} .txt_nb {color: #28343d;} .txt_bluegray {color: #6f767d;} .txt_blue {color: #1c92eb;} .txt_nb2 {color: #36435e;} /*font-size*/ .f16 {font-size: 16px;} .f18 {font-size: 18px;} .f20 {font-size: 20px;} .f22 {font-size: 22px;} .f24 {font-size: 24px;} .f30 {font-size: 30px;} .f36 {font-size: 36px;} .f40 {font-size: 40px;} /*letter-spacing*/ #ls {letter-spacing:-2.5px;} .ls2 {letter-spacing:-1.5px;} /*margin*/ .greeting_margin1 {margin: 10px 0 -22px} .greeting_margin2 {margin-bottom: 10px} .greeting_margin3 {margin: 0} .greeting_margin4 {margin: 2px 0 -22px} .greeting_margin5 {margin-top: -22px} .greeting_margin6 {margin-top: -10px;} .greeting_margin7 {margin-top: -22px;;margin-bottom: 30px;} .greeting_margin8 {margin-top: -20px} .greeting_margin9 {margin-top: -22px;;margin-bottom: 20px;} .greeting_margin10 {margin-bottom: 20px;} .greeting_margin11 {margin-top: 20px;margin-bottom: 20px;} .greeting_margin12 {margin-top: 12px;margin-bottom: -15px;} .greeting_margin13 {margin-top: 0px;margin-bottom: 10px;} .greeting_margin14 {margin-top: -10px;margin-bottom: 10px;} /*font-weight*/ .center_txt_normal {font-weight: normal;} .center_txt_medium {font-weight: 400;} .center_txt_bold {font-weight: 500;} /* 인사말 타입1,2,3 */ /* 배경세팅 */ .center_txt_area2:before { position: absolute; left: -45px; top: 60px; content: ''; background: url(../../images/refer/layout/txt_bg.png) no-repeat; width: 133px; height: 131px; display: block; z-index: -1; } .center_txt_area2 {position: relative;} .center_txt_area2 .center_txt_box {position:relative; width:100%; min-height:410px; padding-right:45%;} .center_txt_area2 .center_img_box { position: absolute; right:0; top:0; width: 40%; height: 430px; padding:0 0 30px 0; transition:padding 0.3s linear; -webkit-transition:padding 0.3s linear; max-width:325px; } .center_txt_area2 .center_img_box .center_img {overflow:hidden; position:relative; width:100%; height:100%;} .center_txt_area2 .center_img_box .center_img span{position:absolute; left:50%; top:0; width:2000px; height:100%; margin-left:-1000px; text-align:center;} .center_txt_area2 .center_img_box .center_img span img{height:100%; vertical-align:top;} .center_txt_area2 .center_img_box .signature_box:before {position: absolute; top: 58%; margin-top: -25px; left: 30px; content: ''; width: 2px; height: 50px; background-color: #fff; display: block;} .center_txt_area2 .center_img_box .signature_box { height: 90px; padding: 18px 0 0px 45px; background-color: #03639f; transition:all 0.3s linear; -webkit-transition:all 0.3s linear;position: absolute; width: 100%;right: auto; bottom:0; } .center_txt_area2 .center_img_box .signature_box p {color: #fff;} .center_txt_area2 .center_txt_area2:before {position: absolute; left: -45px; top: 60px; content: ''; background: url(../../images/refer/layout/txt_bg.png) no-repeat; width: 133px; height: 131px; display: block; z-index: -1;} /* type_2 서명박스 없는 디자인*/ .center_txt_area2.type_2 .center_img_box{height:400px; padding-bottom:0;} .center_txt_area2.type_2 .center_img_box .signature_box{display:none;} /* type_3 이미지, 서명박스 없는 디자인*/ .center_txt_area2.type_3{} .center_txt_area2.type_3 .center_txt_box{min-height:10px; padding:0;} .center_txt_area2.type_3 .signature_box{} .center_txt_area2.type_3 .center_img_box{position:absolute; right:0; top:auto; bottom:0; width:auto; height:auto; padding:0; text-align:right;} .center_txt_area2.type_3 .center_img_box .center_img{display:none;} .center_txt_area2.type_3 .center_img_box .signature_box{position:relative; right:auto; bottom:auto; width:100%; height:auto; padding:0; background-color:transparent;} .center_txt_area2.type_3 .center_img_box .signature_box:before{display:none;} .center_txt_area2.type_3 .center_img_box .signature_box p {display:inline-block; vertical-align:baseline; color: #000;} .center_txt_area2.type_3 .center_img_box .signature_box p:nth-child(2){padding-left:10px;} /*인사말 수정*/ .signature_date {display: block !important;} .center_txt_area2 .greeting_txt_box {padding-right: 43%;min-height: 240px !important;} .center_txt_area2.type_2 .center_img_box {height: 272px !important;padding-top:10px !important;} .center_txt_area2.type_2 .center_img_box .greeting_shadow {transition:all 2s ease;position: absolute;width: 369px;height: 262px;right: 24px;bottom: -10px;background-color: #ccc;z-index: -1;} .center_txt_area2.type_2 .center_img_box .greeting_deco {transition:all 2s ease;position: absolute;top: -8px;left: 60px;z-index: -1} /* 클리어 박스 밑 텍스트 마진값 */ .greeting_txt_p {margin-top: 15px !important;} @media screen and (max-width:1100px) { .center_txt_area2.type_2 .center_img_box .greeting_shadow {display: none;} .center_txt_area2.type_2 .center_img_box .greeting_deco {display: none;} } @media only screen and (max-width: 767px) { .center_txt_area2 .greeting_txt_box {padding-right: 0} .center_txt_area2.type_2 .center_img_box {height: 320px !important;} } /*단계도 type1 세로형*/ .step-1st .step_col .step_l .icon_circle {position: relative;float: left;margin: 35px 30px;width: 92px;height: 93px;background-color: #f7f7f7;border-radius: 50px} .step-1st .step_col .step_l .icon_circle:before {content: '';display: block;width: 51px;height: 50px;position: absolute;top: 50%;left: 50%;margin-top: -25.5px;margin-left: -25px;} .step-1st .step_col .step_l .icon_circle img {position: absolute;width: 51px;height: 50px;top: 50%;left: 50%;margin-top: -25.5px;margin-left: -25px;} .step-1st .step_col .step_l {position: relative;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;width: 35%;float: left;} .step-1st .step_col .step_l .step_txt {width: 60%;margin-top: 55px;float: left;} .step-1st .step_col .step_l .step_fourth {margin-top: 45px;} .step-1st .step_col .step_r {position: relative;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;width: 65%;float: left;border-left: none;padding: 30px 15px 30px 20px;min-height:170px;} .step-1st .step_col .step_r:after{content:"";position:absolute;left:0;top:0;border-left:1px solid #ddd;height:100%;} .step-1st .step_col .step_l .step_txt span {font-size: 16px;} .step-1st .step_col .step_l .step_txt h5 {font-size: 20px;font-weight: 500;} .step-1st .step_col .step_l .step_txt h5>span {font-size: 18px;font-weight: 400;} .step-1st .step_col {position:relative;width: 100%;border: 1px solid #ddd;border-bottom: none;} .step-1st .step_col:last-child { border-bottom: 1px solid #ddd;} .step-1st .step_col:not(:last-child):after {content: '';display: block;width: 28px;height: 28px;border-radius: 50px;border: 1px solid #ddd;position: absolute;bottom: -16px;left: 61px;background:url(../../images/center/layout/center_arrow2.png) no-repeat;z-index: 1;} @media screen and (min-width: 767px) and (max-width: 1119px) { .step-1st .step_col .step_l {width: 40%;} .step-1st .step_col .step_r {width: 60%;} .step-1st .step_col .step_l .step_txt {width: 40%;} } @media only screen and (max-width:767px){ .step-1st .step_col .step_l {min-height: 140px} .step-1st .step_col .step_r {padding:20px 15px 10px 20px;min-height: 170px} .step-1st .step_col .step_l .icon_circle {display: none;} .step-1st .step_col .step_l .step_txt {float: none;width: 100%;margin: 50px auto; text-align: center;} .step-1st .step_col .step_l .step_txt.step_fourth {margin: 40px 0 20px 0;} .step-1st .step_col:not(:last-child) .step_l:after {left: 50%;margin-left: -14px;} .step-1st .step_col:not(:last-child):after {left: calc(17% - 14px);} .step-1st .step_col .step_l .step_txt span {font-size: 16px;} .step-1st .step_col .step_l .step_txt h5 {font-size: 18px;} .step-1st .step_col .step_l .step_txt h5>span {font-size: 16px;} } @media only screen and (max-width:551px){ .step-1st .step_col .step_l {width: 100%;;min-height: 140px;border-right: none;} .step-1st .step_col .step_r {width: 100%;padding:0px 15px 10px 20px;min-height: 135px; } .step-1st .step_col .step_l .icon_circle {display: block;float: none;margin: 40px auto;} .step-1st .step_col .step_l .step_txt {float: none;width: 100%;margin: 10px auto; text-align: center;} .step-1st .step_col:not(:last-child) .step_l:after {display: none;} .step-1st .step_col .step_r:after {border-left: none;} .step-1st .step_col:not(:last-child):after {left: calc(50% - 14px);} } /*단계도 type2 가로형*/ .sub010201 {width: 100%;} .sub010201_col>li {float: left;width: 33.3%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;border-top: 1px solid #ddd;border-left: 1px solid #ddd;border-bottom: 1px solid #ddd;padding: 20px;position: relative;min-height: 320px} .sub010201_col>li:not(:last-child):after {content: '';background:url(../../images/center/layout/center_arrow3.png)no-repeat;border-radius: 50px;width: 28px;height: 28px;display: block;position: absolute;right: -15px;top: 60px;z-index: 1;} .sub010201_col>li:after:last-child {display: none;} .sub010201_col>li:last-child {border-right: 1px solid #ddd;} .sub010201_col li>.step_green {background-color: #1cbabb;}.sub010201_col li>.skyblue {background-color: #1c92eb;}.sub010201_col li>.deepblue {background-color: #2865c9;} .sub010201_col li>.icon_circle2 {position:relative;width: 100px;height: 100px;border-radius: 50px;line-height: 100px;text-align: center;color: #fff;margin: 0 auto;} .sub010201_col li>.step_txt2 {text-align: center;padding: 15px;} .sub010201_col li>.step_txt2 h5 {font-weight: 500;font-size: 16px;color: #33373b} .sub010201_col li>.step_txt2 span {font-weight: 400;font-size: 16px;color: #596068} .sub010201_col li>.center-list-1st li{color: #596068;font-weight: normal;font-size: 16px;position: relative;margin: 3px 0;padding-left: 7px;color: #596068;font-size: 16px;line-height: ;} .sub010201_col li>.center-list-1st li:before {content: '';background: #1c92eb;width: 3px;height: 3px;position: absolute;top: 10px;left: -1px;display: inline-block} .sub010201_col li>.center-list-1st {word-break: keep-all;word-wrap: break-word;padding-top: 30px;} .sub010201_col li> span {font-size: 12px;color: #596068;} .sub010201_col li>.icon_circle2>img {position: absolute;top: 50%;left: 50%;margin-left: -28.5px;margin-top: -23.5px;} /*단계도 type3 단색*/ .step_l,.step_r {} .colbox3 {margin-bottom:15px;} .sub0201 .colbox3 .step_col2 {display:table; position:relative; width: 100%; min-height:150px; border: 1px solid #ddd;} .sub0201 .colbox3 .step_col2:last-child {border-bottom: 1px solid #ddd;} .sub0201 .colbox3 .step_col2 .step_l2 {display:table-cell; box-sizing: border-box;width: 22%;height: 100%;border-right: 1px solid #ddd; text-align:center; vertical-align:middle;} .sub0201 .colbox3 .step_col2 .step_l2 h4 {font-weight: 400;color: #fff;text-align: center;width: 100%; height:100%; line-height: 24px;font-size:20px ; } .sub0201 .colbox3 .step_col2 .step_r2 {display:table-cell;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;width: 78%;border-left: none;padding: 20px 30px; text-align:left; vertical-align:middle;} .sub0201 .colbox3 .step_col2 .step_r2 p:nth-child(1){margin-top:0;} .sub0201 .colbox3 .step_col2 .step_r2 p {font-size: 16px; color: #596068} .sub0201 .colbox3 .step_col2 .step_r2 .list-2st>li {font-size: 16px;font-weight: 300; color: #33373b} .sub0201 .colbox3 .step_col2 .step_lightgreen {background-color: #1cbabb;} .sub0201 .colbox3 .step_col2 .step_lightblue {background-color: #1c92eb} .sub0201 .colbox3 .step_col2 .step_deepblue {background-color: #0065c9;} .sub0201 .colbox3 .step_col2 .step_lightgray {background-color: #7688a5;} /*임상시험센터 topbox*/ .ctc_topbox {position: relative;} .ctc_topbox .ctc_inner {background: url(../../images/ctc/sub03/sub0302_img1.jpg) no-repeat;-webkit-background-size:cover ;background-size: cover;background-position: center center;} .ctc_topbox .ctc_inner_ir {position: absolute;left: auto;right: 50px;top: 50%;margin-top: -85px;} .ctc_topbox .ctc_box_txtwrap {position: relative;padding: 40px 530px 45px 52px;min-height: 210px;} .ctc_topbox .ctc_box_txtwrap strong {font-size: 20px;color: #33373b;font-weight: 500;} .ctc_topbox .ctc_box_txtwrap strong span {font-size: 20px;color: #127ac7;font-weight: 500;} /*Value & Activity */ #con_040103 .box_2{margin-top:30px;} #con_040103 .box_2>ul{border-top:1px solid #e2e2e2; border-left:1px solid #e2e2e2;} #con_040103 .box_2>ul:after{content:""; display:block; clear:both;} #con_040103 .box_2>ul>li{float:left; position:relative; width:33.3%; height:280px; padding:30px 40px; border-right:1px solid #e2e2e2; border-bottom:1px solid #e2e2e2;} #con_040103 .box_2>ul>li:before{ content:""; display:block; position:absolute; right:30px; top:30px; z-index:0; width:101px; height:101px; background-color:#f7f7f7; background-repeat:no-repeat; background-position:center center; background-size:100% auto; border-radius:50%; -webkit-border-radius:50%; } #con_040103 .box_2>ul>li:nth-child(1):before{background-image:url(../../images/home/sub04/con_040103_simbol_5.png);} #con_040103 .box_2>ul>li:nth-child(2):before{background-image:url(../../images/home/sub04/con_040103_simbol_6.png);} #con_040103 .box_2>ul>li:nth-child(3):before{background-image:url(../../images/home/sub04/con_040103_simbol_7.png);} #con_040103 .box_2>ul>li:nth-child(4):before{background-image:url(../../images/home/sub04/con_040103_simbol_8.png);} #con_040103 .box_2>ul>li:nth-child(5):before{background-image:url(../../images/home/sub04/con_040103_simbol_9.png);} #con_040103 .box_2>ul>li .lay{position:relative; z-index:10;} #con_040103 .box_2>ul>li .lay strong{display:table-cell; width:100%; height:101px; font-family:"Noto Sans KR"; font-size:24px; vertical-align:middle; color:#596068;} #con_040103 .box_2>ul>li .lay strong span{padding-left:10px; font-family:"Noto Sans KR"; font-weight:300; font-size:16px; color:#1c92eb;} #con_040103 .box_2>ul>li .lay ul li{position:relative; line-height:22px; padding:6px 0 6px 10px; font-family:"Noto Sans KR"; font-weight:300; font-size:16px; color:#596068;} #con_040103 .box_2>ul>li .lay ul li:before{content:""; display:block; position:absolute; left:0; top:17px; width:4px; height:4px; background-color:#298fd9;} @media all and (min-width: 1001px) and (max-width: 1100px), all and (min-width: 531px) and (max-width: 800px), all and (max-width: 360px) { #con_040103 .box_2>ul>li .lay strong span{display:block; padding-left:0;} } @media all and (max-width: 1000px) { #con_040103 .box_2>ul>li{width:50%;} } @media all and (max-width: 700px) { #con_040103 .box_2>ul>li{padding:20px 30px;height:250px;} #con_040103 .box_2>ul>li:before{top:20px; right:20px; width:80px; height:80px;} #con_040103 .box_2>ul>li .lay strong{height:80px;} #con_040103 .box_2>ul>li .lay ul{margin-top:20px;} #con_040103 .box_2>ul>li .lay ul li{padding:2px 0 2px 10px; font-size:14px;} #con_040103 .box_2>ul>li .lay ul li:before{top:13px;} } @media all and (max-width: 530px){ #con_040103 .box_2>ul>li{width:100%; height:auto;} } /*단계도 가로형*/ .arrow_list{margin-bottom:40px;} .arrow_list ol{ overflow:hidden; border-width:0 1px 1px 1px; border-style:solid; border-color:#e0e0e0; counter-reset:section; } .arrow_list ol:after{content:""; display:block; clear:both;} .arrow_list ol li{float:left; position:relative;} .arrow_list ol li:after{display:none; content:""; position:absolute; left:50%; top:0; z-index:0; width:6000px; height:1px; margin-left:-3000px; background-color:#e0e0e0;} .arrow_list ol li:before{display:none; content:""; position:absolute; left:0; top:0; z-index:0; width:1px; height:6000px; background-color:#e0e0e0;} .arrow_list ol li .lay{padding:35px 20px 30px 20px;} .arrow_list ol li .ctc_across{padding:35px 8px 30px 8px !important;} .arrow_list ol li:not(:first-child) .lay:after{ content:""; display:block; position:absolute; right:100%; top:70px; z-index:10; width:28px; height:28px; margin-right:-14px; border:1px solid #ececec; background:#fff url(../../images/home/sub01/center_arrow.png) no-repeat 10px center; border-radius:50%; -webkit-border-radius:50%; } .arrow_list ol li .lay[class*="icon_"]:before{ content:""; display:block; width:100px; height:100px; margin:0 auto 10px auto; background-color:#eee; background-repeat:no-repeat; background-position:center center; border-radius:50%; -webkit-border-radius:50%; } .arrow_list ol li .lay.icon_1:before{background-image:url(../../images/center/layout/center_w_icon1.png);} .arrow_list ol li .lay.icon_2:before{background-image:url(../../images/center/layout/center_w_icon2.png);} .arrow_list ol li .lay.icon_3:before{background-image:url(../../images/center/layout/center_w_icon3.png);} .arrow_list ol li .lay.icon_4:before{background-image:url(../../images/center/layout/center_w_icon4.png);} .arrow_list ol li .lay.icon_5:before{background-image:url(../../images/center/layout/center_w_icon5.png);} .arrow_list ol li .lay.icon_6:before{background-image:url(../../images/center/layout/center_w_icon6.png);} .arrow_list ol li .lay.icon_7:before{background-image:url(../../images/center/layout/center_w_icon7.png);} .arrow_list ol li .lay.icon_8:before{background-image:url(../../images/center/layout/center_w_icon8.png);} .arrow_list ol li .lay.icon_9:before{background-image:url(../../images/center/layout/center_w_icon9.png);} .arrow_list ol li .lay.icon_10:before{background-image:url(../../images/center/layout/center_w_icon10.png);} .arrow_list ol li .lay.icon_11:before{background-image:url(../../images/center/layout/center_w_icon11.png);} .arrow_list ol li .lay.icon_12:before{background-image:url(../../images/center/layout/center_w_icon12.png);} .arrow_list ol li .lay.icon_13:before{background-image:url(../../images/center/layout/center_w_icon13.png);} .arrow_list ol li .lay.icon_14:before{background-image:url(../../images/center/layout/center_w_icon14.png);} .arrow_list ol li .lay.icon_15:before{background-image:url(../../images/center/layout/center_w_icon15.png);} .arrow_list ol li .lay.icon_16:before{background-image:url(../../images/center/layout/center_w_icon16.png);} .arrow_list ol li .lay.icon_17:before{background-image:url(../../images/center/layout/center_w_icon17.png);} .arrow_list ol li .lay.icon_18:before{background-image:url(../../images/center/layout/center_w_icon18.png);} .arrow_list ol li .lay.icon_19:before{background-image:url(../../images/center/layout/center_w_icon19.png);} .arrow_list ol li .lay.icon_20:before{background-image:url(../../images/center/layout/center_w_icon20.png);} .arrow_list ol li .lay.icon_21:before{background-image:url(../../images/center/layout/center_w_icon21.png);} .arrow_list ol li .lay.icon_22:before{background-image:url(../../images/center/layout/center_w_icon22.png);} .arrow_list ol li .lay.icon_23:before{background-image:url(../../images/center/layout/center_w_icon23.png);} .arrow_list ol li .lay.icon_24:before{background-image:url(../../images/center/layout/center_w_icon24.png);} .arrow_list ol li .lay.icon_25:before{background-image:url(../../images/center/layout/center_w_icon25.png);} .arrow_list ol li .lay.icon_26:before{background-image:url(../../images/center/layout/center_w_icon26.png);} .arrow_list ol li .lay.icon_27:before{background-image:url(../../images/center/layout/center_w_icon27.png);} .arrow_list ol li .lay.icon_28:before{background-image:url(../../images/center/layout/center_w_icon28.png);} .arrow_list ol li .lay.icon_29:before{background-image:url(../../images/center/layout/center_w_icon29.png);} .arrow_list ol li .lay.icon_30:before{background-image:url(../../images/center/layout/center_w_icon30.png);} .arrow_list ol li .lay.icon_31:before{background-image:url(../../images/center/layout/center_w_icon31.png);} .arrow_list ol li .lay.icon_32:before{background-image:url(../../images/center/layout/center_w_icon32.png);} .arrow_list ol li .lay.icon_33:before{background-image:url(../../images/center/layout/center_w_icon33.png);} .arrow_list ol li .lay.icon_34:before{background-image:url(../../images/center/layout/center_w_icon34.png);} .arrow_list ol li .lay.icon_35:before{background-image:url(../../images/center/layout/center_w_icon35.png);} .arrow_list ol li:nth-child(4n+1) .lay[class*="icon_"]:before{background-color:#1cbabb;} .arrow_list ol li:nth-child(4n+2) .lay[class*="icon_"]:before{background-color:#1c92eb;} .arrow_list ol li:nth-child(4n+3) .lay[class*="icon_"]:before{background-color:#2865c9;} .arrow_list ol li:nth-child(4n+4) .lay[class*="icon_"]:before{background-color:#7688a5;} .arrow_list ol li .lay strong{display:block; text-align:center; /* font-family:"Noto Sans KR";*/ font-weight:400; font-size:16px; color:#596068;letter-spacing: -1px} .arrow_list ol li .lay strong:before{ display:block; color:#33373b; counter-increment:section; content:"STEP. "counter(section); } .arrow_list ol li:nth-child(1) .lay strong:before, .arrow_list ol li:nth-child(2) .lay strong:before, .arrow_list ol li:nth-child(3) .lay strong:before, .arrow_list ol li:nth-child(4) .lay strong:before, .arrow_list ol li:nth-child(5) .lay strong:before, .arrow_list ol li:nth-child(6) .lay strong:before, .arrow_list ol li:nth-child(7) .lay strong:before, .arrow_list ol li:nth-child(8) .lay strong:before, .arrow_list ol li:nth-child(9) .lay strong:before{content:"STEP. 0"counter(section);} .arrow_list ol li .lay strong em{display:block; line-height:16px; font-family:"Noto Sans KR"; font-style:normal; font-weight:400; color:#1c92eb;} /* 3단 */ .arrow_list ol li{width:33.3%;} .arrow_list ol li:nth-child(1):before, .arrow_list ol li:nth-child(2):before, .arrow_list ol li:nth-child(3):before, .arrow_list ol li:nth-child(3n+1):after{display:block;} .arrow_list ol li:nth-child(3n+1){clear:both;} .arrow_list ol li:nth-child(3n+1):before{display:none;} .arrow_list ol li:nth-child(6n+4), .arrow_list ol li:nth-child(6n+5), .arrow_list ol li:nth-child(6n+6){float:right;} .arrow_list ol li:nth-child(6n+5) .lay:after, .arrow_list ol li:nth-child(6n+6) .lay:after{ right:0; margin-right:-15px; margin-left:0; transform:rotate(180deg); -webkit-transform:rotate(180deg); } .arrow_list ol li:nth-child(6n+4) .lay:after, .arrow_list ol li:nth-child(6n+7) .lay:after{ right:50%; top:0; margin:-15px -15px 0 0; transform:rotate(90deg); -webkit-transform:rotate(90deg); } @media all and (min-width: 1001px){ /* 6단 */ .arrow_list.type_2 ol li{width:16.6%;} .arrow_list.type_2 ol li:nth-child(1):before, .arrow_list.type_2 ol li:nth-child(2):before, .arrow_list.type_2 ol li:nth-child(3):before, .arrow_list.type_2 ol li:nth-child(4):before, .arrow_list.type_2 ol li:nth-child(5):before, .arrow_list.type_2 ol li:nth-child(6):before, .arrow_list.type_2 ol li:nth-child(6n+1):after{display:block;} .arrow_list.type_2 ol li:nth-child(3n+1){clear:none;} .arrow_list.type_2 ol li:nth-child(6n+1){clear:both;} .arrow_list.type_2 ol li:nth-child(6n+1):before{display:none;} .arrow_list.type_2 ol li:nth-child(6n+4), .arrow_list.type_2 ol li:nth-child(6n+5), .arrow_list.type_2 ol li:nth-child(6n+6){float:left;} .arrow_list.type_2 ol li:nth-child(12n+7), .arrow_list.type_2 ol li:nth-child(12n+8), .arrow_list.type_2 ol li:nth-child(12n+9), .arrow_list.type_2 ol li:nth-child(12n+10), .arrow_list.type_2 ol li:nth-child(12n+11), .arrow_list.type_2 ol li:nth-child(12n+12){float:right;} .arrow_list.type_2 ol li:nth-child(6n+5) .lay:after, .arrow_list.type_2 ol li:nth-child(6n+6) .lay:after{ right:100%; transform:rotate(0deg); -webkit-transform:rotate(0deg); } .arrow_list.type_2 ol li:nth-child(6n+4) .lay:after, .arrow_list.type_2 ol li:nth-child(6n+7) .lay:after{ right:100%; top:70px; margin:0 -15px 0 0; transform:rotate(0deg); -webkit-transform:rotate(0deg); } .arrow_list.type_2 ol li:nth-child(12n+8) .lay:after, .arrow_list.type_2 ol li:nth-child(12n+9) .lay:after, .arrow_list.type_2 ol li:nth-child(12n+10) .lay:after, .arrow_list.type_2 ol li:nth-child(12n+11) .lay:after, .arrow_list.type_2 ol li:nth-child(12n+12) .lay:after{ right:0; margin-right:-15px; margin-left:0; transform:rotate(180deg); -webkit-transform:rotate(180deg); } .arrow_list.type_2 ol li:nth-child(12n+7) .lay:after, .arrow_list.type_2 ol li:nth-child(12n+13) .lay:after{ right:50%; top:0; margin:-15px -15px 0 0; transform:rotate(90deg); -webkit-transform:rotate(90deg); } } @media all and (max-width: 1000px){ .arrow_list ol li{width:33.3% !important;} .arrow_list ol li:nth-child(6n+5) .lay:after, .arrow_list ol li:nth-child(6n+6) .lay:after{ right:0; margin-right:-15px; margin-left:0; transform:rotate(180deg); -webkit-transform:rotate(180deg); } .arrow_list ol li:nth-child(6n+4) .lay:after, .arrow_list ol li:nth-child(6n+7) .lay:after{ right:50% !important; top:0 !important; margin:-15px -15px 0 0; transform:rotate(90deg); -webkit-transform:rotate(90deg); } } @media all and (max-width: 800px){ .arrow_list ol li:not(:first-child) .lay:after{top:50px;} .arrow_list ol li .lay[class*="icon_"]:before{width:60px; height:60px; background-size:60% auto;} .arrow_list ol li .lay strong, .arrow_list ol li .lay strong:before, .arrow_list ol li .lay strong em{font-size:14px;} } @media all and (max-width: 600px){ .arrow_list ol li:not(:first-child) .lay:after{top:35px;} .arrow_list ol li .lay{padding:20px;} .arrow_list ol li .lay strong, .arrow_list ol li .lay strong:before, .arrow_list ol li .lay strong em{font-size:12px;} } @media all and (max-width: 500px){ .arrow_list ol li:not(:first-child) .lay:after{ top:25px; transform:scale(0.5); } .arrow_list ol li:nth-child(6n+5) .lay:after, .arrow_list ol li:nth-child(6n+6) .lay:after{ transform:rotate(180deg) scale(0.5); -webkit-transform:rotate(180deg) scale(0.5); } .arrow_list ol li:nth-child(6n+4) .lay:after, .arrow_list ol li:nth-child(6n+7) .lay:after{ transform:rotate(90deg) scale(0.5); -webkit-transform:rotate(90deg) scale(0.5); } .arrow_list ol li .lay{padding:20px 10px;} .arrow_list ol li .lay[class*="icon_"]:before{width:40px; height:40px;} .arrow_list ol li .lay strong, .arrow_list ol li .lay strong:before, .arrow_list ol li .lay strong em{font-size:11px;} } @media all and (max-width: 400px){ .arrow_list ol li{border-top:1px solid #e0e0e0;} .arrow_list ol li:after, .arrow_list ol li:before{display:none !important;} .arrow_list ol li{float:none !important; width:100% !important;} .arrow_list ol li:not(:first-child) .lay:after{ top:0 !important; right:50% !important; width:26px !important; height:26px !important; margin:-13px -13px 0 0 !important; background-size:auto 50% !important; background-position:10px center !important; transform:rotate(90deg); -webkit-transform:rotate(90deg); } .arrow_list ol li .lay{padding:40px 20px !important;} .arrow_list ol li .lay[class*="icon_"]:before{width:80px !important; height:80px !important;} .arrow_list ol li .lay strong, .arrow_list ol li .lay strong:before, .arrow_list ol li .lay strong em{font-size:14px !important;} } @media only screen and (max-width:1200px){ /*인사말 반응형*/ .center_txt_area2 .center_img_box{padding-bottom:0;} /* .center_txt_area2 .center_img_box .signature_box {right:0;} */ } @media screen and (max-width:1100px) { .ctc_topbox .ctc_inner_ir {display: none;} .ctc_topbox .ctc_box_txtwrap {padding:40px 52px 45px 52px !important;} } @media only screen and (max-width:767px){ /*인사말 반응형*/ .center_txt_area2 .center_img_box {position:relative; right:auto; top:auto; width: 100%; height:400px; margin:20px 0px;max-width:100%;} .center_txt_area2 .center_txt_box {width: 100%; min-height:10px; padding-right:0;} .center_txt_area2.type_3 .center_img_box{margin:0;} .greeting_margin7 {margin-bottom: 0;} /* .step-1st .step_col .step_l {min-height: 140px} .step-1st .step_col .step_r {padding:20px 15px 10px 20px;; } .step-1st .step_col .step_l .icon_circle {display: none;} .step-1st .step_col .step_l .step_txt {float: none;width: 100%;margin: 30px auto; text-align: center;} .step-1st .step_col:not(:last-child) .step_l:after {left: 50%;margin-left: -14px;}*/ } @media only screen and (max-width:800px){ /*인사말 반응형*/ .center_txt_area2 .center_img_box .signature_box {padding: 30px 0 0 60px;height: 110px;width:100%;} .center_txt_area2 .center_img_box .signature_box:before {height: 43px; margin-top:-21.5px;} .center_txt_area2 .center_txt_box .center_strong>p {font-size: 30px;} /*단계도 type2 반응형*/ .sub010201_col>li {width: 100%;border: 1px solid #ddd;border-bottom: none;min-height: 260px} .sub010201_col>li:last-child {border-bottom: 1px solid #ddd;} .sub010201_col>li:not(:last-child):after {display: none;} /*단계도 type3 반응형*/ .sub0201 .colbox3 .step_col2, .sub0201 .colbox3 .step_col2 .step_l2, .sub0201 .colbox3 .step_col2 .step_r2{display:block; width:100%;} .sub0201 .colbox3 .step_col2 .step_l2 {width: 100%;} .sub0201 .colbox3 .step_col2 .step_l2 h4 {line-height:50px;} .sub0201 .colbox3 .step_col2 .step_r2 {padding: 15px 15px; width: 100%;} } @media only screen and (max-width:551px){ /*인사말 반응형*/ .center_txt_area2 .center_img_box .signature_box{padding: 17px 0 0 54px;height: 90px;} .center_txt_area2 .center_img_box .signature_box:before {height: 40px;margin-top: -20px} /* .step-1st .step_col .step_l {width: 100%;;min-height: 140px;border-right: none;} .step-1st .step_col .step_r {width: 100%;padding:20px 15px 10px 20px;; } .step-1st .step_col .step_l .icon_circle {display: block;float: none;margin: 25px auto;} .step-1st .step_col .step_l .step_txt {float: none;width: 100%;margin: 10px auto; text-align: center;} .step-1st .step_col:not(:last-child) .step_l:after {display: none;}*/ } /* 긴 연혁 윤지한*/ #con_040104 .yearbox{position:relative; width:100%; min-height:630px; padding-left:440px; margin:115px 0 80px 0;} #con_040104 .yearbox .head{position:absolute; left:0; top:0; width:270px; height:100%;} #con_040104 .yearbox .head:after{content:""; display:block; position:absolute; right:-90px; top:-30px; z-index:0; width:213px; height:210px; background:url(../../images/home/sub04/yearbox_simbol.png) no-repeat center center;} #con_040104 .yearbox .head strong{display:block; position:relative; z-index:10; line-height:51px; font-family:"nmj"; font-weight:600; font-size:50px; color:#33373b;} #con_040104 .yearbox .head p{position:relative; z-index:10; margin:20px 0 90px 0;} #con_040104 .yearbox .head p span{display:inline-block; position:relative; line-height:34px; font-family:"Noto Sans KR"; font-weight:400; font-size:24px; color:#33373b;} #con_040104 .yearbox .head p span:last-child{color:#127ac7;} #con_040104 .yearbox .head p span:after{content:""; display:block; position:absolute; left:0; bottom:2px; width:100%; height:1px; background-color:#33373b;} #con_040104 .yearbox .head p span:last-child:after{display:none;} #con_040104 .yearbox .head .boxs img{display:block; width:100%;} #con_040104 .yearbox .head .boxs img:not(:nth-child(1)){margin-top:15px;} #con_040104 .yearbox .midd{} #con_040104 .yearbox .midd>ol{position:relative;} #con_040104 .yearbox .midd>ol:before{content:""; display:block; position:absolute; left:12px; top:0; width:1px; height:100%; background-color:#ddd;} #con_040104 .yearbox .midd>ol>li{position:relative;} #con_040104 .yearbox .midd>ol>li:not(:nth-child(1)){padding-top:20px;} #con_040104 .yearbox .midd>ol>li>strong{display:block; position:relative; line-height:24px; padding:5px 0 5px 50px; font-family:"Noto Sans KR"; font-size:18px; color:#1c92eb; background-color:#fff;} #con_040104 .yearbox .midd>ol>li>strong:before, #con_040104 .yearbox .midd>ol>li>strong:after{ content:""; display:block; position:absolute; left:0; top:5px; width:24px; height:24px; background-color:#1c92eb; border-radius:50%; -webkit-border-radius:50%; } #con_040104 .yearbox .midd>ol>li>strong:before{opacity:0.1;} #con_040104 .yearbox .midd>ol>li>strong:after{ transform:scale(0.3); } #con_040104 .yearbox .midd>ol>li>ol{padding-bottom:20px; margin:10px 0 0 50px;} #con_040104 .yearbox .midd>ol>li:not(:last-child)>ol{border-bottom:1px dashed #ddd;} #con_040104 .yearbox .midd>ol>li>ol>li{position:relative; padding-left:105px; margin:5px 0;} #con_040104 .yearbox .midd>ol>li>ol>li>strong{display:block; line-height:26px; position:absolute; left:0; top:0; font-family:"Noto Sans KR"; font-size:16px; color:#596068;} #con_040104 .yearbox .midd>ol>li>ol>li>p{line-height:26px; margin:0; font-family:"Noto Sans KR"; font-weight:300; font-size:16px; color:#596068;} @media all and (max-width: 900px){ #con_040104 .yearbox{padding-left:320px;} } @media all and (max-width: 700px){ #con_040104 .yearbox{padding-left:0; margin:40px 0;} #con_040104 .yearbox .head{position:relative; width:auto;} #con_040104 .yearbox .head p{width:260px; margin-bottom:30px;} #con_040104 .yearbox .head .boxs img{display:inline-block; width:auto; height:161px; vertical-align:top;} #con_040104 .yearbox .head .boxs img:not(:nth-child(1)){margin-top:0;} #con_040104 .yearbox .midd{margin-top:40px;} } @media all and (max-width: 600px){ #con_040104 .yearbox .head .boxs:after{content:""; display:block; clear:both;} #con_040104 .yearbox .head .boxs img{display:block; float:left; width:49%; height:auto;} #con_040104 .yearbox .head .boxs img:nth-child(2){float:right;} } @media all and (max-width: 500px){ #con_040104 .yearbox .head strong{line-height:41px; font-size:40px;} #con_040104 .yearbox .head p{margin:15px 0 20px 0;} #con_040104 .yearbox .head p span{line-height:29px; font-size:20px;} #con_040104 .yearbox .midd{margin-top:20px;} #con_040104 .yearbox .midd>ol>li>strong{padding-left:40px; font-size:16px;} #con_040104 .yearbox .midd>ol>li>ol{margin-left:40px;} #con_040104 .yearbox .midd>ol>li>ol>li>strong, #con_040104 .yearbox .midd>ol>li>ol>li>p{font-size:14px;} } /* 짧은 연혁 윤지한*/ #con_01060302 .ui-topbox.cn_type05 .ir-icon{background-image:url(/images/home/sub01/010603_title_img_1.png);} .yearbox_small{} .yearbox_small ol{overflow:hidden; position:relative; padding:0;} .yearbox_small ol:before{content:""; display:block; position:absolute; left:12px; top:0; width:1px; height:100%; background-color:#ddd;} .yearbox_small ol li{position:relative; width:100%; padding-left:140px; text-align:left;} .yearbox_small ol li:before{ content:""; display:block; position:absolute; left:0; top:0; z-index:40; width:8px; height:8px; border:8px solid #e8f4fd; background-color:#1c92eb; border-radius:50%; -webkit-border-radius:50%; box-shadow:0 0 5px 5px #fff; } .yearbox_small ol li:not(:nth-child(1)){margin-top:60px;} .yearbox_small ol li:last-child:after{content:""; display:block; position:absolute; left:-1px; top:0px; z-index:20; width:2px; height:100px; background-color:#fff;} .yearbox_small ol li strong, .yearbox_small ol li strong span{line-height:24px; font-family:"Noto Sans KR"; font-size:18px;} .yearbox_small ol li strong{display:block; position:absolute; left:0; top:0; width:140px; padding-left:37px; text-align:left; color:#1c92eb;} .yearbox_small ol li strong span{display:block;} .yearbox_small ol li p, .yearbox_small ol li p span{line-height:24px; font-family:"Noto Sans KR"; font-weight:400; font-size:15px;} .yearbox_small ol li p{margin:0; color:#596068;} .yearbox_small ol li p span{display:block;} [id*="con_0"] .hidden_text{text-align:center;} [id*="con_0"] .hidden_text .lay{display:inline-block; position:relative;} [id*="con_0"] .hidden_text .lay img{position:relative; z-index:10;} [id*="con_0"] .hidden_text .text_area{overflow:hidden; position:absolute; left:0; top:0; z-index:0; width:100%; height:100%;} @media all and (min-width: 701px) { .yearbox_small ol:before{left:50%;} .yearbox_small ol li{width:50%; margin-left:50%;} .yearbox_small ol li:before{left:-12px;} .yearbox_small ol li:nth-child(2n+2){margin-left:0; padding-left:0; margin-right:50%; padding-right:140px; text-align:right;} .yearbox_small ol li:nth-child(2n+2) strong{left:auto; right:0; padding-left:0; padding-right:37px; text-align:right;} .yearbox_small ol li:nth-child(2n+2):before{left:auto; right:-12px;} .yearbox_small ol li:nth-child(2n+2):last-child:after{left:auto; right:-1px;} } @media all and (max-width: 400px) { .yearbox_small ol li{padding-left:40px;} .yearbox_small ol li:not(:nth-child(1)){margin-top:40px;} .yearbox_small ol li strong{position:relative; width:100%; padding-left:0;} .yearbox_small ol li strong span{display:inline;} } /* 외래진료안내 버튼 */ a.more_btn{ display:inline-block; left: 50%; bottom: 0; width:110px; height:27px; line-height:25px; margin-left: -55px; text-align:center; font-weight:400; font-size:14px; color:#6f767d; border:1px solid #ddd; background-color:#fff; border-radius:0 5px 0 5px; -webkit-border-radius:0 5px 0 5px; transition:all 0.3s linear; -webkit-transition:all 0.3s linear;}