﻿@import url("/css/com/gbe_v3/con_com.css");

/*-----------------------------------------------------------
Author : gahye, Park
Creative date :2021. 08. 20
-----------------------------------------------------------*/

/* point 칼라 */
.point1{color:#1e99fb !important; }
.point2{color:#63a700 !important; }
.point3{color:#f1900c !important; }

/* math_form : 공통 */
.math_form{position:relative; border:1px solid #bbbbbb; border-radius:1.5rem; margin-top:3rem; }
.math_form .rsp_img{background:#f9f9f9; padding-top:1rem; border-radius:1.5rem 1.5rem 0 0; }
.math_form .tit{position:absolute; top:-1.5rem; left:-1px; display:inline-block; height:3rem; line-height:3rem; background:linear-gradient(to right, #209cff, #077ed2); border-radius:2rem 2rem 2rem 0; color:#fff; padding:0 3.8rem; font-family:"SCDream"; font-size:1.1rem; z-index:1; font-weight:600; }
.math_form .txtbox{position:relative; width:100%; height:auto; overflow:hidden; padding:2rem 1.5rem; border-top:1px solid #bbb; }
.math_form .txtbox:before{content:""; position:absolute; left:33%; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); border-left:1px dotted #777; width:1px; }
.math_form .txtbox:after{content:""; position:absolute; right:35%; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); border-left:1px dotted #777; width:1px; }
.math_form.math01 .txtbox:before{height:75%; }
.math_form.math01 .txtbox:after{height:75%; }
.math_form.math02 .txtbox:before{height:83%; }
.math_form.math02 .txtbox:after{height:83%; }
.math_form.math03 .txtbox:before{height:92%; }
.math_form.math03 .txtbox:after{height:92%; }
.math_form.math04 .txtbox:before{height:86%; }
.math_form.math04 .txtbox:after{height:86%; }
.math_form.math05 .txtbox:before{height:67%; }
.math_form.math05 .txtbox:after{height:67%; }
.math_form .txtbox li{position:relative; width:31.3333%; float:left; font-family:"SCDream"; font-weight:600; margin-top:1.5rem; padding-left:2rem; margin-right:3%; word-break:keep-all; line-height:1.5rem; font-size:0.9rem; font-weight:600; }
.math_form .txtbox li:nth-child(1){margin-top:0; }
.math_form .txtbox li:nth-child(2){margin-top:0; }
.math_form .txtbox li:nth-child(3){margin-top:0; }
.math_form .txtbox li:nth-child(3n+0){margin-right:0; }
.math_form .txtbox li em{position:absolute; top:0rem; left:0; display:block; width:1.5rem; height:1.5rem; line-height:calc(1.5rem - 2px); border-radius:50%; border:1px solid #222; text-align:center; font-size:0.75rem; color:#222; }

/* 전시체험 */
.math01 .txtbox li em{background:#fde300; }
.math02 .txtbox li em{background:#34be3a; color:#fff; }
.math03 .txtbox li em{background:#ee453e; color:#fff; }
.math04 .txtbox li em{background:#7a5db0; color:#fff; }
.math05 .txtbox li em{background:#85ddff; }

/* 이용안내 */
.mathWrap{position:relative; width:100%; height:auto; overflow:hidden; }
.math0504{position:relative; display:block; width:48%; margin-left:4%; float:left; padding:4rem 3.5rem 5rem; }
.math0504:nth-of-type(1){margin-left:0; }
.math0504 .img{position:absolute; top:3.5rem; left:4rem; }
.math0504 .img::before{position:absolute; top:-0.8rem; left:-1.5rem; width:4.5rem; height:4.5rem; border-radius:50%; background:url(/images/web/admath/sub/prnt_bg_0504.png); content:""; z-index:0; }
.math0504 .img img{position:relative; z-index:1; }
.math0504 .txt{position:absolute; margin:0 1rem 0 7rem; font-weight:600; word-break:keep-all; font-family:"SCDream"; font-size:0.9rem; }
.math0504 .txt:before{position:absolute; content:""; display:block; top:0.5rem; left:-0.8rem; width:7px; height:7px; background:#51b4ff; border-radius:7px; }

/* 인사말 */
.greeting{font-family:"SCDream"; }
.greeting:after{display:block; clear:both; content:""; }
.greeting .greeting_img_box{position:relative; float:left; width:32.871%; }
.greeting .greeting_img_box .greeting_img{display:block; width:100%; height:17.75rem; border-radius:2rem; overflow:hidden; background-image:url(/images/web/admath/sub/img_0501_1.png); background-repeat:no-repeat; background-position:center; background-size:cover; }
.greeting .greeting_img_box .greeting_name{position:absolute; display:block; bottom:-1.5rem; left:0; padding:0 3.7rem; border-radius:0 1.5rem 1.5rem 1.5rem; line-height:3rem; background:#087fd5; color:#fff; font-size:1.1rem; font-weight:600; }
.greeting .greeting_img_box .greeting_name > em{display:inline-block; margin-right:.25rem; font-size:1.2rem; font-weight:700; }
.greeting .greeting_txt_box{float:left; width:67.129%; padding-left:5.5rem; }
.greeting .greeting_txt_box .greeting_tit{position:relative; display:block; color:#0e2e45; font-size:1.3rem; color:#0e2e45; font-weight:600; }
.greeting .greeting_txt_box .greeting_tit:before{position:absolute; top:.8rem; left:-3.5rem; width:2.7rem; height:.2rem; border-radius:.2rem; background:#3465aa; content:""; }
.greeting .greeting_txt_box .greeting_txt{margin-top:2rem; line-height:2; }
.greeting .greeting_txt_box .greeting_txt > strong{font-weight:600; }

/* 전체예약 2022.02.14 FS추가 */
.admath_reserve_wrap{width:100%;float:left;}
.admath_reserve_wrap .admath_class{float:left;width:33.33%;padding:8px;}
.admath_reserve_wrap .admath_class .class_box{width:100%;border:1px solid #d1d1d1;border-radius:10px;padding:15px;}
.admath_reserve_wrap .admath_class .class_box h3{width:100%;color:black;font-family:"SCDream";font-weight:600;text-align:center;letter-spacing:-2px;font-size:20px;margin-bottom:15px;}
.admath_reserve_wrap .admath_class .class_box ul{width:100%;min-height:120px;}
.admath_reserve_wrap .admath_class .class_box ul li{width:100%;position:relative;color:#666;font-family:"SCDream";font-size:15px;margin-bottom:5px;line-height:1.4;padding:0 0 0 76px;}
.admath_reserve_wrap .admath_class .class_box ul li:before{content:'';position:absolute;width:4px;height:4px;border-radius:50%;background-color:#CE583E;left:0;top:8px;}
.admath_reserve_wrap .admath_class .class_box ul li .label{position:absolute;left:10px;top:0;line-height:1.4;color:#000;font-weight:600;}
.admath_reserve_wrap .admath_class .class_box .class_bttn{width:100%;text-align:center;padding:20px 0;}
.admath_reserve_wrap .admath_class .class_box .class_bttn a{display:inline-block;margin:0 auto;text-align:left;font-family:"SCDream";color:white;position:relative;border-radius:20px;font-size:16px;padding:0 40px 0 20px;width:240px;line-height:40px;transition:all ease-in-out 0.25s;}
.admath_reserve_wrap .admath_class .class_box .class_bttn a:hover{box-shadow:inset 0 0 0 1px white;}
.admath_reserve_wrap .admath_class .class_box .class_bttn a i{position:absolute;right:20px;top:0;line-height:40px;}
.admath_reserve_wrap .admath_class .class_box .character{width:100%;text-align:center;}
.admath_reserve_wrap .admath_class .class_box .character img{width:100%;max-width:120px;height:auto;}

.admath_reserve_wrap .admath_class:first-of-type .class_box h3{color:#CE583E;}
.admath_reserve_wrap .admath_class:nth-of-type(2) .class_box h3{color:#683D8C;}
.admath_reserve_wrap .admath_class:nth-of-type(3) .class_box h3{color:#b4a21c;}
.admath_reserve_wrap .admath_class:first-of-type .class_box .class_bttn a{background-color:#CE583E;}
.admath_reserve_wrap .admath_class:nth-of-type(2) .class_box .class_bttn a{background-color:#683D8C;}
.admath_reserve_wrap .admath_class:nth-of-type(3) .class_box .class_bttn a{background-color:#b4a21c;}

/* 예약신청 박스 공통 */
.direct_lnk_box{position:relative; min-height:10rem; padding:1.5rem 18.5rem 1.5rem 2.5rem; background:#fff; border:2px solid #355282; border-radius:1rem; }
.direct_lnk_box:before{position:absolute; z-index:-1; bottom:-.75rem; right:-.75rem; width:100%; height:100%; border-radius:1.75rem; background:url(/images/web/cgmath/sub/notifi_pt.png); content:""; }
.direct_lnk_box .direct_tit{position:relative; display:block; margin-bottom:1rem; font-family:"SCDream"; font-size:1.1rem; color:#333; }
.direct_lnk_box .direct_tit > em{font-weight:600; }
.direct_lnk_box .img{position:absolute; bottom:1.5rem; right:2.5rem; width:12.9rem; }
.direct_lnk_box .img > img{display:block; max-width:100%; }
.direct_lnk_box .direct_btn{position:relative; display:inline-block; margin-top:1rem; min-width:8.5rem; border-radius:1.25rem; box-shadow:2px 0 3px rgba(48, 78, 127, .38); background:#304e7f; color:#fff; font-family:"SCDream"; font-size:.9rem; font-weight:600; line-height:2.25rem; text-align:center; }
.direct_lnk_box .direct_btn > em{position:relative; display:inline-block; padding-right:1.5rem; }
.direct_lnk_box .direct_btn > em:before{position:absolute; top:50%; right:0; -webkit-transform:translateY(-50%); transform:translateY(-50%); -webkit-transition:transform .3s; transition:transform .3s; font-weight:400; font-family:"xeicon"; font-size:1.2rem; content:"\e93f"; }
/* 예약신청 박스 공통 : active */
.direct_lnk_box .direct_btn:hover > em:before,
.direct_lnk_box .direct_btn:focus > em:before{-webkit-transform:translateY(-50%) translateX(3px); transform:translateY(-50%) translateX(3px); }


@media(max-width:960px){
	/* math_form : 공통 */
    .math_form .txtbox{padding:1.5rem; }
    .math_form .txtbox:before{left:48%; }
    .math_form.math01 .txtbox:before{height:79%; }
    .math_form.math02 .txtbox:before{height:89%; }
    .math_form.math03 .txtbox:before{height:94%; }
    .math_form.math04 .txtbox:before{height:92%; }
    .math_form.math05 .txtbox:before{height:76%; }
    .math_form .txtbox:after{display:none; }
    .math_form .txtbox li{width:48%; margin-top:1rem; }
    .math_form .txtbox li:nth-child(3){margin-top:1rem; }
    .math_form .txtbox li:nth-child(3n+0){margin-right:3%; }
    .math_form .txtbox li:nth-child(2n+0){margin-right:0; }
	
	/* 이용안내 */
    .math0504 .img::before{width:4rem; height:4rem; }
    .math0504 .img img{width:3.8rem; }
    
    /* 인사말 */
    .greeting .greeting_img_box .greeting_img{height:15.75rem; border-radius:1.5rem 1.5rem 0 0; }
    .greeting .greeting_img_box .greeting_name{position:relative; bottom:auto; left:auto; width:100%; padding:0; text-align:center; border-radius:0 0 1.5rem 1.5rem; }
	.greeting .greeting_txt_box{padding-left:2.5rem; }
	.greeting .greeting_txt_box .greeting_tit:before{display:none; }

    /* 전체예약 2022.02.14 FS추가 */
    .admath_reserve_wrap .admath_class{width:100%;padding:8px 0;}
    .admath_reserve_wrap .admath_class .class_box h3{text-align:center;}
    .admath_reserve_wrap .admath_class .class_box ul{min-height:auto;}
}

@media(max-width:768px){
	/* math_form : 공통 */
    .math_form .tit{height:2.6rem; line-height:2.6rem; font-size:1rem; }
    .math_form .txtbox{padding:1rem; }
    .math_form .txtbox:before{display:none; }
    .math_form .txtbox li{width:100%; margin-top:0.5rem; font-size:.85rem; }
    .math_form .txtbox li:nth-child(3){margin-top:0.5rem; }
    .math_form .txtbox li:nth-child(2){margin-top:0.5rem; }
	
	/* 이용안내 */
    .math0504{width:100%; margin-left:0; }
    
     /* 인사말 */
    .greeting .greeting_img_box .greeting_img{height:11.5rem; }
    .greeting .greeting_img_box .greeting_name{font-size:.95rem; }
	.greeting .greeting_img_box .greeting_name > em{font-size:1rem; }
	.greeting .greeting_txt_box{padding-left:1.5rem; }
	.greeting .greeting_txt_box .greeting_tit{font-size:1.1rem; }
	.greeting .greeting_txt_box .greeting_txt{margin-top:1rem; }
	
	/* 예약신청 박스 공통 */
	.direct_lnk_box{padding:1.25rem 14rem 1.25rem 1.5rem; }
	.direct_lnk_box .img{width:10rem; }
	.direct_lnk_box .direct_tit{font-size:.9rem; }
	/* 예약신청 박스 공통 : active 초기화 */
	.direct_lnk_box .direct_btn:hover > em:before,
	.direct_lnk_box .direct_btn:focus > em:before{-webkit-transform:translateY(-50%) translateX(0); transform:translateY(-50%) translateX(0); }
}
@media(max-width:600px){
	/* 인사말 */
    .greeting .greeting_img_box .greeting_img{height:10rem; }
}
@media(max-width:480px){
	/* math_form : 공통 */
    .math_form .tit{width:calc(100% + 2px); text-align:center; border-radius:1.5rem 1.5rem 0 0; padding:0 1rem; font-size:.95rem; }
    .math_form .txtbox li{font-size:.8rem; }
	
	/* 이용안내 */
    .math0504{padding:2rem 2rem 1rem; }
    .math0504 .img::before{display:none; }
    .math0504 .img img{display:none; }
    .math0504 .txt{position:relative; margin:0;}
    
    
	/* 인사말 */
    .greeting .greeting_img_box{float:none; width:10rem; margin:auto; }
    .greeting .greeting_img_box .greeting_img{height:8rem; background-position:top center; }
    .greeting .greeting_txt_box{float:none; width:100%; margin-top:1.5rem; padding:0; }
    .greeting .greeting_txt_box .greeting_tit{font-size:1rem; }
    
    /* 예약신청 박스 공통 */
	.direct_lnk_box{min-height:inherit; padding:1.25rem; }
	.direct_lnk_box .img{display:none; }
    
}

