/* @import url(notosanskr.css); 기본 : font-family: 'Noto Sans KR', sans-serif; font-weight:400; 굵기에 따라 : font-weight만 조정 */ @charset "utf-8"; /* body, hd_fixed 1200px pc버전 고정 */ /* ----------------------------------------------------------------------------- */ /* FONT */ /* ----------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&subset=korean'); @import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap'); @import url('https://fonts.googleapis.com/earlyaccess/nanummyeongjo.css'); .nanummyeongjo { font-family: 'Nanum Myeongjo', serif; } @font-face { font-family: 'S-CoreDream-4Regular'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'S-CoreDream-5Medium'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'S-CoreDream-6Bold'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6Bold.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'S-CoreDream-7ExtraBold'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-7ExtraBold.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'S-CoreDream-8Heavy'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-8Heavy.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'TTJejuGamgyulR'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_nine_@1.1/TTJejuGamgyulR.woff') format('woff'); font-weight: normal; font-style: normal; } /* 나눔스퀘어 */ @font-face{ font-family: 'NanumSquare'; src: url('fonts/NanumSquareR.eot'); src: url('fonts/NanumSquareR.eot?#iefix') format('embedded-opentype'), url('fonts/NanumSquareR.woff') format('woff'), url('fonts/NanumSquareR.ttf') format('truetype') } @font-face{ font-family: 'NanumSquareB'; src: url('fonts/NanumSquareB.eot'); src: url('fonts/NanumSquareB.eot?#iefix') format('embedded-opentype'), url('fonts/NanumSquareB.woff') format('woff'), url('fonts/NanumSquareB.ttf') format('truetype') } @font-face{ font-family: 'NanumSquareL'; src: url('fonts/NanumSquareL.eot'); src: url('fonts/NanumSquareL.eot?#iefix') format('embedded-opentype'), url('fonts/NanumSquareL.woff') format('woff'), url('fonts/NanumSquareL.ttf') format('truetype') } @font-face{ font-family: 'NanumSquareEB'; src: url('fonts/NanumSquareEB.eot'); src: url('fonts/NanumSquareEB.eot?#iefix') format('embedded-opentype'), url('fonts/NanumSquareEB.woff') format('woff'), url('fonts/NanumSquareEB.ttf') format('truetype') } body,td,h1,h2,h3,h4,h5,div,p,li,ul,ol,dd,dt,section,input,textarea,select,button{margin:0;padding:0; font-family: 'NotoKR', sans-serif; } ul,ol,li{margin:0;padding:0;list-style:none;} input[type=password]{font-family: '돋움','돋움체';} input[type=password]::-webkit-input-placeholder { /* Chrome/Opera/Safari */ font-family: 'Noto Sans KR', sans-serif; } input[type=password]::-moz-placeholder { /* Firefox 19+ */ font-family: 'Noto Sans KR', sans-serif; } input[type=password]:-ms-input-placeholder { /* IE 10+ */ font-family: 'Noto Sans KR', sans-serif; } input[type=password]:-moz-placeholder { /* Firefox 18- */ font-family: 'Noto Sans KR', sans-serif; } a, img{border:0px; vertical-align:middle;} a{text-decoration:none;} /*a:hover{ color:#00529B;}*/ strong{font-weight:500;} *, :after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} .lview{} .sview{display:none;} .mview{display:none;} /* 중간기기~작은기기 모바일 상단 */ #mobile_header {width:100%; height:60px; line-height:60px; border:0px solid red; z-index:99999; display:none;} #mobile_header .inner {top:0; left:0; z-index:50; width:100%; height:60px; line-height:60px; overflow:hidden; background:#fff;} #mobile_header h1 { width:220px; padding-top:10px; text-align:center; margin:0 auto; } #mobile_header h1 img { width:100%; overflow:hidden;} #mobile_header .m_gnb li {list-style:none;} #mobile_header .m_gnb li a {display:block; top:0; width:100%; text-align:center; color:transparent;} #mobile_header .m_gnb li.category a i{float:left; position:absolute; width:20px; height:20px; line-height:20px; left:15px; top:20px; font-size:20px; color:#333;} #mobile_header .m_gnb li.home a i { float:left; position:absolute; width:20px; height:20px; line-height:20px; right:15px; top:20px; font-size:20px; color:#333; } #back_cover {position:absolute; display:none; left:0; top:0; width:100%; height:100%; top:0px; background:rgba(0,0,0,0.5); z-index:99998;} #sideMenu {display:inline; position:absolute; top:0; left:-250px; width:249px; height:100%; background-color:#fff; z-index:9999999;} #sideMenu .side_title{height:60px; line-height:60px; background-color:#111111; color:#fff; text-align:center; font-size:1.15em; cursor:pointer;} #sideMenu .navi_bg{ width:100%;} #sideMenu .nav { width:100%; margin:0 auto; padding:0; list-style: none; overflow:hidden; box-sizing:border-box;} #sideMenu .nav ul { width:100%; margin:0; padding:0;} #sideMenu .navi_set{ display:inline; margin:0; padding:10px 0 10px 0; text-align:center; } #sideMenu .navi_set > div {display:block; width:100%; height:40px; line-height:40px; border-bottom:1px solid #aaa; text-align:left; background-color:#fff; color:#333; text-indent:10px; cursor:pointer;} #sideMenu .navi_set > div a{display:block; width:100%;} #sideMenu .navi_set ul {display:none;} #sideMenu .navi_set ul li {list-style:none; border-bottom:1px solid #eee;} #sideMenu .navi_set ul li a{display:block; width:100%; height:30px; line-height:30px; text-align:left; font-size:0.9em; color:#333; cursor:pointer; text-indent:20px; background-color:#fff;} #sideMenu .navi_set ul li a:hover{color:#fff; background-color:#aaa; } #gnba {background-color:#666; text-align:center; padding:10px 0;} #gnba i{color:#fff; font-size:30px;} #gnba a { color:#fff; text-align:center; font-size:0.85em; padding:5px 10px; margin:0 2px; background:#b39f6c; border-radius:3px;} #gnba a:hover { background:#fff; color:#000; } /* 큰기기 PC 상단 */ #header_wrap { width:100%; min-width:1200px; overflow-x:hidden;} .wrap_box { position:relative; width:100%; max-width:1420px; margin:10px auto 0 auto; background:none; } #header { border-bottom: 4px solid #5c9ccf; position:absolute; top:0; left:0; width:100%; min-height:100px; background:url('/img/nav_bg.png') no-repeat center top; z-index:500 !important; box-shadow:10px 10px 40px -8px rgb(0 0 0 / 20%)} #header_wrap .header_on { border-bottom: 4px solid #5c9ccf;} #header h1 { position:absolute; display:block; line-height:70px; left:10px; transition: all .3s ease-in-out; background:none;} #header h1 a img{vertical-align:middle;} /*#lnb {position:relative; float:left; margin-left:380px; line-height:80px !important; background:none;}*/ #lnb {position:relative; margin:auto; line-height:80px !important; background:none; max-width: 900px; padding-left: 75px;} #lnb .lnb_wrap { position:relative; overflow:hidden; visibility:hidden; height:390px;} #lnb .lnb_wrap > ul > li { float:left; } #lnb .lnb_wrap > ul > li > a { display:block; width:100%; padding:0 37px; font-weight:500; color:#333; height:80px; line-height:80px; text-align:left; font-family:'S-CoreDream-5Medium'} #lnb .lnb_wrap > ul > li > a > span{display:block; background:#ff6600; width:0px; height:2px; margin:8px auto; transition: 0.5s all ease; -webkit-transition: 0.5s all ease; -moz-transition: 0.5s all ease; -ms-transition: 0.5s all ease; -o-transition: 0.5s all ease;} /*ffd979*/ #lnb .lnb_wrap > ul > li.current > a, #lnb .lnb_wrap > ul > li.actived > a { color:#ff6600; font-weight:600; border-bottom:0px solid rgba(255,255,255,1); transition: 0.5s all ease; -webkit-transition: 0.5s all ease; -moz-transition: 0.5s all ease; -ms-transition: 0.5s all ease; -o-transition: 0.5s all ease;} /*ffe792*/ #lnb .lnb_wrap > ul > li.current > a > span, #lnb .lnb_wrap > ul > li.actived > a > span{display:block; background:#ff6600; width:100%;}/*bar*/ #lnb .lnb_sub { margin-top:25px;text-align:left; margin-left: 25px;} #lnb .lnb_sub li a { background:url('/img/uldots.png') no-repeat 0px 15px; display:block; color:rgba(0,0,0,0.7); padding-left:10px; margin:0 0 2px 0; height:30px; line-height:30px; font-size:1.1em; letter-spacing:-1px; font-family: 'S-CoreDream-5Medium';} #lnb .lnb_sub li a:before { } #lnb .lnb_sub li a:hover { display:block; color:#ff6600; font-weight:600; } #gnb {float:right; right:0; position:absolute} #gnb a { color:#fff; text-align:center; font-size:0.9em; padding:0 20px 3px 20px; margin:0 1px; background:#b39f6c; }/*bar*/ #gnb .av { border-radius: 0 0 10px 10px;}/*bar*/ #gnb a:hover { background:#000; color:#ff6600; } #gnb a.btn2 { color:#000; text-align:center; font-size:0.85em; line-height:80px; padding:5px 10px; margin:0 1px; background:#fff; border-radius:50px;} #gnb a.btn2:hover { background:#000; color:#fff; } .jbMenu .header_in { transition: all .3s ease-in-out;} .jbFixed { min-height:auto !important;} .jbFixed .header_in { position:fixed !important; top:0px; width:100% !important; background:#fff url('/img/nav_bg.jpg') no-repeat center top; border-bottom:px solid #ddd; box-shadow:0px 0px 5px 0px} .jbFixed .header_in #lnb { margin-top:0;} .jbFixed .header_in #lnb .lnb_wrap > ul > li > a { height:80px; line-height:80px; color:#333;} .jbFixed .header_in #lnb .lnb_wrap > ul > li > a:hover { color:#ff6600;} .jbFixed .header_in #lnb .lnb_sub li a { display:block; color:#333; padding:0; margin:0 0 2px 0; height:30px; line-height:30px; letter-spacing:-1px;} .jbFixed .header_in #lnb .lnb_sub li a:hover { display:block; color:#ff6600; font-weight:600; } /*.jbFixed .header_in #gnb a { height:60px; line-height:60px !important;} .jbFixed .header_in #gnb a.btn2 { color:#000; text-align:center; font-size:0.85em; line-height:80px; padding:5px 10px; margin:0 1px; border-radius:50px;} .jbFixed .header_in #gnb a.btn2:hover { background:#555; color:#ff6600; } */ .jbFixed .header_in h1 img { transition: all .3s ease-in-out;} #container {position:relative; width:100%; margin:0; padding:0; z-index:1; background:#fff; margin-top:0px;} /* PC용 퀵메뉴 */ #backtotop{ position:fixed; bottom:35%; right:10px; z-index : 1000; display:none;} .q-menu nav div { width:50px; height:50px; line-height:50px; font-size:1.5em; text-align:center; background:rgba(0,0,0,0.5); margin:10px 0; border-radius:100px; transition: 0.5s all ease; -webkit-transition: 0.5s all ease; -moz-transition: 0.5s all ease; -ms-transition: 0.5s all ease; -o-transition: 0.5s all ease; } .q-menu nav div:hover {background:#c53528; /*rgba(0,0,0,0.9);*/} .q-menu nav div i { display:inline-block; vertical-align:top; text-align:center; width:100%; height:30px; line-height:30px; font-size:0.85em; } .q-menu nav div a { display: inline-block; position: relative; width: 30px; height: 30px; text-align: center; color:#fff; text-decoration:none; } .q-menu nav div a span {font-size:0.7em; display: inline-block; position: absolute; top: 20%; right: 70px; opacity: 0;/*화살전체위치*/ white-space: nowrap; padding: 5px 8px; border-radius: 3px 3px; background:#c53528; /*rgba(0,0,0,0.9);*/ color: #fff; margin-top:-2px; line-height: 1em; -webkit-transition: all 300ms; -moz-transition: all 300ms; -ms-transition: all 300ms; -o-transition: all 300ms; transition: all 300ms; } .q-menu nav a span:before {content: ''; display: block; position: absolute; right:-10px; top: 50%; margin-top:-5px; border:5px solid transparent; border-left-color:#c53528; /*rgba(0,0,0,0.9);*/ }/*화살모양*/ .q-menu nav a:after { position: absolute; content: ''; display: inline-block; width: 30px; height: 30px; margin-left: -5px; margin-top: -10px; top: 50%; left: 50%; } .q-menu nav a:hover { opacity: 1; } .q-menu nav a:hover span { right: 50px; opacity: 1; } .q-menu nav a.active { color: #333; opacity: 1; } /*hr.title_bar { margin-top: 20px; margin-bottom: 20px; border: 0; border-top: 3px solid #ddd; display:block; width: 30%; left: 0; margin: 5px 0;} 타이틀 밑줄*/ .bwadmin{ position:absolute; left:50%} /* 서브 */ #sub_visual{width:100%; height:281px; text-align:center; background:#e8e9eb; } .backgroundimg{position:relative; width:100%; text-align:center; margin:0 auto; height:281px; z-index:0; } .visual_area {width:100%; max-width:1920px; height:281px; margin:0 auto; } #sub_wrapper{width:100%; margin:0 auto; } #sub_wrapper:after{ content:""; display:block; clear:both;} #sub_menu{ display:block; width:100%; margin:0px auto; background:#fff; } /*메뉴가림*/ #sub_menu .sub_tab{width:100%; max-width:1200px; text-align:left; margin:0 auto; } @media all and (max-width:1300px){ #lnb {max-width:900px; padding-left: 100px;} } @media all and (max-width:1200px){ .scontents{width:96%;} #container {margin-top:0px;} } /* 반응형 중간기기 992px 사이즈 이하*/ @media all and (max-width:1250px){ #mobile_header{display:block; min-width:320px; } #header_wrap, #gnb_wrap, #gnb_area {display:none;} .lview{display:none;} .sview{display:block;} #main_visual .swiper-slide{width:100%; height:300px;} #main_visual .swiper-slide div.backgroundimg1{height:450px; } #main_visual .swiper-slide div.backgroundimg2{height:450px; } #main_visual .swiper-slide div.backgroundimg3{height:450px; } #main_visual .sliderkit-text {bottom:10%; text-align:center; border:0px solid red; background:rgba(255,255,255,0); padding:15px 0; } #main_visual .sliderkit-text h1.lviewa{font-size:1.4em;} #main_visual .sliderkit-text h1.sviewa{font-size:0.9em;} #main_visual .sliderkit-text h1 img{width:60%;} #main_visual .sliderkit-text span{padding:0 30px; font-size:0.7em;} #m_bnr { position:relative; top:0px; width:100%; min-width:320px;margin:0px auto; padding:0;} #m_bnr li {width:50%; border-bottom:0px solid #4e4e4e;} #m_bnr li:nth-child(1), #m_bnr li:nth-child(2){border-bottom:1px solid #4e4e4e;} #m_bnr2 {position:relative; top:0px; width:100%; margin:0 auto; border-bottom:none; } #m_bnr2 .con_box li { width:50%; border-bottom:1px solid #ddd;} #m_bnr2 .con_box li:last-child { border-right:none;} #main_about_100 .img_wrap{ width:100%;} #main_about_100 .txt_wrap{ width:100%; } #main_about_100 .txt_wrap .txt_cont{ position:relative; top:-50px; width:90%; height:auto; padding:25px; background:#fff; margin:0 auto;} #pro_wrap {padding:30px 0px; margin-top:0px;} #comm_wrap{margin:40px auto;} #comm_wrap .board_area{min-width:320px; height:100%;} #comm_wrap .board_area .dleft{ width:100%; margin-right:0px;} #comm_wrap .board_area .dcenter{ width:100%;} #comm_wrap .board_area .dright{width:100%; } #comm_wrap .board_area div.board_box{width:90%; margin:0px auto;} #comm_wrap .notice_area {width:100%; margin-top:20px;} #copy_bnr{height:auto;} #copy_bnr .copy_bnr_left {width:100%; height:auto; } #copy_bnr .copy_bnr_left .cs_area { width:100%; } #copy_bnr_2{height:auto;} #copy_bnr_2 .copy_bnr_left_2 {width:100%; height:auto; } #copy_bnr_2 .copy_bnr_left_2 .cs_area { width:100%; } #copy_bnr_2 .copy_bnr_left_3 {width:100%; height:auto; } #copy_bnr_2 .copy_bnr_left_3 .cs_area { width:100%; } #copy_bnr .copy_bnr_right { width:100%; height:auto; } #copy_bnr .copy_bnr_right .g_map {width:100%; } #footer{ min-width:320px; padding-bottom:30px; text-align:center;} #footer .copyright{width:100%; padding:0 30px; } #footer .copyright p{ text-align:center;} #backtotop{right:15px;} #sub_visual{margin-top:0px;} .sub_location > div .cen{ display:none;} .sub_location ul{width:50%;} .sub_location ul:first-child{border-left:0px; } .sub_location ul.dep2{border-right:0px;} .sub_location ul ul{width:100.8% !important;} #sub_tit { margin:0px auto; padding:0; left:0%; margin-left:0px; background:none;} #sub_tit .path { display:none; } #sub_tit .title{ font-size:2em; } #sub_tit .title:after{display:block; content:""; width:20%; height:3px; background:#fff; margin:10px auto; } #sub_tit .normal_txt{font-size:1.2em; color:#fff; text-transform:uppercase; text-align:center; line-height:1.6; word-break: keep-all; text-shadow: 0px 1px 4px #333; font-family: 'Noto Sans KR', sans-serif;} #sub_tit .normal_txt .color1{color:#fd7701;} } /* 반응형 중간기기 768사이즈 이하 */ @media screen and (max-width: 768px) { .mview{display:block;} #main_visual .swiper-slide div.backgroundimg1{height:450px; background:url('/theme/daontheme_business03/html/image/main_visual01_m.jpg') top center no-repeat !important;} #main_visual .swiper-slide div.backgroundimg2{height:450px; background:url('/theme/daontheme_business03/html/image/main_visual02_m.jpg') top center no-repeat !important;} #main_visual .swiper-slide div.backgroundimg3{height:450px; background:url('/theme/daontheme_business03/html/image/main_visual03_m.jpg') top center no-repeat !important;} .swiper-button-next, .swiper-button-prev{display:none !important;} #m_bnr li {width:25%; height:100%; background-image:none; border-bottom:0px;} #m_bnr li:nth-child(1), #m_bnr li:nth-child(2){border-bottom:0px;} #m_bnr li div { display:block; width:100%; height:30px;} #m_bnr li div i { width:100%; padding:0;} #m_bnr li .txt_tit {width:100%; height:auto; text-align:center; } #m_bnr li:hover {background-image:none; } #pro_tab .pro_list > ul > li{ display:inline-block; width:48%; margin:1%; padding-bottom:30px; border:1px solid #ddd; box-sizing:border-box; } #comm_wrap_basic > div{width:95%; padding:10px 0px; margin:0 auto; float:none;} #sub_tit .path { display:none;} .sub_location > div .cen{ display:none;} .sub_location ul{width:50%;} .sub_location ul:first-child{border-left:0px; } .sub_location ul.dep2{border-right:0px;} .sub_location ul ul{width:100.8% !important;} .scontents{padding:30px 0px;} .scontents .stitle { margin-bottom:30px; } .scontents .stitle-02 { margin-bottom:30px; } .scontents .stitle-03 { margin-bottom:30px; } #backtotop{display:none !important;} } /* 반응형 작은기기 480사이즈 이하 */ @media screen and (max-width: 480px) { body,td,h1,h2,h3,h4,h5,div,p,li,ul,ol,dd,dt,section,input,textarea,select,button{font-size:13px; } #m_bnr2 .con_box { height:200px; } #m_bnr2 .con_box li .hover_area p { display:none; } #main_about_100 .txt_wrap .txt_cont{ width:90%; height:auto; padding:20px 20px 50px 20px;} #main_about_100 .txt_wrap .txt_cont h2{ font-size:2.5em; font-weight:700; } #main_about_100 .txt_wrap .tit{font-size:1.5em; font-weight:400; } #main_about_100 .btn_more{margin:0 auto;} #pro_area .pro_tit span {font-size:1em; color:#777; padding:0 70px; } #pro_tab{margin:0;} #pro_tab .pro_list > ul > li{width:90%; margin:5%;} #pro_tab .tab { width:100%; /*height:40px; line-height:40px;*/} #pro_tab .tab a{/*height:40px; line-height:40px;*/} #pro_tab .tab li{width:50%; margin-right:0%; margin-left:0%; margin-bottom:0%; } #pro_tab .tab li:nth-child(1), #pro_tab .tab li:nth-child(2){border-bottom:1px solid #ddd;} #pro_tab .tab li:last-child {margin-left:0%; margin-right:0%;} #pro_tab .tab li.all { width:50%; margin-right:0%; margin-left:0%; margin-bottom:0%;} #online .online_con { width:100%; height:200px; background-size:100% 200px;} #online .online_con div.blind { width:100%; height:200px; } #online .online_area { padding:30px 0px 0px 0px;} #online .online_area p{ font-size:1.5em; } #online .online_area span{ padding-bottom:0px; font-size:1em;} #comm_wrap{margin:20px auto;} #comm_wrap .notice_area li a{display:block; width:75%;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;overflow:hidden; } #footer .copyright span{font-size:1em;} #footer .copyright p{font-size:0.8em;} #sub_visual{height:210px; } .backgroundimg{height:210px; } .visual_area {height:210px; background-position:center top; background-size:cover;} #sub_tit {top:15%; background:none; margin:30px auto;} #sub_tit .title{ font-size:2em; } #sub_tit .normal_txt{font-size:1em;} .scontents .eng { font-size: 2em; } .scontents .stitle { font-size:1em; } .scontents .stitle-02 { font-size:1em; } .scontents .stitle-03 { font-size:1em; } .g_map {width:100%; height:300px; overflow:hidden;} .q-menu{ display:none;} } /* 반응형 작은기기 360사이즈 이하 */ @media screen and (max-width: 360px) { } /* 반응형 게시판 관련 아래 소스는 그대로 두시는 편이 좋습니다. */ #bo_sch #sfl{width:30%;} #bo_sch .sch_input{width:55%; max-width:300px;} .select_bo_cate {width: 100%; margin:0 auto; padding:0; display: block; height: 40px; border: 1px solid #ddd; background: #fff; position: relative; text-align: left; box-sizing:border-box; margin-bottom:20px; z-index:99999;} .select_bo_cate a.sel {color: #333; height: 40px; line-height: 40px; width: 100%; display: block; background: url(/theme/daontheme_business03/img/select.gif) no-repeat top right; font-size: 1em; cursor: pointer; text-indent:15px;} .select_bo_cate a:hover { text-decoration: none; } .select_bo_cate ul{display:none; width:100%; margin:0; padding:0; background:#333; border:1px solid #333; margin-top:-1px;} .select_bo_cate ul li{width:100%; margin:0; padding:0; } .select_bo_cate li a {width:100%; margin:0; padding:0; list-style: none; display: block; height: 30px; line-height: 30px; font-size: 1em; color:#fff;text-indent:10px;} .mview{display:none;} /* 노인학대 신고방법 */ .section-title ~ .orange-box { margin-top: 95px; } .orange-box { position: relative; padding: 85px 50px 30px 50px; background: #f7f7f8; border-radius:5px;} .orange-box__round-title { display: flex; justify-content: center; position: absolute; top: -35px; left: 0; width: 100%;} .orange-box__round-title span { display: inline-flex; align-items: center; justify-content: center; ; line-height: 1; height: 70px; background: #b39f6c; border-radius:5px 5px 0 0; width:100%} .report-call-box { overflow: hidden; position: relative; margin-bottom: 30px; padding: 50px; background: #fff; } .report-call-box::before { content: ''; position: absolute; bottom: -15px; left: 30px; width: 131px; height: 131px; background: url('/child/img/sub/about/report/report-call-box-symbol.png') no-repeat center; } .report-call-box .flex { display: flex; align-items: flex-end; justify-content: center; z-index: 2; position: relative; } .report-call-box .flex span { display: block; line-height: 1; } .report-call-box .flex span:nth-child(2) { margin: 0 5px 0 25px; line-height: 0.8; } .report-tel { display: flex; align-items: center; justify-content: space-between; } .report-tel > div { display: inline-flex; align-items: center; justify-content: space-between; padding: 0 30px; text-align: center; border-right: 1px solid #ddd; } .report-tel > div:last-child { border-right: none; } .report-tel > div strong { display: block; margin-top: -5px; margin-bottom: -5px; } .report-tel > div p { width: 100%; } .q-box { margin: 20px 0 50px; text-align: center; border: 1px solid #666; } .q-box__title { display: block; position: relative; margin-bottom: 5px; padding: 18px 24px 18px 54px; text-align: left; color: #fff; background: #666 url('/child/img/sub/about/report/q-mark.png') no-repeat left 24px center; } .q-box .p-wrap { display: block; padding: 22px 50px 24px; } .q-box .p-wrap p { line-height: 1.8; text-align: left; } .border-grey-box-ul { margin-left: -15px; width: calc(100% + 30px); } .border-grey-box-ul > li { padding: 10px 15px; } .border-grey-box { padding: 25px; height: 100%; border: 4px solid #f2f2f2; } .border-grey-box__title { display: block; margin-bottom: 10px; line-height: 1; } .border-grey-box__p { line-height: 1.5; } .border-grey-box h5 { margin: 20px 0 25px; line-height: 1; } .border-grey-box p { margin-top: 10px; } .border-grey-box ul { margin-top: 20px; } .border-grey-box ul li { margin: 10px 0; } .border-grey-box .ul-dot li::before { top: 14px; } @media (max-width:1024px){ .orange-box { padding: 65px 50px 30px; } .orange-box__round-title span { height: 60px; } .report-call-box { padding: 40px; } } @media (max-width:768px){ .orange-box { padding: 50px 15px 30px; } .orange-box__round-title { margin-top: -9px; } .orange-box__round-title span { height: 45px; } .report-call-box { padding: 30px; } .report-call-box .flex { flex-direction: column; align-items: center; } .report-call-box .flex span:nth-child(2) { margin: 15px 0; } .report-call-box::before { left: 2%; bottom: -10px; width: 70px; height: 70px; background-size: auto 70px; } .report-tel { flex-direction: column; align-items: center; } .report-tel > div { padding: 10px 0; border-right: none; } .q-box { margin: 25px 0 35px; } .q-box .p-wrap p { line-height: 1.6; } } @media all and (max-width:1160px){ #bo_sch #sfl{width:17%;} #bo_sch .sch_input{width:65%;} } @media all and (max-width:992px){ #bo_sch{width:100%;} .mview{display:none;} /*#bo_cate_ul li{width:15%; min-width:100px;}*/ #bo_cate a{padding:0 10px;} } @media all and (max-width:768px){ .snone{display:none;} #bo_gall .gall_box{margin:0 0 20px 0} .gall_row .col-gn-3, .gall_row .col-gn-4, .gall_row .col-gn-5{width:50%;} .gall_row .box_clear{clear:none;} .gall_text_href{font-size:0.9em;} #bo_v_con iframe{width:100%; height:auto; min-height:450px;} .mnone{display:none;} .mview{display:block;} .bo_w_info1{width:100% !important; margin-top:10px;} #bo_sch .sch_input{width:60%;} #sch_res_detail{padding:10px;} #sch_res_detail select{width:100%; margin-bottom:5px;} #sch_res_detail .frm_input{width:100%;} #sch_res_detail .btn_submit{position:absolute; float:right; right:0; margin-top:-40px;} #faq_sch{padding:10px 0;} #faq_sch .frm_input{width:100%;} #faq_sch .btn_submit{position:absolute; float:right; right:0; margin-top:-40px;} #bo_w .bo_w_info .frm_input{width:100%; margin-top: 10px;} #bo_w #wr_password{margin-left:0px; margin-top:10px;} #bo_gall .gall_webzine .gall_img{width:100%; float:none; margin:0 auto;} #bo_gall .gall_webzine .gall_text_href{width:100%; float:none; margin:0 auto; margin-top:10px;} .bo_g{width:100%;} .bo_t{width:100%; margin-top:20px;} #bo_w .bo_w_mail{width:100%;} #bo_w .bo_w_hp{width:100%;} #register_form{padding:10px;} .form_01 li input[type=text]{width:100%;} .form_01 li .half_input{float:left; width:100%;} .form_01 li .right_input{margin-top:10px;} #reg_mb_zip{width:150px;} } @media screen and (max-width: 480px) { a.btn i,.btn i{display:none;} #bo_sch #sfl{width:20%;} /*#bo_sch .sch_input{width:55% !important;}*/ #bo_cate li{min-width:auto;} #bo_cate a {padding:0px 10px;} #bo_v_con iframe{min-height:300px;} .mbskin{width:100%;} #bo_v_share .btn{padding:0 10px;} #bo_v_title .bo_v_tit {font-size:1.3em;} #bo_gall .gall_info .gall_date{ position:relative; display:inline-block; padding:0; margin:0px; border:0px solid red; bottom:0px; right:0;} .border-grey-box { padding: 10px; } .btn_m{height:30px;line-height:30px;border-radius:30px;padding: 0 7px} } /*----------------------------------------------------------------------------------------------------------- 후원 -----------------------------------------------------------------------------------------------------------*/ /* 절차, 단계 */ .stepCon{position:relative;overflow:hidden;z-index:2} .stepCon ol::after{display:block;clear:both;content:''} .stepCon ol{width:100%;text-align:center; } .stepCon ol > li{position:relative;float:left;padding-right:50px;text-align:center;} .stepCon ol > li:after{position:absolute;top:50%;right:10px;width:21px;height:36px;content:'';background:url('/img/mobile/arrow_right.png') no-repeat;} .stepCon ol > .li2:after{top:82px;} .stepCon ol > .li9:after{top:90px;} .stepCon ol.step1 > li > div{position:relative; min-height:100px;color:#333;background:#fff;z-index:2} .stepCon ol > li > div span{display:block;} .stepCon ol > li > div p{font-size: 0.8em; font-weight: normal; letter-spacing: -1px; margin-bottom:0;} .stepCon ol > li > div .num{position:relative;padding-bottom:12px;color:#656565; font-size:13px; height:25px; box-sizing:border-box} .stepCon ol > li > div .tit{font-size:16px;line-height:22px;font-weight:bold;word-break: keep-all; padding:15px 0; border:5px solid #a5c9ef; border-radius:50px} .stepCon ol > li > div .tit2{font-size:16px;line-height:22px;font-weight:bold;word-break: keep-all; padding:15px 0; border:5px solid #d7e1f2; border-radius:50px} .stepCon ol > li > ul > li{width:100%;font-size:14px} .stepCon ol > li:last-child:after{display:none; background:none} .stepCon ol > li:last-child div .tit{color:#fff;background:#85a9cf;border:5px solid #85a9cf} .stepCon ol > li.w10 { width:10%} .stepCon ol > li.w9 { width:11%} .stepCon ol > li.w8 { width:12.5%} .stepCon ol > li.w7 { width:14.2%} .stepCon ol > li.w6 { width:16.6%} .stepCon ol > li.w5 { width:20%} .stepCon ol > li.w4 { width:25%} .stepCon ol > li.w3 { width:33%} .stepCon ol > li.w2 { width:50%} /*후원 타이틀*/ .sup_title {margin:auto; background: url('/img/mobile/sup_bg.png') no-repeat; width:927px; height:150px; padding-top:10px; font-size: 54px; } .sup_title .titlel { padding-left:120px; font-weight: 500; font-family: 'TTJejuGamgyulR'; letter-spacing: -1px; text-shadow: 2px 2px 2px #fff;} .sup_title .titler { padding-left:230px; font-weight: 500; font-family: 'TTJejuGamgyulR'; letter-spacing: -1px; text-shadow: 2px 2px 2px #fff;} /* 모바일 해상도 */ @media all and (max-width:980px) { .stepCon ol { padding:0; margin:0;} .stepCon ol > li{margin:3px 0;padding-right:30px;} .stepCon ol > li:after{top:60px; right:0px;} .stepCon ol.step1 > li > div{min-height:80px;} .stepCon ol > li > div .tit {padding:12px 0;} .stepCon ol > li > div .tit2{padding:5px 0;} .stepCon ol > li.w10 { width:12.5%} .stepCon ol > li.w9 { width:14.2%} .stepCon ol > li.w8 { width:16.6%} .stepCon ol > li.w7 { width:20%} .stepCon ol > li.w6 { width:25%} .stepCon ol > li.w5 { width:33%} .stepCon ol > li.w4 { width:50%} .stepCon ol > li.w3 { width:50%} /*후원 타이틀*/ .sup_title { padding-top:18px} .sup_title .titlel { padding-left:100px; } .sup_title .titler { padding-left:140px;} } /* 모바일 해상도 */ @media all and (max-width:640px) { .stepCon ol { padding:0; margin:0;} .stepCon ol > li{margin:3px 0;padding-right:30px;} .stepCon ol > li:after{top:60px; right:0px;} .stepCon ol.step1 > li > div{min-height:80px;} .stepCon ol > li > div .tit {padding:9px 0;} .stepCon ol > li > div .tit2{padding:5px 0;} .stepCon ol > li.w10 { width:20%} /*122*/ .stepCon ol > li.w9 { width:25%} /*136*/ .stepCon ol > li.w8 { width:25%} /*153*/ .stepCon ol > li.w7 { width:33%} /*175*/ .stepCon ol > li.w6 { width:33%} /*203*/ .stepCon ol > li.w5 { width:50%} /*244*/ .stepCon ol > li.w4 { width:50%} /*305*/ .stepCon ol > li.w3 { width:100%} /*406*/ .sup_title { height:120px; } .sup_title .titlel { padding-left:100px; font-size: 40px;} .sup_title .titler { padding-left:100px; font-size: 40px;} } @media all and (max-width:480px) { .sup_title { height:110px; } .sup_title .titlel { padding-left:80px; font-size: 37px;} .sup_title .titler { padding-left:80px; font-size: 37px;} } /* 모바일 해상도 */ @media all and (max-width:360px) { .stepCon ol { padding:0; margin:0;} .stepCon ol > li{margin:3px 0;padding-right:30px;} .stepCon ol > li:after{top:60px; right:0px;} .stepCon ol.step1 > li > div{min-height:80px;} .stepCon ol > li > div .tit {padding:6px 0;} .stepCon ol > li > div .tit2{padding:5px 0;} .stepCon ol > li.w10 { width:33%} /*122*/ .stepCon ol > li.w9 { width:33%} /*136*/ .stepCon ol > li.w8 { width:50%} /*153*/ .stepCon ol > li.w7 { width:50%} /*175*/ .stepCon ol > li.w6 { width:50%} /*203*/ .stepCon ol > li.w5 { width:100%} /*244*/ .stepCon ol > li.w4 { width:100%} /*305*/ .sup_title { height:100px; } .sup_title .titlel { padding-left:80px; font-size: 32px;} .sup_title .titler { padding-left:80px; font-size: 32px;} }