/* ------------------------------------------------------------------------------------------------
    slider
-------------------------------------------------------------------------------------------------*/
.mainSlide { padding:0; margin:0; background:transparent; }

.slideArea { padding:0; margin:0; }
.slideArea .slick-slide { margin:0 0; }
.slideArea .slick-slide img.mobile { display:none; }

@media screen and (max-width: 768px){
    .slideArea .slick-slide img.nonMobile { display:none; }
    .slideArea .slick-slide img.mobile { display:block; }
}

.slideArea .slick-slide img { border-radius: 20px; }
.slideArea .slick-active { position: relative; transform: scale(1.05); transition: all 1s; }
.slideArea .slick-prev { left: 2.5%; z-index: 9000; }
.slideArea .slick-next { right: 2.5%; z-index: 9000; }
.slideArea .slick-prev:before { display: block; content: ""; width: 20px; height: 20px; border-bottom: 3px solid #ffffff; border-right: 3px solid #ffffff; pointer-events: none; -webkit-transform-origin: 66% 66%; transform-origin: 66% 66%; -ms-transform: rotate(135deg); transform: rotate(135deg); -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out;  }
.slideArea .slick-next:before { display: block; content: ""; width: 20px; height: 20px; border-bottom: 3px solid #ffffff; border-right: 3px solid #ffffff; pointer-events: none; -webkit-transform-origin: 66% 66%; transform-origin: 66% 66%; -ms-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out;  }
.slideArea .slick-prev, .slideArea .slick-next { font-size: 0; line-height: 0; position: absolute; top:45%; display: block; width:4.0rem; height:4.0rem; padding: 0; -ms-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; color: transparent; border: none; outline: none; background: transparent; }

.mainSlide .slick-dotted.slick-slider { margin-bottom: 0px; }
.slideArea .slick-dots { position: absolute; bottom:1rem; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center; }
.slideArea .slick-dots li { position: relative; display: inline-block; width: 20px; height: 20px; padding: 0; margin: 0 5px; cursor: pointer; }
.slideArea .slick-dots li button { font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent; }
.slideArea .slick-dots li button:hover,
.slideArea .slick-dots li button:focus { outline: none; }
.slideArea .slick-dots li button:hover:before,
.slideArea .slick-dots li button:focus:before { opacity: 1; }
.slideArea .slick-dots li button:before { font-size: 3rem; line-height: 20px; position: absolute; top: 0; left: 0; width: 20px; height: 20px; content: '•'; text-align: center; opacity: .25; color: black; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.slideArea .slick-dots li.slick-active button:before { opacity: .75; color:#212121; }

/* ------------------------------------------------------------------------------------------------
    mainList
-------------------------------------------------------------------------------------------------*/
.plist { background: var(--mainBg); }
.plist .title { display: flex; justify-content: flex-start; align-items: center; margin:2rem 0; }
.plist .title h1 { font-family: var(--fontNanum); font-weight: 700; }
.plist .title h4 { font-family: var(--fontJua); }
.plist a { margin:0 0 0 auto; }
.templates { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: row wrap; width:100%; list-style: none; padding:0; }
.templates li { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column; position: relative; width:calc((100% - 3%) / 4); margin:0 1% 1% 0; background: var(--mainBg); }
.templates li:nth-child(4n) { margin:0 0 1% 0; }
.templates .themeInPhone { position:relative; display: flex; justify-content: center; align-items: flex-start; width:100%; height:580px; }
.templates .themeInPhone img.case { height:100%; }
.templates .themeInPhone .themeArea { position:absolute; top:0; left:0; width:100%; height:100%; padding:1rem 1rem 0; }
.templates .themeInPhone .themeArea .content { width:100%; height:98%; border-radius: 2.6rem; overflow-y:hidden; }
.templates .themeInPhone .themeArea .content:hover { overflow-y: scroll; }
.templates .themeInPhone .themeArea img { border-radius:2.6rem; }
.templates .templateOption { display: flex; justify-content: center; align-items: center; flex-flow: column; width:100%; }
.templates .templateOption h5 { font-size: 1.6rem; margin:.5rem 0 0; }

.plist.baby { background: var(--mainBg); }
.plist.wedding { background: var(--subBg); }
.plist.wedding .templates li { background: var(--subBg); }

@media screen and (max-width:1200px){
    .themeInPhone { height:485px; }
}
@media screen and (max-width:993px){
    .templates li { width:calc((100% - 2%) / 3); }
    .templates li:nth-child(4n) { margin:0 1% 1% 0; }
    .templates li:nth-child(3n) { margin:0 0 1% 0; }
    .templates .themeInPhone { height:460px; }
}
@media screen and (max-width:768px){
    .templates li { width:calc((100% - 2%) / 2); margin:0 2% 2% 0; }
    .templates li:nth-child(4n) { margin:0 2% 2% 0; }
    .templates li:nth-child(3n) { margin:0 2% 2% 0; }
    .templates li:nth-child(2n) { margin:0 0 2% 0; }
    .templates .themeInPhone { height:460px; }
}
@media screen and (max-width:501px){
    .templates .themeInPhone { height:400px; }
}
@media screen and (max-width:414px){
    .templates .themeInPhone { height:350px; }
}


/* ------------------------------------------------------------------------------------------------
    detailInfo
-------------------------------------------------------------------------------------------------*/
.detailInfo { background: var(--mainBg); padding:10.0rem 0 0; }
.detailHead { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: row wrap; width:100%; padding:10.0rem 0; background: var(--mainBg); }

.detailBox { display: flex; justify-content: center; align-items: center; width:50%; padding:0 12.5%; }
.detailBox .themeInPhone { position:relative; display: flex; justify-content: center; align-items: flex-start; width:100%; height:580px; }
.detailBox .themeInPhone img.case { height:100%; }
.detailBox .themeInPhone .themeArea { position:absolute; top:0; left:0; width:100%; height:100%; padding:1rem 1rem 0; }
.detailBox .themeInPhone .themeArea .content { width:100%; height:98%; border-radius: 2.6rem; overflow-y:hidden; }
.detailBox .themeInPhone .themeArea .content:hover { overflow-y: scroll; }
.detailBox .themeInPhone .themeArea img { border-radius:2.6rem; }
.detailTxt { display: flex; justify-content: flex-start; align-items: center; flex-flow: column; width:50%; margin:0 0 0 auto; }
.detailTxt .infoLine { display: flex; justify-content: flex-start; align-items: center; width:100%; height: 40px; border-bottom: 1px solid #c4c4c4; font-size: 1.6rem; }
.detailTxt .infoLine:first-child { border-bottom: 2px solid #c4c4c4; height:50px; font-size: 3.0rem; }
.detailTxt .infoLine:nth-child(2) { height:auto; margin:1rem 0 0; }
.detailTxt .infoLine .title { display: flex; justify-content: center; align-items: center; width:15%; }
.detailTxt .infoLine .content { display: flex; justify-content:flex-start; align-items: center; margin:0 0 0 3rem; }

.detailTxt .infoLine ul { padding:0 0 0 15px; }
.detailTxt .infoLine ul li { font-size: 1.6rem; height:30px; }
.detailTxt .btnArea { display: flex; justify-content: flex-start; align-items: center; width:50%; margin:3rem 0 0 0; }
.detailTxt .btnArea a { width:100%; font-size: 1.6rem; }

@media screen and (max-width:1200px){
    .detailHead { justify-content:center; }
    .detailBox { width:30%; padding:0 2%; }
    .detailBox .themeInPhone { height:470px; }
    .detailTxt { margin:0 0 0 1rem; }
}
@media screen and (max-width:993px){
    .detailBox { width:36%; padding:0 2%; }
    .detailBox .themeInPhone { height:460px; }
}
@media screen and (max-width:768px){
    .detailBox { width:43%; padding:0 1%; }
    .detailBox .themeInPhone { height:400px; }
}
@media screen and (max-width:501px){
    .detailHead { padding:3rem 0; }
    .detailBox { width:100%; padding:0 22%; }
    .detailBox .themeInPhone { height:430px; }
    .detailTxt { width:100%; }
}
@media screen and (max-width:414px){
    .detailBox .themeInPhone { height:350px; }
}

/* ------------------------------------------------------------------------------------------------------------
    detail View
------------------------------------------------------------------------------------------------------------ */
.detailView { background: var(--mainBg); padding:0 0 5rem; }

/* ------------------------------------------------------------------------------------------------------------
    Tab
------------------------------------------------------------------------------------------------------------ */
.tabSample { display:flex; flex-wrap:wrap; justify-content:space-between; width:100%; padding:1rem; }
.tabItem { flex:1 1 50%; max-width:48%; margin:6rem 0 0; padding:0 0 1.0rem; border-bottom:1px solid #c4c4c4; }

.tabArea { width:100%; }
.tabArea .tabLinks { display:flex; list-style:none; margin:0 0; padding:0 0; border-bottom:1px solid #a181f8; font-size:1.2rem; }
.tabArea .tabLinks > li { display: flex; justify-content: flex-start; align-items: center;}
.tabArea .tabLinks > li > a { height:40px; padding:1.0rem; margin:0 0; border:1px solid #a181f8; border-bottom-color:transparent; border-radius:2px 2px 0 0; font-size:1.6rem; color:var(--tabTxt); }
.tabArea .tabLinks > li > a:hover { border-color:#a181f8 #a181f8 transparent #a181f8; }
.tabArea .tabLinks > li.active > a,
.tabArea .tabLinks > li.active > a:hover,
.tabArea .tabLinks > li.active > a:focus { color:var(--activeTabTxt); font-weight:bold; background:#a181f8; border:1px solid #a181f8; border-bottom-color:transparent; }
.tabArea .tabContent { width:100%; color:#545454; font-size:1.2rem; }
.tabArea .tabContent > .tabPane { display:none; }
.tabArea .tabContent > .tabPane.active { display:block; padding:1.5rem; background-color:var(--contentBg); }
.tabArea .tabContent > .active { display:block; }

.tabJustified .tabLinks { display:flex; justify-content:space-between; }
.tabJustified .tabLinks > li { width:calc(100% /3); }
.tabJustified .tabLinks > li > a { width:100%; }