@import url('https://fonts.googleapis.com/css?family=Jua:400');

/* ------------------------------------------------------------------------------------------------------------
    section01.php
------------------------------------------------------------------------------------------------------------ */
.templateView { padding:0; margin:0; font-family: "jua", san-serif; }
.templateView .container { max-width:768px; padding:0; position: relative; }
.templateView section { padding:2rem 0; }
.titleBanner { display: flex; justify-content: center; align-items: center; width:100%; padding:3rem 0; }
.titleBanner img { max-width:50%; }


/* ------------------------------------------------------------------------------------------------------------
    a01.php
------------------------------------------------------------------------------------------------------------ */
.a01 { width:100%; background:#ffb600; }





/* ------------------------------------------------------------------------------------------------------------
    a02.php
------------------------------------------------------------------------------------------------------------ */
.a02 { width:100%; background:#d9d9d9; }




/* ------------------------------------------------------------------------------------------------------------
    a03.php
------------------------------------------------------------------------------------------------------------ */
.a03 { display: flex; justify-content: center; align-items: center; width:100%; height:200px; background:url("/CmsAdmin/template/images/banner01.png") center no-repeat; }
.a03 h3 { font-size: 2.4rem; }

/* ------------------------------------------------------------------------------------------------------------
    a04.php
------------------------------------------------------------------------------------------------------------ */
.a04 { width:100%; padding:3rem 0 1.5rem; background:#fefefe; color:#000; }

.ourArea { display: flex; justify-content: flex-start; align-items: center; flex-flow: column; padding:0 1.5rem; }
.ourArea .husband { display: flex; justify-content: flex-start; align-items: center; height:60px; }
.ourArea .husband a { width: 40px; padding: 5px; margin: 0 0 0 2rem; background: #ccdbe2; border-radius: 50%; }
.ourArea .wife { display: flex; justify-content: flex-start; align-items: center; height:60px; }
.ourArea .wife a { width: 40px; padding: 5px; margin: 0 0 0 2rem; background: #ccdbe2; border-radius: 50%; }


/* ------------------------------------------------------------------------------------------------------------
    a05.php
------------------------------------------------------------------------------------------------------------ */
.a05 { width:100%; padding:1.5rem 0 3.0rem; background:#fefefe; color:#000; }
.sectionTitle { display: flex; justify-content: center; align-items: center; height:40px; background:#c9cbe0; color:#fff; }
.parentArea { display: flex; justify-content: flex-start; align-items: center; padding:0 1.5rem; }
.parentArea .husband { display: flex; justify-content: flex-start; align-items: center; flex-flow: column; width:49%; }
.parentArea .husband a { width: 40px; padding: 5px; margin: 0 0 0 2rem; background: #ccdbe2; border-radius: 50%; }
.parentArea .husband a img { border-radius: 50%; }
.parentArea .husband .title { display: flex; justify-content: center; align-items: center; height:60px; }
.parentArea .husband .father { display: flex; justify-content: center; align-items: center; height:60px; }
.parentArea .husband .mother { display: flex; justify-content: center; align-items: center; height:60px; }
.parentArea .wife { display: flex; justify-content: flex-start; align-items: center; flex-flow: column; width:49%; margin:0 0 0 1%; }
.parentArea .wife a { width: 40px; padding: 5px; margin: 0 0 0 2rem; background: #ecd4d4; border-radius: 50%; }
.parentArea .wife a img { border-radius: 50%; }
.parentArea .wife .title { display: flex; justify-content: center; align-items: center; height:60px; }
.parentArea .wife .father { display: flex; justify-content: center; align-items: center; height:60px; }
.parentArea .wife .mother { display: flex; justify-content: center; align-items: center; height:60px; }

/* ------------------------------------------------------------------------------------------------------------
    a06.php
------------------------------------------------------------------------------------------------------------ */
.a06 { display: flex; justify-content: center; align-items:flex-start; width:100%; padding:2rem 2%; background:#fff; }

.customCalendar { width:100%; }
.customCalendar .calendarSetting { display: flex; justify-content: center; align-items: center; flex-flow: row; }
.customCalendar .calendarSetting .perArrow { content: ''; width:15px; height: 15px; margin:0 0 0 2rem; border-top: 2px solid #000; border-left: 2px solid #000; transform: rotate(315deg); cursor: pointer; }
.customCalendar .calendarSetting .month { display: flex; justify-content: center; align-items: center; width:50%; margin:0 auto; font-size:2.4rem; font-weight: 700; }
.customCalendar .calendarSetting .nextArrow { content: ''; width:15px; height: 15px; margin:0 2rem 0 0; border-top: 2px solid #000; border-left: 2px solid #000; transform: rotate(135deg); cursor: pointer; }
.customCalendar .days { display: flex; justify-content: center; align-items: center; width:100%; margin:2rem 0 0; background:#ede1e3; }
.customCalendar .daysItem { position: relative; display: flex; justify-content: center; align-items: center; width:calc(100% / 7); height:40px; color:#fff; user-select: none; }
.customCalendar .daysItem:after { position: absolute; top:0; right:0; content:''; width:1px; height:40px; background: #fff;  }
.customCalendar .daysItem:last-child:after { position: absolute; top:0; right:0; content:''; width:0px; height:40px; background: #fff;  }
.customCalendar .date { display: flex; justify-content: center; align-items: center; flex-flow: row wrap; }
.customCalendar .dateItem { display: flex; justify-content: center; align-items: center; width:calc(100% / 7); height:40px; color:#000; user-select: none; }
.customCalendar .dateItem:nth-child(7n) { color:#2196f3;}
.customCalendar .dateItem:nth-child(7n+1) { color:#ff0000;}
.customCalendar .dateItem .dateFocus { display: flex; justify-content: center; align-items: center; width:40px; height:40px; }
.customCalendar .dateItem .dateFocus:hover { color:#fff; background:#a181f8; border-radius: 50%; transition: all 0.5s; }
.customCalendar .dateItem.today .dateFocus { border:1px solid #a181f8; border-radius: 50%; }


/* ------------------------------------------------------------------------------------------------------------
    a07.php
------------------------------------------------------------------------------------------------------------ */
.a07 { display: flex; justify-content: center; align-items:center; flex-flow: column; width:100%; background:#fff; }

.simpleGallery { display: flex; justify-content: center; align-items: center; flex-flow: row wrap; width:100%; }
.simpleGallery .imgItem { width:calc(98% / 3); height:25rem; margin:0 1% 1% 0; }
.simpleGallery .imgItem:nth-child(3n) { margin:0 0 1% 0; }

@media screen and (max-width: 435px){
    .simpleGallery .imgItem { height:15rem; }
}

/* ------------------------------------------------------------------------------------------------------------
    a08.php
------------------------------------------------------------------------------------------------------------ */
.a08 { display: flex; justify-content: center; align-items:center; width:100%; height:500px; background:#fff; }

/* ------------------------------------------------------------------------------------------------------------
    a09.php
------------------------------------------------------------------------------------------------------------ */
.a09 { display: flex; justify-content: center; align-items:flex-start; flex-flow: column; width:100%; background:#edeef0; padding:0 0 !important; }

.a09 .titleBanner { background: #fff; }
.targetInfo { display: flex; justify-content: flex-start; align-items: center; width:100%; padding:2rem 2%; }
.targetInfo .areaL { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column; }
.targetInfo .areaL h3 { font-size: 2.4rem; font-weight: 700; color:#000; margin:0 0 5px; letter-spacing: -1px; }
.targetInfo .areaL h4 { font-size: 1.8rem; font-weight: 400; color:#000; margin:0 0 5px; letter-spacing: -1px; }
.targetInfo .areaL h5 { font-size: 1.6rem; font-weight: 400; color:#000; margin:0 0 5px; letter-spacing: -1px; }
.targetInfo .areaR { display: flex; justify-content:center; align-items:center; margin:0 0 0 auto; }
.targetInfo .areaR a { width:6.0rem; height: 6.0rem; padding:0.5rem; background: #a181f8; border-radius: 50%; }

#map { width:100%; height:400px; }
.markerInfo { width:150px;text-align:center;padding:6px 0; }

.guideIcon { display: flex; justify-content: flex-start; align-items: center; width:100%; padding:2rem 2%; }
.guideIcon a, .guideIcon img { width:8rem; height:8rem; border-radius: 50%; cursor: pointer; }
.guideIcon .tMap { display: flex; justify-content: center; align-items: center; width:calc(100% / 4); }
.guideIcon .tMap a { background:#000; }
.guideIcon .kakaoNavi { display: flex; justify-content: center; align-items: center; width:calc(100% / 4); }
.guideIcon .kakaoNavi a { background:#000; }
.guideIcon .naverMap { display: flex; justify-content: center; align-items: center; width:calc(100% / 4); }
.guideIcon .naverMap a { background:#000; }
.guideIcon .kakaoMap { display: flex; justify-content: center; align-items: center; width:calc(100% / 4); }
.guideIcon .kakaoMap a { background:#000; }

/* ------------------------------------------------------------------------------------------------------------
    a10.php
------------------------------------------------------------------------------------------------------------ */
.a10 { display: flex; justify-content: center; align-items:flex-start; flex-flow: column; width:100%; background:#fff; padding:0 0; }