@charset "utf-8";

.khready{text-align:center}

/* 테이블 */
#container .tbl{}
#container .tbl + .tbl{margin-top:50px}
#container .tbl .tbl_tit{position:relative;margin-bottom:20px;padding-left:25px;line-height:36px;font-size:22px;font-weight:bold;color:#222;letter-spacing:-1px}
#container .tbl .tbl_tit:before{content:'';position:absolute;top:6px;left:0;width:20px;height:20px;background:url("../img/sub/sub_bullet.png") no-repeat center center;background-size:17px auto}
#container .tbl table{width:100%;font-size:16px;line-height:24px;font-weight:400;border-top:1px solid #333;border-bottom:1px solid #888;border-collapse:collapse;border-spacing:0;text-align:center;letter-spacing:-0.5px}
#container .tbl table thead th,
#container .tbl table tbody th,
#container .tbl table tfoot th,
#container .tbl table tfoot td{background:#fafafa;vertical-align:middle}
#container .tbl table th,
#container .tbl table td{padding:20px}
#container .tbl table tr{border-bottom:1px solid #e9e9e9}
#container .tbl table th{font-weight:600;color:#333}
#container .tbl table td{color:#666}
#container .tbl table td{border-left:1px solid #e9e9e9}
#container .tbl table td:nth-child(1){border-left:0}

/**/
#container .tabs{position:relative;top:0;left:0;z-index:11;width:100%;margin:0 0 10px 0;background:none}
#container .tabs ul{background:transparent;display:table;width:100%;margin:0 auto;max-width:1080px;overflow:hidden;border:1px solid #eee;text-align:center}
#container .tabs li{position:relative;display:table-cell;vertical-align:middle}
#container .tabs li a{position:relative;display:block;line-height:58px;font-size:17px;font-weight:500;text-align:center;color:#585858;background:#fff;text-transform:uppercase}
#container .tabs li + li a:before{content:'';position:absolute;top:50%;left:0;margin-top:-12px;width:1px;height:24px;background:#ccc}
#container .tabs li a:hover,
#container .tabs li a.sel{color:#000}

/**/
#container .summary{position:relative;padding-bottom:100px}
#container .summary .section + .section{margin-top: 120px;}
#container .summary .titbox{position:relative;text-align:center}
#container .summary .titbox .tit{position:relative;margin-bottom:20px;line-height: 1;font-size: 62px;font-weight:bold;color:#222;letter-spacing:-1px;}
#container .summary .titbox .txt{line-height:35px;font-size:28px;color:#333;word-break:keep-all;}
#container .summary .sec01{background: #222 url("../img/summary/summary_image.png") no-repeat 50% 50%;background-size: cover;}
#container .summary .sec01 .cntbox{padding: 120px 0;padding-left:50%;padding-right: 15%;letter-spacing: -0.5px;}
#container .summary .sec01 .cntbox .tit{display: block;font-size: 32px;font-weight: 500;color:#fff;}
#container .summary .sec01 .cntbox .txt{margin-top: 20px;line-height: 30px;font-size: 20px;color: #fff;word-break:keep-all}
#container .summary .sec02 .cntbox .list{margin: 0 auto;margin-top: 80px;gap\: 0;gap: 40px;display: grid;grid-template-columns: repeat(3,1fr);max-width: 1440px;}
#container .summary .sec02 .cntbox .list li{}
#container .summary .sec02 .cntbox .list li .table{position: relative;padding-top: 100%;background: #fafafa;border-radius: 50%;}
#container .summary .sec02 .cntbox .list li .table .cell{position:absolute;top:50%;left:0;width:100%;padding:0 25px;transform:translateY(-50%);text-align:center;}
#container .summary .sec02 .cntbox .list li .table .cell .num{line-height:1;font-size: 32px;font-weight: bold;color:#333;}
#container .summary .sec02 .cntbox .list li .table .cell .tit{margin-top: 15px;margin-bottom: 10px;font-size: 24px;font-weight: 500;color: #333;}
#container .summary .sec02 .cntbox .list li .table .cell .txt{line-height: 22px;font-size: 16px;color: #666}

