/* page by page CSS */


#happyBody {background-color: #e9eff4;}
#happyBody .topArea {height: 300px !important;}
#happyBody .topArea .textWrap .textTop {
    flex-direction: column; 
    align-content: center; 
    align-items: flex-start !important;
    justify-content: flex-start;
    padding-top: 90px;
}
#happyBody .topArea .textWrap .textTop .category {display: inline-block; padding-bottom: 40px;}
#happyBody .topArea .textWrap .textTop .title {
    color: #052f7c !important; 
    padding-bottom: 40px;
}
#happyBody .topArea .textWrap .textTop .dec {font-size: 18px; line-height: 1.6;}
/* #happyBody .topArea .textWrap .textBottom {border-top: none !important; border-bottom: 1px solid #000;} */

#happyBody .contentsArea .text.pb30 {padding-bottom: 30px;}



@media only screen and (max-width:1365px){
    
}

@media only screen and (max-width:1024px){
    #happyBody .topArea .textWrap .textBottom {position: static !important;}
    #happyBody .topArea .textWrap{
        position: relative !important;
    }
    #happyBody .topArea .textWrap .textTop {
        top: 0 !important;
        padding-top: 50px;
    }
}

@media only screen and (max-width:768px){
}

@media only screen and (max-width:450px){
}




/* ********** smg common CSS ********** */

/* 타이틀 영역 */
#happyBody .topArea {position: relative; width: 100%; height: 750px; background-size: cover; background-repeat: no-repeat; background-position: center;}
#happyBody .topArea .mo_bg {display: none;}
#happyBody .topArea .textWrap {position: absolute; top: 0; left: 50%; transform: translateX(-50%); max-width: 1150px; width: 90%; height: 100%;}
#happyBody .topArea .textWrap .title {font-size: 45px; color: #fff; font-weight: 300; line-height: 1.3; word-break: keep-all;}
#happyBody .topArea .textWrap .title b {font-weight: bold;}
#happyBody .topArea .textWrap .title.center {text-align: center; width: 100%;}
#happyBody .topArea .textWrap .subtitle {font-size: 30px; padding-bottom: 30px;}

#happyBody .topArea .textWrap .textTop {display: flex; display: -ms-flexbox;  align-items: center; -webkit-box-align: center;
    -ms-flex-align: center; width: 100%; height: 100%;}
#happyBody .topArea .textWrap .textBottom {position: absolute; left: 0; bottom: 0; padding: 40px 0; display: flex; display: -ms-flexbox; flex-wrap: wrap; -ms-flex-wrap: wrap; justify-content: space-between; -webkit-box-pack: justify;
    -ms-flex-pack: justify; border-top: 1px solid #fff; width: 100%;}
#happyBody .topArea .textWrap .textBottom .category {font-size: 17px; color: #fff;}
#happyBody .topArea .textWrap .textBottom .by span {display: inline-block; font-size: 17px; color: #fff;}
#happyBody .topArea .textWrap .textBottom .by span:first-child {margin-right: 15px;}
#happyBody .topArea .textWrap .textBottom.black {border-color: #000;}
#happyBody .topArea .textWrap .textBottom.black * {color: #000;}
#happyBody .topArea .textWrap .textBottom.black .by * {color: #000;}


/* 콘텐츠 영역 */
#happyBody .contentsArea {margin: 0 auto; padding-top: 130px;}
#happyBody .textbox {width: 90%; max-width: 1150px; margin: 0 auto;padding-bottom: 90px;}
/* .textbox:last-child {padding-bottom: 0;} */

#happyBody .contentsArea .title {font-size: 35px; padding-bottom: 40px; line-height: 1.3;}
#happyBody .contentsArea .text {font-size: 18px; padding-bottom: 90px; line-height: 1.8;}
#happyBody .contentsArea .text:last-child {padding-bottom: 0;}
#happyBody .contentsArea .video {position: relative; height: 0; padding-bottom: 56.25%; margin-bottom: 1.5rem; overflow: hidden; }
#happyBody .contentsArea .video iframe, 
#happyBody .contentsArea .video object, 
#happyBody .contentsArea .video embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#happyBody .contentsArea .video :last-child {margin-bottom: 0;}

#happyBody .epilogue {font-size: 22px; color: #89837c; padding-bottom: 80px; text-align: center; line-height: 1.7; font-weight: 500;}
#happyBody .epilogue:last-child {padding-bottom: 0;}

