.circleStyle , #prolay .pro-list .p-box , #product:after , #freeboxlist >div , #book .mofd , #book .border .info p , #news li .readmore a b , #news li .readmore:before { background: -webkit-gradient(linear , left top , right top , color-stop(20% , #f93) , color-stop(80% , #ff7166)); background: -webkit-linear-gradient(left , #f93 20% , #ff7166 80%); background: linear-gradient(90deg , #d4091c 20% , #ea6370 80%); } #prolay .pro-list h4 , #prolay .pro-list .p-border:hover .p-info h3 , #bookBox .topic b , #NewsBox .topic .topic-title h2 , #news li .readmore a { background-color: #f93; background: -webkit-gradient(linear , left top , right top , color-stop(20% , #f93) , color-stop(80% , #ff7166)); background: -webkit-linear-gradient(left , #f93 20% , #ff7166 80%); background: linear-gradient(90deg , #f93 20% , #ff7166 80%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } #content { background: #f5f5f5; } /* topic */ .topic { position: relative; padding: 70px 0; text-align: center; } .topic .topic-title { position: relative; display: inline-block; color: #333; z-index: 3; } .topic .topic-title h2 { font-family: 'Rubik' , sans-serif; text-align: center; line-height: 110%; font-size: 32px; } .topic .topic-title p { margin-top: 7px; text-align: center; line-height: 110%; font-size: 14px; } .topic b { position: absolute; width: 100%; height: 100%; display: block; line-height: 197px; text-align: center; font-style: italic; font-family: 'Marck Script' , cursive; font-weight: 400; font-size: 170px; color: #eaeaea; top: 0; left: 0; z-index: 2; transform: rotate(-5deg); } /* itemc3 */ #itemc3 { overflow: hidden; position: relative; float: none; height: 210px; padding: 80px 0; background: url(/images/18/itemc3_bg.jpg) #1c243a / cover; } #itemc3 .wdkwi , #itemc3 .contactfb .tildee , #itemc3 .wdkwi .itemright .tildee , #aboutFunc #about ul li , #aboutDescription #about .abouttt , #aboutDescription #about ul li { overflow: hidden; } #itemc3 .wdkwi .itemleft { margin: 0; width: 65%; } #itemc3 .wdkwi .itemright { position: absolute; margin: 0 auto; width: 22%; right: 40px; bottom: 25px; } #itemc3 p { position: relative; text-align: center; font-size: 16px; color: #909090; z-index: 2; } #itemc3 p a { padding: 10px 50px; background: #d4091c; border-radius: 40px; display: block; font-weight: bold; font-size: 18px; color: #fff; } #itemc3 p a i { margin-right: 5px; } #itemc3 p a:hover { background: #252525; } #itemc3 .bgBox { position: absolute; top: -110%; left: -150px; animation: bgWhirligig 80s infinite linear; z-index: 1; } #itemc3 h2 { margin: 10px 0; text-align: center; } #itemc3 .contactfb { padding: 25px 0; } #itemc3 .contactfb p.left , #itemc3 .contactfb p.right { margin: 5px; float: left; width: 48%; } #itemc3 .wdkwi .itemright .tildee p.left , #itemc3 .wdkwi .itemright .tildee p.right { margin: 0 11px; float: left; width: 42%; } #itemc3 .wdkwi .itemright .tildee p.left a , #itemc3 .wdkwi .itemright .tildee p.right a { padding: 0; background: #d4091c00; } /* translate */ #translate h6 img { position: absolute; margin-top: -19px; margin-left: -65px; width: 100px; } #translate h3 { padding: 10px 25px 0; background: #37414f; border-top-right-radius: 7px; border-top-left-radius: 7px; display: inline-block; font-size: 17px; color: #fff; } #translate form , #translate2 { overflow: hidden; background: #464646; border-radius: 7px; } #translate form h4 , #translate2 h4 { float: right; } #translate form h4 a , #translate2 h4 a { padding: 15px 30px; background: rgba(0 , 0 , 0 , 0.15); display: block; color: #fff; font-size: 14px; transition: all linear .3s; } #translate form h4 a i { margin-right: 5px; font-size: 18px; } #translate form p , #translate2 p { float: left; width: calc(100% - 150px); } #translate form p.rref2 { padding: 20px 0; width: 100%; font-weight: 800; font-size: 23px; color: white; } #translate2 p { padding: 15px 0; background-color: white; } #translate form p input { padding: 15px; width: calc(100% - 30px); height: 22px; line-height: 52px; font-size: 18px; -webkit-appearance: none; } #translate form h4 a:hover { background: rgba(0 , 0 , 0 , 0.25); } /* freebox */ #freebox { overflow: hidden; position: relative; padding: 50px 0 100px; } #freeboxlist { position: relative; z-index: 2; } #freeboxlist >div { margin-right: -4px; width: calc(100% / 3); display: inline-block; vertical-align: top; } #freeboxlist .free { padding: 50px; background: #fff; border: 1px solid #f5f5f5; transition: all linear .1s; } #freeboxlist .free h4 { overflow: hidden; margin-bottom: 20px; height: 50px; text-align: center; line-height: 110%; font-size: 22px; } #freeboxlist .free p { overflow: hidden; height: 89px; text-align: center; font-size: 15px; } /* circleStyle */ .circleStyle { position: absolute; border-radius: 50%; display: block; z-index: 1; } .circleStyle.bobA { width: 700px; height: 700px; left: -320px; top: -300px; } .circleStyle.bobB { width: 400px; height: 400px; right: -150px; bottom: -200px; } /* news */ #news li .photo a { position: relative; background: no-repeat 50% / cover; display: block; } #news li .photo a img , #book .border .photo img , #prolay .pro-list .photo img { width: 100%; } /* product */ #product { overflow: hidden; position: relative; } #product .webframe { position: relative; z-index: 3; } #product:after { position: absolute; width: 100%; height: 100%; display: block; top: 0; left: 0; z-index: 1; content: ""; } #product .topic .topic-title { color: #fff; } #product .topic b { color: rgba(245 , 245 , 245 , 0.12); } /* prolay */ #prolay { position: relative; z-index: 3; } #prolay .slick-list { padding: 15px; } #prolay .pro-list .p-border { position: relative; padding: 30px; background: #fff; border: 1px solid #f5f5f5; transition: all linear .2s; } #prolay .pro-list h4 { font-weight: 400; font-size: 11pt; color: #ff9637; } #prolay .pro-list .photo { margin: 20px 0; background: #f9f9f9 no-repeat 50% / contain; } #prolay .pro-list a { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 5; } #prolay .pro-list .p-info h3 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 130%; font-size: 13pt; } #prolay .pro-list .p-info >span { margin: 20px 0; width: 20px; height: 1px; background: #ff7166; display: block; } #prolay .pro-list .p-info .describe { overflow: hidden; height: 30pt; line-height: 140%; font-size: 11pt; } #prolay .pro-list .p-info .price { overflow: hidden; margin: 10px 0 0; height: 22px; } #prolay .pro-list .p-info .price span { float: right; font-size: 10pt; color: #565656; } #prolay .pro-list .p-info .price span.old { float: left; text-decoration: line-through; } #prolay .pro-list .p-info h5 { margin: 0; margin-top: 20px; } #prolay .pro-list .p-info h5 b { padding: 6px 35px; background: #e8e8e8; border-radius: 25px; display: inline-block; font-size: 11pt; color: #252525; } #prolay .slick-prev { width: 40px; height: 40px; left: -50px; } #prolay .slick-next { width: 40px; height: 40px; right: -50px; } #prolay .slick-prev:before , #prolay .slick-next:before { font-size: 40px; color: #3a3f4a; } /* same-btn */ .same-btn { margin: 40px 0; text-align: center; } .same-btn a { padding: 15px 45px; border-radius: 25px; background: #384250; display: inline-block; font-weight: 700; font-size: 11pt; color: #fff; transition: all linear .2s; } .same-btn a:hover { opacity: .8; } #prolay .same-btn { margin-top: 40px; } /* bookBox */ #bookBox { position: relative; overflow: hidden; margin: 80px 0; padding-top: 120px; } #bookBox .webframe { position: relative; z-index: 3; } #bookBox .topic { position: absolute; padding: 0; width: 50%; right: 0; top: 0; z-index: 2; } #bookBox .topic b { line-height: 110%; font-size: 60px; color: #000; top: -60px; left: -40px; transform: rotate(-30deg); } #book li { padding: 15px; float: left; width: calc(50% - 30px); } #book li:nth-child(2n) { margin-top: 100px; } #book .border { position: relative; background: no-repeat 50% / cover; transition: all linear .1s; } #book .border a { position: absolute; width: 100%; height: 100%; display: block; top: 0; left: 0; z-index: 3; } #book .border .info { position: absolute; padding: 40px; width: calc(100% - 80px); background: -moz-linear-gradient(bottom , rgba(0 , 0 , 0 , 0.55) 0% , rgba(0 , 0 , 0 , 0) 100%); background: -webkit-linear-gradient(bottom , rgba(0 , 0 , 0 , 0.55) 0% , rgba(0 , 0 , 0 , 0) 100%); background: linear-gradient(to top , rgba(0 , 0 , 0 , 0.55) 0% , rgba(0 , 0 , 0 , 0) 100%); color: #fff; bottom: 0; left: 0; z-index: 2; } #book .border .info p { margin-bottom: 15px; padding: 5px 20px; border-radius: 25px; display: inline-block; font-size: 11pt; font-weight: 700; } #book .border .info h3 { font-size: 24px; line-height: 110%; } #bookBox .circleStyle { width: 100%; height: 90%; background-image: url(/images/18/dots.png); background-position: 50% 50%; border-radius: 0; right: -30%; top: 30px; z-index: 1; } /* NewsBox */ #NewsBox { padding-bottom: 80px; } #news li { float: left; width: calc((100% - 40px) / 3); } #news li:nth-child(3n-1) { margin: 0 20px; } #news li .border { margin-bottom: 50px; } #news li .news-info { margin: 20px; } #news li .news-info .news-bottom { margin-top: 10px; } #news li .news-info .news-bottom h4 { color: #ff7b58; font-size: 10pt; } #news li .news-info h3 { overflow: hidden; margin-bottom: 20px; white-space: nowrap; text-overflow: ellipsis; } #news li .news-info h3 a { font-size: 14pt; color: #2b2b2b; } #news li .news-info p { overflow: hidden; margin-bottom: 20px; height: 34pt; line-height: 150%; font-size: 11pt; color: #6b6b6b; } #news li .readmore { position: relative; text-align: right; } #news li .readmore a { padding-right: 30px; display: block; font-size: 10pt; font-family: 'Viga' , sans-serif; } #news li .readmore a b { position: absolute; width: 20px; height: 20px; border-radius: 50%; display: block; line-height: 20px; text-align: center; font-size: 8pt; color: #fff; -webkit-text-fill-color: #fff; right: 0; top: calc(50% - 10px); } #news li .readmore:after { position: absolute; width: 100%; height: 1px; background: #d8d8d8; display: block; bottom: -15px; left: 0; z-index: 1; content: ""; } /* aboutFunc */ #aboutFunc { position: relative; background: no-repeat 100% / contain; } #aboutFunc .webframe { overflow: hidden; position: relative; padding: 50px 0 100px; z-index: 2; } #aboutFunc:after { position: absolute; width: 100%; height: 100%; background-color: #d72032; display: block; top: 0; left: 0; z-index: 1; opacity: .9; content: ""; } #aboutFunc #about { position: relative; margin: 0 auto; width: 88%; color: #fff; } #aboutFunc #about ul li p { float: left; margin: 0 !important; width: calc(100% - 15px); line-height: 200%; } #aboutFunc #about ul li b { float: left; width: 15px; display: block; line-height: 200%; } #aboutFunc #about .subBoxTitle { position: absolute; width: 100%; font-family: 'Rubik' , sans-serif; font-weight: bolder; font-size: 60px; text-align: center; color: rgba(255 , 255 , 255 , 0.05); text-transform: uppercase; top: 0; z-index: -1; } #aboutFunc #about .speBoxTitle { margin: 30px 0; line-height: 120%; text-align: center; font-size: 26pt; } #aboutFunc #about .arts { margin: 40px 0; font-size: 12pt; line-height: 150%; } #aboutFunc #about .same-btn { text-align: left; } #aboutFunc #youtube {position: relative;float: left;width: 400px;background: no-repeat 50% / cover;} #aboutDescription { position: relative; background: url(/images/18/aboutDescription.jpg) #fafafa 100% / cover; } #aboutDescription .webframe { overflow: hidden; position: relative; padding: 30px 0; z-index: 2; } #aboutDescription #about { position: relative; margin: 0 auto; width: 85%; color: #000; } #aboutDescription #about .left { margin-top: 30px; float: left; width: 35%; text-align: center; } #aboutDescription #about .right { margin-top: 40px; margin-left: 15px; float: right; width: 63%; } #aboutDescription #about article { margin-top: 10px; color: #d4091c; } #aboutDescription #about ul li.mo { display: none; } #aboutDescription #about ul li p { float: left; margin: 0 !important; width: calc(100% - 15px); line-height: 200%; } #aboutDescription #about ul li p a { color: #000; } #aboutDescription #about ul li p a:hover { color: #da3544; } #aboutDescription #about ul li b { float: left; width: 15px; display: block; line-height: 200%; } #aboutDescription #about .subBoxTitle { position: absolute; width: 100%; text-align: center; font-family: 'Rubik' , sans-serif; text-transform: uppercase; font-weight: bolder; font-size: 60px; color: rgba(0 , 0 , 0 , 0.05); top: 0; left: 0; z-index: -1; } #aboutDescription #about .speBoxTitle { margin: 30px 0; font-size: 27pt; line-height: 120%; text-align: center; } #aboutDescription #about .arts { margin: 40px 0; font-size: 12pt; line-height: 150%; } #aboutDescription #about .same-btn { text-align: left; } #aboutDescription #youtube { position: relative; float: left; width: 400px; background: no-repeat 50% / cover; } /* youtube */ #youtube .UTwo { overflow: hidden; position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; } #youtube .UTwo a { position: absolute; width: 100px; height: 100px; border-radius: 50%; background: rgba(0 , 0 , 0 , 0.6); display: block; text-align: center; line-height: 100px; color: #dcdcdc; font-size: 30px; left: calc(50% - 50px); top: calc(50% - 50px); z-index: 5; transition: all linear .3s; } #youtube .UTwo a:hover { width: 110px; height: 110px; line-height: 110px; font-size: 34px; left: calc(50% - 55px); top: calc(50% - 55px); } #youtube .UTwo iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } /* gif_static */ .gif_static { overflow: hidden; position: absolute; width: 100%; height: 60px; bottom: -5px; left: 0; z-index: 2; } .gif_static img { height: 55px; } .gif_static .service03 { bottom: -1px; left: 7%; } .gif_static .service04 img { height: 65px; } .gif_static div { position: absolute; bottom: 1px; } .gif_static .traveler01 { right: 100%; -webkit-animation: walk2 100s -7s infinite linear; animation: walk2 100s -7s infinite linear; } .gif_static .traveler02 { left: 100%; -webkit-animation: walk 100s -50s infinite linear; animation: walk 100s -50s infinite linear; } .gif_static .traveler03 { left: 100%; -webkit-animation: walk 100s -20s infinite linear; animation: walk 100s -20s infinite linear; } .gif_static .traveler04 { left: 100%; -webkit-animation: walk 100s -35s infinite linear; animation: walk 100s -35s infinite linear; } .gif_static .service01 { right: 100%; -webkit-animation: walk2 100s -28s infinite linear; animation: walk2 100s -28s infinite linear; } .gif_static .service02 { left: 100%; -webkit-animation: walk 100s -70s infinite linear; animation: walk 100s -70s infinite linear; } .gif_static .service04 { right: 100%; -webkit-animation: walk2 100s -64s infinite linear; animation: walk2 100s -64s infinite linear; } @-webkit-keyframes walk { 0% { left: 100%; } 100% { left: -200px; } } @keyframes walk { 0% { left: 100%; } 100% { left: -200px; } } @-webkit-keyframes walk2 { 0% { right: 100%; } 80% { right: -50px; } 100% { right: -50px; } } @keyframes walk2 { 0% { right: 100%; } 80% { right: -50px; } 100% { right: -50px; } } @media screen and (max-width: 1680px) { #itemc3 .wdkwi .itemright { width: 25%; } } @media screen and (max-width: 1440px) { #itemc3 .wdkwi .itemleft { margin: 0; width: 70%; } #itemc3 .wdkwi .itemright { width: 25%; } #itemc3 .wdkwi .itemright .tildee p.left , #itemc3 .wdkwi .itemright .tildee p.right { margin: 0 10px; } } @media screen and (max-width: 1280px) { #freeboxlist >div { margin: 0; width: 100%; } #freeboxlist .free p , #freeboxlist .free h4 { height: auto; } .circleStyle.bobA { width: 500px; height: 500px; left: -250px; } .circleStyle.bobB { width: 300px; height: 300px; } #prolay .slick-list { padding: 0; } #prolay { width: calc(100% - 90px); margin: 0 auto; } .gif_static .traveler03 , .goright service01 { display: none; } #itemc3 .wdkwi .itemleft { width: 60%; } #itemc3 .wdkwi .itemright { width: 30%; } } @media screen and (max-width: 1080px) { #itemc3 .wdkwi .itemright { width: 35%; } } @media screen and (min-width: 1025px) { #freeboxlist .free:hover , #prolay .pro-list .p-border:hover , #book .border:hover { transform: translate(-15px , -15px); } #news li .readmore:before { position: absolute; width: 0; height: 1px; display: block; bottom: -15px; left: 0; z-index: 2; transition: all linear .3s; } #news li .readmore:hover:before { width: 100%; } #aboutDescription { background-attachment: fixed; } } @media screen and (max-width: 1024px) { #itemc3 .wdkwi .itemleft , #itemc3 .wdkwi .itemright { position: initial; margin: 0; float: none; width: 100%; } #itemc3 .wdkwi .itemright .tildee p.left , #itemc3 .wdkwi .itemright .tildee p.right { margin: 10px; width: 44%; } #itemc3 .wdkwi .itemright .tildee { margin: 0 auto; width: 51%; text-align: center; } .gif_static .traveler01 , .gif_static .traveler02 { display: none; } #itemc3 { height: auto; } } @media screen and (max-width: 980px) { .topic b { font-size: 120px; } #aboutFunc #about { margin-bottom: 50px; padding: 0 5%; width: 90%; } #aboutFunc #about .subBoxTitle { left: 0%; } #aboutFunc #youtube { width: 100%; } #aboutFunc .webframe { padding-bottom: 50px; } } @media screen and (max-width: 768px) { .topic b { font-size: 100px; } #book .border .info h3 { font-size: 20px; } #book .border .info { padding: 20px; width: calc(100% - 40px); } #itemc3 .wdkwi .itemright .tildee { width: 60%; } #itemc3 .wdkwi .itemright .tildee p.left , #itemc3 .wdkwi .itemright .tildee p.right { width: 42%; } #aboutDescription #about .left , #aboutDescription #about .right { float: none; width: 100%; } #aboutDescription #about .right { margin-top: 15px; } #aboutDescription #about .subBoxTitle { left: 16%; } } @media screen and (max-width: 640px) { #book li , #book li:nth-child(2n) { margin: 0 0 20px; padding: 0; width: 100%; } #bookBox .topic { position: relative; padding: 0 0 70px; width: auto; } #news li { margin: 0 5px; width: calc(50% - 10px); } #news li:nth-child(3n-1) { margin: 0 5px; } #translate { top: 470px; } #itemc3 p a { padding: 11px 0; } } #itemc3 .contactfb p.left , #itemc3 .contactfb p.right { width: 45%; } @media screen and (max-width: 480px) { #freeboxlist .free { padding: 30px; } .topic b { font-size: 70px; } #prolay .pro-list .p-border { padding: 20px; } #news li .news-info { margin: 0; } #news li .news-info h3 a { font-size: 13pt; } #news li .news-info h3 , #news li .news-info p { margin-bottom: 10px; } #aboutFunc #about .speBoxTitle { font-size: 23pt; } #aboutFunc #about .arts { margin: 20px 0 40px; } .same-btn a { padding: 10px 45px; font-size: 10pt; } #translate form { padding: 10px 13px; } #translate h3 { padding: 7px 15px 0; font-size: 15px; } #translate form h4 a { padding: 10px; } #translate form p input { padding: 10px 15px; line-height: 32px; } #itemc3 { padding: 40px 0; } #itemc3 .contactfb p.left , #itemc3 .contactfb p.right { margin: 5px 0; float: none; width: 100%; } #aboutDescription #about .subBoxTitle { left: 12%; font-size: 35px; } #aboutFunc #about .subBoxTitle { left: 0%; font-size: 35px; } #aboutFunc .webframe { padding: 50px 0; } #translate form p { width: calc(100% - 55px); } #translate form p input { font-size: 14px; } .gif_static .traveler04 , .gif_static .service02 { display: none; } #aboutDescription #about .right { margin-left: 0; } #itemc3 .wdkwi .itemright .tildee { width: 80%; } #itemc3 .wdkwi .itemright .tildee p.left , #itemc3 .wdkwi .itemright .tildee p.right { width: 43%; } #translate2 p { float: none; width: 100%; } #itemc3 p { font-size: 14px; } #translate2 h4 { margin-top: 10px; width: 100%; float: none; text-align: center; } } @media screen and (max-width: 375px) { #itemc3 .wdkwi .itemright .tildee p.left , #itemc3 .wdkwi .itemright .tildee p.right { margin: 0 15px; } #itemc3 h2 { font-size: 20px; } #itemc3 .wdkwi .itemright .tildee p.left , #itemc3 .wdkwi .itemright .tildee p.right { width: 38%; } } @media screen and (max-width: 320px) { #itemc3 .wdkwi .itemright .tildee p.left , #itemc3 .wdkwi .itemright .tildee p.right { width: 36%; } #aboutFunc #about .subBoxTitle { left: 10%; } }