/* page by page CSS */
.BG {background:#ffffff;}
.BG1 {background:url("/upload/contents/cntnts/1646358660540_13519114429471231.jpg") top center repeat; background-size:contain; position:relative;}
.BG2 {background:#527a89; position:relative; z-index:1; margin-top:16rem !important; padding:5rem 2rem 4rem calc(2rem - 20px);}
.BG2 > * {position:relative; z-index:1;}
.BG2:before {content:''; display:block; width:100%; height:100%; background:#fffdf9; position:absolute; top:-10px; left:-10px; z-index:0;}

.decoImg1 {position:absolute; top:3rem;}
.decoImg2 {position:absolute; top:40%; right:2rem;}
.decoImg3 {position:absolute; top:60%; left:2rem;}
.decoImg4 {position:absolute; top:8rem; right:0; z-index:2;}
.decoBG {margin-top:-5%;}
.decoBG img {width:100%;}

.lastFlex {position:relative;}
.lastFlex .box {display:flex; flex-flow:row; justify-content:flex-end; align-items:flex-end;}
.lastFlex .box .name {padding-right:1.5rem;}
.lastFlex .boxDecoImg {width:36%; max-width:100%; position:absolute; left:50%; bottom:0; transform:translateX(-50%);}


@media only screen and (max-width:1600px) {
    .decoBG {margin-top:0;}
}

@media only screen and (max-width:1440px) {
    .BG2 {margin-top:15rem !important; padding:1rem 20px 4rem 0;}
    
    .decoImg1 {width:550px; top:2rem;}
    .decoImg2 {display:none;}
    .decoImg3 {display:none;}
    .decoImg4 {width:400px;}
    
    .lastFlex {padding-bottom:4rem;}
    .lastFlex .boxDecoImg {width:400px;}
    
    .profile {width:52%; padding-left:2rem !important;}
}

@media only screen and (max-width:1200px) {
    .BG2 {margin-top:13rem !important; padding:0.1rem 20px 4rem 0;}
    
    .decoImg1 {width:480px;}
    .decoImg4 {width:350px;}
    
    .profile {width:40%;}
}

@media only screen and (max-width:1024px) {
    .BG2 {margin-top:10rem !important; padding:0.1rem 20px 2rem 0;}
    
    .decoImg1 {width:400px; top:1.5rem;}
    .decoImg4 {width:300px; top:3rem;}
    
    .lastFlex {padding-bottom:3rem; margin-top:-3rem;}
    .lastFlex .boxDecoImg {width:300px;}
    
    .profile {padding-left:0 !important; margin-bottom:2rem;}
}

@media only screen and (max-width:768px) {
    .BG2 {background:#fffdf9; margin-top:8rem !important; padding:0.1rem 0 2rem;}
    .BG2:before {display:none;}
    .BG2 .titleSection {margin-top:2rem !important; padding-bottom:2rem;}
    
    .decoImg1 {width:300px; top:1rem;}
    .decoImg4 {width:200px; top:2rem;}
    
    .lastFlex .box .sign img {width:80px;}
    .lastFlex .boxDecoImg {width:250px;}
    
    .profile img {width:70%;}
}

@media only screen and (max-width:425px) {
    .BG2 {margin-top:5rem !important; padding:0.1rem 15px 2rem;}
    .BG2 .titleSection {margin-top:1.25rem !important; padding-bottom:2rem;}
    
    .decoImg1 {width:160px;}
    .decoImg4 {width:120px; top:1.5rem;}
    
    .lastFlex {margin-top:-1rem;}
    .lastFlex .box .name {padding-right:15px;}
    .lastFlex .box .sign img {width:60px;}
    .lastFlex .boxDecoImg {width:150px;}
    
    .profile img {width:100%;}
}

@media only screen and (max-width:375px) {
    .BG2 {padding:0.1rem 10px 2rem;}
}

@media only screen and (max-width:350px) {
    .BG2 {margin-top:4rem !important;}
    
    .decoImg1 {width:130px;}
    .decoImg4 {width:80px; top:1.75rem;}
}




/********** smg common CSS **********/
#happyBody {width:100%; margin:0; padding:0; box-sizing:border-box; font-size:0.9rem; font-weight:400; line-height:1.7; color:#333;}
#happyBody *, #happyBody *:before, #happyBody *:after {-webkit-box-sizing:border-box; box-sizing:border-box;}
#happyBody a {color:inherit; text-decoration:none;}
#happyBody img {font-size:0; vertical-align:middle; border:0; max-width:100%;}
#happyBody table {width:100%; border-collapse:separate; border-spacing:0;}
#happyBody br {color:rgba(0,0,0,0);}
#happyBody b, #happyBody strong {font-weight:600;}

#happyBody section {position:relative; max-width:1400px; width:95%; margin:3rem auto 0;}
#happyBody section#Ssize {position:relative; max-width:1000px; width:95%; margin:2rem auto 0;}
#happyBody .sectionBG {position:relative; max-width:1400px; width:95%; margin:12rem auto 0;}
#happyBody .colorBG {padding-top:0.01rem; padding-bottom:3.5rem;}
#happyBody > *:last-child {margin-bottom:5rem;}

/* title */
.titleSection {width:100%; padding-bottom:3.5rem; position:relative;}
.titleSection:after {content:''; display:block; clear:both;}
.titleSection > .left {width:calc(100% - 120px); float:left;}
.titleSection > .right {position:absolute; top:0; right:0;}

.titleArea {color:#222; line-height:1.4; padding-bottom:3.5rem;}
.titleArea:after {content:''; display:block; clear:both;}
.titleArea .M_show {display:none;}
.titleArea .M_hide {display:block;}
.readArea {line-height:1.7; text-align:justify; word-break:break-all; padding-bottom:3rem;}

.style1 {font-weight:400; word-break:break-all; font-size:2.5rem; letter-spacing:-1.1px;}
.style1 br {color:rgba(0,0,0,0);}
.style1 strong {font-weight:600!important; display:inline; word-break:break-all;}
.style1 .small {display:inline-block; font-weight:300; word-break:break-all; font-size:2rem; margin-left:1rem;}
.style1 .small:before {content:''; margin-right:1rem; border-bottom:1px solid #222; width:200px; height:1px; margin-bottom:0.5rem; display:inline-block;}
.style2 {font-size:1.75rem; font-weight:500;}

/* QR */
.titleQR {min-width:80px; width:auto; display:inline-block; line-height:1.4;}
.titleQR2 {min-width:80px; width:auto; display:inline-block; margin:0 2rem;}
.contQR {min-width:80px; width:auto; display:inline-block;}

.QRimg {max-width:80px; max-height:80px; margin:0 auto 0.5rem; display:block; text-align:center;}
.QRimg img {max-width:100%; display:inline-block;}
.QRimg2 {max-width:80px; max-height:80px; display:inline-block; text-align:center;}

.QRtitle {display:inline-block; font-weight:600;}
.QRtext {max-width:100px; display:table-cell; vertical-align:middle; font-size:0.75rem; font-weight:500; text-align:center; border-left:1px solid #666; border-right:1px solid #666; padding:0 0.5rem;}
.QRtext div {width:auto; height:auto; display:block; margin:0 auto;}
.QRtext2 {font-size:0.75rem; font-weight:500; text-align:center; border-left:1px solid #666; border-right:1px solid #666; padding:0 0.1rem;}
.QRtext3 {display:inline-block; font-size:0.75rem; font-weight:500; border-left:1px solid #666; border-right:1px solid #666; padding:0 0.5rem; vertical-align:bottom;}
.QRtext4 {max-width:80px; font-size:0.75rem; font-weight:500; text-align:center;}

/* text */
h4.textTitle {font-weight:500; font-size:1.5rem; letter-spacing:-1px;}
h4.textTitle .block {display:none;}

.textArea {text-align:justify; word-break:break-all; letter-spacing:-0.04rem;}
.textArea p.Q {font-weight:500; margin-bottom:0.7rem; word-break:break-all;}
.textArea p.T {font-weight:500; margin-bottom:0.7rem; word-break:break-all; font-size:1.2em;}
.textArea1 {text-align:justify; word-break:break-all; margin-bottom:1em;}

.imgArea {margin-bottom:2rem;}
.imgArea > img {max-width:100%;}
.imgArea0 > img {max-width:100%;}
.imgArea2 {margin-left:-252px; margin-right:1.3rem;}

.caption {color:#666; font-size:0.8rem; line-height:1.5; text-align:right;}

/* setting */
.inlineSet {}
.inlineSet > div {display:inline-block; vertical-align:middle; font-size:inherit;}
.inlineSet_box {}

.flexSet {width:100%; display:flex; flex-wrap:wrap; flex-direction:row; justify-content:space-between;}
.flexBtmSet {width:100%; display:flex; flex-wrap:wrap; flex-direction:row; align-items:flex-end; justify-content:space-between;}

.inBlock {display:inline-block; box-sizing:border-box;}

.M_hide {display:block; color:rgba(0,0,0,0);}
.M_show {display:none;}

.w1440_show {display:none;}
.w1200_show {display:none;}
.w1024_show {display:none;}
.w768_show {display:none;}
.w425_show {display:none;}
.w375_show {display:none;}

.pt1 {padding-top:1rem;}
.pt2 {padding-top:2rem;}
.pt3 {padding-top:3rem;}
.pt4 {padding-top:4rem;}
.pt5 {padding-top:5rem;}
.pt6 {padding-top:6rem;}
.pt7 {padding-top:7rem;}
.pt8 {padding-top:8rem;}
.pt9 {padding-top:9rem;}
.pt10 {padding-top:10rem;}
.pt13 {padding-top:13rem;}
.pt15 {padding-top:15rem;}

.pb1 {padding-bottom:1rem;}
.pb2 {padding-bottom:2rem;}
.pb3 {padding-bottom:3rem;}
.pb4 {padding-bottom:4rem;}
.pb5 {padding-bottom:5rem;}
.pb6 {padding-bottom:6rem;}
.pb7 {padding-bottom:7rem;}
.pb8 {padding-bottom:8rem;}
.pb9 {padding-bottom:9rem;}
.pb10 {padding-bottom:10rem;}

.ma {margin:0 auto;}

.mt1 {margin-top:1rem;}
.mt2 {margin-top:2rem;}
.mt3 {margin-top:3rem;}
.mt4 {margin-top:4rem;}
.mt5 {margin-top:5rem;}
.mt6 {margin-top:6rem;}
.mt7 {margin-top:7rem;}
.mt8 {margin-top:8rem;}
.mt9 {margin-top:9rem;}
.mt10 {margin-top:10rem;}

.mb1 {margin-bottom:1rem;}
.mb2 {margin-bottom:2rem;}
.mb3 {margin-bottom:3rem;}
.mb4 {margin-bottom:4rem;}
.mb5 {margin-bottom:5rem;}
.mb6 {margin-bottom:6rem;}
.mb7 {margin-bottom:7rem;}
.mb8 {margin-bottom:8rem;}
.mb9 {margin-bottom:9rem;}
.mb10 {margin-bottom:10rem;}

.mr1 {margin-right:1rem;}
.mr2 {margin-right:2rem;}
.mr3 {margin-right:3rem;}
.mr4 {margin-right:4rem;}
.mr5 {margin-right:5rem;}
.mr6 {margin-right:6rem;}
.mr7 {margin-right:7rem;}
.mr8 {margin-right:8rem;}
.mr9 {margin-right:9rem;}
.mr10 {margin-right:10rem;}

.ml1 {margin-left:1rem;}
.ml2 {margin-left:2rem;}
.ml3 {margin-left:3rem;}
.ml4 {margin-left:4rem;}
.ml5 {margin-left:5rem;}
.ml6 {margin-left:6rem;}
.ml7 {margin-left:7rem;}
.ml8 {margin-left:8rem;}
.ml9 {margin-left:9rem;}
.ml10 {margin-left:10rem;}

.widthFull {width:100%;}
.width100 {width:100%;}
.width100:after {content:''; display:block; clear:both;}
.width90 {width:90%;}
.width80 {width:80%;}
.width75 {width:75%;}
.width70 {width:70%;}
.width65 {width:65%;}
.width60 {width:60%;}
.width55 {width:55%;}
.width50 {width:50%;}
.width49 {width:49%;}
.width48 {width:48%;}
.width47 {width:47%;}
.width45 {width:45%;}
.width44 {width:44%;}
.width40 {width:40%;}
.width35 {width:35%;}
.width32 {width:32%;}
.width30 {width:30%;}
.width27 {width:27%;}
.width25 {width:25%;}
.width20 {width:20%;}
.width10 {width:10%;}

.width49fix {width:49%;}

.floatL {float:left;}
.floatR {float:right;}

.floatLimpt {float:left !important; max-width:49%;}
.floatRimpt {float:right !important;}

.floatL_img {float:left; padding-right:3rem;}
.floatR_img {float:right; padding-left:3rem;}

.clear {clear:both;}

.textR {text-align:right;}
.textL {text-align:left;}
.textC {text-align:center !important;}

.vtcT {vertical-align:top;}
.vtcM {vertical-align:middle;}
.vtcB {vertical-align:bottom;}

.absBox {position:relative;}
.absL {position:absolute; left:0%;}
.absR {position:absolute; right:0%;}
.absB {position:absolute; bottom:0%;}

.mtBox {opacity:0; transition:all .5s ease-out; -webkit-transition:all .5s ease-out;}
.mtBox.active {opacity:1; transition:all .5s ease-out; -webkit-transition:all .5s ease-out;}

@media only screen and (max-width:1440px) {
    #happyBody {width:100%;}

	/* title */
	.titleSection > .left.titleArea {width:100%; float:none;}
	.titleSection > .right {position:relative; float:right;}

    .style1 {font-size:2.25rem;}
    .style1 .small {font-size:1.75rem;}
    .style1 .small:before {width:150px;}
    .style2 {font-size:1.5rem;}

	/* setting */
	.w1440_show {display:block;}
	.w1440_hide {display:none;}
}

@media only screen and (max-width:1200px) {
    /* title */
    .style1 {font-size:2rem;}
    .style1 .small {font-size:1.5rem;}
    .style2 {font-size:1.25rem;}
    
	/* setting */
	.w1200_show {display:block;}
	.w1200_hide {display:none;}
}

@media only screen and (max-width:1024px) {
	/* title */
	.titleSection > .left.titleArea {width:calc(100% - 100px); float:left;}
	.titleSection > .left.readArea {width:100%;}
	.titleSection > .right {position:absolute; float:none;}

    .style1 .small {display:block; margin-left:0rem;}
    .style1 .small:before {width:1px; height:30px; border-bottom:0; border-right:1px solid #222; margin:0.5rem; display:block;}

	/* text */
    .imgArea {width:100%; text-align:center;}
    .imgArea0 {width:100%; text-align:center;}
    .imgArea2 {margin-left:0px; margin-right:0rem;}
    .imgArea > img, .imgArea2 > img {max-width:100%; margin:1rem auto 2rem;}
    .imgArea0 > img {max-width:100%;}

    .caption {text-align:center; margin-top:0.5rem;}

	/* setting */
	.w1024_show {display:block;}
	.w1024_hide {display:none;}

    .floatL_img {float:none; width:100%; padding:0; text-align:center;}
    .floatR_img {float:none; width:100%; padding:0; text-align:center;}

    .floatL {float:none;}
    .floatR {float:none;}

    .width100 {width:100%; box-sizing:border-box;}
    .width90 {width:100%; box-sizing:border-box;}
    .width80 {width:100%; box-sizing:border-box;}
    .width75 {width:100%; box-sizing:border-box;}
    .width70 {width:100%; box-sizing:border-box;}
    .width65 {width:100%; box-sizing:border-box;}
    .width60 {width:100%; box-sizing:border-box;}
    .width55 {width:100%; box-sizing:border-box;}
    .width50 {width:100%; box-sizing:border-box;}
    .width49 {width:100%; box-sizing:border-box;}
    .width48 {width:100%; box-sizing:border-box;}
    .width47 {width:100%; box-sizing:border-box;}
    .width45 {width:100%; box-sizing:border-box;}
    .width44 {width:100%; box-sizing:border-box;}
    .width40 {width:100%; box-sizing:border-box;}
    .width35 {width:100%; box-sizing:border-box;}
    .width32 {width:100%; box-sizing:border-box;}
    .width30 {width:100%; box-sizing:border-box;}
    .width27 {width:100%; box-sizing:border-box;}
    .width25 {width:100%; box-sizing:border-box;}
    .width20 {width:100%; box-sizing:border-box;}
    .width10 {width:100%; box-sizing:border-box;}

    .M_hide {display:none;}
    .M_floatR {float:right;}
    .M_floatL {float:left;}
    .M_show_caption {display:block;}
}

@media only screen and (max-width:768px) {
    #happyBody {font-size:0.8rem;}
    
	/* title */
	.titleSection > .left.titleArea {width:100%; float:none;}
	.titleSection > .left.readArea {width:100%; float:none;}
	.titleSection > .right {position:relative; float:right;}

    .titleArea {padding-bottom:1.5rem;}
    .readArea {padding-bottom:2rem; line-height:1.7;}
    .readArea br {display:none;}

    .style1 {max-width:calc(100% - 140px); font-size:1.5rem;}
    .style1 .small {display:block; font-size:1.2rem; margin-left:0rem;}
    .style1 .small:before {width:1px; height:30px; border-bottom:0; border-right:1px solid #222; margin:0.5rem; display:block;}
    .style2 {font-size:1.2rem;}

	/* QR */
    .titleQR {min-width:auto; width:auto;}
    .QRimg {max-width:50px; max-height:50px; margin-right:0.5rem; margin-bottom:0; display:inline-block; float:left;}
    .QRimg2 {max-width:50px; max-height:50px; display:inline-block; float:left;}

    .QRtext {max-width:100%; height:50px; padding:0 0.5rem; border-right:0; border-left:0; border-top:1px solid #666; border-bottom:1px solid #666;}
    .QRtext br {display:none;}
    .QRtext2 {display:inline; border-right:0; border-left:0; border-top:1px solid #666; border-bottom:1px solid #666;}
    .QRtext3 {border-right:0; border-left:0;}
    
	/* text */
    h4.textTitle {font-size:1.35rem; letter-spacing:-0.04rem;}

	/* setting */
	.w768_show {display:block;}
	.w768_hide {display:none;}
}

@media only screen and (max-width:425px) {
	#happyBody section {width:100%;}
	#happyBody section.sec2 {width:95%}

	/* title */
	.titleSection > .right {float:left;}

    .titleArea {padding-bottom:1rem;}
    .titleArea .M_show {display:block;}
    .titleArea .M_hide {display:none;}
    .readArea {padding-bottom:2rem; line-height:1.7;}

    .style1 {max-width:100%; display:block; font-size:1.2rem;}
    .style1 .small {display:block; font-size:1rem; margin-left:0rem;}
    .style1 .small:before {display:block; margin-bottom:rem; margin-left:0.7rem; width:1px; height:30px; border-bottom:0; border-right:1px solid #222;}
    .style2 {font-size:1rem;}

	/* QR */
	.titleQR {display:block; margin-bottom:1rem;}

	/* text */
    h4.textTitle {font-size:1.35em; text-align:justify; line-height:1.6; font-weight:600;}

	/* setting */
	.M_show {display:block; color:rgba(0,0,0,0);}

	.w425_show {display:block;}
	.w425_hide {display:none;}
}

@media only screen and (max-width:375px) {    
	/* setting */
	.M_show {display:block; color:rgba(0,0,0,0);}

	.w375_show {display:block;}
	.w375_hide {display:none;}
}