/**/
#container .instagram{}
#container .instagram .titbox{position:relative;text-align:center}
#container .instagram .titbox .tit{position:relative;margin-bottom:20px;line-height: 1;font-size: 62px;font-weight:bold;color:#222;letter-spacing:-1px;}
#container .instagram .titbox .txt{line-height:35px;font-size:28px;color:#333;word-break:keep-all;}
#container .instagram .cntbox{}
#container .instagram .cntbox ul{margin: 0 -15px}
#container .instagram .cntbox li{display:inline-block;padding: 0 15px 30px;width: 20%;vertical-align: top;}
#container .instagram .cntbox li a{position:relative;display: block;padding-top: 100%;background-size: cover;transition: all 0.3s;}
#container .instagram .cntbox li a:before{content:'';position:absolute;z-index:9;top:0;left:0;width:100%;height:100%;background: #0b21ee;opacity:0;visibility:hidden;}
#container .instagram .cntbox li p{position:absolute;z-index: 10;top:50%;left:50%;width: 100%;padding:50px;color: #fff;transform:translate(-50%,-50%);opacity: 0;visibility: hidden;transition: all 0.3s;text-align: center;word-break: keep-all;}
#container .instagram .cntbox li a:hover{transform:translateY(-15px);box-shadow:0 10px 10px rgba(11,33,238,0.35)}
#container .instagram .cntbox li a:hover p{opacity:1;visibility:visible}
#container .instagram .cntbox li a:hover:before{opacity:0.9;visibility:visible}

/**/
#container .khready{padding-bottom:100px}
#container .khready img{display:block;margin:0 auto;width:auto;max-width:100%;height:auto}

#container .works{}
#container .works .list{}
#container .works .list ul{display:grid;grid-template-columns:repeat(4, 1fr);gap: 50px;}
#container .works .list li{}
#container .works .list .box{position:relative;}
#container .works .list .box:hover{}
#container .works .list .box:hover .thumb .img:before{opacity:0.55;}
#container .works .list .box:hover .thumb .ico{opacity:1;transform:translateY(0);}
#container .works .list .thumb{position:relative;border-radius:10px;overflow:hidden;mask-image: url(../img/sub/sub_title.svg);-webkit-mask-image: url(../img/sub/sub_title.svg);mask-position-y: bottom;-webkit-mask-position-y: bottom;mask-size: cover;-webkit-mask-size: cover;}
#container .works .list .thumb .img{width:100%;height:auto;aspect-ratio:16/12;display: flex;align-items: center;justify-content: center;}
#container .works .list .thumb .img:before{content:'';position:absolute;inset:0;background:#0f172a;opacity:0.15;transition: all 0.5s;}
#container .works .list .thumb .img img{width:100%;height:100%;object-fit:cover;}
#container .works .list .thumb .img video{width:100%;height:100%;object-fit:cover;display: block;}
#container .works .list .thumb .ico{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;filter:brightness(0) invert(1);opacity:0.2;transition:all 0.5s;}
#container .works .list .thumb .ico img{max-width:180px;}
#container .works .list .tit{margin:15px 0 0 0;font-size:24px;font-weight:700;color:#0f172a;}
#container .works .list .txt{margin:12px 0 0 0;font-size:16px;font-weight:300;color:#0f172a;letter-spacing: 1px;display:flex;flex-wrap:wrap;}
#container .works .list .txt span{display:flex;align-items:center;}
#container .works .list .txt span:before{content:'';width:3px;height:3px;border-radius:3px;background:#0f172a;opacity:0.35;margin:0 10px;}
#container .works .list .txt span:nth-child(1):before{displaY:none;}

@media all and (max-width:747px) {

	#container .works{}
	#container .works .list{}
	#container .works .list ul{grid-template-columns:repeat(1, 1fr);gap: 60px 20px;}
	#container .works .list li{}
	#container .works .list .tit{font-size:20px;}
	#container .works .list .txt{margin:10px 0 0 0;font-size:14px;}

}