@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap');

/*reset*/
* {margin:0; padding:0; box-sizing:border-box;}
body,div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,table,tr,th,td,form,fieldset,legend,input,label,textarea,select,button {margin:0; padding:0;}
body,h1,h2,h3,h4,h5,h6 {font-size:16px; font-family:'Noto Sans KR','arial',sans-serif; font-weight:400; color:#0d0d0d; line-height:1;}
a {text-decoration:none; color:#0d0d0d; cursor:pointer;}
ul,ol,li {list-style:none;}
img,fieldset {border:none; vertical-align:middle;}
strong,em {font-weight:normal; font-style:normal;}
table {border-collapse:collapse;}
button {border:none; background:none; cursor:pointer;}
/*reset*/

/*common*/
.text_hide {text-indent:-9999px; overflow:hidden;}
.screen_out {position:absolute; top:-9999px;}
.clearfix:after {content:"";clear:both;display:block;}

/*svg style*/
.st0 {fill:#fff; stroke:#FFFFFF; stroke-width:1;}
.st2{fill:none;stroke:#0A3886;stroke-width:5;stroke-miterlimit:10;}

.cir_bg_w {fill:none; stroke:#fff; stroke-width:1; opacity:0.3}
.cir_bg_b {fill:none; stroke:#0a3886; stroke-width:1; opacity:0.3}

.circle_w {fill:none; stroke:#fff; stroke-width:1; opacity:0.4;}
.circle_b {fill:none; stroke:#0a3886; stroke-width:1; opacity:0.4;}

/*Mobile*/
.pc {display:none;}

/*intro*/
.intro {position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:2000;}

.intro_bg {width:100%; height:100%; background-color:#0a3886;}
@keyframes tp1 {
    30% {background-color:#0a3886;}
    100% {background-color:rgba(10, 56, 134, 0);}
}
.intro_bg.tp1 {animation:tp1 2.5s 0s forwards;}

#intro_logo {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}

@keyframes tp2 {
    0% {fill:#fff; stroke-dashoffset:0;}
    100% {fill:rgba(255,255,255,0); stroke:#fff;}
}
#intro_logo .st0.tp2 {stroke:#fff; stroke-dasharray:500;
    stroke-dashoffset:500; animation:tp2 1.5s 0s forwards;}

@keyframes end {
    0% {top:0px;}
    100% {top:-9999px; overflow:hidden;}
}
.intro.end {animation:end 0.5s 2.5s forwards;}

/*navigation*/
.modal{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.7); z-index:98;}

.top {position:fixed; top:0; left:0;  width:100%; height:60px;  background-color:#fff; z-index:1000;}
#logo {position:absolute; top:50%; left:48%; transform:translate(-50%,-50%); width:224px; height:30px; background:url(../img/villeroy_mobile_logo.svg) no-repeat center; background-size:cover;}
#logo a {display:block; width:100%; height:100%;}
nav {width:100%;}

.menu_btn {position:fixed; top:15px; right:5.06%; width:30px; height:28px; z-index:1001;}
.menu_btn span {display:block; width:100%; height:4px; background-color:#0a3886; border-radius:2px;}
.menu_btn span:nth-child(2) {margin:6px 0px;}

.menu_btn.on {position:fixed; top:15px; right:5.06%; width:30px; height:28px; z-index:1011;}
.menu_btn.on span {display:block; width:100%; height:4px; background-color:#0a3886; border-radius:2px;}
.menu_btn.on span:first-child {transform:rotate(45deg);}
.menu_btn.on span:nth-child(2) {display:none;}
.menu_btn.on span:last-child {transform:rotate(-45deg); margin-top:-4px;}

.menu_btn span, .menu_btn span:before, .menu_btn span:after {transition:all 0.07s linear;}

.gnb {position:fixed; top:0; right:-82.6%; width:82.6%; height:100%; background-color:#fff; padding:60px 0; z-index:1010;}
.gnb>li {width:100%; height:66px; line-height:66px; font-size:34px; font-weight:bold;}
.gnb li a {display:inline-block; width:100%; height:100%; padding-left:10.93%;}
.gnb>li:last-child {width:40px; height:40px; background:url(../img/instargram.svg) no-repeat center; margin-top:21px; margin-left:10.93%;}

/*visual_slider*/
.visual_slider {width:100%; height:607px; margin-top:60px; text-align:center;}
.visual_slider li {width:100%; height:607px;}
.visual_slider li>div {width:100%; height:100%; background-color:rgba(0,0,0,0.35);}

@keyframes vt {
	from {transform:translateY(20px); opacity:0;}
    to {transform:translateY(0px); opacity:1;}
}
.visual_text>p {opacity:0; width:100%; float:left; color:#fff; margin-top:186px;}
.visual_text>p:first-child {font-size:28px; line-height:37px; animation:vt 0.8s 0.5s ease forwards;}
.visual_text>p:last-child {font-size:67px; margin-top:8px; animation:vt 0.8s 1s ease forwards;}

.visual_slider li:first-child {background:url(../img/visual_slider1.jpg) no-repeat 45%; background-size:cover;}
.visual_slider li:nth-child(2) {display:none; background:url(../img/visual_slider2.jpg) no-repeat center; background-size:cover;}
.visual_slider li:last-child {display:none; background:url(../img/visual_slider3.jpg) no-repeat center; background-size:cover;}

/*visual slider bx-pager*/
.visual_slider .bx-wrapper {border:none; box-shadow:none;}
.visual_slider .bx-pager {position:absolute; top:527px; padding-top:0 !important;}
.visual_slider .bx-pager a {width:20px !important; height:20px !important; background-color:transparent !important; border:1px solid #fff; border-radius:100% !important; margin:0 10px !important;}
.visual_slider .bx-pager a.active {background-color:#fff !important; border:1px solid #fff;}

/*brand*/
.brand {position:relative; width:100%; float:left; background:url(../img/main_brand_bg.jpg) no-repeat center; background-size:cover;}
.blue_bg {width:100%; height:inherit; background-color:rgba(10, 56, 134, 0.95);}

.brand_pic {position:relative; width:83.48%; height:320px; float:left; margin:80px 8.26% 38px 8.26%;}
.orangebox {position:absolute; bottom:0; right:0; width:60%; height:165px; background-color:#c67809;}
.brand_img {position:absolute; top:0; left:0; width:92.8%; height:290px; background:url(../img/villeroy_boch_brand.jpg) no-repeat center; background-size:cover;}

.brand_text {position:relative; width:83.48%; float:left; margin:0 8.26% 80px 8.26%}

.title_cir {position:absolute; width:105px; height:105px;}
.title_cir.rotate {animation:rot 2s 0s ease forwards;}

#title_c1 {top:-44px; left:-3%;}

.brand_text>h2 {width:100%; float:left; font-size:42px; line-height:48px; font-weight:700; text-align:center; color:#fff; margin-bottom:25px;}
.brand_text p {width:100%; float:left; font-size:18px; line-height:24px; font-weight:400; color:#fff;}
.brand_text>p:nth-child(3) {margin-bottom:24px;}

/*exchange*/
.exchange {width:100%; float:left; text-align:center; background:url(../img/exchange.jpg) no-repeat center; background-size:cover;}
.exchange>div {width:100%; height:inherit; background-color:rgba(0,0,0,0.6); padding:80px 8.26%}
.exchange h2 {width:100%; font-size:42px; font-weight:700; line-height:48px; color:#fff; margin-bottom:26px}
.exchange p {width:100%; font-size:18px; line-height:23px; color:#fff; margin-bottom:30px}
.ebtn {width:180px; height:45px; line-height:45px; border:1px solid #fff; font-size:15px; margin:0 auto;}
.ebtn>a {display:block; width:100%; height:100%; color:#fff;}

/*service*/
.service {width:100%; float:left;}
.service_title {position:relative; width:83.48%; float:left; margin:80px 8.26% 50px 8.26%;}
.service h2 {width:100%; font-size:42px; line-height:48px; font-weight:700; text-align:center;}
#title_c2 {top:-44px; left:5%;}

.service_wrap {width:100%;}
.service_wrap article {width:100%; float:left; text-align:center; margin-bottom:62px;}
.service_wrap article:last-child {margin-bottom:80px;}
.service_icon_bg {display:inline-block; width:202px; height:202px; background-color:#eee; border-radius:100%; text-align:center; margin-bottom:20px;}
.service_icon_bg>svg {width:202px; height:202px;}
.service_wrap article>div>h3 {width:100%; float:left; font-size:32px; font-weight:700; margin-bottom:15px;}
.service_wrap article>div>p {width:100%; float:left; font-size:16px; line-height:20px;}

/*new product*/
.newpd {width:100%; float:left; background-color:#0a3886;}
.pr {width:83.48%; float:left; margin:80px 8.26%;}
.pro_name {width:100%; float:left; margin-bottom:62px}
.pro_name:last-child {margin-bottom:0px;}
.pro_name>a {display:block; width:100%; height:100%;}
.pro_img {width:100%; float:left; margin-bottom:20px;}
.pro_img img {width:100%; float:left;}

.pro_text {width:100%; float:left; color:#fff; text-align:center;}

.pro_text>p:first-child {width:100%; float:left; font-size:16px; margin-bottom:10px;}
.pro_text>p:last-child {width:100%; float:left; font-size:30px; font-weight:700;}

/*footer*/
.footer {clear:both; width:100%; float:left; background-color:#dddddd;}
.f_top {width:100%; float:left;}
.fnb {width:100%; float:left; font-size:16px; text-align:center;}
.fnb>li {width:50%; float:left;}
.fnb>li>a {display:block; width:100%; height:100%; padding:25px 0;}

.f_bottom {width:100%; float:left; text-align:center; margin:30px 0; padding:0 8.26%;}
.f_bottom>p:first-child {width:100%; float:left; font-size:14px; line-height:19px; margin-bottom:20px;}
.f_bottom>p:last-child {width:100%; float:left; font-size:12px;}


/*animation*/
@keyframes fdt {
    from {transform:translateY(25px); opacity:0;}
    to {transform:translateY(0px); opacity:1;}
}
@keyframes fdl {
    from {transform:translateX(-5%); opacity:0}
    to {transform:translateX(0); opacity:1}
}
@keyframes fdr {
    from {transform:translateX(5%); opacity:0}
    to {transform:translateX(0); opacity:1}
}
@keyframes fdb {
    from {transform:translateY(-25px); opacity:0;}
    to {transform:translateY(0px); opacity:1;}
}
@keyframes rot {
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}
@keyframes rotmoveleft {
	0% {transform:rotate(0deg);}
	50% {transform:rotate(360deg) translate(0,0);}
	70% {transform:translate(-30%,-15%);}
	100% {transform:translate(-30%,-15%);}
}
@keyframes rotmoveright {
	0% {transform:rotate(0deg);}
	50% {transform:rotate(360deg) translate(0,0);}
	70% {transform:translate(30%,-15%);}
	100% {transform:translate(30%,-15%);}
}

.orangebox.move {opacity:0; animation:fdl 0.8s 0s ease forwards;}
.brand_img.move {opacity:0; animation:fdl 0.8s 0.5s ease forwards;}
.brand h2.move {opacity:0; animation:fdt 0.8s 0.8s ease forwards;}
.brand div>p.move {opacity:0; animation:fdt 0.8s 1.2s ease forwards;}

.exchange h2.move {opacity:0; animation:fdt 0.8s 0s ease forwards;}
.exchange div>p.move {opacity:0; animation:fdt 0.8s 0.5s ease forwards;}
.ebtn.move {opacity:0; animation:fdt 0.8s 0.8s ease forwards;}

.service h2.move {opacity:0; animation:fdt 0.8 0.5s ease forwards;}
.pro_name:first-child.move {opacity:0; animation:fdl 0.6s 0s ease forwards;}
.pro_name:nth-child(2).move {opacity:0; animation:fdr 0.6s 0.8s ease forwards;}
.pro_name:last-child.move {opacity:0; animation:fdl 0.6s 1.6s ease forwards;}
.pr p.move {opacity:0; animation:fdt 0.3s 0s ease forwards;}
/*Mobile*/

/*Tablet 768*/
@media all and (min-width:768px) {
.pc {display:block;}

/*navigation*/
.top {height:100px;}
#logo {left:50%; width:135px; height:68px; background:url(../img/villeroy_logo.svg);}

.menu_btn {top:30px; right:6.51%; width:50px; height:40px;}
.menu_btn span {height:6px; border-radius:6px;}
.menu_btn span:nth-child(2) {margin:11px 0px;}

.menu_btn.on {top:30px; right:6.51%; width:50px; height:40px;}
.menu_btn.on span {height:6px; border-radius:6px;}
.menu_btn.on span:last-child {margin-top:-6px;}

.gnb {width:82.03%; padding:100px 0;}
.gnb>li {height:130px; line-height:130px; font-size:68px;}
.gnb li a {padding-left:18.25%;}
    .gnb li a:hover {color:#c67809;}
.gnb>li:last-child {width:70px; height:70px; background:url(../img/instargram.svg) no-repeat center; background-size:cover; margin-top:40px; margin-left:18.25%;}
.gnb>li:last-child:hover {background:url(../img/instargram_on.svg) no-repeat center; background-size:cover;}

/*visual_slider*/
.visual_slider {height:870px; margin-top:100px; text-align:right;}
.visual_slider li {height:870px;}

.visual_text {width:90.89%;}
.visual_text>p {margin-top:284px;}
.visual_text>p:first-child {font-size:56px; line-height:74px}
.visual_text>p:last-child {font-size:128px; margin-top:36px;}

/*visual slider bx-pager*/
.visual_slider .bx-pager {top:750px;}

/*brand*/
.brand_bg {position:relative; overflow:hidden;}

/*bg svg*/
@keyframes trl1 {
    0% {transform:translateY(3%);}
    50% {transform:translateY(-10%);}
    100% {transform:translateY(3%);}
}
.tl1 {animation:trl1 5s ease 0s infinite;}

@keyframes trl2 {
    0% {transform:translateY(10%);}
    50% {transform:translateY(-25%);}
    100% {transform:translateY(10%);}
}
.tl2 {animation:trl2 3s ease 0s infinite;}
	
@keyframes trl3 {
    0% {transform:translateY(-4%);}
    50% {transform:translateY(12%);}
    100% {transform:translateY(-4%);}
}
.tl3 {animation:trl3 4s ease 0s infinite;}
    
.cbg {position:absolute; top:0; left:0; width:100%; height:100%; z-index:0;}
#cbg1_1 {position:absolute; top:40px; left:-12%; width:276px; height:276px;}
#cbg1_2 {position:absolute; bottom:50px; left:-3%; width:148px; height:148px;}
#cbg1_3 {position:absolute; top:240px; right:-2%; width:104px; height:104px;}
#cbg1_4 {position:absolute; bottom:100px; right:-5%; width:232px; height:232px;}

.brand_pic {width:81.77%; height:508px; margin:160px 9.115% 80px 9.115%;}
.orangebox {opacity:0; height:288px;}
.brand_img {opacity:0; width:95.54%; height:478px;}

.brand_text {position:relative; width:81.77%; float:left; margin:0 9.115%; margin-bottom:160px}
.title_cir {width:230px; height:230px;}
#title_c1 {top:-100px; left:-8%;}

.brand_text>h2 {font-size:68px; line-height:80px; color:#fff; margin-bottom:50px;}
.brand_text p {font-size:24px; line-height:34px;}
.brand_text>p:nth-child(3) {margin-bottom:34px;}

/*exchange*/
.exchange>div {padding:150px 9.115%;}
.exchange h2 {font-size:68px; line-height:80px; margin-bottom:40px}
.exchange p {font-size:30px; line-height:40px; margin-bottom:60px}
.ebtn {width:300px; height:80px; line-height:70px; border:3px solid #fff; font-size:26px; transition:all 0.15s 0s ease; overflow:hidden;}
    .exchange .ebtn:hover {border:3px solid #c67809; background-color:#c67809;}

/*service*/
.service {position:relative; overflow:hidden;}

/*bg svg*/
#cbg2_1 {position:absolute; top:365px; left:5%; width:48px; height:48px;}
#cbg2_2 {position:absolute; top:620px; left:-10%; width:202px; height:202px;}
#cbg2_3 {position:absolute; bottom:80px; left:7%; width:72px; height:72px;}
#cbg2_4 {position:absolute; top:135px; right:-5%; width:148px; height:148px;}
#cbg2_5 {position:absolute; top:680px; right:-2%; width:112px; height:112px;}
#cbg2_6 {position:absolute; bottom:-15px; right:-15%; width:332px; height:332px;}

.service_title {width:81.77%; margin:160px 9.115% 80px 9.115%;}
.service_title h2 {font-size:68px; line-height:80px;}
#title_c2 {top:-107px; left:2%;}

.service_wrap {width:81.77%; margin:0 9.115%}
.service_wrap article {width:50%; margin-bottom:80px;}
    .service_wrap article:last-child {margin-bottom:160px;}
.service_icon_bg {width:270px; height:270px; margin-bottom:30px;}
.service_icon_bg>svg {width:270px; height:270px;}
.service_wrap article>div>h3 {font-size:32px; margin-bottom:18px;}
.service_wrap article>div>p {font-size:18px; line-height:24px;}

/*new product*/
.newpd {position:relative; overflow:hidden;}

/*bg svg*/
#cbg3_1 {position:absolute; top:200px; left:2%; width:206px; height:206px;}
#cbg3_2 {position:absolute; top:650px; left:1%; width:156px; height:156px;}
#cbg3_3 {position:absolute; bottom:80px; left:-20%; width:348px; height:348px;}
#cbg3_4 {position:absolute; top:200px; right:3%; width:74px; height:74px;}
#cbg3_5 {position:absolute; top:700px; right:-30%; width:462px; height:462px;}
#cbg3_6 {position:absolute; bottom:-10px; right:5%; width:166px; height:166px;}

.pr {width:73.96%; margin:108px 13.02%;}
.pro_name {position:relative; margin-bottom:30px}
.pro_img {margin-bottom:0px;}
    
.pro_textbox {display:none; position:absolute; top:0; left:0; width:100%; height:inherit; background-color:rgba(0,0,0,0.6); overflow:hidden;}
.pro_text {position:absolute; top:50%; left:0; transform:translate(0,-50%);}
.pro_name>a:hover>.pro_textbox {display:block;}

.pro_text>p:first-child {font-size:24px; margin-bottom:16px;}
.pro_text>p:last-child {font-size:38px;}

/*footer*/
.fnb {width:626px; float:none; font-size:20px; margin:0 auto; margin-top:50px; margin-bottom:46px;}
.fnb>li {display:inline-block; width:auto; margin-right:45px;}
.fnb>li {display:inline-block; width:auto; margin-right:45px;}
.fnb>li:last-child {margin-right:0;}
.fnb>li>a {padding:0;}

.f_bottom {width:78%; float:none; margin:0 auto; margin-bottom:50px;}
.f_bottom>p:first-child {font-size:16px; line-height:22px; margin-bottom:16px;}
.f_bottom>p:last-child {width:100%; float:left; font-size:15px;}
}
/*Tablet 768*/

/*Tablet 1024*/
@media all and (min-width:1024px) {
/*navigation*/
.menu_btn {right:4.68%;}

.menu_btn.on {right:4.68%;}

.gnb {width:69.72%;}
.gnb li a {padding-left:15.68%;}
.gnb>li:last-child {margin-left:15.68%;}

/*visual_slider*/
.visual_slider li {height:870px;}

.visual_text {width:100%;}
.visual_text>p {padding-right:8.39%;}

/*brand*/
/*bg svg*/
#cbg1_1 {top:50px; left:1%;}
#cbg1_2 {bottom:700px; left:-3%;}
#cbg1_3 {top:700px; right:2%;}
#cbg1_4 {bottom:100px; right:8%;}   

.brand_pic {width:69.94%; height:508px; margin:160px 15.03% 80px 15.03%;}
.orangebox {height:288px;}
.brand_img {width:95.54%; height:478px;}

.brand_text {width:69.94%; margin:0 15.03%; margin-bottom:160px}
	
#title_c1 {top:-100px; left:-3%;}

/*exchange*/
.exchange>div {padding:170px 9.115%;}

/*service*/
/*bg svg*/
#cbg2_1 {top:365px; left:8%;}
#cbg2_2 {top:620px; left:-5%;}
#cbg2_3 {bottom:200px; left:8%;}
#cbg2_4 {top:215px; right:-5%;}
#cbg2_5 {top:550px; right:5%;}
#cbg2_6 {bottom:10px; right:-8%;}

.service_title {width:81.77%; margin:160px 9.115% 80px 9.115%;}
#title_c2 {top:-107px; left:0%;}

.service_wrap {width:69.94%; margin:0 15.03%;}

/*new product*/
/*bg svg*/
#cbg3_1 {top:200px; left:2%;}
#cbg3_2 {top:650px; left:1%;}
#cbg3_3 {bottom:80px; left:-15%;}
#cbg3_4 {top:380px; right:3%;}
#cbg3_5 {top:700px; right:-30%;}
#cbg3_6 {bottom:-20px; right:8%;}

.pr {width:60%; margin:100px 20%;} 
.pro_img {margin-bottom:0px;}

/*footer*/
.fnb {width:628px; float:none; font-size:20px; margin:0 auto; margin-top:50px; padding-bottom:46px;}
.fnb>li {display:inline-block; width:auto; margin-right:46px;}
    .fnb>li:last-child {margin-right:0;}
.fnb>li>a {padding:0;}

.f_bottom {clear:both; width:76%; float:none; margin:0 auto; padding-bottom:50px;}
.f_bottom>p:first-child {font-size:16px; line-height:22px; margin-bottom:16px;}
.f_bottom>p:last-child {width:100%; float:left; font-size:15px;}
}
/*Tablet 1024*/

/*PC*/
@media all and (min-width:1300px) {
.mobile {display:none;}
.centerwrap {width:1280px; margin:0 auto; padding:0 30px;}
	
/*navigation*/
.modal{display:none;}

#logo {top:50%; left:16.15%; transform:translateY(-50%);}

.gnb {position:static; width:100%; height:100px; float:left; text-align:center; background-color:transparent; margin:0; margin-top:38px; padding:0; padding-left:36.52%;}
.gnb>li {display:inline-block; width:auto; height:1em; line-height:1em; float:left; font-size:22px; margin-right:6.2%;}
.gnb li a {padding-left:0%;}
    .gnb>li:nth-child(4) {margin-right:0;}
.gnb>li:last-child {position:absolute; top:50%; right:16.15%; transform:translateY(-50%); width:40px; height:40px; margin:0;}

/*visual_slider*/
.visual_text {width:100%;}
.visual_text>p {padding-right:16.15%;}

/*brand*/
/*bg svg*/
#cbg1_1 {top:154px; left:7.29%;}
#cbg1_2 {bottom:180px; left:4.16%;}
#cbg1_3 {top:400px; right:4.16%;}
#cbg1_4 {bottom:55px; right:7.46%;}

.brand_pic {width:568px; margin:230px 44px 220px 0px;}

.brand_text {width:608px; margin:0; margin-top:230px; margin-right:0px;}
#title_c1 {top:-135px; left:80%;}
.brand .title_cir.rotate {animation:rotmoveright 2s 0s ease forwards;}

.brand_text>h2 {text-align:left;}

/*exchange*/
.exchange>div {padding:170px 0;}
.exchange p {width:850px; margin:0 auto; margin-bottom:60px}

/*service*/
/*bg svg*/
#cbg2_1 {top:50px; left:10%;}
#cbg2_2 {top:140px; left:-2%;}
#cbg2_3 {bottom:62px; left:9.68%;}
#cbg2_4 {top:20px; right:-1.875%;}
#cbg2_5 {top:210px; right:9.89%;}
#cbg2_6 {bottom:-10px; right:-8%;}

.service_title {width:100%; margin:170px 0 80px 0;}
.service_title h2 {text-align:left; margin-left:0px;}
#title_c2 {top:-120px; left:-11%;}
.service .title_cir.rotate {animation:rotmoveleft 2s 0s ease forwards;}

.service_wrap {width:100%; margin:0 0;}
.service_wrap article {width:25%; margin-bottom:170px;}

/*new product*/
/*bg svg*/
#cbg3_1 {top:38px; left:4.68%;}
#cbg3_2 {top:328px; left:0.52%;}
#cbg3_3 {bottom:-230px; left:10.41%;}
#cbg3_4 {top:20px; right:14.06%;}
#cbg3_5 {top:150px; right:-6.25%;}
#cbg3_6 {bottom:-100px; right:17.96%;}

.pr {width:91.87%; margin:100px 4.065%;} 
.pro_name {width:32.38%; float:left; margin:0; margin-right:1.43%}
    .pro_name:last-child {margin-right:0;}
.pro_img {width:100%; float:left;}

/*footer*/
.f_bottom {width:100%; padding-left:0; padding-right:0;}
	
/*animation*/
.pro_name:first-child.move {animation:fdt 0.6s 0s ease forwards;}
.pro_name:nth-child(2).move {animation:fdb 0.6s 0.8s ease forwards;}
.pro_name:last-child.move {animation:fdt 0.6s 1.6s ease forwards;}
}
/*PC*/