@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable.css");
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo&display=swap');


*{list-style: none; text-decoration: none; margin:0; padding:0; box-sizing: border-box;  letter-spacing:-0.05em; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; color:#1b1b1b;}

button{border:none; background:none;}
input,select{-webkit-border-radius:0; background-color:#fff;}
table, th, thead, tfoot {outline: 0;}
table{border-collapse: collapse; border-spacing: 0;}

html{scroll-behavior: smooth;}
label, input, button, select, img{vertical-align:middle;}

.mart10{margin-top:10px !important;}
.mart15{margin-top:15px !important;}
.mart20{margin-top:20px !important;}
.mart30{margin-top:30px !important;}
.mart40{margin-top:40px !important;}
.mart50{margin-top:50px !important;}
.mart60{margin-top:60px !important;}
.mart100{margin-top:100px !important;}

.w50{width:50px !important;}
.w80{width:80px !important;}
.w100{width:100px !important;}
.w120{width:120px !important;}
.w150{width:150px !important;}
.w200{width:200px !important;}
.w220{width:220px !important;}

.ipt_20{width:20% !important;}
.ipt_30{width:30% !important;}
.ipt_40{width:40% !important;}
.ipt_42{width:42% !important;}
.ipt_44{width:44% !important;}
.ipt_57{width:57% !important;}
.ipt_70{width:70% !important;}
.ipt_75{width:75% !important;}

.md10{margin: 10px 0;}
.mr8{margin-right:8px;}


/* ------------------------------------------------------------------------------------------------------------------------------------------------ */

section{width:100%; height:100vh; display:flex; align-items:center; justify-content:center; transition:transform 0.8s ease-in-out; position:relative;}
section:nth-child(1) {background:url('img/banner_11.png') no-repeat center top / cover;}
section:nth-child(2) {background:url('img/banner_2.png') no-repeat center top / cover;}
.container{height: 100vh; width: 100%; transition: transform 0.8s ease;}

.fixed-header{position:fixed; top:0; left:0; width:100%; height:76px; color:#fff; display:flex; align-items:center; justify-content: space-between; z-index:1000; padding:0 30px; }
.fixed-header h1{font-size:24px;}
.fixed-header a{padding:8px 15px; background-color:#613f17; color:#fff; font-size:15px; display:inline-block; border-radius:4px;}
.fixed-header a:hover{background-color:#7a5220;}

.text_1{position:absolute; right:200px; top:30%; }
.text_1 h2{color:#fff; font-family: 'Nanum Myeongjo', serif; font-weight:500; font-size:55px; margin-bottom:40px; line-height:80px;}
.text_2{position:absolute; right:200px; top:35%; }
.text_2 h2{color:#fff; font-family: 'Nanum Myeongjo', serif; font-weight:500; font-size:55px; margin-bottom:40px; line-height:80px;}
.text_2 .port_a{font-size:24px; padding:22px 40px; display:inline-block; background-color:#613f17; font-weight:500; color:#fff; border-radius:10px;}
.text_2 .port_a:hover{background-color:#7a5220;}
.text_2 .port_a span{color:#fff; font-size:28px; font-weight:bold;}


/* 폼 */
.form{max-width:640px; margin: 0 auto; margin-top:50px;}
.form h1{text-align:center; font-size:24px;}
.form .form_bx{background-color:#fff; margin-top:20px; padding:40px 30px; box-shadow: 0 2px 8px rgba(0, 0, 0, .1); border-radius:12px;}
.form .form_bx .fm_div{border-top:1px solid #888; margin-top:20px;}
.form .form_bx table{width:100%; table-layout: fixed;}
.form .form_bx table tr{border-bottom:1px solid #ddd;}
.form .form_bx table th,
.form .form_bx table td{padding:10px; height:40px; font-size:14px;}
.form .form_bx table th{background-color:#f6f6f6; text-align:left;}
.form .frm_input{border:1px solid #ddd; padding:5px; height:25px; border-radius:4px; font-size:14px;}
.form .frm_select{border:1px solid #ddd; padding:0 5px; height:25px; border-radius:4px; font-size:14px;}

.oby_img{text-align:center;}
.oby_img #preview1{width:120px; height:160px; background-color:#fafafa; display:block; margin: 0 auto; object-fit: cover; border-radius:6px; box-shadow: 0 0 0 1px #d8d8d8 inset; object-position:center;}    
.oby_img #preview2{width:120px; height:160px; background-color:#fafafa; display:block; margin: 0 auto; object-fit: cover; border-radius:6px; box-shadow: 0 0 0 1px #d8d8d8 inset; object-position:center;}    
.oby_img input[type=file]{display:none; border:none;}
.oby_img .upload{background-color:#6b6b6b; color:#fff; margin-top:5px; text-align:center; cursor:pointer; border-radius:6px; padding:5px 0; display:inline-block; width:120px;} 
.oby_img .upload:hover{background-color:#818181;}

.sub{font-size:13px; color:#454545; margin-top:5px;}

.type_lab{display:flex; gap:20px; flex-wrap: wrap;}
.type_lab img{width:80px; height:107px; object-fit: cover; cursor:pointer; border-radius:6px;}
.type_lab div{text-align:center; margin-top:6px; font-weight:500; cursor:pointer;}
.type_lab div span{vertical-align:middle; margin-left:3px;}

.type_lab label { width: 23%; text-align:center;}

.chckdiv{margin-top:10px; font-weight:500;}
.chckdiv label{display:block; vertical-align:middle; margin-bottom:5px; cursor:pointer;}
.chckdiv input{vertical-align:middle; margin-top:-3px; margin-right:3px; cursor:pointer;}

.form_btn{margin-top:20px; width:100%; height:55px; background-color:#000; color:#fff; font-size:17px; cursor:pointer; border-radius:10px;} 
.form_btn:hover{background-color:#333;}
.form_btn span{color:#fff; font-size:20px; font-weight:bold;}

.fm_div table col:last-child {width: 100%;}













/* ===================================================================================================================================================
	영정사진 제작
=================================================================================================================================================== */ 

.gen_header{display:flex; align-items:center; justify-content:space-between; height:72px; background-color:#fff; padding:0 30px; position:sticky; top:0; left:0; z-index:100; box-shadow: 0px 6px 9px -4px rgba(153, 153, 153, .25);}
.gen_header h1{font-size:22px;}
.gen_header > div{display:flex; gap:20px;}
.gen_header > div p{font-weight:500;}
.gen_header > div a{color:#ff0000; font-size:15px;}


.gen_main{display:flex; justify-content:center; gap:20px; margin-top:30px;}
.gen_main .gen_1{width:460px; background-color:#fff; box-shadow: 0px 6px 9px -4px rgba(153, 153, 153, .05); padding:30px 0; border-radius:12px;}
.gen_main .gen_1 > h2{font-size:20px; padding: 0 20px 20px 20px;}
.gen_main .gen_1 .gen1_top{padding: 0 20px;}
.gen_main .gen_1 .gen1_top h3{font-size:16px;}
.gen_main .gen_1 .gen1_top h3 span{font-weight:400; color:#6c7174;}

.gen1_bx{height:600px; overflow-y:auto;}
.gen1_bx::-webkit-scrollbar { width: 8px;}
.gen1_bx::-webkit-scrollbar-track {background: #f0f0f0; border-radius: 4px;}
.gen1_bx::-webkit-scrollbar-thumb { background-color: #bbb;  border-radius: 4px; border: 2px solid #f0f0f0; }
.gen1_bx::-webkit-scrollbar-thumb:hover { background-color: #999;}

.gen1_img {display: flex;  flex-wrap: wrap; gap: 10px; width: 100%; padding:15px; border:1px solid #e8e8e8; border-radius:12px; margin-top:15px;}
.gen1_img .img_box {position: relative; width: 100%; height:140px; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #f8f8f8; transition: background-color 0.3s ease, border-color 0.3s ease;}
.gen1_img .img_box:not(.add_box) {width: calc(50% - 5px); border-radius:12px;}
.gen1_img .img_box p {color: #999; font-size: 14px;}
.gen1_img .img_box img {width: auto; height: 100%; object-fit: cover; display: block; border-radius:12px;}
.gen1_img .add_box {font-size: 40px; color: #bbb; background-color: #f8f8f8; transition: background-color 0.3s ease, border-color 0.3s ease; border-radius:12px;}
.gen1_img .add_box:hover {background-color: #f0f0f0; box-shadow: inset 0 0 10px rgba(0,0,0,0.05); color:#333;}
.gen1_img .add_box p{font-size:16px; color:#000; font-weight:bold;}
.gen1_img .add_box .subp{font-size:14px; font-weight:normal; color:#6c7174; margin-top:2px;}
.gen1_img .add_box .add_icon{width:auto; height:22px; border-radius:0px; margin-bottom:10px;}

.img_box .hover_actions {position: absolute; inset: 0; background: rgba(0,0,0,0.5); opacity: 0; display: flex; align-items: center; justify-content: center; gap: 15px; transition: opacity 0.3s; border-radius:12px;}
.img_box:hover .hover_actions {opacity: 1;}
.hover_actions button {border: none; width: 30px; height: 30px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px;}
.hover_actions button:hover {}


.gen1_mid{margin-top:20px; padding: 0 20px;}
.gen1_mid h3{font-size:16px;}
.gen1_mid .prompt{padding:15px; border-radius:12px; border:1px solid #e8e8e8; margin-top:12px;}
.gen1_mid .prompt textarea{width:100%; height:100px; border:none; resize:none; outline:none; font-size:15px;}
.gen1_mid .prompt textarea:focus{border:none; outline:none;}
.gen1_mid .prompt textarea::placeholder{font-size:15px; color:#989898;}

.gen1_fot{margin-top:20px; padding:0 20px;}
.gen1_fot h3{font-size:16px;}
.gen1_fot h3 span{font-weight:400; color:#6c7174;}

.color_select {margin-top:12px; display: flex; flex-wrap: wrap; gap: 20px;}
.color_select label { display: flex; flex-direction: column; align-items: center;  width: calc(20% - 16px); cursor: pointer;}
.color_select input[type="radio"] {display: none;}
.color_box { width: 100%; height: 60px; border-radius: 6px; border: 2px solid transparent; transition: all 0.2s ease;}
.color_select p { margin-top: 8px; font-size: 14px; color: #333;}

/* ✅ 선택된 상태 */
.color_select input[type="radio"]:checked + .color_box { border:2px solid #000 !important;}
.color_select input[type="radio"]:checked + .color_box + p { color: #000; font-weight: 600;}

.gen1_btn{padding:20px 20px 0 20px;}
.gen1_btn button{width:100%; height:60px; background-color:#333; color:#fff; font-size:18px; border-radius:12px; cursor:pointer;} 
.gen1_btn button:hover{background:#555;}










.gen_main .gen_2{width:605px; background-color:#fff; box-shadow: 0px 6px 9px -4px rgba(153, 153, 153, .05); padding:30px 20px; border-radius:12px;}

.gen2_top h3 .gen2_tit{border:1px solid #383838; font-size:16px; display:inline-block; padding:2px 12px; border-radius:50px; color:#383838;}
.gen2_top h3 b{font-weight:500; font-size:15px; color:#888a8d; margin-left:10px;} 

.gen2_top2{margin-top:20px;}
.gen2_top2 ul{display:flex; gap:10px;}
.gen2_top2 ul li{width:50px; border-radius:10px;}
.gen2_top2 ul li img{width:100%; height:50px; object-fit:cover; border-radius:10px;}
.gen2_top2 p{margin-top:10px; font-weight:500;}
.gen2_top2 p img{width:15px; vertical-align:middle; margin-right:10px; margin-top:-10px;}

.gen2_mid{margin-top:15px; display:flex; gap:12px;}
.gen2_mid input[type="radio"] {display: none;}
.gen2_mid img {width: 180px; aspect-ratio: 3 /4; object-fit: cover; border-radius: 8px; border: 2px solid transparent; cursor: pointer; transition: 0.2s;}
.gen2_mid input[type="radio"]:checked + img { border:3px solid #000; box-shadow: 0 0 8px rgba(0,119,204,0.4);  transition: all 0.2s ease;}

.gen2_table{margin-top:20px;}
.gen2_table > div h3{font-size:16px; margin-bottom:10px;}
.gen2_table > div input{width:100%; border:1px solid #e8e8e8; padding:10px; border-radius:6px; font-size:15px;}

.gen2_ck{margin-top:13px; display:flex; gap:10px;}
.gen2_ck label{font-size: 15px; cursor:pointer; vertical-align:middle; font-weight:500;}
.gen2_ck input{margin-right:3px; vertical-align:middle; margin-top:-2px; width:14px; height:14px;}



.gen2_mid img {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 4s ease forwards infinite;
}

.gen2_mid label:nth-child(1) img { animation-delay: 0s; }
.gen2_mid label:nth-child(2) img { animation-delay: 0.15s; }
.gen2_mid label:nth-child(3) img { animation-delay: 0.3s; }

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 타자 효과 (무한 반복용) */
@keyframes typing {
  0% {
    width: 0;
  }
  40% {
    width: 50ch; /* 글자 수에 맞게 조절 */
  }
  60% {
    width: 50ch;
  }
  100% {
    width: 0;
  }
}

/* 커서 깜빡임 */
@keyframes blink {
  0%, 50%, 100% {
    border-color: transparent;
  }
  25%, 75% {
    border-color: #666;
  }
}

#typingText {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  animation:
    typing 6s steps(50, end) infinite,
    blink 0.8s step-end infinite;
}



.g_btn{background-color:#000 !important;}
.g_btn:hover{background-color:#363636 !important;}


/* ==================================================================
	로그인
===================================================================== */

.login{display:flex; align-items: center; justify-content: center;}
.login > div{margin-top:100px; width:500px; padding:70px 50px; background-color:#fff; box-shadow: 0px 6px 9px -4px rgba(153, 153, 153, .1); border-radius:20px; text-align:center;}
.login > div h2{margin-bottom:30px;}
.login > div > .log_ipt input{border:1px solid #e8e8e8; border-radius:10px; padding:10px 12px; width:100%; margin-bottom:10px; height:48px; font-size:16px;}
.login .log_ck{display:flex; gap:15px; align-items:left; margin-top:5px;}
.login .log_ck label{font-size:16px; color:#454545; cursor:pointer;}
.login .log_ck input{margin-top:-3px; cursor:pointer; margin-right:2px;}

.log_btn{width:100%;  background-color:#333; font-size:17px; font-weight:600; border-radius:12px; margin-top:40px; cursor:pointer;}
.log_btn:hover{background-color:#000;}
.log_btn a{display:block; color:#fff; width:100%; height:60px; line-height:60px; display:inline-block;}



/* ============================================================================================================================================================================ */

/* 이쪽에서만 반응형 작업 할것 */

/* ============================================================================================================================================================================ */
.pc{display:block;}
.mob{display:none;}

@media (max-width: 400px) {
	
	section:nth-child(1) {background:url('img/mob_banner_111.png') no-repeat center center / cover; position:relative;}
	section:nth-child(1)::before{content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.2); z-index:1;}
	section:nth-child(2) {background:url('img/mob_banner_2.png') no-repeat center center / cover; position:relative;}
	section:nth-child(2)::before{content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.2); z-index:1;}

	.fixed-header{padding:0 15px;}
	.fixed-header h1{font-size:20px;}
	
	.text_1{top:20%; right:unset; z-index:2;}
	.text_1 h2{font-size:28px; line-height:40px; margin-bottom:25px; text-align:center;}  

	.text_2{top:25%; right:unset; z-index:2;}
	.text_2 h2{font-size:28px; line-height:40px; margin-bottom:25px; text-align:center;}  
	.text_2 .port_a{width:100%; text-align:center; font-size:20px; padding:20px 0;}
	
	.form{margin-top:0px;}
	.form .form_bx table{}
	.form{width:100%; padding: 30px 15px 30px 15px;}
	.form .form_bx{padding:30px 20px;}
	.form .form_bx table{}
	.form .frm_input{width:100%; font-size:15px; height:30px;}
	.form .frm_select{font-size:15px; height:30px;}

	.form .form_bx table th, 
	.form .form_bx table td{font-size:15px; height:auto;}
	
	.type_lab{flex-wrap:wrap;}
	.type_lab img{width:100%;}

	.w120{width:80px !important;}
	.fm_div table col:last-child {width: 100%;}
	.mwidth{display:flex; gap:10px;}

	.oby_img .upload{font-size:15px;}

	.text_2 .port_a span{font-size:23px;}

	.type_lab label{width:43%;}

}