/*-------------------------------------------------------------- # 공통상단 영역 css --------------------------------------------------------------*/ .customer_bg{ background-image: url(../img/customer_top_bg.png); background-position: center; background-repeat: no-repeat; background-size: cover; } .Utility_bg{ background-image: url(../img/hospital_bg.png); background-position: center; background-repeat: no-repeat; background-size: cover; } .customer_voice_bg{ background-image: url(../img/customer_voice_top_bg.png); background-position: center; background-repeat: no-repeat; background-size: cover; } #sub_wrap{} .integrated_medical{overflow: hidden;} #sub_wrap .sub_page_h1{position: relative;width: 100%;height: 780px;overflow: hidden;box-sizing: border-box;text-align: center;margin: 0 auto; animation: h1Title 2s forwards; -webkit-animation: h1Title 2s forwards; } #sub_wrap .sub_page_h1 h1{ position: relative;top: 240px;font-size: 54px;font-weight: 500;letter-spacing: 12px;font-family: 'Noto Sans KR', sans-serif;color: #fff;} #sub_wrap .sub_page_h1 span{display: block;font-size: 18px;font-family: 'Noto Sans KR', sans-serif;margin-top: 8px;color: #fff;} #sub_wrap .sub_area_box{margin: 0 auto;width: 1180px;height: 600px;background-color: pink;padding-bottom: 300px;} .none_letter_spacing{letter-spacing: 0px !important;} /* PAGE NAV */ .article_nav {width:100%;margin:0 auto;height: 47px;position: absolute;left: 50%; transform:translateX(-50%);top: 31%;margin-top: 31.5px;z-index: 1;} .article_nav_btn {cursor:pointer; display: block;height: 100%;position: absolute;top: 0;color: #fff;} .article_nav_btn:after {content: '';display: table;clear: both;} .article_nav_pic {width: 47px;height: 100%;position: relative;font-size: 0;border: 2px solid #ffffff;border: 2px solid rgba(255, 255, 255, .3);-moz-box-sizing: border-box;box-sizing: border-box;-webkit-transition: border-color .5s, -webkit-transform .5s;transition: border-color .5s, -webkit-transform .5s;transition: border-color .5s, transform .5s;transition: border-color .5s, transform .5s, -webkit-transform .5s;} .article_nav_pic:after {display: block;width: 100%;height: 100%;position: absolute;content: '';background: no-repeat center center;-moz-box-sizing: border-box;box-sizing: border-box;} .article_nav_pic:before {content: '';display: block;width: 46px;height: 1px;position: absolute;top: 50%;margin-top: -0.5px;background: #fff;-webkit-transition: all .5s cubic-bezier(.165, .84, .44, 1);transition: all .5s cubic-bezier(.165, .84, .44, 1);-moz-box-sizing: border-box;box-sizing: border-box;} .article_nav_btn:hover .article_nav_pic { -webkit-transform: scale(0.9) rotate(0.05deg); -ms-transform: scale(0.9) rotate(0.05deg); transform: scale(0.9) rotate(0.05deg);} .article_nav_btn .article_nav_pic {-webkit-transform: rotate(0.05deg);-ms-transform: rotate(0.05deg);transform: rotate(0.05deg);} .article_nav_title {width: 140px;height: 100%;opacity: 0;-webkit-transition: all .2s cubic-bezier(.165, .84, .44, 1);transition: all .2s cubic-bezier(.165, .84, .44, 1);} .article_nav_table {display: table;width: 100%;height: 100%;} .article_nav_cell {display: table-cell;vertical-align: middle;} .article_nav_title p {font-family: 'Noto Sans KR', sans-serif;font-size: 16px;font-weight: 400;line-height: 1.25;color: #fff;} .article_nav_title p span {display: inline-block;padding: 0 2px;} .article_nav_pre {left: 80px;} .article_nav_pre .article_nav_pic, .article_nav_pre .article_nav_title {float: left;} .article_nav_pre .article_nav_pic:after {background-image: url(../img/icon-arrow-left.svg);} .article_nav_pre .article_nav_pic:before {left: 20px;} .article_nav_pre .article_nav_title {margin-left: 15px;text-align: left;-webkit-transform: translateX(8px);-ms-transform: translateX(8px);transform: translateX(8px);} .article_nav_next {right: 80px;} .article_nav_next .article_nav_pic, .article_nav_next .article_nav_title {float: right;} .article_nav_next .article_nav_pic:after {background-image: url(../img/icon-arrow-right.svg);} .article_nav_next .article_nav_pic:before {right: 20px;} .article_nav_next .article_nav_title {margin-right: 15px;text-align: right;-webkit-transform: translateX(-8px);-ms-transform: translateX(-8px);transform: translateX(-8px);} .article_nav_btn:hover .article_nav_pic {border-color: #fff;} .article_nav_btn:hover .article_nav_pic:before {width: 0px;-webkit-transition: all .2s cubic-bezier(.645, .045, .355, 1);transition: all .2s cubic-bezier(.645, .045, .355, 1);} .article_nav_btn:hover .article_nav_title {-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);opacity: 1;-webkit-transition-delay: 200ms;transition-delay: 200ms;} /*-------------------------------------------------------------- # 회원가입 css --------------------------------------------------------------*/ #sub_wrap .member_sub_area_box{margin: 0 auto;width: 1220px;padding-bottom: 150px;padding-left: 10px;padding-right: 10px; /* background-color: pink; */ } #sub_wrap .member_sub_area_box form{width: 1200px;} .memberinput_box{position: relative; width: 100%; max-width: 1200px; margin: 0 auto;} .m_input_title{display: inline-block;font-size: 17px;font-weight: 500;margin-bottom: 6px;font-family: 'Noto Sans KR', sans-serif;} .memberinput { width: 100%; box-sizing: border-box;position: relative;display: inline-block;} .memberinput span{display: inline-block;margin-left: 20px;} .memberTextarea{width: 100%;position: relative;display: inline-block;} .m_input{box-sizing: border-box; width: 100%;border-collapse: collapse;} .m_input input{box-sizing: border-box;border-collapse: collapse;height: 58px;width: 100%;font-size:18px;font-weight: 600;border:1px solid #f6f6f6;padding-left: 20px;background-color: #f6f6f6;} .m_input input::placeholder{font-size: 16px;color:#a8a8a8;font-weight: 500;} .alerttxt {font-size: 0.9rem;color: crimson !important;} .check_box_wrap{position:relative;margin-top: 50px;} .check_line{display: flex;width: 100%;margin-bottom: 40px;} .check_box_area{position:relative;display: inline-block;width: 50%;} .check_text_box{background-color: #f6f6f6;border:1px solid #f6f6f6;padding: 20px;} .check_text{height: 140px;overflow:auto;} .check_text::-webkit-scrollbar{width: 4px;} .check_text::-webkit-scrollbar-track{background-color: #fff;border-radius: 0px;} .check_text::-webkit-scrollbar-thumb{background-color: #dbdbdb;border-radius: 0px;} .ctext{font-size:14px;color: #878787;line-height: 22px;margin-bottom: 20px;} .checkbox-container {position: relative;top: 10px;} .checkbox-container input[type="checkbox"] {/* 실제 체크박스는 화면에서 숨김 */position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip:rect(0,0,0,0); border: 0} .checkbox-container input[type="checkbox"] + label {display: inline-block;position: relative;cursor: pointer; -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;font-size:17px;font-weight: 500;font-family: 'Noto Sans KR', sans-serif;} /* .checkbox-container input[type="checkbox"] + label span{ */ /* border-bottom:1px solid black; */ /* } */ /* .label_color{ */ /* color: #a8a8a8; */ /* border: none; */ /* } */ .checkbox-container input[type="checkbox"] + label:before {/* 가짜 체크박스 */content: ' ';display: inline-block;width: 14px; /* 체크박스의 너비를 지정 */height: 14px; /* 체크박스의 높이를 지정 */line-height: 21px; /* 세로정렬을 위해 높이값과 일치 */margin: -2px 8px 0 0;text-align: center;vertical-align: middle;background: #ffffff;border: 3px solid #e6e3df;} .checkbox-container input[type="checkbox"]:checked + label:before {/* 체크박스를 체크했을때 */content: '\2714'; /* 체크표시 유니코드 사용 */color: #9e8742;font-weight: 700;border-color: #e6e3df;} .bottom_line_img{position: relative;top:-15px;height:16px;background:url(../img/member_bottom_line.png) 0 0 no-repeat;} .btnarea{text-align:center;margin-top: 50px;} .member_btn{position: relative;display: inline-block;width: 270px;height: 60px;line-height: 58px;font-size: 17px;background-color: #fff;border: 1px solid black;cursor: pointer;font-family: 'Noto Sans KR', sans-serif;text-transform: uppercase;z-index:20;overflow: hidden;transition: all 0.3s;} .member_btn:hover{background-color: #3b6bb8;border: 1px solid #3b6bb8;color: #fff;} .member_btn .pline {z-index:80;position:absolute; top:0px;left:0;width:100%;height:100%;} /* .member_btn .pline .p_top1:before {content:""; position:absolute; top:20%; left:35%; width:0; height:1px; background-color:#fff; transition:all 0.3s;} */ .member_btn .pline .p_bottomr:before {content:""; position:absolute; top:80%; left:35%; width:0; height:1px; background-color:#fff; margin-top:-2px; transition:all 0.3s;} /* .member_btn:hover .p_top1:before {width:30%;} */ .member_btn:hover .p_bottomr:before {width:30%;} .home_btn{display: inline-block;width: 270px;height: 60px;line-height: 58px;font-size: 17px;background-color: #fff;border: 1px solid black;cursor: pointer;font-family: 'Noto Sans KR', sans-serif;} .marRight40{margin-right:40px;} .c_add_position{top: -8px !important;} .add_positon{position:relative; top:30px;} .marR20{margin-right: 20px;} /*-------------------------------------------------------------- # 온라인예약 css --------------------------------------------------------------*/ .m_select{box-sizing: border-box;width: 580px;border-collapse: collapse;} .m_select select{box-sizing: border-box;height: 60px;width: 100%;border:1px solid #f6f6f6;background-color: #f6f6f6;font-size: 16px;font-weight: 600;padding-left: 20px;} .m_input select::placeholder{font-size: 16px;font-weight: 600;color:#a8a8a8;font-weight: 500;} .m_textarea{box-sizing: border-box;width: 1200px;} .m_textarea textarea {box-sizing: border-box;width: 100%;height: 140px;padding: 20px;font-size: 18px;font-weight: 600;background-color: #f6f6f6;} .textarea_middle{width: 630px !important;} .m_textarea textarea::placeholder {font-size: 16px;font-weight: 500 !important;color:#a8a8a8;} /*-------------------------------------------------------------- # 문의목록 css --------------------------------------------------------------*/ .sub_content_box{padding-bottom: 100px;} .sub_page_title{text-align: center;font-size: 46px;font-weight: 500;letter-spacing: 10px;} .inquiry_category_box{position: relative;padding-top: 30px;} .inquiry_select_search{display: flex;} .inquiry_select{width: 140px;border-collapse: collapse;} .inquiry_select select { height: 58px;width: 100%;border: 1px solid #f6f6f6;background-color: #f6f6f6;padding-left: 16px;} .inquiry_search{display: flex;position: relative;width: 250px;height: 58px;background-color: #f6f6f6;margin-left: 10px;} .search_btn{box-sizing: border-box;text-align: center;position: absolute;right: 0px;top: 0px;width: 58px;height: 58px;cursor: pointer;padding-top: 16px;} .search_input{box-sizing: border-box;height: 58px;width: 250px;} .search_input input{box-sizing: border-box;height: 56px;width: 250px;font-size: 16px;border: 1px solid #f6f6f6;background-color: #f6f6f6; padding-left: 10px;} .search_input input::placeholder{font-size: 16px;color:#a8a8a8;font-weight: 500;} .search_bar {width: 180px;height: 48px;border: 1px solid #f6f6f6;outline: 0;} .search_bar:focus {border: 1px solid black;background-color: #fff;} .inquiry_btn{position: absolute;right: 0px;top: 30px;text-align: center;float: right;display: inline-block; width: 130px;height: 60px;line-height: 58px;font-size: 17px; background-color: #fff;border: 1px solid black;cursor: pointer;font-family: 'Noto Sans KR', sans-serif;} .inquiry_table_box{position: relative;padding-top: 40px;} .in_top_table_line{display: flex;width: 100%;max-width:1300px;height: 70px;background-color: #fff;border-bottom: 1px solid black;} .in_table_line{display: flex;width: 100%;max-width:1300px;height: 70px;background-color: #fff;border-bottom: 1px solid #ededed;transiton: all 0.3s;} .in_table_line:hover{transiton: all 0.3s;background-color: #fafafa;} .in_table_item{text-align: center;font-size: 18px;height: 70px;line-height: 69px;font-family: 'Noto Sans KR', sans-serif;} .in_table_item img{position: relative;top:24px;margin-right: 6px;} .in_table_item .reserve{text-align: center;font-size: 17px;height: 70px;color: #000000;line-height: 69px;font-family: 'Noto Sans KR', sans-serif;} .in_table_item .writer{text-align: center;font-size: 17px;height: 70px;color: #888888;line-height: 69px;font-family: 'Noto Sans KR', sans-serif;} .in_table_item .answer_btn{position: relative;top:2px;display: inline-block;color: #fff;font-size: 16px;width: 90px;height: 40px;line-height: 40px;background-color: #a8a8a8;font-family: 'Noto Sans KR', sans-serif;} .in_table_item .day{text-align: center;font-size: 17px;color: #bababa;height: 70px;line-height: 69px;font-family: 'Noto Sans KR', sans-serif;} .table_paging_box{text-align: center;margin-top:40px;} .paging_content{box-sizing: border-box;display: inline-block;} .paging_flex{box-sizing: border-box;display: flex;} .page_number_BOX{} .page_number{text-align:center;display: inline-block;font-size: 16.5px;color: #ababab;width: 36px; padding-left: 12px;padding-right: 12px;cursor: pointer;} .page_number:hover{font-weight: bold;color: #000;} .paging_Img{box-sizing: border-box;text-align: center;position: relative;top: -8px;height: 40px;cursor: pointer;margin-left: 8px;margin-right: 8px;transition: all 0.3s;} .paging_Img:hover{background-color: #f5f5f5;transition: all 0.3s;} .paging_Img img{position: relative;top: 10px;} .p_Img_rotate{transform: rotate( 180deg );} .add_bg_ed{background-color: #fafafa;} .top_content{font-weight: 600;} .top_content_500{font-weight: 500;} .answer_btn_add_color{background-color: #3b6bb8 !important;} .wid280{width: 280px;} .wid400{width: 400px;} .wid350{width: 350px;} .wid300{width: 280px;} /*-------------------------------------------------------------- # 아이디 비밀번호 찾기 css --------------------------------------------------------------*/ .id_password_wrap{display: flex;} .id_password_box{box-sizing:border-box;width: 580px;} .id_password_box .formarea{display: inline-block;width: 580px;box-sizing:border-box;} .sub_page_h2{margin-bottom: 40px;} .sub_page_h2 h2{text-align: center;font-size: 35px;font-weight: 400;letter-spacing: 1px;margin-bottom: 8px;font-family: 'Noto Sans KR', sans-serif;} .sub_page_h2 p{display: block;text-align: center;font-weight: 500;color: #757575;font-size: 16px;} .sub_page_h3{margin-bottom: 20px;} /* .sub_page_h3 h3{text-align: center;font-size: 40px !important;font-weight: 500 !important;letter-spacing: 1px;margin-bottom: 10px;font-family: 'Noto Sans KR', sans-serif;} */ .sub_page_h3 p{display: block;text-align: center;font-weight: 500;color: #757575;font-size: 16px;} .find_areaBox{position: relative; \box-sizing: border-box; text-align: left; ;border: 1px solid #dbdbdb ;padding: 23px 23px 23px 23px; margin: 0 auto; width: 100%;max-width: 1200px} .id_bottom_line_img{position: relative;width:580px;height: 16px;background: url(../img/member_bottom_line.png) 0 0 no-repeat;margin-top: 30px;margin-bottom: 40px;} .two_memberinput{display: flex;} .name_input{box-sizing: border-box;border-collapse: collapse;width: 100%;} .name_input input{box-sizing: border-box;border-collapse: collapse;height: 58px;width: 100%;font-size: 18px;font-weight: 600;border:1px solid #f6f6f6;padding-left: 20px;background-color: #f6f6f6;} .name_input input::placeholder{font-size: 16px;color:#a8a8a8;font-weight: 500;} .name_bar:focus {border: 1px solid black;background-color: #fff;} .name_bar {width: 310px;height: 58px;border: 1px solid #f6f6f6;outline: 0;} .msgarea {font-family: 'Noto Sans KR', sans-serif;line-height: 1.9em; font-weight: 400;font-size: 20px;color: #333333 !important;position: relative;text-align: left;} .msgarea span{margin-left: 4px;margin-right:4px;display: font-weight:600 !important;inline-block;font-family: 'Noto Sans KR', sans-serif;font-weight: 500;font-size: 1.1em;color: #cfb961!important;} .wid50per{width:50%;} .marB70{margin-bottom:70px;} .marB26{margin-bottom: 26px;} .marR10{margin-right: 10px;} /*-------------------------------------------------------------- # 오시는 길 css --------------------------------------------------------------*/ .map_wrap {margin: 0 auto;width: 1200px;} .map_wrap .map_area_box{width: 1200px;height: 370px;margin-top: 50px; background:url(../img/map_view.png) 0 0 no-repeat; background-size:100%; } .map_wrap .soram_area_info_box{padding-top: 40px;padding-bottom: 40px;border-bottom: 1px solid #ededed;} .soram_area_info_box .area_info_line{display: flex;} .area_title{top: -4px;position: relative;display: inline-block;width: 274px;font-size: 28px;font-weight: 500;letter-spacing: -1px;font-family: 'Noto Sans KR', sans-serif;} .area_sWrap{display: inline-block;} .area_suBtext_box{width: 330px;display: inline-block;} .area_suBtext_box .area_suBtext_title{font-size: 18px;font-weight: bold;color: #877a2d;font-family: 'Noto Sans KR', sans-serif;} .area_suBtext_box .area_suBtext_suBtitle{display: block;position: relative;font-size: 17px;font-weight: 300;margin-top: 6px;letter-spacing: -0.6px;margin-bottom: 10px;font-family: 'Noto Sans KR', sans-serif;} .area_suBtext_box .area_suBnumber{position: relative;top: -6px;color: #3b6bb8;font-size: 28px;font-weight: 500;font-family: 'Noto Sans KR', sans-serif;} .bullet{left: 0px;position: absolute;top: 10px;text-align: center;display: inline-block;width: 8px;height: 8px;border-radius:50%;} .add_bulletC01{background-color: #a37c52;} .add_bulletC02{background-color: #00a650;} .add_bulletC03{background-color: #0074bd;} .add_bulletC04{background-color: #ffb700;} .parking_wrap{width: 100%;background-color: #f5f5f5;padding-top: 74px;padding-bottom: 100px;} .parking_table_box{background-color: #fff;margin-top: 40px;} .park_toPitem {display: inline-block;width: 650px;text-align: center;font-family: 'Noto Sans KR', sans-serif;font-size: 18px;font-weight: 600;height: 70px;color: #000;font-weight: bold;line-height: 69px;} .park_subitem {display: inline-block;width: 650px;text-align: center;font-size: 17px;font-family: 'Noto Sans KR', sans-serif;height: 70px;color: #000;line-height: 69px;} .park_bottom_info{text-align: center;margin-top: 50px;} .park_bottom_info_text{font-size: 14px;color: #999999;font-weight: 500;line-height: 26px;} .padL14{padding-left:14px;} .useless_box{margin-top:40px;} .useless_box_02{display: flex;margin-bottom: -8px;} .marT80{margin-top: 80px;} .marT40{margin-top:40px;} .marR40{margin-right:40px;} /*-------------------------------------------------------------- # 소람소식 css --------------------------------------------------------------*/ .sub_common_select_line{position: relative;top: 80px;display: flex;width: 100%;max-width: 1200px;border-bottom: 1px solid #ededed;margin: 0 auto;} .sub_common_select_line .sc_select_item{position: relative;top: 1px;text-align: center;width: 25%;max-width: 100%;height: 60px;line-height: 60px;font-size: 19px;font-family: 'Noto Sans KR', sans-serif;color: #999999;cursor: pointer;transition: all 0.3s;} .sub_common_select_line .sc_select_item:hover{transition: all 0.3s;font-weight: 500;color: #424242; /* border-bottom: 3px solid #424242; */ } .on_sc_select{font-weight: 500;color: #424242!important;border-bottom: 3px solid #424242;} .sub_select_search {display: flex;} #show_sub_List_01{display: block;} #show_sub_List_02,#show_sub_List_03,#show_sub_List_04,#show_sub_List_05{display: none;} .news_table_item {text-align: center;font-size: 18px;font-weight: 600;height: 70px;line-height: 69px;font-family: 'Noto Sans KR', sans-serif;} .news_table_day{text-align: left;width: 310px;font-size: 17px;color: #999999;height: 70px;line-height: 69px;font-family: 'Noto Sans KR', sans-serif;letter-spacing: 1px;padding-left: 30px;} .news_table_title{text-align: left;width: 100%;font-size: 17px;color: #000000;height: 70px;line-height: 69px;font-family: 'Noto Sans KR', sans-serif;letter-spacing: 1px;padding-left: 80px;} #show_sub_bottomList_01{display: block;margin-top:50px;} #show_sub_bottomList_02,#show_sub_bottomList_03,#show_sub_bottomList_04,#show_sub_bottomList_05{display: none;margin-top:50px;} .gallery_wrap{position: relative;width: auto;height: auto;padding-bottom: 40px;} .gallery_wrap .gallery_box{cursor:pointer;box-sizing: border-box;position: relative;display: block;width: 1200px;max-width: 100%;left: 16px;} .gallery_box .gallery_item{box-sizing: border-box;list-style-type: none;display: inline-block;width: 367px;max-width: 100%;overflow: hidden;margin-right: 30px;margin-bottom: 30px;padding: 0;clear: left;} .gallery_item .gallery_img_box{width: 100%;height: 250px;border: 1px solid black;} .gallery_item .gallery_text_box{width: 100%;max-width: 100%;padding-top: 20px;} .gallery_text_box .gallery_title{font-size: 17px;font-weight: 400;font-family: 'Noto Sans KR', sans-serif;text-overflow: ellipsis;white-space: nowrap;word-wrap: normal;overflow: hidden;} .gallery_text_box .gallery_subDay{font-size: 14px;color: #999999;font-family: 'Noto Sans KR', sans-serif;letter-spacing: 0.4px;margin-top: 10px;} .none_marRB{margin-right: 0px !important;margin-bottom: 0px !important;} .g_void{width: 60px;} .marT50{margin-top: 30px;} .wid190{width:190px;} .wid20per{width:20% !important;} .wid100per{width:100%;} /*-------------------------------------------------------------- # 증명발금 비급여진로 css --------------------------------------------------------------*/ .use_step_wrap{text-align: center;margin-top: 70px;padding-bottom: 110px;} .use_step_wrap .use_step_box{display: inline-block;text-align: center;position: relative; width: 384px;height: 300px;border:1px solid #eeeeee;margin-right: 20px;padding-top: 60px;} .use_step_wrap .use_step_blue_sub_text{font-size: 15px;color: #3b6bb8;font-weight: bold;letter-spacing: -0.4px;margin-top: 20px;line-height: 28px;} .use_step_box .use_step_number{position: absolute;left: 14px;top: 4px;font-size: 30px;font-weight: 500;color: #cfb961;font-family: 'Titillium Web', sans-serif;} .use_step_box .u_step_icon_box{display: inline-block;} .use_step_box .u_step_icon_box p{margin-top:24px;font-size: 19px;font-weight: 500;font-family: 'Noto Sans KR', sans-serif;} .medical_table_wrap{} .left_in_table_line{display: flex;max-width: 1300px;background-color: #fff;border-bottom: 1px solid #ededed;transition: all 0.3s;} .left_in_table_item{text-align: left;font-size: 18px;height: 70px;line-height: 69px;font-family: 'Noto Sans KR', sans-serif;} .leftSub_table_item{text-align: left;font-size: 17px;color: #888888;padding-top: 24px;padding-bottom: 34px;font-family: 'Noto Sans KR', sans-serif;} .leftSub_table_item p{line-height: 30px;font-size: 17px;color: #888888;font-family: 'Noto Sans KR', sans-serif;} .leftSub_table_item .l_sub_text{font-size: 17px;color: #888888;font-family: 'Noto Sans KR', sans-serif;margin-bottom: 17px;} .leftSub_table_item .l_sub_text span{display: block;font-size: 15px;color: #3b6bb8;font-weight:bold;letter-spacing: -0.4px;padding-left:10px;padding-top: 2px;} .leftSub_table_item .l_sub_text p{font-size: 15px;color: #888888;font-family: 'Noto Sans KR', sans-serif;padding-left: 10px;} .flie_btn_box{text-align:left;padding-top: 14px;} .flie_btn_box .flie_btn{text-align: center;POSITION: relative;display: inline-block;width: 220px;height: 40px;line-height: 40px;font-size: 15px;/* font-family: 'Noto Sans KR', sans-serif; */background-color: #3b6bb8;color: #fff;font-weight: 200;cursor: pointer;transition: all 0.3s;} .flie_btn_box .flie_btn img{position: relative;top: 7px;margin-left: 6px;transition: all 0.3s;} .flie_btn_box .flie_btn:hover img{top: 10px;} .tel_number{letter-spacing: 1.6px;cursor: pointer;transition: all 0.3s;} .tel_number a{transition: all 0.3s;font-size: 17px;color: #424242;font-family: 'Noto Sans KR', sans-serif;} .tel_number a:hover{color: #3b6bb8;font-weight: bold;transition: all 0.3s;} .info_select_wrap{position: relative;} .info_select_box{width: 1200px;display: flex;box-sizing: border-box;} .info_s_item{width: 25%;height: 70px;line-height: 69px;font-size: 18px;color: #a8a8a8;font-family: 'Noto Sans KR', sans-serif;border-bottom: 1px solid #dddddd;transition: all 0.3s;cursor: pointer;} .info_s_item:hover{color: #333333;font-weight: 500;} .on_info_s_item{font-weight: 500;color: #333333;border-bottom: 3px solid #333333;background-color: #fff;transition: all 0.3s;} .sub_headerImg{z-index:999;background-color: #fff;position: absolute;left: -10px;top: 0px;width: 100%;height: 100px;background:url(../img/sub_header_img.png) 0 0 no-repeat; background-size:100%;} .madical_expense_table_wrap{margin-top: 40px;} .show_medical_t_box{overflow: hidden;margin-top: 10px;border-bottom: 1px solid black;} #madical_table_01{overflow: auto;width: 100%;height: auto;padding-right: 10px;padding-bottom: 20px;} #madical_table_02,#madical_table_03,#madical_table_04,#madical_table_05{display: none;} #madical_table_02,#madical_table_03,#madical_table_04,#madical_table_05{overflow: auto;width: 100%;height: 630px;padding-right: 10px;padding-bottom: 20px;animation: h1Title 2s forwards;-webkit-animation: h1Title 2s forwards;} #madical_table_01::-webkit-scrollbar{width: 4px;} #madical_table_01::-webkit-scrollbar-track{background-color: #fff;border-radius: 0px;} #madical_table_01::-webkit-scrollbar-thumb{background-color: #a8a8a8;border-radius: 0px;} #madical_table_02::-webkit-scrollbar{width: 4px;} #madical_table_02::-webkit-scrollbar-track{background-color: #fff;border-radius: 0px;} #madical_table_02::-webkit-scrollbar-thumb{background-color: #a8a8a8;border-radius: 0px;} #madical_table_03::-webkit-scrollbar{width: 4px;} #madical_table_03::-webkit-scrollbar-track{background-color: #fff;border-radius: 0px;} #madical_table_03::-webkit-scrollbar-thumb{background-color: #a8a8a8;border-radius: 0px;} #madical_table_04::-webkit-scrollbar{width: 4px;} #madical_table_04::-webkit-scrollbar-track{background-color: #fff;border-radius: 0px;} #madical_table_04::-webkit-scrollbar-thumb{background-color: #a8a8a8;border-radius: 0px;} #madical_table_05::-webkit-scrollbar{width: 4px;} #madical_table_05::-webkit-scrollbar-track{background-color: #fff;border-radius: 0px;} #madical_table_05::-webkit-scrollbar-thumb{background-color: #a8a8a8;border-radius: 0px;} .medical_in_table_line {display: flex;width: 100%;max-width: 1200px;background-color: #fff;border-bottom: 1px solid #ededed;transition: all 0.3s;} .medical_in_table_line p{font-family: 'Noto Sans KR', sans-serif;text-align: center;font-size: 16px;color: #878787;padding-top:18px;padding-bottom:18px;} .medical_table_item {font-family: 'Noto Sans KR', sans-serif;text-align: center;font-size: 17px;color: #878787;height: 70px;line-height: 69px;} .medical_table_item a{text-align: center;font-size: 17px;color: #3b6bb8;font-family: 'Noto Sans KR', sans-serif;height: 70px;line-height: 69px;transition: all 0.3s;} .medical_table_item a:hover{font-weight: bold;transition: all 0.3s;} .none_padB{padding-bottom:0px !important;} .none_padB{padding-bottom: 0px !important;} .none_marR{margin-right:0px !important;} .wid300px{width:300px;} .wid290{width:290px;} .wid280{width:280px;} .wid250{width: 250px;} .wid240{width: 240px;} .wid320{width: 320px;} .wid270{width: 270px;} .wid510{width:510px;} .wid33per{width: 33.33333333%;} .padL70{padding-left:70px;} .marR10{margin-right: 10px;} .marT20{margin-top: 20px;} .medical_pad{padding-top: 30px !important;} .medical_font{font-size: 15px !important;} .positionT-100{position: relative; top: -100px;} .positionT-50{position: relative; top: -50px;} /*-------------------------------------------------------------- # 도서신청 css --------------------------------------------------------------*/ .select_book_area{position: relative;width: 100%;padding-top: 80px;} .select_book_img_box{position: relative;min-width: 1200px;background-color: #3b6bb8;padding-top: 60px;padding-bottom: 60px;margin-top: 60px;} .book_check_container { position:absolute; left:50%; top: 50px; transform: translateX(-50%); box-sizing: border-box; /* padding: 25px; */ text-align: center; z-index:600; } /* Checkmark style starts */ @-moz-keyframes dothabottomcheck {0% {height: 0;} 100% { height: 14px;}} @-webkit-keyframes dothabottomcheck { 0% { height: 0; } 100% { height: 14px; } } @keyframes dothabottomcheck { 0% { height: 0; } 100% { height: 14px; } } @keyframes dothatopcheck { 0% { height: 0; } 50% { height: 0; } 100% { height: 30px; } } @-webkit-keyframes dothatopcheck { 0% { height: 0; } 50% { height: 0; } 100% { height: 30px; } } @-moz-keyframes dothatopcheck { 0% { height: 0; } 50% { height: 0; } 100% { height: 30px; } } input[type=checkbox] { display: none; } .check-box { height: 50px; width: 50px; background-color: transparent; border: 3px solid #dddddd; border-radius: 50%; position: relative; display: inline-block; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-transition: border-color ease 0.2s; -o-transition: border-color ease 0.2s; -webkit-transition: border-color ease 0.2s; transition: border-color ease 0.2s; cursor: pointer; } .check-box::before, .check-box::after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; height: 0; width: 3px; background-color: #cfb961; display: inline-block; -moz-transform-origin: left top; -ms-transform-origin: left top; -o-transform-origin: left top; -webkit-transform-origin: left top; transform-origin: left top; border-radius: 3px; content: ' '; -webkit-transition: opacity ease 0.5; -moz-transition: opacity ease 0.5; transition: opacity ease 0.5; } .check-box::before { top: 23px; lef: 11px; /* box-shadow: 0 0 0 5px #667788; */ -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } .check-box::after { top: 12px; left: 2px; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } input[type=checkbox]:checked + .check-box, .check-box.checked { border-color: #cfb961; } input[type=checkbox]:checked + .check-box::after, .check-box.checked::after { height: 50px; -moz-animation: dothabottomcheck 0.2s ease 0s forwards; -o-animation: dothabottomcheck 0.2s ease 0s forwards; -webkit-animation: dothabottomcheck 0.2s ease 0s forwards; animation: dothabottomcheck 0.2s ease 0s forwards; } input[type=checkbox]:checked + .check-box::before, .check-box.checked::before { height: 120px; -moz-animation: dothatopcheck 0.4s ease 0s forwards; -o-animation: dothatopcheck 0.4s ease 0s forwards; -webkit-animation: dothatopcheck 0.4s ease 0s forwards; animation: dothatopcheck 0.4s ease 0s forwards; } .book_cover_box{ position: relative; float: left; width: 20%; height: 530px; /* border: 1px solid black; */ } .book_cover{ position: relative; text-align: center; width: 100%; height: 100%; } .bImg_wrap{ display: inline-block; position:relative; top: 120px; width: 228px; min-height: 300px; background-color: #fff; } .bImg_wrap img{ opacity:0.3; width: 100%; transition: all 0.3s; box-shadow: 0 0 30px rgba(0,0,0, 0.1); } .on_book{ opacity:1 !important; } .select_book_text_box{ height: 570px; background-color: #ededed; margin-top: 370px; } .show_book_description{ position: relative; top: 70px; text-align: center; transition: all 0.3s; display: none; } #bookShow_01 {display: none;} #bookShow_02 {display: none;} #bookShow_04{display: none;} #bookShow_05{display: none;} .book_title{ font-size: 36px; color: #9c8840; font-family: 'Noto Sans KR', sans-serif; } .book_description{ max-width: 1200px; font-size: 17px; font-family: 'Noto Sans KR', sans-serif; line-height: 32px; letter-spacing: 0.4px; margin: 20px auto; } .another_input_box_wrap{box-sizing: border-box;position: relative;display: inline-block;} .another_m_input{box-sizing: border-box;width: 1200px;border-collapse: collapse;} .another_m_input input { box-sizing: border-box;border-collapse: collapse;height: 58px;width: 100%;font-size: 18px;font-weight: 600;border: 1px solid #f6f6f6;padding-left: 20px;background-color: #f6f6f6;} .another_m_input input::placeholder{font-size: 16px;color:#a8a8a8;font-weight: 500;} .address_location_input_box{box-sizing: border-box;position: relative;display: flex;width:1200px;} .location_input{width: 50%;box-sizing: border-box;position: relative;display: inline-block;} .l_input{box-sizing: border-box;width: 100%;display: inline-block;border-collapse: collapse;} .l_input input{box-sizing: border-box;border-collapse: collapse;width: 100%;height: 58px;font-size:14px;font-weight: 600;border:1px solid #f6f6f6;padding-left: 20px;background-color: #f6f6f6;} .l_input input::placeholder{font-size: 16px;color:#a8a8a8;font-weight: 500;} .m_bar_l_input:focus {border: 1px solid black;background-color: #fff;} .m_bar_l_input {width: 100%;height: 58px;border: 1px solid #f6f6f6;outline: 0;} .book_select {box-sizing: border-box;width: 580px;border-collapse: collapse;cursor: pointer;} .book_select select {box-sizing: border-box;height: 60px; width: 100%;border: 1px solid #f6f6f6; background-color: #f6f6f6;font-size: 17px;font-weight: 600; padding-left: 20px;cursor: pointer;} .book_bottom_info{margin-top: 90px;text-align: center;font-size: 16px;color: #a8a8a8;font-family: 'Noto Sans KR', sans-serif;} .padB100{padding-bottom: 100px;} .wid630{width:630px;} .wid100{width:100px;} .marR10{margin-right: 10px;} .wid40per{width: 40%;} .wid60per{width: 60%;} /*-------------------------------------------------------------- # 의료진 소개 css --------------------------------------------------------------*/ .medical_bg{background-image: url(../img/section_01_type2.jpg);} .Medical_staff_wrap{ text-align: center; position: relative; width: 1200px; margin: auto 0; box-sizing: border-box; overflow: hidden;} .Medical_staff_gallery_wrap{ position: relative; width: 1200px; margin: auto 0; box-sizing: border-box; overflow: hidden;} .sub_page_h3{margin-bottom: 20px;} .sub_page_h3 h3{color: #333333;text-align: center;font-size: 35px;font-weight: 400;letter-spacing: 1px;margin-bottom: 10px;font-family: 'Noto Sans KR', sans-serif;} .sub_page_h3 .subT_line2{height:40px;width:1px;background-color: black;margin:10px auto 0px;} .staff_gallery_box{position:relative;left:-30px;box-sizing:border-box;height: 100%;display: block;width: 100%;max-width: 100%;} .main_md_staff{height: auto;box-sizing:border-box;position: relative;float:left;margin-bottom:60px;margin-left:80px;} .doctor_img_box{position: relative;width: 320px;height: 450px;border-bottom: 1px solid #fafafa;} .doctor_img_void{width: 130px;} #doctor_img_box_top_bg_box{z-index: 10;position: absolute;top:0px;left:0px;width: 100%;height: 160px;overflow: hidden;background-color: #fff;} .doctor_img_box .doctorTop_bg_box{z-index: 60;transform: rotateZ(175deg);position: absolute;top: -22px;left: -20px;width: 119%;height: 160px;background-color: #f6f6f6;transition: all 0.3s;} .doctor_img_box .doctor_text_box{z-index: 80;text-align: left;position: absolute;top: 34px;left: -30px;font-size: 17px;color: #999999;font-family: 'Noto Sans KR', sans-serif;} .doctor_img_box .doctor_text_box span{position: relative;top: -6px;display: block;font-size: 50px;font-weight: 500;font-family: 'Noto Sans KR', sans-serif;} .doctor_img_box .doctor_more_btn{z-index: 100;background-color: #fff;display: none;text-align:center;position: absolute;bottom: 60px;width: 110px;height: 40px;line-height: 38px;color: #424242;font-family: 'Noto Sans KR', sans-serif;border: 1px solid black;cursor: pointer;} .doctor_img_box .doctor_img{z-index: 30;position: absolute;bottom: 0px;right: -24px;} .doctor_img_box .doctor_img img{width: 90%;} .sub_md_staff{box-sizing:border-box;position: relative;float:left;margin-bottom:50px;margin-left:50px;} .subDoctor_img_box{display: block;position: relative;width: 250px;height: 330px;border-bottom: 1px solid #ededed;} .subDoctor_img_void{width: 100px;} #subDoctor_img_box_top_bg_box{position: absolute;top:0px;left:0px;width: 100%;height: 140px;z-index: 10;overflow: hidden;background-color: #fff;} .subDoctorTop_bg_box{z-index: 60;transform: rotateZ(175deg);position: absolute;top: -22px;left: -20px;width: 119%;height: 140px; background-color: #f6f6f6;transition: all 0.3s;} .subDoctor_text_box{z-index: 80;text-align: left;position: absolute;top: 24px;left: -20px;font-size: 17px;color: #999999;font-family: 'Noto Sans KR', sans-serif;} .subDoctor_text_box span{position: relative;top: 0px;display: block;font-size: 40px;font-weight: 500;font-family: 'Noto Sans KR', sans-serif;} .subDoctor_img_box .doctor_more_btn{z-index: 100;background-color: #fff;display: none;text-align:center;position: absolute;bottom: 60px;width: 110px;height: 40px;line-height: 38px;color: #424242;font-family: 'Noto Sans KR', sans-serif;border: 1px solid black;cursor: pointer;} .subDoctor_img{z-index: 30;text-align: right;position: absolute;bottom: 0px;right: -20px;} .subDoctor_img img{width:210px; max-width: 100%;} .padT100{padding-top: 100px;} .padB90{padding-bottom:90px;} .none_borB{border-bottom: none!important;} .none_bor{border: none!important;} /*-------------------------------------------------------------- # 의료진 상세페이지 css --------------------------------------------------------------*/ .detail_areaBox{position: relative;top: -74px;width: 100%;height: 700px; overflow: hidden;} .detail_areaBox .staff_detailBg01 img{position: absolute;left: 0;bottom: 0;} .detail_areaBox .staff_detailBg02 img{position: absolute;right: -50px;bottom: 0;} .inner_detail{display: flex;min-height:600px;width: 100%;max-width: 1220px;padding-left: 10px;padding-right: 10px;padding-top: 44px;margin: 0 auto;} .inner_detail .staff_img_box{display: inline-block;float: left;width:670px;padding-left: 40px;} .inner_detail .staff_img_box img{position: relative; width: 580px;} .staff_title_box{display: inline-block;position: relative;top: 26px;float: left;width: 530px;} .staff_title_box .staff_title{position: relative;display: inline-block;line-height: 22px;font-size: 22px;font-weight: 400;color: #333333;font-family: 'Noto Sans KR', sans-serif;} .staff_title_box .staff_title span{display: block;font-size: 86px;font-weight: 500;color: #212121;font-family: 'Noto Sans KR', sans-serif; letter-spacing: 15px;} .staff_title_box .staff_title img{bottom: 102px; position: absolute;right:0px;} .staff_title_box .medical_categoryBox{position: absolute;bottom: 130px;left: 0;line-height: 90px;font-size: 32px;font-weight: 400;color: #424242;font-family: 'Noto Sans KR', sans-serif;} .staff_title_box .medical_categoryBox span{display: block;font-size: 22px;font-weight: 300;color: #333333;font-family: 'Noto Sans KR', sans-serif;} .staff_title_box .staff_snsBox{box-sizing:border-box; /* margin-top: 30px; */ } .staff_snsBox .sns_circle{padding-top:13px;cursor:pointer;border-radius: 50%;width: 50px;height: 50px;display: inline-block;text-align: center;} .staff_snsBox .sns_circle img{height: 30px; } .staff_snsBox .sns_circle:hover{background-color:#eeeeee;} .Personal_detailsBox{display: flex;width: 100%;height: auto;} .Personal_detailsBox .pd_listBox{width: 170px;} .Personal_detailsBox .pd_listBox ul{width: 100%;position: relative;box-sizing: border-box;} .Personal_detailsBox .pd_listBox ul li{display: block;height: 100px;cursor: pointer;} .pd_menu{width: 89px;display: inline-block;font-size: 22px;color: #888888;font-weight: 400;font-family: 'Noto Sans KR', sans-serif;padding-bottom: 8px;cursor: pointer;} .on_pd_menu{border-bottom: 3px solid #333333;color: #212121;} .pd_listShowBox{position: relative;width: 500px;} #listShowBox01{position: relative;left:0;top: 0;width: 100%;height: 100%;PADDING-RIGHT: 80PX;} #listShowBox02,#listShowBox03,#listShowBox04{display: none;position: relative;left:0;top: 0;width: 100%;height: 100%;PADDING-RIGHT: 80PX;} .careerLine{color: #545454;font-size: 18px;font-weight: 300;font-family: 'Noto Sans KR', sans-serif;padding-bottom: 21px;padding-top: 21px;border-bottom: 1px solid #ededed;} .career_bookBox{position: relative;width: 100%;border-bottom: 1px solid #ededed;padding-bottom: 24px;padding-top: 24px;box-sizing: border-box;} .career_bookBox .cbookImg{text-align: center;border: 1px solid #ededed;display: inline-block;box-sizing: border-box;width: 140px;height: 200px; /* box-shadow: 4px 10px 20px 1px rgba(0, 0, 0, 0.1); */} .career_bookBox .cbookImg img{display: inline-block;width: 100%;height: 198px;} .career_bookBox .cbookTextBox{position: absolute;bottom:24px;left: 164px;cursor: pointer;transition: all 0,3s;} .cbookTextBox .ct_title{letter-spacing: 0.2px;font-size: 17px;font-weight: 300;color: #333333;font-family: 'Noto Sans KR', sans-serif;transition: all 0,3s;} .cbookTextBox .cbookBtn{text-align: center;width: 140px;height: 44px;line-height: 42px;border: 1px solid #333333;color: #333333;font-family: 'Noto Sans KR', sans-serif;font-size: 15px;font-weight: 300;margin-top: 40px;background-color: #fff;cursor: pointer;transition: all 0,3s;} .PaperLine{box-sizing: border-box;display:flex;padding-bottom: 21px;padding-top: 21px;border-bottom: 1px solid #ededed;} .PaperLine p{width: 100%;color: #545454;font-size: 17px;font-weight: 300;font-family: 'Noto Sans KR', sans-serif;} .PaperLine span{display: inline-block;width: 15px;} .PaperLine span img{width: 4px; position: relative; top: 12px;} .none_padT{padding-top: 0px !important; } .pd_videoBox{width: 530px;} .pd_videoBox p{display: inline-block;font-size: 22px;color: #888888;font-weight: 400;font-family: 'Noto Sans KR', sans-serif;padding-bottom: 8px;border-bottom: 3px solid black;color: #212121;margin-bottom: 60px;} .pd_videoArea{width: 530px;height: 298px;} /*-------------------------------------------------------------- # 세프소개 css --------------------------------------------------------------*/ .chef_gallery_wrap{display: inline-block;margin: 0 auto;} .chef_gallery_box{display: flex;text-align: center;} .chef_img_box{box-sizing: border-box;display: inline-block;position: relative;width: 370px;height: 450px;border-bottom: 1px solid #fafafa;} .chef_img{position: absolute;bottom: 0px;right: -24px;z-index: 30;} .chef_img img{max-width: 100%;} .chef_img_void{width: 130px;} .cimg_bg{position: absolute;top: 0px;left:0px;width: 100%;height: 100%;} .chef_info_box{text-align: left;display: none;position: absolute;top: 30px;left: 0px;z-index: 40 !important;} .chef_ex{color: #fff;font-size: 18px;font-family: 'Noto Sans KR', sans-serif;letter-spacing: 0.2px;} .chef_datail{color: #fff;font-size: 30px;font-family: 'Noto Sans KR', sans-serif;margin-top: 34px;margin-bottom: 10px;} .chef_datail span{color: #fff;font-size: 30px;font-family: 'Titillium Web', sans-serif; } .suBchef_datail{color: #fff;font-size: 16px;font-family: 'Noto Sans KR', sans-serif;letter-spacing: 0.2px;line-height: 30px;} #chef_img_box_top_bg_box{position: absolute;top:0px;left:0px;width: 100%;height: 160px;z-index: 10;overflow: hidden;background-color: #fff;} .chefTop_bg_box{transform: rotateZ(175deg); position: absolute;top: -22px; left: -20px;width: 119%; height: 160px;background-color: #dfe6e6;z-index: 13;} .subChef_img_box{position: relative;width: 25%;height: 330px;border-bottom: 1px solid #ededed;} .subChef_img_void{width: 100px;} #subChef_img_box_top_bg_box{position: absolute;top:0px;left:0px;width: 100%;height: 140px;z-index: 10;overflow: hidden;background-color: #fff;} .subChefTop_bg_box{transform: rotateZ(175deg);position: absolute; top: -22px;left: -20px;width: 119%;height: 140px;background-color: #f6f6f6; z-index: 13;} .subChef_img_void{width: 100px;} .subChef_img{text-align: right;position: absolute;bottom: 0px;right: -20px;z-index: 30;} .subChef_img img{max-width: 100%;} /*-------------------------------------------------------------- # 양방치료 css --------------------------------------------------------------*/ #sub_wrap .sub_area_box1200{ margin: 0 auto; width: 1200px; /* background-color: pink; */ padding-top: 90px; } .sub_common_select_wrap{ background-color: #fff; height: 460px; /* border: 1px solid black; */ } .item20per{ width:20%!important; } .therapy_wrap{ height: auto; } #therapy_itemList_01{ } .video_text_wrap{ height: 710px; } .vt_bg01{ background-image: url(../img/pattern.png); background-size: cover; background-repeat: no-repeat; background-position: center; } .video_text_box{ position: relative; max-width: 1200px; margin: 0 auto; } /* .show_Video_box{ */ /* position: absolute; */ /* top: -340px; */ /* left: 4px; */ /* width: 1191px; */ /* height: 670px; */ /* } */ /* .show_Video_box iframe{ */ /* width: 100%; */ /* height: 100%; */ /* } */ #Video_description_area{ position: absolute; bottom: -602px; width: 100%; } .Video_description_text{ text-align: center; font-size: 30px; font-weight: bold; font-family: 'Noto Sans KR', sans-serif; } .Video_description_text span{ line-height: 31px; display: block; margin-top: 24px; font-family: 'Noto Sans KR', sans-serif; font-size: 18px; } .cure_img_text_area{ min-width: 1800px; padding-bottom: 160px; } .cure_img_text_wrap{ position: relative; box-sizing: border-box; height: 460px; padding: 0; } .cure_img_text_item { position: relative; float: left; width: 50%; height: 460px; } .right_text_wrap{ text-align: left; float: left; width: 600px; height: 460px; padding: 60px; } .right_text_box{ position: relative; width: 100%; } .Product_text_title{ font-size: 30px; font-weight: bold; font-family: 'Noto Sans KR', sans-serif; } .p_title_line { background-color: #3b6bb8; position: relative; right: 0; left: 0; bottom: 0; height: 2px; width: 40px; margin-top: 32px; margin-bottom: 30px; } .Product_suBtext{ letter-spacing: 0.2px; line-height: 34px; font-size: 17px; font-family: 'Noto Sans KR', sans-serif; } .Product_suBtext02{ letter-spacing: 0.2px; line-height: 30px; font-size: 16px; font-family: 'Noto Sans KR', sans-serif; } .Product_suBtext02 span{ font-weight: bold; font-size: 16px; font-family: 'Noto Sans KR', sans-serif; } .marB10{margin-bottom:10px;} .left_text_wrap{ float: right; text-align: left; width: 600px; height: 460px; padding-top: 60px; } .cure_bg01{ background-image: url(../img/western_medicine_01.png); background-size: cover; background-repeat: no-repeat; background-position: center; } .cure_bg02{ background-image: url(../img/western_medicine_02.png); background-size: cover; background-repeat: no-repeat; background-position: center; } .area_sub_img01{ right: 40px; position: absolute; bottom: 0; } .area_sub_img02{ position: absolute; bottom: -70px; } /*-------------------------------------------------------------- # 양방치료 css --------------------------------------------------------------*/ .vt_bg02{ background-image: url(../img/pattern_02.png); background-size: cover; background-repeat: no-repeat; background-position: center; } .cure_bg03{ background-image: url(../img/oriental_medicine_02.png); background-size: cover; background-repeat: no-repeat; background-position: center; } .cure_bg04{ background-image: url(../img/oriental_medicine_04.png); background-size: cover; background-repeat: no-repeat; background-position: center; } .area_sub_img03{ right: 250px; position: absolute; bottom: 0; } .area_sub_img04{ position: absolute; bottom: -40px; LEFT: 30PX; } /*-------------------------------------------------------------- # 병원소개 css --------------------------------------------------------------*/ .content .intro_itemBox{ display: inline-block; opacity:0; overflow: hidden; animation: h1Title 2s forwards; -webkit-animation: h1Title 2s forwards; box-sizing: border-box; padding: 40px; background-color: rgba(0, 0, 0, .4); } .firstTextCenter{overflow: unset!important;text-align: center;} .active .content .intro_itemBox{ animation:intro_itemBox 0.8s 0.8s forwards; -webkit-animation:intro_itemBox 0.8s 0.8s forwards; } @keyframes intro_itemBox {to {opacity:1; }} @-webkit-keyframes intro_itemBox {to {opacity:1; }} .active .content .intro_itemBox {opacity:1\9; } .first_intro_text{ font-size: 90px; color: #fff; font-family: 'Noto Sans KR', sans-serif; font-weight: 500; line-height: 72px; letter-spacing: 20px; } .first_sub_text{ font-size: 26px; color: #fff; font-family: 'Noto Sans KR', sans-serif; font-weight: 300; margin-bottom: 30px; } .first_sub_text span{ font-size: 25px; color: #fff; font-family: 'Noto Sans KR', sans-serif; font-weight: 500; } .first_intro_text p{ color: #fff; font-size: 18px; line-height: 34px; font-family: 'Noto Sans KR', sans-serif; font-weight: 300; margin-top: 16px; letter-spacing: 0.4px; } .first_bottomTextBox{ position: relative; top: 70px; width: 900px; height: 260px; text-align: center; margin: 0 auto; /* overflow: hidden; */ } .fb_text_border { } .fb_text{ display: inline-block; text-align: center; float: left; position: relative; top: -40px; width: 160px; height: 160px; border: 2px solid #fff; border-radius: 50%; border-style: dotted; box-sizing: border-box; color: #fff; font-size: 20px; line-height: 24px; font-family: 'Noto Sans KR', sans-serif; font-weight: 300; letter-spacing: 0.4px; transition: all 0.3; padding-top: 53px; animation:fb_text 2.2s 2.2s forwards; -webkit-animation:fb_text 2.2s 2.2s forwards; margin-right: 10px; margin-left: 10px; opacity:0; } @keyframes fb_text {to {opacity:1; top:0px;}} @-webkit-keyframes fb_text {to {opacity:1; top:0px;}} .intro_text{ font-size: 58px; color: #fff; font-family: 'Noto Sans KR', sans-serif; font-weight: 500; line-height: 72px; } .i_Top_position54{ position: relative; top: -54px; } .i_Top_position15{ position: relative; top: -15px; } .intro_text span{ margin-right: 20px; font-weight: 500; font-size: 160px; color: #fff; font-family: 'NotoSansKR', sans-serif; } .intro_text p{ color: #fff; font-size: 20px; line-height: 34px; font-family: 'Noto Sans KR', sans-serif; font-weight: 300; margin-top: 16px; letter-spacing: 0.4px; } .font-s15{font-size: 15px !important;} .intro_textBold{ font-size: 58px; color: #fff; font-family: 'Noto Sans KR', sans-serif; font-weight: 100; } .intro_textBold span{ font-weight: 400; font-size: 58px; color: #fff; /* font-weight: bold; */ font-family: 'Noto Sans KR', sans-serif; } .intro_textBold p{ color: #fff; font-size: 18px; line-height: 34px; font-family: 'Noto Sans KR', sans-serif; font-weight: 300; margin-top: 16px; letter-spacing: 0.4px; } .marT-11{margin-top:-11px !important;} .i_content_box{ margin-top: 40px; } .i_content_border{ float: left; text-align: center; display: inline-block; position: relative; width: 140px; height: 140px; border: 1px solid #fff; border-radius: 50%; border-style: dotted; margin-right: 30px; } .i_inner_border{ text-align: center; display: inline-block; position: relative; top:4px; width: 130px; height: 130px; border: 1px solid #fff; border-radius: 50%; } .i_inner_text{ position: relative; top: 38px; color: #fff; letter-spacing: 0.7px; font-size: 17px; font-weight: 400; font-family: 'Noto Sans KR', sans-serif; } .i_persent_box{ position: relative; top: -30px; width: 1040px; padding-left: 60px; } .i_persent_text_box{ display: inline-block; text-align: center; } .float_left{float: left;} .float_right{float: right;} .i_persent_number{ text-align: center; color: #fff; font-size: 160px; font-weight: 400; /* font-family: "s-core-dream-light", sans-serif !important; */ font-family: 'Noto Sans KR', sans-serif; } .i_persent_number span{ color: #fff; font-size: 110px; font-family: none; font-weight: 500; } .font-s70{font-weight: bold !important;font-size: 70px !important;} .i_persent_text{ text-align: center; color: #fff; font-size: 24px; line-height: 34px; font-family: 'Noto Sans KR', sans-serif; font-weight: 400; margin-top: -16px; letter-spacing: 0.4px; } .cancer_content_box{ margin-top: 56px; } .cancer_info_box{ text-align: left; } .cancer_infoItem{ display: inline-block; float: left; width: 260px; margin-right: 50px; cursor: pointer; } .c_info_img{ position: relative; width: 260px; height: 166px; z-index: 80; box-sizing: border-box; overflow: hidden; } .c_info_img img{ max-width: 100%; } .c_infoText{ z-index: 90; margin-top: 13px; line-height: 28px; font-size: 17px; color: #fff; font-family: 'Noto Sans KR', sans-serif; } .mouse_on_info_text{ display: none; position: absolute; top:0px; left:0px; width: 260px; height: 166px; background-color: rgba(0,0,0, 0.7); padding-top: 12px; padding-left: 20px; padding-right: 20px; padding-bottom: 12px; box-sizing: border-box; z-index: 100; } .mouse_textBox{ z-index: 110; color: #fff; font-size: 14px; font-weight: 300; font-family: 'Noto Sans KR', sans-serif; line-height: 25px; letter-spacing: 0.5; } #wrap.index_wrap {overflow:hidden; transition-duration:0.8s; -webkit-transition-duration:0.8s;} #container.index_container {padding-top:0; padding-bottom:0;} #wrap.index_wrap.scroll {margin-top:-80px;} .index {} .index .idx_content {position:relative;} .h_section {min-height:800px;overflow:hidden; position:absolute; left:0; top:0; height:100%; width:100%;} .h_section .visual_bg {background-repeat:no-repeat; background-position:center 0; background-size:cover; display:none; position:absolute; left:0; top:0; height:100%; width:100%;} #h_scene1 {top:0;} #h_scene2 {top:100%;} #h_scene3 {top:100%;} #h_scene4 {top:100%;} #h_scene5 {top:100%;} /* bg type visual */ #h_scene1.type1 .visual_bg {background-image:url(../img/bg_about_01.png); display:block;} #h_scene2.type1 .visual_bg {background-image:url(../img/bg_about_02.png); display:block;} #h_scene3.type1 .visual_bg {background-image:url(../img/bg_about_03.png); display:block;} #h_scene4.type1 .visual_bg {background-image:url(../img/bg_about_04.png); display:block;} #h_scene5.type1 .visual_bg {background-image:url(../img/bg_about_05.png); display:block;} #h_scene6.type1 .visual_bg {background-image:url(../img/bg_about_07.png); display:block;} #h_scene7.type1 .visual_bg {background-image:url(../img/bg_about_06.png); display:block;} /* 컨텐츠 영역 layout */ .h_section_wrap {overflow: hidden;position:relative; left:0; top:0; height:100%;} .h_section_container { overflow:hidden; position:absolute; /* right:0; */ left: 18%; top:25%; margin:0 auto; height:680px; width:1240px; z-index: 500; } .first_section_position{left: 0!important;right:0!important;} .hw_bg { z-index: 400; position: absolute; width: 100%; box-shadow: rgba(0,0,0,0.2) 0 0 0 9999px; } .wcenter_bg {position: absolute;width: 100%; box-shadow: rgba(0,0,0,0.24) 0 0 0 9999px; } .wcenter_bg01 {position: absolute;width: 100%; box-shadow: rgba(0,0,0,0.1) 0 0 0 9999px; } .wcenter_bg03 {position: absolute;width: 100%; box-shadow: rgba(0,0,0,0.1) 0 0 0 9999px; } .wcenter_bg04 {position: absolute;width: 100%; box-shadow: rgba(0,0,0,0.1) 0 0 0 9999px; } .wcenter_bg05 {position: absolute;width: 100%; box-shadow: rgba(0,0,0,0.15) 0 0 0 9999px; } .scroll_sub_position{ top: initial !important; left: 0 !important; position: fixed !important; text-align: center; right: 0 !important; bottom: 20px !important; z-index: 200; } /* 인디게이터 */ /* .ind {position:fixed; right:50px; top:50%; margin-top:-58px; height:116px; width:30px; z-index:100;} */ /* .ind:before { content:""; border-radius:0px; opacity:0.2; position:absolute; left:0; top:0; height:100%; width:100%;} */ /* .ind span {background-color:#223140; display:block; cursor:pointer; opacity:0.8; transition:opacity 0.5s, transform 0.3s; -webkit-transition:opacity 0.5s, -webkit-transform 0.3s; margin:0 auto; height:6px; width:6px;} */ /* .ind span:first-child {margin-top:12px;} */ /* .ind span + span {margin-top:20px;} */ /* .ind span.active {background-color:#fff; transform:scale(1.6);} */ /* .indsss { */ /* position:fixed; */ /* top: inherit; */ /* right:180px; */ /* bottom:60px; */ /* margin-top:-58px; */ /* height:auto; */ /* width:30px; */ /* z-index:100;} */ /* .ind:before { content:""; border-radius:0px; opacity:0.2; position:absolute; left:0; top:0; height:100%; width:100%;} */ /* .ind span { */ /* color: #fff; */ /* background-color: rgba(0,0,0, 0.8); */ /* display: block; */ /* cursor: pointer; */ /* opacity: 1; */ /* transition: opacity 0.5s, transform 0.3s; */ /* -webkit-transition: opacity 0.5s, -webkit-transform 0.3s; */ /* margin: 0 auto; */ /* width: 190px; */ /* font-family: 'Noto Sans KR', sans-serif; */ /* padding-left: 20px; */ /* letter-spacing: 0.3px; */ /* padding-top: 10px; */ /* padding-bottom: 10px; */ /* z-index: 300; */ /* } */ /* .ind span br{ */ /* display: none; */ /* } */ /* .ind span:first-child {margin-top:12px;} */ /* .ind span + span {margin-top:10px;} */ /* .ind span.active { */ /* background-color:#fff; */ /* transform:scale(1); */ /* color: black; */ /* font-size: 26px; */ /* padding-top: 10px; */ /* padding-bottom: 10px; */ /* font-weight: 400; */ /* font-family: 'Noto Sans KR', sans-serif; */ /* line-height: 34px; */ /* } */ /* .ind span.active br{ */ /* display: block; */ /* } */ .add_textCenter{text-align:center!important;} /*-------------------------------------------------------------- # 센터소개 css --------------------------------------------------------------*/ #centerWrap{padding-top: 0;padding-bottom: 0;} .center_introbox{position: relative;} .c_section_Videoline { overflow: hidden;position: relative;left: 0; top: 0; height: 100%; width: 100%;} .scene video{width: 100%;} .center_section_container {text-align: left;overflow: hidden; position: fixed; left: 18%; top: 15%;margin: 0 auto;height: 650px;width: 1240px;z-index: 100;} .center_intro_text{font-size: 47px;color: #fff;font-family: 'Noto Sans KR', sans-serif;font-weight: 200;line-height: 62px;} .center_intro_text h3{display: block;color: #fff;font-size: 23px;line-height: 34px;font-family: 'Noto Sans KR', sans-serif;font-weight: 300;letter-spacing: 0.5px;margin-bottom: 14px;} .center_intro_text span{font-size: 47px;color: #fff;font-family: 'Noto Sans KR', sans-serif;font-weight: 500;line-height: 62px;} .center_intro_text p{color: #fff;font-size: 17px;line-height: 34px;font-family: 'Noto Sans KR', sans-serif;font-weight: 300;margin-top: 20px;letter-spacing: 0.5px;} .center_moreBtn{display: inline-block;text-align: left;box-sizing: border-box;overflow: hidden; position: relative;height: 50px;line-height: 48px;width: 200px;font-family: 'Noto Sans KR', sans-serif;color: #fff;font-weight: 300;cursor: pointer;margin-top: 40px;} .center_moreBtn img{position:relative; top: 20px; margin-left: 10px;} .progress_bar_box{position: fixed;left:0;right:0;bottom: 10%;height: 60px;width: 1080px;margin: 0 auto;} .p_nav_itemWrap{height: 40px;text-align: center;position: relative;float: left;overflow: hidden;cursor: pointer;z-index:40;} .progress_item{display: inline-block;position: relative;line-height: 39px;height: 40px;width: 200px;color: rgba(255,255,255, 0.8);font-size: 16px;font-weight: 200;font-family: 'Noto Sans KR', sans-serif;border-bottom: 1px solid rgba(255,255,255, 0.8);z-index:50;cursor: pointer;} .p_nav_itemWrap{z-index:100 !important;} .p_nav_itemWrap:hover .progress_item{font-weight: 400;color: #fff;} .p_nav_itemWrap .pline {z-index:10;position:absolute; top:1px;left:0;width:100%;height:100%;} .p_nav_itemWrap .pline .p_top1:before {content:""; position:absolute; top:0; left:0; width:0; height:2px; background-color:#fff; transition:all 0.3s;} .p_nav_itemWrap .pline .p_top1:after {content:""; position:absolute; top:0; left:0; width:2px; height:0; background-color:#fff; transition:all 0.3s;} .p_nav_itemWrap .pline .p_bottomr:before {content:""; position:absolute; top:100%; right:0; width:0; height:3px; background-color:#fff; margin-top:-2px; transition:all 0.3s;} .p_nav_itemWrap .pline .p_bottomr:after {content:""; position:absolute; bottom:0; right:0; width:2px; height:0; background-color:#fff; transition:all 0.3s;} .p_nav_itemWrap:hover .p_top1:before {width:100%;} .p_nav_itemWrap:hover .p_top1:after {height:100%;} .p_nav_itemWrap:hover .p_bottomr:before {width:100%;} .p_nav_itemWrap:hover .p_bottomr:after {height:100%;} .on_p_items{font-weight: 500 !important;color: #fff !important;} .v_container{position: relative;width: 100%;height: 100vh;} .v_container video{display: block;position: absolute;left: 50%; top: 50%;transform: translate(-50%, -50%);height: 100%;width: 177.77777778vh;min-width: 100%;min-height: 56.25vw;} #w_KeyLine_01, #w_KeyLine_02, #w_KeyLine_03, #w_KeyLine_04, #w_KeyLine_05 { width: 200px;/* bottom: 0px; */height: 3px;background: #fff;position: absolute;bottom: -1px;left:-200px;z-index: 70;-webkit-animation: pw_KeyLine 6s ;-webkit-animation-timing-function: linear;animation: pw_KeyLine 6s ;animation-timing-function: linear;animation-iteration-count: 1;animation-timing-function:ease-in-out; } #w_KeyLine_02 {-webkit-animation: pw_KeyLine 5s ;animation: pw_KeyLine 5s ;display: none;} #w_KeyLine_03 {-webkit-animation: pw_KeyLine 7s ;animation: pw_KeyLine 7s ;display: none;} #w_KeyLine_04 {-webkit-animation: pw_KeyLine 3s ;animation: pw_KeyLine 3s ;display: none;} #w_KeyLine_05 {-webkit-animation: pw_KeyLine 7s ;animation: pw_KeyLine 7s ;display: none;} #p_KeyLine_01, #p_KeyLine_02, #p_KeyLine_03, #p_KeyLine_04, #p_KeyLine_05{ width: 200px;/* bottom: 0px; */height: 3px;background: #fff;position: absolute;bottom: -1px;left:-200px;z-index: 70;-webkit-animation: pw_KeyLine 5s;animation: pw_KeyLine 5s;-webkit-animation-timing-function: linear;animation-timing-function: linear;animation-iteration-count: 1;animation-timing-function:ease-in-out; } #p_KeyLine_02{display: none;-webkit-animation: pw_KeyLine 10s;animation: pw_KeyLine 10s;} #p_KeyLine_03{display: none;-webkit-animation: pw_KeyLine 7s;animation: pw_KeyLine 7s;} #p_KeyLine_04{display: none;-webkit-animation: pw_KeyLine 9s;animation: pw_KeyLine 9s;} #p_KeyLine_05{display: none;-webkit-animation: pw_KeyLine 8s;animation: pw_KeyLine 8s;} @keyframes pw_KeyLine { from {left: -200px;} to {left: 0px;}} @-webkit-keyframes pw_KeyLine { from {left: -200px;} to {left: 0px;}} .marR20{margin-right: 20px;} .visual_video{text-align: center;width: 100%;height: 100%;z-index: 300;} .visual_video video{ display: inline-block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 177.77777778vh; min-width: 100%; /* min-height: 56.25vw; */ } .visual_video2{position: absolute;left: 0;top: 0; height: 100%; width: 100%;background-color: rgba(0,0,0, 0.3);} @media (max-width: 1024px){ .center_section_container {position: fixed;left: 0;top: 24%;margin: 0 auto;height: 650px;width: 100%;z-index: 100;} .content .intro_itemBox{padding-left: 20px;padding-RIGHT: 20px;} .progress_bar_box {display: flex;padding-left: 20px;width: 100%;margin: 0 auto;padding-right: 20px;} .p_nav_itemWrap{width: 20%;} .progress_item{width: 100%;} } /*-------------------------------------------------------------- # 소람 hi소개 css --------------------------------------------------------------*/ .hi_bgBox{text-align: center;overflow: hidden;width: 1200px;height:500px;background-size: cover;background-image: url(/public/img/pc_soram_hi.png);background-repeat: no-repeat;background-position: center;margin-bottom: 74px;} .hi_text_box{box-sizing: border-box;display: flex;position: relative;margin-bottom: 110px;} .none_marB{margin-bottom:0px !important;} .hi_text_box p{box-sizing: border-box;position: relative;display: inline-block;width: 280px;text-align: left;font-size: 32px;font-weight: 500;color: #212121;letter-spacing: 1px;line-height: 38px;font-family: 'Noto Sans KR', sans-serif;padding-bottom: 20px;} .hi_text_box .hi_text_rightBox{box-sizing: border-box;width: 920px;} .hi_text_box .hi_text_rightBox p{box-sizing: border-box;position: relative;top: -2px;width: 100%;color: #545454;font-size: 18px;font-weight: 400;line-height: 34px;letter-spacing: 0.2px;font-family: 'Noto Sans KR', sans-serif;} .hi_text_rightBox .hi_logo_bgBox{text-align: center;overflow: hidden;width: 920px; height:400px;background-size: cover;background-image: url(/public/img/pc_soram_hi_logo.png);background-repeat: no-repeat;background-position: center;margin-top: 44px;margin-bottom: 64px;} .hi_text_rightBox .hi_btnarea{text-align: left;box-sizing: border-box;} .hi_btnarea .hi_btn {text-align: left;box-sizing: border-box;position: relative;display: inline-block;width: 200px; height: 58px;line-height: 56px;font-size: 17px;background-color: #fff;border: 1px solid black;cursor: pointer;color: #545454;font-weight: 500;font-family: 'Noto Sans KR', sans-serif;text-transform: uppercase;z-index: 20;overflow: hidden;transition: all 0.3s;padding-left: 30px;cursor: pointer;} .hi_btnarea .hi_btn img{position: absolute;top: 16px;right: 25px;transition: all 0.3s;} .hi_btn:hover img{top: 22px;} .hi_text_rightBox .hi_table{position: relative;display: flex;width: 100%;box-sizing: border-box;margin-top: 50px;} .hi_table .hi_itemBox{width: 50%;max-width: 100%;box-sizing: border-box;} .marR60{margin-right: 60px;} .hi_itemBox .blue_box{text-align: center;width: 100%;height: 130px;line-height: 130px;background-color: #008acf;color: #fff;font-size: 44px;font-weight: 500;font-family: 'Noto Sans KR', sans-serif;text-transform: uppercase;letter-spacing: 0.3px;margin-bottom: 50px;} .blue_f{color: #008acf !important;} .hi_itemBox .gray_box{text-align: center;width: 100%;height: 130px;line-height: 130px;background-color: #757575;color: #fff;font-size: 44px;font-weight: 500;font-family: 'Noto Sans KR', sans-serif;text-transform: uppercase;letter-spacing: 0.3px;margin-bottom: 50px;} .gray_f{color: #757575 !important;} .hi_itemBox .color_infoBox{border-bottom: 1px solid #eeeeee;padding-bottom: 20px;} .hi_itemBox .color_infoBox p{color: #545454;font-size: 17px;font-weight: 500;font-family: 'Noto Sans KR', sans-serif;letter-spacing: 0px;padding: 0;margin-bottom: 8px;} .hi_itemBox .colorRateBox{display: flex;width: 100%;} .colorRateBox .colorRateItem{width: 25%;text-align: left;color: #545454;font-size: 14px;font-weight: 300;font-family: 'Noto Sans KR', sans-serif;letter-spacing: 0px;padding: 0;} .marB20{margin-bottom: 20px;} .wid100p{width:100% !important;} /*-------------------------------------------------------------- # 서브페이지 박스 to 박스 공통 css --------------------------------------------------------------*/ .diet_bg{background-image: url(../img/diet_bg.png); background-position: center; background-repeat: no-repeat; background-size: cover; } .healing_bg{background-image: url(../img/healing_top_bg.png); background-position: center; background-repeat: no-repeat; background-size: cover; } #sub_wrap .cure_area_box1200{ position: absolute; left:0; right:0; bottom: 4px; margin: 0 auto; width: 1200px; /* background-color: pink; */ } .oncology_bg{width: 100%;position: absolute;top: 0;bottom: 0; left: 0;right: 0;background-size: cover;background-repeat: no-repeat; background-image: url(../img/oncology-esthetics_bg.png); } .width480{width:480px !important;} /*------서브페이지 브래드스크럼 공통 css--------*/ .cure_top_bg{background-image: url(../img/cure_top.png); background-position: center; background-repeat: no-repeat; background-size: cover; } .cureHerbal_top_bg{background-image: url(../img/cure_top02.png); background-position: center; background-repeat: no-repeat; background-size: cover; } .sub_breadcrumbs_box{ padding-left: 80px;padding-right: 80px;width: 100%;} .bread_rel_Position{position: relative;top: -240px;} .bread_abs_Position{position: absolute;top: -240px;} .sub_breadcrumbs_box .bread_inner_wrap{position: relative;background-color: #fff;height: 240px;box-sizing: border-box;padding-left: 40px;padding-right: 40px;} .bread_inner_wrap .bread_inner {margin: 0 auto;width: 1220px;padding-left: 10px;padding-right: 10px;box-sizing: border-box;padding-top: 66px;} .bread_inner .bread_navBox{display: flex;position: relative;} .bread_inner .bread_navBox img{position: relative;top: 4px; height:15px; margin-right: 6px;} .bread_inner .bread_navBox .bn_img{position: relative; top: 8px;} .bread_navBox span img{height: 11px !important; margin-left: 4px; top: -2px !important;} .bread_navBox p{color: #999999;font-size: 15px;letter-spacing: 0.4px;font-weight: 300;font-family: 'Noto Sans KR', sans-serif;} .bread_navBox span{color: #212121;font-size: 15px;letter-spacing: 0.4px;font-weight: 500;font-family: 'Noto Sans KR', sans-serif;} .block_TextBox{text-align: center;position: relative;top: 96px;height: auto;max-width: 1200px;margin: 0 auto;border-width: 10px;border: 10px solid #f1f1f1;vertical-align: middle;padding: 68px 20px 74px;} .block_TextBox .block_title{text-align: center;display: inline-block;} .block_TextBox .block_title h2{letter-spacing: 13px;font-size: 38px;font-weight: bold;font-family: 'Noto Sans KR', sans-serif;color: #212121;margin-bottom: 20px;} .block_TextBox .block_title span{letter-spacing: 0.6px;font-size: 16px;font-weight: 300;line-height: 28px;font-family: 'Noto Sans KR', sans-serif;color: #999999;} .block_TextBox .block_title img{position: relative;top: -12px;display: inline-block;margin-right: 6px;} .block_TextBox .block_title .blockType{display: inline-block;letter-spacing: 3px;font-size: 38px; font-weight: 300; font-family: 'Noto Sans KR', sans-serif; margin-bottom:0px;} .add_allPad{padding: 60px 20px 42px!important;} @media (max-width: 1460px){ .sub_breadcrumbs_box { padding-left: 40px; padding-right: 40px; width: 100%; } } @media (max-width: 1377px){ .sub_breadcrumbs_box{ padding-left:0px; padding-right:0px; } .bread_inner{ width: 100%; max-width: 100%; } } .sub_cure_select_line{display: flex;width: 100%;border-bottom: 1px solid rgba(255,255,255, 0.5);margin-bottom: 50px;} .sub_cure_select_item{position: relative;top: 1px;text-align: center;width: 25%;max-width: 100%;height: 60px;line-height: 60px;font-size: 19px;font-family: 'Noto Sans KR', sans-serif;color: #b3aaaa;cursor: pointer;} .sub_cure_select_item:hover{font-weight: 500;color: #fff;border-bottom: 3px solid #fff;} .on_sub_cure_select{font-weight: 500;color: #fff;border-bottom: 3px solid #fff;} .sub_cure_select_item .pline {z-index:80;position:absolute; top:2px;left:0;width:100%;height:100%;} .sub_cure_select_item .pline .p_top1:before {content:""; position:absolute; top:0; left:0; width:0; height:2px; background-color:#fff; transition:all 0.3s;} .sub_cure_select_item .pline .p_top1:after {content:""; position:absolute; top:0; left:0; width:2px; height:0; background-color:#fff; transition:all 0.3s;} .sub_cure_select_item .pline .p_bottomr:before {content:""; position:absolute; top:100%; right:0; width:0; height:3px; background-color:#fff; margin-top:-2px; transition:all 0.3s;} .sub_cure_select_item .pline .p_bottomr:after {content:""; position:absolute; bottom:0; right:0; width:2px; height:0; background-color:#fff; transition:all 0.3s;} .sub_cure_select_item:hover .p_top1:before {width:100%;} .sub_cure_select_item:hover .p_top1:after {height:100%;} .sub_cure_select_item:hover .p_bottomr:before {width:100%;} .sub_cure_select_item:hover .p_bottomr:after {height:100%;} .width240{width: 240px!important;} .cure_sub_area_box{ margin: 0 auto; width: 1200px; /* padding-top: 186px; */ padding-bottom: 100px; } .box_to_boxWrap{ text-align: center; position:relative; width: 1200px; margin: 40px auto 0; box-sizing: border-box; overflow: hidden; } .box_to_box{ width: 1200px; height: 600px; background-color: #fff; box-sizing: border-box; overflow: hidden; } .imgShow_box{ position: relative; float: left; width: 600px; height: 600px; background-color: #fff; z-index: 200; box-sizing: border-box; } .imgShow_bg01{display: block;position: absolute;left:0;top:0;width: 100%;height: 100%;transition: all 0.3s;background-size: cover;background-position: center;background-repeat: no-repeat;overflow: hidden;opacity:0.6; background-image: url(../img/test_cureBg01.png); animation: fade_change 0.5s; animation-fill-mode: forwards; /* animation: boxshow 0.4s forwards; */ /* -webkit-animation: boxshow 0.4s forwards; */ } @keyframes fade_change {0% {opacity:0.6;}100% {opacity: 1;}} /* @keyframes boxshow {from {opacity:0.6;} to {opacity:1;}} */ /* @-webkit-keyframes boxshow {from {opacity:0.6;} to {opacity:1;}} */ .imgShow_bg02{display: none;position: absolute;left:0;top:0;width: 100%;height: 100%;transition: all 0.3s;background-size: cover;background-position: center;background-repeat: no-repeat;overflow: hidden;opacity:0.6; background-image: url(../img/test_cureBg02.png); animation: fade_change 0.5s; animation-fill-mode: forwards; } .imgShow_bg03{display: none;position: absolute;left:0;top:0;width: 100%;height: 100%;transition: all 0.3s;background-size: cover;background-position: center;background-repeat: no-repeat;overflow: hidden;opacity:0.6; background-image: url(../img/test_cureBg01.png); animation: fade_change 0.5s; animation-fill-mode: forwards; } .imgShow_bg04{display: none;position: absolute;left:0;top:0;width: 100%;height: 100%;transition: all 0.3s;background-size: cover;background-position: center;background-repeat: no-repeat;overflow: hidden;opacity:0.6; background-image: url(../img/test_cureBg02.png); animation: fade_change 0.5s; animation-fill-mode: forwards; } .box_contentShowBox{ position: relative; top: 0px; float: left; width: 599px; height: 600px; border-bottom: 1px solid #eeeeee; border-right: 1px solid #eeeeee; border-top: 1px solid #eeeeee; box-sizing: border-box; z-index:100; } .borC_right{border-right: 1px solid #eeeeee;} .borC_bottom{border-bottom: 1px solid #eeeeee;} .bc_content{ text-align: center; position: relative; float: left; width: 299px; height: 299px; box-sizing: border-box; cursor: pointer; box-sizing: border-box; z-index:200; overflow: hidden; } #boxHoverImg01{ top:50px; opacity:0; animation-fill-mode: forwards; animation: boxHoverImg01 0.4s 0.4s forwards; -webkit-animation: boxHoverImg01 0.4s 0.4s forwards; } @keyframes boxHoverImg01 {to {opacity:1; top:0px;}} @-webkit-keyframes boxHoverImg01 {to {opacity:1; top:0px;}} #boxHoverImg02{ top:70px; opacity:0; animation-fill-mode: forwards; animation: boxHoverImg02 0.4s 0.4s forwards; -webkit-animation: boxHoverImg02 0.4s 0.4s forwards; } @keyframes boxHoverImg02 {to {opacity:1; top:0px;}} @-webkit-keyframes boxHoverImg02 {to {opacity:1; top:0px;}} #boxHoverImg03{ top:90px; opacity:0; animation-fill-mode: forwards; animation: boxHoverImg03 0.4s 0.4s forwards; -webkit-animation: boxHoverImg03 0.4s 0.4s forwards; } @keyframes boxHoverImg03 {to {opacity:1; top:0px;}} @-webkit-keyframes boxHoverImg03 {to {opacity:1; top:0px;}} #boxHoverImg04{ top:100px; opacity:0; animation-fill-mode: forwards; animation: boxHoverImg03 0.4s 0.4s forwards; -webkit-animation: boxHoverImg03 0.4s 0.4s forwards; } @keyframes boxHoverImg04 {to {opacity:1; top:0px;}} @-webkit-keyframes boxHoverImg04 {to {opacity:1; top:0px;}} .box_contentShowBox ul li:nth-child(1):hover {background-color:#2a8cc9;} .box_contentShowBox ul li:nth-child(2):hover {background-color:pink;} .box_contentShowBox ul li:nth-child(3):hover {background-color:#2a8cc9;} .box_contentShowBox ul li:nth-child(4):hover {background-color:pink;} /* .bc_content:hover{background-color: #2a8cc9;transition: all 0.2s;} */ .bc_content:hover .bc_textTitle span{font-weight:400; } .bc_content .bline {position:absolute; width:100%;height:100%;} .bc_content .bline .top1:before {content:""; position:absolute; top:3%; left:3%; width:0; height:1px; background-color:rgba(255,255,255,0.5); transition:all 0.3s; transition-delay:0.1s;} .bc_content .bline .top1:after {content:""; position:absolute; top:3%; left:3%; width:1px; height:0; background-color:rgba(255,255,255,0.5); transition:all 0.3s; transition-delay:0.1s;} .bc_content .bline .bottomr:before {content:""; position:absolute; top:97.3%; right:3%; width:0; height:1px; background-color:rgba(255,255,255,0.5); margin-top:-2px; transition:all 0.3s; transition-delay:0.1s;} .bc_content .bline .bottomr:after {content:""; position:absolute; bottom:3%; right:3%; width:1px; height:0; background-color:rgba(255,255,255,0.5); transition:all 0.3s; transition-delay:0.1s;} .bc_content:hover .top1:before {width:94%;} .bc_content:hover .top1:after {height:94%;} .bc_content:hover .bottomr:before {width:94%;} .bc_content:hover .bottomr:after {height:94%;} .on_bc{background-color: #2a8cc9;} .on_bc_t{color: #fff!important;} .on_bc_l{background-color: #fff !important;} .bc_textBox{position: relative;top: 38px;z-index: 220;padding-left: 18px;padding-right: 18px;} .bc_textTitle{text-align:center;color: #000;font-size: 26px;font-weight: 400;font-family: 'Noto Sans KR', sans-serif;} .bc_textTitle .bc_line{position: relative;width: 24px;height: 1px;background: #000;top: 14px;margin: 0 auto;} .bc_textTitle span{display: block;color: #000;line-height: 25px;font-size: 15px;font-weight: 300;font-family: 'Noto Sans KR', sans-serif;margin-top: 30px;LETTER-SPACING: -0.3PX;} .bc_content .more_bc{position: absolute;left: 0;right: 0;margin: 0 auto;bottom: 30px;display: inline-block;width: 100px;height: 30px;line-height: 28px;border:1px solid #fff;color: #000;font-size: 12px;font-weight: 300;font-family: 'Noto Sans KR', sans-serif;} .bc_content .more_bc:after{display: block;position: absolute;top: 24px;right: 0;content: "";left: 0;width: 44px;height: 1px;background-color: #999999;transition: all 0.3s;margin: 0 auto;} .bc_content:hover .more_bc:after{display: none; color: #fff; transition: all 0.3s;} .bc_arrow{ position: absolute; bottom: 30px; left: 30px; transition: all 0.3s; z-index: 220; } .box_to_box2{ width: 1200px; height: 600px; border: 1px solid black; background-color: pink; box-sizing: border-box; overflow: hidden; } .showBox{ position: absolute; top: 0px; width: 600px; height: 600px; background-color: #2a8cc9; z-index:300; box-sizing: border-box; padding-left: 30px; padding-top: 34px; padding-bottom: 36px; padding-right: 30px; animation: showBox 0.4s forwards; -webkit-animation: showBox 0.4s forwards; } .add_showBox{top:-1px; padding-top:35px;} @keyframes showBox {from {opacity:0;} to {opacity:1;}} @-webkit-keyframes showBox {from {opacity:0;} to {opacity:1;}} #showBox01,#showBox02,#showBox03,#showBox04{ display: none; } #showBox02{ background-color: red!important; } .showBoxWrap{ text-align: left; position: relative; } .showbox_botttom_logo{ position: absolute; bottom: 36px; left: 30px; } .sBox_btn{ text-align: center; box-sizing: border-box; position: relative; width: 100%; height: 60px; line-height: 58px; border: 1px solid #fff; font-size: 24px; font-weight: 500; color: #fff; font-family: 'Noto Sans KR', sans-serif; /* bottom: -220px; */ cursor: pointer; } .sBox_btn img{ position: absolute; right: 20px; top: 16px; } .show_textTitle{ color: #fff; font-size: 26px; font-weight: 400; /* font-family: 'Noto Sans TC', sans-serif; */ font-family: 'Noto Sans KR', sans-serif; } .show_textTitle .showbc_line{ opacity: 1; content: ""; width: 30px; height: 2px; background: #fff; position: absolute; left: 0px; top: 60px; } .show_textTitle span{ display: block; color: #fff; line-height: 28px; font-size: 15px; font-weight: 300; font-family: 'Noto Sans KR', sans-serif; margin-top: 40px; } .s_suBtexArea{ height: 160px; } .show_suBtext{ font-weight: 200; display: inline-block; font-size: 14px; color: #fff; font-family: 'Noto Sans KR', sans-serif; line-height: 30px; margin-top: 26px; opacity: 0.7; } .add_show_suBtext{ float: left; width: 33.33333333%; } .show_suBtext span{ font-size: 16px; font-weight: bold; color: #bed7eb; } .showbox_backArrow{ position: absolute; top: 36px; right: 30px; cursor: pointer; transition:all 0.3; } /* COLORS ========================================== */ /* MIXINS ========================================== */ /* KEYFRAMES ========================================== */ @-webkit-keyframes float { 0% { transform: translatey(0px); transform: translatex(0px); } 50% { transform: translatey(-30px); transform: translatex(20px); } 100% { transform: translatey(0px); transform: translatex(0px); } } @-moz-keyframes float { 0% { transform: translatey(0px); transform: translatex(0px); } 50% { transform: translatey(-30px); transform: translatex(20px); } 100% { transform: translatey(0px); transform: translatex(0px); } } @-o-keyframes float { 0% { transform: translatey(0px); transform: translatex(0px); } 50% { transform: translatey(-30px); transform: translatex(20px); } 100% { transform: translatey(0px); transform: translatex(0px); } } @keyframes float { 0% { transform: translatey(0px); transform: translatex(0px); } 50% { transform: translatey(-30px); transform: translatex(20px); } 100% { transform: translatey(0px); transform: translatex(0px); } } /* RESET ========================================== */ /* BUTTON ========================================== */ .img_video_box{ position: absolute; top: 240px; right: 0; left:0; z-index: 300; /* width: 200px; */ height: 115px; /* background-color: pink; */ cursor: pointer; box-sizing: border-box; } .iv_btnWrap{ position: relative; width: 100%; height:100%; } .iv_bg { position: absolute; width: 100%; background-color: rgba(0,0,0, 0.7); box-shadow: rgba(0,0,0,0.2) 0 0 0 9999px; } /* .button { */ /* position: absolute; */ /* top: 0; */ /* left: 0; */ /* width: 100%; */ /* height: 100%; */ /* z-index: 2; */ /* } */ .button button { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border: 0; /* width: 200px; */ overflow: hidden; outline: 0; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; visibility: visible; opacity: 1; font-weight: bold; /* box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.4); */ } .button button:hover { cursor: pointer; /* background-color: #8e6ac1; */ /* color: #ffffff; */ } .button.clicked button { visibility: hidden; oacity: 0; } .button img{ /* width: 100%; */ cursor:pointer; transition: 0.7s; transition: transform .7s; -o-transition: transform .7s; -moz-transition: transform .7s; -webkit-transition: transform .7s; } /* .button img:hover{ */ /* transition: 0.7s; */ /* cursor:pointer; */ /* transform:scale(1.1); */ /* -o-transform:scale(1.1); */ /* -moz-transform:scale(1.1); */ /* -webkit-transform:scale(1.1); */ /* transition: transform .7s; */ /* -o-transition: transform .7s; */ /* -moz-transition: transform .7s; */ /* -webkit-transition: transform .7s; */ /* } */ /* POP-UP ========================================== */ .pop-up { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) scale(0.9); -moz-transform: translate(-50%, -50%) scale(0.9); -ms-transform: translate(-50%, -50%) scale(0.9); -o-transform: translate(-50%, -50%) scale(0.9); transform: translate(-50%, -50%) scale(0.9); /* box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.4); */ visibility: hidden; opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; z-index: 400; background-color: #ffffff; width: 100%; height: 100.5%; box-sizing: border-box; /* overflow-y: auto; */ } .pop-up .p_content { height: 100%; width: 100%; text-align: center; position: relative; } .none_overF{overflow: unset!important;} .pop-up .p_content .close { text-align: center; background-color: #fff; /* width: 60px; */ position: absolute; right: 0px; top: 0; font-size: 13px; font-weight: 500; font-family: 'Noto Sans KR', sans-serif; color: black; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; height: 70px; display: block; /* border: 1px solid black; */ } .pop-up .p_content .close:hover { cursor: pointer; text-decoration: underline; } .pop-up .close img{ display: block; margin: 0 auto; transition: all 0.3s; padding-bottom: 10px; } /* .pop-up .p_content img { */ /* width: 100%; */ /* max-width: 220px; */ /* display: inline-block; */ /* margin: 30px 0 40px 0; */ /* opacity: 0; */ /* -webkit-transform: translateX(60px); */ /* -moz-transform: translateX(60px); */ /* -ms-transform: translateX(60px); */ /* -o-transform: translateX(60px); */ /* transform: translateX(60px); */ /* -webkit-transition: 0.2s; */ /* -moz-transition: 0.2s; */ /* -o-transition: 0.2s; */ /* transition: 0.2s; */ /* -webkit-backface-visibility: hidden; */ /* } */ .pop-up.opens{ visibility: visible; opacity: 1; -webkit-transform: translate(-50%, -50%) scale(1); -moz-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); -o-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } /* .pop-up.opens img { */ /* opacity: 1; */ /* -webkit-transition: 1s; */ /* -moz-transition: 1s; */ /* -o-transition: 1s; */ /* transition: 1s; */ /* -webkit-transition-delay: 0.3s; */ /* -moz-transition-delay: 0.3s; */ /* -o-transition-delay: 0.3s; */ /* transition-delay: 0.3s; */ /* -webkit-transform: translateX(0px); */ /* -moz-transform: translateX(0px); */ /* -ms-transform: translateX(0px); */ /* -o-transform: translateX(0px); */ /* transform: translateX(0px); */ /* } */ .pshow_Video_box{ margin: 0 auto; position: relative; width: 1067px; height: 600px; } .pshow_Video_box iframe{ width: 100%; height: 100%; } /*-------------------------------------------------------------- # 온콜로지 css --------------------------------------------------------------*/ .img_slideBox{ overflow: hidden; position: relative; float: left; width: 600px; height: 600px; background-color: #fff; z-index: 200; box-sizing: border-box; } .img_slide{ position: relative; } .type_c_box02 { position: relative; top: 0px; float: left; width: 600px; height: 600px; border: none; } .bc_contentType02 { text-align: center; overflow: hidden; position: relative; float: left; width: 300px; height: 300px; box-sizing: border-box; transition: all 0.3s; box-sizing: border-box; background-color: #2a8cc9; z-index: 200; } .bg_change_00{background-color:#00aeb8 !important; } .bg_change_healing{background-color:#fa8cb4 !important; } .bc_contentType02 .bline {position:absolute; width:100%;height:100%;} .bc_contentType02 .bline .top1:before {content:""; position:absolute; top:3%; left:3%; width:0; height:1px; background-color:rgba(255,255,255,0.5); transition:all 0.3s; transition-delay:0.1s;} .bc_contentType02 .bline .top1:after {content:""; position:absolute; top:3%; left:3%; width:1px; height:0; background-color:rgba(255,255,255,0.5); transition:all 0.3s; transition-delay:0.1s;} .bc_contentType02 .bline .bottomr:before {content:""; position:absolute; top:97.3%; right:3%; width:0; height:1px; background-color:rgba(255,255,255,0.5); margin-top:-2px; transition:all 0.3s; transition-delay:0.1s;} .bc_contentType02 .bline .bottomr:after {content:""; position:absolute; bottom:3%; right:3%; width:1px; height:0; background-color:rgba(255,255,255,0.5); transition:all 0.3s; transition-delay:0.1s;} .bc_contentType02:hover .top1:before {width:94%;} .bc_contentType02:hover .top1:after {height:94%;} .bc_contentType02:hover .bottomr:before {width:94%;} .bc_contentType02:hover .bottomr:after {height:94%;} .bc_contentType02 .more_bcType02{position: absolute;left: 0;right: 0;margin: 0 auto;bottom: 30px;display: inline-block;width: 100px;height: 30px;line-height: 28px;border:1px solid #fff;color: #fff;font-size: 12px;font-weight: 300;font-family: 'Noto Sans KR', sans-serif;} /* .bc_contentType02 .more_bcType02:after{display: block;position: absolute;top: 24px;right: 0;content: "";left: 0;width: 44px;height: 1px;background-color: #999999;transition: all 0.3s;margin: 0 auto;} */ /* .bc_contentType02:hover .more_bcType02:after{display: none; color: #fff; transition: all 0.3s;} */ #key_bc_show01{ top:50px; opacity:0; animation-fill-mode: forwards; animation: key_bc_show01 0.4s 0.4s forwards; -webkit-animation: key_bc_show01 0.4s 0.4s forwards; } @keyframes key_bc_show01 {to {opacity:1; top:0px;}} @-webkit-keyframes key_bc_show01 {to {opacity:1; top:0px;}} #key_bc_show02{ top:70px; opacity:0; animation-fill-mode: forwards; animation: key_bc_show02 0.4s 0.4s forwards; -webkit-animation: key_bc_show02 0.4s 0.4s forwards; } @keyframes key_bc_show02 {to {opacity:1; top:0px;}} @-webkit-keyframes key_bc_show02 {to {opacity:1; top:0px;}} #key_bc_show03{ top:90px; opacity:0; animation-fill-mode: forwards; animation: key_bc_show03 0.4s 0.4s forwards; -webkit-animation: key_bc_show03 0.4s 0.4s forwards; } @keyframes key_bc_show03 {to {opacity:1; top:0px;}} @-webkit-keyframes key_bc_show03 {to {opacity:1; top:0px;}} .bc_contentType02 img{ height: 100%; width: 100%; } .bc_type_bg01{ display: block; transition: all 0.3s; background-image: url(../img/test_cureBg01.png); background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; animation: boxshow 0.4s forwards; -webkit-animation: boxshow 0.4s forwards; animation-timing-function: ease-in-out; } .none_background{cursor: pointer;background-color: initial!important;} .none_padding{padding: 0px;} .blck_bg_bcType { position: absolute; width: 100%; box-shadow: rgba(0,0,0,0.4) 0 0 0 9999px; } .bc_textTitle_type02{ text-align: center; color: #fff; font-size: 26px; font-weight: 400; font-family: 'Noto Sans KR', sans-serif; } .bc_textTitle_type02 .bc_line_type02{ position: relative; width: 34px; height: 1px; background: #fff; top: 18px; margin: 0 auto; } .bc_textTitle_type02 span{ display: block; color: #fff; line-height: 28px; font-size: 15px; font-weight: 300; font-family: 'Noto Sans KR', sans-serif; margin-top: 36px; LETTER-SPACING: -0.3PX; } .bc_textTitle_type02 .bc_bold{ color: #fff; font-size:17px !important; font-weight: 600 !important; margin-bottom: 5px; } .big_bc_content{ overflow: hidden; position: relative; float: left; width: 600px; height: 300px; box-sizing: border-box; transition: all 0.3s; box-sizing: border-box; z-index: 200; } .big_bc_content img{ height: 100%; width: 100%; } .slideShow_bg01{position: relative;display: block;width: 600px; height: 600px;transition: all 0.3s;background-size: cover;background-position: center;background-repeat: no-repeat; background-image: url(../img/onolo_test01.png); } .slideShow_bg01{transition: 0.7s;transition: transform .7s; -o-transition: transform .7s;-moz-transition: transform .7s;-webkit-transition: transform .7s;} .slideShow_bg01:hover{transition: 0.7s;transform:scale(1.1); -o-transform:scale(1.1); -moz-transform:scale(1.1);-webkit-transform:scale(1.1);transition: transform .7s; -o-transition: transform .7s;-moz-transition: transform .7s;-webkit-transition: transform .7s;} .slideShow_bg02{position: relative;display: block;width: 600px;height: 600px;transition: all 0.3s;background-size: cover;background-position: center;background-repeat: no-repeat; background-image: url(../img/onolo_test01.png); } .slideShow_bg02{transition: 0.7s;transition: transform .7s; -o-transition: transform .7s;-moz-transition: transform .7s;-webkit-transition: transform .7s;} .slideShow_bg02:hover{transition: 0.7s;transform:scale(1.1); -o-transform:scale(1.1); -moz-transform:scale(1.1);-webkit-transform:scale(1.1);transition: transform .7s; -o-transition: transform .7s;-moz-transition: transform .7s;-webkit-transition: transform .7s;} /*--온콜로지 백이미지---*/ .onolo_bg01{position: relative;display: block;width: 600px; height: 600px;transition: all 0.3s;background-size: cover;background-position: center;background-repeat: no-repeat; background-image: url(../img/onolo_test06.png); } .onolo_bg01{transition: 0.7s;transition: transform .7s; -o-transition: transform .7s;-moz-transition: transform .7s;-webkit-transition: transform .7s;} .onolo_bg01:hover{transition: 0.7s;transform:scale(1.1); -o-transform:scale(1.1); -moz-transform:scale(1.1);-webkit-transform:scale(1.1);transition: transform .7s; -o-transition: transform .7s;-moz-transition: transform .7s;-webkit-transition: transform .7s;} .onolo_bg02{position: relative;display: block;width: 600px;height: 600px;transition: all 0.3s;background-size: cover;background-position: center;background-repeat: no-repeat; background-image: url(../img/onolo_test06.png); } .onolo_bg02{transition: 0.7s;transition: transform .7s; -o-transition: transform .7s;-moz-transition: transform .7s;-webkit-transition: transform .7s;} .onolo_bg02:hover{transition: 0.7s;transform:scale(1.1); -o-transform:scale(1.1); -moz-transform:scale(1.1);-webkit-transform:scale(1.1);transition: transform .7s; -o-transition: transform .7s;-moz-transition: transform .7s;-webkit-transition: transform .7s;} /*--소람식이 백이미지---*/ .dietback_bg01{position: relative;display: block;width: 600px; height: 600px;transition: all 0.3s;background-size: cover;background-position: center;background-repeat: no-repeat; background-image: url(../img/diet_01.png); } .dietback_bg01{transition: 0.7s;transition: transform .7s; -o-transition: transform .7s;-moz-transition: transform .7s;-webkit-transition: transform .7s;} .dietback_bg01:hover{transition: 0.7s;transform:scale(1.1); -o-transform:scale(1.1); -moz-transform:scale(1.1);-webkit-transform:scale(1.1);transition: transform .7s; -o-transition: transform .7s;-moz-transition: transform .7s;-webkit-transition: transform .7s;} .dietback_bg02{position: relative;display: block;width: 600px;height: 600px;transition: all 0.3s;background-size: cover;background-position: center;background-repeat: no-repeat; background-image: url(../img/diet_01.png); } .dietback_bg02{transition: 0.7s;transition: transform .7s; -o-transition: transform .7s;-moz-transition: transform .7s;-webkit-transition: transform .7s;} .dietback_bg02:hover{transition: 0.7s;transform:scale(1.1); -o-transform:scale(1.1); -moz-transform:scale(1.1);-webkit-transform:scale(1.1);transition: transform .7s; -o-transition: transform .7s;-moz-transition: transform .7s;-webkit-transition: transform .7s;} .dietback_bg03{position: relative;display: block;width: 600px; height: 600px;transition: all 0.3s;background-size: cover;background-position: center;background-repeat: no-repeat; background-image: url(../img/diet_04.png); } .dietback_bg03{transition: 0.7s;transition: transform .7s; -o-transition: transform .7s;-moz-transition: transform .7s;-webkit-transition: transform .7s;} .dietback_bg03:hover{transition: 0.7s;transform:scale(1.1); -o-transform:scale(1.1); -moz-transform:scale(1.1);-webkit-transform:scale(1.1);transition: transform .7s; -o-transition: transform .7s;-moz-transition: transform .7s;-webkit-transition: transform .7s;} .dietback_bg04{position: relative;display: block;width: 600px;height: 600px;transition: all 0.3s;background-size: cover;background-position: center;background-repeat: no-repeat; background-image: url(../img/diet_04.png); } .dietback_bg04{transition: 0.7s;transition: transform .7s; -o-transition: transform .7s;-moz-transition: transform .7s;-webkit-transition: transform .7s;} .dietback_bg04:hover{transition: 0.7s;transform:scale(1.1); -o-transform:scale(1.1); -moz-transform:scale(1.1);-webkit-transform:scale(1.1);transition: transform .7s; -o-transition: transform .7s;-moz-transition: transform .7s;-webkit-transition: transform .7s;} /*--힐링센터 백이미지---*/ .healing_bg01{position: relative;display: block;width: 600px; height: 600px;transition: all 0.3s;background-size: cover;background-position: center;background-repeat: no-repeat; background-image: url(../img/healing_01.png); } .healing_bg01{transition: 0.7s;transition: transform .7s; -o-transition: transform .7s;-moz-transition: transform .7s;-webkit-transition: transform .7s;} .healing_bg01:hover{transition: 0.7s;transform:scale(1.1); -o-transform:scale(1.1); -moz-transform:scale(1.1);-webkit-transform:scale(1.1);transition: transform .7s; -o-transition: transform .7s;-moz-transition: transform .7s;-webkit-transition: transform .7s;} .healing_bg02{position: relative;display: block;width: 600px;height: 600px;transition: all 0.3s;background-size: cover;background-position: center;background-repeat: no-repeat; background-image: url(../img/healing_01.png); } .healing_bg02{transition: 0.7s;transition: transform .7s; -o-transition: transform .7s;-moz-transition: transform .7s;-webkit-transition: transform .7s;} .healing_bg02:hover{transition: 0.7s;transform:scale(1.1); -o-transform:scale(1.1); -moz-transform:scale(1.1);-webkit-transform:scale(1.1);transition: transform .7s; -o-transition: transform .7s;-moz-transition: transform .7s;-webkit-transition: transform .7s;} /* .Show_bgType_02{ */ /* position: relative; */ /* display: block; */ /* width: 300px; */ /* height: 300px; */ /* transition: all 0.3s; */ /* background-image: url(../img/onolo_test02.png); */ /* background-size: cover; */ /* background-position: center; */ /* background-repeat: no-repeat; */ /* } */ /* .Show_bgType_03{ */ /* position: relative; */ /* display: block; */ /* width: 600px; */ /* height: 300px; */ /* transition: all 0.3s; */ /* background-image: url(../img/onolo_test03.png); */ /* background-size: cover; */ /* background-position: center; */ /* background-repeat: no-repeat; */ /* } */ /* .showBox_type02{ */ /* position: absolute; */ /* top: 0px; */ /* left:-600px; */ /* width: 600px; */ /* height: 600px; */ /* background-color: #2a8cc9; */ /* z-index:300; */ /* box-sizing: border-box; */ /* padding-left: 30px; */ /* padding-top: 36px; */ /* padding-bottom: 36px; */ /* padding-right: 30px; */ /* animation: showBox02 0.2s forwards; */ /* -webkit-animation: showBox02 0.2s forwards; */ /* } */ /* @keyframes showBox02 {from {left:-600px;} to {left:0;}} */ /* @-webkit-keyframes showBox02 {from {left:-600px;} to {left:0;}} */ .bc_contentType02 img{width: 100%;transition: 0.7s;transition: transform .7s; -o-transition: transform .7s;-moz-transition: transform .7s;-webkit-transition: transform .7s;} .bc_contentType02 img:hover{transition: 0.7s;transform:scale(1.1); -o-transform:scale(1.1); -moz-transform:scale(1.1);-webkit-transform:scale(1.1);transition: transform .7s; -o-transition: transform .7s;-moz-transition: transform .7s;-webkit-transition: transform .7s;} .big_bc_content img{width: 100%;transition: 0.7s;transition: transform .7s; -o-transition: transform .7s;-moz-transition: transform .7s;-webkit-transition: transform .7s;} .big_bc_content img:hover{transition: 0.7s;transform:scale(1.1); -o-transform:scale(1.1); -moz-transform:scale(1.1);-webkit-transform:scale(1.1);transition: transform .7s; -o-transition: transform .7s;-moz-transition: transform .7s;-webkit-transition: transform .7s;} /*--------하단 갤러리 css--------*/ .common_galleryBox{ width: 100%; background-color: #f5f5f5; padding-top: 86px; padding-bottom: 150px; } .gallery_sub_area_box{ text-align: center; margin: 0 auto; width: 1200px; } .gallery_sub_area_box p{ color: #333333; font-size: 35px; font-weight: 400; font-family: 'Noto Sans KR', sans-serif; } .gallery_sub_area_box p span{ display: block; color: #999999; font-family: 'Noto Sans KR', sans-serif; font-size: 15px; margin-top: 10px; } .h_program{ float: left; width: 370px; height: auto; margin-right:30px; margin-bottom: 45px; } .none_marR{margin-right:0px !important;} .program_imgBox{ overflow: hidden; width: 100%; height: 250px; } .program_imgBox img{ max-width: 100%; } .program_textBox{ text-align: left; padding-top: 20px; } .program_textBox p{ letter-spacing: 0.4px; color: #333333; font-size: 17px; font-weight: 400; font-family: 'Noto Sans KR', sans-serif; margin-bottom:10px; } .program_textBox span{ letter-spacing: 0.4px; font-size: 14px; font-weight: 300; color: #888888; font-family: 'Noto Sans KR', sans-serif; } /*-------------------------------------------------------------- # 힐링센터 css --------------------------------------------------------------*/ /*-------------------------------------------------------------- # 진료철차안내 css --------------------------------------------------------------*/ .m_reservation_bgBox{position: relative;width: 100%;height: 530px;z-index: 30;} .m_reservation_bgBox .reserve_mainText{font-family: 'Noto Sans KR', sans-serif;text-align: center; position: relative;top: 200px;font-size: 150px;font-weight: bold;color: #f5f5f5;z-index: 35;opacity: 0.6;} .m_reservation_bgBox .mn_bgBox{position: absolute;top: 0;bottom: 0;left: 0;right: 0; background-position: center; background: no-repeat center center; background-size: cover; background-image: url(/m/public/m_img/main_reservation_info.png); } /* .m_reservation_bgBox img{max-width: 100%;} */ .reserve_table{display: flex;z-index: 40;position: absolute;bottom: -60px;width: 100%;box-sizing: border-box;padding-top: 20px;padding-left: 90px;padding-right: 90px;} .reserve_table .reserve_table_line{width: 20px;} .r_timeBox{background-color: #fff;width: 50%; background-color: #fff;width: 50%;padding-top: 20px;padding-right: 90px;padding-left: 90px;} .r_timeBox p{text-align: center;color: #333333; font-size: 30px;font-weight: 500;font-family: 'Noto Sans KR', sans-serif;margin-bottom: 8px;} .r_timeBox .rTimeLine{position: relative;height: 40px;line-height: 39px;width: 100%;border-bottom: 1px solid #f5f5f5;} .rTimeLine p{display: inline-block;color: #999999;font-size: 16px;font-weight: 300; font-family: 'Noto Sans KR', sans-serif;} .black_Font{color: #333333 !important;font-weight: 500!important} .rTimeLine span{position: absolute;right: 0;top: 7px;display: inline-block;color: #999999;font-size: 16px;font-weight: 300;letter-spacing: 0.7px;font-family: 'Noto Sans KR', sans-serif;} .diagnosis_info{position: relative;width: 100%;margin-top: 180px;} .diagnosis_info h2{text-align: center;color: #333333;font-size: 35px;font-weight: 400;font-family: 'Noto Sans KR', sans-serif;padding-bottom: 56px;} .diagnosis_info .diagnosisFlex{display: flex;} .diagnosis_info .d_info_box{text-align: center;position: relative;margin-bottom: 16px;} .d_info_box .d_info_number{font-family: 'Noto Sans KR', sans-serif;position: absolute; left: 20px; top: 5px;color: #3b6bb8;font-size: 30px;font-weight: 300;} .d_info_box img{z-index: 60;position: absolute; right:-34px; top: 90px;} .marR14{margin-right:16px;} .d_info_box .dflexBox{z-index: 50;padding-top: 64px;padding-bottom: 30px;padding-left:14px;padding-right:14px;width: 290px;height: 320px;border: 1px solid #ededed;display: inline-block;} .d_info_icon_box{display: inline-block;position: relative;} .d_info_icon{position:relative;display: inline-block;text-align: center;width: 90px;height: 90px;border-radius: 50%;border: 1px solid #3b6bb8;border-style: dotted;} .d_info_icon img{display: inline-block!important; position:relative!important;right:inherit;top:inherit; width: 50px;padding-top: 20px;} .none_marB{margin-bottom:0px !important;} .d_info_text_box{padding-top: 20px;text-align: center;display: inline-block;} .d_info_text_box p{color: #333333;font-size: 19px;font-weight: 500; font-family: 'Noto Sans KR', sans-serif;padding-bottom: 6px;} .d_info_text_box span{line-height: 24px;position: relative;left: 0px;color: #888888;font-size: 15px;font-weight: 300;letter-spacing: 0.4px;font-family: 'Noto Sans KR', sans-serif;} .padT20{padding-top:20px;} .padT24{padding-top:24px;} /*-------------------------------------------------------------- # 리오단 비타민 치료 css --------------------------------------------------------------*/ #cure_landingPageBox{ /* background-color: pink; */ position: relative;margin-top: 120px;} #cure_landingPageBox, .landing_itemBox{position: relative;} #cure_landingPageBox, .landing_itemBox:after {content: '';display: block;clear: both;} .landing_itemBox > * {display: block;} .l_Img_Box {position: absolute;} .l_Img_Box img {display: block;max-width: 100%;} .l_Text_Box{display: block;} .l_Text_Box h3 {position: relative;font-size: 40px;color: #222222;padding-bottom: 22px;font-weight: 300;font-family: 'Noto Sans KR', sans-serif;line-height: 1.4;} .l_Text_Box p {font-size: 16px;font-family: 'Noto Sans KR', sans-serif;color: #888888;letter-spacing: -0.025em;line-height: 1.9;} .first_ImgBox{max-width: 39%;left: 0;} .first_textBox{padding: 143px 0 264px;max-width: 61%;float: right; padding-left: 5%;} .secondary_ImgBox{width: 38%;right: 0;} .secondary_textBox{padding: 196px 0 330px; max-width: 62%;float: left; padding-right: 5%;} .third_ImgBox{width: 40%;left: 0;} .third_textBox{padding: 166px 50PX 300px 0px;max-width: 60%;float: right; padding-left: 5%;} .forth_ImgBox{width: 38%;right: 0;} .forth_textBox{padding: 180px 0 310px; max-width: 62%;float: left; padding-right: 5%;} .top74{top:74px !important;} .marT200{margin-top:260px !important;} .landing_endArea{position: relative;} .endArea_faqWrap{margin: 0 auto;width: 1220px; padding-left: 10px; padding-right: 10px; border-top: 1px solid #dbdbdb;padding-top: 80px;padding-bottom: 100px;} .endArea_faqBox{box-sizing: border-box;position: relative;width: 100%;} .e_faqTextBox{display: inline-block;text-align: left;width: 770px;padding-RIGHT: 30px;} .e_faqTextBox p{font-size: 34px; color: #222222; padding-bottom: 10px; font-weight: 300;font-family: 'Noto Sans KR', sans-serif;line-height: 1.4;} .e_faqTextBox span {font-size: 16px;font-family: 'Noto Sans KR', sans-serif;color: #888888; letter-spacing: -0.025em; line-height: 1.6;} .e_faqImgBox{position: absolute;right: 0;top:0;width:435px;height: 240px;background-image: url(../img/e_faq.png);background-position: center; background-repeat: no-repeat; background-size: cover;} .e_faqImgBox P{position: relative; top: 74px;font-size:60px;text-align: center;letter-spacing: 1px;color: #fff;font-family: 'Titillium Web', sans-serif;} .e_faq_questionsBox{margin-top: 20px;} .e_faq_qText{letter-spacing: 0.2px;font-size: 23px;color: #222222;font-weight: 400;font-family: 'Noto Sans KR', sans-serif;} .e_faq_qText span{font-size: 30px;color: #222222; font-weight: bold;font-family: 'Titillium Web', sans-serif;margin-right: 12px;} .e_faq_questionsBtn{text-align: center; width: 286px; height: 50px;line-height: 48px;border: 1px solid #212121; background-color: #fff; display: inline-block;color: #212121; font-size: 16px; font-weight: 400;font-family: 'Noto Sans KR', sans-serif;cursor: pointer;margin-top: 30px;} .landing_bottomBannerBox{position: relative;width: 100%;margin-bottom: 30px;z-index: 100; background-image: url(../img/bottom_bannerBg.png); background-repeat: no-repeat; background-position: center; height: 908px; } .banner_innerBox{position: absolute;bottom:60px;left:0;width: 100%;min-width:1200px;z-index: 200;} .banner_inner{padding-top: 28px;text-align: center;max-width: 1200px;height: 120px;background-color: #fff;margin: 0 auto;} .banner_inner p{letter-spacing: 12px;font-size: 24px;font-weight: bold;line-height: 120px;font-family: 'Noto Sans KR', sans-serif;color: #212121;} /*-------------------------------------------------------------- # 고주파 온열 치료 css --------------------------------------------------------------*/ .R-first_ImgBox{max-width: 38%;right: 0;} .R-first_textBox{padding: 66px 0 50px;max-width: 100%;} .R-secondary_ImgBox{width: 41%;LEFT: 0;} .R-secondary_textBox{padding: 76px 0 218px; max-width: 59%;float: right; padding-left: 5%;} .R-third_ImgBox{width: 41%;right: 0;} .R-third_textBox{padding: 70px 0 190px;max-width: 59%;float: left; padding-right: 5%;} .R-forth_ImgBox{width: 42%;left: 0;} .R-forth_textBox{padding: 66px 0 200px; max-width: 58%;float: right; padding-left: 5%;} .cure_tableBox{position: relative;margin-top: 36px;border-bottom: 1px solid #dbdbdb;border-top: 1px solid #dbdbdb;margin-bottom: 70px;} .borB_db{border-bottom: 1px solid #dbdbdb;} .borR_db{border-right: 1px solid #dbdbdb;} .cure_tableBox .cure_Tline{display: flex;padding-top: 15px;padding-bottom: 15px;} .cure_Tline .ct_text{text-align: center;width: 50%;color: #888888;font-size: 15px;font-family: 'Noto Sans KR', sans-serif;} .cure_btn{text-align: center;width: 286px;height: 50px;line-height: 48px;border: 1px solid #212121;background-color: #fff;display: inline-block;color: #212121;font-size: 16px;font-weight: 400;font-family: 'Noto Sans KR', sans-serif;cursor: pointer;} .cure_btn img{position: relative;top: 12px;margin-left: 6px;} .radio_circle_box{display: flex;} .radio_circle{text-align: center;width: 25%;display: inline-block;margin-top: 200px;} .radio_circle p{display: block;font-size: 16px;font-weight: 300;font-family: 'Noto Sans KR', sans-serif; color: #888888;letter-spacing: -0.025em;line-height: 24px;margin-top: 20px;} .rc_item{vertical-align: middle;display: inline-block;width: 240px;height: 240px;border-radius: 50%;border: 2px dotted #c4c4c4;padding-top: 94px;} .rc_item span{display: inline-block;line-height: 26px;font-size: 24px;font-weight: 400;font-family: 'Noto Sans KR', sans-serif;} /*-------------------------------------------------------------- # 면역치료 css --------------------------------------------------------------*/ .youtube_Video_box{position: relative;width: 1067px;height: 600px;margin: 200px auto;} .youtube_Video_box iframe{width: 100%;height: 100%;} .M-first_ImgBox{max-width: 38%;right: 0;} .M-first_textBox{padding: 46px 0 80px;max-width: 62%;float: LEFT; padding-RIGHT: 5%;} .M-secondary_ImgBox{width: 41%;LEFT: 0;} .M-secondary_textBox{padding: 76px 0 178px; max-width: 59%;float: right; padding-left: 5%;} .M-third_ImgBox{width: 39%;right: 0;} .M-third_textBox{padding: 70px 0 330px;max-width: 59%;float: left; padding-right: 5%;} .M-forth_ImgBox{width: 42%;left: 0;} .M-forth_textBox{padding: 66px 0 130px; max-width: 58%;float: right; padding-left: 5%;} .wid100perImpor{width:100% !important;} /*-------------------------------------------------------------- # 항산화 치료 css --------------------------------------------------------------*/ .H-first_ImgBox{max-width: 34%;right: 0;} .H-first_textBox{padding: 66px 0 244px;max-width: 62%;float: LEFT; padding-RIGHT: 5%;} .H-secondary_ImgBox{width: 41%;LEFT: 0;} .H-secondary_textBox{padding: 76px 0 292px; max-width: 59%;float: right; padding-left: 5%;} .H-third_ImgBox{width: 41%;right: 0;} .H-third_textBox{padding: 70px 0 284px;max-width: 59%;float: left; padding-right: 5%;} .H-forth_ImgBox{width: 42%;left: 0;} .H-forth_textBox{padding: 66px 0 330px; max-width: 58%;float: right; padding-left: 5%;} .anioxidant_itemBox{text-align: center;position: relative;margin-top: 200px;} .anioxidant_title{font-size: 40px;color: #222222;padding-bottom: 22px;font-weight: 300;font-family: 'Noto Sans KR', sans-serif;line-height: 1.4;} .anioxidant_title span{display: block;font-size: 16px;font-family: 'Noto Sans KR', sans-serif;color: #888888;letter-spacing: -0.025em;line-height: 1.9;margin-top: 20px;margin-bottom: 30px;} .anioxidant_suBtitle{display: block;font-size: 16px;font-family: 'Noto Sans KR', sans-serif;color: #3b6bb8;letter-spacing: -0.025em;line-height: 1.9;margin-top: 20px;} .gold_font{color: #cfb961 !important;} .h_radio_circle{text-align: center;width: 33.33333333%;display: inline-block;} .h_radio_circle p{display: block;font-size: 16px;font-weight: 300;font-family: 'Noto Sans KR', sans-serif; color: #888888;letter-spacing: -0.025em;line-height: 24px;margin-top: 20px;} /*-------------------------------------------------------------- # 영양 치료 css --------------------------------------------------------------*/ .N-first_ImgBox{max-width: 32%;right: 0;} .N-first_textBox{padding: 166px 0 410px;max-width: 62%;float: LEFT; padding-RIGHT: 5%;} .N-secondary_ImgBox{width: 35%;LEFT: 0;} .N-secondary_textBox{padding: 166px 0 398px; max-width: 59%;float: right; padding-left: 5%;} /*-------------------------------------------------------------- # 치료 장비 css --------------------------------------------------------------*/ .tr-first_ImgBox{max-width: 39%;right: 0;} .tr-first_textBox{padding: 66px 0 244px;max-width: 62%;float: LEFT; padding-RIGHT: 5%;} .tr-secondary_ImgBox{width: 37%;LEFT: 0;} .tr-secondary_textBox{padding: 76px 0 262px; max-width: 59%;float: right; padding-left: 5%;} .tr-third_ImgBox{width: 38%;right: 0;} .tr-third_textBox{padding: 70px 0 270px;max-width: 59%;float: left; padding-right: 5%;} .tr-forth_ImgBox{width: 40%;left: 0;} .tr-forth_textBox{padding: 66px 0 240px; max-width: 58%;float: right; padding-left: 5%;} .tr-fifth_ImgBox{width: 34%;right: 0;} .tr-fifth_textBox{padding: 70px 0 268px;max-width: 65%;float: left; padding-right: 5%;} .tr-sixth_ImgBox{width: 34%;left: 0;} .tr-sixth_textBox{padding: 66px 0 320px; max-width: 63%;float: right; padding-left: 5%;} .tr-seventh_ImgBox{width: 32%;right: 0;} .tr-seventh_textBox{padding: 70px 0 292px;max-width: 65%;float: left; padding-right: 5%;} .tr-eighth_ImgBox{width: 31%;left: 0;} .tr-eighth_textBox{padding: 66px 0 280px; max-width: 67%;float: right; padding-left: 5%;} /*-------------------------------------------------------------- # 한약재안정성 css --------------------------------------------------------------*/ .three_r_circle_wrap{ margin-top: 200px;width:100%;text-align: center;display: inline-block;} .three_r_circle_box{display: inline-block;} .three_r_circle{float: left;text-align: center;width: 300px;margin-left: 26px;margin-right:26px;} .three_r_circle p{display:block;font-size: 16px;font-weight: 300;font-family: 'Noto Sans KR', sans-serif; color: #888888;letter-spacing: -0.025em;line-height: 24px;margin-top: 20px;} .h_rc_item{vertical-align: middle;display: inline-block;width: 200px;height: 200px;border-radius: 50%;border: 2px dotted #c4c4c4;padding-top: 84px;} .h_rc_item span{display: inline-block;line-height: 26px;font-size: 24px;font-weight: 400;font-family: 'Noto Sans KR', sans-serif;} .safety-first_ImgBox{max-width: 35%;right: 0;} .safety-first_textBox{padding: 116px 0 190px;max-width: 65%;float: LEFT; padding-RIGHT: 5%;} .safety-secondary_ImgBox{width: 41%;LEFT: 0;} .safety-secondary_textBox{padding: 158px 0 234px; max-width: 59%;float: right; padding-left: 5%;} .safety-third_ImgBox{width: 41%;right: 0;} .safety-third_textBox{padding: 148px 0 220px;max-width: 59%;float: left; padding-right: 5%;} /*-------------------------------------------------------------- # 환약탕약치료 css --------------------------------------------------------------*/ .herbal_categoryBox{ display: inline-block; text-align: center; position: relative; /* right: 0px; */ /* top: 0; */ /* height: 44px; */ /* line-height: 44px; */ /* background-color: #cfb961; */ color: #cfb961; font-weight: 400; font-size: 17px; font-family: 'Noto Sans KR', sans-serif; margin-left:10px; /* padding-left: 26px; */ /* padding-right: 26px; */ } .herbal-zero_ImgBox{width: 36%;right: 0;} .herbal-zero_textBox{padding: 196px 0 330px; max-width: 62%;float: left; padding-right: 5%;} .herbal-first_ImgBox{max-width: 39%;left: 0;} .herbal-first_textBox{padding: 143px 0 378px;max-width: 55%;float: right; padding-left: 5%;} .herbal-secondary_ImgBox{width: 38%;right: 0;} .herbal-secondary_textBox{padding: 196px 0 296px; max-width: 62%;float: left; padding-right: 5%;} .herbal-third_ImgBox{width: 40%;left: 0;} .herbal-third_textBox{padding: 166px 0PX 330px 0px;max-width: 60%;float: right; padding-left: 5%;} .herbal-forth_ImgBox{width: 38%;right: 0;} .herbal-forth_textBox{padding: 180px 0 324px; max-width: 62%;float: left; padding-right: 5%;} .herbal-fifth_ImgBox{width: 40%;left: 0;} .herbal-fifth_textBox{padding: 166px 0PX 366px 0px;max-width: 60%;float: right; padding-left: 5%;} .herbal_elementWrap{text-align: center;} .herbal_elementSelectBox{margin-top: 200px;} .herbal_element_select_line{position: relative; display: inline-block;border-bottom: 1px solid #ededed; margin: 0 auto;} .he_select_item {background-color: #f5f5f5;float: left;display: inline-block; position: relative;top: 1px; text-align: center; width: 240px;max-width: 100%; height: 60px;line-height: 60px;font-size: 19px; font-family: 'Noto Sans KR', sans-serif;color: #999999; cursor: pointer; transition: all 0.3s;} .he_select_item.on_sc_select{background-color: #fff;border:1px solid #ededed;font-weight: 400;color: #424242!important;} #herbal_video01{display: block;margin-top:40px;} #herbal_video02,#herbal_video03{display: none;margin-top:40px;} .herbal_v_text{text-align: center;padding-top: 20px;padding-bottom: 20px;letter-spacing: 0.6px; font-size: 16px;font-weight: 300;line-height: 28px;font-family: 'Noto Sans KR', sans-serif;color: #999999;margin-bottom: 104px;} .cure_method_elementWrap{} .cure_method_elementSelectBox{text-align: center;} .cure_element_select_line{position: relative;display: inline-block;border-bottom: 1px solid #ededed; margin: 0 auto;} .cu_select_item {background-color: #f5f5f5;float: left;display: inline-block; position: relative; top: 1px;text-align: center;width: 240px; max-width: 100%; height: 60px; line-height: 60px;font-size: 19px;font-family: 'Noto Sans KR', sans-serif;color: #999999;cursor: pointer; transition: all 0.3s;} .cu_select_item.on_sc_select{border:1px solid #ededed;background-color: #fff;font-weight: 400;color: #424242!important;} #cureShow_01{display: block;margin-top:60px;animation: h1Title 2s forwards;-webkit-animation: h1Title 2s forwards;} #cureShow_02{display: none;margin-top:40px;animation: h1Title 2s forwards;-webkit-animation: h1Title 2s forwards;} .herbal_top_itemBox{position: relative;display: flex;width: 100%;height: auto;} .ht_itemBox{width: 50%;} .ht_itemiMG{text-align:center;width: 100%;} .ht_itemiMG img{display: inline-block;max-width: 100%;} .herbal_top_subText{text-align: center;padding-top: 20px;padding-bottom: 20px;letter-spacing: 0.6px;font-size: 16px; font-weight: 300;line-height: 28px;font-family: 'Noto Sans KR', sans-serif;color: #999999;} /*-------------------------------------------------------------- # 약침치료 css --------------------------------------------------------------*/ .h_r_circle_wrap{display: inline-block;} .h_r_circle_box{display: flex;} .h_r_circle{text-align: center;width: 300px;margin-left: 40px;margin-right:40px;} .h_r_circle p{display:block;font-size: 16px;font-weight: 300;font-family: 'Noto Sans KR', sans-serif; color: #888888;letter-spacing: -0.025em;line-height: 24px;margin-top: 20px;} .h_rc_item{vertical-align: middle;display: inline-block;width: 200px;height: 200px;border-radius: 50%;border: 2px dotted #c4c4c4;padding-top: 84px;} .h_rc_item span{display: inline-block;line-height: 26px;font-size: 24px;font-weight: 400;font-family: 'Noto Sans KR', sans-serif;} .acupuncture-zero_ImgBox{width: 37%;right: 0;} .acupuncture-zero_textBox{padding: 196px 0 380px; max-width: 62%;float: left; padding-right: 5%;} .acupuncture-first_ImgBox{max-width: 37%;left: 0;} .acupuncture-first_textBox{padding: 143px 0 448px;max-width: 55%;float: right; padding-left: 5%;} /*-------------------------------------------------------------- # 비훈치료 css --------------------------------------------------------------*/ .b_r_circle_wrap{display: inline-block;} .b_r_circle_box{box-sizing: border-box;display: inline-block;} .b_r_circle{margin-right: 60px;position: relative;top:20px;float:left;display: inline-block;text-align: center;width: 300px;} .b_r_circle p{display:block;font-size: 16px;font-weight: 300;font-family: 'Noto Sans KR', sans-serif; color: #888888;letter-spacing: -0.025em;line-height: 24px;margin-top: 20px;} .b_rc_item{vertical-align: middle;display: inline-block;width: 200px;height: 200px;border-radius: 50%;border: 2px dotted #c4c4c4;padding-top: 84px;} .b_rc_item span{display: inline-block;line-height: 26px;font-size: 24px;font-weight: 400;font-family: 'Noto Sans KR', sans-serif;} .gathering_circle{float:left;display: inline-block;width: 500px; margin-left: 20px;} .g_r_circle{display: inline-block;text-align: center;} .g_r_circle p{display:block;font-size: 15px;font-weight: 300;font-family: 'Noto Sans KR', sans-serif; color: #888888;letter-spacing: -0.025em;line-height: 24px;margin-top: 20px;} .g_rc_item{vertical-align: middle;display: inline-block;width: 240px;height: 240px;border-radius: 50%;border: 2px dotted #c4c4c4;padding-top: 64px;} .g_rc_item span{display: inline-block;line-height: 26px;font-size: 24px;font-weight: 400;font-family: 'Noto Sans KR', sans-serif;} #gathering_right{position: relative;left: -20px;} .b_ct_text {position: relative; text-align: left;width: 100%; color: #888888;font-size: 15px;font-family: 'Noto Sans KR', sans-serif;padding-left: 20px;} .b_ct_text span{position: absolute;left:0;top: 8px;width:6px;height:6px;background-color:#cfb961; } .nebulizer_zero_ImgBox{width: 40%;right: 0;} .nebulizer_zero_textBox{padding: 46px 0 180px; max-width: 62%;float: left; padding-right: 5%;} .nebulizer_first_ImgBox{max-width: 38%;left: 0;} .nebulizer_first_textBox{padding: 43px 0 148px;max-width: 55%;float: right; padding-left: 5%;} /*-------------------------------------------------------------- # 병원소개 css --------------------------------------------------------------*/ .hospital_bg{background-image: url(../img/hospital_bg.png);background-position: center;background-repeat: no-repeat;background-size: cover;} .hospital_section{position: relative;background-color: #fff;background-image: linear-gradient(#fff,#edf0f5);} .hospital_title{margin-bottom: 70px;letter-spacing: 0.4px;text-align: center;color: #333333;font-size: 35px;font-weight: 400;font-family: 'Noto Sans KR', sans-serif;} .hospital_title span{margin-top:14px;letter-spacing: 0.4px;display: block;color: #888888;font-size: 18px;font-weight: 300;font-family: 'Noto Sans KR', sans-serif;} .ht_line{background-color: #424242;opacity: 0.6;width:1px;height: 100px;margin: 60px auto 36px;} .h_introBox{position: relative;height: auto;padding-top: 160px;padding-bottom: 0px;} .h_introBox .hIntro_title{letter-spacing: 8px;text-align: center;color: #333333;font-size: 32px;font-weight: bold;font-family: 'Titillium Web', sans-serif;} .h_introBox .hIntro_title span{margin-top:14px;letter-spacing: 0.4px;display: block;color: #888888;font-size: 18px;font-weight: 300;font-family: 'Noto Sans KR', sans-serif;} .into_contentBox{overflow: hidden; position: relative;width: 1200px;box-sizing: border-box;overflow: hidden;margin: 40px auto 0;} .into_contentBox .ic_fullBox{overflow: hidden; float: left;width: 1200px;height: 570px;background-color: #fff;} .into_contentBox .ic_bigBox{overflow: hidden; float: left;width: 784px;height: 570px;background-color: #fff;} .marB30{margin-bottom: 30px;} .marR30{margin-right: 30px;} .into_contentBox .ic_smallBox{float: left;width: 386px;height: 570px;background-color: #fff;} .h_introImgBox{width: 100%;height: 380px;overflow: hidden;} .h_introImgBox img{width: 100%; height: 380px;overflow: hidden;} .h_introTextBox{text-align: center;position: relative;padding-top: 26px;} .h_introTextBox p{color: #333333;font-size: 42px;font-weight: 500;font-family: 'Titillium Web', sans-serif;} .marT8{margin-top:8px;} .h_introTextBox .h_iSubText{letter-spacing: 0px;display: block;color: #888888;font-size: 17px;font-weight: 400;font-family: 'Noto Sans KR', sans-serif;} .h_introTextBox .h_iSubText span{color: #cfb961;font-size: 23px;font-weight: bold;font-family: 'Noto Sans KR', sans-serif;margin-left:} .choose_box{box-sizing: border-box;position: relative;float: left;width: 585px;height: 700px;background-color: #fff;} #building_bg01{background-repeat: no-repeat;background-size: cover;background-image: url(../img/special_01.png);} #building_bg02{background-repeat: no-repeat;background-size: cover;background-image: url(../img/special_02.png);} .c_boxbg01{display: none;background-color: rgba(0,0,0, 0.6); position: absolute; right: 0; top: 0;height: 100%;width: 100%; z-index: 200; animation: h1Title 2s forwards; -webkit-animation: h1Title 2s forwards; } .c_box_wrap01{display: none;overflow: hidden;position: absolute; left: 0;top: 0;right:0;bottom:0;z-index: 400;padding-left: 90px;padding-top: 10px;padding-RIGHT: 30px;} .c_boxbg02{display: none;background-color: rgba(0,0,0, 0.6); position: absolute;right: 0;top: 0; height: 100%; width: 100%;z-index: 200; animation: h1Title 2s forwards; -webkit-animation: h1Title 2s forwards; } .c_box_wrap02{display: none;overflow: hidden;position: absolute;left: 0;top: 0;right:0;bottom:0;z-index: 400;padding-left: 90px;padding-top: 10px;padding-RIGHT: 30px; } .c_box_number{display: inline-block;color: #fff;font-size: 80px;font-weight: 100;/* font-family: 'Noto Sans KR', sans-serif; */font-family: 'Titillium Web', sans-serif;margin-right: 19px;} .c_box_title{display: inline-block;line-height: 32px;font-size: 22px;color: #fff;font-family: 'Noto Sans KR', sans-serif;} .c_box_title span{font-weight: 500;font-size: 22px;color: #fff;font-family: 'Noto Sans KR', sans-serif;} .ques_titleBox{position: relative;font-weight: 100;line-height: 50px;font-size: 32px;color: #fff;font-family: 'Noto Sans KR', sans-serif;margin-top: 120px; transition-timing-function: ease-out; animation:ques_intro 0.9s 0.9s forwards; -webkit-animation:ques_intro 0.9s 0.9s forwards; opacity:0; left: -240px; transition: all 0.3s; } @keyframes ques_intro {to {opacity:1; left:0px;}} @-webkit-keyframes ques_intro {to {opacity:1; left:0px;}} .ques_titleBox span{font-size: 32px;font-weight: 500;color: #fff;font-family: 'Noto Sans KR', sans-serif;} .ques_subTitleBox{position: relative;left: -240px;display: inline-block;line-height: 27px;font-size: 18px;color: #fff;font-family: 'Noto Sans KR', sans-serif;margin-top: 46px; transition-timing-function: ease-out; animation:ques_suBintro 2s 2s forwards; -webkit-animation:ques_suBintro 2s 2s forwards; opacity:0; transition: all 0.3s; } @keyframes ques_suBintro {to {opacity:1; left:0px;}} @-webkit-keyframes ques_suBintro {to {opacity:1; left:0px;}} .ques_subTitleBox span{display: block;font-size: 18px;color: #fff;font-family: 'Noto Sans KR', sans-serif;margin-top: 10px;} .cBox_bottomBtn {position: absolute;left: 50%;transform: translateX(-50%);bottom: 50px;display: inline-block; width: 200px;height: 50px;line-height: 48px; text-align: center; border: 1px solid #fff;color: #fff; font-size: 14px; font-weight: 400;font-family: 'Noto Sans KR', sans-serif; margin-top: 40px;cursor: pointer;} .writing_Wrap{position: relative;width: 1200px;box-sizing: border-box;overflow: hidden;padding-top: 90px;} .writing_box{float: left;width: 585px;height: 700px;} .w_topBox{position: relative;text-align: center;width: 100%;height: 306px;background-color: #2477ac; padding-top: 50px;} .w_boxAnother_c{background-color: #253754 !important;} .w_bottomBox{padding-top: 136px; text-align: center;width: 100%;height: 394px;background-color: #fff;} .w_topTitle{color: #fff;font-size: 24px;font-weight: 200;font-family: 'Noto Sans KR', sans-serif;} .w_topTitle span{position: relative;top: -1px;color: #fff;font-size: 23px;font-weight: 500;font-family: 'Noto Sans KR', sans-serif;} .wtopImgBox{position: absolute;top: 120px;left: 50%;transform: translateX(-50%);width: 200px; box-shadow: 4px 10px 20px 1px rgba(0, 0, 0, 0.1);} .wtopImgBox img{width: 100%;} .w_bottomBox p{color: #333333;font-size: 40px;font-weight: 500;font-family: 'Titillium Web', sans-serif;} .w_bottomBtn{display: inline-block;width: 200px;height: 50px;line-height: 48px;text-align: center;border: 1px solid #333333;color: #333333;font-size: 14px;font-weight: 400;font-family: 'Noto Sans KR', sans-serif;margin-top: 40px;cursor: pointer;} .sideNav{text-align: center;top: 100px;height: 70px;position: sticky;position: -webkit-sticky;z-index: 700;} .sideNav ul.sideMenu {position: relative;text-align: center;background-color: #ededed; z-index: 9999;} .sideMenu li{position: relative;display: inline-block;line-height: 70px; text-align: center;margin-left: 30px;margin-right: 30px;} .sideMenu li a{position: relative;letter-spacing: 2px;color: #b3b3b3; font-size: 18px;font-weight: 400; font-family: 'Titillium Web', sans-serif;-webkit-transition: .2s ease;transition: .2s ease;} .sideMenu li a:hover{color: #333333;} .sideMenu li a.active {color: #b3b3b3;} .sideMenu li a.active.on {color: #333333;font-weight: bold;} .line_number01{ position: absolute; width: 100%; left: 50%; transform: translateX(-50%); bottom: -5px; text-align: center;} .line_number01 p{display: inline-block;width: 100%; height: 2px;background-color: #333333;} .line_number01 span{display:none!important;position: relative; top:-6px;display: block;font-size:14px;font-weight: bold;font-family: 'Titillium Web', sans-serif;} .line_number02{ position: absolute; width: 100%; left: 50%; transform: translateX(-50%); bottom: -5px; text-align: center;} .line_number02 p{display: inline-block;width: 100%; height: 2px;background-color: #333333;} .line_number02 span{display:none!important;position: relative; top:-6px;display: block;font-size:14px;font-weight: bold;font-family: 'Titillium Web', sans-serif;} .line_number03{ position: absolute; width: 100%; left: 50%;transform: translateX(-50%); bottom: -5px; text-align: center;} .line_number03 p{display: inline-block;width: 100%; height: 2px;background-color: #333333;} .line_number03 span{display:none!important;position: relative; top:-6px;display: block;font-size:14px;font-weight: bold;font-family: 'Titillium Web', sans-serif;} .line_number04{ position: absolute; width: 100%; left: 50%;transform: translateX(-50%); bottom: -5px; text-align: center;} .line_number04 p{display: inline-block;width: 100%; height: 2px;background-color: #333333;} .line_number04 span{display:none!important;position: relative; top:-6px;display: block;font-size:14px;font-weight: bold;font-family: 'Titillium Web', sans-serif;} .line_number05{ position: absolute; width: 100%; left: 50%;transform: translateX(-50%); bottom: -5px; text-align: center;} .line_number05 p{display: inline-block;width: 100%; height: 2px;background-color: #333333;} .line_number05 span{display:none!important;position: relative; top:-6px;display: block;font-size:14px;font-weight: bold;font-family: 'Titillium Web', sans-serif;} .line_number06{ position: absolute; width: 100%; left: 50%;transform: translateX(-50%); bottom: -5px; text-align: center;} .line_number06 p{display: inline-block;width: 100%; height: 2px;background-color: #333333;} .line_number06 span{display:none!important;position: relative; top:-6px;display: block;font-size:14px;font-weight: bold;font-family: 'Titillium Web', sans-serif;} /* paging 관련 추가 */ .front_paging_line{ text-align: center; /* position: absolute; */ /* bottom: 60px; */ /* height: 46px; */ /* border:1px solid black; */ margin-top: 20px; } .front_paging_box{ display: inline-block; } .flex_box{ display: flex; } .prev_page{ text-align: center; width: 54px; height: 46px; line-height: 46px; background-color: #ededed; color: #999999; margin-right: 12px; font-size: 15px; font-family: 'Noto Sans KR', sans-serif; cursor: pointer; border: none; } .next_page{ text-align: center; width: 54px; height: 46px; line-height: 46px; background-color: #424242; color: #fff; margin-left: 10px; font-size: 15px; font-family: 'Noto Sans KR', sans-serif; cursor: pointer; border: none; } .front_paging_number_box{ height: 46px; } .front_paging_number_box ul li{ display: inline-block; height: 46px; width: 46px; text-align: center; cursor: pointer; padding-top: 11px; font-family: 'Noto Sans KR', sans-serif; box-sizing: border-box; margin-left:-2px; /* border: 2px solid #fff; */ } .on_front_paging{ font-weight: bold; border: 2px solid black !important; } .front_paging_number_box ul li:hover{ background-color: #ededed; } @font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 100;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');} /* Regular */ @font-face { font-family: 'NotoSansKR'; font-style: normal; font-weight: 300; src: local('NotoSansKR-Regular'), format('woff'); } /* Bold */ @font-face { font-family: 'NotoSansKR'; font-style: normal; font-weight: 700; src: local('NotoSansKR-Bold'), format('woff'); } /* titillium-web-regular - latin */ @font-face { font-family: 'Titillium Web', sans-serif; font-style: normal; font-weight: 300; src: url('../fonts/titillium-web-v8-latin-regular.eot'); /* IE9 Compat Modes */ src: local('Titillium Web Regular'), local('TitilliumWeb-Regular'), } @font-face { font-family: 'S-CoreDream-9Black'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-9Black.woff') format('woff'); font-weight: normal; font-style: normal; } body { font-family: 'Noto Sans KR'; font-size: 12pt; } #contents { width: 100%; text-align: center; } div::-webkit-scrollbar { width: 12px; background-color: #F5F5F5; }