@charset "utf-8";
/* CSS Document */
/* com2zoa design kjh 251119 */
/* ★ 공통스타일은 common.css에 있음 */
/* ★ 서브 기본 스타일은 sub.css에 있음 */

/* 커먼스타일 해제 및 수정 */
.cz_table {border-radius:0}
.cz_table thead th {line-height:130%; padding:12px 6px; background:#4f4953; border-color:#cecece; font-size:1.067em}
.cz_table tbody th {background:#f0f0f0; border-color:#cecece; border-left:0}
.cz_table tbody td {border-right:0; border-color:#cecece}
.cz_table tbody tr td:first-child {border-left:0}
.cz_table tbody td ul li {position:relative; padding:0 0 0 12px}
.cz_table tbody td ul li:after {content:"-"; display: block; position: absolute; top:0; left:0; width:4px; height:2px}
.cz_table .tbwrap01 thead th {background:#314354}
.cz_table .tbwrap01 tbody th {background:#e9eef4}

/** 공통 체험프로그램 타이틀 **/
.experi_topwrap {border-radius:10px}
.experi01 .experi_topwrap {background:linear-gradient(90deg, #a965e5, #c78af8)} /* 주중 */
.experi02 .experi_topwrap {background:linear-gradient(90deg, #6d61ee, #8692ff)} /* 주말 */
.experi03 .experi_topwrap {background:linear-gradient(90deg, #07a7da, #2bc7df)} /* 연중 */
.experi04 .experi_topwrap {background:linear-gradient(90deg, #15bbb2, #3fd4ab)} /* 특별 */
.experi_topbox {align-content: center; min-height:70px; padding:35px 30px; color:#fff; font-weight:600}
.experi01 .experi_topbox {background:url(../images/content/bg_experi_pro01.png) no-repeat 100% 100%}
.experi02 .experi_topbox {background:url(../images/content/bg_experi_pro02.png) no-repeat 100% 100%}
.experi03 .experi_topbox {background:url(../images/content/bg_experi_pro03.png) no-repeat 100% 100%}
.experi04 .experi_topbox {background:url(../images/content/bg_experi_pro04.png) no-repeat 100% 100%}
.experi_tit {line-height:120%; padding:10px 10px 5px; font-size:1.733em; word-break: keep-all}
.experi_tit span {color:#ffe00d}
.experi_subtit {display:inline-block; padding:5px 20px; text-align: center; border:1px solid rgba(255,255,255,0.5); border-radius:50px; font-size:1.2em}

.experi_con {padding:30px 25px; margin-bottom:35px; border-bottom:1px solid #d4d4d4; font-size:1.067em}
.experi_con ul li {display: flex; gap:10px; margin-bottom:10px}
.experi_con ul li:last-child {margin-bottom:0}
.experi_con ul li .experi_lsttit {display:block; min-width:136px; height:36px; align-content: center; border-radius:50px; background:#e3e3e3; box-sizing: border-box; text-align:center; flex-shrink:0; font-weight:700}
.experi_con ul li.only .experi_lsttit {background:#fff; border:2px solid #d3d3d3}
.experi_con ul li .experi_lsttxt {align-content:center; width:calc(100% - 145px); line-height:140%}

.experi_tbtit {display:block; padding:14px 15px; margin-bottom:25px; border:2px solid #ccc; border-radius:50px; text-align: center; font-size:1.2em; font-weight:700; color:#4d4d4d; word-break: keep-all}
.experi01 .experi_tbtit {border-color:#c789f8}
.experi01 .experi_tbtit span {color:#8b31d3}

/* ai교육지원센터란 */
.aikon_top {display: flex; justify-content: space-between; margin-bottom:35px}
.aikon_topinfo {display: flex; flex-direction: column; justify-content: space-between; width:calc(100% - 444px); border-top:2px solid #161741}
.aikon_toptit {margin:30px 10px 15px}
.aikon_toptit p {display:inline-block; position:relative; padding:16px 45px; font-size:1.6em; font-weight:600; color:#161741}
.aikon_toptit p:before {content:""; display: block; position:absolute; top:0; left:0; width:40px; height:25px; background:url(../images/content/bg_quotes_left.png) no-repeat 0 0}
.aikon_toptit p:after {content:""; display: block; position:absolute; bottom:0; right:0; width:40px; height:25px; background:url(../images/content/bg_quotes_right.png) no-repeat 100% 100%}
.aikon_toptit span {display:block; padding:18px 0; font-size:1.667em; font-weight:800; color:#ba64cb}
.aikon_toptxt {line-height:150%}
.aikon_toptxt p {padding:24px 20px; font-size:1.13em}
.aikon_toptxt ul {background:#eee; padding:20px 28px}
.aikon_toptxt ul li {position:relative; padding-left:12px; margin-top:4px; font-size:1.071em; word-break: keep-all}
.aikon_toptxt ul li:after {content:"-"; display:block; position:absolute; top:0; left:0; width:4px; height:1px}
.aikon_toptxt ul li:first-child {margin-top:0}
.aikon_photo {overflow: hidden; position: relative; width:444px; min-height:300px; background:#000}
.aikon_photo img {position: absolute; top:50%; left:50%; margin:-210px 0 0 -250px}
.aikon_purpose  {display: flex; justify-content: space-between; gap:15px; margin-top:15px}
.aikon_purpose li {line-height:150%; width:calc(100% / 3); padding:30px 10px 40px; border:1px solid #bcbcbc; box-sizing: border-box; text-align: center; font-size:1.067em}
.aikon_purpose li p {padding:110px 0 0}
.aikon_purpose li.purpose01 p {background:url(../images/content/bg_found_ico01.png) no-repeat 50% 0}
.aikon_purpose li.purpose02 p {background:url(../images/content/bg_found_ico02.png) no-repeat 50% 0}
.aikon_purpose li.purpose03 p {background:url(../images/content/bg_found_ico03.png) no-repeat 50% 0}

/* 시설 안내 */
.fac_aikoninfo {padding:30px 400px 30px 30px; margin-bottom:30px; border:1px solid #bcbcbc; background:url(../images/content/bg_facinfo_charact.png) no-repeat right 10px bottom 0}
.fac_aikoninfo h4 {font-size:1.467em; margin-bottom:25px; word-break: keep-all}
.fac_aikoninfo h4 span {color:#111f90}
.fac_infotit {text-align:left; margin-bottom:10px}
.fac_infotit h4 {display:inline-block; padding:10px 0 10px 40px; background: url(../images/content/blt_facility_ico.png) no-repeat 0 50%; font-size:1.6em; color:#111f90}
.fac_infotit h4 span {color:#b04ec4}
.fac_infoimg {overflow: hidden; max-height:440px; border-radius:0 0 10px 10px; margin-bottom:30px; border-top:5px solid #b04ec4; box-sizing: border-box}
.fac_infoimg img { border-radius:0 0 10px 10px; vertical-align: middle}
.farea_tit {margin-bottom:5px}
.farea_tit p {display: inline-block;  padding:5px 12px; text-align: center; border-bottom:3px solid #b04ec4; font-size:1.2em; font-weight:800}
.farea_tit p span {color:#b04ec4; font-size:1.667em}
.farea_imgview {background:#eee; padding:12px 15px; margin-bottom:15px; text-align: center}
.farea_imgview span {padding:5px 0 5px 34px; background:url(../images/content/blt_floor_view.png) no-repeat 0 50%}

.floor_area {margin-bottom:30px}
.floor_lst ul{display:flex;flex-wrap:wrap; justify-content:flex-start; margin:0; padding:0; list-style:none}
.floor_lst ul li{width:calc(100%/5); margin-bottom:15px; display:flex; justify-content:center}
.floor_lst ul li a.floor_thumb{display:block;text-align:center;width:208px}
.floor_thumb .thumimg{position:relative;display:block;width:208px; height:128px; overflow:hidden; border:3px solid transparent; background:#fff; margin:0 auto;transition:background .3s ease,border-color .3s ease,box-shadow .3s ease} 
.floor_thumb .thumimg img {width:100%;height:100%;display:block;transition:transform .45s cubic-bezier(.25,.46,.45,.94)} 
.floor_thumb:hover .thumimg {border-color:transparent; background-image:linear-gradient(#fff,#fff),linear-gradient(180deg,#b245f8,#6e62ef); background-origin:border-box; background-clip:padding-box, border-box;box-shadow:0 0 0 1px rgba(0,0,0,.05)} 
.floor_thumb:hover .thumimg img{transform:scale(1.08)} 
.floor_thumb .thumtxt {display:block; margin-top:8px; line-height:1.3; font-size:1.067em; font-weight:500}

/*  시설안내 레이어 */
.floor_layer {display:none;position:fixed;inset:0; background:transparent;z-index:99999; justify-content:center; align-items:center}
.floor_layer.is-open{display:flex}
.flayer_inner {position:relative; display:flex; flex-direction:column; width:90%; max-width:974px; max-height:85vh; transition:background .3s ease,border-color .3s ease,box-shadow .3s ease; background:#fff; border-radius:10px; box-sizing: border-box;border:3px solid transparent; background-image:linear-gradient(#fff,#fff),linear-gradient(180deg,#b245f8,#6e62ef); background-origin:border-box; background-clip:padding-box, border-box; box-shadow: 0 4px 14px rgba(0,0,0,0.3)} 
.btn_layer_close {position:absolute; right:10px; top:10px; width:42px; height:42px ;border:none; cursor:pointer; background:#314354; border-radius:10px; font-size:0}
.btn_layer_close::before,.btn_layer_close::after{content:"";position:absolute;left:12px;right:12px;top:20px;height:3px;background:#fff; border-radius: 50px}
.btn_layer_close::before{transform:rotate(45deg)}
.btn_layer_close::after{transform:rotate(-45deg)}
.flayer_top {display:flex;align-items:center;gap:12px; margin:10px 0}
.flayer_num {display:block; width:98px; height:42px; align-content: center; border-radius:0 50px 50px 0; text-align: center; color:#fff; font-size:2em; background:#b245f8; font-weight:700}
.flayer_tit {font-size:1.467em;font-weight:700}
.flayer_con {overflow:auto; max-height:70vh; padding:20px 30px 30px}
.flayer_con img {display:block; margin:0 auto; text-align: center; max-width:850px; width:100%}

/* 예약안내 */
.reserv_guide {margin-top: 30px}
/* 탭 버튼 영역 */
.rguide_tabmn {display: flex; gap:10px}
.rguide_tabmn li {flex: 1}
.btn_rgtab {width: 100%; padding: 15px 10px; border: 0; border:1px solid #e4e4e5; background:#e4e4e4; font-size:1.071em; font-weight:500; line-height: 1.4; cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; white-space: nowrap; color:#757575; border-radius:5px}
.btn_rgtab.on { background: #fff; border-color:#4e5b71; color: #314354; font-weight: 800}

.rguide_top {margin:25px 0; background:#ffeaea; padding:12px 15px; text-align: center}
.rguide_top p {display:inline-block; padding:5px 0 5px 34px; background:url(../images/content/blt_rguide_infotxt.png) no-repeat 0 50%; color:#e42323; font-weight:600; font-size:1.071em}
.rgtab_box {display: none}
.rgtab_boxarea {border: 1px solid #dfdfdf; background: #fff; padding-bottom:20px}
.rgtab_box.on {display: block}
.rgtab_boxtit {padding:14px 10px; margin-bottom:15px; background:#314354; color:#fff; font-size:1.2em; text-align: center}
.rgtab_area {padding:10px 26px 10px}
.rgtab_area dl {display:flex; justify-content: flex-start; align-items: center; gap:20px; padding-bottom:10px; border-bottom:1px solid #b8b8b8; margin-bottom:15px; font-size:1.071em; font-weight:600 }
.rgtab_area dl dt {width:100px; height:36px; align-content: center; text-align: center; color:#fff; background:#26b8c3; border-radius:50px}
.rgtab_area .col_red {color:#fe0000}
.rgtab_area .col_blue {color:#166fda}
.rgtab_imgbox {text-align: center}
.rgtab_imgbox img {display:block; width:100%; margin:0 auto; vertical-align: middle; border:1px solid #b8b8b8; box-sizing: border-box}
.rgtab_arr {text-align: center}
.rgtab_arr img {vertical-align: middle}

.btn_rgbott {display:flex; justify-content: center; padding:30px 0; gap:13px}
.btn_rgbott p {display:inline-block}
.btn_rgbott p a {display:flex; justify-content: space-between; overflow: hidden; min-width:150px; border-radius:5px; border:2px solid #ccc; font-size:1.2em; color:#fff; transition:.3s}
.btn_rgbott p a span {display: inline-block; transition:.3s}
.btn_rgbott p a .btn_txt {padding:15px 30px 15px 15px}
.btn_rgbott p a .btn_go {align-content: center; text-align: center; width:58px}

.btn_rgbott p.btn_appinfo a {background:#4473eb; border-color:#365cbc}
.btn_rgbott p.btn_appinfo a .btn_go {background:#365cbc}
.btn_rgbott p.btn_appinfo a:hover {background:#365cbc}
.btn_rgbott p.btn_appinfo a:hover .btn_go {background:#4473eb}
.btn_rgbott p.btn_appgo a {background:#b95af5; border-color:#9448c4}
.btn_rgbott p.btn_appgo a .btn_go {background:#9448c4}
.btn_rgbott p.btn_appgo a:hover {background:#9448c4}
.btn_rgbott p.btn_appgo a:hover .btn_go {background:#b95af5}

.rgtab_lsttxt {margin:15px 0; padding:15px 20px; background:#f0f0f0}
.rgtab_lsttxt li {position: relative; padding-left:15px; line-height:150%; margin-top:4px}
.rgtab_lsttxt li:first-child {margin:0}
.rgtab_lsttxt li:before {content:"-"; display: block; position: absolute; top:-1px; left:0}

/* 오시는길 */
.aikon_map .map_wrap .map_box {border: 1px solid #bcbcbc; box-sizing: border-box; overflow: hidden}
.aikon_map .root_daum_roughmap{width: 100%;}
.aikon_map .root_daum_roughmap .wrap_map{height: 400px}
.aikon_map .map_wrap .map_border {border:none !important; background:none !important}
.mapinfo_box {display:flex; align-items: center; padding:20px 0; border-bottom: 1px solid #bcbcbc}
.mapinfo_box .mapbox {width:25%; position:relative; padding-left:80px; box-sizing: border-box}
.mapinfo_box .mapbox:before {content:""; display:block; position:absolute; top:50%; left:0; width:62px; height:62px; border-radius:50%; margin-top:-31px}
.mapinfo_box .mapbox dt {font-weight:700; color:#000; font-size:1.2em; margin-bottom:4px}
.mapinfo_box .mapbox dd {font-size:1.071em; color:#3a3a3a; font-weight:400}
.mapinfo_box .addbox {width:45%}
.mapinfo_box .addbox:before {background:#74b4f8 url(../images/content/blt_mapadd.png) no-repeat 50% 50%}
.mapinfo_box .telbox:before {background:#dedede url(../images/content/blt_maptel.png) no-repeat 50% 50%}
.mapinfo_box .kakaomap {width:30%}
.mapinfo_box .kakaomap a {display:block; position:relative; align-content:center; padding:16px 60px 16px 12px; background:#1079e7; border-radius:10px; font-size:1.2em; font-weight: 600; color:#fff; transition:.3s}
.mapinfo_box .kakaomap:hover a {background-color:#085db7}
.mapinfo_box .kakaomap a:before {content:""; display: block; position: absolute; top:50%; right:12px; width:45px; height:45px; background:#fff url(../images/content/bg_kakaomap_view.png) no-repeat 50% 50%; border-radius:50%; margin-top:-22px}
.mapinfo_box .kakaomap a span {display:inline-block; padding:8px 0 8px 34px; background: url(../images/content/blt_kakaomap.png) no-repeat 0 50%; color:#fff200}

/* MOBILE LAYOUT */
@media only screen and (max-width:1024px) {
/* 커먼스타일 해제 및 수정 */
.cz_table thead th {font-size:1em}

/** 공통 체험프로그램 타이틀 **/
.experi_topbox {padding:20px 220px 20px 20px; background-size:auto 100px !important}
.experi_con {padding:20px 10px}
    
/* ai교육지원센터란 */
.aikon_topinfo {width:calc(100% - 300px)}
.aikon_toptit {margin:15px 10px 0}
.aikon_toptit p {padding:10px 34px 5px; font-size:1.286em}
.aikon_toptit span {padding:10px 0}
.aikon_toptit p:before {background-size:30px auto}
.aikon_toptit p:after {background-size:30px auto}
.aikon_toptxt p {padding:15px 10px; word-break: keep-all; font-size:1.071em}
.aikon_toptxt p br {display: none}
.aikon_toptxt ul {padding:15px}
.aikon_toptxt ul li {font-size:1em}
.aikon_photo {width:300px; min-height:200px}
.aikon_photo img  {width:360px; height:auto; margin:-150px 0 0 -180px}
.aikon_purpose li {padding:20px 5px 30px}
.aikon_purpose li p {padding:100px 0 0}

/* 시설안내 */
.fac_infotit h4 {font-size:1.429em}
.fac_aikoninfo {padding:20px 200px 20px 20px; margin-bottom:25px; background-size:200px auto}  
.fac_aikoninfo h4 {margin-bottom:15px}
.farea_tit p {font-size:1.143em}
.farea_imgview {padding:8px 10px}
.floor_lst ul li {width:calc(100% / 3)}
.floor_thumb .thumtxt {font-size:1em}

/* 예약안내 */
.rguide_tabmn {flex-wrap:wrap; gap:5px}
.rguide_tabmn li {width:calc(100% / 2 - 5px); flex:inherit}
.btn_rgtab {padding:5px}
.rguide_top {margin:15px 0; padding:10px}
.rgtab_boxtit {padding:10px; margin-bottom:10px; font-size:1.143em}
.rgtab_area {padding:5px 10px}
.rgtab_area dl {display:block; font-size:1em}
.rgtab_area dl dt {height:26px; margin-bottom:5px}
.rgtab_arr img {width:42px}
.btn_rgbott {gap:5px; padding:15px 0}
.btn_rgbott p {display: block; width:100%}
.btn_rgbott p a {font-size:1.067em}
.btn_rgbott p a .btn_txt {padding:10px 20px 10px 10px}
.btn_rgbott p a .btn_go {width:40px}
.rgtab_area dl {margin-bottom:10px}
.rgtab_lsttxt {margin:10px 0; padding:10px 15px}
.rgtab_lsttxt li {margin-top:3px; line-height:130%}

/* 오시는길 */ 
.mapinfo_box {flex-wrap:wrap; padding:10px 0}
.mapinfo_box .mapbox {width:35%; padding:10px 10px 10px 58px}
.mapinfo_box .mapbox:before {width:48px; height:48px; margin-top:-24px}
.mapinfo_box .addbox {width:65%}
.mapinfo_box .kakaomap {width:100%}
.mapinfo_box .kakaomap a {padding:10px 50px 10px 10px; font-size:1.143em}
.mapinfo_box .kakaomap a:before {width:40px; height:40px; right:10px; margin-top:-20px}

}

/* PC LAYOUT */
@media only screen and (min-width:1025px) {
}


/**** LOWSET FIX ****/
@media only screen and (max-width:700px) {

/** 공통 체험프로그램 타이틀 **/
.experi_topbox {padding:16px 14px 66px; background-size:auto 85px !important}
.experi_tit {padding:10px 5px; font-size:1.429em}
.experi_subtit {font-size:1.071em; padding:3px 14px 2px}
.experi_con {padding:15px 0; margin-bottom:20px}
.experi_con ul li {display: block; text-align: center}
.experi_con ul li .experi_lsttit {height:28px; margin-bottom:10px}
.experi_con ul li .experi_lsttxt {width:100%}
.experi_tbtit {border-radius:10px; margin-bottom:10px}
.experi_tbtit span {display: block}
    
/* ai교육지원센터란 */
.aikon_top {flex-direction: column}
.aikon_topinfo {width:100%; text-align:center}
.aikon_toptxt ul {text-align: left}
.aikon_photo {width:100%; min-height:160px}
.aikon_photo img {width:500px; margin:-210px 0 0 -250px; max-width:500px}
.aikon_purpose {flex-direction: column}
.aikon_purpose li {width:100%; padding:15px 5px; font-size:1em}
.aikon_purpose li p {background-size:70px auto !important; padding:80px 0 0}
    
/* 시설안내 */
.fac_aikoninfo {padding:15px 10px 75px 10px; background-position: 50% 100% !important; text-align: center}
.floor_lst ul li {width:calc(100% / 2)} 
.flayer_num {width:50px; height:30px; font-size:1.286em}
.flayer_tit {font-size:1.286em}
.flayer_con {padding:10px 15px 15px}
.btn_layer_close {width:30px; height:30px; border-radius:5px}
.btn_layer_close::before, .btn_layer_close::after {left:10px; right:10px; top:14px}

/* 오시는길 */  
.mapinfo_box {border-bottom:0}
.mapinfo_box .mapbox {width:100%}
.mapinfo_box .addbox {border-bottom:1px solid #e1e1e1}

    
}

@media only screen and (max-width:600px) {
/* 예약안내 */
.rguide_tabmn li {width:100%}
.rguide_top {text-align: left}
.rguide_top p {background-position:left 0  top 5px; font-size:1em; word-break: keep-all}
.rgtab_arr img {width:30px}
.btn_rgbott {flex-wrap:wrap}

}
    

/**** LOWSET FIX ****/
@media only screen and (max-width:500px) {
 /* ai교육지원센터란 */
.aikon_photo {width:100%; min-height:160px}
.aikon_photo img {width:100%; margin:-42% 0 0 -50%}

/* 시설안내 */
.floor_lst ul li {width:calc(100% / 1)} 
.flayer_top {display: block; margin-bottom:0}
.flayer_tit {padding:10px 10px 0; font-size:1.143em; text-align: center}
    
}