@charset "utf-8";

/* =========================== PAGE */
:root{--second:#102e48;--mainsize:1460px;--enfont:'Wix Madefor Display'}
.pagecommon{font-size:18px;color:#777;line-height:1.65;font-family:'Pretendard'}
.pagecommon .br{white-space:pre-line}

#sh_sub20{overflow:hidden}
#sh_sub20 .cont{max-width:var(--mainsize);margin:0 auto;padding: 0 30px 200px 30px}
#sh_sub20 .cont .grid{display:grid;grid-template-columns:50% 1fr;grid-template-rows:repeat(2, 1fr);height:660px}
#sh_sub20 .cont .map{grid-row:span 2;position:relative;background:url(/images/sub/sub20_map.svg?v=7f7b53212867dbad5dd1eea96c652b90) center no-repeat;background-size: cover}
#sh_sub20 .cont .info{display:flex;flex-flow:column;padding:60px 0 60px 15%;color:#fff;background:var(--second)}
#sh_sub20 .cont .info dl+dl{margin-top:auto}
#sh_sub20 .cont .info dl dt{margin-bottom:10px;font-size: 28px;font-weight:800;color:#4ed3de;font-family:var(--enfont)}
#sh_sub20 .cont .info dl dd{word-break:keep-all}
#sh_sub20 .cont .info dl dd span{display:inline-block;margin-right:15px}
#sh_sub20 .cont .contact{display:flex;flex-flow:column;padding:60px 0 60px 15%}
#sh_sub20 .cont .contact p{margin-bottom:15px;font-size:28px;font-weight:800;color:#111;font-family:var(--enfont)}
#sh_sub20 .cont .contact a{display:flex;align-items:center;justify-content:center;width:200px;height:58px;margin-top:auto;padding-right:5px;border:1px solid #102e48;font-size:17px;font-weight:600;color:#102e48;transition:all .3s}
#sh_sub20 .cont .contact a svg{width:18px;height:18px;margin-right:5px}
#Map_box{grid-row:span 2;width:100%;height:660px}

@media(hover:hover){
#sh_sub20 .cont .contact a:hover{color:#fff;background:#102e48}
}
@media(max-width:1320px){
#sh_sub20 .cont ul li{width:calc((100% - 460px) / 2)}
#sh_sub20 .cont ul li .br{white-space:normal;word-break:keep-all}
.form{padding: 0 20px}
}
@media(max-width:1024px){
.pagecommon{font-size:17px}
#sh_sub20 .cont{padding:0 20px 200px 20px}
#sh_sub20 .cont .grid{height:550px;grid-template-columns:50% 1fr}
#sh_sub20 .cont .info, #sh_sub20 .cont .contact{padding:40px 0 40px 30px}
#sh_sub20 .cont .contact p{font-size:24px}
#sh_sub20 .cont .contact a{width:160px;height:50px;font-size:16px}
.form{padding: 0 20px}
}
@media(max-width:768px){
.pagecommon{font-size:15px}
.form{padding: 0 20px}
}
@media(max-width:480px){
#sh_sub20 .cont{padding:0 !important; height:100%}
#sh_sub20 .cont .grid{height:100% !important}
}
@media(max-width:380px){
#sh_sub20 .cont{padding:0 !important; height:100%}
}

/*sub21.html*/
:root { --brand:#102e48; --line:#cacacc; --ink:#111; }
.form .grid { display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:640px){ .form .grid { grid-template-columns:1fr 1fr; } }
.field--full { grid-column:1/-1; }

input, textarea {
  width:100%; padding:12px 14px; border:1px solid var(--line);
  border-radius:6px; font-size:16px; background:#fff;
}
input:focus, textarea:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(56,162,200,.2); }
.is-invalid { border-color:#ef4444 !important; }
.btn { height:44px; padding:0 16px; border-radius:6px; border:1px solid var(--line); font-weight:600; }
.btn--primary { background:var(--brand); color:#fff; border-color:var(--brand);margin-right: 8px }



@media(max-width:1024px){
    .pagecommon{font-size:17px}
    #sh_sub20 .cont{padding:0 20px 100px 20px}

    #sh_sub20 .cont .grid{
        display: flex;
        flex-direction: column;
        height: auto !important;
    }

    #sh_sub20 .cont .map {
        width: 100%;
        height: 400px;
        min-height: 400px;
    }

    #sh_sub20 .cont .info,
    #sh_sub20 .cont .contact {
        width: 100%;
        padding: 40px 30px;
    }

    #sh_sub20 .cont .contact p{font-size:24px}
    #sh_sub20 .cont .contact a{width:160px;height:50px;font-size:16px}
    .form{padding: 0 20px}
}