#happyBody .fullbox {width: 100%; display: flex; display: -ms-flexbox;  align-items: center; -webkit-box-align: center;
    -ms-flex-align: center; justify-content: center; -webkit-box-pack: center;
    -ms-flex-pack: center; padding-bottom: 90px; padding: 0 0 90px;}
#happyBody .fullbox >.span {display: inline-block;}
#happyBody .fullbox >.span .epilogue {text-align: left; max-width: 50%; margin-right: 60px; margin-left: 250px;}

/* 왼쪽발문 오른쪽 이미지 풀박스 */
#happyBody .halfFullbox {position: relative;}
#happyBody .halfFullbox .textbox {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 90%;}
#happyBody .halfFullbox .textbox .epilogue {max-width: 550px; text-align: left;}
#happyBody .halfFullbox .img {width: 50%;}



/* 반반 가로정렬 */
#happyBody .flex {display: flex; display: -ms-flexbox;  padding-bottom: 90px;}
#happyBody .flex:last-child {padding-bottom: 0;}
#happyBody .flex >.span {display: inline-block; width: 50%; margin-right: 60px;}
#happyBody .flex >.span:last-child {padding-bottom: 0; margin-right: 0;}

#happyBody .flex.cross .img:last-child {margin-top: 70px;}
#happyBody .flex.cross02 .img:first-child {margin-top: 150px;}


/* 가로정렬 */
#happyBody .flex02 {display: flex; display: -ms-flexbox;  padding-bottom: 90px;}
#happyBody .flex02:last-child {padding-bottom: 0;}
#happyBody .flex02 >.span {display: inline-block; margin-right: 20px;}
#happyBody .flex02 >.span:last-child {margin-right: 0; padding-bottom: 0;}

#happyBody .flex03 {display: flex; display: -ms-flexbox; }

#happyBody .caption {font-size: 16px; text-align: center; padding-top: 10px; line-height: 1.4;}

#happyBody .img {text-align: center; padding-bottom: 60px;}
#happyBody .img:last-child {padding-bottom: 0;}

#happyBody .border {width: 100%; height: 1px; background-color: #000; margin-bottom: 40px;}

#happyBody .tag01 {display: inline-block; padding: 5px 10px; font-size: 17px; background-color: #fce1ae; font-weight: 600; margin-bottom: 30px;}
#happyBody .tag02 {display: inline-block; padding: 10px 20px; font-size: 17px; background-color: #fff; font-weight: 600; margin-bottom: 30px; border: 1px solid #000; }

#happyBody .box01 {padding: 30px; background-color: #fff; border-radius: 20px;}
#happyBody .box02 {padding: 30px; background-color: rgba(255,255,255,0.5); border: 1px solid #000;}



/* .QRBox */
.QRbox {font-weight:600; max-width: 400px; }
.QRbox .qrImg {width:115px;}
.QRbox .qrImg img {width:auto; max-width:100px; display:block;}
.QRbox .qrText {display:flex; flex-flow:row; align-items:center; line-height:1.4; font-size: 18px; margin-top: 10px;}





/* 기본 스타일 =======================================================================*/
* {margin: 0; padding: 0; }
#happyBody {width:100%; margin:0 auto; padding:0; box-sizing:border-box; font-size: 20px; font-weight:400; line-height:1.2; color:#333; letter-spacing: -0.75px;}
#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:700;}

#happyBody p {line-height: 1.7; word-break: keep-all; text-align: left;}

#happyBody section {position:relative; max-width:1400px; width:95%; margin:60px auto 0;}

#happyBody .just-center {justify-content: center !important; -webkit-box-pack: center !important; -ms-flex-pack: center !important;}
#happyBody .just-between {justify-content: space-between !important; -webkit-box-pack: justify !important; -ms-flex-pack: justify !important;}
#happyBody .just-start {justify-content: start !important; -webkit-box-pack: start !important; -ms-flex-pack: start !important;}
#happyBody .just-end {justify-content: flex-end !important; -webkit-justify-content: flex-end !important;}
#happyBody .align-center {align-items: center !important; -webkit-box-align: center !important; -ms-flex-align: center !important;}
#happyBody .align-start {align-items: flex-start !important; -webkit-align-items: flex-start !important;}
#happyBody .align-end {align-items: flex-end !important; -webkit-box-align: end !important; -ms-flex-align: end !important;}
#happyBody .align-stretch {align-items: stretch !important;}
#happyBody .text-center {text-align: center !important;}
#happyBody .text-left {text-align: left !important;}
#happyBody .text-right {text-align: right !important;}
#happyBody .text-just {text-align: justify !important;}

#happyBody .relative {position:relative;}
#happyBody .absolute {position:absolute;}



