/* sub banner */
.sub_banner{height: 450px; position: relative; padding: 0 16px; border-radius: 0  0 60px 60px; z-index: 2;}
.sub_banner div{text-align: center; color: #fff; position: relative; top: 50%; left: 50%; transform: translate(-50%, -25%); text-shadow: 0 0 8px rgba(0,0,0,.1);}
.sub_banner div .sb_tit{font-size: 60px; line-height: 1;  font-weight: normal; font-family: 'Montserrat'; font-weight: 700; position: relative; width: max-content; margin: 0 auto;}
.sub_banner div .sb_tit:after{content: ''; position: absolute; display: block; bottom: 5px; right: -19px; width: 12px; height: 12px; border-radius: 50%; background-color: var(--c-02);}

.sub_banner div p{font-size: 16px; line-height: 1; color: #ffffffee; font-weight: 400; padding-top: 22px; line-height: 1.4; word-break: keep-all; opacity: .8;}
.sub_banner div p br{display: none;}

.pro_view .sub_banner div{display: none;}

/* about */
.about_sb{background: url(https://d131jqp4u1oq73.cloudfront.net/images/CREATIVEDA/170370774754088.jpg); background-size: cover; background-position: center; background-repeat: no-repeat;}
/* contact */
.inq_sb{background: url(https://d131jqp4u1oq73.cloudfront.net/images/CREATIVEDA/170370777229201.jpg); background-size: cover; background-position: center; background-repeat: no-repeat;}
/* board */
.board_sb{background: url(https://d131jqp4u1oq73.cloudfront.net/images/CREATIVEDA/170370776470346.jpg); background-size: cover; background-position: center; background-repeat: no-repeat;}
/* motherpick */
.motherpick_sb{background: url(https://d131jqp4u1oq73.cloudfront.net/images/CREATIVEDA/170371304284670.jpg); background-size: cover; background-position: center; background-repeat: no-repeat;}
.case_01{background: url(https://d131jqp4u1oq73.cloudfront.net/images/CREATIVEDA/170334877920166.jpg); background-size: cover; background-position: center; background-repeat: no-repeat;}


.cate{text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }

/* pro_list */
.sub_banner .pro_list{ position: initial; transform: translate(0,0); margin-top: 24px;}
.sub_banner .pro_list ul{display: flex; align-items: center; justify-content: center; gap: 10px;}
.sub_banner .pro_list ul li{cursor: pointer; color: #222;padding: 10px 16px; border-radius: 30px; min-width: 110px; background-color: #ffffffaa; font-weight: 400; backdrop-filter: blur(8px); border: 1px solid #eee; box-shadow: 0 4px 16px rgba(0,0,0,.1); transition: all .15s;}
.sub_banner .pro_list ul li.on{background-color: var(--c-01); color: #fff; border-color: var(--c-01);}
.sub_banner .pro_list ul li:hover:not(.on){background-color: #fff;}


/* current */
.current{color: #777; font-weight: 500; display: flex; align-items: center; margin-top: 30px; display: none;}
.current p, .current i {display: inline-block;}
.current p{padding-top: 3px;}
.current i {padding: 0 9px;}

/* content */
.content{max-width: 1660px; margin: 0 auto;}
.content_inner{ padding: 120px 0 ;}

/* subtit */
.subtit{text-align: center; margin-bottom: 80px;}
.subtit p{font-size: 18px; line-height: 1; font-weight: 600; color: var(--c-01); margin-bottom: 12px; font-family: 'Montserrat';}
.subtit h3{font-size: 44px; line-height: 1; font-weight: 700; color: #222;}

/* sub btn */
.sub_btn{font-size: 18px; line-height: 1; color: #fff; padding: 22px 0 20px; border-radius: 42px;min-width: 220px; background-color: var(--c-01); font-weight: 500;}


/* inquiry */
/* sec01 */
.inquiry_wrap{background-color: #DDE5F1; color: #4F4F4F; font-weight: 500; padding-bottom: 240px; background: url(/PROJECT/SUHO/page/homepage/img/sub/inquiry_bg.jpg) #DDE5F1 no-repeat center top; word-break: keep-all;}
.sec01 .inner{padding: 240px 0 223px;}
.sec01 .inner, .sec02{max-width: 1440px; margin: 0 auto;}
input, button, select{font-family: 'Pretendard';}
.inq_title, .form_title {color: #081F5C;  font-weight: normal;}
.inq_title{font-size: 60px; line-height: 60px;}
.inq_title span{color: var(--c-01);}
.inquiry_wrap .sec01 .inner .mid{padding: 62px 0; font-size: 24px; ; font-weight: 500; line-height: 36px;}
.inquiry_wrap .sec01 .inner .mid span{color: var(--c-01); font-weight: 800;}
.inquiry_wrap .sec01 .inner p.call{font-size: 17px; line-height: 27px; color: #575757; }
.inquiry_wrap .sec01 .inner .call span{font-size: 24px; font-weight: 800; color: var(--c-01);}

/* sec02 */
.sec02 .inquiry_inner{background-color: #fff; padding: 120px 0; box-sizing: border-box;}
.sec02 .inquiry_inner .form_title{font-size: 28px; line-height: 28px; padding-bottom: 30px;}
.smallblue{font-size: 18px; color: var(--c-01);}
.sec02 h5{font-size: 16px; font-weight: 500; background-color: #f8f8f8; width: 180px;display: flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 4px; border-right: 1px solid #eee;}
.sec02 .smallgray{font-size: 14px; line-height: 20px; font-weight: 500; color: #898989;}
.inq input[type=text]{background-color: #fff ;border-radius: 4px; padding: 0 16px; height:56px ; border: none ;  border-radius: 4px; border: 1px solid #eee; font-size: 1rem; color: #222;}
.inq input[type=text]:focus{border-color: var(--c-01);}
input::placeholder{color:#aaa;font-weight: 400; font-size: 16px; line-height: 16px; font-family: 'Pretendard'; vertical-align: middle;}

.file_upload ul{margin-top: 30px;}
.inq > ul{display: flex; flex-wrap: wrap; vertical-align: bottom; border: 1px solid #eee; border-radius: 8px; overflow: hidden;}
.inq ul li > label, .file_upload{display: flex;}
.inq ul li > label > div, .inq ul li > label > input, .file_upload > div,  .inq ul li > label > textarea {margin: 16px;}
.inq ul li + li{border-top: 1px solid #eee;}

textarea{font-family: 'Pretendard';}
textarea:focus{outline: none;}

.half{width: 50%;}
.full{width: 100%;}
.lp{padding-left: 15px;} 
.rp{padding-right:15px;}
.inq{margin-bottom: 50px;}
.lm{margin-left:30px;}
.mt{margin-top: 30px;}
.m60{margin: 60px 0;}
.m0{margin-bottom: 0;}
.mr{margin-right: 60px;}


.check_list label + label{margin-left: 20px;}

/* 제출버튼 */
.inq_btn{width:100%; margin: 70px auto 0 ; text-align: center; display: flex; justify-content: center;}
.inq_btn button{display: inline-block; font-size: 17px;; padding: 16px 0; min-width: 180px; margin: 0 auto; border-radius: 50px;}
.submit_btn{background-color: var(--c-01); color: #fff;}
.prev_btn{background-color: #EDF0F5; color: var(--c-01);}
input[type=checkbox]:checked + label:before, input[type=checkbox] + label:before{position: relative; bottom: 1px;}

/* 이메일입력 */
.email{display: flex; align-items: baseline;}
.inq .email input{width: 100% ; margin-bottom: 0;}
.inq .email input:nth-child(2){width: 30%;}
.email select{width: 30% ; height: 56px; outline: none; border: 1px solid #eee;  color:#222; border-radius: 4px; font-weight: 500; font-size: 16px; padding-left: 20px; box-sizing: border-box;}
.gray{font-size: 18px; color: #555; padding: 0 10px;}

/* 날짜선택 */
.date{display: flex; align-items: center;}
.date input{width: 100%; height: 56px; border: 1px solid #eee; border-radius: 4px; outline: none; background: #fff no-repeat 20px 47%; padding-left: 50px;font-weight: 500; font-size: 16px; color: #747474; line-height: 16px; position:relative; margin-bottom: 0;}
input[type='date']::-webkit-calendar-picker-indicator{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: transparent; color: transparent; cursor: pointer;}

/* 라디오버튼 */
input[type=radio]{display: inline-block; width: 20px; height: 20px; margin: 0; margin-right: 3px; margin-bottom: 3px; background-color: #bbbbbb; border-radius: 50%; accent-color: var(--c-01);}
.radio .smallgray br{display: none;}

/* 파일첨부 */
.file_upload h5{padding-bottom: 0;}
.file_upload p{padding-bottom: 10px;}
.file_upload p span + span::before{content: ''; display: inline-block; position: relative; margin: 0 6px; height: 12px; width: 1px; background: #000; opacity: .2;}
.fileupload{display: flex; gap: 10px; width: 100%;}
input[type=file]{position: absolute; width: 1px; height: 1px; padding:0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;}

.preview{display: flex; flex-wrap: wrap; margin-top: 0 !important; width: 100%;}
.preview li{width: calc( 100%/4 - 6px ); box-sizing: border-box; background-color: #f5f5f5; border-radius: 20px; line-height: 16px; margin-right: 8px; margin-bottom: 10px;  padding: 8px 16px; margin-top: 16px; min-width: 0; position: relative; display: block;} 
/* .preview li p.tit{overflow: hidden; white-space: nowrap; text-overflow: ellipsis; position: relative; font-size: 13px; color: #747474; padding-bottom: 0; line-height: 1.5; flex: 1; word-break: break-all; padding-right: 10px; display: block; width: 100%;} */
.preview li p.tit{overflow: hidden; white-space: nowrap; text-overflow: ellipsis; position: relative; font-size: 13px; color: #747474; padding-bottom: 0; line-height: 1.5; flex: 1; word-break: break-all; padding-right: 10px; display: block; width: 100%;}
.preview li button{ color: rgba(0,0,0,0.5) !important; padding-right: 0; width: 20px; display: inline-block; position: absolute; top: 43%; right: 10px; transform: translateY(-50%);}
.preview li:nth-child(4n){margin-right: 0;}

/* delete button */
.fileupload{position: relative;}
button.delete{position: absolute; top:28%; right: 22.5%; z-index: 10; font-size: 18px; cursor: pointer; color: #191919;}

.file_upload label{height: 56px; border-radius: 4px; text-align: center; font-size: 16px; color: #fff; color: var(--c-01); border: 1px solid var(--c-01); background: #F9FFED;  width: 140px; cursor: pointer; display: flex; justify-content: center; align-items: center;}
.file_name{display: inline-block; width: calc(100% - 150px); height: 56px; border-radius: 4px; font-size: 16px;appearance: none; border: none; box-sizing: border-box; padding: 0 16px; padding-right: 20px; background: #fff ; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-radius: 4px; border: 1px solid #eee;}

/* 개인정보수집 */
textarea::placeholder{color: #aaa; font-family: 'Pretendard';}
.textarea.readonly{background-color: #f8f8f8; ; color: #666; border-radius: 8px;}
.textarea{ border-radius: 4px;  border: 1px solid #eee; padding: 16px; font-size: 16px; line-height: 22px; color: #222; height: 150px; margin-bottom: 10px; word-break: normal; overflow-y: auto; width: 100%; resize: none;}
.textarea:focus{outline: 1px solid var(--c-01);}
.textarea::-webkit-scrollbar{width: 10px;}
.textarea::-webkit-scrollbar-track{width: 10px; border-radius: 10px; }
.textarea::-webkit-scrollbar-thumb{background-color: var(--c-01); border-radius: 10px;}
.textarea::-webkit-scrollbar-button{display: none;}

.textarea.ta-input{height: 250px;}


.textarea p span{font-size: 14px ;}
input[type=checkbox]{width: 20px; height: 20px; accent-color: var(--c-01); margin: 0; margin-right: 8px; background-color: #bbbbbb;}
.inq4 label{font-size: 16px; color: #575757;}

/* modal 모달 */
.modal{ position: fixed; z-index: 100; left: 0; top: 0; bottom: 0; max-width: 100%; width: 100%; height: 100%; color: #4f4f4f;}
.modal-bg{    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .5;
    z-index: 100;
    transition: all .2s;
    }

.modal-wrap{position: relative; width: auto; margin: 0 auto; top: 50%; transform: translateY(-50%);  background-color: #fff; border-radius: 5px;/* border-radius: 10px; */ z-index: 120;box-shadow: 2px 4px 11px rgba(0,0,0,0.2);}
.modal-con{padding: 40px 30px 40px; }
.modal-close{position: absolute; right: 16px; top: 16px; font-size: 1.35em; cursor: pointer; display: none; z-index: 102;}
.modal-body p.md-title{font-size: 1.2em; color: #222;}
.modal-body .md-con{padding-top: 10px;}
.modal-body .md-con p{font-size: 16px; font-weight: 500;}
.modal-body .md-btn{text-align: right; padding-top: 30px;}
.modal-body .md-btn button.center_button{display: inline-block; cursor: pointer; margin:0 5px;  padding: 0 26px; height: 36px; border-radius: 3px; line-height: 34px; background-color: var(--c-01); color: #fff; font-size: 15px;}

/* 기본알람창 크기 */
.modal-wrap.modal-xs{max-width: 520px;}
.modal-wrap.modal-sm{max-width: 760px;}
.modal-wrap.modal-md{max-width: 1024px;}
.modal-wrap.modal-lg{max-width: 1200px;} 

/* inq_header */
.inq_header .header{position: absolute; top: 0; left: 0; height: 100px; width: 100%; z-index: 10;}
.inq_header .header div h1 img{content: url(/PROJECT/SUHO/page/homepage/img/main/logo_dark.png);}
.inq_header .header div ul li a{color: #3b5088;}


/* board */
.case_02 .case_list ul{display: flex; flex-wrap: wrap; gap: 70px 30px; width: 100%;}
.case_02 .case_list ul li{width: calc((100% - 60px) / 3); cursor: pointer;}

.case_02 .case_list ul li .img{position: relative; padding-bottom: 70.79%; overflow: hidden; border-radius: 16px;}
.case_02 .case_list ul li .img img{position: absolute; width: 100%; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.case_02 .case_list ul li .img:after{content:''; width: 100%; height: 100%; background-color: #00000020; backdrop-filter: blur(16px); position: absolute; opacity: 0; transition: all .15s;}
.case_02 .case_list ul li:hover .img:after{opacity: 1;}
.case_02 .case_list ul li:hover .img .hover_btn{opacity: 1;}

.case_02 .case_list ul li .txt{margin-top: 20px; font-weight: 500; line-height: 1;}
.case_02 .case_list ul li .txt .tit{overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 22px; color: #333; padding-top: 3px; font-weight: 600; line-height: 1.2;}
.case_02 .case_list ul li .txt .date, .case_02 .case_list ul li .txt .cate span{font-size: 16px; color: #777; padding-bottom: 10px; display: inline-block;}
.case_02 .case_list ul li .txt .cate span + span:before{content: '·'; color: #000; opacity: .2; display: inline-block; position: relative; margin: 0 6px;}


.board .case_02 .case_list ul li{width:calc((100% - 90px) / 4);}


.pagination div{display: flex; justify-content: center; margin-top: 60px; align-items: center; gap: 4px;}
.pagination div span{display: inline-block; font-size: 18px; font-weight: 500; color: #777; padding: 0 14px; cursor: pointer; line-height: 2;}
.pagination div span.on{color: #333;}
.pagination div span:hover{color: #333;}
.pagination .pag_btn{position: relative; align-self: stretch;}
.pagination .pag_btn.prev:after{content: ''; display: inline-block; position: relative; width: 10px; height: 10px; border-top: 2px solid #888; border-left: 2px solid #888; position: relative; display: block; left: 50%; top: 55%; transform: translate(-50%, -50%) rotate(-45deg);}
.pagination .pag_btn.next:after{content: ''; display: inline-block; position: relative; width: 10px; height: 10px; border-top: 2px solid #888; border-right: 2px solid #888; position: relative; display: block; left: 50%; top: 55%; transform: translate(-50%, -50%) rotate(45deg);}


/* project */
.pro_flex{display: flex; align-items: flex-start; gap: 40px;}
.pro_flex > ul{flex: 1;}
.pro_cate_list{flex-shrink: 0; width: 300px; border: 1px solid #eee; box-sizing: border-box; padding: 30px; box-shadow: 0 0 8px rgba(0,0,0,.08); }
.pro_cate_list p{font-size: 22px; font-weight: 600; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #eee; line-height: 1;}
.pro_cate_list .check label{ display: block;}
.pro_cate_list .check label + label{margin-top: 6px;}
.cate_bundle + .cate_bundle{margin-top: 20px; padding-top: 20px; border-top: 2px solid #92D60060;}

.filter-btn{margin-top: 20px;}
.filter-btn span{display: block; width: 100%; padding: 10px 0; font-size: 15px; color: #fff; border-radius: 8px; background-color: var(--c-01); text-align: center; cursor: pointer; transition: all .15s;}
.filter-btn span:hover{box-shadow: 0 2px 8px #92D60080;}



/* project_view */
/* .pro_view .subtit {padding: 60px 0; border: 1px solid #eee; border-radius: 20px; background-color: #f8f8f8;} */
.pro_view .subtit {margin-bottom: 50px;}
.pro_view .subtit h3{font-size: 36px; line-height: 1.3; word-break: keep-all;}
.pro_view .case_view .case_view_content{border-color: #eee;}
.go_inq_btn{margin: 0 auto 30px; display: flex; justify-content: center;}
.go_inq_btn button{width: 70%; border: 10px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.15); display: flex; gap: 10px; justify-content: center; align-items: center; transition: all .15s;}
.go_inq_btn button i{display: inline-block; opacity: .8; animation: right_move 1.5s linear infinite; position: relative;}

@keyframes right_move {
    0% { right:0; }
    50% { right: -10px; }
    100% { right:0; }
  }
  
  .go_inq_btn button:hover{box-shadow: 0 2px 16px var(--c-01);}

/* no_case */
.no_content{text-align: center; font-size: 18px; line-height: 1; font-weight: 500; color: #777;  padding: 120px 0;}

/* board_view */
.case_view{font-weight: 500; }
.case_view .case_view_top{padding-bottom: 22px;}
.case_view .case_view_top h5{font-size: 24px; line-height: 1.4; font-weight: 500; color: #333; padding-bottom: 10px;}
.case_view .case_view_top > div{display: flex; justify-content: space-between; font-size: 16px; line-height: 1; color: #777;}
.case_view .case_view_top > div > div{display: flex;} 
.case_view .case_view_top p.date{padding-right: 30px;}
.case_view .case_view_content{padding: 60px 16px; border-top: 1px solid #777;  margin-bottom: 0;}
.case_view .case_view_content p{line-height: 1.4;}
.case_view .case_view_bottom .bottom_box .prev, .case_view .case_view_bottom .bottom_box .next{display: flex; align-items: center; border-top: 1px solid #ddd; font-size: 17px; width: 100%;}
.case_view .case_view_bottom .bottom_box .pn_txt{width: 140px; align-self: stretch;display: flex; align-items: center; justify-content: center; background: #f8f8f8; position: relative; z-index: -1;}
.case_view .case_view_bottom .bottom_box .next{border-bottom: 1px solid #ddd;}
.case_view .case_view_bottom .bottom_box i{display: inline-block; padding-right: 12px; padding-bottom: 2px;}
.case_view .case_view_bottom .bottom_box a{color: #555; width: calc(100% - 140px);display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 20px 40px;}
/* .case_view .case_view_bottom .bottom_box a .bottom_tit{overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 20px 40px;} */
.case_view .case_view_bottom .list_btn{margin-top: 50px; text-align: center;}
/* .case_view .case_view_content p img{max-width: 100%; margin-top: 10px;} */
.case_view .case_view_content p img{max-width: 100%;}

/* about */
/* recuit */
.recruit .case_view .case_view_content{padding: 0; border: none;}
.recruit .content{max-width: 1440px;}

/* location */
.location .map_wrap{width: 100%;}
.location .map_wrap .root_daum_roughmap_landing{width: 100%;}
.location .map_wrap .wrap_map{width: 100% !important; height: 500px;}

.location .txt_wrap{margin-top: 24px;}
.location .txt_wrap .top{display: flex; height: auto; justify-content: space-between; align-items: center; padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid #ddd;}
.location .txt_wrap .top b{font-size: 30px; display: block; font-weight: 600; }
.location .txt_wrap .top .link_wrap{display: flex; align-items: center;}
.location .txt_wrap .top .link_wrap a{display: flex; align-items: center;padding: 12px 24px;  margin-right: 16px; font-weight: 600; border-radius:2px;}
.location .txt_wrap .top .link_wrap a.naver{background-color: #00C73C; color: #fff;}
.location .txt_wrap .top .link_wrap a.kakao{background-color: #F7E600; color: #222;}
.location .txt_wrap .top .link_wrap a img{width: 16px; margin-right: 16px}

.location .txt_wrap .top .link_wrap a:last-child{margin-right: 0;}

/* .txt_in{display: flex; align-items: center;} */

.location .txt_wrap .txt_in p{display: flex; font-size: 18px; font-weight: 500; align-items: center; color: #555;} 
.location .txt_wrap .txt_in p + p{margin-top: 12px;}
.location .txt_wrap .txt_in p img{width: 22px; height: 22px; opacity: 0.3; margin-right: 10px; filter: saturate(0);}


/* about info */
.about *{word-break: keep-all;}
/* .about .content_inner{margin-left: -16px !important; margin-right: -16px !important; } */

.fc-g{color: var(--c-01) !important;}
.fc-g2{color: var(--c-02) !important;}
.fc-w{color: #fff !important;}
.bold{font-weight: 700;}
.about-sec{position: relative; text-align: center;}
.about-sec + .about-sec:not(.bg-about){margin-top: 120px;}
.bigger{font-size: 72px; font-weight: 700;; line-height: 1.3;}
.bigger2{font-size: 58px; font-weight: 700;; line-height: 1.3;}
.big{font-size: 44px; font-weight: 700;; line-height: 1.4;}
.big.mon{font-size: 50px;}
.medium h5, .medium{font-size: 36px; color: #444; font-weight: 500;}
.small{font-size: 24px; color:#444; font-weight: 400;}
.small2{font-size: 20px; color:#444; font-weight: 400; word-break: keep-all;}
.r-txt{display: inline-block; padding: 8px 36px; border-radius: 100px; border: 2px solid var(--c-01); color: var(--c-01);}
.r-txt.gr{color: #fff; background-color: var(--c-01); border-color: var(--c-01);}
.flex-txt{display: flex; flex-direction: column;}
.gap100{gap: 100px;}
.gap70{gap: 70px;}
.gap50{gap: 50px;}
.gap30{gap: 30px;}

.big_bg{width: 100%; height: 800px; background-size: cover; background-attachment: fixed; background-position: center; position: relative; color: #fff;}
.big_bg.sm{height: 700px; margin-top: 80px;}


.line{display: block; width: 6px; height: 100px; margin: 0 auto; background-color: #eee;}
.about .marquee{transform: translateY(80%);}

.about-sec.bg-about.about02, .about-sec.about04.flex-about{margin-top: 200px;}
.about04{padding-top: 100px;}
.about02 .big_bg{background-image: url(https://d131jqp4u1oq73.cloudfront.net/images/CREATIVEDA/170300496535155.jpg);}
.about03 .big_bg{background-image: url(https://d131jqp4u1oq73.cloudfront.net/images/CREATIVEDA/170301361387325.jpg);}
/* .about04 .big_bg{background-image: url(https://d131jqp4u1oq73.cloudfront.net/images/CREATIVEDA/170301988659064.jpg);} */
.about04 .big_bg{background-color:#726767;}


.big_bg .fc-g{color: var(--c-02);}
.big_bg .big, .big_bg .bigger, .big_bg .medium{text-shadow: 0 0 8px rgba(0,0,0,.1);}
.big_bg .r-txt{border-color: #fff; color:#fff;}
.bgtxt-center{display: flex; align-items: center; justify-content: center;width: 100%; height: 100%; flex-direction: column;}
.blur-box{padding: 50px ; background-color: #00000020; backdrop-filter: blur(10px); border: 1px solid #ffffff33;}

.big_bg .big{position: relative;}
.about02 .big_bg .big:first-child:before, .about03 .big_bg .big:first-child:before{content:'ABOUT US'; width: max-content; color: #fff; font-family: 'Montserrat'; font-size: 120px; font-weight: 900; display: block; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);opacity: .2;}
.about03 .big_bg .big:first-child:before{content:'FUTURE';}

.about03 .marquee{bottom: 30px;}

.flex-txt.ho-f{flex-direction: row; text-align: left;}
.flex-txt.ho-f .left{flex: .4; flex-shrink: 0;}

.list-bg{background: #f5f5f5; padding: 120px 0; margin-top: 70px;}
.icon_list{width: 100%;}
.icon_list h5{position: relative; margin-bottom: 30px; display: inline-block; display: flex; justify-content: center; align-items: center; gap: 16px;}
/* .icon_list h5:before, .icon_list h5:after{content: ''; position: relative;  width: 5vw; height: 2px; background-color: #ddd; top: 50%; transform: translateY(-50%); display: block; z-index: -1;} */




.icon_list ul{display: flex; justify-content: center; width: 100%; gap: 30px;}
.icon_list ul li{width: calc(70% / 4); border-radius: 30px; aspect-ratio: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #ffffff; box-shadow: 0 0 10px rgba(0,0,0,.08); gap: 10px;}
.icon_list ul li i img{width: 70%; display: block; margin: 0 auto;}


.certi-list{display: flex; flex-wrap: wrap; align-items: flex-start; gap: 50px 30px;}
.certi-list li{width: calc((100% - 120px) / 5);}
.certi-wrap{position: relative; width:100%; aspect-ratio: 1 / 1.4141;}
.certi-wrap img{position: absolute; width: 100%; height:100%; left:50%; top:50%;
transform: translate(-50%, -50%); object-fit: cover; border: 1px solid #ddd;}
.certi-list p{margin-top: 8px; text-align: left; color: #444; font-size: 22px; line-height: 1.4;}



/* platform */
/* motherpick */
.about-sec.sv-mp-list{margin-top: 196px !important;}
.sv-mp-list li{display: flex; align-items: center; justify-content: center; gap: 50px;}
.sv-mp-list li.reverse{flex-direction: row-reverse;}
.sv-mp-list li .imgwrap{width: 40%; flex-shrink: 0; aspect-ratio: 1; background-repeat: no-repeat; background-size: cover; background-position: center; position: relative;}
.sv-mp-list li:nth-child(1) .imgwrap{background-image: url(https://d131jqp4u1oq73.cloudfront.net/images/CREATIVEDA/170311009634858.jpg);}
.sv-mp-list li:nth-child(2) .imgwrap{background-image: url(https://d131jqp4u1oq73.cloudfront.net/images/CREATIVEDA/170311010298387.jpg);}
.sv-mp-list li:nth-child(3) .imgwrap{background-image: url(https://d131jqp4u1oq73.cloudfront.net/images/CREATIVEDA/170311007090792.jpg);}


.sv-mp-list li .txtwrap{flex: 1; display: flex; flex-direction: column; text-align: left; position: relative; }
.sv-mp-list li .txtwrap .small{color: #222; font-weight: 500;}
.p-tit{position: relative; font-size: 38px; font-weight: 700; color: #222;}
.p-tit:before{content:'POINT'; position: absolute; left: 0; top:-46px; display: block; font-size: 70px; font-family: 'Montserrat'; color: #00000008; font-weight: 900; line-height: 1;} 
.sv-mp-list li:nth-child(1) .p-tit:before{content:'POINT.01';}
.sv-mp-list li:nth-child(2) .p-tit:before{content:'POINT.02';}
.sv-mp-list li:nth-child(3) .p-tit:before{content:'POINT.03';}

.pb50{padding-bottom: 50px;}

.sv-mp-flex .left-img{padding-bottom: 0; padding-top: 50px; width: 45%; flex-shrink: 0;}
.sv-mp-flex  .right-txt{gap: 20px;}
/* .mp-flex.sv-mp-flex:before{left: 0; transform: translate(-50%, -50%); width: 400px; height: 400px;} */
.mp-flex.sv-mp-flex:before{display: none;}



/* b2b / homeshopping */
.sv-list{}
.sv-list ul{display: flex; align-items: center; justify-content: center; flex-wrap: wrap; margin-bottom: 70px; gap: 20px;}
.sv-list ul li{padding: 20px; background-color: #fff; width: calc(50% - 10px); display: flex; align-items: center; text-align: left; align-self: stretch; box-shadow: 0 0 10px rgba(0,0,0,.08); gap: 30px;}
.sv-list ul li .iconwrap{width: 200px; aspect-ratio: 1; flex-shrink: 0;}
.sv-list ul li .txtwrap{flex: 1;}
.sv-list ul li .txtwrap h6{font-size: 24px; color: var(--c-01); margin-bottom: 10px;}
.sv-list ul li .txtwrap p{ font-weight: 400; font-size: 18px;}
.sv-list ul li.full{width: 100%;}
.about-sec .go_inq_btn{margin-bottom: 0;}


/* motherpick */
.mp-flex{display: flex; align-items: center; text-align: left; position: relative;}
.mp-flex:before{content: ''; display: block; width: 600px; height: 600px; background: url(https://d131jqp4u1oq73.cloudfront.net/images/CREATIVEDA/170371539641179.png) no-repeat center; background-size: contain; right: 0; top:0; position: absolute; opacity: .2; transform: translate(30%, -50%); z-index: -1;}

.left-img{padding: 40px; position: relative; background-color: #F3FFD9; width: 648px; flex-shrink: 0; box-shadow: inset 0 0 50px #ebffbe;}
.left-img img{width: 70%; margin: 0 auto; position: relative; left: 7%;}
.right-txt{display: flex;  flex-direction: column; gap:30px; flex: 1;}
.right-txt .medium{color: #222;}
.right-txt span{color: #fff; display: inline-block; border: 2px solid var(--c-01); color: var(--c-01); padding: 6px 20px; font-size: 16px; border-radius: 40px; margin-bottom: 10px;} 
.button-wrap .web-qr ul{display: flex;gap: 40px; border-radius: 20px; background-color: #f8f8f8; padding: 30px;} 
.button-wrap .web-qr ul li{flex: 1; text-align: center;}
.button-wrap .web-qr ul li .qr-box{background-color: #fff; margin-bottom: 16px; padding: 20px; border-radius: 10px;}
.button-wrap .web-qr ul li .qr-box img{width: 50%; margin: auto;}
.button-wrap .web-qr ul li p{font-size: 18px; color: #333;}

/* .button-wrap .web-qr{display: none;} */
.button-wrap .mo-btn{display: flex; gap: 10px; flex-direction: column ; background-color: #f8f8f8; padding: 20px; border-radius: 10px; display: none;}
.button-wrap .mo-btn button{display: block; width: 100%; font-size: 16px; padding: 16px 0; border-radius: 4px; background-color: #fff; display: flex; gap: 10px; justify-content: center; align-items: center; color: #fff; background-color: var(--c-01);} 
.button-wrap .mo-btn button:last-child{background-color: #111;  }
/* .button-wrap .mo-btn button:last-child i img{filter: brightness(100%);} */
.button-wrap .mo-btn button i{display: flex; }
.button-wrap .mo-btn button i img{width: 80%; filter: brightness(100000%);}



/* company */
.sub_banner.company_01{background: url(/PROJECT/SUHO/page/homepage/img/sub/company_bg.jpg); background-size: cover; background-position: center; background-repeat: no-repeat;}
.company_02 .content_inner{padding-bottom: 0;}

.company_03 .cp{padding-bottom: 80px;}
.company_03 .cp_bd{max-width: 1240px; margin: 0 auto;}
.company_03 .cp1 h4{text-align: center;font-weight: 500; font-size: 22px; line-height: 1.4;}
.company_03 .cp1 h4 span{color: var(--c-01); font-weight: 800;}
.company_03 .cp1 span.line{width: 1px; height: 80px; background-color: var(--c-01); display: block; margin: 50px auto;}
.company_03 .cp1 h3{ font-weight: normal; font-size: 36px; line-height: 1.3; color: #081F5C; text-align: center;}
.company_03 .cp1 h3 span{color: var(--c-01); font-size: 48px;}
.company_03 .cp1 h3 .mo_br{display: none;}

.company_03 .cp2{background-color: #F0F4FB;  margin-top: 60px; margin-bottom: 70px;}
.company_03 .cp2 .cp2_wrap{display: flex; max-width: 1240px; margin: 0 auto; justify-content: center; margin-bottom: -30px;}
.company_03 .cp2 .cp2_wrap .img{width: 372px; margin-top: -60px;}
.company_03 .cp2 .cp2_wrap .txt{padding-top: 40px; padding-left: 50px; word-break: keep-all; font-weight: 500; line-height: 1.5; font-size: 16px;}
.company_03 .cp2 .cp2_wrap .txt > div{padding:40px 0;}
.company_03 .cp2 .cp2_wrap .txt > div p{color: #555;}
.company_03 .cp2 .cp2_wrap .txt > div p:last-child{padding-top: 14px;}
.company_03 .cp2 .cp2_wrap .txt .big{font-size: 25px;line-height: 1.4; color: #081F5C;}
.company_03 .cp2 .cp2_wrap .txt .name{font-size: 15px; line-height: 1.3; color: #777;}
.company_03 .cp2 .cp2_wrap .txt .name span{font-size: 30px; display: block; color: #333;}

.company_03 .cp3 .cp3_wrap{display: flex; padding: 60px 0;}
.company_03 .cp3 .cp3_wrap .left{font-size: 28px; color: #081F5C; width: 25%;}
.company_03 .cp3 .cp3_wrap .left h5 span{color: var(--c-01);}
.company_03 .cp3 .cp3_wrap .right{width: 75%;}
.company_03 .cp3 .cp3_wrap .right ul{display: flex; justify-content: space-between;}
.company_03 .cp3 .cp3_wrap .right ul a{width: 32%; height: 180px; box-sizing: border-box; padding: 30px; background-color: #DDE5F1; border-radius: 14px; display: inline-block; font-weight: 500; color: #3b4b79; font-size: 16px; transition: all 0.2s;}
.company_03 .cp3 .cp3_wrap .right ul a span{font-size: 20px;}
.right-txt .medium h5, .right-txt .medium{line-height: 1.3; word-break: keep-all;} 

.company_03 .cp3 .cp3_wrap .right ul a:nth-child(1){background: url(/PROJECT/SUHO/page/homepage/img/sub/cp_icon1.png) #DDE5F1 no-repeat 88% 85%; background-size: 60px; }
.company_03 .cp3 .cp3_wrap .right ul a:nth-child(2){background: url(/PROJECT/SUHO/page/homepage/img/sub/cp_icon2.png) #DDE5F1 no-repeat 88% 85%; background-size: 50px; }
.company_03 .cp3 .cp3_wrap .right ul a:nth-child(3){background: url(/PROJECT/SUHO/page/homepage/img/sub/cp_icon3.png) #DDE5F1 no-repeat 88% 85%; background-size: 66px; }

.company_03 .cp3 .cp3_wrap .right ul a:nth-child(1):hover{background: url(/PROJECT/SUHO/page/homepage/img/sub/cp_icon1_white.png) var(--c-01) no-repeat 88% 85%; background-size: 60px; color: #fff;}
.company_03 .cp3 .cp3_wrap .right ul a:nth-child(2):hover{background: url(/PROJECT/SUHO/page/homepage/img/sub/cp_icon2_white.png) var(--c-01) no-repeat 88% 85%; background-size: 50px; color: #fff;}
.company_03 .cp3 .cp3_wrap .right ul a:nth-child(3):hover{background: url(/PROJECT/SUHO/page/homepage/img/sub/cp_icon3_white.png) var(--c-01) no-repeat 88% 85%; background-size: 66px; color: #fff;}


/* policy */
.txtbox{background-color: #f6f6f6; padding: 30px; border-radius: 8px;}
.txtbox{font-weight: 500; color: #555; font-size: 15px; line-height: 1.5;}
/* .sub_banner.policy_sb{height: 500px; background: url(/PROJECT/SUHO/page/homepage/img/sub/policy_bg.jpg); background-size: cover; background-position: center; background-repeat: no-repeat;} */
.policy_subtit h3.policy_h3{font-size: 30px;}
.terms .subtit{margin-bottom: 50px;}
.terms .content_inner{margin-top: 50px;}
.terms header nav .open_menu{background: url(../img/open_on.svg) no-repeat center / contain;}




/* ********************************************* *
* 1660px
* ********************************************* */
@media screen and (max-width: 1660px){
  
    .content{padding-left: 16px; padding-right: 16px;}

    /* project */
    .case_02 .case_list ul{ gap: 50px 20px;}
    .case_02 .case_list ul li{width: calc((100% - 40px) / 3);}


    .left-img{width: 500px;}
    .right-txt{gap: 20px;}
    .right-txt span{padding: 4px 16px; font-size: 15px;}
    .right-txt .medium h5, .right-txt .medium{line-height: 1.3; word-break: keep-all;} 
    .button-wrap .web-qr ul{gap: 20px; padding: 20px;}
    .button-wrap .web-qr ul li .qr-box{padding: 14px; margin-bottom: 10px;}
    .button-wrap .web-qr ul li .qr-box img{width: 40%;}

    .certi-list p{font-size: 20px;}


}

/* ********************************************* *
* 1400px
* ********************************************* */
@media screen and (max-width: 1400px){
    .mp-flex:before{width: 40vw; transform: translate(30%, -55%);}

    .sv-list ul li .iconwrap{width: 150px;}
    .sv-list ul li .txtwrap p{font-size: 17px;}
    .sv-list ul li .txtwrap h6{font-size: 20px; margin-bottom: 8px;}
    .sv-list ul{gap: 16px;}
    .sv-list ul li{width: calc(50% - 8px); gap: 20px;} 

    .case_02 .case_list ul{gap: 60px 20px;}
    .board .case_02 .case_list ul li{width: calc((100% - 60px) / 4);}

    .pro_flex{gap: 30px;}
    .pro_cate_list{width: 250px;}

    .gap70{gap: 50px;}
    .gap50{gap: 40px;}
    .big{font-size: 38px;}
    .bigger{font-size: 66px;}
    .bigger2{font-size: 50px;}
    .medium h5, .medium{font-size: 30px;}
    .small{font-size: 20px;}
    .small2{font-size: 18px;}
    .about02 .big_bg .big:first-child:before, .about03 .big_bg .big:first-child:before{font-size: 100px;}
    .blur-box{padding: 40px;}
    .list-bg{padding: 100px 0; }


    /* project */
    .case_02 .case_list ul{ gap: 50px 16px;}
    .case_02 .case_list ul li{width: calc((100% - 32px) / 3);}
    .project .case_02 .case_list ul li .txt .tit{font-size: 20px; }
    .case_02 .case_list ul li .txt .date, .case_02 .case_list ul li .txt .cate span{padding-bottom: 6px; font-size: 15px;}
    .case_02 .case_list ul li .txt{margin-top: 12px;}
    .pro_view .subtit h3{font-size: 32px;}

    .certi-list p{font-size: 18px;}

    .p-tit{font-size: 32px;}
    .p-tit:before{font-size: 58px; top: -29px;}

}

/* ********************************************* *
* 1240px
* ********************************************* */

@media screen and (max-width: 1240px){


    .sv-list ul li .iconwrap{width: 120px;}
    .sv-list ul li .txtwrap p{font-size: 16px;}
    .sv-list ul li .txtwrap h6{font-size: 18px; margin-bottom: 6px;}


    .current{padding: 0 16px; font-size: 15px;}
    .current i img{width: 80%; }
    .current i{padding: 0 5px 0 9px;}
    .content_inner{ padding: 100px 0 ;}
    .subtit p{font-size: 17px;}
    .subtit h3{font-size: 36px;}
    .subtit{margin-bottom: 100px;}

    .sv-mp-list li{gap: 30px;}
    .sv-mp-flex .left-img{padding-top: 40px;}


    /* inquiry */
    .inquiry_wrap{padding-bottom: 200px; background-size: contain;}
    .sec01 .inner{padding: 200px 20px 200px;}
    .file_upload label{text-wrap: nowrap;}
    .sec02 h5{width: 140px;}

    /* case */
    .case_02 .case_list ul li .txt .tit{font-size: 18px; padding-bottom: 10px;}
    .case_02 .case_list ul li .txt .date{font-size: 15px; padding-bottom: 8px;}
    /* case_view */
    .case_view .case_view_top h5{font-size: 22px;}
    .case_view .case_view_content{padding: 50px 16px 70px;}
    .case_view .case_view_bottom .bottom_box p, .case_view .case_view_bottom .bottom_box p{padding-top: 3px; font-size: 16px;}
    .case_view .case_view_bottom .bottom_box a {padding: 16px 30px;}

    /* project*/
    .project .case_02 .case_list ul li .txt .tit{font-size: 18px; }


    /* company */
    .company_03 .cp1 h4{font-size: 20px;}
    .company_03 .cp1 span.line{margin: 40px auto;}
    .company_03 .cp1 h3{font-size: 32px;}
    .company_03 .cp1 h3 span{font-size: 44px;}

    .company_03 .cp2 .cp2_wrap .txt{font-size: 15px;}
    .company_03 .cp2 .cp2_wrap .txt .big{font-size: 23px;}
    .company_03 .cp2 .cp2_wrap .txt .name{font-size: 14px;}
    .company_03 .cp2 .cp2_wrap .txt .name span{font-size: 28px;}

    .company_03 .cp3 .cp3_wrap .left{width: 24%;}
    .company_03 .cp3 .cp3_wrap .right ul a{font-size: 14px;}
    .company_03 .cp3 .cp3_wrap .right ul a span{font-size: 17px;}


    .certi-list{gap: 30px 16px; }
    .certi-list li{width: calc((100% - 48px) / 4);}

    .about-sec.sv-mp-list{margin-top: 160px !important;}
}


/* ********************************************* *
* 1100px
* ********************************************* */
@media screen and (max-width: 1100px){

    .sv-list ul li .txtwrap p{font-size: 15px;}
    .sv-list ul li{gap: 10px; padding: 16px; width: calc(50% - 6px);}
    .sv-list ul{gap: 12px;}

    .left-img{width: 420px;}
    .button-wrap .web-qr ul li p{font-size: 16px;}

    .gap100{gap: 70px;}
    .gap70{gap: 50px;}
    .gap50{gap: 30px;}
    .gap30{gap: 20px;}
    .big{font-size: 32px;}
    .bigger{font-size: 56px;}
    .bigger2{font-size: 40px;}
    .medium h5, .medium{font-size: 24px;}
    .small{font-size: 17px;}
    .small2{font-size: 16px;}
    .about02 .big_bg .big:first-child:before, .about03 .big_bg .big:first-child:before{font-size: 88px;}
    .blur-box{padding: 32px;}
    .line{width: 3px; height: 60px;}

    .big_bg{height: 650px;}
    
    .icon_list ul li{border-radius: 16px; width: calc(90% / 4);}
    .icon_list ul{gap: 20px;}
    
    .about-sec.bg-about.about02, .about-sec.about04.flex-about{margin-top: 150px;}
    .list-bg{padding: 80px 0; margin-top: 50px;}
    .about04{padding-top: 80px;}
    .about-sec + .about-sec:not(.bg-about){margin-top: 100px;}
    .about .marquee{transform: translateY(76%);}
    .about03 .marquee{bottom: 14px;}


    .about-sec.sv-mp-list{margin-top: 150px !important;}
    .pb50{padding-bottom: 0;}

}

/* ********************************************* *
* 1024px
* ********************************************* */
@media screen and (max-width: 1024px){

    .case_02 .case_list ul{gap: 50px 16px ;}
    .board .case_02 .case_list ul li{width: calc((100% - 32px) / 3);}
    
    .sv-mp-flex .right-txt{gap: 10px;}
    .sv-mp-list li .imgwrap{width: 45%;}
    .p-tit{font-size: 26px;}
    .p-tit:before{font-size: 50px; top: -27px;}

    .r-txt{padding: 6px 26px;}

    .bigger{font-size: 50px;}
    .bigger2{font-size: 34px;}

    .about01 .big .none{display: block;}
    .about01 .big .r-txt{margin-top: 12px;}
    .about .marquee{transform: translateY(85%);}
    .about03 .marquee{bottom: 32px;}
    .icon_list h5{margin-bottom: 20px;}

    
    .pro_cate_list{padding: 26px;}
    .pro_cate_list p{font-size: 20px;}

    .sub_banner{height: 400px; border-radius: 0 0 30px 30px;}
    .sub_banner div{transform: translate(-50%, -35%);}
    .sub_banner div .sb_tit{font-size: 50px;}
    .sub_banner div .sb_tit:after{width: 10px; height: 10px; right: -16px;}

    .sub_banner div p{padding-top: 14px;}
    .current{margin-top: 20px;}
    .content_inner{padding: 100px 0;}

    /* inquiry */
    .inq_header .header{position: fixed; height: 80px;}
    .inq_header .header div{height: 80px;}

    /* case */
    /* case_view */
    .case_view .case_view_top h5{font-size: 22px;}
    .case_view .case_view_top > div{font-size: 15px;}

    /* project */
    .case_02 .case_list ul{ gap: 50px 16px;}
    .case_02 .case_list ul li{width: calc((100% - 16px) / 2);}


    /* company */
    .company_03 .cp1 span.line{height: 65px; margin: 30px auto;}
    .company_03 .cp2 .cp2_wrap{margin: 0 16px;}
    .company_03 .cp2 .cp2_wrap .txt .big{font-size: 21px;}
    .company_03 .cp2{padding-bottom: 46px;}
    .company_03 .cp2 .cp2_wrap .txt > div > p:first-child{word-break: break-all;}
    .company_03 .cp2 .cp2_wrap .txt > div > p:first-child br.none{display: none;}
    .company_03 .cp2 .cp2_wrap .txt{width: calc(100% - 372px);}

    .company_03 .cp3 .cp3_wrap{display: block; padding: 60px 0;}
    .company_03 .cp3 .cp3_wrap .right{width: 100%;}
    .company_03 .cp3 .cp3_wrap .left{width: 100%; padding-bottom: 30px;}
    .company_03 .cp3 .cp3_wrap{padding: 40px 0;}

    /* policy */
    .sub_banner.policy_sb .sb_tit{font-size: 26px;}
    .policy_subtit h3.policy_h3{font-size: 26px;}

 
}


/* ********************************************* *
* 960px
* ********************************************* */
@media screen and (max-width: 960px){

    .sub_btn{font-size: 17px;}
    .sub_banner .pro_list ul li{font-size: 15px; padding: 8px 16px; min-width: 88px;}

    .case_02 .case_list ul li .img{border-radius: 8px;}

    .sv-list ul{margin-bottom: 50px;}
    .button-wrap .web-qr{display: none;}
    .button-wrap .mo-btn{display: flex;}
    .button-wrap .mo-btn button{font-weight: 500;}
    .sv-mp-flex .left-img{width: 50%;}
    .left-img{width: 360px;}
    .left-img img{width: 80%;}

    .sv-mp-list li .imgwrap{width: 40%;}
    .sv-mp-list li .txtwrap.gap30{gap: 10px;}
    .button-wrap .web-qr ul li p{font-size: 16px;}
    .small2{font-size: 15px; }
    .p-tit{font-size: 24px;}
    .p-tit:before{font-size: 36px; top: -22px;}

    /* inquiry */
    .inquiry_wrap{padding-bottom: 150px;}
    .sec01 .inner{padding: 150px 20px 150px;}
    .inq_title{font-size: 48px; line-height: 48px;}
    .inquiry_wrap .sec01 .inner .mid{padding: 50px 0; font-size: 20px; ; font-weight: 500; line-height: 32px;}
    .lp{padding-left: 10px;} 
    .rp{padding-right:10px;}
    .lm{margin-left:20px;}

    .sec02 .inquiry_inner{padding: 70px 0;}
    .sec02 h5{width: 120px;}
    .email select, .date input, .file_upload label, .file_name{height: 50px;}
    .inq input[type=text]{height: 50px;}
    .sec02 h5{font-size: 15px;}
    .textarea{font-size: 15px;}
    .file_name, .file_upload label{font-size: 15px;}
    .inq input[type=text], .file_name{padding: 0 12px;}
    .textarea{padding: 12px;}

    input::placeholder, input{font-size: 15px; line-height: 15px;}
    .date input{font-size: 15px; line-height: 15px;}
    .email select{font-size: 15px; background: url(/PROJECT/SUHO/page/homepage/img/sub/select_arrow.png) #EDF0F5 no-repeat 88% 50%;}
    .date input{font-size: 15px; padding-left: 44px; background: url(/PROJECT/SUHO/page/homepage/img/sub/calendar.png) #EDF0F5 no-repeat 16px 46%;}
    .file_name{background: url(/PROJECT/SUHO/page/homepage/img/sub/clip.png) #EDF0F5 no-repeat 16px 50%;}
    button.delete{top:28%; right: 23.2%; font-size: 16px; }
    .file_upload label{text-wrap: nowrap;}

    /* case */
    .case_02 .case_list ul li .txt{margin-top: 16px;}
    .case_02 .case_list ul li .txt .tit{font-size: 17px; padding-bottom: 8px;}
    .case_02 .case_list ul li .txt .date{font-size: 14px;}
    /* case_view */
    .case_view .case_view_top h5{font-size: 20px;}
    .case_view .case_view_top{padding-bottom: 16px;}
    .case_view .case_view_bottom .bottom_box .pn_txt{width: 120px;}
    .case_view .case_view_bottom .bottom_box a{width: calc(100% - 120px);}

    .pro_view .subtit h3{font-size: 28px;}


    /* company */
    .company_03 .cp1 h3{font-size: 28px;}
    .company_03 .cp1 h3 span{font-size: 40px;}
    .company_03 .cp2 .cp2_wrap .txt .big{font-size: 20px;}
    .company_03 .cp2 .cp2_wrap .img{width: 320px; margin-top: -40px;}
    .company_03 .cp2 .cp2_wrap .txt{width: calc(100% - 320px); padding-left: 40px;}
    .company_03 .cp2 .cp2_wrap .txt > div > p{font-size: 14px;}
    .company_03 .cp2 .cp2_wrap .txt .name{font-size: 12px;}
    .company_03 .cp2 .cp2_wrap .txt .name span{font-size: 24px;}
    .company_03 .cp2 .cp2_wrap .txt > div{padding: 30px 0;}


    /* about */
    /* location */
    .location .map_wrap .wrap_map{height: 370px;}
    .location .txt_wrap .top b{font-size: 27px;}

}


/* ********************************************* *
* 860px
* ********************************************* */
@media screen and (max-width: 860px){
    
    .sub_banner{height: 360px;}
    .sub_banner div .sb_tit{font-size: 40px;}
    .sub_banner div p{font-size: 15px;}
    .subtit{margin-bottom: 60px;}
    .subtit p{font-size: 16px; margin-bottom: 10px;}
    .subtit h3{font-size: 34px;}
    .content_inner{padding: 80px 0;}

    .sv-mp-list li .imgwrap{aspect-ratio: 1 / 1.2; width: 360px; flex-shrink: 0;}
    .sv-mp-list li{gap: 24px;}
    .sv-mp-flex .right-txt{gap: 10px;}

    /* inquiry */
    .sec01 .inner{padding: 120px 20px 150px;}
    .inq_title{font-size: 44px; line-height: 44px;}
    .inquiry_wrap .sec01 .inner .mid{padding: 40px 0; font-size: 19px; line-height: 30px;}
    .sec02 .inquiry_inner .form_title{font-size: 24px; line-height: 24px;}

    .sec02 .inquiry_inner{padding: 70px 0;}
    .inq4 label{font-size: 15px;}

    .radio input{margin-right: 2px; margin-bottom: 2px;}
    .radio label{font-size: 16px; line-height: 16px; }

    .file_upload label, .file_name{font-size: 15px;}

    /* case */
    .case_02 .case_list ul li .txt{margin-top: 14px;}
    .case_02 .case_list ul li .txt .tit{font-size: 16px; padding-bottom: 8px;}
    .case_02 .case_list ul li .txt .date{font-size: 14px; padding-bottom: 4px;}
    .pagination div a{font-size:16px ; padding: 0 12px;}
    .pagination div a img{width: 70%;}
    /* no_case */
    .no_content{font-size: 17px; padding: 100px 0;}
    /* case_view */
    .case_view .case_view_content{padding: 40px 16px 60px;}
    .case_view .case_view_bottom .list_btn{margin-top: 40px;}


    /* company */
    .company_03 .cp2{margin-top: 0;}
    .company_03 .cp2 .cp2_wrap .img{width: 350px; margin-top: 0px;}
    .company_03 .cp2 .cp2_wrap .txt{width: calc(100% - 350px); padding-top: 30px;}
    .company_03 .cp2{padding: 40px 0;}
    .company_03 .cp2 .cp2_wrap .txt .big{font-size: 18px;}
    .company_03 .cp2 .cp2_wrap .txt > div p:last-child{padding-top: 10px;}
}






/* ********************************************* *
* 768px
* ********************************************* */

@media screen and (max-width: 768px){

    .sv-list ul li .iconwrap{width: 150px;}
    .right-txt{gap: 14px;}
    .sub_banner div .sb_tit{font-size: 36px;}
    .sub_banner div p{font-size: 14px;}
    .subtit{margin-bottom: 50px;}
    .subtit p{font-size: 15px; margin-bottom: 10px;}
    .subtit h3{font-size: 30px;}
    .content_inner{padding: 70px 0;}
    
    .left-img{width: 290px;}
    .left-img img{width: 94%; left: 9%;}
    .right-txt span{font-size: 14px; padding: 4px 14px;}
    .sv-mp-list li .imgwrap{width: 100%; aspect-ratio: 1.6 / 1;}
    .sv-mp-list li, .sv-mp-list li.reverse{gap: 40px; flex-direction: column; align-items: flex-start; }

    .button-wrap .mo-btn{padding: 14px; border-radius: 8px;}

    .gap100{gap: 60px;}
    .gap70{gap: 40px;}
    .gap50{gap: 20px;}
    .gap30{gap: 16px;}
    .big{font-size: 28px;}
    .bigger{font-size: 46px;}
    .bigger2{font-size: 34px;}
    .medium h5, .medium{font-size: 20px;}
    .small{font-size: 16px;}
    .about02 .big_bg .big:first-child:before, .about03 .big_bg .big:first-child:before{font-size: 70px;}
    .blur-box{padding: 24px;}
    .line{width: 2px; height: 40px;}
    .big_bg{height: 550px;}

    .about-sec + .about-sec:not(.bg-about){margin-top: 80px;}
    .about04{padding-top: 60px;}
    .list-bg{margin-top: 40px; padding: 60px 0;}
    .icon_list ul{gap: 16px;}
    .icon_list ul li{width: calc(100% / 3.5); ;}
    .certi-list{gap: 24px 12px;}
    .certi-list li{width:calc((100% - 24px) / 3); }
    .certi-list p{font-size: 16px;}
    .icon_list h5{margin-bottom: 14px; }


    .pro_flex{flex-direction: column;}
    .pro_cate_list{width: 100%;}
    /* case */
    .case_02 .case_list ul{gap: 40px 12px;}
    .board .case_02 .case_list ul li{width: calc(50% - 6px);}
    /* case_view */
    .case_view .case_view_top h5{font-size: 20px; padding-bottom: 8px;}
    .case_view .case_view_bottom .bottom_box p, .case_view .case_view_bottom .bottom_box p{font-size: 15px;}
    .case_view .case_view_top > div{display: block; line-height: 1.6; font-size: 14px;}
    .case_view .case_view_top{padding-bottom: 12px;}
    .case_view .case_view_bottom .bottom_box .prev, .case_view .case_view_bottom .bottom_box .next{font-size: 16px;}

    /* project */
    .case_02 .case_list ul{ gap: 40px 12px;}
    .case_02 .case_list ul li{width: calc((100% - 12px) / 2);}
    .pro_view .subtit h3{font-size: 24px;}

    /* inquiry */
    .inq_header .header{position: fixed; height: 75px;}
    .inq_header .header div{height: 75px;}

    .sec02 h5{width: 100px;}
    .sec02 .inquiry_inner{padding: 50px 0;}
    .inq{margin-bottom: 40px;}
    .inq_title{font-size: 40px; line-height: 40px;}
    .inquiry_wrap .sec01 .inner .mid{padding: 40px 0; font-size: 18px;line-height: 1.5;}
    .inquiry_wrap .sec01 .inner p.call{font-size: 16px; line-height: 1.5;}
    .inquiry_wrap .sec01 .inner .call span{font-size: 22px; line-height: 1.6;}
    .check-label{font-size: 15px; padding-left: 1.6rem; line-height: 1.2;}
    .pro_cate_list .check label + label{margin-top: 12px;}
    .inq_btn{margin-top: 40px;}

    .sec02 .smallgray{display: block; color: #999; padding-top: 4px;}
    .inq_btn button{font-size: 15px;}
    /* .inq1 ul li {width: 100%; padding-left: 0; padding-right: 0;} */
    .inq ul li > label > div, .inq ul li > label > input, .file_upload > div, .inq ul li > label > textarea{margin: 12px;}
    .half{width: 100% !important;}

    button.delete{right: 33%;}
    input{margin-bottom: 26px;}
    .m60{margin: 40px 0;}
    .file_name{width: calc(100% - 110px);}
    .file_upload label{width: 100px;}
    .inquiry_inner .check_list {display: flex; flex-wrap: wrap; gap:14px;}
    .check_list label + label{margin-left: 0;}

    .pro_cate_list p{font-size: 18px;}
    .preview li{width: calc(100%/3 - 6px); min-width: 0;}
    .preview li:nth-child(4n){margin-right: 8px;}
    .preview li:nth-child(3n){margin-right: 0;}

    .modal-body p.md-title{font-size: 1.1rem;}
    .modal-con{padding: 30px 30px 30px;}
    .modal-wrap.modal-xs{max-width: 400px;}
    .modal-body .md-con p{font-size: 15px;}
    .modal-body .md-btn button.center_button{font-size: 14px; padding: 0 22px 2px; height: 34px;}

    /* company */
    .company_03 .cp1 h3{line-height: 1.5;}
    .company_03 .cp1 h3 .mo_br{display: block;}

    .company_03 .cp2 .cp2_wrap .txt > div{padding: 24px 0;}
    .company_03 .cp2 .cp2_wrap .img{width: 500px; margin-top: 0px;}
    .company_03 .cp2 .cp2_wrap .txt{width: calc(100% - 500px); padding-top: 0px; padding-left: 24px;}
    .company_03 .cp2 .cp2_wrap .txt .big{font-size: 20px;}
    .company_03 .cp2 .cp2_wrap .txt > div{padding: 30px 0;}

    .company_03 .cp3 .cp3_wrap .right ul a{height: 150px; word-break: keep-all; font-size: 12px; padding: 20px;}
    .company_03 .cp3 .cp3_wrap .right ul a span{font-size: 15px;}
    .company_03 .cp3 .cp3_wrap .right ul a:nth-child(1){background: url(/PROJECT/SUHO/page/homepage/img/sub/cp_icon1.png) #DDE5F1 no-repeat 88% 85%; background-size: 50px; }
    .company_03 .cp3 .cp3_wrap .right ul a:nth-child(2){background: url(/PROJECT/SUHO/page/homepage/img/sub/cp_icon2.png) #DDE5F1 no-repeat 88% 85%; background-size: 40px; }
    .company_03 .cp3 .cp3_wrap .right ul a:nth-child(3){background: url(/PROJECT/SUHO/page/homepage/img/sub/cp_icon3.png) #DDE5F1 no-repeat 88% 85%; background-size: 55px; }
    .company_03 .cp3 .cp3_wrap .right ul a:nth-child(1):hover{background: url(/PROJECT/SUHO/page/homepage/img/sub/cp_icon1_white.png) var(--c-01) no-repeat 88% 85%; background-size: 50px; color: #fff;}
    .company_03 .cp3 .cp3_wrap .right ul a:nth-child(2):hover{background: url(/PROJECT/SUHO/page/homepage/img/sub/cp_icon2_white.png) var(--c-01) no-repeat 88% 85%; background-size: 40px; color: #fff;}
    .company_03 .cp3 .cp3_wrap .right ul a:nth-child(3):hover{background: url(/PROJECT/SUHO/page/homepage/img/sub/cp_icon3_white.png) var(--c-01) no-repeat 88% 85%; background-size: 55px; color: #fff;}
    
    .company_03 .cp3 .cp3_wrap{padding: 0;}
    .company_03 .cp3 .cp3_wrap .left{font-size: 24px;}

}


/* ********************************************* *
* 718px
* ********************************************* */
@media screen and (max-width: 718px){
    
    /* company */
    .company_03 .cp2 .cp2_wrap .img{display: none;}
    .company_03 .cp2 .cp2_wrap .txt{width: 100%; padding-top: 0px; padding-left:0;}
    .company_03 .cp2 .cp2_wrap .txt .name{text-align: right;}
    .company_03 .cp2 .cp2_wrap .txt > div p:last-child{padding-top: 14px;}

    .company_03 .cp3 .cp3_wrap{padding: 30px 0;}

    .terms .subtit{margin-bottom: 30px;}

    .mp-flex.sv-mp-flex{flex-direction: column;}
    .sv-mp-flex .left-img{width: 100%; padding-top: 10px;}
    /* .sv-mp-flex .left-img img{width: 70%;} */
    .sv-mp-flex .right-txt{width: 100%; gap: 6px;}
    .button-wrap .mo-btn{gap: 8px;}
    .button-wrap .mo-btn button{font-size: 15px;}
}



/* ********************************************* *
* 640px
* ********************************************* */
@media screen and (max-width: 640px){
    .mp-flex:before{display: none;}
    .mp-flex{flex-direction: column;}
    .left-img, .right-txt{width: 100%;}
    .left-img{aspect-ratio: 1.7 / 1; padding-bottom: 0; padding-top: 20px;}
    .left-img img{content: url(https://d131jqp4u1oq73.cloudfront.net/images/CREATIVEDA/170302657746474.png); left: 7%;}
    .right-txt .medium h5, .right-txt .medium{font-size: 20px;}


    .sv-list ul{margin-bottom: 30px;}
    .sv-list ul li{width: 100%; flex-direction: row;}
    .sv-list ul li .iconwrap{width: 120px;}
    .sv-list ul li .txtwrap h6{font-size: 17px;}
    .sv-list ul li .txtwrap p{font-size: 14px;}



    .sub_banner{height: 320px;}

    .gap100{gap: 50px;}
    .gap70{gap: 40px;}
    .gap50{gap: 20px;}
    .gap30{gap: 16px;}
    .big{font-size: 28px;}
    .bigger{font-size: 42px;}
    .bigger2{font-size: 30px;}
    .medium h5, .medium{font-size: 20px;}
    .about02 .big_bg .big:first-child:before, .about03 .big_bg .big:first-child:before{font-size: 60px;}
    .blur-box{padding: 24px;}
    .line{width: 1px; height: 30px;}

    .about-sec + .about-sec:not(.bg-about){margin-top: 70px;}
    .about04{padding-top: 60px;}
    .list-bg{margin-top: 30px; padding: 50px 0;}
    .icon_list ul{gap: 12px;}
    .icon_list ul li{width: calc(100% / 3); border-radius: 8px; gap: 6px;}
    .certi-list{gap: 24px 12px;}
    .certi-list li{width:calc((100% - 24px) / 3); }
    .certi-list p{font-size: 15px;}
    .icon_list h5{margin-bottom: 14px; }

    .r-txt{padding: 4px 22px;}
    .about01 .big .r-txt{margin-top: 8px;}


    /* inquiry */
    .email{flex-wrap: wrap; justify-content: space-between;}
    .inq .email input{width: 49%;}
    .inq .email input:first-child{width: calc(100% - 40px); margin-bottom: 10px;}
    .email select{width: 49%; margin: 0; background: url(/PROJECT/SUHO/page/homepage/img/sub/select_arrow.png) #EDF0F5 no-repeat 90% 50%;}
    .inq .email span.gray{display: inline-block; width: 40px; margin: 0;}

    /* case */
    .pagination div a{font-size:15px ; padding: 0 10px;}
    .pagination div a img{width: 70%;}
    /* no_case */
    .no_content{font-size: 16px; padding: 70px 0;}
     /* case_view */
    .case_view .case_view_content p{font-size: 15px;}
    .case_view .case_view_bottom .bottom_box .pn_txt{ width: 100px;}
    .case_view .case_view_bottom .bottom_box a{width: calc(100% - 100px);}
    .case_view .case_view_bottom .bottom_box i{padding-right: 8px;}
    .case_view .case_view_bottom .bottom_box i img{width: 80%;}
    .case_view .case_view_bottom .bottom_box a{padding: 14px 24px;}


    /* company */
    .company_03 .cp{padding-bottom: 60px;}
    .company_03 .cp2{padding: 60px 0; margin-bottom: 60px;}
    .company_03 .cp1 h4{font-size: 18px;}
    .company_03 .cp1 h3{font-size: 24px;}
    .company_03 .cp1 h3 span{font-size: 34px;}
    .company_03 .cp3 .cp3_wrap{padding: 0;}
    .company_03 .cp3 .cp3_wrap .right ul a{height: 130px;padding: 16px;}
    .company_03 .cp3 .cp3_wrap .right ul a:nth-child(1){background: url(/PROJECT/SUHO/page/homepage/img/sub/cp_icon1.png) #DDE5F1 no-repeat 88% 85%; background-size: 40px; }
    .company_03 .cp3 .cp3_wrap .right ul a:nth-child(2){background: url(/PROJECT/SUHO/page/homepage/img/sub/cp_icon2.png) #DDE5F1 no-repeat 88% 85%; background-size: 40px; }
    .company_03 .cp3 .cp3_wrap .right ul a:nth-child(3){background: url(/PROJECT/SUHO/page/homepage/img/sub/cp_icon3.png) #DDE5F1 no-repeat 88% 85%; background-size: 48px; }
    .company_03 .cp3 .cp3_wrap .right ul a:nth-child(1):hover{background: url(/PROJECT/SUHO/page/homepage/img/sub/cp_icon1_white.png) var(--c-01) no-repeat 88% 85%; background-size: 40px; color: #fff;}
    .company_03 .cp3 .cp3_wrap .right ul a:nth-child(2):hover{background: url(/PROJECT/SUHO/page/homepage/img/sub/cp_icon2_white.png) var(--c-01) no-repeat 88% 85%; background-size: 40px; color: #fff;}
    .company_03 .cp3 .cp3_wrap .right ul a:nth-child(3):hover{background: url(/PROJECT/SUHO/page/homepage/img/sub/cp_icon3_white.png) var(--c-01) no-repeat 88% 85%; background-size: 48px; color: #fff;}


    /* policy */
    .txtbox{padding: 26px;}
    .sub_banner.policy_sb .sb_tit{font-size: 22px;}
    .policy_subtit h3.policy_h3{font-size: 22px;}


    /* about */
    /* location */
    .location .txt_wrap .top{padding-bottom: 16px; margin-bottom: 16px;}
    .location .txt_wrap .top b{font-size: 22px;}
    .location .txt_wrap .txt_in p{font-size: 16px;}
    .location .txt_wrap{margin-top: 24px;}
    .location .txt_wrap .txt_in p img{margin-right: 8px;}
    .location .txt_wrap .txt_in p + p{margin-top: 8px;}


}


/* ********************************************* *
* 560px
* ********************************************* */
@media screen and (max-width: 560px){


    .sv-list ul li .iconwrap{width: 100px;}
    .sv-list ul li .txtwrap h6{margin-bottom: 2px;}

    .button-wrap .mo-btn button{padding: 14px 0; font-size: 14px; gap: 8px;}
    .button-wrap .mo-btn button i img{width: 70%;}
    .sv-mp-flex .right-txt .medium{font-size: 19px;}

    .sub_banner .pro_list{margin-top: 16px;}
    .sub_banner .pro_list ul li{font-size: 14px; padding: 6px 14px; min-width: 72px; }
    .pro_cate_list{padding: 22px;}
    .case_02 .case_list ul li .txt .date, .case_02 .case_list ul li .txt .cate span{padding-bottom: 6px; font-size: 14px;}
    .case_02 .case_list ul li .txt .tit{font-size: 18px;}

    .sub_banner div .sb_tit{font-size: 32px;}
    .sub_banner div .sb_tit:after{width: 8px; height: 8px; right: -12px;}
    .subtit h3{font-size: 28px;}
    .current{margin-top: 14px;}
    .pagination div{margin-top: 40px;}
    .pagination div span{font-size: 16px; padding: 0 10px;}
    .pagination .pag_btn.next:after, .pagination .pag_btn.prev:after{top: 50%;}

    .go_inq_btn button{width: 100%; border-width: 6px;}
    .sub_btn{font-size: 16px; padding: 18px 0;}

    .case_02 .case_list ul{gap: 30px;}
    .board .case_02 .case_list ul li{width: 100%;}
    /* project */
    .case_02 .case_list ul{ gap: 30px;}
    .case_02 .case_list ul li{width: 100%;}
    .pro_view .subtit h3{font-size: 22px;}


    /* case */
    /* case_view */
    .case_view .case_view_content{padding: 30px 0px;}
    .case_view .case_view_bottom .bottom_box .bottom_tit{margin-right: 0;}
    .case_view .case_view_bottom .bottom_box .prev, .case_view .case_view_bottom .bottom_box .next{font-size: 15px;}

    /* inquiry */
    .inq_header .header{position: fixed; height: 66px;}
    .inq_header .header div{height: 66px;}

    .file_upload p .smallgray span:last-child:before{content: '';}
    .file_upload p .smallgray span:last-child{display: block; content: '';}
    .radio .smallgray br{display: block;}
    .inq .email span.gray{font-size: 16px;}
    .preview li p.tit{font-size: 12px;}
    .preview li{width: calc(100%/2 - 3px); margin-right: 6px; margin-bottom: 6px;}
    .preview li:nth-child(3n){margin-right: 6px;}
    .preview li:nth-child(2n){margin-right: 0;}
    .inquiry_wrap{padding-bottom: 100px;}
    .inq_btn{margin-top: 30px; width: 100%;}



    .sv .bigger2 .none{display: block;}
    .sv .bigger2 .r-txt{margin-top: 8px;}


    /* company */
    .company_03 .cp1 span.line{height: 50px; margin: 14px auto 20px;}
    .company_03 .cp1 h3{font-size: 22px;}
    .company_03 .cp1 h3 span{font-size: 30px;}

    .company_03 .cp3 .cp3_wrap .right ul{display: block;}
    .company_03 .cp3 .cp3_wrap .right ul a{width: 100%; margin-bottom: 16px; font-size: 14px; padding: 20px; height: 150px;}
    .company_03 .cp3 .cp3_wrap .right ul a span{font-size: 17px;}
    .company_03 .cp3 .cp3_wrap .right ul a:nth-child(1){background: url(/PROJECT/SUHO/page/homepage/img/sub/cp_icon1.png) #DDE5F1 no-repeat 94% 81%; background-size: 46px; }
    .company_03 .cp3 .cp3_wrap .right ul a:nth-child(2){background: url(/PROJECT/SUHO/page/homepage/img/sub/cp_icon2.png) #DDE5F1 no-repeat 94% 81%; background-size: 40px; }
    .company_03 .cp3 .cp3_wrap .right ul a:nth-child(3){background: url(/PROJECT/SUHO/page/homepage/img/sub/cp_icon3.png) #DDE5F1 no-repeat 94% 81%; background-size: 52px; }
    .company_03 .cp3 .cp3_wrap .right ul a:nth-child(1):hover{background: url(/PROJECT/SUHO/page/homepage/img/sub/cp_icon1_white.png) var(--c-01) no-repeat 94% 81%; background-size: 46px; color: #fff;}
    .company_03 .cp3 .cp3_wrap .right ul a:nth-child(2):hover{background: url(/PROJECT/SUHO/page/homepage/img/sub/cp_icon2_white.png) var(--c-01) no-repeat 94% 81%; background-size: 40px; color: #fff;}
    .company_03 .cp3 .cp3_wrap .right ul a:nth-child(3):hover{background: url(/PROJECT/SUHO/page/homepage/img/sub/cp_icon3_white.png) var(--c-01) no-repeat 94% 81%; background-size: 52px; color: #fff;}
    

    /* modal */
    .modal-wrap.modal-xs{max-width: 340px;}
    .modal-con{padding: 24px;}
    .modal-body .md-btn button.center_button{font-size: 14px; padding: 0 18px 2px; height: 33px;}


    /* about */
    /* location */
    .location .map_wrap .wrap_map{height: 230px;}
    .location .txt_wrap .top{display: block;}
    .location .txt_wrap .top .link_wrap a{width: 50%; text-align: center; justify-content: center; margin-bottom: 24px;}
    .location .txt_wrap{margin-top: 16px;}


}

@media screen and (max-width: 500px){

    .right-txt span{padding: 2px 10px; font-size: 13px;}
    .right-txt .medium h5, .right-txt .medium{font-size: 18px;}

    .sv-mp-list li .imgwrap{ aspect-ratio: 1.2 / 1;}
    .sv-mp-list li, .sv-mp-list li.reverse{gap: 34px;}
    .p-tit{font-size: 22px;}

    .gap70{gap: 30px;}
    .gap30{gap: 12px;}
    .big{font-size: 24px;}
    .bigger{font-size: 36px;}
    .bigger2{font-size: 28px;}
    .medium h5, .medium{font-size: 18px;}
    .small{font-size: 15px;}
    .small2{font-size: 14px;}
    .about02 .big_bg .big:first-child:before, .about03 .big_bg .big:first-child:before{font-size: 50px;}
    .blur-box{padding: 20px;}
    .about-sec.bg-about.about02, .about-sec.about04.flex-about{margin-top: 100px;}

    .about-sec + .about-sec:not(.bg-about){margin-top: 50px;}
    .about04{padding-top: 50px;}
    .icon_list ul{gap: 12px;}
    .certi-list{gap: 24px 12px;}
    .certi-list li{width:calc(50% - 6px); }
    .certi-list p{font-size: 15px;}
    .icon_list h5{margin-bottom: 14px; }
    .big_bg{height: 500px;}
    .r-txt{padding: 4px 22px;}
    .about01 .big .r-txt{margin-top: 8px;}
    .list-bg{margin-top: 24px;}

    .about-sec.sv-mp-list{margin-top: 100px !important;}
    
    /* inquiry */
    .sec01 .inner{padding: 120px 16px 100px;}
    .sec02 .inquiry_inner{margin: 0; padding: 50px 0;}
    .inq_title{font-size: 34px; line-height: 34px;}
    .inquiry_wrap .sec01 .inner .mid{padding: 36px 0; font-size: 17px;}
    .inquiry_wrap .sec01 .inner p.call{font-size: 16px; line-height: 1.5;}
    .inquiry_wrap .sec01 .inner .call span{font-size: 20px; line-height: 1.6;}
    .lp{padding-left: 8px;} 
    .rp{padding-right:8px;}
    .lm{margin-left:10px;}
    .inq input[type=text],.email select{padding: 0 14px;}
    .inquiry_inner .check_list{gap: 12px;}
    .check_list label{width: 100%;}

    .case_view .case_view_bottom .bottom_box .pn_txt{width: 90px;}
    .case_view .case_view_bottom .bottom_box a{width: calc(100% - 90px);}

    .fileupload{display: block;}
    .file_name{width: 100%; margin-bottom: 10px;}
    .file_upload label{width: 100%;}
    .preview li + li{margin-top: 0;}
    .preview li p.tit{overflow: inherit; white-space: inherit; text-overflow: inherit;}



    .email select{background: url(/PROJECT/SUHO/page/homepage/img/sub/select_arrow.png) #EDF0F5 no-repeat 90% 50%; padding-left: 16px;}
    .date input{background: url(/PROJECT/SUHO/page/homepage/img/sub/calendar.png) #EDF0F5 no-repeat 10.5% 50%;}
    button.delete{right: 33%;}

    .date input{font-size: 15px; padding-left: 40px; background: url(/PROJECT/SUHO/page/homepage/img/sub/calendar.png) #EDF0F5 no-repeat 14px 46%;}
    /* .file_name{background: url(/PROJECT/SUHO/page/homepage/img/sub/clip.png) #EDF0F5 no-repeat 14px 50%; padding: 0 40px; padding-right: 20px;} */
    .textarea{padding: 12px; height: 150px;}
    

}

/* ********************************************* *
* 450px
* ********************************************* */
@media screen and (max-width: 450px){
    




    .big{font-size: 20px;}
    .bigger{font-size: 32px;}
    .bigger2{font-size: 25px;}
    .medium h5, .medium{font-size: 17px;}
    .small{font-size: 14px;}
    .sv-mp-list li .txtwrap .small{font-size: 16px;}

    .icon_list ul{gap: 10px;}
    .icon_list li{}
    .certi-list{gap: 24px 10px;}
    .certi-list li{width:calc(50% - 6px); }
    .certi-list p{font-size: 14px;}
    .r-txt{padding: 4px 18px;}
    .about01 .big .r-txt{margin-top: 8px;}



    .subtit p{font-size: 14px; margin-bottom: 8px;}
    .subtit h3{font-size: 26px;}
    .subtit{margin-bottom: 40px;}
    .content_inner{padding: 60px 0;}
    .sub_banner div p br{display: block;}

    /* case */
    .case_02 .case_list ul li{width: 100%;}
    /* no_case */
    .no_content{font-size: 15px; padding: 50px 0;}
    /* case_view */
    .case_view .case_view_top h5{font-size: 18px; padding-bottom: 4px;}
    .case_view .case_view_content p{font-size: 15px;}
    .case_view .case_view_bottom .bottom_box p, .case_view .case_view_bottom .bottom_box p{font-size: 14px;}
    .case_view .case_view_top p.date{padding-right: 20px;}
    .case_view .case_view_bottom .bottom_box a .bottom_tit{padding: 12px 16px;}
    .pro_view .subtit h3{font-size: 20px;}


    /* company */
    .company_03 .cp1 h4{font-size: 16px;}
    .company_03 .cp1 span.line{height: 40px; margin: 14px auto 20px;}
    .company_03 .cp1 h3{font-size: 20px;}
    .company_03 .cp1 h3 span{font-size: 26px;}

    .company_03 .cp2 .cp2_wrap .txt .big{font-size: 19px;}
    .company_03 .cp2 .cp2_wrap .txt > div > p{font-size: 13px;}
    .company_03 .cp2 .cp2_wrap .txt .name span{font-size: 22px;}
    .company_03 .cp2 .cp2_wrap .txt > div > p:first-child{word-break: keep-all;}

    /* policy */
    .txtbox{padding: 20px; font-size: 14px;}
    
    
}

@media screen and (max-width: 400px){
    

    .sv-list ul li .iconwrap{width: 85px;}

    .sub_btn{width:100%;}
    .subtit h3{font-size: 26px;}
    .sub_banner div .sb_tit{font-size: 30px;}

    .about01 .big{font-size: 18px;}
    .big{font-size: 22px;}
    .bigger{font-size: 29px;}
    .bigger2{font-size: 24px;}
    .medium h5, .medium{font-size: 16px;}

    .icon_list ul{gap: 8px; }
    .icon_list ul li{width: calc(100% / 3); gap: 2px;}
    .icon_list ul li .small{font-size: 12px;}
    .certi-list{gap: 24px 10px;}
    .certi-list li{width:calc(50% - 6px); }
    .certi-list p{font-size: 14px;}
    .r-txt{padding: 4px 18px;}
    .about01 .big .r-txt{margin-top: 8px;}


    /* case */
    /* no_case */
    .no_content{font-size: 14px; padding: 30px 0;}   
    /* case_view */
    .case_view .case_view_top > div p.writer{padding-right: 18px;}
    .case_view .case_view_top > div {font-size: 13px;}
    .sec02 h5{width: 90px;}
    /* inquiry */
    .inquiry_wrap{padding-bottom: 0;}
    .inq input[type=text]{height: 48px;}
    .email select, .date input, .file_upload label, .file_name{height: 48px;}
    .file_upload label{height: 48px;}
    .inq{margin-bottom: 30px;}
    .inq_title{font-size: 33px; line-height: 1.3;}
    .inq_title span{display: block;}
    .sec01 .inner{padding: 90px 16px;}
    .sec02 .inquiry_inner{padding: 50px 0 ;}

    .inquiry_wrap .sec01 .inner .mid{padding: 36px 0; font-size: 14px;}
    .inquiry_wrap .sec01 .inner p.call{font-size: 14px; line-height: 1.5;}
    .inquiry_wrap .sec01 .inner .call span{font-size: 19px; line-height: 1.6;}
    .sec02 .inquiry_inner .form_title{font-size: 22px; line-height: 22px;}

    .sec02 .smallgray{font-size: 13px;}
    .sec02 h5{font-size: 14px;}
    /* .check-label{font-size: 14px;} */
    .inq input[type=text]{font-size: 14px;}
    .textarea.readonly{font-size: 14px;}
    input{font-size: 14px;}
    input::placeholder{font-size: 14px; line-height: 14px;}
    .email select{font-size: 14px; line-height: 14px;}
    .file_upload label, .file_name{font-size: 14px; line-height: 14px;}

    .date input{font-size: 14px; line-height: 14px;padding-left: 34px; background: url(/PROJECT/SUHO/page/homepage/img/sub/calendar.png) #EDF0F5 no-repeat 12px 44%; background-size: 15px 14px;}
    .mr{margin-right: 40px;}

    /* .file_name{width: 71%; background: url(/PROJECT/SUHO/page/homepage/img/sub/clip.png) #EDF0F5 no-repeat 12px 50%; background-size: 16px 15px;} */
    /* .inq input[type=text]{margin-bottom: 20px;} */
    .inq ul li > label > div, .inq ul li > label > input, .file_upload > div, .inq ul li > label > textarea{}
    .textarea.ta-input{font-size: 14px;}
    button.delete{top: 10%; right: 4%;}
    .m60{margin: 20px 0 40px;}
    .radio label{font-size: 15px; line-height: 15px; display: block; padding-top: 12px; }
    .inq .email input{width: 48.5%;}
    .email select{width: 48.5%; margin: 0;}
    .file_upload ul.filelist{display: flex;}

    /* modal */
    .modal-wrap.modal-xs{max-width: 500px;}
    .modal-con{padding: 22px;}
    .modal-body .md-con p{font-size: 14px;}
    .modal-body .md-btn button.center_button{font-size: 13px; padding: 0 16px 0; height: 32px;}
    

}

/* ********************************************* *
* 370 350 330px
* ********************************************* */
@media screen and (max-width: 370px){

    /* inquiry */
    .file_upload p .smallgray span:first-child:before{content: '';}
    .file_upload p .smallgray span:first-child{display: block; content: '';}
    .date input{background: url(/PROJECT/SUHO/page/homepage/img/sub/calendar.png) #EDF0F5 no-repeat 10px 46%; background-size: 15px 14px; padding-left: 30px;}
    .inquiry_wrap .sec01 .inner .call span{font-size: 17px; line-height: 1.6;}

}

@media screen and (max-width: 350px){

    .sv-list ul li{flex-direction: column; align-items: flex-start;}
    .sv-list ul li .iconwrap{display: flex; justify-content: center; align-items: center; width: 100%; aspect-ratio: inherit;}
    .sv-list ul li .iconwrap img{margin: 0 auto; width: 120px;}


    /* case */
    .case_view .case_view_top > div > div{justify-content: space-between;}
    .case_view .case_view_top p.date{padding-right: 0;}

    /* inquiry */
    .sec02 .inquiry_inner .form_title{font-size: 20px; line-height: 20px; padding-bottom: 20px;}
    .inq input[type=text],.email select{height: 42px; }
    .date input, .file_upload label, .file_name{height: 42px; }
    input::placeholder{font-size: 13px; line-height: 13px;}
    .email select{font-size: 13px; line-height: 13px;}
    .file_upload label, .file_name{font-size: 13px; line-height: 13px;}
    .date input{font-size: 13px; line-height: 20px;padding-left: 30px;}
    .date span.gray{background-color: #EDF0F5; padding: 5px 5px 0; height: 42px; display: flex; align-items: center; justify-content: center; color: #747474;}
    .inq4 label{font-size: 13px;}
    button.delete{top: 8%; right: 4%;}
    .inq_btn button{width: 50%; margin: 0;}
    .date input{background: url(/PROJECT/SUHO/page/homepage/img/sub/calendar.png) #EDF0F5 no-repeat 10px 50%; background-size: 14px 13px; padding-left: 30px;}

    /* modal */
    .modal-wrap.modal-xs{max-width: 250px;}
    .modal-con{padding: 18px;}
    .modal-body p.md-title{font-size: 1em;}
    .modal-body .md-con p{font-size: 13px;}
    .modal-body .md-btn button.center_button{font-size: 13px; padding: 0 16px 0; height: 32px;}
    
    /* company */
    .company_03 .cp3 .cp3_wrap .right ul a{font-size: 13px;height: 130px;}
    .company_03 .cp3 .cp3_wrap .right ul a span{font-size: 15px;}

    /* policy */
    .policy_subtit h3.policy_h3{font-size: 20px;}

}



@media screen and (max-width: 330px){
    
    /* inquiry */
    .sec02 .inquiry_inner .form_title{font-size: 18px; line-height: 18px; padding-bottom: 20px;}
    .inquiry_wrap .sec01 .inner .call span{font-size: 15px; line-height: 1.6;}

    /* company */
    .company_03 .cp1 h4{font-size: 15px;}
    .company_03 .cp1 h3{font-size: 17px;}
    .company_03 .cp1 h3 span{font-size: 24px;}
    
}


@media screen and (max-width: 500px){

    /* case */
    .case_view .case_view_top > div{font-size: 12px}


    /* inquiry */
    .date input{background: url(/PROJECT/SUHO/page/homepage/img/sub/calendar.png) #EDF0F5 no-repeat 10px 52%; background-size: 13px 12px; padding-left: 28px;}
    .date input{font-size: 12px; line-height: 12px;}
    .preview li:nth-child(4n){margin-right: 0;}
    .preview li:nth-child(3n){margin-right: 0;}
    .preview li{width: 100%; margin-right: 0;}

    /* company */
    .company_03 .cp2 .cp2_wrap .txt .big{font-size: 17px;}

}