.lastDepth>a, #mVisual .visualRoll .slider>div, #mVisual .vTxtArea .ii, #mVisual .slick-dots>li button, #mVisual .slick-dots>li button:before, #mVisual .vTxt .ii, #mBusiness .mBusiness .thumb>p, #mBusiness .mBusiness .btns>a, #mBusiness .mBusiness .btns>a:before, #mRollBanner p.line, #mRollBanner .mRollArea .ii, .mConts.mRollBanner p.line, .mConts.mRollBanner .mRollArea .ii, .mGrid .item>a .tit_bg, #mDepartment .thumb, #poursteadty_img .slick-dots>li button, #poursteadty_title img, .departmentPhoto .title>span, .greeting_img, .greeting_img:after, .greeting_img:before, .greeting_img dl, .greeting_img dl>dt, .greeting_img dl>dd{transition: all .3s ease-out; transform-origin: 50% 50%;} #mVisual .vTxt .ii{transition: all .5s ease-out; transform-origin: 50% 50%;} /*[s] All Style */ /* img.bg_thumb{background-repeat: no-repeat; background-position: center center; transform: matrix(1, 0, 0, 1, 0, 0); transition: all .3s ease-out; transform-origin: 50% 50%;} a:hover img.bg_thumb{transform: matrix(1.03, 0, 0, 1.03, 0, 0);} a:hover img.no{transform: matrix(1, 0, 0, 1, 0, 0);} */ .bg_thumb_box{max-width:100%; height:100%; background-color: #eaeaea; background-repeat: no-repeat; background-position: center center; display:block;} img.bg_thumb{/*max-width:100%; background-color: #f5f5f5; background-repeat: no-repeat; background-position: center center; display:block;*/ opacity: 0;} .tbLayout{width:100%; display:table;} .tbLayout.fixed{table-layout: fixed;} .tbLayout>*{display:table-cell; vertical-align: middle; box-sizing: border-box;} .tbLayout.vat>.td{vertical-align: top;} .tbLayout.full{width:1920px; margin-left:-960px; position: relative; left:50%;} .nTable{width:100%; border-top:2px solid #222; border-bottom:1px solid #b2b0a5;} .nTable>table{width:100%; margin-bottom:-1px; border-spacing:0; table-layout : fixed;} .nTable>table th, .nTable>table td{padding:20px; border-bottom:1px solid #ddd; font-size:16px; line-height:1.5; color:#646464; text-align:center; border-collapse:collapse; empty-cells:show; box-sizing: border-box; word-break:keep-all; word-wrap:break-word;} .nTable>table tr>*+*{border-left:1px solid #ddd;} .nTable>table>thead>tr>th{background-color: #f8f8f8; font-weight:500; font-size:17px; color:#363636; position: relative;} .nTable>table>thead>tr>th+th{} .tbMore{margin-top:50px; text-align: center;} .tbMore button{width:130px; background-color: #d24077; border:none; font-size:16px; line-height:60px; color: #fff; cursor: pointer;} .f0{font-size:0; line-height:0;} .lastDepth{width:100%; margin-bottom:60px; font-size:0; line-height:0; text-align: center; box-sizing: border-box; overflow:hidden;} .lastDepth>a{width:143px; height:50px; background-color: #fff; border:1px solid #dbdbdb; font-weight: 300; font-size:18px; line-height:1.2; color: #434343; display:inline-block; vertical-align: top; box-sizing: border-box; position: relative;} .lastDepth>a+a{margin-left:-1px;} .lastDepth>a>span{display:inline-block; position: relative; top:50%;-webkit-transform: translateY(-50%); transform: translateY(-50%);} .lastDepth .fa{background-color: #fff; font-weight: 300;} .lastDepth>a:hover, .lastDepth>a.active{border-color:#727272; font-weight: 500; z-index:2;} .lastDepthConts{font-size:0; line-height:0; overflow:hidden;} .lastDepth02{width:100%; margin-bottom:50px; font-size:0; line-height:0; text-align: center; box-sizing: border-box; overflow:hidden; display: flex; justify-content: space-between;} .lastDepth02>a{width:100%; height:60px; background-color: #fff; border:1px solid #d3d3d3; font-size:18px; line-height:1.2; color: #666; display:inline-block; vertical-align: top; box-sizing: border-box;} .lastDepth02>a+a{margin-left:-1px;} .lastDepth02>a>span{display:inline-block; position: relative; top:50%;-webkit-transform: translateY(-50%); transform: translateY(-50%);} .lastDepth02>a:hover, .lastDepth02>a.active{background-color: #f192a6; border-color:#f192a6; color: #fff; z-index:2;} .lastDepthConts02{font-size:0; line-height:0; display:none; overflow:hidden;} .nTit{font-weight: 300; font-size:28px; line-height:36px; color: #333; text-align: center;} .nTit>span{font-weight: 300;} .nTxt{font-size:18px; line-height:24px color: #737373;} .admGo{font-size:0; line-height:0; position: relative; z-index:7;} .admGo>a{padding:10px 20px; background-color:#f00; font-size:16px; line-height:1.2; color:#fff; display:inline-block; position:absolute; left:0; bottom:0;} .admGos{padding:5px 10px; background-color:#f00; font-size:14px; line-height:1.2; color:#fff; display:inline-block; position: absolute; right:0; top:0; z-index:7;} .f0{font-size:0; line-height:0;} .tac{text-align: center !important;} .mt60{margin-top:60px;} h4.bul{margin-bottom:40px; padding-left:29px; text-align: left; position: relative;} h4.bul:before{content: ""; width: 20px; height: 20px; background:url("../img/bul_h4.png") no-repeat left top; font-size:0; line-height:0; display: inline-block; position:absolute; left: 0; top:3px;} h4.bul>*{line-height:26px; display:inline-block; vertical-align: top;} h4.bul>strong{font-weight: bold; font-size:28px; color: #1b1b1b;} h4.bul>span{padding-left:15px; font-weight: 400; font-size:17px; color: #737373;} h4.bul.purple:before{background-color: #6f358b;} h4.icon{margin-bottom:20px; font-weight: 500; font-size:24px; line-height:1; color: #1b1b1b;} h4.icon.faq{padding:6px 0 0 35px; background:url("../img/bul_faq.png") no-repeat left top;} .fancybox-slide--iframe .fancybox-content { width : 800px !important; height : 600px; max-width : 80%; max-height : 80%; margin: 0; } #mVisual .vTxt .ii.tit{font-family: 'Titillium Web', sans-serif !important;} /*[e] All Style */ /*[s] Main Style */ .mScrolls{width:100%; font-size:0; line-height:0; text-align: center; position: fixed; left:0; bottom:40px; z-index:6; display:none; animation-duration: .7s; animation-iteration-count:infinite; animation-name: scrollDown; animation-timing-function:ease-in-out; animation-direction:alternate; } @keyframes scrollDown { from {bottom:40px;} to {bottom:20px;} } #mVisual{width:100%; font-size:0; line-height:0; position: relative; overflow:hidden; border-bottom:1px solid #dadada;} #mVisual .visualRoll{white-space: nowrap;} #mVisual .visualRoll .slider{width:100%; height:660px; background-repeat: no-repeat; background-position: center center; background-size: cover; font-size:0; line-height:0; position: relative; overflow:hidden; display:inline-block; vertical-align: top;} #mVisual .slick-dots{width:100%; text-align: center; position: absolute; left:0; bottom:40px; z-index:7;} #mVisual .slick-dots>li{width:auto !important; padding:0 !important; display:inline-block; vertical-align: top;} #mVisual .slick-dots>li+li{margin-left:10px;} #mVisual .slick-dots>li button{width:18px !important; height:18px; margin:0; padding:0; background-color:rgba(255,255,255,1.0); border:none; font-size:0; line-height:0; position: relative; cursor: pointer; border-radius:50%; overflow:hidden;} #mVisual .slick-dots>li.slick-active button{background-color:rgba(0,222,255,1);} #mVisual .slick-arrow{width:37px; height:70px; background-color: transparent; background-repeat: no-repeat; background-position: center center; border:none; font-size:0; line-height:0; position: absolute; top:50%; z-index:7; transform: translateY(-50%); cursor: pointer;} #mVisual .slick-prev{background-image: url("../img/main/btn_slick_prev.png"); left:70px;} #mVisual .slick-next{background-image: url("../img/main/btn_slick_next.png"); right:70px;} #mVisual .vTxt{width:100%; text-align: center; position: absolute; left:0; top:50%; transform: translateY(-50%); z-index:5;} #mVisual .vTxt .ii{top:50px; text-align: center; display:block; opacity: 0; position: relative;} #mVisual .vTxt .i01{-webkit-transition-delay: .7s; transition-delay: .7s;} #mVisual .vTxt .i02{-webkit-transition-delay: .75s; transition-delay: .75s;} #mVisual .vTxt .i03{-webkit-transition-delay: .8s; transition-delay: .8s;} #mVisual .vTxt .i04{-webkit-transition-delay: .85s; transition-delay: .85s;} #mVisual .vTxt .i05{-webkit-transition-delay: .9s; transition-delay: .9s;} #mVisual .vTxt .i06{-webkit-transition-delay: .95s; transition-delay: .95s;} #mVisual .vTxt .i07{-webkit-transition-delay: 1s; transition-delay: 1s;} #mVisual .vTxt .ii{color: #fff; letter-spacing: -0.03em; text-shadow:0 0 10px rgba(0,0,0,0.5);} #mVisual .vTxt .ii.tits{font-weight: 100; font-size:24px; line-height:1; letter-spacing: 0.86em;} #mVisual .vTxt .ii.tit{font-weight: 600; font-size:72px; line-height:1;} #mVisual .vTxt .ii.txt{font-weight: 300; font-size:34px; line-height:1;} #mVisual .vTxt .ii.txt>strong{font-weight: bold;} #mVisual .vTxt .ii.tits+.tit{padding-top:10px;} #mVisual .vTxt .ii.tit+.txt{padding-top:50px;} #mVisual .vTxt.active .ii{top:0px; opacity:0.9;} .mTitle{padding-bottom:50px; line-height:1; text-align: center; letter-spacing: -0.04em;} .mTitle>dt{font-size:36px; color: #1b1b1b;} .mTitle>dt>strong{font-weight: bold;} .mTitle>dd{padding-top:17px; font-weight: 500; font-size:20px; color: #999;} #mInfor{padding:100px 0; font-size:0; line-height:0;background:#fafafa url('../images/main/infor_bg.jpg') no-repeat top right;} #mInfor h1{text-align:center;color:#000;font-size:33px;font-weight:500;line-height:1.2;margin-bottom:30px;} #mInfor h3{text-align:center;font-size:20px;font-weight:400;line-height:1.2;letter-spacing:-0.05em;margin-bottom:60px;} #mInfor .inConts.box{display:flex;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;} #mInfor .thumb{overflow:hidden;} #mInfor .inConts.box > div{position:relative;} #mInfor .inConts.box > div > div{position:absolute;top:47%;left:30px;transform:translate(0,-50%);} #mInfor .inConts.box > div > div p{line-height:1.4;} #mInfor .inConts.box > div > div p.title{color:#fff;font-size:24px;} #mInfor .inConts.box > div > div p.title > strong{font-size:30px;} #mInfor .inConts.box > div > div p.desc{color:#fff;font-size:15px;} #mInfor .inConts.box > div > div a{display:inline-block;font-family:'Poppins', sans-serif;color:#fff;font-size:12px;line-height:1.2;padding:5px 35px 5px 15px;margin-top:20px;border:1px solid rgba(255,255,255,0.5);border-radius:30px;background:url('../images/main/btn_arrow.png') no-repeat center right 10px;} /*#mInfor .inConts.box > div:nth-child(n+4) > div a{display:none;}*/ /*#mInfor a:hover .thumb{box-shadow:-3px -3px 6px rgba(0,0,0,0.3);}*/ #mGallery{padding:100px 0; font-size:0; line-height:0;} #mGallery .mSubTit{color:#000;font-size:30px;line-height:1.2;letter-spacing:-0.05em;text-align:center;margin-bottom:60px;} #mGallery .mSubTit > span{font-size:33px;} #mGallery .mSubTit > span > strong{font-weight:500;} #mGallery .mSubTit > span > em{color:#035bb9;font-style:normal;font-weight:500;} #mGallery .list{position:relative;display:flex;justify-content:flex-start;align-items:flex-start;margin-left:-47px;} #mGallery .list>a{width:285px;margin-left:47px;} #mGallery .list .thumb{border:1px solid #b2b2b2;} #mGallery .list dl dt {color:#404040;font-size:18px;line-height:1.2;text-align:center;margin-top:10px;} #mGallery .list>.slick-list{} #mGallery .list>.slick-list>.slick-track>.slick-slide{margin-left:47px;} #mGallery .list>.slick-arrow{position:absolute;width:56px;height:56px;border:1px solid #d0d0d0;border-radius:50%;} #mGallery .list>.slick-arrow.slick-prev{top:50%;left:-30px;transform:translate(0,-100%);background:#fff url('../images/common/gallery_btn_prev.png') no-repeat center center;} #mGallery .list>.slick-arrow.slick-next{top:50%;right:-80px;transform:translate(0,-100%);background:#fff url('../images/common/gallery_btn_next.png') no-repeat center center;} #mGallery a.more{display:block;margin:70px auto 0;font-size:13px;line-height:1.2;text-align:center;width:260px;padding:15px 0;border:1px solid #ccc;} #mGuide{display:flex;} #mGuide > div{position:relative;} #mGuide figure{margin:0;padding:0;} #mGuide > div > div.cont{position:absolute;width:640px;padding:50px 100px;} #mGuide > div:first-child > div.cont{top:50%;right:0;transform:translate(0,-50%);text-align:center;} #mGuide > div:first-child > div.cont p.tit{color:#fff;font-size:30px;letter-spacing:-0.05em;} #mGuide > div:first-child > div.cont p.cont{color:#fff;font-size:20px;font-weight:300;letter-spacing:-0.05em;margin-top:15px;} #mGuide > div:first-child > div.cont a{display:inline-block;color:#fff;font-size:18px;font-weight:300;margin-top:30px;padding:5px 50px 7px;border:1px solid #fff;background-color:rgba(255,255,255,0.1);} #mGuide > div:last-child > div.cont{top:50%;left:0;transform:translate(0,-50%);} #mGuide > div:last-child > div.cont p.tit{color:#003b79;font-size:30px;letter-spacing:-0.05em;} #mGuide > div:last-child > div.cont p.cont{color:#2e649f;font-size:20px;font-weight:300;letter-spacing:-0.03em;margin-top:15px;} #mGuide > div:last-child > div.cont p.cont > strong{color:#134274;} #mBtm{padding:100px 0; font-size:0; line-height:0;} #mBtm .info{box-shadow:3px 3px 6px rgba(0,0,0,0.3);} #mBtm .mBoard{display: flex; justify-content: space-between;} #mBtm .list_box:first-child{width:750px; display:inline-block; vertical-align: top;} #mBtm .list_box .title{padding-bottom:35px; border-bottom:2px solid #666; position: relative;} #mBtm .list_box .title *{display:inline-block; vertical-align:bottom;} #mBtm .list_box .title strong{font-weight: 500; font-size:26px; line-height:1; color: #333; position: relative;} #mBtm .list_box .title span{margin-left:12px; font-weight: 400; font-size:20px; line-height:1; color: #666; position: relative;} #mBtm .list_box .title a.more{position: absolute; right:0; top:0px; color:#666; font-size:14px; line-height:1.2; border:1px solid #ddd; padding:5px 7px;} #mBtm .list_box .list{} #mBtm .list_box .list>li{position: relative; padding:5px 0 7px; border-bottom:1px solid #ddd;} #mBtm .list_box .list>li a{font-weight: 400; font-size:16px; line-height:38px; display:block; position: relative;} #mBtm .list_box .list>li .tit{max-width:80%; color: #626262; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #mBtm .list_box .list>li .txt{color: #626262; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #mBtm .list_box .list>li .day{color: #626262; font-size:14px; position: absolute; right:0; top:0; display:inline-block;} #mBtm .list_box .list>li.top{ padding:13px 0 14px;} #mBtm .list_box .list>li.top a{line-height:30px;} #mBtm .list_box .list>li.top .tit{max-width:100%; font-size:18px; font-weight: 500;} #mBtm .list_box .list>li.noPost{font-size:18px; line-height:250px; color: #000; text-align: center;} #mBtm .list_box.cscenter{width:480px;} #mBtm .list_box.cscenter .title{border-bottom:0;} #mBtm .list_box.cscenter .cont figure{margin:0;padding:0;} #mBtm .list_box.cscenter .cont .tel{font-family:'Poppins', sans-serif;color:#000;font-size:30px;font-weight:600;line-height:1.2;margin-top:20px;} #mBtm .list_box.cscenter .cont .infor{font-size:18px;line-height:1.2;letter-spacing:-0.03em;margin-top:10px;} #mBanner{background-color:#f8f8f8;border-top:1px solid #ececec;border-bottom:1px solid #ececec;padding:15px 0;} #mBanner .list{padding:0 80px 0 40px;} #mBanner .list>.slick-list>.slick-track>.slick-slide{margin:0 15px;} #mBanner .list>.slick-arrow{position:absolute;width:25px;height:28px;font-size:0;border:0;} #mBanner .list>.slick-arrow.slick-prev{top:50%;left:0;transform:translate(0,-50%);background:url('../images/common/familysite_btn_prev.jpg') no-repeat center center;} #mBanner .list>.slick-arrow.slick-next{top:50%;right:0;transform:translate(0,-50%);background:url('../images/common/familysite_btn_next.jpg') no-repeat center center;} #mBanner a.pause{position:absolute;top:50%;right:30px;transform:translate(0,-50%);width:25px;height:28px;background:url('../images/common/familysite_btn_pause.jpg') no-repeat center center;} #mBanner a.play{position:absolute;top:50%;right:30px;transform:translate(0,-50%);width:25px;height:28px;background:url('../images/common/familysite_btn_play.jpg') no-repeat center center;} #mBanner a.pause.none, #mBanner a.play.none{display:none;} #mMap{padding-top:100px;width:100%; font-size:0; line-height:0; overflow:hidden; position: relative; z-index:0;} #mMap h1{text-align:center;color:#000;font-size:33px;font-weight:500;line-height:1.2;margin-bottom:30px;} #mMap h3{text-align:center;font-size:20px;font-weight:400;line-height:1.2;letter-spacing:-0.05em;margin-bottom:60px;} #mMap .mMap{width:1920px !important; height:500px !important; margin-left:-960px !important; padding:0; font-size:0; line-height:0; position: relative !important; left:50% !important; overflow:hidden !important;} /*[e] Main Style */ /*[s] Sub Style */ .mapArea{width:100%; height:350px; padding:0 !important; border:none !important; overflow:hidden; position: relative;} .mapLay{font-size:0; line-height:0; position: absolute; left:0; top:0; z-index:3; display:inline-block; vertical-align: top;} .hGalleryArea{width:100%; margin-bottom:50px; font-size:0; line-height:0; position: relative; overflow:hidden;} .hGalleryArea .hGallery_roll{white-space: nowrap;} .hGalleryArea .hGallery_roll .slider{width:100%; height:720px; background-repeat: no-repeat; background-position: center center; background-size: cover; font-size:0; line-height:0; position: relative; overflow:hidden; display:inline-block; vertical-align: top;} .hGalleryArea .slick-dots{width:100%; text-align: center; position: absolute; left:0; bottom:40px; z-index:7;} .hGalleryArea .slick-dots>li{width:auto !important; padding:0 !important; display:inline-block; vertical-align: top;} .hGalleryArea .slick-dots>li+li{margin-left:10px;} .hGalleryArea .slick-dots>li button{width:60px !important; height:4px; margin:0; padding:0; background-color:rgba(255,255,255,0.5); border:none; font-size:0; line-height:0; position: relative; cursor: pointer; border-radius:99px; overflow:hidden;} .hGalleryArea .slick-dots>li.slick-active button{background-color:rgba(255,255,255,1);} .hGalleryArea .slick-arrow{width:34px; height:65px; background-color: transparent; background-repeat: no-repeat; background-position: center center; border:none; font-size:0; line-height:0; position: absolute; top:50%; z-index:7; transform: translateY(-50%); cursor: pointer;} .hGalleryArea .slick-prev{background-image: url("../img/main/btn_slick_prev_b.png"); left:70px;} .hGalleryArea .slick-next{background-image: url("../img/main/btn_slick_next_b.png"); right:70px;} .departmentPhoto{width:100%; font-size:0; line-height:0; position: relative;} .departmentPhoto .departmentPhoto_roll{white-space: nowrap;} .departmentPhoto .departmentPhoto_roll .slider{width:100%; height:762px; background-repeat: no-repeat; background-position: center center; background-size: cover; font-size:0; line-height:0; position: relative; overflow:hidden; display:inline-block; vertical-align: top;} .departmentPhoto .title{width:100%; padding:20px 30px; background-color:rgba(0,0,0,0.4); font-weight: bold; font-size:20px; line-height:1.4; color: #fff; text-align: left; position:absolute; left: 0; bottom:0px; display: block; z-index:2;} .departmentPhoto .title>span{display: inline-block; position: relative; top:30px; transition-delay: 0s; word-break:keep-all; word-wrap:break-word; opacity:0;} .departmentPhoto .slick-current .title>span{top:0px; opacity: 1; transition-delay: .6s;} .departmentPhoto .slick-arrow{width:34px; height:65px; background-color: transparent; background-repeat: no-repeat; background-position: center center; border:none; font-size:0; line-height:0; position: absolute; top:50%; z-index:7; transform: translateY(-50%); cursor: pointer;} .departmentPhoto .slick-prev{background-image: url("../img/main/btn_slick_prev_b.png"); left:-70px;} .departmentPhoto .slick-next{background-image: url("../img/main/btn_slick_next_b.png"); right:-70px;} .departmentPhoto .hGallery_roll .slider{width:100%; height:762px; background-repeat: no-repeat; background-position: center center; background-size: cover; font-size:0; line-height:0; position: relative; overflow:hidden; display:inline-block; vertical-align: top;} .promotionTube{margin-bottom:60px; border-bottom:1px solid #ddd;} .conImg{margin-bottom:100px; font-size:0; line-height:0; text-align: center; box-shadow:0px 0px 10px rgba(0,0,0,0.3);} .productArea{padding-bottom:120px; background:#f8f8f8 url("../img/product/bg_product.gif") repeat-x left top; font-size:0; line-height:0; position: relative;} .productArea:before{content:""; width:752px; height:61px; background:url("../img/product/txt_product.png") no-repeat left top; position: absolute; right:0; bottom:0;} .productArea .productTop{text-align: left;} .productArea .photoArea{width:400px; border:2px solid #ddd; font-size:0; line-height:0; position: relative; overflow:hidden; box-sizing:border-box; display:inline-block; vertical-align: bottom;} .productArea .photoArea .photoRoll{white-space: nowrap;} .productArea .photoArea .photoRoll .slider{width:100%; height:346px; background-color: #fff; background-repeat: no-repeat; background-position: center center; background-size: cover; font-size:0; line-height:0; position: relative; overflow:hidden; display:inline-block; vertical-align: top;} .productArea .photoArea .slick-dots{width:100%; text-align: center; position: absolute; left:0; bottom:15px; z-index:5;} .productArea .photoArea .slick-dots>li{width:auto !important; padding:0 !important; display:inline-block; vertical-align: top;} .productArea .photoArea .slick-dots>li+li{margin-left:10px;} .productArea .photoArea .slick-dots>li button{width:15px !important; height:15px; margin:0; padding:0; background-color:#c4c4c4 !important; border:none; font-size:0; line-height:0; position: relative; cursor: pointer; border-radius:50%;} .productArea .photoArea .slick-dots>li.slick-active button{background-color: #035ab6 !important;} .productArea .rightArea{max-width:862px; padding-left:85px; text-align: left; display:inline-block; vertical-align: bottom;} .productArea .rightArea .title{font-weight: 500; font-size:26px; line-height:1; color: #035ab6; letter-spacing: -0.05em;} .productArea .rightArea ul{margin-top:20px;} .productArea .rightArea ul>li{padding-left:14px; font-size:16px; line-height:1.5; color: #666; letter-spacing: -0.05em; position: relative; word-break:keep-all; word-wrap:break-word;} .productArea .rightArea ul>li:before{content:""; width:4px; height:4px; background-color: #035ab6; position: absolute; left:0; top:10px; border-radius:99px;} .productArea .rightArea ul>li+li{margin-top:6px;} .productArea .rightArea .btns{margin-top:30px;} .productArea .rightArea .btns>a{width:170px; height:40px; background-color: #035ab6; font-size:16px; line-height:38px; color: #fff; text-align: center; letter-spacing: -0.05em; display:inline-block;} .productArea .rightArea .btns .fa{text-decoration: underline; margin-right:5px;} .productArea .pattern_gray{margin-top:50px; padding:20px; background:url("../img/product/pattern_gray.gif") repeat left top; font-size:18px; line-height:1; color: #333; text-align: center; letter-spacing: -0.05em;} .contactTitle{padding:95px 0 15px; font-size:14px; line-height:20px; color: #666;} .contactTitle>span{color: #ff0d62;} .etc_clause{width:100%; margin:0 auto; padding:60px 80px 80px; background-color: #fdfdfd; border:1px solid #cecece; font-size:0; line-height:0; text-align: center; box-sizing:border-box; border-radius:10px; position: relative; overflow: visible !important;} .etc_clause:before, .etc_clause:after{content:""; position:absolute; z-index:-1; top:2%; bottom:0; left:10px; right:10px; -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); -moz-border-radius:100px / 10px; border-radius:100px / 10px;} .etc_clause:after{left:auto; right:10px; -webkit-transform:skew(8deg) rotate(3deg); -moz-transform:skew(8deg) rotate(3deg); -ms-transform:skew(8deg) rotate(3deg); -o-transform:skew(8deg) rotate(3deg); transform:skew(8deg) rotate(3deg);} .etc_clause .logo{margin:0;} .etc_clause .txt{padding:35px 0 35px; font-weight: 300; font-size:18px; line-height:1; color: #636363;} .etc_clause .txt>span{font-weight: 400; color: #1b1b1b;} .etc_clause.clauseArea.no .scroll{background-color: transparent; text-align: left;} .fancybox-slide--html{padding:50px !important;} .pops{background-color: #fff; font-size:0; line-height:0; display:none;} .pops.fancybox-content{padding:0; font-size:0; line-height:0;} .pops .fancybox-button.fancybox-close-small{width:70px; height:70px; padding:0; /*background:url("../img/btn_pops_clsoe.png") no-repeat center center;*/ font-size:0; line-height:0; color: #fff; opacity: 1; right:23px;} .pops .title{padding:22px 40px; background:url("../img/pattern_pops.gif") repeat left top; font-weight: 500; font-size:20px; line-height:1.3; color: #fff;} .pops .conts{padding:40px;} #passport{} @page {size:22.5cm 29.7cm; margin: 15px;} @media print{ #progressBar, #ribbonArea, #hd, #quickArea, #sVisual, #snb, #footer, #layerArea, .btnArea, .iconArea, .sharingLay{display:none !important;} #container_wr{width:100% !important; font-size:0; line-height:0;} #pageTop{padding:30px 0 70px;} .sub #container {min-height: auto; padding: 0px 0 0px;} } /*[e] Sub Style */ /*[s] Plugin Style */ /* Layer Style */ .layerArea .layerIn .layerBgIn{width:0px; height:0px; background-color: rgba(255,255,255,0.7); position:absolute; left:50%; top:50%; z-index:100; -webkit-transition: .5s; transition: .5s; transform-origin: 50% 50%;} .layerArea{width:0px; height:0px; background-color: rgba(0,0,0,0.7); position:fixed; left:50%; top:50%; z-index:99; overflow:hidden; overflow-y:auto; -webkit-transition: .5s; transition: .5s; transform-origin: 50% 50%;} .layerArea.one, .layerArea.two{width:100%; height:100%; left:0%; top:0%;} .layerArea.two .layerBgIn{width:100%; height:100%; left:0%; top:0%;} .layerArea .closeLy{width:100px; display:inline-block; position: fixed; right:0; top:0;} .layerArea .layerIn{width:100%; height:100%; display: table; position:relative;} .layerArea .layerIn .layerCell{width:100%; height:100%; padding:70px 0; display: table-cell; vertical-align:middle; position:relative; box-sizing: border-box;} .layerArea .layerIn .layerBox{margin:0 auto; background-color: #fff; font-size:0; line-height:0; display:none; position: relative; box-sizing: border-box; z-index:99;} .layerArea .layerIn .layerBox>.tit{padding:25px 25px 15px;} .layerArea .layerIn .layerBox>.tit>strong{font-size:16px; line-height:1; color:#00a9cc;} .layerArea .layerIn .layerBox .contLy{} /* Img Over Bg Style */ #photo{width:960px;margin:0 auto; position:relative; overflow:hidden;} #photo>li{width:150px; height:150px; margin:5px; float:left; display:inline; overflow:hidden; } #photo>li>a{width:100%; height:100%; position: relative; display:block; overflow:hidden;} #photo>li>a>img{width:100%; height:100%; display:block; border-radius:5px;} #photo>li>a>.bg_l{width:100%; height:100%; background-color:red; position: absolute; left:0; top:0; display:none; opacity:0.3; border-radius:5px;} /* Img Over Curtain Style */ .imgCurtain{width:960px; margin:0 auto; font-size:0; line-height:0; overflow:hidden;} .imgCurtain img{max-width:none;} .imgCurtain>li{margin:5px; display:inline-block; vertical-align: top;} .imgCurtain>li>a{background-color: #ddd; position: relative;} .imgCurtain>li>a>.img{position: absolute; left:0; top:0;} .imgCurtain>li>a>dl{padding:10px; font-size:12px; line-height:18px; color: #000;} .imgCurtain>li>a>dl>dt{padding-bottom:5px; font-size:14px;} .imgCurtain>li, .imgCurtain>li>a, .imgCurtain>li>a>.img, .imgCurtain>li>a>.img img{width:150px; height:150px; overflow:hidden;} .imgCurtain>li>a, .imgCurtain>li>a>.img img{display:block;} /* Notice One Line Style */ .mNoticeList{width:100%; height:60px; margin-top:25px; overflow:hidden; position: relative;} .mNoticeList>ul{width:100%; position: absolute; left:0; top:-60px;} .mNoticeList>ul>li{height:60px; position: relative;} .mNoticeList>ul>li>a{padding-left:73px; display:block; position: relative;} .mNoticeList .day{width:41px; padding-right:15px; border-right:1px solid #d5d1cc; font-weight: 600; font-size:12px; line-height:1; color: #b99764; text-align: center; position: absolute; left:0; top:0;} .mNoticeList .day>strong{font-weight: 700; font-size:32px; line-height:1; display:block;} .mNoticeList dl.list{font-size:16px; line-height:20px; color: #876e49; word-break:keep-all; word-wrap:break-word;} .mNoticeList dl.list>dt{padding-bottom:6px; font-weight: 600; font-size:12px; line-height:1; color: #b99764;} /*[e] Plugin Style */ /* transform: scale(1.1) 부분을 transform: scale(1.1) rotate(.001deg); 로 변경하면 부드럽게 처리되네요 display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: center; 맨 앞에 정렬 justify-content: flex-start; ​ 맨 끝에 정렬 justify-content: flex-end; 가운데 정렬 justify-content: center; 서로 같은 간격으로 박스들이 조정됨. justify-content: space-between;​ 컨텐츠 뿐만 아니라 그 주변도 같은 간격으로 조정됨. justify-content: space-around; ​ * 수직으로 적용 align-items 컨테이너의 꼭대기로 정렬 justify-content: flex-start ​ 컨테이너의 바닥으로 정렬 flex-end​ 가운데로 정렬 center 컨테이너의 시작 위치에 정렬 baseline​ 컨테이너에 맞도록 늘린다. stretch .list_ol_01 {counter-reset:item; margin-bottom:10px;} .list_ol_01 > li {position: relative; font-size: 16px; line-height: 1.75; margin-bottom:4px; color: #636363; padding-left:26px;} .list_ol_01 > li:last-child {margin-bottom: 0;} .list_ol_01 > li:before {counter-increment: item; content: counter(item); width: 18px; height: 18px; display: inline-block; background: #fff; border:1px solid #636363; color: #636363; border-radius: 50%; text-align: center; line-height:18px; font-size: 10px; position: absolute; top: 5px; left: 0; font-weight:400;} -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); filter:grayscale(100%) blur(0px); -webkit-filter:grayscale(100%) blur(0px); transition: all .5s linear; transition: all .5s ease-out; transform:rotate(180deg); -webkit-transition-timing-function:ease-in linear; transition-timing-function:ease-in linear; -webkit-transition-delay: .8s; transition-delay: .8s; :before{content: ""; width: 24px; height: 24px; background-color: #fff; border:1px solid #666; display: inline-block; position:absolute; left: 0; top:0px; box-sizing: border-box;} display: flex; justify-content: space-between; // 양쪽 끝 정렬 display: flex; justify-content: space-around; // 센터 정렬 display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; //한줄 감추기 display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; //두줄 감추기 active :first-child text-indent:-99999px; !important display:table; table-layout:fixed; display:table-row; display:table-cell; box-sizing:border-box; word-break:keep-all; word-wrap:break-word; border-radius:2px; */