#togoContents .con{position: relative; top: 100px; opacity: 0;} /*pc*/ @media screen and (min-width:1343px){ /*TO-GO start*/ /*togoMain start*/ #togoMain{position: relative; height: 100vh; background-color: #222; display: flex; justify-content: space-between; transition-duration: .3s;} #togoMain .text_wrap{position: relative; width: 44%; height: 100%; transition-duration: .3s;} #togoMain .text_wrap .text_box{position: relative; width: 80%; height: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;} #togoMain .text_wrap .text_box div{position: relative; width: 80%; margin: 0 auto; transition-duration: .3s;} #togoMain .text_wrap .text_box div h2{font-size: 4em; text-align: center; margin-top: -30px; transition-duration: .3s;} #togoMain .text_wrap .text_box div .line{position:absolute; height: 1px; width:100%; background-color: #fff; left: 50%; top: 50%; transform: translate(-50%,-50%);} #togoMain .text_wrap .text_box div p{font-size: 2em; color: #fff; font-family: 'Nanum Myeongjo', serif; text-align: center; margin-top: 80px; transition-duration: .3s;} #togoMain .img_box{position: relative; width: 56%; background-image: url(../img/to_go_main.jpg); background-position:center; background-size: cover; transition-duration: .3s;} #togoMain .img_box img{width: 100%;} /*togoMain start*/ /*togoContents start*/ #togoContents{position: relative; width: 90%; margin: 100px auto; transition-duration: .3s;} #togoContents .togo_info{position: relative; display: flex; justify-content: space-between; align-items: center; transition-duration: .3s;} #togoContents .togo_info p{color: #666; font-size: 1.1em;} #togoContents .togo_info p span{color: #978774; font-size: 1em;} #togoContents .togo_info select{position: relative; width: 200px; height: 50px; border: 1px solid #ccc; color: #969696; padding-left: 20px; font-size: 1.1em; transition-duration: .3s;} #togoContents .togo_info div::after{content: ''; position: absolute; background-image: url(../img/allow_whgray.png); right:5px; top: 18px; width: 20px; height: 17px; background-repeat: no-repeat; background-color: #fff;} /**/ #togoContents .con:first-child{position: relative; margin-top: 140px;} #togoContents .con{margin-top: 100px;} #togoContents h3{font-weight: 700; font-size: 1.6em; color: #333; transition-duration: .3s;} #togoContents .con_box{position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 60px;} #togoContents .con_box>div{position: relative; width: 48%; display: flex; justify-content: space-between; background-color: #F8F8F8;} #togoContents .con_box>div .text_box{position: relative; width: 50%; padding:0 20px;} #togoContents .con_box>div .text_box .price{color: #978774; font-size: 1.1em; margin-top: 30px; transition-duration: .3s;} #togoContents .con_box>div .text_box .krw{font-size: 0.8rem; color: #978774;} #togoContents .con_box>div .text_box h4{font-size: 1.5em; margin-top: 15px; transition-duration: .3s;} #togoContents .con_box>div .text_box h4::after{content: '→'; color: #978774; font-size: 1.5em; position: absolute; left: 20px; top: 90px; opacity:1; animation: → .5s ease-out; display: none;} @keyframes →{ 0%{opacity: 0; left: 0px;} 100%{opacity: 1; left: 20px;} } #togoContents .con_box>div:hover .img_box img{transform: scale(1.1);} #togoContents .con_box>div:hover .text_box h4::after{display: block;} #togoContents .con_box>div .text_box h4+p{color: #666; font-size: 1.1em; width:85%; margin-top: 62px; transition-duration: .3s;} #togoContents .con3 .con_box>div:nth-child(3),#togoContents .con4 .con_box>div:nth-child(3){margin-top: 60px;} #togoContents .con_box>div .img_box{width: 50%; overflow: hidden;} #togoContents .con_box>div .img_box img{width: 100%; transition-duration: .3s;} /*togoContents end*/ /*TO-GO end*/ } /*tablet 가로*/ @media screen and (min-width:801px) and (max-width:1342px){ /*TO-GO start*/ /*togoMain start*/ #togoMain{position: relative; height: 100vh; background-color: #222; transition-duration: .3s;} #togoMain .text_wrap{position: relative; width: 100%; height: 40%;} #togoMain .text_wrap .text_box{position: relative; width: 80%; height: 100%; margin: 0 auto; display: flex; align-items: center; justify-content:center;} #togoMain .text_wrap .text_box div{position: relative; width: 60%; margin: 0 auto; top: 40px; transition-duration: .3s;} #togoMain .text_wrap .text_box div h2{font-size: 3em; text-align: center; margin-top: -10px; transition-duration: .3s;} #togoMain .text_wrap .text_box div .line{position:absolute; height: 1px; width:100%; background-color: #fff; left: 50%; top: 50%; transform: translate(-50%,-50%);} #togoMain .text_wrap .text_box div p{font-size: 1.5em; color: #fff; font-family: 'Nanum Myeongjo', serif; text-align: center; margin-top: 70px; transition-duration: .3s;} #togoMain .img_box{position: relative; width: 100%; height: 60%; background-image: url(../img/to_go_main.jpg); background-position:center; background-size: cover; transition-duration: .3s;} #togoMain .img_box img{width: 100%;} /*togoMain start*/ /*togoContents start*/ #togoContents{position: relative; width: 90%; margin: 100px auto; transition-duration: .3s;} #togoContents .togo_info{position: relative; display: flex; justify-content: space-between; align-items: center; transition-duration: .3s;} #togoContents .togo_info p{color: #666; font-size: 1.1em;} #togoContents .togo_info p span{color: #978774; font-size: 1em;} #togoContents .togo_info select{position: relative; width: 150px; height: 40px; border: 1px solid #ccc; color: #969696; padding-left: 20px; font-size: 1em; transition-duration:.3s;} #togoContents .togo_info div::after{content: ''; position: absolute; background-image: url(../img/allow_whgray.png); right:5px; top: 15px; width: 15px; height: 17px; background-size: contain; background-repeat: no-repeat; background-color: #fff;} /**/ #togoContents .con:first-child{position: relative; margin-top: 140px;} #togoContents .con{margin-top: 100px;} #togoContents h3{font-weight: 700; font-size: 1.3em; color: #333; transition-duration: .3s;} #togoContents .con_box{position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 60px; transition-duration: .3s;} #togoContents .con_box>div{position: relative; width: 48%; display: flex; justify-content: space-between; background-color: #F8F8F8; transition-duration: .3s;} #togoContents .con_box>div .text_box{position: relative; width: 50%; padding:0 20px; transition-duration: .3s;} #togoContents .con_box>div .text_box .price{color: #978774; font-size: 1em; margin-top: 20px; transition-duration: .3s;} #togoContents .con_box>div .text_box .krw{font-size: 0.7rem; color: #978774;} #togoContents .con_box>div .text_box h4{font-size: 1.1em; margin-top: 10px; transition-duration: .3s;} #togoContents .con_box>div .text_box h4::after{content: '→'; color: #978774; font-size: 1.2em; position: absolute; left: 20px; top: 70px; opacity:1; animation: → .5s ease-out; display: none;} @keyframes →{ 0%{opacity: 0; left: 0px;} 100%{opacity: 1; left: 20px;} } #togoContents .con_box>div:hover .img_box img{transform: scale(1.1);} #togoContents .con_box>div:hover .text_box h4::after{display: block;} #togoContents .con_box>div .text_box h4+p{color: #666; font-size: 1em; width:90%; margin-top: 25px; white-space:nowrap;overflow: hidden; text-overflow: ellipsis; transition-duration: .3s;} #togoContents .con3 .con_box>div:nth-child(3),#togoContents .con4 .con_box>div:nth-child(3){margin-top: 60px;} #togoContents .con_box>div .img_box{width: 50%; overflow: hidden;} #togoContents .con_box>div .img_box img{width: 100%; transition-duration: .3s;} /*togoContents end*/ /*TO-GO end*/ } /*tablet ~ mobile*/ @media screen and (max-width:800px){ /*TO-GO start*/ /*togoMain start*/ #togoMain{position: relative; height: 100vh; background-color: #222; transition-duration: .3s;} #togoMain .text_wrap{position: relative; width: 100%; height: 40%;} #togoMain .text_wrap .text_box{position: relative; width: 80%; height: 100%; margin: 0 auto; display: flex; align-items: center; justify-content:center;} #togoMain .text_wrap .text_box div{position: relative; width: 80%; margin: 0 auto; top: 40px; transition-duration: .3s;} #togoMain .text_wrap .text_box div h2{font-size: 1.8em; text-align: center; margin-top: -10px; transition-duration: .3s;} #togoMain .text_wrap .text_box div .line{position:absolute; height: 1px; width:100%; background-color: #fff; left: 50%; top: 50%; transform: translate(-50%,-50%);} #togoMain .text_wrap .text_box div p{font-size: 1.1em; color: #fff; font-family: 'Nanum Myeongjo', serif; text-align: center; margin-top: 50px; transition-duration: .3s;} #togoMain .img_box{position: relative; width: 100%; height: 60%; background-image: url(../img/to_go_main.jpg); background-position:center; background-size: cover; transition-duration: .3s;} #togoMain .img_box img{width: 100%;} /*togoMain start*/ /*togoContents start*/ #togoContents{position: relative; width: 90%; margin: 80px auto; transition-duration: .3s;} #togoContents .togo_info{position: relative; display: flex; justify-content: space-between; align-items: center; transition-duration: .3s;} #togoContents .togo_info p{color: #666;} #togoContents .togo_info p span{color: #978774;} #togoContents .togo_info select{position: relative; width: 120px; height: 30px; border: 1px solid #ccc; color: #969696; padding-left: 10px; transition-duration:.3s;} #togoContents .togo_info div::after{content: ''; position: absolute; background-image: url(../img/allow_whgray.png); right:5px; top: 11px; width: 13px; height: 14px; background-size: contain; background-repeat: no-repeat; background-color: #fff;} /**/ #togoContents .con:first-child{position: relative; margin-top: 80px;} #togoContents .con{margin-top: 60px;} #togoContents h3{font-weight: 700; font-size: 1.3em; color: #333; transition-duration: .3s;} #togoContents .con_box{position: relative; margin-top: 40px; transition-duration: .3s;} #togoContents .con_box>div{position: relative; width: 100%; display: flex; justify-content: space-between; background-color: #F8F8F8; transition-duration: .3s;} #togoContents .con_box>div .text_box{position: relative; width: 30%; padding:0 15px; transition-duration: .3s;} #togoContents .con_box>div .text_box .price{color: #978774; margin-top: 60px; transition-duration: .3s; font-size: 2.5vw;} #togoContents .con_box>div .text_box .krw{font-size: 0.7rem; color: #978774;} #togoContents .con_box>div .text_box h4{font-size: 3.5vw; margin-top: 5px; transition-duration: .3s;} #togoContents .con_box>div .text_box h4::after{content: none;} #togoContents .con_box>div:hover .img_box img{transform: scale(1.1);} #togoContents .con_box>div:hover .text_box h4::after{display: block;} #togoContents .con_box>div .text_box h4+p{display: none;} #togoContents .con .con_box>div{margin-top: 20px;} #togoContents .con_box>div .img_box{width: 50%; overflow: hidden;} #togoContents .con_box>div .img_box img{width: 100%; transition-duration: .3s;} /*togoContents end*/ /*TO-GO end*/ } /*pc main*/ @media screen and (min-width:1343px){ /*family start*/ /*familyMain start*/ #familyMain{position: relative; height: 100vh; background-color: #222; display: flex; justify-content: space-between; transition-duration: .3s;} #familyMain .text_wrap{position: relative; width: 44%; height: 100%; transition-duration: .3s;} #familyMain .text_wrap .text_box{position: relative; width: 80%; height: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;} #familyMain .text_wrap .text_box div{position: relative; width: 80%; margin: 0 auto; transition-duration: .3s;} #familyMain .text_wrap .text_box div h2{font-size: 4em; text-align: center; margin-top: -30px; transition-duration: .3s;} #familyMain .text_wrap .text_box div .line{position:absolute; height: 1px; width:100%; background-color: #fff; left: 50%; top: 50%; transform: translate(-50%,-50%);} #familyMain .text_wrap .text_box div p{font-size: 2em; color: #fff; font-family: 'Nanum Myeongjo', serif; text-align: center; margin-top: 80px; transition-duration: .3s;} #familyMain .img_box{position: relative; width: 56%; background-image: url(../img/family_day_main.jpg); background-position:center; background-size: cover; transition-duration: .3s;} #familyMain .img_box img{width: 100%;} /*familyMain end*/ } /*tablet 가로 main*/ @media screen and (min-width:801px) and (max-width:1342px){ /*family start*/ /*familyMain start*/ #familyMain{position: relative; height:100vh; background-color: #222; transition-duration: .3s;} #familyMain .text_wrap{position: relative; width: 100%; height: 40%;} #familyMain .text_wrap .text_box{position: relative; width: 80%; height: 100%; margin: 0 auto; display: flex; align-items: center; justify-content:center;} #familyMain .text_wrap .text_box div{position: relative; width: 60%; margin: 0 auto; top: 40px; transition-duration: .3s;} #familyMain .text_wrap .text_box div h2{font-size: 3em; text-align: center; margin-top: -10px; transition-duration: .3s;} #familyMain .text_wrap .text_box div .line{position:absolute; height: 1px; width:100%; background-color: #fff; left: 50%; top: 50%; transform: translate(-50%,-50%);} #familyMain .text_wrap .text_box div p{font-size: 1.5em; color: #fff; font-family: 'Nanum Myeongjo', serif; text-align: center; margin-top: 70px; transition-duration: .3s;} #familyMain .img_box{position: relative; width: 100%; height: 60%; background-image: url(../img/family_day_main.jpg); background-position:center; background-size: cover; transition-duration: .3s;} #familyMain .img_box img{width: 100%;} /*familyMain start*/ } /*tablet ~ mobile*/ @media screen and (max-width:800px){ /*family start*/ /*familyMain start*/ #familyMain{position: relative; height: 100vh; background-color: #222; transition-duration: .3s;} #familyMain .text_wrap{position: relative; width: 100%; height: 40%;} #familyMain .text_wrap .text_box{position: relative; width: 80%; height: 100%; margin: 0 auto; display: flex; align-items: center; justify-content:center;} #familyMain .text_wrap .text_box div{position: relative; width: 80%; margin: 0 auto; top: 40px; transition-duration: .3s;} #familyMain .text_wrap .text_box div h2{font-size: 1.8em; text-align: center; margin-top: -10px; transition-duration: .3s;} #familyMain .text_wrap .text_box div .line{position:absolute; height: 1px; width:100%; background-color: #fff; left: 50%; top: 50%; transform: translate(-50%,-50%);} #familyMain .text_wrap .text_box div p{font-size: 1.1em; color: #fff; font-family: 'Nanum Myeongjo', serif; text-align: center; margin-top: 50px; transition-duration: .3s;} #familyMain .img_box{position: relative; width: 100%; height: 60%; background-image: url(../img/family_day_main.jpg); background-position:center; background-size: cover; transition-duration: .3s;} #familyMain .img_box img{width: 100%;} /*familyMain start*/ } /*pc*/ @media screen and (min-width:1231px){ /*famCon start*/ #fam section{position: relative; height: 100vh; background-image: url(../img/family_day_bg0.jpg); background-position:center; background-size: cover; transition-duration: .3s;} #fam #famContent2{background-image: url(../img/family_day_bg1.jpg);} #fam #famContent3{background-image: url(../img/family_day_bg2.jpg);} #fam #famContent4{background-image: url(../img/family_day_bg3.jpg);} #fam #famContent5{background-image: url(../img/family_day_bg4.jpg);} #fam section .con_bg{position: relative; background-color:rgba(0,0,0,.6); width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;} .con_bg .wrap{position: relative; width: 60%; height: 65%; background-color:rgba(225,225,225,.8); display: flex; justify-content: space-between; overflow: hidden; margin-top: 20px;} .con_bg .wrap:hover .img_box img{transform: scale(1.1);} .con_bg .wrap .img_box{position: relative; width: 50%; overflow: hidden;} .con_bg .wrap .img_box img{height: 100%; transition-duration: .5s;} .con_bg .wrap .text_wrap{position: relative; width:50%; display: flex; justify-content: center; align-items: center;} .con_bg .wrap .text_wrap .text_box{position: relative; width: 85%; margin: 0 auto; height: 85%;} .con_bg .wrap .text_wrap .text_box .location{color: #666; font-size: 1.3em; position: relative;} .con_bg .wrap .text_wrap .text_box h3{font-size: 1.8em; margin-top: 40px; font-weight: bold; position: relative;} .con_bg .wrap .text_wrap .text_box .price{font-weight: bold; font-size: 1.6em; margin-top: 20px; position: relative;} .con_bg .wrap .text_wrap .text_box .price .krw{font-size: 1rem;} .con_bg .wrap .text_wrap .text_box .price .line{font-size: 1rem; text-decoration: line-through;} .con_bg .wrap .text_wrap .text_box .price .color{font-size: 1.5rem; color: #978774; font-weight: 500;} .con_bg .wrap .text_wrap .text_box>.line{height: 1px; width: 100%; background-color: #666; position: absolute; margin: 60px auto;} .con_bg .wrap .text_wrap .text_box .info{position: relative; margin-top: 120px; font-size: 1.4em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .con_bg .wrap .text_wrap .text_box p:last-child{position: absolute; bottom: 0; font-size: 1.4em;} #famContent2 .text_box p,#famContent2 .text_box h3{text-align: right; right: 0;} #famContent4 .text_box p,#famContent4 .text_box h3{text-align: right; right: 0;} /*famCon end*/ /*family end*/ } /*tablet*/ @media screen and (min-width:801px) and (max-width:1230px){ /*family start*/ /*famCon start*/ #fam section{position: relative; height: 100vh; background-image: url(../img/family_day_bg0.jpg); background-position:center; background-size: cover; transition-duration: .3s;} #fam #famContent2{background-image: url(../img/family_day_bg1.jpg);} #fam #famContent3{background-image: url(../img/family_day_bg2.jpg);} #fam #famContent4{background-image: url(../img/family_day_bg3.jpg);} #fam #famContent5{background-image: url(../img/family_day_bg4.jpg);} #fam section .con_bg{position: relative; background-color:rgba(0,0,0,.6); width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;} .con_bg .wrap{position: relative; width: 80%; height: 65%; background-color:rgba(225,225,225,.8); display: flex; justify-content: space-between; overflow: hidden; margin-top:40px;} .con_bg .wrap:hover .img_box img{transform: scale(1.1);} .con_bg .wrap .img_box{position: relative; width: 50%; overflow: hidden;} .con_bg .wrap .img_box img{height: 100%; transition-duration: .5s;} .con_bg .wrap .text_wrap{position: relative; width:50%; display: flex; justify-content: center; align-items: center;} .con_bg .wrap .text_wrap .text_box{position: relative; width: 85%; margin: 0 auto; height: 90%;} .con_bg .wrap .text_wrap .text_box .location{color: #666; font-size: 1.1em; position: relative;} .con_bg .wrap .text_wrap .text_box h3{font-size: 1.4em; margin-top: 20px; font-weight: bold; position: relative; transition-duration: .3s;} .con_bg .wrap .text_wrap .text_box .price{font-weight: bold; font-size: 1.3em; margin-top: 13px; position: relative; transition-duration: .3s;} .con_bg .wrap .text_wrap .text_box .price .krw{font-size: 0.9rem;} .con_bg .wrap .text_wrap .text_box .price .line{font-size: .9rem; text-decoration: line-through;} .con_bg .wrap .text_wrap .text_box .price .color{font-size: 1.2rem; color: #978774; font-weight: 500;} .con_bg .wrap .text_wrap .text_box>.line{height: 1px; width: 100%; background-color: #666; position: absolute; margin: 40px auto; transition-duration: .3s;} .con_bg .wrap .text_wrap .text_box .info{position: relative; margin-top: 80px; font-size: 1.1em; transition-duration: .3s;} .con_bg .wrap .text_wrap .text_box p:last-child{position: absolute; bottom: 0; font-size: 1.1em;} #famContent2 .text_box p,#famContent2 .text_box h3{text-align: right; right: 0;} #famContent4 .text_box p,#famContent4 .text_box h3{text-align: right; right: 0;} /*famCon end*/ /*family end*/ } /*big tablet*/ @media screen and (max-width:800px){ /*family start*/ /*famCon start*/ #fam section{position: relative; height: 100vh; background-image: url(../img/family_day_bg0.jpg); background-position:center; background-size: cover; transition-duration: .3s;} #fam #famContent2{background-image: url(../img/family_day_bg1.jpg);} #fam #famContent3{background-image: url(../img/family_day_bg2.jpg);} #fam #famContent4{background-image: url(../img/family_day_bg3.jpg);} #fam #famContent5{background-image: url(../img/family_day_bg4.jpg);} #fam section .con_bg{position: relative; background-color:rgba(0,0,0,.6); width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;} .con_bg .wrap{position: relative; width: 80%; height: 85%; background-color:rgba(225,225,225,.8); overflow: hidden; margin-top:80px;} .con_bg .wrap:hover .img_box img{transform: scale(1.1);} .con_bg .wrap .img_box{position: relative; height: 45%; overflow: hidden; object-position:left bottom;} .con_bg .wrap .img_box img{width: 110%; transition-duration: .5s; object-position:left bottom;} .con_bg .wrap .text_wrap{position: relative; height:55%; display: flex; justify-content: center; align-items: center;} .con_bg .wrap .text_wrap .text_box{position: relative; width: 85%; margin: 0 auto; height: 90%;} .con_bg .wrap .text_wrap .text_box .location{color: #666; position: relative;} .con_bg .wrap .text_wrap .text_box h3{font-size: 1em; margin-top: 15px; font-weight: bold; position: relative; transition-duration: .3s;} .con_bg .wrap .text_wrap .text_box .price{font-weight: bold; font-size: 1.1em; margin-top: 8px; position: relative; transition-duration: .3s;} .con_bg .wrap .text_wrap .text_box .price .krw{font-size: 0.8rem;} .con_bg .wrap .text_wrap .text_box .price .line{font-size: .8rem; text-decoration: line-through;} .con_bg .wrap .text_wrap .text_box .price .color{font-size: 1rem; color: #978774; font-weight: 500;} .con_bg .wrap .text_wrap .text_box>.line{height: 1px; width: 100%; background-color: #666; position: absolute; margin: 20px auto; transition-duration: .3s;} .con_bg .wrap .text_wrap .text_box .info{position: relative; margin-top: 40px; transition-duration: .3s;} .con_bg .wrap .text_wrap .text_box p:last-child{position: absolute; bottom: 0;} #famContent2 .text_box p,#famContent2 .text_box h3{text-align: right; right: 0;} #famContent4 .text_box p,#famContent4 .text_box h3{text-align: right; right: 0;} /*famCon end*/ /*family end*/ }