@charset "utf-8";



html,body {font-size:16px;	margin:0; padding:0;}
section,article,header,footer,nav,
div,p,
h1,h2,h3,h4,h5,h6,
ul,ol,li,dl,dd,dt,
img,a,
form,input,select,option,fieldset,textarea,button,label,
figure,video {
	margin:0;
	padding:0;
	border:0;
	background-repeat:no-repeat;
	background-position:center;
	background-color:transparent;
	line-height:1;
	text-decoration:none;
	font-family:'Pretendard','맑은 고딕',돋움,'Apple SD Gothic Neo',sans-serif;
	font-weight:500;
	color:#222;
	box-sizing:border-box;
	text-size-adjust:none;
	list-style:none;
	word-break: keep-all;
    letter-spacing: 0;
}
a:link, a:visited,
a:hover, a:focus, a:active {
	text-decoration:none;
}

table {width:100%; border-spacing:0; border-collapse:collapse;}

/* 폼초기화 */
select,button,input[type=text],input[type=submit],textarea	{
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	/* border-radius:0; */
}

select	{	box-sizing:border-box;}
/*크롬사라피*/
@media screen and (-webkit-min-device-pixel-ratio:0){
	select	{	padding-right:22px !important;	background:url(/images/bg_select.svg) no-repeat right center; background-size:contain;}
}
/*파이어폭스*/
@-moz-document url-prefix(){
	select	{	padding-right:22px !important;	background:url(/images/bg_select.svg) no-repeat right center; background-size:contain;}
}

