@charset "utf-8";

/* reset.css 있을시 삭제 */
* {padding: 0; margin: 0} 
ul {list-style: none}
/* reset.css 있을시 삭제 */

@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css); /* font import 있을시 삭제 */

.tab-circle-container {font-family: 'Noto Sans KR'; position: relative; width: 1000px; margin: 0 auto;line-height: 1;background-color: #262626;overflow: hidden;}
.tab-circle-container .mo_br {display: none;}
.tab-circle-container .tab-circle-wrapper {position: relative;padding-top: 96%;}

.tab-circle-container .decor .arrow {position: absolute;left: 9.12%; top: 9.12%;width: 81.76%; padding-top: 81.76%;background: url(images/arr-tab-circle.svg) 50% 100% no-repeat;background-size: cover;opacity: 0;transition: 1.5s all;}
.tab-circle-container.init .decor .arrow {opacity: 1;}
.tab-circle-container.intro .decor .arrow {animation:arr-rotate 15s infinite linear 1s;}
/*  @hover시 circle rotate paused
.tab-circle-container.enter .decor .arrow {animation-play-state: paused;} 
*/

@keyframes arr-rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.tab-circle-container .decor .circle {position: absolute;left: 50%;top: 28.125%;width: 45.875%;padding-top: 45.875%;transform: translateX(-50%);transition: 1.5s all;opacity: 0;border-radius: 50%;border: 8px solid #fff;}

.tab-circle-container.init .decor .circle {opacity: 1;transition-duration: 1s;}
.tab-circle-container.enter .decor .circle {width: 71.5%;padding-top: 71.5%;border-color: #F39800;top: 14%;}

.tab-circle-container.enter .decor .circle:before {opacity: 0;}
.tab-circle-container.enter .decor .circle:after {opacity: 1;}


.tab-circle-container .items {position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: url(images/logo-tab-circle.svg) 50% 50% no-repeat;background-size: 20% auto;}
.tab-circle-container.enter .items {background: none;}
.tab-circle-container .items a {position: absolute;width: 24.25%;height: 25.261%;border-radius: 50%;background-color: #dadada;background-repeat: no-repeat;background-size: 43.29% auto;background-position: 50% 32px;padding-top: 14.8749%;box-sizing: border-box;text-align: center;font-size: 18px;line-height: 28px;font-weight: 700;letter-spacing: -0.01em;color: #262626;}
.tab-circle-container .items a.hover {background-color: #F39800;color: #fff;}
.tab-circle-container .items a.hover + .txt {display: block;}
.tab-circle-container .items a span {display: block;padding-top: 100%;}


.tab-circle-container .items li {display: none;}
.tab-circle-container .items li:nth-child(1) a {left: 50%;transform: translateX(-50%);background-image: url(images/ico-tab-circle-01.svg)}
.tab-circle-container .items li:nth-child(2) a {right: 0;top: 27%;background-image: url(images/ico-tab-circle-02.svg)}
.tab-circle-container .items li:nth-child(3) a {bottom: 0; right: 14.5%;background-image: url(images/ico-tab-circle-03.svg)}
.tab-circle-container .items li:nth-child(4) a {bottom: 0; left: 14.5%;background-image: url(images/ico-tab-circle-04.svg)}
.tab-circle-container .items li:nth-child(5) a {left:0 ;top: 27%;background-image: url(images/ico-tab-circle-05.svg)}

.tab-circle-container .items li:nth-child(1) a.hover {background-image: url(images/ico-tab-circle-01-on.svg);}
.tab-circle-container .items li:nth-child(2) a.hover {background-image: url(images/ico-tab-circle-02-on.svg);}
.tab-circle-container .items li:nth-child(3) a.hover {background-image: url(images/ico-tab-circle-03-on.svg);}
.tab-circle-container .items li:nth-child(4) a.hover {background-image: url(images/ico-tab-circle-04-on.svg);}
.tab-circle-container .items li:nth-child(5) a.hover {background-image: url(images/ico-tab-circle-05-on.svg);}


.tab-circle-container .txt {display: none;position: absolute;text-align: center;top: 50%;left: 50%;transform: translate(-50%, -50%);color: #b2b2b2;white-space: nowrap;letter-spacing: -0.01em;}
.tab-circle-container .txt strong {display: block;font-size: 30px;}
.tab-circle-container .txt span {display: block;font-size: 20px;line-height: 1.4;margin-top: 32px;}


@media screen and (max-width:768px) {
    .tab-circle-container .mo_br {display: block;}
    .tab-circle-container {padding: 0 10px;}
    .tab-circle-container .decor .circle {border-width: 4px;}
    .tab-circle-container .items a {font-size: 2.7778vw;line-height: 1.44;background-position: 50% 18.56%;padding-top: 14%;}
    .tab-circle-container .txt strong {font-size: 5vw;line-height: 1.55;}
    .tab-circle-container .txt span {font-size: 3.05vw;margin-top: 24px;}
}