@charset "utf-8";


.prodArea{display:inline-block; width:100%; padding:60px 0 0;}
.wide-in{position:relative; width:1200px; margin:0 auto;}
.prodArea .wide-in{/* width:1180px; */}
.prodArea h3,
.main-ani h4,
.main-event h4{padding:0 0 19px; color:#201f28; font-weight:600; font-size:40px; text-align:center; letter-spacing:-1px;}
.prodArea h3{padding-bottom:53px;}
.prodArea .clrfix > div{float:left; height:365px; padding:0; box-sizing:border-box;} /* 200319 수정 */
.prodArea h4,
.prodArea h4 span{padding:0; color:#1a1a1a; font-weight:700; font-size:24px;}
.prodArea .prodList.active h4,
.prodArea .prodList.active h4 span{/* font-weight:700; */}
.prodArea h4 em{font-weight:700;}
.prodArea h4{display:block; padding:20px 0 17px 22px;} /* 200319 수정 */
.prodDisc > input,
.prodList > input{position:absolute; right:18px; top:20px; width:30px; height:30px; background:url(../images/btn_box_close.png) no-repeat 50%; text-indent:-2000px;} /* 200319 수정 */
.prodArea .disc{display:inline-block; width:101%;}
.prodArea .disc button{float:left; width:calc(100% / 4); height:145px; margin:0 0 -1px -1px; background:#f6f8ff; color:#7a7f93; font-size:23px; border:1px solid #d5d9e7;  box-sizing:border-box; outline:none; position: relative;} /* 200319 수정*/
/* .prodArea .prodDisc .block,
.prodArea .prodJoin .block{display:none;} */
.prodArea .prodDisc .disc{display:block; width:160px; margin:0 auto; padding:60px 0 40px; overflow:hidden;} /* 200319 수정 */
.prodArea.on .prodDisc .disc{width:500px;}
.prodArea .prodDisc .disc button{display:none; width:100%; height:70px; background:#fff; color:#516cdd; font-size:23px; border:2px solid #d5d9e7; pointer-events:none; cursor:default;}
.prodArea .prodDisc .disc button strong{display:inline; font-family:'Roboto', sans-serif; font-size:38px; font-weight:700; vertical-align:-3px;}
.prodArea.on .prodDisc .disc button{width:115px; margin:0 5px; pointer-events:auto; cursor:pointer;}
.prodArea .disc button.on{display:block; background:#516cdd; color:#FFD900; border-color:#516cdd;}
.prodArea .prodDisc .disc button.on:hover, .prodArea .prodDisc .disc button.on:hover * {color:#516cdd}
.prodArea .disc button.on strong {color:#fff;}
.prodArea .prodDisc .disc button.on strong {color:#fff;}
.prodArea .prodDisc .disc button.on {color:#fff;}
.prodArea.on .disc button{display:block; width:calc(100% / 4 - 10px);}
.prodArea .disc button:hover{position:relative; border:2px solid #516cdd; z-index:2;background:#fff;}
.prodArea .disc button strong{display:block; margin-top:4px;  font-size:18px;font-weight:400;}
.prodArea .disc button em{display:inline-block; margin:12px 2px 0px 0px; font-family:'Roboto', sans-serif; font-size:38px; font-weight:500; text-align:center;}/* 200319 수정 */
.prodArea .disc button em + .comma_add2 {font-size: 14px; font-weight: bold; position: absolute; width: 100%; left: 0; bottom: 12px;}
.prodArea li{padding:3px 0 0; color:#666; font-size:18px;}
.prodArea li:before{content:''; display:inline-block; width:3px; height:3px; margin:0 5px 0 0; background:#808080; vertical-align:middle; border-radius:50%;}
.prodArea .prodView{display:none;}
.prodJoin h4{padding:30px 0 12px; color:#fff; font-size:18px; font-weight:400; text-align:center;} /* 200319 수정 */
.prodJoin .box{width:245px; padding:0 0 4px; margin:0 auto; color:#FFD900;  font-size:38px; text-align:center; border-bottom:1px solid #76a8ef;} /* 200319 수정 */
.prodJoin .box > strong{display:block; padding:0 0 16px; color:#fff; font-weight:500; font-size:24px;} /* 200319 수정 */
.prodJoin .box > em{font-family:'RobotoB', sans-serif; font-size:64px;font-weight:700;} /* 200319 수정 */
.prodJoin .box ul{padding:5px 0 10px;}
/* .prodJoin .disc{margin:0;} */
.prodJoin .under{padding:18px 0 0; text-align:center;}
.prodJoin .under span{color:#FFD900; font-size:28px;} /* 200319 수정 */
.prodJoin .under span:after{content:''; display:block; padding:5px 0; color:#fff; font-size:13px;} /* 200319 수정 */
.prodJoin .under span strong{padding:0 0 0 10px; color:#FFD900; font-family: 'Roboto', sans-serif; font-size:36px; font-weight:500; vertical-align:-3px;} /* 200319 수정 */
/* .prodJoin .under p{padding:5px 0 25px; color:#fff; font-size:13px; text-align:center;}
.prodJoin .under p:before{content:'※ ';} */
.prodJoin .under input{display:block; width:262px; padding:12px 0 12px; margin:1px auto 0; background:#1a1a1a; color:#fff;  font-size:24px; letter-spacing:-1px; text-align:center; border:0; border-radius:8px; box-shadow:0px 15px 20px 0px rgba(41, 95, 172, 0.3);}

.prodArea.on .prodList .disc{display:none;}
.prodArea .prodList .disc button.on{background:#516cdd url(../images/cloud2.png) no-repeat 100%;}
.prodArea.on .prodList .view.on{display:block !important;}
.prodArea.on .prodList .name{width:208px; height:169px; margin:50px auto 15px; color:#FFD900; background:#516cdd url(../images/cloud2.png) no-repeat 100%; font-size:23px; text-align:center;}/* 200319 수정 */
.prodArea.on .prodList .name strong{display:block; padding:30px 0 20px;  font-size:18px;}/* 200319 수정 */
.prodArea.on .prodList .name em{font-family:'Roboto', sans-serif; font-size:38px; font-weight:700; text-align:center;}/* 200319 수정 */
.prodArea.on .prodList .view ul{/* position:absolute; left:50%; top:30px; */}
.prodArea.on .prodList .view strong{font-weight:500;color:#fff;}
.prodArea.on .prodList .view .under{margin:10px 0 0; padding:0 0 0 20px; border-top:1px solid #ccc;}
.prodArea.on .prodList .view .under strong{display:block; padding:10px 0;}
.prodArea.on .prodList .view .under .inptxt{width:60px;}
.prodArea.on .prodList .view .under .select-cust{width:60px;}
.prodArea .clrfix > div.prodList{position:relative; width:calc(100% - 613px); border:5px solid #516cdd; overflow:hidden;background:#fff;transition:all 200ms; /* box-shadow:4px 8px 15px 0px rgba(74,74,74,0.3); */}
.prodArea .clrfix > div.prodDisc{position:relative; width:241px; border:4px solid #9CA7D5; border-width:4px 0;overflow:hidden;background:#fff;transition:all 200ms;}
.prodArea .clrfix > div.prodJoin{width:372px; background:#516cdd;}
.prodArea.on .clrfix > div.prodList{width:241px; border-color:#9CA7D5; border-width:4px 0 4px 4px;background:#fff;}
.prodArea.on .clrfix > div.prodDisc{width:calc(100% - 613px); border:4px solid #516cdd;}
.prodArea.on .clrfix > div.prodList > input,
.prodArea .prodDisc > input{background-image:url(../images/btn_box_open.png);}

.prodArea.on .prodDisc .chk + p{display:block; padding:20px 0 0;}
.prodArea.on .prodDisc .term .under{margin:20px 0 0; border-top:1px solid #9c9c9c;}
.prodArea.on .prodDisc .term .under span{display:inline;}
.prodArea.on .prodDisc .chk input{display:inline-block; pointer-events:auto; cursor:pointer;}
.prodArea.on .prodDisc > input{background:url(../images/btn_box_close.png) no-repeat 50%;}
.prodArea .prodView{display:none;}
.prodArea.on .prodView{display:block;}

.prodArea h3 strong{color:#201f28;}
.prodArea.on h4 span{display:none;}
.prodArea.on .prodList h4,
.prodArea .prodDisc h4{color:#516cdd;font-weight:700;}
.prodArea .prodDisc h4{padding-top:20px;} /* 200319 수정 */
.prodArea .prodList h4,
.prodArea.on .prodDisc h4{color:#1a1a1a;font-weight:700;background:#fff;}
.prodArea .prodDisc h4 span{display:none;}
.prodArea.on .prodDisc h4 span{display:inline;}
.prodArea.on .prodDisc.active h4{font-weight:700;}
.prodArea ul{display:table; width:auto; margin:0 auto;}
.prodArea li{display:table-row; width:100%; color:#343743; line-height:1.5; overflow:hidden;}
.prodArea .prodList li{font-size:16px;}
.prodArea .prodDisc li:before{display:none;}
.prodArea .prodDisc li span,
.prodArea .prodDisc li em,
.prodArea .prodDisc li strong{color:#516cdd; font-size:18px;}
.prodArea .prodDisc li strong strong{}
.prodArea .prodDisc li strong{padding:0 2px 0 0;}
.prodArea .prodDisc li em{padding:0 0 0 1px;}
.prodArea .prodDisc li span{display:none; padding:0 4px 0 0;}
.prodArea .prodDisc ul.first{opacity:0;}
.prodArea.on .prodDisc ul.first{opacity:1;}
.prodArea .prodDisc li strong em{float:left; padding:0 5px 0 0; }
.prodArea.on .prodDisc li:before{display:inline-block;}
.prodArea.on .prodDisc li strong em{float:none; padding:0; font-weight:600;}
.prodArea.on .prodDisc li span{display:inline-block;}
.opacity{opacity:0;}