@charset "utf-8"; #container{clear:both; position:relative; width:100%; padding:0; margin:0 auto; padding-top:144px;} #container:after{content:""; display:block; height:0; clear:both; visibility:hidden;} #container .sub_visual{clear:both; position:relative; width:100%; height:194px; text-align:center; background:url('../images/mn_vis.jpg') no-repeat center -210px;} @media all and (max-width:1280px){ #container{padding-top:79px;} } #container .sub_visual .cnt_sns{position:absolute; right:0; top:0; margin-right:10%; margin-top:135px;} #container .sub_visual .cnt_sns a{display:inline-block; width:31px; height:31px; padding:0 1px; vertical-align:top; text-indent:-99999em;} #container .sub_visual .cnt_sns a.face{background:url('../images/sb_snb_sns_01.png') no-repeat 0 0; vertical-align:top;} #container .sub_visual .cnt_sns a:hover.face{background:url('../images/sb_snb_sns_01_on.png') no-repeat 0 0; vertical-align:top;} #container .sub_visual .cnt_sns a.tw{background:url('../images/sb_snb_sns_02.png') no-repeat 0 0; vertical-align:top;} #container .sub_visual .cnt_sns a:hover.tw{background:url('../images/sb_snb_sns_02_on.png') no-repeat 0 0; vertical-align:top;} #container .sub_visual .cnt_sns a.blog{background:url('../images/sb_snb_sns_03.png') no-repeat 0 0; vertical-align:top;} #container .sub_visual .cnt_sns a:hover.blog{background:url('../images/sb_snb_sns_03_on.png') no-repeat 0 0; vertical-align:top;} #container .sub_visual .cnt_sns a.kakao{background:url('../images/sb_snb_sns_04.png') no-repeat 0 0; vertical-align:top;} #container .sub_visual .cnt_sns a:hover.kakao{background:url('../images/sb_snb_sns_04_on.png') no-repeat 0 0; vertical-align:top;} #container .sub_visual .cnt_sns a.url{background:url('../images/sb_snb_sns_05.png') no-repeat 0 0; vertical-align:top;} #container .sub_visual .cnt_sns a:hover.url{background:url('../images/sb_snb_sns_05_on.png') no-repeat 0 0; vertical-align:top;} #container .sub_visual .cnt_sns a.print{background:url('../images/sb_snb_sns_06.png') no-repeat 0 0; vertical-align:top; padding-right:0;} #container .sub_visual .cnt_sns a:hover.print{background:url('../images/sb_snb_sns_06_on.png') no-repeat 0 0; vertical-align:top; padding-right:0;} #container .sub_visual .subvisual_inner{width:80%; margin:0 auto;} #container .sub_visual .subvisual_inner h2{text-align:center; padding-top:66px; color:#fff; font-size:52px; font-weight:500; letter-spacing:-1; text-shadow: 0 1px 5px rgb(0 0 0 / 50%);} #container .sub_visual .subvisual_inner .sub_location{position:relative; margin-top:49px;} #container .sub_visual .subvisual_inner .sub_location li{display:inline-block; font-size:15px; padding-left:20px; color:#fff; text-shadow: 0 1px 5px rgb(0 0 0 / 50%); background:url('../images/sb_location_home.png') no-repeat 0 3px;} #container .sub_visual .subvisual_inner .sub_location li:first-child{text-indent:-99999em; } #container .sub_visual .subvisual_inner .sub_location li+li{display:inline-block; font-size:15px; padding-left:28px; color:#fff; text-shadow: 0 1px 5px rgb(0 0 0 / 50%); background:url('../images/sb_location_arrow.png') no-repeat 6px 5px;} #container .sub_visual .subvisual_inner .sub_location li+li+li{display:inline-block; font-size:15px; padding-left:28px; color:#fff; text-shadow: 0 1px 5px rgb(0 0 0 / 50%); font-weight:bold; background:url('../images/sb_location_arrow.png') no-repeat 9px 5px;} /*#container .sub_visual .subvisual_inner .sub_location{ padding:33px 0 0 0; text-align:center; } #container .sub_visual .subvisual_inner .sub_location li{display:inline-block; position:relative; overflow:hidden; font-size:14px; font-size:15px; color:#fff; padding:0 7px 0 9px; line-height:180%; font-weight:400;} #container .sub_visual .subvisual_inner .sub_location li:first-child{text-indent:-99999em; background:url('../images/sb_location_home.png') no-repeat left 5px;} #container .sub_visual .subvisual_inner .sub_location li:after{content:""; display:block; position:absolute; left:-2px; top:0; width:7px; height:20px; background:url('../images/sb_location_arrow.png') no-repeat 0 9px;} #container .sub_visual .subvisual_inner .sub_location li:last-child{font-weight:600;} */ #container .cnti{clear:both; position:relative; width:100%; background:#FFF;} #container .cnti:after{content:""; display:block; height:0; clear:both; visibility:hidden;} #container .cnti .cnti_inner{position:relative; width:80%; height:100%; margin:0 auto;} .snb{position:absolute; width:232px; height:146; top:-50px;} .snb h3{width:232px; height:52px; font-size:24px; font-weight:500; padding-top:100px; color:#fff; text-align:center; background:url('../images/sb_bg_00.png') no-repeat center 31px #2976cc;} .snb dl{position:relative; padding-top:5px;} .snb dl dd > ul{list-style:none; margin:0; padding:0;} .snb dl dd > ul > li{position:relative; text-align:left;} .snb dl dd > ul > li img{padding-left:3px; padding-bottom:3px; vertical-align:middle;} .snb dl dd > ul > li > a{display:block; height:29px; padding:13px 0 6px 20px; font-size:16px; font-weight:500; border-bottom:1px solid #caccd4; border-left:1px solid #caccd4; border-right:1px solid #caccd4; color:#4a506b; } .snb dl dd > ul > li:first-child > a{border-top:1px solid #caccd4;} .snb dl dd > ul > li.Ov > a, .snb dl dd > ul > li > a:hover{height:29px; padding:13px 0 6px 20px; color:#008adf; text-decoration:none; background:url('../images/sb_snb_arrow_on.jpg') no-repeat 206px 19px; border:1px solid #008adf; margin-top:-1px;} .snb dl dd > ul > li:first-child.Ov > a, .snb dl dd > ul > li:first-child > a:hover{margin-top:0;} .snb dl dd > ul > li > div.smenu_w{background:#f4f5f9; padding:15px 0 10px 0; border-bottom:1px solid #caccd4; border-left:1px solid #caccd4; border-right:1px solid #caccd4;} .snb dl dd > ul > li > div.smenu_w a{color:#000;} .snb dl dd > ul > li > div.smenu_w > ul{list-style:none; margin:0; padding:0 0 0 16px;} .snb dl dd > ul > li > div.smenu_w > ul > li{padding:4px 9px 4px 0;} .snb dl dd > ul > li > div.smenu_w > ul > li.Ov{padding:4px 9px 4px 0;} .snb dl dd > ul > li > div.smenu_w > ul > li > a{background:url('/images/sb_snb_02_off.jpg') no-repeat left 14px; font-size:15px; font-weight:500; padding:4px 9px 4px 13px;} .snb dl dd > ul > li > div.smenu_w > ul > li > a:hover, .snb dl dd > ul > li > div.smenu_w > ul > li.Ov > a{color:#008adf; text-decoration:none; font-weight:600; background:url('/images/sb_snb_02_on.jpg') no-repeat left 14px; padding:4px 9px 4px 13px;} #content{float:right; width:calc(100% - 296px); padding:30px 0;} #content .substance{clear:both; position:relative; width:100%; height:100%; min-height:400px; font-size:16px; text-align:left; line-height:22px;} @media all and (max-width:480px){ #content .substance{font-size:1.0rem; word-break:break-all;} } #content .substance .page_content{clear:both; padding-top:50px;} #content .substance .page_content h5{clear:both; display:block; font-size:2rem; font-weight:600; color:#008adf; letter-spacing:-0.1rem; padding:1.3rem 0;} #content .substance .page_content h6{position:relative; display:block; color:#4a506b; margin-top:30px; padding:10px 0 10px 0; font-size:1.6rem; font-weight:600;} #content .substance .page_content h7{position:relative; display:block; color:#4a506b; padding:10px 0 10px 16px; margin-left:2px; font-size:1.2rem; font-weight:600; background:url('../images/depth02_dot.png') no-repeat 0 15px;} @media all and (max-width:1480px){ #container .sub_visual .subvisual_inner{width:calc(100% - 6vw)} #container .sub_visual .cnt_sns{margin-right:3%;} #container .cnti .cnti_inner{width:calc(100% - 6vw);} } @media all and (max-width:1280px){ #container .sub_visual .subvisual_inner h2{text-align:left;} #container .sub_visual .subvisual_inner .sub_location{text-align:left;} .snb{display:none;} #content{float:none; width:100%;} #content .substance .page_content{padding-top:0;} } @media all and (max-width:768px){ #container .sub_visual .subvisual_inner h2{text-align:center; padding-top:46px; font-size:2.0rem;} #container .sub_visual .subvisual_inner .sub_location{text-align:center; margin-top:19px;} #container .sub_visual .subvisual_inner .sub_location li{font-size:1.0rem; } #container .sub_visual .subvisual_inner .sub_location li+li{font-size:1.0rem;} #container .sub_visual .subvisual_inner .sub_location li+li+li{font-size:1.0rem;} #container .sub_visual .cnt_sns{position:relative; margin-right:0; margin-top:13px;} } input.bdCmBtn{display:inline-block; font-size:16px; height:30px; padding:5px 10px 7px 10px; color:#424242; border:1px solid #114291; background-color:#fff; font-weight:bold;} input.bdCmBtn:hover {background:#114291; color:#fff; font-weight:bold;text-decoration: none} a.bdCmBtn span{display:inline-block; font-size:16px; height:23px; padding:5px 10px 7px 10px; background:#114291; color:#fff; border:1px solid #114291;} /**/ .text_left{text-align:left !important;} .text_right{text-align:right !important;} .text_600{font-weight:600;} .text_green{color:#00b4cb;} .text_gray{color:#CCC;} .text_red{color:#ff4200;} .text_blue{color:#2a76cc;} .text_20{font-size:20px; letter-spacing:-1px;} .text_28{font-size:28px; letter-spacing:-1px;} .text_bold{font-weight:600;} .text_height200{line-height:200%;} .text_height180{line-height:180%;} .float_r{float:right;} .caution{background:url('/images/sb_caution_bg.png') no-repeat left 5px; font-size:15px; font-weight:normal; line-height:180%; padding:0 0 5px 22px !important; margin:5px 0 !important;} @media all and (max-width:480px){ .caution{font-size:1.0rem; line-height:150%;} } .pad_l12{padding-left:12px;} .pad_t10{padding-top:10px;} .pad_t20{padding-top:20px;} .pad_t30{padding-top:30px;} .pad_t40{padding-top:40px;} .pad_b40{padding-bottom:40px;} .pad_b30{padding-bottom:30px;} .pad_b20{padding-bottom:20px;} .pad_b10{padding-bottom:10px;} .mar_t60{margin-top:60px;} .mar_b40{margin-bottom:40px;} .mar_left10{margin-left:10px;} .mar_left40{margin-left:40px;} .mar_top10{margin-top:10px;} strong{font-weight:700;} .list_snone{list-style:none;} .line_solid {clear:both;display:block;margin:20px 0;border-bottom:1px solid #dadada;} .line_dashed{clear:both;display:block;margin:20px 0;border-bottom:1px dashed #dadada;} .line_dotted{clear:both;display:block;margin:20px 0;border-bottom:1px dotted #dadada;} .line_double{clear:both;display:block;margin:20px 0;border-bottom:3px double #eaeaea;} .line_solid_t2{clear:both;display:block;margin-bottom:20px;border-top:2px solid #667484;} .line_solid_b2{clear:both;display:block;border-bottom:2px solid #667484;} .line_solid_b1{clear:both;display:block;margin:20px 0;border-bottom:1px solid #667484;} .unline a{text-decoration:none;} .unline a:hover{text-decoration:underline;} .cir {position:relative; width:8.6rem; height:8.6rem; border-radius:50%; background-color:#F6F6F6; margin:0 auto 2rem;} .cir > img, .cir > .img {position:absolute; top:40%; left:50%; transform:translate(-40%, -50%); -webkit-transform:translate(-40%, -50%);} /* tab */ .tab_txt{margin-bottom:33px; clear:both;} .tab_txt:after{content:" "; display:block; float:none; clear:both;} .tab_txt ul{display:table; width:100%; overflow:hidden;text-align:center; border-top:1px solid #dde0e8; border-left:1px solid #dde0e8;} .tab_txt ul li{display:table-cell; min-width:16.6666%; word-break:break-all;} .tab_txt a{display:block; padding:14px 15px 12px 15px; color:#8f98a4; font-size:15px; letter-spacing:-1px; background-color:#fff; text-decoration:none; border-right:1px solid #dde0e8; border-left:1px solid #f5f6fa; border-top:1px solid #f5f6fa; border-bottom:1px solid #dde0e8;} .tab_txt ul li:first-child a{border-left-width:1px;} .tab_txt ul li a:hover{color:#008adf; border-color:#3c55b0; border-left-width:1px;} .tab_txt ul li a.on{background-color:#3c55b0; border-color:#114291; color:#fff; text-decoration:none;} @media all and (max-width:982px){ .tab_txt a{ height:37px; padding-top:15px;} } @media all and (max-width:637px){ .tab_txt a { padding:15px 0px;} } @media all and (max-width:451px){ .tab_txt a { padding:15px 0px; height:38px; font-size:14px; letter-spacing:-1px;} } @media all and (max-width:392px){ .tab_txt a { height:55px;} } /* tab */ .tab_txt6:after, .tab_list6:after {content:" "; display:block; float:none; clear:both;} .tab_txt6{margin-bottom:33px; clear:both;} .tab_txt6 ul{width:100%; overflow:hidden; text-align:center; border-top:1px solid #dde0e8; border-left:1px solid #dde0e8;} .tab_txt6 li{float:left; width:calc(100%/6);} .tab_txt6 a{display:block; padding:14px 15px 12px 15px; color:#8f98a4; font-size:15px; letter-spacing:-1px; background-color:#fff; text-decoration:none; border-right:1px solid #dde0e8; border-left:1px solid #f5f6fa; border-top:1px solid #f5f6fa; border-bottom:1px solid #dde0e8;} .tab_txt6 li:first-child a{border-left-width:1px;} .tab_txt6 li a:hover{color:#008adf; border-color:#3c55b0; border-left-width:1px;} .tab_txt6 li a.on{background-color:#3c55b0; border-color:#114291; color:#fff; text-decoration:none;} @media all and (max-width:1628px){ .tab_txt6 ul li{width:20%;} } @media all and (max-width:870px){ .tab_txt6 ul li{width:25%;} } @media all and (max-width:700px){ .tab_txt6 ul li{width:33.2%;} } @media all and (max-width:531px){ .tab_txt6 ul li{width:49.9%;} } /*작은 네모 블릿 리스트*/ #content .substance .list_01{ margin:0 0 10px 15px;} #content .substance .list_01 > li{clear:both; position:relative; padding: 4px 0 4px 12px; font-size:15px; line-height:180%; font-weight:400;} #content .substance .list_01 > li:before{content:""; display:block; position:absolute; left:2px; top:15px; width:4px; height:4px; border-radius:50%; background:#158ccd;} #content .substance .list_01 > li .list_01_01{margin:6px 0; padding:0;} #content .substance .list_01 > li .list_01_01 > li{position:relative; padding: 3px 0 3px 13px; font-size:15px; line-height:180%; font-weight:400;} #content .substance .list_01 > li .list_01_01 > li:before{content:""; display:block; position:absolute; left:1px; top:17px; width:6px; height:1px; background:#333;} #content .substance .list_01 > li .list_01_01 > li .list_01_01_01 > li{position:relative; padding: 3px 0 3px 13px; font-size:15px; line-height:180%; font-weight:400;} #content .substance .list_01 > li .list_01_01 > li .list_01_01_01 > li:before{content:""; display:block; position:absolute; left:2px; top:17px; width:2px; height:2px; background:#999;} #content .substance .list_01 > li .list_01_none{margin:6px 0; padding:0;} #content .substance .list_01 > li .list_01_none > li{position:relative; padding: 3px 0 3px 0; font-size:15px;} #content .substance .list_01 > li .list_01_01_pic{ clear:both; position:relative; padding:0; text-align:left;} #content .substance .list_01 > li .list_01_01_pic > p{ float:left; width:25%; margin-bottom:30px;} #content .substance .list_01 > li .list_01_01_pic li{margin-left:25%;} @media all and (max-width:911px){ #content .substance .list_01 .list_01_01_pic > p{width:30%;} } @media all and (max-width:743px){ #content .substance .list_01 .list_01_01_pic > p{ width:40%;} } @media all and (max-width:580px){ #content .substance .list_01 .list_01_01_pic > p{ width:100%; margin-bottom:15px;} #content .substance .list_01 .list_01_01_pic li{margin-left:0;} } @media all and (max-width:480px){ #content .substance .list_01{ margin-left:5px;} #content .substance .list_01.tbl{margin:0;} #content .substance .list_01 > li{padding:2px 0 8px 12px; font-size:1.0rem; line-height:150%;} #content .substance .list_01 > li img{width:100%;} #content .substance .list_01 > li:before{top:10px;} #content .substance .list_01 > li .list_01_01 > li{padding:3px 0 3px 13px; font-size:1.0rem; line-height:150%;} #content .substance .list_01 > li .list_01_01 > li.tbl{padding:0;} #content .substance .list_01 > li .list_01_01 > li:before{top:15px;} #content .substance .list_01 > li .list_01_01 > li .list_01_01_01 > li{padding:3px 0 3px 7px; font-size:1.0rem; line-height:150%;} #content .substance .list_01 > li .list_01_01 > li .list_01_01_01 > li.tbl{padding:0;} #content .substance .list_01 > li .list_01_01 > li .list_01_01_01 > li:before{top:12px;} } /*작은 네모 블릿 리스트*/ #content .substance .list_02{margin:10px 0 10px 0;} #content .substance .list_02 > li{position:relative; padding: 4px 0 20px 22px; font-size:17px; font-weight:500; background:url('../images/depth02_dot.png') no-repeat 0 7px;} #content .substance .list_02 > li.number{ padding-left:15px; background:none;} #content .substance .list_02 > li .list_02_01{margin:6px 0; padding:0;} #content .substance .list_02 > li .list_02_01 > li{position:relative; padding: 3px 0 3px 13px; font-size:15px; font-weight:400; line-height:170%;} #content .substance .list_02 > li .list_02_01 > li:before{content:""; display:block; position:absolute; left:2px; top:15px; width:3px; height:3px; background:#00a5e5;} #content .substance .list_02 > li .list_02_01 > li .list_02_01_01{margin:6px 0; padding:0;} #content .substance .list_01 > li .list_02_01 > li .list_02_01_01 > li{position:relative; padding:3px 0 3px 13px; font-size:15px; line-height:180%;} #content .substance .list_01 > li .list_02_01 > li .list_02_01_01 > li:before{content:""; display:block; position:absolute; left:1px; top:13px; width:6px; height:1px; background:#333;} #content .substance .list_01 > li .list_02_01 > li .list_02_01_01 > li .list_02_01_01_01{position:relative; padding:3px 0 3px 13px; font-size:65px; line-height:180%; border:1px solid #F00;} @media all and (max-width:740px){ #content .substance .list_02 > li img{ width:100%;} } /* btn */ a.btn_d {-webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out;-o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; text-decoration:none;} .btn_d {display:inline-block; *zoom:1; cursor:pointer; white-space:nowrap; text-align:center; vertical-align:middle; line-height:1.4; border-style:solid; border-width:1px; padding:5px 10px; margin:0 0 3px 0;} button.btn_d, input[type="submit"], input[type="button"]{cursor:pointer;} .btn_d.btn_small {font-size:15px; padding:10px 12px; color:#fff; border-color:#158ccd; background-color:#158ccd; font-weight:bold;} .btn_d.btn_small:hover {background:#158ccd; color:#fff; font-weight:bold;} .btn_d.btn_small.cancel {font-size:15px; padding:10px 12px; color:#fff; border-color:#8e8e8e; background-color:#8e8e8e; font-weight:bold;} .btn_d.btn_xsmall {font-size:13px; padding:5px 19px; color:#158ccd; border-color:#158ccd; background-color:#fff; font-weight:bold;} .btn_d.btn_xsmall:hover {background:#158ccd; color:#fff; font-weight:bold;} .btn_d.btn_xxsmall {font-size:13px; padding:2px 5px; color:#158ccd; border-color:#158ccd; background-color:#fff; font-weight:bold; vertical-align:middle;} .btn_d.btn_xxsmall:hover {background:#158ccd; color:#fff; font-weight:bold;} .btn_d.disabled{color:#fff; background:#ddd; border-color:#ddd;} .btn_d.disabled:hover {background:#ddd; color:#fff; border-color:#ddd;} /* tab */ .tbl_area{position:relative; clear:both; word-break:break-all !important;} .tbl_area .table_tip{position:absolute; right:0; top:-25px; color:#666; font-size:14px; font-weight:normal;} /* table */ .tbl_gray1{border-collapse:separate; border-top:2px solid #7a7d96; margin-left:-1px; width:100%;} .tbl_gray1 thead th {background:#f4f5f9; font-size:15px; padding:15px 10px; border-left:1px solid #dde0e8; border-bottom:1px solid #dde0e8; text-align:center; font-weight:bold;} .tbl_gray1 thead th:first-child{border-left:none;} .tbl_gray1 thead th.le_bo_none, .tbl_gray1 tbody th.le_bo_none, .tbl_gray1 thead td.le_bo_none, .tbl_gray1 tbody td.le_bo_none{border-left:none;} .tbl_gray1 thead th.le_bo, .tbl_gray1 tbody th.le_bo, .tbl_gray1 thead td.le_bo, .tbl_gray1 tbody td.le_bo{border-left:1px solid #dde0e8 !important;} .tbl_gray1 tbody th {background:#fbfcfd; font-size:15px; font-weight:bold;} .tbl_gray1 tbody th {text-align:left;} .tbl_gray1 tbody th:first-child, .tbl_gray1 tbody td:first-child{border-left:none;} .tbl_gray1 tbody td, .tbl_gray1 tfoot td {background:#fff; font-size:15px; } .tbl_gray1 tbody th, .tbl_gray1 tbody td, .tbl_gray1 tfoot th, .tbl_gray1 tfoot td { border-left:1px solid #dde0e8; border-bottom:1px solid #dde0e8; text-align:center; padding:10px;/* word-break:break-all;*/} .tbl_gray1 tbody td.tbltext_le{ text-align:left;} @media all and (max-width:480px){ .tbl_area .table_tip{font-size:0.9rem;} .btn_d.btn_small {font-size:1.0rem;} } @media all and (max-width:480px){ .tbl_gray1 thead th {padding:10px 6px; font-size:1.0rem;} .tbl_gray1 tbody th, .tbl_gray1 tbody td {font-size:1.0rem; letter-spacing:-1;} } /* table */ .table_unit{text-align:right;} .table_unit span{position:relative; padding-left:32px; font-size:16px; line-height:24px; color:#292929; letter-spacing:-0.025em;} .table_unit i{position:absolute; top:2px; left:0; width:20px; height:20px; border-radius:7px; background-color:#fff; text-align:center; font-size:14px; line-height:20px; color:#4688e3; box-shadow:0 0 12px 0 rgba(139, 186, 234, 0.3);} .table_unit + .table, .table_unit + .table_scroll{margin-top:12px;} .table.fixed{table-layout:fixed;} .table_board.break td, .table_board.break th{word-break:break-all;} .table_board{position:relative; width:100%; margin:9px 0; background-color:#fff; border-top: 2px solid #7a7d96; border-bottom:1px solid #dedede; text-align:center;} .table_board thead tr:first-child{} .table_board thead{border-bottom:1px solid #dedede; border-top:2px solid #7a7d96;} /*.table thead:before{display:block; position:absolute; bottom:0; left:0; width:100%; height:1px; background-color:#4f6a84;}*/ .table_board td,.table_board th{border-width:0; border-style:solid; border-color:#dedede; letter-spacing:-0.035em;} .table_board th:last-child{border-right:none; border-left-width:1px;} .table_board th:first-child{border-left:none;} .table_board thead th{padding:12px 10px; background-color:#f4f5f9; border-top-width:1px; border-right-width:1px; border-left-width:1px; font-size:16px; line-height:24px; color:#424242; letter-spacing:-0.025em; font-weight:600; word-break:keep-all;} .table_board thead tr:nth-child(n + 2) th{background-color:#fbfdfd; font-size:15px; color:#212121; font-weight:400;} .table_board tbody:before{display:block; position:absolute; bottom:0; left:0; width:100%; height:1px; background-color:#0b3d6e;} .table_board tbody th{padding:13px 10px; background-color:#f4f5f9; border-bottom-width:1px; border-right-width:1px; font-size:15px; line-height:22px; color: #424242; font-weight: bold;} .table_board td{padding:13px 10px; border-bottom-width:1px; border-left-width:1px; border-right-width:1px; font-size:15px; line-height:180%; color: #424242; font-weight: 400;} .table_board td:first-child{border-left-width:0;} .table_board td:last-child{border-right:none;} .table_board td .bu > li{font-size:15px;} .table_board td .bu > li:before {top:7px;} .table_board td .blt{font-size:15px;} .table_board tfoot th{border-right:1px solid #dedede; border-bottom-width:1px; padding:12px 10px; background-color:#f7f9fc;} .table_board tfoot td{border-right:1px solid #dedede; padding:12px 10px;} .table_board.type2 tbody tr:first-child{border-top:2px solid #0b3d6e; } .table_board.type2 tbody th{font-weight:600; color:#0b3d6e;} @media screen and (max-width: 767px){ .table_board, .table_board tbody, .table_board tr, .table_board th, .table_board td {display:block;} .table_board {border-bottom:none;} .table_board thead {display:none;} .table_board tr {} .table_board th, .table_board td {text-align: left;} .table_board tbody {} .table_board tbody th {display: none;} .table_board tbody td {} .table_board th:first-child, .table_board td:first-child {border-top: 1px solid #d5d5d5;} .table_board td{border-left:none; border-right:none;} .table_board th, .table_board td {position: relative; padding-left: 140px;} .table_board th:before, .table_board td:before {content:attr(title); display:inline-flex; position:absolute; top:0; left:0; width:110px; height:100%; padding:0 5px; background:#f5f6fa; font-weight:600; text-align:center; align-items:center; justify-content:center;} .table_board.notitle th:before, .table_board.notitle td:before {content: attr(date-title);} .table_board .textover {width: 100%; white-space: inherit;} .board-info-group {display: none;} .board-search {width: 100%;} .board-pagi .pagination a {width: 20px; height: 20px; border-radius: 50%; border: none; line-height: 20px; font-size: 1.2rem;} .table-scroll {width: 680px; border-top: none;} .table_board.type2 tbody {border-top:none;} .table_board tr > li{padding-left: 110px;} } /*페이징*/ .ListBoardWrap .boardButtonMove{float:left; padding:24px 0 0 0;} .ListBoardWrap .boardButton{float:right; padding:24px 0 0 0;} .ListBoardWrap .boardPaging{width:100%; margin:25px 0 30px 0; text-align:center; vertical-align:middle; color:#666; font-size:14px;} .ListBoardWrap .boardPaging a, .ListBoardWrap .boardPaging b{display:inline-block; width:25px; height:25px; padding-right:2px; line-height:25px; margin-right:3px; color:#666; text-decoration:none; border:1px solid #aaa; border-radius:2px; -webkit-transition: 0.2s all; transition: 0.2s all; font-weight:normal; letter-spacing:-2px;} .ListBoardWrap .boardPaging a.listBtn{background:#eee;} .ListBoardWrap .boardPaging b, .ListBoardWrap .boardPaging a:hover{color:#fff; background:#555; border:1px solid #555;} /*상단박스*/ .top_box{position:relative; min-height:104px; margin:20px 0; padding:42px 40px 37px 104px;border-top:2px solid #7a7d96; background:#f5f6fa; border-radius:0 0 5px 5px;} .top_box:before{content:""; display:block; position:absolute; top:36px; left:26px; width:62px; height:49px; background:url('/images/box_icon.png') no-repeat 0 0;} .top_box .box_title{margin-bottom:20px; margin-top:0; font-size:24px; font-weight:600; color:#3c55b0; line-height:26px;} .top_box .box_text{color:#1d3360; line-height:170%;} .top_box .box_text:after{content:""; display:block; height:0; clear:both; visibility:hidden;} .top_box .box_text > ul > li{float:left; width:calc(50% - 24px); position:relative; font-size:15px; line-height:180%; font-weight:400; padding-left:12px;} .top_box .box_text > ul > li:before{content:""; position:absolute; margin-top:12px; left:0; top:0; width:4px; height:4px; border-radius:50%; background:#158ccd;} @media all and (max-width:480px){ .top_box{padding:22px 14px 17px 14px; margin:0 0 20px 0;} .top_box:before{top:16px;} .top_box .box_title{margin-top:55px; font-size:1.2rem;} } .bordergrey_box{position:relative; margin:20px 0; padding:42px 40px 37px 40px; border:1px solid #c5c9d6; border-radius:5px;} .bordergrey_box:after{content:""; display:block; height:0; clear:both; visibility:hidden;} .bordergrey_box .box_text{color:#1d3360; line-height:170%;} @media all and (max-width:480px){ .bordergrey_box{width:calc(100% - 20px); padding:12px 9px 7px 9px;} } @media all and (max-width:768px){ .top_box .box_text > ul > li{width:calc(100% - 24px);} } .bordergrey_box2{position:relative; width:calc(100% - 42px); margin:20px 0; padding:10px 20px; border:1px solid #c5c9d6; border-radius:5px;} .bordergrey_box2:after{content:""; display:block; height:0; clear:both; visibility:hidden;} .bordergrey_box2 .box_text{color:#1d3360; line-height:170%;} .bordergrey_box2 .box_text > p{padding-top:5px;} @media all and (max-width:480px){ .bordergrey_box2{width:calc(100% - 20px); padding:12px 9px 7px 9px;} } @media all and (max-width:768px){ .top_box .box_text > ul > li{width:calc(100% - 24px);} } @media all and (max-width:480px){ .top_box{padding:22px 14px 17px 14px; margin:0 0 20px 0;} .top_box:before{top:16px;} .top_box .box_title{margin-top:55px; font-size:1.2rem;} .top_box .box_text > ul > li{font-size:1.0rem;} } /* 인사말 */ .greet{position:relative; width:100%; height:100%;} .greet:after{content:""; display:block; height:0; clear:both; visibility:hidden;} .greet .hd_tit{width:100%; height:60px; margin-bottom:45px; background:url('../images/greet_01.jpg') 0 top no-repeat; text-indent:-99999em; border-bottom:2px solid #2a76cc;} .greet p{position:relative; width:clac(100% - 535px); min-height:425px; font-size:16px; line-height:170%; padding-left:535px; background:url('../images/greet_pic.jpg') 20px top no-repeat;} .greet p:before{content:''; position:absolute; left:500px; top:0; width:1px; height:100%; background:#eeeff3;} @media all and (max-width:1023px){ .greet .hd_tit{background-size:100%;} .greet p{width:clac(100% - 40%); padding-left:40%; background-size:28%;} .greet p:before{left:35%;} } @media all and (max-width:680px){ .greet .hd_tit{position:relative; background:none; text-indent:0; font-size:20px; font-weight:600; line-height:130%; padding-bottom:15px;} } @media all and (max-width:480px){ .greet .hd_tit{height:60px; font-size:1.3rem; line-height:150%;} .greet p{width:100%; padding-left:0; font-size:1.0rem; padding-top:290px; background-size:80%;} .greet p:before{display:none;} } /* 연혁 */ #content .substance .history{position:relative;} #content .substance .history .year{position:absolute; float:left; top:0; left:0; font-size:24px; font-weight:bold; color:#00b4cb; line-height:0.8; padding:5px;} #content .substance .history dl{margin-left:100px; height:100%; padding:15px 20px 0 35px; background:#f4f4f4; word-break:break-all;} #content .substance .history dl:last-child {padding-bottom:25px;} #content .substance .history dl:before, #content .substance .history dl:after {content:"";clear:both;display:block;float:none} #content .substance .history dt {float:left; width:60px; font-size:16px; font-weight:600; color:#0c4a96; line-height:180%;} #content .substance .history dd {float:left; width:calc(100% - 60px); font-weight:500; line-height:180%;} @media all and (max-width:930px){ .orgWrap .org1 > li .num01_2 dt {background:#00b4cb; font-size:1.1rem; letter-spacing:-1;} .orgWrap .org1 > li .cont_depth03{padding-left:0.5rem; font-size:1.1rem;} } @media all and (max-width:767px){ .orgWrap .org1 > li .num01_2 { margin-top:39px;} .orgWrap .org1 > li .num01_2 dt {height:53px; line-height:120%;} .orgWrap .org1 > li .num02 dd, .orgWrap .org1 > li .num02_1 dd, .orgWrap .org1 > li .num02_2 dd, .orgWrap .org1 > li .num02_3 dd {height:200px;} } @media all and (max-width:542px){ .orgWrap{background:none;} .orgWrap:before {content:''; position:absolute; left:50%; top:0; width:1px; height:772px; background:#a9a9a9;} .orgWrap .org1 > li .num01 {padding-left:41%;} .orgWrap .org1 > li .num01 dt {width:70px; height:65px; border-radius:100%; padding-top:20px;} .orgWrap .org1 > li .num01_1 {width:80%; margin-top:30px;} .orgWrap .org1 > li .num01_2 {width:80%; padding-left:10%; margin-top:30px;} .orgWrap .org1 > li .num01_2 dt {height:42px;} .orgWrap .org1 > li .num02{width:80%; padding-left:10%; margin-top:30px; padding-top:0;} .orgWrap .org1 > li .num02_1, .orgWrap .org1 > li .num02_2, .orgWrap .org1 > li .num02_3 {width:80%; padding-left:10%; margin-top:10px; padding-top:0;} .orgWrap .org1 > li .num02_3 {width:80%; padding-left:10%; margin-top:10px; padding-top:0;} .orgWrap .org1 > li .num02_3 dd {margin-bottom:50px;} .orgWrap .org1 > li .num02:before, .orgWrap .org1 > li .num02_1:before, .orgWrap .org1 > li .num02_2:before, .orgWrap .org1 > li .num02_3:before, .orgWrap .org1 > li .cont_depth03:after{background:none;} } /* 조직도 */ .orgWrap {position:relative; height:350px; margin-bottom:20px; text-align:center; background:url('../images/org_bg.jpg') center 0 no-repeat;} .orgWrap .org1 {position:relative; width:100%; } .orgWrap dt {background:#89aa41; color:#fff; font-weight:bold; padding:10px 2%; box-sizing:border-box; text-align:center;} .orgWrap dd {background:#f4f4f4; line-height:1.5; padding:15px 2% 15px 5%; box-sizing:border-box; text-align:center; margin-top:0; border:1px solid #e1e1e1; word-break:break-all;} .orgWrap .org1 > li .num01 {float:left; width:27%; padding-left:36.5%; margin:0 auto; text-align:center;} .orgWrap .org1 > li .num01 dt {background:#e76a4e;} .orgWrap .org1 > li .num01_1 {float:left; width:20%; margin:0 auto; text-align:center; padding-left:10%; padding-top:70px;} .orgWrap .org1 > li .num01_1 dt {background:#969696;} .orgWrap .org1 > li .num01_2 {float:left; width:27%; padding-left:66.5%; margin:0 auto; text-align:center; margin-top:50px;} .orgWrap .org1 > li .num01_2 dt {background:#00b4cb;} .orgWrap .org1 > li .num02 {float:left; width:20%; text-align:center; padding-top:69px; padding-left:4%; border:none !important;} .orgWrap .org1 > li .num02:before{ content:''; position:absolute; left:14%; top:139px; width:1px; height:42px; background:#a9a9a9;} .orgWrap .org1 > li .num02 dt {background:#0084c2;} .orgWrap .org1 > li .num02 dd {text-align:left; background:#f4f4f4; height:160px; margin-top:10px;} .orgWrap .org1 > li .num02_1 {float:left; width:20%; text-align:center; padding-top:69px; padding-left:4%; border:none !important;} .orgWrap .org1 > li .num02_1:before{ content:''; position:absolute; left:38%; top:139px; width:1px; height:42px; background:#a9a9a9;} .orgWrap .org1 > li .num02_1 dt {background:#0084c2;} .orgWrap .org1 > li .num02_1 dd {text-align:left; background:#f4f4f4; height:160px; margin-top:10px;} .orgWrap .org1 > li .num02_2 {float:left; width:20%; text-align:center; padding-top:69px; padding-left:4%; border:none !important;} .orgWrap .org1 > li .num02_2:before{ content:''; position:absolute; left:62%; top:139px; width:1px; height:42px; background:#a9a9a9;} .orgWrap .org1 > li .num02_2 dt {background:#0084c2;} .orgWrap .org1 > li .num02_2 dd {text-align:left; background:#f4f4f4; height:160px; margin-top:10px;} .orgWrap .org1 > li .num02_3 {float:left; width:20%; text-align:center; padding-top:69px; padding-left:4%; padding-right:4%; border:none !important;} .orgWrap .org1 > li .num02_3:before{ content:''; position:absolute; left:84%; top:139px; width:1px; height:42px; background:#a9a9a9;} .orgWrap .org1 > li .num02_3 dt {background:#0084c2;} .orgWrap .org1 > li .num02_3 dd {text-align:left; background:#f4f4f4; height:160px; margin-top:10px;} .orgWrap .org1 > li .cont_depth03{padding-left:1.1rem;} .orgWrap .org1 > li .cont_depth03:after{content:''; position:absolute; left:14%; top:139px; width:70.1%; height:1px; background:#a9a9a9;} .orgWrap .org1 > li .cont_depth03 > li{position:relative; padding-left:1.1rem;} .orgWrap .org1 > li .cont_depth03 > li:before{ content:''; position:absolute; left:0; top:1rem; width:7px; height:1px; background:#666;} @media all and (max-width:930px){ .orgWrap .org1 > li .num01_2 dt {background:#00b4cb; font-size:1.1rem; letter-spacing:-1;} .orgWrap .org1 > li .cont_depth03{padding-left:0.5rem; font-size:1.1rem;} } @media all and (max-width:767px){ .orgWrap .org1 > li .num01_2 { margin-top:39px;} .orgWrap .org1 > li .num01_2 dt {height:53px; line-height:120%;} .orgWrap .org1 > li .num02 dd, .orgWrap .org1 > li .num02_1 dd, .orgWrap .org1 > li .num02_2 dd, .orgWrap .org1 > li .num02_3 dd {height:200px;} } @media all and (max-width:542px){ .orgWrap{background:none;} .orgWrap:before {content:''; position:absolute; left:50%; top:0; width:1px; height:772px; background:#a9a9a9;} .orgWrap .org1 > li .num01 {padding-left:41%;} .orgWrap .org1 > li .num01 dt {width:70px; height:65px; border-radius:100%; padding-top:20px;} .orgWrap .org1 > li .num01_1 {width:80%; margin-top:30px;} .orgWrap .org1 > li .num01_2 {width:80%; padding-left:10%; margin-top:30px;} .orgWrap .org1 > li .num01_2 dt {height:42px;} .orgWrap .org1 > li .num02{width:80%; padding-left:10%; margin-top:30px; padding-top:0;} .orgWrap .org1 > li .num02_1, .orgWrap .org1 > li .num02_2, .orgWrap .org1 > li .num02_3 {width:80%; padding-left:10%; margin-top:10px; padding-top:0;} .orgWrap .org1 > li .num02_3 {width:80%; padding-left:10%; margin-top:10px; padding-top:0;} .orgWrap .org1 > li .num02_3 dd {margin-bottom:50px;} .orgWrap .org1 > li .num02:before, .orgWrap .org1 > li .num02_1:before, .orgWrap .org1 > li .num02_2:before, .orgWrap .org1 > li .num02_3:before, .orgWrap .org1 > li .cont_depth03:after{background:none;} } /*찾아오시는길*/ .kakaomap{ width:100%;} .half_round{} .half_round > li{ margin-bottom:.5rem; padding-top:.4rem; line-height:2.5rem;} .half_round > li > span {display:inline-block; margin-right:.75rem; padding:.3rem 1rem; color:#fff; border-radius:30px; background:#00b4cb; font-weight:600; line-height:1.8rem;} .half_round > li > span p.addr{background:url('/images/addr.png') no-repeat 0 center; padding-left:1.8rem;} .half_round > li > span p.tel{background:url('/images/tel.png') no-repeat 0 center; padding-left:1.8rem;} .half_round > li > span p.fax{background:url('/images/fax.png') no-repeat 0 center; padding-left:1.8rem;} /*센터의가치*/ #content .substance .value{clear:both; padding:20px 0;} #content .substance .value > li{width:100%; margin-bottom:.5rem; padding-top:.4rem; line-height:2.5rem;} #content .substance .value > li.tit {float:left; width:70px; height:45px; margin-right:10px; padding-top:25px; color:#fff; border-radius:50%; background:#00b4cb; font-weight:600; font-size:1.4rem; line-height:1.8rem; text-align:center;} #content .substance .value > li.exp {float:left; width:calc(100% - 80px);} /*주요업무*/ .mainwork_wrap ul:before{position:absolute; top:-7.8rem; left:0; z-index:-1; content:""; display:inline-block; width:100%; height:1px; background-color:#DBDBDB;} .mainwork_wrap ul li{position:relative; background-color:#F6F6F6; border-radius:6rem; padding:1.3rem 1.3rem 1.4rem 5rem; margin-bottom:1.2rem; font-size:1.4rem; font-weight:400; letter-spacing:-0.09rem;} .mainwork_wrap ul li p{position:relative; word-break:keep-all;} .mainwork_wrap ul li .num{position:absolute; top:-.6rem; left:-4rem; display:inline-block; width:3rem; height:3rem; line-height:3rem; font-family:'mtsr'; font-weight:600; font-size:1.3rem; background-color:#00b4cb; border-radius:50%; margin-right:1rem; text-align:center; color:#fff;} /*@media(max-width: 1023px){ .mainwork_wrap ul li{width:50%;} .mainwork_wrap ul:before{top:-4.8rem;} .mainwork_title{font-size:2rem;margin-bottom:2.4rem;} }*/ /*주요업무 이미지*/ .relation_wrap{text-align:center; margin-top:6rem; padding-top:5rem; border:1px solid #CCC;} .relation_wrap ul{position:relative; max-width:98.2rem; overflow:hidden; margin:0 auto; } .relation_wrap ul:before{position:absolute; top:50%; left:10%; margin-top:-4rem; content:""; width:80%; height:1px; background-color:#dedede;} .relation_wrap li{position:relative; float:left; width:25%; z-index:999;} .relation_wrap li:first-child{margin-left:0;} .relation_wrap li:before{position:absolute; right:0; top:30%; content:""; display:inline-block; width:1.3rem; height:1.3rem; background:url('/images/depth03_dot.jpg') no-repeat center 0 ; background-size:contain;} .relation_wrap li:last-child:before{background:none; } .relation_wrap li .cir{width:13.7rem; height:13.7rem;} .relation_wrap li .cir > p{ padding-top:9.5rem; font-size:1.4rem; font-weight:600;} .relation_wrap li .cir > p.last{ padding-top:9rem; line-height:1.8rem;} .relation_wrap li p{font-size:1.3rem; line-height:2.7rem; letter-spacing:-0.05rem; color:#222;} .relation_wrap .last_org{position:relative; width:70%; margin:8rem auto 5rem; background:#00b4cb; color:#FFF; border-radius:6rem; padding:1.3rem;} .relation_wrap .last_org:before{position:absolute; top:50%; left:0; width:100%; margin-top:-8rem; content:""; height:36px; background:url('/images/sb_mainwork_bg_05.jpg') no-repeat center 0;} @media all and (max-width:724px){ .relation_wrap ul:before{background:none;} .relation_wrap li{width:48%;} .relation_wrap li:before{background:none;} .relation_wrap li .cir{margin-bottom:0 !important;} } @media all and (max-width:411px){ .relation_wrap li .cir{width:8.7rem; height:8.7rem; margin-bottom:0 !important;} .relation_wrap li .cir img{width:40px; margin-top:8%;} .relation_wrap li:nth-child(3) .cir img{width:30px; margin-top:5%;} .relation_wrap li:nth-child(4) .cir img{width:30px; margin-top:4%;} .relation_wrap li .cir > p{padding-top:5.5rem; font-size:1.25rem;} .relation_wrap li .cir > p.last{padding-top:5.3rem; line-height:1.3rem;} .relation_wrap li p{font-size:1.13rem; line-height:2.1rem;} } /*순서박스*/ .step_list_box {} .step_list_box ul{overflow:hidden; width:100%;} .step_list_box ul li{position:relative; float:left; display:table; table-layout:fixed; width:calc(22% - 3.4rem); height:9rem; margin-left:4rem; text-align:center; border:1px solid #d5d5d5; margin-bottom:3.4rem; word-break:keep-all; font-size:1.3rem; line-height:2.2rem; letter-spacing:-0.06rem; color:#00b4cb; font-weight:600;} .step_list_box ul li:nth-child(1){margin-left:0;} .step_list_box ul li:nth-child(4n+1){margin-left:0;} .step_list_box ul li:before {position:absolute; left:-2.7rem; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); content:"⇒"; display:inline-block; font-family:'Sans-serif'; font-size:1.6rem; color:#999; } .step_list_box ul li span, .step_list_box ul li a{display:table-cell; width:100%; vertical-align:middle; padding:0 1rem; word-break:break-all;} .step_list_box ul li:hover{border-color:#00b4cb; background-color:#00b4cb; color:#fff;} @media all and (max-width:650px){ .step_list_box ul li{width:calc(28% - 2.6rem);} .step_list_box ul li:nth-child(4n){margin-left:0;} .step_list_box ul li:nth-child(5n){margin-left:4rem;} .step_list_box ul li:nth-child(7n){margin-left:0;} } @media all and (max-width:473px){ .step_list_box ul li{width:calc(30% - 2.6rem); font-size:1.15rem; margin-left:3rem;} .step_list_box ul li:nth-child(5n){margin-left:3rem;} } @media all and (max-width:415px){ .step_list_box ul li{width:calc(47% - 2.6rem);} .step_list_box ul li:nth-child(2n+1){margin-left:0;} .step_list_box ul li:nth-child(4n){margin-left:3rem;} } .step4 {overflow:hidden; margin:10px 0 0 0;} .step4 dl {position:relative; float:left; width:23.5%; margin-left:2%; box-sizing:border-box; text-align:center;} .step4 dl:first-child {margin-left:0;} .step4 dl dt {padding:10px 5px; background:#00b4cb; color:#fff; border:1px solid #00b4cb;} .step4 dl dd {padding:20px 10px 10px; height:105px; font-size:16px; font-weight:400; margin-bottom:10px; vertical-align:middle; border-left:1px solid #d2d2d2; border-right:1px solid #d2d2d2; border-bottom:1px solid #d2d2d2;} .step4 dl dd > .steptext {display:block; padding-top:10px; word-break:break-all;} .step4 dl:after {content:''; position:absolute; top:49%; right:-23px; bottom:50px; width:21px; height:19px; background:url('/images/step_arrow.png') no-repeat 0 center;} @media all and (max-width:740px){ .step4 dl dd {height:115px; font-size:14px;} } @media all and (max-width:664px){ .step4 dl dd {height:135px; font-size:14px; letter-spacing:-1px;} } @media all and (max-width:499px){ .step4 dl {width:44.5%; margin-left:4%;} .step4 dl:nth-child(3) {margin-left:0;} .step4 dl dd {height:120px;} .step4 dl:after {right:-20px;} } /*리스트테이블*/ .list_table{border-top:1px solid #ddd; margin-top:25px; word-break:keep-all;} .list_table > li{position:relative; border-bottom:1px solid #ddd;} .list_table > li:before{content:""; display:block; position:absolute; left:1.5rem; top:2.3rem; width:3px; height:3px; background:#00a5e5;} .list_table > li strong{position:relative; display:table-cell; padding:1.5rem 2.5rem; font-weight:600; color:#00b4cb;} .list_table > li strong:before {content: ""; position:absolute; display:block; width:1px; height:.75rem; background-color:#b9b9b9; top:2.3rem; right:0; -webkit-transform:translateY(-50%); transform:translateY(-50%);} .list_table > li span {display:table-cell; padding-left: 2.5rem; padding-top:1.5rem;} @media all and (max-width:494px){ } .systemBox {clear:both; position:relative; width:902px; height:480px; margin:30px 0 0 15px; padding:60px 0px 60px 20px; background:url('../images/sc_management_img02.png') no-repeat; word-break:break-all !important;} .system01 li {float:left; position:relative; width:270px; height:330px; margin-right:30px; text-align:center; line-height:1.5em;} .system01 .title {padding-top:8px; font-size:16px; font-weight:bold; color:#fff;} .system01 .text {padding-top:54px; line-height:1.5em; font-size:14px;} .system02 {clear:both; margin-left:116px;} .system02 li {float:left; width:270px; text-align:center; margin-right:110px; line-height:1.5em;} .system02 .title {padding-top:9px; font-size:16px; font-weight:bold; color:#fff;} @media all and (max-width:1024px){ .systemBox{zoom:0.5;} } @media all and (max-width:768px){ .systemBox{zoom:0.6;} } @media all and (max-width:480px){ .systemBox{zoom:0.4;} } /*회원가입 분류*/ .mem_site_wrap{position:relative; width:100%; padding-top:13px; display:flex; justify-content:space-between; flex-wrap:wrap;} .mem_site_wrap:after{content:""; display:block; float:none; clear:both;} .mem_site_wrap > li{width:32%; margin-right:2%; border-radius:10px; text-align: center; background:url('/images/sb_mem_site01.jpg') no-repeat center 80px #eef4f8;} .mem_site_wrap > li+li{background:url('/images/sb_mem_site02.jpg') no-repeat center 80px #eef4f8;} .mem_site_wrap > li+li+li{margin-right:0; background:url('/images/sb_mem_site03.jpg') no-repeat center 80px #eef4f8;} .mem_site_wrap > li:last-child{margin-right:0;} .mem_site_wrap > li .top_red_box{color: #ff6c00; border: 2px solid #ff6c00; text-align: center; display: block; font-weight: 600; border-radius: 10px; background: #fff; padding: 5px 30px; min-height: 53px; line-height: 160%; box-shadow: 3px 3px 7px 3px rgb(50, 50, 50, .2);} .mem_site_wrap > li a > .mem_site_link{position:relative; width:60%; padding:9px 0; margin:200px auto 20px; border-radius:10px; text-align:center; background:#3c55b0; color:#fff; font-weight:600;} .mem_site_wrap > li br{ display: none;} @media all and (max-width:1024px){ .mem_site_wrap > li{background-size:80%;} .mem_site_wrap > li+li{background-size:80%;} .mem_site_wrap > li+li+li{background-size:80%;} .mem_site_wrap > li .top_red_box{padding: 5px; min-height: 45px; font-size: 1.0rem;} .mem_site_wrap > li a > .mem_site_link{ width: 100%; margin:200px auto 0;} } @media all and (max-width:840px){ .mem_site_wrap > li > .mem_site_link{ margin-top:86%;} .mem_site_wrap > li > .mem_site_link a{ font-size:1.0rem;} .mem_site_wrap > li .top_red_box{ min-height: 65px;} .mem_site_wrap > li a > .mem_site_link{ margin:150px auto 0;} } @media all and (max-width:480px){ /*.mem_site_wrap{max-width: 700px; overflow-x:scroll; overflow-y:hidden;}*/ /*.mem_site_wrap > li{width:100%;}*/ .mem_site_wrap > li{ background:url('/images/sb_mem_site01.jpg') no-repeat center 130px #eef4f8; background-size: 100%;} .mem_site_wrap > li+li{background:url('/images/sb_mem_site02.jpg') no-repeat center 130px #eef4f8; background-size: 100%;} .mem_site_wrap > li+li+li{background:url('/images/sb_mem_site03.jpg') no-repeat center 130px #eef4f8; background-size: 100%;} .mem_site_wrap > li > .mem_site_link{ margin-top:80%;} .mem_site_wrap > li br{ display:block;} .mem_site_wrap > li .top_red_box{min-height: 105px;} .mem_site_wrap > li a > .mem_site_link{ margin:100px auto 0;} } .requestWriteWrap table{border-collapse: collapse; color:#666;} .requestWriteWrap table caption{display:none;} .requestWriteWrap table th{height:44px; background:#f1f1f1; font-weight:bold; border:1px solid #ddd; text-align:center; vertical-align:middle; color:#424242; font-size:15px;} .requestWriteWrap table td{min-height:24px; border:1px solid #ddd; padding:10px 0 10px 10px; text-align:left; vertical-align:middle; color:#424242;} .requestWriteWrap table td input[type=text]{padding:3px 5px; border:1px solid #aaa; font-size:15px;} .requestWriteWrap .agreeBox{padding:30px 30px 5px 30px; margin-top:10px; line-height:1.7em; background:#f4f4f4;} .requestWriteWrap .agreeBox strong{font-size:19px;} .requestWriteWrap .agreeBox span{display:block; padding-top:5px;} .requestWriteWrap .agreeBox .agCheck{padding:10px 0; margin-top:20px; text-align:center; color:#ff6000; border-top:1px dashed #aaa;} .requestWriteWrap .agreeBox .agCheck input[type=checkbox]{width:17px; height:17px; margin-top:-3px; vertical-align:middle;} .requestWriteWrap .boardButton{width:100%; text-align:center;} .requestWriteWrap .boardButton p{padding-top:30px;} @media all and (max-width:768px){ .requestWriteWrap #o_address1, .requestWriteWrap #o_address2, .requestWriteWrap #u_address1, .requestWriteWrap #u_address2{width:200px !important;} } .join_warning{position: relative; width: 100%; color:#e5004a; line-height:1.3em; font-size: 2.25rem; font-weight: 500; border-radius: 10px; padding:15px 5px; margin-bottom: 3rem; text-align:center; box-sizing: border-box;} .join_warning:after{content: ''; position:absolute; display: block; left: 0; bottom:0; width:calc(100% - 6px); height: 20px; border-bottom: 3px solid #eb616c; border-left: 3px solid #eb616c; border-right: 3px solid #eb616c;} .join{ width: 100%; display: flex; justify-content: space-between; column-gap: 3rem; margin-bottom: 5rem;} .join .join_con{position: relative; width: 100%; height: 295px; margin-bottom: 3rem;} .join .join_con:after{ content:""; display:block; clear:both;} .join .join_con a{} .join .join_con a .join_title{ text-align: center; font-size: 1.25rem; font-weight: 700; color: #6a6185; margin-bottom: 1rem;} .join .join_con a .join_wrap {position: relative; width: 100%; height: 270px;} .join .join_con a .join_wrap:before{ content: ''; position:absolute; display: block; left: 0; top:0; width: 100%; height: 270px;} .join .join_con a .join_wrap.n1:before{ background: url(/images/join_01_bg.jpg) no-repeat; background-size: cover;} .join .join_con a .join_wrap.n2:before{ background: url(/images/join_02_bg.jpg) no-repeat; background-size: cover;} .join .join_con a .join_wrap.n3:before{ background: url(/images/join_03_bg.jpg) no-repeat; background-size: cover;} .join .join_con a .join_wrap > ul{} .join .join_con a .join_wrap > ul > li{ width: 47.2%; padding-top: 1rem; position: relative;} .join .join_con a .join_wrap > ul > li .join_list{ position: relative; display: flex; flex-direction: column; padding:0; width: 100%; box-sizing: border-box; z-index: 1;} .join .join_con a .join_wrap > ul > li .join_list > li{ display: inline-block; margin:0.25rem 0.75rem; font-size: 1.25rem; color: #fff; font-weight: 600; text-align: center; z-index: 1; box-sizing: border-box; text-shadow: #00978c 0px 0px 2px, #00978c 0px 0px 2px, #00978c 0px 0px 2px, #00978c 0px 0px 2px, #00978c 0px 0px 2px, #00978c 0px 0px 2px;} .join .join_con a .join_wrap > ul > li:before{ content: ''; position:absolute; display: block; left: 0; top:0; width: 100%; height: 270px;} .join .join_con a .join_wrap > ul > li.join_bg_n1:before{ background: rgba(218, 118, 121, 0.5);} .join .join_con a .join_wrap > ul > li.join_bg_n2:before{ background: rgba(101, 153, 255, 0.5);} .join .join_con a .join_wrap > ul > li.join_bg_n3:before{ background: rgba(82, 154, 134, 0.5);} .join .join_con a .join_wrap > ul > li .join_list > li.n1_hp_write{position: relative; border-bottom: 1px solid #fff; border-top: 1px solid #fff; margin-top: 1.5rem; padding: 0.5rem; box-sizing: border-box;} .join .join_con a .join_wrap > ul > li .join_list > li.n1_hp_write:before{ content: ''; position: absolute; display: block; left: 0; top:0; width: calc(100% - 2px); height: 8px; border-left: 1px solid #fff; border-right: 1px solid #fff;} .join .join_con a .join_wrap > ul > li .join_list > li.n1_hp_write:after{ content: ''; position: absolute; display: block; left: 0; bottom:0; width: calc(100% - 2px); height: 8px; border-left: 1px solid #fff; border-right: 1px solid #fff;} .join .join_con a .join_wrap .join_btn_link{ position: absolute; left: 0; top: 95%; width: 100%; border-radius: 10px; text-align: center; font-size: 1.375rem; letter-spacing: -1px; font-weight: 500; color: #fff100; padding: 1.25rem 0; border: 2px solid #fff; box-shadow:2px 0 4px rgba(0, 0, 0, 0.2); z-index: 2; box-sizing: border-box;} .join .join_con a .join_wrap .join_btn_link.n1{ background: #da7679;} .join .join_con a .join_wrap .join_btn_link.n2{ background: #6599ff;} .join .join_con a .join_wrap .join_btn_link.n3{ background: #529a86;} .join .join_con a .join_wrap .join_btn_link .n1_white_text{ color: #fff;} @media all and (max-width:1024px){ .join{ column-gap: 0.5rem;} .join_warning{font-size: 1.5rem;} .join .join_con a .join_title{font-size: 1.0rem;} .join .join_con a .join_wrap > ul > li{ width: 100%;} .join .join_con a .join_wrap > ul > li .join_list > li{font-size: 1rem;} .join .join_con a .join_wrap .join_btn_link{font-size: 1.25rem;} } @media all and (min-width:780px){ .join_warning br, .join .join_con a .join_wrap .join_btn_link br{display: none;} } @media all and (max-width:780px){ .join .join_con a .join_wrap{height: 220px;} .join .join_con a .join_wrap > ul > li .join_list > li{margin:0 0.25rem; font-size: 0.875rem;} .join .join_con a .join_wrap .join_btn_link{font-size: 1rem;} }