#bandMessage { z-index:1!important; } .dimode-component { z-index:0!important; } header .navbar-default { position:absolute; } .footer { margin-top:80px; } .footer ul { border-top: 1px solid #cecece; } #sub { overflow:hidden; } .fullpage-nav, .main-quick { display:none; } .sdfc-content { background: rgba(0,0,0,0.5)!important; } .sub-top { position: relative; aspect-ratio: 1903 / 653 !important; max-height:450PX; width: 100%; top: 0; z-index: 0; background-size: cover!important; background-position: 50% 50%!important; opacity: 0.8; -webkit-animation: zoomin 9s 1; animation: zoomin 9S 1;} .sub-rel { position: relative; } .sub-top-ul { position: absolute; bottom: 0px; text-align: center; margin: 0 auto; background-color: rgba(12, 76, 163, 0.5); width: 100%; } .sub-top-ul li { font-size: 17px; padding: 30px 30px; text-align: center; display: inline-block; } .sub-top-ul a { color: #fff; text-decoration: none; } .sub-cont { background: #fff; position: relative; padding: 0; } .sub-title2 { margin: 0 0 50px!important; font-size: 30px; display: inline-block; border-bottom: 2px solid #E6061B; padding-bottom: 15px; font-weight: bold; } #subgnb { border-bottom:1px solid #ddd; background:#fff; } #subgnb_pc img { position:relative; top:-3px; } #subgnb_pc span { font-size:17px; color:#333; margin:0 3px; } #subgnb_pc a { font-size:17px; color:#333; text-decoration:none; display:inline-block; border-radius:15px; background:#fff; padding:5px 15px; box-shadow: 4px 3px 2px 0px #afafaf;} .subTitle { text-align:center; } .sub-top-ul2 { border-bottom:1px solid #ddd; text-align:center; } .sub-top-ul2 li { word-break:keep-all; } .sub-top-ul2 li:hover { border-bottom:1px solid #00A9E0; transition:.3s all; } .sub-top-ul2 li:hover a { color:#00A9E0; transition:.3s all; } .sub-top-ul2 li { display:inline-block; font-size:18px; width:175px; padding:20px 0; margin:0 5px; height:65px; } .sub-top-ul2 li.active { border-bottom:1px solid #00A9E0; } .sub-top-ul2 li.active a { color:#00A9E0; } .sub-top-ul2 li a { color:#333; text-decoration:none; } .lnb_title { font-size:30px; border-bottom:1px solid #000; padding:40px 0px; font-weight:600; text-align:center; position:relative;} .sub-left-triangle { position: absolute; right: 0px; top: 0; width: 0; height: 0; border-left: 30px solid transparent; border-top-width: 30px; border-top-style: solid; border-top-color: #ff6d6d; } .sub_depth2 { margin-top:0px; padding-top:0px; } .sub_depth2 li { padding: 20px 25px; border-bottom:1px solid #ddd; transition:all ease 0.3s; } .sub_depth2 li.active, .sub_depth2 > li:hover { background:#ff6d6d; } .sub_depth2 li.active a, .sub_depth2 > li:hover a { color:#fff; } .sub_depth2 > li > a { color:#777; font-weight:600; font-size:17px; text-decoration:none; } .sub_depth2 li a { color:#777; font-weight:600; font-size:16px; text-decoration:none; } .sub_depth2 li i { position:relative; margin:3px 15px 0px 0px; cursor:pointer; float:right; font-size:16px;} .sub_depth2 li i.fa-minus { display:none; } .sub_depth2 li:last-child { border-bottom:none; } .sub_depth3 { padding:0px 15px; margin-top:15px; display:none; } .sub_depth3.active { display:block; } .sub_depth3 li { padding: 10px 20px; border-bottom:1px solid #fff; background-color: #ff6d6d; } .sub_depth3 li a { color:#999; font-size:15px; text-decoration:none; transition:all ease 0.3s; } #sub_title { font-size: 35px; font-weight: 600; border-bottom: 4px solid #2594C7; display: inline-block; padding-bottom: 10px; margin:50px 0; } #daumRoughmapContainer1708061959115{ width:100% !important; } .sub-cont{position:relative;} .sub-cont .subtop-bottom{background-color: rgba(255,255,255,1);position: relative;bottom: 0; padding: 2% 0 0%;width: 100%;} .sub-cont .subtop-bottom .subtop-menu ul { text-align: center; display: flex; flex-wrap: wrap; justify-content: center; } .sub-cont .subtop-bottom .subtop-menu ul li{display:inline-block;} .sub-cont .subtop-bottom .subtop-menu ul li a{display: inline-block;padding: 52px 13px 25px;font-size: 17px;font-weight:700;text-decoration: none;color: #343434;position: relative;} .sub-cont .subtop-bottom .subtop-menu ul li p{display: inline-block;padding: 52px 0px 25px;font-size: 17px;font-weight:700;text-decoration: none;color: #343434;position: relative;} .sub-cont .subtop-bottom .subtop-menu ul li a .btn-plus{position: absolute;top: 40%;left: 45%;background:#f1592a;width: 6px;height: 6px;border-radius: 50%; text-align: center;opacity: 0;transition: all .3s linear;} .sub-cont .subtop-bottom .subtop-menu ul li a:hover .btn-plus, .sub-cont .subtop-bottom .subtop-menu ul li.active a .btn-plus, .sub-cont .subtop-bottom .subtop-menu ul li a:focus .btn-plus{opacity:1;} .subtop-bottom2{background-color: rgba(255,255,255,1);height: 140px;position: relative;bottom: 0; left: 10px;width: 100%;} .subtop-bottom2 .subtop-menu ul { text-align: center; display: flex; flex-wrap: wrap; justify-content: center; } .subtop-bottom2 .subtop-menu ul li{display:inline-block;} .subtop-bottom2 .subtop-menu ul li a{ display: inline-block; margin: 30px 0; width:420px; padding: 15px 70px; border: solid 1px #dfdfdf;font-size: 17px;font-weight:700;text-decoration: none;color: #343434;position: relative;} .subtop-bottom2 .subtop-menu ul li p{display: inline-block;padding: 52px 0px 25px;font-size: 17px;font-weight:700;text-decoration: none;color: #343434;position: relative;} .subtop-bottom2 .subtop-menu ul li a:hover, .subtop-bottom2 .subtop-menu ul li.active a, .subtop-bottom2 .subtop-menu ul li a:focus { border: solid 1px #123369; color: #123369; } .a_box1{display:inline-block; padding:8px 40px;background:#a62e7d;color:#fff; font-weight:600;border-radius:60px; } .a_box1:hover{color:#fff;text-decoration:none;} @-webkit-keyframes zoomin { 0% { -webkit-transform: scale(1.2); } 100% { -webkit-transform: scale(1); } } .next-box-img { text-align:center; } .next-box-img img { max-height:138px; } @media (min-width:1200px) and (max-width:1499px) { } @media (min-width:993px) and (max-width:1199px) { .sub_depth2 li { padding:20px 10px; } #content > .container > .row { margin:0; } } @media (min-width:768px) and (max-width:992px) { #sub_title { font-size:30px; } .sub-cont-desc { padding:0; } .subTitle { text-align:center; } .sub-top-ul2 li a.active { border-bottom:none; } .sub-top-ul2 li { font-size:15.5px; width:30%; } #content > .container > .row { margin:0; } #dimodePage * { word-break:keep-all; } .map-span { font-size:17px!important; display:block; } /* sub */ #sub-10 #unit3112 { width:100%!important; } #sub-10 #unit1093 { width:100%!important; margin-top:15px!important; } #sub-10 #unit1093 div { text-align:right; } #sub-11 #component4529 { width:100%!important; } #sub-11 #component2572 { width:100%!important; } #sub-11 #component7666 { width:100%!important; } #sub-11 #component7531 { width:100%!important; } #sub-11 #component4219 { width:100%!important; } #sub-11 #component3113 { width:100%!important; } #sub-11 #component5264 { width:100%!important; } #sub-11 #component6777 { width:100%!important; } #sub-12 #unit1534 span { font-size:25px!important; } #sub-13 #unit8567 div { width:100%!important; margin:5px 0!important; padding:0!important; height:auto!important; } #sub-13 #component5399 { width:100%!important; padding:0!important; margin:3px 0!important; } #sub-13 #component2870 { width:100%!important; padding:0!important; margin:3px 0!important; } #sub-14 #unit3530 > div { padding:80px 10px!important; } #sub-14 #unit3530 > div > div > div { width:100%!important; margin:5px 0!important; padding:0!important; height:auto!important; } #sub-14 #unit3530 > div > div > div { width:100%!important; padding:0!important; margin:3px 0!important; } #sub-36 #component1371 .row { margin:0; margin:20px 0 0!important; } #sub-36 #component5453 .row { margin:0; margin:20px 0 0!important; } #sub-36 #component2387 .row { margin:0; margin:20px 0 0!important; } #sub-36 #component1371 #unit4408 { margin-top:30px!important; } #sub-36 #unit5329 .col-sm-3 { width:100%!important; padding:0!important; margin:0 0 10px!important; } #sub-36 #unit5329 .col-sm-9 { width:100%!important; padding:0!important; } #sub-37 #unit9847 { width:100%!important; text-align:center!important; } #sub-37 #unit9549 { width:100%!important; text-align:center!important; margin:30px 0!important; } #sub-38 #component1371 .row { margin:0; margin:20px 0 0!important; } #sub-38 #component5453 .row { margin:0; margin:20px 0 0!important; } #sub-38 #component2387 .row { margin:0; margin:20px 0 0!important; } #sub-38 #component1371 #unit4408 { margin-top:30px!important; } #sub-38 #unit5329 .col-sm-3 { width:100%!important; padding:0!important; margin:0 0 10px!important; } #sub-38 #unit5329 .col-sm-9 { width:100%!important; padding:0!important; text-align:center!important; } #sub-38 #unit5329 { width:100%!important; padding:0!important; } #sub-38 #unit5980 .col-sm-3 { width:100%!important; padding:0!important; margin:0 0 10px!important; } #sub-38 #unit5980 .col-sm-9 { width:100%!important; padding:0!important; text-align:center!important; } #sub-38 #unit5980 { width:100%!important; padding:0!important; } #sub-39 #unit4408 { margin-top:30px!important; } #sub-39 #component9356 .row { margin:0; margin:20px 0 0!important; } #sub-39 #component5453 .row { margin:0; margin:20px 0 0!important; } #sub-39 #component2387 .row { margin:0; margin:20px 0 0!important; } #sub-40 #unit4408 { margin-top:30px!important; } #sub-40 #component9356 .row { margin:0; margin:20px 0 0!important; } #sub-40 #component5453 .row { margin:0; margin:20px 0 0!important; } #sub-40 #component2387 .row { margin:0; margin:20px 0 0!important; } #sub-41 #unit4408 { margin-top:30px!important; } #sub-41 #component9356 .row { margin:0; margin:20px 0 0!important; } #sub-41 #component5453 .row { margin:0; margin:20px 0 0!important; } #sub-41 #component2387 .row { margin:0; margin:20px 0 0!important; } #sub-136643 div span { font-size:17px!important; } #sub-136643 #unit5782 > div:nth-child(1) > div { left:3%!important; } #sub-136643 #unit5782 > div:nth-child(2) { left:3%!important; } #sub-136643 #unit5782 > div:nth-child(3) { left:3%!important; } #sub-136643 #unit5782 > div:nth-child(4) { left:3%!important; } #sub-136643 #unit5782 > div:nth-child(5) { left:3%!important; } #sub-136643 #unit5782 > div:nth-child(6) { left:3%!important; } #sub-136643 #unit5782 > div:nth-child(7) { left:3%!important; } } @media (max-width: 767px) { header .navbar-default { position:fixed; height:75px; /*background:#fff; box-shadow: rgba(113, 113, 113, 0.28) 5px 7px 7px;*/ } #dimodePage .page-actions { padding:15px!important; } #sub_title { position:relative; z-index:1; } #sub-cont { padding-top:0; } .sub-top-ul2 { overflow:hidden;} .sub-top-ul2 li { float:left; width: auto; height:auto; } #subgnb_pc span { font-size:13px; position:relative; top:3px; } #subgnb_pc a { padding:5px 10px; font-size:13px; } #subgnb { position:relative; z-index:1; } #sub_title { font-size:23px; margin:30px 0 40px; } .sub-rel, .sub-top { aspect-ratio: 1903 / 653 !important; /*margin-top:75px;*/ } .sdfc-content { background:#fff!important; } .sub-top { position:relative; } .sub-top-ul3 li { font-size:15px; } .sub-top-ul2 li a.active { border-bottom:none; } .sub-top-ul2 li { font-size:14px; margin:0; transform: skew(-0.05deg); padding:10px 0; height:65px; } .subTitle { text-align:center; } .sub-cont-desc { padding:0; } .sub-cont { z-index:0; } #themeForm > .themes { margin-left:0; margin-right:0; } #dimodePage .page-content { padding:0 15px; } /* sub */ /*hicp*/ .sub-cont .subtop-bottom .subtop-menu ul li a{display: inline-block;padding:52px 0px 25px;font-size: 15px;font-weight:700;text-decoration: none;color: #343434;position: relative;} .sub-cont .subtop-bottom .subtop-menu ul li p{display: inline-block;padding: 52px 0px 25px;font-size: 15px;font-weight:700;text-decoration: none;color: #343434;position: relative;} #sub-18910 #unit8301 div div { font-size:17px!important;} #sub-18912 #unit1919 { display: flex; justify-content: center;} #sub-18912 #unit1288 { display: flex; justify-content: center;} #sub-18912 #unit2960 { display: flex; justify-content: center;} #sub-18912 #unit1508 { display: flex; justify-content: center;} #sub-18913 #unit1919 { display: flex; justify-content: center;} #sub-18913 #unit1288 { display: flex; justify-content: center;} #sub-18913 #unit2960 { display: flex; justify-content: center;} #sub-18913 #unit1508 { display: flex; justify-content: center;} #unit2811{padding: 30px 20px !important ; text-align: center;} #sub-18916 #unit1468 div > iframe {width:303px !important;} #sub-18916 #unit4511 div > iframe {width:303px !important;} #sub-18916 #unit2617 div > iframe {width:303px !important;} #sub-18916 #unit9594 div > iframe {width:303px !important;} #sub-18916 #unit4723 div > iframe {width:303px !important;} #sub-18917 #unit2969 div { background-color: rgba(255, 255, 255, 0.5)!important; } #sub-18917 #unit2969 div div {margin: 0px 0px 0px 0px !important;} #sub-18917 #unit2969 div div div {font-size: 28px !important;} #sub-18917 #unit2969 div div div > span {font-size: 15px !important;} #sub-18917 #unit2512 div table tbody tr td:nth-child(1) { width: 30% !important;} #sub-18917 #unit2512 div table tbody tr td:nth-child(2) { padding: 6px 10px !important;} #sub-18917 #unit2512 div { padding: 20px !important;} #sub-18917 #unit2512 div table tbody tr td span { width: 100%!important; padding: 0px 0px !important; font-size: 16px !important;} #sub-18918 #unit3236 div {padding: 10px 10px !important; font-size: 17px!important; } #sub-18918 #unit2969 div {height: 110px !important; } #sub-18918 #unit2969 div div { transform: translate(-50%, -20%) !important;} #sub-18918 #unit2969 div div span span {font-size:23px !important;} #sub-18918 #unit2405 > div {padding: 27px 25px !important; height: 225px !important;} #sub-18918 #unit2405 > div > div { font-size: 17px !important;} #sub-18918 #unit2405 > div > div > span span span { font-size: 21px !important;} #sub-19621 #unit3236 div {padding: 10px 10px !important; font-size: 17px!important; } #sub-19621 #unit3236 {padding: 10px 10px !important; word-break: keep-all;} #sub-19621 #unit2969 > div div:nth-child(1) { font-size: 21px !important;} #sub-19621 #unit2969 > div div:nth-child(2) { display:none !important;} #sub-19621 #unit2969 > div div {font-size: 17px !important; margin: 0px -6px 0px 0px !important;} /* #sub-19621 #unit2969 div div { transform: translate(-50%, -20%) !important;} */ #sub-19621 #unit2969 > div {height: 110px !important; } #sub-19621 #unit2969 div div span span {font-size:23px !important;} #sub-19621 #unit2405 > div {padding: 27px 25px !important; height: 225px !important;} #sub-19621 #unit2405 > div > div { font-size: 17px !important;} #sub-19621 #unit2405 > div > div > span span span { font-size: 21px !important;} #sub-19621 #unit5631 > div {padding: 27px!important; word-break: keep-all; } #sub-18919 #unit6779 {width:50%!important;} #sub-18919 #unit5863 {width:50%!important;} #sub-18919 #component1959 { padding: 10px !important;} #sub-18919 #component1959 > div { display: flex !important;} #sub-18919 #unit6779 > div img:nth-child(1) {width:30px;} #sub-18919 #unit5863 > div img:nth-child(1) {width:43px;} #sub-18919 #unit6779 div p:nth-child(2) { font-size: 15px!important; word-break: keep-all; } #sub-18919 #unit5863 div p:nth-child(2) { font-size: 16px!important; word-break: keep-all; } #sub-20091 #unit2405 div table tbody tr td span { font-size: 13px !important;} #sub-20091 #unit2405 div div img {max-width: 15%!important;} #sub-20091 #unit2405 div { padding: 10px 6px!important;} #sub-20091 #unit8751 div table tbody tr td { font-size: 13px !important;} #sub-20091 #unit8751 div table tbody tr td img { max-width: 15% !important; word-break: keep-all;} #sub-20091 #unit8751 div div img {max-width: 15%!important;} #sub-20091 #unit8751 { padding-right: 15px !important; padding-left: 15px !important;} #sub-20091 #unit8751 div { padding: 10px 6px!important;} #sub-20092 #unit2205 table tbody tr td span span span { font-size: 13px !important;} #sub-10 #unit3112 { width:100%!important; } #sub-10 #unit3112 div { margin:20px 0 0!important; } #sub-10 #unit3112 span { font-size:17px!important; transform: skew(-0.05deg); } #sub-10 #unit1093 { width:100%!important; margin-top:20px!important; } #sub-10 #unit1093 div { text-align:right; } #sub-10 #unit1093 div img { max-width:230px; } #sub-10 #unit1093 span { font-size:19px!important; transform: skew(-0.05deg); } #sub-10 #unit1093 span span { font-size:30px!important; } #sub-11 #component4529 { width:100%!important; } #sub-11 #component2572 { width:100%!important; } #sub-11 #component7666 { width:100%!important; } #sub-11 #component7531 { width:100%!important; } #sub-11 #component4219 { width:100%!important; } #sub-11 #component3113 { width:100%!important; } #sub-11 #component5264 { width:100%!important; } #sub-11 #component6777 { width:100%!important; } #sub-11 #unit3980 span { font-size:18px!important; } #sub-11 #component8847 { margin:0!important; } #sub-11 #unit4617 span { font-size:18px!important; } #sub-11 #component5839 { margin:0!important; } #sub-11 #unit3764 span { font-size:18px!important; } #sub-11 #unit3764 img { position:relative; top:-2px; } #sub-11 #unit4617 img { position:relative; top:-2px; } #sub-11 #unit8504 { text-align:center; } #sub-11 #unit8504 img { max-width:130px; } #sub-11 #unit6210 { text-align:center; } #sub-11 #unit6210 img { max-width:130px; } #sub-11 #unit5564 { text-align:center; } #sub-11 #unit5564 img { max-width:130px; } #sub-11 #unit3376 { text-align:center; } #sub-11 #unit3376 img { max-width:130px; } #sub-11 #unit3718 { text-align:center; } #sub-11 #unit3718 img { max-width:130px; } #sub-11 #unit9622 { text-align:center; } #sub-11 #unit9622 img { max-width:130px; } #sub-11 #unit1231 { text-align:center; } #sub-11 #unit1231 img { max-width:130px; } #sub-11 #unit9801 { text-align:center; } #sub-11 #unit9801 img { max-width:130px; } #sub-11 #unit9504 > div > span { font-size:17px!important; } #sub-11 #unit9504 > div > span > span { font-size:17px!important; } #sub-11 #unit9504 { padding:15px 15px!important; text-align:center; } #sub-11 #unit9504 .row { margin:0!important; } #sub-11 #unit9504 .row > div { padding:0!important; float:none!important; margin:3px 0!important; } #sub-11 #unit9504 .row > div div { width:100%!important; margin:0!important; float:none!important; } #sub-11 #unit9504 .row > div span { display:inline-block; width:100%; font-size:15px!important; } #sub-11 #unit3621 > div > span { font-size:17px!important; } #sub-11 #unit3621 > div > span > span { font-size:17px!important; } #sub-11 #unit3621 { padding:15px 15px!important; text-align:center; } #sub-11 #unit3621 .row { margin:0!important; } #sub-11 #unit3621 .row > div { padding:0!important; float:none!important; margin:3px 0!important; } #sub-11 #unit3621 .row > div div { width:100%!important; margin:0!important; float:none!important; } #sub-11 #unit3621 .row > div span { display:inline-block; width:100%; font-size:15px!important; } #sub-11 #unit2148 > div > span { font-size:17px!important; } #sub-11 #unit2148 > div > span > span { font-size:17px!important; } #sub-11 #unit2148 { padding:15px 15px!important; text-align:center; } #sub-11 #unit2148 .row { margin:0!important; } #sub-11 #unit2148 .row > div { padding:0!important; float:none!important; margin:3px 0!important; } #sub-11 #unit2148 .row > div div { width:100%!important; margin:0!important; float:none!important; } #sub-11 #unit2148 .row > div span { display:inline-block; width:100%; font-size:15px!important; } #sub-11 #unit4710 > div > span { font-size:17px!important; } #sub-11 #unit4710 > div > span > span { font-size:17px!important; } #sub-11 #unit4710 { padding:15px 15px!important; text-align:center; } #sub-11 #unit4710 .row { margin:0!important; } #sub-11 #unit4710 .row > div { padding:0!important; float:none!important; margin:3px 0!important; } #sub-11 #unit4710 .row > div div { width:100%!important; margin:0!important; float:none!important; } #sub-11 #unit4710 .row > div span { display:inline-block; width:100%; font-size:15px!important; } #sub-11 #unit7251 > div > span { font-size:17px!important; } #sub-11 #unit7251 > div > span > span { font-size:17px!important; } #sub-11 #unit7251 { padding:15px 15px!important; text-align:center; } #sub-11 #unit7251 .row { margin:0!important; } #sub-11 #unit7251 .row > div { padding:0!important; float:none!important; margin:3px 0!important; } #sub-11 #unit7251 .row > div div { width:100%!important; margin:0!important; float:none!important; } #sub-11 #unit7251 .row > div span { display:inline-block; width:100%; font-size:15px!important; } #sub-11 #unit6545 > div > span { font-size:17px!important; } #sub-11 #unit6545 > div > span > span { font-size:17px!important; } #sub-11 #unit6545 { padding:15px 15px!important; text-align:center; } #sub-11 #unit6545 .row { margin:0!important; } #sub-11 #unit6545 .row > div { padding:0!important; float:none!important; margin:3px 0!important; } #sub-11 #unit6545 .row > div div { width:100%!important; margin:0!important; float:none!important; } #sub-11 #unit6545 .row > div span { display:inline-block; width:100%; font-size:15px!important; } #sub-11 #unit7922 > div > span { font-size:17px!important; } #sub-11 #unit7922 > div > span > span { font-size:17px!important; } #sub-11 #unit7922 { padding:15px 15px!important; text-align:center; } #sub-11 #unit7922 .row { margin:0!important; } #sub-11 #unit7922 .row > div { padding:0!important; float:none!important; margin:3px 0!important; } #sub-11 #unit7922 .row > div div { width:100%!important; margin:0!important; float:none!important; } #sub-11 #unit7922 .row > div span { display:inline-block; width:100%; font-size:15px!important; } #sub-11 #unit5076 > div > span { font-size:17px!important; } #sub-11 #unit5076 > div > span > span { font-size:17px!important; } #sub-11 #unit5076 { padding:15px 15px!important; text-align:center; } #sub-11 #unit5076 .row { margin:0!important; } #sub-11 #unit5076 .row > div { padding:0!important; float:none!important; margin:3px 0!important; } #sub-11 #unit5076 .row > div div { width:100%!important; margin:0!important; float:none!important; } #sub-11 #unit5076 .row > div span { display:inline-block; width:100%; font-size:15px!important; } #sub-11 #unit3980 span { font-size:18px!important; } #sub-11 #unit3980 img { position:relative; top:-2px; } #sub-11 #unit9520 span { font-size:18px!important; } #sub-11 #unit9520 img { position:relative; top:-2px; } #component2271 { margin-top:0!important; } #sub-12 #unit1534 span { font-size:18px!important; } #sub-12 #unit1534 > div { line-height:15px!important; } #sub-12 #unit1333 table { font-size:15px!important; } #sub-12 .mt-n { margin-top:0!important; } #sub-12 .mt-s { margin-top:40px!important; } #sub-13 #unit8567 div { width:100%!important; margin:5px 0!important; padding:0!important; height:auto!important; } #sub-13 #unit8567 div span { font-size:17px!important; } #sub-13 .ui-sortable { margin:0!important; } #sub-13 #component5399 { width:100%!important; padding:0!important; margin:0 0 10px!important; } #sub-13 #component4266 { margin-top:10px!important; } #sub-13 #component2870 { width:100%!important; padding:0!important; margin:3px 0!important; } #sub-14 #unit3530 > div { padding:30px 10px!important; } #sub-14 #unit3530 > div span { font-size:17px!important; word-break:keep-all; } #sub-14 #unit3530 > div > div > div { width:100%!important; margin:5px 0!important; padding:0!important; height:auto!important; } #sub-14 #unit3530 > div > div > div { width:100%!important; padding:0!important; margin:3px 0!important; } #sub-36 #unit5250 div { font-size:18px!important; } #sub-36 #unit4408 { margin-top:30px!important; padding:15px!important; } #sub-36 #unit4408 div { font-size:16px!important; } #sub-36 #unit4408 div span { font-size:16px!important; } #sub-36 #component1371 .row { margin:0; margin:20px 0 0!important; } #sub-36 #component5453 { margin-top:20px!important; } #sub-36 #component5453 .row { margin:0!important; padding: 0 7.5px!important; } #sub-36 #component5453 .row .col-sm-3 { padding:15px 0 0!important; width:100%!important; } #sub-36 #component5453 .row .col-sm-9 { padding:10px 0 15px!important; width:100%!important; } #sub-36 #component5453 .row img { margin:20px 0 20px!important; } #sub-36 #component5453 .row .col-sm-9 span { font-size:16px!important; } #sub-36 #component2387 .row { margin:0; margin:20px 0 0!important; padding: 30px 15px 20px!important; } #sub-36 #unit8189 { padding:0!important; margin-bottom:15px; } #sub-36 #unit2914 { padding:0!important; margin-bottom:15px; } #sub-36 #unit5329 { padding:0!important; } #sub-36 #unit5980 { padding:0!important; } #sub-36 #component2130 { margin-top:15px!important; } #sub-36 #unit8368 span { font-size:17px!important; } #sub-37 #unit9847 { width:100%!important; text-align:center!important; } #sub-37 #unit9549 { width:100%!important; text-align:center!important; margin:20px 0!important; } #sub-37 #unit9549 span { font-size:17px!important; } #sub-37 #unit9847 span { font-size:17px!important; } #sub-37 #component9976 { margin:0!important; } #sub-37 #unit9549 tbody { font-size:14px!important; } #sub-37 #unit9549 tbody td { padding:10px 5px!important; } #sub-38 #unit5250 div { font-size:18px!important; } #sub-38 #unit4408 { margin-top:30px!important; padding:15px!important; } #sub-38 #unit4408 div { font-size:16px!important; } #sub-38 #unit4408 div span { font-size:16px!important; } #sub-38 #component1371 .row { margin:0; margin:20px 0 0!important; } #sub-38 #component5453 { margin-top:20px!important; } #sub-38 #component5453 .row { margin:0!important; padding: 0 7.5px!important; } #sub-38 #component5453 .row .col-sm-3 { padding:15px 0 0!important; width:100%!important; } #sub-38 #component5453 .row .col-sm-9 { padding:10px 0 15px!important; width:100%!important; } #sub-38 #component5453 .row img { margin:-45px 0 20px!important; } #sub-38 #component5453 .row .col-sm-9 span { font-size:16px!important; } #sub-38 #component2387 .row { margin:0; margin:20px 0 0!important; padding: 30px 15px 20px!important; } #sub-38 #unit8189 { padding:0!important; } #sub-38 #unit2914 { padding:0!important; } #sub-38 #unit5329 { padding:0!important; } #sub-38 #unit5980 { padding:0!important; } #sub-38 #component2130 { margin-top:15px!important; } #sub-38 #unit8368 span { font-size:17px!important; } #sub-39 #component9356 div { font-size:18px!important; } #sub-39 #unit4408 { margin-top:15px!important; padding:15px!important; } #sub-39 #unit4408 div { font-size:16px!important; } #sub-39 #component9356 .row { margin:0; margin:20px 0 0!important; } #sub-39 #component5453 { margin-top:20px!important; } #sub-39 #component5453 .row { margin:0; margin:10px 0 0!important; padding: 0 7.5px!important; } #sub-39 #component5453 .row .col-sm-3 { padding:5px 0!important; width:100%!important; } #sub-39 #component5453 .row .col-sm-9 { padding:5px 0!important; width:100%!important; } #sub-39 #component5453 .row img { margin:-45px 0 20px!important; } #sub-39 #component5453 .row .col-sm-9 span { font-size:16px!important; } #sub-39 #component2387 .row { margin:0; margin:20px 0 0!important; padding: 30px 15px 20px!important; } #sub-39 #unit8189 { padding:0!important; } #sub-39 #unit2914 { padding:0!important; } #sub-40 #component9356 div { font-size:18px!important; } #sub-40 #unit4408 { margin-top:15px!important; padding:15px!important; } #sub-40 #unit4408 div { font-size:16px!important; } #sub-40 #component9356 .row { margin:0; margin:20px 0 0!important; } #sub-40 #component5453 .row { margin:0; margin:20px 0 0!important; } #sub-40 #component2387 .row { margin:0; margin:20px 0 0!important; padding: 30px 15px 20px!important; } #sub-40 #unit8189 { padding:0!important; margin-bottom:10px!important; } #sub-40 #unit2914 { padding:0!important; margin-bottom:10px!important; } #sub-41 #component9356 div { font-size:18px!important; } #sub-41 #unit4408 { margin-top:15px!important; padding:15px!important; } #sub-41 #unit4408 div { font-size:16px!important; } #sub-41 #component9356 .row { margin:0; margin:20px 0 0!important; } #sub-41 #component5453 .row { margin:0; margin:20px 0 0!important; } #sub-41 #component2387 .row { margin:0; margin:20px 0 0!important; padding: 30px 15px 20px!important; } #sub-41 #unit8189 { padding:0!important; } #sub-41 #unit2914 { padding:0!important; } #sub-180 #unit2110 img { max-width:200px!important; position:relative; top:-3px; } #sub-180 #unit2110 span { font-size:16px!important; } #sub-180 #unit3540 span span { font-size:20px!important; } #sub-180 #unit3540 span { font-size:15px!important; } #sub-180 #component7618 { margin:20px 0!important; } #sub-180 #component1269 { margin:20px 0!important; } #sub-181 #unit2110 img { max-width:140px!important; position:relative; top:-3px; } #sub-181 #unit2110 span { font-size:16px!important; } #sub-181 #unit3540 span span { font-size:20px!important; } #sub-181 #unit3540 span { font-size:15px!important; } #sub-181 #component7618 { margin:20px 0!important; } #sub-181 #component1269 { margin:20px 0!important; } #sub-182 #unit2110 img { max-width:140px!important; position:relative; top:-3px; } #sub-182 #unit2110 span { font-size:16px!important; } #sub-182 #unit3540 span span { font-size:20px!important; } #sub-182 #unit3540 span { font-size:15px!important; } #sub-182 #component7618 { margin:20px 0!important; } #sub-182 #component1269 { margin:20px 0!important; } #sub-182 .next_07 { margin:15px 0 0!important; } #sub-182 .next_07 li { margin-top:5px; font-size:16px!important; } #sub-182 .next_07 li div { margin:0!important; } #sub-183 #unit2110 img { max-width:140px!important; position:relative; top:-3px; } #sub-183 #unit2110 span { font-size:16px!important; } #sub-183 #unit3540 span span { font-size:20px!important; } #sub-183 #unit3540 span { font-size:15px!important; } #sub-183 #component7618 { margin:20px 0!important; } #sub-183 #component1269 { margin:20px 0!important; } #sub-183 .next_07 { margin:15px 0 0!important; } #sub-183 .next_07 li { margin-top:5px; font-size:16px!important; } #sub-183 .next_07 li div { margin:0!important; } #sub-184 #unit2110 img { max-width:140px!important; position:relative; top:-3px; } #sub-184 #unit2110 span { font-size:16px!important; } #sub-184 #unit3540 span span { font-size:20px!important; } #sub-184 #unit3540 span { font-size:15px!important; } #sub-184 #component7618 { margin:20px 0!important; } #sub-184 #component1269 { margin:20px 0!important; } #sub-184 .next_07 { margin:15px 0 0!important; } #sub-184 .next_07 li { margin-top:5px; font-size:16px!important; } #sub-184 .next_07 li div { margin:0!important; } #sub-185 #unit2110 img { max-width:140px!important; position:relative; top:-3px; } #sub-185 #unit2110 span { font-size:16px!important; } #sub-185 #unit3540 span span { font-size:20px!important; } #sub-185 #unit3540 span { font-size:15px!important; } #sub-185 #component7618 { margin:20px 0!important; } #sub-185 #component1269 { margin:20px 0!important; } #sub-185 .next_07 { margin:15px 0 0!important; } #sub-185 .next_07 li { margin-top:5px; font-size:16px!important; } #sub-185 .next_07 li div { margin:0!important; } #sub-186 #unit2110 img { max-width:140px!important; position:relative; margin:10px 0!important; } #sub-186 #unit2110 span { font-size:16px!important; display:block; width:100%!important; } #sub-186 #unit3540 span span { font-size:20px!important; } #sub-186 #unit3540 span { font-size:15px!important; } #sub-186 #component7618 { margin:20px 0!important; } #sub-186 #component1269 { margin:20px 0!important; } #sub-186 .next_07 { margin:15px 0 0!important; } #sub-186 .next_07 li { margin-top:5px; font-size:15px!important; } #sub-186 .next_07 li div { margin:0!important; } #sub-186 .next_07 li div span { font-size:15px!important; } #sub-186 #unit6442 span { font-size:17px!important; } #sub-187 #unit2110 img { max-width:140px!important; position:relative; top:-3px; } #sub-187 #unit2110 span { font-size:16px!important; } #sub-187 #unit3540 span span { font-size:20px!important; } #sub-187 #unit3540 span { font-size:15px!important; } #sub-187 #component7618 { margin:20px 0!important; } #sub-187 #component1269 { margin:20px 0!important; } #sub-187 .next_07 { margin:15px 0 0!important; } #sub-187 .next_07 li { margin-top:5px; font-size:16px!important; } #sub-187 .next_07 li div { margin:0!important; } #sub-35 #component9490 { margin-top:20px!important; } #unit8514 .mission_01 { font-size:15px!important; padding:15px!important; } #component5937 { margin-top:20px!important; } #component5937 span { font-size:18px!important; } #sub-136643 #component5260 { margin-top:20px!important; } #sub-136643 #component4830 { margin-top:20px!important; } #sub-136643 #unit5411 { padding:15px!important; } #sub-136643 #unit5411 > div { font-size:20px!important; } #sub-136643 #unit5411 > div span { font-size:16px!important; } #sub-136643 #unit5782 > div { height:auto!important; position:relative!important; top:0!important; left:0!important; background:none!important; } #sub-136643 #unit5782 > div > div { position:relative!important; top:0!important; left:0!important; display:block; width:100%!important; } #sub-136643 #component2928 { text-align:center!important; } #sub-136643 #component2928 div { margin:0!important; } #sub-136643 #unit5782 > div > div span { font-size:17px!important; } #sub-136643 #unit5782 > div > div img { max-width:110px; display:block; margin:0 auto; } #sub-136643 #component2928 .next-ma { margin:15px 0!important; display: block!important; } #sub-136643 #unit5782 > div:nth-child(1) > div { margin:25px 0!important; } #sub-136643 #unit5782 > div:nth-child(2) { margin:25px 0!important; } #sub-136643 #unit5782 > div:nth-child(3) { margin:25px 0!important; } #sub-136643 #unit5782 > div:nth-child(4) { margin:25px 0!important; } #sub-136643 #unit5782 > div:nth-child(5) { margin:25px 0!important; } #sub-136643 #unit5782 > div:nth-child(6) { margin:25px 0!important; } #sub-136643 #unit5782 > div:nth-child(7) { margin:25px 0!important; } #sub-18941 #unit3236 div {padding: 10px 10px !important; font-size: 17px!important; } #sub-18941 #unit2969 div { height: 167px !important; } #sub-18941 #unit2969 div div { transform: translate(-50%, -46%) !important;} #sub-18941 #unit2969 div div span:nth-of-type(2) {font-size:17px !important;} #sub-18941 #unit2405 > div {padding: 27px 25px !important; height: 225px !important;} #sub-18941 #unit2405 > div > div { font-size: 17px !important;} #sub-18941 #unit2405 > div > div > span span span { font-size: 21px !important;} #sub-18942 #unit3236 div {padding: 10px 10px !important; font-size: 17px!important; } #sub-18942 #unit2969 div {height: 110px !important; } #sub-18942 #unit2969 div div { transform: translate(-50%, -20%) !important;} #sub-18942 #unit2969 div div span span {font-size:23px !important;} #sub-18942 #unit2405 > div {padding: 27px 25px !important; height: 225px !important;} #sub-18942 #unit2405 > div > div { font-size: 17px !important;} #sub-18942 #unit2405 > div > div > span span span { font-size: 21px !important;} #sub-18942 #unit4156 div{ font-size:14px !important; padding: 3px !important;} #sub-18942 #unit4156 div span{ font-size:17px !important; width:60px !important;} #sub-18956 #unit3236 div {padding: 10px 10px !important; font-size: 17px!important; } #sub-18956 #unit2969 div {height: 110px !important; } #sub-18956 #unit2969 div div { transform: translate(-50%, -60%) !important;} #sub-18956 #unit2969 div div span span {font-size:23px !important;} #sub-18956 #unit2405 > div {padding: 27px 25px !important; height: 225px !important;} #sub-18956 #unit2405 > div > div { font-size: 17px !important;} #sub-18956 #unit2405 > div > div > span span span { font-size: 21px !important;} #sub-18956 #unit4156 div{ font-size:14px !important; padding: 3px !important;} #sub-18956 #unit4156 div span{ font-size:17px !important; width:60px !important;} #sub-18956 #component7716 { padding: 19px 0px!important;} #sub-18956 #unit5631 > DIV { padding:20px 0px!important;} #sub-18956 #unit5631 > DIV > div:nth-child(3) { font-size:13px !important; } #sub-18956 #unit5631 > DIV > div:nth-child(3) span { font-size:17px !important; width:70px!important; margin-right: 4px !important;} #sub-18956 #unit5631 > DIV > div:nth-child(3) span span{ font-size:13px !important; } #sub-20027 #unit3236 div {padding: 10px 10px !important; font-size: 17px!important; } #sub-20027 #unit2969 div {height: 110px !important; } #sub-20027 #unit2969 div div { transform: translate(-50%, -20%) !important;} #sub-20027 #unit2969 div div span span {font-size:23px !important;} #sub-20027 #unit2405 > div {padding: 27px 25px !important; height: 225px !important;} #sub-20027 #unit2405 > div > div { font-size: 17px !important;} #sub-20027 #unit2405 > div > div > span span span { font-size: 21px !important;} #sub-20027 #unit4156 div{ font-size:14px !important; padding: 3px !important;} #sub-20027 #unit4156 div span{ font-size:17px !important; width:60px !important;} #sub-20490 #unit3631 > div { padding: 20px 10px 0px 10px !important; } #sub-20490 #unit3631 > div > div:nth-of-type(1) { font-size: 32px !important;} #sub-20490 #unit3631 > div > div:nth-of-type(2) { font-size: 22px !important;} #sub-20490 #unit3631 > div > div:nth-of-type(3) { font-size: 16px !important;} #sub-20490 #unit27622 >div {padding:12px !important;} #sub-20490 #unit27622 div >img{height: 50px !important; font-size:18px;} #sub-20490 #unit27622 div { font-size:18px!important;} #sub-20490 #unit9207 > img {height: 50px !important; } #sub-20491 #unit3631 > div { padding: 20px 10px 0px 10px !important; } #sub-20491 #unit3631 > div > div:nth-of-type(1) { font-size: 32px !important;} #sub-20491 #unit3631 > div > div:nth-of-type(2) { font-size: 22px !important;} #sub-20491 #unit3631 > div > div:nth-of-type(3) { font-size: 16px !important;} #sub-20491 #unit27622 >div {padding:12px !important;} #sub-20491 #unit27622 div >img{height: 50px !important; font-size:18px;} #sub-20491 #unit27622 div { font-size:18px!important;} #sub-20491 #unit2261 > img {height: 150px !important; } #sub-20491 #component1893 { padding-bottom: 20px!important; } #sub-20492 #unit3631 > div { padding: 20px 10px 0px 10px !important; } #sub-20492 #unit3631 > div > div:nth-of-type(1) { font-size: 32px !important;} #sub-20492 #unit3631 > div > div:nth-of-type(2) { font-size: 22px !important;} #sub-20492 #unit3631 > div > div:nth-of-type(3) { font-size: 16px !important;} #sub-20492 #unit27622 >div {padding:12px !important;} #sub-20492 #unit27622 div >img{height: 50px !important; font-size:18px;} #sub-20492 #unit27622 div { font-size:18px!important;} #sub-20492 #unit2261 > img {height: 90px !important; } #sub-20493 #unit3631 > div { padding: 20px 10px 0px 10px !important; } #sub-20493 #unit3631 > div > div:nth-of-type(1) { font-size: 32px !important;} #sub-20493 #unit3631 > div > div:nth-of-type(2) { font-size: 22px !important;} #sub-20493 #unit3631 > div > div:nth-of-type(3) { font-size: 16px !important;} #sub-20493 #unit27622 >div {padding:12px !important;} #sub-20493 #unit27622 div >img{height: 50px !important; font-size:18px;} #sub-20493 #unit27622 div { font-size:18px!important;} #sub-20493 #unit2261 > img {height: 90px !important; } #sub-19591 #unit3631 > div { padding: 20px 10px 0px 10px !important; } #sub-19591 #unit3631 > div > div:nth-of-type(1) { font-size: 32px !important;} #sub-19591 #unit3631 > div > div:nth-of-type(2) { font-size: 20px !important;} #sub-19591 #unit3631 > div > div:nth-of-type(3) { font-size: 16px !important;} #sub-19591 #unit27622 >div {padding:12px !important;} #sub-19591 #unit27622 div >img{height: 50px !important; font-size:18px;} #sub-19591 #unit27622 div { font-size:18px!important;} #sub-19591 #unit2261 > img {height: 90px !important; } } #sub-16 #component7004 { margin: 5px auto; padding: 0px 15px; position: relative; right: unset; top: unset; } @media (max-width: 1500px) { #sub-16 #component6359 { width: 780px; } #sub-16 #component7004 { width: 65%; right: 0; z-index: 1; } } @media (max-width: 1500px) { #sub-16 #component7004 { left: 50% !important; right: auto !important; width: 70% !important; top: -20% !important; padding: 20px 20px; } #sub-16 #component7004 .font-l { font-size: 0.7rem; } #sub-16 #component7004 .font-2xl { font-size: 1.2rem; } #sub-16 #unit4198 div { padding: 65px 20px !important; } } @media (max-width: 1200px) { #sub-16 #component7004 { left: 44% !important; right: auto !important; width: 61% !important; top: -7% !important; } } @media (max-width: 1000px) { #unit4198 p span:not(.fon-2xl){ font-size: 14px !important; } #sub-16 #unit8356 > div { margin-left: 0% !important; } } @media (max-width: 800px) { #sub-16 #component6359 { width: 95%; margin: 5px auto !important; background-color: unset !important; } #sub-16 #component7004 { position: static !important; width: 95% !important; } #sub-16 #component6101 { margin: 0px 0px 0px !important; } #sub-16 #unit8356 > div { margin-left: 10% !important; bottom: 0% !important; } #sub-16 #unit8356 > div > img{ width : 300px !important; } #sub-16 #unit4198 > div { padding: 25px !important; } } @media (max-width: 768px) { /* 목사님 소개 영역 부모 row */ #sub-16 .row { display: flex; flex-direction: column-reverse; } #sub-16 #unit8356 > div { margin-left: 10% !important; bottom: -10% !important; } } @media (max-width: 800px) { /* .sub-top-ul2 li { float:left; width:33%; height:auto; } */ } /* 교역자 이미지 공통 */ #sub-17 .person_img img { max-width: 180px; width: 100%; height: auto; object-fit: contain; } @media (min-width: 1200px) { #sub-17 .person_img img { max-width: 200px; } #sub-17 .col-lg-6 { width: 33% !important; } } /* 태블릿/모바일: 2명 */ @media (max-width: 768px) { #sub-17 .dimode-sort.row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 991px) { #sub-17 .person_img img { max-width: 160px; } } @media (max-width: 768px) { #sub-17 .person_work{ font-size: 14px; } #sub-17 .person_box { text-align: center; } #sub-17 .nsumgim { flex-wrap: nowrap !important; } #sub-17 .row > .col-sm-6:empty, #sub-17 .row > .col-sm-4:empty, #sub-17 .row > .col-sm-3:empty, #sub-17 .row > [class*="col-"]:empty{ display:none !important; } @media (max-width: 1023px){ #sub-17 .row > [class*="col-"]{ flex:0 0 50% !important; } } #sub-17 .person_img img { max-width: 140px; margin: 0 auto; } #sub-17 .person_txt_wrap { margin-top: 20px !important; padding: 0 !important; } } @media (max-width: 480px) { #sub-17 .person_img img { max-width: 120px; } } #sub-17 .person_img img, #sub-17 #component5148 img { width: 100% !important; max-width: 160px !important; height: auto !important; object-fit: contain !important; margin: 0 auto !important; display: block; } /* ================================ component5148 안에서만 2명 정렬 ================================ */ #sub-17 #component5148 .row{ display:flex !important; flex-wrap:wrap !important; gap:20px; } /* 각 카드 */ #sub-17 #component5148 .row > [class*="col-"]{ flex:0 0 50% !important; text-align:center !important; } /* 이미지 크기 */ #sub-17 #component5148 img{ width:100% !important; max-width:180px; height:auto; display:block; margin:0 auto 10px; } #sub-17 #component5148{ margin: unset !important; } @media (max-width: 800px){ /* 줄바꿈 허용 + 잘림 방지 */ #component5148, #component5148 .row, #sub-17, #sub-17 .row{ overflow: visible !important; flex-wrap: wrap !important; } #component5148 .row, #sub-17 .row{ width:100% !important; max-width:100% !important; } #sub-17 #component9910{ display: flex !important; margin: unset !important; } #component5148 .row > [class*="col-"], #sub-17 .row > [class*="col-"]{ flex:0 0 50% !important; max-width:50% !important; } } /* component5148 줄 정렬 안정화 */ #sub-17 #component5148 .row{ display:flex !important; flex-wrap:wrap !important; justify-content:center; /* 핵심: 가운데 정렬 */ } /* 각 카드 */ #sub-17 #component5148 .row > [class*="col-"]{ display:flex; flex-direction:column; align-items:center; } /* PC에서는 2명 */ @media (min-width: 1024px){ #sub-17 #component5148 .row > [class*="col-"]{ flex:0 0 50%; max-width:50%; } } /* 모바일에서는 1명 */ @media (max-width: 768px){ #sub-17 #component5148 .row > [class*="col-"]{ flex:0 0 100%; max-width:100%; } #sub-17 * { margin-left: 0 !important; margin-right: 0 !important; } } #sub-14098 #unit7262{ margin: 0; border: 1px solid #eee; display: inline-block; width: 100%; padding: 2vh !important; } #sub-14098 #unit7262 img{ width: 100%; aspect-ratio: 300 / 400 !important; overflow: hidden; object-fit: cover; } /* =============================== 공통 ================================*/ #sub-18 .history_01 { width: 100%; border-collapse: collapse; } #sub-18 .history_01 td { vertical-align: top; line-height: 1.6; } /* 상단 이미지 */ #sub-18 #unit5516 img { width: 100% !important; height: auto !important; max-height: 420px; object-fit: cover; } /* =============================== 태블릿 ================================*/ @media (max-width: 991px) { #sub-18 #unit5516 img { max-height: 320px; } #sub-18 .font-3xl { font-size: 26px !important; } } /* =============================== 모바일 ================================*/ @media (max-width: 768px) { /* 테이블 → 세로 카드형 */ #sub-18 .history_01, #sub-18 .history_01 tbody, #sub-18 .history_01 tr, #sub-18 .history_01 td { display: block; width: 100%; } #sub-18 .history_01 tr { padding: 12px 0; border-bottom: 1px solid #ddd; } /* 날짜 */ #sub-18 .history_01 td:first-child { padding-left: 0 !important; font-size: 15px; font-weight: 600; color: #207d8b; } /* 내용 */ #sub-18 .history_01 td:last-child { padding: 8px 0 0 !important; } #sub-18 .history_01 li { font-size: 14px; } /* 연도 제목 */ #sub-18 #unit6767 .font-3xl { font-size: 22px !important; } } /* =============================== 작은 모바일 ================================*/ @media (max-width: 480px) { #sub-17 #component5148{ display:flex !important; } #sub-18 .history_01 td:first-child { font-size: 14px; } #sub-18 .history_01 li { font-size: 13px; } } /* =========================== 예배안내(sub-19) 공통 =========================== */ #sub-19 #component1046 { background-size: cover !important; background-position: center !important; } #sub-19 #component6600 { padding-LEFT: 0px important; } /* 원형 카드 공통 */ #sub-19 .col-sm-3 > div, #sub-19 .col-sm-4 > div { margin: 0 auto; } /* =========================== 태블릿 =========================== */ @media (max-width: 1200px) { /* 원형 카드 세로 스택 */ #sub-19 #unit8130 .col-sm-3 div{ width: 210px !important; height: 210px !important; } #sub-19 #unit8130 .col-sm-4 div{ width: 210px !important; height: 210px !important; } #sub-19 #unit8130 .col-sm-3 div .font-xl{ font-size: 1.1rem; } } @media (max-width: 991px) { #sub-19 #unit8130 .col-sm-3 div{ width: 155px !important; height: 155px !important; } #sub-19 #unit8130 .col-sm-4 div{ width: 155px !important; height: 155px !important; } /* 상단 타이틀 영역 높이 축소 */ #sub-19 #component1046 { height: 200px !important; padding-top: 70px !important; } /* 원형 카드 축소 */ #sub-19 .col-sm-3 > div, #sub-19 .col-sm-4 > div { width: 200px !important; height: 200px !important; padding-top: 45px !important; } #sub-19 .col-sm-3:nth-child(3) > div{ padding-top: 15px !important; } #sub-19 .font-xl { font-size: 18px !important; } } /* =========================== 모바일 =========================== */ @media (max-width: 768px) { /* 원형 카드 세로 스택 */ #sub-19 .col-sm-3, #sub-19 .col-sm-4 { width: 100% !important; float: none !important; margin-bottom: 25px; } #sub-19 .col-sm-3 > div, #sub-19 .col-sm-4 > div { width: 160px !important; height: 160px !important; padding-top: 40px !important; line-height: 1.4 !important; } /* 타이틀 글자 */ #sub-19 .font-3xl { font-size: 22px !important; } #sub-19 .font-xl { font-size: 16px !important; } } /* =========================== 작은 모바일 =========================== */ @media (max-width: 480px) { /* #sub-19 .col-sm-3 > div, */ /* #sub-19 .col-sm-4 > div { */ /* width: 150px !important; */ /* height: 150px !important; */ /* padding-top: 32px !important; */ /* } */ #sub-19 .font-xl { font-size: 15px !important; } } @media (max-width: 900px) { #sub-19 #unit8130 > div{ padding: 50px 0px !important; } } @media (max-width: 768px) { /* col-sm-3 / col-sm-4 다시 가로배치 */ #sub-19 .col-sm-3, #sub-19 .col-sm-4 { width: 50% !important; /* 2개씩 */ float: left !important; margin-bottom: 25px; } } @media (max-width: 380px) { #sub-19 .col-sm-3, #sub-19 .col-sm-4 { width: 100% !important; } } @media (min-width: 769px) and (max-width: 1024px) { #sub-19 .col-sm-3 { width: 25% !important; /* 4개 */ } #sub-19 .col-sm-4 { width: 33.333% !important; /* 3개 */ } } @media (max-width: 768px) { #sub-19 .row { margin-left: 0 !important; margin-right: 0 !important; } } @media (max-width: 768px) { #sub-19 .col-sm-3, #sub-19 .col-sm-4 { padding-left: 0 !important; padding-right: 0 !important; } } @media (max-width: 768px){ #sub-30 .col-sm-3, #sub-30 .col-sm-9{ width:100% !important; float:none !important; padding-left:0 !important; padding-right:0 !important; } } @media (max-width: 768px){ #sub-30 .col-sm-3 img{ width:90px; max-width:90px; } } @media (max-width: 768px){ #sub-30 #unit1634 > div{ padding: 20px 30px 100px !important; } } @media (max-width: 768px){ #sub-30 #unit5516 img{ width:100%; height:auto; object-fit:cover; } } @media (max-width:768px){ #sub-30 .font-3xl{ font-size:22px; } #sub-30 .font-2xl{ font-size:18px; } #sub-30 .font-xl{ font-size:15px; } #sub-30 .font-l{ font-size:14px; } } @media (max-width:768px){ #sub-30 table{ display:block; overflow-x:auto; white-space:nowrap; } #sub-30 table tr td, #sub-30 table tr td b{ font-size: 16px; } } @media (max-width:768px){ #sub-30 #component1127 { padding: 0px 0px !important; } #sub-30 .dimode-sort.row.container{ margin:0px auto !important; padding:5px 0 !important; } } @media (max-width: 768px) { #sub-4162 #component1240 { padding: 0px 0px !important; } #sub-4162 .col-sm-3 img { width: 90px; max-width: 90px; } #sub-4162 #component3579 #unit3892 > div { padding: 20px 25px !important; } #sub-4162 #component3579 #unit3892 > div > div{ font-size: 16px !important; } #sub-4162 #component2115 #unit1634 > div { padding: 20px 25px !important; } #sub-4162 #component2115 #unit1634 > div > div{ font-size: 16px !important; } } /* ================================ 하모니 젊은부부모임 반응형 ================================ */ @media (max-width:768px){ /* 전체 좌우 여백 */ #sub-31 .container{ padding-left:15px; padding-right:15px; } #sub-31 .row{ margin-left:0; margin-right:0; } /* ===================== 상단 텍스트 ===================== */ #sub-31 .font-3xl{ font-size:22px; } #sub-31 .font-xl{ font-size:16px; } #sub-31 .font-l{ font-size:14px; line-height:1.6; } /* ===================== 이미지 3열 → 2열 ===================== */ #sub-31 #component3817 .col-sm-4{ width:50% !important; float:left; padding-left:5px; padding-right:5px; } #sub-31 #component3817 img{ width:100%; height:auto; border-radius:8px; } /* 아주 작은 화면은 1열 */ @media (max-width:480px){ #sub-31 #component3817 .col-sm-4{ width:100% !important; } } /* ===================== 하단 흰 박스 패딩 축소 ===================== */ #sub-31 #unit2576 > div{ padding:25px 20px !important; } /* ===================== 대상 / 모임시간 라벨 구조 세로화 ===================== */ #sub-31 .col-sm-2, #sub-31 .col-sm-10{ width:100% !important; float:none !important; } #sub-31 .col-sm-2{ margin-bottom:6px; } #sub-31 .col-sm-10{ margin-top:0 !important; font-size: 16px !important; } #sub-31 .col-sm-10 > span{ font-size: 16px !important; } /* ===================== 섹션 간 간격 축소 ===================== */ #sub-31 .dimode-component{ margin-top:25px !important; } #sub-31 .dimode-sort.row.container{ padding:5px 0 !important; } /* ===================== 아이콘 이미지 크기 ===================== */ #sub-31 img[alt*="icon"]{ width:26px; } } /* ==================================== 블레싱 새순시니어즈 (sub-32) ==================================== */ @media (max-width:768px){ /* 전체 여백 */ #sub-32 .container{ padding-left:15px; padding-right:15px; } #sub-32 .row{ margin-left:0; margin-right:0; } /* ----------------------- 제목 / 본문 폰트 ----------------------- */ #sub-32 .font-3xl{ font-size:22px; } #sub-32 .font-xl{ font-size:16px; } #sub-32 .font-l{ font-size:14px; line-height:1.6; } /* ----------------------- 모임시간 라벨 세로정렬 ----------------------- */ #sub-32 .col-sm-2, #sub-32 .col-sm-10{ width:100% !important; float:none !important; } #sub-32 .col-sm-2{ margin-bottom:6px; } #sub-32 .col-sm-10{ margin-top:0 !important; } /* ----------------------- 상단 사진 3 → 2열 ----------------------- */ #sub-32 #component3817 .col-sm-4{ width:50% !important; float:left; padding-left:5px; padding-right:5px; } #sub-32 #component3817 img{ width:100%; height:auto; border-radius:8px; } /* 작은폰: 1열 */ @media (max-width:480px){ #sub-32 #component3817 .col-sm-4{ width:100% !important; } } /* ----------------------- 흰박스 패딩 축소 ----------------------- */ #sub-32 #unit2576 > div{ padding:25px 20px !important; } /* ----------------------- Mission 원형 카드 ----------------------- */ #sub-32 .col-sm-4 > div[style*="border-radius:200px"]{ width:200px !important; height:200px !important; padding:35px 0 !important; } #sub-32 .col-sm-4{ width:100% !important; float:none !important; margin-bottom:20px; } /* ----------------------- Main Program 영역 ----------------------- */ #sub-32 #component8530 .row{ /* display:flex; */ flex-wrap:wrap; align-items:flex-start; } #sub-32 #component8530 .row{ /* display:flex; */ margin: unset !important; } #sub-32 *{ margin:0 !important; } #sub-32 #component8530 .col-sm-1{ width:20% !important; text-align:center; } #sub-32 #component8530 .col-sm-1 span{ display:block; font-size:14px; } #sub-32 #component8530 .col-sm-8{ width:80% !important; margin-top:6px !important; } /* ----------------------- 아이콘 크기 ----------------------- */ #sub-32 img[alt*="icon"]{ width:26px; } /* ----------------------- 섹션 간격 축소 ----------------------- */ #sub-32 .dimode-component{ margin-top:25px !important; } #sub-32 .dimode-sort.row.container{ padding:5px 0 !important; } } /* sub-32 사진 2열 유지 */ @media (max-width:900px){ #sub-32 #component3817 .col-sm-4{ width:33% !important; float:left !important; padding:5px; } #sub-32 #component3817 img{ width:100%; height:auto; display:block; } } /* 아주 작은 화면에서는 1열 */ @media (max-width:480px){ #sub-32 #component3817 .col-sm-4{ width:100% !important; } } @media (max-width:600px){ #sub-32 .col-sm-10 > span{ font-size: 16px !important; } } /* ========================= 가정이음 (sub-21) 반응형 ========================= */ /* 공통 이미지 */ #sub-21 img{ max-width:100%; height:auto; display:block; } /* 상단 설명 여백 축소 */ @media (max-width:768px){ #sub-21 .font-3xl{ font-size:24px; margin-bottom:20px !important; } #sub-21 .font-l{ font-size:14px; line-height:1.6; } } /* 가정이음 아이콘+설명 세로화 */ @media (max-width:768px){ #sub-21 #component1127 .col-sm-3, #sub-21 #component1127 .col-sm-9{ width:100% !important; float:none !important; } #sub-21 #component1127 .col-sm-3{ text-align:center; padding-top:0 !important; margin-bottom:15px; } #sub-21 #component1127 img{ margin:0 auto 10px; max-width:120px; } } /* 설명 박스 패딩 축소 */ @media (max-width:768px){ #sub-21 #component1127 [style*="padding: 50px 70px"]{ padding:25px 20px !important; } } /* 중간 큰 이미지 높이 안정 */ @media (max-width:768px){ #sub-21 #component9725 img{ border-radius:10px; } #sub-21 #unit1634 > div{ font-size: 16px !important; } } /* 모바일 더 작을 때 */ @media (max-width:480px){ #sub-21 .font-2xl{ font-size:18px; } #sub-21 #component1127 img{ max-width:100px; } } /* ========================= sub-23 반응형 ========================= */ @media (max-width: 991px){ /* 전체 여백 */ #sub-23 .container{ padding-left:20px; padding-right:20px; } /* 메인 제목 */ #sub-23 .font-3xl{ font-size:32px !important; line-height:1.3; margin-bottom:20px !important; } /* 주소 */ #sub-23 .font-l{ font-size:16px !important; line-height:1.6; } /* 연락처 리스트 */ #sub-23 #unit1232 .row{ display:flex; flex-wrap:nowrap; align-items:flex-start; gap:12px; margin-top:18px !important; } /* 아이콘 */ #sub-23 #unit1232 .col-sm-1{ width:28px !important; min-width:28px; padding:0; } #sub-23 #unit1232 .col-sm-1 img{ width:22px; height:auto; margin-top:2px !important; } /* 항목명 */ #sub-23 #unit1232 .col-sm-2{ width:auto !important; min-width:85px; padding:0; font-size:15px; line-height:1.5; } /* 내용 */ #sub-23 #unit1232 .col-sm-9{ flex:1; width:auto !important; padding:0; font-size:14px; line-height:1.7; word-break:keep-all; } /* 약도 + 지도 */ #sub-23 #unit2576 .row{ display:flex; flex-direction:column; gap:25px; } #sub-23 #unit2576 .col-sm-6{ width:100%; padding:0; } /* 이미지 */ #sub-23 #unit2576 img{ width:100%; height:auto; display:block; border-radius:15px; } /* 지도 */ #sub-23 #daumRoughmapContainer1771424514453{ width:100% !important; height:320px !important; border-radius:15px; overflow:hidden; } #sub-23 #daumRoughmapContainer1771424514453 .wrap_map{ width:100% !important; height:320px !important; } /* 본관 안내 박스 */ #sub-23 #unit9425 > div{ padding:30px 25px !important; border-radius:15px !important; } #sub-23 #unit9425 .font-xl{ font-size:26px !important; } } /* ========================= 모바일 ========================= */ @media (max-width: 767px){ /* 전체 */ #sub-23 .container{ padding-left:22px; padding-right:22px; } /* 타이틀 */ #sub-23 .font-3xl{ font-size:27px !important; line-height:1.35; margin-bottom:18px !important; } /* 주소 */ #sub-23 .font-l{ font-size:15px !important; line-height:1.7; word-break:keep-all; } /* 리스트 */ #sub-23 #unit1232 .row{ display:flex; align-items:flex-start; gap:14px; margin-top:24px !important; } /* 아이콘 */ #sub-23 #unit1232 .col-sm-1{ width:24px !important; min-width:24px; padding:0; } #sub-23 #unit1232 .col-sm-1 img{ width:24px; margin-top:3px !important; } /* 제목 */ #sub-23 #unit1232 .col-sm-2{ width:auto !important; min-width:110px; padding:0; } #sub-23 #unit1232 .col-sm-2 b{ font-size:17px; line-height:1.4; white-space:nowrap; } /* 내용 */ #sub-23 #unit1232 .col-sm-9{ flex:1; width:auto !important; padding:0; font-size:14px; line-height:1.8; color:#666; word-break:keep-all; } /* 지도 + 이미지 */ #sub-23 #unit2576 .row{ display:flex; flex-direction:column; gap:24px; } #sub-23 #unit2576 .col-sm-6{ width:100%; padding:0; } #sub-23 #unit2576 img{ width:100%; border-radius:14px; } /* 지도 */ #sub-23 #daumRoughmapContainer1771424514453{ width:100% !important; height:260px !important; border-radius:14px; overflow:hidden; } #sub-23 #daumRoughmapContainer1771424514453 .wrap_map{ height:260px !important; } } .section_address { display: none;} @media (max-width: 768px) { #sub-24 #unit2576 > div { padding: 10px 10px !important; } #sub-25 #unit9425 > div{ padding: 50px 20px !important; } #sub-25 #unit9425 > div >div >div>div:last-child{ font-size: 16px !important; } } @media (max-width: 768px) { #sub-218 #unit9523 li > a, #sub-218 #unit9523 li.active > a, #sub-218 #unit9523 li > a:hover, #sub-218 #unit9523 li > a:focus { font-size: 16px !important; } @media (max-width: 768px) { #sub-218 .dimode-tabcontent li{ font-size: 14px !important; } #sub-218 .dimode-tabcontent td{ font-size: 16px !important; } #sub-218 .history_01 td:nth-child(1) { padding-left: 10px !important; font-weight: 600; color: #207d8b; } #sub-218 .history_01 td { padding: 8px ! important; } } /* ====== 찾아오시는 길 지도 반응형 (#sub-23 전용) ====== */ /* 부모 row를 flex로 강제 */ #sub-23 #unit2576 > .row { display: flex !important; align-items: stretch; } /* Bootstrap float 제거 */ #sub-23 #unit2576 > .row > .col-sm-6 { float: none !important; display: flex; flex-direction: column; } /* 약도 이미지 */ #sub-23 #unit2576 img { width: 100%; height: auto; display: block; } /* 지도 영역 채우기 */ #sub-23 #unit2576 .root_daum_roughmap { width: 100% !important; height: 100% !important; border-radius: 10px; overflow: hidden; } /* 카카오맵 iframe 높이 강제 */ #sub-23 #unit2576 .root_daum_roughmap iframe { height: 100% !important; } /* ===== 모바일 반응형 ===== */ @media (max-width: 768px) { /* 세로 정렬 */ #sub-23 #unit2576 > .row { flex-direction: column; } /* 모바일 지도 높이 */ #sub-23 #unit2576 .root_daum_roughmap { height: 350px !important; } } /* ===== 지도 영역만 정확히 타겟 ===== */ /* 지도 있는 row만 flex */ #sub-23 #unit2576 > .row { display: flex !important; align-items: stretch; } /* 지도 row 안의 col만 적용 */ #sub-23 #unit2576 > .row > .col-sm-6 { float: none !important; display: flex; flex-direction: column; padding-right: 45px; } /* 약도 이미지 */ #sub-23 #unit2576 > .row > .col-sm-6 img { width: 100%; height: auto; display: block; } /* 지도 영역 채우기 */ #sub-23 #unit2576 > .row .root_daum_roughmap { width: 100% !important; height: 100% !important; } /* iframe 높이 */ #sub-23 #unit2576 > .row .root_daum_roughmap iframe { height: 100% !important; } /* ===== 모바일 ===== */ @media (max-width: 768px) { #sub-23 #unit2576 > .row { flex-direction: column; } #sub-23 #unit2576 > .row .root_daum_roughmap { height: 350px !important; } *, #sub-23 *::before, #sub-23 *::after { box-sizing: border-box; } #sub-23 * { margin: 0; } } /* ===== 약도 + 지도 높이 동일 ===== */ @media (min-width: 992px){ #unit2576 .row { display:flex; align-items:stretch; } #unit2576 .col-sm-6 { display:flex; flex-direction:column; } /* 왼쪽 약도 이미지 */ #unit2576 img { width:100%; height:100%; object-fit:contain; } /* 오른쪽 카카오맵 */ #unit2576 .root_daum_roughmap { flex:1; height:100% !important; } } /* 모바일에서 지도 안나오는 문제 해결 */ @media (max-width: 768px){ #daumRoughmapContainer1771424514453{ width:100% !important; height:300px !important; } } /* ========================= MOBILE RESPONSIVE FIX ========================= */ @media (max-width: 768px){ /* 전체 padding 줄이기 */ #sub-32 .dimode-unit > div{ padding:30px 20px !important; } /* 상단 이미지 3개 → 1열 */ #sub-32 #component3817 .col-sm-4{ width:100% !important; } /* Mission 동그라미 */ #sub-32 .col-sm-4{ width:100% !important; margin-bottom:30px; } /* 동그라미 크기 줄이기 */ #sub-32 [style*="border-radius:200px"]{ width:220px !important; height:220px !important; padding:40px 0 !important; } /* Program row 정렬 */ #sub-32 .row > .col-sm-1{ width:15% !important; } #sub-32 .row > .col-sm-8{ width:85% !important; padding-bottom: 25px; } /* Program 제목 줄바꿈 방지 */ #sub-32 .font-xl{ font-size:18px !important; } /* 아이콘 중앙정렬 */ #sub-32 .col-sm-1{ text-align:center; } /* 전체 텍스트 줄간격 */ #sub-32{ line-height:1.6; } /* 제목 간격 */ #sub-32 hr{ margin:25px 0 !important; } } /* ===== flex 강제 해제 ===== */ @media (min-width:1200px){ #sub-32 #component9835 .container{ display:block !important; height:auto !important; justify-content:unset !important; align-items:unset !important; } } @media (max-width: 768px) { #sub-24 #unit2576 > div hr { margin-top: 10px !important; margin-bottom: 10px !important; } } /* ====================================== sub-4162 유아부 반응형 전용 ====================================== */ /* ====================================== 📱 모바일 (768px 이하) ====================================== */ @media (max-width:768px){ /* ===== 제목 ===== */ #sub-4162 .font-3xl{ font-size:22px !important; margin-bottom:20px !important; } /* ===== 대상 / 시간 영역 ===== */ #sub-4162 .row{ display:flex; flex-wrap:wrap; align-items:center; } #sub-4162 .col-sm-1{ width:auto !important; flex:0 0 auto; } #sub-4162 .col-sm-9{ flex:1; font-size: 16px; } /* ===== 이미지 3개 ===== */ #sub-4162 #component1234 .col-sm-4{ width:100% !important; margin-bottom:15px; } #sub-4162 #component1234 img{ border-radius:12px; } /* ===== WIDE 카드 영역 ===== */ #sub-4162 #component1240 .dimode-unit > div{ padding:25px 20px !important; border-radius:16px !important; } /* 카드 내부 row 세로 정렬 */ #sub-4162 #component1240 .row{ display:block; } #sub-4162 #component1240 .col-sm-2{ width:100% !important; margin:0 0 20px 0 !important; text-align:center; } #sub-4162 #component1240 .col-sm-10{ width:100% !important; } /* hr 간격 축소 */ #sub-4162 #component1240 hr{ margin:20px 0 !important; } #sub-4162 #component1240 div:last-child { font-size: 16px; } } /* ====================================== sub-4162 카드 아이콘 크기 조절 ====================================== */ @media (max-width:768px){ /* 카드 안 아이콘 이미지 */ #sub-4162 #component1240 .col-sm-2 img{ width:80px !important; /* 🔥 여기 숫자로 조절 */ margin:0 auto; } } /* ====================================== sub-4163 유아부 반응형 전용 ====================================== */ /* ====================================== 📱 모바일 (768px 이하) ====================================== */ @media (max-width:768px){ /* ===== 제목 ===== */ #sub-4163 .font-3xl{ font-size:22px !important; margin-bottom:20px !important; } /* ===== 대상 / 시간 영역 ===== */ #sub-4163 .row{ display:flex; flex-wrap:wrap; align-items:center; } #sub-4163 .col-sm-1{ width:auto !important; flex:0 0 auto; } #sub-4163 .col-sm-9{ flex:1; font-size: 16px; } /* ===== 이미지 3개 ===== */ #sub-4163 #component1234 .col-sm-4{ width:100% !important; margin-bottom:15px; } #sub-4163 #component1234 img{ border-radius:12px; } /* ===== WIDE 카드 영역 ===== */ #sub-4163 #component1240 .dimode-unit > div{ padding:25px 20px !important; border-radius:16px !important; } /* 카드 내부 row 세로 정렬 */ #sub-4163 #component1240 .row{ display:block; } #sub-4163 #component1240 .col-sm-2{ width:100% !important; margin:0 0 20px 0 !important; text-align:center; } #sub-4163 #component1240 .col-sm-10{ width:100% !important; } /* hr 간격 축소 */ #sub-4163 #component1240 hr{ margin:20px 0 !important; } #sub-4163 #component1240 div:last-child { font-size: 16px; } } /* ====================================== sub-4163 카드 아이콘 크기 조절 ====================================== */ @media (max-width:768px){ /* 카드 안 아이콘 이미지 */ #sub-4163 #component1240 .col-sm-2 img{ width:80px !important; /* 🔥 여기 숫자로 조절 */ margin:0 auto; } } /* ========================================= sub-4164 반응형 개선 ========================================= */ @media (max-width:768px){ /* 카드 패딩 축소 */ #sub-4164 #component1240 > .dimode-sort > .col-sm-12 > .dimode-sort > div { padding:30px 20px !important; } /* 이미지 3개 세로 정렬 */ #sub-4164 #component1234 .col-sm-4{ width:100% !important; margin-bottom:15px; } /* 대상 / 시간 정렬 개선 */ #sub-4164 #component5364 .row{ display:flex; align-items:center; flex-wrap:wrap; } #sub-4164 #component5364 .col-sm-1{ width:auto !important; margin: 0; } #sub-4164 #component5364 .col-sm-9{ width:100% !important; margin-top:5px; font-size: 16px; } /* 카드 상단 아이콘 축소 */ #sub-4164 #component1240 .col-sm-2 img{ width:70px !important; margin:0 auto 15px; display:block; } /* 01,02 타이틀 중앙 정렬 */ #sub-4164 .font-xl{ text-align:center; } /* 방향성 row 세로 정렬 */ #sub-4164 #component3579 .row{ display:block; } #sub-4164 #component3579 .col-sm-3{ width:100% !important; text-align:center; margin-bottom:20px; } #sub-4164 #component3579 .col-sm-9{ width:100% !important; margin-top:5px; text-align:left; } #sub-4164 #component3579 .col-sm-10 div:last-child{ font-size: 16px; } /* 보라색 버튼 width 자연스럽게 */ #sub-4164 #component3579 .col-sm-3 div[style*="background-color"]{ width:auto !important; padding:8px 20px !important; } } /* ===================================== sub-4164 중간 해상도 정리 (진짜 수정) ===================================== */ @media (min-width:992px) and (max-width:1400px){ /* 전체 container 폭 정리 */ #sub-4164 #component1240 .container{ padding-left:40px !important; padding-right:40px !important; } /* 카드 폭 줄이기 */ #sub-4164 #component1240 .dimode-unit > div{ max-width:800px; margin:0 auto 60px auto; } #sub-4164 #component1240 .container{ display: block !important; } #sub-4164 .row, #sub-4164 .dimode-sort{ display:block !important; } } /* ===================================== sub-4164 1200~1499px 구간 정렬 수정 ===================================== */ @media (min-width:1200px) and (max-width:1499px){ #sub-4164 #component3579 .col-sm-3{ display:flex !important; align-items:center; gap:12px; } #sub-4164 #component3579 .col-sm-3 img{ margin-top:0 !important; } #sub-4164 #component3579 .col-sm-3 div[style*="background-color"]{ width:auto !important; padding:8px 18px !important; } #sub-4164 #component3579 #unit3892 div > div > div:last-child{ width:100% !important; } } /* ====================================== #sub-4164 보라색 라벨 위에 아이콘 겹치기 ====================================== */ @media (max-width:768px){ /* 아이콘 + pill 감싸는 영역 */ #sub-4164 .col-sm-3{ position: relative; text-align: center; padding-top: 35px; /* 아이콘 공간 */ } /* 보라색 pill */ #sub-4164 .col-sm-3 > div[style*="#9b86e6"]{ position: relative; z-index: 1; } /* 아이콘 */ #sub-4164 .col-sm-3 > img{ position: absolute; top: -10px; left: 50%; transform: translateX(-35%); width: 28px; height: auto; z-index: 2; } } @media (min-width: 768px) { #sub-4164 #unit3892 .col-sm-10 { width: 100% !important; } } /* ====================================== 유년부 페이지 모바일에서 아이콘 숨기기 ====================================== */ @media (max-width: 1400px){ /* 방향성 영역 보라색 pill 위 아이콘들 */ #sub-4164 #unit3892 .col-sm-3 > img{ display: none !important; } /* 상단 대상/시간 아이콘도 같이 숨기고 싶다면 */ #sub-4164 #unit3892 .col-sm-1 img{ display: none !important; } } /* ====================================== 아이콘 + 보라 pill 같은 줄로 정렬 ====================================== */ #sub-4164 .col-sm-3{ display: flex; flex-direction: column; align-items: center; } /* 아이콘 */ #sub-4164 .col-sm-3 > img{ display: block; margin-bottom: 8px; /* pill과 간격 */ } /* 보라 pill */ #sub-4164 .col-sm-3 > div{ display: inline-block; } /* ====================================== sub-4165 유아부 반응형 전용 ====================================== */ /* ====================================== 📱 모바일 (768px 이하) ====================================== */ @media (max-width:768px){ /* ===== 제목 ===== */ #sub-4165 .font-3xl{ font-size:22px !important; margin-bottom:20px !important; } /* ===== 대상 / 시간 영역 ===== */ #sub-4165 .row{ display:flex; flex-wrap:wrap; align-items:center; } #sub-4165 .col-sm-1{ width:auto !important; flex:0 0 auto; } #sub-4165 .col-sm-9{ flex:1; font-size: 16px; } /* ===== 이미지 3개 ===== */ #sub-4165 #component1234 .col-sm-4{ width:100% !important; margin-bottom:15px; } #sub-4165 #component1234 img{ border-radius:12px; } /* ===== WIDE 카드 영역 ===== */ #sub-4165 #component1240 .dimode-unit > div{ padding:25px 20px !important; border-radius:16px !important; } /* 카드 내부 row 세로 정렬 */ #sub-4165 #component1240 .row{ display:block; } #sub-4165 #component1240 .col-sm-2{ width:100% !important; margin:0 0 20px 0 !important; text-align:center; } #sub-4165 #component1240 .col-sm-10{ width:100% !important; } /* hr 간격 축소 */ #sub-4165 #component1240 hr{ margin:20px 0 !important; } #sub-4165 #component1240 div:last-child { font-size: 16px; } } /* ====================================== sub-4165 카드 아이콘 크기 조절 ====================================== */ @media (max-width:768px){ /* 카드 안 아이콘 이미지 */ #sub-4165 #component1240 .col-sm-2 img{ width:80px !important; /* 🔥 여기 숫자로 조절 */ margin:0 auto; } } /* ====================================== sub-4166 유아부 반응형 전용 ====================================== */ /* ====================================== 📱 모바일 (768px 이하) ====================================== */ @media (max-width:768px){ /* ===== 제목 ===== */ #sub-4166 .font-3xl{ font-size:22px !important; margin-bottom:20px !important; } /* ===== 대상 / 시간 영역 ===== */ #sub-4166 .row{ display:flex; flex-wrap:wrap; align-items:center; } #sub-4166 .col-sm-1{ width:auto !important; flex:0 0 auto; } #sub-4166 .col-sm-9{ flex:1; font-size: 16px; } /* ===== 이미지 3개 ===== */ #sub-4166 #component1234 .col-sm-4{ width:100% !important; margin-bottom:15px; } #sub-4166 #component1234 img{ border-radius:12px; } /* ===== WIDE 카드 영역 ===== */ #sub-4166 #component1240 .dimode-unit > div{ padding:25px 20px !important; border-radius:16px !important; } /* 카드 내부 row 세로 정렬 */ #sub-4166 #component1240 .row{ display:block; } #sub-4166 #component1240 .col-sm-2{ width:100% !important; margin:0 0 20px 0 !important; text-align:center; } #sub-4166 #component1240 .col-sm-10{ width:100% !important; } /* hr 간격 축소 */ #sub-4166 #component1240 hr{ margin:20px 0 !important; } #sub-4166 #component1240 div:last-child { font-size: 16px; } } /* ====================================== sub-4166 카드 아이콘 크기 조절 ====================================== */ @media (max-width:768px){ /* 카드 안 아이콘 이미지 */ #sub-4166 #component1240 .col-sm-2 img{ width:80px !important; /* 🔥 여기 숫자로 조절 */ margin:0 auto; } } /* ====================================== sub-4167 유아부 반응형 전용 ====================================== */ /* ====================================== 📱 모바일 (768px 이하) ====================================== */ @media (max-width:768px){ /* ===== 제목 ===== */ #sub-4167 .font-3xl{ font-size:22px !important; margin-bottom:20px !important; } /* ===== 대상 / 시간 영역 ===== */ #sub-4167 .row{ display:flex; flex-wrap:wrap; align-items:center; } #sub-4167 .col-sm-1{ width:auto !important; flex:0 0 auto; } #sub-4167 .col-sm-9{ flex:1; font-size: 16px; } /* ===== 이미지 3개 ===== */ #sub-4167 #component1234 .col-sm-4{ width:100% !important; margin-bottom:15px; } #sub-4167 #component1234 img{ border-radius:12px; } /* ===== WIDE 카드 영역 ===== */ #sub-4167 #component1240 .dimode-unit > div{ padding:25px 20px !important; border-radius:16px !important; } /* 카드 내부 row 세로 정렬 */ #sub-4167 #component1240 .row{ display:block; } #sub-4167 #component1240 .col-sm-2{ width:100% !important; margin:0 0 20px 0 !important; text-align:center; } #sub-4167 #component1240 .col-sm-10{ width:100% !important; } /* hr 간격 축소 */ #sub-4167 #component1240 hr{ margin:20px 0 !important; } #sub-4167 #component1240 div:last-child { font-size: 16px; } } /* ====================================== sub-4167 카드 아이콘 크기 조절 ====================================== */ @media (max-width:768px){ /* 카드 안 아이콘 이미지 */ #sub-4167 #component1240 .col-sm-2 img{ width:80px !important; /* 🔥 여기 숫자로 조절 */ margin:0 auto; } } /* ========================================= sub-4168 반응형 개선 ========================================= */ @media (max-width:768px){ /* 카드 패딩 축소 */ #sub-4168 #component1240 > .dimode-sort > .col-sm-12 > .dimode-sort > div { padding:30px 20px !important; } /* 이미지 3개 세로 정렬 */ #sub-4168 #component1234 .col-sm-4{ width:100% !important; margin-bottom:15px; } /* 대상 / 시간 정렬 개선 */ #sub-4168 #component5364 .row{ display:flex; align-items:center; flex-wrap:wrap; } #sub-4168 #component5364 .col-sm-1{ width:auto !important; margin: 0; } #sub-4168 #component5364 .col-sm-9{ width:100% !important; margin-top:5px; font-size: 16px; } /* 카드 상단 아이콘 축소 */ #sub-4168 #component1240 .col-sm-2 img{ width:70px !important; margin:0 auto 15px; display:block; } /* 01,02 타이틀 중앙 정렬 */ #sub-4168 .font-xl{ text-align:center; } /* 방향성 row 세로 정렬 */ #sub-4168 #component3579 .row{ display:block; } #sub-4168 #component3579 .col-sm-3{ width:100% !important; text-align:center; margin-bottom:20px; } #sub-4168 #component3579 .col-sm-9{ width:100% !important; margin-top:5px; text-align:left; } #sub-4168 #component3579 .col-sm-10 div:last-child{ font-size: 16px; } /* 보라색 버튼 width 자연스럽게 */ #sub-4168 #component3579 .col-sm-3 div[style*="background-color"]{ width:auto !important; padding:8px 20px !important; } } /* ===================================== sub-4168 중간 해상도 정리 (진짜 수정) ===================================== */ @media (min-width:992px) and (max-width:1400px){ /* 전체 container 폭 정리 */ #sub-4168 #component1240 .container{ padding-left:40px !important; padding-right:40px !important; } /* 카드 폭 줄이기 */ #sub-4168 #component1240 .dimode-unit > div{ max-width:800px; margin:0 auto 60px auto; } #sub-4168 #component1240 .container{ display: block !important; } #sub-4168 .row, #sub-4168 .dimode-sort{ display:block !important; } } /* ===================================== sub-4168 1200~1499px 구간 정렬 수정 ===================================== */ @media (min-width:1200px) and (max-width:1499px){ #sub-4168 #component3579 .col-sm-3{ display:flex !important; align-items:center; gap:12px; } #sub-4168 #component3579 .col-sm-3 img{ margin-top:0 !important; } #sub-4168 #component3579 .col-sm-3 div[style*="background-color"]{ width:auto !important; padding:8px 18px !important; } #sub-4168 #component3579 #unit3892 div > div > div:last-child{ width:100% !important; } } /* ====================================== #sub-4168 보라색 라벨 위에 아이콘 겹치기 ====================================== */ @media (max-width:768px){ /* 아이콘 + pill 감싸는 영역 */ #sub-4168 .col-sm-3{ position: relative; text-align: center; padding-top: 35px; /* 아이콘 공간 */ } /* 보라색 pill */ #sub-4168 .col-sm-3 > div[style*="#9b86e6"]{ position: relative; z-index: 1; } v /* 아이콘 */ #sub-4168 .col-sm-3 > img{ position: absolute; top: -10px; left: 50%; transform: translateX(-35%); width: 28px; height: auto; z-index: 2; } } @media (min-width: 768px) { #sub-4168 #unit3892 .col-sm-10 { width: 100% !important; } } /* ====================================== 유년부 페이지 모바일에서 아이콘 숨기기 ====================================== */ @media (max-width: 1400px){ /* 방향성 영역 보라색 pill 위 아이콘들 */ #sub-4168 #unit3892 .col-sm-3 > img{ display: none !important; } /* 상단 대상/시간 아이콘도 같이 숨기고 싶다면 */ #sub-4168 #unit3892 .col-sm-1 img{ display: none !important; } } /* ====================================== 아이콘 + 보라 pill 같은 줄로 정렬 ====================================== */ #sub-4168 .col-sm-3{ display: flex; flex-direction: column; align-items: center; } /* 아이콘 */ #sub-4168 .col-sm-3 > img{ display: block; margin-bottom: 8px; /* pill과 간격 */ } /* 보라 pill */ #sub-4168 .col-sm-3 > div{ display: inline-block; } /* ====================================== sub-211 유아부 반응형 전용 ====================================== */ /* ====================================== 📱 모바일 (768px 이하) ====================================== */ @media (max-width:768px){ /* ===== 제목 ===== */ #sub-211 .font-3xl{ font-size:22px !important; margin-bottom:20px !important; } /* ===== 대상 / 시간 영역 ===== */ #sub-211 .row{ display:flex; flex-wrap:wrap; align-items:center; } #sub-211 .col-sm-1{ width:auto !important; flex:0 0 auto; } #sub-211 .col-sm-9{ flex:1; font-size: 16px; } /* ===== 이미지 3개 ===== */ #sub-211 #component1234 .col-sm-4{ width:100% !important; margin-bottom:15px; } #sub-211 #component1234 img{ border-radius:12px; } /* ===== WIDE 카드 영역 ===== */ #sub-211 #component1240 .dimode-unit > div{ padding:25px 20px !important; border-radius:16px !important; } /* 카드 내부 row 세로 정렬 */ #sub-211 #component1240 .row{ display:block; } #sub-211 #component1240 .col-sm-2{ width:100% !important; margin:0 0 20px 0 !important; text-align:center; } #sub-211 #component1240 .col-sm-10{ width:100% !important; } /* hr 간격 축소 */ #sub-211 #component1240 hr{ margin:20px 0 !important; } #sub-211 #component1240 div:last-child { font-size: 16px; } #sub-211 #component3579 div:last-child tr td { font-size: 16px; } #sub-211 #component3579 div:last-child tr td b { font-size: 16px; } } /* ====================================== sub-211 카드 아이콘 크기 조절 ====================================== */ @media (max-width:768px){ /* 카드 안 아이콘 이미지 */ #sub-211 #component1240 .col-sm-2 img{ width:80px !important; /* 🔥 여기 숫자로 조절 */ margin:0 auto; } } /* ====================================== sub-31 유아부 반응형 전용 ====================================== */ /* ====================================== 📱 모바일 (768px 이하) ====================================== */ @media (max-width:768px){ /* ===== 제목 ===== */ #sub-31 .font-3xl{ font-size:22px !important; margin-bottom:20px !important; } /* ===== 대상 / 시간 영역 ===== */ #sub-31 .row{ display:flex; flex-wrap:wrap; align-items:center; } #sub-31 .col-sm-1{ width:auto !important; flex:0 0 auto; } #sub-31 .col-sm-9{ flex:1; font-size: 16px; } /* ===== 이미지 3개 ===== */ #sub-31 #component1234 .col-sm-4{ width:100% !important; margin-bottom:15px; } #sub-31 #component1234 img{ border-radius:12px; } /* ===== WIDE 카드 영역 ===== */ #sub-31 #component1240 .dimode-unit > div{ padding:25px 20px !important; border-radius:16px !important; } /* 카드 내부 row 세로 정렬 */ #sub-31 #component1240 .row{ display:block; } #sub-31 #component1240 .col-sm-2{ width:100% !important; margin:0 0 20px 0 !important; text-align:center; } #sub-31 #component1240 .col-sm-10{ width:100% !important; } /* hr 간격 축소 */ #sub-31 #component1240 hr{ margin:20px 0 !important; } #sub-31 #component1240 div:last-child { font-size: 16px; } #sub-31 #component8530 div > div:last-child { font-size: 16px; } #sub-31 #unit9425 div{ padding: 20px 10px !important; margin-top: 10px !important; font-size: 16px; } } /* ====================================== sub-31 카드 아이콘 크기 조절 ====================================== */ @media (max-width:768px){ /* 카드 안 아이콘 이미지 */ #sub-31 #component1240 .col-sm-2 img{ width:80px !important; /* 🔥 여기 숫자로 조절 */ margin:0 auto; } } /* ====================================== 대상 및 시간 카드 모바일 정렬 수정 ====================================== */ @media (max-width:768px){ /* row를 grid처럼 쓰지 않게 */ #sub-31 .row{ display:block !important; margin:0 !important; } /* col을 100% 폭으로 */ #sub-31 .col-sm-2, #sub-31 .col-sm-10{ width:100% !important; padding:0 !important; } /* 파란 pill 가운데 정렬 */ #sub-31 .col-sm-2 > div{ width:40% !important; } #sub-31 .col-sm-10 { margin-top: 10px!important; margin-bottom: 30px!important; } } .navbar.navbar-default { background: rgba(0, 0, 0, 0.55) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: none !important; box-shadow: 0 4px 20px rgba(0,0,0,0.25); } @media (max-width: 768px) { /* ===== 전체 공통 영역 ===== */ #sub-4162, #sub-4163, #sub-4164, #sub-4165, #sub-4166, #sub-4167, #sub-4168 { padding: 0 15px; } /* ===== 제목 ===== */ #sub-4162 .font-3xl, #sub-4163 .font-3xl, #sub-4164 .font-3xl, #sub-4165 .font-3xl, #sub-4166 .font-3xl, #sub-4167 .font-3xl, #sub-4168 .font-3xl { font-size: 20px !important; text-align: center; } #sub-4162 .font-3xl img, #sub-4163 .font-3xl img, #sub-4164 .font-3xl img, #sub-4165 .font-3xl img, #sub-4166 .font-3xl img, #sub-4167 .font-3xl img, #sub-4168 .font-3xl img { max-width: 40px; height: auto; } /* ===== 3단 → 1단 ===== */ #sub-4162 .col-sm-4, #sub-4163 .col-sm-4, #sub-4164 .col-sm-4, #sub-4165 .col-sm-4, #sub-4166 .col-sm-4, #sub-4167 .col-sm-4, #sub-4168 .col-sm-4 { width: 100% !important; border-right: none !important; padding: 20px !important; text-align: center; } /* ===== 패딩 줄이기 ===== */ #sub-4162 #component5364, #sub-4163 #component5364, #sub-4164 #component5364, #sub-4165 #component5364, #sub-4166 #component5364, #sub-4167 #component5364, #sub-4168 #component5364 { padding: 10px 15px !important; } /* ===== 이미지 3개 → 세로 ===== */ #sub-4162 .dimode-unit.col-sm-4, #sub-4163 .dimode-unit.col-sm-4, #sub-4164 .dimode-unit.col-sm-4, #sub-4165 .dimode-unit.col-sm-4, #sub-4166 .dimode-unit.col-sm-4, #sub-4167 .dimode-unit.col-sm-4, #sub-4168 .dimode-unit.col-sm-4 { width: 100% !important; margin-bottom: 10px; } #sub-4162 .dimode-unit.col-sm-4 img, #sub-4163 .dimode-unit.col-sm-4 img, #sub-4164 .dimode-unit.col-sm-4 img, #sub-4165 .dimode-unit.col-sm-4 img, #sub-4166 .dimode-unit.col-sm-4 img, #sub-4167 .dimode-unit.col-sm-4 img, #sub-4168 .dimode-unit.col-sm-4 img { width: 100%; height: auto; display: block; } /* ===== 2단 → 1단 ===== */ #sub-4162 #component4667 > div, #sub-4163 #component4667 > div, #sub-4164 #component4667 > div, #sub-4165 #component4667 > div, #sub-4166 #component4667 > div, #sub-4167 #component4667 > div, #sub-4168 #component4667 > div { width: 100% !important; padding: 0 !important; } /* ===== height 제거 (핵심) ===== */ #sub-4162 #component4667 .dimode-unit div, #sub-4163 #component4667 .dimode-unit div, #sub-4164 #component4667 .dimode-unit div, #sub-4165 #component4667 .dimode-unit div, #sub-4166 #component4667 .dimode-unit div, #sub-4167 #component4667 .dimode-unit div, #sub-4168 #component4667 .dimode-unit div { height: auto !important; padding: 25px !important; } /* ===== 텍스트 ===== */ #sub-4162 .tit, #sub-4163 .tit, #sub-4164 .tit, #sub-4165 .tit, #sub-4166 .tit, #sub-4167 .tit, #sub-4168 .tit { font-size: 14px; margin-bottom: 10px; } } .youtubeicon{ display:none; } [id="sub-4280"] .youtubeicon{ display:inline-block !important; } /* 오시는 길 페이지 확대 대응 */ #sub-23 .col-sm-1{ width:40px !important; flex:0 0 40px; } #sub-23 .col-sm-2{ width:140px !important; flex:0 0 140px; line-height:1.6; padding-top:2px; } #sub-23 .col-sm-9{ flex:1; width:auto !important; line-height:1.8; word-break:keep-all; padding-top:2px; } /* 확대율 대응 */ @media (max-width:768px){ #sub-23 .col-sm-9{ font-size:15px; } } #sub-23 .col-sm-1 { display:flex; align-items:center; } #sub-23 .col-sm-1{ width:40px !important; flex:0 0 40px; } #sub-23 .col-sm-2{ width:140px !important; flex:0 0 140px; } /* 오시는 길 리스트만 */ #sub-23 #unit1232 > .row{ display:flex; align-items:flex-start; flex-wrap:nowrap; gap:12px; } #sub-23 #unit1232 .col-sm-1{ width:30px !important; flex:0 0 30px; } #sub-23 #unit1232 .col-sm-2{ width:120px !important; flex:0 0 120px; display:flex; align-items:center; } #sub-23 #unit1232 .col-sm-9{ flex:1; width:auto !important; line-height:1.8; word-break:keep-all; } @media(max-width:768px){ #sub-23 #unit1232 > .row{ display:grid; grid-template-columns: 30px 1fr; column-gap:12px; row-gap:10px; align-items:start; } /* 아이콘 */ #sub-23 #unit1232 .col-sm-1{ grid-column:1; grid-row:1; width:auto !important; } /* 제목 */ #sub-23 #unit1232 .col-sm-2{ grid-column:2; grid-row:1; width:auto !important; } /* 내용 */ #sub-23 #unit1232 .col-sm-9{ grid-column:2; grid-row:2; width:auto !important; padding-left:0; margin-top:-5px; line-height:1.8; word-break:keep-all; } } #sub-22 .items-wrapper { display: none; }