/*========= input ===========*/
.unit {position: absolute; right:10px; top:50%; transform:translateY(-50%);}
.ip_comm	{display:block; width:100%; height:48px; padding:0 15px; border:0; background-color:transparent; border-radius:4px; font-size:1rem; box-sizing:border-box; outline:none;}
.ip_comm:focus	{background-color: #ffffee;}
.ip_comm.tel	{float:left; width:30%;}
.ip_comm.tel+.bar	{float:left; width:5%; text-align:center; line-height:48px; }
.set_tel	{overflow:hidden;}
select.ip_comm	{padding-right:0;}
textarea.ip_comm	{height:100px; padding:10px; line-height:1.5;}
.btn_sm	{display:flex; align-items: center; justify-content: center; text-align: center; width:auto; height:50px; background-color: var(--color-1); border-radius:100px; font-size: 16px; font-weight: 700; color:#fff; }

.center	{width:1280px; margin:0 auto;}
@media screen and (max-width:1280px) {
.center	{width:94%; margin:0 auto;}
}



.clear::after	{content:""; display:block; clear:both;}
.hidden {position:absolute; left:-100%; top:0%; overflow:hidden; width:0; height:0; font-size:0; text-indent:-9999%; line-height:0;}

.btn_nav {display:flex; align-items: center ;justify-content:center; width:80px; height:80px; padding:20px 15px; background-color: var(--color-2);}
.btn_nav:hover { background-color: var(--color-1);}
.on .btn_nav {position: fixed; right:0px; top:0px; z-index: 102;}
.btn_hbg {position: relative; display:flex; flex-direction: column; justify-content: space-between; width:100%; height:100%;}
.btn_hbg div,
.btn_hbg:before,
.btn_hbg:after {content:""; position:relative; display:block; width:100%; height:1px; background-color:#fff; transition:all 0.3s}
.on .btn_hbg div {background-color:transparent;}
.on .btn_hbg:before,
.on .btn_hbg:after {position: relative; transform-origin: center; }
.on .btn_hbg:before {top:50%; transform:rotate(45deg);}
.on .btn_hbg:after {top:-50%; transform:rotate(-45deg);}



:root{
    
    --color-1:#ff6c4b;
    --color-2:#2e3192;
    
    --color-win:#0078d4;
    --color-and:#34a853;
    --color-apl:#000;
    
    --kakao-y:#ffe600;
    --kakao-b:#3b1e1e;
    --naver-g:#39ab37;
    --fb-b:#445e98;
    
    --radius-s:10px;
    --radius-m:20px;
    --radius-l:50px;
}



dl dd a {font-size:inherit; font-weight:inherit; color: inherit;}


#wrapper {width:100%; background-color: #fff;}




/*========= header ===========*/

#header {}
#header .center {display:flex; align-items: center; justify-content: space-between;}
#header .logo img {width:auto; height:2.125rem;}

#nav {display:flex; align-items: center; justify-content: center;}
#nav > div {position: relative;margin:0 2.1875rem; }
#nav .dep1 {display:flex; align-items: center; justify-content: center; height:5.9375rem; font-size:1.0625rem; font-weight: 600;}
#nav > div:hover .dep1 {color: var(--color-1);}
#nav .dep2 {position: absolute; left:50%; top:5.9375rem; width:12.5rem; transform:translateX(-50%); border-radius:0 0 1.25rem 1.25rem; background-color: #fff; overflow:hidden; display: none; z-index: 10;}
#nav > div:hover .dep2 {display: block;}
#nav .dep2 li {padding:0.9375rem; border-bottom:0.0625rem solid #eee; }
#nav .dep2 li:hover {background-color: #eee;}
#nav .dep2 li:last-child {border-bottom:0;}
#nav .dep2 li a {display: block; text-align: center;}

#header .tel {display:flex; align-items: center; justify-content: center; border:0.0625rem solid var(--color-1); border-radius:6.25rem; padding:0.625rem 0.9375rem;}
#header .tel dt,
#header .tel dd {font-size: 1rem; font-weight: 700; color: var(--color-1);}
#header .tel dt {margin-right:0.3125rem; }


.btn_nav {display:none;}


/*========= btn_comm ===== ======*/
.btn_comm {display:inline-flex; align-items: center; justify-content: center; align-items: flex-start; width:fit-content; padding:0.9375rem 1.25rem; border:0.0625rem solid #fff; border-radius:6.25rem; font-size: 1.0625rem; color: #fff;}

.arr {display:flex; align-items: center; justify-content: center; width:2.25rem; height:2.25rem; border:0.0625rem solid #fff; border-radius:3.125rem; font-size: 1.25rem; font-weight: 200; color: #fff;}

/*========= visual ===== ======*/
.visual {position: relative; overflow:hidden;}
.visual li {background-size:cover; height:40.625rem;}
.visual .v1 { background-image:url(/images/visual.jpg); }
.visual .v2 { background-image:url(/images/visual2.jpg); }
.visual .v3 { background-image:url(/images/visual3.jpg); }
.visual article {position: absolute; left:0; top:0; width:100%; height:100%; display:flex; flex-direction: column; justify-content: center; z-index: 10;}
.visual .center {display:flex; flex-direction: column; justify-content: center; }
.visual h2,
.visual h3 {color: #fff;}
.visual h2 {font-size: 2.75rem; font-weight: 400;}
.visual h3 {margin-top:0.9375rem; font-size: 1.125rem; line-height:1.625rem;}
.visual .btn_comm {margin-top:2.8125rem;}
.visual .visu-pagination {left:0; bottom:30px; width:100%; z-index: 11;}
.visual .visu-pagination span {margin:0 5px;}

/*========= main title ===========*/

.main_title {margin-bottom:2.8125rem; text-align: center; font-size:2.125rem; font-weight:800; color: #000;}



/*========= .p_comm ===========*/
.p_comm {margin-top:0.9375rem; font-size: 1.25rem; line-height:2rem;}
.p_comm:first-child {margin-top:0;}


/*========= main ===========*/

.main figure {overflow:hidden;}
.main figure img,
.main a img {display: block;}

.main1 {padding:6.25rem 0}
.type {display:flex; align-items: center; justify-content:space-between}
.type a {position: relative; display: block; overflow:hidden; border-radius:1.875rem;}
.type a>div {position: absolute; left:0; top:0; width:100%; height:100%; padding:1.5625rem; background-image:linear-gradient(0deg,rgba(0,0,0,0.5),rgba(0,0,0,0)); display:flex; align-items: flex-end; justify-content: space-between}
.type a h3 {line-height:2.25rem; font-size: 1.5rem; color: #fff;}



.main2 {padding:5rem 0; background-color: #f4f4f4;}
.main2 .set_btn {text-align: center;}
.main2 .btn_comm {border:0; width: 15rem; padding:1.5625rem 0; margin:0 0.75rem; font-size: 1.25rem; font-weight: 700;}
    .main2 .btn_comm:nth-child(1) {background-color: var(--color-1);}
    .main2 .btn_comm:nth-child(2) {background-color: var(--color-2);}
.main2 .btn_comm i {margin-right:0.625rem;}


.main3 {padding:6.25rem 0; }

.gall_slider {overflow:hidden; width:100%;}
.gall_slider li {overflow:hidden; width: 19.375rem; }
.gall_slider li a {position: relative; display: block;}
.gall_slider li figure {overflow:hidden; position: relative; width:19.375rem; height:13.125rem; margin:0.25rem 0; border-radius:0.3125rem; }
.gall_slider li figcaption {position: absolute; left:0.3125rem; top:0.3125rem; padding:0.3125rem 0.625rem; border-radius:0.1875rem; font-size: 0.8125rem; color: #fff;}
    .gall_slider li .before figcaption {background-color:#999 ;}
    .gall_slider li .after figcaption {background-color:var(--color-1);}
.gall_slider li .arr {position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:2rem; height:2rem; border:0; background-color: #fff; font-size: 1.0625rem; font-weight: 700; color: #222; z-index: 10;}
.gall_slider .empty {background-color: #eee; display:flex; align-items: center; justify-content: center; }

.main3 .set_ctrl {display:flex; align-items: center; justify-content: center; margin-top:2.5rem;}
.main3 .set_ctrl .arr {border-color:#ccc;  color: #aaa;}
.main3 .set_ctrl .swiper-pagination {position: static; margin:0 0.9375rem; }
.main3 .set_ctrl .swiper-pagination span {width: 0.625rem; height: 0.625rem; margin:0 0.3125rem;}
.main3 .set_ctrl .swiper-pagination .swiper-pagination-bullet-active {background-color: var(--color-1);}


.main4 {padding:5rem 0; background-color: #f4f4f4;}
.main4 h2 {margin-bottom:3.75rem;}
.main4 ul {display:flex; align-items: center; justify-content: center}
.main4 ul li {display:flex; flex-direction: column; align-items: center; width: 3.125rem; margin:0 3.75rem; font-size: 1.0625rem; white-space: nowrap; font-weight: 600; }
.main4 ul li img {margin-bottom:1.25rem;}


.main5 {padding:5rem 0; display:flex; align-items: flex-start; justify-content:space-between}
.main5 > div {position: relative; width: 23.75rem;}
.main5 h2 {margin-bottom:1.5625rem; font-size: 1.375rem; font-weight: 700; color: #000;}
.main5 .quo ul li {overflow:hidden; margin-bottom:0.3125rem; border-radius:0.25rem; border:0.0625rem solid #ddd; overflow:hidden; background-color: #fff;}
.main5 .quo .set_agree {display:flex; align-items: center; justify-content: space-between; margin-top:0.625rem;}
.main5 .quo .set_agree label,
.main5 .quo .set_agree a {font-size: 0.875rem;}
.main5 .quo .btn_sm {width:9.375rem}

.main5 .latest li {display:flex; align-items: center; justify-content: space-between; padding:0.625rem 0; }
.main5 .latest li div,
.main5 .latest li a,
.main5 .latest li span {line-height:1.75rem;}
.main5 .latest .date {font-size: 0.8125rem; color: #888;}

.main5 .rt {}
.main5 .rt .region {width: 10%; font-weight: 700;}
.main5 .rt .tit {width: 30%;}
.main5 .rt .name {width: 15%;}
.main5 .rt .date {width: 20%;}
.state {display:inline-flex; align-items: center; justify-content: center; height:1.75rem; border-radius:6.25rem; padding:0 0.9375rem; font-size: 0.8125rem; background-color: #ccc; color: #fff;}
.state.done {background-color: #444;}

.main5 .notice {}
.main5 .notice li a {font-size: 1rem; font-weight: 600;}
.main5 .notice .arr {position: absolute; right:0; top:0; width: 1.75rem; height: 1.75rem; border-color:#ccc; color: #aaa; font-size: 1rem;}



/*========= footer ===========*/
#footer {padding:3.125rem 0 8.75rem 0; background-color: #222;}
#footer .center {display:flex; align-items: flex-start; justify-content: flex-start;}
#footer .ft_logo img {display: block; width:auto; height:1.875rem;}

#footer .set_info {margin-left:2.5rem;}
#footer .info {}
#footer .info li {display:inline-block; margin-right:1.875rem; font-size: 0.875rem; font-weight: 300; line-height:1.75rem; color: #fff;}
#footer .branch {display:flex; flex-wrap:wrap; align-items: center; margin:20px 0; }
#footer .branch dl {display:flex; align-items: center; }
#footer .branch dt,
#footer .branch dd {line-height:1.3; font-size: 14px; color: #fff;}
#footer .branch dt {margin-right:5px; color: #aaa;}
#footer .branch dd {margin-right:20px;}

#footer .copyright {font-size: 0.8125rem; font-weight: 600; color: #ccc;}
#footer a {font-size:inherit; font-weight:inherit; color:inherit;}




/*========= quick ===========*/
.quick {position:fixed; z-index: 99; }

#qmenu {right:0.625rem; top:50%; transform:translateY(-50%);}
#qmenu a {display:flex; flex-direction: column; align-items: center; justify-content: center; width: 5rem; height: 5.3125rem; margin:0.3125rem 0; border-radius:0.3125rem; text-align: center; font-size: 0.8125rem; font-weight: 600;}
    #qmenu a:nth-child(1) {background-color:var(--color-1); color: #fff;}
    #qmenu a:nth-child(2) {background-color:var(--color-2); color: #fff;}
    #qmenu a:nth-child(3) {background-color:var(--kakao-y); color: var(--kakao-b);}
#qmenu i {margin-bottom:0.625rem; font-size:1.625rem;}


#consult {left:0; bottom:0; width:100%; background-color:var(--color-2)}
#consult .center,
#consult .set_form,
#consult .cs {display:flex; align-items: center; }

#consult .center {justify-content: space-between; align-items: stretch;}

#consult .set_form {justify-content: space-between; width: 58.75rem; padding:1.25rem 0;}
#consult .set_form h2 {margin-right:1.25rem; font-size:1.25rem; font-weight:700; color: #fff;}
#consult .set_form ul,
#consult .set_form .set_agree {display:flex; align-items: center; justify-content: flex-start;}
#consult .set_form ul li {width: 13.75rem; margin-left:0.3125rem; border-radius:0.3125rem; background-color: #fff;}
#consult .set_form .set_agree {margin-left:0.625rem;}
#consult .set_form .set_agree label,
#consult .set_form .set_agree a {margin-left:0.125rem; font-size: 0.875rem; font-weight: 300; color: #fff;}
#consult .set_form .btn_sm {width:7.5rem; font-size: 1rem;}

#consult .cs {width:18.75rem; justify-content: center; background-color: var(--color-1); }
#consult .cs i {font-size: 2.75rem; color: #fff;}
#consult .cs dl {margin-left:0.625rem;}
#consult .cs dt {color: #fff;}
#consult .cs dd {margin-top:0.25rem; font-size: 1.5rem; font-weight: 700; color: #fff;}

/*========= ready ===========*/

.ready {text-align: center;}

/*========= sub contents ===========*/

#contents.sub {padding-bottom:9.375rem;}

/*========= sub_visual ===========*/

.sub_visual {background-size:cover;}
    .sub_visual01 {background-image:url(/images/sub_visual1.jpg)}
    .sub_visual02 {background-image:url(/images/sub_visual2.jpg)}
    .sub_visual03 {background-image:url(/images/sub_visual3.jpg)}
    .sub_visual04 {background-image:url(/images/sub_visual4.jpg)}
    .sub_visual05 {background-image:url(/images/sub_visual5.jpg)}
    .sub_visual06 {background-image:url(/images/sub_visual6.jpg)}
.sub_visual .center {position: relative; display:flex; align-items: center; justify-content: flex-start; height: 17.5rem;}
.sub_visual h2 {font-size: 2.375rem; font-weight: 800; color: #fff;}
.sub_visual .sub_menu {position: absolute; left:0; bottom:0; width:100%; display:flex; justify-content: flex-start;}
.sub_visual .sub_menu a {position: relative;display:block; margin-right:2.1875rem; padding-bottom:1.25rem; font-size:1.0625rem; color: #fff;}
.sub_visual .sub_menu a.on {font-weight: 700;}
.sub_visual .sub_menu a.on::after {content:""; position: absolute; left:0; bottom:0; display: block; width:100%; height:0.3125rem; background-color: #fff;}

    .sub_visual02 .sub_menu,
    .sub_visual04 .sub_menu,
    .sub_visual05 .sub_menu {display: none;}

/*========= page_title ===========*/

.page_title {padding-top:6.25rem; margin-bottom:3.75rem; text-align: center;}
.page_title h3 {font-size:2.5rem; font-weight:800; color: #000;}

/*========= intro ===========*/
.intro {margin-bottom:2.5rem; text-align: center;}
.intro h4 {font-size: 1.5rem; color: #000;}

/*========= p_comm ===========*/
.sub .p_comm {margin-top:0.9375rem; font-size: 1.0625rem; line-height:1.875rem;}
.sub .p_comm:first-child {margin-top:0;}


/*========= sub_title ===========*/
.sub_title {margin-top:3.75rem; margin-bottom:0.9375rem; font-size:1.5rem; font-weight: 700; color: #000;}
.sub_title:first-child {margin-top:0;}

/*========= li_comm ===========*/
.li_comm li {position: relative; margin-bottom:0.625rem; padding-left:0.75rem; line-height:1.375rem; font-size: 1rem;}
.li_comm li::before {content:""; position: absolute; left:0; top:0.5rem; display: block; width:0.1875rem; height:0.1875rem; border-radius:100%; background-color: #444;}

/*========= table ===========*/
.tbl th,
.tbl td {border:0.0625rem solid #ddd;text-align: center;}

.tbl tbody th {padding:0.75rem 0.625rem; background-color: #ebebeb; font-weight: 600; color: #444;}
.tbl tbody td {padding:1.5625rem 0.625rem;}

/*========= ul.tbl ===========*/
.tbl {display:flex; flex-wrap:wrap; align-items: stretch;  background-color: #fff;text-align: center;}
.tbl .th,
.tbl .td {box-sizing:content-box;}
.tbl .th { padding:0.75rem 0.625rem;border-top:1px solid #ddd; background-color: #ebebeb; font-weight: 600; color: #444;}
.tbl .td {padding:1.5625rem 0.625rem;}
.tbl img {width:100%; height:auto;}

.tbl > li {margin-left:-1px; margin-top:-1px; border:1px solid #ddd;}
.sub0301 .tbl > li {width:calc(100% / 5)}
.sub0302 .tbl > li {width:calc(100% / 6)}

/*========= sub0101 ===========*/
.sub0101 figure {margin-bottom:3.125rem;}
.sub0101 img {display: block;}
.sub0101 article {display:flex; align-items: flex-start; justify-content: space-between}
.sub0101 article > div {width: 37.5rem;}

/*========= sub0102 ===========*/
.sub0102.center {width:100%; }
.sub0102 img {display: block; width:100%; height:auto;}
.company_slider {position: relative; overflow:hidden;}
.company_slider .swiper-slide {width:auto;}
.company_pg {display:flex; align-items: center; justify-content: space-between; margin-top:1.25rem;}
.company_pg > div {width:calc((100% - 5.625rem)/10);}

/*========= sub0103 ===========*/
.sub0103 {}
.organization {width: 57.5rem; margin:0 auto;}
.organization > ul {display:flex; align-items: center; justify-content: center; }
.organization > ul >li {position: relative; padding:1.875rem 2.5rem; z-index: 1;}
    .organization > ul >li::before,
    .organization > ul >li::after {content:""; position: absolute; left:0; top:0; background-color: #ccc; z-index: -1;}
    .organization > ul >li::before {width:100%; height:0.0625rem}
    .organization > ul >li::after {width:0.0625rem; height:100%;}
.organization > ul >li > div {display:flex; align-items: center; justify-content: center; width: 9.375rem; height: 5rem; border-radius:0.3125rem; font-size: 1.0625rem; font-weight: 700; color: #fff; border-width: 0.0625rem; border-style: solid;}

.organization .dep1 li {padding-top:0;}
.organization .dep1 li::before {display: none;}
.organization .dep1 li::after {left:50%;}
.organization .dep1 li div {background-color: var(--color-1); border-color:#f05735}

.organization .dep2 li::before { top:50%; width: 50%;}
.organization .dep2 li::after {display: none;}
.organization .dep2 li:nth-child(1)::before {left:50%; }
.organization .dep2 li:nth-child(2)::before {width:100%;}
.organization .dep2 li:nth-child(2)::after {display: block; left:50%; }
.organization .dep2 li div {background-color: var(--color-2); border-color:#2e3192}

.organization .dep3 li {padding-bottom:0;}
.organization .dep3 li::before {}
.organization .dep3 li::after {left:50%; height:50%;}
.organization .dep3 li:nth-child(1)::before {left:50%; }
.organization .dep3 li:nth-child(4)::before {left:0; width:50%;}
.organization .dep3 li div {background-color:#9cdafb; border-color:#86ccf1; color: #444;}

.organization .dep4 li {padding-top:0.625rem}
.organization .dep4 li::before,
.organization .dep4 li::after {display: none;}
.organization .dep4 li div {height: 3.75rem; background-color: #f4f4f4; border-color:#e1e1e1; color: #444;}

/*========= sub0104 ===========*/
.sub0104 {}
.sub0104 .map {width:100%; height:31.25rem;}
.sub0104 .map iframe {width:100%; height:100%;}
.sub0104 .set_loca {display:flex; align-items: stretch; justify-content: space-between; margin-top:3.125rem;}
.sub0104 .set_loca dl {width:33.3333%; border-right:0.0625rem solid #ddd;}
    .sub0104 .set_loca dl:last-child {border-right:0;}
.sub0104 .set_loca dt,
.sub0104 .set_loca dd {text-align: center;}
.sub0104 .set_loca dt {margin-bottom:0.9375rem; font-size: 1rem; font-weight: 600;}
.sub0104 .set_loca dt i {margin-right:0.625rem; font-size: 1.0625rem; color: #aaa;}
.sub0104 .set_loca dd {display:flex; flex-direction: column; justify-content: center;  height: 3.75rem;line-height:1.875rem; font-size: 1.375rem; font-weight: 300;}

/*========= sub0201 ===========*/
.business {display:flex; flex-wrap:wrap; align-items: stretch}
.business > div {width:calc((100% - 3.75rem)/4); margin-right:1.25rem; margin-bottom:1.25rem; padding:3.125rem 1.875rem; border-radius:1.875rem; border:0.0625rem solid #ddd; text-align: center;}
.business > div:nth-child(4n) {margin-right:0; }
.business .empty {display:flex; align-items: center; justify-content: center; background-color: #f2f2f2;}
.business .empty img {display: block; width: auto; height: 4.375rem; opacity: 0.5}
.business figure {width: 10.625rem; margin:0 auto;}
.business figure img {display: block; width:100%; height:auto;}
.business dl {margin-top:1.5625rem;}
.business dt {font-size: 1.25rem; font-weight: 600; line-height: 1.75rem; color: #000;}
.business dd {margin-top:0.625rem; font-size: 1rem; line-height: 1.625rem;}


/*========= sub0301 ===========*/
.sub0301 .intro ul {display:flex; align-items: center; justify-content: center; margin-bottom:2.5rem;}
.sub0301 .intro ul li {margin:0 3.75rem; line-height:1.5rem; display:flex; flex-direction: column; align-items: center; font-size: 1.125rem; font-weight: 600;}
.sub0301 .intro ul li img {margin-bottom:0.625rem; width:auto; height: 4.25rem;}
.sub0301 .intro h4 {line-height:1.5}
.sub0301 .detail {display:flex; align-items: flex-start; justify-content: space-between; margin-top:6.25rem;}
.sub0301 .detail .tab {width: 12.5rem;}
.sub0301 .detail .tab li {margin-bottom:0.625rem;}
.sub0301 .detail .tab a {display:flex; align-items: center; justify-content: space-between; height:3.125rem; padding:0 1.25rem; font-size: 1.125rem; font-weight: 600; color: #888; border-radius:3.125rem; }
.sub0301 .detail .tab li.ui-tabs-active a {background-color: #000; border-color:#000; color: #fff;}
.sub0301 .detail .tab li.ui-tabs-active a::after {content:"\f054"; font-family: 'FontAwesome'; font-size: 0.875rem; color: #fff;}

.sub0301 .detail .tab_cont {width: 63.75rem; padding:3.75rem 3.125rem; border:0.0625rem solid #ddd; border-radius:1.875rem;}
.sub0301 .detail article {display:flex; align-items: center; justify-content: space-between}
.sub0301 .detail article > div {width: 33.125rem;}
.sub0301 .detail article > figure {width: calc(100% - 33.125rem);}
.sub0301 .detail .li_comm {margin-top:1.875rem;}

.sub0301 .tbl {width:100%; margin-top:1.875rem;}
.sub0301 .tbl tbody td img {width:8.9375rem; height:auto;}


/*========= sub0401 ===========*/
.sub0401 .howto > div {display:flex; align-items: stretch; justify-content: space-between; margin-bottom:1.25rem; padding:1.875rem; border:0.0625rem solid #ddd; border-radius:1.875rem; }
.sub0401 .howto figure {width: 25rem;}
.sub0401 .howto figure img {display: block;}
.sub0401 .howto dl {width:calc(100% - 25rem); padding:1.875rem 0; padding-left:2.5rem;}
.sub0401 .howto dt {margin-bottom:0.625rem; font-size: 1.25rem; font-weight: 700; color: #000;}
.sub0401 .howto dd {font-size: 1rem; line-height:1.625rem; color: #444;}

/*========= sub0501 ===========*/
.board_tab {display:flex; align-items: center; justify-content: center; margin-bottom:20px;}
.board_tab a {display:inline-flex; margin:0 2px; padding:12px 25px; border-radius:5px; background-color: #eee; color: #888;}
.board_tab a.on {background-color: var(--color-2); color: #fff;}
.sub0501 .gall_slider ul {display:flex; align-items: stretch; flex-wrap:wrap;}
.sub0501 .gall_slider ul li {width:calc((100% - 3.75rem)/4); margin-right:1.25rem; margin-bottom:2.5rem;}
.sub0501 .gall_slider ul li:nth-child(4n) {margin-right:0;}
.sub0501 .gall_slider figure {width:100%; height:auto;}
.sub0501 .gall_slider img {display: block; width: 100%; height:auto;}
.sub0501 .gall_slider .tit {margin-top:1.25rem; text-align: center; font-size: 1.0625rem; font-weight: 600;}


/*========= sub0603 ===========*/
.tbl_quo {border-top:1px solid #444;}
.tbl_quo th,
.tbl_quo td {padding:30px; border-bottom:1px solid #aaa;}
.tbl_quo th {text-align: left; font-weight:700; color: #222;}
.tbl_quo .ip_comm {width: 300px; border:1px solid #ddd;}
.tbl_quo .ip_comm.tel {width: 150px;}
.tbl_quo textarea.ip_comm {width: 100%;}
.tbl_quo #title.ip_comm {width: 100%;}
.sub0603 .set_agree {display:flex; align-items: center; justify-content: flex-start; margin-top:20px;}
.sub0603 .set_agree a,
.sub0603 .set_agree label {font-size: 14px; margin-left:3px;}
.sub0603 .btn_sm {height:60px; padding:0 50px; margin:0 auto; margin-top:30px; font-size: 18px;}






.sub_list  {}
.sub_list::after  {content:""; display: block; clear: both;}
.sub_list li {position: relative; float:left; width:calc((100% - 3.75rem) / 4); margin-right:1.25rem; margin-bottom:3.125rem;}
.sub_list li:nth-of-type(4n) {margin-right:0; }
.sub_list li a { display:block; }
.sub_list li input {position: absolute; left:0.3125rem; top:0.3125rem; z-index: 1;}
.sub_list li .tit {margin-top: 1.5625rem; text-align: center; font-size:1.067rem; font-weight: 600; }d
.sub_list li .date {margin-top:0.75rem; font-size:0.867rem; color: #888;}
.sub_list li .img_cont {}
.sub_list li .img_cont img {display: block; width:100%; height: auto;}



.gall_slider.gall_view {position: relative; display:flex; align-items: stretch; justify-content: center;}
.gall_slider.gall_view  figure {position: relative; overflow:hidden; width:500px; margin:0 5px; border-radius:10px }
.gall_slider.gall_view  figure img {display: block;width:100%; height:auto;}
.gall_slider.gall_view  a {display: block;width:100%; height:100%;}
.gall_slider.gall_view .empty {width:100%; height:100%}
.gall_slider.gall_view .empty img {width:25%; height:auto; opacity: 0.5}
.gall_slider.gall_view figcaption {position: absolute; left:10px; top:10px; padding:0.3125rem 0.625rem; border-radius:0.1875rem; font-size: 0.8125rem; color: #fff;}
    .gall_slider.gall_view .before figcaption {background-color:#999 ;}
    .gall_slider.gall_view .after figcaption {background-color:var(--color-1);}
.gall_slider.gall_view .arr {position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:2rem; height:2rem; border:0; background-color: #fff; font-size: 1.0625rem; font-weight: 700; color: #222; z-index: 10;}

.gallview_detail {position: fixed; left:0; top:0; width:100%; height:100%; display:none; align-items: center; justify-content: center; background-color: rgba(0,0,0,0.6); z-index: 1000;}
.gallview_detail .zoom {overflow:hidden; border-radius:20px;}
.gallview_detail .zoom > div {width:800px; }
.gallview_detail .zoom img {width:100%; height:auto;}
.gallview_detail .detail_close {position: fixed; right:20px; top:20px; font-size: 2rem; color: #fff;}





/* 모달팝업 */
#modal-content {display:none;width:600px;max-width:90%;height:500px;box-shadow:0 5px 15px rgba(0, 0, 0, 0.5);background-color: #fff;border: 1px solid rgba(0, 0, 0, 0.2);border-radius: 0;outline: 0 none}
#modal-content .modal-header {height:20px;border-bottom:1px solid #e5e5e5;padding:15px}
#modal-content .modal-header h4 {margin:0;font:bold 1.125rem 'Malgun Gothic';color:#5d5d5d}
#modal-content .modal-body {padding:15px}
#modal-content .modal-body .b-iframe {width:570px;max-width:100%;height:430px}
#modal-content .b-close{float:right;font:bold 21px Arial;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2;filter:alpha(opacity=20);padding:0;cursor:pointer;background:transparent;border:0;-webkit-appearance:none}
#modal-content .b-close:hover, #modal-content .b-close:focus{color:#000;text-decoration:none;cursor:pointer;opacity:.5;filter:alpha(opacity=50)}
p.modal-frame-content{width:550px;max-width:100%;height:400px;padding-right:5px;overflow-x:hidden;overflow-y:auto;font:normal 12px 'Malgun Gothic';color:#555;line-height:1.65em}
/*.popbtn {text-decoration:none;cursor:pointer;margin:0 5px}*/
.b-modal __b-popup1__ {max-width:100%}
#modal-content .modal-header,#modal-content .modal-body{box-sizing:content-box !important}

#modal-content2 {display:none; width:400px; height:560px; background:rgba(54,54,54,0.9); border-radius:4px; border:0px;}
#modal-content2 .modal-header {position:relative; height:28px;}
#modal-content2 .modal-body2 {padding:0;}
#modal-content2 .b-close{position:absolute;top:0;right:16px;font-size:2.5rem;font-weight:900;font-family:Tahoma;color:#fff;opacity:.5;filter:alpha(opacity=50);padding:0;cursor:pointer;background:transparent;border:0;-webkit-appearance:none}
#modal-content2 .b-close:hover, #modal-content .b-close:focus{cursor:pointer;opacity:1;filter:alpha(opacity=100)}
#modal-content2 .modal-body2 .b-iframe {width:400px;height:560px;}