/* setting =======================================================================*/

.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;}


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


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

@media only screen and (max-width:1200px) {
    
	/* setting */
	.w1200_show {display:block;}
	.w1200_hide {display:none;}
}

@media only screen and (max-width:1024px) {

    #happyBody .topArea {background-image: none; height: 100% !important; position: relative; }
    #happyBody .topArea .mo_bg {display: block; width: 100%;}
    #happyBody .topArea .mo_bg img {display: block; width: 100%;}
    #happyBody .topArea .textWrap {position: absolute; display: block;}
    #happyBody .topArea .textWrap .category {margin-bottom: 10px;}
    #happyBody .topArea .textWrap .textTop {position: relative; height: auto; top: 18vw;}
    #happyBody .topArea .textWrap .textTop.mo_center {position: relative; align-items: center; -webkit-box-align: center;
        -ms-flex-align: center; -webkit-box-pack: center;
        -ms-flex-pack: center; top: 20vw; text-align: center;
        justify-content: center !important;
    }

    #happyBody .fullbox {display: block; padding: 0 5% 60px;}
    #happyBody .fullbox >.span {width: 100%;}

    #happyBody .fullbox .textbox {width: 100%;}

    #happyBody .halfFullbox .textbox {position: static; transform: translate(0); width: 100%;}
    #happyBody .halfFullbox .textbox .epilogue {margin-right: 0; max-width: 100%;}
    #happyBody .halfFullbox .img {width: 100%;}

    #happyBody .flex {flex-direction: column;}
    #happyBody .flex >.span {width: 100% !important; max-width: 100% !important; min-width: 100% !important; margin-right: 0 !important; padding-bottom: 40px;}

    #happyBody .flex.cross .img:last-child {margin-top: 0;}
    #happyBody .flex.cross02 .img:first-child {margin-top: 0;}
    

    #happyBody .flex02 {flex-direction: column;}
    #happyBody .flex02 >.span {width: 100%; max-width: 100% !important; min-width: 100% !important; margin-right: 0 !important; padding-bottom: 40px;}

    /* 1024일때 두칸씩 */
    #happyBody .flex02.twoSpaces {flex-wrap: wrap !important; flex-direction: row;}
    #happyBody .flex02.twoSpaces >.span {width: calc(50% - 10px) !important; margin-right: 20px !important; padding-bottom: 40px !important; min-width: auto !important;}
    #happyBody .flex02.twoSpaces >.span:nth-child(2n) {margin-right: 0 !important;}
    #happyBody .flex02.twoSpaces >.span:nth-last-child(-n+2) {padding-bottom: 0 !important;}


    #happyBody .epilogue {font-size: 18px; margin-top: 0; margin-bottom: 0;}

    .mw_100 {width: 100% !important; max-width: 100% !important;}

    /* 모바일에서만 센터 */
    #happyBody .text-center_mo {text-align: center !important;}


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

    .M_hide {display:none;}
}

@media only screen and (max-width:768px) {
    #happyBody {font-size:0.8rem;}

    #happyBody .topArea .textWrap .title {font-size: 32px;}
    #happyBody .topArea .textWrap .subtitle {font-size: 24px; padding-bottom: 10px;}
    #happyBody .topArea .textWrap .textBottom {padding: 15px 0;}

    #happyBody .contentsArea {padding-top: 100px;}
    #happyBody .contentsArea .title {font-size: 28px; padding-bottom: 25px;}

    #happyBody .tag01 {font-size: 14px; margin-bottom: 30px;}

    #happyBody .border {margin-bottom: 20px;}
    
	/* setting */
	.w768_show {display:block;}
	.w768_hide {display:none;}
}

@media only screen and (max-width:425px) {

    #happyBody .topArea .textWrap .title {font-size: 22px;}
    #happyBody .topArea .textWrap .subtitle {font-size: 17px;}
    #happyBody .topArea .textWrap .textBottom .category {font-size: 14px;}
    #happyBody .topArea .textWrap .textBottom .by span {font-size: 14px;}

    #happyBody .contentsArea {padding-top: 60px;}
    #happyBody .textbox {padding-bottom: 50px;}
    #happyBody .contentsArea .title {font-size: 22px; padding-bottom: 20px;}
    #happyBody .contentsArea .text {font-size: 16px; padding-bottom: 50px;}

    
    #happyBody .caption {font-size: 14px;}


	/* 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) {    

    #happyBody .topArea .textWrap .title {font-size: 20px;}
    #happyBody .topArea .textWrap .subtitle {font-size: 16px; padding-bottom: 5px;}

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

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