@charset "utf-8"; /* main visual */ #main-visual{position:relative; overflow: hidden} #main-visual #search{background: #414852} #main-visual #search .search-area{position: absolute; top: 22%; left: 50%; -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 670px; max-height: 100%; padding-left: 165px; padding-right: 155px; border: 5px solid #1491f3; background-color: #fff; z-index: 10} #main-visual #search .search-area select{position: absolute; top: 0; left: 0; width: 165px; height: 100%; padding: 21px 15px 19px; border: none; color: #666; font-size: 22px; font-weight: normal; text-align: center; z-index: 20} #main-visual #search .search-area input{width: 100%; height: 70px; outline: none; border: none; padding: 0 15px; background-color: #fff; font-size: 24px; box-sizing: border-box} #main-visual #search .search-area input::-webkit-input-placeholder {position: relative; top: 0; left:-13px; color: #789ec0; font-family: NanumSquare; font-size: 24px; text-align: center;opacity: 0.63;} #main-visual #search .search-area input::-moz-placeholder {position: relative; top: 0; left: -13px; color: #789ec0; font-family: NanumSquare; font-size: 24px; text-align: center;opacity: 0.63;} #main-visual #search .search-area input:-ms-input-placeholder {position: relative; color: #789ec0; font-size: 24px; font-family: NanumSquare; text-align: center} #main-visual #search .search-area .btn-sch{position: absolute; top: 0; right: 0; width: 155px; height: 100%; border: none; padding-left: 38px; background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggc%3N%2S%2Sunzna.tenaqphygher.arg%2SIvrjf%2SGrzcyngr%2SN%2SPff%2Sfglyr%2S..%2S..%2SVzntr%2Sznva%2Svpba_frnepu_j.cat) no-repeat 22px 23px, #1491f3; font-size: 22px; color: #fff; font-weight: bold} /*#main-visual #visualSlider li{max-width: 100%; position: relative; height: 496px; background-position: 50% 0; background-repeat: no-repeat; background-size: cover}*/ #main-visual #visualSlider li { max-width: 100%; position: relative; height: 496px; background-position: 50% 0; background-repeat: no-repeat; background-size: cover; cursor: pointer; } #main-visual #visualSlider li:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggc%3N%2S%2Sunzna.tenaqphygher.arg%2SIvrjf%2SGrzcyngr%2SN%2SPff%2Sfglyr%2S..%2S..%2SVzntr%2Sznva%2Sznva_ivfhny_svygre.cat); opacity: 0; } /*#main-visual #visualSlider li .meta{position: absolute; top: 48%; left: 50%; transform: translateX(-50%); width: 100%; color: #fff; text-align: center; word-break: keep-all;}*/ #main-visual #visualSlider li .meta { position: absolute; top: 48%; left: 50%; transform: translateX(-50%); width: 100%; color: #fff; text-align: center; word-break: keep-all; text-shadow: 0px 0px 5px #000, 0px 0px 10px #000, 0px 0px 20px #000, 0px 0px 30px #101010, 0px 0px 40px #101010, 0px 0px 55px #101010, 0px 0px 75px #101010; } #main-visual #visualSlider li .meta h2 { font-size: 45px; font-family: NanumSquareB; } #main-visual #visualSlider li .meta p{margin-top: 15px; font-size: 17px;line-height: 1.5;} /*#main-visual .visual-nav{position: absolute; top: 50%; left: 0; width: 100%; margin-top: -26px;}*/ #main-visual .visual-nav { position: absolute; top: 50%; left: 0; width: 100%; margin-top: -26px; cursor: pointer; } #main-visual .visual-nav .prev{float: left;} #main-visual .visual-nav .prev:after { display: block; content: '〈'; font-size: 60px; color: #fff; font-weight: bold; } #main-visual .visual-nav .next{float: right;} #main-visual .visual-nav .next:after { display: block; content: '〉'; font-size: 60px; color: #fff; font-weight: bold; } #main-visual .visual-nav button { text-shadow: 0px 0px 5px #000, 0px 0px 10px #000, 0px 0px 20px #000, 0px 0px 30px #101010, 0px 0px 40px #101010, 0px 0px 55px #101010, 0px 0px 75px #101010; } #main-visual #service-list{position: absolute; width: 100%; height: 95px; bottom: 0; left: 50%;transform: translateX(-50%); background-color: rgba(0,0,0,.65); letter-spacing:-1px;} #main-visual #service-list li{float: left; width: 11.11111%; background-position: 50% 20px; background-repeat: no-repeat} #main-visual #service-list li a{display: block; width: 100%; padding: 60px 10px 18px; color: #fff; font-size: 15px; font-weight: bold; text-align: center} /* content */ #contents{padding: 30px 0; background-color: #d8d8d8} #contents .content-list > li{float: left; width: 385px; min-height: 250px; max-height: 250px; border: 1px solid #bebebe; background-color: #fff} #contents .content-list > li:not(:nth-child(3n+1)){margin-left: 22px} #contents .content-list > li:nth-child(n+4){margin-top: 20px} #contents .content-list > li.bg-pattern{background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggc%3N%2S%2Sunzna.tenaqphygher.arg%2SIvrjf%2SGrzcyngr%2SN%2SPff%2Sfglyr%2S..%2S..%2SVzntr%2Sznva%2Sot_cnggrea.tvs)} #contents .content-list > li.video{position: relative;} #contents .content-list > li.map{position: relative; } #contents .content-list > li.rcmd{position: relative; } #contents .content-list > li.map ul{max-height: 152px; overflow-y: auto} #contents .content-list > li.video .title{position: absolute; top: 0; left: 0; z-index: 10} #contents .content-list .title{padding: 20px 30px; text-align: center} #contents .content-list .title h2 { color: #333; font-size: 22px; font-family: NanumSquareEB; } #contents .content-list .title.bgcolor-title{padding: 11px 0} #contents .content-list .title.bgcolor-title h2 { display: inline-block; padding-left: 37px; background-repeat: no-repeat; font-size: 22px; line-height: 30px; font-family: NanumSquareEB; } #contents .content-list .title.bgcolor-title.green{background-color: #388692} #contents .content-list .title.bgcolor-title.green h2{color: #fff;background-image: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggc%3N%2S%2Sunzna.tenaqphygher.arg%2SIvrjf%2SGrzcyngr%2SN%2SPff%2Sfglyr%2S..%2S..%2SVzntr%2Sznva%2Svpba_13.cat)} #contents .content-list .title.bgcolor-title.green h2 a:hover { color: inherit !important; } #contents .content-list .title.bgcolor-title.puple{background-color: #4d5da5} #contents .content-list .title.bgcolor-title.puple h2 { color: #fff; padding: 0; } #contents .content-list .title.bgcolor-title.blue{background-color: #447aaf} #contents .content-list .title.bgcolor-title.blue h2{color: #fff;background-image: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggc%3N%2S%2Sunzna.tenaqphygher.arg%2SIvrjf%2SGrzcyngr%2SN%2SPff%2Sfglyr%2S..%2S..%2SVzntr%2Sznva%2Svpba_15.cat)} #contents .content-list .title.plus-title h2{display: inline-block; padding-left: 20px; background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggc%3N%2S%2Sunzna.tenaqphygher.arg%2SIvrjf%2SGrzcyngr%2SN%2SPff%2Sfglyr%2S..%2S..%2SVzntr%2Sznva%2Szber_tenl2.cat) no-repeat 0 45%} #contents .content-list .title.left-title{text-align: left} #contents .content-list .title.white h2{color: #fff} #contents .content-list .bg-map{border: 3px solid #0078c6; background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggc%3N%2S%2Sunzna.tenaqphygher.arg%2SIvrjf%2SGrzcyngr%2SN%2SPff%2Sfglyr%2S..%2S..%2SVzntr%2Sznva%2Sot_znc.wct) no-repeat; background-size: cover} #contents .content-list .bg-map .title h2{color:#0078c6;} #contents .content-list .bg-map .info{padding: 5px 26px 20px} #contents .content-list .bg-map .button-list li{display: inline-block} #contents .content-list .bg-map .button-list li:nth-child(n+2){margin-top: 5px} #contents .content-list .bg-map .button-list li a{display: block; padding: 9px 8px; border: 1px solid #c1c1c1; background-color: #fff; color: #7d7d7d; font-size: 12px; font-weight: bold} #contents .content-list .bg-map .button-list li a:focus, #contents .content-list .bg-map .button-list li a:active, #contents .content-list .bg-map .button-list li a:hover{border-color: #0078c6; background-color: #0078c6; color: #fff;} #contents .content-list .title h2 small{margin-left: 10px; font-size: 13px} #contents .content-list .info{padding: 10px 30px 20px} #contents .content-list .info .board{padding: 20px 0 10px} #contents .content-list .info .board li { position: relative; background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggc%3N%2S%2Sunzna.tenaqphygher.arg%2SIvrjf%2SGrzcyngr%2SN%2SPff%2Sfglyr%2S..%2S..%2SVzntr%2Sznva%2Sgvg_vpba_01.tvs) no-repeat 0 50%; padding-left: 15px; padding-right: 70px; } #contents .content-list .info .board li:not(:first-child){margin-top: 5px} #contents .content-list .info .board li a { display: block; padding: 5px 0; color: #333; font-size: 15px; } #contents .content-list .info .board li .date { position: absolute; top: 8px; right: 0; font-size: 15px; } #contents .content-list .green + .info .board li .date{color: #388692;} #contents .content-list .puple + .info .board li .date{color: #4d5da5;} #contents .content-list .blue + .info .keyword-area dt{color: #447aaf;} #contents .content-list .usercontents .info .board { padding: 5px 0 10px 0; } #contents .content-list .search-area{width: 270px; margin: 20px auto 0; padding: 5px 0; border: 1px solid #ccc; text-align: center} #contents .content-list .search-area input{width: 175px; border: none; padding: 5px 10px; font-size: 16px;} #contents .content-list .search-area input::-webkit-input-placeholder { color: #333; font-weight: bold; font-family: NanumSquare; font-size: 16px; } #contents .content-list .search-area input::-moz-placeholder { color: #333; font-weight: bold; font-family: NanumSquare; font-size: 16px; } #contents .content-list .search-area input:-ms-input-placeholder { color: #333; font-family: NanumSquare; font-size: 16px; } #contents .content-list .search-area button { position: relative; top: -2px; vertical-align: middle; } #contents .content-list .keyword-area{width: 270px; margin: 25px auto 0;} #contents .content-list .keyword-area dl+dl{margin-top: 6px} #contents .content-list .keyword-area dt { float: left; width: 75px; font-size: 14px; line-height: 18px; font-family: NanumSquareB; } #contents .content-list .keyword-area dd{float: left; width: 195px; line-height: 18px; } #contents .content-list .keyword-area dd a { color: #666; font-size: 13px; /*font modify*/ font-family:'Malgun Gothic'; letter-spacing:-1.2px; line-height:1.15em;} #contents .content-list .info .tab{position: relative;} #contents .content-list .info .tab .btn-tab{position: relative; display: inline-block; z-index: 100; min-width: 100px; max-width: 100px; word-break: keep-all; padding: 16px 0; background-color: #d8d8d8; color: #666; font-size: 16px; cursor: pointer; text-align: center;} #contents .content-list .info .tab li:not(:first-child) .btn-tab{margin-top: 1px} #contents .content-list .info .tab .btn-tab:hover,#contents .content-list .info .tab li.on .btn-tab{background-color: #474747; color: #fff;} #contents .content-list .info .tab li.on .btn-tab:after{content: ''; display: block; position: absolute; top: 19px; right: -10px; width: 0; height: 0; border-left: 10px solid #474747; border-right: none; border-top: 6px solid transparent; border-bottom: 6px solid transparent;} #contents .content-list .info .tab ul { display: none; position: absolute; top: 0; right: 0; width: 100%; height: 152px; overflow-y: auto; padding-left: 130px; *zoom: 1; } #contents .content-list .info .tab li.on ul{display: block;} #contents .content-list .info .tab ul.line{top: 25px;} #contents .content-list .info .tab ul.line:nth-of-type(2){top: 80px;} #contents .content-list .info .tab ul.line:after{content: ''; display: block; clear: both;} #contents .content-list .info .tab ul.line li{float: left; margin-right: 6px} #contents .content-list .info .tab ul li a{display: block; padding: 3px 0;color: #666; font-size: 14px; /*font modify*/ font-family:'Malgun Gothic'; letter-spacing:-1.5px; line-height:1.15em;} #contents .content-list .view .info .tab ul { padding-left: 120px; } #contents .content-list .view .info .tab li li { padding-left: 15px; background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggc%3N%2S%2Sunzna.tenaqphygher.arg%2SIvrjf%2SGrzcyngr%2SN%2SPff%2Sfglyr%2S..%2S..%2SVzntr%2Sznva%2Sgvg_vpba_01.tvs) no-repeat 0 /*font modify*/60%; } #contents .content-list .glance .info { padding: 20px 30px 0 30px; } #contents .content-list #rcmdSlider li{min-height: 140px;} #contents .content-list .img-round { width: 37%; border: 1px solid #ccc; border-radius: 20%; cursor: pointer; } #contents .content-list .img-round,#contents .content-list .img-info{float: left;} #contents .content-list .img-info{width: 56%;padding: 12px 0 0 20px;} /*#contents .content-list .img-info h3 { color: #177f54; font-size: 18px; cursor: pointer; font-family: NanumSquareB; }*/ #contents .content-list .img-info h3 { color: #177f54; font-size: 18px; cursor: pointer; letter-spacing: -1px; } /*#contents .content-list .img-info p { overflow: hidden; max-height: 70px; margin-top: 15px; color: #666; font-size: 13px; line-height: 18px; word-break: keep-all; cursor: pointer; }*/ #contents .content-list .img-info p { overflow: hidden; max-height: 70px; margin-top: 15px; color: #666; font-size: 13px; line-height: 18px; word-break: keep-all; cursor: pointer; letter-spacing: -1px; } #contents .content-list #rcmdSlider li{position: relative;} #contents .content-list .rcmd-nav{position: absolute; top: 3px; right: 3px} #contents .content-list .rcmd-nav .rcmd-count{display: inline-block;padding: 4px 6px 3px; background-color: #363636; color: #f8f8f8; font-size: 10px; font-weight: bold } #contents .content-list .rcmd-nav button{vertical-align: top} #contents .content-list .rcmd-nav button.play{display: none;} #contents .content-list #videoSlider li{position: relative; height: 250px;} #contents .content-list #videoSlider li .btn_play { position: absolute; top: 50%; left: 50%; width: 64px; margin-top: -31px; margin-left: -32px; cursor: pointer; } /*#contents .content-list #videoSlider li div { display: block; position: absolute; left: 0; bottom: 0; padding: 15px 30px; width: 100%; font-size: 20px; font-weight: bold; color: #fff; text-shadow: 0px 0px 5px #000; }*/ #contents .content-list #videoSlider li div { display: block; position: absolute; left: 0; bottom: 0; padding: 15px 30px; width: 100%; font-size: 20px; font-weight: bold; color: #fff; letter-spacing: -2px; text-shadow: 0px 0px 5px #000; } #contents .content-list .video-nav{position: absolute; top: 3px; right: 3px} #contents .content-list .video-nav .video-count{display: inline-block;padding: 4px 6px 3px; background-color: #363636; color: #f8f8f8; font-size: 10px; font-weight: bold } #contents .content-list .video-nav button{vertical-align: top} #contents .content-list .video-nav button.play{display: none;} /* 공통 동영상 썸네일 적용 : 2020-11-17 */ .video .lSSlideOuter { background: url("http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggc%3N%2S%2Sunzna.tenaqphygher.arg%2Spbagrag%2Svzntr%2Spbzzba%2Svzt_ivqrb.wct"); } #contents .content-list .area-list li { float: left; width: 25%; } #contents .content-list .area-list li:nth-child(n+5) { margin-top: 5px; } #contents .content-list .area-list li:nth-child(4n+2) { padding-left: 5%; } #contents .content-list .area-list li:nth-child(4n+3) { padding-left: 5%; } #contents .content-list .area-list li:nth-child(4n+4) { padding-left: 5%; } #contents .content-list .area-list li a{color: #666; font-size: 13px;} #contents .content-list .area-list li a:hover, #contents .content-list .area-list li a:focus, #contents .content-list .area-list li a:active{font-weight: bold} /* bottom */ #bottom{background-color: #3d4650; padding: 20px 0;} #bottom li{float: left; width: 47.5%; color: #fff;} #bottom .left-area{float: left; width: 32%;} #bottom .left-area .plus{display: inline-block;margin: 15px 0; padding-right: 20px; font-size: 16px; font-weight: normal; background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggc%3N%2S%2Sunzna.tenaqphygher.arg%2SIvrjf%2SGrzcyngr%2SN%2SPff%2Sfglyr%2S..%2S..%2SVzntr%2Sznva%2Szber_juvgr.cat) no-repeat 100% 3px} #bottom .left-area p{color: #f7f5f3; font-size: 14px; line-height: 18px; opacity: .6} #bottom .right-area{float: left; width: 68%;} #bottom .b1 .info-btn-area li{width: 50%; height: 120px; background-repeat: no-repeat; background-size: cover; text-align: center} #bottom .b1 .info-btn-area li:nth-child(1){background-image: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggc%3N%2S%2Sunzna.tenaqphygher.arg%2SIvrjf%2SGrzcyngr%2SN%2SPff%2Sfglyr%2S..%2S..%2SVzntr%2Sznva%2Sot_vasb1.wct)} #bottom .b1 .info-btn-area li:nth-child(2){background-image: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggc%3N%2S%2Sunzna.tenaqphygher.arg%2SIvrjf%2SGrzcyngr%2SN%2SPff%2Sfglyr%2S..%2S..%2SVzntr%2Sznva%2Sot_vasb2.wct)} #bottom .b1 .info-btn-area li a{position: relative; top: 55%; display: inline-block; padding: 5px 0; min-width: 120px; border: 1px solid #fff; color: #f7f5f3 !important; font-size: 14px} #bottom .b2{margin-left: 5%} #bottom .b2 .left-area{width: 28%} #bottom .b2 .right-area{width: 72%} #bottom .b2 .right-area li{width: 33.333%; margin: 0; background-repeat: no-repeat; background-position: 50% 20%} #bottom .b2 .right-area li.r1{background-image: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggc%3N%2S%2Sunzna.tenaqphygher.arg%2SIvrjf%2SGrzcyngr%2SN%2SPff%2Sfglyr%2S..%2S..%2SVzntr%2Sznva%2Svzt_znc2.cat)} #bottom .b2 .right-area li.r2{background-image: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggc%3N%2S%2Sunzna.tenaqphygher.arg%2SIvrjf%2SGrzcyngr%2SN%2SPff%2Sfglyr%2S..%2S..%2SVzntr%2Sznva%2Svzt_obbx.cat)} #bottom .b2 .right-area li.r3{background-image: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggc%3N%2S%2Sunzna.tenaqphygher.arg%2SIvrjf%2SGrzcyngr%2SN%2SPff%2Sfglyr%2S..%2S..%2SVzntr%2Sznva%2Svzt_obbx2.cat)} #bottom .b2 .right-area li a{display: block; padding: 95px 0 10px; color: #f7f5f3; font-size: 14px; font-weight: bold; text-align: center} @media screen and (max-width: 1220px) { #main-visual .visual-nav{width: 100%;} #contents .content-list > li{width: 32.3%} #contents .content-list > li:not(:nth-child(3n+1)){margin-left: 1.5%} #contents .content-list > li:nth-child(n+4){margin-top: 7px} #contents .content-list .search-area{width: 100%} #contents .content-list .keyword-area{width: 100%} #contents .content-list .keyword-area dt{width: 75px;} #contents .content-list .keyword-area dd{width: 69%;} } @media screen and (max-width: 1150px) { #main-visual #service-list{display: none;} #main-visual{height: 400px; overflow: hidden} } @media screen and (max-width: 1024px) { #contents .content-list > li{width: 49.25%;} #contents .content-list > li:nth-child(3){display: none;} #contents .content-list > li:nth-child(7){display: none;} #contents .content-list > li:nth-child(8){display: none;} /*#contents .content-list > li:nth-child(9){display: none;}*/ #contents .content-list > li:not(:nth-child(3n+1)){margin-left: 0} /*#contents .content-list > li:nth-child(2n+3), #contents .content-list > li:nth-child(2){margin-left: 1.5%}*/ #contents .content-list > li:nth-child(2), #contents .content-list > li:nth-child(5), #contents .content-list > li:nth-child(9){margin-left: 1.5%} #rcmdSlider{margin-top: 10px} #contents .content-list .img-info{padding: 10px 0 0 20px;} #bottom li{width: 50%;} #bottom .b2{margin-left: 0} #bottom .left-area, #bottom .right-area{float: none} #bottom .right-area{width: 100%} #bottom .b2 .left-area{width: 100%; padding-left: 25px} #bottom .b2 .right-area{width: 100%} #bottom .left-area p{display: none} } @media screen and (max-width: 1000px) { #main-visual #service-list li a{padding: 60px 0 18px;} #main-visual #visualSlider li .meta{padding: 0 100px;} #main-visual #visualSlider li.v3 .meta{top: 44%;} #contents .content-list .info{padding: 10px 20px 20px;} #contents .content-list .glance .info { padding: 20px 20px 20px; } #contents .content-list .img-info{padding: 0 0 0 15px;} #rcmdSlider{margin-top: 20px} #contents .content-list .info .tab .btn-tab{min-width: 85px} #contents .content-list .info .tab ul{padding-left: 110px} #contents .content-list .page-2{display: none;} #contents .content-list .keyword-area{margin-top: 15px} #contents .content-list .keyword-area dl{ position: relative; padding-left: 75px} #contents .content-list .keyword-area dt{position: absolute; top: 0; left: 0;} #contents .content-list .keyword-area dd{width: 100%} } @media screen and (max-width: 915px) { #contents .content-list .search-area{margin-top: 20px} } @media screen and (max-width: 770px) { #main-visual{height: 400px; overflow: hidden} #main-visual #visualSlider li{height: 400px;} #main-visual #visualSlider li .meta{top: 51%; padding: 0 50px;} #main-visual #visualSlider li .meta h2{font-size: 40px} #main-visual #visualSlider li .meta p{font-size: 15px;} #main-visual #visualSlider li.v3 .meta{top: 47%} #main-visual .visual-nav{top: 55%;} #main-visual #search .search-area{width: 81%; padding-left: 22%} #main-visual #search .search-area select{width: 28%; height: 60px; padding: 18px 15px 16px;} #main-visual #search .search-area input{height: 60px;} #main-visual #search .search-area .btn-sch{background-position: 22px 17px} #main-visual #service-list{display: none;} } @media screen and (max-width: 620px) { #main-visual #visualSlider li .meta{top: 50%;} #main-visual #visualSlider li.v3 .meta{top: 46%;} #main-visual #search .search-area{width: 488px; max-width: 93%; padding-left: 25%} } @media screen and (max-width: 570px) { #bottom li{float: none; width: 100%;} #bottom .b2 .left-area{padding-left: 0} #bottom .right-area li{float: left;} } @media screen and (max-width: 490px) { #main-visual{height: 310px; overflow-y: hidden} #main-visual #visualSlider li{height: 310px;} #main-visual #visualSlider li .meta h2{font-size: 25px} #main-visual #visualSlider li .meta{top: 54%;} #main-visual #visualSlider li.v3 .meta{top: 49%;} #main-visual .visual-nav{top: 57%;} #main-visual #search .search-area{padding-left: 27%; padding-right: 125px} #main-visual #search .search-area select{font-size: 18px} #main-visual #search .search-area input::-webkit-input-placeholder{top: 0; font-size: 20px;} #main-visual #search .search-area input::-moz-placeholder{top: 0; font-size: 20px;} #main-visual #search .search-area input:-ms-input-placeholder{top: 0; font-size: 20px} #main-visual #search .search-area .btn-sch{width: 125px; background-position: 17px; background-size: 20px; font-size: 20px} #contents .content-list > li{width: 100%} #contents .content-list > li:nth-child(2n+3), #contents .content-list > li:nth-child(2){margin-left: 0} #contents .content-list > li:nth-child(8){margin-left: 0} #contents .content-list > li:nth-child(2){margin-top: 7px;} #contents .content-list > li.view{min-height: auto; max-height: none} #contents .content-list .info .tab .btn-tab{position: absolute; left: 0} #contents .content-list .info .tab li:nth-child(1) .btn-tab{top: 0;} #contents .content-list .info .tab li:nth-child(2) .btn-tab{top: 50px;} #contents .content-list .info .tab li:nth-child(3) .btn-tab{top: 100px;} #contents .content-list .info .tab ul{overflow-y: visible; position: static; height: auto} #contents .content-list{position: relative; padding-bottom: 771px} #contents .content-list > li:nth-child(1), /*#contents .content-list > li:nth-child(7),*/ #contents .content-list > li:nth-child(9), #contents .content-list > li:nth-child(4){position: absolute; left: 0} #contents .content-list > li:nth-child(1){bottom: 514px;} /*#contents .content-list > li:nth-child(7) { bottom: 257px; }*/ #contents .content-list > li:nth-child(9) { bottom: 257px; } #contents .content-list > li:nth-child(4){bottom: 0 } } @media screen and (max-width: 455px) { #main-visual #search .search-area{padding-left: 120px} #main-visual #search .search-area select{width: 120px;} } @media screen and (max-width: 420px) { #main-visual #visualSlider li .meta p{display: none;} #main-visual #visualSlider li .meta{top: 65%;} #main-visual #visualSlider li.v3 .meta{top: 62%;} #main-visual .visual-nav{top: 68%;} #main-visual #search .search-area{padding-right: 107px} #main-visual #search .search-area .btn-sch{width: 110px; background-position: 8px 20px; padding-left: 33px} #main-visual #search .search-area input{padding: 0 5px;} } @media screen and (max-width: 380px) { #main-visual #search .search-area{padding-right: 85px} #main-visual #search .search-area .btn-sch{width: 50px; padding-left: 5px; text-indent:-999px; background-position:center;} #main-visual #search .search-area input::-webkit-input-placeholder{left: 0; text-align: left} #main-visual #search .search-area input::-moz-placeholder{left: 0; text-align: left} #main-visual #search .search-area input:-ms-input-placeholder{left: 0; text-align: left} }