@charset "utf-8";

.column-wrap { clear: both;padding: 0px 0 50px;}
.column-title { clear: both; font-size: 30px;font-weight: 400;padding: 20px 0 5px;text-align: center;line-height: 110%;color: #111;}
.column-title span { font-weight: 700;}
.column-title br { display: none;}
.column-top { display: flex; gap: 40px; margin: 0 auto; padding: 40px 0 15px; align-items: flex-start;}
.column-top .bann { flex: 1.2;}
.column-top .bann img { width: 100%; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.05);}
.column-conts { flex: 1.2;}

.why-design { font-size: 28px; font-weight: 800; margin-bottom: 25px;margin-top: 5px;}
.design-type { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-bottom: 30px;}
.design-type dl { position: relative; background: #fff; padding: 25px; border-radius: 20px; border: 1px solid #ccc; overflow: hidden; min-height: 140px; margin: 0;}
.design-type dl:nth-of-type(1)::after { content: '01'; position: absolute;right: -10px;bottom: -20px; font-size: 80px;font-family: 'Paperlogy';color: rgba(0,0,0,0.03); font-weight: 800;letter-spacing: -5px;}
.design-type dl:nth-of-type(2)::after { content: '02'; position: absolute;right: -5px;bottom: -20px; font-size: 80px;font-family: 'Paperlogy';color: rgba(0,0,0,0.03); font-weight: 800;letter-spacing: -2px;}
.design-type dl:nth-of-type(3)::after { content: '03'; position: absolute;right: -5px;bottom: -20px; font-size: 80px;font-family: 'Paperlogy';color: rgba(0,0,0,0.03); font-weight: 800;letter-spacing: -2px;}
.design-type dl:nth-of-type(4)::after { content: '04'; position: absolute;right: -5px;bottom: -20px; font-size: 80px;font-family: 'Paperlogy';color: rgba(0,0,0,0.03); font-weight: 800;letter-spacing: -2px;}
.design-type dt { font-size: 16px; font-weight: 800; margin-bottom: 10px; position: relative; z-index: 2;}
.design-type dd ul { position: relative; z-index: 2;}
.design-type dd li { font-size: 16px; color: #666; margin-bottom: 2px; padding-left: 10px; position: relative;}
.design-type dd li::before {  content: '·'; position: absolute; left: 0; font-weight: bold;}
.design-type .grayBG { background: #F5F5F5;}
.bg-num { position: absolute; right: 10px; bottom: -10px; font-size: 80px; font-weight: 900; color: #fff;  opacity: 0.8; z-index: 1;}
/* 하단 버튼 */
.design-link { display: flex; justify-content: flex-end;gap: 10px;}
.design-link a { display: inline-block; padding: 6px 15px; border-radius: 25px; font-size: 16px; font-weight: 600; text-decoration: none; transition: all 0.3s;background: #D9D9D9;color: #666;}




/****************************************************************************************/
/****************************************************************************************/
/*Media Query*/
/****************************************************************************************/
/****************************************************************************************/

@media (max-width: 1024px) {
    .column-top { flex-direction: column; }
    .column-top .bann { max-width: 100%; }
    .design-type { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .column-callbox { flex-direction: column; padding: 25px; }
    .call-info { width: 100%; }
    .call-img { position: relative; width: 90%; margin: 20px auto 0; right: 0; text-align: right;height: 50px;}
    .call-img::after { content: ''; position: absolute;right: -20px;bottom: -50px; background: url(/theme/uriwon/img/yellow-call.png) right bottom no-repeat;width: 150px;height: 170px;background-size: cover;}
    .call-img img { display: none;}
    .column-conts { display: block;}
    .column-call { margin-bottom: 20px;}
    .column-kakao::after { top: 12px;width: 45px;}
    .column-tel::after { top: 15px;right: 67px;width: 40px;}
    .column-day { font-size: 20px;padding-top: 10px;}
    .column-day span { display: block;}
    #formmail-write .privacy-of-use {height: auto;}

    .column-day br { display: block;}
    .conTact-tabmenu li a { padding: 10px 20px;}

    .column-title { font-size: 26px;}
    .column-title br { display: block;}

    .why-design { font-size: 24px;}

    
}


@media (max-width: 480px) {
    .form-checking > div .captcha { display: block;}
    .column-callbox { padding: 15px;}
    .conTact-tabmenu li a { padding: 10px 12px;}

    .column-title { font-size: 20px;}

    .column-conts { width: 100%;}
    .why-design { font-size: 20px;}
    .design-type dl { padding: 15px;border-radius: 12px;}
    .design-link { justify-content: center;}
    
}