@charset "utf-8";
 
/* doc.css는 디자인페이지 스타일을 정의합니다. */
.greeting{padding:270px 0 var(--size150);background:url('/images/sub/brand-intro-bg.jpg')no-repeat 50% 50%/cover;}
.greeting .contain{display:flex;}
.greeting .tt-wrap{min-width:0;width:1%;flex:1 1 auto;color: #fff;margin-right:40px;}
.greeting .tt-wrap .tit{margin-bottom:var(--size50);font-size:var(--fz64);line-height:1.19em;font-weight:600;}
.greeting .tt-wrap .wrap p{margin-bottom:var(--size35);font-size:var(--fz22);line-height:1.64em;}
.greeting .tt-wrap .wrap p:last-child{margin-bottom:0;}
.greeting .tt-wrap .wrap p.ceo{font-weight:500;}
.greeting .tt-wrap .wrap p strong{font-weight:600;}
.greeting .con{width:606px;}
.greeting .con ul{display:flex;flex-wrap:wrap;margin:0 -3px -6px;}
.greeting .con ul li{width:50%;padding:0 3px;margin-bottom:6px;}
.greeting .con ul li .box{display:block;position:relative;padding:var(--size150) var(--size40) var(--size60);height:100%;background-color:rgba(255,255,255,.3);border-radius:0 var(--bd20) 0 0;transition:.3s;}
.greeting .con ul li .box .arr{display:block;position: absolute;right:28px;top:28px;width:44px;height:44px;border:1px solid rgba(255,255,255,.3);background:url('/images/sub/brand-intro-arr.png')no-repeat 50% 50%/11px;border-radius:100%;transition:.3s;}
.greeting .con ul li .box .txt{color: #fff;}
.greeting .con ul li .box .txt .tit{margin-bottom:var(--size20);font-size:var(--fz24);font-weight:600;line-height:1.2em;color: #fff;}
.greeting .con ul li .box .txt .tt{line-height:1.5em;}
.greeting .con ul li .box:hover{background:var(--gra);}
.greeting .con ul li .box:hover .arr{background-image: url('/images/sub/brand-intro-arr-on.png');background-color:#fff;border-color: #fff;}

.notice-list ul {display:grid; grid-template-columns: repeat(2, 1fr); gap:var(--size30);}
.notice-list ul li .nt-box .tt-wrap{padding:var(--size40);}
.notice-list ul li .nt-box .img{width:45%;}

.cate-menu{margin-bottom:var(--size120);}
.cate-menu ul{display:flex;justify-content:center;gap:10px;}
.cate-menu ul li a{display:flex;justify-content:center;align-items:center;width:200px;height:60px;border-radius:60px;border:1px solid #ddd;background-color: #fff;text-align:center;font-size:var(--fz20);color: #999;font-weight:600;line-height:1.2em;}
.cate-menu ul li.active a{background:var(--gra);border:none;color: #fff;}

.profile-list ul{display:flex;flex-wrap:wrap;margin:0 -20px -75px;}
.profile-list ul li{width:25%;padding:0 20px;margin-bottom:75px;}
.profile-list ul li .img{margin-bottom:25px;}
.profile-list ul li .cate{margin-bottom:10px;font-size:var(--fz24);font-weight:600;color:var(--dark);line-height:1.4em;}
.profile-list ul li .name{font-size:var(--fz18);line-height:1.4em;}

.btm-contact{padding:var(--size40) 0;border-top:1px solid #ddd;}
.btm-contact .contain{display:flex; align-items:center; max-width: 1740px;}
.btm-contact .title{margin-right:70px;font-size:var(--fz36);font-weight:700;color:var(--dark);line-height:1.2em;}
.btm-contact .input-wrap{min-width:0;width:1%;flex:1 1 auto;margin-right:20px;}
.btm-contact .input-wrap .flex{display:flex;margin:0 -5px;}
.btm-contact .input-wrap .flex .col{flex:0 1 auto; padding:0 5px;}
.btm-contact .input-wrap .flex .col input.input{height:70px;padding:0 30px;font-size:var(--fz18);}
.btm-contact .input-wrap .flex .col input.input::placeholder{font-size:var(--fz18);color:var(--dark);}
.btm-contact .input-wrap .flex .col.check {display:flex; align-items:flex-end; padding:0 20px; line-height:1.3em;}

.port-list ul{display:flex;flex-wrap:wrap;margin:0 -20px -75px;}
.port-list ul li{width:33.3333%;padding:0 20px;margin-bottom:75px;line-height:1.3em;}
.port-list ul li .pic {position:relative; height:0; padding-bottom:61.368%; overflow:hidden;}
.port-list ul li .pic img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100% !important; height:100% !important; max-width:100%; min-height:100%; object-fit:cover; transition:0.3s;}
.port-list ul li .tt{margin-top:25px;font-size:var(--fz18);line-height:1.4em;}
.port-list ul li .tit{margin-top:10px;font-size:var(--fz24);font-weight:600;color:var(--dark);line-height:1.3em;display: inline-block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;width:100%;}

.contact-pg .top-tt{margin-bottom:var(--size100);font-size:var(--fz40);line-height:1.5em;color:var(--dark);font-weight:700;}
.contact-pg .doc-contact .input-wrap{margin-bottom:var(--size80);}
.contact-pg .btn-send{margin:0 auto;}