@font-face {font-family: 'S-CoreDream-5Medium';src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff') format('woff');font-weight: normal;font-style: normal;} .ir{font-size:0;overflow:hidden} .ir-main{background: url(/js/02_tour/2020/uiTaste/images/common/ir.png) no-repeat;} html,body{height:auto;min-height:100%;} html{overflow-x:hidden} #body_layout{position:relative;/* min-height: 100%; */height: auto;min-height: 100%;} #body_layout #logo{position:absolute;top:39px;left:39px;width:126px;height:64px;z-index:99} #body_layout #logo a{display:block;width:100%;height:100%;font-size:0;background-position:0 0 } #body_layout #close{position:absolute;top:39px;right:39px;width: 36px;height: 36px;z-index:99;} #body_layout #close a{display:block;width:100%;height:100%;background-position: -289px -1px;} #body_layout .copyright{/* position:absolute; *//* bottom: 30px; *//* left:0; */margin-top: -170px;width:100%;text-align:center;color:rgba(255,255,255,0.3);font-size: 18px;letter-spacing: 1px;} html.runing_ui_taste{background-color:#3375be} html.runing_ui_fin{background-color:#11365e} html.runing_ui_fin #body_layout .copyright{margin-top: 50px;padding-bottom: 50px;width:100%;text-align:center;color:rgba(255,255,255,0.3);font-size: 18px;letter-spacing: 1px;} html.runing_ui_taste #parseArea{display:none;opacity:0} html.runing_ui_taste #uiTaste{display:flex;opacity:1;} html.runing_ui_fin #parseArea{display:block;opacity:1} html.runing_ui_fin #uiTaste{display:none;opacity:0} html.runing_ui_fin #parseArea, html.runing_ui_taste #uiTaste{min-height: 1090px;} html.runing_ui_taste #uiTaste{padding-top:170px;} html.runing_ui_taste .btitle{position:absolute;top:70px;left:50%;transform:translate(-50%,0);width: 351px;height: 171px;z-index: 999;font-size: 0;background: url(/js/02_tour/2020/uiTaste/images/common/tit.png) no-repeat;} html.runing_ui_fin .btitle{display:none;} #uiTaste{position:relative;width:100%;max-width: 1240px;margin: 0 auto;flex-wrap: wrap;text-align:center} #uiTaste h2 small{display:block;color:#000} #uiTaste .uiTaste-checker li{display: block;/* margin:0 20px; */} #uiTaste .uiTaste-checker li button{display:block;width:100%;text-align:left;} #uiTaste .uiTaste-checker li button span{display:block;padding:10px 5px;padding-left: 36px;color:#666;border-bottom: 1px dashed #ddd;} #uiTaste .uiTaste-group{z-index:10;flex: 0 1 33.333%;} #uiTaste .uiTaste-group .inner{padding-top:180px;vertical-align:middle;background:no-repeat 50% 0} #uiTaste .uiTaste-group .inner .uiTaste-img{display:block;margin:0 auto;width:250px;height:250px;position:relative} #uiTaste #uiTasteStep01 .inner .uiTaste-img #img{background-image:url(../images/01/thumb_01.jpg);background-position:center} #uiTaste #uiTasteStep01 .inner .uiTaste-img #img.S1{background-image:url(../images/01/thumb_01.jpg);background-position:center} #uiTaste #uiTasteStep01 .inner .uiTaste-img #img.S2{background-image:url(../images/01/thumb_02.jpg);background-position:center} #uiTaste #uiTasteStep01 .inner .uiTaste-img #img.S3{background-image:url(../images/01/thumb_03.jpg);background-position:center} #uiTaste #uiTasteStep01 .inner .uiTaste-img #img.S4{background-image:url(../images/01/thumb_04.jpg);background-position:center} #uiTaste #uiTasteStep02 .inner .uiTaste-img #img{background-image:url(../images/02/thumb_01.jpg);background-position:center} #uiTaste #uiTasteStep02 .inner .uiTaste-img #img.W1{background-image:url(../images/02/thumb_01.jpg);background-position:center} #uiTaste #uiTasteStep02 .inner .uiTaste-img #img.W2{background-image:url(../images/02/thumb_02.jpg);background-position:center} #uiTaste #uiTasteStep02 .inner .uiTaste-img #img.W3{background-image:url(../images/02/thumb_03.jpg);background-position:center} #uiTaste #uiTasteStep02 .inner .uiTaste-img #img.W4{background-image:url(../images/02/thumb_04.jpg);background-position:center} #uiTaste #uiTasteStep02 .inner .uiTaste-img #img.W5{background-image:url(../images/02/thumb_05.jpg);background-position:center} #uiTaste #uiTasteStep03 .inner .uiTaste-img #img{background-image:url(../images/03/thumb_04.jpg);background-position:center} #uiTaste #uiTasteStep03 .inner .uiTaste-img #img.T1{background-image:url(../images/03/thumb_01.jpg);background-position:center} #uiTaste #uiTasteStep03 .inner .uiTaste-img #img.T2{background-image:url(../images/03/thumb_02.jpg);background-position:center} #uiTaste #uiTasteStep03 .inner .uiTaste-img #img.T3{background-image:url(../images/03/thumb_03.jpg);background-position:center} #uiTaste #uiTasteStep03 .inner .uiTaste-img #img.T4{background-image:url(../images/03/thumb_04.jpg);background-position:center} #uiTaste #uiTasteStep03 .inner .uiTaste-img #img.T5{background-image:url(../images/03/thumb_05.jpg);background-position:center} #uiTaste .uiTaste-group .inner .uiTaste-img #img{display:block;position:relative;width:100%;height:100%;border-radius:50%;background-size: cover;overflow:hidden;transition: background 0.4s linear;} #uiTaste .uiTaste-group .inner .uiTaste-img .over-view{display:none;z-index:1;position:relative;transition: all 0.4s linear;} #uiTaste .uiTaste-group .inner .uiTaste-img .over-view.dot {overflow: hidden;position: absolute;top: -13px;left: -13px;width: 230px;height: 230px;background-color: rgba(0,0,0,0.4);border-radius: 50%;z-index:-1;} #uiTaste .uiTaste-group .inner .uiTaste-img .over-view.dot:before {content:""; position:absolute; width:20px; height:20px; top:50%; left:50%; -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%); border-radius: 50%;background-color: #ffcf24;transition:all 0.1s;-webkit-transition:all 0.1s;-moz-transition:all 0.1s;} #uiTaste .uiTaste-group .inner .uiTaste-img .over-view.dot .hover {position:absolute; width:0; height:0; top:50%; left:50%; -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%); background-color:#fff; border-radius: 20px;transition:all 0.1s;-webkit-transition:all 0.1s;-moz-transition:all 0.1s;} #uiTaste .uiTaste-group .inner .uiTaste-img.ov .dot:before {width:240px; height:240px;} #uiTaste .uiTaste-group .inner .uiTaste-img.ov .mask{display: block;position: absolute;top: 50%;left: 50%;width: 76px;border-radius: 50%;height: 76px;background: rgba(0,0,0,0.7) url(../images/common/check.png) no-repeat center;transform: translate(-50%, -50%);transition: all 0.4s linear;} #uiTaste .uiTaste-group .inner .uiTaste-img em{display:inline-block;position:absolute;top: 10px;left: 10px;padding: 10px 0 0 10px;width:67px;height:67px;background-color: #3375be;border-radius: 50%;/* */font-size: 0;overflow: hidden;} #uiTaste .uiTaste-group .inner .uiTaste-img em:before{content:'';display:block;/* border: 1px solid; */width: 40px;height:43px;background-image:url(/js/02_tour/2020/uiTaste/images/common/ir.png);} #uiTaste #uiTasteStep01 .inner .uiTaste-img em:before{background-position: 5px -116px;} #uiTaste #uiTasteStep02 .inner .uiTaste-img em:before{background-position: -40px -116px;} #uiTaste #uiTasteStep03 .inner .uiTaste-img em:before{background-position: -89px -116px;} #uiTaste .uiTaste-group .uiTaste-step{margin-bottom:28px;background:no-repeat 50% 50%;} #uiTaste .uiTaste-group .uiTaste-title{color: #00deff;font-size: 29px;font-family: 'S-CoreDream-5Medium';display: block;margin: 25px 0;} #uiTaste .uiTaste-group .uiTaste-title em{color:#fff;font-family: 'S-CoreDream-5Medium';display: inline-block;margin-left: 5px;} #uiTaste #uiTasteStep01 .uiTaste-control, #uiTaste #uiTasteStep03 .uiTaste-control{display:none;} #uiTaste .uiTaste-control{margin-top:90px;/* position: absolute; *//* left: 38%; */} #uiTaste .uiTaste-control button,#uiTaste .uiTaste-return a{display:block;margin:0 auto;height: 66px;padding: 13px 1px 22px 0;border-radius: 30px;background-color: #0a368e;color: #fff;min-width: 230px;} #uiTaste .uiTaste-control button span,#uiTaste .uiTaste-return a span{display:inline-block;position:relative;line-height: 2;color: #fff;font-weight: bold;font-size: 22px;} #uiTaste .uiTaste-control .next{ width: 236px; } #uiTaste .uiTaste-return{margin-top:20px} #uiTaste .uiTaste-return a{width: 236px;} #uiTaste #uiTasteStep01{} #uiTaste #uiTasteStep02{position: relative;z-index: 11;} #uiTaste #uiTasteStep03{} #uiTaste .uiTaste-group .inner .list{position:relative;width: 250px;margin: 0 auto;text-align: center;z-index: 15;} #uiTaste .uiTaste-group .inner .list .title{display:block;border: 1px solid rgba(255,255,255,0.6);border-radius:10px;} #uiTaste .uiTaste-group .inner .list .title a{display:block;padding:10px;color:rgba(255,255,255,0.6);font-size:18px;} .uiTaste-checker { text-align: left; position: absolute; padding: 0; top: 60px; left: 0; display: none; background-color: #fff; border-radius: 10px; width: 100%; padding: 15px 20px; } .uiTaste-checker .active { display: block; } .uiTaste-checker li { list-style: none; } .uiTaste-checker li a:after { position: absolute; content: ''; height: 5px; width: 0; left: 0; background: #b066ff; bottom: 0; -webkit-transition: all .4s ease-out; transition: all .4s ease-out; } .uiTaste-checker li a:hover { cursor: pointer; color: #b066ff; } .uiTaste-checker li a:hover:after { width: 100%; } @media(max-width:1399px) { #uiTaste .uiTaste-checker li button{/* height:150px; *//* width:150px; */} #uiTaste .uiTaste-checker li button span.dot{top: -10px;left: -10px;width: 170px;height: 170px;} #uiTaste .uiTaste-checker li button.ov span.mask{top: 34%;left: 50px;width: 50px;height: 50px;background-size: 50%;} #uiTaste #uiTasteStep01 ul li .tags-01-3{background-position: -74px 0;} #uiTaste .uiTaste-checker li span.kr{font-size:18px} } @media(max-width:1199px) { #uiTaste .uiTaste-group .uiTaste-title{margin-bottom:48px} #uiTaste .uiTaste-checker{margin:0 auto} #uiTaste .uiTaste-control{margin-top:50px} } @media(max-width:1023px) { #uiTaste .uiTaste-group .inner{padding-top: 160px;} #uiTaste #uiTasteStep01 ul{max-width:420px} #uiTaste #uiTasteStep02 ul{max-width:630px} #uiTaste #uiTasteStep03 ul{max-width:630px} #uiTaste .uiTaste-checker li span.kr{margin: 14px 0 10px 0} #uiTaste .uiTaste-group .inner .uiTaste-img{width:200px;height:200px;} } @media(max-width:767px) { html.runing_ui_taste #top_layout{height:62px} #uiTaste .uiTaste-checker li button{width:150px;height:150px} #uiTaste .uiTaste-group .uiTaste-title{/* margin-bottom:30px; */background-size:80%;} } @media(max-width:500px) { html.runing_ui_taste #uiTaste{height:920px;padding: 0 20px;padding-top: 180px;display: block;/* align-items: flex-start; */} #uiTaste .uiTaste-group .inner{padding-top: 0;} #uiTaste .uiTaste-group .uiTaste-step{height: 150px;margin-bottom: 1rem;background-size: 38%} #uiTaste .uiTaste-group .uiTaste-title{text-align: left;margin-bottom:30px;padding-left: 43px;/* background-size:90% */margin: 0 0 10px 0;} #uiTaste .uiTaste-checker li button span.dot{width: 110px;height: 110px;top: -10px;left: -10px} #uiTaste .uiTaste-checker li button.ov span.mask{top: 28%;left: 26px;width: 40px;height: 40px;background-size: 43%} #uiTaste .uiTaste-checker li button span.en{display:none} #uiTaste .uiTaste-checker li button span.kr{margin-top:0;font-size:14px} #uiTaste .uiTaste-checker li button{width:90px;height:90px} #uiTaste #uiTasteStep01 ul li .tags-01-3{background-position: -42px 0} #uiTaste #uiTasteStep01 ul{max-width:280px} #uiTaste #uiTasteStep02 ul{max-width:400px} #uiTaste #uiTasteStep03 ul{max-width:400px} #uiTaste .uiTaste-group{z-index:10;flex: 0 1 100%;margin: 20px 10px;} #uiTaste .uiTaste-group .inner .uiTaste-img #img{display:none;} #uiTaste .uiTaste-group .inner .uiTaste-img{width:100%;height:auto;} #uiTaste .uiTaste-group .inner .list{width:100%;} #uiTaste .uiTaste-control button,#uiTaste .uiTaste-return a{display:block;margin:0 auto;height: 66px;padding: 13px 1px 22px 0;border-radius: 30px;background-color: #0a368e;color: #fff;min-width: 230px;} #uiTaste .uiTaste-control button span,#uiTaste .uiTaste-return a span{display:inline-block;position:relative;line-height: 2;color: #fff;font-weight: bold;font-size: 22px;} #uiTaste .uiTaste-group .inner .uiTaste-img em{top:-15px;left: -8px;background-color: transparent;} #uiTaste #uiTasteStep01 .uiTaste-control, #uiTaste #uiTasteStep02 .uiTaste-control{display:none;} #uiTaste #uiTasteStep03 .uiTaste-control{display:block;} #uiTaste .uiTaste-control .next, #uiTaste .uiTaste-control .result{height: 54px;padding: 10px;width: 100%;border-radius: 10px;} #uiTaste .uiTaste-group .inner .uiTaste-img em:before{transform:scale(0.8)} } /* ANIMATE */ #uiTaste .uiTaste-checker li button:before, #uiTaste .uiTaste-checker li button:after{transition:all 150ms ease-out} #uiTaste .uiTaste-checker li button:before, #uiTaste .uiTaste-checker li button:after{width:0%} #uiTaste .uiTaste-checker li button.ov:before, #uiTaste .uiTaste-checker li button.ov:after{width:22%} #parseArea{padding: 50px 0 0;position:relative;min-height: 100%;} #parseArea .uiTaste-return{margin-top:90px;text-align: center;} #parseArea .uiTaste-return button,#parseArea .uiTaste-return a{display: inline-block;margin:0 auto;height: 66px;padding: 20px 120px 20px 120px;border-radius: 30px;background-color: #0a368e;color: #fff;font-weight: bold;font-size: 20px;} .ui-step{position:relative;padding-bottom:20px;margin-bottom:50px;} .ui-step:after{/* content:''; */position:absolute;bottom:0;left:50%;margin-left:-20px;width:40px;height:3px;background-color:#fff;} .ui-step .ir{display:block;margin:0 auto 15px;width:397px;height:139px;background: url(/js/02_tour/2020/uiTaste/images/common/s_tit.png) no-repeat;} .ui-step h2{color:#fff;font-size:45px;text-align:center;font-weight: normal;} .ui-step h2 *{vertical-align:middle} .ui-step h2 strong{color: #00deff;font-weight:600;display: inline-block;font-size: 20px;margin: 0 5px;padding: 13px 15px;border-radius: 10px;border: 1px solid rgba(255,255,255,0.2);min-height: 48px;line-height: 1;min-width:100px;position:relative;top:-3px} .board--card--list, .board--card--list .obj, .board--card--list .obj .thm--box {position: relative;overflow: hidden;max-width: 1240px;margin: 0 auto;} .board--card--list .obj {margin: 30px -2px 0;} .board--card--list .obj.col4 .col {width: 25%;/* max-height:360px; */float: left;border: 15px solid transparent;/* overflow: hidden; */} .board--card--list.type2 .col .inner-box {position: relative;border-radius: 5px;background-color: #fff;box-shadow: 0 1px 11px 0 rgba(0, 0, 0, 0.1);transition: all 250ms ease-out;overflow: hidden;} .board--card--list .obj .link {display: block;} .board--card--list .obj .item {/* border: 1px solid #ddd; */overflow: hidden;min-height: 360px;} .board--card--list .obj .link * {transition: all .3s ease-in-out;} .board--card--list .obj .thm--box {width: 100%;padding-top: 200px;background-color: #fafafa;position: relative;z-index: 1;-webkit-backface-visibility: hidden;-webkit-perspective: 2000;} .board--card--list .obj .thm--box .inner {display: block;position: absolute;top: 0;left: 0;right: 0;bottom: 0;text-align: center;width: 100%;height: 100%;} .board--card--list .obj .thm--box .inner img {position: absolute;top: 50%;left: 50%;max-width: none;height: 100%;max-height: 100%;transform: translate(-50%,-50%);transition: -webkit-transform cubic-bezier(.22,.61,.36,1) .4s;transition: transform cubic-bezier(.22,.61,.36,1) .4s;transition: transform cubic-bezier(.22,.61,.36,1) .4s,-webkit-transform cubic-bezier(.22,.61,.36,1) .4s;-webkit-transform: translate(-50%,-50%);-webkit-transition: -webkit-transform cubic-bezier(.22,.61,.36,1) .4s; -o-transition: transform cubic-bezier(.22,.61,.36,1) .4s; -ms-transform: translate(-50%,-50%);} .board--card--list .obj .card--body {position: relative;padding: 15px;text-align: left;z-index: 2;} .board--card--list .obj .card--body .tit {display: block;margin: 0;padding: 0;width: 100%;overflow: hidden;color: #323232;font-size: 20px;text-overflow: ellipsis;font-weight: 700;white-space: nowrap;word-wrap: break-word;word-break: keep-all;} .board--card--list.type2 .obj .card--body .pt{overflow: hidden;height: 44px;font-size: 14px;text-align: left} .board--card--list.type2 .obj .card--info {position: absolute;height: 42px;padding: 8px 20px;background-color: #e8e8e8;bottom: 0;left: 0;width: 100%;} .board--card--list.type2 .obj .card--info span{display:inline-block;position:relative;padding: 0 0 0 22px;color: #6a6a6a;font-size: 14px} .board--card--list.type2 .obj .card--info span:before{content:"";display:inline-block;position:absolute;top:0;left:0;width:20px;height:20px;background: url(/images/prog/tursmCn/ir.png) no-repeat} .board--card--list.type2 .obj .card--info .look{float: left} .board--card--list.type2 .obj .card--info .look:before{top: 7px;height: 12px;background-position: -1px -88px} .board--card--list.type2 .obj .card--info .locate{float: right; max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .board--card--list.type2 .obj .card--info .locate:before{top: 5px;height: 16px;background-position: -27px -88px}