@charset "utf-8";
/* -----------------------------------------------
	* 메인 화면 스타일 정의
--------------------------------------------------
	- 최초 작성일 : 2021.08.15
	- 최초 작성자 : 아보카도
	- 최종 수정일 :
	- 최종 수정자 :
--------------------------------------------------*/

/****************************************************
	메인 레이아웃
    ****************************************************/
div { box-sizing: border-box; }

#body {opacity:0;}
#main_body {text-align:center;width: 100%;position: relative;max-width: 900px;}
#main_body::before {
    display: block;
    content: "";
    width: 318px;
    height: 772px;
    background: url(/img/cam_01.png) no-repeat center;
    position: absolute;
    left: -25%;
    background-size: contain;
    transform: translate(25%,50px);
    z-index: 99;
    top: 20px;
    filter: drop-shadow(5px 4px 6px rgba(0,0,0,.5));
    }
#main_body::after {
    display: block;
    content: "";
    width:322px;
    height: 772px;
    background: url(/img/cam_02.png) no-repeat center;
    background-size: contain;
    position: absolute;
    right: -25%;
    transform: translate(-25%,50px);
    z-index: 99;
    top: 20px;
    filter: drop-shadow(5px 4px 6px rgba(0,0,0,.5));
    }
.main_content {position: relative; width:100%; height:100%;}
header.logo { margin-bottom: 30px; }
header.logo p {color: rgba(255,255,255,.5);text-align: center;/* margin-top: 10px; */}
header.logo .tit_img {background:url(/img/title02.png) no-repeat center;background-blend-mode:overlay;-moz-background-blend-mode:overlay;width: 515px;}

.content01 {width:100%;height:100%;height:280px;border: 1px solid #333;overflow: hidden;margin-bottom: 15px;}
.content01 { background: url(https://madite.ivyro.net:443/data/banner/visual_1670851334.jpg) no-repeat center; }

.content02 {width:100%;height: 360px;display: flex;flex-wrap: wrap;text-align: right;}
.content02::after { display: block; content: ""; clear: both; }
.content02 > div {background: linear-gradient(180deg, white 70%, transparent);/* padding:20px; */border:1px solid #333;box-shadow: -10px -10px 10px rgba(0,0,0,.2);box-sizing: border-box;}

.content02 .right {margin-right:25px;width:51%;padding: 20px;}
.content02 .right .name_tit {position: relative;padding-top: 19px;}
.content02 .right .name_tit span {position: relative;z-index: 2;font-weight: 400;}
.content02 .right .name_tit::before {content: attr(data-en);position: absolute;top: 0px;right: 0;font-size: 54px;color: #ededed;font-weight: 400;} 
.content02 .right .txt_box {margin-top: 20px;}
.content02 .right .txt_box p {margin-bottom: 8px;}
.content02 .right .D-day { display: flex; flex-wrap: wrap; }
.content02 .right .D-day > div { width: 50%; position: relative; }
.content02 .right .ibmn { }
.content02 .right .ibmn img { position: relative; z-index: 1; }
.content02 .right .ibmn .ibmn_tit { position: absolute;top: 26px;left: 26px; z-index: 0; }

.content02 .right .madite { }
.content02 .right .madite img {position: relative;z-index: 1;top: 10px; }
.content02 .right .madite .madite_tit {position: absolute;top: 23px;left: 18px; }


.content02 .left {width: 46%; height: 100%;}
.content02 .left::after { display: block; content: ""; clear: both;}
.content02 .left .banner_zon header { float: right; width: 155px; height: 100%; }
.content02 .left .banner_zon header .f-title00 {
    writing-mode: vertical-rl;
    font-size: 77px;
    line-height: 1;
    /*클리핑*/
    background-clip: text;
    -webkit-background-clip: text;
    background-image: url(https://aramaker.ivyro.net/data/site/design_background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: rgba(0 0 0 / 0);
    }
.content02 .left .banner_box { height: 100%;float: left;width: 200px;margin: 40px;margin-right: 0; }
.content02 .left .mybanner { padding-bottom: 20px;border-bottom: 1px solid #ddd; font-size:12px }
.content02 .left .family_banner {overflow-y: auto;padding-top: 20px;height: 200px;}

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

    .content02 .right {margin-right:0;width: 100%; text-align: center;}
    .content02 .right .name_tit::before {right: 50%;transform: translate(50%);font-size: 69px;} 
    .content02 .right .D-day {width: 70%;justify-content: center;text-align: center;margin: 0 auto;}    

    .content02 .left {width: 100%;margin-top: 25px;}    
    .content02 .left .banner_zon header {float: right;width: 120px;height: 100%;}
    .content02 .left .banner_box {width: calc(100% - 200px);margin: 40px;text-align: center;}

}

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

    #main_body::before {left: -50%;}
    #main_body::after {right: -50%;}

}

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

    #main_body::before {left: -60%;}
    #main_body::after {right: -60%;}
    .content02 { height: auto; }
    .content02 .right .name_tit {font-size: 35px;} 
    .content02 .right .D-day > div { width: 100%; }

}

@media all and (max-width:490px) {
    #main_body::before {left: -65%;}
    #main_body::after {right: -65%;}

}

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

    #main_body::before {display: none;}
    #main_body::after {display: none;}

}