/* common */ @-webkit-keyframes spinspin2 {0% {-webkit-transform: rotate(0deg);}100% {-webkit-transform:rotate(180deg);}} @keyframes spinspin2 {0% {transform: rotate(0deg);}100% {transform:rotate(180deg);}} @-webkit-keyframes array1 {0%,100% {-webkit-transform:translateX(10px);}50% {-webkit-transform:translateX(0px);}} @keyframes array1 {0%,100% {transform:translateX(10px);}50% {transform:translateX(0px);}} @-webkit-keyframes array2 {0%,100% {-webkit-transform:translateX(0);}50% {-webkit-transform:translateX(10px);}} @keyframes array2 {0%,100% {transform:translateX(0);}50% {transform:translateX(10px);}} .nav-tabs { border-bottom: none; } .slider .slider-wrapper .slide img{width:100%;} .plus { position: absolute; top: 0; right: 0; } .plus:hover { opacity: 0.8; transition: 0.3s all ease; } .box { display: inline-block; position: relative; opacity: 0; top: 50px; } /*main-quick*/ #main-slider{margin-top: 150px;} #main-1{padding-bottom:55px;} #main-1 .main1T{margin:65px 0 15px;position:relative;} #main-1 .main1T h1{margin:0;font-size: 32px;line-height:2; font-weight: bold;} #main-1 .main1T .main1BTN{position: absolute;right: 0;bottom: 0;} #main-1 .main1T .main1BTN #main1BTNM_P{right: 0%;bottom: 0;background-color: rgba(255,255,255,.5); position: relative;float: left;transition: .5s;padding:20px;} #main-1 .main1T .main1BTN .main1BTNM{display:inline-block;} #main-1 .main1T .main1BTN .main1BTNM #main1BTNM_PR{margin: 25px 0;padding: 0px 30px; position: relative;float: left;height: 17px;width: 100%;} #main-1 .main1T .main1BTN #main1BTNM_P:hover img, #main-1 .main1T .main1BTN #main1BTNM_P:focus img{animation: array2 1s ease-in-out infinite; -webkit-animation: array2 1s ease-in-out infinite;transition: all 1s;} #main-1 .main1T .main1BTN #main1BTNM_N{right: 0%;bottom: 0;background-color: rgba(255,255,255,.5); position: relative;float: left;transition: .5s;padding:20px;} #main-1 .main1T .main1BTN .main1BTNM #main1BTNM_NR{margin: 25px 0;padding: 0px 30px;position: relative; float: left;height: 17px;width: 100%;} #main-1 .main1T .main1BTN #main1BTNM_N:hover img, #main-1 .main1T .main1BTN #main1BTNM_N:focus img{animation: array1 1s ease-in-out infinite; -webkit-animation: array1 1s ease-in-out infinite;transition: all 1s;} #main-1 .main1M{overflow:hidden;} #main-1 .main1M .main1W #main1C .contentSlideWrapper .contentSlide a{display: inline-block;width: 100%;overflow: hidden;} #main-1 .main1M .main1W #main1C .contentSlideWrapper .contentSlide a:hover .main1B, #main-1 .main1M .main1W #main1C .contentSlideWrapper .contentSlide a:focus .main1B{transition: all 1s; -webkit-transform: scale(1.1) rotate(0.01deg);transform: scale(1.1) rotate(0.01deg);} #main-1 .main1M .main1W #main1C .contentSlideWrapper .contentSlide a .main1B{display: inline-block;width:100%; position: relative;height: 295px; margin: 0 auto;background-repeat: no-repeat;background-position: center;background-size: contain;padding-bottom: 20px;background-color: #000;} #main-1 .main1M .main1W #main1C .contentSlideWrapper .contentSlide a .main1B .main1D{height:100%;} #main-1 .main1M .main1W #main1C .contentSlideWrapper .contentSlide a .main1B .main1D .main1PLAY{position: absolute; top: 50%;text-align: center;width: 100%;border: none;display: block;transform: translate(0,-50%);} #main-1 .main1M .main1W #main1C .contentSlideWrapper .contentSlide a .main1B .main1D .main1GUBUN{position: absolute; top: 15%;left: 0;width: 25%;text-align: center;border: none;display: block; transform: translate(0,-50%);border-bottom: 2px solid #fff;} #main-1 .main1M .main1W #main1C .contentSlideWrapper .contentSlide a .main1B .main1D .main1GUBUN h1{margin: 0;font-size: 24px; color: #fff;text-align: right;padding: 5px;display: inline-block;float: right;line-height: 1.5;} #main-1 .main1M .main1W #main1C .contentSlideWrapper .contentSlide a .main1B .main1D p{position: absolute;left:5%; top: 75%;width: 90%;border: none;display: block;transform: translate(0,-50%);margin: 0;word-break: keep-all; font-size: 17px;text-align: center;color: #fff;} #main-2{height: 400px;display: flex;flex-direction: row;justify-content: space-around;align-items: flex-end;background-color: #F9F9F9;} #main-2 .main2M{padding-right:25px; padding-left:25px;} #main-2 .main2M .main2TOP{width: 100%;height: 115px;position:relative;} #main-2 .main2M .main2TOP .main2IMG{position: absolute;top: 50%;width: 100%;text-align: center; left: 0;border: none;display: block;transform: translate(0,-50%);} #main-2 .main2M .main2B{width: 100%;height: 205px;margin-bottom: 60px;background-color:#fff;position:relative;} #main-2 .main2M .main2B .main2T{position: absolute;top: 50%;left: 10%;width: 45%;border: none;display: block;transform: translate(0,-50%);text-align: left;} #main-2 .main2M .main2B .main2T h5{margin: 0;line-height: 2;font-size: 20px;color: #888888;} #main-2 .main2M .main2B .main2T h1{color: #000;margin: 0;font-size: 34px;} #main-2 .main2M .main2B .main2PLAY{position: absolute;top: 50%;right: 15%;border: none;display: block;transform: translate(0,-50%);text-align: left;} #main-3{height:540px;background-image: url('../images/4.joyfultv_bg.jpg');background-size:100%;background-repeat:no-repeat;background-position:center;} #main-3 .main3M .jofultvT{height:55px; padding-top:85px;display:inline-block;width:100%;} #main-3 .main3M .jofultvT .jofultvTITLE{height: 50px;position: relative;float: left; display: inline-block;width: 10%;} #main-3 .main3M .jofultvT .jofultvTITLE h1{margin: 0;color: #DC242C;font-size: 28px;float: left;position: absolute;top: 50%; text-align: center;width: 100%;border: none;display: block;transform: translate(0,-50%);left: 0;} #main-3 .main3M .jofultvT .jofultvBTN{width: 60%;float: right;display: inline-block;} #main-3 .main3M .jofultvT .jofultvBTN li{display:inline-block;float:left;margin:0 5px;} #main-3 .main3M .jofultvT .jofultvBTN li a{padding: 25px 75px;border-radius: 45px;background-color: #fff;} #main-3 .main3M .jofultvT .jofultvBTN li a:hover .btnT span{font-weight:bold; color:#fff;} #main-3 .main3M .jofultvT .jofultvBTN li a:before{background-color:#DC242C;} #main-3 .main3M .jofultvT .jofultvBTN li a .btnT{position: absolute;top: 50%;text-align: center;width: 100%; border: none;display: block;transform: translate(0,-50%);left:0;} #main-3 .main3M .jofultvT .jofultvBTN li a .btnT span{font-size:17px; color:#000;letter-spacing:0.5px;} #main-3 .main3M .documents{position:relative;padding-top:120px;} #main-3 .main3M .documents .tab-content{} #main-3 .main3M .documents .tab-content > .tab-pane{overflow:hidden;} #main-3 .main3M .documents .tab-content .slideBTNM{position:absolute;right: 0;top: 0;} #main-3 .main3M .documents .tab-content .slideBTNM .slidePBTN{right: 0%; bottom: 0;position: relative;float: left;transition: .5s; padding:15px;} #main-3 .main3M .documents .tab-content .slideBTNM .slidePBTN:hover img, #main-3 .main3M .documents .tab-content .slideBTNM .slidePBTN:focus img{animation: array2 1s ease-in-out infinite; -webkit-animation: array2 1s ease-in-out infinite;transition: all 1s;} #main-3 .main3M .documents .tab-content .slideBTNM .slideNBTN{right: 0%; bottom: 0;position: relative;float: left;transition: .5s; padding:15px;} #main-3 .main3M .documents .tab-content .slideBTNM .slideNBTN:hover img, #main-3 .main3M .documents .tab-content .slideBTNM .slideNBTN:focus img{animation: array1 1s ease-in-out infinite; -webkit-animation: array2 1s ease-in-out infinite;transition: all 1s;} #main-3 .main3M .documents .tab-content .main3SDM{/*overflow:hidden;*/width: 100%; height: 100%;margin-left: auto;margin-right: auto;} #main-3 .main3M .documents .tab-content .main3SDM .contentSlideWrapper .contentSlide{} #main-3 .main3M .documents .tab-content .main3SDM .contentSlideWrapper .contentSlide a{text-decoration: none;} #main-3 .main3M .documents .tab-content .main3SDM .contentSlideWrapper .contentSlide a .main3B:hover, #main-3 .main3M .documents .tab-content .main3SDM .contentSlideWrapper .contentSlide a .main3B:focus{ -webkit-transform: translate(-10px,-10px);transform: translate(-10px,-10px);transition: all 0.5s;} #main-3 .main3M .documents .tab-content .main3SDM .contentSlideWrapper .contentSlide a .main3B::after{ display: block;position: absolute;z-index: -1; left: 0;top: 0;content: '';width: 100%;height: 100%;background: rgba(0,0,0,.3);box-shadow: 5px 5px 10px rgb(0 0 0 / 30%);} #main-3 .main3M .documents .tab-content .main3SDM .contentSlideWrapper .contentSlide a .main3B .main3D{display: block;position: relative;height: 205px; overflow: hidden;background-color: #000;margin: 0 auto;background-size: cover;background-position: 50% 50%;background-origin: border-box; background-repeat: no-repeat;} #main-3 .main3M .documents .tab-content .main3SDM .contentSlideWrapper .contentSlide a .main3B .main3T{padding: 5px;} #main-3 .main3M .documents .tab-content .main3SDM .contentSlideWrapper .contentSlide a .main3B .main3T h1{margin: 0;white-space: normal; font-size: 17px;line-height: 1.5;overflow: hidden;text-align: left;color: #fff; word-wrap: break-word;display: -webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical;height: 3em;transform: skew( -0.05deg);} #main-4{height:300px;background-color:#F9F9F9;} #main-4 a{text-decoration:none;} #main-4 .main4M{margin: 60px 0;border-right: 1px solid #000;height:175px;} #main-4 a:last-child .main4M{border:none;} #main-4 .main4M .main4ALL{display: flex;flex-direction: column;justify-content: space-around; align-items: flex-start;height: 100%;padding: 0 10px;} #main-4 .main4M .main4ALL .main4TOP{} #main-4 .main4M .main4ALL .main4B{} #main-4 .main4M .main4ALL .main4B .main4C ul li{font-size:17px; color:#000;line-height:2;letter-spacing:0.5px;} #main-4 .main4M .main4ALL .main4B .main4C ul li span{font-weight:bold;} #main-5{} #main-5 .main5M a{text-decoration:none;} #main-5 .main5M{height: 155px;display: flex;flex-direction: row; justify-content: space-around;align-items: center;} #main-5 .main5M a .main5BTN{display:inline-block; float:left;} #main-5 .main5M a .main5BTN img{padding:5px;} #main-5 .main5M a .main5BTN span{font-size:18px; color:#000; padding:5px;} .view-more { display: inline-block; text-decoration: none; overflow: hidden; vertical-align: middle; background: transparent; overflow: hidden; -webkit-transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1); position: relative; z-index: 1; font-weight: 100; } .view-more:hover:before { -webkit-transform: translateX(0) skewX(-17.62deg);-ms-transform: translateX(0) skewX(-17.62deg); transform: translateX(0) skewX(-17.62deg);-webkit-transform-origin: left top; -ms-transform-origin: left top;transform-origin: left top;} .view-more:before { z-index: -1;content: "";display: block;width: 135%;height: 100%;position: absolute;left: 0;top: 0; -webkit-transform-origin: right top;-ms-transform-origin: right top;transform-origin: right top;-webkit-transform: translateX(-101%) skewX(-17.62deg); -ms-transform: translateX(-101%) skewX(-17.62deg);transform: translateX(-101%) skewX(-17.62deg);-webkit-transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-backface-visibility: hidden;backface-visibility: hidden;} @media(min-width:1500px) and (max-width:1599px) { #main-1 .main1M .main1W #main1C .contentSlideWrapper .contentSlide a .main1B{height:225px;} #main-3{background-size:125%;} #main-3 .main3M .jofultvT .jofultvBTN{width:80%;} #main-4{height:inherit;} #main-4 .main4M{width:50%;} #main-4 .container .row > a:nth-child(2) .main4M{border:none;} #main-4 .container .row > a:last-child .main4M{width:100%;} #main-4 .container .row > a:last-child .main4M .main4ALL{margin: 0 auto; width:50%;} #main-4 .main4M .main4ALL{padding:0;} #main-4 .main4M .main4ALL .main4B .main4C ul li{font-size:16px;} } @media (min-width:1200px) and (max-width:1499px) { #main-1 .main1M .main1W #main1C .contentSlideWrapper .contentSlide a .main1B{height:225px;} #main-2 .main2M .main2B .main2T{width:55%;} #main-3{background-size:165%;} #main-3 .main3M .jofultvT .jofultvBTN{width:80%;} #main-4{height:inherit;} #main-4 .main4M{width:50%;} #main-4 .main4M .main4ALL{padding: 0 50px;} #main-4 .container .row > a:nth-child(2) .main4M{border:none;} #main-4 .container .row > a:last-child .main4M{width:100%;} #main-4 .container .row > a:last-child .main4M .main4ALL{margin: 0 auto; width:50%;} #main-4 .main4M .main4ALL .main4B .main4C ul li{font-size:16px;} } @media (min-width:993px) and (max-width:1199px) { #main-1 .main1M .main1W #main1C .contentSlideWrapper .contentSlide a .main1B{height:170px;} #main-2 .main2M .main2B .main2T{width:55%;} #main-2 .main2M .main2B .main2T h5{font-size:15px;} #main-3{background-size:165%;height: inherit;padding: 15px 0;} #main-3 .main3M .jofultvT{padding-top:60px;} #main-3 .main3M .jofultvT .jofultvTITLE h1{font-size:24px;} #main-3 .main3M .jofultvT .jofultvBTN{width:85%;} #main-3 .main3M .jofultvT .jofultvBTN li a{padding: 25px 65px;} #main-3 .main3M .documents .tab-content .main3SDM .contentSlideWrapper .contentSlide a .main3B .main3D{height:180px;} #main-4{height:inherit;} #main-4 .main4M{width:50%;} #main-4 .main4M .main4ALL{padding: 0 50px;} #main-4 .container .row > a:nth-child(2) .main4M{border:none;} #main-4 .container .row > a:last-child .main4M{width:100%;} #main-4 .container .row > a:last-child .main4M .main4ALL{margin: 0 auto; width:50%;} #main-4 .main4M .main4ALL .main4B .main4C ul li{font-size:13px;} #main-5 .main5M{display: inherit; height: inherit;} #main-5 .main5M a .main5BTN{width:32%;max-height: 60px;margin: 5px;text-align: center;} #main-5 .main5M > a:nth-child(4) .main5BTN, #main-5 .main5M > a:last-child .main5BTN{width:48%!important;} #main-5 .main5M a .main5BTN span{font-size:15px;} } @media (min-width:768px) and (max-width:992px) { #main-1 .main1M .main1W #main1C .contentSlideWrapper .contentSlide a .main1B{height:205px;} #main-2{display:inline-block;height:inherit;padding:20px 0;} #main-2 .main2M .main2B{margin-bottom:20px;} #main-3{background-size:180%; padding: 0 0 30px; height:initial;} #main-3 .main3M .jofultvT{height:inherit;padding-top: 45px;} #main-3 .main3M .jofultvT .jofultvTITLE{width:100%;margin-bottom:20px;} #main-3 .main3M .jofultvT .jofultvBTN{width:100%;} #main-3 .main3M .jofultvT .jofultvBTN li a{padding:25px 65px;} #main-3 .main3M .documents .tab-content .slideBTNM{top:5%;} #main-4{height:inherit;} #main-4 .main4M{margin: 20px 0;border-right:none;} #main-4 .main4M .main4ALL{align-items: center;} #main-5 .main5M{display:inline-block;height:inherit;} #main-5 .main5M a .main5BTN{width:33%;text-align:center;max-height:60px;margin: 10px 0;} #main-5 .main5M a:nth-child(4) .main5BTN, #main-5 .main5M a:last-child .main5BTN{width:50%;} #main-5 .main5M a .main5BTN span{font-size:15px;} } @media (max-width:767px) { .row{margin:0;} #main-1{padding-bottom: 25px;} #main-1 .main1T{margin: 20px 0 15px;} #main-1 .main1T h1{font-size:20px;} #main-1 .main1T .main1BTN{top:-20%;} #main-1 .main1M .main1W #main1C .contentSlideWrapper .contentSlide a .main1B{height:195px;} #main-2{display:inline-block;height:inherit;padding:20px 0; width:100%;} #main-2 .main2M .main2B{margin-bottom:20px;height:115px;} #main-2 .main2M .main2B .main2T h5{font-size:17px;} #main-2 .main2M .main2B .main2T h1{font-size:20px;} #main-3{background-size:900%; padding: 0 0 30px; height:initial;} #main-3 .main3M .jofultvT{height:inherit;padding-top: 20px;} #main-3 .main3M .jofultvT .jofultvTITLE{width:100%;margin-bottom:20px;} #main-3 .main3M .jofultvT .jofultvTITLE h1{font-size:20px;} #main-3 .main3M .jofultvT .jofultvBTN{width:100%;} #main-3 .main3M .jofultvT .jofultvBTN li{margin: 0 5px 15px;} #main-3 .main3M .jofultvT .jofultvBTN li a{padding:20px 50px;} #main-3 .main3M .documents .tab-content .slideBTNM{top:0%;} #main-4{height:inherit;} #main-4 .main4M{margin: 20px 0;border-right:none;} #main-4 .main4M .main4ALL{align-items: center;padding: 0px;} #main-4 .main4M .main4ALL .main4B .main4C ul li{font-size:15px;text-align: center;} #main-5 .main5M{display:inline-block;height:inherit;} #main-5 .main5M a .main5BTN{width:50%;text-align:center;margin: 10px 0;} #main-5 .main5M a:last-child .main5BTN{width:100%;} #main-5 .main5M a .main5BTN img{display:block; margin:0 auto;} #main-5 .main5M a .main5BTN span{font-size:15px;} .prev-btn move-btn, .next-btn move-btn, .homeCNAV{display:none!important;} } @media (max-width:320px) { }