/*********** List *************/
.photo_list {display: grid;  grid-template-columns: repeat(4, 1fr); grid-gap:30px }
.photo_list * {word-break: break-all;}
.photo_list dl {position:relative; padding:0 15px 23px; box-sizing:border-box; z-index:10;}
.photo_list dl::after {content:''; width:100%; height:calc(100% - 20px); border-radius:23px; background:rgba(255,255,255,0.95); position:absolute; bottom:0; left:0; z-index:-1;}
.photo_list dl.admin::after {background:var(--grayBg);}
.photo_list dl .checkbox {display:inline-block; position: absolute; left:30px; top:15px; z-index:2;}
.photo_list dl dt {border-radius:23px; overflow:hidden; aspect-ratio: 3 / 4.2422; background:var(--main);}
.photo_list dl dt img {max-width:100%; display: block; width: 100%; height: 100% !important; object-fit: cover; transition:all 0.3s ease;}
.photo_list dl dd {}
.photo_list dl dd h4 {color: var(--black); text-align: center; font-size: 1.222rem; font-weight: 600; line-height:145.455%; letter-spacing: -0.88px; margin:11px 0 13px;}
.photo_list dl dd .info {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; border-top:1px solid var(--border); padding-top:8px; box-sizing:border-box;}
.photo_list dl dd .info .date {line-height:162.5%; font-size:0.88rem; display:flex; flex-wrap:wrap; align-items:center; gap:4px;}
.photo_list dl dd .info .date::before {content:'\e935'; font-size:18px; font-family:var(--icon); line-height:1;}
.photo_list dl dd .info .tel {line-height:162.5%; font-size:0.88rem; display:flex; flex-wrap:wrap; align-items:center; gap:4px; width:100%; margin:0 0 5px;}
.photo_list dl dd .info .tel::before {content:'\e0b0'; font-size:18px; font-family:var(--icon); line-height:1;}
.photo_list dl dd .info ul {display:flex; flex-wrap:nowrap; align-items:center; gap:0 15px;}
.photo_list dl dd .info ul li {line-height:162.5%; font-size:0.88rem; display:flex; flex-wrap:wrap; align-items:center; gap:4px; transition:all 0.3s ease;}
.photo_list dl dd .info ul li:hover {color:var(--black); transition:all 0.3s ease;}
.photo_list dl dd .info ul li i {line-height:1; font-style:normal;}
.photo_list dl dd .info ul li i.like {line-height:0;}
.photo_list dl dd .info ul li i.like::before {content:'\e87d'; font-family:var(--icon); font-weight:200; color:#777; font-size:25px; line-height:1; position:relative; right:-3px; transition:all 0.3s ease;}
.photo_list dl dd .info ul li:hover i.like::before {color:var(--main); transition:all 0.3s ease;}
.photo_list dl dd .info ul li i.like.on::before {font-variation-settings: 'FILL' 1; color:var(--main);}

.more_list {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px; width: 250px; height: 55px; border-radius: 5px; border: 1px solid rgba(255,255,255,.5); box-sizing:border-box; font-size:1rem; line-height:177.778%; letter-spacing: -0.72px; color: var(--white); margin:50px auto 0;  transition:all 0.3s ease;}
.more_list::after {content:'\e145'; font-family:var(--icon); font-size:24px; color:var(--white); transition:all 0.3s ease;}

.more_list:hover {background:var(--main); border-color:var(--main); transition:all 0.3s ease;}
.more_list:hover::after {transform:rotate(270deg); transition:all 0.3s ease;}


.photo_list dl:hover dt img {transform:scale(1.15); transition:all 0.3s ease; opacity:0.9;}

.status_wrap {width:100%; margin:10px 0 0;}
.status_wrap form {width:100%;}
.status_wrap .select {width:calc(100% - 64px);}



/*********** View *************/
.close_list {display:block; margin:70px auto 35px; width:40px;}
.close_list::before {content:'\e5cd'; font-family:var(--icon); font-size:40px; color:var(--white); display:block; line-height:1; font-weight:500;}

.view_wrap {max-width:1120px; margin:0 auto;}
.view_tit {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;}
.view_tit .logo {}
#assemble .view_tit .logo img {max-width:217px !important; height:auto !important;}
.view_tit .fs30 {color:var(--white); width:calc(100% - 500px); text-align:center; padding:0 20px; box-sizing:border-box;}

.view_tit .info {display:flex; flex-wrap:wrap; align-items:center; gap:0 27px;}
.view_tit .info .date {line-height:162.5%; font-size:0.88rem; display:flex; flex-wrap:wrap; align-items:center; gap:4px; color:rgba(255,255,255,0.7);}
.view_tit .info .date::before {content:'\e935'; font-size:18px; font-family:var(--icon); line-height:1;}
.view_tit .info ul {display:flex; flex-wrap:nowrap; align-items:center; gap:0 15px;}
.view_tit .info ul li {line-height:162.5%; font-size:0.88rem; display:flex; flex-wrap:wrap; align-items:center; gap:4px; transition:all 0.3s ease; color:var(--white);}
.view_tit .info ul li i {line-height:1; font-style:normal;}
.view_tit .info ul li i.like {line-height:0;}
.view_tit .info ul li i.comment svg * {stroke:#fff}
.view_tit .info ul li i.like::before {content:'\e87d'; font-family:var(--icon); font-weight:200; color:var(--white); font-size:25px; line-height:1; position:relative; right:-3px; transition:all 0.3s ease;}
.view_tit .info ul li:hover i.like::before {color:var(--main); transition:all 0.3s ease;}
.view_tit .info ul li i.like.on::before {font-variation-settings: 'FILL' 1; color:var(--main);}


.booklet {position:relative; height:auto !important; aspect-ratio: 3 / 2.12143; margin:30px 0 55px !important;}
.booklet::before {content:''; width:1px; height:100%; opacity: 0.1; background: var(--black); position:absolute; top:0; left:50%; z-index:9999;}
.booklet::after {content:''; width:180px; height:100%; position:absolute; top:0; left:50%; transform:translateX(-50%); opacity: 0.2; background: linear-gradient(90deg, rgba(34, 34, 34, 0.00) 0%, #222 45%, #222 49.5%, #222 55%, rgba(34, 34, 34, 0.00) 100%); z-index:9999;}
.booklet .b-page {height:100% !important;}
.booklet .b-wrap {padding:0 !important; width:100% !important; height:100% !important;}
#mybook {position:relative;}
#assemble img {max-width:auto !important;}
#assemble #mybook img {/* display: block; width: 100%; height: 100% !important; object-fit: cover; */ max-width:auto !important;}
.booklet .b-arrow {width:40px !important; height:40px !important; cursor:pointer; top:50% !important; margin-top:-20px !important;}
.booklet .b-arrow div {width:100% !important; height:100% !important; top:0 !important; position:relative !important; text-indent:initial !important; font-size:0 !important;}
.booklet .b-arrow div::before {content:'\e5e1'; font-size:40px; line-height:40px; font-family:var(--icon); color:var(--white); display:block; line-height:1; font-weight:200;}
.booklet .b-arrow-prev {left:-64px !important;}
.booklet .b-arrow-prev div::before {content:'\e5e0';}
.booklet .b-arrow-next {right:-64px !important;}

.view_content_in {margin:0 0 60px; color: var(--white); text-align: center; font-size: 1rem; font-weight: 400; line-height:155.556%; letter-spacing: -0.72px;}





/*********** Input *************/
.input_info{}
.input_info li{font-size:0.889rem; letter-spacing: -0.64px; line-height: 150%; font-weight: 400; color:var(--main); padding:0 0 6px 12px; box-sizing:border-box; position:relative;}
.input_info li:last-child{padding-bottom: 0;}
.input_info li:before{content:'*'; font-size:inherit; letter-spacing: inherit; line-height:inherit; font-weight: inherit; color:inherit; position: absolute; left: 0; top:2px;}

.radio_wrap{display: flex; flex-wrap:wrap;}
.radio_wrap li{padding: 2px 10px 2px 0; box-sizing:border-box; width: 33.33%;}
.radio_wrap li.etc{width: 100%; padding-right: 0; display: flex; align-items:center;}
.radio_wrap li.etc label{width: 90px;}
.radio_wrap li.etc input[type=text]{width: calc(100% - 90px);}
	.radio_item{}
	.radio_item label{font-size:1rem; padding: 0 0 0 27px; box-sizing:border-box; position: relative; color:rgba(34,34,34,.7); letter-spacing: -0.72px; line-height:140%; cursor:pointer; display: block;}
	.radio_item label:before{content:''; display:inline-block; position: absolute; left: 0; top:2px; width:20px; height:20px; background:var(--white); border:1px solid var(--border); border-radius:50%; box-sizing:border-box;}
	.radio_item input[type=radio]:checked + label{color:var(--black); font-weight: 600;}
	.radio_item input[type=radio]:checked + label:before{border:5px solid var(--main);}
	.radio_item input[type=radio]{display:none !important;}

	.checkbox_item{display: inline-block; vertical-align: middle;}
	.checkbox_item label{font-size:1rem; color:rgba(34,34,34,.7); letter-spacing: -0.72px; line-height:140%; cursor:pointer;}
	.checkbox_item label:before{content:'\e5ca'; font-family:var(--icon); display:inline-block; vertical-align: middle; margin:-2px 7px 0 0; width:24px; height:24px; font-size:20px; line-height: 22px; font-weight: 400; text-align:center; background:var(--white); border:1px solid var(--border); border-radius:var(--borderR5); box-sizing:border-box;}
	.checkbox_item input[type=checkbox]:checked + label{color:var(--black); font-weight: 600;}
	.checkbox_item input[type=checkbox]:checked + label:before{background:var(--main); border-color:var(--main); color:var(--white);}
	.checkbox_item input[type=checkbox]{display:none !important;}


.report_wrap{box-sizing: border-box; width: 100%;}
	.report_input{max-width:1050px; margin: 0 auto;}
	.report_input > dl{display: flex; border-bottom: 1px solid var(--border);}
	.report_input > dl > dt{width: 180px; padding: 25px 10px 0 0;  box-sizing:border-box; font-size:1rem; font-weight:600; color:var(--black); letter-spacing: -0.72px; line-height: 150%;}
	.report_input > dl.ver2 > dt{width: 150px;}
	.report_input > dl.ver2 > dd{width: calc(100% - 150px);}
	.report_input > dl > dt span{display: inline-block; color:var(--main);}
	.report_input > dl > dt small{display: block; font-weight: 400; font-size:0.889rem;}
	.report_input > dl > dd{width: calc(100% - 180px); box-sizing:border-box; padding: 15px 0;}
	.report_input > dl > dd b.fs16 {font-size: 0.88rem; font-weight: 600; line-height:175%; letter-spacing: -0.64px; display:block; margin:0 0 7px; color:var(--black);}
	.report_input > dl > dd .dot{margin: 10px 0 0; padding:15px 0 0; border-top:1px dashed var(--border);}
	.report_input > dl > dd .input_info{margin: 5px 0 0;}
	.report_input > dl > dd .sub_txt{padding:5px 0 0; font-size:1rem; letter-spacing: -0.72px; line-height: 150%; color:rgba(34,34,34,.6);}
	.report_input > dl > dd .sub_txt a{display: inline-block; letter-spacing: inherit; line-height: inherit; transition:all .3s linear;}
	.report_input > dl > dd .sub_txt a:hover{color:var(--black);}
	.report_input > dl > dd .checkbox_item{margin: -2px 0 0 10px;}
	.report_input > dl > dd .input{height: 45px;}
	.report_input > dl > dd .input_file {font-size:1rem; margin:5px 0 0;}
	.report_input > dl > dd .input::placeholder{font-size:1rem; color:rgba(34,34,34,.3); letter-spacing: -0.72px;}
	.report_input > dl > dd .textarea::placeholder{font-size:1rem; color:rgba(34,34,34,.3); letter-spacing: -0.72px;}


	.report_input .two_wrap{display: flex;}
	.report_input .two_wrap dl{display: flex; width: 50%; align-items:center; padding: 15px 20px 15px 0; box-sizing:border-box; border-bottom: 1px solid var(--border);}
	.report_input .two_wrap dl dt{width: 180px; box-sizing:border-box; font-size:1rem; font-weight:600; color:var(--black); letter-spacing: -0.72px; line-height: 150%;}
	.report_input .two_wrap dl dt span{display: inline-block; color:var(--main);}
	.report_input .two_wrap dl dt .fs16{font-size:0.889rem; font-weight: 400; line-height: 150%;}
	.report_input .two_wrap dl dd{width: calc(100% - 180px); box-sizing:border-box;}
	.report_input .two_wrap dl dd .input_date{position: relative; max-width:218px; width: 100%;}
	.report_input .two_wrap dl dd .input_date .input{padding: 0 46px 0 15px; width: 100%; box-sizing:border-box;}
	.report_input .two_wrap dl dd .input_date .ui-datepicker-trigger{display: none;}
	.report_input .two_wrap dl dd .input_date:after{content:'\ebcc'; display:inline-block; font-size:22px; width: 22px; height:22px; line-height:22px; font-family:var(--icon); position:absolute; right:13px; top:50%; margin-top:-11px; color:rgba(34,34,34,.5);}


	.report_input .input_file{max-width:100%; width: 100%; box-sizing:border-box; border-radius:var(--borderR5); -webkit-border-radius: var(--borderR5);}
	.report_input .input{max-width:100%; width: 100%; box-sizing:border-box; border-radius:var(--borderR5); -webkit-border-radius: var(--borderR5);}
	.report_input .input_s{max-width:218px !important;}
	.report_input select,
	.report_input .select{max-width:490px; width: 100%; height: 45px !important; box-sizing:border-box; border-radius:var(--borderR5); -webkit-border-radius: var(--borderR5);}
	.report_input .textarea{border-radius:var(--borderR5); -webkit-border-radius: var(--borderR5);}
	.report_input .textarea{border-radius:var(--borderR5); -webkit-border-radius: var(--borderR5);}
	.report_input .input.input_subject{background:var(--grayBg);}
	.report_input .norobot_wrap{position: relative;}
	.report_input .norobot_wrap .vcode{padding: 0 0 0 100px; width: 100%; max-width:100%;}
	.report_input .norobot_wrap .norobot_img {position: absolute; padding: 0; left: 5px; top:50%; margin-top: -16px; border-radius:5px;overflow:hidden;}

	.report_input .hipen{display: inline-block; width: 20px; text-align:center; font-size:1rem; color:var(--basic);}
	.report_input .hphone_wrap{max-width:430px; width: 100%; display:flex; align-items:center;}
	.report_input .hphone_wrap .select_num{width: calc((100% - 40px)/3);}
	.report_input .hphone_wrap .input_num{width: calc((100% - 40px)/3);}
	.report_input .email_box{display: flex; flex-wrap:wrap; align-items:center;}
	.report_input .email_wrap{max-width:430px; width: 100%; display:flex; align-items:center;}
	.report_input .email_wrap .email_select{width: calc((100% - 25px)/3); margin-left: 5px;}
	.report_input .email_wrap .input_mail{width: calc((100% - 25px)/3);}


.bbs_input_bottom{padding: 50px 0 0; text-align:center;}
.bbs_input_bottom .border_box .fs18 {text-align:left; font-weight: 400; line-height:155.556%; letter-spacing: -0.72px; font-size:1rem; color:var(--black); margin:0 0 8px;}

.pri_agree{position: relative; text-align:center; padding: 25px 0 0;}
.pri_agree .checkbox_wrap{display: flex; flex-wrap:wrap; justify-content: center;}
.pri_agree .checkbox_item {margin: 0 30px 0 0;}
.pri_agree .checkbox_item:last-child {margin: 0;}
.pri_agree .checkbox_item label{color:rgba(34,34,34,.7);}
.pri_agree .checkbox_item input[type=checkbox]:checked + label{color:var(--black); font-weight: 400;}
.pri_agree .option{cursor:pointer; display: inline-block; font-weight:600; color:var(--main); font-size:1rem; text-decoration:underline; line-height: 120%;}
.pri_agree .pri_agree_cont{position: absolute; left: 0; bottom: 30px; width: 100%;}
.pri_agree .pri_agree_cont .textarea{padding: 30px; border-radius:var(--borderR15); -webkit-border-radius: var(--borderR15); font-size:0.889rem; color:rgba(34,34,34,.5);}


.bbs_btn_center{padding: 50px 0 0; text-align:center;}
.bbs_btn_center .more_btn{cursor:pointer; width: 270px;}
.bbs_btn_center .more_btn em{display: block; position: relative;}
.bbs_btn_center .more_btn em:after{margin: 0; position: absolute; right:0; top:50%; margin-top:-16px;}





/*******************************************************************************
    @media 1350px
*******************************************************************************/
@media all and (max-width:1500px){


/* .view_content {width:calc(100% - 128px); margin:0 auto;} */
.booklet .b-arrow {width:3vw !important; height:3vw !important; cursor:pointer; top:50% !important; margin-top:-1.5vw !important;}
.booklet .b-arrow div::before {font-size:3vw;}
.booklet .b-arrow-prev {left:0 !important; transform:translateX(-130%);}
.booklet .b-arrow-next {right:0 !important; transform:translateX(130%);}





}

/*******************************************************************************
    @media ~1280px
*******************************************************************************/
@media all and (max-width:1280px){

/*********** List *************/


}

/*******************************************************************************
    @media  ~980px              
*******************************************************************************/
@media all and (max-width:980px){



/*********** List *************/
.photo_list {display: grid;  grid-template-columns: repeat(3, 1fr); grid-gap:20px;}


/*********** View *************/
.view_tit {display:block; text-align:center;}
.view_tit .logo {}
.view_tit .fs30 {width:100%; margin:15px 0 30px;}
.view_tit .info {justify-content:space-between;}




/*********** Input *************/
.radio_wrap li{padding: 2px 20px 2px 0;}

	.checkbox_item{}
	.checkbox_item label:before{width:20px; height:20px; font-size:16px; line-height: 18px;}

.radio_wrap{}
.radio_wrap li{width: 50%;}
.radio_wrap li.etc label{width: 80px;}
.radio_wrap li.etc input[type=text]{width: calc(100% - 80px);}
	.radio_item{}
	.radio_item label{padding: 0 0 0 22px;}
	.radio_item label:before{top:1px; width:18px; height:18px;}



.report_wrap{}
	.report_input{}
	.report_input > dl{}
	.report_input > dl > dt{width: 150px; padding: 20px 10px 0 0;}
	.report_input > dl > dd{width: calc(100% - 150px); padding: 10px 0;}
	.report_input > dl > dd .checkbox_item{margin:5px 0 0;}
	.report_input .input{max-width:100%;}
	.report_input select,
	.report_input .select{max-width:100%;}
	.report_input .hphone_wrap{max-width:100%;}
	.report_input .email_wrap{max-width:100%;}


	.report_input .two_wrap{flex-wrap:wrap;}
	.report_input .two_wrap dl{width: 100%; padding: 15px 0;}
	.report_input .two_wrap dl dt{width: 150px;}
	.report_input .two_wrap dl dt .fs16{}
	.report_input .two_wrap dl dd{width: calc(100% - 150px);}




.bbs_input_bottom{padding: 30px 0 0;}
.pri_agree .checkbox_item {margin: 0 20px 0 0;}
.pri_agree .pri_agree_cont .textarea{padding:20px;}

.bbs_btn_center{padding: 30px 0 0;}
.bbs_btn_center .more_btn{width: 220px;}
.bbs_btn_center .more_btn em:after{margin-top:-12px;}






}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){


/*********** List *************/
.photo_list {display: grid;  grid-template-columns: repeat(2, 1fr); grid-gap:15px;}
.photo_list dl::after {border-radius:15px;}
.photo_list dl dt {border-radius:15px;}
.photo_list dl dd .info ul {gap:0 10px;}
.photo_list dl dd .info ul li i.like::before {font-size:20px;}
.photo_list dl dd .info ul li i svg {width:14px; height:auto;}

.more_list {width:130px; height:45px; margin:30px auto 0;}
.more_list::after {font-size:20px;}


/*********** View *************/
.close_list {width:34px; margin:50px auto 30px;}
.close_list::before {font-size:34px;}

.view_tit .info ul {gap:0 10px;}
.view_tit .info ul li i.like::before {font-size:20px;}
.view_tit .info ul li i svg {width:16px; height:auto;}
.view_tit .info .date::before {font-size:16px;}


.booklet {margin:20px 0 30px !important;}

/* .view_content {width:calc(100% - 80px); margin:0 auto;} */
/* .booklet .b-arrow {width:30px !important; height:30px !important;}
.booklet .b-arrow div::before {font-size:30px;}
.booklet .b-arrow-prev {left:-40px !important;}
.booklet .b-arrow-next {right:-40px !important;} */

.view_content_in {margin:0 0 30px;}




/*********** Input *************/
.input_info{}
.input_info li{padding:0 0 4px 12px;}


.radio_wrap{}
	.radio_item label:before{top:0;}
.radio_wrap li.etc label{width: 70px;}
.radio_wrap li.etc input[type=text]{width: calc(100% - 70px);}



.report_wrap{}
	.report_input{}
	.report_input > dl{flex-wrap:wrap;}
	.report_input > dl > dt{width: 100%; padding: 12px 0 5px;}
	.report_input > dl > dt br {display:none;}
	.report_input > dl > dd{width:100%; padding: 0 0 12px;}
	.report_input > dl.ver2 > dt{width: 100%;}
	.report_input > dl.ver2 > dd{width: 100%;}
	.report_input > dl > dd .dot{padding:10px 0 0;}
	
	.report_input > dl > dd .input{height: 40px;}
	.report_input select,
	.report_input .select{height: 40px !important;}
	.report_input .norobot_wrap .vcode{padding: 0 0 0 90px;}

	.report_input .email_wrap{flex-wrap:wrap;}
	.report_input .email_wrap .email_select{width: 100%; margin: 5px 0 0;}
	.report_input .email_wrap .input_mail{width: calc((100% - 20px)/2);}

	.report_input .two_wrap dl{flex-wrap:wrap; padding: 15px 0;}
	.report_input .two_wrap dl dt{width: 100%; padding: 0 0 5px;}
	.report_input .two_wrap dl dt .fs16{font-size:13px;}



.bbs_input_bottom{padding: 20px 0 0;}

.pri_agree{padding: 15px 0 0;}
.pri_agree .pri_agree_cont{bottom: 25px;}
.pri_agree .checkbox_wrap{flex-direction: column;}
.pri_agree .checkbox_item {margin: 0 0 8px;}

.bbs_btn_center{padding: 20px 0 0;}
.bbs_btn_center .more_btn{width: 180px;}
.bbs_btn_center .more_btn em:after{margin-top:-10px;}








}
/*******************************************************************************
    @media ~480px            
*******************************************************************************/
@media all and (max-width:480px){


/*********** List *************/
.photo_list {display: grid;  grid-template-columns: repeat(1, 1fr); grid-gap:20px;}


/*********** View *************/
/* .view_content {width:100%; margin:0 auto;} */
/* .booklet {margin:20px 0 60px !important;}
.booklet .b-arrow {width:24px !important; height:24px !important; top:auto !important; bottom:-40px !important;}
.booklet .b-arrow div::before {font-size:24px;}
.booklet .b-arrow-prev {left:0 !important;}
.booklet .b-arrow-next {right:0 !important;}
 */
}
/*******************************************************************************
    @media ~360px
*******************************************************************************/
@media all and (max-width:360px){




}